upgrade gwc to 3.0.1

client/dive-common/components/RunPipelineMenu.vue

@@ -104,8 +104,9 @@ export default defineComponent({
 <template>
   <div>
     <v-menu
-      max-width="320"
+      max-width="230"
       offset-y
+      :close-on-content-click="false"
     >
       <template v-slot:activator="{ on: menuOn }">
         <v-tooltip bottom>
@@ -132,7 +133,10 @@ export default defineComponent({
       </template>
 
       <template>
-        <v-card v-if="pipelines">
+        <v-card
+          v-if="pipelines"
+          outlined
+        >
           <v-card-title>
             VIAME Pipelines
           </v-card-title>
@@ -149,7 +153,7 @@ export default defineComponent({
             <v-col
               v-for="(pipeType) in Object.keys(pipelines)"
               :key="pipeType"
-              cols="6"
+              cols="12"
             >
               <v-menu
                 :key="pipeType"
@@ -164,9 +168,9 @@ export default defineComponent({
                   >
                     {{ pipeTypeDisplay(pipeType) }}
                     <v-icon
-                      left
+                      right
                       color="accent"
-                      class="ml-0"
+                      class="ml-2"
                     >
                       mdi-menu-right
                     </v-icon>
@@ -175,6 +179,7 @@ export default defineComponent({
 
                 <v-list
                   dense
+                  outlined
                   style="overflow-y:auto; max-height:85vh"
                 >
                   <v-list-item

client/dive-common/components/RunTrainingMenu.vue

@@ -118,46 +118,54 @@ export default defineComponent({
     </template>
 
     <template>
-      <v-card v-if="trainingConfigurations">
+      <v-card
+        v-if="trainingConfigurations"
+        outlined
+      >
         <v-card-title class="pb-1">
           Run Training
         </v-card-title>
 
         <v-card-text>
-          Specify the name of the resulting pipeline
-          and configuration file to use for training.
+          <p>
+            Specify the name of the resulting pipeline
+            and configuration file to use for training.
+          </p>
+          <v-alert
+            dense
+            color="warning"
+            outlined
+          >
+            This server is updated on Thursday at 2AM EST.
+            If your training job is running at that time it may be restarted or killed.
+          </v-alert>
+
+          <v-text-field
+            v-model="trainingOutputName"
+            outlined
+            hide-details
+            class="my-4"
+            label="Output Name"
+          />
+          <v-select
+            v-model="selectedTrainingConfig"
+            outlined
+            hide-details
+            class="my-4"
+            label="Configuration File"
+            :items="trainingConfigurations.configs"
+          />
+          <v-btn
+            depressed
+            block
+            color="primary"
+            class="mt-4"
+            :disabled="!trainingOutputName || !selectedTrainingConfig"
+            @click="runTrainingOnFolder"
+          >
+            Train on {{ selectedDatasetIds.length }} dataset(s)
+          </v-btn>
         </v-card-text>
-
-        <v-alert
-          dense
-          type="warning"
-        >
-          This instance is updated on Thursday at 2AM EST.
-          If your training job is running at that time it may be restarted/killed.
-        </v-alert>
-
-        <v-text-field
-          v-model="trainingOutputName"
-          class="mx-2"
-          outlined
-          label="Output Name"
-        />
-        <v-select
-          v-model="selectedTrainingConfig"
-          outlined
-          class="mx-2"
-          label="Configuration File"
-          :items="trainingConfigurations.configs"
-        />
-        <v-btn
-          depressed
-          class="mb-2 ml-2"
-          color="primary"
-          :disabled="!trainingOutputName || !selectedTrainingConfig"
-          @click="runTrainingOnFolder"
-        >
-          Run Training
-        </v-btn>
       </v-card>
     </template>
   </v-menu>

client/package.json

@@ -35,8 +35,8 @@
   "types": "lib/types/index.d.ts",
   "dependencies": {
     "@flatten-js/interval-tree": "^1.0.11",
-    "@girder/components": "^2.2.8",
-    "@mdi/font": "^3.9.97",
+    "@girder/components": "^3.0.1",
+    "@mdi/font": "^5.3.45",
     "@sentry/browser": "^5.24.2",
     "@sentry/integrations": "^5.24.2",
     "@types/mousetrap": "^1.6.3",
@@ -46,7 +46,7 @@
     "core-js": "^3.6.4",
     "csv-stringify": "^5.6.0",
     "d3": "^5.12.0",
-    "geojs": "^0.20.0",
+    "geojs": "1.0.0",
     "lodash": "^4.17.19",
     "moment": "^2.29.1",
     "mousetrap": "^1.6.5",

client/platform/desktop/plugins/vuetify.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 import colors from 'vuetify/lib/util/colors';
-import girderVuetifyConfig from '@girder/components/src/utils/vuetifyConfig';
+import { vuetifyConfig as girderVuetifyConfig } from '@girder/components/src';
 import { merge } from 'lodash';
 
 import '@mdi/font/css/materialdesignicons.css';

client/platform/web-girder/api/girder.service.ts

@@ -1,4 +1,4 @@
-import { GirderModel } from '@girder/components/src';
+import type { GirderModel } from '@girder/components/src';
 import girderRest from '../plugins/girder';
 
 async function getItemsInFolder(folderId: string, limit: number) {

client/platform/web-girder/api/viame.service.ts

@@ -1,4 +1,4 @@
-import { GirderModel } from '@girder/components/src';
+import type { GirderModel } from '@girder/components/src';
 
 import {
   DatasetMetaMutable,

client/platform/web-girder/main.ts

@@ -4,32 +4,33 @@ import VueCompositionApi from '@vue/composition-api';
 import { init as SentryInit } from '@sentry/browser';
 import { Vue as SentryVue } from '@sentry/integrations';
 
+import registerNotifications from 'vue-media-annotator/notificatonBus';
 import snackbarService from 'dive-common/vue-utilities/snackbar-service';
 import promptService from 'dive-common/vue-utilities/prompt-service';
 import vMousetrap from 'dive-common/vue-utilities/v-mousetrap';
 
 import getVuetify from './plugins/vuetify';
-import girderRest, { notificationBus } from './plugins/girder';
+import girderRest from './plugins/girder';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
-SentryInit({
-  dsn: process.env.VUE_APP_SENTRY_DSN,
-  integrations: [
-    new SentryVue({ Vue, logErrors: true }),
-  ],
-  release: process.env.VUE_APP_GIT_HASH,
-});
-
 Vue.config.productionTip = false;
 Vue.use(VueCompositionApi);
 Vue.use(vMousetrap);
-Vue.use(VueGtag, {
-  config: { id: process.env.VUE_APP_GTAG },
-});
 
-notificationBus.connect();
+if (process.env.NODE_ENV === 'production') {
+  SentryInit({
+    dsn: process.env.VUE_APP_SENTRY_DSN,
+    integrations: [
+      new SentryVue({ Vue, logErrors: true }),
+    ],
+    release: process.env.VUE_APP_GIT_HASH,
+  });
+  Vue.use(VueGtag, {
+    config: { id: process.env.VUE_APP_GTAG },
+  }, router);
+}
 
 Promise.all([
   store.dispatch('Brand/loadBrand'),
@@ -42,10 +43,17 @@ Promise.all([
     router,
     store,
     vuetify,
-    provide: { girderRest, notificationBus, vuetify },
+    provide: {
+      girderRest,
+      notificationBus: girderRest, // gwc.JobList expects this
+      vuetify,
+    },
     render: (h) => h(App),
   })
     .$mount('#app')
     .$snackbarAttach()
     .$promptAttach();
+
+  /** Start notification stream if everything else succeeds */
+  registerNotifications(girderRest).connect();
 });

client/platform/web-girder/plugins/girder.ts

@@ -1,17 +1,11 @@
 import Vue from 'vue';
-import NotificationBus from '@girder/components/src/utils/notifications';
 import Girder, { RestClient } from '@girder/components/src';
 
 Vue.use(Girder);
 const girderRest = new RestClient({ apiRoot: 'api/v1' });
-export const notificationBus = new NotificationBus(girderRest);
 
 export function useGirderRest() {
   return girderRest;
 }
 
-export function useNotificationBus() {
-  return notificationBus;
-}
-
 export default girderRest;

client/platform/web-girder/plugins/vuetify.ts

@@ -4,30 +4,25 @@ import colors from 'vuetify/lib/util/colors';
 import { merge } from 'lodash';
 
 import '@mdi/font/css/materialdesignicons.css';
+import { ThemeOptions } from 'vuetify/types/services/theme';
+import { vuetifyConfig } from '@girder/components/src';
 
 Vue.use(Vuetify);
 
-function getVuetify(config: unknown = {}) {
-  const appVuetifyConfig = merge({
-    theme: {
-      dark: true,
-      options: {
-        customProperties: true,
-      },
-      themes: {
-        light: {
-          accent: colors.blue.lighten1,
-          secondary: colors.grey.darken1,
-          primary: colors.blue.darken2,
-          neutral: colors.grey.lighten5,
-        },
-        dark: {
-          accent: colors.blue.lighten1,
-          accentBackground: '#2c7596',
-        },
+function getVuetify(config: unknown) {
+  const theme: ThemeOptions = {
+    dark: true,
+    options: {
+      customProperties: true,
+    },
+    themes: {
+      dark: {
+        accent: colors.blue.lighten1,
+        accentBackground: '#2c7596',
       },
     },
-  }, config);
+  };
+  const appVuetifyConfig = merge(vuetifyConfig, config, { theme });
   return new Vuetify(appVuetifyConfig);
 }
 

client/platform/web-girder/store/Location.ts

@@ -1,7 +1,6 @@
-import { Module } from 'vuex';
-import { GirderModel } from '@girder/components/src';
-
-import { LocationState, RootState } from './types';
+import type { Module } from 'vuex';
+import type { GirderModel } from '@girder/components/src';
+import type { LocationState, RootState } from './types';
 
 const locationModule: Module<LocationState, RootState> = {
   namespaced: true,

client/platform/web-girder/store/types.ts

@@ -1,6 +1,6 @@
-import { GirderModel } from '@girder/components/src';
-import { BrandData } from 'platform/web-girder/api/viame.service';
-import { GirderMetadata } from 'platform/web-girder/constants';
+import type { GirderModel } from '@girder/components/src';
+import type { BrandData } from 'platform/web-girder/api/viame.service';
+import type { GirderMetadata } from 'platform/web-girder/constants';
 
 export interface LocationState {
   location: null | GirderModel;

client/platform/web-girder/utils.ts

@@ -1,8 +1,5 @@
 import { AxiosError } from 'axios';
-import { GirderModel } from '@girder/components/src';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
-import { isRootLocation } from '@girder/components/src/utils/locationHelpers';
+import { isRootLocation, GirderModel } from '@girder/components/src';
 import { getFolder } from './api/girder.service';
 
 interface Location {

client/platform/web-girder/views/Home.vue

@@ -1,8 +1,7 @@
 <script>
 import Vue from 'vue';
 import { mapMutations } from 'vuex';
-import { FileManager } from '@girder/components/src/components/Snippet';
-import { getLocationType } from '@girder/components/src/utils';
+import { getLocationType, GirderFileManager } from '@girder/components/src';
 
 import RunPipelineMenu from 'dive-common/components/RunPipelineMenu.vue';
 import RunTrainingMenu from 'dive-common/components/RunTrainingMenu.vue';
@@ -16,12 +15,12 @@ export default Vue.extend({
   name: 'Home',
   components: {
     Export,
-    FileManager,
+    GirderFileManager,
     Upload,
     RunPipelineMenu,
     RunTrainingMenu,
   },
-  inject: ['notificationBus', 'girderRest'],
+  inject: ['girderRest'],
   data: () => ({
     uploaderDialog: false,
     selected: [],
@@ -100,10 +99,10 @@ export default Vue.extend({
       this.setLocation(newloc);
       this.$router.push(getPathFromLocation(newloc));
     }
-    this.notificationBus.$on('message:job_status', this.handleNotification);
+    this.girderRest.$on('message:job_status', this.handleNotification);
   },
   beforeDestroy() {
-    this.notificationBus.$off('message:job_status', this.handleNotification);
+    this.girderRest.$off('message:job_status', this.handleNotification);
   },
   methods: {
     ...mapMutations('Location', ['setLocation']),
@@ -164,7 +163,7 @@ export default Vue.extend({
         no-gutters
       >
         <v-col :cols="12">
-          <FileManager
+          <GirderFileManager
             ref="fileManager"
             v-model="selected"
             :selectable="!locationIsViameFolder"
@@ -243,7 +242,7 @@ export default Vue.extend({
                 Launch Annotator
               </v-btn>
             </template>
-          </FileManager>
+          </GirderFileManager>
         </v-col>
       </v-row>
     </v-container>