@jbrowse/plugin-alignments 1.7.9 → 2.0.0

package/dist/LinearPileupDisplay/model.js

@@ -1,728 +1,714 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _react = require("react");
-
-var _configuration = require("@jbrowse/core/configuration");
-
-var _tracks = require("@jbrowse/core/util/tracks");
-
-var _util = require("@jbrowse/core/util");
-
-var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
-
-var _Icons = require("@jbrowse/core/ui/Icons");
-
-var _pluginLinearGenomeView = require("@jbrowse/plugin-linear-genome-view");
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
-
-var _MenuOpen = _interopRequireDefault(require("@material-ui/icons/MenuOpen"));
-
-var _Sort = _interopRequireDefault(require("@material-ui/icons/Sort"));
-
-var _Palette = _interopRequireDefault(require("@material-ui/icons/Palette"));
-
-var _ClearAll = _interopRequireDefault(require("@material-ui/icons/ClearAll"));
-
-var _mobx = require("mobx");
-
-var _LinearPileupDisplayBlurb = _interopRequireDefault(require("./components/LinearPileupDisplayBlurb"));
-
-var _shared = require("../shared");
-
-var _excluded = ["uniqueId"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 || (0, _typeof2.default)(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 ColorByTagDlg = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./components/ColorByTag'));
-  });
-});
-var FilterByTagDlg = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./components/FilterByTag'));
-  });
-});
-var SortByTagDlg = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./components/SortByTag'));
-  });
-});
-var SetFeatureHeightDlg = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./components/SetFeatureHeight'));
-  });
-});
-var SetMaxHeightDlg = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./components/SetMaxHeight'));
-  });
-});
-var ModificationsDlg = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./components/ColorByModifications'));
-  });
-}); // using a map because it preserves order
-
-var rendererTypes = new Map([['pileup', 'PileupRenderer'], ['svg', 'SvgFeatureRenderer']]);
-
-var stateModelFactory = function stateModelFactory(configSchema) {
-  return _mobxStateTree.types.compose('LinearPileupDisplay', _pluginLinearGenomeView.BaseLinearDisplay, _mobxStateTree.types.model({
-    type: _mobxStateTree.types.literal('LinearPileupDisplay'),
-    configuration: (0, _configuration.ConfigurationReference)(configSchema),
-    showSoftClipping: false,
-    featureHeight: _mobxStateTree.types.maybe(_mobxStateTree.types.number),
-    noSpacing: _mobxStateTree.types.maybe(_mobxStateTree.types.boolean),
-    fadeLikelihood: _mobxStateTree.types.maybe(_mobxStateTree.types.boolean),
-    trackMaxHeight: _mobxStateTree.types.maybe(_mobxStateTree.types.number),
-    mismatchAlpha: _mobxStateTree.types.maybe(_mobxStateTree.types.boolean),
-    sortedBy: _mobxStateTree.types.maybe(_mobxStateTree.types.model({
-      type: _mobxStateTree.types.string,
-      pos: _mobxStateTree.types.number,
-      tag: _mobxStateTree.types.maybe(_mobxStateTree.types.string),
-      refName: _mobxStateTree.types.string,
-      assemblyName: _mobxStateTree.types.string
-    })),
-    colorBy: _mobxStateTree.types.maybe(_mobxStateTree.types.model({
-      type: _mobxStateTree.types.string,
-      tag: _mobxStateTree.types.maybe(_mobxStateTree.types.string),
-      extra: _mobxStateTree.types.frozen()
-    })),
-    filterBy: _mobxStateTree.types.optional(_mobxStateTree.types.model({
-      flagInclude: _mobxStateTree.types.optional(_mobxStateTree.types.number, 0),
-      flagExclude: _mobxStateTree.types.optional(_mobxStateTree.types.number, 1540),
-      readName: _mobxStateTree.types.maybe(_mobxStateTree.types.string),
-      tagFilter: _mobxStateTree.types.maybe(_mobxStateTree.types.model({
-        tag: _mobxStateTree.types.string,
-        value: _mobxStateTree.types.string
-      }))
-    }), {})
-  })).volatile(function () {
-    return {
-      colorTagMap: _mobx.observable.map({}),
-      modificationTagMap: _mobx.observable.map({}),
-      ready: false
-    };
-  }).actions(function (self) {
-    return {
-      setReady: function setReady(flag) {
-        self.ready = flag;
-      },
-      setMaxHeight: function setMaxHeight(n) {
-        self.trackMaxHeight = n;
-      },
-      setFeatureHeight: function setFeatureHeight(n) {
-        self.featureHeight = n;
-      },
-      setNoSpacing: function setNoSpacing(flag) {
-        self.noSpacing = flag;
-      },
-      setColorScheme: function setColorScheme(colorScheme) {
-        self.colorTagMap = _mobx.observable.map({}); // clear existing mapping
-
-        self.colorBy = (0, _mobxStateTree.cast)(colorScheme);
-        self.ready = false;
-      },
-      updateModificationColorMap: function updateModificationColorMap(uniqueModifications) {
-        var colorPalette = ['red', 'blue', 'green', 'orange', 'purple'];
-        uniqueModifications.forEach(function (value) {
-          if (!self.modificationTagMap.has(value)) {
-            var totalKeys = (0, _toConsumableArray2.default)(self.modificationTagMap.keys()).length;
-            var newColor = colorPalette[totalKeys];
-            self.modificationTagMap.set(value, newColor);
-          }
-        });
-      },
-      updateColorTagMap: function updateColorTagMap(uniqueTag) {
-        // pale color scheme https://cran.r-project.org/web/packages/khroma/vignettes/tol.html e.g. "tol_light"
-        var colorPalette = ['#BBCCEE', 'pink', '#CCDDAA', '#EEEEBB', '#FFCCCC', 'lightblue', 'lightgreen', 'tan', '#CCEEFF', 'lightsalmon'];
-        uniqueTag.forEach(function (value) {
-          if (!self.colorTagMap.has(value)) {
-            var totalKeys = (0, _toConsumableArray2.default)(self.colorTagMap.keys()).length;
-            var newColor = colorPalette[totalKeys];
-            self.colorTagMap.set(value, newColor);
-          }
-        });
-      }
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-  }).actions(function (self) {
-    return {
-      afterAttach: function afterAttach() {
-        (0, _mobxStateTree.addDisposer)(self, (0, _mobx.autorun)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-          var _getSession, rpcManager, view, sortedBy, colorBy, parentTrack, adapterConfig, rendererType, staticBlocks, bpPerPx, uniqueTagSet, adapter, pos, refName, assemblyName;
-
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  _context.prev = 0;
-                  _getSession = (0, _util.getSession)(self), rpcManager = _getSession.rpcManager;
-                  view = (0, _util.getContainingView)(self);
-                  sortedBy = self.sortedBy, colorBy = self.colorBy, parentTrack = self.parentTrack, adapterConfig = self.adapterConfig, rendererType = self.rendererType;
-                  staticBlocks = view.staticBlocks, bpPerPx = view.bpPerPx; // continually generate the vc pairing, set and rerender if any
-                  // new values seen
-
-                  if (!(colorBy !== null && colorBy !== void 0 && colorBy.tag)) {
-                    _context.next = 10;
-                    break;
-                  }
-
-                  _context.next = 8;
-                  return (0, _shared.getUniqueTagValues)(self, colorBy, staticBlocks);
-
-                case 8:
-                  uniqueTagSet = _context.sent;
-                  self.updateColorTagMap(uniqueTagSet);
-
-                case 10:
-                  if (!((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications')) {
-                    _context.next = 17;
-                    break;
-                  }
-
-                  adapter = (0, _configuration.getConf)(parentTrack, ['adapter']);
-                  _context.t0 = self;
-                  _context.next = 15;
-                  return (0, _shared.getUniqueModificationValues)(self, adapter, colorBy, staticBlocks);
-
-                case 15:
-                  _context.t1 = _context.sent;
-
-                  _context.t0.updateModificationColorMap.call(_context.t0, _context.t1);
-
-                case 17:
-                  if (!sortedBy) {
-                    _context.next = 25;
-                    break;
-                  }
-
-                  pos = sortedBy.pos, refName = sortedBy.refName, assemblyName = sortedBy.assemblyName; // render just the sorted region first
-
-                  _context.next = 21;
-                  return self.rendererType.renderInClient(rpcManager, _objectSpread({
-                    assemblyName: assemblyName,
-                    regions: [{
-                      start: pos,
-                      end: pos + 1,
-                      refName: refName,
-                      assemblyName: assemblyName
-                    }],
-                    adapterConfig: adapterConfig,
-                    rendererType: rendererType.name,
-                    sessionId: (0, _tracks.getRpcSessionId)(self),
-                    layoutId: view.id,
-                    timeout: 1000000
-                  }, self.renderProps()));
-
-                case 21:
-                  self.setReady(true);
-                  self.setCurrBpPerPx(bpPerPx);
-                  _context.next = 26;
-                  break;
-
-                case 25:
-                  self.setReady(true);
-
-                case 26:
-                  _context.next = 32;
-                  break;
-
-                case 28:
-                  _context.prev = 28;
-                  _context.t2 = _context["catch"](0);
-                  console.error(_context.t2);
-                  self.setError(_context.t2);
-
-                case 32:
-                case "end":
-                  return _context.stop();
-              }
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
             }
-          }, _callee, null, [[0, 28]]);
-        })), {
-          delay: 1000
-        }));
-      },
-      selectFeature: function selectFeature(feature) {
-        var session = (0, _util.getSession)(self);
-
-        if ((0, _util.isSessionModelWithWidgets)(session)) {
-          var featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', {
-            featureData: feature.toJSON(),
-            view: (0, _util.getContainingView)(self)
-          });
-          session.showWidget(featureWidget);
-        }
-
-        session.setSelection(feature);
-      },
-      clearSelected: function clearSelected() {
-        self.sortedBy = undefined;
-      },
-      // uses copy-to-clipboard and generates notification
-      copyFeatureToClipboard: function copyFeatureToClipboard(feature) {
-        var _feature$toJSON = feature.toJSON(),
-            uniqueId = _feature$toJSON.uniqueId,
-            rest = (0, _objectWithoutProperties2.default)(_feature$toJSON, _excluded);
-
-        var session = (0, _util.getSession)(self);
-        (0, _copyToClipboard.default)(JSON.stringify(rest, null, 4));
-        session.notify('Copied to clipboard', 'success');
-      },
-      toggleSoftClipping: function toggleSoftClipping() {
-        self.showSoftClipping = !self.showSoftClipping;
-      },
-      toggleMismatchAlpha: function toggleMismatchAlpha() {
-        self.mismatchAlpha = !self.mismatchAlpha;
-      },
-      setConfig: function setConfig(configuration) {
-        self.configuration = configuration;
-      },
-      setSortedBy: function setSortedBy(type, tag) {
-        var _ref2 = (0, _util.getContainingView)(self),
-            centerLineInfo = _ref2.centerLineInfo;
-
-        if (!centerLineInfo) {
-          return;
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
         }
-
-        var refName = centerLineInfo.refName,
-            assemblyName = centerLineInfo.assemblyName,
-            offset = centerLineInfo.offset;
-        var centerBp = Math.round(offset) + 1;
-        var centerRefName = refName;
-
-        if (centerBp < 0) {
-          return;
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
         }
-
-        self.sortedBy = {
-          type: type,
-          pos: centerBp,
-          refName: centerRefName,
-          assemblyName: assemblyName,
-          tag: tag
-        };
-        self.ready = false;
-      },
-      setFilterBy: function setFilterBy(filter) {
-        self.filterBy = (0, _mobxStateTree.cast)(filter);
-      }
-    };
-  }).actions(function (self) {
-    // resets the sort object and refresh whole display on reload
-    var superReload = self.reload;
-    return {
-      reload: function reload() {
-        self.clearSelected();
-        superReload();
-      }
-    };
-  }).views(function (self) {
-    return {
-      get maxHeight() {
-        var conf = (0, _configuration.getConf)(self, ['renderers', self.rendererTypeName]) || {};
-        return self.trackMaxHeight !== undefined ? self.trackMaxHeight : conf.maxHeight;
-      },
-
-      get rendererConfig() {
-        var configBlob = (0, _configuration.getConf)(self, ['renderers', self.rendererTypeName]) || {};
-        return self.rendererType.configSchema.create(_objectSpread(_objectSpread({}, configBlob), {}, {
-          height: self.featureHeight,
-          noSpacing: self.noSpacing,
-          maxHeight: this.maxHeight,
-          mismatchAlpha: self.mismatchAlpha
-        }), (0, _mobxStateTree.getEnv)(self));
-      },
-
-      get featureHeightSetting() {
-        return self.featureHeight || (0, _configuration.readConfObject)(this.rendererConfig, 'height');
-      },
-
-      get mismatchAlphaSetting() {
-        return self.mismatchAlpha !== undefined ? self.mismatchAlpha : (0, _configuration.readConfObject)(this.rendererConfig, 'mismatchAlpha');
-      }
-
-    };
-  }).views(function (self) {
-    var superTrackMenuItems = self.trackMenuItems,
-        superRenderProps = self.renderProps;
-    return {
-      get rendererTypeName() {
-        var viewName = (0, _configuration.getConf)(self, 'defaultRendering');
-        var rendererType = rendererTypes.get(viewName);
-
-        if (!rendererType) {
-          throw new Error("unknown alignments view name ".concat(viewName));
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
         }
-
-        return rendererType;
-      },
-
-      contextMenuItems: function contextMenuItems() {
-        var feat = self.contextMenuFeature;
-        var contextMenuItems = feat ? [{
-          label: 'Open feature details',
-          icon: _MenuOpen.default,
-          onClick: function onClick() {
-            self.clearFeatureSelection();
-
-            if (feat) {
-              self.selectFeature(feat);
-            }
-          }
-        }, {
-          label: 'Copy info to clipboard',
-          icon: _Icons.ContentCopy,
-          onClick: function onClick() {
-            if (feat) {
-              self.copyFeatureToClipboard(feat);
-            }
-          }
-        }] : [];
-        return contextMenuItems;
-      },
-
-      get DisplayBlurb() {
-        return _LinearPileupDisplayBlurb.default;
-      },
-
-      renderProps: function renderProps() {
-        var view = (0, _util.getContainingView)(self);
-        var colorTagMap = self.colorTagMap,
-            modificationTagMap = self.modificationTagMap,
-            sortedBy = self.sortedBy,
-            colorBy = self.colorBy,
-            filterBy = self.filterBy,
-            rpcDriverName = self.rpcDriverName;
-        var superProps = superRenderProps();
-        return _objectSpread(_objectSpread({}, superProps), {}, {
-          notReady: superProps.notReady || !self.ready || sortedBy && self.currBpPerPx !== view.bpPerPx,
-          rpcDriverName: rpcDriverName,
-          displayModel: self,
-          sortedBy: sortedBy,
-          colorBy: colorBy,
-          filterBy: JSON.parse(JSON.stringify(filterBy)),
-          colorTagMap: JSON.parse(JSON.stringify(colorTagMap)),
-          modificationTagMap: JSON.parse(JSON.stringify(modificationTagMap)),
-          showSoftClip: self.showSoftClipping,
-          config: self.rendererConfig,
-          onFeatureClick: function onFeatureClick(_, featureId) {
-            return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-              var session, rpcManager, f, sessionId, _ref3, feature;
-
-              return _regenerator.default.wrap(function _callee2$(_context2) {
-                while (1) {
-                  switch (_context2.prev = _context2.next) {
-                    case 0:
-                      session = (0, _util.getSession)(self);
-                      rpcManager = session.rpcManager;
-                      _context2.prev = 2;
-                      f = featureId || self.featureIdUnderMouse;
-
-                      if (f) {
-                        _context2.next = 8;
-                        break;
-                      }
-
-                      self.clearFeatureSelection();
-                      _context2.next = 14;
-                      break;
-
-                    case 8:
-                      sessionId = (0, _tracks.getRpcSessionId)(self);
-                      _context2.next = 11;
-                      return rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
-                        featureId: f,
-                        sessionId: sessionId,
-                        layoutId: (0, _util.getContainingView)(self).id,
-                        rendererType: 'PileupRenderer'
-                      });
-
-                    case 11:
-                      _ref3 = _context2.sent;
-                      feature = _ref3.feature;
-
-                      if (feature) {
-                        // @ts-ignore
-                        self.selectFeature(new _util.SimpleFeature(feature));
-                      }
-
-                    case 14:
-                      _context2.next = 20;
-                      break;
-
-                    case 16:
-                      _context2.prev = 16;
-                      _context2.t0 = _context2["catch"](2);
-                      console.error(_context2.t0);
-                      session.notify("".concat(_context2.t0));
-
-                    case 20:
-                    case "end":
-                      return _context2.stop();
-                  }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var mobx_1 = require("mobx");
+var mobx_state_tree_1 = require("mobx-state-tree");
+var copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+var configuration_1 = require("@jbrowse/core/configuration");
+var tracks_1 = require("@jbrowse/core/util/tracks");
+var util_1 = require("@jbrowse/core/util");
+var plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+// icons
+var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
+var Icons_1 = require("@jbrowse/core/ui/Icons");
+var MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+var Sort_1 = __importDefault(require("@mui/icons-material/Sort"));
+var Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
+var ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
+var LinearPileupDisplayBlurb_1 = __importDefault(require("./components/LinearPileupDisplayBlurb"));
+var shared_1 = require("../shared");
+// async
+var ColorByTagDlg = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./components/ColorByTag')); }); });
+var FilterByTagDlg = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./components/FilterByTag')); }); });
+var SortByTagDlg = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./components/SortByTag')); }); });
+var SetFeatureHeightDlg = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./components/SetFeatureHeight')); }); });
+var SetMaxHeightDlg = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./components/SetMaxHeight')); }); });
+var ModificationsDlg = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./components/ColorByModifications')); }); });
+// using a map because it preserves order
+var rendererTypes = new Map([
+    ['pileup', 'PileupRenderer'],
+    ['svg', 'SvgFeatureRenderer'],
+]);
+var stateModelFactory = function (configSchema) {
+    return mobx_state_tree_1.types
+        .compose('LinearPileupDisplay', plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
+        type: mobx_state_tree_1.types.literal('LinearPileupDisplay'),
+        configuration: (0, configuration_1.ConfigurationReference)(configSchema),
+        showSoftClipping: false,
+        featureHeight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
+        noSpacing: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        fadeLikelihood: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        trackMaxHeight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
+        mismatchAlpha: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        sortedBy: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({
+            type: mobx_state_tree_1.types.string,
+            pos: mobx_state_tree_1.types.number,
+            tag: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
+            refName: mobx_state_tree_1.types.string,
+            assemblyName: mobx_state_tree_1.types.string,
+        })),
+        colorBy: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({
+            type: mobx_state_tree_1.types.string,
+            tag: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
+            extra: mobx_state_tree_1.types.frozen(),
+        })),
+        filterBy: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.model({
+            flagInclude: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 0),
+            flagExclude: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 1540),
+            readName: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
+            tagFilter: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({ tag: mobx_state_tree_1.types.string, value: mobx_state_tree_1.types.string })),
+        }), {}),
+    }))
+        .volatile(function () { return ({
+        colorTagMap: mobx_1.observable.map({}),
+        modificationTagMap: mobx_1.observable.map({}),
+        featureUnderMouseVolatile: undefined,
+        ready: false,
+    }); })
+        .actions(function (self) { return ({
+        setReady: function (flag) {
+            self.ready = flag;
+        },
+        setMaxHeight: function (n) {
+            self.trackMaxHeight = n;
+        },
+        setFeatureHeight: function (n) {
+            self.featureHeight = n;
+        },
+        setNoSpacing: function (flag) {
+            self.noSpacing = flag;
+        },
+        setColorScheme: function (colorScheme) {
+            self.colorTagMap = mobx_1.observable.map({}); // clear existing mapping
+            self.colorBy = (0, mobx_state_tree_1.cast)(colorScheme);
+            self.ready = false;
+        },
+        updateModificationColorMap: function (uniqueModifications) {
+            var colorPalette = ['red', 'blue', 'green', 'orange', 'purple'];
+            uniqueModifications.forEach(function (value) {
+                if (!self.modificationTagMap.has(value)) {
+                    var totalKeys = __spreadArray([], __read(self.modificationTagMap.keys()), false).length;
+                    var newColor = colorPalette[totalKeys];
+                    self.modificationTagMap.set(value, newColor);
                 }
-              }, _callee2, null, [[2, 16]]);
-            }))();
-          },
-          onClick: function onClick() {
-            self.clearFeatureSelection();
-          },
-          // similar to click but opens a menu with further options
-          onFeatureContextMenu: function onFeatureContextMenu(_, featureId) {
-            return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-              var session, rpcManager, f, sessionId, _ref4, feature;
-
-              return _regenerator.default.wrap(function _callee3$(_context3) {
-                while (1) {
-                  switch (_context3.prev = _context3.next) {
-                    case 0:
-                      session = (0, _util.getSession)(self);
-                      rpcManager = session.rpcManager;
-                      _context3.prev = 2;
-                      f = featureId || self.featureIdUnderMouse;
-
-                      if (f) {
-                        _context3.next = 8;
-                        break;
-                      }
-
-                      self.clearFeatureSelection();
-                      _context3.next = 14;
-                      break;
-
-                    case 8:
-                      sessionId = (0, _tracks.getRpcSessionId)(self);
-                      _context3.next = 11;
-                      return rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
-                        featureId: f,
-                        sessionId: sessionId,
-                        layoutId: (0, _util.getContainingView)(self).id,
-                        rendererType: 'PileupRenderer'
-                      });
-
-                    case 11:
-                      _ref4 = _context3.sent;
-                      feature = _ref4.feature;
-
-                      if (feature) {
-                        // @ts-ignore
-                        self.setContextMenuFeature(new _util.SimpleFeature(feature));
-                      }
-
-                    case 14:
-                      _context3.next = 20;
-                      break;
-
-                    case 16:
-                      _context3.prev = 16;
-                      _context3.t0 = _context3["catch"](2);
-                      console.error(_context3.t0);
-                      session.notify("".concat(_context3.t0));
-
-                    case 20:
-                    case "end":
-                      return _context3.stop();
-                  }
+            });
+        },
+        updateColorTagMap: function (uniqueTag) {
+            // pale color scheme
+            // https://cran.r-project.org/web/packages/khroma/vignettes/tol.html
+            // e.g. "tol_light"
+            var colorPalette = [
+                '#BBCCEE',
+                'pink',
+                '#CCDDAA',
+                '#EEEEBB',
+                '#FFCCCC',
+                'lightblue',
+                'lightgreen',
+                'tan',
+                '#CCEEFF',
+                'lightsalmon',
+            ];
+            uniqueTag.forEach(function (value) {
+                if (!self.colorTagMap.has(value)) {
+                    var totalKeys = __spreadArray([], __read(self.colorTagMap.keys()), false).length;
+                    var newColor = colorPalette[totalKeys];
+                    self.colorTagMap.set(value, newColor);
                 }
-              }, _callee3, null, [[2, 16]]);
-            }))();
-          }
-        });
-      },
-      trackMenuItems: function trackMenuItems() {
-        return [].concat((0, _toConsumableArray2.default)(superTrackMenuItems()), [{
-          label: 'Show soft clipping',
-          icon: _Visibility.default,
-          type: 'checkbox',
-          checked: self.showSoftClipping,
-          onClick: function onClick() {
-            self.toggleSoftClipping(); // if toggling from off to on, will break sort for this track
-            // so clear it
-
-            if (self.showSoftClipping) {
-              self.clearSelected();
-            }
-          }
-        }, {
-          label: 'Sort by',
-          icon: _Sort.default,
-          disabled: self.showSoftClipping,
-          subMenu: [].concat((0, _toConsumableArray2.default)(['Start location', 'Read strand', 'Base pair'].map(function (option) {
-            return {
-              label: option,
-              onClick: function onClick() {
-                return self.setSortedBy(option);
-              }
-            };
-          })), [{
-            label: 'Sort by tag...',
-            onClick: function onClick() {
-              (0, _util.getSession)(self).queueDialog(function (doneCallback) {
-                return [SortByTagDlg, {
-                  model: self,
-                  handleClose: doneCallback
-                }];
-              });
-            }
-          }, {
-            label: 'Clear sort',
-            onClick: function onClick() {
-              return self.clearSelected();
-            }
-          }])
-        }, {
-          label: 'Color scheme',
-          icon: _Palette.default,
-          subMenu: [{
-            label: 'Normal',
-            onClick: function onClick() {
-              self.setColorScheme({
-                type: 'normal'
-              });
-            }
-          }, {
-            label: 'Mapping quality',
-            onClick: function onClick() {
-              self.setColorScheme({
-                type: 'mappingQuality'
-              });
-            }
-          }, {
-            label: 'Strand',
-            onClick: function onClick() {
-              self.setColorScheme({
-                type: 'strand'
-              });
-            }
-          }, {
-            label: 'Pair orientation',
-            onClick: function onClick() {
-              self.setColorScheme({
-                type: 'pairOrientation'
-              });
-            }
-          }, {
-            label: 'Per-base quality',
-            onClick: function onClick() {
-              self.setColorScheme({
-                type: 'perBaseQuality'
-              });
-            }
-          }, {
-            label: 'Per-base lettering',
-            onClick: function onClick() {
-              self.setColorScheme({
-                type: 'perBaseLettering'
-              });
-            }
-          }, {
-            label: 'Modifications or methylation',
-            onClick: function onClick() {
-              (0, _util.getSession)(self).queueDialog(function (doneCallback) {
-                return [ModificationsDlg, {
-                  model: self,
-                  handleClose: doneCallback
-                }];
-              });
-            }
-          }, {
-            label: 'Insert size',
-            onClick: function onClick() {
-              self.setColorScheme({
-                type: 'insertSize'
-              });
+            });
+        },
+        setFeatureUnderMouse: function (feat) {
+            self.featureUnderMouseVolatile = feat;
+        },
+    }); })
+        .actions(function (self) { return ({
+        afterAttach: function () {
+            var _this = this;
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(function () { return __awaiter(_this, void 0, void 0, function () {
+                var rpcManager, view, sortedBy, colorBy, parentTrack, adapterConfig, rendererType, staticBlocks, bpPerPx, uniqueTagSet, adapter, _a, _b, pos, refName, assemblyName, e_1;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _c.trys.push([0, 8, , 9]);
+                            rpcManager = (0, util_1.getSession)(self).rpcManager;
+                            view = (0, util_1.getContainingView)(self);
+                            sortedBy = self.sortedBy, colorBy = self.colorBy, parentTrack = self.parentTrack, adapterConfig = self.adapterConfig, rendererType = self.rendererType;
+                            staticBlocks = view.staticBlocks, bpPerPx = view.bpPerPx;
+                            if (!self.estimatedStatsReady) {
+                                return [2 /*return*/];
+                            }
+                            if (self.regionTooLarge) {
+                                return [2 /*return*/];
+                            }
+                            if (!(colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, (0, shared_1.getUniqueTagValues)(self, colorBy, staticBlocks)];
+                        case 1:
+                            uniqueTagSet = _c.sent();
+                            self.updateColorTagMap(uniqueTagSet);
+                            _c.label = 2;
+                        case 2:
+                            if (!((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications')) return [3 /*break*/, 4];
+                            adapter = (0, configuration_1.getConf)(parentTrack, ['adapter']);
+                            _b = (_a = self).updateModificationColorMap;
+                            return [4 /*yield*/, (0, shared_1.getUniqueModificationValues)(self, adapter, colorBy, staticBlocks)];
+                        case 3:
+                            _b.apply(_a, [_c.sent()]);
+                            _c.label = 4;
+                        case 4:
+                            if (!sortedBy) return [3 /*break*/, 6];
+                            pos = sortedBy.pos, refName = sortedBy.refName, assemblyName = sortedBy.assemblyName;
+                            // render just the sorted region first
+                            return [4 /*yield*/, self.rendererType.renderInClient(rpcManager, __assign({ assemblyName: assemblyName, regions: [
+                                        {
+                                            start: pos,
+                                            end: pos + 1,
+                                            refName: refName,
+                                            assemblyName: assemblyName,
+                                        },
+                                    ], adapterConfig: adapterConfig, rendererType: rendererType.name, sessionId: (0, tracks_1.getRpcSessionId)(self), layoutId: view.id, timeout: 1000000 }, self.renderProps()))];
+                        case 5:
+                            // render just the sorted region first
+                            _c.sent();
+                            self.setReady(true);
+                            self.setCurrBpPerPx(bpPerPx);
+                            return [3 /*break*/, 7];
+                        case 6:
+                            self.setReady(true);
+                            _c.label = 7;
+                        case 7: return [3 /*break*/, 9];
+                        case 8:
+                            e_1 = _c.sent();
+                            console.error(e_1);
+                            self.setError(e_1);
+                            return [3 /*break*/, 9];
+                        case 9: return [2 /*return*/];
+                    }
+                });
+            }); }, { delay: 1000 }));
+            // autorun synchronizes featureUnderMouse with featureIdUnderMouse
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(function () { return __awaiter(_this, void 0, void 0, function () {
+                var session, featureId, sessionId, view, feature, e_2;
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            session = (0, util_1.getSession)(self);
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 5, , 6]);
+                            featureId = self.featureIdUnderMouse;
+                            if (!(((_a = self.featureUnderMouse) === null || _a === void 0 ? void 0 : _a.id()) !== featureId)) return [3 /*break*/, 4];
+                            if (!!featureId) return [3 /*break*/, 2];
+                            self.setFeatureUnderMouse(undefined);
+                            return [3 /*break*/, 4];
+                        case 2:
+                            sessionId = (0, tracks_1.getRpcSessionId)(self);
+                            view = (0, util_1.getContainingView)(self);
+                            return [4 /*yield*/, session.rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: featureId,
+                                    sessionId: sessionId,
+                                    layoutId: view.id,
+                                    rendererType: 'PileupRenderer',
+                                })];
+                        case 3:
+                            feature = (_b.sent()).feature;
+                            // check featureIdUnderMouse is still the same as the
+                            // feature.id that was returned e.g. that the user hasn't
+                            // moused over to a new position during the async operation
+                            // above
+                            // @ts-ignore
+                            if (self.featureIdUnderMouse === feature.uniqueId) {
+                                // @ts-ignore
+                                self.setFeatureUnderMouse(new util_1.SimpleFeature(feature));
+                            }
+                            _b.label = 4;
+                        case 4: return [3 /*break*/, 6];
+                        case 5:
+                            e_2 = _b.sent();
+                            console.error(e_2);
+                            session.notify("".concat(e_2), 'error');
+                            return [3 /*break*/, 6];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            }); }));
+        },
+        selectFeature: function (feature) {
+            var session = (0, util_1.getSession)(self);
+            if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                var featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', { featureData: feature.toJSON(), view: (0, util_1.getContainingView)(self) });
+                session.showWidget(featureWidget);
             }
-          }, {
-            label: 'Stranded paired-end',
-            onClick: function onClick() {
-              self.setColorScheme({
-                type: 'reverseTemplate'
-              });
+            session.setSelection(feature);
+        },
+        clearSelected: function () {
+            self.sortedBy = undefined;
+        },
+        // uses copy-to-clipboard and generates notification
+        copyFeatureToClipboard: function (feature) {
+            var _a = feature.toJSON(), uniqueId = _a.uniqueId, rest = __rest(_a, ["uniqueId"]);
+            var session = (0, util_1.getSession)(self);
+            (0, copy_to_clipboard_1.default)(JSON.stringify(rest, null, 4));
+            session.notify('Copied to clipboard', 'success');
+        },
+        toggleSoftClipping: function () {
+            self.showSoftClipping = !self.showSoftClipping;
+        },
+        toggleMismatchAlpha: function () {
+            self.mismatchAlpha = !self.mismatchAlpha;
+        },
+        setConfig: function (configuration) {
+            self.configuration = configuration;
+        },
+        setSortedBy: function (type, tag) {
+            var centerLineInfo = (0, util_1.getContainingView)(self).centerLineInfo;
+            if (!centerLineInfo) {
+                return;
             }
-          }, {
-            label: 'Color by tag...',
-            onClick: function onClick() {
-              (0, _util.getSession)(self).queueDialog(function (doneCallback) {
-                return [ColorByTagDlg, {
-                  model: self,
-                  handleClose: doneCallback
-                }];
-              });
+            var refName = centerLineInfo.refName, assemblyName = centerLineInfo.assemblyName, offset = centerLineInfo.offset;
+            var centerBp = Math.round(offset) + 1;
+            if (centerBp < 0 || !refName) {
+                return;
             }
-          }]
-        }, {
-          label: 'Filter by',
-          icon: _ClearAll.default,
-          onClick: function onClick() {
-            (0, _util.getSession)(self).queueDialog(function (doneCallback) {
-              return [FilterByTagDlg, {
-                model: self,
-                handleClose: doneCallback
-              }];
-            });
-          }
-        }, {
-          label: 'Set feature height',
-          onClick: function onClick() {
-            (0, _util.getSession)(self).queueDialog(function (doneCallback) {
-              return [SetFeatureHeightDlg, {
-                model: self,
-                handleClose: doneCallback
-              }];
-            });
-          }
-        }, {
-          label: 'Set max height',
-          onClick: function onClick() {
-            (0, _util.getSession)(self).queueDialog(function (doneCallback) {
-              return [SetMaxHeightDlg, {
-                model: self,
-                handleClose: doneCallback
-              }];
-            });
-          }
-        }, {
-          label: 'Fade mismatches by quality',
-          type: 'checkbox',
-          checked: self.mismatchAlphaSetting,
-          onClick: function onClick() {
-            self.toggleMismatchAlpha();
-          }
-        }]);
-      }
-    };
-  });
+            self.sortedBy = {
+                type: type,
+                pos: centerBp,
+                refName: refName,
+                assemblyName: assemblyName,
+                tag: tag,
+            };
+            self.ready = false;
+        },
+        setFilterBy: function (filter) {
+            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
+        },
+    }); })
+        .actions(function (self) {
+        // resets the sort object and refresh whole display on reload
+        var superReload = self.reload;
+        return {
+            reload: function () {
+                self.clearSelected();
+                superReload();
+            },
+        };
+    })
+        .views(function (self) { return ({
+        get maxHeight() {
+            var conf = (0, configuration_1.getConf)(self, ['renderers', self.rendererTypeName]) || {};
+            return self.trackMaxHeight !== undefined
+                ? self.trackMaxHeight
+                : conf.maxHeight;
+        },
+        get rendererConfig() {
+            var configBlob = (0, configuration_1.getConf)(self, ['renderers', self.rendererTypeName]) || {};
+            return self.rendererType.configSchema.create(__assign(__assign({}, configBlob), { height: self.featureHeight, noSpacing: self.noSpacing, maxHeight: this.maxHeight, mismatchAlpha: self.mismatchAlpha }), (0, mobx_state_tree_1.getEnv)(self));
+        },
+        get featureHeightSetting() {
+            return (self.featureHeight || (0, configuration_1.readConfObject)(this.rendererConfig, 'height'));
+        },
+        get mismatchAlphaSetting() {
+            return self.mismatchAlpha !== undefined
+                ? self.mismatchAlpha
+                : (0, configuration_1.readConfObject)(this.rendererConfig, 'mismatchAlpha');
+        },
+        get featureUnderMouse() {
+            return self.featureUnderMouseVolatile;
+        },
+    }); })
+        .views(function (self) {
+        var superTrackMenuItems = self.trackMenuItems, superRenderProps = self.renderProps;
+        return {
+            get rendererTypeName() {
+                var viewName = (0, configuration_1.getConf)(self, 'defaultRendering');
+                var rendererType = rendererTypes.get(viewName);
+                if (!rendererType) {
+                    throw new Error("unknown alignments view name ".concat(viewName));
+                }
+                return rendererType;
+            },
+            contextMenuItems: function () {
+                var feat = self.contextMenuFeature;
+                var contextMenuItems = feat
+                    ? [
+                        {
+                            label: 'Open feature details',
+                            icon: MenuOpen_1.default,
+                            onClick: function () {
+                                self.clearFeatureSelection();
+                                if (feat) {
+                                    self.selectFeature(feat);
+                                }
+                            },
+                        },
+                        {
+                            label: 'Copy info to clipboard',
+                            icon: Icons_1.ContentCopy,
+                            onClick: function () {
+                                if (feat) {
+                                    self.copyFeatureToClipboard(feat);
+                                }
+                            },
+                        },
+                    ]
+                    : [];
+                return contextMenuItems;
+            },
+            get DisplayBlurb() {
+                return LinearPileupDisplayBlurb_1.default;
+            },
+            renderProps: function () {
+                var view = (0, util_1.getContainingView)(self);
+                var colorTagMap = self.colorTagMap, modificationTagMap = self.modificationTagMap, sortedBy = self.sortedBy, colorBy = self.colorBy, filterBy = self.filterBy, rpcDriverName = self.rpcDriverName, currBpPerPx = self.currBpPerPx, ready = self.ready;
+                var superProps = superRenderProps();
+                return __assign(__assign({}, superProps), { notReady: superProps.notReady ||
+                        !ready ||
+                        (sortedBy && currBpPerPx !== view.bpPerPx), rpcDriverName: rpcDriverName, displayModel: self, sortedBy: sortedBy, colorBy: colorBy, filterBy: JSON.parse(JSON.stringify(filterBy)), colorTagMap: Object.fromEntries(colorTagMap.toJSON()), modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()), showSoftClip: self.showSoftClipping, config: self.rendererConfig, onFeatureClick: function (_, featureId) {
+                        return __awaiter(this, void 0, void 0, function () {
+                            var session, rpcManager, f, sessionId, feature, e_3;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        session = (0, util_1.getSession)(self);
+                                        rpcManager = session.rpcManager;
+                                        _a.label = 1;
+                                    case 1:
+                                        _a.trys.push([1, 5, , 6]);
+                                        f = featureId || self.featureIdUnderMouse;
+                                        if (!!f) return [3 /*break*/, 2];
+                                        self.clearFeatureSelection();
+                                        return [3 /*break*/, 4];
+                                    case 2:
+                                        sessionId = (0, tracks_1.getRpcSessionId)(self);
+                                        return [4 /*yield*/, rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                                featureId: f,
+                                                sessionId: sessionId,
+                                                layoutId: (0, util_1.getContainingView)(self).id,
+                                                rendererType: 'PileupRenderer',
+                                            })];
+                                    case 3:
+                                        feature = (_a.sent()).feature;
+                                        if (feature) {
+                                            // @ts-ignore
+                                            self.selectFeature(new util_1.SimpleFeature(feature));
+                                        }
+                                        _a.label = 4;
+                                    case 4: return [3 /*break*/, 6];
+                                    case 5:
+                                        e_3 = _a.sent();
+                                        console.error(e_3);
+                                        session.notify("".concat(e_3));
+                                        return [3 /*break*/, 6];
+                                    case 6: return [2 /*return*/];
+                                }
+                            });
+                        });
+                    }, onClick: function () {
+                        self.clearFeatureSelection();
+                    }, 
+                    // similar to click but opens a menu with further options
+                    onFeatureContextMenu: function (_, featureId) {
+                        return __awaiter(this, void 0, void 0, function () {
+                            var session, rpcManager, f, sessionId, feature, e_4;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        session = (0, util_1.getSession)(self);
+                                        rpcManager = session.rpcManager;
+                                        _a.label = 1;
+                                    case 1:
+                                        _a.trys.push([1, 5, , 6]);
+                                        f = featureId || self.featureIdUnderMouse;
+                                        if (!!f) return [3 /*break*/, 2];
+                                        self.clearFeatureSelection();
+                                        return [3 /*break*/, 4];
+                                    case 2:
+                                        sessionId = (0, tracks_1.getRpcSessionId)(self);
+                                        return [4 /*yield*/, rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                                featureId: f,
+                                                sessionId: sessionId,
+                                                layoutId: (0, util_1.getContainingView)(self).id,
+                                                rendererType: 'PileupRenderer',
+                                            })];
+                                    case 3:
+                                        feature = (_a.sent()).feature;
+                                        if (feature) {
+                                            // @ts-ignore
+                                            self.setContextMenuFeature(new util_1.SimpleFeature(feature));
+                                        }
+                                        _a.label = 4;
+                                    case 4: return [3 /*break*/, 6];
+                                    case 5:
+                                        e_4 = _a.sent();
+                                        console.error(e_4);
+                                        session.notify("".concat(e_4));
+                                        return [3 /*break*/, 6];
+                                    case 6: return [2 /*return*/];
+                                }
+                            });
+                        });
+                    } });
+            },
+            trackMenuItems: function () {
+                return __spreadArray(__spreadArray([], __read(superTrackMenuItems()), false), [
+                    {
+                        label: 'Show soft clipping',
+                        icon: Visibility_1.default,
+                        type: 'checkbox',
+                        checked: self.showSoftClipping,
+                        onClick: function () {
+                            self.toggleSoftClipping();
+                            // if toggling from off to on, will break sort for this track
+                            // so clear it
+                            if (self.showSoftClipping) {
+                                self.clearSelected();
+                            }
+                        },
+                    },
+                    {
+                        label: 'Sort by',
+                        icon: Sort_1.default,
+                        disabled: self.showSoftClipping,
+                        subMenu: __spreadArray(__spreadArray([], __read(['Start location', 'Read strand', 'Base pair'].map(function (option) { return ({
+                            label: option,
+                            onClick: function () { return self.setSortedBy(option); },
+                        }); })), false), [
+                            {
+                                label: 'Sort by tag...',
+                                onClick: function () {
+                                    (0, util_1.getSession)(self).queueDialog(function (handleClose) { return [
+                                        SortByTagDlg,
+                                        { model: self, handleClose: handleClose },
+                                    ]; });
+                                },
+                            },
+                            {
+                                label: 'Clear sort',
+                                onClick: function () { return self.clearSelected(); },
+                            },
+                        ], false),
+                    },
+                    {
+                        label: 'Color scheme',
+                        icon: Palette_1.default,
+                        subMenu: [
+                            {
+                                label: 'Normal',
+                                onClick: function () {
+                                    self.setColorScheme({ type: 'normal' });
+                                },
+                            },
+                            {
+                                label: 'Mapping quality',
+                                onClick: function () {
+                                    self.setColorScheme({ type: 'mappingQuality' });
+                                },
+                            },
+                            {
+                                label: 'Strand',
+                                onClick: function () {
+                                    self.setColorScheme({ type: 'strand' });
+                                },
+                            },
+                            {
+                                label: 'Pair orientation',
+                                onClick: function () {
+                                    self.setColorScheme({ type: 'pairOrientation' });
+                                },
+                            },
+                            {
+                                label: 'Per-base quality',
+                                onClick: function () {
+                                    self.setColorScheme({ type: 'perBaseQuality' });
+                                },
+                            },
+                            {
+                                label: 'Per-base lettering',
+                                onClick: function () {
+                                    self.setColorScheme({ type: 'perBaseLettering' });
+                                },
+                            },
+                            {
+                                label: 'Modifications or methylation',
+                                onClick: function () {
+                                    (0, util_1.getSession)(self).queueDialog(function (doneCallback) { return [
+                                        ModificationsDlg,
+                                        { model: self, handleClose: doneCallback },
+                                    ]; });
+                                },
+                            },
+                            {
+                                label: 'Insert size',
+                                onClick: function () {
+                                    self.setColorScheme({ type: 'insertSize' });
+                                },
+                            },
+                            {
+                                label: 'Stranded paired-end',
+                                onClick: function () {
+                                    self.setColorScheme({ type: 'reverseTemplate' });
+                                },
+                            },
+                            {
+                                label: 'Color by tag...',
+                                onClick: function () {
+                                    (0, util_1.getSession)(self).queueDialog(function (doneCallback) { return [
+                                        ColorByTagDlg,
+                                        { model: self, handleClose: doneCallback },
+                                    ]; });
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Filter by',
+                        icon: ClearAll_1.default,
+                        onClick: function () {
+                            (0, util_1.getSession)(self).queueDialog(function (doneCallback) { return [
+                                FilterByTagDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]; });
+                        },
+                    },
+                    {
+                        label: 'Set feature height',
+                        onClick: function () {
+                            (0, util_1.getSession)(self).queueDialog(function (doneCallback) { return [
+                                SetFeatureHeightDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]; });
+                        },
+                    },
+                    {
+                        label: 'Set max height',
+                        onClick: function () {
+                            (0, util_1.getSession)(self).queueDialog(function (doneCallback) { return [
+                                SetMaxHeightDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]; });
+                        },
+                    },
+                    {
+                        label: 'Fade mismatches by quality',
+                        type: 'checkbox',
+                        checked: self.mismatchAlphaSetting,
+                        onClick: function () {
+                            self.toggleMismatchAlpha();
+                        },
+                    },
+                ], false);
+            },
+        };
+    });
 };
-
-var _default = stateModelFactory;
-exports.default = _default;
+exports.default = stateModelFactory;
+//# sourceMappingURL=model.js.map