Updates

Author: cmdcolin

lib/src/components/SequenceTextArea.tsx

@@ -24,10 +24,11 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const [showGaps, setShowGaps] = useState(false)
   const [showEmpty, setShowEmpty] = useState(false)
 
+  const removeGaps = (s: string) => s.replaceAll('-', '').replaceAll('.', '')
   const disp = str
-    .map(([s1, s2]) => [s1, showGaps ? s2 : s2.replaceAll('-', '')] as const)
+    .map(([s1, s2]) => [s1, showGaps ? s2 : removeGaps(s2)] as const)
     .filter(f => (showEmpty ? true : !!f[1]))
-    .map(([s1, s2]) => `>${s1}\n${showGaps ? s2 : s2.replaceAll('-', '')}`)
+    .map(([s1, s2]) => `>${s1}\n${showGaps ? s2 : removeGaps(s2)}`)
     .join('\n')
   return (
     <>

lib/src/components/header/GappynessSlider.tsx

@@ -25,7 +25,7 @@ const GappynessSlider = observer(function GappynessSlider({
         max={100}
         value={allowedGappyness}
         onChange={(_, val) => {
-          model.setAllowedGappyness(val as number)
+          model.setAllowedGappyness(val)
         }}
       />
     </div>

lib/src/components/header/HeaderMenu.tsx

@@ -1,14 +1,14 @@
 import React, { lazy } 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 AccountTree from '@mui/icons-material/AccountTree'
 import Visibility from '@mui/icons-material/Visibility'
 import { observer } from 'mobx-react'
 

lib/src/components/msa/MSACanvasBlock.tsx

@@ -136,8 +136,13 @@ const MSACanvasBlock = observer(function ({
         }}
       />
       {hoveredInsertion && mousePosition ? (
-        <BaseTooltip clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}>
-          Insertion ({hoveredInsertion.letters.length}bp): {hoveredInsertion.letters}
+        <BaseTooltip
+          clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
+        >
+          Insertion ({hoveredInsertion.letters.length}bp):{' '}
+          {hoveredInsertion.letters.length > 20
+            ? `${hoveredInsertion.letters.slice(0, 20)}...`
+            : hoveredInsertion.letters}
         </BaseTooltip>
       ) : null}
     </>

lib/src/components/msa/renderMSABlock.ts

@@ -75,7 +75,6 @@ export function renderMSABlock({
   drawInsertionIndicators({
     model,
     ctx,
-    offsetX,
     xStart,
     xEnd,
     visibleLeaves,
@@ -247,13 +246,11 @@ function drawText({
 function drawInsertionIndicators({
   model,
   ctx,
-  offsetX,
   visibleLeaves,
   xStart,
   xEnd,
 }: {
   model: MsaViewModel
-  offsetX: number
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
@@ -273,7 +270,7 @@ function drawInsertionIndicators({
       const y = node.x!
       for (const { pos } of insertions) {
         if (pos >= xStart && pos < xEnd) {
-          const x = pos * colWidth + offsetX - (offsetX % colWidth)
+          const x = pos * colWidth
           const top = y - rowHeight
           const bottom = y
           ctx.beginPath()

lib/src/model.ts

@@ -49,11 +49,11 @@ import {
 import { flatToTree } from './flatToTree'
 import palettes from './ggplotPalettes'
 import { measureTextCanvas } from './measureTextCanvas'
-import { calculateNeighborJoiningTree } from './neighborJoining'
 import { DataModelF } from './model/DataModel'
 import { DialogQueueSessionMixin } from './model/DialogQueue'
 import { MSAModelF } from './model/msaModel'
 import { TreeModelF } from './model/treeModel'
+import { calculateNeighborJoiningTree } from './neighborJoining'
 import { parseAsn1 } from './parseAsn1'
 import parseNewick from './parseNewick'
 import A3mMSA from './parsers/A3mMSA'
@@ -847,8 +847,10 @@ function stateModelFactory() {
        * Returns a map of row name to array of insertions with display position and letters
        */
       get insertionPositions() {
+        const { hideGapsEffective } = self
         const { blanks, rows } = this
-        if (blanks.length === 0) {
+        const blanksLen = blanks.length
+        if (blanksLen === 0 || !hideGapsEffective) {
           return new Map<string, { pos: number; letters: string }[]>()
         }
         const result = new Map<string, { pos: number; letters: string }[]>()
@@ -857,28 +859,36 @@ function stateModelFactory() {
           let displayPos = 0
           let blankIdx = 0
           let currentInsertPos = -1
-          let currentLetters = ''
-          for (let i = 0; i < seq.length; i++) {
-            if (blankIdx < blanks.length && blanks[blankIdx] === i) {
-              const char = seq[i]!
-              if (char !== '-' && char !== '.') {
+          let letterChars: string[] = []
+          const seqLen = seq.length
+          for (let i = 0; i < seqLen; i++) {
+            if (blankIdx < blanksLen && blanks[blankIdx] === i) {
+              // bit trick: (code - 45) >>> 0 <= 1 checks for '-' (45) or '.' (46)
+              const code = seq.charCodeAt(i)
+              if (!((code - 45) >>> 0 <= 1)) {
                 if (currentInsertPos === displayPos) {
-                  currentLetters += char
+                  letterChars.push(seq[i]!)
                 } else {
-                  if (currentLetters) {
-                    insertions.push({ pos: currentInsertPos, letters: currentLetters })
+                  if (letterChars.length > 0) {
+                    insertions.push({
+                      pos: currentInsertPos,
+                      letters: letterChars.join(''),
+                    })
                   }
                   currentInsertPos = displayPos
-                  currentLetters = char
+                  letterChars = [seq[i]!]
                 }
               }
               blankIdx++
             } else {
               displayPos++
             }
           }
-          if (currentLetters) {
-            insertions.push({ pos: currentInsertPos, letters: currentLetters })
+          if (letterChars.length > 0) {
+            insertions.push({
+              pos: currentInsertPos,
+              letters: letterChars.join(''),
+            })
           }
           if (insertions.length > 0) {
             result.set(name, insertions)