From 425ba54acc2b8c9b9cdd7df06933e25443489ef2 Mon Sep 17 00:00:00 2001 From: Elias Bruvik Date: Tue, 3 Oct 2023 14:11:23 +0100 Subject: [PATCH 1/2] FIX-2055 use strings as keys for React --- .../ContentViews/ChangeLogsListView.tsx | 4 ++-- .../ContentViews/CurveValuesView.tsx | 23 +++++++++++-------- .../components/ContentViews/FluidsView.tsx | 4 ++-- .../ContentViews/FormationMarkersListView.tsx | 4 ++-- .../components/ContentViews/LogsListView.tsx | 4 ++-- .../components/ContentViews/MudLogView.tsx | 8 +++---- .../ContentViews/MudLogsListView.tsx | 4 ++-- .../ContentViews/ObjectSearchListView.tsx | 4 ++-- .../WellboreObjectTypesListView.tsx | 8 +++---- .../ContentViews/table/tableParts.ts | 2 +- .../ContextMenus/ContextMenuUtils.tsx | 2 +- .../Modals/GeologyIntervalPropertiesModal.tsx | 4 ++-- .../Modals/LogCurveInfoPropertiesModal.tsx | 4 ++-- .../components/Nav.tsx | 3 ++- .../components/PropertiesPanel.tsx | 11 +++------ .../components/Sidebar/Sidebar.tsx | 4 ++-- 16 files changed, 47 insertions(+), 46 deletions(-) diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/ChangeLogsListView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/ChangeLogsListView.tsx index 0e9a7d379..25677950b 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/ChangeLogsListView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/ChangeLogsListView.tsx @@ -20,9 +20,9 @@ export const ChangeLogsListView = (): React.ReactElement => { }, [selectedWellbore]); const getTableData = () => { - return changeLogs.map((changeLog, index) => { + return changeLogs.map((changeLog) => { return { - id: index, + id: changeLog.uid, uidObject: changeLog.uidObject, nameObject: changeLog.nameObject, lastChangeType: changeLog.lastChangeType, diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx index f1327cf7e..0cca22b7c 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx @@ -75,8 +75,8 @@ export const CurveValuesView = (): React.ReactElement => { }, [autoRefresh]); const getDeleteLogCurveValuesJob = useCallback( - (currentSelected: LogCurveInfoRow[], checkedContentItems: ContentTableRow[], selectedLog: LogObject) => { - const indexRanges = getIndexRanges(checkedContentItems, selectedLog); + (currentSelected: LogCurveInfoRow[], checkedContentItems: CurveValueRow[], selectedLog: LogObject) => { + const indexRanges = getIndexRanges(checkedContentItems, tableData, selectedLog); const mnemonics = currentSelected.map((logCurveInfoRow) => logCurveInfoRow.mnemonic); const deleteLogCurveValuesJob: DeleteLogCurveValuesJob = { @@ -203,9 +203,9 @@ export const CurveValuesView = (): React.ReactElement => { if (logData && logData.data) { updateColumns(logData.curveSpecifications); - const logDataRows = logData.data.map((data, index) => { + const logDataRows = logData.data.map((data) => { const row: CurveValueRow = { - id: index, + id: String(data[selectedLog.indexCurve]), ...data }; return row; @@ -296,18 +296,23 @@ const Message = styled.div` padding: 10px; `; -const getIndexRanges = (checkedContentItems: ContentTableRow[], selectedLog: LogObject): IndexRange[] => { - const sortedItems = checkedContentItems.sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)); +const getIndexRanges = (checkedContentItems: CurveValueRow[], tableData: CurveValueRow[], selectedLog: LogObject): IndexRange[] => { + const sortedItems = checkedContentItems.sort((a, b) => { + const idA = selectedLog.indexType === "datetime" ? new Date(a.id) : Number(a.id); + const idB = selectedLog.indexType === "datetime" ? new Date(b.id) : Number(b.id); + return idA < idB ? -1 : idA > idB ? 1 : 0; + }); const indexCurve = selectedLog.indexCurve; + const idList = tableData.map((row) => String(row[indexCurve])); - return sortedItems.reduce((accumulator: IndexRange[], currentElement: any, currentIndex) => { - const currentId = currentElement["id"]; + return sortedItems.reduce((accumulator: IndexRange[], currentElement: CurveValueRow, currentIndex) => { const indexValue = String(currentElement[indexCurve]); if (accumulator.length === 0) { accumulator.push({ startIndex: indexValue, endIndex: indexValue }); } else { - const inSameRange = currentId - sortedItems[currentIndex - 1].id === 1; + const prevElement = sortedItems[currentIndex - 1]; + const inSameRange = idList.indexOf(prevElement.id) === idList.indexOf(currentElement.id) - 1; if (inSameRange) { accumulator[accumulator.length - 1].endIndex = indexValue; } else { diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/FluidsView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/FluidsView.tsx index d1ff69295..72132cf3b 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/FluidsView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/FluidsView.tsx @@ -120,9 +120,9 @@ export const FluidsView = (): React.ReactElement => { { property: "comments", label: "comments", type: ContentType.String } ]; - const fluidRows: FluidsRow[] = fluids.map((fluid, index) => { + const fluidRows: FluidsRow[] = fluids.map((fluid) => { return { - id: index, + id: fluid.uid, uid: fluid.uid, type: fluid.type, locationSample: fluid.locationSample, diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/FormationMarkersListView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/FormationMarkersListView.tsx index 4ae44b58b..a5c386186 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/FormationMarkersListView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/FormationMarkersListView.tsx @@ -38,9 +38,9 @@ export const FormationMarkersListView = (): React.ReactElement => { }; const getTableData = (): FormationMarkerRow[] => { - return formationMarkers.map((formationMarker, index) => { + return formationMarkers.map((formationMarker) => { return { - id: index, + id: formationMarker.uid, name: formationMarker.name, mdPrognosed: measureToString(formationMarker.mdPrognosed), tvdPrognosed: measureToString(formationMarker.tvdPrognosed), diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/LogsListView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/LogsListView.tsx index 6491efd55..09ee8662d 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/LogsListView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/LogsListView.tsx @@ -49,10 +49,10 @@ export const LogsListView = (): React.ReactElement => { }; const getTableData = (): LogObjectRow[] => { - return logs.map((log, index) => { + return logs.map((log) => { return { ...log, - id: index, + id: log.uid, startIndex: selectedWellbore && isTimeIndexed() ? formatDateString(log.startIndex, timeZone) : log.startIndex, endIndex: selectedWellbore && isTimeIndexed() ? formatDateString(log.endIndex, timeZone) : log.endIndex, dTimCreation: formatDateString(log.commonData.dTimCreation, timeZone), diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/MudLogView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/MudLogView.tsx index 0361be3f6..e3d82ff8b 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/MudLogView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/MudLogView.tsx @@ -91,9 +91,9 @@ export const MudLogView = (): React.ReactElement => { { property: "uid", label: "uid", type: ContentType.String } ]; - const geologyIntervalRows: GeologyIntervalRow[] = geologyIntervals.map((geologyInterval, index) => { + const geologyIntervalRows: GeologyIntervalRow[] = geologyIntervals.map((geologyInterval) => { return { - id: index, + id: geologyInterval.uid, typeLithology: geologyInterval.typeLithology, description: geologyInterval.description, mdTop: measureToString(geologyInterval.mdTop), @@ -109,9 +109,9 @@ export const MudLogView = (): React.ReactElement => { ecdTdAv: measureToString(geologyInterval.ecdTdAv), dxcAv: geologyInterval.dxcAv, uid: geologyInterval.uid, - inset: geologyInterval.lithologies.map((lithology, index) => { + inset: geologyInterval.lithologies.map((lithology) => { return { - id: index, + id: lithology.uid, type: lithology.type, codeLith: lithology.codeLith, lithPc: lithology.lithPc diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/MudLogsListView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/MudLogsListView.tsx index 30568dcef..bbb322280 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/MudLogsListView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/MudLogsListView.tsx @@ -47,9 +47,9 @@ export const MudLogsListView = (): React.ReactElement => { }; const getTableData = (): MudLogRow[] => { - return mudLogs.map((mudLog, index) => { + return mudLogs.map((mudLog) => { return { - id: index, + id: mudLog.uid, name: mudLog.name, mudLogCompany: mudLog.mudLogCompany, mudLogEngineers: mudLog.mudLogEngineers, diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/ObjectSearchListView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/ObjectSearchListView.tsx index 10196bf6e..0d1c08821 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/ObjectSearchListView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/ObjectSearchListView.tsx @@ -39,11 +39,11 @@ export const ObjectSearchListView = (): React.ReactElement => { setRows( selectedFilter.searchResults .filter((searchResult) => isSitecomSyntax(selectedFilter.name) || regex.test(searchResult.searchProperty)) // If we later want to filter away empty results, use regex.test(searchResult.searchProperty ?? "")) - .map((searchResult, index) => { + .map((searchResult) => { const well = wells?.find((w) => w.uid == searchResult.wellUid); const wellbore = well?.wellbores?.find((wb) => wb.uid == searchResult.wellboreUid); return { - id: index, + id: searchResult.uid, ...searchResult, [filterTypeToProperty[selectedFilter.filterType]]: searchResult.searchProperty, object: searchResult, diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/WellboreObjectTypesListView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/WellboreObjectTypesListView.tsx index 8c2d85a39..64409f524 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/WellboreObjectTypesListView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/WellboreObjectTypesListView.tsx @@ -8,7 +8,7 @@ import ObjectService from "../../services/objectService"; import { ContentTable, ContentTableColumn, ContentTableRow, ContentType } from "./table"; interface ObjectTypeRow extends ContentTableRow { - uid: number; + uid: string; name: string; objectType: ObjectType; } @@ -23,10 +23,10 @@ export const WellboreObjectTypesListView = (): React.ReactElement => { const getRows = (): ObjectTypeRow[] => { return Object.values(ObjectType) .filter((objectType) => selectedFilter.objectVisibilityStatus[objectType] == VisibilityStatus.Visible) - .map((objectType, index) => { + .map((objectType) => { return { - id: index, - uid: index, + id: objectType, + uid: objectType, name: pluralizeObjectType(objectType), objectType: objectType }; diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/tableParts.ts b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/tableParts.ts index 3f8b67cbc..2a7c00b05 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/tableParts.ts +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/tableParts.ts @@ -11,7 +11,7 @@ export interface ContentTableColumn { } export interface ContentTableRow { - id: number; + id: string; } export interface ContentTableProps { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenuUtils.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenuUtils.tsx index e04fcdeba..a2a7fcf16 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenuUtils.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenuUtils.tsx @@ -137,7 +137,7 @@ const displayDeleteModal = ( {toDeleteNames.map((name, index) => { return ( - +
{name} diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/GeologyIntervalPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/GeologyIntervalPropertiesModal.tsx index d2be60a1f..124cd8602 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/GeologyIntervalPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/GeologyIntervalPropertiesModal.tsx @@ -193,9 +193,9 @@ const GeologyIntervalPropertiesModal = (props: GeologyIntervalPropertiesModalInt variant={invalid.dxcAv ? "error" : undefined} onChange={(e: any) => setEditable({ ...editable, dxcAv: parseFloat(e.target.value) })} /> - {geologyInterval?.lithologies?.map((lithology, index) => { + {geologyInterval?.lithologies?.map((lithology) => { return ( - + Lithology {lithology.uid} setEditableLogCurveInfo({ ...editableLogCurveInfo, mnemonic: e.target.value })} /> - {logCurveInfo?.axisDefinitions?.map((axisDefinition, index) => { + {logCurveInfo?.axisDefinitions?.map((axisDefinition) => { return ( - + AxisDefinition {axisDefinition.uid} diff --git a/Src/WitsmlExplorer.Frontend/components/Nav.tsx b/Src/WitsmlExplorer.Frontend/components/Nav.tsx index c8d16c4c1..88390b892 100644 --- a/Src/WitsmlExplorer.Frontend/components/Nav.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Nav.tsx @@ -1,6 +1,7 @@ import { Breadcrumbs } from "@equinor/eds-core-react"; import React, { useContext, useEffect, useState } from "react"; import styled from "styled-components"; +import { v4 as uuid } from "uuid"; import { NavigationAction } from "../contexts/navigationAction"; import { SelectLogTypeAction, SelectObjectGroupAction, SelectServerAction, SelectWellAction, SelectWellboreAction } from "../contexts/navigationActions"; import NavigationContext, { NavigationState, Selectable, ViewFlags } from "../contexts/navigationContext"; @@ -51,7 +52,7 @@ const Nav = (): React.ReactElement => { {breadcrumbContent.map((breadCrumb, index: number) => ( { return ( <> {keys.length ? ( - keys.map((key: string, index: number) => ( - + keys.map((key: string) => ( + @@ -27,7 +26,6 @@ const PropertiesPanel = (props: PropertiesPanelProps): React.ReactElement => { {key}: @@ -36,10 +34,7 @@ const PropertiesPanel = (props: PropertiesPanelProps): React.ReactElement => { )) ) : ( - - {" "} - No Well Selected{" "} - + No Well Selected )} ); diff --git a/Src/WitsmlExplorer.Frontend/components/Sidebar/Sidebar.tsx b/Src/WitsmlExplorer.Frontend/components/Sidebar/Sidebar.tsx index b3514204d..21d85e6cf 100644 --- a/Src/WitsmlExplorer.Frontend/components/Sidebar/Sidebar.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Sidebar/Sidebar.tsx @@ -42,13 +42,13 @@ const Sidebar = (): React.ReactElement => { defaultEndIcon={
} expanded={expandedTreeNodes} > - {filteredWells.map((well: Well, index) => ( + {filteredWells.map((well: Well) => (
wellbore.isActive)} colors={colors} />
- + ))} From 71589ea585205113875c633e7719f26de7584ba0 Mon Sep 17 00:00:00 2001 From: Elias Bruvik Date: Fri, 6 Oct 2023 08:43:02 +0100 Subject: [PATCH 2/2] FIX-2055 review feedback --- .../components/ContentViews/CurveValuesView.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx index 0cca22b7c..bd463f95d 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx @@ -75,7 +75,7 @@ export const CurveValuesView = (): React.ReactElement => { }, [autoRefresh]); const getDeleteLogCurveValuesJob = useCallback( - (currentSelected: LogCurveInfoRow[], checkedContentItems: CurveValueRow[], selectedLog: LogObject) => { + (currentSelected: LogCurveInfoRow[], checkedContentItems: CurveValueRow[], selectedLog: LogObject, tableData: CurveValueRow[]) => { const indexRanges = getIndexRanges(checkedContentItems, tableData, selectedLog); const mnemonics = currentSelected.map((logCurveInfoRow) => logCurveInfoRow.mnemonic); @@ -107,12 +107,12 @@ export const CurveValuesView = (): React.ReactElement => { const onContextMenu = useCallback( (event: React.MouseEvent, _: CurveValueRow, checkedContentItems: CurveValueRow[]) => { - const deleteLogCurveValuesJob = getDeleteLogCurveValuesJob(selectedLogCurveInfo, checkedContentItems, selectedLog); + const deleteLogCurveValuesJob = getDeleteLogCurveValuesJob(selectedLogCurveInfo, checkedContentItems, selectedLog, tableData); const contextMenuProps = { deleteLogCurveValuesJob, dispatchOperation }; const position = getContextMenuPosition(event); dispatchOperation({ type: OperationType.DisplayContextMenu, payload: { component: , position } }); }, - [selectedLogCurveInfo, selectedLog, getDeleteLogCurveValuesJob, dispatchOperation, getContextMenuPosition] + [selectedLogCurveInfo, selectedLog, getDeleteLogCurveValuesJob, dispatchOperation, getContextMenuPosition, tableData] ); const updateColumns = (curveSpecifications: CurveSpecification[]) => {