@jbrowse/plugin-circular-view 2.3.3 → 2.4.0

package/src/CircularView/components/Controls.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { IconButton } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { grey } from '@mui/material/colors'
+import JBrowseMenu from '@jbrowse/core/ui/Menu'
 
 // icons
 import ZoomOutIcon from '@mui/icons-material/ZoomOut'
@@ -11,96 +11,109 @@ 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()({
-  iconButton: {
-    padding: '4px',
-    margin: '0 2px 0 2px',
-  },
+const useStyles = makeStyles()(theme => ({
   controls: {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
     position: 'absolute',
-    background: grey[200],
-    boxSizing: 'border-box',
-    borderRight: '1px solid #a2a2a2',
-    borderBottom: '1px solid #a2a2a2',
+    borderRight: `1px solid ${theme.palette.divider}`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
     left: 0,
     top: 0,
   },
-})
+}))
 
-const Controls = observer(function ({ model }: { model: CircularViewModel }) {
+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}
-        className={classes.iconButton}
         title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
         disabled={model.atMaxBpPerPx || model.lockedFitToWindow}
-        color="secondary"
       >
         <ZoomOutIcon />
       </IconButton>
 
       <IconButton
         onClick={model.zoomInButton}
-        className={classes.iconButton}
-        title="zoom in"
         disabled={model.atMinBpPerPx}
-        color="secondary"
+        title="zoom in"
       >
         <ZoomInIcon />
       </IconButton>
 
       <IconButton
         onClick={model.rotateCounterClockwiseButton}
-        className={classes.iconButton}
         title="rotate counter-clockwise"
-        color="secondary"
       >
         <RotateLeftIcon />
       </IconButton>
 
       <IconButton
         onClick={model.rotateClockwiseButton}
-        className={classes.iconButton}
         title="rotate clockwise"
-        color="secondary"
       >
         <RotateRightIcon />
       </IconButton>
 
       <IconButton
         onClick={model.toggleFitToWindowLock}
-        className={classes.iconButton}
         title={
           model.lockedFitToWindow
             ? 'locked model to window size'
             : 'unlocked model to zoom further'
         }
         disabled={model.tooSmallToLock}
-        color="secondary"
       >
         {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"
-          color="secondary"
         >
           <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>
   )
 })
-export default Controls

package/src/CircularView/components/ExportSvgDialog.tsx

@@ -0,0 +1,132 @@
+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-ignore
+                  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/Ruler.tsx

@@ -11,7 +11,11 @@ import { useTheme } from '@mui/material/styles'
 import { makeStyles } from 'tss-react/mui'
 
 // locals
-import { Slice } from '../models/slices'
+import {
+  Slice,
+  SliceElidedRegion,
+  SliceNonElidedRegion,
+} from '../models/slices'
 import { CircularViewModel } from '../models/CircularView'
 
 const useStyles = makeStyles()({
@@ -51,128 +55,116 @@ function sliceArcPath(
   ].join(' ')
 }
 
-const ElisionRulerArc = observer(
-  ({ model, slice }: { model: CircularViewModel; slice: Slice }) => {
-    const theme = useTheme()
-    const { radiusPx: modelRadiusPx } = model
-    const radiusPx = modelRadiusPx + 1
-    const { endRadians, startRadians, region } = 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 regionCountString = `[${Number(
-      // @ts-ignore
-      region.regions.length,
-    ).toLocaleString()}]`
-    return (
-      <>
-        <RulerLabel
-          text={regionCountString}
-          view={model}
-          maxWidthPx={widthPx}
-          radians={centerRadians}
-          radiusPx={radiusPx}
-          title={`${Number(
-            // @ts-ignore
-            region.regions.length,
-          ).toLocaleString()} 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 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 regionCountString = `[${Number(
+    // @ts-ignore
+    region.regions.length,
+  ).toLocaleString()}]`
+  return (
+    <>
+      <RulerLabel
+        text={regionCountString}
+        view={model}
+        maxWidthPx={widthPx}
+        radians={centerRadians}
+        radiusPx={radiusPx}
+        title={`${Number(
+          // @ts-ignore
+          region.regions.length,
+        ).toLocaleString()} 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(
-  ({
-    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
-    }
+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>
-        )
-      }
+  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="end"
+          textAnchor="start"
           dominantBaseline="middle"
-          transform={`translate(${textXY}) rotate(${radToDeg(radians) + 180})`}
+          transform={`translate(${textXY}) rotate(${radToDeg(radians)})`}
           style={{ fill: color }}
         >
           {text}
@@ -180,81 +172,100 @@ const RulerLabel = observer(
         </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
-  },
-)
+  // if you get here there is no room for the text at all
+  return null
+})
 
-const RegionRulerArc = observer(
-  ({ model, slice }: { model: CircularViewModel; slice: Slice }) => {
-    const theme = useTheme()
-    const { radiusPx } = model
-    const { region, endRadians, startRadians } = slice
-    const centerRadians = (endRadians + startRadians) / 2
-    const widthPx = (endRadians - startRadians) * radiusPx
-    const session = getSession(model)
-    let color
-    const assembly = session.assemblyManager.get(slice.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 {
+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"
-        >
-          <title>{region.refName}</title>
-        </path>
-      </>
-    )
-  },
-)
+  // 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"
+      />
+    </>
+  )
+})
 
-const CircularRuler = observer(
-  ({ model, slice }: { model: CircularViewModel; slice: Slice }) => {
-    if (slice.region.elided) {
-      return (
-        <ElisionRulerArc
-          key={
-            /* @ts-ignore */
-            assembleLocString(slice.region.regions[0])
-          }
-          model={model}
-          slice={slice}
-        />
-      )
-    }
+export default observer(function ({
+  model,
+  slice,
+}: {
+  model: CircularViewModel
+  slice: Slice
+}) {
+  if (slice.region.elided) {
     return (
-      <RegionRulerArc
-        key={assembleLocString(slice.region)}
+      <ElisionRulerArc
+        key={assembleLocString(slice.region.regions[0])}
         model={model}
+        region={slice.region}
         slice={slice}
       />
     )
-  },
-)
-
-export default CircularRuler
+  }
+  return (
+    <RegionRulerArc
+      key={assembleLocString(slice.region)}
+      region={slice.region}
+      model={model}
+      slice={slice}
+    />
+  )
+})