wip

rubenthoms · Aug 20, 2024 · ff90c3b · ff90c3b
1 parent 85ee569
commit ff90c3b
Show file tree

Hide file tree

Showing 16 changed files with 287 additions and 279 deletions.
diff --git a/frontend/src/lib/components/SortableList/index.ts b/frontend/src/lib/components/SortableList/index.ts
@@ -1,7 +1,7 @@
-export { SortableList } from "./sortableList";
+export { SortableList, ItemType } from "./sortableList";
 export { SortableListItem } from "./sortableListItem";
 export { SortableListGroup } from "./sortableListGroup";
 
-export type { SortableListProps } from "./sortableList";
+export type { SortableListProps, IsMoveAllowedArgs } from "./sortableList";
 export type { SortableListItemProps } from "./sortableListItem";
 export type { SortableListGroupProps } from "./sortableListGroup";
diff --git a/frontend/src/modules/2DViewer/layers/SurfaceLayer.ts b/frontend/src/modules/2DViewer/layers/SurfaceLayer.ts
@@ -13,7 +13,7 @@ import { QueryClient } from "@tanstack/query-core";
 import { isEqual } from "lodash";
 import { SurfaceDataPng } from "src/api/models/SurfaceDataPng";
 
-import { EnsembleStage, EnsembleStageType } from "../settings/components/ensembleStageSelect";
+import { EnsembleStageType } from "../settings/components/ensembleStageSelect";
 
 const STALE_TIME = 60 * 1000;
 const CACHE_TIME = 60 * 1000;
@@ -35,10 +35,6 @@ export class SurfaceLayer extends BaseLayer<SurfaceLayerSettings, SurfaceDataFlo
             ensembleIdent: null,
             realizationNum: null,
             statisticFunction: SurfaceStatisticFunction_api.MEAN,
-            polyline: {
-                polylineUtmXy: [],
-                actualSectionLengths: [],
-            },
             surfaceName: null,
             ensembleStage: EnsembleStageType.Realization,
             attribute: null,

diff --git a/frontend/src/modules/2DViewer/settings/components/layerSettings/faultPolygonLayer.tsx b/frontend/src/modules/2DViewer/settings/components/layerSettings/faultPolygonLayer.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { PolygonsAttributeType_api, PolygonsMeta_api, SurfaceAttributeType_api, SurfaceMetaSet_api } from "@api";
+import { PolygonsAttributeType_api, PolygonsMeta_api } from "@api";
 import { apiService } from "@framework/ApiService";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { EnsembleSet } from "@framework/EnsembleSet";
@@ -11,7 +11,6 @@ import { Dropdown, DropdownOption } from "@lib/components/Dropdown";
 import { PendingWrapper } from "@lib/components/PendingWrapper";
 import { FaultPolygonLayer, FaultPolygonLayerSettings } from "@modules/2DViewer/layers/FaultPolygonLayer";
 import { useLayerSettings } from "@modules/_shared/layers/BaseLayer";
-import { LayerManagerTopic, useLayerManagerTopicValue } from "@modules/_shared/layers/LayerManager";
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 
 import { cloneDeep, isEqual } from "lodash";
@@ -27,7 +26,7 @@ export type FaultPolygonLayerSettingsComponentProps = {
 const faultPolygonAttributeTypes = [PolygonsAttributeType_api.FAULT_LINES, PolygonsAttributeType_api.DEPTH];
 
 export function FaultPolygonLayerSettingsComponent(props: FaultPolygonLayerSettingsComponentProps): React.ReactNode {
-    useLayerManagerTopicValue(props.layer.getLayerManager(), LayerManagerTopic.SETTINGS_CHANGED);
+    // useLayerManagerTopicValue(props.layer.getLayerManager(), LayerManagerTopic.SETTINGS_CHANGED);
     const settings = useLayerSettings(props.layer);
     const [newSettings, setNewSettings] = React.useState<FaultPolygonLayerSettings>(cloneDeep(settings));
     const [prevSettings, setPrevSettings] = React.useState<FaultPolygonLayerSettings>(cloneDeep(settings));

diff --git a/frontend/src/modules/2DViewer/settings/components/layerSettings/polygonLayer.tsx b/frontend/src/modules/2DViewer/settings/components/layerSettings/polygonLayer.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { PolygonsAttributeType_api, PolygonsMeta_api, SurfaceAttributeType_api, SurfaceMetaSet_api } from "@api";
+import { PolygonsAttributeType_api, PolygonsMeta_api } from "@api";
 import { apiService } from "@framework/ApiService";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { EnsembleSet } from "@framework/EnsembleSet";
@@ -12,7 +12,6 @@ import { Dropdown, DropdownOption } from "@lib/components/Dropdown";
 import { PendingWrapper } from "@lib/components/PendingWrapper";
 import { PolygonLayer, PolygonLayerSettings } from "@modules/2DViewer/layers/PolygonLayer";
 import { useLayerSettings } from "@modules/_shared/layers/BaseLayer";
-import { LayerManagerTopic, useLayerManagerTopicValue } from "@modules/_shared/layers/LayerManager";
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 
 import { cloneDeep, isEqual } from "lodash";
@@ -28,7 +27,7 @@ export type PolygonLayerSettingsComponentProps = {
 const faultPolygonAttributeTypes = [PolygonsAttributeType_api.FAULT_LINES, PolygonsAttributeType_api.DEPTH];
 
 export function PolygonLayerSettingsComponent(props: PolygonLayerSettingsComponentProps): React.ReactNode {
-    useLayerManagerTopicValue(props.layer.getLayerManager(), LayerManagerTopic.SETTINGS_CHANGED);
+    //useLayerManagerTopicValue(props.layer.getLayerManager(), LayerManagerTopic.SETTINGS_CHANGED);
     const settings = useLayerSettings(props.layer);
     const [newSettings, setNewSettings] = React.useState<PolygonLayerSettings>(cloneDeep(settings));
     const [prevSettings, setPrevSettings] = React.useState<PolygonLayerSettings>(cloneDeep(settings));

diff --git a/frontend/src/modules/2DViewer/settings/components/layerSettings/surfaceLayer.tsx b/frontend/src/modules/2DViewer/settings/components/layerSettings/surfaceLayer.tsx
@@ -9,10 +9,8 @@ import { WorkbenchSettings } from "@framework/WorkbenchSettings";
 import { EnsembleDropdown } from "@framework/components/EnsembleDropdown";
 import { Dropdown, DropdownOption } from "@lib/components/Dropdown";
 import { PendingWrapper } from "@lib/components/PendingWrapper";
-import { Select } from "@lib/components/Select";
 import { SurfaceLayer, SurfaceLayerSettings } from "@modules/2DViewer/layers/SurfaceLayer";
 import { useLayerSettings } from "@modules/_shared/layers/BaseLayer";
-import { LayerManagerTopic, useLayerManagerTopicValue } from "@modules/_shared/layers/LayerManager";
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 
 import { cloneDeep, isEqual } from "lodash";
@@ -29,7 +27,7 @@ export type SurfaceLayerSettingsComponentProps = {
 };
 
 export function SurfaceLayerSettingsComponent(props: SurfaceLayerSettingsComponentProps): React.ReactNode {
-    useLayerManagerTopicValue(props.layer.getLayerManager(), LayerManagerTopic.SETTINGS_CHANGED);
+    //useLayerManagerTopicValue(props.layer.getLayerManager(), LayerManagerTopic.SETTINGS_CHANGED);
     const settings = useLayerSettings(props.layer);
     const [newSettings, setNewSettings] = React.useState<SurfaceLayerSettings>(cloneDeep(settings));
     const [prevSettings, setPrevSettings] = React.useState<SurfaceLayerSettings>(cloneDeep(settings));

diff --git a/frontend/src/modules/2DViewer/settings/settings.tsx b/frontend/src/modules/2DViewer/settings/settings.tsx
@@ -12,6 +12,7 @@ import { MenuHeading } from "@lib/components/MenuHeading";
 import { MenuItem } from "@lib/components/MenuItem";
 import { LayersPanel } from "@modules/_shared/components/Layers";
 import { BaseLayer } from "@modules/_shared/layers/BaseLayer";
+import { LayerGroup } from "@modules/_shared/layers/LayerGroup";
 import { LayerSettingFactory } from "@modules/_shared/layers/settings/LayerSettingFactory";
 import { SETTING_TYPE_TO_STRING_MAPPING, SettingType } from "@modules/_shared/layers/settings/SettingTypes";
 import { Dropdown, MenuButton } from "@mui/base";
@@ -51,16 +52,17 @@ export function Settings(props: ModuleSettingsProps<State, SettingsToViewInterfa
 
     function handleAddLayer(layerType: LayerType) {
         const layer = LayerFactory.makeLayer(layerType, layerManager);
-        layerManager.addLayer(layer);
+        layer.setQueryClient(layerManager.getQueryClient());
+        layerManager.getMainGroup().prependItem(layer);
     }
 
     function handleAddView() {
-        layerManager.addGroup("View");
+        layerManager.getMainGroup().prependItem(new LayerGroup("View", layerManager));
     }
 
     function handleAddSetting(settingType: SettingType) {
         const setting = LayerSettingFactory.makeSetting(settingType);
-        layerManager.addSetting(setting);
+        layerManager.getMainGroup().prependItem(setting);
     }
 
     return (

diff --git a/frontend/src/modules/2DViewer/view/view.tsx b/frontend/src/modules/2DViewer/view/view.tsx
@@ -16,6 +16,7 @@ import SubsurfaceViewer, { ViewsType } from "@webviz/subsurface-viewer/dist/Subs
 import { Axes2DLayer, MapLayer, WellsLayer } from "@webviz/subsurface-viewer/dist/layers";
 
 import { Rgb, parse } from "culori";
+import { isEqual } from "lodash";
 
 import { FaultPolygonLayer } from "../layers/FaultPolygonLayer";
 import { PolygonLayer } from "../layers/PolygonLayer";
@@ -28,9 +29,15 @@ export function View(props: ModuleViewProps<State, SettingsToViewInterface>): Re
     const statusWriter = useViewStatusWriter(props.viewContext);
     const layerManager = props.viewContext.useSettingsToViewInterfaceValue("layerManager");
     const allItems = useLayerManagerTopicValue(layerManager, LayerManagerTopic.ITEMS_CHANGED);
-    const layerItems = useLayerManagerTopicValue(layerManager, LayerManagerTopic.LAYERS_CHANGED_RECURSIVELY);
 
-    const layers = useLayers(layerItems);
+    const [prevLayerItems, setPrevLayerItems] = React.useState<BaseLayer<any, any>[]>([]);
+
+    const currentLayerItems = allItems.filter((item) => item instanceof BaseLayer) as BaseLayer<any, any>[];
+    if (!isEqual(currentLayerItems, prevLayerItems)) {
+        setPrevLayerItems(currentLayerItems);
+    }
+
+    const layers = useLayers(prevLayerItems);
     const layersStatuses = useLayersStatuses(layers);
 
     statusWriter.setLoading(layersStatuses.some((status) => status.status === LayerStatus.LOADING));
@@ -75,9 +82,12 @@ export function View(props: ModuleViewProps<State, SettingsToViewInterface>): Re
                 }
             }
         } else if (item instanceof LayerGroup) {
-            const layers = item.getLayers();
+            const layers = item.getItems();
             const groupLayers: Layer[] = [];
             for (const layer of layers) {
+                if (!(layer instanceof BaseLayer)) {
+                    continue;
+                }
                 if (!layer.getIsVisible()) {
                     continue;
                 }
@@ -154,7 +164,6 @@ export function View(props: ModuleViewProps<State, SettingsToViewInterface>): Re
         viewports: viewports,
         showLabel: true,
     };
-    console.log(views);
     return (
         <div className="relative w-full h-full flex flex-col">
             <SubsurfaceViewer

diff --git a/frontend/src/modules/Intersection/settings/settings.tsx b/frontend/src/modules/Intersection/settings/settings.tsx
@@ -149,7 +149,7 @@ export function Settings(
 
     function handleAddLayer(layerType: LayerType) {
         const layer = LayerFactory.makeLayer(layerType, layerManager);
-        layerManager.addLayer(layer);
+        layerManager.getMainGroup().prependItem(layer);
     }
 
     return (

diff --git a/frontend/src/modules/Intersection/view/view.tsx b/frontend/src/modules/Intersection/view/view.tsx
@@ -36,9 +36,8 @@ export function View(
     const wellbore = props.viewContext.useSettingsToViewInterfaceValue("wellboreHeader");
 
     const layerManager = props.viewContext.useSettingsToViewInterfaceValue("layerManager");
-    const items = useLayerManagerTopicValue(layerManager, LayerManagerTopic.ITEMS_CHANGED);
-    const layers = items.filter((item) => item instanceof BaseLayer) as BaseLayer<any, any>[];
-    const layersStatuses = useLayersStatuses(layers.filter((el) => el instanceof BaseLayer) as BaseLayer<any, any>[]);
+    const layers = useLayerManagerTopicValue(layerManager, LayerManagerTopic.ITEMS_CHANGED) as BaseLayer<any, any>[];
+    const layersStatuses = useLayersStatuses(layers);
 
     const intersectionExtensionLength =
         props.viewContext.useSettingsToViewInterfaceValue("intersectionExtensionLength");

diff --git a/frontend/src/modules/_shared/components/Layers/addLayerDropdown.tsx b/frontend/src/modules/_shared/components/Layers/addLayerDropdown.tsx
@@ -11,15 +11,15 @@ import { Add, ArrowDropDown } from "@mui/icons-material";
 import { LayerFactory } from "./layersPanel";
 
 export type AddLayerDropdownProps<TLayerType extends string> = {
-    parent: LayerGroup | LayerManager;
+    parent: LayerGroup;
     layerManager: LayerManager;
     layerTypeToStringMapping: Record<TLayerType, string>;
     layerFactory: LayerFactory<TLayerType>;
 };
 
 export function AddLayerDropdown<TLayerType extends string>(props: AddLayerDropdownProps<TLayerType>): React.ReactNode {
     function handleAddLayer(type: TLayerType) {
-        props.parent.addLayer(props.layerFactory.makeLayer(type, props.layerManager));
+        props.parent.prependItem(props.layerFactory.makeLayer(type, props.layerManager));
     }
 
     return (

diff --git a/frontend/src/modules/_shared/components/Layers/layerGroupComponents.tsx b/frontend/src/modules/_shared/components/Layers/layerGroupComponents.tsx
@@ -9,8 +9,8 @@ import { LayerManager } from "@modules/_shared/layers/LayerManager";
 import { Add, Delete, Folder, Visibility, VisibilityOff } from "@mui/icons-material";
 
 import { AddLayerDropdown } from "./addLayerDropdown";
-import { LayerComponent } from "./layerComponents";
 import { LayerFactory, MakeSettingsContainerFunc } from "./layersPanel";
+import { makeContent } from "./utils";
 
 export type LayerGroupComponentProps<TLayerType extends string> = {
     layerManager: LayerManager;
@@ -28,10 +28,12 @@ export type LayerGroupComponentProps<TLayerType extends string> = {
 export function LayerGroupComponent<TLayerType extends string>(
     props: LayerGroupComponentProps<TLayerType>
 ): React.ReactNode {
-    const layers = useLayerGroupTopicValue(props.group, LayerGroupTopic.LAYERS_CHANGED);
+    useLayerGroupTopicValue(props.group, LayerGroupTopic.ITEMS_CHANGED);
 
-    function handleRemoveLayer(layerId: string) {
-        props.group.removeLayer(layerId);
+    const items = props.group.getItems();
+
+    function handleRemoveItem(layerId: string) {
+        props.group.removeItem(layerId);
     }
 
     return (
@@ -57,17 +59,18 @@ export function LayerGroupComponent<TLayerType extends string>(
                 </div>
             }
         >
-            {layers.map((layer) => (
-                <LayerComponent
-                    key={layer.getId()}
-                    layer={layer}
-                    onRemove={handleRemoveLayer}
-                    makeSettingsContainerFunc={props.makeSettingsContainerFunc}
-                    ensembleSet={props.ensembleSet}
-                    workbenchSession={props.workbenchSession}
-                    workbenchSettings={props.workbenchSettings}
-                />
-            ))}
+            {makeContent(
+                items,
+                props.layerManager,
+                props.icon,
+                props.layerFactory,
+                props.layerTypeToStringMapping,
+                handleRemoveItem,
+                props.makeSettingsContainerFunc,
+                props.ensembleSet,
+                props.workbenchSession,
+                props.workbenchSettings
+            )}
         </SortableListGroup>
     );
 }

diff --git a/frontend/src/modules/_shared/components/Layers/layersPanel.tsx b/frontend/src/modules/_shared/components/Layers/layersPanel.tsx
@@ -3,13 +3,12 @@ import React from "react";
 import { EnsembleSet } from "@framework/EnsembleSet";
 import { WorkbenchSession } from "@framework/WorkbenchSession";
 import { WorkbenchSettings } from "@framework/WorkbenchSettings";
-import { SortableList, SortableListItemProps } from "@lib/components/SortableList";
-import { IsMoveAllowedArgs, ItemType } from "@lib/components/SortableList/sortableList";
+import { IsMoveAllowedArgs, ItemType, SortableList, SortableListItemProps } from "@lib/components/SortableList";
 import { BaseLayer } from "@modules/_shared/layers/BaseLayer";
 import { LayerGroup } from "@modules/_shared/layers/LayerGroup";
 import {
+    LayerItem,
     LayerManager,
-    LayerManagerItem,
     LayerManagerTopic,
     useLayerManagerTopicValue,
 } from "@modules/_shared/layers/LayerManager";
@@ -50,67 +49,55 @@ export type LayersPanelProps<TLayerType extends string> = {
 };
 
 export function LayersPanel<TLayerType extends string>(props: LayersPanelProps<TLayerType>): React.ReactNode {
-    const items = useLayerManagerTopicValue(props.layerManager, LayerManagerTopic.ITEMS_CHANGED);
+    useLayerManagerTopicValue(props.layerManager, LayerManagerTopic.ITEMS_CHANGED);
+    const items = props.layerManager.getMainGroup().getItems();
     const layerSettingFactory = new LayerSettingContentFactory(
         props.ensembleSet,
         props.workbenchSession,
         props.workbenchSettings
     );
 
-    const [prevItems, setPrevItems] = React.useState<LayerManagerItem[]>(items);
+    const [prevItems, setPrevItems] = React.useState<LayerItem[]>(items);
     const [itemsOrder, setItemsOrder] = React.useState<string[]>(items.map((item) => item.getId()));
 
     if (!isEqual(prevItems, items)) {
         setPrevItems(items);
         setItemsOrder(items.map((layer) => layer.getId()));
     }
 
-    function handleRemoveGroup(id: string) {
-        props.layerManager.removeGroup(id);
-    }
-
     function handleRemoveItem(id: string) {
-        props.layerManager.removeLayer(id);
+        props.layerManager.getMainGroup().removeItem(id);
     }
 
     function handleItemMove(itemId: string, originId: string | null, destinationId: string | null, position: number) {
-        let origin: LayerGroup | LayerManager | null = props.layerManager;
+        let origin: LayerGroup | null = props.layerManager.getMainGroup();
         if (originId) {
-            origin = props.layerManager.getGroup(originId) ?? null;
+            const candidate = props.layerManager.getItem(originId);
+            if (candidate instanceof LayerGroup) {
+                origin = candidate;
+            }
         }
 
-        let destination: LayerGroup | LayerManager | null = props.layerManager;
+        let destination: LayerGroup | null = props.layerManager.getMainGroup();
         if (destinationId) {
-            destination = props.layerManager.getGroup(destinationId) ?? null;
+            const candidate = props.layerManager.getItem(destinationId);
+            if (candidate instanceof LayerGroup) {
+                destination = candidate;
+            }
         }
 
         if (origin === null || destination === null) {
             return;
         }
 
-        let isLayerOrSetting: boolean = true;
-        let item: BaseLayer<any, any> | LayerGroup | undefined = origin.getLayer(itemId);
-
-        if (!item && origin instanceof LayerManager) {
-            item = origin.getGroup(itemId);
-            isLayerOrSetting = false;
-        }
+        const item: LayerItem | undefined = origin.getItem(itemId);
 
         if (!item) {
             return;
         }
 
-        if (isLayerOrSetting) {
-            if (item instanceof BaseLayer) {
-                origin.removeLayer(itemId);
-                destination.insertLayer(item, position);
-            }
-        } else if (origin instanceof LayerManager) {
-            origin.removeGroup(itemId);
-            if (destination instanceof LayerManager && item instanceof LayerGroup) {
-                destination.insertGroup(item, position);
-            }
-        }
+        origin.removeItem(itemId);
+        destination.insertItem(item, position);
     }
 
     function makeLayerElement(layer: BaseLayer<any, any>): React.ReactElement<SortableListItemProps> {
@@ -136,7 +123,7 @@ export function LayersPanel<TLayerType extends string>(props: LayersPanelProps<T
                 icon={props.groupIcon}
                 layerFactory={props.layerFactory}
                 layerTypeToStringMapping={props.layerTypeToStringMapping}
-                onRemove={handleRemoveGroup}
+                onRemove={handleRemoveItem}
                 makeSettingsContainerFunc={props.makeSettingsContainerFunc}
                 ensembleSet={props.ensembleSet}
                 workbenchSession={props.workbenchSession}
@@ -158,7 +145,7 @@ export function LayersPanel<TLayerType extends string>(props: LayersPanelProps<T
 
         const orderedItems = itemsOrder
             .map((id) => items.find((el) => el.getId() === id))
-            .filter((el) => el) as LayerManagerItem[];
+            .filter((el) => el) as LayerItem[];
 
         for (let i = 0; i < orderedItems.length; i++) {
             const item = orderedItems[i];