@jbrowse/plugin-circular-view 2.5.0 → 2.6.2

package/src/CircularView/models/slices.test.js

@@ -1,70 +0,0 @@
-import { calculateStaticSlices } from './slices'
-
-test('one slice', () => {
-  const view = {
-    elidedRegions: [{ refName: 'toast', start: 0, end: 10000, widthBp: 10000 }],
-    spacingPx: 5,
-    radiusPx: 1000,
-    totalBp: 10000,
-    bpPerRadian: 10000 / (2 * Math.PI),
-    pxPerRadian: 1000,
-  }
-
-  const slices = calculateStaticSlices(view)
-  // console.log(slices)
-  expect(slices.length).toBe(1)
-  const [slice] = slices
-  // expect(slices).toMatchSnapshot()
-  expect(slice).toMatchSnapshot()
-})
-
-test('two slices', () => {
-  const view = {
-    elidedRegions: [
-      { refName: 'toast', start: 0, end: 10000, widthBp: 10000 },
-      { refName: 'teest', start: 0, end: 10000, widthBp: 10000 },
-    ],
-    spacingPx: 5,
-    radiusPx: 1000,
-    pxPerRadian: 1000,
-    totalBp: 20000,
-    bpPerRadian: 20000 / (2 * Math.PI),
-  }
-
-  const slices = calculateStaticSlices(view)
-  // console.log(slices)
-  expect(slices.length).toBe(2)
-  expect(slices).toMatchSnapshot()
-})
-
-test('volvox', () => {
-  const totalBp = 50001 + 6079
-  const view = {
-    elidedRegions: [
-      {
-        refName: 'ctgA',
-        start: 0,
-        end: 50001,
-        assemblyName: 'volvox',
-        widthBp: 50001,
-      },
-      {
-        refName: 'ctgB',
-        start: 0,
-        end: 6079,
-        assemblyName: 'volvox',
-        widthBp: 6079,
-      },
-    ],
-    spacingPx: 5,
-    radiusPx: 1000,
-    pxPerRadian: 1000,
-    totalBp,
-    bpPerRadian: totalBp / (2 * Math.PI),
-  }
-
-  const slices = calculateStaticSlices(view)
-  // console.log(slices)
-  expect(slices.length).toBe(2)
-  expect(slices).toMatchSnapshot()
-})

package/src/CircularView/models/slices.ts

@@ -1,101 +0,0 @@
-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
-
-  startRadians: number
-
-  endRadians: number
-
-  bpPerRadian: number
-
-  flipped: boolean
-
-  constructor(
-    view: { bpPerRadian: number },
-    public region: SliceRegion,
-    public offsetRadians: number,
-    public radianWidth: number,
-  ) {
-    const { bpPerRadian } = view
-    this.key =
-      'regions' in region
-        ? JSON.stringify(region.regions)
-        : assembleLocString(region)
-    this.bpPerRadian = bpPerRadian
-    this.flipped = false
-
-    this.startRadians = offsetRadians
-    this.endRadians = region.widthBp / this.bpPerRadian + offsetRadians
-    Object.freeze(this)
-  }
-
-  bpToXY(bp: number, radiusPx: number) {
-    let offsetBp
-    if (this.region.elided) {
-      offsetBp = this.region.widthBp / 2
-    } else if (this.flipped) {
-      offsetBp = this.region.end - bp
-    } else {
-      offsetBp = bp - this.region.start
-    }
-    const totalRadians = offsetBp / this.bpPerRadian + this.offsetRadians
-    return polarToCartesian(radiusPx, totalRadians)
-  }
-
-  toJSON() {
-    return Object.fromEntries(Object.entries(this))
-  }
-}
-
-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 / bpPerRadian + spacingPx / pxPerRadian
-    slices.push(new Slice(self, region, currentRadianOffset, radianWidth))
-    currentRadianOffset += radianWidth
-  }
-  return slices
-}
-
-function sliceIsVisible(
-  self: { offsetRadians: number; visibleSection: { theta: [number, number] } },
-  slice: Slice,
-) {
-  const {
-    theta: [visibleThetaMin, visibleThetaMax],
-  } = self.visibleSection
-
-  return thetaRangesOverlap(
-    slice.offsetRadians + self.offsetRadians,
-    slice.radianWidth,
-    visibleThetaMin,
-    visibleThetaMax - visibleThetaMin,
-  )
-}
-
-export { calculateStaticSlices, sliceIsVisible }

package/src/CircularView/models/viewportVisibleRegion.test.js

@@ -1,168 +0,0 @@
-import {
-  viewportVisibleSection,
-  cartesianToPolar,
-  thetaRangesOverlap,
-} from './viewportVisibleRegion'
-
-describe('viewportVisibleSection', () => {
-  // test('circle contained in viewport', () => {
-  //   const result = viewportVisibleSection([0, 1, 0, 1], [0.5, 0.5], 0.3)
-  //   expect(result).toEqual({ rho: [0, 0.3], theta: [0, 2 * Math.PI] })
-  // })
-
-  // test('viewport completely inside circle', () => {
-  //   const result = viewportVisibleSection([0, 1, 0, 1], [0.5, 0.5], 20)
-  //   expect(result.theta).toEqual([0, 2 * Math.PI])
-  //   expect(result.rho[0]).toEqual(0)
-  //   expect(result.rho[1]).toBeCloseTo(0.7071)
-  // })
-
-  // test('viewport on left half of circle', () => {
-  //   const result = viewportVisibleSection([200, 500, 0, 1000], [500, 500], 20)
-  //   expect(result).toEqual({
-  //     rho: [0, 20],
-  //     theta: [Math.PI / 2, 1.5 * Math.PI],
-  //   })
-  // })
-  // test('viewport on right half of circle', () => {
-  //   const result = viewportVisibleSection([200, 500, 0, 1000], [200, 500], 20)
-  //   expect(result).toEqual({
-  //     rho: [0, 20],
-  //     theta: [1.5 * Math.PI, 2.5 * Math.PI],
-  //   })
-  // })
-
-  // test('viewport corner in circle', () => {
-  //   const { theta, rho } = viewportVisibleSection(
-  //     [200, 500, 0, 700],
-  //     [199, 701],
-  //     100,
-  //   )
-  //   expect(rho).toEqual([1.4142135623730951, 100])
-  //   expect(theta[0]).toBeCloseTo(1.5 * Math.PI, 1)
-  //   expect(theta[1]).toBeCloseTo(2 * Math.PI, 1)
-  // })
-
-  // test('viewport on center right', () => {
-  //   const { theta, rho } = viewportVisibleSection(
-  //     [1102, 2153, 880, 1280],
-  //     [1068.8119697255406, 1068.8119697255406],
-  //     1048.8119697255406,
-  //   )
-  //   expect(theta[1]).toBeGreaterThan(2 * Math.PI)
-  //   expect(theta[1]).toBeLessThan(2.5 * Math.PI)
-  //   expect(theta[0]).toBeGreaterThan(1.5 * Math.PI)
-  //   expect(theta[0]).toBeLessThan(2 * Math.PI)
-  // })
-
-  // test('viewport on center right 2', () => {
-  //   const { theta, rho } = viewportVisibleSection(
-  //     [1816, 2937, 1074, 1474],
-  //     [1468.6015446723616, 1468.6015446723616],
-  //     1448.6015446723616,
-  //   )
-  //   expect(theta[1]).toBeGreaterThan(2 * Math.PI)
-  //   expect(theta[1]).toBeLessThan(2.5 * Math.PI)
-  //   expect(theta[0]).toBeGreaterThan(1.5 * Math.PI)
-  //   expect(theta[0]).toBeLessThan(2 * Math.PI)
-  // })
-
-  // test('viewport on lower center', () => {
-  //   const { theta, rho } = viewportVisibleSection(
-  //     [259, 1350, 1176, 1576],
-  //     [787.7952717090081, 787.7952717090081],
-  //     767.7952717090081,
-  //   )
-  //   expect(theta[1]).toBeGreaterThan(Math.PI / 2)
-  //   expect(theta[1]).toBeLessThan(Math.PI)
-  //   expect(theta[0]).toBeGreaterThan(0)
-  //   expect(theta[0]).toBeLessThan(Math.PI / 2)
-  // })
-
-  // test('viewport on upper center', () => {
-  //   const { theta, rho } = viewportVisibleSection(
-  //     [286, 1377, 0, 400],
-  //     [787.7952717090081, 787.7952717090081],
-  //     767.7952717090081,
-  //   )
-  //   expect(theta[1]).toBeGreaterThan(1.5 * Math.PI)
-  //   expect(theta[1]).toBeLessThan(2 * Math.PI)
-  //   expect(theta[0]).toBeGreaterThan(Math.PI)
-  //   expect(theta[0]).toBeLessThan(1.5 * Math.PI)
-  // })
-
-  test('viewport on upper center 2', () => {
-    // [180.48708681644143, 359.3411680673888] [4.6042679453532855, 541.6042679453533]
-    // see '~/Desktop/Screen Shot 2019-06-28 at 3.01.22 PM.png'
-    const { theta } = viewportVisibleSection(
-      [0, 962, 157, 557],
-      [561.6042679453533, 561.6042679453533],
-      541.6042679453533,
-    )
-    expect(theta[1]).toBeGreaterThan(1.75 * Math.PI)
-    expect(theta[1]).toBeLessThan(2 * Math.PI)
-    expect(theta[0]).toBeGreaterThan(Math.PI)
-    expect(theta[0]).toBeLessThan(1.1 * Math.PI)
-  })
-})
-
-describe('cartesian to polar', () => {
-  ;[
-    [
-      [-1, -1],
-      [1.414, 180 + 45],
-    ],
-    [
-      [-1, 1],
-      [1.414, 90 + 45],
-    ],
-    [
-      [1, 1],
-      [1.414, 45],
-    ],
-    [
-      [1, -1],
-      [1.414, 360 - 45],
-    ],
-    [
-      [0, 1],
-      [1, 90],
-    ],
-    [
-      [0, -1],
-      [1, 270],
-    ],
-    [
-      [-1, 0],
-      [1, 180],
-    ],
-    [
-      [1, 0],
-      [1, 0],
-    ],
-  ].forEach(testCase => {
-    const [input, output] = testCase
-    test(`${input} -> ${output}`, () => {
-      const result = cartesianToPolar(...input)
-      expect(result[0]).toBeCloseTo(output[0])
-      expect((result[1] * 180) / Math.PI).toBeCloseTo(output[1])
-    })
-  })
-})
-
-describe('theta overlap testing', () => {
-  ;[
-    [[0, 2 * Math.PI, 0, 2 * Math.PI], true],
-    [[6.1, Math.PI / 2, 0, Math.PI / 2], true],
-    [[6.1, Math.PI / 2, 0, 0.1], true],
-    [[6.1, 0.1, 6.12, 0.05], true],
-    [[-12, 0.1, -12.05, 0.05], false],
-    [[-12, 0.1, -12.05, 0.06], true],
-  ].forEach(testCase => {
-    const [input, output] = testCase
-    test(`${input} -> ${output}`, () => {
-      const result = thetaRangesOverlap(...input)
-      expect(result).toBe(output)
-    })
-  })
-})

package/src/CircularView/models/viewportVisibleRegion.ts

@@ -1,272 +0,0 @@
-function findCircleIntersectionX(
-  y: number,
-  cx: number,
-  cy: number,
-  r: number,
-  resultArray: [number, number][],
-) {
-  const d = Math.abs(y - cy)
-  if (d > r) {
-    return
-  }
-  if (d === r) {
-    resultArray.push([cx, y])
-  }
-  const solution = Math.sqrt(r * r - d * d)
-  resultArray.push([cx - solution, y], [cx + solution, y])
-}
-
-function findCircleIntersectionY(
-  x: number,
-  cx: number,
-  cy: number,
-  r: number,
-  resultArray: [number, number][],
-) {
-  const d = Math.abs(x - cx)
-  if (d > r) {
-    return
-  }
-  if (d === r) {
-    resultArray.push([x, cy])
-  }
-  const solution = Math.sqrt(r * r - d * d)
-  resultArray.push([x, cy - solution], [x, cy + solution])
-}
-
-function cartesianToTheta(x: number, y: number) {
-  let theta = (Math.atan(y / x) + 2 * Math.PI) % (2 * Math.PI)
-  if (x < 0) {
-    if (y <= 0) {
-      theta += Math.PI
-    } else {
-      theta -= Math.PI
-    }
-  }
-  return theta
-}
-
-export function cartesianToPolar(x: number, y: number) {
-  const rho = Math.sqrt(x * x + y * y)
-  if (rho === 0) {
-    return [0, 0]
-  }
-  const theta = cartesianToTheta(x, y)
-  return [rho, theta]
-}
-
-const twoPi = 2 * Math.PI
-export function thetaRangesOverlap(
-  r1start: number,
-  r1length: number,
-  r2start: number,
-  r2length: number,
-) {
-  if (r1length <= 0 || r2length <= 0) {
-    return false
-  }
-  if (r1length + 0.0001 >= twoPi || r2length + 0.0001 >= twoPi) {
-    return true
-  }
-
-  // put both range starts between 2π and 4π
-  r1start = (((r1start % twoPi) + twoPi) % twoPi) + twoPi
-  r2start = (((r2start % twoPi) + twoPi) % twoPi) + twoPi
-
-  if (r1start < r2start + r2length && r1start + r1length > r2start) {
-    return true
-  }
-
-  // move r2 2π to the left and check
-  r2start -= twoPi
-  if (r1start < r2start + r2length && r1start + r1length > r2start) {
-    return true
-  }
-
-  // move it 2π to the right and check
-  r2start += twoPi + twoPi
-  return r1start < r2start + r2length && r1start + r1length > r2start
-}
-
-// return which arc range has any part of the circle visible in the viewport
-export function viewportVisibleSection(
-  viewSides: [number, number, number, number],
-  circleCenter: [number, number],
-  circleRadius: number,
-) {
-  let [viewL, viewR, viewT, viewB] = viewSides
-  const [cx, cy] = circleCenter
-
-  // transform coordinate system to center of circle
-  viewL -= cx
-  viewR -= cx
-  viewT -= cy
-  viewB -= cy
-
-  const centerIsInsideViewport =
-    viewL < 0 && viewR > 0 && viewT < 0 && viewB > 0
-
-  if (centerIsInsideViewport) {
-    const vertices = [
-      [viewL, viewT],
-      [viewR, viewT],
-      [viewL, viewB],
-      [viewR, viewB],
-    ]
-    let maxRho = -Infinity
-    for (let i = 0; i < vertices.length; i += 1) {
-      const [x, y] = vertices[i]
-      const rho = Math.sqrt(x * x + y * y)
-      if (rho > maxRho) {
-        maxRho = rho
-      }
-    }
-    return {
-      rho: [0, Math.min(circleRadius, maxRho)] as [number, number],
-      theta: [0, 2 * Math.PI] as [number, number],
-    }
-  }
-  // const viewportCompletelyContainsCircle =
-  //   circleCenter[0] - viewL >= circleRadius &&
-  //   viewR - circleCenter[0] >= circleRadius &&
-  //   circleCenter[1] - viewT >= circleRadius &&
-  //   viewB - circleCenter[1] >= circleRadius
-
-  // if (viewportCompletelyContainsCircle) {
-  //   return [0, 2 * Math.PI]
-  // }
-
-  // const distToCenterSquared = ([x, y]) => {
-  //   const [cx, cy] = circleCenter
-  //   const sq = n => n * n
-  //   return sq(x - cx) + sq(y - cy)
-  // }
-  // const circleRadiusSquared = circleRadius * circleRadius
-
-  // const tlInside = distToCenterSquared([viewL, viewT]) <= circleRadiusSquared
-  // const trInside = distToCenterSquared([viewR, viewT]) <= circleRadiusSquared
-  // const blInside = distToCenterSquared([viewL, viewB]) <= circleRadiusSquared
-  // const brInside = distToCenterSquared([viewR, viewB]) <= circleRadiusSquared
-
-  // const noIntersection = !tlInside && !trInside && !blInside && !brInside
-  // if (noIntersection) return undefined
-
-  // const circleCompletelyContainsViewport =
-  //   tlInside && trInside && blInside && brInside
-  // if (circleCompletelyContainsViewport) {
-  //   // viewport is in the circle, but the center is not in it, so take max
-  //   // and min of thetas to the center
-  //   const thetas = [
-  //     Math.atan(viewT / viewL),
-  //     Math.atan(viewT / viewR),
-  //     Math.atan(viewB / viewL),
-  //     Math.atan(viewB / viewR),
-  //   ]
-
-  //   return [Math.min(...thetas), Math.max(...thetas)]
-  // }
-
-  // if we get here, the viewport is partly in, partly out of the circle
-
-  // const viewLIntersects = Math.abs(viewL - circleCenter[0]) <= circleRadius
-  // const viewRIntersects = Math.abs(viewR - circleCenter[0]) <= circleRadius
-  // const viewTIntersects = Math.abs(viewT - circleCenter[1]) <= circleRadius
-  // const viewBIntersects = Math.abs(viewB - circleCenter[1]) <= circleRadius
-
-  // const numIntersectingSides =
-  //   Number(viewLIntersects) +
-  //   Number(viewRIntersects) +
-  //   Number(viewTIntersects) +
-  //   Number(viewBIntersects)
-
-  // if (numIntersectingSides === 4) return [0, 2 * Math.PI]
-  // if (numIntersectingSides === 3) {
-  //   // TODO calculate the thetas of the
-  // } else if (numIntersectingSides === 2) {
-  //   // TODO calculate the thetas of the 2 intersection points
-  // } else if (numIntersectingSides === 1) {
-  //   // TODO calculate the thetas of the 1-2 intersection points of the line, and the angle between
-  // }
-
-  // make a list of vertices-of-interest that lie inside both shapes to examine
-  // to determine the range covered by their intersection
-
-  // transform coordinates to have the circle as the origin and find the intersections
-  // of the circle and the view rectangle
-  const vertices: [number, number][] = [
-    [viewL, viewT],
-    [viewR, viewT],
-    [viewL, viewB],
-    [viewR, viewB],
-  ]
-  findCircleIntersectionY(viewL, 0, 0, circleRadius, vertices)
-  findCircleIntersectionY(viewR, 0, 0, circleRadius, vertices)
-  findCircleIntersectionX(viewT, 0, 0, circleRadius, vertices)
-  findCircleIntersectionX(viewB, 0, 0, circleRadius, vertices)
-
-  // for each edge, also look at the closest point to center if it is inside the circle
-  if (-viewL < circleRadius) {
-    vertices.push([viewL, 0])
-  }
-  if (viewR < circleRadius) {
-    vertices.push([viewR, 0])
-  }
-  if (-viewT < circleRadius) {
-    vertices.push([0, viewT])
-  }
-  if (viewB < circleRadius) {
-    vertices.push([0, viewB])
-  }
-
-  // const verticesOriginal = vertices.map(([x, y]) => [x + cx, y + cy])
-
-  // now convert them all to polar and take the max and min of rho and theta
-
-  // const viewportCenterTheta = cartesianToTheta(viewR + viewL, viewT + viewB)
-  const reflect = viewL >= 0 ? -1 : 1
-  // viewportCenterTheta < Math.PI / 2 || viewportCenterTheta > 1.5 * Math.PI
-  //   ? -1
-  //   : 1
-  let rhoMin = Infinity
-  let rhoMax = -Infinity
-  let thetaMin = Infinity
-  let thetaMax = -Infinity
-  for (let i = 0; i < vertices.length; i += 1) {
-    // ignore vertex if outside the viewport
-    const [vx, vy] = vertices[i]
-    if (vx >= viewL && vx <= viewR && vy >= viewT && vy <= viewB) {
-      const [rho, theta] = cartesianToPolar(vx * reflect, vy * reflect)
-      // ignore vertex if outside the circle
-      if (rho <= circleRadius + 0.001) {
-        // ignore theta if rho is 0
-        if (theta < thetaMin && rho > 0.0001) {
-          thetaMin = theta
-        }
-        if (theta > thetaMax && rho > 0.0001) {
-          thetaMax = theta
-        }
-        if (rho < rhoMin) {
-          rhoMin = rho
-        }
-        if (rho > rhoMax) {
-          rhoMax = rho
-        }
-      }
-    }
-  }
-
-  if (reflect === -1) {
-    thetaMin += Math.PI
-    thetaMax += Math.PI
-  }
-
-  if (thetaMin > 2 * Math.PI && thetaMax > 2 * Math.PI) {
-    thetaMin -= 2 * Math.PI
-    thetaMax -= 2 * Math.PI
-  }
-
-  return {
-    rho: [rhoMin, Math.min(circleRadius, rhoMax)] as [number, number],
-    theta: [thetaMin, thetaMax] as [number, number],
-  }
-}

package/src/CircularView/svgcomponents/SVGBackground.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { useTheme } from '@mui/material'
-
-export default function SVGBackground({
-  width,
-  height,
-  shift,
-}: {
-  width: number
-  height: number
-  shift: number
-}) {
-  const theme = useTheme()
-  return (
-    <rect
-      width={width + shift * 2}
-      height={height}
-      fill={theme.palette.background.default}
-    />
-  )
-}

package/src/CircularView/svgcomponents/SVGCircularView.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import { ThemeProvider } from '@mui/material'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { when } from 'mobx'
-import { getSession, radToDeg } from '@jbrowse/core/util'
-import { createJBrowseTheme } from '@jbrowse/core/ui'
-
-// locals
-import { ExportSvgOptions, CircularViewModel } from '../models/CircularView'
-import SVGBackground from './SVGBackground'
-import Ruler from '../components/Ruler'
-
-type CGV = CircularViewModel
-
-export async function renderToSvg(model: CGV, opts: ExportSvgOptions) {
-  await when(() => model.initialized)
-  const { themeName = 'default', Wrapper = ({ children }) => <>{children}</> } =
-    opts
-  const session = getSession(model)
-  const theme = session.allThemes?.()[themeName]
-  const { width, tracks, height } = model
-  const shift = 50
-  const displayResults = await Promise.all(
-    tracks.map(async track => {
-      const display = track.displays[0]
-      await when(() => (display.ready !== undefined ? display.ready : true))
-      return { track, result: await display.renderSvg({ ...opts, theme }) }
-    }),
-  )
-
-  const { staticSlices, offsetRadians, centerXY } = model
-  const deg = radToDeg(offsetRadians)
-
-  // the xlink namespace is used for rendering <image> tag
-  return renderToStaticMarkup(
-    <ThemeProvider theme={createJBrowseTheme(theme)}>
-      <Wrapper>
-        <svg
-          width={width}
-          height={height}
-          xmlns="http://www.w3.org/2000/svg"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-          viewBox={[0, 0, width + shift * 2, height].toString()}
-        >
-          <SVGBackground width={width} height={height} shift={shift} />
-          <g transform={`translate(${centerXY}) rotate(${deg})`}>
-            {staticSlices.map((slice, i) => (
-              <Ruler key={i} model={model} slice={slice} />
-            ))}
-            {displayResults.map(({ result }, i) => (
-              <React.Fragment key={i}>{result}</React.Fragment>
-            ))}
-          </g>
-        </svg>
-      </Wrapper>
-    </ThemeProvider>,
-  )
-}