Chore/refarctor variogram result tanstack table

src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx

@@ -8,7 +8,7 @@ import {
   GetVariogramResultsDto,
 } from '../../../../api/generated';
 import { ChannelResult } from './ObjectCaseResult/ChannelResult';
-import { VariogramResultTable } from './VariogramCaseResult/VariogramResultTable/VariogramResultTable';
+import { TanStackTable } from './VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable';
 
 export const CaseResultView = ({
   channelResultList,
@@ -26,9 +26,7 @@ export const CaseResultView = ({
       <Typography variant="h2">{type} results</Typography>
       <Styled.CaseResultList>
         {variogramResultList && (
-          <VariogramResultTable
-            resultList={variogramResultList}
-          ></VariogramResultTable>
+          <TanStackTable resultList={variogramResultList}></TanStackTable>
         )}
         {channelResultList &&
           channelResultList.map((obj) => (

src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx

@@ -1,33 +1,208 @@
-import { Button, Dialog, Typography } from '@equinor/eds-core-react';
+/* eslint-disable max-lines-per-function */
+import { Button, Dialog, Tabs } from '@equinor/eds-core-react';
 import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 import { getVariogramImage } from '../../../../../../api/custom/getImageById';
+import { GetVariogramResultsVariogramResultFileDto } from '../../../../../../api/generated';
 import * as Styled from './ImageResult.styled';
 
 export const ImageResult = ({
-  imageId,
   open,
   setOpen,
+  resultImages,
 }: {
-  imageId: string;
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  resultImages: GetVariogramResultsVariogramResultFileDto[];
 }) => {
-  const { data, isLoading } = useQuery({
-    queryKey: ['case-image', imageId],
-    queryFn: () => getVariogramImage(imageId),
-    enabled: open,
+  const [activeTab, setActiveTab] = useState(0);
+  const handleChange = (index: number) => {
+    setActiveTab(index);
+  };
+
+  const variogramSlices =
+    resultImages &&
+    resultImages.find((x) => x.fileName.includes('variogram_slices_'));
+  const variogramSlicesImageId =
+    variogramSlices && variogramSlices.variogramResultFileId;
+
+  const loadedVariogramSlicesImage = useQuery({
+    queryKey: ['case-image', variogramSlicesImageId],
+    queryFn: () => getVariogramImage(variogramSlicesImageId as string),
+    enabled: !!variogramSlicesImageId,
+  });
+
+  const sphericalImage =
+    resultImages && resultImages.find((x) => x.fileName.includes('spherical-'));
+  const sphericalImageId =
+    sphericalImage && sphericalImage.variogramResultFileId;
+
+  const loadedSphericalImage = useQuery({
+    queryKey: ['case-image', sphericalImageId],
+    queryFn: () => getVariogramImage(sphericalImageId as string),
+    enabled: !!sphericalImageId,
+  });
+
+  const gaussianImage =
+    resultImages && resultImages.find((x) => x.fileName.includes('gaussian'));
+  const gaussianImageId = gaussianImage && gaussianImage.variogramResultFileId;
+  const loadedGaussianImage = useQuery({
+    queryKey: ['case-image', gaussianImageId],
+    queryFn: () => getVariogramImage(gaussianImageId as string),
+    enabled: !!gaussianImageId,
+  });
+
+  const generalExponentialImage =
+    resultImages &&
+    resultImages.find((x) => x.fileName.includes('general_exponential'));
+  const generalExponentialImageId =
+    generalExponentialImage && generalExponentialImage.variogramResultFileId;
+  const loadedGeneralExponentialImage = useQuery({
+    queryKey: ['case-image', generalExponentialImageId],
+    queryFn: () => getVariogramImage(generalExponentialImageId as string),
+    enabled: !!generalExponentialImageId,
+  });
+
+  const exponentialImage =
+    resultImages &&
+    resultImages.find((x) => x.fileName.includes('-exponential'));
+  const exponentialImageId =
+    exponentialImage && exponentialImage.variogramResultFileId;
+  const loadedExponentialImage = useQuery({
+    queryKey: ['case-image', exponentialImageId],
+    queryFn: () => getVariogramImage(exponentialImageId as string),
+    enabled: !!exponentialImageId,
   });
 
   return (
     <Styled.Dialog open={open} isDismissable>
       <Styled.Content>
-        {isLoading && <>Loading ...</>}
-        {data && (
-          <Styled.ImageWrapper>
-            <img className="image" alt="Case results" src={data ? data : ''} />
-            <Typography variant="h5">Case results</Typography>
-          </Styled.ImageWrapper>
-        )}
+        <Tabs activeTab={activeTab} onChange={handleChange}>
+          <Tabs.List>
+            <Tabs.Tab>Variogram slice</Tabs.Tab>
+            {/* {resultRows
+              .map((r) => r.variogramModel)
+              .filter((value, index, self) => self.indexOf(value) === index)
+              .map((uniqe) => {
+                console.log(uniqe);
+
+                return <Tabs.Tab key={uniqe}>{uniqe}</Tabs.Tab>;
+              })} */}
+            <Tabs.Tab>Spherical</Tabs.Tab>
+            <Tabs.Tab>Gaussian</Tabs.Tab>
+            <Tabs.Tab>General Exponential</Tabs.Tab>
+            <Tabs.Tab>Exponential</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panels>
+            <Tabs.Panel>
+              {loadedVariogramSlicesImage.isLoading && <>Loading ...</>}
+
+              {loadedVariogramSlicesImage.data && (
+                <Styled.ImageWrapper>
+                  <img
+                    className="image"
+                    alt="Case results"
+                    src={
+                      loadedVariogramSlicesImage.data
+                        ? loadedVariogramSlicesImage.data
+                        : ''
+                    }
+                  />
+                </Styled.ImageWrapper>
+              )}
+            </Tabs.Panel>
+            <Tabs.Panel>
+              {loadedSphericalImage && loadedSphericalImage.data ? (
+                <>
+                  {loadedSphericalImage.isLoading && <>Loading ...</>}
+                  {loadedSphericalImage.data && (
+                    <Styled.ImageWrapper>
+                      <img
+                        className="image"
+                        alt="Spherical"
+                        src={
+                          loadedSphericalImage.data
+                            ? loadedSphericalImage.data
+                            : ''
+                        }
+                      />
+                    </Styled.ImageWrapper>
+                  )}
+                </>
+              ) : (
+                <>No Spherical</>
+              )}
+            </Tabs.Panel>
+            <Tabs.Panel>
+              {loadedGaussianImage && loadedGaussianImage.data ? (
+                <>
+                  {loadedGaussianImage.isLoading && <>Loading ...</>}
+                  {loadedGaussianImage.data && (
+                    <Styled.ImageWrapper>
+                      <img
+                        className="image"
+                        alt="Gaussian"
+                        src={
+                          loadedGaussianImage.data
+                            ? loadedGaussianImage.data
+                            : ''
+                        }
+                      />
+                    </Styled.ImageWrapper>
+                  )}
+                </>
+              ) : (
+                <>No Gaussian</>
+              )}
+            </Tabs.Panel>
+
+            <Tabs.Panel>
+              {loadedGeneralExponentialImage &&
+              loadedGeneralExponentialImage.data ? (
+                <>
+                  {loadedGeneralExponentialImage.isLoading && <>Loading ...</>}
+                  {loadedGeneralExponentialImage.data && (
+                    <Styled.ImageWrapper>
+                      <img
+                        className="image"
+                        alt="General Exponential"
+                        src={
+                          loadedGeneralExponentialImage.data
+                            ? loadedGeneralExponentialImage.data
+                            : ''
+                        }
+                      />
+                    </Styled.ImageWrapper>
+                  )}
+                </>
+              ) : (
+                <>No General Exponential</>
+              )}
+            </Tabs.Panel>
+            <Tabs.Panel>
+              {loadedExponentialImage && loadedExponentialImage.data ? (
+                <>
+                  {loadedExponentialImage.isLoading && <>Loading ...</>}
+                  {loadedExponentialImage.data && (
+                    <Styled.ImageWrapper>
+                      <img
+                        className="image"
+                        alt="Exponential"
+                        src={
+                          loadedExponentialImage.data
+                            ? loadedExponentialImage.data
+                            : ''
+                        }
+                      />
+                    </Styled.ImageWrapper>
+                  )}
+                </>
+              ) : (
+                <>No General Exponential</>
+              )}
+            </Tabs.Panel>
+          </Tabs.Panels>
+        </Tabs>
       </Styled.Content>
 
       <Dialog.Actions>

src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../../../../tokens/spacings';
+
+export const SubRowDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.LARGE};
+  padding: ${spacings.X_LARGE} ${spacings.XXXX_LARGE};
+
+  width: 100%;
+`;
+
+export const SubRowInfo = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  width: 100%;
+`;
+
+export const TableList = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.LARGE};
+  width: 100%;
+`;

src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable max-lines-per-function */
+import { Button, Icon, Typography } from '@equinor/eds-core-react';
+import { bar_chart as barChart } from '@equinor/eds-icons';
+import { useState } from 'react';
+import {
+  GetVariogramResultsDto,
+  GetVariogramResultsVariogramResultFileDto,
+} from '../../../../../../../api/generated';
+import { ImageResult } from '../../ImageResult/ImageResult';
+import { ResultObjectType } from '../TanStackTable/TanStackTable';
+import * as Styled from './SubRowResult.styled';
+import { SubRowResultItem } from './SubRowResultItem';
+
+export const SubRowResult = ({
+  resultRows,
+  resultList,
+}: {
+  resultRows: ResultObjectType[];
+  resultList: GetVariogramResultsDto[];
+}) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [resultImages, setResultImages] = useState<
+    GetVariogramResultsVariogramResultFileDto[]
+  >([]);
+
+  const handleImageDialog = () => {
+    const resultFiles: Array<GetVariogramResultsVariogramResultFileDto> = [];
+    resultRows.forEach((row) =>
+      row.variogramResultFiles.forEach((file) => {
+        const values = resultFiles.map((a) => a.fileName);
+        const has = values.find((str) => str === file.fileName);
+
+        if (!has) resultFiles.push(file);
+      }),
+    );
+
+    if (resultFiles && resultFiles.length > 0) setResultImages(resultFiles);
+    setOpen(!open);
+  };
+  return (
+    <>
+      <Styled.SubRowDiv>
+        <Styled.SubRowInfo>
+          <Typography>Variogram model details</Typography>
+          <Button variant="outlined" onClick={handleImageDialog}>
+            <Icon data={barChart} title={'Open plot for case results.'} />
+            Show plot
+          </Button>
+        </Styled.SubRowInfo>
+        <Styled.TableList>
+          <SubRowResultItem resultList={resultRows}></SubRowResultItem>
+        </Styled.TableList>
+      </Styled.SubRowDiv>
+      <ImageResult
+        resultImages={resultImages}
+        open={open}
+        setOpen={setOpen}
+      ></ImageResult>
+    </>
+  );
+};

src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts

@@ -0,0 +1,14 @@
+import { Table } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../../../../../../tokens/spacings';
+
+export const HeaderContent = styled(Table.Row)`
+  height: ${spacings.MEDIUM};
+`;
+export const TableWrapper = styled.div`
+  width: 100%;
+  > table {
+    width: 100%;
+    border: 1px solid #dcdcdc;
+  }
+`;

src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx

@@ -0,0 +1,46 @@
+import { Table } from '@equinor/eds-core-react';
+import { roundResultString } from '../../../../../../../utils/RoundResultString';
+import { ResultObjectType } from '../TanStackTable/TanStackTable';
+import * as Styled from './SubRowResultItem.styled';
+export const SubRowResultItem = ({
+  resultList,
+}: {
+  resultList: ResultObjectType[];
+}) => {
+  return (
+    <Styled.TableWrapper>
+      <Table>
+        <Table.Head>
+          <Styled.HeaderContent>
+            <Table.Cell>Variogram model</Table.Cell>
+            <Table.Cell>Range major (m)</Table.Cell>
+            <Table.Cell>Range minor (m)</Table.Cell>
+            <Table.Cell>Azimuth (deg)</Table.Cell>
+            <Table.Cell>Range vertical (m)</Table.Cell>
+            <Table.Cell>SILL/STD (m)</Table.Cell>
+            <Table.Cell>X/Y/Z quality factor</Table.Cell>
+          </Styled.HeaderContent>
+        </Table.Head>
+        <Table.Body>
+          {resultList.map((resultItem) => (
+            <Table.Row key={resultItem.computeCaseId + resultItem.quality}>
+              <Table.Cell>{resultItem.variogramModel}</Table.Cell>
+              <Table.Cell>{resultItem.rmajor}</Table.Cell>
+              <Table.Cell>{resultItem.rminor}</Table.Cell>
+              <Table.Cell>{resultItem.azimuth}</Table.Cell>
+              <Table.Cell>{resultItem.rvertical}</Table.Cell>
+              <Table.Cell>{resultItem.sigma}</Table.Cell>
+              <Table.Cell>
+                <div>
+                  {roundResultString(resultItem.qualityX, 2)} {' / '}
+                  {roundResultString(resultItem.qualityY, 2)} {' / '}
+                  {roundResultString(resultItem.qualityZ, 2)}
+                </div>
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </Styled.TableWrapper>
+  );
+};