ucl / ukcordex-plot-explorer Goto Github PK

This website displays plots showing bias analysis in different climate models.

Home Page: https://github-pages.ucl.ac.uk/UKCORDEX-plot-explorer/

ukcordex-plot-explorer's Introduction

UKCORDEX Plot Explorer

This analysis and visualisation tool is a React application designed to allow rapid exploration of the key structures of the model outputs in the UKCP18 projections and the EuroCORDEX ensembles, along with their driving models, for a large number of weather variables and derived indices of climate over the UK.

Users can select climate indices, seasons and time periods of interest and can compare the various model outputs, produce maps and boxplots of historical biases and projected changes in these indices, and quantify the dominant sources of variation and uncertainty within the projections. This enables users both to evaluate the outputs, and to choose appropriate subsets of model runs for use in their own applications. A suggested order of analyses is given in the usage guide.

The plots and underlying data are downloadable directly from the plot explorer.

It can be seen on this URL: https://github-pages.ucl.ac.uk/UKCORDEX-plot-explorer/

Developer's guide

The code in this repository has been moved to the Plot Explorer's development repository. That repository contains details on the workflow for adding new features and bug fixes, as well as instructions on how to run, test and deploy the codebase.

ukcordex-plot-explorer's People

Contributors

Stargazers

Watchers

Forkers

raquelalegre ucl

ukcordex-plot-explorer's Issues

Aesthetic changes

new variable colours (core being green)
adjusting buttons (width and margins) (see #54)
adjust dropdown text size so more available
rearrange period vars

Add section with help on data as well as indices

Or is it "metadata" instead of "data"?

"plot not found" alt message should use `makeTitle`

Move option dicts to json files

Specially for the plotvars, as this is likely to become a very large dict of around 60 elements.

Allow users to save the datasets used to create the plots

We have to discuss with @clairbarnes what the best option would be:

The floating "Save plots" button includes 2 check boxes, one for saving the plots and one for saving the data, so users can choose any combination of only data, only plots or both.
As the datasets and plots are small, we can assume users don't mind having "extra" data downloaded, they can just ignore it and it makes the UI a little less complex.

Set up automated deployment to GH Pages

Every time there's a PR to the development branch in https://github.com/UCL/UKCORDEX-plot-explorer-dev there should be an automated deployment to gh-pages.

Every time there's a new push to the production branch (ie happens only once a PR has been approved) in https://github.com/UCL/UKCORDEX-plot-explorer there should be an automated deployment to gh-pages.

Captions are not needed in tables, the explanation can be just part of the preceding text

Address build vulnerabilities

There are some vulnerabilities when building the react app from the existing code. We need to figure out what the consequences of these are and if we should force fix them. The following is the output.

npm audit report

ansi-html  *
Severity: high
Uncontrolled Resource Consumption in ansi-html - https://github.com/advisories/GHSA-whgm-jr23-g3j9
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/ansi-html
  @pmmmwh/react-refresh-webpack-plugin  <=0.5.0-rc.6
  Depends on vulnerable versions of ansi-html
  node_modules/@pmmmwh/react-refresh-webpack-plugin
    react-scripts  >=0.10.0-alpha.328cb32e
    Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
    Depends on vulnerable versions of @svgr/webpack
    Depends on vulnerable versions of optimize-css-assets-webpack-plugin
    Depends on vulnerable versions of react-dev-utils
    Depends on vulnerable versions of webpack
    Depends on vulnerable versions of webpack-dev-server
    node_modules/react-scripts
  webpack-dev-server  2.0.0-beta - 4.1.0
  Depends on vulnerable versions of ansi-html
  Depends on vulnerable versions of chokidar
  Depends on vulnerable versions of yargs
  node_modules/webpack-dev-server

ansi-regex  >2.1.1 <5.0.1
Severity: moderate
 Inefficient Regular Expression Complexity in chalk/ansi-regex - https://github.com/advisories/GHSA-93q8-gq69-wqmw
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/webpack-dev-server/node_modules/cliui/node_modules/ansi-regex
node_modules/webpack-dev-server/node_modules/string-width/node_modules/ansi-regex
node_modules/webpack-dev-server/node_modules/wrap-ansi/node_modules/ansi-regex
  strip-ansi  4.0.0 - 5.2.0
  Depends on vulnerable versions of ansi-regex
  node_modules/webpack-dev-server/node_modules/cliui/node_modules/strip-ansi
  node_modules/webpack-dev-server/node_modules/string-width/node_modules/strip-ansi
  node_modules/webpack-dev-server/node_modules/wrap-ansi/node_modules/strip-ansi
    cliui  4.0.0 - 5.0.0
    Depends on vulnerable versions of strip-ansi
    Depends on vulnerable versions of wrap-ansi
    node_modules/webpack-dev-server/node_modules/cliui
      yargs  10.1.0 - 15.0.0
      Depends on vulnerable versions of cliui
      Depends on vulnerable versions of string-width
      node_modules/webpack-dev-server/node_modules/yargs
        webpack-dev-server  2.0.0-beta - 4.1.0
        Depends on vulnerable versions of ansi-html
        Depends on vulnerable versions of chokidar
        Depends on vulnerable versions of yargs
        node_modules/webpack-dev-server
          react-scripts  >=0.10.0-alpha.328cb32e
          Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
          Depends on vulnerable versions of @svgr/webpack
          Depends on vulnerable versions of optimize-css-assets-webpack-plugin
          Depends on vulnerable versions of react-dev-utils
          Depends on vulnerable versions of webpack
          Depends on vulnerable versions of webpack-dev-server
          node_modules/react-scripts
    string-width  2.1.0 - 4.1.0
    Depends on vulnerable versions of strip-ansi
    node_modules/webpack-dev-server/node_modules/string-width
      wrap-ansi  3.0.0 - 6.1.0
      Depends on vulnerable versions of string-width
      Depends on vulnerable versions of strip-ansi
      node_modules/webpack-dev-server/node_modules/wrap-ansi

browserslist 4.0.0 - 4.16.4
Severity: moderate
Regular Expression Denial of Service in browserslist - GHSA-w8qv-6jwh-64r5
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/react-dev-utils/node_modules/browserslist
react-dev-utils 6.0.0-next.03604a46 - 12.0.0-next.60
Depends on vulnerable versions of browserslist
Depends on vulnerable versions of immer
node_modules/react-dev-utils
react-scripts >=0.10.0-alpha.328cb32e
Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
Depends on vulnerable versions of @svgr/webpack
Depends on vulnerable versions of optimize-css-assets-webpack-plugin
Depends on vulnerable versions of react-dev-utils
Depends on vulnerable versions of webpack
Depends on vulnerable versions of webpack-dev-server
node_modules/react-scripts

glob-parent <5.1.2
Severity: high
Regular expression denial of service - GHSA-ww39-953v-wcq6
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/watchpack-chokidar2/node_modules/glob-parent
node_modules/webpack-dev-server/node_modules/glob-parent
chokidar 1.0.0-rc1 - 2.1.8
Depends on vulnerable versions of glob-parent
node_modules/watchpack-chokidar2/node_modules/chokidar
node_modules/webpack-dev-server/node_modules/chokidar
watchpack-chokidar2 *
Depends on vulnerable versions of chokidar
node_modules/watchpack-chokidar2
watchpack 1.7.2 - 1.7.5
Depends on vulnerable versions of watchpack-chokidar2
node_modules/watchpack
webpack 4.44.0 - 4.46.0
Depends on vulnerable versions of watchpack
node_modules/webpack
react-scripts >=0.10.0-alpha.328cb32e
Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
Depends on vulnerable versions of @svgr/webpack
Depends on vulnerable versions of optimize-css-assets-webpack-plugin
Depends on vulnerable versions of react-dev-utils
Depends on vulnerable versions of webpack
Depends on vulnerable versions of webpack-dev-server
node_modules/react-scripts
webpack-dev-server 2.0.0-beta - 4.1.0
Depends on vulnerable versions of ansi-html
Depends on vulnerable versions of chokidar
Depends on vulnerable versions of yargs
node_modules/webpack-dev-server

immer <9.0.6
Severity: critical
Prototype Pollution in immer - GHSA-33f9-j839-rf8h
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/immer
react-dev-utils 6.0.0-next.03604a46 - 12.0.0-next.60
Depends on vulnerable versions of browserslist
Depends on vulnerable versions of immer
node_modules/react-dev-utils
react-scripts >=0.10.0-alpha.328cb32e
Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
Depends on vulnerable versions of @svgr/webpack
Depends on vulnerable versions of optimize-css-assets-webpack-plugin
Depends on vulnerable versions of react-dev-utils
Depends on vulnerable versions of webpack
Depends on vulnerable versions of webpack-dev-server
node_modules/react-scripts

nth-check <2.0.1
Severity: moderate
Inefficient Regular Expression Complexity in nth-check - GHSA-rp65-9cf3-cjxr
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/svgo/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/svgo/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/svgo
@svgr/plugin-svgo <=5.5.0
Depends on vulnerable versions of svgo
node_modules/@svgr/plugin-svgo
@svgr/webpack 4.0.0 - 5.5.0
Depends on vulnerable versions of @svgr/plugin-svgo
node_modules/@svgr/webpack
react-scripts >=0.10.0-alpha.328cb32e
Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
Depends on vulnerable versions of @svgr/webpack
Depends on vulnerable versions of optimize-css-assets-webpack-plugin
Depends on vulnerable versions of react-dev-utils
Depends on vulnerable versions of webpack
Depends on vulnerable versions of webpack-dev-server
node_modules/react-scripts
postcss-svgo 4.0.0-nightly.2020.1.9 - 5.0.0-rc.2
Depends on vulnerable versions of svgo
node_modules/postcss-svgo
cssnano-preset-default <=4.0.8
Depends on vulnerable versions of postcss-svgo
node_modules/cssnano-preset-default
cssnano 4.0.0-nightly.2020.1.9 - 4.1.11
Depends on vulnerable versions of cssnano-preset-default
node_modules/cssnano
optimize-css-assets-webpack-plugin 3.2.1 || 5.0.0 - 5.0.8
Depends on vulnerable versions of cssnano
node_modules/optimize-css-assets-webpack-plugin

27 vulnerabilities (16 moderate, 9 high, 2 critical)

To address all issues (including breaking changes), run:
npm audit fix --force

Improve styling

This includes:

removing current margins that react-bootstrap is imposing (e.g. <Container fluid>)
investigate why dropdowns' font size is not updating when modifying the size of the viewport
adding styling to season labels like the one in the plot var dropdown

Update help and about content

We need content to populate the help (data, indices and plots) and about pages of the website which currently contain only placeholders.
@clairbarnes can you help with that?

Credit in plots and data downloads

If someone downloads the plots from the website, how do we make sure they credit @clairbarnes and the project?
Could be just a line in each plot and/or a warning displayed when downloading that says users are welcome to use these plots but with credit to the project and author. Maybe the Met Office should tell us what's best.

"Save plots" button should only show when there are plots being shown

Currently it shows as soon as there's an option chosen in the plot type dropdown. This is confusing as it looks like you can save a plot, but none are being shown yet. Some users might not choose every options in order from left to right when they are using the explorer.

Allow users to download search results

@clairbarnes do you think this would be a download of the PNGs, a PDF version of it, or a small report built from the selectiong that explain the variables and what the plot shows?

Cosmetic changes

New plots need icons in the dropdown
Separation between the OptionsRow sections and the button and FigureRow sections when there are no warnings
"Annual" tag

aesthetic changes

To do:

fix menu header to always be full width of viewport
fix plot area so that no horizontal scrolling needed
make sure download buttons don't interfere with plot area (can they overlap the plot area?)

Also for any other aesthetic tweaks/changes

Set up automated testing and deployment

Use GH Actions to create 2 workflows:

One to run tests on the code for different versions of Node
One to automate deployment to GitHub pages

The aim is to always have the latest approved working version of production live and available for the UCL team and the funder to check.

Our workflow is:
Work on feature/fix branch in dev repo -> merge to "development" branch in dev depo -> merge to "production branch" in prod repo once the research team approves

The automated deployment should work differently in each repo:

The dev repo should do automated deployment on each Pull Request, and Pull Request update.
The prod repo should do automated deployment on approval and merge of Pull Request. This way we avoid deploying unapproved changes that might break production.

Add tests

Not sure how these work on React, but would be nice to have some.

Website header

We need to add some text or menu or header. To be decided at a later meeting.

Help menu section shows menu items with wrong indentation

Allow user to make multiple selections from each option

@clairbarnes has given me a list of new updates for the user selection.

Decide what to do with plot titles

Should we leave titles inside the plots as they are? If that's the case, then we need to add the period information.

Another way to do this is by grouping the plots and showing the titles on the front end (ie we'll add in directly in the react code), which implies the images shouldn't show those titles.

Fix resolution dropdown behaviour

Something odd is happening with the resolution dropdown.

To reproduce one of this:

Choose one option in each dropdown, with the resolution being 12 km.
Add a second resolution
Try to add a third resolution

Step 3 can't be completed because no more resolutions show, but they should.

To reproduce another one:

Choose one option in each dropdown, with the resolution not being 12 km
Add a second resolution

Step 2 shows only one option remaining (12 km) when it should show more

Taylor plots

We could show a Taylor plot like this one on top of the site. It could be:

(Easy) A static plot that contains all possible options and guides users so they can check in that plot what figures they want to compare, or
(Harder) Make one plot for each of the possibilities that has transparent background and stack on top of each other the ones related to the figures being shown in the site. This might conflict with react-bootstrap and need working around preset styles.

Style index acronyms in plotvar dropdown

At the moment they show like "tas - Near Surface Air Temperature". It'd be nice the option just reads "Near-Surface Air Temperature" and it's preceded by a styled tag that reads "tas". The tag can be styled following the react-select docs on "Custom Styles: https://react-select.com/home#custom-styles

Group indices in the variable dropdown

So that all the temperatures, etc., are grouped together.

Take into account the resolution choice

At the moment we are looping through all the other 4 options from OptionsRow and "12km" is hardcoded for all filenames. We need to add a 5th option for resolution/region and remove the hardcoded bits.

Plot titles need style refining

They are too long. Perhaps we could just show in title style the key words, and add a line under the plot that has the currently proposed title.

Season names should include identifier

So users can see: e.g. "JJA - Summer" instead of just "Summer"

Plot grid

This should be a different site to the current plot explorer by rows.

Users can select from a matrix of options what individual plots to be shown, then click a button which will present a similar matrix with the chosen plots being shown.

Modify plot filenames after slicing URL

When grabbing the plots from the external GH repo, the filenames are changed as they are taken from the URL. We should be passing the actual plot filename to the zip file method so filenames persist and users can identify which image is which.

Add resolution option

Users must be able to choose between two different resolutions. If dropdowns don't fit in one row, we can distribute in two rows like so:

Region, Season and Period
Plot var and plot type.

Check if this HackMD is worth keeping

Initial notes from discussion with @clairbarnes. We might just need to translate whatever is left to do to GH issues in this repo.

Decide whether to have buttons sticky

Buttons could be sticky and stay at top or overhaul structure to try have them fixed on the side for many plots since they're currently being pushed further down with the number of plots generated.
Another option is they have their own row just below the warnings (or options if no warnings are shown) and the plots can take the full width of the screen.

Fix routes appending paths to URL

When clicking the links, the URLs append each path, meaning "/" turns into "/about" and then "about/plot-help" and so on and so forth.
I think it's to do with the Router package and should have a fix.

Plot width shouldn't take the whole screen for some plot types

Consider adding a max width field to the plot types, so when we display them in figure row, the ones that look too big are not taking the whole width.

Where to place the "How to use this plot explorer..." section

The about section will contain 3 elements:

Plot explorer
UK CORDEX
Acknowledgements

The "Plot explorer" section should be a short summary of what it is and what the purpose of the explorer is, then link to the full text within the help section containing the current text the "How to use this plot explorer..." has.

Build some of the help pages in react

During the meeting today, we mentioned:

Table 4 in indices-help
Table 6 in periods
Perhaps other tables I missed?

Should be done in react instead of being images.

Project logo

@clairbarnes mentions the Met Office might be able to help with this. That way we can replace the react logo that shows in the page, and maybe add it to the header/menu.

Fixes on variable names

There might be a few variables that need renaming. Also they should show in the dropdown preceded by their ID e.g. tasmax.

Space between plotvar options needs to be smaller

It'd be nice to see more variables in one go, so less space between them might help

Treat slow response when showing plots

Now that we are grabbin the plots from an external repo it takes longer to load them, however the download buttons are visible before the images. Ideally:

The buttons don't show until the plots show
We add a loading gif or message while the plots are being loaded in the plots array

Dev website is being deployed to http instead of https

We are not sure why this is happening. It still works, and the homepage setting in package.json is pointing at a https URL, but the deployment is not secure.

Warning when plot is not found/don't allow plots that don't exist to try be called

Use one or multiple if statements to find if the files exist and if they do, render them, if not, they're ignored.

Hardcode help pages so research team can modify more easily

@clairbarnes needs to be able to add suggestions and modify help pages more easily, more specifically links. These include also the acknowledgements in the about section.

Allow deletion of figure row

Figure rows can have a X button that removes the figure from the page. For this we'll probably need to:

Change layout of the row so image takes about 95% of the screen
Add X button to one of the sides of the image
Fix delDataRow function so it removes the correct row from the array (probably with a filter function rather than a isplice call)
How to move state between PlotExplorerContainer and FigureRow? Should we just pass the row index from FigureRow to PlotExplorer?

Spatial agg button should allow more than one choice

At the moment it only allows for one choice. See below:

It should behave like the other buttons and allow for several choices. I think the react-select option isMulti might fix it?

Consider what to do with "Image not found"

We could:

(Easy) Just show a message to say "There are no plots for your selection", or
(Harder) Guide user so they first select "plot variable" and the other dropdowns load only the choices that exist (e.g. no HadUK-grid for snow cover data)

Remove figure caption

It's not needed for now.

`package.json` for dev and prod

2 versions of package.json need to coexist, one that points to the prod version and one that points to the dev version. The ideal would be to have just one package.json that reads the homepage URL from a file that is git ignored in both repositories.

Figure out where to store data and plots

We could use binder to connect to a repo with data for users to access.
As we'll have 200k+ plots, we need to figure out where to store these as cloning the repo will take a lot of time and not always be helpful - this then leads to the question of how to access the plots if they are stored on another service.