Template literals instead of string construction across the app; this does not handle the loaders for *large* templates or where we were using a helper to construct large strings, yet.

client/galaxy/scripts/apps/admin.js

@@ -34,7 +34,7 @@ window.app = function app(options, bootstrapped) {
         show_users: function() {
             this.page.display(
                 new GridView({
-                    url_base: Galaxy.root + "admin/users_list",
+                    url_base: `${Galaxy.root}admin/users_list`,
                     url_data: Galaxy.params,
                     dict_format: true
                 })
@@ -44,7 +44,7 @@ window.app = function app(options, bootstrapped) {
         show_roles: function() {
             this.page.display(
                 new GridView({
-                    url_base: Galaxy.root + "admin/roles_list",
+                    url_base: `${Galaxy.root}admin/roles_list`,
                     url_data: Galaxy.params,
                     dict_format: true
                 })
@@ -54,7 +54,7 @@ window.app = function app(options, bootstrapped) {
         show_groups: function() {
             this.page.display(
                 new GridView({
-                    url_base: Galaxy.root + "admin/groups_list",
+                    url_base: `${Galaxy.root}admin/groups_list`,
                     url_data: Galaxy.params,
                     dict_format: true
                 })
@@ -64,8 +64,7 @@ window.app = function app(options, bootstrapped) {
         show_repositories: function() {
             this.page.display(
                 new GridView({
-                    url_base:
-                        Galaxy.root + "admin_toolshed/browse_repositories",
+                    url_base: `${Galaxy.root}admin_toolshed/browse_repositories`,
                     url_data: Galaxy.params,
                     dict_format: true
                 })
@@ -75,7 +74,7 @@ window.app = function app(options, bootstrapped) {
         show_tool_versions: function() {
             this.page.display(
                 new GridView({
-                    url_base: Galaxy.root + "admin/tool_versions_list",
+                    url_base: `${Galaxy.root}admin/tool_versions_list`,
                     url_data: Galaxy.params,
                     dict_format: true
                 })
@@ -85,7 +84,7 @@ window.app = function app(options, bootstrapped) {
         show_quotas: function() {
             this.page.display(
                 new GridView({
-                    url_base: Galaxy.root + "admin/quotas_list",
+                    url_base: `${Galaxy.root}admin/quotas_list`,
                     url_data: Galaxy.params,
                     dict_format: true
                 })
@@ -95,7 +94,7 @@ window.app = function app(options, bootstrapped) {
         show_forms: function() {
             this.page.display(
                 new GridView({
-                    url_base: Galaxy.root + "forms/forms_list",
+                    url_base: `${Galaxy.root}forms/forms_list`,
                     url_data: Galaxy.params,
                     dict_format: true
                 })
@@ -103,30 +102,30 @@ window.app = function app(options, bootstrapped) {
         },
 
         show_form: function(form_id) {
-            var id = "?id=" + QueryStringParsing.get("id");
+            var id = `?id=${QueryStringParsing.get("id")}`;
             var form_defs = {
                 reset_user_password: {
                     title: "Reset passwords",
-                    url: "admin/reset_user_password" + id,
+                    url: `admin/reset_user_password${id}`,
                     icon: "fa-user",
                     submit_title: "Save new password",
                     redirect: "admin/users"
                 },
                 manage_roles_and_groups_for_user: {
-                    url: "admin/manage_roles_and_groups_for_user" + id,
+                    url: `admin/manage_roles_and_groups_for_user${id}`,
                     icon: "fa-users",
                     redirect: "admin/users"
                 },
                 manage_users_and_groups_for_role: {
-                    url: "admin/manage_users_and_groups_for_role" + id,
+                    url: `admin/manage_users_and_groups_for_role${id}`,
                     redirect: "admin/roles"
                 },
                 manage_users_and_roles_for_group: {
-                    url: "admin/manage_users_and_roles_for_group" + id,
+                    url: `admin/manage_users_and_roles_for_group${id}`,
                     redirect: "admin/groups"
                 },
                 manage_users_and_groups_for_quota: {
-                    url: "admin/manage_users_and_groups_for_quota" + id,
+                    url: `admin/manage_users_and_groups_for_quota${id}`,
                     redirect: "admin/quotas"
                 },
                 create_role: {
@@ -142,23 +141,23 @@ window.app = function app(options, bootstrapped) {
                     redirect: "admin/quotas"
                 },
                 rename_role: {
-                    url: "admin/rename_role" + id,
+                    url: `admin/rename_role${id}`,
                     redirect: "admin/roles"
                 },
                 rename_group: {
-                    url: "admin/rename_group" + id,
+                    url: `admin/rename_group${id}`,
                     redirect: "admin/groups"
                 },
                 rename_quota: {
-                    url: "admin/rename_quota" + id,
+                    url: `admin/rename_quota${id}`,
                     redirect: "admin/quotas"
                 },
                 edit_quota: {
-                    url: "admin/edit_quota" + id,
+                    url: `admin/edit_quota${id}`,
                     redirect: "admin/quotas"
                 },
                 set_quota_default: {
-                    url: "admin/set_quota_default" + id,
+                    url: `admin/set_quota_default${id}`,
                     redirect: "admin/quotas"
                 },
                 create_form: {
@@ -166,7 +165,7 @@ window.app = function app(options, bootstrapped) {
                     redirect: "admin/forms"
                 },
                 edit_form: {
-                    url: "forms/edit_form" + id,
+                    url: `forms/edit_form${id}`,
                     redirect: "admin/forms"
                 }
             };

client/galaxy/scripts/apps/analysis.js

@@ -103,8 +103,9 @@ window.app = function app(options, bootstrapped) {
         show_visualizations_edit: function() {
             this.page.display(
                 new FormWrapper.View({
-                    url:
-                        "visualization/edit?id=" + QueryStringParsing.get("id"),
+                    url: `visualization/edit?id=${QueryStringParsing.get(
+                        "id"
+                    )}`,
                     redirect: "visualizations/list"
                 })
             );
@@ -113,7 +114,7 @@ window.app = function app(options, bootstrapped) {
         show_workflows_published: function() {
             this.page.display(
                 new GridView({
-                    url_base: Galaxy.root + "workflow/list_published",
+                    url_base: `${Galaxy.root}workflow/list_published`,
                     dict_format: true
                 })
             );
@@ -126,7 +127,7 @@ window.app = function app(options, bootstrapped) {
         show_histories_rename: function() {
             this.page.display(
                 new FormWrapper.View({
-                    url: "history/rename?id=" + QueryStringParsing.get("id"),
+                    url: `history/rename?id=${QueryStringParsing.get("id")}`,
                     redirect: "histories/list"
                 })
             );
@@ -135,9 +136,9 @@ window.app = function app(options, bootstrapped) {
         show_histories_permissions: function() {
             this.page.display(
                 new FormWrapper.View({
-                    url:
-                        "history/permissions?id=" +
-                        QueryStringParsing.get("id"),
+                    url: `history/permissions?id=${QueryStringParsing.get(
+                        "id"
+                    )}`,
                     redirect: "histories/list"
                 })
             );
@@ -146,7 +147,7 @@ window.app = function app(options, bootstrapped) {
         show_datasets: function() {
             this.page.display(
                 new GridView({
-                    url_base: Galaxy.root + "dataset/list",
+                    url_base: `${Galaxy.root}dataset/list`,
                     dict_format: true
                 })
             );
@@ -174,7 +175,7 @@ window.app = function app(options, bootstrapped) {
         show_pages_edit: function() {
             this.page.display(
                 new FormWrapper.View({
-                    url: "page/edit?id=" + QueryStringParsing.get("id"),
+                    url: `page/edit?id=${QueryStringParsing.get("id")}`,
                     redirect: "pages/list"
                 })
             );
@@ -233,7 +234,7 @@ window.app = function app(options, bootstrapped) {
                     this._loadWorkflow();
                     // load the center iframe with controller.action: galaxy.org/?m_c=history&m_a=list -> history/list
                 } else if (params.m_c) {
-                    this._loadCenterIframe(params.m_c + "/" + params.m_a);
+                    this._loadCenterIframe(`${params.m_c}/${params.m_a}`);
                     // show the workflow run form
                 } else {
                     this._loadCenterIframe("welcome");
@@ -259,11 +260,9 @@ window.app = function app(options, bootstrapped) {
         _loadWorkflow: function() {
             var self = this;
             Utils.get({
-                url:
-                    Galaxy.root +
-                    "api/workflows/" +
-                    Utils.getQueryString("id") +
-                    "/download?style=run",
+                url: `${Galaxy.root}api/workflows/${Utils.getQueryString(
+                    "id"
+                )}/download?style=run`,
                 success: function(response) {
                     self.page.display(new ToolFormComposite.View(response));
                 },

client/galaxy/scripts/apps/login.js

@@ -13,7 +13,7 @@ window.app = function app(options, bootstrapped) {
     // then remove this redirect
     if (!options.show_welcome_with_login) {
         var params = jQuery.param({ use_panels: "True", redirect: redirect });
-        window.location.href = Galaxy.root + "user/login?" + params;
+        window.location.href = `${Galaxy.root}user/login?${params}`;
         return;
     }
 
@@ -27,13 +27,10 @@ window.app = function app(options, bootstrapped) {
             this.page.$("#galaxy_main").prop("src", options.welcome_url);
         },
         _template: function() {
-            var login_url =
-                options.root + "user/login?" + $.param({ redirect: redirect });
-            return (
-                '<iframe src="' +
-                login_url +
-                '" frameborder="0" style="width: 100%; height: 100%;"/>'
-            );
+            var login_url = `${options.root}user/login?${$.param({
+                redirect: redirect
+            })}`;
+            return `<iframe src="${login_url}" frameborder="0" style="width: 100%; height: 100%;"/>`;
         }
     });
 

client/galaxy/scripts/apps/panels/admin-panel.js

@@ -181,20 +181,15 @@ var AdminPanel = Backbone.View.extend({
             .$("#galaxy_main")
             .prop(
                 "src",
-                this.root +
-                    "admin/center?message=" +
-                    this.message +
-                    "&status=" +
-                    this.status
+                `${this.root}admin/center?message=${this.message}&status=${this
+                    .status}`
             );
     },
 
     _templateSection: function(options) {
         return [
             "<div>",
-            '<div class="ui-side-section-title">' +
-                _l(options.title) +
-                "</div>",
+            `<div class="ui-side-section-title">${_l(options.title)}</div>`,
             '<div class="ui-side-section-body"/>',
             "</div>"
         ].join("");

client/galaxy/scripts/apps/panels/history-panel.js

@@ -13,9 +13,8 @@ var HistoryPanel = Backbone.View.extend({
 
         // view of the current history
         this.historyView = new CurrentHistoryView.CurrentHistoryView({
-            className:
-                CurrentHistoryView.CurrentHistoryView.prototype.className +
-                " middle",
+            className: `${CurrentHistoryView.CurrentHistoryView.prototype
+                .className} middle`,
             purgeAllowed: this.allow_user_dataset_purge,
             linkTarget: "galaxy_main"
         });
@@ -40,14 +39,14 @@ var HistoryPanel = Backbone.View.extend({
             cls: "panel-header-button",
             target: "galaxy_main",
             icon: "fa fa-cog",
-            href: this.root + "root/history_options"
+            href: `${this.root}root/history_options`
         });
         this.buttonViewMulti = new Ui.ButtonLink({
             id: "history-view-multi-button",
             title: "View all histories",
             cls: "panel-header-button",
             icon: "fa fa-columns",
-            href: this.root + "history/view_multiple"
+            href: `${this.root}history/view_multiple`
         });
 
         // define components
@@ -70,7 +69,7 @@ var HistoryPanel = Backbone.View.extend({
         // fetch to update the quota meter adding 'current' for any anon-user's id
         Galaxy.listenTo(this.historyView, "history-size-change", () => {
             Galaxy.user.fetch({
-                url: Galaxy.user.urlRoot() + "/" + (Galaxy.user.id || "current")
+                url: `${Galaxy.user.urlRoot()}/${Galaxy.user.id || "current"}`
             });
         });
     },

client/galaxy/scripts/apps/panels/tool-panel.js

@@ -67,9 +67,7 @@ var ToolPanel = Backbone.View.extend({
             self.$("#internal-workflows").append(
                 self._templateWorkflowLink({
                     title: menu_entry.stored_workflow.name,
-                    href:
-                        "workflow/run?id=" +
-                        menu_entry.encoded_stored_workflow_id
+                    href: `workflow/run?id=${menu_entry.encoded_stored_workflow_id}`
                 })
             );
         });
@@ -108,7 +106,7 @@ var ToolPanel = Backbone.View.extend({
     _templateWorkflowLink: function(wf) {
         return [
             '<div class="toolTitle">',
-            '<a class="' + wf.cls + ' " href="',
+            `<a class="${wf.cls} " href="`,
             Galaxy.root,
             wf.href,
             '">',

client/galaxy/scripts/galaxy.interactive_environments.js

@@ -5,9 +5,7 @@
 function append_notebook(url) {
     clear_main_area();
     $("#main").append(
-        '<iframe frameBorder="0" seamless="seamless" style="width: 100%; height: 100%; overflow:hidden;" scrolling="no" src="' +
-            url +
-            '"></iframe>'
+        `<iframe frameBorder="0" seamless="seamless" style="width: 100%; height: 100%; overflow:hidden;" scrolling="no" src="${url}"></iframe>`
     );
 }
 
@@ -20,9 +18,7 @@ function clear_main_area() {
 
 function display_spinner() {
     $("#main").append(
-        '<img id="spinner" src="' +
-            galaxy_root +
-            'static/style/largespinner.gif" style="position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;">'
+        `<img id="spinner" src="${galaxy_root}static/style/largespinner.gif" style="position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;">`
     );
 }
 
@@ -76,14 +72,8 @@ function spin_again(spin_state) {
     }
     if (spin_state.log_attempts) {
         console.log(
-            spin_state.type +
-                " request " +
-                spin_state.count +
-                " request timeout " +
-                spin_state.ajax_timeout +
-                "ms sleeping " +
-                spin_state.sleep / 1000 +
-                "s"
+            `${spin_state.type} request ${spin_state.count} request timeout ${spin_state.ajax_timeout}ms sleeping ${spin_state.sleep /
+                1000}s`
         );
     }
     window.setTimeout(spin_state.spinner, spin_state.sleep);
@@ -134,7 +124,7 @@ function spin(
         if (bool_response) ajax_params["dataType"] = "json";
         $.ajax(ajax_params);
     };
-    console.log("Setting up new spinner for " + spin_state.type + " on " + url);
+    console.log(`Setting up new spinner for ${spin_state.type} on ${url}`);
     spin_state.spinner = spinner;
     window.setTimeout(spinner, spin_state.sleep);
 }
@@ -175,7 +165,7 @@ function spin_until(
             return false; // keep spinning
         } else {
             spin_error(
-                "Invalid response to " + spin_state.type + " request",
+                `Invalid response to ${spin_state.type} request`,
                 messages["invalid_response"],
                 true
             );

client/galaxy/scripts/galaxy.js

@@ -26,7 +26,7 @@ addLogging(GalaxyApp, "GalaxyApp");
 // a debug flag can be set via local storage and made available during script/page loading
 var DEBUGGING_KEY = "galaxy:debug";
 
-var NAMESPACE_KEY = DEBUGGING_KEY + ":namespaces";
+var NAMESPACE_KEY = `${DEBUGGING_KEY}:namespaces`;
 var localDebugging = false;
 try {
     localDebugging = localStorage.getItem(DEBUGGING_KEY) == "true";
@@ -272,7 +272,7 @@ GalaxyApp.prototype.toString = function toString() {
     var userEmail = this.user
         ? this.user.get("email") || "(anonymous)"
         : "uninitialized";
-    return "GalaxyApp(" + userEmail + ")";
+    return `GalaxyApp(${userEmail})`;
 };
 
 // ============================================================================

client/galaxy/scripts/galaxy.library.js

@@ -71,10 +71,10 @@ var LibraryRouter = Backbone.Router.extend({
         var url = Backbone.history.getFragment();
         //prepend slash
         if (!/^\//.test(url) && url != "") {
-            url = "/" + url;
+            url = `/${url}`;
         }
         if (typeof ga !== "undefined") {
-            ga("send", "pageview", Galaxy.root + "library/list" + url);
+            ga("send", "pageview", `${Galaxy.root}library/list${url}`);
         }
     }
 });
@@ -193,13 +193,13 @@ var GalaxyLibrary = Backbone.View.extend({
                     "You must select at least one dataset to download"
                 );
                 Galaxy.libraries.library_router.navigate(
-                    "folders/" + folder_id,
+                    `folders/${folder_id}`,
                     { trigger: true, replace: true }
                 );
             } else {
                 Galaxy.libraries.folderToolbarView.download(folder_id, format);
                 Galaxy.libraries.library_router.navigate(
-                    "folders/" + folder_id,
+                    `folders/${folder_id}`,
                     { trigger: false, replace: true }
                 );
             }

client/galaxy/scripts/galaxy.pages.js

@@ -83,8 +83,7 @@ function get_item_info(dialog_type) {
     }
 
     // Build ajax URL that lists items for selection.
-    var item_list_action =
-        "list_" + item_plural.toLowerCase() + "_for_selection";
+    var item_list_action = `list_${item_plural.toLowerCase()}_for_selection`;
     var ajax_url = list_objects_url.replace("LIST_ACTION", item_list_action);
 
     // Set up and return dict.
@@ -108,7 +107,7 @@ function make_item_importable(item_controller, item_id, item_type) {
         url: ajax_url,
         data: { id: item_id, accessible: "True" },
         error: function() {
-            alert("Making " + item_type + " accessible failed");
+            alert(`Making ${item_type} accessible failed`);
         }
     });
 }
@@ -163,12 +162,7 @@ WYMeditor.editor.prototype.dialog = function(
         }
         show_modal(
             "Create Link",
-            "<div><div><label id='link_attribute_label'>URL <span style='float: right; font-size: 90%'><a href='#' id='set_link_id'>Create in-page anchor</a></span></label><br><input type='text' class='wym_href' value='" +
-                curURL +
-                "' size='40' /></div>" +
-                "<div><label>Title</label><br><input type='text' class='wym_title' value='" +
-                curTitle +
-                "' size='40' /></div><div>",
+            `<div><div><label id='link_attribute_label'>URL <span style='float: right; font-size: 90%'><a href='#' id='set_link_id'>Create in-page anchor</a></span></label><br><input type='text' class='wym_href' value='${curURL}' size='40' /></div><div><label>Title</label><br><input type='text' class='wym_title' value='${curTitle}' size='40' /></div><div>`,
             {
                 "Make link": function() {
                     // Get URL, name/title.
@@ -182,7 +176,7 @@ WYMeditor.editor.prototype.dialog = function(
                         wym._exec(WYMeditor.CREATE_LINK, sStamp);
 
                         // Set link attributes.
-                        var link = $("a[href=" + sStamp + "]", wym._doc.body);
+                        var link = $(`a[href=${sStamp}]`, wym._doc.body);
                         link
                             .attr(WYMeditor.HREF, sUrl)
                             .attr(WYMeditor.TITLE, sName)
@@ -208,19 +202,16 @@ WYMeditor.editor.prototype.dialog = function(
     if (dialogType == WYMeditor.DIALOG_IMAGE) {
         if (wym._selected_image) {
             $(
-                wym._options.dialogImageSelector +
-                    " " +
-                    wym._options.srcSelector
+                `${wym._options.dialogImageSelector} ${wym._options
+                    .srcSelector}`
             ).val($(wym._selected_image).attr(WYMeditor.SRC));
             $(
-                wym._options.dialogImageSelector +
-                    " " +
-                    wym._options.titleSelector
+                `${wym._options.dialogImageSelector} ${wym._options
+                    .titleSelector}`
             ).val($(wym._selected_image).attr(WYMeditor.TITLE));
             $(
-                wym._options.dialogImageSelector +
-                    " " +
-                    wym._options.altSelector
+                `${wym._options.dialogImageSelector} ${wym._options
+                    .altSelector}`
             ).val($(wym._selected_image).attr(WYMeditor.ALT));
         }
         show_modal(
@@ -242,7 +233,7 @@ WYMeditor.editor.prototype.dialog = function(
                     var sUrl = $(wym._options.srcSelector).val();
                     if (sUrl.length > 0) {
                         wym._exec(WYMeditor.INSERT_IMAGE, sStamp);
-                        $("img[src$=" + sStamp + "]", wym._doc.body)
+                        $(`img[src$=${sStamp}]`, wym._doc.body)
                             .attr(WYMeditor.SRC, sUrl)
                             .attr(
                                 WYMeditor.TITLE,
@@ -367,7 +358,7 @@ WYMeditor.editor.prototype.dialog = function(
             embedded: true
         });
         Galaxy.modal.show({
-            title: "Insert Link to " + item_info.singular,
+            title: `Insert Link to ${item_info.singular}`,
             body: $("<div/>")
                 .append(grid.$el)
                 .append(
@@ -376,9 +367,7 @@ WYMeditor.editor.prototype.dialog = function(
                             '<input id="make-importable" type="checkbox" checked/>'
                         )
                         .append(
-                            "Make the selected " +
-                                item_info.plural.toLowerCase() +
-                                " accessible so that they can viewed by everyone."
+                            `Make the selected ${item_info.plural.toLowerCase()} accessible so that they can viewed by everyone.`
                         )
                 ),
             closing_events: true,
@@ -412,7 +401,7 @@ WYMeditor.editor.prototype.dialog = function(
                             // Get link text.
                             wym._exec(WYMeditor.CREATE_LINK, sStamp);
                             var link_text = $(
-                                "a[href=" + sStamp + "]",
+                                `a[href=${sStamp}]`,
                                 wym._doc.body
                             ).text();
 
@@ -423,17 +412,11 @@ WYMeditor.editor.prototype.dialog = function(
                             ) {
                                 // User selected no text; create link from scratch and use default text.
                                 wym.insert(
-                                    "<a href='" +
-                                        returned_item_info.link +
-                                        "'>" +
-                                        item_info.singular +
-                                        " '" +
-                                        returned_item_info.name +
-                                        "'</a>"
+                                    `<a href='${returned_item_info.link}'>${item_info.singular} '${returned_item_info.name}'</a>`
                                 );
                             } else {
                                 // Link created from selected text; add href and title.
-                                $("a[href=" + sStamp + "]", wym._doc.body)
+                                $(`a[href=${sStamp}]`, wym._doc.body)
                                     .attr(
                                         WYMeditor.HREF,
                                         returned_item_info.link
@@ -487,7 +470,7 @@ WYMeditor.editor.prototype.dialog = function(
             embedded: true
         });
         Galaxy.modal.show({
-            title: "Insert Link to " + item_info.singular,
+            title: `Insert Link to ${item_info.singular}`,
             body: $("<div/>")
                 .append(grid.$el)
                 .append(
@@ -496,9 +479,7 @@ WYMeditor.editor.prototype.dialog = function(
                             '<input id="make-importable" type="checkbox" checked/>'
                         )
                         .append(
-                            "Make the selected " +
-                                item_info.plural.toLowerCase() +
-                                " accessible so that they can viewed by everyone."
+                            `Make the selected ${item_info.plural.toLowerCase()} accessible so that they can viewed by everyone.`
                         )
                 ),
             closing_events: true,
@@ -514,7 +495,7 @@ WYMeditor.editor.prototype.dialog = function(
                         var item_id = $(this).val();
                         // Use ':first' because there are many labels in table; the first one is the item name.
                         var item_name = $(
-                            "label[for='" + item_id + "']:first"
+                            `label[for='${item_id}']:first`
                         ).text();
 
                         if (make_importable)
@@ -527,7 +508,7 @@ WYMeditor.editor.prototype.dialog = function(
                         // Embedded item HTML; item class is embedded in div container classes; this is necessary because the editor strips
                         // all non-standard attributes when it returns its content (e.g. it will not return an element attribute of the form
                         // item_class='History').
-                        var item_elt_id = item_info.iclass + "-" + item_id;
+                        var item_elt_id = `${item_info.iclass}-${item_id}`;
                         var item_embed_html = [
                             "<div id='",
                             item_elt_id,
@@ -576,19 +557,9 @@ export default function editor_onload() {
         skin: "galaxy",
         basePath: editor_base_path,
         iframeBasePath: iframe_base_path,
-        boxHtml:
-            "<table class='wym_box' width='100%' height='100%'>" +
-            "<tr><td><div class='wym_area_top'>" +
-            WYMeditor.TOOLS +
-            "</div></td></tr>" +
-            "<tr height='100%'><td>" +
-            "<div class='wym_area_main' style='height: 100%;'>" +
-            // + WYMeditor.HTML
-            WYMeditor.IFRAME +
-            WYMeditor.STATUS +
-            "</div>" +
-            "</div>" +
-            "</td></tr></table>",
+        // + WYMeditor.HTML
+        boxHtml: `<table class='wym_box' width='100%' height='100%'><tr><td><div class='wym_area_top'>${WYMeditor.TOOLS}</div></td></tr><tr height='100%'><td><div class='wym_area_main' style='height: 100%;'>${// + WYMeditor.HTML
+        WYMeditor.IFRAME}${WYMeditor.STATUS}</div></div></td></tr></table>`,
         toolsItems: [
             { name: "Bold", title: "Strong", css: "wym_tools_strong" },
             { name: "Italic", title: "Emphasis", css: "wym_tools_emphasis" },

client/galaxy/scripts/layout/generic-nav-view.js

@@ -17,20 +17,13 @@ var GenericNavView = Backbone.View.extend({
             window.Galaxy.config.persistent_communication_rooms
         );
 
-        var query_string =
-            "?username=" +
-            username +
-            "&persistent_communication_rooms=" +
-            persistent_communication_rooms;
+        var query_string = `?username=${username}&persistent_communication_rooms=${persistent_communication_rooms}`;
 
-        var src = host + ":" + port + query_string;
+        var src = `${host}:${port}${query_string}`;
         var $el_chat_modal_header = null;
         var $el_chat_modal_body = null;
 
-        var iframe_template =
-            '<iframe class="f-iframe fade in communication-iframe" src="' +
-            src +
-            '"> </iframe>';
+        var iframe_template = `<iframe class="f-iframe fade in communication-iframe" src="${src}"> </iframe>`;
 
         var header_template =
             '<i class="fa fa-comment" aria-hidden="true" title="Communicate with other users"></i>' +
@@ -80,8 +73,8 @@ var GenericNavView = Backbone.View.extend({
                 $(".expand-compress-modal").attr("title", "Minimize");
                 $(".expand-compress-modal").css("margin-left", "96.2%");
             } else {
-                $(".chat-modal .modal-dialog").width(frame_width + "px");
-                $(".chat-modal .modal-body").height(frame_height + "px");
+                $(".chat-modal .modal-dialog").width(`${frame_width}px`);
+                $(".chat-modal .modal-body").height(`${frame_height}px`);
                 $(".expand-compress-modal")
                     .removeClass("fa-compress")
                     .addClass("fa-expand");

client/galaxy/scripts/layout/masthead.js

@@ -69,7 +69,7 @@ var View = Backbone.View.extend({
                     var q =
                         model.get("onbeforeunload") &&
                         model.get("onbeforeunload")();
-                    q && (text += q + " ");
+                    q && (text += `${q} `);
                 });
                 if (text !== "") {
                     return text;
@@ -79,8 +79,7 @@ var View = Backbone.View.extend({
 
     render: function() {
         this.$navbarBrandTitle.html(
-            "Galaxy " +
-                ((this.options.brand && "/ " + this.options.brand) || "")
+            `Galaxy ${(this.options.brand && `/ ${this.options.brand}`) || ""}`
         );
         this.$navbarBrandLink.attr("href", this.options.logo_url);
         this.$navbarBrandImage.attr("src", this.options.logo_src);

client/galaxy/scripts/layout/menu.js

@@ -258,8 +258,9 @@ var Collection = Backbone.Collection.extend({
                 tooltip: _l("Account and saved data"),
                 menu: [
                     {
-                        title:
-                            _l("Logged in as") + " " + Galaxy.user.get("email")
+                        title: `${_l("Logged in as")} ${Galaxy.user.get(
+                            "email"
+                        )}`
                     },
                     {
                         title: _l("Preferences"),
@@ -271,9 +272,7 @@ var Collection = Backbone.Collection.extend({
                     },
                     {
                         title: _l("Logout"),
-                        url:
-                            "user/logout?session_csrf_token=" +
-                            Galaxy.session_csrf_token,
+                        url: `user/logout?session_csrf_token=${Galaxy.session_csrf_token}`,
                         target: "_top",
                         divider: true
                     },
@@ -340,7 +339,7 @@ var Tab = Backbone.View.extend({
             .addClass(this.model.get("cls"))
             .addClass(
                 this.model.get("icon") &&
-                    "dropdown-icon fa " + this.model.get("icon")
+                    `dropdown-icon fa ${this.model.get("icon")}`
             )
             .addClass(this.model.get("toggle") && "toggle")
             .attr("target", this.model.get("target"))
@@ -439,12 +438,13 @@ var Tab = Backbone.View.extend({
                 .popover({
                     html: true,
                     placement: "bottom",
-                    content:
-                        "Please " +
-                        buildLink("login", "user/login?use_panels=True") +
-                        " or " +
-                        buildLink("register", "user/create?use_panels=True") +
-                        " to use this feature."
+                    content: `Please ${buildLink(
+                        "login",
+                        "user/login?use_panels=True"
+                    )} or ${buildLink(
+                        "register",
+                        "user/create?use_panels=True"
+                    )} to use this feature.`
                 })
                 .popover("show");
             setTimeout(() => {

client/galaxy/scripts/layout/modal.js

@@ -154,15 +154,7 @@ function show_in_overlay(options) {
         closeButton: true,
         title: " ",
         body: $(
-            "<div style='margin: -5px;'><iframe style='margin: 0; padding: 0;' src='" +
-                options.url +
-                "' width='" +
-                width +
-                "' height='" +
-                height +
-                "' scrolling='" +
-                scroll +
-                "' frameborder='0'></iframe></div>"
+            `<div style='margin: -5px;'><iframe style='margin: 0; padding: 0;' src='${options.url}' width='${width}' height='${height}' scrolling='${scroll}' frameborder='0'></iframe></div>`
         )
     });
     modal.show({ backdrop: true });

client/galaxy/scripts/layout/page.js

@@ -55,7 +55,7 @@ var View = Backbone.View.extend({
                 self[panel_instance.toString()] = panel_instance;
                 self.panels[panel_id] = new Panel.SidePanel({
                     id: panel_id,
-                    el: self.$("#" + panel_id),
+                    el: self.$(`#${panel_id}`),
                     view: panel_instance
                 });
             }
@@ -88,7 +88,7 @@ var View = Backbone.View.extend({
             var level = this.config.message_box_class || "info";
             this.$el.addClass("has-message-box");
             this.$messagebox
-                .attr("class", "panel-" + level + "-message")
+                .attr("class", `panel-${level}-message`)
                 .html(content)
                 .toggle(!!content)
                 .show();
@@ -104,11 +104,11 @@ var View = Backbone.View.extend({
         if (this.config.show_inactivity_warning) {
             var content = this.config.inactivity_box_content || "";
             var verificationLink = $("<a/>")
-                .attr("href", Galaxy.root + "user/resend_verification")
+                .attr("href", `${Galaxy.root}user/resend_verification`)
                 .text("Resend verification");
             this.$el.addClass("has-inactivity-box");
             this.$inactivebox
-                .html(content + " ")
+                .html(`${content} `)
                 .append(verificationLink)
                 .toggle(!!content)
                 .show();
@@ -128,7 +128,7 @@ var View = Backbone.View.extend({
                 panel.render();
             } else {
                 self.$("#center").css(panel_id, 0);
-                self.$("#" + panel_id).hide();
+                self.$(`#${panel_id}`).hide();
             }
         });
         return this;
@@ -167,7 +167,7 @@ var View = Backbone.View.extend({
         ) {
             // See if the configured communication server is available
             $.ajax({
-                url: host + ":" + port
+                url: `${host}:${port}`
             })
                 .success(data => {
                     // enable communication only when a user is logged in

client/galaxy/scripts/layout/panel.js

@@ -189,7 +189,7 @@ var SidePanel = Backbone.View.extend({
     },
 
     toString: function() {
-        return "SidePanel(" + this.id + ")";
+        return `SidePanel(${this.id})`;
     }
 });
 

client/galaxy/scripts/layout/scratchbook.js

@@ -25,11 +25,7 @@ export default Backbone.View.extend({
             },
             onbeforeunload: function() {
                 if (self.frames.length() > 0) {
-                    return (
-                        "You opened " +
-                        self.frames.length() +
-                        " frame(s) which will be lost."
-                    );
+                    return `You opened ${self.frames.length()} frame(s) which will be lost.`;
                 }
             }
         });
@@ -159,7 +155,7 @@ export default Backbone.View.extend({
             var title = dataset.get("name");
             var history_details = self.history_cache[dataset.get("history_id")];
             if (history_details) {
-                title = history_details.name + ": " + title;
+                title = `${history_details.name}: ${title}`;
             }
             callback(
                 dataset,
@@ -175,11 +171,7 @@ export default Backbone.View.extend({
                       }
                     : {
                           title: title,
-                          url:
-                              Galaxy.root +
-                              "datasets/" +
-                              dataset_id +
-                              "/display/?preview=True",
+                          url: `${Galaxy.root}datasets/${dataset_id}/display/?preview=True`,
                           content: null
                       }
             );
@@ -245,10 +237,10 @@ export default Backbone.View.extend({
             var $galaxy_main = $(window.parent.document).find("#galaxy_main");
             if (options.target == "galaxy_main" || options.target == "center") {
                 if ($galaxy_main.length === 0) {
-                    window.location =
-                        options.url +
-                        (options.url.indexOf("?") == -1 ? "?" : "&") +
-                        "use_panels=True";
+                    window.location = `${options.url +
+                        (options.url.indexOf("?") == -1
+                            ? "?"
+                            : "&")}use_panels=True`;
                 } else {
                     $galaxy_main.attr("src", options.url);
                 }

client/galaxy/scripts/mvc/annotation.js

@@ -76,7 +76,7 @@ var AnnotationEditor = Backbone.View
 
         /** string rep */
         toString: function() {
-            return ["AnnotationEditor(", this.model + "", ")"].join("");
+            return ["AnnotationEditor(", `${this.model}`, ")"].join("");
         }
     });
 // =============================================================================

client/galaxy/scripts/mvc/base-mvc.js

@@ -154,7 +154,7 @@ var SessionStorageModel = Backbone.Model.extend({
         return JSON.stringify(this.toJSON(), null, "  ");
     },
     toString: function() {
-        return "SessionStorageModel(" + this.id + ")";
+        return `SessionStorageModel(${this.id})`;
     }
 });
 (() => {

client/galaxy/scripts/mvc/base/controlled-fetch-collection.js

@@ -151,7 +151,7 @@ var ControlledFetchCollection = Backbone.Collection.extend({
         var collection = this;
         var comparator = collection.comparators[order];
         if (_.isUndefined(comparator)) {
-            throw new Error("unknown order: " + order);
+            throw new Error(`unknown order: ${order}`);
         }
         // if( _.isUndefined( comparator ) ){ return; }
         if (comparator === collection.comparator) {

client/galaxy/scripts/mvc/citation/citation-model.js

@@ -34,10 +34,10 @@ var Citation = Backbone.Model.extend(baseMVC.LoggableMixin).extend({
         if (parsed.errors.length) {
             // the gen. form of these errors seems to be [ line, col, char, error message ]
             var errors = parsed.errors.reduce(
-                (all, current) => all + "; " + current
+                (all, current) => `${all}; ${current}`
             );
             // throw new Error( 'Error parsing bibtex: ' + errors );
-            this.log("Error parsing bibtex: " + errors);
+            this.log(`Error parsing bibtex: ${errors}`);
         }
 
         this._fields = {};
@@ -68,7 +68,7 @@ var BaseCitationCollection = Backbone.Collection
         _logNamespace: logNamespace,
 
         /** root api url */
-        urlRoot: Galaxy.root + "api",
+        urlRoot: `${Galaxy.root}api`,
         partial: true, // Assume some tools in history/workflow may not be properly annotated yet.
         model: Citation
     });
@@ -76,14 +76,14 @@ var BaseCitationCollection = Backbone.Collection
 var HistoryCitationCollection = BaseCitationCollection.extend({
     /** complete api url */
     url: function() {
-        return this.urlRoot + "/histories/" + this.history_id + "/citations";
+        return `${this.urlRoot}/histories/${this.history_id}/citations`;
     }
 });
 
 var ToolCitationCollection = BaseCitationCollection.extend({
     /** complete api url */
     url: function() {
-        return this.urlRoot + "/tools/" + this.tool_id + "/citations";
+        return `${this.urlRoot}/tools/${this.tool_id}/citations`;
     },
     partial: false // If a tool has citations, assume they are complete.
 });

client/galaxy/scripts/mvc/citation/citation-view.js

@@ -5,7 +5,7 @@ var CitationView = Backbone.View.extend({
     tagName: "div",
     className: "citations",
     render: function() {
-        this.$el.append("<p>" + this.formattedReference() + "</p>");
+        this.$el.append(`<p>${this.formattedReference()}</p>`);
         return this;
     },
     formattedReference: function() {
@@ -16,40 +16,35 @@ var CitationView = Backbone.View.extend({
         var ref = "";
         // Code inspired by...
         // https://github.com/vkaravir/bib-publication-list/blob/master/src/bib-publication-list.js
-        var authorsAndYear =
-            this._asSentence(
-                (fields.author ? fields.author : "") +
-                    (fields.year ? " (" + fields.year + ")" : "")
-            ) + " ";
+        var authorsAndYear = `${this._asSentence(
+            (fields.author ? fields.author : "") +
+                (fields.year ? ` (${fields.year})` : "")
+        )} `;
         var title = fields.title || "";
-        var pages = fields.pages ? "pp. " + fields.pages : "";
+        var pages = fields.pages ? `pp. ${fields.pages}` : "";
         var address = fields.address;
         if (entryType == "article") {
             var volume =
                 (fields.volume ? fields.volume : "") +
-                (fields.number ? " (" + fields.number + ")" : "") +
-                (pages ? ", " + pages : "");
-            ref =
-                authorsAndYear +
+                (fields.number ? ` (${fields.number})` : "") +
+                (pages ? `, ${pages}` : "");
+            ref = `${authorsAndYear +
                 this._asSentence(title) +
-                (fields.journal ? "In <em>" + fields.journal + ", " : "") +
+                (fields.journal ? `In <em>${fields.journal}, ` : "") +
                 this._asSentence(volume) +
-                this._asSentence(fields.address) +
-                "</em>";
+                this._asSentence(fields.address)}</em>`;
         } else if (entryType == "inproceedings" || entryType == "proceedings") {
-            ref =
-                authorsAndYear +
+            ref = `${authorsAndYear +
                 this._asSentence(title) +
-                (fields.booktitle ? "In <em>" + fields.booktitle + ", " : "") +
+                (fields.booktitle ? `In <em>${fields.booktitle}, ` : "") +
                 (pages ? pages : "") +
-                (address ? ", " + address : "") +
-                ".</em>";
+                (address ? `, ${address}` : "")}.</em>`;
         } else if (entryType == "mastersthesis" || entryType == "phdthesis") {
             ref =
                 authorsAndYear +
                 this._asSentence(title) +
-                (fields.howpublished ? fields.howpublished + ". " : "") +
-                (fields.note ? fields.note + "." : "");
+                (fields.howpublished ? `${fields.howpublished}. ` : "") +
+                (fields.note ? `${fields.note}.` : "");
         } else if (entryType == "techreport") {
             ref =
                 authorsAndYear +
@@ -62,61 +57,55 @@ var CitationView = Backbone.View.extend({
             entryType == "inbook" ||
             entryType == "incollection"
         ) {
-            ref = authorsAndYear + " " + this._formatBookInfo(fields);
+            ref = `${authorsAndYear} ${this._formatBookInfo(fields)}`;
         } else {
-            ref =
-                authorsAndYear +
-                " " +
-                this._asSentence(title) +
-                this._asSentence(fields.howpublished) +
-                this._asSentence(fields.note);
+            ref = `${authorsAndYear} ${this._asSentence(
+                title
+            )}${this._asSentence(fields.howpublished)}${this._asSentence(
+                fields.note
+            )}`;
         }
         var doiUrl = "";
         if (fields.doi) {
-            doiUrl = "http://dx.doi.org/" + fields.doi;
-            ref +=
-                '[<a href="' +
-                doiUrl +
-                '" target="_blank">doi:' +
-                fields.doi +
-                "</a>]";
+            doiUrl = `http://dx.doi.org/${fields.doi}`;
+            ref += `[<a href="${doiUrl}" target="_blank">doi:${fields.doi}</a>]`;
         }
         var url = fields.url || doiUrl;
         if (url) {
-            ref += '[<a href="' + url + '" target="_blank">Link</a>]';
+            ref += `[<a href="${url}" target="_blank">Link</a>]`;
         }
         return ref;
     },
     _formatBookInfo: function(fields) {
         var info = "";
         if (fields.chapter) {
-            info += fields.chapter + " in ";
+            info += `${fields.chapter} in `;
         }
         if (fields.title) {
-            info += "<em>" + fields.title + "</em>";
+            info += `<em>${fields.title}</em>`;
         }
         if (fields.editor) {
-            info += ", Edited by " + fields.editor + ", ";
+            info += `, Edited by ${fields.editor}, `;
         }
         if (fields.publisher) {
-            info += ", " + fields.publisher;
+            info += `, ${fields.publisher}`;
         }
         if (fields.pages) {
-            info += ", pp. " + fields.pages + "";
+            info += `, pp. ${fields.pages}`;
         }
         if (fields.series) {
-            info += ", <em>" + fields.series + "</em>";
+            info += `, <em>${fields.series}</em>`;
         }
         if (fields.volume) {
-            info += ", Vol." + fields.volume;
+            info += `, Vol.${fields.volume}`;
         }
         if (fields.issn) {
-            info += ", ISBN: " + fields.issn;
+            info += `, ISBN: ${fields.issn}`;
         }
-        return info + ".";
+        return `${info}.`;
     },
     _asSentence: function(str) {
-        return str && str.trim() ? str + ". " : "";
+        return str && str.trim() ? `${str}. ` : "";
     }
 });
 
@@ -139,7 +128,7 @@ var CitationListView = Backbone.View.extend({
         this.$(".citations-formatted").append(citationView.render().el);
         var rawTextarea = this.$(".citations-bibtex-text");
         rawTextarea.val(
-            rawTextarea.val() + "\n\r" + citation.attributes.content
+            `${rawTextarea.val()}\n\r${citation.attributes.content}`
         );
     },
 

client/galaxy/scripts/mvc/collection/base-creator.js

@@ -14,7 +14,7 @@ var CollectionCreatorMixin = {
                 .select();
         }
         if (clear) {
-            what = what || this.$("." + VALIDATION_CLASS);
+            what = what || this.$(`.${VALIDATION_CLASS}`);
             what.removeClass(VALIDATION_CLASS);
         } else {
             what.addClass(VALIDATION_CLASS);

client/galaxy/scripts/mvc/collection/collection-li-edit.js

@@ -17,8 +17,8 @@ var DCListItemEdit = DCListItemView.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "DCListItemEdit(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `DCListItemEdit(${modelString})`;
         }
     }
 );
@@ -39,8 +39,8 @@ var DCEListItemEdit = DCEListItemView.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "DCEListItemEdit(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `DCEListItemEdit(${modelString})`;
         }
     }
 );
@@ -82,8 +82,8 @@ var DatasetDCEListItemEdit = DATASET_LI_EDIT.DatasetListItemEdit.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "DatasetDCEListItemEdit(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `DatasetDCEListItemEdit(${modelString})`;
         }
     }
 );
@@ -103,8 +103,8 @@ var NestedDCDCEListItemEdit = DC_LI.NestedDCDCEListItemView.extend(
     /** @lends NestedDCDCEListItemEdit.prototype */ {
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "NestedDCDCEListItemEdit(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `NestedDCDCEListItemEdit(${modelString})`;
         }
     }
 );

client/galaxy/scripts/mvc/collection/collection-li.js

@@ -11,8 +11,8 @@ var ListItemView = LIST_ITEM.ListItemView;
  */
 var DCListItemView = FoldoutListItemView.extend(
     /** @lends DCListItemView.prototype */ {
-        className:
-            FoldoutListItemView.prototype.className + " dataset-collection",
+        className: `${FoldoutListItemView.prototype
+            .className} dataset-collection`,
         id: function() {
             return ["dataset_collection", this.model.get("id")].join("-");
         },
@@ -68,8 +68,8 @@ var DCListItemView = FoldoutListItemView.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "DCListItemView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `DCListItemView(${modelString})`;
         }
     }
 );
@@ -153,8 +153,8 @@ DCListItemView.prototype.templates = (() => {
 var DCEListItemView = ListItemView.extend(
     /** @lends DCEListItemView.prototype */ {
         /** add the DCE class to the list item */
-        className:
-            ListItemView.prototype.className + " dataset-collection-element",
+        className: `${ListItemView.prototype
+            .className} dataset-collection-element`,
 
         /** set up */
         initialize: function(attributes) {
@@ -168,8 +168,8 @@ var DCEListItemView = ListItemView.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "DCEListItemView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `DCEListItemView(${modelString})`;
         }
     }
 );
@@ -201,9 +201,8 @@ DCEListItemView.prototype.templates = (() => {
  */
 var DatasetDCEListItemView = DATASET_LI.DatasetListItemView.extend(
     /** @lends DatasetDCEListItemView.prototype */ {
-        className:
-            DATASET_LI.DatasetListItemView.prototype.className +
-            " dataset-collection-element",
+        className: `${DATASET_LI.DatasetListItemView.prototype
+            .className} dataset-collection-element`,
 
         /** set up */
         initialize: function(attributes) {
@@ -231,8 +230,8 @@ var DatasetDCEListItemView = DATASET_LI.DatasetListItemView.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "DatasetDCEListItemView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `DatasetDCEListItemView(${modelString})`;
         }
     }
 );
@@ -265,22 +264,22 @@ DatasetDCEListItemView.prototype.templates = (() => {
  */
 var NestedDCDCEListItemView = DCListItemView.extend(
     /** @lends NestedDCDCEListItemView.prototype */ {
-        className:
-            DCListItemView.prototype.className + " dataset-collection-element",
+        className: `${DCListItemView.prototype
+            .className} dataset-collection-element`,
 
         /** In this override, add the state as a class for use with state-based CSS */
         _swapNewRender: function($newRender) {
             DCListItemView.prototype._swapNewRender.call(this, $newRender);
             var state = this.model.get("state") || "ok";
-            this.$el.addClass("state-" + state);
+            this.$el.addClass(`state-${state}`);
             return this.$el;
         },
 
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "NestedDCDCEListItemView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `NestedDCDCEListItemView(${modelString})`;
         }
     }
 );

client/galaxy/scripts/mvc/collection/collection-model.js

@@ -124,15 +124,11 @@ var DatasetDCE = DATASET_MODEL.DatasetAssociation.extend(
                         "no endpoint for non-hdas within a collection yet"
                     );
                     // (a little silly since this api endpoint *also* points at hdas)
-                    return Galaxy.root + "api/datasets";
+                    return `${Galaxy.root}api/datasets`;
                 }
-                return (
-                    Galaxy.root +
-                    "api/histories/" +
-                    this.get("history_id") +
-                    "/contents/" +
-                    this.get("id")
-                );
+                return `${Galaxy.root}api/histories/${this.get(
+                    "history_id"
+                )}/contents/${this.get("id")}`;
             },
 
             defaults: _.extend(
@@ -142,14 +138,9 @@ var DatasetDCE = DATASET_MODEL.DatasetAssociation.extend(
             ),
 
             _downloadQueryParameters: function() {
-                return (
-                    "?to_ext=" +
-                    this.get("file_ext") +
-                    "&hdca_id=" +
-                    this.get("parent_hdca_id") +
-                    "&element_identifier=" +
-                    this.get("element_identifier")
-                );
+                return `?to_ext=${this.get("file_ext")}&hdca_id=${this.get(
+                    "parent_hdca_id"
+                )}&element_identifier=${this.get("element_identifier")}`;
             },
 
             // because all objects have constructors (as this hashmap would even if this next line wasn't present)
@@ -224,7 +215,7 @@ var DatasetCollection = Backbone.Model
             /** set up: create elements instance var and (on changes to elements) update them  */
             initialize: function(model, options) {
                 this.debug(
-                    this + "(DatasetCollection).initialize:",
+                    `${this}(DatasetCollection).initialize:`,
                     model,
                     options,
                     this
@@ -240,7 +231,7 @@ var DatasetCollection = Backbone.Model
             /** move elements model attribute to full collection */
             _createElementsModel: function() {
                 this.debug(
-                    this + "._createElementsModel",
+                    `${this}._createElementsModel`,
                     this.collectionClass,
                     this.get("elements"),
                     this.elements
@@ -337,7 +328,7 @@ var DatasetCollection = Backbone.Model
                     this.get("id"),
                     this.get("name") || this.get("element_identifier")
                 ];
-                return "DatasetCollection(" + idAndName.join(",") + ")";
+                return `DatasetCollection(${idAndName.join(",")})`;
             }
         }
     );
@@ -352,7 +343,7 @@ var ListDatasetCollection = DatasetCollection.extend(
 
         /** String representation. */
         toString: function() {
-            return "List" + DatasetCollection.prototype.toString.call(this);
+            return `List${DatasetCollection.prototype.toString.call(this)}`;
         }
     }
 );
@@ -364,7 +355,7 @@ var PairDatasetCollection = ListDatasetCollection.extend(
     /** @lends PairDatasetCollection.prototype */ {
         /** String representation. */
         toString: function() {
-            return "Pair" + DatasetCollection.prototype.toString.call(this);
+            return `Pair${DatasetCollection.prototype.toString.call(this)}`;
         }
     }
 );
@@ -396,7 +387,7 @@ var NestedDCDCE = DatasetCollection.extend(
             /** String representation. */
             toString: function() {
                 var objStr = this.object
-                    ? "" + this.object
+                    ? `${this.object}`
                     : this.get("element_identifier");
                 return ["NestedDCDCE(", objStr, ")"].join("");
             }
@@ -449,7 +440,7 @@ var NestedPairDCDCE = PairDatasetCollection.extend(
             /** String representation. */
             toString: function() {
                 var objStr = this.object
-                    ? "" + this.object
+                    ? `${this.object}`
                     : this.get("element_identifier");
                 return ["NestedPairDCDCE(", objStr, ")"].join("");
             }
@@ -512,7 +503,7 @@ var NestedListDCDCE = ListDatasetCollection.extend(
             /** String representation. */
             toString: function() {
                 var objStr = this.object
-                    ? "" + this.object
+                    ? `${this.object}`
                     : this.get("element_identifier");
                 return ["NestedListDCDCE(", objStr, ")"].join("");
             }

client/galaxy/scripts/mvc/collection/collection-view-edit.js

@@ -87,11 +87,9 @@ var CollectionViewEdit = _super.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "CollectionViewEdit(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `CollectionViewEdit(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -107,11 +105,9 @@ var ListCollectionViewEdit = CollectionViewEdit.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "ListCollectionViewEdit(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `ListCollectionViewEdit(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -123,11 +119,9 @@ var PairCollectionViewEdit = ListCollectionViewEdit.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "PairCollectionViewEdit(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `PairCollectionViewEdit(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -146,11 +140,9 @@ var NestedPairCollectionViewEdit = PairCollectionViewEdit.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "NestedPairCollectionViewEdit(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `NestedPairCollectionViewEdit(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -168,11 +160,9 @@ var ListOfPairsCollectionViewEdit = CollectionViewEdit.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "ListOfPairsCollectionViewEdit(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `ListOfPairsCollectionViewEdit(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -190,11 +180,9 @@ var ListOfListsCollectionViewEdit = CollectionViewEdit.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "ListOfListsCollectionViewEdit(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `ListOfListsCollectionViewEdit(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );

client/galaxy/scripts/mvc/collection/collection-view.js

@@ -17,7 +17,7 @@ var CollectionView = _super.extend(
         //MODEL is either a DatasetCollection (or subclass) or a DatasetCollectionElement (list of pairs)
         _logNamespace: logNamespace,
 
-        className: _super.prototype.className + " dataset-collection-panel",
+        className: `${_super.prototype.className} dataset-collection-panel`,
 
         /** sub view class used for datasets */
         DatasetDCEViewClass: DC_LI.DatasetDCEListItemView,
@@ -41,7 +41,7 @@ var CollectionView = _super.extend(
             this.parentName = attributes.parentName;
             /** foldout or drilldown */
             this.foldoutStyle = attributes.foldoutStyle || "foldout";
-            this.downloadUrl = this.model.attributes.url + "/download";
+            this.downloadUrl = `${this.model.attributes.url}/download`;
         },
 
         _queueNewRender: function($newRender, speed) {
@@ -143,11 +143,9 @@ var CollectionView = _super.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "CollectionView(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `CollectionView(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -210,11 +208,9 @@ var ListCollectionView = CollectionView.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "ListCollectionView(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `ListCollectionView(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -226,11 +222,9 @@ var PairCollectionView = ListCollectionView.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "PairCollectionView(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `PairCollectionView(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -248,11 +242,9 @@ var ListOfPairsCollectionView = CollectionView.extend(
         // ........................................................................ misc
         /** string rep */
         toString: function() {
-            return (
-                "ListOfPairsCollectionView(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `ListOfPairsCollectionView(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );
@@ -267,11 +259,9 @@ var ListOfListsCollectionView = CollectionView.extend({
 
     /** string rep */
     toString: function() {
-        return (
-            "ListOfListsCollectionView(" +
-            (this.model ? this.model.get("name") : "") +
-            ")"
-        );
+        return `ListOfListsCollectionView(${this.model
+            ? this.model.get("name")
+            : ""})`;
     }
 });
 

client/galaxy/scripts/mvc/collection/list-collection-creator.js

@@ -120,7 +120,7 @@ var DatasetCollectionElementView = Backbone.View
             ].join("");
 
             var response = prompt(
-                _l("Enter a new name for the element") + ":",
+                `${_l("Enter a new name for the element")}:`,
                 this.element.name
             );
 
@@ -307,7 +307,7 @@ var ListCollectionCreator = Backbone.View
             this.workingElements.forEach(element => {
                 var currName = element.name;
                 while (existingNames.hasOwnProperty(currName)) {
-                    currName = element.name + " (" + counter + ")";
+                    currName = `${element.name} (${counter})`;
                     counter += 1;
                     if (counter >= SAFETY) {
                         throw new Error(
@@ -542,16 +542,14 @@ var ListCollectionCreator = Backbone.View
      */
         createList: function(name) {
             if (!this.workingElements.length) {
-                var message = _l("No valid elements for final list") + ". ";
-                message +=
-                    '<a class="cancel-create" href="javascript:void(0);">' +
-                    _l("Cancel") +
-                    "</a> ";
+                var message = `${_l("No valid elements for final list")}. `;
+                message += `<a class="cancel-create" href="javascript:void(0);">${_l(
+                    "Cancel"
+                )}</a> `;
                 message += _l("or");
-                message +=
-                    ' <a class="reset" href="javascript:void(0);">' +
-                    _l("start over") +
-                    "</a>.";
+                message += ` <a class="reset" href="javascript:void(0);">${_l(
+                    "start over"
+                )}</a>.`;
                 this._showAlert(message);
                 return;
             }
@@ -630,17 +628,15 @@ var ListCollectionCreator = Backbone.View
                 var xhr = data.xhr;
                 var message = data.message;
                 if (xhr.readyState === 0 && xhr.status === 0) {
-                    content +=
-                        ": " +
-                        _l("Galaxy could not be reached and may be updating.") +
-                        _l(" Try again in a few minutes.");
+                    content += `: ${_l(
+                        "Galaxy could not be reached and may be updating."
+                    )}${_l(" Try again in a few minutes.")}`;
                 } else if (xhr.responseJSON) {
-                    content +=
-                        ":<br /><pre>" +
-                        JSON.stringify(xhr.responseJSON) +
-                        "</pre>";
+                    content += `:<br /><pre>${JSON.stringify(
+                        xhr.responseJSON
+                    )}</pre>`;
                 } else {
-                    content += ": " + message;
+                    content += `: ${message}`;
                 }
             }
             creator._showAlert(content, "alert-danger");

client/galaxy/scripts/mvc/collection/list-of-pairs-collection-creator.js

@@ -82,7 +82,7 @@ var PairView = Backbone.View.extend(baseMVC.LoggableMixin).extend({
 
     /** string rep */
     toString: function() {
-        return "PairView(" + this.pair.name + ")";
+        return `PairView(${this.pair.name})`;
     }
 });
 
@@ -155,8 +155,8 @@ function autoPairFnBuilder(options) {
 
             for (indexB = 0; indexB < listB.length; indexB++) {
                 var possible = listB[indexB];
-                this.debug(indexA + ":" + matchTo.name);
-                this.debug(indexB + ":" + possible.name);
+                this.debug(`${indexA}:${matchTo.name}`);
+                this.debug(`${indexB}:${possible.name}`);
 
                 // no matching with self
                 if (listA[indexA] !== listB[indexB]) {
@@ -573,7 +573,7 @@ var PairedCollectionCreator = Backbone.View
             // ensure existance and don't pair something with itself
             if (!(fwd && rev) || fwd === rev) {
                 throw new Error(
-                    "Bad pairing: " + [JSON.stringify(fwd), JSON.stringify(rev)]
+                    `Bad pairing: ${[JSON.stringify(fwd), JSON.stringify(rev)]}`
                 );
             }
             name = name || this._guessNameForPair(fwd, rev);
@@ -603,14 +603,14 @@ var PairedCollectionCreator = Backbone.View
                     revName = revName.replace(extension, "");
                 }
             }
-            return lcs || fwdName + " & " + revName;
+            return lcs || `${fwdName} & ${revName}`;
         },
 
         /** unpair a pair, removing it from paired, and adding the fwd,rev datasets back into unpaired */
         _unpair: function(pair, options) {
             options = options || {};
             if (!pair) {
-                throw new Error("Bad pair: " + JSON.stringify(pair));
+                throw new Error(`Bad pair: ${JSON.stringify(pair)}`);
             }
             this.paired = _.without(this.paired, pair);
             this._addToUnpaired(pair.forward);
@@ -661,11 +661,8 @@ var PairedCollectionCreator = Backbone.View
         createList: function(name) {
             var creator = this;
 
-            var url =
-                Galaxy.root +
-                "api/histories/" +
-                this.historyId +
-                "/contents/dataset_collections";
+            var url = `${Galaxy.root}api/histories/${this
+                .historyId}/contents/dataset_collections`;
 
             //TODO: use ListPairedCollection.create()
             var ajaxData = {
@@ -715,17 +712,15 @@ var PairedCollectionCreator = Backbone.View
             );
             if (xhr) {
                 if (xhr.readyState === 0 && xhr.status === 0) {
-                    content +=
-                        ": " +
-                        _l("Galaxy could not be reached and may be updating.") +
-                        _l(" Try again in a few minutes.");
+                    content += `: ${_l(
+                        "Galaxy could not be reached and may be updating."
+                    )}${_l(" Try again in a few minutes.")}`;
                 } else if (xhr.responseJSON) {
-                    content +=
-                        "<br /><pre>" +
-                        JSON.stringify(xhr.responseJSON) +
-                        "</pre>";
+                    content += `<br /><pre>${JSON.stringify(
+                        xhr.responseJSON
+                    )}</pre>`;
                 } else {
-                    content += ": " + message;
+                    content += `: ${message}`;
                 }
             }
             creator._showAlert(content, "alert-danger");
@@ -863,7 +858,7 @@ var PairedCollectionCreator = Backbone.View
             //TODO: to underscore template
             return (
                 $("<li/>")
-                    .attr("id", "dataset-" + dataset.id)
+                    .attr("id", `dataset-${dataset.id}`)
                     .addClass("dataset unpaired")
                     .attr("draggable", true)
                     .addClass(dataset.selected ? "selected" : "")
@@ -891,7 +886,7 @@ var PairedCollectionCreator = Backbone.View
         _renderUnpairedEmpty: function() {
             //this.debug( '-- renderUnpairedEmpty' );
             var $msg = $('<div class="empty-message"></div>').text(
-                "(" + _l("no remaining unpaired datasets") + ")"
+                `(${_l("no remaining unpaired datasets")})`
             );
             this.$(".unpaired-columns .paired-column .column-datasets")
                 .empty()
@@ -902,9 +897,7 @@ var PairedCollectionCreator = Backbone.View
         _renderUnpairedNotShown: function() {
             //this.debug( '-- renderUnpairedEmpty' );
             var $msg = $('<div class="empty-message"></div>').text(
-                "(" +
-                    _l("no datasets were found matching the current filters") +
-                    ")"
+                `(${_l("no datasets were found matching the current filters")})`
             );
             this.$(".unpaired-columns .paired-column .column-datasets")
                 .empty()
@@ -976,7 +969,7 @@ var PairedCollectionCreator = Backbone.View
         /** a message to display when none paired */
         _renderPairedEmpty: function() {
             var $msg = $('<div class="empty-message"></div>').text(
-                "(" + _l("no paired datasets yet") + ")"
+                `(${_l("no paired datasets yet")})`
             );
             this.$(".paired-columns .column-datasets")
                 .empty()
@@ -1058,7 +1051,7 @@ var PairedCollectionCreator = Backbone.View
                     .select();
             }
             if (clear) {
-                what = what || this.$("." + VALIDATION_CLASS);
+                what = what || this.$(`.${VALIDATION_CLASS}`);
                 what.removeClass(VALIDATION_CLASS);
             } else {
                 what.addClass(VALIDATION_CLASS);
@@ -1110,11 +1103,11 @@ var PairedCollectionCreator = Backbone.View
                 var msgClass = null;
                 if (this.paired.length) {
                     msgClass = "alert-success";
-                    message = this.paired.length + " " + _l("pairs created");
+                    message = `${this.paired.length} ${_l("pairs created")}`;
                     if (!this.unpaired.length) {
-                        message +=
-                            ": " +
-                            _l("all datasets have been successfully paired");
+                        message += `: ${_l(
+                            "all datasets have been successfully paired"
+                        )}`;
                         this.hideUnpaired();
                         this.$(".collection-name").focus();
                     }
@@ -1468,7 +1461,7 @@ var PairedCollectionCreator = Backbone.View
             }
 
             $unpaired.css({
-                height: unpairedHi + "px",
+                height: `${unpairedHi}px`,
                 flex: "0 0 auto"
             });
             return true;

client/galaxy/scripts/mvc/dataset/data.js

@@ -59,7 +59,7 @@ var Dataset = Backbone.Model.extend({
         return this.attributes.metadata.get(attribute);
     },
 
-    urlRoot: Galaxy.root + "api/datasets"
+    urlRoot: `${Galaxy.root}api/datasets`
 });
 
 /**
@@ -80,9 +80,9 @@ var TabularDataset = Dataset.extend({
         if (this.attributes.first_data_chunk) {
             this.attributes.offset = this.attributes.first_data_chunk.offset;
         }
-        this.attributes.chunk_url =
-            Galaxy.root + "dataset/display?dataset_id=" + this.id;
-        this.attributes.url_viz = Galaxy.root + "visualization";
+        this.attributes.chunk_url = `${Galaxy.root}dataset/display?dataset_id=${this
+            .id}`;
+        this.attributes.url_viz = `${Galaxy.root}visualization`;
     },
 
     /**
@@ -180,12 +180,10 @@ var TabularDatasetChunkedView = Backbone.View.extend({
         var header_container = $("<thead/>").appendTo(data_table);
         var header_row = $("<tr/>").appendTo(header_container);
         if (column_names) {
-            header_row.append(
-                "<th>" + column_names.join("</th><th>") + "</th>"
-            );
+            header_row.append(`<th>${column_names.join("</th><th>")}</th>`);
         } else {
             for (var j = 1; j <= this.model.get_metadata("columns"); j++) {
-                header_row.append("<th>" + j + "</th>");
+                header_row.append(`<th>${j}</th>`);
             }
         }
 
@@ -561,7 +559,7 @@ var TabularButtonTracksterView = Backbone.View.extend({
             // get target gene region
             var btn_viz_pars = {
                 dataset_id: this.dataset_id,
-                gene_region: chrom + ":" + start + "-" + end
+                gene_region: `${chrom}:${start}-${end}`
             };
 
             // get button position
@@ -572,14 +570,14 @@ var TabularButtonTracksterView = Backbone.View.extend({
             // update css
             $("#btn_viz").css({
                 position: "fixed",
-                top: top + "px",
-                left: left + "px"
+                top: `${top}px`,
+                left: `${left}px`
             });
             $("#btn_viz").off("click");
             $("#btn_viz").click(() => {
                 self.frame.add({
                     title: "Trackster",
-                    url: self.url_viz + "/trackster?" + $.param(btn_viz_pars)
+                    url: `${self.url_viz}/trackster?${$.param(btn_viz_pars)}`
                 });
             });
 

client/galaxy/scripts/mvc/dataset/dataset-choice.js

@@ -211,7 +211,7 @@ var DatasetChoice = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
 
     /** set up defaults, options, and listeners */
     initialize: function(attributes) {
-        this.debug(this + "(DatasetChoice).initialize:", attributes);
+        this.debug(`${this}(DatasetChoice).initialize:`, attributes);
 
         this.label = attributes.label !== undefined ? _l(attributes.label) : "";
         this.where = attributes.where;
@@ -265,7 +265,7 @@ var DatasetChoice = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
                         '<span class="subtitle">',
                         "<i><%- selected.misc_blurb %></i>",
                         "<i>",
-                        _l("format") + ": ",
+                        `${_l("format")}: `,
                         "<%- selected.file_ext %></i>",
                         "<i><%- selected.misc_info %></i>",
                         "</span>",
@@ -354,7 +354,7 @@ var DatasetChoice = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
     // ------------------------------------------------------------------------ misc
     /** string rep */
     toString: function() {
-        return "DatasetChoice(" + this.selected + ")";
+        return `DatasetChoice(${this.selected})`;
     }
 });
 
@@ -370,7 +370,7 @@ var DatasetChoice = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
  *          (e.g. { file_ext: _l( 'Format' ) }) - defaults are listed below
  */
 var MultiDatasetChoice = DatasetChoice.extend({
-    className: DatasetChoice.prototype.className + " multi",
+    className: `${DatasetChoice.prototype.className} multi`,
 
     /** default (dataset attribute key -> table header text) map of what cells to display in the table */
     cells: {
@@ -449,7 +449,7 @@ var MultiDatasetChoice = DatasetChoice.extend({
     // ------------------------------------------------------------------------ misc
     /** string rep */
     toString: function() {
-        return "DatasetChoice(" + this.selected + ")";
+        return `DatasetChoice(${this.selected})`;
     }
 });
 

client/galaxy/scripts/mvc/dataset/dataset-edit-attributes.js

@@ -24,18 +24,17 @@ var View = Backbone.View.extend({
     render: function() {
         var self = this;
         $.ajax({
-            url:
-                Galaxy.root +
-                "dataset/get_edit?dataset_id=" +
-                self.model.get("dataset_id"),
+            url: `${Galaxy.root}dataset/get_edit?dataset_id=${self.model.get(
+                "dataset_id"
+            )}`,
             success: function(response) {
                 !self.initial_message && self.message.update(response);
                 self.initial_message = true;
                 _.each(self.forms, (form, key) => {
-                    form.model.set("inputs", response[key + "_inputs"]);
+                    form.model.set("inputs", response[`${key}_inputs`]);
                     form.model.set(
                         "hide_operations",
-                        response[key + "_disable"]
+                        response[`${key}_disable`]
                     );
                     form.render();
                 });
@@ -61,7 +60,7 @@ var View = Backbone.View.extend({
         data.operation = operation;
         $.ajax({
             type: "PUT",
-            url: Galaxy.root + "dataset/set_edit",
+            url: `${Galaxy.root}dataset/set_edit`,
             data: data,
             success: function(response) {
                 self.message.update(response);

client/galaxy/scripts/mvc/dataset/dataset-error.js

@@ -13,27 +13,20 @@ var View = Backbone.View.extend({
 
     // Fetch data for the selected dataset and
     render: function() {
-        var data_url =
-            Galaxy.root + "api/datasets/" + this.model.get("dataset_id");
+        var data_url = `${Galaxy.root}api/datasets/${this.model.get(
+            "dataset_id"
+        )}`;
 
         var self = this;
 
         Utils.get({
             url: data_url,
             success: function(dataset) {
-                var job_url =
-                    Galaxy.root +
-                    "api/jobs/" +
-                    dataset.creating_job +
-                    "?full=True";
+                var job_url = `${Galaxy.root}api/jobs/${dataset.creating_job}?full=True`;
                 Utils.get({
                     url: job_url,
                     success: function(job) {
-                        var job_url =
-                            Galaxy.root +
-                            "api/jobs/" +
-                            dataset.creating_job +
-                            "?full=True";
+                        var job_url = `${Galaxy.root}api/jobs/${dataset.creating_job}?full=True`;
                         self.render_error_page(self, dataset, job);
                     },
                     error: function(response) {
@@ -70,14 +63,12 @@ var View = Backbone.View.extend({
         self.$el.empty().append(self._templateHeader());
         self.$el.append("<h2>Dataset Error</h2>");
         self.$el.append(
-            "<p>An error occured while running the tool <b>" +
-                job.tool_id +
-                "</b>.</p>"
+            `<p>An error occured while running the tool <b>${job.tool_id}</b>.</p>`
         );
         self.$el.append(
             "<p>Tool execution generated the following messages:</p>"
         );
-        self.$el.append('<pre class="code">' + job.stderr + "</pre>");
+        self.$el.append(`<pre class="code">${job.stderr}</pre>`);
         self.$el.append("<h2>Report This Error</pre>");
         self.$el.append(
             "<p>Usually the local Galaxy administrators regularly review errors that occur on the server. However, if you would like to provide additional information (such as what you were trying to do when the error occurred) and a contact e-mail address, we will be better able to investigate your problem and get back to you.</p>"
@@ -158,7 +149,7 @@ var View = Backbone.View.extend({
                     floating: "clear",
                     onclick: function() {
                         var form_data = form.data.create();
-                        var url = Galaxy.root + "api/jobs/" + job.id + "/error";
+                        var url = `${Galaxy.root}api/jobs/${job.id}/error`;
                         form_data.dataset_id = dataset.id;
                         self.submit(form_data, url);
                     }

client/galaxy/scripts/mvc/dataset/dataset-li-edit.js

@@ -59,10 +59,8 @@ var DatasetListItemEdit = _super.extend(
 
             var editBtnData = {
                 title: _l("Edit attributes"),
-                href:
-                    Galaxy.root +
-                    "datasets/edit?dataset_id=" +
-                    this.model.attributes.id,
+                href: `${Galaxy.root}datasets/edit?dataset_id=${this.model
+                    .attributes.id}`,
                 faIcon: "fa-pencil",
                 classes: "edit-btn",
                 onclick: function(ev) {
@@ -153,11 +151,9 @@ var DatasetListItemEdit = _super.extend(
             var self = this;
 
             var parseToolBuild = data => {
-                var helpString =
-                    '<div id="thdiv-' + datasetID + '" class="toolhelp">';
+                var helpString = `<div id="thdiv-${datasetID}" class="toolhelp">`;
                 if (data.name && data.help) {
-                    helpString +=
-                        "<strong>Tool help for " + data.name + "</strong><hr/>";
+                    helpString += `<strong>Tool help for ${data.name}</strong><hr/>`;
                     helpString += data.help;
                 } else {
                     helpString +=
@@ -168,7 +164,7 @@ var DatasetListItemEdit = _super.extend(
             };
             var parseToolID = data => {
                 $.ajax({
-                    url: Galaxy.root + "api/tools/" + data.tool_id + "/build"
+                    url: `${Galaxy.root}api/tools/${data.tool_id}/build`
                 })
                     .done(data => {
                         parseToolBuild(data);
@@ -186,21 +182,19 @@ var DatasetListItemEdit = _super.extend(
                 href: "#",
                 faIcon: "fa-question",
                 onclick: function() {
-                    var divString = "thdiv-" + datasetID;
+                    var divString = `thdiv-${datasetID}`;
                     if (self.$el.find(".toolhelp").length > 0) {
                         self.$el.find(".toolhelp").toggle();
                     } else {
                         $.ajax({
-                            url: Galaxy.root + "api/jobs/" + jobID
+                            url: `${Galaxy.root}api/jobs/${jobID}`
                         })
                             .done(data => {
                                 parseToolID(data);
                             })
                             .fail(() => {
                                 console.log(
-                                    'Failed at recovering job information from the  Galaxy API for job id "' +
-                                        jobID +
-                                        '".'
+                                    `Failed at recovering job information from the  Galaxy API for job id "${jobID}".`
                                 );
                             });
                     }
@@ -242,10 +236,8 @@ var DatasetListItemEdit = _super.extend(
             var self = this;
             return faIconButton({
                 title: _l("View or report this error"),
-                href:
-                    Galaxy.root +
-                    "datasets/error?dataset_id=" +
-                    this.model.attributes.id,
+                href: `${Galaxy.root}datasets/error?dataset_id=${this.model
+                    .attributes.id}`,
                 classes: "report-error-btn",
                 faIcon: "fa-bug",
                 onclick: function(ev) {
@@ -453,8 +445,8 @@ var DatasetListItemEdit = _super.extend(
         // ......................................................................... misc
         /** string rep */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "HDAEditView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `HDAEditView(${modelString})`;
         }
     }
 );

client/galaxy/scripts/mvc/dataset/dataset-li.js

@@ -20,7 +20,7 @@ var DatasetListItemView = _super.extend(
     /** @lends DatasetListItemView.prototype */ {
         _logNamespace: logNamespace,
 
-        className: _super.prototype.className + " dataset",
+        className: `${_super.prototype.className} dataset`,
         //TODO:?? doesn't exactly match an hda's type_id
         id: function() {
             return ["dataset", this.model.get("id")].join("-");
@@ -31,7 +31,7 @@ var DatasetListItemView = _super.extend(
             if (attributes.logger) {
                 this.logger = this.model.logger = attributes.logger;
             }
-            this.log(this + ".initialize:", attributes);
+            this.log(`${this}.initialize:`, attributes);
             _super.prototype.initialize.call(this, attributes);
 
             /** where should pages from links be displayed? (default to new tab/window) */
@@ -117,7 +117,7 @@ var DatasetListItemView = _super.extend(
         _swapNewRender: function($newRender) {
             _super.prototype._swapNewRender.call(this, $newRender);
             if (this.model.has("state")) {
-                this.$el.addClass("state-" + this.model.get("state"));
+                this.$el.addClass(`state-${this.model.get("state")}`);
             }
             return this.$el;
         },
@@ -314,7 +314,7 @@ var DatasetListItemView = _super.extend(
                     '<a class="download-btn icon-btn" ',
                     'href="',
                     this.model.urls.download,
-                    '" title="' + _l("Download") + '" download>',
+                    `" title="${_l("Download")}" download>`,
                     '<span class="fa fa-floppy-o"></span>',
                     "</a>"
                 ].join("")
@@ -328,11 +328,11 @@ var DatasetListItemView = _super.extend(
                 [
                     '<div class="metafile-dropdown dropdown">',
                     '<a class="download-btn icon-btn" href="javascript:void(0)" data-toggle="dropdown"',
-                    ' title="' + _l("Download") + '">',
+                    ` title="${_l("Download")}">`,
                     '<span class="fa fa-floppy-o"></span>',
                     "</a>",
                     '<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">',
-                    '<li><a href="' + urls.download + '" download>',
+                    `<li><a href="${urls.download}" download>`,
                     _l("Download dataset"),
                     "</a></li>",
                     _.map(this.model.get("meta_files"), meta_file =>
@@ -381,8 +381,8 @@ var DatasetListItemView = _super.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "DatasetListItemView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `DatasetListItemView(${modelString})`;
         }
     }
 );

client/galaxy/scripts/mvc/dataset/dataset-list.js

@@ -17,7 +17,7 @@ var DatasetList = _super.extend(
 
         /** class to use for constructing the sub-views */
         viewClass: DATASET_LI.DatasetListItemView,
-        className: _super.prototype.className + " dataset-list",
+        className: `${_super.prototype.className} dataset-list`,
 
         /** string to no hdas match the search terms */
         noneFoundMsg: _l("No matching datasets found"),
@@ -32,7 +32,7 @@ var DatasetList = _super.extend(
 
         /** Return a string rep of the history */
         toString: function() {
-            return "DatasetList(" + this.collection + ")";
+            return `DatasetList(${this.collection})`;
         }
     }
 );

client/galaxy/scripts/mvc/dataset/dataset-model.js

@@ -41,7 +41,7 @@ var DatasetAssociation = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
 
             /** instance vars and listeners */
             initialize: function(attributes, options) {
-                this.debug(this + "(Dataset).initialize", attributes, options);
+                this.debug(`${this}(Dataset).initialize`, attributes, options);
 
                 //!! this state is not in trans.app.model.Dataset.states - set it here -
                 if (!this.get("accessible")) {
@@ -61,22 +61,15 @@ var DatasetAssociation = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
                     return {};
                 }
                 var urls = {
-                    purge: "datasets/" + id + "/purge_async",
-                    display: "datasets/" + id + "/display/?preview=True",
-                    edit: "datasets/edit?dataset_id=" + id,
-                    download:
-                        "datasets/" +
-                        id +
-                        "/display" +
-                        this._downloadQueryParameters(),
-                    report_error: "dataset/errors?id=" + id,
-                    rerun: "tool_runner/rerun?id=" + id,
-                    show_params: "datasets/" + id + "/show_params",
+                    purge: `datasets/${id}/purge_async`,
+                    display: `datasets/${id}/display/?preview=True`,
+                    edit: `datasets/edit?dataset_id=${id}`,
+                    download: `datasets/${id}/display${this._downloadQueryParameters()}`,
+                    report_error: `dataset/errors?id=${id}`,
+                    rerun: `tool_runner/rerun?id=${id}`,
+                    show_params: `datasets/${id}/show_params`,
                     visualization: "visualization",
-                    meta_download:
-                        "dataset/get_metadata_file?hda_id=" +
-                        id +
-                        "&metadata_name="
+                    meta_download: `dataset/get_metadata_file?hda_id=${id}&metadata_name=`
                 };
                 _.each(urls, (value, key) => {
                     urls[key] = Galaxy.root + value;
@@ -86,7 +79,7 @@ var DatasetAssociation = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
             },
 
             _downloadQueryParameters: function() {
-                return "?to_ext=" + this.get("file_ext");
+                return `?to_ext=${this.get("file_ext")}`;
             },
 
             /** set up any event listeners
@@ -95,7 +88,7 @@ var DatasetAssociation = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
             _setUpListeners: function() {
                 // if the state has changed and the new state is a ready state, fire an event
                 this.on("change:state", function(currModel, newState) {
-                    this.log(this + " has changed state:", currModel, newState);
+                    this.log(`${this} has changed state:`, currModel, newState);
                     if (this.inReadyState()) {
                         this.trigger(
                             "state:ready",
@@ -272,9 +265,9 @@ var DatasetAssociation = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
             toString: function() {
                 var nameAndId = this.get("id") || "";
                 if (this.get("name")) {
-                    nameAndId = '"' + this.get("name") + '",' + nameAndId;
+                    nameAndId = `"${this.get("name")}",${nameAndId}`;
                 }
-                return "Dataset(" + nameAndId + ")";
+                return `Dataset(${nameAndId})`;
             }
         }
     )
@@ -292,7 +285,7 @@ var DatasetAssociationCollection = Backbone.Collection
             model: DatasetAssociation,
 
             /** root api url */
-            urlRoot: Galaxy.root + "api/datasets",
+            urlRoot: `${Galaxy.root}api/datasets`,
 
             /** url fn */
             url: function() {

client/galaxy/scripts/mvc/form/form-data.js

@@ -13,13 +13,9 @@ var Manager = Backbone.Model.extend({
             var id = $(this).attr("id");
             var field = self.app.field_list[id];
             if (field) {
-                sum +=
-                    id +
-                    ":" +
-                    JSON.stringify(field.value && field.value()) +
-                    ":" +
-                    field.collapsed +
-                    ";";
+                sum += `${id}:${JSON.stringify(
+                    field.value && field.value()
+                )}:${field.collapsed};`;
             }
         });
         return sum;
@@ -77,7 +73,7 @@ var Manager = Backbone.Model.extend({
                             var index = 0;
                             for (var i in block_indices) {
                                 convert(
-                                    flat_id + "_" + index++,
+                                    `${flat_id}_${index++}`,
                                     node[block_prefix + block_indices[i]]
                                 );
                             }
@@ -85,7 +81,7 @@ var Manager = Backbone.Model.extend({
                         case "conditional":
                             var value = self.app.field_list[input.id].value();
                             add(
-                                flat_id + "|" + input.test_param.name,
+                                `${flat_id}|${input.test_param.name}`,
                                 input.id,
                                 value
                             );
@@ -93,7 +89,7 @@ var Manager = Backbone.Model.extend({
                             if (selectedCase != -1) {
                                 convert(
                                     flat_id,
-                                    head[input.id + "-section-" + selectedCase]
+                                    head[`${input.id}-section-${selectedCase}`]
                                 );
                             }
                             break;
@@ -236,18 +232,18 @@ var visitInputs = (inputs, callback, prefix, context) => {
     for (var key in inputs) {
         var node = inputs[key];
         node.name = node.name || key;
-        var name = prefix ? prefix + "|" + node.name : node.name;
+        var name = prefix ? `${prefix}|${node.name}` : node.name;
         switch (node.type) {
             case "repeat":
                 _.each(node.cache, (cache, j) => {
-                    visitInputs(cache, callback, name + "_" + j, context);
+                    visitInputs(cache, callback, `${name}_${j}`, context);
                 });
                 break;
             case "conditional":
                 if (node.test_param) {
                     callback(
                         node.test_param,
-                        name + "|" + node.test_param.name,
+                        `${name}|${node.test_param.name}`,
                         context
                     );
                     var selectedCase = matchCase(node, node.test_param.value);
@@ -260,16 +256,12 @@ var visitInputs = (inputs, callback, prefix, context) => {
                         );
                     } else {
                         Galaxy.emit.debug(
-                            "form-data::visitInputs() - Invalid case for " +
-                                name +
-                                "."
+                            `form-data::visitInputs() - Invalid case for ${name}.`
                         );
                     }
                 } else {
                     Galaxy.emit.debug(
-                        "form-data::visitInputs() - Conditional test parameter missing for " +
-                            name +
-                            "."
+                        `form-data::visitInputs() - Conditional test parameter missing for ${name}.`
                     );
                 }
                 break;

client/galaxy/scripts/mvc/form/form-input.js

@@ -81,11 +81,8 @@ export default Backbone.View.extend({
         $(".tooltip").hide();
         var help_text = this.model.get("help", "");
         var help_argument = this.model.get("argument");
-        if (
-            help_argument &&
-            help_text.indexOf("(" + help_argument + ")") == -1
-        ) {
-            help_text += " (" + help_argument + ")";
+        if (help_argument && help_text.indexOf(`(${help_argument})`) == -1) {
+            help_text += ` (${help_argument})`;
         }
         this.$info.html(help_text);
         // render visibility
@@ -129,10 +126,10 @@ export default Backbone.View.extend({
             this.$collapsible_icon
                 .removeClass()
                 .addClass("icon")
-                .addClass(this.model.get("cls_" + collapsible_state))
+                .addClass(this.model.get(`cls_${collapsible_state}`))
                 .attr(
                     "data-original-title",
-                    this.model.get("text_" + collapsible_state)
+                    this.model.get(`text_${collapsible_state}`)
                 )
                 .tooltip({ placement: "bottom" });
         } else {

client/galaxy/scripts/mvc/form/form-parameters.js

@@ -46,7 +46,7 @@ export default Backbone.Model.extend({
                 : this._fieldText(input_def);
             Galaxy.emit.debug(
                 "form-parameters::_addRow()",
-                "Auto matched field type (" + input_def.type + ")."
+                `Auto matched field type (${input_def.type}).`
             );
         }
         input_def.value === undefined && (input_def.value = null);
@@ -57,7 +57,7 @@ export default Backbone.Model.extend({
     /** Data input field */
     _fieldData: function(input_def) {
         return new SelectContent.View({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             extensions: input_def.extensions,
             optional: input_def.optional,
             multiple: input_def.multiple,
@@ -105,7 +105,7 @@ export default Backbone.Model.extend({
 
         // create select field
         return new SelectClass.View({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             data: data,
             error_text: input_def.error_text || "No options available",
             readonly: input_def.readonly,
@@ -126,7 +126,7 @@ export default Backbone.Model.extend({
 
         // create drill down field
         return new Ui.Drilldown.View({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             data: input_def.options,
             display: input_def.display,
             optional: input_def.optional,
@@ -157,7 +157,7 @@ export default Backbone.Model.extend({
         }
         // create input element
         return new Ui.Input({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             type: input_def.type,
             area: input_def.area,
             readonly: input_def.readonly,
@@ -170,7 +170,7 @@ export default Backbone.Model.extend({
     /** Slider field */
     _fieldSlider: function(input_def) {
         return new Ui.Slider.View({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             precise: input_def.type == "float",
             is_workflow: input_def.is_workflow,
             min: input_def.min,
@@ -182,7 +182,7 @@ export default Backbone.Model.extend({
     /** Hidden field */
     _fieldHidden: function(input_def) {
         return new Ui.Hidden({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             info: input_def.info
         });
     },
@@ -190,7 +190,7 @@ export default Backbone.Model.extend({
     /** Boolean field */
     _fieldBoolean: function(input_def) {
         return new Ui.RadioButton.View({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             data: [
                 { label: "Yes", value: "true" },
                 { label: "No", value: "false" }
@@ -202,7 +202,7 @@ export default Backbone.Model.extend({
     /** Color picker field */
     _fieldColor: function(input_def) {
         return new ColorPicker({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             onchange: input_def.onchange
         });
     },
@@ -210,7 +210,7 @@ export default Backbone.Model.extend({
     /** Library dataset field */
     _fieldLibrary: function(input_def) {
         return new SelectLibrary.View({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             optional: input_def.optional,
             multiple: input_def.multiple,
             onchange: input_def.onchange
@@ -220,7 +220,7 @@ export default Backbone.Model.extend({
     /** FTP file field */
     _fieldFtp: function(input_def) {
         return new SelectFtp.View({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             optional: input_def.optional,
             multiple: input_def.multiple,
             onchange: input_def.onchange
@@ -232,7 +232,7 @@ export default Backbone.Model.extend({
     _fieldGenomeSpace: function(input_def) {
         var self = this;
         return new SelectGenomeSpace.View({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             onchange: function() {
                 self.app.trigger("change");
             }
@@ -242,7 +242,7 @@ export default Backbone.Model.extend({
     /** Upload file field */
     _fieldUpload: function(input_def) {
         return new Ui.Upload({
-            id: "field-" + input_def.id,
+            id: `field-${input_def.id}`,
             onchange: input_def.onchange
         });
     }

client/galaxy/scripts/mvc/form/form-repeat.js

@@ -13,8 +13,8 @@ var View = Backbone.View.extend({
         });
         this.button_new = new Ui.ButtonIcon({
             icon: "fa-plus",
-            title: "Insert " + this.options.title,
-            tooltip: "Add new " + this.options.title + " block",
+            title: `Insert ${this.options.title}`,
+            tooltip: `Add new ${this.options.title} block`,
             cls: "ui-button-icon ui-clear-float form-repeat-add",
             onclick: function() {
                 options.onnew && options.onnew();
@@ -71,7 +71,7 @@ var View = Backbone.View.extend({
             Galaxy.emit.debug("form-repeat::del()", "Invalid repeat block id.");
             return;
         }
-        this.$list.find("#" + id).remove();
+        this.$list.find(`#${id}`).remove();
         delete this.list[id];
         this.button_new.enable();
         this._refresh();
@@ -103,7 +103,7 @@ var View = Backbone.View.extend({
         var index = 0;
         for (var id in this.list) {
             var portlet = this.list[id];
-            portlet.title(++index + ": " + this.options.title);
+            portlet.title(`${++index}: ${this.options.title}`);
             portlet[
                 this.size() > this.options.min
                     ? "showOperation"

client/galaxy/scripts/mvc/form/form-section.js

@@ -59,9 +59,7 @@ var View = Backbone.View.extend({
                 var selectedCase = self.app.data.matchCase(input_def, value);
                 for (var i in input_def.cases) {
                     var case_def = input_def.cases[i];
-                    var section_row = self.$(
-                        "#" + input_def.id + "-section-" + i
-                    );
+                    var section_row = self.$(`#${input_def.id}-section-${i}`);
                     var nonhidden = false;
                     for (var j in case_def.inputs) {
                         if (!case_def.inputs[j].hidden) {
@@ -85,7 +83,7 @@ var View = Backbone.View.extend({
             });
             this._append(
                 sub_section.$el.addClass("ui-form-section"),
-                input_def.id + "-section-" + i
+                `${input_def.id}-section-${i}`
             );
         }
 
@@ -111,7 +109,7 @@ var View = Backbone.View.extend({
 
         // helper function to create new repeat blocks
         function create(inputs) {
-            var sub_section_id = input_def.id + "-section-" + block_index++;
+            var sub_section_id = `${input_def.id}-section-${block_index++}`;
             var sub_section = new View(self.app, { inputs: inputs });
             repeat.add({
                 id: sub_section_id,
@@ -167,7 +165,7 @@ var View = Backbone.View.extend({
                 .html(input_def.help)
         );
         this.app.on("expand", input_id => {
-            portlet.$("#" + input_id).length > 0 && portlet.expand();
+            portlet.$(`#${input_id}`).length > 0 && portlet.expand();
         });
         this._append(portlet.$el, input_def.id);
     },

client/galaxy/scripts/mvc/form/form-view.js

@@ -53,7 +53,7 @@ export default Backbone.View.extend({
                         field.trigger("change");
                         Galaxy.emit.debug(
                             "form-view::update()",
-                            "Updating options for " + input_id
+                            `Updating options for ${input_id}`
                         );
                     }
                 }

client/galaxy/scripts/mvc/form/form-wrapper.js

@@ -41,7 +41,7 @@ var View = Backbone.View.extend({
             .fail(response => {
                 self.$el.empty().append(
                     new Ui.Message({
-                        message: "Failed to load resource " + self.url + ".",
+                        message: `Failed to load resource ${self.url}.`,
                         status: "danger",
                         persistent: true
                     }).$el
@@ -64,11 +64,9 @@ var View = Backbone.View.extend({
                     persistent: false
                 };
                 if (self.redirect) {
-                    window.location =
-                        Galaxy.root +
-                        self.redirect +
-                        "?" +
-                        $.param(success_message);
+                    window.location = `${Galaxy.root + self.redirect}?${$.param(
+                        success_message
+                    )}`;
                 } else {
                     form.data.matchModel(response, (input, input_id) => {
                         form.field_list[input_id].value(input.value);

client/galaxy/scripts/mvc/grid/grid-model.js

@@ -104,19 +104,15 @@ export default Backbone.Model.extend({
         // Add filter arguments to data, placing "f-" in front of all arguments.
         var self = this;
         _.each(_.pairs(self.attributes.filters), k => {
-            url_data["f-" + k[0]] = k[1];
+            url_data[`f-${k[0]}`] = k[1];
         });
         return url_data;
     },
 
     // Return URL for obtaining a new grid
     get_url: function(args) {
-        return (
-            this.get("url_base") +
-            "?" +
-            $.param(this.get_url_data()) +
-            "&" +
-            $.param(args)
-        );
+        return `${this.get("url_base")}?${$.param(
+            this.get_url_data()
+        )}&${$.param(args)}`;
     }
 });

client/galaxy/scripts/mvc/grid/grid-shared.js

@@ -8,13 +8,9 @@ var View = Backbone.View.extend({
         this.item = this.model.get("item");
         this.title = this.model.get("plural");
         $.ajax({
-            url:
-                Galaxy.root +
-                this.item +
-                "/" +
-                this.model.get("action_id") +
-                "?" +
-                $.param(Galaxy.params),
+            url: `${Galaxy.root + this.item}/${this.model.get(
+                "action_id"
+            )}?${$.param(Galaxy.params)}`,
             success: function(response) {
                 response["dict_format"] = true;
                 self.model.set(response);
@@ -32,11 +28,9 @@ var View = Backbone.View.extend({
     _templateShared: function() {
         var self = this;
         var $tmpl = $(
-            "<div>" +
-                "<h2>" +
-                this.model.get("plural") +
-                " shared with you by others</h2>" +
-                "</div>"
+            `<div><h2>${this.model.get(
+                "plural"
+            )} shared with you by others</h2></div>`
         );
         var options = this.model.attributes;
         if (options.shared_by_others && options.shared_by_others.length > 0) {
@@ -49,34 +43,20 @@ var View = Backbone.View.extend({
                     "</table>"
             );
             _.each(options.shared_by_others, (it, index) => {
-                var display_url =
-                    Galaxy.root +
-                    self.item +
-                    "/display_by_username_and_slug?username=" +
-                    it.username +
-                    "&slug=" +
-                    it.slug;
+                var display_url = `${Galaxy.root +
+                    self.item}/display_by_username_and_slug?username=${it.username}&slug=${it.slug}`;
                 $table.append(
-                    "<tr>" +
-                        "<td>" +
-                        '<a href="' +
-                        display_url +
-                        '">' +
-                        _.escape(it.title) +
-                        "</a>" +
-                        "</td>" +
-                        "<td>" +
-                        _.escape(it.username) +
-                        "</td>" +
-                        "</tr>"
+                    `<tr><td><a href="${display_url}">${_.escape(
+                        it.title
+                    )}</a></td><td>${_.escape(it.username)}</td></tr>`
                 );
             });
             $tmpl.append($table);
         } else {
             $tmpl.append(
-                "No " +
-                    this.model.get("plural").toLowerCase() +
-                    " have been shared with you."
+                `No ${this.model
+                    .get("plural")
+                    .toLowerCase()} have been shared with you.`
             );
         }
         return $tmpl;

client/galaxy/scripts/mvc/grid/grid-template.js

@@ -8,31 +8,16 @@ export default {
         if (options.embedded) {
             tmpl = this.grid_header(options) + this.grid_table(options);
         } else {
-            tmpl =
-                '<div class="loading-elt-overlay"></div>' +
-                "<table>" +
-                "<tr>" +
-                '<td width="75%">' +
-                this.grid_header(options) +
-                "</td>" +
-                "<td></td>" +
-                "<td></td>" +
-                "</tr>" +
-                "<tr>" +
-                '<td width="100%" id="grid-message" valign="top"></td>' +
-                "<td></td>" +
-                "<td></td>" +
-                "</tr>" +
-                "</table>" +
-                this.grid_table(options);
+            tmpl = `<div class="loading-elt-overlay"></div><table><tr><td width="75%">${this.grid_header(
+                options
+            )}</td><td></td><td></td></tr><tr><td width="100%" id="grid-message" valign="top"></td><td></td><td></td></tr></table>${this.grid_table(
+                options
+            )}`;
         }
 
         // add info text
         if (options.info_text) {
-            tmpl +=
-                '<br><div class="toolParamHelp" style="clear: both;">' +
-                options.info_text +
-                "</div>";
+            tmpl += `<br><div class="toolParamHelp" style="clear: both;">${options.info_text}</div>`;
         }
 
         // return
@@ -56,7 +41,7 @@ export default {
     grid_header: function(options) {
         var tmpl = '<div class="grid-header">';
         if (!options.embedded) {
-            tmpl += "<h2>" + options.title + "</h2>";
+            tmpl += `<h2>${options.title}</h2>`;
         }
         if (options.global_actions) {
             tmpl += '<ul class="manage-table-actions">';
@@ -68,16 +53,7 @@ export default {
             }
             for (var i in options.global_actions) {
                 var action = options.global_actions[i];
-                tmpl +=
-                    "<li>" +
-                    '<a class="action-button use-target" target="' +
-                    action.target +
-                    '" href="' +
-                    action.url_args +
-                    '" onclick="return false;" >' +
-                    action.label +
-                    "</a>" +
-                    "</li>";
+                tmpl += `<li><a class="action-button use-target" target="${action.target}" href="${action.url_args}" onclick="return false;" >${action.label}</a></li>`;
             }
             if (show_popup) {
                 tmpl += "</div>";
@@ -116,24 +92,13 @@ export default {
         for (var i in options.columns) {
             var column = options.columns[i];
             if (column.visible) {
-                tmpl += '<th id="' + column.key + '-header">';
+                tmpl += `<th id="${column.key}-header">`;
                 if (column.href) {
-                    tmpl +=
-                        '<a href="' +
-                        column.href +
-                        '" class="sort-link" sort_key="' +
-                        column.key +
-                        '">' +
-                        column.label +
-                        "</a>";
+                    tmpl += `<a href="${column.href}" class="sort-link" sort_key="${column.key}">${column.label}</a>`;
                 } else {
                     tmpl += column.label;
                 }
-                tmpl +=
-                    '<span class="sort-arrow">' +
-                    column.extra +
-                    "</span>" +
-                    "</th>";
+                tmpl += `<span class="sort-arrow">${column.extra}</span></th>`;
             }
         }
 
@@ -163,7 +128,7 @@ export default {
             // encode ids
             var item = options.items[i];
             var encoded_id = item.encode_id;
-            var popupmenu_id = "grid-" + i + "-popup";
+            var popupmenu_id = `grid-${i}-popup`;
 
             // Tag current
             tmpl += "<tr ";
@@ -174,14 +139,7 @@ export default {
 
             // Item selection column
             if (options.show_item_checkboxes) {
-                tmpl +=
-                    '<td style="width: 1.5em;">' +
-                    '<input type="checkbox" name="id" value="' +
-                    encoded_id +
-                    '" id="' +
-                    encoded_id +
-                    '" class="grid-row-select-checkbox" />' +
-                    "</td>";
+                tmpl += `<td style="width: 1.5em;"><input type="checkbox" name="id" value="${encoded_id}" id="${encoded_id}" class="grid-row-select-checkbox" /></td>`;
             }
 
             // Data columns
@@ -211,7 +169,7 @@ export default {
                     var id = "";
                     var cls = "";
                     if (column.attach_popup) {
-                        id = "grid-" + i + "-popup";
+                        id = `grid-${i}-popup`;
                         cls = "menubutton";
                         if (link != "") {
                             cls += " split";
@@ -220,43 +178,20 @@ export default {
                     }
 
                     // Check for row wrapping
-                    tmpl += "<td " + nowrap + ">";
+                    tmpl += `<td ${nowrap}>`;
 
                     // Link
                     if (link) {
                         if (options.operations.length != 0) {
-                            tmpl +=
-                                '<div id="' +
-                                id +
-                                '" class="' +
-                                cls +
-                                '" style="float: left;">';
+                            tmpl += `<div id="${id}" class="${cls}" style="float: left;">`;
                         }
-                        tmpl +=
-                            '<a class="menubutton-label use-target" target="' +
-                            target +
-                            '" href="' +
-                            link +
-                            '" onclick="return false;">' +
-                            value +
-                            "</a>";
+                        tmpl += `<a class="menubutton-label use-target" target="${target}" href="${link}" onclick="return false;">${value}</a>`;
                         if (options.operations.length != 0) {
                             tmpl += "</div>";
                         }
                     } else {
-                        tmpl +=
-                            '<div id="' +
-                            id +
-                            '" class="' +
-                            cls +
-                            '"><label id="' +
-                            column.label_id_prefix +
-                            encoded_id +
-                            '" for="' +
-                            encoded_id +
-                            '">' +
-                            (value || "") +
-                            "</label></div>";
+                        tmpl += `<div id="${id}" class="${cls}"><label id="${column.label_id_prefix}${encoded_id}" for="${encoded_id}">${value ||
+                            ""}</label></div>`;
                     }
                     tmpl += "</td>";
                 }
@@ -334,35 +269,15 @@ export default {
                 page_index++
             ) {
                 if (page_index == options.cur_page_num) {
-                    tmpl +=
-                        '<span class="page-link inactive-link" id="page-link-' +
-                        page_index +
-                        '">' +
-                        page_index +
-                        "</span>";
+                    tmpl += `<span class="page-link inactive-link" id="page-link-${page_index}">${page_index}</span>`;
                 } else {
-                    tmpl +=
-                        '<span class="page-link" id="page-link-' +
-                        page_index +
-                        '"><a href="javascript:void(0);" onclick="return false;" page_num="' +
-                        page_index +
-                        '">' +
-                        page_index +
-                        "</a></span>";
+                    tmpl += `<span class="page-link" id="page-link-${page_index}"><a href="javascript:void(0);" onclick="return false;" page_num="${page_index}">${page_index}</a></span>`;
                 }
             }
 
             // show last page
             if (max_page < num_pages) {
-                tmpl +=
-                    "..." +
-                    '<span class="page-link" id="page-link-' +
-                    num_pages +
-                    '"><a href="javascript:void(0);" onclick="return false;" page_num="' +
-                    num_pages +
-                    '">' +
-                    num_pages +
-                    "</a></span>";
+                tmpl += `...<span class="page-link" id="page-link-${num_pages}"><a href="javascript:void(0);" onclick="return false;" page_num="${num_pages}">${num_pages}</a></span>`;
             }
             tmpl += "</span>";
 
@@ -387,10 +302,7 @@ export default {
             for (var i in options.operations) {
                 var operation = options.operations[i];
                 if (operation.allow_multiple) {
-                    tmpl +=
-                        '<input type="button" value="' +
-                        operation.label +
-                        '" class="operation-button action-button">&nbsp;';
+                    tmpl += `<input type="button" value="${operation.label}" class="operation-button action-button">&nbsp;`;
                 }
             }
 
@@ -413,12 +325,7 @@ export default {
             for (i in options.operations) {
                 var operation = options.operations[i];
                 if (operation.global_operation) {
-                    tmpl +=
-                        '<a class="action-button" href="' +
-                        operation.global_operation +
-                        '">' +
-                        operation.label +
-                        "</a>";
+                    tmpl += `<a class="action-button" href="${operation.global_operation}">${operation.label}</a>`;
                 }
             }
             tmpl += "</td>" + "</tr>";
@@ -426,12 +333,7 @@ export default {
 
         // add legend
         if (options.legend) {
-            tmpl +=
-                "<tr>" +
-                '<td colspan="100">' +
-                options.legend +
-                "</td>" +
-                "</tr>";
+            tmpl += `<tr><td colspan="100">${options.legend}</td></tr>`;
         }
 
         // return
@@ -441,16 +343,9 @@ export default {
     // template
     message: function(options) {
         var status = options.status == "success" ? "done" : options.status;
-        return (
-            "<p>" +
-            '<div class="' +
-            status +
-            'message transient-message">' +
-            _.escape(options.message) +
-            "</div>" +
-            '<div style="clear: both"></div>' +
-            "</p>"
-        );
+        return `<p><div class="${status}message transient-message">${_.escape(
+            options.message
+        )}</div><div style="clear: both"></div></p>`;
     },
 
     // template
@@ -489,14 +384,7 @@ export default {
         //
         // standard search
         //
-        var tmpl =
-            '<div id="standard-search" style="display: ' +
-            standard_search_display +
-            ';">' +
-            "<table>" +
-            "<tr>" +
-            '<td style="padding: 0;">' +
-            "<table>";
+        var tmpl = `<div id="standard-search" style="display: ${standard_search_display};"><table><tr><td style="padding: 0;"><table>`;
 
         // add standard filters
         for (var i in options.columns) {
@@ -521,16 +409,7 @@ export default {
         //
         // advanced search
         //
-        tmpl +=
-            '<div id="advanced-search" style="display: ' +
-            advanced_search_display +
-            '; margin-top: 5px; border: 1px solid #ccc;">' +
-            "<table>" +
-            "<tr>" +
-            '<td style="text-align: left" colspan="100">' +
-            '<a href="" class="advanced-search-toggle">Close Advanced Search</a>' +
-            "</td>" +
-            "</tr>";
+        tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px; border: 1px solid #ccc;"><table><tr><td style="text-align: left" colspan="100"><a href="" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
 
         // add advanced filters
         for (var i in options.columns) {
@@ -562,19 +441,11 @@ export default {
         var tmpl = "<tr>";
 
         if (column.filterable == "advanced") {
-            tmpl +=
-                '<td align="left" style="padding-left: 10px">' +
-                column_label +
-                ":</td>";
+            tmpl += `<td align="left" style="padding-left: 10px">${column_label}:</td>`;
         }
         tmpl += '<td style="padding-bottom: 1px;">';
         if (column.is_text) {
-            tmpl +=
-                '<form class="text-filter-form" column_key="' +
-                column_key +
-                '" action="' +
-                options.url +
-                '" method="get" >';
+            tmpl += `<form class="text-filter-form" column_key="${column_key}" action="${options.url}" method="get" >`;
             // Carry forward filtering criteria with hidden inputs.
             for (i in options.columns) {
                 var temp_column = options.columns[i];
@@ -584,19 +455,12 @@ export default {
                         if (temp_column.is_text) {
                             filter_value = JSON.stringify(filter_value);
                         }
-                        tmpl +=
-                            '<input type="hidden" id="' +
-                            temp_column.key +
-                            '" name="f-' +
-                            temp_column.key +
-                            '" value="' +
-                            filter_value +
-                            '"/>';
+                        tmpl += `<input type="hidden" id="${temp_column.key}" name="f-${temp_column.key}" value="${filter_value}"/>`;
                     }
                 }
             }
             // Print current filtering criteria and links to delete.
-            tmpl += '<span id="' + column_key + '-filtering-criteria">';
+            tmpl += `<span id="${column_key}-filtering-criteria">`;
 
             // add filters
             var column_filter = filters[column_key];
@@ -644,25 +508,10 @@ export default {
             }
 
             // print input field for column
-            tmpl +=
-                '<span class="search-box">' +
-                '<input class="search-box-input" id="input-' +
-                column_key +
-                '-filter" name="f-' +
-                column_key +
-                '" type="text" placeholder="' +
-                value +
-                '" size="' +
-                size +
-                '"/>' +
-                '<button type="submit" style="background: transparent; border: none; padding: 4px; margin: 0px;">' +
-                '<i class="fa fa-search"></i>' +
-                "</button>" +
-                "</span>" +
-                "</form>";
+            tmpl += `<span class="search-box"><input class="search-box-input" id="input-${column_key}-filter" name="f-${column_key}" type="text" placeholder="${value}" size="${size}"/><button type="submit" style="background: transparent; border: none; padding: 4px; margin: 0px;"><i class="fa fa-search"></i></button></span></form>`;
         } else {
             // filter criteria
-            tmpl += '<span id="' + column_key + '-filtering-criteria">';
+            tmpl += `<span id="${column_key}-filtering-criteria">`;
 
             // add category filters
             var seperator = false;
@@ -687,25 +536,9 @@ export default {
                 // add category
                 var filter = filters[column_key];
                 if (filter && cf[column_key] && filter == cf_arg) {
-                    tmpl +=
-                        '<span class="categorical-filter ' +
-                        column_key +
-                        '-filter current-filter">' +
-                        cf_label +
-                        "</span>";
+                    tmpl += `<span class="categorical-filter ${column_key}-filter current-filter">${cf_label}</span>`;
                 } else {
-                    tmpl +=
-                        '<span class="categorical-filter ' +
-                        column_key +
-                        '-filter">' +
-                        '<a href="javascript:void(0);" filter_key="' +
-                        cf_key +
-                        '" filter_val="' +
-                        cf_arg +
-                        '">' +
-                        cf_label +
-                        "</a>" +
-                        "</span>";
+                    tmpl += `<span class="categorical-filter ${column_key}-filter"><a href="javascript:void(0);" filter_key="${cf_key}" filter_val="${cf_arg}">${cf_label}</a></span>`;
                 }
             }
             tmpl += "</span>";
@@ -719,17 +552,6 @@ export default {
     // template for filter items
     filter_element: function(filter_key, filter_value) {
         filter_value = Utils.sanitize(filter_value);
-        return (
-            '<span class="text-filter-val">' +
-            filter_value +
-            '<a href="javascript:void(0);" filter_key="' +
-            filter_key +
-            '" filter_val="' +
-            filter_value +
-            '">' +
-            '<i class="fa fa-times" style="padding-left: 5px; padding-bottom: 6px;"/>' +
-            "</a>" +
-            "</span>"
-        );
+        return `<span class="text-filter-val">${filter_value}<a href="javascript:void(0);" filter_key="${filter_key}" filter_val="${filter_value}"><i class="fa fa-times" style="padding-left: 5px; padding-bottom: 6px;"/></a></span>`;
     }
 };

client/galaxy/scripts/mvc/grid/grid-view.js

@@ -23,7 +23,7 @@ export default Backbone.View.extend({
             var tag =
                 tag_name +
                 (tag_value !== undefined && tag_value !== ""
-                    ? ":" + tag_value
+                    ? `:${tag_value}`
                     : "");
             var advanced_search = $("#advanced-search").is(":visible");
             if (!advanced_search) {
@@ -39,10 +39,10 @@ export default Backbone.View.extend({
             if (grid_config.url_base && !grid_config.items) {
                 var url_data = grid_config.url_data || {};
                 _.each(grid_config.filters, (v, k) => {
-                    url_data["f-" + k] = v;
+                    url_data[`f-${k}`] = v;
                 });
                 $.ajax({
-                    url: grid_config.url_base + "?" + $.param(url_data),
+                    url: `${grid_config.url_base}?${$.param(url_data)}`,
                     success: function(response) {
                         response.embedded = grid_config.embedded;
                         response.filters = grid_config.filters || {};
@@ -163,7 +163,7 @@ export default Backbone.View.extend({
             $(this).off();
             $(this).submit(function() {
                 var column_key = $(this).attr("column_key");
-                var text_input_obj = $("#input-" + column_key + "-filter");
+                var text_input_obj = $(`#input-${column_key}-filter`);
                 var text_input = text_input_obj.val();
                 text_input_obj.val("");
                 self.add_filter_condition(column_key, text_input);
@@ -275,7 +275,7 @@ export default Backbone.View.extend({
 
         // add operation popup menus
         _.each(options.items, (item, index) => {
-            var button = self.$("#grid-" + index + "-popup").off();
+            var button = self.$(`#grid-${index}-popup`).off();
             var popup = new PopupMenu(button);
             _.each(options["operations"], operation => {
                 self._add_operation(popup, operation, item);
@@ -328,7 +328,7 @@ export default Backbone.View.extend({
         });
 
         // append to container
-        var container = this.$el.find("#" + name + "-filtering-criteria");
+        var container = this.$el.find(`#${name}-filtering-criteria`);
         container.append(t);
 
         // execute
@@ -355,7 +355,7 @@ export default Backbone.View.extend({
         if (cur_sort.indexOf(col_key) !== -1) {
             // Reverse sort.
             if (cur_sort.substring(0, 1) !== "-") {
-                new_sort = "-" + col_key;
+                new_sort = `-${col_key}`;
             }
         }
 
@@ -364,10 +364,10 @@ export default Backbone.View.extend({
 
         // Add sort arrow element to new sort column.
         var sort_arrow = new_sort.substring(0, 1) == "-" ? "↑" : "↓";
-        var t = $("<span>" + sort_arrow + "</span>").addClass("sort-arrow");
+        var t = $(`<span>${sort_arrow}</span>`).addClass("sort-arrow");
 
         // Add to header
-        this.$el.find("#" + col_key + "-header").append(t);
+        this.$el.find(`#${col_key}-header`).append(t);
 
         // Update grid.
         this.grid.set("sort_key", new_sort);
@@ -382,7 +382,7 @@ export default Backbone.View.extend({
 
         var cur_value = this.grid.get("filters")[name];
         var self = this;
-        this.$el.find("." + name + "-filter").each(function() {
+        this.$el.find(`.${name}-filter`).each(function() {
             var text = $.trim($(this).text());
             var filter = category_filter[text];
             var filter_value = filter[name];
@@ -396,7 +396,7 @@ export default Backbone.View.extend({
                 // Add hyperlink for this filter since grid will no longer be using this filter. It is assumed that
                 // this element has a single child, a hyperlink/anchor.
                 $(this).empty();
-                var t = $('<a href="#">' + text + "</a>");
+                var t = $(`<a href="#">${text}</a>`);
                 t.click(() => {
                     self.set_categorical_filter(name, filter_value);
                 });
@@ -438,7 +438,7 @@ export default Backbone.View.extend({
                 text = $(this).text();
                 $(this).empty();
                 $(this).removeClass("inactive-link");
-                var t = $('<a href="#">' + text + "</a>");
+                var t = $(`<a href="#">${text}</a>`);
                 t.click(() => {
                     self.set_page(page_num);
                 });
@@ -577,8 +577,9 @@ export default Backbone.View.extend({
 
             // Do operation. If operation cannot be performed asynchronously, redirect to location.
             if (target == "top") {
-                window.top.location =
-                    href + "?" + $.param(this.grid.get_url_data());
+                window.top.location = `${href}?${$.param(
+                    this.grid.get_url_data()
+                )}`;
             } else if (this.grid.can_async_op(operation) || this.dict_format) {
                 this.update_grid();
             } else {
@@ -618,10 +619,9 @@ export default Backbone.View.extend({
 
         // get default url
         if (!href) {
-            href =
-                this.grid.get("url_base") +
-                "?" +
-                $.param(this.grid.get_url_data());
+            href = `${this.grid.get("url_base")}?${$.param(
+                this.grid.get_url_data()
+            )}`;
         }
 
         // clear grid of transient request attributes.

client/galaxy/scripts/mvc/history/copy-dialog.js

@@ -11,7 +11,7 @@ import _l from "utils/localization";
 var CopyDialog = {
     // language related strings/fns
     defaultName: _.template("Copy of '<%- name %>'"),
-    title: _.template(_l("Copying history") + ' "<%- name %>"'),
+    title: _.template(`${_l("Copying history")} "<%- name %>"`),
     submitLabel: _l("Copy"),
     errorMessage: _l("History could not be copied."),
     progressive: _l("Copying history"),
@@ -73,10 +73,8 @@ var CopyDialog = {
 
     // empty modal body and let the user know the copy is happening
     _showAjaxIndicator: function _showAjaxIndicator() {
-        var indicator =
-            '<p><span class="fa fa-spinner fa-spin"></span> ' +
-            this.progressive +
-            "...</p>";
+        var indicator = `<p><span class="fa fa-spinner fa-spin"></span> ${this
+            .progressive}...</p>`;
         this.modal
             .$(".modal-body")
             .empty()
@@ -209,7 +207,7 @@ var CopyDialog = {
  */
 var ImportDialog = _.extend({}, CopyDialog, {
     defaultName: _.template("imported: <%- name %>"),
-    title: _.template(_l("Importing history") + ' "<%- name %>"'),
+    title: _.template(`${_l("Importing history")} "<%- name %>"`),
     submitLabel: _l("Import"),
     errorMessage: _l("History could not be imported."),
     progressive: _l("Importing history"),

client/galaxy/scripts/mvc/history/hda-li-edit.js

@@ -9,7 +9,7 @@ var _super = DATASET_LI_EDIT.DatasetListItemEdit;
  */
 var HDAListItemEdit = _super.extend(
     /** @lends HDAListItemEdit.prototype */ {
-        className: _super.prototype.className + " history-content",
+        className: `${_super.prototype.className} history-content`,
 
         /** In this override, only get details if in the ready state, get rerunnable if in other states.
      *  Note: fetch with no 'change' event triggering to prevent automatic rendering.
@@ -43,8 +43,8 @@ var HDAListItemEdit = _super.extend(
 
         /** string rep */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "HDAListItemEdit(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `HDAListItemEdit(${modelString})`;
         }
     }
 );

client/galaxy/scripts/mvc/history/hda-li.js

@@ -11,7 +11,7 @@ var _super = DATASET_LI.DatasetListItemView;
  */
 var HDAListItemView = _super.extend(
     /** @lends HDAListItemView.prototype */ {
-        className: _super.prototype.className + " history-content",
+        className: `${_super.prototype.className} history-content`,
 
         initialize: function(attributes, options) {
             _super.prototype.initialize.call(this, attributes, options);
@@ -20,8 +20,8 @@ var HDAListItemView = _super.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "HDAListItemView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `HDAListItemView(${modelString})`;
         }
     }
 );

client/galaxy/scripts/mvc/history/hdca-li-edit.js

@@ -25,14 +25,14 @@ var HDCAListItemEdit = _super.extend(
                     return DC_VIEW_EDIT.ListOfListsCollectionViewEdit;
             }
             throw new TypeError(
-                "Uknown collection_type: " + this.model.get("collection_type")
+                `Uknown collection_type: ${this.model.get("collection_type")}`
             );
         },
 
         // ......................................................................... delete
         /** In this override, add the delete button. */
         _renderPrimaryActions: function() {
-            this.log(this + "._renderPrimaryActions");
+            this.log(`${this}._renderPrimaryActions`);
             // render the display, edit attr and delete icon-buttons
             return _super.prototype._renderPrimaryActions
                 .call(this)
@@ -61,8 +61,8 @@ var HDCAListItemEdit = _super.extend(
         // ......................................................................... misc
         /** string rep */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "HDCAListItemEdit(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `HDCAListItemEdit(${modelString})`;
         }
     }
 );

client/galaxy/scripts/mvc/history/hdca-li.js

@@ -10,7 +10,7 @@ var _super = DC_LI.DCListItemView;
  */
 var HDCAListItemView = _super.extend(
     /** @lends HDCAListItemView.prototype */ {
-        className: _super.prototype.className + " history-content",
+        className: `${_super.prototype.className} history-content`,
 
         /** event listeners */
         _setUpListeners: function() {
@@ -38,7 +38,7 @@ var HDCAListItemView = _super.extend(
                     return DC_VIEW.ListOfListsCollectionView;
             }
             throw new TypeError(
-                "Uknown collection_type: " + this.model.get("collection_type")
+                `Uknown collection_type: ${this.model.get("collection_type")}`
             );
         },
 
@@ -50,7 +50,7 @@ var HDCAListItemView = _super.extend(
                 ? STATES.RUNNING
                 : STATES.OK;
             //if( this.model.has( 'state' ) ){
-            this.$el.addClass("state-" + state);
+            this.$el.addClass(`state-${state}`);
             //}
             return this.$el;
         },
@@ -58,8 +58,8 @@ var HDCAListItemView = _super.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "HDCAListItemView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `HDCAListItemView(${modelString})`;
         }
     }
 );

client/galaxy/scripts/mvc/history/hdca-model.js

@@ -24,7 +24,7 @@ function buildHDCASave(_super) {
     return function _save(attributes, options) {
         if (this.isNew()) {
             options = options || {};
-            options.url = this.urlRoot + this.get("history_id") + "/contents";
+            options.url = `${this.urlRoot + this.get("history_id")}/contents`;
             attributes = attributes || {};
             attributes.type = "dataset_collection";
         }
@@ -48,7 +48,7 @@ var HistoryListDatasetCollection = ListDC.extend(hcontentMixin).extend(
 
         /** String representation. */
         toString: function() {
-            return "History" + ListDC.prototype.toString.call(this);
+            return `History${ListDC.prototype.toString.call(this)}`;
         }
     }
 );
@@ -70,7 +70,7 @@ var HistoryPairDatasetCollection = PairDC.extend(hcontentMixin).extend(
 
         /** String representation. */
         toString: function() {
-            return "History" + PairDC.prototype.toString.call(this);
+            return `History${PairDC.prototype.toString.call(this)}`;
         }
     }
 );
@@ -91,7 +91,7 @@ var HistoryListPairedDatasetCollection = ListPairedDC.extend(
 
     /** String representation. */
     toString: function() {
-        return "History" + ListPairedDC.prototype.toString.call(this);
+        return `History${ListPairedDC.prototype.toString.call(this)}`;
     }
 });
 

client/galaxy/scripts/mvc/history/history-content-model.js

@@ -50,17 +50,13 @@ var HistoryContentMixin = {
     // ........................................................................ ajax
     //TODO?: these are probably better done on the leaf classes
     /** history content goes through the 'api/histories' API */
-    urlRoot: Galaxy.root + "api/histories/",
+    urlRoot: `${Galaxy.root}api/histories/`,
 
     /** full url spec. for this content */
     url: function() {
-        var url =
-            this.urlRoot +
-            this.get("history_id") +
-            "/contents/" +
-            this.get("history_content_type") +
-            "s/" +
-            this.get("id");
+        var url = `${this.urlRoot + this.get("history_id")}/contents/${this.get(
+            "history_content_type"
+        )}s/${this.get("id")}`;
         return url;
     },
 

client/galaxy/scripts/mvc/history/history-contents.js

@@ -50,13 +50,12 @@ var HistoryContents = _super.extend(BASE_MVC.LoggableMixin).extend({
             // Raise a plain object with validationError to fake a model.validationError
             // (since we don't have a model to use validate with)
             // (the outer hack being the mixed content/model function in this collection)
-            var msg = "Unknown collection_type: " + attrs.collection_type;
+            var msg = `Unknown collection_type: ${attrs.collection_type}`;
             console.warn(msg, attrs);
             return { validationError: msg };
         }
         return {
-            validationError:
-                "Unknown history_content_type: " + attrs.history_content_type
+            validationError: `Unknown history_content_type: ${attrs.history_content_type}`
         };
     },
 
@@ -70,11 +69,11 @@ var HistoryContents = _super.extend(BASE_MVC.LoggableMixin).extend({
     order: "hid",
 
     /** root api url */
-    urlRoot: Galaxy.root + "api/histories",
+    urlRoot: `${Galaxy.root}api/histories`,
 
     /** complete api url */
     url: function() {
-        return this.urlRoot + "/" + this.historyId + "/contents";
+        return `${this.urlRoot}/${this.historyId}/contents`;
     },
 
     /** Set up */

client/galaxy/scripts/mvc/history/history-list.js

@@ -10,12 +10,9 @@ var View = Backbone.View.extend({
         this.setElement($("<div/>"));
         this.model = new Backbone.Model();
         Utils.get({
-            url:
-                Galaxy.root +
-                "history/" +
-                options.action_id +
-                "?" +
-                $.param(Galaxy.params),
+            url: `${Galaxy.root}history/${options.action_id}?${$.param(
+                Galaxy.params
+            )}`,
             success: function(response) {
                 response["dict_format"] = true;
                 _.each(response["operations"], operation => {

client/galaxy/scripts/mvc/history/history-model.js

@@ -32,7 +32,7 @@ var History = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
                 contents_states: {}
             },
 
-            urlRoot: Galaxy.root + "api/histories",
+            urlRoot: `${Galaxy.root}api/histories`,
 
             contentsClass: HISTORY_CONTENTS.HistoryContents,
 
@@ -53,7 +53,7 @@ var History = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
             initialize: function(historyJSON, options) {
                 options = options || {};
                 this.logger = options.logger || null;
-                this.log(this + ".initialize:", historyJSON, options);
+                this.log(`${this}.initialize:`, historyJSON, options);
 
                 /** HistoryContents collection of the HDAs contained in this history. */
                 this.contents = new this.contentsClass([], {
@@ -368,7 +368,7 @@ var History = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
                 var history = this;
 
                 var xhr = jQuery.getJSON(
-                    Galaxy.root + "history/set_as_current?id=" + this.id
+                    `${Galaxy.root}history/set_as_current?id=${this.id}`
                 );
 
                 xhr.done(() => {
@@ -379,9 +379,7 @@ var History = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
 
             // ........................................................................ misc
             toString: function() {
-                return (
-                    "History(" + this.get("id") + "," + this.get("name") + ")"
-                );
+                return `History(${this.get("id")},${this.get("name")})`;
             }
         }
     )
@@ -421,7 +419,7 @@ var HistoryCollection = _collectionSuper.extend(BASE_MVC.LoggableMixin).extend({
         // the collection *is empty*
     },
 
-    urlRoot: Galaxy.root + "api/histories",
+    urlRoot: `${Galaxy.root}api/histories`,
     url: function() {
         return this.urlRoot;
     },
@@ -542,7 +540,7 @@ var HistoryCollection = _collectionSuper.extend(BASE_MVC.LoggableMixin).extend({
         //TODO: .create is actually a collection function that's overridden here
         var collection = this;
 
-        var xhr = jQuery.getJSON(Galaxy.root + "history/create_new_current");
+        var xhr = jQuery.getJSON(`${Galaxy.root}history/create_new_current`);
         return xhr.done(newData => {
             collection.setCurrent(
                 new History(newData, [], historyOptions || {})
@@ -566,13 +564,8 @@ var HistoryCollection = _collectionSuper.extend(BASE_MVC.LoggableMixin).extend({
     },
 
     toString: function toString() {
-        return (
-            "HistoryCollection(" +
-            this.length +
-            ",current:" +
-            this.currentHistoryId +
-            ")"
-        );
+        return `HistoryCollection(${this.length},current:${this
+            .currentHistoryId})`;
     }
 });
 

client/galaxy/scripts/mvc/history/history-preferences.js

@@ -59,7 +59,7 @@ var HistoryPrefs = BASE_MVC.SessionStorageModel.extend(
         },
 
         toString: function() {
-            return "HistoryPrefs(" + this.id + ")";
+            return `HistoryPrefs(${this.id})`;
         }
     },
     {
@@ -71,8 +71,7 @@ var HistoryPrefs = BASE_MVC.SessionStorageModel.extend(
         historyStorageKey: function historyStorageKey(historyId) {
             if (!historyId) {
                 throw new Error(
-                    "HistoryPrefs.historyStorageKey needs valid id: " +
-                        historyId
+                    `HistoryPrefs.historyStorageKey needs valid id: ${historyId}`
                 );
             }
             // single point of change

client/galaxy/scripts/mvc/history/history-structure-view.js

@@ -109,7 +109,7 @@ var HistoryStructureComponent = Backbone.View
 
         initialize: function(attributes) {
             this.log(
-                this + "(HistoryStructureComponent).initialize:",
+                `${this}(HistoryStructureComponent).initialize:`,
                 attributes
             );
             this.component = attributes.component;
@@ -229,7 +229,7 @@ var HistoryStructureComponent = Backbone.View
         },
 
         render: function(options) {
-            this.debug(this + ".render:", options);
+            this.debug(`${this}.render:`, options);
             var view = this;
             view.$el.html(
                 [
@@ -257,7 +257,7 @@ var HistoryStructureComponent = Backbone.View
         },
 
         renderGraph: function(options) {
-            this.debug(this + ".renderGraph:", options);
+            this.debug(`${this}.renderGraph:`, options);
             var view = this;
 
             function _render() {
@@ -300,7 +300,7 @@ var HistoryStructureComponent = Backbone.View
         },
 
         _updateLayout: function() {
-            this.debug(this + "._updateLayout:");
+            this.debug(`${this}._updateLayout:`);
             var view = this;
             var layout = view.layout;
 
@@ -339,7 +339,7 @@ var HistoryStructureComponent = Backbone.View
         },
 
         renderSVG: function() {
-            this.debug(this + ".renderSVG:");
+            this.debug(`${this}.renderSVG:`);
             var view = this;
             var layout = view.layout;
 
@@ -442,7 +442,7 @@ var HistoryStructureComponent = Backbone.View
                 //view.debug( '\t ancestor:', ancestorId, ancestorLi );
                 jobClassFn.call(ancestorLi.$el, "highlighted");
                 view
-                    .$("#" + ancestorId + view._LINK_ID_SEP + id)
+                    .$(`#${ancestorId}${view._LINK_ID_SEP}${id}`)
                     .attr("class", connectionClass);
             });
             // descendants
@@ -452,7 +452,7 @@ var HistoryStructureComponent = Backbone.View
                 //view.debug( '\t descendant:', descendantId, descendantLi );
                 jobClassFn.call(descendantLi.$el, "highlighted");
                 view
-                    .$("#" + id + view._LINK_ID_SEP + descendantId)
+                    .$(`#${id}${view._LINK_ID_SEP}${descendantId}`)
                     .attr("class", connectionClass);
             });
         },
@@ -466,7 +466,7 @@ var HistoryStructureComponent = Backbone.View
         },
 
         toString: function() {
-            return "HistoryStructureComponent(" + this.model.id + ")";
+            return `HistoryStructureComponent(${this.model.id})`;
         }
     });
 
@@ -477,7 +477,7 @@ var HistoryStructureComponent = Backbone.View
 var VerticalHistoryStructureComponent = HistoryStructureComponent.extend({
     //logger : console,
 
-    className: HistoryStructureComponent.prototype.className + " vertical",
+    className: `${HistoryStructureComponent.prototype.className} vertical`,
 
     layoutDefaults: _.extend(
         _.clone(HistoryStructureComponent.prototype.layoutDefaults),
@@ -489,7 +489,7 @@ var VerticalHistoryStructureComponent = HistoryStructureComponent.extend({
 
     //TODO: how can we use the dom height of the job li's - they're not visible when this is called?
     _updateLayout: function() {
-        this.debug(this + "._updateLayout:");
+        this.debug(`${this}._updateLayout:`);
         var view = this;
         var layout = view.layout;
         //this.info( this.cid, '_updateLayout' )
@@ -555,7 +555,7 @@ var VerticalHistoryStructureComponent = HistoryStructureComponent.extend({
     },
 
     toString: function() {
-        return "VerticalHistoryStructureComponent(" + this.model.id + ")";
+        return `VerticalHistoryStructureComponent(${this.model.id})`;
     }
 });
 
@@ -583,7 +583,7 @@ var HistoryStructureView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
             ? attributes.layout
             : this._DEFAULT_LAYOUT;
         this.log(
-            this + "(HistoryStructureView).initialize:",
+            `${this}(HistoryStructureView).initialize:`,
             attributes,
             this.model
         );
@@ -612,12 +612,12 @@ var HistoryStructureView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
             excludeSetMetadata: true,
             excludeErroredJobs: true
         });
-        this.debug(this + ".dag:", this.dag);
+        this.debug(`${this}.dag:`, this.dag);
         this._createComponents();
     },
 
     _createComponents: function() {
-        this.log(this + "._createComponents");
+        this.log(`${this}._createComponents`);
         var structure = this;
 
         structure.componentViews = structure.dag
@@ -627,7 +627,7 @@ var HistoryStructureView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
     },
 
     _createComponent: function(component) {
-        this.log(this + "._createComponent:", component);
+        this.log(`${this}._createComponent:`, component);
         var ComponentClass = this._layoutToComponentClass[this.layout];
         return new ComponentClass({
             model: this.model,
@@ -636,7 +636,7 @@ var HistoryStructureView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
     },
 
     render: function(options) {
-        this.log(this + ".render:", options);
+        this.log(`${this}.render:`, options);
         var structure = this;
 
         structure.$el
@@ -660,7 +660,7 @@ var HistoryStructureView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
 
     changeLayout: function(layout) {
         if (!(layout in this._layoutToComponentClass)) {
-            throw new Error(this + ": unknown layout: " + layout);
+            throw new Error(`${this}: unknown layout: ${layout}`);
         }
         this.layout = layout;
         this._createComponents();
@@ -668,7 +668,7 @@ var HistoryStructureView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
     },
 
     toString: function() {
-        return "HistoryStructureView(" + this.model.id + ")";
+        return `HistoryStructureView(${this.model.id})`;
     }
 });
 

client/galaxy/scripts/mvc/history/history-view-annotated.js

@@ -19,7 +19,7 @@ var _super = HISTORY_VIEW.HistoryView;
  */
 var AnnotatedHistoryView = _super.extend(
     /** @lends AnnotatedHistoryView.prototype */ {
-        className: _super.prototype.className + " annotated-history-panel",
+        className: `${_super.prototype.className} annotated-history-panel`,
 
         // ------------------------------------------------------------------------ panel rendering
         /** In this override, add the history annotation */
@@ -107,11 +107,9 @@ var AnnotatedHistoryView = _super.extend(
         // ........................................................................ misc
         /** Return a string rep of the history */
         toString: function() {
-            return (
-                "AnnotatedHistoryView(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `AnnotatedHistoryView(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );

client/galaxy/scripts/mvc/history/history-view-edit-current.js

@@ -21,7 +21,7 @@ var HistoryViewPrefs = BASE_MVC.SessionStorageModel.extend(
             scrollPosition: 0
         },
         toString: function() {
-            return "HistoryViewPrefs(" + JSON.stringify(this.toJSON()) + ")";
+            return `HistoryViewPrefs(${JSON.stringify(this.toJSON())})`;
         }
     }
 );
@@ -46,7 +46,7 @@ var _super = HISTORY_VIEW_EDIT.HistoryViewEdit;
  */
 var CurrentHistoryView = _super.extend(
     /** @lends CurrentHistoryView.prototype */ {
-        className: _super.prototype.className + " current-history-panel",
+        className: `${_super.prototype.className} current-history-panel`,
 
         /** override to use drilldown (and not foldout) for how collections are displayed */
         HDCAViewClass: _super.prototype.HDCAViewClass.extend({
@@ -111,7 +111,7 @@ var CurrentHistoryView = _super.extend(
         /** (re-)loads the user's current history & contents w/ details */
         loadCurrentHistory: function() {
             return this.loadHistory(null, {
-                url: Galaxy.root + "history/current_history_json"
+                url: `${Galaxy.root}history/current_history_json`
             });
         },
 
@@ -126,7 +126,7 @@ var CurrentHistoryView = _super.extend(
                 return $.when();
             }
             return this.loadHistory(historyId, {
-                url: Galaxy.root + "history/set_as_current?id=" + historyId
+                url: `${Galaxy.root}history/set_as_current?id=${historyId}`
             });
         },
 
@@ -141,7 +141,7 @@ var CurrentHistoryView = _super.extend(
                 return $.when();
             }
             return this.loadHistory(null, {
-                url: Galaxy.root + "history/create_new_current"
+                url: `${Galaxy.root}history/create_new_current`
             });
         },
 
@@ -430,7 +430,7 @@ var CurrentHistoryView = _super.extend(
                     });
                     // need to type mangle to go from web route to history contents
                     this._setCurrentContentById(
-                        hdaId ? "dataset-" + hdaId : null
+                        hdaId ? `dataset-${hdaId}` : null
                     );
                 },
                 // when the center panel is given a new view, clear the current indicator
@@ -527,11 +527,9 @@ var CurrentHistoryView = _super.extend(
 
         /** Return a string rep of the history */
         toString: function() {
-            return (
-                "CurrentHistoryView(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `CurrentHistoryView(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );

client/galaxy/scripts/mvc/history/history-view-edit.js

@@ -106,12 +106,12 @@ var HistoryViewEdit = _super.extend(
                 // loading indicators for deleted/hidden
                 "fetching-deleted": function(collection) {
                     this.$("> .controls .deleted-count").html(
-                        "<i>" + _l("loading...") + "</i>"
+                        `<i>${_l("loading...")}</i>`
                     );
                 },
                 "fetching-hidden": function(collection) {
                     this.$("> .controls .hidden-count").html(
-                        "<i>" + _l("loading...") + "</i>"
+                        `<i>${_l("loading...")}</i>`
                     );
                 },
                 "fetching-deleted-done fetching-hidden-done": this._renderCounts
@@ -360,7 +360,7 @@ var HistoryViewEdit = _super.extend(
                     LIST_OF_PAIRS_COLLECTION_CREATOR.createListOfPairsCollection;
             } else {
                 console.warn(
-                    "Unknown collectionType encountered " + collectionType
+                    `Unknown collectionType encountered ${collectionType}`
                 );
             }
             createFunc(selection, hideSourceItems).done(() => {
@@ -627,11 +627,9 @@ var HistoryViewEdit = _super.extend(
         // ........................................................................ misc
         /** Return a string rep of the history */
         toString: function() {
-            return (
-                "HistoryViewEdit(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `HistoryViewEdit(${this.model
+                ? this.model.get("name")
+                : ""})`;
         }
     }
 );

client/galaxy/scripts/mvc/history/history-view.js

@@ -38,7 +38,7 @@ var HistoryView = _super.extend(
         modelCollectionKey: "contents",
 
         tagName: "div",
-        className: _super.prototype.className + " history-panel",
+        className: `${_super.prototype.className} history-panel`,
 
         /** string to display when the collection is empty */
         emptyMsg: _l("This history is empty"),
@@ -349,7 +349,7 @@ var HistoryView = _super.extend(
                 case "dataset_collection":
                     return this.HDCAViewClass;
             }
-            throw new TypeError("Unknown history_content_type: " + contentType);
+            throw new TypeError(`Unknown history_content_type: ${contentType}`);
         },
 
         /** in this override, add a linktarget, and expand if id is in web storage */
@@ -556,26 +556,22 @@ var HistoryView = _super.extend(
         // ........................................................................ misc
         /** utility for adding -st, -nd, -rd, -th to numbers */
         ordinalIndicator: function(number) {
-            var numStr = number + "";
+            var numStr = `${number}`;
             switch (numStr.charAt(numStr.length - 1)) {
                 case "1":
-                    return numStr + "st";
+                    return `${numStr}st`;
                 case "2":
-                    return numStr + "nd";
+                    return `${numStr}nd`;
                 case "3":
-                    return numStr + "rd";
+                    return `${numStr}rd`;
                 default:
-                    return numStr + "th";
+                    return `${numStr}th`;
             }
         },
 
         /** Return a string rep of the history */
         toString: function() {
-            return (
-                "HistoryView(" +
-                (this.model ? this.model.get("name") : "") +
-                ")"
-            );
+            return `HistoryView(${this.model ? this.model.get("name") : ""})`;
         }
     }
 );

client/galaxy/scripts/mvc/history/multi-panel.js

@@ -23,7 +23,7 @@ var HistoryViewColumn = Backbone.View.extend(baseMVC.LoggableMixin).extend({
         if (!this.model) {
             return "";
         }
-        return "history-column-" + this.model.get("id");
+        return `history-column-${this.model.get("id")}`;
     },
 
     // ------------------------------------------------------------------------ set up
@@ -269,7 +269,7 @@ var HistoryViewColumn = Backbone.View.extend(baseMVC.LoggableMixin).extend({
     // ------------------------------------------------------------------------ misc
     /** String rep */
     toString: function() {
-        return "HistoryViewColumn(" + (this.panel ? this.panel : "") + ")";
+        return `HistoryViewColumn(${this.panel ? this.panel : ""})`;
     }
 });
 
@@ -285,7 +285,7 @@ var MultiPanelColumns = Backbone.View.extend(baseMVC.LoggableMixin).extend({
     /** Set up internals, history collection, and columns to display the history */
     initialize: function initialize(options) {
         options = options || {};
-        this.log(this + ".init", options);
+        this.log(`${this}.init`, options);
 
         // add the className here (since we gen. pass the el in options)
         this.$el.addClass(this.className);
@@ -616,7 +616,7 @@ var MultiPanelColumns = Backbone.View.extend(baseMVC.LoggableMixin).extend({
                 // TODO: reconsider order in list-view._setUpItemViewListeners, dragstart (instead of here)
                 toCopy.reverse().forEach(content => {
                     queue.add({
-                        name: "copy-" + content.id,
+                        name: `copy-${content.id}`,
                         fn: function() {
                             return panel.model.contents.copy(content);
                         }
@@ -667,7 +667,7 @@ var MultiPanelColumns = Backbone.View.extend(baseMVC.LoggableMixin).extend({
         speed = speed !== undefined ? speed : this.fxSpeed;
         var multipanel = this;
 
-        multipanel.log(multipanel + ".render");
+        multipanel.log(`${multipanel}.render`);
         multipanel.$el.html(multipanel.mainTemplate(multipanel));
         multipanel.renderColumns(speed);
 
@@ -818,11 +818,9 @@ var MultiPanelColumns = Backbone.View.extend(baseMVC.LoggableMixin).extend({
     /** Include deleted histories in the collection */
     toggleDeletedHistories: function(show) {
         if (show) {
-            window.location =
-                Galaxy.root +
-                "history/view_multiple?include_deleted_histories=True";
+            window.location = `${Galaxy.root}history/view_multiple?include_deleted_histories=True`;
         } else {
-            window.location = Galaxy.root + "history/view_multiple";
+            window.location = `${Galaxy.root}history/view_multiple`;
         }
     },
 
@@ -1080,11 +1078,7 @@ var MultiPanelColumns = Backbone.View.extend(baseMVC.LoggableMixin).extend({
     // ------------------------------------------------------------------------ misc
     /** String rep */
     toString: function() {
-        return (
-            "MultiPanelColumns(" +
-            (this.columns ? this.columns.length : 0) +
-            ")"
-        );
+        return `MultiPanelColumns(${this.columns ? this.columns.length : 0})`;
     },
 
     // ------------------------------------------------------------------------ templates
@@ -1147,7 +1141,7 @@ var MultiPanelColumns = Backbone.View.extend(baseMVC.LoggableMixin).extend({
             '<div class="more-options">',
             '<div class="order btn-group">',
             '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
-            _l("Order histories by") + " ",
+            `${_l("Order histories by")} `,
             '<span class="current-order"><%- view.orderDescriptions[ view.collection.order ] %></span> ',
             '<span class="caret"></span>',
             "</button>",

client/galaxy/scripts/mvc/history/options-menu.js

@@ -104,8 +104,8 @@ var menu = [
         func: function() {
             if (Galaxy && Galaxy.currHistoryPanel && Galaxy.router) {
                 Galaxy.router.push(
-                    "/histories/permissions?id=" +
-                        Galaxy.currHistoryPanel.model.id
+                    `/histories/permissions?id=${Galaxy.currHistoryPanel.model
+                        .id}`
                 );
             }
         }
@@ -134,7 +134,7 @@ var menu = [
                 confirm(_l("Really unhide all hidden datasets?"))
             ) {
                 $.post(
-                    Galaxy.root + "history/adjust_hidden",
+                    `${Galaxy.root}history/adjust_hidden`,
                     { user_action: "unhide" },
                     () => {
                         Galaxy.currHistoryPanel.loadCurrentHistory();
@@ -154,7 +154,7 @@ var menu = [
                 confirm(_l("Really delete all hidden datasets?"))
             ) {
                 $.post(
-                    Galaxy.root + "history/adjust_hidden",
+                    `${Galaxy.root}history/adjust_hidden`,
                     { user_action: "delete" },
                     () => {
                         Galaxy.currHistoryPanel.loadCurrentHistory();

client/galaxy/scripts/mvc/job/job-li.js

@@ -12,7 +12,7 @@ var JobListItemView = _super.extend(
         /** logger used to record this.log messages, commonly set to console */
         //logger              : console,
 
-        className: _super.prototype.className + " job",
+        className: `${_super.prototype.className} job`,
         id: function() {
             return ["job", this.model.get("id")].join("-");
         },
@@ -24,7 +24,7 @@ var JobListItemView = _super.extend(
             if (attributes.logger) {
                 this.logger = this.model.logger = attributes.logger;
             }
-            this.log(this + ".initialize:", attributes);
+            this.log(`${this}.initialize:`, attributes);
             _super.prototype.initialize.call(this, attributes);
 
             this.tool = attributes.tool || {};
@@ -38,7 +38,7 @@ var JobListItemView = _super.extend(
         _swapNewRender: function($newRender) {
             _super.prototype._swapNewRender.call(this, $newRender);
             if (this.model.has("state")) {
-                this.$el.addClass("state-" + this.model.get("state"));
+                this.$el.addClass(`state-${this.model.get("state")}`);
             }
             return this.$el;
         },
@@ -119,7 +119,7 @@ var JobListItemView = _super.extend(
         // ........................................................................ misc
         /** String representation */
         toString: function() {
-            return "JobListItemView(" + this.model + ")";
+            return `JobListItemView(${this.model})`;
         }
     }
 );

client/galaxy/scripts/mvc/job/job-model.js

@@ -47,7 +47,7 @@ var Job = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
 
             /** instance vars and listeners */
             initialize: function(attributes, options) {
-                this.debug(this + "(Job).initialize", attributes, options);
+                this.debug(`${this}(Job).initialize`, attributes, options);
 
                 this.set("params", this.parseParams(this.get("params")), {
                     silent: true
@@ -65,7 +65,7 @@ var Job = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
             _setUpListeners: function() {
                 // if the state has changed and the new state is a ready state, fire an event
                 this.on("change:state", function(currModel, newState) {
-                    this.log(this + " has changed state:", currModel, newState);
+                    this.log(`${this} has changed state:`, currModel, newState);
                     if (this.inReadyState()) {
                         this.trigger(
                             "state:ready",
@@ -93,7 +93,7 @@ var Job = Backbone.Model.extend(BASE_MVC.LoggableMixin).extend(
 
             // ........................................................................ ajax
             /** root api url */
-            urlRoot: Galaxy.root + "api/jobs",
+            urlRoot: `${Galaxy.root}api/jobs`,
             //url : function(){ return this.urlRoot; },
 
             // ........................................................................ searching
@@ -128,7 +128,7 @@ var JobCollection = Backbone.Collection.extend(BASE_MVC.LoggableMixin).extend(
         model: Job,
 
         /** root api url */
-        urlRoot: Galaxy.root + "api/jobs",
+        urlRoot: `${Galaxy.root}api/jobs`,
         url: function() {
             return this.urlRoot;
         },

client/galaxy/scripts/mvc/job/job-params.js

@@ -7,8 +7,8 @@ function build_messages(self) {
     var message = Utils.getQueryString("message");
 
     if (message && message !== "") {
-        $el_message.addClass(status + "message");
-        $el_message.html("<p>" + _.escape(message) + "</p>");
+        $el_message.addClass(`${status}message`);
+        $el_message.html(`<p>${_.escape(message)}</p>`);
     } else {
         $el_message.html("");
     }

client/galaxy/scripts/mvc/lazy/lazy-limited.js

@@ -10,7 +10,7 @@ export default Backbone.View.extend({
         this.content_list = {};
         this.$message = $("<div/>")
             .addClass("ui-limitloader")
-            .append("...only the first " + this.max + " entries are visible.");
+            .append(`...only the first ${this.max} entries are visible.`);
         this.$container.append(this.$message);
         this.listenTo(this.collection, "reset", this._reset, this);
         this.listenTo(this.collection, "add", this._refresh, this);

client/galaxy/scripts/mvc/library/library-dataset-view.js

@@ -77,8 +77,8 @@ var LibraryDatasetView = Backbone.View.extend({
             error: function(model, response) {
                 if (typeof response.responseJSON !== "undefined") {
                     mod_toastr.error(
-                        response.responseJSON.err_msg +
-                            " Click this to go back.",
+                        `${response.responseJSON
+                            .err_msg} Click this to go back.`,
                         "",
                         {
                             onclick: function() {
@@ -122,8 +122,8 @@ var LibraryDatasetView = Backbone.View.extend({
             this.ldda = new mod_library_model.Ldda({
                 id: this.options.ldda_id
             });
-            this.ldda.url =
-                this.ldda.urlRoot + this.model.id + "/versions/" + this.ldda.id;
+            this.ldda.url = `${this.ldda.urlRoot +
+                this.model.id}/versions/${this.ldda.id}`;
             this.ldda.fetch({
                 success: function() {
                     that.renderVersion();
@@ -159,7 +159,7 @@ var LibraryDatasetView = Backbone.View.extend({
     },
 
     downloadDataset: function() {
-        var url = Galaxy.root + "api/libraries/datasets/download/uncompressed";
+        var url = `${Galaxy.root}api/libraries/datasets/download/uncompressed`;
         var data = { ld_ids: this.id };
         this.processDownload(url, data);
     },
@@ -173,22 +173,12 @@ var LibraryDatasetView = Backbone.View.extend({
             var inputs = "";
             $.each(data.split("&"), function() {
                 var pair = this.split("=");
-                inputs +=
-                    '<input type="hidden" name="' +
-                    pair[0] +
-                    '" value="' +
-                    pair[1] +
-                    '" />';
+                inputs += `<input type="hidden" name="${pair[0]}" value="${pair[1]}" />`;
             });
             //send request
             $(
-                '<form action="' +
-                    url +
-                    '" method="' +
-                    (method || "post") +
-                    '">' +
-                    inputs +
-                    "</form>"
+                `<form action="${url}" method="${method ||
+                    "post"}">${inputs}</form>`
             )
                 .appendTo("body")
                 .submit()
@@ -252,7 +242,7 @@ var LibraryDatasetView = Backbone.View.extend({
         var new_history_name = this.modal.$("input[name=history_name]").val();
         var that = this;
         if (new_history_name !== "") {
-            $.post(Galaxy.root + "api/histories", {
+            $.post(`${Galaxy.root}api/histories`, {
                 name: new_history_name
             })
                 .done(new_history => {
@@ -275,10 +265,10 @@ var LibraryDatasetView = Backbone.View.extend({
 
     processImportToHistory: function(history_id) {
         var historyItem = new mod_library_model.HistoryItem();
-        historyItem.url = historyItem.urlRoot + history_id + "/contents";
+        historyItem.url = `${historyItem.urlRoot + history_id}/contents`;
         // set the used history as current so user will see the last one
         // that he imported into in the history panel on the 'analysis' page
-        jQuery.getJSON(Galaxy.root + "history/set_as_current?id=" + history_id);
+        jQuery.getJSON(`${Galaxy.root}history/set_as_current?id=${history_id}`);
         // save the dataset into selected history
         historyItem.save(
             { content: this.id, source: "library" },
@@ -298,8 +288,8 @@ var LibraryDatasetView = Backbone.View.extend({
                 error: function(model, response) {
                     if (typeof response.responseJSON !== "undefined") {
                         mod_toastr.error(
-                            "Dataset not imported. " +
-                                response.responseJSON.err_msg
+                            `Dataset not imported. ${response.responseJSON
+                                .err_msg}`
                         );
                     } else {
                         mod_toastr.error(
@@ -333,10 +323,7 @@ var LibraryDatasetView = Backbone.View.extend({
             })
         );
         $.get(
-            Galaxy.root +
-                "api/libraries/datasets/" +
-                self.id +
-                "/permissions?scope=current"
+            `${Galaxy.root}api/libraries/datasets/${self.id}/permissions?scope=current`
         )
             .done(fetched_permissions => {
                 self.prepareSelectBoxes({
@@ -358,9 +345,9 @@ var LibraryDatasetView = Backbone.View.extend({
         for (var i = 0; i < role_list.length; i++) {
             // Replace the : and , in role's name since these are select2 separators for initialData
             selected_roles.push(
-                role_list[i][1] +
-                    ":" +
-                    role_list[i][0].replace(":", " ").replace(",", " &")
+                `${role_list[i][1]}:${role_list[i][0]
+                    .replace(":", " ")
+                    .replace(",", " &")}`
             );
         }
         return selected_roles;
@@ -400,7 +387,7 @@ var LibraryDatasetView = Backbone.View.extend({
             multiple: true,
             placeholder: "Click to select a role",
             formatResult: function roleFormatResult(role) {
-                return role.name + " type: " + role.type;
+                return `${role.name} type: ${role.type}`;
             },
             formatSelection: function roleFormatSelection(role) {
                 return role.name;
@@ -421,15 +408,12 @@ var LibraryDatasetView = Backbone.View.extend({
             },
             dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
         };
-        select_options.container = this.$el.find("#" + options.selector);
+        select_options.container = this.$el.find(`#${options.selector}`);
         select_options.css = options.selector;
         select_options.initialData = options.initialData.join(",");
         select_options.ajax = {
-            url:
-                Galaxy.root +
-                "api/libraries/datasets/" +
-                this.id +
-                "/permissions?scope=available",
+            url: `${Galaxy.root}api/libraries/datasets/${this
+                .id}/permissions?scope=available`,
             dataType: "json",
             quietMillis: 100,
             data: function(term, page) {
@@ -524,10 +508,7 @@ var LibraryDatasetView = Backbone.View.extend({
     makeDatasetPrivate: function() {
         var self = this;
         $.post(
-            Galaxy.root +
-                "api/libraries/datasets/" +
-                self.id +
-                "/permissions?action=make_private"
+            `${Galaxy.root}api/libraries/datasets/${self.id}/permissions?action=make_private`
         )
             .done(fetched_permissions => {
                 self.model.set({ is_unrestricted: false });
@@ -546,10 +527,7 @@ var LibraryDatasetView = Backbone.View.extend({
     removeDatasetRestrictions: function() {
         var self = this;
         $.post(
-            Galaxy.root +
-                "api/libraries/datasets/" +
-                self.id +
-                "/permissions?action=remove_restrictions"
+            `${Galaxy.root}api/libraries/datasets/${self.id}/permissions?action=remove_restrictions`
         )
             .done(fetched_permissions => {
                 self.model.set({ is_unrestricted: true });
@@ -593,10 +571,7 @@ var LibraryDatasetView = Backbone.View.extend({
             this.modifySelectObject.$el.select2("data")
         );
         $.post(
-            Galaxy.root +
-                "api/libraries/datasets/" +
-                self.id +
-                "/permissions?action=set_permissions",
+            `${Galaxy.root}api/libraries/datasets/${self.id}/permissions?action=set_permissions`,
             {
                 "access_ids[]": access_ids,
                 "manage_ids[]": manage_ids,
@@ -624,7 +599,7 @@ var LibraryDatasetView = Backbone.View.extend({
         var that = this;
         if (this.list_genomes.length == 0) {
             mod_utils.get({
-                url: Galaxy.root + "api/datatypes?extension_only=False",
+                url: `${Galaxy.root}api/datatypes?extension_only=False`,
                 success: function(datatypes) {
                     for (var key in datatypes) {
                         that.list_extensions.push({
@@ -643,7 +618,7 @@ var LibraryDatasetView = Backbone.View.extend({
         }
         if (this.list_extensions.length == 0) {
             mod_utils.get({
-                url: Galaxy.root + "api/genomes",
+                url: `${Galaxy.root}api/genomes`,
                 success: function(genomes) {
                     for (var key in genomes) {
                         that.list_genomes.push({

client/galaxy/scripts/mvc/library/library-folder-view.js

@@ -34,8 +34,8 @@ var FolderView = Backbone.View.extend({
             error: function(model, response) {
                 if (typeof response.responseJSON !== "undefined") {
                     mod_toastr.error(
-                        response.responseJSON.err_msg +
-                            " Click this to go back.",
+                        `${response.responseJSON
+                            .err_msg} Click this to go back.`,
                         "",
                         {
                             onclick: function() {
@@ -70,12 +70,7 @@ var FolderView = Backbone.View.extend({
         this.$el.html(template({ folder: this.model, is_admin: is_admin }));
 
         var self = this;
-        $.get(
-            Galaxy.root +
-                "api/folders/" +
-                self.id +
-                "/permissions?scope=current"
-        )
+        $.get(`${Galaxy.root}api/folders/${self.id}/permissions?scope=current`)
             .done(fetched_permissions => {
                 self.prepareSelectBoxes({
                     fetched_permissions: fetched_permissions
@@ -95,7 +90,7 @@ var FolderView = Backbone.View.extend({
     _serializeRoles: function(role_list) {
         var selected_roles = [];
         for (var i = 0; i < role_list.length; i++) {
-            selected_roles.push(role_list[i][1] + ":" + role_list[i][0]);
+            selected_roles.push(`${role_list[i][1]}:${role_list[i][0]}`);
         }
         return selected_roles;
     },
@@ -147,13 +142,9 @@ var FolderView = Backbone.View.extend({
             css: id,
             multiple: true,
             placeholder: "Click to select a role",
-            container: self.$el.find("#" + id),
+            container: self.$el.find(`#${id}`),
             ajax: {
-                url:
-                    Galaxy.root +
-                    "api/folders/" +
-                    self.id +
-                    "/permissions?scope=available",
+                url: `${Galaxy.root}api/folders/${self.id}/permissions?scope=available`,
                 dataType: "json",
                 quietMillis: 100,
                 data: function(term, page) {
@@ -171,7 +162,7 @@ var FolderView = Backbone.View.extend({
                 }
             },
             formatResult: function roleFormatResult(role) {
-                return role.name + " type: " + role.type;
+                return `${role.name} type: ${role.type}`;
             },
 
             formatSelection: function roleFormatSelection(role) {
@@ -224,10 +215,7 @@ var FolderView = Backbone.View.extend({
             this.modifySelectObject.$el.select2("data")
         );
         $.post(
-            Galaxy.root +
-                "api/folders/" +
-                self.id +
-                "/permissions?action=set_permissions",
+            `${Galaxy.root}api/folders/${self.id}/permissions?action=set_permissions`,
             {
                 "add_ids[]": add_ids,
                 "manage_ids[]": manage_ids,

client/galaxy/scripts/mvc/library/library-folderlist-view.js

@@ -65,14 +65,12 @@ var FolderListView = Backbone.View.extend({
         this.folderContainer = new mod_library_model.FolderContainer({
             id: this.options.id
         });
-        this.folderContainer.url =
-            this.folderContainer.attributes.urlRoot +
-            this.options.id +
-            "/contents";
+        this.folderContainer.url = `${this.folderContainer.attributes.urlRoot +
+            this.options.id}/contents`;
 
         if (this.options.include_deleted) {
-            this.folderContainer.url =
-                this.folderContainer.url + "?include_deleted=true";
+            this.folderContainer.url = `${this.folderContainer
+                .url}?include_deleted=true`;
         }
         this.folderContainer.fetch({
             success: function(folder_container) {
@@ -82,8 +80,8 @@ var FolderListView = Backbone.View.extend({
             error: function(model, response) {
                 if (typeof response.responseJSON !== "undefined") {
                     mod_toastr.error(
-                        response.responseJSON.err_msg +
-                            " Click this to go back.",
+                        `${response.responseJSON
+                            .err_msg} Click this to go back.`,
                         "",
                         {
                             onclick: function() {
@@ -399,11 +397,11 @@ var FolderListView = Backbone.View.extend({
             $('[class*="sort-icon"]')
                 .removeClass("fa-sort-alpha-desc")
                 .removeClass("fa-sort-alpha-asc");
-            $(".sort-icon" + "-" + this.current_sort_key).addClass(
+            $(`.sort-icon-${this.current_sort_key}`).addClass(
                 "fa-sort-alpha-asc"
             );
         } else {
-            $(".sort-icon" + "-" + this.current_sort_key).addClass(
+            $(`.sort-icon-${this.current_sort_key}`).addClass(
                 "fa-sort-alpha-desc"
             );
         }

client/galaxy/scripts/mvc/library/library-folderrow-view.js

@@ -119,7 +119,7 @@ var FolderRowView = Backbone.View.extend({
         var dataset = Galaxy.libraries.folderListView.collection.get(
             dataset_id
         );
-        dataset.url = dataset.urlRoot + dataset.id + "?undelete=true";
+        dataset.url = `${dataset.urlRoot + dataset.id}?undelete=true`;
         dataset.destroy({
             success: function(model, response) {
                 Galaxy.libraries.folderListView.collection.remove(dataset_id);
@@ -135,12 +135,7 @@ var FolderRowView = Backbone.View.extend({
                     {
                         onclick: function() {
                             var folder_id = that.model.get("folder_id");
-                            window.location =
-                                Galaxy.root +
-                                "library/list#folders/" +
-                                folder_id +
-                                "/datasets/" +
-                                that.id;
+                            window.location = `${Galaxy.root}library/list#folders/${folder_id}/datasets/${that.id}`;
                         }
                     }
                 );
@@ -148,8 +143,8 @@ var FolderRowView = Backbone.View.extend({
             error: function(model, response) {
                 if (typeof response.responseJSON !== "undefined") {
                     mod_toastr.error(
-                        "Dataset was not undeleted. " +
-                            response.responseJSON.err_msg
+                        `Dataset was not undeleted. ${response.responseJSON
+                            .err_msg}`
                     );
                 } else {
                     mod_toastr.error(
@@ -168,7 +163,7 @@ var FolderRowView = Backbone.View.extend({
             .closest("tr")
             .data("id");
         var folder = Galaxy.libraries.folderListView.collection.get(folder_id);
-        folder.url = folder.urlRoot + folder.id + "?undelete=true";
+        folder.url = `${folder.urlRoot + folder.id}?undelete=true`;
         folder.destroy({
             success: function(model, response) {
                 Galaxy.libraries.folderListView.collection.remove(folder_id);
@@ -185,8 +180,8 @@ var FolderRowView = Backbone.View.extend({
             error: function(model, response) {
                 if (typeof response.responseJSON !== "undefined") {
                     mod_toastr.error(
-                        "Folder was not undeleted. " +
-                            response.responseJSON.err_msg
+                        `Folder was not undeleted. ${response.responseJSON
+                            .err_msg}`
                     );
                 } else {
                     mod_toastr.error(

client/galaxy/scripts/mvc/library/library-foldertoolbar-view.js

@@ -259,7 +259,7 @@ var FolderToolbarView = Backbone.View.extend({
         var new_history_name = this.modal.$("input[name=history_name]").val();
         var that = this;
         if (new_history_name !== "") {
-            $.post(Galaxy.root + "api/histories", {
+            $.post(`${Galaxy.root}api/histories`, {
                 name: new_history_name
             })
                 .done(new_history => {
@@ -306,7 +306,7 @@ var FolderToolbarView = Backbone.View.extend({
         for (var i = dataset_ids.length - 1; i >= 0; i--) {
             var library_dataset_id = dataset_ids[i];
             var historyItem = new mod_library_model.HistoryItem();
-            historyItem.url = historyItem.urlRoot + history_id + "/contents";
+            historyItem.url = `${historyItem.urlRoot + history_id}/contents`;
             historyItem.content = library_dataset_id;
             historyItem.source = "library";
             datasets_to_import.push(historyItem);
@@ -317,7 +317,7 @@ var FolderToolbarView = Backbone.View.extend({
         for (var i = folder_ids.length - 1; i >= 0; i--) {
             var library_folder_id = folder_ids[i];
             var historyItem = new mod_library_model.HistoryItem();
-            historyItem.url = historyItem.urlRoot + history_id + "/contents";
+            historyItem.url = `${historyItem.urlRoot + history_id}/contents`;
             historyItem.content = library_folder_id;
             historyItem.source = "library_folder";
             datasets_to_import.push(historyItem);
@@ -330,7 +330,7 @@ var FolderToolbarView = Backbone.View.extend({
         });
         // set the used history as current so user will see the last one
         // that he imported into in the history panel on the 'analysis' page
-        jQuery.getJSON(Galaxy.root + "history/set_as_current?id=" + history_id);
+        jQuery.getJSON(`${Galaxy.root}history/set_as_current?id=${history_id}`);
         this.chainCallImportingIntoHistory(datasets_to_import, history_name);
     },
 
@@ -339,8 +339,8 @@ var FolderToolbarView = Backbone.View.extend({
    */
     updateProgress: function() {
         this.progress += this.progressStep;
-        $(".progress-bar-import").width(Math.round(this.progress) + "%");
-        var txt_representation = Math.round(this.progress) + "% Complete";
+        $(".progress-bar-import").width(`${Math.round(this.progress)}%`);
+        var txt_representation = `${Math.round(this.progress)}% Complete`;
         $(".completion_span").text(txt_representation);
     },
 
@@ -362,7 +362,7 @@ var FolderToolbarView = Backbone.View.extend({
                 dataset_ids.push(row_id);
             }
         });
-        var url = Galaxy.root + "api/libraries/datasets/download/" + format;
+        var url = `${Galaxy.root}api/libraries/datasets/download/${format}`;
         var data = { ld_ids: dataset_ids, folder_ids: folder_ids };
         this.processDownload(url, data, "get");
     },
@@ -382,22 +382,12 @@ var FolderToolbarView = Backbone.View.extend({
             var inputs = "";
             $.each(data.split("&"), function() {
                 var pair = this.split("=");
-                inputs +=
-                    '<input type="hidden" name="' +
-                    pair[0] +
-                    '" value="' +
-                    pair[1] +
-                    '" />';
+                inputs += `<input type="hidden" name="${pair[0]}" value="${pair[1]}" />`;
             });
             // send request
             $(
-                '<form action="' +
-                    url +
-                    '" method="' +
-                    (method || "post") +
-                    '">' +
-                    inputs +
-                    "</form>"
+                `<form action="${url}" method="${method ||
+                    "post"}">${inputs}</form>`
             )
                 .appendTo("body")
                 .submit()
@@ -432,7 +422,7 @@ var FolderToolbarView = Backbone.View.extend({
                     },
                     closing_callback: function() {
                         Galaxy.libraries.library_router.navigate(
-                            "folders/" + self.id,
+                            `folders/${self.id}`,
                             { trigger: true }
                         );
                     }
@@ -475,7 +465,7 @@ var FolderToolbarView = Backbone.View.extend({
             },
             closing_callback: function() {
                 //  TODO: should not trigger routes outside of the router
-                Galaxy.libraries.library_router.navigate("folders/" + that.id, {
+                Galaxy.libraries.library_router.navigate(`folders/${that.id}`, {
                     trigger: true
                 });
             }
@@ -490,7 +480,7 @@ var FolderToolbarView = Backbone.View.extend({
     fetchExtAndGenomes: function() {
         var that = this;
         mod_utils.get({
-            url: Galaxy.root + "api/datatypes?extension_only=False",
+            url: `${Galaxy.root}api/datatypes?extension_only=False`,
             success: function(datatypes) {
                 that.list_extensions = [];
                 for (var key in datatypes) {
@@ -509,7 +499,7 @@ var FolderToolbarView = Backbone.View.extend({
             cache: true
         });
         mod_utils.get({
-            url: Galaxy.root + "api/genomes",
+            url: `${Galaxy.root}api/genomes`,
             success: function(genomes) {
                 that.list_genomes = [];
                 for (var key in genomes) {
@@ -568,7 +558,7 @@ var FolderToolbarView = Backbone.View.extend({
             },
             closing_callback: function() {
                 //  TODO: should not trigger routes outside of the router
-                Galaxy.libraries.library_router.navigate("folders/" + that.id, {
+                Galaxy.libraries.library_router.navigate(`folders/${that.id}`, {
                     trigger: true
                 });
             }
@@ -614,13 +604,8 @@ var FolderToolbarView = Backbone.View.extend({
         var target = options.source || "userdir";
         var disabled_jstree_element = this.options.disabled_jstree_element;
         this.jstree = new mod_library_model.Jstree();
-        this.jstree.url =
-            this.jstree.urlRoot +
-            "?target=" +
-            target +
-            "&format=jstree" +
-            "&disable=" +
-            disabled_jstree_element;
+        this.jstree.url = `${this.jstree
+            .urlRoot}?target=${target}&format=jstree&disable=${disabled_jstree_element}`;
         this.jstree.fetch({
             success: function(model, response) {
                 $("#jstree_browser").jstree("destroy");
@@ -795,7 +780,7 @@ var FolderToolbarView = Backbone.View.extend({
                 action: "adding_datasets"
             });
             if (selection_type === "folder") {
-                var full_source = options.source + "_folder";
+                var full_source = `${options.source}_folder`;
                 this.chainCallImportingFolders({
                     paths: paths,
                     preserve_dirs: preserve_dirs,
@@ -808,7 +793,7 @@ var FolderToolbarView = Backbone.View.extend({
                     tag_using_filenames: tag_using_filenames
                 });
             } else if (selection_type === "file") {
-                var full_source = options.source + "_file";
+                var full_source = `${options.source}_file`;
                 this.chainCallImportingUserdirFiles({
                     paths: paths,
                     file_type: file_type,
@@ -895,11 +880,8 @@ var FolderToolbarView = Backbone.View.extend({
             for (var i = history_item_ids.length - 1; i >= 0; i--) {
                 var history_item_id = history_item_ids[i];
                 var folder_item = new mod_library_model.Item();
-                folder_item.url =
-                    Galaxy.root +
-                    "api/folders/" +
-                    this.options.id +
-                    "/contents";
+                folder_item.url = `${Galaxy.root}api/folders/${this.options
+                    .id}/contents`;
                 if (history_item_types[i] === "collection") {
                     folder_item.set({ from_hdca_id: history_item_id });
                 } else {
@@ -1006,25 +988,7 @@ var FolderToolbarView = Backbone.View.extend({
         }
         var promise = $.when(
             $.post(
-                Galaxy.root +
-                    "api/libraries/datasets?encoded_folder_id=" +
-                    that.id +
-                    "&source=" +
-                    options.source +
-                    "&path=" +
-                    popped_item +
-                    "&file_type=" +
-                    options.file_type +
-                    "&link_data=" +
-                    options.link_data +
-                    "&space_to_tab=" +
-                    options.space_to_tab +
-                    "&to_posix_lines=" +
-                    options.to_posix_lines +
-                    "&dbkey=" +
-                    options.dbkey +
-                    "&tag_using_filenames=" +
-                    options.tag_using_filenames
+                `${Galaxy.root}api/libraries/datasets?encoded_folder_id=${that.id}&source=${options.source}&path=${popped_item}&file_type=${options.file_type}&link_data=${options.link_data}&space_to_tab=${options.space_to_tab}&to_posix_lines=${options.to_posix_lines}&dbkey=${options.dbkey}&tag_using_filenames=${options.tag_using_filenames}`
             )
         );
         promise
@@ -1069,27 +1033,7 @@ var FolderToolbarView = Backbone.View.extend({
         }
         var promise = $.when(
             $.post(
-                Galaxy.root +
-                    "api/libraries/datasets?encoded_folder_id=" +
-                    that.id +
-                    "&source=" +
-                    options.source +
-                    "&path=" +
-                    popped_item +
-                    "&preserve_dirs=" +
-                    options.preserve_dirs +
-                    "&link_data=" +
-                    options.link_data +
-                    "&to_posix_lines=" +
-                    options.to_posix_lines +
-                    "&space_to_tab=" +
-                    options.space_to_tab +
-                    "&file_type=" +
-                    options.file_type +
-                    "&dbkey=" +
-                    options.dbkey +
-                    "&tag_using_filenames=" +
-                    options.tag_using_filenames
+                `${Galaxy.root}api/libraries/datasets?encoded_folder_id=${that.id}&source=${options.source}&path=${popped_item}&preserve_dirs=${options.preserve_dirs}&link_data=${options.link_data}&to_posix_lines=${options.to_posix_lines}&space_to_tab=${options.space_to_tab}&file_type=${options.file_type}&dbkey=${options.dbkey}&tag_using_filenames=${options.tag_using_filenames}`
             )
         );
         promise

client/galaxy/scripts/mvc/library/library-library-view.js

@@ -34,8 +34,8 @@ var LibraryView = Backbone.View.extend({
             error: function(model, response) {
                 if (typeof response.responseJSON !== "undefined") {
                     mod_toastr.error(
-                        response.responseJSON.err_msg +
-                            " Click this to go back.",
+                        `${response.responseJSON
+                            .err_msg} Click this to go back.`,
                         "",
                         {
                             onclick: function() {
@@ -81,10 +81,7 @@ var LibraryView = Backbone.View.extend({
 
         var self = this;
         $.get(
-            Galaxy.root +
-                "api/libraries/" +
-                self.id +
-                "/permissions?scope=current"
+            `${Galaxy.root}api/libraries/${self.id}/permissions?scope=current`
         )
             .done(fetched_permissions => {
                 self.prepareSelectBoxes({
@@ -105,7 +102,7 @@ var LibraryView = Backbone.View.extend({
     _serializeRoles: function(role_list) {
         var selected_roles = [];
         for (var i = 0; i < role_list.length; i++) {
-            selected_roles.push(role_list[i][1] + ":" + role_list[i][0]);
+            selected_roles.push(`${role_list[i][1]}:${role_list[i][0]}`);
         }
         return selected_roles;
     },
@@ -170,14 +167,9 @@ var LibraryView = Backbone.View.extend({
             css: id,
             multiple: true,
             placeholder: "Click to select a role",
-            container: self.$el.find("#" + id),
+            container: self.$el.find(`#${id}`),
             ajax: {
-                url:
-                    Galaxy.root +
-                    "api/libraries/" +
-                    self.id +
-                    "/permissions?scope=available&is_library_access=" +
-                    is_library_access,
+                url: `${Galaxy.root}api/libraries/${self.id}/permissions?scope=available&is_library_access=${is_library_access}`,
                 dataType: "json",
                 quietMillis: 100,
                 data: function(term, page) {
@@ -195,7 +187,7 @@ var LibraryView = Backbone.View.extend({
                 }
             },
             formatResult: function roleFormatResult(role) {
-                return role.name + " type: " + role.type;
+                return `${role.name} type: ${role.type}`;
             },
 
             formatSelection: function roleFormatSelection(role) {
@@ -226,10 +218,7 @@ var LibraryView = Backbone.View.extend({
     makeDatasetPrivate: function() {
         var self = this;
         $.post(
-            Galaxy.root +
-                "api/libraries/datasets/" +
-                self.id +
-                "/permissions?action=make_private"
+            `${Galaxy.root}api/libraries/datasets/${self.id}/permissions?action=make_private`
         )
             .done(fetched_permissions => {
                 self.model.set({ is_unrestricted: false });
@@ -248,10 +237,7 @@ var LibraryView = Backbone.View.extend({
     removeDatasetRestrictions: function() {
         var self = this;
         $.post(
-            Galaxy.root +
-                "api/libraries/datasets/" +
-                self.id +
-                "/permissions?action=remove_restrictions"
+            `${Galaxy.root}api/libraries/datasets/${self.id}/permissions?action=remove_restrictions`
         )
             .done(fetched_permissions => {
                 self.model.set({ is_unrestricted: true });
@@ -293,10 +279,7 @@ var LibraryView = Backbone.View.extend({
         );
 
         $.post(
-            Galaxy.root +
-                "api/libraries/" +
-                self.id +
-                "/permissions?action=set_permissions",
+            `${Galaxy.root}api/libraries/${self.id}/permissions?action=set_permissions`,
             {
                 "access_ids[]": access_ids,
                 "add_ids[]": add_ids,

client/galaxy/scripts/mvc/library/library-librarylist-view.js

@@ -26,7 +26,7 @@ var LibraryListView = Backbone.View.extend({
         this.modal = null;
         // collection of {Item}s
         this.collection = new mod_library_model.Libraries();
-        this.collection.url = this.collection.urlRoot + "?deleted=false";
+        this.collection.url = `${this.collection.urlRoot}?deleted=false`;
         this.collection.fetch({
             success: function() {
                 that.render();
@@ -145,7 +145,7 @@ var LibraryListView = Backbone.View.extend({
             this.render();
         } else {
             var that = this;
-            this.collection.url = this.collection.urlRoot + "?deleted=true";
+            this.collection.url = `${this.collection.urlRoot}?deleted=true`;
             this.collection.fetch({
                 remove: false,
                 success: function() {

client/galaxy/scripts/mvc/library/library-libraryrow-view.js

@@ -229,7 +229,7 @@ var LibraryRowView = Backbone.View.extend({
         var row_view = this;
 
         // mark the library undeleted
-        library.url = library.urlRoot + library.id + "?undelete=true";
+        library.url = `${library.urlRoot + library.id}?undelete=true`;
         library.destroy({
             success: function(library) {
                 // add the newly undeleted library back to the collection

client/galaxy/scripts/mvc/library/library-model.js

@@ -3,7 +3,7 @@ import mod_util from "mvc/library/library-util";
 // LIBRARY RELATED MODELS
 
 var Library = Backbone.Model.extend({
-    urlRoot: Galaxy.root + "api/libraries/",
+    urlRoot: `${Galaxy.root}api/libraries/`,
 
     /** based on show_deleted would this lib show in the list of lib's?
        *  @param {Boolean} show_deleted are we including deleted libraries?
@@ -18,7 +18,7 @@ var Library = Backbone.Model.extend({
 });
 
 var Libraries = Backbone.Collection.extend({
-    urlRoot: Galaxy.root + "api/libraries",
+    urlRoot: `${Galaxy.root}api/libraries`,
 
     model: Library,
 
@@ -69,11 +69,11 @@ var Libraries = Backbone.Collection.extend({
 var LibraryItem = Backbone.Model.extend({});
 
 var Ldda = LibraryItem.extend({
-    urlRoot: Galaxy.root + "api/libraries/datasets/"
+    urlRoot: `${Galaxy.root}api/libraries/datasets/`
 });
 
 var FolderAsModel = LibraryItem.extend({
-    urlRoot: Galaxy.root + "api/folders/"
+    urlRoot: `${Galaxy.root}api/folders/`
 });
 
 var Folder = Backbone.Collection.extend({
@@ -91,7 +91,7 @@ var Folder = Backbone.Collection.extend({
 var FolderContainer = Backbone.Model.extend({
     defaults: {
         folder: new Folder(),
-        urlRoot: Galaxy.root + "api/folders/",
+        urlRoot: `${Galaxy.root}api/folders/`,
         id: "unknown"
     },
     parse: function(obj) {
@@ -121,26 +121,26 @@ var FolderContainer = Backbone.Model.extend({
 // TODO UNITE
 
 var HistoryItem = Backbone.Model.extend({
-    urlRoot: Galaxy.root + "api/histories/"
+    urlRoot: `${Galaxy.root}api/histories/`
 });
 
 var HistoryContents = Backbone.Collection.extend({
-    urlRoot: Galaxy.root + "api/histories/",
+    urlRoot: `${Galaxy.root}api/histories/`,
     initialize: function(options) {
         this.id = options.id;
     },
     url: function() {
-        return this.urlRoot + this.id + "/contents";
+        return `${this.urlRoot + this.id}/contents`;
     },
     model: HistoryItem
 });
 
 var GalaxyHistory = Backbone.Model.extend({
-    urlRoot: Galaxy.root + "api/histories/"
+    urlRoot: `${Galaxy.root}api/histories/`
 });
 
 var GalaxyHistories = Backbone.Collection.extend({
-    url: Galaxy.root + "api/histories",
+    url: `${Galaxy.root}api/histories`,
     model: GalaxyHistory
 });
 
@@ -151,7 +151,7 @@ var GalaxyHistories = Backbone.Collection.extend({
      */
 
 var Jstree = Backbone.Model.extend({
-    urlRoot: Galaxy.root + "api/remote_files"
+    urlRoot: `${Galaxy.root}api/remote_files`
 });
 
 export default {

client/galaxy/scripts/mvc/list/list-item.js

@@ -167,7 +167,7 @@ var ExpandableView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
      *  @fires collapsed when a body has been collapsed
      */
     collapse: function() {
-        this.debug(this + "(ExpandableView).collapse");
+        this.debug(`${this}(ExpandableView).collapse`);
         var view = this;
         view.expanded = false;
         this.$details().slideUp(view.fxSpeed, () => {
@@ -323,8 +323,8 @@ var ListItemView = ExpandableView.extend(
         // ......................................................................... misc
         /** String representation */
         toString: function() {
-            var modelString = this.model ? this.model + "" : "(no model)";
-            return "ListItemView(" + modelString + ")";
+            var modelString = this.model ? `${this.model}` : "(no model)";
+            return `ListItemView(${modelString})`;
         }
     })
 );

client/galaxy/scripts/mvc/list/list-view.js

@@ -54,7 +54,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
             if (attributes.logger) {
                 this.logger = attributes.logger;
             }
-            this.log(this + ".initialize:", attributes);
+            this.log(`${this}.initialize:`, attributes);
 
             // ---- instance vars
             /** how quickly should jquery fx run? */
@@ -148,7 +148,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
 
         /** listening for collection events */
         _setUpCollectionListeners: function() {
-            this.log(this + "._setUpCollectionListeners", this.collection);
+            this.log(`${this}._setUpCollectionListeners`, this.collection);
             this.stopListening(this.collection);
 
             // bubble up error events
@@ -188,7 +188,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
 
         /** listening for sub-view events that bubble up with the 'view:' prefix */
         _setUpViewListeners: function() {
-            this.log(this + "._setUpViewListeners");
+            this.log(`${this}._setUpViewListeners`);
 
             // shift to select a range
             this.on({
@@ -218,7 +218,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
      *  @param {Number or String} speed   the speed of the render
      */
         render: function(speed) {
-            this.log(this + ".render", speed);
+            this.log(`${this}.render`, speed);
             var $newRender = this._buildNewRender();
             this._setUpBehaviors($newRender);
             this._queueNewRender($newRender, speed);
@@ -227,7 +227,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
 
         /** Build a temp div containing the new children for the view's $el. */
         _buildNewRender: function() {
-            this.debug(this + "(ListPanel)._buildNewRender");
+            this.debug(`${this}(ListPanel)._buildNewRender`);
             var $newRender = $(this.templates.el({}, this));
             this._renderControls($newRender);
             this._renderTitle($newRender);
@@ -239,7 +239,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
 
         /** Build a temp div containing the new children for the view's $el. */
         _renderControls: function($newRender) {
-            this.debug(this + "(ListPanel)._renderControls");
+            this.debug(`${this}(ListPanel)._renderControls`);
             var $controls = $(this.templates.controls({}, this));
             $newRender.find(".controls").replaceWith($controls);
             return $controls;
@@ -383,7 +383,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
         renderItems: function($whereTo) {
             $whereTo = $whereTo || this.$el;
             var panel = this;
-            panel.log(this + ".renderItems", $whereTo);
+            panel.log(`${this}.renderItems`, $whereTo);
 
             var $list = panel.$list($whereTo);
             panel.freeViews();
@@ -485,7 +485,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
             // send all events to the panel, re-namspaceing them with the view prefix
             this.listenTo(view, "all", function() {
                 var args = Array.prototype.slice.call(arguments, 0);
-                args[0] = "view:" + args[0];
+                args[0] = `view:${args[0]}`;
                 panel.trigger.apply(panel, args);
             });
 
@@ -900,7 +900,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
         // ------------------------------------------------------------------------ misc
         /** Return a string rep of the panel */
         toString: function() {
-            return "ListPanel(" + this.collection + ")";
+            return `ListPanel(${this.collection})`;
         }
     }
 );
@@ -980,7 +980,7 @@ var ModelListPanel = ListPanel.extend({
      */
     setModel: function(model, attributes) {
         attributes = attributes || {};
-        this.debug(this + ".setModel:", model, attributes);
+        this.debug(`${this}.setModel:`, model, attributes);
 
         this.freeModel();
         this.freeViews();
@@ -1028,7 +1028,7 @@ var ModelListPanel = ListPanel.extend({
     /** listening for model events */
     _setUpModelListeners: function() {
         // override
-        this.log(this + "._setUpModelListeners", this.model);
+        this.log(`${this}._setUpModelListeners`, this.model);
         // bounce model errors up to the panel
         this.listenTo(
             this.model,
@@ -1045,7 +1045,7 @@ var ModelListPanel = ListPanel.extend({
         // debugging
         if (this.logger) {
             this.listenTo(this.model, "all", function(event) {
-                this.info(this + "(model)", event, arguments);
+                this.info(`${this}(model)`, event, arguments);
             });
         }
         return this;
@@ -1054,7 +1054,7 @@ var ModelListPanel = ListPanel.extend({
     /** Build a temp div containing the new children for the view's $el.
      */
     _renderControls: function($newRender) {
-        this.debug(this + "(ModelListPanel)._renderControls");
+        this.debug(`${this}(ModelListPanel)._renderControls`);
         var json = this.model ? this.model.toJSON() : {};
         var $controls = $(this.templates.controls(json, this));
         $newRender.find(".controls").replaceWith($controls);
@@ -1064,7 +1064,7 @@ var ModelListPanel = ListPanel.extend({
     // ------------------------------------------------------------------------ misc
     /** Return a string rep of the panel */
     toString: function() {
-        return "ModelListPanel(" + this.model + ")";
+        return `ModelListPanel(${this.model})`;
     }
 });
 

client/galaxy/scripts/mvc/tag.js

@@ -22,7 +22,7 @@ var TagsEditor = Backbone.View
             if (options.usePrompt === false) {
                 this.label = "";
             } else {
-                this.label = '<label class="prompt">' + _l("Tags") + "</label>";
+                this.label = `<label class="prompt">${_l("Tags")}</label>`;
             }
             this.workflow_mode = options.workflow_mode || false;
             if (this.workflow_mode) {
@@ -55,14 +55,14 @@ var TagsEditor = Backbone.View
 
         _hashToName: function(tag) {
             if (tag.startsWith("#")) {
-                return "name:" + tag.slice(1);
+                return `name:${tag.slice(1)}`;
             }
             return tag;
         },
 
         _nameToHash: function(tag) {
             if (tag.startsWith("name:")) {
-                tag = "#" + tag.slice(5);
+                tag = `#${tag.slice(5)}`;
             }
             return tag;
         },
@@ -101,9 +101,7 @@ var TagsEditor = Backbone.View
 
         _renderEditor: function() {
             // set up initial tags by adding as CSV to input vals (necc. to init select2)
-            return (
-                '<input class="tags-input" value="' + this.tagsToCSV() + '"/>'
-            );
+            return `<input class="tags-input" value="${this.tagsToCSV()}"/>`;
         },
 
         _renderTags: function() {
@@ -112,16 +110,13 @@ var TagsEditor = Backbone.View
             var renderedArray = [];
             _.each(tags, tag => {
                 tag = tag.indexOf("name:") == 0 ? tag.slice(5) : tag;
-                var renderString =
-                    '<span class="label label-info">' + tag + "</span>";
+                var renderString = `<span class="label label-info">${tag}</span>`;
                 renderedArray.push(renderString);
             });
             if (renderedArray.length === 0) {
                 // If there are no tags to render we just show the add-tag-button
                 renderedArray.push(
-                    "<img src=" +
-                        addButton +
-                        ' class="add-tag-button" title="Add tags"/>'
+                    `<img src=${addButton} class="add-tag-button" title="Add tags"/>`
                 );
             }
             return renderedArray.join(" ");
@@ -164,7 +159,7 @@ var TagsEditor = Backbone.View
                 if (event.added) {
                     //??: solve weird behavior in FF on test.galaxyproject.org where
                     //  event.added.text is string object: 'String{ 0="o", 1="n", 2="e" }'
-                    self._addNewTagToTagsUsed(event.added.text + "");
+                    self._addNewTagToTagsUsed(`${event.added.text}`);
                 }
             });
         },
@@ -191,7 +186,7 @@ var TagsEditor = Backbone.View
 
         /** string rep */
         toString: function() {
-            return ["TagsEditor(", this.model + "", ")"].join("");
+            return ["TagsEditor(", `${this.model}`, ")"].join("");
         }
     });
 

client/galaxy/scripts/mvc/tool/tool-form-base.js

@@ -70,13 +70,7 @@ export default FormBase.extend({
         this.model.set({
             title:
                 options.fixed_title ||
-                "<b>" +
-                    options.name +
-                    "</b> " +
-                    options.description +
-                    " (Galaxy Version " +
-                    options.version +
-                    ")",
+                `<b>${options.name}</b> ${options.description} (Galaxy Version ${options.version})`,
             operations: !options.hide_operations && this._operations(),
             onchange: function() {
                 self.deferred.reset();
@@ -96,14 +90,7 @@ export default FormBase.extend({
         this.show_message &&
             this.message.update({
                 status: "success",
-                message:
-                    "Now you are using '" +
-                    options.name +
-                    "' version " +
-                    options.version +
-                    ", id '" +
-                    options.id +
-                    "'.",
+                message: `Now you are using '${options.name}' version ${options.version}, id '${options.id}'.`,
                 persistent: false
             });
         this.show_message = true;
@@ -129,7 +116,7 @@ export default FormBase.extend({
                 var version = options.versions[i];
                 if (version != options.version) {
                     versions_button.addMenu({
-                        title: "Switch to " + version,
+                        title: `Switch to ${version}`,
                         version: version,
                         icon: "fa-cube",
                         onclick: function() {
@@ -162,7 +149,7 @@ export default FormBase.extend({
                 icon: "fa-question-circle",
                 title: "Question?",
                 onclick: function() {
-                    window.open(options.biostar_url + "/p/new/post/");
+                    window.open(`${options.biostar_url}/p/new/post/`);
                 }
             });
             menu_button.addMenu({
@@ -170,9 +157,7 @@ export default FormBase.extend({
                 title: "Search",
                 onclick: function() {
                     window.open(
-                        options.biostar_url +
-                            "/local/search/page/?q=" +
-                            options.name
+                        `${options.biostar_url}/local/search/page/?q=${options.name}`
                     );
                 }
             });
@@ -183,10 +168,8 @@ export default FormBase.extend({
             onclick: function() {
                 prompt(
                     "Copy to clipboard: Ctrl+C, Enter",
-                    window.location.origin +
-                        Galaxy.root +
-                        "root?tool_id=" +
-                        options.id
+                    `${window.location.origin +
+                        Galaxy.root}root?tool_id=${options.id}`
                 );
             }
         });
@@ -197,8 +180,7 @@ export default FormBase.extend({
                 icon: "fa-download",
                 title: "Download",
                 onclick: function() {
-                    window.location.href =
-                        Galaxy.root + "api/tools/" + options.id + "/download";
+                    window.location.href = `${Galaxy.root}api/tools/${options.id}/download`;
                 }
             });
             menu_button.addMenu({
@@ -206,8 +188,7 @@ export default FormBase.extend({
                 title: "Reload XML",
                 onclick: function() {
                     Utils.get({
-                        url:
-                            Galaxy.root + "api/tools/" + options.id + "/reload",
+                        url: `${Galaxy.root}api/tools/${options.id}/reload`,
                         success: function(response) {
                             self.message.update({
                                 persistent: false,
@@ -320,7 +301,7 @@ export default FormBase.extend({
             _.each(options.requirements, (req, i) => {
                 requirements_message +=
                     req.name +
-                    (req.version ? " (Version " + req.version + ")" : "") +
+                    (req.version ? ` (Version ${req.version})` : "") +
                     (i < nreq - 2 ? ", " : i == nreq - 2 ? " and " : "");
             });
             var requirements_link = $("<a/>")
@@ -328,7 +309,7 @@ export default FormBase.extend({
                 .attr("href", "https://galaxyproject.org/tools/requirements/")
                 .text("here");
             return $("<span/>")
-                .append(requirements_message + ". Click ")
+                .append(`${requirements_message}. Click `)
                 .append(requirements_link)
                 .append(" for more information.");
         }

client/galaxy/scripts/mvc/tool/tool-form-composite.js

@@ -52,16 +52,16 @@ var View = Backbone.View.extend({
         _.each(this.model.get("steps"), (step, i) => {
             Galaxy.emit.debug(
                 "tool-form-composite::initialize()",
-                i + " : Preparing workflow step."
+                `${i} : Preparing workflow step.`
             );
             var icon = WorkflowIcons[step.step_type];
-            var title =
-                parseInt(i + 1) + ": " + (step.step_label || step.step_name);
+            var title = `${parseInt(i + 1)}: ${step.step_label ||
+                step.step_name}`;
             if (step.annotation) {
-                title += " - " + step.annotation;
+                title += ` - ${step.annotation}`;
             }
             if (step.step_version) {
-                title += " (Galaxy Version " + step.step_version + ")";
+                title += ` (Galaxy Version ${step.step_version})`;
             }
             step = Utils.merge(
                 {
@@ -127,12 +127,10 @@ var View = Backbone.View.extend({
                     var connection = connections_by_name[name];
                     if (connection) {
                         input.type = "hidden";
-                        input.help = input.step_linked ? input.help + ", " : "";
-                        input.help +=
-                            "Output dataset '" +
-                            connection.output_name +
-                            "' from step " +
-                            (parseInt(i) + 1);
+                        input.help = input.step_linked ? `${input.help}, ` : "";
+                        input.help += `Output dataset '${connection.output_name}' from step ${parseInt(
+                            i
+                        ) + 1}`;
                         input.step_linked = input.step_linked || [];
                         input.step_linked.push(step);
                     }
@@ -153,7 +151,7 @@ var View = Backbone.View.extend({
                         label: wp_name,
                         name: wp_name,
                         type: "text",
-                        color: "hsl( " + ++wp_count * 100 + ", 70%, 30% )",
+                        color: `hsl( ${++wp_count * 100}, 70%, 30% )`,
                         style: "ui-form-wp-source",
                         links: []
                     })
@@ -254,7 +252,7 @@ var View = Backbone.View.extend({
             .empty()
             .append(
                 new Ui.Label({
-                    title: "Workflow: " + this.model.get("name")
+                    title: `Workflow: ${this.model.get("name")}`
                 }).$el
             )
             .append(this.execute_btn.$el);
@@ -366,7 +364,7 @@ var View = Backbone.View.extend({
                     );
                     Utils.request({
                         type: "POST",
-                        url: Galaxy.root + "api/tools/" + step.id + "/build",
+                        url: `${Galaxy.root}api/tools/${step.id}/build`,
                         data: current_state,
                         success: function(data) {
                             form.update(data);
@@ -405,7 +403,7 @@ var View = Backbone.View.extend({
                                         _.reduce(
                                             step.post_job_actions,
                                             (memo, value) =>
-                                                memo + " " + value.short_str,
+                                                `${memo} ${value.short_str}`,
                                             ""
                                         )
                                     )
@@ -458,7 +456,7 @@ var View = Backbone.View.extend({
                 });
             Galaxy.emit.debug(
                 "tool-form-composite::initialize()",
-                step.index + " : Workflow step state ready.",
+                `${step.index} : Workflow step state ready.`,
                 step
             );
             setTimeout(() => {
@@ -633,11 +631,7 @@ var View = Backbone.View.extend({
             );
             Utils.request({
                 type: "POST",
-                url:
-                    Galaxy.root +
-                    "api/workflows/" +
-                    this.model.id +
-                    "/invocations",
+                url: `${Galaxy.root}api/workflows/${this.model.id}/invocations`,
                 data: job_def,
                 success: function(response) {
                     Galaxy.emit.debug(
@@ -652,7 +646,7 @@ var View = Backbone.View.extend({
                     if ($.isArray(response) && response.length > 0) {
                         self.$el.append($("<div/>", { id: "webhook-view" }));
                         var WebhookApp = new Webhooks.WebhookView({
-                            urlRoot: Galaxy.root + "api/webhooks/workflow",
+                            urlRoot: `${Galaxy.root}api/webhooks/workflow`,
                             toolId: job_def.tool_id,
                             toolVersion: job_def.tool_version
                         });
@@ -752,13 +746,11 @@ var View = Backbone.View.extend({
                 .addClass("donemessagelarge")
                 .append(
                     $("<p/>").html(
-                        "Successfully invoked workflow <b>" +
-                            Utils.sanitize(this.model.get("name")) +
-                            "</b>" +
-                            (response.length > 1
-                                ? " <b>" + response.length + " times</b>"
-                                : "") +
-                            "."
+                        `Successfully invoked workflow <b>${Utils.sanitize(
+                            this.model.get("name")
+                        )}</b>${response.length > 1
+                            ? ` <b>${response.length} times</b>`
+                            : ""}.`
                     )
                 )
                 .append(
@@ -781,8 +773,9 @@ var View = Backbone.View.extend({
             .addClass("errormessagelarge")
             .append(
                 $("<p/>").text(
-                    "The server could not complete the request. Please contact the Galaxy Team if this error persists. " +
-                        (JSON.stringify(err_msg) || "")
+                    `The server could not complete the request. Please contact the Galaxy Team if this error persists. ${JSON.stringify(
+                        err_msg
+                    ) || ""}`
                 )
             )
             .append($("<pre/>").text(JSON.stringify(response, null, 4)));

client/galaxy/scripts/mvc/tool/tool-form.js

@@ -21,17 +21,9 @@ var View = Backbone.View.extend({
                         var build_data = {};
                         var job_id = options.job_id;
                         if (job_id) {
-                            build_url =
-                                Galaxy.root +
-                                "api/jobs/" +
-                                job_id +
-                                "/build_for_rerun";
+                            build_url = `${Galaxy.root}api/jobs/${job_id}/build_for_rerun`;
                         } else {
-                            build_url =
-                                Galaxy.root +
-                                "api/tools/" +
-                                options.id +
-                                "/build";
+                            build_url = `${Galaxy.root}api/tools/${options.id}/build`;
                             build_data = $.extend({}, Galaxy.params);
                             build_data["tool_id"] &&
                                 delete build_data["tool_id"];
@@ -62,15 +54,11 @@ var View = Backbone.View.extend({
                                     (response && response.err_msg) ||
                                     "Uncaught error.";
                                 if (status == 401) {
-                                    window.location =
-                                        Galaxy.root +
-                                        "user/login?" +
-                                        $.param({
-                                            redirect:
-                                                Galaxy.root +
-                                                "?tool_id=" +
-                                                options.id
-                                        });
+                                    window.location = `${Galaxy.root}user/login?${$.param(
+                                        {
+                                            redirect: `${Galaxy.root}?tool_id=${options.id}`
+                                        }
+                                    )}`;
                                 } else if (form.$el.is(":empty")) {
                                     form.$el.prepend(
                                         new Ui.Message({
@@ -115,11 +103,9 @@ var View = Backbone.View.extend({
                         );
                         Utils.request({
                             type: "POST",
-                            url:
-                                Galaxy.root +
-                                "api/tools/" +
-                                form.model.get("id") +
-                                "/build",
+                            url: `${Galaxy.root}api/tools/${form.model.get(
+                                "id"
+                            )}/build`,
                             data: current_state,
                             success: function(data) {
                                 form.update(data);
@@ -156,7 +142,7 @@ var View = Backbone.View.extend({
         // build execute button
         var execute_button = new Ui.Button({
             icon: "fa-check",
-            tooltip: "Execute: " + options.name + " (" + options.version + ")",
+            tooltip: `Execute: ${options.name} (${options.version})`,
             title: "Execute",
             cls: "btn btn-primary ui-clear-float",
             wait_cls: "btn btn-info ui-clear-float",
@@ -207,7 +193,7 @@ var View = Backbone.View.extend({
             callback && callback();
             return;
         }
-        if (options.action !== Galaxy.root + "tool_runner/index") {
+        if (options.action !== `${Galaxy.root}tool_runner/index`) {
             var $f = $("<form/>").attr({
                 action: options.action,
                 method: options.method,
@@ -231,7 +217,7 @@ var View = Backbone.View.extend({
         );
         Utils.request({
             type: "POST",
-            url: Galaxy.root + "api/tools",
+            url: `${Galaxy.root}api/tools`,
             data: job_def,
             success: function(response) {
                 callback && callback();
@@ -241,7 +227,7 @@ var View = Backbone.View.extend({
                 if (response.jobs && response.jobs.length > 0) {
                     self.$el.append($("<div/>", { id: "webhook-view" }));
                     var WebhookApp = new Webhooks.WebhookView({
-                        urlRoot: Galaxy.root + "api/webhooks/tool",
+                        urlRoot: `${Galaxy.root}api/webhooks/tool`,
                         toolId: job_def.tool_id
                     });
                 }
@@ -328,11 +314,7 @@ var View = Backbone.View.extend({
                 } else if (batch_n !== n) {
                     this.form.highlight(
                         input_id,
-                        "Please make sure that you select the same number of inputs for all batch mode fields. This field contains <b>" +
-                            n +
-                            "</b> selection(s) while a previous field contains <b>" +
-                            batch_n +
-                            "</b>."
+                        `Please make sure that you select the same number of inputs for all batch mode fields. This field contains <b>${n}</b> selection(s) while a previous field contains <b>${batch_n}</b>.`
                     );
                     return false;
                 }
@@ -344,20 +326,19 @@ var View = Backbone.View.extend({
     _templateSuccess: function(response) {
         if (response.jobs && response.jobs.length > 0) {
             var njobs = response.jobs.length;
-            var njobs_text = njobs == 1 ? "1 job has" : njobs + " jobs have";
+            var njobs_text = njobs == 1 ? "1 job has" : `${njobs} jobs have`;
             var $message = $("<div/>")
                 .addClass("donemessagelarge")
                 .append(
                     $("<p/>").text(
-                        njobs_text +
-                            " been successfully added to the queue - resulting in the following datasets:"
+                        `${njobs_text} been successfully added to the queue - resulting in the following datasets:`
                     )
                 );
             _.each(response.outputs, output => {
                 $message.append(
                     $("<p/>")
                         .addClass("messagerow")
-                        .append($("<b/>").text(output.hid + ": " + output.name))
+                        .append($("<b/>").text(`${output.hid}: ${output.name}`))
                 );
             });
             $message.append(
@@ -381,8 +362,8 @@ var View = Backbone.View.extend({
             .addClass("errormessagelarge")
             .append(
                 $("<p/>").text(
-                    "The server could not complete the request. Please contact the Galaxy Team if this error persists. " +
-                        (err_msg || "")
+                    `The server could not complete the request. Please contact the Galaxy Team if this error persists. ${err_msg ||
+                        ""}`
                 )
             )
             .append($("<pre/>").text(JSON.stringify(response, null, 4)));

client/galaxy/scripts/mvc/tool/tool-genomespace.js

@@ -4,8 +4,7 @@
 export default {
     openFileBrowser: function(options) {
         var GS_UI_URL = window.Galaxy.config.genomespace_ui_url;
-        var GS_UPLOAD_URL =
-            GS_UI_URL + "upload/loadUrlToGenomespace.html?getLocation=true";
+        var GS_UPLOAD_URL = `${GS_UI_URL}upload/loadUrlToGenomespace.html?getLocation=true`;
 
         var newWin = window.open(
             GS_UPLOAD_URL,

client/galaxy/scripts/mvc/tool/tools.js

@@ -124,7 +124,7 @@ var Tool = Backbone.Model.extend({
         outputs: []
     },
 
-    urlRoot: Galaxy.root + "api/tools",
+    urlRoot: `${Galaxy.root}api/tools`,
 
     initialize: function(options) {
         // Set parameters.
@@ -361,7 +361,7 @@ var ToolSearch = Backbone.Model.extend({
         clear_key: 27
     },
 
-    urlRoot: Galaxy.root + "api/tools",
+    urlRoot: `${Galaxy.root}api/tools`,
 
     initialize: function() {
         this.on("change:query", this.do_search);
@@ -392,7 +392,7 @@ var ToolSearch = Backbone.Model.extend({
         this.timer = setTimeout(() => {
             // log the search to analytics if present
             if (typeof ga !== "undefined") {
-                ga("send", "pageview", Galaxy.root + "?q=" + q);
+                ga("send", "pageview", `${Galaxy.root}?q=${q}`);
             }
             $.get(
                 self.urlRoot,

client/galaxy/scripts/mvc/toolshed/categories-view.js

@@ -14,8 +14,8 @@ var ToolShedCategories = Backbone.View.extend({
         this.options = _.defaults(this.options || options, this.defaults);
         this.model = new toolshed_model.Categories();
         this.listenTo(this.model, "sync", this.render);
-        this.model.url =
-            this.model.url + "?tool_shed_url=" + this.options.tool_shed;
+        this.model.url = `${this.model.url}?tool_shed_url=${this.options
+            .tool_shed}`;
         this.model.tool_shed = shed;
         this.model.fetch();
     },
@@ -35,7 +35,7 @@ var ToolShedCategories = Backbone.View.extend({
         $("#search_box").autocomplete({
             source: function(request, response) {
                 var shed_url = that.model.tool_shed.replace(/%2f/g, "/");
-                var base_url = Galaxy.root + "api/tool_shed/search";
+                var base_url = `${Galaxy.root}api/tool_shed/search`;
                 var params = {
                     term: request.term,
                     tool_shed_url: shed_url
@@ -49,13 +49,13 @@ var ToolShedCategories = Backbone.View.extend({
             minLength: 3,
             select: function(event, ui) {
                 var tsr_id = ui.item.value;
-                var api_url = Galaxy.root + "api/tool_shed/repository";
+                var api_url = `${Galaxy.root}api/tool_shed/repository`;
                 var params = {
                     tool_shed_url: that.model.tool_shed,
                     tsr_id: tsr_id
                 };
-                var new_route =
-                    "repository/s/" + that.model.tool_shed + "/r/" + tsr_id;
+                var new_route = `repository/s/${that.model
+                    .tool_shed}/r/${tsr_id}`;
                 Backbone.history.navigate(new_route, {
                     trigger: true,
                     replace: true
@@ -66,8 +66,8 @@ var ToolShedCategories = Backbone.View.extend({
 
     reDraw: function(options) {
         this.$el.empty();
-        this.model.url =
-            this.model.url + "?tool_shed_url=" + this.options.tool_shed;
+        this.model.url = `${this.model.url}?tool_shed_url=${this.options
+            .tool_shed}`;
         this.initialize(options);
     },
 

client/galaxy/scripts/mvc/toolshed/repo-status-view.js

@@ -8,8 +8,9 @@ var ToolShedRepoStatusView = Backbone.View.extend({
         this.options = _.defaults(this.options || [{}], options, this.defaults);
         this.model = new toolshed_model.RepoStatus();
         this.listenTo(this.model, "sync", this.render);
-        this.model.url +=
-            "?repositories=" + this.options.repositories.join("|");
+        this.model.url += `?repositories=${this.options.repositories.join(
+            "|"
+        )}`;
         this.model.fetch();
         this.timer = setInterval(
             self => {

client/galaxy/scripts/mvc/toolshed/repositories-view.js

@@ -9,8 +9,7 @@ var ToolShedCategoryContentsView = Backbone.View.extend({
         this.model = new toolshed_model.CategoryCollection();
         this.listenTo(this.model, "sync", this.render);
         var shed = params.tool_shed.replace(/\//g, "%2f");
-        this.model.url +=
-            "?tool_shed_url=" + shed + "&category_id=" + params.category_id;
+        this.model.url += `?tool_shed_url=${shed}&category_id=${params.category_id}`;
         this.model.tool_shed = shed;
         this.model.category = params.category_id;
         this.model.fetch();
@@ -35,7 +34,7 @@ var ToolShedCategoryContentsView = Backbone.View.extend({
         $("#search_box").autocomplete({
             source: function(request, response) {
                 var shed_url = that.model.tool_shed.replace(/%2f/g, "/");
-                var base_url = Galaxy.root + "api/tool_shed/search";
+                var base_url = `${Galaxy.root}api/tool_shed/search`;
                 var params = {
                     term: request.term,
                     tool_shed_url: shed_url
@@ -48,8 +47,8 @@ var ToolShedCategoryContentsView = Backbone.View.extend({
             minLength: 3,
             select: function(event, ui) {
                 var tsr_id = ui.item.value;
-                var new_route =
-                    "repository/s/" + that.model.tool_shed + "/r/" + tsr_id;
+                var new_route = `repository/s/${that.model
+                    .tool_shed}/r/${tsr_id}`;
                 Backbone.history.navigate(new_route, {
                     trigger: true,
                     replace: true

client/galaxy/scripts/mvc/toolshed/repository-queue-view.js

@@ -45,7 +45,7 @@ var View = Backbone.View.extend({
             if (repo_queue.hasOwnProperty(queue_key)) {
                 var repository_id = repo_queue[queue_key].repository.id;
                 delete repo_queue[queue_key];
-                $("#queued_repository_" + repository_id).remove();
+                $(`#queued_repository_${repository_id}`).remove();
             }
             localStorage.repositories = JSON.stringify(repo_queue);
         });
@@ -82,8 +82,8 @@ var View = Backbone.View.extend({
         ]);
         params.tool_shed_url = queue_key.split("|")[0];
         params.changeset = repository_metadata.changeset_revision;
-        var url = Galaxy.root + "api/tool_shed_repositories/install?async=True";
-        $("#queued_repository_" + repository_metadata.repository.id).remove();
+        var url = `${Galaxy.root}api/tool_shed_repositories/install?async=True`;
+        $(`#queued_repository_${repository_metadata.repository.id}`).remove();
         if (localStorage.repositories) {
             if (queue_key === undefined) {
                 queue_key = toolshed_util.queueKey(repository_metadata);
@@ -98,9 +98,9 @@ var View = Backbone.View.extend({
         $.post(url, params, data => {
             var iri_params = JSON.parse(data);
             var repositories = iri_params.repositories;
-            var new_route = "status/r/" + repositories.join("|");
+            var new_route = `status/r/${repositories.join("|")}`;
             $.post(
-                Galaxy.root + "admin_toolshed/install_repositories",
+                `${Galaxy.root}admin_toolshed/install_repositories`,
                 iri_params,
                 data => {
                     console.log(

client/galaxy/scripts/mvc/toolshed/repository-view.js

@@ -13,8 +13,7 @@ var ToolShedRepositoryView = Backbone.View.extend({
         this.model = new toolshed_model.RepositoryCollection();
         this.listenTo(this.model, "sync", this.render);
         var shed = params.tool_shed.replace(/\//g, "%2f");
-        this.model.url +=
-            "?tool_shed_url=" + shed + "&repository_id=" + params.repository_id;
+        this.model.url += `?tool_shed_url=${shed}&repository_id=${params.repository_id}`;
         this.model.tool_shed_url = params.tool_shed.replace(/%2f/g, "/");
         this.model.tool_shed = shed;
         this.model.category = params.repository_id;
@@ -47,8 +46,7 @@ var ToolShedRepositoryView = Backbone.View.extend({
             stc_html: models.get("shed_conf")
         });
         this.options.panel_section_dict = models.get("panel_section_dict");
-        this.options.api_url =
-            Galaxy.root + "api/tool_shed_repositories/install?async=True";
+        this.options.api_url = `${Galaxy.root}api/tool_shed_repositories/install?async=True`;
         this.options = _.extend(this.options, options);
         this.$el.html(repo_details_template(this.options));
         this.checkInstalled(this.options.current_metadata);
@@ -179,7 +177,7 @@ var ToolShedRepositoryView = Backbone.View.extend({
             var changeset = $("#changeset")
                 .find("option:selected")
                 .val();
-            var api_url = Galaxy.root + "api/tool_shed/tool_json";
+            var api_url = `${Galaxy.root}api/tool_shed/tool_json`;
             var params = {
                 guid: guid,
                 tool_shed_url: tool_shed_url,
@@ -196,17 +194,14 @@ var ToolShedRepositoryView = Backbone.View.extend({
                             -1
                         ) {
                             input.type = "hidden";
-                            input.info =
-                                "Data input '" +
-                                input.name +
-                                "' (" +
-                                Utils.textify(input.extensions) +
-                                ")";
+                            input.info = `Data input '${input.name}' (${Utils.textify(
+                                input.extensions
+                            )})`;
                         }
                     }
                 });
                 var modal = new Modal.View();
-                var modal_title = "<u>" + name + "</u> " + desc;
+                var modal_title = `<u>${name}</u> ${desc}`;
                 modal.show({
                     closing_events: true,
                     title: modal_title,
@@ -226,7 +221,7 @@ var ToolShedRepositoryView = Backbone.View.extend({
         var params = { name: metadata.name, owner: metadata.owner };
         var already_installed = false;
         var queued = that.repoQueued(metadata);
-        $.get(Galaxy.root + "api/tool_shed_repositories", params, data => {
+        $.get(`${Galaxy.root}api/tool_shed_repositories`, params, data => {
             for (var index = 0; index < data.length; index++) {
                 var repository = data[index];
                 var installed = !repository.deleted && !repository.uninstalled;
@@ -322,13 +317,7 @@ var ToolShedRepositoryView = Backbone.View.extend({
         if (shed_url.substr(-1) == "/") {
             shed_url = shed_url.substr(0, shed_url.length - 1);
         }
-        return (
-            shed_url +
-            "|" +
-            metadata.repository_id +
-            "|" +
-            metadata.changeset_revision
-        );
+        return `${shed_url}|${metadata.repository_id}|${metadata.changeset_revision}`;
     },
 
     tpsSelection: function() {
@@ -349,10 +338,9 @@ var ToolShedRepositoryView = Backbone.View.extend({
     },
 
     doInstall: function(params) {
-        var controller_url =
-            Galaxy.root + "admin_toolshed/install_repositories";
+        var controller_url = `${Galaxy.root}admin_toolshed/install_repositories`;
         var repositories = params.repositories;
-        var new_route = "status/r/" + repositories.join("|");
+        var new_route = `status/r/${repositories.join("|")}`;
         $.post(controller_url, params, data => {
             console.log("Initializing repository installation succeeded");
         });

client/galaxy/scripts/mvc/toolshed/toolshed-model.js

@@ -3,41 +3,41 @@ var ToolShedModel = Backbone.Model.extend({
         url: "https://toolshed.g2.bx.psu.edu/",
         name: "Galaxy Main Tool Shed"
     },
-    urlRoot: Galaxy.root + "api/tool_shed"
+    urlRoot: `${Galaxy.root}api/tool_shed`
 });
 
 var ToolShedsCollection = Backbone.Collection.extend({
-    url: Galaxy.root + "api/tool_shed",
+    url: `${Galaxy.root}api/tool_shed`,
     model: ToolShedModel
 });
 
 var ToolShedCategoriesModel = Backbone.Model.extend({
     defaults: [{}],
-    urlRoot: Galaxy.root + "api/tool_shed/contents"
+    urlRoot: `${Galaxy.root}api/tool_shed/contents`
 });
 
 var ToolShedCategoriesCollection = Backbone.Collection.extend({
-    url: Galaxy.root + "api/tool_shed/contents",
+    url: `${Galaxy.root}api/tool_shed/contents`,
     model: ToolShedCategoriesModel
 });
 
 var ToolShedCategoryModel = Backbone.Model.extend({
     defaults: [{}],
-    urlRoot: Galaxy.root + "api/tool_shed/category"
+    urlRoot: `${Galaxy.root}api/tool_shed/category`
 });
 
 var ToolShedCategoryCollection = Backbone.Collection.extend({
-    url: Galaxy.root + "api/tool_shed/category",
+    url: `${Galaxy.root}api/tool_shed/category`,
     model: ToolShedCategoryModel
 });
 
 var ToolShedRepositoryModel = Backbone.Model.extend({
     defaults: [{}],
-    urlRoot: Galaxy.root + "api/tool_shed/repository"
+    urlRoot: `${Galaxy.root}api/tool_shed/repository`
 });
 
 var ToolShedRepositoryCollection = Backbone.Collection.extend({
-    url: Galaxy.root + "api/tool_shed/repository",
+    url: `${Galaxy.root}api/tool_shed/repository`,
     model: ToolShedRepositoryModel
 });
 
@@ -65,21 +65,21 @@ var RepoQueueCollection = Backbone.Collection.extend({
 
 var RepoStatusModel = Backbone.Model.extend({
     defaults: [{}],
-    urlRoot: Galaxy.root + "api/tool_shed/status"
+    urlRoot: `${Galaxy.root}api/tool_shed/status`
 });
 
 var RepoStatusCollection = Backbone.Collection.extend({
-    url: Galaxy.root + "api/tool_shed/status",
+    url: `${Galaxy.root}api/tool_shed/status`,
     model: RepoStatusModel
 });
 
 var WorkflowToolsModel = Backbone.Model.extend({
     defaults: [{}],
-    urlRoot: Galaxy.root + "api/workflows?missing_tools=True"
+    urlRoot: `${Galaxy.root}api/workflows?missing_tools=True`
 });
 
 var WorkflowToolsCollection = Backbone.Collection.extend({
-    url: Galaxy.root + "api/workflows?missing_tools=True",
+    url: `${Galaxy.root}api/workflows?missing_tools=True`,
     model: WorkflowToolsModel
 });
 

client/galaxy/scripts/mvc/toolshed/util.js

@@ -1,7 +1,7 @@
 var searchShed = function(request, response) {
     var that = this;
     var shed_url = this.shed_url;
-    var base_url = Galaxy.root + "api/tool_shed/search";
+    var base_url = `${Galaxy.root}api/tool_shed/search`;
     $.get(base_url, { term: request.term, tool_shed_url: shed_url }, data => {
         var result_list = that.shedParser(data);
         response(result_list);
@@ -13,12 +13,8 @@ var shedParser = jsondata => {
     var hits = jsondata.hits;
     $.each(hits, hit => {
         var record = hits[hit];
-        var label =
-            record.repository.name +
-            " by " +
-            record.repository.repo_owner_username +
-            ": " +
-            record.repository.description;
+        var label = `${record.repository.name} by ${record.repository
+            .repo_owner_username}: ${record.repository.description}`;
         var result = { value: record.repository.id, label: label };
         results.push(result);
     });
@@ -32,12 +28,7 @@ var addToQueue = metadata => {
             metadata.tool_shed_url.length - 1
         );
     }
-    var key =
-        metadata.tool_shed_url +
-        "|" +
-        metadata.repository_id +
-        "|" +
-        metadata.changeset_revision;
+    var key = `${metadata.tool_shed_url}|${metadata.repository_id}|${metadata.changeset_revision}`;
     var queued_repos = new Object();
     if (localStorage.repositories) {
         queued_repos = JSON.parse(localStorage.repositories);

client/galaxy/scripts/mvc/toolshed/workflows-view.js

@@ -34,15 +34,13 @@ var View = Backbone.View.extend({
         $(".show_wf_repo").on("click", function() {
             var tool_ids = $(this).attr("data-toolids");
             var toolshed = $(this).attr("data-shed");
-            var api_url = Galaxy.root + "api/tool_shed/repository";
+            var api_url = `${Galaxy.root}api/tool_shed/repository`;
             var params = { tool_ids: tool_ids };
             $.get(api_url, params, data => {
                 repository_id = data.repository.id;
-                var new_route =
-                    "repository/s/" +
-                    toolshed.replace(/:/g, "%3a").replace(/\//g, "%2f") +
-                    "/r/" +
-                    data.repository.id;
+                var new_route = `repository/s/${toolshed
+                    .replace(/:/g, "%3a")
+                    .replace(/\//g, "%2f")}/r/${data.repository.id}`;
                 Backbone.history.navigate(new_route, {
                     trigger: true,
                     replace: true
@@ -53,7 +51,7 @@ var View = Backbone.View.extend({
             var elem = $(this);
             var tool_ids = elem.attr("data-toolids");
             var toolshed = elem.attr("data-shed");
-            var api_url = Galaxy.root + "api/tool_shed/repository";
+            var api_url = `${Galaxy.root}api/tool_shed/repository`;
             var params = { tool_ids: tool_ids };
             $.get(api_url, params, data => {
                 repository_id = data.repository.id;

client/galaxy/scripts/mvc/tours.js

@@ -84,16 +84,16 @@ var hooked_tour_from_data = data => {
 };
 
 var TourItem = Backbone.Model.extend({
-    urlRoot: gxy_root + "api/tours"
+    urlRoot: `${gxy_root}api/tours`
 });
 
 var Tours = Backbone.Collection.extend({
-    url: gxy_root + "api/tours",
+    url: `${gxy_root}api/tours`,
     model: TourItem
 });
 
 var giveTour = tour_id => {
-    var url = gxy_root + "api/tours/" + tour_id;
+    var url = `${gxy_root}api/tours/${tour_id}`;
     $.getJSON(url, data => {
         // Set hooks for additional click and data entry actions.
         var tourdata = hooked_tour_from_data(data);
@@ -177,7 +177,7 @@ var ToursView = Backbone.View.extend({
                 if (elem.hasClass("btn-secondary")) {
                     display = "none";
                 }
-                $("div[tag='" + tag + "']").css({ display: display });
+                $(`div[tag='${tag}']`).css({ display: display });
             });
     }
 });

client/galaxy/scripts/mvc/ui/error-modal.js

@@ -65,11 +65,7 @@ function _errorModal(message, title, details) {
                 $("<pre/>").text(JSON.stringify(details, null, "  "))
             ]);
 
-        $(
-            '<button id="button-1" class="pull-left">' +
-                _l("Details") +
-                "</button>"
-        )
+        $(`<button id="button-1" class="pull-left">${_l("Details")}</button>`)
             .appendTo(Galaxy.modal.$(".buttons"))
             .click(() => {
                 Galaxy.modal.$(".error-details").toggle();
@@ -90,7 +86,7 @@ function errorModal(message, title, details) {
         return _errorModal(message, title, details);
     }
 
-    alert(title + "\n\n" + message);
+    alert(`${title}\n\n${message}`);
     console.log("error details:", JSON.stringify(details));
 }
 
@@ -109,11 +105,9 @@ function offlineErrorModal() {
 /** 502 messages that should be displayed when galaxy is restarting */
 function badGatewayErrorModal() {
     return errorModal(
-        _l(
+        `${_l(
             "Galaxy is currently unreachable. Please try again in a few minutes."
-        ) +
-            " " +
-            CONTACT_MSG,
+        )} ${CONTACT_MSG}`,
         _l("Cannot connect to Galaxy")
     );
 }
@@ -122,7 +116,7 @@ function badGatewayErrorModal() {
 /** display a modal (with details) about a failed Backbone ajax operation */
 function ajaxErrorModal(model, xhr, options, message, title) {
     message = message || DEFAULT_AJAX_ERR_MSG;
-    message += " " + CONTACT_MSG;
+    message += ` ${CONTACT_MSG}`;
     title = title || _l("An error occurred");
     var details = _ajaxDetails(model, xhr, options);
     return errorModal(message, title, details);
@@ -142,7 +136,7 @@ function _ajaxDetails(model, xhr, options) {
         url: _.result(Galaxy.lastAjax, "url"),
         data: _.result(Galaxy.lastAjax, "data"),
         // backbone stuff (auto-redacting email for user)
-        model: _.result(model, "toJSON", model + ""),
+        model: _.result(model, "toJSON", `${model}`),
         user: _.omit(_.result(Galaxy.user, "toJSON"), "email")
     };
 }

client/galaxy/scripts/mvc/ui/icon-button.js

@@ -56,13 +56,13 @@ var IconButtonView = Backbone.View.extend({
 
     // generate html element
     template: function(options) {
-        var buffer = 'title="' + options.title + '" class="icon-button';
+        var buffer = `title="${options.title}" class="icon-button`;
 
         if (options.is_menu_button) {
             buffer += " menu-button";
         }
 
-        buffer += " " + options.icon_class;
+        buffer += ` ${options.icon_class}`;
 
         if (!options.enabled) {
             buffer += "_disabled";
@@ -72,13 +72,13 @@ var IconButtonView = Backbone.View.extend({
         buffer += '"';
 
         if (options.id) {
-            buffer += ' id="' + options.id + '"';
+            buffer += ` id="${options.id}"`;
         }
 
-        buffer += ' href="' + options.href + '"';
+        buffer += ` href="${options.href}"`;
         // add target for href
         if (options.target) {
-            buffer += ' target="' + options.target + '"';
+            buffer += ` target="${options.target}"`;
         }
         // set visibility
         if (!options.visible) {
@@ -87,9 +87,9 @@ var IconButtonView = Backbone.View.extend({
 
         // enabled/disabled
         if (options.enabled) {
-            buffer = "<a " + buffer + "/>";
+            buffer = `<a ${buffer}/>`;
         } else {
-            buffer = "<span " + buffer + "/>";
+            buffer = `<span ${buffer}/>`;
         }
 
         // return element

client/galaxy/scripts/mvc/ui/popup-menu.js

@@ -96,7 +96,7 @@ var PopupMenu = Backbone.View.extend({
                 ].join("");
             }
             var href = option.href || "javascript:void(0);";
-            var target = option.target ? ' target="' + option.target + '"' : "";
+            var target = option.target ? ` target="${option.target}"` : "";
 
             var check = option.checked
                 ? '<span class="fa fa-check"></span>'
@@ -337,7 +337,7 @@ PopupMenu.make_popup_menus = (parent, menuSelector, buttonSelectorBuildFn) => {
     // default to (orig. Glx) matching button to menu by using the popupmenu attr of the menu as the id of the button
     buttonSelectorBuildFn =
         buttonSelectorBuildFn ||
-        (($menuElement, parent) => "#" + $menuElement.attr("popupmenu"));
+        (($menuElement, parent) => `#${$menuElement.attr("popupmenu")}`);
 
     // aggregate and return all PopupMenus
     var popupMenusCreated = [];