Add layout components (#145)

.gitignore

@@ -2,9 +2,8 @@
 
 webviz_core_components/**/*
 !webviz_core_components/__init__.py
-!webviz_core_components/graph.py
-!webviz_core_components/flexbox.py
-!webviz_core_components/_argument_modifier.py 
+!webviz_core_components/wrapped_components
+!webviz_core_components/wrapped_components/*
 
 react/storybook-static/**/*
 !react/storybook-static/favicon.ico

.pylintrc

@@ -5,4 +5,7 @@ ignore-patterns = ^[A-Z], _imports_  # Dash auto-generated files - ignore them
 [MESSAGES CONTROL]
 
 disable = missing-docstring,
-          duplicate-code
+          duplicate-code,
+          too-few-public-methods,
+          invalid-name,
+          too-many-arguments

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [UNRELEASED] - YYYY-MM-DD
 ### Changed
 - [#140](https://github.com/equinor/webviz-core-components/pull/140) - Improved styling of the `Select` component.
+- [#145](https://github.com/equinor/webviz-core-components/pull/145) - Added wrapper components for typically used Dash components (Dropdown, Slider, etc) with additional styling.
 
 ## [0.5.0] - 2021-06-06
 ### Changed

react/src/lib/components/Layout/Dropdown/dropdown.css

@@ -0,0 +1,5 @@
+.webviz-dropdown .Select--multi .Select-value {
+    background-color: var(--menuLinkBackgroundHover);
+    border-color:  var(--menuLinkBackgroundHover);
+    color:  var(--menuLinkColor)
+  }

react/src/lib/components/Layout/Frame/frame.css

@@ -0,0 +1,22 @@
+.webviz-frame {
+    border-radius: 5px;
+    background-color: #F9F9F9;
+    margin: 10px;
+    padding: 15px;
+    position: relative;
+    box-shadow: 0px 0px 3px 0.5px lightgrey;
+
+  }
+
+  .webviz-frame:hover {
+    box-shadow: 0px 0px 4px 2px lightgrey;
+  }
+
+  .webviz-frame-no-hover {
+    border-radius: 5px;
+    background-color: #F9F9F9;
+    margin: 10px;
+    padding: 15px;
+    position: relative;
+    box-shadow: 0px 0px 4px 0.5px lightgrey;
+}

react/src/lib/components/Layout/Header/header.css

@@ -0,0 +1,10 @@
+.webviz-header {
+    cursor: pointer;
+    color: #ff1243;
+    border-bottom-style: solid;
+    border-width: thin;
+    border-color: #ff1243;
+    font-weight: bold;
+    font-size: 20px;
+    margin-bottom: 25px;
+}

react/src/lib/components/Layout/Label/label.css

@@ -0,0 +1,18 @@
+.webviz-underlined-label {
+    font-size: 15px;
+    cursor: pointer;
+    color: #007079;
+    border-bottom-style: solid;
+    border-width: thin;
+    border-color: #007079;
+    font-weight:bold;
+}
+
+.webviz-label {
+    font-size: 15px;
+}
+
+.webviz-label-bold {
+    font-size: 15px;
+    font-weight:bold;
+}

react/src/lib/components/Layout/RadioItems/radioitems.css

@@ -0,0 +1,3 @@
+.webviz-block-options > label, legend {
+  display: block;
+}

react/src/lib/components/Layout/Selectors/selectors.css

@@ -0,0 +1,11 @@
+.webviz-selectors {
+    cursor: pointer;
+    color: #555;
+    margin-top: 20px;
+    margin-bottom: 10px; 
+
+}
+
+.webviz-selectors:hover {
+    box-shadow: 0px 0px 3px 0.5px lightgrey;
+}

react/src/lib/components/Layout/Slider/slider.css

@@ -0,0 +1,26 @@
+/* !Important is needed to take precedence of the .rc-slider classes */
+
+.webviz-slider .rc-slider-track {
+    background-color: var(--menuLinkColor) !important;
+  }
+
+  .webviz-slider .rc-slider-dot-active {  
+    border-color: var(--menuLinkHoverColor) !important;
+    border-color: var(--menuLinkHoverColor) !important;
+  }
+
+  .webviz-slider .rc-slider-handle {
+    background-color: var(--menuLinkHoverColor) !important;
+    border-color: var(--menuLinkHoverColor) !important;
+  }
+
+  .webviz-slider .rc-slider-handle-active:active {
+    border-color: var(--menuLinkHoverColor) !important;
+    box-shadow: 0 0 5px  var(--menuLinkHoverColor) !important;
+  }
+
+  .webviz-slider .rc-slider-dot {
+    margin-left:-10px !important;
+    background-color: var(--menuBackground) !important;
+    border-color: var(--menuLinkHoverColor) !important;
+  }

react/src/lib/components/Layout/Tab/tab.css

@@ -0,0 +1,16 @@
+/* !Important is needed to take precedence over the inline styles set in the dcc.Tabs
+component https://github.com/plotly/dash-core-components/blob/dev/src/components/Tabs.react.js */
+
+.webviz-tab {
+    border-bottom: 1px solid #d6d6d6 !important;
+    padding: 6px !important;
+    font-weight: bold !important;
+}
+
+.webviz-tab-selected {
+    border-top: 1px solid #d6d6d6 !important;
+    border-bottom: 1px solid #d6d6d6 !important;
+    background-color: #007079 !important;
+    color: white !important;
+    padding: 6px !important;
+}

react/src/lib/components/Layout/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2021- Equinor ASA
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "./Dropdown/dropdown.css";
+import "./Frame/frame.css";
+import "./Header/header.css";
+import "./Label/label.css";
+import "./RadioItems/radioitems.css";
+import "./Selectors/selectors.css";
+import "./Slider/slider.css";
+import "./Tab/tab.css";

react/src/lib/index.ts

@@ -11,5 +11,6 @@ import Select from "./components/Select";
 import SmartNodeSelector from "./components/SmartNodeSelector";
 
 import "./components/FlexBox/flexbox.css";
+import "./components/Layout"
 
 export { WebvizPluginPlaceholder, ColorScales, Select, SmartNodeSelector };

webviz_core_components/__init__.py

@@ -11,10 +11,10 @@
 from ._imports_ import *
 from ._imports_ import __all__
 
-from .graph import Graph
-from .flexbox import FlexBox
+from .wrapped_components import *
+from .wrapped_components import __all__ as wrapped_components
 
-__all__ += ["Graph", "FlexBox"]
+__all__ += wrapped_components
 
 try:
     __version__ = get_distribution(__name__).version

webviz_core_components/wrapped_components/__init__.py

@@ -0,0 +1,36 @@
+from .checklist import Checklist
+from .collapsive_header import CollapsiveHeader
+from .dropdown import Dropdown
+from .flexbox import FlexBox
+from .flexcolumn import FlexColumn
+from .frame import Frame
+from .graph import Graph
+from .header import Header
+from .label import Label
+from .range_slider import RangeSlider
+from .radioitems import RadioItems
+
+from .select_with_label import SelectWithLabel
+from .selectors import Selectors
+from .slider import Slider
+from .tab import Tab
+from .tabs import Tabs
+
+__all__ = [
+    "Checklist",
+    "CollapsiveHeader",
+    "Dropdown",
+    "FlexBox",
+    "FlexColumn",
+    "Frame",
+    "Graph",
+    "Header",
+    "Label",
+    "RangeSlider",
+    "RadioItems",
+    "SelectWithLabel",
+    "Selectors",
+    "Slider",
+    "Tab",
+    "Tabs",
+]

webviz_core_components/wrapped_components/checklist.py

@@ -0,0 +1,64 @@
+from typing import Any
+
+import dash_html_components as html
+import dash_core_components as dcc
+
+
+class Checklist(html.Div):
+    """A Div wrapping a dcc.Checklist with an
+        optional label and toggle for vertical/horizontal layout.
+
+    Keyword arguments:
+
+    - label (string; optional):
+        The text of the label
+
+    - vertical (bool; default True):
+        Position options vertically
+
+    - className (string; optional):
+        Additional css class to apply
+
+    - wrapper_id (string; optional):
+        Id of the wrapping div
+
+    - persistence (boolean | string | number; default: True):
+        Used to allow user interactions in this component to be persisted
+        when the component - or the page - is refreshed. If `persisted` is
+        truthy and hasn't changed from its previous value, a `value` that
+        the user has changed while using the app will keep that change, as
+        long as the new `value` also matches what was given originally.
+        Used in conjunction with `persistence_type`.
+
+    - persistence_type (a value equal to: 'local', 'session', 'memory'; default 'session'):
+        Where persisted user changes will be stored: memory: only kept in
+        memory, reset on page refresh. local: window.localStorage, data is
+        kept after the browser quit. session: window.sessionStorage, data
+        is cleared once the browser quit.
+    """
+
+    def __init__(
+        self,
+        label: str = None,
+        vertical: bool = True,
+        className: str = "",
+        wrapper_id: str = None,
+        persistence: bool = True,
+        persistence_type: str = "session",
+        **kwargs: Any
+    ) -> None:
+        super().__init__()
+        if wrapper_id is not None:
+            self.id = wrapper_id
+        children = [html.Label(label)] if label else []
+        children.append(
+            dcc.Checklist(
+                persistence=persistence,
+                persistence_type=persistence_type,
+                className=className + " webviz-block-options"
+                if vertical
+                else className,
+                **kwargs,
+            )
+        )
+        self.children = html.Div(style={"fontSize": "15px"}, children=children)

webviz_core_components/wrapped_components/collapsive_header.py

@@ -0,0 +1,29 @@
+from typing import Any
+
+import dash_html_components as html
+
+
+class CollapsiveHeader(html.Details):
+    """Creates a collapsible box with a large header label.
+
+    Keyword arguments:
+
+    - children (a list of or a singular dash component, string or number; required):
+        The children of this component.
+
+    - open_details (bool; default True):
+        Used to set initial opened/closed state
+
+    - label (str; optional):
+        The text of the label
+
+    """
+
+    def __init__(
+        self, children: Any, open_details: bool = True, label: str = "", **kwargs: Any
+    ) -> None:
+        super().__init__(**kwargs)
+        self.open = open_details
+        self.children = [
+            html.Summary(children=label, className="webviz-header")
+        ] + children

webviz_core_components/wrapped_components/dropdown.py

@@ -0,0 +1,30 @@
+from typing import Any
+
+import dash_html_components as html
+import dash_core_components as dcc
+
+
+class Dropdown(html.Div):
+    def __init__(
+        self,
+        label: str = None,
+        wrapper_id: str = None,
+        persistence: bool = True,
+        persistence_type: str = "session",
+        **kwargs: Any,
+    ) -> None:
+        super().__init__()
+        if wrapper_id is not None:
+            self.id = wrapper_id
+        children = [html.Label(label)] if label else []
+        children.append(
+            html.Div(
+                className="webviz-dropdown",
+                children=dcc.Dropdown(
+                    persistence=persistence,
+                    persistence_type=persistence_type,
+                    **kwargs,
+                ),
+            )
+        )
+        self.children = html.Div(style={"fontSize": "15px"}, children=children)

webviz_core_components/wrapped_components/flexcolumn.py

@@ -0,0 +1,38 @@
+from typing import Union, Any
+import dash_html_components as html
+
+
+class FlexColumn(html.Div):
+    """Used as a child of wcc.Flexbox to arrange components in a grid.
+
+    Keyword arguments:
+
+    - children (a list of or a singular dash component, string or number; required):
+        The children of this component.
+
+    - flex (int, str; default 1):
+        The fraction of width this component will have
+
+    - min_width (str; optional):
+        The minimum width before the component will rearrange to a new row
+
+    - style (string; optional):
+        Additional css class to apply
+
+    """
+
+    def __init__(
+        self,
+        children: Any,
+        flex: Union[str, int] = 1,
+        min_width: str = None,
+        style: dict = None,
+        **kwargs: Any,
+    ) -> None:
+        super().__init__(**kwargs)
+        style = style if style else {}
+        style.update({"flex": flex})
+        if min_width is not None:
+            style.update({"minWidth": min_width})
+        self.style = style
+        self.children = children