fix: added custom axios call to retreive image from api

src/api/custom/getImageById.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { OpenAPI } from '../generated';
+
+export const getVariogramImage = async (imageId: string): Promise<string> => {
+  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
+  }
+};

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<GetChannelResultsFileDto> | null;
-    segmentWidth?: ChannelEstimationResultDto;
-    channelWidth?: ChannelEstimationResultDto;
-    segmentHeight?: ChannelEstimationResultDto;
-    channelHeight?: ChannelHeightDto;
-    box?: Array<CoordinateDto> | null;
+    channelResultId: string;
+    computeCaseId: string;
+    type: ComputeType;
+    channelResultFiles: Array<GetChannelResultsFileDto>;
+    segmentWidth: ChannelEstimationResultDto;
+    channelWidth: ChannelEstimationResultDto;
+    segmentHeight: ChannelEstimationResultDto;
+    channelHeight: ChannelHeightDto;
+    box: Array<CoordinateDto>;
 };
 

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;
 };
 

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<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;
+    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>;
 };
+

src/api/generated/models/GetVariogramResultsVariogramResultFileDto.ts

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

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<any> {
+    ): CancelablePromise<Blob> {
         return __request(OpenAPI, {
             method: 'GET',
             url: '/api/images/variogram/{imageId}',

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<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>
+      <img src={data ? data : ''} alt="lol" />
+      {/* <ImageView text="run" img={imageUrl} altText="run"></ImageView> */}
     </>
   );
 };