jbrowse-plugin-mafviewer 1.2.4 → 1.3.0

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

@@ -1,30 +1,26 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
-import { SanitizedHTML } from '@jbrowse/core/ui'
-import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
+import { Menu } from '@jbrowse/core/ui'
 import { getContainingView, getEnv } from '@jbrowse/core/util'
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 
-import YScaleBars from './YScaleBars'
+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 useStyles = makeStyles()({
-  cursor: {
-    pointerEvents: 'none',
-  },
-})
-
 const LinearMafDisplay = observer(function (props: {
   model: LinearMafDisplayModel
 }) {
   const { model } = props
-  const { classes } = useStyles()
   const { pluginManager } = getEnv(model)
   const { rowHeight, height, scrollTop, samples: sources } = model
   const ref = useRef<HTMLDivElement>(null)
+  const theme = useTheme()
 
   const LinearGenomePlugin = pluginManager.getPlugin(
     'LinearGenomeViewPlugin',
@@ -33,57 +29,227 @@ const LinearMafDisplay = observer(function (props: {
 
   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}
-      onMouseMove={event => {
-        const rect = ref.current?.getBoundingClientRect()
-        const top = rect?.top || 0
-        const left = rect?.left || 0
-        setMouseY(event.clientY - top)
-        setMouseX(event.clientX - left)
+      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 && sources ? (
+      {mouseY && mouseX && sources && !contextCoord && !showSequenceDialog ? (
         <div style={{ position: 'relative' }}>
-          <svg
-            className={classes.cursor}
+          <Crosshairs
             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>
-          <BaseTooltip>
-            <SanitizedHTML
-              html={Object.entries(
-                sources[Math.floor(mouseY / rowHeight)] || {},
-              )
-                .filter(([key]) => key !== 'color' && key !== 'id')
-                .map(([key, value]) => `${key}:${value}`)
-                .join('\n')}
-            />
-          </BaseTooltip>
+            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>
   )
 })

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

package/src/LinearMafDisplay/components/{ColorLegend.tsx → Sidebar/ColorLegend.tsx}

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react'
 import RectBg from './RectBg'
 import Tree from './Tree'
 
-import type { LinearMafDisplayModel } from '../stateModel'
+import type { LinearMafDisplayModel } from '../../stateModel'
 
 const ColorLegend = observer(function ({
   model,

package/src/LinearMafDisplay/components/{SvgWrapper.tsx → Sidebar/SvgWrapper.tsx}

@@ -3,7 +3,8 @@ import React from 'react'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
-import type { LinearMafDisplayModel } from '../stateModel'
+import type { LinearMafDisplayModel } from '../../stateModel'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const SvgWrapper = observer(function ({
   children,
@@ -18,15 +19,17 @@ const SvgWrapper = observer(function ({
     return <>{children}</>
   } else {
     const { totalHeight } = model
+    const { width } = getContainingView(model) as LinearGenomeViewModel
     return (
       <svg
         style={{
           position: 'absolute',
+          userSelect: 'none',
           top: 0,
           left: 0,
           pointerEvents: 'none',
           height: totalHeight,
-          width: getContainingView(model).width,
+          width,
         }}
       >
         {children}

package/src/LinearMafDisplay/components/{Tree.tsx → Sidebar/Tree.tsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { LinearMafDisplayModel } from '../stateModel'
+import type { LinearMafDisplayModel } from '../../stateModel'
 
 const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
   const {

package/src/LinearMafDisplay/components/{YScaleBars.tsx → Sidebar/YScaleBars.tsx}

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react'
 import ColorLegend from './ColorLegend'
 import SvgWrapper from './SvgWrapper'
 
-import type { LinearMafDisplayModel } from '../stateModel'
+import type { LinearMafDisplayModel } from '../../stateModel'
 
 export const YScaleBars = observer(function (props: {
   model: LinearMafDisplayModel

package/src/LinearMafDisplay/renderSvg.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { getContainingView } from '@jbrowse/core/util'
 
-import YScaleBars from './components/YScaleBars'
+import YScaleBars from './components/Sidebar/YScaleBars'
 
 import type { LinearMafDisplayModel } from './stateModel'
 import type {

package/src/LinearMafDisplay/stateModel.ts

@@ -22,7 +22,9 @@ import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view
 import type { HierarchyNode } from 'd3-hierarchy'
 import type { Instance } from 'mobx-state-tree'
 
-const SetRowHeightDialog = lazy(() => import('./components/SetRowHeightDialog'))
+const SetRowHeightDialog = lazy(
+  () => import('./components/SetRowHeightDialog/SetRowHeightDialog'),
+)
 
 /**
  * #stateModel LinearMafDisplay
@@ -76,6 +78,10 @@ export default function stateModelFactory(
          * #property
          */
         treeAreaWidth: 80,
+        /**
+         * #property
+         */
+        showAsUpperCase: true,
       }),
     )
     .volatile(() => ({
@@ -128,6 +134,12 @@ export default function stateModelFactory(
           self.volatileTree = tree
         }
       },
+      /**
+       * #action
+       */
+      setShowAsUpperCase(arg: boolean) {
+        self.showAsUpperCase = arg
+      },
     }))
     .views(self => ({
       /**
@@ -248,6 +260,7 @@ export default function stateModelFactory(
             rowHeight,
             rowProportion,
             mismatchRendering,
+            showAsUpperCase,
           } = self
           const s = superRenderProps()
           return {
@@ -260,6 +273,7 @@ export default function stateModelFactory(
             rowProportion,
             showAllLetters,
             mismatchRendering,
+            showAsUpperCase,
           }
         },
         /**
@@ -300,6 +314,14 @@ export default function stateModelFactory(
                 },
               ],
             },
+            {
+              label: 'Use upper-case',
+              type: 'checkbox',
+              checked: self.showAsUpperCase,
+              onClick: () => {
+                self.setShowAsUpperCase(!self.showAsUpperCase)
+              },
+            },
             {
               label: 'Show all letters',
               type: 'checkbox',

package/src/LinearMafDisplay/types.ts

@@ -16,6 +16,6 @@ export interface NodeWithIdsAndLength {
 
 export interface Sample {
   id: string
-  label: string
+  label?: string
   color?: string
 }

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -19,6 +19,7 @@ interface RenderArgs extends RenderArgsDeserialized {
   showAllLetters: boolean
   mismatchRendering: boolean
   statusCallback?: (arg: string) => void
+  showAsUpperCase: boolean
 }
 
 export default class LinearMafRenderer extends FeatureRendererType {