Allow naming single dataset pipeline output

Author: naglepuff

client/dive-common/apispec.ts

@@ -155,7 +155,7 @@ interface DatasetMeta extends DatasetMetaMutable {
 
 interface Api {
   getPipelineList(): Promise<Pipelines>;
-  runPipeline(itemId: string, pipeline: Pipe): Promise<unknown>;
+  runPipeline(itemId: string, pipeline: Pipe, additionalConfig?: Record<string, string>): Promise<unknown>;
   deleteTrainedPipeline(pipeline: Pipe): Promise<void>;
   exportTrainedPipeline(path: string, pipeline: Pipe): Promise<unknown>;
 

client/dive-common/components/JobConfigFilterTranscodeDialog.vue

@@ -0,0 +1,124 @@
+<script lang="ts">
+import {
+  defineComponent,
+  watch,
+  // onMounted,
+  ref,
+  Ref,
+  PropType,
+} from 'vue';
+// import sanitize from 'sanitize-filename';
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    datasetName: {
+      type: String,
+      required: true,
+    },
+    pipelineName: {
+      type: String,
+      required: true,
+    },
+    // Consumers of this component should make sure that for each i,
+    // selectedDatasetIds[i] is the ID for the dataset with the name selectedDatasetNames[i]
+    // Additionally, since this feature is currently only available in Desktop, and Desktop
+    // runs a pipeline on a single dataset at a time, this array should always be length 1.
+    selectedDatasetIds: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    selectedDatasetNames: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+  },
+  emits: ['cancel', 'submit'],
+  setup(props, { emit }) {
+    const formValid = ref(false);
+    const dialogOpenTimestamp = ref('');
+    const outputDatasetNames: Ref<Record<string, string>> = ref({});
+
+    watch(() => props.value, () => {
+      dialogOpenTimestamp.value = (new Date()).toISOString().replace(/[:.]/g, '-');
+      props.selectedDatasetIds.forEach((id: string) => {
+        outputDatasetNames.value[id] = `${props.pipelineName}_${id}_${dialogOpenTimestamp.value}`;
+      });
+    });
+
+    function cancelPipeline() {
+      emit('cancel');
+    }
+
+    function submitPipelines() {
+      emit('submit', outputDatasetNames.value);
+    }
+
+    return {
+      formValid,
+      outputDatasetNames,
+      cancelPipeline,
+      submitPipelines,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-dialog
+    v-model="value"
+    width="50%"
+  >
+    <v-card outlined>
+      <v-card-title>
+        Job Configuration
+      </v-card-title>
+      <v-card-text class="d-flex flex-column justify-center">
+        You have selected a pipeline that will create a new dataset. Please choose a
+        name for that dataset.
+        <v-form
+          v-model="formValid"
+          class="mt-2"
+        >
+          <v-col>
+            <v-row
+              v-for="datasetId in selectedDatasetIds"
+              :key="datasetId"
+              class="d-flex justify-center align-end"
+            >
+              <v-label>
+                {{ datasetId }}
+              </v-label>
+              <v-text-field
+                v-model="outputDatasetNames[datasetId]"
+                class="ml-2"
+                label="Output dataset name"
+                :rules="[v => !!v || 'Each output dataset must have a name']"
+                hide-details
+              />
+            </v-row>
+          </v-col>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          color="error"
+          @click="cancelPipeline"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="primary"
+          :disabled="!formValid"
+          @click="submitPipelines"
+        >
+          Submit
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

client/dive-common/components/RunPipelineMenu.vue

@@ -1,6 +1,11 @@
 <script lang="ts">
 import {
-  defineComponent, computed, PropType, ref, onBeforeMount,
+  defineComponent,
+  computed,
+  PropType,
+  ref,
+  Ref,
+  onBeforeMount,
 } from 'vue';
 import {
   Pipelines,
@@ -10,14 +15,25 @@ import {
   DatasetType,
 } from 'dive-common/apispec';
 import JobLaunchDialog from 'dive-common/components/JobLaunchDialog.vue';
-import { stereoPipelineMarker, multiCamPipelineMarkers, LargeImageType } from 'dive-common/constants';
+import JobConfigFilterTranscodeDialog from 'dive-common/components/JobConfigFilterTranscodeDialog.vue';
+import {
+  stereoPipelineMarker,
+  multiCamPipelineMarkers,
+  LargeImageType,
+  pipelineCreatesDatasetMarkers,
+} from 'dive-common/constants';
 import { useRequest } from 'dive-common/use';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 
+type MenuState = 'idle' | 'configuring';
+
 export default defineComponent({
   name: 'RunPipelineMenu',
 
-  components: { JobLaunchDialog },
+  components: {
+    JobLaunchDialog,
+    JobConfigFilterTranscodeDialog,
+  },
 
   props: {
     selectedDatasetIds: {
@@ -69,6 +85,14 @@ export default defineComponent({
       state: jobState,
     } = useRequest();
 
+    const menuState: Ref<MenuState> = ref('idle');
+    const configuring = computed(() => menuState.value === 'configuring');
+    const selectedPipeline: Ref<Pipe | null> = ref(null);
+    const selectedPipelineName = computed(() => (selectedPipeline.value ? selectedPipeline.value.name : ''));
+    function cancelConfig() {
+      menuState.value = 'idle';
+    }
+
     const includesLargeImage = computed(() => props.typeList.includes(LargeImageType));
 
     const successMessage = computed(() => (
@@ -124,7 +148,10 @@ export default defineComponent({
       return false;
     });
 
-    async function runPipelineOnSelectedItem(pipeline: Pipe) {
+    async function _runPipelineOnSelectedItemInner(
+      pipeline: Pipe,
+      additionalConfigById?: Record<string, Record<string, string> | undefined>,
+    ) {
       if (props.selectedDatasetIds.length === 0) {
         throw new Error('No selected datasets to run on');
       }
@@ -150,10 +177,46 @@ export default defineComponent({
       }
       selectedPipe.value = pipeline;
       await _runPipelineRequest(() => Promise.all(
-        datasetIds.map((id) => runPipeline(id, pipeline)),
+        datasetIds.map((id) => {
+          const additionalConfig = additionalConfigById ? additionalConfigById[id] : undefined;
+          return runPipeline(id, pipeline, additionalConfig);
+        }),
       ));
     }
 
+    async function runPipelineOnSelectedItem(pipeline: Pipe) {
+      if (!pipelineCreatesDatasetMarkers.includes(pipeline.type)) {
+        _runPipelineOnSelectedItemInner(pipeline);
+      } else {
+        // If a pipeline creates datasets, open the configuration dialog
+        // to allow users to name that dataset
+        // This is relevant for filter and transcode pipeline types
+        selectedPipeline.value = pipeline;
+        menuState.value = 'configuring'; // force the dialog open
+      }
+    }
+
+    /**
+     * Handle a user confirming additional configuration for filter
+     * or transcode pipelines, which create new datasets.
+     *
+     * @param outputNameMap Map selected dataset IDs to the name
+     * of the resultant dataset created by the pipeline
+     */
+    async function exitPipelineConfig(outputNameMap: Record<string, string>) {
+      menuState.value = 'idle'; // close the dialog
+      const additionalConfigById: Record<string, Record<string, string>> = {};
+      Object.keys(outputNameMap).forEach((id: string) => {
+        additionalConfigById[id] = {
+          outputDatasetName: outputNameMap[id],
+        };
+      });
+      if (selectedPipeline.value) {
+        _runPipelineOnSelectedItemInner(selectedPipeline.value, additionalConfigById);
+      }
+      selectedPipeline.value = null; // reset selected pipeline state
+    }
+
     function pipeTypeDisplay(pipeType: string) {
       switch (pipeType) {
         case 'trained':
@@ -179,6 +242,12 @@ export default defineComponent({
       runPipelineOnSelectedItem,
       pipelinesCurrentlyRunning,
       singlePipelineValue,
+      selectedPipeline,
+      selectedPipelineName,
+      configuring,
+      cancelConfig,
+      menuState,
+      exitPipelineConfig,
     };
   },
 });
@@ -337,5 +406,13 @@ export default defineComponent({
       :message="successMessage"
       @close="dismissLaunchDialog"
     />
+    <JobConfigFilterTranscodeDialog
+      :value="menuState === 'configuring'"
+      :dataset-name="'foo'"
+      :pipeline-name="selectedPipelineName"
+      :selected-dataset-ids="selectedDatasetIds"
+      @cancel="cancelConfig"
+      @submit="exitPipelineConfig"
+    />
   </div>
 </template>

client/package.json

@@ -50,6 +50,7 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.1",
     "mousetrap": "^1.6.5",
+    "sanitize-filename": "^1.6.3",
     "semver": "^7.3.5",
     "vue": "^2.7.16",
     "vue-gtag": "^1.9.1",

client/platform/desktop/frontend/api.ts

@@ -91,21 +91,12 @@ async function getTrainingConfigurations(): Promise<TrainingConfigs> {
   return ipcRenderer.invoke('get-training-configs');
 }
 
-async function runPipeline(itemId: string, pipeline: Pipe): Promise<void> {
+async function runPipeline(itemId: string, pipeline: Pipe, additionalConfig?: Record<string, string>): Promise<void> {
   const args: RunPipeline = {
     type: JobType.RunPipeline,
     pipeline,
     datasetId: itemId,
-  };
-  gpuJobQueue.enqueue(args);
-}
-
-async function runPipelineWithOutput(itemId: string, pipeline: Pipe, outputDatasetName: string): Promise<void> {
-  const args: RunPipeline = {
-    type: JobType.RunPipeline,
-    pipeline,
-    datasetId: itemId,
-    outputDatasetName,
+    ...additionalConfig,
   };
   gpuJobQueue.enqueue(args);
 }
@@ -287,5 +278,4 @@ export {
   openLink,
   nvidiaSmi,
   cancelJob,
-  runPipelineWithOutput,
 };

client/platform/desktop/frontend/components/MultiPipeline.vue

@@ -9,7 +9,6 @@ import {
 import { DataTableHeader } from 'vuetify';
 import { useRouter } from 'vue-router/composables';
 import { Pipe, Pipelines, useApi } from 'dive-common/apispec';
-import { runPipelineWithOutput } from 'platform/desktop/frontend/api';
 import {
   itemsPerPageOptions,
   stereoPipelineMarker,
@@ -133,7 +132,9 @@ async function runPipelineForDatasets() {
           if (!datasetMeta) {
             throw new Error(`Attempted to run pipeline on nonexistant dataset ${datasetId}`);
           }
-          return runPipelineWithOutput(datasetId, selectedPipeline.value!, computeOutputDatasetName(datasetMeta));
+          return runPipeline(datasetId, selectedPipeline.value!, {
+            outputDatasetName: computeOutputDatasetName(datasetMeta),
+          });
         }
         return runPipeline(datasetId, selectedPipeline.value!);
       }),

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

@@ -80,6 +80,11 @@ export default defineComponent({
         ({ _modelType, meta }) => _modelType === 'folder' && meta && meta.annotate,
       ).map(({ _id }) => _id);
     },
+    selectedViameFolderNames() {
+      return this.selected.filter(
+        ({ _modelType, meta }) => _modelType === 'folder' && meta && meta.annotate,
+      ).map(({ name }) => name);
+    },
     selectedFileIds() {
       return this.selected.filter(
         (element) => element._modelType === 'item',
@@ -93,6 +98,9 @@ export default defineComponent({
     locationInputs() {
       return this.locationIsViameFolder ? [this.location._id] : this.selectedViameFolderIds;
     },
+    locationInputNames() {
+      return this.locationIsViameFolder ? [this.location.name] : this.selectedViameFolderNames;
+    },
     selectedDescription() {
       return this.location?.description;
     },
@@ -179,6 +187,7 @@ export default defineComponent({
                     menuOptions,
                   }"
                   :selected-dataset-ids="locationInputs"
+                  :selected-dataset-name="locationInputNames"
                   :running-pipelines="runningPipelines"
                 />
                 <export