feat: Split GroupTree into GroupTreePlot-component and settings

python/package.json

@@ -35,7 +35,7 @@
         "@mui/material": "^5.11",
         "@reduxjs/toolkit": "^1.7.2",
         "@webviz/core-components": "^0.6.2",
-        "@webviz/group-tree": "file:../typescript/packages/group-tree",
+        "@webviz/group-tree-plot": "file:../typescript/packages/group-tree-plot",
         "@webviz/subsurface-viewer": "file:../typescript/packages/subsurface-viewer",
         "@webviz/well-completions-plot": "file:../typescript/packages/well-completions-plot",
         "@webviz/well-log-viewer": "file:../typescript/packages/well-log-viewer",

python/src/components/GroupTree/GroupTree.jsx

@@ -1,22 +1,26 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import {
+    DatedTreePropTypes,
+    EdgeMetadataPropTypes,
+    NodeMetadataPropTypes,
+} from "@webviz/group-tree-plot";
+
 const GroupTreeComponent = React.lazy(() =>
-    import(/* webpackChunkName: "webviz-group-tree" */ "@webviz/group-tree")
+    import(
+        /* webpackChunkName: "webviz-group-tree" */ "./components/GroupTreeComponent"
+    )
 );
 
-const GroupTree = (props) => {
-    const {
-        edge_options: edgeOptions,
-        node_options: nodeOptions,
-        ...rest
-    } = props;
+export const GroupTree = (props) => {
     return (
         <React.Suspense fallback={<div>Loading...</div>}>
             <GroupTreeComponent
-                edgeOptions={edgeOptions}
-                nodeOptions={nodeOptions}
-                {...rest}
+                id={props.id}
+                data={props.data}
+                edgeMetadataList={props.edge_metadata_list}
+                nodeMetadataList={props.node_metadata_list}
             />
         </React.Suspense>
     );
@@ -29,15 +33,17 @@ GroupTree.propTypes = {
      * components in an app.
      */
     id: PropTypes.string.isRequired,
+
     /**
      * Array of JSON objects describing group tree data.
      */
-    data: PropTypes.arrayOf(PropTypes.object),
+    data: PropTypes.arrayOf(DatedTreePropTypes),
 
-    edge_options: PropTypes.arrayOf(PropTypes.object),
-    node_options: PropTypes.arrayOf(PropTypes.object),
+    /**
+     * Arrays of metadata. Used in drop down selectors and tree visualization.
+     */
+    edge_metadata_list: EdgeMetadataPropTypes,
+    node_metadata_list: NodeMetadataPropTypes,
 };
 
 GroupTree.displayName = "GroupTree";
-
-export default GroupTree;

python/src/components/GroupTree/components/DataLoader.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable react-hooks/exhaustive-deps */ // remove when ready to fix these.
+
+import type { PropsWithChildren, ReactNode } from "react";
+import React, { useMemo } from "react";
+import { Provider as ReduxProvider } from "react-redux";
+import { createReduxStore } from "../redux/store";
+import type { UISettings } from "../redux/types";
+import type {
+    DatedTree,
+    EdgeMetadata,
+    NodeMetadata,
+} from "@webviz/group-tree-plot";
+
+export type DateTreesIndices = {
+    treeIndex: number;
+    dateIndex: number;
+};
+
+interface DataProviderProps {
+    id: string;
+    data: DatedTree[];
+    edgeMetadataList: EdgeMetadata[];
+    nodeMetadataList: NodeMetadata[];
+    initialIndices: DateTreesIndices;
+    children: ReactNode;
+}
+
+export const DataContext = React.createContext<DatedTree[]>([]);
+
+const DataProvider: React.FC<DataProviderProps> = (
+    props: PropsWithChildren<DataProviderProps>
+) => {
+    const preloadedState = useMemo(() => {
+        // Use "initialIndices" from previous data if it refers to a valid date otherwise use first date.
+        const treeIdx = props.initialIndices.treeIndex;
+        const dateIdx = props.initialIndices.dateIndex;
+        const hasValidIndices =
+            props.data.length > treeIdx &&
+            props.data[treeIdx].dates.length > dateIdx;
+        const initialDateTime = hasValidIndices
+            ? props.data[treeIdx].dates[dateIdx]
+            : props.data[0].dates[0];
+
+        const initialFlowRate = props.edgeMetadataList[0]?.key ?? "";
+        const initialNodeInfo = props.nodeMetadataList[0]?.key ?? "";
+
+        return {
+            id: props.id,
+            ui: {
+                currentDateTime: initialDateTime,
+                currentFlowRate: initialFlowRate,
+                currentNodeInfo: initialNodeInfo,
+            } as UISettings,
+        };
+    }, [props.id, props.data]); // Shallow compare does not detect updated data? Will useMemo actually help?
+
+    const store = useMemo(
+        () => createReduxStore(preloadedState),
+        [preloadedState]
+    );
+
+    return (
+        <DataContext.Provider value={props.data}>
+            <ReduxProvider store={store}>{props.children}</ReduxProvider>
+        </DataContext.Provider>
+    );
+};
+
+export default DataProvider;

python/src/components/GroupTree/components/GroupTreeComponent.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback, useState } from "react";
+
+import DataProvider, { DateTreesIndices } from "./DataLoader";
+import GroupTreeViewer from "./GroupTreeViewer";
+import { DatedTree, EdgeMetadata, NodeMetadata } from "@webviz/group-tree-plot";
+
+//TODO schema check
+export interface GroupTreeProps {
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: string;
+    /**
+     * Array of JSON objects describing group tree data.
+     */
+    data: DatedTree[];
+
+    /**
+     * Arrays of metadata. Used in drop down selectors and tree visualization.
+     */
+    edgeMetadataList: EdgeMetadata[];
+    nodeMetadataList: NodeMetadata[];
+}
+
+const GroupTreeComponent: React.FC<GroupTreeProps> = React.memo(
+    (props: GroupTreeProps) => {
+        const [indices, setIndices] = useState<DateTreesIndices>({
+            treeIndex: 0,
+            dateIndex: 0,
+        });
+
+        const currentDateTimeChangedCallBack = useCallback(
+            (currentDateTime: string) => {
+                const newTreeIndex = props.data.findIndex((e) => {
+                    return e.dates.includes(currentDateTime);
+                });
+                const newDateIndex =
+                    props.data[newTreeIndex].dates.indexOf(currentDateTime);
+
+                setIndices({
+                    treeIndex: newTreeIndex,
+                    dateIndex: newDateIndex,
+                });
+            },
+            [props.data]
+        );
+
+        return (
+            <DataProvider
+                id={props.id}
+                data={props.data}
+                edgeMetadataList={props.edgeMetadataList}
+                nodeMetadataList={props.nodeMetadataList}
+                initialIndices={indices}
+            >
+                <GroupTreeViewer
+                    id={props.id}
+                    edgeMetadataList={props.edgeMetadataList}
+                    nodeMetadataList={props.nodeMetadataList}
+                    currentDateTimeChangedCallBack={
+                        currentDateTimeChangedCallBack
+                    }
+                />
+            </DataProvider>
+        );
+    }
+);
+
+GroupTreeComponent.displayName = "GroupTreeComponent";
+export default GroupTreeComponent;

python/src/components/GroupTree/components/GroupTreeViewer.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */ // remove when ready to fix these.
+
+import { styled } from "@mui/material/styles";
+import React, { useContext, useEffect } from "react";
+import { useSelector } from "react-redux";
+import type { GroupTreeState } from "../redux/store";
+import { DataContext } from "./DataLoader";
+import SettingsBar from "./Settings/SettingsBar";
+
+import {
+    GroupTreePlot,
+    EdgeMetadata,
+    NodeMetadata,
+} from "@webviz/group-tree-plot";
+
+const PREFIX = "GroupTreeViewer";
+
+const classes = {
+    root: `${PREFIX}-root`,
+};
+
+const Root = styled("div")(() => ({
+    [`&.${classes.root}`]: {
+        position: "relative",
+        display: "flex",
+        flex: 1,
+        flexDirection: "column",
+        height: "90%",
+    },
+}));
+
+interface GroupTreeViewerProps {
+    id: string;
+    edgeMetadataList: EdgeMetadata[];
+    nodeMetadataList: NodeMetadata[];
+    currentDateTimeChangedCallBack: (currentDateTime: string) => void;
+}
+
+const GroupTreeViewer: React.FC<GroupTreeViewerProps> = (
+    props: GroupTreeViewerProps
+) => {
+    const data = useContext(DataContext);
+
+    const currentDateTime = useSelector(
+        (state: GroupTreeState) => state.ui.currentDateTime
+    );
+    const currentFlowRateKey = useSelector(
+        (state: GroupTreeState) => state.ui.currentFlowRate
+    );
+    const currentNodeKey = useSelector(
+        (state: GroupTreeState) => state.ui.currentNodeInfo
+    );
+
+    useEffect(() => {
+        if (typeof props.currentDateTimeChangedCallBack !== "undefined") {
+            props.currentDateTimeChangedCallBack(currentDateTime);
+        }
+    }, [currentDateTime]);
+
+    return (
+        <Root className={classes.root}>
+            <SettingsBar
+                edgeMetadataList={props.edgeMetadataList}
+                nodeMetadataList={props.nodeMetadataList}
+            />
+            <GroupTreePlot
+                id={props.id}
+                datedTrees={data}
+                edgeMetadataList={props.edgeMetadataList}
+                nodeMetadataList={props.nodeMetadataList}
+                selectedEdgeKey={currentFlowRateKey}
+                selectedNodeKey={currentNodeKey}
+                selectedDateTime={currentDateTime}
+            />
+        </Root>
+    );
+};
+
+GroupTreeViewer.displayName = "GroupTreeViewer";
+export default GroupTreeViewer;