react-msaview 4.8.1 → 5.0.3

package/src/components/dialogs/TrackInfoDialog.tsx

@@ -2,10 +2,11 @@ import React, { useState } from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
 import { Button, DialogActions, DialogContent } from '@mui/material'
-import copy from 'copy-to-clipboard'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import copy from '../../vendor/copyToClipboard.ts'
+
 const useStyles = makeStyles()(theme => ({
   textArea: {
     padding: theme.spacing(2),

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -15,10 +15,10 @@ import {
 } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { jsonfetch } from '../../fetchUtils'
+import { jsonfetch } from '../../fetchUtils.ts'
 
-import type { InterProScanResponse } from '../../launchInterProScan'
-import type { MsaViewModel } from '../../model'
+import type { InterProScanResponse } from '../../launchInterProScan.ts'
+import type { MsaViewModel } from '../../model.ts'
 
 const UserProvidedDomainsDialog = observer(function ({
   handleClose,

package/src/components/header/GappynessSlider.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Slider, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const GappynessSlider = observer(function GappynessSlider({
   model,

package/src/components/header/Header.tsx

@@ -5,19 +5,19 @@ import Help from '@mui/icons-material/Help'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import GappynessSlider from './GappynessSlider'
-import HeaderInfoArea from './HeaderInfoArea'
-import HeaderMenu from './HeaderMenu'
-import HeaderStatusArea from './HeaderStatusArea'
-import MultiAlignmentSelector from './MultiAlignmentSelector'
-import SettingsMenu from './SettingsMenu'
-import ZoomControls from './ZoomControls'
-import ZoomMenu from './ZoomMenu'
-import ZoomStar from './ZoomStar'
+import GappynessSlider from './GappynessSlider.tsx'
+import HeaderInfoArea from './HeaderInfoArea.tsx'
+import HeaderMenu from './HeaderMenu.tsx'
+import HeaderStatusArea from './HeaderStatusArea.tsx'
+import MultiAlignmentSelector from './MultiAlignmentSelector.tsx'
+import SettingsMenu from './SettingsMenu.tsx'
+import ZoomControls from './ZoomControls.tsx'
+import ZoomMenu from './ZoomMenu.tsx'
+import ZoomStar from './ZoomStar.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
-const AboutDialog = lazy(() => import('../dialogs/AboutDialog'))
+const AboutDialog = lazy(() => import('../dialogs/AboutDialog.tsx'))
 
 const Header = observer(function ({ model }: { model: MsaViewModel }) {
   const [ref, { height }] = useMeasure()

package/src/components/header/HeaderInfoArea.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()({
   margin: {

package/src/components/header/HeaderMenu.tsx

@@ -12,17 +12,19 @@ import Sort from '@mui/icons-material/Sort'
 import Visibility from '@mui/icons-material/Visibility'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 // lazies
-const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog'))
-const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog'))
-const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog'))
-const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
+const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog.tsx'))
+const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog.tsx'))
+const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
+const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog.tsx'))
 const UserProvidedDomainsDialog = lazy(
-  () => import('../dialogs/UserProvidedDomainsDialog'),
+  () => import('../dialogs/UserProvidedDomainsDialog.tsx'),
+)
+const InterProScanDialog = lazy(
+  () => import('../dialogs/InterProScanDialog.tsx'),
 )
-const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
 
 const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
   const {

package/src/components/header/HeaderStatusArea.tsx

@@ -5,7 +5,7 @@ import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()({
   margin: {

package/src/components/header/MultiAlignmentSelector.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { MenuItem, TextField } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MultiAlignmentSelector = observer(function ({
   model,

package/src/components/header/SettingsMenu.tsx

@@ -6,9 +6,9 @@ import Palette from '@mui/icons-material/Palette'
 import Settings from '@mui/icons-material/Settings'
 import { observer } from 'mobx-react'
 
-import colorSchemes from '../../colorSchemes'
+import colorSchemes from '../../colorSchemes.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
   const {

package/src/components/header/ZoomControls.tsx

@@ -5,7 +5,7 @@ import ZoomOut from '@mui/icons-material/ZoomOut'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const ZoomControls = observer(function ZoomControls({
   model,

package/src/components/header/ZoomMenu.tsx

@@ -5,7 +5,7 @@ import MoreVert from '@mui/icons-material/MoreVert'
 import RestartAlt from '@mui/icons-material/RestartAlt'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
   return (

package/src/components/header/ZoomStar.tsx

@@ -5,7 +5,7 @@ import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()(theme => ({
   dpad: {

package/src/components/import/ImportForm.tsx

@@ -4,10 +4,10 @@ import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
 import { Button, Container, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import ImportFormExamples from './ImportFormExamples'
-import { load } from './util'
+import ImportFormExamples from './ImportFormExamples.tsx'
+import { load } from './util.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 import type { FileLocation } from '@jbrowse/core/util/types'
 
 const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {

package/src/components/import/ImportFormExamples.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 import { Link, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { smallMSA, smallMSAOnly, smallTree } from './data/seq2'
-import { load } from './util'
+import { smallMSA, smallMSAOnly, smallTree } from './data/seq2.ts'
+import { load } from './util.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 function ListItem({
   onClick,

package/src/components/import/util.ts

@@ -1,4 +1,4 @@
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 import type { FileLocation } from '@jbrowse/core/util'
 
 export async function load(

package/src/components/minimap/Minimap.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 interface ClickCoord {
   clientX: number

package/src/components/minimap/MinimapSVG.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
   const {

package/src/components/msa/MSACanvas.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
-import Loading from './Loading'
-import MSACanvasBlock from './MSACanvasBlock'
+import Loading from './Loading.tsx'
+import MSACanvasBlock from './MSACanvasBlock.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const {

package/src/components/msa/MSACanvasBlock.tsx

@@ -5,11 +5,11 @@ import { useTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
-import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock'
-import { renderMSABlock } from './renderMSABlock'
-import { colorContrast } from '../../util'
+import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
+import { renderMSABlock } from './renderMSABlock.ts'
+import { colorContrast } from '../../util.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MSACanvasBlock = observer(function ({
   model,

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef } from 'react'
 
+import { isAlive } from '@jbrowse/mobx-state-tree'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
-import { isAlive } from 'mobx-state-tree'
 
-import { renderMouseover } from './renderMSAMouseover'
+import { renderMouseover } from './renderMSAMouseover.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MSAMouseoverCanvas = observer(function ({
   model,

package/src/components/msa/MSAPanel.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import MSACanvas from './MSACanvas'
-import MSAMouseoverCanvas from './MSAMouseoverCanvas'
+import MSACanvas from './MSACanvas.tsx'
+import MSAMouseoverCanvas from './MSAMouseoverCanvas.tsx'
 
 // types
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MSAPanel = observer(function ({ model }: { model: MsaViewModel }) {
   return (

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,5 +1,5 @@
-import type { MsaViewModel } from '../../model'
-import type { NodeWithIdsAndLength } from '../../types'
+import type { MsaViewModel } from '../../model.ts'
+import type { NodeWithIdsAndLength } from '../../types.ts'
 import type { HierarchyNode } from 'd3-hierarchy'
 
 export function renderBoxFeatureCanvasBlock({

package/src/components/msa/renderMSABlock.ts

@@ -1,5 +1,5 @@
-import type { MsaViewModel } from '../../model'
-import type { NodeWithIdsAndLength } from '../../types'
+import type { MsaViewModel } from '../../model.ts'
+import type { NodeWithIdsAndLength } from '../../types.ts'
 import type { Theme } from '@mui/material'
 import type { HierarchyNode } from 'd3-hierarchy'
 

package/src/components/msa/renderMSAMouseover.ts

@@ -1,4 +1,4 @@
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const hoverColor = 'rgba(0,0,0,0.15)'
 const highlightColor = 'rgba(128,128,0,0.2)'

package/src/components/tracks/renderTracksSvg.ts

@@ -1,5 +1,5 @@
-import type { MsaViewModel } from '../../model'
-import type { BasicTrack } from '../../types'
+import type { MsaViewModel } from '../../model.ts'
+import type { BasicTrack } from '../../types.ts'
 
 export function renderConservationTrack({
   model,

package/src/components/tree/TreeBranchMenu.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 interface Node {
   x: number

package/src/components/tree/TreeCanvas.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react'
 
+import { isAlive } from '@jbrowse/mobx-state-tree'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
-import { isAlive } from 'mobx-state-tree'
 
-import TreeCanvasBlock from './TreeCanvasBlock'
-import { padding } from './renderTreeCanvas'
+import TreeCanvasBlock from './TreeCanvasBlock.tsx'
+import { padding } from './renderTreeCanvas.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)

package/src/components/tree/TreeCanvasBlock.tsx

@@ -5,11 +5,11 @@ import Flatbush from 'flatbush'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
-import TreeBranchMenu from './TreeBranchMenu'
-import TreeNodeMenu from './TreeNodeMenu'
-import { padding, renderTreeCanvas } from './renderTreeCanvas'
+import TreeBranchMenu from './TreeBranchMenu.tsx'
+import TreeNodeMenu from './TreeNodeMenu.tsx'
+import { padding, renderTreeCanvas } from './renderTreeCanvas.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 interface TooltipData {
   name: string

package/src/components/tree/TreeNodeMenu.tsx

@@ -3,10 +3,12 @@ import React, { lazy } from 'react'
 import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 // lazies
-const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog'))
+const TreeNodeInfoDialog = lazy(
+  () => import('./dialogs/TreeNodeInfoDialog.tsx'),
+)
 
 const TreeMenu = observer(function ({
   node,

package/src/components/tree/TreePanel.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import TreeCanvas from './TreeCanvas'
+import TreeCanvas from './TreeCanvas.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
   const { treeAreaWidth } = model

package/src/components/tree/TreeRuler.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
   const { treeAreaWidth } = model

package/src/components/tree/dialogs/TreeNodeInfoDialog.tsx

@@ -6,9 +6,9 @@ import { Dialog } from '@jbrowse/core/ui'
 import { DialogContent } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import SequenceTextArea from '../../SequenceTextArea'
+import SequenceTextArea from '../../SequenceTextArea.tsx'
 
-import type { MsaViewModel } from '../../../model'
+import type { MsaViewModel } from '../../../model.ts'
 
 const TreeNodeInfoDialog = observer(function ({
   info,

package/src/components/tree/renderTreeCanvas.ts

@@ -1,4 +1,4 @@
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
 
 export const padding = 600

package/src/createPaletteMap.test.ts

@@ -0,0 +1,57 @@
+import { expect, test } from 'vitest'
+
+import { createPaletteMap } from './createPaletteMap.ts'
+import palettes from './ggplotPalettes.ts'
+
+// Original implementation for comparison
+function originalFillPalette(keys: string[]) {
+  let i = 0
+  const map = {} as Record<string, string>
+  for (const key of keys) {
+    const k = Math.min(keys.length - 1, palettes.length - 1)
+    map[key] = palettes[k]![i]!
+    i++
+  }
+  return map
+}
+
+test('createPaletteMap matches original implementation with 1 key', () => {
+  const keys = ['IPR001234']
+  expect(createPaletteMap(keys)).toEqual(originalFillPalette(keys))
+})
+
+test('createPaletteMap matches original implementation with 3 keys', () => {
+  const keys = ['IPR001234', 'IPR005678', 'IPR009012']
+  expect(createPaletteMap(keys)).toEqual(originalFillPalette(keys))
+})
+
+test('createPaletteMap matches original implementation with 8 keys (max palette size)', () => {
+  const keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
+  expect(createPaletteMap(keys)).toEqual(originalFillPalette(keys))
+})
+
+test('createPaletteMap matches original implementation with more keys than palette colors', () => {
+  const keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
+  expect(createPaletteMap(keys)).toEqual(originalFillPalette(keys))
+})
+
+test('createPaletteMap returns correct colors for 3 keys', () => {
+  const keys = ['X', 'Y', 'Z']
+  const result = createPaletteMap(keys)
+  // With 3 keys, uses palette index 2 (0-indexed)
+  expect(result).toEqual({
+    X: '#F8766D',
+    Y: '#00BA38',
+    Z: '#619CFF',
+  })
+})
+
+test('createPaletteMap returns empty object for empty keys', () => {
+  expect(createPaletteMap([])).toEqual({})
+})
+
+test('createPaletteMap preserves key order', () => {
+  const keys = ['Z', 'A', 'M']
+  const result = createPaletteMap(keys)
+  expect(Object.keys(result)).toEqual(['Z', 'A', 'M'])
+})

package/src/createPaletteMap.ts

@@ -0,0 +1,11 @@
+import palettes from './ggplotPalettes.ts'
+
+/**
+ * Creates a map from keys to colors using ggplot-style palettes.
+ * The palette is selected based on the number of keys.
+ */
+export function createPaletteMap(keys: string[]) {
+  const k = Math.min(keys.length - 1, palettes.length - 1)
+  const palette = palettes[k]!
+  return Object.fromEntries(keys.map((key, i) => [key, palette[i]!]))
+}

package/src/index.ts

@@ -1,2 +1,3 @@
-export { default as MSAView } from './components/Loading'
-export { type MsaViewModel, default as MSAModelF } from './model'
+export { default as MSAView } from './components/Loading.tsx'
+export { type MsaViewModel, default as MSAModelF } from './model.ts'
+export type { MSAParserType } from 'msa-parsers'

package/src/launchInterProScan.ts

@@ -1,8 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 
-import { jsonfetch, textfetch, timeout } from './fetchUtils'
+import { jsonfetch, textfetch, timeout } from './fetchUtils.ts'
 
-import type { MsaViewModel } from './model'
+import type { MsaViewModel } from './model.ts'
 
 const base = 'https://www.ebi.ac.uk/Tools/services/rest'
 

package/src/model/DataModel.ts

@@ -1,4 +1,4 @@
-import { types } from 'mobx-state-tree'
+import { types } from '@jbrowse/mobx-state-tree'
 
 /**
  * #stateModel DataModel

package/src/model/DialogQueue.ts

@@ -1,4 +1,4 @@
-import { types } from 'mobx-state-tree'
+import { types } from '@jbrowse/mobx-state-tree'
 
 import type { DialogComponentType } from '@jbrowse/core/util'
 

package/src/model/msaModel.ts

@@ -1,6 +1,6 @@
-import { types } from 'mobx-state-tree'
+import { types } from '@jbrowse/mobx-state-tree'
 
-import { defaultBgColor, defaultColorSchemeName } from '../constants'
+import { defaultBgColor, defaultColorSchemeName } from '../constants.ts'
 
 /**
  * #stateModel MSAModel

package/src/model/treeModel.ts

@@ -1,4 +1,4 @@
-import { types } from 'mobx-state-tree'
+import { types } from '@jbrowse/mobx-state-tree'
 
 import {
   defaultDrawLabels,
@@ -9,7 +9,7 @@ import {
   defaultTreeAreaWidth,
   defaultTreeWidth,
   defaultTreeWidthMatchesArea,
-} from '../constants'
+} from '../constants.ts'
 
 /**
  * #stateModel Tree