Add check and warning if model area has linked results.

src/components/AreaCoordinates/AreaCoordinates.styled.tsx

@@ -1,6 +1,7 @@
-import { Dialog } from '@equinor/eds-core-react';
+import { Banner, Dialog } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../tokens/spacings';
+import { theme } from '../../tokens/theme';
 
 export const StyledDialog = styled(Dialog)`
   width: fit-content;
@@ -47,6 +48,13 @@ export const CoordinateInputs = styled.div`
   column-gap: ${spacings.MEDIUM};
 `;
 
+export const Warning = styled(Banner)`
+  div {
+    background-color: ${theme.light.info.warning};
+    max-width: 450px;
+  }
+`;
+
 export const Buttons = styled.div`
   display: flex;
   flex-direction: row;

src/components/AreaCoordinates/AreaCoordinates.tsx

@@ -4,9 +4,8 @@
 import {
   Autocomplete,
   AutocompleteChanges,
+  Banner,
   Button,
-  Dialog,
-  Snackbar,
   Typography,
 } from '@equinor/eds-core-react';
 import { useState } from 'react';
@@ -22,12 +21,13 @@ import { useFetchModelAreas } from '../../hooks/useFetchModelAreas';
 import { useMutateAreaCoordinates } from '../../hooks/useMutateAreaCoordinates';
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 import { ImageView } from '../ImageView/ImageView';
+import * as Styled from './AreaCoordinates.styled';
+import { CoordinateInput } from './CoordinateInput/CoordinateInput';
 import {
   CoordinateErrorType,
   validateCoordinates,
-} from './AreaCoordinates.hooks';
-import * as Styled from './AreaCoordinates.styled';
-import { CoordinateInput } from './CoordinateInput/CoordinateInput';
+} from './hooks/AreaCoordinates.hooks';
+import { useModelResults } from './hooks/useModelResults';
 
 export type AreaCoordinateType = {
   modelAreaId: string;
@@ -57,13 +57,10 @@ const defaultArea: ModelAreaTypeDto = {
 };
 
 export const AreaCoordinates = ({
-  open,
-  toggleOpen,
+  setSaveAlert,
 }: {
-  open: boolean;
-  toggleOpen: () => void;
+  setSaveAlert: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const [showSaveAlert, setSaveAlert] = useState(false);
   const [activeArea, setActiveArea] = useState<ModelAreaTypeDto>(defaultArea);
   const [newArea, setNewArea] = useState<ModelAreaTypeDto>();
   const [errors, setErrors] = useState<CoordinateErrorType>({});
@@ -84,15 +81,11 @@ export const AreaCoordinates = ({
     ],
   });
   const { modelId } = useParams();
-
   const { data, isLoading } = useFetchModel(modelId);
+  const { activeAreaResultList } = useModelResults(activeArea.name);
   const modelAreas = useFetchModelAreas();
   const mutateAreaCoordinates = useMutateAreaCoordinates();
 
-  function clearStatus() {
-    setSaveAlert(false);
-  }
-
   const handleSelectChange = async (
     changes: AutocompleteChanges<ModelAreaTypeDto>,
   ) => {
@@ -251,125 +244,111 @@ export const AreaCoordinates = ({
     setEdit(!edit);
   };
 
-  const handleCloseDialog = () => {
-    setActiveArea(defaultArea);
-    toggleOpen();
-  };
-
   if (modelAreas.isLoading || modelAreas.data === undefined || isLoading)
     return <p>Loading.....</p>;
 
   return (
     <>
-      <Styled.Dialog open={open}>
-        <Dialog.Header>
-          <Dialog.Title>Manage model areas for {data?.data.name}</Dialog.Title>
-        </Dialog.Header>
-        <Styled.Content>
-          <Styled.ContentSplitter>
-            <Styled.Selects>
-              <Styled.CoordinateGroup className={'autocomplete-error'}>
-                <Autocomplete
-                  className={errors?.area && 'autocomplete-error'}
-                  label={'Select area'}
-                  options={modelAreas.data.data}
-                  optionLabel={(option) => option.name}
-                  onOptionsChange={handleSelectChange}
-                  selectedOptions={[activeArea]}
-                  variant={errors.area ? 'error' : undefined}
-                ></Autocomplete>
+      <Styled.ContentSplitter>
+        <Styled.Selects>
+          <Styled.CoordinateGroup className={'autocomplete-error'}>
+            <Autocomplete
+              className={errors?.area && 'autocomplete-error'}
+              label={'Select area'}
+              options={modelAreas.data.data}
+              optionLabel={(option) => option.name}
+              onOptionsChange={handleSelectChange}
+              selectedOptions={[activeArea]}
+              variant={errors.area ? 'error' : undefined}
+            ></Autocomplete>
+          </Styled.CoordinateGroup>
+
+          {activeArea.modelAreaTypeId !== '' && (
+            <Styled.CoordinateFields>
+              <Styled.CoordinateGroup>
+                <Typography variant="h6">Top Left Corner</Typography>
+                <Styled.CoordinateInputs>
+                  <CoordinateInput
+                    label="X start"
+                    error={errors.x0 ? true : false}
+                    areaCoordinate={areaCoordinate}
+                    setCoordinates={setCoordinates}
+                    position={0}
+                    axis="x"
+                    edit={edit}
+                  />
+                  <CoordinateInput
+                    label="Y start"
+                    error={errors.y0 ? true : false}
+                    areaCoordinate={areaCoordinate}
+                    setCoordinates={setCoordinates}
+                    position={0}
+                    axis="y"
+                    edit={edit}
+                  />
+                </Styled.CoordinateInputs>
               </Styled.CoordinateGroup>
-
-              {activeArea.modelAreaTypeId !== '' && (
-                <Styled.CoordinateFields>
-                  <Styled.CoordinateGroup>
-                    <Typography variant="h6">Top Left Corner</Typography>
-                    <Styled.CoordinateInputs>
-                      <CoordinateInput
-                        label="X start"
-                        error={errors.x0 ? true : false}
-                        areaCoordinate={areaCoordinate}
-                        setCoordinates={setCoordinates}
-                        position={0}
-                        axis="x"
-                        edit={edit}
-                      />
-                      <CoordinateInput
-                        label="Y start"
-                        error={errors.y0 ? true : false}
-                        areaCoordinate={areaCoordinate}
-                        setCoordinates={setCoordinates}
-                        position={0}
-                        axis="y"
-                        edit={edit}
-                      />
-                    </Styled.CoordinateInputs>
-                  </Styled.CoordinateGroup>
-                  <Styled.CoordinateGroup>
-                    <Typography variant="h6">Bottom Right Corner </Typography>
-                    <Styled.CoordinateInputs>
-                      <CoordinateInput
-                        label="X end"
-                        error={errors.x1 ? true : false}
-                        areaCoordinate={areaCoordinate}
-                        setCoordinates={setCoordinates}
-                        position={1}
-                        axis="x"
-                        edit={edit}
-                      />
-                      <CoordinateInput
-                        label="Y end"
-                        error={errors.y1 ? true : false}
-                        areaCoordinate={areaCoordinate}
-                        setCoordinates={setCoordinates}
-                        position={1}
-                        axis="y"
-                        edit={edit}
-                      />
-                    </Styled.CoordinateInputs>
-
-                    {errors && <ErrorMessage errors={errors}></ErrorMessage>}
-                  </Styled.CoordinateGroup>
-
-                  <Styled.Buttons>
-                    {edit ? (
-                      <>
-                        <Button onClick={handleSubmit}>Save coordinates</Button>
-                        <Button variant="outlined" onClick={handleEditChange}>
-                          Cancel
-                        </Button>
-                      </>
-                    ) : (
-                      <Button variant="outlined" onClick={handleEditChange}>
-                        Edit coordinates
-                      </Button>
-                    )}
-                  </Styled.Buttons>
-                </Styled.CoordinateFields>
-              )}
-            </Styled.Selects>
-
-            <ImageView
-              text="Model placeholder image"
-              img={Img}
-              altText="Model placeholder image"
-            />
-          </Styled.ContentSplitter>
-        </Styled.Content>
-
-        <Dialog.Actions>
-          <Button variant="outlined" onClick={handleCloseDialog}>
-            Close
-          </Button>
-        </Dialog.Actions>
-      </Styled.Dialog>
-      <Snackbar
-        open={!!showSaveAlert}
-        autoHideDuration={3000}
-        onClose={clearStatus}
-      >
-        {'Area coordinate saved'}
-      </Snackbar>
+              <Styled.CoordinateGroup>
+                <Typography variant="h6">Bottom Right Corner </Typography>
+                <Styled.CoordinateInputs>
+                  <CoordinateInput
+                    label="X end"
+                    error={errors.x1 ? true : false}
+                    areaCoordinate={areaCoordinate}
+                    setCoordinates={setCoordinates}
+                    position={1}
+                    axis="x"
+                    edit={edit}
+                  />
+                  <CoordinateInput
+                    label="Y end"
+                    error={errors.y1 ? true : false}
+                    areaCoordinate={areaCoordinate}
+                    setCoordinates={setCoordinates}
+                    position={1}
+                    axis="y"
+                    edit={edit}
+                  />
+                </Styled.CoordinateInputs>
+
+                {errors && <ErrorMessage errors={errors}></ErrorMessage>}
+              </Styled.CoordinateGroup>
+              {activeAreaResultList &&
+                activeAreaResultList?.length > 0 &&
+                edit && (
+                  <Styled.Warning elevation="none">
+                    <Banner.Message>
+                      IMPORTANT - this model area has one or more results in
+                      object or variogram cases. Changing the coordinates will
+                      discard any associated result.
+                    </Banner.Message>
+                  </Styled.Warning>
+                )}
+
+              <Styled.Buttons>
+                {edit ? (
+                  <>
+                    <Button onClick={handleSubmit}>Save coordinates</Button>
+                    <Button variant="outlined" onClick={handleEditChange}>
+                      Cancel
+                    </Button>
+                  </>
+                ) : (
+                  <Button variant="outlined" onClick={handleEditChange}>
+                    Edit coordinates
+                  </Button>
+                )}
+              </Styled.Buttons>
+            </Styled.CoordinateFields>
+          )}
+        </Styled.Selects>
+
+        <ImageView
+          text="Model placeholder image"
+          img={Img}
+          altText="Model placeholder image"
+        />
+      </Styled.ContentSplitter>
     </>
   );
 };

src/components/AreaCoordinates/CoordinatesDialog/CoordinatesDialog.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable max-lines */
+/* eslint-disable max-lines-per-function */
+
+import { Button, Dialog, Snackbar } from '@equinor/eds-core-react';
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { CoordinateDto } from '../../../api/generated';
+import { useFetchModel } from '../../../hooks/useFetchModel';
+import { useFetchModelAreas } from '../../../hooks/useFetchModelAreas';
+import { AreaCoordinates } from '../AreaCoordinates';
+import * as Styled from '../AreaCoordinates.styled';
+
+export type AreaCoordinateType = {
+  modelAreaId: string;
+  coordinates: CoordinateDto[];
+};
+
+export const CoordinatesDialog = ({
+  open,
+  toggleOpen,
+}: {
+  open: boolean;
+  toggleOpen: () => void;
+}) => {
+  const [showSaveAlert, setSaveAlert] = useState(false);
+
+  const { modelId } = useParams();
+
+  const { data, isLoading } = useFetchModel(modelId);
+  const modelAreas = useFetchModelAreas();
+
+  function clearStatus() {
+    setSaveAlert(false);
+  }
+
+  const handleCloseDialog = () => {
+    toggleOpen();
+  };
+
+  if (modelAreas.isLoading || modelAreas.data === undefined || isLoading)
+    return <p>Loading.....</p>;
+
+  return (
+    <>
+      <Styled.Dialog open={open}>
+        <Dialog.Header>
+          <Dialog.Title>Manage model areas for {data?.data.name}</Dialog.Title>
+        </Dialog.Header>
+        <Styled.Content>
+          <AreaCoordinates setSaveAlert={setSaveAlert}></AreaCoordinates>
+        </Styled.Content>
+
+        <Dialog.Actions>
+          <Button variant="outlined" onClick={handleCloseDialog}>
+            Close
+          </Button>
+        </Dialog.Actions>
+      </Styled.Dialog>
+      <Snackbar
+        open={!!showSaveAlert}
+        autoHideDuration={3000}
+        onClose={clearStatus}
+      >
+        {'Area coordinate saved'}
+      </Snackbar>
+    </>
+  );
+};

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

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines-per-function */
-import { ModelAreaTypeDto } from '../../api/generated';
-import { AreaCoordinateType } from './AreaCoordinates';
+import { ModelAreaTypeDto } from '../../../api/generated';
+import { AreaCoordinateType } from '../AreaCoordinates';
 
 export type CoordinateErrorType = {
   area?: string;