@jbrowse/plugin-wiggle 2.0.1 → 2.1.0

package/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -0,0 +1,261 @@
+import React from 'react'
+import {
+  measureText,
+  getContainingView,
+  getContainingTrack,
+} from '@jbrowse/core/util'
+import { getConf } from '@jbrowse/core/configuration'
+import {
+  LinearGenomeViewModel,
+  BaseLinearDisplayComponent,
+} from '@jbrowse/plugin-linear-genome-view'
+import { observer } from 'mobx-react'
+
+// locals
+import { WiggleDisplayModel } from '../models/model'
+import YScaleBar from './YScaleBar'
+
+type LGV = LinearGenomeViewModel
+
+const trackLabelFontSize = 12.8
+
+function getOffset(model: WiggleDisplayModel) {
+  const { prefersOffset } = model
+  const { trackLabels } = getContainingView(model) as LGV
+  const track = getContainingTrack(model)
+  const trackName = getConf(track, 'name')
+  return trackLabels === 'overlapping' && !prefersOffset
+    ? measureText(trackName, trackLabelFontSize) + 100
+    : 10
+}
+
+const Wrapper = observer(
+  ({
+    children,
+    model,
+    exportSVG,
+  }: {
+    model: WiggleDisplayModel
+    children: React.ReactNode
+    exportSVG?: boolean
+  }) => {
+    if (exportSVG) {
+      return <>{children}</>
+    } else {
+      const { height } = model
+      return (
+        <svg
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+            height,
+            width: 1800,
+          }}
+        >
+          {children}
+        </svg>
+      )
+    }
+  },
+)
+
+const RectBg = (props: {
+  x: number
+  y: number
+  width: number
+  height: number
+  color?: string
+}) => {
+  const { color = 'rgb(255,255,255,0.8)' } = props
+  return <rect {...props} fill={color} />
+}
+
+const ScoreLegend = observer(({ model }: { model: WiggleDisplayModel }) => {
+  const { ticks, scaleType } = model
+  const { width } = getContainingView(model) as LGV
+  const legend =
+    `[${ticks.values[0]}-${ticks.values[1]}]` +
+    (scaleType === 'log' ? ' (log scale)' : '')
+  const len = measureText(legend, 14)
+  const padding = 25
+  const xpos = width - len - padding
+  return (
+    <>
+      <RectBg y={0} x={xpos} width={len + 6} height={16} />
+      <text y={13} x={xpos}>
+        {legend}
+      </text>
+    </>
+  )
+})
+
+const ColorLegend = observer(
+  ({
+    model,
+    rowHeight,
+    labelWidth,
+    exportSVG,
+  }: {
+    model: WiggleDisplayModel
+    rowHeight: number
+    labelWidth: number
+    exportSVG?: boolean
+  }) => {
+    const {
+      needsCustomLegend,
+      needsScalebar,
+      needsFullHeightScalebar,
+      rowHeightTooSmallForScalebar,
+      renderColorBoxes,
+      sources,
+    } = model
+    const svgFontSize = Math.min(rowHeight, 12)
+    const canDisplayLabel = rowHeight > 11
+    const colorBoxWidth = renderColorBoxes ? 15 : 0
+    const legendWidth = labelWidth + colorBoxWidth + 5
+    const svgOffset = exportSVG ? 10 : 0
+    const extraOffset =
+      svgOffset || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0)
+    return sources ? (
+      <>
+        {
+          /* 0.25 for hanging letters like g */
+          needsFullHeightScalebar ? (
+            <RectBg
+              y={0}
+              x={extraOffset}
+              width={legendWidth}
+              height={(sources.length + 0.25) * rowHeight}
+            />
+          ) : null
+        }
+        {sources.map((source, idx) => {
+          const boxHeight = Math.min(20, rowHeight)
+          return (
+            <React.Fragment key={source.name + '-' + idx}>
+              {!needsFullHeightScalebar ? (
+                <RectBg
+                  y={idx * rowHeight + 1}
+                  x={extraOffset}
+                  width={legendWidth}
+                  height={boxHeight}
+                />
+              ) : null}
+              {source.color ? (
+                <RectBg
+                  y={idx * rowHeight + 1}
+                  x={extraOffset}
+                  width={colorBoxWidth}
+                  height={needsCustomLegend ? rowHeight : boxHeight}
+                  color={source.color}
+                />
+              ) : null}
+              {canDisplayLabel ? (
+                <text
+                  y={idx * rowHeight + 13}
+                  x={extraOffset + colorBoxWidth + 2}
+                  fontSize={svgFontSize}
+                >
+                  {source.name}
+                </text>
+              ) : null}
+            </React.Fragment>
+          )
+        })}
+      </>
+    ) : null
+  },
+)
+
+export const StatBars = observer(
+  (props: {
+    model: WiggleDisplayModel
+    orientation?: string
+    exportSVG?: boolean
+  }) => {
+    const { model, orientation, exportSVG } = props
+    const {
+      stats,
+      needsCustomLegend,
+      needsFullHeightScalebar,
+      rowHeightTooSmallForScalebar,
+      rowHeight,
+      sources,
+      ticks,
+    } = model
+    const svgFontSize = Math.min(rowHeight, 12)
+    const canDisplayLabel = rowHeight > 11
+    const { width: viewWidth } = getContainingView(model) as LGV
+    const minWidth = 20
+
+    const ready = stats && sources
+    if (!ready) {
+      return null
+    }
+
+    const labelWidth = Math.max(
+      ...(sources
+        .map(s => measureText(s.name, svgFontSize))
+        .map(width => (canDisplayLabel ? width : minWidth)) || [0]),
+    )
+
+    return (
+      <Wrapper {...props}>
+        {needsFullHeightScalebar ? (
+          <>
+            <g transform={`translate(${!exportSVG ? getOffset(model) : 0},0)`}>
+              <YScaleBar model={model} orientation={orientation} />
+            </g>
+            <g transform={`translate(${viewWidth - labelWidth - 100},0)`}>
+              <ColorLegend
+                exportSVG={exportSVG}
+                model={model}
+                rowHeight={12}
+                labelWidth={labelWidth}
+              />
+            </g>
+          </>
+        ) : (
+          <>
+            <ColorLegend
+              exportSVG={exportSVG}
+              model={model}
+              rowHeight={model.rowHeight}
+              labelWidth={labelWidth}
+            />
+
+            {rowHeightTooSmallForScalebar || needsCustomLegend ? (
+              <ScoreLegend {...props} />
+            ) : (
+              sources.map((_source, idx) => (
+                <g
+                  transform={`translate(0 ${rowHeight * idx})`}
+                  key={JSON.stringify(ticks) + '-' + idx}
+                >
+                  <YScaleBar model={model} orientation={orientation} />
+                </g>
+              ))
+            )}
+          </>
+        )}
+      </Wrapper>
+    )
+  },
+)
+
+const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
+  const { model } = props
+
+  return (
+    <div>
+      <BaseLinearDisplayComponent {...props} />
+      <StatBars model={model} />
+    </div>
+  )
+})
+
+export default LinearWiggleDisplay
+
+export { YScaleBar }

package/src/MultiLinearWiggleDisplay/components/YScaleBar.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Axis, LEFT, RIGHT } from 'react-d3-axis-mod'
+import { WiggleDisplayModel } from '../models/model'
+
+const YScaleBar = observer(
+  ({
+    model,
+    orientation,
+  }: {
+    model: WiggleDisplayModel
+    orientation?: string
+  }) => {
+    const { ticks } = model
+    return ticks ? (
+      <Axis
+        {...ticks}
+        shadow={2}
+        format={(n: number) => n}
+        style={{ orient: orientation === 'left' ? LEFT : RIGHT }}
+      />
+    ) : null
+  },
+)
+export default YScaleBar

package/src/MultiLinearWiggleDisplay/components/declare.d.ts

@@ -0,0 +1 @@
+declare module 'd3-color'

package/src/MultiLinearWiggleDisplay/components/util.test.ts

@@ -0,0 +1,69 @@
+import { moveUp, moveDown } from './util'
+
+test('moves elements up once', () => {
+  let elts = [{ name: 'k1' }, { name: 'k2' }, { name: 'k3' }, { name: 'k4' }]
+  elts = moveUp(elts, ['k2', 'k3'])
+  expect(elts).toEqual([
+    { name: 'k2' },
+    { name: 'k3' },
+    { name: 'k1' },
+    { name: 'k4' },
+  ])
+})
+
+test('moves elements up twice', () => {
+  let elts = [{ name: 'k1' }, { name: 'k2' }, { name: 'k3' }, { name: 'k4' }]
+  elts = moveUp(elts, ['k2', 'k3'])
+  elts = moveUp(elts, ['k2', 'k3'])
+  expect(elts).toEqual([
+    { name: 'k2' },
+    { name: 'k3' },
+    { name: 'k1' },
+    { name: 'k4' },
+  ])
+})
+
+test('moves elements down once', () => {
+  let elts = [{ name: 'k1' }, { name: 'k2' }, { name: 'k3' }, { name: 'k4' }]
+  elts = moveDown(elts, ['k2', 'k3'])
+  expect(elts).toEqual([
+    { name: 'k1' },
+    { name: 'k4' },
+    { name: 'k2' },
+    { name: 'k3' },
+  ])
+})
+
+test('moves elements down twice', () => {
+  let elts = [{ name: 'k1' }, { name: 'k2' }, { name: 'k3' }, { name: 'k4' }]
+  elts = moveDown(elts, ['k2', 'k3'])
+  elts = moveDown(elts, ['k2', 'k3'])
+  expect(elts).toEqual([
+    { name: 'k1' },
+    { name: 'k4' },
+    { name: 'k2' },
+    { name: 'k3' },
+  ])
+})
+
+test('moves elements to bottom', () => {
+  let elts = [{ name: 'k1' }, { name: 'k2' }, { name: 'k3' }, { name: 'k4' }]
+  elts = moveDown(elts, ['k1', 'k2'], 4)
+  expect(elts).toEqual([
+    { name: 'k3' },
+    { name: 'k4' },
+    { name: 'k1' },
+    { name: 'k2' },
+  ])
+})
+
+test('moves elements to top', () => {
+  let elts = [{ name: 'k1' }, { name: 'k2' }, { name: 'k3' }, { name: 'k4' }]
+  elts = moveUp(elts, ['k3', 'k4'], 4)
+  expect(elts).toEqual([
+    { name: 'k3' },
+    { name: 'k4' },
+    { name: 'k1' },
+    { name: 'k2' },
+  ])
+})

package/src/MultiLinearWiggleDisplay/components/util.ts

@@ -0,0 +1,33 @@
+export function moveUp(arr: { name: string }[], sel: string[], by = 1) {
+  const idxs = sel
+    .map(l => arr.findIndex(v => v.name === l))
+    .sort((a, b) => a - b)
+  let lastIdx = 0
+  for (let i = 0; i < idxs.length; i++) {
+    const old = idxs[i]
+    const idx = Math.max(lastIdx, old - by)
+    if (idx >= lastIdx) {
+      arr.splice(idx, 0, arr.splice(old, 1)[0])
+    }
+    lastIdx = lastIdx + 1
+  }
+
+  return arr
+}
+
+export function moveDown(arr: { name: string }[], sel: string[], by = 1) {
+  const idxs = sel
+    .map(l => arr.findIndex(v => v.name === l))
+    .sort((a, b) => b - a)
+  let lastIdx = arr.length - 1
+  for (let i = 0; i < idxs.length; i++) {
+    const old = idxs[i]
+    const idx = Math.min(lastIdx, old + by)
+    if (idx <= lastIdx) {
+      arr.splice(idx, 0, arr.splice(old, 1)[0])
+    }
+    lastIdx = lastIdx - 1
+  }
+
+  return arr
+}

package/src/MultiLinearWiggleDisplay/index.ts

@@ -0,0 +1,20 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+
+import configSchemaFactory from './models/configSchema'
+import modelFactory from './models/model'
+import ReactComponent from './components/WiggleDisplayComponent'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    return new DisplayType({
+      name: 'MultiLinearWiggleDisplay',
+      configSchema,
+      stateModel: modelFactory(pluginManager, configSchema),
+      trackType: 'MultiQuantitativeTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent,
+    })
+  })
+}

package/src/MultiLinearWiggleDisplay/models/configSchema.ts

@@ -0,0 +1,94 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view'
+import { types } from 'mobx-state-tree'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+export default function WiggleConfigFactory(pluginManager: PluginManager) {
+  const MultiXYPlotRendererConfigSchema = pluginManager.getRendererType(
+    'MultiXYPlotRenderer',
+  ).configSchema
+  const MultiDensityRendererConfigSchema = pluginManager.getRendererType(
+    'MultiDensityRenderer',
+  ).configSchema
+  const MultiRowXYPlotRendererConfigSchema = pluginManager.getRendererType(
+    'MultiRowXYPlotRenderer',
+  ).configSchema
+  const MultiLineRendererConfigSchema =
+    pluginManager.getRendererType('MultiLineRenderer').configSchema
+  const MultiRowLineRendererConfigSchema = pluginManager.getRendererType(
+    'MultiRowLineRenderer',
+  ).configSchema
+
+  return ConfigurationSchema(
+    'MultiLinearWiggleDisplay',
+    {
+      autoscale: {
+        type: 'stringEnum',
+        defaultValue: 'local',
+        model: types.enumeration('Autoscale type', [
+          'global',
+          'local',
+          'globalsd',
+          'localsd',
+          'zscore',
+        ]),
+        description:
+          'global/local using their min/max values or w/ standard deviations (globalsd/localsd)',
+      },
+      minimalTicks: {
+        type: 'boolean',
+        defaultValue: false,
+        description: 'use the minimal amount of ticks',
+      },
+
+      minScore: {
+        type: 'number',
+        defaultValue: Number.MIN_VALUE,
+        description: 'minimum value for the y-scale',
+      },
+      maxScore: {
+        type: 'number',
+        description: 'maximum value for the y-scale',
+        defaultValue: Number.MAX_VALUE,
+      },
+      numStdDev: {
+        type: 'number',
+        description:
+          'number of standard deviations to use for autoscale types globalsd or localsd',
+        defaultValue: 3,
+      },
+      scaleType: {
+        type: 'stringEnum',
+        model: types.enumeration('Scale type', ['linear', 'log']), // todo zscale
+        description: 'The type of scale to use',
+        defaultValue: 'linear',
+      },
+      inverted: {
+        type: 'boolean',
+        description: 'draw upside down',
+        defaultValue: false,
+      },
+
+      defaultRendering: {
+        type: 'stringEnum',
+        model: types.enumeration('Rendering', [
+          'multirowxy',
+          'xyplot',
+          'multirowdensity',
+          'multiline',
+          'multirowline',
+        ]),
+        defaultValue: 'multirowxy',
+      },
+
+      renderers: ConfigurationSchema('RenderersConfiguration', {
+        MultiXYPlotRenderer: MultiXYPlotRendererConfigSchema,
+        MultiDensityRenderer: MultiDensityRendererConfigSchema,
+        MultiRowXYPlotRenderer: MultiRowXYPlotRendererConfigSchema,
+        MultiLineRenderer: MultiLineRendererConfigSchema,
+        MultiRowLineRenderer: MultiRowLineRendererConfigSchema,
+      }),
+    },
+    { baseConfiguration: baseLinearDisplayConfigSchema, explicitlyTyped: true },
+  )
+}