swapping python version to 3.11 (#1411)

* swapping python version to 3.11

* add libgdal-dev to CI

* gdal dependency adjustment

* initial 3.11 python version

* initial vue 2.7 upgrade working

* resolving build issues

* updating tests

* reverting node builder

* removing vue template checker (vuetify issues)

* removing template linting

* updating vuetify version

* linting

* revert linting

* lockfile

* linting

* resolving integration tests

* adding getUsers script

* lint

* addressing review comments

* remove disabling default-param-last in eslint rules

* resovling integration test issues

.github/workflows/blank.yml

@@ -44,7 +44,7 @@ jobs:
     -
       name: Lint templates
       if: ${{ matrix.target == 'web' }}
-      run: yarn lint:templates
+      run: yarn lint:templates  
     - 
       name: Run tests
       if: ${{ matrix.target == 'web' }}
@@ -69,7 +69,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: [3.8]
+        python-version: [3.11]
     steps:
     - name: Update Package References
       run: sudo apt-get update
@@ -78,6 +78,7 @@ jobs:
         python3-cachecontrol
         python3-dev
         python3-gdal 
+        libgdal-dev
     - name: Checkout repository
       uses: actions/checkout@v3
     - name: Set up Python ${{ matrix.python-version }}

.github/workflows/release.yml

@@ -22,8 +22,8 @@ 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 16
+      uses: actions/setup-node@v3
       with:
         node-version: '16.14.2'
         # Specifies the registry, this field is required!
@@ -32,8 +32,6 @@ jobs:
     - run: git config --global user.name "GitHub Bot"
     - run: git config --global user.email "[email protected]"
     - run: yarn lint
-    - run: yarn lint:templates
-
     - name: Unit tests
       run: yarn test
       if: ${{ matrix.config.os != 'windows-latest' }}

client/README.md

@@ -29,7 +29,6 @@ yarn build:electron
 
 # lint and test
 yarn lint
-yarn lint:templates
 yarn test
 
 # Local verification of all tests, linting, builds

client/checkbuild.sh

@@ -11,7 +11,6 @@ yarn install --frozen-lockfile
 yarn test
 
 yarn lint &
-yarn lint:templates
 
 yarn build:web &
 yarn build:lib &

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"
@@ -61,24 +60,24 @@ export default defineComponent({
       <v-container>
         <h3> {{ currentMode }} </h3>
         <v-row class="px-3">
-          <div class="mx-1">
+          <div class="mx-1 my-3">
             <tooltip-btn
               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'"
             />
           </div>
-          <div class="mx-1">
+          <div class="mx-1 my-3">
             <tooltip-btn
               icon="mdi-chart-line-variant"
               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