react-msaview 4.4.0 → 4.4.2

package/src/components/header/HeaderMenu.tsx

@@ -1,16 +1,13 @@
 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 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'
@@ -18,30 +15,18 @@ 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 SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
 const UserProvidedDomainsDialog = lazy(
   () => import('../dialogs/UserProvidedDomainsDialog'),
 )
 const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
 
 const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
-  const {
-    drawTree,
-    showBranchLen,
-    labelsAlignRight,
-    drawNodeBubbles,
-    showDomains,
-    actuallyShowDomains,
-    subFeatureRows,
-    drawLabels,
-    treeWidthMatchesArea,
-    noDomains,
-    noTree,
-  } = model
+  const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
   return (
     <CascadingMenuButton
       menuItems={[
@@ -52,98 +37,6 @@ const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
             model.reset()
           },
         },
-        {
-          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,
@@ -158,7 +51,19 @@ const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
           },
         },
         {
-          label: ' tracks',
+          label: 'More settings',
+          onClick: () => {
+            model.queueDialog(onClose => [
+              SettingsDialog,
+              {
+                model,
+                onClose,
+              },
+            ])
+          },
+        },
+        {
+          label: 'Extra tracks',
           icon: List,
           onClick: () => {
             model.queueDialog(onClose => [

package/src/components/header/SettingsMenu.tsx

@@ -1,9 +1,8 @@
-import React, { lazy } from 'react'
+import React 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 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'
 
@@ -11,32 +10,83 @@ import colorSchemes from '../../colorSchemes'
 
 import type { MsaViewModel } from '../../model'
 
-// lazies
-const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
-
-const SettingsMenu = observer(({ model }: { model: MsaViewModel }) => {
+const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
   const {
+    colorSchemeName,
+    drawMsaLetters,
+    contrastLettering,
+    hideGaps,
+    bgColor,
     drawTree,
     showBranchLen,
     labelsAlignRight,
     drawNodeBubbles,
     drawLabels,
     treeWidthMatchesArea,
-    drawMsaLetters,
     noTree,
-    bgColor,
-    hideGaps,
-    contrastLettering,
-    colorSchemeName,
   } = 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: AccountTreeIcon,
+          icon: AccountTree,
           subMenu: [
             {
               label: 'Show branch length',
@@ -92,73 +142,6 @@ const SettingsMenu = observer(({ model }: { model: MsaViewModel }) => {
                 ]),
           ],
         },
-        {
-          label: 'MSA settings',
-          type: 'subMenu',
-          icon: GridOn,
-          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: '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 />

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/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -56,7 +56,8 @@ function drawTiles({
     tidyFilteredGatheredInterProAnnotations,
   } = model
 
-  for (const node of visibleLeaves) {
+  for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
+    const node = visibleLeaves[i]!
     const {
       x,
       data: { name },
@@ -65,9 +66,9 @@ function drawTiles({
 
     const entry = tidyFilteredGatheredInterProAnnotations[name]
 
-    let j = 0
     if (entry) {
-      for (const { start, end, accession } of entry) {
+      for (let j = 0, l2 = entry.length; j < l2; j++) {
+        const { start, end, accession } = entry[j]!
         const m1 = model.seqCoordToRowSpecificGlobalCoord(name, start - 1)
         const m2 = model.seqCoordToRowSpecificGlobalCoord(name, end)
         const x = m1 * colWidth
@@ -78,7 +79,6 @@ function drawTiles({
         const lw = colWidth * (m2 - m1)
         ctx.fillRect(x, t, lw, h)
         ctx.strokeRect(x, t, lw, h)
-        j++
       }
     }
   }

package/src/components/msa/renderMSABlock.ts

@@ -34,6 +34,7 @@ export function renderMSABlock({
     highResScaleFactor,
     actuallyShowDomains,
     leaves,
+    bgColor,
   } = model
   const k = highResScaleFactorOverride || highResScaleFactor
   const bx = blockSizeXOverride || blockSize
@@ -42,7 +43,7 @@ export function renderMSABlock({
   ctx.scale(k, k)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
-  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+  ctx.font = ctx.font.replace(/\d+px/, `${bgColor ? '' : 'bold '}${fontSize}px`)
 
   const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
   const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
@@ -102,38 +103,40 @@ function drawTiles({
     rowHeight,
   } = model
 
-  for (const node of visibleLeaves) {
+  for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
+    const node = visibleLeaves[i]!
     const {
       data: { name },
     } = node
     const y = node.x!
     const str = columns[name]?.slice(xStart, xEnd)
     if (str) {
-      for (let i = 0; i < str.length; i++) {
+      for (let i = 0, l2 = str.length; i < l2; i++) {
         const letter = str[i]!
-        const color =
-          colorSchemeName === 'clustalx_protein_dynamic'
-            ? getClustalXColor(
-                // use model.colStats dot notation here: delay use of colStats
-                // until absolutely needed
+        const r1 = colorSchemeName === 'clustalx_protein_dynamic'
+        const r2 = colorSchemeName === 'percent_identity_dynamic'
+        const color = r1
+          ? getClustalXColor(
+              // use model.colStats dot notation here: delay use of colStats
+              // until absolutely needed
+              model.colStats[xStart + i]!,
+              model.colStatsSums[xStart + i]!,
+              model,
+              name,
+              xStart + i,
+            )
+          : r2
+            ? getPercentIdentityColor(
+                // use model.colStats dot notation here: delay use of
+                // colStats until absolutely needed
                 model.colStats[xStart + i]!,
                 model.colStatsSums[xStart + i]!,
                 model,
                 name,
                 xStart + i,
               )
-            : colorSchemeName === 'percent_identity_dynamic'
-              ? getPercentIdentityColor(
-                  // use model.colStats dot notation here: delay use of
-                  // colStats until absolutely needed
-                  model.colStats[xStart + i]!,
-                  model.colStatsSums[xStart + i]!,
-                  model,
-                  name,
-                  xStart + i,
-                )
-              : colorScheme[letter.toUpperCase()]
-        if (bgColor) {
+            : colorScheme[letter.toUpperCase()]
+        if (bgColor || r1 || r2) {
           ctx.fillStyle = color || theme.palette.background.default
           ctx.fillRect(
             i * colWidth + offsetX - (offsetX % colWidth),
@@ -176,14 +179,15 @@ function drawText({
     rowHeight,
   } = model
   if (showMsaLetters) {
-    for (const node of visibleLeaves) {
+    for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
+      const node = visibleLeaves[i]!
       const {
         data: { name },
       } = node
       const y = node.x!
       const str = columns[name]?.slice(xStart, xEnd)
       if (str) {
-        for (let i = 0; i < str.length; i++) {
+        for (let i = 0, l2 = str.length; i < l2; i++) {
           const letter = str[i]!
           const color = colorScheme[letter.toUpperCase()]
           const contrast = contrastLettering