Minor refactors; Move interface to the correct file

jpggvilaca · jpggvilaca · commit 6d016f117158 · 2025-07-08T15:13:37.000+02:00
diff --git a/web_ui/packages/core/src/requests/query-keys.ts b/web_ui/packages/core/src/requests/query-keys.ts
@@ -123,7 +123,7 @@ const getSelectedMediaItemQueryKeys = () => {
             datasetIdentifier: DatasetIdentifier,
             mediaIdentifier: MediaIdentifier | undefined,
             taskId?: string
-        ) => ['explanations', datasetIdentifier, mediaIdentifier, taskId],
+        ) => [...commonKey(mediaIdentifier), 'explanations', datasetIdentifier, mediaIdentifier, taskId],
 
         SELECTED: (mediaIdentifier: MediaIdentifier | undefined, taskId?: string) => [
             ...commonKey(mediaIdentifier),
diff --git a/web_ui/src/core/annotations/services/inference-service.interface.ts b/web_ui/src/core/annotations/services/inference-service.interface.ts
@@ -7,12 +7,16 @@ import { ProjectIdentifier } from '../../projects/core.interface';
 import { DatasetIdentifier } from '../../projects/dataset.interface';
 import { Annotation, TaskChainInput } from '../annotation.interface';
 import { Explanation } from '../prediction.interface';
-import { InferenceServerStatusResult, PredictionCache, PredictionMode } from './prediction-service.interface';
+import { PredictionCache, PredictionMode } from './prediction-service.interface';
 import { VideoPaginationOptions } from './video-pagination-options.interface';
 
 export type InferenceResult = ReadonlyArray<Annotation>;
 export type ExplanationResult = Explanation[];
 
+export interface InferenceServerStatusResult {
+    isInferenceServerReady: boolean;
+}
+
 export interface InferenceService {
     getTestPredictions: (
         projectIdentifier: ProjectIdentifier,
diff --git a/web_ui/src/core/annotations/services/inference-service/api-inference-service.ts b/web_ui/src/core/annotations/services/inference-service/api-inference-service.ts
@@ -30,8 +30,13 @@ import {
     PipelineServerStatusDTO,
 } from '../../dtos/prediction.interface';
 import { Rect } from '../../shapes.interface';
-import { ExplanationResult, InferenceResult, InferenceService } from '../inference-service.interface';
-import { InferenceServerStatusResult, PredictionCache, PredictionMode } from '../prediction-service.interface';
+import {
+    ExplanationResult,
+    InferenceResult,
+    InferenceServerStatusResult,
+    InferenceService,
+} from '../inference-service.interface';
+import { PredictionCache, PredictionMode } from '../prediction-service.interface';
 import {
     buildPredictionParams,
     getExplanations as convertExplanations,
diff --git a/web_ui/src/core/annotations/services/prediction-service.interface.ts b/web_ui/src/core/annotations/services/prediction-service.interface.ts
@@ -2,20 +2,11 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { Annotation } from '../annotation.interface';
-import { Explanation } from '../prediction.interface';
 
 export interface PredictionResult {
     annotations: ReadonlyArray<Annotation>;
 }
 
-export interface ExplanationResult {
-    maps: ReadonlyArray<Explanation>;
-}
-
-export interface InferenceServerStatusResult {
-    isInferenceServerReady: boolean;
-}
-
 export enum PredictionMode {
     AUTO = 'auto',
     ONLINE = 'online',
diff --git a/web_ui/src/pages/annotator/providers/selected-media-item-provider/default-selected-media-item-provider.component.tsx b/web_ui/src/pages/annotator/providers/selected-media-item-provider/default-selected-media-item-provider.component.tsx
@@ -7,8 +7,10 @@ import QUERY_KEYS from '@geti/core/src/requests/query-keys';
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { noop } from 'lodash-es';
 
-import { ExplanationResult } from '../../../../core/annotations/services/inference-service.interface';
-import { PredictionResult } from '../../../../core/annotations/services/prediction-service.interface';
+import {
+    ExplanationResult,
+    PredictionResult,
+} from '../../../../core/annotations/services/prediction-service.interface';
 import { SelectedMediaItemContext, SelectedMediaItemProps } from './selected-media-item-provider.component';
 import { SelectedMediaItem } from './selected-media-item.interface';
 
diff --git a/web_ui/src/pages/annotator/providers/selected-media-item-provider/selected-media-item-provider.component.tsx b/web_ui/src/pages/annotator/providers/selected-media-item-provider/selected-media-item-provider.component.tsx
@@ -175,11 +175,17 @@ export const SelectedMediaItemProvider = ({ children }: SelectedMediaItemProvide
     const explanationsQuery = useExplanationsQuery({
         datasetIdentifier,
         mediaItem,
+        taskId: selectedTask?.id,
     });
 
     const selectedMediaItemQueryKey = [
         ...QUERY_KEYS.SELECTED_MEDIA_ITEM.SELECTED(pendingMediaItem?.identifier, selectedTask?.id),
-        [imageQuery.fetchStatus, annotationsQuery.fetchStatus, predictionsQuery.fetchStatus],
+        [
+            imageQuery.fetchStatus,
+            annotationsQuery.fetchStatus,
+            predictionsQuery.fetchStatus,
+            explanationsQuery.fetchStatus,
+        ],
     ];
 
     const isSelectedMediaItemQueryEnabled = mediaItem !== undefined;
@@ -191,31 +197,32 @@ export const SelectedMediaItemProvider = ({ children }: SelectedMediaItemProvide
                 throw new Error("Can't fetch undefined media item");
             }
 
-            const [image, annotations, predictions] = await new Promise<[ImageData, Annotation[], PredictionResult]>(
-                (resolve, reject) => {
-                    if (imageQuery.isError) {
-                        reject({
-                            message: 'Failed loading media item. Please try refreshing or selecting a different item.',
-                        });
-                    }
+            const [image, annotations, predictions, explanations] = await new Promise<
+                [ImageData, Annotation[], PredictionResult, ExplanationResult]
+            >((resolve, reject) => {
+                if (imageQuery.isError) {
+                    reject({
+                        message: 'Failed loading media item. Please try refreshing or selecting a different item.',
+                    });
+                }
 
-                    if (imageQuery.data && annotationsQuery.data) {
-                        if (!predictionsQuery.data && predictionsQuery.isFetching) {
-                            // If we do not yet have predictions and the user has not yet made any annotations
-                            // for the selected task, then we will wait for predictions
-                            if (isNotAnnotatedForTask(annotationsQuery.data, selectedTask)) {
-                                return;
-                            }
+                if (imageQuery.data && annotationsQuery.data) {
+                    if (!predictionsQuery.data && predictionsQuery.isFetching) {
+                        // If we do not yet have predictions and the user has not yet made any annotations
+                        // for the selected task, then we will wait for predictions
+                        if (isNotAnnotatedForTask(annotationsQuery.data, selectedTask)) {
+                            return;
                         }
+                    }
 
-                        const predictionsData = predictionsQuery.data ?? { annotations: [] };
+                    const predictionsData = predictionsQuery.data ?? { annotations: [] };
+                    const explanationsData = explanationsQuery.data ?? [];
 
-                        resolve([imageQuery.data, annotationsQuery.data, predictionsData]);
-                    }
+                    resolve([imageQuery.data, annotationsQuery.data, predictionsData, explanationsData]);
                 }
-            );
+            });
 
-            const newlySelectedMediaItem = { ...mediaItem, image, annotations, predictions };
+            const newlySelectedMediaItem = { ...mediaItem, image, annotations, predictions, explanations };
 
             if (isSingleDomainProject(isClassificationDomain)) {
                 return {
diff --git a/web_ui/src/pages/annotator/providers/selected-media-item-provider/use-explanation-query.hook.ts b/web_ui/src/pages/annotator/providers/selected-media-item-provider/use-explanation-query.hook.ts
@@ -6,7 +6,7 @@ import { useApplicationServices } from '@geti/core/src/services/application-serv
 import { QueryKey, useQuery, UseQueryResult } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
-import { Explanation } from '../../../../core/annotations/prediction.interface';
+import { ExplanationResult } from '../../../../core/annotations/services/inference-service.interface';
 import { MediaItem } from '../../../../core/media/media.interface';
 import { DatasetIdentifier } from '../../../../core/projects/dataset.interface';
 
@@ -22,7 +22,7 @@ export const useExplanationsQuery = ({
     mediaItem,
     enabled = true,
     taskId,
-}: UseGetExplanations): UseQueryResult<Explanation[], AxiosError> => {
+}: UseGetExplanations): UseQueryResult<ExplanationResult, AxiosError> => {
     const { inferenceService } = useApplicationServices();
 
     const queryKey: QueryKey = QUERY_KEYS.SELECTED_MEDIA_ITEM.EXPLANATIONS(
@@ -31,12 +31,12 @@ export const useExplanationsQuery = ({
         taskId
     );
 
-    return useQuery<Explanation[], AxiosError>({
+    return useQuery({
         queryKey,
         queryFn: async ({ signal }) => {
             if (!mediaItem) throw new Error("Can't fetch undefined media item");
 
-            return inferenceService.getExplanations(datasetIdentifier, mediaItem, taskId, undefined, signal);
+            return await inferenceService.getExplanations(datasetIdentifier, mediaItem, taskId, undefined, signal);
         },
         enabled: enabled && !!mediaItem,
         staleTime: 5 * 60_000,
diff --git a/web_ui/src/pages/project-details/components/project-model/training-dataset/training-dataset-details-preview/training-dataset-details-preview.component.tsx b/web_ui/src/pages/project-details/components/project-model/training-dataset/training-dataset-details-preview/training-dataset-details-preview.component.tsx
@@ -103,6 +103,7 @@ export const TrainingDatasetDetailsPreview = ({
         mediaItem: selectedPreviewItem,
         datasetIdentifier,
         taskId,
+        enabled: isPredictionsEnabled,
     });
 
     const predictions = useVisibleAnnotations(predictionsQuery.data?.annotations ?? []);
diff --git a/web_ui/src/pages/project-details/components/project-test/test-details-preview/use-test-results-query.hook.ts b/web_ui/src/pages/project-details/components/project-test/test-details-preview/use-test-results-query.hook.ts
@@ -72,20 +72,16 @@ export const useTestResultsQuery = (
 
     const predictionsQuery = useQuery<PredictionResult, AxiosError>({
         queryKey: QUERY_KEYS.TEST_PREDICTIONS(projectIdentifier, testId, String(testResult?.predictionId)),
-        queryFn: () =>
-            Promise.allSettled([
-                inferenceService.getTestPredictions(
-                    datasetIdentifier,
-                    labels,
-                    testId,
-                    String(testResult?.predictionId)
-                ),
-                inferenceService.getExplanations(datasetIdentifier, mediaItem),
-            ]).then(([predictions, explanations]) => {
-                // @ts-expect-error PromiseSettledResult type is not exported
-                // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled
-                return { annotations: predictions.value ?? [], maps: explanations.value ?? [] };
-            }),
+        queryFn: async () => {
+            const predictions = await inferenceService.getTestPredictions(
+                datasetIdentifier,
+                labels,
+                testId,
+                String(testResult?.predictionId)
+            );
+
+            return { annotations: predictions };
+        },
         enabled: isNonEmptyString(testResult?.predictionId),
     });
 
