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

package/src/LinearSyntenyView/model.ts

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

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

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

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

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

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

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

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

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