react-msaview 4.3.0 → 4.4.1

package/src/rowCoordinateCalculations.ts

@@ -1,26 +1,103 @@
-export function mouseOverCoordToGlobalCoord(blanks: number[], pos: number) {
-  let i = 0 // 'mouse over coord'
-  let j = 0 // 'position in blanks array'
-  let k = 0 // 'global coord'/return value
-
-  for (; i < pos; i++, k++) {
-    // skip multiple gaps in a row
-    while (j < blanks.length && blanks[j]! - 1 === k) {
-      j++
-      k++
+import { isBlank } from './util'
+
+export function mouseOverCoordToGlobalCoord(
+  blanks: number[],
+  position: number,
+) {
+  let mousePosition = 0 // Current position in mouse coordinates
+  let blankArrayIndex = 0 // Current index in the blanks array
+  let globalPosition = 0 // Position in global coordinates (return value)
+  const blanksLen = blanks.length
+
+  // Iterate until we reach the target mouse position
+  while (mousePosition < position) {
+    // Skip any blank positions in the sequence
+    while (
+      blankArrayIndex < blanksLen &&
+      blanks[blankArrayIndex]! - 1 === globalPosition
+    ) {
+      blankArrayIndex++
+      globalPosition++
     }
+
+    // Move to next position
+    mousePosition++
+    globalPosition++
   }
-  return k
+
+  return globalPosition
 }
 
-export function globalCoordToRowSpecificCoord(seq: string, pos: number) {
-  let k = 0
-  for (let i = 0; i < pos; i++) {
-    if (seq[i] !== '-') {
-      k++
-    } else if (k >= pos) {
+export function globalCoordToRowSpecificCoord(seq: string, position: number) {
+  // Initialize counter for non-gap characters
+  let nonGapCount = 0
+  // Initialize position counter
+  let currentPosition = 0
+  const sequenceLength = seq.length
+
+  // Iterate until we reach the target position or end of sequence
+  while (currentPosition < position && currentPosition < sequenceLength) {
+    // If current character is not a gap, increment the non-gap counter
+    if (seq[currentPosition] !== '-') {
+      nonGapCount++
+    }
+    // If we've reached the target position in non-gap coordinates, break
+    else if (nonGapCount >= position) {
       break
     }
+    currentPosition++
   }
-  return k
+
+  return nonGapCount
+}
+
+export function mouseOverCoordToGapRemovedRowCoord({
+  rowName,
+  position,
+  rowMap,
+  blanks,
+}: {
+  rowName: string
+  position: number
+  rowMap: Map<string, string>
+  blanks: number[]
+}) {
+  const seq = rowMap.get(rowName)
+  return seq !== undefined
+    ? mouseOverCoordToGapRemovedCoord({
+        seq,
+        position,
+        blanks,
+      })
+    : undefined
+}
+
+export function mouseOverCoordToGapRemovedCoord({
+  seq,
+  blanks,
+  position,
+}: {
+  seq: string
+  blanks: number[]
+  position: number
+}) {
+  // First convert the mouse position to global coordinates
+  const globalPos = mouseOverCoordToGlobalCoord(blanks, position)
+  const seqLen = seq.length
+
+  // Check if the position in the sequence is a gap
+  if (globalPos < seqLen && isBlank(seq[globalPos])) {
+    return undefined
+  }
+
+  // Count non-gap characters up to the global position
+  let nonGapCount = 0
+  for (let i = 0; i < globalPos && i < seqLen; i++) {
+    if (!isBlank(seq[i])) {
+      nonGapCount++
+    }
+  }
+
+  // If we're at a valid position, return the count of non-gap characters
+  return globalPos < seqLen ? nonGapCount : undefined
 }

package/src/seqCoordToRowSpecificGlobalCoord.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, test } from 'vitest'
+
+import { seqCoordToRowSpecificGlobalCoord } from './seqCoordToRowSpecificGlobalCoord'
+
+describe('seqCoordToRowSpecificGlobalCoord', () => {
+  test('converts sequence coordinate to global coordinate with no gaps', () => {
+    const row = 'ATGCATGC'
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(3)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 8 })).toBe(8)
+  })
+
+  test('converts sequence coordinate to global coordinate with gaps', () => {
+    const row = 'A-TG-CA-TGC'
+    // A(0) -(1) T(2) G(3) -(4) C(5) A(6) -(7) T(8) G(9) C(10)
+    // Sequence positions: A(0) T(1) G(2) C(3) A(4) T(5) G(6) C(7)
+
+    // Position 0 (first A) -> Global index 0
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
+
+    // Position 1 (T after first gap) -> Global index 2
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 1 })).toBe(1)
+
+    // Position 3 (C after second gap) -> Global index 5
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(4)
+
+    // Position 5 (T after third gap) -> Global index 8
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 5 })).toBe(7)
+
+    // Position 8 (end of sequence) -> Global index 11
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 8 })).toBe(11)
+  })
+
+  test('handles empty row', () => {
+    expect(seqCoordToRowSpecificGlobalCoord({ row: '', position: 0 })).toBe(0)
+  })
+
+  test('handles row with only gaps', () => {
+    const row = '---..--'
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
+  })
+
+  test('handles mixed gap characters', () => {
+    const row = 'A-.G-C.'
+    // A(0) -(1) .(2) G(3) -(4) C(5) .(6)
+    // Sequence positions: A(0) G(1) C(2)
+
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 0 })).toBe(0)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 1 })).toBe(1)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 2 })).toBe(4)
+    expect(seqCoordToRowSpecificGlobalCoord({ row, position: 3 })).toBe(6)
+  })
+})

package/src/seqCoordToRowSpecificGlobalCoord.ts

@@ -0,0 +1,20 @@
+import { isBlank } from './util'
+
+export function seqCoordToRowSpecificGlobalCoord({
+  row,
+  position,
+}: {
+  row: string
+  position: number
+}) {
+  let k = 0
+  let i = 0
+  for (; k < position; i++) {
+    if (!isBlank(row[i])) {
+      k++
+    } else if (k >= position) {
+      break
+    }
+  }
+  return i
+}

package/src/util.ts

@@ -46,7 +46,7 @@ export function colorContrast(
 export function skipBlanks(blanks: number[], arg: string | string[]) {
   let s = ''
   let b = 0
-  for (let j = 0; j < arg.length; j++) {
+  for (let j = 0, l = arg.length; j < l; j++) {
     if (j === blanks[b]) {
       b++
     } else {
@@ -90,35 +90,12 @@ export function collapse(d: HierarchyNode<NodeWithIds>) {
   }
 }
 
-export function clamp(min: number, num: number, max: number) {
-  return Math.min(Math.max(num, min), max)
-}
-
 export function len(a: { end: number; start: number }) {
   return a.end - a.start
 }
 
-export function localStorageGetItem(item: string) {
-  return typeof localStorage !== 'undefined'
-    ? localStorage.getItem(item)
-    : undefined
-}
-
-export function localStorageGetBoolean(key: string, defaultVal: boolean) {
-  return Boolean(
-    JSON.parse(localStorageGetItem(key) || JSON.stringify(defaultVal)),
-  )
-}
-
-export function localStorageSetItem(str: string, item: string) {
-  if (typeof localStorage !== 'undefined') {
-    localStorage.setItem(str, item)
-  }
-}
-export function localStorageSetBoolean(key: string, value: boolean) {
-  localStorageSetItem(key, JSON.stringify(value))
-}
-
-export function isGzip(buf: Uint8Array) {
-  return buf[0] === 31 && buf[1] === 139 && buf[2] === 8
+// https://sonnhammer.sbc.su.se/Stockholm.html
+// gaps can be a . or - in stockholm
+export function isBlank(s?: string) {
+  return s === '-' || s === '.'
 }

package/src/version.ts

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

package/dist/components/header/SettingsMenu.js

@@ -1,141 +0,0 @@
-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';
-// lazies
-const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'));
-const SettingsMenu = observer(({ model }) => {
-    const { drawTree, showBranchLen, labelsAlignRight, drawNodeBubbles, drawLabels, treeWidthMatchesArea, drawMsaLetters, noTree, bgColor, hideGaps, contrastLettering, colorSchemeName, } = model;
-    return (React.createElement(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',
-                                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);
-                    },
-                })),
-            },
-            {
-                label: 'More settings',
-                onClick: () => {
-                    model.queueDialog(onClose => [
-                        SettingsDialog,
-                        {
-                            model,
-                            onClose,
-                        },
-                    ]);
-                },
-            },
-        ] },
-        React.createElement(Settings, null)));
-});
-export default SettingsMenu;
-//# sourceMappingURL=SettingsMenu.js.map

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

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

package/src/components/header/SettingsMenu.tsx

@@ -1,169 +0,0 @@
-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