Merge pull request #16119 from mahendrapaipuri/update_visu_plugins

Fix and update visualization plugins
galaxyproject · Aug 9, 2023 · 085132d · 085132d
2 parents 65970c6 + 8271850
commit 085132d
Show file tree

Hide file tree

Showing 13 changed files with 377 additions and 53 deletions.
diff --git a/config/plugins/visualizations/chiraviz/src/js/rna-viz.js b/config/plugins/visualizations/chiraviz/src/js/rna-viz.js
@@ -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
 

diff --git a/config/plugins/visualizations/chiraviz/templates/chiraviz.mako b/config/plugins/visualizations/chiraviz/templates/chiraviz.mako
@@ -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: {

diff --git a/config/plugins/visualizations/graphviz/static/js/jquery.min.js b/config/plugins/visualizations/graphviz/static/js/jquery.min.js
diff --git a/config/plugins/visualizations/graphviz/templates/graphviz.mako b/config/plugins/visualizations/graphviz/templates/graphviz.mako
@@ -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' )}

diff --git a/config/plugins/visualizations/h5web/src/script.js b/config/plugins/visualizations/h5web/src/script.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)

diff --git a/config/plugins/visualizations/heatmap/heatmap_default/src/script.js b/config/plugins/visualizations/heatmap/heatmap_default/src/script.js
@@ -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"),

diff --git a/config/plugins/visualizations/hyphyvision/templates/hyphyvision.mako b/config/plugins/visualizations/hyphyvision/templates/hyphyvision.mako
@@ -1,5 +1,5 @@
 <%
-  app_root = "/static/plugins/visualizations/hyphyvision/static/"
+  app_root = h.url_for("/static/plugins/visualizations/hyphyvision/static/")
 %>
 
 <html lang="en">

diff --git a/config/plugins/visualizations/mvpapp/templates/mvpapp.mako b/config/plugins/visualizations/mvpapp/templates/mvpapp.mako
@@ -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 )}',

diff --git a/config/plugins/visualizations/openlayers/src/script.js b/config/plugins/visualizations/openlayers/src/script.js
@@ -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 => {

diff --git a/config/plugins/visualizations/scatterplot/src/scatterplot.js b/config/plugins/visualizations/scatterplot/src/scatterplot.js
@@ -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]

diff --git a/...s/scatterplot/src/numeric-column-stats.js → ...catterplot/static/numeric-column-stats.js b/...s/scatterplot/src/numeric-column-stats.js → ...catterplot/static/numeric-column-stats.js
diff --git a/config/plugins/visualizations/scatterplot/static/scatterplot.js b/config/plugins/visualizations/scatterplot/static/scatterplot.js
diff --git a/...lizations/scatterplot/src/worker-stats.js → ...ations/scatterplot/static/worker-stats.js b/...lizations/scatterplot/src/worker-stats.js → ...ations/scatterplot/static/worker-stats.js