Layout of Webviz

[HansKallekleiv]

Currently Webviz plugins, e.g. https://github.com/equinor/webviz-subsurface are designed individually with no clear guidelines with regards to layout and styling. By providing a library of layout components we can greatly reduce the amount of code needed and easier ensure consistent look and behaviour across different plugins.

We should discuss which components to be added.

Additionally the main webviz layout should be made more flexible.

List of potential layout components

App component

Component that contains the full webviz app, replacing the current sidebar + main view layout in webviz-config.

• Contains global settings, such as
  • Theme
  • Global filters
    • ...

Page component

A component that contains the plugin content.

• Has a grid system for arranging child components
• Has the current WebvizPluginPlaceHolder toolbar
• Allows rearranging of children components using drag and drop

• Content frame

  A component that wraps any other content, such as a plotly figure or a table. Toolbar with buttons for:

• Fullscreen toggle
• Description

Selector component

Component that wraps a selector, such as a dropdown or Select

• Has a label
• Can be minimized

Various examples from webviz-subsurface used to make selections:

Plotly figure wrapper

Contains the plotly figure

• Handles theming (trace colors / axis fonts)
• Options menu for changing typically used settings such as axis ranges and plot titles
• Could investigate using https://plotly.github.io/react-chart-editor/

[rubenthoms]

@HansKallekleiv can you evaluate if the issues/improvements you mentioned are fixed/covered by WLF (#219)?