@apollo-annotation/jbrowse-plugin-apollo 0.3.6 → 0.3.7

package/src/LinearApolloDisplay/stateModel/mouseEvents.ts

@@ -13,7 +13,7 @@ import { autorun } from 'mobx'
 import { type Instance, addDisposer } from 'mobx-state-tree'
 import { type CSSProperties } from 'react'
 
-import { type Coord } from '../components'
+import { type Edge, getPropagatedLocationChanges } from '../../util'
 import { type Glyph } from '../glyphs/Glyph'
 import { type CanvasMouseEvent } from '../types'
 
@@ -44,7 +44,7 @@ export function isMousePositionWithFeatureAndGlyph(
 }
 
 function getMousePosition(
-  event: CanvasMouseEvent,
+  event: React.MouseEvent,
   lgv: LinearGenomeViewModel,
 ): MousePosition {
   const canvas = event.currentTarget
@@ -125,13 +125,14 @@ export function mouseEventsModelIntermediateFactory(
         start: MousePosition
         current: MousePosition
         feature: AnnotationFeature
-        edge: 'min' | 'max'
+        edge: Edge
+        shrinkParent: boolean
       } | null,
       cursor: undefined as CSSProperties['cursor'] | undefined,
       apolloHover: undefined as FeatureAndGlyphUnderMouse | undefined,
     }))
     .views((self) => ({
-      getMousePosition(event: CanvasMouseEvent): MousePosition {
+      getMousePosition(event: React.MouseEvent): MousePosition {
         const mousePosition = getMousePosition(event, self.lgv)
         const { bp, regionNumber, y } = mousePosition
         const row = Math.floor(y / self.apolloRowHeight)
@@ -196,6 +197,10 @@ export function mouseEventsModelIntermediateFactory(
           self.cursor = cursor
         }
       },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      updateFilteredTranscripts(forms: string[]) {
+        return
+      },
     }))
     .actions(() => ({
       // onClick(event: CanvasMouseEvent) {
@@ -340,14 +345,18 @@ export function mouseEventsModelFactory(
   )
 
   return LinearApolloDisplayMouseEvents.views((self) => ({
-    contextMenuItems(contextCoord?: Coord): MenuItem[] {
+    contextMenuItems(event: React.MouseEvent<HTMLDivElement>): MenuItem[] {
       const { apolloHover } = self
-      if (!(apolloHover && contextCoord)) {
+      if (!apolloHover) {
         return []
       }
+      const mousePosition = self.getMousePosition(event)
       const { topLevelFeature } = apolloHover
       const glyph = self.getGlyph(topLevelFeature)
-      return glyph.getContextMenuItems(self)
+      if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
+        return glyph.getContextMenuItems(self, mousePosition)
+      }
+      return []
     },
   }))
     .actions((self) => ({
@@ -356,20 +365,23 @@ export function mouseEventsModelFactory(
       startDrag(
         mousePosition: MousePositionWithFeatureAndGlyph,
         feature: AnnotationFeature,
-        edge: 'min' | 'max',
+        edge: Edge,
+        shrinkParent = false,
       ) {
         self.apolloDragging = {
           start: mousePosition,
           current: mousePosition,
           feature,
           edge,
+          shrinkParent,
         }
       },
       endDrag() {
         if (!self.apolloDragging) {
           throw new Error('endDrag() called with no current drag in progress')
         }
-        const { current, edge, feature, start } = self.apolloDragging
+        const { current, edge, feature, start, shrinkParent } =
+          self.apolloDragging
         // don't do anything if it was only dragged a tiny bit
         if (Math.abs(current.x - start.x) <= 4) {
           self.setDragging()
@@ -379,33 +391,35 @@ export function mouseEventsModelFactory(
         const { displayedRegions } = self.lgv
         const region = displayedRegions[start.regionNumber]
         const assembly = self.getAssemblyId(region.assemblyName)
+        const changes = getPropagatedLocationChanges(
+          feature,
+          current.bp,
+          edge,
+          shrinkParent,
+        )
 
-        let change: LocationEndChange | LocationStartChange
-        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,
-          })
-        }
+        const change: LocationEndChange | LocationStartChange =
+          edge === 'max'
+            ? new LocationEndChange({
+                typeName: 'LocationEndChange',
+                changedIds: changes.map((c) => c.featureId),
+                changes: changes.map((c) => ({
+                  featureId: c.featureId,
+                  oldEnd: c.oldLocation,
+                  newEnd: c.newLocation,
+                })),
+                assembly,
+              })
+            : new LocationStartChange({
+                typeName: 'LocationStartChange',
+                changedIds: changes.map((c) => c.featureId),
+                changes: changes.map((c) => ({
+                  featureId: c.featureId,
+                  oldStart: c.oldLocation,
+                  newStart: c.newLocation,
+                })),
+                assembly,
+              })
         void self.changeManager.submit(change)
         self.setDragging()
         self.setCursor()
@@ -461,6 +475,8 @@ export function mouseEventsModelFactory(
             mousePosition,
             event,
           )
+        } else {
+          self.setSelectedFeature()
         }
 
         if (self.apolloDragging) {

package/src/LinearApolloDisplay/stateModel/rendering.ts

@@ -4,7 +4,7 @@ import { type AnyConfigurationSchemaType } from '@jbrowse/core/configuration/con
 import { defaultCodonTable, doesIntersect2, revcom } from '@jbrowse/core/util'
 import { type Theme } from '@mui/material'
 import { autorun } from 'mobx'
-import { type Instance, addDisposer } from 'mobx-state-tree'
+import { type Instance, addDisposer, types } from 'mobx-state-tree'
 
 import { type ApolloSessionModel } from '../../session'
 
@@ -27,6 +27,7 @@ export function renderingModelIntermediateFactory(
       detailsHeight: 200,
       lastRowTooltipBufferHeight: 40,
       isShown: true,
+      filteredTranscripts: types.array(types.string),
     })
     .volatile(() => ({
       canvas: null as HTMLCanvasElement | null,

package/src/LinearApolloSixFrameDisplay/components/LinearApolloSixFrameDisplay.tsx

@@ -109,8 +109,13 @@ export const LinearApolloSixFrameDisplay = observer(
             // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
             // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
             <>
-              <TrackLines model={model} strand={1} />
-              <TrackLines model={model} strand={-1} />
+              <TrackLines model={model} idx={0} />
+              <TrackLines
+                model={model}
+                hrStyle={{ margin: 0, top: 0, color: 'grey', opacity: 0.4 }}
+                idx={1}
+              />
+              <TrackLines model={model} idx={2} />
               <canvas
                 ref={async (node: HTMLCanvasElement) => {
                   await Promise.resolve()

package/src/LinearApolloSixFrameDisplay/components/TrackLines.tsx

@@ -5,36 +5,28 @@ import { type LinearApolloSixFrameDisplay } from '../stateModel'
 
 export const TrackLines = observer(function TrackLines({
   model,
-  strand,
+  hrStyle = { margin: 0, top: 0, color: 'black' },
+  idx = 0,
 }: {
   model: LinearApolloSixFrameDisplay
-  strand: number
+  hrStyle?: React.CSSProperties
+  idx: number
 }) {
-  const { apolloRowHeight, highestRow, lastRowTooltipBufferHeight } = model
-  return strand == 1 ? (
-    <div
-      style={{
-        position: 'absolute',
-        left: 0,
-        top: (apolloRowHeight * (highestRow + 1)) / 2 - 2,
-        width: '100%',
-      }}
-    >
-      <hr style={{ margin: 0, top: 0, color: 'black' }} />
-    </div>
-  ) : (
+  const { apolloRowHeight, highestRow, showFeatureLabels } = model
+  const featureLabelSpacer = showFeatureLabels ? 2 : 1
+
+  return (
     <div
       style={{
         position: 'absolute',
         left: 0,
-        bottom:
-          (apolloRowHeight * (highestRow + 1) + lastRowTooltipBufferHeight) /
-            2 +
-          3,
+        top:
+          (apolloRowHeight * featureLabelSpacer * (highestRow + 1)) / 2 +
+          idx * featureLabelSpacer * apolloRowHeight,
         width: '100%',
       }}
     >
-      <hr style={{ margin: 0, top: 0, color: 'black' }} />
+      <hr style={hrStyle} />
     </div>
   )
 })