@jbrowse/plugin-linear-comparative-view 2.6.1 → 2.6.3

package/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx

@@ -1,200 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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