From aa8ecfce0ae9bbed21f6d66092435fed50c650c8 Mon Sep 17 00:00:00 2001 From: Wilhelm Vold Date: Tue, 13 Feb 2024 08:53:42 +0100 Subject: [PATCH] fix: added custom axios call to retreive image from api --- src/api/custom/getImageById.ts | 21 +++++++++++ .../generated/models/GetChannelResultsDto.ts | 18 +++++----- .../models/GetChannelResultsFileDto.ts | 4 +-- .../models/GetVariogramResultsDto.ts | 31 ++++++++-------- ...tVariogramResultsVariogramResultFileDto.ts | 5 +-- src/api/generated/services/ImagesService.ts | 4 +-- .../ImageResult/ImageResult.tsx | 35 ++++--------------- 7 files changed, 60 insertions(+), 58 deletions(-) create mode 100644 src/api/custom/getImageById.ts diff --git a/src/api/custom/getImageById.ts b/src/api/custom/getImageById.ts new file mode 100644 index 00000000..3c29d281 --- /dev/null +++ b/src/api/custom/getImageById.ts @@ -0,0 +1,21 @@ +import axios from 'axios'; +import { OpenAPI } from '../generated'; + +export const getVariogramImage = async (imageId: string): Promise => { + const token = OpenAPI.TOKEN; // replace with your bearer token + const base = OpenAPI.BASE; + + try { + const response = await axios.get(`/api/images/variogram/${imageId}`, { + headers: { Authorization: `Bearer ${token}` }, + responseType: 'blob', // response type of blob to handle images + baseURL: base, + }); + + // create an object URL for the image blob and return it + return URL.createObjectURL(response.data); + } catch (error) { + console.error(`Error fetching image: ${error}`); + throw error; // re-throw the error so it can be handled by the caller + } +}; diff --git a/src/api/generated/models/GetChannelResultsDto.ts b/src/api/generated/models/GetChannelResultsDto.ts index 531f1c35..f3179715 100644 --- a/src/api/generated/models/GetChannelResultsDto.ts +++ b/src/api/generated/models/GetChannelResultsDto.ts @@ -10,14 +10,14 @@ import type { CoordinateDto } from './CoordinateDto'; import type { GetChannelResultsFileDto } from './GetChannelResultsFileDto'; export type GetChannelResultsDto = { - channelResultId?: string; - computeCaseId?: string; - type?: ComputeType; - channelResultFiles?: Array | null; - segmentWidth?: ChannelEstimationResultDto; - channelWidth?: ChannelEstimationResultDto; - segmentHeight?: ChannelEstimationResultDto; - channelHeight?: ChannelHeightDto; - box?: Array | null; + channelResultId: string; + computeCaseId: string; + type: ComputeType; + channelResultFiles: Array; + segmentWidth: ChannelEstimationResultDto; + channelWidth: ChannelEstimationResultDto; + segmentHeight: ChannelEstimationResultDto; + channelHeight: ChannelHeightDto; + box: Array; }; diff --git a/src/api/generated/models/GetChannelResultsFileDto.ts b/src/api/generated/models/GetChannelResultsFileDto.ts index ee7ce48f..120f2551 100644 --- a/src/api/generated/models/GetChannelResultsFileDto.ts +++ b/src/api/generated/models/GetChannelResultsFileDto.ts @@ -4,7 +4,7 @@ /* eslint-disable */ export type GetChannelResultsFileDto = { - fileName?: string | null; - channelResultFileId?: string | null; + fileName: string; + channelResultFileId: string; }; diff --git a/src/api/generated/models/GetVariogramResultsDto.ts b/src/api/generated/models/GetVariogramResultsDto.ts index 15124e29..c588d6b4 100644 --- a/src/api/generated/models/GetVariogramResultsDto.ts +++ b/src/api/generated/models/GetVariogramResultsDto.ts @@ -7,19 +7,20 @@ import type { CoordinateDto } from './CoordinateDto'; import type { GetVariogramResultsVariogramResultFileDto } from './GetVariogramResultsVariogramResultFileDto'; export type GetVariogramResultsDto = { - 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; + 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; }; + diff --git a/src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts b/src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts index 64972954..7427b27c 100644 --- a/src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts +++ b/src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts @@ -4,6 +4,7 @@ /* eslint-disable */ export type GetVariogramResultsVariogramResultFileDto = { - fileName: string; - variogramResultFileId: string; + fileName: string; + variogramResultFileId: string; }; + diff --git a/src/api/generated/services/ImagesService.ts b/src/api/generated/services/ImagesService.ts index 467bcc4e..461e58a4 100644 --- a/src/api/generated/services/ImagesService.ts +++ b/src/api/generated/services/ImagesService.ts @@ -10,12 +10,12 @@ export class ImagesService { /** * @param imageId - * @returns any Success + * @returns binary Success * @throws ApiError */ public static getApiImagesVariogram( imageId: string, - ): CancelablePromise { + ): CancelablePromise { return __request(OpenAPI, { method: 'GET', url: '/api/images/variogram/{imageId}', diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx index bb801159..2e3afaa7 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx @@ -1,12 +1,11 @@ import { useQuery } from '@tanstack/react-query'; -import { ImageView } from '../../../../../../components/ImageView/ImageView'; +// import { ImageView } from '../../../../../../components/ImageView/ImageView'; import { useMsal } from '@azure/msal-react'; -import { - GetVariogramResultsVariogramResultFileDto, - ImagesService, -} from '../../../../../../api/generated'; +import { GetVariogramResultsVariogramResultFileDto } from '../../../../../../api/generated'; import { useAccessToken } from '../../../../../../hooks/useAccessToken'; +import { getVariogramImage } from '../../../../../../api/custom/getImageById'; +// import { ImageView } from '../../../../../../components/ImageView/ImageView'; export const ImageResult = ({ resultFiels, @@ -15,7 +14,6 @@ export const ImageResult = ({ }) => { const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); - const wantedResultFile = resultFiels.find((x) => x.fileName.includes('variogram_slices_'), ); @@ -26,34 +24,15 @@ export const ImageResult = ({ const { data } = useQuery({ queryKey: ['model-cases', imageId], - queryFn: () => ImagesService.getApiImagesVariogram(imageId), + queryFn: () => getVariogramImage(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 ( <> - + lol + {/* */} ); };