Use wcc.FlexBox (#182)

equinor · Jan 27, 2020 · 2c55253 · 2c55253
1 parent c4604bb
commit 2c55253
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 37 deletions.
diff --git a/setup.py b/setup.py
@@ -41,10 +41,7 @@
         "pandas~=0.24",
         "pyarrow~=0.11",
         "pyyaml~=5.1",
-        # webviz-core-components is part of the webviz-config project,
-        # just located in a separate repository for convenience,
-        # and is therefore pinned exactly here:
-        "webviz-core-components==0.0.15",
+        "webviz-core-components>=0.0.16",
     ],
     tests_require=TESTS_REQUIRES,
     extras_require={"tests": TESTS_REQUIRES},

diff --git a/tests/test_table_plotter.py b/tests/test_table_plotter.py
@@ -34,8 +34,6 @@ def test_table_plotter(dash_duo):
         plot_option_dd = dash_duo.find_element("#" + page.uuid(f"div-{plot_option}"))
         if plot_option not in page.plots["scatter"]:
             assert plot_option_dd.get_attribute("style") == "display: none;"
-        else:
-            assert plot_option_dd.get_attribute("style") == "display: grid;"
 
     # Checking that options are initialized correctly
     for option in ["x", "y"]:
@@ -62,9 +60,6 @@ def test_table_plotter_filter(dash_duo):
     # Check that filter is active
     assert page.use_filter
     assert page.filter_cols == ["Well"]
-    # Checking that the selectors are not hidden
-    selector_row = dash_duo.find_element("#" + page.uuid("selector-row"))
-    assert selector_row.get_attribute("style") == ""
 
     # Checking that the correct plot type is initialized
     plot_dd = dash_duo.find_element("#" + page.uuid("plottype"))
@@ -73,10 +68,8 @@ def test_table_plotter_filter(dash_duo):
     # Checking that only the relevant options are shown
     for plot_option in page.plot_args.keys():
         plot_option_dd = dash_duo.find_element("#" + page.uuid(f"div-{plot_option}"))
-        if plot_option in page.plots["scatter"]:
-            assert plot_option_dd.get_attribute("style") == "display: grid;"
-        else:
-            assert plot_option_dd.get_attribute("style") == "display: none;"
+        if plot_option not in page.plots["scatter"]:
+            assert "display: none;" in plot_option_dd.get_attribute("style")
 
     # Checking that options are initialized correctly
     for option in ["x", "y"]:
@@ -114,4 +107,4 @@ def test_initialized_table_plotter(dash_duo):
 
     # Checking that the selectors are hidden
     selector_row = dash_duo.find_element("#" + page.uuid("selector-row"))
-    assert selector_row.get_attribute("style") == "display: none;"
+    assert "display: none;" in selector_row.get_attribute("style")
diff --git a/webviz_config/plugins/_table_plotter.py b/webviz_config/plugins/_table_plotter.py
@@ -273,39 +273,24 @@ def style_options_div_hidden(self):
         """Style for hidden plot options"""
         return {"display": "none"}
 
-    @property
-    def style_page_layout(self):
-        """Simple grid layout for the page"""
-        if self.lock:
-            return {}
-        return {
-            "display": "grid",
-            "align-content": "space-around",
-            "justify-content": "space-between",
-            "grid-template-columns": "1fr 5fr 1fr" if self.use_filter else "1fr 5fr",
-        }
-
-    @property
-    def style_selectors(self):
-        return {"display": "none"} if self.lock else {}
-
     @property
     def layout(self):
         return html.Div(
             children=[
-                html.Div(
-                    style=self.style_page_layout,
+                wcc.FlexBox(
                     children=[
                         html.Div(
                             id=self.uuid("selector-row"),
-                            style=self.style_selectors,
+                            style={"display": "none"}
+                            if self.lock
+                            else {"width": "15%"},
                             children=self.plot_option_layout(),
                         ),
-                        html.Div(
-                            style={"height": "100%"},
-                            children=wcc.Graph(id=self.uuid("graph-id")),
+                        wcc.Graph(
+                            id=self.uuid("graph-id"),
+                            style={"height": "80vh", "width": "60%"},
                         ),
-                        html.Div(children=self.filter_layout()),
+                        html.Div(style={"width": "15%"}, children=self.filter_layout()),
                     ],
                 )
             ]