improve calibration file importing

client/dive-common/apispec.ts

@@ -241,6 +241,10 @@ interface Api {
     subfolderPath: string,
     mediaType: 'image-sequence' | 'video',
   ): Promise<string>;
+  /** Desktop: stereoscopic calibration file in a parent folder root. */
+  findParentFolderCalibrationFile?(parentPath: string): Promise<string | null>;
+  /** Web: stash a calibration File for multicam upload lookup. */
+  stashCalibrationFile?(key: string, file: File): void;
   getTiles?(itemId: string, projection?: string): Promise<StringKeyObject>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getTileURL?(itemId: string, x: number, y: number, level: number, query: Record<string, any>):

client/dive-common/components/ImportMultiCamDialog/ImportMultiCamCalibration.vue

@@ -0,0 +1,48 @@
+<!--
+  Stereoscopic calibration file picker. Requires `ctx`; uses calibrationFile and open from ctx.
+-->
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { importMultiCamContextProp } from './importMultiCamContext';
+
+export default defineComponent({
+  name: 'ImportMultiCamCalibration',
+  props: {
+    ...importMultiCamContextProp,
+  },
+  setup(props) {
+    const { calibrationFile, open } = props.ctx;
+    return {
+      calibrationFile,
+      open,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-row
+    no-gutters
+    class="align-center my-3"
+  >
+    <v-text-field
+      label="Calibration File"
+      placeholder="Not selected"
+      disabled
+      outlined
+      dense
+      hide-details
+      :value="calibrationFile"
+      class="mr-3"
+    />
+    <v-btn
+      color="primary"
+      @click="open('calibration', 'calibration')"
+    >
+      Choose calibration
+      <v-icon class="ml-2">
+        mdi-matrix
+      </v-icon>
+    </v-btn>
+  </v-row>
+</template>

client/dive-common/components/ImportMultiCamDialog/ImportMultiCamDialog.vue

@@ -13,6 +13,7 @@ import ImportMultiCamSubfolders from './ImportMultiCamSubfolders.vue';
 import ImportMultiCamMultiFolder from './ImportMultiCamMultiFolder.vue';
 import ImportMultiCamKeyword from './ImportMultiCamKeyword.vue';
 import ImportMultiCamFinalizeStep from './ImportMultiCamFinalizeStep.vue';
+import ImportMultiCamCalibration from './ImportMultiCamCalibration.vue';
 
 export default defineComponent({
   name: 'ImportMultiCamDialog',
@@ -22,6 +23,7 @@ export default defineComponent({
     ImportMultiCamMultiFolder,
     ImportMultiCamKeyword,
     ImportMultiCamFinalizeStep,
+    ImportMultiCamCalibration,
   },
   props: {
     stereo: {
@@ -105,6 +107,11 @@ export default defineComponent({
         :stereo="stereo"
       />
 
+      <ImportMultiCamCalibration
+        v-if="stereo && importType"
+        :ctx="ctx"
+      />
+
       <div>
         <v-alert
           v-if="errorMessage"
@@ -127,7 +134,6 @@ export default defineComponent({
         </v-alert>
         <ImportMultiCamFinalizeStep
           :ctx="ctx"
-          :stereo="stereo"
           :show-default-display="camerasReady"
         />
       </div>

client/dive-common/components/ImportMultiCamDialog/ImportMultiCamFinalizeStep.vue

@@ -1,6 +1,5 @@
 <!--
-  Dataset name, default display, and calibration UI. Requires `ctx`; reads finalize
-  fields from props.ctx (datasetName, defaultDisplay, open, …).
+  Dataset name, default display. Requires `ctx`; reads finalize fields from props.ctx.
 -->
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -10,10 +9,6 @@ export default defineComponent({
   name: 'ImportMultiCamFinalizeStep',
   props: {
     ...importMultiCamContextProp,
-    stereo: {
-      type: Boolean,
-      default: false,
-    },
     showDatasetName: {
       type: Boolean,
       default: true,
@@ -34,17 +29,13 @@ export default defineComponent({
       defaultDisplay,
       displayKeys,
       displayKeysKey,
-      calibrationFile,
-      open,
     } = props.ctx;
     return {
       datasetName,
       datasetNameRules,
       defaultDisplay,
       displayKeys,
       displayKeysKey,
-      calibrationFile,
-      open,
     };
   },
 });
@@ -87,31 +78,5 @@ export default defineComponent({
         :label="cameraKey"
       />
     </v-radio-group>
-    <v-row
-      v-if="stereo"
-      no-gutters
-      class="align-center"
-      :class="{ 'mt-2': showDefaultDisplayInfo }"
-    >
-      <v-text-field
-        label="Calibration File:"
-        placeholder="Choose File"
-        disabled
-        outlined
-        dense
-        hide-details
-        :value="calibrationFile"
-        class="mr-3"
-      />
-      <v-btn
-        color="primary"
-        @click="open('calibration', 'calibration')"
-      >
-        Open Calibration File
-        <v-icon class="ml-2">
-          mdi-matrix
-        </v-icon>
-      </v-btn>
-    </v-row>
   </div>
 </template>

client/dive-common/components/ImportMultiCamDialog/ImportMultiCamSubfolders.vue

@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { DatasetType } from 'dive-common/apispec';
+import { ImageSequenceType } from 'dive-common/constants';
 import ImportMultiCamCameraGroup from './ImportMultiCamCameraGroup.vue';
 import ImportMultiCamChooseSource from './ImportMultiCamChooseSource.vue';
 import ImportMultiCamCameraOrderControls from './ImportMultiCamCameraOrderControls.vue';
@@ -42,6 +43,8 @@ export default defineComponent({
       deleteSet: props.ctx.deleteSet,
       onRenameCamera: props.ctx.onRenameCamera,
       openParentFolder: props.ctx.openParentFolder,
+      open: props.ctx.open,
+      ImageSequenceType,
     };
   },
 });
@@ -120,10 +123,11 @@ export default defineComponent({
         :camera-name="key"
         :data-type="dataType"
         :value="subfolderOriginalNames[key] || key"
-        :hide-actions="true"
+        @open="open(dataType, key)"
+        @open-text="open('text', key)"
       />
       <v-chip
-        v-if="pendingImportPayloads[key]"
+        v-if="dataType === ImageSequenceType && pendingImportPayloads[key]"
         :color="pendingImportPayloads[key].jsonMeta.originalImageFiles.length ? 'success' : 'error'"
         outlined
         class="mt-2"
@@ -134,7 +138,6 @@ export default defineComponent({
     <ImportMultiCamFinalizeStep
       v-if="camerasReady"
       :ctx="ctx"
-      :stereo="stereo"
       show-default-display-info
     />
   </div>

client/dive-common/components/ImportMultiCamDialog/README.md

@@ -37,6 +37,7 @@ ImportMultiCamDialog.vue          Shell: platform props, ctx wiring, errors, act
 ├── ImportMultiCamSubfolders.vue
 ├── ImportMultiCamKeyword.vue
 ├── ImportMultiCamFinalizeStep.vue
+├── ImportMultiCamCalibration.vue
 ├── ImportMultiCamCameraOrderControls.vue
 │
 └── Primitives (presentational)