From 7ab618cff84af36d7f4bdad10b49faa0718f888b Mon Sep 17 00:00:00 2001 From: Elias Bruvik Date: Wed, 22 Nov 2023 11:05:54 +0000 Subject: [PATCH 1/4] FIX-2093 add ability to change curves --- .../ContentViews/CurveValuesView.tsx | 27 ++++--- .../components/ContentViews/EditInterval.tsx | 72 +++++++++++++++++-- 2 files changed, 79 insertions(+), 20 deletions(-) diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx index ab00f8b48..d754463b6 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx @@ -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(() => { diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx index cab94e206..dad8c0bbe 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx @@ -1,12 +1,16 @@ -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"; @@ -22,12 +26,14 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => { 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,10 +41,38 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => { useEffect(() => { const minIndex = selectedLogCurveInfo?.[0]?.minIndex; const maxIndex = selectedLogCurveInfo?.[0]?.maxIndex; + const selectedMnemonics = selectedLogCurveInfo?.map((lci) => lci.mnemonic); + 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)); @@ -46,7 +80,8 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => { const submitEditInterval = () => { 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,6 +121,11 @@ 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 ( @@ -128,7 +168,27 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => { }} /> - + + + lci.mnemonic)} + selectedOptions={selectedMnemonics} + onFocus={(e) => e.preventDefault()} + onOptionsChange={onMnemonicsChange} + style={ + { + "--eds-input-background": colors.ui.backgroundDefault + } as CSSProperties + } + /> + + @@ -149,7 +209,7 @@ const StartEndIndex = styled.div` `; const StyledLabel = styled(Label)` - width: 5rem; + white-space: nowrap; align-items: center; font-style: italic; `; From 930780b49afeabb5bc89406cb1159069884e7424 Mon Sep 17 00:00:00 2001 From: Elias Bruvik Date: Wed, 22 Nov 2023 11:10:18 +0000 Subject: [PATCH 2/4] FIX-2093 rename EditInterval to EditSelectedLCI --- .../components/ContentViews/CurveValuesView.tsx | 6 +++--- .../components/ContentViews/EditNumber.tsx | 2 +- .../{EditInterval.tsx => EditSelectedLCI.tsx} | 16 ++++++++-------- 3 files changed, 12 insertions(+), 12 deletions(-) rename Src/WitsmlExplorer.Frontend/components/ContentViews/{EditInterval.tsx => EditSelectedLCI.tsx} (95%) diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx index d754463b6..5829906b9 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 EditSelectedLCI from "./EditSelectedLCI"; import { LogCurveInfoRow } from "./LogCurveInfoListView"; import { ContentTable, ContentTableColumn, ContentTableRow, ContentType, ExportableContentTableColumn, Order } from "./table"; @@ -270,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..6176f5ae3 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 "./EditSelectedLCI"; interface EditNumberProps { label: string; diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx similarity index 95% rename from Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx rename to Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx index dad8c0bbe..5f320f0c8 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditInterval.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx @@ -15,13 +15,13 @@ 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; @@ -78,7 +78,7 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => { if (overrideEndIndex) setEndIndex(getParsedValue(overrideEndIndex)); }, [overrideStartIndex, overrideEndIndex]); - const submitEditInterval = () => { + const submitLCI = () => { setIsEdited(false); const filteredLCI = logCurveInfo.filter((lci) => selectedMnemonics.includes(lci.mnemonic)); const logCurveInfoWithUpdatedIndex = filteredLCI.map((logCurveInfo) => { @@ -129,7 +129,7 @@ const EditInterval = (props: EditIntervalProps): React.ReactElement => { const dateTimeFormat = "yyyy-MM-dd'T'HH:mm:ss"; return ( - + { } /> - + - + ); }; -const EditIntervalLayout = styled.div<{ colors: Colors }>` +const Layout = styled.div<{ colors: Colors }>` display: flex; gap: 0.25rem; align-items: center; @@ -249,4 +249,4 @@ export const StyledButton = styled(Button)` align-items: center; justify-content: center; `; -export default EditInterval; +export default EditSelectedLCI; From 9c2f9ca577630380aa17fcbbfd7a747e46658b09 Mon Sep 17 00:00:00 2001 From: Elias Bruvik Date: Wed, 22 Nov 2023 14:56:55 +0000 Subject: [PATCH 3/4] FIX-2093 remove indexCurve from selection --- .../components/ContentViews/EditSelectedLCI.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx index 5f320f0c8..6268a5cd4 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx @@ -41,7 +41,7 @@ const EditSelectedLCI = (props: EditSelectedLCIProps): React.ReactElement => { useEffect(() => { const minIndex = selectedLogCurveInfo?.[0]?.minIndex; const maxIndex = selectedLogCurveInfo?.[0]?.maxIndex; - const selectedMnemonics = selectedLogCurveInfo?.map((lci) => lci.mnemonic); + const selectedMnemonics = selectedLogCurveInfo?.map((lci) => lci.mnemonic)?.filter((mnemonic) => mnemonic !== selectedLog.indexCurve); setSelectedMnemonics(selectedMnemonics || []); setStartIndex(getParsedValue(String(minIndex))); setEndIndex(getParsedValue(String(maxIndex))); From 93c38dddb42a465c28845008c711a0b7b5ebd939 Mon Sep 17 00:00:00 2001 From: Elias Bruvik Date: Thu, 23 Nov 2023 06:55:14 +0000 Subject: [PATCH 4/4] FIX-2093 remove abbreviations --- .../components/ContentViews/CurveValuesView.tsx | 6 +++--- .../components/ContentViews/EditNumber.tsx | 2 +- ...electedLCI.tsx => EditSelectedLogCurveInfo.tsx} | 14 +++++++------- 3 files changed, 11 insertions(+), 11 deletions(-) rename Src/WitsmlExplorer.Frontend/components/ContentViews/{EditSelectedLCI.tsx => EditSelectedLogCurveInfo.tsx} (93%) diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx index 5829906b9..546207759 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx @@ -21,7 +21,7 @@ import ConfirmModal from "../Modals/ConfirmModal"; import ProgressSpinner from "../ProgressSpinner"; import { CurveValuesPlot } from "./CurveValuesPlot"; import EditNumber from "./EditNumber"; -import EditSelectedLCI from "./EditSelectedLCI"; +import EditSelectedLogCurveInfo from "./EditSelectedLogCurveInfo"; import { LogCurveInfoRow } from "./LogCurveInfoListView"; import { ContentTable, ContentTableColumn, ContentTableRow, ContentType, ExportableContentTableColumn, Order } from "./table"; @@ -270,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 6176f5ae3..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 "./EditSelectedLCI"; +import { StyledButton } from "./EditSelectedLogCurveInfo"; interface EditNumberProps { label: string; diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx similarity index 93% rename from Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx rename to Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx index 6268a5cd4..3dbb019c7 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLCI.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx @@ -15,13 +15,13 @@ import { Colors, colors, dark } from "../../styles/Colors"; import { WITSML_INDEX_TYPE_DATE_TIME } from "../Constants"; import { formatIndexValue } from "../Modals/SelectIndexToDisplayModal"; -interface EditSelectedLCIProps { +interface EditSelectedLogCurveInfoProps { disabled?: boolean; overrideStartIndex?: string; overrideEndIndex?: string; } -const EditSelectedLCI = (props: EditSelectedLCIProps): React.ReactElement => { +const EditSelectedLogCurveInfo = (props: EditSelectedLogCurveInfoProps): React.ReactElement => { const { disabled, overrideStartIndex, overrideEndIndex } = props; const { dispatchNavigation, navigationState } = useContext(NavigationContext); const { selectedObject, selectedLogCurveInfo } = navigationState; @@ -78,10 +78,10 @@ const EditSelectedLCI = (props: EditSelectedLCIProps): React.ReactElement => { if (overrideEndIndex) setEndIndex(getParsedValue(overrideEndIndex)); }, [overrideStartIndex, overrideEndIndex]); - const submitLCI = () => { + const submitLogCurveInfo = () => { setIsEdited(false); - const filteredLCI = logCurveInfo.filter((lci) => selectedMnemonics.includes(lci.mnemonic)); - const logCurveInfoWithUpdatedIndex = filteredLCI.map((logCurveInfo) => { + const filteredLogCurveInfo = logCurveInfo.filter((lci) => selectedMnemonics.includes(lci.mnemonic)); + const logCurveInfoWithUpdatedIndex = filteredLogCurveInfo.map((logCurveInfo) => { return { ...logCurveInfo, minIndex: formatIndexValue(startIndex), @@ -188,7 +188,7 @@ const EditSelectedLCI = (props: EditSelectedLCIProps): React.ReactElement => { } /> - + @@ -249,4 +249,4 @@ export const StyledButton = styled(Button)` align-items: center; justify-content: center; `; -export default EditSelectedLCI; +export default EditSelectedLogCurveInfo;