@jbrowse/plugin-linear-comparative-view 2.6.1

package/src/LinearSyntenyView/model.ts

@@ -0,0 +1,169 @@
+import React, { lazy } from 'react'
+import { types, Instance } from 'mobx-state-tree'
+import { transaction } from 'mobx'
+import { getSession } from '@jbrowse/core/util'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { saveAs } from 'file-saver'
+
+// icons
+import CropFreeIcon from '@mui/icons-material/CropFree'
+import LinkIcon from '@mui/icons-material/Link'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import PhotoCameraIcon from '@mui/icons-material/PhotoCamera'
+import { Curves } from './components/Icons'
+
+// locals
+import baseModel from '../LinearComparativeView/model'
+
+// lazies
+const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'))
+
+export interface ExportSvgOptions {
+  rasterizeLayers?: boolean
+  scale?: number
+  filename?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Wrapper?: React.FC<any>
+  fontSize?: number
+  rulerHeight?: number
+  textHeight?: number
+  paddingHeight?: number
+  headerHeight?: number
+  cytobandHeight?: number
+  themeName?: string
+  trackLabels?: string
+}
+
+/**
+ * #stateModel LinearSyntenyView
+ * extends the `LinearComparativeView` base model
+ */
+export default function stateModelFactory(pluginManager: PluginManager) {
+  return types
+    .compose(
+      baseModel(pluginManager),
+      types.model('LinearSyntenyView', {
+        /**
+         * #property
+         */
+        type: types.literal('LinearSyntenyView'),
+        /**
+         * #property/
+         */
+        drawCIGAR: true,
+        /**
+         * #property
+         */
+        drawCurves: false,
+      }),
+    )
+    .actions(self => ({
+      /**
+       * #action
+       */
+      toggleCurves() {
+        self.drawCurves = !self.drawCurves
+      },
+      /**
+       * #action
+       */
+      toggleCIGAR() {
+        self.drawCIGAR = !self.drawCIGAR
+      },
+      /**
+       * #action
+       */
+      showAllRegions() {
+        transaction(() => {
+          self.views.forEach(view => view.showAllRegionsInAssembly())
+        })
+      },
+    }))
+    .actions(self => ({
+      async exportSvg(opts: ExportSvgOptions) {
+        const { renderToSvg } = await import(
+          './svgcomponents/SVGLinearSyntenyView'
+        )
+        const html = await renderToSvg(self as LinearSyntenyViewModel, opts)
+        const blob = new Blob([html], { type: 'image/svg+xml' })
+        saveAs(blob, opts.filename || 'image.svg')
+      },
+    }))
+    .views(self => {
+      const superHeaderMenuItems = self.headerMenuItems
+      const superMenuItems = self.menuItems
+      return {
+        /**
+         * #method
+         * includes a subset of view menu options because the full list is a
+         * little overwhelming
+         */
+        headerMenuItems() {
+          return [
+            ...superHeaderMenuItems(),
+            {
+              label: 'Square view',
+              onClick: self.squareView,
+              description:
+                'Makes both views use the same zoom level, adjusting to the average of each',
+              icon: CropFreeIcon,
+            },
+            {
+              label: 'Show all regions',
+              onClick: self.showAllRegions,
+              description: 'Show entire genome assemblies',
+              icon: VisibilityIcon,
+            },
+            {
+              label: 'Draw CIGAR',
+              onClick: self.toggleCIGAR,
+              checked: self.drawCIGAR,
+              type: 'checkbox',
+              description: 'Draws per-base CIGAR level alignments',
+            },
+            {
+              label: 'Link views',
+              type: 'checkbox',
+              checked: self.linkViews,
+              onClick: self.toggleLinkViews,
+              icon: LinkIcon,
+            },
+            {
+              label: 'Use curved lines',
+              type: 'checkbox',
+              checked: self.drawCurves,
+              onClick: self.toggleCurves,
+              icon: Curves,
+            },
+            {
+              label: 'Export SVG',
+              icon: PhotoCameraIcon,
+              onClick: (): void => {
+                getSession(self).queueDialog(handleClose => [
+                  ExportSvgDialog,
+                  { model: self, handleClose },
+                ])
+              },
+            },
+          ]
+        },
+        menuItems() {
+          return [
+            ...superMenuItems(),
+            {
+              label: 'Export SVG',
+              icon: PhotoCameraIcon,
+              onClick: () => {
+                getSession(self).queueDialog(handleClose => [
+                  ExportSvgDialog,
+                  { model: self, handleClose },
+                ])
+              },
+            },
+          ]
+        },
+      }
+    })
+}
+export type LinearSyntenyViewStateModel = ReturnType<typeof stateModelFactory>
+export type LinearSyntenyViewModel = Instance<LinearSyntenyViewStateModel>

package/src/LinearSyntenyView/svgcomponents/SVGBackground.tsx

@@ -0,0 +1,21 @@
+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/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.tsx

@@ -0,0 +1,176 @@
+import React from 'react'
+import { ThemeProvider } from '@mui/material'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { when } from 'mobx'
+import {
+  getSession,
+  getSerializedSvg,
+  max,
+  measureText,
+  ReactRendering,
+  renderToAbstractCanvas,
+  sum,
+} from '@jbrowse/core/util'
+import { getTrackName } from '@jbrowse/core/util/tracks'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
+import {
+  SVGTracks,
+  SVGRuler,
+  totalHeight,
+} from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import SVGBackground from './SVGBackground'
+import { ExportSvgOptions, LinearSyntenyViewModel } from '../model'
+import { drawRef } from '../../LinearSyntenyDisplay/drawSynteny'
+
+type LSV = LinearSyntenyViewModel
+
+// render LGV to SVG
+export async function renderToSvg(model: LSV, opts: ExportSvgOptions) {
+  await when(() => model.initialized)
+  const {
+    textHeight = 18,
+    headerHeight = 30,
+    rulerHeight = 30,
+    fontSize = 13,
+    trackLabels = 'offset',
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Wrapper = ({ children }: any) => <>{children}</>,
+    themeName = 'default',
+  } = opts
+  const session = getSession(model)
+  const theme = session.allThemes?.()[themeName]
+  const { width, views, middleComparativeHeight: synH, tracks } = model
+  const shift = 50
+  const offset = headerHeight + rulerHeight
+
+  const heights = views.map(
+    v => totalHeight(v.tracks, textHeight, trackLabels) + offset,
+  )
+  const totalHeightSvg = sum(heights) + synH + 100
+  const displayResults = await Promise.all(
+    views.map(
+      async view =>
+        ({
+          view,
+          data: await Promise.all(
+            view.tracks.map(async track => {
+              const d = track.displays[0]
+              await when(() => (d.ready !== undefined ? d.ready : true))
+              return { track, result: await d.renderSvg({ ...opts, theme }) }
+            }),
+          ),
+        } as const),
+    ),
+  )
+
+  const renderings = await Promise.all(
+    tracks.map(async track => {
+      const d = track.displays[0]
+      await when(() => (d.ready !== undefined ? d.ready : true))
+      const r = await renderToAbstractCanvas(
+        width,
+        synH,
+        { exportSVG: opts },
+        ctx => drawRef(d, ctx),
+      )
+
+      if ('imageData' in r) {
+        throw new Error('found a canvas in svg export, probably a bug')
+      } else if ('canvasRecordedData' in r) {
+        return {
+          html: await getSerializedSvg({
+            ...r,
+            width,
+            height: synH,
+          }),
+        }
+      } else {
+        return r
+      }
+    }),
+  )
+
+  const trackLabelMaxLen =
+    max(
+      views.flatMap(view =>
+        view.tracks.map(t =>
+          measureText(getTrackName(t.configuration, session), fontSize),
+        ),
+      ),
+      0,
+    ) + 40
+  const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0
+  const w = width + trackLabelOffset
+
+  const t = createJBrowseTheme(theme)
+
+  // the xlink namespace is used for rendering <image> tag
+  return renderToStaticMarkup(
+    <ThemeProvider theme={createJBrowseTheme(theme)}>
+      <Wrapper>
+        <svg
+          width={width}
+          height={totalHeightSvg}
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox={[0, 0, w + shift * 2, totalHeightSvg].toString()}
+        >
+          <SVGBackground width={w} height={totalHeightSvg} shift={shift} />
+          <g transform={`translate(${shift} ${fontSize})`}>
+            <g transform={`translate(${trackLabelOffset})`}>
+              <text x={0} fontSize={fontSize} fill={t.palette.text.primary}>
+                {views[0].assemblyNames.join(', ')}
+              </text>
+
+              <SVGRuler model={displayResults[0].view} fontSize={fontSize} />
+            </g>
+            <SVGTracks
+              textHeight={textHeight}
+              trackLabels={trackLabels}
+              fontSize={fontSize}
+              model={displayResults[0].view}
+              displayResults={displayResults[0].data}
+              offset={offset}
+              trackLabelOffset={trackLabelOffset}
+            />
+          </g>
+
+          <defs>
+            <clipPath id={'synclip'}>
+              <rect x={0} y={0} width={width} height={synH} />
+            </clipPath>
+          </defs>
+          <g
+            transform={`translate(${shift + trackLabelOffset} ${
+              fontSize + heights[0]
+            })`}
+            clipPath={`url(#synclip)`}
+          >
+            {renderings.map((r, i) => (
+              <ReactRendering key={i} rendering={r} />
+            ))}
+          </g>
+          <g transform={`translate(${shift} ${fontSize + heights[0] + synH})`}>
+            <g transform={`translate(${trackLabelOffset})`}>
+              <text x={0} fontSize={fontSize} fill={t.palette.text.primary}>
+                {views[1].assemblyNames.join(', ')}
+              </text>
+              <SVGRuler model={displayResults[1].view} fontSize={fontSize} />
+            </g>
+            <SVGTracks
+              textHeight={textHeight}
+              trackLabels={trackLabels}
+              fontSize={fontSize}
+              model={displayResults[1].view}
+              displayResults={displayResults[1].data}
+              offset={offset}
+              trackLabelOffset={trackLabelOffset}
+            />
+          </g>
+        </svg>
+      </Wrapper>
+    </ThemeProvider>,
+  )
+}

package/src/SyntenyFeatureDetail/SyntenyFeatureDetail.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import copy from 'copy-to-clipboard'
+import { Paper } from '@mui/material'
+import { observer } from 'mobx-react'
+import {
+  BaseCoreDetails,
+  BaseAttributes,
+} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import { SimpleFeatureSerialized } from '@jbrowse/core/util/simpleFeature'
+
+function Formatter({ value }: { value: unknown }) {
+  const [show, setShow] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const display = String(value)
+  if (display.length > 100) {
+    return (
+      <>
+        <button
+          type="button"
+          onClick={() => {
+            copy(display)
+            setCopied(true)
+            setTimeout(() => {
+              setCopied(false)
+            }, 700)
+          }}
+        >
+          {copied ? 'Copied to clipboard' : 'Copy'}
+        </button>
+        <button type="button" onClick={() => setShow(val => !val)}>
+          {show ? 'Show less' : 'Show more'}
+        </button>
+        <div>{show ? display : `${display.slice(0, 100)}...`}</div>
+      </>
+    )
+  }
+  return <div>{display}</div>
+}
+
+function CustomFeatureDetails(props: { feature: SimpleFeatureSerialized }) {
+  return (
+    <BaseAttributes
+      {...props}
+      formatter={(value: unknown) => <Formatter value={value} />}
+    />
+  )
+}
+
+const BreakpointAlignmentsFeatureDetail = observer(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ({ model }: { model: any }) => {
+    const { feature1, feature2 } = JSON.parse(JSON.stringify(model.featureData))
+    return (
+      <Paper data-testid="alignment-side-drawer">
+        <BaseCoreDetails title="Feature 1" feature={feature1} />
+        <BaseCoreDetails title="Feature 2" feature={feature2} />
+        <CustomFeatureDetails feature={feature1} />
+        <CustomFeatureDetails feature={feature2} />
+      </Paper>
+    )
+  },
+)
+
+export default BreakpointAlignmentsFeatureDetail

package/src/SyntenyFeatureDetail/index.ts

@@ -0,0 +1,36 @@
+import { lazy } from 'react'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+import { types } from 'mobx-state-tree'
+
+const configSchema = ConfigurationSchema('SyntenyFeatureWidget', {})
+
+const stateModel = types
+  .model('SyntenyFeatureWidget', {
+    id: ElementId,
+    type: types.literal('SyntenyFeatureWidget'),
+    featureData: types.frozen(),
+  })
+  .actions(self => ({
+    setFeatureData(data: unknown) {
+      self.featureData = data
+    },
+    clearFeatureData() {
+      self.featureData = undefined
+    },
+  }))
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addWidgetType(
+    () =>
+      new WidgetType({
+        name: 'SyntenyFeatureWidget',
+        heading: 'Synteny feature details',
+        configSchema,
+        stateModel,
+        ReactComponent: lazy(() => import('./SyntenyFeatureDetail')),
+      }),
+  )
+}

package/src/SyntenyTrack/configSchema.ts

@@ -0,0 +1,23 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes/models'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+/**
+ * #config SyntenyTrack
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const configSchema = (pluginManager: PluginManager) =>
+  ConfigurationSchema(
+    'SyntenyTrack',
+    {},
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: createBaseTrackConfig(pluginManager),
+    },
+  )
+
+export default configSchema

package/src/SyntenyTrack/index.tsx

@@ -0,0 +1,15 @@
+import { createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
+import PluginManager from '@jbrowse/core/PluginManager'
+import configSchemaF from './configSchema'
+
+export default (pm: PluginManager) => {
+  pm.addTrackType(() => {
+    const configSchema = configSchemaF(pm)
+    return new TrackType({
+      name: 'SyntenyTrack',
+      configSchema,
+      stateModel: createBaseTrackModel(pm, 'SyntenyTrack', configSchema),
+    })
+  })
+}

package/src/index.tsx

@@ -0,0 +1,42 @@
+import Plugin from '@jbrowse/core/Plugin'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AbstractSessionModel, isAbstractMenuManager } from '@jbrowse/core/util'
+
+import CalendarIcon from '@mui/icons-material/CalendarViewDay'
+import LinearComparativeDisplayF from './LinearComparativeDisplay'
+import LinearComparativeViewF from './LinearComparativeView'
+import LinearSyntenyDisplayF from './LinearSyntenyDisplay'
+import LGVSyntenyDisplayF from './LGVSyntenyDisplay'
+import LinearSyntenyViewF from './LinearSyntenyView'
+import LaunchLinearSyntenyViewF from './LaunchLinearSyntenyView'
+import SyntenyTrackF from './SyntenyTrack'
+import SyntenyFeatureWidgetF from './SyntenyFeatureDetail'
+import LinearReadVsRefMenuItem from './LinearReadVsRef'
+
+export default class extends Plugin {
+  name = 'LinearComparativeViewPlugin'
+
+  install(pluginManager: PluginManager) {
+    LinearComparativeViewF(pluginManager)
+    LinearSyntenyViewF(pluginManager)
+    LinearComparativeDisplayF(pluginManager)
+    LinearSyntenyDisplayF(pluginManager)
+    LGVSyntenyDisplayF(pluginManager)
+    LaunchLinearSyntenyViewF(pluginManager)
+    SyntenyTrackF(pluginManager)
+    SyntenyFeatureWidgetF(pluginManager)
+    LinearReadVsRefMenuItem(pluginManager)
+  }
+
+  configure(pluginManager: PluginManager) {
+    if (isAbstractMenuManager(pluginManager.rootModel)) {
+      pluginManager.rootModel.appendToSubMenu(['Add'], {
+        label: 'Linear synteny view',
+        icon: CalendarIcon,
+        onClick: (session: AbstractSessionModel) => {
+          session.addView('LinearSyntenyView', {})
+        },
+      })
+    }
+  }
+}

package/src/util.ts

@@ -0,0 +1,124 @@
+import { clamp } from '@jbrowse/core/util'
+import { Region } from '@jbrowse/core/util/types'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+
+export type LayoutRecord = [number, number, number, number]
+
+export interface ReducedLinearGenomeView {
+  bpPerPx: number
+  offsetPx: number
+  staticBlocks: Region[]
+  dynamicBlocks: Region[]
+  displayedRegions: Region[]
+  headerHeight: number
+  scaleBarHeight: number
+  height: number
+  features: Feature[]
+  tracks: {
+    scrollTop: number
+    height: number
+    configuration: string
+    skip: number
+  }[]
+}
+
+const [, TOP, , BOTTOM] = [0, 1, 2, 3]
+
+export function cheight(chunk: LayoutRecord) {
+  return chunk[BOTTOM] - chunk[TOP]
+}
+function heightFromSpecificLevel(
+  views: ReducedLinearGenomeView[],
+  trackConfigId: string,
+  level: number,
+) {
+  const heightUpUntilThisPoint = views
+    .slice(0, level)
+    .map(v => v.height + 7)
+    .reduce((a, b) => a + b, 0)
+
+  return (
+    heightUpUntilThisPoint +
+    views[level].headerHeight +
+    views[level].scaleBarHeight +
+    getTrackPos(views[level], trackConfigId) +
+    1
+  )
+}
+
+export function getTrackPos(
+  view: ReducedLinearGenomeView,
+  trackConfigId: string,
+) {
+  const idx = view.tracks.findIndex(t => t.configuration === trackConfigId)
+  let accum = 0
+  for (let i = 0; i < idx; i += 1) {
+    accum += view.tracks[i].height + 3 // +1px for trackresizehandle
+  }
+  return accum
+}
+
+// Uses bpToPx to get the screen pixel coordinates but ignores some conditions
+// where bpToPx could return undefined
+export function getPxFromCoordinate(
+  view: ReducedLinearGenomeView,
+  refName: string,
+  coord: number,
+) {
+  return (
+    ((bpToPx(view, { refName, coord }) || {}).offsetPx || 0) - view.offsetPx
+  )
+}
+
+// Retrieves the y-position of a layout record in a track
+// If track not found returns 0
+export function overlayYPos(
+  trackConfigId: string,
+  level: number,
+  views: ReducedLinearGenomeView[],
+  c: LayoutRecord,
+  cond: boolean,
+) {
+  const track = views[level].tracks.find(t => t.configuration === trackConfigId)
+  const ypos = track
+    ? clamp(c[TOP] - (track.scrollTop || 0), 0, track.height) +
+      heightFromSpecificLevel(views, trackConfigId, level) +
+      track.skip
+    : 0
+
+  return ypos + (cond ? cheight(c) : 0)
+}
+
+// Returns the pixel screen position of a refName:coord input, or undefined if
+// the input could not be located. Uses view.displayedRegions as a representation
+// of what is on the screen
+//
+// Note: does not consider that this refName:coord input could multi-match
+function bpToPx(
+  view: ReducedLinearGenomeView,
+  { refName, coord }: { refName: string; coord: number },
+) {
+  let offsetBp = 0
+
+  const index = view.displayedRegions.findIndex(r => {
+    if (refName === r.refName && coord >= r.start && coord <= r.end) {
+      offsetBp += coord - r.start
+      return true
+    }
+    offsetBp += r.end - r.start
+    return false
+  })
+  const foundRegion = view.displayedRegions[index]
+  if (foundRegion) {
+    return {
+      index,
+      offsetPx: Math.round(offsetBp / view.bpPerPx),
+    }
+  }
+  return undefined
+}
+
+// Returns either 0 or height depending on condition
+export function interstitialYPos(cond: boolean, height: number) {
+  return cond ? 0 : height
+}