Client/confidence sort

client/dive-common/components/Viewer.vue

@@ -164,7 +164,7 @@ export default defineComponent({
       editingTrack,
       selectNextTrack,
     } = useTrackSelectionControls({
-      tracks: filteredTracks,
+      filteredTracks,
     });
 
     const { lineChartData } = useLineChart({
@@ -301,7 +301,7 @@ export default defineComponent({
         frame,
         intervalTree,
         trackMap,
-        tracks: filteredTracks,
+        filteredTracks,
         typeStyling,
         selectedKey,
         selectedTrackId,

client/src/components/LayerManager.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent, watch, PropType } from '@vue/composition-api';
 
+import { TrackWithContext } from 'vue-media-annotator/use/useTrackFilters';
 import { injectMediaController } from './annotators/useMediaController';
 import RectangleLayer from '../layers/AnnotationLayers/RectangleLayer';
 import PolygonLayer from '../layers/AnnotationLayers/PolygonLayer';
@@ -10,7 +11,7 @@ import LineLayer from '../layers/AnnotationLayers/LineLayer';
 import EditAnnotationLayer, { EditAnnotationTypes } from '../layers/EditAnnotationLayer';
 import { FrameDataTrack } from '../layers/LayerTypes';
 import TextLayer, { FormatTextRow } from '../layers/TextLayer';
-import Track, { TrackId } from '../track';
+import { TrackId } from '../track';
 import { geojsonToBound } from '../utils';
 import { VisibleAnnotationTypes } from '../layers';
 
@@ -43,7 +44,7 @@ export default defineComponent({
     const handler = useHandler();
     const intervalTree = useIntervalTree();
     const trackMap = useTrackMap();
-    const tracksRef = useEnabledTracks();
+    const enabledTracksRef = useEnabledTracks();
     const selectedTrackIdRef = useSelectedTrackId();
     const typeStylingRef = useTypeStyling();
     const editingModeRef = useEditingMode();
@@ -95,7 +96,7 @@ export default defineComponent({
       frame: number,
       editingTrack: false | EditAnnotationTypes,
       selectedTrackId: TrackId | null,
-      tracks: readonly Track[],
+      enabledTracks: readonly TrackWithContext[],
       visibleModes: readonly VisibleAnnotationTypes[],
       selectedKey: string,
     ) {
@@ -111,14 +112,20 @@ export default defineComponent({
           if (track === undefined) {
             throw new Error(`TrackID ${trackId} not found in map`);
           }
-          if (tracks.includes(track)) {
+          const enabledIndex = enabledTracks.findIndex(
+            (trackWithContext) => trackWithContext.track.trackId === track.trackId,
+          );
+          if (enabledIndex !== -1) {
             const [features] = track.getFeature(frame);
             const trackFrame = {
               selected: (selectedTrackId === track.trackId),
               editing: editingTrack,
               trackId: track.trackId,
               features,
-              confidencePairs: track.getType(),
+              trackType: track.getType(
+                enabledTracks[enabledIndex].context.confidencePairIndex,
+              ),
+              confidencePairs: track.confidencePairs,
             };
             frameData.push(trackFrame);
             if (frameData[frameData.length - 1].selected && (editingTrack)) {
@@ -156,17 +163,25 @@ export default defineComponent({
       if (selectedTrackId !== null) {
         if ((editingTrack) && !currentFrameIds.includes(selectedTrackId)) {
           const editTrack = trackMap.get(selectedTrackId);
+
           if (editTrack === undefined) {
             throw new Error(`trackMap missing trackid ${selectedTrackId}`);
           }
+          const enabledIndex = enabledTracks.findIndex(
+            (trackWithContext) => trackWithContext.track.trackId === editTrack.trackId,
+          );
+
           const [real, lower, upper] = editTrack.getFeature(frame);
           const features = real || lower || upper;
           const trackFrame = {
             selected: true,
             editing: true,
             trackId: editTrack.trackId,
             features: (features && features.interpolate) ? features : null,
-            confidencePairs: editTrack.getType(),
+            trackType: editTrack.getType(
+              enabledTracks[enabledIndex].context.confidencePairIndex,
+            ),
+            confidencePairs: editTrack.confidencePairs,
           };
           editingTracks.push(trackFrame);
         }
@@ -195,7 +210,7 @@ export default defineComponent({
         frameNumberRef.value,
         editingModeRef.value,
         selectedTrackIdRef.value,
-        tracksRef.value,
+        enabledTracksRef.value,
         visibleModesRef.value,
         selectedKeyRef.value,
       );
@@ -204,7 +219,7 @@ export default defineComponent({
     watch([
       frameNumberRef,
       editingModeRef,
-      tracksRef,
+      enabledTracksRef,
       selectedTrackIdRef,
       visibleModesRef,
       typeStylingRef,
@@ -213,7 +228,7 @@ export default defineComponent({
         frameNumberRef.value,
         editingModeRef.value,
         selectedTrackIdRef.value,
-        tracksRef.value,
+        enabledTracksRef.value,
         visibleModesRef.value,
         selectedKeyRef.value,
       );
@@ -257,7 +272,7 @@ export default defineComponent({
           frameNumberRef.value,
           editingModeRef.value,
           selectedTrackIdRef.value,
-          tracksRef.value,
+          enabledTracksRef.value,
           visibleModesRef.value,
           selectedKeyRef.value,
         );

client/src/components/TrackList.vue

@@ -4,7 +4,8 @@ import {
   defineComponent, reactive, computed, ref, Ref, watch,
 } from '@vue/composition-api';
 
-import Track, { TrackId } from '../track';
+import { TrackWithContext } from 'vue-media-annotator/use/useTrackFilters';
+import { TrackId } from '../track';
 import {
   useAllTypes,
   useCheckedTrackIds,
@@ -13,13 +14,13 @@ import {
   useHandler,
   useSelectedTrackId,
   useTrackMap,
-  useTracks,
+  useFilteredTracks,
   useTypeStyling,
 } from '../provides';
 import TrackItem from './TrackItem.vue';
 
 interface VirtualListItem {
-  track: Track;
+  filteredTrack: TrackWithContext;
   selectedTrackId: number | null;
   checkedTrackIds: readonly number[];
   editingTrack: boolean;
@@ -59,7 +60,7 @@ export default defineComponent({
     const editingModeRef = useEditingMode();
     const selectedTrackIdRef = useSelectedTrackId();
     const trackMap = useTrackMap();
-    const tracksRef = useTracks();
+    const filteredTracksRef = useFilteredTracks();
     const typeStylingRef = useTypeStyling();
     const frameRef = useFrame();
     const {
@@ -77,8 +78,8 @@ export default defineComponent({
       const checkedTrackIds = checkedTrackIdsRef.value;
       const editingMode = editingModeRef.value;
       const allTypes = allTypesRef.value;
-      return tracksRef.value.map((track) => ({
-        track,
+      return filteredTracksRef.value.map((filtered) => ({
+        filteredTrack: filtered,
         selectedTrackId,
         checkedTrackIds,
         editingTrack: !!editingMode,
@@ -98,7 +99,9 @@ export default defineComponent({
       if (trackId !== null && virtualList.value !== null) {
         const track = trackMap.get(trackId);
         if (track) {
-          const offset = tracksRef.value.indexOf(track);
+          const offset = filteredTracksRef.value.findIndex(
+            (filtered) => filtered.track.trackId === trackId,
+          );
           if (offset === -1) {
             virtualList.value.$el.scrollTop = 0;
           } else {
@@ -132,13 +135,13 @@ export default defineComponent({
     }
 
     function getItemProps(item: VirtualListItem) {
-      const type = item.track.getType();
+      const type = item.filteredTrack.track.getType(item.filteredTrack.context.confidencePairIndex);
       const trackType = type ? type[0] : '';
-      const selected = item.selectedTrackId === item.track.trackId;
+      const selected = item.selectedTrackId === item.filteredTrack.track.trackId;
       return {
         trackType,
-        track: item.track,
-        inputValue: item.checkedTrackIds.indexOf(item.track.trackId) >= 0,
+        track: item.filteredTrack.track,
+        inputValue: item.checkedTrackIds.indexOf(item.filteredTrack.track.trackId) >= 0,
         selected,
         editing: selected && item.editingTrack,
         color: typeStylingRef.value.color(trackType),
@@ -147,7 +150,7 @@ export default defineComponent({
     }
 
     watch(selectedTrackIdRef, scrollToTrack);
-    watch(tracksRef, scrollToSelectedTrack);
+    watch(filteredTracksRef, scrollToSelectedTrack);
 
 
     async function multiDelete() {
@@ -156,11 +159,11 @@ export default defineComponent({
       let count = 0;
       const limit = 20;
       virtualListItems.value.forEach((item) => {
-        if (item.checkedTrackIds.includes(item.track.trackId)) {
+        if (item.checkedTrackIds.includes(item.filteredTrack.track.trackId)) {
           if (count < limit) {
-            text.push(item.track.trackId.toString());
+            text.push(item.filteredTrack.track.trackId.toString());
           }
-          tracksDisplayed.push(item.track.trackId);
+          tracksDisplayed.push(item.filteredTrack.track.trackId);
           count += 1;
         }
       });
@@ -218,7 +221,7 @@ export default defineComponent({
       getItemProps,
       mouseTrap,
       newTrackColor,
-      tracks: tracksRef,
+      filteredTracks: filteredTracksRef,
       trackAdd,
       virtualListItems,
       virtualList,
@@ -233,7 +236,7 @@ export default defineComponent({
     <v-subheader class="flex-grow-1 trackHeader px-1">
       <v-container>
         <v-row align="center">
-          Tracks ({{ tracks.length }})
+          Tracks ({{ filteredTracks.length }})
           <v-spacer />
           <div>
             <v-btn
@@ -254,7 +257,7 @@ export default defineComponent({
             >
               <template #activator="{ on }">
                 <v-btn
-                  :disabled="tracks.length === 0"
+                  :disabled="filteredTracks.length === 0"
                   icon
                   small
                   class="mr-2"

client/src/components/TypeList.vue

@@ -59,7 +59,8 @@ export default defineComponent({
 
     async function clickDelete() {
       const typeDisplay: string[] = [];
-      const text = ['Do you want to delete all tracks of following types:'];
+      const text = ['This will remove the type from any visible track or delete the track if it is the only type.',
+        'Do you want to delete all tracks of following types:'];
       checkedTypesRef.value.forEach((item) => {
         typeDisplay.push(item);
         text.push(item.toString());

client/src/layers/AnnotationLayers/LineLayer.ts

@@ -8,7 +8,7 @@ interface LineGeoJSData{
   trackId: number;
   selected: boolean;
   editing: boolean | string;
-  confidencePairs: [string, number] | null;
+  trackType: [string, number] | null;
   line: GeoJSON.LineString;
   dashed?: boolean;
 }
@@ -73,7 +73,7 @@ export default class LineLayer extends BaseLayer<LineGeoJSData> {
                 trackId: track.trackId,
                 selected: track.selected,
                 editing: track.editing,
-                confidencePairs: track.confidencePairs,
+                trackType: track.trackType,
                 line,
                 dashed: true,
               };
@@ -108,26 +108,26 @@ export default class LineLayer extends BaseLayer<LineGeoJSData> {
         if (data.selected) {
           return this.stateStyling.selected.color;
         }
-        if (data.confidencePairs) {
-          return this.typeStyling.value.color(data.confidencePairs[0]);
+        if (data.trackType) {
+          return this.typeStyling.value.color(data.trackType[0]);
         }
         return this.typeStyling.value.color('');
       },
       fill: (data) => {
-        if (data.confidencePairs) {
-          return this.typeStyling.value.fill(data.confidencePairs[0]);
+        if (data.trackType) {
+          return this.typeStyling.value.fill(data.trackType[0]);
         }
         return this.stateStyling.standard.fill;
       },
       fillColor: (_point, _index, data) => {
-        if (data.confidencePairs) {
-          return this.typeStyling.value.color(data.confidencePairs[0]);
+        if (data.trackType) {
+          return this.typeStyling.value.color(data.trackType[0]);
         }
         return this.typeStyling.value.color('');
       },
       fillOpacity: (_point, _index, data) => {
-        if (data.confidencePairs) {
-          return this.typeStyling.value.opacity(data.confidencePairs[0]);
+        if (data.trackType) {
+          return this.typeStyling.value.opacity(data.trackType[0]);
         }
         return this.stateStyling.standard.opacity;
       },
@@ -138,8 +138,8 @@ export default class LineLayer extends BaseLayer<LineGeoJSData> {
         if (data.selected) {
           return this.stateStyling.selected.opacity;
         }
-        if (data.confidencePairs) {
-          return this.typeStyling.value.opacity(data.confidencePairs[0]);
+        if (data.trackType) {
+          return this.typeStyling.value.opacity(data.trackType[0]);
         }
 
         return this.stateStyling.standard.opacity;
@@ -149,8 +149,8 @@ export default class LineLayer extends BaseLayer<LineGeoJSData> {
         if (data.selected) {
           return this.stateStyling.selected.strokeWidth;
         }
-        if (data.confidencePairs) {
-          return this.typeStyling.value.strokeWidth(data.confidencePairs[0]);
+        if (data.trackType) {
+          return this.typeStyling.value.strokeWidth(data.trackType[0]);
         }
         return this.stateStyling.standard.strokeWidth;
       },

client/src/layers/AnnotationLayers/PointLayer.ts

@@ -5,7 +5,7 @@ interface PointGeoJSData {
     trackId: number;
     selected: boolean;
     editing: boolean | string;
-    confidencePairs: [string, number] | null;
+    trackType: [string, number] | null;
     feature: string;
     x: number;
     y: number;
@@ -37,7 +37,7 @@ export default class PointLayer extends BaseLayer<PointGeoJSData> {
                 trackId: track.trackId,
                 selected: track.selected,
                 editing: track.editing,
-                confidencePairs: track.confidencePairs,
+                trackType: track.trackType,
                 feature: key,
                 x,
                 y,
@@ -60,8 +60,8 @@ export default class PointLayer extends BaseLayer<PointGeoJSData> {
         if (data.selected) {
           return this.stateStyling.selected.strokeWidth * 2;
         }
-        if (data.confidencePairs) {
-          return this.typeStyling.value.strokeWidth(data.confidencePairs[0]) * 2;
+        if (data.trackType) {
+          return this.typeStyling.value.strokeWidth(data.trackType[0]) * 2;
         }
         return this.stateStyling.standard.strokeWidth * 2;
       },