Merge pull request #16119 from mahendrapaipuri/update_visu_plugins

Fix and update visualization plugins
2026-09-19 02:21:32 +08:00 · 2023-08-09 09:23:35 +02:00
parent 65970c6cbe 8271850835
commit 085132d118
13 changed files with 378 additions and 54 deletions
@@ -1,6 +1,6 @@
 /***

-Chimera interactions viewer. It reads sqlite file 
+Chimera interactions viewer. It reads sqlite file
 and shows up the list of interactions and a summary
 in multiple plots, comic alignments

@@ -18,7 +18,7 @@
    <script>
        $(document).ready(function (){
            var config = {
-                href: document.location.origin,
+                href: document.location.origin + '${h.url_for( "/" )}'.replace(/\/$/, ''),
                dataName: '${hda.name}',
                datasetID: '${trans.security.encode_id(hda.id)}',
                tableNames: {
@@ -10,9 +10,8 @@
        root = h.url_for( '/' )
    %>

-    <script type="text/javascript" src="/static/scripts/libs/jquery/jquery.js"></script>
-
    ${h.stylesheet_link( root + 'static/plugins/visualizations/graphviz/static/css/style.css' )}
+    ${h.javascript_link( root + 'static/plugins/visualizations/graphviz/static/js/jquery.min.js' )}
    ${h.javascript_link( root + 'static/plugins/visualizations/graphviz/static/js/cytoscape.min.js' )}
    ${h.javascript_link( root + 'static/plugins/visualizations/graphviz/static/js/collapse.js' )}
    ${h.javascript_link( root + 'static/plugins/visualizations/graphviz/static/js/toolPanelFunctions.js' )}
@@ -1,8 +1,8 @@
 /**
 * 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/). 
+ * 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.
@@ -13,6 +13,12 @@ import React, { StrictMode } from 'react'
 import {render as reactRender} from 'react-dom'
 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
@@ -30,12 +36,12 @@ 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";
+    var url = window.location.origin + prefixedDownloadUrl(options.root, "/api/datasets/" + dataset.id + "/content");
    reactRender(
-      <MyApp 
-        url={url} 
-        name={dataset.name} 
-        filepath={dataset.file_name} 
+      <MyApp
+        url={url}
+        name={dataset.name}
+        filepath={dataset.file_name}
        explorer={explorer}
      />,
      document.getElementById(options.target)
@@ -468,7 +468,7 @@ window.bundleEntries.heatmap_default = function (options) {
 }

 window.bundleEntries.heatmap_cluster = function (options) {
-    options.targets = createContainers(options.chart, options.target);
+    options.targets = createContainers("svg", options.chart, options.target);
    requestJobs(
        options.chart,
        requestCharts(options.chart, "heatmap"),
@@ -1,5 +1,5 @@
 <%
-  app_root = "/static/plugins/visualizations/hyphyvision/static/"
+  app_root = h.url_for("/static/plugins/visualizations/hyphyvision/static/")
 %>

 <html lang="en">
@@ -29,7 +29,7 @@
                    <button id="clear_scans" class="btn btn-primary navbar-btn" disabled="disabled" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Clears all scans">Clear all Scans</button>
                    <button id="mvp_full_window" class="btn btn-primary navbar-btn" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Open MVP in a new window."><span class="tip-help">Window</button>
                </div>
-                
+
            </div>
        </div>
        <!--/.nav-collapse -->
@@ -73,7 +73,7 @@ ${h.javascript_link(app_root +  "dist/script.js")}
    $(document).ready(function (){
        var config = {
            dbkey: '${hda.get_metadata().dbkey}',
-            href: document.location.origin,
+            href: document.location.origin + '${h.url_for( "/" )}'.replace(/\/$/, ''),
            dataName: '${hda.name}',
            historyID: '${trans.security.encode_id( hda.history_id )}',
            datasetID: '${trans.security.encode_id( hda.id )}',
@@ -215,8 +215,7 @@ var MapViewer = (function(mv) {
            const sourceVec = new Vector({ format: formatType, url: filePath, wrapX: false });
            mv.createMap(filePath, sourceVec, options, chart, styleFunction, target);
        } else if (fileType === "shp") {
-            const fileUrl = prefixedDownloadUrl(options.root, filePath);
-            axios.get(fileUrl, { responseType: "arraybuffer" }).then(shpfile => {
+            axios.get(filePath, { responseType: "arraybuffer" }).then(shpfile => {
                console.debug(shpfile);
                shp(shpfile.data).then(
                    geojson => {
@@ -821,7 +821,7 @@ var ScatterplotDisplay = Backbone.View.extend({
        var view = this,
            config = this.model.get("config"),
            //TODO: very tied to datasets - should be generalized eventually
-            baseUrl = window.parent && window.parent.galaxy_config ? window.parent.galaxy_config.root : "/",
+            baseUrl = window.parent && window.parent.options ? window.parent.options.root : "/",
            xhr = $.getJSON(baseUrl + "api/datasets/" + this.dataset.id, {
                data_type: "raw_data",
                provider: "dataset-column",
@@ -986,7 +986,7 @@ var ScatterplotDisplay = Backbone.View.extend({
        }
        var view = this;
        var config = this.model.get("config");
-        var meanWorker = new window.Worker("worker-stats.js");
+        var meanWorker = new window.Worker("./static/worker-stats.js");
        meanWorker.postMessage({
            data: this.data,
            keys: [config.xColumn, config.yColumn]