react-msaview 5.0.7 → 5.0.13

package/src/collapseLogic.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, test } from 'vitest'
+
+import { collapse, find, hierarchy, leaves, sort, sum } from './hierarchy.ts'
+
+import type { NodeWithIds } from './types.ts'
+
+function buildRoot(tree: NodeWithIds, collapsed: string[], showOnly?: string) {
+  let hier = hierarchy(tree, d => d.children)
+  sum(hier, d => (d.children.length > 0 ? 0 : 1))
+  sort(hier, (a, b) => (a.data.length ?? 1) - (b.data.length ?? 1))
+
+  if (showOnly) {
+    const res = find(hier, n => n.data.id === showOnly)
+    if (res) {
+      hier = res
+    }
+  }
+
+  for (const collapsedId of collapsed) {
+    const node = find(hier, n => n.data.id === collapsedId)
+    if (!node) {
+      continue
+    }
+    if (node.children) {
+      collapse(node)
+    } else if (node.parent?.children) {
+      node.parent.children = node.parent.children.filter(
+        c => c.data.id !== collapsedId,
+      )
+    }
+  }
+
+  return hier
+}
+
+function simpleTree(): NodeWithIds {
+  return {
+    id: 'root',
+    name: 'root',
+    children: [
+      {
+        id: 'clade1',
+        name: 'clade1',
+        children: [
+          { id: 'seq1', name: 'seq1', children: [] },
+          { id: 'seq2', name: 'seq2', children: [] },
+        ],
+      },
+      {
+        id: 'clade2',
+        name: 'clade2',
+        children: [
+          { id: 'seq3', name: 'seq3', children: [] },
+          { id: 'seq4', name: 'seq4', children: [] },
+        ],
+      },
+    ],
+  }
+}
+
+describe('collapse logic (mirrors model.root getter)', () => {
+  test('no collapsed nodes returns all leaves', () => {
+    const root = buildRoot(simpleTree(), [])
+    expect(leaves(root).map(n => n.data.name)).toEqual([
+      'seq1',
+      'seq2',
+      'seq3',
+      'seq4',
+    ])
+  })
+
+  test('collapsing a branch hides its children', () => {
+    const root = buildRoot(simpleTree(), ['clade1'])
+    const l = leaves(root).map(n => n.data.name)
+    expect(l).toEqual(['clade1', 'seq3', 'seq4'])
+  })
+
+  test('collapsing a leaf node removes it', () => {
+    const root = buildRoot(simpleTree(), ['seq2'])
+    const l = leaves(root).map(n => n.data.name)
+    expect(l).toEqual(['seq1', 'seq3', 'seq4'])
+  })
+
+  test('collapsing multiple leaves', () => {
+    const root = buildRoot(simpleTree(), ['seq1', 'seq4'])
+    const l = leaves(root).map(n => n.data.name)
+    expect(l).toEqual(['seq2', 'seq3'])
+  })
+
+  test('collapsing a branch and a leaf in another branch', () => {
+    const root = buildRoot(simpleTree(), ['clade1', 'seq3'])
+    const l = leaves(root).map(n => n.data.name)
+    expect(l).toEqual(['clade1', 'seq4'])
+  })
+
+  test('collapsing nonexistent id is a no-op', () => {
+    const root = buildRoot(simpleTree(), ['doesnotexist'])
+    expect(leaves(root).map(n => n.data.name)).toEqual([
+      'seq1',
+      'seq2',
+      'seq3',
+      'seq4',
+    ])
+  })
+
+  test('showOnly focuses on a subtree', () => {
+    const root = buildRoot(simpleTree(), [], 'clade2')
+    expect(leaves(root).map(n => n.data.name)).toEqual(['seq3', 'seq4'])
+  })
+
+  test('showOnly + collapse within subtree', () => {
+    const root = buildRoot(simpleTree(), ['seq3'], 'clade2')
+    expect(leaves(root).map(n => n.data.name)).toEqual(['seq4'])
+  })
+})

package/src/components/Checkbox2.tsx

@@ -1,18 +1,7 @@
 import React from 'react'
 
-import {
-  Checkbox,
-  FormControlLabel,
-  type FormControlLabelProps,
-} from '@mui/material'
+import { Checkbox, FormControlLabel } from '@mui/material'
 
-function FormControlLabel2(rest: FormControlLabelProps) {
-  return (
-    <div>
-      <FormControlLabel {...rest} />
-    </div>
-  )
-}
 export default function Checkbox2({
   checked,
   label,
@@ -25,11 +14,13 @@ export default function Checkbox2({
   onChange: () => void
 }) {
   return (
-    <FormControlLabel2
-      control={
-        <Checkbox disabled={disabled} checked={checked} onChange={onChange} />
-      }
-      label={label}
-    />
+    <div>
+      <FormControlLabel
+        control={
+          <Checkbox disabled={disabled} checked={checked} onChange={onChange} />
+        }
+        label={label}
+      />
+    </div>
   )
 }

package/src/components/MSAViewer.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useMemo } from 'react'
+
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import useMeasure from '@jbrowse/core/util/useMeasure'
+import { ThemeProvider } from '@mui/material/styles'
+
+import MSAModelF from '../model.ts'
+import Loading from './Loading.tsx'
+
+import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
+
+interface MSAViewerProps {
+  msa?: string
+  tree?: string
+  gff?: string
+  msaFilehandle?: FileLocationType
+  treeFilehandle?: FileLocationType
+  gffFilehandle?: FileLocationType
+  colorScheme?: string
+  height?: number
+}
+
+export default function MSAViewer({
+  msa,
+  tree,
+  gff,
+  msaFilehandle,
+  treeFilehandle,
+  gffFilehandle,
+  colorScheme,
+  height,
+}: MSAViewerProps) {
+  const theme = useMemo(() => createJBrowseTheme(), [])
+  const model = useMemo(
+    () =>
+      MSAModelF().create({
+        type: 'MsaView',
+        ...(msa || tree || gff
+          ? { data: { msa: msa ?? '', tree: tree ?? '', gff } }
+          : {}),
+        ...(msaFilehandle ? { msaFilehandle } : {}),
+        ...(treeFilehandle ? { treeFilehandle } : {}),
+        ...(gffFilehandle ? { gffFilehandle } : {}),
+        ...(colorScheme ? { colorSchemeName: colorScheme } : {}),
+        ...(height ? { height } : {}),
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  )
+
+  const [ref, { width }] = useMeasure()
+  useEffect(() => {
+    if (width) {
+      requestAnimationFrame(() => {
+        model.setWidth(width)
+      })
+    }
+  }, [model, width])
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div ref={ref}>
+        <Loading model={model} />
+      </div>
+    </ThemeProvider>
+  )
+}

package/src/components/Track.tsx

@@ -1,10 +1,12 @@
-import React, { lazy, useEffect, useRef, useState } from 'react'
+import React, { lazy, useCallback, useRef, useState } from 'react'
 
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import { IconButton, Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import { useWheelScroll } from '../useWheelScroll.ts'
+
 import type { MsaViewModel } from '../model.ts'
 
 const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog.tsx'))
@@ -101,31 +103,13 @@ const Track = observer(function ({
     model: { height, error },
   } = track
   const ref = useRef<HTMLDivElement>(null)
-  const scheduled = useRef(false)
-  const deltaX = useRef(0)
-  useEffect(() => {
-    const curr = ref.current
-    if (!curr) {
-      return
-    }
-    function onWheel(event: WheelEvent) {
-      deltaX.current += event.deltaX
-
-      if (!scheduled.current) {
-        scheduled.current = true
-        requestAnimationFrame(() => {
-          model.doScrollX(-deltaX.current)
-          deltaX.current = 0
-          scheduled.current = false
-        })
-      }
-      event.preventDefault()
-    }
-    curr.addEventListener('wheel', onWheel, { passive: false })
-    return () => {
-      curr.removeEventListener('wheel', onWheel)
-    }
-  }, [model])
+  const onScrollX = useCallback(
+    (d: number) => {
+      model.doScrollX(d)
+    },
+    [model],
+  )
+  useWheelScroll({ ref, onScrollX })
 
   return (
     <div key={track.id} style={{ display: 'flex', height }}>

package/src/components/dialogs/DomainDialog.tsx

@@ -4,7 +4,6 @@ import { Dialog } from '@jbrowse/core/ui'
 import { Tab, Tabs } from '@mui/material'
 
 import InterProScanPanel from './InterProScanDialog.tsx'
-import TabPanel from './TabPanel.tsx'
 import UserProvidedResultPanel from './UserProvidedDomainsDialog.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -35,12 +34,12 @@ export default function LaunchDomainViewDialog({
         <Tab value={0} label="Automatic lookup" />
         <Tab value={1} label="Manual" />
       </Tabs>
-      <TabPanel value={choice} index={0}>
+      {choice === 0 ? (
         <InterProScanPanel model={model} handleClose={handleClose} />
-      </TabPanel>
-      <TabPanel value={choice} index={1}>
+      ) : null}
+      {choice === 1 ? (
         <UserProvidedResultPanel model={model} handleClose={handleClose} />
-      </TabPanel>
+      ) : null}
     </Dialog>
   )
 }

package/src/components/dialogs/InterProScanDialog.tsx

@@ -57,32 +57,32 @@ const InterProScanDialog = observer(function ({
       category: 'Other category',
     },
     {
-      name: 'SUPERFAMILY',
+      name: 'SuperFamily',
       category: 'Structural domains',
       checked: true,
     },
     {
-      name: 'PANTHER',
+      name: 'Panther',
       category: 'Families, domains, sites & repeats',
       checked: true,
     },
     {
-      name: 'Gene3D',
+      name: 'Gene3d',
       category: 'Structural domains',
       checked: true,
     },
     {
-      name: 'Hamap',
+      name: 'HAMAP',
       category: 'Families, domains, sites & repeats',
       checked: true,
     },
     {
-      name: 'ProSiteProfiles',
+      name: 'PrositeProfiles',
       category: 'Families, domains, sites & repeats',
       checked: true,
     },
     {
-      name: 'ProSitePatterns',
+      name: 'PrositePatterns',
       category: 'Families, domains, sites & repeats',
       checked: true,
     },
@@ -108,7 +108,7 @@ const InterProScanDialog = observer(function ({
       checked: true,
     },
     {
-      name: 'Pfam',
+      name: 'PfamA',
       category: 'Families, domains, sites & repeats',
       checked: true,
     },

package/src/components/dialogs/SettingsDialog.tsx

@@ -46,16 +46,12 @@ const TreeSettings = observer(function TreeSettings({
 }: {
   model: MsaViewModel
 }) {
-  const { classes } = useStyles()
   const {
     drawTree,
     drawLabels,
     drawNodeBubbles,
     labelsAlignRight,
-    noTree,
     showBranchLen,
-    treeWidthMatchesArea,
-    treeWidth,
   } = model
 
   return (
@@ -99,31 +95,6 @@ const TreeSettings = observer(function TreeSettings({
           model.setDrawLabels(!drawLabels)
         }}
       />
-      {noTree ? null : (
-        <div>
-          <Checkbox2
-            checked={treeWidthMatchesArea}
-            label="Make tree width fit to tree area?"
-            onChange={() => {
-              model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
-            }}
-          />
-          {treeWidthMatchesArea ? null : (
-            <div className={classes.flex}>
-              <Typography>Tree width ({treeWidth}px)</Typography>
-              <Slider
-                className={classes.field}
-                min={50}
-                max={600}
-                value={treeWidth}
-                onChange={(_, val) => {
-                  model.setTreeWidth(val)
-                }}
-              />
-            </div>
-          )}
-        </div>
-      )}
     </div>
   )
 })
@@ -136,7 +107,6 @@ const MSASettings = observer(function MSASettings({
   const { classes } = useStyles()
   const {
     bgColor,
-    contrastLettering,
     colWidth,
     allowedGappyness,
     drawMsaLetters,
@@ -162,13 +132,6 @@ const MSASettings = observer(function MSASettings({
           model.setBgColor(!bgColor)
         }}
       />
-      <Checkbox2
-        checked={contrastLettering}
-        label="Use contrast lettering"
-        onChange={() => {
-          model.setContrastLettering(!contrastLettering)
-        }}
-      />
       <Checkbox2
         checked={hideGaps}
         label="Enable hiding gappy columns?"

package/src/components/header/ColorSchemeMenu.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import Palette from '@mui/icons-material/Palette'
+import { observer } from 'mobx-react'
+
+import colorSchemes from '../../colorSchemes.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const ColorSchemeMenu = observer(function ({ model }: { model: MsaViewModel }) {
+  const { colorSchemeName } = model
+  return (
+    <CascadingMenuButton
+      closeAfterItemClick
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+      menuItems={Object.keys(colorSchemes).map(
+        option =>
+          ({
+            label: option,
+            type: 'radio',
+            checked: colorSchemeName === option,
+            onClick: () => {
+              model.setColorSchemeName(option)
+            },
+          }) as const,
+      )}
+    >
+      <Palette />
+    </CascadingMenuButton>
+  )
+})
+
+export default ColorSchemeMenu

package/src/components/header/FileMenu.tsx

@@ -0,0 +1,84 @@
+import React, { lazy } from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import Assignment from '@mui/icons-material/Assignment'
+import FolderOpen from '@mui/icons-material/FolderOpen'
+import PhotoCamera from '@mui/icons-material/PhotoCamera'
+import Settings from '@mui/icons-material/Settings'
+import { observer } from 'mobx-react'
+
+import { getDomainMenu } from './getDomainsMenu.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog.tsx'))
+const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog.tsx'))
+const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog.tsx'))
+
+const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
+  return (
+    <CascadingMenuButton
+      menuItems={[
+        {
+          label: 'Return to import form',
+          icon: FolderOpen,
+          onClick: () => {
+            model.reset()
+          },
+        },
+        {
+          label: 'Metadata',
+          icon: Assignment,
+          onClick: () => {
+            model.queueDialog(onClose => [
+              MetadataDialog,
+              {
+                model,
+                onClose,
+              },
+            ])
+          },
+        },
+        {
+          label: 'More settings',
+          icon: Settings,
+          onClick: () => {
+            model.queueDialog(onClose => [
+              SettingsDialog,
+              {
+                model,
+                onClose,
+              },
+            ])
+          },
+        },
+        {
+          label: 'Domain settings',
+          type: 'subMenu',
+          subMenu: getDomainMenu({
+            model,
+          }),
+        },
+        {
+          label: 'Export SVG',
+          icon: PhotoCamera,
+          onClick: () => {
+            model.queueDialog(onClose => [
+              ExportSVGDialog,
+              {
+                onClose,
+                model,
+              },
+            ])
+          },
+        },
+      ]}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+    >
+      <FolderOpen />
+    </CascadingMenuButton>
+  )
+})
+
+export default FileMenu

package/src/components/header/Header.tsx

@@ -5,15 +5,16 @@ import Help from '@mui/icons-material/Help'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import ColorSchemeMenu from './ColorSchemeMenu.tsx'
+import FileMenu from './FileMenu.tsx'
 import GappynessSlider from './GappynessSlider.tsx'
 import HeaderInfoArea from './HeaderInfoArea.tsx'
-import HeaderMenu from './HeaderMenu.tsx'
 import HeaderStatusArea from './HeaderStatusArea.tsx'
+import MSASettingsMenu from './MSASettingsMenu.tsx'
 import MultiAlignmentSelector from './MultiAlignmentSelector.tsx'
-import SettingsMenu from './SettingsMenu.tsx'
+import TreeSettingsMenu from './TreeSettingsMenu.tsx'
 import ZoomControls from './ZoomControls.tsx'
 import ZoomMenu from './ZoomMenu.tsx'
-import ZoomStar from './ZoomStar.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -26,10 +27,11 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
   }, [model, height])
   return (
     <div ref={ref} style={{ display: 'flex' }}>
-      <HeaderMenu model={model} />
-      <SettingsMenu model={model} />
+      <FileMenu model={model} />
+      <ColorSchemeMenu model={model} />
+      <TreeSettingsMenu model={model} />
+      <MSASettingsMenu model={model} />
       <ZoomControls model={model} />
-      {model.showZoomStar ? <ZoomStar model={model} /> : null}
       <ZoomMenu model={model} />
       <GappynessSlider model={model} />
       <div style={{ paddingLeft: 20, margin: 'auto' }}>