Replace the rules input or rules seeding component.

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>