From f30a7a5e589683c152fd63b2acffdf6ea2e7754a Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Mon, 19 Feb 2024 08:30:19 +0100
Subject: [PATCH] feat: Add image result view.

---
 .../models/GetVariogramResultsDto.ts          |  33 +++--
 .../ImageResult/ImageResult.styled.ts         |  18 +++
 .../ImageResult/ImageResult.tsx               |  48 +++---
 .../VariogramResultTable.styled.ts            |  15 ++
 .../VariogramResultTable.tsx                  | 139 ++++++++++++------
 5 files changed, 178 insertions(+), 75 deletions(-)
 create mode 100644 src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts

diff --git a/src/api/generated/models/GetVariogramResultsDto.ts b/src/api/generated/models/GetVariogramResultsDto.ts
index 5e75b16f..62d33e7d 100644
--- a/src/api/generated/models/GetVariogramResultsDto.ts
+++ b/src/api/generated/models/GetVariogramResultsDto.ts
@@ -7,20 +7,21 @@ import type { CoordinateDto } from './CoordinateDto';
 import type { GetVariogramResultsVariogramResultFileDto } from './GetVariogramResultsVariogramResultFileDto';
 
 export type GetVariogramResultsDto = {
-  computeCaseId: string;
-  variogramResultId: string;
-  identifier: number;
-  variogramResultFiles: Array<GetVariogramResultsVariogramResultFileDto>;
-  rmajor: number;
-  rminor: number;
-  azimuth: number;
-  rvertical: number;
-  sigma: number;
-  quality: number;
-  family?: string;
-  archelFilter?: string;
-  indicator?: string;
-  customIndicator?: string;
-  attribute?: string;
-  box: Array<CoordinateDto>;
+    computeCaseId: string;
+    variogramResultId: string;
+    identifier: number;
+    variogramResultFiles: Array<GetVariogramResultsVariogramResultFileDto>;
+    rmajor: number;
+    rminor: number;
+    azimuth: number;
+    rvertical: number;
+    sigma: number;
+    quality: number;
+    family: string;
+    archelFilter?: string | null;
+    indicator?: string | null;
+    customIndicator?: string | null;
+    attribute?: string | null;
+    box: Array<CoordinateDto>;
 };
+
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts
new file mode 100644
index 00000000..d93c9614
--- /dev/null
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts
@@ -0,0 +1,18 @@
+import { Dialog } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../../../../../tokens/spacings';
+
+export const StyledDialog = styled(Dialog)`
+  width: fit-content;
+  min-width: 500px;
+  min-height: 500px;
+`;
+
+export const Content = styled(Dialog.CustomContent)`
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.SMALL};
+`;
+
+export { StyledDialog as Dialog };
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx
index c1a71631..db552b8f 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx
@@ -1,33 +1,47 @@
+import { Button, Dialog } from '@equinor/eds-core-react';
 import { useQuery } from '@tanstack/react-query';
 import { getVariogramImage } from '../../../../../../api/custom/getImageById';
-import { GetVariogramResultsVariogramResultFileDto } from '../../../../../../api/generated';
 import { ImageView } from '../../../../../../components/ImageView/ImageView';
+import * as Styled from './ImageResult.styled';
 
 export const ImageResult = ({
-  resultFiels,
+  imageId,
+  open,
+  setOpen,
 }: {
-  resultFiels: GetVariogramResultsVariogramResultFileDto[];
+  imageId: string;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const wantedResultFile = resultFiels.find((x) =>
-    x.fileName.includes('variogram_slices_'),
-  );
-
-  const imageId = wantedResultFile
-    ? wantedResultFile.variogramResultFileId
-    : '';
-
-  const { data } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ['case-image', imageId],
     queryFn: () => getVariogramImage(imageId),
+    enabled: open,
   });
 
   return (
     <>
-      <ImageView
-        text="Case results"
-        img={data ? data : ''}
-        altText="Case results"
-      ></ImageView>
+      <Styled.Dialog open={open} isDismissable={true}>
+        <Dialog.Header>
+          <Dialog.Title>Result image</Dialog.Title>
+        </Dialog.Header>
+        <Styled.Content>
+          {isLoading && <>Loading ...</>}
+          {data && (
+            <ImageView
+              text="Case results"
+              img={data ? data : ''}
+              altText="Case results"
+            ></ImageView>
+          )}
+        </Styled.Content>
+
+        <Dialog.Actions>
+          <Button variant="ghost" onClick={() => setOpen(!open)}>
+            Cancel
+          </Button>
+        </Dialog.Actions>
+      </Styled.Dialog>
     </>
   );
 };
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts
index d3d635ad..26ebc4ff 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts
@@ -1,3 +1,4 @@
+import { Dialog } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../../../../../tokens/spacings';
 
@@ -24,3 +25,17 @@ export const Table = styled.div`
     }
   }
 `;
+
+export const StyledDialog = styled(Dialog)`
+  min-width: 500px;
+  min-height: 500px;
+`;
+
+export const Content = styled(Dialog.CustomContent)`
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.SMALL};
+`;
+
+export { StyledDialog as Dialog };
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx
index 706a60a3..c98a17a7 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx
@@ -1,10 +1,14 @@
 /* eslint-disable max-lines-per-function */
+import { Typography } from '@equinor/eds-core-react';
 import { EdsDataGrid } from '@equinor/eds-data-grid-react';
+import { useState } from 'react';
 import { GetVariogramResultsDto } from '../../../../../../api/generated';
 import { useFetchCases } from '../../../../../../hooks/useFetchCases';
+import { ImageResult } from '../ImageResult/ImageResult';
 import * as Styled from './VariogramResultTable.styled';
 
 interface ResultObjectType {
+  computeCaseId: string;
   method: string;
   parameter: string;
   archelFilter: string;
@@ -20,6 +24,9 @@ export const VariogramResultTable = ({
 }: {
   resultList: GetVariogramResultsDto[];
 }) => {
+  const [open, setOpen] = useState(false);
+  const [imageId, setImageId] = useState('');
+
   const caseList = useFetchCases();
   const roundResultString = (value: number) => {
     if (value) {
@@ -45,6 +52,7 @@ export const VariogramResultTable = ({
     )[0].modelArea.name;
 
     const element: ResultObjectType = {
+      computeCaseId: e.computeCaseId,
       method: method ? method : '',
       parameter: parameter,
       archelFilter: e.archelFilter ? e.archelFilter : '',
@@ -57,48 +65,95 @@ export const VariogramResultTable = ({
     return element;
   });
 
+  const handleImageDialog = (id: string) => {
+    const resultRow = resultList.find((e) => e.computeCaseId === id);
+    const resultFile = resultRow?.variogramResultFiles.find((x) =>
+      x.fileName.includes('variogram_slices_'),
+    );
+
+    const imageId = resultFile ? resultFile.variogramResultFileId : '';
+    setImageId(imageId);
+    setOpen(!open);
+  };
+
   return (
-    <Styled.Table>
-      <EdsDataGrid
-        enableSorting
-        enablePagination
-        emptyMessage="No results to show"
-        columnResizeMode="onChange"
-        rows={resultElementsList}
-        pageSize={50}
-        columns={[
-          {
-            accessorKey: 'method',
-            header: 'Compute method',
-            id: 'method',
-          },
-          {
-            accessorKey: 'parameter',
-            header: 'Parameter',
-            id: 'parameter',
-          },
-          {
-            accessorKey: 'archelFilter',
-            header: 'Archel Filter',
-            id: 'archelFilter',
-          },
-          {
-            accessorKey: 'modelArea',
-            header: 'Archel Filter',
-            id: 'modelArea',
-          },
-          {
-            accessorKey: 'variogramModel',
-            header: 'Variogram model',
-            id: 'variogramModel',
-          },
-          {
-            accessorKey: 'quality',
-            header: 'Variogram model',
-            id: 'quality',
-          },
-        ]}
-      />
-    </Styled.Table>
+    <>
+      <Styled.Table>
+        <EdsDataGrid
+          enableSorting
+          enablePagination
+          emptyMessage="No results to show"
+          columnResizeMode="onChange"
+          rows={resultElementsList}
+          pageSize={50}
+          columns={[
+            {
+              accessorKey: 'method',
+              header: 'Compute method',
+              id: 'method',
+            },
+            {
+              accessorKey: 'parameter',
+              header: 'Parameter',
+              id: 'parameter',
+            },
+            {
+              accessorKey: 'archelFilter',
+              header: 'Archel Filter',
+              id: 'archelFilter',
+            },
+            {
+              accessorKey: 'modelArea',
+              header: 'Archel Filter',
+              id: 'modelArea',
+            },
+            {
+              accessorKey: 'variogramModel',
+              header: 'Variogram model',
+              id: 'variogramModel',
+              cell: ({ row }) => (
+                <div>
+                  <Typography
+                    onClick={() =>
+                      handleImageDialog(row.original.computeCaseId)
+                    }
+                    link
+                  >
+                    {row.original.variogramModel}
+                  </Typography>
+                </div>
+              ),
+            },
+            {
+              accessorKey: 'quality',
+              header: 'Quality factor',
+              id: 'quality',
+            },
+            // {
+            //   accessorKey: 'img',
+            //   header: 'Image',
+            //   id: 'img',
+            //   cell: ({ row }) => (
+            //     <div>
+            //       <Button
+            //         variant="outlined"
+            //         onClick={() =>
+            //           handleImageDialog(row.original.computeCaseId)
+            //         }
+            //       >
+            //         View image
+            //       </Button>
+            //     </div>
+            //   ),
+            // },
+          ]}
+        />
+      </Styled.Table>
+      <ImageResult
+        imageId={imageId}
+        open={open}
+        setOpen={setOpen}
+      ></ImageResult>
+    </>
   );
 };