react-msaview 4.1.1 → 4.3.0

package/src/components/TextTrack.tsx

@@ -5,7 +5,8 @@ import { observer } from 'mobx-react'
 
 import { colorContrast } from '../util'
 
-import type { ITextTrack, MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model'
+import type { ITextTrack } from '../types'
 
 const AnnotationBlock = observer(function ({
   track,

package/src/components/Track.tsx

@@ -6,8 +6,6 @@ import { observer } from 'mobx-react'
 import normalizeWheel from 'normalize-wheel'
 import { makeStyles } from 'tss-react/mui'
 
-// icons
-
 import type { MsaViewModel } from '../model'
 
 // lazies

package/src/components/header/Header.tsx

@@ -6,10 +6,13 @@ import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import HeaderInfoArea from './HeaderInfoArea'
-import HeaderMenuExtra from './HeaderMenuExtra'
+import HeaderMenu from './HeaderMenu'
 import HeaderStatusArea from './HeaderStatusArea'
 import MultiAlignmentSelector from './MultiAlignmentSelector'
+import SettingsMenu from './SettingsMenu'
 import ZoomControls from './ZoomControls'
+import ZoomMenu from './ZoomMenu'
+import ZoomStar from './ZoomStar'
 
 import type { MsaViewModel } from '../../model'
 
@@ -22,9 +25,14 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
   }, [model, height])
   return (
     <div ref={ref} style={{ display: 'flex' }}>
-      <HeaderMenuExtra model={model} />
+      <HeaderMenu model={model} />
+      <SettingsMenu model={model} />
       <ZoomControls model={model} />
-      <MultiAlignmentSelector model={model} />
+      {model.showZoomStar ? <ZoomStar model={model} /> : null}
+      <ZoomMenu model={model} />
+      <div style={{ margin: 'auto' }}>
+        <MultiAlignmentSelector model={model} />
+      </div>
       <HeaderInfoArea model={model} />
       <Spacer />
       <HeaderStatusArea model={model} />

package/src/components/header/HeaderMenu.tsx

@@ -1,11 +1,18 @@
 import React, { lazy } from 'react'
 
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import AccountTreeIcon 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 GridOn from '@mui/icons-material/GridOn'
 import List from '@mui/icons-material/List'
-import Menu from '@mui/icons-material/Menu'
+import MoreVert from '@mui/icons-material/Menu'
+import PhotoCamera from '@mui/icons-material/PhotoCamera'
+import Search from '@mui/icons-material/Search'
 import Settings from '@mui/icons-material/Settings'
+import Sort from '@mui/icons-material/Sort'
+import Visibility from '@mui/icons-material/Visibility'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model'
@@ -14,8 +21,27 @@ import type { MsaViewModel } from '../../model'
 const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
 const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog'))
 const TracklistDialog = lazy(() => import('../dialogs/TracklistDialog'))
+const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog'))
+const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog'))
+const UserProvidedDomainsDialog = lazy(
+  () => import('../dialogs/UserProvidedDomainsDialog'),
+)
+const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
 
-const HeaderMenu = observer(function ({ model }: { model: MsaViewModel }) {
+const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
+  const {
+    drawTree,
+    showBranchLen,
+    labelsAlignRight,
+    drawNodeBubbles,
+    showDomains,
+    actuallyShowDomains,
+    subFeatureRows,
+    drawLabels,
+    treeWidthMatchesArea,
+    noDomains,
+    noTree,
+  } = model
   return (
     <CascadingMenuButton
       menuItems={[
@@ -27,29 +53,207 @@ const HeaderMenu = observer(function ({ model }: { model: MsaViewModel }) {
           },
         },
         {
+          icon: Settings,
           label: 'Settings',
+          type: 'subMenu',
+          subMenu: [
+            {
+              label: 'Tree settings',
+              type: 'subMenu',
+              icon: AccountTreeIcon,
+              subMenu: [
+                {
+                  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)
+                  },
+                },
+                ...(noTree
+                  ? []
+                  : [
+                      {
+                        label: 'Make tree width fit to tree area',
+                        type: 'checkbox' as const,
+                        checked: treeWidthMatchesArea,
+                        onClick: () => {
+                          model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
+                        },
+                      },
+                    ]),
+              ],
+            },
+            {
+              label: 'MSA settings',
+              type: 'subMenu',
+              icon: GridOn,
+              subMenu: [],
+            },
+            {
+              label: 'More',
+              icon: Settings,
+              type: 'subMenu',
+              subMenu: [
+                {
+                  label: 'More settings',
+                  onClick: () => {
+                    model.queueDialog(onClose => [
+                      SettingsDialog,
+                      {
+                        model,
+                        onClose,
+                      },
+                    ])
+                  },
+                },
+              ],
+            },
+          ],
+        },
+
+        {
+          label: 'Metadata',
+          icon: Assignment,
           onClick: () => {
-            model.queueDialog(onClose => [SettingsDialog, { model, onClose }])
+            model.queueDialog(onClose => [
+              MetadataDialog,
+              {
+                model,
+                onClose,
+              },
+            ])
           },
-          icon: Settings,
         },
         {
-          label: 'Metadata',
+          label: ' tracks',
+          icon: List,
           onClick: () => {
-            model.queueDialog(onClose => [MetadataDialog, { model, onClose }])
+            model.queueDialog(onClose => [
+              TracklistDialog,
+              {
+                model,
+                onClose,
+              },
+            ])
           },
-          icon: Assignment,
         },
+
         {
-          label: 'Extra tracks',
+          label: 'Export SVG',
+          icon: PhotoCamera,
           onClick: () => {
-            model.queueDialog(onClose => [TracklistDialog, { model, onClose }])
+            model.queueDialog(onClose => [
+              ExportSVGDialog,
+              {
+                onClose,
+                model,
+              },
+            ])
           },
-          icon: List,
         },
+        {
+          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(),
       ]}
     >
-      <Menu />
+      <MoreVert />
     </CascadingMenuButton>
   )
 })

package/src/components/header/MultiAlignmentSelector.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Select } from '@mui/material'
+import { MenuItem, TextField } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model'
@@ -12,8 +12,9 @@ const MultiAlignmentSelector = observer(function ({
 }) {
   const { currentAlignment, alignmentNames } = model
   return alignmentNames.length > 0 ? (
-    <Select
-      native
+    <TextField
+      select
+      variant="outlined"
       value={currentAlignment}
       size="small"
       onChange={event => {
@@ -23,11 +24,11 @@ const MultiAlignmentSelector = observer(function ({
       }}
     >
       {alignmentNames.map((option, index) => (
-        <option key={`${option}-${index}`} value={index}>
+        <MenuItem key={`${option}-${index}`} value={index}>
           {option}
-        </option>
+        </MenuItem>
       ))}
-    </Select>
+    </TextField>
   ) : null
 })
 export default MultiAlignmentSelector

package/src/components/header/SettingsMenu.tsx

@@ -0,0 +1,169 @@
+import React, { lazy } from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import AccountTreeIcon from '@mui/icons-material/AccountTree'
+import ColorLensIcon from '@mui/icons-material/ColorLens'
+import GridOn from '@mui/icons-material/GridOn'
+import Settings from '@mui/icons-material/Settings'
+import { observer } from 'mobx-react'
+
+import colorSchemes from '../../colorSchemes'
+
+
+import type { MsaViewModel } from '../../model'
+
+// lazies
+const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
+
+const SettingsMenu = observer(({ model }: { model: MsaViewModel }) => {
+  const {
+    drawTree,
+    showBranchLen,
+    labelsAlignRight,
+    drawNodeBubbles,
+    drawLabels,
+    treeWidthMatchesArea,
+    drawMsaLetters,
+    noTree,
+    bgColor,
+    hideGaps,
+    contrastLettering,
+    colorSchemeName,
+  } = model
+  return (
+    <CascadingMenuButton
+      menuItems={[
+        {
+          label: 'Tree settings',
+          type: 'subMenu',
+          icon: AccountTreeIcon,
+          subMenu: [
+            {
+              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)
+              },
+            },
+            ...(noTree
+              ? []
+              : [
+                  {
+                    label: 'Make tree width fit to tree area',
+                    type: 'checkbox' as const,
+                    checked: treeWidthMatchesArea,
+                    onClick: () => {
+                      model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
+                    },
+                  },
+                ]),
+          ],
+        },
+        {
+          label: 'MSA settings',
+          type: 'subMenu',
+          icon: GridOn,
+          subMenu: [
+            {
+              label: 'Draw letters',
+              type: 'checkbox',
+              checked: drawMsaLetters,
+              onClick: () => {
+                model.setDrawMsaLetters(!drawMsaLetters)
+              },
+            },
+            {
+              label: 'Color background tiles of MSA?',
+              type: 'checkbox',
+              checked: bgColor,
+              onClick: () => {
+                model.setBgColor(!bgColor)
+              },
+            },
+            {
+              label: 'Use contrast lettering',
+              type: 'checkbox',
+              checked: contrastLettering,
+              onClick: () => {
+                model.setContrastLettering(!contrastLettering)
+              },
+            },
+            {
+              label: 'Enable hiding gappy columns?',
+              type: 'checkbox',
+              checked: hideGaps,
+              onClick: () => {
+                model.setHideGaps(!hideGaps)
+              },
+            },
+          ],
+        },
+        {
+          label: 'Color scheme',
+          type: 'subMenu',
+          icon: ColorLensIcon,
+          subMenu: Object.keys(colorSchemes).map(
+            option =>
+              ({
+                label: option,
+                type: 'radio',
+                checked: colorSchemeName === option,
+                onClick: () => {
+                  model.setColorSchemeName(option)
+                },
+              }) as const,
+          ),
+        },
+        {
+          label: 'More settings',
+          onClick: () => {
+            model.queueDialog(onClose => [
+              SettingsDialog,
+              {
+                model,
+                onClose,
+              },
+            ])
+          },
+        },
+      ]}
+    >
+      <Settings />
+    </CascadingMenuButton>
+  )
+})
+
+export default SettingsMenu

package/src/components/header/ZoomControls.tsx

@@ -1,16 +1,11 @@
 import React from 'react'
 
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import MoreVert from '@mui/icons-material/MoreVert'
-import RestartAlt from '@mui/icons-material/RestartAlt'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { MsaViewModel } from '../../model'
-
-// icons
+import type { MsaViewModel } from '../../model'
 
 const ZoomControls = observer(function ZoomControls({
   model,
@@ -33,52 +28,6 @@ const ZoomControls = observer(function ZoomControls({
       >
         <ZoomOut />
       </IconButton>
-      <CascadingMenuButton
-        menuItems={[
-          {
-            label: 'Zoom in horizontal',
-            onClick: () => {
-              model.zoomInHorizontal()
-            },
-          },
-          {
-            label: 'Zoom in vertical',
-            onClick: () => {
-              model.zoomInVertical()
-            },
-          },
-          {
-            label: 'Zoom out horizontal',
-            onClick: () => {
-              model.zoomOutHorizontal()
-            },
-          },
-
-          {
-            label: 'Zoom out vertical',
-            onClick: () => {
-              model.zoomOutVertical()
-            },
-          },
-
-          {
-            label: 'Show entire view',
-            onClick: () => {
-              model.showEntire()
-            },
-          },
-          {
-            label: 'Reset zoom to default',
-            icon: RestartAlt,
-            onClick: () => {
-              model.setColWidth(16)
-              model.setRowHeight(20)
-            },
-          },
-        ]}
-      >
-        <MoreVert />
-      </CascadingMenuButton>
     </>
   )
 })

package/src/components/header/ZoomMenu.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import MoreVert from '@mui/icons-material/MoreVert'
+import RestartAlt from '@mui/icons-material/RestartAlt'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model'
+
+const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
+  return (
+    <CascadingMenuButton
+      menuItems={[
+        {
+          label: 'Fit to view',
+          onClick: () => {
+            model.showEntire()
+          },
+        },
+        {
+          label: 'Reset zoom to default',
+          icon: RestartAlt,
+          onClick: () => {
+            model.resetZoom()
+          },
+        },
+        {
+          label: 'Show extra zoom options',
+          checked: model.showZoomStar,
+          type: 'checkbox',
+          onClick: () => {
+            model.setShowZoomStar(!model.showZoomStar)
+          },
+        },
+      ]}
+    >
+      <MoreVert />
+    </CascadingMenuButton>
+  )
+})
+
+export default ZoomMenu