jbrowse-plugin-mafviewer 1.2.3 → 1.3.0

package/src/BigMafAdapter/BigMafAdapter.ts

@@ -26,12 +26,13 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
     if (!this.getSubAdapter) {
       throw new Error('no getSubAdapter available')
     }
-    const adapter = await this.getSubAdapter({
-      ...getSnapshot(this.config),
-      type: 'BigBedAdapter',
-    })
     return {
-      adapter: adapter.dataAdapter as BaseFeatureDataAdapter,
+      adapter: (
+        await this.getSubAdapter({
+          ...getSnapshot(this.config),
+          type: 'BigBedAdapter',
+        })
+      ).dataAdapter as BaseFeatureDataAdapter,
     }
   }
   async setupPre() {
@@ -59,59 +60,61 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
     return ObservableCreate<Feature>(async observer => {
       const { adapter } = await this.setup()
       const features = await updateStatus(
-        'Downloading alignment',
+        'Downloading alignments',
         statusCallback,
         () => firstValueFrom(adapter.getFeatures(query).pipe(toArray())),
       )
-      for (const feature of features) {
-        const maf = feature.get('mafBlock') as string
-        const blocks = maf.split(';')
-        let aln: string | undefined
-        const alns = [] as string[]
-        const alignments = {} as Record<string, OrganismRecord>
-        const blocks2 = [] as string[]
-        for (const block of blocks) {
-          if (block.startsWith('s')) {
-            if (aln) {
-              alns.push(block.split(/ +/)[6]!)
-              blocks2.push(block)
-            } else {
-              aln = block.split(/ +/)[6]
-              alns.push(aln!)
-              blocks2.push(block)
+      await updateStatus('Processing alignments', statusCallback, () => {
+        for (const feature of features) {
+          const maf = feature.get('mafBlock') as string
+          const blocks = maf.split(';')
+          let aln: string | undefined
+          const alns = [] as string[]
+          const alignments = {} as Record<string, OrganismRecord>
+          const blocks2 = [] as string[]
+          for (const block of blocks) {
+            if (block.startsWith('s')) {
+              if (aln) {
+                alns.push(block.split(/ +/)[6]!)
+                blocks2.push(block)
+              } else {
+                aln = block.split(/ +/)[6]
+                alns.push(aln!)
+                blocks2.push(block)
+              }
             }
           }
-        }
 
-        for (let i = 0; i < blocks2.length; i++) {
-          const elt = blocks2[i]!
-          const ad = elt.split(/ +/)
-          const y = ad[1]!.split('.')
-          const org = y[0]!
-          const chr = y[1]!
+          for (let i = 0; i < blocks2.length; i++) {
+            const elt = blocks2[i]!
+            const ad = elt.split(/ +/)
+            const y = ad[1]!.split('.')
+            const org = y[0]!
+            const chr = y[1]!
 
-          alignments[org] = {
-            chr: chr,
-            start: +ad[1]!,
-            srcSize: +ad[2]!,
-            strand: ad[3] === '+' ? 1 : -1,
-            unknown: +ad[4]!,
-            data: alns[i]!,
+            alignments[org] = {
+              chr: chr,
+              start: +ad[1]!,
+              srcSize: +ad[2]!,
+              strand: ad[3] === '+' ? 1 : -1,
+              unknown: +ad[4]!,
+              data: alns[i]!,
+            }
           }
+          observer.next(
+            new SimpleFeature({
+              id: feature.id(),
+              data: {
+                start: feature.get('start'),
+                end: feature.get('end'),
+                refName: feature.get('refName'),
+                seq: alns[0],
+                alignments: alignments,
+              },
+            }),
+          )
         }
-        observer.next(
-          new SimpleFeature({
-            id: feature.id(),
-            data: {
-              start: feature.get('start'),
-              end: feature.get('end'),
-              refName: feature.get('refName'),
-              seq: alns[0],
-              alignments: alignments,
-            },
-          }),
-        )
-      }
+      })
       observer.complete()
     })
   }

package/src/LinearMafDisplay/components/Crosshairs.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  cursor: {
+    pointerEvents: 'none',
+  },
+})
+
+interface CrosshairsProps {
+  width: number
+  height: number
+  scrollTop: number
+  mouseX?: number
+  mouseY: number
+}
+
+const Crosshairs = ({
+  width,
+  height,
+  scrollTop,
+  mouseX,
+  mouseY,
+}: CrosshairsProps) => {
+  const { classes } = useStyles()
+
+  return (
+    <svg
+      className={classes.cursor}
+      width={width}
+      height={height}
+      style={{
+        position: 'absolute',
+        top: scrollTop,
+      }}
+    >
+      <line
+        x1={0}
+        x2={width}
+        y1={mouseY - scrollTop}
+        y2={mouseY - scrollTop}
+        stroke="black"
+      />
+      <line x1={mouseX} x2={mouseX} y1={0} y2={height} stroke="black" />
+    </svg>
+  )
+}
+
+export default Crosshairs

package/src/LinearMafDisplay/components/GetSequenceDialog/GetSequenceDialog.tsx

@@ -0,0 +1,175 @@
+import React, { useState } from 'react'
+
+import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+import { getSession } from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import { useSequences } from '../../../util/useSequences'
+
+import type { LinearMafDisplayModel } from '../../stateModel'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '80em',
+  },
+  textAreaInput: {
+    fontFamily: 'monospace',
+    whiteSpace: 'pre',
+    overflowX: 'auto',
+  },
+  ml: {
+    marginLeft: 10,
+  },
+})
+
+const GetSequenceDialog = observer(function ({
+  onClose,
+  model,
+  selectionCoords,
+}: {
+  onClose: () => void
+  model: LinearMafDisplayModel
+  selectionCoords?: {
+    dragStartX: number
+    dragEndX: number
+  }
+}) {
+  const [showAllLetters, setShowAllLetters] = useState(true)
+  const { classes } = useStyles()
+  const { sequence, loading, error } = useSequences({
+    model,
+    selectionCoords,
+    showAllLetters,
+  })
+  const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false
+
+  return (
+    <Dialog open onClose={onClose} title="Subsequence Data" maxWidth="xl">
+      <DialogContent>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: '16px',
+          }}
+        >
+          <ToggleButtonGroup
+            value={showAllLetters}
+            exclusive
+            size="small"
+            onChange={(_event, newDisplayMode) => {
+              if (newDisplayMode !== null) {
+                setShowAllLetters(newDisplayMode)
+              }
+            }}
+          >
+            <ToggleButton value={true}>Show All Letters</ToggleButton>
+            <ToggleButton value={false}>Show Only Differences</ToggleButton>
+          </ToggleButtonGroup>
+          <div style={{ flexGrow: 1 }} />
+          <Button
+            variant="contained"
+            color="primary"
+            disabled={loading || !sequence}
+            onClick={() => {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              ;(async () => {
+                try {
+                  await navigator.clipboard.writeText(sequence)
+                  getSession(model).notify(
+                    'Sequence copied to clipboard',
+                    'info',
+                  )
+                } catch (e) {
+                  console.error(e)
+                  getSession(model).notifyError(`${e}`, e)
+                }
+              })()
+            }}
+          >
+            Copy to Clipboard
+          </Button>
+          <Button
+            variant="contained"
+            color="secondary"
+            disabled={loading || !sequence}
+            onClick={() => {
+              try {
+                const url = URL.createObjectURL(
+                  new Blob([sequence], { type: 'text/plain' }),
+                )
+
+                // Create a temporary anchor element
+                const a = document.createElement('a')
+                a.href = url
+                a.download = 'sequence.fasta'
+
+                // Trigger the download
+                document.body.append(a)
+                a.click()
+
+                // Clean up
+                a.remove()
+                URL.revokeObjectURL(url)
+                getSession(model).notify('Sequence downloaded', 'info')
+              } catch (e) {
+                console.error(e)
+                getSession(model).notifyError(`${e}`, e)
+              }
+            }}
+          >
+            Download
+          </Button>
+        </div>
+
+        {error ? (
+          <ErrorMessage error={error} />
+        ) : (
+          <>
+            {loading ? <LoadingEllipses /> : null}
+            <TextField
+              variant="outlined"
+              multiline
+              minRows={5}
+              maxRows={10}
+              disabled={sequenceTooLarge}
+              className={classes.dialogContent}
+              fullWidth
+              value={
+                loading
+                  ? 'Loading...'
+                  : sequenceTooLarge
+                    ? 'Reference sequence too large to display, use the download FASTA button'
+                    : sequence
+              }
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  classes: {
+                    input: classes.textAreaInput,
+                  },
+                },
+              }}
+            />
+          </>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button color="primary" variant="outlined" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default GetSequenceDialog

package/src/LinearMafDisplay/components/LinearMafDisplayComponent.tsx

@@ -0,0 +1,257 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { Menu } from '@jbrowse/core/ui'
+import { getContainingView, getEnv } from '@jbrowse/core/util'
+import { useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import Crosshairs from './Crosshairs'
+import SequenceDialog from './GetSequenceDialog/GetSequenceDialog'
+import MAFTooltip from './MAFTooltip'
+import YScaleBars from './Sidebar/YScaleBars'
+
+import type { LinearMafDisplayModel } from '../stateModel'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const LinearMafDisplay = observer(function (props: {
+  model: LinearMafDisplayModel
+}) {
+  const { model } = props
+  const { pluginManager } = getEnv(model)
+  const { rowHeight, height, scrollTop, samples: sources } = model
+  const ref = useRef<HTMLDivElement>(null)
+  const theme = useTheme()
+
+  const LinearGenomePlugin = pluginManager.getPlugin(
+    'LinearGenomeViewPlugin',
+  ) as import('@jbrowse/plugin-linear-genome-view').default
+  const { BaseLinearDisplayComponent } = LinearGenomePlugin.exports
+
+  const [mouseY, setMouseY] = useState<number>()
+  const [mouseX, setMouseX] = useState<number>()
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStartX, setDragStartX] = useState<number>()
+  const [dragEndX, setDragEndX] = useState<number>()
+  const [showSelectionBox, setShowSelectionBox] = useState(false)
+  const [contextCoord, setContextCoord] = useState<{
+    coord: [number, number]
+    dragStartX: number
+    dragEndX: number
+  }>()
+  const [showSequenceDialog, setShowSequenceDialog] = useState(false)
+  const [selectionCoords, setSelectionCoords] = useState<
+    | {
+        dragStartX: number
+        dragEndX: number
+      }
+    | undefined
+  >()
+  const { width } = getContainingView(model) as LinearGenomeViewModel
+
+  const handleMouseDown = (event: React.MouseEvent) => {
+    const rect = ref.current?.getBoundingClientRect()
+    const left = rect?.left || 0
+    const clientX = event.clientX - left
+
+    // Clear the previous selection box when starting a new drag
+    setShowSelectionBox(false)
+    setIsDragging(true)
+    setDragStartX(clientX)
+    setDragEndX(clientX)
+    event.stopPropagation()
+  }
+
+  const handleMouseMove = (event: React.MouseEvent) => {
+    const rect = ref.current?.getBoundingClientRect()
+    const top = rect?.top || 0
+    const left = rect?.left || 0
+    const clientX = event.clientX - left
+    const clientY = event.clientY - top
+
+    setMouseY(clientY)
+    setMouseX(clientX)
+
+    if (isDragging) {
+      setDragEndX(clientX)
+    }
+  }
+
+  const handleMouseUp = (event: React.MouseEvent) => {
+    if (isDragging && dragStartX !== undefined && dragEndX !== undefined) {
+      // Calculate the drag distance
+      const dragDistanceX = Math.abs(dragEndX - dragStartX)
+
+      // Only show context menu if the drag distance is at least 2 pixels in either direction
+      if (dragDistanceX >= 2) {
+        setContextCoord({
+          coord: [event.clientX, event.clientY],
+          dragEndX: event.clientX,
+          dragStartX: dragStartX,
+        })
+
+        // Set showSelectionBox to true to keep the selection visible
+        setShowSelectionBox(true)
+      } else {
+        // For very small drags (less than 2px), don't show selection box or context menu
+        clearSelectionBox()
+      }
+    }
+
+    // Only set isDragging to false, but keep the coordinates
+    setIsDragging(false)
+  }
+
+  // Function to clear the selection box
+  const clearSelectionBox = () => {
+    setShowSelectionBox(false)
+    setDragStartX(undefined)
+    setDragEndX(undefined)
+  }
+
+  // Add keydown event handler to clear selection box when Escape key is pressed
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && showSelectionBox) {
+        clearSelectionBox()
+      }
+    }
+
+    // Add click handler to clear selection box when clicking outside of it
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        ref.current &&
+        !ref.current.contains(event.target as Node) &&
+        showSelectionBox
+      ) {
+        clearSelectionBox()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('click', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [showSelectionBox, clearSelectionBox])
+
+  return (
+    <div
+      ref={ref}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onDoubleClick={() => {
+        // Clear selection box on double click
+        if (showSelectionBox) {
+          clearSelectionBox()
+        }
+      }}
+      onMouseLeave={() => {
+        setMouseY(undefined)
+        setMouseX(undefined)
+        setIsDragging(false)
+      }}
+    >
+      <BaseLinearDisplayComponent {...props} />
+      <YScaleBars model={model} />
+      {mouseY && mouseX && sources && !contextCoord && !showSequenceDialog ? (
+        <div style={{ position: 'relative' }}>
+          <Crosshairs
+            width={width}
+            height={height}
+            scrollTop={scrollTop}
+            mouseX={mouseX}
+            mouseY={mouseY}
+          />
+          <MAFTooltip
+            model={model}
+            mouseX={mouseX}
+            mouseY={mouseY}
+            origMouseX={dragStartX}
+            rowHeight={rowHeight}
+            sources={sources}
+          />
+        </div>
+      ) : null}
+      {(isDragging || showSelectionBox) &&
+      dragStartX !== undefined &&
+      dragEndX !== undefined ? (
+        <div
+          style={{
+            position: 'absolute',
+            left: Math.min(dragStartX, dragEndX),
+            top: 0,
+            width: Math.abs(dragEndX - dragStartX),
+            height,
+            backgroundColor: 'rgba(0, 0, 255, 0.2)',
+            border: '1px solid rgba(0, 0, 255, 0.5)',
+            pointerEvents: 'none',
+          }}
+        />
+      ) : null}
+      <Menu
+        open={Boolean(contextCoord)}
+        onMenuItemClick={(_, callback) => {
+          callback()
+          setContextCoord(undefined)
+        }}
+        onClose={() => {
+          setContextCoord(undefined)
+        }}
+        slotProps={{
+          transition: {
+            onExit: () => {
+              setContextCoord(undefined)
+            },
+          },
+        }}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          contextCoord
+            ? { top: contextCoord.coord[1], left: contextCoord.coord[0] }
+            : undefined
+        }
+        style={{
+          zIndex: theme.zIndex.tooltip,
+        }}
+        menuItems={[
+          {
+            label: 'View subsequence',
+            onClick: () => {
+              if (!contextCoord) {
+                return
+              }
+
+              // Store the selection coordinates for the SequenceDialog to use
+              setSelectionCoords({
+                dragStartX: contextCoord.dragStartX,
+                dragEndX: contextCoord.dragEndX,
+              })
+
+              // Show the dialog
+              setShowSequenceDialog(true)
+
+              // Close the context menu
+              setContextCoord(undefined)
+            },
+          },
+        ]}
+      />
+
+      {showSequenceDialog ? (
+        <SequenceDialog
+          model={model}
+          selectionCoords={selectionCoords}
+          onClose={() => {
+            setShowSequenceDialog(false)
+            setSelectionCoords(undefined)
+          }}
+        />
+      ) : null}
+    </div>
+  )
+})
+
+export default LinearMafDisplay

package/src/LinearMafDisplay/components/MAFTooltip.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { SanitizedHTML } from '@jbrowse/core/ui'
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
+import {
+  getBpDisplayStr,
+  getContainingView,
+  toLocale,
+} from '@jbrowse/core/util'
+import { observer } from 'mobx-react'
+
+import type { LinearMafDisplayModel } from '../stateModel'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+interface MAFTooltipProps {
+  mouseY: number
+  mouseX: number
+  rowHeight: number
+  sources: Record<string, any>[]
+  model: LinearMafDisplayModel
+  origMouseX?: number
+}
+
+const MAFTooltip = observer(function ({
+  model,
+  mouseY,
+  mouseX,
+  origMouseX,
+  rowHeight,
+  sources,
+}: MAFTooltipProps) {
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const ret = Object.entries(sources[Math.floor(mouseY / rowHeight)] || {})
+    .filter(([key]) => key !== 'color' && key !== 'id')
+    .map(([key, value]) => `${key}:${value}`)
+    .join('\n')
+  const p1 = origMouseX ? view.pxToBp(origMouseX) : undefined
+  const p2 = view.pxToBp(mouseX)
+  return ret ? (
+    <BaseTooltip>
+      <SanitizedHTML
+        html={[
+          ret,
+          ...(p1
+            ? [
+                `Start: ${p1.refName}:${toLocale(p1.coord)}`,
+                `End: ${p2.refName}:${toLocale(p2.coord)}`,
+                `Length: ${getBpDisplayStr(Math.abs(p1.coord - p2.coord))}`,
+              ]
+            : [`${p2.refName}:${toLocale(p2.coord)}`]),
+        ]
+          .filter(f => !!f)
+          .join('<br/>')}
+      />
+    </BaseTooltip>
+  ) : null
+})
+
+export default MAFTooltip