A FLINT client, written in Vue, to provide an awesome user interface for configuring simulations using the FLINT.Cloud APIs
This project provides an intuitive way for new to explore some preconfigured FLINT modules, including the Generic Budget Carbon Model (GCBM), in order to better understand how the FLINT system works. Our client is written as a Web application and can be used in a local or remote environment. Please contact us if you'd like help deploying your cloud instance or customizing the client.
To set up this project locally follows the below procedure:
- Pull the below docker image to run
flint.example
:
docker pull shubhamkarande13/flint.example:bionic
- Clone FLINT.UI repository:
When using submodules the installation code needs to be:
git clone --recursive https://github.com/moja-global/flint-ui
Or if you've already initialized the repository without the submodule
git submodule update --init --recursive
- Now get inside the repository directory and build the
docker-compose.yml
file by following the below command:
docker-compose up
This will build all the docker images inside the docker-compose.yml
file. It will take some time and after that, you can see all images list in the Docker app.
docker-compose.yml
file is compose of three services i.e. flint.example.api
, flint.gcbm.api
, flint.ui
.
Now you can start all the containers by clicking on the START
button or using the command docker-compose up
. You can also use the command docker start {name of the container}
to start the only specific container.
All containers list will look like this in the Docker app:
If you want to shut down a specific container click on the STOP
button of that specific container in the Docker app. You can also use the command line to stop a specific container by using the command docker stop {name of the container you want to stop}
To shut down, the whole docker-compose.yml
file and all services inside it then use the command docker-compose down
.
You can also run
docker-compose.yml
in Detached mode. Detached mode, shown by the option--detach
or-d
, means that a Docker container runs in the background of your terminal. It does not receive input or display output. So the command for runningdocker-compose up
in Detached mode isdocker-compose up -d
.
- To view the UI please navigate to 127.0.0.1:8000. UI will look something like this:
To run the Vue app locally, you can follow the below procedure:
- Go to the
flint.ui
folder and runyarn install
. - Run
yarn serve
to start the Vue app server. - Go to 127.0.0.1:8000 to view the Vue app.
Storybook dependencies and configuration are located under the flint.ui/.storybook
directory.
To build and launch Storybook locally, we have to follow the below procedure:
Go to the flint.ui
directory.
- Install Storybook dependencies:
yarn install
- Start the Storybook in development mode:
yarn storybook
Go to localhost:6006 to view the Storybook.
We have deployed Storybook on Chromatic. It is made by Storybook maintainers. Chromatic automates gathering UI feedback, visual testing, and documentation, so developers can iterate faster with less manual work.
- Get a permalink to FLINT-UIโs latest published Storybook on a given branch. Replace
<branch>
with the designated branch.
https://<branch>--612f3734da98c9003a398626.chromatic.com
- Get a permalink to the latest published component or library on a given branch. Add the
&branch=<branch>
query parameter to the url.
https://chromatic.com/library?appId=612f3734da98c9003a398626&branch=<branch>
Storybook live (master branch): https://master--612f3734da98c9003a398626.chromatic.com
We are following Yarn package manager.
Our package.json
file is gitignored to enforce strict management of our client dependencies.
In order to add a new dependency, please:
- use
yarn add <your-package>
git checkout -b dependency/<your-package>
git add --force flint.ui/package.json
git push
and submit a PR with only thepackage.json
changes
Our CI build will test for conflicts and your new dependency will be added after your PR has been reviewed.
The Vue.js style guide has been used to maintain a consistent style throughout the project. Click here to learn more about the style guide.
One exception is the case used to describe the ecological models exposed to our FLINT client. Because model names, and sometimes model variables, often use acronyms these remain capitalized.
Obvious examples are:
- GCBM: Generic Carbon Budget model
- FLINT: Full Lands Integration Tool
- RothC: Rothamstead Carbon model
We recommend using ESLint and the Prettier plugins to make conforming to the Vue style guide easy. There is official integration for VSCode and other editors. Find out more here.
If you have ESLint installed globally, you can run it from the flint.ui
directory. For example, this will detect any errors in the src
folder:
eslint --ext .js,.vue src
Minor errors can be fixed automatically:
eslint --fix --ext .js,.vue src
moja global welcomes a wide range of contributions as explained in Contributing document and the About moja-global Wiki.
- You can find FAQs on the Wiki.
- If you have a question about the code, submit user feedback in the relevant repository
- If you have a general question about a project or repository or moja global, join moja global and
- submit a discussion to the project, repository or moja global team
- submit a message to the relevant channel on moja global's Slack workspace.
- If you have other questions, please write to [email protected]
Thanks go to these wonderful people (emoji key):
moja global ๐ |
This project follows the all-contributors specification. Contributions of any kind are welcome!
The following people are Maintainers Reviewers Ambassadors or Coaches
moja global ๐ |
Maintainers review and accept proposed changes Reviewers check proposed changes before they go to the Maintainers Ambassadors are available to provide training related to this repository Coaches are available to provide information to new contributors to this repository