Merge pull request #20592 from jmchilton/tool_landing

Implement Data Landing Requests

Author: mvdbeek

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/schema/schema.ts

@@ -2,9 +2,14 @@ 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 = {

client/src/api/tools.ts

@@ -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/HelpPopover.vue

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

client/src/components/Help/terms.yml

@@ -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/Help/terms.yml

@@ -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) {