react-msaview 4.2.0 → 4.3.0

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/ZoomStar.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
+import RestartAlt from '@mui/icons-material/RestartAlt'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import { RestartAlt } from '@mui/icons-material'
-
 import type { MsaViewModel } from '../../model'
 
 const useStyles = makeStyles()(theme => ({

package/src/model.ts

@@ -86,6 +86,10 @@ function stateModelFactory() {
          * #property
          */
         showDomains: false,
+        /**
+         * #property
+         */
+        hideGaps: true,
         /**
          * #property
          */
@@ -110,15 +114,6 @@ function stateModelFactory() {
          * #property
          */
         drawMsaLetters: true,
-        /**
-         * #property
-         */
-        hideGaps: false,
-
-        /**
-         * #property
-         */
-        drawTreeText: true,
 
         /**
          * #property
@@ -240,7 +235,7 @@ function stateModelFactory() {
        * #volatile
        * obtained from localStorage
        */
-      showZoomStar: localStorageGetBoolean(showZoomStarKey, true),
+      showZoomStar: localStorageGetBoolean(showZoomStarKey, false),
       /**
        * #volatile
        */
@@ -632,26 +627,24 @@ function stateModelFactory() {
        */
       get tree(): NodeWithIds {
         const text = self.data.tree
-        if (text) {
-          return reparseTree(
-            generateNodeIds(
-              text.startsWith('BioTreeContainer')
-                ? flatToTree(parseAsn1(text))
-                : parseNewick(
-                    text.startsWith('SEQ') ? parseEmfTree(text).tree : text,
-                  ),
-            ),
-          )
-        } else {
-          return reparseTree(
-            this.MSA?.getTree() || {
-              noTree: true,
-              children: [],
-              id: 'empty',
-              name: 'empty',
-            },
-          )
-        }
+        return text
+          ? reparseTree(
+              generateNodeIds(
+                text.startsWith('BioTreeContainer')
+                  ? flatToTree(parseAsn1(text))
+                  : parseNewick(
+                      text.startsWith('SEQ') ? parseEmfTree(text).tree : text,
+                    ),
+              ),
+            )
+          : reparseTree(
+              this.MSA?.getTree() || {
+                noTree: true,
+                children: [],
+                id: 'empty',
+                name: 'empty',
+              },
+            )
       },
 
       /**

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.2.0'
+export const version = '4.3.0'

package/src/webpack.ts

@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export { default as MSAView } from './components/Loading'
+export { type MsaViewModel, default as MSAModelF } from './model'
+
+export * from 'react-dom/client'
+
+// eslint-disable-next-line unicorn/prefer-export-from
+export { React }

package/dist/components/header/HeaderMenuExtra.js

@@ -1,128 +0,0 @@
-import React, { lazy } from 'react';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import Assignment from '@mui/icons-material/Assignment';
-import FilterAlt from '@mui/icons-material/FilterAlt';
-import FolderOpen from '@mui/icons-material/FolderOpen';
-import List from '@mui/icons-material/List';
-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';
-// lazies
-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 HeaderMenuExtra = observer(({ model }) => {
-    const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model;
-    return (React.createElement(CascadingMenuButton, { menuItems: [
-            {
-                label: 'Return to import form',
-                icon: FolderOpen,
-                onClick: () => {
-                    model.reset();
-                },
-            },
-            {
-                label: 'Settings',
-                onClick: () => {
-                    model.queueDialog(onClose => [SettingsDialog, { model, onClose }]);
-                },
-                icon: Settings,
-            },
-            {
-                label: 'Metadata',
-                onClick: () => {
-                    model.queueDialog(onClose => [MetadataDialog, { model, onClose }]);
-                },
-                icon: Assignment,
-            },
-            {
-                label: 'Extra tracks',
-                onClick: () => {
-                    model.queueDialog(onClose => [TracklistDialog, { model, onClose }]);
-                },
-                icon: List,
-            },
-            {
-                label: 'Export SVG',
-                icon: PhotoCamera,
-                onClick: () => {
-                    model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }]);
-                },
-            },
-            {
-                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(),
-        ] },
-        React.createElement(MoreVert, null)));
-});
-export default HeaderMenuExtra;
-//# sourceMappingURL=HeaderMenuExtra.js.map

package/dist/components/header/HeaderMenuExtra.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderMenuExtra.js","sourceRoot":"","sources":["../../../src/components/header/HeaderMenuExtra.tsx"],"names":[],"mappings":"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"}

package/src/components/header/HeaderMenuExtra.tsx

@@ -1,141 +0,0 @@
-import React, { lazy } from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import Assignment from '@mui/icons-material/Assignment'
-import FilterAlt from '@mui/icons-material/FilterAlt'
-import FolderOpen from '@mui/icons-material/FolderOpen'
-import List from '@mui/icons-material/List'
-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'
-
-// lazies
-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 HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
-  const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
-  return (
-    <CascadingMenuButton
-      menuItems={[
-        {
-          label: 'Return to import form',
-          icon: FolderOpen,
-          onClick: () => {
-            model.reset()
-          },
-        },
-        {
-          label: 'Settings',
-          onClick: () => {
-            model.queueDialog(onClose => [SettingsDialog, { model, onClose }])
-          },
-          icon: Settings,
-        },
-        {
-          label: 'Metadata',
-          onClick: () => {
-            model.queueDialog(onClose => [MetadataDialog, { model, onClose }])
-          },
-          icon: Assignment,
-        },
-        {
-          label: 'Extra tracks',
-          onClick: () => {
-            model.queueDialog(onClose => [TracklistDialog, { model, onClose }])
-          },
-          icon: List,
-        },
-
-        {
-          label: 'Export SVG',
-          icon: PhotoCamera,
-          onClick: () => {
-            model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }])
-          },
-        },
-        {
-          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(),
-      ]}
-    >
-      <MoreVert />
-    </CascadingMenuButton>
-  )
-})
-
-export default HeaderMenuExtra