dcs4cop / xcube-viewer

A simple viewer component for xcube-server

xcube Viewer

A simple viewer component for xcube.

Run it

Note, there is no need to install xcube Viewer on its own. It is bundled with the xcube Python package since version 1.0. Just run

xcube serve -c server-config.yaml

and access the viewer via the server endpoint /viewer, hence http://127.0.0.1/viewer, when run without URL prefix.

For development or for independent deployment, please read ahead to

1. install xcube and run server in demo mode;
2. install and start xcube-viewer with demo configuration.

Install xcube in development mode

xcube one-time install:

$ git clone https://github.com/dcs4cop/xcube.git
$ cd xcube
$ conda env create
$ conda activate xcube
$ pip install -ve .  

xcube update and run server:

$ cd xcube
$ git pull
$ conda activate xcube  
$ xcube serve --verbose --traceperf --config xcube/examples/serve/demo/config.yml  

If errors occur, you may need to update the environment:

$ conda env update

Install and run xcube-viewer in development mode

Checkout xcube-viewer sources:

$ git clone https://github.com/dcs4cop/xcube-viewer.git
$ cd xcube-viewer
$ npm install
$ npm run dev

Update, install, and run:

$ cd xcube-viewer
$ git pull
$ npm install
$ npm run dev

Build xcube-viewer for deployment with default branding:

$ cd xcube-viewer
$ git pull
$ npm run build

Find outputs in ./dist.

Update xcube by a new xcube-viewer build

To bundle the xcube package with a new xcube-viewer version first build xcube-viewer as described above. Then, in the xcube repo checked out from GitHub replace the contents the xcube/webapi/viewer/data directory with the contents of the ./dist directory. Note, it is important to replace the contents, do not just copy. Finally, add new files to git and commit all changes.

More

• User Guide
• Planned Enhancements
• Known Issues

---

This project was bootstrapped with React + TypeScript + Vite.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

xcube-viewer's Issues

New UI layout

We require a new, more flexible UI layout. Here is a sketch:

User login

Make the viewer aware of a currently logged in user.

• user login dialog
• user registration dialog
• user profile dialog
• user avatar display in app bar
• control available actions based on user scopes, e.g. limit download options, store user-created polygons

Time-series mouse-over does not highlight same dates if data sets have different lengths

When two time-series of different start date or different observation times are displayed in the viewer, the vertical, thin, grey bars that appear when hovering over one-time series fail to indicate the same date. Instead, the i-th element is highlighted in both (all) time-series.

This is not really a bug, nor critical, but users may expect that the same date (or the nearest date) is highlighted. Unexpectedly, however, the same dates are highlighted (green bar) when one datum is selected by mouse click (last screenshot).

Add search field

Add a search field for global search in all dataset/variable metadata and the feature properties of all features in all place groups.

• Selecting a dataset/variable from the result will select it and display it in the map.
• Selecting a feature from the result will select the place and cause the map to fly to its location and select its geometry so we can use it to generate a time-series with statistics.

Zooming to Points when selecting a Place

Is your feature request related to a problem? Please describe.
When selecting a Place the system zooms to that selected geometry. If that geometry is a point
the extent the system zooms to is very small. IF PR #53 is accepted than the system will
use a bounding box of 1km/0.01degree around that point.

Describe the solution you'd like
Make the extend around a point geometry configurable

Describe alternatives you've considered
Creating a bounding box of 1km/0.01deg around a point.

Additional context
The issue is that you need to consider the projection of the map and the extent of the map. If teh extent of the map is very small or the poitns a very close together, a bounding box of 1km might be too much.

viewer does not zoom to selected place point location

When choosing a place from the list of locations provided for a specific data cube, the viewer does not zoom to the selected one. However, when selecting a polygon, the zoom is working.

In order to reproduce the bug:
Go to the cyanoalert viewer. And from the drop-down menue Places select Sverige selected bathing sites. Then klick on any of the places provided in the drop-down menue Place. The issue exists for the other data cubes with point location data as well.

Time series graph not complete - very last valid value omited

When loading e.g. the Sweden Lakes cube for 2019 the last time slice of the data cube is shown by default in the viewer:

After selecting a location, the time series is generated, however the last entry in the time series graph is not displaing the time and value for the selected time stamp (in this example the last entry of the data cube is 7/31/2019, 12:00:02 PM). The last value shown in the time series belongs to a valid value bedore the last time stamp of the cube, even though the last time slice does includes a valid value in the selected area.

When selecting the last entry of the time series, a different image appears, corresponding to the time stamp of the last time series entry.

The expected behaviour would be, that the time series does include the last valid value for the selected location, no matter if it is at an earlier time of the data cube or the very last time slice.

Polygons for Places cannot be selected and are not visualized

The polygons for lakes and stations cannot be selected and are not visualized within the cyanoalert viewer.

Allow other base layers

Allow users changing the background map, e.g. Sentinel-2 L2A RGBs, Meteorology Maps, Blue Marble

Adjust current UI time to actual data time

The UI stores the current time as a state variable. The current time is set by

• entering the time in the time field
• pressing the "play" button which increments the current time in fixed time steps
• clicking into the time-series chart to select a point

The problem here is that the current time will select a dataset time slice that is nearest to the current UI time which makes it very difficult to see actually all data contained in a selected dataset.

We therefore need the option to adjust the current UI time to the actual time step contained in the selected dataset:

• add a switch to adjust to data time

If switch is on

• entering the time in the time field will adjust to actual data time if user presses return
• pressing the "play" button which increments the current time according to data time steps

Download map images

Allow users downloading the displayed variable layer as PNG RGBA image.

Import features or geometries

Add a function that allows users to provide their shapes by

• copy/paste (or write) GeoJSON or Geometry WKT plain text.
• uploading a Shapefile, GeoJSON, or Geometry WKT file (that the server will converted to GeoJSON so the viewer can ingest it).

Time-series requests take too long or fail

Time-series requests on the server side take too long and may cause timeouts. This is the case where datasets

• have larger number of time steps (> 100) and/or
• are inappropriately chunked and/or
• are located in slow storage media (remote object storage).

Possible solution:

Subdivide a single time-series request into a sequence of sub-requests for smaller time spans and update the app's data state on received responses. Update time-series charts on any updates of the underlying data series.

Turn off smoothing of tile pixels

Users don't want any pixel interpolation applied to their tile layers. They want crisp (Earth observation) image pixels to be shown.

I've already tried various solutions, but none worked out so far, see also

• https://stackoverflow.com/questions/54083424/preventing-smoothing-of-tileimage-layer
• https://stackoverflow.com/questions/35875270/turn-off-image-smoothing-in-openlayers-3
• https://openlayers.org/en/latest/examples/layer-spy.html

Filter available variables by selected place

Allow filtering the list of variables of a selected dataset by the currently selected place (a feature).

The requirement originates from CyanoAlert, where some cube variables are not valid for certain lakes.

The information which variables are valid for a given lake should be

• provided by the users themselves;
• encoded as properties of the provided lake features (= Shapefiles).

Suggested property name: applicable_variables, the property value is either a text value with comma-separated variable names or a JSON list of variable names. These variable names must be a subset of the variable names in the data cube.

• Send list of available cube variable names to users
• Let them generate new Shapefiles with extra column applicable_variables or GeoJSON files with extra property applicable_variables
• Reconfigure CyanoAlert server with new place groups
• Build into viewer ability to filter variable names by selected feature

Allow toggling legend visibility

It should be possible to minimize the color bar legend in map, click again to open (good for mobile).

Turn viewer into PWA

Make the app a progressive web application (PWA).

• Adjust manifest.json, e.g. provide hires icon
• Optimize performance so it passes Chrome's PWA audit (Three dots / More Tools / Developer Tools / Audits).
• Make it fully responsive (may already be ok)

Read more

• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
• https://developers.google.com/web/progressive-web-apps/

Indicate relationship between places and time-series graphs

• If a graph is selected in time series diagram, fly to place in map.
• If place label exists, use it as part of the label for time-series graph,

Investigate shift of cells in viewer

When displaing OLCI data from data cube in the viewer, the cells seem to be shifted and that they do not cover the expected region exactly.
In case of this example, there should be no cells visible over land, because the varialble only is aplying for cells over water.

The reason for this shift needs to be investigated.

Show info card for selected places

Show info card that displays detail info for the currently selected place, e.g. lake or measurement station.

• Implement info card UI component. Let users toggle its visibility (open/close), see branch https://github.com/dcs4cop/xcube-viewer/tree/forman-infocard.
• Allow automatic ingestion of data from place attributes
• Obtail and provide information for most important places (DCS4COP and CyanoAlert)

Show viewer and server version

Users should be able to identify the current viewer and server versions, especially when they provide feedback or report bugs.

For simplicity, add a new panel "System-Info" in the settings dialog.

Synchronize colors of time-series plots and map points

xcube viewer takes a long time to load data

When opening http://viewer.cyanoalert.com/ it takes several minuites before one can access the cubes. The viewer first goes through all cubes configured in the server only after having gone though all of them the user can select a cube of interest.

Maybe it would be better to only load the names of the available cubes and then whenever a user is interested in a cube, the cube is loaded?
Alternatively, the user can access the loaded cubes while the others are still loading in the background?

Allow drawing and managing user shapes

Allow users to draw their own shapes and manage their list of shapes (create, show, edit, remove).

Synchronize map points and extracted time-series

• When in "multi" mode, if all time-series are removed, also remove all related points in map
• When not in "multi" mode, delete old point in map (if any) once new point is added

Don't show multiple worlds

For global data, the viewer shows multiple worlds.
Restrict zooming out, so that only a single world is shown.

See https://openlayers.org/en/latest/examples/min-zoom.html

Map view zooms out when computingtime series

When selecting the time series for a user point which is placed in a certain region, the viewer automatically zooms out to the whole world extent when showing the time series for the point.

To reproduce, go to http://viewer.cyanoalert.com/, select a point and then compute the time series for the point.

Expected behaviour is, that the viewer keeps the region of the data cube when selecting a time series.

Allow for multiple time-series diagrams

Allow for multiple time-series diagrams where each diagram contains all graphs that share a common geophysical unit.
Automatically add new time-series diagrams while user select points for variables with different geophysical units.

Plot time-series with uncertainty ranges

Plot time series with standard-deviations (~ uncertainty ranges) derived from for aggregations:

• Compute time series from temporal aggregations of points and polygons
• Compute time series from spatial aggregations of NxN-windows around points and of polygons

Data shifted wrt to underlying map

Data and OSM displayed in the data reveal a systematic shift, more specifically, the data is shifted westwards with respect to the underlying map from OSM (see screenshot below).

The issue occurs in land and ocean variables:

Ease selection of exact time

A calender for selecting the time stamp for which one wants to view the data would be very helpful.
At the moment one can only push the play button and pause at the correct moment or try to select it from the time slider.

Both approaches are difficult, to get the correct date right away.

Besides a calender view, another possibility would be to allow the user to step one time stamp forward or one backwards, in order to get to the desired date. Maybe both possibilities could be implemented and not just one of them?

Fix code vulnerabilities

Run

$ yarn audit

Fix all vulnerabilities found.

Starting point is to fix current GitHub security alerts, see https://github.com/dcs4cop/xcube-viewer/network/alerts

Allow switching between different servers

• Add new settings dialog, where user can select a URL from a list of used server URLs or enter a new server URL. After validation, the app will use the selected server.
• Store list of used URLs in local storage

Download time-series data

Allow downloading data for all time-series of a diagram as CSV or JSON plain text.

Color bar provided by cmocean and using the "_r" suffix do not show up in legend

The color bars selected from the cmocean (https://matplotlib.org/cmocean/) do not show up in the viewer.

The legend within the above image should use the deep color map from cmocean:

Legends using the "_alpha" suffix do not show up either.

For both: When selecting a variable, for which the legend shows up correctly and then switching to one using either a cmocean color map or a "_alpha" suffix, the legend stays with the colors of the variable viewed just before:

A correct display of the legend should be provided.

Use custom value ticks in legend for SNAP custom colormaps

When using a custom SNAP colormap file for mapping a variable, the legend is not displayed with the predefined value ticks in the viewer. xcube serve has code for setting custom ticks, but this is not used by the viewer for displaying the legend:

This is the legend as it is:

Expected would be ticks along the colormap legend at specific colors with predefined values.

EDIT

To be fixed in combination with xcube-dev/xcube#84

time series graph without line between points

The current view of the time series graph is plotting a line between the point values:

It would be great to have the possibility to get the graph without the interpolated line between the points.

Indicate where a dataset has data

Many datasets contain empty time-slices i.e. with all data masked out by clouds. Indicate where there is data available.

The idea is to provide a timeline UI component with bars at available timestamps (for daily observations) or time periods (for temporal aggregations). The current UI time selection is indicated by a special bar using the UI theme's selection color. Users select current time slice by clicking a bar.

EDIT

This issue should be addressed in combination with xcube-dev/xcube#105

Allow UI customization

Typical customizations include

• App title and icon
• Specific index.html with different title, meta headers, code snippets, e.g. Google Analytics
• Favicon
• About Link (German: Impressum)
• Funding and contributors info, e.g. EU funded
• Styling and theming, e.g. light/dark theme
• Project-specific translations for UI text e.g. "Places" --> "Lakes"

Auto-add time-series charts for newly selected variable

If users clicked into the map they create a time-series chart for the currently selected variable. When they select another variable, they need to click the same location in the map to add a time-series chart for the newly selected variable in order to compare to variables at same locations.

It is desired that the UI automatically loads and displays time-series charts for existing points, if they don't yet exist for newly selected variables.

Adjust color bar and value range

Let user click in color bar legend. Bring up dialog that lets users adjust colour bar and the variable's value range.

Viewer not displayed in Internet Explorer

The address is resolved but nothing is displayed. JavaScript and Flash Player are both enabled.
This is a problem for people in federal institutes who might not have the choice to use another browser

Upgrade from react-scripts-ts to Create React App

We should upgrade from react-scripts-ts to Create React App as this will receive updates by the React team in the future. See here and here.

Add cubes to viewer

Let the user add new cubes (ZARR directory or multi-level ZARR) to the viewer by providing a path to the cube

• into the server's local file system
• into (public) cloud object storage, e.g. AWS S3, GCS, OBS,...

Time series for selected lake polygon

Let users accept legal agreement

When the user visits an xcube-viewer deployment in the web, there should be a disclaimer, that the page uses HTML5 local storage to store user settings.

Cannot select some data points in time-series

Hovering with mouse over time-series points will highligh some points and show a tooltip. Clicking the point shows also data in the map:

Hovering with mouse over other time-series points will not highlight them and no tooltip is shown. Clicking the point shows also no data at the point that obviously has data (because there is a point in the time-series):

Reload dataset configuration on change

xcube-server provides a service info header that contains the date/time of the last service configration file change. If this time changes, the viewer should reload the dataset configuration.

• Any current selection state should remain unchanged if possible, e.g. if the change solely contains dataset additions
• The app should inform the user if the current selection states involves datasets that have been removed or whose structure has changed, i.e. a variable has been removed or a new time slice has been added (NRT-mode!).
• Dataset configuration queries must be optimized as they can occur any time now. The current response is too slow (seconds!), possibly because we provide all coordinate variables.

Log-scaled color bar legends

Allow color bars to be log-scaled for log-distributed variables, e.g. CHL.

Add more translations

For CyanoAlert we also need

• RO
• IT