@apollo-annotation/jbrowse-plugin-apollo 0.3.1 → 0.3.3

package/dist/jbrowse-plugin-apollo.umd.development.js

@@ -4702,10 +4702,10 @@
 	annotationFeatureToGFF3$1.annotationFeatureToGFF3 = annotationFeatureToGFF3;
 	var util_1$4 = require$$1__default$1["default"];
 	function annotationFeatureToGFF3(feature, parentId, refSeqNames) {
-	  var _feature$attributes$g, _feature$attributes, _feature$attributes2;
-	  var attributes = JSON.parse(JSON.stringify(feature.attributes));
+	  var _feature$attributes, _feature$attributes$g, _feature$attributes2, _feature$attributes3;
+	  var attributes = JSON.parse(JSON.stringify((_feature$attributes = feature.attributes) !== null && _feature$attributes !== void 0 ? _feature$attributes : {}));
 	  var ontologyTerms = [];
-	  var source = (_feature$attributes$g = (_feature$attributes = feature.attributes) === null || _feature$attributes === void 0 || (_feature$attributes = _feature$attributes.gff_source) === null || _feature$attributes === void 0 ? void 0 : _feature$attributes[0]) !== null && _feature$attributes$g !== void 0 ? _feature$attributes$g : null;
+	  var source = (_feature$attributes$g = (_feature$attributes2 = feature.attributes) === null || _feature$attributes2 === void 0 || (_feature$attributes2 = _feature$attributes2.gff_source) === null || _feature$attributes2 === void 0 ? void 0 : _feature$attributes2[0]) !== null && _feature$attributes$g !== void 0 ? _feature$attributes$g : null;
 	  delete attributes.gff_source;
 	  if (parentId) {
 	    attributes.Parent = [parentId];
@@ -4763,7 +4763,7 @@
 	  if (ontologyTerms.length > 0) {
 	    attributes.Ontology_term = ontologyTerms;
 	  }
-	  var gff_score = (_feature$attributes2 = feature.attributes) === null || _feature$attributes2 === void 0 ? void 0 : _feature$attributes2.gff_score;
+	  var gff_score = (_feature$attributes3 = feature.attributes) === null || _feature$attributes3 === void 0 ? void 0 : _feature$attributes3.gff_score;
 	  var score = null;
 	  if (gff_score && gff_score.length > 0) {
 	    if (gff_score[0]) {
@@ -5069,7 +5069,7 @@
 	    min = _getFeatureMinMax2[0],
 	    max = _getFeatureMinMax2[1];
 	  var convertedChildren = convertChildren(gff3Feature, refSeq, featureIds);
-	  var convertedAttributes = convertFeatureAttributes(gff3Feature);
+	  var convertedAttributes = convertFeatureAttributes$1(gff3Feature);
 	  var feature = {
 	    _id: new bson_objectid_1$1["default"]().toHexString(),
 	    refSeq: refSeq !== null && refSeq !== void 0 ? refSeq : refName,
@@ -5117,7 +5117,7 @@
 	  var max = Math.max.apply(Math, _toConsumableArray(maxes));
 	  return [min - 1, max];
 	}
-	function convertFeatureAttributes(gff3Feature) {
+	function convertFeatureAttributes$1(gff3Feature) {
 	  var convertedAttributes = {};
 	  var scores = gff3Feature.map(function (f) {
 	    return f.score;
@@ -5171,6 +5171,9 @@
 	          var newKey = (0, gffReservedKeys_1.isGFFReservedAttribute)(key) ? gffReservedKeys_1.gffToInternal[key] : key;
 	          var existingVal = convertedAttributes[newKey];
 	          if (existingVal) {
+	            // if (JSON.stringify(existingVal) === JSON.stringify(val)) {
+	            //   continue
+	            // }
 	            var valSet = new Set([].concat(_toConsumableArray(existingVal), _toConsumableArray(val)));
 	            convertedAttributes[newKey] = _toConsumableArray(valSet);
 	          } else {
@@ -5204,6 +5207,8 @@
 	    firstFeature = _locationsWithChildre[0];
 	  var childFeatures = firstFeature.child_features;
 	  var cdsFeatures = [];
+	  var exonFeatures = [];
+	  var utrFeatures = [];
 	  var _iterator2 = _createForOfIteratorHelper(childFeatures),
 	    _step2;
 	  try {
@@ -5211,6 +5216,12 @@
 	      var childFeature = _step2.value;
 	      var _childFeature = _slicedToArray(childFeature, 1),
 	        firstChildFeatureLocation = _childFeature[0];
+	      if (firstChildFeatureLocation.type === 'exon') {
+	        exonFeatures.push(childFeature);
+	      }
+	      if (firstChildFeatureLocation.type === 'three_prime_UTR' || firstChildFeatureLocation.type === 'five_prime_UTR') {
+	        utrFeatures.push(childFeature);
+	      }
 	      if (firstChildFeatureLocation.type === 'three_prime_UTR' || firstChildFeatureLocation.type === 'five_prime_UTR' || firstChildFeatureLocation.type === 'intron' || firstChildFeatureLocation.type === 'start_codon' || firstChildFeatureLocation.type === 'stop_codon') {
 	        continue;
 	      }
@@ -5226,24 +5237,217 @@
 	  } finally {
 	    _iterator2.f();
 	  }
-	  var processedCDS = cdsFeatures.length > 0 ? processCDS(cdsFeatures, refSeq, featureIds) : [];
-	  var _iterator3 = _createForOfIteratorHelper(processedCDS),
-	    _step3;
-	  try {
-	    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-	      var cds = _step3.value;
-	      convertedChildren[cds._id] = cds;
+	  if (cdsFeatures.length > 0) {
+	    var processedCDS = processCDS(cdsFeatures, refSeq, featureIds);
+	    var _iterator3 = _createForOfIteratorHelper(processedCDS),
+	      _step3;
+	    try {
+	      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+	        var cds = _step3.value;
+	        convertedChildren[cds._id] = cds;
+	      }
+	    } catch (err) {
+	      _iterator3.e(err);
+	    } finally {
+	      _iterator3.f();
+	    }
+	    var missingExons = inferMissingExons(cdsFeatures, exonFeatures, utrFeatures, processedCDS[0].refSeq);
+	    var _iterator4 = _createForOfIteratorHelper(missingExons),
+	      _step4;
+	    try {
+	      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+	        var exon = _step4.value;
+	        convertedChildren[exon._id] = exon;
+	      }
+	    } catch (err) {
+	      _iterator4.e(err);
+	    } finally {
+	      _iterator4.f();
 	    }
-	  } catch (err) {
-	    _iterator3.e(err);
-	  } finally {
-	    _iterator3.f();
 	  }
 	  if (Object.keys(convertedChildren).length > 0) {
 	    return convertedChildren;
 	  }
 	  return;
 	}
+	function inferMissingExons(cdsFeatures, existingExons, utrFeatures, refSeq) {
+	  // Convert utrFeatures from GFF3Feature to AnnotationFeatureSnapshot
+	  var utrExons = [];
+	  var _iterator5 = _createForOfIteratorHelper(utrFeatures),
+	    _step5;
+	  try {
+	    for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+	      var utrs = _step5.value;
+	      var _iterator7 = _createForOfIteratorHelper(utrs),
+	        _step7;
+	      try {
+	        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+	          var utr = _step7.value;
+	          if (!utr.start || !utr.end) {
+	            throw new Error("UTR has undefined start and/or end\n: ".concat(JSON.stringify(utr, null, 2)));
+	          }
+	          var strand = undefined;
+	          if (utr.strand === '+') {
+	            strand = 1;
+	          } else if (utr.strand === '-') {
+	            strand = -1;
+	          }
+	          utrExons.push({
+	            _id: new bson_objectid_1$1["default"]().toHexString(),
+	            refSeq: refSeq,
+	            type: 'exon',
+	            min: utr.start - 1,
+	            max: utr.end,
+	            strand: strand
+	          });
+	        }
+	      } catch (err) {
+	        _iterator7.e(err);
+	      } finally {
+	        _iterator7.f();
+	      }
+	    }
+	  } catch (err) {
+	    _iterator5.e(err);
+	  } finally {
+	    _iterator5.f();
+	  }
+	  utrExons.sort(function (a, b) {
+	    return a.min - b.min;
+	  });
+	  var missingExons = [];
+	  var _iterator6 = _createForOfIteratorHelper(cdsFeatures),
+	    _step6;
+	  try {
+	    for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+	      var protein = _step6.value;
+	      protein.sort(function (a, b) {
+	        if (!a.start || !b.start) {
+	          throw new Error('CDS has undefined start');
+	        }
+	        return a.start - b.start;
+	      });
+	      for (var cdsIdx = 0; cdsIdx < protein.length; cdsIdx++) {
+	        var cds = protein[cdsIdx];
+	        // For CDS check if there is an exon containing it. If not, create an exon with same coords as the CDS.
+	        var exonFound = false;
+	        var _iterator8 = _createForOfIteratorHelper(existingExons),
+	          _step8;
+	        try {
+	          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+	            var x = _step8.value;
+	            if (x.length != 1) {
+	              throw new Error('Unexpected number of exons');
+	            }
+	            var _x = _slicedToArray(x, 1),
+	              exon = _x[0];
+	            if (exon.start && exon.end && cds.start && cds.end && exon.start <= cds.start && exon.end >= cds.end) {
+	              exonFound = true;
+	              break;
+	            }
+	          }
+	        } catch (err) {
+	          _iterator8.e(err);
+	        } finally {
+	          _iterator8.f();
+	        }
+	        if (!exonFound) {
+	          if (!cds.start || !cds.end) {
+	            throw new Error("CDS has undefined start and/or end: ".concat(JSON.stringify(cds, null, 2)));
+	          }
+	          var _strand = undefined;
+	          if (cds.strand === '+') {
+	            _strand = 1;
+	          } else if (cds.strand === '-') {
+	            _strand = -1;
+	          }
+	          var newExon = {
+	            _id: new bson_objectid_1$1["default"]().toHexString(),
+	            refSeq: refSeq,
+	            type: 'exon',
+	            min: cds.start - 1,
+	            max: cds.end,
+	            strand: _strand
+	          };
+	          if (cdsIdx === 0) {
+	            // If this CDS is the leftmost (or the only CDS in this protein), check if we need to add UTRs before it
+	            var _iterator9 = _createForOfIteratorHelper(utrExons),
+	              _step9;
+	            try {
+	              for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+	                var _utr = _step9.value;
+	                if (_utr.max > newExon.min) {
+	                  break;
+	                }
+	                if (_utr.max === newExon.min) {
+	                  // UTR ends where exon begins: Extend the exon to include this UTR
+	                  newExon.min = _utr.min;
+	                } else {
+	                  missingExons.push(_utr);
+	                }
+	              }
+	            } catch (err) {
+	              _iterator9.e(err);
+	            } finally {
+	              _iterator9.f();
+	            }
+	          }
+	          if (cdsIdx === protein.length - 1) {
+	            // If this CDS is the rightmost (or the only CDS in this protein), check if we need to add UTRs after it
+	            var _iterator10 = _createForOfIteratorHelper(utrExons),
+	              _step10;
+	            try {
+	              for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+	                var _utr2 = _step10.value;
+	                if (_utr2.min < newExon.max) {
+	                  continue;
+	                }
+	                if (_utr2.min === newExon.max) {
+	                  // UTR begins where exon end: Extend the exon to include this UTR
+	                  newExon.max = _utr2.max;
+	                } else {
+	                  missingExons.push(_utr2);
+	                }
+	              }
+	            } catch (err) {
+	              _iterator10.e(err);
+	            } finally {
+	              _iterator10.f();
+	            }
+	          }
+	          missingExons.push(newExon);
+	        }
+	      }
+	    }
+	  } catch (err) {
+	    _iterator6.e(err);
+	  } finally {
+	    _iterator6.f();
+	  }
+	  var mergedExons = mergeAnnotationFeatures(missingExons);
+	  return mergedExons;
+	}
+	function mergeAnnotationFeatures(features) {
+	  if (features.length === 0) {
+	    return [];
+	  }
+	  features.sort(function (a, b) {
+	    return a.min - b.min;
+	  });
+	  var res = [];
+	  res.push(features[0]);
+	  for (var i = 1; i < features.length; i++) {
+	    var last = res.at(-1);
+	    var curr = features[i];
+	    // If current interval overlaps with the last merged interval, merge them
+	    if (last && curr.min <= last.max) {
+	      last.max = Math.max(last.max, curr.max);
+	    } else {
+	      res.push(curr);
+	    }
+	  }
+	  return res;
+	}
 	/**
 	 * If a GFF3 file has CDS features that either (1) don't have an ID or (2) have
 	 * different IDs for each CDS, we have to do a bit of guessing about how they
@@ -5295,11 +5499,11 @@
 	    return cds[0];
 	  });
 	  var groupedLocations = [];
-	  var _iterator4 = _createForOfIteratorHelper(cdsLocations),
-	    _step4;
+	  var _iterator11 = _createForOfIteratorHelper(cdsLocations),
+	    _step11;
 	  try {
 	    var _loop = function _loop() {
-	      var location = _step4.value;
+	      var location = _step11.value;
 	      var lastGroup = groupedLocations.at(-1);
 	      if (!lastGroup) {
 	        groupedLocations.push([location]);
@@ -5315,13 +5519,13 @@
 	        lastGroup.push(location);
 	      }
 	    };
-	    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+	    for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
 	      if (_loop()) continue;
 	    }
 	  } catch (err) {
-	    _iterator4.e(err);
+	    _iterator11.e(err);
 	  } finally {
-	    _iterator4.f();
+	    _iterator11.f();
 	  }
 	  return groupedLocations.map(function (group) {
 	    return gff3ToAnnotationFeature(group, refSeq, featureIds);
@@ -20864,7 +21068,7 @@
 	}), 'Add');
 	default_1$a = Add["default"] = _default$c;
 
-	var version = "0.3.1";
+	var version = "0.3.3";
 
 	const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
 	    baseURL: {
@@ -39013,17 +39217,6 @@
 	  }
 	  return _createClass(AbortError);
 	}( /*#__PURE__*/_wrapNativeSuper(Error));
-	/**
-	 * properly check if the given AbortSignal is aborted.
-	 * per the standard, if the signal reads as aborted,
-	 * this function throws either a DOMException AbortError, or a regular error
-	 * with a `code` attribute set to `ERR_ABORTED`.
-	 *
-	 * for convenience, passing `undefined` is a no-op
-	 *
-	 * @param signal -
-	 * @returns nothing
-	 */
 	function checkAbortSignal(signal) {
 	  if (!signal) {
 	    return;
@@ -39040,11 +39233,6 @@
 	    return setTimeout(resolve, ms);
 	  });
 	}
-	/**
-	 * Skips to the next tick, then runs `checkAbortSignal`.
-	 * Await this to inside an otherwise synchronous loop to
-	 * provide a place to break when an abort signal is received.
-	 */
 	function abortBreakPoint(_x) {
 	  return _abortBreakPoint.apply(this, arguments);
 	}
@@ -39075,26 +39263,12 @@
 	}
 	function observeAbortSignal(signal) {
 	  if (!signal) {
-	    return rxjs_1.Observable.create();
+	    return new rxjs_1.Observable();
 	  }
 	  return (0, rxjs_1.fromEvent)(signal, 'abort');
 	}
-	/**
-	 * check if the given exception was caused by an operation being intentionally aborted
-	 * @param exception -
-	 */
 	function isAbortException(exception) {
-	  return exception instanceof Error && (
-	  // DOMException
-	  exception.name === 'AbortError' ||
-	  // standard-ish non-DOM abort exception
-	  exception.code === 'ERR_ABORTED' ||
-	  // message contains aborted for bubbling through RPC
-	  // things we have seen that we want to catch here
-	  // Error: aborted
-	  // AbortError: aborted
-	  // AbortError: The user aborted a request.
-	  !!/\b(aborted|aborterror)\b/i.test(exception.message));
+	  return exception instanceof Error && (exception.name === 'AbortError' || exception.code === 'ERR_ABORTED' || !!/\b(aborted|aborterror)\b/i.test(exception.message));
 	}
 
 	var jsonpath$1 = {exports: {}};
@@ -46029,6 +46203,8 @@
 	/** load a OBO Graph JSON file into a database */
 	async function loadOboGraphJson(db) {
 	    const startTime = Date.now();
+	    let percentProgress = 1;
+	    this.options.update?.('Parsing JSON', percentProgress);
 	    // TODO: using file streaming along with an event-based json parser
 	    // instead of JSON.parse and .readFile could probably make this faster
 	    // and less memory intensive
@@ -46039,6 +46215,8 @@
 	    catch {
 	        throw new Error('Error in loading ontology');
 	    }
+	    percentProgress += 5;
+	    this.options.update?.('Parsing JSON complete', percentProgress);
 	    const parseTime = Date.now();
 	    const [graph, ...additionalGraphs] = oboGraph.graphs ?? [];
 	    if (!graph) {
@@ -46057,31 +46235,51 @@
 	        const fullTextIndexPaths = getTextIndexFields
 	            .call(this)
 	            .map((def) => def.jsonPath);
-	        for (const node of graph.nodes ?? []) {
-	            if (isOntologyDBNode(node)) {
-	                await nodeStore.add({
-	                    ...node,
-	                    fullTextWords: serializeWords(getWords(node, fullTextIndexPaths, this.prefixes)),
-	                });
+	        if (graph.nodes) {
+	            let lastProgress = Math.round(percentProgress);
+	            for (const [, node] of graph.nodes.entries()) {
+	                percentProgress += 64 * (1 / graph.nodes.length);
+	                if (Math.round(percentProgress) != lastProgress &&
+	                    percentProgress < 100) {
+	                    this.options.update?.('Processing nodes', percentProgress);
+	                    lastProgress = Math.round(percentProgress);
+	                }
+	                if (isOntologyDBNode(node)) {
+	                    await nodeStore.add({
+	                        ...node,
+	                        fullTextWords: serializeWords(getWords(node, fullTextIndexPaths, this.prefixes)),
+	                    });
+	                }
 	            }
 	        }
 	        // load edges
 	        const edgeStore = tx.objectStore('edges');
-	        for (const edge of graph.edges ?? []) {
-	            if (isOntologyDBEdge(edge)) {
-	                await edgeStore.add(edge);
+	        if (graph.edges) {
+	            let lastProgress = Math.round(percentProgress);
+	            for (const [, edge] of graph.edges.entries()) {
+	                percentProgress += 30 * (1 / graph.edges.length);
+	                if (Math.round(percentProgress) != lastProgress &&
+	                    percentProgress < 100) {
+	                    this.options.update?.('Processing edges', percentProgress);
+	                    lastProgress = Math.round(percentProgress);
+	                }
+	                if (isOntologyDBEdge(edge)) {
+	                    await edgeStore.add(edge);
+	                }
 	            }
 	        }
 	        await tx.done;
 	        // record some metadata about this ontology and load operation
 	        const tx2 = db.transaction('meta', 'readwrite');
+	        // eslint-disable-next-line @typescript-eslint/unbound-method
+	        const { update, ...otherOptions } = this.options;
 	        await tx2.objectStore('meta').add({
 	            ontologyRecord: {
 	                name: this.ontologyName,
 	                version: this.ontologyVersion,
 	                sourceLocation: this.sourceLocation,
 	            },
-	            storeOptions: this.options,
+	            storeOptions: otherOptions,
 	            graphMeta: graph.meta,
 	            timestamp: String(new Date()),
 	            schemaVersion,
@@ -46146,8 +46344,8 @@
 	        this.ontologyName = name;
 	        this.ontologyVersion = version;
 	        this.sourceLocation = source;
-	        this.db = this.prepareDatabase();
 	        this.options = options ?? {};
+	        this.db = this.prepareDatabase();
 	    }
 	    /**
 	     * check that the configuration of this ontology appears valid. Does not
@@ -46192,9 +46390,12 @@
 	            return db;
 	        }
 	        try {
-	            const { sourceLocation, sourceType } = this;
+	            const { options, sourceLocation, sourceType } = this;
 	            if (sourceType === 'obo-graph-json') {
+	                options.update?.('', 0);
+	                // add more updates inside `loadOboGraphJson`
 	                await this.loadOboGraphJson(db);
+	                options.update?.('', 100);
 	            }
 	            else {
 	                throw new Error(`ontology source file ${JSON.stringify(sourceLocation)} has type ${sourceType}, which is not yet supported`);
@@ -46414,6 +46615,7 @@
 	    version: 'unversioned',
 	    source: require$$1$3.types.union(mst.LocalPathLocation, mst.UriLocation, mst.BlobLocation),
 	    options: require$$1$3.types.frozen(),
+	    equivalentTypes: require$$1$3.types.map(require$$1$3.types.array(require$$1$3.types.string)),
 	})
 	    .volatile((_self) => ({
 	    dataStore: undefined,
@@ -46431,6 +46633,37 @@
 	            this.initDataStore();
 	        }));
 	    },
+	    setEquivalentTypes(type, equivalentTypes) {
+	        self.equivalentTypes.set(type, equivalentTypes);
+	    },
+	}))
+	    .actions((self) => ({
+	    loadEquivalentTypes: require$$1$3.flow(function* loadEquivalentTypes(type) {
+	        if (!self.dataStore) {
+	            return;
+	        }
+	        const terms = (yield self.dataStore.getTermsWithLabelOrSynonym(type));
+	        const equivalents = terms
+	            .map((term) => term.lbl)
+	            .filter((term) => term != undefined);
+	        self.setEquivalentTypes(type, equivalents);
+	    }),
+	}))
+	    .views((self) => ({
+	    isTypeOf(queryType, typeOf) {
+	        if (queryType === typeOf) {
+	            return true;
+	        }
+	        if (!self.dataStore) {
+	            return false;
+	        }
+	        const equivalents = self.equivalentTypes.get(typeOf);
+	        if (!equivalents) {
+	            void self.loadEquivalentTypes(typeOf);
+	            return false;
+	        }
+	        return equivalents.includes(queryType);
+	    },
 	}));
 	const OntologyManagerType = require$$1$3.types
 	    .model('OntologyManager', {
@@ -46884,7 +47117,7 @@
 	            }
 	            const newRefNames = [...Object.entries(refNameAliases)]
 	                .filter(([id, refName]) => id !== refName)
-	                .map(([id, refName]) => ({ _id: id, name: refName ?? '' }));
+	                .map(([id, refName]) => ({ _id: id, name: refName }));
 	            setRefNames(newRefNames);
 	            setSelectedRefSeqId(newRefNames[0]?._id || '');
 	        }
@@ -47249,7 +47482,11 @@
 	        }
 	        const { exportID } = (await response.json());
 	        const exportURL = new URL('export', internetAccount.baseURL);
-	        const exportSearchParams = new URLSearchParams({ exportID });
+	        const params = {
+	            exportID,
+	            includeFASTA: 'true',
+	        };
+	        const exportSearchParams = new URLSearchParams(params);
 	        exportURL.search = exportSearchParams.toString();
 	        const exportUri = exportURL.toString();
 	        window.open(exportUri, '_blank');
@@ -48473,8 +48710,8 @@
 	    //   .map((m) => m.score)
 	    //   .join(', ')
 	    return (React__namespace.createElement("li", { ...other },
-	        React__namespace.createElement(material.Grid, { container: true },
-	            React__namespace.createElement(material.Grid, { item: true },
+	        React__namespace.createElement(material.Grid2, { container: true },
+	            React__namespace.createElement(material.Grid2, null,
 	                React__namespace.createElement(material.Typography, { component: "span" }, ontologyManager.applyPrefixes(option.term.id)),
 	                ' ',
 	                React__namespace.createElement(HighlightedText, { str: option.term.lbl ?? '(no label)', search: inputValue }),
@@ -48675,43 +48912,43 @@
 	    return (React__default["default"].createElement(Dialog, { open: true, title: "Feature attributes", handleClose: handleClose, maxWidth: false, "data-testid": "modify-feature-attribute" },
 	        React__default["default"].createElement("form", { onSubmit: onSubmit },
 	            React__default["default"].createElement(material.DialogContent, null,
-	                React__default["default"].createElement(material.Grid, { container: true, direction: "column", spacing: 1 },
+	                React__default["default"].createElement(material.Grid2, { container: true, direction: "column", spacing: 1 },
 	                    Object.entries(attributes).map(([key, value]) => {
 	                        const EditorComponent = reservedKeys$1.get(key) ?? CustomAttributeValueEditor$1;
-	                        return (React__default["default"].createElement(material.Grid, { container: true, item: true, spacing: 3, alignItems: "center", key: key },
-	                            React__default["default"].createElement(material.Grid, { item: true, xs: "auto" },
+	                        return (React__default["default"].createElement(material.Grid2, { container: true, spacing: 3, alignItems: "center", key: key },
+	                            React__default["default"].createElement(material.Grid2, null,
 	                                React__default["default"].createElement(material.Paper, { variant: "outlined", className: classes.attributeName },
 	                                    React__default["default"].createElement(material.Typography, null, key))),
-	                            React__default["default"].createElement(material.Grid, { item: true, flexGrow: 1 },
+	                            React__default["default"].createElement(material.Grid2, { flexGrow: 1 },
 	                                React__default["default"].createElement(EditorComponent, { session: session, value: value, onChange: makeOnChange(key) })),
-	                            React__default["default"].createElement(material.Grid, { item: true, xs: 1 },
+	                            React__default["default"].createElement(material.Grid2, null,
 	                                React__default["default"].createElement(material.IconButton, { "aria-label": "delete", size: "medium", disabled: !editable, onClick: () => {
 	                                        deleteAttribute(key);
 	                                    } },
 	                                    React__default["default"].createElement(default_1$7, { fontSize: "medium", key: key })))));
 	                    }),
-	                    React__default["default"].createElement(material.Grid, { item: true },
+	                    React__default["default"].createElement(material.Grid2, null,
 	                        React__default["default"].createElement(material.Button, { color: "primary", variant: "contained", disabled: showAddNewForm || !editable, onClick: () => {
 	                                setShowAddNewForm(true);
 	                            } }, "Add new")),
-	                    showAddNewForm ? (React__default["default"].createElement(material.Grid, { item: true },
+	                    showAddNewForm ? (React__default["default"].createElement(material.Grid2, null,
 	                        React__default["default"].createElement(material.Paper, { elevation: 8, className: classes.newAttributePaper },
-	                            React__default["default"].createElement(material.Grid, { container: true, direction: "column" },
-	                                React__default["default"].createElement(material.Grid, { item: true },
+	                            React__default["default"].createElement(material.Grid2, { container: true, direction: "column" },
+	                                React__default["default"].createElement(material.Grid2, null,
 	                                    React__default["default"].createElement(material.FormControl, null,
 	                                        React__default["default"].createElement(material.FormLabel, { id: "attribute-radio-button-group" }, "Select attribute type"),
 	                                        React__default["default"].createElement(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: "custom", name: "radio-buttons-group", onChange: handleRadioButtonChange },
-	                                            React__default["default"].createElement(material.FormControlLabel, { value: "custom", control: React__default["default"].createElement(material.Radio, null), disableTypography: true, label: React__default["default"].createElement(material.Grid, { container: true, spacing: 1, alignItems: "center" },
-	                                                    React__default["default"].createElement(material.Grid, { item: true },
+	                                            React__default["default"].createElement(material.FormControlLabel, { value: "custom", control: React__default["default"].createElement(material.Radio, null), disableTypography: true, label: React__default["default"].createElement(material.Grid2, { container: true, spacing: 1, alignItems: "center" },
+	                                                    React__default["default"].createElement(material.Grid2, null,
 	                                                        React__default["default"].createElement(material.Typography, null, "Custom")),
-	                                                    React__default["default"].createElement(material.Grid, { item: true },
+	                                                    React__default["default"].createElement(material.Grid2, null,
 	                                                        React__default["default"].createElement(material.TextField, { label: "Custom attribute key", variant: "outlined", value: reservedKeys$1.has(newAttributeKey)
 	                                                                ? ''
 	                                                                : newAttributeKey, disabled: reservedKeys$1.has(newAttributeKey), onChange: (event) => {
 	                                                                setNewAttributeKey(event.target.value);
 	                                                            } }))) }),
 	                                            [...reservedKeys$1.keys()].map((key) => (React__default["default"].createElement(material.FormControlLabel, { key: key, value: key, control: React__default["default"].createElement(material.Radio, null), label: key })))))),
-	                                React__default["default"].createElement(material.Grid, { item: true },
+	                                React__default["default"].createElement(material.Grid2, null,
 	                                    React__default["default"].createElement(material.DialogActions, null,
 	                                        React__default["default"].createElement(material.Button, { key: "addButton", color: "primary", variant: "contained", style: { margin: 2 }, onClick: handleAddNewAttributeChange, disabled: !newAttributeKey }, "Add"),
 	                                        React__default["default"].createElement(material.Button, { key: "cancelAddButton", variant: "outlined", type: "submit", onClick: () => {
@@ -49099,13 +49336,12 @@
 	    };
 	    return (React__default["default"].createElement(Dialog, { open: true, title: "Add reference sequence aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-refseq-alias", fullWidth: true },
 	        React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-	            React__default["default"].createElement(material.Grid, { container: true, spacing: 2 },
-	                React__default["default"].createElement(material.Grid, { item: true, xs: 4 },
+	            React__default["default"].createElement(material.Grid2, { container: true, spacing: 2 },
+	                React__default["default"].createElement(material.Grid2, null,
 	                    React__default["default"].createElement(material.FormControl, { disabled: enableSubmit && !errorMessage, fullWidth: true },
 	                        React__default["default"].createElement(material.InputLabel, { id: "demo-simple-select-label" }, "Assembly"),
 	                        React__default["default"].createElement(material.Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Assembly", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName ?? option.name)))))),
-	                React__default["default"].createElement(material.Grid, { item: true, xs: 1 }),
-	                React__default["default"].createElement(material.Grid, { item: true, xs: 7 },
+	                React__default["default"].createElement(material.Grid2, null,
 	                    React__default["default"].createElement(material.InputLabel, null, "Load RefName alias"),
 	                    React__default["default"].createElement("input", { type: "file", onChange: handleChangeFileHandler, ref: fileRef, disabled: (enableSubmit && !errorMessage) || !selectedAssembly }))),
 	            selectedAssembly && refNameAliasMap.size > 0 ? (React__default["default"].createElement("div", { style: { height: 200, width: '100%', marginTop: 20 } },
@@ -49796,16 +50032,7 @@
 	function isSimpleFeatureSerialized(args) {
 	  return 'uniqueId' in args && _typeof(args.data) !== 'object';
 	}
-	/**
-	 * Simple implementation of a feature object.
-	 */
 	var SimpleFeature = /*#__PURE__*/function () {
-	  /**
-	   * @param args - SimpleFeature args
-	   *
-	   * Note: args.data.subfeatures can be an array of these same args,
-	   * which will be inflated to more instances of this class.
-	   */
 	  function SimpleFeature(args) {
 	    var _this = this;
 	    _classCallCheck(this, SimpleFeature);
@@ -49813,14 +50040,9 @@
 	    if (isSimpleFeatureSerialized(args)) {
 	      this.data = args;
 	    } else {
-	      this.data = args.data || {};
-	      // load handle from args.parent (not args.data.parent)
-	      // this reason is because if args is an object, it likely isn't properly loaded with
-	      // parent as a Feature reference (probably a raw parent ID or something instead)
+	      this.data = args.data;
 	      this.parentHandle = args.parent;
 	    }
-	    // the feature id comes from
-	    // args.id, args.data.uniqueId, or args.uniqueId due to this initialization
 	    var id = isSimpleFeatureSerialized(args) ? args.uniqueId : args.id;
 	    if (id === undefined || id === null) {
 	      throw new Error('SimpleFeature requires a unique `id` or `data.uniqueId` attribute');
@@ -49830,9 +50052,7 @@
 	      throw new Error("invalid feature data, end less than start. end: ".concat(this.data.end, " start: ").concat(this.data.start));
 	    }
 	    if (this.data.subfeatures) {
-	      this.subfeatures = (_a = this.data.subfeatures) === null || _a === void 0 ? void 0 : _a.map(
-	      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-	      function (f, i) {
+	      this.subfeatures = (_a = this.data.subfeatures) === null || _a === void 0 ? void 0 : _a.map(function (f, i) {
 	        return typeof f.get !== 'function' ? new SimpleFeature({
 	          id: f.uniqueId || "".concat(id, "-").concat(i),
 	          data: _objectSpread2({
@@ -49843,52 +50063,31 @@
 	      });
 	    }
 	  }
-	  /**
-	   * Get a piece of data about the feature.  All features must have
-	   * 'start' and 'end', but everything else is optional.
-	   */
-	  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 	  _createClass(SimpleFeature, [{
 	    key: "get",
 	    value: function get(name) {
 	      return name === 'subfeatures' ? this.subfeatures : name === 'parent' ? this.parent() : this.data[name];
 	    }
-	    /**
-	     * Set an item of data.
-	     */
-	    // eslint-disable-next-line @typescript-eslint/no-explicit-any
 	  }, {
 	    key: "set",
 	    value: function set(name, val) {
 	      this.data[name] = val;
 	    }
-	    /**
-	     * Get an array listing which data keys are present in this feature.
-	     */
 	  }, {
 	    key: "tags",
 	    value: function tags() {
 	      return Object.keys(this.data);
 	    }
-	    /**
-	     * Get the unique ID of this feature.
-	     */
 	  }, {
 	    key: "id",
 	    value: function id() {
 	      return this.uniqueId;
 	    }
-	    /**
-	     * Get this feature's parent feature, or undefined if none.
-	     */
 	  }, {
 	    key: "parent",
 	    value: function parent() {
 	      return this.parentHandle;
 	    }
-	    /**
-	     * Get an array of child features, or undefined if none.
-	     */
 	  }, {
 	    key: "children",
 	    value: function children() {
@@ -49932,11 +50131,11 @@
 	const isInWebWorker$1 = typeof sessionStorage === 'undefined';
 	class ApolloSequenceAdapter extends BaseAdapter.BaseSequenceAdapter {
 	    regions;
-	    async getRefNames(opts) {
-	        const regions = await this.getRegions(opts);
+	    async getRefNames() {
+	        const regions = await this.getRegions();
 	        return regions.map((regions) => regions.refName);
 	    }
-	    async getRegions(opts) {
+	    async getRegions() {
 	        if (this.regions) {
 	            return this.regions;
 	        }
@@ -49968,7 +50167,7 @@
 	                removeEventListener('message', messageListener);
 	                resolve(data.regions);
 	            };
-	            addEventListener('message', messageListener, opts);
+	            addEventListener('message', messageListener);
 	            // @ts-expect-error waiting for types to be published
 	            globalThis.rpcServer.emit('apollo', {
 	                apollo: true,
@@ -49985,7 +50184,7 @@
 	     * @param param -
 	     * @returns Observable of Feature objects in the region
 	     */
-	    getFeatures(region, opts) {
+	    getFeatures(region) {
 	        const { end, refName, start } = region;
 	        const assemblyId = configuration.readConfObject(this.config, 'assemblyId');
 	        const regionWithAssemblyName = { ...region, assemblyName: assemblyId };
@@ -50022,7 +50221,7 @@
 	                    removeEventListener('message', messageListener);
 	                    resolve(data.sequence);
 	                };
-	                addEventListener('message', messageListener, opts);
+	                addEventListener('message', messageListener);
 	                // @ts-expect-error waiting for types to be published
 	                globalThis.rpcServer.emit('apollo', {
 	                    apollo: true,
@@ -50819,7 +51018,7 @@
 	                .filter(([id, refName]) => id !== refName)
 	                .map(([id, refName]) => ({
 	                _id: id,
-	                name: refName ?? '',
+	                name: refName,
 	            }));
 	            const refSeqId = newRefNames.find((item) => item.name === refName)?._id;
 	            if (!refSeqId) {
@@ -50955,6 +51154,285 @@
 	    return pluggableElement;
 	}
 
+	/* eslint-disable react-hooks/exhaustive-deps */
+	const isGeneOrTranscript = (annotationFeature, apolloSessionModel) => {
+	    const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
+	    if (!featureTypeOntology) {
+	        throw new Error('featureTypeOntology is undefined');
+	    }
+	    return (featureTypeOntology.isTypeOf(annotationFeature.type, 'gene') ||
+	        featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
+	        featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript'));
+	};
+	const isTranscript = (annotationFeature, apolloSessionModel) => {
+	    const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
+	    if (!featureTypeOntology) {
+	        throw new Error('featureTypeOntology is undefined');
+	    }
+	    return (featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
+	        featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript'));
+	};
+	function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refSeqId, session, }) {
+	    const apolloSessionModel = session;
+	    const childIds = React.useMemo(() => Object.keys(annotationFeature.children ?? {}), [annotationFeature]);
+	    const features = React.useMemo(() => {
+	        for (const [, asm] of apolloSessionModel.apolloDataStore.assemblies) {
+	            if (asm._id === assembly.name) {
+	                for (const [, refSeq] of asm.refSeqs) {
+	                    if (refSeq._id === refSeqId) {
+	                        return refSeq.features;
+	                    }
+	                }
+	            }
+	        }
+	        return [];
+	    }, []);
+	    const [parentFeatureChecked, setParentFeatureChecked] = React.useState(true);
+	    const [checkedChildrens, setCheckedChildrens] = React.useState(childIds);
+	    const [errorMessage, setErrorMessage] = React.useState('');
+	    const [destinationFeatures, setDestinationFeatures] = React.useState([]);
+	    const [selectedDestinationFeature, setSelectedDestinationFeature] = React.useState();
+	    const getFeatures = (min, max) => {
+	        const filteredFeatures = [];
+	        for (const [, f] of features) {
+	            const featureSnapshot = require$$1$3.getSnapshot(f);
+	            if (min >= featureSnapshot.min && max <= featureSnapshot.max) {
+	                filteredFeatures.push(featureSnapshot);
+	            }
+	        }
+	        return filteredFeatures;
+	    };
+	    React.useEffect(() => {
+	        setErrorMessage('');
+	        if (checkedChildrens.length === 0) {
+	            setParentFeatureChecked(false);
+	            return;
+	        }
+	        if (annotationFeature.children) {
+	            const checkedAnnotationFeatureChildren = Object.values(annotationFeature.children)
+	                .filter((child) => isTranscript(child, apolloSessionModel))
+	                .filter((child) => checkedChildrens.includes(child._id));
+	            const mins = checkedAnnotationFeatureChildren.map((f) => f.min);
+	            const maxes = checkedAnnotationFeatureChildren.map((f) => f.max);
+	            const min = Math.min(...mins);
+	            const max = Math.max(...maxes);
+	            const filteredFeatures = getFeatures(min, max);
+	            setDestinationFeatures(filteredFeatures);
+	            if (filteredFeatures.length === 0 &&
+	                checkedChildrens.length > 0 &&
+	                !parentFeatureChecked) {
+	                setErrorMessage('No destination features found');
+	            }
+	        }
+	    }, [checkedChildrens]);
+	    const handleParentFeatureCheck = (event) => {
+	        const isChecked = event.target.checked;
+	        setParentFeatureChecked(isChecked);
+	        setCheckedChildrens(isChecked ? childIds : []);
+	    };
+	    const handleChildFeatureCheck = (event, child) => {
+	        setCheckedChildrens((prevChecked) => event.target.checked
+	            ? [...prevChecked, child._id]
+	            : prevChecked.filter((childId) => childId !== child._id));
+	    };
+	    const handleDestinationFeatureChange = (e) => {
+	        const selectedFeature = destinationFeatures.find((f) => f._id === e.target.value);
+	        setSelectedDestinationFeature(selectedFeature);
+	    };
+	    const handleCreateApolloAnnotation = async () => {
+	        if (parentFeatureChecked) {
+	            const change = new dist$2.AddFeatureChange({
+	                changedIds: [annotationFeature._id],
+	                typeName: 'AddFeatureChange',
+	                assembly: assembly.name,
+	                addedFeature: annotationFeature,
+	            });
+	            await apolloSessionModel.apolloDataStore.changeManager.submit(change);
+	            session.notify('Annotation added successfully', 'success');
+	            handleClose();
+	        }
+	        else {
+	            if (!annotationFeature.children) {
+	                return;
+	            }
+	            if (!selectedDestinationFeature) {
+	                return;
+	            }
+	            for (const childId of checkedChildrens) {
+	                const child = annotationFeature.children[childId];
+	                const change = new dist$2.AddFeatureChange({
+	                    parentFeatureId: selectedDestinationFeature._id,
+	                    changedIds: [selectedDestinationFeature._id],
+	                    typeName: 'AddFeatureChange',
+	                    assembly: assembly.name,
+	                    addedFeature: child,
+	                });
+	                await apolloSessionModel.apolloDataStore.changeManager.submit(change);
+	                session.notify('Annotation added successfully', 'success');
+	                handleClose();
+	            }
+	        }
+	    };
+	    return (React__default["default"].createElement(Dialog, { open: true, title: "Create Apollo Annotation", handleClose: handleClose, fullWidth: true, maxWidth: "sm" },
+	        React__default["default"].createElement(material.DialogTitle, { fontSize: 15 }, "Select the feature to be copied to apollo track"),
+	        React__default["default"].createElement(material.DialogContent, null,
+	            React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
+	                isGeneOrTranscript(annotationFeature, apolloSessionModel) && (React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${annotationFeature.type}:${annotationFeature.min}..${annotationFeature.max}` })),
+	                annotationFeature.children && (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexDirection: 'column', ml: 3 } }, Object.values(annotationFeature.children)
+	                    .filter((child) => isTranscript(child, apolloSessionModel))
+	                    .map((child) => (React__default["default"].createElement(material.FormControlLabel, { key: child._id, control: React__default["default"].createElement(material.Checkbox, { size: "small", checked: checkedChildrens.includes(child._id), onChange: (e) => {
+	                            handleChildFeatureCheck(e, child);
+	                        } }), label: `${child.type}:${child.min}..${child.max}` })))))),
+	            !parentFeatureChecked &&
+	                checkedChildrens.length > 0 &&
+	                destinationFeatures.length > 0 && (React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
+	                React__default["default"].createElement(material.Typography, { variant: "caption", fontSize: 12 }, "Select the destination feature to copy the selected features"),
+	                React__default["default"].createElement(material.Box, { sx: { mt: 1 } },
+	                    React__default["default"].createElement(material.Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange }, destinationFeatures.map((f) => (React__default["default"].createElement(material.MenuItem, { key: f._id, value: f._id }, `${f.type}:${f.min}..${f.max}`)))))))),
+	        React__default["default"].createElement(material.DialogActions, null,
+	            React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: checkedChildrens.length === 0 ||
+	                    (!parentFeatureChecked &&
+	                        checkedChildrens.length > 0 &&
+	                        !selectedDestinationFeature), onClick: handleCreateApolloAnnotation }, "Create"),
+	            React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel")),
+	        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
+	            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+	}
+
+	function simpleFeatureToGFF3Feature(feature, refSeqId) {
+	    const xfeature = JSON.parse(JSON.stringify(feature));
+	    const children = xfeature.subfeatures;
+	    const gff3Feature = [
+	        {
+	            start: xfeature.start + 1,
+	            end: xfeature.end,
+	            seq_id: refSeqId,
+	            source: xfeature.source ?? null,
+	            type: xfeature.type ?? null,
+	            score: xfeature.score ?? null,
+	            strand: xfeature.strand ? (xfeature.strand === 1 ? '+' : '-') : null,
+	            phase: xfeature.phase !== null || xfeature.phase !== undefined
+	                ? xfeature.phase
+	                : null,
+	            attributes: convertFeatureAttributes(xfeature),
+	            derived_features: [],
+	            child_features: children
+	                ? children.map((x) => simpleFeatureToGFF3Feature(x, refSeqId))
+	                : [],
+	        },
+	    ];
+	    return gff3Feature;
+	}
+	function jbrowseFeatureToAnnotationFeature(feature, refSeqId) {
+	    return dist$2.gff3ToAnnotationFeature(simpleFeatureToGFF3Feature(feature, refSeqId));
+	}
+	function convertFeatureAttributes(feature) {
+	    const attributes = {};
+	    const defaultFields = new Set([
+	        'start',
+	        'end',
+	        'type',
+	        'strand',
+	        'refName',
+	        'subfeatures',
+	        'derived_features',
+	        'phase',
+	        'source',
+	        'score',
+	    ]);
+	    for (const [key, value] of Object.entries(feature)) {
+	        if (defaultFields.has(key)) {
+	            continue;
+	        }
+	        attributes[key] = Array.isArray(value) ? value.map(String) : [String(value)];
+	    }
+	    return attributes;
+	}
+	function annotationFromJBrowseFeature(pluggableElement) {
+	    if (pluggableElement.name !== 'LinearBasicDisplay') {
+	        return pluggableElement;
+	    }
+	    const { stateModel } = pluggableElement;
+	    const newStateModel = stateModel
+	        .views((self) => ({
+	        getFirstRegion() {
+	            const lgv = require$$1$2.getContainingView(self);
+	            return lgv.dynamicBlocks.contentBlocks[0];
+	        },
+	        getAssembly() {
+	            const firstRegion = self.getFirstRegion();
+	            const session = require$$1$2.getSession(self);
+	            const { assemblyManager } = session;
+	            const { assemblyName } = firstRegion;
+	            const assembly = assemblyManager.get(assemblyName);
+	            if (!assembly) {
+	                throw new Error(`Could not find assembly named ${assemblyName}`);
+	            }
+	            return assembly;
+	        },
+	        getRefSeqId(assembly) {
+	            const firstRegion = self.getFirstRegion();
+	            const { refName } = firstRegion;
+	            const { refNameAliases } = assembly;
+	            if (!refNameAliases) {
+	                throw new Error(`Could not find aliases for ${assembly.name}`);
+	            }
+	            const newRefNames = [...Object.entries(refNameAliases)]
+	                .filter(([id, refName]) => id !== refName)
+	                .map(([id, refName]) => ({
+	                _id: id,
+	                name: refName,
+	            }));
+	            const refSeqId = newRefNames.find((item) => item.name === refName)?._id;
+	            if (!refSeqId) {
+	                throw new Error(`Could not find refSeqId named ${refName}`);
+	            }
+	            return refSeqId;
+	        },
+	        getAnnotationFeature(assembly) {
+	            const refSeqId = self.getRefSeqId(assembly);
+	            const sfeature = self.contextMenuFeature.data;
+	            return jbrowseFeatureToAnnotationFeature(sfeature, refSeqId);
+	        },
+	    }))
+	        .views((self) => {
+	        const superContextMenuItems = self.contextMenuItems;
+	        const session = require$$1$2.getSession(self);
+	        const assembly = self.getAssembly();
+	        return {
+	            contextMenuItems() {
+	                const feature = self.contextMenuFeature;
+	                if (!feature) {
+	                    return superContextMenuItems();
+	                }
+	                return [
+	                    ...superContextMenuItems(),
+	                    {
+	                        label: 'Create Apollo annotation',
+	                        icon: default_1$a,
+	                        onClick: () => {
+	                            session.queueDialog((doneCallback) => [
+	                                CreateApolloAnnotation,
+	                                {
+	                                    session,
+	                                    handleClose: () => {
+	                                        doneCallback();
+	                                    },
+	                                    annotationFeature: self.getAnnotationFeature(assembly),
+	                                    assembly,
+	                                    refSeqId: self.getRefSeqId(assembly),
+	                                },
+	                            ]);
+	                        },
+	                    },
+	                ];
+	            },
+	        };
+	    });
+	    pluggableElement.stateModel = newStateModel;
+	    return pluggableElement;
+	}
+
 	/* eslint-disable @typescript-eslint/unbound-method */
 	const StringTextField = mobxReact.observer(function StringTextField({ onChangeCommitted, value: initialValue, ...props }) {
 	    const [value, setValue] = React.useState(String(initialValue));
@@ -51161,44 +51639,44 @@
 	    }
 	    return (React__default["default"].createElement(React__default["default"].Fragment, null,
 	        React__default["default"].createElement(material.Typography, { variant: "h5" }, "Attributes"),
-	        React__default["default"].createElement(material.Grid, { container: true, direction: "column", spacing: 1 },
+	        React__default["default"].createElement(material.Grid2, { container: true, direction: "column", spacing: 1 },
 	            Object.entries(attributes).map(([key, value]) => {
 	                if (key === '') {
 	                    return null;
 	                }
 	                const EditorComponent = reservedKeys.get(key) ?? CustomAttributeValueEditor;
-	                return (React__default["default"].createElement(material.Grid, { container: true, item: true, spacing: 3, alignItems: "center", key: key },
-	                    React__default["default"].createElement(material.Grid, { item: true, xs: "auto" },
+	                return (React__default["default"].createElement(material.Grid2, { container: true, spacing: 3, alignItems: "center", key: key },
+	                    React__default["default"].createElement(material.Grid2, null,
 	                        React__default["default"].createElement(material.Paper, { variant: "outlined", className: classes.attributeName },
 	                            React__default["default"].createElement(material.Typography, null, key))),
-	                    React__default["default"].createElement(material.Grid, { item: true, flexGrow: 1 },
+	                    React__default["default"].createElement(material.Grid2, { flexGrow: 1 },
 	                        React__default["default"].createElement(EditorComponent, { session: session, value: value, onChange: (newValue) => onChangeCommitted(key, newValue) })),
-	                    React__default["default"].createElement(material.Grid, { item: true, xs: 1 },
+	                    React__default["default"].createElement(material.Grid2, null,
 	                        React__default["default"].createElement(material.IconButton, { "aria-label": "delete", size: "medium", disabled: !editable, onClick: () => onChangeCommitted(key) },
 	                            React__default["default"].createElement(default_1$7, { fontSize: "medium", key: key })))));
 	            }),
-	            React__default["default"].createElement(material.Grid, { item: true },
+	            React__default["default"].createElement(material.Grid2, null,
 	                React__default["default"].createElement(material.Button, { color: "primary", variant: "contained", disabled: showAddNewForm || !editable, onClick: () => {
 	                        setShowAddNewForm(true);
 	                    } }, "Add new")),
-	            showAddNewForm ? (React__default["default"].createElement(material.Grid, { item: true },
+	            showAddNewForm ? (React__default["default"].createElement(material.Grid2, null,
 	                React__default["default"].createElement(material.Paper, { elevation: 8, className: classes.newAttributePaper },
-	                    React__default["default"].createElement(material.Grid, { container: true, direction: "column" },
-	                        React__default["default"].createElement(material.Grid, { item: true },
+	                    React__default["default"].createElement(material.Grid2, { container: true, direction: "column" },
+	                        React__default["default"].createElement(material.Grid2, null,
 	                            React__default["default"].createElement(material.FormControl, null,
 	                                React__default["default"].createElement(material.FormLabel, { id: "attribute-radio-button-group" }, "Select attribute type"),
 	                                React__default["default"].createElement(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: "custom", name: "radio-buttons-group", onChange: handleRadioButtonChange },
-	                                    React__default["default"].createElement(material.FormControlLabel, { value: "custom", control: React__default["default"].createElement(material.Radio, null), disableTypography: true, label: React__default["default"].createElement(material.Grid, { container: true, spacing: 1, alignItems: "center" },
-	                                            React__default["default"].createElement(material.Grid, { item: true },
+	                                    React__default["default"].createElement(material.FormControlLabel, { value: "custom", control: React__default["default"].createElement(material.Radio, null), disableTypography: true, label: React__default["default"].createElement(material.Grid2, { container: true, spacing: 1, alignItems: "center" },
+	                                            React__default["default"].createElement(material.Grid2, null,
 	                                                React__default["default"].createElement(material.Typography, null, "Custom")),
-	                                            React__default["default"].createElement(material.Grid, { item: true },
+	                                            React__default["default"].createElement(material.Grid2, null,
 	                                                React__default["default"].createElement(material.TextField, { label: "Custom attribute key", variant: "outlined", value: reservedKeys.has(newAttributeKey)
 	                                                        ? ''
 	                                                        : newAttributeKey, disabled: reservedKeys.has(newAttributeKey), onChange: (event) => {
 	                                                        setNewAttributeKey(event.target.value);
 	                                                    } }))) }),
 	                                    [...reservedKeys.keys()].map((key) => (React__default["default"].createElement(material.FormControlLabel, { key: key, value: key, control: React__default["default"].createElement(material.Radio, null), label: key })))))),
-	                        React__default["default"].createElement(material.Grid, { item: true },
+	                        React__default["default"].createElement(material.Grid2, null,
 	                            React__default["default"].createElement(material.DialogActions, null,
 	                                React__default["default"].createElement(material.Button, { key: "addButton", color: "primary", variant: "contained", onClick: handleAddNewAttributeChange, disabled: !newAttributeKey }, "Add"),
 	                                React__default["default"].createElement(material.Button, { key: "cancelAddButton", variant: "outlined", type: "submit", onClick: () => {
@@ -51380,6 +51858,47 @@
 	        React__default["default"].createElement("div", null, showSequence && (React__default["default"].createElement("textarea", { readOnly: true, rows: 20, className: classes.sequence, value: sequence })))));
 	});
 
+	const FeatureDetailsNavigation = mobxReact.observer(function FeatureDetailsNavigation(props) {
+	    const { feature, model } = props;
+	    const { children, parent } = feature;
+	    const childFeatures = [];
+	    if (children) {
+	        for (const [, child] of children) {
+	            childFeatures.push(child);
+	        }
+	    }
+	    if (!(parent ?? childFeatures.length > 0)) {
+	        return null;
+	    }
+	    return (React__default["default"].createElement("div", null,
+	        React__default["default"].createElement(material.Typography, { variant: "h5" }, "Go to related feature"),
+	        parent && (React__default["default"].createElement("div", null,
+	            React__default["default"].createElement(material.Typography, { variant: "h6" }, "Parent:"),
+	            React__default["default"].createElement(material.Button, { variant: "contained", onClick: () => {
+	                    model.setFeature(parent);
+	                } },
+	                parent.type,
+	                " (",
+	                parent.min,
+	                "..",
+	                parent.max,
+	                ")"))),
+	        childFeatures.length > 0 && (React__default["default"].createElement("div", null,
+	            React__default["default"].createElement(material.Typography, { variant: "h6" },
+	                childFeatures.length === 1 ? 'Child' : 'Children',
+	                ":"),
+	            childFeatures.map((child) => (React__default["default"].createElement("div", { key: child._id, style: { marginBottom: 5 } },
+	                React__default["default"].createElement(material.Button, { variant: "contained", onClick: () => {
+	                        model.setFeature(child);
+	                    } },
+	                    child.type,
+	                    " (",
+	                    child.min,
+	                    "..",
+	                    child.max,
+	                    ")"))))))));
+	});
+
 	const useStyles$8 = mui.makeStyles()((theme) => ({
 	    root: {
 	        padding: theme.spacing(2),
@@ -51410,7 +51929,9 @@
 	        React__default["default"].createElement("hr", null),
 	        React__default["default"].createElement(Attributes, { feature: feature, session: session, assembly: currentAssembly._id, editable: true }),
 	        React__default["default"].createElement("hr", null),
-	        React__default["default"].createElement(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName })));
+	        React__default["default"].createElement(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName }),
+	        React__default["default"].createElement("hr", null),
+	        React__default["default"].createElement(FeatureDetailsNavigation, { model: model, feature: feature })));
 	});
 
 	var dist = {};
@@ -51551,18 +52072,27 @@
 	        return false;
 	      },
 	      get transcriptParts() {
-	        if (self.type !== 'mRNA') {
-	          throw new Error('Only features of type "mRNA" or equivalent can calculate CDS locations');
+	        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+	        var session = (0, util_1.getSession)(self);
+	        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+	        var apolloDataStore = session.apolloDataStore;
+	        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+	        var featureTypeOntology = apolloDataStore.ontologyManager.featureTypeOntology;
+	        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+	        if (!featureTypeOntology.isTypeOf(self.type, 'transcript')) {
+	          throw new Error('Only features of type "transcript" or equivalent can calculate CDS locations');
 	        }
 	        var children = self.children;
 	        if (!children) {
-	          throw new Error('no CDS or exons in mRNA');
+	          throw new Error('no CDS or exons in transcript');
 	        }
-	        var cdsChildren = _toConsumableArray(children.values()).filter(function (child) {
-	          return child.type === 'CDS';
+	        var cdsChildren = _toConsumableArray(children.values()).filter(
+	        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+	        function (child) {
+	          return featureTypeOntology.isTypeOf(child.type, 'CDS');
 	        });
 	        if (cdsChildren.length === 0) {
-	          throw new Error('no CDS in mRNA');
+	          throw new Error('no CDS in transcript');
 	        }
 	        var transcriptParts = [];
 	        var _iterator4 = _createForOfIteratorHelper(cdsChildren),
@@ -51581,7 +52111,8 @@
 	              for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
 	                var _step5$value = _slicedToArray(_step5.value, 2),
 	                  _child = _step5$value[1];
-	                if (_child.type === 'exon') {
+	                // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+	                if (featureTypeOntology.isTypeOf(_child.type, 'exon')) {
 	                  exonLocations.push({
 	                    min: _child.min,
 	                    max: _child.max
@@ -52162,7 +52693,14 @@
 	    if (!refData) {
 	        return null;
 	    }
-	    const { strand, transcriptParts } = feature;
+	    let strand, transcriptParts;
+	    try {
+	        ;
+	        ({ strand, transcriptParts } = feature);
+	    }
+	    catch {
+	        return null;
+	    }
 	    const [firstLocation] = transcriptParts;
 	    const locationData = firstLocation
 	        .map((loc, idx) => {
@@ -52303,6 +52841,28 @@
 	            segments.push({ type: 'CDS', sequenceLines, locs });
 	            return segments;
 	        }
+	        case 'protein': {
+	            let wholeSequence = '';
+	            const [firstLocation] = cdsLocations;
+	            const locs = [];
+	            for (const loc of firstLocation) {
+	                let sequence = getSequence(loc.min, loc.max);
+	                if (strand === -1) {
+	                    sequence = require$$1$2.revcom(sequence);
+	                }
+	                wholeSequence += sequence;
+	                locs.push({ min: loc.min, max: loc.max });
+	            }
+	            let protein = '';
+	            for (let i = 0; i < wholeSequence.length; i += 3) {
+	                const codonSeq = wholeSequence.slice(i, i + 3).toUpperCase();
+	                protein +=
+	                    require$$1$2.defaultCodonTable[codonSeq] || '&';
+	            }
+	            const sequenceLines = dist$2.splitStringIntoChunks(protein, SEQUENCE_WRAP_LENGTH);
+	            segments.push({ type: 'protein', sequenceLines, locs });
+	            return segments;
+	        }
 	    }
 	}
 	function getSegmentColor(type) {
@@ -52391,7 +52951,8 @@
 	            React__default["default"].createElement(material.Select, { defaultValue: "CDS", value: selectedOption, onChange: handleChangeSeqOption },
 	                React__default["default"].createElement(material.MenuItem, { value: "CDS" }, "CDS"),
 	                React__default["default"].createElement(material.MenuItem, { value: "cDNA" }, "cDNA"),
-	                React__default["default"].createElement(material.MenuItem, { value: "genomic" }, "Genomic")),
+	                React__default["default"].createElement(material.MenuItem, { value: "genomic" }, "Genomic"),
+	                React__default["default"].createElement(material.MenuItem, { value: "protein" }, "Protein")),
 	            React__default["default"].createElement(material.Paper, { style: {
 	                    fontFamily: 'monospace',
 	                    padding: theme.spacing(),
@@ -52629,7 +53190,12 @@
 	                ]);
 	            },
 	        });
-	        if (feature.type === 'mRNA' && require$$1$2.isSessionModelWithWidgets(session)) {
+	        const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+	        if (!featureTypeOntology) {
+	            throw new Error('featureTypeOntology is undefined');
+	        }
+	        if (featureTypeOntology.isTypeOf(feature.type, 'transcript') &&
+	            require$$1$2.isSessionModelWithWidgets(session)) {
 	            menuItems.push({
 	                label: 'Edit transcript details',
 	                onClick: () => {
@@ -52701,6 +53267,381 @@
 	            } })));
 	});
 
+	/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+	const useStyles$4 = mui.makeStyles()((theme) => ({
+	    typeContent: {
+	        display: 'inline-block',
+	        width: '174px',
+	        height: '100%',
+	        cursor: 'text',
+	    },
+	    feature: {
+	        td: {
+	            position: 'relative',
+	            verticalAlign: 'top',
+	            paddingLeft: '0.5em',
+	        },
+	    },
+	    arrow: {
+	        display: 'inline-block',
+	        width: '1.6em',
+	        textAlign: 'center',
+	        cursor: 'pointer',
+	    },
+	    arrowExpanded: {
+	        transform: 'rotate(90deg)',
+	    },
+	    hoveredFeature: {
+	        backgroundColor: theme.palette.action.hover,
+	    },
+	    typeInputElement: {
+	        border: 'none',
+	        background: 'none',
+	    },
+	    typeErrorMessage: {
+	        color: 'red',
+	    },
+	}));
+	function makeContextMenuItems(display, feature) {
+	    const { changeManager, getAssemblyId, regions, selectedFeature, session, setSelectedFeature, } = display;
+	    return featureContextMenuItems(feature, regions[0], getAssemblyId, selectedFeature, setSelectedFeature, session, changeManager);
+	}
+	function getTopLevelFeature(feature) {
+	    let cur = feature;
+	    while (cur.parent) {
+	        cur = cur.parent;
+	    }
+	    return cur;
+	}
+	const Feature = mobxReact.observer(function Feature({ depth, feature, isHovered, isSelected, model: displayState, selectedFeatureClass, setContextMenu, }) {
+	    const { classes } = useStyles$4();
+	    const { apolloHover, changeManager, selectedFeature, session, tabularEditor: tabularEditorState, } = displayState;
+	    const { featureCollapsed, filterText } = tabularEditorState;
+	    const { _id, children, max, min, strand, type } = feature;
+	    const expanded = !featureCollapsed.get(_id);
+	    const toggleExpanded = (e) => {
+	        e.stopPropagation();
+	        tabularEditorState.setFeatureCollapsed(_id, expanded);
+	    };
+	    // pop up a snackbar in the session notifying user of an error
+	    const notifyError = (e) => {
+	        session.notify(e.message, 'error');
+	    };
+	    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+	        React__default["default"].createElement("tr", { onMouseEnter: (_e) => {
+	                displayState.setApolloHover({
+	                    feature,
+	                    topLevelFeature: getTopLevelFeature(feature),
+	                    glyph: displayState.getGlyph(getTopLevelFeature(feature)),
+	                });
+	            }, className: classes.feature +
+	                (isSelected
+	                    ? ` ${selectedFeatureClass}`
+	                    : isHovered
+	                        ? ` ${classes.hoveredFeature}`
+	                        : ''), onClick: (e) => {
+	                e.stopPropagation();
+	                displayState.setSelectedFeature(feature);
+	            }, onContextMenu: (e) => {
+	                e.preventDefault();
+	                setContextMenu({
+	                    position: { left: e.clientX + 2, top: e.clientY - 6 },
+	                    items: makeContextMenuItems(displayState, feature),
+	                });
+	                return false;
+	            } },
+	            React__default["default"].createElement("td", { style: {
+	                    whiteSpace: 'nowrap',
+	                    borderLeft: `${depth * 2}em solid transparent`,
+	                } },
+	                children?.size ? (
+	                // TODO: a11y
+	                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+	                React__default["default"].createElement("div", { onClick: toggleExpanded, className: classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : '') }, "\u276F")) : null,
+	                React__default["default"].createElement("div", { className: classes.typeContent },
+	                    React__default["default"].createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTypeTerms.bind(null, feature), renderInput: (params) => {
+	                            return (React__default["default"].createElement("div", { ref: params.InputProps.ref },
+	                                React__default["default"].createElement("input", { type: "text", ...params.inputProps, className: classes.typeInputElement, style: { width: 170 } }),
+	                                params.error ? (React__default["default"].createElement("div", { className: classes.typeErrorMessage }, params.errorMessage ?? 'unknown error')) : null));
+	                        }, onChange: (oldValue, newValue) => {
+	                            if (newValue) {
+	                                handleFeatureTypeChange(changeManager, feature, oldValue, newValue).catch(notifyError);
+	                            }
+	                        } }))),
+	            React__default["default"].createElement("td", null,
+	                React__default["default"].createElement(NumberCell, { initialValue: min + 1, notifyError: notifyError, onChangeCommitted: (newStart) => handleFeatureStartChange(changeManager, feature, min, newStart - 1) })),
+	            React__default["default"].createElement("td", null,
+	                React__default["default"].createElement(NumberCell, { initialValue: max, notifyError: notifyError, onChangeCommitted: (newEnd) => handleFeatureEndChange(changeManager, feature, max, newEnd) })),
+	            React__default["default"].createElement("td", null, strand === 1 ? '+' : strand === -1 ? '-' : undefined),
+	            React__default["default"].createElement("td", null,
+	                React__default["default"].createElement(FeatureAttributes, { filterText: filterText, feature: feature }))),
+	        expanded && children
+	            ? [...children.entries()]
+	                .filter((entry) => {
+	                if (!filterText) {
+	                    return true;
+	                }
+	                const [, childFeature] = entry;
+	                // search feature and its subfeatures for the text
+	                const text = JSON.stringify(childFeature);
+	                return text.includes(filterText);
+	            })
+	                .map(([featureId, childFeature]) => {
+	                const childHovered = apolloHover?.feature._id === childFeature._id;
+	                const childSelected = selectedFeature?._id === childFeature._id;
+	                return (React__default["default"].createElement(Feature, { isHovered: childHovered, isSelected: childSelected, selectedFeatureClass: selectedFeatureClass, key: featureId, depth: (depth || 0) + 1, feature: childFeature, model: displayState, setContextMenu: setContextMenu }));
+	            })
+	            : null));
+	});
+	async function fetchValidTypeTerms(feature, ontologyStore, _signal) {
+	    const { parent: parentFeature } = feature;
+	    if (parentFeature) {
+	        // if this is a child of an existing feature, restrict the autocomplete choices to valid
+	        // parts of that feature
+	        const parentTypeTerms = await ontologyStore.getTermsWithLabelOrSynonym(parentFeature.type, { includeSubclasses: false });
+	        // eslint-disable-next-line unicorn/no-array-callback-reference
+	        const parentTypeClassTerms = parentTypeTerms.filter(isOntologyClass);
+	        if (parentTypeClassTerms.length > 0) {
+	            const subpartTerms = await ontologyStore.getClassesThat('part_of', parentTypeClassTerms);
+	            return subpartTerms;
+	        }
+	    }
+	    return;
+	}
+
+	const useStyles$3 = mui.makeStyles()((theme) => ({
+	    scrollableTable: {
+	        width: '100%',
+	        height: '100%',
+	        th: {
+	            position: 'sticky',
+	            top: 0,
+	            zIndex: 2,
+	            textAlign: 'left',
+	            background: theme.palette.background.paper,
+	            paddingTop: '3.2em',
+	        },
+	        td: { whiteSpace: 'normal' },
+	    },
+	    selectedFeature: {
+	        backgroundColor: theme.palette.action.selected,
+	    },
+	}));
+	const HybridGrid = mobxReact.observer(function HybridGrid({ model, }) {
+	    const { apolloHover, seenFeatures, selectedFeature, tabularEditor } = model;
+	    const theme = material.useTheme();
+	    const { classes } = useStyles$3();
+	    const scrollContainerRef = React.useRef(null);
+	    const [contextMenu, setContextMenu] = React.useState(null);
+	    const { filterText } = tabularEditor;
+	    // scrolls to selected feature if one is selected and it's not already visible
+	    React.useEffect(() => {
+	        const scrollContainer = scrollContainerRef.current;
+	        if (scrollContainer && selectedFeature) {
+	            const selectedRow = scrollContainer.querySelector(`.${classes.selectedFeature}`);
+	            if (selectedRow) {
+	                const currScroll = scrollContainer.scrollTop;
+	                const newScrollTop = selectedRow.offsetTop - 25;
+	                const isVisible = newScrollTop > currScroll &&
+	                    newScrollTop < currScroll + scrollContainer.offsetHeight;
+	                if (!isVisible) {
+	                    scrollContainer.scroll({ top: newScrollTop - 40, behavior: 'smooth' });
+	                }
+	            }
+	        }
+	    }, [selectedFeature, seenFeatures, classes.selectedFeature]);
+	    return (React__default["default"].createElement("div", { ref: scrollContainerRef, style: { width: '100%', overflowY: 'auto', height: '100%' } },
+	        React__default["default"].createElement("table", { className: classes.scrollableTable },
+	            React__default["default"].createElement("thead", null,
+	                React__default["default"].createElement("tr", null,
+	                    React__default["default"].createElement("th", null, "Type"),
+	                    React__default["default"].createElement("th", null, "Start"),
+	                    React__default["default"].createElement("th", null, "End"),
+	                    React__default["default"].createElement("th", null, "Strand"),
+	                    React__default["default"].createElement("th", null, "Attributes"))),
+	            React__default["default"].createElement("tbody", null, [...seenFeatures.entries()]
+	                .filter((entry) => {
+	                if (!filterText) {
+	                    return true;
+	                }
+	                const [, feature] = entry;
+	                // search feature and its subfeatures for the text
+	                const text = JSON.stringify(feature);
+	                return text.includes(filterText);
+	            })
+	                .sort((a, b) => {
+	                return a[1].min - b[1].min;
+	            })
+	                .map(([featureId, feature]) => {
+	                const isSelected = selectedFeature?._id === featureId;
+	                const isHovered = apolloHover?.feature._id === featureId;
+	                return (React__default["default"].createElement(Feature, { key: featureId, isSelected: isSelected, isHovered: isHovered, selectedFeatureClass: classes.selectedFeature, feature: feature, model: model, depth: 0, setContextMenu: setContextMenu }));
+	            }))),
+	        React__default["default"].createElement(ui.Menu, { open: Boolean(contextMenu), onMenuItemClick: (_, callback) => {
+	                callback();
+	                setContextMenu(null);
+	            }, onClose: () => {
+	                setContextMenu(null);
+	            }, TransitionProps: {
+	                onExit: () => {
+	                    setContextMenu(null);
+	                },
+	            }, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenu?.items ?? [], anchorReference: "anchorPosition", anchorPosition: contextMenu?.position })));
+	});
+
+	var Clear = {};
+
+	var _interopRequireDefault$5 = interopRequireDefault.exports;
+	Object.defineProperty(Clear, "__esModule", {
+	  value: true
+	});
+	var default_1$5 = Clear["default"] = void 0;
+	var _createSvgIcon$5 = /*#__PURE__*/_interopRequireDefault$5(createSvgIcon);
+	var _jsxRuntime$5 = require$$2__default["default"];
+	var _default$5 = /*#__PURE__*/(0, _createSvgIcon$5["default"])( /*#__PURE__*/(0, _jsxRuntime$5.jsx)("path", {
+	  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+	}), 'Clear');
+	default_1$5 = Clear["default"] = _default$5;
+
+	var UnfoldLess = {};
+
+	var _interopRequireDefault$4 = interopRequireDefault.exports;
+	Object.defineProperty(UnfoldLess, "__esModule", {
+	  value: true
+	});
+	var default_1$4 = UnfoldLess["default"] = void 0;
+	var _createSvgIcon$4 = /*#__PURE__*/_interopRequireDefault$4(createSvgIcon);
+	var _jsxRuntime$4 = require$$2__default["default"];
+	var _default$4 = /*#__PURE__*/(0, _createSvgIcon$4["default"])( /*#__PURE__*/(0, _jsxRuntime$4.jsx)("path", {
+	  d: "M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"
+	}), 'UnfoldLess');
+	default_1$4 = UnfoldLess["default"] = _default$4;
+
+	/* eslint-disable @typescript-eslint/unbound-method */
+	const useStyles$2 = mui.makeStyles()({
+	    toolbar: {
+	        width: '100%',
+	        display: 'flex',
+	        paddingRight: '2em',
+	        flexDirection: 'row',
+	        justifyContent: 'space-between',
+	        position: 'absolute',
+	        zIndex: 4,
+	    },
+	    filterText: {},
+	});
+	const ToolBar = mobxReact.observer(function ToolBar({ model: displayState, }) {
+	    const model = displayState.tabularEditor;
+	    const { classes } = useStyles$2();
+	    return (React__default["default"].createElement("div", { className: classes.toolbar },
+	        React__default["default"].createElement(material.Tooltip, { title: "Collapse all" },
+	            React__default["default"].createElement(material.IconButton, { "aria-label": "collapse", sx: { marginTop: 0 }, onClick: model.collapseAllFeatures },
+	                React__default["default"].createElement(default_1$4, null))),
+	        React__default["default"].createElement(material.TextField, { className: classes.filterText, label: "Filter features", value: model.filterText, sx: { marginTop: 0 }, variant: "outlined", onChange: (event) => {
+	                model.setFilterText(event.target.value);
+	            }, InputProps: {
+	                endAdornment: (React__default["default"].createElement(material.InputAdornment, { position: "end" },
+	                    React__default["default"].createElement(material.IconButton, { onClick: () => {
+	                            model.clearFilterText();
+	                        } },
+	                        React__default["default"].createElement(default_1$5, null)))),
+	            } })));
+	});
+
+	function stopPropagation(e) {
+	    e.stopPropagation();
+	}
+	const TabularEditorPane = mobxReact.observer(function TabularEditorPane({ model: displayState, }) {
+	    const model = displayState.tabularEditor;
+	    if (!model.isShown) {
+	        return null;
+	    }
+	    return (
+	    // TODO: a11y
+	    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+	    React__default["default"].createElement("div", { onMouseDown: stopPropagation, onClick: stopPropagation, style: { width: '100%', height: '100%', position: 'relative' } },
+	        React__default["default"].createElement(ToolBar, { model: displayState }),
+	        React__default["default"].createElement(HybridGrid, { model: displayState })));
+	});
+
+	const TabularEditorStateModelType = require$$1$3.types
+	    .model('TabularEditor', {
+	    isShown: true,
+	    featureCollapsed: require$$1$3.types.map(require$$1$3.types.boolean),
+	    filterText: '',
+	})
+	    .actions((self) => ({
+	    setFeatureCollapsed(id, state) {
+	        self.featureCollapsed.set(id, state);
+	    },
+	    setFilterText(text) {
+	        self.filterText = text;
+	    },
+	    clearFilterText() {
+	        self.filterText = '';
+	    },
+	    collapseAllFeatures() {
+	        // iterate over all seen features and set them to collapsed
+	        const display = require$$1$3.getParent(self);
+	        for (const [featureId] of display.seenFeatures.entries()) {
+	            self.featureCollapsed.set(featureId, true);
+	        }
+	    },
+	    togglePane() {
+	        self.isShown = !self.isShown;
+	    },
+	    hidePane() {
+	        self.isShown = false;
+	    },
+	    showPane() {
+	        self.isShown = true;
+	    },
+	    // onPatch(patch: any) {
+	    //   console.log(patch)
+	    // },
+	}));
+
+	const FilterFeatures = mobxReact.observer(function FilterFeatures({ featureTypes, handleClose, onUpdate, session, }) {
+	    const [type, setType] = React.useState('');
+	    const [selectedFeatureTypes, setSelectedFeatureTypes] = React.useState(featureTypes);
+	    const handleChange = (value) => {
+	        setType(value);
+	    };
+	    const handleAddFeatureType = () => {
+	        if (type) {
+	            if (selectedFeatureTypes.includes(type)) {
+	                return;
+	            }
+	            onUpdate([...selectedFeatureTypes, type]);
+	            setSelectedFeatureTypes([...selectedFeatureTypes, type]);
+	        }
+	    };
+	    const handleFeatureTypeDelete = (value) => {
+	        const newTypes = selectedFeatureTypes.filter((type) => type !== value);
+	        onUpdate(newTypes);
+	        setSelectedFeatureTypes(newTypes);
+	    };
+	    return (React__default["default"].createElement(Dialog, { open: true, maxWidth: false, "data-testid": "filter-features-dialog", title: "Filter features by type", handleClose: handleClose },
+	        React__default["default"].createElement(material.DialogContent, null,
+	            React__default["default"].createElement(material.DialogContentText, null, "Select the feature types you want to display in the apollo track"),
+	            React__default["default"].createElement(material.Grid2, { container: true, spacing: 2 },
+	                React__default["default"].createElement(material.Grid2, { size: 8 },
+	                    React__default["default"].createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: '100%' }, value: type, filterTerms: isOntologyClass, renderInput: (params) => (React__default["default"].createElement(material.TextField, { ...params, label: "Feature type", variant: "outlined", fullWidth: true })), onChange: (oldValue, newValue) => {
+	                            if (newValue) {
+	                                handleChange(newValue);
+	                            }
+	                        } })),
+	                React__default["default"].createElement(material.Grid2, { size: 4 },
+	                    React__default["default"].createElement(material.Button, { variant: "contained", onClick: handleAddFeatureType, disabled: !type, style: { marginTop: 9 }, size: "medium" }, "Add"))),
+	            selectedFeatureTypes.length > 0 && (React__default["default"].createElement("div", null,
+	                React__default["default"].createElement("hr", null),
+	                React__default["default"].createElement("div", { style: { width: 300 } },
+	                    React__default["default"].createElement(material.DialogContentText, null, "Selected feature types:"),
+	                    React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, selectedFeatureTypes.map((value) => (React__default["default"].createElement(material.Chip, { key: value, label: value, onDelete: () => {
+	                            handleFeatureTypeDelete(value);
+	                        } }))))))))));
+	});
+
 	const minDisplayHeight = 20;
 	function baseModelFactory(_pluginManager, configSchema) {
 	    return pluggableElementTypes.BaseDisplay.named('BaseLinearApolloDisplay')
@@ -52710,6 +53651,7 @@
 	        graphical: true,
 	        table: false,
 	        heightPreConfig: require$$1$3.types.maybe(require$$1$3.types.refinement('displayHeight', require$$1$3.types.number, (n) => n >= minDisplayHeight)),
+	        filteredFeatureTypes: require$$1$3.types.array(require$$1$3.types.string),
 	    })
 	        .views((self) => {
 	        const { configuration, renderProps: superRenderProps } = self;
@@ -52824,9 +53766,12 @@
 	            self.graphical = true;
 	            self.table = true;
 	        },
+	        updateFilteredFeatureTypes(types) {
+	            self.filteredFeatureTypes = require$$1$3.cast(types);
+	        },
 	    }))
 	        .views((self) => {
-	        const { trackMenuItems: superTrackMenuItems } = self;
+	        const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self;
 	        return {
 	            trackMenuItems() {
 	                const { graphical, table } = self;
@@ -52862,6 +53807,25 @@
 	                            },
 	                        ],
 	                    },
+	                    {
+	                        label: 'Filter features by type',
+	                        onClick: () => {
+	                            const session = self.session;
+	                            self.session.queueDialog((doneCallback) => [
+	                                FilterFeatures,
+	                                {
+	                                    session,
+	                                    handleClose: () => {
+	                                        doneCallback();
+	                                    },
+	                                    featureTypes: require$$1$3.getSnapshot(filteredFeatureTypes),
+	                                    onUpdate: (types) => {
+	                                        self.updateFilteredFeatureTypes(types);
+	                                    },
+	                                },
+	                            ]);
+	                        },
+	                    },
 	                ];
 	            },
 	        };
@@ -52884,779 +53848,6 @@
 	    }));
 	}
 
-	/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-	function layoutsModelFactory(pluginManager, configSchema) {
-	    const BaseLinearApolloDisplay = baseModelFactory(pluginManager, configSchema);
-	    return BaseLinearApolloDisplay.named('LinearApolloDisplayLayouts')
-	        .props({
-	        featuresMinMaxLimit: 500_000,
-	    })
-	        .volatile(() => ({
-	        seenFeatures: mobx.observable.map(),
-	    }))
-	        .views((self) => ({
-	        get featuresMinMax() {
-	            const { assemblyManager } = self.session;
-	            return self.lgv.displayedRegions.map((region) => {
-	                const assembly = assemblyManager.get(region.assemblyName);
-	                let min;
-	                let max;
-	                const { end, refName, start } = region;
-	                for (const [, feature] of self.seenFeatures) {
-	                    if (refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
-	                        !require$$1$2.doesIntersect2(start, end, feature.min, feature.max) ||
-	                        feature.length > self.featuresMinMaxLimit) {
-	                        continue;
-	                    }
-	                    if (min === undefined) {
-	                        ({ min } = feature);
-	                    }
-	                    if (max === undefined) {
-	                        ({ max } = feature);
-	                    }
-	                    if (feature.minWithChildren < min) {
-	                        ({ min } = feature);
-	                    }
-	                    if (feature.maxWithChildren > max) {
-	                        ({ max } = feature);
-	                    }
-	                }
-	                if (min !== undefined && max !== undefined) {
-	                    return [min, max];
-	                }
-	                return;
-	            });
-	        },
-	    }))
-	        .actions((self) => ({
-	        addSeenFeature(feature) {
-	            self.seenFeatures.set(feature._id, feature);
-	        },
-	        deleteSeenFeature(featureId) {
-	            self.seenFeatures.delete(featureId);
-	        },
-	    }))
-	        .views((self) => ({
-	        get featureLayouts() {
-	            const { assemblyManager } = self.session;
-	            return self.lgv.displayedRegions.map((region, idx) => {
-	                const assembly = assemblyManager.get(region.assemblyName);
-	                const featureLayout = new Map();
-	                const minMax = self.featuresMinMax[idx];
-	                if (!minMax) {
-	                    return featureLayout;
-	                }
-	                const [min, max] = minMax;
-	                const rows = [];
-	                const { end, refName, start } = region;
-	                for (const [id, feature] of self.seenFeatures.entries()) {
-	                    if (!require$$1$3.isAlive(feature)) {
-	                        self.deleteSeenFeature(id);
-	                        continue;
-	                    }
-	                    if (refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
-	                        !require$$1$2.doesIntersect2(start, end, feature.min, feature.max)) {
-	                        continue;
-	                    }
-	                    const rowCount = getGlyph(feature).getRowCount(feature, self.lgv.bpPerPx);
-	                    let startingRow = 0;
-	                    let placed = false;
-	                    while (!placed) {
-	                        let rowsForFeature = rows.slice(startingRow, startingRow + rowCount);
-	                        if (rowsForFeature.length < rowCount) {
-	                            for (let i = 0; i < rowCount - rowsForFeature.length; i++) {
-	                                const newRowNumber = rows.length;
-	                                rows[newRowNumber] = Array.from({ length: max - min });
-	                                featureLayout.set(newRowNumber, []);
-	                            }
-	                            rowsForFeature = rows.slice(startingRow, startingRow + rowCount);
-	                        }
-	                        if (rowsForFeature
-	                            .map((rowForFeature) => {
-	                            // zero-length features are allowed in the spec
-	                            const featureMax = feature.max - feature.min === 0
-	                                ? feature.min + 1
-	                                : feature.max;
-	                            let start = feature.min - min, end = featureMax - min;
-	                            if (feature.min - min < 0) {
-	                                start = 0;
-	                                end = featureMax - feature.min;
-	                            }
-	                            return rowForFeature.slice(start, end).some(Boolean);
-	                        })
-	                            .some(Boolean)) {
-	                            startingRow += 1;
-	                            continue;
-	                        }
-	                        for (let rowNum = startingRow; rowNum < startingRow + rowCount; rowNum++) {
-	                            const row = rows[rowNum];
-	                            let start = feature.min - min, end = feature.max - min;
-	                            if (feature.min - min < 0) {
-	                                start = 0;
-	                                end = feature.max - feature.min;
-	                            }
-	                            row.fill(true, start, end);
-	                            const layoutRow = featureLayout.get(rowNum);
-	                            layoutRow?.push([rowNum - startingRow, feature]);
-	                        }
-	                        placed = true;
-	                    }
-	                }
-	                return featureLayout;
-	            });
-	        },
-	        getFeatureLayoutPosition(feature) {
-	            const { featureLayouts } = this;
-	            for (const [idx, layout] of featureLayouts.entries()) {
-	                for (const [layoutRowNum, layoutRow] of layout) {
-	                    for (const [featureRowNum, layoutFeature] of layoutRow) {
-	                        if (featureRowNum !== 0) {
-	                            // Same top-level feature in all feature rows, so only need to
-	                            // check the first one
-	                            continue;
-	                        }
-	                        if (feature._id === layoutFeature._id) {
-	                            return {
-	                                layoutIndex: idx,
-	                                layoutRow: layoutRowNum,
-	                                featureRow: featureRowNum,
-	                            };
-	                        }
-	                        if (layoutFeature.hasDescendant(feature._id)) {
-	                            const row = getGlyph(layoutFeature).getRowForFeature(layoutFeature, feature);
-	                            if (row !== undefined) {
-	                                return {
-	                                    layoutIndex: idx,
-	                                    layoutRow: layoutRowNum,
-	                                    featureRow: row,
-	                                };
-	                            }
-	                        }
-	                    }
-	                }
-	            }
-	            return;
-	        },
-	    }))
-	        .views((self) => ({
-	        get highestRow() {
-	            return Math.max(0, ...self.featureLayouts.map((layout) => Math.max(...layout.keys())));
-	        },
-	    }))
-	        .actions((self) => ({
-	        afterAttach() {
-	            require$$1$3.addDisposer(self, mobx.autorun(() => {
-	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
-	                    return;
-	                }
-	                for (const region of self.regions) {
-	                    const assembly = self.session.apolloDataStore.assemblies.get(region.assemblyName);
-	                    const ref = assembly?.getByRefName(region.refName);
-	                    const features = ref?.features;
-	                    if (!features) {
-	                        continue;
-	                    }
-	                    for (const [, feature] of features) {
-	                        if (require$$1$2.doesIntersect2(region.start, region.end, feature.min, feature.max) &&
-	                            !self.seenFeatures.has(feature._id)) {
-	                            self.addSeenFeature(feature);
-	                        }
-	                    }
-	                }
-	            }, { name: 'LinearApolloDisplaySetSeenFeatures', delay: 1000 }));
-	        },
-	    }));
-	}
-
-	function renderingModelIntermediateFactory(pluginManager, configSchema) {
-	    const LinearApolloDisplayLayouts = layoutsModelFactory(pluginManager, configSchema);
-	    return LinearApolloDisplayLayouts.named('LinearApolloDisplayRendering')
-	        .props({
-	        sequenceRowHeight: 15,
-	        apolloRowHeight: 20,
-	        detailsMinHeight: 200,
-	        detailsHeight: 200,
-	        lastRowTooltipBufferHeight: 40,
-	        isShown: true,
-	    })
-	        .volatile(() => ({
-	        canvas: null,
-	        overlayCanvas: null,
-	        collaboratorCanvas: null,
-	        seqTrackCanvas: null,
-	        seqTrackOverlayCanvas: null,
-	        theme: undefined,
-	    }))
-	        .views((self) => ({
-	        get featuresHeight() {
-	            return ((self.highestRow + 1) * self.apolloRowHeight +
-	                self.lastRowTooltipBufferHeight);
-	        },
-	    }))
-	        .actions((self) => ({
-	        toggleShown() {
-	            self.isShown = !self.isShown;
-	        },
-	        setDetailsHeight(newHeight) {
-	            self.detailsHeight = self.isShown
-	                ? Math.max(Math.min(newHeight, self.height - 100), Math.min(self.height, self.detailsMinHeight))
-	                : newHeight;
-	        },
-	        setCanvas(canvas) {
-	            self.canvas = canvas;
-	        },
-	        setOverlayCanvas(canvas) {
-	            self.overlayCanvas = canvas;
-	        },
-	        setCollaboratorCanvas(canvas) {
-	            self.collaboratorCanvas = canvas;
-	        },
-	        setSeqTrackCanvas(canvas) {
-	            self.seqTrackCanvas = canvas;
-	        },
-	        setSeqTrackOverlayCanvas(canvas) {
-	            self.seqTrackOverlayCanvas = canvas;
-	        },
-	        setTheme(theme) {
-	            self.theme = theme;
-	        },
-	        afterAttach() {
-	            require$$1$3.addDisposer(self, mobx.autorun(() => {
-	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
-	                    return;
-	                }
-	                const ctx = self.collaboratorCanvas?.getContext('2d');
-	                if (!ctx) {
-	                    return;
-	                }
-	                ctx.clearRect(0, 0, self.lgv.dynamicBlocks.totalWidthPx, self.featuresHeight);
-	                for (const collaborator of self.session.collaborators) {
-	                    const { locations } = collaborator;
-	                    if (locations.length === 0) {
-	                        continue;
-	                    }
-	                    let idx = 0;
-	                    for (const displayedRegion of self.lgv.displayedRegions) {
-	                        for (const location of locations) {
-	                            if (location.refSeq !== displayedRegion.refName) {
-	                                continue;
-	                            }
-	                            const { end, refSeq, start } = location;
-	                            const locationStartPxInfo = self.lgv.bpToPx({
-	                                refName: refSeq,
-	                                coord: start,
-	                                regionNumber: idx,
-	                            });
-	                            if (!locationStartPxInfo) {
-	                                continue;
-	                            }
-	                            const locationStartPx = locationStartPxInfo.offsetPx - self.lgv.offsetPx;
-	                            const locationWidthPx = (end - start) / self.lgv.bpPerPx;
-	                            ctx.fillStyle = 'rgba(0,255,0,.2)';
-	                            ctx.fillRect(locationStartPx, 1, locationWidthPx, 100);
-	                            ctx.fillStyle = 'black';
-	                            ctx.fillText(collaborator.name, locationStartPx + 1, 11, locationWidthPx - 2);
-	                        }
-	                        idx++;
-	                    }
-	                }
-	            }, { name: 'LinearApolloDisplayRenderCollaborators' }));
-	        },
-	    }));
-	}
-	function colorCode(letter, theme) {
-	    return (theme?.palette.bases[letter.toUpperCase()].main.toString() ?? 'lightgray');
-	}
-	function codonColorCode(letter) {
-	    const colorMap = {
-	        M: '#33ee33',
-	        '*': '#f44336',
-	    };
-	    return colorMap[letter.toUpperCase()];
-	}
-	function reverseCodonSeq(seq) {
-	    return [...seq]
-	        .map((c) => require$$1$2.revcom(c))
-	        .reverse()
-	        .join('');
-	}
-	function drawLetter(seqTrackctx, startPx, widthPx, letter, textY) {
-	    const fontSize = Math.min(widthPx, 10);
-	    seqTrackctx.fillStyle = '#000';
-	    seqTrackctx.font = `${fontSize}px`;
-	    const textWidth = seqTrackctx.measureText(letter).width;
-	    const textX = startPx + (widthPx - textWidth) / 2;
-	    seqTrackctx.fillText(letter, textX, textY + 10);
-	}
-	function drawTranslation(seqTrackctx, bpPerPx, trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight, seq, i, reverse) {
-	    let codonSeq = seq.slice(i, i + 3).toUpperCase();
-	    if (reverse) {
-	        codonSeq = reverseCodonSeq(codonSeq);
-	    }
-	    const codonLetter = require$$1$2.defaultCodonTable[codonSeq];
-	    if (!codonLetter) {
-	        return;
-	    }
-	    const fillColor = codonColorCode(codonLetter);
-	    if (fillColor) {
-	        seqTrackctx.fillStyle = fillColor;
-	        seqTrackctx.fillRect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight);
-	    }
-	    if (bpPerPx <= 0.1) {
-	        seqTrackctx.rect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight);
-	        seqTrackctx.stroke();
-	        drawLetter(seqTrackctx, trnslStartPx, trnslWidthPx, codonLetter, trnslY);
-	    }
-	}
-	function sequenceRenderingModelFactory(pluginManager, configSchema) {
-	    const LinearApolloDisplayRendering = renderingModelIntermediateFactory(pluginManager, configSchema);
-	    return LinearApolloDisplayRendering.actions((self) => ({
-	        afterAttach() {
-	            require$$1$3.addDisposer(self, mobx.autorun(async () => {
-	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
-	                    return;
-	                }
-	                if (self.lgv.bpPerPx > 3) {
-	                    return;
-	                }
-	                const seqTrackctx = self.seqTrackCanvas?.getContext('2d');
-	                if (!seqTrackctx) {
-	                    return;
-	                }
-	                seqTrackctx.clearRect(0, 0, self.lgv.dynamicBlocks.totalWidthPx, self.lgv.bpPerPx <= 1 ? 125 : 95);
-	                const frames = self.lgv.bpPerPx <= 1
-	                    ? [3, 2, 1, 0, 0, -1, -2, -3]
-	                    : [3, 2, 1, -1, -2, -3];
-	                let height = 0;
-	                for (const frame of frames) {
-	                    const frameColor = self.theme?.palette.framesCDS.at(frame)?.main;
-	                    if (frameColor) {
-	                        seqTrackctx.fillStyle = frameColor;
-	                        seqTrackctx.fillRect(0, height, self.lgv.dynamicBlocks.totalWidthPx, self.sequenceRowHeight);
-	                    }
-	                    height += self.sequenceRowHeight;
-	                }
-	                for (const [idx, region] of self.regions.entries()) {
-	                    const driver = self.session.apolloDataStore.getBackendDriver(region.assemblyName);
-	                    if (!driver) {
-	                        throw new Error('Failed to get the backend driver');
-	                    }
-	                    const { seq } = await driver.getSequence(region);
-	                    if (!seq) {
-	                        return;
-	                    }
-	                    for (const [i, letter] of [...seq].entries()) {
-	                        const trnslXOffset = (self.lgv.bpToPx({
-	                            refName: region.refName,
-	                            coord: region.start + i,
-	                            regionNumber: idx,
-	                        })?.offsetPx ?? 0) - self.lgv.offsetPx;
-	                        const trnslWidthPx = 3 / self.lgv.bpPerPx;
-	                        const trnslStartPx = self.lgv.displayedRegions[idx].reversed
-	                            ? trnslXOffset - trnslWidthPx
-	                            : trnslXOffset;
-	                        // Draw translation forward
-	                        for (let j = 2; j >= 0; j--) {
-	                            if ((region.start + i) % 3 === j) {
-	                                drawTranslation(seqTrackctx, self.lgv.bpPerPx, trnslStartPx, self.sequenceRowHeight * (2 - j), trnslWidthPx, self.sequenceRowHeight, seq, i, false);
-	                            }
-	                        }
-	                        if (self.lgv.bpPerPx <= 1) {
-	                            const xOffset = (self.lgv.bpToPx({
-	                                refName: region.refName,
-	                                coord: region.start + i,
-	                                regionNumber: idx,
-	                            })?.offsetPx ?? 0) - self.lgv.offsetPx;
-	                            const widthPx = 1 / self.lgv.bpPerPx;
-	                            const startPx = self.lgv.displayedRegions[idx].reversed
-	                                ? xOffset - widthPx
-	                                : xOffset;
-	                            // Draw forward
-	                            seqTrackctx.beginPath();
-	                            seqTrackctx.fillStyle = colorCode(letter, self.theme);
-	                            seqTrackctx.rect(startPx, self.sequenceRowHeight * 3, widthPx, self.sequenceRowHeight);
-	                            seqTrackctx.fill();
-	                            if (self.lgv.bpPerPx <= 0.1) {
-	                                seqTrackctx.stroke();
-	                                drawLetter(seqTrackctx, startPx, widthPx, letter, self.sequenceRowHeight * 3);
-	                            }
-	                            // Draw reverse
-	                            const revLetter = require$$1$2.revcom(letter);
-	                            seqTrackctx.beginPath();
-	                            seqTrackctx.fillStyle = colorCode(revLetter, self.theme);
-	                            seqTrackctx.rect(startPx, self.sequenceRowHeight * 4, widthPx, self.sequenceRowHeight);
-	                            seqTrackctx.fill();
-	                            if (self.lgv.bpPerPx <= 0.1) {
-	                                seqTrackctx.stroke();
-	                                drawLetter(seqTrackctx, startPx, widthPx, revLetter, self.sequenceRowHeight * 4);
-	                            }
-	                        }
-	                        // Draw translation reverse
-	                        for (let k = 0; k <= 2; k++) {
-	                            const rowOffset = self.lgv.bpPerPx <= 1 ? 5 : 3;
-	                            if ((region.start + i) % 3 === k) {
-	                                drawTranslation(seqTrackctx, self.lgv.bpPerPx, trnslStartPx, self.sequenceRowHeight * (rowOffset + k), trnslWidthPx, self.sequenceRowHeight, seq, i, true);
-	                            }
-	                        }
-	                    }
-	                }
-	            }, { name: 'LinearApolloDisplayRenderSequence' }));
-	        },
-	    }));
-	}
-	function renderingModelFactory(pluginManager, configSchema) {
-	    const LinearApolloDisplayRendering = sequenceRenderingModelFactory(pluginManager, configSchema);
-	    return LinearApolloDisplayRendering.actions((self) => ({
-	        afterAttach() {
-	            require$$1$3.addDisposer(self, mobx.autorun(() => {
-	                const { canvas, featureLayouts, featuresHeight, lgv } = self;
-	                if (!lgv.initialized || self.regionCannotBeRendered()) {
-	                    return;
-	                }
-	                const { displayedRegions, dynamicBlocks } = lgv;
-	                const ctx = canvas?.getContext('2d');
-	                if (!ctx) {
-	                    return;
-	                }
-	                ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight);
-	                for (const [idx, featureLayout] of featureLayouts.entries()) {
-	                    const displayedRegion = displayedRegions[idx];
-	                    for (const [row, featureLayoutRow] of featureLayout.entries()) {
-	                        for (const [featureRow, feature] of featureLayoutRow) {
-	                            if (featureRow > 0) {
-	                                continue;
-	                            }
-	                            if (!require$$1$2.doesIntersect2(displayedRegion.start, displayedRegion.end, feature.min, feature.max)) {
-	                                continue;
-	                            }
-	                            getGlyph(feature).draw(ctx, feature, row, self, idx);
-	                        }
-	                    }
-	                }
-	            }, { name: 'LinearApolloDisplayRenderFeatures' }));
-	        },
-	    }));
-	}
-
-	function isMousePositionWithFeatureAndGlyph(mousePosition) {
-	    return 'featureAndGlyphUnderMouse' in mousePosition;
-	}
-	function getMousePosition(event, lgv) {
-	    const canvas = event.currentTarget;
-	    const { clientX, clientY } = event;
-	    const { left, top } = canvas.getBoundingClientRect();
-	    const x = clientX - left;
-	    const y = clientY - top;
-	    const { coord: bp, index: regionNumber, refName } = lgv.pxToBp(x);
-	    return { x, y, refName, bp, regionNumber };
-	}
-	function getTranslationRow(frame, bpPerPx) {
-	    const offset = bpPerPx <= 1 ? 2 : 0;
-	    switch (frame) {
-	        case 3: {
-	            return 0;
-	        }
-	        case 2: {
-	            return 1;
-	        }
-	        case 1: {
-	            return 2;
-	        }
-	        case -1: {
-	            return 3 + offset;
-	        }
-	        case -2: {
-	            return 4 + offset;
-	        }
-	        case -3: {
-	            return 5 + offset;
-	        }
-	    }
-	}
-	function getSeqRow(strand, bpPerPx) {
-	    if (bpPerPx > 1 || strand === undefined) {
-	        return;
-	    }
-	    return strand === 1 ? 3 : 4;
-	}
-	function highlightSeq(seqTrackOverlayctx, theme, startPx, sequenceRowHeight, row, widthPx) {
-	    if (row !== undefined) {
-	        seqTrackOverlayctx.fillStyle =
-	            theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)';
-	        seqTrackOverlayctx.fillRect(startPx, sequenceRowHeight * row, widthPx, sequenceRowHeight);
-	    }
-	}
-	function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
-	    const LinearApolloDisplayRendering = renderingModelFactory(pluginManager, configSchema);
-	    return LinearApolloDisplayRendering.named('LinearApolloDisplayMouseEvents')
-	        .volatile(() => ({
-	        apolloDragging: null,
-	        cursor: undefined,
-	        apolloHover: undefined,
-	    }))
-	        .views((self) => ({
-	        getMousePosition(event) {
-	            const mousePosition = getMousePosition(event, self.lgv);
-	            const { bp, regionNumber, y } = mousePosition;
-	            const row = Math.floor(y / self.apolloRowHeight);
-	            const featureLayout = self.featureLayouts[regionNumber];
-	            const layoutRow = featureLayout.get(row);
-	            if (!layoutRow) {
-	                return mousePosition;
-	            }
-	            const foundFeature = layoutRow.find((f) => bp >= f[1].min && bp <= f[1].max);
-	            if (!foundFeature) {
-	                return mousePosition;
-	            }
-	            const [featureRow, topLevelFeature] = foundFeature;
-	            const glyph = getGlyph(topLevelFeature);
-	            const feature = glyph.getFeatureFromLayout(topLevelFeature, bp, featureRow);
-	            if (!feature) {
-	                return mousePosition;
-	            }
-	            return {
-	                ...mousePosition,
-	                featureAndGlyphUnderMouse: { feature, topLevelFeature, glyph },
-	            };
-	        },
-	    }))
-	        .actions((self) => ({
-	        continueDrag(mousePosition, event) {
-	            if (!self.apolloDragging) {
-	                throw new Error('continueDrag() called with no current drag in progress');
-	            }
-	            event.stopPropagation();
-	            self.apolloDragging = { ...self.apolloDragging, current: mousePosition };
-	        },
-	        setDragging(dragInfo) {
-	            self.apolloDragging = dragInfo ?? null;
-	        },
-	    }))
-	        .actions((self) => ({
-	        setApolloHover(n) {
-	            self.apolloHover = n;
-	        },
-	        setCursor(cursor) {
-	            if (self.cursor !== cursor) {
-	                self.cursor = cursor;
-	            }
-	        },
-	    }))
-	        .actions(() => ({
-	        // onClick(event: CanvasMouseEvent) {
-	        onClick() {
-	            // TODO: set the selected feature
-	        },
-	    }));
-	}
-	function mouseEventsSeqHightlightModelFactory(pluginManager, configSchema) {
-	    const LinearApolloDisplayRendering = mouseEventsModelIntermediateFactory(pluginManager, configSchema);
-	    return LinearApolloDisplayRendering.actions((self) => ({
-	        afterAttach() {
-	            require$$1$3.addDisposer(self, mobx.autorun(() => {
-	                // This type is wrong in @jbrowse/core
-	                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
-	                    return;
-	                }
-	                const seqTrackOverlayctx = self.seqTrackOverlayCanvas?.getContext('2d');
-	                if (!seqTrackOverlayctx) {
-	                    return;
-	                }
-	                seqTrackOverlayctx.clearRect(0, 0, self.lgv.dynamicBlocks.totalWidthPx, self.lgv.bpPerPx <= 1 ? 125 : 95);
-	                const { apolloHover, lgv, regions, sequenceRowHeight, theme } = self;
-	                if (!apolloHover) {
-	                    return;
-	                }
-	                const { feature } = apolloHover;
-	                for (const [idx, region] of regions.entries()) {
-	                    if (feature.type === 'CDS') {
-	                        const parentFeature = feature.parent;
-	                        if (!parentFeature) {
-	                            continue;
-	                        }
-	                        const cdsLocs = parentFeature.cdsLocations.find((loc) => feature.min === loc.at(0)?.min &&
-	                            feature.max === loc.at(-1)?.max);
-	                        if (!cdsLocs) {
-	                            continue;
-	                        }
-	                        for (const dl of cdsLocs) {
-	                            const frame = require$$1$2.getFrame(dl.min, dl.max, feature.strand ?? 1, dl.phase);
-	                            const row = getTranslationRow(frame, lgv.bpPerPx);
-	                            const offset = (lgv.bpToPx({
-	                                refName: region.refName,
-	                                coord: dl.min,
-	                                regionNumber: idx,
-	                            })?.offsetPx ?? 0) - lgv.offsetPx;
-	                            const widthPx = (dl.max - dl.min) / lgv.bpPerPx;
-	                            const startPx = lgv.displayedRegions[idx].reversed
-	                                ? offset - widthPx
-	                                : offset;
-	                            highlightSeq(seqTrackOverlayctx, theme, startPx, sequenceRowHeight, row, widthPx);
-	                        }
-	                    }
-	                    else {
-	                        const row = getSeqRow(feature.strand, lgv.bpPerPx);
-	                        const offset = (lgv.bpToPx({
-	                            refName: region.refName,
-	                            coord: feature.min,
-	                            regionNumber: idx,
-	                        })?.offsetPx ?? 0) - lgv.offsetPx;
-	                        const widthPx = feature.length / lgv.bpPerPx;
-	                        const startPx = lgv.displayedRegions[idx].reversed
-	                            ? offset - widthPx
-	                            : offset;
-	                        highlightSeq(seqTrackOverlayctx, theme, startPx, sequenceRowHeight, row, widthPx);
-	                    }
-	                }
-	            }, { name: 'LinearApolloDisplayRenderSeqHighlight' }));
-	        },
-	    }));
-	}
-	function mouseEventsModelFactory(pluginManager, configSchema) {
-	    const LinearApolloDisplayMouseEvents = mouseEventsSeqHightlightModelFactory(pluginManager, configSchema);
-	    return LinearApolloDisplayMouseEvents.views((self) => ({
-	        contextMenuItems(contextCoord) {
-	            const { apolloHover } = self;
-	            if (!(apolloHover && contextCoord)) {
-	                return [];
-	            }
-	            const { topLevelFeature } = apolloHover;
-	            const glyph = getGlyph(topLevelFeature);
-	            return glyph.getContextMenuItems(self);
-	        },
-	    }))
-	        .actions((self) => ({
-	        // explicitly pass in a feature in case it's not the same as the one in
-	        // mousePosition (e.g. if features are drawn overlapping).
-	        startDrag(mousePosition, feature, edge) {
-	            self.apolloDragging = {
-	                start: mousePosition,
-	                current: mousePosition,
-	                feature,
-	                edge,
-	            };
-	        },
-	        endDrag() {
-	            if (!self.apolloDragging) {
-	                throw new Error('endDrag() called with no current drag in progress');
-	            }
-	            const { current, edge, feature, start } = self.apolloDragging;
-	            // don't do anything if it was only dragged a tiny bit
-	            if (Math.abs(current.x - start.x) <= 4) {
-	                self.setDragging();
-	                self.setCursor();
-	                return;
-	            }
-	            const { displayedRegions } = self.lgv;
-	            const region = displayedRegions[start.regionNumber];
-	            const assembly = self.getAssemblyId(region.assemblyName);
-	            let change;
-	            if (edge === 'max') {
-	                const featureId = feature._id;
-	                const oldEnd = feature.max;
-	                const newEnd = current.bp;
-	                change = new dist$2.LocationEndChange({
-	                    typeName: 'LocationEndChange',
-	                    changedIds: [featureId],
-	                    featureId,
-	                    oldEnd,
-	                    newEnd,
-	                    assembly,
-	                });
-	            }
-	            else {
-	                const featureId = feature._id;
-	                const oldStart = feature.min;
-	                const newStart = current.bp;
-	                change = new dist$2.LocationStartChange({
-	                    typeName: 'LocationStartChange',
-	                    changedIds: [featureId],
-	                    featureId,
-	                    oldStart,
-	                    newStart,
-	                    assembly,
-	                });
-	            }
-	            void self.changeManager.submit(change);
-	            self.setDragging();
-	            self.setCursor();
-	        },
-	    }))
-	        .actions((self) => ({
-	        onMouseDown(event) {
-	            const mousePosition = self.getMousePosition(event);
-	            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-	                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseDown(self, mousePosition, event);
-	            }
-	        },
-	        onMouseMove(event) {
-	            const mousePosition = self.getMousePosition(event);
-	            if (self.apolloDragging) {
-	                self.setCursor('col-resize');
-	                self.continueDrag(mousePosition, event);
-	                return;
-	            }
-	            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-	                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseMove(self, mousePosition, event);
-	            }
-	            else {
-	                self.setApolloHover();
-	                self.setCursor();
-	            }
-	        },
-	        onMouseLeave(event) {
-	            self.setDragging();
-	            self.setApolloHover();
-	            const mousePosition = self.getMousePosition(event);
-	            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-	                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseLeave(self, mousePosition, event);
-	            }
-	        },
-	        onMouseUp(event) {
-	            const mousePosition = self.getMousePosition(event);
-	            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-	                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseUp(self, mousePosition, event);
-	            }
-	            if (self.apolloDragging) {
-	                self.endDrag();
-	            }
-	        },
-	    }))
-	        .actions((self) => ({
-	        afterAttach() {
-	            require$$1$3.addDisposer(self, mobx.autorun(() => {
-	                // This type is wrong in @jbrowse/core
-	                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
-	                    return;
-	                }
-	                const ctx = self.overlayCanvas?.getContext('2d');
-	                if (!ctx) {
-	                    return;
-	                }
-	                ctx.clearRect(0, 0, self.lgv.dynamicBlocks.totalWidthPx, self.featuresHeight);
-	                const { apolloDragging, apolloHover } = self;
-	                if (!apolloHover) {
-	                    return;
-	                }
-	                const { glyph } = apolloHover;
-	                // draw mouseover hovers
-	                glyph.drawHover(self, ctx);
-	                // draw tooltip on hover
-	                glyph.drawTooltip(self, ctx);
-	                // dragging previews
-	                if (apolloDragging) {
-	                    // NOTE: the glyph where the drag started is responsible for drawing the preview.
-	                    // it can call methods in other glyphs to help with this though.
-	                    const glyph = getGlyph(apolloDragging.feature.topLevelFeature);
-	                    glyph.drawDragPreview(self, ctx);
-	                }
-	            }, { name: 'LinearApolloDisplayRenderMouseoverAndDrag' }));
-	        },
-	    }));
-	}
-
 	function drawBoxOutline(ctx, x, y, width, height, color) {
 	    drawBox(ctx, x, y, width, height, color);
 	    if (width <= 2) {
@@ -53921,7 +54112,12 @@
 	            session.showWidget(apolloFeatureWidget);
 	        },
 	    });
-	    if (sourceFeature.type === 'mRNA' && require$$1$2.isSessionModelWithWidgets(session)) {
+	    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+	    if (!featureTypeOntology) {
+	        throw new Error('featureTypeOntology is undefined');
+	    }
+	    if (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') &&
+	        require$$1$2.isSessionModelWithWidgets(session)) {
 	        menuItems.push({
 	            label: 'Edit transcript details',
 	            onClick: () => {
@@ -54079,6 +54275,11 @@
 	        return;
 	    }
 	    const { apolloSelectedFeature } = session;
+	    const { apolloDataStore } = session;
+	    const { featureTypeOntology } = apolloDataStore.ontologyManager;
+	    if (!featureTypeOntology) {
+	        throw new Error('featureTypeOntology is undefined');
+	    }
 	    // Draw background for gene
 	    const topLevelFeatureMinX = (lgv.bpToPx({
 	        refName,
@@ -54090,22 +54291,23 @@
 	        ? topLevelFeatureMinX - topLevelFeatureWidthPx
 	        : topLevelFeatureMinX;
 	    const topLevelFeatureTop = row * rowHeight;
-	    const topLevelFeatureHeight = getRowCount$1(feature) * rowHeight;
+	    const topLevelFeatureHeight = getRowCount$1(feature, featureTypeOntology) * rowHeight;
 	    ctx.fillStyle = material.alpha(theme?.palette.background.paper ?? '#ffffff', 0.6);
 	    ctx.fillRect(topLevelFeatureStartPx, topLevelFeatureTop, topLevelFeatureWidthPx, topLevelFeatureHeight);
-	    // Draw lines on different rows for each mRNA
+	    // Draw lines on different rows for each transcript
 	    let currentRow = 0;
-	    for (const [, mrna] of children) {
-	        if (mrna.type !== 'mRNA') {
+	    for (const [, transcript] of children) {
+	        const isTranscript = featureTypeOntology.isTypeOf(transcript.type, 'transcript');
+	        if (!isTranscript) {
 	            currentRow += 1;
 	            continue;
 	        }
-	        const { children: childrenOfmRNA, min } = mrna;
-	        if (!childrenOfmRNA) {
+	        const { children: childrenOfTranscript, min } = transcript;
+	        if (!childrenOfTranscript) {
 	            continue;
 	        }
-	        for (const [, cds] of childrenOfmRNA) {
-	            if (cds.type !== 'CDS') {
+	        for (const [, cds] of childrenOfTranscript) {
+	            if (!featureTypeOntology.isTypeOf(cds.type, 'CDS')) {
 	                continue;
 	            }
 	            const minX = (lgv.bpToPx({
@@ -54113,7 +54315,7 @@
 	                coord: min,
 	                regionNumber: displayedRegionIndex,
 	            })?.offsetPx ?? 0) - offsetPx;
-	            const widthPx = mrna.length / bpPerPx;
+	            const widthPx = transcript.length / bpPerPx;
 	            const startPx = reversed ? minX - widthPx : minX;
 	            const height = Math.round((currentRow + 1 / 2) * rowHeight) + row * rowHeight;
 	            ctx.strokeStyle = theme?.palette.text.primary ?? 'black';
@@ -54126,21 +54328,21 @@
 	    }
 	    const forwardFill = theme?.palette.mode === 'dark' ? forwardFillDark : forwardFillLight;
 	    const backwardFill = theme?.palette.mode === 'dark' ? backwardFillDark : backwardFillLight;
-	    // Draw exon and CDS for each mRNA
+	    // Draw exon and CDS for each transcript
 	    currentRow = 0;
 	    for (const [, child] of children) {
-	        if (child.type !== 'mRNA') {
+	        if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
 	            boxGlyph.draw(ctx, child, row, stateModel, displayedRegionIndex);
 	            currentRow += 1;
 	            continue;
 	        }
 	        for (const cdsRow of child.cdsLocations) {
-	            const { _id, children: childrenOfmRNA } = child;
-	            if (!childrenOfmRNA) {
+	            const { _id, children: childrenOfTranscript } = child;
+	            if (!childrenOfTranscript) {
 	                continue;
 	            }
-	            for (const [, exon] of childrenOfmRNA) {
-	                if (exon.type !== 'exon') {
+	            for (const [, exon] of childrenOfTranscript) {
+	                if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
 	                    continue;
 	                }
 	                const minX = (lgv.bpToPx({
@@ -54236,7 +54438,8 @@
 	    overlayCtx.fillRect(rectX, rectY, rectWidth, rectHeight);
 	}
 	function drawHover$1(stateModel, ctx) {
-	    const { apolloHover, apolloRowHeight, lgv, theme } = stateModel;
+	    const { apolloHover, apolloRowHeight, lgv, session, theme } = stateModel;
+	    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
 	    if (!apolloHover) {
 	        return;
 	    }
@@ -54259,10 +54462,13 @@
 	    const top = row * apolloRowHeight;
 	    const widthPx = length / bpPerPx;
 	    ctx.fillStyle = theme?.palette.action.selected ?? 'rgba(0,0,0,04)';
-	    ctx.fillRect(startPx, top, widthPx, apolloRowHeight * getRowCount$1(feature));
+	    if (!featureTypeOntology) {
+	        throw new Error('featureTypeOntology is undefined');
+	    }
+	    ctx.fillRect(startPx, top, widthPx, apolloRowHeight * getRowCount$1(feature, featureTypeOntology));
 	}
-	function getFeatureFromLayout$1(feature, bp, row) {
-	    const featureInThisRow = featuresForRow$1(feature)[row] || [];
+	function getFeatureFromLayout$1(feature, bp, row, featureTypeOntology) {
+	    const featureInThisRow = featuresForRow$1(feature, featureTypeOntology)[row] || [];
 	    for (const f of featureInThisRow) {
 	        let featureObj;
 	        if (bp >= f.min && bp <= f.max && f.parent) {
@@ -54271,9 +54477,9 @@
 	        if (!featureObj) {
 	            continue;
 	        }
-	        if (featureObj.type === 'CDS' &&
+	        if (featureTypeOntology.isTypeOf(featureObj.type, 'CDS') &&
 	            featureObj.parent &&
-	            featureObj.parent.type === 'mRNA') {
+	            featureTypeOntology.isTypeOf(featureObj.parent.type, 'transcript')) {
 	            const { cdsLocations } = featureObj.parent;
 	            for (const cdsLoc of cdsLocations) {
 	                for (const loc of cdsLoc) {
@@ -54282,7 +54488,7 @@
 	                    }
 	                }
 	            }
-	            // If mouse position is in the intron region, return the mRNA
+	            // If mouse position is in the intron region, return the transcript
 	            return featureObj.parent;
 	        }
 	        // If mouse position is in a feature that is not a CDS, return the feature
@@ -54290,33 +54496,36 @@
 	    }
 	    return feature;
 	}
-	function getRowCount$1(feature, _bpPerPx) {
+	function getRowCount$1(feature, featureTypeOntology, _bpPerPx) {
 	    const { children, type } = feature;
 	    if (!children) {
 	        return 1;
 	    }
+	    const isTranscript = featureTypeOntology.isTypeOf(type, 'transcript');
 	    let rowCount = 0;
-	    if (type === 'mRNA') {
+	    if (isTranscript) {
 	        for (const [, child] of children) {
-	            if (child.type === 'CDS') {
+	            const isCds = featureTypeOntology.isTypeOf(child.type, 'CDS');
+	            if (isCds) {
 	                rowCount += 1;
 	            }
 	        }
 	        return rowCount;
 	    }
 	    for (const [, child] of children) {
-	        rowCount += getRowCount$1(child);
+	        rowCount += getRowCount$1(child, featureTypeOntology);
 	    }
 	    return rowCount;
 	}
 	/**
 	 * A list of all the subfeatures for each row for a given feature, as well as
 	 * the feature itself.
-	 * If the row contains an mRNA, the order is CDS -\> exon -\> mRNA -\> gene
-	 * If the row does not contain an mRNA, the order is subfeature -\> gene
+	 * If the row contains a transcript, the order is CDS -\> exon -\> transcript -\> gene
+	 * If the row does not contain an transcript, the order is subfeature -\> gene
 	 */
-	function featuresForRow$1(feature) {
-	    if (feature.type !== 'gene') {
+	function featuresForRow$1(feature, featureTypeOntology) {
+	    const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene');
+	    if (!isGene) {
 	        throw new Error('Top level feature for GeneGlyph must have type "gene"');
 	    }
 	    const { children } = feature;
@@ -54325,7 +54534,7 @@
 	    }
 	    const features = [];
 	    for (const [, child] of children) {
-	        if (child.type !== 'mRNA') {
+	        if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
 	            features.push([child, feature]);
 	            continue;
 	        }
@@ -54335,10 +54544,10 @@
 	        const cdss = [];
 	        const exons = [];
 	        for (const [, grandchild] of child.children) {
-	            if (grandchild.type === 'CDS') {
+	            if (featureTypeOntology.isTypeOf(grandchild.type, 'CDS')) {
 	                cdss.push(grandchild);
 	            }
-	            else if (grandchild.type === 'exon') {
+	            else if (featureTypeOntology.isTypeOf(grandchild.type, 'exon')) {
 	                exons.push(grandchild);
 	            }
 	        }
@@ -54348,599 +54557,1082 @@
 	    }
 	    return features;
 	}
-	function getRowForFeature$1(feature, childFeature) {
-	    const rows = featuresForRow$1(feature);
-	    for (const [idx, row] of rows.entries()) {
-	        if (row.some((feature) => feature._id === childFeature._id)) {
-	            return idx;
-	        }
-	    }
-	    return;
+	function getRowForFeature$1(feature, childFeature, featureTypeOntology) {
+	    const rows = featuresForRow$1(feature, featureTypeOntology);
+	    for (const [idx, row] of rows.entries()) {
+	        if (row.some((feature) => feature._id === childFeature._id)) {
+	            return idx;
+	        }
+	    }
+	    return;
+	}
+	function onMouseDown$1(stateModel, currentMousePosition, event) {
+	    const { featureAndGlyphUnderMouse } = currentMousePosition;
+	    // swallow the mouseDown if we are on the edge of the feature so that we
+	    // don't start dragging the view if we try to drag the feature edge
+	    const { feature } = featureAndGlyphUnderMouse;
+	    const draggableFeature = getDraggableFeatureInfo(currentMousePosition, feature, stateModel);
+	    if (draggableFeature) {
+	        event.stopPropagation();
+	        stateModel.startDrag(currentMousePosition, draggableFeature.feature, draggableFeature.edge);
+	    }
+	}
+	function onMouseMove$1(stateModel, mousePosition) {
+	    if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+	        const { featureAndGlyphUnderMouse } = mousePosition;
+	        stateModel.setApolloHover(featureAndGlyphUnderMouse);
+	        const { feature } = featureAndGlyphUnderMouse;
+	        const draggableFeature = getDraggableFeatureInfo(mousePosition, feature, stateModel);
+	        if (draggableFeature) {
+	            stateModel.setCursor('col-resize');
+	            return;
+	        }
+	    }
+	    stateModel.setCursor();
+	}
+	function onMouseUp$1(stateModel, mousePosition) {
+	    if (stateModel.apolloDragging) {
+	        return;
+	    }
+	    const { featureAndGlyphUnderMouse } = mousePosition;
+	    if (featureAndGlyphUnderMouse?.feature) {
+	        stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature);
+	    }
+	}
+	function getDraggableFeatureInfo(mousePosition, feature, stateModel) {
+	    const { session } = stateModel;
+	    const { apolloDataStore } = session;
+	    const { featureTypeOntology } = apolloDataStore.ontologyManager;
+	    if (!featureTypeOntology) {
+	        throw new Error('featureTypeOntology is undefined');
+	    }
+	    const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene');
+	    const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript');
+	    const isCds = featureTypeOntology.isTypeOf(feature.type, 'CDS');
+	    if (isGene || isTranscript) {
+	        return;
+	    }
+	    const { bp, refName, regionNumber, x } = mousePosition;
+	    const { lgv } = stateModel;
+	    const { offsetPx } = lgv;
+	    const minPxInfo = lgv.bpToPx({ refName, coord: feature.min, regionNumber });
+	    const maxPxInfo = lgv.bpToPx({ refName, coord: feature.max, regionNumber });
+	    if (minPxInfo === undefined || maxPxInfo === undefined) {
+	        return;
+	    }
+	    const minPx = minPxInfo.offsetPx - offsetPx;
+	    const maxPx = maxPxInfo.offsetPx - offsetPx;
+	    if (Math.abs(maxPx - minPx) < 8) {
+	        return;
+	    }
+	    if (Math.abs(minPx - x) < 4) {
+	        return { feature, edge: 'min' };
+	    }
+	    if (Math.abs(maxPx - x) < 4) {
+	        return { feature, edge: 'max' };
+	    }
+	    if (isCds) {
+	        const transcript = feature.parent;
+	        if (!transcript?.children) {
+	            return;
+	        }
+	        const exonChildren = [];
+	        for (const child of transcript.children.values()) {
+	            const childIsExon = featureTypeOntology.isTypeOf(child.type, 'exon');
+	            if (childIsExon) {
+	                exonChildren.push(child);
+	            }
+	        }
+	        const overlappingExon = exonChildren.find((child) => {
+	            const [start, end] = require$$1$2.intersection2(bp, bp + 1, child.min, child.max);
+	            return start !== undefined && end !== undefined;
+	        });
+	        if (!overlappingExon) {
+	            return;
+	        }
+	        const minPxInfo = lgv.bpToPx({
+	            refName,
+	            coord: overlappingExon.min,
+	            regionNumber,
+	        });
+	        const maxPxInfo = lgv.bpToPx({
+	            refName,
+	            coord: overlappingExon.max,
+	            regionNumber,
+	        });
+	        if (minPxInfo === undefined || maxPxInfo === undefined) {
+	            return;
+	        }
+	        const minPx = minPxInfo.offsetPx - offsetPx;
+	        const maxPx = maxPxInfo.offsetPx - offsetPx;
+	        if (Math.abs(maxPx - minPx) < 8) {
+	            return;
+	        }
+	        if (Math.abs(minPx - x) < 4) {
+	            return { feature: overlappingExon, edge: 'min' };
+	        }
+	        if (Math.abs(maxPx - x) < 4) {
+	            return { feature: overlappingExon, edge: 'max' };
+	        }
+	    }
+	    return;
+	}
+	// False positive here, none of these functions use "this"
+	/* eslint-disable @typescript-eslint/unbound-method */
+	const { drawTooltip: drawTooltip$1, getContextMenuItems: getContextMenuItems$1, onMouseLeave: onMouseLeave$1 } = boxGlyph;
+	/* eslint-enable @typescript-eslint/unbound-method */
+	const geneGlyph = {
+	    draw: draw$1,
+	    drawDragPreview: drawDragPreview$1,
+	    drawHover: drawHover$1,
+	    drawTooltip: drawTooltip$1,
+	    getContextMenuItems: getContextMenuItems$1,
+	    getFeatureFromLayout: getFeatureFromLayout$1,
+	    getRowCount: getRowCount$1,
+	    getRowForFeature: getRowForFeature$1,
+	    onMouseDown: onMouseDown$1,
+	    onMouseLeave: onMouseLeave$1,
+	    onMouseMove: onMouseMove$1,
+	    onMouseUp: onMouseUp$1,
+	};
+
+	function featuresForRow(feature) {
+	    const features = [[feature]];
+	    if (feature.children) {
+	        for (const [, child] of feature.children) {
+	            features.push(...featuresForRow(child));
+	        }
+	    }
+	    return features;
+	}
+	function getRowCount(feature) {
+	    return featuresForRow(feature).length;
+	}
+	function draw(ctx, feature, row, stateModel, displayedRegionIndex) {
+	    for (let i = 0; i < getRowCount(feature); i++) {
+	        drawRow(ctx, feature, row + i, row, stateModel, displayedRegionIndex);
+	    }
+	}
+	function drawRow(ctx, topLevelFeature, row, topRow, stateModel, displayedRegionIndex) {
+	    const features = featuresForRow(topLevelFeature)[row - topRow];
+	    for (const feature of features) {
+	        drawFeature(ctx, feature, row, stateModel, displayedRegionIndex);
+	    }
+	}
+	function drawFeature(ctx, feature, row, stateModel, displayedRegionIndex) {
+	    const { apolloRowHeight: heightPx, lgv, session } = stateModel;
+	    const { bpPerPx, displayedRegions, offsetPx } = lgv;
+	    const displayedRegion = displayedRegions[displayedRegionIndex];
+	    const minX = (lgv.bpToPx({
+	        refName: displayedRegion.refName,
+	        coord: feature.min,
+	        regionNumber: displayedRegionIndex,
+	    })?.offsetPx ?? 0) - offsetPx;
+	    const { reversed } = displayedRegion;
+	    const { apolloSelectedFeature } = session;
+	    const widthPx = feature.length / bpPerPx;
+	    const startPx = reversed ? minX - widthPx : minX;
+	    const top = row * heightPx;
+	    const rowCount = getRowCount(feature);
+	    const isSelected = isSelectedFeature(feature, apolloSelectedFeature);
+	    const groupingColor = isSelected ? 'rgba(130,0,0,0.45)' : 'rgba(255,0,0,0.25)';
+	    if (rowCount > 1) {
+	        // draw background that encapsulates all child features
+	        const featureHeight = rowCount * heightPx;
+	        drawBox(ctx, startPx, top, widthPx, featureHeight, groupingColor);
+	    }
+	    boxGlyph.draw(ctx, feature, row, stateModel, displayedRegionIndex);
+	}
+	function drawHover(stateModel, ctx) {
+	    const { apolloHover, apolloRowHeight, lgv } = stateModel;
+	    if (!apolloHover) {
+	        return;
+	    }
+	    const { feature } = apolloHover;
+	    const position = stateModel.getFeatureLayoutPosition(feature);
+	    if (!position) {
+	        return;
+	    }
+	    const { featureRow, layoutIndex, layoutRow } = position;
+	    const { bpPerPx, displayedRegions, offsetPx } = lgv;
+	    const displayedRegion = displayedRegions[layoutIndex];
+	    const { refName, reversed } = displayedRegion;
+	    const { length, max, min } = feature;
+	    const startPx = (lgv.bpToPx({
+	        refName,
+	        coord: reversed ? max : min,
+	        regionNumber: layoutIndex,
+	    })?.offsetPx ?? 0) - offsetPx;
+	    const top = (layoutRow + featureRow) * apolloRowHeight;
+	    const widthPx = length / bpPerPx;
+	    ctx.fillStyle = 'rgba(0,0,0,0.2)';
+	    ctx.fillRect(startPx, top, widthPx, apolloRowHeight * getRowCount(feature));
+	}
+	function getFeatureFromLayout(feature, bp, row) {
+	    const layoutRow = featuresForRow(feature)[row];
+	    return layoutRow.find((f) => bp >= f.min && bp <= f.max);
+	}
+	function getRowForFeature(feature, childFeature) {
+	    const rows = featuresForRow(feature);
+	    for (const [idx, row] of rows.entries()) {
+	        if (row.some((feature) => feature._id === childFeature._id)) {
+	            return idx;
+	        }
+	    }
+	    return;
+	}
+	// False positive here, none of these functions use "this"
+	/* eslint-disable @typescript-eslint/unbound-method */
+	const { drawDragPreview, drawTooltip, getContextMenuItems, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, } = boxGlyph;
+	/* eslint-enable @typescript-eslint/unbound-method */
+	const genericChildGlyph = {
+	    draw,
+	    drawDragPreview,
+	    drawHover,
+	    drawTooltip,
+	    getContextMenuItems,
+	    getFeatureFromLayout,
+	    getRowCount,
+	    getRowForFeature,
+	    onMouseDown,
+	    onMouseLeave,
+	    onMouseMove,
+	    onMouseUp,
+	};
+
+	/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+	function layoutsModelFactory(pluginManager, configSchema) {
+	    const BaseLinearApolloDisplay = baseModelFactory(pluginManager, configSchema);
+	    return BaseLinearApolloDisplay.named('LinearApolloDisplayLayouts')
+	        .props({
+	        featuresMinMaxLimit: 500_000,
+	    })
+	        .volatile(() => ({
+	        seenFeatures: mobx.observable.map(),
+	    }))
+	        .views((self) => ({
+	        get featuresMinMax() {
+	            const { assemblyManager } = self.session;
+	            return self.lgv.displayedRegions.map((region) => {
+	                const assembly = assemblyManager.get(region.assemblyName);
+	                let min;
+	                let max;
+	                const { end, refName, start } = region;
+	                for (const [, feature] of self.seenFeatures) {
+	                    if (refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
+	                        !require$$1$2.doesIntersect2(start, end, feature.min, feature.max) ||
+	                        feature.length > self.featuresMinMaxLimit ||
+	                        (self.filteredFeatureTypes.length > 0 &&
+	                            !self.filteredFeatureTypes.includes(feature.type))) {
+	                        continue;
+	                    }
+	                    if (min === undefined) {
+	                        ({ min } = feature);
+	                    }
+	                    if (max === undefined) {
+	                        ({ max } = feature);
+	                    }
+	                    if (feature.minWithChildren < min) {
+	                        ({ min } = feature);
+	                    }
+	                    if (feature.maxWithChildren > max) {
+	                        ({ max } = feature);
+	                    }
+	                }
+	                if (min !== undefined && max !== undefined) {
+	                    return [min, max];
+	                }
+	                return;
+	            });
+	        },
+	        getGlyph(feature) {
+	            if (this.looksLikeGene(feature)) {
+	                return geneGlyph;
+	            }
+	            if (feature.children?.size) {
+	                return genericChildGlyph;
+	            }
+	            return boxGlyph;
+	        },
+	        looksLikeGene(feature) {
+	            const { featureTypeOntology } = self.session.apolloDataStore.ontologyManager;
+	            if (!featureTypeOntology) {
+	                return false;
+	            }
+	            const { children } = feature;
+	            if (!children?.size) {
+	                return false;
+	            }
+	            const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene');
+	            if (!isGene) {
+	                return false;
+	            }
+	            for (const [, child] of children) {
+	                if (featureTypeOntology.isTypeOf(child.type, 'transcript')) {
+	                    const { children: grandChildren } = child;
+	                    if (!grandChildren?.size) {
+	                        return false;
+	                    }
+	                    const hasCDS = [...grandChildren.values()].some((grandchild) => featureTypeOntology.isTypeOf(grandchild.type, 'CDS'));
+	                    const hasExon = [...grandChildren.values()].some((grandchild) => featureTypeOntology.isTypeOf(grandchild.type, 'exon'));
+	                    if (hasCDS && hasExon) {
+	                        return true;
+	                    }
+	                }
+	            }
+	            return false;
+	        },
+	    }))
+	        .actions((self) => ({
+	        addSeenFeature(feature) {
+	            self.seenFeatures.set(feature._id, feature);
+	        },
+	        deleteSeenFeature(featureId) {
+	            self.seenFeatures.delete(featureId);
+	        },
+	    }))
+	        .views((self) => ({
+	        get featureLayouts() {
+	            const { assemblyManager } = self.session;
+	            return self.lgv.displayedRegions.map((region, idx) => {
+	                const assembly = assemblyManager.get(region.assemblyName);
+	                const featureLayout = new Map();
+	                const minMax = self.featuresMinMax[idx];
+	                if (!minMax) {
+	                    return featureLayout;
+	                }
+	                const [min, max] = minMax;
+	                const rows = [];
+	                const { end, refName, start } = region;
+	                for (const [id, feature] of self.seenFeatures.entries()) {
+	                    if (!require$$1$3.isAlive(feature)) {
+	                        self.deleteSeenFeature(id);
+	                        continue;
+	                    }
+	                    if (refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
+	                        !require$$1$2.doesIntersect2(start, end, feature.min, feature.max) ||
+	                        (self.filteredFeatureTypes.length > 0 &&
+	                            !self.filteredFeatureTypes.includes(feature.type))) {
+	                        continue;
+	                    }
+	                    const { featureTypeOntology } = self.session.apolloDataStore.ontologyManager;
+	                    if (!featureTypeOntology) {
+	                        throw new Error('featureTypeOntology is undefined');
+	                    }
+	                    const rowCount = self
+	                        .getGlyph(feature)
+	                        .getRowCount(feature, featureTypeOntology, self.lgv.bpPerPx);
+	                    let startingRow = 0;
+	                    let placed = false;
+	                    while (!placed) {
+	                        let rowsForFeature = rows.slice(startingRow, startingRow + rowCount);
+	                        if (rowsForFeature.length < rowCount) {
+	                            for (let i = 0; i < rowCount - rowsForFeature.length; i++) {
+	                                const newRowNumber = rows.length;
+	                                rows[newRowNumber] = Array.from({ length: max - min });
+	                                featureLayout.set(newRowNumber, []);
+	                            }
+	                            rowsForFeature = rows.slice(startingRow, startingRow + rowCount);
+	                        }
+	                        if (rowsForFeature
+	                            .map((rowForFeature) => {
+	                            // zero-length features are allowed in the spec
+	                            const featureMax = feature.max - feature.min === 0
+	                                ? feature.min + 1
+	                                : feature.max;
+	                            let start = feature.min - min, end = featureMax - min;
+	                            if (feature.min - min < 0) {
+	                                start = 0;
+	                                end = featureMax - feature.min;
+	                            }
+	                            return rowForFeature.slice(start, end).some(Boolean);
+	                        })
+	                            .some(Boolean)) {
+	                            startingRow += 1;
+	                            continue;
+	                        }
+	                        for (let rowNum = startingRow; rowNum < startingRow + rowCount; rowNum++) {
+	                            const row = rows[rowNum];
+	                            let start = feature.min - min, end = feature.max - min;
+	                            if (feature.min - min < 0) {
+	                                start = 0;
+	                                end = feature.max - feature.min;
+	                            }
+	                            row.fill(true, start, end);
+	                            const layoutRow = featureLayout.get(rowNum);
+	                            layoutRow?.push([rowNum - startingRow, feature]);
+	                        }
+	                        placed = true;
+	                    }
+	                }
+	                return featureLayout;
+	            });
+	        },
+	        getFeatureLayoutPosition(feature) {
+	            const { featureLayouts } = this;
+	            const { featureTypeOntology } = self.session.apolloDataStore.ontologyManager;
+	            for (const [idx, layout] of featureLayouts.entries()) {
+	                for (const [layoutRowNum, layoutRow] of layout) {
+	                    for (const [featureRowNum, layoutFeature] of layoutRow) {
+	                        if (featureRowNum !== 0) {
+	                            // Same top-level feature in all feature rows, so only need to
+	                            // check the first one
+	                            continue;
+	                        }
+	                        if (feature._id === layoutFeature._id) {
+	                            return {
+	                                layoutIndex: idx,
+	                                layoutRow: layoutRowNum,
+	                                featureRow: featureRowNum,
+	                            };
+	                        }
+	                        if (layoutFeature.hasDescendant(feature._id)) {
+	                            if (!featureTypeOntology) {
+	                                throw new Error('featureTypeOntology is undefined');
+	                            }
+	                            const row = self
+	                                .getGlyph(layoutFeature)
+	                                .getRowForFeature(layoutFeature, feature, featureTypeOntology);
+	                            if (row !== undefined) {
+	                                return {
+	                                    layoutIndex: idx,
+	                                    layoutRow: layoutRowNum,
+	                                    featureRow: row,
+	                                };
+	                            }
+	                        }
+	                    }
+	                }
+	            }
+	            return;
+	        },
+	    }))
+	        .views((self) => ({
+	        get highestRow() {
+	            return Math.max(0, ...self.featureLayouts.map((layout) => Math.max(...layout.keys())));
+	        },
+	    }))
+	        .actions((self) => ({
+	        afterAttach() {
+	            require$$1$3.addDisposer(self, mobx.autorun(() => {
+	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+	                    return;
+	                }
+	                for (const region of self.regions) {
+	                    const assembly = self.session.apolloDataStore.assemblies.get(region.assemblyName);
+	                    const ref = assembly?.getByRefName(region.refName);
+	                    const features = ref?.features;
+	                    if (!features) {
+	                        continue;
+	                    }
+	                    for (const [, feature] of features) {
+	                        if (require$$1$2.doesIntersect2(region.start, region.end, feature.min, feature.max) &&
+	                            !self.seenFeatures.has(feature._id)) {
+	                            self.addSeenFeature(feature);
+	                        }
+	                    }
+	                }
+	            }, { name: 'LinearApolloDisplaySetSeenFeatures', delay: 1000 }));
+	        },
+	    }));
+	}
+
+	function renderingModelIntermediateFactory(pluginManager, configSchema) {
+	    const LinearApolloDisplayLayouts = layoutsModelFactory(pluginManager, configSchema);
+	    return LinearApolloDisplayLayouts.named('LinearApolloDisplayRendering')
+	        .props({
+	        sequenceRowHeight: 15,
+	        apolloRowHeight: 20,
+	        detailsMinHeight: 200,
+	        detailsHeight: 200,
+	        lastRowTooltipBufferHeight: 40,
+	        isShown: true,
+	    })
+	        .volatile(() => ({
+	        canvas: null,
+	        overlayCanvas: null,
+	        collaboratorCanvas: null,
+	        seqTrackCanvas: null,
+	        seqTrackOverlayCanvas: null,
+	        theme: undefined,
+	    }))
+	        .views((self) => ({
+	        get featuresHeight() {
+	            return ((self.highestRow + 1) * self.apolloRowHeight +
+	                self.lastRowTooltipBufferHeight);
+	        },
+	    }))
+	        .actions((self) => ({
+	        toggleShown() {
+	            self.isShown = !self.isShown;
+	        },
+	        setDetailsHeight(newHeight) {
+	            self.detailsHeight = self.isShown
+	                ? Math.max(Math.min(newHeight, self.height - 100), Math.min(self.height, self.detailsMinHeight))
+	                : newHeight;
+	        },
+	        setCanvas(canvas) {
+	            self.canvas = canvas;
+	        },
+	        setOverlayCanvas(canvas) {
+	            self.overlayCanvas = canvas;
+	        },
+	        setCollaboratorCanvas(canvas) {
+	            self.collaboratorCanvas = canvas;
+	        },
+	        setSeqTrackCanvas(canvas) {
+	            self.seqTrackCanvas = canvas;
+	        },
+	        setSeqTrackOverlayCanvas(canvas) {
+	            self.seqTrackOverlayCanvas = canvas;
+	        },
+	        setTheme(theme) {
+	            self.theme = theme;
+	        },
+	        afterAttach() {
+	            require$$1$3.addDisposer(self, mobx.autorun(() => {
+	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+	                    return;
+	                }
+	                const ctx = self.collaboratorCanvas?.getContext('2d');
+	                if (!ctx) {
+	                    return;
+	                }
+	                ctx.clearRect(0, 0, self.lgv.dynamicBlocks.totalWidthPx, self.featuresHeight);
+	                for (const collaborator of self.session.collaborators) {
+	                    const { locations } = collaborator;
+	                    if (locations.length === 0) {
+	                        continue;
+	                    }
+	                    let idx = 0;
+	                    for (const displayedRegion of self.lgv.displayedRegions) {
+	                        for (const location of locations) {
+	                            if (location.refSeq !== displayedRegion.refName) {
+	                                continue;
+	                            }
+	                            const { end, refSeq, start } = location;
+	                            const locationStartPxInfo = self.lgv.bpToPx({
+	                                refName: refSeq,
+	                                coord: start,
+	                                regionNumber: idx,
+	                            });
+	                            if (!locationStartPxInfo) {
+	                                continue;
+	                            }
+	                            const locationStartPx = locationStartPxInfo.offsetPx - self.lgv.offsetPx;
+	                            const locationWidthPx = (end - start) / self.lgv.bpPerPx;
+	                            ctx.fillStyle = 'rgba(0,255,0,.2)';
+	                            ctx.fillRect(locationStartPx, 1, locationWidthPx, 100);
+	                            ctx.fillStyle = 'black';
+	                            ctx.fillText(collaborator.name, locationStartPx + 1, 11, locationWidthPx - 2);
+	                        }
+	                        idx++;
+	                    }
+	                }
+	            }, { name: 'LinearApolloDisplayRenderCollaborators' }));
+	        },
+	    }));
+	}
+	function colorCode(letter, theme) {
+	    return (theme?.palette.bases[letter.toUpperCase()].main.toString() ?? 'lightgray');
 	}
-	function onMouseDown$1(stateModel, currentMousePosition, event) {
-	    const { featureAndGlyphUnderMouse } = currentMousePosition;
-	    // swallow the mouseDown if we are on the edge of the feature so that we
-	    // don't start dragging the view if we try to drag the feature edge
-	    const { feature } = featureAndGlyphUnderMouse;
-	    const draggableFeature = getDraggableFeatureInfo(currentMousePosition, feature, stateModel);
-	    if (draggableFeature) {
-	        event.stopPropagation();
-	        stateModel.startDrag(currentMousePosition, draggableFeature.feature, draggableFeature.edge);
-	    }
+	function codonColorCode(letter) {
+	    const colorMap = {
+	        M: '#33ee33',
+	        '*': '#f44336',
+	    };
+	    return colorMap[letter.toUpperCase()];
 	}
-	function onMouseMove$1(stateModel, mousePosition) {
-	    if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-	        const { featureAndGlyphUnderMouse } = mousePosition;
-	        stateModel.setApolloHover(featureAndGlyphUnderMouse);
-	        const { feature } = featureAndGlyphUnderMouse;
-	        const draggableFeature = getDraggableFeatureInfo(mousePosition, feature, stateModel);
-	        if (draggableFeature) {
-	            stateModel.setCursor('col-resize');
-	            return;
-	        }
-	    }
-	    stateModel.setCursor();
+	function reverseCodonSeq(seq) {
+	    return [...seq]
+	        .map((c) => require$$1$2.revcom(c))
+	        .reverse()
+	        .join('');
 	}
-	function onMouseUp$1(stateModel, mousePosition) {
-	    if (stateModel.apolloDragging) {
-	        return;
-	    }
-	    const { featureAndGlyphUnderMouse } = mousePosition;
-	    if (featureAndGlyphUnderMouse?.feature) {
-	        stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature);
-	    }
+	function drawLetter(seqTrackctx, startPx, widthPx, letter, textY) {
+	    const fontSize = Math.min(widthPx, 10);
+	    seqTrackctx.fillStyle = '#000';
+	    seqTrackctx.font = `${fontSize}px`;
+	    const textWidth = seqTrackctx.measureText(letter).width;
+	    const textX = startPx + (widthPx - textWidth) / 2;
+	    seqTrackctx.fillText(letter, textX, textY + 10);
 	}
-	function getDraggableFeatureInfo(mousePosition, feature, stateModel) {
-	    if (feature.type === 'gene' || feature.type === 'mRNA') {
-	        return;
-	    }
-	    const { bp, refName, regionNumber, x } = mousePosition;
-	    const { lgv } = stateModel;
-	    const { offsetPx } = lgv;
-	    const minPxInfo = lgv.bpToPx({ refName, coord: feature.min, regionNumber });
-	    const maxPxInfo = lgv.bpToPx({ refName, coord: feature.max, regionNumber });
-	    if (minPxInfo === undefined || maxPxInfo === undefined) {
-	        return;
+	function drawTranslation(seqTrackctx, bpPerPx, trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight, seq, i, reverse) {
+	    let codonSeq = seq.slice(i, i + 3).toUpperCase();
+	    if (reverse) {
+	        codonSeq = reverseCodonSeq(codonSeq);
 	    }
-	    const minPx = minPxInfo.offsetPx - offsetPx;
-	    const maxPx = maxPxInfo.offsetPx - offsetPx;
-	    if (Math.abs(maxPx - minPx) < 8) {
+	    const codonLetter = require$$1$2.defaultCodonTable[codonSeq];
+	    if (!codonLetter) {
 	        return;
 	    }
-	    if (Math.abs(minPx - x) < 4) {
-	        return { feature, edge: 'min' };
+	    const fillColor = codonColorCode(codonLetter);
+	    if (fillColor) {
+	        seqTrackctx.fillStyle = fillColor;
+	        seqTrackctx.fillRect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight);
 	    }
-	    if (Math.abs(maxPx - x) < 4) {
-	        return { feature, edge: 'max' };
+	    if (bpPerPx <= 0.1) {
+	        seqTrackctx.rect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight);
+	        seqTrackctx.stroke();
+	        drawLetter(seqTrackctx, trnslStartPx, trnslWidthPx, codonLetter, trnslY);
 	    }
-	    if (feature.type === 'CDS') {
-	        const mRNA = feature.parent;
-	        if (!mRNA?.children) {
-	            return;
-	        }
-	        const exonChildren = [...mRNA.children.values()].filter((child) => child.type === 'exon');
-	        const overlappingExon = exonChildren.find((child) => {
-	            const [start, end] = require$$1$2.intersection2(bp, bp + 1, child.min, child.max);
-	            return start !== undefined && end !== undefined;
-	        });
-	        if (!overlappingExon) {
-	            return;
+	}
+	function sequenceRenderingModelFactory(pluginManager, configSchema) {
+	    const LinearApolloDisplayRendering = renderingModelIntermediateFactory(pluginManager, configSchema);
+	    return LinearApolloDisplayRendering.actions((self) => ({
+	        afterAttach() {
+	            require$$1$3.addDisposer(self, mobx.autorun(async () => {
+	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+	                    return;
+	                }
+	                if (self.lgv.bpPerPx > 3) {
+	                    return;
+	                }
+	                const seqTrackctx = self.seqTrackCanvas?.getContext('2d');
+	                if (!seqTrackctx) {
+	                    return;
+	                }
+	                seqTrackctx.clearRect(0, 0, self.lgv.dynamicBlocks.totalWidthPx, self.lgv.bpPerPx <= 1 ? 125 : 95);
+	                const frames = self.lgv.bpPerPx <= 1
+	                    ? [3, 2, 1, 0, 0, -1, -2, -3]
+	                    : [3, 2, 1, -1, -2, -3];
+	                let height = 0;
+	                for (const frame of frames) {
+	                    const frameColor = self.theme?.palette.framesCDS.at(frame)?.main;
+	                    if (frameColor) {
+	                        seqTrackctx.fillStyle = frameColor;
+	                        seqTrackctx.fillRect(0, height, self.lgv.dynamicBlocks.totalWidthPx, self.sequenceRowHeight);
+	                    }
+	                    height += self.sequenceRowHeight;
+	                }
+	                for (const [idx, region] of self.regions.entries()) {
+	                    const driver = self.session.apolloDataStore.getBackendDriver(region.assemblyName);
+	                    if (!driver) {
+	                        throw new Error('Failed to get the backend driver');
+	                    }
+	                    const { seq } = await driver.getSequence(region);
+	                    if (!seq) {
+	                        return;
+	                    }
+	                    for (const [i, letter] of [...seq].entries()) {
+	                        const trnslXOffset = (self.lgv.bpToPx({
+	                            refName: region.refName,
+	                            coord: region.start + i,
+	                            regionNumber: idx,
+	                        })?.offsetPx ?? 0) - self.lgv.offsetPx;
+	                        const trnslWidthPx = 3 / self.lgv.bpPerPx;
+	                        const trnslStartPx = self.lgv.displayedRegions[idx].reversed
+	                            ? trnslXOffset - trnslWidthPx
+	                            : trnslXOffset;
+	                        // Draw translation forward
+	                        for (let j = 2; j >= 0; j--) {
+	                            if ((region.start + i) % 3 === j) {
+	                                drawTranslation(seqTrackctx, self.lgv.bpPerPx, trnslStartPx, self.sequenceRowHeight * (2 - j), trnslWidthPx, self.sequenceRowHeight, seq, i, false);
+	                            }
+	                        }
+	                        if (self.lgv.bpPerPx <= 1) {
+	                            const xOffset = (self.lgv.bpToPx({
+	                                refName: region.refName,
+	                                coord: region.start + i,
+	                                regionNumber: idx,
+	                            })?.offsetPx ?? 0) - self.lgv.offsetPx;
+	                            const widthPx = 1 / self.lgv.bpPerPx;
+	                            const startPx = self.lgv.displayedRegions[idx].reversed
+	                                ? xOffset - widthPx
+	                                : xOffset;
+	                            // Draw forward
+	                            seqTrackctx.beginPath();
+	                            seqTrackctx.fillStyle = colorCode(letter, self.theme);
+	                            seqTrackctx.rect(startPx, self.sequenceRowHeight * 3, widthPx, self.sequenceRowHeight);
+	                            seqTrackctx.fill();
+	                            if (self.lgv.bpPerPx <= 0.1) {
+	                                seqTrackctx.stroke();
+	                                drawLetter(seqTrackctx, startPx, widthPx, letter, self.sequenceRowHeight * 3);
+	                            }
+	                            // Draw reverse
+	                            const revLetter = require$$1$2.revcom(letter);
+	                            seqTrackctx.beginPath();
+	                            seqTrackctx.fillStyle = colorCode(revLetter, self.theme);
+	                            seqTrackctx.rect(startPx, self.sequenceRowHeight * 4, widthPx, self.sequenceRowHeight);
+	                            seqTrackctx.fill();
+	                            if (self.lgv.bpPerPx <= 0.1) {
+	                                seqTrackctx.stroke();
+	                                drawLetter(seqTrackctx, startPx, widthPx, revLetter, self.sequenceRowHeight * 4);
+	                            }
+	                        }
+	                        // Draw translation reverse
+	                        for (let k = 0; k <= 2; k++) {
+	                            const rowOffset = self.lgv.bpPerPx <= 1 ? 5 : 3;
+	                            if ((region.start + i) % 3 === k) {
+	                                drawTranslation(seqTrackctx, self.lgv.bpPerPx, trnslStartPx, self.sequenceRowHeight * (rowOffset + k), trnslWidthPx, self.sequenceRowHeight, seq, i, true);
+	                            }
+	                        }
+	                    }
+	                }
+	            }, { name: 'LinearApolloDisplayRenderSequence' }));
+	        },
+	    }));
+	}
+	function renderingModelFactory(pluginManager, configSchema) {
+	    const LinearApolloDisplayRendering = sequenceRenderingModelFactory(pluginManager, configSchema);
+	    return LinearApolloDisplayRendering.actions((self) => ({
+	        afterAttach() {
+	            require$$1$3.addDisposer(self, mobx.autorun(() => {
+	                const { canvas, featureLayouts, featuresHeight, lgv } = self;
+	                if (!lgv.initialized || self.regionCannotBeRendered()) {
+	                    return;
+	                }
+	                const { displayedRegions, dynamicBlocks } = lgv;
+	                const ctx = canvas?.getContext('2d');
+	                if (!ctx) {
+	                    return;
+	                }
+	                ctx.clearRect(0, 0, dynamicBlocks.totalWidthPx, featuresHeight);
+	                for (const [idx, featureLayout] of featureLayouts.entries()) {
+	                    const displayedRegion = displayedRegions[idx];
+	                    for (const [row, featureLayoutRow] of featureLayout.entries()) {
+	                        for (const [featureRow, feature] of featureLayoutRow) {
+	                            if (featureRow > 0) {
+	                                continue;
+	                            }
+	                            if (!require$$1$2.doesIntersect2(displayedRegion.start, displayedRegion.end, feature.min, feature.max)) {
+	                                continue;
+	                            }
+	                            self.getGlyph(feature).draw(ctx, feature, row, self, idx);
+	                        }
+	                    }
+	                }
+	            }, { name: 'LinearApolloDisplayRenderFeatures' }));
+	        },
+	    }));
+	}
+
+	function isMousePositionWithFeatureAndGlyph(mousePosition) {
+	    return 'featureAndGlyphUnderMouse' in mousePosition;
+	}
+	function getMousePosition(event, lgv) {
+	    const canvas = event.currentTarget;
+	    const { clientX, clientY } = event;
+	    const { left, top } = canvas.getBoundingClientRect();
+	    const x = clientX - left;
+	    const y = clientY - top;
+	    const { coord: bp, index: regionNumber, refName } = lgv.pxToBp(x);
+	    return { x, y, refName, bp, regionNumber };
+	}
+	function getTranslationRow(frame, bpPerPx) {
+	    const offset = bpPerPx <= 1 ? 2 : 0;
+	    switch (frame) {
+	        case 3: {
+	            return 0;
 	        }
-	        const minPxInfo = lgv.bpToPx({
-	            refName,
-	            coord: overlappingExon.min,
-	            regionNumber,
-	        });
-	        const maxPxInfo = lgv.bpToPx({
-	            refName,
-	            coord: overlappingExon.max,
-	            regionNumber,
-	        });
-	        if (minPxInfo === undefined || maxPxInfo === undefined) {
-	            return;
+	        case 2: {
+	            return 1;
 	        }
-	        const minPx = minPxInfo.offsetPx - offsetPx;
-	        const maxPx = maxPxInfo.offsetPx - offsetPx;
-	        if (Math.abs(maxPx - minPx) < 8) {
-	            return;
+	        case 1: {
+	            return 2;
 	        }
-	        if (Math.abs(minPx - x) < 4) {
-	            return { feature: overlappingExon, edge: 'min' };
+	        case -1: {
+	            return 3 + offset;
 	        }
-	        if (Math.abs(maxPx - x) < 4) {
-	            return { feature: overlappingExon, edge: 'max' };
+	        case -2: {
+	            return 4 + offset;
 	        }
-	    }
-	    return;
-	}
-	// False positive here, none of these functions use "this"
-	/* eslint-disable @typescript-eslint/unbound-method */
-	const { drawTooltip: drawTooltip$1, getContextMenuItems: getContextMenuItems$1, onMouseLeave: onMouseLeave$1 } = boxGlyph;
-	/* eslint-enable @typescript-eslint/unbound-method */
-	const geneGlyph = {
-	    draw: draw$1,
-	    drawDragPreview: drawDragPreview$1,
-	    drawHover: drawHover$1,
-	    drawTooltip: drawTooltip$1,
-	    getContextMenuItems: getContextMenuItems$1,
-	    getFeatureFromLayout: getFeatureFromLayout$1,
-	    getRowCount: getRowCount$1,
-	    getRowForFeature: getRowForFeature$1,
-	    onMouseDown: onMouseDown$1,
-	    onMouseLeave: onMouseLeave$1,
-	    onMouseMove: onMouseMove$1,
-	    onMouseUp: onMouseUp$1,
-	};
-
-	function featuresForRow(feature) {
-	    const features = [[feature]];
-	    if (feature.children) {
-	        for (const [, child] of feature.children) {
-	            features.push(...featuresForRow(child));
+	        case -3: {
+	            return 5 + offset;
 	        }
 	    }
-	    return features;
-	}
-	function getRowCount(feature) {
-	    return featuresForRow(feature).length;
-	}
-	function draw(ctx, feature, row, stateModel, displayedRegionIndex) {
-	    for (let i = 0; i < getRowCount(feature); i++) {
-	        drawRow(ctx, feature, row + i, row, stateModel, displayedRegionIndex);
-	    }
-	}
-	function drawRow(ctx, topLevelFeature, row, topRow, stateModel, displayedRegionIndex) {
-	    const features = featuresForRow(topLevelFeature)[row - topRow];
-	    for (const feature of features) {
-	        drawFeature(ctx, feature, row, stateModel, displayedRegionIndex);
-	    }
-	}
-	function drawFeature(ctx, feature, row, stateModel, displayedRegionIndex) {
-	    const { apolloRowHeight: heightPx, lgv, session } = stateModel;
-	    const { bpPerPx, displayedRegions, offsetPx } = lgv;
-	    const displayedRegion = displayedRegions[displayedRegionIndex];
-	    const minX = (lgv.bpToPx({
-	        refName: displayedRegion.refName,
-	        coord: feature.min,
-	        regionNumber: displayedRegionIndex,
-	    })?.offsetPx ?? 0) - offsetPx;
-	    const { reversed } = displayedRegion;
-	    const { apolloSelectedFeature } = session;
-	    const widthPx = feature.length / bpPerPx;
-	    const startPx = reversed ? minX - widthPx : minX;
-	    const top = row * heightPx;
-	    const rowCount = getRowCount(feature);
-	    const isSelected = isSelectedFeature(feature, apolloSelectedFeature);
-	    const groupingColor = isSelected ? 'rgba(130,0,0,0.45)' : 'rgba(255,0,0,0.25)';
-	    if (rowCount > 1) {
-	        // draw background that encapsulates all child features
-	        const featureHeight = rowCount * heightPx;
-	        drawBox(ctx, startPx, top, widthPx, featureHeight, groupingColor);
-	    }
-	    boxGlyph.draw(ctx, feature, row, stateModel, displayedRegionIndex);
 	}
-	function drawHover(stateModel, ctx) {
-	    const { apolloHover, apolloRowHeight, lgv } = stateModel;
-	    if (!apolloHover) {
-	        return;
-	    }
-	    const { feature } = apolloHover;
-	    const position = stateModel.getFeatureLayoutPosition(feature);
-	    if (!position) {
+	function getSeqRow(strand, bpPerPx) {
+	    if (bpPerPx > 1 || strand === undefined) {
 	        return;
 	    }
-	    const { featureRow, layoutIndex, layoutRow } = position;
-	    const { bpPerPx, displayedRegions, offsetPx } = lgv;
-	    const displayedRegion = displayedRegions[layoutIndex];
-	    const { refName, reversed } = displayedRegion;
-	    const { length, max, min } = feature;
-	    const startPx = (lgv.bpToPx({
-	        refName,
-	        coord: reversed ? max : min,
-	        regionNumber: layoutIndex,
-	    })?.offsetPx ?? 0) - offsetPx;
-	    const top = (layoutRow + featureRow) * apolloRowHeight;
-	    const widthPx = length / bpPerPx;
-	    ctx.fillStyle = 'rgba(0,0,0,0.2)';
-	    ctx.fillRect(startPx, top, widthPx, apolloRowHeight * getRowCount(feature));
-	}
-	function getFeatureFromLayout(feature, bp, row) {
-	    const layoutRow = featuresForRow(feature)[row];
-	    return layoutRow.find((f) => bp >= f.min && bp <= f.max);
+	    return strand === 1 ? 3 : 4;
 	}
-	function getRowForFeature(feature, childFeature) {
-	    const rows = featuresForRow(feature);
-	    for (const [idx, row] of rows.entries()) {
-	        if (row.some((feature) => feature._id === childFeature._id)) {
-	            return idx;
-	        }
+	function highlightSeq(seqTrackOverlayctx, theme, startPx, sequenceRowHeight, row, widthPx) {
+	    if (row !== undefined) {
+	        seqTrackOverlayctx.fillStyle =
+	            theme?.palette.action.focus ?? 'rgba(0,0,0,0.04)';
+	        seqTrackOverlayctx.fillRect(startPx, sequenceRowHeight * row, widthPx, sequenceRowHeight);
 	    }
-	    return;
 	}
-	// False positive here, none of these functions use "this"
-	/* eslint-disable @typescript-eslint/unbound-method */
-	const { drawDragPreview, drawTooltip, getContextMenuItems, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, } = boxGlyph;
-	/* eslint-enable @typescript-eslint/unbound-method */
-	const genericChildGlyph = {
-	    draw,
-	    drawDragPreview,
-	    drawHover,
-	    drawTooltip,
-	    getContextMenuItems,
-	    getFeatureFromLayout,
-	    getRowCount,
-	    getRowForFeature,
-	    onMouseDown,
-	    onMouseLeave,
-	    onMouseMove,
-	    onMouseUp,
-	};
-
-	/** get the appropriate glyph for the given top-level feature */
-	function getGlyph(feature) {
-	    if (looksLikeGene(feature)) {
-	        return geneGlyph;
-	    }
-	    if (feature.children?.size) {
-	        return genericChildGlyph;
-	    }
-	    return boxGlyph;
+	function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
+	    const LinearApolloDisplayRendering = renderingModelFactory(pluginManager, configSchema);
+	    return LinearApolloDisplayRendering.named('LinearApolloDisplayMouseEvents')
+	        .volatile(() => ({
+	        apolloDragging: null,
+	        cursor: undefined,
+	        apolloHover: undefined,
+	    }))
+	        .views((self) => ({
+	        getMousePosition(event) {
+	            const mousePosition = getMousePosition(event, self.lgv);
+	            const { bp, regionNumber, y } = mousePosition;
+	            const row = Math.floor(y / self.apolloRowHeight);
+	            const featureLayout = self.featureLayouts[regionNumber];
+	            const layoutRow = featureLayout.get(row);
+	            if (!layoutRow) {
+	                return mousePosition;
+	            }
+	            const foundFeature = layoutRow.find((f) => bp >= f[1].min && bp <= f[1].max);
+	            if (!foundFeature) {
+	                return mousePosition;
+	            }
+	            const [featureRow, topLevelFeature] = foundFeature;
+	            const glyph = self.getGlyph(topLevelFeature);
+	            const { featureTypeOntology } = self.session.apolloDataStore.ontologyManager;
+	            if (!featureTypeOntology) {
+	                throw new Error('featureTypeOntology is undefined');
+	            }
+	            const feature = glyph.getFeatureFromLayout(topLevelFeature, bp, featureRow, featureTypeOntology);
+	            if (!feature) {
+	                return mousePosition;
+	            }
+	            return {
+	                ...mousePosition,
+	                featureAndGlyphUnderMouse: { feature, topLevelFeature, glyph },
+	            };
+	        },
+	    }))
+	        .actions((self) => ({
+	        continueDrag(mousePosition, event) {
+	            if (!self.apolloDragging) {
+	                throw new Error('continueDrag() called with no current drag in progress');
+	            }
+	            event.stopPropagation();
+	            self.apolloDragging = { ...self.apolloDragging, current: mousePosition };
+	        },
+	        setDragging(dragInfo) {
+	            self.apolloDragging = dragInfo ?? null;
+	        },
+	    }))
+	        .actions((self) => ({
+	        setApolloHover(n) {
+	            self.apolloHover = n;
+	        },
+	        setCursor(cursor) {
+	            if (self.cursor !== cursor) {
+	                self.cursor = cursor;
+	            }
+	        },
+	    }))
+	        .actions(() => ({
+	        // onClick(event: CanvasMouseEvent) {
+	        onClick() {
+	            // TODO: set the selected feature
+	        },
+	    }));
+	}
+	function mouseEventsSeqHightlightModelFactory(pluginManager, configSchema) {
+	    const LinearApolloDisplayRendering = mouseEventsModelIntermediateFactory(pluginManager, configSchema);
+	    return LinearApolloDisplayRendering.actions((self) => ({
+	        afterAttach() {
+	            require$$1$3.addDisposer(self, mobx.autorun(() => {
+	                // This type is wrong in @jbrowse/core
+	                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+	                    return;
+	                }
+	                const seqTrackOverlayctx = self.seqTrackOverlayCanvas?.getContext('2d');
+	                if (!seqTrackOverlayctx) {
+	                    return;
+	                }
+	                seqTrackOverlayctx.clearRect(0, 0, self.lgv.dynamicBlocks.totalWidthPx, self.lgv.bpPerPx <= 1 ? 125 : 95);
+	                const { apolloHover, lgv, regions, sequenceRowHeight, session, theme, } = self;
+	                if (!apolloHover) {
+	                    return;
+	                }
+	                const { feature } = apolloHover;
+	                const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+	                if (!featureTypeOntology) {
+	                    throw new Error('featureTypeOntology is undefined');
+	                }
+	                for (const [idx, region] of regions.entries()) {
+	                    if (featureTypeOntology.isTypeOf(feature.type, 'CDS')) {
+	                        const parentFeature = feature.parent;
+	                        if (!parentFeature) {
+	                            continue;
+	                        }
+	                        const cdsLocs = parentFeature.cdsLocations.find((loc) => feature.min === loc.at(0)?.min &&
+	                            feature.max === loc.at(-1)?.max);
+	                        if (!cdsLocs) {
+	                            continue;
+	                        }
+	                        for (const dl of cdsLocs) {
+	                            const frame = require$$1$2.getFrame(dl.min, dl.max, feature.strand ?? 1, dl.phase);
+	                            const row = getTranslationRow(frame, lgv.bpPerPx);
+	                            const offset = (lgv.bpToPx({
+	                                refName: region.refName,
+	                                coord: dl.min,
+	                                regionNumber: idx,
+	                            })?.offsetPx ?? 0) - lgv.offsetPx;
+	                            const widthPx = (dl.max - dl.min) / lgv.bpPerPx;
+	                            const startPx = lgv.displayedRegions[idx].reversed
+	                                ? offset - widthPx
+	                                : offset;
+	                            highlightSeq(seqTrackOverlayctx, theme, startPx, sequenceRowHeight, row, widthPx);
+	                        }
+	                    }
+	                    else {
+	                        const row = getSeqRow(feature.strand, lgv.bpPerPx);
+	                        const offset = (lgv.bpToPx({
+	                            refName: region.refName,
+	                            coord: feature.min,
+	                            regionNumber: idx,
+	                        })?.offsetPx ?? 0) - lgv.offsetPx;
+	                        const widthPx = feature.length / lgv.bpPerPx;
+	                        const startPx = lgv.displayedRegions[idx].reversed
+	                            ? offset - widthPx
+	                            : offset;
+	                        highlightSeq(seqTrackOverlayctx, theme, startPx, sequenceRowHeight, row, widthPx);
+	                    }
+	                }
+	            }, { name: 'LinearApolloDisplayRenderSeqHighlight' }));
+	        },
+	    }));
 	}
-	function looksLikeGene(feature) {
-	    const { children } = feature;
-	    if (!children?.size) {
-	        return false;
-	    }
-	    for (const [, child] of children) {
-	        if (child.type === 'mRNA') {
-	            const { children: grandChildren } = child;
-	            if (!grandChildren?.size) {
-	                return false;
-	            }
-	            const hasCDS = [...grandChildren.values()].some((grandchild) => grandchild.type === 'CDS');
-	            const hasExon = [...grandChildren.values()].some((grandchild) => grandchild.type === 'exon');
-	            if (hasCDS && hasExon) {
-	                return true;
+	function mouseEventsModelFactory(pluginManager, configSchema) {
+	    const LinearApolloDisplayMouseEvents = mouseEventsSeqHightlightModelFactory(pluginManager, configSchema);
+	    return LinearApolloDisplayMouseEvents.views((self) => ({
+	        contextMenuItems(contextCoord) {
+	            const { apolloHover } = self;
+	            if (!(apolloHover && contextCoord)) {
+	                return [];
 	            }
-	        }
-	    }
-	    return false;
-	}
-
-	/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
-	const useStyles$4 = mui.makeStyles()((theme) => ({
-	    typeContent: {
-	        display: 'inline-block',
-	        width: '174px',
-	        height: '100%',
-	        cursor: 'text',
-	    },
-	    feature: {
-	        td: {
-	            position: 'relative',
-	            verticalAlign: 'top',
-	            paddingLeft: '0.5em',
+	            const { topLevelFeature } = apolloHover;
+	            const glyph = self.getGlyph(topLevelFeature);
+	            return glyph.getContextMenuItems(self);
 	        },
-	    },
-	    arrow: {
-	        display: 'inline-block',
-	        width: '1.6em',
-	        textAlign: 'center',
-	        cursor: 'pointer',
-	    },
-	    arrowExpanded: {
-	        transform: 'rotate(90deg)',
-	    },
-	    hoveredFeature: {
-	        backgroundColor: theme.palette.action.hover,
-	    },
-	    typeInputElement: {
-	        border: 'none',
-	        background: 'none',
-	    },
-	    typeErrorMessage: {
-	        color: 'red',
-	    },
-	}));
-	function makeContextMenuItems(display, feature) {
-	    const { changeManager, getAssemblyId, regions, selectedFeature, session, setSelectedFeature, } = display;
-	    return featureContextMenuItems(feature, regions[0], getAssemblyId, selectedFeature, setSelectedFeature, session, changeManager);
-	}
-	function getTopLevelFeature(feature) {
-	    let cur = feature;
-	    while (cur.parent) {
-	        cur = cur.parent;
-	    }
-	    return cur;
-	}
-	const Feature = mobxReact.observer(function Feature({ depth, feature, isHovered, isSelected, model: displayState, selectedFeatureClass, setContextMenu, }) {
-	    const { classes } = useStyles$4();
-	    const { apolloHover, changeManager, selectedFeature, session, tabularEditor: tabularEditorState, } = displayState;
-	    const { featureCollapsed, filterText } = tabularEditorState;
-	    const { _id, children, max, min, strand, type } = feature;
-	    const expanded = !featureCollapsed.get(_id);
-	    const toggleExpanded = (e) => {
-	        e.stopPropagation();
-	        tabularEditorState.setFeatureCollapsed(_id, expanded);
-	    };
-	    // pop up a snackbar in the session notifying user of an error
-	    const notifyError = (e) => {
-	        session.notify(e.message, 'error');
-	    };
-	    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-	        React__default["default"].createElement("tr", { onMouseEnter: (_e) => {
-	                displayState.setApolloHover({
-	                    feature,
-	                    topLevelFeature: getTopLevelFeature(feature),
-	                    glyph: getGlyph(getTopLevelFeature(feature)),
+	    }))
+	        .actions((self) => ({
+	        // explicitly pass in a feature in case it's not the same as the one in
+	        // mousePosition (e.g. if features are drawn overlapping).
+	        startDrag(mousePosition, feature, edge) {
+	            self.apolloDragging = {
+	                start: mousePosition,
+	                current: mousePosition,
+	                feature,
+	                edge,
+	            };
+	        },
+	        endDrag() {
+	            if (!self.apolloDragging) {
+	                throw new Error('endDrag() called with no current drag in progress');
+	            }
+	            const { current, edge, feature, start } = self.apolloDragging;
+	            // don't do anything if it was only dragged a tiny bit
+	            if (Math.abs(current.x - start.x) <= 4) {
+	                self.setDragging();
+	                self.setCursor();
+	                return;
+	            }
+	            const { displayedRegions } = self.lgv;
+	            const region = displayedRegions[start.regionNumber];
+	            const assembly = self.getAssemblyId(region.assemblyName);
+	            let change;
+	            if (edge === 'max') {
+	                const featureId = feature._id;
+	                const oldEnd = feature.max;
+	                const newEnd = current.bp;
+	                change = new dist$2.LocationEndChange({
+	                    typeName: 'LocationEndChange',
+	                    changedIds: [featureId],
+	                    featureId,
+	                    oldEnd,
+	                    newEnd,
+	                    assembly,
 	                });
-	            }, className: classes.feature +
-	                (isSelected
-	                    ? ` ${selectedFeatureClass}`
-	                    : isHovered
-	                        ? ` ${classes.hoveredFeature}`
-	                        : ''), onClick: (e) => {
-	                e.stopPropagation();
-	                displayState.setSelectedFeature(feature);
-	            }, onContextMenu: (e) => {
-	                e.preventDefault();
-	                setContextMenu({
-	                    position: { left: e.clientX + 2, top: e.clientY - 6 },
-	                    items: makeContextMenuItems(displayState, feature),
+	            }
+	            else {
+	                const featureId = feature._id;
+	                const oldStart = feature.min;
+	                const newStart = current.bp;
+	                change = new dist$2.LocationStartChange({
+	                    typeName: 'LocationStartChange',
+	                    changedIds: [featureId],
+	                    featureId,
+	                    oldStart,
+	                    newStart,
+	                    assembly,
 	                });
-	                return false;
-	            } },
-	            React__default["default"].createElement("td", { style: {
-	                    whiteSpace: 'nowrap',
-	                    borderLeft: `${depth * 2}em solid transparent`,
-	                } },
-	                children?.size ? (
-	                // TODO: a11y
-	                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-	                React__default["default"].createElement("div", { onClick: toggleExpanded, className: classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : '') }, "\u276F")) : null,
-	                React__default["default"].createElement("div", { className: classes.typeContent },
-	                    React__default["default"].createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTypeTerms.bind(null, feature), renderInput: (params) => {
-	                            return (React__default["default"].createElement("div", { ref: params.InputProps.ref },
-	                                React__default["default"].createElement("input", { type: "text", ...params.inputProps, className: classes.typeInputElement, style: { width: 170 } }),
-	                                params.error ? (React__default["default"].createElement("div", { className: classes.typeErrorMessage }, params.errorMessage ?? 'unknown error')) : null));
-	                        }, onChange: (oldValue, newValue) => {
-	                            if (newValue) {
-	                                handleFeatureTypeChange(changeManager, feature, oldValue, newValue).catch(notifyError);
-	                            }
-	                        } }))),
-	            React__default["default"].createElement("td", null,
-	                React__default["default"].createElement(NumberCell, { initialValue: min + 1, notifyError: notifyError, onChangeCommitted: (newStart) => handleFeatureStartChange(changeManager, feature, min, newStart - 1) })),
-	            React__default["default"].createElement("td", null,
-	                React__default["default"].createElement(NumberCell, { initialValue: max, notifyError: notifyError, onChangeCommitted: (newEnd) => handleFeatureEndChange(changeManager, feature, max, newEnd) })),
-	            React__default["default"].createElement("td", null, strand === 1 ? '+' : strand === -1 ? '-' : undefined),
-	            React__default["default"].createElement("td", null,
-	                React__default["default"].createElement(FeatureAttributes, { filterText: filterText, feature: feature }))),
-	        expanded && children
-	            ? [...children.entries()]
-	                .filter((entry) => {
-	                if (!filterText) {
-	                    return true;
-	                }
-	                const [, childFeature] = entry;
-	                // search feature and its subfeatures for the text
-	                const text = JSON.stringify(childFeature);
-	                return text.includes(filterText);
-	            })
-	                .map(([featureId, childFeature]) => {
-	                const childHovered = apolloHover?.feature._id === childFeature._id;
-	                const childSelected = selectedFeature?._id === childFeature._id;
-	                return (React__default["default"].createElement(Feature, { isHovered: childHovered, isSelected: childSelected, selectedFeatureClass: selectedFeatureClass, key: featureId, depth: (depth || 0) + 1, feature: childFeature, model: displayState, setContextMenu: setContextMenu }));
-	            })
-	            : null));
-	});
-	async function fetchValidTypeTerms(feature, ontologyStore, _signal) {
-	    const { parent: parentFeature } = feature;
-	    if (parentFeature) {
-	        // if this is a child of an existing feature, restrict the autocomplete choices to valid
-	        // parts of that feature
-	        const parentTypeTerms = await ontologyStore.getTermsWithLabelOrSynonym(parentFeature.type, { includeSubclasses: false });
-	        // eslint-disable-next-line unicorn/no-array-callback-reference
-	        const parentTypeClassTerms = parentTypeTerms.filter(isOntologyClass);
-	        if (parentTypeClassTerms.length > 0) {
-	            const subpartTerms = await ontologyStore.getClassesThat('part_of', parentTypeClassTerms);
-	            return subpartTerms;
-	        }
-	    }
-	    return;
-	}
-
-	/* eslint-disable @typescript-eslint/no-unsafe-call */
-	const useStyles$3 = mui.makeStyles()((theme) => ({
-	    scrollableTable: {
-	        width: '100%',
-	        height: '100%',
-	        th: {
-	            position: 'sticky',
-	            top: 0,
-	            zIndex: 2,
-	            textAlign: 'left',
-	            background: theme.palette.background.paper,
-	            paddingTop: '3.2em',
+	            }
+	            void self.changeManager.submit(change);
+	            self.setDragging();
+	            self.setCursor();
 	        },
-	        td: { whiteSpace: 'normal' },
-	    },
-	    selectedFeature: {
-	        backgroundColor: theme.palette.action.selected,
-	    },
-	}));
-	const HybridGrid = mobxReact.observer(function HybridGrid({ model, }) {
-	    const { apolloHover, seenFeatures, selectedFeature, tabularEditor } = model;
-	    const theme = material.useTheme();
-	    const { classes } = useStyles$3();
-	    const scrollContainerRef = React.useRef(null);
-	    const [contextMenu, setContextMenu] = React.useState(null);
-	    const { filterText } = tabularEditor;
-	    // scrolls to selected feature if one is selected and it's not already visible
-	    React.useEffect(() => {
-	        const scrollContainer = scrollContainerRef.current;
-	        if (scrollContainer && selectedFeature) {
-	            const selectedRow = scrollContainer.querySelector(`.${classes.selectedFeature}`);
-	            if (selectedRow) {
-	                const currScroll = scrollContainer.scrollTop;
-	                const newScrollTop = selectedRow.offsetTop - 25;
-	                const isVisible = newScrollTop > currScroll &&
-	                    newScrollTop < currScroll + scrollContainer.offsetHeight;
-	                if (!isVisible) {
-	                    scrollContainer.scroll({ top: newScrollTop - 40, behavior: 'smooth' });
-	                }
+	    }))
+	        .actions((self) => ({
+	        onMouseDown(event) {
+	            const mousePosition = self.getMousePosition(event);
+	            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+	                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseDown(self, mousePosition, event);
 	            }
-	        }
-	    }, [selectedFeature, seenFeatures, classes.selectedFeature]);
-	    return (React__default["default"].createElement("div", { ref: scrollContainerRef, style: { width: '100%', overflowY: 'auto', height: '100%' } },
-	        React__default["default"].createElement("table", { className: classes.scrollableTable },
-	            React__default["default"].createElement("thead", null,
-	                React__default["default"].createElement("tr", null,
-	                    React__default["default"].createElement("th", null, "Type"),
-	                    React__default["default"].createElement("th", null, "Start"),
-	                    React__default["default"].createElement("th", null, "End"),
-	                    React__default["default"].createElement("th", null, "Strand"),
-	                    React__default["default"].createElement("th", null, "Attributes"))),
-	            React__default["default"].createElement("tbody", null, [...seenFeatures.entries()]
-	                .filter((entry) => {
-	                if (!filterText) {
-	                    return true;
+	        },
+	        onMouseMove(event) {
+	            const mousePosition = self.getMousePosition(event);
+	            if (self.apolloDragging) {
+	                self.setCursor('col-resize');
+	                self.continueDrag(mousePosition, event);
+	                return;
+	            }
+	            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+	                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseMove(self, mousePosition, event);
+	            }
+	            else {
+	                self.setApolloHover();
+	                self.setCursor();
+	            }
+	        },
+	        onMouseLeave(event) {
+	            self.setDragging();
+	            self.setApolloHover();
+	            const mousePosition = self.getMousePosition(event);
+	            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+	                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseLeave(self, mousePosition, event);
+	            }
+	        },
+	        onMouseUp(event) {
+	            const mousePosition = self.getMousePosition(event);
+	            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+	                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseUp(self, mousePosition, event);
+	            }
+	            if (self.apolloDragging) {
+	                self.endDrag();
+	            }
+	        },
+	    }))
+	        .actions((self) => ({
+	        afterAttach() {
+	            require$$1$3.addDisposer(self, mobx.autorun(() => {
+	                // This type is wrong in @jbrowse/core
+	                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+	                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+	                    return;
 	                }
-	                const [, feature] = entry;
-	                // search feature and its subfeatures for the text
-	                const text = JSON.stringify(feature);
-	                return text.includes(filterText);
-	            })
-	                .sort((a, b) => {
-	                return a[1].min - b[1].min;
-	            })
-	                .map(([featureId, feature]) => {
-	                const isSelected = selectedFeature?._id === featureId;
-	                const isHovered = apolloHover?.feature._id === featureId;
-	                return (React__default["default"].createElement(Feature, { key: featureId, isSelected: isSelected, isHovered: isHovered, selectedFeatureClass: classes.selectedFeature, feature: feature, model: model, depth: 0, setContextMenu: setContextMenu }));
-	            }))),
-	        React__default["default"].createElement(ui.Menu, { open: Boolean(contextMenu), onMenuItemClick: (_, callback) => {
-	                callback();
-	                setContextMenu(null);
-	            }, onClose: () => {
-	                setContextMenu(null);
-	            }, TransitionProps: {
-	                onExit: () => {
-	                    setContextMenu(null);
-	                },
-	            }, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenu?.items ?? [], anchorReference: "anchorPosition", anchorPosition: contextMenu?.position })));
-	});
-
-	var Clear = {};
-
-	var _interopRequireDefault$5 = interopRequireDefault.exports;
-	Object.defineProperty(Clear, "__esModule", {
-	  value: true
-	});
-	var default_1$5 = Clear["default"] = void 0;
-	var _createSvgIcon$5 = /*#__PURE__*/_interopRequireDefault$5(createSvgIcon);
-	var _jsxRuntime$5 = require$$2__default["default"];
-	var _default$5 = /*#__PURE__*/(0, _createSvgIcon$5["default"])( /*#__PURE__*/(0, _jsxRuntime$5.jsx)("path", {
-	  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-	}), 'Clear');
-	default_1$5 = Clear["default"] = _default$5;
-
-	var UnfoldLess = {};
-
-	var _interopRequireDefault$4 = interopRequireDefault.exports;
-	Object.defineProperty(UnfoldLess, "__esModule", {
-	  value: true
-	});
-	var default_1$4 = UnfoldLess["default"] = void 0;
-	var _createSvgIcon$4 = /*#__PURE__*/_interopRequireDefault$4(createSvgIcon);
-	var _jsxRuntime$4 = require$$2__default["default"];
-	var _default$4 = /*#__PURE__*/(0, _createSvgIcon$4["default"])( /*#__PURE__*/(0, _jsxRuntime$4.jsx)("path", {
-	  d: "M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"
-	}), 'UnfoldLess');
-	default_1$4 = UnfoldLess["default"] = _default$4;
-
-	/* eslint-disable @typescript-eslint/unbound-method */
-	const useStyles$2 = mui.makeStyles()({
-	    toolbar: {
-	        width: '100%',
-	        display: 'flex',
-	        paddingRight: '2em',
-	        flexDirection: 'row',
-	        justifyContent: 'space-between',
-	        position: 'absolute',
-	        zIndex: 4,
-	    },
-	    filterText: {},
-	});
-	const ToolBar = mobxReact.observer(function ToolBar({ model: displayState, }) {
-	    const model = displayState.tabularEditor;
-	    const { classes } = useStyles$2();
-	    return (React__default["default"].createElement("div", { className: classes.toolbar },
-	        React__default["default"].createElement(material.Tooltip, { title: "Collapse all" },
-	            React__default["default"].createElement(material.IconButton, { "aria-label": "collapse", sx: { marginTop: 0 }, onClick: model.collapseAllFeatures },
-	                React__default["default"].createElement(default_1$4, null))),
-	        React__default["default"].createElement(material.TextField, { className: classes.filterText, label: "Filter features", value: model.filterText, sx: { marginTop: 0 }, variant: "outlined", onChange: (event) => {
-	                model.setFilterText(event.target.value);
-	            }, InputProps: {
-	                endAdornment: (React__default["default"].createElement(material.InputAdornment, { position: "end" },
-	                    React__default["default"].createElement(material.IconButton, { onClick: () => {
-	                            model.clearFilterText();
-	                        } },
-	                        React__default["default"].createElement(default_1$5, null)))),
-	            } })));
-	});
-
-	function stopPropagation(e) {
-	    e.stopPropagation();
+	                const ctx = self.overlayCanvas?.getContext('2d');
+	                if (!ctx) {
+	                    return;
+	                }
+	                ctx.clearRect(0, 0, self.lgv.dynamicBlocks.totalWidthPx, self.featuresHeight);
+	                const { apolloDragging, apolloHover } = self;
+	                if (!apolloHover) {
+	                    return;
+	                }
+	                const { glyph } = apolloHover;
+	                // draw mouseover hovers
+	                glyph.drawHover(self, ctx);
+	                // draw tooltip on hover
+	                glyph.drawTooltip(self, ctx);
+	                // dragging previews
+	                if (apolloDragging) {
+	                    // NOTE: the glyph where the drag started is responsible for drawing the preview.
+	                    // it can call methods in other glyphs to help with this though.
+	                    const glyph = self.getGlyph(apolloDragging.feature.topLevelFeature);
+	                    glyph.drawDragPreview(self, ctx);
+	                }
+	            }, { name: 'LinearApolloDisplayRenderMouseoverAndDrag' }));
+	        },
+	    }));
 	}
-	const TabularEditorPane = mobxReact.observer(function TabularEditorPane({ model: displayState, }) {
-	    const model = displayState.tabularEditor;
-	    if (!model.isShown) {
-	        return null;
-	    }
-	    return (
-	    // TODO: a11y
-	    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-	    React__default["default"].createElement("div", { onMouseDown: stopPropagation, onClick: stopPropagation, style: { width: '100%', height: '100%', position: 'relative' } },
-	        React__default["default"].createElement(ToolBar, { model: displayState }),
-	        React__default["default"].createElement(HybridGrid, { model: displayState })));
-	});
-
-	const TabularEditorStateModelType = require$$1$3.types
-	    .model('TabularEditor', {
-	    isShown: true,
-	    featureCollapsed: require$$1$3.types.map(require$$1$3.types.boolean),
-	    filterText: '',
-	})
-	    .actions((self) => ({
-	    setFeatureCollapsed(id, state) {
-	        self.featureCollapsed.set(id, state);
-	    },
-	    setFilterText(text) {
-	        self.filterText = text;
-	    },
-	    clearFilterText() {
-	        self.filterText = '';
-	    },
-	    collapseAllFeatures() {
-	        // iterate over all seen features and set them to collapsed
-	        const display = require$$1$3.getParent(self);
-	        for (const [featureId] of display.seenFeatures.entries()) {
-	            self.featureCollapsed.set(featureId, true);
-	        }
-	    },
-	    togglePane() {
-	        self.isShown = !self.isShown;
-	    },
-	    hidePane() {
-	        self.isShown = false;
-	    },
-	    showPane() {
-	        self.isShown = true;
-	    },
-	    // onPatch(patch: any) {
-	    //   console.log(patch)
-	    // },
-	}));
 
 	function stateModelFactory$1(pluginManager, configSchema) {
 	    // TODO: this needs to be refactored so that the final composition of the
@@ -54992,7 +55684,7 @@
 	}), 'Error');
 	default_1$1 = _Error["default"] = _default$1;
 
-	/* eslint-disable @typescript-eslint/no-unsafe-call */
+	/* eslint-disable @typescript-eslint/unbound-method */
 	const useStyles$1 = mui.makeStyles()((theme) => ({
 	    canvasContainer: {
 	        position: 'relative',
@@ -56042,8 +56734,34 @@
 	                        configuration.readConfObject(ont, 'textIndexFields'),
 	                    ];
 	                    if (!ontologyManager.findOntology(name)) {
+	                        const session = require$$1$2.getSession(self);
+	                        const { jobsManager } = session;
+	                        const controller = new AbortController();
+	                        const jobName = `Loading ontology "${name}"`;
+	                        const job = {
+	                            name: jobName,
+	                            statusMessage: `Loading ontology "${name}", version "${version}", this may take a while`,
+	                            progressPct: 0,
+	                            cancelCallback: () => {
+	                                controller.abort();
+	                                jobsManager.abortJob(job.name);
+	                            },
+	                        };
+	                        const update = (message, progress) => {
+	                            if (progress === 0) {
+	                                jobsManager.runJob(job);
+	                                return;
+	                            }
+	                            if (progress === 100) {
+	                                jobsManager.done(job);
+	                                return;
+	                            }
+	                            jobsManager.update(jobName, message, progress);
+	                            return;
+	                        };
 	                        ontologyManager.addOntology(name, version, source, {
 	                            textIndexing: { indexFields },
+	                            update,
 	                        });
 	                    }
 	                }
@@ -56738,6 +57456,10 @@
 	            return codonLayout;
 	        },
 	        get featureLayout() {
+	            const { featureTypeOntology } = self.session.apolloDataStore.ontologyManager;
+	            if (!featureTypeOntology) {
+	                throw new Error('featureTypeOntology is undefined');
+	            }
 	            const featureLayout = new Map();
 	            for (const [refSeq, featuresForRefSeq] of this.features || []) {
 	                if (!featuresForRefSeq) {
@@ -56761,11 +57483,11 @@
 	                    return start1 - start2 || end1 - end2;
 	                })) {
 	                    for (const [, childFeature] of feature.children ?? new Map()) {
-	                        if (childFeature.type === 'mRNA') {
+	                        if (featureTypeOntology.isTypeOf(childFeature.type, 'transcript')) {
 	                            for (const [, grandChildFeature] of childFeature.children ||
 	                                new Map()) {
 	                                let startingRow;
-	                                if (grandChildFeature.type === 'CDS') {
+	                                if (featureTypeOntology.isTypeOf(grandChildFeature.type, 'CDS')) {
 	                                    let discontinuousLocations;
 	                                    if (grandChildFeature.discontinuousLocations.length > 0) {
 	                                        ({ discontinuousLocations } = grandChildFeature);
@@ -56954,7 +57676,7 @@
 	    }));
 	}
 
-	/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+	/* eslint-disable @typescript-eslint/unbound-method */
 	function isApolloMessageData(data) {
 	    return (typeof data === 'object' &&
 	        data !== null &&
@@ -57088,6 +57810,7 @@
 	            return pluggableElement;
 	        });
 	        pluginManager.addToExtensionPoint('Core-extendPluggableElement', annotationFromPileup);
+	        pluginManager.addToExtensionPoint('Core-extendPluggableElement', annotationFromJBrowseFeature);
 	        if (!inWebWorker) {
 	            pluginManager.addToExtensionPoint('Core-extendWorker', (handle) => {
 	                if (!('on' in handle && handle.on)) {