react-msaview 4.4.1 → 4.4.2

package/src/components/header/SettingsMenu.tsx

@@ -0,0 +1,152 @@
+import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import Palette from '@mui/icons-material/Palette'
+import AccountTree from '@mui/icons-material/AccountTree'
+import Settings from '@mui/icons-material/Settings'
+import { observer } from 'mobx-react'
+
+import colorSchemes from '../../colorSchemes'
+
+import type { MsaViewModel } from '../../model'
+
+const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
+  const {
+    colorSchemeName,
+    drawMsaLetters,
+    contrastLettering,
+    hideGaps,
+    bgColor,
+    drawTree,
+    showBranchLen,
+    labelsAlignRight,
+    drawNodeBubbles,
+    drawLabels,
+    treeWidthMatchesArea,
+    noTree,
+  } = model
+  return (
+    <CascadingMenuButton
+      closeAfterItemClick={false}
+      menuItems={[
+        {
+          label: 'Color scheme',
+          icon: Palette,
+          type: 'subMenu',
+          subMenu: Object.keys(colorSchemes).map(
+            option =>
+              ({
+                label: option,
+                type: 'radio',
+                checked: colorSchemeName === option,
+                onClick: () => {
+                  model.setColorSchemeName(option)
+                },
+              }) as const,
+          ),
+        },
+        {
+          label: 'MSA settings',
+          type: 'subMenu',
+          subMenu: [
+            {
+              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: '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: 'Tree settings',
+          type: 'subMenu',
+          icon: AccountTree,
+          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)
+                    },
+                  },
+                ]),
+          ],
+        },
+      ]}
+    >
+      <Settings />
+    </CascadingMenuButton>
+  )
+})
+
+export default SettingsMenu

package/src/components/header/ZoomMenu.tsx

@@ -12,11 +12,24 @@ const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
     <CascadingMenuButton
       menuItems={[
         {
-          label: 'Fit to view',
+          label: 'Fit both vertically/horizontally',
           onClick: () => {
-            model.showEntire()
+            model.fit()
           },
         },
+        {
+          label: 'Fit vertically',
+          onClick: () => {
+            model.fitVertically()
+          },
+        },
+        {
+          label: 'Fit horizontally',
+          onClick: () => {
+            model.fitHorizontally()
+          },
+        },
+
         {
           label: 'Reset zoom to default',
           icon: RestartAlt,

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react'
 
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
+import { isAlive } from 'mobx-state-tree'
 
 import { renderMouseover } from './renderMSAMouseover'
 
@@ -18,7 +19,9 @@ const MSAMouseoverCanvas = observer(function ({
     const ctx = ref.current?.getContext('2d')
     return ctx
       ? autorun(() => {
-          renderMouseover({ ctx, model })
+          if (isAlive(model)) {
+            renderMouseover({ ctx, model })
+          }
         })
       : undefined
   }, [model])

package/src/model.ts

@@ -811,11 +811,7 @@ function stateModelFactory() {
        * #getter
        */
       get colStatsSums() {
-        return Object.fromEntries(
-          Object.entries(this.colStats).map(([key, val]) => {
-            return [key, sum(Object.values(val))]
-          }),
-        )
+        return this.colStats.map(val => sum(Object.values(val)))
       },
       /**
        * #getter
@@ -1377,12 +1373,26 @@ function stateModelFactory() {
       /**
        * #action
        */
-      showEntire() {
+      fit() {
         self.rowHeight = self.msaAreaHeight / self.numRows
         self.colWidth = self.msaAreaWidth / self.numColumns
         self.scrollX = 0
         self.scrollY = 0
       },
+      /**
+       * #action
+       */
+      fitVertically() {
+        self.rowHeight = self.msaAreaHeight / self.numRows
+        self.scrollY = 0
+      },
+      /**
+       * #action
+       */
+      fitHorizontally() {
+        self.colWidth = self.msaAreaWidth / self.numColumns
+        self.scrollX = 0
+      },
 
       afterCreate() {
         addDisposer(

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.4.1'
+export const version = '4.4.2'

package/dist/components/header/ColorMenu.js

@@ -1,19 +0,0 @@
-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';
-const ColorMenu = observer(({ model }) => {
-    const { colorSchemeName } = model;
-    return (React.createElement(CascadingMenuButton, { closeAfterItemClick: false, menuItems: Object.keys(colorSchemes).map(option => ({
-            label: option,
-            type: 'radio',
-            checked: colorSchemeName === option,
-            onClick: () => {
-                model.setColorSchemeName(option);
-            },
-        })) },
-        React.createElement(Palette, null)));
-});
-export default ColorMenu;
-//# sourceMappingURL=ColorMenu.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorMenu.js","sourceRoot":"","sources":["../../../src/components/header/ColorMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,OAAO,MAAM,6BAA6B,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,YAAY,MAAM,oBAAoB,CAAA;AAI7C,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAChE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAA;IACjC,OAAO,CACL,oBAAC,mBAAmB,IAClB,mBAAmB,EAAE,KAAK,EAC1B,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CACtC,MAAM,CAAC,EAAE,CACP,CAAC;YACC,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,eAAe,KAAK,MAAM;YACnC,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAA;YAClC,CAAC;SACF,CAAU,CACd;QAED,oBAAC,OAAO,OAAG,CACS,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/header/MSAMenu.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../../model';
-declare const MSAMenu: ({ model }: {
-    model: MsaViewModel;
-}) => React.JSX.Element;
-export default MSAMenu;

package/dist/components/header/MSAMenu.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { observer } from 'mobx-react';
-import { GridOn } from '@mui/icons-material';
-const MSAMenu = observer(function ({ model }) {
-    const { drawMsaLetters, contrastLettering, hideGaps, bgColor } = model;
-    return (React.createElement(CascadingMenuButton, { closeAfterItemClick: false, 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: 'Use contrast lettering',
-                type: 'checkbox',
-                checked: contrastLettering,
-                onClick: () => {
-                    model.setContrastLettering(!contrastLettering);
-                },
-            },
-            {
-                label: 'Enable hiding gappy columns?',
-                type: 'checkbox',
-                checked: hideGaps,
-                onClick: () => {
-                    model.setHideGaps(!hideGaps);
-                },
-            },
-        ] },
-        React.createElement(GridOn, null)));
-});
-export default MSAMenu;
-//# sourceMappingURL=MSAMenu.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MSAMenu.js","sourceRoot":"","sources":["../../../src/components/header/MSAMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAI5C,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACnE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IACtE,OAAO,CACL,oBAAC,mBAAmB,IAClB,mBAAmB,EAAE,KAAK,EAC1B,SAAS,EAAE;YACT;gBACE,KAAK,EAAE,cAAc;gBACrB,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,cAAc;gBACvB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAA;gBAC1C,CAAC;aACF;YACD;gBACE,KAAK,EAAE,8CAA8C;gBACrD,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,CAAC,OAAO;gBACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAA;gBAC5B,CAAC;aACF;YACD;gBACE,KAAK,EAAE,wBAAwB;gBAC/B,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,CAAA;gBAChD,CAAC;aACF;YACD;gBACE,KAAK,EAAE,8BAA8B;gBACrC,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,QAAQ;gBACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAA;gBAC9B,CAAC;aACF;SACF;QAED,oBAAC,MAAM,OAAG,CACU,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/components/header/TreeMenu.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../../model';
-declare const TreeMenu: ({ model }: {
-    model: MsaViewModel;
-}) => React.JSX.Element;
-export default TreeMenu;

package/dist/components/header/TreeMenu.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import AccountTree from '@mui/icons-material/AccountTree';
-import { observer } from 'mobx-react';
-const TreeMenu = observer(({ model }) => {
-    const { drawTree, showBranchLen, labelsAlignRight, drawNodeBubbles, drawLabels, treeWidthMatchesArea, noTree, } = model;
-    return (React.createElement(CascadingMenuButton, { closeAfterItemClick: false, 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);
-                },
-            },
-            ...(noTree
-                ? []
-                : [
-                    {
-                        label: 'Make tree width fit to tree area',
-                        type: 'checkbox',
-                        checked: treeWidthMatchesArea,
-                        onClick: () => {
-                            model.setTreeWidthMatchesArea(!treeWidthMatchesArea);
-                        },
-                    },
-                ]),
-        ] },
-        React.createElement(AccountTree, null)));
-});
-export default TreeMenu;
-//# sourceMappingURL=TreeMenu.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TreeMenu.js","sourceRoot":"","sources":["../../../src/components/header/TreeMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,WAAW,MAAM,iCAAiC,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAC/D,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,oBAAoB,EACpB,MAAM,GACP,GAAG,KAAK,CAAA;IACT,OAAO,CACL,oBAAC,mBAAmB,IAClB,mBAAmB,EAAE,KAAK,EAC1B,SAAS,EAAE;YACT;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,aAAa;gBACtB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAA;gBACxC,CAAC;aACF;YACD;gBACE,KAAK,EAAE,WAAW;gBAClB,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,QAAQ;gBACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAA;gBAC9B,CAAC;aACF;YACD;gBACE,KAAK,EAAE,yCAAyC;gBAChD,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,eAAe;gBACxB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAA;gBAC5C,CAAC;aACF;YACD;gBACE,KAAK,EAAE,yBAAyB;gBAChC,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,gBAAgB;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAA;gBAC9C,CAAC;aACF;YACD;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,UAAU;gBACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;gBAClC,CAAC;aACF;YACD,GAAG,CAAC,MAAM;gBACR,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC;oBACE;wBACE,KAAK,EAAE,kCAAkC;wBACzC,IAAI,EAAE,UAAmB;wBACzB,OAAO,EAAE,oBAAoB;wBAC7B,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,uBAAuB,CAAC,CAAC,oBAAoB,CAAC,CAAA;wBACtD,CAAC;qBACF;iBACF,CAAC;SACP;QAED,oBAAC,WAAW,OAAG,CACK,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/src/components/header/ColorMenu.tsx

@@ -1,33 +0,0 @@
-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'
-
-import type { MsaViewModel } from '../../model'
-
-const ColorMenu = observer(({ model }: { model: MsaViewModel }) => {
-  const { colorSchemeName } = model
-  return (
-    <CascadingMenuButton
-      closeAfterItemClick={false}
-      menuItems={Object.keys(colorSchemes).map(
-        option =>
-          ({
-            label: option,
-            type: 'radio',
-            checked: colorSchemeName === option,
-            onClick: () => {
-              model.setColorSchemeName(option)
-            },
-          }) as const,
-      )}
-    >
-      <Palette />
-    </CascadingMenuButton>
-  )
-})
-
-export default ColorMenu

package/src/components/header/MSAMenu.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import { observer } from 'mobx-react'
-
-import { GridOn } from '@mui/icons-material'
-
-import type { MsaViewModel } from '../../model'
-
-const MSAMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  const { drawMsaLetters, contrastLettering, hideGaps, bgColor } = model
-  return (
-    <CascadingMenuButton
-      closeAfterItemClick={false}
-      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: 'Use contrast lettering',
-          type: 'checkbox',
-          checked: contrastLettering,
-          onClick: () => {
-            model.setContrastLettering(!contrastLettering)
-          },
-        },
-        {
-          label: 'Enable hiding gappy columns?',
-          type: 'checkbox',
-          checked: hideGaps,
-          onClick: () => {
-            model.setHideGaps(!hideGaps)
-          },
-        },
-      ]}
-    >
-      <GridOn />
-    </CascadingMenuButton>
-  )
-})
-
-export default MSAMenu

package/src/components/header/TreeMenu.tsx

@@ -1,82 +0,0 @@
-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'
-
-const TreeMenu = observer(({ model }: { model: MsaViewModel }) => {
-  const {
-    drawTree,
-    showBranchLen,
-    labelsAlignRight,
-    drawNodeBubbles,
-    drawLabels,
-    treeWidthMatchesArea,
-    noTree,
-  } = model
-  return (
-    <CascadingMenuButton
-      closeAfterItemClick={false}
-      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)
-          },
-        },
-        ...(noTree
-          ? []
-          : [
-              {
-                label: 'Make tree width fit to tree area',
-                type: 'checkbox' as const,
-                checked: treeWidthMatchesArea,
-                onClick: () => {
-                  model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
-                },
-              },
-            ]),
-      ]}
-    >
-      <AccountTree />
-    </CascadingMenuButton>
-  )
-})
-
-export default TreeMenu