@jbrowse/plugin-dotplot-view 2.6.1 → 2.6.2

package/src/DotplotView/components/DotplotView.tsx

@@ -1,348 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { LoadingEllipses, Menu, ResizeHandle } from '@jbrowse/core/ui'
-import { observer } from 'mobx-react'
-import { transaction } from 'mobx'
-import { makeStyles } from 'tss-react/mui'
-import normalizeWheel from 'normalize-wheel'
-
-// locals
-import { DotplotViewModel } from '../model'
-import ImportForm from './ImportForm'
-import Header from './Header'
-import Grid from './Grid'
-import { HorizontalAxis, VerticalAxis } from './Axes'
-import { TooltipWhereClicked, TooltipWhereMouseovered } from './DotplotTooltip'
-
-const blank = { left: 0, top: 0, width: 0, height: 0 }
-
-const useStyles = makeStyles()(theme => ({
-  spacer: {
-    gridColumn: '1/2',
-    gridRow: '2/2',
-  },
-  root: {
-    position: 'relative',
-    marginBottom: theme.spacing(1),
-    overflow: 'hidden',
-  },
-
-  container: {
-    display: 'grid',
-    padding: 5,
-    position: 'relative',
-  },
-  overlay: {
-    pointerEvents: 'none',
-    overflow: 'hidden',
-    display: 'flex',
-    width: '100%',
-    gridRow: '1/2',
-    gridColumn: '2/2',
-    zIndex: 100, // needs to be below controls
-    '& path': {
-      cursor: 'crosshair',
-      fill: 'none',
-    },
-  },
-
-  content: {
-    position: 'relative',
-    gridColumn: '2/2',
-    gridRow: '1/2',
-  },
-
-  resizeHandle: {
-    height: 4,
-    background: '#ccc',
-    boxSizing: 'border-box',
-    borderTop: '1px solid #fafafa',
-  },
-}))
-
-type Coord = [number, number] | undefined
-type Rect = { left: number; top: number }
-
-// produces offsetX/offsetY coordinates from a clientX and an element's
-// getBoundingClientRect
-function getOffset(coord: Coord, rect: Rect) {
-  return coord && ([coord[0] - rect.left, coord[1] - rect.top] as Coord)
-}
-
-const RenderedComponent = observer(({ model }: { model: DotplotViewModel }) => {
-  const { classes } = useStyles()
-  return (
-    <div className={classes.overlay}>
-      {model.tracks.map(track => {
-        const [display] = track.displays
-        const { RenderingComponent } = display
-        return RenderingComponent ? (
-          <RenderingComponent
-            key={track.configuration.trackId}
-            model={display}
-          />
-        ) : null
-      })}
-    </div>
-  )
-})
-
-const DotplotViewInternal = observer(function ({
-  model,
-}: {
-  model: DotplotViewModel
-}) {
-  const { classes } = useStyles()
-  const [mousecurrClient, setMouseCurrClient] = useState<Coord>()
-  const [mousedownClient, setMouseDownClient] = useState<Coord>()
-  const [mouseOvered, setMouseOvered] = useState(false)
-  const [mouseupClient, setMouseUpClient] = useState<Coord>()
-  const ref = useRef<HTMLDivElement>(null)
-  const root = useRef<HTMLDivElement>(null)
-  const distanceX = useRef(0)
-  const distanceY = useRef(0)
-  const scheduled = useRef(false)
-  const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = useState(false)
-  const svg = ref.current?.getBoundingClientRect() || blank
-  const rootRect = ref.current?.getBoundingClientRect() || blank
-  const mousedown = getOffset(mousedownClient, svg)
-  const mousecurr = getOffset(mousecurrClient, svg)
-  const mouseup = getOffset(mouseupClient, svg)
-  const mouserectClient = mouseupClient || mousecurrClient
-  const mouserect = mouseup || mousecurr
-  const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0
-  const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0
-  const { hview, vview, wheelMode, cursorMode } = model
-
-  const validPan =
-    (cursorMode === 'move' && !ctrlKeyWasUsed) ||
-    (cursorMode === 'crosshair' && ctrlKeyWasUsed)
-
-  const validSelect =
-    (cursorMode === 'move' && ctrlKeyWasUsed) ||
-    (cursorMode === 'crosshair' && !ctrlKeyWasUsed)
-
-  // use non-React wheel handler to properly prevent body scrolling
-  useEffect(() => {
-    function onWheel(origEvent: WheelEvent) {
-      const event = normalizeWheel(origEvent)
-      origEvent.preventDefault()
-
-      distanceX.current += event.pixelX
-      distanceY.current -= event.pixelY
-      if (!scheduled.current) {
-        scheduled.current = true
-
-        window.requestAnimationFrame(() => {
-          transaction(() => {
-            if (wheelMode === 'pan') {
-              hview.scroll(distanceX.current / 3)
-              vview.scroll(distanceY.current / 10)
-            } else if (wheelMode === 'zoom') {
-              if (
-                Math.abs(distanceY.current) > Math.abs(distanceX.current) * 2 &&
-                mousecurr
-              ) {
-                const val = distanceY.current < 0 ? 1.1 : 0.9
-                hview.zoomTo(hview.bpPerPx * val, mousecurr[0])
-                vview.zoomTo(
-                  vview.bpPerPx * val,
-                  rootRect.height - mousecurr[1],
-                )
-              }
-            }
-          })
-          scheduled.current = false
-          distanceX.current = 0
-          distanceY.current = 0
-        })
-      }
-    }
-    if (ref.current) {
-      const curr = ref.current
-      curr.addEventListener('wheel', onWheel)
-      return () => curr.removeEventListener('wheel', onWheel)
-    }
-    return () => {}
-  }, [hview, vview, wheelMode, mousecurr, rootRect.height])
-
-  useEffect(() => {
-    function globalMouseMove(event: MouseEvent) {
-      setMouseCurrClient([event.clientX, event.clientY])
-
-      if (mousecurrClient && mousedownClient && validPan && !mouseupClient) {
-        hview.scroll(-event.clientX + mousecurrClient[0])
-        vview.scroll(event.clientY - mousecurrClient[1])
-      }
-    }
-
-    window.addEventListener('mousemove', globalMouseMove)
-    return () => window.removeEventListener('mousemove', globalMouseMove)
-  }, [
-    validPan,
-    mousecurrClient,
-    mousedownClient,
-    cursorMode,
-    ctrlKeyWasUsed,
-    mouseupClient,
-    hview,
-    vview,
-  ])
-
-  // detect a mouseup after a mousedown was submitted, autoremoves mouseup
-  // once that single mouseup is set
-  useEffect(() => {
-    function globalMouseUp(event: MouseEvent) {
-      if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
-        setMouseUpClient([event.clientX, event.clientY])
-      } else {
-        setMouseDownClient(undefined)
-      }
-    }
-
-    if (mousedown && !mouseup) {
-      window.addEventListener('mouseup', globalMouseUp, true)
-      return () => window.removeEventListener('mouseup', globalMouseUp, true)
-    }
-    return () => {}
-  }, [
-    validSelect,
-    mousedown,
-    mousecurr,
-    mouseup,
-    xdistance,
-    ydistance,
-    ctrlKeyWasUsed,
-    cursorMode,
-  ])
-
-  return (
-    <div>
-      <Header
-        model={model}
-        selection={
-          !validSelect || !(mousedown && mouserect)
-            ? undefined
-            : {
-                width: Math.abs(xdistance),
-                height: Math.abs(ydistance),
-              }
-        }
-      />
-      <div
-        ref={root}
-        className={classes.root}
-        onMouseLeave={() => setMouseOvered(false)}
-        onMouseEnter={() => setMouseOvered(true)}
-      >
-        <div className={classes.container}>
-          <VerticalAxis model={model} />
-          <HorizontalAxis model={model} />
-          <div ref={ref} className={classes.content}>
-            {mouseOvered && validSelect ? (
-              <TooltipWhereMouseovered
-                model={model}
-                mouserect={mouserect}
-                mouserectClient={mouserectClient}
-                xdistance={xdistance}
-                ydistance={ydistance}
-              />
-            ) : null}
-            {validSelect ? (
-              <TooltipWhereClicked
-                model={model}
-                mousedown={mousedown}
-                mousedownClient={mousedownClient}
-                xdistance={xdistance}
-                ydistance={ydistance}
-              />
-            ) : null}
-            <div
-              style={{ cursor: ctrlKeyWasUsed ? 'pointer' : cursorMode }}
-              onMouseDown={event => {
-                if (event.button === 0) {
-                  const { clientX, clientY } = event
-                  setMouseDownClient([clientX, clientY])
-                  setMouseCurrClient([clientX, clientY])
-                  setCtrlKeyWasUsed(event.ctrlKey)
-                }
-              }}
-            >
-              <Grid model={model}>
-                {validSelect && mousedown && mouserect ? (
-                  <rect
-                    fill="rgba(255,0,0,0.3)"
-                    x={Math.min(mouserect[0], mousedown[0])}
-                    y={Math.min(mouserect[1], mousedown[1])}
-                    width={Math.abs(xdistance)}
-                    height={Math.abs(ydistance)}
-                  />
-                ) : null}
-              </Grid>
-            </div>
-            <div className={classes.spacer} />
-          </div>
-          <RenderedComponent model={model} />
-          <Menu
-            open={Boolean(mouseup)}
-            onMenuItemClick={(_, callback) => {
-              callback()
-              setMouseUpClient(undefined)
-              setMouseDownClient(undefined)
-            }}
-            onClose={() => {
-              setMouseUpClient(undefined)
-              setMouseDownClient(undefined)
-            }}
-            anchorReference="anchorPosition"
-            anchorPosition={
-              mouseupClient
-                ? {
-                    top: mouseupClient[1] + 50,
-                    left: mouseupClient[0] + 50,
-                  }
-                : undefined
-            }
-            style={{ zIndex: 10000 }}
-            menuItems={[
-              {
-                label: 'Zoom in',
-                onClick: () => {
-                  if (mousedown && mouseup) {
-                    model.zoomIn(mousedown, mouseup)
-                  }
-                },
-              },
-              {
-                label: 'Open linear synteny view',
-                onClick: () => {
-                  if (mousedown && mouseup) {
-                    model.onDotplotView(mousedown, mouseup)
-                  }
-                },
-              },
-            ]}
-          />
-        </div>
-        <ResizeHandle
-          onDrag={n => model.setHeight(model.height + n)}
-          className={classes.resizeHandle}
-        />
-      </div>
-    </div>
-  )
-})
-const DotplotView = observer(({ model }: { model: DotplotViewModel }) => {
-  const { initialized, loading, error } = model
-
-  if ((!initialized && !loading) || error) {
-    return <ImportForm model={model} />
-  }
-
-  if (loading) {
-    return <LoadingEllipses variant="h6" />
-  }
-
-  return <DotplotViewInternal model={model} />
-})
-
-export default DotplotView

package/src/DotplotView/components/DotplotWarnings.tsx

@@ -1,26 +0,0 @@
-import React, { lazy, useState } from 'react'
-import { Alert, Button } from '@mui/material'
-import { observer } from 'mobx-react'
-
-// locals
-import { DotplotViewModel } from '../model'
-
-// lazy components
-const WarningDialog = lazy(() => import('./WarningDialog'))
-
-export default observer(function ({ model }: { model: DotplotViewModel }) {
-  const trackWarnings = model.tracks.filter(t => t.displays[0].warnings?.length)
-  const [shown, setShown] = useState(false)
-  return trackWarnings.length ? (
-    <Alert severity="warning">
-      Warnings during render{' '}
-      <Button onClick={() => setShown(true)}>More info</Button>
-      {shown ? (
-        <WarningDialog
-          trackWarnings={trackWarnings}
-          handleClose={() => setShown(false)}
-        />
-      ) : null}
-    </Alert>
-  ) : null
-})

package/src/DotplotView/components/ExportSvgDialog.tsx

@@ -1,129 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  Checkbox,
-  CircularProgress,
-  DialogActions,
-  DialogContent,
-  FormControlLabel,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
-import { ExportSvgOptions } from '../model'
-import { getSession, useLocalStorage } from '@jbrowse/core/util'
-
-function LoadingMessage() {
-  return (
-    <div>
-      <CircularProgress size={20} style={{ marginRight: 20 }} />
-      <Typography display="inline">Creating SVG</Typography>
-    </div>
-  )
-}
-
-function useSvgLocal<T>(key: string, val: T) {
-  return useLocalStorage('svg-' + key, val)
-}
-
-export default function ExportSvgDlg({
-  model,
-  handleClose,
-}: {
-  model: { exportSvg(opts: ExportSvgOptions): Promise<void> }
-  handleClose: () => void
-}) {
-  const session = getSession(model)
-  const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
-  const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<unknown>()
-  const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg')
-  const [themeName, setThemeName] = useSvgLocal(
-    'theme',
-    session.themeName || 'default',
-  )
-  return (
-    <Dialog open onClose={handleClose} title="Export SVG">
-      <DialogContent>
-        {error ? (
-          <ErrorMessage error={error} />
-        ) : loading ? (
-          <LoadingMessage />
-        ) : null}
-        <TextField
-          helperText="filename"
-          value={filename}
-          onChange={event => setFilename(event.target.value)}
-        />
-        <br />
-        {session.allThemes ? (
-          <TextField
-            select
-            label="Theme"
-            value={themeName}
-            onChange={event => setThemeName(event.target.value)}
-          >
-            {Object.entries(session.allThemes()).map(([key, val]) => (
-              <MenuItem key={key} value={key}>
-                {
-                  // @ts-expect-error
-                  val.name || '(Unknown name)'
-                }
-              </MenuItem>
-            ))}
-          </TextField>
-        ) : null}
-        {offscreenCanvas ? (
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={rasterizeLayers}
-                onChange={() => setRasterizeLayers(val => !val)}
-              />
-            }
-            label="Rasterize canvas based tracks? File may be much larger if this is turned off"
-          />
-        ) : (
-          <Typography>
-            Note: rasterizing layers not yet supported in this browser, so SVG
-            size may be large
-          </Typography>
-        )}
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={() => handleClose()}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          type="submit"
-          onClick={async () => {
-            setLoading(true)
-            setError(undefined)
-            try {
-              await model.exportSvg({
-                rasterizeLayers,
-                filename,
-                themeName,
-              })
-              handleClose()
-            } catch (e) {
-              console.error(e)
-              setError(e)
-              setLoading(false)
-            }
-          }}
-        >
-          Submit
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/DotplotView/components/Grid.tsx

@@ -1,112 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { useTheme } from '@mui/material'
-
-// locals
-import { DotplotViewModel } from '../model'
-
-export const GridRaw = observer(function ({
-  model,
-  children,
-}: {
-  model: DotplotViewModel
-  children?: React.ReactNode
-}) {
-  const { viewWidth, viewHeight, hview, vview } = model
-  const hblocks = hview.dynamicBlocks.contentBlocks
-  const vblocks = vview.dynamicBlocks.contentBlocks
-  if (!hblocks.length || !vblocks.length) {
-    return null
-  }
-  const htop = hview.displayedRegionsTotalPx - hview.offsetPx
-  const vtop = vview.displayedRegionsTotalPx - vview.offsetPx
-  const hbottom = hblocks[0].offsetPx - hview.offsetPx
-  const vbottom = vblocks[0].offsetPx - vview.offsetPx
-  const theme = useTheme()
-  const stroke = theme.palette.divider
-
-  // Uses math.max/min avoid making very large SVG rect offscreen element,
-  // which can sometimes fail to draw
-  const rx = Math.max(hbottom, 0)
-  const ry = Math.max(viewHeight - vtop, 0)
-  const w = Math.min(htop - hbottom, viewWidth)
-  const h = Math.min(viewHeight - vbottom - ry, viewHeight)
-
-  let lastx = Infinity
-  let lasty = Infinity
-  return (
-    <>
-      <rect
-        x={rx}
-        y={ry}
-        width={w}
-        height={h}
-        fill={theme.palette.background.default}
-      />
-      <g>
-        {hblocks.map(region => {
-          const x = region.offsetPx - hview.offsetPx
-          const render = Math.floor(x) !== Math.floor(lastx)
-          if (render) {
-            lastx = x
-          }
-          return render ? (
-            <line
-              key={JSON.stringify(region)}
-              x1={x}
-              y1={0}
-              x2={x}
-              y2={viewHeight}
-              stroke={stroke}
-            />
-          ) : null
-        })}
-        {vblocks.map(region => {
-          const y = viewHeight - (region.offsetPx - vview.offsetPx)
-          const render = Math.floor(y) !== Math.floor(lasty)
-          if (render) {
-            lasty = y
-          }
-          return render ? (
-            <line
-              key={JSON.stringify(region)}
-              x1={0}
-              y1={y}
-              x2={viewWidth}
-              y2={y}
-              stroke={stroke}
-            />
-          ) : null
-        })}
-        <line x1={htop} y1={0} x2={htop} y2={viewHeight} stroke={stroke} />
-        <line
-          x1={0}
-          y1={viewHeight - vtop}
-          x2={viewWidth}
-          y2={viewHeight - vtop}
-          stroke={stroke}
-        />
-      </g>
-      {children}
-    </>
-  )
-})
-
-export default function Grid({
-  model,
-  children,
-}: {
-  model: DotplotViewModel
-  children?: React.ReactNode
-}) {
-  const { viewWidth, viewHeight } = model
-  return (
-    <svg
-      width={viewWidth}
-      height={viewHeight}
-      style={{ background: 'rgba(0,0,0,0.12)' }}
-    >
-      <GridRaw model={model}>{children}</GridRaw>
-    </svg>
-  )
-}