@jbrowse/plugin-dotplot-view 2.6.1

package/src/DotplotView/components/Axes.tsx

@@ -0,0 +1,246 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { getSnapshot } from 'mobx-state-tree'
+import { getTickDisplayStr } from '@jbrowse/core/util'
+import { bpToPx } from '@jbrowse/core/util/Base1DUtils'
+import { useTheme } from '@mui/material'
+
+// locals
+import { getBlockLabelKeysToHide } from './util'
+import { DotplotViewModel } from '../model'
+
+const useStyles = makeStyles()(() => ({
+  vtext: {
+    gridColumn: '1/2',
+    gridRow: '1/2',
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+  htext: {
+    gridColumn: '2/2',
+    gridRow: '2/2',
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+}))
+
+export const HorizontalAxis = observer(function ({
+  model,
+}: {
+  model: DotplotViewModel
+}) {
+  const { viewWidth, borderY } = model
+  const { classes } = useStyles()
+  return (
+    <svg width={viewWidth} height={borderY} className={classes.htext}>
+      <HorizontalAxisRaw model={model} />
+    </svg>
+  )
+})
+
+export const HorizontalAxisRaw = observer(function ({
+  model,
+}: {
+  model: DotplotViewModel
+}) {
+  const { viewWidth, borderX, borderY, hview, htextRotation, hticks } = model
+  const { offsetPx, width, dynamicBlocks, bpPerPx } = hview
+  const dblocks = dynamicBlocks.contentBlocks
+  const hide = getBlockLabelKeysToHide(dblocks, viewWidth, offsetPx)
+  const theme = useTheme()
+  const hviewSnap = {
+    ...getSnapshot(hview),
+    width,
+    staticBlocks: hview.staticBlocks,
+  }
+
+  return (
+    <>
+      {dblocks
+        .filter(region => !hide.has(region.key))
+        .map(region => {
+          const x = region.offsetPx
+          const y = 0
+          const xoff = Math.floor(x - hview.offsetPx)
+
+          return (
+            <text
+              transform={`rotate(${htextRotation},${xoff},${y})`}
+              key={JSON.stringify(region)}
+              x={xoff}
+              y={y + 1}
+              fill={theme.palette.text.primary}
+              fontSize={11}
+              dominantBaseline="hanging"
+              textAnchor="end"
+            >
+              {region.refName}
+            </text>
+          )
+        })}
+      {hticks.map(tick => {
+        const x =
+          (bpToPx({
+            refName: tick.refName,
+            coord: tick.base,
+            self: hviewSnap,
+          })?.offsetPx || 0) - offsetPx
+        return (
+          <line
+            key={`line-${JSON.stringify(tick)}`}
+            x1={x}
+            x2={x}
+            y1={0}
+            y2={tick.type === 'major' ? 6 : 4}
+            strokeWidth={1}
+            stroke={theme.palette.divider}
+          />
+        )
+      })}
+      {hticks
+        .filter(tick => tick.type === 'major')
+        .map(tick => {
+          const x =
+            (bpToPx({
+              refName: tick.refName,
+              coord: tick.base,
+              self: hviewSnap,
+            })?.offsetPx || 0) - offsetPx
+          const y = 0
+          return x > 10 ? (
+            <text
+              x={x - 7}
+              y={y}
+              transform={`rotate(${htextRotation},${x},${y})`}
+              key={`text-${JSON.stringify(tick)}`}
+              fill={theme.palette.text.primary}
+              fontSize={11}
+              dominantBaseline="middle"
+              textAnchor="end"
+            >
+              {getTickDisplayStr(tick.base + 1, bpPerPx)}
+            </text>
+          ) : null
+        })}
+      <text
+        y={borderY - 12}
+        x={(viewWidth - borderX) / 2}
+        fill={theme.palette.text.primary}
+        textAnchor="middle"
+        fontSize={11}
+        dominantBaseline="hanging"
+      >
+        {hview.assemblyNames.join(',')}
+      </text>
+    </>
+  )
+})
+
+export const VerticalAxis = observer(function ({
+  model,
+}: {
+  model: DotplotViewModel
+}) {
+  const { borderX, viewHeight } = model
+  const { classes } = useStyles()
+  return (
+    <svg className={classes.vtext} width={borderX} height={viewHeight}>
+      <VerticalAxisRaw model={model} />
+    </svg>
+  )
+})
+
+export const VerticalAxisRaw = observer(function ({
+  model,
+}: {
+  model: DotplotViewModel
+}) {
+  const { viewHeight, borderX, borderY, vview, vtextRotation, vticks } = model
+  const { offsetPx, width, dynamicBlocks, bpPerPx } = vview
+  const dblocks = dynamicBlocks.contentBlocks
+  const hide = getBlockLabelKeysToHide(dblocks, viewHeight, offsetPx)
+  const theme = useTheme()
+  const vviewSnap = {
+    ...getSnapshot(vview),
+    width,
+    staticBlocks: vview.staticBlocks,
+  }
+  return (
+    <>
+      {dblocks
+        .filter(region => !hide.has(region.key))
+        .map(region => {
+          const y = region.offsetPx
+          const x = borderX
+          const yoff = Math.floor(viewHeight - y + offsetPx)
+
+          return (
+            <text
+              transform={`rotate(${vtextRotation},${x},${y})`}
+              key={JSON.stringify(region)}
+              x={x}
+              y={yoff}
+              fill={theme.palette.text.primary}
+              fontSize={11}
+              textAnchor="end"
+            >
+              {region.refName}
+            </text>
+          )
+        })}
+      {vticks.map(tick => {
+        const y =
+          (bpToPx({
+            refName: tick.refName,
+            coord: tick.base,
+            self: vviewSnap,
+          })?.offsetPx || 0) - offsetPx
+        return (
+          <line
+            key={`line-${JSON.stringify(tick)}`}
+            y1={viewHeight - y}
+            y2={viewHeight - y}
+            x1={borderX}
+            x2={borderX - (tick.type === 'major' ? 6 : 4)}
+            strokeWidth={1}
+            stroke={theme.palette.divider}
+          />
+        )
+      })}
+      {vticks
+        .filter(tick => tick.type === 'major')
+        .map(tick => {
+          const y =
+            (bpToPx({
+              refName: tick.refName,
+              coord: tick.base,
+              self: vviewSnap,
+            })?.offsetPx || 0) - offsetPx
+          return y > 10 ? (
+            <text
+              y={viewHeight - y - 3}
+              x={borderX - 7}
+              key={`text-${JSON.stringify(tick)}`}
+              textAnchor="end"
+              fill={theme.palette.text.primary}
+              dominantBaseline="hanging"
+              fontSize={11}
+            >
+              {getTickDisplayStr(tick.base + 1, bpPerPx)}
+            </text>
+          ) : null
+        })}
+      <text
+        y={(viewHeight - borderY) / 2}
+        x={12}
+        fill={theme.palette.text.primary}
+        transform={`rotate(-90,12,${(viewHeight - borderY) / 2})`}
+        textAnchor="middle"
+        fontSize={11}
+      >
+        {vview.assemblyNames.join(',')}
+      </text>
+    </>
+  )
+})

package/src/DotplotView/components/CursorIcon.tsx

@@ -0,0 +1,24 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import React from 'react'
+
+export function CursorMove(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path
+        fill="currentColor"
+        d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"
+      />
+    </SvgIcon>
+  )
+}
+
+export function CursorMouse(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path
+        fill="currentColor"
+        d="M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"
+      />
+    </SvgIcon>
+  )
+}

package/src/DotplotView/components/DotplotTooltip.tsx

@@ -0,0 +1,163 @@
+import React, { useMemo, useRef, useState } from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import { DotplotViewModel } from '../model'
+import { locstr } from './util'
+import { Portal, alpha } from '@mui/material'
+import { usePopper } from 'react-popper'
+
+export 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',
+  },
+}))
+
+type Coord = [number, number] | undefined
+const blank = { left: 0, top: 0, width: 0, height: 0 }
+
+export const TooltipWhereMouseovered = observer(function ({
+  model,
+  mouserect,
+  mouserectClient,
+  xdistance,
+  ydistance,
+}: {
+  model: DotplotViewModel
+  mouserect: Coord
+  mouserectClient: Coord
+  xdistance: number
+  ydistance: number
+}) {
+  const { classes } = useStyles()
+  const { hview, vview, viewHeight } = model
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
+  const rect = ref.current?.getBoundingClientRect() || blank
+  const offset = 6
+  const w = rect.height + offset * 2
+
+  // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+  const virtElement = useMemo(
+    () => ({
+      getBoundingClientRect: () => {
+        const x = offset + (mouserectClient?.[0] || 0) - (xdistance < 0 ? w : 0)
+        const y = offset + (mouserectClient?.[1] || 0) - (ydistance < 0 ? w : 0)
+        return {
+          top: y,
+          left: x,
+          bottom: y,
+          right: x,
+          width: 0,
+          height: 0,
+          x,
+          y,
+          toJSON() {},
+        }
+      },
+    }),
+    [mouserectClient, xdistance, ydistance, w],
+  )
+  const { styles, attributes } = usePopper(virtElement, anchorEl, {
+    placement: xdistance < 0 ? 'left' : 'right',
+  })
+  return (
+    <>
+      {mouserect ? (
+        <Portal>
+          <div
+            ref={setAnchorEl}
+            className={classes.tooltip}
+            // zIndex needed to go over widget drawer
+            style={{ ...styles.popper, zIndex: 100000 }}
+            {...attributes.popper}
+          >
+            {`x - ${locstr(mouserect[0], hview)}`}
+            <br />
+            {`y - ${locstr(viewHeight - mouserect[1], vview)}`}
+            <br />
+          </div>
+        </Portal>
+      ) : null}
+    </>
+  )
+})
+
+export const TooltipWhereClicked = observer(function ({
+  model,
+  mousedown,
+  mousedownClient,
+  xdistance,
+  ydistance,
+}: {
+  model: DotplotViewModel
+  mousedown: Coord
+  mousedownClient: Coord
+  xdistance: number
+  ydistance: number
+}) {
+  const { classes } = useStyles()
+  const { hview, vview, viewHeight } = model
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
+
+  // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+  const virtElement = useMemo(
+    () => ({
+      getBoundingClientRect: () => {
+        const x = (mousedownClient?.[0] || 0) - (xdistance < 0 ? 0 : 0)
+        const y = (mousedownClient?.[1] || 0) - (ydistance < 0 ? 0 : 0)
+        return {
+          top: y,
+          left: x,
+          bottom: y,
+          right: x,
+          width: 0,
+          height: 0,
+          x,
+          y,
+          toJSON() {},
+        }
+      },
+    }),
+    [mousedownClient, xdistance, ydistance],
+  )
+  const { styles, attributes } = usePopper(virtElement, anchorEl, {
+    placement: xdistance < 0 ? 'right' : 'left',
+  })
+  return (
+    <>
+      {mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (
+        <Portal>
+          <div
+            ref={setAnchorEl}
+            className={classes.tooltip}
+            // zIndex needed to go over widget drawer
+            style={{ ...styles.popper, zIndex: 100000 }}
+            {...attributes.popper}
+          >
+            {`x - ${locstr(mousedown[0], hview)}`}
+            <br />
+            {`y - ${locstr(viewHeight - mousedown[1], vview)}`}
+            <br />
+          </div>
+        </Portal>
+      ) : null}
+    </>
+  )
+})