@jbrowse/plugin-dotplot-view 2.6.1 → 2.6.3

package/src/DotplotView/components/Axes.tsx

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

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

@@ -1,163 +0,0 @@
-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}
-    </>
-  )
-})