New components for seeding the rule builder.

This uses the wizard introduced by David for workflow exports instead of adapting the upload paradigm. The old component was very compact but also very unintuitive and just hacked together as quickly as possible and never really revisited. The wizard provides more space to explain things and is probably the way we want to go but still needs some serious love from someone better at UI than me.

I need a component like this... but different for sample sheet seeding so I wanted to do a refresh and get something we're all more comfortable with ahead of that.

client/src/components/Collections/BuildFileSetWizard.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { BCardGroup } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import { getGalaxyInstance } from "@/app";
+import { useWizard } from "@/components/Common/Wizard/useWizard";
+import { useToolRouting } from "@/composables/route";
+
+import { type RemoteFile, type RulesCreatingWhat, type RulesSourceFrom } from "./wizard/types";
+import { useFileSetSources } from "./wizard/useFileSetSources";
+
+import CreatingWhat from "./wizard/CreatingWhat.vue";
+import PasteData from "./wizard/PasteData.vue";
+import SelectDataset from "./wizard/SelectDataset.vue";
+import SelectFolder from "./wizard/SelectFolder.vue";
+import SourceFromCollection from "./wizard/SourceFromCollection.vue";
+import SourceFromDatasetAsTable from "./wizard/SourceFromDatasetAsTable.vue";
+import SourceFromPastedData from "./wizard/SourceFromPastedData.vue";
+import SourceFromRemoteFiles from "./wizard/SourceFromRemoteFiles.vue";
+import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
+
+const isBusy = ref<boolean>(false);
+const { pasteData, tabularDatasetContents, uris, setRemoteFilesFolder, onFtp, setDatasetContents, setPasteTable } =
+    useFileSetSources(isBusy);
+
+interface Props {
+    fileSourcesConfigured: boolean;
+    ftpUploadSite?: string;
+}
+
+const props = defineProps<Props>();
+
+const creatingWhat = ref<RulesCreatingWhat>("datasets");
+const creatingWhatTitle = computed(() => {
+    return creatingWhat.value == "datasets" ? "Datasets" : "Collections";
+});
+const sourceInstructions = computed(() => {
+    return `${creatingWhatTitle.value} can be created from a set or files, URIs, or existing datasets.`;
+});
+
+const sourceFrom = ref<RulesSourceFrom>("remote_files");
+
+const { routeToTool } = useToolRouting();
+
+const wizard = useWizard({
+    "select-what": {
+        label: "What is being created?",
+        instructions: computed(() => {
+            return `Are you creating datasets or collections?`;
+        }),
+        isValid: () => true,
+        isSkippable: () => false,
+    },
+    "select-source": {
+        label: "Select source",
+        instructions: sourceInstructions,
+        isValid: () => true,
+        isSkippable: () => false,
+    },
+    "select-remote-files-folder": {
+        label: "Select folder",
+        instructions: "Select folder of files to import.",
+        isValid: () => sourceFrom.value === "remote_files" && Boolean(uris.value.length > 0),
+        isSkippable: () => sourceFrom.value !== "remote_files",
+    },
+    "paste-data": {
+        label: "Paste data",
+        instructions: "Paste data containing URIs and optional extra metadata.",
+        isValid: () => sourceFrom.value === "pasted_table" && pasteData.value.length > 0,
+        isSkippable: () => sourceFrom.value !== "pasted_table",
+    },
+    "select-dataset": {
+        label: "Select dataset",
+        instructions: "Select tabular dataset to load URIs and metadata from.",
+        isValid: () => sourceFrom.value === "dataset_as_table" && tabularDatasetContents.value.length > 0,
+        isSkippable: () => sourceFrom.value !== "dataset_as_table",
+    },
+});
+
+const importButtonLabel = computed(() => {
+    if (sourceFrom.value == "collection") {
+        return "Transform";
+    } else {
+        return "Import";
+    }
+});
+
+const emit = defineEmits(["dismiss"]);
+type SelectionType = "raw" | "remote_files";
+type ElementsType = RemoteFile[] | string[][];
+
+// it would be nice to have a real type from the rule builder but
+// it is older code. This is really outlining what this component can
+// produce and not what the rule builder can consume which is a wide
+// superset of this.
+interface Entry {
+    dataType: RulesCreatingWhat;
+    ftpUploadSite?: string;
+    elements?: ElementsType | undefined;
+    content?: string;
+    selectionType: SelectionType;
+}
+
+function launchRuleBuilder() {
+    const Galaxy = getGalaxyInstance();
+    let elements: ElementsType | undefined = undefined;
+    let selectionType: SelectionType = "raw";
+    if (sourceFrom.value == "remote_files") {
+        elements = uris.value;
+        selectionType = "remote_files";
+    } else if (sourceFrom.value == "pasted_table") {
+        elements = pasteData.value;
+    } else if (sourceFrom.value == "dataset_as_table") {
+        elements = tabularDatasetContents.value;
+    }
+    const entry: Entry = {
+        dataType: creatingWhat.value,
+        ftpUploadSite: props.ftpUploadSite,
+        selectionType: selectionType,
+        elements: elements,
+    };
+    Galaxy.currHistoryPanel.buildCollectionFromRules(entry, null, true);
+}
+
+function submit() {
+    if (sourceFrom.value == "collection") {
+        routeToTool("__APPLY_RULES__");
+    } else {
+        launchRuleBuilder();
+    }
+    emit("dismiss");
+}
+
+function setCreatingWhat(what: RulesCreatingWhat) {
+    creatingWhat.value = what;
+}
+
+function setSourceForm(newValue: RulesSourceFrom) {
+    sourceFrom.value = newValue;
+}
+</script>
+
+<template>
+    <GenericWizard :use="wizard" :submit-button-label="importButtonLabel" @submit="submit">
+        <div v-if="wizard.isCurrent('select-what')">
+            <CreatingWhat :creating-what="creatingWhat" @onChange="setCreatingWhat" />
+        </div>
+        <div v-else-if="wizard.isCurrent('select-source')">
+            <BCardGroup deck>
+                <SourceFromRemoteFiles :selected="sourceFrom === 'remote_files'" @select="setSourceForm" />
+                <SourceFromPastedData :selected="sourceFrom === 'pasted_table'" @select="setSourceForm" />
+                <SourceFromDatasetAsTable :selected="sourceFrom === 'dataset_as_table'" @select="setSourceForm" />
+                <SourceFromCollection
+                    v-if="creatingWhat == 'collections'"
+                    :selected="sourceFrom === 'collection'"
+                    @select="setSourceForm" />
+            </BCardGroup>
+        </div>
+        <div v-else-if="wizard.isCurrent('paste-data')">
+            <PasteData @onChange="setPasteTable" />
+        </div>
+        <div v-else-if="wizard.isCurrent('select-remote-files-folder')">
+            <SelectFolder :ftp-upload-site="ftpUploadSite" @onChange="setRemoteFilesFolder" @onFtp="onFtp" />
+        </div>
+        <div v-else-if="wizard.isCurrent('select-dataset')">
+            <SelectDataset @onChange="setDatasetContents" />
+        </div>
+    </GenericWizard>
+</template>

client/src/components/Collections/RuleBasedCollectionCreatorModal.js

@@ -1,6 +1,8 @@
 import _l from "utils/localization";
 import Vue from "vue";
 
+import { rawToTable } from "@/components/Collections/tables";
+
 import { collectionCreatorModalSetup } from "./common/modal";
 
 function ruleBasedCollectionCreatorModal(elements, elementsType, importType, options) {
@@ -58,22 +60,7 @@ function createCollectionViaRules(selection, defaultHideSourceItems = true) {
         importType = selection.dataType || "collections";
         elements = selection.elements;
     } else {
-        const hasNonWhitespaceChars = RegExp(/[^\s]/);
-        // Have pasted data, data from a history dataset, or FTP list.
-        const lines = selection.content
-            .split(/[\n\r]/)
-            .filter((line) => line.length > 0 && hasNonWhitespaceChars.exec(line));
-        // Really poor tabular parser - we should get a library for this or expose options? I'm not
-        // sure.
-        let hasTabs = false;
-        if (lines.length > 0) {
-            const firstLine = lines[0];
-            if (firstLine.indexOf("\t") >= 0) {
-                hasTabs = true;
-            }
-        }
-        const regex = hasTabs ? /\t/ : /\s+/;
-        elements = lines.map((line) => line.split(regex));
+        elements = rawToTable(selection.content);
         elementsType = selection.selectionType;
         importType = selection.dataType || "collections";
     }

client/src/components/Collections/tables.ts

@@ -0,0 +1,61 @@
+import { computed, ref } from "vue";
+
+export function useTableSummary() {
+    const rawValue = ref<string>("");
+
+    const table = computed(() => {
+        return rawToTable(rawValue.value);
+    });
+
+    const columnCount = computed<number>(() => {
+        const tableVal = table.value;
+        if (tableVal && tableVal.length) {
+            return tableVal[0]?.length || 0;
+        } else {
+            return 0;
+        }
+    });
+
+    const isJaggedData = computed<boolean>(() => {
+        const tableVal = table.value;
+        const columnCountVal = columnCount.value;
+        for (const row of tableVal) {
+            if (row.length != columnCountVal) {
+                return true;
+            }
+        }
+        return false;
+    });
+
+    const jaggedDataWarning = computed<string | undefined>(() => {
+        if (isJaggedData.value) {
+            return "This data contains a different number of columns per-row, this probably shouldn't be used as is.";
+        } else {
+            return undefined;
+        }
+    });
+    return {
+        rawValue,
+        isJaggedData,
+        jaggedDataWarning,
+        columnCount,
+        table,
+    };
+}
+
+export function rawToTable(content: string): string[][] {
+    const hasNonWhitespaceChars = RegExp(/[^\s]/);
+    // Have pasted data, data from a history dataset, or FTP list.
+    const lines = content.split(/[\n\r]/).filter((line) => line.length > 0 && hasNonWhitespaceChars.exec(line));
+    // Really poor tabular parser - we should get a library for this or expose options? I'm not
+    // sure.
+    let hasTabs = false;
+    if (lines.length > 0) {
+        const firstLine = lines[0];
+        if (firstLine && firstLine.indexOf("\t") >= 0) {
+            hasTabs = true;
+        }
+    }
+    const regex = hasTabs ? /\t/ : /\s+/;
+    return lines.map((line) => line.split(regex));
+}

client/src/components/Collections/wizard/CreatingWhat.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { BCard, BCardGroup, BCardTitle } from "bootstrap-vue";
+
+import { borderVariant } from "@/components/Common/Wizard/utils";
+
+import { type RulesCreatingWhat } from "./types";
+
+interface Props {
+    creatingWhat: RulesCreatingWhat;
+}
+
+const emit = defineEmits(["onChange"]);
+
+defineProps<Props>();
+</script>
+
+<template>
+    <BCardGroup deck>
+        <BCard
+            data-creating-what="datasets"
+            class="wizard-selection-card"
+            :border-variant="borderVariant(creatingWhat === 'datasets')"
+            @click="emit('onChange', 'datasets')">
+            <BCardTitle>
+                <b>Datasets</b>
+            </BCardTitle>
+            <div>
+                This options lets you import any number of individual Galaxy datasets. These will be unique items in
+                your Galaxy history.
+            </div>
+        </BCard>
+        <BCard
+            data-creating-what="collections"
+            class="wizard-selection-card"
+            :border-variant="borderVariant(creatingWhat === 'collections')"
+            @click="emit('onChange', 'collections')">
+            <BCardTitle>
+                <b>Collections</b>
+            </BCardTitle>
+            <div>This options lets you create or more Galaxy dataset collections.</div>
+        </BCard>
+    </BCardGroup>
+</template>

client/src/components/Collections/wizard/JaggedDataAlert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+
+interface Props {
+    jaggedDataWarning?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <span>
+        <BAlert v-if="jaggedDataWarning" show variant="warning">
+            {{ jaggedDataWarning }}
+        </BAlert>
+    </span>
+</template>