@jbrowse/plugin-wiggle 2.5.0 → 2.6.2

package/src/MultiDensityRenderer/MultiDensityRenderer.ts

@@ -1,39 +0,0 @@
-import { Feature } from '@jbrowse/core/util'
-import { groupBy } from '../util'
-import WiggleBaseRenderer, {
-  MultiRenderArgsDeserialized as MultiArgs,
-} from '../WiggleBaseRenderer'
-import { drawDensity } from '../drawxy'
-
-export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
-  // @ts-expect-error
-  async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
-    const { bpPerPx, sources, regions, features } = props
-    const [region] = regions
-    const groups = groupBy([...features.values()], f => f.get('source'))
-    const height = props.height / Object.keys(groups).length
-    const width = (region.end - region.start) / bpPerPx
-    let feats = [] as Feature[]
-    ctx.save()
-    sources.forEach(source => {
-      const features = groups[source.name]
-      if (!features) {
-        return
-      }
-      const { reducedFeatures } = drawDensity(ctx, {
-        ...props,
-        features,
-        height,
-      })
-      ctx.strokeStyle = 'rgba(200,200,200,0.8)'
-      ctx.beginPath()
-      ctx.moveTo(0, height)
-      ctx.lineTo(width, height)
-      ctx.stroke()
-      ctx.translate(0, height)
-      feats = [...feats, ...reducedFeatures]
-    })
-    ctx.restore()
-    return { reducedFeatures: feats }
-  }
-}

package/src/MultiDensityRenderer/configSchema.ts

@@ -1,21 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import baseWiggleRendererConfigSchema from '../configSchema'
-
-/**
- * #config MultiDensityRenderer
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configSchema = ConfigurationSchema(
-  'MultiDensityRenderer',
-  {},
-  {
-    /**
-     * #baseConfiguration
-     */
-    baseConfiguration: baseWiggleRendererConfigSchema,
-    explicitlyTyped: true,
-  },
-)
-
-export default configSchema

package/src/MultiDensityRenderer/index.ts

@@ -1,16 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import configSchema from './configSchema'
-import ReactComponent from '../MultiWiggleRendering'
-import MultiDensityRenderer from './MultiDensityRenderer'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addRendererType(
-    () =>
-      new MultiDensityRenderer({
-        name: 'MultiDensityRenderer',
-        ReactComponent,
-        configSchema,
-        pluginManager,
-      }),
-  )
-}

package/src/MultiLineRenderer/MultiLineRenderer.ts

@@ -1,29 +0,0 @@
-import { Feature } from '@jbrowse/core/util'
-import { drawLine } from '../drawxy'
-import { groupBy } from '../util'
-
-import WiggleBaseRenderer, {
-  MultiRenderArgsDeserialized as MultiArgs,
-} from '../WiggleBaseRenderer'
-
-export default class MultiLineRenderer extends WiggleBaseRenderer {
-  // @ts-expect-error
-  async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
-    const { sources, features } = props
-    const groups = groupBy([...features.values()], f => f.get('source'))
-    let feats = [] as Feature[]
-    sources.forEach(source => {
-      const features = groups[source.name]
-      if (!features) {
-        return
-      }
-      const { reducedFeatures } = drawLine(ctx, {
-        ...props,
-        features,
-        colorCallback: () => source.color || 'blue',
-      })
-      feats = [...feats, ...reducedFeatures]
-    })
-    return { reducedFeatures: feats }
-  }
-}

package/src/MultiLineRenderer/configSchema.ts

@@ -1,39 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { types } from 'mobx-state-tree'
-import baseWiggleRendererConfigSchema from '../configSchema'
-/**
- * #config MultiLineRenderer
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configSchema = ConfigurationSchema(
-  'MultiLineRenderer',
-  {
-    /**
-     * #slot
-     */
-    displayCrossHatches: {
-      type: 'boolean',
-      description: 'choose to draw cross hatches (sideways lines)',
-      defaultValue: false,
-    },
-    /**
-     * #slot
-     */
-    summaryScoreMode: {
-      type: 'stringEnum',
-      model: types.enumeration('Score type', ['max', 'min', 'avg', 'whiskers']),
-      description:
-        'choose whether to use max/min/average or whiskers which combines all three into the same rendering',
-      defaultValue: 'avg',
-    },
-  },
-  {
-    /**
-     * #baseConfiguration
-     */
-    baseConfiguration: baseWiggleRendererConfigSchema,
-    explicitlyTyped: true,
-  },
-)
-export default configSchema

package/src/MultiLineRenderer/index.ts

@@ -1,17 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-
-import ReactComponent from '../MultiWiggleRendering'
-import MultiLineRenderer from './MultiLineRenderer'
-import configSchema from './configSchema'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addRendererType(
-    () =>
-      new MultiLineRenderer({
-        name: 'MultiLineRenderer',
-        ReactComponent,
-        configSchema,
-        pluginManager,
-      }),
-  )
-}

package/src/MultiLinearWiggleDisplay/components/DraggableDialog.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import {
-  Dialog,
-  DialogTitle,
-  IconButton,
-  Divider,
-  DialogProps,
-  Paper,
-  PaperProps,
-  ScopedCssBaseline,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-import Draggable from 'react-draggable'
-
-// icons
-import CloseIcon from '@mui/icons-material/Close'
-
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
-
-// draggable dialog demo https://mui.com/material-ui/react-dialog/#draggable-dialog
-function PaperComponent(props: PaperProps) {
-  return (
-    <Draggable
-      handle="#draggable-dialog-title"
-      cancel={'[class*="MuiDialogContent-root"]'}
-    >
-      <Paper {...props} />
-    </Draggable>
-  )
-}
-
-function DraggableDialog(props: DialogProps & { title: string }) {
-  const { classes } = useStyles()
-  const { title, children, onClose } = props
-
-  return (
-    <Dialog
-      {...props}
-      PaperComponent={PaperComponent}
-      aria-labelledby="draggable-dialog-title" // this area is important for the draggable functionality
-    >
-      <ScopedCssBaseline>
-        <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
-          {title}
-          {onClose ? (
-            <IconButton
-              className={classes.closeButton}
-              onClick={() => {
-                // @ts-expect-error
-                onClose()
-              }}
-            >
-              <CloseIcon />
-            </IconButton>
-          ) : null}
-        </DialogTitle>
-        <Divider />
-        {children}
-      </ScopedCssBaseline>
-    </Dialog>
-  )
-}
-export default observer(DraggableDialog)

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 { UriLink } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-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'
-
-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'