Exit to the library when a dataset's media can't be loaded (#1998)

* Exit to the library when a dataset's media can't be loaded

The desktop pre-load check now covers each camera's source folder, and image,
video, or dataset load failures show an error and leave the viewer instead of
spinning forever.

* fixes largeimageWarning, eliminate false positives

---------

Co-authored-by: Bryon Lewis <Bryon.Lewis@kitware.com>

Author: mattdawkins

client/dive-common/components/Viewer.vue

@@ -2155,9 +2155,13 @@ export default defineComponent({
         errorEl.innerHTML = getResponseError(err);
         loadError.value = errorEl.innerText
           .concat(". If you don't know how to resolve this, please contact the server administrator.");
+        emit('load-error', loadError.value);
         throw err;
       }
     };
+    function forwardLoadError(message: string, largeImage?: boolean) {
+      emit('load-error', message, largeImage);
+    }
     loadData();
 
     /**
@@ -2535,6 +2539,7 @@ export default defineComponent({
       imageData,
       lineChartData,
       loadError,
+      forwardLoadError,
       multiSelectActive,
       lassoModeActive: lassoMode.lassoModeActive,
       lassoDrawing: lassoMode.lassoDrawing,
@@ -3011,6 +3016,7 @@ export default defineComponent({
                   filterId: `imageEnhancements-${camera}`,
                 }"
                 @large-image-warning="$emit('large-image-warning', true)"
+                @load-error="forwardLoadError"
               >
                 <LayerManager :camera="camera" />
               </component>
@@ -3109,6 +3115,7 @@ export default defineComponent({
                   filterId: `imageEnhancements-${camera}`,
                 }"
                 @large-image-warning="$emit('large-image-warning', true)"
+                @load-error="forwardLoadError"
               >
                 <LayerManager :camera="camera" />
               </component>

client/platform/desktop/backend/native/common.spec.ts

@@ -625,6 +625,30 @@ beforeEach(() => {
             },
           },
         },
+        projectidMulticamMovedSource: {
+          'meta.json': JSON.stringify({
+            version: 1,
+            id: 'projectidMulticamMovedSource',
+            name: 'movedStereo',
+            type: 'multi',
+            fps: 5,
+            originalBasePath: '',
+            multiCam: {
+              defaultDisplay: 'left',
+              cameras: {
+                left: {
+                  type: 'image-sequence',
+                  originalBasePath: '/home/user/data/movedStereo/left',
+                },
+                right: {
+                  type: 'image-sequence',
+                  originalBasePath: '/home/user/data/movedStereo/right',
+                },
+              },
+            },
+          }),
+          'result_whatever.json': JSON.stringify({}),
+        },
         projectidFrameMetadata: {
           'meta.json': JSON.stringify({
             version: 1,
@@ -2816,6 +2840,9 @@ describe('native.common', () => {
     await expect(common.checkDataset(settings, 'projectid3Bad')).rejects.toThrow('missing dataset json');
     await expect(common.checkDataset(settings, 'projectid5Bad')).rejects.toThrow('missing track json file');
     await expect(common.checkDataset(settings, 'missingFolder')).rejects.toThrow('missing project directory');
+    await expect(common.checkDataset(settings, 'projectidMulticamMovedSource')).rejects.toThrow(
+      'Dataset movedStereo does not contain source files at /home/user/data/movedStereo/left, /home/user/data/movedStereo/right',
+    );
   });
 
   it('checkDataset does not create directories for missing datasets', async () => {

client/platform/desktop/backend/native/common.ts

@@ -2061,11 +2061,16 @@ async function checkDataset(
 ): Promise<boolean> {
   const projectDirData = await getValidatedProjectDir(settings, datasetId);
   const projectMetaData = await loadJsonConfig(projectDirData.datasetFileAbsPath);
-  if (projectMetaData.originalBasePath !== '') {
-    const exists = await fs.pathExists(projectMetaData.originalBasePath);
-    if (!exists) {
-      throw new Error(`Dataset ${projectMetaData.name} does not contain source files at ${projectMetaData.originalBasePath}`);
-    }
+  const sourcePaths = [
+    ...new Set([
+      projectMetaData.originalBasePath,
+      ...Object.values(projectMetaData.multiCam?.cameras ?? {}).map((camera) => camera.originalBasePath),
+    ].filter((path) => path)),
+  ];
+  const exists = await Promise.all(sourcePaths.map((path) => fs.pathExists(path)));
+  const missing = sourcePaths.filter((_, index) => !exists[index]);
+  if (missing.length) {
+    throw new Error(`Dataset ${projectMetaData.name} does not contain source files at ${missing.join(', ')}`);
   }
   if (projectMetaData.error && projectMetaData.error !== '') {
     throw new Error(`Dataset ${projectMetaData.name} contains error: ${projectMetaData.error}`);

client/platform/desktop/frontend/components/ViewerLoader.vue

@@ -256,6 +256,24 @@ export default defineComponent({
       return results;
     });
 
+    let loadFailed = false;
+    async function handleLoadError(message: string, largeImage?: boolean) {
+      if (loadFailed) {
+        return;
+      }
+      loadFailed = true;
+      if (largeImage) {
+        await largeImageWarning();
+      } else {
+        await prompt({
+          title: 'Error Loading Data',
+          text: [message],
+          positiveButton: 'Okay',
+        });
+      }
+      router.push({ name: 'recent' });
+    }
+
     async function largeImageWarning() {
       await prompt({
         title: 'Large Image Warning',
@@ -2565,6 +2583,7 @@ export default defineComponent({
       readOnlyMode,
       runningPipelines,
       largeImageWarning,
+      handleLoadError,
       timeFilter,
       handleTextQuerySubmit,
       handleTextQueryInit,
@@ -2620,6 +2639,7 @@ export default defineComponent({
       @return-to-current-annotations="returnToCurrentAnnotations"
       @change-camera="changeCamera"
       @large-image-warning="largeImageWarning()"
+      @load-error="handleLoadError"
       @text-query-submit="handleTextQuerySubmit"
       @text-query-init="handleTextQueryInit"
       @text-query-all-frames="handleTextQueryAllFrames"

client/platform/web-girder/views/ViewerLoader.vue

@@ -23,6 +23,7 @@ import { parentDatasetId } from 'dive-common/compositeDatasetId';
 import { getMultiCamCameraCount } from 'dive-common/pipelineMenuFilters';
 import { webExcludedPipelineTerms } from 'dive-common/constants';
 import { convertLargeImage } from 'platform/web-girder/api/rpc.service';
+import type { RawLocation } from 'vue-router';
 import { useRouter, useRoute } from 'vue-router/composables';
 import { ANNOTATION_SOURCE_QUERY } from 'dive-common/scoring/viewerNavigation';
 import { parseViewerFocus } from 'dive-common/review/viewerNavigation';
@@ -544,6 +545,24 @@ export default defineComponent({
       }
     }
 
+    let loadFailed = false;
+    async function handleLoadError(message: string, largeImage?: boolean) {
+      if (loadFailed) {
+        return;
+      }
+      loadFailed = true;
+      if (largeImage) {
+        await largeImageWarning();
+      } else {
+        await prompt({
+          title: 'Error Loading Data',
+          text: [message],
+          positiveButton: 'Okay',
+        });
+      }
+      router.push(locationRoute.value as RawLocation);
+    }
+
     const annotationSourceLabel = computed(() => {
       const value = route.query[ANNOTATION_SOURCE_QUERY];
       return typeof value === 'string' ? value : '';
@@ -571,6 +590,7 @@ export default defineComponent({
       routeRevision,
       routeSet,
       largeImageWarning,
+      handleLoadError,
       typeList,
       subTypeList,
       cameraNumbers,
@@ -638,6 +658,7 @@ export default defineComponent({
       :auto-populate-status="segmentationStatus"
       @return-to-current-annotations="returnToCurrentAnnotations"
       @large-image-warning="largeImageWarning()"
+      @load-error="handleLoadError"
       @update:set="routeSet"
       @change-camera="changeCamera"
       @stereo-annotation-complete="handleStereoAnnotationComplete"

client/src/components/annotators/ImageAnnotator.vue

@@ -125,6 +125,14 @@ export default defineComponent({
       }
       return imgInternal;
     }
+    function failedToLoad(imgInternal: ImageDataItemInternal, loaded: boolean) {
+      if (loaded || local.imgs[imgInternal.frame] !== imgInternal) {
+        return false;
+      }
+      loadingImage.value = false;
+      emit('load-error', `Could not load ${imgInternal.filename}. The file may have been moved or deleted.`);
+      return true;
+    }
     /**
      * Draw image to the GeoJS map, and update the map dimensions if they have changed.
      */
@@ -277,8 +285,8 @@ export default defineComponent({
       if (!imgInternal.cached) {
         loadingImage.value = true;
         // else wait for it to load
-        await imgInternal.onloadPromise;
-        if (imgInternal.frame === data.frame) {
+        const loaded = await imgInternal.onloadPromise;
+        if (imgInternal.frame === data.frame && !failedToLoad(imgInternal, loaded)) {
           loadingImage.value = false;
           // if the seek hasn't changed since the image completed loading, draw it.
           drawImage(imgInternal.image);
@@ -368,11 +376,21 @@ export default defineComponent({
 
     if (local.imgs.length) {
       const imgInternal = cacheFrame(0);
-      imgInternal.onloadPromise.then(async () => {
+      imgInternal.onloadPromise.then(async (loaded) => {
+        if (imgInternal.frame !== data.frame || failedToLoad(imgInternal, loaded)) {
+          return;
+        }
         try {
           await imgInternal.image.decode();
         } catch (error) {
-          emit('large-image-warning', true);
+          if (imgInternal.frame !== data.frame) {
+            return;
+          }
+          loadingImage.value = false;
+          emit('load-error', `Could not display ${imgInternal.filename}. Its resolution may be too large for this browser or hardware.`, true);
+          return;
+        }
+        if (imgInternal.frame !== data.frame) {
           return;
         }
         initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
@@ -428,8 +446,8 @@ export default defineComponent({
         drawImage(imgInternal.image);
         if (!imgInternal.cached) {
           loadingImage.value = true;
-          imgInternal.onloadPromise.then(() => {
-            if (imgInternal.frame === data.frame) {
+          imgInternal.onloadPromise.then((loaded) => {
+            if (imgInternal.frame === data.frame && !failedToLoad(imgInternal, loaded)) {
               loadingImage.value = false;
               drawImage(imgInternal.image);
             }
@@ -440,7 +458,10 @@ export default defineComponent({
         return;
       }
       const imgInternal = cacheFrame(0);
-      imgInternal.onloadPromise.then(() => {
+      imgInternal.onloadPromise.then((loaded) => {
+        if (failedToLoad(imgInternal, loaded)) {
+          return;
+        }
         initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
         const quadFeatureLayer = geoViewer.value.createLayer('feature', {
           features: ['quad'],

client/src/components/annotators/VideoAnnotator.vue

@@ -55,7 +55,7 @@ export default defineComponent({
       default: 'imageEnhancements',
     },
   },
-  setup(props) {
+  setup(props, { emit }) {
     const cameraInitializer = injectCameraInitializer();
     const {
       state: data,
@@ -168,6 +168,7 @@ export default defineComponent({
     }
     function logError(event: ErrorEvent) {
       console.error('Media failed to initialize', event);
+      emit('load-error', 'Could not load the video. The file may have been moved or deleted.');
     }
     function setVolume(level: number) {
       video.volume = level;