From 851c28229cd9cd5b2cce5e80cf6d2fa0578962a0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 May 2022 16:21:33 +0200
Subject: [PATCH 01/18] Add winbox plugin

---
 client/package.json | 1 +
 client/yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/client/package.json b/client/package.json
index 206ba9df25b..42e72995779 100644
--- a/client/package.json
+++ b/client/package.json
@@ -92,6 +92,7 @@
     "vuex": "^3.6.2",
     "vuex-cache": "^3.4.0",
     "vuex-persist": "2.3",
+    "winbox": "^0.2.1",
     "xml-beautifier": "^0.5.0"
   },
   "scripts": {
diff --git a/client/yarn.lock b/client/yarn.lock
index f0343e6865a..76556f42d4f 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -10163,6 +10163,11 @@ wildcard@^2.0.0:
   resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
   integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
 
+winbox@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/winbox/-/winbox-0.2.1.tgz#6ca7cd047fa52d9f3324884698ce8a9c9ba9bf27"
+  integrity sha512-K3PY+y+aWpkCpECGF2TqSi4w+OT+cuJHWbOKBjVerpexmdC6Is5m4y0gZ9rbxU2K+GszE1nH+d2okMAQTG05hg==
+
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"

From 4f2494a239c159fdd2cdfdd848f30171433def48 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 May 2022 16:41:28 +0200
Subject: [PATCH 02/18] Add initial migration

---
 client/src/layout/scratchbook.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/layout/scratchbook.js b/client/src/layout/scratchbook.js
index bdbc9534b6b..b0bb64428a2 100644
--- a/client/src/layout/scratchbook.js
+++ b/client/src/layout/scratchbook.js
@@ -9,6 +9,8 @@ import { Dataset, createTabularDatasetChunkedView, TabularDataset } from "mvc/da
 import visualization from "viz/visualization";
 import { TracksterUI } from "viz/trackster";
 import _l from "utils/localization";
+import WinBox from "winbox/src/js/winbox.js";
+import "winbox/dist/css/winbox.min.css";
 
 export default Backbone.View.extend({
     initialize: function (options) {
@@ -51,7 +53,7 @@ export default Backbone.View.extend({
 
     getFrames() {
         // needed for Vue.js integration
-        return this.frames;
+        return this;
     },
 
     beforeUnload() {
@@ -232,7 +234,7 @@ export default Backbone.View.extend({
             }
         } else {
             options.url = this._build_url(options.url, { hide_panels: true, hide_masthead: true });
-            this.frames.add(options);
+            WinBox.new(options);
         }
     },
 

From 9123087e02bb39ad91ef58104da019ab20c43791 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 May 2022 17:05:26 +0200
Subject: [PATCH 03/18] Remove ui-frames custom window manager

---
 client/src/components/Masthead/Masthead.vue |   8 +-
 client/src/layout/scratchbook.js            |  24 +-
 client/src/mvc/ui/ui-frames.js              | 648 --------------------
 3 files changed, 16 insertions(+), 664 deletions(-)
 delete mode 100644 client/src/mvc/ui/ui-frames.js

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 1854278e483..348e8942641 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -99,9 +99,9 @@ export default {
         frames
             .on("add remove", () => {
                 const tab = this.mastheadState.frame.buttonLoad;
-                tab.note = String(frames.length());
-                tab.visible = frames.length() > 0;
-                tab.show_note = frames.length() > 0;
+                tab.note = String(frames.counter);
+                tab.visible = frames.counter > 0;
+                tab.show_note = frames.counter > 0;
             })
             .on("show hide", () => {
                 this._reflectScratchbookFrames();
@@ -128,7 +128,7 @@ export default {
             return Object.assign({}, defaults, asJson);
         },
         _reflectScratchbookFrames() {
-            const frames = this.mastheadState.frame.getFrames();
+            const frames = this.mastheadState.frame;
             const tab = this.mastheadState.frame.buttonLoad;
             tab.toggle = frames.visible;
             tab.icon = (frames.visible && "fa-eye") || "fa-eye-slash";
diff --git a/client/src/layout/scratchbook.js b/client/src/layout/scratchbook.js
index b0bb64428a2..4cf22388f8a 100644
--- a/client/src/layout/scratchbook.js
+++ b/client/src/layout/scratchbook.js
@@ -1,10 +1,9 @@
-/** Frame manager uses the ui-frames to create the scratch book masthead icon and functionality **/
+/** Frame manager uses the window manager to create the scratch book masthead icon and functionality **/
 import _ from "underscore";
 import $ from "jquery";
 import Backbone from "backbone";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
-import Frames from "mvc/ui/ui-frames";
 import { Dataset, createTabularDatasetChunkedView, TabularDataset } from "mvc/dataset/data";
 import visualization from "viz/visualization";
 import { TracksterUI } from "viz/trackster";
@@ -15,8 +14,8 @@ import "winbox/dist/css/winbox.min.css";
 export default Backbone.View.extend({
     initialize: function (options) {
         options = options || {};
-        this.frames = new Frames.View({ visible: false });
-        this.setElement(this.frames.$el);
+        this.setElement("<div />");
+        this.counter = 0;
         this.active = false;
         this.buttonActive = {
             id: "enable-scratchbook",
@@ -29,7 +28,7 @@ export default Backbone.View.extend({
                 this.buttonActive.show_note = this.active;
                 this.buttonActive.note_cls = this.active && "fa fa-check";
                 if (!this.active) {
-                    this.frames.hide();
+                    this.$el.hide();
                 }
             },
         };
@@ -41,10 +40,10 @@ export default Backbone.View.extend({
             visible: false,
             note: "",
             onclick: (e) => {
-                if (this.frames.visible) {
-                    this.frames.hide();
+                if (this.visible) {
+                    this.$el.hide();
                 } else {
-                    this.frames.show();
+                    this.$el.show();
                 }
             },
         };
@@ -58,13 +57,13 @@ export default Backbone.View.extend({
 
     beforeUnload() {
         let confirmText = "";
-        if (this.frames.length() > 0) {
-            confirmText = `You opened ${this.frames.length()} frame(s) which will be lost.`;
+        if (this.counter > 0) {
+            confirmText = `You opened ${this.counter} frame(s) which will be lost.`;
         }
         return confirmText;
     },
 
-    /** Add a dataset to the frames */
+    /** Add a dataset */
     addDataset: function (dataset_id) {
         const self = this;
         let current_dataset = null;
@@ -170,7 +169,7 @@ export default Backbone.View.extend({
         });
     },
 
-    /** Add a trackster visualization to the frames. */
+    /** Add a trackster visualization. */
     addTrackster: function (viz_id) {
         const self = this;
         const viz = new visualization.Visualization({ id: viz_id });
@@ -234,6 +233,7 @@ export default Backbone.View.extend({
             }
         } else {
             options.url = this._build_url(options.url, { hide_panels: true, hide_masthead: true });
+            options.class = "modern";
             WinBox.new(options);
         }
     },
diff --git a/client/src/mvc/ui/ui-frames.js b/client/src/mvc/ui/ui-frames.js
deleted file mode 100644
index 79ee255792c..00000000000
--- a/client/src/mvc/ui/ui-frames.js
+++ /dev/null
@@ -1,648 +0,0 @@
-/** Frame view */
-import _ from "underscore";
-import $ from "jquery";
-import Backbone from "backbone";
-import _l from "utils/localization";
-import { getGalaxyInstance } from "app";
-
-var FrameView = Backbone.View.extend({
-    initialize: function (options) {
-        this.model = (options && options.model) || new Backbone.Model(options);
-        this.setElement($("<div/>").addClass("corner frame"));
-        this.$el
-            .append(
-                $("<div/>")
-                    .addClass("f-header corner")
-                    .append($("<div/>").addClass("f-title"))
-                    .append(
-                        $("<div/>")
-                            .addClass("f-icon f-close fa fa-close")
-                            .tooltip({
-                                title: _l("Close"),
-                                placement: "bottom",
-                            })
-                    )
-            )
-            .append($("<div/>").addClass("f-content"))
-            .append($("<div/>").addClass("f-resize f-icon corner fa fa-expand").tooltip({ title: "Resize" }))
-            .append($("<div/>").addClass("f-cover"));
-        this.$header = this.$(".f-header");
-        this.$title = this.$(".f-title");
-        this.$content = this.$(".f-content");
-        this.render();
-        this.listenTo(this.model, "change", this.render, this);
-    },
-
-    render: function () {
-        var self = this;
-        var options = this.model.attributes;
-        this.$title.html(_.escape(options.title) || "");
-        this.$header.find(".f-icon-left").remove();
-        _.each(options.menu, (option) => {
-            var $option = $("<div/>").addClass("f-icon-left").addClass(option.icon);
-            if (_.isFunction(option.disabled) && option.disabled()) {
-                $option.attr("disabled", true);
-            } else {
-                $option
-                    .on("click", () => {
-                        option.onclick(self);
-                    })
-                    .tooltip({
-                        title: option.tooltip || "",
-                        placement: "bottom",
-                    });
-            }
-            self.$header.append($option);
-        });
-        if (options.url) {
-            this.$content.html(
-                $("<iframe/>")
-                    .addClass("f-iframe")
-                    .attr("scrolling", "auto")
-                    .attr("src", `${options.url + (options.url.indexOf("?") === -1 ? "?" : "&")}widget=True`)
-            );
-        } else if (options.content) {
-            if (_.isFunction(options.content)) {
-                options.content(self.$content);
-            } else {
-                self.$content.html(options.content);
-            }
-        }
-    },
-});
-
-/** Scratchbook viewer */
-var View = Backbone.View.extend({
-    defaultOptions: {
-        frame: {
-            // default frame size in cells
-            cols: 6,
-            rows: 3,
-        },
-        rows: 1000, // maximum number of rows
-        cell: 130, // cell size in px
-        margin: 5, // margin between frames
-        scroll: 5, // scroll speed
-        top_min: 40, // top margin
-        frame_max: 9, // maximum number of frames
-        visible: true, // initial visibility
-    },
-
-    cols: 0, // number of columns
-    top: 0, // scroll/element top
-    top_max: 0, // viewport scrolling state
-    frame_z: 0, // frame z-index
-    frame_counter: 0, // frame counter
-    frame_uid: 0, // unique frame id counter
-    frame_list: {}, // list of all frames
-    frame_shadow: null, // frame shown as placeholder when moving active frames
-    visible: false, // flag indicating if scratchbook viewer is visible or not
-    event: {}, // dictionary keeping track of current event
-
-    initialize: function (options) {
-        var self = this;
-        this.options = _.defaults(options || {}, this.defaultOptions);
-        this.visible = this.options.visible;
-        this.top = this.top_max = this.options.top_min;
-        this.setElement(
-            $("<div/>")
-                .addClass("galaxy-frame")
-                .append($("<div/>").addClass("frame-background"))
-                .append($("<div/>").addClass("frame-menu frame-scroll-up fa fa-chevron-up fa-2x"))
-                .append($("<div/>").addClass("frame-menu frame-scroll-down fa fa-chevron-down fa-2x"))
-        );
-
-        // initialize shadow to guiding drag/resize events
-        this.frame_shadow = new Backbone.View({
-            el: $("<div/>").addClass("corner frame-shadow"),
-        });
-        this.$el.append(this.frame_shadow.$el);
-        this._frameInit(this.frame_shadow, "#frame-shadow");
-        this._frameResize(this.frame_shadow, { width: 0, height: 0 });
-        this.frame_list["#frame-shadow"] = this.frame_shadow;
-
-        // initialize panel
-        if (this.visible) {
-            this.show();
-        } else {
-            this.hide();
-        }
-        this._panelRefresh();
-        $(window).resize(() => {
-            if (self.visible) {
-                self._panelRefresh();
-            }
-        });
-    },
-
-    /** Render */
-    render: function () {
-        this.$(".frame-scroll-up")[(this.top != this.options.top_min && "show") || "hide"]();
-        this.$(".frame-scroll-down")[(this.top != this.top_max && "show") || "hide"]();
-    },
-
-    /**
-     * Adds and displays a new frame.
-     *
-     * options:
-     *  url     : loaded into an iframe
-     *  content : content is treated as a function or raw HTML, function is passed a single
-     *              argument that is the frame's content DOM element
-     */
-    add: function (options) {
-        const Galaxy = getGalaxyInstance();
-        if (this.frame_counter >= this.options.frame_max) {
-            Galaxy.modal.show({
-                title: _l("Warning"),
-                body: `You have reached the maximum number of allowed frames (${this.options.frame_max}).`,
-                buttons: {
-                    Close: function () {
-                        Galaxy.modal.hide();
-                    },
-                },
-            });
-        } else {
-            var frame_id = `#frame-${this.frame_uid++}`;
-            if ($(frame_id).length !== 0) {
-                Galaxy.modal.show({
-                    title: _l("Error"),
-                    body: "This frame already exists. This page might contain multiple frame managers.",
-                    buttons: {
-                        Close: function () {
-                            Galaxy.modal.hide();
-                        },
-                    },
-                });
-            } else {
-                // initialize new frame elements
-                this.top = this.options.top_min;
-                var frame = new FrameView(options);
-                this.$el.append(frame.$el);
-
-                // set dimensions
-                options.width = this._toPixelCoord("width", this.options.frame.cols);
-                options.height = this._toPixelCoord("height", this.options.frame.rows);
-
-                // set default z-index and add to ui and frame list
-                this.frame_z = parseInt(frame.$el.css("z-index"));
-                this.frame_list[frame_id] = frame;
-                this.frame_counter++;
-                this._frameInit(frame, frame_id);
-                this._frameResize(frame, {
-                    width: options.width,
-                    height: options.height,
-                });
-                this._frameInsert(frame, { top: 0, left: 0 }, true);
-                if (!this.visible) {
-                    this.show();
-                }
-                this.trigger("add");
-            }
-        }
-    },
-
-    /** Remove a frame */
-    del: function (frame) {
-        var self = this;
-        var $frame = frame.$el;
-        $frame.fadeOut("fast", () => {
-            $frame.remove();
-            delete self.frame_list[frame.id];
-            self.frame_counter--;
-            self._panelRefresh(true);
-            self._panelAnimationComplete();
-            if (this.frame_counter == 0) {
-                this._eventHide();
-            }
-            self.trigger("remove");
-        });
-    },
-
-    /** Show panel */
-    show: function () {
-        this.visible = true;
-        this.$el.fadeIn("fast");
-        this.trigger("show");
-    },
-
-    /** Hide panel */
-    hide: function () {
-        if (!this.event.type) {
-            this.visible = false;
-            this.$el.fadeOut("fast", function () {
-                $(this).hide();
-            });
-            this.trigger("hide");
-        }
-    },
-
-    /** Returns the number of frames */
-    length: function () {
-        return this.frame_counter;
-    },
-
-    /*
-        EVENT HANDLING
-    */
-    events: {
-        // global frame events
-        mousemove: "_eventFrameMouseMove",
-        mouseup: "_eventFrameMouseUp",
-        mouseleave: "_eventFrameMouseUp",
-        mousewheel: "_eventPanelScroll",
-        DOMMouseScroll: "_eventPanelScroll",
-
-        // events fixed to elements
-        "mousedown .frame": "_eventFrameMouseDown",
-        "mousedown .frame-background": "_eventHide",
-        "mousedown .frame-scroll-up": "_eventPanelScroll_up",
-        "mousedown .frame-scroll-down": "_eventPanelScroll_down",
-        "mousedown .f-close": "_eventFrameClose",
-    },
-
-    /** Start drag/resize event */
-    _eventFrameMouseDown: function (e) {
-        $(".tooltip").hide();
-        if (!this.event.type) {
-            if ($(e.target).hasClass("f-header") || $(e.target).hasClass("f-title")) {
-                this.event.type = "drag";
-            }
-            if ($(e.target).hasClass("f-resize")) {
-                this.event.type = "resize";
-            }
-            if (this.event.type) {
-                e.preventDefault();
-                this.event.target = this._frameIdentify(e.target);
-                this.event.xy = {
-                    x: e.originalEvent.pageX,
-                    y: e.originalEvent.pageY,
-                };
-                this._frameDragStart(this.event.target);
-            }
-        }
-    },
-
-    /** Processes drag/resize events */
-    _eventFrameMouseMove: function (e) {
-        if (this.event.type) {
-            // get mouse motion and delta
-            var event_xy_new = {
-                x: e.originalEvent.pageX,
-                y: e.originalEvent.pageY,
-            };
-            var event_xy_delta = {
-                x: event_xy_new.x - this.event.xy.x,
-                y: event_xy_new.y - this.event.xy.y,
-            };
-            this.event.xy = event_xy_new;
-
-            // get current screen position and size of frame
-            var p = this._frameScreen(this.event.target);
-
-            // drag/resize event
-            if (this.event.type == "resize") {
-                p.width += event_xy_delta.x;
-                p.height += event_xy_delta.y;
-                var min_dim = this.options.cell - this.options.margin - 1;
-                p.width = Math.max(p.width, min_dim);
-                p.height = Math.max(p.height, min_dim);
-                this._frameResize(this.event.target, p);
-                p.width = this._toGridCoord("width", p.width) + 1;
-                p.height = this._toGridCoord("height", p.height) + 1;
-                p.width = this._toPixelCoord("width", p.width);
-                p.height = this._toPixelCoord("height", p.height);
-                this._frameResize(this.frame_shadow, p);
-                this._frameInsert(this.frame_shadow, {
-                    top: this._toGridCoord("top", p.top),
-                    left: this._toGridCoord("left", p.left),
-                });
-            } else if (this.event.type == "drag") {
-                p.left += event_xy_delta.x;
-                p.top += event_xy_delta.y;
-                this._frameOffset(this.event.target, p);
-                var l = {
-                    top: this._toGridCoord("top", p.top),
-                    left: this._toGridCoord("left", p.left),
-                };
-                if (l.left !== 0) {
-                    l.left++;
-                }
-                this._frameInsert(this.frame_shadow, l);
-            }
-        }
-    },
-
-    /** Stop drag/resize events */
-    _eventFrameMouseUp: function (e) {
-        if (this.event.type) {
-            this._frameDragStop(this.event.target);
-            this.event.type = null;
-        }
-    },
-
-    /** Destroy a frame */
-    _eventFrameClose: function (e) {
-        if (!this.event.type) {
-            e.preventDefault();
-            this.del(this._frameIdentify(e.target));
-        }
-    },
-
-    /** Hide all frames */
-    _eventHide: function (e) {
-        if (!this.event.type) {
-            this.hide();
-        }
-    },
-
-    /** Fired when scrolling occurs on panel */
-    _eventPanelScroll: function (e) {
-        if (!this.event.type && this.visible) {
-            // Stop propagation if scrolling is happening inside a frame.
-            // TODO: could propagate scrolling if at top/bottom of frame.
-            var frames = $(e.srcElement).parents(".frame");
-            if (frames.length !== 0) {
-                e.stopPropagation();
-            } else {
-                e.preventDefault();
-                this._panelScroll(e.originalEvent.detail ? e.originalEvent.detail : e.originalEvent.wheelDelta / -3);
-            }
-        }
-    },
-
-    /** Handle scroll up event */
-    _eventPanelScroll_up: function (e) {
-        if (!this.event.type) {
-            e.preventDefault();
-            this._panelScroll(-this.options.scroll);
-        }
-    },
-
-    /** Handle scroll down */
-    _eventPanelScroll_down: function (e) {
-        if (!this.event.type) {
-            e.preventDefault();
-            this._panelScroll(this.options.scroll);
-        }
-    },
-
-    /*
-        FRAME EVENTS SUPPORT
-    */
-
-    /** Identify the target frame */
-    _frameIdentify: function (target) {
-        return this.frame_list[`#${$(target).closest(".frame").attr("id")}`];
-    },
-
-    /** Provides drag support */
-    _frameDragStart: function (frame) {
-        this._frameFocus(frame, true);
-        var p = this._frameScreen(frame);
-        this._frameResize(this.frame_shadow, p);
-        this._frameGrid(this.frame_shadow, frame.grid_location);
-        frame.grid_location = null;
-        this.frame_shadow.$el.show();
-        $(".f-cover").show();
-    },
-
-    /** Removes drag support */
-    _frameDragStop: function (frame) {
-        this._frameFocus(frame, false);
-        var p = this._frameScreen(this.frame_shadow);
-        this._frameResize(frame, p);
-        this._frameGrid(frame, this.frame_shadow.grid_location, true);
-        this.frame_shadow.grid_location = null;
-        this.frame_shadow.$el.hide();
-        $(".f-cover").hide();
-        this._panelAnimationComplete();
-    },
-
-    /*
-        GRID/PIXEL CONVERTER
-    */
-
-    /** Converts a pixel to a grid dimension */
-    _toGridCoord: function (type, px) {
-        var sign = type == "width" || type == "height" ? 1 : -1;
-        if (type == "top") {
-            px -= this.top;
-        }
-        return parseInt((px + sign * this.options.margin) / this.options.cell, 10);
-    },
-
-    /** Converts a grid to a pixels dimension */
-    _toPixelCoord: function (type, g) {
-        var sign = type == "width" || type == "height" ? 1 : -1;
-        var px = g * this.options.cell - sign * this.options.margin;
-        if (type == "top") {
-            px += this.top;
-        }
-        return px;
-    },
-
-    /** Converts a pixel to a grid coordinate set */
-    _toGrid: function (px) {
-        return {
-            top: this._toGridCoord("top", px.top),
-            left: this._toGridCoord("left", px.left),
-            width: this._toGridCoord("width", px.width),
-            height: this._toGridCoord("height", px.height),
-        };
-    },
-
-    /** Converts a pixel to a grid coordinate set */
-    _toPixel: function (g) {
-        return {
-            top: this._toPixelCoord("top", g.top),
-            left: this._toPixelCoord("left", g.left),
-            width: this._toPixelCoord("width", g.width),
-            height: this._toPixelCoord("height", g.height),
-        };
-    },
-
-    /* 
-        COLLISION DETECTION
-    */
-
-    /** Check collisions for a grid coordinate set */
-    _isCollision: function (g) {
-        function is_collision_pair(a, b) {
-            return !(
-                a.left > b.left + b.width - 1 ||
-                a.left + a.width - 1 < b.left ||
-                a.top > b.top + b.height - 1 ||
-                a.top + a.height - 1 < b.top
-            );
-        }
-        for (var i in this.frame_list) {
-            var frame = this.frame_list[i];
-            if (frame.grid_location !== null && is_collision_pair(g, frame.grid_location)) {
-                return true;
-            }
-        }
-        return false;
-    },
-
-    /** Return location/grid rank */
-    _locationRank: function (loc) {
-        return loc.top * this.cols + loc.left;
-    },
-
-    /*
-        PANEL/WINDOW FUNCTIONS
-    */
-
-    /** Refresh panel */
-    _panelRefresh: function (animate) {
-        this.cols = parseInt($(window).width() / this.options.cell, 10) + 1;
-        this._frameInsert(null, null, animate);
-    },
-
-    /** Complete panel animation / frames not moving */
-    _panelAnimationComplete: function () {
-        var self = this;
-        $(".frame")
-            .promise()
-            .done(() => {
-                self._panelScroll(0, true);
-            });
-    },
-
-    /** Scroll panel */
-    _panelScroll: function (delta, animate) {
-        var top_new = this.top - this.options.scroll * delta;
-        top_new = Math.max(top_new, this.top_max);
-        top_new = Math.min(top_new, this.options.top_min);
-        if (this.top != top_new) {
-            for (var i in this.frame_list) {
-                var frame = this.frame_list[i];
-                if (frame.grid_location !== null) {
-                    var screen_location = {
-                        top: frame.screen_location.top - (this.top - top_new),
-                        left: frame.screen_location.left,
-                    };
-                    this._frameOffset(frame, screen_location, animate);
-                }
-            }
-            this.top = top_new;
-        }
-        this.render();
-    },
-
-    /*
-        FRAME FUNCTIONS
-    */
-
-    /** Initialize a new frame */
-    _frameInit: function (frame, id) {
-        frame.id = id;
-        frame.screen_location = {};
-        frame.grid_location = {};
-        frame.grid_rank = null;
-        frame.$el.attr("id", id.substring(1));
-    },
-
-    /** Insert frame at given location */
-    _frameInsert: function (frame, new_loc, animate) {
-        var self = this;
-        var place_list = [];
-        if (frame) {
-            frame.grid_location = null;
-            place_list.push([frame, this._locationRank(new_loc)]);
-        }
-        _.each(this.frame_list, (f) => {
-            if (f.grid_location !== null) {
-                f.grid_location = null;
-                place_list.push([f, f.grid_rank]);
-            }
-        });
-        place_list.sort((a, b) => (a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0));
-        _.each(place_list, (place) => {
-            self._framePlace(place[0], animate);
-        });
-        this.top_max = 0;
-        _.each(this.frame_list, (f) => {
-            if (f.grid_location !== null) {
-                self.top_max = Math.max(self.top_max, f.grid_location.top + f.grid_location.height);
-            }
-        });
-        this.top_max = $(window).height() - this.top_max * this.options.cell - 2 * this.options.margin;
-        this.top_max = Math.min(this.top_max, this.options.top_min);
-        this.render();
-    },
-
-    /** Naive frame placement */
-    _framePlace: function (frame, animate) {
-        frame.grid_location = null;
-        var g = this._toGrid(this._frameScreen(frame));
-        var done = false;
-        for (var i = 0; i < this.options.rows; i++) {
-            for (var j = 0; j < Math.max(1, this.cols - g.width); j++) {
-                g.top = i;
-                g.left = j;
-                if (!this._isCollision(g)) {
-                    done = true;
-                    break;
-                }
-            }
-            if (done) {
-                break;
-            }
-        }
-        if (done) {
-            this._frameGrid(frame, g, animate);
-        } else {
-            console.log("Grid dimensions exceeded.");
-        }
-    },
-
-    /** Handle frame focussing */
-    _frameFocus: function (frame, has_focus) {
-        frame.$el.css("z-index", this.frame_z + (has_focus ? 1 : 0));
-    },
-
-    /** New left/top position frame */
-    _frameOffset: function (frame, p, animate) {
-        frame.screen_location.left = p.left;
-        frame.screen_location.top = p.top;
-        if (animate) {
-            this._frameFocus(frame, true);
-            var self = this;
-            frame.$el.animate({ top: p.top, left: p.left }, "fast", () => {
-                self._frameFocus(frame, false);
-            });
-        } else {
-            frame.$el.css({ top: p.top, left: p.left });
-        }
-    },
-
-    /** Resize frame */
-    _frameResize: function (frame, p) {
-        frame.$el.css({ width: p.width, height: p.height });
-        frame.screen_location.width = p.width;
-        frame.screen_location.height = p.height;
-    },
-
-    /** Push frame to new grid location */
-    _frameGrid: function (frame, l, animate) {
-        frame.grid_location = l;
-        this._frameOffset(frame, this._toPixel(l), animate);
-        frame.grid_rank = this._locationRank(l);
-    },
-
-    /** Get frame dimensions */
-    _frameScreen: function (frame) {
-        var p = frame.screen_location;
-        return {
-            top: p.top,
-            left: p.left,
-            width: p.width,
-            height: p.height,
-        };
-    },
-});
-
-export default {
-    View: View,
-};

From 1f5286cba30c45a2062e483720923a5f8cfdc3e0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 May 2022 14:43:49 +0200
Subject: [PATCH 04/18] Remove jquery helper and backbone model when loading
 datasets into multiview

---
 client/src/layout/scratchbook.js | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/client/src/layout/scratchbook.js b/client/src/layout/scratchbook.js
index 4cf22388f8a..a8cd5e0331e 100644
--- a/client/src/layout/scratchbook.js
+++ b/client/src/layout/scratchbook.js
@@ -4,12 +4,13 @@ import $ from "jquery";
 import Backbone from "backbone";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
-import { Dataset, createTabularDatasetChunkedView, TabularDataset } from "mvc/dataset/data";
+import { createTabularDatasetChunkedView, TabularDataset } from "mvc/dataset/data";
 import visualization from "viz/visualization";
 import { TracksterUI } from "viz/trackster";
 import _l from "utils/localization";
 import WinBox from "winbox/src/js/winbox.js";
 import "winbox/dist/css/winbox.min.css";
+import { urlData } from "utils/url";
 
 export default Backbone.View.extend({
     initialize: function (options) {
@@ -136,18 +137,14 @@ export default Backbone.View.extend({
     },
 
     _loadDataset: function (dataset_id, callback) {
-        const self = this;
-        const dataset = new Dataset({ id: dataset_id });
-        $.when(dataset.fetch()).then(() => {
+        const url = `api/datasets/${dataset_id}`;
+        urlData({ url }).then((dataset) => {
             const is_tabular = _.find(
                 ["tabular", "interval"],
-                (data_type) => dataset.get("data_type").indexOf(data_type) !== -1
+                (data_type) => dataset.data_type.indexOf(data_type) !== -1
             );
-            let title = dataset.get("name");
-            const history_details = self.history_cache[dataset.get("history_id")];
-            if (history_details) {
-                title = `${history_details.name}: ${title}`;
-            }
+            const history_details = this.history_cache[dataset.history_id];
+            const title = history_details ? `${history_details.name}: ${dataset.name}` : dataset.name;
             callback(
                 dataset,
                 is_tabular

From e1208aca8e9cad6bcb7a3de1938a52f51e0106c0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 May 2022 14:46:30 +0200
Subject: [PATCH 05/18] Remove unused? trackster helper from multiview

---
 client/src/layout/scratchbook.js | 47 --------------------------------
 1 file changed, 47 deletions(-)

diff --git a/client/src/layout/scratchbook.js b/client/src/layout/scratchbook.js
index a8cd5e0331e..745b7563b5f 100644
--- a/client/src/layout/scratchbook.js
+++ b/client/src/layout/scratchbook.js
@@ -5,8 +5,6 @@ import Backbone from "backbone";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 import { createTabularDatasetChunkedView, TabularDataset } from "mvc/dataset/data";
-import visualization from "viz/visualization";
-import { TracksterUI } from "viz/trackster";
 import _l from "utils/localization";
 import WinBox from "winbox/src/js/winbox.js";
 import "winbox/dist/css/winbox.min.css";
@@ -166,51 +164,6 @@ export default Backbone.View.extend({
         });
     },
 
-    /** Add a trackster visualization. */
-    addTrackster: function (viz_id) {
-        const self = this;
-        const viz = new visualization.Visualization({ id: viz_id });
-        $.when(viz.fetch()).then(() => {
-            const ui = new TracksterUI(getAppRoot());
-
-            // Construct frame config based on dataset's type.
-            const frame_config = {
-                title: viz.get("name"),
-                type: "other",
-                content: function (parent_elt) {
-                    // Create view config.
-                    const view_config = {
-                        container: parent_elt,
-                        name: viz.get("title"),
-                        id: viz.id,
-                        // FIXME: this will not work with custom builds b/c the dbkey needed to be encoded.
-                        dbkey: viz.get("dbkey"),
-                        stand_alone: false,
-                    };
-
-                    const latest_revision = viz.get("latest_revision");
-                    const drawables = latest_revision.config.view.drawables;
-
-                    // Set up datasets in drawables.
-                    _.each(drawables, (d) => {
-                        d.dataset = {
-                            hda_ldda: d.hda_ldda,
-                            id: d.dataset_id,
-                        };
-                    });
-                    ui.create_visualization(
-                        view_config,
-                        latest_revision.config.viewport,
-                        latest_revision.config.view.drawables,
-                        latest_revision.config.bookmarks,
-                        false
-                    );
-                },
-            };
-            self.add(frame_config);
-        });
-    },
-
     /** Add and display a new frame/window based on options. */
     add: function (options) {
         if (options.target == "_blank") {

From babc6448d30ee5773aa041369f4332a95b306b5a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 May 2022 14:50:55 +0200
Subject: [PATCH 06/18] Remove jquery from multiview wrapper

---
 client/src/layout/scratchbook.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/layout/scratchbook.js b/client/src/layout/scratchbook.js
index 745b7563b5f..cc354aed526 100644
--- a/client/src/layout/scratchbook.js
+++ b/client/src/layout/scratchbook.js
@@ -1,6 +1,5 @@
 /** Frame manager uses the window manager to create the scratch book masthead icon and functionality **/
 import _ from "underscore";
-import $ from "jquery";
 import Backbone from "backbone";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
@@ -192,7 +191,9 @@ export default Backbone.View.extend({
     _build_url: function (url, options) {
         if (url) {
             url += url.indexOf("?") == -1 ? "?" : "&";
-            url += $.param(options, true);
+            Object.entries(options).forEach(([key, value]) => {
+                url += `${key}=${value}&`;
+            });
             return url;
         }
     },

From 439351b471f324ffbd2fc56b71f1a4a1d8198f53 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 17 May 2022 15:00:13 +0200
Subject: [PATCH 07/18] Remove custom buttons and tabular module from
 scratchbook handler for now

---
 .../History/Content/ContentItem.vue           |   5 +-
 client/src/layout/scratchbook.js              | 108 +-----------------
 client/src/mvc/dataset/dataset-li.js          |   3 +-
 3 files changed, 6 insertions(+), 110 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 45dcbf3681c..4adaf0627eb 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -128,10 +128,11 @@ export default {
         onDisplay() {
             const id = this.item.id;
             useGalaxy((Galaxy) => {
+                const url = `datasets/${id}/display/?preview=True`;
                 if (Galaxy.frame && Galaxy.frame.active) {
-                    Galaxy.frame.addDataset(id);
+                    Galaxy.frame.add({ url });
                 } else {
-                    iframeRedirect(`datasets/${id}/display/?preview=True`);
+                    iframeRedirect(url);
                 }
             });
         },
diff --git a/client/src/layout/scratchbook.js b/client/src/layout/scratchbook.js
index cc354aed526..4c3cf868b82 100644
--- a/client/src/layout/scratchbook.js
+++ b/client/src/layout/scratchbook.js
@@ -1,13 +1,9 @@
 /** Frame manager uses the window manager to create the scratch book masthead icon and functionality **/
 import _ from "underscore";
-import Backbone from "backbone";
-import { getAppRoot } from "onload/loadConfig";
-import { getGalaxyInstance } from "app";
-import { createTabularDatasetChunkedView, TabularDataset } from "mvc/dataset/data";
 import _l from "utils/localization";
+import Backbone from "backbone";
 import WinBox from "winbox/src/js/winbox.js";
 import "winbox/dist/css/winbox.min.css";
-import { urlData } from "utils/url";
 
 export default Backbone.View.extend({
     initialize: function (options) {
@@ -61,108 +57,6 @@ export default Backbone.View.extend({
         return confirmText;
     },
 
-    /** Add a dataset */
-    addDataset: function (dataset_id) {
-        const self = this;
-        let current_dataset = null;
-        const Galaxy = getGalaxyInstance();
-        if (Galaxy && Galaxy.currHistoryPanel) {
-            const history_id = Galaxy.currHistoryPanel.model.id;
-            this.history_cache[history_id] = {
-                name: Galaxy.currHistoryPanel.model.get("name"),
-                dataset_ids: [],
-            };
-            Galaxy.currHistoryPanel.collection.each((model) => {
-                if (!model.get("deleted") && model.get("visible") && model.get("history_content_type") == "dataset") {
-                    self.history_cache[history_id].dataset_ids.push(model.get("id"));
-                }
-            });
-        }
-        const _findDataset = (dataset, offset) => {
-            if (dataset) {
-                const history_details = self.history_cache[dataset.get("history_id")];
-                if (history_details && history_details.dataset_ids) {
-                    const dataset_list = history_details.dataset_ids;
-                    const pos = dataset_list.indexOf(dataset.get("id"));
-                    if (pos !== -1 && pos + offset >= 0 && pos + offset < dataset_list.length) {
-                        return dataset_list[pos + offset];
-                    }
-                }
-            }
-        };
-        const _loadOffset = (dataset, offset, frame) => {
-            const new_dataset_id = _findDataset(dataset, offset);
-            if (new_dataset_id) {
-                self._loadDataset(new_dataset_id, (new_dataset, config) => {
-                    current_dataset = new_dataset;
-                    frame.model.set(config);
-                });
-            }
-        };
-        this._loadDataset(dataset_id, (dataset, config) => {
-            current_dataset = dataset;
-            self.add(
-                _.extend(
-                    {
-                        menu: [
-                            {
-                                icon: "fa fa-chevron-circle-left",
-                                tooltip: _l("Previous in History"),
-                                onclick: function (frame) {
-                                    _loadOffset(current_dataset, -1, frame);
-                                },
-                                disabled: function () {
-                                    return !_findDataset(current_dataset, -1);
-                                },
-                            },
-                            {
-                                icon: "fa fa-chevron-circle-right",
-                                tooltip: _l("Next in History"),
-                                onclick: function (frame) {
-                                    _loadOffset(current_dataset, 1, frame);
-                                },
-                                disabled: function () {
-                                    return !_findDataset(current_dataset, 1);
-                                },
-                            },
-                        ],
-                    },
-                    config
-                )
-            );
-        });
-    },
-
-    _loadDataset: function (dataset_id, callback) {
-        const url = `api/datasets/${dataset_id}`;
-        urlData({ url }).then((dataset) => {
-            const is_tabular = _.find(
-                ["tabular", "interval"],
-                (data_type) => dataset.data_type.indexOf(data_type) !== -1
-            );
-            const history_details = this.history_cache[dataset.history_id];
-            const title = history_details ? `${history_details.name}: ${dataset.name}` : dataset.name;
-            callback(
-                dataset,
-                is_tabular
-                    ? {
-                          title: title,
-                          url: null,
-                          content: createTabularDatasetChunkedView({
-                              model: new TabularDataset(dataset.toJSON()),
-                              embedded: true,
-                              height: "100%",
-                          }).$el,
-                      }
-                    : {
-                          title: title,
-                          url: `${getAppRoot()}datasets/${dataset_id}/display/?preview=True`,
-                          content: null,
-                      }
-            );
-        });
-    },
-
     /** Add and display a new frame/window based on options. */
     add: function (options) {
         if (options.target == "_blank") {
diff --git a/client/src/mvc/dataset/dataset-li.js b/client/src/mvc/dataset/dataset-li.js
index faf92813c09..5e1f1369e9e 100644
--- a/client/src/mvc/dataset/dataset-li.js
+++ b/client/src/mvc/dataset/dataset-li.js
@@ -187,7 +187,8 @@ export var DatasetListItemView = _super.extend(
                     if (Galaxy.frame && Galaxy.frame.active) {
                         // Add dataset to frames.
                         const identifier = self.model.get("element_id") || self.model.get("id");
-                        Galaxy.frame.addDataset(identifier);
+                        const url = `datasets/${identifier}/display/?preview=True`;
+                        Galaxy.frame.add({ url });
                         ev.preventDefault();
                     }
                 };

From b44eb915d051eec4f6793562d1bc1d05991c6faf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 23 May 2022 16:24:40 -0400
Subject: [PATCH 08/18] Reduce button handling complexity (for now?)

---
 client/src/components/Masthead/Masthead.vue | 19 +-------
 client/src/layout/masthead.js               |  4 +-
 client/src/layout/scratchbook.js            | 53 ++++++---------------
 3 files changed, 17 insertions(+), 59 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 348e8942641..a2ab32426c2 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -82,7 +82,7 @@ export default {
             return brandTitle;
         },
         tabs() {
-            const scratchbookTabs = [this.mastheadState.frame.buttonActive, this.mastheadState.frame.buttonLoad];
+            const scratchbookTabs = [this.mastheadState.frame.buttonActive];
             const tabs = [].concat(this.baseTabs, this.extensionTabs, scratchbookTabs);
             return tabs.map(this._tabToJson);
         },
@@ -95,17 +95,6 @@ export default {
     mounted() {
         this.mastheadState.quotaMeter.setElement(this.$refs["quota-meter-container"]);
         this.mastheadState.quotaMeter.render();
-        const frames = this.mastheadState.frame.getFrames();
-        frames
-            .on("add remove", () => {
-                const tab = this.mastheadState.frame.buttonLoad;
-                tab.note = String(frames.counter);
-                tab.visible = frames.counter > 0;
-                tab.show_note = frames.counter > 0;
-            })
-            .on("show hide", () => {
-                this._reflectScratchbookFrames();
-            });
     },
     methods: {
         addItem(item) {
@@ -127,12 +116,6 @@ export default {
             }
             return Object.assign({}, defaults, asJson);
         },
-        _reflectScratchbookFrames() {
-            const frames = this.mastheadState.frame;
-            const tab = this.mastheadState.frame.buttonLoad;
-            tab.toggle = frames.visible;
-            tab.icon = (frames.visible && "fa-eye") || "fa-eye-slash";
-        },
     },
 };
 </script>
diff --git a/client/src/layout/masthead.js b/client/src/layout/masthead.js
index ec5bfffaca9..67dbabee8e0 100644
--- a/client/src/layout/masthead.js
+++ b/client/src/layout/masthead.js
@@ -1,5 +1,5 @@
 import $ from "jquery";
-import Scratchbook from "layout/scratchbook";
+import { MultiView } from "layout/scratchbook";
 import QuotaMeter from "mvc/user/user-quotameter";
 import { getGalaxyInstance } from "app";
 import { getAppRoot } from "onload/loadConfig";
@@ -13,7 +13,7 @@ export class MastheadState {
 
     constructor(Galaxy = null) {
         Galaxy = Galaxy || getGalaxyInstance();
-        Galaxy.frame = this.frame = new Scratchbook();
+        Galaxy.frame = this.frame = new MultiView();
 
         // set up the quota meter (And fetch the current user data from trans)
         // add quota meter to masthead
diff --git a/client/src/layout/scratchbook.js b/client/src/layout/scratchbook.js
index 4c3cf868b82..45d24537237 100644
--- a/client/src/layout/scratchbook.js
+++ b/client/src/layout/scratchbook.js
@@ -1,64 +1,40 @@
-/** Frame manager uses the window manager to create the scratch book masthead icon and functionality **/
+/** Adds window manager masthead icon and functionality **/
 import _ from "underscore";
 import _l from "utils/localization";
-import Backbone from "backbone";
 import WinBox from "winbox/src/js/winbox.js";
 import "winbox/dist/css/winbox.min.css";
 
-export default Backbone.View.extend({
-    initialize: function (options) {
+export class MultiView {
+    constructor(options) {
         options = options || {};
-        this.setElement("<div />");
+        this.$el = "<div/>";
         this.counter = 0;
         this.active = false;
         this.buttonActive = {
             id: "enable-scratchbook",
             icon: "fa-th",
-            tooltip: _l("Enable/Disable Scratchbook"),
+            tooltip: _l("Enable/Disable Window Manager"),
             toggle: false,
             onclick: () => {
                 this.active = !this.active;
                 this.buttonActive.toggle = this.active;
                 this.buttonActive.show_note = this.active;
                 this.buttonActive.note_cls = this.active && "fa fa-check";
-                if (!this.active) {
-                    this.$el.hide();
-                }
             },
         };
-        this.buttonLoad = {
-            id: "show-scratchbook",
-            icon: "fa-eye",
-            tooltip: _l("Show/Hide Scratchbook"),
-            show_note: true,
-            visible: false,
-            note: "",
-            onclick: (e) => {
-                if (this.visible) {
-                    this.$el.hide();
-                } else {
-                    this.$el.show();
-                }
-            },
-        };
-        this.history_cache = {};
-    },
-
-    getFrames() {
-        // needed for Vue.js integration
-        return this;
-    },
+    }
 
+    /** Called before closing all windows. */
     beforeUnload() {
         let confirmText = "";
         if (this.counter > 0) {
-            confirmText = `You opened ${this.counter} frame(s) which will be lost.`;
+            confirmText = `You opened ${this.counter} window(s) which will be lost.`;
         }
         return confirmText;
-    },
+    }
 
     /** Add and display a new frame/window based on options. */
-    add: function (options) {
+    add(options) {
         if (options.target == "_blank") {
             window.open(options.url);
         } else if (options.target == "_top" || options.target == "_parent" || options.target == "_self") {
@@ -76,13 +52,12 @@ export default Backbone.View.extend({
             }
         } else {
             options.url = this._build_url(options.url, { hide_panels: true, hide_masthead: true });
-            options.class = "modern";
             WinBox.new(options);
         }
-    },
+    }
 
     /** Url helper */
-    _build_url: function (url, options) {
+    _build_url(url, options) {
         if (url) {
             url += url.indexOf("?") == -1 ? "?" : "&";
             Object.entries(options).forEach(([key, value]) => {
@@ -90,5 +65,5 @@ export default Backbone.View.extend({
             });
             return url;
         }
-    },
-});
+    }
+}

From 66653447a9828f48311cb4a2f66f8700d030e028 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 08:01:26 -0400
Subject: [PATCH 09/18] Use consistent naming for window manager plugin, fix
 unload warning

---
 .../History/Content/ContentItem.vue           |  6 ++++--
 .../src/components/Masthead/Masthead.test.js  | 20 +++++++++----------
 client/src/components/Masthead/Masthead.vue   |  4 ++--
 .../src/components/Masthead/MastheadItem.vue  |  3 ---
 .../components/plugins/legacyNavigation.js    |  4 ++--
 client/src/layout/masthead.js                 |  6 +++---
 client/src/layout/page.js                     |  1 -
 .../{scratchbook.js => window-manager.js}     | 15 +++++++++-----
 8 files changed, 31 insertions(+), 28 deletions(-)
 rename client/src/layout/{scratchbook.js => window-manager.js} (86%)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 4adaf0627eb..ea90128906d 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -128,9 +128,11 @@ export default {
         onDisplay() {
             const id = this.item.id;
             useGalaxy((Galaxy) => {
-                const url = `datasets/${id}/display/?preview=True`;
                 if (Galaxy.frame && Galaxy.frame.active) {
-                    Galaxy.frame.add({ url });
+                    Galaxy.frame.add({
+                        title: this.name,
+                        url: `datasets/${id}/display/?preview=True`,
+                    });
                 } else {
                     iframeRedirect(url);
                 }
diff --git a/client/src/components/Masthead/Masthead.test.js b/client/src/components/Masthead/Masthead.test.js
index d01bd835a0e..a8fe00d31b7 100644
--- a/client/src/components/Masthead/Masthead.test.js
+++ b/client/src/components/Masthead/Masthead.test.js
@@ -1,7 +1,7 @@
 import { default as Masthead } from "./Masthead.vue";
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "jest/helpers";
-import Scratchbook from "layout/scratchbook";
+import WindowManager from "layout/window-manager";
 import { fetchMenu } from "layout/menu";
 import { loadWebhookMenuItems } from "./_webhooks";
 
@@ -12,7 +12,7 @@ jest.mock("./_webhooks");
 describe("Masthead.vue", () => {
     let wrapper;
     let localVue;
-    let scratchbook;
+    let windowManager;
     let quotaRendered;
     let quotaEl;
     let tabs;
@@ -71,15 +71,15 @@ describe("Masthead.vue", () => {
         ];
         const initialActiveTab = "shared";
 
-        // scratchbook assumes this is a Backbone collection - mock that out.
+        // window manager assumes this is a Backbone collection - mock that out.
         tabs.add = (x) => {
             tabs.push(x);
             return x;
         };
-        scratchbook = new Scratchbook({});
+        windowManager = new WindowManager({});
         const mastheadState = {
             quotaMeter,
-            frame: scratchbook,
+            frame: windowManager,
         };
 
         wrapper = mount(Masthead, {
@@ -132,11 +132,11 @@ describe("Masthead.vue", () => {
         expect(wrapper.find("#shared").classes("active")).toBe(true);
     });
 
-    it("should display scratchbook button", async () => {
-        expect(wrapper.find("#enable-scratchbook a span").classes("fa-th")).toBe(true);
-        expect(scratchbook.active).toBe(false);
-        await wrapper.find("#enable-scratchbook a").trigger("click");
-        expect(scratchbook.active).toBe(true);
+    it("should display window manager button", async () => {
+        expect(wrapper.find("#enable-window-manager a span").classes("fa-th")).toBe(true);
+        expect(windowManager.active).toBe(false);
+        await wrapper.find("#enable-window-manager a").trigger("click");
+        expect(windowManager.active).toBe(true);
     });
 
     it("should load webhooks on creation", async () => {
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index a2ab32426c2..d527d6970b5 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -82,8 +82,8 @@ export default {
             return brandTitle;
         },
         tabs() {
-            const scratchbookTabs = [this.mastheadState.frame.buttonActive];
-            const tabs = [].concat(this.baseTabs, this.extensionTabs, scratchbookTabs);
+            const windowTabs = [this.mastheadState.frame.buttonActive];
+            const tabs = [].concat(this.baseTabs, this.extensionTabs, windowTabs);
             return tabs.map(this._tabToJson);
         },
     },
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index 848fd9a0e90..ec93a4b5218 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -148,9 +148,6 @@ export default {
         propogateClick(tab, event) {
             event.preventDefault();
             tab.onclick();
-            if (tab.id === "enable-scratchbook") {
-                this.$emit("updateScratchbookTab", tab);
-            }
         },
         formatUrl(url) {
             if (typeof url === "string" && url.indexOf("//") === -1 && url.charAt(0) != "/") {
diff --git a/client/src/components/plugins/legacyNavigation.js b/client/src/components/plugins/legacyNavigation.js
index 0efac6066b1..516d20d438b 100644
--- a/client/src/components/plugins/legacyNavigation.js
+++ b/client/src/components/plugins/legacyNavigation.js
@@ -17,13 +17,13 @@ export function backboneRoute(path, ...args) {
     }
 }
 
-// wrapper for scratchbook/multiview feature
+// wrapper for window manager
 export function iframeAdd({ path, title = "Galaxy", tryIframe = true }) {
     const Galaxy = getGalaxyInstance();
     if (Galaxy.frame && Galaxy.frame.active) {
         Galaxy.frame.add({
-            url: prependPath(path),
             title: _l(title),
+            url: prependPath(path),
         });
         return true;
     } else if (tryIframe) {
diff --git a/client/src/layout/masthead.js b/client/src/layout/masthead.js
index 67dbabee8e0..af36d9de6b0 100644
--- a/client/src/layout/masthead.js
+++ b/client/src/layout/masthead.js
@@ -1,5 +1,5 @@
 import $ from "jquery";
-import { MultiView } from "layout/scratchbook";
+import { WindowManager } from "layout/window-manager";
 import QuotaMeter from "mvc/user/user-quotameter";
 import { getGalaxyInstance } from "app";
 import { getAppRoot } from "onload/loadConfig";
@@ -13,7 +13,7 @@ export class MastheadState {
 
     constructor(Galaxy = null) {
         Galaxy = Galaxy || getGalaxyInstance();
-        Galaxy.frame = this.frame = new MultiView();
+        Galaxy.frame = this.windowManager = new WindowManager();
 
         // set up the quota meter (And fetch the current user data from trans)
         // add quota meter to masthead
@@ -35,7 +35,7 @@ export class MastheadState {
                 }
             })
             .on("beforeunload", () => {
-                const text = this.frame.beforeUnload();
+                const text = this.windowManager.beforeUnload();
                 if (text) {
                     return text;
                 }
diff --git a/client/src/layout/page.js b/client/src/layout/page.js
index 4c9f72ccfb5..5897bcd3763 100644
--- a/client/src/layout/page.js
+++ b/client/src/layout/page.js
@@ -62,7 +62,6 @@ const View = Backbone.View.extend({
             this.masthead = mountMasthead(this.$masthead[0], this.config, mastheadState);
         }
         this.$center.append(this.center.$el);
-        this.$el.append(mastheadState.frame.$el);
         this.$el.append(this.modal.$el);
 
         // build panels
diff --git a/client/src/layout/scratchbook.js b/client/src/layout/window-manager.js
similarity index 86%
rename from client/src/layout/scratchbook.js
rename to client/src/layout/window-manager.js
index 45d24537237..545efe5348a 100644
--- a/client/src/layout/scratchbook.js
+++ b/client/src/layout/window-manager.js
@@ -1,13 +1,11 @@
 /** Adds window manager masthead icon and functionality **/
-import _ from "underscore";
 import _l from "utils/localization";
 import WinBox from "winbox/src/js/winbox.js";
 import "winbox/dist/css/winbox.min.css";
 
-export class MultiView {
+export class WindowManager {
     constructor(options) {
         options = options || {};
-        this.$el = "<div/>";
         this.counter = 0;
         this.active = false;
         this.buttonActive = {
@@ -51,8 +49,15 @@ export class MultiView {
                 window.location = options.url;
             }
         } else {
-            options.url = this._build_url(options.url, { hide_panels: true, hide_masthead: true });
-            WinBox.new(options);
+            this.counter++;
+            const url = this._build_url(options.url, { hide_panels: true, hide_masthead: true });
+            WinBox.new({
+                title: options.title || "Window",
+                url: url,
+                onclose: () => {
+                    this.counter--;
+                },
+            });
         }
     }
 

From 15bb4ee051a0a5b66f718aae25a5033003b603f2 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 24 May 2022 07:57:30 -0400
Subject: [PATCH 10/18] Transpile winbox for jest

---
 client/tests/jest/jest.config.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/tests/jest/jest.config.js b/client/tests/jest/jest.config.js
index 9ac271decef..c7159c8cd52 100644
--- a/client/tests/jest/jest.config.js
+++ b/client/tests/jest/jest.config.js
@@ -3,7 +3,7 @@ const path = require("path");
 // For a detailed explanation regarding each configuration property, visit:
 // https://jestjs.io/docs/en/configuration.html
 
-const modulesToTransform = ["bootstrap-vue", "rxjs", "@hirez_io"].join("|");
+const modulesToTransform = ["bootstrap-vue", "rxjs", "@hirez_io", "winbox"].join("|");
 
 module.exports = {
     // All imported modules in your tests should be mocked automatically
@@ -81,7 +81,8 @@ module.exports = {
         "^config$": "<rootDir>/tests/jest/__mocks__/config.js",
         "utils/localization$": "<rootDir>/tests/jest/__mocks__/localization.js",
         "viz/trackster$": "<rootDir>/tests/jest/__mocks__/trackster.js",
-        "rxjs/internal/scheduler/AsyncScheduler": "<rootDir>/node_modules/rxjs/dist/esm/internal/scheduler/AsyncScheduler.js"
+        "rxjs/internal/scheduler/AsyncScheduler":
+            "<rootDir>/node_modules/rxjs/dist/esm/internal/scheduler/AsyncScheduler.js",
     },
 
     // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

From b344ab20ee675b9febaf70cfeb146c8c68c0a4e3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 08:21:50 -0400
Subject: [PATCH 11/18] Fix naming, minor refactoring

---
 client/src/components/Masthead/Masthead.vue |  2 +-
 client/src/layout/window-manager.js         | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index d527d6970b5..408d38b81f1 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -82,7 +82,7 @@ export default {
             return brandTitle;
         },
         tabs() {
-            const windowTabs = [this.mastheadState.frame.buttonActive];
+            const windowTabs = [this.mastheadState.windowManager.buttonActive];
             const tabs = [].concat(this.baseTabs, this.extensionTabs, windowTabs);
             return tabs.map(this._tabToJson);
         },
diff --git a/client/src/layout/window-manager.js b/client/src/layout/window-manager.js
index 545efe5348a..15df3c8959b 100644
--- a/client/src/layout/window-manager.js
+++ b/client/src/layout/window-manager.js
@@ -22,15 +22,6 @@ export class WindowManager {
         };
     }
 
-    /** Called before closing all windows. */
-    beforeUnload() {
-        let confirmText = "";
-        if (this.counter > 0) {
-            confirmText = `You opened ${this.counter} window(s) which will be lost.`;
-        }
-        return confirmText;
-    }
-
     /** Add and display a new frame/window based on options. */
     add(options) {
         if (options.target == "_blank") {
@@ -61,6 +52,15 @@ export class WindowManager {
         }
     }
 
+    /** Called before closing all windows. */
+    beforeUnload() {
+        let confirmText = "";
+        if (this.counter > 0) {
+            confirmText = `You opened ${this.counter} window(s) which will be lost.`;
+        }
+        return confirmText;
+    }
+
     /** Url helper */
     _build_url(url, options) {
         if (url) {

From 5b575303ecb945169efc33220d2b1d23091d8198 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 08:40:19 -0400
Subject: [PATCH 12/18] Takeover window manager styles, avoid masthead overlap

---
 .../History/Content/ContentItem.vue           |   3 +-
 client/src/style/scss/base.scss               |   2 +-
 client/src/style/scss/frame.scss              | 155 ------------------
 client/src/style/scss/windows.scss            |  26 +++
 4 files changed, 29 insertions(+), 157 deletions(-)
 delete mode 100644 client/src/style/scss/frame.scss
 create mode 100644 client/src/style/scss/windows.scss

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index ea90128906d..9be30c3027c 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -128,10 +128,11 @@ export default {
         onDisplay() {
             const id = this.item.id;
             useGalaxy((Galaxy) => {
+                const url = `datasets/${id}/display/?preview=True`;
                 if (Galaxy.frame && Galaxy.frame.active) {
                     Galaxy.frame.add({
                         title: this.name,
-                        url: `datasets/${id}/display/?preview=True`,
+                        url: url,
                     });
                 } else {
                     iframeRedirect(url);
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 6f25089e965..fe61dd9854b 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -24,7 +24,7 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 
 // galaxy sub-components
 @import "reports";
-@import "frame.scss";
+@import "windows.scss";
 @import "upload.scss";
 @import "ui.scss";
 @import "library.scss";
diff --git a/client/src/style/scss/frame.scss b/client/src/style/scss/frame.scss
deleted file mode 100644
index 33fedbc8312..00000000000
--- a/client/src/style/scss/frame.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-$frame-zindex: 1000;
-$frame-default-border: $border-color;
-
-.galaxy-frame {
-    .corner {
-        -moz-border-radius: $border-radius-large;
-        border-radius: $border-radius-large;
-    }
-
-    .toggle {
-        color: $dropdown-link-active-color;
-    }
-
-    .frame-background {
-        z-index: $frame-zindex;
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 100%;
-        width: 100%;
-        opacity: 0.5;
-        background: $brand-dark;
-        overflow: auto;
-    }
-
-    .frame-shadow {
-        z-index: $frame-zindex + 1;
-        position: absolute;
-        display: none;
-        top: 0px;
-        left: 0px;
-        opacity: 0.5;
-        background: $brand-dark;
-        border: 1px solid $frame-default-border;
-    }
-
-    /*
-        panel menu button
-    */
-    .frame-menu {
-        z-index: $frame-zindex + 5;
-        position: absolute;
-        cursor: pointer;
-        color: $dropdown-link-active-color;
-        right: 10px;
-    }
-
-    .frame-scroll-up {
-        top: 50px;
-    }
-
-    .frame-scroll-down {
-        bottom: 20px;
-    }
-
-    /*
-        frame components
-    */
-
-    .frame {
-        z-index: $frame-zindex + 2;
-        overflow: hidden;
-        position: absolute;
-        background: $white;
-        border: 1px solid $frame-default-border;
-        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-
-        .f-content {
-            position: absolute;
-            overflow: hidden;
-            background: $white;
-            border: none;
-            top: 24px;
-            bottom: 3px;
-            left: 3px;
-            right: 3px;
-        }
-
-        .f-cover {
-            position: absolute;
-            display: none;
-            top: 0px;
-            left: 0px;
-            height: 100%;
-            width: 100%;
-            opacity: 0;
-            background: $white;
-        }
-
-        .f-iframe {
-            border: none;
-            width: 100%;
-            height: 100%;
-        }
-
-        .f-header {
-            height: 17px;
-            margin: 2px;
-            cursor: pointer;
-            border: 1px solid $black;
-            background: $brand-dark;
-            color: $white;
-            .f-icon-left {
-                cursor: pointer;
-                font-size: 15px;
-                margin-left: 3px;
-                float: left;
-                &[disabled] {
-                    opacity: 0.25;
-                }
-            }
-        }
-
-        .f-title {
-            position: absolute;
-            top: 2px;
-            left: 50px;
-            right: 50px;
-            font-size: 12px;
-            font-family: $font-family-sans-serif;
-            text-align: center;
-        }
-
-        /*
-            frame icons
-        */
-
-        .f-not-allowed {
-            cursor: not-allowed;
-        }
-
-        .f-close {
-            cursor: pointer;
-            position: absolute;
-            font-size: 15px;
-            right: 5px;
-            top: 2px;
-        }
-
-        .f-resize {
-            cursor: pointer;
-            position: absolute;
-            font-size: 15px;
-            right: 0px;
-            bottom: 0px;
-            background: $white;
-            width: 16px;
-            height: 16px;
-            color: $brand-dark;
-            text-align: center;
-            line-height: 16px;
-            border: 0px;
-        }
-    }
-}
diff --git a/client/src/style/scss/windows.scss b/client/src/style/scss/windows.scss
new file mode 100644
index 00000000000..e1708567c68
--- /dev/null
+++ b/client/src/style/scss/windows.scss
@@ -0,0 +1,26 @@
+.winbox {
+    border-radius: $border-radius-base;
+    @extend .m-1;
+    margin-top: 4rem;
+}
+
+.winbox.min {
+    @extend .m-0;
+}
+
+.wb-header {
+    border-radius: $border-radius-base;
+    background: $brand-info;
+}
+
+.wb-icon * {
+    opacity: 0.65;
+}
+
+.wb-icon *:hover {
+    opacity: 1;
+}
+
+.wb-full {
+    display: none !important;
+}

From 4f1aae841cd2f3358fef46888959ffd679d67ea7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 10:17:30 -0400
Subject: [PATCH 13/18] Fix button name, remove noscratchbook custom flag for
 now, fix margin

---
 client/src/layout/menu.js           | 1 -
 client/src/layout/window-manager.js | 4 ++--
 client/src/style/scss/windows.scss  | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/layout/menu.js b/client/src/layout/menu.js
index 0ed3a76019c..c186a6b8eb8 100644
--- a/client/src/layout/menu.js
+++ b/client/src/layout/menu.js
@@ -239,7 +239,6 @@ export function fetchMenu(options = {}) {
                 cls: "loggedout-only",
                 tooltip: _l("Login"),
                 url: "login",
-                noscratchbook: true,
             };
         }
     } else {
diff --git a/client/src/layout/window-manager.js b/client/src/layout/window-manager.js
index 15df3c8959b..f48a9496588 100644
--- a/client/src/layout/window-manager.js
+++ b/client/src/layout/window-manager.js
@@ -9,7 +9,7 @@ export class WindowManager {
         this.counter = 0;
         this.active = false;
         this.buttonActive = {
-            id: "enable-scratchbook",
+            id: "enable-window-manager",
             icon: "fa-th",
             tooltip: _l("Enable/Disable Window Manager"),
             toggle: false,
@@ -28,7 +28,7 @@ export class WindowManager {
             window.open(options.url);
         } else if (options.target == "_top" || options.target == "_parent" || options.target == "_self") {
             window.location = options.url;
-        } else if (!this.active || options.noscratchbook) {
+        } else if (!this.active) {
             const $galaxy_main = $(window.parent.document).find("#galaxy_main");
             if (options.target == "galaxy_main" || options.target == "center") {
                 if ($galaxy_main.length === 0) {
diff --git a/client/src/style/scss/windows.scss b/client/src/style/scss/windows.scss
index e1708567c68..a7046c94072 100644
--- a/client/src/style/scss/windows.scss
+++ b/client/src/style/scss/windows.scss
@@ -1,7 +1,7 @@
 .winbox {
     border-radius: $border-radius-base;
     @extend .m-1;
-    margin-top: 4rem;
+    margin-top: 4rem !important;
 }
 
 .winbox.min {

From 4f6397f41ecd9a2d3fc9906394a7c1437a268767 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 10:45:13 -0400
Subject: [PATCH 14/18] Adjust renaming in localization

---
 client/src/nls/es/locale.js                    |  8 ++++----
 client/src/nls/fr/locale.js                    |  8 ++++----
 client/src/nls/locale.js                       |  8 ++++----
 client/src/nls/zh/locale.js                    |  8 ++++----
 ...core.scratchbook.yaml => core.windows.yaml} | 18 +++++++++---------
 lib/galaxy_test/selenium/test_stock_tours.py   |  4 ++--
 static/welcome.html.sample                     |  2 +-
 7 files changed, 28 insertions(+), 28 deletions(-)
 rename config/plugins/tours/{core.scratchbook.yaml => core.windows.yaml} (76%)

diff --git a/client/src/nls/es/locale.js b/client/src/nls/es/locale.js
index 61854513f1b..2da775f856f 100644
--- a/client/src/nls/es/locale.js
+++ b/client/src/nls/es/locale.js
@@ -507,9 +507,9 @@ define({
     "Local data": "Datos locales",
     "Form Definitions": "Definiciones de formulario",
 
-    // ---------------------------------------------------------------------------- Scratchbook
-    "Enable/Disable Scratchbook": "Habilitar/Deshabilitar Scratchbook",
-    "Show/Hide Scratchbook": "Mostrar/Ocultar Scratchbook",
+    // ---------------------------------------------------------------------------- Window Manager
+    "Enable/Disable Window Manager": "Habilitar/Deshabilitar Window Manager",
+    "Show/Hide Window Manager": "Mostrar/Ocultar Window Manager",
 
     // ---------------------------------------------------------------------------- misc. MVC
 
@@ -793,7 +793,7 @@ define({
     "Create new Build": "Crear nueva construcción",
     "Delete custom build.": "Eliminar construcción personalizada",
     "Provide the data source.": "Proporcionar la fuente de datos",
-    // ---------------------------------------------------------------------------- scratchbook
+    // ---------------------------------------------------------------------------- Window Manager
     "Next in History": "Siguiente en historial",
     "Previous in History": "Anterior en historial",
     // ---------------------------------------------------------------------------- generic-nav-view
diff --git a/client/src/nls/fr/locale.js b/client/src/nls/fr/locale.js
index e174aa641c3..a62bff7dd34 100644
--- a/client/src/nls/fr/locale.js
+++ b/client/src/nls/fr/locale.js
@@ -230,9 +230,9 @@ define({
     "Local data": "Données locales",
     "Form Definitions": "Définitions de formulaires",
 
-    // ---------------------------------------------------------------------------- Scratchbook
-    "Enable/Disable Scratchbook": "Activer/Désactiver la visu Scratchbook",
-    "Show/Hide Scratchbook": "Montrer/cacher la visu Scratchbook",
+    // ---------------------------------------------------------------------------- Window Manager
+    "Enable/Disable Window Manager": "Activer/Désactiver la visu Window Manager",
+    "Show/Hide Window Manager": "Montrer/cacher la visu Window Manager",
 
     // ---------------------------------------------------------------------------- misc. MVC
     Tags: "Mots-clés",
@@ -437,7 +437,7 @@ define({
     "Create new Build": false,
     "Delete custom build.": false,
     "Provide the data source.": false,
-    // ---------------------------------------------------------------------------- scratchbook
+    // ---------------------------------------------------------------------------- Window Manager
     "Next in History": false,
     "Previous in History": false,
     // ---------------------------------------------------------------------------- generic-nav-view
diff --git a/client/src/nls/locale.js b/client/src/nls/locale.js
index 2b712a7bf28..5e0e2e04977 100644
--- a/client/src/nls/locale.js
+++ b/client/src/nls/locale.js
@@ -230,9 +230,9 @@ define({
         "Local data": false,
         "Form Definitions": false,
 
-        // ---------------------------------------------------------------------------- Scratchbook
-        "Enable/Disable Scratchbook": false,
-        "Show/Hide Scratchbook": false,
+        // ---------------------------------------------------------------------------- Window Manager
+        "Enable/Disable Window Manager": false,
+        "Show/Hide Window Manager": false,
 
         // ---------------------------------------------------------------------------- misc. MVC
         Tags: false,
@@ -435,7 +435,7 @@ define({
         "Create new Build": false,
         "Delete custom build.": false,
         "Provide the data source.": false,
-        // ---------------------------------------------------------------------------- scratchbook
+        // ---------------------------------------------------------------------------- Window Manager
         "Next in History": false,
         "Previous in History": false,
         // ---------------------------------------------------------------------------- generic-nav-view
diff --git a/client/src/nls/zh/locale.js b/client/src/nls/zh/locale.js
index d14bb6b878f..1e5b2adc781 100644
--- a/client/src/nls/zh/locale.js
+++ b/client/src/nls/zh/locale.js
@@ -239,9 +239,9 @@ define({
     "Local data": false,
     "Form Definitions": false,
 
-    // ---------------------------------------------------------------------------- Scratchbook
-    "Enable/Disable Scratchbook": "启用/禁用 Scratchbook",
-    "Show/Hide Scratchbook": "显示/隐藏 Scratchbook",
+    // ---------------------------------------------------------------------------- Window Manager
+    "Enable/Disable Window Manager": "启用/禁用 Window Manager",
+    "Show/Hide Window Manager": "显示/隐藏 Window Manager",
 
     // ---------------------------------------------------------------------------- misc. MVC
     Tags: "标签",
@@ -451,7 +451,7 @@ define({
     "Create new Build": "创建新的构建集",
     "Delete custom build.": "删除自定义的构建集。",
     "Provide the data source.": "提供数据源。",
-    // ---------------------------------------------------------------------------- scratchbook
+    // ---------------------------------------------------------------------------- Window Manager
     "Next in History": "下一个历史记录",
     "Previous in History": "上一个历史记录",
     // ---------------------------------------------------------------------------- generic-nav-view
diff --git a/config/plugins/tours/core.scratchbook.yaml b/config/plugins/tours/core.windows.yaml
similarity index 76%
rename from config/plugins/tours/core.scratchbook.yaml
rename to config/plugins/tours/core.windows.yaml
index 31e35319713..57857e0da61 100644
--- a/config/plugins/tours/core.scratchbook.yaml
+++ b/config/plugins/tours/core.windows.yaml
@@ -1,16 +1,16 @@
-name: Scratchbook - Introduction
+name: Window Manager - Introduction
 description: "An introduction on how to display multiple datasets and visualizations next to each other."
-title_default: "Scratchbook Introduction"
+title_default: "Window Manager Introduction"
 tags:
   - "core"
   - "UI"
   - "visualization"
 
 steps:
-    - content: "This short tour will walk you through <b>Galaxy's Scratchbook</b> feature"
+    - content: "This short tour will walk you through <b>Galaxy's Window Manager</b> feature"
 
     - element: "#tool-panel-upload-button"
-      intro: "Before using the Scratchbook, we will upload some tabular data."
+      intro: "Before using the Window Manager, we will upload some tabular data."
       postclick:
         - "#tool-panel-upload-button"
 
@@ -52,10 +52,10 @@ steps:
       postclick:
         - "#btn-close"
 
-    - element: "#enable-scratchbook > .nav-link"
-      intro: "Clicking this button will enable Galaxy's Scratchbook mode."
+    - element: "#enable-window-manager > .nav-link"
+      intro: "Clicking this button will enable Galaxy's Window Manager mode."
       postclick:
-        - "#enable-scratchbook > .nav-link"
+        - "#enable-window-manager > .nav-link"
 
     - element: "#right"
       intro: "This is your history. It contains all datasets you are currently working with including our uploaded table."
@@ -66,7 +66,7 @@ steps:
         - "#current-history-panel div.content-item button[title='Display']"
 
     - element: "#frame-0"
-      intro: "However while in Scratchbook mode, the dataset will be shown as resizable window."
+      intro: "However while using the Window Manager, the dataset will be shown as resizable window."
 
     - title: "Done."
-      intro: "You have created a Scratchbook view. Click on the background and select more datasets."
+      intro: "You have created a Window. Click on the background and select more datasets."
diff --git a/lib/galaxy_test/selenium/test_stock_tours.py b/lib/galaxy_test/selenium/test_stock_tours.py
index e3bd9032e96..2e5c39f4d06 100644
--- a/lib/galaxy_test/selenium/test_stock_tours.py
+++ b/lib/galaxy_test/selenium/test_stock_tours.py
@@ -21,9 +21,9 @@ class TestStockToursTestCase(SeleniumTestCase):
         self.run_tour(os.path.join(STOCK_TOURS_DIRECTORY, "core.galaxy_ui.yaml"), sleep_on_steps=sleep_on_steps)
 
     @selenium_test
-    def test_core_scratchbook(self):
+    def test_core_windows(self):
         self.run_tour(
-            os.path.join(STOCK_TOURS_DIRECTORY, "core.scratchbook.yaml"),
+            os.path.join(STOCK_TOURS_DIRECTORY, "core.windows.yaml"),
         )
 
     @selenium_test
diff --git a/static/welcome.html.sample b/static/welcome.html.sample
index 711e83b7d2b..bcd17540861 100644
--- a/static/welcome.html.sample
+++ b/static/welcome.html.sample
@@ -18,7 +18,7 @@
                 <p>Take an interactive tour:
                     <a target="_parent" href="../tours/core.galaxy_ui" class="btn btn-secondary btn-sm">Galaxy UI</a>
                     <a target="_parent" href="../tours/core.history" class="btn btn-secondary btn-sm">History</a>
-                    <a target="_parent" href="../tours/core.scratchbook" class="btn btn-secondary btn-sm">Scratchbook</a>
+                    <a target="_parent" href="../tours/core.windows" class="btn btn-secondary btn-sm">Window Manager</a>
                 </p>
             </div>
         </div>

From 59880bc07a1c6c59c4f77f39efaa36f26c88d9c9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 10:52:52 -0400
Subject: [PATCH 15/18] Fix testing, routing and window ids in tour

---
 client/src/components/History/Content/ContentItem.vue | 3 ++-
 client/src/components/Masthead/Masthead.test.js       | 6 +++---
 client/src/layout/window-manager.js                   | 2 +-
 client/src/style/scss/windows.scss                    | 4 ++--
 config/plugins/tours/core.windows.yaml                | 2 +-
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 9be30c3027c..b35618ec885 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -60,6 +60,7 @@
 </template>
 
 <script>
+import { getAppRoot } from "onload";
 import { backboneRoute, useGalaxy, iframeRedirect } from "components/plugins/legacyNavigation";
 import { Nametag } from "components/Nametags";
 import { STATES } from "./model/states";
@@ -128,7 +129,7 @@ export default {
         onDisplay() {
             const id = this.item.id;
             useGalaxy((Galaxy) => {
-                const url = `datasets/${id}/display/?preview=True`;
+                const url = `${getAppRoot()}datasets/${id}/display/?preview=True`;
                 if (Galaxy.frame && Galaxy.frame.active) {
                     Galaxy.frame.add({
                         title: this.name,
diff --git a/client/src/components/Masthead/Masthead.test.js b/client/src/components/Masthead/Masthead.test.js
index a8fe00d31b7..15ba5777526 100644
--- a/client/src/components/Masthead/Masthead.test.js
+++ b/client/src/components/Masthead/Masthead.test.js
@@ -1,7 +1,7 @@
 import { default as Masthead } from "./Masthead.vue";
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "jest/helpers";
-import WindowManager from "layout/window-manager";
+import { WindowManager } from "layout/window-manager";
 import { fetchMenu } from "layout/menu";
 import { loadWebhookMenuItems } from "./_webhooks";
 
@@ -79,7 +79,7 @@ describe("Masthead.vue", () => {
         windowManager = new WindowManager({});
         const mastheadState = {
             quotaMeter,
-            frame: windowManager,
+            windowManager,
         };
 
         wrapper = mount(Masthead, {
@@ -105,7 +105,7 @@ describe("Masthead.vue", () => {
     });
 
     it("should render simple tab item links", () => {
-        expect(wrapper.findAll("li.nav-item").length).toBe(6);
+        expect(wrapper.findAll("li.nav-item").length).toBe(5);
         // Ensure specified link title respected.
         expect(wrapper.find("#analysis a").text()).toBe("Analyze");
         expect(wrapper.find("#analysis a").attributes("href")).toBe("/root");
diff --git a/client/src/layout/window-manager.js b/client/src/layout/window-manager.js
index f48a9496588..3cd6b5a2463 100644
--- a/client/src/layout/window-manager.js
+++ b/client/src/layout/window-manager.js
@@ -22,7 +22,7 @@ export class WindowManager {
         };
     }
 
-    /** Add and display a new frame/window based on options. */
+    /** Add and display a new window based on options. */
     add(options) {
         if (options.target == "_blank") {
             window.open(options.url);
diff --git a/client/src/style/scss/windows.scss b/client/src/style/scss/windows.scss
index a7046c94072..15b7970ea45 100644
--- a/client/src/style/scss/windows.scss
+++ b/client/src/style/scss/windows.scss
@@ -1,7 +1,7 @@
 .winbox {
     border-radius: $border-radius-base;
-    @extend .m-1;
-    margin-top: 4rem !important;
+    margin-top: 4rem;
+    margin-left: 1rem;
 }
 
 .winbox.min {
diff --git a/config/plugins/tours/core.windows.yaml b/config/plugins/tours/core.windows.yaml
index 57857e0da61..b2e0255df97 100644
--- a/config/plugins/tours/core.windows.yaml
+++ b/config/plugins/tours/core.windows.yaml
@@ -65,7 +65,7 @@ steps:
       postclick:
         - "#current-history-panel div.content-item button[title='Display']"
 
-    - element: "#frame-0"
+    - element: "#winbox-1"
       intro: "However while using the Window Manager, the dataset will be shown as resizable window."
 
     - title: "Done."

From e45acf8759543fbd2bdaf10abffe679c14351bf2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 11:45:03 -0400
Subject: [PATCH 16/18] Remove jquery from window manager wrapper

---
 client/src/layout/window-manager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/layout/window-manager.js b/client/src/layout/window-manager.js
index 3cd6b5a2463..99befc0a057 100644
--- a/client/src/layout/window-manager.js
+++ b/client/src/layout/window-manager.js
@@ -29,7 +29,7 @@ export class WindowManager {
         } else if (options.target == "_top" || options.target == "_parent" || options.target == "_self") {
             window.location = options.url;
         } else if (!this.active) {
-            const $galaxy_main = $(window.parent.document).find("#galaxy_main");
+            const $galaxy_main = window.parent.document.getElementById("galaxy_main");
             if (options.target == "galaxy_main" || options.target == "center") {
                 if ($galaxy_main.length === 0) {
                     window.location = this._build_url(options.url, { use_panels: true });

From dd87b34ffe68492784d56675c4310fb4cab8ff78 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 13:47:38 -0400
Subject: [PATCH 17/18] Fix ui galaxy tour

---
 config/plugins/tours/core.galaxy_ui.yaml | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 39e3a26fe6e..f50432b377d 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -134,37 +134,37 @@ steps:
       postclick:
         - "#left > div.unified-panel-footer > div.panel-collapse.left"
 
-    - title: 'Top panel'
+    - title: "Top panel"
       element: "#masthead"
       intro: "The top panel will give you access to a lot of useful things."
 
-    - title: 'Analyze data'
+    - title: "Analyze data"
       element: "#analysis"
       intro: "This is the current view. Start your <b>Analysis</b> from here."
 
-    - title: 'Workflow'
+    - title: "Workflow"
       element: "#workflow"
       intro: "Create, manage, import, export and share your <b>Workflows</b>."
 
-    - title: 'Shared data'
+    - title: "Shared data"
       element: "#shared"
       intro: "Get access to all <b>Workflows</b>, <b>Histories</b>, <b>Pages</b>, <b>Visualizations</b> and your <b>Data Library</b> that are shared with you."
 
-    - title: 'Visualization'
+    - title: "Visualization"
       element: "#visualization"
       intro: "Galaxy offers a lot of visualizations to review your data!"
 
-    - title: 'Help'
+    - title: "Help"
       element: "#help"
       intro: "Here you get more help from the Galaxy <b>Community</b> with Videos, a QA board and more tours."
 
-    - title: 'User Preferences'
+    - title: "User Preferences"
       element: "#user"
       intro: "Login and start your analysis!"
 
-    - title: 'Scratchbook'
-      element: "#enable-scratchbook"
-      intro: "Scratchbook offers you multiple visualizations next to each other. Have a look at our Scratchbook tour to learn more about it."
+    - title: "Window Manager"
+      element: "#enable-window-manager"
+      intro: "Window Manager offers you multiple visualizations next to each other. Have a look at our Window Manager tour to learn more about it."
 
     - title: "Enjoy Galaxy"
       intro: "Thanks for taking this tour! Happy research with Galaxy!"

From e2916c3b761bbe114ae97dad0f7bc2ea6950c447 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 24 May 2022 15:48:39 -0400
Subject: [PATCH 18/18] Fix visualization title and legacy history url

---
 .../src/components/History/Content/Dataset/DatasetActions.vue | 4 +++-
 client/src/mvc/dataset/dataset-li.js                          | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index cd49d6a1a88..905ec322fb2 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -144,10 +144,12 @@ export default {
             this.showTags = !this.showTags;
         },
         onVisualize() {
+            const name = this.item.name || "";
+            const title = `Visualization of ${name}`;
             const path = `visualizations?dataset_id=${this.item.id}`;
             const redirectParams = {
                 path: path,
-                title: "Dataset details",
+                title: title,
                 tryIframe: false,
             };
             if (!this.iframeAdd(redirectParams)) {
diff --git a/client/src/mvc/dataset/dataset-li.js b/client/src/mvc/dataset/dataset-li.js
index 5e1f1369e9e..687f23e7934 100644
--- a/client/src/mvc/dataset/dataset-li.js
+++ b/client/src/mvc/dataset/dataset-li.js
@@ -9,6 +9,7 @@ import BASE_MVC from "mvc/base-mvc";
 import _l from "utils/localization";
 import { mountNametags } from "components/Nametags";
 import { Toast } from "ui/toast";
+import { getAppRoot } from "onload/loadConfig";
 
 var logNamespace = "dataset";
 /*==============================================================================
@@ -187,7 +188,7 @@ export var DatasetListItemView = _super.extend(
                     if (Galaxy.frame && Galaxy.frame.active) {
                         // Add dataset to frames.
                         const identifier = self.model.get("element_id") || self.model.get("id");
-                        const url = `datasets/${identifier}/display/?preview=True`;
+                        const url = `${getAppRoot()}datasets/${identifier}/display/?preview=True`;
                         Galaxy.frame.add({ url });
                         ev.preventDefault();
                     }