@jbrowse/plugin-breakpoint-split-view 2.6.1 → 2.6.2

package/src/BreakpointSplitView/model.ts

@@ -1,333 +0,0 @@
-import React, { lazy } from 'react'
-import {
-  types,
-  getParent,
-  onAction,
-  addDisposer,
-  getPath,
-  Instance,
-} from 'mobx-state-tree'
-import { autorun } from 'mobx'
-import { saveAs } from 'file-saver'
-
-// jbrowse
-import {
-  LinearGenomeViewModel,
-  LinearGenomeViewStateModel,
-} from '@jbrowse/plugin-linear-genome-view'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
-import { getSession, Feature, notEmpty } from '@jbrowse/core/util'
-import { AnyConfigurationModel, getConf } from '@jbrowse/core/configuration'
-
-// icons
-import PhotoCamera from '@mui/icons-material/PhotoCamera'
-import LinkIcon from '@mui/icons-material/Link'
-
-// locals
-import { intersect } from './util'
-
-// lazies
-const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'))
-
-function calc(
-  track: { displays: { searchFeatureByID: (str: string) => LayoutRecord }[] },
-  feat: Feature,
-) {
-  return track.displays[0].searchFeatureByID(feat.id())
-}
-
-export interface ExportSvgOptions {
-  rasterizeLayers?: boolean
-  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
-  trackLabels?: string
-  themeName?: string
-}
-
-type LGV = LinearGenomeViewModel
-
-export interface Breakend {
-  MateDirection: string
-  Join: string
-  Replacement: string
-  MatePosition: string
-}
-
-export type LayoutRecord = [number, number, number, number]
-
-async function getBlockFeatures(
-  model: BreakpointViewModel,
-  track: { configuration: AnyConfigurationModel },
-) {
-  const { views } = model
-  const { rpcManager, assemblyManager } = getSession(model)
-  const assemblyName = model.views[0].assemblyNames[0]
-  const assembly = await assemblyManager.waitForAssembly(assemblyName)
-  if (!assembly) {
-    return undefined // throw new Error(`assembly not found: "${assemblyName}"`)
-  }
-  const sessionId = track.configuration.trackId
-  return Promise.all(
-    views.map(async view =>
-      (
-        (await rpcManager.call(sessionId, 'CoreGetFeatures', {
-          adapterConfig: getConf(track, ['adapter']),
-          sessionId,
-          regions: view.staticBlocks.contentBlocks,
-        })) as Feature[][]
-      ).flat(),
-    ),
-  )
-}
-
-export default function stateModelFactory(pluginManager: PluginManager) {
-  const minHeight = 40
-  const defaultHeight = 400
-  const model = types
-    .model('BreakpointSplitView', {
-      type: types.literal('BreakpointSplitView'),
-      height: types.optional(
-        types.refinement(
-          'viewHeight',
-          types.number,
-          (n: number) => n >= minHeight,
-        ),
-        defaultHeight,
-      ),
-      trackSelectorType: 'hierarchical',
-      showIntraviewLinks: true,
-      linkViews: false,
-      interactToggled: false,
-      views: types.array(
-        pluginManager.getViewType('LinearGenomeView')
-          .stateModel as LinearGenomeViewStateModel,
-      ),
-    })
-    .volatile(() => ({
-      width: 800,
-      matchedTrackFeatures: {} as { [key: string]: Feature[][] },
-    }))
-    .views(self => ({
-      /**
-       * #method
-       * creates an svg export and save using FileSaver
-       */
-      async exportSvg(opts: ExportSvgOptions = {}) {
-        const { renderToSvg } = await import(
-          './svgcomponents/SVGBreakpointSplitView'
-        )
-        const html = await renderToSvg(self as BreakpointViewModel, opts)
-        const blob = new Blob([html], { type: 'image/svg+xml' })
-        saveAs(blob, opts.filename || 'image.svg')
-      },
-    }))
-    .views(self => ({
-      // Find all track ids that match across multiple views
-      get matchedTracks() {
-        return intersect(
-          elt => elt.configuration.trackId as string,
-          ...self.views.map(view => view.tracks),
-        )
-      },
-
-      // Get tracks with a given trackId across multiple views
-      getMatchedTracks(trackConfigId: string) {
-        return self.views
-          .map(view => view.getTrack(trackConfigId))
-          .filter(f => !!f)
-      },
-
-      // Translocation features are handled differently
-      // since they do not have a mate e.g. they are one sided
-      hasTranslocations(trackConfigId: string) {
-        return [...this.getTrackFeatures(trackConfigId).values()].find(
-          f => f.get('type') === 'translocation',
-        )
-      },
-
-      // Get a composite map of featureId->feature map for a track across
-      // multiple views
-      getTrackFeatures(trackConfigId: string) {
-        return new Map(
-          self.matchedTrackFeatures[trackConfigId]
-            ?.flat()
-            .map(f => [f.id(), f]),
-        )
-      },
-
-      getMatchedFeaturesInLayout(trackConfigId: string, features: Feature[][]) {
-        // use reverse to search the second track first
-        const tracks = this.getMatchedTracks(trackConfigId)
-
-        return features.map(c =>
-          c
-            .map(feature => {
-              const level = tracks.findIndex(track => calc(track, feature))
-              return level !== -1
-                ? {
-                    feature,
-                    layout: calc(tracks[level], feature),
-                    level,
-                  }
-                : undefined
-            })
-            .filter(notEmpty),
-        )
-      },
-    }))
-    .actions(self => ({
-      afterAttach() {
-        addDisposer(
-          self,
-          onAction(
-            self,
-            ({
-              name,
-              path,
-              args,
-            }: {
-              name: string
-              path?: string
-              args?: unknown[]
-            }) => {
-              if (self.linkViews) {
-                const actions = [
-                  'horizontalScroll',
-                  'zoomTo',
-                  'setScaleFactor',
-                  'showTrack',
-                  'toggleTrack',
-                  'hideTrack',
-                  'setTrackLabels',
-                  'toggleCenterLine',
-                ]
-                if (actions.includes(name) && path) {
-                  this.onSubviewAction(name, path, args)
-                }
-              }
-            },
-          ),
-        )
-      },
-
-      onSubviewAction(actionName: string, path: string, args?: unknown[]) {
-        self.views.forEach(view => {
-          const ret = getPath(view)
-          if (ret.lastIndexOf(path) !== ret.length - path.length) {
-            // @ts-ignore
-            view[actionName](args?.[0])
-          }
-        })
-      },
-
-      setWidth(newWidth: number) {
-        self.width = newWidth
-        self.views.forEach(v => v.setWidth(newWidth))
-      },
-
-      removeView(view: LGV) {
-        self.views.remove(view)
-      },
-
-      closeView() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        getParent<any>(self, 2).removeView(self)
-      },
-
-      toggleInteract() {
-        self.interactToggled = !self.interactToggled
-      },
-      toggleIntraviewLinks() {
-        self.showIntraviewLinks = !self.showIntraviewLinks
-      },
-      toggleLinkViews() {
-        self.linkViews = !self.linkViews
-      },
-      setMatchedTrackFeatures(obj: { [key: string]: Feature[][] }) {
-        self.matchedTrackFeatures = obj
-      },
-    }))
-    .actions(self => ({
-      afterAttach() {
-        addDisposer(
-          self,
-          autorun(async () => {
-            try {
-              if (!self.views.every(view => view.initialized)) {
-                return
-              }
-              self.setMatchedTrackFeatures(
-                Object.fromEntries(
-                  await Promise.all(
-                    self.matchedTracks.map(async track => [
-                      track.configuration.trackId,
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                      await getBlockFeatures(self as any, track),
-                    ]),
-                  ),
-                ),
-              )
-            } catch (e) {
-              console.error(e)
-              getSession(self).notify(`${e}`, 'error')
-            }
-          }),
-        )
-      },
-
-      menuItems() {
-        return [
-          ...self.views
-            .map((view, idx) => [idx, view.menuItems?.()] as const)
-            .filter(f => !!f[1])
-            .map(f => ({ label: `View ${f[0] + 1} Menu`, subMenu: f[1] })),
-
-          {
-            label: 'Show intra-view links',
-            type: 'checkbox',
-            checked: self.showIntraviewLinks,
-            onClick: () => self.toggleIntraviewLinks(),
-          },
-          {
-            label: 'Allow clicking alignment squiggles?',
-            type: 'checkbox',
-            checked: self.interactToggled,
-            onClick: () => self.toggleInteract(),
-          },
-
-          {
-            label: 'Link views',
-            type: 'checkbox',
-            icon: LinkIcon,
-            checked: self.linkViews,
-            onClick: () => {
-              self.toggleLinkViews()
-            },
-          },
-          {
-            label: 'Export SVG',
-            icon: PhotoCamera,
-            onClick: (): void => {
-              getSession(self).queueDialog(handleClose => [
-                ExportSvgDialog,
-                { model: self, handleClose },
-              ])
-            },
-          },
-        ]
-      },
-    }))
-
-  return types.compose(BaseViewModel, model)
-}
-
-export type BreakpointViewStateModel = ReturnType<typeof stateModelFactory>
-export type BreakpointViewModel = Instance<BreakpointViewStateModel>

package/src/BreakpointSplitView/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/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.tsx

@@ -1,179 +0,0 @@
-import React from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { when } from 'mobx'
-import {
-  AbstractSessionModel,
-  getSession,
-  max,
-  measureText,
-  sum,
-} from '@jbrowse/core/util'
-import { ThemeProvider } from '@mui/material'
-import { createJBrowseTheme } from '@jbrowse/core/ui'
-
-// locals
-import {
-  SVGTracks,
-  SVGRuler,
-  totalHeight,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view'
-
-// locals
-import SVGBackground from './SVGBackground'
-import { ExportSvgOptions, BreakpointViewModel } from '../model'
-import { getTrackName } from '@jbrowse/core/util/tracks'
-import Overlay from '../components/Overlay'
-
-type BSV = BreakpointViewModel
-
-function getTrackNameMaxLen(
-  views: LinearGenomeViewModel[],
-  fontSize: number,
-  session: AbstractSessionModel,
-) {
-  return max(
-    views.flatMap(view =>
-      view.tracks.map(t =>
-        measureText(getTrackName(t.configuration, session), fontSize),
-      ),
-    ),
-    0,
-  )
-}
-function getTrackOffsets(
-  view: LinearGenomeViewModel,
-  textOffset: number,
-  extra = 0,
-) {
-  const offsets = {} as { [key: string]: number }
-  let curr = textOffset
-  for (let i = 0; i < view.tracks.length; i++) {
-    const track = view.tracks[i]
-    offsets[track.configuration.trackId] = curr + extra
-    curr += track.displays[0].height + textOffset
-  }
-  return offsets
-}
-
-// render LGV to SVG
-export async function renderToSvg(model: BSV, opts: ExportSvgOptions) {
-  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 } = model
-  const shift = 50
-  const offset = headerHeight + rulerHeight
-
-  const heights = views.map(
-    v => totalHeight(v.tracks, textHeight, trackLabels) + offset,
-  )
-  const totalHeightSvg = sum(heights) + 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 trackLabelMaxLen = getTrackNameMaxLen(views, fontSize, session) + 40
-  const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0
-  const textOffset = trackLabels === 'offset' ? textHeight : 0
-  const trackOffsets = [
-    getTrackOffsets(views[0], textOffset, fontSize + offset),
-    getTrackOffsets(views[1], textOffset, fontSize + heights[0] + offset),
-  ]
-  const w = width + trackLabelOffset
-  const t = createJBrowseTheme(theme)
-
-  // the xlink namespace is used for rendering <image> tag
-  return renderToStaticMarkup(
-    <ThemeProvider theme={t}>
-      <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>
-
-          <g transform={`translate(${shift} ${fontSize + heights[0]})`}>
-            <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>
-
-          <defs>
-            <clipPath id="clip-bsv">
-              <rect x={0} y={0} width={width} height={totalHeightSvg} />
-            </clipPath>
-          </defs>
-          <g
-            transform={`translate(${trackLabelOffset + shift})`}
-            clipPath="url(#clip-bsv)"
-          >
-            {model.matchedTracks.map(track => (
-              <Overlay
-                parentRef={{ current: null }}
-                key={track.configuration.trackId}
-                model={model}
-                trackId={track.configuration.trackId}
-                getTrackYPosOverride={(id, level) => trackOffsets[level][id]}
-              />
-            ))}
-          </g>
-        </svg>
-      </Wrapper>
-    </ThemeProvider>,
-  )
-}

package/src/BreakpointSplitView/util.ts

@@ -1,89 +0,0 @@
-import { useState, useEffect } from 'react'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { clamp } from '@jbrowse/core/util'
-
-// locals
-import { LayoutRecord } from './model'
-
-type LGV = LinearGenomeViewModel
-
-interface Display {
-  height: number
-  scrollTop: number
-  SNPCoverageDisplay?: { height: number }
-}
-
-interface Track {
-  displays: Display[]
-}
-
-const [, TOP, , BOTTOM] = [0, 1, 2, 3]
-
-function cheight(chunk: LayoutRecord) {
-  return chunk[BOTTOM] - chunk[TOP]
-}
-
-function heightFromSpecificLevel(
-  views: LGV[],
-  trackId: string,
-  level: number,
-  getYPosOverride?: (trackId: string, level: number) => number,
-) {
-  return getYPosOverride
-    ? getYPosOverride(trackId, level)
-    : views[level].trackRefs[trackId]?.getBoundingClientRect().top || 0
-}
-
-export function getPxFromCoordinate(view: LGV, refName: string, coord: number) {
-  return ((view.bpToPx({ refName, coord }) || {}).offsetPx || 0) - view.offsetPx
-}
-
-// get's the yposition of a layout record in a track
-export function yPos(
-  trackId: string,
-  level: number,
-  views: LGV[],
-  tracks: Track[],
-  c: LayoutRecord,
-  getYPosOverride?: (trackId: string, level: number) => number,
-) {
-  const display = tracks[level].displays[0]
-  const min = 0
-  const max = display.height
-  let offset = 0
-  const { SNPCoverageDisplay } = display
-  if (SNPCoverageDisplay) {
-    offset = SNPCoverageDisplay.height
-  }
-  const yPos = getYPosOverride ? 0 : display.scrollTop
-  return (
-    clamp(c[TOP] - yPos + cheight(c) / 2 + offset, min, max) +
-    heightFromSpecificLevel(views, trackId, level, getYPosOverride) +
-    display.scrollTop
-  )
-}
-
-// we combo a useEffect and useState combo to force rerender on snap changing.
-// the setup of this being a useEffect+useState makes it re-render once the
-// useEffect is called, which is generally the "next frame". If we removed the
-// below use
-export const useNextFrame = (variable: unknown) => {
-  const [, setNextFrameState] = useState<unknown>()
-  useEffect(() => {
-    setNextFrameState(variable)
-  }, [variable])
-}
-
-// https://stackoverflow.com/a/49186706/2129219 the array-intersection package
-// on npm has a large kb size, and we are just intersecting open track ids so
-// simple is better
-export function intersect<T>(
-  cb: (l: T) => string,
-  a1: T[] = [],
-  a2: T[] = [],
-  ...rest: T[][]
-): T[] {
-  const ids = new Set(a2.map(elt => cb(elt)))
-  const a12 = a1.filter(value => ids.has(cb(value)))
-  return rest.length === 0 ? a12 : intersect(cb, a12, ...rest)
-}

package/src/index.test.ts

@@ -1,3 +0,0 @@
-test('easy', () => {
-  expect(1).toBe(1)
-})

package/src/index.ts

@@ -1,15 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import Plugin from '@jbrowse/core/Plugin'
-import BreakpointAlignmentsWidgetF from './BreakpointAlignmentsFeatureDetail'
-import BreakpointSplitViewF from './BreakpointSplitView'
-
-export default class BreakpointSplitViewPlugin extends Plugin {
-  name = 'BreakpointSplitViewPlugin'
-
-  install(pluginManager: PluginManager) {
-    BreakpointSplitViewF(pluginManager)
-    BreakpointAlignmentsWidgetF(pluginManager)
-  }
-
-  configure() {}
-}