Merge branch 'master' into dependabot/npm_and_yarn/typescript/types/r…

…eact-redux-7.1.34

python/src/components/WellCompletions/components/DataLoader.tsx

@@ -3,9 +3,10 @@ import React, { useMemo } from "react";
 import { Provider as ReduxProvider } from "react-redux";
 import { createReduxStore } from "../redux/store";
 import type { Data, UISettings } from "../redux/types";
-import { findSubzones, preprocessData } from "../utils/dataUtil";
+import { preprocessData } from "../utils/dataUtil";
 
 import type { Zone } from "@webviz/well-completions-plot";
+import { populateSubzonesArray } from "@webviz/well-completions-plot";
 
 interface Props {
     id: string;
@@ -35,7 +36,10 @@ const DataProvider: React.FC<Props> = ({
 }: PropsWithChildren<Props>) => {
     const allSubzones = useMemo(() => {
         const subzones: Zone[] = [];
-        data.stratigraphy.forEach((zone) => findSubzones(zone, subzones));
+        for (const zone of data.stratigraphy) {
+            populateSubzonesArray(zone, subzones);
+        }
+
         return subzones.map((zone) => zone.name);
     }, [data.stratigraphy]);
 

python/src/components/WellCompletions/components/Settings/SortTable.tsx

@@ -6,7 +6,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { deleteSortKey, updateSortKey } from "../../redux/actions";
 import type { WellCompletionsState } from "../../redux/store";
-import { SortBy, SortDirection } from "@webviz/well-completions-plot";
+import { SortWellsBy, SortDirection } from "@webviz/well-completions-plot";
 
 const PREFIX = "SortTable";
 
@@ -49,7 +49,7 @@ const SortTable: React.FC = React.memo(() => {
     const [sortKeyToAdd, setSortKeyToAdd] = useState<string>();
     // Sort direction in the placeholder row
     const [sortDirectionToAdd, setSortDirectionToAdd] = useState<SortDirection>(
-        SortDirection.Ascending
+        SortDirection.ASCENDING
     );
 
     // Redux
@@ -64,9 +64,9 @@ const SortTable: React.FC = React.memo(() => {
     // Apart from the user defined attribute, we can also sort by well name, stratigraphy depth etc
     const sortKeys = useMemo(() => {
         const keys = new Set<string>([
-            SortBy.Name,
-            SortBy.StratigraphyDepth,
-            SortBy.CompletionDate,
+            SortWellsBy.WELL_NAME,
+            SortWellsBy.STRATIGRAPHY_DEPTH,
+            SortWellsBy.EARLIEST_COMPLETION_DATE,
         ]);
         attributeKeys.forEach((key) => keys.add(key));
         return keys;
@@ -99,9 +99,9 @@ const SortTable: React.FC = React.memo(() => {
     const onSortDirectionToAddChange = useCallback(
         () =>
             setSortDirectionToAdd(
-                sortDirectionToAdd === SortDirection.Ascending
-                    ? SortDirection.Descending
-                    : SortDirection.Ascending
+                sortDirectionToAdd === SortDirection.ASCENDING
+                    ? SortDirection.DESCENDING
+                    : SortDirection.ASCENDING
             ),
         [setSortDirectionToAdd, sortDirectionToAdd]
     );
@@ -147,9 +147,9 @@ const SortTable: React.FC = React.memo(() => {
                                         onUpdateSortKey(
                                             sortKey,
                                             sortBy[sortKey] ===
-                                                SortDirection.Ascending
-                                                ? SortDirection.Descending
-                                                : SortDirection.Ascending
+                                                SortDirection.ASCENDING
+                                                ? SortDirection.DESCENDING
+                                                : SortDirection.ASCENDING
                                         )
                                     }
                                 >

python/src/components/WellCompletions/components/Settings/ZoneSelector.tsx

@@ -5,9 +5,9 @@ import DropdownTreeSelect from "react-dropdown-tree-select";
 import "react-dropdown-tree-select/dist/styles.css";
 import { useDispatch } from "react-redux";
 import { updateFilteredZones } from "../../redux/actions";
-import { findSubzones } from "../../utils/dataUtil";
 import { DataContext } from "../DataLoader";
 import type { Zone } from "@webviz/well-completions-plot";
+import { populateSubzonesArray } from "@webviz/well-completions-plot";
 
 const PREFIX = "ZoneSelector";
 
@@ -60,7 +60,7 @@ export const findSelectedZones = (
         result: Zone[]
     ) => {
         if (selectedNodeNames.has("All") || selectedNodeNames.has(zone.name))
-            findSubzones(zone, result);
+            populateSubzonesArray(zone, result);
         else if (zone.subzones)
             zone.subzones.forEach((subzone) =>
                 searchZone(subzone, selectedNodeNames, result)

python/src/components/WellCompletions/components/WellCompletionsViewer.tsx

@@ -163,7 +163,9 @@ export const WellCompletionsViewer: React.FC<WellCompletionsViewerProps> = (
                                     >
                                         <WellCompletionsPlot
                                             id={`${props.parentId}-well-completions-plot`}
-                                            timeSteps={data.timeSteps}
+                                            sortedCompletionDates={
+                                                data.timeSteps
+                                            }
                                             plotData={dataInCurrentPage}
                                         />
                                     </div>

python/src/components/WellCompletions/hooks/usePlotData.tsx

@@ -4,14 +4,13 @@ import { useSelector } from "react-redux";
 import { DataContext } from "../components/DataLoader";
 import type { WellCompletionsState } from "../redux/store";
 import type { Well } from "../redux/types";
+import { computeDataToPlot, createAttributePredicate } from "../utils/dataUtil";
 import {
-    computeDataToPlot,
-    createAttributePredicate,
-    findSubzones,
-} from "../utils/dataUtil";
+    createWellNameRegexMatcher,
+    populateSubzonesArray,
+} from "@webviz/well-completions-plot";
 import type { PlotData, Zone } from "@webviz/well-completions-plot";
 import { createSortFunction } from "../utils/sort";
-import { getRegexPredicate } from "../utils/stringUtil";
 
 export const usePlotData = (): PlotData => {
     //Redux states
@@ -39,8 +38,8 @@ export const usePlotData = (): PlotData => {
         (state: WellCompletionsState) => state.ui.sortBy
     );
     //Memo
-    const wellNameRegex = useMemo(
-        () => getRegexPredicate(wellSearchText),
+    const wellNameRegexMatcher = useMemo(
+        () => createWellNameRegexMatcher(wellSearchText),
         [wellSearchText]
     );
     const wellAttributePredicate = useMemo(
@@ -52,16 +51,19 @@ export const usePlotData = (): PlotData => {
             data
                 ? Array.from(data.wells as Well[]).filter(
                       (well) =>
-                          wellNameRegex(well.name) &&
+                          wellNameRegexMatcher(well.name) &&
                           wellAttributePredicate(well)
                   )
                 : [],
-        [data, wellNameRegex, wellAttributePredicate]
+        [data, wellNameRegexMatcher, wellAttributePredicate]
     );
     const filteredSubzones = useMemo(() => {
         const allSubzones: Zone[] = [];
+        for (const zone of data.stratigraphy) {
+            populateSubzonesArray(zone, allSubzones);
+        }
+
         const filteredZoneSet = new Set(filteredZones);
-        data.stratigraphy.forEach((zone) => findSubzones(zone, allSubzones));
         return allSubzones.filter((zone) => filteredZoneSet.has(zone.name));
     }, [data, filteredZones]);
 

python/src/components/WellCompletions/utils/dataUtil.ts

@@ -10,6 +10,7 @@ import type {
     WellPlotData,
     Zone,
 } from "@webviz/well-completions-plot";
+import { areCompletionsPlotDataValuesEqual } from "@webviz/well-completions-plot";
 
 /**
  * Preprocess the input data by finding the earliest completion date
@@ -131,18 +132,6 @@ export const createAttributePredicate = (
     };
 };
 
-/**
- * DFS to find all leaf nodes
- * @param zone
- * @param result
- * @returns
- */
-export const findSubzones = (zone: Zone, result: Zone[]): void => {
-    if (zone === undefined) return;
-    if (zone.subzones === undefined || zone.subzones.length === 0)
-        result.push(zone);
-    else zone.subzones.forEach((zone) => findSubzones(zone, result));
-};
 /**
  * Util method to prepare stratigraphy and well data from the given time step range and other settings for plotting
  * @param subzones
@@ -210,7 +199,7 @@ export const computeDataToPlot = (
             //If value changed
             if (
                 completionsPlotData.length === 0 ||
-                !isCompletionValuesEqual(
+                !areCompletionsPlotDataValuesEqual(
                     completionsPlotData[completionsPlotData.length - 1],
                     newCompletion
                 )
@@ -230,13 +219,3 @@ export const computeDataToPlot = (
         units: units,
     };
 };
-
-const isCompletionValuesEqual = (
-    completion1: CompletionPlotData,
-    completion2: CompletionPlotData
-) =>
-    completion1.open === completion2.open &&
-    completion1.shut === completion2.shut &&
-    completion1.khMean === completion2.khMean &&
-    completion1.khMin === completion2.khMin &&
-    completion1.khMax === completion2.khMax;

python/src/components/WellCompletions/utils/sort.ts

@@ -2,27 +2,29 @@ import type {
     AttributeType,
     WellPlotData,
 } from "@webviz/well-completions-plot";
-import { SortBy, SortDirection } from "@webviz/well-completions-plot";
+import {
+    createGetWellPlotDataCompareValueFunction,
+    SortWellsBy,
+    SortDirection,
+} from "@webviz/well-completions-plot";
 
 // Default sort methods
 export const createAttributeKeyFunction = (
     sortMethod: string
 ): ((well: WellPlotData) => AttributeType) => {
-    switch (sortMethod) {
-        case SortBy.Name:
-            return (well) => well.name;
-        case SortBy.StratigraphyDepth:
-            return (well) =>
-                well.completions.find(
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    (_, index) => well.completions[index]!.open > 0
-                )?.zoneIndex;
-        case SortBy.CompletionDate:
-            return (well) => well.earliestCompDateIndex;
-        default:
-            return (well) => well.attributes[sortMethod];
+    // If sortMethod is in SortWellsBy enums
+    const isValidSortWellsByEnum = Object.values(SortWellsBy).includes(
+        sortMethod as SortWellsBy
+    );
+    if (isValidSortWellsByEnum) {
+        const sortWellsBy = sortMethod as SortWellsBy;
+        return createGetWellPlotDataCompareValueFunction(sortWellsBy);
     }
+
+    // Otherwise return a function that returns the attribute value
+    return (well) => well.attributes[sortMethod] as AttributeType;
 };
+
 export const createSortFunction = (
     sortBy: Record<string, SortDirection>
 ): ((a: WellPlotData, b: WellPlotData) => 0 | 1 | -1) => {
@@ -46,9 +48,9 @@ export const createSortFunction = (
             if (
                 aAttribute === undefined ||
                 bAttribute === undefined ||
-                (sortBy[sort] === SortDirection.Ascending &&
+                (sortBy[sort] === SortDirection.ASCENDING &&
                     aAttribute < bAttribute) ||
-                (sortBy[sort] !== SortDirection.Ascending &&
+                (sortBy[sort] !== SortDirection.ASCENDING &&
                     aAttribute > bAttribute)
             )
                 return -1;

typescript/packages/well-completions-plot/example-data/well-completions-plot-data.ts

@@ -6,7 +6,11 @@ import { PlotData } from "../src/index";
  * Some data has been removed to make the example data smaller. Mainly it's less time steps and less wells, but the data
  * is to show how the plot occurs with given PlotData data structure.
  */
-export const timeSteps: string[] = ["2000-02-01", "2000-06-01", "2000-10-01"];
+export const sortedCompletionDates: string[] = [
+    "2000-02-01",
+    "2000-06-01",
+    "2000-10-01",
+];
 export const firstPlotData: PlotData = {
     stratigraphy: [
         {
@@ -68,7 +72,7 @@ export const firstPlotData: PlotData = {
     ],
     wells: [
         {
-            name: "OP_1",
+            name: "PP_1",
             completions: [
                 {
                     zoneIndex: 0,

typescript/packages/well-completions-plot/src/WellCompletionsPlot.stories.tsx

@@ -5,7 +5,7 @@ import { WellCompletionsPlot } from "./WellCompletionsPlot";
 import type { PlotData } from "./index";
 
 import {
-    timeSteps,
+    sortedCompletionDates,
     firstPlotData,
     secondPlotData,
     thirdPlotData,
@@ -30,13 +30,15 @@ export default stories;
 // @ts-expect-error TS7006
 const Template = (data) => {
     const [plotData, setPlotData] = React.useState<PlotData>(data.plotData);
-    const [timeSteps, setTimeSteps] = React.useState<string[]>(data.timeSteps);
+    const [sortedCompletionDates, setSortedCompletionDates] = React.useState<
+        string[]
+    >(data.sortedCompletionDates);
 
     const [prevData, setPrevData] = React.useState(data);
     if (data !== prevData) {
         setPrevData(data);
         setPlotData(data.plotData);
-        setTimeSteps(data.timeSteps);
+        setSortedCompletionDates(data.sortedCompletionDates);
     }
 
     const handleFirstButtonClick = () => {
@@ -70,7 +72,7 @@ const Template = (data) => {
                 <WellCompletionsPlot
                     id={"test"}
                     plotData={plotData}
-                    timeSteps={timeSteps}
+                    sortedCompletionDates={sortedCompletionDates}
                 />
             </div>
         </>
@@ -79,7 +81,7 @@ const Template = (data) => {
 export const WellCompletionsPlotStory: StoryObj<typeof Template> = {
     args: {
         plotData: firstPlotData,
-        timeSteps: timeSteps,
+        sortedCompletionDates: sortedCompletionDates,
     },
     render: (args) => <Template {...args} />,
 };

typescript/packages/well-completions-plot/src/WellCompletionsPlot.tsx

@@ -3,7 +3,7 @@ import { useResizeDetector } from "react-resize-detector";
 import { TooltipProvider } from "./components/TooltipProvider";
 import { CompletionsPlot } from "./components/CompletionsPlot";
 import type { Padding } from "./types/layoutTypes";
-import { createLayout } from "./utils/layoutUtils";
+import { createLayout } from "./private-utils/layoutUtils";
 import { StratigraphyPlot } from "./components/StratigraphyPlot";
 import { WellsPlot } from "./components/WellsPlot";
 
@@ -13,7 +13,7 @@ import "./WellCompletionsPlot.css";
 
 export interface WellCompletionsPlotProps {
     id: string;
-    timeSteps: string[];
+    sortedCompletionDates: string[]; // Array of string dates/time steps in increasing order;
     plotData: PlotData;
 }
 
@@ -55,7 +55,9 @@ export const WellCompletionsPlot: React.FC<WellCompletionsPlotProps> =
                                 padding={padding}
                             />
                             <WellsPlot
-                                timeSteps={props.timeSteps}
+                                sortedCompletionDates={
+                                    props.sortedCompletionDates
+                                }
                                 plotData={props.plotData}
                                 layout={layout}
                                 padding={padding}

typescript/packages/well-completions-plot/src/components/TooltipProvider.tsx

@@ -19,7 +19,6 @@ const TooltipContext = React.createContext<{
 const TooltipProvider: React.FC<PropsWithChildren<unknown>> = ({
     children,
 }: PropsWithChildren<unknown>) => {
-    // State
     const [Content, setContent] = React.useState<React.FC | null>(null);
 
     const value = React.useMemo(
@@ -32,11 +31,7 @@ const TooltipProvider: React.FC<PropsWithChildren<unknown>> = ({
     return (
         <TooltipContext.Provider value={value}>
             {children}
-            {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                <ReactTooltip id="plot-tooltip" content={() => Content} />
-            }
+            {<ReactTooltip id="plot-tooltip">{Content}</ReactTooltip>}
         </TooltipContext.Provider>
     );
 };