Implemented automatic menu creation from YAML file (#496)

* Implemented automatic menu creation from YAML file
* Adjusted YAML schema
* Added `global font`, replaced logo and improved css layout
* Set default font size to `16px`
* Adjusted config parser and template to new YAML structure
* Added `test_schema` parametrization and test for second basic example

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - [#503](https://github.com/equinor/webviz-config/pull/503) - Added `__main__.py`. This will allow users to do `python -m webviz_config [...]` in addition to `webviz [...]`.
 - [#510](https://github.com/equinor/webviz-config/pull/510) - Added command line option `--debug` which enables selected underlying Dash development features.
+- [#496](https://github.com/equinor/webviz-config/pull/496) - Implemented automatic menu creation from YAML file with new `wcc` Menu component (see https://github.com/equinor/webviz-core-components/pull/154).
 
 ## [0.3.4] - 2021-08-30
 

examples/basic_example.yaml

@@ -3,37 +3,41 @@
 
 title: Reek Webviz Demonstration
 
-pages:
+options:
+  menu:
+    initially_pinned: True
 
- - title: Front page
+layout:
+
+ - page: Front page
    content:
     - BannerImage:
         image: ./example_banner.png
         title: My banner image
     - Webviz created from configuration file.
     - Some other text, potentially with strange letters like Åre, Smørbukk Sør.
 
- - title: Markdown example
+ - page: Markdown example
    content:
     - Markdown:
         markdown_file: ./example-markdown.md
 
- - title: Table example
+ - page: Table example
    content:
     - DataTable:
         csv_file: ./example_data.csv
 
- - title: PDF example
+ - page: PDF example
    content:
     - EmbedPdf:
         pdf_file: ./example.pdf
 
- - title: Syntax highlighting example
+ - page: Syntax highlighting example
    content:
     - SyntaxHighlighter:
         filename: ./basic_example.yaml
 
- - title: Plot a table
+ - page: Plot a table
    content:
     - TablePlotter:
         csv_file: ./example_data.csv
@@ -64,7 +68,7 @@ pages:
           phone: +47 12345678
           email: [email protected]
 
- - title: Plot a table (locked)
+ - page: Plot a table (locked)
    content:
     - TablePlotter:
         csv_file: ./example_data.csv
@@ -79,7 +83,7 @@ pages:
           phone: 12345678
           email: [email protected]
 
- - title: Pivot Table
+ - page: Pivot Table
    content:
     - PivotTable:
         csv_file: ./example_data.csv

examples/basic_example_advanced_menu.yaml

@@ -0,0 +1,109 @@
+# This file demonstrates the most basic usage of webviz in a FMU setting
+# The configuration files uses YAML (https://en.wikipedia.org/wiki/YAML).
+
+title: Reek Webviz Demonstration
+
+options:
+  menu:
+    show_logo: True
+    bar_position: left
+    drawer_position: left
+    initially_pinned: True
+
+layout:
+ - section: Section
+   content:
+    - page: Front page
+      icon: home
+      content:
+       - BannerImage:
+           image: ./example_banner.png
+           title: My banner image
+       - Webviz created from configuration file.
+       - Some other text, potentially with strange letters like Åre, Smørbukk Sør.
+
+    - group: Other
+      icon: label
+      content:
+      - page: Markdown example
+        content:
+         - Markdown:
+             markdown_file: ./example-markdown.md
+
+      - page: PDF example
+        content:
+         - EmbedPdf:
+             pdf_file: ./example.pdf
+
+      - page: Syntax highlighting example
+        content:
+         - SyntaxHighlighter:
+             filename: ./basic_example.yaml
+
+    - group: Tables
+      icon: table_chart
+      content:
+      - page: Table example
+        content:
+         - DataTable:
+             csv_file: ./example_data.csv
+
+      - page: Plot a table
+        content:
+         - TablePlotter:
+             csv_file: ./example_data.csv
+             # Everything below are examples of optional settings
+             filter_cols:
+               - Well
+               - Segment
+               - Average permeability (D)
+             plot_options:        
+               type: bar
+               facet_col: Well
+               color: Segment
+               barmode: group
+             filter_defaults:
+               Well:
+                 - A-1H
+                 - A-2H
+                 - C-1H
+             column_color_discrete_maps:
+             # Supports css color codes, rgb and hex code.
+             # Note that hex code needs quotes '' to not be read as a comment
+               Segment:
+                 A: '#ff0000'
+                 B: rgb(0,255,0)
+                 C: blue
+             contact_person:
+               name: Ola Nordmann
+               phone: +47 12345678
+               email: [email protected]
+
+      - page: Plot a table (locked)
+        content:
+         - TablePlotter:
+             csv_file: ./example_data.csv
+             lock: true
+             plot_options:
+               x: Well
+               y: Initial reservoir pressure (bar)
+               size: Average permeability (D)
+               facet_col: Segment
+             contact_person:
+               name: Kari Nordmann
+               phone: 12345678
+               email: [email protected]
+
+      - page: Pivot Table
+        content:
+         - PivotTable:
+             csv_file: ./example_data.csv
+             options:
+               cols:
+                 - Well
+               rows:
+                 - Segment
+               vals:
+                 - Average permeability (D)
+               aggregatorName: Average
+               rendererName: Table Heatmap

tests/conftest.py

@@ -0,0 +1,8 @@
+# Sets the window size of the browser (crucial in --headless mode).
+from selenium.webdriver.chrome.options import Options
+
+
+def pytest_setup_options():
+    options = Options()
+    options.add_argument("--window-size=1920,1080")
+    return options

tests/test_portable.py

@@ -23,5 +23,5 @@ def test_portable(dash_duo, tmp_path):
         "plot-a-table",
         "pivot-table",
     ]:
-        dash_duo.wait_for_element(f"#{page}").click()
+        dash_duo.wait_for_element(f".Menu__Page[href='/{page}']").click()
     assert dash_duo.get_logs() == [], "browser console should contain no error"

tests/test_schema.py

@@ -1,17 +1,22 @@
 import pathlib
-
+import pytest
 import yaml
 import jsonschema
 
 from webviz_config._docs._create_schema import create_schema
 
 
-def test_schema():
+@pytest.mark.parametrize(
+    "config_file_path",
+    [
+        (pathlib.Path("examples") / "basic_example.yaml"),
+        (pathlib.Path("examples") / "basic_example_advanced_menu.yaml"),
+    ],
+)
+def test_schema(config_file_path: pathlib.Path):
     """Tests both that the generated schema is valid,
     and that the input configuration is valid according to the schema.
     """
 
-    config = yaml.safe_load(
-        (pathlib.Path("examples") / "basic_example.yaml").read_text()
-    )
+    config = yaml.safe_load(config_file_path.read_text())
     jsonschema.validate(instance=config, schema=create_schema())