jbrowse-plugin-mafviewer 1.4.5 → 1.4.6

package/src/MafSequenceWidget/MafSequenceWidget.tsx

@@ -0,0 +1,294 @@
+import React, { useEffect, useState } from 'react'
+
+import {
+  CascadingMenuButton,
+  ErrorMessage,
+  LoadingEllipses,
+} from '@jbrowse/core/ui'
+import { getSession, useLocalStorage } from '@jbrowse/core/util'
+import { Button, Paper } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import {
+  ContentCopy as CopyIcon,
+  Difference as DifferenceIcon,
+  Download as DownloadIcon,
+  FormatColorFill as ColorBackgroundIcon,
+  KeyboardArrowDown,
+  Label as LabelIcon,
+  PlaylistAdd as InsertionsIcon,
+  Subject as AllLettersIcon,
+  TableRows as TableRowsIcon,
+} from '@mui/icons-material'
+
+import SequenceDisplay from './SequenceDisplay'
+import { copyToClipboard, downloadAsFile } from '../util/clipboard'
+
+import type { MafSequenceWidgetModel } from './stateModelFactory'
+import type { MenuItem } from '@jbrowse/core/ui'
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
+    marginBottom: theme.spacing(2),
+  },
+}))
+
+const MafSequenceWidget = observer(function MafSequenceWidget({
+  model,
+}: {
+  model: MafSequenceWidgetModel
+}) {
+  const { classes } = useStyles()
+  const session = getSession(model)
+  const { adapterConfig, samples, regions } = model
+
+  const [showAllLetters, setShowAllLetters] = useLocalStorage(
+    'mafSequenceWidget-showAllLetters',
+    true,
+  )
+  const [includeInsertions, setIncludeInsertions] = useLocalStorage(
+    'mafSequenceWidget-includeInsertions',
+    false,
+  )
+  const [singleLineFormat, setSingleLineFormat] = useLocalStorage(
+    'mafSequenceWidget-singleLineFormat',
+    false,
+  )
+  const [colorBackground, setColorBackground] = useLocalStorage(
+    'mafSequenceWidget-colorBackground',
+    true,
+  )
+  const [showSampleNames, setShowSampleNames] = useLocalStorage(
+    'mafSequenceWidget-showSampleNames',
+    true,
+  )
+  const [rawSequences, setRawSequences] = useState<string[]>([])
+  const [formattedSequence, setFormattedSequence] = useState<string>('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<unknown>()
+
+  useEffect(() => {
+    if (!adapterConfig || !samples || !regions) {
+      return
+    }
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        setLoading(true)
+        setError(undefined)
+
+        const { rpcManager } = session
+
+        const fastaSequence = (await rpcManager.call(
+          'MafSequenceWidget',
+          'MafGetSequences',
+          {
+            sessionId: 'MafSequenceWidget',
+            adapterConfig,
+            samples,
+            showAllLetters,
+            includeInsertions,
+            regions,
+          },
+        )) as string[]
+
+        setRawSequences(fastaSequence)
+
+        let formatted: string
+        if (singleLineFormat) {
+          const maxLabelLength = Math.max(
+            ...samples.map(s => (s.label ?? s.id).length),
+          )
+          formatted = fastaSequence
+            .map((r, idx) => {
+              const sample = samples[idx]!
+              const label = sample.label ?? sample.id
+              const padding = ' '.repeat(maxLabelLength - label.length + 2)
+              return `>${label}${padding}${r}`
+            })
+            .join('\n')
+        } else {
+          formatted = fastaSequence
+            .map((r, idx) => {
+              const sample = samples[idx]!
+              return `>${sample.label ?? sample.id}\n${r}`
+            })
+            .join('\n')
+        }
+
+        setFormattedSequence(formatted)
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [
+    adapterConfig,
+    samples,
+    regions,
+    showAllLetters,
+    includeInsertions,
+    singleLineFormat,
+    session,
+  ])
+
+  const sequenceTooLarge = formattedSequence
+    ? formattedSequence.length > 5_000_000
+    : false
+
+  if (!adapterConfig || !samples || !regions) {
+    return (
+      <Paper className={classes.root}>
+        <div>No sequence data available</div>
+      </Paper>
+    )
+  }
+
+  return (
+    <Paper className={classes.root}>
+      <div className={classes.controls}>
+        <CascadingMenuButton
+          menuItems={
+            [
+              {
+                label: 'Show all letters',
+                icon: AllLettersIcon,
+                type: 'radio',
+                checked: showAllLetters,
+                onClick: () => {
+                  setShowAllLetters(true)
+                },
+              },
+              {
+                label: 'Show only differences',
+                icon: DifferenceIcon,
+                type: 'radio',
+                checked: !showAllLetters,
+                onClick: () => {
+                  setShowAllLetters(false)
+                },
+              },
+              {
+                label: 'Include insertions',
+                icon: InsertionsIcon,
+                type: 'checkbox',
+                checked: includeInsertions,
+                onClick: () => {
+                  setIncludeInsertions(!includeInsertions)
+                },
+              },
+              {
+                label: 'Single line format',
+                icon: TableRowsIcon,
+                type: 'checkbox',
+                checked: singleLineFormat,
+                onClick: () => {
+                  setSingleLineFormat(!singleLineFormat)
+                },
+              },
+              {
+                label: 'Color background',
+                icon: ColorBackgroundIcon,
+                type: 'checkbox',
+                checked: colorBackground,
+                onClick: () => {
+                  setColorBackground(!colorBackground)
+                },
+              },
+              {
+                label: 'Show sample names',
+                icon: LabelIcon,
+                type: 'checkbox',
+                checked: showSampleNames,
+                onClick: () => {
+                  setShowSampleNames(!showSampleNames)
+                },
+              },
+              { type: 'divider' },
+              {
+                label: 'Copy to clipboard',
+                icon: CopyIcon,
+                disabled: loading || !formattedSequence,
+                onClick: () => {
+                  copyToClipboard(
+                    formattedSequence,
+                    () => {
+                      session.notify('Sequence copied to clipboard', 'info')
+                    },
+                    e => {
+                      session.notifyError(`${e}`, e)
+                    },
+                  ).catch((e: unknown) => {
+                    console.error(e)
+                  })
+                },
+              },
+              {
+                label: 'Download as FASTA',
+                icon: DownloadIcon,
+                disabled: loading || !formattedSequence,
+                onClick: () => {
+                  downloadAsFile(
+                    formattedSequence,
+                    'sequence.fasta',
+                    () => {
+                      session.notify('Sequence downloaded', 'info')
+                    },
+                    e => {
+                      session.notifyError(`${e}`, e)
+                    },
+                  )
+                },
+              },
+            ] as MenuItem[]
+          }
+          ButtonComponent={props => (
+            <Button
+              {...props}
+              variant="contained"
+              size="small"
+              endIcon={<KeyboardArrowDown />}
+            >
+              Actions
+            </Button>
+          )}
+        />
+      </div>
+
+      {error ? (
+        <ErrorMessage error={error} />
+      ) : (
+        <>
+          {loading ? (
+            <LoadingEllipses />
+          ) : sequenceTooLarge ? (
+            <div>
+              Reference sequence too large to display, use the Download button
+            </div>
+          ) : (
+            <SequenceDisplay
+              model={model}
+              sequences={rawSequences}
+              singleLineFormat={singleLineFormat}
+              includeInsertions={includeInsertions}
+              colorBackground={colorBackground}
+              showSampleNames={showSampleNames}
+            />
+          )}
+        </>
+      )}
+    </Paper>
+  )
+})
+
+export default MafSequenceWidget

package/src/MafSequenceWidget/SequenceCanvas.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+
+import { alpha, useTheme } from '@mui/material'
+
+import { getBaseColor, getContrastText } from './baseColors'
+import { CHAR_WIDTH, FONT, ROW_HEIGHT } from './constants'
+
+import type { Sample } from '../LinearMafDisplay/types'
+
+interface SequenceCanvasProps {
+  samples: Sample[]
+  sequences: string[]
+  colorBackground: boolean
+  hoveredCol?: number
+  onHover: (
+    col: number | undefined,
+    row: number | undefined,
+    clientX: number,
+    clientY: number,
+  ) => void
+  onLeave: () => void
+}
+
+export default function SequenceCanvas({
+  samples,
+  sequences,
+  colorBackground,
+  hoveredCol,
+  onHover,
+  onLeave,
+}: SequenceCanvasProps) {
+  const theme = useTheme()
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  const seqLength = sequences[0]?.length || 0
+  const canvasWidth = seqLength * CHAR_WIDTH
+  const canvasHeight = samples.length * ROW_HEIGHT
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) {
+      return
+    }
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    const dpr = window.devicePixelRatio || 1
+    canvas.width = canvasWidth * dpr
+    canvas.height = canvasHeight * dpr
+    canvas.style.width = `${canvasWidth}px`
+    canvas.style.height = `${canvasHeight}px`
+    ctx.scale(dpr, dpr)
+
+    ctx.fillStyle = theme.palette.background.paper
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+
+    ctx.font = FONT
+    ctx.textBaseline = 'top'
+
+    for (let rowIdx = 0; rowIdx < samples.length; rowIdx++) {
+      const seq = sequences[rowIdx] || ''
+      const y = rowIdx * ROW_HEIGHT
+
+      for (let colIdx = 0; colIdx < seq.length; colIdx++) {
+        const char = seq[colIdx]!
+        const x = colIdx * CHAR_WIDTH
+
+        if (colorBackground && char !== '-' && char !== '.') {
+          ctx.fillStyle = getBaseColor(char, theme)
+          ctx.fillRect(x, y, CHAR_WIDTH, ROW_HEIGHT)
+        }
+
+        if (colIdx === hoveredCol) {
+          const highlight = (theme.palette as any).highlight as
+            | { main: string }
+            | undefined
+          const highlightColor = highlight?.main ?? '#FFB11D'
+          ctx.fillStyle = alpha(highlightColor, 0.5)
+          ctx.fillRect(x, y, CHAR_WIDTH, ROW_HEIGHT)
+        }
+
+        if (char === '-') {
+          ctx.fillStyle = theme.palette.grey[400]
+        } else if (char === '.') {
+          ctx.fillStyle = theme.palette.grey[500]
+        } else if (colorBackground) {
+          ctx.fillStyle = getContrastText(char, theme)
+        } else {
+          ctx.fillStyle = getBaseColor(char, theme)
+        }
+        ctx.fillText(char, x + 2, y + 2)
+      }
+    }
+  }, [
+    samples,
+    sequences,
+    canvasWidth,
+    canvasHeight,
+    hoveredCol,
+    colorBackground,
+    theme,
+  ])
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      const canvas = canvasRef.current
+      if (!canvas) {
+        return
+      }
+
+      const rect = canvas.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      const col = Math.floor(x / CHAR_WIDTH)
+      const row = Math.floor(y / ROW_HEIGHT)
+
+      const validCol = col >= 0 && col < seqLength ? col : undefined
+      const validRow = row >= 0 && row < samples.length ? row : undefined
+
+      onHover(validCol, validRow, e.clientX, e.clientY)
+    },
+    [seqLength, samples.length, onHover],
+  )
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ display: 'block' }}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={onLeave}
+    />
+  )
+}

package/src/MafSequenceWidget/SequenceDisplay.tsx

@@ -0,0 +1,188 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import LabelsCanvas from './LabelsCanvas'
+import SequenceCanvas from './SequenceCanvas'
+import SequenceTooltip from './SequenceTooltip'
+import { buildColToGenomePos, findRefSampleIndex } from './colToGenomePos'
+
+import type { MafSequenceWidgetModel } from './stateModelFactory'
+
+const useStyles = makeStyles()(theme => ({
+  container: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    maxHeight: 400,
+    backgroundColor: theme.palette.background.paper,
+    display: 'flex',
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  labelsContainer: {
+    flexShrink: 0,
+    borderRight: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+    overflowY: 'auto',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+  },
+  sequenceContainer: {
+    flex: 1,
+    overflow: 'auto',
+  },
+}))
+
+interface SequenceDisplayProps {
+  model: MafSequenceWidgetModel
+  sequences: string[]
+  singleLineFormat: boolean
+  includeInsertions: boolean
+  colorBackground: boolean
+  showSampleNames: boolean
+}
+
+const SequenceDisplay = observer(function SequenceDisplay({
+  model,
+  sequences,
+  colorBackground,
+  showSampleNames,
+}: SequenceDisplayProps) {
+  const { classes } = useStyles()
+  const labelsContainerRef = useRef<HTMLDivElement>(null)
+  const seqContainerRef = useRef<HTMLDivElement>(null)
+  const { samples, regions } = model
+
+  const [hoveredCol, setHoveredCol] = React.useState<number | undefined>()
+  const [hoveredRow, setHoveredRow] = React.useState<number | undefined>()
+  const [tooltipPos, setTooltipPos] = React.useState<
+    { x: number; y: number } | undefined
+  >()
+
+  const maxLabelLength = useMemo(
+    () =>
+      samples ? Math.max(...samples.map(s => (s.label ?? s.id).length)) : 0,
+    [samples],
+  )
+
+  const colToGenomePos = useMemo(() => {
+    if (!regions) {
+      return []
+    }
+    const region = regions[0]
+    if (!region) {
+      return []
+    }
+
+    const refIdx = findRefSampleIndex(samples, region.assemblyName)
+    const refSequence = sequences[refIdx] || ''
+    return buildColToGenomePos(refSequence, region.start)
+  }, [sequences, regions, samples])
+
+  // Sync vertical scroll between labels and sequences
+  useEffect(() => {
+    const labelsContainer = labelsContainerRef.current
+    const seqContainer = seqContainerRef.current
+    if (!labelsContainer || !seqContainer) {
+      return
+    }
+
+    const handleSeqScroll = () => {
+      labelsContainer.scrollTop = seqContainer.scrollTop
+    }
+
+    seqContainer.addEventListener('scroll', handleSeqScroll)
+    return () => {
+      seqContainer.removeEventListener('scroll', handleSeqScroll)
+    }
+  }, [])
+
+  const handleHover = useCallback(
+    (
+      col: number | undefined,
+      row: number | undefined,
+      clientX: number,
+      clientY: number,
+    ) => {
+      if (!regions) {
+        return
+      }
+
+      setHoveredCol(col)
+      setHoveredRow(row)
+      setTooltipPos({ x: clientX, y: clientY })
+
+      if (col !== undefined) {
+        const genomicPos = colToGenomePos[col]
+        const region = regions[0]
+        if (genomicPos !== undefined && region) {
+          model.setHoverHighlight({
+            refName: region.refName,
+            start: genomicPos,
+            end: genomicPos + 1,
+            assemblyName: region.assemblyName,
+          })
+        } else {
+          model.setHoverHighlight(undefined)
+        }
+      } else {
+        model.setHoverHighlight(undefined)
+      }
+    },
+    [colToGenomePos, model, regions],
+  )
+
+  const handleLeave = useCallback(() => {
+    setHoveredCol(undefined)
+    setHoveredRow(undefined)
+    setTooltipPos(undefined)
+    model.setHoverHighlight(undefined)
+  }, [model])
+
+  if (!samples || !regions || sequences.length === 0) {
+    return <div>No sequence data</div>
+  }
+
+  const hoveredSample =
+    hoveredRow !== undefined ? samples[hoveredRow] : undefined
+  const hoveredChar =
+    hoveredRow !== undefined && hoveredCol !== undefined
+      ? sequences[hoveredRow]?.[hoveredCol]
+      : undefined
+  const genomicPos =
+    hoveredCol !== undefined ? colToGenomePos[hoveredCol] : undefined
+
+  return (
+    <div className={classes.container}>
+      {showSampleNames && (
+        <div ref={labelsContainerRef} className={classes.labelsContainer}>
+          <LabelsCanvas samples={samples} maxLabelLength={maxLabelLength} />
+        </div>
+      )}
+      <div ref={seqContainerRef} className={classes.sequenceContainer}>
+        <SequenceCanvas
+          samples={samples}
+          sequences={sequences}
+          colorBackground={colorBackground}
+          hoveredCol={hoveredCol}
+          onHover={handleHover}
+          onLeave={handleLeave}
+        />
+      </div>
+      {tooltipPos && hoveredSample && (
+        <SequenceTooltip
+          x={tooltipPos.x}
+          y={tooltipPos.y}
+          sample={hoveredSample}
+          base={hoveredChar}
+          genomicPos={genomicPos}
+        />
+      )}
+    </div>
+  )
+})
+
+export default SequenceDisplay

package/src/MafSequenceWidget/SequenceTooltip.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import { makeStyles } from 'tss-react/mui'
+
+import type { Sample } from '../LinearMafDisplay/types'
+
+const useStyles = makeStyles()(theme => ({
+  tooltip: {
+    position: 'fixed',
+    pointerEvents: 'none',
+    zIndex: 1000,
+    backgroundColor: theme.palette.grey[800],
+    color: theme.palette.common.white,
+    padding: '4px 8px',
+    borderRadius: 4,
+    fontSize: 12,
+    whiteSpace: 'nowrap',
+  },
+  insertion: {
+    color: theme.palette.warning.light,
+    fontStyle: 'italic',
+  },
+}))
+
+interface SequenceTooltipProps {
+  x: number
+  y: number
+  sample: Sample
+  base?: string
+  genomicPos?: number
+}
+
+export default function SequenceTooltip({
+  x,
+  y,
+  sample,
+  base,
+  genomicPos,
+}: SequenceTooltipProps) {
+  const { classes } = useStyles()
+
+  // An insertion is when we have a base but no genomic position
+  // (the reference has a gap at this column)
+  const isInsertion = base !== undefined && genomicPos === undefined
+
+  return (
+    <div
+      className={classes.tooltip}
+      style={{
+        left: x + 12,
+        top: y + 12,
+      }}
+    >
+      <div>
+        <strong>{sample.label}</strong>
+      </div>
+      {base && (
+        <div>
+          Base: {base}
+          {genomicPos !== undefined
+            ? ` | Pos: ${(genomicPos + 1).toLocaleString('en-US')}`
+            : null}
+        </div>
+      )}
+      {isInsertion && (
+        <div className={classes.insertion}>Insertion (not in reference)</div>
+      )}
+    </div>
+  )
+}