Introducing Webviz Layout Framework (WLF) (#219)

* Implemented view selector and view selection menu, store * Implemented settings, plugins and view elements * Changed background color of body * Implemented full screen * Adjusted to be usable with Dash backend * Adjusted button style and fixed app demo * Added screenshot function, added active plugin reference to store * Add click actions for Plugin and ViewElements * Added layout (row/column) implementations * Added backdrop component * Implemented new tour * Adjustments to `Overlay` and `ScrollArea` * Added `uuid` types declaration package * Added `Node` and `npm` version output to GitHub workflow. * Adjustments to `package-lock.json` * Pinned `dash` version to `2.4.x` in GitHub workflow * Adjusted package versions for compatibility (React related) * Added Python wrapper around `WebvizPluginPlaceholder` for deprecation Co-authored-by: Jørgen Herje <[email protected]>
equinor · Jun 16, 2022 · 221181b · 221181b
1 parent d7aba09
commit 221181b
Show file tree

Hide file tree

Showing 74 changed files with 5,919 additions and 1,501 deletions.
diff --git a/.github/workflows/webviz-core-components.yml b/.github/workflows/webviz-core-components.yml
@@ -30,13 +30,22 @@ jobs:
               with:
                   python-version: ${{ matrix.python-version }}
 
+            - name: ℹ️ Node and npm versions
+              run: |
+                  node -v
+                  npm -v
+
             - name: 📦 Install build dependencies
               run: |
                   npm ci --ignore-scripts --prefix ./react
                   npm run copy-package-json --prefix ./react
+                  pip install "dash<2.5"  # Build issue upstream in dash==2.5
                   pip install .[dependencies]
                   pip install dash[dev]
 
+            - name: ℹ️ Installed npm packages (depth = 0)
+              run: npm list --depth=0 --prefix react/
+
             - name: 🏗️ Build JavaScript part
               run: |
                   npm run build --prefix ./react

diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@ webviz_core_components/**/*
 !webviz_core_components/__init__.py
 !webviz_core_components/wrapped_components
 !webviz_core_components/wrapped_components/*
+!webviz_core_components/WebvizPluginPlaceholderWrapper.py
 
 react/webviz_core_components/
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/react/index.html b/react/index.html
@@ -1,14 +1,10 @@
-<!doctype>
+<!DOCTYPE >
 <html>
     <head>
-        <title>my-dash-component</title>
+        <title>Webviz-Core-Components Demo</title>
     </head>
     <body>
         <div id="root"></div>
-        <svg width="400px" height="400px" style="margin-top: 50px;">
-            <rect width="100px" height="100px" style="fill:green" id="green-rect" />
-            <rect width="100px" height="100px" x="200px" style="fill:blue" id="blue-rect" />
-        </svg>
         <script src="/output.js"></script>
     </body>
 </html>
diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -53,8 +53,10 @@
         "notistack": "^1.0.5",
         "react-colorscales": "^0.7.3",
         "react-draggable": "^4.4.4",
+        "react-is": "^17.0.2",
         "reactour": "^1.18.3",
-        "styled-components": "^5.2.1"
+        "styled-components": "^5.2.1",
+        "uuid": "^8.3.2"
     },
     "devDependencies": {
         "@babel/core": "^7.13.10",
@@ -75,6 +77,7 @@
         "@types/react": "^17.0.3",
         "@types/react-dom": "^17.0.3",
         "@types/reactour": "^1.18.1",
+        "@types/uuid": "^8.3.2",
         "@typescript-eslint/eslint-plugin": "^4.19.0",
         "@typescript-eslint/parser": "^4.19.0",
         "babel-jest": "^26.6.3",
@@ -92,10 +95,10 @@
         "jest": "^26.6.3",
         "mini-css-extract-plugin": "^1.3.9",
         "prop-types": "^15.7.2",
-        "react": "^17.0.2",
+        "react": "^16.14.0",
         "react-docgen": "^5.3.1",
-        "react-dom": "^17.0.2",
-        "react-test-renderer": "^17.0.2",
+        "react-dom": "^16.14.0",
+        "react-test-renderer": "^16.14.0",
         "rimraf": "^2.7.1",
         "style-loader": "^2.0.0",
         "styled-jsx": "^3.4.4",

diff --git a/react/src/demo/App.tsx b/react/src/demo/App.tsx
@@ -9,12 +9,7 @@
 import { Button } from "@material-ui/core";
 import React from "react";
 
-import {
-    WebvizPluginPlaceholder,
-    SmartNodeSelector,
-    Menu,
-    Dialog,
-} from "../lib";
+import { WebvizPluginPlaceholder, SmartNodeSelector, Dialog } from "../lib";
 
 const steps = [
     {
@@ -53,48 +48,6 @@ const App: React.FC = () => {
 
     return (
         <div>
-            <Menu
-                menuBarPosition="left"
-                menuDrawerPosition="left"
-                showLogo={true}
-                navigationItems={[
-                    {
-                        type: "section",
-                        title: "Components",
-                        icon: "layers",
-                        content: [
-                            {
-                                type: "group",
-                                title: "Demos",
-                                content: [
-                                    {
-                                        type: "page",
-                                        title: "WebvizPluginPlaceholder",
-                                        href: "#webviz-plugin-placeholder",
-                                    },
-                                    {
-                                        type: "page",
-                                        title: "SmartNodeSelector",
-                                        href: "#smart-node-selector",
-                                    },
-                                    {
-                                        type: "page",
-                                        title: "Dialog",
-                                        href: "#dialog",
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                ]}
-                setProps={setCurrentPage}
-            />
-            {currentPage.url.split("#").length === 1 && (
-                <div>
-                    <h1>webviz-core-components - Demo page</h1>Please select a
-                    component from the menu to view its demo application.
-                </div>
-            )}
             {currentPage.url.split("#")[1] === "dialog" && (
                 <>
                     <h1>Dialog</h1>

diff --git a/react/src/lib/components/Backdrop/Backdrop.tsx b/react/src/lib/components/Backdrop/Backdrop.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import "./backdrop.css";
+
+export type BackdropProps = {
+    opacity: number;
+};
+
+export const Backdrop: React.FC<BackdropProps> = (props: BackdropProps) => {
+    return (
+        <div
+            className="Webviz__Backdrop"
+            style={{
+                opacity: props.opacity,
+                display: props.opacity === 0 ? "none" : "block",
+            }}
+        ></div>
+    );
+};
+
+Backdrop.propTypes = {
+    opacity: PropTypes.number.isRequired,
+};
diff --git a/react/src/lib/components/Backdrop/backdrop.css b/react/src/lib/components/Backdrop/backdrop.css
@@ -0,0 +1,9 @@
+.Webviz__Backdrop {
+    position: fixed;
+    background-color: white;
+    z-index: 1198;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+}
diff --git a/react/src/lib/components/Backdrop/index.ts b/react/src/lib/components/Backdrop/index.ts
@@ -0,0 +1 @@
+export { Backdrop } from "./Backdrop";
diff --git a/react/src/lib/components/Menu/Menu.tsx b/react/src/lib/components/Menu/Menu.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import useSize from "@react-hook/size";
 
+import { useStore } from "../WebvizContentManager";
+
 import { TopMenu } from "./components/TopMenu/TopMenu";
 import { MenuBar } from "./components/MenuBar/MenuBar";
 import { MenuDrawer } from "./components/MenuDrawer/MenuDrawer";
@@ -23,6 +25,8 @@ import {
 } from "./types/navigation";
 
 import "./Menu.css";
+import { StoreActions } from "../WebvizContentManager/WebvizContentManager";
+import { Margins } from "lib/shared-types/margins";
 
 export type ParentProps = {
     url: string;
@@ -141,6 +145,8 @@ export const Menu: React.FC<MenuProps> = (props) => {
     const menuDrawerPosition = props.menuDrawerPosition || "left";
     const showLogo = props.showLogo || false;
 
+    const webvizContentStore = useStore();
+
     const [open, setOpen] = React.useState<boolean>(false);
     const [pinned, setPinned] = React.useState<boolean>(
         localStorage.getItem("pinned") === "true" ||
@@ -190,7 +196,12 @@ export const Menu: React.FC<MenuProps> = (props) => {
     }, [props.navigationItems, windowSize.width]);
 
     React.useEffect(() => {
-        const bodyMargins = { left: 16, top: 16, right: 16, bottom: 16 };
+        const bodyMargins: Margins = {
+            left: 16,
+            top: 16,
+            right: 16,
+            bottom: 16,
+        };
 
         if (!pinned) {
             if (props.menuBarPosition === "left") {
@@ -204,16 +215,29 @@ export const Menu: React.FC<MenuProps> = (props) => {
             }
         } else {
             if (props.menuDrawerPosition === "left") {
-                bodyMargins.left += menuDrawerWidth;
-            } else if (props.menuBarPosition === "right") {
-                bodyMargins.right += menuDrawerWidth;
+                bodyMargins.left = menuDrawerWidth + menuContentSpacing;
+            } else if (props.menuDrawerPosition === "right") {
+                bodyMargins.right = menuDrawerWidth + menuContentSpacing;
             }
         }
 
         document.body.style.marginLeft = bodyMargins.left + "px";
         document.body.style.marginTop = bodyMargins.top + "px";
         document.body.style.marginRight = bodyMargins.right + "px";
         document.body.style.marginBottom = bodyMargins.bottom + "px";
+
+        if (webvizContentStore) {
+            webvizContentStore.dispatch({
+                type: StoreActions.SetMenuPosition,
+                payload: {
+                    pinned: pinned,
+                    menuBarPosition: menuBarPosition as MenuBarPosition,
+                    menuDrawerPosition:
+                        menuDrawerPosition as MenuDrawerPosition,
+                    bodyMargins: bodyMargins,
+                },
+            });
+        }
     }, [
         menuBarWidth,
         menuDrawerWidth,

diff --git a/react/src/lib/components/Menu/components/MenuBar/MenuBar.css b/react/src/lib/components/Menu/components/MenuBar/MenuBar.css
@@ -4,6 +4,7 @@
     display: flex;
     align-items: center;
     padding: 16px;
+    z-index: 100;
 }
 
 .Menu__MenuBar > * {

diff --git a/react/src/lib/components/Overlay/Overlay.css b/react/src/lib/components/Overlay/Overlay.css
@@ -1,9 +1,9 @@
-.Overlay {
+.WebvizOverlay {
     width: 100vw;
     height: 100vh;
     position: fixed;
     left: 0;
     top: 0;
     background-color: black;
-    z-index: 999;
+    z-index: 1010;
 }
diff --git a/react/src/lib/components/Overlay/Overlay.tsx b/react/src/lib/components/Overlay/Overlay.tsx
@@ -50,7 +50,7 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
 
     return (
         <div
-            className="Overlay"
+            className="WebvizOverlay"
             style={{
                 display: opacity > 0 ? "block" : "none",
                 opacity: opacity,

diff --git a/react/src/lib/components/ScrollArea/ScrollArea.tsx b/react/src/lib/components/ScrollArea/ScrollArea.tsx
@@ -195,7 +195,25 @@ export const ScrollArea: React.FC<ScrollAreaProps> = (props) => {
 
     React.useEffect(() => {
         const scroll = (e: WheelEvent) => {
-            e.preventDefault();
+            const target = e.target as HTMLElement | undefined;
+
+            const parentElement = target?.parentElement as
+                | HTMLElement
+                | undefined;
+
+            const targetScrollHeightLargerThanItsVisibleHeight =
+                target && target.scrollHeight > target.clientHeight;
+
+            const parentScrollHeightLargerThanItsVisibleHeight =
+                parentElement &&
+                parentElement.scrollHeight > parentElement.clientHeight;
+
+            if (
+                targetScrollHeightLargerThanItsVisibleHeight ||
+                parentScrollHeightLargerThanItsVisibleHeight
+            ) {
+                return;
+            }
             e.stopPropagation();
             setScrollPosition({
                 y: Math.max(