From 0eef0de34c040ebf2957591aaa1a918d97ad013e Mon Sep 17 00:00:00 2001
From: Ruben Thoms <69145689+rubenthoms@users.noreply.github.com>
Date: Fri, 6 Dec 2024 10:46:57 +0100
Subject: [PATCH] Multiple enhancements, adjustments, and bug fixes to frontend
 code (#809)

---
 frontend/src/framework/ModuleDataTags.ts      |   8 +-
 frontend/src/framework/WorkbenchSession.ts    |   2 +-
 .../EnsembleDropdown/ensembleDropdown.tsx     |  25 ++-
 .../EnsembleSelect/ensembleSelect.tsx         |  37 ++--
 .../private-components/modulesList.tsx        |   2 +-
 frontend/src/framework/utils/colorPalettes.ts |   2 +-
 frontend/src/lib/components/Input/input.tsx   |  16 ++
 .../src/lib/components/MenuButton/index.ts    |   2 +
 .../lib/components/MenuButton/menuButton.tsx  |  19 ++
 .../components/MenuHeading/menuHeading.tsx    |  14 +-
 .../src/lib/components/SortableList/index.ts  |   4 +-
 .../SortableList/sortableListGroup.tsx        |  31 ++--
 .../SortableList/sortableListItem.tsx         |   9 +-
 frontend/src/lib/utils/ColorPalette.ts        |  22 +++
 frontend/src/lib/utils/ColorScale.ts          |  46 ++++-
 .../settings/components/wellboreSelector.tsx  | 154 ++++++++++++----
 .../modules/3DViewer/settings/settings.tsx    |   2 +-
 .../components/SubsurfaceViewerWrapper.tsx    |   6 +-
 .../modules/FlowNetwork/settings/settings.tsx |   2 +-
 .../components/layerSettings/gridLayer.tsx    |   2 +-
 .../components/layerSettings/seismicLayer.tsx |   2 +-
 .../components/layerSettings/surfaceLayer.tsx |   2 +-
 .../surfacesUncertaintyLayer.tsx              |   2 +-
 .../layerSettings/wellpicksLayer.tsx          |   2 +-
 .../src/modules/Map/settings/settings.tsx     |   2 +-
 .../settings/settings.tsx                     |   2 +-
 .../src/modules/Pvt/settings/settings.tsx     |   2 +-
 frontend/src/modules/Rft/settings.tsx         |   4 +-
 .../settings/settings.tsx                     |   2 +-
 .../settings/settings.tsx                     |   2 +-
 .../SubsurfaceMap/settings/settings.tsx       |   2 +-
 .../src/modules/Vfp/settings/settings.tsx     | 119 ++++++------
 .../WellCompletions/settings/settings.tsx     |   2 +-
 .../colorLegendsContainer.tsx                 | 174 +++++++++++-------
 .../ColorScaleSelector/colorScaleSelector.tsx |   8 +
 .../inplaceVolumetricsFilterComponent.tsx     |   2 +-
 .../modules/_shared/components/ReadoutBox.tsx |   2 +-
 .../SubsurfaceViewerWithCameraState/index.ts  |   2 +
 .../subsurfaceViewerWithCameraState.tsx}      |   8 +
 package-lock.json                             |   6 -
 40 files changed, 519 insertions(+), 233 deletions(-)
 create mode 100644 frontend/src/lib/components/MenuButton/index.ts
 create mode 100644 frontend/src/lib/components/MenuButton/menuButton.tsx
 create mode 100644 frontend/src/modules/_shared/components/SubsurfaceViewerWithCameraState/index.ts
 rename frontend/src/modules/{3DViewer/view/components/SubsurfaceViewerWithCameraState.tsx => _shared/components/SubsurfaceViewerWithCameraState/subsurfaceViewerWithCameraState.tsx} (85%)
 delete mode 100644 package-lock.json

diff --git a/frontend/src/framework/ModuleDataTags.ts b/frontend/src/framework/ModuleDataTags.ts
index b7251cc7c..092cf07ce 100644
--- a/frontend/src/framework/ModuleDataTags.ts
+++ b/frontend/src/framework/ModuleDataTags.ts
@@ -10,7 +10,8 @@ export enum ModuleDataTagId {
     OBSERVATIONS = "observations",
     SEISMIC = "seismic",
     WELL_COMPLETIONS = "well-completions",
-    VFP = "vfp"
+    VFP = "vfp",
+    POLYGONS = "polygons",
 }
 
 export type ModuleDataTag = {
@@ -30,6 +31,11 @@ export const ModuleDataTags: ModuleDataTag[] = [
         name: "3D grid model",
         description: "3D grid model",
     },
+    {
+        id: ModuleDataTagId.POLYGONS,
+        name: "Polygons",
+        description: "Polygons",
+    },
     {
         id: ModuleDataTagId.GROUP_TREE,
         name: "Group tree",
diff --git a/frontend/src/framework/WorkbenchSession.ts b/frontend/src/framework/WorkbenchSession.ts
index aa9d610c8..54fa1c5ad 100644
--- a/frontend/src/framework/WorkbenchSession.ts
+++ b/frontend/src/framework/WorkbenchSession.ts
@@ -77,7 +77,7 @@ export class WorkbenchSession {
     }
 }
 
-function createEnsembleRealizationFilterFuncForWorkbenchSession(workbenchSession: WorkbenchSession) {
+export function createEnsembleRealizationFilterFuncForWorkbenchSession(workbenchSession: WorkbenchSession) {
     return function ensembleRealizationFilterFunc(ensembleIdent: EnsembleIdent): readonly number[] {
         const realizationFilterSet = workbenchSession.getRealizationFilterSet();
         const realizationFilter = realizationFilterSet.getRealizationFilterForEnsembleIdent(ensembleIdent);
diff --git a/frontend/src/framework/components/EnsembleDropdown/ensembleDropdown.tsx b/frontend/src/framework/components/EnsembleDropdown/ensembleDropdown.tsx
index b292f249a..f8bfd6a8c 100644
--- a/frontend/src/framework/components/EnsembleDropdown/ensembleDropdown.tsx
+++ b/frontend/src/framework/components/EnsembleDropdown/ensembleDropdown.tsx
@@ -1,24 +1,31 @@
+import React from "react";
+
+import { Ensemble } from "@framework/Ensemble";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
-import { EnsembleSet } from "@framework/EnsembleSet";
 import { ColorTile } from "@lib/components/ColorTile";
 import { Dropdown, DropdownOption, DropdownProps } from "@lib/components/Dropdown";
 
 type EnsembleDropdownProps = {
-    ensembleSet: EnsembleSet;
+    ensembles: readonly Ensemble[];
     value: EnsembleIdent | null;
     onChange: (ensembleIdent: EnsembleIdent | null) => void;
 } & Omit<DropdownProps<string>, "options" | "value" | "onChange">;
 
 export function EnsembleDropdown(props: EnsembleDropdownProps): JSX.Element {
-    const { ensembleSet, value, onChange, ...rest } = props;
+    const { onChange, value, ...rest } = props;
 
-    function handleSelectionChanged(selectedEnsembleIdentStr: string) {
-        const foundEnsemble = ensembleSet.findEnsembleByIdentString(selectedEnsembleIdentStr);
-        onChange(foundEnsemble ? foundEnsemble.getIdent() : null);
-    }
+    const handleSelectionChange = React.useCallback(
+        function handleSelectionChange(selectedEnsembleIdentStr: string) {
+            const foundEnsemble = props.ensembles.find(
+                (ensemble) => ensemble.getIdent().toString() === selectedEnsembleIdentStr
+            );
+            onChange(foundEnsemble ? foundEnsemble.getIdent() : null);
+        },
+        [props.ensembles, onChange]
+    );
 
     const optionsArr: DropdownOption[] = [];
-    for (const ens of ensembleSet.getEnsembleArr()) {
+    for (const ens of props.ensembles) {
         optionsArr.push({
             value: ens.getIdent().toString(),
             label: ens.getDisplayName(),
@@ -30,5 +37,5 @@ export function EnsembleDropdown(props: EnsembleDropdownProps): JSX.Element {
         });
     }
 
-    return <Dropdown options={optionsArr} value={value?.toString()} onChange={handleSelectionChanged} {...rest} />;
+    return <Dropdown options={optionsArr} value={value?.toString()} onChange={handleSelectionChange} {...rest} />;
 }
diff --git a/frontend/src/framework/components/EnsembleSelect/ensembleSelect.tsx b/frontend/src/framework/components/EnsembleSelect/ensembleSelect.tsx
index 51a9601f6..6fae717a6 100644
--- a/frontend/src/framework/components/EnsembleSelect/ensembleSelect.tsx
+++ b/frontend/src/framework/components/EnsembleSelect/ensembleSelect.tsx
@@ -1,31 +1,36 @@
+import React from "react";
+
+import { Ensemble } from "@framework/Ensemble";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
-import { EnsembleSet } from "@framework/EnsembleSet";
 import { ColorTile } from "@lib/components/ColorTile";
 import { Select, SelectOption, SelectProps } from "@lib/components/Select";
 
 type EnsembleSelectProps = {
-    ensembleSet: EnsembleSet;
+    ensembles: readonly Ensemble[];
     value: EnsembleIdent[];
     onChange: (ensembleIdentArr: EnsembleIdent[]) => void;
 } & Omit<SelectProps<string>, "options" | "value" | "onChange">;
 
-export function EnsembleSelect(props: EnsembleSelectProps): JSX.Element {
-    const { ensembleSet, value, onChange, multiple, ...rest } = props;
-
-    function handleSelectionChanged(selectedEnsembleIdentStrArr: string[]) {
-        const identArr: EnsembleIdent[] = [];
-        for (const identStr of selectedEnsembleIdentStrArr) {
-            const foundEnsemble = ensembleSet.findEnsembleByIdentString(identStr);
-            if (foundEnsemble) {
-                identArr.push(foundEnsemble.getIdent());
+export function EnsembleSelect(props: EnsembleSelectProps): React.ReactNode {
+    const { ensembles, value, onChange, multiple, ...rest } = props;
+
+    const handleSelectionChange = React.useCallback(
+        function handleSelectionChanged(selectedEnsembleIdentStrArr: string[]) {
+            const identArr: EnsembleIdent[] = [];
+            for (const identStr of selectedEnsembleIdentStrArr) {
+                const foundEnsemble = ensembles.find((ens) => ens.getIdent().toString() === identStr);
+                if (foundEnsemble) {
+                    identArr.push(foundEnsemble.getIdent());
+                }
             }
-        }
 
-        onChange(identArr);
-    }
+            onChange(identArr);
+        },
+        [ensembles, onChange]
+    );
 
     const optionsArr: SelectOption[] = [];
-    for (const ens of ensembleSet.getEnsembleArr()) {
+    for (const ens of ensembles) {
         optionsArr.push({
             value: ens.getIdent().toString(),
             label: ens.getDisplayName(),
@@ -48,7 +53,7 @@ export function EnsembleSelect(props: EnsembleSelectProps): JSX.Element {
         <Select
             options={optionsArr}
             value={selectedArr}
-            onChange={handleSelectionChanged}
+            onChange={handleSelectionChange}
             multiple={isMultiple}
             {...rest}
         />
diff --git a/frontend/src/framework/internal/components/LeftSettingsPanel/private-components/modulesList.tsx b/frontend/src/framework/internal/components/LeftSettingsPanel/private-components/modulesList.tsx
index 7c2a13a49..d93d5ed48 100644
--- a/frontend/src/framework/internal/components/LeftSettingsPanel/private-components/modulesList.tsx
+++ b/frontend/src/framework/internal/components/LeftSettingsPanel/private-components/modulesList.tsx
@@ -424,7 +424,7 @@ function DetailsPopup(props: DetailsPopupProps): React.ReactNode {
                 </div>
                 {makeDevState(props.module.getDevState())}
                 <div className="text-xs mt-2">{props.module.getDescription()}</div>
-                <div className="text-xs mt-2 flex gap-2 text-bold">{makeDataTags()}</div>
+                <div className="text-xs mt-2 flex gap-2 text-bold flex-wrap">{makeDataTags()}</div>
             </div>
         </div>
     );
diff --git a/frontend/src/framework/utils/colorPalettes.ts b/frontend/src/framework/utils/colorPalettes.ts
index 36b45dc8e..c9396a3f1 100644
--- a/frontend/src/framework/utils/colorPalettes.ts
+++ b/frontend/src/framework/utils/colorPalettes.ts
@@ -86,7 +86,7 @@ export const defaultContinuousSequentialColorPalettes = [
 export const defaultContinuousDivergingColorPalettes = [
     new ColorPalette({
         name: "Red to Blue",
-        colors: ["#b2182b", "#ef8a62", "#fddbc7", "#f8f6e9", "#d1e5f0", "#67a9cf", "#2166ac"],
+        colors: ["#b2182b", "#ef8a62", "#fddbc7", "#fff", "#d1e5f0", "#67a9cf", "#2166ac"],
         id: "red-to-blue",
     }),
     new ColorPalette({
diff --git a/frontend/src/lib/components/Input/input.tsx b/frontend/src/lib/components/Input/input.tsx
index 648a4ce3f..4f0c90c35 100644
--- a/frontend/src/lib/components/Input/input.tsx
+++ b/frontend/src/lib/components/Input/input.tsx
@@ -106,6 +106,22 @@ export const Input = React.forwardRef((props: InputProps, ref: React.ForwardedRe
         setValue(event.target.value);
 
         if (props.onChange) {
+            if (props.type === "number") {
+                let newValue = 0;
+
+                if (!isNaN(parseFloat(event.target.value as string))) {
+                    newValue = parseFloat((event.target.value as string) || "0");
+                    if (props.min !== undefined) {
+                        newValue = Math.max(props.min, newValue);
+                    }
+
+                    if (props.max !== undefined) {
+                        newValue = Math.min(props.max, newValue);
+                    }
+                }
+
+                event.target.value = newValue.toString();
+            }
             props.onChange(event);
         }
     }
diff --git a/frontend/src/lib/components/MenuButton/index.ts b/frontend/src/lib/components/MenuButton/index.ts
new file mode 100644
index 000000000..0f86b377e
--- /dev/null
+++ b/frontend/src/lib/components/MenuButton/index.ts
@@ -0,0 +1,2 @@
+export { MenuButton } from "./menuButton";
+export type { MenuButtonProps } from "./menuButton";
diff --git a/frontend/src/lib/components/MenuButton/menuButton.tsx b/frontend/src/lib/components/MenuButton/menuButton.tsx
new file mode 100644
index 000000000..e48e24875
--- /dev/null
+++ b/frontend/src/lib/components/MenuButton/menuButton.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import { MenuButton as MuiMenuButton } from "@mui/base/MenuButton";
+
+export type MenuButtonProps = {
+    ref?: React.Ref<HTMLButtonElement>;
+    label?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+
+export function MenuButton(props: MenuButtonProps): React.ReactNode {
+    return (
+        <MuiMenuButton
+            {...props}
+            className="hover:bg-blue-200 focus:outline-blue-600 p-1 text-sm rounded flex gap-1 items-center focus:outline focus:outline-1 hover:text-gray-900 text-gray-600"
+        />
+    );
+}
diff --git a/frontend/src/lib/components/MenuHeading/menuHeading.tsx b/frontend/src/lib/components/MenuHeading/menuHeading.tsx
index aa9eb94e4..100bb3c65 100644
--- a/frontend/src/lib/components/MenuHeading/menuHeading.tsx
+++ b/frontend/src/lib/components/MenuHeading/menuHeading.tsx
@@ -1,9 +1,21 @@
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+
 export type MenuHeadingProps = {
+    classNames?: string;
+    style?: React.CSSProperties;
     children: React.ReactNode;
 };
 
 export function MenuHeading(props: MenuHeadingProps): React.ReactNode {
     return (
-        <div className="text-xs text-gray-500 uppercase font-semibold tracking-wider px-3 py-1">{props.children}</div>
+        <div
+            className={resolveClassNames(
+                "text-xs text-gray-500 uppercase font-semibold tracking-wider px-3 py-1",
+                props.classNames ?? ""
+            )}
+            style={props.style}
+        >
+            {props.children}
+        </div>
     );
 }
diff --git a/frontend/src/lib/components/SortableList/index.ts b/frontend/src/lib/components/SortableList/index.ts
index d1b7d12b3..463916058 100644
--- 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/lib/components/SortableList/sortableListGroup.tsx b/frontend/src/lib/components/SortableList/sortableListGroup.tsx
index d1ed67f3d..507e0aebf 100644
--- a/frontend/src/lib/components/SortableList/sortableListGroup.tsx
+++ b/frontend/src/lib/components/SortableList/sortableListGroup.tsx
@@ -5,14 +5,18 @@ import { createPortal } from "@lib/utils/createPortal";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { DragIndicator, ExpandLess, ExpandMore } from "@mui/icons-material";
 
+import { isEqual } from "lodash";
+
 import { HoveredArea, SortableListContext } from "./sortableList";
 import { SortableListDropIndicator } from "./sortableListDropIndicator";
 import { SortableListItemProps } from "./sortableListItem";
 
+import { DenseIconButton } from "../DenseIconButton";
+
 export type SortableListGroupProps = {
     id: string;
     title: React.ReactNode;
-    initiallyExpanded?: boolean;
+    expanded?: boolean;
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
     headerStyle?: React.CSSProperties;
@@ -26,18 +30,24 @@ export type SortableListGroupProps = {
  * @param {SortableListGroupProps} props Object of properties for the SortableListGroup component (see below for details).
  * @param {string} props.id ID that is unique among all components inside the sortable list.
  * @param {React.ReactNode} props.title Title of the list item.
- * @param {boolean} props.initiallyExpanded Whether the group should be expanded by default.
+ * @param {boolean} props.expanded Whether the group should be expanded.
  * @param {React.ReactNode} props.startAdornment Start adornment to display to the left of the title.
  * @param {React.ReactNode} props.endAdornment End adornment to display to the right of the title.
- * @param {React.CSSProperties} props.headerStyle Style object to apply to the header of the group.
- * @param {React.CSSProperties} props.contentStyle Style object to apply to the content of the group.
  * @param {React.ReactNode} props.contentWhenEmpty Content to display when the group is empty.
  * @param {React.ReactNode} props.children Child components to display as the content of the list item.
  *
  * @returns {React.ReactNode} A sortable list group component.
  */
 export function SortableListGroup(props: SortableListGroupProps): React.ReactNode {
-    const [isExpanded, setIsExpanded] = React.useState<boolean>(props.initiallyExpanded ?? true);
+    const [isExpanded, setIsExpanded] = React.useState<boolean>(props.expanded ?? true);
+    const [prevExpanded, setPrevExpanded] = React.useState<boolean | undefined>(props.expanded);
+
+    if (!isEqual(props.expanded, prevExpanded)) {
+        if (props.expanded !== undefined) {
+            setIsExpanded(props.expanded);
+        }
+        setPrevExpanded(props.expanded);
+    }
 
     const divRef = React.useRef<HTMLDivElement>(null);
     const boundingClientRect = useElementBoundingRect(divRef);
@@ -71,11 +81,11 @@ export function SortableListGroup(props: SortableListGroupProps): React.ReactNod
                     })}
                 ></div>
                 <Header
+                    {...props}
                     onToggleExpanded={handleToggleExpanded}
                     expanded={isExpanded}
                     expandable={hasContent}
                     hovered={isHeaderHovered}
-                    {...props}
                 />
                 {isDragging &&
                     dragPosition &&
@@ -143,17 +153,16 @@ function Header(props: HeaderProps): React.ReactNode {
                 <DragIndicator fontSize="inherit" className="pointer-events-none" />
             </div>
             {props.expandable && (
-                <div
-                    className="hover:cursor-pointer hover:text-blue-800 p-0.5 rounded"
+                <DenseIconButton
                     onClick={props.onToggleExpanded}
                     title={props.expanded ? "Hide children" : "Show children"}
                 >
                     {props.expanded ? <ExpandLess fontSize="inherit" /> : <ExpandMore fontSize="inherit" />}
-                </div>
+                </DenseIconButton>
             )}
-            <div className="flex items-center gap-2 flex-grow">
+            <div className="flex items-center gap-2 flex-grow min-w-0">
                 {props.startAdornment}
-                <div className="flex-grow font-bold">{props.title}</div>
+                <div className="flex-grow font-bold min-w-0">{props.title}</div>
                 {props.endAdornment}
             </div>
         </div>
diff --git a/frontend/src/lib/components/SortableList/sortableListItem.tsx b/frontend/src/lib/components/SortableList/sortableListItem.tsx
index ea8bc0a73..c86682174 100644
--- a/frontend/src/lib/components/SortableList/sortableListItem.tsx
+++ b/frontend/src/lib/components/SortableList/sortableListItem.tsx
@@ -22,7 +22,6 @@ export type SortableListItemProps = {
  * @param {SortableListItemProps} props Object of properties for the SortableListItem component (see below for details).
  * @param {string} props.id ID that is unique among all components inside the sortable list.
  * @param {React.ReactNode} props.title Title component of the list item.
- * @param {string} props.headerClassNames Class names to apply to the header of the list item.
  * @param {React.ReactNode} props.startAdornment Start adornment to display to the left of the title.
  * @param {React.ReactNode} props.endAdornment End adornment to display to the right of the title.
  * @param {React.ReactNode} props.children Child components to display as the content of the list item.
@@ -69,9 +68,7 @@ export function SortableListItem(props: SortableListItemProps): React.ReactNode
                             <Header {...props} />
                         </div>
                     )}
-                {props.children !== undefined && (
-                    <div className={resolveClassNames("bg-white border-b shadow")}>{props.children}</div>
-                )}
+                <div className={resolveClassNames("bg-white border-b shadow")}>{props.children}</div>
             </div>
             {isHovered && sortableListContext.hoveredArea === HoveredArea.BOTTOM && <SortableListDropIndicator />}
         </>
@@ -96,9 +93,9 @@ function Header(props: HeaderProps): React.ReactNode {
             <div className={resolveClassNames("sortable-list-element-indicator hover:cursor-grab")}>
                 <DragIndicator fontSize="inherit" className="pointer-events-none" />
             </div>
-            <div className="flex items-center gap-2 flex-grow">
+            <div className="flex items-center gap-2 flex-grow min-w-0">
                 {props.startAdornment}
-                <div className="flex-grow">{props.title}</div>
+                <div className="flex-grow min-w-0">{props.title}</div>
                 {props.endAdornment}
             </div>
         </div>
diff --git a/frontend/src/lib/utils/ColorPalette.ts b/frontend/src/lib/utils/ColorPalette.ts
index 229b01d0a..915425948 100644
--- a/frontend/src/lib/utils/ColorPalette.ts
+++ b/frontend/src/lib/utils/ColorPalette.ts
@@ -12,6 +12,12 @@ export type ColorPaletteOptions = {
     id: string;
 };
 
+export type ColorPaletteSerialization = {
+    name: string;
+    colors: string[];
+    id: string;
+};
+
 export class ColorPalette {
     private _id: string;
     private _name: string;
@@ -123,4 +129,20 @@ export class ColorPalette {
 
         return gradient;
     }
+
+    serialize(): ColorPaletteSerialization {
+        return {
+            name: this._name,
+            colors: this.getColors(),
+            id: this._id,
+        };
+    }
+
+    static fromSerialized(serialized: ColorPaletteSerialization): ColorPalette {
+        return new ColorPalette({
+            name: serialized.name,
+            colors: serialized.colors,
+            id: serialized.id,
+        });
+    }
 }
diff --git a/frontend/src/lib/utils/ColorScale.ts b/frontend/src/lib/utils/ColorScale.ts
index 07eebd3a4..7d53c2b31 100644
--- a/frontend/src/lib/utils/ColorScale.ts
+++ b/frontend/src/lib/utils/ColorScale.ts
@@ -1,4 +1,4 @@
-import { ColorPalette } from "@lib/utils/ColorPalette";
+import { ColorPalette, ColorPaletteSerialization } from "@lib/utils/ColorPalette";
 
 export enum ColorScaleType {
     Discrete = "discrete",
@@ -49,6 +49,16 @@ export type ColorScaleOptions = {
     divMidPoint?: number;
 };
 
+export type ColorScaleSerialization = {
+    type: ColorScaleType;
+    colorPalette: ColorPaletteSerialization;
+    gradientType: ColorScaleGradientType;
+    steps: number;
+    min?: number;
+    max?: number;
+    divMidPoint?: number;
+};
+
 export class ColorScale {
     private _colorPalette: ColorPalette;
     private _min: number;
@@ -100,6 +110,14 @@ export class ColorScale {
     getColorForValue(value: number): string {
         let color = "";
 
+        // Clamp colors
+        if (value < this._min) {
+            value = this._min;
+        }
+        if (value > this._max) {
+            value = this._max;
+        }
+
         if (this._type === ColorScaleType.Discrete) {
             const colors = this.sampleColors(this._steps);
             const normalizedValue = this.calcNormalizedValue(value, this._min, this._max);
@@ -270,4 +288,30 @@ export class ColorScale {
             divMidPoint: this._divMidPoint,
         });
     }
+
+    serialize(): ColorScaleSerialization {
+        return {
+            type: this._type,
+            colorPalette: this._colorPalette.serialize(),
+            gradientType: this._gradientType,
+            steps: this._steps,
+            min: this._min,
+            max: this._max,
+            divMidPoint: this._divMidPoint,
+        };
+    }
+
+    static fromSerialized(serialization: ColorScaleSerialization): ColorScale {
+        const colorPalette = ColorPalette.fromSerialized(serialization.colorPalette);
+
+        return new ColorScale({
+            type: serialization.type,
+            colorPalette,
+            gradientType: serialization.gradientType,
+            steps: serialization.steps,
+            min: serialization.min,
+            max: serialization.max,
+            divMidPoint: serialization.divMidPoint,
+        });
+    }
 }
diff --git a/frontend/src/modules/3DViewer/settings/components/wellboreSelector.tsx b/frontend/src/modules/3DViewer/settings/components/wellboreSelector.tsx
index c3ad69d3c..27d47536d 100644
--- a/frontend/src/modules/3DViewer/settings/components/wellboreSelector.tsx
+++ b/frontend/src/modules/3DViewer/settings/components/wellboreSelector.tsx
@@ -2,7 +2,10 @@ import React from "react";
 
 import { WellboreHeader_api } from "@api";
 import { Button } from "@lib/components/Button";
+import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
+import { Label } from "@lib/components/Label";
 import { Select, SelectOption } from "@lib/components/Select";
+import { useValidArrayState } from "@lib/hooks/useValidArrayState";
 import { Deselect, SelectAll } from "@mui/icons-material";
 
 export type WellboreSelectorProps = {
@@ -12,49 +15,128 @@ export type WellboreSelectorProps = {
 };
 
 export function WellboreSelector(props: WellboreSelectorProps): React.ReactNode {
+    const { onSelectedWellboreUuidsChange } = props;
+    const availableWellboreStatuses = Array.from(new Set(props.wellboreHeaders.map((header) => header.wellboreStatus)));
+    const availableWellborePurposes = Array.from(
+        new Set(props.wellboreHeaders.map((header) => header.wellborePurpose))
+    );
+    const [selectedWellboreStatuses, setSelectedWellboreStatuses] = useValidArrayState<string>({
+        initialState: availableWellboreStatuses,
+        validStateArray: availableWellboreStatuses,
+    });
+    const [selectedWellborePurposes, setSelectedWellborePurposes] = useValidArrayState<string>({
+        initialState: availableWellborePurposes,
+        validStateArray: availableWellborePurposes,
+    });
+    React.useEffect(() => {
+        onSelectedWellboreUuidsChange(
+            filterWellboreHeaders(props.wellboreHeaders, selectedWellboreStatuses, selectedWellborePurposes).map(
+                (header) => header.wellboreUuid
+            )
+        );
+    }, [selectedWellborePurposes, selectedWellboreStatuses, onSelectedWellboreUuidsChange, props.wellboreHeaders]);
+
     function handleSelectAll() {
-        props.onSelectedWellboreUuidsChange(props.wellboreHeaders.map((header) => header.wellboreUuid));
+        props.onSelectedWellboreUuidsChange(
+            filterWellboreHeaders(props.wellboreHeaders, selectedWellboreStatuses, selectedWellborePurposes).map(
+                (header) => header.wellboreUuid
+            )
+        );
     }
     function handleUnselectAll() {
         props.onSelectedWellboreUuidsChange([]);
     }
+    function makeWellHeadersOptions(): SelectOption[] {
+        return filterWellboreHeaders(props.wellboreHeaders, selectedWellboreStatuses, selectedWellborePurposes).map(
+            (wellHeader) => ({
+                label: wellHeader.uniqueWellboreIdentifier,
+                value: wellHeader.wellboreUuid,
+            })
+        );
+    }
+
     return (
-        <div className="flex flex-col gap-2 text-sm">
-            <div className="flex gap-2 items-center">
-                <Button
-                    onClick={handleSelectAll}
-                    startIcon={<SelectAll />}
-                    variant="text"
-                    title="Select all"
-                    size="small"
-                >
-                    Select all
-                </Button>
-                <Button
-                    onClick={handleUnselectAll}
-                    startIcon={<Deselect />}
-                    variant="text"
-                    title="Unselect all"
-                    size="small"
-                >
-                    Unselect all
-                </Button>
-            </div>
-            <Select
-                options={makeWellHeadersOptions(props.wellboreHeaders)}
-                value={props.selectedWellboreUuids ?? []}
-                onChange={props.onSelectedWellboreUuidsChange}
-                size={5}
-                filter
-                multiple
-                debounceTimeMs={600}
-            />
-        </div>
+        <>
+            <CollapsibleGroup title="Filter on well status and purpose">
+                <div className="flex gap-2 flex-grow items-center">
+                    <Label text="Status">
+                        <Select
+                            options={makeWellboreStatusOptions(props.wellboreHeaders)}
+                            value={selectedWellboreStatuses}
+                            onChange={setSelectedWellboreStatuses}
+                            size={5}
+                            multiple
+                        />
+                    </Label>
+                    <Label text="Purpose">
+                        <Select
+                            options={makeWellborePurposeOptions(props.wellboreHeaders)}
+                            value={selectedWellborePurposes}
+                            onChange={setSelectedWellborePurposes}
+                            size={5}
+                            multiple
+                        />
+                    </Label>
+                </div>
+            </CollapsibleGroup>
+
+            <>
+                <div className="flex gap-2 items-center">
+                    <Button
+                        onClick={handleSelectAll}
+                        startIcon={<SelectAll />}
+                        variant="text"
+                        title="Select all"
+                        size="small"
+                    >
+                        Select all
+                    </Button>
+                    <Button
+                        onClick={handleUnselectAll}
+                        startIcon={<Deselect />}
+                        variant="text"
+                        title="Unselect all"
+                        size="small"
+                    >
+                        Unselect all
+                    </Button>
+                </div>
+                <Select
+                    options={makeWellHeadersOptions()}
+                    value={props.selectedWellboreUuids ?? []}
+                    onChange={props.onSelectedWellboreUuidsChange}
+                    size={5}
+                    filter
+                    multiple
+                    debounceTimeMs={600}
+                />
+            </>
+        </>
     );
 }
-function makeWellHeadersOptions(wellHeaders: WellboreHeader_api[]): SelectOption[] {
-    return wellHeaders.map((wellHeader) => ({
-        label: wellHeader.uniqueWellboreIdentifier,
-        value: wellHeader.wellboreUuid,
+
+function makeWellborePurposeOptions(wellHeaders: WellboreHeader_api[]): SelectOption[] {
+    const wellborePurposes = Array.from(new Set(wellHeaders.map((header) => header.wellborePurpose)));
+    return wellborePurposes.map((purpose) => ({
+        label: purpose,
+        value: purpose,
     }));
 }
+
+function makeWellboreStatusOptions(wellHeaders: WellboreHeader_api[]): SelectOption[] {
+    const wellboreStatuses = Array.from(new Set(wellHeaders.map((header) => header.wellboreStatus)));
+    return wellboreStatuses.map((status) => ({
+        label: status,
+        value: status,
+    }));
+}
+
+function filterWellboreHeaders(
+    wellHeaders: WellboreHeader_api[],
+    selectedWellboreStatuses: string[],
+    selectedWellborePurposes: string[]
+): WellboreHeader_api[] {
+    return wellHeaders
+        .filter((header) => selectedWellboreStatuses.includes(header.wellboreStatus))
+        .filter((header) => selectedWellborePurposes.includes(header.wellborePurpose));
+}
diff --git a/frontend/src/modules/3DViewer/settings/settings.tsx b/frontend/src/modules/3DViewer/settings/settings.tsx
index f02cdb7d1..893c80e01 100644
--- a/frontend/src/modules/3DViewer/settings/settings.tsx
+++ b/frontend/src/modules/3DViewer/settings/settings.tsx
@@ -256,7 +256,7 @@ export function Settings(props: ModuleSettingsProps<Interfaces>): JSX.Element {
                 <div className="flex flex-col gap-2">
                     <Label text="Ensemble">
                         <EnsembleDropdown
-                            ensembleSet={ensembleSet}
+                            ensembles={ensembleSet.getEnsembleArr()}
                             value={selectedEnsembleIdent}
                             onChange={handleEnsembleSelectionChange}
                             showArrows
diff --git a/frontend/src/modules/3DViewer/view/components/SubsurfaceViewerWrapper.tsx b/frontend/src/modules/3DViewer/view/components/SubsurfaceViewerWrapper.tsx
index 97cbede96..ef43ea114 100644
--- a/frontend/src/modules/3DViewer/view/components/SubsurfaceViewerWrapper.tsx
+++ b/frontend/src/modules/3DViewer/view/components/SubsurfaceViewerWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useId } from "react";
+import React from "react";
 
 import { Layer, PickingInfo } from "@deck.gl/core";
 import { ColumnLayer, SolidPolygonLayer } from "@deck.gl/layers";
@@ -7,6 +7,7 @@ import { Button } from "@lib/components/Button";
 import { HoldPressedIntervalCallbackButton } from "@lib/components/HoldPressedIntervalCallbackButton/holdPressedIntervalCallbackButton";
 import { useElementSize } from "@lib/hooks/useElementSize";
 import { ColorLegendsContainer } from "@modules/_shared/components/ColorLegendsContainer";
+import { SubsurfaceViewerWithCameraState } from "@modules/_shared/components/SubsurfaceViewerWithCameraState";
 import { ColorScaleWithName } from "@modules/_shared/utils/ColorScaleWithName";
 import { Add, FilterCenterFocus, Polyline, Remove } from "@mui/icons-material";
 import { LayerPickInfo, ViewStateType } from "@webviz/subsurface-viewer";
@@ -18,7 +19,6 @@ import { isEqual } from "lodash";
 
 import { PolylineEditingPanel } from "./PolylineEditingPanel";
 import { ReadoutBoxWrapper } from "./ReadoutBoxWrapper";
-import { SubsurfaceViewerWithCameraState } from "./SubsurfaceViewerWithCameraState";
 
 import { createContinuousColorScaleForMap } from "../utils/colorTables";
 
@@ -62,7 +62,7 @@ type IntersectionZValues = {
 export function SubsurfaceViewerWrapper(props: SubsurfaceViewerWrapperProps): React.ReactNode {
     const { onVerticalScaleChange } = props;
 
-    const subsurfaceViewerId = useId();
+    const subsurfaceViewerId = React.useId();
 
     const [intersectionZValues, setIntersectionZValues] = React.useState<IntersectionZValues | undefined>(undefined);
     const [polylineEditPointsModusActive, setPolylineEditPointsModusActive] = React.useState<boolean>(false);
diff --git a/frontend/src/modules/FlowNetwork/settings/settings.tsx b/frontend/src/modules/FlowNetwork/settings/settings.tsx
index f96e4acf9..d436e1a0c 100644
--- a/frontend/src/modules/FlowNetwork/settings/settings.tsx
+++ b/frontend/src/modules/FlowNetwork/settings/settings.tsx
@@ -142,7 +142,7 @@ export function Settings({ workbenchSession, settingsContext }: ModuleSettingsPr
         <div className="flex flex-col gap-2 overflow-y-auto">
             <CollapsibleGroup expanded={true} title="Ensemble">
                 <EnsembleDropdown
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     value={selectedEnsembleIdent}
                     onChange={handleEnsembleSelectionChange}
                 />
diff --git a/frontend/src/modules/Intersection/settings/components/layerSettings/gridLayer.tsx b/frontend/src/modules/Intersection/settings/components/layerSettings/gridLayer.tsx
index 08e6d0e8d..7c58eb32a 100644
--- a/frontend/src/modules/Intersection/settings/components/layerSettings/gridLayer.tsx
+++ b/frontend/src/modules/Intersection/settings/components/layerSettings/gridLayer.tsx
@@ -166,7 +166,7 @@ export function GridLayerSettingsComponent(props: GridLayerSettingsComponentProp
                 <div className="table-cell">
                     <EnsembleDropdown
                         value={props.layer.getSettings().ensembleIdent}
-                        ensembleSet={props.ensembleSet}
+                        ensembles={props.ensembleSet.getEnsembleArr()}
                         onChange={handleEnsembleChange}
                         debounceTimeMs={600}
                     />
diff --git a/frontend/src/modules/Intersection/settings/components/layerSettings/seismicLayer.tsx b/frontend/src/modules/Intersection/settings/components/layerSettings/seismicLayer.tsx
index f79866b23..2aea17e88 100644
--- a/frontend/src/modules/Intersection/settings/components/layerSettings/seismicLayer.tsx
+++ b/frontend/src/modules/Intersection/settings/components/layerSettings/seismicLayer.tsx
@@ -198,7 +198,7 @@ export function SeismicLayerSettingsComponent(props: SeismicLayerSettingsProps):
                 <div className="table-cell">
                     <EnsembleDropdown
                         value={props.layer.getSettings().ensembleIdent}
-                        ensembleSet={props.ensembleSet}
+                        ensembles={props.ensembleSet.getEnsembleArr()}
                         onChange={handleEnsembleChange}
                         debounceTimeMs={600}
                     />
diff --git a/frontend/src/modules/Intersection/settings/components/layerSettings/surfaceLayer.tsx b/frontend/src/modules/Intersection/settings/components/layerSettings/surfaceLayer.tsx
index f16692d29..ab274043d 100644
--- a/frontend/src/modules/Intersection/settings/components/layerSettings/surfaceLayer.tsx
+++ b/frontend/src/modules/Intersection/settings/components/layerSettings/surfaceLayer.tsx
@@ -155,7 +155,7 @@ export function SurfaceLayerSettingsComponent(props: SurfaceLayerSettingsCompone
                 <div className="table-cell">
                     <EnsembleDropdown
                         value={props.layer.getSettings().ensembleIdent}
-                        ensembleSet={props.ensembleSet}
+                        ensembles={props.ensembleSet.getEnsembleArr()}
                         onChange={handleEnsembleChange}
                         debounceTimeMs={600}
                     />
diff --git a/frontend/src/modules/Intersection/settings/components/layerSettings/surfacesUncertaintyLayer.tsx b/frontend/src/modules/Intersection/settings/components/layerSettings/surfacesUncertaintyLayer.tsx
index aad67b7ad..e43c28643 100644
--- a/frontend/src/modules/Intersection/settings/components/layerSettings/surfacesUncertaintyLayer.tsx
+++ b/frontend/src/modules/Intersection/settings/components/layerSettings/surfacesUncertaintyLayer.tsx
@@ -156,7 +156,7 @@ export function SurfacesUncertaintyLayerSettingsComponent(
                 <div className="table-cell">
                     <EnsembleDropdown
                         value={props.layer.getSettings().ensembleIdent}
-                        ensembleSet={props.ensembleSet}
+                        ensembles={props.ensembleSet.getEnsembleArr()}
                         onChange={handleEnsembleChange}
                         debounceTimeMs={600}
                     />
diff --git a/frontend/src/modules/Intersection/settings/components/layerSettings/wellpicksLayer.tsx b/frontend/src/modules/Intersection/settings/components/layerSettings/wellpicksLayer.tsx
index d497a147d..9386871a4 100644
--- a/frontend/src/modules/Intersection/settings/components/layerSettings/wellpicksLayer.tsx
+++ b/frontend/src/modules/Intersection/settings/components/layerSettings/wellpicksLayer.tsx
@@ -87,7 +87,7 @@ export function WellpicksLayerSettingsComponent(props: WellpicksLayerSettingsCom
                 <div className="table-cell">
                     <EnsembleDropdown
                         value={props.layer.getSettings().ensembleIdent}
-                        ensembleSet={props.ensembleSet}
+                        ensembles={props.ensembleSet.getEnsembleArr()}
                         onChange={handleEnsembleChange}
                         debounceTimeMs={600}
                     />
diff --git a/frontend/src/modules/Map/settings/settings.tsx b/frontend/src/modules/Map/settings/settings.tsx
index 3008e7e61..af36a4f6c 100644
--- a/frontend/src/modules/Map/settings/settings.tsx
+++ b/frontend/src/modules/Map/settings/settings.tsx
@@ -227,7 +227,7 @@ export function MapSettings(props: ModuleSettingsProps<Interfaces>) {
                 labelClassName={syncHelper.isSynced(SyncSettingKey.ENSEMBLE) ? "bg-indigo-700 text-white" : ""}
             >
                 <EnsembleDropdown
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     value={computedEnsembleIdent}
                     onChange={handleEnsembleSelectionChange}
                 />
diff --git a/frontend/src/modules/ParameterDistributionMatrix/settings/settings.tsx b/frontend/src/modules/ParameterDistributionMatrix/settings/settings.tsx
index 417d4b8cf..34173d92f 100644
--- a/frontend/src/modules/ParameterDistributionMatrix/settings/settings.tsx
+++ b/frontend/src/modules/ParameterDistributionMatrix/settings/settings.tsx
@@ -98,7 +98,7 @@ export function Settings({ workbenchSession }: ModuleSettingsProps<Interfaces>)
             </CollapsibleGroup>
             <CollapsibleGroup title="Ensembles" expanded>
                 <EnsembleSelect
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     onChange={handleEnsembleSelectionChange}
                     value={selectedEnsembleIdents}
                     size={5}
diff --git a/frontend/src/modules/Pvt/settings/settings.tsx b/frontend/src/modules/Pvt/settings/settings.tsx
index d36e9ffd4..77bcc5d08 100644
--- a/frontend/src/modules/Pvt/settings/settings.tsx
+++ b/frontend/src/modules/Pvt/settings/settings.tsx
@@ -126,7 +126,7 @@ export function Settings({ workbenchSession }: ModuleSettingsProps<Interfaces>)
             </CollapsibleGroup>
             <CollapsibleGroup title="Ensembles" expanded>
                 <EnsembleSelect
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     onChange={handleEnsembleSelectionChange}
                     value={selectedEnsembleIdents}
                     size={5}
diff --git a/frontend/src/modules/Rft/settings.tsx b/frontend/src/modules/Rft/settings.tsx
index be04a0c2a..98d127301 100644
--- a/frontend/src/modules/Rft/settings.tsx
+++ b/frontend/src/modules/Rft/settings.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { ModuleSettingsProps } from "@framework/Module";
 import { useSettingsStatusWriter } from "@framework/StatusWriter";
@@ -88,7 +86,7 @@ export function Settings({ settingsContext, workbenchSession }: ModuleSettingsPr
         <div>
             <CollapsibleGroup expanded={true} title="Ensembles">
                 <EnsembleDropdown
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     value={selectedEnsembleIdent}
                     onChange={handleEnsembleSelectionChange}
                 />
diff --git a/frontend/src/modules/SimulationTimeSeries/settings/settings.tsx b/frontend/src/modules/SimulationTimeSeries/settings/settings.tsx
index 36e86dc97..e524f8437 100644
--- a/frontend/src/modules/SimulationTimeSeries/settings/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeries/settings/settings.tsx
@@ -249,7 +249,7 @@ export function Settings({ settingsContext, workbenchSession }: ModuleSettingsPr
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Ensembles">
                 <EnsembleSelect
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     value={selectedEnsembleIdents}
                     size={5}
                     onChange={handleEnsembleSelectChange}
diff --git a/frontend/src/modules/SimulationTimeSeriesSensitivity/settings/settings.tsx b/frontend/src/modules/SimulationTimeSeriesSensitivity/settings/settings.tsx
index 639e28f30..4085e7519 100644
--- a/frontend/src/modules/SimulationTimeSeriesSensitivity/settings/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesSensitivity/settings/settings.tsx
@@ -158,7 +158,7 @@ export function Settings({ settingsContext, workbenchSession, workbenchServices
         <>
             <CollapsibleGroup expanded={true} title="Ensemble">
                 <EnsembleDropdown
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     value={computedEnsembleIdent}
                     onChange={handleEnsembleSelectionChange}
                 />
diff --git a/frontend/src/modules/SubsurfaceMap/settings/settings.tsx b/frontend/src/modules/SubsurfaceMap/settings/settings.tsx
index fbeb5d329..3fc07d687 100644
--- a/frontend/src/modules/SubsurfaceMap/settings/settings.tsx
+++ b/frontend/src/modules/SubsurfaceMap/settings/settings.tsx
@@ -492,7 +492,7 @@ export function Settings({ settingsContext, workbenchSession, workbenchServices
             <CollapsibleGroup expanded={true} title="Ensemble and realization">
                 <Label text="Ensemble" synced={syncHelper.isSynced(SyncSettingKey.ENSEMBLE)}>
                     <EnsembleDropdown
-                        ensembleSet={ensembleSet}
+                        ensembles={ensembleSet.getEnsembleArr()}
                         value={computedEnsembleIdent ? computedEnsembleIdent : null}
                         onChange={handleEnsembleSelectionChange}
                     />
diff --git a/frontend/src/modules/Vfp/settings/settings.tsx b/frontend/src/modules/Vfp/settings/settings.tsx
index 7fa0d1944..27cfee531 100644
--- a/frontend/src/modules/Vfp/settings/settings.tsx
+++ b/frontend/src/modules/Vfp/settings/settings.tsx
@@ -80,7 +80,7 @@ export function Settings({ workbenchSession, settingsContext }: ModuleSettingsPr
     const setUserSelectedPressureOption = useSetAtom(userSelectedPressureOptionAtom);
 
     const selectedColorBy = useAtomValue(selectedColorByAtom);
-    const setUserSelectedColorBy = useSetAtom(userSelectedColorByAtom)
+    const setUserSelectedColorBy = useSetAtom(userSelectedColorByAtom);
 
     usePropagateApiErrorToStatusWriter(vfpTableQuery, statusWriter);
 
@@ -131,17 +131,17 @@ export function Settings({ workbenchSession, settingsContext }: ModuleSettingsPr
     let gfrLabel = "GFR";
     let alqLabel = "ALQ";
     const vfpTableData = vfpTableQuery?.data;
-    let vfpDataAccessor: VfpDataAccessor | null = null
-    let vfpType: VfpType | null = null
+    let vfpDataAccessor: VfpDataAccessor | null = null;
+    let vfpType: VfpType | null = null;
     if (vfpTableData) {
-        vfpDataAccessor = new VfpDataAccessor(vfpTableData)
-        thpLabel = vfpDataAccessor.getVfpParamLabel(VfpParam.THP, true)
-        vfpType = vfpDataAccessor.getVfpType()
-        
+        vfpDataAccessor = new VfpDataAccessor(vfpTableData);
+        thpLabel = vfpDataAccessor.getVfpParamLabel(VfpParam.THP, true);
+        vfpType = vfpDataAccessor.getVfpType();
+
         if (vfpDataAccessor.isProdTable()) {
-            wfrLabel = vfpDataAccessor.getVfpParamLabel(VfpParam.WFR, true)
-            gfrLabel = vfpDataAccessor.getVfpParamLabel(VfpParam.GFR, true)
-            alqLabel = vfpDataAccessor.getVfpParamLabel(VfpParam.ALQ, true)
+            wfrLabel = vfpDataAccessor.getVfpParamLabel(VfpParam.WFR, true);
+            gfrLabel = vfpDataAccessor.getVfpParamLabel(VfpParam.GFR, true);
+            alqLabel = vfpDataAccessor.getVfpParamLabel(VfpParam.ALQ, true);
         }
     }
 
@@ -149,7 +149,7 @@ export function Settings({ workbenchSession, settingsContext }: ModuleSettingsPr
         <div className="flex flex-col gap-2">
             <CollapsibleGroup expanded={true} title="Ensemble">
                 <EnsembleDropdown
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     value={selectedEnsembleIdent}
                     onChange={handleEnsembleSelectionChange}
                 />
@@ -177,44 +177,48 @@ export function Settings({ workbenchSession, settingsContext }: ModuleSettingsPr
                 />
             </CollapsibleGroup>
             <CollapsibleGroup title="Filter" expanded={true}>
-                    <div className="flex flex-col gap-2">
-                        <Label text={thpLabel}>
-                            <Select
-                                options={makeFilterOptions(vfpDataAccessor?.getVfpParamValues(VfpParam.THP))}
-                                value={selectedThpIndicies?.map((value) => value.toString()) ?? []}
-                                onChange={handleThpIndicesSelectionChange}
-                                size={Math.min(5, vfpDataAccessor?.getNumberOfValues(VfpParam.THP) ?? 5)}
-                                multiple={true}
-                            />
-                        </Label>
-                        {vfpDataAccessor?.isProdTable() && <div><Label text={wfrLabel}>
-                            <Select
-                                options={makeFilterOptions(vfpDataAccessor?.getVfpParamValues(VfpParam.WFR))}
-                                value={selectedWfrIndicies?.map((value) => value.toString()) ?? []}
-                                onChange={handleWfrIndicesSelectionChange}
-                                size={Math.min(5, vfpDataAccessor?.getNumberOfValues(VfpParam.WFR) ?? 5)}
-                                multiple={true}
-                            />
-                        </Label>
-                        <Label text={gfrLabel}>
-                            <Select
-                                options={makeFilterOptions(vfpDataAccessor?.getVfpParamValues(VfpParam.GFR))}
-                                value={selectedGfrIndicies?.map((value) => value.toString()) ?? []}
-                                onChange={handleGfrIndicesSelectionChange}
-                                size={Math.min(5, vfpDataAccessor?.getNumberOfValues(VfpParam.GFR) ?? 5)}
-                                multiple={true}
-                            />
-                        </Label>
-                        <Label text={alqLabel}>
-                            <Select
-                                options={makeFilterOptions(vfpDataAccessor?.getVfpParamValues(VfpParam.ALQ))}
-                                value={selectedAlqIndicies?.map((value) => value.toString()) ?? []}
-                                onChange={handleAlqIndicesSelectionChange}
-                                size={Math.min(5, vfpDataAccessor?.getNumberOfValues(VfpParam.ALQ) ?? 5)}
-                                multiple={true}
-                            />
-                        </Label></div>}
-                    </div>
+                <div className="flex flex-col gap-2">
+                    <Label text={thpLabel}>
+                        <Select
+                            options={makeFilterOptions(vfpDataAccessor?.getVfpParamValues(VfpParam.THP))}
+                            value={selectedThpIndicies?.map((value) => value.toString()) ?? []}
+                            onChange={handleThpIndicesSelectionChange}
+                            size={Math.min(5, vfpDataAccessor?.getNumberOfValues(VfpParam.THP) ?? 5)}
+                            multiple={true}
+                        />
+                    </Label>
+                    {vfpDataAccessor?.isProdTable() && (
+                        <div>
+                            <Label text={wfrLabel}>
+                                <Select
+                                    options={makeFilterOptions(vfpDataAccessor?.getVfpParamValues(VfpParam.WFR))}
+                                    value={selectedWfrIndicies?.map((value) => value.toString()) ?? []}
+                                    onChange={handleWfrIndicesSelectionChange}
+                                    size={Math.min(5, vfpDataAccessor?.getNumberOfValues(VfpParam.WFR) ?? 5)}
+                                    multiple={true}
+                                />
+                            </Label>
+                            <Label text={gfrLabel}>
+                                <Select
+                                    options={makeFilterOptions(vfpDataAccessor?.getVfpParamValues(VfpParam.GFR))}
+                                    value={selectedGfrIndicies?.map((value) => value.toString()) ?? []}
+                                    onChange={handleGfrIndicesSelectionChange}
+                                    size={Math.min(5, vfpDataAccessor?.getNumberOfValues(VfpParam.GFR) ?? 5)}
+                                    multiple={true}
+                                />
+                            </Label>
+                            <Label text={alqLabel}>
+                                <Select
+                                    options={makeFilterOptions(vfpDataAccessor?.getVfpParamValues(VfpParam.ALQ))}
+                                    value={selectedAlqIndicies?.map((value) => value.toString()) ?? []}
+                                    onChange={handleAlqIndicesSelectionChange}
+                                    size={Math.min(5, vfpDataAccessor?.getNumberOfValues(VfpParam.ALQ) ?? 5)}
+                                    multiple={true}
+                                />
+                            </Label>
+                        </div>
+                    )}
+                </div>
             </CollapsibleGroup>
             <CollapsibleGroup title="Pressure Option" expanded={true}>
                 <RadioGroup
@@ -231,7 +235,6 @@ export function Settings({ workbenchSession, settingsContext }: ModuleSettingsPr
                     options={makeColorByOptions(vfpType, vfpDataAccessor)}
                     value={selectedColorBy ?? undefined}
                     onChange={handleColorByChange}
-                    
                 />
             </CollapsibleGroup>
         </div>
@@ -243,13 +246,15 @@ function makeFilterOptions(values: number[] | undefined): SelectOption[] {
 }
 
 function makeColorByOptions(vfpType: VfpType | null, vfpDataAccessor: VfpDataAccessor | null): SelectOption[] {
-    const options = [{ label: vfpDataAccessor?.getVfpParamLabel(VfpParam.THP, false) ?? "THP", value: VfpParam.THP }]
+    const options = [{ label: vfpDataAccessor?.getVfpParamLabel(VfpParam.THP, false) ?? "THP", value: VfpParam.THP }];
     if (vfpType === VfpType.VFPPROD) {
-        options.push(...[
-            { label: vfpDataAccessor?.getVfpParamLabel(VfpParam.WFR, false) ?? "WFR", value: VfpParam.WFR },
-            { label: vfpDataAccessor?.getVfpParamLabel(VfpParam.GFR, false) ?? "GFR", value: VfpParam.GFR },
-            { label: vfpDataAccessor?.getVfpParamLabel(VfpParam.ALQ, false) ?? "ALQ", value: VfpParam.ALQ },
-        ])
+        options.push(
+            ...[
+                { label: vfpDataAccessor?.getVfpParamLabel(VfpParam.WFR, false) ?? "WFR", value: VfpParam.WFR },
+                { label: vfpDataAccessor?.getVfpParamLabel(VfpParam.GFR, false) ?? "GFR", value: VfpParam.GFR },
+                { label: vfpDataAccessor?.getVfpParamLabel(VfpParam.ALQ, false) ?? "ALQ", value: VfpParam.ALQ },
+            ]
+        );
     }
-    return options
+    return options;
 }
diff --git a/frontend/src/modules/WellCompletions/settings/settings.tsx b/frontend/src/modules/WellCompletions/settings/settings.tsx
index 181a2dde9..27110da63 100644
--- a/frontend/src/modules/WellCompletions/settings/settings.tsx
+++ b/frontend/src/modules/WellCompletions/settings/settings.tsx
@@ -193,7 +193,7 @@ export const Settings = ({
         <div className="flex flex-col gap-2 overflow-y-auto">
             <CollapsibleGroup expanded={true} title="Ensemble">
                 <EnsembleDropdown
-                    ensembleSet={ensembleSet}
+                    ensembles={ensembleSet.getEnsembleArr()}
                     value={selectedEnsembleIdent}
                     onChange={handleEnsembleSelectionChange}
                 />
diff --git a/frontend/src/modules/_shared/components/ColorLegendsContainer/colorLegendsContainer.tsx b/frontend/src/modules/_shared/components/ColorLegendsContainer/colorLegendsContainer.tsx
index 9d50ed828..a42525741 100644
--- a/frontend/src/modules/_shared/components/ColorLegendsContainer/colorLegendsContainer.tsx
+++ b/frontend/src/modules/_shared/components/ColorLegendsContainer/colorLegendsContainer.tsx
@@ -4,23 +4,26 @@ import { ColorScale, ColorScaleGradientType, ColorScaleType } from "@lib/utils/C
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { ColorScaleWithName } from "@modules_shared/utils/ColorScaleWithName";
 
-const lineWidth = 6;
-const lineColor = "#555";
-const textGap = 6;
-const offset = 10;
-const legendGap = 4;
-const textWidth = 70;
-const nameLabelWidth = 10;
-const fontSize = 10;
-
-const textStyle: React.CSSProperties = {
+const STYLE_CONSTANTS = {
+    lineWidth: 6,
+    lineColor: "#555",
+    textGap: 6,
+    offset: 10,
+    legendGap: 4,
+    textWidth: 70,
+    nameLabelWidth: 10,
+    fontSize: 10,
+};
+
+const TEXT_STYLE: React.CSSProperties = {
     fontSize: "11px",
     stroke: "#fff",
     paintOrder: "stroke",
-    strokeWidth: "6px",
+    strokeWidth: "5px",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     fontWeight: 800,
+    overflow: "hidden",
 };
 
 function makeMarkers(
@@ -33,7 +36,7 @@ function makeMarkers(
 ): React.ReactNode[] {
     const sectionHeight = Math.abs(sectionBottom - sectionTop);
 
-    const minMarkerHeight = fontSize + 4 * textGap;
+    const minMarkerHeight = STYLE_CONSTANTS.fontSize + 4 * STYLE_CONSTANTS.textGap;
     const maxNumMarkers = Math.floor(sectionHeight / minMarkerHeight);
 
     // Odd number of markers makes sure the midpoint in each section is shown which is preferable
@@ -54,19 +57,19 @@ function makeMarkers(
                 key={`${sectionTop}-${i}-marker`}
                 x1={left}
                 y1={globalY + 1}
-                x2={left + lineWidth}
+                x2={left + STYLE_CONSTANTS.lineWidth}
                 y2={globalY + 1}
-                stroke={lineColor}
+                stroke={STYLE_CONSTANTS.lineColor}
                 strokeWidth="1"
             />
         );
         markers.push(
             <text
                 key={`${sectionTop}-${i}-text`}
-                x={left + lineWidth + textGap}
+                x={left + STYLE_CONSTANTS.lineWidth + STYLE_CONSTANTS.textGap}
                 y={globalY + 4}
                 fontSize="10"
-                style={textStyle}
+                style={TEXT_STYLE}
             >
                 {formatLegendValue(value)}
             </text>
@@ -78,7 +81,7 @@ function makeMarkers(
 }
 
 function makeDiscreteMarkers(colorScale: ColorScale, left: number, top: number, barHeight: number): React.ReactNode[] {
-    const minMarkerHeight = fontSize + 2 * textGap;
+    const minMarkerHeight = STYLE_CONSTANTS.fontSize + 2 * STYLE_CONSTANTS.textGap;
 
     const numSteps = colorScale.getNumSteps();
     let markerDistance = barHeight / numSteps;
@@ -105,19 +108,19 @@ function makeDiscreteMarkers(colorScale: ColorScale, left: number, top: number,
                 key={`${top}-${i}-marker`}
                 x1={left}
                 y1={globalY + 1}
-                x2={left + lineWidth}
+                x2={left + STYLE_CONSTANTS.lineWidth}
                 y2={globalY + 1}
-                stroke={lineColor}
+                stroke={STYLE_CONSTANTS.lineColor}
                 strokeWidth="1"
             />
         );
         markers.push(
             <text
                 key={`${top}-${i}-text`}
-                x={left + lineWidth + textGap}
+                x={left + STYLE_CONSTANTS.lineWidth + STYLE_CONSTANTS.textGap}
                 y={globalY + 4}
                 fontSize="10"
-                style={textStyle}
+                style={TEXT_STYLE}
             >
                 {formatLegendValue(value)}
             </text>
@@ -139,33 +142,46 @@ type ColorLegendProps = {
 };
 
 function ColorLegend(props: ColorLegendProps): React.ReactNode {
-    const barHeight = props.totalHeight - offset;
+    const barHeight = props.totalHeight - STYLE_CONSTANTS.offset;
 
-    const barStartPosition = props.left + nameLabelWidth + textGap;
+    const barStartPosition = props.left + STYLE_CONSTANTS.nameLabelWidth + STYLE_CONSTANTS.textGap;
     const lineMarkerStartPosition = barStartPosition + props.barWidth;
-    const lineMarkerEndPosition = lineMarkerStartPosition + lineWidth;
-    const textStartPosition = lineMarkerStartPosition + lineWidth + textGap;
+    const lineMarkerEndPosition = lineMarkerStartPosition + STYLE_CONSTANTS.lineWidth;
+    const textStartPosition = lineMarkerStartPosition + STYLE_CONSTANTS.lineWidth + STYLE_CONSTANTS.textGap;
 
     const markers: React.ReactNode[] = [];
     markers.push(
         <line
             key="max-marker"
             x1={lineMarkerStartPosition}
-            y1={props.top + offset}
+            y1={props.top + STYLE_CONSTANTS.offset}
             x2={lineMarkerEndPosition}
-            y2={props.top + offset}
-            stroke={lineColor}
+            y2={props.top + STYLE_CONSTANTS.offset}
+            stroke={STYLE_CONSTANTS.lineColor}
             strokeWidth="1"
         />
     );
     markers.push(
-        <text key="max-text" x={textStartPosition} y={props.top + offset + 3} fontSize="10" style={textStyle}>
+        <text
+            key="max-text"
+            x={textStartPosition}
+            y={props.top + STYLE_CONSTANTS.offset + 3}
+            fontSize="10"
+            style={TEXT_STYLE}
+        >
             {formatLegendValue(props.colorScale.getMax())}
         </text>
     );
 
     if (props.colorScale.getType() === ColorScaleType.Discrete) {
-        markers.push(makeDiscreteMarkers(props.colorScale, lineMarkerStartPosition, props.top + offset, barHeight));
+        markers.push(
+            makeDiscreteMarkers(
+                props.colorScale,
+                lineMarkerStartPosition,
+                props.top + STYLE_CONSTANTS.offset,
+                barHeight
+            )
+        );
     } else {
         if (props.colorScale.getGradientType() === ColorScaleGradientType.Diverging) {
             const relY =
@@ -176,9 +192,9 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
             markers.push(
                 makeMarkers(
                     props.colorScale,
-                    props.top + offset,
-                    props.top + offset,
-                    props.top + offset + barHeight * relY,
+                    props.top + STYLE_CONSTANTS.offset,
+                    props.top + STYLE_CONSTANTS.offset,
+                    props.top + STYLE_CONSTANTS.offset + barHeight * relY,
                     lineMarkerStartPosition,
                     barHeight
                 )
@@ -188,20 +204,27 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
                 <line
                     key="mid-marker"
                     x1={lineMarkerStartPosition}
-                    y1={props.top + relY * barHeight + offset}
+                    y1={props.top + relY * barHeight + STYLE_CONSTANTS.offset}
                     x2={lineMarkerEndPosition}
-                    y2={props.top + relY * barHeight + offset}
-                    stroke={lineColor}
+                    y2={props.top + relY * barHeight + STYLE_CONSTANTS.offset}
+                    stroke={STYLE_CONSTANTS.lineColor}
                     strokeWidth="2"
                 />
             );
             markers.push(
                 <text
                     key="mid-text"
-                    x={props.left + props.barWidth + lineWidth + textGap + nameLabelWidth + textGap}
-                    y={props.top + relY * barHeight + offset + 3}
+                    x={
+                        props.left +
+                        props.barWidth +
+                        STYLE_CONSTANTS.lineWidth +
+                        STYLE_CONSTANTS.textGap +
+                        STYLE_CONSTANTS.nameLabelWidth +
+                        STYLE_CONSTANTS.textGap
+                    }
+                    y={props.top + relY * barHeight + STYLE_CONSTANTS.offset + 3}
                     fontSize="10"
-                    style={textStyle}
+                    style={TEXT_STYLE}
                 >
                     {formatLegendValue(props.colorScale.getDivMidPoint())}
                 </text>
@@ -210,9 +233,9 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
             markers.push(
                 makeMarkers(
                     props.colorScale,
-                    props.top + offset,
-                    props.top + relY * barHeight + offset,
-                    props.top + offset + barHeight,
+                    props.top + STYLE_CONSTANTS.offset,
+                    props.top + relY * barHeight + STYLE_CONSTANTS.offset,
+                    props.top + STYLE_CONSTANTS.offset + barHeight,
                     lineMarkerStartPosition,
                     barHeight
                 )
@@ -221,9 +244,9 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
             markers.push(
                 makeMarkers(
                     props.colorScale,
-                    props.top + offset,
-                    props.top + offset,
-                    props.top + offset + barHeight,
+                    props.top + STYLE_CONSTANTS.offset,
+                    props.top + STYLE_CONSTANTS.offset,
+                    props.top + STYLE_CONSTANTS.offset + barHeight,
                     lineMarkerStartPosition,
                     barHeight
                 )
@@ -235,10 +258,10 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
         <line
             key="min-marker"
             x1={lineMarkerStartPosition}
-            y1={props.top + offset + barHeight}
+            y1={props.top + STYLE_CONSTANTS.offset + barHeight}
             x2={lineMarkerEndPosition}
-            y2={props.top + offset + barHeight}
-            stroke={lineColor}
+            y2={props.top + STYLE_CONSTANTS.offset + barHeight}
+            stroke={STYLE_CONSTANTS.lineColor}
             strokeWidth="1"
         />
     );
@@ -246,9 +269,9 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
         <text
             key="min-text"
             x={textStartPosition}
-            y={props.top + offset + barHeight + 3}
+            y={props.top + STYLE_CONSTANTS.offset + barHeight + 3}
             fontSize="10"
-            style={textStyle}
+            style={TEXT_STYLE}
         >
             {formatLegendValue(props.colorScale.getMin())}
         </text>
@@ -256,10 +279,18 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
 
     return (
         <g key={`color-scale-${makeGradientId(props.id)}`}>
+            <clipPath id={`clip-${props.id}`}>
+                <rect
+                    x={props.left - props.totalHeight / 2}
+                    y={props.top + STYLE_CONSTANTS.offset + props.totalHeight / 2}
+                    width={props.totalHeight}
+                    height={12}
+                />
+            </clipPath>
             <rect
                 key={props.id}
                 x={barStartPosition}
-                y={props.top + offset}
+                y={props.top + STYLE_CONSTANTS.offset}
                 width={props.barWidth}
                 rx="4"
                 height={barHeight}
@@ -267,16 +298,17 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
                 stroke="#555"
             />
             <text
-                x={props.left}
-                y={props.top + offset + props.totalHeight / 2 + 6}
+                x={props.left + 2}
+                y={props.top + STYLE_CONSTANTS.offset + props.totalHeight / 2 + 6}
                 width={props.totalHeight}
                 height={10}
                 fontSize="10"
                 textAnchor="middle"
                 dominantBaseline="central"
                 alignmentBaseline="baseline"
-                transform={`rotate(270, ${props.left}, ${props.top + offset + props.totalHeight / 2})`}
-                style={textStyle}
+                transform={`rotate(270, ${props.left}, ${props.top + STYLE_CONSTANTS.offset + props.totalHeight / 2})`}
+                style={TEXT_STYLE}
+                clipPath={`url(#clip-${props.id})`}
             >
                 {props.colorScale.getName()}
             </text>
@@ -285,8 +317,13 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
     );
 }
 
+export type ColorScaleWithId = {
+    id: string;
+    colorScale: ColorScaleWithName;
+};
+
 export type ColorLegendsContainerProps = {
-    colorScales: { id: string; colorScale: ColorScaleWithName }[];
+    colorScales: ColorScaleWithId[];
     height: number;
     position?: "left" | "right";
 };
@@ -297,11 +334,11 @@ export function ColorLegendsContainer(props: ColorLegendsContainerProps): React.
     }
 
     const width = Math.max(5, Math.min(10, 120 / props.colorScales.length));
-    const minHeight = Math.min(60 + 2 * offset, props.height);
+    const minHeight = Math.min(60 + 2 * STYLE_CONSTANTS.offset, props.height);
 
     const numRows = Math.min(Math.floor(props.height / minHeight), props.colorScales.length);
     const numCols = Math.ceil(props.colorScales.length / numRows);
-    const height = Math.max(minHeight, props.height / numRows - (numRows - 1) * legendGap);
+    const height = Math.max(minHeight, props.height / numRows - (numRows - 1) * STYLE_CONSTANTS.legendGap);
 
     function makeLegends(): React.ReactNode[] {
         const legends: React.ReactNode[] = [];
@@ -312,8 +349,15 @@ export function ColorLegendsContainer(props: ColorLegendsContainerProps): React.
                     break;
                 }
                 const { id, colorScale } = props.colorScales[index++];
-                const top = row * (height + 2 * offset) + row * legendGap;
-                const left = col * (width + legendGap + lineWidth + textGap + textWidth + nameLabelWidth);
+                const top = row * (height + 2 * STYLE_CONSTANTS.offset) + row * STYLE_CONSTANTS.legendGap;
+                const left =
+                    col *
+                    (width +
+                        STYLE_CONSTANTS.legendGap +
+                        STYLE_CONSTANTS.lineWidth +
+                        STYLE_CONSTANTS.textGap +
+                        STYLE_CONSTANTS.textWidth +
+                        STYLE_CONSTANTS.nameLabelWidth);
 
                 legends.push(
                     <ColorLegend
@@ -340,8 +384,14 @@ export function ColorLegendsContainer(props: ColorLegendsContainerProps): React.
         >
             <svg
                 style={{
-                    height: numRows * (height + 2 * offset) + (numRows - 1) * legendGap,
-                    width: numCols * (width + legendGap + lineWidth + textGap + textWidth),
+                    height: numRows * (height + 2 * STYLE_CONSTANTS.offset) + (numRows - 1) * STYLE_CONSTANTS.legendGap,
+                    width:
+                        numCols *
+                        (width +
+                            STYLE_CONSTANTS.legendGap +
+                            STYLE_CONSTANTS.lineWidth +
+                            STYLE_CONSTANTS.textGap +
+                            STYLE_CONSTANTS.textWidth),
                 }}
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/modules/_shared/components/ColorScaleSelector/colorScaleSelector.tsx b/frontend/src/modules/_shared/components/ColorScaleSelector/colorScaleSelector.tsx
index 7e1950da5..123dd0e71 100644
--- a/frontend/src/modules/_shared/components/ColorScaleSelector/colorScaleSelector.tsx
+++ b/frontend/src/modules/_shared/components/ColorScaleSelector/colorScaleSelector.tsx
@@ -270,6 +270,14 @@ function ColorScaleSetter(props: ColorScaleSetterProps): React.ReactNode {
         setPrevDivMidPoint(props.divMidPoint);
     }
 
+    if (divMidPoint < min) {
+        setDivMidPoint(min);
+    }
+
+    if (divMidPoint > max) {
+        setDivMidPoint(max);
+    }
+
     const handleMinMaxDivMidPointChange = React.useCallback(function handleMinMaxDivMidPointChange(
         min: number,
         max: number,
diff --git a/frontend/src/modules/_shared/components/InplaceVolumetricsFilterComponent/inplaceVolumetricsFilterComponent.tsx b/frontend/src/modules/_shared/components/InplaceVolumetricsFilterComponent/inplaceVolumetricsFilterComponent.tsx
index 6846512c3..caf4a56d0 100644
--- a/frontend/src/modules/_shared/components/InplaceVolumetricsFilterComponent/inplaceVolumetricsFilterComponent.tsx
+++ b/frontend/src/modules/_shared/components/InplaceVolumetricsFilterComponent/inplaceVolumetricsFilterComponent.tsx
@@ -226,7 +226,7 @@ export function InplaceVolumetricsFilterComponent(props: InplaceVolumetricsFilte
         <>
             <CollapsibleGroup title="Ensembles" expanded>
                 <EnsembleSelect
-                    ensembleSet={props.ensembleSet}
+                    ensembles={props.ensembleSet.getEnsembleArr()}
                     value={ensembleIdents}
                     onChange={handleEnsembleIdentsChange}
                     size={5}
diff --git a/frontend/src/modules/_shared/components/ReadoutBox.tsx b/frontend/src/modules/_shared/components/ReadoutBox.tsx
index 4f6bb33f6..c30f3adb4 100644
--- a/frontend/src/modules/_shared/components/ReadoutBox.tsx
+++ b/frontend/src/modules/_shared/components/ReadoutBox.tsx
@@ -93,7 +93,7 @@ export function ReadoutBox(props: ReadoutBoxProps): React.ReactNode {
     return (
         <div
             ref={readoutRoot}
-            className="absolute z-50 w-60 flex flex-col gap-2 p-2 text-sm rounded border border-neutral-300 bg-white bg-opacity-75 backdrop-blur-sm pointer-events-none"
+            className="absolute z-50 w-72 flex flex-col gap-2 p-2 text-sm rounded border border-neutral-300 bg-white bg-opacity-75 backdrop-blur-sm pointer-events-none"
             style={boxPositionStyle}
         >
             {visibleReadoutItems.map((item, idx) => (
diff --git a/frontend/src/modules/_shared/components/SubsurfaceViewerWithCameraState/index.ts b/frontend/src/modules/_shared/components/SubsurfaceViewerWithCameraState/index.ts
new file mode 100644
index 000000000..278e0794c
--- /dev/null
+++ b/frontend/src/modules/_shared/components/SubsurfaceViewerWithCameraState/index.ts
@@ -0,0 +1,2 @@
+export { SubsurfaceViewerWithCameraState } from "./subsurfaceViewerWithCameraState";
+export type { SubsurfaceViewerWithCameraStateProps } from "./subsurfaceViewerWithCameraState";
diff --git a/frontend/src/modules/3DViewer/view/components/SubsurfaceViewerWithCameraState.tsx b/frontend/src/modules/_shared/components/SubsurfaceViewerWithCameraState/subsurfaceViewerWithCameraState.tsx
similarity index 85%
rename from frontend/src/modules/3DViewer/view/components/SubsurfaceViewerWithCameraState.tsx
rename to frontend/src/modules/_shared/components/SubsurfaceViewerWithCameraState/subsurfaceViewerWithCameraState.tsx
index da31e9ea9..03af3816f 100644
--- a/frontend/src/modules/3DViewer/view/components/SubsurfaceViewerWithCameraState.tsx
+++ b/frontend/src/modules/_shared/components/SubsurfaceViewerWithCameraState/subsurfaceViewerWithCameraState.tsx
@@ -11,6 +11,7 @@ export type SubsurfaceViewerWithCameraStateProps = SubsurfaceViewerProps & {
 };
 
 export function SubsurfaceViewerWithCameraState(props: SubsurfaceViewerWithCameraStateProps): React.ReactNode {
+    const [prevTriggerHome, setPrevTriggerHome] = React.useState<number | undefined>(0);
     const [prevBounds, setPrevBounds] = React.useState<[number, number, number, number] | undefined>(undefined);
     const [prevCameraPosition, setPrevCameraPosition] = React.useState<ViewStateType | undefined>(undefined);
     const [cameraPosition, setCameraPosition] = React.useState<ViewStateType | undefined>(undefined);
@@ -20,6 +21,13 @@ export function SubsurfaceViewerWithCameraState(props: SubsurfaceViewerWithCamer
         setCameraPosition(undefined);
     }
 
+    if (props.triggerHome !== prevTriggerHome) {
+        setPrevTriggerHome(props.triggerHome);
+        if (props.triggerHome) {
+            setCameraPosition(undefined);
+        }
+    }
+
     if (!isEqual(props.cameraPosition, prevCameraPosition)) {
         setPrevCameraPosition(props.cameraPosition);
         if (props.cameraPosition) {
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index ff5f2eb18..000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "webviz",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}