From e69c047bd8e1df1d6cbb178b3de8488600aa076f Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 12 Dec 2017 17:22:24 -0500
Subject: [PATCH] Trackster external display bundling.

---
 client/galaxy/scripts/apps/extended.js        |  3 +-
 .../webapps/galaxy/visualization/display.mako | 80 ++++++++-----------
 2 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/client/galaxy/scripts/apps/extended.js b/client/galaxy/scripts/apps/extended.js
index f6e802777f6..e4375c00f1b 100644
--- a/client/galaxy/scripts/apps/extended.js
+++ b/client/galaxy/scripts/apps/extended.js
@@ -174,7 +174,8 @@ export const bundleEntries = {
     History: History.History,
     HistoryContents: HistoryContents.HistoryContents,
     HistoryCopyDialog,
-    HistoryViewAnnotated
+    HistoryViewAnnotated,
+    Trackster
 };
 
 console.debug(bundleEntries);
diff --git a/templates/webapps/galaxy/visualization/display.mako b/templates/webapps/galaxy/visualization/display.mako
index 4fe42facd92..6540f63f792 100644
--- a/templates/webapps/galaxy/visualization/display.mako
+++ b/templates/webapps/galaxy/visualization/display.mako
@@ -18,9 +18,7 @@
 
 <%def name="stylesheets()">
     ${parent.stylesheets()}
-    ${h.css(
-        "trackster"
-    )}
+    ${h.css("trackster")}
 
     ## Style changes needed for display.
     <style type="text/css">
@@ -53,56 +51,44 @@
     <div id="${trans.security.encode_id( visualization.id )}" class="unified-panel-body" style="overflow:none;top:0px;"></div>
 
     <script type="text/javascript">
-        require.config({
-            baseUrl: "${h.url_for('/static/scripts') }",
-            shim: {
-                "libs/underscore": { exports: "_" },
-                "libs/backbone": { exports: "Backbone" },
-            },
-            urlArgs: 'v=${app.server_starttime}'
-        });
-        require( ["viz/trackster"], function(trackster) {
+        // FIXME: deliberate global required for now due to requireJS integration.
+        view = null;
 
-            // FIXME: deliberate global required for now due to requireJS integration.
-            view = null;
+        var ui = new (window.bundleEntries.Trackster.TracksterUI)( "${h.url_for('/')}" );
+        var container_element = $("#${trans.security.encode_id( visualization.id )}");
 
-            var ui = new (trackster.default.TracksterUI)( "${h.url_for('/')}" )
-                container_element = $("#${trans.security.encode_id( visualization.id )}");
+        $(function() {
+            var is_embedded = (container_element.parents(".item-content").length > 0);
 
-            $(function() {
-                var is_embedded = (container_element.parents(".item-content").length > 0);
+            // HTML setup.
+            if (is_embedded) {
+                container_element.css( { "position": "relative" } );
+            } else { // Viewing just one shared viz
+                $("#right-border").click(function() { view.resize_window(); });
+            }
 
-                // HTML setup.
-                if (is_embedded) {
-                    container_element.css( { "position": "relative" } );
-                } else { // Viewing just one shared viz
-                    $("#right-border").click(function() { view.resize_window(); });
-                }
+            // Create visualization.
+            var callback;
+            %if 'viewport' in config:
+                var callback = function() { view.change_chrom( '${config['viewport']['chrom']}', ${config['viewport']['start']}, ${config['viewport']['end']} ); }
+            %endif
+            view = ui.create_visualization( {
+                                            container: container_element,
+                                            name: "${config.get('title') | h}",
+                                            vis_id: "${config.get('vis_id')}",
+                                            dbkey: "${config.get('dbkey')}"
+                                         },
+                                         ${ h.dumps( config.get( 'viewport', dict() ) ) },
+                                         ${ h.dumps( config['tracks'] ) },
+                                         ${ h.dumps( config.get('bookmarks') ) }
+                                         );
 
-                // Create visualization.
-                var callback;
-                %if 'viewport' in config:
-                    var callback = function() { view.change_chrom( '${config['viewport']['chrom']}', ${config['viewport']['start']}, ${config['viewport']['end']} ); }
-                %endif
-                view = ui.create_visualization( {
-                                                container: container_element,
-                                                name: "${config.get('title') | h}",
-                                                vis_id: "${config.get('vis_id')}",
-                                                dbkey: "${config.get('dbkey')}"
-                                             },
-                                             ${ h.dumps( config.get( 'viewport', dict() ) ) },
-                                             ${ h.dumps( config['tracks'] ) },
-                                             ${ h.dumps( config.get('bookmarks') ) }
-                                             );
-
-                // Set up keyboard navigation.
-                ui.init_keyboard_nav(view);
-
-                // HACK: set viewport height because it cannot be set automatically. Currently, max height for embedded
-                // elts is 25em, so use 20em.
-                view.viewport_container.height("20em");
-            });
+            // Set up keyboard navigation.
+            ui.init_keyboard_nav(view);
 
+            // HACK: set viewport height because it cannot be set automatically. Currently, max height for embedded
+            // elts is 25em, so use 20em.
+            view.viewport_container.height("20em");
         });
 
     </script>