Refactor/set coordinates (#241)

* refactor: Adapted set area coordinates layout and logick. * fix: Set active area as default on close. * Add check and warning if model area has linked results.
equinor · Feb 21, 2024 · 5d1172a · 5d1172a
1 parent ecd0c6e
commit 5d1172a
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 103 deletions.
diff --git a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx
@@ -1,15 +1,38 @@
-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)`
-  min-width: 500px;
-  min-height: 500px;
+  width: fit-content;
+`;
+
+export const ContentSplitter = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${spacings.XXX_LARGE};
+`;
+
+export const Selects = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.XXX_LARGE};
+
+  min-width: 450px;
+`;
+
+export const CoordinateFields = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.LARGE};
 `;
 
 export const Content = styled(Dialog.CustomContent)`
   display: flex;
   flex-direction: column;
+  justify-content: start;
 
   row-gap: ${spacings.SMALL};
 `;
@@ -25,4 +48,17 @@ 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;
+  column-gap: ${spacings.MEDIUM};
+`;
+
 export { StyledDialog as Dialog };
diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/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';
@@ -16,16 +15,19 @@ import {
   CoordinateDto,
   ModelAreaTypeDto,
 } from '../../api/generated';
+import Img from '../../features/ModelView/image.png';
 import { useFetchModel } from '../../hooks/useFetchModel';
 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;
@@ -55,16 +57,14 @@ 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>({});
+  const [edit, setEdit] = useState<boolean>(false);
   const [areaCoordinate, setAreaCoordinate] = useState<AreaCoordinateType>({
     modelAreaId: '',
     coordinates: [
@@ -81,18 +81,15 @@ 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>,
   ) => {
+    setEdit(false);
     setErrors({});
 
     // If area dropdown is set to empty:
@@ -171,8 +168,7 @@ export const AreaCoordinates = ({
   };
 
   const clearAndUpdate = async () => {
-    setActiveArea(defaultArea);
-    setAreaCoordinate(defaultState);
+    setEdit(false);
     return 'success';
   };
 
@@ -244,21 +240,17 @@ export const AreaCoordinates = ({
     }
   };
 
+  const handleEditChange = () => {
+    setEdit(!edit);
+  };
+
   if (modelAreas.isLoading || modelAreas.data === undefined || isLoading)
     return <p>Loading.....</p>;
 
   return (
     <>
-      <Styled.Dialog open={open}>
-        <Dialog.Header>
-          <Dialog.Title>Model Areas</Dialog.Title>
-        </Dialog.Header>
-        <Styled.Content>
-          <Typography variant="body_long">
-            Select from predefined model areas and set the X/Y coordinates for
-            each area.
-          </Typography>
-
+      <Styled.ContentSplitter>
+        <Styled.Selects>
           <Styled.CoordinateGroup className={'autocomplete-error'}>
             <Autocomplete
               className={errors?.area && 'autocomplete-error'}
@@ -271,70 +263,92 @@ export const AreaCoordinates = ({
             ></Autocomplete>
           </Styled.CoordinateGroup>
 
-          <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"
-                activeArea={activeArea}
-              />
-              <CoordinateInput
-                label="Y start"
-                error={errors.y0 ? true : false}
-                areaCoordinate={areaCoordinate}
-                setCoordinates={setCoordinates}
-                position={0}
-                axis="y"
-                activeArea={activeArea}
-              />
-            </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"
-                activeArea={activeArea}
-              />
-              <CoordinateInput
-                label="Y end"
-                error={errors.y1 ? true : false}
-                areaCoordinate={areaCoordinate}
-                setCoordinates={setCoordinates}
-                position={1}
-                axis="y"
-                activeArea={activeArea}
-              />
-            </Styled.CoordinateInputs>
+          {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.Content>
+                {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>
 
-        <Dialog.Actions>
-          <Button onClick={handleSubmit}>Save</Button>
-          <Button variant="ghost" onClick={toggleOpen}>
-            Cancel
-          </Button>
-        </Dialog.Actions>
-      </Styled.Dialog>
-      <Snackbar
-        open={!!showSaveAlert}
-        autoHideDuration={3000}
-        onClose={clearStatus}
-      >
-        {'Saved model area'}
-      </Snackbar>
+        <ImageView
+          text="Model placeholder image"
+          img={Img}
+          altText="Model placeholder image"
+        />
+      </Styled.ContentSplitter>
     </>
   );
 };
diff --git a/src/components/AreaCoordinates/CoordinateInput/CoordinateInput.tsx b/src/components/AreaCoordinates/CoordinateInput/CoordinateInput.tsx
@@ -1,6 +1,5 @@
 import { Icon, Input, Label } from '@equinor/eds-core-react';
 import { error_filled as ERROR_FILLED } from '@equinor/eds-icons';
-import { ModelAreaTypeDto } from '../../../api/generated';
 import { AreaCoordinateType } from '../AreaCoordinates';
 
 export const CoordinateInput = ({
@@ -10,15 +9,15 @@ export const CoordinateInput = ({
   setCoordinates,
   position,
   axis,
-  activeArea,
+  edit,
 }: {
   label: string;
   error: boolean;
   areaCoordinate: AreaCoordinateType | undefined;
   setCoordinates: (value: string, index: number, axis: string) => void;
   position: number;
   axis: string;
-  activeArea: ModelAreaTypeDto;
+  edit: boolean;
 }) => {
   return (
     <div>
@@ -40,7 +39,7 @@ export const CoordinateInput = ({
           )
         }
         variant={error ? 'error' : undefined}
-        disabled={activeArea?.modelAreaTypeId === ''}
+        disabled={!edit}
       />
     </div>
   );