Merge pull request #2067 from eliasbruvik/FIX-2055

FIX-2055 use index as key for rows in ContentTable
equinor · Oct 6, 2023 · 69e7e95 · 69e7e95
2 parents 2d2d8a9 + 71589ea
commit 69e7e95
Show file tree

Hide file tree

Showing 16 changed files with 49 additions and 48 deletions.
diff --git 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
@@ -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, tableData: CurveValueRow[]) => {
+      const indexRanges = getIndexRanges(checkedContentItems, tableData, selectedLog);
       const mnemonics = currentSelected.map((logCurveInfoRow) => logCurveInfoRow.mnemonic);
 
       const deleteLogCurveValuesJob: DeleteLogCurveValuesJob = {
@@ -107,12 +107,12 @@ export const CurveValuesView = (): React.ReactElement => {
 
   const onContextMenu = useCallback(
     (event: React.MouseEvent<HTMLDivElement>, _: 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: <MnemonicsContextMenu {...contextMenuProps} />, position } });
     },
-    [selectedLogCurveInfo, selectedLog, getDeleteLogCurveValuesJob, dispatchOperation, getContextMenuPosition]
+    [selectedLogCurveInfo, selectedLog, getDeleteLogCurveValuesJob, dispatchOperation, getContextMenuPosition, tableData]
   );
 
   const updateColumns = (curveSpecifications: CurveSpecification[]) => {
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -137,7 +137,7 @@ const displayDeleteModal = (
             <strong>
               {toDeleteNames.map((name, index) => {
                 return (
-                  <Fragment key={index}>
+                  <Fragment key={`${name}-${index}`}>
                     <br />
                     {name}
                   </Fragment>

diff --git 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 (
-                  <React.Fragment key={index}>
+                  <React.Fragment key={lithology.uid}>
                     <Typography style={{ paddingTop: "0.5rem" }}>Lithology {lithology.uid}</Typography>
                     <Autocomplete
                       id="type"

diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoPropertiesModal.tsx
@@ -56,9 +56,9 @@ const LogCurveInfoPropertiesModal = (props: LogCurveInfoPropertiesModalProps): R
                 inputProps={{ minLength: 1, maxLength: 64 }}
                 onChange={(e) => setEditableLogCurveInfo({ ...editableLogCurveInfo, mnemonic: e.target.value })}
               />
-              {logCurveInfo?.axisDefinitions?.map((axisDefinition, index) => {
+              {logCurveInfo?.axisDefinitions?.map((axisDefinition) => {
                 return (
-                  <React.Fragment key={index}>
+                  <React.Fragment key={axisDefinition.uid}>
                     <Typography style={{ paddingTop: "0.5rem" }}>AxisDefinition {axisDefinition.uid}</Typography>
                     <TextField disabled fullWidth id="order" label="order" defaultValue={axisDefinition.order ?? ""} />
                     <TextField disabled fullWidth id="count" label="count" defaultValue={axisDefinition.count ?? ""} />

diff --git 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 => {
           <StyledBreadcrumbs color="inherit" aria-label="breadcrumb">
             {breadcrumbContent.map((breadCrumb, index: number) => (
               <Breadcrumbs.Breadcrumb
-                key={index}
+                key={uuid()}
                 href="#"
                 onClick={breadCrumb.onClick}
                 style={{

diff --git a/Src/WitsmlExplorer.Frontend/components/PropertiesPanel.tsx b/Src/WitsmlExplorer.Frontend/components/PropertiesPanel.tsx
@@ -16,18 +16,16 @@ const PropertiesPanel = (props: PropertiesPanelProps): React.ReactElement => {
   return (
     <>
       {keys.length ? (
-        keys.map((key: string, index: number) => (
-          <React.Fragment key={index}>
+        keys.map((key: string) => (
+          <React.Fragment key={key}>
             <Typography
-              key={key}
               token={{ color: colors.text.staticPropertyKey, fontSize: "0.75rem", fontFamily: "Equinor" }}
               style={{ paddingRight: "0.5rem", maxWidth: 100, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
             >
               {" "}
               {key}:
             </Typography>
             <Typography
-              key={properties.get(key)}
               token={{ fontSize: "0.875rem", color: colors.text.staticPropertyValue, fontFamily: "EquinorMedium", fontWeight: 400 }}
               style={{ paddingRight: "1.5rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
             >
@@ -36,10 +34,7 @@ const PropertiesPanel = (props: PropertiesPanelProps): React.ReactElement => {
           </React.Fragment>
         ))
       ) : (
-        <Typography key={"noWellSelected"} token={{ fontFamily: "Equinor", fontStyle: "italic", fontSize: "0.875rem", color: colors.infographic.primaryMossGreen }}>
-          {" "}
-          No Well Selected{" "}
-        </Typography>
+        <Typography token={{ fontFamily: "Equinor", fontStyle: "italic", fontSize: "0.875rem", color: colors.infographic.primaryMossGreen }}> No Well Selected </Typography>
       )}
     </>
   );

diff --git 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={<div style={{ width: 24 }} />}
                 expanded={expandedTreeNodes}
               >
-                {filteredWells.map((well: Well, index) => (
+                {filteredWells.map((well: Well) => (
                   <React.Fragment key={well.uid}>
                     <div style={WellListing}>
                       <WellItem well={well} />
                       <WellIndicator compactMode={isCompactMode} active={well.wellbores.some((wellbore: Wellbore) => wellbore.isActive)} colors={colors} />
                     </div>
-                    <Divider style={{ margin: "0px", backgroundColor: colors.interactive.disabledBorder }} key={index} />
+                    <Divider style={{ margin: "0px", backgroundColor: colors.interactive.disabledBorder }} />
                   </React.Fragment>
                 ))}
               </TreeView>