Improve gene glyph display and performance (#523)

* Remove unused unserializable state

Fixes the following error when opening the TranscriptDetailsWidget:
DataCloneError: Failed to execute 'put' on 'IDBObjectStore': [object
Object] could not be cloned.

* Pre-load commonly checked equivalent types

* apollo track updates

* feature layout improvements and loading indicator

* clean up old features

* fixes

* fixes

* add circular loader

* Move loading circle a bit to avoid scrollbar


skip-checks:true

---------

Co-authored-by: Shashank Budhanuru Ramaraju <shashank.b.r.gowda45587@gmail.com>

Author: garrettjstevens

packages/jbrowse-plugin-apollo/src/FeatureDetailsWidget/model.ts

@@ -9,7 +9,6 @@ import { ElementId } from '@jbrowse/core/util/types/mst'
 import { autorun } from 'mobx'
 import { Instance, SnapshotIn, addDisposer, types } from 'mobx-state-tree'
 
-import { ChangeManager } from '../ChangeManager'
 import { ApolloSessionModel } from '../session'
 
 export const ApolloFeatureDetailsWidgetModel = types
@@ -86,7 +85,6 @@ export const ApolloTranscriptDetailsModel = types
     ),
     assembly: types.string,
     refName: types.string,
-    changeManager: types.frozen<ChangeManager>(),
   })
   .volatile(() => ({
     tryReload: undefined as string | undefined,

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -9,7 +9,13 @@ import {
 } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import ErrorIcon from '@mui/icons-material/Error'
-import { Alert, Avatar, Tooltip, useTheme } from '@mui/material'
+import {
+  Alert,
+  Avatar,
+  CircularProgress,
+  Tooltip,
+  useTheme,
+} from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
@@ -39,6 +45,13 @@ const useStyles = makeStyles()((theme) => ({
     color: theme.palette.warning.light,
     backgroundColor: theme.palette.warning.contrastText,
   },
+  loading: {
+    position: 'absolute',
+    right: theme.spacing(3),
+    zIndex: 10,
+    pointerEvents: 'none',
+    textAlign: 'right',
+  },
 }))
 
 export const LinearApolloDisplay = observer(function LinearApolloDisplay(
@@ -47,6 +60,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   const theme = useTheme()
   const { model } = props
   const {
+    loading,
     apolloRowHeight,
     contextMenuItems: getContextMenuItems,
     cursor,
@@ -128,6 +142,11 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
           }
         }}
       >
+        {loading ? (
+          <div className={classes.loading}>
+            <CircularProgress size="18px" />
+          </div>
+        ) : null}
         {message ? (
           <Alert severity="warning" classes={{ message: classes.ellipses }}>
             <Tooltip title={message}>

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/base.ts

@@ -44,6 +44,7 @@ export function baseModelFactory(
         ),
       ),
       filteredFeatureTypes: types.array(types.string),
+      loadingState: false,
     })
     .views((self) => {
       const { configuration, renderProps: superRenderProps } = self
@@ -76,6 +77,9 @@ export function baseModelFactory(
         }
         return 300
       },
+      get loading() {
+        return self.loadingState
+      },
     }))
     .views((self) => ({
       get rendererTypeName() {
@@ -167,6 +171,9 @@ export function baseModelFactory(
       updateFilteredFeatureTypes(types: string[]) {
         self.filteredFeatureTypes = cast(types)
       },
+      setLoading(loading: boolean) {
+        self.loadingState = loading
+      },
     }))
     .views((self) => {
       const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self
@@ -244,9 +251,16 @@ export function baseModelFactory(
               if (!self.lgv.initialized || self.regionCannotBeRendered()) {
                 return
               }
+              self.setLoading(true)
               void (
                 self.session as unknown as ApolloSessionModel
-              ).apolloDataStore.loadFeatures(self.regions)
+              ).apolloDataStore
+                .loadFeatures(self.regions)
+                .then(() => {
+                  setTimeout(() => {
+                    self.setLoading(false)
+                  }, 1000)
+                })
               if (self.lgv.bpPerPx <= 3) {
                 void (
                   self.session as unknown as ApolloSessionModel

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -11,6 +11,39 @@ import { ApolloSessionModel } from '../../session'
 import { baseModelFactory } from './base'
 import { boxGlyph, geneGlyph, genericChildGlyph } from '../glyphs'
 
+function getRowsForFeature(
+  startingRow: number,
+  rowCount: number,
+  filledRowLocations: Map<number, [number, number][]>,
+) {
+  const rowsForFeature = []
+  for (let i = startingRow; i < startingRow + rowCount; i++) {
+    const row = filledRowLocations.get(i)
+    if (row) {
+      rowsForFeature.push(row)
+    }
+  }
+  return rowsForFeature
+}
+
+function canPlaceFeatureInRows(
+  rowsForFeature: [number, number][][],
+  feature: AnnotationFeature,
+) {
+  for (const rowForFeature of rowsForFeature) {
+    for (const [rowStart, rowEnd] of rowForFeature) {
+      if (
+        doesIntersect2(feature.min, feature.max, rowStart, rowEnd) ||
+        doesIntersect2(rowStart, rowEnd, feature.min, feature.max)
+      ) {
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
 export function layoutsModelFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
@@ -19,48 +52,14 @@ export function layoutsModelFactory(
 
   return BaseLinearApolloDisplay.named('LinearApolloDisplayLayouts')
     .props({
-      featuresMinMaxLimit: 500_000,
+      cleanupBoundary: 200_000,
     })
     .volatile(() => ({
       seenFeatures: observable.map<string, AnnotationFeature>(),
     }))
     .views((self) => ({
-      get featuresMinMax() {
-        const { assemblyManager } =
-          self.session as unknown as AbstractSessionModel
-        return self.lgv.displayedRegions.map((region) => {
-          const assembly = assemblyManager.get(region.assemblyName)
-          let min: number | undefined
-          let max: number | undefined
-          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
-        })
+      getAnnotationFeatureById(id: string) {
+        return self.seenFeatures.get(id)
       },
       getGlyph(feature: AnnotationFeature) {
         if (this.looksLikeGene(feature)) {
@@ -111,15 +110,11 @@ export function layoutsModelFactory(
       get featureLayouts() {
         const { assemblyManager } =
           self.session as unknown as AbstractSessionModel
-        return self.lgv.displayedRegions.map((region, idx) => {
+        return self.lgv.displayedRegions.map((region) => {
           const assembly = assemblyManager.get(region.assemblyName)
-          const featureLayout = new Map<number, [number, AnnotationFeature][]>()
-          const minMax = self.featuresMinMax[idx]
-          if (!minMax) {
-            return featureLayout
-          }
-          const [min, max] = minMax
-          const rows: boolean[][] = []
+          const featureLayout = new Map<number, [number, string][]>()
+          // Track the occupied coordinates in each row
+          const filledRowLocations = new Map<number, [number, number][]>()
           const { end, refName, start } = region
           for (const [id, feature] of self.seenFeatures.entries()) {
             if (!isAlive(feature)) {
@@ -145,36 +140,24 @@ export function layoutsModelFactory(
             let startingRow = 0
             let placed = false
             while (!placed) {
-              let rowsForFeature = rows.slice(
+              let rowsForFeature = getRowsForFeature(
                 startingRow,
-                startingRow + rowCount,
+                rowCount,
+                filledRowLocations,
               )
               if (rowsForFeature.length < rowCount) {
                 for (let i = 0; i < rowCount - rowsForFeature.length; i++) {
-                  const newRowNumber = rows.length
-                  rows[newRowNumber] = Array.from({ length: max - min })
+                  const newRowNumber = filledRowLocations.size
+                  filledRowLocations.set(newRowNumber, [])
                   featureLayout.set(newRowNumber, [])
                 }
-                rowsForFeature = rows.slice(startingRow, startingRow + rowCount)
+                rowsForFeature = getRowsForFeature(
+                  startingRow,
+                  rowCount,
+                  filledRowLocations,
+                )
               }
-              if (
-                rowsForFeature
-                  .map((rowForFeature) => {
-                    // zero-length features are allowed in the spec
-                    const featureMax =
-                      feature.max - feature.min === 0
-                        ? feature.min + 1
-                        : feature.max
-                    let start = feature.min - min,
-                      end = featureMax - min
-                    if (feature.min - min < 0) {
-                      start = 0
-                      end = featureMax - feature.min
-                    }
-                    return rowForFeature.slice(start, end).some(Boolean)
-                  })
-                  .some(Boolean)
-              ) {
+              if (!canPlaceFeatureInRows(rowsForFeature, feature)) {
                 startingRow += 1
                 continue
               }
@@ -183,16 +166,9 @@ export function layoutsModelFactory(
                 rowNum < startingRow + rowCount;
                 rowNum++
               ) {
-                const row = rows[rowNum]
-                let start = feature.min - min,
-                  end = feature.max - min
-                if (feature.min - min < 0) {
-                  start = 0
-                  end = feature.max - feature.min
-                }
-                row.fill(true, start, end)
+                filledRowLocations.get(rowNum)?.push([feature.min, feature.max])
                 const layoutRow = featureLayout.get(rowNum)
-                layoutRow?.push([rowNum - startingRow, feature])
+                layoutRow?.push([rowNum - startingRow, feature._id])
               }
               placed = true
             }
@@ -206,12 +182,17 @@ export function layoutsModelFactory(
           self.session.apolloDataStore.ontologyManager
         for (const [idx, layout] of featureLayouts.entries()) {
           for (const [layoutRowNum, layoutRow] of layout) {
-            for (const [featureRowNum, layoutFeature] of layoutRow) {
+            for (const [featureRowNum, layoutFeatureId] of layoutRow) {
               if (featureRowNum !== 0) {
                 // Same top-level feature in all feature rows, so only need to
                 // check the first one
                 continue
               }
+              const layoutFeature =
+                self.getAnnotationFeatureById(layoutFeatureId)
+              if (!layoutFeature) {
+                continue
+              }
               if (feature._id === layoutFeature._id) {
                 return {
                   layoutIndex: idx,
@@ -257,6 +238,30 @@ export function layoutsModelFactory(
               if (!self.lgv.initialized || self.regionCannotBeRendered()) {
                 return
               }
+              // Clear out features that are no longer in the view and out of the cleanup boundary
+              // cleanup boundary + region boundary + cleanup boundary
+              for (const [id, feature] of self.seenFeatures.entries()) {
+                let shouldKeep = false
+                for (const region of self.regions) {
+                  const extendedStart = region.start - self.cleanupBoundary
+                  const extendedEnd = region.end + self.cleanupBoundary
+                  if (
+                    doesIntersect2(
+                      extendedStart,
+                      extendedEnd,
+                      feature.min,
+                      feature.max,
+                    )
+                  ) {
+                    shouldKeep = true
+                    break
+                  }
+                }
+                if (!shouldKeep) {
+                  self.deleteSeenFeature(id)
+                }
+              }
+              // Add features that are in the current view
               for (const region of self.regions) {
                 const assembly = (
                   self.session as unknown as ApolloSessionModel

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/mouseEvents.ts

@@ -139,13 +139,18 @@ export function mouseEventsModelIntermediateFactory(
         if (!layoutRow) {
           return mousePosition
         }
-        const foundFeature = layoutRow.find(
-          (f) => bp >= f[1].min && bp <= f[1].max,
-        )
+        const foundFeature = layoutRow.find((f) => {
+          const feature = self.getAnnotationFeatureById(f[1])
+          return feature && bp >= feature.min && bp <= feature.max
+        })
         if (!foundFeature) {
           return mousePosition
         }
-        const [featureRow, topLevelFeature] = foundFeature
+        const [featureRow, topLevelFeatureId] = foundFeature
+        const topLevelFeature = self.getAnnotationFeatureById(topLevelFeatureId)
+        if (!topLevelFeature) {
+          return mousePosition
+        }
         const glyph = self.getGlyph(topLevelFeature)
         const { featureTypeOntology } =
           self.session.apolloDataStore.ontologyManager

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/rendering.ts

@@ -413,8 +413,9 @@ export function renderingModelFactory(
             for (const [idx, featureLayout] of featureLayouts.entries()) {
               const displayedRegion = displayedRegions[idx]
               for (const [row, featureLayoutRow] of featureLayout.entries()) {
-                for (const [featureRow, feature] of featureLayoutRow) {
-                  if (featureRow > 0) {
+                for (const [featureRow, featureId] of featureLayoutRow) {
+                  const feature = self.getAnnotationFeatureById(featureId)
+                  if (featureRow > 0 || !feature) {
                     continue
                   }
                   if (