diff --git a/client/src/mvc/base-mvc.js b/client/src/app/base-mvc.js
similarity index 100%
rename from client/src/mvc/base-mvc.js
rename to client/src/app/base-mvc.js
diff --git a/client/src/app/galaxy.js b/client/src/app/galaxy.js
index e0725c1b864..983503ed6ef 100644
--- a/client/src/app/galaxy.js
+++ b/client/src/app/galaxy.js
@@ -1,8 +1,8 @@
 import $ from "jquery";
 import _ from "underscore";
 import Backbone from "backbone";
-import BASE_MVC from "mvc/base-mvc";
-import userModel from "mvc/user/user-model";
+import BASE_MVC from "./base-mvc";
+import userModel from "./user-model";
 import metricsLogger from "utils/metrics-logger";
 import addLogging from "utils/add-logging";
 import localize from "utils/localization";
diff --git a/client/src/mvc/user/user-model.js b/client/src/app/user-model.js
similarity index 99%
rename from client/src/mvc/user/user-model.js
rename to client/src/app/user-model.js
index 3ae4aec5ced..b382f24d841 100644
--- a/client/src/mvc/user/user-model.js
+++ b/client/src/app/user-model.js
@@ -1,6 +1,6 @@
 import Backbone from "backbone";
 import { getAppRoot } from "onload/loadConfig";
-import baseMVC from "mvc/base-mvc";
+import baseMVC from "./base-mvc";
 import _l from "utils/localization";
 
 var logNamespace = "user";
diff --git a/client/src/components/Common/Webhook.vue b/client/src/components/Common/Webhook.vue
index 6aec81f5dc1..8a656234f87 100644
--- a/client/src/components/Common/Webhook.vue
+++ b/client/src/components/Common/Webhook.vue
@@ -2,7 +2,7 @@
     <div id="webhook-view" ref="webhook" />
 </template>
 <script>
-import Webhooks from "mvc/webhooks";
+import Webhooks from "utils/webhooks";
 
 export default {
     props: {
diff --git a/client/src/components/Masthead/_webhooks.js b/client/src/components/Masthead/_webhooks.js
index 4353b5b744b..bc1dff9c6ae 100644
--- a/client/src/components/Masthead/_webhooks.js
+++ b/client/src/components/Masthead/_webhooks.js
@@ -1,4 +1,4 @@
-import Webhooks from "mvc/webhooks";
+import Webhooks from "utils/webhooks";
 import Utils from "utils/utils";
 
 export function loadWebhookMenuItems(items) {
diff --git a/client/src/components/RuleBuilder/IdentifierDisplay.vue b/client/src/components/RuleBuilder/IdentifierDisplay.vue
index 9df329ad78a..3f273042f6d 100644
--- a/client/src/components/RuleBuilder/IdentifierDisplay.vue
+++ b/client/src/components/RuleBuilder/IdentifierDisplay.vue
@@ -8,7 +8,7 @@
 
 <script>
 import _l from "utils/localization";
-import RuleDefs from "mvc/rules/rule-definitions";
+import RuleDefs from "./rule-definitions";
 const MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
 
 export default {
diff --git a/client/src/components/RuleBuilder/RuleDisplay.vue b/client/src/components/RuleBuilder/RuleDisplay.vue
index 4fa36439f78..8db4694b53e 100644
--- a/client/src/components/RuleBuilder/RuleDisplay.vue
+++ b/client/src/components/RuleBuilder/RuleDisplay.vue
@@ -16,7 +16,7 @@
 
 <script>
 import _l from "utils/localization";
-import RuleDefs from "mvc/rules/rule-definitions";
+import RuleDefs from "./rule-definitions";
 const RULES = RuleDefs.RULES;
 
 export default {
diff --git a/client/src/components/RuleBuilder/RuleTargetComponent.vue b/client/src/components/RuleBuilder/RuleTargetComponent.vue
index aeb4d07d1df..1dbd4f87fdf 100644
--- a/client/src/components/RuleBuilder/RuleTargetComponent.vue
+++ b/client/src/components/RuleBuilder/RuleTargetComponent.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import RuleDefs from "mvc/rules/rule-definitions";
+import RuleDefs from "./rule-definitions";
 const RULES = RuleDefs.RULES;
 
 export default {
diff --git a/client/src/components/RuleBuilder/SavedRulesSelector.vue b/client/src/components/RuleBuilder/SavedRulesSelector.vue
index 41acb1ae859..ce24a7bbf32 100644
--- a/client/src/components/RuleBuilder/SavedRulesSelector.vue
+++ b/client/src/components/RuleBuilder/SavedRulesSelector.vue
@@ -26,7 +26,7 @@
 import Vue from "vue";
 import _l from "utils/localization";
 import BootstrapVue from "bootstrap-vue";
-import { RULES, MAPPING_TARGETS } from "mvc/rules/rule-definitions";
+import { RULES, MAPPING_TARGETS } from "./rule-definitions";
 import UtcDate from "components/UtcDate";
 
 Vue.use(BootstrapVue);
diff --git a/client/src/mvc/rules/rule-definitions.js b/client/src/components/RuleBuilder/rule-definitions.js
similarity index 100%
rename from client/src/mvc/rules/rule-definitions.js
rename to client/src/components/RuleBuilder/rule-definitions.js
diff --git a/client/src/components/RuleCollectionBuilder.vue b/client/src/components/RuleCollectionBuilder.vue
index 1a2f50e2093..69e40abb6f2 100644
--- a/client/src/components/RuleCollectionBuilder.vue
+++ b/client/src/components/RuleCollectionBuilder.vue
@@ -575,10 +575,10 @@ import { refreshContentsWrapper } from "utils/data";
 import HotTable from "@handsontable/vue";
 import UploadUtils from "mvc/upload/upload-utils";
 import JobStatesModel from "utils/job-states-model";
-import RuleDefs from "mvc/rules/rule-definitions";
 import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import Select2 from "components/Select2";
+import RuleDefs from "components/RuleBuilder/rule-definitions";
 import ColumnSelector from "components/RuleBuilder/ColumnSelector";
 import RegularExpressionInput from "components/RuleBuilder/RegularExpressionInput";
 import RuleDisplay from "components/RuleBuilder/RuleDisplay";
diff --git a/client/src/components/RulesDisplay/IdentifierDisplayPreview.vue b/client/src/components/RulesDisplay/IdentifierDisplayPreview.vue
index 9a77fe41ee8..18822e5f1eb 100644
--- a/client/src/components/RulesDisplay/IdentifierDisplayPreview.vue
+++ b/client/src/components/RulesDisplay/IdentifierDisplayPreview.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import RuleDefs from "mvc/rules/rule-definitions";
+import RuleDefs from "components/RuleBuilder/rule-definitions";
 
 export default {
     props: {
diff --git a/client/src/components/RulesDisplay/RuleDisplayPreview.vue b/client/src/components/RulesDisplay/RuleDisplayPreview.vue
index b3ed8f39335..40edbd7a3f0 100644
--- a/client/src/components/RulesDisplay/RuleDisplayPreview.vue
+++ b/client/src/components/RulesDisplay/RuleDisplayPreview.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import RuleDefs from "mvc/rules/rule-definitions";
+import RuleDefs from "components/RuleBuilder/rule-definitions";
 export default {
     props: {
         rule: {
diff --git a/client/src/components/RulesDisplay/RulesDisplay.vue b/client/src/components/RulesDisplay/RulesDisplay.vue
index fffe444627f..b9713ee3db9 100644
--- a/client/src/components/RulesDisplay/RulesDisplay.vue
+++ b/client/src/components/RulesDisplay/RulesDisplay.vue
@@ -17,7 +17,7 @@
     </div>
 </template>
 <script>
-import RuleDefs from "mvc/rules/rule-definitions";
+import RuleDefs from "components/RuleBuilder/rule-definitions";
 import RuleDisplayPreview from "./RuleDisplayPreview";
 import IdentifierDisplayPreview from "./IdentifierDisplayPreview";
 
diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index b8c6230b428..d3e1df138ee 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -112,7 +112,7 @@ import FormMessage from "components/Form/FormMessage";
 import ToolFooter from "components/Tool/ToolFooter";
 import ToolHelp from "components/Tool/ToolHelp";
 import ToolSourceMenuItem from "components/Tool/ToolSourceMenuItem";
-import Webhooks from "mvc/webhooks";
+import Webhooks from "utils/webhooks";
 import { addFavorite, removeFavorite } from "components/Tool/services";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
diff --git a/client/src/components/Upload/UploadBoxMixin.js b/client/src/components/Upload/UploadBoxMixin.js
index 74d5a550359..35c611c6d2e 100644
--- a/client/src/components/Upload/UploadBoxMixin.js
+++ b/client/src/components/Upload/UploadBoxMixin.js
@@ -7,7 +7,7 @@ import UploadModel from "mvc/upload/upload-model";
 import UploadWrapper from "./UploadWrapper";
 import { defaultNewFileName, uploadModelsToPayload } from "./helpers";
 import UploadFtp from "mvc/upload/upload-ftp";
-import LazyLimited from "mvc/lazy/lazy-limited";
+import LazyLimited from "./lazy-limited";
 import { findExtension } from "./utils";
 import { filesDialog, refreshContentsWrapper } from "utils/data";
 import { getAppRoot } from "onload";
diff --git a/client/src/mvc/lazy/lazy-limited.js b/client/src/components/Upload/lazy-limited.js
similarity index 100%
rename from client/src/mvc/lazy/lazy-limited.js
rename to client/src/components/Upload/lazy-limited.js
diff --git a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
index 19741471a6a..a127c9ddf04 100644
--- a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
@@ -27,7 +27,7 @@
 <script>
 import { mapGetters } from "vuex";
 import { WorkflowInvocationState } from "components/WorkflowInvocationState";
-import Webhooks from "mvc/webhooks";
+import Webhooks from "utils/webhooks";
 import { getAppRoot } from "onload/loadConfig";
 import { refreshContentsWrapper } from "utils/data";
 
diff --git a/client/src/mvc/list/list-item.js b/client/src/mvc/list/list-item.js
deleted file mode 100644
index 72f24a8cdc6..00000000000
--- a/client/src/mvc/list/list-item.js
+++ /dev/null
@@ -1,502 +0,0 @@
-import $ from "jquery";
-import Backbone from "backbone";
-import _ from "underscore";
-import BASE_MVC from "mvc/base-mvc";
-
-var logNamespace = "list";
-//==============================================================================
-/** A view which, when first rendered, shows only summary data/attributes, but
- *      can be expanded to show further details (and optionally fetch those
- *      details from the server).
- */
-var ExpandableView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
-    _logNamespace: logNamespace,
-
-    //TODO: Although the reasoning behind them is different, this shares a lot with HiddenUntilActivated above: combine them
-    //PRECONDITION: model must have method hasDetails
-    //PRECONDITION: subclasses must have templates.el and templates.details
-
-    initialize: function (attributes) {
-        /** are the details of this view expanded/shown or not? */
-        this.expanded = attributes.expanded || false;
-        this.log("\t expanded:", this.expanded);
-        this.fxSpeed = attributes.fxSpeed !== undefined ? attributes.fxSpeed : this.fxSpeed;
-    },
-
-    // ........................................................................ render main
-    /** jq fx speed */
-    fxSpeed: "fast",
-
-    /** Render this content, set up ui.
-     *  @param {Number or String} speed   the speed of the render
-     */
-    render: function (speed) {
-        var $newRender = this._buildNewRender();
-        this._setUpBehaviors($newRender);
-        this._queueNewRender($newRender, speed);
-        return this;
-    },
-
-    /** Build a temp div containing the new children for the view's $el.
-     *      If the view is already expanded, build the details as well.
-     */
-    _buildNewRender: function () {
-        // create a new render using a skeleton template, render title buttons, render body, and set up events, etc.
-        var $newRender = $(this.templates.el(this.model.toJSON(), this));
-        if (this.expanded) {
-            this.$details($newRender).replaceWith(this._renderDetails().show());
-        }
-        return $newRender;
-    },
-
-    /** Fade out the old el, swap in the new contents, then fade in.
-     *  @param {Number or String} speed   jq speed to use for rendering effects
-     *  @fires rendered when rendered
-     */
-    _queueNewRender: function ($newRender, speed) {
-        speed = speed === undefined ? this.fxSpeed : speed;
-        var view = this;
-
-        if (speed === 0) {
-            view._swapNewRender($newRender);
-            view.trigger("rendered", view);
-        } else {
-            $(view).queue("fx", [
-                (next) => {
-                    view.$el.fadeOut(speed, next);
-                },
-                (next) => {
-                    view._swapNewRender($newRender);
-                    next();
-                },
-                (next) => {
-                    view.$el.fadeIn(speed, next);
-                },
-                (next) => {
-                    view.trigger("rendered", view);
-                    next();
-                },
-            ]);
-        }
-    },
-
-    /** empty out the current el, move the $newRender's children in */
-    _swapNewRender: function ($newRender) {
-        return this.$el
-            .empty()
-            .attr("class", _.isFunction(this.className) ? this.className() : this.className)
-            .append($newRender.children());
-    },
-
-    /** set up js behaviors, event handlers for elements within the given container
-     *  @param {jQuery} $container jq object that contains the elements to process (defaults to this.$el)
-     */
-    _setUpBehaviors: function ($where) {
-        $where = $where || this.$el;
-        // set up canned behavior on children (bootstrap, popupmenus, editable_text, etc.)
-        //make_popup_menus( $where );
-        $where.find("[title]").tooltip({ placement: "bottom" });
-    },
-
-    // ......................................................................... details
-    /** shortcut to details DOM (as jQ) */
-    $details: function ($where) {
-        $where = $where || this.$el;
-        return $where.find("> .details");
-    },
-
-    /** build the DOM for the details and set up behaviors on it */
-    _renderDetails: function () {
-        var $newDetails = $(this.templates.details(this.model.toJSON(), this));
-        this._setUpBehaviors($newDetails);
-        return $newDetails;
-    },
-
-    // ......................................................................... expansion/details
-    /** Show or hide the details
-     *  @param {Boolean} expand if true, expand; if false, collapse
-     */
-    toggleExpanded: function (expand) {
-        expand = expand === undefined ? !this.expanded : expand;
-        if (expand) {
-            this.expand();
-        } else {
-            this.collapse();
-        }
-        return this;
-    },
-
-    /** Render and show the full, detailed body of this view including extra data and controls.
-     *      note: if the model does not have detailed data, fetch that data before showing the body
-     *  @fires expanded when a body has been expanded
-     */
-    expand: function () {
-        var view = this;
-        return view._fetchModelDetails().always(() => {
-            view._expand();
-        });
-    },
-
-    /** Check for model details and, if none, fetch them.
-     *  @returns {jQuery.promise} the model.fetch.xhr if details are being fetched, an empty promise if not
-     */
-    _fetchModelDetails: function () {
-        if (!this.model.hasDetails()) {
-            return this.model.fetch();
-        }
-        return $.when();
-    },
-
-    /** Inner fn called when expand (public) has fetched the details */
-    _expand: function () {
-        var view = this;
-        var $newDetails = view._renderDetails();
-        view.$details().replaceWith($newDetails);
-        // needs to be set after the above or the slide will not show
-        view.expanded = true;
-        view.$details().slideDown(view.fxSpeed, () => {
-            view.trigger("expanded", view);
-        });
-    },
-
-    /** Hide the body/details of an HDA.
-     *  @fires collapsed when a body has been collapsed
-     */
-    collapse: function () {
-        this.debug(`${this}(ExpandableView).collapse`);
-        var view = this;
-        view.expanded = false;
-        this.$details().slideUp(view.fxSpeed, () => {
-            view.trigger("collapsed", view);
-        });
-    },
-});
-
-//==============================================================================
-/** A view that is displayed in some larger list/grid/collection.
- *      Inherits from Expandable, Selectable, Draggable.
- *  The DOM contains warnings, a title bar, and a series of primary action controls.
- *      Primary actions are meant to be easily accessible item functions (such as delete)
- *      that are rendered in the title bar.
- *
- *  Details are rendered when the user clicks the title bar or presses enter/space when
- *      the title bar is in focus.
- *
- *  Designed as a base class for history panel contents - but usable elsewhere (I hope).
- */
-export var ListItemView = ExpandableView.extend(
-    BASE_MVC.mixin(BASE_MVC.SelectableViewMixin, BASE_MVC.DraggableViewMixin, {
-        tagName: "div",
-        className: "list-item",
-
-        /** Set up the base class and all mixins */
-        initialize: function (attributes) {
-            ExpandableView.prototype.initialize.call(this, attributes);
-            BASE_MVC.SelectableViewMixin.initialize.call(this, attributes);
-            BASE_MVC.DraggableViewMixin.initialize.call(this, attributes);
-            this._setUpListeners();
-        },
-
-        /** event listeners */
-        _setUpListeners: function () {
-            // hide the primary actions in the title bar when selectable and narrow
-            this.on(
-                "selectable",
-                function (isSelectable) {
-                    if (isSelectable) {
-                        this.$(".primary-actions").hide();
-                    } else {
-                        this.$(".primary-actions").show();
-                    }
-                },
-                this
-            );
-            return this;
-        },
-
-        // ........................................................................ rendering
-        /** In this override, call methods to build warnings, titlebar and primary actions */
-        _buildNewRender: function () {
-            var $newRender = ExpandableView.prototype._buildNewRender.call(this);
-            $newRender.children(".warnings").replaceWith(this._renderWarnings());
-            $newRender.children(".title-bar").replaceWith(this._renderTitleBar());
-            $newRender.children(".primary-actions").append(this._renderPrimaryActions());
-            $newRender.find("> .title-bar .subtitle").replaceWith(this._renderSubtitle());
-            return $newRender;
-        },
-
-        /** In this override, render the selector controls and set up dragging before the swap */
-        _swapNewRender: function ($newRender) {
-            ExpandableView.prototype._swapNewRender.call(this, $newRender);
-            if (this.selectable) {
-                this.showSelector(0);
-            }
-            if (this.draggable) {
-                this.draggableOn();
-            }
-            return this.$el;
-        },
-
-        /** Render any warnings the item may need to show (e.g. "I'm deleted") */
-        _renderWarnings: function () {
-            var view = this;
-            var $warnings = $('<div class="warnings"></div>');
-            var json = view.model.toJSON();
-            //TODO:! unordered (map)
-            _.each(view.templates.warnings, (templateFn) => {
-                $warnings.append($(templateFn(json, view)));
-            });
-            return $warnings;
-        },
-
-        /** Render the title bar (the main/exposed SUMMARY dom element) */
-        _renderTitleBar: function () {
-            return $(this.templates.titleBar(this.model.toJSON(), this));
-        },
-
-        /** Return an array of jQ objects containing common/easily-accessible item controls */
-        _renderPrimaryActions: function () {
-            // override this
-            return [];
-        },
-
-        /** Render the title bar (the main/exposed SUMMARY dom element) */
-        _renderSubtitle: function () {
-            return $(this.templates.subtitle(this.model.toJSON(), this));
-        },
-
-        // ......................................................................... events
-        /** event map */
-        events: {
-            // expand the body when the title is clicked or when in focus and space or enter is pressed
-            "click .title-bar": "_clickTitleBar",
-            "keydown .title-bar": "_keyDownTitleBar",
-            "click .selector": "toggleSelect",
-        },
-
-        /** expand when the title bar is clicked */
-        _clickTitleBar: function (event) {
-            event.stopPropagation();
-            if (event.altKey) {
-                this.toggleSelect(event);
-                if (!this.selectable) {
-                    this.showSelector();
-                }
-            } else {
-                this.toggleExpanded();
-            }
-        },
-
-        /** expand when the title bar is in focus and enter or space is pressed */
-        _keyDownTitleBar: function (event) {
-            // bail (with propagation) if keydown and not space or enter
-            var KEYCODE_SPACE = 32;
-
-            var KEYCODE_RETURN = 13;
-            if (
-                event &&
-                event.type === "keydown" &&
-                (event.keyCode === KEYCODE_SPACE || event.keyCode === KEYCODE_RETURN)
-            ) {
-                this.toggleExpanded();
-                event.stopPropagation();
-                return false;
-            }
-            return true;
-        },
-
-        // ......................................................................... misc
-        /** String representation */
-        toString: function () {
-            var modelString = this.model ? `${this.model}` : "(no model)";
-            return `ListItemView(${modelString})`;
-        },
-    })
-);
-
-// ............................................................................ TEMPLATES
-/** underscore templates */
-ListItemView.prototype.templates = (() => {
-    var elTemplato = BASE_MVC.wrapTemplate([
-        '<div class="list-element">',
-        // errors, messages, etc.
-        '<div class="warnings"></div>',
-
-        // multi-select checkbox
-        '<div class="selector">',
-        '<span class="fa fa-2x fa-square-o"></span>',
-        "</div>",
-        // space for title bar buttons - gen. floated to the right
-        '<div class="primary-actions"></div>',
-        '<div class="title-bar"></div>',
-
-        // expandable area for more details
-        '<div class="details"></div>',
-        "</div>",
-    ]);
-
-    var warnings = {};
-
-    var titleBarTemplate = BASE_MVC.wrapTemplate(
-        [
-            // adding a tabindex here allows focusing the title bar and the use of keydown to expand the dataset display
-            '<div class="title-bar clear" tabindex="0">',
-            //TODO: prob. belongs in dataset-list-item
-            '<span class="state-icon"></span>',
-            '<div class="title">',
-            '<span class="name"><%- element.name %></span>',
-            "</div>",
-            '<div class="subtitle"></div>',
-            "</div>",
-        ],
-        "element"
-    );
-
-    var subtitleTemplate = BASE_MVC.wrapTemplate([
-        // override this
-        '<div class="subtitle"></div>',
-    ]);
-
-    var detailsTemplate = BASE_MVC.wrapTemplate([
-        // override this
-        '<div class="details"></div>',
-    ]);
-
-    return {
-        el: elTemplato,
-        warnings: warnings,
-        titleBar: titleBarTemplate,
-        subtitle: subtitleTemplate,
-        details: detailsTemplate,
-    };
-})();
-
-//==============================================================================
-/** A view that is displayed in some larger list/grid/collection.
- *  *AND* can display some sub-list of it's own when expanded (e.g. dataset collections).
- *  This list will 'foldout' when the item is expanded depending on this.foldoutStyle:
- *      If 'foldout': will expand vertically to show the nested list
- *      If 'drilldown': will overlay the parent list
- *
- *  Inherits from ListItemView.
- *
- *  _renderDetails does the work of creating this.details: a sub-view that shows the nested list
- */
-export var FoldoutListItemView = ListItemView.extend({
-    /** If 'foldout': show the sub-panel inside the expanded item
-     *  If 'drilldown': only fire events and handle by pub-sub
-     *      (allow the panel containing this item to attach it, hide itself, etc.)
-     */
-    foldoutStyle: "foldout",
-    /** Panel view class to instantiate for the sub-panel */
-    foldoutPanelClass: null,
-
-    /** override to:
-     *      add attributes foldoutStyle and foldoutPanelClass for config poly
-     *      disrespect attributes.expanded if drilldown
-     */
-    initialize: function (attributes) {
-        if (this.foldoutStyle === "drilldown") {
-            this.expanded = false;
-        }
-        this.foldoutStyle = attributes.foldoutStyle || this.foldoutStyle;
-        this.foldoutPanelClass = attributes.foldoutPanelClass || this.foldoutPanelClass;
-
-        ListItemView.prototype.initialize.call(this, attributes);
-        this.foldout = this._createFoldoutPanel();
-    },
-
-    /** in this override, attach the foldout panel when rendering details */
-    _renderDetails: function () {
-        if (this.foldoutStyle === "drilldown") {
-            return $();
-        }
-        var $newDetails = ListItemView.prototype._renderDetails.call(this);
-        return this._attachFoldout(this.foldout, $newDetails);
-    },
-
-    /** In this override, handle collection expansion. */
-    _createFoldoutPanel: function () {
-        var model = this.model;
-        var FoldoutClass = this._getFoldoutPanelClass(model);
-        var options = this._getFoldoutPanelOptions(model);
-
-        return new FoldoutClass(
-            _.extend(options, {
-                model: model,
-            })
-        );
-    },
-
-    /** Stub to return proper foldout panel class */
-    _getFoldoutPanelClass: function () {
-        // override
-        return this.foldoutPanelClass;
-    },
-
-    /** Stub to return proper foldout panel options */
-    _getFoldoutPanelOptions: function () {
-        return {
-            // propagate foldout style down
-            foldoutStyle: this.foldoutStyle,
-            fxSpeed: this.fxSpeed,
-        };
-    },
-
-    /** Render the foldout panel inside the view, hiding controls */
-    _attachFoldout: function (foldout, $whereTo) {
-        $whereTo = $whereTo || this.$("> .details");
-        this.foldout = foldout.render(0);
-        foldout.$("> .controls").hide();
-        return $whereTo.append(foldout.$el);
-    },
-
-    /** In this override, branch on foldoutStyle to show expanded */
-    expand: function () {
-        var view = this;
-        return view._fetchModelDetails().always(() => {
-            if (view.foldoutStyle === "foldout") {
-                view._expand();
-            } else if (view.foldoutStyle === "drilldown") {
-                view._expandByDrilldown();
-            }
-        });
-    },
-
-    /** For drilldown, set up close handler and fire expanded:drilldown
-     *      containing views can listen to this and handle other things
-     *      (like hiding themselves) by listening for expanded/collapsed:drilldown
-     */
-    _expandByDrilldown: function () {
-        var view = this;
-        // attachment and rendering done by listener
-        view.listenTo(view.foldout, "close", () => {
-            view.trigger("collapsed:drilldown", view, view.foldout);
-        });
-        view.trigger("expanded:drilldown", view, view.foldout);
-    },
-});
-
-// ............................................................................ TEMPLATES
-/** underscore templates */
-FoldoutListItemView.prototype.templates = (() => {
-    var detailsTemplate = BASE_MVC.wrapTemplate(
-        [
-            '<div class="details">',
-            // override with more info (that goes above the panel)
-            "</div>",
-        ],
-        "collection"
-    );
-
-    return _.extend({}, ListItemView.prototype.templates, {
-        details: detailsTemplate,
-    });
-})();
-
-//==============================================================================
-export default {
-    ExpandableView: ExpandableView,
-    ListItemView: ListItemView,
-    FoldoutListItemView: FoldoutListItemView,
-};
diff --git a/client/src/mvc/list/list-view.js b/client/src/mvc/list/list-view.js
deleted file mode 100644
index 341973de241..00000000000
--- a/client/src/mvc/list/list-view.js
+++ /dev/null
@@ -1,1059 +0,0 @@
-import $ from "jquery";
-import Backbone from "backbone";
-import _ from "underscore";
-import LIST_ITEM from "mvc/list/list-item";
-import LoadingIndicator from "ui/loading-indicator";
-import BASE_MVC from "mvc/base-mvc";
-import _l from "utils/localization";
-import "ui/search-input";
-
-var logNamespace = "list";
-/* ============================================================================
-TODO:
-
-============================================================================ */
-/** @class View for a list/collection of models and the sub-views of those models.
- *      Sub-views must (at least have the interface if not) inherit from ListItemView.
- *      (For a list panel that also includes some 'container' model (History->HistoryContents)
- *      use ModelWithListPanel)
- *
- *  Allows for:
- *      searching collection/sub-views
- *      selecting/multi-selecting sub-views
- *
- *  Currently used:
- *      for dataset/dataset-choice
- *      as superclass of ModelListPanel
- */
-var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
-    /** @lends ListPanel.prototype */ {
-        _logNamespace: logNamespace,
-
-        /** class to use for constructing the sub-views */
-        viewClass: LIST_ITEM.ListItemView,
-        /** class to used for constructing collection of sub-view models */
-        collectionClass: Backbone.Collection,
-
-        tagName: "div",
-        className: "list-panel",
-        actionButtonClass: "list-action-menu-btn",
-
-        /** (in ms) that jquery effects will use */
-        fxSpeed: "fast",
-
-        /** string to display when the collection has no contents */
-        emptyMsg: _l("This list is empty"),
-        /** displayed when no items match the search terms */
-        noneFoundMsg: _l("No matching items found"),
-        /** string used for search placeholder */
-        searchPlaceholder: _l("search"),
-
-        // ......................................................................... SET UP
-        /** Set up the view, set up storage, bind listeners to HistoryContents events
-         *  @param {Object} attributes optional settings for the list
-         */
-        initialize: function (attributes, options) {
-            attributes = attributes || {};
-            // set the logger if requested
-            if (attributes.logger) {
-                this.logger = attributes.logger;
-            }
-            this.log(`${this}.initialize:`, attributes);
-
-            // ---- instance vars
-            /** how quickly should jquery fx run? */
-            this.fxSpeed = _.has(attributes, "fxSpeed") ? attributes.fxSpeed : this.fxSpeed;
-
-            /** filters for displaying subviews */
-            this.filters = [];
-            /** current search terms */
-            this.searchFor = attributes.searchFor || "";
-
-            /** loading indicator */
-            // this.indicator = new LoadingIndicator( this.$el );
-
-            /** currently showing selectors on items? */
-            this.selecting = attributes.selecting !== undefined ? attributes.selecting : true;
-            //this.selecting = false;
-
-            /** cached selected item.model.ids to persist btwn renders */
-            this.selected = attributes.selected || [];
-            /** the last selected item.model.id */
-            this.lastSelected = null;
-
-            /** are sub-views draggable */
-            this.dragItems = attributes.dragItems || false;
-
-            /** list item view class (when passed models) */
-            this.viewClass = attributes.viewClass || this.viewClass;
-
-            /** list item views */
-            this.views = [];
-            /** list item models */
-            this.collection = attributes.collection || this._createDefaultCollection();
-
-            /** filter fns run over collection items to see if they should show in the list */
-            this.filters = attributes.filters || [];
-
-            /** override $scrollContainer fn via attributes - fn should return jq for elem to call scrollTo on */
-            this.$scrollContainer = attributes.$scrollContainer || this.$scrollContainer;
-
-            /** @type {String} generic title */
-            this.title = attributes.title || "";
-            /** @type {String} generic subtitle */
-            this.subtitle = attributes.subtitle || "";
-
-            this._setUpListeners();
-        },
-
-        // ------------------------------------------------------------------------ listeners
-        /** create any event listeners for the list */
-        _setUpListeners: function () {
-            this.off();
-
-            //TODO: move errorHandler down into list-view from history-view or
-            //  pass to global error handler (Galaxy)
-            this.on({
-                error: function (model, xhr, options, msg, details) {
-                    //this.errorHandler( model, xhr, options, msg, details );
-                    console.error(model, xhr, options, msg, details);
-                },
-                // show hide the loading indicator
-                loading: function () {
-                    this._showLoadingIndicator("loading...", 40);
-                },
-                "loading-done": function () {
-                    this._hideLoadingIndicator(40);
-                },
-            });
-
-            // throw the first render up as a diff namespace using once (for outside consumption)
-            this.once("rendered", function () {
-                this.trigger("rendered:initial", this);
-            });
-
-            this._setUpCollectionListeners();
-            this._setUpViewListeners();
-            return this;
-        },
-
-        /** create and return a collection for when none is initially passed */
-        _createDefaultCollection: function () {
-            // override
-            return new this.collectionClass([]);
-        },
-
-        /** listening for collection events */
-        _setUpCollectionListeners: function () {
-            this.log(`${this}._setUpCollectionListeners`, this.collection);
-            this.stopListening(this.collection);
-
-            // bubble up error events
-            this.listenTo(this.collection, {
-                error: function (model, xhr, options, msg, details) {
-                    this.trigger("error", model, xhr, options, msg, details);
-                },
-                update: function (collection, options) {
-                    var changes = options.changes;
-                    // console.info( collection + ', update:', changes, '\noptions:', options );
-                    // more than one: render everything
-                    if (options.renderAll || changes.added.length + changes.removed.length > 1) {
-                        return this.renderItems();
-                    }
-                    // otherwise, let the single add/remove handlers do it
-                    if (changes.added.length === 1) {
-                        return this.addItemView(_.first(changes.added), collection, options);
-                    }
-                    if (changes.removed.length === 1) {
-                        return this.removeItemView(_.first(changes.removed), collection, options);
-                    }
-                },
-            });
-            return this;
-        },
-
-        /** listening for sub-view events that bubble up with the 'view:' prefix */
-        _setUpViewListeners: function () {
-            this.log(`${this}._setUpViewListeners`);
-
-            // shift to select a range
-            this.on({
-                "view:selected": function (view, ev) {
-                    if (ev && ev.shiftKey && this.lastSelected) {
-                        var lastSelectedView = this.viewFromModelId(this.lastSelected);
-                        if (lastSelectedView) {
-                            this.selectRange(view, lastSelectedView);
-                        }
-                    } else if (ev && ev.altKey && !this.selecting) {
-                        this.showSelectors();
-                    }
-                    this.selected.push(view.model.id);
-                    this.lastSelected = view.model.id;
-                },
-
-                "view:de-selected": function (view, ev) {
-                    this.selected = _.without(this.selected, view.model.id);
-                },
-            });
-        },
-
-        // ------------------------------------------------------------------------ rendering
-        /** Render this content, set up ui.
-         *  @param {Number or String} speed   the speed of the render
-         */
-        render: function (speed) {
-            this.log(`${this}.render`, speed);
-            var $newRender = this._buildNewRender();
-            this._setUpBehaviors($newRender);
-            this._queueNewRender($newRender, speed);
-            return this;
-        },
-
-        /** Build a temp div containing the new children for the view's $el. */
-        _buildNewRender: function () {
-            this.debug(`${this}(ListPanel)._buildNewRender`);
-            var $newRender = $(this.templates.el({}, this));
-            this._renderControls($newRender);
-            this._renderTitle($newRender);
-            this._renderSubtitle($newRender);
-            this._renderSearch($newRender);
-            this.renderItems($newRender);
-            return $newRender;
-        },
-
-        /** Build a temp div containing the new children for the view's $el. */
-        _renderControls: function ($newRender) {
-            this.debug(`${this}(ListPanel)._renderControls`);
-            var $controls = $(this.templates.controls({}, this));
-            $newRender.find(".controls").replaceWith($controls);
-            return $controls;
-        },
-
-        /** return a jQuery object containing the title DOM */
-        _renderTitle: function ($where) {
-            //$where = $where || this.$el;
-            //$where.find( '.title' ).replaceWith( ... )
-        },
-
-        /** return a jQuery object containing the subtitle DOM (if any) */
-        _renderSubtitle: function ($where) {
-            //$where = $where || this.$el;
-            //$where.find( '.title' ).replaceWith( ... )
-        },
-
-        /** Fade out the old el, swap in the new contents, then fade in.
-         *  @param {Number or String} speed   jq speed to use for rendering effects
-         *  @fires rendered when rendered
-         */
-        _queueNewRender: function ($newRender, speed) {
-            speed = speed === undefined ? this.fxSpeed : speed;
-            var panel = this;
-            panel.log("_queueNewRender:", $newRender, speed);
-
-            $(panel).queue("fx", [
-                (next) => {
-                    panel.$el.fadeOut(speed, next);
-                },
-                (next) => {
-                    panel._swapNewRender($newRender);
-                    next();
-                },
-                (next) => {
-                    panel.$el.fadeIn(speed, next);
-                },
-                (next) => {
-                    panel.trigger("rendered", panel);
-                    next();
-                },
-            ]);
-        },
-
-        /** empty out the current el, move the $newRender's children in */
-        _swapNewRender: function ($newRender) {
-            this.$el.empty().attr("class", this.className).append($newRender.children());
-            if (this.selecting) {
-                this.showSelectors(0);
-            }
-            return this;
-        },
-
-        /** Set up any behaviors, handlers (ep. plugins) that need to be called when the entire view has been built but
-         *  not attached to the page yet.
-         */
-        _setUpBehaviors: function ($where) {
-            $where = $where || this.$el;
-            this.$controls($where).find("[title]").tooltip();
-            // set up the pupup for actions available when multi selecting
-            this._renderMultiselectActionMenu($where);
-            return this;
-        },
-
-        /** render a menu containing the actions available to sets of selected items */
-        _renderMultiselectActionMenu: function ($where) {
-            $where = $where || this.$el;
-            var $menu = $where.find(".list-action-menu");
-            var actions = this.multiselectActions();
-            if (!actions.length) {
-                return $menu.empty();
-            }
-            var $newMenu = $(
-                `<div class="list-action-menu btn-group dropdown">
-                    <button class="${
-                        this.actionButtonClass
-                    } btn btn-secondary dropdown-toggle" data-boundary="viewport" data-toggle="dropdown">
-                        ${_l("For all selected")}...
-                    </button>
-                    <div class="dropdown-menu" role="menu"/>
-                </div>`
-            );
-            var $actions = actions.map((action) => {
-                var html = `<a class="dropdown-item" href="javascript:void(0);">${action.html}</a>`;
-                return $(html).click((ev) => {
-                    ev.preventDefault();
-                    return action.func(ev);
-                });
-            });
-            $newMenu.find(".dropdown-menu").append($actions);
-            $menu.replaceWith($newMenu);
-            return $newMenu;
-        },
-
-        /** return a list of plain objects used to render multiselect actions menu. Each object should have:
-         *      html: an html string used as the anchor contents
-         *      func: a function called when the anchor is clicked (passed the click event)
-         */
-        multiselectActions: function () {
-            return [];
-        },
-
-        // ------------------------------------------------------------------------ sub-$element shortcuts
-        /** the scroll container for this panel - can be $el, $el.parent(), or grandparent depending on context */
-        $scrollContainer: function ($where) {
-            // override or set via attributes.$scrollContainer
-            return ($where || this.$el).parent().parent();
-        },
-        /** convenience selector for the section that displays the list controls */
-        $controls: function ($where) {
-            return ($where || this.$el).find("> .controls");
-        },
-        /** list-items: where the subviews are contained in the view's dom */
-        $list: function ($where) {
-            return ($where || this.$el).find("> .list-items");
-        },
-        /** container where list messages are attached */
-        $messages: function ($where) {
-            //TODO: controls isn't really correct here (only for ModelListPanel)
-            return ($where || this.$el).find("> .controls .messages");
-        },
-        /** the message displayed when no views can be shown (no views, none matching search) */
-        $emptyMessage: function ($where) {
-            return ($where || this.$el).find("> .empty-message");
-        },
-
-        // ------------------------------------------------------------------------ hda sub-views
-        /** render the subviews for the list's collection */
-        renderItems: function ($whereTo) {
-            $whereTo = $whereTo || this.$el;
-            var panel = this;
-            panel.log(`${this}.renderItems`, $whereTo);
-
-            var $list = panel.$list($whereTo);
-            panel.freeViews();
-            // console.log( 'views freed' );
-            //TODO:? cache and re-use views?
-            var shownModels = panel._filterCollection();
-            // console.log( 'models filtered:', shownModels );
-
-            panel.views = shownModels.map((itemModel) => {
-                return panel._createItemView(itemModel);
-            });
-
-            $list.empty();
-            // console.log( 'list emptied' );
-            if (panel.views.length) {
-                panel._attachItems($whereTo);
-                // console.log( 'items attached' );
-            }
-            panel._renderEmptyMessage($whereTo).toggle(!panel.views.length);
-            panel.trigger("views:ready", panel.views);
-
-            // console.log( '------------------------------------------- rendering items' );
-            return panel.views;
-        },
-
-        /** Filter the collection to only those models that should be currently viewed */
-        _filterCollection: function () {
-            // override this
-            var panel = this;
-            return panel.collection.filter(_.bind(panel._filterItem, panel));
-        },
-
-        /** Should the model be viewable in the current state?
-         *     Checks against this.filters and this.searchFor
-         */
-        _filterItem: function (model) {
-            // override this
-            var panel = this;
-            return (
-                _.every(panel.filters.map((fn) => fn.call(model))) &&
-                (!panel.searchFor || model.matchesAll(panel.searchFor))
-            );
-        },
-
-        /** Create a view for a model and set up it's listeners */
-        _createItemView: function (model) {
-            var ViewClass = this._getItemViewClass(model);
-            var options = _.extend(this._getItemViewOptions(model), {
-                model: model,
-            });
-            var view = new ViewClass(options);
-            this._setUpItemViewListeners(view);
-            return view;
-        },
-
-        /** Free a view for a model. Note: does not remove it from the DOM */
-        _destroyItemView: function (view) {
-            this.stopListening(view);
-            this.views = _.without(this.views, view);
-        },
-
-        _destroyItemViews: function (view) {
-            var self = this;
-            self.views.forEach((v) => {
-                self.stopListening(v);
-            });
-            self.views = [];
-            return self;
-        },
-
-        /** free any sub-views the list has */
-        freeViews: function () {
-            return this._destroyItemViews();
-        },
-
-        /** Get the bbone view class based on the model */
-        _getItemViewClass: function (model) {
-            // override this
-            return this.viewClass;
-        },
-
-        /** Get the options passed to the new view based on the model */
-        _getItemViewOptions: function (model) {
-            // override this
-            return {
-                //logger      : this.logger,
-                fxSpeed: this.fxSpeed,
-                expanded: false,
-                selectable: this.selecting,
-                selected: _.contains(this.selected, model.id),
-                draggable: this.dragItems,
-            };
-        },
-
-        /** Set up listeners for new models */
-        _setUpItemViewListeners: function (view) {
-            var panel = this;
-            // send all events to the panel, re-namspaceing them with the view prefix
-            this.listenTo(view, "all", function () {
-                var args = Array.prototype.slice.call(arguments, 0);
-                args[0] = `view:${args[0]}`;
-                panel.trigger.apply(panel, args);
-            });
-
-            // drag multiple - hijack ev.setData to add all selected items
-            this.listenTo(
-                view,
-                "draggable:dragstart",
-                function (ev, v) {
-                    //TODO: set multiple drag data here
-                    var json = {};
-
-                    var selected = this.getSelectedModels();
-                    if (selected.length) {
-                        json = selected.toJSON();
-                    } else {
-                        json = [v.model.toJSON()];
-                    }
-                    ev.dataTransfer.setData("text", JSON.stringify(json));
-                    //ev.dataTransfer.setDragImage( v.el, 60, 60 );
-                },
-                this
-            );
-
-            return panel;
-        },
-
-        /** Attach views in this.views to the model based on $whereTo */
-        _attachItems: function ($whereTo) {
-            var self = this;
-            // console.log( '_attachItems:', $whereTo, this.$list( $whereTo ) );
-            //ASSUMES: $list has been emptied
-            this.$list($whereTo).append(this.views.map((view) => self._renderItemView$el(view)));
-            return this;
-        },
-
-        /** get a given subview's $el (or whatever may wrap it) and return it */
-        _renderItemView$el: function (view) {
-            // useful to wrap and override
-            return view.render(0).$el;
-        },
-
-        /** render the empty/none-found message */
-        _renderEmptyMessage: function ($whereTo) {
-            this.debug("_renderEmptyMessage", $whereTo, this.searchFor);
-            var text = this.searchFor ? this.noneFoundMsg : this.emptyMsg;
-            return this.$emptyMessage($whereTo).text(text);
-        },
-
-        /** expand all item views */
-        expandAll: function () {
-            _.each(this.views, (view) => {
-                view.expand();
-            });
-        },
-
-        /** collapse all item views */
-        collapseAll: function () {
-            _.each(this.views, (view) => {
-                view.collapse();
-            });
-        },
-
-        // ------------------------------------------------------------------------ collection/views syncing
-        /** Add a view (if the model should be viewable) to the panel */
-        addItemView: function (model, collection, options) {
-            // console.log( this + '.addItemView:', model );
-            var panel = this;
-            // get the index of the model in the list of filtered models shown by this list
-            // in order to insert the view in the proper place
-            //TODO:? potentially expensive
-            var modelIndex = panel._filterCollection().indexOf(model);
-            if (modelIndex === -1) {
-                return undefined;
-            }
-            var view = panel._createItemView(model);
-            // console.log( 'adding and rendering:', modelIndex, view.toString() );
-
-            $(view).queue("fx", [
-                (next) => {
-                    // hide the empty message first if only view
-                    if (panel.$emptyMessage().is(":visible")) {
-                        panel.$emptyMessage().fadeOut(panel.fxSpeed, next);
-                    } else {
-                        next();
-                    }
-                },
-                (next) => {
-                    panel._attachView(view, modelIndex);
-                    next();
-                },
-            ]);
-            return view;
-        },
-
-        /** internal fn to add view (to both panel.views and panel.$list) */
-        _attachView: function (view, modelIndex, useFx) {
-            // console.log( this + '._attachView:', view, modelIndex, useFx );
-            useFx = _.isUndefined(useFx) ? true : useFx;
-            modelIndex = modelIndex || 0;
-            var panel = this;
-
-            // use the modelIndex to splice into views and insert at the proper index in the DOM
-            panel.views.splice(modelIndex, 0, view);
-            panel._insertIntoListAt(modelIndex, panel._renderItemView$el(view).hide());
-
-            panel.trigger("view:attached", view);
-            if (useFx) {
-                view.$el.slideDown(panel.fxSpeed, () => {
-                    panel.trigger("view:attached:rendered");
-                });
-            } else {
-                view.$el.show();
-                panel.trigger("view:attached:rendered");
-            }
-            return view;
-        },
-
-        /** insert a jq object as a child of list-items at the specified *DOM index* */
-        _insertIntoListAt: function (index, $what) {
-            // console.log( this + '._insertIntoListAt:', index, $what );
-            var $list = this.$list();
-            if (index === 0) {
-                $list.prepend($what);
-            } else {
-                $list
-                    .children()
-                    .eq(index - 1)
-                    .after($what);
-            }
-            return $what;
-        },
-
-        /** Remove a view from the panel (if found) */
-        removeItemView: function (model, collection, options) {
-            var panel = this;
-            var view = _.find(panel.views, (v) => v.model === model);
-            if (!view) {
-                return undefined;
-            }
-            panel.views = _.without(panel.views, view);
-            panel.trigger("view:removed", view);
-
-            // potentially show the empty message if no views left
-            // use anonymous queue here - since remove can happen multiple times
-            $({}).queue("fx", [
-                (next) => {
-                    view.$el.fadeOut(panel.fxSpeed, next);
-                },
-                (next) => {
-                    view.remove();
-                    panel.trigger("view:removed:rendered");
-                    if (!panel.views.length) {
-                        panel._renderEmptyMessage().fadeIn(panel.fxSpeed, next);
-                    } else {
-                        next();
-                    }
-                },
-            ]);
-            return view;
-        },
-
-        /** get views based on model.id */
-        viewFromModelId: function (id) {
-            return _.find(this.views, (v) => v.model.id === id);
-        },
-
-        /** get views based on model */
-        viewFromModel: function (model) {
-            return model ? this.viewFromModelId(model.id) : undefined;
-        },
-
-        /** get views based on model properties */
-        viewsWhereModel: function (properties) {
-            return this.views.filter((view) => _.isMatch(view.model.attributes, properties));
-        },
-
-        /** A range of views between (and including) viewA and viewB */
-        viewRange: function (viewA, viewB) {
-            if (viewA === viewB) {
-                return viewA ? [viewA] : [];
-            }
-
-            var indexA = this.views.indexOf(viewA);
-            var indexB = this.views.indexOf(viewB);
-
-            // handle not found
-            if (indexA === -1 || indexB === -1) {
-                if (indexA === indexB) {
-                    return [];
-                }
-                return indexA === -1 ? [viewB] : [viewA];
-            }
-            // reverse if indeces are
-            //note: end inclusive
-            return indexA < indexB ? this.views.slice(indexA, indexB + 1) : this.views.slice(indexB, indexA + 1);
-        },
-
-        // ------------------------------------------------------------------------ searching
-        /** render a search input for filtering datasets shown
-         *      (see SearchableMixin in base-mvc for implementation of the actual searching)
-         *      return will start the search
-         *      esc will clear the search
-         *      clicking the clear button will clear the search
-         *      uses searchInput in ui.js
-         */
-        _renderSearch: function ($where) {
-            $where.find(".controls .search-input").searchInput({
-                placeholder: this.searchPlaceholder,
-                initialVal: this.searchFor,
-                onfirstsearch: _.bind(this._firstSearch, this),
-                onsearch: _.bind(this.searchItems, this),
-                onclear: _.bind(this.clearSearch, this),
-                advsearchlink: true,
-            });
-            return $where;
-        },
-
-        /** What to do on the first search entered */
-        _firstSearch: function (searchFor) {
-            // override to load model details if necc.
-            this.log("onFirstSearch", searchFor);
-            return this.searchItems(searchFor);
-        },
-
-        /** filter view list to those that contain the searchFor terms */
-        searchItems: function (searchFor, force) {
-            this.log("searchItems", searchFor, this.searchFor, force);
-            if (!force && this.searchFor === searchFor) {
-                return this;
-            }
-            this.searchFor = searchFor;
-            this.renderItems();
-            this.trigger("search:searching", searchFor, this);
-            var $search = this.$("> .controls .search-query");
-            if ($search.val() !== searchFor) {
-                $search.val(searchFor);
-            }
-            return this;
-        },
-
-        /** clear the search filters and show all views that are normally shown */
-        clearSearch: function (searchFor) {
-            //this.log( 'onSearchClear', this );
-            this.searchFor = "";
-            this.trigger("search:clear", this);
-            this.$("> .controls .search-query").val("");
-            this.renderItems();
-            return this;
-        },
-
-        // ------------------------------------------------------------------------ selection
-        /** @type Integer when the number of list item views is >= to this, don't animate selectors */
-        THROTTLE_SELECTOR_FX_AT: 20,
-
-        /** show selectors on all visible itemViews and associated controls */
-        showSelectors: function (speed) {
-            speed = speed !== undefined ? speed : this.fxSpeed;
-            this.selecting = true;
-            this.$(".list-actions").slideDown(speed);
-            speed = this.views.length >= this.THROTTLE_SELECTOR_FX_AT ? 0 : speed;
-            _.each(this.views, (view) => {
-                view.showSelector(speed);
-            });
-            //this.selected = [];
-            //this.lastSelected = null;
-        },
-
-        /** hide selectors on all visible itemViews and associated controls */
-        hideSelectors: function (speed) {
-            speed = speed !== undefined ? speed : this.fxSpeed;
-            this.selecting = false;
-            this.$(".list-actions").slideUp(speed);
-            speed = this.views.length >= this.THROTTLE_SELECTOR_FX_AT ? 0 : speed;
-            _.each(this.views, (view) => {
-                view.hideSelector(speed);
-            });
-            this.selected = [];
-            this.lastSelected = null;
-        },
-
-        /** show or hide selectors on all visible itemViews and associated controls */
-        toggleSelectors: function () {
-            if (!this.selecting) {
-                this.showSelectors();
-            } else {
-                this.hideSelectors();
-            }
-        },
-
-        /** select all visible items */
-        selectAll: function (event) {
-            _.each(this.views, (view) => {
-                view.select(event);
-            });
-        },
-
-        /** deselect all visible items */
-        deselectAll: function (event) {
-            this.lastSelected = null;
-            _.each(this.views, (view) => {
-                view.deselect(event);
-            });
-        },
-
-        /** select a range of datasets between A and B */
-        selectRange: function (viewA, viewB) {
-            var range = this.viewRange(viewA, viewB);
-            _.each(range, (view) => {
-                view.select();
-            });
-            return range;
-        },
-
-        /** return an array of all currently selected itemViews */
-        getSelectedViews: function () {
-            return _.filter(this.views, (v) => v.selected);
-        },
-
-        /** return a collection of the models of all currenly selected items */
-        getSelectedModels: function () {
-            // console.log( '(getSelectedModels)' );
-            return new this.collection.constructor(_.map(this.getSelectedViews(), (view) => view.model));
-        },
-
-        // ------------------------------------------------------------------------ loading indicator
-        /** hide the $el and display a loading indicator (in the $el's parent) when loading new data */
-        _showLoadingIndicator: function (msg, speed, callback) {
-            this.debug("_showLoadingIndicator", this.indicator, msg, speed, callback);
-            speed = speed !== undefined ? speed : this.fxSpeed;
-            if (!this.indicator) {
-                this.indicator = new LoadingIndicator.LoadingIndicator(this.$el);
-                this.debug("\t created", this.indicator);
-            }
-            if (!this.$el.is(":visible")) {
-                this.indicator.show(0, callback);
-            } else {
-                this.$el.fadeOut(speed);
-                this.indicator.show(msg, speed, callback);
-            }
-        },
-
-        /** hide the loading indicator */
-        _hideLoadingIndicator: function (speed, callback) {
-            this.debug("_hideLoadingIndicator", this.indicator, speed, callback);
-            speed = speed !== undefined ? speed : this.fxSpeed;
-            if (this.indicator) {
-                this.indicator.hide(speed, callback);
-            }
-        },
-
-        // ------------------------------------------------------------------------ scrolling
-        /** get the current scroll position of the panel in its parent */
-        scrollPosition: function () {
-            return this.$scrollContainer().scrollTop();
-        },
-
-        /** set the current scroll position of the panel in its parent */
-        scrollTo: function (pos, speed) {
-            speed = speed || 0;
-            this.$scrollContainer().animate({ scrollTop: pos }, speed);
-            return this;
-        },
-
-        /** Scrolls the panel to the top. */
-        scrollToTop: function (speed) {
-            return this.scrollTo(0, speed);
-        },
-
-        /** scroll to the given view in list-items */
-        scrollToItem: function (view, speed) {
-            if (!view) {
-                return this;
-            }
-            return this;
-        },
-
-        /** Scrolls the panel to show the content with the given id. */
-        scrollToId: function (id, speed) {
-            return this.scrollToItem(this.viewFromModelId(id), speed);
-        },
-
-        // ------------------------------------------------------------------------ panel events
-        /** event map */
-        events: {
-            "click .select-all": "selectAll",
-            "click .deselect-all": "deselectAll",
-        },
-
-        // ------------------------------------------------------------------------ misc
-        /** Return a string rep of the panel */
-        toString: function () {
-            return `ListPanel(${this.collection})`;
-        },
-    }
-);
-
-// ............................................................................ TEMPLATES
-/** underscore templates */
-ListPanel.prototype.templates = (() => {
-    var elTemplate = BASE_MVC.wrapTemplate([
-        // temp container
-        "<div>",
-        '<div class="controls"></div>',
-        '<div class="list-items"></div>',
-        '<div class="empty-message alert alert-info"></div>',
-        "</div>",
-    ]);
-
-    var controlsTemplate = BASE_MVC.wrapTemplate([
-        '<div class="controls">',
-        '<div class="title">',
-        '<div class="name"><%- view.title %></div>',
-        "</div>",
-        '<div class="subtitle"><%- view.subtitle %></div>',
-        // buttons, controls go here
-        '<div class="actions"></div>',
-        // deleted msg, etc.
-        '<div class="messages"></div>',
-
-        '<div class="search">',
-        '<div class="search-input"></div>',
-        "</div>",
-
-        // show when selectors are shown
-        '<div class="list-actions">',
-        '<div class="btn-group">',
-        '<button class="select-all btn btn-secondary"',
-        'data-mode="select">',
-        _l("All"),
-        "</button>",
-        '<button class="deselect-all btn btn-secondary"',
-        'data-mode="select">',
-        _l("None"),
-        "</button>",
-        "</div>",
-        '<div class="list-action-menu btn-group">',
-        "</div>",
-        "</div>",
-        "</div>",
-    ]);
-
-    return {
-        el: elTemplate,
-        controls: controlsTemplate,
-    };
-})();
-
-//=============================================================================
-/** View for a model that has a sub-collection (e.g. History, DatasetCollection)
- *  Allows:
- *      the model to be reset
- *      auto assign panel.collection to panel.model[ panel.modelCollectionKey ]
- *
- */
-var ModelListPanel = ListPanel.extend({
-    /** key of attribute in model to assign to this.collection */
-    modelCollectionKey: "contents",
-
-    initialize: function (attributes) {
-        ListPanel.prototype.initialize.call(this, attributes);
-        this.selecting = attributes.selecting !== undefined ? attributes.selecting : false;
-
-        this.setModel(this.model, attributes);
-    },
-
-    /** release/free/shutdown old models and set up panel for new models
-     *  @fires new-model with the panel as parameter
-     */
-    setModel: function (model, attributes) {
-        attributes = attributes || {};
-        this.debug(`${this}.setModel:`, model, attributes);
-
-        this.freeModel();
-        this.freeViews();
-
-        if (model) {
-            var oldModelId = this.model ? this.model.get("id") : null;
-
-            // set up the new model with user, logger, storage, events
-            this.model = model;
-            if (this.logger) {
-                this.model.logger = this.logger;
-            }
-            this._setUpModelListeners();
-
-            //TODO: relation btwn model, collection becoming tangled here
-            // free the collection, and assign the new collection to either
-            //  the model[ modelCollectionKey ], attributes.collection, or an empty vanilla collection
-            this.stopListening(this.collection);
-            this.collection =
-                this.model[this.modelCollectionKey] || attributes.collection || this._createDefaultCollection();
-            this._setUpCollectionListeners();
-
-            if (oldModelId && model.get("id") !== oldModelId) {
-                this.trigger("new-model", this);
-            }
-        }
-        return this;
-    },
-
-    /** free the current model and all listeners for it, free any views for the model */
-    freeModel: function () {
-        // stop/release the previous model, and clear cache to sub-views
-        if (this.model) {
-            this.stopListening(this.model);
-            //TODO: see base-mvc
-            //this.model.free();
-            //this.model = null;
-        }
-        return this;
-    },
-
-    // ------------------------------------------------------------------------ listening
-    /** listening for model events */
-    _setUpModelListeners: function () {
-        // override
-        this.log(`${this}._setUpModelListeners`, this.model);
-        // bounce model errors up to the panel
-        this.listenTo(
-            this.model,
-            "error",
-            function () {
-                var args = Array.prototype.slice.call(arguments, 0);
-                //args.unshift( 'model:error' );
-                args.unshift("error");
-                this.trigger.apply(this, args);
-            },
-            this
-        );
-
-        // debugging
-        if (this.logger) {
-            this.listenTo(this.model, "all", function (event) {
-                this.info(`${this}(model)`, event, arguments);
-            });
-        }
-        return this;
-    },
-
-    /** Build a temp div containing the new children for the view's $el.
-     */
-    _renderControls: function ($newRender) {
-        this.debug(`${this}(ModelListPanel)._renderControls`);
-        var json = this.model ? this.model.toJSON() : {};
-        var $controls = $(this.templates.controls(json, this));
-        $newRender.find(".controls").replaceWith($controls);
-        return $controls;
-    },
-
-    // ------------------------------------------------------------------------ misc
-    /** Return a string rep of the panel */
-    toString: function () {
-        return `ModelListPanel(${this.model})`;
-    },
-});
-
-// ............................................................................ TEMPLATES
-/** underscore templates */
-ModelListPanel.prototype.templates = (() => {
-    var controlsTemplate = BASE_MVC.wrapTemplate([
-        '<div class="controls">',
-        '<div class="title">',
-        //TODO: this is really the only difference - consider factoring titlebar out
-        '<div class="name"><%- model.name %></div>',
-        "</div>",
-        '<div class="subtitle"><%- view.subtitle %></div>',
-        '<div class="actions"></div>',
-        '<div class="messages"></div>',
-
-        '<div class="search">',
-        '<div class="search-input"></div>',
-        "</div>",
-
-        '<div class="list-actions">',
-        '<div class="btn-group">',
-        '<button class="select-all btn btn-secondary"',
-        'data-mode="select">',
-        _l("All"),
-        "</button>",
-        '<button class="deselect-all btn btn-secondary"',
-        'data-mode="select">',
-        _l("None"),
-        "</button>",
-        "</div>",
-        '<div class="list-action-menu btn-group">',
-        "</div>",
-        "</div>",
-        "</div>",
-    ]);
-
-    return _.extend(_.clone(ListPanel.prototype.templates), {
-        controls: controlsTemplate,
-    });
-})();
-
-//=============================================================================
-export default {
-    ListPanel: ListPanel,
-    ModelListPanel: ModelListPanel,
-};
diff --git a/client/src/mvc/ui/error-modal.js b/client/src/mvc/ui/error-modal.js
deleted file mode 100644
index e28ad4823c8..00000000000
--- a/client/src/mvc/ui/error-modal.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import _ from "underscore";
-import $ from "jquery";
-import _l from "utils/localization";
-import { getGalaxyInstance } from "app";
-
-//TODO: toastr is another possibility - I didn't see where I might add details, tho
-
-/* ============================================================================
-Error modals meant to replace the o-so-easy alerts.
-
-These are currently styled as errormessages but use the Galaxy.modal
-infrastructure to be shown/closed. They're capable of showing details in a
-togglable dropdown and the details are formatted in a pre.
-
-Example:
-    errorModal( 'Heres a message', 'A Title', { some_details: 'here' });
-    errorModal( 'Heres a message' ); // no details, title is 'Error'
-
-There are three specialized forms:
-    offlineErrorModal       a canned response for when there's no connection
-    badGatewayErrorModal    canned response for when Galaxy is restarting
-    ajaxErrorModal          plugable into any Backbone class as an
-        error event handler by accepting the error args: model, xhr, options
-
-Examples:
-    if( navigator.offLine ){ offlineErrorModal(); }
-    if( xhr.status === 502 ){ badGatewayErrorModal(); }
-    this.listenTo( this.model, 'error', ajaxErrorModal );
-
-============================================================================ */
-
-var CONTACT_MSG = _l("Please contact a Galaxy administrator if the problem persists.");
-var DEFAULT_AJAX_ERR_MSG = _l("An error occurred while updating information with the server.");
-var DETAILS_MSG = _l("The following information can assist the developers in finding the source of the error:");
-
-/** private helper that builds the modal and handles adding details */
-function _errorModal(message, title, details) {
-    const Galaxy = getGalaxyInstance();
-    // create and return the modal, adding details button only if needed
-    Galaxy.modal.show({
-        title: title,
-        body: message,
-        closing_events: true,
-        buttons: {
-            Ok: function () {
-                Galaxy.modal.hide();
-            },
-        },
-    });
-    Galaxy.modal.$el.addClass("error-modal");
-
-    if (details) {
-        Galaxy.modal.$(".error-details").add(Galaxy.modal.$('button:contains("Details")')).remove();
-        $("<div/>")
-            .addClass("error-details")
-            .hide()
-            .appendTo(Galaxy.modal.$(".modal-content"))
-            .append([$("<p/>").text(DETAILS_MSG), $("<pre/>").text(JSON.stringify(details, null, "  "))]);
-
-        $(`<button id="button-1" class="float-left">${_l("Details")}</button>`)
-            .appendTo(Galaxy.modal.$(".buttons"))
-            .click(() => {
-                Galaxy.modal.$(".error-details").toggle();
-            });
-    }
-    return Galaxy.modal;
-}
-
-/** Display a modal showing an error message but fallback to alert if there's no modal */
-function errorModal(message, title, details) {
-    if (!message) {
-        return;
-    }
-
-    const Galaxy = getGalaxyInstance();
-    message = _l(message);
-    title = _l(title) || _l("Error:");
-    if (Galaxy && Galaxy.modal) {
-        return _errorModal(message, title, details);
-    }
-
-    alert(`${title}\n\n${message}`);
-    console.log("error details:", JSON.stringify(details));
-}
-
-// ----------------------------------------------------------------------------
-/** display a modal when the user may be offline */
-function offlineErrorModal() {
-    return errorModal(_l("You appear to be offline. Please check your connection and try again."), _l("Offline?"));
-}
-
-// ----------------------------------------------------------------------------
-/** 502 messages that should be displayed when galaxy is restarting */
-function badGatewayErrorModal() {
-    return errorModal(
-        `${_l("Galaxy is currently unreachable. Please try again in a few minutes.")} ${CONTACT_MSG}`,
-        _l("Cannot connect to Galaxy")
-    );
-}
-
-// ----------------------------------------------------------------------------
-/** display a modal (with details) about a failed Backbone ajax operation */
-function ajaxErrorModal(model, xhr, options, message, title) {
-    message = message || DEFAULT_AJAX_ERR_MSG;
-    message += ` ${CONTACT_MSG}`;
-    title = title || _l("An error occurred");
-    var details = _ajaxDetails(model, xhr, options);
-    return errorModal(message, title, details);
-}
-
-/** build details which may help debugging the ajax call */
-function _ajaxDetails(model, xhr, options) {
-    const Galaxy = getGalaxyInstance();
-    return {
-        sentry: Galaxy?.Sentry.lastEventId(),
-        userAgent: navigator.userAgent,
-        onLine: navigator.onLine,
-        version: _.result(Galaxy.config, "version_major"),
-        xhr: _.omit(xhr, _.functions(xhr)),
-        options: _.omit(options, "xhr"),
-        // add ajax data from Galaxy object cache
-        url: _.result(Galaxy.lastAjax, "url"),
-        data: _.result(Galaxy.lastAjax, "data"),
-        // backbone stuff (auto-redacting email for user)
-        model: _.result(model, "toJSON", `${model}`),
-        user: _.omit(_.result(Galaxy.user, "toJSON"), "email"),
-    };
-}
-
-//=============================================================================
-export default {
-    errorModal: errorModal,
-    offlineErrorModal: offlineErrorModal,
-    badGatewayErrorModal: badGatewayErrorModal,
-    ajaxErrorModal: ajaxErrorModal,
-};
diff --git a/client/src/mvc/ui/ui-misc.js b/client/src/mvc/ui/ui-misc.js
index f6a755145ab..e4e0f460964 100644
--- a/client/src/mvc/ui/ui-misc.js
+++ b/client/src/mvc/ui/ui-misc.js
@@ -287,7 +287,6 @@ export default {
     RadioButton: Options.RadioButton,
     Checkbox: Options.Checkbox,
     Radio: Options.Radio,
-    Switch: Switch,
     Select: Select,
     NullableText: NullableText,
     TextSelect: TextSelect,
diff --git a/client/src/mvc/user/tab-updates.js b/client/src/mvc/user/tab-updates.js
deleted file mode 100644
index d1e269f334d..00000000000
--- a/client/src/mvc/user/tab-updates.js
+++ /dev/null
@@ -1,51 +0,0 @@
-//Allow change tab on event=====================================================
-function change_favicon(img) {
-    var favicon = document.createElement("link");
-    favicon.id = "tabicon";
-    favicon.setAttribute("rel", "shortcut icon");
-    var head = document.querySelector("head");
-    head.appendChild(favicon);
-    favicon.setAttribute("type", "image/png");
-    favicon.setAttribute("href", img);
-}
-
-//Check if browser is hidden-aware==============================================
-function hidden_permit() {
-    var browsers = ["webkit", "moz", "ms", "o"];
-    if ("hidden" in document) {
-        return "hidden";
-    }
-    for (var i = 0; i < browsers.length; i++) {
-        if (browsers[i] + "Hidden" in document) {
-            return browsers[i] + "Hidden";
-        }
-    }
-    return null;
-}
-
-//Find out if browser tab is hidden=============================================
-function is_hidden() {
-    var state = hidden_permit();
-    if (!state) {
-        return false;
-    }
-    return document[state];
-}
-
-//Generate new tab message to display on update in window=======================
-function hidden_count(current) {
-    if (is_hidden()) {
-        if (current === 1) {
-            document.title = "Galaxy (1 job completed)";
-        } else {
-            document.title = "Galaxy (" + current + " jobs completed)";
-        }
-    }
-}
-
-export default {
-    change_favicon: change_favicon,
-    hidden_permit: hidden_permit,
-    is_hidden: is_hidden,
-    hidden_count: hidden_count,
-};
diff --git a/client/src/mvc/user/user-custom-builds.js b/client/src/mvc/user/user-custom-builds.js
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/client/src/mvc/ui/ui-portlet.js b/client/src/mvc/visualization/chart/views/portlet.js
similarity index 100%
rename from client/src/mvc/ui/ui-portlet.js
rename to client/src/mvc/visualization/chart/views/portlet.js
diff --git a/client/src/mvc/visualization/chart/views/repeat.js b/client/src/mvc/visualization/chart/views/repeat.js
index dbf3077cfac..49965337d01 100644
--- a/client/src/mvc/visualization/chart/views/repeat.js
+++ b/client/src/mvc/visualization/chart/views/repeat.js
@@ -5,7 +5,7 @@ import $ from "jquery";
 import Backbone from "backbone";
 import { getGalaxyInstance } from "app";
 import Utils from "utils/utils";
-import Portlet from "mvc/ui/ui-portlet";
+import Portlet from "./portlet";
 import Ui from "mvc/ui/ui-misc";
 
 export var View = Backbone.View.extend({
diff --git a/client/src/onload/globalInits/onloadWebhooks.js b/client/src/onload/globalInits/onloadWebhooks.js
index ed19ad84351..ce74aa64a48 100644
--- a/client/src/onload/globalInits/onloadWebhooks.js
+++ b/client/src/onload/globalInits/onloadWebhooks.js
@@ -1,4 +1,4 @@
-import Webhooks from "mvc/webhooks";
+import Webhooks from "utils/webhooks";
 import Utils from "utils/utils";
 
 export function onloadWebhooks(Galaxy) {
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index cc43b8deef4..420f245db47 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -6,6 +6,7 @@
 
 // Bootstrap-related style overrides
 @import "overrides.scss";
+@import "mixins.scss";
 
 // Fontawesome configuration.
 //$fa-font-path: "../../../node_modules/font-awesome/fonts/";
@@ -39,6 +40,10 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "toolshed.scss";
 @import "workflow.scss";
 @import "multiselect.scss";
+@import "icon-btn.scss";
+@import "peek-columns.scss";
+@import "dataset.scss";
+@import "list-item.scss";
 
 // ==== Select2 ====
 /* fix for zero width select2 - remove when fixed there */
@@ -57,24 +62,7 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
     color: $text-color;
 }
 
-// ==== Mixins ====
-@mixin user-select($select) {
-    -webkit-touch-callout: #{$select};
-    @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
-        #{$pre + user-select}: #{$select};
-    }
-    #{user-select}: #{$select};
-}
-
-@mixin border-radius($radius) {
-    // from font-awesome 3.0
-    -webkit-border-radius: $radius;
-    -moz-border-radius: $radius;
-    border-radius: $radius;
-}
-
 // ==== Basic styles ====
-
 body {
     @extend .m-2;
 }
diff --git a/client/src/style/scss/collection.scss b/client/src/style/scss/collection.scss
deleted file mode 100644
index 4b014d37a45..00000000000
--- a/client/src/style/scss/collection.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-//============================================================================= collection element
-.dataset-collection-element {
-    @extend .has-job-state-mixin;
-    .title-bar {
-        .subtitle {
-            margin-top: 2px;
-        }
-    }
-    .details {
-        display: none;
-    }
-}
-
-//.dataset-collection-element.dataset {
-//}
-//
-//.dataset-collection-element.dataset-collection {
-//}
-
-//============================================================================= collection
-.history-content.dataset-collection {
-    @extend .has-job-state-mixin;
-}
-
-//============================================================================= collection panel
-.dataset-collection-panel {
-    @extend .flex-vertical-container;
-
-    .vertically-spaced {
-        margin-top: 4px;
-    }
-    > .controls {
-        @extend .mx-3;
-        .navigation {
-            .back {
-                span {
-                    font-weight: bold;
-                }
-            }
-        }
-        .title {
-            .name {
-                font-weight: bold;
-            }
-        }
-    }
-    > .list-items {
-        @extend .flex-column;
-        overflow-x: hidden;
-        overflow-y: auto;
-    }
-}
-
-.collection-progress {
-    .progress {
-        border: $border-default;
-        border-color: $text-muted;
-        .progress-bar {
-            color: $text-muted;
-        }
-    }
-}
diff --git a/client/src/style/scss/history.scss b/client/src/style/scss/history.scss
deleted file mode 100644
index 1e075e2ee30..00000000000
--- a/client/src/style/scss/history.scss
+++ /dev/null
@@ -1,353 +0,0 @@
-@import "scss/mixins";
-
-// all histories
-.history-panel {
-    @extend .flex-vertical-container;
-    > .controls {
-        @extend .px-3;
-        flex: 0 0 auto;
-        .title {
-            .name {
-                margin-left: -1px;
-            }
-            input {
-                font-weight: bold;
-            }
-        }
-        .subtitle:not(:empty) {
-            span + span:before {
-                content: ", ";
-            }
-        }
-        .history-size {
-            float: left;
-            @extend .mt-1;
-        }
-        .actions {
-            &:empty {
-                height: $icon-btn-size;
-            }
-        }
-        .messages {
-            clear: both;
-            .quota-message {
-                display: none;
-            }
-        }
-
-        //TODO: move these out
-        .annotation-display {
-            display: none;
-            margin-bottom: 8px;
-            color: $text-muted;
-            .prompt {
-                display: block;
-                margin: 0px;
-                padding: 0px;
-                font-size: 90%;
-                font-weight: normal;
-            }
-            .prompt:after {
-                content: ":";
-            }
-        }
-        .annotation-display {
-            .annotation {
-                background: white;
-                border-radius: 3px;
-                border: 1px solid fade-out($border-color, 0.5);
-                padding: 4px;
-                white-space: pre-wrap;
-                overflow: auto;
-            }
-            // fake placeholder for editable text annotation
-            .annotation:empty:after {
-                position: relative;
-                top: -4px;
-                font-size: 10px;
-                font-style: italic;
-                color: $text-muted;
-                //TODO: move out for localization
-                content: "Click here to edit annotation";
-            }
-            textarea {
-                margin: 0px 0px 2px 0px;
-                //display: block;
-                border-radius: 3px;
-                width: 100%;
-            }
-        }
-        .list-pagination {
-            width: 100%;
-            text-align: center;
-            margin: 0;
-            border-top: 1px solid $btn-default-border;
-            button {
-                margin: 0;
-                padding: 0;
-                width: 25%;
-                max-width: 128px;
-                height: 20px;
-                color: transparent;
-                overflow: hidden;
-            }
-            .pages {
-                // restyle closer to button
-                -moz-appearance: none;
-                -webkit-appearance: none;
-                appearance: none;
-                margin: 0;
-                padding: 0;
-                width: 48%;
-                max-width: 256px;
-                height: 20px;
-                box-shadow: none;
-                text-align: center;
-                text-align-last: center;
-                &:focus {
-                    outline: none;
-                }
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-            &:empty {
-                display: none;
-            }
-            & > * {
-                border: none;
-                border-radius: 0px;
-                background: transparent;
-                &.pages {
-                    color: $text-muted;
-                    text-decoration: underline;
-                }
-                &:hover,
-                &:focus,
-                &:active {
-                    background: $btn-default-bg;
-                    color: $btn-default-color;
-                    box-shadow: none;
-                    text-decoration: none;
-                }
-            }
-            &:hover > *:not([disabled]) {
-                color: $btn-default-color;
-            }
-        }
-    }
-
-    // the help text that appears above the drop target
-    .history-drop-target-help {
-        margin: 10px 10px 4px 10px;
-        color: $text-muted;
-        font-size: 80%;
-        font-style: italic;
-        text-align: center;
-    }
-    .history-drop-target {
-        min-height: 64px;
-        margin: 0px 10px 10px 10px;
-        border: 1px dashed black;
-        border-radius: 3px;
-    }
-
-    > .list-items {
-        @extend .flex-column;
-        overflow-x: hidden;
-        overflow-y: auto;
-        &:empty {
-            flex-grow: 0 !important;
-        }
-    }
-
-    > .empty-message {
-        @extend .m-3;
-    }
-
-    .loading-indicator,
-    .contents-loading-indicator {
-        display: inline-block;
-        width: 100%;
-        padding: 16px;
-        text-align: center;
-        color: $text-color;
-    }
-
-    .history-content.dataset,
-    .history-content.dataset-collection {
-        .title-bar {
-            .title {
-                .hid:after {
-                    content: ":";
-                }
-            }
-        }
-    }
-}
-
-// ---------------------------------------------------------------------------- collapsed history controls
-// compact the history controls when scrolling away from the top
-.history-panel > .controls.collapsed {
-    margin: 0px;
-    padding: 4px 8px 4px;
-    flex-basis: 32px;
-
-    .messages,
-    .title,
-    .subtitle,
-    .history-size,
-    //TODO: move these out
-    .annotation-display .prompt {
-        display: none;
-    }
-
-    .search {
-        margin-bottom: 4px;
-    }
-    .actions {
-        margin-bottom: 0;
-    }
-    .list-pagination {
-        .prev,
-        .next {
-            display: none;
-        }
-        .pages {
-            float: left;
-        }
-    }
-}
-
-// ---------------------------------------------------------------------------- added class for wider display
-// since these are rendered *within parts* of other pages, we need something more than a media query
-.history-panel.wide {
-    & > .controls {
-        .actions:empty {
-            height: auto;
-        }
-    }
-}
-
-// ---------------------------------------------------------------------------- collections nested in histories
-.history-panel {
-    .dataset-collection {
-        .subtitle {
-            margin-top: 2px;
-        }
-    }
-}
-
-// ---------------------------------------------------------------------------- annotated-history-panel
-.annotated-history-panel {
-    & > .controls {
-        margin: 0px;
-
-        .name {
-            font-size: 150%;
-            margin-bottom: 4px;
-        }
-        // annotations are displayed by default in this view
-        .subtitle {
-            display: block;
-            white-space: pre-wrap;
-            &:empty {
-                display: none;
-            }
-        }
-        .history-size {
-            float: none;
-            margin: 0;
-        }
-    }
-
-    // defined outside of list-items because .headers is actually added to controls
-    // so that it will stay in place despite scrolling
-    .headers.contents-container {
-        margin-bottom: 0;
-        border-bottom: 2px solid grey;
-        cursor: unset;
-        & > * {
-            vertical-align: middle;
-            padding: 8px;
-            font-weight: bold;
-        }
-        .additional-info {
-            text-align: right;
-        }
-    }
-    .contents-container {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        // show clickable for expansion
-        cursor: pointer;
-        border-bottom: 1px solid rgba(grey, 0.5);
-        & > * {
-            display: table-cell;
-            vertical-align: top;
-            width: 50%;
-        }
-        .additional-info:not(.header) {
-            /* top and bottom should be == title-bar padding */
-            padding: 8px;
-            // do not html format
-            white-space: pre-wrap;
-        }
-    }
-
-    & > .list-items {
-        width: 100%;
-        border-bottom: 1px solid lightgrey;
-    }
-
-    .empty-message {
-        margin-top: 8px;
-    }
-}
-
-// ---------------------------------------------------------------------------- embedded in pages
-.embedded-item.display.history .annotated-history-panel {
-    & > .controls {
-        .name {
-            display: none;
-        }
-    }
-}
-
-// ---------------------------------------------------------------------------- current-history-panel
-.current-history-panel {
-    & > .controls .list-pagination {
-        // text a bit smaller for all
-        font-size: 90%;
-        & > * {
-            font-size: inherit;
-        }
-    }
-
-    // .current-content is added to dataset/collection when displayed/edited/visualized, etc@mixin
-    //  (roughly: when it's being used in the center panel)
-    .list-item.history-content.current-content {
-        //TODO: Galaxy's 'bs-primary' color - not sure where this is defined
-        border-left: 5px solid #4e5777;
-    }
-}
-
-// ---------------------------------------------------------------------------- analyze data page - right panel
-#right.history-right-panel {
-    .unified-panel-body {
-        display: -webkit-flex;
-        .middle {
-            overflow: auto;
-            width: 100%;
-            display: -webkit-flex !important;
-        }
-    }
-}
-
-// History panel tags editor
-.history-panel .tags-display {
-    padding: 1px;
-    @include shutterFade(250px);
-}
diff --git a/client/src/style/scss/ui/icon-btn.scss b/client/src/style/scss/icon-btn.scss
similarity index 100%
rename from client/src/style/scss/ui/icon-btn.scss
rename to client/src/style/scss/icon-btn.scss
diff --git a/client/src/style/scss/job.scss b/client/src/style/scss/job.scss
deleted file mode 100644
index 789f3a6507e..00000000000
--- a/client/src/style/scss/job.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// ---------------------------------------------------------------------------- generic panel list items
-.job.list-item {
-    border: 1px solid $border-color;
-
-    .title-bar {
-        .subtitle {
-            color: grey;
-            font-size: 80%;
-        }
-    }
-
-    & > .details {
-        padding: 0px;
-
-        .params {
-            padding: 0px 8px 0px 8px;
-            //display: table;
-
-            .param,
-            .input {
-                //display: table-row;
-
-                .prompt {
-                    //display: block;
-                    //display: table-cell;
-                    //margin-right: 8px;
-                    //text-align: right;
-                    font-size: 80%;
-                    //font-style: italic;
-                    color: grey;
-                }
-                .value {
-                    display: inline-block;
-                    font-weight: bold;
-                    //display: table-cell;
-                }
-            }
-        }
-
-        .list-panel {
-            padding: 0px;
-            .list-items {
-                border: 0px;
-                border-radius: 0px;
-                .list-item {
-                    border: 0px;
-                    border-radius: 0px;
-                    border-top: 1px solid $border-color;
-                    &:last-child {
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/client/src/style/scss/mixins.scss b/client/src/style/scss/mixins.scss
index 67cc80931b3..b3c8df68024 100644
--- a/client/src/style/scss/mixins.scss
+++ b/client/src/style/scss/mixins.scss
@@ -5,6 +5,21 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
 @import "~@fortawesome/fontawesome-free/scss/_variables";
 
+@mixin user-select($select) {
+    -webkit-touch-callout: #{$select};
+    @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
+        #{$pre + user-select}: #{$select};
+    }
+    #{user-select}: #{$select};
+}
+
+@mixin border-radius($radius) {
+    // from font-awesome 3.0
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    border-radius: $radius;
+}
+
 // Utility mixin expands to container edges
 @mixin fill() {
     position: relative;
diff --git a/client/src/style/scss/ui/peek-column-selector.scss b/client/src/style/scss/peek-columns.scss
similarity index 100%
rename from client/src/style/scss/ui/peek-column-selector.scss
rename to client/src/style/scss/peek-columns.scss
diff --git a/client/src/style/scss/ui/dataset-choice.scss b/client/src/style/scss/ui/dataset-choice.scss
deleted file mode 100644
index 285f4002971..00000000000
--- a/client/src/style/scss/ui/dataset-choice.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-// component to display a dataset choice and activate a modal chooser (single *and* multiple datasets)
-.dataset-choice {
-    border: 1px solid lightgrey;
-    border-radius: 3px;
-    overflow: hidden;
-    padding: 10px 8px 8px 8px;
-
-    &:hover {
-        border-color: black;
-        cursor: pointer;
-        & > * {
-            cursor: pointer;
-        }
-    }
-    .prompt {
-        margin-right: 8px;
-        &:after {
-            content: ":";
-        }
-        &:empty {
-            display: none;
-        }
-    }
-    .none-selected-msg {
-        color: grey;
-    }
-
-    .selected {
-        display: inline-block;
-
-        .title {
-            font-weight: bold;
-        }
-        .subtitle {
-            color: grey;
-            &:before {
-                content: "-";
-                margin: 0px 4px 0px 4px;
-            }
-            i {
-                font-style: normal;
-                &:not(:last-child):after {
-                    content: ", ";
-                }
-            }
-        }
-    }
-}
-
-// component to display a dataset choice and activate a modal chooser (multiple datasets)
-.dataset-choice.multi {
-    .selected {
-        display: block;
-        font-weight: normal;
-    }
-
-    table {
-        width: 100%;
-        margin-top: 8px;
-        cursor: pointer;
-
-        &:hover {
-            border-color: black;
-        }
-        tr:nth-child(even) {
-            background-color: aliceblue;
-        }
-        th {
-            padding: 0px;
-            font-weight: normal;
-            font-size: 80%;
-            color: grey;
-        }
-        th:not(:last-child),
-        td:not(:last-child) {
-            padding-right: 8px;
-        }
-        td.cell-name {
-            font-weight: bold;
-        }
-    }
-}
-
-// modal allowing single or multiple dataset selection - often activated by .dataset-choice above
-.dataset-choice-modal .list-panel {
-    .list-item.dataset {
-        border-left-width: 1px;
-        border-right-width: 1px;
-    }
-    .controls .title .name {
-        font-size: 120%;
-    }
-}
diff --git a/client/src/style/scss/ui/error-modal.scss b/client/src/style/scss/ui/error-modal.scss
deleted file mode 100644
index 65b56dc9d7c..00000000000
--- a/client/src/style/scss/ui/error-modal.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// augmented ui-modal meant to replace alert() and display error details
-.error-modal .modal-content {
-    @extend .errormessagelarge;
-    & > * {
-        padding: 0;
-        margin: 0;
-        border: none;
-    }
-    // error details are in modal-content after modal-body
-    .error-details {
-        display: none;
-        margin-top: 8px;
-        // after a short preamble, show the details
-        pre {
-            // error details are black & white, word-wrapped
-            border-radius: 3px;
-            background: white;
-            padding: 8px;
-            white-space: pre-wrap;
-            color: black;
-        }
-    }
-    .modal-footer {
-        margin-top: 8px;
-        // float buttons individually, not as a div
-        .buttons {
-            width: 100%;
-            float: none;
-            & > * {
-                float: right;
-            }
-        }
-    }
-}
diff --git a/client/src/style/scss/ui/pagination.scss b/client/src/style/scss/ui/pagination.scss
deleted file mode 100644
index c65dd5ad765..00000000000
--- a/client/src/style/scss/ui/pagination.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// pagination & scrolling pagination: see scripts/jq-plugins/ui/pagination.js
-.pagination {
-    margin: 0px;
-}
-
-.pagination-scroll-container {
-    display: inline-block;
-    background-color: #f8f8f8;
-    border-radius: 3px;
-    border: 1px solid #bfbfbf;
-    overflow: auto;
-}
-
-.pagination-scroll-container .pagination-page-list {
-    margin: 3px 0px 3px 0px;
-}
-
-.pagination-scroll-container .pagination-page-list > li:first-child > a,
-.pagination-scroll-container .pagination-page-list > li:first-child > span {
-    border-radius: 0px;
-    border-left: 0px;
-}
-
-.pagination-scroll-container .pagination-page-list > li:last-child > a,
-.pagination-scroll-container .pagination-page-list > li:last-child > span {
-    border-radius: 0px;
-}
-
-.pagination-scroll-container .pagination-page-list > li > a {
-    float: none;
-    position: static;
-    border: 1px solid #bfbfbf;
-    border-width: 0px 0px 0px 1px;
-}
diff --git a/client/src/style/scss/ui/search-input.scss b/client/src/style/scss/ui/search-input.scss
deleted file mode 100644
index ae1e875e407..00000000000
--- a/client/src/style/scss/ui/search-input.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.search-input {
-    ::placeholder {
-        color: $text-muted;
-    }
-
-    border: $border-default;
-    border-radius: 1rem;
-    background: #fff;
-    .search-advanced,
-    .search-clear,
-    .search-loading {
-        @extend .mr-2;
-        position: relative;
-        float: right;
-        top: -27px;
-        font-size: 1.2rem;
-        color: $text-muted;
-    }
-    .search-advanced {
-        margin-right: 5px !important;
-    }
-    .search-advanced:hover {
-        color: $brand-info;
-        cursor: pointer;
-    }
-    .search-clear:hover {
-        color: $brand-info;
-        cursor: pointer;
-    }
-    .search-loading {
-        display: none;
-    }
-    .search-query {
-        @extend .px-3;
-        @extend .form-control;
-        outline: 0px !important;
-        -webkit-appearance: none;
-        box-shadow: none !important;
-        width: 100%;
-        display: inline-block;
-        font-size: $font-size-base;
-        line-height: $line-height-base;
-        color: $text-color;
-        border: 0px;
-        @include border-radius($border-radius-extralarge);
-        max-width: auto;
-        background: $white;
-    }
-    .search-query:focus {
-        border-color: $brand-info;
-        outline: 0;
-    }
-}
diff --git a/client/src/style/scss/unsorted.scss b/client/src/style/scss/unsorted.scss
index 2724a0eb8dd..09f168bfe32 100644
--- a/client/src/style/scss/unsorted.scss
+++ b/client/src/style/scss/unsorted.scss
@@ -699,20 +699,6 @@ div.permissionContainer {
     padding-left: 5px;
 }
 
-// ============================================================================ History
-@import "ui/icon-btn.scss";
-@import "list-item.scss";
-@import "dataset.scss";
-@import "history.scss";
-@import "collection.scss";
-@import "job.scss";
-
-@import "ui/search-input.scss";
-@import "ui/dataset-choice.scss";
-@import "ui/peek-column-selector.scss";
-@import "ui/pagination.scss";
-@import "ui/error-modal.scss";
-
 // ==== Tool menu styles
 .toolMenuContainer {
     color: $panel-text-color;
diff --git a/client/src/mvc/webhooks.js b/client/src/utils/webhooks.js
similarity index 100%
rename from client/src/mvc/webhooks.js
rename to client/src/utils/webhooks.js
diff --git a/client/tests/jest/standalone/RuleDefinitions.test.js b/client/tests/jest/standalone/RuleDefinitions.test.js
index f67306211c1..fdb5d01a856 100644
--- a/client/tests/jest/standalone/RuleDefinitions.test.js
+++ b/client/tests/jest/standalone/RuleDefinitions.test.js
@@ -1,4 +1,4 @@
-import RuleDefs from "mvc/rules/rule-definitions";
+import RuleDefs from "components/RuleBuilder/rule-definitions";
 import SPEC_TEST_CASES from "./rules_dsl_spec.yml";
 
 function applyRules(rules, data, sources) {