Add basic TIFF Image visualization

client/gulpfile.js

@@ -35,6 +35,7 @@ const STATIC_PLUGIN_BUILD_IDS = [
     "pv",
     "nora",
     "venn",
+    "tiffviewer",
     "ts_visjs",
 ];
 const DIST_PLUGIN_BUILD_IDS = ["new_user"];

config/plugins/visualizations/tiffviewer/config/tiffviewer.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="Tiff Viewer">
+    <description>Basic Tiff Image visualization.</description>
+    <data_sources>
+        <data_source>
+            <model_class>HistoryDatasetAssociation</model_class>
+
+            <test type="isinstance" test_attr="datatype" result_type="datatype">images.Tiff</test>
+
+            <to_param param_attr="id">dataset_id</to_param>
+        </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"/>
+</visualization>

config/plugins/visualizations/tiffviewer/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "tiff-visualization",
+    "version": "0.1.0",
+    "description": "A visualization for Tiff files based on react-tiff package",
+    "keywords": [
+        "galaxy",
+        "visualization",
+        "Tiff"
+    ],
+    "license": "MIT",
+    "dependencies": {
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-tiff": "^0.0.8"
+    },
+    "scripts": {
+        "build": "parcel build src/script.js --dist-dir static"
+    },
+    "devDependencies": {
+        "buffer": "^5.5.0||^6.0.0",
+        "parcel": "^2.9.3",
+        "process": "^0.11.10"
+    }
+}

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

@@ -0,0 +1,29 @@
+import { StrictMode } from "react";
+
+import { TIFFViewer } from "react-tiff";
+import { createRoot } from "react-dom/client";
+import "react-tiff/dist/index.css";
+
+const App = (props) => {
+    return <TIFFViewer tiff={props.dataset_url} paginate="bottom" />;
+};
+
+/* 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, "/");
+}
+
+window.bundleEntries = window.bundleEntries || {};
+window.bundleEntries.load = function (options) {
+    const dataset = options.dataset;
+    const url = prefixedDownloadUrl(options.root, dataset.download_url);
+    const root = createRoot(document.getElementById(options.target));
+    root.render(
+        <StrictMode>
+            <App dataset_url={url} />
+        </StrictMode>
+    );
+    options.chart.state("ok", "Done.");
+    options.process.resolve();
+};