jbrowse-plugin-graphgenomeviewer 7.1.0 → 7.1.2

package/src/GraphGenomeView/components/SettingsMenu.tsx

@@ -1,6 +1,5 @@
-import { useState } from 'react'
-
 import { CascadingMenuButton } from '@jbrowse/core/ui'
+import { getSession } from '@jbrowse/core/util'
 import CloseIcon from '@mui/icons-material/Close'
 import MoreVertIcon from '@mui/icons-material/MoreVert'
 import RouteIcon from '@mui/icons-material/Route'
@@ -17,78 +16,70 @@ const SettingsMenu = observer(function SettingsMenu({
 }: {
   model: GraphPaneModel
 }) {
-  const [settingsOpen, setSettingsOpen] = useState(false)
   // the toolbar beside this menu picks the walks and the repeat
   const haplotypes = model.highlightMenuItems({ picks: false })
 
   return (
-    <>
-      <CascadingMenuButton
-        size="small"
-        tooltip="Graph options"
-        menuItems={[
-          ...(haplotypes.length > 0
-            ? [{ label: 'Haplotypes', icon: RouteIcon, subMenu: haplotypes }]
-            : []),
-          ...model.layoutOptionMenuItems({ repeat: false }),
-          {
-            label: 'Show...',
-            icon: VisibilityIcon,
-            subMenu: [
-              ...model.showMenuItems(),
-              ...(model.modeDrawsNodes && model.walkChoices.length > 1
-                ? [
-                    {
-                      type: 'checkbox' as const,
-                      label: 'Show walk rows under the graph',
-                      checked: model.walkStrip,
-                      onClick: () => {
-                        model.setWalkStrip(!model.walkStrip)
-                      },
+    <CascadingMenuButton
+      size="small"
+      tooltip="Graph options"
+      menuItems={[
+        ...(haplotypes.length > 0
+          ? [{ label: 'Haplotypes', icon: RouteIcon, subMenu: haplotypes }]
+          : []),
+        ...model.layoutOptionMenuItems({ repeat: false }),
+        {
+          label: 'Show...',
+          icon: VisibilityIcon,
+          subMenu: [
+            ...model.showMenuItems(),
+            ...(model.modeDrawsNodes && model.walkChoices.length > 1
+              ? [
+                  {
+                    type: 'checkbox' as const,
+                    label: 'Show walk rows under the graph',
+                    checked: model.walkStrip,
+                    onClick: () => {
+                      model.setWalkStrip(!model.walkStrip)
                     },
-                  ]
-                : []),
-              {
-                type: 'checkbox' as const,
-                label: 'Show timings',
-                checked: model.showPerf,
-                onClick: () => {
-                  model.setShowPerf(!model.showPerf)
-                },
+                  },
+                ]
+              : []),
+            {
+              type: 'checkbox' as const,
+              label: 'Show timings',
+              checked: model.showPerf,
+              onClick: () => {
+                model.setShowPerf(!model.showPerf)
               },
-            ],
-          },
-          { type: 'divider' as const },
-          {
-            label: 'Graph settings...',
-            icon: SettingsIcon,
-            helpText:
-              'Subgraph node limit; node width and path colors; the force-directed layout engine',
-            onClick: () => {
-              setSettingsOpen(true)
             },
+          ],
+        },
+        { type: 'divider' as const },
+        {
+          label: 'Graph settings...',
+          icon: SettingsIcon,
+          helpText:
+            'Subgraph node limit; node width and path colors; the force-directed layout engine',
+          onClick: () => {
+            getSession(model).queueDialog(onClose => [
+              GraphSettingsDialog,
+              { model, open: true, onClose },
+            ])
           },
-          { type: 'divider' as const },
-          {
-            label: 'Close graph',
-            icon: CloseIcon,
-            onClick: () => {
-              model.clearGraph()
-            },
+        },
+        { type: 'divider' as const },
+        {
+          label: 'Close graph',
+          icon: CloseIcon,
+          onClick: () => {
+            model.clearGraph()
           },
-        ]}
-      >
-        <MoreVertIcon />
-      </CascadingMenuButton>
-
-      <GraphSettingsDialog
-        model={model}
-        open={settingsOpen}
-        onClose={() => {
-          setSettingsOpen(false)
-        }}
-      />
-    </>
+        },
+      ]}
+    >
+      <MoreVertIcon />
+    </CascadingMenuButton>
   )
 })
 

package/src/GraphGenomeView/components/TubeMapOverlay.tsx

@@ -1,14 +1,13 @@
-import { useEffect, useRef } from 'react'
+import { useCallback } from 'react'
 
-import { getDpr } from '@jbrowse/bandage-core/renderer/canvas'
 import { drawTubeMapRuler } from '@jbrowse/bandage-core/tubeMap/axis'
 import { drawTubeMapConnectors } from '@jbrowse/bandage-core/tubeMap/connectors'
 import { drawDeviationMarks } from '@jbrowse/bandage-core/tubeMap/deviations'
 import { drawTubeMap } from '@jbrowse/bandage-core/tubeMap/draw'
 import { drawTubeMapGenes } from '@jbrowse/bandage-core/tubeMap/genes'
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
+import { PaneOverlayCanvas } from './PaneLayer'
 import {
   PANEL_TITLE_FONT,
   drawBundleCounts,
@@ -20,14 +19,6 @@ const PANEL_TICK_ALPHA = 0.45
 
 import type { GraphPaneModel } from '../model'
 
-const canvasStyle = {
-  position: 'absolute' as const,
-  left: 0,
-  top: 0,
-  pointerEvents: 'none' as const,
-  zIndex: 1,
-}
-
 // The tubes, their connectors, genes and ruler, onto a canvas sized to the
 // pane or onto the linear view's SVG export
 export function paintTubeMap(
@@ -50,7 +41,6 @@ export function paintTubeMap(
     ...frame,
     width,
     highlightNode,
-    darkMode: model.darkMode,
     tubeColors: model.tubeMapTubeColors,
     nodeColors: model.tubeMapNodeColors,
   }
@@ -90,7 +80,6 @@ function paintPanels(
   highlightNode: string | null,
 ) {
   const width = model.paneWidth
-  const ink = model.darkMode ? '255,255,255' : '0,0,0'
   for (const p of panels) {
     if (p.bottom < 0 || p.titleTop > model.canvasHeight) {
       continue
@@ -99,7 +88,6 @@ function paintPanels(
       ...p.frame,
       width,
       highlightNode,
-      darkMode: model.darkMode,
       tubeColors: p.tubeColors,
       nodeColors: p.nodeColors,
     }
@@ -109,7 +97,7 @@ function paintPanels(
     ctx.globalAlpha = PANEL_TICK_ALPHA
     drawDeviationMarks(ctx, p.deviations, tubeFrame)
     ctx.globalAlpha = 1
-    ctx.strokeStyle = `rgba(${ink},0.15)`
+    ctx.strokeStyle = 'rgba(0,0,0,0.15)'
     ctx.lineWidth = 1
     ctx.beginPath()
     ctx.moveTo(0, Math.round(p.titleTop) + 0.5)
@@ -118,7 +106,7 @@ function paintPanels(
     ctx.font = PANEL_TITLE_FONT
     ctx.textAlign = 'left'
     ctx.textBaseline = 'top'
-    ctx.fillStyle = `rgba(${ink},0.85)`
+    ctx.fillStyle = 'rgba(0,0,0,0.85)'
     ctx.fillText(p.label, 6, p.titleTop + 4)
   }
   const last = panels.at(-1)
@@ -127,7 +115,7 @@ function paintPanels(
     drawTubeMapRuler(
       ctx,
       boxes,
-      { ...last.frame, width, darkMode: model.darkMode },
+      { ...last.frame, width },
       last.bottom + 4,
       true,
     )
@@ -145,38 +133,19 @@ const TubeMapOverlay = observer(function TubeMapOverlay({
 }: {
   model: GraphPaneModel
 }) {
-  const ref = useRef<HTMLCanvasElement>(null)
-  const { tubeMapPicture, paneWidth, canvasHeight } = model
-  useEffect(
-    () =>
-      autorun(() => {
-        const canvas = ref.current
-        const ctx = canvas?.getContext('2d')
-        if (canvas && ctx && model.tubeMapPicture && model.tubeMapFrame) {
-          const dpr = getDpr()
-          const width = model.paneWidth
-          const height = model.canvasHeight
-          canvas.width = Math.round(width * dpr)
-          canvas.height = Math.round(height * dpr)
-          ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-          ctx.clearRect(0, 0, width, height)
-          paintTubeMap(ctx, model, { highlightNode: model.selectedNode })
-        }
-      }),
+  const paint = useCallback(
+    (ctx: CanvasRenderingContext2D) => {
+      paintTubeMap(ctx, model, { highlightNode: model.selectedNode })
+    },
     [model],
   )
-  // Mounted whether or not there is a tube map, so the autorun above has its
-  // canvas the moment a layout brings one.
   return (
-    <canvas
-      ref={ref}
-      data-testid={tubeMapPicture ? 'graph-tube-map' : undefined}
-      style={{
-        ...canvasStyle,
-        width: paneWidth,
-        height: canvasHeight,
-        display: tubeMapPicture ? 'block' : 'none',
-      }}
+    <PaneOverlayCanvas
+      model={model}
+      zIndex={1}
+      shown={!!model.tubeMapPicture}
+      testId="graph-tube-map"
+      paint={paint}
     />
   )
 })

package/src/GraphGenomeView/components/WalkRowsOverlay.tsx

@@ -1,21 +1,14 @@
-import { useEffect, useId, useMemo, useRef } from 'react'
+import { useCallback, useMemo } from 'react'
 
-import { walkRowsTree } from '@jbrowse/bandage-core/layout/walkRowDraw'
-import { getDpr } from '@jbrowse/bandage-core/renderer/canvas'
-import { autorun, computed } from 'mobx'
+import { computed } from 'mobx'
 import { observer } from 'mobx-react'
 
-import ElTree from './ElTree'
-import { SECTION_HEADER_PX } from '../walkRowGroups'
+import ElTree, { useSvgId } from './ElTree'
+import { PaneOverlayCanvas, PaneSvgLayer } from './PaneLayer'
+import { SECTION_HEADER_PX, walkRowTrees } from '../walkRowGroups'
 import { paintWalkRowSpans, walkRowSpans } from '../walkRowSpans'
 
 import type { GraphPaneModel } from '../model'
-import type { WalkRowSection } from '../walkRowGroups'
-import type { El } from '@jbrowse/bandage-core/el'
-import type {
-  WalkRowsFrame,
-  WalkRowsWithCalls,
-} from '@jbrowse/bandage-core/layout/walkRowDraw'
 
 // The walk-rows layout's bars: one per haplotype walk under the reference
 // row, each on its own bp axis from the window's left edge. The runs paint as
@@ -32,96 +25,31 @@ import type {
 // repeats/walkCalls.ts, which also holds the threshold a red readout is read
 // off. Colouring each copy by its unit is jbrowse-plugin-tandem-repeat's.
 
-const svgStyle = {
-  position: 'absolute' as const,
-  left: 0,
-  top: 0,
-  pointerEvents: 'none' as const,
-  overflow: 'visible' as const,
-  zIndex: 3,
-}
-
-// The rows' trees, a section at a time while grouped. walkRowsTree puts its
-// i-th row at i * rowPx below its reference row and draws that row too, so
-// each section is drawn shifted down to its place with its reference row
-// dropped.
-export function walkRowTrees(
-  bars: WalkRowsWithCalls,
-  sections: WalkRowSection[],
-  rowY: (i: number) => number,
-  frame: WalkRowsFrame & { rowPx: number },
-  o: Parameters<typeof walkRowsTree>[2] & { idPrefix: string },
-): El[] {
-  if (sections.length === 0) {
-    return [walkRowsTree(bars, frame, o)]
-  }
-  return [
-    walkRowsTree({ ...bars, rows: [] }, frame, o),
-    ...sections.flatMap((section, k) => {
-      const tree = walkRowsTree(
-        {
-          ...bars,
-          rows: bars.rows.slice(
-            section.first - 1,
-            section.first - 1 + section.count,
-          ),
-        },
-        {
-          ...frame,
-          translateY:
-            frame.translateY +
-            (rowY(section.first) - frame.rowPx) * frame.scaleY,
-        },
-        { ...o, idPrefix: `${o.idPrefix}-s${k}` },
-      )
-      return tree.children.filter(
-        (c): c is El =>
-          typeof c !== 'string' &&
-          c.attrs['data-testid'] !== 'graph-walk-reference',
-      )
-    }),
-  ]
-}
-
-const canvasStyle = { ...svgStyle, overflow: undefined }
-
-// Repainted by an autorun, as the other overlay canvases are, so a pan moves
-// the bars in the same frame as the drawing. The spans are recut only when
-// the rows, the zoom or the ramp change.
-const WalkRowSpansCanvas = observer(function WalkRowSpansCanvas({
-  model,
-}: {
-  model: GraphPaneModel
-}) {
-  const ref = useRef<HTMLCanvasElement>(null)
-  useEffect(() => {
-    const spans = computed(() => {
-      const bars = model.walkRowBars
-      return bars
-        ? walkRowSpans(
-            [bars.reference, ...bars.rows],
-            model.scaleX,
-            model.referenceRampDomain,
-          )
-        : undefined
-    })
-    return autorun(() => {
-      const canvas = ref.current
-      const ctx = canvas?.getContext('2d')
+// The spans are recut only when the rows, the zoom or the ramp change
+function WalkRowSpansCanvas({ model }: { model: GraphPaneModel }) {
+  const spans = useMemo(
+    () =>
+      computed(() => {
+        const bars = model.walkRowBars
+        return bars
+          ? walkRowSpans(
+              [bars.reference, ...bars.rows],
+              model.scaleX,
+              model.referenceRampDomain,
+            )
+          : undefined
+      }),
+    [model],
+  )
+  const paint = useCallback(
+    (ctx: CanvasRenderingContext2D) => {
       const bars = model.walkRowBars
       const place = model.walkRowPlacement
       const pitch = model.walkRowPitch
       const painted = spans.get()
-      if (!canvas || !ctx || !bars || !place || !pitch || !painted) {
+      if (!bars || !place || !pitch || !painted) {
         return
       }
-      const width = model.paneWidth
-      const height = model.canvasHeight
-      const dpr = getDpr()
-      canvas.width = Math.round(width * dpr)
-      canvas.height = Math.round(height * dpr)
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-      ctx.clearRect(0, 0, width, height)
       const sections = model.walkRowGroups?.sections
       const blocks = sections?.length
         ? [
@@ -134,31 +62,26 @@ const WalkRowSpansCanvas = observer(function WalkRowSpansCanvas({
           ]
         : [{ first: 0, count: bars.rows.length + 1, rowY: place.rowY(0) }]
       paintWalkRowSpans(ctx, painted, {
-        scaleX: model.scaleX,
-        scaleY: model.scaleY,
-        translateX: model.translateX,
-        translateY: model.translateY,
-        width,
-        height,
+        ...model.screenTransform,
+        width: model.paneWidth,
+        height: model.canvasHeight,
         rowPx: pitch.rowPx,
         barPx: pitch.barPx,
         origin: bars.origin,
         blocks,
       })
-    })
-  }, [model])
+    },
+    [model, spans],
+  )
   return (
-    <canvas
-      ref={ref}
-      data-testid="graph-walk-rows-spans"
-      style={{
-        ...canvasStyle,
-        width: model.paneWidth,
-        height: model.canvasHeight,
-      }}
+    <PaneOverlayCanvas
+      model={model}
+      zIndex={3}
+      testId="graph-walk-rows-spans"
+      paint={paint}
     />
   )
-})
+}
 
 // `vector` for an SVG export, which draws the bars as walkRowsTree's rects
 const WalkRowsOverlay = observer(function WalkRowsOverlay({
@@ -168,7 +91,7 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
   model: GraphPaneModel
   vector?: boolean
 }) {
-  const idPrefix = useId().replace(/[^\w-]/g, '')
+  const idPrefix = useSvgId()
   const bars = model.walkRowBars
   const place = model.walkRowPlacement
   const pitch = model.walkRowPitch
@@ -185,19 +108,20 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
     return null
   }
   const { paneWidth: width, canvasHeight } = model
-  const Y = (y: number) => y * model.scaleY + model.translateY
   const hovered = model.hoveredWalkRowText
     ? [bars.reference, ...bars.rows].findIndex(
         r => r.name === model.hoveredWalkRow,
       )
     : -1
-  const row =
-    hovered >= 0 ? [bars.reference, ...bars.rows][hovered]! : undefined
+  const lit =
+    hovered >= 0
+      ? {
+          row: [bars.reference, ...bars.rows][hovered]!,
+          start: model.toScreen({ x: bars.origin, y: place.rowY(hovered) }),
+        }
+      : undefined
   const frame = {
-    scaleX: model.scaleX,
-    scaleY: model.scaleY,
-    translateX: model.translateX,
-    translateY: model.translateY,
+    ...model.screenTransform,
     width,
     height: canvasHeight,
     ...pitch,
@@ -205,11 +129,11 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
   return (
     <>
       {vector ? null : <WalkRowSpansCanvas model={model} />}
-      <svg
-        style={svgStyle}
-        width={width}
-        height={canvasHeight}
-        data-testid="graph-walk-rows"
+      <PaneSvgLayer
+        model={model}
+        zIndex={3}
+        overflow="visible"
+        testId="graph-walk-rows"
       >
         {walkRowTrees(
           vector ? bars : bare,
@@ -228,7 +152,9 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
           <text
             key={header.key}
             x={10}
-            y={Y(header.top) + SECTION_HEADER_PX - 4}
+            y={
+              model.toScreen({ x: 0, y: header.top }).y + SECTION_HEADER_PX - 4
+            }
             fontFamily="sans-serif"
             fontSize={11}
             fontWeight="bold"
@@ -238,19 +164,19 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
             {header.title}
           </text>
         ))}
-        {row ? (
+        {lit ? (
           <rect
             data-testid="graph-walk-row-hovered"
-            x={bars.origin * model.scaleX + model.translateX - 2}
-            y={Y(place.rowY(hovered)) - pitch.rowPx / 2 - 1}
-            width={row.bp * model.scaleX + 4}
+            x={lit.start.x - 2}
+            y={lit.start.y - pitch.rowPx / 2 - 1}
+            width={lit.row.bp * model.scaleX + 4}
             height={pitch.rowPx + 2}
             fill="none"
             stroke="#111"
             strokeWidth={1}
           />
         ) : null}
-      </svg>
+      </PaneSvgLayer>
     </>
   )
 })

package/src/GraphGenomeView/components/WalkStrip.tsx

@@ -1,4 +1,4 @@
-import { useId, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import {
   walkRowReadout,
@@ -15,9 +15,9 @@ import { RAMP_GRADIENT_CSS } from '@jbrowse/bandage-core/referenceRampCss'
 import { isAlive } from '@jbrowse/mobx-state-tree'
 import { observer } from 'mobx-react'
 
-import ElTree from './ElTree'
+import ElTree, { useSvgId } from './ElTree'
 import { LegendSwatchView } from './Legend'
-import { WalkRowContextMenu } from './WalkRowContextMenu'
+import PaneContextMenu from './PaneContextMenu'
 import { legendRowStyle } from './legendStyles'
 import { walkRowSwatch } from '../legendSections'
 
@@ -67,7 +67,7 @@ const StripBars = observer(function StripBars({
   ramp: { start: number; end: number } | undefined
   rowGenes: Map<string, RowGene[]> | undefined
 }) {
-  const idPrefix = useId().replace(/[^\w-]/g, '')
+  const idPrefix = useSvgId()
   const tree = useMemo(
     () => walkRowsTree(bars, frame, { ramp, rowGenes, idPrefix }),
     [bars, frame, ramp, rowGenes, idPrefix],
@@ -115,9 +115,11 @@ const WalkStrip = observer(function WalkStrip({
 }) {
   const bars = model.walkStripRows
   const frame = model.walkStripFrame
-  const [menu, setMenu] = useState<
-    { row: number; top: number; left: number } | undefined
-  >(undefined)
+  const [menu, setMenu] = useState<{
+    clientX: number
+    clientY: number
+    row: number
+  }>()
   if (!bars || !frame) {
     return null
   }
@@ -165,7 +167,7 @@ const WalkStrip = observer(function WalkStrip({
           const at = hit(e)
           if (at) {
             e.preventDefault()
-            setMenu({ row: at.index, top: e.clientY, left: e.clientX })
+            setMenu({ clientX: e.clientX, clientY: e.clientY, row: at.index })
           }
         }}
       >
@@ -197,18 +199,13 @@ const WalkStrip = observer(function WalkStrip({
           </div>
         ))}
       </div>
-      {menu ? (
-        <WalkRowContextMenu
-          model={model}
-          row={menu.row}
-          bars={bars}
-          top={menu.top}
-          left={menu.left}
-          onClose={() => {
-            setMenu(undefined)
-          }}
-        />
-      ) : null}
+      <PaneContextMenu
+        model={model}
+        at={menu && { ...menu, bars }}
+        onClose={() => {
+          setMenu(undefined)
+        }}
+      />
     </div>
   )
 })

package/src/GraphGenomeView/components/WalkStripLocator.tsx

@@ -1,15 +1,8 @@
 import { observer } from 'mobx-react'
 
-import type { GraphPaneModel } from '../model'
+import { PaneSvgLayer } from './PaneLayer'
 
-const svgStyle = {
-  position: 'absolute' as const,
-  left: 0,
-  top: 0,
-  pointerEvents: 'none' as const,
-  overflow: 'visible' as const,
-  zIndex: 4,
-}
+import type { GraphPaneModel } from '../model'
 
 // A ring round the node a point on the walk strip lights, so a one-bp node
 // can be found in a hairball
@@ -20,11 +13,11 @@ const WalkStripLocator = observer(function WalkStripLocator({
 }) {
   const at = model.walkStripLocator
   return at ? (
-    <svg
-      style={svgStyle}
-      width={model.paneWidth}
-      height={model.canvasHeight}
-      data-testid="graph-walk-strip-locator"
+    <PaneSvgLayer
+      model={model}
+      zIndex={4}
+      overflow="visible"
+      testId="graph-walk-strip-locator"
     >
       <circle
         cx={at.x}
@@ -42,7 +35,7 @@ const WalkStripLocator = observer(function WalkStripLocator({
         stroke="#111"
         strokeWidth={1.75}
       />
-    </svg>
+    </PaneSvgLayer>
   ) : null
 })