Implement Data Landing Requests

client/package.json

@@ -120,6 +120,7 @@
     "vue-class-component": "^7.2.6",
     "vue-echarts": "^7.0.3",
     "vue-infinite-scroll": "^2.0.2",
+    "vue-json-pretty": "^1.9.5",
     "vue-multiselect": "^2.1.7",
     "vue-observe-visibility": "^1.0.0",
     "vue-property-decorator": "^9.1.2",

client/src/api/jobs.ts

@@ -8,6 +8,10 @@ export type JobInputSummary = components["schemas"]["JobInputSummary"];
 export type JobDisplayParametersSummary = components["schemas"]["JobDisplayParametersSummary"];
 export type JobMetric = components["schemas"]["JobMetric"];
 
+export const NON_TERMINAL_STATES = ["new", "queued", "running", "waiting"];
+export const ERROR_STATES = ["error", "deleted"];
+export const TERMINAL_STATES = ["ok", "skipped"].concat(ERROR_STATES);
+
 interface JobDef {
     tool_id: string;
 }

client/src/api/tools.ts

@@ -0,0 +1,74 @@
+import { type components, GalaxyApi } from "@/api";
+import { ERROR_STATES, type ShowFullJobResponse } from "@/api/jobs";
+
+export type HdcaUploadTarget = components["schemas"]["HdcaDataItemsTarget"];
+export type HdasUploadTarget = components["schemas"]["DataElementsTarget"];
+export type FetchDataPayload = components["schemas"]["FetchDataPayload"];
+export type UrlDataElement = components["schemas"]["UrlDataElement"];
+export type NestedElement = components["schemas"]["NestedElement"];
+export type NestedElementItems = NestedElement["elements"];
+export type NestedElementItem = NestedElementItems[number];
+export type FetchTargets = FetchDataPayload["targets"];
+export type AnyFetchTarget = FetchTargets[number];
+
+export function urlDataElement(identifier: string, uri: string): UrlDataElement {
+    const element: UrlDataElement = {
+        src: "url",
+        url: uri,
+        name: identifier,
+        // these shouldn't be required but the way our model -> ts stuff works it is...
+        auto_decompress: false,
+        dbkey: "?",
+        ext: "auto",
+        to_posix_lines: false,
+        deferred: false,
+        space_to_tab: false,
+    };
+    return element;
+}
+
+export function nestedElement(identifier: string, elements: NestedElementItems) {
+    const nestedElement: NestedElement = {
+        name: identifier,
+        elements: elements,
+        auto_decompress: false,
+        dbkey: "?",
+        ext: "auto",
+        to_posix_lines: false,
+        deferred: false,
+        space_to_tab: false,
+    };
+    return nestedElement;
+}
+
+export async function fetch(payload: FetchDataPayload) {
+    const { data } = await GalaxyApi().POST("/api/tools/fetch", {
+        body: payload,
+    });
+    return fetchResponseToJobId(data as FetchResponseInterface);
+}
+
+interface FetchResponseInterface {
+    jobs: { id: string }[];
+}
+
+function fetchResponseToJobId(response: FetchResponseInterface) {
+    return response.jobs[0]!.id;
+}
+
+export function fetchJobErrorMessage(jobDetails: ShowFullJobResponse): string | undefined {
+    const stderr = jobDetails.stderr;
+    let errorMessage: string | undefined = undefined;
+    if (stderr) {
+        errorMessage = "An error was encountered while running your upload job. ";
+        if (stderr.indexOf("binary file contains inappropriate content") > -1) {
+            errorMessage +=
+                "The problem may be that the batch uploader will not automatically decompress your files the way the normal uploader does, please specify a correct extension or upload decompressed data.";
+        }
+        errorMessage += "Upload job completed with standard error: " + stderr;
+    } else if (ERROR_STATES.indexOf(jobDetails.state) !== -1) {
+        errorMessage =
+            "Unknown error encountered while running your data import job, this could be a server issue or a problem with the upload definition.";
+    }
+    return errorMessage;
+}

client/src/components/Help/HelpPopover.vue

@@ -11,7 +11,8 @@ defineProps<Props>();
 </script>
 
 <template>
-    <Popper v-if="target" :reference-el="target" mode="light">
+    <!-- setting font-size:0 so this span doesn't affect the spacing in the parent component -->
+    <Popper v-if="target" style="font-size: 0" :reference-el="target" mode="light">
         <HelpTerm :term="term" class="p-2 help-popover-content" />
     </Popper>
 </template>

client/src/components/Help/terms.yml

@@ -0,0 +1 @@
+../../../../lib/galaxy/schema/terms.yml

client/src/components/JobParameters/DataFetchRequestParameter.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "vue-json-pretty/lib/styles.css";
+
+import { computed } from "vue";
+import VueJsonPretty from "vue-json-pretty";
+
+import { useHelpTermsStore } from "@/stores/helpTermsStore";
+
+import HelpText from "@/components/Help/HelpText.vue";
+
+const { hasHelpText } = useHelpTermsStore();
+
+interface Props {
+    parameterValue: string | object;
+}
+
+const props = defineProps<Props>();
+
+const jsonData = computed(() => {
+    if (typeof props.parameterValue === "string") {
+        return JSON.parse(props.parameterValue);
+    }
+    return props.parameterValue;
+});
+
+function shouldLink(key: string): boolean {
+    return hasHelpText(`galaxy.dataFetch.${key}`);
+}
+</script>
+
+<template>
+    <VueJsonPretty :data="jsonData" :virtual="false" :data-request-json="JSON.stringify(jsonData)">
+        <template v-slot:nodeKey="{ node, defaultKey }">
+            <span v-if="shouldLink(node.key)">
+                "<HelpText :uri="`galaxy.dataFetch.${node.key}`" :text="node.key" />"
+            </span>
+            <span v-else>
+                {{ defaultKey }}
+            </span>
+        </template>
+        <template v-slot:nodeValue="{ node, defaultValue }">
+            <span v-if="node.path.endsWith('destination.type')">
+                "<HelpText :uri="`galaxy.dataFetch.destinations.${node.content}`" :text="node.content" />"
+            </span>
+            <span v-else-if="node.path.endsWith('.src') && shouldLink(`sources.${node.content}`)">
+                "<HelpText :uri="`galaxy.dataFetch.sources.${node.content}`" :text="node.content" />"
+            </span>
+            <span v-else-if="node.path.endsWith('.ext')">
+                "<HelpText :uri="`galaxy.datatypes.extensions.${node.content}`" :text="node.content" />"
+            </span>
+            <span v-else>
+                {{ defaultValue }}
+            </span>
+        </template>
+    </VueJsonPretty>
+</template>

client/src/components/JobParameters/JobParameters.vue

@@ -18,6 +18,9 @@
                         <td v-if="Array.isArray(parameter.value)">
                             <JobParametersArrayValue :parameter_value="parameter.value" />
                         </td>
+                        <td v-else-if="isRequestJson(parameter)" class="tool-parameter-value">
+                            <DataFetchRequestParameter :parameter-value="parameter.value" />
+                        </td>
                         <td v-else class="tool-parameter-value">
                             {{ parameter.value }}
                         </td>
@@ -53,10 +56,13 @@ import Vue from "vue";
 import JobOutputs from "../JobInformation/JobOutputs";
 import JobParametersArrayValue from "./JobParametersArrayValue";
 
+import DataFetchRequestParameter from "./DataFetchRequestParameter.vue";
+
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        DataFetchRequestParameter,
         JobOutputs,
         JobParametersArrayValue,
     },
@@ -117,6 +123,9 @@ export default {
         this.initJob();
     },
     methods: {
+        isRequestJson(parameter) {
+            return parameter.text == "request_json" && typeof parameter.value == "string";
+        },
         initJob() {
             let url;
             if (this.jobId) {