@jbrowse/plugin-dotplot-view 2.6.1 → 2.6.2

package/src/DotplotView/svgcomponents/SVGBackground.tsx

@@ -1,21 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,54 +0,0 @@
-/* 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

@@ -1,41 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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)
-}