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

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

@@ -21068,7 +21068,7 @@
 	}), 'Add');
 	default_1$a = Add["default"] = _default$c;
 
-	var version = "0.3.2";
+	var version = "0.3.4";
 
 	const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
 	    baseURL: {
@@ -46619,6 +46619,7 @@
 	})
 	    .volatile((_self) => ({
 	    dataStore: undefined,
+	    startedEquivalentTypeRequests: new Set(),
 	}))
 	    .actions((self) => ({
 	    /** does nothing, just used to access the model to force its lifecycle hooks to run */
@@ -46642,12 +46643,33 @@
 	        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) {
@@ -52614,7 +52636,6 @@
 	    })),
 	    assembly: require$$1$3.types.string,
 	    refName: require$$1$3.types.string,
-	    changeManager: require$$1$3.types.frozen(),
 	})
 	    .volatile(() => ({
 	    tryReload: undefined,
@@ -53625,13 +53646,13 @@
 	        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),
@@ -53652,6 +53673,7 @@
 	        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),
+	        loadingState: false,
 	    })
 	        .views((self) => {
 	        const { configuration, renderProps: superRenderProps } = self;
@@ -53684,6 +53706,9 @@
 	            }
 	            return 300;
 	        },
+	        get loading() {
+	            return self.loadingState;
+	        },
 	    }))
 	        .views((self) => ({
 	        get rendererTypeName() {
@@ -53769,6 +53794,9 @@
 	        updateFilteredFeatureTypes(types) {
 	            self.filteredFeatureTypes = require$$1$3.cast(types);
 	        },
+	        setLoading(loading) {
+	            self.loadingState = loading;
+	        },
 	    }))
 	        .views((self) => {
 	        const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self;
@@ -53839,7 +53867,14 @@
 	                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);
 	                }
@@ -54268,7 +54303,6 @@
 	    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) {
@@ -54302,27 +54336,20 @@
 	            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;
 	        }
 	    }
@@ -54336,83 +54363,125 @@
 	            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 = require$$1$2.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 = require$$1$2.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;
@@ -54496,6 +54565,22 @@
 	    }
 	    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) {
@@ -54505,12 +54590,12 @@
 	    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);
@@ -54554,6 +54639,9 @@
 	        for (const cds of cdss) {
 	            features.push([cds, ...exons, child, feature]);
 	        }
+	        if (cdss.length === 0) {
+	            features.push([...exons, child, feature]);
+	        }
 	    }
 	    return features;
 	}
@@ -54801,49 +54889,39 @@
 	};
 
 	/* 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 (require$$1$2.doesIntersect2(feature.min, feature.max, rowStart, rowEnd) ||
+	                require$$1$2.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) ||
-	                        !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;
-	            });
+	        getAnnotationFeatureById(id) {
+	            return self.seenFeatures.get(id);
 	        },
 	        getGlyph(feature) {
 	            if (this.looksLikeGene(feature)) {
@@ -54873,11 +54951,7 @@
 	                    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;
@@ -54894,15 +54968,11 @@
 	        .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 (!require$$1$3.isAlive(feature)) {
@@ -54925,42 +54995,23 @@
 	                    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;
 	                    }
@@ -54973,12 +55024,16 @@
 	            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,
@@ -55018,6 +55073,23 @@
 	                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 (require$$1$2.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);
@@ -55291,8 +55363,9 @@
 	                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 (!require$$1$2.doesIntersect2(displayedRegion.start, displayedRegion.end, feature.min, feature.max)) {
@@ -55373,11 +55446,18 @@
 	            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) {
@@ -55703,11 +55783,18 @@
 	        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 = require$$1$2.getContainingView(model);
 	    React.useEffect(() => {
@@ -55747,65 +55834,68 @@
 	                    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 &&
-	                    require$$1$2.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(default_1$1, 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 &&
+	                        require$$1$2.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(default_1$1, 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, }) {