react-msaview 3.1.7 → 3.1.8

package/src/components/header/HeaderMenuExtra.tsx

@@ -0,0 +1,108 @@
+import React, { lazy } from 'react'
+import { observer } from 'mobx-react'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+
+// locals
+import { MsaViewModel } from '../../model'
+
+// icons
+import MoreVert from '@mui/icons-material/MoreVert'
+import Sort from '@mui/icons-material/Sort'
+import Visibility from '@mui/icons-material/Visibility'
+import FilterAlt from '@mui/icons-material/FilterAlt'
+import Search from '@mui/icons-material/Search'
+import PhotoCamera from '@mui/icons-material/PhotoCamera'
+import RestartAlt from '@mui/icons-material/RestartAlt'
+
+// lazies
+const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog'))
+const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog'))
+const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
+
+const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
+  const { featureMode, subFeatureRows, noAnnotations, interProScanJobIds } =
+    model
+  return (
+    <CascadingMenuButton
+      menuItems={[
+        {
+          label: 'Reset zoom to default',
+          icon: RestartAlt,
+          onClick: () => {
+            model.setColWidth(16)
+            model.setRowHeight(20)
+          },
+        },
+        {
+          label: 'Export SVG',
+          icon: PhotoCamera,
+          onClick: () =>
+            model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }]),
+        },
+        {
+          label: 'Features/protein domains',
+          type: 'subMenu',
+          subMenu: [
+            {
+              label:
+                'Show domains' + (noAnnotations ? ' (no domains loaded)' : ''),
+              icon: Visibility,
+              checked: featureMode,
+              type: 'checkbox',
+              onClick: () => model.setFeatureMode(!featureMode),
+            },
+            {
+              label: 'Use sub-row layout',
+              checked: subFeatureRows,
+              icon: Sort,
+              type: 'checkbox',
+              onClick: () => model.setSubFeatureRows(!subFeatureRows),
+            },
+            {
+              label: 'Filter domains',
+              icon: FilterAlt,
+              onClick: () => {
+                model.queueDialog(onClose => [
+                  FeatureFilterDialog,
+                  { onClose, model },
+                ])
+              },
+            },
+            {
+              label: 'Query InterProScan for domains...',
+              icon: Search,
+              onClick: () =>
+                model.queueDialog(onClose => [
+                  InterProScanDialog,
+                  { onClose, model },
+                ]),
+            },
+            {
+              label: 'Load previous InterProScan results...',
+              icon: Search,
+              type: 'subMenu',
+              subMenu: interProScanJobIds.length
+                ? interProScanJobIds.map(({ jobId, date }) => ({
+                    label:
+                      new Date(date).toLocaleString('en-US') + ' - ' + jobId,
+                    onClick: () => model.loadInterProScanResults(jobId),
+                  }))
+                : [
+                    {
+                      label: 'No previous searches',
+                      disabled: true,
+                      onClick: () => {},
+                    },
+                  ],
+            },
+          ],
+        },
+        ...(model.extraViewMenuItems?.() || []),
+      ]}
+    >
+      <MoreVert />
+    </CascadingMenuButton>
+  )
+})
+
+export default HeaderMenuExtra

package/src/components/header/HeaderStatusArea.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import { MsaViewModel } from '../../model'
+
+const useStyles = makeStyles()({
+  margin: {
+    margin: 'auto',
+    marginLeft: 10,
+  },
+})
+
+const HeaderStatusArea = observer(({ model }: { model: MsaViewModel }) => {
+  const { status } = model
+  const { classes } = useStyles()
+  return status ? (
+    <Typography className={classes.margin}>
+      {status.msg}{' '}
+      {status.url ? (
+        <a href={status.url} target="_blank" rel="noreferrer">
+          (status)
+        </a>
+      ) : null}
+    </Typography>
+  ) : null
+})
+
+export default HeaderStatusArea

package/src/components/{MultiAlignmentSelector.tsx → header/MultiAlignmentSelector.tsx}

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react'
 import { Select } from '@mui/material'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 const MultiAlignmentSelector = observer(function ({
   model,

package/src/components/header/ZoomControls.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../../model'
+
+// icons
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomOut from '@mui/icons-material/ZoomOut'
+
+const ZoomControls = observer(function ZoomControls({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  return (
+    <>
+      <IconButton onClick={() => model.zoomIn()}>
+        <ZoomIn />
+      </IconButton>
+      <IconButton onClick={() => model.zoomOut()}>
+        <ZoomOut />
+      </IconButton>
+    </>
+  )
+})
+export default ZoomControls

package/src/components/{ImportForm → import}/ImportFormExamples.tsx

@@ -114,7 +114,7 @@ const ImportFormExamples = observer(function ({
           load(
             model,
             {
-              uri: '/rhv_test-only.aligned_with_mafft_auto.fa',
+              uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
               locationType: 'UriLocation',
             },
             {
@@ -126,6 +126,17 @@ const ImportFormExamples = observer(function ({
       >
         MAFFT+VeryFastTree(17.9k samples)
       </ListItem>
+      <ListItem
+        model={model}
+        onClick={() =>
+          load(model, {
+            uri: 'https://jbrowse.org/demos/ttc39a.mfa',
+            locationType: 'UriLocation',
+          })
+        }
+      >
+        Human BLAST results mfa
+      </ListItem>
     </ul>
   )
 })

package/src/components/{ImportForm → import}/util.ts

@@ -7,15 +7,10 @@ export async function load(
   treeFile?: FileLocation,
 ) {
   model.setError(undefined)
-  try {
-    if (msaFile) {
-      await model.setMSAFilehandle(msaFile)
-    }
-    if (treeFile) {
-      await model.setTreeFilehandle(treeFile)
-    }
-  } catch (e) {
-    console.error(e)
-    model.setError(e)
+  if (msaFile) {
+    model.setMSAFilehandle(msaFile)
+  }
+  if (treeFile) {
+    model.setTreeFilehandle(treeFile)
   }
 }

package/src/components/{Minimap.tsx → minimap/Minimap.tsx}

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react'
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const [mouseDown, setMouseDown] = useState<{

package/src/components/{MinimapSVG.tsx → minimap/MinimapSVG.tsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 const MinimapSVG = observer(function ({ model }: { model: MsaViewModel }) {
   const {

package/src/components/{MSAPanel → msa}/MSACanvas.tsx

@@ -4,7 +4,7 @@ import normalizeWheel from 'normalize-wheel'
 
 // locals
 import { MsaViewModel } from '../../model'
-import MSABlock from './MSABlock'
+import MSACanvasBlock from './MSACanvasBlock'
 import Loading from './Loading'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
@@ -39,6 +39,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
         })
       }
       origEvent.preventDefault()
+      origEvent.stopPropagation()
     }
     curr.addEventListener('wheel', onWheel)
     return () => {
@@ -124,7 +125,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
         <Loading />
       ) : (
         blocks2d.map(([bx, by]) => (
-          <MSABlock
+          <MSACanvasBlock
             key={`${bx}_${by}`}
             model={model}
             offsetX={bx}

package/src/components/{MSAPanel/MSABlock.tsx → msa/MSACanvasBlock.tsx}

@@ -7,6 +7,7 @@ import { observer } from 'mobx-react'
 import { renderMSABlock } from './renderMSABlock'
 import { MsaViewModel } from '../../model'
 import { colorContrast } from '../../util'
+import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock'
 
 const MSABlock = observer(function ({
   model,
@@ -38,19 +39,31 @@ const MSABlock = observer(function ({
   const ref = useRef<HTMLCanvasElement>(null)
   useEffect(() => {
     const ctx = ref.current?.getContext('2d')
-    return ctx
-      ? autorun(() => {
-          renderMSABlock({
-            ctx,
-            theme,
-            offsetX,
-            offsetY,
-            contrastScheme,
-            model,
-          })
+    if (!ctx) {
+      return
+    }
+    return autorun(() => {
+      ctx.resetTransform()
+      ctx.clearRect(0, 0, blockSize, blockSize)
+      if (model.featureMode) {
+        renderBoxFeatureCanvasBlock({
+          ctx,
+          offsetX,
+          offsetY,
+          model,
         })
-      : undefined
-  }, [model, offsetX, offsetY, theme, contrastScheme])
+      }
+      renderMSABlock({
+        ctx,
+        theme,
+        offsetX,
+        offsetY,
+        contrastScheme,
+        model,
+      })
+    })
+  }, [model, offsetX, offsetY, theme, blockSize, contrastScheme])
+
   return (
     <canvas
       ref={ref}

package/src/components/{MSAPanel/index.tsx → msa/MSAPanel.tsx}

@@ -1,13 +1,19 @@
 import React from 'react'
+import { observer } from 'mobx-react'
+
+// locals
 import MSACanvas from './MSACanvas'
 import MSAMouseoverCanvas from './MSAMouseoverCanvas'
+// types
 import { MsaViewModel } from '../../model'
 
-export default function MSAPanel({ model }: { model: MsaViewModel }) {
+const MSAPanel = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <div style={{ position: 'relative' }}>
       <MSACanvas model={model} />
       <MSAMouseoverCanvas model={model} />
     </div>
   )
-}
+})
+
+export default MSAPanel

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -0,0 +1,88 @@
+import { HierarchyNode } from 'd3-hierarchy'
+
+// locals
+import { MsaViewModel } from '../../model'
+import { NodeWithIdsAndLength } from '../../util'
+
+export function renderBoxFeatureCanvasBlock({
+  model,
+  offsetX,
+  offsetY,
+  ctx,
+  highResScaleFactorOverride,
+  blockSizeYOverride,
+}: {
+  offsetX: number
+  offsetY: number
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  highResScaleFactorOverride?: number
+  blockSizeYOverride?: number
+}) {
+  const { hierarchy, blockSize, rowHeight, highResScaleFactor, featureMode } =
+    model
+  if (featureMode) {
+    const k = highResScaleFactorOverride || highResScaleFactor
+    const by = blockSizeYOverride || blockSize
+    ctx.resetTransform()
+    ctx.scale(k, k)
+    ctx.translate(-offsetX, rowHeight / 2 - offsetY)
+
+    const leaves = hierarchy.leaves()
+    const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
+    const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
+    const visibleLeaves = leaves.slice(yStart, yEnd)
+
+    drawTiles({
+      model,
+      ctx,
+      visibleLeaves,
+    })
+  }
+}
+
+function drawTiles({
+  model,
+  ctx,
+  visibleLeaves,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
+}) {
+  const {
+    subFeatureRows,
+    colWidth,
+    rowHeight,
+    fillPalette,
+    strokePalette,
+    tidyFilteredGatheredAnnotations,
+  } = model
+
+  for (const node of visibleLeaves) {
+    const {
+      x,
+      data: { name },
+    } = node
+    const y = x!
+
+    const entry = tidyFilteredGatheredAnnotations?.[name]
+
+    let j = 0
+    if (entry) {
+      for (const { start, end, accession } of entry) {
+        const m1 = model.seqCoordToRowSpecificGlobalCoord(name, start - 1)
+        const m2 = model.seqCoordToRowSpecificGlobalCoord(name, end)
+        const x = m1 * colWidth
+        ctx.fillStyle = fillPalette[accession]
+        ctx.strokeStyle = strokePalette[accession]
+        const h = subFeatureRows ? 4 : rowHeight
+        const t = y - rowHeight + (subFeatureRows ? j * h : 0)
+        const lw = colWidth * (m2 - m1)
+        ctx.fillRect(x, t, lw, h)
+        ctx.strokeRect(x, t, lw, h)
+        j++
+      }
+    }
+  }
+}

package/src/components/{MSAPanel → msa}/renderMSABlock.ts

@@ -1,9 +1,10 @@
+import { HierarchyNode } from 'd3-hierarchy'
+import { Theme } from '@mui/material'
+
 // locals
 import { MsaViewModel } from '../../model'
 import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
 import { NodeWithIdsAndLength } from '../../util'
-import { HierarchyNode } from 'd3-hierarchy'
-import { Theme } from '@mui/material'
 
 export function renderMSABlock({
   model,
@@ -33,13 +34,13 @@ export function renderMSABlock({
     rowHeight,
     fontSize,
     highResScaleFactor,
+    featureMode,
   } = model
   const k = highResScaleFactorOverride || highResScaleFactor
   const bx = blockSizeXOverride || blockSize
   const by = blockSizeYOverride || blockSize
   ctx.resetTransform()
   ctx.scale(k, k)
-  ctx.clearRect(0, 0, bx, by)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
   ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
@@ -52,16 +53,18 @@ export function renderMSABlock({
   const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
   const visibleLeaves = leaves.slice(yStart, yEnd)
 
-  drawTiles({
-    model,
-    ctx,
-    theme,
-    offsetX,
-    offsetY,
-    xStart,
-    xEnd,
-    visibleLeaves,
-  })
+  if (!featureMode) {
+    drawTiles({
+      model,
+      ctx,
+      theme,
+      offsetX,
+      offsetY,
+      xStart,
+      xEnd,
+      visibleLeaves,
+    })
+  }
   drawText({
     model,
     ctx,
@@ -72,6 +75,7 @@ export function renderMSABlock({
     xEnd,
     visibleLeaves,
   })
+  ctx.resetTransform()
 }
 
 function drawTiles({
@@ -104,11 +108,9 @@ function drawTiles({
 
   for (const node of visibleLeaves) {
     const {
-      // @ts-expect-error
-      x: y,
       data: { name },
     } = node
-
+    const y = node.x!
     const str = columns[name]?.slice(xStart, xEnd)
     for (let i = 0; i < str?.length; i++) {
       const letter = str[i]
@@ -150,14 +152,14 @@ function drawText({
   xStart: number
   xEnd: number
 }) {
-  const { bgColor, colorScheme, columns, colWidth, rowHeight } = model
+  const { bgColor, featureMode, colorScheme, columns, colWidth, rowHeight } =
+    model
   if (rowHeight >= 5 && colWidth > rowHeight / 2) {
     for (const node of visibleLeaves) {
       const {
-        // @ts-expect-error
-        x: y,
         data: { name },
       } = node
+      const y = node.x!
       const str = columns[name]?.slice(xStart, xEnd)
       for (let i = 0; i < str?.length; i++) {
         const letter = str[i]
@@ -166,7 +168,11 @@ function drawText({
         const x = i * colWidth + offsetX - (offsetX % colWidth)
 
         // note: -rowHeight/4 matches +rowHeight/4 in tree
-        ctx.fillStyle = bgColor ? contrast : color || 'black'
+        ctx.fillStyle = featureMode
+          ? 'black'
+          : bgColor
+            ? contrast
+            : color || 'black'
         ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4)
       }
     }

package/src/components/{TreePanel → tree}/TreeCanvas.tsx

@@ -33,6 +33,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
         })
       }
       origEvent.preventDefault()
+      origEvent.stopPropagation()
     }
     curr.addEventListener('wheel', onWheel)
     return () => {
@@ -113,7 +114,6 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         height,
         position: 'relative',
-        overflow: 'hidden',
         width: treeWidth + padding,
       }}
     >

package/src/components/{TreePanel → tree}/TreeCanvasBlock.tsx

@@ -103,7 +103,7 @@ const TreeCanvasBlock = observer(function ({
       maxY: y + 1 + offsetY,
     })
 
-    return entry && entry.branch
+    return entry?.branch
       ? { ...entry, x: event.clientX, y: event.clientY }
       : undefined
   }

package/src/components/{TreePanel → tree}/TreeNodeMenu.tsx

@@ -17,9 +17,7 @@ const TreeMenu = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
-  const { selectedStructures, collapsed, collapsed2, structures } = model
-  const nodeDetails = node ? model.getRowData(node.name) : undefined
-
+  const { collapsed, collapsed2 } = model
   return (
     <Menu
       anchorReference="anchorPosition"
@@ -72,56 +70,6 @@ const TreeMenu = observer(function ({
           ? 'Show node'
           : 'Hide node'}
       </MenuItem>
-
-      {structures[node.name]?.map(entry =>
-        !selectedStructures.some(n => n.id === node.name) ? (
-          <MenuItem
-            key={JSON.stringify(entry)}
-            dense
-            onClick={() => {
-              model.addStructureToSelection({
-                structure: entry,
-                id: node.name,
-              })
-              onClose()
-            }}
-          >
-            Add PDB to selection ({entry.pdb})
-          </MenuItem>
-        ) : (
-          <MenuItem
-            key={JSON.stringify(entry)}
-            dense
-            onClick={() => {
-              model.removeStructureFromSelection({
-                structure: entry,
-                id: node.name,
-              })
-              onClose()
-            }}
-          >
-            Remove PDB from selection ({entry.pdb})
-          </MenuItem>
-        ),
-      )}
-
-      {// @ts-expect-error
-      nodeDetails?.data.accession?.map(accession => (
-        <MenuItem
-          dense
-          key={accession}
-          onClick={() => {
-            model.addUniprotTrack({
-              // @ts-expect-error
-              name: nodeDetails?.data.name,
-              accession,
-            })
-            onClose()
-          }}
-        >
-          Open UniProt track ({accession})
-        </MenuItem>
-      ))}
     </Menu>
   )
 })

package/src/components/{TreePanel/index.tsx → tree/TreePanel.tsx}

@@ -7,7 +7,7 @@ import TreeCanvas from './TreeCanvas'
 const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
   const { treeAreaWidth } = model
   return (
-    <div style={{ flexShrink: 0, width: treeAreaWidth }}>
+    <div style={{ overflow: 'hidden', flexShrink: 0, width: treeAreaWidth }}>
       <TreeCanvas model={model} />
     </div>
   )

package/src/components/{TreePanel → tree}/dialogs/TreeNodeInfoDialog.tsx

@@ -6,7 +6,10 @@ import {
   Attributes,
   BaseCard,
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+
+// locals
 import { MsaViewModel } from '../../../model'
+import SequenceTextArea from '../../SequenceTextArea'
 
 export default observer(function ({
   info,
@@ -19,14 +22,18 @@ export default observer(function ({
   nodeName: string
   onClose: () => void
 }) {
-  const { treeMetadata } = model
+  const { treeMetadata, rows } = model
   const metadata = treeMetadata[nodeName]
+  const [name, sequence] = rows.find(f => f[0] === nodeName)!
   return (
-    <Dialog onClose={() => onClose()} open title="Tree node info">
+    <Dialog onClose={() => onClose()} open title="Tree node info" maxWidth="xl">
       <DialogContent>
         <BaseCard title="Attributes">
           <Attributes attributes={{ nodeName, ...info }} />
         </BaseCard>
+        <BaseCard title="Sequence">
+          <SequenceTextArea str={[[name, sequence]]} />
+        </BaseCard>
         {metadata ? (
           <BaseCard title="Extra metadata">
             <Attributes attributes={metadata} />