@jbrowse/plugin-linear-genome-view 1.6.9 → 1.7.3

package/dist/LinearGenomeView/components/SearchResultsDialog.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SearchResultsDialog;
+exports.useStyles = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _util = require("@jbrowse/core/util");
+
+var _core = require("@material-ui/core");
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    dialogContent: {
+      width: '80em'
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  };
+});
+exports.useStyles = useStyles;
+
+function SearchResultsDialog(_ref) {
+  var _model$searchResults;
+
+  var model = _ref.model,
+      optAssemblyName = _ref.optAssemblyName,
+      handleClose = _ref.handleClose;
+  var classes = useStyles();
+  var session = (0, _util.getSession)(model);
+
+  var _getEnv = (0, _mobxStateTree.getEnv)(session),
+      pluginManager = _getEnv.pluginManager;
+
+  var assemblyManager = session.assemblyManager;
+  var assemblyName = optAssemblyName;
+
+  if (model.displayedRegions.length > 0) {
+    var _model$displayedRegio;
+
+    assemblyName = (_model$displayedRegio = model.displayedRegions[0]) === null || _model$displayedRegio === void 0 ? void 0 : _model$displayedRegio.assemblyName;
+  }
+
+  if (!assemblyName) {
+    throw new Error("Assembly name not found");
+  }
+
+  var assembly = assemblyManager.get(assemblyName);
+
+  if (!assembly) {
+    throw new Error("assembly ".concat(assemblyName, " not found"));
+  }
+
+  if (!assembly.regions) {
+    throw new Error("assembly ".concat(assemblyName, " regions not loaded"));
+  }
+
+  var assemblyRegions = assembly.regions;
+
+  function handleClick(location) {
+    try {
+      var newRegion = assemblyRegions.find(function (region) {
+        return location === region.refName;
+      });
+
+      if (newRegion) {
+        model.setDisplayedRegions([newRegion]); // we use showAllRegions after setDisplayedRegions to make the entire
+        // region visible, xref #1703
+
+        model.showAllRegions();
+      } else {
+        model.navToLocString(location, assemblyName);
+      }
+    } catch (e) {
+      console.warn(e);
+      session.notify("".concat(e), 'warning');
+    }
+  }
+
+  function getTrackName(trackId) {
+    if (trackId) {
+      var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
+      var configuration = (0, _mobxStateTree.resolveIdentifier)(trackConfigSchema, (0, _mobxStateTree.getRoot)(model), trackId);
+
+      if (configuration) {
+        var _configuration$name;
+
+        return (_configuration$name = configuration.name) === null || _configuration$name === void 0 ? void 0 : _configuration$name.value;
+      }
+    }
+
+    return '';
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+    open: true,
+    maxWidth: "xl",
+    onClose: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, null, "Search results", handleClose ? /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    "data-testid": "close-resultsDialog",
+    className: classes.closeButton,
+    onClick: function onClick() {
+      handleClose();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)) : null), /*#__PURE__*/_react["default"].createElement(_core.Divider, null), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, !((_model$searchResults = model.searchResults) !== null && _model$searchResults !== void 0 && _model$searchResults.length) ? /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "No results found for ", /*#__PURE__*/_react["default"].createElement("b", null, model.searchQuery)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "Showing results for ", /*#__PURE__*/_react["default"].createElement("b", null, model.searchQuery)), /*#__PURE__*/_react["default"].createElement(_core.TableContainer, {
+    component: _core.Paper
+  }, /*#__PURE__*/_react["default"].createElement(_core.Table, null, /*#__PURE__*/_react["default"].createElement(_core.TableHead, null, /*#__PURE__*/_react["default"].createElement(_core.TableRow, null, /*#__PURE__*/_react["default"].createElement(_core.TableCell, null, "Name"), /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
+    align: "right"
+  }, "Location"), /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
+    align: "right"
+  }, "Track"), /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
+    align: "right"
+  }))), /*#__PURE__*/_react["default"].createElement(_core.TableBody, null, model.searchResults.map(function (result) {
+    return /*#__PURE__*/_react["default"].createElement(_core.TableRow, {
+      key: "".concat(result.getId())
+    }, /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
+      component: "th",
+      scope: "row"
+    }, result.getLabel()), /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
+      align: "right"
+    }, result.getLocation()), /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
+      align: "right"
+    }, getTrackName(result.getTrackId()) || 'N/A'), /*#__PURE__*/_react["default"].createElement(_core.TableCell, {
+      align: "right"
+    }, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+      onClick: function onClick() {
+        handleClick(result.getLocation());
+        var resultTrackId = result.getTrackId();
+
+        if (resultTrackId) {
+          model.showTrack(resultTrackId);
+        }
+
+        handleClose();
+      },
+      disabled: !getTrackName(result.getTrackId()),
+      color: "primary",
+      variant: "contained"
+    }, "Go")));
+  })))))), /*#__PURE__*/_react["default"].createElement(_core.Divider, null), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: function onClick() {
+      return handleClose();
+    },
+    color: "primary"
+  }, "Cancel")));
+}

package/dist/LinearGenomeView/components/SequenceDialog.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { LinearGenomeViewModel } from '..';
-declare function SequenceDialog({ model, handleClose, }: {
-    model: LinearGenomeViewModel;
-    handleClose: () => void;
-}): JSX.Element;
-declare const _default: typeof SequenceDialog;
-export default _default;
+/// <reference types="react" />
+import { LinearGenomeViewModel } from '..';
+declare function SequenceDialog({ model, handleClose, }: {
+    model: LinearGenomeViewModel;
+    handleClose: () => void;
+}): JSX.Element;
+declare const _default: typeof SequenceDialog;
+export default _default;

package/dist/LinearGenomeView/components/SequenceDialog.js

@@ -0,0 +1,304 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _mobxReact = require("mobx-react");
+
+var _fileSaver = require("file-saver");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
+
+var _util = require("@jbrowse/core/util");
+
+var _formatFastaStrings = require("@jbrowse/core/util/formatFastaStrings");
+
+var _Icons = require("@jbrowse/core/ui/Icons");
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _GetApp = _interopRequireDefault(require("@material-ui/icons/GetApp"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// icons
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    loadingMessage: {
+      padding: theme.spacing(5)
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    },
+    dialogContent: {
+      width: '80em'
+    },
+    textAreaFont: {
+      fontFamily: 'Courier New'
+    }
+  };
+});
+
+/**
+ * Fetches and returns a list features for a given list of regions
+ */
+function fetchSequence(_x, _x2, _x3) {
+  return _fetchSequence.apply(this, arguments);
+}
+
+function _fetchSequence() {
+  _fetchSequence = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(model, regions, signal) {
+    var session, leftOffset, rightOffset, rpcManager, assemblyManager, assemblyName, assembly, adapterConfig, sessionId, chunks;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            session = (0, _util.getSession)(model);
+            leftOffset = model.leftOffset, rightOffset = model.rightOffset;
+
+            if (!(!leftOffset || !rightOffset)) {
+              _context2.next = 4;
+              break;
+            }
+
+            throw new Error('no offsets on model to use for range');
+
+          case 4:
+            if (!(leftOffset.assemblyName !== rightOffset.assemblyName)) {
+              _context2.next = 6;
+              break;
+            }
+
+            throw new Error('not able to fetch sequences from multiple assemblies');
+
+          case 6:
+            rpcManager = session.rpcManager, assemblyManager = session.assemblyManager;
+            assemblyName = leftOffset.assemblyName || rightOffset.assemblyName || '';
+            assembly = assemblyManager.get(assemblyName);
+
+            if (assembly) {
+              _context2.next = 11;
+              break;
+            }
+
+            throw new Error("assembly ".concat(assemblyName, " not found"));
+
+          case 11:
+            adapterConfig = (0, _configuration.getConf)(assembly, ['sequence', 'adapter']);
+            sessionId = 'getSequence';
+            _context2.next = 15;
+            return Promise.all(regions.map(function (region) {
+              return rpcManager.call(sessionId, 'CoreGetFeatures', {
+                adapterConfig: adapterConfig,
+                region: region,
+                sessionId: sessionId,
+                signal: signal
+              });
+            }));
+
+          case 15:
+            chunks = _context2.sent;
+            return _context2.abrupt("return", chunks.map(function (chunk) {
+              return chunk[0];
+            }));
+
+          case 17:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _fetchSequence.apply(this, arguments);
+}
+
+function SequenceDialog(_ref) {
+  var model = _ref.model,
+      handleClose = _ref.handleClose;
+  var classes = useStyles();
+  var session = (0, _util.getSession)(model);
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      sequence = _useState4[0],
+      setSequence = _useState4[1];
+
+  var loading = Boolean(sequence === undefined);
+  var leftOffset = model.leftOffset,
+      rightOffset = model.rightOffset; // avoid infinite looping of useEffect
+  // random note: the current selected region can't be a computed because it
+  // uses action on base1dview even though it's on the ephemeral base1dview
+
+  var regionsSelected = (0, _react.useMemo)(function () {
+    return model.getSelectedRegions(leftOffset, rightOffset);
+  }, [model, leftOffset, rightOffset]);
+  (0, _react.useEffect)(function () {
+    var active = true;
+    var controller = new AbortController();
+    (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var chunks;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (!(regionsSelected.length > 0)) {
+                _context.next = 8;
+                break;
+              }
+
+              _context.next = 4;
+              return fetchSequence(model, regionsSelected, controller.signal);
+
+            case 4:
+              chunks = _context.sent;
+
+              if (active) {
+                setSequence((0, _formatFastaStrings.formatSeqFasta)(chunks.filter(function (f) {
+                  return !!f;
+                }).map(function (chunk) {
+                  var chunkSeq = chunk.get('seq');
+                  var chunkRefName = chunk.get('refName');
+                  var chunkStart = chunk.get('start') + 1;
+                  var chunkEnd = chunk.get('end');
+                  var chunkLocstring = "".concat(chunkRefName, ":").concat(chunkStart, "-").concat(chunkEnd);
+
+                  if ((chunkSeq === null || chunkSeq === void 0 ? void 0 : chunkSeq.length) !== chunkEnd - chunkStart + 1) {
+                    throw new Error("".concat(chunkLocstring, " returned ").concat(chunkSeq.length.toLocaleString(), " bases, but should have returned ").concat((chunkEnd - chunkStart).toLocaleString()));
+                  }
+
+                  return {
+                    header: chunkLocstring,
+                    seq: chunkSeq
+                  };
+                })));
+              }
+
+              _context.next = 9;
+              break;
+
+            case 8:
+              throw new Error('Selected region is out of bounds');
+
+            case 9:
+              _context.next = 15;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](0);
+              console.error(_context.t0);
+
+              if (active) {
+                setError(_context.t0);
+              }
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 11]]);
+    }))();
+    return function () {
+      controller.abort();
+      active = false;
+    };
+  }, [model, session, regionsSelected, setSequence]);
+  var sequenceTooLarge = sequence ? sequence.length > 1000000 : false;
+  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+    "data-testid": "sequence-dialog",
+    maxWidth: "xl",
+    open: true,
+    onClose: handleClose,
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description"
+  }, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, {
+    id: "alert-dialog-title"
+  }, "Reference sequence", handleClose ? /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    "data-testid": "close-seqDialog",
+    className: classes.closeButton,
+    onClick: function onClick() {
+      handleClose();
+      model.setOffsets(undefined, undefined);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)) : null), /*#__PURE__*/_react["default"].createElement(_core.Divider, null), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, error ? /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    color: "error"
+  }, "".concat(error)) : null, loading && !error ? /*#__PURE__*/_react["default"].createElement(_core.Container, null, "Retrieving reference sequence...", /*#__PURE__*/_react["default"].createElement(_core.CircularProgress, {
+    style: {
+      marginLeft: 10
+    },
+    size: 20,
+    disableShrink: true
+  })) : null, /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    "data-testid": "rubberband-sequence",
+    variant: "outlined",
+    multiline: true,
+    minRows: 5,
+    disabled: sequenceTooLarge,
+    className: classes.dialogContent,
+    fullWidth: true,
+    value: sequenceTooLarge ? 'Reference sequence too large to display, use the download FASTA button' : sequence,
+    InputProps: {
+      readOnly: true,
+      classes: {
+        input: classes.textAreaFont
+      }
+    }
+  })), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: function onClick() {
+      (0, _copyToClipboard["default"])(sequence || '');
+      session.notify('Copied to clipboard', 'success');
+    },
+    disabled: loading || !!error || sequenceTooLarge,
+    color: "primary",
+    startIcon: /*#__PURE__*/_react["default"].createElement(_Icons.ContentCopy, null)
+  }, "Copy to clipboard"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: function onClick() {
+      var seqFastaFile = new Blob([sequence || ''], {
+        type: 'text/x-fasta;charset=utf-8'
+      });
+      (0, _fileSaver.saveAs)(seqFastaFile, 'jbrowse_ref_seq.fa');
+    },
+    disabled: loading || !!error,
+    color: "primary",
+    startIcon: /*#__PURE__*/_react["default"].createElement(_GetApp["default"], null)
+  }, "Download FASTA"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: handleClose,
+    color: "primary",
+    autoFocus: true
+  }, "Close")));
+}
+
+var _default = (0, _mobxReact.observer)(SequenceDialog);
+
+exports["default"] = _default;

package/dist/LinearGenomeView/components/TrackContainer.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
-import { LinearGenomeViewModel } from '..';
-declare function TrackContainer({ model, track, }: {
-    model: LinearGenomeViewModel;
-    track: BaseTrackModel;
-}): JSX.Element;
-declare const _default: typeof TrackContainer;
-export default _default;
+/// <reference types="react" />
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import { LinearGenomeViewModel } from '..';
+declare function TrackContainer({ model, track, }: {
+    model: LinearGenomeViewModel;
+    track: BaseTrackModel;
+}): JSX.Element;
+declare const _default: typeof TrackContainer;
+export default _default;

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _ui = require("@jbrowse/core/ui");
+
+var _util = require("@jbrowse/core/util");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ = require("..");
+
+var _TrackLabel = _interopRequireDefault(require("./TrackLabel"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      marginTop: 2
+    },
+    resizeHandle: {
+      height: _.RESIZE_HANDLE_HEIGHT,
+      boxSizing: 'border-box',
+      position: 'relative',
+      zIndex: 2
+    },
+    overlay: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      zIndex: 3,
+      borderRadius: theme.shape.borderRadius
+    },
+    trackLabel: {
+      zIndex: 3
+    },
+    // aligns with block bounderies. check for example the breakpoint split view
+    // demo to see if features align if wanting to change things
+    renderingComponentContainer: {
+      position: 'absolute',
+      // -1 offset because of the 1px border of the Paper
+      left: -1,
+      height: '100%',
+      width: '100%'
+    },
+    trackLabelInline: {
+      position: 'relative',
+      display: 'inline-block'
+    },
+    trackLabelOverlap: {
+      position: 'absolute'
+    },
+    trackRenderingContainer: {
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      whiteSpace: 'nowrap',
+      position: 'relative',
+      background: 'none',
+      zIndex: 2
+    }
+  };
+});
+var TrackContainerLabel = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model,
+      view = _ref.view;
+  var classes = useStyles();
+  var labelStyle = view.trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline;
+  return view.trackLabels !== 'hidden' ? /*#__PURE__*/_react["default"].createElement(_TrackLabel["default"], {
+    track: model,
+    className: (0, _clsx["default"])(classes.trackLabel, labelStyle)
+  }) : null;
+});
+
+function TrackContainer(_ref2) {
+  var model = _ref2.model,
+      track = _ref2.track;
+  var classes = useStyles();
+  var display = track.displays[0];
+  var horizontalScroll = model.horizontalScroll,
+      draggingTrackId = model.draggingTrackId,
+      moveTrack = model.moveTrack;
+  var height = display.height;
+  var trackId = (0, _configuration.getConf)(track, 'trackId');
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      model.trackRefs[trackId] = ref.current;
+    }
+
+    return function () {
+      delete model.trackRefs[trackId];
+    };
+  }, [model.trackRefs, trackId]);
+
+  function onDragEnter() {
+    if (draggingTrackId !== undefined && (0, _mobxStateTree.isAlive)(display) && draggingTrackId !== display.id) {
+      moveTrack(draggingTrackId, track.id);
+    }
+  }
+
+  var debouncedOnDragEnter = (0, _util.useDebouncedCallback)(onDragEnter, 100);
+  var RenderingComponent = display.RenderingComponent,
+      DisplayBlurb = display.DisplayBlurb;
+  var dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
+  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], {
+    className: classes.root,
+    variant: "outlined"
+  }, /*#__PURE__*/_react["default"].createElement(TrackContainerLabel, {
+    model: track,
+    view: model
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.trackRenderingContainer,
+    style: {
+      height: height
+    },
+    onScroll: function onScroll(event) {
+      var target = event.target;
+      display.setScrollTop(target.scrollTop);
+    },
+    onDragEnter: debouncedOnDragEnter,
+    "data-testid": "trackRenderingContainer-".concat(model.id, "-").concat(trackId),
+    role: "presentation"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
+    className: classes.renderingComponentContainer,
+    style: {
+      transform: "scaleX(".concat(model.scaleFactor, ")")
+    }
+  }, /*#__PURE__*/_react["default"].createElement(RenderingComponent, {
+    model: display,
+    onHorizontalScroll: horizontalScroll
+  })), DisplayBlurb ? /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: display.height - 20
+    }
+  }, /*#__PURE__*/_react["default"].createElement(DisplayBlurb, {
+    model: display
+  })) : null), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.overlay,
+    style: {
+      height: display.height,
+      background: dimmed ? 'rgba(0, 0, 0, 0.4)' : undefined
+    },
+    onDragEnter: debouncedOnDragEnter
+  }), /*#__PURE__*/_react["default"].createElement(_ui.ResizeHandle, {
+    onDrag: display.resizeHeight,
+    className: classes.resizeHandle
+  }));
+}
+
+var _default = (0, _mobxReact.observer)(TrackContainer);
+
+exports["default"] = _default;