Provided Libraries

The application comes with a few npm libraries pre-installed, which you can see in the package.json file. The most important are:

• React.js
• Material-ui
• Redux
• React Router Dom
• Plotly

Note: Your code should not rely on any libraries besides the ones already installed.

Installation

This project was bootstrapped with Create React App and Json Server

To run the project locally,

1. Git clone this repository git clone https://github.com/EarthScienceAnalytics/react-assignment.git
2. Ensure you've installed node & npm to download the dependencies. The project has been tested with the following versions but should also work with later ones.
   • node: v12.22.1
   • npm: 7.6.2
3. It is recommended to use Npm for downloading all the dependencies. Yarn would do the job too. Perform the following commands inside your project folder (directory where the package.json is located) npm install or yarn install
4. Once the dependencies are downloaded, you can run the fake json server by npm run start-server. This should run the application on port 8000.
5. By now you should have the json server running. You can now start the react project by npm start.

Part 1

Summary

In this part, you will create a component named EsaList. You will create all the logic needed to select and deselect list items.

Part 2

Summary

In this part, you will modify the Wellbore and Histogram pages.

Wellbore Page Layout:

Wellbore Page Functionality:

• A user should be able to select at least one well, one log and one formation:
  • This should enable the SHOW PLOT button.
  • When the SHOW PLOT button is enabled the user should be able to fetch and display the plot data for all selected wells.
  • Plot type should be scatter.
• A user should be able to navigate to Histogram page and back without losing his well,log and formation selections. (Same selections for both pages)

The Histogram Page Layout:

Histogram Page Functionality:

• A user should be able to select at least one well, one log and one formation:
  • This should enable the SHOW PLOT button.
  • When the SHOW PLOT button is enabled the user should be able to fetch and display the plot data for all selected wells.
    • Plot type should be histogram.
• A user should be able to change the Bar Mode to stack or group and the Orientation to vertical or horizontal.
  • This should update the Plot layout.
• A user should be able to navigate to Wellbore page and back without losing his well,log and formation selections. (Same selections for both pages)

Technical Requirements

• Must be a Single Page Application(SPA)
• Data should be stored and retrieved from Redux. The app currently provides the traditional redux boilerplate (actions, types, reducers but you are highly encouraged to use the modern approach with slices using redux-toolkit.
• Plots should be implemented using Plotly

Here is the documentation for the API (db.json):

API Documentation

• GET - http://localhost:8000/wells
  • Returns an array of all wells.
• GET - http://localhost:8000/logs
  • Returns an array of all logs.
• GET - http://localhost:8000/formations
  • Returns an array of all formations.
• GET - http://localhost:8000/plots
  • Returns an array of all plots.
• GET - http://localhost:8000/plots?wellId=1&wellId=2
  • Returns an array of the plots with wellId = 1 & wellId = 2.

Submission

Very Important! In order for us to evaluate your submission please make sure all your changes are committed and these commits have been pushed to your git repository.

git push