equinor / webviz-subsurface-components Goto Github PK

The image element in the layered map component is currently interpolated based on the user agent default.

Add possibility for setting the CSS property image-rendering through the input to the component (for each image element individually).

Layer types:

• TileLayer - Locally served tiles using flask route or base64 transfer?)

• Performant ImageLayer for fast flipping through images

• GL based Tile/Image layers with mouse readout and manipulation of z-value (e.g. difference between two maps)

• Well trajectories (simple lines)

• Well logs using d3.js / pixi.js activated at specific zoom level
  https://github.com/manubb/Leaflet.PixiOverlay

• Fault polygons, etc

• Client side selection of colormap.

Data input:

• Performant image generation from surfaces (python)

• Performant tile generation from images (python)

Interactivity:

• Draw polylines, polygons and points on a map

E.g. Zoom in on a well when clicked.

Currently this warning is given in the console:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details. * Move code with side effects to componentDidMount, and set initial state in the constructor. * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder. Please update the following components: Switch

A user needs to see the coordinates the LayeredMap is set to.
Investigate what option is the best:

• Coordinate axis (example)
• Coordinate on mouseover
• Other...

It should be possible to click on a layer and get identifying information of the layer element as a prop.

The layer element information could e.g be provided in the layer object as an optional metadata string.

This would be useful e.g. to click on well polylines to do some calculation on the selected well.

Current https://github.com/equinor/webviz-subsurface-components/blob/master/src/lib/private_components/shared/slider.js is not reliable on cell phones, consider to add clickable zones.

Show well completions in a simplified scheme:

• Wells are vertical
• Layers have identical thickness.

Possible features:

• a slider for the time axis, where wells appear/disappear as the slider moves?
• a multi-select filter for different layers (e.g. only show wells completed in at least one of the selected layers).
• choose how wells are distributed along "x axis".
  • chronologically
  • visually grouped based on formation it is completed on
  • injector group / producer group / plugged group

Data input:

• ecl2df? (need COMPDAT as function of time)

Rough hand made sketch:

Future frontend/Dash component improvements include:

• Add a "guided tour" to the plugin (as already added for some other plugins), explaining the user what he/she is looking at (especially the confidence intervals in the background, indicating areas of overfitting/underfitting, might be a difficult concept).
• Move legend out of the plot. Visualize axis ticks better on small screens.
• Option for showing total misfit per group (i.e. contribution in the misfit function), and not only average misfit within a group (as now).
• Observation type aggregation (currently it is one bar per "obs. group/key", e.g. WOPR:A-1H... would perhaps be useful to easily be able to aggregate this such that you show average/total normalized misfit for WOPR:* as a total, and Rates (WOPR, WGPR, WWPR etc.) as a even higher aggregration level).
• When hovering over a misfit bar, it could "dissolve" into the different "realization points" (a technique also used in the Parameter Distribution Plugin) - enabling the user to easily identify realizations with good/bad match wrt. to a given observation type.

Used when doing e.g. intersection view on sesmic.

Currently the user can edit markers, polylines and polygons.
Often one or none of these are relevant for the visualization.
=>

• Set available edit options as props (default no options?)

• Remove toolbar if no options are active

Even though dependencies are pinned such that only minor+patch versions can update freely, there inevitable sometimes are situations where new dependency releases introduce unintended breaking changes.

Adding pip freeze to CI, such that a readable list of used dependency versions are created in the CI log, will make it easier to compare a 🔴 CI run towards a previous 💚 CI run.

We are currently using integer only zoom in LayeredMap.
This gives quite large jump in zoom levels when zooming in the view.
It would be useful if the zoom levels could be more flexible.

Per https://leafletjs.com/examples/zoom-levels/ (Fractional zoom) it is possible to have much smaller zoom increments by using the props zoomDelta and zoomSnap.

zoomDelta controls how much the view zooms in when using the buttons, while
zoomSnapwill snap the zoom to a nearest accepted value.

Perhaps add these as props with a default:
zoomDelta : 0.25
zoomSnap: 0 ?

• Add draw polygon functionality from leaflet-draw

• Add polygon coordinates as Dash prop

The polygon coordinates can be used in the Dash app to e.g. calculate values on a constricted area of a map.

Hi,

When I test out the example case, I got the following error when I open the url http://127.0.0.1:8050/.

Any suggestions on how to fix it?

Thanks,
Jiyang

error info:

Invalid argument data passed into HistoryMatch with ID "parameters".
Expected object.
Was supplied type string.
Value provided: "{"iterations": [{"name": "Iteration ......

When running example_layered_map.py, clicking on the map does not make location info pop up. However, in the corresponding JavaScript example (started using npm start) it works as expected.

From Dash boilerplate, the setup is such that built component code is not part of .gitignore. This makes PR-review more difficult and commit history harder to follow.

Travis will build and get the built component code before deployo to pypi. It should therefore be safe to .gitignore automatically built Python+JavaScript code.

• Display well logs as color-filled line/area on well trajectory in top-down view.

• Set colorscale and min/max - (Could be predefined)

• Show legend

Switching colors or changing min/max for scale should be done client-side for performance.

• Slider to set min/max z-value for colors
• Colorscale picker? Predefined color lists or update from prop?

When the LayeredMap component is used to display cross-sections, the y-dimension represents the z-value (typically depth or time).

Often it is necessary to exaggarete this dimension to observe details in cross-sections with large horizontal (x-dimension) lengths.

It would be useful with functionality to increase this scale interactively.

Currently there is a hard coded elevation scale when it comes to hill shading calculation in WebGL. This should be calculated correctly (+ perhaps be more dynamic).

Currently this is printed in the console:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details. * Move data fetching code or side effects to componentDidUpdate. * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder. Please update the following components: ImageOverlayWebGL

hei i was trying to run the example_hm.py but than got some errors on the module ?
(py3_venv) miroine@Merouanes-MacBook-Air webviz-subsurface-components % pip install webviz_subsurface_components
Requirement already satisfied: webviz_subsurface_components in /Users/miroine/envs/py3_venv/lib/python3.7/site-packages (0.0.25)
Requirement already satisfied: dash~=1.6 in /Users/miroine/envs/py3_venv/lib/python3.7/site-packages (from webviz_subsurface_components) (1.9.1)
Requirement already satisfied: dash-core-components==1.8.1 in /Users/miroine/envs/py3_venv/lib/python3.7/site-packages (from dash~=1.6->webviz_subsurface_components) (1.8.1)
Requirement already satisfied: Flask>=1.0.2 in /usr/local/lib/python3.7/site-packages (from dash~=1.6->webviz_subsurface_components) (1.1.1)
Requirement already satisfied: dash-html-components==1.0.2 in /Users/miroine/envs/py3_venv/lib/python3.7/site-packages (from dash~=1.6->webviz_subsurface_components) (1.0.2)
Requirement already satisfied: plotly in /usr/local/lib/python3.7/site-packages (from dash~=1.6->webviz_subsurface_components) (4.2.1)
Requirement already satisfied: dash-table==4.6.1 in /Users/miroine/envs/py3_venv/lib/python3.7/site-packages (from dash~=1.6->webviz_subsurface_components) (4.6.1)
Requirement already satisfied: future in /usr/local/lib/python3.7/site-packages (from dash~=1.6->webviz_subsurface_components) (0.17.1)
Requirement already satisfied: dash-renderer==1.2.4 in /Users/miroine/envs/py3_venv/lib/python3.7/site-packages (from dash~=1.6->webviz_subsurface_components) (1.2.4)
Requirement already satisfied: flask-compress in /usr/local/lib/python3.7/site-packages (from dash~=1.6->webviz_subsurface_components) (1.4.0)
Requirement already satisfied: click>=5.1 in /usr/local/lib/python3.7/site-packages (from Flask>=1.0.2->dash~=1.6->webviz_subsurface_components) (7.0)
Requirement already satisfied: itsdangerous>=0.24 in /usr/local/lib/python3.7/site-packages (from Flask>=1.0.2->dash~=1.6->webviz_subsurface_components) (1.1.0)
Requirement already satisfied: Werkzeug>=0.15 in /usr/local/lib/python3.7/site-packages (from Flask>=1.0.2->dash~=1.6->webviz_subsurface_components) (0.15.5)
Requirement already satisfied: Jinja2>=2.10.1 in /usr/local/lib/python3.7/site-packages (from Flask>=1.0.2->dash~=1.6->webviz_subsurface_components) (2.10.1)
Requirement already satisfied: six in /usr/local/lib/python3.7/site-packages (from plotly->dash~=1.6->webviz_subsurface_components) (1.12.0)
Requirement already satisfied: retrying>=1.3.3 in /usr/local/lib/python3.7/site-packages (from plotly->dash~=1.6->webviz_subsurface_components) (1.3.3)
Requirement already satisfied: MarkupSafe>=0.23 in /usr/local/lib/python3.7/site-packages (from Jinja2>=2.10.1->Flask>=1.0.2->dash~=1.6->webviz_subsurface_components) (1.1.1)
(py3_venv) miroine@Merouanes-MacBook-Air webviz-subsurface-components % python examples/example_hm.py
Traceback (most recent call last):
File "examples/example_hm.py", line 9, in
import webviz_subsurface_components
File "/Users/miroine/project_developments/repos/webviz-subsurface-components/webviz_subsurface_components/init.py", line 12, in
from .imports import *
ModuleNotFoundError: No module named 'webviz_subsurface_components.imports'

A user wants to adjust height of the LayeredMap component.
=> Add height as prop.

Similar to equinor/webviz-subsurface#483 in terms of benefits - but here in JavaScript (TypeScript) domain instead. Some initial work was done in #121 in order to change build system to support TypeScript.

If during the type hint work suggestions for repo restructuring are found, these could either be documented as new issues (e.g. large restructuring) or done at the same time (e.g. small restructuring).

Isse #245 (basically 🔪 away code) is suggested done first - as that component is to be removed anyway. Also consider dropping type hints for SubsurfaceMap as that is to be removed (alternatively do #246 before #77).

• Add possibility to draw a marker

• Add marker coordinates as Dash props

The marker coordinates can be used in a Dash app to e.g. return the z-value of a surface.

This adds significantly to the linting running time - and checking/keeping the autogenerated test json data linted is not important.

Currently the Python side of the map component requires the input as images. In order to reduce probable duplication of code in containers - the map component might want to handle numpy array input, and then internally convert to base64-image before giving it to the React component.

This will also facilitate that max and minvalue used in colormap does not need to be specified explicitly by the containers.

Currently the LayeredMap component indirectly supports rotated maps, since the user can have transparent areas in the image where there is no data. However, directly supports rotation of images will reduce the data transfer needed (as transparent pixels outside region of interest is redundant).

Currently map values are binned to [0, 255]. Make an (optional) way of increasing data sent to the client with higher resolution.

• Add functionality for drawing piecewise linear line

• Add polyline coordinate array as a Dash prop.

This can be used in a Dash app to e.g. create a vertical slice through a seismic cube or a 3D grid along the drawn polyline. The resulting slice can then be visualized in another instance of this component.

Currently there is a static default initial zoom level. This should be calculated based on actual map bounds.

Currently regl is used as a wrapper around WebGL in the map component. This is a bit too high level in order optimize e.g. by compiling shaders once (regardless of data input). The high level functional approach of regl makes this difficult/impossible.

Zoom level currently resets on single mouse click / hold.
This behaviour should be limited to double mouse-click so that panning and drawing of polylines can be done without resetting the view.

Currently, all colormaps for input layers are shown. This could be changed to a probably more user friendly behaviour where only colormap for selected layers are shown.

You can listen to layer changes by e.g. doing

componentDidMount() {
    this.mapRef.current.leafletElement.addEventListener('overlayremove', (e) => {console.log(e)});
    this.mapRef.current.leafletElement.addEventListener('overlayadd', (e) => {console.log(e)});
    this.mapRef.current.leafletElement.addEventListener('baselayerchange', (e) => {console.log(e)});
    }

in the LayeredMap component.

When doing this, we can show the value (i.e. z value) of the "selected" point in each layer (and corresponding colormap).

Currently hill shading in the layered map component is calculated using WebGL and direct light from a point source. This can make it easier to visually see structure/depth maps. However, since it is a single point source it tends to over expose areas facing the light, and obscure details on the non-illuminates sides.

This can be improved by using either one source with finite size, or multisource hill shading. For inspiration and literature, search for multi-directional hillshading and cartography professor Eduard Imhof (1895 – 1986).

There are use cases where multiple instances of the layered map components are shown side by side. Pan/zoom in one of them should propagate also to the others.

This has to be solved purely in frontend, i.e. on the component level. One solution could be that a component that should propagate its zoom/pan to other components take in the ID's of it sibling components as a prop (and then we go directly on the Leaflet API when altering pan/zoom).

The props polyline_points, polygon_points, marker_point returns layer coordinates for both for layers made client side and for overlay layers from props.

Currently only coordinates are returned with no additional layer information.
A layer id should be added so that the layer can be identified in Dash.

Rename component to reflect that it is not only used to visualize maps, but also e.g. cross-sections of topographical maps.

The name should be more generic.