From a49b05ebf785decfb3fa50ccb2d0b28356f174ba Mon Sep 17 00:00:00 2001 From: mheggelund Date: Mon, 12 Feb 2024 08:57:28 +0100 Subject: [PATCH] chore: variogram result img. --- .../models/GetVariogramResultsDto.ts | 31 +++++----- ...tVariogramResultsVariogramResultFileDto.ts | 5 +- src/components/ImageView/ImageView.tsx | 20 +++++++ .../CaseResultView/CaseResultView.styled.tsx | 1 + .../CaseResultView/CaseResultView.tsx | 10 +--- .../ImageResult/ImageResult.tsx | 59 +++++++++++++++++++ .../VariogramCaseResult.tsx | 8 +-- 7 files changed, 104 insertions(+), 30 deletions(-) create mode 100644 src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx diff --git a/src/api/generated/models/GetVariogramResultsDto.ts b/src/api/generated/models/GetVariogramResultsDto.ts index 68164d13..15124e29 100644 --- a/src/api/generated/models/GetVariogramResultsDto.ts +++ b/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 | 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 | null; + computeCaseId?: string; + variogramResultId: string; + identifier?: number; + variogramResultFiles: Array; + 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 | null; }; - diff --git a/src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts b/src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts index db67ee2d..64972954 100644 --- a/src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts +++ b/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; }; - diff --git a/src/components/ImageView/ImageView.tsx b/src/components/ImageView/ImageView.tsx index f40b0db4..bee0c726 100644 --- a/src/components/ImageView/ImageView.tsx +++ b/src/components/ImageView/ImageView.tsx @@ -10,6 +10,24 @@ 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(); + + // useEffect(() => { + // const res = _arrayBufferToBase64(img); + // setRes(res); + // }, [img]); + // console.log(res); + return ( {altText} @@ -17,3 +35,5 @@ export const ImageView = ({ ); }; + +// `data:image/png;base64,${img}` diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx index a168b607..a8f468c3 100644 --- a/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx +++ b/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%; `; diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx index a9b13417..9375e90e 100644 --- a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx +++ b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx @@ -5,10 +5,10 @@ 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, @@ -16,17 +16,14 @@ export const CaseResultView = ({ 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 ( @@ -42,7 +39,6 @@ export const CaseResultView = ({ {variogramResultList && ( )} {channelResultList && diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx new file mode 100644 index 00000000..bb801159 --- /dev/null +++ b/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(); + + // 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 ( + <> + + + ); +}; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.tsx index 99335ffb..8aa808e7 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.tsx +++ b/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) => ( - + ))}