Migrate WF Collection Input Form Definition to Client Side

client/src/components/Form/Elements/FormSelection.vue

@@ -100,7 +100,7 @@ watch(
 );
 
 const showSelectPreference = computed(
-    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio"
+    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && props.display !== "simple"
 );
 
 const displayMany = computed(() => showSelectPreference.value && useMany.value);

client/src/components/Workflow/Editor/Forms/FormCollectionType.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import { isValidCollectionTypeStr } from "@/components/Workflow/Editor/modules/collectionTypeDescription";
+
+import FormElement from "@/components/Form/FormElement.vue";
+
+interface Props {
+    value?: string;
+}
+
+const props = defineProps<Props>();
+
+const currentValue = ref<string | undefined>(undefined);
+const warning = ref<string | null>(null);
+const error = ref<string | null>(null);
+
+function onInput(newCollectionType: string | undefined) {
+    emit("onChange", newCollectionType);
+}
+
+const collectionTypeOptions = [
+    { value: "list", label: "List of Datasets" },
+    { value: "paired", label: "Dataset Pair" },
+    { value: "list:paired", label: "List of Dataset Pairs" },
+];
+
+function updateValue(newValue: string | undefined) {
+    currentValue.value = newValue;
+    warning.value = null;
+    error.value = null;
+    if (!newValue) {
+        warning.value = "Typically, a value for this collection type should be specified.";
+    } else if (!isValidCollectionTypeStr(newValue)) {
+        error.value = "Invalid collection type";
+    }
+}
+
+watch(() => props.value, updateValue, { immediate: true });
+const emit = defineEmits(["onChange"]);
+</script>
+
+<template>
+    <FormElement
+        id="collection_type"
+        :value="currentValue"
+        :attributes="{ datalist: collectionTypeOptions }"
+        :warning="warning"
+        :error="error"
+        title="Collection type"
+        :optional="true"
+        type="text"
+        @input="onInput" />
+</template>

client/src/components/Workflow/Editor/Forms/FormDatatype.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+import type { DatatypesMapperModel } from "@/components/Datatypes/model";
+
+import FormElement from "@/components/Form/FormElement.vue";
+
+const props = withDefaults(
+    defineProps<{
+        id: string;
+        value?: string | string[];
+        title: string;
+        help: string;
+        multiple?: boolean;
+        datatypes: DatatypesMapperModel["datatypes"];
+    }>(),
+    {
+        value: null,
+        multiple: false,
+    }
+);
+
+const currentValue = ref<string | string[] | undefined>(undefined);
+
+watch(
+    () => props.value,
+    (newValue) => {
+        currentValue.value = newValue;
+    },
+    { immediate: true }
+);
+const emit = defineEmits(["onChange"]);
+
+const datatypeExtensions = computed(() => {
+    const extensions = [];
+    for (const key in props.datatypes) {
+        extensions.push({ 0: props.datatypes[key] || "", 1: props.datatypes[key] || "" });
+    }
+    extensions.sort((a, b) => (a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0));
+    extensions.unshift({
+        0: "Sequences",
+        1: "Sequences",
+    });
+    extensions.unshift({
+        0: "Roadmaps",
+        1: "Roadmaps",
+    });
+    if (!props.multiple) {
+        extensions.unshift({
+            0: "Leave unchanged",
+            1: "",
+        });
+    }
+    return extensions;
+});
+
+function onInput(newDatatype: string) {
+    currentValue.value = newDatatype;
+    emit("onChange", currentValue.value);
+}
+</script>
+
+<template>
+    <FormElement
+        :id="id"
+        :value="currentValue"
+        :attributes="{ options: datatypeExtensions, multiple: multiple, display: 'simple', optional: true }"
+        :title="title"
+        type="select"
+        :help="help"
+        @input="onInput" />
+</template>

client/src/components/Workflow/Editor/Forms/FormDefault.vue

@@ -43,8 +43,15 @@
                 v-if="isSubworkflow"
                 :step="step"
                 @onUpdateStep="(id, step) => emit('onUpdateStep', id, step)" />
+            <FormInputCollection
+                v-if="type == 'data_collection_input'"
+                :step="step"
+                :datatypes="datatypes"
+                :inputs="configForm.inputs"
+                @onChange="onChange">
+            </FormInputCollection>
             <FormDisplay
-                v-if="configForm?.inputs"
+                v-else-if="configForm?.inputs"
                 :id="formDisplayId"
                 :key="formKey"
                 :inputs="configForm.inputs"
@@ -78,6 +85,7 @@ import FormConditional from "./FormConditional.vue";
 import FormCard from "@/components/Form/FormCard.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
 import FormElement from "@/components/Form/FormElement.vue";
+import FormInputCollection from "@/components/Workflow/Editor/Forms/FormInputCollection.vue";
 import FormOutputLabel from "@/components/Workflow/Editor/Forms/FormOutputLabel.vue";
 
 const props = defineProps<{

client/src/components/Workflow/Editor/Forms/FormInputCollection.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, toRef } from "vue";
+
+import type { DatatypesMapperModel } from "@/components/Datatypes/model";
+import type { Step } from "@/stores/workflowStepStore";
+
+import { useToolState } from "../composables/useToolState";
+
+import FormElement from "@/components/Form/FormElement.vue";
+import FormCollectionType from "@/components/Workflow/Editor/Forms/FormCollectionType.vue";
+import FormDatatype from "@/components/Workflow/Editor/Forms/FormDatatype.vue";
+
+interface ToolState {
+    collection_type: string | null;
+    optional: boolean;
+    format: string | null;
+    tag: string | null;
+}
+
+const props = defineProps<{
+    step: Step;
+    datatypes: DatatypesMapperModel["datatypes"];
+}>();
+
+const stepRef = toRef(props, "step");
+const { toolState } = useToolState(stepRef);
+
+function cleanToolState(): ToolState {
+    if (toolState.value) {
+        return { ...toolState.value } as unknown as ToolState;
+    } else {
+        return {
+            collection_type: null,
+            optional: false,
+            tag: null,
+            format: null,
+        };
+    }
+}
+
+const emit = defineEmits(["onChange"]);
+
+function onDatatype(newDatatype: string[]) {
+    const state = cleanToolState();
+    state.format = newDatatype.join(",");
+    emit("onChange", state);
+}
+
+function onTags(newTags: string | null) {
+    const state = cleanToolState();
+    state.tag = newTags;
+    emit("onChange", state);
+}
+
+function onOptional(newOptional: boolean) {
+    const state = cleanToolState();
+    state.optional = newOptional;
+    emit("onChange", state);
+}
+
+function onCollectionType(newCollectionType: string | null) {
+    const state = cleanToolState();
+    state.collection_type = newCollectionType;
+    emit("onChange", state);
+}
+
+const formatsAsList = computed(() => {
+    const formatStr = toolState.value?.format as string | string[] | null;
+    if (formatStr && typeof formatStr === "string") {
+        return formatStr.split(/\s*,\s*/);
+    } else if (formatStr) {
+        return formatStr;
+    } else {
+        return [];
+    }
+});
+
+// Terrible Hack: The parent component (./FormDefault.vue) ignores the first update, so
+// I am sending a dummy update here. Ideally, the parent FormDefault would not expect this.
+emit("onChange", cleanToolState());
+</script>
+
+<template>
+    <div>
+        <FormCollectionType :value="toolState?.collection_type" :optional="true" @onChange="onCollectionType" />
+        <FormElement id="optional" :value="toolState?.optional" title="Optional" type="boolean" @input="onOptional" />
+        <FormDatatype
+            id="format"
+            :value="formatsAsList"
+            :datatypes="datatypes"
+            title="Format(s)"
+            :multiple="true"
+            help="Leave empty to auto-generate filtered list at runtime based on connections."
+            @onChange="onDatatype" />
+        <FormElement
+            id="tag"
+            :value="toolState?.tag"
+            title="Tag filter"
+            :optional="true"
+            type="text"
+            help="Tags to automatically filter inputs"
+            @input="onTags" />
+    </div>
+</template>

client/src/components/Workflow/Editor/Forms/FormOutput.vue

@@ -9,14 +9,13 @@
                 title="Rename dataset"
                 type="text"
                 @input="onInput" />
-            <FormElement
+            <FormDatatype
                 :id="actionNames.ChangeDatatypeAction__newtype"
                 :value="formData[actionNames.ChangeDatatypeAction__newtype]"
-                :attributes="{ options: datatypeExtensions }"
+                :datatypes="datatypes"
                 title="Change datatype"
-                type="select"
                 help="This action will change the datatype of the output to the indicated datatype."
-                @input="onDatatype" />
+                @onChange="onDatatype" />
             <FormElement
                 :id="actionNames.TagDatasetAction__tags"
                 :value="formData[actionNames.TagDatasetAction__tags]"
@@ -79,6 +78,7 @@
 <script>
 import FormCard from "@/components/Form/FormCard";
 import FormElement from "@/components/Form/FormElement";
+import FormDatatype from "@/components/Workflow/Editor/Forms/FormDatatype";
 import FormOutputLabel from "@/components/Workflow/Editor/Forms/FormOutputLabel";
 
 const actions = [
@@ -101,6 +101,7 @@ export default {
         FormCard,
         FormElement,
         FormOutputLabel,
+        FormDatatype,
     },
     props: {
         outputName: {
@@ -148,26 +149,6 @@ export default {
             });
             return index;
         },
-        datatypeExtensions() {
-            const extensions = [];
-            for (const key in this.datatypes) {
-                extensions.push({ 0: this.datatypes[key], 1: this.datatypes[key] });
-            }
-            extensions.sort((a, b) => (a.label > b.label ? 1 : a.label < b.label ? -1 : 0));
-            extensions.unshift({
-                0: "Sequences",
-                1: "Sequences",
-            });
-            extensions.unshift({
-                0: "Roadmaps",
-                1: "Roadmaps",
-            });
-            extensions.unshift({
-                0: "Leave unchanged",
-                1: "",
-            });
-            return extensions;
-        },
         renameHelp() {
             /* TODO: FormElement should provide a slot for custom help templating instead. */
             const helpLink = `<a href="${this.renameHelpUrl}">here</a>`;

client/src/components/Workflow/Editor/composables/useStepProps.ts

@@ -12,6 +12,7 @@ export function useStepProps(step: Ref<Step>) {
         inputs: stepInputs,
         outputs: stepOutputs,
         post_job_actions: postJobActions,
+        tool_state: toolState,
     } = toRefs(step);
 
     const label = computed(() => step.value.label ?? undefined);
@@ -29,5 +30,6 @@ export function useStepProps(step: Ref<Step>) {
         stepOutputs,
         configForm,
         postJobActions,
+        toolState,
     };
 }

client/src/components/Workflow/Editor/composables/useToolState.ts

@@ -0,0 +1,40 @@
+import { toRefs } from "@vueuse/core";
+import { computed, type Ref } from "vue";
+
+import { type Step } from "@/stores/workflowStepStore";
+
+export function useToolState(step: Ref<Step>) {
+    const { tool_state: rawToolStateRef } = toRefs(step);
+
+    const toolState = computed(() => {
+        const rawToolState: Record<string, unknown> = rawToolStateRef.value;
+        const parsedToolState: Record<string, unknown> = {};
+
+        // This is less than ideal in a couple ways. The fact the JSON response
+        // has encoded JSON is gross and it would be great for module types that
+        // do not use the tool form to just return a simple JSON blob without
+        // the extra encoded. As a step two if each of these module types could
+        // also define a schema so we could use typed entities shared between the
+        // client and server that would be ideal.
+        for (const key in rawToolState) {
+            if (Object.prototype.hasOwnProperty.call(rawToolState, key)) {
+                const value = rawToolState[key];
+                if (typeof value === "string") {
+                    try {
+                        const parsedValue = JSON.parse(value);
+                        parsedToolState[key] = parsedValue;
+                    } catch (error) {
+                        parsedToolState[key] = rawToolState[key];
+                    }
+                } else {
+                    parsedToolState[key] = rawToolState[key];
+                }
+            }
+        }
+        return parsedToolState;
+    });
+
+    return {
+        toolState,
+    };
+}

client/src/components/Workflow/Editor/modules/collectionTypeDescription.ts

@@ -128,3 +128,13 @@ export class CollectionTypeDescription implements CollectionTypeDescriptor {
         return str.indexOf(suffix, str.length - suffix.length) !== -1;
     }
 }
+
+const collectionTypeRegex = /^(list|paired)(:(list|paired))*$/;
+
+export function isValidCollectionTypeStr(collectionType: string | undefined) {
+    if (collectionType) {
+        return collectionTypeRegex.test(collectionType);
+    } else {
+        return true;
+    }
+}