@jbrowse/plugin-circular-view 2.6.1 → 2.6.3

package/src/BaseChordDisplay/models/renderReaction.ts

@@ -1,75 +0,0 @@
-import clone from 'clone'
-import { getRpcSessionId } from '@jbrowse/core/util/tracks'
-import { getSession, getContainingView } from '@jbrowse/core/util'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function renderReactionData(self: any) {
-  const view = getContainingView(self)
-  const { rendererType } = self
-  const { rpcManager } = getSession(view)
-
-  return {
-    rendererType,
-    rpcManager,
-    renderProps: self.renderProps(),
-    renderArgs: {
-      assemblyName: view.displayedRegions[0]?.assemblyName,
-      adapterConfig: clone(self.adapterConfig),
-      rendererType: rendererType.name,
-      regions: clone(view.displayedRegions),
-      blockDefinitions: self.blockDefinitions,
-      sessionId: getRpcSessionId(self),
-      timeout: 1000000,
-    },
-  }
-}
-
-export async function renderReactionEffect(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: any,
-  signal: AbortSignal | undefined,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  self: any,
-) {
-  if (!props) {
-    throw new Error('cannot render with no props')
-  }
-
-  const {
-    rendererType,
-    rpcManager,
-    cannotBeRenderedReason,
-    renderArgs,
-    renderProps,
-    exportSVG,
-  } = props
-
-  if (cannotBeRenderedReason) {
-    return { message: cannotBeRenderedReason }
-  }
-
-  // don't try to render 0 or NaN radius or no regions
-  if (!renderProps.radius || !renderArgs.regions?.length) {
-    return { message: 'Skipping render' }
-  }
-
-  // check renderertype compatibility
-  if (!self.isCompatibleWithRenderer(rendererType)) {
-    throw new Error(
-      `renderer ${rendererType.name} is not compatible with this display type`,
-    )
-  }
-
-  const { html, ...data } = await rendererType.renderInClient(rpcManager, {
-    ...renderArgs,
-    ...renderProps,
-    exportSVG,
-  })
-
-  return {
-    html,
-    data,
-    reactElement: data.reactElement,
-    renderingComponent: rendererType.ReactComponent,
-  }
-}

package/src/CircularView/components/CircularView.tsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { ResizeHandle } from '@jbrowse/core/ui'
-import { assembleLocString } from '@jbrowse/core/util'
-import { makeStyles } from 'tss-react/mui'
-
-// locals
-import Ruler from './Ruler'
-import Controls from './Controls'
-import ImportForm from './ImportForm'
-import { CircularViewModel } from '../models/CircularView'
-
-const dragHandleHeight = 3
-
-const useStyles = makeStyles()(theme => ({
-  root: {
-    position: 'relative',
-    marginBottom: theme.spacing(1),
-    overflow: 'hidden',
-  },
-  scroller: {
-    overflow: 'auto',
-  },
-}))
-
-const Slices = observer(({ model }: { model: CircularViewModel }) => {
-  return (
-    <>
-      {model.staticSlices.map(slice => (
-        <Ruler
-          key={assembleLocString(
-            slice.region.elided ? slice.region.regions[0] : slice.region,
-          )}
-          model={model}
-          slice={slice}
-        />
-      ))}
-      {model.tracks.map(track => {
-        const display = track.displays[0]
-        return (
-          <display.RenderingComponent
-            key={display.id}
-            display={display}
-            view={model}
-          />
-        )
-      })}
-    </>
-  )
-})
-
-const CircularView = observer(({ model }: { model: CircularViewModel }) => {
-  const initialized =
-    !!model.displayedRegions.length &&
-    !!model.figureWidth &&
-    !!model.figureHeight &&
-    model.initialized
-
-  const showImportForm = !initialized && !model.disableImportForm
-  const showFigure = initialized && !showImportForm
-
-  return (
-    <>
-      {showImportForm || model.error ? (
-        <ImportForm model={model} />
-      ) : showFigure ? (
-        <CircularViewLoaded model={model} />
-      ) : null}
-    </>
-  )
-})
-
-const CircularViewLoaded = observer(function ({
-  model,
-}: {
-  model: CircularViewModel
-}) {
-  const {
-    width,
-    height,
-    id,
-    offsetRadians,
-    centerXY,
-    figureWidth,
-    figureHeight,
-    hideVerticalResizeHandle,
-  } = model
-  const { classes } = useStyles()
-  return (
-    <div className={classes.root} style={{ width, height }} data-testid={id}>
-      <div className={classes.scroller} style={{ width, height }}>
-        <svg
-          style={{
-            transform: `rotate(${offsetRadians}rad)`,
-            transition: 'transform 0.5s',
-            transformOrigin: centerXY.map(x => `${x}px`).join(' '),
-            position: 'absolute',
-            left: 0,
-            top: 0,
-          }}
-          width={figureWidth}
-          height={figureHeight}
-        >
-          <g transform={`translate(${centerXY})`}>
-            <Slices model={model} />
-          </g>
-        </svg>
-      </div>
-      <Controls model={model} />
-      {hideVerticalResizeHandle ? null : (
-        <ResizeHandle
-          onDrag={model.resizeHeight}
-          style={{
-            height: dragHandleHeight,
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            background: '#ccc',
-            boxSizing: 'border-box',
-            borderTop: '1px solid #fafafa',
-          }}
-        />
-      )}
-    </div>
-  )
-})
-
-export default CircularView

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