@jbrowse/plugin-circular-view 2.5.0 → 2.6.2

package/src/CircularView/components/Controls.tsx

@@ -1,119 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { IconButton } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import JBrowseMenu from '@jbrowse/core/ui/Menu'
-
-// icons
-import ZoomOutIcon from '@mui/icons-material/ZoomOut'
-import ZoomInIcon from '@mui/icons-material/ZoomIn'
-import RotateLeftIcon from '@mui/icons-material/RotateLeft'
-import RotateRightIcon from '@mui/icons-material/RotateRight'
-import LockOpenIcon from '@mui/icons-material/LockOpen'
-import LockIcon from '@mui/icons-material/Lock'
-import PhotoCamera from '@mui/icons-material/PhotoCamera'
-import MoreVert from '@mui/icons-material/MoreVert'
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-
-// locals
-import { CircularViewModel } from '../models/CircularView'
-import { getSession } from '@jbrowse/core/util'
-import ExportSvgDlg from './ExportSvgDialog'
-
-const useStyles = makeStyles()(theme => ({
-  controls: {
-    position: 'absolute',
-    borderRight: `1px solid ${theme.palette.divider}`,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    left: 0,
-    top: 0,
-  },
-}))
-
-export default observer(function ({ model }: { model: CircularViewModel }) {
-  const { classes } = useStyles()
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  return (
-    <div className={classes.controls}>
-      <IconButton
-        onClick={model.zoomOutButton}
-        title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
-        disabled={model.atMaxBpPerPx || model.lockedFitToWindow}
-      >
-        <ZoomOutIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.zoomInButton}
-        disabled={model.atMinBpPerPx}
-        title="zoom in"
-      >
-        <ZoomInIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.rotateCounterClockwiseButton}
-        title="rotate counter-clockwise"
-      >
-        <RotateLeftIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.rotateClockwiseButton}
-        title="rotate clockwise"
-      >
-        <RotateRightIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.toggleFitToWindowLock}
-        title={
-          model.lockedFitToWindow
-            ? 'locked model to window size'
-            : 'unlocked model to zoom further'
-        }
-        disabled={model.tooSmallToLock}
-      >
-        {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
-      </IconButton>
-
-      <IconButton onClick={event => setAnchorEl(event.currentTarget)}>
-        <MoreVert />
-      </IconButton>
-
-      {model.hideTrackSelectorButton ? null : (
-        <IconButton
-          onClick={model.activateTrackSelector}
-          title="Open track selector"
-          data-testid="circular_track_select"
-        >
-          <TrackSelectorIcon />
-        </IconButton>
-      )}
-
-      {anchorEl ? (
-        <JBrowseMenu
-          anchorEl={anchorEl}
-          menuItems={[
-            {
-              label: 'Export SVG',
-              icon: PhotoCamera,
-              onClick: () => {
-                getSession(model).queueDialog(handleClose => [
-                  ExportSvgDlg,
-                  { model, handleClose },
-                ])
-              },
-            },
-          ]}
-          onMenuItemClick={(_event, callback) => {
-            callback()
-            setAnchorEl(null)
-          }}
-          open={Boolean(anchorEl)}
-          onClose={() => setAnchorEl(null)}
-        />
-      ) : null}
-    </div>
-  )
-})

package/src/CircularView/components/ExportSvgDialog.tsx

@@ -1,132 +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'
-
-// locals
-import { ExportSvgOptions } from '../models/CircularView'
-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/CircularView/components/ImportForm.tsx

@@ -1,68 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Container, Grid } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { getSession } from '@jbrowse/core/util'
-import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
-
-const useStyles = makeStyles()(theme => ({
-  importFormContainer: {
-    padding: theme.spacing(6),
-  },
-}))
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ImportForm = observer(({ model }: { model: any }) => {
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const { error } = model
-  const { assemblyNames, assemblyManager } = session
-  const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
-  const assembly = assemblyManager.get(selectedAsm)
-  const assemblyError = assemblyNames.length
-    ? assembly?.error
-    : 'No configured assemblies'
-  const regions = assembly?.regions || []
-  const err = assemblyError || error
-
-  return (
-    <Container className={classes.importFormContainer}>
-      {err ? (
-        <Grid container spacing={1} justifyContent="center" alignItems="center">
-          <Grid item>
-            <ErrorMessage error={err} />
-          </Grid>
-        </Grid>
-      ) : null}
-      <Grid container spacing={1} justifyContent="center" alignItems="center">
-        <Grid item>
-          <AssemblySelector
-            onChange={val => {
-              model.setError(undefined)
-              setSelectedAsm(val)
-            }}
-            session={session}
-            selected={selectedAsm}
-          />
-        </Grid>
-
-        <Grid item>
-          <Button
-            disabled={!regions?.length}
-            onClick={() => {
-              model.setError(undefined)
-              model.setDisplayedRegions(regions)
-            }}
-            variant="contained"
-            color="primary"
-          >
-            {/* if there's an error, it's not actively loading  so just display open */}
-            {regions.length || err ? 'Open' : 'Loading...'}
-          </Button>
-        </Grid>
-      </Grid>
-    </Container>
-  )
-})
-
-export default ImportForm

package/src/CircularView/components/Ruler.tsx

@@ -1,265 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import {
-  getSession,
-  polarToCartesian,
-  radToDeg,
-  assembleLocString,
-} from '@jbrowse/core/util'
-import { makeContrasting } from '@jbrowse/core/util/color'
-import { useTheme } from '@mui/material/styles'
-import { makeStyles } from 'tss-react/mui'
-
-// locals
-import {
-  Slice,
-  SliceElidedRegion,
-  SliceNonElidedRegion,
-} from '../models/slices'
-import { CircularViewModel } from '../models/CircularView'
-
-const useStyles = makeStyles()({
-  rulerLabel: {
-    fontSize: '0.8rem',
-    fontWeight: 500,
-    lineHeight: 1.6,
-    letterSpacing: '0.0075em',
-  },
-})
-
-function sliceArcPath(
-  slice: Slice,
-  radiusPx: number,
-  startBase: number,
-  endBase: number,
-) {
-  // A rx ry x-axis-rotation large-arc-flag sweep-flag x y
-  if (slice.flipped) {
-    ;[startBase, endBase] = [endBase, startBase]
-  }
-  const startXY = slice.bpToXY(startBase, radiusPx)
-  const endXY = slice.bpToXY(endBase, radiusPx)
-  const largeArc =
-    Math.abs(endBase - startBase) / slice.bpPerRadian > Math.PI ? '1' : '0'
-  const sweepFlag = '1'
-  return [
-    'M',
-    ...startXY,
-    'A',
-    radiusPx,
-    radiusPx,
-    '0',
-    largeArc,
-    sweepFlag,
-    ...endXY,
-  ].join(' ')
-}
-
-const ElisionRulerArc = observer(function ({
-  model,
-  slice,
-  region,
-}: {
-  model: CircularViewModel
-  slice: Slice
-  region: SliceElidedRegion
-}) {
-  const theme = useTheme()
-  const { radiusPx: modelRadiusPx } = model
-  const radiusPx = modelRadiusPx + 1
-  const { endRadians, startRadians } = slice
-  const startXY = polarToCartesian(radiusPx, startRadians)
-  const endXY = polarToCartesian(radiusPx, endRadians)
-  const widthPx = (endRadians - startRadians) * radiusPx
-  const largeArc = endRadians - startRadians > Math.PI ? '1' : '0'
-  // TODO: draw the elision
-  const centerRadians = (endRadians + startRadians) / 2
-  const regionCount = `[${Number(region.regions.length).toLocaleString()}]`
-  return (
-    <>
-      <RulerLabel
-        text={regionCount}
-        view={model}
-        maxWidthPx={widthPx}
-        radians={centerRadians}
-        radiusPx={radiusPx}
-        title={`${regionCount} more regions`}
-        color={theme.palette.text.primary}
-      />
-      <path
-        d={[
-          'M',
-          ...startXY,
-          'A',
-          radiusPx,
-          radiusPx,
-          '0',
-          largeArc,
-          '1',
-          ...endXY,
-        ].join(' ')}
-        stroke={theme.palette.text.secondary}
-        strokeWidth={2}
-        strokeDasharray="2,2"
-        fill="none"
-      />
-    </>
-  )
-})
-
-const RulerLabel = observer(function ({
-  view,
-  text,
-  maxWidthPx,
-  radians,
-  radiusPx,
-  title,
-  color,
-}: {
-  view: CircularViewModel
-  text: string
-  maxWidthPx: number
-  radiusPx: number
-  radians: number
-  title?: string
-  color: string
-}) {
-  const { classes } = useStyles()
-  const textXY = polarToCartesian(radiusPx + 5, radians)
-  if (!text) {
-    return null
-  }
-
-  if (text.length * 6.5 < maxWidthPx) {
-    // text is rotated parallel to the ruler arc
-    return (
-      <text
-        x={0}
-        y={0}
-        className={classes.rulerLabel}
-        textAnchor="middle"
-        dominantBaseline="baseline"
-        transform={`translate(${textXY}) rotate(${radToDeg(radians) + 90})`}
-        style={{ fill: color }}
-      >
-        {text}
-        <title>{title || text}</title>
-      </text>
-    )
-  }
-  if (maxWidthPx > 4) {
-    // text is rotated perpendicular to the ruler arc
-    const overallRotation = radToDeg(radians + view.offsetRadians - Math.PI / 2)
-    if (overallRotation >= 180) {
-      return (
-        <text
-          x={0}
-          y={0}
-          className={classes.rulerLabel}
-          textAnchor="start"
-          dominantBaseline="middle"
-          transform={`translate(${textXY}) rotate(${radToDeg(radians)})`}
-          style={{ fill: color }}
-        >
-          {text}
-          <title>{title || text}</title>
-        </text>
-      )
-    }
-    return (
-      <text
-        x={0}
-        y={0}
-        className={classes.rulerLabel}
-        textAnchor="end"
-        dominantBaseline="middle"
-        transform={`translate(${textXY}) rotate(${radToDeg(radians) + 180})`}
-        style={{ fill: color }}
-      >
-        {text}
-        <title>{title || text}</title>
-      </text>
-    )
-  }
-
-  // if you get here there is no room for the text at all
-  return null
-})
-
-const RegionRulerArc = observer(function ({
-  model,
-  slice,
-  region,
-}: {
-  model: CircularViewModel
-  slice: Slice
-  region: SliceNonElidedRegion
-}) {
-  const theme = useTheme()
-  const { radiusPx } = model
-  const { endRadians, startRadians } = slice
-  const centerRadians = (endRadians + startRadians) / 2
-  const widthPx = (endRadians - startRadians) * radiusPx
-  const session = getSession(model)
-  let color
-  const assembly = session.assemblyManager.get(region.assemblyName)
-  if (assembly) {
-    color = assembly.getRefNameColor(region.refName)
-  }
-  if (color) {
-    try {
-      color = makeContrasting(color, theme.palette.background.paper)
-    } catch (error) {
-      color = theme.palette.text.primary
-    }
-  } else {
-    color = theme.palette.text.primary
-  }
-
-  // TODO: slice flipping
-  return (
-    <>
-      <RulerLabel
-        text={region.refName}
-        view={model}
-        maxWidthPx={widthPx}
-        radians={centerRadians}
-        radiusPx={radiusPx}
-        color={color}
-      />
-      <path
-        d={sliceArcPath(slice, radiusPx + 1, region.start, region.end)}
-        stroke={color}
-        strokeWidth={2}
-        fill="none"
-      />
-    </>
-  )
-})
-
-export default observer(function ({
-  model,
-  slice,
-}: {
-  model: CircularViewModel
-  slice: Slice
-}) {
-  if (slice.region.elided) {
-    return (
-      <ElisionRulerArc
-        key={assembleLocString(slice.region.regions[0])}
-        model={model}
-        region={slice.region}
-        slice={slice}
-      />
-    )
-  }
-  return (
-    <RegionRulerArc
-      key={assembleLocString(slice.region)}
-      region={slice.region}
-      model={model}
-      slice={slice}
-    />
-  )
-})

package/src/CircularView/index.ts

@@ -1,16 +0,0 @@
-import { lazy } from 'react'
-import PluginManager from '@jbrowse/core/PluginManager'
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
-import stateModelFactory from './models/CircularView'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addViewType(
-    () =>
-      new ViewType({
-        ReactComponent: lazy(() => import('./components/CircularView')),
-        stateModel: stateModelFactory(pluginManager),
-        name: 'CircularView',
-        displayName: 'Circular view',
-      }),
-  )
-}