Add type and confidence to column visibility settings

Allow users to show/hide the Type and Confidence columns in the
bottom track list view through the column settings panel.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: mattdawkins

client/dive-common/components/TrackListColumnSettings.vue

@@ -73,8 +73,27 @@ export default defineComponent({
       Column Visibility
     </div>
 
-    <!-- Built-in columns -->
+    <!-- Core columns -->
     <div class="text-caption grey--text mb-1">
+      Core Columns
+    </div>
+    <v-checkbox
+      v-model="columnVisibility.type"
+      dense
+      hide-details
+      label="Type"
+      class="my-0 py-0"
+    />
+    <v-checkbox
+      v-model="columnVisibility.confidence"
+      dense
+      hide-details
+      label="Confidence"
+      class="my-0 py-0"
+    />
+
+    <!-- Frame columns -->
+    <div class="text-caption grey--text mt-2 mb-1">
       Frame Columns
     </div>
     <v-checkbox

client/dive-common/store/settings.ts

@@ -3,6 +3,8 @@ import { cloneDeep, merge } from 'lodash';
 import { AnnotatorPreferences } from 'vue-media-annotator/types';
 
 interface ColumnVisibilitySettings {
+  type: boolean;
+  confidence: boolean;
   startFrame: boolean;
   endFrame: boolean;
   startTimestamp: boolean;
@@ -85,6 +87,8 @@ const defaultSettings: AnnotationSettings = {
       autoZoom: false,
       filterDetectionsByFrame: false,
       columnVisibility: {
+        type: true,
+        confidence: true,
         startFrame: true,
         endFrame: true,
         startTimestamp: false,

client/src/components/TrackItem.vue

@@ -473,66 +473,70 @@ export default defineComponent({
       {{ track.trackId }}
     </div>
     <!-- Editable type field -->
-    <select
-      v-if="editingType && lockTypes"
-      ref="typeInputRef"
-      v-model="editTypeValue"
-      class="compact-type-input compact-select-input"
-      @blur="saveType"
-      @change="saveType"
-      @keydown.enter="saveType"
-      @keydown.escape="cancelEditType"
-      @click.stop
-    >
-      <option
-        v-for="item in allTypes"
-        :key="item"
-        :value="item"
+    <template v-if="!columnVisibility || columnVisibility.type !== false">
+      <select
+        v-if="editingType && lockTypes"
+        ref="typeInputRef"
+        v-model="editTypeValue"
+        class="compact-type-input compact-select-input"
+        @blur="saveType"
+        @change="saveType"
+        @keydown.enter="saveType"
+        @keydown.escape="cancelEditType"
+        @click.stop
       >
-        {{ item }}
-      </option>
-    </select>
-    <input
-      v-else-if="editingType"
-      ref="typeInputRef"
-      v-model="editTypeValue"
-      type="text"
-      list="allTypesOptions"
-      class="compact-type-input"
-      @blur="saveType"
-      @keydown.enter="saveType"
-      @keydown.escape="cancelEditType"
-      @click.stop
-    >
-    <span
-      v-else
-      class="track-type-compact text-truncate"
-      :class="{ editable: !readOnlyMode && !lockTypes }"
-      @click="startEditType"
-    >{{ trackType }}</span>
+        <option
+          v-for="item in allTypes"
+          :key="item"
+          :value="item"
+        >
+          {{ item }}
+        </option>
+      </select>
+      <input
+        v-else-if="editingType"
+        ref="typeInputRef"
+        v-model="editTypeValue"
+        type="text"
+        list="allTypesOptions"
+        class="compact-type-input"
+        @blur="saveType"
+        @keydown.enter="saveType"
+        @keydown.escape="cancelEditType"
+        @click.stop
+      >
+      <span
+        v-else
+        class="track-type-compact text-truncate"
+        :class="{ editable: !readOnlyMode && !lockTypes }"
+        @click="startEditType"
+      >{{ trackType }}</span>
+    </template>
     <!-- Editable confidence field -->
-    <input
-      v-if="editingConfidence"
-      ref="confidenceInputRef"
-      v-model="editConfidenceValue"
-      type="number"
-      step="0.01"
-      min="0"
-      max="1"
-      class="compact-confidence-input"
-      @blur="saveConfidence"
-      @keydown.enter="saveConfidence"
-      @keydown.escape="cancelEditConfidence"
-      @click.stop
-    >
-    <span
-      v-else
-      class="track-confidence-compact"
-      :class="{ editable: !readOnlyMode }"
-      @click="startEditConfidence"
-    >
-      {{ topConfidence !== null ? topConfidence.toFixed(2) : '' }}
-    </span>
+    <template v-if="!columnVisibility || columnVisibility.confidence !== false">
+      <input
+        v-if="editingConfidence"
+        ref="confidenceInputRef"
+        v-model="editConfidenceValue"
+        type="number"
+        step="0.01"
+        min="0"
+        max="1"
+        class="compact-confidence-input"
+        @blur="saveConfidence"
+        @keydown.enter="saveConfidence"
+        @keydown.escape="cancelEditConfidence"
+        @click.stop
+      >
+      <span
+        v-else
+        class="track-confidence-compact"
+        :class="{ editable: !readOnlyMode }"
+        @click="startEditConfidence"
+      >
+        {{ topConfidence !== null ? topConfidence.toFixed(2) : '' }}
+      </span>
+    </template>
     <!-- Start frame column (clickable to seek) -->
     <span
       v-if="!columnVisibility || columnVisibility.startFrame"

client/src/components/TrackList.vue

@@ -526,6 +526,7 @@ export default defineComponent({
           >{{ sortIcon('id') }}</v-icon>
         </span>
         <span
+          v-if="columnVisibility?.type !== false"
           class="col-header col-type sortable"
           :class="{ active: sortKey === 'type' }"
           @click="handleSort('type')"
@@ -537,6 +538,7 @@ export default defineComponent({
           >{{ sortIcon('type') }}</v-icon>
         </span>
         <span
+          v-if="columnVisibility?.confidence !== false"
           class="col-header col-conf sortable"
           :class="{ active: sortKey === 'confidence' }"
           @click="handleSort('confidence')"