Vue2.7 and Vite Branch

client/.npmrc

@@ -0,0 +1 @@
+@bryonlewis:registry=https://npm.pkg.github.com

client/dive-common/apispec.ts

@@ -1,4 +1,4 @@
-import { provide } from '@vue/composition-api';
+import { provide } from 'vue';
 import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
 import { GroupData } from 'vue-media-annotator/Group';
 
@@ -98,7 +98,6 @@ interface MultiCamMedia {
   }>;
   defaultDisplay: string; // Default camera for displaying the MultiCamMedia
 }
-
 interface MediaImportResponse {
   jsonMeta: {
     originalImageFiles: string[];
@@ -107,7 +106,6 @@ interface MediaImportResponse {
   mediaConvertList: string[];
 }
 
-
 /**
  * The parts of metadata a user should be able to modify.
  */
@@ -122,8 +120,6 @@ interface DatasetMetaMutable {
   configuration?: Configuration;
 }
 const DatasetMetaMutableKeys = ['attributes', 'confidenceFilters', 'customTypeStyling', 'customGroupStyling', 'timelines', 'swimlanes'];
-
-
 interface DatasetMeta {
   id: Readonly<string>;
   imageData: Readonly<FrameImage[]>;
@@ -140,7 +136,6 @@ interface DatasetMeta {
   subType: Readonly<SubType>; // In future this could have stuff like IR/EO
   multiCamMedia: Readonly<MultiCamMedia | null>;
 }
-
 interface Api {
 
   loadMetadata(datasetId: string): Promise<{

client/dive-common/components/ActionEditors/ActionEditor.vue

@@ -2,7 +2,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, Ref, PropType,
-} from '@vue/composition-api';
+} from 'vue';
 import {
   DIVEAction, TrackSelectAction,
 } from 'dive-common/use/useActions';
@@ -11,7 +11,6 @@ import {
 } from 'vue-media-annotator/provides';
 import TrackFilter from './TrackFilter.vue';
 
-
 export default defineComponent({
   name: 'ActionEditorSettings',
   components: {
@@ -65,7 +64,6 @@ export default defineComponent({
       };
     }
 
-
     const getAttributeColor = (item: string) => {
       const found = attributesList.value.find((atr) => atr.key === item || atr.key === `detection_${item}`);
       return found?.color || 'white';

client/dive-common/components/ActionEditors/ActionEditorSettings.vue

@@ -2,7 +2,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, Ref,
-} from '@vue/composition-api';
+} from 'vue';
 import {
   DIVEAction, TrackSelectAction,
 } from 'dive-common/use/useActions';
@@ -12,7 +12,6 @@ import {
 import ActionEditor from './ActionEditor.vue';
 import TrackFilter from './TrackFilter.vue';
 
-
 export default defineComponent({
   name: 'ActionEditorSettings',
   components: {
@@ -59,7 +58,6 @@ export default defineComponent({
       }
     };
 
-
     const saveAction = (diveAction: DIVEAction) => {
       configMan.updateAction(diveAction, addEditActionindex.value);
       addEditAction.value = false;

client/dive-common/components/ActionEditors/ActionShortcuts.vue

@@ -3,7 +3,7 @@
 import {
   computed,
   defineComponent, ref, Ref,
-} from '@vue/composition-api';
+} from 'vue';
 import {
   DIVEAction, DIVEActionShortcut, TrackSelectAction,
 } from 'dive-common/use/useActions';
@@ -14,7 +14,6 @@ import ActionEditor from './ActionEditor.vue';
 import GetShortcut from './GetShortcut.vue';
 import TrackFilter from './TrackFilter.vue';
 
-
 export default defineComponent({
   name: 'ActionShortcuts',
   components: {
@@ -66,7 +65,6 @@ export default defineComponent({
       updateActionList();
     };
 
-
     const saveShortcut = () => {
       if (editingShortcut.value) {
         configMan.updateShortcut(editingShortcut.value, addEditShortcutIndex.value);
@@ -92,7 +90,6 @@ export default defineComponent({
       }
     };
 
-
     const removeShortcut = (index: number) => {
       configMan.removeShortCut(index);
       updateShortCutList();

client/dive-common/components/ActionEditors/AttributeFilter.vue

@@ -3,15 +3,14 @@
 import {
   computed,
   defineComponent, ref, Ref, PropType,
-} from '@vue/composition-api';
+} from 'vue';
 import {
   AttributeMatch, AttributeSelectAction, MatchOperator,
 } from 'dive-common/use/useActions';
 import {
   useAttributes, useTrackStyleManager,
 } from 'vue-media-annotator/provides';
 
-
 export default defineComponent({
   name: 'AttributeSelectFilter',
   components: {
@@ -27,7 +26,6 @@ export default defineComponent({
 
     const attributes = useAttributes();
 
-
     const attributeFilters: Ref<AttributeSelectAction> = ref(props.data || {});
 
     const creatingAtrType: Ref<'track' | 'detection'> = ref('track');
@@ -108,7 +106,6 @@ export default defineComponent({
       return result;
     });
 
-
     const getAttributeColor = (item: string) => {
       const found = attributes.value.find((atr) => atr.key === item || atr.key === `detection_${item}`);
       return found?.color || 'white';

client/dive-common/components/ActionEditors/GetShortcut.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   computed, defineComponent, ref, PropType, Ref,
-} from '@vue/composition-api';
+} from 'vue';
 import usedShortcuts from 'dive-common/use/usedShortcuts';
 import { useAttributes } from 'vue-media-annotator/provides';
 import { uniq } from 'lodash';
@@ -24,7 +24,6 @@ export default defineComponent({
     const awaitingKeyPress = ref(false);
     const shortcutError: Ref<{description: string; type: 'System' | 'Custom'}| null> = ref(null);
 
-
     const existingShortcuts = computed(() => {
       const dataList: Record<string, {description: string; type: 'System' | 'Custom'}> = {};
       attributes.value.forEach((attribute) => {

client/dive-common/components/ActionEditors/TrackFilter.vue

@@ -3,15 +3,14 @@
 import {
   computed,
   defineComponent, ref, Ref, PropType,
-} from '@vue/composition-api';
+} from 'vue';
 import {
   AttributeMatch, AttributeSelectAction, MatchOperator, TrackSelectAction,
 } from 'dive-common/use/useActions';
 import {
   useAttributes, useTrackFilters, useTrackStyleManager,
 } from 'vue-media-annotator/provides';
 
-
 export default defineComponent({
   name: 'TrackFilter',
   components: {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   computed, defineComponent, PropType, Ref, ref, watch,
-} from '@vue/composition-api';
+} from 'vue';
 import {
   Attribute, AttributeShortcut, NumericAttributeEditorOptions, StringAttributeEditorOptions,
 } from 'vue-media-annotator/use/AttributeTypes';
@@ -12,7 +12,6 @@ import AttributeRendering from './AttributeRendering.vue';
 import AttributeValueColors from './AttributeValueColors.vue';
 import AttributeNumberValueColors from './AttributeNumberColors.vue';
 
-
 export default defineComponent({
   name: 'AttributeSettings',
   components: {

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({

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

@@ -2,7 +2,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, PropType, Ref, watch, onMounted, computed,
-} from '@vue/composition-api';
+} from 'vue';
 import * as d3 from 'd3';
 import { useTrackFilters, useTrackStyleManager } from 'vue-media-annotator/provides';
 import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
@@ -177,7 +177,6 @@ export default defineComponent({
       }
     };
 
-
     return {
       attributeColors,
       editingColor,

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

@@ -2,7 +2,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, PropType, watch, computed, Ref,
-} from '@vue/composition-api';
+} from 'vue';
 import { useTrackFilters, useTrackStyleManager } from 'vue-media-annotator/provides';
 import { Attribute, AttributeRendering } from 'vue-media-annotator/use/AttributeTypes';
 

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

@@ -2,15 +2,14 @@
 <script lang="ts">
 import {
   computed, defineComponent, ref,
-} from '@vue/composition-api';
+} from 'vue';
 import { DIVEAction } from 'dive-common/use/useActions';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { useStore } from 'platform/web-girder/store/types';
 import {
   useAttributes, useCameraStore, useConfiguration, useHandler, useSelectedTrackId, useTime,
 } from 'vue-media-annotator/provides';
 
-
 export default defineComponent({
   name: 'AttributeShortcutToggle',
   props: {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   computed, defineComponent, ref, PropType, Ref,
-} from '@vue/composition-api';
+} from 'vue';
 import { AttributeShortcut } from 'vue-media-annotator/use/AttributeTypes';
 import usedShortcuts from 'dive-common/use/usedShortcuts';
 import { useAttributes } from 'vue-media-annotator/provides';
@@ -33,7 +33,6 @@ export default defineComponent({
     const awaitingKeyPress = ref(false);
     const shortcutError: Ref<{description: string; type: 'System' | 'Custom'}| null> = ref(null);
 
-
     const existingShortcuts = computed(() => {
       const dataList: Record<string, {description: string; type: 'System' | 'Custom'}> = {};
       attributes.value.forEach((attribute) => {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, Ref, computed,
-} from '@vue/composition-api';
+} from 'vue';
 
 import StackedVirtualSidebarContainer from 'dive-common/components/StackedVirtualSidebarContainer.vue';
 import { useAttributes, useCameraStore } from 'vue-media-annotator/provides';
@@ -37,7 +37,6 @@ export default defineComponent({
 });
 </script>
 
-
 <template>
   <StackedVirtualSidebarContainer
     :width="width"

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

@@ -2,15 +2,14 @@
 <script lang="ts">
 import {
   defineComponent, ref, PropType, Ref, watch, del as VueDel, computed,
-} from '@vue/composition-api';
+} from 'vue';
 import { useStore } from 'platform/web-girder/store/types';
 import { StringKeyObject } from 'vue-media-annotator/BaseAnnotation';
 import { useCameraStore, useTrackFilters, useTrackStyleManager } from 'vue-media-annotator/provides';
 import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 
 import { isHexColorCode } from 'vue-media-annotator/utils';
 
-
 export default defineComponent({
   name: 'AttributeValueColors',
   props: {
@@ -29,7 +28,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 || {});
@@ -142,7 +140,6 @@ export default defineComponent({
       updateColors();
     };
 
-
     const setKeySettings = () => {
       toggleKeySettings.value = !toggleKeySettings.value;
       if (toggleKeySettings.value) {
@@ -163,7 +160,6 @@ export default defineComponent({
       }
     };
 
-
     watch(colorKey, () => updateColors());
     watch(colorKeySettings, () => updateColors(), { deep: true });
     return {

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';
@@ -53,7 +53,6 @@ export default defineComponent({
 });
 </script>
 
-
 <template>
   <StackedVirtualSidebarContainer
     :width="width"

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

@@ -5,7 +5,7 @@ import {
   ref,
   PropType,
   computed,
-} from '@vue/composition-api';
+} from 'vue';
 import {
   useSelectedTrackId,
   useCameraStore,
@@ -189,7 +189,6 @@ export default defineComponent({
       return undefined;
     }
 
-
     return {
       frameRef,
       activeAttributesCount,

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({

client/dive-common/components/ConfidenceSubsection.vue

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