react-msaview 4.4.6 → 4.6.0

package/src/model.ts

@@ -20,7 +20,32 @@ import Stockholm from 'stockholm-js'
 
 import { blocksX, blocksY } from './calculateBlocks'
 import colorSchemes from './colorSchemes'
+import ConservationTrack from './components/ConservationTrack'
 import TextTrack from './components/TextTrack'
+import {
+  defaultAllowedGappyness,
+  defaultBgColor,
+  defaultColWidth,
+  defaultColorSchemeName,
+  defaultContrastLettering,
+  defaultCurrentAlignment,
+  defaultDrawLabels,
+  defaultDrawMsaLetters,
+  defaultDrawNodeBubbles,
+  defaultDrawTree,
+  defaultHeight,
+  defaultHideGaps,
+  defaultLabelsAlignRight,
+  defaultRowHeight,
+  defaultScrollX,
+  defaultScrollY,
+  defaultShowBranchLen,
+  defaultShowDomains,
+  defaultSubFeatureRows,
+  defaultTreeAreaWidth,
+  defaultTreeWidth,
+  defaultTreeWidthMatchesArea,
+} from './constants'
 import { flatToTree } from './flatToTree'
 import palettes from './ggplotPalettes'
 import { measureTextCanvas } from './measureTextCanvas'
@@ -28,8 +53,10 @@ 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'
 import ClustalMSA from './parsers/ClustalMSA'
 import EmfMSA from './parsers/EmfMSA'
 import FastaMSA from './parsers/FastaMSA'
@@ -43,7 +70,6 @@ import { seqCoordToRowSpecificGlobalCoord } from './seqCoordToRowSpecificGlobalC
 import {
   collapse,
   generateNodeIds,
-  isBlank,
   len,
   maxLength,
   setBrLength,
@@ -63,8 +89,6 @@ import type { Theme } from '@mui/material'
 import type { HierarchyNode } from 'd3-hierarchy'
 import type { Instance } from 'mobx-state-tree'
 
-const defaultRowHeight = 16
-const defaultColWidth = 12
 const showZoomStarKey = 'msa-showZoomStar'
 
 /**
@@ -90,24 +114,24 @@ function stateModelFactory() {
         /**
          * #property
          */
-        showDomains: false,
+        showDomains: defaultShowDomains,
         /**
          * #property
          */
-        hideGaps: true,
+        hideGaps: defaultHideGaps,
         /**
          * #property
          */
-        allowedGappyness: 100,
+        allowedGappyness: defaultAllowedGappyness,
         /**
          * #property
          */
-        contrastLettering: true,
+        contrastLettering: defaultContrastLettering,
 
         /**
          * #property
          */
-        subFeatureRows: false,
+        subFeatureRows: defaultSubFeatureRows,
 
         /**
          * #property
@@ -118,13 +142,13 @@ function stateModelFactory() {
         /**
          * #property
          */
-        drawMsaLetters: true,
+        drawMsaLetters: defaultDrawMsaLetters,
 
         /**
          * #property
          * height of the div containing the view, px
          */
-        height: types.optional(types.number, 550),
+        height: types.optional(types.number, defaultHeight),
 
         /**
          * #property
@@ -136,13 +160,13 @@ function stateModelFactory() {
          * #property
          * scroll position, Y-offset, px
          */
-        scrollY: 0,
+        scrollY: defaultScrollY,
 
         /**
          * #property
          * scroll position, X-offset, px
          */
-        scrollX: 0,
+        scrollX: defaultScrollX,
 
         /**
          * #property
@@ -173,7 +197,7 @@ function stateModelFactory() {
          * #property
          *
          */
-        currentAlignment: 0,
+        currentAlignment: defaultCurrentAlignment,
 
         /**
          * #property
@@ -297,6 +321,12 @@ function stateModelFactory() {
         | { nodeId: string; descendantNames: string[] }
         | undefined,
 
+      /**
+       * #volatile
+       * array of column indices to highlight
+       */
+      highlightedColumns: undefined as number[] | undefined,
+
       /**
        * #volatile
        * a dummy variable that is incremented when ref changes so autorun for
@@ -363,7 +393,7 @@ function stateModelFactory() {
         self.loadingMSA = arg
       },
       /**
-       * #volatile
+       * #action
        */
       setShowZoomStar(arg: boolean) {
         self.showZoomStar = arg
@@ -416,8 +446,8 @@ function stateModelFactory() {
         }
 
         // Find the node in the hierarchy
-        const node = (self as any).hierarchy.find(
-          (n: any) => n.data.id === nodeId,
+        const node = (self as MsaViewModel).hierarchy.find(
+          n => n.data.id === nodeId,
         )
         if (!node) {
           self.hoveredTreeNode = undefined
@@ -429,6 +459,13 @@ function stateModelFactory() {
 
         self.hoveredTreeNode = { nodeId, descendantNames }
       },
+      /**
+       * #action
+       * set highlighted columns
+       */
+      setHighlightedColumns(columns?: number[]) {
+        self.highlightedColumns = columns
+      },
       /**
        * #action
        */
@@ -497,7 +534,7 @@ function stateModelFactory() {
       /**
        * #action
        */
-      toggleCollapsed2(node: string) {
+      toggleCollapsedLeaf(node: string) {
         if (self.collapsedLeaves.includes(node)) {
           self.collapsedLeaves.remove(node)
         } else {
@@ -555,11 +592,23 @@ function stateModelFactory() {
     }))
 
     .views(self => ({
+      /**
+       * #getter
+       * hideGaps takes effect when there are collapsed rows or allowedGappyness < 100
+       */
+      get hideGapsEffective() {
+        return (
+          self.hideGaps &&
+          (self.collapsed.length > 0 ||
+            self.collapsedLeaves.length > 0 ||
+            self.allowedGappyness < 100)
+        )
+      },
       /**
        * #getter
        */
       get realAllowedGappyness() {
-        return self.hideGaps ? self.allowedGappyness : 100
+        return this.hideGapsEffective ? self.allowedGappyness : 100
       },
       /**
        * #getter
@@ -643,6 +692,8 @@ function stateModelFactory() {
         if (text) {
           if (Stockholm.sniff(text)) {
             return new StockholmMSA(text, self.currentAlignment)
+          } else if (A3mMSA.sniff(text)) {
+            return new A3mMSA(text)
           } else if (text.startsWith('>')) {
             return new FastaMSA(text)
           } else if (text.startsWith('SEQ')) {
@@ -697,6 +748,33 @@ function stateModelFactory() {
         const { mouseRow } = self
         return mouseRow === undefined ? undefined : this.rowNames[mouseRow]
       },
+      /**
+       * #getter
+       * Returns insertion info if mouse is hovering over an insertion indicator
+       */
+      get hoveredInsertion() {
+        const { mouseCol, mouseRow } = self
+        if (mouseCol === undefined || mouseRow === undefined) {
+          return undefined
+        }
+        const rowName = this.rowNames[mouseRow]
+        if (!rowName) {
+          return undefined
+        }
+        const insertions = this.insertionPositions.get(rowName)
+        if (!insertions) {
+          return undefined
+        }
+        const insertion = insertions.find(ins => ins.pos === mouseCol)
+        if (insertion) {
+          return {
+            rowName,
+            col: mouseCol,
+            letters: insertion.letters,
+          }
+        }
+        return undefined
+      },
 
       /**
        * #getter
@@ -719,7 +797,7 @@ function stateModelFactory() {
         ;[...self.collapsed, ...self.collapsedLeaves]
           .map(collapsedId => hier.find(node => node.data.id === collapsedId))
           .filter(notEmpty)
-          .map(node => {
+          .forEach(node => {
             collapse(node)
           })
 
@@ -744,28 +822,35 @@ function stateModelFactory() {
        * #getter
        */
       get blanks() {
-        const { hideGaps, realAllowedGappyness } = self
-        const blanks = []
-        if (hideGaps) {
-          const strs = this.leaves
-            .map(leaf => this.MSA?.getRow(leaf.data.name))
-            .filter(notEmpty)
-          if (strs.length) {
-            const s0len = strs[0]!.length
-            for (let i = 0; i < s0len; i++) {
-              let counter = 0
-              const l = strs.length
-              for (let j = 0; j < l; j++) {
-                if (isBlank(strs[j]![i])) {
-                  counter++
-                }
-              }
-              if (counter / l >= realAllowedGappyness / 100) {
-                blanks.push(i)
-              }
+        const { hideGapsEffective, realAllowedGappyness } = self
+        if (!hideGapsEffective) {
+          return []
+        }
+        const strs = this.leaves
+          .map(leaf => this.MSA?.getRow(leaf.data.name))
+          .filter(notEmpty)
+        if (strs.length === 0) {
+          return []
+        }
+        const numCols = strs[0]!.length
+        const numRows = strs.length
+        const threshold = Math.ceil((realAllowedGappyness / 100) * numRows)
+        const blankCounts = new Uint16Array(numCols)
+        for (let j = 0; j < numRows; j++) {
+          const str = strs[j]!
+          for (let i = 0; i < numCols; i++) {
+            // bit trick: (code - 45) >>> 0 <= 1 checks for '-' (45) or '.' (46)
+            if ((str.charCodeAt(i) - 45) >>> 0 <= 1) {
+              blankCounts[i]!++
             }
           }
         }
+        const blanks = []
+        for (let i = 0; i < numCols; i++) {
+          if (blankCounts[i]! >= threshold) {
+            blanks.push(i)
+          }
+        }
         return blanks
       },
       /**
@@ -774,6 +859,60 @@ function stateModelFactory() {
       get blanksSet() {
         return new Set(this.blanks)
       },
+      /**
+       * #getter
+       * Returns a map of row name to array of insertions with display position and letters
+       */
+      get insertionPositions() {
+        const { hideGapsEffective } = self
+        const { blanks, rows } = this
+        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 }[]>()
+        for (const [name, seq] of rows) {
+          const insertions: { pos: number; letters: string }[] = []
+          let displayPos = 0
+          let blankIdx = 0
+          let currentInsertPos = -1
+          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) {
+                  letterChars.push(seq[i]!)
+                } else {
+                  if (letterChars.length > 0) {
+                    insertions.push({
+                      pos: currentInsertPos,
+                      letters: letterChars.join(''),
+                    })
+                  }
+                  currentInsertPos = displayPos
+                  letterChars = [seq[i]!]
+                }
+              }
+              blankIdx++
+            } else {
+              displayPos++
+            }
+          }
+          if (letterChars.length > 0) {
+            insertions.push({
+              pos: currentInsertPos,
+              letters: letterChars.join(''),
+            })
+          }
+          if (insertions.length > 0) {
+            result.set(name, insertions)
+          }
+        }
+        return result
+      },
       /**
        * #getter
        */
@@ -810,10 +949,10 @@ function stateModelFactory() {
        * #getter
        */
       get columns2d() {
-        const { hideGaps } = self
+        const { hideGapsEffective } = self
         return this.rows
           .map(r => r[1])
-          .map(str => (hideGaps ? skipBlanks(this.blanks, str) : str))
+          .map(str => (hideGapsEffective ? skipBlanks(this.blanks, str) : str))
       },
       /**
        * #getter
@@ -847,6 +986,216 @@ function stateModelFactory() {
       get colStatsSums() {
         return this.colStats.map(val => sum(Object.values(val)))
       },
+
+      /**
+       * #getter
+       * Pre-computed consensus letter and percent identity color per column.
+       * Used by percent_identity_dynamic color scheme.
+       */
+      get colConsensus() {
+        const { colStats, colStatsSums } = this
+        return colStats.map((stats, i) => {
+          const total = colStatsSums[i]!
+          let maxCount = 0
+          let letter = ''
+          for (const key in stats) {
+            const val = stats[key]!
+            if (val > maxCount && key !== '-' && key !== '.') {
+              maxCount = val
+              letter = key
+            }
+          }
+          const proportion = maxCount / total
+          return {
+            letter,
+            color:
+              proportion > 0.4
+                ? `hsl(240, 30%, ${100 * Math.max(1 - proportion / 3, 0.3)}%)`
+                : undefined,
+          }
+        })
+      },
+
+      /**
+       * #getter
+       * Pre-computed ClustalX colors per column.
+       * Returns a map of letter -> color for each column.
+       * ref http://www.jalview.org/help/html/colourSchemes/clustal.html
+       */
+      get colClustalX() {
+        const { colStats, colStatsSums } = this
+        return colStats.map((stats, i) => {
+          const total = colStatsSums[i]!
+          const colors: Record<string, string> = {}
+
+          const W = stats.W ?? 0
+          const L = stats.L ?? 0
+          const V = stats.V ?? 0
+          const I = stats.I ?? 0
+          const M = stats.M ?? 0
+          const A = stats.A ?? 0
+          const F = stats.F ?? 0
+          const C = stats.C ?? 0
+          const H = stats.H ?? 0
+          const P = stats.P ?? 0
+          const R = stats.R ?? 0
+          const K = stats.K ?? 0
+          const Q = stats.Q ?? 0
+          const E = stats.E ?? 0
+          const D = stats.D ?? 0
+          const T = stats.T ?? 0
+          const S = stats.S ?? 0
+          const G = stats.G ?? 0
+          const Y = stats.Y ?? 0
+          const N = stats.N ?? 0
+
+          const WLVIMAFCHPY = W + L + V + I + M + A + F + C + H + P + Y
+          const KR = K + R
+          const QE = Q + E
+          const ED = E + D
+          const TS = T + S
+
+          if (WLVIMAFCHPY / total > 0.6) {
+            colors.W = 'rgb(128,179,230)'
+            colors.L = 'rgb(128,179,230)'
+            colors.V = 'rgb(128,179,230)'
+            colors.A = 'rgb(128,179,230)'
+            colors.I = 'rgb(128,179,230)'
+            colors.M = 'rgb(128,179,230)'
+            colors.F = 'rgb(128,179,230)'
+            colors.C = 'rgb(128,179,230)'
+          }
+
+          if (
+            KR / total > 0.6 ||
+            K / total > 0.8 ||
+            R / total > 0.8 ||
+            Q / total > 0.8
+          ) {
+            colors.K = '#d88'
+            colors.R = '#d88'
+          }
+
+          if (
+            KR / total > 0.6 ||
+            QE / total > 0.5 ||
+            E / total > 0.8 ||
+            Q / total > 0.8 ||
+            D / total > 0.8
+          ) {
+            colors.E = 'rgb(192, 72, 192)'
+          }
+
+          if (
+            KR / total > 0.6 ||
+            ED / total > 0.5 ||
+            K / total > 0.8 ||
+            R / total > 0.8 ||
+            Q / total > 0.8
+          ) {
+            colors.D = 'rgb(204, 77, 204)'
+          }
+
+          if (N / total > 0.5 || Y / total > 0.85) {
+            colors.N = '#8f8'
+          }
+
+          if (
+            KR / total > 0.6 ||
+            QE / total > 0.6 ||
+            Q / total > 0.85 ||
+            E / total > 0.85 ||
+            K / total > 0.85 ||
+            R / total > 0.85
+          ) {
+            colors.Q = '#8f8'
+          }
+
+          if (
+            WLVIMAFCHPY / total > 0.6 ||
+            TS / total > 0.5 ||
+            S / total > 0.85 ||
+            T / total > 0.85
+          ) {
+            colors.S = 'rgb(26,204,26)'
+            colors.T = 'rgb(26,204,26)'
+          }
+
+          if (C / total > 0.85) {
+            colors.C = 'rgb(240, 128, 128)'
+          }
+
+          if (G / total > 0) {
+            colors.G = 'rgb(240, 144, 72)'
+          }
+
+          if (P / total > 0) {
+            colors.P = 'rgb(204, 204, 0)'
+          }
+
+          if (
+            WLVIMAFCHPY / total > 0.6 ||
+            W / total > 0.85 ||
+            Y / total > 0.85 ||
+            A / total > 0.85 ||
+            C / total > 0.85 ||
+            P / total > 0.85 ||
+            Q / total > 0.85 ||
+            F / total > 0.85 ||
+            H / total > 0.85 ||
+            I / total > 0.85 ||
+            L / total > 0.85 ||
+            M / total > 0.85 ||
+            V / total > 0.85
+          ) {
+            colors.H = 'rgb(26, 179, 179)'
+            colors.Y = 'rgb(26, 179, 179)'
+          }
+
+          return colors
+        })
+      },
+
+      /**
+       * #getter
+       * Conservation score per column using Shannon entropy (biojs-msa style).
+       * Conservation = (1 - H/Hmax) * (1 - gapFraction)
+       * Returns values 0-1 where 1 = fully conserved, 0 = no conservation.
+       */
+      get conservation() {
+        const { colStats, colStatsSums } = this
+        const alphabetSize = 20
+        const maxEntropy = Math.log2(alphabetSize)
+
+        return colStats.map((stats, i) => {
+          const total = colStatsSums[i]
+          if (!total) {
+            return 0
+          }
+
+          const gapCount = (stats['-'] || 0) + (stats['.'] || 0)
+          const nonGapTotal = total - gapCount
+          if (nonGapTotal === 0) {
+            return 0
+          }
+
+          let entropy = 0
+          for (const letter of Object.keys(stats)) {
+            if (letter === '-' || letter === '.') {
+              continue
+            }
+            const count = stats[letter]!
+            const freq = count / nonGapTotal
+            if (freq > 0) {
+              entropy -= freq * Math.log2(freq)
+            }
+          }
+
+          const gapFraction = gapCount / total
+          const conservation = Math.max(0, 1 - entropy / maxEntropy)
+          return conservation * (1 - gapFraction)
+        })
+      },
       /**
        * #getter
        * generates a new tree that is clustered with x,y positions
@@ -881,6 +1230,14 @@ function stateModelFactory() {
       get allBranchesLength0() {
         return this.hierarchy.links().every(s => !s.source.data.length)
       },
+
+      /**
+       * #getter
+       * effective showBranchLen accounting for allBranchesLength0
+       */
+      get showBranchLenEffective() {
+        return this.allBranchesLength0 ? false : self.showBranchLen
+      },
     }))
     .views(self => ({
       /**
@@ -972,6 +1329,18 @@ function stateModelFactory() {
         self.drawMsaLetters = arg
       },
 
+      /**
+       * #action
+       * Calculate a neighbor joining tree from the current MSA using BLOSUM62 distances
+       */
+      calculateNeighborJoiningTreeFromMSA() {
+        if (self.rows.length < 2) {
+          throw new Error('Need at least 2 sequences to build a tree')
+        }
+        const newickTree = calculateNeighborJoiningTree(self.rows)
+        self.setTree(newickTree)
+      },
+
       /**
        * #action
        */
@@ -1105,39 +1474,22 @@ function stateModelFactory() {
         return self.MSA?.seqConsensus
       },
 
-      /**
-       * #getter
-       */
-      get conservation() {
-        if (self.columns2d.length) {
-          for (let i = 0; i < self.columns2d[0]!.length; i++) {
-            const col = []
-            for (const column of self.columns2d) {
-              col.push(column[i])
-            }
-          }
-        }
-        return ['a']
-      },
-
       /**
        * #getter
        */
       get adapterTrackModels(): BasicTrack[] {
-        const { rowHeight, MSA, hideGaps, blanks } = self
+        const { rowHeight, MSA, hideGapsEffective, blanks } = self
         return (
-          MSA?.tracks.map(t => ({
-            model: {
-              ...t,
-              data: t.data
-                ? hideGaps
-                  ? skipBlanks(blanks, t.data)
-                  : t.data
-                : undefined,
-              height: rowHeight,
-            } as TextTrackModel,
-            ReactComponent: TextTrack,
-          })) || []
+          MSA?.tracks
+            .filter(t => t.data)
+            .map(t => ({
+              model: {
+                ...t,
+                data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
+                height: rowHeight,
+              } as TextTrackModel,
+              ReactComponent: TextTrack,
+            })) || []
         )
       },
 
@@ -1145,7 +1497,15 @@ function stateModelFactory() {
        * #getter
        */
       get tracks(): BasicTrack[] {
-        return this.adapterTrackModels
+        const conservationTrack: BasicTrack = {
+          model: {
+            id: 'conservation',
+            name: 'Conservation',
+            height: 40,
+          },
+          ReactComponent: ConservationTrack,
+        }
+        return [...this.adapterTrackModels, conservationTrack]
       },
 
       /**
@@ -1374,6 +1734,7 @@ function stateModelFactory() {
       async exportSVG(opts: {
         theme: Theme
         includeMinimap?: boolean
+        includeTracks?: boolean
         exportType: string
       }) {
         const { renderToSvg } = await import('./renderToSvg')
@@ -1556,88 +1917,104 @@ function stateModelFactory() {
       const snap = result as Omit<typeof result, symbol>
       const {
         data: { tree, msa, treeMetadata },
+        // Main model properties
+        showDomains,
+        hideGaps,
+        allowedGappyness,
+        contrastLettering,
+        subFeatureRows,
+        drawMsaLetters,
+        height,
+        rowHeight,
+        scrollY,
+        scrollX,
+        colWidth,
+        currentAlignment,
+        collapsed,
+        collapsedLeaves,
+        showOnly,
+        turnedOffTracks,
+        featureFilters,
+        relativeTo,
+        // MSA model properties
+        bgColor,
+        colorSchemeName,
+        // Tree model properties
+        drawLabels,
+        labelsAlignRight,
+        treeAreaWidth,
+        treeWidth,
+        treeWidthMatchesArea,
+        showBranchLen,
+        drawTree,
+        drawNodeBubbles,
+        // Always include
         ...rest
       } = snap
 
-      // Default values to filter out
-      const defaults = {
-        // Main model defaults
-        showDomains: false,
-        hideGaps: true,
-        allowedGappyness: 100,
-        contrastLettering: true,
-        subFeatureRows: false,
-        drawMsaLetters: true,
-        height: 550,
-        rowHeight: defaultRowHeight,
-        scrollY: 0,
-        scrollX: 0,
-        colWidth: defaultColWidth,
-        currentAlignment: 0,
-        // MSA model defaults
-        bgColor: true,
-        colorSchemeName: 'maeditor',
-        // Tree model defaults
-        drawLabels: true,
-        labelsAlignRight: false,
-        treeAreaWidth: 400,
-        treeWidth: 300,
-        treeWidthMatchesArea: true,
-        showBranchLen: true,
-        drawTree: true,
-        drawNodeBubbles: true,
-      }
-
-      // Properties that should always be included even if they match defaults
-      const alwaysInclude = new Set(['id', 'type', 'relativeTo'])
-
-      // Filter out properties that match default values
-      function filterDefaults(obj: Record<string, any>): Record<string, any> {
-        const filtered: Record<string, any> = {}
-        for (const [key, value] of Object.entries(obj)) {
-          // Always include essential properties
-          if (alwaysInclude.has(key)) {
-            filtered[key] = value
-            continue
-          }
-
-          // Skip if value matches default
-          if (defaults[key as keyof typeof defaults] === value) {
-            continue
-          }
-
-          // Handle nested objects
-          if (value && typeof value === 'object' && !Array.isArray(value)) {
-            const filteredNested = filterDefaults(value)
-            // Only include nested object if it has non-default properties
-            if (Object.keys(filteredNested).length > 0) {
-              filtered[key] = filteredNested
-            }
-          } else if (Array.isArray(value)) {
-            // Only include arrays that aren't empty
-            if (value.length > 0) {
-              filtered[key] = value
-            }
-          } else {
-            // Include non-default primitives
-            filtered[key] = value
-          }
-        }
-        return filtered
-      }
-
-      const filteredRest = filterDefaults(rest)
-
       // remove the MSA/tree data from the tree if the filehandle available in
       // which case it can be reloaded on refresh
       return {
+        ...rest,
         data: {
           ...(result.treeFilehandle ? {} : { tree }),
           ...(result.msaFilehandle ? {} : { msa }),
           ...(result.treeMetadataFilehandle ? {} : { treeMetadata }),
         },
-        ...filteredRest,
-      }
+        // Main model - only include non-default values
+        ...(showDomains !== defaultShowDomains ? { showDomains } : {}),
+        ...(hideGaps !== defaultHideGaps ? { hideGaps } : {}),
+        ...(allowedGappyness !== defaultAllowedGappyness
+          ? { allowedGappyness }
+          : {}),
+        ...(contrastLettering !== defaultContrastLettering
+          ? { contrastLettering }
+          : {}),
+        ...(subFeatureRows !== defaultSubFeatureRows ? { subFeatureRows } : {}),
+        ...(drawMsaLetters !== defaultDrawMsaLetters ? { drawMsaLetters } : {}),
+        ...(height !== defaultHeight ? { height } : {}),
+        ...(rowHeight !== defaultRowHeight ? { rowHeight } : {}),
+        ...(scrollY !== defaultScrollY ? { scrollY } : {}),
+        ...(scrollX !== defaultScrollX ? { scrollX } : {}),
+        ...(colWidth !== defaultColWidth ? { colWidth } : {}),
+        ...(currentAlignment !== defaultCurrentAlignment
+          ? { currentAlignment }
+          : {}),
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        ...(collapsed?.length ? { collapsed } : {}),
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        ...(collapsedLeaves?.length ? { collapsedLeaves } : {}),
+        ...(showOnly !== undefined ? { showOnly } : {}),
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        ...(turnedOffTracks && Object.keys(turnedOffTracks).length > 0
+          ? { turnedOffTracks }
+          : {}),
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        ...(featureFilters && Object.keys(featureFilters).length > 0
+          ? { featureFilters }
+          : {}),
+        ...(relativeTo !== undefined ? { relativeTo } : {}),
+        // MSA model - only include non-default values
+        ...(bgColor !== defaultBgColor ? { bgColor } : {}),
+        ...(colorSchemeName !== defaultColorSchemeName
+          ? { colorSchemeName }
+          : {}),
+        // Tree model - only include non-default values
+        ...(drawLabels !== defaultDrawLabels ? { drawLabels } : {}),
+        ...(labelsAlignRight !== defaultLabelsAlignRight
+          ? { labelsAlignRight }
+          : {}),
+        ...(treeAreaWidth !== defaultTreeAreaWidth ? { treeAreaWidth } : {}),
+        ...(treeWidth !== defaultTreeWidth ? { treeWidth } : {}),
+        ...(treeWidthMatchesArea !== defaultTreeWidthMatchesArea
+          ? { treeWidthMatchesArea }
+          : {}),
+        ...(showBranchLen !== defaultShowBranchLen ? { showBranchLen } : {}),
+        ...(drawTree !== defaultDrawTree ? { drawTree } : {}),
+        ...(drawNodeBubbles !== defaultDrawNodeBubbles
+          ? { drawNodeBubbles }
+          : {}),
+      } as typeof snap
     })
 }