Create interactive_pampa.xml

.gitignore

@@ -77,6 +77,7 @@ workflow_schedulers_conf.xml
 config/*
 config/plugins/interactive_environments/**/*.ini
 config/plugins/**/.cache
+config/plugins/**/.parcel-cache
 !config/plugins
 static/welcome.html.*
 static/welcome.html
@@ -179,6 +180,7 @@ config/plugins/**/static/*.map
 # viz-specific build artifacts to ignore (until these are removed from codebase)
 config/plugins/visualizations/annotate_image/static/jquery.contextMenu.css
 config/plugins/visualizations/nvd3/nvd3_bar/static/nvd3.js
+config/plugins/visualizations/h5web/static/script.css
 
 # CWL conformance tests
 lib/galaxy_test/api/cwl/test_cwl_conformance_v1_?.py

client/gulpfile.js

@@ -17,6 +17,7 @@ const STATIC_PLUGIN_BUILD_IDS = [
     "drawrna",
     "editor",
     "example",
+    "h5web",
     "heatmap/heatmap_default",
     "hyphyvision",
     "jqplot/jqplot_bar",
@@ -156,7 +157,11 @@ function buildPlugins(callback, forceRebuild) {
                     };
                     // if node version is >16, set NODE_OPTIONS to use legacy openssl provider
                     if (process.versions.node.split(".")[0] > "16") {
-                        opts.env = { ...process.env, NODE_OPTIONS: "--openssl-legacy-provider" };
+                        opts.env = {
+                            ...process.env,
+                            PARCEL_WORKER_BACKEND: "process",
+                            NODE_OPTIONS: "--openssl-legacy-provider",
+                        };
                     }
                     if (child_process.spawnSync("yarn", ["build"], opts).status === 0) {
                         console.log(`Successfully built, saving build state to ${hashFilePath}`);

client/src/components/ToolRecommendation.vue

@@ -86,32 +86,59 @@ export default {
             const duration = 750;
             const maxTextLength = 20;
             const svg = d3.select("#tool-recommendation").append("svg").attr("class", "tree-size").append("g");
-            const gElem = svg[0][0];
-            const svgElem = gElem.parentNode;
+            const svgElem = svg.node().parentElement;
             const clientH = svgElem.clientHeight;
             const clientW = svgElem.clientWidth;
             const translateX = parseInt(clientW * 0.15);
-
             svgElem.setAttribute("viewBox", -translateX + " 0 " + 0.5 * clientW + " " + clientH);
             svgElem.setAttribute("preserveAspectRatio", "xMidYMid meet");
-
-            const tree = d3.tree().size([clientH, clientW]);
-            const diagonal = d3.svg.diagonal().projection((d) => {
-                return [d.y, d.x];
+            const d3Tree = d3.tree().size([clientH, clientW]);
+            root = d3.hierarchy(predictedTools, (d) => {
+                return d.children;
             });
+            root.x0 = parseInt(clientH / 2);
+            root.y0 = 0;
+            const collapse = (d) => {
+                if (d.children) {
+                    d._children = d.children;
+                    d._children.forEach(collapse);
+                    d.children = null;
+                }
+            };
+            root.children.forEach(collapse);
+            const diagonal = (s, d) => {
+                const path = `M ${s.y} ${s.x}
+                              C ${(s.y + d.y) / 2} ${s.x},
+                              ${(s.y + d.y) / 2} ${d.x},
+                              ${d.y} ${d.x}`;
+                return path;
+            };
+            const click = (e, d) => {
+                if (d.children) {
+                    d._children = d.children;
+                    d.children = null;
+                } else {
+                    d.children = d._children;
+                    d._children = null;
+                }
+                if (d.parent == null) {
+                    update(d);
+                }
+                const tId = d.data.id;
+                if (tId !== undefined && tId !== "undefined" && tId !== null && tId !== "") {
+                    document.location.href = `${getAppRoot()}tool_runner?tool_id=${tId}`;
+                }
+            };
             const update = (source) => {
-                // Compute the new tree layout.
-                const nodes = tree.nodes(root).reverse();
-                const links = tree.links(nodes);
-                // Normalize for fixed-depth.
+                const predictedTools = d3Tree(root);
+                const nodes = predictedTools.descendants();
+                const links = predictedTools.descendants().slice(1);
                 nodes.forEach((d) => {
                     d.y = d.depth * (clientW / 10);
                 });
-                // Update the nodes
                 const node = svg.selectAll("g.node").data(nodes, (d) => {
                     return d.id || (d.id = ++i);
                 });
-                // Enter any new nodes at the parent's previous position.
                 const nodeEnter = node
                     .enter()
                     .append("g")
@@ -120,97 +147,75 @@ export default {
                         return "translate(" + source.y0 + "," + source.x0 + ")";
                     })
                     .on("click", click);
-                nodeEnter.append("circle").attr("r", 1e-6);
+                nodeEnter.append("circle").attr("class", "node").attr("r", 1e-6);
                 nodeEnter
                     .append("text")
+                    .attr("dy", ".35em")
                     .attr("x", (d) => {
                         return d.children || d._children ? -10 : 10;
                     })
-                    .attr("dy", ".35em")
                     .attr("text-anchor", (d) => {
                         return d.children || d._children ? "end" : "start";
                     })
                     .text((d) => {
-                        const tName = d.name;
+                        const tName = d.data.name;
                         if (tName.length > maxTextLength) {
                             return tName.slice(0, maxTextLength) + "...";
                         }
-                        return d.name;
+                        return d.data.name;
                     });
                 nodeEnter.append("title").text((d) => {
-                    return d.children || d._children ? d.name : "Open tool - " + d.name;
+                    return d.children ? d.data.name : "Open tool - " + d.data.name;
                 });
-                // Transition nodes to their new position.
-                const nodeUpdate = node
+                const nodeUpdate = nodeEnter.merge(node);
+                nodeUpdate
                     .transition()
                     .duration(duration)
                     .attr("transform", (d) => {
                         return "translate(" + d.y + "," + d.x + ")";
                     });
-                nodeUpdate.select("circle").attr("r", 2.5);
-                // Transition exiting nodes to the parent's new position.
-                node.exit()
+                nodeUpdate.select("circle.node").attr("r", 2.5);
+                const nodeExit = node
+                    .exit()
                     .transition()
                     .duration(duration)
                     .attr("transform", (d) => {
                         return "translate(" + source.y + "," + source.x + ")";
                     })
                     .remove();
-                // Update the links
+                nodeExit.select("circle").attr("r", 1e-6);
                 const link = svg.selectAll("path.link").data(links, (d) => {
-                    return d.target.id;
+                    return d.data.id;
                 });
-                // Enter any new links at the parent's previous position.
-                link.enter()
+                const linkEnter = link
+                    .enter()
                     .insert("path", "g")
                     .attr("class", "link")
                     .attr("d", (d) => {
                         const o = { x: source.x0, y: source.y0 };
-                        return diagonal({ source: o, target: o });
+                        return diagonal(o, o);
+                    });
+                const linkUpdate = linkEnter.merge(link);
+                linkUpdate
+                    .transition()
+                    .duration(duration)
+                    .attr("d", (d) => {
+                        return diagonal(d, d.parent);
                     });
-                // Transition links to their new position.
                 link.transition().duration(duration).attr("d", diagonal);
-                // Transition exiting nodes to the parent's new position.
                 link.exit()
                     .transition()
                     .duration(duration)
                     .attr("d", (d) => {
                         const o = { x: source.x, y: source.y };
-                        return diagonal({ source: o, target: o });
+                        return diagonal(o, o);
                     })
                     .remove();
-                // Stash the old positions for transition.
                 nodes.forEach((d) => {
                     d.x0 = d.x;
                     d.y0 = d.y;
                 });
             };
-            // Toggle children on click.
-            const click = (d) => {
-                if (d.children) {
-                    d._children = d.children;
-                    d.children = null;
-                } else {
-                    d.children = d._children;
-                    d._children = null;
-                }
-                update(d);
-                const tId = d.id;
-                if (tId !== undefined && tId !== "undefined" && tId !== null && tId !== "") {
-                    document.location.href = `${getAppRoot()}tool_runner?tool_id=${tId}`;
-                }
-            };
-            const collapse = (d) => {
-                if (d.children) {
-                    d._children = d.children;
-                    d._children.forEach(collapse);
-                    d.children = null;
-                }
-            };
-            root = predictedTools;
-            root.x0 = parseInt(clientH / 2);
-            root.y0 = 0;
-            root.children.forEach(collapse);
             update(root);
         },
     },

client/src/mvc/upload/upload-ftp.js

@@ -16,7 +16,7 @@ export default Backbone.View.extend({
             help_enabled: true,
             oidc_text: `<br/>If you are signed-in to Galaxy using a third-party identity and you <strong>do not have a Galaxy password</strong> please use the reset password option in the login form with your email to create a password for your account.`,
             help_text: `This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at <strong>${options.ftp_upload_site}</strong> using your Galaxy credentials.
-            For help visit the <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.`,
+            For help visit the <a href="https://galaxyproject.eu/ftp/" target="_blank">documentation</a>.`,
             collection: null,
             onchange: function () {},
             onadd: function () {},

client/src/schema/schema.ts

@@ -112,6 +112,10 @@ export interface paths {
          */
         get: operations["show_api_datasets__dataset_id__get"];
     };
+    "/api/datasets/{dataset_id}/content/{content_type}": {
+        /** Retrieve information about the content of a dataset. */
+        get: operations["get_structured_content_api_datasets__dataset_id__content__content_type__get"];
+    };
     "/api/datasets/{dataset_id}/converted": {
         /**
          * Return a a map with all the existing converted datasets associated with this instance.
@@ -2339,6 +2343,12 @@ export interface components {
          * @description Represents a collection of elements contained in the dataset collection.
          */
         DatasetCollectionContentElements: components["schemas"]["DCESummary"][];
+        /**
+         * DatasetContentType
+         * @description For retrieving content from a structured dataset (e.g. HDF5)
+         * @enum {string}
+         */
+        DatasetContentType: "meta" | "attr" | "stats" | "data";
         /**
          * DatasetErrorMessage
          * @description Base model definition with common configuration used by all derived models.
@@ -7957,6 +7967,34 @@ export interface operations {
             };
         };
     };
+    get_structured_content_api_datasets__dataset_id__content__content_type__get: {
+        /** Retrieve information about the content of a dataset. */
+        parameters: {
+            /** @description The user ID that will be used to effectively make this API call. Only admins and designated users can make API calls on behalf of other users. */
+            header?: {
+                "run-as"?: string;
+            };
+            /** @description The encoded database identifier of the dataset. */
+            path: {
+                dataset_id: string;
+                content_type: components["schemas"]["DatasetContentType"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                content: {
+                    "application/json": Record<string, never>;
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     converted_api_datasets__dataset_id__converted_get: {
         /**
          * Return a a map with all the existing converted datasets associated with this instance.

config/plugins/visualizations/h5web/config/h5web.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="H5Web" embeddable="false">
+    <description>HDF5 data visualization and exploration</description>
+    <data_sources>
+        <data_source>
+            <model_class>HistoryDatasetAssociation</model_class>
+            <test type="isinstance" test_attr="datatype" result_type="datatype">binary.H5</test>
+        </data_source>
+    </data_sources>
+    <params>
+        <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+    </params>
+    <entry_point entry_point_type="chart" src="script.js" css="script.css"/>
+    <settings>
+        <input>
+            <name>explorer</name>
+            <value>false</value>
+            <type>boolean</type>
+        </input>
+    </settings>
+</visualization>

config/plugins/visualizations/h5web/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "visualization",
+    "version": "0.1.0",
+    "keywords": [
+        "galaxy",
+        "visualization"
+    ],
+    "license": "AFL-3.0",
+    "dependencies": {
+        "@galaxyproject/charts": "^0.0.6",
+        "@h5web/app": "^7.1.0",
+        "backbone": "^1.3.3",
+        "normalize.css": "^8.0.1",
+        "react": "17.0.2",
+        "react-dom": "17.0.2"
+    },
+    "scripts": {
+        "build": "parcel build src/script.js --dist-dir static"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.52",
+        "@types/react-dom": "^17.0.18",
+        "buffer": "^5.7.1",
+        "parcel": "^2.0.0",
+        "typescript": "4.9.3"
+    }
+}

config/plugins/visualizations/h5web/src/script.js

@@ -0,0 +1,47 @@
+/**
+ * Visualizer interface for h5web (https://github.com/silx-kit/h5web)
+ * 
+ * This relies on Galaxy being able to serve files using the
+ * h5grove protocol (https://silx-kit.github.io/h5grove/). 
+ * This provides efficient access to the contents of the
+ * HDF5 file and avoids having to read the whole file at any
+ * point.
+ */
+
+import './styles.css';
+import React, { StrictMode } from 'react'
+import {render as reactRender} from 'react-dom'
+import {App, H5GroveProvider} from '@h5web/app'
+
+function MyApp(props) {
+    return (
+          <H5GroveProvider
+            url={props.url}
+            filepath={props.name}
+            axiosConfig={{ params: { file: props.name } }}
+          >
+            <App explorerOpen={props.explorer} />
+          </H5GroveProvider>
+      );
+}
+
+window.bundleEntries = window.bundleEntries || {};
+window.bundleEntries.load = function (options) {
+    var dataset = options.dataset;
+    var settings = options.chart.settings;
+    var explorer = settings.get('explorer');
+    var url = window.location.origin + "/api/datasets/" + dataset.id + "/content";
+    reactRender(
+      <MyApp 
+        url={url} 
+        name={dataset.name} 
+        filepath={dataset.file_name} 
+        explorer={explorer}
+      />,
+      document.getElementById(options.target)
+    )
+    options.chart.state('ok', 'Chart drawn.');
+    options.process.resolve();
+};
+
+export default MyApp;