dive-dsa-slicer DIVEMetadata Integrations (#225)

* add intercept run task to the girder interface

* basic MVP functionality

* add/update test scripts

* remove logging

* vue-girder-slicer defaults, styling, disabled slicer params

* linting

* lodash verison pinning

* automatic refresh, metadataKey permissions modifications

* poetry lock update

Author: BryonLewis

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

@@ -85,7 +85,7 @@ export default defineComponent({
       }
       attributeFilters.value = { ...attributeFilters.value };
       creatingAttribute.value = false;
-      emit('update', attributeFilters);
+      emit('update', attributeFilters.value);
     };
     const trackAtrList = computed(() => {
       const result: {key: string; item: AttributeMatch}[] = [];

client/dive-common/components/Viewer.vue

@@ -665,9 +665,11 @@ export default defineComponent({
         groupStyleManager.populateTypeStyles(meta.customGroupStyling);
         if (configMeta.customTypeStyling) {
           trackFilters.importTypes(Object.keys(configMeta.customTypeStyling), false);
+          trackStyleManager.populateTypeStyles(configMeta.customTypeStyling);
         }
         if (configMeta.customGroupStyling) {
           groupFilters.importTypes(Object.keys(configMeta.customGroupStyling), false);
+          groupStyleManager.populateTypeStyles(configMeta.customGroupStyling);
         }
         if (configMeta.attributes) {
           loadAttributes(configMeta.attributes);

client/package.json

@@ -60,7 +60,7 @@
     "@types/jest": "^27.0.4",
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.5",
-    "@types/lodash": "^4.14.151",
+    "@types/lodash": "4.17.0",
     "@types/mime-types": "^2.1.0",
     "@types/mock-fs": "^4.13.1",
     "@types/mousetrap": "^1.6.3",

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

@@ -1,5 +1,7 @@
 import girderRest from 'platform/web-girder/plugins/girder';
+import { JobResponse } from 'vue-girder-slicer-cli-ui/dist/api/girderSlicerApi';
 import { GirderModelBase } from 'vue-girder-slicer-cli-ui/dist/girderTypes';
+import { XMLBaseValue } from 'vue-girder-slicer-cli-ui/dist/parser/parserTypes';
 import { StringKeyObject } from 'vue-media-annotator/BaseAnnotation';
 
 export interface MetadataFilterItem {
@@ -13,6 +15,7 @@ export interface FilterDisplayConfig {
     display: string[];
     hide: string[];
     categoricalLimit: number;
+    slicerCLI: 'Disabled' | 'Owner' | 'All Users'
 }
 
 export interface MetadataFilterKeysItem {
@@ -146,7 +149,7 @@ function setDiveDatasetMetadataKey(diveDatasetId: string, key: string, updateVal
 
 async function updateDiveMetadataDisplay(folderId: string, key: string, state: 'display' | 'hidden' | 'none') {
   const resp = await girderRest.get<GirderModelBase>(`folder/${folderId}`);
-  const DIVEMetadataFilter = resp.data.meta.DIVEMetadataFilter as {display: string[], hide: string[], categoricalLimit: number};
+  const DIVEMetadataFilter = resp.data.meta.DIVEMetadataFilter as FilterDisplayConfig;
   if (DIVEMetadataFilter) {
     const { display } = DIVEMetadataFilter;
     const { hide } = DIVEMetadataFilter;
@@ -166,6 +169,19 @@ async function updateDiveMetadataDisplay(folderId: string, key: string, state: '
   }
 }
 
+async function updateDiveMetadataSlicerConfig(folderId:string, value: 'Disabled' | 'Owner' | 'All Users') {
+  const resp = await girderRest.get<GirderModelBase>(`folder/${folderId}`);
+  const DIVEMetadataFilter = resp.data.meta.DIVEMetadataFilter as FilterDisplayConfig;
+  if (DIVEMetadataFilter) {
+    DIVEMetadataFilter.slicerCLI = value;
+    await girderRest.put(`folder/${folderId}/metadata`, { DIVEMetadataFilter });
+  }
+}
+
+async function runSlicerMetadataTask(rootId: string, taskId: string, filters: DIVEMetadataFilter, params: Record<string, XMLBaseValue>) {
+  return girderRest.post<JobResponse>(`dive_metadata/${rootId}/slicer-cli-task`, { taskId, filterParams: { filters, params } }, { params: { taskId, filterParams: { filters, params } } });
+}
+
 export {
   getMetadataFilterValues,
   filterDiveMetadata,
@@ -177,4 +193,6 @@ export {
   deleteDiveDatasetMetadataKey,
   setDiveDatasetMetadataKey,
   updateDiveMetadataDisplay,
+  updateDiveMetadataSlicerConfig,
+  runSlicerMetadataTask,
 };

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

@@ -1,4 +1,4 @@
-import type { GirderModel } from '@girder/components/src';
+import { GirderJob, GirderModel } from '@girder/components/src';
 import girderRest from 'platform/web-girder/plugins/girder';
 
 function deleteResources(resources: Array<GirderModel>) {
@@ -23,6 +23,19 @@ function getItemsInFolder(folderId: string, limit: number) {
   });
 }
 
+function getRecentSlicerJobs(limit: number, offset: number, statuses?: number[]) {
+  return girderRest.get<(GirderJob & { type: string})[]>('job', {
+    params: {
+      limit,
+      offset,
+      statuses: JSON.stringify(statuses),
+      sort: 'created',
+      sortdir: -1,
+      handler: 'jobs._local',
+    },
+  });
+}
+
 function getFolder(folderId: string) {
   return girderRest.get<GirderModel>(`folder/${folderId}`);
 }
@@ -56,6 +69,7 @@ function setUsePrivateQueue(userId: string, value = false) {
 export {
   deleteResources,
   getItemsInFolder,
+  getRecentSlicerJobs,
   getFolder,
   setUsePrivateQueue,
   getFolderAccess,

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

@@ -14,6 +14,11 @@ const userModule: Module<UserState, RootState> = {
       state.user = merge(state.user, data);
     },
   },
+  getters: {
+    userLogin(state) {
+      return state.user?.login;
+    },
+  },
   actions: {
     async loadUser({ commit }) {
       const data = await girderRest.fetchUser();

client/platform/web-girder/views/Admin/AdminJobs.vue

@@ -55,7 +55,7 @@ export default defineComponent({
     const initTypes = async () => {
       const typesAndStatus = (await getJobTypesStatus());
       jobTypes.value = typesAndStatus.data.types;
-      filterTypes.value = typesAndStatus.data.types;
+      filterTypes.value = ['convert', 'Dive Metadata Slicer CLI Batch', 'slicer_cli_web_job', 'Slicer CLI Metadata Run'];
     };
     const getData = async () => {
       const statusNums = filterStatus.value.map(

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 import {
   defineComponent, onMounted, ref, Ref,
+  watch,
 } from 'vue';
 import {
   addDiveMetadataKey,
@@ -10,6 +11,7 @@ import {
   MetadataFilterKeysItem,
   modifyDiveMetadataPermission,
   updateDiveMetadataDisplay,
+  updateDiveMetadataSlicerConfig,
 } from 'platform/web-girder/api/divemetadata.service';
 import { AccessType, getFolder, getFolderAccess } from 'platform/web-girder/api/girder.service';
 import { useGirderRest } from 'platform/web-girder/plugins/girder';
@@ -41,10 +43,14 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const displayConfig: Ref<FilterDisplayConfig> = ref({ display: [], hide: [], categoricalLimit: 50 });
+    const displayConfig: Ref<FilterDisplayConfig> = ref({
+      display: [], hide: [], categoricalLimit: 50, slicerCLI: 'Disabled',
+    });
 
     const girderRest = useGirderRest();
     const router = useRouter();
+    const categoryLimit = ref(50);
+    const slicerCLI: Ref<FilterDisplayConfig['slicerCLI']> = ref('Disabled');
 
     const processing = ref(false);
     const deleteDialog = ref(false);
@@ -106,6 +112,8 @@ export default defineComponent({
       }
       if (folder.meta.DIVEMetadata) {
         displayConfig.value = folder.meta.DIVEMetadataFilter;
+        categoryLimit.value = displayConfig.value.categoricalLimit || 50;
+        slicerCLI.value = displayConfig.value.slicerCLI || 'Disabled';
       }
       if (folder.creatorId === girderRest.user._id || girderRest.user.admin) {
         isOwnerAdmin.value = true;
@@ -146,6 +154,10 @@ export default defineComponent({
       updateDiveMetadataDisplay(props.id, item.name, val);
     };
 
+    watch(slicerCLI, () => {
+      updateDiveMetadataSlicerConfig(props.id, slicerCLI.value);
+    });
+
     const toggleUnlock = async (index: number) => {
       const item = formattedKeys.value[index];
       if (item) {
@@ -246,18 +258,30 @@ export default defineComponent({
       deleteDialog,
       deleteKey,
       prepDeleteMetadata,
+      slicerCLI,
     };
   },
 });
 </script>
 
 <template>
   <v-container v-if="isOwnerAdmin">
-    <v-row dense class="pb-4">
+    <v-row dense class="pb-4" align="center">
       <v-btn color="warning" @click="returnToMetadata()">
         Return to Metadata
       </v-btn>
       <v-spacer />
+      <v-select
+        v-model="slicerCLI"
+        label="Slicer CLI:"
+        variant="outlined"
+        :items="['Disabled', 'Owner', 'All Users']"
+        dense
+        hide-details
+        style="max-width:200px"
+        class="mr-6"
+      />
+
       <v-btn color="success" @click="initializeNewKey()">
         Add Metadata Field
       </v-btn>

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

@@ -9,10 +9,11 @@ import { intersection } from 'lodash';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import DIVEMetadataFilterItemVue from './DIVEMetadataFilterItem.vue';
 import DIVEMetadataCloneVue from './DIVEMetadataClone.vue';
+import DIVEMetadataSlicerVue from './DIVEMetadataSlicer.vue';
 
 export default defineComponent({
   name: 'DIVEMetadataFilter',
-  components: { DIVEMetadataFilterItemVue, DIVEMetadataCloneVue },
+  components: { DIVEMetadataFilterItemVue, DIVEMetadataCloneVue, DIVEMetadataSlicerVue },
   props: {
     currentPage: {
       type: Number,
@@ -243,6 +244,10 @@ export default defineComponent({
       }
     };
 
+    const jobCompleted = () => {
+      emit('updateFilters', { filter: currentFilter.value, sortVal: sortValue.value, sortDir: sortDir.value });
+    };
+
     return {
 
       pageList,
@@ -255,6 +260,7 @@ export default defineComponent({
       categoricalLimit,
       changePage,
       updateFilter,
+      jobCompleted,
       clearFilter,
       getDefaultValue,
       getRegExVal,
@@ -308,6 +314,7 @@ export default defineComponent({
         </v-btn>
 
         <v-spacer />
+        <DIVEMetadataSlicerVue :filters="currentFilter" :metadata-root="id" class="pr-8" @job-complete="jobCompleted()" />
         <v-chip><span class="pr-1">Filtered:</span>{{ filtered }} / {{ count }}</v-chip>
         <v-select
           v-model="sortValue"

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

@@ -34,9 +34,12 @@ export default defineComponent({
   },
   setup(props) {
     const folderList: Ref<MetadataResultItem[]> = ref([]);
+    const timeString = ref(Date.now());
     const unlockedMap: Ref<Record<string, MetadataFilterKeysItem>> = ref({});
     const loading = ref(true);
-    const displayConfig: Ref<FilterDisplayConfig> = ref({ display: [], hide: [], categoricalLimit: 50 });
+    const displayConfig: Ref<FilterDisplayConfig> = ref({
+      display: [], hide: [], categoricalLimit: 50, slicerCLI: 'Disabled',
+    });
     const totalPages = ref(0);
     const currentPage = ref(0);
     const count = ref(0);
@@ -56,6 +59,7 @@ export default defineComponent({
       totalPages.value = data.totalPages;
       filtered.value = data.filtered;
       count.value = data.count;
+      timeString.value = Date.now();
     };
     const getData = async () => {
       const { data } = await filterDiveMetadata(props.id, { ...filters.value });
@@ -179,6 +183,7 @@ export default defineComponent({
       locationStore,
       updateFilter,
       folderList,
+      timeString,
       displayConfig,
       getAdvanced,
       filters,
@@ -206,6 +211,7 @@ export default defineComponent({
       :filtered="filtered"
       :display-config="displayConfig"
       :owner-admin="isOwnerAdmin"
+      style="position: sticky; top: 0px; z-index: 10"
       @update:currentPage="changePage($event)"
       @updateFilters="updateFilter($event)"
       @filter-data="setFilterData($event)"
@@ -231,7 +237,7 @@ export default defineComponent({
       </template>
     </DIVEMetadataFilterVue>
     <span v-if="!openClone">
-      <v-card v-for="(item, key) in folderList" :key="key" class="my-2 pa-2">
+      <v-card v-for="(item, key) in folderList" :key="`${key}_${timeString}`" class="my-2 pa-2">
         <v-row class="ma-4">
           <div>{{ item.filename }}</div>
           <div>
@@ -246,7 +252,7 @@ export default defineComponent({
             </v-btn>
           </div>
         </v-row>
-        <v-row v-for="display in displayConfig['display']" :key="display" class="ma-4" align="center">
+        <v-row v-for="display in displayConfig['display']" :key="`${display}_${timeString}`" class="ma-4" align="center">
           <b>{{ display }}:</b>
           <div v-if="unlockedMap[display] !== undefined">
             <DIVEMetadataEditKey
@@ -265,7 +271,7 @@ export default defineComponent({
           <v-expansion-panel class="border">
             <v-expansion-panel-header>Advanced</v-expansion-panel-header>
             <v-expansion-panel-content>
-              <v-row v-for="(data, dataKey) in getAdvanced(item)" :key="dataKey" class="border" dense>
+              <v-row v-for="(data, dataKey) in getAdvanced(item)" :key="`${dataKey}_${timeString}`" class="border" dense>
                 <v-col cols="2" class="border">
                   <b>{{ dataKey }}:</b>
                 </v-col>