react-msaview 1.3.2 → 2.1.0

package/src/components/dialogs/TracklistDlg.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  DialogContent,
+  FormControlLabel,
+  FormGroup,
+  Checkbox,
+  DialogActions,
+  Button,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../../model'
+
+export default observer(function ({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  const { tracks } = model
+
+  return (
+    <Dialog onClose={() => onClose()} open title="Add track">
+      <DialogContent>
+        <Typography>
+          Open relevant per-alignment tracks e.g. protein domains
+        </Typography>
+
+        <FormGroup>
+          {tracks.map(track => {
+            return (
+              <FormControlLabel
+                key={track.model.id}
+                control={
+                  <Checkbox
+                    checked={!model.turnedOffTracks.has(track.model.id)}
+                    onChange={() => {
+                      model.toggleTrack(track.model.id)
+                    }}
+                  />
+                }
+                label={track.model.name}
+              />
+            )
+          })}
+        </FormGroup>
+        <DialogActions>
+          <Button onClick={() => onClose()} variant="contained" color="primary">
+            Close
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  )
+})

package/src/components/util.ts

@@ -0,0 +1,93 @@
+/**
+ * Given a scale ( bp/px ) and minimum distances (px) between major and minor
+ * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
+ * the gridline pitches to use.
+ */
+export function chooseGridPitch(
+  scale: number,
+  minMajorPitchPx: number,
+  minMinorPitchPx: number,
+) {
+  scale = Math.abs(scale)
+  const minMajorPitchBp = minMajorPitchPx * scale
+  const majorMagnitude = parseInt(
+    Number(minMajorPitchBp).toExponential().split(/e/i)[1],
+    10,
+  )
+
+  let majorPitch = 10 ** majorMagnitude
+  while (majorPitch < minMajorPitchBp) {
+    majorPitch *= 2
+    if (majorPitch >= minMajorPitchBp) {
+      break
+    }
+    majorPitch *= 2.5
+  }
+
+  majorPitch = Math.max(majorPitch, 5)
+
+  const majorPitchPx = majorPitch / scale
+
+  let minorPitch = 0
+  if (!(majorPitch % 10) && majorPitchPx / 10 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 10
+  } else if (!(majorPitch % 5) && majorPitchPx / 5 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 5
+  } else if (!(majorPitch % 2) && majorPitchPx / 2 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 2
+  }
+
+  return { majorPitch, minorPitch }
+}
+export function makeTicks(
+  start: number,
+  end: number,
+  bpPerPx: number,
+  emitMajor = true,
+  emitMinor = true,
+) {
+  const gridPitch = chooseGridPitch(bpPerPx, 60, 15)
+
+  let minBase = start
+  let maxBase = end
+  if (minBase === null || maxBase === null) {
+    return []
+  }
+
+  if (bpPerPx < 0) {
+    ;[minBase, maxBase] = [maxBase, minBase]
+  }
+
+  // add 20px additional on the right and left to allow us to draw the ends of
+  // labels that lie a little outside our region
+  minBase -= Math.abs(20 * bpPerPx)
+  maxBase += Math.abs(20 * bpPerPx) + 1
+
+  const iterPitch = gridPitch.minorPitch || gridPitch.majorPitch
+  let index = 0
+  const ticks = []
+  for (
+    let base = Math.ceil(minBase / iterPitch) * iterPitch;
+    base < maxBase;
+    base += iterPitch
+  ) {
+    if (emitMinor && base % (gridPitch.majorPitch * 2)) {
+      ticks.push({ type: 'minor', base: base - 1, index })
+      index += 1
+    } else if (emitMajor && !(base % (gridPitch.majorPitch * 2))) {
+      ticks.push({ type: 'major', base: base - 1, index })
+      index += 1
+    }
+  }
+  return ticks
+}
+
+export function mathPower(num: number): string {
+  if (num < 999) {
+    return String(num)
+  }
+  return `${mathPower(~~(num / 1000))},${`00${~~(num % 1000)}`.slice(
+    -3,
+    -3 + 3,
+  )}`
+}

package/src/declare.d.ts

@@ -0,0 +1 @@
+declare module 'stockholm-js'

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as MSAView } from './components/MSAView'
+export { default as MSAModel, type MsaViewModel } from './model'

package/src/layout.ts

@@ -0,0 +1,83 @@
+import RBush from 'rbush'
+
+export default class Layout {
+  public rectangles: Map<
+    string,
+    {
+      minY: number
+      maxY: number
+      minX: number
+      maxX: number
+      id: string
+      data: unknown
+    }
+  >
+
+  public maxHeightReached: boolean
+
+  private maxHeight: number
+
+  private rbush: RBush<{ id: string }>
+
+  private pTotalHeight: number
+
+  constructor({
+    maxHeight = 10000,
+  }: {
+    maxHeight?: number
+  } = {}) {
+    this.maxHeightReached = false
+    this.rbush = new RBush()
+    this.rectangles = new Map()
+    this.maxHeight = Math.ceil(maxHeight)
+    this.pTotalHeight = 0 // total height, in units of bitmap squares (px/pitchY)
+  }
+
+  /**
+   * @returns top position for the rect, or Null if laying
+   *  out the rect would exceed maxHeighe
+   */
+  addRect(
+    id: string,
+    left: number,
+    right: number,
+    height: number,
+    data: unknown,
+  ): number | null {
+    // add to rbush
+    const existingRecord = this.rectangles.get(id)
+    if (existingRecord) {
+      return existingRecord.minY
+    }
+
+    let currHeight = 0
+    while (
+      this.rbush.collides({
+        minX: left,
+        minY: currHeight,
+        maxX: right,
+        maxY: currHeight + height,
+      }) &&
+      currHeight <= this.maxHeight
+    ) {
+      currHeight += 1
+    }
+
+    const record = {
+      minX: left,
+      minY: currHeight,
+      maxX: right,
+      maxY: currHeight + height,
+      id,
+      data,
+    }
+    this.rbush.insert(record)
+    this.rectangles.set(id, record)
+    this.pTotalHeight = Math.max(this.pTotalHeight, currHeight)
+    return currHeight
+  }
+
+  get totalHeight() {
+    return this.pTotalHeight
+  }
+}