Before starting project installation, You will need to launch the redis server provided by the docker-compose-redis.yml file : In the docker/ folder, run:
docker-compose -f docker-compose-dev.yml up -d
To install the required dependencies, run the following command in the root directory of your project:
yarn install
Running in Development Mode:
yarn common
yarn server
yarn client
Build project for production
# Build for production
yarn common build
yarn client build
yarn server build
# Running prod mode
yarn start
FutureSight is web application allowing to generate dashboards for model comparison. The application is using ECEMF public database, hosted by ECEMF partner IIASA. Users of the FutureSight application will be able to select and filter data prior to creating the visualization. A number of features are accessible:
- Possibility to create a new dashboard
- Possibility to create a new dashboard from an existing one
- A list of the latest dashboards created in the app to provide potential ideas to new users
- Possibility to search for published dashboard in the database
- Filtering data on blocs based on user selections
Creating and configuring dashboards provides a wide selection of features. The first dashboard setup is configuring the metadata by selecting scenarios, models, variables, and regions to use in the dashboard. This metadata will be used to create visualization data blocks. The user can then select and filter the data that will be used within these data blocks. Dashboard setup include also the definition of author name, title, and tags, which can be used to find a specific publication. The dashboard configuration panel can be used to add visualization blocks to the dashboard. Three types of visualization blocks are available:
- Data block: A block that displays data as a graph (line, bar, pie, map, box) or table
- Text block: A block that displays text
- Control block: A block that displays a UI to control the display data of other charts
This webapp is developed by a team from Artelys nominally :
Artelys is an independent company specialised in optimization, decision support and modeling. Artelys is involved in research and development. Through its innovative strategy it aims to develop more performing, efficient and robust optimization and decision support tools.
-
client/ A workspace that includes all UIs of FutureSight webapp, including home page, about page, browse page, and dashboard component. The main classes for implementing Dashboard component are:
- DashboardSelectionControl: Responsible for managing all selections on the dashboard, particularly handling state changes when block selections are modified, and it also manages the addition or removal of blocks from the dashboard.
- DashboardDataConfiguration: Responsible for both retrieving data and sending the necessary data to each block.
- DashboardView: Responsible for invoking Dashboard component.
-
server/ This workspace contains a Node.js Express web application where you'll find the code that interacts with the IIASA API and the Redis database. The main classes include:
- RedisPersistenceManager: Responsible for handling all requests to the Redis database, including adding new dashboards, retrieving all published dashboards, and searching for a specific dashboard.
- IIASADataBackend: Responsible for handling all requests to the IIASA API to retrieve filtered data.
-
common/ A workspace that includes common logic to be imported from other workspaces (client and server). Common includes all the code of dashboard, and it exports the Dashboard component, making it accessible for use by other workspaces or applications. The main classes in this workspace include:
- Dashboard: The dashboard component is responsible for initiating a dashboard or publishing it.
- DashboardConfigView: Responsible for managing the dashboard grid layout. Out dashboard view using React-Grid-Layout, which is a grid layout system that is responsive and supports breakpoints.
FurureSight using Node.js Express as backend and React as frontend. All packages are structured as Yarn Workspaces and written in Typescript.
TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
Express is a back end web application framework for building RESTful APIs with Node.js.
React is a free and open-source front-end JavaScript library for building user interfaces or UI components.
Yarn is a package manager that replaces the existing workflow for the npm client or other package managers while remaining compatible with the npm registry. It has the same feature set as existing workflows while operating faster, more securely, and more reliably.
Yarn Workspaces are a new way to set up your package architecture that’s available by default starting from Yarn 1.0. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass.
Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.
Plotly.js is a charting library that comes with over 40 chart types:
- Horizontal and Vertical Bar Charts
- Pie and Donut Charts
- Line Charts
- Scatter and Bubble Plots
- 3D Charts
- Statistical Graphs
- SVG Maps ...
Redis (Remote Dictionary Server) is an open-source in-memory storage, used as a distributed, in-memory key–value database, cache and message broker, with optional durability.
Craco-less Create React App Configuration Override. CRACO is a tool that allows you to configure your Create React App without ejecting, it offers a high degree of flexibility in customizing configurations.
This work was financially supported by the European Union’s Horizon 2020 research and innovation programme under the grant agreement No 101022622 (European Climate and Energy Modelling Forum ECEMF).
This webapp is licensed under the MIT License