add disable filter button to show all annotaitons

Author: BryonLewis

client/dive-common/components/ConfidenceFilter.vue

@@ -21,6 +21,10 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, { emit }) {
     function _updateConfidence(event: InputEvent & {target: {value: string}}) {
@@ -61,6 +65,7 @@ export default defineComponent({
     <input
       type="range"
       style="width: 100%"
+      :disabled="disabled"
       :min="min"
       :max="1"
       :step="0.01"

client/dive-common/components/Sidebar.vue

@@ -120,6 +120,7 @@ export default defineComponent({
       typeSettings,
       readOnlyMode,
       styleManager,
+      showAllAnnoations: trackFilterControls.showAllAnnotations,
       visible,
       /* methods */
       doToggleMerge,
@@ -157,6 +158,7 @@ export default defineComponent({
             :width="width"
             :style-manager="styleManager"
             :filter-controls="trackFilterControls"
+            :disabled="showAllAnnoations"
             class="flex-shrink-1 flex-grow-1"
           >
             <template #settings>
@@ -175,6 +177,7 @@ export default defineComponent({
             :lock-types="typeSettings.lockTypes"
             :hotkeys-disabled="visible() || readOnlyMode"
             :height="bottomHeight"
+            :disabled="showAllAnnoations"
             @track-seek="$emit('track-seek', $event)"
           >
             <template slot="settings">

client/dive-common/components/TypeThreshold.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import {
   useDatasetId,
   useTrackFilters,
@@ -30,10 +30,13 @@ export default defineComponent({
       saveThreshold();
     }
 
+    const showAllAnnotationsRef = computed(() => trackFilters.showAllAnnotations.value);
+
     return {
       checkedTypesRef: trackFilters.checkedTypes,
       confidenceFiltersRef: trackFilters.confidenceFilters,
       typeStylingRef: useTrackStyleManager().typeStyling,
+      showAllAnnotationsRef,
       resetThresholds,
       saveThreshold,
     };
@@ -48,6 +51,7 @@ export default defineComponent({
     </span>
     <v-divider class="my-3" />
     <ConfidenceFilter
+      :disabled="showAllAnnotationsRef"
       :confidence.sync="confidenceFiltersRef.default"
       text="Base Confidence Threshold"
       @end="saveThreshold"
@@ -59,6 +63,7 @@ export default defineComponent({
       class="slidercontainer"
     >
       <ConfidenceFilter
+        :disabled="showAllAnnotationsRef"
         :confidence.sync="confidenceFiltersRef[type]"
         :text="type"
         :color="typeStylingRef.color(type)"

client/dive-common/components/Viewer.vue

@@ -827,6 +827,10 @@ export default defineComponent({
       useAttributeFilters,
     );
 
+    const showAllAnnotations = computed(() => (
+      trackFilters.showAllAnnotations.value
+    ));
+
     return {
       /* props */
       aggregateController,
@@ -868,6 +872,7 @@ export default defineComponent({
       readonlyState,
       imageEnhancementOutputs,
       isDefaultImage,
+      showAllAnnotations,
       /* large image methods */
       getTiles,
       getTileURL,
@@ -1097,6 +1102,7 @@ export default defineComponent({
             v-if="context.state.active !== 'TypeThreshold'"
             class="ma-2 mb-0"
             :confidence.sync="confidenceFilters.default"
+            :disabled="showAllAnnotations"
             @end="saveThreshold"
           >
             <a

client/src/BaseFilterControls.ts

@@ -83,6 +83,8 @@ export default abstract class BaseFilterControls<T extends Track | Group> {
 
   removeTypes: (id: AnnotationId, types: string[]) => ConfidencePair[];
 
+  showAllAnnotations: Ref<boolean>;
+
   constructor(params: FilterControlsParams<T>) {
     this.checkedIDs = ref(params.sorted.value.map((t) => t.id));
 
@@ -102,6 +104,8 @@ export default abstract class BaseFilterControls<T extends Track | Group> {
 
     this.markChangesPending = params.markChangesPending;
 
+    this.showAllAnnotations = ref(false);
+
     this.allTypes = computed(() => {
       const typeSet = new Set<string>();
       this.sorted.value.forEach((annotation) => {

client/src/TrackFilterControls.ts

@@ -43,7 +43,7 @@ export default class TrackFilterControls extends BaseFilterControls<Track> {
       const resultsArr: AnnotationWithContext<Track>[] = [];
       const resultsIds: Set<AnnotationId> = new Set();
       params.sorted.value.forEach((annotation) => {
-        if (this.timeFilters.value !== null) {
+        if (this.timeFilters.value !== null && !this.showAllAnnotations.value) {
           const [startTime, endTime] = this.timeFilters.value;
           if (annotation.begin > endTime || annotation.end < startTime) {
             return;
@@ -78,14 +78,17 @@ export default class TrackFilterControls extends BaseFilterControls<Track> {
             confidencePairIndex = -1;
           }
         }
+        if (this.showAllAnnotations.value) {
+          confidencePairIndex = 0;
+        }
         /* include annotations where at least 1 confidence pair is above
          * the threshold and part of the checked type set */
         if (
           (confidencePairIndex >= 0 || annotation.confidencePairs.length === 0)
           && enabledInGroupFilters && !resultsIds.has(annotation.id)
         ) {
           let addValue = true;
-          if (this.attributeFilters.value.length > 0 && params.getTrack !== undefined
+          if (!this.showAllAnnotations.value && this.attributeFilters.value.length > 0 && params.getTrack !== undefined
             && this.enabledFilters.value.length > 0) {
             addValue = trackIdPassesFilter(
               annotation.id,

client/src/components/FilterList.vue

@@ -278,6 +278,14 @@ export default defineComponent({
 
     const showMaxFrameButton = computed(() => clientSettings.typeSettings.maxCountButton);
 
+    const showAllAnnotations = computed({
+      get: () => props.filterControls.showAllAnnotations.value,
+      set: (val: boolean) => {
+        // eslint-disable-next-line no-param-reassign
+        props.filterControls.showAllAnnotations.value = val;
+      },
+    });
+
     return {
       data,
       headCheckState,
@@ -293,6 +301,7 @@ export default defineComponent({
       virtualTypes,
       readOnlyMode,
       filteredTracksRef,
+      showAllAnnotations,
       /* methods */
       clickDelete,
       clickEdit,
@@ -322,13 +331,31 @@ export default defineComponent({
           <v-checkbox
             :input-value="headCheckState !== -1 ? headCheckState : false"
             :indeterminate="headCheckState === -1"
+            :disabled="showAllAnnotations"
             dense
             shrink
             hide-details
             color="white"
             class="my-1 type-checkbox mt-0"
             @change="headCheckClicked"
           />
+          <v-tooltip
+            open-delay="100"
+            bottom
+          >
+            <template #activator="{ on }">
+              <v-icon
+                small
+                class="mr-1 hover-show-child"
+                :color="showAllAnnotations ? 'primary' : ''"
+                v-on="on"
+                @click="showAllAnnotations = !showAllAnnotations"
+              >
+                mdi-filter-off-outline
+              </v-icon>
+            </template>
+            <span>Disable Filters and Show All Annotations</span>
+          </v-tooltip>
           <v-tooltip
             open-delay="100"
             bottom
@@ -396,6 +423,7 @@ export default defineComponent({
             :confidence-filter-num="item.confidenceFilterNum"
             :width="width"
             :display-max-button="showMaxFrameButton"
+            :disabled="showAllAnnotations"
             @setCheckedTypes="updateCheckedType($event, item.type)"
             @goToMaxFrame="goToPeakTrackFrame($event)"
             @clickEdit="clickEdit"

client/src/components/TrackItem.vue

@@ -57,6 +57,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup(props, { emit }) {
@@ -219,6 +223,7 @@ export default defineComponent({
         class="my-0 ml-1 pt-0"
         dense
         hide-details
+        :disabled="disabled"
         :input-value="inputValue"
         :color="color"
         @change="trackFilters.updateCheckedId(track.trackId, $event)"

client/src/components/TrackList.vue

@@ -51,6 +51,10 @@ export default defineComponent({
       type: Number,
       default: 420,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup(props) {
@@ -348,6 +352,7 @@ export default defineComponent({
         <track-item
           v-bind="getItemProps(item)"
           :lock-types="lockTypes"
+          :disabled="disabled"
           @seek="$emit('track-seek', $event)"
         />
       </template>

client/src/components/TypeItem.vue

@@ -36,6 +36,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, { emit }) {
     /* Horizontal padding is the width of checkbox, scrollbar, and edit button */
@@ -67,6 +71,7 @@ export default defineComponent({
       <v-checkbox
         :input-value="checked"
         :color="color"
+        :disabled="disabled"
         dense
         shrink
         hide-details