@jbrowse/plugin-linear-comparative-view 2.6.1 → 2.6.2

package/src/LinearSyntenyDisplay/drawSynteny.ts

@@ -1,266 +0,0 @@
-import { doesIntersect2, getContainingView } from '@jbrowse/core/util'
-import { LinearSyntenyViewModel } from '../LinearSyntenyView/model'
-import { LinearSyntenyDisplayModel } from './model'
-import { draw, drawMatchSimple } from './components/util'
-
-export const MAX_COLOR_RANGE = 255 * 255 * 255 // max color range
-
-function makeColor(idx: number) {
-  const r = Math.floor(idx / (255 * 255)) % 255
-  const g = Math.floor(idx / 255) % 255
-  const b = idx % 255
-  return `rgb(${r},${g},${b})`
-}
-
-const colorMap = {
-  I: '#ff03',
-  N: '#0a03',
-  D: '#00f3',
-  X: 'brown',
-  M: '#f003',
-  '=': '#f003',
-}
-
-const lineLimit = 3
-
-const oobLimit = 1600
-
-export function getId(r: number, g: number, b: number, unitMultiplier: number) {
-  return Math.floor((r * 255 * 255 + g * 255 + b - 1) / unitMultiplier)
-}
-
-export function drawRef(
-  model: LinearSyntenyDisplayModel,
-  ctx1: CanvasRenderingContext2D,
-  ctx3?: CanvasRenderingContext2D,
-) {
-  const view = getContainingView(model) as LinearSyntenyViewModel
-  const drawCurves = view.drawCurves
-  const drawCIGAR = view.drawCIGAR
-  const height = view.middleComparativeHeight
-  const width = view.width
-  const bpPerPxs = view.views.map(v => v.bpPerPx)
-
-  if (ctx3) {
-    ctx3.imageSmoothingEnabled = false
-  }
-
-  ctx1.beginPath()
-  const featPos = model.featPositions
-  const offsets = view.views.map(v => v.offsetPx)
-
-  const unitMultiplier = Math.floor(MAX_COLOR_RANGE / featPos.length)
-
-  // this loop is optimized to draw many thin lines with a single ctx.stroke
-  // call, a separate loop below draws larger boxes
-  ctx1.fillStyle = colorMap.M
-  ctx1.strokeStyle = colorMap.M
-  for (let i = 0; i < featPos.length; i++) {
-    const { p11, p12, p21, p22 } = featPos[i]
-    const x11 = p11.offsetPx - offsets[0]
-    const x12 = p12.offsetPx - offsets[0]
-    const x21 = p21.offsetPx - offsets[1]
-    const x22 = p22.offsetPx - offsets[1]
-    const l1 = Math.abs(x12 - x11)
-    const l2 = Math.abs(x22 - x21)
-    const y1 = 0
-    const y2 = height
-    const mid = (y2 - y1) / 2
-
-    // drawing a line if the results are thin results in much less pixellation
-    // than filling in a thin polygon
-    if (
-      l1 <= lineLimit &&
-      l2 <= lineLimit &&
-      x21 < width + oobLimit &&
-      x21 > -oobLimit
-    ) {
-      ctx1.moveTo(x11, y1)
-      if (drawCurves) {
-        ctx1.bezierCurveTo(x11, mid, x21, mid, x21, y2)
-      } else {
-        ctx1.lineTo(x21, y2)
-      }
-    }
-  }
-  ctx1.stroke()
-
-  // this loop only draws small lines as a polyline, the polyline calls
-  // ctx.stroke once is much more efficient than calling stroke() many times
-  ctx1.fillStyle = colorMap.M
-  ctx1.strokeStyle = colorMap.M
-  for (let i = 0; i < featPos.length; i++) {
-    const { p11, p12, p21, p22, f, cigar } = featPos[i]
-    const x11 = p11.offsetPx - offsets[0]
-    const x12 = p12.offsetPx - offsets[0]
-    const x21 = p21.offsetPx - offsets[1]
-    const x22 = p22.offsetPx - offsets[1]
-    const l1 = Math.abs(x12 - x11)
-    const l2 = Math.abs(x22 - x21)
-    const minX = Math.min(x21, x22)
-    const maxX = Math.max(x21, x22)
-    const y1 = 0
-    const y2 = height
-    const mid = (y2 - y1) / 2
-
-    if (
-      !(l1 <= lineLimit && l2 <= lineLimit) &&
-      doesIntersect2(minX, maxX, -oobLimit, view.width + oobLimit)
-    ) {
-      const s1 = f.get('strand')
-      const k1 = s1 === -1 ? x12 : x11
-      const k2 = s1 === -1 ? x11 : x12
-
-      // rev1/rev2 flip the direction of the CIGAR drawing in horizontally flipped
-      // modes. somewhat heuristically determined, but tested for
-      const rev1 = k1 < k2 ? 1 : -1
-      const rev2 = (x21 < x22 ? 1 : -1) * s1
-
-      // cx1/cx2 are the current x positions on top and bottom rows
-      let cx1 = k1
-      let cx2 = s1 === -1 ? x22 : x21
-      if (cigar?.length && drawCIGAR) {
-        // continuingFlag skips drawing commands on very small CIGAR features
-        let continuingFlag = false
-
-        // px1/px2 are the previous x positions on the top and bottom rows
-        let px1 = 0
-        let px2 = 0
-        const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length)
-        for (let j = 0; j < cigar.length; j += 2) {
-          const idx = j * unitMultiplier2 + 1
-
-          const len = +cigar[j]
-          const op = cigar[j + 1] as keyof typeof colorMap
-
-          if (!continuingFlag) {
-            px1 = cx1
-            px2 = cx2
-          }
-
-          const d1 = len / bpPerPxs[0]
-          const d2 = len / bpPerPxs[1]
-
-          if (op === 'M' || op === '=' || op === 'X') {
-            cx1 += d1 * rev1
-            cx2 += d2 * rev2
-          } else if (op === 'D' || op === 'N') {
-            cx1 += d1 * rev1
-          } else if (op === 'I') {
-            cx2 += d2 * rev2
-          }
-
-          // check that we are even drawing in view here, e.g. that all
-          // points are not all less than 0 or greater than width
-          if (
-            !(
-              Math.max(px1, px2, cx1, cx2) < 0 ||
-              Math.min(px1, px2, cx1, cx2) > width
-            )
-          ) {
-            // if it is a small feature and not the last element of the
-            // CIGAR (which could skip rendering it entire if we did turn
-            // it on), then turn on continuing flag
-            const isNotLast = j < cigar.length - 2
-            if (
-              Math.abs(cx1 - px1) <= 1 &&
-              Math.abs(cx2 - px2) <= 1 &&
-              isNotLast
-            ) {
-              continuingFlag = true
-            } else {
-              continuingFlag = false
-
-              // allow rendering the dominant color when using continuing
-              // flag if the last element of continuing was a large
-              // feature, else just use match
-              ctx1.fillStyle =
-                colorMap[(continuingFlag && d1 > 1) || d2 > 1 ? op : 'M']
-
-              draw(ctx1, px1, cx1, y1, cx2, px2, y2, mid, drawCurves)
-              if (ctx3) {
-                ctx3.fillStyle = makeColor(idx)
-                draw(ctx3, px1, cx1, y1, cx2, px2, y2, mid, drawCurves)
-              }
-            }
-          }
-        }
-      } else {
-        draw(ctx1, x11, x12, y1, x22, x21, y2, mid, drawCurves)
-      }
-    }
-  }
-
-  // draw click map
-  const ctx2 = model.clickMapCanvas?.getContext('2d')
-  if (!ctx2) {
-    return
-  }
-  ctx2.imageSmoothingEnabled = false
-  ctx2.clearRect(0, 0, width, height)
-  for (let i = 0; i < featPos.length; i++) {
-    const feature = featPos[i]
-    const idx = i * unitMultiplier + 1
-    ctx2.fillStyle = makeColor(idx)
-
-    // too many click map false positives with colored stroked lines
-    drawMatchSimple({
-      cb: ctx => ctx.fill(),
-      feature,
-      ctx: ctx2,
-      drawCurves,
-      offsets,
-      oobLimit,
-      viewWidth: view.width,
-      hideTiny: true,
-      height,
-    })
-  }
-}
-
-export function drawMouseoverSynteny(model: LinearSyntenyDisplayModel) {
-  const { clickId, mouseoverId } = model
-  const highResolutionScaling = 1
-  const view = getContainingView(model) as LinearSyntenyViewModel
-  const drawCurves = view.drawCurves
-  const height = view.middleComparativeHeight
-  const width = view.width
-  const ctx = model.mouseoverCanvas?.getContext('2d')
-  const offsets = view.views.map(v => v.offsetPx)
-
-  if (!ctx) {
-    return
-  }
-  ctx.resetTransform()
-  ctx.scale(highResolutionScaling, highResolutionScaling)
-  ctx.clearRect(0, 0, width, height)
-  const feature1 = model.featMap[mouseoverId || '']
-  if (feature1) {
-    ctx.fillStyle = 'rgb(0,0,0,0.1)'
-    drawMatchSimple({
-      cb: ctx => ctx.fill(),
-      feature: feature1,
-      ctx,
-      oobLimit,
-      viewWidth: view.width,
-      drawCurves,
-      offsets,
-      height,
-    })
-  }
-  const feature2 = model.featMap[clickId || '']
-  if (feature2) {
-    ctx.strokeStyle = 'rgb(0, 0, 0, 0.9)'
-
-    drawMatchSimple({
-      cb: ctx => ctx.stroke(),
-      feature: feature2,
-      ctx,
-      oobLimit,
-      viewWidth: view.width,
-      drawCurves,
-      offsets,
-      height,
-    })
-  }
-}

package/src/LinearSyntenyDisplay/index.ts

@@ -1,21 +0,0 @@
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-// locals
-import configSchemaF from './configSchemaF'
-import stateModelFactory from './model'
-import { lazy } from 'react'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addDisplayType(() => {
-    const configSchema = configSchemaF(pluginManager)
-    return new DisplayType({
-      name: 'LinearSyntenyDisplay',
-      configSchema,
-      stateModel: stateModelFactory(configSchema),
-      trackType: 'SyntenyTrack',
-      viewType: 'LinearSyntenyView',
-      ReactComponent: lazy(() => import('./components/Component')),
-    })
-  })
-}

package/src/LinearSyntenyDisplay/model.ts

@@ -1,187 +0,0 @@
-import { types, Instance } from 'mobx-state-tree'
-import {
-  getConf,
-  ConfigurationReference,
-  AnyConfigurationSchemaType,
-} from '@jbrowse/core/configuration'
-import { Feature } from '@jbrowse/core/util'
-
-// locals
-import baseModelFactory from '../LinearComparativeDisplay/stateModelFactory'
-
-interface Pos {
-  offsetPx: number
-}
-
-interface FeatPos {
-  p11: Pos
-  p12: Pos
-  p21: Pos
-  p22: Pos
-  f: Feature
-  cigar: string[]
-}
-
-/**
- * #stateModel LinearSyntenyDisplay
- * extends `LinearComparativeDisplay` model
- */
-function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
-  return types
-    .compose(
-      'LinearSyntenyDisplay',
-      baseModelFactory(configSchema),
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearSyntenyDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-      }),
-    )
-    .volatile(() => ({
-      // canvas used for drawing visible screen
-      mainCanvas: null as HTMLCanvasElement | null,
-
-      // canvas used for drawing click map with feature ids
-      // this renders a unique color per alignment, so that it can be re-traced
-      // after a feature click with getImageData at that pixel
-      clickMapCanvas: null as HTMLCanvasElement | null,
-
-      // canvas used for drawing click map with cigar data
-      // this can show if you are mousing over a insertion/deletion. it is similar
-      // in purpose to the clickMapRef but was not feasible to pack this into the
-      // clickMapRef
-      cigarClickMapCanvas: null as HTMLCanvasElement | null,
-
-      // canvas for drawing mouseover shading
-      // this is separate from the other code for speed: don't have to redraw
-      // entire canvas to do a feature's mouseover shading
-      mouseoverCanvas: null as HTMLCanvasElement | null,
-
-      // assigned by reaction
-      featPositions: [] as FeatPos[],
-
-      // currently mouse'd over feature
-      mouseoverId: undefined as string | undefined,
-
-      // currently click'd over feature
-      clickId: undefined as string | undefined,
-
-      // currently mouseover'd CIGAR subfeature
-      cigarMouseoverId: -1,
-    }))
-    .actions(self => ({
-      /**
-       * #action
-       */
-      setFeatPositions(arg: FeatPos[]) {
-        self.featPositions = arg
-      },
-      /**
-       * #action
-       */
-      setMainCanvasRef(ref: HTMLCanvasElement | null) {
-        self.mainCanvas = ref
-      },
-      /**
-       * #action
-       */
-      setClickMapCanvasRef(ref: HTMLCanvasElement | null) {
-        self.clickMapCanvas = ref
-      },
-      /**
-       * #action
-       */
-      setCigarClickMapCanvasRef(ref: HTMLCanvasElement | null) {
-        self.cigarClickMapCanvas = ref
-      },
-      /**
-       * #action
-       */
-      setMouseoverCanvasRef(ref: HTMLCanvasElement | null) {
-        self.mouseoverCanvas = ref
-      },
-      /**
-       * #action
-       */
-      setMouseoverId(arg?: string) {
-        self.mouseoverId = arg
-      },
-      /**
-       * #action
-       */
-      setCigarMouseoverId(arg: number) {
-        self.cigarMouseoverId = arg
-      },
-      /**
-       * #action
-       */
-      setClickId(arg?: string) {
-        self.clickId = arg
-      },
-    }))
-
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get adapterConfig() {
-        return {
-          name: self.parentTrack.configuration.adapter.type,
-          assemblyNames: getConf(self, 'assemblyNames'),
-          ...getConf(self.parentTrack, 'adapter'),
-        }
-      },
-      /**
-       * #getter
-       */
-      get trackIds() {
-        return getConf(self, 'trackIds') as string[]
-      },
-      /**
-       * #getter
-       */
-      get numFeats() {
-        return self.featPositions.length
-      },
-      /**
-       * #getter
-       * used for synteny svg rendering
-       */
-      get ready() {
-        return this.numFeats > 0
-      },
-
-      /**
-       * #getter
-       */
-      get featMap() {
-        return Object.fromEntries(self.featPositions.map(f => [f.f.id(), f]))
-      },
-    }))
-    .actions(self => ({
-      afterAttach() {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        ;(async () => {
-          try {
-            const { doAfterAttach } = await import('./afterAttach')
-            doAfterAttach(self)
-          } catch (e) {
-            console.error(e)
-            self.setError(e)
-          }
-        })()
-      },
-    }))
-}
-
-export type LinearSyntenyDisplayStateModel = ReturnType<
-  typeof stateModelFactory
->
-export type LinearSyntenyDisplayModel = Instance<LinearSyntenyDisplayStateModel>
-
-export default stateModelFactory

package/src/LinearSyntenyView/components/ExportSvgDialog.tsx

@@ -1,148 +0,0 @@
-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'
-import { ExportSvgOptions } from '../model'
-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 [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg')
-  const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset')
-  const [themeName, setThemeName] = useSvgLocal(
-    'theme',
-    session.themeName || 'default',
-  )
-  const [error, setError] = useState<unknown>()
-  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 />
-
-        <TextField
-          select
-          label="Track label positioning"
-          variant="outlined"
-          value={trackLabels}
-          style={{ width: 150 }}
-          onChange={event => setTrackLabels(event.target.value)}
-        >
-          <MenuItem value="offset">Offset</MenuItem>
-          <MenuItem value="overlay">Overlay</MenuItem>
-          <MenuItem value="left">Left</MenuItem>
-          <MenuItem value="none">None</MenuItem>
-        </TextField>
-        <br />
-        {session.allThemes ? (
-          <TextField
-            select
-            label="Theme"
-            variant="outlined"
-            value={themeName}
-            onChange={event => setThemeName(event.target.value)}
-          >
-            {Object.entries(session.allThemes()).map(([key, val]) => (
-              <MenuItem key={key} value={key}>
-                {
-                  // @ts-expect-error
-                  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,
-                trackLabels,
-              })
-              handleClose()
-            } catch (e) {
-              console.error(e)
-              setError(e)
-            } finally {
-              setLoading(false)
-            }
-          }}
-        >
-          Submit
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/LinearSyntenyView/components/Icons.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { SvgIcon, SvgIconProps } from '@mui/material'
-
-export function Curves(props: SvgIconProps) {
-  return (
-    <SvgIcon {...props}>
-      <path
-        fill="currentColor"
-        d="M16.5,21C13.5,21 12.31,16.76 11.05,12.28C10.14,9.04 9,5 7.5,5C4.11,5 4,11.93 4,12H2C2,11.63 2.06,3 7.5,3C10.5,3 11.71,7.25 12.97,11.74C13.83,14.8 15,19 16.5,19C19.94,19 20.03,12.07 20.03,12H22.03C22.03,12.37 21.97,21 16.5,21Z"
-      />
-    </SvgIcon>
-  )
-}
-
-export function StraightLines(props: SvgIconProps) {
-  return (
-    <SvgIcon {...props}>
-      <path
-        fill="currentColor"
-        d="M22 12L17 22L7.1 6.04L4.24 12H2L7 2L16.9 17.96L19.76 12H22Z"
-      />
-    </SvgIcon>
-  )
-}