A experimental FLINT client, written in Vue, to provide an awesome user interface for configuring simulations using the FLINT.Cloud APIs.
Home Page: flint-ui.vercel.app
License: Mozilla Public License 2.0
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
This process involves few basic steps:
The Vue docs are amazing. Let's make sure our UI developers know we follow them by adding a section to our README on coding style and providing a link:
https://v3.vuejs.org/style-guide/
EDIT: see comment from @waridrox
Currently application state is set in individual components, but this becomes tricky to manage when accessing data across multiple components (e.g. #5).
Soon we will also be adding job management to the GCBM using the Create -> Upload -> Run -> Review workflow, where the configuration and outputs occur in different parts of our application.
Therefore we need an improved state management framework. I recommend Vuex but welcome other design considerations.
https://vuex.vuejs.org/guide/state.html#single-state-tree
The RothC example takes in JSON arrays as config. It'd be nice to display these in a table. Here are some examples:
https://tailwindcss.com/docs/table-layout
https://vuematerial.io/components/table
Currently, there is no installation documentation on the Sphinx website.
We can have an installation.rst file and link it to the index.rst to have it centrally on the website.
No response
We can just copy the instructions on the README.md file and copy that to a Sphinx file.
No response
Describe the bug
Storybook doesn't work. Also I don't know why is it in the default docker compose file. We should have a different docker compose file for running Storybook with the FLINT UI.
To Reproduce
Steps to reproduce the behavior:
Run docker-compose up --build from the FLINT-UI directory.
Expected behavior
Storybook should work.
Screenshots
Please check the comments.
CC: @waridrox
This issue helps to keep everyone on the same page about what parts of the Flint UI-GCBM we are currently planning on improving/developing.
We’re currently focusing on developing steps 4 to 8 in the UI. This document further expands those steps.
You can know about the rest of the steps in detail with the help of the documentation and videos focused on the GCBM.
This is a very rough sketch of how this might work is presented at https://wireframe.cc/rLPTTX
All FLINT simulations are temporally explicit (i.e. have a time component). Every run needs to be configured with a start and and end date. Vue Material has a simple date picker component, but it'd be especially helpful if we can also summarise the number of simulation years using moment.js or a similar library - I always recommend using standard logic where dates are concerned 😅
https://vuematerial.io/components/datepicker/
https://momentjs.com/docs/#/displaying/difference/
I am trying sample GCBM runs locally. I have hosted FLINT.Cloud on GCP using Terraform script and got ingress URL as this https://fc-ingress-4gtzbngbgq-uc.a.run.app/. So now in FLINT-UI (Vue app) we are using the docker container of GCBM to run the simulations with http://localhost:8081/ URL. So I replaced http://localhost:8081/ to https://fc-ingress-4gtzbngbgq-uc.a.run.app/ all over the FLINT-UI codebase thought it will work and we will be able to simulate with GCP as backend but it is not working showing network error. So help is needed here.
The current 'Table of contents' section doesn't match and link correctly with the contents of the README.
To do:
Claim this issue: Comment below to claim this issue.
You can go through this tutorial if you aren't familiar with working around with Github.
Fix the 'Table of contents' section in the README file
Commit your changes and create a Pull Request.
If you feel stuck or would like to ask questions/have a discussion you can reach out to us on Slack or comment your doubt under this issue itself.
The current page looks like this:
What are we aiming at:
The current landing page of Flint UI is not in accordance with the new design.
There are some things that needs to be changed:
Most of the issues require some style changes, and the Button component can be imported in LandingPageCard.vue and used for redirecting to the appropriate link (with a new onClick method)
Current UI of landing page:
UI after making changes:
Similar changes can be made to the banner to match the new design.
As of now, moja global docker images are put in Docker Hub by different people with their accounts so it's hard to have control over that. Also, there are no Continuous integration workflows set up in the repository so the images are not able to update when there is a new release in the project.
To overcome this problem let's have a consistent platform to put our docker images. I would just let's publish the docker images to the GitHub container registry. Also, we will add Continuous integration workflows to make the docker images updated.
GitHub container registry is a part of GitHub Packages. It is a software package hosting service that allows you to host your software packages privately or publicly and use packages as dependencies in your projects.
To automate the task we will need two Github Action i.e. docker-image.yaml which will build a docker image to deploy, run, or push to a registry, and docker-publish.yaml which will build, test, and push docker image to GitHub container registry.
These two actions will run whenever there is a push to the main or master branch or we can also set a cron job to run these two actions.
As we develop more complex components, like #7 and #8, it'd be great to document how they should be used so that developers are able to customise the client to their FLINT implementation.
StoryBook.js seems offer a powerful way to manage Vue components. Let's see if it's a good match for our project!
https://storybook.js.org/docs/vue/get-started/introduction/
Creating Issue Templates using the Issue forms and replacing the markdown files with YAML files.
We need to upload multiple files to the FLINT endpoints. Vue Material has a nice file upload component: https://vuematerial.io/components/file/
As per the new design updates, we want to update our Button Component across the project.
We want a new Button Component which is like:
Normal State:
Hover State:
The new Button shall go in the flint.ui/src/components/Button/Button.vue (create the component in this path). Refer src/stories/Button.vue component for more insights. Refer above given design for developing the component.
Make sure the Button Component is:
Feel Free to ask questions or curiosities around its implementation.
Configuration is not running properly.
Date / Time is also not formatte
No response
No response
No response
Linux
No response
The current notes assume that a person willing to contribute is experienced.
This issue aims at:
Most spatially explicit models (Chapman Richards, GCBM) have coordinates. It'd be nice to give users a sense of place when they're running their models. VueLayers looks like a nice framework for this feature.
The very simplest test we can try is to add a Latitude and Longitude to the Point example endpoint and let users choose where their simuation takes place: https://vuelayers.github.io/#/docs/component/point-geom
To do: Update the README file.
In order to work on this issue:
Claim this issue: Comment below to claim this issue.
You can go through this tutorial if you aren't familiar with working around with Github.
Restructure the README file as follows:
You can use this template for reference.
If you feel stuck or would like to ask questions/have a discussion you can reach out to us on Slack or comment your doubt under this issue itself.
Reason for this issue: The developer Notes have been listed in multiple places and make the README heavy. This may make the README light weighted.
To do: Update the README file.
To work on this issue:
Claim this issue: Comment below to claim this issue.
You can go through this tutorial if you aren't familiar with working around with Github.
Modify the 'Developers notes' section in README file as follows:
- Developer Notes
+ Contributing
+ To contribute to FLINT-UI:
+ 1) Go through our contributing guidelines over [here.](https://github.com/moja-global/About_moja_global/tree/master/Contributing#community-contributions)
+ 2) Go through the Development Notes [here.](https://github.com/moja-global/FLINT-UI/blob/master/docs/DevelopmentGuide/DevelopmentNotes.rst).
If you feel stuck or would like to ask questions/have a discussion you can reach out to us on Slack or comment your doubt under this issue itself.
Currently the Button visible in storybook is an example story added when first StoryBook.js was added to the repo (#32). This file can be replaced with the Button component that was created for the new design.
We can replace stories/Button.stories.js with stories/Button/Button.stories.js, which is the button we will be using for the new design.
There may be some changes required before the Button component is properly visible on storybook (run yarn storybook to check if the Button component is properly rendered with different props in storybook).
As per new design, Accordion component is included at multiple places. In general, accordion component is a component that has title text, and on clicking the button; it can be expanded where some descriptive text can be seen. Can refer to different design libraries like chakra/bootstrap etc. for its implementation (props, etc.) eg. see this
Create Accordion component similar to:
Create this new component in flint.ui/src/components folder.
Make sure that:
Feel Free to ask questions or curiosities around its implementation.
There are several benefits in using yarn over npm, most notably:
Currently, we are motivated to restructure the FLINT-UI.
This issue is a piece of the puzzle.
Todo:
Comment out/Remove the Sidebar from the UI.
@shubhamkarande13 discovered that JS is lazy and treats floats with no decimal place as integers (i.e. 0.0 = 0). The FLINT does not like this and, worse, uses a mixture of integers and floats in it's configuration.
Currently the solution is to wrap all floats with special characters ($$) but this is undocumented and might be difficult to manage as our application grows in complexity. Alternative solutions are welcomed.
Now that we've got some basic features down we don't want to lose them (e.g. #3). It'd be nice to have automated end-to-end testing that, at minimum:
local containers from the flint.cloud sub-module, using the latest FLINT.example imageAny means to further test the UI functionality would also be fantastic (e.g. modifying the default config to alternative values and validating the response).
Hadolint is a tool for linting Dockerfiles. To know more about it, visit here: https://github.com/hadolint/hadolint
We would like to integrate Dockerfile linting as part of our CI pipeline to discover static issues and resolve them.
Use the Hadolint action, referenced here: https://github.com/marketplace/actions/hadolint-action
Add it to main.yml and configure it to run with flint.ui/Dockerfile.
No response
No response
#44 uncovered an dependency incompatibility that was not resolved before merge, meaning our CI pipeline does not currently build.
@shubhamkarande13 - can you please post the error message here? Let's try to find a solution!
The bug: After running the Point or RothC simlation, the Point & RothC output tables do not load in the first time. We need to go to some other page (for example: the Dashboard) and then come back to Output tables, and then the table loads.
Expected behavior: The table should load up in the first try itself.
We can now edit the RothC config which is fantastic, but it's not yet making it out of the client to the rothc endpoint on our backend.
Therefore we need to replicate the logic from the send_pointConfig action for RothC. Example at: https://github.com/moja-global/FLINT-UI/blob/master/flint.ui/src/store/index.js#L391
Refactor the current CI to build the image and then scan for vulnerabilities. Add a multi stage build for linting to run as a part of docker build.
#13 describes a problem saving numeric values as config. Instead of writing code to remove the special characters for each endpoint call, we should write a custom stringify function that handles this for us to replace the default stringify function.
Example here: https://github.com/moja-global/FLINT-UI/blob/master/flint.ui/src/store/index.js#L393-L401
Currently, the date-picker component looks like:
We are aiming for this component design as per latest design update for flint.ui
Create this component in the flint.ui/src/components/. You can take reference from other components available in the folder. (don't delete any other component files)
Make sure that:
Feel Free to ask questions or curiosities around its implementation.
@shubhamkarande13 and I discussed generalising the mutations for the Point example in #17
One solution might be to define a generic function that accepts a pool index (e.g. 1, 2, 3) or a name (e.g. "Pool 3") as well as the value to be set. Then we can call this mutation three times to set each value, rather than having one mutation for each pool.
Goal: Do Not Repeat Yourself (the DRY principle)
Graphs are much easier quickly review than data tables. Taswira demonstrates this well with it's change graph.
These ones look nice and they have a clear example of displaying local and API data: https://vue-chartjs.org/guide/#chart-with-api-data
We have some early documentation for RothC here, with a link to a more comprehensive user guide. We should improve the documentation of the model and improve it's presentation in our UI.
This can be achieved by adding correct labels for UI components related to the presentation, input or review of different datasets and carbon pools:
No response
No response
For now, the navbar only shows Documentation and Github. The new "Contact Us" element will be redirected to the organisation's email.
As of now, the project lacks any core E2E testing. We would need a consistent E2E testing strategy to test our features over CI before rolling it out in the production.
We would like it to use Cypress. The contributor who is planning on doing it should plan the core features that need to be tested, identify the user story and integrate this with the CI.
No response
This issue can be kept open for contributors participating with Moja global on behalf of student-run open-source programs.
The params for uploading file types in the GCBM runs requires specific file types to be uploaded that are unsupported via the MIME standards in the browser. Some of these are .db, .cfg, .conf etc. Here's the list for the supported file types in the browser - https://www.iana.org/assignments/media-types/media-types.xhtml
This is how the file types are getting referenced in the file uploader -
accepted-file-types="image/tiff, image/x-tiff, application/json, application/x-geotiff, application/gml+xml, application/x-wms, text/xml, "The closest thing that may be possible now is the .zip file type which would be sent to the upload route and unzipped there...
Users should be able to review the metadata and associated config templates for all uploaded data.
In order to keep track of the current application state, we can load the names of uploaded files into a layers array in the Vuex store using Dropzones getAcceptedFiles method.
Because we upload multiple layers (like in the GCBM Demo Run), we can store them as an array using this pattern: https://stackoverflow.com/questions/56748999/how-to-add-new-values-to-an-array-object-using-vuex/56749448#56749448
We want to synchronise the Vuex store and FLINTcloud state after every successful upload, for example here:
None, suggestions welcome.
Post-processing of uploaded files will likely be handled in FLINTcloud using Python. This might including updating JSON templates to configure the simulation to accept the input files. The config templates themselves probably don't need to be stored in the UI, but a user will likely want to retrieve the config. for a given upload to edit or review.
In the POC we use to be able to send config from the client to the host. This seems to have regressed because the relevant code looks commented out:
Please describe the steps needed to recreate this functionality.
Currently, the date column of the Point and RothC output table is not formatted clearly.
Related: #91
As of now, we don't have a footer on the landing page. We can take reference from https://moja.global/ site.
According to the new design update, we are aiming to develop an updated version for Slider Component.
Currently our slider component looks something like:
We want to create new component like this (with tailwind css):
The current slider component lies in flint.ui/src/components/Sliders. The new Slider Component should be added in this folder (no need to delete other component files.) Test this by updating the views on /flint/configurations/point etc. routes to ensure working of the component.
Make sure the component:
tailwind.config.js file to extend new theme if needed(Feel Free to ask questions or curiosities around its implementation.
Currently, the landing page looks like this:
We want to replace brand-text in the navbar with moja-global logo.
Add the Logo in the navbar.
N/A
Make sure we implement this such that:
/assets folder.height and width to make it performant.Most configurations will have multiple steps. In RothC this might mean inputting multiple JSON arrays, for GCBM it could be uploading different types of files (input databases, disturbance histories).
We can create short workflows using: https://vuematerial.io/components/steppers
See also the integration with Vue Router to maintain browser history nicely,
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.