@jbrowse/plugin-circular-view 2.1.4 → 2.1.5

package/src/CircularView/components/{CircularView.js → CircularView.tsx}

@@ -2,6 +2,7 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
 import { assembleLocString } from '@jbrowse/core/util'
+import { CircularViewModel } from '../models/CircularView'
 import { IconButton } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { grey } from '@mui/material/colors'
@@ -57,12 +58,13 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-const Slices = observer(({ model }) => {
+const Slices = observer(({ model }: { model: CircularViewModel }) => {
   return (
     <>
       {model.staticSlices.map(slice => (
         <Ruler
           key={assembleLocString(
+            // @ts-ignore
             slice.region.elided ? slice.region.regions[0] : slice.region,
           )}
           model={model}
@@ -83,84 +85,94 @@ const Slices = observer(({ model }) => {
   )
 })
 
-const Controls = observer(({ model, showingFigure }) => {
-  const { classes } = useStyles()
-  return (
-    <div className={classes.controls}>
-      <IconButton
-        onClick={model.zoomOutButton}
-        className={classes.iconButton}
-        title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
-        disabled={
-          !showingFigure || model.atMaxBpPerPx || model.lockedFitToWindow
-        }
-        color="secondary"
-      >
-        <ZoomOutIcon />
-      </IconButton>
-
-      <IconButton
-        onClick={model.zoomInButton}
-        className={classes.iconButton}
-        title="zoom in"
-        disabled={!showingFigure || model.atMinBpPerPx}
-        color="secondary"
-      >
-        <ZoomInIcon />
-      </IconButton>
+const Controls = observer(
+  ({
+    model,
+    showingFigure,
+  }: {
+    model: CircularViewModel
+    showingFigure: boolean
+  }) => {
+    const { classes } = useStyles()
+    return (
+      <div className={classes.controls}>
+        <IconButton
+          onClick={model.zoomOutButton}
+          className={classes.iconButton}
+          title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
+          disabled={
+            !showingFigure || model.atMaxBpPerPx || model.lockedFitToWindow
+          }
+          color="secondary"
+        >
+          <ZoomOutIcon />
+        </IconButton>
 
-      <IconButton
-        onClick={model.rotateCounterClockwiseButton}
-        className={classes.iconButton}
-        title="rotate counter-clockwise"
-        disabled={!showingFigure}
-        color="secondary"
-      >
-        <RotateLeftIcon />
-      </IconButton>
+        <IconButton
+          onClick={model.zoomInButton}
+          className={classes.iconButton}
+          title="zoom in"
+          disabled={!showingFigure || model.atMinBpPerPx}
+          color="secondary"
+        >
+          <ZoomInIcon />
+        </IconButton>
 
-      <IconButton
-        onClick={model.rotateClockwiseButton}
-        className={classes.iconButton}
-        title="rotate clockwise"
-        disabled={!showingFigure}
-        color="secondary"
-      >
-        <RotateRightIcon />
-      </IconButton>
+        <IconButton
+          onClick={model.rotateCounterClockwiseButton}
+          className={classes.iconButton}
+          title="rotate counter-clockwise"
+          disabled={!showingFigure}
+          color="secondary"
+        >
+          <RotateLeftIcon />
+        </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={model.rotateClockwiseButton}
+          className={classes.iconButton}
+          title="rotate clockwise"
+          disabled={!showingFigure}
+          color="secondary"
+        >
+          <RotateRightIcon />
+        </IconButton>
 
-      {model.hideTrackSelectorButton ? null : (
         <IconButton
-          onClick={model.activateTrackSelector}
-          title="Open track selector"
-          data-testid="circular_track_select"
+          onClick={model.toggleFitToWindowLock}
+          className={classes.iconButton}
+          title={
+            model.lockedFitToWindow
+              ? 'locked model to window size'
+              : 'unlocked model to zoom further'
+          }
+          disabled={model.tooSmallToLock}
           color="secondary"
         >
-          <TrackSelectorIcon />
+          {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
         </IconButton>
-      )}
-    </div>
-  )
-})
 
-const CircularView = observer(({ model }) => {
+        {model.hideTrackSelectorButton ? null : (
+          <IconButton
+            onClick={model.activateTrackSelector}
+            title="Open track selector"
+            data-testid="circular_track_select"
+            color="secondary"
+          >
+            <TrackSelectorIcon />
+          </IconButton>
+        )}
+      </div>
+    )
+  },
+)
+
+const CircularView = observer(({ model }: { model: CircularViewModel }) => {
   const { classes } = useStyles()
   const initialized =
-    !!model.displayedRegions.length && model.figureWidth && model.figureHeight
+    !!model.displayedRegions.length &&
+    !!model.figureWidth &&
+    !!model.figureHeight
 
   const showImportForm = !initialized && !model.disableImportForm
   const showFigure = initialized && !showImportForm
@@ -189,7 +201,6 @@ const CircularView = observer(({ model }) => {
                 }}
               >
                 <div
-                  className={classes.rotator}
                   style={{
                     transform: [`rotate(${model.offsetRadians}rad)`].join(' '),
                     transition: 'transform 0.5s',

package/src/CircularView/components/Ruler.tsx

@@ -0,0 +1,260 @@
+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 } 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(
+  ({ 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 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
+    }
+
+    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(
+  ({ 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 {
+      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>
+      </>
+    )
+  },
+)
+
+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}
+        />
+      )
+    }
+    return (
+      <RegionRulerArc
+        key={assembleLocString(slice.region)}
+        model={model}
+        slice={slice}
+      />
+    )
+  },
+)
+
+export default CircularRuler

package/src/CircularView/models/CircularView.ts

@@ -67,9 +67,7 @@ export default function CircularView(pluginManager: PluginManager) {
         get staticSlices() {
           return calculateStaticSlices(self)
         },
-        get visibleStaticSlices() {
-          return this.staticSlices.filter(sliceIsVisible.bind(this, self))
-        },
+
         get visibleSection() {
           return viewportVisibleSection(
             [
@@ -140,7 +138,7 @@ export default function CircularView(pluginManager: PluginManager) {
         get tooSmallToLock() {
           return this.minBpPerPx <= 0.0000000001
         },
-        get figureDimensions() {
+        get figureDimensions(): [number, number] {
           return [
             this.radiusPx * 2 + 2 * self.paddingPx,
             this.radiusPx * 2 + 2 * self.paddingPx,
@@ -206,6 +204,11 @@ export default function CircularView(pluginManager: PluginManager) {
           )
         },
       }))
+      .views(self => ({
+        get visibleStaticSlices() {
+          return self.staticSlices.filter(s => sliceIsVisible(self, s))
+        },
+      }))
       .volatile(() => ({
         error: undefined as unknown,
       }))

package/src/CircularView/models/slices.ts

@@ -62,10 +62,11 @@ function calculateStaticSlices(self: any) {
   return slices
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function sliceIsVisible(self: any, slice: Slice) {
+function sliceIsVisible(
+  self: { offsetRadians: number; visibleSection: { theta: [number, number] } },
+  slice: Slice,
+) {
   const {
-    // rho: visibleRhoRange,
     theta: [visibleThetaMin, visibleThetaMax],
   } = self.visibleSection
 

package/src/CircularView/models/viewportVisibleRegion.ts

@@ -124,8 +124,8 @@ export function viewportVisibleSection(
       }
     }
     return {
-      rho: [0, Math.min(circleRadius, maxRho)],
-      theta: [0, 2 * Math.PI],
+      rho: [0, Math.min(circleRadius, maxRho)] as [number, number],
+      theta: [0, 2 * Math.PI] as [number, number],
     }
   }
   // const viewportCompletelyContainsCircle =
@@ -268,7 +268,7 @@ export function viewportVisibleSection(
   }
 
   return {
-    rho: [rhoMin, Math.min(circleRadius, rhoMax)],
-    theta: [thetaMin, thetaMax],
+    rho: [rhoMin, Math.min(circleRadius, rhoMax)] as [number, number],
+    theta: [thetaMin, thetaMax] as [number, number],
   }
 }

package/src/BaseChordDisplay/models/renderReaction.js

@@ -1,70 +0,0 @@
-export default ({ jbrequire }) => {
-  const { getRpcSessionId } = jbrequire('@jbrowse/core/util/tracks')
-  const { getContainingView } = jbrequire('@jbrowse/core/util')
-  const { getSession } = jbrequire('@jbrowse/core/util')
-
-  function renderReactionData(self) {
-    const view = getContainingView(self)
-    const { rendererType } = self
-    const { rpcManager } = getSession(view)
-
-    return {
-      rendererType,
-      rpcManager,
-      renderProps: self.renderProps(),
-      renderArgs: {
-        assemblyName: view.displayedRegions[0]?.assemblyName,
-        adapterConfig: JSON.parse(JSON.stringify(self.adapterConfig)),
-        rendererType: rendererType.name,
-        regions: JSON.parse(JSON.stringify(view.displayedRegions)),
-        blockDefinitions: self.blockDefinitions,
-        sessionId: getRpcSessionId(self),
-        timeout: 1000000,
-      },
-    }
-  }
-
-  async function renderReactionEffect(props, signal, self) {
-    if (!props) {
-      throw new Error('cannot render with no props')
-    }
-
-    const {
-      rendererType,
-      rpcManager,
-      cannotBeRenderedReason,
-      renderArgs,
-      renderProps,
-    } = props
-
-    if (cannotBeRenderedReason) {
-      return { message: cannotBeRenderedReason }
-    }
-
-    // don't try to render 0 or NaN radius or no regions
-    if (
-      !props.renderProps.radius ||
-      !props.renderArgs.regions ||
-      !props.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,
-      signal,
-    })
-
-    return { html, data, renderingComponent: rendererType.ReactComponent }
-  }
-
-  return { renderReactionData, renderReactionEffect }
-}