The current node version on the CI is 12, the current LTS is 18, this needs updating.

What kind of caching setup should we have? Can we use localStorage to store the data for each source and then invalidate the cached data based on information in the metadata lookup file?

This issue is for discussion of the layout of the dashboard and the processing pipeline OpenGHG -> web -> Dashboard.

Questions:

• What layout changes do we want?
• How do we want to store the data, a git repo?
• Are there other types of plots we want to add?

Requirements:

• export to dashboard readable JSON file
• easily automated, cron job to push updated data every X hours/days/weeks

Currently, the text size remains same upon screen size is reducion, Make it responsive in order to adjust with the screen size

make sure the header collapses correctly its elements into MenuIcon when the screen size is reduced. It shouldn't overlap title of the page and the Menu Icon. Also, try to add the logo in the header which renders properly.

Currently the colours are just assigned by creating an array and shuffling it. Fixed colours should be used and the colours used improving.

We're getting an error in devtools:

Warning: React does not recognize the extraStylingprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseextrastyling instead.

We're passing in this styling to the TextButton component. Maybe we can avoid this by using separate CSS classes.

• Add gradient styles and shadows to the sidebar
• Highlight the plot
• Y label is currently stuck to the edge of the plot shift it inside
• Shift the Openghg logo to the centre of the sidebar

Currently the site names on map are not getting displayed

Add radio buttons to select different species.

Needs burger icon for menuItems and close button for sidebar

Based on team discussion clear button and species selector will be put below plot

Add logos to the plot.

Currently the buttons for the inlets are quite big and incorrectly have metre as M instead of m.

We should make it easy to set the default site, species etc.

As we'll have larger amounts of data with the newer dashboards we could do with being able to retrieve data depending on what the user wants to look at. Having run some tests it looks like writing the data out to a separate file for each ObsData object returned by OpenGHG works quite well. These are standard JSON files that are accompanied by a separate JSON file that provides a lookup table for them and all the metadata required to build the interface for the site.

NOTE: I'll use the term source here to mean an inlet at a site for a specific species

My idea is to:

• build the interface from the exported metadata file (containing filenames and metadata)
• implement dynamic retrieval of data based on source selection on the dashboard
• retrieve some data on first load so an initial plot is created
• retrieve the data each time they click on a new source
• look at gzip compression, this seems to perform favourably when compared with parquet, reducing the data to around 1/4 of the size of the exported JSON.

We should get all the site metadata when the data is exported from OpenGHG.

It'd be nice if we had some documentation to cover the conversion of Python Plotly to Javascript.

Download Plot to pdf

As this hasn't been touched in a while we could do with updating all the dependencies. We may also need update react-scripts to a newer version, see https://create-react-app.dev/docs/updating-to-new-releases/

Compressing the exported JSON using gzip results in a ~ 75% reduction in size.

1. Do we need to compress these ourselves, or are they compressed between GitHub and the client?
2. How best to decompress, maybe using the Compression Streams API?

Add tabs to the links in the sidebar and add left padding to the FAQ

For CH4, NO2, CO, and CO2 units are getting fetched as undefined. Discuss with Matt what units we want there and apply the fix.

At the moment we restructure the data that's read in from JSON, I don't think we need to be doing this as the data that's exported from OpenGHG should be in the correct format/shape. See openghg/openghg#721

At the moment we're getting duplicated inlet buttons. We should look at how we handle different instruments or if we want to merge the datasets and label the change instrument.

• The plot component renders over the clear button when the screen size is reduced.
• The menu Icon button in reduced size is more than the dashboard's header.

Should we be able to select between instruments and inlets?

Show the preliminary data distinguished separately from the public data. Needs further discussion.

With more development happening we could do with a PR template.

It'd be good if the dashboard could be setup to customise itself based on the data read in. If we want users to just be able to select data by site then we just have markers and a popup detailing the site. If we want users to select by inlet then we create the buttons in the popup, if we want by instrument we have a couple of rows of buttons etc.

NOTE: I'll use source selection level here to mean selecting data by site or by inlet at a site etc

I've created a preliminary dashboard_config.json that can be read in by the dashboard that could control the setup of the markers / popups. See openghg/openghg#772 for the work on exporting this config file.

To implement this we'll need to

• read in the dashboard_config.json file
• update the createSourceKey function to create keys depending on the source selection level
• pass through the setting to the LeafletMap component
• modify the onClick so it's passed to inlet TextButton for inlet selection or the CircleMarker for site selection
• add some tests to cover this dynamic change of UI

I can't select different emission types on the explainer page, I get the following error:

$(name) not in images 2 EmissionsBox.js:58
    setImage EmissionsBox.js:58
    React 14
    unstable_runWithPriority scheduler.development.js:468
    React 4