@jbrowse/plugin-linear-comparative-view 2.6.1

package/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx

@@ -0,0 +1,200 @@
+import React, { useState, useCallback } from 'react'
+import { observer } from 'mobx-react'
+import {
+  assembleLocString,
+  getContainingView,
+  getSession,
+  isSessionModelWithWidgets,
+} from '@jbrowse/core/util'
+
+// locals
+import SyntenyTooltip from './SyntenyTooltip'
+import { LinearSyntenyDisplayModel } from '../model'
+import { getId, MAX_COLOR_RANGE } from '../drawSynteny'
+
+export default observer(function LinearSyntenyRendering({
+  model,
+}: {
+  model: LinearSyntenyDisplayModel
+}) {
+  const highResolutionScaling = 1
+  const view = getContainingView(model)
+  const height = view.middleComparativeHeight
+  const width = view.width
+
+  const [tooltip, setTooltip] = useState('')
+  const [currX, setCurrX] = useState<number>()
+  const [currY, setCurrY] = useState<number>()
+
+  // these useCallbacks avoid new refs from being created on any mouseover, etc.
+  const k1 = useCallback(
+    (ref: HTMLCanvasElement) => model.setMouseoverCanvasRef(ref),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width],
+  )
+  const k2 = useCallback(
+    (ref: HTMLCanvasElement) => model.setMainCanvasRef(ref),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width],
+  )
+  const k3 = useCallback(
+    (ref: HTMLCanvasElement) => model.setClickMapCanvasRef(ref),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width],
+  )
+  const k4 = useCallback(
+    (ref: HTMLCanvasElement) => model.setCigarClickMapCanvasRef(ref),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width],
+  )
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <canvas
+        ref={k1}
+        width={width}
+        height={height}
+        style={{ width, height, position: 'absolute', pointerEvents: 'none' }}
+      />
+      <canvas
+        ref={k2}
+        onMouseMove={event => {
+          const ref1 = model.clickMapCanvas
+          const ref2 = model.cigarClickMapCanvas
+          if (!ref1 || !ref2) {
+            return
+          }
+          const rect = ref1.getBoundingClientRect()
+          const ctx1 = ref1.getContext('2d')
+          const ctx2 = ref2.getContext('2d')
+          if (!ctx1 || !ctx2) {
+            return
+          }
+          const { clientX, clientY } = event
+          const x = clientX - rect.left
+          const y = clientY - rect.top
+          setCurrX(clientX)
+          setCurrY(clientY)
+          const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data
+          const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data
+          const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats)
+          const id = getId(r1, g1, b1, unitMultiplier)
+          model.setMouseoverId(model.featPositions[id]?.f.id())
+          if (id === -1) {
+            setTooltip('')
+          } else if (model.featPositions[id]) {
+            const { f, cigar } = model.featPositions[id]
+            // @ts-expect-error
+            const f1 = f.toJSON() as {
+              refName: string
+              start: number
+              end: number
+              strand?: number
+              assemblyName: string
+              identity?: number
+              name?: string
+              mate: {
+                start: number
+                end: number
+                refName: string
+                name: string
+              }
+            }
+            const f2 = f1.mate
+            const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length)
+            const cigarIdx = getId(r2, g2, b2, unitMultiplier2)
+            const l1 = f1.end - f1.start
+            const l2 = f2.end - f2.start
+            const identity = f1.identity
+            const n1 = f1.name
+            const n2 = f2.name
+            const tooltip = [
+              `Loc1: ${assembleLocString(f1)}`,
+              `Loc2: ${assembleLocString(f2)}`,
+              `Inverted: ${f1.strand === -1}`,
+              `Query len: ${l1}`,
+              `Target len: ${l2}`,
+            ]
+            if (identity) {
+              tooltip.push(`Identity: ${identity}`)
+            }
+
+            if (cigar[cigarIdx]) {
+              tooltip.push(
+                `CIGAR operator: ${cigar[cigarIdx]}${cigar[cigarIdx + 1]}`,
+              )
+            }
+            if (n1 && n2) {
+              tooltip.push(`Name 1: ${n1}`, `Name 2: ${n2}`)
+            }
+            setTooltip(tooltip.join('<br/>'))
+          }
+        }}
+        onMouseLeave={() => model.setMouseoverId(undefined)}
+        onClick={event => {
+          const ref1 = model.clickMapCanvas
+          const ref2 = model.cigarClickMapCanvas
+          if (!ref1 || !ref2) {
+            return
+          }
+          const rect = ref1.getBoundingClientRect()
+          const ctx1 = ref1.getContext('2d')
+          const ctx2 = ref2.getContext('2d')
+          if (!ctx1 || !ctx2) {
+            return
+          }
+          const x = event.clientX - rect.left
+          const y = event.clientY - rect.top
+          const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data
+          const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats)
+          const id = getId(r1, g1, b1, unitMultiplier)
+          const f = model.featPositions[id]
+          if (!f) {
+            return
+          }
+          model.setClickId(f.f.id())
+          const session = getSession(model)
+          if (isSessionModelWithWidgets(session)) {
+            session.showWidget(
+              session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
+                featureData: {
+                  feature1: f.f.toJSON(),
+                  feature2: f.f.get('mate'),
+                },
+              }),
+            )
+          }
+        }}
+        data-testid="synteny_canvas"
+        style={{ width, height, position: 'absolute' }}
+        width={width * highResolutionScaling}
+        height={height * highResolutionScaling}
+      />
+      <canvas
+        ref={k3}
+        style={{
+          imageRendering: 'pixelated',
+          pointerEvents: 'none',
+          visibility: 'hidden',
+          position: 'absolute',
+        }}
+        width={width}
+        height={height}
+      />
+      <canvas
+        ref={k4}
+        style={{
+          imageRendering: 'pixelated',
+          pointerEvents: 'none',
+          visibility: 'hidden',
+          position: 'absolute',
+        }}
+        width={width}
+        height={height}
+      />
+      {model.mouseoverId && tooltip && currX && currY ? (
+        <SyntenyTooltip x={currX} y={currY} title={tooltip} />
+      ) : null}
+    </div>
+  )
+})

package/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo, useState } from 'react'
+import { observer } from 'mobx-react'
+import { Portal, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { usePopper } from 'react-popper'
+import { SanitizedHTML } from '@jbrowse/core/ui'
+
+function round(value: number) {
+  return Math.round(value * 1e5) / 1e5
+}
+
+const useStyles = makeStyles()(theme => ({
+  // these styles come from
+  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+  tooltip: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    backgroundColor: alpha(theme.palette.grey[700], 0.9),
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.common.white,
+    fontFamily: theme.typography.fontFamily,
+    padding: '4px 8px',
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: `${round(14 / 10)}em`,
+    maxWidth: 300,
+    wordWrap: 'break-word',
+  },
+}))
+
+const SyntenyTooltip = observer(function ({
+  x,
+  y,
+  title,
+}: {
+  x: number
+  y: number
+  title: string
+}) {
+  const [width, setWidth] = useState(0)
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
+  const { classes } = useStyles()
+
+  // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+  const virtElement = useMemo(
+    () => ({
+      getBoundingClientRect: () => {
+        return {
+          top: y,
+          left: x + width / 2,
+          bottom: y,
+          right: x,
+          width: 0,
+          height: 0,
+          x,
+          y,
+          toJSON() {},
+        }
+      },
+    }),
+    [x, y, width],
+  )
+  const { styles, attributes } = usePopper(virtElement, anchorEl)
+
+  return title ? (
+    <Portal>
+      <div
+        ref={ref => {
+          setWidth(ref?.getBoundingClientRect().width || 0)
+          setAnchorEl(ref)
+        }}
+        className={classes.tooltip}
+        // zIndex needed to go over widget drawer
+        style={{ ...styles.popper, zIndex: 100000 }}
+        {...attributes.popper}
+      >
+        <SanitizedHTML html={title} />
+      </div>
+    </Portal>
+  ) : null
+})
+
+export default SyntenyTooltip

package/src/LinearSyntenyDisplay/components/util.ts

@@ -0,0 +1,142 @@
+import { doesIntersect2, Feature } from '@jbrowse/core/util'
+
+interface Pos {
+  offsetPx: number
+}
+
+interface FeatPos {
+  p11: Pos
+  p12: Pos
+  p21: Pos
+  p22: Pos
+  f: Feature
+  cigar: string[]
+}
+
+export function drawMatchSimple({
+  feature,
+  ctx,
+  offsets,
+  cb,
+  height,
+  drawCurves,
+  oobLimit,
+  viewWidth,
+  hideTiny,
+}: {
+  feature: FeatPos
+  ctx: CanvasRenderingContext2D
+  offsets: number[]
+  oobLimit: number
+  viewWidth: number
+  cb: (ctx: CanvasRenderingContext2D) => void
+  height: number
+  drawCurves?: boolean
+  hideTiny?: boolean
+}) {
+  const { p11, p12, p21, p22 } = feature
+
+  const x11 = p11.offsetPx - offsets[0]
+  const x12 = p12.offsetPx - offsets[0]
+  const x21 = p21.offsetPx - offsets[1]
+  const x22 = p22.offsetPx - offsets[1]
+
+  const l1 = Math.abs(x12 - x11)
+  const l2 = Math.abs(x22 - x21)
+  const y1 = 0
+  const y2 = height
+  const mid = (y2 - y1) / 2
+  const minX = Math.min(x21, x22)
+  const maxX = Math.max(x21, x22)
+
+  if (!doesIntersect2(minX, maxX, -oobLimit, viewWidth + oobLimit)) {
+    return
+  }
+
+  // drawing a line if the results are thin: drawing a line results in much
+  // less pixellation than filling in a thin polygon
+  if (l1 <= 1 && l2 <= 1) {
+    // hideTiny can be used to avoid drawing mouseover for thin lines in this
+    // case
+    if (!hideTiny) {
+      ctx.beginPath()
+      ctx.moveTo(x11, y1)
+      if (drawCurves) {
+        ctx.bezierCurveTo(x11, mid, x21, mid, x21, y2)
+      } else {
+        ctx.lineTo(x21, y2)
+      }
+      ctx.stroke()
+    }
+  } else {
+    draw(ctx, x11, x12, y1, x22, x21, y2, mid, drawCurves)
+    cb(ctx)
+  }
+}
+
+export function draw(
+  ctx: CanvasRenderingContext2D,
+  x1: number,
+  x2: number,
+  y1: number,
+  x3: number,
+  x4: number,
+  y2: number,
+  mid: number,
+  drawCurves?: boolean,
+) {
+  if (drawCurves) {
+    drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid)
+  } else {
+    drawBox(ctx, x1, x2, y1, x3, x4, y2)
+  }
+}
+
+export function drawBox(
+  ctx: CanvasRenderingContext2D,
+  x1: number,
+  x2: number,
+  y1: number,
+  x3: number,
+  x4: number,
+  y2: number,
+) {
+  ctx.beginPath()
+  ctx.moveTo(x1, y1)
+  ctx.lineTo(x2, y1)
+  ctx.lineTo(x3, y2)
+  ctx.lineTo(x4, y2)
+  ctx.closePath()
+  ctx.fill()
+}
+
+export function drawBezierBox(
+  ctx: CanvasRenderingContext2D,
+  x1: number,
+  x2: number,
+  y1: number,
+  x3: number,
+  x4: number,
+  y2: number,
+  mid: number,
+) {
+  const len1 = Math.abs(x1 - x2)
+  const len2 = Math.abs(x1 - x2)
+
+  // heuristic to not draw hourglass inversions with bezier curves when they
+  // are thin and far apart because it results in areas that are not drawn well
+  // demo https://codesandbox.io/s/fast-glitter-q3b1or?file=/src/index.js
+  if (len1 < 5 && len2 < 5 && x2 < x1 && Math.abs(x1 - x3) > 100) {
+    const tmp = x1
+    x1 = x2
+    x2 = tmp
+  }
+  ctx.beginPath()
+  ctx.moveTo(x1, y1)
+  ctx.lineTo(x2, y1)
+  ctx.bezierCurveTo(x2, mid, x3, mid, x3, y2)
+  ctx.lineTo(x4, y2)
+  ctx.bezierCurveTo(x4, mid, x1, mid, x1, y1)
+  ctx.closePath()
+  ctx.fill()
+}

package/src/LinearSyntenyDisplay/configSchemaF.ts

@@ -0,0 +1,38 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import PluginManager from '@jbrowse/core/PluginManager'
+import baseConfigFactory from '../LinearComparativeDisplay/configSchemaF'
+
+/**
+ * #config LinearSyntenyDisplay
+ */
+function configSchemaFactory(pluginManager: PluginManager) {
+  return ConfigurationSchema(
+    'LinearSyntenyDisplay',
+    {
+      /**
+       * #slot
+       * currently unused
+       */
+      trackIds: {
+        type: 'stringArray',
+        defaultValue: [],
+      },
+
+      /**
+       * #slot
+       * currently unused
+       */
+      middle: { type: 'boolean', defaultValue: true },
+    },
+    {
+      /**
+       * #baseConfiguration
+       * this refers to the LinearComparativeDisplay
+       */
+      baseConfiguration: baseConfigFactory(pluginManager),
+      explicitlyTyped: true,
+    },
+  )
+}
+
+export default configSchemaFactory