@jbrowse/plugin-circular-view 2.3.4 → 2.4.1

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,110 @@ 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 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(
-  ({
-    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 +166,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}
+    />
+  )
+})

package/src/CircularView/models/CircularView.ts

@@ -1,3 +1,4 @@
+import React from 'react'
 import PluginManager from '@jbrowse/core/PluginManager'
 import {
   cast,
@@ -10,22 +11,38 @@ import {
 } from 'mobx-state-tree'
 import { Region } from '@jbrowse/core/util/types/mst'
 import { transaction } from 'mobx'
+import { saveAs } from 'file-saver'
+import { renderToSvg } from '../svgcomponents/SVGCircularView'
 import {
   AnyConfigurationModel,
   readConfObject,
 } from '@jbrowse/core/configuration'
-
+import { MenuItem } from '@jbrowse/core/ui'
 import {
   getSession,
   clamp,
   isSessionModelWithWidgets,
-  Region as IRegion,
 } from '@jbrowse/core/util'
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
-import { calculateStaticSlices, sliceIsVisible } from './slices'
 
+// icons
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
+import FolderOpenIcon from '@mui/icons-material/FolderOpen'
+import PhotoCameraIcon from '@mui/icons-material/PhotoCamera'
+
+// locals
+import ExportSvgDlg from '../components/ExportSvgDialog'
+import { calculateStaticSlices, sliceIsVisible, SliceRegion } from './slices'
 import { viewportVisibleSection } from './viewportVisibleRegion'
 
+export interface ExportSvgOptions {
+  rasterizeLayers?: boolean
+  filename?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Wrapper?: React.FC<any>
+  themeName?: string
+}
+
 /**
  * #stateModel CircularView
  * extends `BaseViewModel`
@@ -121,12 +138,6 @@ function stateModelFactory(pluginManager: PluginManager) {
         }
         return self.volatileWidth
       },
-      /**
-       * #getter
-       */
-      get staticSlices() {
-        return calculateStaticSlices(self)
-      },
 
       /**
        * #getter
@@ -262,20 +273,7 @@ function stateModelFactory(pluginManager: PluginManager) {
        * elide regions that are too small to see reasonably
        */
       get elidedRegions() {
-        const visible: (
-          | {
-              elided: true
-              widthBp: number
-              regions: IRegion[]
-            }
-          | {
-              elided: false
-              widthBp: number
-              start: number
-              end: number
-              refName: string
-            }
-        )[] = []
+        const visible: SliceRegion[] = []
         self.displayedRegions.forEach(region => {
           const widthBp = region.end - region.start
           const widthPx = widthBp / self.bpPerPx
@@ -330,6 +328,14 @@ function stateModelFactory(pluginManager: PluginManager) {
         )
       },
     }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get staticSlices() {
+        return calculateStaticSlices(self)
+      },
+    }))
     .views(self => ({
       /**
        * #getter
@@ -501,9 +507,11 @@ function stateModelFactory(pluginManager: PluginManager) {
           throw new Error(`unknown track type ${conf.type}`)
         }
         const viewType = pluginManager.getViewType(self.type)
-        const supportedDisplays = viewType.displayTypes.map(d => d.name)
+        const supportedDisplays = new Set(
+          viewType.displayTypes.map(d => d.name),
+        )
         const displayConf = conf.displays.find((d: AnyConfigurationModel) =>
-          supportedDisplays.includes(d.type),
+          supportedDisplays.has(d.type),
         )
         const track = trackType.stateModel.create({
           ...initialSnapshot,
@@ -522,21 +530,24 @@ function stateModelFactory(pluginManager: PluginManager) {
         const name = readConfObject(configuration, 'name')
         const trackType = pluginManager.getTrackType(type)
         if (!trackType) {
-          throw new Error(`unknown track type ${configuration.type}`)
+          throw new Error(`unknown track type ${type}`)
         }
         const viewType = pluginManager.getViewType(self.type)
-        const supportedDisplays = viewType.displayTypes.map(d => d.name)
+        const supportedDisplays = new Set(
+          viewType.displayTypes.map(d => d.name),
+        )
         const displayConf = configuration.displays.find(
-          (d: AnyConfigurationModel) => supportedDisplays.includes(d.type),
+          (d: AnyConfigurationModel) => supportedDisplays.has(d.type),
+        )
+        self.tracks.push(
+          trackType.stateModel.create({
+            ...initialSnapshot,
+            name,
+            type,
+            configuration,
+            displays: [{ type: displayConf.type, configuration: displayConf }],
+          }),
         )
-        const track = trackType.stateModel.create({
-          ...initialSnapshot,
-          name,
-          type,
-          configuration,
-          displays: [{ type: displayConf.type, configuration: displayConf }],
-        })
-        self.tracks.push(track)
       },
 
       /**
@@ -560,19 +571,50 @@ function stateModelFactory(pluginManager: PluginManager) {
         this.setModelViewWhenAdjust(self.atMinBpPerPx)
         return self.lockedFitToWindow
       },
+      /**
+       * #action
+       * creates an svg export and save using FileSaver
+       */
+      async exportSvg(opts: ExportSvgOptions = {}) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const html = await renderToSvg(self as any, opts)
+        const blob = new Blob([html], { type: 'image/svg+xml' })
+        saveAs(blob, opts.filename || 'image.svg')
+      },
+    }))
+    .views(self => ({
+      /**
+       * #method
+       * return the view menu items
+       */
+      menuItems(): MenuItem[] {
+        return [
+          {
+            label: 'Return to import form',
+            onClick: () => self.setDisplayedRegions([]),
+            icon: FolderOpenIcon,
+          },
+          {
+            label: 'Export SVG',
+            icon: PhotoCameraIcon,
+            onClick: () => {
+              getSession(self).queueDialog(handleClose => [
+                ExportSvgDlg,
+                { model: self, handleClose },
+              ])
+            },
+          },
+          {
+            label: 'Open track selector',
+            onClick: self.activateTrackSelector,
+            icon: TrackSelectorIcon,
+          },
+        ]
+      },
     }))
 }
 
 export type CircularViewStateModel = ReturnType<typeof stateModelFactory>
 export type CircularViewModel = Instance<CircularViewStateModel>
 
-/**
-PLANS
-
-- tracks
-- ruler tick marks
-- set viewport scroll from state snapshot
-
-*/
-
 export default stateModelFactory

package/src/CircularView/models/slices.ts

@@ -1,11 +1,25 @@
 import { polarToCartesian, assembleLocString, Region } from '@jbrowse/core/util'
 import { thetaRangesOverlap } from './viewportVisibleRegion'
 
+export type SliceElidedRegion = {
+  elided: true
+  widthBp: number
+  regions: Region[]
+}
+
+export type SliceNonElidedRegion = {
+  elided: false
+  widthBp: number
+  start: number
+  end: number
+  refName: string
+  assemblyName: string
+}
+export type SliceRegion = SliceNonElidedRegion | SliceElidedRegion
+
 export class Slice {
   key: string
 
-  offsetRadians: number
-
   startRadians: number
 
   endRadians: number
@@ -16,18 +30,20 @@ export class Slice {
 
   constructor(
     view: { bpPerRadian: number },
-    public region: Region & { widthBp: number; elided: boolean },
-    currentRadianOffset: number,
+    public region: SliceRegion,
+    public offsetRadians: number,
     public radianWidth: number,
   ) {
     const { bpPerRadian } = view
-    this.key = assembleLocString(region)
-    this.offsetRadians = currentRadianOffset
+    this.key =
+      'regions' in region
+        ? JSON.stringify(region.regions)
+        : assembleLocString(region)
     this.bpPerRadian = bpPerRadian
     this.flipped = false
 
-    this.startRadians = this.offsetRadians
-    this.endRadians = region.widthBp / this.bpPerRadian + this.offsetRadians
+    this.startRadians = offsetRadians
+    this.endRadians = region.widthBp / this.bpPerRadian + offsetRadians
     Object.freeze(this)
   }
 
@@ -49,13 +65,17 @@ export class Slice {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function calculateStaticSlices(self: any) {
+function calculateStaticSlices(self: {
+  elidedRegions: SliceRegion[]
+  bpPerRadian: number
+  spacingPx: number
+  pxPerRadian: number
+}) {
   const slices = []
   let currentRadianOffset = 0
+  const { bpPerRadian, spacingPx, pxPerRadian } = self
   for (const region of self.elidedRegions) {
-    const radianWidth =
-      region.widthBp / self.bpPerRadian + self.spacingPx / self.pxPerRadian
+    const radianWidth = region.widthBp / bpPerRadian + spacingPx / pxPerRadian
     slices.push(new Slice(self, region, currentRadianOffset, radianWidth))
     currentRadianOffset += radianWidth
   }