initial vue 2.7 upgrade working

.github/workflows/release.yml

@@ -22,10 +22,10 @@ jobs:
         # "ref" specifies the branch to check out.
         # "github.event.release.target_commitish" is a global variable and specifies the branch the release targeted
         ref: ${{ github.event.release.target_commitish }}
-    - name: Use Node 12
-      uses: actions/setup-node@v2
+    - name: Use Node 20
+      uses: actions/setup-node@v3
       with:
-        node-version: '16.14.2'
+        node-version: '20.x'
         # Specifies the registry, this field is required!
         registry-url: https://registry.npmjs.org/
     - run: yarn install --frozen-lockfile

client/dive-common/apispec.ts

@@ -1,4 +1,4 @@
-import { provide } from '@vue/composition-api';
+import { provide } from 'vue';
 import { AnnotationId, StringKeyObject } from 'vue-media-annotator/BaseAnnotation';
 import { GroupData } from 'vue-media-annotator/Group';
 

client/dive-common/components/AttributeTrackFilter.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 /* eslint-disable max-len */
-import { computed, defineComponent, ref } from '@vue/composition-api';
+import { computed, defineComponent, ref } from 'vue';
 import { throttle } from 'lodash';
 import { useAttributes, useTrackFilters, useTrackStyleManager } from 'vue-media-annotator/provides';
 

client/dive-common/components/Attributes/AttributeEditor.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   computed, defineComponent, PropType, reactive, Ref, ref, watch,
-} from '@vue/composition-api';
+} from 'vue';
 import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { useTrackStyleManager } from 'vue-media-annotator/provides';
@@ -232,8 +232,8 @@ export default defineComponent({
             >
               <div style="word-break: break-word;">
                 {{
-                  error ? error :
-                  'Changes to Attribute Datatypes or Names do not effect \
+                  error ? error
+                  : 'Changes to Attribute Datatypes or Names do not effect \
                currently set attributes on tracks.'
                 }}
               </div>
@@ -245,21 +245,21 @@ export default defineComponent({
               <v-text-field
                 v-model="baseSettings.name"
                 label="Name"
-                :rules="[v => !!v || 'Name is required', v => !v.includes(' ') ||
-                  'No spaces', v => v !== 'userAttributes' || 'Reserved Name']"
+                :rules="[v => !!v || 'Name is required', v => !v.includes(' ')
+                  || 'No spaces', v => v !== 'userAttributes' || 'Reserved Name']"
                 required
               />
               <v-select
                 :value="baseSettings.datatype"
                 :items="[
                   { text: 'Boolean', value: 'boolean' },
                   { text: 'Number', value: 'number' },
-                  { text: 'Text', value: 'text' }
+                  { text: 'Text', value: 'text' },
                 ]"
                 label="Datatype"
                 @change="typeChange"
               />
-              <div v-if="baseSettings.datatype=== 'number'">
+              <div v-if="baseSettings.datatype === 'number'">
                 <v-radio-group
                   :value="(baseSettings.editor && baseSettings.editor.type) || 'combo'"
                   row
@@ -297,11 +297,11 @@ export default defineComponent({
                     v-model.number="baseSettings.editor.range[0]"
                     dense
                     outlined
-                    :step="baseSettings.editor.range[0]> 1 ? 1 : 0.01"
+                    :step="baseSettings.editor.range[0] > 1 ? 1 : 0.01"
                     type="number"
                     label="Min"
                     :rules="[
-                      v => !isNaN(parseFloat(v))|| 'Number is required',
+                      v => !isNaN(parseFloat(v)) || 'Number is required',
                       v => baseSettings.editor
                         && baseSettings.editor.type === 'slider'
                         && baseSettings.editor.range
@@ -315,7 +315,7 @@ export default defineComponent({
                     v-model.number="baseSettings.editor.range[1]"
                     dense
                     outlined
-                    :step="baseSettings.editor.range[1]> 1 ? 1 : 0.01"
+                    :step="baseSettings.editor.range[1] > 1 ? 1 : 0.01"
                     type="number"
                     label="Max"
                     :rules="[

client/dive-common/components/Attributes/AttributeInput.vue

@@ -5,7 +5,7 @@ import {
   PropType,
   onMounted,
   watch,
-} from '@vue/composition-api';
+} from 'vue';
 import { NumericAttributeEditorOptions, StringAttributeEditorOptions } from 'vue-media-annotator/use/AttributeTypes';
 
 export default defineComponent({
@@ -143,7 +143,7 @@ export default defineComponent({
       @keydown="onInputKeyEvent"
     >
     <input
-      v-else-if="datatype === 'number' && (!typeSettings || typeSettings.type ==='combo')"
+      v-else-if="datatype === 'number' && (!typeSettings || typeSettings.type === 'combo')"
       ref="inputBoxRef"
       :label="datatype"
       :value="value"
@@ -155,15 +155,15 @@ export default defineComponent({
       @keydown="onInputKeyEvent"
     >
     <div
-      v-else-if="datatype === 'number' && (typeSettings && typeSettings.type ==='slider')"
+      v-else-if="datatype === 'number' && (typeSettings && typeSettings.type === 'slider')"
     >
       <div class="slider-label">
         {{ value }}
       </div>
       <v-slider
         :value="value"
         :step="typeSettings.steps ? typeSettings.steps
-          : (typeSettings.range[1] - typeSettings.range[0])/2.0"
+          : (typeSettings.range[1] - typeSettings.range[0]) / 2.0"
         :min="typeSettings.range[0]"
         :max="typeSettings.range[1]"
         dense
@@ -182,7 +182,7 @@ export default defineComponent({
       @keydown="onInputKeyEvent"
     >
       <option
-        v-for="(item,index) in boolOpts"
+        v-for="(item, index) in boolOpts"
         :key="index"
         :value="item.value"
       >

client/dive-common/components/Attributes/AttributeNumberValueColors.vue

@@ -2,7 +2,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, PropType, Ref, watch, onMounted,
-} from '@vue/composition-api';
+} from 'vue';
 import * as d3 from 'd3';
 import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 
@@ -18,7 +18,6 @@ export default defineComponent({
   setup(props, { emit }) {
     const attributeColors: Ref<{key: number; val: string}[]> = ref([]);
 
-
     const recalculateGradient = () => {
       const linearGradient = d3.select('linearGradient');
       const domain = attributeColors.value.map((item) => item.key);
@@ -96,7 +95,6 @@ export default defineComponent({
     };
     const gradientSVG: Ref<SVGElement | null> = ref(null);
 
-
     watch(gradientSVG, () => {
       const svg = d3.select('#gradient-image');
       svg

client/dive-common/components/Attributes/AttributeRendering.vue

@@ -2,7 +2,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, PropType, watch, computed, reactive,
-} from '@vue/composition-api';
+} from 'vue';
 import { useTrackFilters, useTrackStyleManager } from 'vue-media-annotator/provides';
 import { Attribute, AttributeRendering } from 'vue-media-annotator/use/AttributeTypes';
 
@@ -371,7 +371,7 @@ export default defineComponent({
             />
             <div
               class="color-box mx-2 mt-5"
-              :class="{'edit-color-box': !displayNameSettings.displayColorAuto}"
+              :class="{ 'edit-color-box': !displayNameSettings.displayColorAuto }"
               :style="{
                 backgroundColor: computedDisplayColor,
               }"
@@ -418,7 +418,7 @@ export default defineComponent({
             />
             <div
               class="color-box mx-2 mt-5"
-              :class="{'edit-color-box': !valueSettings.valueColorAuto}"
+              :class="{ 'edit-color-box': !valueSettings.valueColorAuto }"
               :style="{
                 backgroundColor: computedValueColor,
               }"
@@ -531,7 +531,7 @@ export default defineComponent({
               <div
                 v-if="boxSettings.box"
                 class="color-box mx-2 mt-5"
-                :class="{'edit-color-box': !boxSettings.boxColorAuto}"
+                :class="{ 'edit-color-box': !boxSettings.boxColorAuto }"
                 :style="{
                   backgroundColor: computedBoxColor,
                 }"

client/dive-common/components/Attributes/AttributeValueColors.vue

@@ -2,7 +2,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, PropType, Ref,
-} from '@vue/composition-api';
+} from 'vue';
 import { useStore } from 'platform/web-girder/store/types';
 import { StringKeyObject } from 'vue-media-annotator/BaseAnnotation';
 import { useCameraStore, useTrackStyleManager } from 'vue-media-annotator/provides';
@@ -23,7 +23,6 @@ export default defineComponent({
     const store = useStore();
     const user = (store.state.User.user?.login || '') as string;
 
-
     const predeterminedValues = ref(props.attribute.values || []);
 
     const attributeColors = ref(props.attribute.valueColors || {});
@@ -128,7 +127,7 @@ export default defineComponent({
         <v-spacer />
       </v-row>
       <v-row
-        v-for="(val,key) in attributeColors"
+        v-for="(val, key) in attributeColors"
         :key="val"
         align="center"
         justify="center"

client/dive-common/components/Attributes/AttributesSideBar.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, watch, PropType,
-} from '@vue/composition-api';
+} from 'vue';
 
 import StackedVirtualSidebarContainer from 'dive-common/components/StackedVirtualSidebarContainer.vue';
 import { useReadOnlyMode } from 'vue-media-annotator/provides';
@@ -51,7 +51,6 @@ export default defineComponent({
 });
 </script>
 
-
 <template>
   <StackedVirtualSidebarContainer
     :width="width"
@@ -66,7 +65,7 @@ export default defineComponent({
               icon="mdi-filter"
               tooltip-text="Filter Attributes displayed"
               size="large"
-              :color="currentMode === 'Filtering'? 'primary' : 'default'"
+              :color="currentMode === 'Filtering' ? 'primary' : 'default'"
               outlined
               tile
               @click="currentMode = 'Filtering'"
@@ -78,7 +77,7 @@ export default defineComponent({
               tooltip-text="Chart Numeric Attributes"
               size="large"
               outlined
-              :color="currentMode === 'Timeline'? 'primary' : 'default'"
+              :color="currentMode === 'Timeline' ? 'primary' : 'default'"
 
               tile
               @click="currentMode = 'Timeline'"

client/dive-common/components/Attributes/AttributesSubsection.vue

@@ -4,7 +4,7 @@ import {
   ref,
   PropType,
   computed,
-} from '@vue/composition-api';
+} from 'vue';
 import {
   useSelectedTrackId,
   useCameraStore,
@@ -91,9 +91,7 @@ export default defineComponent({
       if (selectedAttributes.value && selectedAttributes.value.attributes) {
         attributeVals = selectedAttributes.value.attributes;
       }
-      return sortAndFilterAttributes(
-        props.attributes, mode, attributeVals, sortingMode.value, additionFilters,
-      );
+      return sortAndFilterAttributes(props.attributes, mode, attributeVals, sortingMode.value, additionFilters);
     });
 
     const activeAttributesCount = computed(
@@ -108,8 +106,10 @@ export default defineComponent({
       activeSettings.value = !activeSettings.value;
     }
 
-    function updateAttribute({ name, value }: { name: string; value: unknown },
-      attribute: Attribute) {
+    function updateAttribute(
+      { name, value }: { name: string; value: unknown },
+      attribute: Attribute,
+    ) {
       if (selectedTrackIdRef.value !== null) {
         // Tracks across all cameras get the same attributes set if they are linked
         const tracks = cameraStore.getTrackAll(selectedTrackIdRef.value);
@@ -125,9 +125,7 @@ export default defineComponent({
           if (props.mode === 'Track') {
             tracks.forEach((track) => track.setAttribute(name, updatedValue, user));
           } else if (props.mode === 'Detection' && frameRef.value !== undefined) {
-            tracks.forEach((track) => track.setFeatureAttribute(
-              frameRef.value, name, updatedValue, user,
-            ));
+            tracks.forEach((track) => track.setFeatureAttribute(frameRef.value, name, updatedValue, user));
           }
         }
       }
@@ -164,7 +162,6 @@ export default defineComponent({
       context.openClose('AttributesSideBar', true, 'Timeline');
     }
 
-
     function getAttributeValue(attribute: Attribute) {
       if (selectedAttributes.value && selectedAttributes.value.attributes) {
         if (!attribute.user) {
@@ -279,7 +276,7 @@ export default defineComponent({
           icon="mdi-filter"
           :color="filtersActive ? 'primary' : 'default'"
           :tooltip-text="filtersActive
-            ? 'Filters are active, click to view': 'No filters are active, click to edit'"
+            ? 'Filters are active, click to view' : 'No filters are active, click to edit'"
           @click="openFilter"
         />
         <tooltip-btn
@@ -312,8 +309,8 @@ export default defineComponent({
         >
           <v-row
             v-if="
-              activeSettings ||
-                selectedAttributes.attributes[attribute.name] !== undefined
+              activeSettings
+                || selectedAttributes.attributes[attribute.name] !== undefined
             "
             class="ma-0"
             dense

client/dive-common/components/AutosavePrompt.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'AutosavePrompt',

client/dive-common/components/ConfidenceFilter.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 import { throttle, debounce } from 'lodash';
 
 export default defineComponent({
@@ -23,10 +23,8 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    function _updateConfidence(event: InputEvent) {
+    function _updateConfidence(event: InputEvent & {target: {value: string}}) {
       if (event.target) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
         emit('update:confidence', Number.parseFloat(event.target.value));
       }
     }
@@ -51,7 +49,7 @@ export default defineComponent({
         █
       </span>
       <span
-        :class="{'main-confidence':text ==='Confidence Threshold'}"
+        :class="{ 'main-confidence': text === 'Confidence Threshold' }"
       >{{ text }}</span>
       <v-spacer v-if="!$scopedSlots.default" />
       <span class="pl-2">

client/dive-common/components/ConfidenceSubsection.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   defineComponent, PropType,
-} from '@vue/composition-api';
+} from 'vue';
 
 import {
   useTrackStyleManager,