FIX-2093 Edit Curves

Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx

@@ -20,8 +20,8 @@ import formatDateString from "../DateFormatter";
 import ConfirmModal from "../Modals/ConfirmModal";
 import ProgressSpinner from "../ProgressSpinner";
 import { CurveValuesPlot } from "./CurveValuesPlot";
-import EditInterval from "./EditInterval";
 import EditNumber from "./EditNumber";
+import EditSelectedLCI from "./EditSelectedLCI";
 import { LogCurveInfoRow } from "./LogCurveInfoListView";
 import { ContentTable, ContentTableColumn, ContentTableRow, ContentType, ExportableContentTableColumn, Order } from "./table";
 
@@ -142,20 +142,19 @@ export const CurveValuesView = (): React.ReactElement => {
   );
 
   const updateColumns = (curveSpecifications: CurveSpecification[]) => {
-    const isNewMnemonic = (mnemonic: string) => {
-      return columns.map((column) => column.property).indexOf(mnemonic) < 0;
-    };
-    const newColumns = curveSpecifications
-      .filter((curveSpecification) => isNewMnemonic(curveSpecification.mnemonic))
-      .map((curveSpecification) => {
-        return {
-          columnOf: curveSpecification,
-          property: curveSpecification.mnemonic,
-          label: `${curveSpecification.mnemonic} (${curveSpecification.unit})`,
-          type: getColumnType(curveSpecification)
-        };
-      });
-    setColumns([...columns, ...newColumns]);
+    const newColumns = curveSpecifications.map((curveSpecification) => {
+      return {
+        columnOf: curveSpecification,
+        property: curveSpecification.mnemonic,
+        label: `${curveSpecification.mnemonic} (${curveSpecification.unit})`,
+        type: getColumnType(curveSpecification)
+      };
+    });
+    const prevMnemonics = columns.map((column) => column.property);
+    const newMnemonics = newColumns.map((column) => column.property);
+    if (prevMnemonics.length !== newMnemonics.length || prevMnemonics.some((value, index) => value !== newMnemonics[index])) {
+      setColumns(newColumns);
+    }
   };
 
   const getTableData = React.useCallback(() => {
@@ -271,9 +270,9 @@ export const CurveValuesView = (): React.ReactElement => {
     <>
       <ContentContainer>
         <CommonPanelContainer>
-          <EditInterval
+          <EditSelectedLCI
             disabled={autoRefresh}
-            key="editinterval"
+            key="editSelectedLCI"
             overrideStartIndex={autoRefresh ? getCurrentMinIndex() : null}
             overrideEndIndex={autoRefresh ? getCurrentMaxIndex() : null}
           />

Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx

@@ -4,7 +4,7 @@ import { ChangeEvent, ReactElement, useContext, useState } from "react";
 import styled from "styled-components";
 import OperationContext from "../../contexts/operationContext";
 import { TooltipLayout } from "../ContextMenus/OptionsContextMenu";
-import { StyledButton } from "./EditInterval";
+import { StyledButton } from "./EditSelectedLCI";
 
 interface EditNumberProps {
   label: string;

Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx → Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx

@@ -1,52 +1,87 @@
-import { Button, Icon, Label, TextField, Typography } from "@equinor/eds-core-react";
+import { Autocomplete, Button, Icon, Label, TextField, Typography } from "@equinor/eds-core-react";
 import { isValid, parse } from "date-fns";
 import { format } from "date-fns-tz";
-import { Dispatch, SetStateAction, useContext, useEffect, useState } from "react";
+import { CSSProperties, Dispatch, SetStateAction, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 import NavigationContext from "../../contexts/navigationContext";
 import NavigationType from "../../contexts/navigationType";
 import OperationContext from "../../contexts/operationContext";
+import { ComponentType } from "../../models/componentType";
+import LogCurveInfo from "../../models/logCurveInfo";
 import LogObject from "../../models/logObject";
+import { truncateAbortHandler } from "../../services/apiClient";
+import ComponentService from "../../services/componentService";
 import { Colors, colors, dark } from "../../styles/Colors";
 import { WITSML_INDEX_TYPE_DATE_TIME } from "../Constants";
 import { formatIndexValue } from "../Modals/SelectIndexToDisplayModal";
 
-interface EditIntervalProps {
+interface EditSelectedLCIProps {
   disabled?: boolean;
   overrideStartIndex?: string;
   overrideEndIndex?: string;
 }
 
-const EditInterval = (props: EditIntervalProps): React.ReactElement => {
+const EditSelectedLCI = (props: EditSelectedLCIProps): React.ReactElement => {
   const { disabled, overrideStartIndex, overrideEndIndex } = props;
   const { dispatchNavigation, navigationState } = useContext(NavigationContext);
   const { selectedObject, selectedLogCurveInfo } = navigationState;
   const selectedLog = selectedObject as LogObject;
-
+  const [logCurveInfo, setLogCurveInfo] = useState<LogCurveInfo[]>([]);
+  const [selectedMnemonics, setSelectedMnemonics] = useState<string[]>([]);
   const [startIndex, setStartIndex] = useState<string>(null);
   const [endIndex, setEndIndex] = useState<string>(null);
   const [isEdited, setIsEdited] = useState<boolean>(false);
   const [isValidStart, setIsValidStart] = useState<boolean>(true);
   const [isValidEnd, setIsValidEnd] = useState<boolean>(true);
+  const [isFetchingMnemonics, setIsFetchingMnemonics] = useState<boolean>(true);
   const {
     operationState: { colors }
   } = useContext(OperationContext);
 
   useEffect(() => {
     const minIndex = selectedLogCurveInfo?.[0]?.minIndex;
     const maxIndex = selectedLogCurveInfo?.[0]?.maxIndex;
+    const selectedMnemonics = selectedLogCurveInfo?.map((lci) => lci.mnemonic)?.filter((mnemonic) => mnemonic !== selectedLog.indexCurve);
+    setSelectedMnemonics(selectedMnemonics || []);
     setStartIndex(getParsedValue(String(minIndex)));
     setEndIndex(getParsedValue(String(maxIndex)));
   }, []);
 
+  useEffect(() => {
+    setIsFetchingMnemonics(true);
+    if (selectedLog) {
+      const controller = new AbortController();
+
+      const getLogCurveInfo = async () => {
+        const logCurveInfo = await ComponentService.getComponents(
+          selectedLog.wellUid,
+          selectedLog.wellboreUid,
+          selectedLog.uid,
+          ComponentType.Mnemonic,
+          undefined,
+          controller.signal
+        );
+        setLogCurveInfo(logCurveInfo.slice(1)); // Skip the first one as it is the index curve
+        setIsFetchingMnemonics(false);
+      };
+
+      getLogCurveInfo().catch(truncateAbortHandler);
+
+      return () => {
+        controller.abort();
+      };
+    }
+  }, [selectedLog]);
+
   useEffect(() => {
     if (overrideStartIndex) setStartIndex(getParsedValue(overrideStartIndex));
     if (overrideEndIndex) setEndIndex(getParsedValue(overrideEndIndex));
   }, [overrideStartIndex, overrideEndIndex]);
 
-  const submitEditInterval = () => {
+  const submitLCI = () => {
     setIsEdited(false);
-    const logCurveInfoWithUpdatedIndex = selectedLogCurveInfo.map((logCurveInfo) => {
+    const filteredLCI = logCurveInfo.filter((lci) => selectedMnemonics.includes(lci.mnemonic));
+    const logCurveInfoWithUpdatedIndex = filteredLCI.map((logCurveInfo) => {
       return {
         ...logCurveInfo,
         minIndex: formatIndexValue(startIndex),
@@ -86,10 +121,15 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => {
     }
   };
 
+  const onMnemonicsChange = ({ selectedItems }: { selectedItems: string[] }) => {
+    setSelectedMnemonics(selectedItems);
+    setIsEdited(true);
+  };
+
   const dateTimeFormat = "yyyy-MM-dd'T'HH:mm:ss";
 
   return (
-    <EditIntervalLayout colors={colors}>
+    <Layout colors={colors}>
       <Typography
         style={{
           color: `${colors.interactive.primaryResting}`
@@ -128,14 +168,34 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => {
           }}
         />
       </StartEndIndex>
-      <StyledButton variant={"ghost"} color={"primary"} onClick={submitEditInterval} disabled={!isValidStart || !isValidEnd}>
+      <StartEndIndex>
+        <StyledLabel label="Mnemonics" />
+        <Autocomplete
+          id={"mnemonics"}
+          disabled={disabled || isFetchingMnemonics}
+          label={""}
+          multiple={true}
+          // @ts-ignore. Variant is defined and exists in the documentation, but not in the type definition.
+          variant={selectedMnemonics.length === 0 ? "error" : null}
+          options={logCurveInfo.map((lci) => lci.mnemonic)}
+          selectedOptions={selectedMnemonics}
+          onFocus={(e) => e.preventDefault()}
+          onOptionsChange={onMnemonicsChange}
+          style={
+            {
+              "--eds-input-background": colors.ui.backgroundDefault
+            } as CSSProperties
+          }
+        />
+      </StartEndIndex>
+      <StyledButton variant={"ghost"} color={"primary"} onClick={submitLCI} disabled={disabled || !isValidStart || !isValidEnd || selectedMnemonics.length === 0}>
         <Icon size={16} name={isEdited ? "arrowForward" : "sync"} />
       </StyledButton>
-    </EditIntervalLayout>
+    </Layout>
   );
 };
 
-const EditIntervalLayout = styled.div<{ colors: Colors }>`
+const Layout = styled.div<{ colors: Colors }>`
   display: flex;
   gap: 0.25rem;
   align-items: center;
@@ -149,7 +209,7 @@ const StartEndIndex = styled.div`
 `;
 
 const StyledLabel = styled(Label)`
-  width: 5rem;
+  white-space: nowrap;
   align-items: center;
   font-style: italic;
 `;
@@ -189,4 +249,4 @@ export const StyledButton = styled(Button)`
   align-items: center;
   justify-content: center;
 `;
-export default EditInterval;
+export default EditSelectedLCI;