diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx index ab00f8b48..546207759 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx +++ b/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 EditSelectedLogCurveInfo from "./EditSelectedLogCurveInfo"; 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 => { <> - diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx index dd0d851dc..acc6658d1 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx +++ b/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 "./EditSelectedLogCurveInfo"; interface EditNumberProps { label: string; diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx similarity index 63% rename from Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx rename to Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx index cab94e206..3dbb019c7 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx @@ -1,33 +1,39 @@ -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 EditSelectedLogCurveInfoProps { disabled?: boolean; overrideStartIndex?: string; overrideEndIndex?: string; } -const EditInterval = (props: EditIntervalProps): React.ReactElement => { +const EditSelectedLogCurveInfo = (props: EditSelectedLogCurveInfoProps): 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([]); + const [selectedMnemonics, setSelectedMnemonics] = useState([]); const [startIndex, setStartIndex] = useState(null); const [endIndex, setEndIndex] = useState(null); const [isEdited, setIsEdited] = useState(false); const [isValidStart, setIsValidStart] = useState(true); const [isValidEnd, setIsValidEnd] = useState(true); + const [isFetchingMnemonics, setIsFetchingMnemonics] = useState(true); const { operationState: { colors } } = useContext(OperationContext); @@ -35,18 +41,47 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => { 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 submitLogCurveInfo = () => { setIsEdited(false); - const logCurveInfoWithUpdatedIndex = selectedLogCurveInfo.map((logCurveInfo) => { + const filteredLogCurveInfo = logCurveInfo.filter((lci) => selectedMnemonics.includes(lci.mnemonic)); + const logCurveInfoWithUpdatedIndex = filteredLogCurveInfo.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 ( - + { }} /> - + + + lci.mnemonic)} + selectedOptions={selectedMnemonics} + onFocus={(e) => e.preventDefault()} + onOptionsChange={onMnemonicsChange} + style={ + { + "--eds-input-background": colors.ui.backgroundDefault + } as CSSProperties + } + /> + + - + ); }; -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 EditSelectedLogCurveInfo;