@jbrowse/plugin-dotplot-view 2.6.1

package/src/DotplotView/svgcomponents/SVGBackground.tsx

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

package/src/DotplotView/svgcomponents/SVGDotplotView.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { when } from 'mobx'
+import { getSession } from '@jbrowse/core/util'
+import { ThemeProvider } from '@mui/material'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
+
+// locals
+import { DotplotViewModel, ExportSvgOptions } from '../model'
+import { GridRaw } from '../components/Grid'
+import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes'
+import SVGBackground from './SVGBackground'
+
+// render LGV to SVG
+export async function renderToSvg(
+  model: DotplotViewModel,
+  opts: ExportSvgOptions,
+) {
+  await when(() => model.initialized)
+  const { themeName = 'default', Wrapper = ({ children }) => <>{children}</> } =
+    opts
+  const session = getSession(model)
+  const theme = session.allThemes?.()[themeName]
+  const { width, borderX, viewWidth, viewHeight, 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 w = width + shift * 2
+
+  // 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, w, height].toString()}
+        >
+          <SVGBackground width={w} height={height} />
+          <VerticalAxisRaw model={model} />
+          <g transform={`translate(${borderX} 0)`}>
+            <GridRaw model={model} />
+            <defs>
+              <clipPath id="clip-ruler">
+                <rect x={0} y={0} width={viewWidth} height={viewHeight} />
+              </clipPath>
+            </defs>
+            <g clipPath="url(#clip-ruler)">
+              {displayResults.map(({ result }, i) => (
+                <g key={i}>{result}</g>
+              ))}
+            </g>
+          </g>
+          <g transform={`translate(${borderX} ${viewHeight})`}>
+            <HorizontalAxisRaw model={model} />
+          </g>
+        </svg>
+      </Wrapper>
+    </ThemeProvider>,
+  )
+}

package/src/LaunchDotplotView.ts

@@ -0,0 +1,63 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import { DotplotViewModel } from './DotplotView/model'
+import { transaction } from 'mobx'
+
+export default function LaunchDotplotView(pluginManager: PluginManager) {
+  pluginManager.addToExtensionPoint(
+    'LaunchView-DotplotView',
+    // @ts-expect-error
+    async ({
+      session,
+      views,
+      tracks = [],
+    }: {
+      session: AbstractSessionModel
+      views: { loc: string; assembly: string; tracks?: string[] }[]
+      tracks?: string[]
+    }) => {
+      try {
+        const model = session.addView('DotplotView', {}) as DotplotViewModel
+        const assemblyNames = views.map(view => view.assembly)
+
+        transaction(() => {
+          model.setViews([
+            { bpPerPx: 0.1, offsetPx: 0 },
+            { bpPerPx: 0.1, offsetPx: 0 },
+          ])
+          model.setAssemblyNames(assemblyNames[0], assemblyNames[1])
+        })
+
+        // http://localhost:3000/?config=test_data%2Fvolvox%2Fconfig.json&session=spec-{"views":[{"type":"DotplotView","views":[{"assembly":"volvox"},{"assembly":"volvox"}],"tracks":["volvox_fake_synteny"]}]}
+
+        const idsNotFound = [] as string[]
+        tracks.forEach(track => tryTrack(model, track, idsNotFound))
+
+        if (idsNotFound.length) {
+          throw new Error(
+            `Could not resolve identifiers: ${idsNotFound.join(',')}`,
+          )
+        }
+      } catch (e) {
+        session.notify(`${e}`, 'error')
+        throw e
+      }
+    },
+  )
+}
+
+function tryTrack(
+  model: { showTrack: (arg: string) => void },
+  trackId: string,
+  idsNotFound: string[],
+) {
+  try {
+    model.showTrack(trackId)
+  } catch (e) {
+    if (`${e}`.match('Could not resolve identifier')) {
+      idsNotFound.push(trackId)
+    } else {
+      throw e
+    }
+  }
+}

package/src/ServerSideRenderedBlockContent.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState, CSSProperties } from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { Typography } from '@mui/material'
+import { LoadingEllipses } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
+
+const useStyles = makeStyles()(theme => {
+  const bg = theme.palette.action.disabledBackground
+  return {
+    loading: {
+      paddingLeft: '0.6em',
+      backgroundColor: theme.palette.background.default,
+      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+      textAlign: 'center',
+    },
+
+    blockMessage: {
+      backgroundColor: bg,
+      padding: '10px',
+    },
+    blockError: {
+      backgroundColor: bg,
+      padding: '10px',
+      color: 'red',
+    },
+  }
+})
+
+function LoadingMessage() {
+  // only show the loading message after 300ms to prevent excessive flickering
+  const [shown, setShown] = useState(false)
+  const { classes } = useStyles()
+  useEffect(() => {
+    const timeout = setTimeout(() => setShown(true), 300)
+    return () => clearTimeout(timeout)
+  }, [])
+
+  return shown ? (
+    <div className={classes.loading}>
+      <LoadingEllipses />
+    </div>
+  ) : null
+}
+
+function BlockMessage({ messageText }: { messageText: string }) {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.blockMessage}>
+      <Typography>{`${messageText}`}</Typography>
+    </div>
+  )
+}
+
+function BlockError({ error }: { error: unknown }) {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.blockError}>
+      <Typography>{`${error}`}</Typography>
+    </div>
+  )
+}
+
+export default observer(function ({
+  model,
+  style,
+}: {
+  model: {
+    error?: unknown
+    message?: string
+    filled?: boolean
+    shouldDisplay?: boolean
+    reactElement?: React.ReactElement
+  }
+  style: CSSProperties
+}) {
+  if (model.error) {
+    return <BlockError error={model.error} data-testid="reload_button" />
+  } else if (model.message) {
+    return <BlockMessage messageText={model.message} />
+  } else if (!model.filled) {
+    return <LoadingMessage />
+  } else if (model.shouldDisplay) {
+    return <div style={style}>{model.reactElement}</div>
+  }
+  return null
+})

package/src/ServerSideSyntenyRendering.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React, { useRef, useState, useEffect } from 'react'
+import { observer, PropTypes } from 'mobx-react'
+import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPonyfill'
+
+/**
+ * A block whose content is rendered outside of the main thread and hydrated by this
+ * component.
+ */
+function ServerSideSyntenyRendering({
+  model,
+}: {
+  model: {
+    imageData: string
+    style: Record<string, string>
+    renderProps: {
+      width: number
+      height: number
+      highResolutionScaling?: number
+    }
+  }
+}) {
+  const { imageData, style, renderProps } = model
+  const { width, height, highResolutionScaling = 1 } = renderProps
+
+  const featureCanvas = useRef<HTMLCanvasElement>(null)
+  const [done, setDone] = useState(false)
+
+  useEffect(() => {
+    if (!imageData) {
+      return
+    }
+    const canvas = featureCanvas.current!
+    const context = canvas.getContext('2d')!
+    drawImageOntoCanvasContext(imageData, context)
+    setDone(true)
+  }, [height, imageData, width])
+
+  return (
+    <canvas
+      data-testid={`prerendered_canvas${done ? '_done' : ''}`}
+      ref={featureCanvas}
+      width={width * highResolutionScaling}
+      height={height * highResolutionScaling}
+      style={{ width, height, ...style }}
+    />
+  )
+}
+
+ServerSideSyntenyRendering.propTypes = {
+  model: PropTypes.observableObject.isRequired,
+}
+
+export default observer(ServerSideSyntenyRendering)

package/src/index.ts

@@ -0,0 +1,41 @@
+import Plugin from '@jbrowse/core/Plugin'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AbstractSessionModel, isAbstractMenuManager } from '@jbrowse/core/util'
+
+// icons
+import TimelineIcon from '@mui/icons-material/Timeline'
+
+// locals
+import DotplotViewF from './DotplotView'
+import DotplotDisplayF from './DotplotDisplay'
+import DotplotRendererF from './DotplotRenderer'
+import LaunchDotplotViewF from './LaunchDotplotView'
+import ComparativeRenderer from './ComparativeRenderer'
+import DotplotReadVsRefMenuItem from './DotplotReadVsRef'
+
+export default class DotplotPlugin extends Plugin {
+  name = 'DotplotPlugin'
+
+  install(pluginManager: PluginManager) {
+    DotplotViewF(pluginManager)
+    DotplotDisplayF(pluginManager)
+    DotplotRendererF(pluginManager)
+    LaunchDotplotViewF(pluginManager)
+    DotplotReadVsRefMenuItem(pluginManager)
+
+    // install our comparative rendering rpc callback
+    pluginManager.addRpcMethod(() => new ComparativeRenderer(pluginManager))
+  }
+
+  configure(pluginManager: PluginManager) {
+    if (isAbstractMenuManager(pluginManager.rootModel)) {
+      pluginManager.rootModel.appendToSubMenu(['Add'], {
+        label: 'Dotplot view',
+        icon: TimelineIcon,
+        onClick: (session: AbstractSessionModel) => {
+          session.addView('DotplotView', {})
+        },
+      })
+    }
+  }
+}

package/src/util.ts

@@ -0,0 +1,14 @@
+import { Feature } from '@jbrowse/core/util'
+
+export interface ReducedFeature {
+  refName: string
+  start: number
+  clipPos: number
+  end: number
+  seqLength: number
+}
+
+export function getTag(f: Feature, tag: string) {
+  const tags = f.get('tags')
+  return tags ? tags[tag] : f.get(tag)
+}