react-msaview 5.0.6 → 5.0.13

package/src/components/header/HeaderMenu.tsx

@@ -1,75 +1,17 @@
-import React, { lazy } from 'react'
+import React from 'react'
 
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import AccountTree from '@mui/icons-material/AccountTree'
-import Assignment from '@mui/icons-material/Assignment'
-import FilterAlt from '@mui/icons-material/FilterAlt'
-import FolderOpen from '@mui/icons-material/FolderOpen'
 import MoreVert from '@mui/icons-material/Menu'
-import PhotoCamera from '@mui/icons-material/PhotoCamera'
-import Search from '@mui/icons-material/Search'
-import Sort from '@mui/icons-material/Sort'
 import Visibility from '@mui/icons-material/Visibility'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
 
-// lazies
-const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog.tsx'))
-const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog.tsx'))
-const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
-const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog.tsx'))
-const UserProvidedDomainsDialog = lazy(
-  () => import('../dialogs/UserProvidedDomainsDialog.tsx'),
-)
-const InterProScanDialog = lazy(
-  () => import('../dialogs/InterProScanDialog.tsx'),
-)
-
 const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
-  const {
-    showDomains,
-    actuallyShowDomains,
-    subFeatureRows,
-    noDomains,
-    tracks,
-    turnedOffTracks,
-  } = model
+  const { tracks, turnedOffTracks } = model
   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',
-          onClick: () => {
-            model.queueDialog(onClose => [
-              SettingsDialog,
-              {
-                model,
-                onClose,
-              },
-            ])
-          },
-        },
         {
           label: 'Tracks',
           icon: Visibility,
@@ -83,103 +25,10 @@ const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
             },
           })),
         },
-        {
-          label: 'Export SVG',
-          icon: PhotoCamera,
-          onClick: () => {
-            model.queueDialog(onClose => [
-              ExportSVGDialog,
-              {
-                onClose,
-                model,
-              },
-            ])
-          },
-        },
-        ...(model.rows.length >= 2
-          ? [
-              {
-                label: 'Calculate neighbor joining tree (BLOSUM62)',
-                icon: AccountTree,
-                onClick: () => {
-                  try {
-                    model.calculateNeighborJoiningTreeFromMSA()
-                  } catch (e) {
-                    console.error('Failed to calculate NJ tree:', e)
-                    model.setError(e)
-                  }
-                },
-              },
-            ]
-          : []),
-        {
-          label: 'Features/protein domains',
-          type: 'subMenu',
-          subMenu: [
-            {
-              label: 'Open domains...',
-              icon: FolderOpen,
-              onClick: () => {
-                model.queueDialog(handleClose => [
-                  UserProvidedDomainsDialog,
-                  {
-                    handleClose,
-                    model,
-                  },
-                ])
-              },
-            },
-            {
-              label: 'Query InterProScan for domains...',
-              icon: Search,
-              onClick: () => {
-                model.queueDialog(handleClose => [
-                  InterProScanDialog,
-                  {
-                    handleClose,
-                    model,
-                  },
-                ])
-              },
-            },
-            {
-              label: `Show domains${noDomains ? ' (no domains loaded)' : ''}`,
-              disabled: noDomains,
-              icon: Visibility,
-              checked: actuallyShowDomains ? showDomains : false,
-              type: 'checkbox',
-              onClick: () => {
-                model.setShowDomains(!showDomains)
-              },
-            },
-            {
-              label: `Use sub-row layout${noDomains ? ' (no domains loaded)' : ''}`,
-              disabled: noDomains,
-              checked: actuallyShowDomains ? subFeatureRows : false,
-              icon: Sort,
-              type: 'checkbox',
-              onClick: () => {
-                model.setSubFeatureRows(!subFeatureRows)
-              },
-            },
-            {
-              label: `Filter domains${noDomains ? ' (no domains loaded)' : ''}`,
-              icon: FilterAlt,
-              disabled: noDomains,
-              onClick: () => {
-                model.queueDialog(onClose => [
-                  FeatureFilterDialog,
-                  {
-                    onClose,
-                    model,
-                  },
-                ])
-              },
-            },
-          ],
-        },
         ...model.extraViewMenuItems(),
       ]}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
     >
       <MoreVert />
     </CascadingMenuButton>

package/src/components/header/MSASettingsMenu.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import Tune from '@mui/icons-material/Tune'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const MSASettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
+  const { drawMsaLetters, hideGaps, bgColor } = model
+  return (
+    <CascadingMenuButton
+      closeAfterItemClick={false}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+      menuItems={[
+        {
+          label: 'Draw letters',
+          type: 'checkbox',
+          checked: drawMsaLetters,
+          onClick: () => {
+            model.setDrawMsaLetters(!drawMsaLetters)
+          },
+        },
+        {
+          label: 'Color letters instead of background of tiles',
+          type: 'checkbox',
+          checked: !bgColor,
+          onClick: () => {
+            model.setBgColor(!bgColor)
+          },
+        },
+        {
+          label: 'Enable hiding gappy columns?',
+          type: 'checkbox',
+          checked: hideGaps,
+          onClick: () => {
+            model.setHideGaps(!hideGaps)
+          },
+        },
+      ]}
+    >
+      <Tune />
+    </CascadingMenuButton>
+  )
+})
+
+export default MSASettingsMenu

package/src/components/header/SettingsMenu.tsx

@@ -14,7 +14,6 @@ const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
   const {
     colorSchemeName,
     drawMsaLetters,
-    contrastLettering,
     hideGaps,
     bgColor,
     drawTree,
@@ -22,8 +21,6 @@ const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
     labelsAlignRight,
     drawNodeBubbles,
     drawLabels,
-    treeWidthMatchesArea,
-    noTree,
   } = model
   return (
     <CascadingMenuButton
@@ -65,14 +62,6 @@ const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
                 model.setBgColor(!bgColor)
               },
             },
-            {
-              label: 'Use contrast lettering',
-              type: 'checkbox',
-              checked: contrastLettering,
-              onClick: () => {
-                model.setContrastLettering(!contrastLettering)
-              },
-            },
             {
               label: 'Enable hiding gappy columns?',
               type: 'checkbox',
@@ -128,18 +117,6 @@ const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
                 model.setDrawLabels(!drawLabels)
               },
             },
-            ...(noTree
-              ? []
-              : [
-                  {
-                    label: 'Make tree width fit to tree area',
-                    type: 'checkbox' as const,
-                    checked: treeWidthMatchesArea,
-                    onClick: () => {
-                      model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
-                    },
-                  },
-                ]),
           ],
         },
       ]}

package/src/components/header/TreeSettingsMenu.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import AccountTree from '@mui/icons-material/AccountTree'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const TreeSettingsMenu = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const {
+    drawTree,
+    showBranchLen,
+    labelsAlignRight,
+    drawNodeBubbles,
+    drawLabels,
+    rows,
+  } = model
+  return (
+    <CascadingMenuButton
+      closeAfterItemClick={false}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+      menuItems={[
+        {
+          label: 'Show branch length',
+          type: 'checkbox',
+          checked: showBranchLen,
+          onClick: () => {
+            model.setShowBranchLen(!showBranchLen)
+          },
+        },
+        {
+          label: 'Show tree',
+          type: 'checkbox',
+          checked: drawTree,
+          onClick: () => {
+            model.setDrawTree(!drawTree)
+          },
+        },
+        {
+          label: 'Draw clickable bubbles on tree branches',
+          type: 'checkbox',
+          checked: drawNodeBubbles,
+          onClick: () => {
+            model.setDrawNodeBubbles(!drawNodeBubbles)
+          },
+        },
+        {
+          label: 'Tree labels align right',
+          type: 'checkbox',
+          checked: labelsAlignRight,
+          onClick: () => {
+            model.setLabelsAlignRight(!labelsAlignRight)
+          },
+        },
+        {
+          label: 'Draw labels',
+          type: 'checkbox',
+          checked: drawLabels,
+          onClick: () => {
+            model.setDrawLabels(!drawLabels)
+          },
+        },
+        ...(rows.length >= 2
+          ? [
+              {
+                label: 'Advanced',
+                type: 'subMenu' as const,
+                subMenu: [
+                  {
+                    label: 'Calculate neighbor joining tree (BLOSUM62)',
+                    onClick: () => {
+                      try {
+                        model.calculateNeighborJoiningTreeFromMSA()
+                      } catch (e) {
+                        console.error('Failed to calculate NJ tree:', e)
+                        model.setError(e)
+                      }
+                    },
+                  },
+                ],
+              },
+            ]
+          : []),
+      ]}
+    >
+      <AccountTree />
+    </CascadingMenuButton>
+  )
+})
+
+export default TreeSettingsMenu

package/src/components/header/ZoomMenu.tsx

@@ -37,14 +37,6 @@ const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
             model.resetZoom()
           },
         },
-        {
-          label: 'Show extra zoom options',
-          checked: model.showZoomStar,
-          type: 'checkbox',
-          onClick: () => {
-            model.setShowZoomStar(!model.showZoomStar)
-          },
-        },
       ]}
     >
       <MoreVert />

package/src/components/header/getDomainsMenu.ts

@@ -0,0 +1,83 @@
+import { lazy } from 'react'
+
+import FilterAlt from '@mui/icons-material/FilterAlt'
+import FolderOpen from '@mui/icons-material/FolderOpen'
+import Search from '@mui/icons-material/Search'
+import Sort from '@mui/icons-material/Sort'
+import Visibility from '@mui/icons-material/Visibility'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
+const UserProvidedDomainsDialog = lazy(
+  () => import('../dialogs/UserProvidedDomainsDialog.tsx'),
+)
+const InterProScanDialog = lazy(
+  () => import('../dialogs/InterProScanDialog.tsx'),
+)
+
+export function getDomainMenu({ model }: { model: MsaViewModel }) {
+  const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
+  return [
+    {
+      label: 'Open domains...',
+      icon: FolderOpen,
+      onClick: () => {
+        model.queueDialog(handleClose => [
+          UserProvidedDomainsDialog,
+          {
+            handleClose,
+            model,
+          },
+        ])
+      },
+    },
+    {
+      label: 'Query InterProScan for domains...',
+      icon: Search,
+      onClick: () => {
+        model.queueDialog(handleClose => [
+          InterProScanDialog,
+          {
+            handleClose,
+            model,
+          },
+        ])
+      },
+    },
+    {
+      label: `Show domains${noDomains ? ' (no domains loaded)' : ''}`,
+      disabled: noDomains,
+      icon: Visibility,
+      checked: actuallyShowDomains ? showDomains : false,
+      type: 'checkbox' as const,
+      onClick: () => {
+        model.setShowDomains(!showDomains)
+      },
+    },
+    {
+      label: `Use sub-row layout${noDomains ? ' (no domains loaded)' : ''}`,
+      disabled: noDomains,
+      checked: actuallyShowDomains ? subFeatureRows : false,
+      icon: Sort,
+      type: 'checkbox' as const,
+      onClick: () => {
+        model.setSubFeatureRows(!subFeatureRows)
+      },
+    },
+    {
+      label: `Filter domains${noDomains ? ' (no domains loaded)' : ''}`,
+      icon: FilterAlt,
+      disabled: noDomains,
+      onClick: () => {
+        model.queueDialog(onClose => [
+          FeatureFilterDialog,
+          {
+            onClose,
+            model,
+          },
+        ])
+      },
+    },
+  ]
+}

package/src/components/import/ImportFormExamples.tsx

@@ -33,29 +33,30 @@ function ListItem({
   )
 }
 
+const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments'
+
 const ImportFormExamples = observer(function ({
   model,
 }: {
   model: MsaViewModel
 }) {
-  function l2(uri1?: string, uri2?: string) {
+  function loadUris({
+    msa,
+    tree,
+    gff,
+  }: {
+    msa?: string
+    tree?: string
+    gff?: string
+  }) {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
         await load(
           model,
-          uri1
-            ? {
-                uri: uri1,
-                locationType: 'UriLocation',
-              }
-            : undefined,
-          uri2
-            ? {
-                uri: uri2,
-                locationType: 'UriLocation',
-              }
-            : undefined,
+          msa ? { uri: msa, locationType: 'UriLocation' } : undefined,
+          tree ? { uri: tree, locationType: 'UriLocation' } : undefined,
+          gff ? { uri: gff, locationType: 'UriLocation' } : undefined,
         )
       } catch (e) {
         console.error(e)
@@ -68,10 +69,9 @@ const ImportFormExamples = observer(function ({
       <ListItem
         model={model}
         onClick={() => {
-          l2(
-            undefined,
-            'https://jbrowse.org/genomes/newicktrees/sarscov2phylo.pub.ft.nh',
-          )
+          loadUris({
+            tree: 'https://jbrowse.org/genomes/newicktrees/sarscov2phylo.pub.ft.nh',
+          })
         }}
       >
         230k COVID-19 samples (tree only)
@@ -95,9 +95,7 @@ const ImportFormExamples = observer(function ({
       <ListItem
         model={model}
         onClick={() => {
-          l2(
-            'https://jbrowse.org/genomes/multiple_sequence_alignments/pfam-cov2.stock',
-          )
+          loadUris({ msa: `${BASE}/pfam-cov2.stock` })
         }}
       >
         PFAM SARS-CoV2 multi-stockholm
@@ -105,9 +103,18 @@ const ImportFormExamples = observer(function ({
       <ListItem
         model={model}
         onClick={() => {
-          l2(
-            'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
-          )
+          loadUris({
+            msa: `${BASE}/pfam-cov2.stock`,
+            gff: `${BASE}/pfam-cov2-domains.gff`,
+          })
+        }}
+      >
+        PFAM SARS-CoV2 multi-stockholm w/ domains loaded
+      </ListItem>
+      <ListItem
+        model={model}
+        onClick={() => {
+          loadUris({ msa: `${BASE}/Lysine.stock` })
         }}
       >
         Lysine stockholm file
@@ -115,9 +122,7 @@ const ImportFormExamples = observer(function ({
       <ListItem
         model={model}
         onClick={() => {
-          l2(
-            'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
-          )
+          loadUris({ msa: `${BASE}/PF01601_full.txt` })
         }}
       >
         PF01601 stockholm file (SARS-CoV2 spike protein)
@@ -125,9 +130,7 @@ const ImportFormExamples = observer(function ({
       <ListItem
         model={model}
         onClick={() => {
-          l2(
-            'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
-          )
+          loadUris({ msa: `${BASE}/europe_covid.fa` })
         }}
       >
         Europe COVID full genomes (LR883044.1 and 199 other sequences)
@@ -135,10 +138,10 @@ const ImportFormExamples = observer(function ({
       <ListItem
         model={model}
         onClick={() => {
-          l2(
-            'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
-            'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
-          )
+          loadUris({
+            msa: `${BASE}/rhv_test-only.aligned_with_mafft_auto.fa`,
+            tree: `${BASE}/rhv_test-only.aligned_with_mafft_auto.nh`,
+          })
         }}
       >
         MAFFT+VeryFastTree(17.9k samples)
@@ -146,7 +149,7 @@ const ImportFormExamples = observer(function ({
       <ListItem
         model={model}
         onClick={() => {
-          l2('https://jbrowse.org/demos/ttc39a.mfa')
+          loadUris({ msa: 'https://jbrowse.org/demos/ttc39a.mfa' })
         }}
       >
         Human BLAST results mfa