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

package/dist/index.esm.js

@@ -3,14 +3,14 @@ import { gff3ToAnnotationFeature, AddAssemblyFromExternalChange, AddAssemblyAndF
 import { ConfigurationSchema, readConfObject, getConf, ConfigurationReference } from '@jbrowse/core/configuration';
 import { BaseInternetAccountConfig, InternetAccount, RendererType, TextSearchAdapterType, BaseDisplay, WidgetType, createBaseTrackConfig, TrackType, createBaseTrackModel, InternetAccountType, DisplayType } from '@jbrowse/core/pluggableElementTypes';
 import Plugin from '@jbrowse/core/Plugin';
-import { isUriLocation, isLocalPathLocation, isElectron, isAbstractMenuManager, getSession, getContainingView, getFrame, revcom, isSessionModelWithWidgets, doesIntersect2, defaultCodonTable, intersection2, reverse, defaultStarts, defaultStops } from '@jbrowse/core/util';
+import { isUriLocation, isLocalPathLocation, isElectron, isAbstractMenuManager, getSession, getContainingView, getFrame, revcom, defaultCodonTable, isSessionModelWithWidgets, intersection2, doesIntersect2, reverse, defaultStarts, defaultStops } from '@jbrowse/core/util';
 import AddIcon from '@mui/icons-material/Add';
 import { autorun, toJS, observable } from 'mobx';
-import { getSnapshot, getParent, getRoot, types, addDisposer, flow, isAlive, resolveIdentifier, getParentOfType, applySnapshot } from 'mobx-state-tree';
+import { getSnapshot, getParent, getRoot, types, addDisposer, flow, cast, isAlive, resolveIdentifier, getParentOfType, applySnapshot } from 'mobx-state-tree';
 import { io } from 'socket.io-client';
 import gff from '@gmod/gff';
 import LinkIcon from '@mui/icons-material/Link';
-import { DialogTitle, IconButton, DialogContent, DialogContentText, Select, MenuItem, TextField, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Box, Typography, FormGroup, Checkbox, DialogActions, Button, Autocomplete, InputLabel, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Grid, Tooltip, Chip, useTheme, FormHelperText, SvgIcon, Divider, Menu, alpha, InputAdornment as InputAdornment$1, Alert, Avatar } from '@mui/material';
+import { DialogTitle, IconButton, DialogContent, DialogContentText, Select, MenuItem, TextField, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Box, Typography, FormGroup, Checkbox, DialogActions, Button, Autocomplete, InputLabel, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Grid2, Tooltip, Chip, useTheme, FormHelperText, SvgIcon, Divider, Menu, InputAdornment as InputAdornment$1, alpha, Alert, Avatar } from '@mui/material';
 import InputAdornment from '@mui/material/InputAdornment';
 import LinearProgress from '@mui/material/LinearProgress';
 import ObjectID from 'bson-objectid';
@@ -42,15 +42,15 @@ import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import SimpleFeature from '@jbrowse/core/util/simpleFeature';
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import { AnnotationFeatureModel, ApolloAssembly, CheckResult, ApolloRefSeq } from '@apollo-annotation/mst';
-import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import ClearIcon from '@mui/icons-material/Clear';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ErrorIcon from '@mui/icons-material/Error';
 import SaveIcon from '@mui/icons-material/Save';
 
-var version = "0.3.0";
+var version = "0.3.2";
 
 const ApolloConfigSchema = ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -830,6 +830,8 @@ function serializeWords(foundWords) {
 /** 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
@@ -840,6 +842,8 @@ async function loadOboGraphJson(db) {
     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) {
@@ -858,31 +862,51 @@ async function loadOboGraphJson(db) {
         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,
@@ -947,8 +971,8 @@ class OntologyStore {
         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
@@ -993,9 +1017,12 @@ class OntologyStore {
             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`);
@@ -1215,6 +1242,7 @@ const OntologyRecordType = types
     version: 'unversioned',
     source: types.union(LocalPathLocation, UriLocation, BlobLocation),
     options: types.frozen(),
+    equivalentTypes: types.map(types.array(types.string)),
 })
     .volatile((_self) => ({
     dataStore: undefined,
@@ -1232,6 +1260,37 @@ const OntologyRecordType = types
             this.initDataStore();
         }));
     },
+    setEquivalentTypes(type, equivalentTypes) {
+        self.equivalentTypes.set(type, equivalentTypes);
+    },
+}))
+    .actions((self) => ({
+    loadEquivalentTypes: 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 = types
     .model('OntologyManager', {
@@ -1685,7 +1744,7 @@ function CopyFeature({ changeManager, handleClose, session, sourceAssemblyId, so
             }
             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 || '');
         }
@@ -1970,7 +2029,11 @@ function DownloadGFF3({ handleClose, session }) {
         }
         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');
@@ -2661,8 +2724,8 @@ function Option(props) {
     //   .map((m) => m.score)
     //   .join(', ')
     return (React.createElement("li", { ...other },
-        React.createElement(Grid, { container: true },
-            React.createElement(Grid, { item: true },
+        React.createElement(Grid2, { container: true },
+            React.createElement(Grid2, null,
                 React.createElement(Typography, { component: "span" }, ontologyManager.applyPrefixes(option.term.id)),
                 ' ',
                 React.createElement(HighlightedText, { str: option.term.lbl ?? '(no label)', search: inputValue }),
@@ -2863,43 +2926,43 @@ function ModifyFeatureAttribute({ changeManager, handleClose, session, sourceAss
     return (React__default.createElement(Dialog, { open: true, title: "Feature attributes", handleClose: handleClose, maxWidth: false, "data-testid": "modify-feature-attribute" },
         React__default.createElement("form", { onSubmit: onSubmit },
             React__default.createElement(DialogContent, null,
-                React__default.createElement(Grid, { container: true, direction: "column", spacing: 1 },
+                React__default.createElement(Grid2, { container: true, direction: "column", spacing: 1 },
                     Object.entries(attributes).map(([key, value]) => {
                         const EditorComponent = reservedKeys$1.get(key) ?? CustomAttributeValueEditor$1;
-                        return (React__default.createElement(Grid, { container: true, item: true, spacing: 3, alignItems: "center", key: key },
-                            React__default.createElement(Grid, { item: true, xs: "auto" },
+                        return (React__default.createElement(Grid2, { container: true, spacing: 3, alignItems: "center", key: key },
+                            React__default.createElement(Grid2, null,
                                 React__default.createElement(Paper, { variant: "outlined", className: classes.attributeName },
                                     React__default.createElement(Typography, null, key))),
-                            React__default.createElement(Grid, { item: true, flexGrow: 1 },
+                            React__default.createElement(Grid2, { flexGrow: 1 },
                                 React__default.createElement(EditorComponent, { session: session, value: value, onChange: makeOnChange(key) })),
-                            React__default.createElement(Grid, { item: true, xs: 1 },
+                            React__default.createElement(Grid2, null,
                                 React__default.createElement(IconButton, { "aria-label": "delete", size: "medium", disabled: !editable, onClick: () => {
                                         deleteAttribute(key);
                                     } },
                                     React__default.createElement(DeleteIcon, { fontSize: "medium", key: key })))));
                     }),
-                    React__default.createElement(Grid, { item: true },
+                    React__default.createElement(Grid2, null,
                         React__default.createElement(Button, { color: "primary", variant: "contained", disabled: showAddNewForm || !editable, onClick: () => {
                                 setShowAddNewForm(true);
                             } }, "Add new")),
-                    showAddNewForm ? (React__default.createElement(Grid, { item: true },
+                    showAddNewForm ? (React__default.createElement(Grid2, null,
                         React__default.createElement(Paper, { elevation: 8, className: classes.newAttributePaper },
-                            React__default.createElement(Grid, { container: true, direction: "column" },
-                                React__default.createElement(Grid, { item: true },
+                            React__default.createElement(Grid2, { container: true, direction: "column" },
+                                React__default.createElement(Grid2, null,
                                     React__default.createElement(FormControl, null,
                                         React__default.createElement(FormLabel, { id: "attribute-radio-button-group" }, "Select attribute type"),
                                         React__default.createElement(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: "custom", name: "radio-buttons-group", onChange: handleRadioButtonChange },
-                                            React__default.createElement(FormControlLabel, { value: "custom", control: React__default.createElement(Radio, null), disableTypography: true, label: React__default.createElement(Grid, { container: true, spacing: 1, alignItems: "center" },
-                                                    React__default.createElement(Grid, { item: true },
+                                            React__default.createElement(FormControlLabel, { value: "custom", control: React__default.createElement(Radio, null), disableTypography: true, label: React__default.createElement(Grid2, { container: true, spacing: 1, alignItems: "center" },
+                                                    React__default.createElement(Grid2, null,
                                                         React__default.createElement(Typography, null, "Custom")),
-                                                    React__default.createElement(Grid, { item: true },
+                                                    React__default.createElement(Grid2, null,
                                                         React__default.createElement(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.createElement(FormControlLabel, { key: key, value: key, control: React__default.createElement(Radio, null), label: key })))))),
-                                React__default.createElement(Grid, { item: true },
+                                React__default.createElement(Grid2, null,
                                     React__default.createElement(DialogActions, null,
                                         React__default.createElement(Button, { key: "addButton", color: "primary", variant: "contained", style: { margin: 2 }, onClick: handleAddNewAttributeChange, disabled: !newAttributeKey }, "Add"),
                                         React__default.createElement(Button, { key: "cancelAddButton", variant: "outlined", type: "submit", onClick: () => {
@@ -3270,13 +3333,12 @@ function AddRefSeqAliases({ changeManager, handleClose, session, }) {
     };
     return (React__default.createElement(Dialog, { open: true, title: "Add reference sequence aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-refseq-alias", fullWidth: true },
         React__default.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-            React__default.createElement(Grid, { container: true, spacing: 2 },
-                React__default.createElement(Grid, { item: true, xs: 4 },
+            React__default.createElement(Grid2, { container: true, spacing: 2 },
+                React__default.createElement(Grid2, null,
                     React__default.createElement(FormControl, { disabled: enableSubmit && !errorMessage, fullWidth: true },
                         React__default.createElement(InputLabel, { id: "demo-simple-select-label" }, "Assembly"),
                         React__default.createElement(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Assembly", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly }, assemblies.map((option) => (React__default.createElement(MenuItem, { key: option.name, value: option.name }, option.displayName ?? option.name)))))),
-                React__default.createElement(Grid, { item: true, xs: 1 }),
-                React__default.createElement(Grid, { item: true, xs: 7 },
+                React__default.createElement(Grid2, null,
                     React__default.createElement(InputLabel, null, "Load RefName alias"),
                     React__default.createElement("input", { type: "file", onChange: handleChangeFileHandler, ref: fileRef, disabled: (enableSubmit && !errorMessage) || !selectedAssembly }))),
             selectedAssembly && refNameAliasMap.size > 0 ? (React__default.createElement("div", { style: { height: 200, width: '100%', marginTop: 20 } },
@@ -3951,11 +4013,11 @@ function isApolloMessageData$1(data) {
 const isInWebWorker$1 = typeof sessionStorage === 'undefined';
 class ApolloSequenceAdapter extends 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;
         }
@@ -3987,7 +4049,7 @@ class ApolloSequenceAdapter extends BaseSequenceAdapter {
                 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,
@@ -4004,7 +4066,7 @@ class ApolloSequenceAdapter extends BaseSequenceAdapter {
      * @param param -
      * @returns Observable of Feature objects in the region
      */
-    getFeatures(region, opts) {
+    getFeatures(region) {
         const { end, refName, start } = region;
         const assemblyId = readConfObject(this.config, 'assemblyId');
         const regionWithAssemblyName = { ...region, assemblyName: assemblyId };
@@ -4041,7 +4103,7 @@ class ApolloSequenceAdapter extends BaseSequenceAdapter {
                     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,
@@ -4741,7 +4803,7 @@ function annotationFromPileup(pluggableElement) {
                 .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) {
@@ -4877,6 +4939,285 @@ function annotationFromPileup(pluggableElement) {
     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 = useMemo(() => Object.keys(annotationFeature.children ?? {}), [annotationFeature]);
+    const features = 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] = useState(true);
+    const [checkedChildrens, setCheckedChildrens] = useState(childIds);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [destinationFeatures, setDestinationFeatures] = useState([]);
+    const [selectedDestinationFeature, setSelectedDestinationFeature] = useState();
+    const getFeatures = (min, max) => {
+        const filteredFeatures = [];
+        for (const [, f] of features) {
+            const featureSnapshot = getSnapshot(f);
+            if (min >= featureSnapshot.min && max <= featureSnapshot.max) {
+                filteredFeatures.push(featureSnapshot);
+            }
+        }
+        return filteredFeatures;
+    };
+    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 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 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.createElement(Dialog, { open: true, title: "Create Apollo Annotation", handleClose: handleClose, fullWidth: true, maxWidth: "sm" },
+        React__default.createElement(DialogTitle, { fontSize: 15 }, "Select the feature to be copied to apollo track"),
+        React__default.createElement(DialogContent, null,
+            React__default.createElement(Box, { sx: { ml: 3 } },
+                isGeneOrTranscript(annotationFeature, apolloSessionModel) && (React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${annotationFeature.type}:${annotationFeature.min}..${annotationFeature.max}` })),
+                annotationFeature.children && (React__default.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', ml: 3 } }, Object.values(annotationFeature.children)
+                    .filter((child) => isTranscript(child, apolloSessionModel))
+                    .map((child) => (React__default.createElement(FormControlLabel, { key: child._id, control: React__default.createElement(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.createElement(Box, { sx: { ml: 3 } },
+                React__default.createElement(Typography, { variant: "caption", fontSize: 12 }, "Select the destination feature to copy the selected features"),
+                React__default.createElement(Box, { sx: { mt: 1 } },
+                    React__default.createElement(Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange }, destinationFeatures.map((f) => (React__default.createElement(MenuItem, { key: f._id, value: f._id }, `${f.type}:${f.min}..${f.max}`)))))))),
+        React__default.createElement(DialogActions, null,
+            React__default.createElement(Button, { variant: "contained", type: "submit", disabled: checkedChildrens.length === 0 ||
+                    (!parentFeatureChecked &&
+                        checkedChildrens.length > 0 &&
+                        !selectedDestinationFeature), onClick: handleCreateApolloAnnotation }, "Create"),
+            React__default.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel")),
+        errorMessage ? (React__default.createElement(DialogContent, null,
+            React__default.createElement(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 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 = getContainingView(self);
+            return lgv.dynamicBlocks.contentBlocks[0];
+        },
+        getAssembly() {
+            const firstRegion = self.getFirstRegion();
+            const session = 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 = getSession(self);
+        const assembly = self.getAssembly();
+        return {
+            contextMenuItems() {
+                const feature = self.contextMenuFeature;
+                if (!feature) {
+                    return superContextMenuItems();
+                }
+                return [
+                    ...superContextMenuItems(),
+                    {
+                        label: 'Create Apollo annotation',
+                        icon: AddIcon,
+                        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 = observer(function StringTextField({ onChangeCommitted, value: initialValue, ...props }) {
     const [value, setValue] = useState(String(initialValue));
@@ -5083,44 +5424,44 @@ const Attributes = observer(function Attributes({ assembly, editable, feature, s
     }
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Typography, { variant: "h5" }, "Attributes"),
-        React__default.createElement(Grid, { container: true, direction: "column", spacing: 1 },
+        React__default.createElement(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.createElement(Grid, { container: true, item: true, spacing: 3, alignItems: "center", key: key },
-                    React__default.createElement(Grid, { item: true, xs: "auto" },
+                return (React__default.createElement(Grid2, { container: true, spacing: 3, alignItems: "center", key: key },
+                    React__default.createElement(Grid2, null,
                         React__default.createElement(Paper, { variant: "outlined", className: classes.attributeName },
                             React__default.createElement(Typography, null, key))),
-                    React__default.createElement(Grid, { item: true, flexGrow: 1 },
+                    React__default.createElement(Grid2, { flexGrow: 1 },
                         React__default.createElement(EditorComponent, { session: session, value: value, onChange: (newValue) => onChangeCommitted(key, newValue) })),
-                    React__default.createElement(Grid, { item: true, xs: 1 },
+                    React__default.createElement(Grid2, null,
                         React__default.createElement(IconButton, { "aria-label": "delete", size: "medium", disabled: !editable, onClick: () => onChangeCommitted(key) },
                             React__default.createElement(DeleteIcon, { fontSize: "medium", key: key })))));
             }),
-            React__default.createElement(Grid, { item: true },
+            React__default.createElement(Grid2, null,
                 React__default.createElement(Button, { color: "primary", variant: "contained", disabled: showAddNewForm || !editable, onClick: () => {
                         setShowAddNewForm(true);
                     } }, "Add new")),
-            showAddNewForm ? (React__default.createElement(Grid, { item: true },
+            showAddNewForm ? (React__default.createElement(Grid2, null,
                 React__default.createElement(Paper, { elevation: 8, className: classes.newAttributePaper },
-                    React__default.createElement(Grid, { container: true, direction: "column" },
-                        React__default.createElement(Grid, { item: true },
+                    React__default.createElement(Grid2, { container: true, direction: "column" },
+                        React__default.createElement(Grid2, null,
                             React__default.createElement(FormControl, null,
                                 React__default.createElement(FormLabel, { id: "attribute-radio-button-group" }, "Select attribute type"),
                                 React__default.createElement(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: "custom", name: "radio-buttons-group", onChange: handleRadioButtonChange },
-                                    React__default.createElement(FormControlLabel, { value: "custom", control: React__default.createElement(Radio, null), disableTypography: true, label: React__default.createElement(Grid, { container: true, spacing: 1, alignItems: "center" },
-                                            React__default.createElement(Grid, { item: true },
+                                    React__default.createElement(FormControlLabel, { value: "custom", control: React__default.createElement(Radio, null), disableTypography: true, label: React__default.createElement(Grid2, { container: true, spacing: 1, alignItems: "center" },
+                                            React__default.createElement(Grid2, null,
                                                 React__default.createElement(Typography, null, "Custom")),
-                                            React__default.createElement(Grid, { item: true },
+                                            React__default.createElement(Grid2, null,
                                                 React__default.createElement(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.createElement(FormControlLabel, { key: key, value: key, control: React__default.createElement(Radio, null), label: key })))))),
-                        React__default.createElement(Grid, { item: true },
+                        React__default.createElement(Grid2, null,
                             React__default.createElement(DialogActions, null,
                                 React__default.createElement(Button, { key: "addButton", color: "primary", variant: "contained", onClick: handleAddNewAttributeChange, disabled: !newAttributeKey }, "Add"),
                                 React__default.createElement(Button, { key: "cancelAddButton", variant: "outlined", type: "submit", onClick: () => {
@@ -5302,6 +5643,47 @@ const Sequence = observer(function Sequence({ assembly, feature, refName, sessio
         React__default.createElement("div", null, showSequence && (React__default.createElement("textarea", { readOnly: true, rows: 20, className: classes.sequence, value: sequence })))));
 });
 
+const FeatureDetailsNavigation = 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.createElement("div", null,
+        React__default.createElement(Typography, { variant: "h5" }, "Go to related feature"),
+        parent && (React__default.createElement("div", null,
+            React__default.createElement(Typography, { variant: "h6" }, "Parent:"),
+            React__default.createElement(Button, { variant: "contained", onClick: () => {
+                    model.setFeature(parent);
+                } },
+                parent.type,
+                " (",
+                parent.min,
+                "..",
+                parent.max,
+                ")"))),
+        childFeatures.length > 0 && (React__default.createElement("div", null,
+            React__default.createElement(Typography, { variant: "h6" },
+                childFeatures.length === 1 ? 'Child' : 'Children',
+                ":"),
+            childFeatures.map((child) => (React__default.createElement("div", { key: child._id, style: { marginBottom: 5 } },
+                React__default.createElement(Button, { variant: "contained", onClick: () => {
+                        model.setFeature(child);
+                    } },
+                    child.type,
+                    " (",
+                    child.min,
+                    "..",
+                    child.max,
+                    ")"))))))));
+});
+
 const useStyles$8 = makeStyles()((theme) => ({
     root: {
         padding: theme.spacing(2),
@@ -5332,7 +5714,9 @@ const ApolloFeatureDetailsWidget = observer(function ApolloFeatureDetailsWidget(
         React__default.createElement("hr", null),
         React__default.createElement(Attributes, { feature: feature, session: session, assembly: currentAssembly._id, editable: true }),
         React__default.createElement("hr", null),
-        React__default.createElement(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName })));
+        React__default.createElement(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName }),
+        React__default.createElement("hr", null),
+        React__default.createElement(FeatureDetailsNavigation, { model: model, feature: feature })));
 });
 
 /* eslint-disable @typescript-eslint/no-unsafe-call */
@@ -5472,7 +5856,14 @@ const TranscriptBasicInformation = observer(function TranscriptBasicInformation(
     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) => {
@@ -5613,6 +6004,28 @@ function getSequenceSegments(segmentType, feature, getSequence) {
             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 = 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 +=
+                    defaultCodonTable[codonSeq] || '&';
+            }
+            const sequenceLines = splitStringIntoChunks(protein, SEQUENCE_WRAP_LENGTH);
+            segments.push({ type: 'protein', sequenceLines, locs });
+            return segments;
+        }
     }
 }
 function getSegmentColor(type) {
@@ -5701,7 +6114,8 @@ const TranscriptSequence = observer(function TranscriptSequence({ assembly, feat
             React__default.createElement(Select, { defaultValue: "CDS", value: selectedOption, onChange: handleChangeSeqOption },
                 React__default.createElement(MenuItem, { value: "CDS" }, "CDS"),
                 React__default.createElement(MenuItem, { value: "cDNA" }, "cDNA"),
-                React__default.createElement(MenuItem, { value: "genomic" }, "Genomic")),
+                React__default.createElement(MenuItem, { value: "genomic" }, "Genomic"),
+                React__default.createElement(MenuItem, { value: "protein" }, "Protein")),
             React__default.createElement(Paper, { style: {
                     fontFamily: 'monospace',
                     padding: theme.spacing(),
@@ -5939,7 +6353,12 @@ function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature
                 ]);
             },
         });
-        if (feature.type === 'mRNA' && isSessionModelWithWidgets(session)) {
+        const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+        if (!featureTypeOntology) {
+            throw new Error('featureTypeOntology is undefined');
+        }
+        if (featureTypeOntology.isTypeOf(feature.type, 'transcript') &&
+            isSessionModelWithWidgets(session)) {
             menuItems.push({
                 label: 'Edit transcript details',
                 onClick: () => {
@@ -6011,958 +6430,555 @@ const NumberCell = observer(function NumberCell({ initialValue, notifyError, onC
             } })));
 });
 
-const minDisplayHeight = 20;
-function baseModelFactory(_pluginManager, configSchema) {
-    return BaseDisplay.named('BaseLinearApolloDisplay')
-        .props({
-        type: types.literal('LinearApolloDisplay'),
-        configuration: ConfigurationReference(configSchema),
-        graphical: true,
-        table: false,
-        heightPreConfig: types.maybe(types.refinement('displayHeight', types.number, (n) => n >= minDisplayHeight)),
-    })
-        .views((self) => {
-        const { configuration, renderProps: superRenderProps } = self;
-        return {
-            renderProps() {
-                return {
-                    ...superRenderProps(),
-                    ...getParentRenderProps(self),
-                    config: configuration.renderer,
-                };
-            },
-        };
-    })
-        .volatile(() => ({
-        scrollTop: 0,
-    }))
-        .views((self) => ({
-        get lgv() {
-            return getContainingView(self);
-        },
-        get height() {
-            if (self.heightPreConfig) {
-                return self.heightPreConfig;
-            }
-            if (self.graphical && self.table) {
-                return 500;
-            }
-            if (self.graphical) {
-                return 200;
-            }
-            return 300;
-        },
-    }))
-        .views((self) => ({
-        get rendererTypeName() {
-            return self.configuration.renderer.type;
-        },
-        get session() {
-            return getSession(self);
-        },
-        get regions() {
-            const regions = self.lgv.dynamicBlocks.contentBlocks.map(({ assemblyName, end, refName, start }) => ({
-                assemblyName,
-                refName,
-                start: Math.round(start),
-                end: Math.round(end),
-            }));
-            return regions;
-        },
-        regionCannotBeRendered( /* region */) {
-            if (self.lgv && self.lgv.bpPerPx >= 200) {
-                return 'Zoom in to see annotations';
-            }
-            return;
+/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+const useStyles$4 = makeStyles()((theme) => ({
+    typeContent: {
+        display: 'inline-block',
+        width: '174px',
+        height: '100%',
+        cursor: 'text',
+    },
+    feature: {
+        td: {
+            position: 'relative',
+            verticalAlign: 'top',
+            paddingLeft: '0.5em',
         },
-    }))
-        .views((self) => ({
-        get apolloInternetAccount() {
-            const [region] = self.regions;
-            const { internetAccounts } = getRoot(self);
-            const { assemblyName } = region;
-            const { assemblyManager } = self.session;
-            const assembly = assemblyManager.get(assemblyName);
-            if (!assembly) {
-                throw new Error(`No assembly found with name ${assemblyName}`);
-            }
-            const { internetAccountConfigId } = getConf(assembly, [
-                'sequence',
-                'metadata',
-            ]);
-            return internetAccounts.find((ia) => getConf(ia, 'internetAccountId') === internetAccountConfigId);
-        },
-        get changeManager() {
-            return self.session.apolloDataStore
-                .changeManager;
-        },
-        getAssemblyId(assemblyName) {
-            const { assemblyManager } = self.session;
-            const assembly = assemblyManager.get(assemblyName);
-            if (!assembly) {
-                throw new Error(`Could not find assembly named ${assemblyName}`);
-            }
-            return assembly.name;
-        },
-        get selectedFeature() {
-            return self.session
-                .apolloSelectedFeature;
-        },
-    }))
-        .actions((self) => ({
-        setScrollTop(scrollTop) {
-            self.scrollTop = scrollTop;
-        },
-        setHeight(displayHeight) {
-            self.heightPreConfig = Math.max(displayHeight, minDisplayHeight);
-            return self.height;
-        },
-        resizeHeight(distance) {
-            const oldHeight = self.height;
-            const newHeight = this.setHeight(self.height + distance);
-            return newHeight - oldHeight;
-        },
-        showGraphicalOnly() {
-            self.graphical = true;
-            self.table = false;
-        },
-        showTableOnly() {
-            self.graphical = false;
-            self.table = true;
-        },
-        showGraphicalAndTable() {
-            self.graphical = true;
-            self.table = true;
-        },
-    }))
-        .views((self) => {
-        const { trackMenuItems: superTrackMenuItems } = self;
-        return {
-            trackMenuItems() {
-                const { graphical, table } = self;
-                return [
-                    ...superTrackMenuItems(),
-                    {
-                        type: 'subMenu',
-                        label: 'Appearance',
-                        subMenu: [
-                            {
-                                label: 'Show graphical display',
-                                type: 'radio',
-                                checked: graphical && !table,
-                                onClick: () => {
-                                    self.showGraphicalOnly();
-                                },
-                            },
-                            {
-                                label: 'Show table display',
-                                type: 'radio',
-                                checked: table && !graphical,
-                                onClick: () => {
-                                    self.showTableOnly();
-                                },
-                            },
-                            {
-                                label: 'Show both graphical and table display',
-                                type: 'radio',
-                                checked: table && graphical,
-                                onClick: () => {
-                                    self.showGraphicalAndTable();
-                                },
-                            },
-                        ],
-                    },
-                ];
-            },
-        };
-    })
-        .actions((self) => ({
-        setSelectedFeature(feature) {
-            self.session.apolloSetSelectedFeature(feature);
-        },
-        afterAttach() {
-            addDisposer(self, autorun(() => {
-                if (!self.lgv.initialized || self.regionCannotBeRendered()) {
-                    return;
-                }
-                void self.session.apolloDataStore.loadFeatures(self.regions);
-                if (self.lgv.bpPerPx <= 3) {
-                    void self.session.apolloDataStore.loadRefSeq(self.regions);
-                }
-            }, { name: 'LinearApolloDisplayLoadFeatures', delay: 1000 }));
-        },
-    }));
-}
-
-/* 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: 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) ||
-                        !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 (!isAlive(feature)) {
-                        self.deleteSeenFeature(id);
-                        continue;
-                    }
-                    if (refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
-                        !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() {
-            addDisposer(self, 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 (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() {
-            addDisposer(self, 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) => 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);
+    },
+    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 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 = 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 getTopLevelFeature(feature) {
+    let cur = feature;
+    while (cur.parent) {
+        cur = cur.parent;
     }
+    return cur;
 }
-function sequenceRenderingModelFactory(pluginManager, configSchema) {
-    const LinearApolloDisplayRendering = renderingModelIntermediateFactory(pluginManager, configSchema);
-    return LinearApolloDisplayRendering.actions((self) => ({
-        afterAttach() {
-            addDisposer(self, 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 = 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() {
-            addDisposer(self, 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 (!doesIntersect2(displayedRegion.start, displayedRegion.end, feature.min, feature.max)) {
-                                continue;
-                            }
-                            getGlyph(feature).draw(ctx, feature, row, self, idx);
-                        }
-                    }
+const Feature = 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.createElement(React__default.Fragment, null,
+        React__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.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.createElement("div", { onClick: toggleExpanded, className: classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : '') }, "\u276F")) : null,
+                React__default.createElement("div", { className: classes.typeContent },
+                    React__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.createElement("div", { ref: params.InputProps.ref },
+                                React__default.createElement("input", { type: "text", ...params.inputProps, className: classes.typeInputElement, style: { width: 170 } }),
+                                params.error ? (React__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.createElement("td", null,
+                React__default.createElement(NumberCell, { initialValue: min + 1, notifyError: notifyError, onChangeCommitted: (newStart) => handleFeatureStartChange(changeManager, feature, min, newStart - 1) })),
+            React__default.createElement("td", null,
+                React__default.createElement(NumberCell, { initialValue: max, notifyError: notifyError, onChangeCommitted: (newEnd) => handleFeatureEndChange(changeManager, feature, max, newEnd) })),
+            React__default.createElement("td", null, strand === 1 ? '+' : strand === -1 ? '-' : undefined),
+            React__default.createElement("td", null,
+                React__default.createElement(FeatureAttributes, { filterText: filterText, feature: feature }))),
+        expanded && children
+            ? [...children.entries()]
+                .filter((entry) => {
+                if (!filterText) {
+                    return true;
                 }
-            }, { 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;
+                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.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;
 }
-function getSeqRow(strand, bpPerPx) {
-    if (bpPerPx > 1 || strand === undefined) {
-        return;
-    }
-    return strand === 1 ? 3 : 4;
+
+const useStyles$3 = 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 = observer(function HybridGrid({ model, }) {
+    const { apolloHover, seenFeatures, selectedFeature, tabularEditor } = model;
+    const theme = useTheme();
+    const { classes } = useStyles$3();
+    const scrollContainerRef = useRef(null);
+    const [contextMenu, setContextMenu] = useState(null);
+    const { filterText } = tabularEditor;
+    // scrolls to selected feature if one is selected and it's not already visible
+    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.createElement("div", { ref: scrollContainerRef, style: { width: '100%', overflowY: 'auto', height: '100%' } },
+        React__default.createElement("table", { className: classes.scrollableTable },
+            React__default.createElement("thead", null,
+                React__default.createElement("tr", null,
+                    React__default.createElement("th", null, "Type"),
+                    React__default.createElement("th", null, "Start"),
+                    React__default.createElement("th", null, "End"),
+                    React__default.createElement("th", null, "Strand"),
+                    React__default.createElement("th", null, "Attributes"))),
+            React__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.createElement(Feature, { key: featureId, isSelected: isSelected, isHovered: isHovered, selectedFeatureClass: classes.selectedFeature, feature: feature, model: model, depth: 0, setContextMenu: setContextMenu }));
+            }))),
+        React__default.createElement(Menu$1, { 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 })));
+});
+
+/* eslint-disable @typescript-eslint/unbound-method */
+const useStyles$2 = makeStyles()({
+    toolbar: {
+        width: '100%',
+        display: 'flex',
+        paddingRight: '2em',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        position: 'absolute',
+        zIndex: 4,
+    },
+    filterText: {},
+});
+const ToolBar = observer(function ToolBar({ model: displayState, }) {
+    const model = displayState.tabularEditor;
+    const { classes } = useStyles$2();
+    return (React__default.createElement("div", { className: classes.toolbar },
+        React__default.createElement(Tooltip, { title: "Collapse all" },
+            React__default.createElement(IconButton, { "aria-label": "collapse", sx: { marginTop: 0 }, onClick: model.collapseAllFeatures },
+                React__default.createElement(UnfoldLessIcon, null))),
+        React__default.createElement(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.createElement(InputAdornment$1, { position: "end" },
+                    React__default.createElement(IconButton, { onClick: () => {
+                            model.clearFilterText();
+                        } },
+                        React__default.createElement(ClearIcon, null)))),
+            } })));
+});
+
+function stopPropagation(e) {
+    e.stopPropagation();
 }
-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);
+const TabularEditorPane = observer(function TabularEditorPane({ model: displayState, }) {
+    const model = displayState.tabularEditor;
+    if (!model.isShown) {
+        return null;
     }
-}
-function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
-    const LinearApolloDisplayRendering = renderingModelFactory(pluginManager, configSchema);
-    return LinearApolloDisplayRendering.named('LinearApolloDisplayMouseEvents')
+    return (
+    // TODO: a11y
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default.createElement("div", { onMouseDown: stopPropagation, onClick: stopPropagation, style: { width: '100%', height: '100%', position: 'relative' } },
+        React__default.createElement(ToolBar, { model: displayState }),
+        React__default.createElement(HybridGrid, { model: displayState })));
+});
+
+const TabularEditorStateModelType = types
+    .model('TabularEditor', {
+    isShown: true,
+    featureCollapsed: types.map(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 = 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 = observer(function FilterFeatures({ featureTypes, handleClose, onUpdate, session, }) {
+    const [type, setType] = useState('');
+    const [selectedFeatureTypes, setSelectedFeatureTypes] = 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.createElement(Dialog, { open: true, maxWidth: false, "data-testid": "filter-features-dialog", title: "Filter features by type", handleClose: handleClose },
+        React__default.createElement(DialogContent, null,
+            React__default.createElement(DialogContentText, null, "Select the feature types you want to display in the apollo track"),
+            React__default.createElement(Grid2, { container: true, spacing: 2 },
+                React__default.createElement(Grid2, null,
+                    React__default.createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: '100%' }, value: type, filterTerms: isOntologyClass, renderInput: (params) => (React__default.createElement(TextField, { ...params, label: "Feature type", variant: "outlined", fullWidth: true })), onChange: (oldValue, newValue) => {
+                            if (newValue) {
+                                handleChange(newValue);
+                            }
+                        } })),
+                React__default.createElement(Grid2, null,
+                    React__default.createElement(Button, { variant: "contained", onClick: handleAddFeatureType, disabled: !type, style: { marginTop: 9 }, size: "medium" }, "Add"))),
+            selectedFeatureTypes.length > 0 && (React__default.createElement("div", null,
+                React__default.createElement("hr", null),
+                React__default.createElement("div", { style: { width: 300 } },
+                    React__default.createElement(DialogContentText, null, "Selected feature types:"),
+                    React__default.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, selectedFeatureTypes.map((value) => (React__default.createElement(Chip, { key: value, label: value, onDelete: () => {
+                            handleFeatureTypeDelete(value);
+                        } }))))))))));
+});
+
+const minDisplayHeight = 20;
+function baseModelFactory(_pluginManager, configSchema) {
+    return BaseDisplay.named('BaseLinearApolloDisplay')
+        .props({
+        type: types.literal('LinearApolloDisplay'),
+        configuration: ConfigurationReference(configSchema),
+        graphical: true,
+        table: false,
+        heightPreConfig: types.maybe(types.refinement('displayHeight', types.number, (n) => n >= minDisplayHeight)),
+        filteredFeatureTypes: types.array(types.string),
+    })
+        .views((self) => {
+        const { configuration, renderProps: superRenderProps } = self;
+        return {
+            renderProps() {
+                return {
+                    ...superRenderProps(),
+                    ...getParentRenderProps(self),
+                    config: configuration.renderer,
+                };
+            },
+        };
+    })
         .volatile(() => ({
-        apolloDragging: null,
-        cursor: undefined,
-        apolloHover: undefined,
+        scrollTop: 0,
     }))
         .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;
+        get lgv() {
+            return getContainingView(self);
+        },
+        get height() {
+            if (self.heightPreConfig) {
+                return self.heightPreConfig;
             }
-            const foundFeature = layoutRow.find((f) => bp >= f[1].min && bp <= f[1].max);
-            if (!foundFeature) {
-                return mousePosition;
+            if (self.graphical && self.table) {
+                return 500;
             }
-            const [featureRow, topLevelFeature] = foundFeature;
-            const glyph = getGlyph(topLevelFeature);
-            const feature = glyph.getFeatureFromLayout(topLevelFeature, bp, featureRow);
-            if (!feature) {
-                return mousePosition;
+            if (self.graphical) {
+                return 200;
             }
-            return {
-                ...mousePosition,
-                featureAndGlyphUnderMouse: { feature, topLevelFeature, glyph },
-            };
+            return 300;
         },
     }))
-        .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 };
+        .views((self) => ({
+        get rendererTypeName() {
+            return self.configuration.renderer.type;
         },
-        setDragging(dragInfo) {
-            self.apolloDragging = dragInfo ?? null;
+        get session() {
+            return getSession(self);
         },
-    }))
-        .actions((self) => ({
-        setApolloHover(n) {
-            self.apolloHover = n;
+        get regions() {
+            const regions = self.lgv.dynamicBlocks.contentBlocks.map(({ assemblyName, end, refName, start }) => ({
+                assemblyName,
+                refName,
+                start: Math.round(start),
+                end: Math.round(end),
+            }));
+            return regions;
         },
-        setCursor(cursor) {
-            if (self.cursor !== cursor) {
-                self.cursor = cursor;
+        regionCannotBeRendered( /* region */) {
+            if (self.lgv && self.lgv.bpPerPx >= 200) {
+                return 'Zoom in to see annotations';
             }
+            return;
         },
     }))
-        .actions(() => ({
-        // onClick(event: CanvasMouseEvent) {
-        onClick() {
-            // TODO: set the selected feature
+        .views((self) => ({
+        get apolloInternetAccount() {
+            const [region] = self.regions;
+            const { internetAccounts } = getRoot(self);
+            const { assemblyName } = region;
+            const { assemblyManager } = self.session;
+            const assembly = assemblyManager.get(assemblyName);
+            if (!assembly) {
+                throw new Error(`No assembly found with name ${assemblyName}`);
+            }
+            const { internetAccountConfigId } = getConf(assembly, [
+                'sequence',
+                'metadata',
+            ]);
+            return internetAccounts.find((ia) => getConf(ia, 'internetAccountId') === internetAccountConfigId);
         },
-    }));
-}
-function mouseEventsSeqHightlightModelFactory(pluginManager, configSchema) {
-    const LinearApolloDisplayRendering = mouseEventsModelIntermediateFactory(pluginManager, configSchema);
-    return LinearApolloDisplayRendering.actions((self) => ({
-        afterAttach() {
-            addDisposer(self, 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 = 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' }));
+        get changeManager() {
+            return self.session.apolloDataStore
+                .changeManager;
         },
-    }));
-}
-function mouseEventsModelFactory(pluginManager, configSchema) {
-    const LinearApolloDisplayMouseEvents = mouseEventsSeqHightlightModelFactory(pluginManager, configSchema);
-    return LinearApolloDisplayMouseEvents.views((self) => ({
-        contextMenuItems(contextCoord) {
-            const { apolloHover } = self;
-            if (!(apolloHover && contextCoord)) {
-                return [];
+        getAssemblyId(assemblyName) {
+            const { assemblyManager } = self.session;
+            const assembly = assemblyManager.get(assemblyName);
+            if (!assembly) {
+                throw new Error(`Could not find assembly named ${assemblyName}`);
             }
-            const { topLevelFeature } = apolloHover;
-            const glyph = getGlyph(topLevelFeature);
-            return glyph.getContextMenuItems(self);
+            return assembly.name;
+        },
+        get selectedFeature() {
+            return self.session
+                .apolloSelectedFeature;
         },
     }))
         .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 LocationEndChange({
-                    typeName: 'LocationEndChange',
-                    changedIds: [featureId],
-                    featureId,
-                    oldEnd,
-                    newEnd,
-                    assembly,
-                });
-            }
-            else {
-                const featureId = feature._id;
-                const oldStart = feature.min;
-                const newStart = current.bp;
-                change = new LocationStartChange({
-                    typeName: 'LocationStartChange',
-                    changedIds: [featureId],
-                    featureId,
-                    oldStart,
-                    newStart,
-                    assembly,
-                });
-            }
-            void self.changeManager.submit(change);
-            self.setDragging();
-            self.setCursor();
+        setScrollTop(scrollTop) {
+            self.scrollTop = scrollTop;
         },
-    }))
-        .actions((self) => ({
-        onMouseDown(event) {
-            const mousePosition = self.getMousePosition(event);
-            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseDown(self, mousePosition, event);
-            }
+        setHeight(displayHeight) {
+            self.heightPreConfig = Math.max(displayHeight, minDisplayHeight);
+            return self.height;
         },
-        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();
-            }
+        resizeHeight(distance) {
+            const oldHeight = self.height;
+            const newHeight = this.setHeight(self.height + distance);
+            return newHeight - oldHeight;
         },
-        onMouseLeave(event) {
-            self.setDragging();
-            self.setApolloHover();
-            const mousePosition = self.getMousePosition(event);
-            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseLeave(self, mousePosition, event);
-            }
+        showGraphicalOnly() {
+            self.graphical = true;
+            self.table = false;
         },
-        onMouseUp(event) {
-            const mousePosition = self.getMousePosition(event);
-            if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
-                mousePosition.featureAndGlyphUnderMouse.glyph.onMouseUp(self, mousePosition, event);
-            }
-            if (self.apolloDragging) {
-                self.endDrag();
-            }
+        showTableOnly() {
+            self.graphical = false;
+            self.table = true;
+        },
+        showGraphicalAndTable() {
+            self.graphical = true;
+            self.table = true;
+        },
+        updateFilteredFeatureTypes(types) {
+            self.filteredFeatureTypes = cast(types);
         },
     }))
+        .views((self) => {
+        const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self;
+        return {
+            trackMenuItems() {
+                const { graphical, table } = self;
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        type: 'subMenu',
+                        label: 'Appearance',
+                        subMenu: [
+                            {
+                                label: 'Show graphical display',
+                                type: 'radio',
+                                checked: graphical && !table,
+                                onClick: () => {
+                                    self.showGraphicalOnly();
+                                },
+                            },
+                            {
+                                label: 'Show table display',
+                                type: 'radio',
+                                checked: table && !graphical,
+                                onClick: () => {
+                                    self.showTableOnly();
+                                },
+                            },
+                            {
+                                label: 'Show both graphical and table display',
+                                type: 'radio',
+                                checked: table && graphical,
+                                onClick: () => {
+                                    self.showGraphicalAndTable();
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Filter features by type',
+                        onClick: () => {
+                            const session = self.session;
+                            self.session.queueDialog((doneCallback) => [
+                                FilterFeatures,
+                                {
+                                    session,
+                                    handleClose: () => {
+                                        doneCallback();
+                                    },
+                                    featureTypes: getSnapshot(filteredFeatureTypes),
+                                    onUpdate: (types) => {
+                                        self.updateFilteredFeatureTypes(types);
+                                    },
+                                },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
         .actions((self) => ({
+        setSelectedFeature(feature) {
+            self.session.apolloSetSelectedFeature(feature);
+        },
         afterAttach() {
             addDisposer(self, 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);
+                void self.session.apolloDataStore.loadFeatures(self.regions);
+                if (self.lgv.bpPerPx <= 3) {
+                    void self.session.apolloDataStore.loadRefSeq(self.regions);
                 }
-            }, { name: 'LinearApolloDisplayRenderMouseoverAndDrag' }));
+            }, { name: 'LinearApolloDisplayLoadFeatures', delay: 1000 }));
         },
     }));
 }
@@ -7231,7 +7247,12 @@ function getContextMenuItems$2(display) {
             session.showWidget(apolloFeatureWidget);
         },
     });
-    if (sourceFeature.type === 'mRNA' && isSessionModelWithWidgets(session)) {
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    if (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') &&
+        isSessionModelWithWidgets(session)) {
         menuItems.push({
             label: 'Edit transcript details',
             onClick: () => {
@@ -7389,6 +7410,11 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
         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,
@@ -7400,22 +7426,23 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
         ? topLevelFeatureMinX - topLevelFeatureWidthPx
         : topLevelFeatureMinX;
     const topLevelFeatureTop = row * rowHeight;
-    const topLevelFeatureHeight = getRowCount$1(feature) * rowHeight;
+    const topLevelFeatureHeight = getRowCount$1(feature, featureTypeOntology) * rowHeight;
     ctx.fillStyle = 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({
@@ -7423,7 +7450,7 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
                 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';
@@ -7436,21 +7463,21 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
     }
     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({
@@ -7546,7 +7573,8 @@ function drawDragPreview$1(stateModel, overlayCtx) {
     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;
     }
@@ -7569,10 +7597,13 @@ function drawHover$1(stateModel, ctx) {
     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) {
@@ -7581,9 +7612,9 @@ function getFeatureFromLayout$1(feature, bp, row) {
         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) {
@@ -7592,7 +7623,7 @@ function getFeatureFromLayout$1(feature, bp, row) {
                     }
                 }
             }
-            // 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
@@ -7600,33 +7631,36 @@ function getFeatureFromLayout$1(feature, bp, row) {
     }
     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;
@@ -7635,7 +7669,7 @@ function featuresForRow$1(feature) {
     }
     const features = [];
     for (const [, child] of children) {
-        if (child.type !== 'mRNA') {
+        if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
             features.push([child, feature]);
             continue;
         }
@@ -7645,10 +7679,10 @@ function featuresForRow$1(feature) {
         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);
             }
         }
@@ -7658,8 +7692,8 @@ function featuresForRow$1(feature) {
     }
     return features;
 }
-function getRowForFeature$1(feature, childFeature) {
-    const rows = featuresForRow$1(feature);
+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;
@@ -7701,7 +7735,16 @@ function onMouseUp$1(stateModel, mousePosition) {
     }
 }
 function getDraggableFeatureInfo(mousePosition, feature, stateModel) {
-    if (feature.type === 'gene' || feature.type === 'mRNA') {
+    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;
@@ -7712,517 +7755,1019 @@ function getDraggableFeatureInfo(mousePosition, feature, stateModel) {
     if (minPxInfo === undefined || maxPxInfo === undefined) {
         return;
     }
-    const minPx = minPxInfo.offsetPx - offsetPx;
-    const maxPx = maxPxInfo.offsetPx - offsetPx;
-    if (Math.abs(maxPx - minPx) < 8) {
+    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] = 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;
     }
-    if (Math.abs(minPx - x) < 4) {
-        return { feature, edge: 'min' };
-    }
-    if (Math.abs(maxPx - x) < 4) {
-        return { feature, edge: 'max' };
-    }
-    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] = 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' };
+    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 { 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,
-};
+// 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: 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) ||
+                        !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 (!isAlive(feature)) {
+                        self.deleteSeenFeature(id);
+                        continue;
+                    }
+                    if (refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
+                        !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() {
+            addDisposer(self, 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 (doesIntersect2(region.start, region.end, feature.min, feature.max) &&
+                            !self.seenFeatures.has(feature._id)) {
+                            self.addSeenFeature(feature);
+                        }
+                    }
+                }
+            }, { name: 'LinearApolloDisplaySetSeenFeatures', delay: 1000 }));
+        },
+    }));
+}
 
-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 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() {
+            addDisposer(self, 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 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 colorCode(letter, theme) {
+    return (theme?.palette.bases[letter.toUpperCase()].main.toString() ?? 'lightgray');
 }
-function getFeatureFromLayout(feature, bp, row) {
-    const layoutRow = featuresForRow(feature)[row];
-    return layoutRow.find((f) => bp >= f.min && bp <= f.max);
+function codonColorCode(letter) {
+    const colorMap = {
+        M: '#33ee33',
+        '*': '#f44336',
+    };
+    return colorMap[letter.toUpperCase()];
 }
-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;
+function reverseCodonSeq(seq) {
+    return [...seq]
+        .map((c) => revcom(c))
+        .reverse()
+        .join('');
 }
-// 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;
+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);
     }
-    if (feature.children?.size) {
-        return genericChildGlyph;
+    const codonLetter = defaultCodonTable[codonSeq];
+    if (!codonLetter) {
+        return;
     }
-    return boxGlyph;
-}
-function looksLikeGene(feature) {
-    const { children } = feature;
-    if (!children?.size) {
-        return false;
+    const fillColor = codonColorCode(codonLetter);
+    if (fillColor) {
+        seqTrackctx.fillStyle = fillColor;
+        seqTrackctx.fillRect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight);
     }
-    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;
-            }
-        }
+    if (bpPerPx <= 0.1) {
+        seqTrackctx.rect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight);
+        seqTrackctx.stroke();
+        drawLetter(seqTrackctx, trnslStartPx, trnslWidthPx, codonLetter, trnslY);
     }
-    return false;
 }
-
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
-const useStyles$4 = makeStyles()((theme) => ({
-    typeContent: {
-        display: 'inline-block',
-        width: '174px',
-        height: '100%',
-        cursor: 'text',
-    },
-    feature: {
-        td: {
-            position: 'relative',
-            verticalAlign: 'top',
-            paddingLeft: '0.5em',
+function sequenceRenderingModelFactory(pluginManager, configSchema) {
+    const LinearApolloDisplayRendering = renderingModelIntermediateFactory(pluginManager, configSchema);
+    return LinearApolloDisplayRendering.actions((self) => ({
+        afterAttach() {
+            addDisposer(self, 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 = 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' }));
         },
-    },
-    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 = 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.createElement(React__default.Fragment, null,
-        React__default.createElement("tr", { onMouseEnter: (_e) => {
-                displayState.setApolloHover({
-                    feature,
-                    topLevelFeature: getTopLevelFeature(feature),
-                    glyph: 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.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.createElement("div", { onClick: toggleExpanded, className: classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : '') }, "\u276F")) : null,
-                React__default.createElement("div", { className: classes.typeContent },
-                    React__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.createElement("div", { ref: params.InputProps.ref },
-                                React__default.createElement("input", { type: "text", ...params.inputProps, className: classes.typeInputElement, style: { width: 170 } }),
-                                params.error ? (React__default.createElement("div", { className: classes.typeErrorMessage }, params.errorMessage ?? 'unknown error')) : null));
-                        }, onChange: (oldValue, newValue) => {
-                            if (newValue) {
-                                handleFeatureTypeChange(changeManager, feature, oldValue, newValue).catch(notifyError);
+function renderingModelFactory(pluginManager, configSchema) {
+    const LinearApolloDisplayRendering = sequenceRenderingModelFactory(pluginManager, configSchema);
+    return LinearApolloDisplayRendering.actions((self) => ({
+        afterAttach() {
+            addDisposer(self, 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;
                             }
-                        } }))),
-            React__default.createElement("td", null,
-                React__default.createElement(NumberCell, { initialValue: min + 1, notifyError: notifyError, onChangeCommitted: (newStart) => handleFeatureStartChange(changeManager, feature, min, newStart - 1) })),
-            React__default.createElement("td", null,
-                React__default.createElement(NumberCell, { initialValue: max, notifyError: notifyError, onChangeCommitted: (newEnd) => handleFeatureEndChange(changeManager, feature, max, newEnd) })),
-            React__default.createElement("td", null, strand === 1 ? '+' : strand === -1 ? '-' : undefined),
-            React__default.createElement("td", null,
-                React__default.createElement(FeatureAttributes, { filterText: filterText, feature: feature }))),
-        expanded && children
-            ? [...children.entries()]
-                .filter((entry) => {
-                if (!filterText) {
-                    return true;
+                            if (!doesIntersect2(displayedRegion.start, displayedRegion.end, feature.min, feature.max)) {
+                                continue;
+                            }
+                            self.getGlyph(feature).draw(ctx, feature, row, self, idx);
+                        }
+                    }
                 }
-                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.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;
+            }, { 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;
         }
     }
-    return;
 }
-
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-const useStyles$3 = makeStyles()((theme) => ({
-    scrollableTable: {
-        width: '100%',
-        height: '100%',
-        th: {
-            position: 'sticky',
-            top: 0,
-            zIndex: 2,
-            textAlign: 'left',
-            background: theme.palette.background.paper,
-            paddingTop: '3.2em',
+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 = 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() {
+            addDisposer(self, 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 = 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 = self.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 LocationEndChange({
+                    typeName: 'LocationEndChange',
+                    changedIds: [featureId],
+                    featureId,
+                    oldEnd,
+                    newEnd,
+                    assembly,
+                });
+            }
+            else {
+                const featureId = feature._id;
+                const oldStart = feature.min;
+                const newStart = current.bp;
+                change = new LocationStartChange({
+                    typeName: 'LocationStartChange',
+                    changedIds: [featureId],
+                    featureId,
+                    oldStart,
+                    newStart,
+                    assembly,
+                });
+            }
+            void self.changeManager.submit(change);
+            self.setDragging();
+            self.setCursor();
         },
-        td: { whiteSpace: 'normal' },
-    },
-    selectedFeature: {
-        backgroundColor: theme.palette.action.selected,
-    },
-}));
-const HybridGrid = observer(function HybridGrid({ model, }) {
-    const { apolloHover, seenFeatures, selectedFeature, tabularEditor } = model;
-    const theme = useTheme();
-    const { classes } = useStyles$3();
-    const scrollContainerRef = useRef(null);
-    const [contextMenu, setContextMenu] = useState(null);
-    const { filterText } = tabularEditor;
-    // scrolls to selected feature if one is selected and it's not already visible
-    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.createElement("div", { ref: scrollContainerRef, style: { width: '100%', overflowY: 'auto', height: '100%' } },
-        React__default.createElement("table", { className: classes.scrollableTable },
-            React__default.createElement("thead", null,
-                React__default.createElement("tr", null,
-                    React__default.createElement("th", null, "Type"),
-                    React__default.createElement("th", null, "Start"),
-                    React__default.createElement("th", null, "End"),
-                    React__default.createElement("th", null, "Strand"),
-                    React__default.createElement("th", null, "Attributes"))),
-            React__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() {
+            addDisposer(self, 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.createElement(Feature, { key: featureId, isSelected: isSelected, isHovered: isHovered, selectedFeatureClass: classes.selectedFeature, feature: feature, model: model, depth: 0, setContextMenu: setContextMenu }));
-            }))),
-        React__default.createElement(Menu$1, { 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 })));
-});
-
-/* eslint-disable @typescript-eslint/unbound-method */
-const useStyles$2 = makeStyles()({
-    toolbar: {
-        width: '100%',
-        display: 'flex',
-        paddingRight: '2em',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        position: 'absolute',
-        zIndex: 4,
-    },
-    filterText: {},
-});
-const ToolBar = observer(function ToolBar({ model: displayState, }) {
-    const model = displayState.tabularEditor;
-    const { classes } = useStyles$2();
-    return (React__default.createElement("div", { className: classes.toolbar },
-        React__default.createElement(Tooltip, { title: "Collapse all" },
-            React__default.createElement(IconButton, { "aria-label": "collapse", sx: { marginTop: 0 }, onClick: model.collapseAllFeatures },
-                React__default.createElement(UnfoldLessIcon, null))),
-        React__default.createElement(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.createElement(InputAdornment$1, { position: "end" },
-                    React__default.createElement(IconButton, { onClick: () => {
-                            model.clearFilterText();
-                        } },
-                        React__default.createElement(ClearIcon, 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 = 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.createElement("div", { onMouseDown: stopPropagation, onClick: stopPropagation, style: { width: '100%', height: '100%', position: 'relative' } },
-        React__default.createElement(ToolBar, { model: displayState }),
-        React__default.createElement(HybridGrid, { model: displayState })));
-});
-
-const TabularEditorStateModelType = types
-    .model('TabularEditor', {
-    isShown: true,
-    featureCollapsed: types.map(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 = 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
@@ -8232,7 +8777,7 @@ function stateModelFactory$1(pluginManager, configSchema) {
         .named('LinearApolloDisplay');
 }
 
-/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/unbound-method */
 const useStyles$1 = makeStyles()((theme) => ({
     canvasContainer: {
         position: 'relative',
@@ -9268,8 +9813,34 @@ function clientDataStoreFactory(AnnotationFeatureExtended) {
                         readConfObject(ont, 'textIndexFields'),
                     ];
                     if (!ontologyManager.findOntology(name)) {
+                        const session = 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,
                         });
                     }
                 }
@@ -9964,6 +10535,10 @@ function stateModelFactory(pluginManager, configSchema) {
             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) {
@@ -9987,11 +10562,11 @@ function stateModelFactory(pluginManager, configSchema) {
                     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);
@@ -10180,7 +10755,7 @@ function installApolloRefNameAliasAdapter(pluginManager) {
     }));
 }
 
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/unbound-method */
 function isApolloMessageData(data) {
     return (typeof data === 'object' &&
         data !== null &&
@@ -10314,6 +10889,7 @@ class ApolloPlugin extends Plugin {
             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)) {