@jbrowse/plugin-wiggle 2.5.0 → 2.6.2

package/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -1,254 +0,0 @@
-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 '../../shared/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(function ({
-  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: getContainingView(model).width,
-        }}
-      >
-        {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(function ({
-  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 ? null : (
-              <RectBg
-                y={idx * rowHeight + 1}
-                x={extraOffset}
-                width={legendWidth}
-                height={boxHeight}
-              />
-            )}
-            {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(function (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>
-  )
-})
-
-export default observer((props: { model: WiggleDisplayModel }) => {
-  const { model } = props
-
-  return (
-    <div>
-      <BaseLinearDisplayComponent {...props} />
-      <StatBars model={model} />
-    </div>
-  )
-})
-
-export { default as YScaleBar } from '../../shared/YScaleBar'

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

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

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

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

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

@@ -1,21 +0,0 @@
-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',
-      displayName: 'Multi-wiggle display',
-      configSchema,
-      stateModel: modelFactory(pluginManager, configSchema),
-      trackType: 'MultiQuantitativeTrack',
-      viewType: 'LinearGenomeView',
-      ReactComponent,
-    })
-  })
-}

package/src/MultiLinearWiggleDisplay/models/configSchema.ts

@@ -1,142 +0,0 @@
-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'
-
-/**
- * #config MultiLinearWiggleDisplay
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-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',
-    {
-      /**
-       * #slot
-       */
-      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)',
-      },
-
-      /**
-       * #slot
-       */
-      minimalTicks: {
-        type: 'boolean',
-        defaultValue: false,
-        description: 'use the minimal amount of ticks',
-      },
-
-      /**
-       * #slot
-       */
-      minScore: {
-        type: 'number',
-        defaultValue: Number.MIN_VALUE,
-        description: 'minimum value for the y-scale',
-      },
-      /**
-       * #slot
-       */
-      maxScore: {
-        type: 'number',
-        description: 'maximum value for the y-scale',
-        defaultValue: Number.MAX_VALUE,
-      },
-      /**
-       * #slot
-       */
-      numStdDev: {
-        type: 'number',
-        description:
-          'number of standard deviations to use for autoscale types globalsd or localsd',
-        defaultValue: 3,
-      },
-      /**
-       * #slot
-       */
-      scaleType: {
-        type: 'stringEnum',
-        model: types.enumeration('Scale type', ['linear', 'log']), // todo zscale
-        description: 'The type of scale to use',
-        defaultValue: 'linear',
-      },
-
-      /**
-       * #slot
-       */
-      inverted: {
-        type: 'boolean',
-        description: 'draw upside down',
-        defaultValue: false,
-      },
-
-      /**
-       * #slot
-       */
-      defaultRendering: {
-        type: 'stringEnum',
-        model: types.enumeration('Rendering', [
-          'multirowxy',
-          'xyplot',
-          'multirowdensity',
-          'multiline',
-          'multirowline',
-        ]),
-        defaultValue: 'multirowxy',
-      },
-
-      /**
-       * #slot
-       */
-      renderers: ConfigurationSchema('RenderersConfiguration', {
-        MultiXYPlotRenderer: MultiXYPlotRendererConfigSchema,
-        MultiDensityRenderer: MultiDensityRendererConfigSchema,
-        MultiRowXYPlotRenderer: MultiRowXYPlotRendererConfigSchema,
-        MultiLineRenderer: MultiLineRendererConfigSchema,
-        MultiRowLineRenderer: MultiRowLineRendererConfigSchema,
-      }),
-
-      /**
-       * #slot
-       */
-      height: {
-        type: 'number',
-        defaultValue: 200,
-      },
-    },
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: baseLinearDisplayConfigSchema,
-      explicitlyTyped: true,
-    },
-  )
-}