@jbrowse/plugin-linear-genome-view 1.4.1 → 1.5.2

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,19 +1,10 @@
 import React from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-
-// material ui things
 import { Button, Paper, Typography, makeStyles } from '@material-ui/core'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-
-// misc
-import { when } from 'mobx'
 import { observer } from 'mobx-react'
-import { getParent, Instance } from 'mobx-state-tree'
-import { getConf, readConfObject } from '@jbrowse/core/configuration'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 
 // locals
-import { LinearGenomeViewStateModel, ExportSvgOptions } from '..'
+import { LinearGenomeViewModel } from '..'
 import Header from './Header'
 import TrackContainer from './TrackContainer'
 import TracksContainer from './TracksContainer'
@@ -21,18 +12,34 @@ import ImportForm from './ImportForm'
 import MiniControls from './MiniControls'
 import SequenceDialog from './SequenceDialog'
 import SearchResultsDialog from './SearchResultsDialog'
-import Ruler from './Ruler'
 
-type LGV = Instance<LinearGenomeViewStateModel>
+type LGV = LinearGenomeViewModel
 
 const useStyles = makeStyles(theme => ({
-  errorMessage: {
+  note: {
     textAlign: 'center',
     paddingTop: theme.spacing(1),
     paddingBottom: theme.spacing(1),
   },
-  spacer: {
-    marginRight: theme.spacing(2),
+  dots: {
+    '&::after': {
+      display: 'inline-block',
+      animation: '$ellipsis 1.5s infinite',
+      content: '"."',
+      width: '1em',
+      textAlign: 'left',
+    },
+  },
+  '@keyframes ellipsis': {
+    '0%': {
+      content: '"."',
+    },
+    '33%': {
+      content: '".."',
+    },
+    '66%': {
+      content: '"..."',
+    },
   },
 }))
 
@@ -41,11 +48,16 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
 
   if (!initialized && !error) {
-    return null
+    return (
+      <Typography className={classes.dots} variant="h5">
+        Loading
+      </Typography>
+    )
   }
   if (!hasDisplayedRegions || error) {
     return <ImportForm model={model} />
   }
+
   return (
     <div style={{ position: 'relative' }}>
       {model.seqDialogDisplayed ? (
@@ -79,15 +91,15 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
       )}
       <TracksContainer model={model}>
         {!tracks.length ? (
-          <Paper variant="outlined" className={classes.errorMessage}>
+          <Paper variant="outlined" className={classes.note}>
             <Typography>No tracks active.</Typography>
             <Button
               variant="contained"
               color="primary"
               onClick={model.activateTrackSelector}
               style={{ zIndex: 1000 }}
+              startIcon={<TrackSelectorIcon />}
             >
-              <TrackSelectorIcon className={classes.spacer} />
               Open track selector
             </Button>
           </Paper>
@@ -102,230 +114,3 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
 })
 
 export default LinearGenomeView
-
-function ScaleBar({ model, fontSize }: { model: LGV; fontSize: number }) {
-  const {
-    offsetPx,
-    dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp },
-  } = model
-  let displayBp
-  if (Math.floor(totalBp / 1000000) > 0) {
-    displayBp = `${parseFloat((totalBp / 1000000).toPrecision(3))}Mbp`
-  } else if (Math.floor(totalBp / 1000) > 0) {
-    displayBp = `${parseFloat((totalBp / 1000).toPrecision(3))}Kbp`
-  } else {
-    displayBp = `${Math.floor(totalBp)}bp`
-  }
-  const x0 = Math.max(-offsetPx, 0)
-  const x1 = x0 + totalWidthPx
-  return (
-    <>
-      <line x1={x0} x2={x1} y1={10} y2={10} stroke="black" />
-      <line x1={x0} x2={x0} y1={5} y2={15} stroke="black" />
-      <line x1={x1} x2={x1} y1={5} y2={15} stroke="black" />
-      <text
-        x={x0 + (x1 - x0) / 2}
-        y={fontSize * 2}
-        textAnchor="middle"
-        fontSize={fontSize}
-      >
-        {displayBp}
-      </text>
-    </>
-  )
-}
-
-function SVGRuler({
-  model,
-  fontSize,
-  width,
-}: {
-  model: LGV
-  fontSize: number
-  width: number
-}) {
-  const {
-    dynamicBlocks: { contentBlocks },
-    offsetPx: viewOffsetPx,
-    bpPerPx,
-  } = model
-  const renderRuler = contentBlocks.length < 5
-  return (
-    <>
-      <defs>
-        <clipPath id="clip-ruler">
-          <rect x={0} y={0} width={width} height={20} />
-        </clipPath>
-      </defs>
-      {contentBlocks.map(block => {
-        const offsetLeft = block.offsetPx - viewOffsetPx
-        return (
-          <g key={`${block.key}`} transform={`translate(${offsetLeft} 0)`}>
-            <text x={offsetLeft / bpPerPx} y={fontSize} fontSize={fontSize}>
-              {block.refName}
-            </text>
-            {renderRuler ? (
-              <g transform="translate(0 20)" clipPath="url(#clip-ruler)">
-                <Ruler
-                  start={block.start}
-                  end={block.end}
-                  bpPerPx={bpPerPx}
-                  reversed={block.reversed}
-                />
-              </g>
-            ) : (
-              <line
-                strokeWidth={1}
-                stroke="black"
-                x1={block.start / bpPerPx}
-                x2={block.end / bpPerPx}
-                y1={20}
-                y2={20}
-              />
-            )}
-          </g>
-        )
-      })}
-    </>
-  )
-}
-
-const fontSize = 15
-const rulerHeight = 50
-const textHeight = fontSize + 5
-const paddingHeight = 20
-const headerHeight = textHeight + 20
-
-const totalHeight = (tracks: { displays: { height: number }[] }[]) => {
-  return tracks.reduce((accum, track) => {
-    const display = track.displays[0]
-    return accum + display.height + paddingHeight + textHeight
-  }, 0)
-}
-
-// SVG component, ruler and assembly name
-const SVGHeader = ({ model }: { model: LGV }) => {
-  const { width, assemblyNames } = model
-  const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0]
-  return (
-    <g id="header">
-      <text x={0} y={fontSize} fontSize={fontSize}>
-        {assemblyName}
-      </text>
-      <g transform={`translate(0 ${fontSize})`}>
-        <ScaleBar model={model} fontSize={fontSize} />
-      </g>
-      <g transform={`translate(0 ${rulerHeight})`}>
-        <SVGRuler model={model} fontSize={fontSize} width={width} />
-      </g>
-    </g>
-  )
-}
-
-// SVG component, region separator
-const SVGRegionSeparators = ({ model }: { model: LGV }) => {
-  const { dynamicBlocks, tracks } = model
-  const initialOffset = headerHeight + rulerHeight + 20
-  const height = totalHeight(tracks)
-
-  return (
-    <>
-      {dynamicBlocks.contentBlocks.slice(1).map(block => (
-        <line
-          key={block.key}
-          x1={block.offsetPx - model.offsetPx}
-          x2={block.offsetPx - model.offsetPx}
-          y1={initialOffset}
-          y2={height}
-          stroke="black"
-          strokeOpacity={0.3}
-        />
-      ))}
-    </>
-  )
-}
-
-// SVG component, tracks
-function SVGTracks({
-  displayResults,
-  model,
-  offset,
-}: {
-  displayResults: {
-    track: {
-      configuration: AnyConfigurationModel
-      displays: { height: number }[]
-    }
-    result: string
-  }[]
-  model: LGV
-  offset: number
-}) {
-  return (
-    <>
-      {displayResults.map(({ track, result }) => {
-        const current = offset
-        const trackName =
-          getConf(track, 'name') ||
-          `Reference sequence (${readConfObject(
-            getParent(track.configuration),
-            'name',
-          )})`
-        const display = track.displays[0]
-        offset += display.height + paddingHeight + textHeight
-        return (
-          <g
-            key={track.configuration.trackId}
-            transform={`translate(0 ${current})`}
-          >
-            <text fontSize={fontSize} x={Math.max(-model.offsetPx, 0)}>
-              {trackName}
-            </text>
-            <g transform={`translate(0 ${textHeight})`}>{result}</g>
-          </g>
-        )
-      })}
-    </>
-  )
-}
-
-// render LGV to SVG
-export async function renderToSvg(model: LGV, opts: ExportSvgOptions) {
-  await when(() => model.initialized)
-  const { width, tracks } = model
-  const shift = 50
-  const offset = headerHeight + rulerHeight + 20
-  const height = totalHeight(tracks) + offset
-  const displayResults = await Promise.all(
-    tracks.map(async track => {
-      const display = track.displays[0]
-      await when(() => (display.ready !== undefined ? display.ready : true))
-      const result = await display.renderSvg(opts)
-      return { track, result }
-    }),
-  )
-
-  // the xlink namespace is used for rendering <image> tag
-  return renderToStaticMarkup(
-    <svg
-      width={width}
-      height={height}
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox={[0, 0, width + shift * 2, height].toString()}
-    >
-      {/* background white */}
-      <rect width={width + shift * 2} height={height} fill="white" />
-
-      <g stroke="none" transform={`translate(${shift} ${fontSize})`}>
-        <SVGHeader model={model} />
-        <SVGTracks
-          model={model}
-          displayResults={displayResults}
-          offset={offset}
-        />
-        <SVGRegionSeparators model={model} />
-      </g>
-    </svg>,
-  )
-}

package/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx

@@ -0,0 +1,317 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { when } from 'mobx'
+import { getParent } from 'mobx-state-tree'
+import { getConf, readConfObject } from '@jbrowse/core/configuration'
+import { getSession } from '@jbrowse/core/util'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+import Base1DView from '@jbrowse/core/util/Base1DViewModel'
+
+// locals
+import Ruler from './Ruler'
+import {
+  LinearGenomeViewModel,
+  ExportSvgOptions,
+  HEADER_OVERVIEW_HEIGHT,
+} from '..'
+import { Polygon, Cytobands } from './OverviewScaleBar'
+
+type LGV = LinearGenomeViewModel
+
+function getBpDisplayStr(totalBp: number) {
+  let displayBp
+  if (Math.floor(totalBp / 1000000) > 0) {
+    displayBp = `${parseFloat((totalBp / 1000000).toPrecision(3))}Mbp`
+  } else if (Math.floor(totalBp / 1000) > 0) {
+    displayBp = `${parseFloat((totalBp / 1000).toPrecision(3))}Kbp`
+  } else {
+    displayBp = `${Math.floor(totalBp)}bp`
+  }
+  return displayBp
+}
+
+function ScaleBar({ model, fontSize }: { model: LGV; fontSize: number }) {
+  const {
+    offsetPx,
+    dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp },
+  } = model
+  const displayBp = getBpDisplayStr(totalBp)
+  const x0 = Math.max(-offsetPx, 0)
+  const x1 = x0 + totalWidthPx
+  return (
+    <>
+      <line x1={x0} x2={x1} y1={10} y2={10} stroke="black" />
+      <line x1={x0} x2={x0} y1={5} y2={15} stroke="black" />
+      <line x1={x1} x2={x1} y1={5} y2={15} stroke="black" />
+      <text
+        x={x0 + (x1 - x0) / 2}
+        y={fontSize * 2}
+        textAnchor="middle"
+        fontSize={fontSize}
+      >
+        {displayBp}
+      </text>
+    </>
+  )
+}
+
+function SVGRuler({
+  model,
+  fontSize,
+  width,
+}: {
+  model: LGV
+  fontSize: number
+  width: number
+}) {
+  const {
+    dynamicBlocks: { contentBlocks },
+    offsetPx: viewOffsetPx,
+    bpPerPx,
+  } = model
+  const renderRuler = contentBlocks.length < 5
+  return (
+    <>
+      <defs>
+        <clipPath id="clip-ruler">
+          <rect x={0} y={0} width={width} height={20} />
+        </clipPath>
+      </defs>
+      {contentBlocks.map(block => {
+        const { key, start, end, reversed, offsetPx, refName } = block
+        const offsetLeft = offsetPx - viewOffsetPx
+        return (
+          <g key={`${key}`} transform={`translate(${offsetLeft} 0)`}>
+            <text x={offsetLeft / bpPerPx} y={fontSize} fontSize={fontSize}>
+              {refName}
+            </text>
+            {renderRuler ? (
+              <g transform="translate(0 20)" clipPath="url(#clip-ruler)">
+                <Ruler
+                  start={start}
+                  end={end}
+                  bpPerPx={bpPerPx}
+                  reversed={reversed}
+                />
+              </g>
+            ) : (
+              <line
+                strokeWidth={1}
+                stroke="black"
+                x1={start / bpPerPx}
+                x2={end / bpPerPx}
+                y1={20}
+                y2={20}
+              />
+            )}
+          </g>
+        )
+      })}
+    </>
+  )
+}
+
+const fontSize = 15
+const rulerHeight = 50
+const textHeight = fontSize + 5
+const paddingHeight = 20
+const headerHeight = textHeight + 20
+const cytobandHeightIfExists = 100
+
+interface Display {
+  height: number
+}
+interface Track {
+  displays: Display[]
+}
+
+const totalHeight = (tracks: Track[]) => {
+  return tracks.reduce((accum, track) => {
+    const display = track.displays[0]
+    return accum + display.height + paddingHeight + textHeight
+  }, 0)
+}
+
+// SVG component, ruler and assembly name
+const SVGHeader = ({ model }: { model: LGV }) => {
+  const { width, assemblyNames, showCytobands, displayedRegions } = model
+  const { assemblyManager } = getSession(model)
+  const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0]
+  const assembly = assemblyManager.get(assemblyName)
+
+  const overview = Base1DView.create({
+    displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+    interRegionPaddingWidth: 0,
+    minimumBlockWidth: model.minimumBlockWidth,
+  })
+  const visibleRegions = model.dynamicBlocks.contentBlocks
+
+  overview.setVolatileWidth(width)
+  overview.showAllRegions()
+  const block = overview.dynamicBlocks.contentBlocks[0]
+
+  const first = visibleRegions[0]
+  const firstOverviewPx =
+    overview.bpToPx({
+      ...first,
+      coord: first.reversed ? first.end : first.start,
+    }) || 0
+
+  const last = visibleRegions[visibleRegions.length - 1]
+  const lastOverviewPx =
+    overview.bpToPx({
+      ...last,
+      coord: last.reversed ? last.start : last.end,
+    }) || 0
+
+  const cytobandHeight = showCytobands ? cytobandHeightIfExists : 0
+
+  return (
+    <g id="header">
+      <text x={0} y={fontSize} fontSize={fontSize}>
+        {assemblyName}
+      </text>
+
+      {showCytobands ? (
+        <g transform={`translate(0 ${rulerHeight})`}>
+          <Cytobands overview={overview} assembly={assembly} block={block} />
+          <rect
+            stroke="red"
+            fill="rgb(255,0,0,0.1)"
+            width={Math.max(lastOverviewPx - firstOverviewPx, 0.5)}
+            height={HEADER_OVERVIEW_HEIGHT - 1}
+            x={firstOverviewPx}
+            y={0.5}
+          />
+          <g transform={`translate(0,${HEADER_OVERVIEW_HEIGHT})`}>
+            <Polygon overview={overview} model={model} useOffset={false} />
+          </g>
+        </g>
+      ) : null}
+
+      <g transform={`translate(0 ${fontSize + cytobandHeight})`}>
+        <ScaleBar model={model} fontSize={fontSize} />
+      </g>
+      <g transform={`translate(0 ${rulerHeight + cytobandHeight})`}>
+        <SVGRuler model={model} fontSize={fontSize} width={width} />
+      </g>
+    </g>
+  )
+}
+
+// SVG component, region separator
+const SVGRegionSeparators = ({
+  model,
+  height,
+}: {
+  height: number
+  model: LGV
+}) => {
+  const { dynamicBlocks, offsetPx, interRegionPaddingWidth } = model
+  return (
+    <>
+      {dynamicBlocks.contentBlocks.slice(1).map(block => (
+        <rect
+          key={block.key}
+          x={block.offsetPx - offsetPx - interRegionPaddingWidth}
+          width={interRegionPaddingWidth}
+          y={0}
+          height={height}
+          stroke="none"
+          fill="grey"
+        />
+      ))}
+    </>
+  )
+}
+
+// SVG component, tracks
+function SVGTracks({
+  displayResults,
+  model,
+  offset,
+}: {
+  displayResults: {
+    track: {
+      configuration: AnyConfigurationModel
+      displays: { height: number }[]
+    }
+    result: string
+  }[]
+  model: LGV
+  offset: number
+}) {
+  return (
+    <>
+      {displayResults.map(({ track, result }) => {
+        const current = offset
+        const trackName =
+          getConf(track, 'name') ||
+          `Reference sequence (${readConfObject(
+            getParent(track.configuration),
+            'name',
+          )})`
+        const display = track.displays[0]
+        offset += display.height + paddingHeight + textHeight
+        return (
+          <g
+            key={track.configuration.trackId}
+            transform={`translate(0 ${current})`}
+          >
+            <text fontSize={fontSize} x={Math.max(-model.offsetPx, 0)}>
+              {trackName}
+            </text>
+            <g transform={`translate(0 ${textHeight})`}>
+              {result}
+              <SVGRegionSeparators model={model} height={display.height} />
+            </g>
+          </g>
+        )
+      })}
+    </>
+  )
+}
+
+// render LGV to SVG
+export async function renderToSvg(model: LGV, opts: ExportSvgOptions) {
+  await when(() => model.initialized)
+  const { width, tracks, showCytobands } = model
+  const shift = 50
+  const offset =
+    headerHeight +
+    rulerHeight +
+    (showCytobands ? cytobandHeightIfExists : 0) +
+    20
+  const height = totalHeight(tracks) + offset
+  const displayResults = await Promise.all(
+    tracks.map(async track => {
+      const display = track.displays[0]
+      await when(() => (display.ready !== undefined ? display.ready : true))
+      const result = await display.renderSvg(opts)
+      return { track, result }
+    }),
+  )
+
+  // the xlink namespace is used for rendering <image> tag
+  return renderToStaticMarkup(
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox={[0, 0, width + shift * 2, height].toString()}
+    >
+      {/* background white */}
+      <rect width={width + shift * 2} height={height} fill="white" />
+
+      <g stroke="none" transform={`translate(${shift} ${fontSize})`}>
+        <SVGHeader model={model} />
+        <SVGTracks
+          model={model}
+          displayResults={displayResults}
+          offset={offset}
+        />
+      </g>
+    </svg>,
+  )
+}