chore: variogram result img.

src/api/generated/models/GetVariogramResultsDto.ts

@@ -7,20 +7,19 @@ import type { CoordinateDto } from './CoordinateDto';
 import type { GetVariogramResultsVariogramResultFileDto } from './GetVariogramResultsVariogramResultFileDto';
 
 export type GetVariogramResultsDto = {
-    computeCaseId?: string;
-    variogramResultId?: string;
-    identifier?: number;
-    variogramResultFiles?: Array<GetVariogramResultsVariogramResultFileDto> | null;
-    rmajor?: number;
-    rminor?: number;
-    azimuth?: number;
-    rvertical?: number;
-    sigma?: number;
-    quality?: number;
-    family?: string | null;
-    archelFilter?: string | null;
-    indicator?: string | null;
-    attribute?: string | null;
-    box?: Array<CoordinateDto> | null;
+  computeCaseId?: string;
+  variogramResultId: string;
+  identifier?: number;
+  variogramResultFiles: Array<GetVariogramResultsVariogramResultFileDto>;
+  rmajor?: number;
+  rminor?: number;
+  azimuth?: number;
+  rvertical?: number;
+  sigma?: number;
+  quality?: number;
+  family?: string | null;
+  archelFilter?: string | null;
+  indicator?: string | null;
+  attribute?: string | null;
+  box?: Array<CoordinateDto> | null;
 };
-

src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts

@@ -4,7 +4,6 @@
 /* eslint-disable */
 
 export type GetVariogramResultsVariogramResultFileDto = {
-    fileName?: string | null;
-    variogramResultFileId?: string | null;
+  fileName: string;
+  variogramResultFileId: string;
 };
-

src/components/ImageView/ImageView.tsx

@@ -10,10 +10,30 @@ export const ImageView = ({
   img: string;
   altText: string;
 }) => {
+  // function _arrayBufferToBase64(buffer: any) {
+  //   let binary = '';
+  //   const bytes = new Uint8Array(buffer);
+  //   const len = bytes.byteLength;
+  //   for (let i = 0; i < len; i++) {
+  //     binary += String.fromCharCode(bytes[i]);
+  //   }
+  //   return window.btoa(binary);
+  // }
+
+  // const [res, setRes] = useState<string>();
+
+  // useEffect(() => {
+  //   const res = _arrayBufferToBase64(img);
+  //   setRes(res);
+  // }, [img]);
+  // console.log(res);
+
   return (
     <Styled.ImageWrapper>
       <img className="image" alt={altText} src={img} />
       <Typography variant="h5">{text}</Typography>
     </Styled.ImageWrapper>
   );
 };
+
+// `data:image/png;base64,${img}`

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

@@ -17,6 +17,7 @@ export const CaseResultView = styled.div`
 export const CaseResultList = styled.div`
   display: flex;
   flex-direction: column;
+  row-gap: ${spacings.X_LARGE};
 
   width: 100%;
 `;

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

@@ -5,28 +5,25 @@ import { Typography } from '@equinor/eds-core-react';
 import {
   ComputeCaseDto,
   GetChannelResultsDto,
+  GetVariogramResultsDto,
 } from '../../../../api/generated';
 import { ChannelResult } from './ObjectCaseResult/ChannelResult';
 import { VariogramCaseResult } from './VariogramCaseResult/VariogramCaseResult';
-import ResultIMG from './vargrest_output-0-_variogram_slices_.png';
 
 export const CaseResultView = ({
   channelResultList,
   variogramResultList,
   computeCases,
 }: {
   channelResultList?: GetChannelResultsDto[];
-  variogramResultList?: GetChannelResultsDto[];
+  variogramResultList?: GetVariogramResultsDto[];
   computeCases?: ComputeCaseDto[];
 }) => {
   const channelType =
     channelResultList !== undefined && channelResultList[0].type
       ? channelResultList[0].type
       : '';
-  const variogramType =
-    variogramResultList !== undefined && variogramResultList[0].type
-      ? variogramResultList[0].type
-      : '';
+  const variogramType = variogramResultList !== undefined ? 'Variogram' : '';
 
   return (
     <Styled.CaseResultView>
@@ -42,7 +39,6 @@ export const CaseResultView = ({
         {variogramResultList && (
           <VariogramCaseResult
             resultList={variogramResultList}
-            img={ResultIMG}
           ></VariogramCaseResult>
         )}
         {channelResultList &&

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

@@ -0,0 +1,59 @@
+import { useQuery } from '@tanstack/react-query';
+import { ImageView } from '../../../../../../components/ImageView/ImageView';
+
+import { useMsal } from '@azure/msal-react';
+import {
+  GetVariogramResultsVariogramResultFileDto,
+  ImagesService,
+} from '../../../../../../api/generated';
+import { useAccessToken } from '../../../../../../hooks/useAccessToken';
+
+export const ImageResult = ({
+  resultFiels,
+}: {
+  resultFiels: GetVariogramResultsVariogramResultFileDto[];
+}) => {
+  const { instance, accounts } = useMsal();
+  const token = useAccessToken(instance, accounts[0]);
+
+  const wantedResultFile = resultFiels.find((x) =>
+    x.fileName.includes('variogram_slices_'),
+  );
+
+  const imageId = wantedResultFile
+    ? wantedResultFile.variogramResultFileId
+    : '';
+
+  const { data } = useQuery({
+    queryKey: ['model-cases', imageId],
+    queryFn: () => ImagesService.getApiImagesVariogram(imageId),
+    enabled: !!token,
+    refetchInterval: 30000,
+  });
+
+  //   const [dataUri, setDataUri] = useState<Blob>();
+
+  //   useEffect(() => {
+  //     function dataURItoBlob(dataURI: any) {
+  //       const byteString = atob(dataURI.split(',')[1]);
+  //       const ab = new ArrayBuffer(byteString.length);
+  //       const ia = new Uint8Array(ab);
+  //       for (let i = 0; i < byteString.length; i++) {
+  //         ia[i] = byteString.charCodeAt(i);
+  //       }
+  //       const bb = new Blob([ab]);
+  //       setDataUri(bb);
+  //     }
+
+  //     dataURItoBlob(data);
+  //   }, [data, isLoading]);
+
+  //   console.log(data);
+  //   console.log(dataUri);
+
+  return (
+    <>
+      <ImageView text="run" img={data} altText="run"></ImageView>
+    </>
+  );
+};

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

@@ -1,25 +1,25 @@
 import { GetVariogramResultsDto } from '../../../../../api/generated';
 import { CaseCardComponent } from '../../../../../components/CaseCardComponent/CaseCardComponent';
-import { ImageView } from '../../../../../components/ImageView/ImageView';
+import { ImageResult } from './ImageResult/ImageResult';
 import * as Styled from './VariogramCaseResult.styled';
 import { VariogramResultTable } from './VariogramResultTable';
 
 export const VariogramCaseResult = ({
   resultList,
-  img,
 }: {
   resultList: GetVariogramResultsDto[];
-  img: string;
 }) => {
+  console.log(resultList);
+
   return (
     <>
       {resultList.map((item) => (
         <CaseCardComponent key={item.variogramResultId} title="Variogram">
           <Styled.CaseResultCard>
-            <ImageView text="run" img={img} altText="run"></ImageView>
             <Styled.CaseLeftDiv>
               <VariogramResultTable data={item}></VariogramResultTable>
             </Styled.CaseLeftDiv>
+            <ImageResult resultFiels={item.variogramResultFiles}></ImageResult>
           </Styled.CaseResultCard>
         </CaseCardComponent>
       ))}