Replace modals with wcc.Dialog in StructuralUncertainty (#970)

CHANGELOG.md

@@ -19,6 +19,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#940](https://github.com/equinor/webviz-subsurface/pull/940) - `SimulationTimeSeries` - Changed vector annotation from "AVG_" with suffix "R" and "INTVL_" to "PER_DAY_" and "PER_INTVL_". Retrieve `VectorDefinitions` via Python-API for `webviz-subsurface-components`.
 - [#956](https://github.com/equinor/webviz-subsurface/pull/956) - `SimulationTimeSeries` - Deprecate usage of user input options {vector1, vector2, vector3}. Add list of vectors as user input options for initially selected vectors.
 - [#961](https://github.com/equinor/webviz-subsurface/pull/961) - Improved error message when there are none valid realizations in an ensemble.
+- [#970](https://github.com/equinor/webviz-subsurface/pull/970) - Replaced modals with new Dialog component in `StructuralUncertainty`. Changed display of uncertainty table to be a Dialog.
+
+### Fixed
+- [#965](https://github.com/equinor/webviz-subsurface/pull/965) - Allow a filtered subset of surface names for multiple attributes in `StructuralUncertainty`.
 
 ### Fixed
 - [#965](https://github.com/equinor/webviz-subsurface/pull/965) - Allow a filtered subset of surface names for multiple attributes in `StructuralUncertainty`.

tests/integration_tests/plugin_tests/test_structural_uncertainty.py

@@ -59,7 +59,7 @@ def test_default_configuration(dash_duo, app, testdata_folder) -> None:
     dash_duo.start_server(app)
 
     intersection_data_id = plugin.uuid("intersection-data")
-    modal_id = plugin.uuid("modal")
+    dialog_id = plugin.uuid("dialog")
     # Check some initialization
     # Check dropdowns
     for element, return_val in zip(
@@ -102,8 +102,8 @@ def test_default_configuration(dash_duo, app, testdata_folder) -> None:
     # Check realizations
     real_filter_btn_uuid = stringify_object_id(
         {
-            "id": modal_id,
-            "modal_id": "realization-filter",
+            "id": dialog_id,
+            "dialog_id": "realization-filter",
             "element": "button-open",
         }
     )

webviz_subsurface/_assets/css/structural_uncertainty.css

@@ -48,13 +48,7 @@
     margin-right: 10;
 }
 
-.webviz-structunc-open-modal-btn {
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    width: 100%;
-    background-color:  #E8E8E8;
-}
+
 
 .webviz-structunc-details-main {
     cursor: pointer;
@@ -77,9 +71,7 @@
     box-shadow: 0px 0px 3px 0.5px lightgrey;
 }
 
-.webviz-structunc-open-modal-btn:hover {
-    box-shadow: 0px 0px 3px 0.5px lightgrey;
-}
+
 
 .webviz-structunc-blue-apply-btn:hover {
     box-shadow: 0px 0px 3px 0.5px lightgrey;

webviz_subsurface/plugins/_structural_uncertainty/controllers/__init__.py

@@ -1,6 +1,6 @@
+from .dialog_controller import open_dialogs
 from .intersection_controller import update_intersection
 from .intersection_source_controller import update_intersection_source
 from .map_controller import update_maps
-from .modal_controller import open_modals
 from .realization_filter_controller import update_realizations
 from .uncertainty_table_controller import update_uncertainty_table

webviz_subsurface/plugins/_structural_uncertainty/controllers/dialog_controller.py

@@ -0,0 +1,29 @@
+from typing import Callable, Optional
+
+from dash import MATCH, Dash, Input, Output, State
+from dash.exceptions import PreventUpdate
+
+
+def open_dialogs(
+    app: Dash,
+    get_uuid: Callable,
+) -> None:
+    @app.callback(
+        Output(
+            {"id": get_uuid("dialog"), "dialog_id": MATCH, "element": "wrapper"},
+            "open",
+        ),
+        Input(
+            {"id": get_uuid("dialog"), "dialog_id": MATCH, "element": "button-open"},
+            "n_clicks",
+        ),
+        State(
+            {"id": get_uuid("dialog"), "dialog_id": MATCH, "element": "wrapper"},
+            "open",
+        ),
+    )
+    def _toggle_dialog_graph_settings(n_open: int, is_open: bool) -> Optional[bool]:
+        """Open or close graph settings dialog button"""
+        if n_open:
+            return not is_open
+        raise PreventUpdate

webviz_subsurface/plugins/_structural_uncertainty/controllers/realization_filter_controller.py

@@ -8,16 +8,16 @@ def update_realizations(app: Dash, get_uuid: Callable) -> None:
     @app.callback(
         Output(
             {
-                "id": get_uuid("modal"),
-                "modal_id": "realization-filter",
+                "id": get_uuid("dialog"),
+                "dialog_id": "realization-filter",
                 "element": "apply",
             },
             "disabled",
         ),
         Output(
             {
-                "id": get_uuid("modal"),
-                "modal_id": "realization-filter",
+                "id": get_uuid("dialog"),
+                "dialog_id": "realization-filter",
                 "element": "apply",
             },
             "style",
@@ -47,8 +47,8 @@ def _activate_realization_apply_btn(
         ),
         Input(
             {
-                "id": get_uuid("modal"),
-                "modal_id": "realization-filter",
+                "id": get_uuid("dialog"),
+                "dialog_id": "realization-filter",
                 "element": "apply",
             },
             "n_clicks",
@@ -70,16 +70,16 @@ def _store_realizations(btn_click: Optional[int], selected_reals: List) -> List:
         ),
         Input(
             {
-                "id": get_uuid("modal"),
-                "modal_id": "realization-filter",
+                "id": get_uuid("dialog"),
+                "dialog_id": "realization-filter",
                 "element": "clear",
             },
             "n_clicks",
         ),
         Input(
             {
-                "id": get_uuid("modal"),
-                "modal_id": "realization-filter",
+                "id": get_uuid("dialog"),
+                "dialog_id": "realization-filter",
                 "element": "all",
             },
             "n_clicks",

webviz_subsurface/plugins/_structural_uncertainty/controllers/uncertainty_table_controller.py

@@ -14,34 +14,6 @@ def update_uncertainty_table(
     surface_set_models: Dict[str, SurfaceSetModel],
     well_set_model: WellSetModel,
 ) -> None:
-    @app.callback(
-        Output({"id": get_uuid("uncertainty-table"), "element": "wrapper"}, "style"),
-        Output(get_uuid("all-maps-wrapper"), "style"),
-        Output(
-            get_uuid("uncertainty-table-display-button"),
-            "children",
-        ),
-        Input(
-            get_uuid("uncertainty-table-display-button"),
-            "n_clicks",
-        ),
-    )
-    def _display_uncertainty_table(n_clicks: Optional[int]) -> Tuple[Dict, Dict, str]:
-        if not n_clicks:
-            raise PreventUpdate
-        if n_clicks % 2 == 0:
-
-            return (
-                {"height": "40vh", "display": "none"},
-                {"height": "40vh", "display": "flex"},
-                "Show uncertainty table",
-            )
-        return (
-            {"height": "40vh", "display": "block"},
-            {"height": "40vh", "display": "none"},
-            "Hide uncertainty table",
-        )
-
     @app.callback(
         Output({"id": get_uuid("uncertainty-table"), "element": "table"}, "data"),
         Output({"id": get_uuid("uncertainty-table"), "element": "label"}, "children"),

webviz_subsurface/plugins/_structural_uncertainty/structural_uncertainty.py

@@ -16,7 +16,7 @@
 
 from ._tour_steps import generate_tour_steps
 from .controllers import (
-    open_modals,
+    open_dialogs,
     update_intersection,
     update_intersection_source,
     update_maps,
@@ -25,11 +25,12 @@
 )
 from .views import (
     clientside_stores,
+    dialog,
     intersection_and_map_layout,
     intersection_data_layout,
     map_data_layout,
-    modal,
     realization_layout,
+    uncertainty_table_layout,
 )
 
 
@@ -151,9 +152,6 @@ def __init__(
             / "css"
             / "structural_uncertainty.css"
         )
-        WEBVIZ_ASSETS.add(
-            Path(webviz_subsurface.__file__).parent / "_assets" / "css" / "modal.css"
-        )
         WEBVIZ_ASSETS.add(
             Path(webviz_subsurface.__file__).parent
             / "_assets"
@@ -316,9 +314,9 @@ def layout(self) -> wcc.FlexBox:
                                             wcc.Selectors(
                                                 label="Filters",
                                                 children=[
-                                                    modal.open_modal_layout(
-                                                        uuid=self.uuid("modal"),
-                                                        modal_id="realization-filter",
+                                                    dialog.open_dialog_layout(
+                                                        uuid=self.uuid("dialog"),
+                                                        dialog_id="realization-filter",
                                                         title="Realization filter",
                                                     ),
                                                 ],
@@ -334,39 +332,49 @@ def layout(self) -> wcc.FlexBox:
                         ),
                     ]
                 ),
-                modal.modal_layout(
-                    uuid=self.uuid("modal"),
-                    modal_id="color",
+                dialog.dialog_layout(
+                    uuid=self.uuid("dialog"),
+                    dialog_id="color",
                     title="Color settings",
                     size="lg",
-                    body_children=[
+                    children=[
                         html.Div(
                             children=[self._color_picker.layout],
                         ),
                     ],
                 ),
-                modal.modal_layout(
-                    uuid=self.uuid("modal"),
-                    modal_id="realization-filter",
+                dialog.dialog_layout(
+                    uuid=self.uuid("dialog"),
+                    dialog_id="realization-filter",
                     title="Filter realizations",
-                    body_children=[
+                    children=[
                         realization_layout(
                             uuid=self.uuid("intersection-data"),
                             realizations=self._realizations,
                             value=self._initial_settings.get(
                                 "intersection_data", {}
                             ).get("realizations", self._realizations),
                         ),
+                        dialog.clear_all_apply_dialog_buttons(
+                            uuid=self.uuid("dialog"), dialog_id="realization-filter"
+                        ),
+                    ],
+                ),
+                dialog.dialog_layout(
+                    uuid=self.uuid("dialog"),
+                    dialog_id="uncertainty-table",
+                    title="Uncertainty table",
+                    children=[
+                        uncertainty_table_layout(
+                            uuid=self.uuid("uncertainty-table"),
+                        )
                     ],
-                    footer=modal.clear_all_apply_modal_buttons(
-                        uuid=self.uuid("modal"), modal_id="realization-filter"
-                    ),
                 ),
             ],
         )
 
     def set_callbacks(self, app: Dash) -> None:
-        open_modals(app=app, get_uuid=self.uuid)
+        open_dialogs(app=app, get_uuid=self.uuid)
         update_realizations(app=app, get_uuid=self.uuid)
         update_intersection(
             app=app,

webviz_subsurface/plugins/_structural_uncertainty/views/__init__.py

@@ -2,5 +2,5 @@
 from .intersection_and_map import intersection_and_map_layout
 from .intersection_data import intersection_data_layout
 from .map_data import map_data_layout
-from .realization_modal import realization_layout
-from .uncertainty_table import uncertainty_table_btn, uncertainty_table_layout
+from .realization_filter import realization_layout
+from .uncertainty_table import uncertainty_table_layout

webviz_subsurface/plugins/_structural_uncertainty/views/dialog.py

@@ -0,0 +1,61 @@
+from typing import List
+
+import dash_bootstrap_components as dbc
+import webviz_core_components as wcc
+from dash import html
+
+
+def dialog_layout(
+    uuid: str,
+    dialog_id: str,
+    title: str,
+    children: List,
+    size: str = "sm",
+) -> wcc.Dialog:
+
+    return wcc.Dialog(
+        # style={"marginTop": "20vh"},
+        children=children,
+        id={"id": uuid, "dialog_id": dialog_id, "element": "wrapper"},
+        max_width=size,
+        title=title,
+        draggable=True,
+    )
+
+
+def open_dialog_layout(uuid: str, dialog_id: str, title: str) -> dbc.Button:
+    return html.Div(
+        children=html.Button(
+            title,
+            id={"id": uuid, "dialog_id": dialog_id, "element": "button-open"},
+        ),
+    )
+
+
+def clear_all_apply_dialog_buttons(
+    uuid: str, dialog_id: str, apply_disabled: bool = True
+) -> html.Div:
+    return html.Div(
+        children=[
+            dbc.Button(
+                "Clear",
+                style={"padding": "0 20px"},
+                className="mr-1",
+                id={"id": uuid, "dialog_id": dialog_id, "element": "clear"},
+            ),
+            dbc.Button(
+                "All",
+                style={"padding": "0 20px"},
+                className="mr-1",
+                id={"id": uuid, "dialog_id": dialog_id, "element": "all"},
+            ),
+            dbc.Button(
+                "Apply",
+                style={"padding": "0 20px", "visibility": "hidden"}
+                if apply_disabled
+                else {"padding": "0 20px"},
+                className="mr-1",
+                id={"id": uuid, "dialog_id": dialog_id, "element": "apply"},
+            ),
+        ]
+    )