Feat/fix global state bugs (#370)

* chore: Pulling main

* chore: WIP

* fix: Fixed missing empty check. Moved analogue model to its own useEffect

src/components/AreaCoordinates/AreaCoordinates.tsx

@@ -10,7 +10,6 @@ import {
 } from '@equinor/eds-core-react';
 import { cloneDeep } from 'lodash';
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
 import {
   AddAnalogueModelAreaCommandForm,
   CoordinateDto,
@@ -84,8 +83,13 @@ export const AreaCoordinates = ({
   });
   const [fallbackAreaCoordinate, setfallbackAreaCoordinate] =
     useState<AreaCoordinateType>();
-  const { modelId } = useParams();
-  const { analogueModel, modelAreaTypes, computeCases } = usePepmContextStore();
+  const {
+    analogueModel,
+    modelAreaTypes,
+    computeCases,
+    addAnalogueModelArea,
+    updateAnalogueModelArea,
+  } = usePepmContextStore();
   const { activeAreaResultList } = useModelResults(
     activeArea.name,
     computeCases,
@@ -107,13 +111,9 @@ export const AreaCoordinates = ({
       return;
     }
 
-    const selectableAreas =
-      analogueModel.modelAreas && analogueModel.modelAreas;
-
-    const selectedArea = selectableAreas?.filter(
+    const selectedArea = analogueModel.modelAreas?.filter(
       (area) => area.modelAreaType === changes.selectedItems[0].name,
     );
-
     // Area has no previous coordinates set
     //    Initialize
     if (selectedArea?.length === 0) {
@@ -200,7 +200,7 @@ export const AreaCoordinates = ({
   };
 
   const postModelArea = async () => {
-    if (modelId) {
+    if (analogueModel.analogueModelId) {
       if (activeArea && areaCoordinate) {
         const postRequestBody: AddAnalogueModelAreaCommandForm = {
           modelAreaTypeId: activeArea.modelAreaTypeId,
@@ -209,11 +209,12 @@ export const AreaCoordinates = ({
 
         const coordinateRes =
           await mutateAreaCoordinates.postAreaCoordinates.mutateAsync({
-            id: modelId,
+            id: analogueModel.analogueModelId,
             requestBody: postRequestBody,
           });
 
         if (coordinateRes.success) {
+          addAnalogueModelArea(coordinateRes.data);
           const res = await clearAndUpdate();
           if (res === 'success') setSaveAlert(true);
         }
@@ -222,14 +223,15 @@ export const AreaCoordinates = ({
   };
 
   const putModelArea = async () => {
-    if (modelId) {
+    if (analogueModel.analogueModelId) {
       const coordinateRes =
         await mutateAreaCoordinates.putAreaCoordinates.mutateAsync({
-          id: modelId,
+          id: analogueModel.analogueModelId,
           modelAreaId: areaCoordinate.modelAreaId,
           requestBody: { coordinates: areaCoordinate.coordinates },
         });
       if (coordinateRes.success) {
+        updateAnalogueModelArea(coordinateRes.data);
         const res = await clearAndUpdate();
         if (res === 'success') setSaveAlert(true);
       }
@@ -375,11 +377,7 @@ export const AreaCoordinates = ({
           )}
         {analogueModel.analogueModelId &&
           analogueModel.analogueModelImage?.analogueModelImageId && (
-            <AnalogueModelImageView
-              modelId={analogueModel.analogueModelId}
-              imageId={analogueModel.analogueModelImage?.analogueModelImageId}
-              coordinateBox={areaCoordinate}
-            />
+            <AnalogueModelImageView coordinateBox={areaCoordinate} />
           )}
       </Styled.ContentSplitter>
     </>

src/components/AreaCoordinates/hooks/AreaCoordinates.hooks.ts

@@ -22,16 +22,16 @@ export const validateCoordinates = async (
     errors.area = 'You must select a model area';
   }
 
-  if (area && area.coordinates[0].x > area.coordinates[1].x) {
+  if (area && area.coordinates[0].x > +area.coordinates[1].x) {
     errors.x0 = 'X start cannot be greater than X end.';
   }
-  if (area && area.coordinates[0].y > area.coordinates[1].y) {
+  if (area && area.coordinates[0].y > +area.coordinates[1].y) {
     errors.y0 = 'Y start cannot be greater than Y end.';
   }
-  if (area && area.coordinates[0].x === area.coordinates[1].x) {
+  if (area && area.coordinates[0].x === +area.coordinates[1].x) {
     errors.x0 = "X start/end coordinates can't be equal.";
   }
-  if (area && area.coordinates[0].y === area.coordinates[1].y) {
+  if (area && area.coordinates[0].y === +area.coordinates[1].y) {
     errors.y0 = "Y start/end coordinates can't be equal.";
   }
   if (area && NotANumber(area.coordinates[0].x)) {

src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx

@@ -53,7 +53,8 @@ export const GrossDepositionEnviromentGroup = ({
   ) => Promise<DeleteGeologicalGroupCommandResponse | undefined>;
 }) => {
   const isOwnerOrAdmin = useIsOwnerOrAdmin();
-  const { analogueModel } = usePepmContextStore();
+  const { analogueModel, addAnalogueModelGde, deleteAnalogueModelGde } =
+    usePepmContextStore();
   const [showGdeDialog, setShowGdeDialog] = useState<boolean>(false);
   const [gdeObject, setGdeObject] = useState<GdeType>(defaultGdeData);
   const [errors, setErrors] = useState<GDEErrorType>({});
@@ -62,6 +63,11 @@ export const GrossDepositionEnviromentGroup = ({
     setShowGdeDialog(!showGdeDialog);
   };
 
+  const handleGdeDelete = async (id: string) => {
+    const res = await deleteGdeRow(id);
+    if (res?.success) deleteAnalogueModelGde(id);
+  };
+
   const postGdeRow = useMutation({
     mutationFn: ({
       id,
@@ -112,6 +118,7 @@ export const GrossDepositionEnviromentGroup = ({
         requestBody: postRequestBody,
       });
       if (rowUpload.success) {
+        addAnalogueModelGde(rowUpload.data);
         setGdeObject(defaultGdeData);
         handleGdeDialog();
       }
@@ -143,7 +150,7 @@ export const GrossDepositionEnviromentGroup = ({
                     {isOwnerOrAdmin && (
                       <Button
                         variant="ghost_icon"
-                        onClick={() => deleteGdeRow(row.geologicalGroupId)}
+                        onClick={() => handleGdeDelete(row.geologicalGroupId)}
                       >
                         <Icon
                           data={deleteIcon}

src/components/ImageView/AnalogueModelImageView.tsx

@@ -1,35 +1,25 @@
 import { Typography } from '@equinor/eds-core-react';
-import { getAnalogueModelImage } from '../../api/custom/getAnalogueModelImageById';
-import { useQuery } from '@tanstack/react-query';
-import { useFetchImageMetadata } from '../../hooks/useFetchImageMetadata';
 import { AreaCoordinateType } from '../AreaCoordinates/AreaCoordinates';
 import { ModelImageCanvas } from './ModelImageCanvas/ModelImageCanvas';
 import { CanvasWrapper } from './AnalogueModelImageView.styled';
+import { usePepmContextStore } from '../../hooks/GlobalState';
 
 export const AnalogueModelImageView = ({
-  modelId,
-  imageId,
   coordinateBox,
 }: {
-  modelId: string;
-  imageId: string;
   coordinateBox: AreaCoordinateType;
 }) => {
-  const { data, isLoading } = useQuery({
-    queryKey: ['analogue-model-image', modelId, imageId],
-    queryFn: () => getAnalogueModelImage(modelId, imageId),
-  });
-
-  const imageMetadata = useFetchImageMetadata(imageId);
+  const { analogueModelImageURL, analogueModelImageMetadata } =
+    usePepmContextStore();
 
   return (
     <>
-      {isLoading && <Typography>Loading ...</Typography>}
-      {data && imageMetadata.data?.data && (
+      {!analogueModelImageURL && <Typography>Loading ...</Typography>}
+      {analogueModelImageURL && analogueModelImageMetadata && (
         <CanvasWrapper>
           <ModelImageCanvas
-            imageData={data}
-            imageMetadata={imageMetadata.data?.data}
+            imageData={analogueModelImageURL}
+            imageMetadata={analogueModelImageMetadata}
             coordinateBox={coordinateBox}
             showLegend={true}
             showCoordinates={true}

src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx

@@ -42,7 +42,8 @@ export const OutcropAnalogueGroup = ({
   modelIdParent?: string;
 }) => {
   const isOwnerOrAdmin = useIsOwnerOrAdmin();
-  const { analogueModel } = usePepmContextStore();
+  const { analogueModel, addAnalogueModelOutcrop, deleteAnalogueModelOutcrop } =
+    usePepmContextStore();
   const [showOutcropDialog, setShowOutcropDialog] = useState<boolean>(false);
   const [errors, setErrors] = useState<OutcropErrorType>({});
   const [outcropObject, setOutcropObject] =
@@ -78,7 +79,10 @@ export const OutcropAnalogueGroup = ({
         id: id,
         requestBody: postRequestBody,
       });
-      if (rowUpload.success) handleOutcropDialog();
+      if (rowUpload.success) {
+        handleOutcropDialog();
+        addAnalogueModelOutcrop(rowUpload.data);
+      }
     }
   };
 
@@ -88,6 +92,7 @@ export const OutcropAnalogueGroup = ({
       id: id,
       outcropId: stratigraphicGroupId,
     });
+    if (res.success) deleteAnalogueModelOutcrop(stratigraphicGroupId);
     return res;
   };
 
@@ -132,7 +137,8 @@ export const OutcropAnalogueGroup = ({
                 <Table.Cell>
                   <Styled.StratColCell>{row.name}</Styled.StratColCell>
                 </Table.Cell>
-                {row.region.locations.length !== 0 ? (
+                {row.region?.locations &&
+                row.region?.locations?.length !== 0 ? (
                   <>
                     <Table.Cell>{row.region.locations[0].country}</Table.Cell>
                     <Table.Cell>
@@ -145,7 +151,7 @@ export const OutcropAnalogueGroup = ({
                     <Table.Cell></Table.Cell>
                   </>
                 )}
-                <Table.Cell>{row.region.name}</Table.Cell>
+                <Table.Cell>{row.region?.name}</Table.Cell>
                 <Table.Cell>
                   <Styled.StratColCell>
                     {row.basins?.map((item) => item)}
@@ -173,7 +179,6 @@ export const OutcropAnalogueGroup = ({
         <Dialog.CustomContent>
           <OutcropSelect
             outcropObject={outcropObject}
-            outcropGroup={analogueModel.outcrops}
             setOutcropObject={setOutcropObject}
             error={errors}
           />

src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx

@@ -11,27 +11,24 @@ import { usePepmContextStore } from '../../../hooks/GlobalState';
 
 export const OutcropSelect = ({
   outcropObject,
-  outcropGroup,
   error,
   setOutcropObject,
 }: {
   outcropObject: OutcropType;
-  outcropGroup: OutcropDto[];
   error: OutcropErrorType;
   setOutcropObject: React.Dispatch<React.SetStateAction<OutcropType>>;
 }) => {
-  const { outcrops } = usePepmContextStore();
+  const { outcrops, analogueModel } = usePepmContextStore();
   const oc: OutcropDto[] = [...outcrops];
 
   if (outcrops.length === 0) return <p>Loading .....</p>;
 
   const filterDisabled = (option: OutcropDto) => {
-    const caseExists = outcropGroup.filter(
+    const caseExists = analogueModel.outcrops.filter(
       (outcrop) => outcrop.outcropId === option.outcropId,
     );
     return caseExists.length > 0;
   };
-
   return (
     <StyledDialog.AutocompleteList>
       <Autocomplete
@@ -64,8 +61,8 @@ export const OutcropSelect = ({
         variant={error.Analogue ? 'error' : undefined}
         helperText={error.Analogue ? error.Analogue : undefined}
       />
-
-      {outcropObject.region?.locations.length !== 0 ? (
+      {outcropObject.region?.locations &&
+      outcropObject.region?.locations?.length !== 0 ? (
         <>
           <Autocomplete
             label="Country"
@@ -89,12 +86,12 @@ export const OutcropSelect = ({
             selectedOptions={[outcropObject.region?.locations[0].locationName]}
             initialSelectedOptions={
               outcropObject.region
-                ? [outcropObject.region.locations[0].locationName]
+                ? [outcropObject.region?.locations[0].locationName]
                 : ['']
             }
             options={
               outcropObject.region !== undefined
-                ? [outcropObject.region.locations[0].locationName]
+                ? [outcropObject.region?.locations[0].locationName]
                 : ['']
             }
             noOptionsText="No options"

src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx

@@ -64,7 +64,11 @@ export const StratigrapicGroups = ({
   ) => Promise<DeleteStratigraphicGroupCommandResponse | undefined>;
 }) => {
   const isOwnerOrAdmin = useIsOwnerOrAdmin();
-  const { analogueModel } = usePepmContextStore();
+  const {
+    analogueModel,
+    addAnalogueModelStratGroup,
+    deleteAnalogueModelStratGroup,
+  } = usePepmContextStore();
   const [stratColumnObject, setStratColumnObject] = useState<StratColumnType>(
     defaultStratColumnData,
   );
@@ -76,7 +80,8 @@ export const StratigrapicGroups = ({
   };
 
   const deleteRow = async (id: string) => {
-    await deleteStratColRow(id);
+    const res = await deleteStratColRow(id);
+    if (res?.success) deleteAnalogueModelStratGroup(id);
   };
 
   const postSmdaMetadataRow = useMutation({
@@ -135,7 +140,10 @@ export const StratigrapicGroups = ({
         id: id,
         requestBody: postRequestBody,
       });
-      if (rowUpload.success) handleStratColDialog();
+      if (rowUpload.success) {
+        handleStratColDialog();
+        addAnalogueModelStratGroup(rowUpload.data);
+      }
     }
   };
 

src/features/Compute/CaseGroup/CaseRow/hooks/useModelArea.tsx

@@ -21,7 +21,6 @@ export const useModelArea = (allCasesList: ComputeCaseDto[]) => {
     analogueModel !== analogueModelDefault && analogueModel.modelAreas
       ? analogueModel.modelAreas.concat(wholeModelObject)
       : wholeModelObject;
-
   const selectedRowArea = useCallback(
     (rowId: string) => {
       const rowCase = allCasesList.filter((c) => c.computeCaseId === rowId);