@apollo-annotation/jbrowse-plugin-apollo 0.3.2 → 0.3.4

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

@@ -101,7 +101,7 @@ var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon)
 var ErrorIcon__default = /*#__PURE__*/_interopDefaultLegacy(ErrorIcon);
 var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
 
-var version = "0.3.2";
+var version = "0.3.4";
 
 const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -1297,6 +1297,7 @@ const OntologyRecordType = mobxStateTree.types
 })
     .volatile((_self) => ({
     dataStore: undefined,
+    startedEquivalentTypeRequests: new Set(),
 }))
     .actions((self) => ({
     /** does nothing, just used to access the model to force its lifecycle hooks to run */
@@ -1320,12 +1321,33 @@ const OntologyRecordType = mobxStateTree.types
         if (!self.dataStore) {
             return;
         }
+        if (self.startedEquivalentTypeRequests.has(type)) {
+            return;
+        }
+        self.startedEquivalentTypeRequests.add(type);
         const terms = (yield self.dataStore.getTermsWithLabelOrSynonym(type));
         const equivalents = terms
             .map((term) => term.lbl)
             .filter((term) => term != undefined);
         self.setEquivalentTypes(type, equivalents);
     }),
+}))
+    .actions((self) => ({
+    afterCreate() {
+        mobx.autorun((reaction) => {
+            if (!self.dataStore) {
+                return;
+            }
+            void self.loadEquivalentTypes('gene');
+            void self.loadEquivalentTypes('transcript');
+            void self.loadEquivalentTypes('CDS');
+            void self.loadEquivalentTypes('mRNA');
+            reaction.dispose();
+        });
+    },
+    setEquivalentTypes(type, equivalentTypes) {
+        self.equivalentTypes.set(type, equivalentTypes);
+    },
 }))
     .views((self) => ({
     isTypeOf(queryType, typeOf) {
@@ -5828,7 +5850,6 @@ const ApolloTranscriptDetailsModel = mobxStateTree.types
     })),
     assembly: mobxStateTree.types.string,
     refName: mobxStateTree.types.string,
-    changeManager: mobxStateTree.types.frozen(),
 })
     .volatile(() => ({
     tryReload: undefined,
@@ -6811,13 +6832,13 @@ const FilterFeatures = mobxReact.observer(function FilterFeatures({ featureTypes
         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, null,
+                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, null,
+                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),
@@ -6838,6 +6859,7 @@ function baseModelFactory(_pluginManager, configSchema) {
         table: false,
         heightPreConfig: mobxStateTree.types.maybe(mobxStateTree.types.refinement('displayHeight', mobxStateTree.types.number, (n) => n >= minDisplayHeight)),
         filteredFeatureTypes: mobxStateTree.types.array(mobxStateTree.types.string),
+        loadingState: false,
     })
         .views((self) => {
         const { configuration, renderProps: superRenderProps } = self;
@@ -6870,6 +6892,9 @@ function baseModelFactory(_pluginManager, configSchema) {
             }
             return 300;
         },
+        get loading() {
+            return self.loadingState;
+        },
     }))
         .views((self) => ({
         get rendererTypeName() {
@@ -6955,6 +6980,9 @@ function baseModelFactory(_pluginManager, configSchema) {
         updateFilteredFeatureTypes(types) {
             self.filteredFeatureTypes = mobxStateTree.cast(types);
         },
+        setLoading(loading) {
+            self.loadingState = loading;
+        },
     }))
         .views((self) => {
         const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self;
@@ -7025,7 +7053,14 @@ function baseModelFactory(_pluginManager, configSchema) {
                 if (!self.lgv.initialized || self.regionCannotBeRendered()) {
                     return;
                 }
-                void self.session.apolloDataStore.loadFeatures(self.regions);
+                self.setLoading(true);
+                void self.session.apolloDataStore
+                    .loadFeatures(self.regions)
+                    .then(() => {
+                    setTimeout(() => {
+                        self.setLoading(false);
+                    }, 1000);
+                });
                 if (self.lgv.bpPerPx <= 3) {
                     void self.session.apolloDataStore.loadRefSeq(self.regions);
                 }
@@ -7454,7 +7489,6 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
     const displayedRegion = displayedRegions[displayedRegionIndex];
     const { refName, reversed } = displayedRegion;
     const rowHeight = apolloRowHeight;
-    const exonHeight = Math.round(0.6 * rowHeight);
     const cdsHeight = Math.round(0.9 * rowHeight);
     const { children, min, strand } = feature;
     if (!children) {
@@ -7488,27 +7522,20 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
             currentRow += 1;
             continue;
         }
-        const { children: childrenOfTranscript, min } = transcript;
-        if (!childrenOfTranscript) {
+        const { children: transcriptChildren } = transcript;
+        if (!transcriptChildren) {
             continue;
         }
-        for (const [, cds] of childrenOfTranscript) {
-            if (!featureTypeOntology.isTypeOf(cds.type, 'CDS')) {
+        const cdsCount = getCDSCount(transcript, featureTypeOntology);
+        for (const [, childFeature] of transcriptChildren) {
+            if (!featureTypeOntology.isTypeOf(childFeature.type, 'CDS')) {
                 continue;
             }
-            const minX = (lgv.bpToPx({
-                refName,
-                coord: min,
-                regionNumber: displayedRegionIndex,
-            })?.offsetPx ?? 0) - offsetPx;
-            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';
-            ctx.beginPath();
-            ctx.moveTo(startPx, height);
-            ctx.lineTo(startPx + widthPx, height);
-            ctx.stroke();
+            drawLine(ctx, stateModel, displayedRegionIndex, row, transcript, currentRow);
+            currentRow += 1;
+        }
+        if (cdsCount === 0) {
+            drawLine(ctx, stateModel, displayedRegionIndex, row, transcript, currentRow);
             currentRow += 1;
         }
     }
@@ -7522,83 +7549,125 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
             currentRow += 1;
             continue;
         }
-        for (const cdsRow of child.cdsLocations) {
-            const { _id, children: childrenOfTranscript } = child;
-            if (!childrenOfTranscript) {
-                continue;
-            }
-            for (const [, exon] of childrenOfTranscript) {
-                if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
+        const cdsCount = getCDSCount(child, featureTypeOntology);
+        if (cdsCount != 0) {
+            for (const cdsRow of child.cdsLocations) {
+                const { _id, children: transcriptChildren } = child;
+                if (!transcriptChildren) {
                     continue;
                 }
-                const minX = (lgv.bpToPx({
-                    refName,
-                    coord: exon.min,
-                    regionNumber: displayedRegionIndex,
-                })?.offsetPx ?? 0) - offsetPx;
-                const widthPx = exon.length / bpPerPx;
-                const startPx = reversed ? minX - widthPx : minX;
-                const top = (row + currentRow) * rowHeight;
-                const exonTop = top + (rowHeight - exonHeight) / 2;
-                ctx.fillStyle = theme?.palette.text.primary ?? 'black';
-                ctx.fillRect(startPx, exonTop, widthPx, exonHeight);
-                if (widthPx > 2) {
-                    ctx.clearRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2);
-                    ctx.fillStyle =
-                        apolloSelectedFeature && exon._id === apolloSelectedFeature._id
-                            ? 'rgb(0,0,0)'
-                            : 'rgb(211,211,211)';
-                    ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2);
-                    if (forwardFill && backwardFill && strand) {
-                        const reversal = reversed ? -1 : 1;
-                        const [topFill, bottomFill] = strand * reversal === 1
-                            ? [forwardFill, backwardFill]
-                            : [backwardFill, forwardFill];
-                        ctx.fillStyle = topFill;
-                        ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, (exonHeight - 2) / 2);
-                        ctx.fillStyle = bottomFill;
-                        ctx.fillRect(startPx + 1, exonTop + 1 + (exonHeight - 2) / 2, widthPx - 2, (exonHeight - 2) / 2);
+                for (const [, exon] of transcriptChildren) {
+                    if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
+                        continue;
+                    }
+                    drawExon(ctx, stateModel, displayedRegionIndex, row, exon, currentRow, strand, forwardFill, backwardFill);
+                }
+                for (const cds of cdsRow) {
+                    const cdsWidthPx = (cds.max - cds.min) / bpPerPx;
+                    const minX = (lgv.bpToPx({
+                        refName,
+                        coord: cds.min,
+                        regionNumber: displayedRegionIndex,
+                    })?.offsetPx ?? 0) - offsetPx;
+                    const cdsStartPx = reversed ? minX - cdsWidthPx : minX;
+                    ctx.fillStyle = theme?.palette.text.primary ?? 'black';
+                    const cdsTop = (row + currentRow) * rowHeight + (rowHeight - cdsHeight) / 2;
+                    ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight);
+                    if (cdsWidthPx > 2) {
+                        ctx.clearRect(cdsStartPx + 1, cdsTop + 1, cdsWidthPx - 2, cdsHeight - 2);
+                        const frame = util.getFrame(cds.min, cds.max, child.strand ?? 1, cds.phase);
+                        const frameColor = theme?.palette.framesCDS.at(frame)?.main;
+                        const cdsColorCode = frameColor ?? 'rgb(171,71,188)';
+                        ctx.fillStyle =
+                            apolloSelectedFeature && _id === apolloSelectedFeature._id
+                                ? 'rgb(0,0,0)'
+                                : cdsColorCode;
+                        ctx.fillStyle = cdsColorCode;
+                        ctx.fillRect(cdsStartPx + 1, cdsTop + 1, cdsWidthPx - 2, cdsHeight - 2);
+                        if (forwardFill && backwardFill && strand) {
+                            const reversal = reversed ? -1 : 1;
+                            const [topFill, bottomFill] = strand * reversal === 1
+                                ? [forwardFill, backwardFill]
+                                : [backwardFill, forwardFill];
+                            ctx.fillStyle = topFill;
+                            ctx.fillRect(cdsStartPx + 1, cdsTop + 1, cdsWidthPx - 2, (cdsHeight - 2) / 2);
+                            ctx.fillStyle = bottomFill;
+                            ctx.fillRect(cdsStartPx + 1, cdsTop + (cdsHeight - 2) / 2, cdsWidthPx - 2, (cdsHeight - 2) / 2);
+                        }
                     }
                 }
+                currentRow += 1;
             }
-            for (const cds of cdsRow) {
-                const cdsWidthPx = (cds.max - cds.min) / bpPerPx;
-                const minX = (lgv.bpToPx({
-                    refName,
-                    coord: cds.min,
-                    regionNumber: displayedRegionIndex,
-                })?.offsetPx ?? 0) - offsetPx;
-                const cdsStartPx = reversed ? minX - cdsWidthPx : minX;
-                ctx.fillStyle = theme?.palette.text.primary ?? 'black';
-                const cdsTop = (row + currentRow) * rowHeight + (rowHeight - cdsHeight) / 2;
-                ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight);
-                if (cdsWidthPx > 2) {
-                    ctx.clearRect(cdsStartPx + 1, cdsTop + 1, cdsWidthPx - 2, cdsHeight - 2);
-                    const frame = util.getFrame(cds.min, cds.max, child.strand ?? 1, cds.phase);
-                    const frameColor = theme?.palette.framesCDS.at(frame)?.main;
-                    const cdsColorCode = frameColor ?? 'rgb(171,71,188)';
-                    ctx.fillStyle =
-                        apolloSelectedFeature && _id === apolloSelectedFeature._id
-                            ? 'rgb(0,0,0)'
-                            : cdsColorCode;
-                    ctx.fillStyle = cdsColorCode;
-                    ctx.fillRect(cdsStartPx + 1, cdsTop + 1, cdsWidthPx - 2, cdsHeight - 2);
-                    if (forwardFill && backwardFill && strand) {
-                        const reversal = reversed ? -1 : 1;
-                        const [topFill, bottomFill] = strand * reversal === 1
-                            ? [forwardFill, backwardFill]
-                            : [backwardFill, forwardFill];
-                        ctx.fillStyle = topFill;
-                        ctx.fillRect(cdsStartPx + 1, cdsTop + 1, cdsWidthPx - 2, (cdsHeight - 2) / 2);
-                        ctx.fillStyle = bottomFill;
-                        ctx.fillRect(cdsStartPx + 1, cdsTop + (cdsHeight - 2) / 2, cdsWidthPx - 2, (cdsHeight - 2) / 2);
-                    }
+        }
+        const { children: transcriptChildren } = child;
+        // Draw exons for non-coding genes
+        if (cdsCount === 0 && transcriptChildren) {
+            for (const [, exon] of transcriptChildren) {
+                if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
+                    continue;
                 }
+                drawExon(ctx, stateModel, displayedRegionIndex, row, exon, currentRow, strand, forwardFill, backwardFill);
             }
             currentRow += 1;
         }
     }
 }
+function drawExon(ctx, stateModel, displayedRegionIndex, row, exon, currentRow, strand, forwardFill, backwardFill) {
+    const { apolloRowHeight, lgv, session, theme } = stateModel;
+    const { bpPerPx, displayedRegions, offsetPx } = lgv;
+    const displayedRegion = displayedRegions[displayedRegionIndex];
+    const { refName, reversed } = displayedRegion;
+    const { apolloSelectedFeature } = session;
+    const minX = (lgv.bpToPx({
+        refName,
+        coord: exon.min,
+        regionNumber: displayedRegionIndex,
+    })?.offsetPx ?? 0) - offsetPx;
+    const widthPx = exon.length / bpPerPx;
+    const startPx = reversed ? minX - widthPx : minX;
+    const top = (row + currentRow) * apolloRowHeight;
+    const exonHeight = Math.round(0.6 * apolloRowHeight);
+    const exonTop = top + (apolloRowHeight - exonHeight) / 2;
+    ctx.fillStyle = theme?.palette.text.primary ?? 'black';
+    ctx.fillRect(startPx, exonTop, widthPx, exonHeight);
+    if (widthPx > 2) {
+        ctx.clearRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2);
+        ctx.fillStyle =
+            apolloSelectedFeature && exon._id === apolloSelectedFeature._id
+                ? 'rgb(0,0,0)'
+                : 'rgb(211,211,211)';
+        ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2);
+        if (forwardFill && backwardFill && strand) {
+            const reversal = reversed ? -1 : 1;
+            const [topFill, bottomFill] = strand * reversal === 1
+                ? [forwardFill, backwardFill]
+                : [backwardFill, forwardFill];
+            ctx.fillStyle = topFill;
+            ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, (exonHeight - 2) / 2);
+            ctx.fillStyle = bottomFill;
+            ctx.fillRect(startPx + 1, exonTop + 1 + (exonHeight - 2) / 2, widthPx - 2, (exonHeight - 2) / 2);
+        }
+    }
+}
+function drawLine(ctx, stateModel, displayedRegionIndex, row, transcript, currentRow) {
+    const { apolloRowHeight, lgv, theme } = stateModel;
+    const { bpPerPx, displayedRegions, offsetPx } = lgv;
+    const displayedRegion = displayedRegions[displayedRegionIndex];
+    const { refName, reversed } = displayedRegion;
+    const minX = (lgv.bpToPx({
+        refName,
+        coord: transcript.min,
+        regionNumber: displayedRegionIndex,
+    })?.offsetPx ?? 0) - offsetPx;
+    const widthPx = transcript.length / bpPerPx;
+    const startPx = reversed ? minX - widthPx : minX;
+    const height = Math.round((currentRow + 1 / 2) * apolloRowHeight) + row * apolloRowHeight;
+    ctx.strokeStyle = theme?.palette.text.primary ?? 'black';
+    ctx.beginPath();
+    ctx.moveTo(startPx, height);
+    ctx.lineTo(startPx + widthPx, height);
+    ctx.stroke();
+}
 function drawDragPreview$1(stateModel, overlayCtx) {
     const { apolloDragging, apolloRowHeight, lgv, theme } = stateModel;
     const { bpPerPx, displayedRegions, offsetPx } = lgv;
@@ -7682,6 +7751,22 @@ function getFeatureFromLayout$1(feature, bp, row, featureTypeOntology) {
     }
     return feature;
 }
+function getCDSCount(feature, featureTypeOntology) {
+    const { children, type } = feature;
+    if (!children) {
+        return 0;
+    }
+    const isMrna = featureTypeOntology.isTypeOf(type, 'mRNA');
+    let cdsCount = 0;
+    if (isMrna) {
+        for (const [, child] of children) {
+            if (featureTypeOntology.isTypeOf(child.type, 'CDS')) {
+                cdsCount += 1;
+            }
+        }
+    }
+    return cdsCount;
+}
 function getRowCount$1(feature, featureTypeOntology, _bpPerPx) {
     const { children, type } = feature;
     if (!children) {
@@ -7691,12 +7776,12 @@ function getRowCount$1(feature, featureTypeOntology, _bpPerPx) {
     let rowCount = 0;
     if (isTranscript) {
         for (const [, child] of children) {
-            const isCds = featureTypeOntology.isTypeOf(child.type, 'CDS');
-            if (isCds) {
+            if (featureTypeOntology.isTypeOf(child.type, 'CDS')) {
                 rowCount += 1;
             }
         }
-        return rowCount;
+        // return 1 if there are no CDSs for non coding genes
+        return rowCount === 0 ? 1 : rowCount;
     }
     for (const [, child] of children) {
         rowCount += getRowCount$1(child, featureTypeOntology);
@@ -7740,6 +7825,9 @@ function featuresForRow$1(feature, featureTypeOntology) {
         for (const cds of cdss) {
             features.push([cds, ...exons, child, feature]);
         }
+        if (cdss.length === 0) {
+            features.push([...exons, child, feature]);
+        }
     }
     return features;
 }
@@ -7987,49 +8075,39 @@ const genericChildGlyph = {
 };
 
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+function getRowsForFeature(startingRow, rowCount, filledRowLocations) {
+    const rowsForFeature = [];
+    for (let i = startingRow; i < startingRow + rowCount; i++) {
+        const row = filledRowLocations.get(i);
+        if (row) {
+            rowsForFeature.push(row);
+        }
+    }
+    return rowsForFeature;
+}
+function canPlaceFeatureInRows(rowsForFeature, feature) {
+    for (const rowForFeature of rowsForFeature) {
+        for (const [rowStart, rowEnd] of rowForFeature) {
+            if (util.doesIntersect2(feature.min, feature.max, rowStart, rowEnd) ||
+                util.doesIntersect2(rowStart, rowEnd, feature.min, feature.max)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
 function layoutsModelFactory(pluginManager, configSchema) {
     const BaseLinearApolloDisplay = baseModelFactory(pluginManager, configSchema);
     return BaseLinearApolloDisplay.named('LinearApolloDisplayLayouts')
         .props({
-        featuresMinMaxLimit: 500_000,
+        cleanupBoundary: 200_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) ||
-                        !util.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;
-            });
+        getAnnotationFeatureById(id) {
+            return self.seenFeatures.get(id);
         },
         getGlyph(feature) {
             if (this.looksLikeGene(feature)) {
@@ -8059,11 +8137,7 @@ function layoutsModelFactory(pluginManager, configSchema) {
                     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 [...grandChildren.values()].some((grandchild) => featureTypeOntology.isTypeOf(grandchild.type, 'exon'));
                 }
             }
             return false;
@@ -8080,15 +8154,11 @@ function layoutsModelFactory(pluginManager, configSchema) {
         .views((self) => ({
         get featureLayouts() {
             const { assemblyManager } = self.session;
-            return self.lgv.displayedRegions.map((region, idx) => {
+            return self.lgv.displayedRegions.map((region) => {
                 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 = [];
+                // Track the occupied coordinates in each row
+                const filledRowLocations = new Map();
                 const { end, refName, start } = region;
                 for (const [id, feature] of self.seenFeatures.entries()) {
                     if (!mobxStateTree.isAlive(feature)) {
@@ -8111,42 +8181,23 @@ function layoutsModelFactory(pluginManager, configSchema) {
                     let startingRow = 0;
                     let placed = false;
                     while (!placed) {
-                        let rowsForFeature = rows.slice(startingRow, startingRow + rowCount);
+                        let rowsForFeature = getRowsForFeature(startingRow, rowCount, filledRowLocations);
                         if (rowsForFeature.length < rowCount) {
                             for (let i = 0; i < rowCount - rowsForFeature.length; i++) {
-                                const newRowNumber = rows.length;
-                                rows[newRowNumber] = Array.from({ length: max - min });
+                                const newRowNumber = filledRowLocations.size;
+                                filledRowLocations.set(newRowNumber, []);
                                 featureLayout.set(newRowNumber, []);
                             }
-                            rowsForFeature = rows.slice(startingRow, startingRow + rowCount);
+                            rowsForFeature = getRowsForFeature(startingRow, rowCount, filledRowLocations);
                         }
-                        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)) {
+                        if (!canPlaceFeatureInRows(rowsForFeature, feature)) {
                             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);
+                            filledRowLocations.get(rowNum)?.push([feature.min, feature.max]);
                             const layoutRow = featureLayout.get(rowNum);
-                            layoutRow?.push([rowNum - startingRow, feature]);
+                            layoutRow?.push([rowNum - startingRow, feature._id]);
                         }
                         placed = true;
                     }
@@ -8159,12 +8210,16 @@ function layoutsModelFactory(pluginManager, configSchema) {
             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) {
+                    for (const [featureRowNum, layoutFeatureId] of layoutRow) {
                         if (featureRowNum !== 0) {
                             // Same top-level feature in all feature rows, so only need to
                             // check the first one
                             continue;
                         }
+                        const layoutFeature = self.getAnnotationFeatureById(layoutFeatureId);
+                        if (!layoutFeature) {
+                            continue;
+                        }
                         if (feature._id === layoutFeature._id) {
                             return {
                                 layoutIndex: idx,
@@ -8204,6 +8259,23 @@ function layoutsModelFactory(pluginManager, configSchema) {
                 if (!self.lgv.initialized || self.regionCannotBeRendered()) {
                     return;
                 }
+                // Clear out features that are no longer in the view and out of the cleanup boundary
+                // cleanup boundary + region boundary + cleanup boundary
+                for (const [id, feature] of self.seenFeatures.entries()) {
+                    let shouldKeep = false;
+                    for (const region of self.regions) {
+                        const extendedStart = region.start - self.cleanupBoundary;
+                        const extendedEnd = region.end + self.cleanupBoundary;
+                        if (util.doesIntersect2(extendedStart, extendedEnd, feature.min, feature.max)) {
+                            shouldKeep = true;
+                            break;
+                        }
+                    }
+                    if (!shouldKeep) {
+                        self.deleteSeenFeature(id);
+                    }
+                }
+                // Add features that are in the current view
                 for (const region of self.regions) {
                     const assembly = self.session.apolloDataStore.assemblies.get(region.assemblyName);
                     const ref = assembly?.getByRefName(region.refName);
@@ -8477,8 +8549,9 @@ function renderingModelFactory(pluginManager, configSchema) {
                 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) {
+                        for (const [featureRow, featureId] of featureLayoutRow) {
+                            const feature = self.getAnnotationFeatureById(featureId);
+                            if (featureRow > 0 || !feature) {
                                 continue;
                             }
                             if (!util.doesIntersect2(displayedRegion.start, displayedRegion.end, feature.min, feature.max)) {
@@ -8559,11 +8632,18 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
             if (!layoutRow) {
                 return mousePosition;
             }
-            const foundFeature = layoutRow.find((f) => bp >= f[1].min && bp <= f[1].max);
+            const foundFeature = layoutRow.find((f) => {
+                const feature = self.getAnnotationFeatureById(f[1]);
+                return feature && bp >= feature.min && bp <= feature.max;
+            });
             if (!foundFeature) {
                 return mousePosition;
             }
-            const [featureRow, topLevelFeature] = foundFeature;
+            const [featureRow, topLevelFeatureId] = foundFeature;
+            const topLevelFeature = self.getAnnotationFeatureById(topLevelFeatureId);
+            if (!topLevelFeature) {
+                return mousePosition;
+            }
             const glyph = self.getGlyph(topLevelFeature);
             const { featureTypeOntology } = self.session.apolloDataStore.ontologyManager;
             if (!featureTypeOntology) {
@@ -8847,11 +8927,18 @@ const useStyles$1 = mui.makeStyles()((theme) => ({
         color: theme.palette.warning.light,
         backgroundColor: theme.palette.warning.contrastText,
     },
+    loading: {
+        position: 'absolute',
+        right: theme.spacing(3),
+        zIndex: 10,
+        pointerEvents: 'none',
+        textAlign: 'right',
+    },
 }));
 const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(props) {
     const theme = material.useTheme();
     const { model } = props;
-    const { apolloRowHeight, contextMenuItems: getContextMenuItems, cursor, featuresHeight, isShown, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, regionCannotBeRendered, session, setCanvas, setCollaboratorCanvas, setOverlayCanvas, setSeqTrackCanvas, setSeqTrackOverlayCanvas, setTheme, } = model;
+    const { loading, apolloRowHeight, contextMenuItems: getContextMenuItems, cursor, featuresHeight, isShown, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, regionCannotBeRendered, session, setCanvas, setCollaboratorCanvas, setOverlayCanvas, setSeqTrackCanvas, setSeqTrackOverlayCanvas, setTheme, } = model;
     const { classes } = useStyles$1();
     const lgv = util.getContainingView(model);
     React.useEffect(() => {
@@ -8891,65 +8978,68 @@ const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(prop
                     setContextCoord(coord);
                     setContextMenuItems(getContextMenuItems(coord));
                 }
-            } }, message ? (React__default["default"].createElement(material.Alert, { severity: "warning", classes: { message: classes.ellipses } },
-            React__default["default"].createElement(material.Tooltip, { title: message },
-                React__default["default"].createElement("div", null, message)))) : (
-        // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
-        // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
-        React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("canvas", { ref: async (node) => {
-                    await Promise.resolve();
-                    setCollaboratorCanvas(node);
-                }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }),
-            React__default["default"].createElement("canvas", { ref: async (node) => {
-                    await Promise.resolve();
-                    setCanvas(node);
-                }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }),
-            React__default["default"].createElement("canvas", { ref: async (node) => {
-                    await Promise.resolve();
-                    setOverlayCanvas(node);
-                }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, className: classes.canvas, style: { cursor: cursor ?? 'default' }, "data-testid": "overlayCanvas" }),
-            lgv.displayedRegions.flatMap((region, idx) => {
-                const assembly = assemblyManager.get(region.assemblyName);
-                return [...session.apolloDataStore.checkResults.values()]
-                    .filter((checkResult) => assembly?.isValidRefName(checkResult.refSeq) &&
-                    assembly.getCanonicalRefName(checkResult.refSeq) ===
-                        region.refName &&
-                    util.doesIntersect2(region.start, region.end, checkResult.start, checkResult.end))
-                    .map((checkResult) => {
-                    const left = (lgv.bpToPx({
-                        refName: region.refName,
-                        coord: checkResult.start,
-                        regionNumber: idx,
-                    })?.offsetPx ?? 0) - lgv.offsetPx;
-                    const [feature] = checkResult.ids;
-                    if (!feature) {
-                        return null;
-                    }
-                    const { topLevelFeature } = feature;
-                    const row = parent
-                        ? model.getFeatureLayoutPosition(topLevelFeature)
-                            ?.layoutRow ?? 0
-                        : 0;
-                    const top = row * apolloRowHeight;
-                    const height = apolloRowHeight;
-                    return (React__default["default"].createElement(material.Tooltip, { key: checkResult._id, title: checkResult.message },
-                        React__default["default"].createElement(material.Avatar, { className: classes.avatar, style: { top, left, height, width: height } },
-                            React__default["default"].createElement(ErrorIcon__default["default"], null))));
-                });
-            }),
-            React__default["default"].createElement(ui.Menu, { open: contextMenuItems.length > 0, onMenuItemClick: (_, callback) => {
-                    callback();
-                    setContextMenuItems([]);
-                }, onClose: () => {
-                    setContextMenuItems([]);
-                }, TransitionProps: {
-                    onExit: () => {
+            } },
+            loading ? (React__default["default"].createElement("div", { className: classes.loading },
+                React__default["default"].createElement(material.CircularProgress, { size: "18px" }))) : null,
+            message ? (React__default["default"].createElement(material.Alert, { severity: "warning", classes: { message: classes.ellipses } },
+                React__default["default"].createElement(material.Tooltip, { title: message },
+                    React__default["default"].createElement("div", null, message)))) : (
+            // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
+            // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
+            React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("canvas", { ref: async (node) => {
+                        await Promise.resolve();
+                        setCollaboratorCanvas(node);
+                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }),
+                React__default["default"].createElement("canvas", { ref: async (node) => {
+                        await Promise.resolve();
+                        setCanvas(node);
+                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }),
+                React__default["default"].createElement("canvas", { ref: async (node) => {
+                        await Promise.resolve();
+                        setOverlayCanvas(node);
+                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, className: classes.canvas, style: { cursor: cursor ?? 'default' }, "data-testid": "overlayCanvas" }),
+                lgv.displayedRegions.flatMap((region, idx) => {
+                    const assembly = assemblyManager.get(region.assemblyName);
+                    return [...session.apolloDataStore.checkResults.values()]
+                        .filter((checkResult) => assembly?.isValidRefName(checkResult.refSeq) &&
+                        assembly.getCanonicalRefName(checkResult.refSeq) ===
+                            region.refName &&
+                        util.doesIntersect2(region.start, region.end, checkResult.start, checkResult.end))
+                        .map((checkResult) => {
+                        const left = (lgv.bpToPx({
+                            refName: region.refName,
+                            coord: checkResult.start,
+                            regionNumber: idx,
+                        })?.offsetPx ?? 0) - lgv.offsetPx;
+                        const [feature] = checkResult.ids;
+                        if (!feature) {
+                            return null;
+                        }
+                        const { topLevelFeature } = feature;
+                        const row = parent
+                            ? model.getFeatureLayoutPosition(topLevelFeature)
+                                ?.layoutRow ?? 0
+                            : 0;
+                        const top = row * apolloRowHeight;
+                        const height = apolloRowHeight;
+                        return (React__default["default"].createElement(material.Tooltip, { key: checkResult._id, title: checkResult.message },
+                            React__default["default"].createElement(material.Avatar, { className: classes.avatar, style: { top, left, height, width: height } },
+                                React__default["default"].createElement(ErrorIcon__default["default"], null))));
+                    });
+                }),
+                React__default["default"].createElement(ui.Menu, { open: contextMenuItems.length > 0, onMenuItemClick: (_, callback) => {
+                        callback();
                         setContextMenuItems([]);
-                    },
-                }, anchorReference: "anchorPosition", anchorPosition: contextCoord
-                    ? { top: contextCoord[1], left: contextCoord[0] }
-                    : undefined, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenuItems }))))));
+                    }, onClose: () => {
+                        setContextMenuItems([]);
+                    }, TransitionProps: {
+                        onExit: () => {
+                            setContextMenuItems([]);
+                        },
+                    }, anchorReference: "anchorPosition", anchorPosition: contextCoord
+                        ? { top: contextCoord[1], left: contextCoord[0] }
+                        : undefined, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenuItems }))))));
 });
 
 const TrackLines = mobxReact.observer(function TrackLines({ model, }) {