Update tiff viewer to use script entry_point

config/plugins/visualizations/annotate_image/config/annotate_image.xml

@@ -13,5 +13,5 @@
     <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="jquery.contextMenu.css"/>
+    <entry_point entry_point_type="script" src="script.js" css="jquery.contextMenu.css"/>
 </visualization>

config/plugins/visualizations/annotate_image/package.json

@@ -19,7 +19,7 @@
     },
     "scripts": {
         "build": "yarn build-css && yarn build-js",
-        "build-css": "cp 'node_modules/jquery-contextmenu/dist/jquery.contextMenu.css' 'static/'",
+        "build-css": "cp -f 'node_modules/jquery-contextmenu/dist/jquery.contextMenu.css' 'static/'",
         "build-js": "parcel build src/script.js --dist-dir static"
     }
 }

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

@@ -5,12 +5,6 @@ import _ from "underscore";
 // Use lighter weight 'core' version of paper since we don't need paperscript
 import paper from "../node_modules/paper/dist/paper-core.js";
 
-/* 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, "/");
-}
-
 const CommandManager = (function () {
     function CommandManager() {}
 
@@ -60,10 +54,7 @@ const generateUUID = function () {
     return uuid;
 };
 
-window.bundleEntries = window.bundleEntries || {};
-window.bundleEntries.load = function (opt) {
-    const chart = opt.chart;
-    const dataset = opt.dataset;
+function render(downloadUrl) {
     const defaults = { color: "red", width: 4, opacity: 0.5 };
     $.fn.createCanvas = function (options) {
         let settings = $.extend({}, defaults, options || {});
@@ -441,17 +432,13 @@ window.bundleEntries.load = function (opt) {
         });
     };
 
-    const downloadUrl = prefixedDownloadUrl(opt.root, dataset.download_url);
-
     fetch(downloadUrl)
         .then((response) => {
             if (!response.ok) {
                 throw new Error("Failed to access dataset.");
             }
-            return response.text();
-        })
-        .then((content) => {
-            const $chartViewer = $("#" + opt.target);
+
+            const $chartViewer = $("#app");
             $chartViewer.html("<img id='image-annotate' src='" + downloadUrl + "' />");
             $chartViewer.css("overflow", "auto");
             $chartViewer.css("position", "relative");
@@ -470,12 +457,16 @@ window.bundleEntries.load = function (opt) {
                     img_height: height,
                 });
             });
-
-            chart.state("ok", "Chart drawn.");
-            opt.process.resolve();
         })
         .catch((error) => {
-            chart.state("failed", error.message);
-            opt.process.resolve();
+            console.error(error.message);
         });
 };
+
+const { root, visualization_config } = JSON.parse(document.getElementById("app").dataset.incoming);
+
+const datasetId = visualization_config.dataset_id;
+
+const downloadUrl = window.location.origin + root + "api/datasets/" + datasetId + "/display";
+
+render(downloadUrl);

config/plugins/visualizations/example/static/script.js

@@ -1,4 +1,4 @@
-const { visualization_config, visualization_plugin, root } = JSON.parse(document.getElementById("app").dataset.incoming);
+const { root, visualization_config, visualization_plugin } = JSON.parse(document.getElementById("app").dataset.incoming);
 
 const div = Object.assign(document.createElement("div"), {
     style: "border: 2px solid #25537b; border-radius: 1rem; padding: 1rem"

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

@@ -1,18 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE visualization SYSTEM "../../visualization.dtd">
 <visualization name="Tiff Viewer">
-    <description>Basic Tiff Image visualization</description>
+    <description>Tiff Image Viewer</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"/>
+    <entry_point entry_point_type="script" src="script.js" css="script.css"/>
 </visualization>

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

@@ -8,22 +8,15 @@ 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, "/");
-}
+const { root, visualization_config } = JSON.parse(document.getElementById("app").dataset.incoming);
 
-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();
-};
+const datasetId = visualization_config.dataset_id;
+
+const url = window.location.origin + root + "api/datasets/" + datasetId + "/display";
+
+const rootElement = createRoot(document.getElementById("app"));
+rootElement.render(
+    <StrictMode>
+        <App dataset_url={url} />
+    </StrictMode>
+);