Switch h5web to new visualization framework

client/gulpfile.js

@@ -20,7 +20,6 @@ const STATIC_PLUGIN_BUILD_IDS = [
     "example",
     "fits_graph_viewer",
     "fits_image_viewer",
-    "h5web",
     "hyphyvision",
     "jqplot/jqplot_bar",
     "media_player",
@@ -36,6 +35,7 @@ const STATIC_PLUGIN_BUILD_IDS = [
 ];
 const INSTALL_PLUGIN_BUILD_IDS = [
     "cytoscape",
+    "h5web",
     "heatmap",
     "ngl",
     "msa",

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

@@ -11,12 +11,8 @@
     <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>
+    <requirements>
+        <requirement type="npm" version="0.5.0" package="@galaxyproject/h5web"/>
+    </requirements>
+    <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
 </visualization>

config/plugins/visualizations/h5web/package.json

@@ -1,24 +0,0 @@
-{
-    "name": "visualization",
-    "version": "0.2.0",
-    "keywords": [
-        "galaxy",
-        "visualization",
-        "h5web"
-    ],
-    "license": "AFL-3.0",
-    "dependencies": {
-        "@h5web/app": "^12.0.1",
-        "buffer": "^6.0.3",
-        "normalize.css": "^8.0.1",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
-    },
-    "scripts": {
-        "build": "parcel build src/script.js --dist-dir static"
-    },
-    "devDependencies": {
-        "parcel": "^2.12.0",
-        "process": "^0.11.10"
-    }
-}

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

@@ -1,58 +0,0 @@
-/**
- * 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 from "react";
-import { createRoot } from "react-dom/client";
-import { App, H5GroveProvider } from "@h5web/app";
-
-/* This will be part of the charts/viz standard lib in 23.1 */
-const slashCleanup = /(\/)+/g;
-function prefixedDownloadUrl(root, path) {
-  return `${root}/${path}`.replace(slashCleanup, "/");
-}
-
-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) {
-  const dataset = options.dataset;
-  const settings = options.chart.settings;
-  const explorer = settings.get("explorer");
-  const url =
-    window.location.origin +
-    prefixedDownloadUrl(
-      options.root,
-      "/api/datasets/" + dataset.id + "/content"
-    );
-  const root = createRoot(document.getElementById(options.target));
-  root.render(
-    <MyApp
-      url={url}
-      name={dataset.name}
-      filepath={dataset.file_name}
-      explorer={explorer}
-    />
-  );
-  options.chart.state("ok", "Chart drawn.");
-  options.process.resolve();
-};
-
-export default MyApp;

config/plugins/visualizations/h5web/src/styles.css

@@ -1,43 +0,0 @@
-@import 'npm:normalize.css';
-@import 'npm:@h5web/app/dist/styles.css'; /* global app styles */
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-body {
-  box-sizing: border-box;
-  min-width: 42em;
-  font-family: var(--sans-serif);
-  line-height: 1.2;
-  color: #020402;
-}
-
-body {
-  --primary: #c0da74;
-  --primary-lighter: #eaf0cd;
-  --primary-light: #d4e09b;
-  --primary-dark: #9aae5d;
-  --primary-bg: #f5fbef;
-  --primary-light-bg: #fafdf7;
-  --primary-dark-bg: #dde2d7;
-  --secondary: #8cdfc7;
-  --secondary-light: #b7fcf3;
-  --secondary-lighter: #dbfef9;
-  --secondary-dark: #1b998b;
-  --secondary-dark-15: #1b998b26;
-  --secondary-darker: #0e5846;
-  --secondary-bg: #d9f4ec;
-  --secondary-light-bg: #ecfaf6;
-  --monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
-    monospace;
-  --sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-}
-
-#root {
-  height: 100vh;
-}