Global feature layout

packages/core/util/compositeMap.ts

@@ -53,13 +53,13 @@ export default class CompositeMap<T, U> {
 
   *[Symbol.iterator]() {
     for (const key of this.keys()) {
-      yield [key, this.get(key)]
+      yield [key, this.get(key)] as const
     }
   }
 
   *entries() {
     for (const k of this.keys()) {
-      yield [k, this.get(k)]
+      yield [k, this.get(k)] as const
     }
   }
 }

plugins/canvas/src/CanvasFeatureRenderer/CanvasFeatureRenderer.ts

@@ -2,7 +2,7 @@ import BoxRendererType, {
   RenderArgsDeserialized as BoxRenderArgsDeserialized,
 } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
 import { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout'
-import { iterMap, Feature } from '@jbrowse/core/util'
+import { iterMap, Feature, notEmpty } from '@jbrowse/core/util'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 
 // locals
@@ -42,8 +42,20 @@ export default class CanvasRenderer extends BoxRendererType {
     const region = props.regions[0]!
     const glyph =
       feature.get('type') === 'gene' ? new GeneGlyph() : new BoxGlyph()
-    const fRect = glyph.layoutFeature({ region, ...props }, layout, feature)
-    return fRect ? { ...fRect, glyph } : null
+    const fRect = glyph.layoutFeature(
+      {
+        region,
+        ...props,
+      },
+      layout,
+      feature,
+    )
+    return fRect
+      ? {
+          ...fRect,
+          glyph,
+        }
+      : null
   }
 
   drawRect(
@@ -61,9 +73,9 @@ export default class CanvasRenderer extends BoxRendererType {
     layoutRecords: LaidOutFeatureRectWithGlyph[],
     props: RenderArgsDeserializedWithFeaturesAndLayout,
   ) {
-    layoutRecords.forEach(fRect => {
+    for (const fRect of layoutRecords) {
       this.drawRect(ctx, fRect, props)
-    })
+    }
 
     if (props.exportSVG) {
       postDraw({
@@ -87,7 +99,7 @@ export default class CanvasRenderer extends BoxRendererType {
       featureMap.values(),
       feature => this.layoutFeature(feature, layout, renderProps),
       featureMap.size,
-    ).filter((f): f is LaidOutFeatureRectWithGlyph => !!f)
+    ).filter(notEmpty)
 
     const width = (region.end - region.start) / bpPerPx
     const height = Math.max(layout.getTotalHeight(), 1)
@@ -142,21 +154,21 @@ export function postDraw({
   regions,
 }: {
   ctx: CanvasRenderingContext2D
-  regions: { start: number }[]
+  regions: {
+    start: number
+  }[]
   offsetPx: number
   layoutRecords: PostDrawFeatureRectWithGlyph[]
 }) {
   ctx.fillStyle = 'black'
   ctx.font = '10px sans-serif'
-  layoutRecords
-    .filter(f => !!f)
-    .forEach(record => {
-      record.glyph.postDraw(ctx, {
-        record,
-        regions,
-        offsetPx,
-      })
+  layoutRecords.filter(notEmpty).forEach(record => {
+    record.glyph.postDraw(ctx, {
+      record,
+      regions,
+      offsetPx,
     })
+  })
 }
 
 export {

plugins/canvas/src/CanvasFeatureRenderer/components/CanvasFeatureRendering.tsx

@@ -1,19 +1,10 @@
 import React, { useRef, useState, useEffect } from 'react'
 import { Region } from '@jbrowse/core/util/types'
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
-import { getContainingView } from '@jbrowse/core/util'
 import { bpSpanPx } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
-import { isStateTreeNode } from 'mobx-state-tree'
-import type {
-  BaseLinearDisplayModel,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view'
-import { postDraw } from '../CanvasFeatureRenderer'
+import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view'
 
-// locals
-import BoxGlyph from '../FeatureGlyphs/Box'
-import GeneGlyph from '../FeatureGlyphs/Gene'
 import { LaidOutFeatureRect } from '../FeatureGlyph'
 
 // used so that user can click-away-from-feature below the laid out features
@@ -38,52 +29,17 @@ function CanvasRendering(props: {
     height,
     regions,
     bpPerPx,
-    layoutRecords,
   } = props
 
   const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } =
     displayModel || {}
-  const view = isStateTreeNode(displayModel)
-    ? (getContainingView(displayModel) as LinearGenomeViewModel)
-    : undefined
-
-  const { dynamicBlocks, staticBlocks, offsetPx: viewOffsetPx = 0 } = view || {}
-  const { offsetPx: blockOffsetPx = 0 } = staticBlocks?.contentBlocks[0] || {}
-  const { start: viewStart } = dynamicBlocks?.contentBlocks[0] || {}
-  const offsetPx = viewOffsetPx - blockOffsetPx
 
   const region = regions[0]!
   const highlightOverlayCanvas = useRef<HTMLCanvasElement>(null)
-  const labelsCanvas = useRef<HTMLCanvasElement>(null)
   const [mouseIsDown, setMouseIsDown] = useState(false)
   const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] =
     useState(false)
 
-  useEffect(() => {
-    const canvas = labelsCanvas.current
-    if (!canvas) {
-      return
-    }
-    const ctx = canvas.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    if (viewStart === undefined) {
-      return
-    }
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    postDraw({
-      ctx,
-      layoutRecords: layoutRecords.map(rec => {
-        const glyph = rec.f.type === 'gene' ? new GeneGlyph() : new BoxGlyph()
-        return { ...rec, glyph }
-      }),
-      offsetPx,
-      regions: [{ start: viewStart }],
-    })
-  }, [layoutRecords, viewStart, offsetPx])
-
   useEffect(() => {
     const canvas = highlightOverlayCanvas.current
     if (!canvas) {
@@ -264,18 +220,6 @@ function CanvasRendering(props: {
         onFocus={() => {}}
         onBlur={() => {}}
       />
-      <canvas
-        style={{
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          zIndex: 1000,
-          pointerEvents: 'none',
-        }}
-        ref={labelsCanvas}
-        width={canvasWidth}
-        height={height + canvasPadding}
-      />
     </div>
   )
 }

plugins/linear-genome-view/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -9,6 +9,8 @@ import { Menu } from '@jbrowse/core/ui'
 
 import LinearBlocks from './LinearBlocks'
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
+import { clamp, getContainingView } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
 
 const useStyles = makeStyles()({
   display: {
@@ -22,20 +24,50 @@ const useStyles = makeStyles()({
 
 type Coord = [number, number]
 
+const FloatingLabels = observer(function ({
+  model,
+}: {
+  model: BaseLinearDisplayModel
+}) {
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const { bpPerPx, offsetPx } = view
+  return (
+    <div style={{ position: 'relative' }}>
+      {[...model.layoutFeatures.entries()].map(([key, val]) =>
+        val ? (
+          <div
+            key={key}
+            style={{
+              position: 'absolute',
+              fontSize: 10,
+              left: clamp(
+                0,
+                val[0] / bpPerPx - offsetPx,
+                val[2] / bpPerPx - offsetPx,
+              ),
+              top: val[3] - 14,
+            }}
+          >
+            {key}
+          </div>
+        ) : null,
+      )}
+    </div>
+  )
+})
+
 const BaseLinearDisplay = observer(function (props: {
   model: BaseLinearDisplayModel
   children?: React.ReactNode
 }) {
   const { classes } = useStyles()
-  const theme = useTheme()
   const ref = useRef<HTMLDivElement>(null)
   const [clientRect, setClientRect] = useState<DOMRect>()
   const [offsetMouseCoord, setOffsetMouseCoord] = useState<Coord>([0, 0])
   const [clientMouseCoord, setClientMouseCoord] = useState<Coord>([0, 0])
   const [contextCoord, setContextCoord] = useState<Coord>()
   const { model, children } = props
   const { TooltipComponent, DisplayMessageComponent, height } = model
-  const items = model.contextMenuItems()
   return (
     <div
       ref={ref}
@@ -67,6 +99,7 @@ const BaseLinearDisplay = observer(function (props: {
         <LinearBlocks {...props} />
       )}
       {children}
+      <FloatingLabels model={model} />
 
       <Suspense fallback={null}>
         <TooltipComponent
@@ -78,38 +111,59 @@ const BaseLinearDisplay = observer(function (props: {
           mouseCoord={offsetMouseCoord}
         />
       </Suspense>
-
-      <Menu
-        open={Boolean(contextCoord) && items.length > 0}
-        onMenuItemClick={(_, callback) => {
-          callback()
-          setContextCoord(undefined)
-        }}
-        onClose={() => {
-          setContextCoord(undefined)
-          model.setContextMenuFeature(undefined)
-        }}
-        TransitionProps={{
-          onExit: () => {
-            setContextCoord(undefined)
-            model.setContextMenuFeature(undefined)
-          },
-        }}
-        anchorReference="anchorPosition"
-        anchorPosition={
-          contextCoord
-            ? { top: contextCoord[1], left: contextCoord[0] }
-            : undefined
-        }
-        style={{
-          zIndex: theme.zIndex.tooltip,
-        }}
-        menuItems={items}
-      />
+      {contextCoord ? (
+        <MenuPage
+          contextCoord={contextCoord}
+          model={model}
+          onClose={() => setContextCoord(undefined)}
+        />
+      ) : null}
     </div>
   )
 })
 
+function MenuPage({
+  onClose,
+  contextCoord,
+  model,
+}: {
+  model: BaseLinearDisplayModel
+  contextCoord: Coord
+  onClose: () => void
+}) {
+  const items = model.contextMenuItems()
+  const theme = useTheme()
+  return (
+    <Menu
+      open={items.length > 0}
+      onMenuItemClick={(_, callback) => {
+        callback()
+        onClose()
+      }}
+      onClose={() => {
+        onClose()
+        model.setContextMenuFeature(undefined)
+      }}
+      TransitionProps={{
+        onExit: () => {
+          onClose()
+          model.setContextMenuFeature(undefined)
+        },
+      }}
+      anchorReference="anchorPosition"
+      anchorPosition={
+        contextCoord
+          ? { top: contextCoord[1], left: contextCoord[0] }
+          : undefined
+      }
+      style={{
+        zIndex: theme.zIndex.tooltip,
+      }}
+      menuItems={items}
+    />
+  )
+}
+
 export default BaseLinearDisplay
 
 export { default as Tooltip } from './Tooltip'

plugins/linear-genome-view/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -147,8 +147,8 @@ function stateModelFactory() {
     .views(self => ({
       /**
        * #getter
-       * a CompositeMap of `featureId -> feature obj` that
-       * just looks in all the block data for that feature
+       * a CompositeMap of `featureId -> feature obj` that just looks in all
+       * the block data for that feature
        */
       get features() {
         const featureMaps = []
@@ -168,6 +168,19 @@ function stateModelFactory() {
         return feat ? this.features.get(feat) : undefined
       },
 
+      /**
+       * #getter
+       */
+      get layoutFeatures() {
+        const featureMaps = []
+        for (const block of self.blockState.values()) {
+          if (block.layout) {
+            featureMaps.push(block.layout.rectangles)
+          }
+        }
+        return new CompositeMap<string, LayoutRecord>(featureMaps)
+      },
+
       /**
        * #getter
        */