:chore: Extract explanations from prediction queries #650

jpggvilaca · 2025-07-08T13:18:24Z

📝 Description

Extract explanation query from prediction queries (usePredictionQuery and usePredictionROIQuery)
Update interfaces and unit tests

Follow up:

Merge usePredictionQuery with usePredictionROIQuery

✨ Type of Change

Select the type of change your PR introduces:

🐞 Bug fix – Non-breaking change which fixes an issue
🚀 New feature – Non-breaking change which adds functionality
🔨 Refactor – Non-breaking change which refactors the code base
💥 Breaking change – Changes that break existing functionality
📚 Documentation update
🔒 Security update
🧪 Tests

🧪 Testing Scenarios

Describe how the changes were tested and how reviewers can test them too:

✅ Tested manually
🤖 Run automated end-to-end tests

✅ Checklist

Before submitting the PR, ensure the following:

🔍 PR title is clear and descriptive
📝 For internal contributors: If applicable, include the JIRA ticket number (e.g., ITEP-123456) in the PR title. Do not include full URLs
💬 I have commented my code, especially in hard-to-understand areas
📄 I have made corresponding changes to the documentation
✅ I have added tests that prove my fix is effective or my feature works

Copilot

Pull Request Overview

This PR refactors how explanation data is fetched by extracting it into its own React Query hook and updating relevant components, providers, interfaces, and tests to consume the new useExplanationsQuery hook instead of bundling explanations with prediction results.

Introduce a standalone useExplanationsQuery hook and add an EXPLANATIONS key to query-keys.
Remove inline explanation fetching from prediction hooks and providers, wiring in the new explanations query.
Update components (TestDetailsPreview, TrainingDatasetDetailsPreview, SelectedMediaItemProvider, PredictionProvider, AnnotatorProvider) and tests to use explanationsQuery and adjust interfaces.

Reviewed Changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
use-test-results-query.hook.ts	Split out explanations query and updated predictionsQuery to only return annotations
test-details-preview.component.tsx	Added `explanationsQuery` and updated `explanations` source
training-dataset-details-preview.component.tsx	Introduced `useExplanationsQuery` and replaced old maps usage
use-predictions-query.hook.ts	Removed inline explanation logic and returned only annotations
use-explanation-query.hook.ts	New hook to fetch explanations separately
selected-media-item.interface.ts	Extended interface to include optional `explanations`
selected-media-item-provider.component.tsx	Aggregated explanations into selected item and context value
default-selected-media-item-provider.component.tsx	Added stub for `explanationsQuery` in default provider
use-prediction-roi-query.hook.ts	Removed explanations from ROI query, now only returns annotations
use-prediction-roi-query.hook.test.tsx	Updated tests to reflect removed maps field
prediction-provider.component.tsx	Removed `setExplanations` call in prediction success handler
use-initial-annotations.hook.test.tsx	Adapted tests to new predictions-only shape and added `explanations`
annotator-provider.component.tsx	Wired in `explanationsQuery` data instead of old maps
layers-factory.test.tsx	Added `explanationsQuery` stub in test context
query-keys.ts	Added `EXPLANATIONS` key for query caching

Comments suppressed due to low confidence (1)

web_ui/src/pages/annotator/providers/selected-media-item-provider/use-explanation-query.hook.ts:1

[nitpick] Consider renaming this file from use-explanation-query.hook.ts to use-explanations-query.hook.ts so the filename matches the useExplanationsQuery hook and follows the plural naming convention of other query hooks.

// Copyright (C) 2022-2025 Intel Corporation

web_ui/packages/core/src/requests/query-keys.ts

...or/providers/selected-media-item-provider/default-selected-media-item-provider.component.tsx

web_ui/src/pages/annotator/providers/prediction-provider/prediction-provider.component.tsx

jpggvilaca · 2025-07-08T14:27:01Z

web_ui/src/pages/annotator/providers/annotator-provider/use-initial-annotations.hook.test.tsx

    image: getMockedImage(),
    annotations,
-    predictions: { annotations: predictions, maps: [] },
+    predictions: { annotations: predictions },


i think on a different PR we can also simplify this interface.

MarkRedeman · 2025-07-10T15:29:45Z

web_ui/src/pages/annotator/providers/prediction-provider/prediction-provider.component.tsx


    // If we are at task chain's second task, get prediction for the selected ROI input
    const predictionsRoiQuery = usePredictionsRoiQuery({
        selectedInput,


Regarding this file: I think we can refactor this provider so that we no longer need to keep track of the explanations inside of it. Instead it should be possible to retrieve the explanations directly from a query result.

MarkRedeman · 2025-07-10T15:30:59Z

...or/providers/selected-media-item-provider/default-selected-media-item-provider.component.tsx

        selectedMediaItemQuery,
        setSelectedMediaItem: noop,
        predictionsQuery: { isLoading: false } as UseQueryResult<PredictionResult>,
+        explanationsQuery: { isLoading: false } as UseQueryResult<ExplanationResult>,


Is it possible to completely remove this and instead use the query directly?

MarkRedeman · 2025-07-10T15:33:20Z

.../annotator/providers/selected-media-item-provider/selected-media-item-provider.component.tsx

    });

    const predictionsQuery = usePredictionsQueryBasedOnAnnotatorMode(mediaItem);
+    const explanationsQuery = useExplanationsQuery({


Similar question/comment as above: I'd prefer if we can fully remove it from this provider.
The logic in here is already a bit too complex with trying to make a dependant query based on three other queries, adding one more could result in some more subtle bugs.

MarkRedeman · 2025-07-10T15:34:59Z

web_ui/src/pages/annotator/providers/selected-media-item-provider/use-explanation-query.hook.ts

+        queryFn: async ({ signal }) => {
+            if (!mediaItem) throw new Error("Can't fetch undefined media item");
+
+            try {


Suggestion for later: we can remove this try catch and rely on the actual query's error after we remove it from our selected media item provider: If we use the query directly in the annotator's toolbar and canvas then we can deal with its error handling locally and inform the user that we weren't able to retrieve explanation maps.

MarkRedeman · 2025-07-10T15:36:06Z

web_ui/packages/core/src/requests/query-keys.ts

+        EXPLANATIONS: (
+            datasetIdentifier: DatasetIdentifier,
+            mediaIdentifier: MediaIdentifier | undefined,
+            taskId?: string


Should this also depend on the roi? Iirc when we are in task chain we request the explanation map based on a given ROI.

MarkRedeman · 2025-07-10T15:37:26Z

web_ui/src/pages/annotator/providers/annotator-provider/annotator-provider.component.tsx

                                    userAnnotationScene={userAnnotationScene}
                                    initPredictions={initialPredictionAnnotations}
-                                    explanations={selectedMediaItem?.predictions?.maps || EMPTY_EXPLANATION}
+                                    explanations={selectedMediaItem?.explanations || EMPTY_EXPLANATION}


Let's try to

Suggested change

explanations={selectedMediaItem?.explanations || EMPTY_EXPLANATION}

explanations={explanationQuery.data?.explanations || EMPTY_EXPLANATION}

// or

explanationsQuery={explanationsQuery}

where we can define the query inside of this function or possibly remove the argument and use this query directly inside of the prediction provider.

Copilot AI review requested due to automatic review settings July 8, 2025 13:18

jpggvilaca added the UI label Jul 8, 2025

jpggvilaca requested review from MarkRedeman, camiloHimura, pplaskie, ActiveChooN, romanowska and dwesolow as code owners July 8, 2025 13:18

Copilot AI reviewed Jul 8, 2025

View reviewed changes

jpggvilaca added 5 commits July 8, 2025 15:41

Extract explanations to its own query

995d60a

Fix unit tests

ae3f9ab

Minor refactors; Move interface to the correct file

272fa8c

Fix test details explanation refresh

ebc12f2

Fix test and tsc issue

a838fc0

jpggvilaca force-pushed the jvilaca/chore-extract-explanations branch from 4ad36cb to a838fc0 Compare July 8, 2025 13:41

jpggvilaca changed the title ~~[DRAFT] :chore: Extract explanations from prediction queries~~ :chore: Extract explanations from prediction queries Jul 8, 2025

jpggvilaca added the ready for review label Jul 8, 2025

jpggvilaca commented Jul 8, 2025

View reviewed changes

camiloHimura approved these changes Jul 10, 2025

View reviewed changes

romanowska approved these changes Jul 10, 2025

View reviewed changes

MarkRedeman reviewed Jul 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

:chore: Extract explanations from prediction queries #650

:chore: Extract explanations from prediction queries #650

Uh oh!

jpggvilaca commented Jul 8, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jpggvilaca Jul 8, 2025

Uh oh!

MarkRedeman Jul 10, 2025

Uh oh!

MarkRedeman Jul 10, 2025

Uh oh!

MarkRedeman Jul 10, 2025

Uh oh!

MarkRedeman Jul 10, 2025

Uh oh!

MarkRedeman Jul 10, 2025

Uh oh!

MarkRedeman Jul 10, 2025

Uh oh!

Uh oh!

-                                    explanations={selectedMediaItem?.explanations || EMPTY_EXPLANATION}
+                                    explanations={explanationQuery.data?.explanations || EMPTY_EXPLANATION}
+                                    // or
+                                    explanationsQuery={explanationsQuery}

:chore: Extract explanations from prediction queries #650

Are you sure you want to change the base?

:chore: Extract explanations from prediction queries #650

Uh oh!

Conversation

jpggvilaca commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

✨ Type of Change

🧪 Testing Scenarios

✅ Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jpggvilaca Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

MarkRedeman Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

MarkRedeman Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

MarkRedeman Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

MarkRedeman Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

MarkRedeman Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

MarkRedeman Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jpggvilaca commented Jul 8, 2025 •

edited

Loading