From 6817b1bbebd1bd4ca597b0482e73a2525e9507d1 Mon Sep 17 00:00:00 2001
From: Jules Bourdais <jules.bourdais@kitware.com>
Date: Thu, 5 Jan 2023 03:21:21 -0500
Subject: [PATCH 01/14] Stereo calibration configuration dialog

---
 client/dive-common/apispec.ts                 |  4 +-
 .../dive-common/components/ImportButton.vue   | 16 ++++++-
 .../components/ImportMultiCamDialog.vue       | 45 +++++++++++++++++--
 .../components/RunPipelineMenu.vue            |  2 +
 client/dive-common/constants.ts               |  6 +++
 .../desktop/backend/native/multiCamImport.ts  | 12 ++++-
 .../platform/desktop/backend/native/viame.ts  | 25 +++++++++++
 client/platform/desktop/constants.ts          |  3 ++
 client/platform/desktop/frontend/api.ts       |  9 +++-
 .../frontend/components/ImportDialog.vue      | 18 ++++++++
 .../desktop/frontend/components/Recent.vue    |  8 +++-
 client/platform/web-girder/utils.ts           |  2 +-
 12 files changed, 140 insertions(+), 10 deletions(-)

diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index f32f7180a..13a753466 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -82,6 +82,7 @@ export interface MultiCamImportFolderArgs {
     trackFile: string;
   }>; // path/track file per camera
   calibrationFile?: string; // NPZ calibation matrix file
+  stereoConfigurationFile?: string; // kwiver *.conf file
   type: 'image-sequence' | 'video';
 }
 
@@ -93,6 +94,7 @@ export interface MultiCamImportKeywordArgs {
     trackFile: string;
   }>; // glob pattern for base folder
   calibrationFile?: string; // NPZ calibation matrix file
+  stereoConfigurationFile?: string; // kwiver *.conf file
   type: 'image-sequence'; // Always image-sequence type for glob matching
 }
 
@@ -161,7 +163,7 @@ interface Api {
   saveAttributeTrackFilters(datasetId: string,
     args: SaveAttributeTrackFilterArgs): Promise<unknown>;
   // Non-Endpoint shared functions
-  openFromDisk(datasetType: DatasetType | 'calibration' | 'annotation' | 'text' | 'zip', directory?: boolean):
+  openFromDisk(datasetType: DatasetType | 'calibration' | 'annotation' | 'text' | 'zip' | 'stereoConfiguration', directory?: boolean):
     Promise<{canceled?: boolean; filePaths: string[]; fileList?: File[]; root?: string}>;
   getTiles?(itemId: string, projection?: string): Promise<StringKeyObject>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/client/dive-common/components/ImportButton.vue b/client/dive-common/components/ImportButton.vue
index 68befabe5..e1bac6e10 100644
--- a/client/dive-common/components/ImportButton.vue
+++ b/client/dive-common/components/ImportButton.vue
@@ -49,7 +49,7 @@ export default defineComponent({
       offset-y
       offset-x
       nudge-left="180"
-      max-width="180"
+      max-width="250"
     >
       <template v-slot:activator="{ on }">
         <v-btn
@@ -112,6 +112,20 @@ export default defineComponent({
               <v-list-item-title>Image List</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
+
+          <v-list-item
+            v-if="openType === 'image-sequence'"
+            style="align-items':'center"
+            @click="$emit('multi-cam', { stereo: true, openType, calibration: true })"
+          >
+            <v-list-item-icon>
+              <v-icon>mdi-binoculars</v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title>Stereoscopic Calibration</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+
           <v-list-item
             style="align-items':'center"
             @click="$emit('multi-cam',{ stereo: true, openType })"
diff --git a/client/dive-common/components/ImportMultiCamDialog.vue b/client/dive-common/components/ImportMultiCamDialog.vue
index d26e3adf1..d207b85ca 100644
--- a/client/dive-common/components/ImportMultiCamDialog.vue
+++ b/client/dive-common/components/ImportMultiCamDialog.vue
@@ -32,6 +32,10 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       required: false,
     },
+    calibration: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+    },
     dataType: {
       type: String as PropType<typeof VideoType | typeof ImageSequenceType>,
       default: ImageSequenceType,
@@ -50,6 +54,7 @@ export default defineComponent({
     const pendingImportPayloads: Ref<Record<string, MediaImportResponse | null>> = ref({});
     const globList: Ref<Record<string, { glob: string; trackFile: string}>> = ref({});
     const calibrationFile = ref('');
+    const stereoConfigurationFile = ref('');
     const defaultDisplay = ref('left');
     const importAnnotationFilesCheck = ref(false);
     const { error: importError, request: importRequest } = useRequest();
@@ -188,12 +193,14 @@ export default defineComponent({
       }
     }
 
-    async function open(dstype: DatasetType | 'calibration' | 'text', folder: string | 'calibration') {
+    async function open(dstype: DatasetType | 'calibration' | 'text' | 'stereoConfiguration', folder: string | 'calibration' | 'stereoConfiguration') {
       const ret = await openFromDisk(dstype, dstype === 'image-sequence');
       if (!ret.canceled) {
         const path = ret.filePaths[0];
         if (folder === 'calibration') {
           calibrationFile.value = path;
+        } else if (folder === 'stereoConfiguration') {
+          stereoConfigurationFile.value = path;
         } else if (importType.value === 'multi') {
           if (ret.root) {
             folderList.value[folder].sourcePath = ret.root;
@@ -246,6 +253,11 @@ export default defineComponent({
           calibrationFile: calibrationFile.value,
           type: props.dataType,
         };
+        if (props.calibration) {
+          delete args.calibrationFile;
+          args.stereoConfigurationFile = stereoConfigurationFile.value;
+        }
+
         emit('begin-multicam-import', args);
       } else if (importType.value === 'keyword') {
         const args: MultiCamImportKeywordArgs = {
@@ -272,6 +284,7 @@ export default defineComponent({
       defaultDisplay,
       displayKeys,
       importAnnotationFilesCheck,
+      stereoConfigurationFile,
       //Methods
       open,
       prepForImport,
@@ -442,7 +455,7 @@ export default defineComponent({
             </v-radio-group>
           </div>
           <v-row
-            v-if="stereo"
+            v-if="stereo && !calibration"
             no-gutters
             class="align-center"
           >
@@ -466,6 +479,32 @@ export default defineComponent({
               </v-icon>
             </v-btn>
           </v-row>
+
+          <v-row
+            v-else-if="stereo && calibration"
+            no-gutters
+            class="align-center"
+          >
+            <v-text-field
+              label="Stereoscopic Configuration File:"
+              placeholder="Choose File"
+              disabled
+              outlined
+              dense
+              hide-details
+              :value="stereoConfigurationFile"
+              class="mr-3"
+            />
+            <v-btn
+              color="primary"
+              @click="open('stereoConfiguration', 'stereoConfiguration')"
+            >
+              Open Stereoscopic Configuration
+              <v-icon class="ml-2">
+                mdi-matrix
+              </v-icon>
+            </v-btn>
+          </v-row>
         </div>
       </div>
 
@@ -492,7 +531,7 @@ export default defineComponent({
         </v-btn>
         <v-btn
           color="primary"
-          :disabled="!nextSteps || (stereo && !calibrationFile)"
+          :disabled="!nextSteps || (stereo && (!calibrationFile && !stereoConfigurationFile))"
           @click="prepForImport"
         >
           Begin Import
diff --git a/client/dive-common/components/RunPipelineMenu.vue b/client/dive-common/components/RunPipelineMenu.vue
index 3ab912fc7..19ba263f8 100644
--- a/client/dive-common/components/RunPipelineMenu.vue
+++ b/client/dive-common/components/RunPipelineMenu.vue
@@ -163,6 +163,8 @@ export default defineComponent({
         case 'utility':
         case 'generate':
           return 'utilities';
+        case 'estimates':
+          return 'estimators';
         default:
           return `${pipeType}s`;
       }
diff --git a/client/dive-common/constants.ts b/client/dive-common/constants.ts
index 61caee7dc..7690887a9 100644
--- a/client/dive-common/constants.ts
+++ b/client/dive-common/constants.ts
@@ -54,6 +54,7 @@ const otherVideoTypes = [
 
 const calibrationFileTypes = [
   'npz',
+  'conf',
 ];
 
 const fileVideoTypes = [
@@ -118,6 +119,10 @@ const zipFileTypes = [
   'zip',
 ];
 
+const stereoCalibrationConfigurationFileTypes = [
+  'conf',
+];
+
 const stereoPipelineMarker = 'measurement';
 const multiCamPipelineMarkers = ['2-cam', '3-cam'];
 
@@ -152,4 +157,5 @@ export {
   multiCamPipelineMarkers,
   JsonMetaRegEx,
   simplifyTrainingName,
+  stereoCalibrationConfigurationFileTypes,
 };
diff --git a/client/platform/desktop/backend/native/multiCamImport.ts b/client/platform/desktop/backend/native/multiCamImport.ts
index 5a6d2e19d..58698be7a 100644
--- a/client/platform/desktop/backend/native/multiCamImport.ts
+++ b/client/platform/desktop/backend/native/multiCamImport.ts
@@ -63,6 +63,7 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
         transcodedImageFiles: [],
         transcodedVideoFile: '',
       };
+
       if (args.type === 'video') {
         // Reset the base path to a folder for videos
         cameras[key].originalBasePath = npath.dirname(cameras[key].originalBasePath);
@@ -107,6 +108,7 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
       calibration: args.calibrationFile,
       defaultDisplay: args.defaultDisplay,
     },
+    stereoConfigurationFile: args.stereoConfigurationFile,
     subType: null,
   };
 
@@ -175,6 +177,9 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
             cameras[cameraName].imageListPath = jsonMeta.originalBasePath;
             cameras[cameraName].originalBasePath = '';
           }
+          if (args.stereoConfigurationFile) {
+            cameras[cameraName].stereoConfigurationFile = args.stereoConfigurationFile;
+          }
         });
     } else if (isKeywordArgs(args)) {
       jsonMeta.originalBasePath = args.sourcePath;
@@ -189,6 +194,9 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
             cameras[cameraName].imageListPath = jsonMeta.originalBasePath;
             cameras[cameraName].originalBasePath = '';
           }
+          if (args.stereoConfigurationFile) {
+            cameras[cameraName].stereoConfigurationFile = args.stereoConfigurationFile;
+          }
         });
     }
   } else {
@@ -196,7 +204,9 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
   }
 
   if (jsonMeta.multiCam?.cameras && jsonMeta.multiCam.cameras.left
-    && jsonMeta.multiCam.cameras.right && jsonMeta.multiCam.calibration) {
+    && jsonMeta.multiCam.cameras.right && (
+      jsonMeta.multiCam.calibration || jsonMeta.stereoConfigurationFile
+    )) {
     jsonMeta.subType = 'stereo';
   } else if (jsonMeta.multiCam) {
     jsonMeta.subType = 'multicam';
diff --git a/client/platform/desktop/backend/native/viame.ts b/client/platform/desktop/backend/native/viame.ts
index 8a8fafc49..8968097fd 100644
--- a/client/platform/desktop/backend/native/viame.ts
+++ b/client/platform/desktop/backend/native/viame.ts
@@ -147,11 +147,36 @@ async function runPipeline(
 
     if (meta.multiCam.calibration) {
       command.push(`-s measurer:calibration_file="${meta.multiCam.calibration}"`);
+      command.push(`-c "${meta.multiCam.calibration}"`);
     }
   } else if (pipeline.type === stereoPipelineMarker) {
     throw new Error('Attempting to run a multicam pipeline on non multicam data');
   }
 
+  if (meta.stereoConfigurationFile) {
+    command.push(`-c "${meta.stereoConfigurationFile}"`);
+
+    if (meta.multiCam) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const camKey of Object.keys(meta.multiCam.cameras)) {
+        const trackFilename = `tracks_${camKey}.csv`;
+        const trackFileStream = fs.createWriteStream(
+          npath.join(jobWorkDir, trackFilename),
+        );
+        // eslint-disable-next-line no-await-in-loop
+        const { trackFileAbsPath } = await common.getValidatedProjectDir(settings, `${datasetId}/${camKey}`);
+        // eslint-disable-next-line no-await-in-loop
+        const inputData = await common.loadAnnotationFile(trackFileAbsPath);
+        // eslint-disable-next-line no-await-in-loop
+        await serialize(trackFileStream, inputData, meta);
+        trackFileStream.end();
+        const fullFilePath = npath.join(jobWorkDir, trackFilename);
+
+        command.push(`-s cameras_calibration:tracks_${camKey}="${fullFilePath}"`);
+      }
+    }
+  }
+
   const job = observeChild(spawn(command.join(' '), {
     shell: viameConstants.shell,
     cwd: jobWorkDir,
diff --git a/client/platform/desktop/constants.ts b/client/platform/desktop/constants.ts
index 3b640e064..c2226b432 100644
--- a/client/platform/desktop/constants.ts
+++ b/client/platform/desktop/constants.ts
@@ -41,6 +41,7 @@ export interface Camera {
   transcodedImageFiles: string[];
   transcodedVideoFile: string;
   imageListPath?: string;
+  stereoConfigurationFile?: string;
 }
 
 export interface MultiCamDesktop {
@@ -120,6 +121,8 @@ export interface JsonMeta extends DatasetMetaMutable {
 
   // Stereo or multi-camera datasets with uniform type (all images, all video)
   subType: SubType;
+
+  stereoConfigurationFile?: string; // kwiver *.conf file
 }
 
 export type DesktopMetadata = DatasetMeta & JsonMeta;
diff --git a/client/platform/desktop/frontend/api.ts b/client/platform/desktop/frontend/api.ts
index cfebf8a76..5deea716a 100644
--- a/client/platform/desktop/frontend/api.ts
+++ b/client/platform/desktop/frontend/api.ts
@@ -15,6 +15,7 @@ import type {
 import {
   fileVideoTypes, calibrationFileTypes,
   inputAnnotationFileTypes, listFileTypes, inputAnnotationTypes,
+  stereoCalibrationConfigurationFileTypes,
 } from 'dive-common/constants';
 import {
   DesktopJob, DesktopMetadata, JsonMeta, NvidiaSmiReply,
@@ -27,7 +28,7 @@ import {
  * Native functions that run entirely in the renderer
  */
 
-async function openFromDisk(datasetType: DatasetType | 'calibration' | 'annotation' | 'text', directory = false) {
+async function openFromDisk(datasetType: DatasetType | 'calibration' | 'annotation' | 'text' | 'stereoConfiguration', directory = false) {
   let filters: FileFilter[] = [];
   const allFiles = { name: 'All Files', extensions: ['*'] };
   if (datasetType === 'video') {
@@ -54,6 +55,12 @@ async function openFromDisk(datasetType: DatasetType | 'calibration' | 'annotati
       allFiles,
     ];
   }
+  if (datasetType === 'stereoConfiguration') {
+    filters = [
+      { name: 'configuration', extensions: stereoCalibrationConfigurationFileTypes },
+      allFiles,
+    ];
+  }
   const props = (datasetType === 'image-sequence' || directory) ? 'openDirectory' : 'openFile';
   const results = await dialog.showOpenDialog({
     properties: [props],
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
index d38a5ddf4..5029e62c6 100644
--- a/client/platform/desktop/frontend/components/ImportDialog.vue
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -11,6 +11,7 @@ import { locateDuplicates } from 'platform/desktop/frontend/store/dataset';
 import { useApi } from 'dive-common/apispec';
 import Vue from 'vue';
 import { clientSettings } from 'dive-common/store/settings';
+import { Attribute } from 'vue-media-annotator/use/useAttributes';
 
 
 export default defineComponent({
@@ -38,6 +39,23 @@ export default defineComponent({
       argCopy.value.jsonMeta.fps = clientSettings.annotationFPS;
     }
 
+    // Set default attributes for a stereo calibration configuration
+    if (argCopy.value.jsonMeta.stereoConfigurationFile) {
+      argCopy.value.jsonMeta.attributes = {};
+
+      // Create x, y, z attributes
+      ['x', 'y', 'z'].forEach((attributeKey) => {
+        // ugly but necessary to avoid typescript error
+        (argCopy.value.jsonMeta.attributes as Record<string, Attribute>)[attributeKey] = {
+          belongs: 'detection',
+          datatype: 'number',
+          key: `detection_${attributeKey}`,
+          name: attributeKey,
+          values: [],
+        };
+      });
+    }
+
     watch(toRef(props, 'importData'), (val) => {
       duplicates.value = locateDuplicates(val.jsonMeta);
       argCopy.value = cloneDeep(val);
diff --git a/client/platform/desktop/frontend/components/Recent.vue b/client/platform/desktop/frontend/components/Recent.vue
index 5b9b19910..f98f67ffd 100644
--- a/client/platform/desktop/frontend/components/Recent.vue
+++ b/client/platform/desktop/frontend/components/Recent.vue
@@ -2,7 +2,7 @@
 import { join } from 'path';
 import moment from 'moment';
 import {
-  computed, defineComponent, ref, Ref,
+  computed, defineComponent, ref, Ref, reactive,
 } from '@vue/composition-api';
 
 import type { DatasetType, MultiCamImportArgs } from 'dive-common/apispec';
@@ -43,6 +43,7 @@ export default defineComponent({
 
   setup(_, { root }) {
     const importMultiCamDialog = ref(false);
+    const calibration = ref(false);
     const pendingImportPayload: Ref<DesktopMediaImportResponse | null> = ref(null);
     const searchText: Ref<string | null> = ref('');
     const stereo = ref(false);
@@ -80,8 +81,9 @@ export default defineComponent({
       importing.value = false;
     }
 
-    function openMultiCamDialog(args: {stereo: boolean; openType: 'image-sequence' | 'video'}) {
+    function openMultiCamDialog(args: {stereo: boolean; openType: 'image-sequence' | 'video'; calibration: boolean}) {
       stereo.value = args.stereo;
+      calibration.value = args.calibration;
       multiCamOpenType.value = args.openType;
       importMultiCamDialog.value = true;
     }
@@ -207,6 +209,7 @@ export default defineComponent({
       checkingMedia,
       clientSettings,
       itemsPerPageOptions,
+      calibration,
     };
   },
 });
@@ -233,6 +236,7 @@ export default defineComponent({
         :stereo="stereo"
         :data-type="multiCamOpenType"
         :import-media="importMedia"
+        :calibration="calibration"
         @begin-multicam-import="multiCamImport($event)"
         @abort="importMultiCamDialog = false"
       />
diff --git a/client/platform/web-girder/utils.ts b/client/platform/web-girder/utils.ts
index bb7a5da2a..47835c9d5 100644
--- a/client/platform/web-girder/utils.ts
+++ b/client/platform/web-girder/utils.ts
@@ -34,7 +34,7 @@ function getRouteFromLocation(location: LocationType): string {
   return `/${location._modelType}/${location._id}`;
 }
 
-async function openFromDisk(datasetType: DatasetType | 'calibration' | 'annotation' | 'zip'):
+async function openFromDisk(datasetType: DatasetType | 'calibration' | 'annotation' | 'zip' | 'stereoConfiguration'):
 Promise<{ canceled: boolean; filePaths: string[]; fileList?: File[]}> {
   const input: HTMLInputElement = document.createElement('input');
   input.type = 'file';

From 7c35f141d0f2701173cd68016559d7506c188dfe Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Tue, 29 Mar 2022 20:49:32 +0200
Subject: [PATCH 02/14] add track pairing feature

- Automatically add corresponding track on other camera
- Add geometry/feature on other track
- Add a new setting to enable automatic track/geometry creation
---
 client/dive-common/components/Sidebar.vue     |  1 +
 .../components/TrackSettingsPanel.vue         | 32 +++++++
 client/dive-common/components/Viewer.vue      | 92 ++++++++++++++++++-
 client/dive-common/store/settings.ts          |  2 +
 client/dive-common/use/useModeManager.ts      | 15 ++-
 client/src/components/LayerManager.vue        | 17 +++-
 client/src/components/TrackList.vue           | 10 +-
 7 files changed, 162 insertions(+), 7 deletions(-)

diff --git a/client/dive-common/components/Sidebar.vue b/client/dive-common/components/Sidebar.vue
index be854ff6c..83f57fb90 100644
--- a/client/dive-common/components/Sidebar.vue
+++ b/client/dive-common/components/Sidebar.vue
@@ -152,6 +152,7 @@ export default defineComponent({
             :hotkeys-disabled="visible() || readOnlyMode"
             :height="bottomHeight"
             @track-seek="$emit('track-seek', $event)"
+            @track-added="$emit('track-added', $event)"
           >
             <template slot="settings">
               <TrackSettingsPanel
diff --git a/client/dive-common/components/TrackSettingsPanel.vue b/client/dive-common/components/TrackSettingsPanel.vue
index a689b5b31..13409cb60 100644
--- a/client/dive-common/components/TrackSettingsPanel.vue
+++ b/client/dive-common/components/TrackSettingsPanel.vue
@@ -207,6 +207,38 @@ export default defineComponent({
             </v-tooltip>
           </v-col>
         </v-row>
+
+        <v-row>
+          <v-col class="py-1">
+            <v-switch
+              v-model="
+                clientSettings.trackSettings.newTrackSettings.modeSettings.Track.stereoMatching"
+              class="my-0 ml-1 pt-0"
+              dense
+              label="Stereo Matching"
+              hide-details
+            />
+          </v-col>
+          <v-col
+            class="py-1 shrink"
+            align="right"
+          >
+            <v-tooltip
+              open-delay="200"
+              bottom
+            >
+              <template #activator="{ on }">
+                <v-icon
+                  small
+                  v-on="on"
+                >
+                  mdi-help
+                </v-icon>
+              </template>
+              <span>Help</span>
+            </v-tooltip>
+          </v-col>
+        </v-row>
       </template>
       <v-row
         v-if="clientSettings.trackSettings.newTrackSettings.mode === 'Detection'"
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index d513dcd86..2aad036ff 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -30,7 +30,7 @@ import {
   useMediaController,
 } from 'vue-media-annotator/components';
 import type { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
-import { getResponseError } from 'vue-media-annotator/utils';
+import { geojsonToBound, getResponseError } from 'vue-media-annotator/utils';
 
 /* DIVE COMMON */
 import PolygonBase from 'dive-common/recipes/polygonbase';
@@ -46,7 +46,8 @@ import clientSettingsSetup, { clientSettings } from 'dive-common/store/settings'
 import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import context from 'dive-common/store/context';
-import { MarkChangesPendingFilter } from 'vue-media-annotator/BaseFilterControls';
+import { MarkChangesPendingFilter, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
+import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
 import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
@@ -530,6 +531,26 @@ export default defineComponent({
       selectCamera(camera, event?.button === 2);
       ctx.emit('change-camera', camera);
     };
+    const trackSettings = toRef(clientSettings, 'trackSettings');
+
+    function onTrackAdded(trackId: AnnotationId) {
+      if (!clientSettings.trackSettings.newTrackSettings.modeSettings.Track.stereoMatching) {
+        return;
+      }
+
+      const { frame } = aggregateController.value;
+      const trackType = trackSettings.value.newTrackSettings.type;
+
+      multiCamList.value.filter((camera) => camera !== selectedCamera.value)
+        .forEach((camera) => {
+          const trackStore = cameraStore.camMap.value.get(camera)?.trackStore;
+          if (!trackStore) {
+            return;
+          }
+          trackStore.add(frame.value, trackType, undefined, trackId);
+        });
+    }
+
     /** Trigger data load */
     const loadData = async () => {
       try {
@@ -776,6 +797,65 @@ export default defineComponent({
       timelineEnabled,
 
     };
+    function onGeometryAdded({
+      data, type, update, frameNumber,
+    }: {
+      data: GeoJSON.Feature<GeoJSON.Polygon | GeoJSON.LineString | GeoJSON.Point>;
+      type: EditAnnotationTypes;
+      update: {
+        updateLayers: (
+          frame: number,
+          editingTrack: false | EditAnnotationTypes,
+          selectedTrackId: AnnotationId | null,
+          multiSeletListRef: readonly AnnotationId[],
+          enabledTracks: readonly TrackWithContext[],
+          visibleModes: readonly VisibleAnnotationTypes[],
+          selectedKey: string,
+        ) => void;
+        editingModeRef: Ref<false | EditAnnotationTypes>;
+        selectedTrackIdRef: Ref<AnnotationId | null>;
+        multiSeletListRef: Ref<readonly AnnotationId[]>;
+        enabledTracksRef: Ref<readonly TrackWithContext[]>;
+        visibleModesRef: Ref<readonly VisibleAnnotationTypes[]>;
+        selectedKeyRef: Ref<string>;
+      };
+      frameNumber: number;
+    }) {
+      if (type !== 'rectangle' || !clientSettings.trackSettings.newTrackSettings.modeSettings.Track.stereoMatching) {
+        return;
+      }
+
+      const trackId = selectedTrackId.value;
+
+      if (!trackId) {
+        return;
+      }
+
+      const pairedTracks = cameraStore.getTrackAll(trackId);
+      const bounds = geojsonToBound(data as GeoJSON.Feature<GeoJSON.Polygon>);
+
+      pairedTracks.forEach((trackData) => {
+        trackData.setFeature({
+          frame: frameNumber,
+          bounds,
+          keyframe: true,
+          interpolate: false,
+        });
+        update.updateLayers(
+          frameNumber,
+          update.editingModeRef.value,
+          trackData.id,
+          update.multiSeletListRef.value,
+          update.enabledTracksRef.value,
+          update.visibleModesRef.value,
+          update.selectedKeyRef.value,
+        );
+        handler.newTrackSettingsAfterLogic(trackData, {
+          skipAdvanceNextFrame: true,
+          keepCreating: true,
+        });
+      });
+    }
 
     provideAnnotator(
       {
@@ -870,6 +950,8 @@ export default defineComponent({
       selectedSet,
       displayComparisons,
       annotationSetColor: trackStyleManager.typeStyling.value.annotationSetColor,
+      onTrackAdded,
+      onGeometryAdded,
     };
   },
 });
@@ -1048,6 +1130,7 @@ export default defineComponent({
       <sidebar
         @import-types="trackFilters.importTypes($event)"
         @track-seek="aggregateController.seek($event)"
+        @track-added="onTrackAdded"
       >
         <template>
           <v-divider />
@@ -1105,7 +1188,10 @@ export default defineComponent({
                   intercept, getTiles, getTileURL }"
                 @large-image-warning="$emit('large-image-warning', true)"
               >
-                <LayerManager :camera="camera" />
+                <LayerManager
+                  :camera="camera"
+                  @geometry-added="onGeometryAdded"
+                />
               </component>
             </div>
           </div>
diff --git a/client/dive-common/store/settings.ts b/client/dive-common/store/settings.ts
index 25ba3f975..293663c68 100644
--- a/client/dive-common/store/settings.ts
+++ b/client/dive-common/store/settings.ts
@@ -16,6 +16,7 @@ interface AnnotationSettings {
         Track: {
           autoAdvanceFrame: boolean;
           interpolate: boolean;
+          stereoMatching: boolean;
         };
         Detection: {
           continuous: boolean;
@@ -45,6 +46,7 @@ const defaultSettings: AnnotationSettings = {
         Track: {
           autoAdvanceFrame: false,
           interpolate: false,
+          stereoMatching: false,
         },
         Detection: {
           continuous: false,
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index e3c63fdd0..1be5b9da5 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -343,13 +343,20 @@ export default function useModeManager({
   }
 
 
-  function newTrackSettingsAfterLogic(addedTrack: Track) {
+  function newTrackSettingsAfterLogic(
+    addedTrack: Track,
+    options: {
+      skipAdvanceNextFrame: boolean;
+      keepCreating: boolean;
+    } = { skipAdvanceNextFrame: false, keepCreating: false },
+  ) {
     // Default settings which are updated by the TrackSettings component
     let newCreatingValue = false; // by default, disable creating at the end of this function
     if (creating) {
       if (addedTrack && trackSettings.value.newTrackSettings !== null) {
         if (trackSettings.value.newTrackSettings.mode === 'Track'
         && trackSettings.value.newTrackSettings.modeSettings.Track.autoAdvanceFrame
+        && !options.skipAdvanceNextFrame
         ) {
           aggregateController.value.nextFrame();
           newCreatingValue = true;
@@ -362,6 +369,11 @@ export default function useModeManager({
         }
       }
     }
+
+    if (options.keepCreating) {
+      newCreatingValue = true;
+    }
+
     _nudgeEditingCanary();
     creating = newCreatingValue;
   }
@@ -785,6 +797,7 @@ export default function useModeManager({
       unstageFromMerge: handleUnstageFromMerge,
       startLinking: handleStartLinking,
       stopLinking: handleStopLinking,
+      newTrackSettingsAfterLogic,
     },
   };
 }
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 4295e989a..7082093a1 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -61,7 +61,7 @@ export default defineComponent({
     },
 
   },
-  setup(props) {
+  setup(props, ctx) {
     const handler = useHandler();
     const cameraStore = useCameraStore();
     const selectedCamera = useSelectedCamera();
@@ -433,6 +433,7 @@ export default defineComponent({
       key = '',
       cb: () => void,
     ) => {
+      const originalFrameNumber = frameNumberRef.value;
       if (type === 'rectangle') {
         const bounds = geojsonToBound(data as GeoJSON.Feature<GeoJSON.Polygon>);
         cb();
@@ -452,6 +453,20 @@ export default defineComponent({
           selectedKeyRef.value,
           props.colorBy,
         );
+        ctx.emit('geometry-added', {
+          data,
+          type,
+          frameNumber: originalFrameNumber,
+          update: {
+            updateLayers,
+            editingModeRef,
+            selectedTrackIdRef,
+            multiSeletListRef,
+            enabledTracksRef,
+            visibleModesRef,
+            selectedKeyRef,
+          },
+        });
       }
     });
     editAnnotationLayer.bus.$on('update:selectedIndex',
diff --git a/client/src/components/TrackList.vue b/client/src/components/TrackList.vue
index 5c095b471..db7352774 100644
--- a/client/src/components/TrackList.vue
+++ b/client/src/components/TrackList.vue
@@ -51,7 +51,7 @@ export default defineComponent({
 
   components: { TrackItem },
 
-  setup(props) {
+  setup(props, ctx) {
     const { prompt } = usePrompt();
     const readOnlyMode = useReadOnlyMode();
     const trackFilters = useTrackFilters();
@@ -192,6 +192,11 @@ export default defineComponent({
 
     const virtualHeight = computed(() => props.height - TrackListHeaderHeight);
 
+    function addTrackAndNotify() {
+      const trackId = trackAdd();
+      ctx.emit('track-added', trackId);
+    }
+
     return {
       allTypes: allTypesRef,
       data,
@@ -205,6 +210,7 @@ export default defineComponent({
       virtualListItems,
       virtualList: virtualScroll.virtualList,
       multiDelete,
+      addTrackAndNotify,
     };
   },
 });
@@ -279,7 +285,7 @@ export default defineComponent({
                 class="mr-2"
                 :color="newTrackColor"
                 v-on="on"
-                @click="trackAdd()"
+                @click="addTrackAndNotify()"
               >
                 <v-icon small>
                   mdi-plus

From adaacf8777c8c7477bdada18d7a0646bb504d975 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Tue, 29 Mar 2022 20:57:29 +0200
Subject: [PATCH 03/14] add 3d viewer for tracks and detections

- add @kitware/vtk.js dep
- display tracks and detections (3d pos using detection attributes)
- color the tracks according to their types
- highlight the currently selected track
- highlight the detections corresponding to the current frame
- reload view after leaving 3d viewer
---
 client/dive-common/components/Viewer.vue |  30 ++-
 client/package.json                      |   1 +
 client/src/components/TrackViewer.vue    | 295 +++++++++++++++++++++++
 client/yarn.lock                         |  78 ++++++
 4 files changed, 403 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/TrackViewer.vue

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 2aad036ff..6bd5feb18 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -48,6 +48,7 @@ import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import context from 'dive-common/store/context';
 import { MarkChangesPendingFilter, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
+import TrackViewer from 'vue-media-annotator/components/TrackViewer.vue';
 import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
@@ -71,6 +72,7 @@ export default defineComponent({
     UserGuideButton,
     EditorMenu,
     PrimaryAttributeTrackFilter,
+    TrackViewer,
   },
 
   // TODO: remove this in vue 3
@@ -99,6 +101,7 @@ export default defineComponent({
   setup(props, ctx) {
     const { prompt } = usePrompt();
     const loadError = ref('');
+    const tracks3d = ref(false);
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
     const multiCamList: Ref<string[]> = ref(['singleCam']);
@@ -748,6 +751,15 @@ export default defineComponent({
     watch(datasetId, reloadAnnotations);
     watch(readonlyState, () => handler.trackSelect(null, false));
 
+    // Handles the case where the user is leaving the 3d viewer, if so, just reloads the view
+    // in order to avoid broken features
+    watch(tracks3d, (newTracks3d: boolean, oldTracks3d: boolean) => {
+      if (oldTracks3d && !newTracks3d) {
+        reloadAnnotations();
+      }
+    });
+
+
     function handleResize() {
       if (controlsRef.value) {
         controlsHeight.value = controlsRef.value.$el.clientHeight;
@@ -952,6 +964,8 @@ export default defineComponent({
       annotationSetColor: trackStyleManager.typeStyling.value.annotationSetColor,
       onTrackAdded,
       onGeometryAdded,
+      datasetId,
+      tracks3d,
     };
   },
 });
@@ -1066,6 +1080,13 @@ export default defineComponent({
             {{ item }} {{ item === defaultCamera ? '(Default)': '' }}
           </template>
         </v-select>
+
+        <v-btn
+          color="secondary"
+          @click="tracks3d = !tracks3d"
+        >
+          Toggle 3d
+        </v-btn>
         <v-divider
           vertical
           class="mx-2"
@@ -1166,7 +1187,14 @@ export default defineComponent({
           ]"
           class="d-flex flex-column grow"
         >
-          <div class="d-flex grow">
+          <track-viewer
+            v-if="tracks3d"
+            :controls-height="controlsHeight"
+          />
+          <div
+            v-else
+            class="d-flex grow"
+          >
             <div
               v-for="camera in multiCamList"
               :key="camera"
diff --git a/client/package.json b/client/package.json
index 20fc92918..0ba55a96a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,6 +38,7 @@
     "@flatten-js/interval-tree": "^1.0.11",
     "@girder/components": "^3.2.0",
     "@mdi/font": "^6.2.95",
+    "@kitware/vtk.js": "^25.6.0",
     "@sentry/browser": "^5.24.2",
     "@sentry/integrations": "^5.24.2",
     "@vue/composition-api": "^1.1.4",
diff --git a/client/src/components/TrackViewer.vue b/client/src/components/TrackViewer.vue
new file mode 100644
index 000000000..15c63c702
--- /dev/null
+++ b/client/src/components/TrackViewer.vue
@@ -0,0 +1,295 @@
+<script lang="ts">
+import {
+  ref, onMounted, onBeforeUnmount, defineComponent, watch,
+} from '@vue/composition-api';
+
+import '@kitware/vtk.js/Rendering/Profiles/Glyph';
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+
+import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+
+import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
+import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
+import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
+import vtkPoints from '@kitware/vtk.js/Common/Core/Points';
+
+import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
+import {
+  Feature,
+} from 'vue-media-annotator/track';
+
+import {
+  useTrackFilters,
+  useSelectedTrackId,
+  useTrackStyleManager,
+} from 'vue-media-annotator/provides';
+import { TrackWithContext } from '../BaseFilterControls';
+
+
+import { injectAggregateController } from './annotators/useMediaController';
+
+function setInteractiveMarkerWidget(
+  renderWindow: vtkRenderWindow|null,
+): vtkOrientationMarkerWidget|null {
+  if (!renderWindow) {
+    return null;
+  }
+
+  const axes = vtkAxesActor.newInstance();
+  const orientationWidget = vtkOrientationMarkerWidget.newInstance({
+    actor: axes,
+    interactor: renderWindow.getInteractor(),
+  });
+  orientationWidget.setEnabled(true);
+  orientationWidget.setViewportCorner(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT,
+  );
+  orientationWidget.setViewportSize(0.15);
+  orientationWidget.setMinPixelSize(100);
+  orientationWidget.setMaxPixelSize(300);
+
+  // eslint-disable-next-line consistent-return
+  return orientationWidget;
+}
+
+export default defineComponent({
+  name: 'TrackViewer',
+
+  props: {
+    controlsHeight: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  setup() {
+    const vtkContainer = ref(null);
+    let fullScreenRenderWindow: vtkFullScreenRenderWindow|null = null;
+    let renderer: vtkRenderer|null = null;
+    let renderWindow: vtkRenderWindow|null = null;
+    let orientationWidget: vtkOrientationMarkerWidget|null = null;
+
+    const mediaController = injectAggregateController();
+    const filteredTracksRef = useTrackFilters();
+    const typeStylingRef = useTrackStyleManager();
+    const selectedTrackIdRef = useSelectedTrackId();
+    const { frame } = mediaController.value;
+    const sphereActors = new Map<number, Array<vtkActor>>();
+    const trackActors = new Map<number, vtkActor>();
+
+    const rotationMatrixTransform = vtkMatrixBuilder.buildFromDegree().rotateZ(-90);
+
+    const onSelectedTrackChangeFn = function onSelectedTrackChange(
+      newTrackId: number|null,
+      oldTrackId: number|undefined,
+    ) {
+      if (newTrackId) {
+        // eslint-disable-next-line no-unused-expressions
+        trackActors.get(newTrackId)?.getProperty().setLineWidth(5);
+      }
+
+      if (oldTrackId) {
+        // eslint-disable-next-line no-unused-expressions
+        trackActors.get(oldTrackId)?.getProperty().setLineWidth(3);
+      }
+      // eslint-disable-next-line no-unused-expressions
+      renderWindow?.render();
+    };
+
+    const onFrameChangeFn = function onFrameChange(
+      newFrameNumber: number,
+      oldFrameNumber?: number,
+    ) {
+      if (!renderWindow) {
+        return;
+      }
+
+      // eslint-disable-next-line no-unused-expressions
+      sphereActors.get(newFrameNumber)?.forEach((sphereActor) => sphereActor.setVisibility(true));
+
+      if (oldFrameNumber !== undefined) {
+        // eslint-disable-next-line no-unused-expressions
+        sphereActors
+          .get(oldFrameNumber)
+          ?.forEach((sphereActor) => sphereActor.setVisibility(false));
+        renderWindow.render();
+      }
+    };
+
+    const registerSphereActorFn = function registerSphereActor(frameId: number, actor: vtkActor) {
+      if (sphereActors.has(frameId)) {
+          // eslint-disable-next-line no-unused-expressions
+          sphereActors.get(frameId)?.push(actor);
+          return;
+      }
+      sphereActors.set(frameId, [actor]);
+    };
+
+    const drawFeatureFn = function drawFeature(
+      sphereSource: vtkSphereSource,
+      points: vtkPoints,
+      lines: vtkCellArray,
+      trackColor: number[],
+      feature: Feature,
+      idx: number,
+    ) {
+      const { attributes } = feature;
+
+      if (!attributes) {
+        return;
+      }
+      const { x, y, z } = attributes as { x: number; y: number; z: number };
+
+      if (x === undefined || y === undefined || z === undefined) {
+        return;
+      }
+
+      points.setPoint(
+        idx,
+        x,
+        y,
+        z,
+      );
+
+      if (idx > 0) {
+        // eslint-disable-next-line no-param-reassign
+        lines.getData()[idx] = idx - 1;
+        // eslint-disable-next-line no-param-reassign
+        lines.getData()[idx + 1] = idx;
+      }
+
+      const pointMapper = vtkMapper.newInstance();
+      pointMapper.setInputConnection(sphereSource.getOutputPort());
+
+      const pointActor = vtkActor.newInstance();
+
+      pointActor.setUserMatrix(rotationMatrixTransform.getMatrix());
+      pointActor.setPosition(x, y, z);
+      pointActor.setMapper(pointMapper);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      pointActor.getProperty().setColor(...trackColor);
+      pointActor.setVisibility(false);
+
+      registerSphereActorFn(feature.frame, pointActor);
+      if (renderer) {
+        renderer.addActor(pointActor);
+      }
+    };
+
+    const drawTrackFn = function drawTrack(trackWithContext: TrackWithContext) {
+      const track = trackWithContext.annotation;
+      // One point stands for one detection
+      const points = vtkPoints.newInstance();
+      const pd = vtkPolyData.newInstance();
+
+      // Get the color of the track
+      const trackColor = vtkMath.hex2float(
+        typeStylingRef.value.color(track.confidencePairs[0][0]),
+      );
+
+      const mapper = vtkMapper.newInstance();
+      const trackActor = vtkActor.newInstance();
+      const trackActorProperty = trackActor.getProperty();
+      const numberOfFeatures = track.features.length;
+      points.setNumberOfPoints(numberOfFeatures);
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      const lines = vtkCellArray.newInstance({ size: numberOfFeatures + 1 });
+      lines.getData()[0] = numberOfFeatures;
+
+      // We uses a sphere to represents a detection in space
+      const sphereSource = vtkSphereSource.newInstance();
+      sphereSource.setRadius(0.03);
+      sphereSource.setThetaResolution(20);
+
+      track.features
+        .filter((feature) => feature !== undefined)
+        .forEach(drawFeatureFn.bind(null, sphereSource, points, lines, trackColor));
+
+      pd.setPoints(points);
+
+      mapper.setInputData(pd);
+      rotationMatrixTransform.apply(points.getData());
+      pd.setLines(lines);
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      trackActorProperty.setColor(...trackColor);
+      trackActorProperty.setLineWidth(3);
+      trackActor.setMapper(mapper);
+      trackActors.set(track.trackId, trackActor);
+
+      if (renderer) {
+        renderer.addActor(trackActor);
+      }
+    };
+
+    watch(frame, onFrameChangeFn);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    watch(selectedTrackIdRef, onSelectedTrackChangeFn);
+
+    onMounted(() => {
+      if (fullScreenRenderWindow) {
+        return;
+      }
+
+      fullScreenRenderWindow = vtkFullScreenRenderWindow.newInstance({
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        rootContainer: vtkContainer.value,
+        background: [0, 0, 0],
+      });
+
+      renderer = fullScreenRenderWindow.getRenderer();
+      renderWindow = renderer.getRenderWindow();
+
+      orientationWidget = setInteractiveMarkerWidget(renderWindow);
+
+      filteredTracksRef.filteredAnnotations.value.forEach(drawTrackFn);
+
+      renderer.resetCamera();
+      onFrameChangeFn(frame.value, undefined);
+      onSelectedTrackChangeFn(selectedTrackIdRef.value, undefined);
+    });
+
+    onBeforeUnmount(() => {
+      // eslint-disable-next-line no-unused-expressions
+      fullScreenRenderWindow?.delete();
+      // eslint-disable-next-line no-unused-expressions
+      orientationWidget?.delete();
+      fullScreenRenderWindow = null;
+      orientationWidget = null;
+    });
+
+    return {
+      vtkContainer,
+    };
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="vtkContainer"
+    class="vtk-container"
+    :style="`--controls-height: ${controlsHeight}px`"
+  />
+</template>
+
+<style>
+.vtk-container div {
+  max-height: calc(100% - var(--controls-height));
+}
+</style>
diff --git a/client/yarn.lock b/client/yarn.lock
index 6b3f712ab..3b0b195b0 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1328,6 +1328,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.11.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b"
@@ -1990,6 +1997,25 @@
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
+"@kitware/vtk.js@^25.6.0":
+  version "25.6.0"
+  resolved "https://registry.yarnpkg.com/@kitware/vtk.js/-/vtk.js-25.6.0.tgz#015fb1a15492e34c98f3b2df4f6ce6369cd2043e"
+  integrity sha512-+tjRiFlpzyhmW/QMGSPj91Vwtzi5ClgahRJyf+VYURXhQUKa1W6A1/3Lx/xRtbN4esGoeQ5PxtEGkJdjVFxlYQ==
+  dependencies:
+    "@babel/runtime" "7.17.9"
+    commander "9.2.0"
+    d3-scale "4.0.2"
+    fflate "0.7.3"
+    gl-matrix "3.4.3"
+    globalthis "1.0.3"
+    seedrandom "3.0.5"
+    shader-loader "1.3.1"
+    shelljs "0.8.5"
+    spark-md5 "3.0.2"
+    stream-browserify "3.0.0"
+    webworker-promise "0.5.0"
+    worker-loader "3.0.8"
+    xmlbuilder2 "3.0.2"
 
 "@malept/cross-spawn-promise@^1.1.0":
   version "1.1.1"
@@ -5901,6 +5927,11 @@ commander@8.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.2.0.tgz#37fe2bde301d87d47a53adeff8b5915db1381ca8"
   integrity sha512-LLKxDvHeL91/8MIyTAD5BFMNtoIwztGPMiM/7Bl8rIPmHCZXRxmSWr91h57dpOpnQ6jIUqEWdXE/uBYMfiVZDA==
 
+commander@9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.2.0.tgz#6e21014b2ed90d8b7c9647230d8b7a94a4a419a9"
+  integrity sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==
+
 commander@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -6695,6 +6726,17 @@ d3-scale@4.0.0:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
+d3-scale@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
 d3-selection@1, d3-selection@^1.1.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.1.tgz#98eedbbe085fbda5bafa2f9e3f3a2f4d7d622a98"
@@ -8339,6 +8381,11 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fflate@0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.7.3.tgz#288b034ff0e9c380eaa2feff48c787b8371b7fa5"
+  integrity sha512-0Zz1jOzJWERhyhsimS54VTqOteCNwRtIlh8isdL0AXLo0g7xNTfTL7oWrkmCnPhZGocKIkWHBistBrrpoNH3aw==
+
 ffmpeg-ffprobe-static@^4.4.0-rc.11:
   version "4.4.0-rc.11"
   resolved "https://registry.yarnpkg.com/ffmpeg-ffprobe-static/-/ffmpeg-ffprobe-static-4.4.0-rc.11.tgz#3256f4a7caa58807fe46743bf63183e109de6a08"
@@ -8930,6 +8977,11 @@ gl-matrix@3.3.0:
   resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.3.0.tgz#232eef60b1c8b30a28cbbe75b2caf6c48fd6358b"
   integrity sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA==
 
+gl-matrix@3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.4.3.tgz#fc1191e8320009fd4d20e9339595c6041ddc22c9"
+  integrity sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==
+
 gl-vec3@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/gl-vec3/-/gl-vec3-1.1.3.tgz#a47c62f918774a06cbed1b65bcd0288ecbb03826"
@@ -9089,6 +9141,13 @@ globalthis@1.0.2:
   dependencies:
     define-properties "^1.1.3"
 
+globalthis@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+  dependencies:
+    define-properties "^1.1.3"
+
 globalthis@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.1.tgz#40116f5d9c071f9e8fb0037654df1ab3a83b7ef9"
@@ -15493,6 +15552,15 @@ shelljs@0.8.4:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
+shelljs@0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
+  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
 shelljs@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
@@ -15703,6 +15771,11 @@ space-separated-tokens@^1.1.2:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
+spark-md5@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
+  integrity sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==
+
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -18088,6 +18161,11 @@ webworker-promise@0.4.4:
   resolved "https://registry.yarnpkg.com/webworker-promise/-/webworker-promise-0.4.4.tgz#722b0ccade10ccb4e810325e5ebff00eb0e1b1be"
   integrity sha512-NfdSlaWqd+0iSrQudB0N0MELfJ9TVTlynhXMpi06piuZhyc9Yy7Hz6BFu2HUkvIb9lCS0pFW42ptd/JnXVnptg==
 
+webworker-promise@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/webworker-promise/-/webworker-promise-0.5.0.tgz#eb1aa89f26ca6a49765f332668644d74c2c8e320"
+  integrity sha512-14iR79jHAV7ozwvbfif+3wCaApT3I1g8Lo0rJZrwAu6wxZGx/08Y8KXz6as6ZLNUEEufeiEBBYrqyDBClXOsEw==
+
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"

From c74f5cabc21ae4ffb1de39379f16994c1fb618e0 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Thu, 4 Aug 2022 23:24:47 +0200
Subject: [PATCH 04/14] skip typescript compiler lib checking

this shutdowns useless errors when checking VTK.js
---
 client/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/tsconfig.json b/client/tsconfig.json
index b4a8fe1e1..e0146603e 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -12,6 +12,7 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": false,
     "baseUrl": ".",
+    "skipLibCheck": true,
     "paths": {
       "vue-media-annotator/*": [
         "src/*"

From 6c8a20f0155fc09cc4c675ed6b7a9eb127c0e7d7 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Fri, 5 Aug 2022 09:52:02 +0200
Subject: [PATCH 05/14] 3d viewer: various improvements and fixes

- fix track color lookup
- handle showing only selected track
- draw only filtered track
- show cube axes actor
- fix: show track by default
- fix: features are no longer exposed on track since https://github.com/Kitware/dive/pull/1287
so we now use a different mechanism to get the feature set of a track
- use getTracksMerged since we don't care about cameras in this mode, we just want the detections
and their attributes
---
 client/dive-common/components/Viewer.vue      |  16 +-
 client/src/components/TrackViewer.vue         | 295 ------------------
 .../track_3d_viewer/TrackManager.ts           |  73 +++++
 .../track_3d_viewer/TrackViewer.vue           | 254 +++++++++++++++
 .../track_3d_viewer/TrackViewerSettings.vue   |  60 ++++
 .../components/track_3d_viewer/trackUtils.ts  |  35 +++
 .../track_3d_viewer/useTrackDrawer.ts         | 267 ++++++++++++++++
 7 files changed, 704 insertions(+), 296 deletions(-)
 delete mode 100644 client/src/components/TrackViewer.vue
 create mode 100644 client/src/components/track_3d_viewer/TrackManager.ts
 create mode 100644 client/src/components/track_3d_viewer/TrackViewer.vue
 create mode 100644 client/src/components/track_3d_viewer/TrackViewerSettings.vue
 create mode 100644 client/src/components/track_3d_viewer/trackUtils.ts
 create mode 100644 client/src/components/track_3d_viewer/useTrackDrawer.ts

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 6bd5feb18..0e94a6f1c 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -48,7 +48,8 @@ import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import context from 'dive-common/store/context';
 import { MarkChangesPendingFilter, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
-import TrackViewer from 'vue-media-annotator/components/TrackViewer.vue';
+import TrackViewer from 'vue-media-annotator/components/track_3d_viewer/TrackViewer.vue';
+import TrackViewerSettings from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettings.vue';
 import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
@@ -73,6 +74,7 @@ export default defineComponent({
     EditorMenu,
     PrimaryAttributeTrackFilter,
     TrackViewer,
+    TrackViewerSettings,
   },
 
   // TODO: remove this in vue 3
@@ -101,7 +103,12 @@ export default defineComponent({
   setup(props, ctx) {
     const { prompt } = usePrompt();
     const loadError = ref('');
+
     const tracks3d = ref(false);
+    const trackViewerSettings = reactive({
+      onlyShowSelectedTrack: false,
+    });
+
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
     const multiCamList: Ref<string[]> = ref(['singleCam']);
@@ -966,6 +973,7 @@ export default defineComponent({
       onGeometryAdded,
       datasetId,
       tracks3d,
+      trackViewerSettings,
     };
   },
 });
@@ -1087,6 +1095,11 @@ export default defineComponent({
         >
           Toggle 3d
         </v-btn>
+
+        <track-viewer-settings
+          v-if="tracks3d"
+          :only-show-selected-track.sync="trackViewerSettings.onlyShowSelectedTrack"
+        />
         <v-divider
           vertical
           class="mx-2"
@@ -1190,6 +1203,7 @@ export default defineComponent({
           <track-viewer
             v-if="tracks3d"
             :controls-height="controlsHeight"
+            :only-show-selected-track="trackViewerSettings.onlyShowSelectedTrack"
           />
           <div
             v-else
diff --git a/client/src/components/TrackViewer.vue b/client/src/components/TrackViewer.vue
deleted file mode 100644
index 15c63c702..000000000
--- a/client/src/components/TrackViewer.vue
+++ /dev/null
@@ -1,295 +0,0 @@
-<script lang="ts">
-import {
-  ref, onMounted, onBeforeUnmount, defineComponent, watch,
-} from '@vue/composition-api';
-
-import '@kitware/vtk.js/Rendering/Profiles/Glyph';
-import '@kitware/vtk.js/Rendering/Profiles/Geometry';
-
-import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
-
-import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
-import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
-import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
-import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
-import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
-import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
-import vtkPoints from '@kitware/vtk.js/Common/Core/Points';
-
-import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
-import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
-import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
-import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
-import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
-import {
-  Feature,
-} from 'vue-media-annotator/track';
-
-import {
-  useTrackFilters,
-  useSelectedTrackId,
-  useTrackStyleManager,
-} from 'vue-media-annotator/provides';
-import { TrackWithContext } from '../BaseFilterControls';
-
-
-import { injectAggregateController } from './annotators/useMediaController';
-
-function setInteractiveMarkerWidget(
-  renderWindow: vtkRenderWindow|null,
-): vtkOrientationMarkerWidget|null {
-  if (!renderWindow) {
-    return null;
-  }
-
-  const axes = vtkAxesActor.newInstance();
-  const orientationWidget = vtkOrientationMarkerWidget.newInstance({
-    actor: axes,
-    interactor: renderWindow.getInteractor(),
-  });
-  orientationWidget.setEnabled(true);
-  orientationWidget.setViewportCorner(
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT,
-  );
-  orientationWidget.setViewportSize(0.15);
-  orientationWidget.setMinPixelSize(100);
-  orientationWidget.setMaxPixelSize(300);
-
-  // eslint-disable-next-line consistent-return
-  return orientationWidget;
-}
-
-export default defineComponent({
-  name: 'TrackViewer',
-
-  props: {
-    controlsHeight: {
-      type: Number,
-      required: true,
-    },
-  },
-
-  setup() {
-    const vtkContainer = ref(null);
-    let fullScreenRenderWindow: vtkFullScreenRenderWindow|null = null;
-    let renderer: vtkRenderer|null = null;
-    let renderWindow: vtkRenderWindow|null = null;
-    let orientationWidget: vtkOrientationMarkerWidget|null = null;
-
-    const mediaController = injectAggregateController();
-    const filteredTracksRef = useTrackFilters();
-    const typeStylingRef = useTrackStyleManager();
-    const selectedTrackIdRef = useSelectedTrackId();
-    const { frame } = mediaController.value;
-    const sphereActors = new Map<number, Array<vtkActor>>();
-    const trackActors = new Map<number, vtkActor>();
-
-    const rotationMatrixTransform = vtkMatrixBuilder.buildFromDegree().rotateZ(-90);
-
-    const onSelectedTrackChangeFn = function onSelectedTrackChange(
-      newTrackId: number|null,
-      oldTrackId: number|undefined,
-    ) {
-      if (newTrackId) {
-        // eslint-disable-next-line no-unused-expressions
-        trackActors.get(newTrackId)?.getProperty().setLineWidth(5);
-      }
-
-      if (oldTrackId) {
-        // eslint-disable-next-line no-unused-expressions
-        trackActors.get(oldTrackId)?.getProperty().setLineWidth(3);
-      }
-      // eslint-disable-next-line no-unused-expressions
-      renderWindow?.render();
-    };
-
-    const onFrameChangeFn = function onFrameChange(
-      newFrameNumber: number,
-      oldFrameNumber?: number,
-    ) {
-      if (!renderWindow) {
-        return;
-      }
-
-      // eslint-disable-next-line no-unused-expressions
-      sphereActors.get(newFrameNumber)?.forEach((sphereActor) => sphereActor.setVisibility(true));
-
-      if (oldFrameNumber !== undefined) {
-        // eslint-disable-next-line no-unused-expressions
-        sphereActors
-          .get(oldFrameNumber)
-          ?.forEach((sphereActor) => sphereActor.setVisibility(false));
-        renderWindow.render();
-      }
-    };
-
-    const registerSphereActorFn = function registerSphereActor(frameId: number, actor: vtkActor) {
-      if (sphereActors.has(frameId)) {
-          // eslint-disable-next-line no-unused-expressions
-          sphereActors.get(frameId)?.push(actor);
-          return;
-      }
-      sphereActors.set(frameId, [actor]);
-    };
-
-    const drawFeatureFn = function drawFeature(
-      sphereSource: vtkSphereSource,
-      points: vtkPoints,
-      lines: vtkCellArray,
-      trackColor: number[],
-      feature: Feature,
-      idx: number,
-    ) {
-      const { attributes } = feature;
-
-      if (!attributes) {
-        return;
-      }
-      const { x, y, z } = attributes as { x: number; y: number; z: number };
-
-      if (x === undefined || y === undefined || z === undefined) {
-        return;
-      }
-
-      points.setPoint(
-        idx,
-        x,
-        y,
-        z,
-      );
-
-      if (idx > 0) {
-        // eslint-disable-next-line no-param-reassign
-        lines.getData()[idx] = idx - 1;
-        // eslint-disable-next-line no-param-reassign
-        lines.getData()[idx + 1] = idx;
-      }
-
-      const pointMapper = vtkMapper.newInstance();
-      pointMapper.setInputConnection(sphereSource.getOutputPort());
-
-      const pointActor = vtkActor.newInstance();
-
-      pointActor.setUserMatrix(rotationMatrixTransform.getMatrix());
-      pointActor.setPosition(x, y, z);
-      pointActor.setMapper(pointMapper);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-      // @ts-ignore
-      pointActor.getProperty().setColor(...trackColor);
-      pointActor.setVisibility(false);
-
-      registerSphereActorFn(feature.frame, pointActor);
-      if (renderer) {
-        renderer.addActor(pointActor);
-      }
-    };
-
-    const drawTrackFn = function drawTrack(trackWithContext: TrackWithContext) {
-      const track = trackWithContext.annotation;
-      // One point stands for one detection
-      const points = vtkPoints.newInstance();
-      const pd = vtkPolyData.newInstance();
-
-      // Get the color of the track
-      const trackColor = vtkMath.hex2float(
-        typeStylingRef.value.color(track.confidencePairs[0][0]),
-      );
-
-      const mapper = vtkMapper.newInstance();
-      const trackActor = vtkActor.newInstance();
-      const trackActorProperty = trackActor.getProperty();
-      const numberOfFeatures = track.features.length;
-      points.setNumberOfPoints(numberOfFeatures);
-
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-      // @ts-ignore
-      const lines = vtkCellArray.newInstance({ size: numberOfFeatures + 1 });
-      lines.getData()[0] = numberOfFeatures;
-
-      // We uses a sphere to represents a detection in space
-      const sphereSource = vtkSphereSource.newInstance();
-      sphereSource.setRadius(0.03);
-      sphereSource.setThetaResolution(20);
-
-      track.features
-        .filter((feature) => feature !== undefined)
-        .forEach(drawFeatureFn.bind(null, sphereSource, points, lines, trackColor));
-
-      pd.setPoints(points);
-
-      mapper.setInputData(pd);
-      rotationMatrixTransform.apply(points.getData());
-      pd.setLines(lines);
-
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-      // @ts-ignore
-      trackActorProperty.setColor(...trackColor);
-      trackActorProperty.setLineWidth(3);
-      trackActor.setMapper(mapper);
-      trackActors.set(track.trackId, trackActor);
-
-      if (renderer) {
-        renderer.addActor(trackActor);
-      }
-    };
-
-    watch(frame, onFrameChangeFn);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    watch(selectedTrackIdRef, onSelectedTrackChangeFn);
-
-    onMounted(() => {
-      if (fullScreenRenderWindow) {
-        return;
-      }
-
-      fullScreenRenderWindow = vtkFullScreenRenderWindow.newInstance({
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        rootContainer: vtkContainer.value,
-        background: [0, 0, 0],
-      });
-
-      renderer = fullScreenRenderWindow.getRenderer();
-      renderWindow = renderer.getRenderWindow();
-
-      orientationWidget = setInteractiveMarkerWidget(renderWindow);
-
-      filteredTracksRef.filteredAnnotations.value.forEach(drawTrackFn);
-
-      renderer.resetCamera();
-      onFrameChangeFn(frame.value, undefined);
-      onSelectedTrackChangeFn(selectedTrackIdRef.value, undefined);
-    });
-
-    onBeforeUnmount(() => {
-      // eslint-disable-next-line no-unused-expressions
-      fullScreenRenderWindow?.delete();
-      // eslint-disable-next-line no-unused-expressions
-      orientationWidget?.delete();
-      fullScreenRenderWindow = null;
-      orientationWidget = null;
-    });
-
-    return {
-      vtkContainer,
-    };
-  },
-});
-</script>
-
-<template>
-  <div
-    ref="vtkContainer"
-    class="vtk-container"
-    :style="`--controls-height: ${controlsHeight}px`"
-  />
-</template>
-
-<style>
-.vtk-container div {
-  max-height: calc(100% - var(--controls-height));
-}
-</style>
diff --git a/client/src/components/track_3d_viewer/TrackManager.ts b/client/src/components/track_3d_viewer/TrackManager.ts
new file mode 100644
index 000000000..b879ecc92
--- /dev/null
+++ b/client/src/components/track_3d_viewer/TrackManager.ts
@@ -0,0 +1,73 @@
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+
+export type FrameNumber = number;
+
+export type TrackTracker = {
+  trackActor: vtkActor;
+  hidden: boolean; // true if the track should remain hidden whatever happens
+  detectionsMap: Map<FrameNumber, vtkActor>;
+};
+
+export type TracksMap = Map<AnnotationId, TrackTracker>;
+
+export default class TrackManager {
+  tracksMap: TracksMap;
+
+  framesMap: Map<FrameNumber, vtkActor[]>;
+
+  constructor() {
+    this.tracksMap = new Map();
+    this.framesMap = new Map();
+  }
+
+  registerTrack(
+    trackId: AnnotationId,
+    trackActor: vtkActor,
+    frameDetections: Array<[FrameNumber, vtkActor]>,
+  ) {
+    const detectionsMap = new Map<FrameNumber, vtkActor>();
+
+    frameDetections.forEach(([frameNumber, actor]) => {
+      detectionsMap.set(frameNumber, actor);
+
+      const actorList = this.framesMap.get(frameNumber);
+
+      if (actorList) {
+        actorList.push(actor);
+      } else {
+        this.framesMap.set(frameNumber, [actor]);
+      }
+    });
+
+    this.tracksMap.set(trackId, {
+      trackActor,
+      detectionsMap,
+      hidden: false, // track should not be hidden by default
+    });
+  }
+
+  getFrameActors(frameNumber: FrameNumber) {
+    return this.framesMap.get(frameNumber);
+  }
+
+  getTrackFrameDetection(trackId: AnnotationId, frameNumber: FrameNumber) {
+    return this.tracksMap.get(trackId)?.detectionsMap.get(frameNumber);
+  }
+
+  forEachTrack(cb: (track: TrackTracker, trackId: AnnotationId) => void) {
+    this.tracksMap.forEach(cb);
+  }
+
+  getTrack(trackId: AnnotationId) {
+    return this.tracksMap.get(trackId);
+  }
+
+  getAllTracks() {
+    return this.tracksMap;
+  }
+
+  hasTrack(trackId: AnnotationId) {
+    return this.tracksMap.has(trackId);
+  }
+}
diff --git a/client/src/components/track_3d_viewer/TrackViewer.vue b/client/src/components/track_3d_viewer/TrackViewer.vue
new file mode 100644
index 000000000..d8d106b5d
--- /dev/null
+++ b/client/src/components/track_3d_viewer/TrackViewer.vue
@@ -0,0 +1,254 @@
+<script lang="ts">
+import {
+  ref, onMounted, onBeforeUnmount, defineComponent, toRef,
+} from '@vue/composition-api';
+
+import '@kitware/vtk.js/Rendering/Profiles/Glyph';
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+
+import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+
+import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
+import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
+import vtkPoints from '@kitware/vtk.js/Common/Core/Points';
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore no declaration file
+import vtkCubeAxesActor from '@kitware/vtk.js/Rendering/Core/CubeAxesActor';
+import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
+import {
+  useSelectedTrackId,
+} from 'vue-media-annotator/provides';
+import { debounce } from '@kitware/vtk.js/macros';
+import { RGBColor } from '@kitware/vtk.js/types';
+import TrackManager from './TrackManager';
+import useTrackDrawer from './useTrackDrawer';
+import { injectAggregateController } from '../annotators/useMediaController';
+import { Feature, ViewUtils } from './trackUtils';
+
+function setInteractiveMarkerWidget(
+  renderWindow: vtkRenderWindow|null,
+): vtkOrientationMarkerWidget|null {
+  if (!renderWindow) {
+    return null;
+  }
+
+  const axes = vtkAxesActor.newInstance();
+  const orientationWidget = vtkOrientationMarkerWidget.newInstance({
+    actor: axes,
+    interactor: renderWindow.getInteractor(),
+  });
+  orientationWidget.setEnabled(true);
+  orientationWidget.setViewportCorner(
+    vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT,
+  );
+  orientationWidget.setViewportSize(0.15);
+  orientationWidget.setMinPixelSize(100);
+  orientationWidget.setMaxPixelSize(300);
+
+  return orientationWidget;
+}
+
+export default defineComponent({
+  name: 'TrackViewer',
+
+  props: {
+    controlsHeight: {
+      type: Number,
+      required: true,
+    },
+    onlyShowSelectedTrack: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const onlyShowSelectedTrack = toRef(props, 'onlyShowSelectedTrack');
+
+    // Initialize the data structure to keep track of every tracks present in the 3d view
+    const trackManager = new TrackManager();
+    const vtkContainer = ref(null);
+    let fullScreenRenderWindow: vtkFullScreenRenderWindow|null = null;
+    const rotationMatrixTransform = vtkMatrixBuilder.buildFromDegree().rotateZ(-90);
+    let renderer: vtkRenderer|null = null;
+    let renderWindow: vtkRenderWindow|null = null;
+    let orientationWidget: vtkOrientationMarkerWidget|null = null;
+
+    const drawFeature = function drawFeature(
+      sphereSource: vtkSphereSource,
+      points: vtkPoints,
+      lines: vtkCellArray,
+      trackColor: [number, number, number],
+      { x, y, z }: { x: number; y: number; z: number},
+      idx: number,
+    ) {
+      points.setPoint(
+        idx,
+        x,
+        y,
+        z,
+      );
+
+      if (idx > 0) {
+        // eslint-disable-next-line no-param-reassign
+        lines.getData()[idx] = idx - 1;
+        // eslint-disable-next-line no-param-reassign
+        lines.getData()[idx + 1] = idx;
+      }
+
+      const pointMapper = vtkMapper.newInstance();
+      pointMapper.setInputConnection(sphereSource.getOutputPort());
+
+      const pointActor = vtkActor.newInstance();
+
+      pointActor.setUserMatrix(rotationMatrixTransform.getMatrix());
+      pointActor.setPosition(x, y, z);
+      pointActor.setMapper(pointMapper);
+      pointActor.getProperty().setColor(...trackColor);
+      pointActor.setVisibility(false);
+
+      if (renderer) {
+        renderer.addActor(pointActor);
+      }
+
+      return pointActor;
+    };
+    const viewUtils: ViewUtils = {
+      rerender: () => undefined,
+      createTrackActors(trackColor: RGBColor, features: Array<Feature>) {
+        const numberOfFeatures = features.length;
+
+        // One point stands for one detection
+        const points = vtkPoints.newInstance();
+        const pd = vtkPolyData.newInstance();
+
+        const mapper = vtkMapper.newInstance();
+        const trackActor = vtkActor.newInstance();
+        const trackActorProperty = trackActor.getProperty();
+        points.setNumberOfPoints(numberOfFeatures);
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore bad typing rules
+        const lines = vtkCellArray.newInstance({ size: numberOfFeatures + 1 });
+        lines.getData()[0] = numberOfFeatures;
+
+        // We uses a sphere to represents a detection in space
+        const sphereSource = vtkSphereSource.newInstance();
+        sphereSource.setRadius(0.003);
+        sphereSource.setThetaResolution(20);
+
+        const frameDetections: [number, vtkActor][] = features
+          .map((feature, idx) => {
+            const featureActor = drawFeature(sphereSource, points, lines, trackColor, feature, idx);
+            return [feature.frameNumber, featureActor];
+          });
+
+        pd.setPoints(points);
+
+        mapper.setInputData(pd);
+        rotationMatrixTransform.apply(points.getData());
+        pd.setLines(lines);
+
+        trackActorProperty.setColor(...trackColor);
+        trackActorProperty.setLineWidth(3);
+        trackActor.setMapper(mapper);
+
+        if (renderer) {
+          renderer.addActor(trackActor);
+        }
+
+        return {
+          trackActor,
+          frameDetections,
+        };
+      },
+    };
+
+    const {
+      onSelectedTrackChange,
+      onFrameChange,
+      initializeTracks,
+    } = useTrackDrawer(trackManager, onlyShowSelectedTrack, viewUtils);
+
+    const mediaController = injectAggregateController();
+
+    const selectedTrackIdRef = useSelectedTrackId();
+    const { frame } = mediaController.value;
+
+    onMounted(() => {
+      if (fullScreenRenderWindow) {
+        return;
+      }
+
+      fullScreenRenderWindow = vtkFullScreenRenderWindow.newInstance({
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore rootContainer is not declared but exists
+        rootContainer: vtkContainer.value,
+        background: [0, 0, 0],
+      });
+
+      renderer = fullScreenRenderWindow.getRenderer();
+      const camera = renderer.getActiveCamera();
+
+      // trying to turn off shadows
+      renderer.getLights()[0].setShadowAttenuation(0);
+      renderWindow = renderer.getRenderWindow();
+      const cubeAxes = vtkCubeAxesActor.newInstance();
+      cubeAxes.setCamera(camera);
+
+      viewUtils.rerender = debounce(() => {
+        if (!renderWindow || !renderer) {
+          throw new Error('Render window or renderer does not exists.');
+        }
+        renderer.removeActor(cubeAxes);
+        const bounds = renderer.computeVisiblePropBounds();
+        cubeAxes.setDataBounds(bounds);
+        renderer.addActor(cubeAxes);
+        renderWindow.render();
+      }, 10);
+
+      orientationWidget = setInteractiveMarkerWidget(renderWindow);
+      initializeTracks();
+
+      const bounds = renderer.computeVisiblePropBounds();
+      cubeAxes.setDataBounds(bounds);
+      renderer.addActor(cubeAxes);
+
+      onFrameChange(frame.value, undefined);
+      onSelectedTrackChange(selectedTrackIdRef.value, undefined);
+    });
+
+    onBeforeUnmount(() => {
+      if (fullScreenRenderWindow) fullScreenRenderWindow.delete();
+      if (orientationWidget) orientationWidget.delete();
+      fullScreenRenderWindow = null;
+      orientationWidget = null;
+    });
+
+    return {
+      vtkContainer,
+    };
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="vtkContainer"
+    class="vtk-container"
+    :style="`--controls-height: ${controlsHeight}px`"
+  />
+</template>
+
+<style>
+.vtk-container div {
+  max-height: calc(100% - var(--controls-height));
+}
+</style>
diff --git a/client/src/components/track_3d_viewer/TrackViewerSettings.vue b/client/src/components/track_3d_viewer/TrackViewerSettings.vue
new file mode 100644
index 000000000..9832c7fd7
--- /dev/null
+++ b/client/src/components/track_3d_viewer/TrackViewerSettings.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+
+
+export default defineComponent({
+  name: 'TrackViewerSettings',
+
+  props: {
+    onlyShowSelectedTrack: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  setup() {
+    const menu = ref(false);
+
+    return {
+      menu,
+    };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <v-menu
+      v-model="menu"
+      :close-on-content-click="false"
+      :nudge-width="200"
+      offset-x
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          color="indigo"
+          dark
+          v-bind="attrs"
+          v-on="on"
+        >
+          Track Viewer settings
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-list>
+          <v-list-item>
+            <v-list-item-action>
+              <v-switch
+                :value="onlyShowSelectedTrack"
+                color="purple"
+                @change="$emit('update:only-show-selected-track', Boolean($event))"
+              />
+            </v-list-item-action>
+            <v-list-item-title>Only show selected track</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
diff --git a/client/src/components/track_3d_viewer/trackUtils.ts b/client/src/components/track_3d_viewer/trackUtils.ts
new file mode 100644
index 000000000..18e0aa5a1
--- /dev/null
+++ b/client/src/components/track_3d_viewer/trackUtils.ts
@@ -0,0 +1,35 @@
+import { TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
+import StyleManager from 'vue-media-annotator/StyleManager';
+import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import { RGBColor } from '@kitware/vtk.js/types';
+import { FrameNumber } from './TrackManager';
+
+export interface ViewUtils {
+  rerender: () => void;
+  createTrackActors: (trackColor: RGBColor, features: Array<Feature>) => {
+    trackActor: vtkActor;
+    frameDetections: Array<[FrameNumber, vtkActor]>;
+  };
+}
+
+export interface Feature {
+  x: number;
+  y: number;
+  z: number;
+  frameNumber: number;
+}
+
+export function getTrackType(trackWithContext: TrackWithContext) {
+  const track = trackWithContext.annotation;
+  return track.getType(
+    trackWithContext.context.confidencePairIndex,
+  );
+}
+
+export function getTrackColor(trackWithContext: TrackWithContext, styleManager: StyleManager) {
+  const trackType = getTrackType(trackWithContext);
+  return vtkMath.hex2float(
+    styleManager.typeStyling.value.color(trackType),
+  ) as [number, number, number];
+}
diff --git a/client/src/components/track_3d_viewer/useTrackDrawer.ts b/client/src/components/track_3d_viewer/useTrackDrawer.ts
new file mode 100644
index 000000000..d13ba42f0
--- /dev/null
+++ b/client/src/components/track_3d_viewer/useTrackDrawer.ts
@@ -0,0 +1,267 @@
+/* eslint-disable consistent-return */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Ref, watch } from '@vue/composition-api';
+import {
+  useTrackFilters,
+  useSelectedTrackId,
+  useTrackStyleManager,
+  useCameraStore,
+} from 'vue-media-annotator/provides';
+import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import { AnnotationWithContext, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
+import Track from 'vue-media-annotator/track';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import TrackManager, { TrackTracker } from './TrackManager';
+import { injectAggregateController } from '../annotators/useMediaController';
+import { ViewUtils, Feature, getTrackColor } from './trackUtils';
+
+export default function useTrackDrawer(
+  trackManager: TrackManager,
+  onlyShowSelectedTrack: Ref<boolean>,
+  viewUtils: ViewUtils,
+) {
+  const selectedTrackIdRef = useSelectedTrackId();
+  const mediaController = injectAggregateController();
+  const trackStyleManager = useTrackStyleManager();
+  const filteredTracksRef = useTrackFilters();
+  const cameraStore = useCameraStore();
+  const { frame: frameRef } = mediaController.value;
+
+  /**
+   * Emphasize on a specific track: make sure it is visible, increase its line width and
+   * set its color to selected
+   */
+  const emphasizeTrack = function emphasizeTrack(trackId: AnnotationId) {
+    const trackActor = trackManager.getTrack(trackId)?.trackActor;
+
+    if (!trackActor) {
+      throw new Error(`Track actor not found for track id: ${trackId}`);
+    }
+
+    trackActor.setVisibility(true);
+    trackActor.getProperty().setLineWidth(5);
+
+    const selectedColor = vtkMath.hex2float(
+      trackStyleManager.stateStyles.selected.color,
+    ) as [number, number, number];
+
+    trackActor.getProperty().setColor(...selectedColor);
+  };
+
+  const deEmphasizeTrack = function deEmphasizeTrack(trackId: AnnotationId, trackActor: vtkActor) {
+    // Restore line width
+    trackActor.getProperty().setLineWidth(3);
+
+    const trackWithContext = filteredTracksRef
+      .filteredAnnotations
+      .value
+      .find((track) => track.annotation.id === trackId);
+
+    // If we do not find the track anymore in the list,
+    // this is because the track has been filtered out in the meantime
+    // In this case we cannot get the color, so we do nothing as the track will be hidden anyway
+    if (trackWithContext) {
+      const trackColor = getTrackColor(trackWithContext, trackStyleManager);
+      trackActor.getProperty().setColor(...trackColor);
+    }
+  };
+
+  const hideTrack = function hideTrack(trackMap: TrackTracker) {
+    trackMap.trackActor.setVisibility(false);
+    trackMap.detectionsMap.forEach((actor) => actor.setVisibility(false));
+  };
+
+  /**
+   * Hide all tracks except the one matching the track id passed in the except param.
+   */
+  const hideAllTracks = function hideAllTracks(except?: AnnotationId | null) {
+    trackManager.forEachTrack(({ trackActor, detectionsMap }, trackId) => {
+      if (trackId !== except) {
+        trackActor.setVisibility(false);
+        detectionsMap.forEach((sphereActor) => {
+          sphereActor.setVisibility(false);
+        });
+      }
+    });
+  };
+
+  /**
+   * Show all tracks, except the ones that are explicitly flagged as hidden
+   */
+  const showAllTracks = function showAllTracks() {
+    trackManager.forEachTrack(({ trackActor, detectionsMap, hidden }) => {
+      if (hidden) {
+        return;
+      }
+
+      trackActor.setVisibility(true);
+      detectionsMap.forEach((sphereActor, frameNumber) => {
+        if (frameNumber === frameRef.value) {
+          sphereActor.setVisibility(true);
+        }
+      });
+    });
+  };
+
+  const initializeTrack = function initializeTrack(trackWithContext: TrackWithContext) {
+    const annotation = cameraStore.getTracksMerged(trackWithContext.annotation.id);
+    const trackColor = getTrackColor(trackWithContext, trackStyleManager);
+
+    // pre-process features in order to represent them
+    const features: Feature[] = annotation.features
+      .filter((feature) => feature !== undefined)
+      .map((feature) => {
+        const { attributes } = feature;
+
+        if (!attributes) {
+          return;
+        }
+
+        const { x, y, z } = attributes as { x: number; y: number; z: number };
+
+        if (x === undefined || y === undefined || z === undefined) {
+          return;
+        }
+
+        return {
+          x,
+          y,
+          z,
+          frameNumber: feature.frame,
+        };
+      })
+      .filter((feature) => feature !== undefined) as Feature[];
+
+    // Create the render objects for this track and render them
+    const { trackActor, frameDetections } = viewUtils.createTrackActors(trackColor, features);
+
+    trackManager.registerTrack(annotation.id, trackActor, frameDetections);
+  };
+
+  const initializeTracks = function drawTracks() {
+    filteredTracksRef.filteredAnnotations.value.forEach(initializeTrack);
+  };
+
+  /**
+   * Show the detections representation for the current frame and hide others.
+   * If onlyShowSelectedTrack is true, only detections from this track will be shown.
+   */
+  const onFrameChange = function onFrameChange(
+    newFrameNumber: number,
+    oldFrameNumber?: number,
+  ) {
+    if (onlyShowSelectedTrack.value && selectedTrackIdRef.value !== null) {
+      // Draw only detection from this frame and the selected track
+      const actor = trackManager.getTrackFrameDetection(selectedTrackIdRef.value, newFrameNumber);
+
+      if (actor) {
+        actor.setVisibility(true);
+      }
+    } else {
+      // Draw all frame actors if there are some.
+      const currentFrameSphereActors = trackManager.getFrameActors(newFrameNumber);
+
+      if (currentFrameSphereActors) {
+        currentFrameSphereActors.forEach((sphereActor) => sphereActor.setVisibility(true));
+      }
+    }
+
+    if (oldFrameNumber !== undefined) {
+      const previousFrameSphereActors = trackManager.getFrameActors(oldFrameNumber);
+
+      if (previousFrameSphereActors) {
+        previousFrameSphereActors.forEach((sphereActor) => sphereActor.setVisibility(false));
+      }
+    }
+    viewUtils.rerender();
+  };
+
+  /**
+   * Emphasize on the new selected track and de-emphasize the previous one.
+   */
+  const onSelectedTrackChange = function onSelectedTrackChange(
+    newTrackId: number|null,
+    oldTrackId: number|undefined,
+  ) {
+    if (newTrackId) {
+      emphasizeTrack(newTrackId);
+    }
+
+    if (oldTrackId) {
+      const trackMap = trackManager.getTrack(oldTrackId);
+
+      if (!trackMap) {
+        throw new Error(`Track tracker not found for track id ${oldTrackId}`);
+      }
+
+      deEmphasizeTrack(oldTrackId, trackMap.trackActor);
+
+      if (onlyShowSelectedTrack.value) {
+        hideTrack(trackMap);
+      }
+    }
+
+    viewUtils.rerender();
+  };
+
+  const onOnlyShowSelectedTrackChange = function onOnlyShowSelectedTrackChange(
+    newOnlyShowSelectedTrack: boolean,
+  ) {
+    if (newOnlyShowSelectedTrack) {
+      // Hide all tracks except the one that is selected (if there is one)
+      hideAllTracks(selectedTrackIdRef.value);
+    } else {
+      showAllTracks();
+    }
+
+    viewUtils.rerender();
+  };
+
+  const onFilteredAnnotationsChange = function onFilteredAnnotationsChange(
+    annotations: AnnotationWithContext<Track>[],
+  ) {
+    const trackIds: AnnotationId[] = [];
+
+    annotations.forEach((trackWithContext) => {
+      const trackId = trackWithContext.annotation.id;
+      trackIds.push(trackId);
+
+      const trackTracker = trackManager.getTrack(trackId);
+
+      // New track, so initialize it
+      if (!trackTracker) {
+        initializeTrack(trackWithContext);
+      } else {
+        // The track exists, so just show it
+        trackTracker.hidden = false;
+        trackTracker.trackActor.setVisibility(true);
+      }
+    });
+
+    // All tracks that we have should be hidden
+    trackManager.forEachTrack((track, trackId) => {
+      if (!trackIds.includes(trackId)) {
+        // eslint-disable-next-line no-param-reassign
+        track.hidden = true;
+        track.trackActor.setVisibility(false);
+      }
+    });
+
+    viewUtils.rerender();
+  };
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+  // @ts-ignore
+
+  watch(selectedTrackIdRef, onSelectedTrackChange);
+  watch(frameRef, onFrameChange);
+  watch(onlyShowSelectedTrack, onOnlyShowSelectedTrackChange);
+  watch(filteredTracksRef.filteredAnnotations, onFilteredAnnotationsChange);
+
+  return {
+    onSelectedTrackChange,
+    onFrameChange,
+    initializeTracks,
+  };
+}

From 92592d0ae1eee70a2fb89fc467dad0c086823132 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Mon, 6 Feb 2023 23:13:30 +0100
Subject: [PATCH 06/14] improve track 3d viewer

- align camera, camera mode, reset camera
- show 3d/2d views at the same time
- better track viewer settings menu (in sidebar)
- use one single lut per track type
- make detection glyph size configurable
- make cube axes actor bounds configurable
- draw detection glyph label with track id

- fix: feature coordinates yz inversion
---
 client/dive-common/components/Viewer.vue      |  39 +-
 client/dive-common/store/context.ts           |   4 +
 .../track_3d_viewer/TrackManager.ts           |  50 ++-
 .../track_3d_viewer/TrackViewer.vue           | 376 ++++++++++--------
 .../track_3d_viewer/TrackViewerSettings.vue   | 164 +++++---
 .../TrackViewerSettingsStore.ts               |  32 ++
 .../components/track_3d_viewer/lookupTable.ts |  50 +++
 client/src/components/track_3d_viewer/misc.ts |   2 +
 .../components/track_3d_viewer/trackUtils.ts  |  17 +-
 .../track_3d_viewer/useLabelDrawer.ts         |  82 ++++
 .../useOrientationMarkerWidget.ts             | 107 +++++
 .../track_3d_viewer/useTrackDrawer.ts         | 244 ++++++++++--
 .../src/components/track_3d_viewer/utils.ts   |  20 +
 client/src/provides.ts                        |  10 +
 14 files changed, 908 insertions(+), 289 deletions(-)
 create mode 100644 client/src/components/track_3d_viewer/TrackViewerSettingsStore.ts
 create mode 100644 client/src/components/track_3d_viewer/lookupTable.ts
 create mode 100644 client/src/components/track_3d_viewer/misc.ts
 create mode 100644 client/src/components/track_3d_viewer/useLabelDrawer.ts
 create mode 100644 client/src/components/track_3d_viewer/useOrientationMarkerWidget.ts
 create mode 100644 client/src/components/track_3d_viewer/utils.ts

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 0e94a6f1c..b07ed9ba6 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable max-len -->
 <script lang="ts">
 import {
   defineComponent, ref, toRef, computed, Ref,
@@ -50,6 +51,7 @@ import { MarkChangesPendingFilter, TrackWithContext } from 'vue-media-annotator/
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
 import TrackViewer from 'vue-media-annotator/components/track_3d_viewer/TrackViewer.vue';
 import TrackViewerSettings from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettings.vue';
+import TrackViewerSettingsStore from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettingsStore';
 import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
@@ -105,9 +107,6 @@ export default defineComponent({
     const loadError = ref('');
 
     const tracks3d = ref(false);
-    const trackViewerSettings = reactive({
-      onlyShowSelectedTrack: false,
-    });
 
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
@@ -192,6 +191,7 @@ export default defineComponent({
     const groupStyleManager = new StyleManager({ markChangesPending, vuetify });
 
     const cameraStore = new CameraStore({ markChangesPending });
+    const trackViewerSettingsStore = new TrackViewerSettingsStore();
     // This context for removal
     const removeGroups = (id: AnnotationId) => {
       cameraStore.removeGroups(id);
@@ -758,15 +758,6 @@ export default defineComponent({
     watch(datasetId, reloadAnnotations);
     watch(readonlyState, () => handler.trackSelect(null, false));
 
-    // Handles the case where the user is leaving the 3d viewer, if so, just reloads the view
-    // in order to avoid broken features
-    watch(tracks3d, (newTracks3d: boolean, oldTracks3d: boolean) => {
-      if (oldTracks3d && !newTracks3d) {
-        reloadAnnotations();
-      }
-    });
-
-
     function handleResize() {
       if (controlsRef.value) {
         controlsHeight.value = controlsRef.value.$el.clientHeight;
@@ -881,6 +872,7 @@ export default defineComponent({
         annotatorPreferences: toRef(clientSettings, 'annotatorPreferences'),
         attributes,
         cameraStore,
+        trackViewerSettingsStore,
         datasetId,
         editingMode,
         groupFilters,
@@ -973,7 +965,6 @@ export default defineComponent({
       onGeometryAdded,
       datasetId,
       tracks3d,
-      trackViewerSettings,
     };
   },
 });
@@ -1096,10 +1087,6 @@ export default defineComponent({
           Toggle 3d
         </v-btn>
 
-        <track-viewer-settings
-          v-if="tracks3d"
-          :only-show-selected-track.sync="trackViewerSettings.onlyShowSelectedTrack"
-        />
         <v-divider
           vertical
           class="mx-2"
@@ -1200,20 +1187,22 @@ export default defineComponent({
           ]"
           class="d-flex flex-column grow"
         >
-          <track-viewer
-            v-if="tracks3d"
-            :controls-height="controlsHeight"
-            :only-show-selected-track="trackViewerSettings.onlyShowSelectedTrack"
-          />
           <div
-            v-else
-            class="d-flex grow"
+            class="d-flex grow flex-wrap"
+            :style="{ 'max-height': `calc(100% - ${controlsHeight}px)` }"
           >
+            <div
+              v-if="tracks3d"
+              :style="{ height: '50%', width: '100%', 'flex-basis': '100%' }"
+            >
+              <track-viewer :controls-height="controlsHeight" />
+            </div>
+
             <div
               v-for="camera in multiCamList"
               :key="camera"
               class="d-flex flex-column grow"
-              :style="{ height: `calc(100% - ${controlsHeight}px)`}"
+              :style="tracks3d ? { height: '50%' } : { height: '100%' }"
               @mousedown.left="changeCamera(camera, $event)"
               @mouseup.right="changeCamera(camera, $event)"
             >
diff --git a/client/dive-common/store/context.ts b/client/dive-common/store/context.ts
index 0216500cd..241ba5b90 100644
--- a/client/dive-common/store/context.ts
+++ b/client/dive-common/store/context.ts
@@ -7,6 +7,7 @@ import GroupSidebar from 'dive-common/components/GroupSidebar.vue';
 import AttributesSideBar from 'dive-common/components/Attributes/AttributesSideBar.vue';
 import MultiCamTools from 'dive-common/components/MultiCamTools.vue';
 import AttributeTrackFilters from 'vue-media-annotator/components/AttributeTrackFilters.vue';
+import TrackViewerSettings from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettings.vue';
 
 Vue.use(Install);
 
@@ -51,6 +52,9 @@ const componentMap: Record<string, ComponentMapItem> = {
   [AttributeTrackFilters.name]: {
     description: 'Attribute Track Filters',
     component: AttributeTrackFilters,
+  [TrackViewerSettings.name]: {
+    description: 'Track Viewer Settings',
+    component: TrackViewerSettings,
   },
 };
 
diff --git a/client/src/components/track_3d_viewer/TrackManager.ts b/client/src/components/track_3d_viewer/TrackManager.ts
index b879ecc92..b59070f74 100644
--- a/client/src/components/track_3d_viewer/TrackManager.ts
+++ b/client/src/components/track_3d_viewer/TrackManager.ts
@@ -1,5 +1,6 @@
 import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
 import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import { RGBColor } from './lookupTable';
 
 export type FrameNumber = number;
 
@@ -7,14 +8,21 @@ export type TrackTracker = {
   trackActor: vtkActor;
   hidden: boolean; // true if the track should remain hidden whatever happens
   detectionsMap: Map<FrameNumber, vtkActor>;
+  trackColor: RGBColor;
+  trackType: string;
 };
 
 export type TracksMap = Map<AnnotationId, TrackTracker>;
 
+export type FramesMap = Map<FrameNumber, {
+  trackIds: AnnotationId[];
+  detectionActors: vtkActor[];
+}>;
+
 export default class TrackManager {
   tracksMap: TracksMap;
 
-  framesMap: Map<FrameNumber, vtkActor[]>;
+  framesMap: FramesMap;
 
   constructor() {
     this.tracksMap = new Map();
@@ -25,18 +33,26 @@ export default class TrackManager {
     trackId: AnnotationId,
     trackActor: vtkActor,
     frameDetections: Array<[FrameNumber, vtkActor]>,
+    trackColor: RGBColor,
+    trackType: string,
   ) {
     const detectionsMap = new Map<FrameNumber, vtkActor>();
 
     frameDetections.forEach(([frameNumber, actor]) => {
+      actor.getProperty().setDiffuse(0.6);
+      actor.getProperty().setAmbient(0.6);
       detectionsMap.set(frameNumber, actor);
 
-      const actorList = this.framesMap.get(frameNumber);
+      const frameTracker = this.framesMap.get(frameNumber);
 
-      if (actorList) {
-        actorList.push(actor);
+      if (frameTracker) {
+        frameTracker.trackIds.push(trackId);
+        frameTracker.detectionActors.push(actor);
       } else {
-        this.framesMap.set(frameNumber, [actor]);
+        this.framesMap.set(frameNumber, {
+          trackIds: [trackId],
+          detectionActors: [actor],
+        });
       }
     });
 
@@ -44,10 +60,12 @@ export default class TrackManager {
       trackActor,
       detectionsMap,
       hidden: false, // track should not be hidden by default
+      trackColor,
+      trackType,
     });
   }
 
-  getFrameActors(frameNumber: FrameNumber) {
+  getFrameTracker(frameNumber: FrameNumber) {
     return this.framesMap.get(frameNumber);
   }
 
@@ -70,4 +88,24 @@ export default class TrackManager {
   hasTrack(trackId: AnnotationId) {
     return this.tracksMap.has(trackId);
   }
+
+  getTrackActorsInFrameRange(frameStart: number, frameCount: number) {
+    const trackActors: Set<vtkActor> = new Set();
+
+    // eslint-disable-next-line no-plusplus
+    for (let frame = frameStart; frame < frameStart + frameCount; frame++) {
+      const frameTracker = this.framesMap.get(frame);
+
+      if (frameTracker && frameTracker.trackIds.length > 0) {
+        frameTracker.trackIds.forEach((trackId) => {
+          trackActors.add(
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.tracksMap.get(trackId)!.trackActor,
+          );
+        });
+      }
+    }
+
+    return trackActors;
+  }
 }
diff --git a/client/src/components/track_3d_viewer/TrackViewer.vue b/client/src/components/track_3d_viewer/TrackViewer.vue
index d8d106b5d..5131476a6 100644
--- a/client/src/components/track_3d_viewer/TrackViewer.vue
+++ b/client/src/components/track_3d_viewer/TrackViewer.vue
@@ -1,59 +1,36 @@
 <script lang="ts">
 import {
-  ref, onMounted, onBeforeUnmount, defineComponent, toRef,
+  ref, onMounted, onBeforeUnmount, defineComponent, watch,
 } from '@vue/composition-api';
 
 import '@kitware/vtk.js/Rendering/Profiles/Glyph';
 import '@kitware/vtk.js/Rendering/Profiles/Geometry';
 
-import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
-
-import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
-import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
-import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
-import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
-import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
-import vtkPoints from '@kitware/vtk.js/Common/Core/Points';
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore no declaration file
 import vtkCubeAxesActor from '@kitware/vtk.js/Rendering/Core/CubeAxesActor';
-import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
-import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
-import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore no declaration file
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
+import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore no declaration file
+import vtkInteractorStyleTrackballCamera from '@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera';
+import { debounce } from '@kitware/vtk.js/macros';
 import {
+  useTrackViewerSettingsStore,
   useSelectedTrackId,
 } from 'vue-media-annotator/provides';
-import { debounce } from '@kitware/vtk.js/macros';
-import { RGBColor } from '@kitware/vtk.js/types';
+import { ViewUtils } from './trackUtils';
 import TrackManager from './TrackManager';
 import useTrackDrawer from './useTrackDrawer';
+import { smoothBounds } from './utils';
+import { noOp } from './misc';
+import { useOrientationMarkerWidget } from './useOrientationMarkerWidget';
+import { useLabelDrawer } from './useLabelDrawer';
 import { injectAggregateController } from '../annotators/useMediaController';
-import { Feature, ViewUtils } from './trackUtils';
-
-function setInteractiveMarkerWidget(
-  renderWindow: vtkRenderWindow|null,
-): vtkOrientationMarkerWidget|null {
-  if (!renderWindow) {
-    return null;
-  }
-
-  const axes = vtkAxesActor.newInstance();
-  const orientationWidget = vtkOrientationMarkerWidget.newInstance({
-    actor: axes,
-    interactor: renderWindow.getInteractor(),
-  });
-  orientationWidget.setEnabled(true);
-  orientationWidget.setViewportCorner(
-    vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT,
-  );
-  orientationWidget.setViewportSize(0.15);
-  orientationWidget.setMinPixelSize(100);
-  orientationWidget.setMaxPixelSize(300);
-
-  return orientationWidget;
-}
 
 export default defineComponent({
   name: 'TrackViewer',
@@ -63,173 +40,227 @@ export default defineComponent({
       type: Number,
       required: true,
     },
-    onlyShowSelectedTrack: {
-      type: Boolean,
-      required: true,
-    },
   },
 
-  setup(props) {
-    const onlyShowSelectedTrack = toRef(props, 'onlyShowSelectedTrack');
+  setup() {
+    const orientationMarkerWidget = useOrientationMarkerWidget();
+    const trackViewerSettingsStore = useTrackViewerSettingsStore();
+
+    const {
+      onlyShowSelectedTrack,
+      cameraParallelProjection,
+      detectionGlyphSize,
+      cubeAxesBounds,
+      adjustCubeAxesBoundsManually,
+    } = trackViewerSettingsStore;
+
+    const renderer = ref<vtkRenderer>();
+    const viewportDimensions = ref({
+      height: 0,
+      width: 0,
+    });
 
     // Initialize the data structure to keep track of every tracks present in the 3d view
     const trackManager = new TrackManager();
-    const vtkContainer = ref(null);
-    let fullScreenRenderWindow: vtkFullScreenRenderWindow|null = null;
-    const rotationMatrixTransform = vtkMatrixBuilder.buildFromDegree().rotateZ(-90);
-    let renderer: vtkRenderer|null = null;
-    let renderWindow: vtkRenderWindow|null = null;
-    let orientationWidget: vtkOrientationMarkerWidget|null = null;
-
-    const drawFeature = function drawFeature(
-      sphereSource: vtkSphereSource,
-      points: vtkPoints,
-      lines: vtkCellArray,
-      trackColor: [number, number, number],
-      { x, y, z }: { x: number; y: number; z: number},
-      idx: number,
-    ) {
-      points.setPoint(
-        idx,
-        x,
-        y,
-        z,
-      );
-
-      if (idx > 0) {
-        // eslint-disable-next-line no-param-reassign
-        lines.getData()[idx] = idx - 1;
-        // eslint-disable-next-line no-param-reassign
-        lines.getData()[idx + 1] = idx;
-      }
-
-      const pointMapper = vtkMapper.newInstance();
-      pointMapper.setInputConnection(sphereSource.getOutputPort());
+    const vtkContainer = ref<HTMLDivElement>();
 
-      const pointActor = vtkActor.newInstance();
-
-      pointActor.setUserMatrix(rotationMatrixTransform.getMatrix());
-      pointActor.setPosition(x, y, z);
-      pointActor.setMapper(pointMapper);
-      pointActor.getProperty().setColor(...trackColor);
-      pointActor.setVisibility(false);
-
-      if (renderer) {
-        renderer.addActor(pointActor);
-      }
+    let renderWindow: vtkRenderWindow | undefined;
+    let renderWindowInteractor: vtkRenderWindowInteractor | undefined;
+    const openglRenderWindow = ref<vtkOpenGLRenderWindow>();
 
-      return pointActor;
-    };
     const viewUtils: ViewUtils = {
-      rerender: () => undefined,
-      createTrackActors(trackColor: RGBColor, features: Array<Feature>) {
-        const numberOfFeatures = features.length;
-
-        // One point stands for one detection
-        const points = vtkPoints.newInstance();
-        const pd = vtkPolyData.newInstance();
-
-        const mapper = vtkMapper.newInstance();
-        const trackActor = vtkActor.newInstance();
-        const trackActorProperty = trackActor.getProperty();
-        points.setNumberOfPoints(numberOfFeatures);
-
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore bad typing rules
-        const lines = vtkCellArray.newInstance({ size: numberOfFeatures + 1 });
-        lines.getData()[0] = numberOfFeatures;
-
-        // We uses a sphere to represents a detection in space
-        const sphereSource = vtkSphereSource.newInstance();
-        sphereSource.setRadius(0.003);
-        sphereSource.setThetaResolution(20);
-
-        const frameDetections: [number, vtkActor][] = features
-          .map((feature, idx) => {
-            const featureActor = drawFeature(sphereSource, points, lines, trackColor, feature, idx);
-            return [feature.frameNumber, featureActor];
-          });
+      rerender: noOp,
+    };
 
-        pd.setPoints(points);
+    const mediaController = injectAggregateController();
 
-        mapper.setInputData(pd);
-        rotationMatrixTransform.apply(points.getData());
-        pd.setLines(lines);
+    const selectedTrackIdRef = useSelectedTrackId();
+    const { frame: frameRef } = mediaController.value;
 
-        trackActorProperty.setColor(...trackColor);
-        trackActorProperty.setLineWidth(3);
-        trackActor.setMapper(mapper);
+    let vtkContainerResizeObserver: ResizeObserver | null = null;
 
-        if (renderer) {
-          renderer.addActor(trackActor);
-        }
 
-        return {
-          trackActor,
-          frameDetections,
-        };
-      },
-    };
+    const { initialize: initializeTrackDrawer } = useTrackDrawer({
+      trackManager,
+      onlyShowSelectedTrack,
+      detectionGlyphSize,
+      viewUtils,
+      renderer,
+    });
 
-    const {
-      onSelectedTrackChange,
-      onFrameChange,
-      initializeTracks,
-    } = useTrackDrawer(trackManager, onlyShowSelectedTrack, viewUtils);
 
-    const mediaController = injectAggregateController();
+    const { initialize: initializeLabelDrawer, drawLabels, clearLabelContext } = useLabelDrawer({
+      renderer,
+      viewportDimensions,
+      openglRenderWindow,
+    });
 
-    const selectedTrackIdRef = useSelectedTrackId();
-    const { frame } = mediaController.value;
+    const drawCurrentFrameDetectionLabels = function drawCurrentFrameDetectionLabels() {
+      clearLabelContext();
 
-    onMounted(() => {
-      if (fullScreenRenderWindow) {
-        return;
+      if (!onlyShowSelectedTrack.value) {
+        const frameTracker = trackManager.getFrameTracker(frameRef.value);
+        if (frameTracker) {
+          const positionToLabel = new Map();
+          frameTracker.detectionActors.forEach((actor, idx) => {
+            positionToLabel.set(actor.getPosition(), frameTracker.trackIds[idx]);
+          });
+          drawLabels(positionToLabel);
+        }
+      } else if (selectedTrackIdRef.value) {
+        const trackTracker = trackManager.getTrack(selectedTrackIdRef.value);
+        if (trackTracker) {
+          const frameDetectionActor = trackTracker.detectionsMap.get(frameRef.value);
+          if (frameDetectionActor) {
+            const positionToLabel = new Map();
+            positionToLabel.set(frameDetectionActor.getPosition(), selectedTrackIdRef.value);
+            drawLabels(positionToLabel);
+          }
+        }
       }
+    };
 
-      fullScreenRenderWindow = vtkFullScreenRenderWindow.newInstance({
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore rootContainer is not declared but exists
-        rootContainer: vtkContainer.value,
-        background: [0, 0, 0],
+    onMounted(() => {
+      renderWindow = vtkRenderWindow.newInstance();
+
+      openglRenderWindow.value = vtkOpenGLRenderWindow.newInstance();
+      renderWindow.addView(openglRenderWindow.value);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      openglRenderWindow.value.setContainer(vtkContainer.value!);
+
+      // Initialize the openglRenderWindow original size
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const { width, height } = vtkContainer.value!.getBoundingClientRect();
+      openglRenderWindow.value.setSize(width, height);
+      viewportDimensions.value.width = width;
+      viewportDimensions.value.height = height;
+      renderWindowInteractor = vtkRenderWindowInteractor.newInstance();
+      renderWindowInteractor.setView(openglRenderWindow.value);
+      renderWindowInteractor.initialize();
+      renderWindowInteractor.bindEvents(vtkContainer.value);
+      renderWindowInteractor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
+
+      renderWindowInteractor.onAnimation(drawCurrentFrameDetectionLabels);
+
+      renderer.value = vtkRenderer.newInstance({
+        background: [0.5, 0.5, 0.5],
       });
+      const { labelTextCanvas } = initializeLabelDrawer();
+      // Initialize the openglRenderWindow original size
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      vtkContainer.value!.appendChild(labelTextCanvas);
+      renderWindow.addRenderer(renderer.value);
 
-      renderer = fullScreenRenderWindow.getRenderer();
-      const camera = renderer.getActiveCamera();
+      const camera = renderer.value.getActiveCamera();
+
+      watch(cameraParallelProjection, (parProjection) => {
+        if (!renderer.value) {
+          throw new Error('vtkRenderer instance not found.');
+        }
+        renderer.value.getActiveCamera().setParallelProjection(parProjection);
+        // renderer.value.resetCamera();
+        viewUtils.rerender();
+      }, {
+        immediate: true,
+      });
 
       // trying to turn off shadows
-      renderer.getLights()[0].setShadowAttenuation(0);
-      renderWindow = renderer.getRenderWindow();
+      const light = renderer.value.getLights()[0];
+
+      if (light) {
+        light.setShadowAttenuation(0);
+      }
+
       const cubeAxes = vtkCubeAxesActor.newInstance();
       cubeAxes.setCamera(camera);
 
       viewUtils.rerender = debounce(() => {
-        if (!renderWindow || !renderer) {
-          throw new Error('Render window or renderer does not exists.');
+        if (!renderWindow || renderWindow.isDeleted() || !renderer.value) {
+          // pass
+        } else {
+          if (!adjustCubeAxesBoundsManually.value) {
+            renderer.value.removeActor(cubeAxes);
+            const bounds = renderer.value.computeVisiblePropBounds();
+            const smoothedBounds = smoothBounds(bounds);
+            cubeAxes.setDataBounds(smoothedBounds);
+            renderer.value.addActor(cubeAxes);
+          }
+          drawCurrentFrameDetectionLabels();
+
+          renderWindow.render();
         }
-        renderer.removeActor(cubeAxes);
-        const bounds = renderer.computeVisiblePropBounds();
-        cubeAxes.setDataBounds(bounds);
-        renderer.addActor(cubeAxes);
-        renderWindow.render();
       }, 10);
 
-      orientationWidget = setInteractiveMarkerWidget(renderWindow);
-      initializeTracks();
+      orientationMarkerWidget.enable(
+        renderWindow.getInteractor(),
+        renderer.value.getActiveCamera(),
+        viewUtils.rerender,
+      );
+
+      // Initial track drawing
+      initializeTrackDrawer();
+
+      const bounds = renderer.value.computeVisiblePropBounds();
+      // Always override the default bounds value on initialize
+      const smoothedBounds = smoothBounds(bounds);
+      cubeAxes.setDataBounds(smoothedBounds);
+
+      cubeAxesBounds.value = {
+        xrange: smoothedBounds.slice(0, 2) as [number, number],
+        yrange: smoothedBounds.slice(2, 4) as [number, number],
+        zrange: smoothedBounds.slice(4, 6) as [number, number],
+      };
+
+      watch(cubeAxesBounds, (newRanges) => {
+        cubeAxes.setDataBounds([
+          ...newRanges.xrange,
+          ...newRanges.yrange,
+          ...newRanges.zrange,
+        ]);
+        viewUtils.rerender();
+      }, {
+        deep: true,
+      });
+
+      renderer.value.addActor(cubeAxes);
 
-      const bounds = renderer.computeVisiblePropBounds();
-      cubeAxes.setDataBounds(bounds);
-      renderer.addActor(cubeAxes);
+      vtkContainerResizeObserver = new ResizeObserver((entries: readonly ResizeObserverEntry[]) => {
+        const vtkContainerEntry = entries[0];
+        // eslint-disable-next-line no-shadow
+        const { width, height } = vtkContainerEntry.contentRect;
+        if (openglRenderWindow.value) openglRenderWindow.value.setSize(width, height);
 
-      onFrameChange(frame.value, undefined);
-      onSelectedTrackChange(selectedTrackIdRef.value, undefined);
+        viewportDimensions.value.width = width;
+        viewportDimensions.value.height = height;
+
+        labelTextCanvas.setAttribute('width', String(width));
+        labelTextCanvas.setAttribute('height', String(height));
+        viewUtils.rerender();
+      });
+      // Observe the renderWindow container so we automatically resize the openglRenderWindow
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      vtkContainerResizeObserver.observe(vtkContainer.value!);
+      renderer.value.resetCamera();
+      viewUtils.rerender();
     });
 
     onBeforeUnmount(() => {
-      if (fullScreenRenderWindow) fullScreenRenderWindow.delete();
-      if (orientationWidget) orientationWidget.delete();
-      fullScreenRenderWindow = null;
-      orientationWidget = null;
+      viewUtils.rerender = noOp;
+      // Stop observing for resize
+      if (vtkContainerResizeObserver) vtkContainerResizeObserver.disconnect();
+      orientationMarkerWidget.disable();
+
+      if (renderer.value) renderer.value.delete();
+      if (openglRenderWindow.value) openglRenderWindow.value.delete();
+      if (renderWindow) renderWindow.delete();
+
+      if (renderWindowInteractor) {
+        renderWindowInteractor.unbindEvents();
+        renderWindowInteractor.delete();
+      }
+      openglRenderWindow.value = undefined;
+      renderWindow = undefined;
+      renderWindowInteractor = undefined;
     });
 
     return {
@@ -248,7 +279,8 @@ export default defineComponent({
 </template>
 
 <style>
-.vtk-container div {
-  max-height: calc(100% - var(--controls-height));
+.vtk-container {
+  width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/client/src/components/track_3d_viewer/TrackViewerSettings.vue b/client/src/components/track_3d_viewer/TrackViewerSettings.vue
index 9832c7fd7..e3dbfc271 100644
--- a/client/src/components/track_3d_viewer/TrackViewerSettings.vue
+++ b/client/src/components/track_3d_viewer/TrackViewerSettings.vue
@@ -1,60 +1,132 @@
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
-
+import { defineComponent } from '@vue/composition-api';
+import {
+  useTrackViewerSettingsStore,
+} from 'vue-media-annotator/provides';
 
 export default defineComponent({
   name: 'TrackViewerSettings',
 
-  props: {
-    onlyShowSelectedTrack: {
-      type: Boolean,
-      required: true,
-    },
-  },
-
   setup() {
-    const menu = ref(false);
-
+    const trackViewerSettingsStore = useTrackViewerSettingsStore();
+    const {
+      onlyShowSelectedTrack,
+      cameraParallelProjection,
+      detectionGlyphSize,
+      adjustCubeAxesBoundsManually,
+      cubeAxesBounds,
+    } = trackViewerSettingsStore;
     return {
-      menu,
+      onlyShowSelectedTrack,
+      cameraParallelProjection,
+      detectionGlyphSize,
+      adjustCubeAxesBoundsManually,
+      cubeAxesBounds,
     };
   },
 });
 </script>
 
 <template>
-  <div>
-    <v-menu
-      v-model="menu"
-      :close-on-content-click="false"
-      :nudge-width="200"
-      offset-x
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn
-          color="indigo"
-          dark
-          v-bind="attrs"
-          v-on="on"
-        >
-          Track Viewer settings
-        </v-btn>
-      </template>
-
-      <v-card>
-        <v-list>
-          <v-list-item>
-            <v-list-item-action>
-              <v-switch
-                :value="onlyShowSelectedTrack"
-                color="purple"
-                @change="$emit('update:only-show-selected-track', Boolean($event))"
-              />
-            </v-list-item-action>
-            <v-list-item-title>Only show selected track</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-card>
-    </v-menu>
-  </div>
+  <v-card>
+    <v-card-text>
+      <v-list>
+        <v-list-item>
+          <v-list-item-action>
+            <v-switch
+              v-model="onlyShowSelectedTrack"
+              color="purple"
+            />
+          </v-list-item-action>
+          <v-list-item-title>Only show selected track</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item>
+          <v-list-item-action>
+            <v-switch
+              v-model="cameraParallelProjection"
+              color="purple"
+            />
+          </v-list-item-action>
+          <v-list-item-title>Camera parallel Projection</v-list-item-title>
+        </v-list-item>
+      </v-list>
+
+      <v-text-field
+        v-model="detectionGlyphSize"
+        type="number"
+        step="0.001"
+        label="Detection Glyph Size"
+      />
+
+      <v-checkbox
+        v-model="adjustCubeAxesBoundsManually"
+        label="Adjust Axes Range manually"
+      />
+
+      <div v-if="adjustCubeAxesBoundsManually">
+        <div class="d-flex flex-grow-1">
+          <v-text-field
+            :value="cubeAxesBounds.xrange[0]"
+            label="minX"
+            type="number"
+            step="0.01"
+            variant="outlined"
+            density="compact"
+            class="mr-2"
+            @input="$set(cubeAxesBounds.xrange, 0, Number($event))"
+          />
+
+          <v-text-field
+            :value="cubeAxesBounds.xrange[1]"
+            label="maxX"
+            type="number"
+            variant="outlined"
+            step="0.01"
+            @input="$set(cubeAxesBounds.xrange, 1, Number($event))"
+          />
+        </div>
+
+        <div class="d-flex">
+          <v-text-field
+            :value="cubeAxesBounds.yrange[0]"
+            label="minY"
+            type="number"
+            step="0.01"
+            class="mr-2"
+            variant="outlined"
+            @input="$set(cubeAxesBounds.yrange, 0, Number($event))"
+          />
+          <v-text-field
+            :value="cubeAxesBounds.yrange[1]"
+            label="maxY"
+            type="number"
+            variant="outlined"
+            step="0.01"
+            @input="$set(cubeAxesBounds.yrange, 1, Number($event))"
+          />
+        </div>
+
+        <div class="d-flex">
+          <v-text-field
+            :value="cubeAxesBounds.zrange[0]"
+            label="minZ"
+            type="number"
+            step="0.01"
+            variant="outlined"
+            class="mr-2"
+            @input="$set(cubeAxesBounds.zrange, 0, Number($event))"
+          />
+          <v-text-field
+            :value="cubeAxesBounds.zrange[1]"
+            label="maxZ"
+            type="number"
+            variant="outlined"
+            step="0.01"
+            @input="$set(cubeAxesBounds.zrange, 1, Number($event))"
+          />
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
 </template>
diff --git a/client/src/components/track_3d_viewer/TrackViewerSettingsStore.ts b/client/src/components/track_3d_viewer/TrackViewerSettingsStore.ts
new file mode 100644
index 000000000..93ac28741
--- /dev/null
+++ b/client/src/components/track_3d_viewer/TrackViewerSettingsStore.ts
@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+import { ref, Ref } from '@vue/composition-api';
+
+export default class TrackViewerSettingsStore {
+  cameraParallelProjection: Ref<boolean>;
+
+  onlyShowSelectedTrack: Ref<boolean>;
+
+  detectionGlyphSize: Ref<number>;
+
+  cubeAxesBounds: Ref<{
+    xrange: [number, number];
+    yrange: [number, number];
+    zrange: [number, number];
+  }>;
+
+  adjustCubeAxesBoundsManually: Ref<boolean>;
+
+  constructor() {
+    this.cameraParallelProjection = ref(true);
+    this.onlyShowSelectedTrack = ref(false);
+    this.detectionGlyphSize = ref(0.003);
+
+    // @ts-ignore
+    this.cubeAxesBounds = ref({
+      xrange: [-1, 1],
+      yrange: [-1, 1],
+      zrange: [-1, 1],
+    });
+    this.adjustCubeAxesBoundsManually = ref(false);
+  }
+}
diff --git a/client/src/components/track_3d_viewer/lookupTable.ts b/client/src/components/track_3d_viewer/lookupTable.ts
new file mode 100644
index 000000000..7c8c2e07f
--- /dev/null
+++ b/client/src/components/track_3d_viewer/lookupTable.ts
@@ -0,0 +1,50 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable no-console */
+/* eslint-disable no-plusplus */
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+
+import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { float2rgb } from './utils';
+
+export type RGBColor = [number, number, number];
+
+export function buildLookupTable(color: RGBColor, currentFrame: number, frameCount = 10) {
+  // if outside of range, opacity = 0
+  const lookupTable = vtkLookupTable.newInstance();
+
+
+  lookupTable.setUseBelowRangeColor(true);
+  // @ts-ignore
+  lookupTable.setBelowRangeColor(...color, 0);
+  lookupTable.setUseAboveRangeColor(true);
+  // @ts-ignore
+  lookupTable.setAboveRangeColor(...color, 0);
+
+  const size = Math.min(currentFrame + 1, frameCount);
+
+  const range = {
+    min: currentFrame - size + 1,
+    max: currentFrame,
+  };
+
+  const dataArray = vtkDataArray.newInstance({
+    numberOfComponents: 4,
+    size: 4 * size,
+    dataType: 'Uint8Array',
+  });
+
+  // if range.min === range.max there is some weird things happening
+  // in the mapper during texture map generation. adding 0.01 is a hack to prevent this.
+  lookupTable.setRange(range.min, range.max + 0.01);
+
+  let alpha = 255;
+  for (let i = size - 1; i >= 0; i--) {
+    const tuple = [...float2rgb(color), alpha];
+    dataArray.setTuple(i, tuple);
+    alpha -= 20;
+  }
+  lookupTable.setTable(dataArray);
+
+  return lookupTable;
+}
diff --git a/client/src/components/track_3d_viewer/misc.ts b/client/src/components/track_3d_viewer/misc.ts
new file mode 100644
index 000000000..d7dcb4ef8
--- /dev/null
+++ b/client/src/components/track_3d_viewer/misc.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const noOp = () => undefined;
diff --git a/client/src/components/track_3d_viewer/trackUtils.ts b/client/src/components/track_3d_viewer/trackUtils.ts
index 18e0aa5a1..98dc3403e 100644
--- a/client/src/components/track_3d_viewer/trackUtils.ts
+++ b/client/src/components/track_3d_viewer/trackUtils.ts
@@ -1,16 +1,9 @@
 import { TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
 import StyleManager from 'vue-media-annotator/StyleManager';
 import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
-import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
-import { RGBColor } from '@kitware/vtk.js/types';
-import { FrameNumber } from './TrackManager';
 
 export interface ViewUtils {
   rerender: () => void;
-  createTrackActors: (trackColor: RGBColor, features: Array<Feature>) => {
-    trackActor: vtkActor;
-    frameDetections: Array<[FrameNumber, vtkActor]>;
-  };
 }
 
 export interface Feature {
@@ -20,6 +13,8 @@ export interface Feature {
   frameNumber: number;
 }
 
+export type TrackType = string;
+
 export function getTrackType(trackWithContext: TrackWithContext) {
   const track = trackWithContext.annotation;
   return track.getType(
@@ -27,9 +22,13 @@ export function getTrackType(trackWithContext: TrackWithContext) {
   );
 }
 
-export function getTrackColor(trackWithContext: TrackWithContext, styleManager: StyleManager) {
-  const trackType = getTrackType(trackWithContext);
+export function getTrackTypeColor(trackType: TrackType, styleManager: StyleManager) {
   return vtkMath.hex2float(
     styleManager.typeStyling.value.color(trackType),
   ) as [number, number, number];
 }
+
+export function getTrackColor(trackWithContext: TrackWithContext, styleManager: StyleManager) {
+  const trackType = getTrackType(trackWithContext);
+  return getTrackTypeColor(trackType, styleManager);
+}
diff --git a/client/src/components/track_3d_viewer/useLabelDrawer.ts b/client/src/components/track_3d_viewer/useLabelDrawer.ts
new file mode 100644
index 000000000..22e069709
--- /dev/null
+++ b/client/src/components/track_3d_viewer/useLabelDrawer.ts
@@ -0,0 +1,82 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import { Ref } from '@vue/composition-api';
+
+interface LabelDrawerParams {
+  renderer: Ref<vtkRenderer | undefined>;
+  viewportDimensions: Ref<{
+    width: number;
+    height: number;
+  }>;
+  openglRenderWindow: Ref<vtkOpenGLRenderWindow | undefined>;
+}
+
+export function useLabelDrawer({
+  renderer,
+  viewportDimensions,
+  openglRenderWindow,
+}: LabelDrawerParams) {
+  let labelTextCanvas: HTMLCanvasElement | null = null;
+  let labelTextContext: CanvasRenderingContext2D | null = null;
+
+  const initialize = function initialize() {
+    labelTextCanvas = document.createElement('canvas');
+    labelTextCanvas.style.position = 'absolute';
+    labelTextCanvas.style.top = '0';
+    labelTextCanvas.style.right = '0';
+    labelTextCanvas.style.bottom = '0';
+    labelTextCanvas.style.left = '0';
+    labelTextContext = labelTextCanvas.getContext('2d');
+
+    return {
+      labelTextCanvas,
+    };
+  };
+  const clearLabelContext = function clearLabelContext() {
+    if (!labelTextContext) {
+      throw new Error('Please initialize the drawer first.');
+    }
+
+    labelTextContext.clearRect(
+      0,
+      0,
+      viewportDimensions.value.width,
+      viewportDimensions.value.height,
+    );
+  };
+  const drawLabels = function drawLabels(positionToLabel: Map<[number, number, number], string>) {
+    if (!labelTextContext) {
+      throw new Error('Please initialize the drawer first.');
+    }
+
+    clearLabelContext();
+
+
+    positionToLabel.forEach((label, position) => {
+      const displayCoordinates = openglRenderWindow.value!.worldToDisplay(
+        ...position,
+        // @ts-ignore
+        renderer.value,
+      );
+      labelTextContext!.font = 'bold 14px serif';
+      labelTextContext!.textAlign = 'center';
+      labelTextContext!.textBaseline = 'middle';
+
+      labelTextContext!.fillText(
+        label,
+        displayCoordinates[0],
+        viewportDimensions.value.height - displayCoordinates[1],
+      );
+    });
+  };
+
+
+  return {
+    initialize,
+    drawLabels,
+    clearLabelContext,
+  };
+}
diff --git a/client/src/components/track_3d_viewer/useOrientationMarkerWidget.ts b/client/src/components/track_3d_viewer/useOrientationMarkerWidget.ts
new file mode 100644
index 000000000..87a3c1e17
--- /dev/null
+++ b/client/src/components/track_3d_viewer/useOrientationMarkerWidget.ts
@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+/* eslint-disable import/prefer-default-export */
+import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import vtkInteractiveOrientationWidget from '@kitware/vtk.js/Widgets/Widgets3D/InteractiveOrientationWidget';
+import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
+import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import { ref } from '@vue/composition-api';
+
+const getMajorAxisFromViewUp = function getMajorAxisFromViewUp(
+  viewUp: Vector3,
+  idxA: number,
+  idxB: number,
+): Vector3 {
+  const axis: Vector3 = [0, 0, 0];
+  const idx = Math.abs(viewUp[idxA]) > Math.abs(viewUp[idxB]) ? idxA : idxB;
+  const value = viewUp[idx] > 0 ? 1 : -1;
+  axis[idx] = value;
+  return axis;
+};
+
+export function useOrientationMarkerWidget() {
+  const previousVisibility = ref(false);
+
+  const widgetManager = vtkWidgetManager.newInstance();
+  const axes = vtkAxesActor.newInstance();
+  const orientationMarkerWidget = vtkOrientationMarkerWidget.newInstance({
+    actor: axes,
+  });
+
+  const interactiveOrientationWidget = vtkInteractiveOrientationWidget.newInstance();
+
+  const enable = function enable(
+    interactor: vtkRenderWindowInteractor,
+    camera: vtkCamera,
+    onOrientationChanged: () => void,
+  ) {
+    orientationMarkerWidget.setInteractor(interactor);
+    orientationMarkerWidget.setEnabled(true);
+    orientationMarkerWidget.setViewportCorner(vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT);
+    orientationMarkerWidget.setViewportSize(0.15);
+    orientationMarkerWidget.setMinPixelSize(100);
+    orientationMarkerWidget.setMaxPixelSize(300);
+
+    const widgetRenderer = orientationMarkerWidget.getRenderer();
+    widgetManager.setRenderer(widgetRenderer);
+
+    interactiveOrientationWidget.placeWidget(axes.getBounds());
+    interactiveOrientationWidget.setBounds(axes.getBounds());
+    interactiveOrientationWidget.setPlaceFactor(1);
+
+    const viewWidget = widgetManager.addWidget(interactiveOrientationWidget);
+
+    if (!viewWidget) {
+      throw new Error('Failed to add widget to view.');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    viewWidget.onOrientationChange(({ direction }) => {
+      const focalPoint = camera.getFocalPoint();
+      const position = camera.getPosition();
+      const viewUp = camera.getViewUp();
+
+      const distance = Math.sqrt(vtkMath.distance2BetweenPoints(position, focalPoint));
+
+      // Put the camera orthogonally compared with the clicked cube's face
+      camera.setPosition(
+        focalPoint[0] + direction[0] * distance,
+        focalPoint[1] + direction[1] * distance,
+        focalPoint[2] + direction[2] * distance,
+      );
+
+      // Set the viewup on the camera so the cube appears aligned with the ground
+      if (direction[0]) {
+        camera.setViewUp(getMajorAxisFromViewUp(viewUp, 1, 2));
+      }
+      if (direction[1]) {
+        camera.setViewUp(getMajorAxisFromViewUp(viewUp, 0, 2));
+      }
+      if (direction[2]) {
+        camera.setViewUp(getMajorAxisFromViewUp(viewUp, 0, 1));
+      }
+
+      orientationMarkerWidget.updateMarkerOrientation();
+      widgetManager.enablePicking();
+      onOrientationChanged();
+    });
+
+    previousVisibility.value = true;
+  };
+
+  const disable = function disable() {
+    orientationMarkerWidget.delete();
+    widgetManager.removeWidget(interactiveOrientationWidget);
+    widgetManager.delete();
+    axes.delete();
+  };
+
+  return {
+    enable,
+    disable,
+  };
+}
diff --git a/client/src/components/track_3d_viewer/useTrackDrawer.ts b/client/src/components/track_3d_viewer/useTrackDrawer.ts
index d13ba42f0..e20dddcae 100644
--- a/client/src/components/track_3d_viewer/useTrackDrawer.ts
+++ b/client/src/components/track_3d_viewer/useTrackDrawer.ts
@@ -12,21 +12,165 @@ import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
 import { AnnotationWithContext, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
 import Track from 'vue-media-annotator/track';
 import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+import vtkPoints from '@kitware/vtk.js/Common/Core/Points';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
+import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
 import TrackManager, { TrackTracker } from './TrackManager';
 import { injectAggregateController } from '../annotators/useMediaController';
-import { ViewUtils, Feature, getTrackColor } from './trackUtils';
+import {
+  getTrackColor, getTrackType, getTrackTypeColor, ViewUtils, Feature,
+} from './trackUtils';
+import { buildLookupTable } from './lookupTable';
+
+export interface TrackDrawerParams {
+  trackManager: TrackManager;
+  onlyShowSelectedTrack: Ref<boolean>;
+  detectionGlyphSize: Ref<number>;
+  viewUtils: ViewUtils;
+  renderer: Ref<vtkRenderer | undefined>;
+}
 
-export default function useTrackDrawer(
-  trackManager: TrackManager,
-  onlyShowSelectedTrack: Ref<boolean>,
-  viewUtils: ViewUtils,
-) {
+export default function useTrackDrawer({
+  trackManager,
+  onlyShowSelectedTrack,
+  detectionGlyphSize,
+  viewUtils,
+  renderer,
+}: TrackDrawerParams) {
   const selectedTrackIdRef = useSelectedTrackId();
   const mediaController = injectAggregateController();
   const trackStyleManager = useTrackStyleManager();
   const filteredTracksRef = useTrackFilters();
   const cameraStore = useCameraStore();
   const { frame: frameRef } = mediaController.value;
+  const trackTypes: string[] = [];
+
+  // We uses a sphere to represents a detection in space
+  const detectionGlyphSource = vtkSphereSource.newInstance();
+
+  watch(detectionGlyphSize, (newSize) => {
+    detectionGlyphSource.setRadius(newSize);
+    viewUtils.rerender();
+  }, {
+    immediate: true,
+  });
+
+  detectionGlyphSource.setThetaResolution(20);
+
+  const drawFeature = function drawFeature(
+    points: vtkPoints,
+    lines: vtkCellArray,
+    trackColor: [number, number, number],
+    { x, y, z }: { x: number; y: number; z: number},
+    idx: number,
+    frameDataArray: vtkDataArray,
+    frameNumber: number,
+  ) {
+    points.setPoint(
+      idx,
+      x,
+      y,
+      z,
+    );
+
+    frameDataArray.setTuple(idx, [frameNumber]);
+
+    if (idx > 0) {
+      // eslint-disable-next-line no-param-reassign
+      lines.getData()[idx] = idx - 1;
+      // eslint-disable-next-line no-param-reassign
+      lines.getData()[idx + 1] = idx;
+    }
+
+    const pointMapper = vtkMapper.newInstance();
+    pointMapper.setInputConnection(detectionGlyphSource.getOutputPort());
+
+    const pointActor = vtkActor.newInstance();
+
+    pointActor.setPosition(Number(x), Number(y), Number(z));
+    pointActor.setMapper(pointMapper);
+    pointActor.getProperty().setColor(...trackColor);
+    pointActor.setVisibility(false);
+
+    if (renderer.value) {
+      renderer.value.addActor(pointActor);
+    }
+
+    return pointActor;
+  };
+
+  /**
+   * A 3D track is vtkPolyData made of one single line.
+   * Each point in this line represents a single detection.
+   * The points are ordered by frame number.
+   * We also store a point data field array to store the exact frame number of each point.
+   */
+  const drawTrack = function drawTrack(
+    mapper: vtkMapper,
+    trackColor: [number, number, number],
+    features: Array<{x: number; y: number; z: number; frameNumber: number}>,
+  ) {
+    const numberOfFeatures = features.length;
+    // One point stands for one detection
+    const points = vtkPoints.newInstance();
+    const trackPolyData = vtkPolyData.newInstance();
+
+    const frameDataArray = vtkDataArray.newInstance({
+      numberOfComponents: 1,
+      size: numberOfFeatures,
+      dataType: 'Uint32Array',
+      name: 'frames',
+    });
+
+    const trackActor = vtkActor.newInstance();
+    const trackActorProperty = trackActor.getProperty();
+    points.setNumberOfPoints(numberOfFeatures);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore size does not exists
+    const lines = vtkCellArray.newInstance({ size: numberOfFeatures + 1 });
+    lines.getData()[0] = numberOfFeatures;
+
+    const frameDetections: [number, vtkActor][] = features
+      .map((feature, idx) => {
+        const featureActor = drawFeature(
+          points,
+          lines,
+          trackColor,
+          feature,
+          idx,
+          frameDataArray,
+          feature.frameNumber,
+        );
+        return [feature.frameNumber, featureActor];
+      });
+
+    trackPolyData.setPoints(points);
+
+    // store the frame number of each point
+    trackPolyData.getPointData().setScalars(frameDataArray);
+
+    mapper.setInputData(trackPolyData);
+    trackPolyData.setLines(lines);
+
+    // trackActorProperty.setColor(...trackColor);
+    trackActorProperty.setLineWidth(3);
+    trackActor.setMapper(mapper);
+
+    if (renderer.value) {
+      renderer.value.addActor(trackActor);
+    }
+
+    return {
+      trackActor,
+      frameDetections,
+    };
+  };
 
   /**
    * Emphasize on a specific track: make sure it is visible, increase its line width and
@@ -36,7 +180,7 @@ export default function useTrackDrawer(
     const trackActor = trackManager.getTrack(trackId)?.trackActor;
 
     if (!trackActor) {
-      throw new Error(`Track actor not found for track id: ${trackId}`);
+      return;
     }
 
     trackActor.setVisibility(true);
@@ -106,7 +250,6 @@ export default function useTrackDrawer(
 
   const initializeTrack = function initializeTrack(trackWithContext: TrackWithContext) {
     const annotation = cameraStore.getTracksMerged(trackWithContext.annotation.id);
-    const trackColor = getTrackColor(trackWithContext, trackStyleManager);
 
     // pre-process features in order to represent them
     const features: Feature[] = annotation.features
@@ -118,29 +261,58 @@ export default function useTrackDrawer(
           return;
         }
 
-        const { x, y, z } = attributes as { x: number; y: number; z: number };
+        const { x, y, z } = attributes;
 
         if (x === undefined || y === undefined || z === undefined) {
           return;
         }
 
         return {
-          x,
-          y,
-          z,
+          x: Number(x),
+          y: Number(y),
+          z: Number(z),
           frameNumber: feature.frame,
         };
       })
       .filter((feature) => feature !== undefined) as Feature[];
 
-    // Create the render objects for this track and render them
-    const { trackActor, frameDetections } = viewUtils.createTrackActors(trackColor, features);
+    if (features.length > 0) {
+      const trackColor = getTrackColor(trackWithContext, trackStyleManager);
+      const mapper = vtkMapper.newInstance({
+        useLookupTableScalarRange: true,
+      });
+      mapper.setColorByArrayName('frames');
+      mapper.setScalarVisibility(true);
+      mapper.setColorModeToMapScalars();
+      mapper.setInterpolateScalarsBeforeMapping(true);
+
+      const { trackActor, frameDetections } = drawTrack(mapper, trackColor, features);
 
-    trackManager.registerTrack(annotation.id, trackActor, frameDetections);
+      const trackType = getTrackType(trackWithContext);
+      trackTypes.push(trackType);
+      trackManager.registerTrack(annotation.id, trackActor, frameDetections, trackColor, trackType);
+    }
   };
 
-  const initializeTracks = function drawTracks() {
-    filteredTracksRef.filteredAnnotations.value.forEach(initializeTrack);
+  /**
+   * Build one lookup table per track type.
+   * Then, assign the correct lookup table to the track actor mapper.
+   */
+  const updateLookupTables = function updateLookupTables(currentFrame: number) {
+    const trackTypeToLut: Map<string, vtkLookupTable> = new Map();
+    trackTypes.forEach((trackType) => {
+      if (!trackTypeToLut.get(trackType)) {
+        const trackTypeColor = getTrackTypeColor(trackType, trackStyleManager);
+        trackTypeToLut.set(trackType, buildLookupTable(trackTypeColor, currentFrame));
+      }
+    });
+
+    trackManager.forEachTrack((trackTracker) => {
+      const { trackType } = trackTracker;
+      const lut = trackTypeToLut.get(trackType);
+      const mapper = trackTracker.trackActor.getMapper();
+      if (mapper) { mapper.setLookupTable(lut); }
+    });
   };
 
   /**
@@ -151,6 +323,8 @@ export default function useTrackDrawer(
     newFrameNumber: number,
     oldFrameNumber?: number,
   ) {
+    updateLookupTables(newFrameNumber);
+
     if (onlyShowSelectedTrack.value && selectedTrackIdRef.value !== null) {
       // Draw only detection from this frame and the selected track
       const actor = trackManager.getTrackFrameDetection(selectedTrackIdRef.value, newFrameNumber);
@@ -160,18 +334,20 @@ export default function useTrackDrawer(
       }
     } else {
       // Draw all frame actors if there are some.
-      const currentFrameSphereActors = trackManager.getFrameActors(newFrameNumber);
+      const frameTracker = trackManager.getFrameTracker(newFrameNumber);
 
-      if (currentFrameSphereActors) {
-        currentFrameSphereActors.forEach((sphereActor) => sphereActor.setVisibility(true));
+      if (frameTracker) {
+        frameTracker.detectionActors.forEach((detectionActor) => {
+          detectionActor.setVisibility(true);
+        });
       }
     }
 
     if (oldFrameNumber !== undefined) {
-      const previousFrameSphereActors = trackManager.getFrameActors(oldFrameNumber);
+      const frameTracker = trackManager.getFrameTracker(oldFrameNumber);
 
-      if (previousFrameSphereActors) {
-        previousFrameSphereActors.forEach((sphereActor) => sphereActor.setVisibility(false));
+      if (frameTracker) {
+        frameTracker.detectionActors.forEach((sphereActor) => sphereActor.setVisibility(false));
       }
     }
     viewUtils.rerender();
@@ -182,23 +358,23 @@ export default function useTrackDrawer(
    */
   const onSelectedTrackChange = function onSelectedTrackChange(
     newTrackId: number|null,
-    oldTrackId: number|undefined,
+    oldTrackId: number|null,
   ) {
     if (newTrackId) {
       emphasizeTrack(newTrackId);
     }
 
     if (oldTrackId) {
-      const trackMap = trackManager.getTrack(oldTrackId);
+      const trackTracker = trackManager.getTrack(oldTrackId);
 
-      if (!trackMap) {
-        throw new Error(`Track tracker not found for track id ${oldTrackId}`);
+      if (!trackTracker) {
+        return;
       }
 
-      deEmphasizeTrack(oldTrackId, trackMap.trackActor);
+      deEmphasizeTrack(oldTrackId, trackTracker.trackActor);
 
       if (onlyShowSelectedTrack.value) {
-        hideTrack(trackMap);
+        hideTrack(trackTracker);
       }
     }
 
@@ -251,8 +427,13 @@ export default function useTrackDrawer(
     viewUtils.rerender();
   };
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-  // @ts-ignore
+  const initializeTracks = function drawTracks() {
+    filteredTracksRef.filteredAnnotations.value.forEach(initializeTrack);
+
+    onFrameChange(frameRef.value, undefined);
+    onSelectedTrackChange(selectedTrackIdRef.value, null);
+  };
+
 
   watch(selectedTrackIdRef, onSelectedTrackChange);
   watch(frameRef, onFrameChange);
@@ -263,5 +444,6 @@ export default function useTrackDrawer(
     onSelectedTrackChange,
     onFrameChange,
     initializeTracks,
+    initialize: initializeTracks,
   };
 }
diff --git a/client/src/components/track_3d_viewer/utils.ts b/client/src/components/track_3d_viewer/utils.ts
new file mode 100644
index 000000000..008623a59
--- /dev/null
+++ b/client/src/components/track_3d_viewer/utils.ts
@@ -0,0 +1,20 @@
+/* eslint-disable import/prefer-default-export */
+
+import { Bounds, RGBColor } from '@kitware/vtk.js/types';
+
+export function float2rgb(color: RGBColor): RGBColor {
+  return [color[0] * 255, color[1] * 255, color[2] * 255];
+}
+
+export function smoothBounds(bounds: Bounds): Bounds {
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = bounds;
+
+  const min = Math.min(xmin, ymin, zmin);
+  const max = Math.max(xmax, ymax, zmax);
+
+  return [
+    min, max,
+    min, max,
+    min, max,
+  ];
+}
diff --git a/client/src/provides.ts b/client/src/provides.ts
index 689ffd84b..9ab24cc04 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -19,6 +19,7 @@ import type { ImageEnhancements } from './use/useImageEnhancements';
 import TrackFilterControls from './TrackFilterControls';
 import GroupFilterControls from './GroupFilterControls';
 import CameraStore from './CameraStore';
+import TrackViewerSettingsStore from './components/track_3d_viewer/TrackViewerSettingsStore';
 
 
 /**
@@ -97,6 +98,7 @@ type ImageEnhancementsType = Readonly<Ref<ImageEnhancements>>;
 
 /** Class-based symbols */
 const CameraStoreSymbol = Symbol('cameraStore');
+const TrackViewerSettingsStoreSymbol = Symbol('trackViewerSettingsStore');
 
 const TrackStyleManagerSymbol = Symbol('trackTypeStyling');
 const GroupStyleManagerSymbol = Symbol('groupTypeStyling');
@@ -231,6 +233,7 @@ export interface State {
   annotatorPreferences: AnnotatorPreferences;
   attributes: AttributesType;
   cameraStore: CameraStore;
+  trackViewerSettingsStore: TrackViewerSettingsStore;
   datasetId: DatasetIdType;
   editingMode: EditingModeType;
   groupFilters: GroupFilterControls;
@@ -263,6 +266,7 @@ const markChangesPending = () => { };
  */
 function dummyState(): State {
   const cameraStore = new CameraStore({ markChangesPending });
+  const trackViewerSettingsStore = new TrackViewerSettingsStore();
   const setTrackType = (id: AnnotationId, newType: string,
     confidenceVal?: number, currentType?: string) => {
     cameraStore.setTrackType(id, newType, confidenceVal, currentType);
@@ -292,6 +296,7 @@ function dummyState(): State {
     annotatorPreferences: ref({ trackTails: { before: 20, after: 10 } }),
     attributes: ref([]),
     cameraStore,
+    trackViewerSettingsStore,
     datasetId: ref(''),
     editingMode: ref(false),
     multiSelectList: ref([]),
@@ -334,6 +339,7 @@ function provideAnnotator(state: State, handler: Handler, attributesFilters: Att
   provide(AnnotatorPreferencesSymbol, state.annotatorPreferences);
   provide(AttributesSymbol, state.attributes);
   provide(CameraStoreSymbol, state.cameraStore);
+  provide(TrackViewerSettingsStoreSymbol, state.trackViewerSettingsStore);
   provide(DatasetIdSymbol, state.datasetId);
   provide(EditingModeSymbol, state.editingMode);
   provide(GroupFilterControlsSymbol, state.groupFilters);
@@ -386,6 +392,9 @@ function useAttributesFilters() {
 function useCameraStore() {
   return use<CameraStore>(CameraStoreSymbol);
 }
+function useTrackViewerSettingsStore() {
+  return use<TrackViewerSettingsStore>(TrackViewerSettingsStoreSymbol);
+}
 function useDatasetId() {
   return use<DatasetIdType>(DatasetIdSymbol);
 }
@@ -483,6 +492,7 @@ export {
   useAnnotatorPreferences,
   useAttributes,
   useCameraStore,
+  useTrackViewerSettingsStore,
   useDatasetId,
   useEditingMode,
   useHandler,

From 11cc2a7ae5fd85f09a2b763ec1650fa778a6be39 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Wed, 21 Jun 2023 14:07:15 +0200
Subject: [PATCH 07/14] start addressing Bryon's comments

- show stereo matching only in multicam mode
- show 3d track viewer toggle only in stereo config mode
- trigger annotator resize on 3d track viewer toggling
- add track viewer settings to right sidebar only in stereo config mode
---
 client/dive-common/apispec.ts                 |  1 +
 .../components/TrackSettingsPanel.vue         | 10 +++-
 client/dive-common/components/Viewer.vue      | 54 +++++++++++++++----
 .../desktop/frontend/components/Recent.vue    |  2 +-
 4 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index 13a753466..3f0389fd7 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -139,6 +139,7 @@ interface DatasetMeta extends DatasetMetaMutable {
   originalFps?: Readonly<number>;
   subType: Readonly<SubType>; // In future this could have stuff like IR/EO
   multiCamMedia: Readonly<MultiCamMedia | null>;
+  stereoConfigurationFile?: Readonly<string>;
 }
 
 interface Api {
diff --git a/client/dive-common/components/TrackSettingsPanel.vue b/client/dive-common/components/TrackSettingsPanel.vue
index 13409cb60..c5f018654 100644
--- a/client/dive-common/components/TrackSettingsPanel.vue
+++ b/client/dive-common/components/TrackSettingsPanel.vue
@@ -7,6 +7,8 @@ import {
   computed,
 } from '@vue/composition-api';
 import { clientSettings } from 'dive-common/store/settings';
+import { useCameraStore } from '../../src/provides';
+
 
 export default defineComponent({
   name: 'TrackSettingsPanel',
@@ -30,10 +32,13 @@ export default defineComponent({
       interpolate: 'Whether new tracks should have interpolation enabled by default',
       continuous: 'Immediately stay in detection creation mode after creating a new track.  Hit Esc to exit.',
       prompt: 'Prompt user before deleting a track?',
+      stereoMatching: 'When manually adding detections, control whether to create a mirror feature in other cameras.',
     });
     const modes = ref(['Track', 'Detection']);
     // Add unknown as the default type to the typeList
     const typeList = computed(() => ['unknown'].concat(props.allTypes));
+    const cameraStore = useCameraStore();
+    const multiCam = ref(cameraStore.camMap.value.size > 1);
 
     return {
       clientSettings,
@@ -41,6 +46,7 @@ export default defineComponent({
       help,
       modes,
       typeList,
+      multiCam,
     };
   },
 });
@@ -208,7 +214,7 @@ export default defineComponent({
           </v-col>
         </v-row>
 
-        <v-row>
+        <v-row v-if="multiCam">
           <v-col class="py-1">
             <v-switch
               v-model="
@@ -235,7 +241,7 @@ export default defineComponent({
                   mdi-help
                 </v-icon>
               </template>
-              <span>Help</span>
+              <span>{{ help.stereoMatching }}</span>
             </v-tooltip>
           </v-col>
         </v-row>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index b07ed9ba6..ec0d2f7eb 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -50,8 +50,8 @@ import context from 'dive-common/store/context';
 import { MarkChangesPendingFilter, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
 import TrackViewer from 'vue-media-annotator/components/track_3d_viewer/TrackViewer.vue';
-import TrackViewerSettings from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettings.vue';
 import TrackViewerSettingsStore from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettingsStore';
+import TrackViewerSettings from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettings.vue';
 import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
@@ -106,7 +106,8 @@ export default defineComponent({
     const { prompt } = usePrompt();
     const loadError = ref('');
 
-    const tracks3d = ref(false);
+    const showTrack3dViewer = ref(false);
+    const isStereoConfigMode = ref(false);
 
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
@@ -567,6 +568,9 @@ export default defineComponent({
         // Close and reset sideBar
         context.resetActive();
         const meta = await loadMetadata(datasetId.value);
+
+        isStereoConfigMode.value = meta.stereoConfigurationFile != null;
+
         const defaultCameraMeta = meta.multiCamMedia?.cameras[meta.multiCamMedia.defaultDisplay];
         baseMulticamDatasetId.value = datasetId.value;
         if (defaultCameraMeta !== undefined && meta.multiCamMedia) {
@@ -583,6 +587,8 @@ export default defineComponent({
         /* Otherwise, complete loading of the dataset */
         trackStyleManager.populateTypeStyles(meta.customTypeStyling);
         groupStyleManager.populateTypeStyles(meta.customGroupStyling);
+
+
         if (meta.customTypeStyling) {
           trackFilters.importTypes(Object.keys(meta.customTypeStyling), false);
         }
@@ -733,6 +739,18 @@ export default defineComponent({
             component: GroupSidebarVue,
           });
         }
+
+        if (meta.stereoConfigurationFile) {
+          context.register({
+            component: TrackViewerSettings,
+            description: 'Track Viewer Settings',
+          });
+        } else {
+          context.unregister({
+            component: TrackViewerSettings,
+            description: 'Track Viewer Settings',
+          });
+        }
       } catch (err) {
         progress.loaded = false;
         console.error(err);
@@ -867,6 +885,12 @@ export default defineComponent({
       });
     }
 
+    // trigger resize of the annotator on track 3d viewer toggling
+    watch(showTrack3dViewer, async () => {
+      await nextTick();
+      onResize();
+    });
+
     provideAnnotator(
       {
         annotatorPreferences: toRef(clientSettings, 'annotatorPreferences'),
@@ -964,7 +988,8 @@ export default defineComponent({
       onTrackAdded,
       onGeometryAdded,
       datasetId,
-      tracks3d,
+      showTrack3dViewer,
+      isStereoConfigMode,
     };
   },
 });
@@ -1080,12 +1105,19 @@ export default defineComponent({
           </template>
         </v-select>
 
-        <v-btn
-          color="secondary"
-          @click="tracks3d = !tracks3d"
-        >
-          Toggle 3d
-        </v-btn>
+        <template v-if="isStereoConfigMode">
+          <v-divider
+            vertical
+            class="mx-2"
+          />
+
+          <v-switch
+            v-model="showTrack3dViewer"
+            label="Track 3D Viewer"
+            color="primary"
+            hide-details
+          />
+        </template>
 
         <v-divider
           vertical
@@ -1192,7 +1224,7 @@ export default defineComponent({
             :style="{ 'max-height': `calc(100% - ${controlsHeight}px)` }"
           >
             <div
-              v-if="tracks3d"
+              v-if="showTrack3dViewer"
               :style="{ height: '50%', width: '100%', 'flex-basis': '100%' }"
             >
               <track-viewer :controls-height="controlsHeight" />
@@ -1202,7 +1234,7 @@ export default defineComponent({
               v-for="camera in multiCamList"
               :key="camera"
               class="d-flex flex-column grow"
-              :style="tracks3d ? { height: '50%' } : { height: '100%' }"
+              :style="showTrack3dViewer ? { height: '50%' } : { height: '100%' }"
               @mousedown.left="changeCamera(camera, $event)"
               @mouseup.right="changeCamera(camera, $event)"
             >
diff --git a/client/platform/desktop/frontend/components/Recent.vue b/client/platform/desktop/frontend/components/Recent.vue
index f98f67ffd..a4a27ee16 100644
--- a/client/platform/desktop/frontend/components/Recent.vue
+++ b/client/platform/desktop/frontend/components/Recent.vue
@@ -2,7 +2,7 @@
 import { join } from 'path';
 import moment from 'moment';
 import {
-  computed, defineComponent, ref, Ref, reactive,
+  computed, defineComponent, ref, Ref,
 } from '@vue/composition-api';
 
 import type { DatasetType, MultiCamImportArgs } from 'dive-common/apispec';

From 72cd75d29cfc57709040831a5ad91845bfcb5972 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Wed, 21 Jun 2023 16:57:07 +0200
Subject: [PATCH 08/14] prefix x,y,z attributes with stereo3d_

---
 client/dive-common/components/Viewer.vue                     | 1 -
 client/platform/desktop/frontend/components/ImportDialog.vue | 2 +-
 client/src/components/track_3d_viewer/useTrackDrawer.ts      | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index ec0d2f7eb..54be9bd09 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -588,7 +588,6 @@ export default defineComponent({
         trackStyleManager.populateTypeStyles(meta.customTypeStyling);
         groupStyleManager.populateTypeStyles(meta.customGroupStyling);
 
-
         if (meta.customTypeStyling) {
           trackFilters.importTypes(Object.keys(meta.customTypeStyling), false);
         }
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
index 5029e62c6..bf09cdb27 100644
--- a/client/platform/desktop/frontend/components/ImportDialog.vue
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -44,7 +44,7 @@ export default defineComponent({
       argCopy.value.jsonMeta.attributes = {};
 
       // Create x, y, z attributes
-      ['x', 'y', 'z'].forEach((attributeKey) => {
+      ['stereo3d_x', 'stereo3d_y', 'stereo3d_z'].forEach((attributeKey) => {
         // ugly but necessary to avoid typescript error
         (argCopy.value.jsonMeta.attributes as Record<string, Attribute>)[attributeKey] = {
           belongs: 'detection',
diff --git a/client/src/components/track_3d_viewer/useTrackDrawer.ts b/client/src/components/track_3d_viewer/useTrackDrawer.ts
index e20dddcae..2d763745d 100644
--- a/client/src/components/track_3d_viewer/useTrackDrawer.ts
+++ b/client/src/components/track_3d_viewer/useTrackDrawer.ts
@@ -261,7 +261,7 @@ export default function useTrackDrawer({
           return;
         }
 
-        const { x, y, z } = attributes;
+        const { stereo3d_x: x, stereo3d_y: y, stereo3d_z: z } = attributes;
 
         if (x === undefined || y === undefined || z === undefined) {
           return;

From c93df3e6c3c437f64ca5c77512c1d9bdf09acc6a Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Wed, 21 Jun 2023 17:27:06 +0200
Subject: [PATCH 09/14] add doc for reserved attributes definitions

---
 docs/UI-Attributes.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/UI-Attributes.md b/docs/UI-Attributes.md
index 117adb8d8..091613e4d 100644
--- a/docs/UI-Attributes.md
+++ b/docs/UI-Attributes.md
@@ -60,7 +60,7 @@ By default, all attributes associated with the dataset are visible and editable.
 
 1. Click on the ==:material-plus: Attribute== icon for in either the track or detection attribute area.
     1. ![New Attribute Panel](images/Attributes/newAttribute.png)
-1. Enter a unique name
+1. Enter a unique name (see [Reserved Attribute Names section](#reserved-attribute-names))
 1. Choose a Datatype
     1. `Number`
     1. `Boolean` (True/False)
@@ -98,6 +98,13 @@ Attributes are part of the dataset configuration that can be imported and export
     1. Use the ==:material-application-import: Import== button to load this configuration to other datasets.
     1. Upload the configuration file when you create new datasets to initialize them with these attribute definitions.
 
+
+## Reserved Attribute Names
+
+Using certain import mode, attributes definitions might be created automatically. This is documented in this section.
+- When importing using 'Stereoscopic Calibration' mode, the `stereo3d_x`, `stereo3d_y` and `stereo3d_z` detection attributes definitions will be created automatically.
+They holds the 3d location of a detected fish and are used in the Track 3D Viewer.
+
 ## Applying Attributes Demo
 
 ![Applying Attributes Demo](videos/Attributes/ApplyingAttributes.gif)

From d9bd775419e55a5ed44fc45daa432821dfe835b4 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Wed, 28 Jun 2023 16:35:25 +0200
Subject: [PATCH 10/14] disable 3d viewer toggle if no stereo3d_* attributes

---
 client/dive-common/components/Viewer.vue      |  7 ++++
 client/src/components/track_3d_viewer/misc.ts | 33 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 54be9bd09..10631b783 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -50,6 +50,7 @@ import context from 'dive-common/store/context';
 import { MarkChangesPendingFilter, TrackWithContext } from 'vue-media-annotator/BaseFilterControls';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
 import TrackViewer from 'vue-media-annotator/components/track_3d_viewer/TrackViewer.vue';
+import { isStereo3dReady } from 'vue-media-annotator/components/track_3d_viewer/misc';
 import TrackViewerSettingsStore from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettingsStore';
 import TrackViewerSettings from 'vue-media-annotator/components/track_3d_viewer/TrackViewerSettings.vue';
 import GroupSidebarVue from './GroupSidebar.vue';
@@ -108,6 +109,7 @@ export default defineComponent({
 
     const showTrack3dViewer = ref(false);
     const isStereoConfigMode = ref(false);
+    const hasStereo3dAttributes = ref(false);
 
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
@@ -793,6 +795,9 @@ export default defineComponent({
       await nextTick();
       handleResize();
     });
+    watch(attributes, (attrs) => {
+      hasStereo3dAttributes.value = isStereo3dReady(attrs);
+    });
     onBeforeUnmount(() => {
       if (controlsRef.value) observer.unobserve(controlsRef.value.$el);
     });
@@ -989,6 +994,7 @@ export default defineComponent({
       datasetId,
       showTrack3dViewer,
       isStereoConfigMode,
+      hasStereo3dAttributes,
     };
   },
 });
@@ -1114,6 +1120,7 @@ export default defineComponent({
             v-model="showTrack3dViewer"
             label="Track 3D Viewer"
             color="primary"
+            :disabled="!hasStereo3dAttributes"
             hide-details
           />
         </template>
diff --git a/client/src/components/track_3d_viewer/misc.ts b/client/src/components/track_3d_viewer/misc.ts
index d7dcb4ef8..339c416d6 100644
--- a/client/src/components/track_3d_viewer/misc.ts
+++ b/client/src/components/track_3d_viewer/misc.ts
@@ -1,2 +1,33 @@
-// eslint-disable-next-line import/prefer-default-export
+import { Attribute } from 'vue-media-annotator/use/useAttributes';
+
+const EXPECTED_ATTRIBUTE_NAMES = [
+  'stereo3d_x',
+  'stereo3d_y',
+  'stereo3d_z',
+];
+
 export const noOp = () => undefined;
+
+export function isStereo3dReady(attrs: Attribute[]) {
+  const attributeNamesToFind = [...EXPECTED_ATTRIBUTE_NAMES];
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const attr of attrs) {
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < attributeNamesToFind.length; i++) {
+      if (attr.name === attributeNamesToFind[i]) {
+        if (attr.belongs === 'detection' && attr.datatype === 'number') {
+          attributeNamesToFind.splice(i, 1);
+        } else {
+          return false;
+        }
+      }
+    }
+
+    if (attributeNamesToFind.length === 0) {
+      return true;
+    }
+  }
+
+  return false;
+}

From 51a3b810e3fa81df15d0e87c70fff0b7fd914007 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Wed, 17 Apr 2024 18:15:41 +0200
Subject: [PATCH 11/14] fix: compatibility & syntax

---
 client/dive-common/store/context.ts                          | 1 +
 client/platform/desktop/frontend/components/ImportDialog.vue | 2 +-
 client/src/components/track_3d_viewer/misc.ts                | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/dive-common/store/context.ts b/client/dive-common/store/context.ts
index 241ba5b90..818e8e00a 100644
--- a/client/dive-common/store/context.ts
+++ b/client/dive-common/store/context.ts
@@ -52,6 +52,7 @@ const componentMap: Record<string, ComponentMapItem> = {
   [AttributeTrackFilters.name]: {
     description: 'Attribute Track Filters',
     component: AttributeTrackFilters,
+  },
   [TrackViewerSettings.name]: {
     description: 'Track Viewer Settings',
     component: TrackViewerSettings,
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
index bf09cdb27..1dd6d8231 100644
--- a/client/platform/desktop/frontend/components/ImportDialog.vue
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -11,7 +11,7 @@ import { locateDuplicates } from 'platform/desktop/frontend/store/dataset';
 import { useApi } from 'dive-common/apispec';
 import Vue from 'vue';
 import { clientSettings } from 'dive-common/store/settings';
-import { Attribute } from 'vue-media-annotator/use/useAttributes';
+import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 
 
 export default defineComponent({
diff --git a/client/src/components/track_3d_viewer/misc.ts b/client/src/components/track_3d_viewer/misc.ts
index 339c416d6..262e75f20 100644
--- a/client/src/components/track_3d_viewer/misc.ts
+++ b/client/src/components/track_3d_viewer/misc.ts
@@ -1,4 +1,4 @@
-import { Attribute } from 'vue-media-annotator/use/useAttributes';
+import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 
 const EXPECTED_ATTRIBUTE_NAMES = [
   'stereo3d_x',

From 1ccecc884e7470416e0a1972f9f827647947eab1 Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Tue, 23 Apr 2024 16:05:06 +0200
Subject: [PATCH 12/14] enh(stereo): get rid of stereoscopic calibration dialog

keep one single import dialog for stereo
---
 client/dive-common/apispec.ts                 |  8 ++--
 .../dive-common/components/ImportButton.vue   | 12 ------
 .../components/ImportMultiCamDialog.vue       | 37 +------------------
 client/dive-common/components/Viewer.vue      |  4 +-
 .../desktop/backend/native/multiCamImport.ts  |  9 +----
 .../platform/desktop/backend/native/viame.ts  |  4 +-
 client/platform/desktop/constants.ts          |  4 +-
 .../frontend/components/ImportDialog.vue      |  2 +-
 docs/UI-Attributes.md                         |  2 +-
 9 files changed, 14 insertions(+), 68 deletions(-)

diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index 3f0389fd7..51665996a 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -81,8 +81,7 @@ export interface MultiCamImportFolderArgs {
     sourcePath: string;
     trackFile: string;
   }>; // path/track file per camera
-  calibrationFile?: string; // NPZ calibation matrix file
-  stereoConfigurationFile?: string; // kwiver *.conf file
+  calibrationFile?: string; // NPZ calibation matrix file or kwivier *.conf file
   type: 'image-sequence' | 'video';
 }
 
@@ -93,8 +92,7 @@ export interface MultiCamImportKeywordArgs {
     glob: string;
     trackFile: string;
   }>; // glob pattern for base folder
-  calibrationFile?: string; // NPZ calibation matrix file
-  stereoConfigurationFile?: string; // kwiver *.conf file
+  calibrationFile?: string; // NPZ calibation matrix file or kwiver *.conf file
   type: 'image-sequence'; // Always image-sequence type for glob matching
 }
 
@@ -139,7 +137,7 @@ interface DatasetMeta extends DatasetMetaMutable {
   originalFps?: Readonly<number>;
   subType: Readonly<SubType>; // In future this could have stuff like IR/EO
   multiCamMedia: Readonly<MultiCamMedia | null>;
-  stereoConfigurationFile?: Readonly<string>;
+  calibrationFile?: Readonly<string>;
 }
 
 interface Api {
diff --git a/client/dive-common/components/ImportButton.vue b/client/dive-common/components/ImportButton.vue
index e1bac6e10..7d9eb40b1 100644
--- a/client/dive-common/components/ImportButton.vue
+++ b/client/dive-common/components/ImportButton.vue
@@ -113,18 +113,6 @@ export default defineComponent({
             </v-list-item-content>
           </v-list-item>
 
-          <v-list-item
-            v-if="openType === 'image-sequence'"
-            style="align-items':'center"
-            @click="$emit('multi-cam', { stereo: true, openType, calibration: true })"
-          >
-            <v-list-item-icon>
-              <v-icon>mdi-binoculars</v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title>Stereoscopic Calibration</v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
 
           <v-list-item
             style="align-items':'center"
diff --git a/client/dive-common/components/ImportMultiCamDialog.vue b/client/dive-common/components/ImportMultiCamDialog.vue
index d207b85ca..4ca5c0c45 100644
--- a/client/dive-common/components/ImportMultiCamDialog.vue
+++ b/client/dive-common/components/ImportMultiCamDialog.vue
@@ -54,7 +54,6 @@ export default defineComponent({
     const pendingImportPayloads: Ref<Record<string, MediaImportResponse | null>> = ref({});
     const globList: Ref<Record<string, { glob: string; trackFile: string}>> = ref({});
     const calibrationFile = ref('');
-    const stereoConfigurationFile = ref('');
     const defaultDisplay = ref('left');
     const importAnnotationFilesCheck = ref(false);
     const { error: importError, request: importRequest } = useRequest();
@@ -199,8 +198,6 @@ export default defineComponent({
         const path = ret.filePaths[0];
         if (folder === 'calibration') {
           calibrationFile.value = path;
-        } else if (folder === 'stereoConfiguration') {
-          stereoConfigurationFile.value = path;
         } else if (importType.value === 'multi') {
           if (ret.root) {
             folderList.value[folder].sourcePath = ret.root;
@@ -253,10 +250,6 @@ export default defineComponent({
           calibrationFile: calibrationFile.value,
           type: props.dataType,
         };
-        if (props.calibration) {
-          delete args.calibrationFile;
-          args.stereoConfigurationFile = stereoConfigurationFile.value;
-        }
 
         emit('begin-multicam-import', args);
       } else if (importType.value === 'keyword') {
@@ -284,7 +277,7 @@ export default defineComponent({
       defaultDisplay,
       displayKeys,
       importAnnotationFilesCheck,
-      stereoConfigurationFile,
+      // stereoConfigurationFile,
       //Methods
       open,
       prepForImport,
@@ -479,32 +472,6 @@ export default defineComponent({
               </v-icon>
             </v-btn>
           </v-row>
-
-          <v-row
-            v-else-if="stereo && calibration"
-            no-gutters
-            class="align-center"
-          >
-            <v-text-field
-              label="Stereoscopic Configuration File:"
-              placeholder="Choose File"
-              disabled
-              outlined
-              dense
-              hide-details
-              :value="stereoConfigurationFile"
-              class="mr-3"
-            />
-            <v-btn
-              color="primary"
-              @click="open('stereoConfiguration', 'stereoConfiguration')"
-            >
-              Open Stereoscopic Configuration
-              <v-icon class="ml-2">
-                mdi-matrix
-              </v-icon>
-            </v-btn>
-          </v-row>
         </div>
       </div>
 
@@ -531,7 +498,7 @@ export default defineComponent({
         </v-btn>
         <v-btn
           color="primary"
-          :disabled="!nextSteps || (stereo && (!calibrationFile && !stereoConfigurationFile))"
+          :disabled="!nextSteps || (stereo && (!calibrationFile))"
           @click="prepForImport"
         >
           Begin Import
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 10631b783..a2c151919 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -571,7 +571,7 @@ export default defineComponent({
         context.resetActive();
         const meta = await loadMetadata(datasetId.value);
 
-        isStereoConfigMode.value = meta.stereoConfigurationFile != null;
+        isStereoConfigMode.value = meta.calibrationFile != null;
 
         const defaultCameraMeta = meta.multiCamMedia?.cameras[meta.multiCamMedia.defaultDisplay];
         baseMulticamDatasetId.value = datasetId.value;
@@ -741,7 +741,7 @@ export default defineComponent({
           });
         }
 
-        if (meta.stereoConfigurationFile) {
+        if (meta.calibrationFile) {
           context.register({
             component: TrackViewerSettings,
             description: 'Track Viewer Settings',
diff --git a/client/platform/desktop/backend/native/multiCamImport.ts b/client/platform/desktop/backend/native/multiCamImport.ts
index 58698be7a..306206ef3 100644
--- a/client/platform/desktop/backend/native/multiCamImport.ts
+++ b/client/platform/desktop/backend/native/multiCamImport.ts
@@ -108,7 +108,6 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
       calibration: args.calibrationFile,
       defaultDisplay: args.defaultDisplay,
     },
-    stereoConfigurationFile: args.stereoConfigurationFile,
     subType: null,
   };
 
@@ -177,9 +176,6 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
             cameras[cameraName].imageListPath = jsonMeta.originalBasePath;
             cameras[cameraName].originalBasePath = '';
           }
-          if (args.stereoConfigurationFile) {
-            cameras[cameraName].stereoConfigurationFile = args.stereoConfigurationFile;
-          }
         });
     } else if (isKeywordArgs(args)) {
       jsonMeta.originalBasePath = args.sourcePath;
@@ -194,9 +190,6 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
             cameras[cameraName].imageListPath = jsonMeta.originalBasePath;
             cameras[cameraName].originalBasePath = '';
           }
-          if (args.stereoConfigurationFile) {
-            cameras[cameraName].stereoConfigurationFile = args.stereoConfigurationFile;
-          }
         });
     }
   } else {
@@ -205,7 +198,7 @@ async function beginMultiCamImport(args: MultiCamImportArgs): Promise<DesktopMed
 
   if (jsonMeta.multiCam?.cameras && jsonMeta.multiCam.cameras.left
     && jsonMeta.multiCam.cameras.right && (
-      jsonMeta.multiCam.calibration || jsonMeta.stereoConfigurationFile
+      jsonMeta.multiCam.calibration
     )) {
     jsonMeta.subType = 'stereo';
   } else if (jsonMeta.multiCam) {
diff --git a/client/platform/desktop/backend/native/viame.ts b/client/platform/desktop/backend/native/viame.ts
index 8968097fd..6e2ecb383 100644
--- a/client/platform/desktop/backend/native/viame.ts
+++ b/client/platform/desktop/backend/native/viame.ts
@@ -153,8 +153,8 @@ async function runPipeline(
     throw new Error('Attempting to run a multicam pipeline on non multicam data');
   }
 
-  if (meta.stereoConfigurationFile) {
-    command.push(`-c "${meta.stereoConfigurationFile}"`);
+  if (meta.calibrationFile) {
+    command.push(`-c "${meta.calibrationFile}"`);
 
     if (meta.multiCam) {
       // eslint-disable-next-line no-restricted-syntax
diff --git a/client/platform/desktop/constants.ts b/client/platform/desktop/constants.ts
index c2226b432..ea0b5b870 100644
--- a/client/platform/desktop/constants.ts
+++ b/client/platform/desktop/constants.ts
@@ -41,7 +41,7 @@ export interface Camera {
   transcodedImageFiles: string[];
   transcodedVideoFile: string;
   imageListPath?: string;
-  stereoConfigurationFile?: string;
+  calibrationFile?: string;
 }
 
 export interface MultiCamDesktop {
@@ -122,7 +122,7 @@ export interface JsonMeta extends DatasetMetaMutable {
   // Stereo or multi-camera datasets with uniform type (all images, all video)
   subType: SubType;
 
-  stereoConfigurationFile?: string; // kwiver *.conf file
+  calibrationFile?: string; // kwiver *.conf file or *.npz
 }
 
 export type DesktopMetadata = DatasetMeta & JsonMeta;
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
index 1dd6d8231..fbf1d6cc2 100644
--- a/client/platform/desktop/frontend/components/ImportDialog.vue
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -40,7 +40,7 @@ export default defineComponent({
     }
 
     // Set default attributes for a stereo calibration configuration
-    if (argCopy.value.jsonMeta.stereoConfigurationFile) {
+    if (argCopy.value.jsonMeta.multiCam?.calibration) {
       argCopy.value.jsonMeta.attributes = {};
 
       // Create x, y, z attributes
diff --git a/docs/UI-Attributes.md b/docs/UI-Attributes.md
index 091613e4d..4f5e93534 100644
--- a/docs/UI-Attributes.md
+++ b/docs/UI-Attributes.md
@@ -102,7 +102,7 @@ Attributes are part of the dataset configuration that can be imported and export
 ## Reserved Attribute Names
 
 Using certain import mode, attributes definitions might be created automatically. This is documented in this section.
-- When importing using 'Stereoscopic Calibration' mode, the `stereo3d_x`, `stereo3d_y` and `stereo3d_z` detection attributes definitions will be created automatically.
+- When importing using 'Stereoscopic' mode, the `stereo3d_x`, `stereo3d_y` and `stereo3d_z` detection attributes definitions will be created automatically.
 They holds the 3d location of a detected fish and are used in the Track 3D Viewer.
 
 ## Applying Attributes Demo

From 857d29d9c14c3abc5108336bb26382cd5f17f20a Mon Sep 17 00:00:00 2001
From: Jules BOURDAIS <jules.bourdais@kitware.com>
Date: Tue, 23 Apr 2024 16:05:43 +0200
Subject: [PATCH 13/14] enh(track3dviewer): reset camera when relevant

---
 client/src/components/track_3d_viewer/TrackViewer.vue   | 6 ++++--
 client/src/components/track_3d_viewer/trackUtils.ts     | 2 +-
 client/src/components/track_3d_viewer/useTrackDrawer.ts | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/track_3d_viewer/TrackViewer.vue b/client/src/components/track_3d_viewer/TrackViewer.vue
index 5131476a6..09bb85f07 100644
--- a/client/src/components/track_3d_viewer/TrackViewer.vue
+++ b/client/src/components/track_3d_viewer/TrackViewer.vue
@@ -174,7 +174,7 @@ export default defineComponent({
       const cubeAxes = vtkCubeAxesActor.newInstance();
       cubeAxes.setCamera(camera);
 
-      viewUtils.rerender = debounce(() => {
+      viewUtils.rerender = debounce((resetCamera = false) => {
         if (!renderWindow || renderWindow.isDeleted() || !renderer.value) {
           // pass
         } else {
@@ -186,7 +186,9 @@ export default defineComponent({
             renderer.value.addActor(cubeAxes);
           }
           drawCurrentFrameDetectionLabels();
-
+          if (resetCamera) {
+            renderer.value.resetCamera();
+          }
           renderWindow.render();
         }
       }, 10);
diff --git a/client/src/components/track_3d_viewer/trackUtils.ts b/client/src/components/track_3d_viewer/trackUtils.ts
index 98dc3403e..1de0542ce 100644
--- a/client/src/components/track_3d_viewer/trackUtils.ts
+++ b/client/src/components/track_3d_viewer/trackUtils.ts
@@ -3,7 +3,7 @@ import StyleManager from 'vue-media-annotator/StyleManager';
 import * as vtkMath from '@kitware/vtk.js/Common/Core/Math';
 
 export interface ViewUtils {
-  rerender: () => void;
+  rerender: (resetCamera?: boolean) => void;
 }
 
 export interface Feature {
diff --git a/client/src/components/track_3d_viewer/useTrackDrawer.ts b/client/src/components/track_3d_viewer/useTrackDrawer.ts
index 2d763745d..6f76908b5 100644
--- a/client/src/components/track_3d_viewer/useTrackDrawer.ts
+++ b/client/src/components/track_3d_viewer/useTrackDrawer.ts
@@ -391,7 +391,7 @@ export default function useTrackDrawer({
       showAllTracks();
     }
 
-    viewUtils.rerender();
+    viewUtils.rerender(true);
   };
 
   const onFilteredAnnotationsChange = function onFilteredAnnotationsChange(

From 2174cf8de607eb21c2ee15f431bb7c9e9b7b85c3 Mon Sep 17 00:00:00 2001
From: Louis Pagnier <louis.pagnier@kitware.com>
Date: Thu, 14 Aug 2025 16:43:52 +0200
Subject: [PATCH 14/14] fix: calibrationFile property path changed

---
 client/dive-common/apispec.ts                   | 4 +++-
 client/dive-common/components/Viewer.vue        | 4 ++--
 client/platform/desktop/backend/native/viame.ts | 4 ++--
 client/platform/web-girder/store/Dataset.ts     | 1 +
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index 335417dd5..7f2d896e1 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -7,6 +7,7 @@ import { TrackData } from 'vue-media-annotator/track';
 import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 import { CustomStyle } from 'vue-media-annotator/StyleManager';
 import { AttributeTrackFilter } from 'vue-media-annotator/AttributeTrackFilterControls';
+import { MultiCamDesktop } from 'platform/desktop/constants';
 
 type DatasetType = 'image-sequence' | 'video' | 'multi' | 'large-image';
 type MultiTrackRecord = Record<string, TrackData>;
@@ -140,7 +141,8 @@ interface DatasetMeta extends DatasetMetaMutable {
   originalFps?: Readonly<number>;
   subType: Readonly<SubType>; // In future this could have stuff like IR/EO
   multiCamMedia: Readonly<MultiCamMedia | null>;
-  calibrationFile?: Readonly<string>;
+  multiCam: Readonly<MultiCamDesktop | null>;
+  //calibrationFile?: Readonly<string>;
 }
 
 interface Api {
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 7dee87425..0472ec6d0 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -572,7 +572,7 @@ export default defineComponent({
         context.resetActive();
         const meta = await loadMetadata(datasetId.value);
 
-        isStereoConfigMode.value = meta.calibrationFile != null;
+        isStereoConfigMode.value = meta.multiCam?.calibration != null;
 
         const defaultCameraMeta = meta.multiCamMedia?.cameras[meta.multiCamMedia.defaultDisplay];
         baseMulticamDatasetId.value = datasetId.value;
@@ -744,7 +744,7 @@ export default defineComponent({
           });
         }
 
-        if (meta.calibrationFile) {
+        if (meta.multiCam?.calibration) {
           context.register({
             component: TrackViewerSettings,
             description: 'Track Viewer Settings',
diff --git a/client/platform/desktop/backend/native/viame.ts b/client/platform/desktop/backend/native/viame.ts
index c8802486b..3c7741d2e 100644
--- a/client/platform/desktop/backend/native/viame.ts
+++ b/client/platform/desktop/backend/native/viame.ts
@@ -163,8 +163,8 @@ async function runPipeline(
     throw new Error('Attempting to run a multicam pipeline on non multicam data');
   }
 
-  if (meta.calibrationFile) {
-    command.push(`-c "${meta.calibrationFile}"`);
+  if (meta.multiCam?.calibration) {
+    command.push(`-c "${meta.multiCam.calibration}"`);
 
     if (meta.multiCam) {
       // eslint-disable-next-line no-restricted-syntax
diff --git a/client/platform/web-girder/store/Dataset.ts b/client/platform/web-girder/store/Dataset.ts
index 21637d08e..6f028b3cd 100644
--- a/client/platform/web-girder/store/Dataset.ts
+++ b/client/platform/web-girder/store/Dataset.ts
@@ -24,6 +24,7 @@ const datasetModule: Module<DatasetState, RootState> = {
       const dsMeta = {
         ...metaStatic.data,
         ...media.data,
+        multiCam: null,
         videoUrl: media.data.video?.url,
       };
       // TODO remove when multi is supported in web