@apollo-annotation/jbrowse-plugin-apollo 0.1.18 → 0.1.20

package/src/LinearApolloDisplay/stateModel/rendering.ts

@@ -10,29 +10,6 @@ import { ApolloSessionModel } from '../../session'
 import { getGlyph } from './getGlyph'
 import { layoutsModelFactory } from './layouts'
 
-export type Frame = 1 | 2 | 3 | -1 | -2 | -3
-
-export function getFrame(
-  start: number,
-  end: number,
-  strand: 1 | -1,
-  phase: 0 | 1 | 2,
-): Frame {
-  return strand === 1
-    ? ((((start + phase) % 3) + 1) as 1 | 2 | 3)
-    : ((-1 * ((end - phase) % 3) - 1) as -1 | -2 | -3)
-}
-
-export const frameColors: [
-  null,
-  string,
-  string,
-  string,
-  string,
-  string,
-  string,
-] = [null, '#FF8080', '#80FF80', '#8080FF', '#8080FF', '#80FF80', '#FF8080']
-
 export function renderingModelIntermediateFactory(
   pluginManager: PluginManager,
   configSchema: AnyConfigurationSchemaType,
@@ -169,17 +146,13 @@ function colorCode(letter: string, theme?: Theme) {
   )
 }
 
-function codonColorCode(letter: string, rowColorCode: string, bpPerPx: number) {
-  const colorMap: Record<string, string> = {
+function codonColorCode(letter: string) {
+  const colorMap: Record<string, string | undefined> = {
     M: '#33ee33',
     '*': '#f44336',
   }
 
-  if (colorMap[letter.toUpperCase()] !== undefined) {
-    return colorMap[letter.toUpperCase()]
-  }
-
-  return bpPerPx <= 0.1 ? rowColorCode : 'lightgray'
+  return colorMap[letter.toUpperCase()]
 }
 
 function reverseCodonSeq(seq: string): string {
@@ -214,7 +187,6 @@ function drawTranslation(
   seq: string,
   i: number,
   reverse: boolean,
-  rowColorCode: string,
 ) {
   let codonSeq: string = seq.slice(i, i + 3).toUpperCase()
   if (reverse) {
@@ -225,11 +197,13 @@ function drawTranslation(
   if (!codonLetter) {
     return
   }
-  seqTrackctx.beginPath()
-  seqTrackctx.fillStyle = codonColorCode(codonLetter, rowColorCode, bpPerPx)
-  seqTrackctx.rect(trnslStartPx, trnslY, trnslWidthPx, sequenceRowHeight)
-  seqTrackctx.fill()
+  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)
   }
@@ -267,6 +241,24 @@ export function sequenceRenderingModelFactory(
               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 = (
@@ -289,13 +281,12 @@ export function sequenceRenderingModelFactory(
                     regionNumber: idx,
                   })?.offsetPx ?? 0) - self.lgv.offsetPx
                 const trnslWidthPx = 3 / self.lgv.bpPerPx
-                const trnslStartPx = self.displayedRegions[idx].reversed
+                const trnslStartPx = self.lgv.displayedRegions[idx].reversed
                   ? trnslXOffset - trnslWidthPx
                   : trnslXOffset
 
                 // Draw translation forward
                 for (let j = 2; j >= 0; j--) {
-                  const color = frameColors.at(j + 1) ?? '#ffffff'
                   if ((region.start + i) % 3 === j) {
                     drawTranslation(
                       seqTrackctx,
@@ -307,7 +298,6 @@ export function sequenceRenderingModelFactory(
                       seq,
                       i,
                       false,
-                      color,
                     )
                   }
                 }
@@ -320,7 +310,7 @@ export function sequenceRenderingModelFactory(
                       regionNumber: idx,
                     })?.offsetPx ?? 0) - self.lgv.offsetPx
                   const widthPx = 1 / self.lgv.bpPerPx
-                  const startPx = self.displayedRegions[idx].reversed
+                  const startPx = self.lgv.displayedRegions[idx].reversed
                     ? xOffset - widthPx
                     : xOffset
 
@@ -370,7 +360,6 @@ export function sequenceRenderingModelFactory(
 
                 // Draw translation reverse
                 for (let k = 0; k <= 2; k++) {
-                  const color = frameColors.at(-(k + 1)) ?? '#ffffff'
                   const rowOffset = self.lgv.bpPerPx <= 1 ? 5 : 3
                   if ((region.start + i) % 3 === k) {
                     drawTranslation(
@@ -383,7 +372,6 @@ export function sequenceRenderingModelFactory(
                       seq,
                       i,
                       true,
-                      color,
                     )
                   }
                 }
@@ -412,21 +400,19 @@ export function renderingModelFactory(
         self,
         autorun(
           () => {
-            if (!self.lgv.initialized || self.regionCannotBeRendered()) {
+            const { canvas, featureLayouts, featuresHeight, lgv } = self
+            if (!lgv.initialized || self.regionCannotBeRendered()) {
               return
             }
-            const ctx = self.canvas?.getContext('2d')
+            const { displayedRegions, dynamicBlocks } = lgv
+
+            const ctx = canvas?.getContext('2d')
             if (!ctx) {
               return
             }
-            ctx.clearRect(
-              0,
-              0,
-              self.lgv.dynamicBlocks.totalWidthPx,
-              self.featuresHeight,
-            )
-            for (const [idx, featureLayout] of self.featureLayouts.entries()) {
-              const displayedRegion = self.displayedRegions[idx]
+            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) {
@@ -442,20 +428,7 @@ export function renderingModelFactory(
                   ) {
                     continue
                   }
-                  const x =
-                    (self.lgv.bpToPx({
-                      refName: displayedRegion.refName,
-                      coord: feature.min,
-                      regionNumber: idx,
-                    })?.offsetPx ?? 0) - self.lgv.offsetPx
-                  getGlyph(feature, self.lgv.bpPerPx).draw(
-                    self,
-                    ctx,
-                    feature,
-                    x,
-                    row,
-                    displayedRegion.reversed,
-                  )
+                  getGlyph(feature).draw(ctx, feature, row, self, idx)
                 }
               }
             }
@@ -470,5 +443,8 @@ export function renderingModelFactory(
 export type LinearApolloDisplayRenderingModel = ReturnType<
   typeof renderingModelIntermediateFactory
 >
-export type LinearApolloDisplayRendering =
-  Instance<LinearApolloDisplayRenderingModel>
+// eslint disable because of
+// https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LinearApolloDisplayRendering
+  extends Instance<LinearApolloDisplayRenderingModel> {}

package/src/OntologyManager/OntologyStore/fulltext.ts

@@ -1,5 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable import/no-named-as-default-member */
 // jsonpath triggers this rule for some reason. import { query } from 'jsonpath' does not work
 
 import { checkAbortSignal } from '@jbrowse/core/util'

package/src/OntologyManager/OntologyStore/index.ts

@@ -1,4 +1,5 @@
-/* eslint-disable @typescript-eslint/no-throw-literal */
+/* eslint-disable @typescript-eslint/only-throw-error */
+
 /* eslint-disable unicorn/no-await-expression-member */
 import {
   BlobLocation,

package/src/OntologyManager/index.ts

@@ -155,8 +155,12 @@ export const OntologyRecordConfiguration = ConfigurationSchema(
   },
 )
 
-export type OntologyManager = Instance<typeof OntologyManagerType>
-export type OntologyRecord = Instance<typeof OntologyRecordType>
+// eslint disables because of
+// https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface OntologyManager extends Instance<typeof OntologyManagerType> {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface OntologyRecord extends Instance<typeof OntologyRecordType> {}
 
 export type OntologyTerm = OntologyDBNode
 

package/src/OntologyManager/util.ts

@@ -1,10 +1,10 @@
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 
 import OntologyStore from './OntologyStore'
 import { isOntologyClass } from '.'
 
 export async function fetchValidDescendantTerms(
-  parentFeature: AnnotationFeatureI | undefined,
+  parentFeature: AnnotationFeature | undefined,
   ontologyStore: OntologyStore,
   _signal: AbortSignal,
 ) {

package/src/SixFrameFeatureDisplay/stateModel.ts

@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/unbound-method */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { ConfigurationReference } from '@jbrowse/core/configuration'
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import PluginManager from '@jbrowse/core/PluginManager'
@@ -48,7 +49,7 @@ export function stateModelFactory(
       showIntronLines: true,
     })
     .volatile(() => ({
-      apolloFeatureUnderMouse: undefined as AnnotationFeatureI | undefined,
+      apolloFeatureUnderMouse: undefined as AnnotationFeature | undefined,
       apolloRowUnderMouse: undefined as number | undefined,
     }))
     .views((self) => {
@@ -169,7 +170,7 @@ export function stateModelFactory(
       get features() {
         const { regions } = self
         const session = getSession(self) as ApolloSession
-        const features = new Map<string, Map<string, AnnotationFeatureI>>()
+        const features = new Map<string, Map<string, AnnotationFeature>>()
         for (const region of regions) {
           const assembly = session.apolloDataStore.assemblies.get(
             region.assemblyName,
@@ -177,7 +178,7 @@ export function stateModelFactory(
           const ref = assembly?.getByRefName(region.refName)
           let filteredRef = features.get(region.refName)
           if (!filteredRef) {
-            filteredRef = new Map<string, AnnotationFeatureI>()
+            filteredRef = new Map<string, AnnotationFeature>()
             features.set(region.refName, filteredRef)
           }
           for (const [featureId, feature] of ref?.features.entries() ??
@@ -204,7 +205,7 @@ export function stateModelFactory(
             if (featureLocation.min < min) {
               ;({ min } = featureLocation)
             }
-            if (featureLocation.end > max) {
+            if (featureLocation.max > max) {
               ;({ max } = featureLocation)
             }
           }
@@ -269,7 +270,7 @@ export function stateModelFactory(
         return codonLayout
       },
       get featureLayout() {
-        const featureLayout = new Map<number, [string, AnnotationFeatureI][]>()
+        const featureLayout = new Map<number, [string, AnnotationFeature][]>()
         for (const [refSeq, featuresForRefSeq] of this.features || []) {
           if (!featuresForRefSeq) {
             continue
@@ -342,7 +343,7 @@ export function stateModelFactory(
         }
         return assembly.name
       },
-      get selectedFeature(): AnnotationFeatureI | undefined {
+      get selectedFeature(): AnnotationFeature | undefined {
         const session = getSession(self) as ApolloSession
         return session.apolloSelectedFeature
       },
@@ -352,11 +353,11 @@ export function stateModelFactory(
       },
     }))
     .actions((self) => ({
-      setSelectedFeature(feature?: AnnotationFeatureI) {
+      setSelectedFeature(feature?: AnnotationFeature) {
         const session = getSession(self) as ApolloSession
         session.apolloSetSelectedFeature(feature)
       },
-      setApolloFeatureUnderMouse(feature?: AnnotationFeatureI) {
+      setApolloFeatureUnderMouse(feature?: AnnotationFeature) {
         self.apolloFeatureUnderMouse = feature
       },
       setApolloRowUnderMouse(row?: number) {
@@ -422,4 +423,8 @@ export function stateModelFactory(
 export type SixFrameFeatureDisplayStateModel = ReturnType<
   typeof stateModelFactory
 >
-export type SixFrameFeatureDisplay = Instance<SixFrameFeatureDisplayStateModel>
+// eslint disable because of
+// https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SixFrameFeatureDisplay
+  extends Instance<SixFrameFeatureDisplayStateModel> {}

package/src/TabularEditor/HybridGrid/ChangeHandling.ts

@@ -1,7 +1,5 @@
-import type { AnnotationFeatureI } from '@apollo-annotation/mst'
+import type { AnnotationFeature } from '@apollo-annotation/mst'
 import {
-  DiscontinuousLocationEndChange,
-  DiscontinuousLocationStartChange,
   LocationEndChange,
   LocationStartChange,
   TypeChange,
@@ -11,7 +9,7 @@ import type { ChangeManager } from '../../ChangeManager'
 
 export function handleFeatureTypeChange(
   changeManager: ChangeManager,
-  feature: AnnotationFeatureI,
+  feature: AnnotationFeature,
   oldType: string,
   newType: string,
 ) {
@@ -29,60 +27,37 @@ export function handleFeatureTypeChange(
 
 export function handleFeatureStartChange(
   changeManager: ChangeManager,
-  feature: AnnotationFeatureI,
+  feature: AnnotationFeature,
   oldStart: number,
   newStart: number,
-  index?: number,
 ) {
   const featureId = feature._id
-  const change =
-    index === undefined
-      ? new LocationStartChange({
-          typeName: 'LocationStartChange',
-          changedIds: [featureId],
-          featureId,
-          oldStart,
-          newStart,
-          assembly: feature.assemblyId,
-        })
-      : new DiscontinuousLocationStartChange({
-          typeName: 'DiscontinuousLocationStartChange',
-          changedIds: [featureId],
-          featureId,
-          oldStart,
-          newStart,
-          assembly: feature.assemblyId,
-          index,
-        })
+  const change = new LocationStartChange({
+    typeName: 'LocationStartChange',
+    changedIds: [featureId],
+    featureId,
+    oldStart,
+    newStart,
+    assembly: feature.assemblyId,
+  })
+
   return changeManager.submit(change)
 }
 
 export function handleFeatureEndChange(
   changeManager: ChangeManager,
-  feature: AnnotationFeatureI,
+  feature: AnnotationFeature,
   oldEnd: number,
   newEnd: number,
-  index?: number,
 ) {
   const featureId = feature._id
-  const change =
-    index === undefined
-      ? new LocationEndChange({
-          typeName: 'LocationEndChange',
-          changedIds: [featureId],
-          featureId,
-          oldEnd,
-          newEnd,
-          assembly: feature.assemblyId,
-        })
-      : new DiscontinuousLocationEndChange({
-          typeName: 'DiscontinuousLocationEndChange',
-          changedIds: [featureId],
-          featureId,
-          oldEnd,
-          newEnd,
-          assembly: feature.assemblyId,
-          index,
-        })
+  const change = new LocationEndChange({
+    typeName: 'LocationEndChange',
+    changedIds: [featureId],
+    featureId,
+    oldEnd,
+    newEnd,
+    assembly: feature.assemblyId,
+  })
   return changeManager.submit(change)
 }

package/src/TabularEditor/HybridGrid/Feature.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+/* eslint-disable unicorn/no-nested-ternary */
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import React from 'react'
@@ -21,6 +21,7 @@ import { FeatureAttributes } from './FeatureAttributes'
 import { featureContextMenuItems } from './featureContextMenuItems'
 import type { ContextMenuState } from './HybridGrid'
 import { NumberCell } from './NumberCell'
+import { getGlyph } from '../../LinearApolloDisplay/stateModel/getGlyph'
 
 const useStyles = makeStyles()((theme) => ({
   typeContent: {
@@ -59,7 +60,7 @@ const useStyles = makeStyles()((theme) => ({
 
 function makeContextMenuItems(
   display: DisplayStateModel,
-  feature: AnnotationFeatureI,
+  feature: AnnotationFeature,
 ) {
   const {
     changeManager,
@@ -80,7 +81,7 @@ function makeContextMenuItems(
   )
 }
 
-function getTopLevelFeature(feature: AnnotationFeatureI): AnnotationFeatureI {
+function getTopLevelFeature(feature: AnnotationFeature): AnnotationFeature {
   let cur = feature
   while (cur.parent) {
     cur = cur.parent
@@ -98,7 +99,7 @@ export const Feature = observer(function Feature({
   setContextMenu,
 }: {
   model: DisplayStateModel
-  feature: AnnotationFeatureI
+  feature: AnnotationFeature
   depth: number
   isHovered: boolean
   isSelected: boolean
@@ -114,16 +115,7 @@ export const Feature = observer(function Feature({
     tabularEditor: tabularEditorState,
   } = displayState
   const { featureCollapsed, filterText } = tabularEditorState
-  const {
-    _id,
-    children,
-    discontinuousLocations,
-    end,
-    phase,
-    start,
-    strand,
-    type,
-  } = feature
+  const { _id, children, max, min, strand, type } = feature
   const expanded = !featureCollapsed.get(_id)
   const toggleExpanded = (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -142,6 +134,7 @@ export const Feature = observer(function Feature({
           displayState.setApolloHover({
             feature,
             topLevelFeature: getTopLevelFeature(feature),
+            glyph: getGlyph(getTopLevelFeature(feature)),
           })
         }}
         className={
@@ -222,72 +215,29 @@ export const Feature = observer(function Feature({
           </div>
         </td>
         <td>
-          {discontinuousLocations && discontinuousLocations.length > 0 ? (
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              {discontinuousLocations.map((loc, index) => (
-                <NumberCell
-                  key={`${_id}:${loc.start},${loc.phase}`}
-                  initialValue={loc.start + 1}
-                  notifyError={notifyError}
-                  onChangeCommitted={(newStart) =>
-                    handleFeatureStartChange(
-                      changeManager,
-                      feature,
-                      discontinuousLocations[index].start,
-                      newStart - 1,
-                      index,
-                    )
-                  }
-                />
-              ))}
-            </div>
-          ) : (
-            <NumberCell
-              initialValue={start + 1}
-              notifyError={notifyError}
-              onChangeCommitted={(newStart) =>
-                handleFeatureStartChange(
-                  changeManager,
-                  feature,
-                  start,
-                  newStart - 1,
-                )
-              }
-            />
-          )}
+          <NumberCell
+            initialValue={min + 1}
+            notifyError={notifyError}
+            onChangeCommitted={(newStart) =>
+              handleFeatureStartChange(
+                changeManager,
+                feature,
+                min,
+                newStart - 1,
+              )
+            }
+          />
         </td>
         <td>
-          {discontinuousLocations && discontinuousLocations.length > 0 ? (
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              {discontinuousLocations.map((loc, index) => (
-                <NumberCell
-                  key={`${_id}:${loc.end},${loc.phase}`}
-                  initialValue={loc.end}
-                  notifyError={notifyError}
-                  onChangeCommitted={(newEnd) =>
-                    handleFeatureEndChange(
-                      changeManager,
-                      feature,
-                      discontinuousLocations[index].end,
-                      newEnd,
-                      index,
-                    )
-                  }
-                />
-              ))}
-            </div>
-          ) : (
-            <NumberCell
-              initialValue={end}
-              notifyError={notifyError}
-              onChangeCommitted={(newEnd) =>
-                handleFeatureEndChange(changeManager, feature, end, newEnd)
-              }
-            />
-          )}
+          <NumberCell
+            initialValue={max}
+            notifyError={notifyError}
+            onChangeCommitted={(newEnd) =>
+              handleFeatureEndChange(changeManager, feature, max, newEnd)
+            }
+          />
         </td>
         <td>{strand === 1 ? '+' : strand === -1 ? '-' : undefined}</td>
-        <td>{phase}</td>
         <td>
           <FeatureAttributes filterText={filterText} feature={feature} />
         </td>
@@ -304,8 +254,7 @@ export const Feature = observer(function Feature({
               return text.includes(filterText)
             })
             .map(([featureId, childFeature]) => {
-              const childHovered =
-                apolloHover?.feature?._id === childFeature._id
+              const childHovered = apolloHover?.feature._id === childFeature._id
               const childSelected = selectedFeature?._id === childFeature._id
               return (
                 <Feature
@@ -325,7 +274,7 @@ export const Feature = observer(function Feature({
   )
 })
 async function fetchValidTypeTerms(
-  feature: AnnotationFeatureI,
+  feature: AnnotationFeature,
   ontologyStore: OntologyStore,
   _signal: AbortSignal,
 ) {

package/src/TabularEditor/HybridGrid/FeatureAttributes.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { AnnotationFeatureI } from '@apollo-annotation/mst'
+import { AnnotationFeature } from '@apollo-annotation/mst'
 import { observer } from 'mobx-react'
 import { getSnapshot } from 'mobx-state-tree'
 import React from 'react'
@@ -10,7 +10,7 @@ export const FeatureAttributes = observer(function FeatureAttributes({
   feature,
   filterText,
 }: {
-  feature: AnnotationFeatureI
+  feature: AnnotationFeature
   filterText: string
 }) {
   const attrString = [...feature.attributes.entries()]
@@ -25,6 +25,7 @@ export const FeatureAttributes = observer(function FeatureAttributes({
       }
       return [key, getSnapshot(value)]
     })
+    .filter(([key]) => key) // Leave empty keys off
     .map(
       ([key, values]) =>
         `${key}=${Array.isArray(values) ? values.join(', ') : values}`,

package/src/TabularEditor/HybridGrid/HybridGrid.tsx

@@ -76,7 +76,6 @@ const HybridGrid = observer(function HybridGrid({
             <th>Start</th>
             <th>End</th>
             <th>Strand</th>
-            <th>Phase</th>
             <th>Attributes</th>
           </tr>
         </thead>
@@ -92,11 +91,11 @@ const HybridGrid = observer(function HybridGrid({
               return text.includes(filterText)
             })
             .sort((a, b) => {
-              return a[1].start - b[1].start
+              return a[1].min - b[1].min
             })
             .map(([featureId, feature]) => {
               const isSelected = selectedFeature?._id === featureId
-              const isHovered = apolloHover?.feature?._id === featureId
+              const isHovered = apolloHover?.feature._id === featureId
               return (
                 <Feature
                   key={featureId}

package/src/TabularEditor/HybridGrid/NumberCell.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'