@jbrowse/plugin-wiggle 2.6.1 → 2.6.3

package/src/MultiLinearWiggleDisplay/components/SetColorDialog.tsx

@@ -1,287 +0,0 @@
-import React, { useState } from 'react'
-import { Button, DialogContent, DialogActions } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import {
-  getStr,
-  isUriLocation,
-  measureGridWidth,
-  useLocalStorage,
-} from '@jbrowse/core/util'
-import { DataGrid, GridCellParams } from '@mui/x-data-grid'
-import clone from 'clone'
-
-// locals
-import DraggableDialog from './DraggableDialog'
-import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker'
-import { moveUp, moveDown } from './util'
-import { Source } from '../../util'
-
-// icons
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp'
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
-import UriLink from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/UriLink'
-
-const useStyles = makeStyles()({
-  content: {
-    minWidth: 800,
-  },
-})
-
-export default function SetColorDialog({
-  model,
-  handleClose,
-}: {
-  model: {
-    sources?: Source[]
-    setLayout: (s: Source[]) => void
-    clearLayout: () => void
-  }
-  handleClose: () => void
-}) {
-  const { classes } = useStyles()
-  const { sources } = model
-  const [currLayout, setCurrLayout] = useState(clone(sources || []))
-  const [showTips, setShowTips] = useLocalStorage('multiwiggle-showTips', true)
-  return (
-    <DraggableDialog
-      open
-      onClose={handleClose}
-      maxWidth="xl"
-      title={'Multi-wiggle color/arrangement editor'}
-    >
-      <DialogContent className={classes.content}>
-        <Button
-          variant="contained"
-          style={{ float: 'right' }}
-          onClick={() => setShowTips(!showTips)}
-        >
-          {showTips ? 'Hide tips' : 'Show tips'}
-        </Button>
-        <br />
-        {showTips ? (
-          <>
-            Helpful tips
-            <ul>
-              <li>You can select rows in the table with the checkboxes</li>
-              <li>
-                Multi-select is enabled with shift-click and control-click
-              </li>
-              <li>
-                The "Move selected items up/down" can re-arrange subtracks
-              </li>
-              <li>
-                Sorting the data grid itself can also re-arrange subtracks
-              </li>
-              <li>Changes are applied when you hit Submit</li>
-              <li>
-                You can click and drag the dialog box to move it on the screen
-              </li>
-              <li>
-                Columns in the table can be hidden using a vertical '...' menu
-                on the right side of each column
-              </li>
-            </ul>
-          </>
-        ) : null}
-        <SourcesGrid
-          rows={currLayout}
-          onChange={setCurrLayout}
-          showTips={showTips}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          type="submit"
-          color="inherit"
-          onClick={() => {
-            model.clearLayout()
-            setCurrLayout(model.sources || [])
-          }}
-        >
-          Clear custom settings
-        </Button>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={() => {
-            handleClose()
-            setCurrLayout([...(model.sources || [])])
-          }}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          type="submit"
-          onClick={() => {
-            model.setLayout(currLayout)
-            handleClose()
-          }}
-        >
-          Submit
-        </Button>
-      </DialogActions>
-    </DraggableDialog>
-  )
-}
-
-interface SortField {
-  idx: number
-  field: string | null
-}
-
-function SourcesGrid({
-  rows,
-  onChange,
-  showTips,
-}: {
-  rows: Source[]
-  onChange: (arg: Source[]) => void
-  showTips: boolean
-}) {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const [selected, setSelected] = useState([] as string[])
-
-  // @ts-expect-error
-  const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0]
-  const [widgetColor, setWidgetColor] = useState('blue')
-  const [currSort, setCurrSort] = useState<SortField>({
-    idx: 0,
-    field: null,
-  })
-
-  return (
-    <div>
-      <Button
-        disabled={!selected.length}
-        onClick={event => setAnchorEl(event.currentTarget)}
-      >
-        Change color of selected items
-      </Button>
-      <Button
-        onClick={() => onChange(moveUp([...rows], selected))}
-        disabled={!selected.length}
-      >
-        <KeyboardArrowUpIcon />
-        {showTips ? 'Move selected items up' : null}
-      </Button>
-      <Button
-        onClick={() => onChange(moveDown([...rows], selected))}
-        disabled={!selected.length}
-      >
-        <KeyboardArrowDownIcon />
-        {showTips ? 'Move selected items down' : null}
-      </Button>
-      <Button
-        onClick={() => onChange(moveUp([...rows], selected, rows.length))}
-        disabled={!selected.length}
-      >
-        <KeyboardDoubleArrowUpIcon />
-        {showTips ? 'Move selected items to top' : null}
-      </Button>
-      <Button
-        onClick={() => onChange(moveDown([...rows], selected, rows.length))}
-        disabled={!selected.length}
-      >
-        <KeyboardDoubleArrowDownIcon />
-        {showTips ? 'Move selected items to bottom' : null}
-      </Button>
-      <ColorPopover
-        anchorEl={anchorEl}
-        color={widgetColor}
-        onChange={c => {
-          setWidgetColor(c)
-          selected.forEach(id => {
-            const elt = rows.find(f => f.name === id)
-            if (elt) {
-              elt.color = c
-            }
-          })
-
-          onChange([...rows])
-        }}
-        onClose={() => setAnchorEl(null)}
-      />
-      <div style={{ height: 400, width: '100%' }}>
-        <DataGrid
-          getRowId={row => row.name}
-          checkboxSelection
-          disableRowSelectionOnClick
-          onRowSelectionModelChange={arg => setSelected(arg as string[])}
-          rows={rows}
-          rowHeight={25}
-          columnHeaderHeight={33}
-          columns={[
-            {
-              field: 'color',
-              headerName: 'Color',
-              renderCell: params => {
-                const { value, id } = params
-                return (
-                  <ColorPicker
-                    color={value || 'blue'}
-                    onChange={c => {
-                      const elt = rows.find(f => f.name === id)
-                      if (elt) {
-                        elt.color = c
-                      }
-                      onChange([...rows])
-                    }}
-                  />
-                )
-              },
-            },
-            {
-              field: 'name',
-              sortingOrder: [null],
-              headerName: 'Name',
-              width: measureGridWidth(rows.map(r => r.name)),
-            },
-            ...Object.keys(rest).map(val => ({
-              field: val,
-              sortingOrder: [null],
-              renderCell: (params: GridCellParams) => {
-                const { value } = params
-                return isUriLocation(value) ? (
-                  <UriLink value={value} />
-                ) : (
-                  getStr(value)
-                )
-              },
-              // @ts-ignore
-              width: measureGridWidth(rows.map(r => r[val])),
-            })),
-          ]}
-          sortModel={
-            [
-              /* we control the sort as a controlled component using onSortModelChange */
-            ]
-          }
-          onSortModelChange={args => {
-            const sort = args[0]
-            const idx = (currSort.idx + 1) % 2
-            const field = sort?.field || currSort.field
-            setCurrSort({ idx, field })
-            onChange(
-              field
-                ? [...rows].sort((a, b) => {
-                    // @ts-expect-error
-                    const aa = getStr(a[field])
-                    // @ts-expect-error
-                    const bb = getStr(b[field])
-                    return idx === 1
-                      ? aa.localeCompare(bb)
-                      : bb.localeCompare(aa)
-                  })
-                : rows,
-            )
-          }}
-        />
-      </div>
-    </div>
-  )
-}

package/src/MultiLinearWiggleDisplay/components/Tooltip.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { Feature } from '@jbrowse/core/util'
-
-// locals
-import { Source, toP } from '../../util'
-import Tooltip, { TooltipContentsComponent } from '../../Tooltip'
-
-const en = (n: number) => n.toLocaleString('en-US')
-
-const TooltipContents = React.forwardRef<
-  HTMLDivElement,
-  { model: { sources: Source[] }; feature: Feature }
->(({ model, feature }, ref) => {
-  const start = feature.get('start')
-  const end = feature.get('end')
-  const refName = feature.get('refName')
-  const coord = start === end ? en(start) : `${en(start)}..${en(end)}`
-  const sources = feature.get('sources') as Record<string, { score: number }>
-  const source = feature.get('source')
-  const summary = feature.get('summary')
-  const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]))
-
-  return (
-    <div ref={ref}>
-      {[refName, coord].filter(f => !!f).join(':')}
-      <br />
-      {sources ? (
-        <table>
-          <thead>
-            <tr>
-              <th>color</th>
-              <th>source</th>
-              <th>score</th>
-            </tr>
-          </thead>
-          <tbody>
-            {Object.entries(sources).map(([source, data]) => (
-              <tr key={source}>
-                <td style={{ background: obj[source]?.color }}> </td>
-                <td>{source}</td>
-                <td>{toP(data.score)}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ) : (
-        <span>
-          {source}{' '}
-          {summary
-            ? `min:${toP(feature.get('minScore'))} avg:${toP(
-                feature.get('score'),
-              )} max:${toP(feature.get('maxScore'))}`
-            : toP(feature.get('score'))}
-        </span>
-      )}
-    </div>
-  )
-})
-
-type Coord = [number, number]
-
-const WiggleTooltip = observer(
-  (props: {
-    model: { featureUnderMouse: Feature; sources: Source[]; rowHeight: number }
-    height: number
-    offsetMouseCoord: Coord
-    clientMouseCoord: Coord
-    clientRect?: DOMRect
-    TooltipContents?: TooltipContentsComponent
-  }) => {
-    return <Tooltip useClientY TooltipContents={TooltipContents} {...props} />
-  },
-)
-export default WiggleTooltip
-
-export { default as Tooltip } from '../../Tooltip'

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' },
-  ])
-})