higlass 1.13.5 → 2.0.0

package/app/scripts/HiGlassComponent.jsx

@@ -1,41 +1,42 @@
 // @ts-nocheck
-import React from 'react';
-import PropTypes from 'prop-types';
-import { select, pointer } from 'd3-selection';
+import clsx from 'clsx';
+import { ElementQueries, ResizeSensor } from 'css-element-queries';
 import { scaleLinear } from 'd3-scale';
-import slugid from 'slugid';
+import { pointer, select } from 'd3-selection';
 import * as PIXI from 'pixi.js';
-import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import createPubSub, { globalPubSub } from 'pub-sub-es';
+import React from 'react';
 import ReactGridLayout from 'react-grid-layout';
-import { ResizeSensor, ElementQueries } from 'css-element-queries';
-import vkbeautify from 'vkbeautify';
+import slugid from 'slugid';
 import parse from 'url-parse';
-import createPubSub, { globalPubSub } from 'pub-sub-es';
-import clsx from 'clsx';
+import vkbeautify from 'vkbeautify';
 
-import TiledPlot from './TiledPlot';
-import GenomePositionSearchBox from './GenomePositionSearchBox';
-import ExportLinkDialog from './ExportLinkDialog';
-import ViewHeader from './ViewHeader';
 import ChromosomeInfo from './ChromosomeInfo';
+import ExportLinkDialog from './ExportLinkDialog';
+import GenomePositionSearchBox from './GenomePositionSearchBox';
+import TiledPlot from './TiledPlot';
 import ViewConfigEditor from './ViewConfigEditor';
+import ViewHeader from './ViewHeader';
 
-import createSymbolIcon from './symbol';
-import { all as icons } from './icons';
 import createApi from './api';
+import { all as icons } from './icons';
+import createSymbolIcon from './symbol';
 
+import { Provider as ModalProvider } from './hocs/with-modal';
 // Higher-order components
 import { Provider as PubSubProvider } from './hocs/with-pub-sub';
-import { Provider as ModalProvider } from './hocs/with-modal';
 import { Provider as ThemeProvider } from './hocs/with-theme';
 
+import HiGlassComponentContext from './HiGlassComponentContext';
+
 // Services
 import {
   chromInfo,
   createDomEvent,
+  requestsInFlight,
   setTileProxyAuthHeader,
   tileProxy,
-  requestsInFlight,
 } from './services';
 
 // Utils
@@ -61,38 +62,40 @@ import {
   toVoid,
   visitPositionedTracks,
 } from './utils';
+import positionedTracksToAllTracks from './utils/positioned-tracks-to-all-tracks';
 
 // Configs
 import {
-  DEFAULT_SERVER,
   DEFAULT_CONTAINER_PADDING_X,
   DEFAULT_CONTAINER_PADDING_Y,
+  DEFAULT_SERVER,
   DEFAULT_VIEW_MARGIN,
   DEFAULT_VIEW_PADDING,
   GLOBALS,
-  MOUSE_TOOL_MOVE,
-  MOUSE_TOOL_SELECT,
   LOCATION_LISTENER_PREFIX,
   LONG_DRAG_TIMEOUT,
+  MOUSE_TOOL_MOVE,
+  MOUSE_TOOL_SELECT,
+  MOUSE_TOOL_TRACK_SELECT,
   SHORT_DRAG_TIMEOUT,
+  SIZE_MODE_BOUNDED,
+  SIZE_MODE_BOUNDED_OVERFLOW,
+  SIZE_MODE_DEFAULT,
+  SIZE_MODE_OVERFLOW,
+  SIZE_MODE_SCROLL,
   THEME_DARK,
   THEME_LIGHT,
   TRACKS_INFO_BY_TYPE,
 } from './configs';
 
 // Styles
-import styles from '../styles/HiGlass.module.scss'; // eslint-disable-line no-unused-vars
-import stylesMTHeader from '../styles/ViewHeader.module.scss'; // eslint-disable-line no-unused-vars
-
-import '../styles/HiGlass.scss'; // eslint-disable-line no-unused-vars
+import styles from '../styles/HiGlass.module.scss';
+import stylesMTHeader from '../styles/ViewHeader.module.scss';
+import '../styles/HiGlass.scss';
 
 const NUM_GRID_COLUMNS = 12;
 const DEFAULT_NEW_VIEW_HEIGHT = 12;
 const VIEW_HEADER_HEIGHT = 20;
-const SIZE_MODE_DEFAULT = 'default';
-const SIZE_MODE_BOUNDED = 'bounded';
-const SIZE_MODE_OVERFLOW = 'overflow';
-const SIZE_MODE_SCROLL = 'scroll';
 
 class HiGlassComponent extends React.Component {
   constructor(props) {
@@ -106,6 +109,8 @@ class HiGlassComponent extends React.Component {
       );
     }
 
+    this.topDivRef = React.createRef();
+
     this.pubSub = createPubSub();
     this.domEvent = createDomEvent(this.pubSub);
 
@@ -116,11 +121,14 @@ class HiGlassComponent extends React.Component {
     this.resizeSensor = null;
 
     this.uid = slugid.nice();
+    /** @type {Record<string, import('./TiledPlot').TiledPlot> */
     this.tiledPlots = {};
     this.genomePositionSearchBoxes = {};
 
     // keep track of the xScales of each Track Renderer
+    /** @type {Record<string, import('./TrackRenderer').Scale>} */
     this.xScales = {};
+    /** @type {Record<string, import('./TrackRenderer').Scale>} */
     this.yScales = {};
     this.projectionXDomains = {};
     this.projectionYDomains = {};
@@ -144,7 +152,6 @@ class HiGlassComponent extends React.Component {
     // between views
     this.zoomLocks = {};
     this.locationLocks = {};
-
     // axis-specific location lock
     this.locationLocksAxisWise = { x: {}, y: {} };
 
@@ -160,7 +167,7 @@ class HiGlassComponent extends React.Component {
 
     // allow a different PIXI to be passed in case the
     // caller wants to use a different version
-    GLOBALS.PIXI = (props.options && props.options.PIXI) || PIXI;
+    GLOBALS.PIXI = props.options?.PIXI || PIXI;
 
     this.viewMarginTop =
       +props.options.viewMarginTop >= 0
@@ -210,7 +217,9 @@ class HiGlassComponent extends React.Component {
     this.viewconfLoaded = false;
 
     const { viewConfig } = this.props;
-    const views = this.loadIfRemoteViewConfig(this.props.viewConfig);
+    const views = this.processViewConfig(
+      JSON.parse(JSON.stringify(this.props.viewConfig)),
+    );
 
     if (props.options.authToken) {
       setTileProxyAuthHeader(props.options.authToken);
@@ -237,6 +246,9 @@ class HiGlassComponent extends React.Component {
         case MOUSE_TOOL_SELECT:
           mouseTool = MOUSE_TOOL_SELECT;
           break;
+        case MOUSE_TOOL_TRACK_SELECT:
+          mouseTool = MOUSE_TOOL_TRACK_SELECT;
+          break;
         default:
           break;
       }
@@ -291,10 +303,12 @@ class HiGlassComponent extends React.Component {
       typedEditable: undefined,
       mouseOverOverlayUid: null,
       mouseTool,
+      overTrackChooser: null,
       isDarkTheme: false,
-      rangeSelection1dSize: [0, Infinity],
+      rangeSelection1dSize: [0, Number.POSITIVE_INFINITY],
       rangeSelectionToInt: false,
       modal: null,
+      sizeMode: this.props.options?.sizeMode,
     };
 
     // monitor whether this element is attached to the DOM so that
@@ -350,6 +364,7 @@ class HiGlassComponent extends React.Component {
     this.closeModalBound = this.closeModal.bind(this);
     this.handleEditViewConfigBound = this.handleEditViewConfig.bind(this);
     this.onScrollHandlerBound = this.onScrollHandler.bind(this);
+    this.viewUidToNameBound = this.viewUidToName.bind(this);
 
     // for typed shortcuts (e.g. e-d-i-t) to toggle editable
     this.typedText = '';
@@ -370,7 +385,6 @@ class HiGlassComponent extends React.Component {
     );
   }
 
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillMount() {
     this.domEvent.register('keydown', document);
     this.domEvent.register('keyup', document);
@@ -422,12 +436,11 @@ class HiGlassComponent extends React.Component {
   }
 
   get sizeMode() {
-    // eslint-disable-next-line no-nested-ternary
-    return typeof this.props.options.sizeMode === 'undefined'
+    return typeof this.state.sizeMode === 'undefined'
       ? this.props.options.bounded
         ? 'bounded'
         : SIZE_MODE_DEFAULT
-      : this.props.options.sizeMode;
+      : this.state.sizeMode;
   }
 
   setBroadcastMousePositionGlobally(isBroadcastMousePositionGlobally = false) {
@@ -476,9 +489,9 @@ class HiGlassComponent extends React.Component {
   waitForDOMAttachment(callback) {
     if (!this.mounted) return;
 
-    const thisElement = ReactDOM.findDOMNode(this);
+    const thisElement = this.topDivRef.current;
 
-    if (document.body.contains(thisElement)) {
+    if (thisElement && document.body.contains(thisElement)) {
       callback();
     } else {
       requestAnimationFrame(() => this.waitForDOMAttachment(callback));
@@ -491,7 +504,8 @@ class HiGlassComponent extends React.Component {
     // in focus, everything is drawn at the top and overlaps. When it gains
     // focus we need to redraw everything in its proper place
     this.mounted = true;
-    this.element = ReactDOM.findDOMNode(this);
+    this.element = this.topDivRef.current;
+
     window.addEventListener('focus', this.boundRefreshView);
 
     Object.values(this.state.views).forEach((view) => {
@@ -514,30 +528,27 @@ class HiGlassComponent extends React.Component {
       autoResize: true,
     };
 
-    const versionNumber = parseInt(PIXI.VERSION[0], 10);
-
-    if (versionNumber === 4) {
-      console.warn(
-        'Deprecation warning: please update Pixi.js to version 5 or above!',
-      );
-      if (this.props.options.renderer === 'canvas') {
-        this.pixiRenderer = new GLOBALS.PIXI.CanvasRenderer(rendererOptions);
-      } else {
-        this.pixiRenderer = new GLOBALS.PIXI.WebGLRenderer(rendererOptions);
-      }
-    } else {
-      if (versionNumber < 4) {
+    switch (PIXI.VERSION[0]) {
+      case '4':
         console.warn(
-          'Deprecation warning: please update Pixi.js to version 5 or above! ' +
-            'This version of Pixi.js is unsupported. Good luck 🤞',
+          'Deprecation warning: please update Pixi.js to version 5!',
         );
-      }
-
-      if (this.props.options.renderer === 'canvas') {
-        this.pixiRenderer = new GLOBALS.PIXI.CanvasRenderer(rendererOptions);
-      } else {
-        this.pixiRenderer = new GLOBALS.PIXI.Renderer(rendererOptions);
-      }
+        if (this.props.options.renderer === 'canvas') {
+          this.pixiRenderer = new GLOBALS.PIXI.CanvasRenderer(rendererOptions);
+        } else {
+          this.pixiRenderer = new GLOBALS.PIXI.WebGLRenderer(rendererOptions);
+        }
+        break;
+      // case '5':
+      // case '6':
+      // case '7': // Gosling uses PIXI.js v7
+      default:
+        if (this.props.options.renderer === 'canvas') {
+          this.pixiRenderer = new GLOBALS.PIXI.CanvasRenderer(rendererOptions);
+        } else {
+          this.pixiRenderer = new GLOBALS.PIXI.Renderer(rendererOptions);
+        }
+        break;
     }
 
     // PIXI.RESOLUTION=2;
@@ -545,7 +556,6 @@ class HiGlassComponent extends React.Component {
 
     // keep track of the width and height of this element, because it
     // needs to be reflected in the size of our drawing surface
-    // eslint-disable-next-line react/no-did-mount-set-state
     this.setState({
       svgElement: this.svgElement,
       canvasElement: this.canvasElement,
@@ -585,61 +595,19 @@ class HiGlassComponent extends React.Component {
     return this.tiledPlots[viewUid].trackRenderer;
   }
 
-  /**
-   * Check if the passed in viewConfig is remote (i.e. is a string).
-   * If it is, fetch it before proceeding
-   */
-  loadIfRemoteViewConfig(viewConfig) {
-    let views = {};
-    if (typeof viewConfig === 'string') {
-      // Load external viewConfig
-      tileProxy.json(
-        viewConfig,
-        (error, remoteViewConfig) => {
-          viewConfig = remoteViewConfig;
-          this.setState({
-            views: this.processViewConfig(
-              JSON.parse(JSON.stringify(remoteViewConfig)),
-            ),
-            viewConfig: remoteViewConfig,
-          });
-          this.unsetOnLocationChange.forEach(
-            ({ viewId, callback, callbackId }) => {
-              this.onLocationChange(viewId, callback, callbackId);
-            },
-          );
-        },
-        this.pubSub,
-      );
-    } else {
-      views = this.processViewConfig(JSON.parse(JSON.stringify(viewConfig)));
-      if (this.mounted) {
-        this.setState({
-          viewConfig,
-        });
-      }
-    }
-
-    return views;
-  }
-
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillReceiveProps(newProps) {
-    const viewsByUid = this.loadIfRemoteViewConfig(newProps.viewConfig);
+    if (this.mounted) {
+      this.setState({ viewConfig: newProps.viewConfig });
+    }
+    const viewsByUid = this.processViewConfig(
+      JSON.parse(JSON.stringify(newProps.viewConfig)),
+    );
 
     if (newProps.options.authToken !== this.prevAuthToken) {
       // we go a new auth token so we should reload everything
       setTileProxyAuthHeader(newProps.options.authToken);
 
-      for (const viewId of this.iterateOverViews()) {
-        const trackRenderer = this.getTrackRenderer(viewId);
-        const trackDefinitions = JSON.parse(trackRenderer.prevTrackDefinitions);
-
-        // this will remove all the tracks and then recreate them
-        // re-requesting all tiles with the new auth key
-        trackRenderer.syncTrackObjects([]);
-        trackRenderer.syncTrackObjects(trackDefinitions);
-      }
+      this.reload();
 
       this.prevAuthToken = newProps.options.authToken;
     }
@@ -655,7 +623,6 @@ class HiGlassComponent extends React.Component {
     });
   }
 
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillUpdate() {
     // let width = this.element.clientWidth;
     // let height = this.element.clientHeight;
@@ -663,6 +630,20 @@ class HiGlassComponent extends React.Component {
     this.pixiRenderer.render(this.pixiRoot);
   }
 
+  reload() {
+    for (const viewId of this.iterateOverViews()) {
+      const trackRenderer = this.getTrackRenderer(viewId);
+      if (!trackRenderer) continue;
+
+      const trackDefinitions = JSON.parse(trackRenderer.prevTrackDefinitions);
+
+      // this will remove all the tracks and then recreate them
+      // re-requesting all tiles with the new auth key
+      trackRenderer.syncTrackObjects([]);
+      trackRenderer.syncTrackObjects(trackDefinitions);
+    }
+  }
+
   componentDidUpdate() {
     this.setTheme(this.props.options.theme, this.props.options.isDarkTheme);
 
@@ -765,13 +746,15 @@ class HiGlassComponent extends React.Component {
   }
 
   fitPixiToParentContainer() {
-    if (!this.element || !this.element.parentNode) {
-      console.warn('No parentNode:', this.element);
+    const element = this.topDivRef.current;
+
+    if (!element || !element.parentNode) {
+      // console.warn('No parentNode:', element);
       return;
     }
 
-    const width = this.element.parentNode.clientWidth;
-    const height = this.element.parentNode.clientHeight;
+    const width = element.parentNode.clientWidth;
+    const height = element.parentNode.clientHeight;
 
     this.pixiMask.beginFill(0xffffff).drawRect(0, 0, width, height).endFill();
 
@@ -804,10 +787,7 @@ class HiGlassComponent extends React.Component {
     const trackOptions = track.options ? track.options : {};
 
     if (this.props.options.defaultTrackOptions) {
-      if (
-        this.props.options.defaultTrackOptions.trackSpecific &&
-        this.props.options.defaultTrackOptions.trackSpecific[track.type]
-      ) {
+      if (this.props.options.defaultTrackOptions.trackSpecific?.[track.type]) {
         // track specific options take precedence over all options
 
         const options =
@@ -834,11 +814,9 @@ class HiGlassComponent extends React.Component {
     }
 
     if (trackInfo.defaultOptions) {
-      const defaultThemeOptions =
-        trackInfo.defaultOptionsByTheme &&
-        trackInfo.defaultOptionsByTheme[this.theme]
-          ? trackInfo.defaultOptionsByTheme[this.theme]
-          : {};
+      const defaultThemeOptions = trackInfo.defaultOptionsByTheme?.[this.theme]
+        ? trackInfo.defaultOptionsByTheme[this.theme]
+        : {};
 
       const defaultOptions = {
         ...trackInfo.defaultOptions,
@@ -1106,7 +1084,7 @@ class HiGlassComponent extends React.Component {
   iterateOverViews() {
     const viewIds = [];
 
-    for (const viewId in Object.keys(this.state.views)) {
+    for (const viewId of Object.keys(this.state.views)) {
       viewIds.push(viewId);
     }
 
@@ -1136,6 +1114,7 @@ class HiGlassComponent extends React.Component {
    * Iterate over all the tracks in this component.
    */
   iterateOverTracks() {
+    /** @type {Array<{ viewId: string, trackId: string, track: import('./types').UnknownTrackConfig }>}*/
     const allTracks = [];
     for (const viewId in this.state.views) {
       const { tracks } = this.state.views[viewId];
@@ -1164,6 +1143,10 @@ class HiGlassComponent extends React.Component {
     this.setState({ mouseTool });
   }
 
+  setSizeMode(sizeMode) {
+    this.setState({ sizeMode });
+  }
+
   /**
    * Checks if a track's value scale is locked with another track
    */
@@ -1209,6 +1192,9 @@ class HiGlassComponent extends React.Component {
       )
       // filter out stale locks with non-existant tracks
       .filter((track) => track)
+      // Filter out tracks that don't have values scales (e.g. chromosome tracks).
+      // The .originalTrack check covers LeftTrackModifier style tracks.
+      .filter((track) => track.valueScale || track.originalTrack?.valueScale)
       // if the track is a LeftTrackModifier we want the originalTrack
       .map((track) =>
         track.originalTrack === undefined ? track : track.originalTrack,
@@ -1234,14 +1220,16 @@ class HiGlassComponent extends React.Component {
 
     if (
       minValues.length === 0 ||
-      minValues.filter((x) => x === null || x === Infinity).length > 0
+      minValues.filter((x) => x === null || x === Number.POSITIVE_INFINITY)
+        .length > 0
     ) {
       return null; // Data hasn't loaded completely
     }
 
     if (
       maxValues.length === 0 ||
-      maxValues.filter((x) => x === null || x === -Infinity).length > 0
+      maxValues.filter((x) => x === null || x === Number.NEGATIVE_INFINITY)
+        .length > 0
     ) {
       return null; // Data hasn't loaded completely
     }
@@ -1395,7 +1383,7 @@ class HiGlassComponent extends React.Component {
    *    Event handler is called with parameters (xScale, yScale)
    */
   addDraggingChangedListener(viewUid, listenerUid, eventHandler) {
-    if (!this.draggingChangedListeners.hasOwnProperty(viewUid)) {
+    if (!(viewUid in this.draggingChangedListeners)) {
       this.draggingChangedListeners[viewUid] = {};
     }
 
@@ -1412,10 +1400,10 @@ class HiGlassComponent extends React.Component {
    * @param listenerUid: The uid of the listener itself.
    */
   removeDraggingChangedListener(viewUid, listenerUid) {
-    if (this.draggingChangedListeners.hasOwnProperty(viewUid)) {
+    if (viewUid in this.draggingChangedListeners) {
       const listeners = this.draggingChangedListeners[viewUid];
 
-      if (listeners.hasOwnProperty(listenerUid)) {
+      if (listenerUid in listeners) {
         // make sure the listener doesn't think we're still
         // dragging
         listeners[listenerUid](false);
@@ -1561,7 +1549,10 @@ class HiGlassComponent extends React.Component {
         this.canvasElement.width,
         this.canvasElement.height,
       );
-      img.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
+
+      img.src = `data:image/svg+xml;base64,${btoa(
+        unescape(encodeURIComponent(svgString)),
+      )}`;
       img.onload = () => {
         const targetCanvas = document.createElement('canvas');
         // TODO: I have no idea why dimensions are doubled!
@@ -1605,7 +1596,6 @@ class HiGlassComponent extends React.Component {
       const lockGroup = this.zoomLocks[uid];
       const lockGroupItems = dictItems(lockGroup);
 
-      // eslint-disable-next-line no-unused-vars
       const [centerX, centerY, k] = scalesCenterAndK(
         this.xScales[uid],
         this.yScales[uid],
@@ -1624,7 +1614,6 @@ class HiGlassComponent extends React.Component {
           continue;
         }
 
-        // eslint-disable-next-line no-unused-vars
         const [keyCenterX, keyCenterY, keyK] = scalesCenterAndK(
           this.xScales[key],
           this.yScales[key],
@@ -1656,7 +1645,7 @@ class HiGlassComponent extends React.Component {
 
         // notify the listeners of all locked views that the scales of
         // this view have changed
-        if (this.scalesChangedListeners.hasOwnProperty(key)) {
+        if (key in this.scalesChangedListeners) {
           dictValues(this.scalesChangedListeners[key]).forEach((x) => {
             x(newXScale, newYScale);
           });
@@ -1669,7 +1658,6 @@ class HiGlassComponent extends React.Component {
       const lockGroup = this.locationLocks[uid];
       const lockGroupItems = dictItems(lockGroup);
 
-      // eslint-disable-next-line no-unused-vars
       const [centerX, centerY, k] = scalesCenterAndK(
         this.xScales[uid],
         this.yScales[uid],
@@ -1683,7 +1671,6 @@ class HiGlassComponent extends React.Component {
           continue;
         }
 
-        // eslint-disable-next-line no-unused-vars
         const [keyCenterX, keyCenterY, keyK] = scalesCenterAndK(
           this.xScales[key],
           this.yScales[key],
@@ -1718,7 +1705,7 @@ class HiGlassComponent extends React.Component {
 
         // notify the listeners of all locked views that the scales of
         // this view have changed
-        if (this.scalesChangedListeners.hasOwnProperty(key)) {
+        if (key in this.scalesChangedListeners) {
           dictValues(this.scalesChangedListeners[key]).forEach((x) => {
             x(newXScale, newYScale);
           });
@@ -1734,7 +1721,6 @@ class HiGlassComponent extends React.Component {
       // this means the x axis of this view (uid) is locked to the y axis of another view
       const lockCrossAxis = this.locationLocksAxisWise.x[uid].axis !== 'x';
 
-      // eslint-disable-next-line no-unused-vars
       const [centerX, centerY, k] = scalesCenterAndK(
         this.xScales[uid],
         this.yScales[uid],
@@ -1748,7 +1734,6 @@ class HiGlassComponent extends React.Component {
           continue;
         }
 
-        // eslint-disable-next-line no-unused-vars
         const [keyCenterX, keyCenterY, keyK] = scalesCenterAndK(
           this.xScales[key],
           this.yScales[key],
@@ -1781,7 +1766,7 @@ class HiGlassComponent extends React.Component {
 
         // notify the listeners of all locked views that the scales of
         // this view have changed
-        if (this.scalesChangedListeners.hasOwnProperty(key)) {
+        if (key in this.scalesChangedListeners) {
           dictValues(this.scalesChangedListeners[key]).forEach((x) => {
             x(newXScale, newYScale);
           });
@@ -1797,7 +1782,6 @@ class HiGlassComponent extends React.Component {
       // this means the y axis of this view (uid) is locked to the x axis of another view
       const lockCrossAxis = this.locationLocksAxisWise.y[uid].axis !== 'y';
 
-      // eslint-disable-next-line no-unused-vars
       const [centerX, centerY, k] = scalesCenterAndK(
         this.xScales[uid],
         this.yScales[uid],
@@ -1811,7 +1795,6 @@ class HiGlassComponent extends React.Component {
           continue;
         }
 
-        // eslint-disable-next-line no-unused-vars
         const [keyCenterX, keyCenterY, keyK] = scalesCenterAndK(
           this.xScales[key],
           this.yScales[key],
@@ -1844,7 +1827,7 @@ class HiGlassComponent extends React.Component {
 
         // notify the listeners of all locked views that the scales of
         // this view have changed
-        if (this.scalesChangedListeners.hasOwnProperty(key)) {
+        if (key in this.scalesChangedListeners) {
           dictValues(this.scalesChangedListeners[key]).forEach((x) => {
             x(newXScale, newYScale);
           });
@@ -2105,7 +2088,7 @@ class HiGlassComponent extends React.Component {
       };
 
       this.addCallbacks(toView, newTrack);
-      this.handleTrackAdded(toView, newTrack, position, hostTrack);
+      this.handleTrackAdded(toView, newTrack, position, null, hostTrack);
     }
     this.setState({
       chooseTrackHandler: null,
@@ -2125,12 +2108,11 @@ class HiGlassComponent extends React.Component {
     const targetXScale = this.xScales[uid1];
     const targetYScale = this.yScales[uid1];
 
-    // eslint-disable-next-line no-unused-vars
     const [targetCenterX, targetCenterY, targetK] = scalesCenterAndK(
       targetXScale,
       targetYScale,
     );
-    // eslint-disable-next-line no-unused-vars
+
     const [sourceCenterX, sourceCenterY, sourceK] = scalesCenterAndK(
       sourceXScale,
       sourceYScale,
@@ -2155,12 +2137,11 @@ class HiGlassComponent extends React.Component {
     const targetXScale = this.xScales[uid1];
     const targetYScale = this.yScales[uid1];
 
-    // eslint-disable-next-line no-unused-vars
     const [targetCenterX, targetCenterY, targetK] = scalesCenterAndK(
       targetXScale,
       targetYScale,
     );
-    // eslint-disable-next-line no-unused-vars
+
     const [sourceCenterX, sourceCenterY, sourceK] = scalesCenterAndK(
       sourceXScale,
       sourceYScale,
@@ -2180,9 +2161,10 @@ class HiGlassComponent extends React.Component {
    *
    * We just need to close the menu here.
    */
-  handleTrackPositionChosen(viewUid, position) {
+  handleTrackPositionChosen(viewUid, position, extent) {
     this.setState({
       addTrackPosition: position,
+      addTrackExtent: extent,
       addTrackPositionView: viewUid,
     });
   }
@@ -2194,7 +2176,8 @@ class HiGlassComponent extends React.Component {
   updateRowHeight() {
     if (
       !this.props.options ||
-      this.sizeMode !== SIZE_MODE_BOUNDED ||
+      (this.sizeMode !== SIZE_MODE_BOUNDED &&
+        this.sizeMode !== SIZE_MODE_BOUNDED_OVERFLOW) ||
       this.props.options.pixelPreciseMarginPadding
     ) {
       // not bounded so we don't need to update the row height
@@ -2204,9 +2187,34 @@ class HiGlassComponent extends React.Component {
     // const width = this.element.parentNode.clientWidth;
     const height = this.element.parentNode.clientHeight;
 
-    let maxHeight = 0;
+    let maxHeight = 1;
+    let perTrackRowHeight = 0;
+
     for (const view of dictValues(this.state.views)) {
       maxHeight = Math.max(maxHeight, view.layout.y + view.layout.h);
+
+      const topTrackHeights = view.tracks.top
+        .filter((x) => x.height)
+        .map((x) => x.height)
+        .reduce((a, b) => a + b, 0);
+      const bottomTrackHeights = view.tracks.bottom
+        .filter((x) => x.height)
+        .map((x) => x.height)
+        .reduce((a, b) => a + b, 0);
+
+      // centerTrackHeight is excluded because center tracks
+      // are resized to fit into the remaining part of the view
+      // const centerTrackHeight = view.tracks.center
+      //   .filter(x => x.height)
+      //   .map(x => x.height)
+      //   .reduce((a, b) => a + b, 0);
+
+      perTrackRowHeight = Math.ceil(
+        Math.max(
+          perTrackRowHeight,
+          (topTrackHeights + bottomTrackHeights) / view.layout.h,
+        ),
+      );
     }
 
     this.handleDragStart();
@@ -2217,43 +2225,23 @@ class HiGlassComponent extends React.Component {
     const marginHeight = MARGIN_HEIGHT * maxHeight - 1;
     const availableHeight = height - marginHeight;
 
-    // const currentRowHeight = this.state.rowHeight;
-    const prospectiveRowHeight = availableHeight / maxHeight; // maxHeight is the number of
-    // rows necessary to display this view
+    // if we're bounded, then maxHeight * rowHeight = availableHeight
+    // but the catch is that if we have tracks that would be larger
+    // than the largest div, we have to adjust the height to make sure
+    // all of them are visible
+    // to do that, we have to go view by view and calculate the heights
+    // of the top and bottom sections and then divide that by the view's height
+    // if there's a center track
 
-    const chosenRowHeight = Math.floor(prospectiveRowHeight);
-
-    // for (const view of dictValues(this.state.views)) {
-    //   const {
-    //     totalWidth,
-    //     totalHeight,
-    //     topHeight,
-    //     bottomHeight,
-    //     leftWidth,
-    //     rightWidth,
-    //     centerWidth,
-    //     centerHeight,
-    //     minNecessaryHeight
-    //   } = this.calculateViewDimensions(view);
-
-    //   // If the view is bounded, then we always fit everything inside the container
-    //   //
-    //   // It used to be that if the viewconfig was too long, we just let it overflow,
-    //   // but I think it's better that it's always contained.
-
-    //   /*
-    //         if (minNecessaryHeight > view.layout.h * (prospectiveRowHeight + MARGIN_HEIGHT)) {
-    //             // we don't have space for one of the containers, so let them exceed the bounds
-    //             // of the box
-    //             chosenRowHeight = currentRowHeight;
-    //             break;
-    //         }
-    //         */
-    // }
+    const prospectiveRowHeight = Math.floor(availableHeight / maxHeight); // maxHeight is the number of
+    // rows necessary to display this view
+    const chosenRowHeight = Math.max(prospectiveRowHeight, perTrackRowHeight);
 
-    this.setState({
-      rowHeight: chosenRowHeight,
-    });
+    if (this.topDivRef.current) {
+      this.setState({
+        rowHeight: chosenRowHeight,
+      });
+    }
   }
 
   /**
@@ -2299,11 +2287,11 @@ class HiGlassComponent extends React.Component {
       return TRACKS_INFO_BY_TYPE[trackType];
     }
 
-    if (this.pluginTracks && this.pluginTracks[trackType]) {
+    if (this.pluginTracks?.[trackType]) {
       return this.pluginTracks[trackType].config;
     }
 
-    if (window.higlassTracksByType && window.higlassTracksByType[trackType]) {
+    if (window.higlassTracksByType?.[trackType]) {
       return window.higlassTracksByType[trackType].config;
     }
 
@@ -2317,7 +2305,7 @@ class HiGlassComponent extends React.Component {
 
   forceRefreshView() {
     // force everything to rerender
-    this.setState(this.state); // eslint-disable-line react/no-access-state-in-setstate
+    this.setState(this.state);
   }
 
   refreshView(timeout = SHORT_DRAG_TIMEOUT) {
@@ -2474,8 +2462,8 @@ class HiGlassComponent extends React.Component {
             : defaultCenterWidth;
         }
 
-        currHeight += height;
-        currWidth += width;
+        centerHeight = height;
+        centerWidth = width;
       }
     } else if (
       ((view.tracks.top && dictValues(view.tracks.top).length > 1) ||
@@ -2535,29 +2523,30 @@ class HiGlassComponent extends React.Component {
   }
 
   calculateZoomLimits(view, initialXDomain) {
-    const limits = [0, Infinity];
+    const limits = [0, Number.POSITIVE_INFINITY];
 
-    // By default, highest zoom resolution is 1bp
-    const viewConfLimit = view.zoomLimits || [1, null];
-    const diffX = initialXDomain[1] - initialXDomain[0];
+    if ('zoomLimits' in view) {
+      const diffX = initialXDomain[1] - initialXDomain[0];
+      const viewConfLimit = view.zoomLimits;
 
-    if (viewConfLimit.length !== 2) {
-      return limits;
-    }
+      if (viewConfLimit.length !== 2) {
+        return limits;
+      }
 
-    if (viewConfLimit[0] !== null && viewConfLimit[0] > 0) {
-      const upperLimit = diffX / viewConfLimit[0];
-      limits[1] = Math.max(upperLimit, 1);
-      if (upperLimit < 1) {
-        console.warn(`Invalid zoom limits. Lower limit set to ${diffX}`);
+      if (viewConfLimit[0] !== null && viewConfLimit[0] > 0) {
+        const upperLimit = diffX / viewConfLimit[0];
+        limits[1] = Math.max(upperLimit, 1);
+        if (upperLimit < 1) {
+          console.warn(`Invalid zoom limits. Lower limit set to ${diffX}`);
+        }
       }
-    }
 
-    if (viewConfLimit[1] !== null && viewConfLimit[1] > viewConfLimit[0]) {
-      const lowerLimit = diffX / viewConfLimit[1];
-      limits[0] = Math.min(lowerLimit, 1);
-      if (lowerLimit > 1) {
-        console.warn(`Invalid zoom limits. Upper limit set to ${diffX}`);
+      if (viewConfLimit[1] !== null && viewConfLimit[1] > viewConfLimit[0]) {
+        const lowerLimit = diffX / viewConfLimit[1];
+        limits[0] = Math.min(lowerLimit, 1);
+        if (lowerLimit > 1) {
+          console.warn(`Invalid zoom limits. Upper limit set to ${diffX}`);
+        }
       }
     }
     return limits;
@@ -2690,6 +2679,7 @@ class HiGlassComponent extends React.Component {
 
     if (hostTrack.type === 'combined') {
       hostTrack.contents.push(newTrack);
+      hostTrack.uid = slugid.nice();
 
       if (newTrack.type === 'heatmap') {
         // For stacked heatmaps we will adjust some options automatically for convenience
@@ -2716,6 +2706,8 @@ class HiGlassComponent extends React.Component {
     this.setState((prevState) => ({
       views: prevState.views,
     }));
+
+    this.triggerViewChangeDb();
   }
 
   handleNoTrackAdded() {
@@ -2723,6 +2715,7 @@ class HiGlassComponent extends React.Component {
       // we've already added the track, remove the add track dialog
       this.setState({
         addTrackPosition: null,
+        addTrackExtent: null,
       });
     }
   }
@@ -2735,11 +2728,11 @@ class HiGlassComponent extends React.Component {
    * @param position: The position the track is being added to
    * @param host: If this track is being added to another track
    */
-  handleTracksAdded(viewId, newTracks, position, host) {
+  handleTracksAdded(viewId, newTracks, position, extent, host) {
     this.storeTrackSizes(viewId);
 
     for (const newTrack of newTracks) {
-      this.handleTrackAdded(viewId, newTrack, position, host);
+      this.handleTrackAdded(viewId, newTrack, position, extent, host);
     }
   }
 
@@ -2808,7 +2801,7 @@ class HiGlassComponent extends React.Component {
    * @returns {Object}: A trackConfig (\{ uid: "", width: x \})
    *  describing this track
    */
-  handleTrackAdded(viewId, newTrack, position, host = null) {
+  handleTrackAdded(viewId, newTrack, position, extent = null, host = null) {
     this.addDefaultTrackOptions(newTrack);
 
     // make sure the new track has a uid
@@ -2825,6 +2818,7 @@ class HiGlassComponent extends React.Component {
       // we've already added the track, remove the add track dialog
       this.setState({
         addTrackPosition: null,
+        addTrackExtent: null,
       });
     }
 
@@ -2835,16 +2829,18 @@ class HiGlassComponent extends React.Component {
     }
 
     newTrack.position = position;
-
+    if (extent) {
+      newTrack.options.extent = extent;
+    }
     const trackInfo = this.getTrackInfo(newTrack.type);
 
     newTrack.width =
       trackInfo.defaultWidth ||
-      (trackInfo.defaultOptions && trackInfo.defaultOptions.minWidth) ||
+      trackInfo.defaultOptions?.minWidth ||
       this.minVerticalWidth;
     newTrack.height =
       trackInfo.defaultHeight ||
-      (trackInfo.defaultOptions && trackInfo.defaultOptions.minHeight) ||
+      trackInfo.defaultOptions?.minHeight ||
       this.minHorizontalHeight;
 
     const { tracks } = this.state.views[viewId];
@@ -3006,7 +3002,10 @@ class HiGlassComponent extends React.Component {
     totalTrackHeight += MARGIN_HEIGHT;
     const rowHeight = this.state.rowHeight + MARGIN_HEIGHT;
 
-    if (this.sizeMode !== SIZE_MODE_BOUNDED) {
+    if (
+      this.sizeMode !== SIZE_MODE_BOUNDED &&
+      this.sizeMode !== SIZE_MODE_BOUNDED_OVERFLOW
+    ) {
       view.layout.h = Math.ceil(totalTrackHeight / rowHeight);
     }
   }
@@ -3195,7 +3194,15 @@ class HiGlassComponent extends React.Component {
    *
    * Done in place.
    *
-   * @param track: A view with tracks.
+   * @param {string} viewUid
+   * @param {{
+   *   type: string;
+   *   uid: string;
+   *   fromViewUid: string;
+   *   registerViewportChanged: (string: trackId, listener: () => void) => void;
+   *   removeViewportChanged: (string: trackId) => void;
+   *   removeScalesChangedListener: (string: trackId) => void;
+   * }} track A view with tracks.
    */
   addCallbacks(viewUid, track) {
     const trackInfo = this.getTrackInfo(track.type);
@@ -3203,7 +3210,7 @@ class HiGlassComponent extends React.Component {
       track.type === 'viewport-projection-center' ||
       track.type === 'viewport-projection-horizontal' ||
       track.type === 'viewport-projection-vertical' ||
-      (trackInfo && trackInfo.projection)
+      trackInfo?.projection
     ) {
       const fromView = track.fromViewUid;
 
@@ -3399,7 +3406,7 @@ class HiGlassComponent extends React.Component {
     const locksByViewUid = {};
 
     for (const viewUid of dictKeys(locks)) {
-      let lockUid = locks[viewUid] && locks[viewUid].uid;
+      let lockUid = locks[viewUid]?.uid;
 
       if (!lockUid) {
         // otherwise, assign this locationLock its own uid
@@ -3425,23 +3432,18 @@ class HiGlassComponent extends React.Component {
     return { locksByViewUid, locksDict };
   }
 
-  getViewsAsJson() {
+  getViewsAsJson(views) {
     const newJson = JSON.parse(JSON.stringify(this.state.viewConfig));
-    newJson.views = Object.values(this.state.views).map((k) => {
+    newJson.views = Object.values(views || this.state.views).map((k) => {
       const newView = JSON.parse(JSON.stringify(k));
 
       visitPositionedTracks(newView.tracks, (track) => {
         if (track.server) {
-          const url = parse(track.server, {});
-
-          if (!url.hostname.length) {
-            // no hostname specified in the track source servers so we'll add
-            // the current URL's
-            const hostString = window.location.host;
-            const { protocol } = window.location;
-            const newUrl = `${protocol}//${hostString}${url.pathname}`;
-
-            track.server = newUrl;
+          if (!URL.canParse(track.server)) {
+            // Not a valid URL, so we'll extend the current one
+            const url = new URL(window.location);
+            url.pathname = track.server;
+            track.server = url.href;
           }
         }
 
@@ -3455,6 +3457,7 @@ class HiGlassComponent extends React.Component {
           // so the `projectionXDomain` field must be used.
           track.projectionXDomain = this.projectionXDomains[k.uid][track.uid];
         }
+
         if (
           (track.type === 'viewport-projection-center' ||
             track.type === 'viewport-projection-vertical') &&
@@ -3482,8 +3485,10 @@ class HiGlassComponent extends React.Component {
         delete track.datatype;
         delete track.maxWidth;
         delete track.datafile;
+        delete track.filetype;
         delete track.binsPerDimension;
         delete track.resolutions;
+        delete track.row_infos;
         delete track.aggregationModes;
       });
 
@@ -3639,7 +3644,7 @@ class HiGlassComponent extends React.Component {
    * User clicked on the "Add View" button. We'll duplicate the last
    * view.
    */
-  handleAddView(view) {
+  handleAddView(view, newViewParams, noUpdate) {
     const views = dictValues(this.state.views);
     const lastView = view;
 
@@ -3679,11 +3684,14 @@ class HiGlassComponent extends React.Component {
 
     const jsonString = JSON.stringify(lastView);
 
-    const newView = JSON.parse(jsonString); // ghetto copy
+    let newView = JSON.parse(jsonString); // ghetto copy
 
     newView.initialXDomain = this.xScales[newView.uid].domain();
     newView.initialYDomain = this.yScales[newView.uid].domain();
 
+    if (newViewParams) {
+      newView = { ...newView, ...newViewParams };
+    }
     // place this new view below all the others
 
     [[newView.layout.x, newView.layout.y]] = potentialPositions;
@@ -3692,47 +3700,38 @@ class HiGlassComponent extends React.Component {
     newView.uid = slugid.nice();
     newView.layout.i = newView.uid;
 
+    this.xScales[newView.uid] = scaleLinear().domain(newView.initialXDomain);
+    this.yScales[newView.uid] = scaleLinear().domain(newView.initialYDomain);
+
     visitPositionedTracks(newView.tracks, (track) => {
       this.addCallbacks(newView.uid, track);
     });
 
-    this.setState((prevState) => {
-      // eslint-disable-next-line no-shadow
-      const views = JSON.parse(JSON.stringify(prevState.views));
-      views[newView.uid] = newView;
-      return { views };
-    });
-  }
+    const createNewViews = (prevViews) => {
+      const _views = JSON.parse(JSON.stringify(prevViews));
+      _views[newView.uid] = newView;
 
-  handleSelectedAssemblyChanged(
-    viewUid,
-    newAssembly,
-    newAutocompleteId,
-    newServer,
-  ) {
-    /*
-     * A new assembly was selected in the GenomePositionSearchBox.
-     * Update the corresponding
-     * view's entry
-     *
-     * Arguments
-     * ---------
-     *
-     * viewUid: string
-     *      The uid of the view this genomepositionsearchbox belongs to
-     * newAssembly: string
-     *      The new assembly it should display coordinates for
-     *
-     * Returns
-     * -------
-     *
-     *  Nothing
-     */
-    const { views } = this.state;
+      return _views;
+    };
+
+    let newViews = null;
+
+    if (!noUpdate) {
+      this.setState((prevState) => {
+        newViews = createNewViews(prevState.views);
+
+        return {
+          views: newViews,
+        };
+      });
+    } else {
+      newViews = createNewViews(this.state.views);
+    }
 
-    views[viewUid].genomePositionSearchBox.chromInfoId = newAssembly;
-    views[viewUid].genomePositionSearchBox.autocompleteId = newAutocompleteId;
-    views[viewUid].genomePositionSearchBox.autocompleteServer = newServer;
+    return {
+      newViewUid: newView.uid,
+      newViewconf: this.getViewsAsJson(newViews),
+    };
   }
 
   createGenomePostionSearchBoxEntry(
@@ -3891,7 +3890,7 @@ class HiGlassComponent extends React.Component {
           if (
             otherTrack.type === 'heatmap' &&
             otherTrack.uid !== track.uid &&
-            otherTrack.options.extent !== 'lower-left'
+            otherTrack.options.extent === 'full'
           ) {
             // Automatically change the extent of the other track to
             // `lower-left``
@@ -3936,7 +3935,7 @@ class HiGlassComponent extends React.Component {
             if (
               otherTrack.type === 'heatmap' &&
               otherTrack.uid !== track.uid &&
-              otherTrack.options.extent !== 'upper-right'
+              otherTrack.options.extent === 'full'
             ) {
               // Automatically change the extent of the other track to
               // `upper-right``
@@ -4025,7 +4024,7 @@ class HiGlassComponent extends React.Component {
         'right',
         'bottom',
       ]) {
-        if (v.tracks && v.tracks.hasOwnProperty(trackOrientation)) {
+        if (trackOrientation in (v.tracks ?? {})) {
           // filter out invalid tracks
           v.tracks[trackOrientation] = v.tracks[trackOrientation].filter((t) =>
             this.isTrackValid(t, viewUidsSet),
@@ -4049,6 +4048,7 @@ class HiGlassComponent extends React.Component {
   processViewConfig(viewConfig) {
     let { views } = viewConfig;
     let viewsByUid = {};
+    let maxHeight = 1;
 
     if (!viewConfig.views || viewConfig.views.length === 0) {
       console.warn('No views provided in viewConfig');
@@ -4102,6 +4102,25 @@ class HiGlassComponent extends React.Component {
       }
 
       visitPositionedTracks(v.tracks, (track) => {
+        if (this.state?.views?.[v.uid]) {
+          // This whole song and dance is to ensure that if the higlass
+          // viewer is reinstantiated all of the tileset info meta that
+          // is stored with the track gets passed on.
+          // Necessary to make sure that the "Zoom Limit" option still
+          // functions.
+          const existingTrack = getTrackByUid(
+            this.state.views[v.uid].tracks,
+            track.uid,
+          );
+
+          if (existingTrack) {
+            track.maxZoom = existingTrack.maxZoom;
+            track.resolutions = existingTrack.resolutions;
+            track.binsPerDimension = existingTrack.binsPerDimension;
+            track.maxWidth = existingTrack.maxWidth;
+          }
+        }
+
         if (!track.uid) track.uid = slugid.nice();
 
         this.addCallbacks(v.uid, track);
@@ -4119,6 +4138,18 @@ class HiGlassComponent extends React.Component {
       } else {
         v.layout = this.generateViewLayout(v);
       }
+
+      maxHeight = Math.max(maxHeight, v.layout.y + v.layout.h);
+    });
+
+    // we want to scale up the height of each view so that the maxHeight
+    // is closer to 12
+    const TARGET_MAX_HEIGHT = 12;
+    const multiplier = Math.ceil(TARGET_MAX_HEIGHT / maxHeight);
+
+    views.forEach((v) => {
+      v.layout.h *= multiplier;
+      v.layout.y *= multiplier;
     });
 
     this.deserializeZoomLocks(viewConfig);
@@ -4152,8 +4183,12 @@ class HiGlassComponent extends React.Component {
     this.apiPublish('rangeSelection', range);
   }
 
-  offViewChange(listenerId) {
-    this.viewChangeListener.splice(listenerId, 1);
+  offViewChange(callback) {
+    const index = this.viewChangeListener.indexOf(callback);
+
+    if (index > -1) {
+      this.viewChangeListener.splice(index, 1);
+    }
   }
 
   onViewChange(callback) {
@@ -4161,9 +4196,8 @@ class HiGlassComponent extends React.Component {
   }
 
   triggerViewChange() {
-    this.viewChangeListener.forEach((callback) =>
-      callback(this.getViewsAsString()),
-    );
+    const viewsString = this.getViewsAsString();
+    this.viewChangeListener.forEach((callback) => callback(viewsString));
   }
 
   getGenomeLocation(viewId) {
@@ -4355,7 +4389,10 @@ class HiGlassComponent extends React.Component {
             (listenerId) => listenerId.indexOf(LOCATION_LISTENER_PREFIX) === 0,
           )
           .map((listenerId) =>
-            parseInt(listenerId.slice(LOCATION_LISTENER_PREFIX.length + 1), 10),
+            Number.parseInt(
+              listenerId.slice(LOCATION_LISTENER_PREFIX.length + 1),
+              10,
+            ),
           )
           .reduce((max, value) => Math.max(max, value), 0) + 1;
     }
@@ -4408,11 +4445,11 @@ class HiGlassComponent extends React.Component {
    * @param {object}  e  Event object.
    */
   mouseMoveHandler(e) {
-    if (!this.topDiv || this.state.modal) return;
+    if (!this.topDivRef.current || this.state.modal) return;
 
     const absX = e.clientX;
     const absY = e.clientY;
-    const relPos = pointer(e, this.topDiv);
+    const relPos = pointer(e, this.topDivRef.current);
     // We need to add the scrollTop
     relPos[1] += this.scrollTop;
     const hoveredTiledPlot = this.getTiledPlotAtPosition(absX, absY);
@@ -4450,15 +4487,13 @@ class HiGlassComponent extends React.Component {
     const evt = {
       x: relPos[0],
       y: relPos[1],
-      relTrackX:
-        hoveredTrack && hoveredTrack.flipText ? relTrackPos[1] : relTrackPos[0],
-      relTrackY:
-        hoveredTrack && hoveredTrack.flipText ? relTrackPos[0] : relTrackPos[1],
+      relTrackX: hoveredTrack?.flipText ? relTrackPos[1] : relTrackPos[0],
+      relTrackY: hoveredTrack?.flipText ? relTrackPos[0] : relTrackPos[1],
       dataX,
       dataY,
       // See below why we need these derived boolean values
-      isFrom2dTrack: !!(hoveredTrack && hoveredTrack.is2d),
-      isFromVerticalTrack: !!(hoveredTrack && hoveredTrack.flipText),
+      isFrom2dTrack: !!hoveredTrack?.is2d,
+      isFromVerticalTrack: !!hoveredTrack?.flipText,
       track: hoveredTrack,
       origEvt: e,
       sourceUid: this.uid,
@@ -4536,13 +4571,12 @@ class HiGlassComponent extends React.Component {
   showHoverMenu(evt) {
     // each track should have a function that returns an HTML representation
     // of the data at a give position
-    const mouseOverHtml =
-      evt.track && evt.track.getMouseOverHtml
-        ? evt.track.getMouseOverHtml(evt.relTrackX, evt.relTrackY)
-        : '';
+    const mouseOverHtml = evt.track?.getMouseOverHtml
+      ? evt.track.getMouseOverHtml(evt.relTrackX, evt.relTrackY)
+      : '';
 
     if (evt.track !== this.prevMouseHoverTrack) {
-      if (this.prevMouseHoverTrack && this.prevMouseHoverTrack.stopHover) {
+      if (this.prevMouseHoverTrack?.stopHover) {
         this.prevMouseHoverTrack.stopHover();
       }
     }
@@ -4551,7 +4585,7 @@ class HiGlassComponent extends React.Component {
 
     if (this.zooming) return;
 
-    const data = mouseOverHtml && mouseOverHtml.length ? [1] : [];
+    const data = mouseOverHtml?.length ? [1] : [];
 
     // try to select the mouseover div
     let mouseOverDiv = select('body')
@@ -4639,7 +4673,7 @@ class HiGlassComponent extends React.Component {
 
     const hoveredTiledPlot = this.getTiledPlotAtPosition(absX, absY);
 
-    const relPos = pointer(nativeEvent, this.topDiv);
+    const relPos = pointer(nativeEvent, this.topDivRef.current);
     relPos[1] += this.scrollTop;
 
     const hoveredTracks = hoveredTiledPlot
@@ -4663,10 +4697,8 @@ class HiGlassComponent extends React.Component {
         ]
       : relPos;
 
-    const relTrackX =
-      hoveredTrack && hoveredTrack.flipText ? relTrackPos[1] : relTrackPos[0];
-    const relTrackY =
-      hoveredTrack && hoveredTrack.flipText ? relTrackPos[0] : relTrackPos[1];
+    const relTrackX = hoveredTrack?.flipText ? relTrackPos[1] : relTrackPos[0];
+    const relTrackY = hoveredTrack?.flipText ? relTrackPos[0] : relTrackPos[1];
 
     for (const track of this.iterateOverTracks()) {
       const trackObj = getTrackObjById(
@@ -4765,7 +4797,7 @@ class HiGlassComponent extends React.Component {
   mouseDownHandler(evt) {}
 
   onScrollHandler() {
-    if (this.props.options.sizeMode !== SIZE_MODE_SCROLL) return;
+    if (this.sizeMode !== SIZE_MODE_SCROLL) return;
     this.scrollTop = this.scrollContainer.scrollTop;
     this.pixiStage.y = -this.scrollTop;
     this.pubSub.publish('app.scroll', this.scrollTop);
@@ -4817,17 +4849,18 @@ class HiGlassComponent extends React.Component {
       this.props.zoomFixed ||
       this.props.options.zoomFixed ||
       this.state.viewConfig.zoomFixed ||
-      this.props.options.sizeMode === SIZE_MODE_SCROLL ||
-      (view && view.zoomFixed)
+      this.sizeMode === SIZE_MODE_SCROLL ||
+      view?.zoomFixed
     );
   }
 
   /**
    * Handle trackDimensionsModified events
-   * settings.viewId = id of the view
-   * settings.trackId = id of the track
-   * settings.height = new height of the track or undefined if current height should remain
-   * settings.width = new width of the track or undefined if current width should remain
+   * @param {Object} settings
+   * @param {string} settings.viewId = id of the view
+   * @param {string} settings.trackId = id of the track
+   * @param {number} settings.height = new height of the track or undefined if current height should remain
+   * @param {nmber} settings.width = new width of the track or undefined if current width should remain
    */
   trackDimensionsModifiedHandler(settings) {
     const view = this.state.views[settings.viewId];
@@ -4853,15 +4886,12 @@ class HiGlassComponent extends React.Component {
   }
 
   wheelHandler(evt) {
-    if (this.state.modal || this.props.options.sizeMode === SIZE_MODE_SCROLL)
-      return;
+    if (this.state.modal || this.sizeMode === SIZE_MODE_SCROLL) return;
 
     // The event forwarder wasn't written for React's SyntheticEvent
     const nativeEvent = evt.nativeEvent || evt;
 
-    const isTargetCanvas = evt.target === this.canvasElement;
-
-    if (!hasParent(nativeEvent.target, this.topDiv)) {
+    if (!hasParent(nativeEvent.target, this.topDivRef.current)) {
       // ignore events that don't come from within the
       // HiGlass container
       return;
@@ -4900,14 +4930,8 @@ class HiGlassComponent extends React.Component {
       const evtToPublish = {
         x: relPos[0],
         y: relPos[1],
-        relTrackX:
-          hoveredTrack && hoveredTrack.flipText
-            ? relTrackPos[1]
-            : relTrackPos[0],
-        relTrackY:
-          hoveredTrack && hoveredTrack.flipText
-            ? relTrackPos[0]
-            : relTrackPos[1],
+        relTrackX: hoveredTrack?.flipText ? relTrackPos[1] : relTrackPos[0],
+        relTrackY: hoveredTrack?.flipText ? relTrackPos[0] : relTrackPos[1],
         track: hoveredTrack,
         origEvt: nativeEvent,
         sourceUid: this.uid,
@@ -4918,6 +4942,7 @@ class HiGlassComponent extends React.Component {
       this.apiPublish('wheel', evtToPublish);
     }
 
+    const isTargetCanvas = evt.target === this.canvasElement;
     if (nativeEvent.forwarded || isTargetCanvas) {
       evt.stopPropagation();
       evt.preventDefault();
@@ -4941,6 +4966,24 @@ class HiGlassComponent extends React.Component {
     }
   }
 
+  /** Convert a viewUid to a view name so that when we create
+   * viewport projects, we can show which view they refer to.
+   * The name is usually a single letter like 'A'
+   *  The view's name will also be visible in the header. */
+  viewUidToName(viewUid) {
+    const views = Object.keys(this.state.views);
+
+    for (let i = 0; i < views.length; i++) {
+      if (views[i] === viewUid) {
+        // Starting from A and then onwards. God help us if there's
+        // more than 52 views
+        return String.fromCharCode(65 + i);
+      }
+    }
+
+    return 'UU';
+  }
+
   render() {
     this.tiledAreasDivs = {};
     this.tiledAreas = <div className={styles['tiled-area']} />;
@@ -4988,24 +5031,32 @@ class HiGlassComponent extends React.Component {
               this.tiledPlots[view.uid] = c;
             }}
             // Custom props
+            addTrackExtent={
+              this.state.addTrackPositionView === view.uid
+                ? this.state.addTrackExtent
+                : null
+            }
             addTrackPosition={
               this.state.addTrackPositionView === view.uid
                 ? this.state.addTrackPosition
                 : null
             }
             addTrackPositionMenuPosition={addTrackPositionMenuPosition}
+            apiPublish={this.apiPublish}
             canvasElement={this.state.canvasElement}
             chooseTrackHandler={
               this.state.chooseTrackHandler
-                ? (trackId) => this.state.chooseTrackHandler(view.uid, trackId)
+                ? (trackId, evt) =>
+                    this.state.chooseTrackHandler(view.uid, trackId, evt)
                 : null
             }
             customDialog={this.state.customDialog}
             closeCustomDialog={() => this.closeCustomDialog()}
             chromInfoPath={view.chromInfoPath}
             disableTrackMenu={this.isTrackMenuDisabled()}
-            draggingHappening={this.state.draggingHappening !== null}
+            draggingHappening={this.state.draggingHappening}
             editable={this.isEditable()}
+            genomePositionSearchBox={this.genomePositionSearchBoxes[view.uid]}
             getLockGroupExtrema={(uid) =>
               this.getLockGroupExtrema(view.uid, uid)
             }
@@ -5036,20 +5087,30 @@ class HiGlassComponent extends React.Component {
             }
             onNoTrackAdded={this.handleNoTrackAdded.bind(this)}
             onRangeSelection={this.rangeSelectionHandler.bind(this)}
-            onResizeTrack={this.triggerViewChangeDb}
+            onResizeTrack={() => {
+              this.adjustLayoutToTrackSizes(view);
+              this.triggerViewChangeDb();
+            }}
             onScalesChanged={(x, y) => this.handleScalesChanged(view.uid, x, y)}
             onTrackOptionsChanged={(trackId, options) =>
               this.handleTrackOptionsChanged(view.uid, trackId, options)
             }
             onTrackPositionChosen={this.handleTrackPositionChosen.bind(this)}
-            onTracksAdded={(newTracks, position, host) =>
-              this.handleTracksAdded(view.uid, newTracks, position, host)
+            onTracksAdded={(newTracks, position, extent, host) =>
+              this.handleTracksAdded(
+                view.uid,
+                newTracks,
+                position,
+                extent,
+                host,
+              )
             }
             onUnlockValueScale={(uid) =>
               this.handleUnlockValueScale(view.uid, uid)
             }
             onValueScaleChanged={(uid) => this.syncValueScales(view.uid, uid)}
             overlays={view.overlays}
+            overTrackChooser={this.state.overTrackChooser}
             paddingBottom={this.viewPaddingBottom}
             paddingLeft={this.viewPaddingLeft}
             paddingRight={this.viewPaddingRight}
@@ -5069,6 +5130,9 @@ class HiGlassComponent extends React.Component {
             setCentersFunction={(c) => {
               this.setCenters[view.uid] = c;
             }}
+            setOverTrackChooser={(val) =>
+              this.setState({ overTrackChooser: val })
+            }
             svgElement={this.state.svgElement}
             tracks={view.tracks}
             trackSourceServers={this.state.viewConfig.trackSourceServers}
@@ -5086,62 +5150,67 @@ class HiGlassComponent extends React.Component {
           />
         );
 
-        const getGenomePositionSearchBox = (isFocused, onFocus) => {
-          if (!view.genomePositionSearchBox) return null;
-
-          return (
-            <GenomePositionSearchBox
-              // Reserved props
-              key={`gpsb${view.uid}`}
-              ref={(c) => {
-                this.genomePositionSearchBoxes[view.uid] = c;
-              }}
-              // Custom props
-              autocompleteId={view.genomePositionSearchBox.autocompleteId}
-              autocompleteServer={
-                view.genomePositionSearchBox.autocompleteServer
-              }
-              chromInfoId={view.genomePositionSearchBox.chromInfoId}
-              chromInfoPath={view.genomePositionSearchBox.chromInfoPath}
-              chromInfoServer={view.genomePositionSearchBox.chromInfoServer}
-              hideAvailableAssemblies={
-                view.genomePositionSearchBox.hideAvailableAssemblies
-              }
-              isFocused={isFocused}
-              // the chromInfoId is either specified in the viewconfig or guessed based on
-              // the visible tracks (see createGenomePositionSearchBoxEntry)
-              onFocus={onFocus}
-              onGeneSearch={this.geneSearchHandler.bind(this)}
-              onSelectedAssemblyChanged={(x, y, server) =>
-                this.handleSelectedAssemblyChanged(view.uid, x, y, server)
-              }
-              registerViewportChangedListener={(listener) =>
-                this.addScalesChangedListener(view.uid, view.uid, listener)
-              }
-              removeViewportChangedListener={() =>
-                this.removeScalesChangedListener(view.uid, view.uid)
-              }
-              setCenters={(centerX, centerY, k, animateTime) =>
-                this.setCenters[view.uid](
-                  centerX,
-                  centerY,
-                  k,
-                  false,
-                  animateTime,
-                )
-              }
-              trackSourceServers={this.state.viewConfig.trackSourceServers}
-              twoD={
-                !!(
-                  view.tracks.left.length ||
-                  view.tracks.right.length ||
-                  view.tracks.center.length
-                )
-              }
-            />
-          );
-        };
+        const looseTracks = positionedTracksToAllTracks(view.tracks);
+        const annotationTracks = looseTracks.filter(
+          (x) =>
+            x.type === 'horizontal-gene-annotations' ||
+            x.type === 'vertical-gene-annotations' ||
+            x.type === 'gene-annotations',
+        );
+        const chromSizesTracks = looseTracks.filter(
+          (x) =>
+            x.type === 'horizontal-chromosome-labels' ||
+            x.type === 'vertical-chromosome-labels' ||
+            x.type === 'chromosome-labels',
+        );
 
+        const getGenomePositionSearchBox = (isFocused, onFocus) => (
+          <GenomePositionSearchBox
+            // Reserved props
+            key={`gpsb${view.uid}`}
+            ref={(c) => {
+              this.genomePositionSearchBoxes[view.uid] = c;
+            }}
+            // Custom props
+            autocompleteId={
+              annotationTracks.length === 1
+                ? annotationTracks[0].tilesetUid
+                : null
+            }
+            autocompleteServer={
+              annotationTracks.length === 1 ? annotationTracks[0].server : null
+            }
+            chromInfoId={
+              chromSizesTracks.length ? chromSizesTracks[0].tilesetUid : null
+            }
+            chromInfoServer={
+              chromSizesTracks.length ? chromSizesTracks[0].server : null
+            }
+            isFocused={isFocused}
+            // the chromInfoId is either specified in the viewconfig or guessed based on
+            // the visible tracks (see createGenomePositionSearchBoxEntry)
+            onFocus={onFocus}
+            registerViewportChangedListener={(listener) =>
+              this.addScalesChangedListener(view.uid, view.uid, listener)
+            }
+            removeViewportChangedListener={() =>
+              this.removeScalesChangedListener(view.uid, view.uid)
+            }
+            setCenters={(centerX, centerY, k, animateTime) =>
+              this.setCenters[view.uid](centerX, centerY, k, false, animateTime)
+            }
+            trackSourceServers={this.state.viewConfig.trackSourceServers}
+            twoD={true}
+            error={
+              (chromSizesTracks.length === 0 &&
+                'no chromosome track present') ||
+              (chromSizesTracks.length >= 2 &&
+                'multiple chromosome tracks present') ||
+              (annotationTracks.length >= 2 &&
+                'multiple annotation tracks present')
+            }
+          />
+        );
         const multiTrackHeader =
           this.isEditable() &&
           !this.isViewHeaderDisabled() &&
@@ -5151,10 +5220,7 @@ class HiGlassComponent extends React.Component {
                 this.viewHeaders[view.uid] = c;
               }}
               getGenomePositionSearchBox={getGenomePositionSearchBox}
-              isGenomePositionSearchBoxVisible={
-                view.genomePositionSearchBox &&
-                view.genomePositionSearchBox.visible
-              }
+              isGenomePositionSearchBoxVisible={true}
               mouseTool={this.state.mouseTool}
               onAddView={() => this.handleAddView(view)}
               onClearView={() => this.handleClearView(view.uid)}
@@ -5194,8 +5260,8 @@ class HiGlassComponent extends React.Component {
               onTogglePositionSearchBox={this.handleTogglePositionSearchBox.bind(
                 this,
               )}
-              onTrackPositionChosen={(position) =>
-                this.handleTrackPositionChosen(view.uid, position)
+              onTrackPositionChosen={(position, extent) =>
+                this.handleTrackPositionChosen(view.uid, position, extent)
               }
               onUnlockLocation={(uid) =>
                 this.handleUnlock(uid, this.locationLocks)
@@ -5229,16 +5295,17 @@ class HiGlassComponent extends React.Component {
           ) : null;
 
         return (
-          <div
-            key={view.uid}
-            ref={(c) => {
-              this.tiledAreasDivs[view.uid] = c;
-            }}
-            className={styles['tiled-area']}
-          >
-            {multiTrackHeader}
-            {tiledPlot}
-            {overlay}
+          <div key={view.uid}>
+            <div
+              ref={(c) => {
+                this.tiledAreasDivs[view.uid] = c;
+              }}
+              className={styles['tiled-area']}
+            >
+              {multiTrackHeader}
+              {tiledPlot}
+              {overlay}
+            </div>
           </div>
         );
       });
@@ -5307,14 +5374,13 @@ class HiGlassComponent extends React.Component {
     return (
       <div
         key={this.uid}
-        ref={(c) => {
-          this.topDiv = c;
-        }}
-        className={clsx('higlass', {
-          'higlass-dark-theme': this.theme === THEME_DARK,
-          'higlass-container-overflow':
-            this.props.options.sizeMode === SIZE_MODE_OVERFLOW ||
-            this.props.options.sizeMode === SIZE_MODE_SCROLL,
+        ref={this.topDivRef}
+        className={clsx('higlass', styles.higlass, {
+          [styles['higlass-dark-theme']]: this.theme === THEME_DARK,
+          [styles['higlass-container-overflow']]:
+            this.sizeMode === SIZE_MODE_OVERFLOW ||
+            this.sizeMode === SIZE_MODE_BOUNDED_OVERFLOW ||
+            this.sizeMode === SIZE_MODE_SCROLL,
         })}
         onMouseLeave={this.onMouseLeaveHandlerBound}
         onMouseMove={this.mouseMoveHandlerBound}
@@ -5322,55 +5388,60 @@ class HiGlassComponent extends React.Component {
         <PubSubProvider value={this.pubSub}>
           <ModalProvider value={this.modal}>
             <ThemeProvider value={this.theme}>
-              {this.state.modal}
-              <canvas
-                key={this.uid}
-                ref={(c) => {
-                  this.canvasElement = c;
-                }}
-                onClick={this.canvasClickHandlerBound}
-                className={styles['higlass-canvas']}
-              />
-              <div
-                ref={(c) => {
-                  this.scrollContainer = c;
-                }}
-                className={clsx('higlass-scroll-container', {
-                  'higlass-scroll-container-overflow':
-                    this.props.options.sizeMode === SIZE_MODE_OVERFLOW,
-                  'higlass-scroll-container-scroll':
-                    this.props.options.sizeMode === SIZE_MODE_SCROLL,
-                })}
-                onScroll={this.onScrollHandlerBound}
+              <HiGlassComponentContext.Provider
+                value={{ viewUidToName: this.viewUidToNameBound }}
               >
+                {this.state.modal}
+                <canvas
+                  key={this.uid}
+                  ref={(c) => {
+                    this.canvasElement = c;
+                  }}
+                  onClick={this.canvasClickHandlerBound}
+                  className={styles['higlass-canvas']}
+                />
                 <div
                   ref={(c) => {
-                    this.divDrawingSurface = c;
+                    this.scrollContainer = c;
                   }}
-                  className={clsx(
-                    'higlass-drawing-surface',
-                    styles['higlass-drawing-surface'],
-                  )}
+                  className={clsx('higlass-scroll-container', {
+                    [styles['higlass-scroll-container-overflow']]:
+                      this.sizeMode === SIZE_MODE_OVERFLOW ||
+                      this.sizeMode === SIZE_MODE_BOUNDED_OVERFLOW,
+                    [styles['higlass-scroll-container-scroll']]:
+                      this.sizeMode === SIZE_MODE_SCROLL,
+                  })}
+                  onScroll={this.onScrollHandlerBound}
                 >
-                  {gridLayout}
+                  <div
+                    ref={(c) => {
+                      this.divDrawingSurface = c;
+                    }}
+                    className={clsx(
+                      'higlass-drawing-surface',
+                      styles['higlass-drawing-surface'],
+                    )}
+                  >
+                    {gridLayout}
+                  </div>
+                  <svg
+                    ref={(c) => {
+                      this.svgElement = c;
+                    }}
+                    style={{
+                      // inline the styles so they aren't overriden by other css
+                      // on the web page
+                      position: 'absolute',
+                      width: '100%',
+                      height: '100%',
+                      left: 0,
+                      top: 0,
+                      pointerEvents: 'none',
+                    }}
+                    className={styles['higlass-svg']}
+                  />
                 </div>
-                <svg
-                  ref={(c) => {
-                    this.svgElement = c;
-                  }}
-                  className={styles['higlass-svg']}
-                  style={{
-                    // inline the styles so they aren't overriden by other css
-                    // on the web page
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    left: 0,
-                    top: 0,
-                    pointerEvents: 'none',
-                  }}
-                />
-              </div>
+              </HiGlassComponentContext.Provider>
             </ThemeProvider>
           </ModalProvider>
         </PubSubProvider>