react-msaview 4.4.6 → 4.6.0

package/dist/model.js

@@ -11,7 +11,9 @@ import { addDisposer, cast, types } from 'mobx-state-tree';
 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';
@@ -19,8 +21,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';
@@ -28,9 +32,7 @@ import StockholmMSA from './parsers/StockholmMSA';
 import { reparseTree } from './reparseTree';
 import { mouseOverCoordToGapRemovedRowCoord, mouseOverCoordToGlobalCoord, } from './rowCoordinateCalculations';
 import { seqCoordToRowSpecificGlobalCoord } from './seqCoordToRowSpecificGlobalCoord';
-import { collapse, generateNodeIds, isBlank, len, maxLength, setBrLength, skipBlanks, } from './util';
-const defaultRowHeight = 16;
-const defaultColWidth = 12;
+import { collapse, generateNodeIds, len, maxLength, setBrLength, skipBlanks, } from './util';
 const showZoomStarKey = 'msa-showZoomStar';
 /**
  * #stateModel MsaView
@@ -50,23 +52,23 @@ 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
          * hardcoded view type
@@ -75,12 +77,12 @@ 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
          * height of each row, px
@@ -90,12 +92,12 @@ function stateModelFactory() {
          * #property
          * scroll position, Y-offset, px
          */
-        scrollY: 0,
+        scrollY: defaultScrollY,
         /**
          * #property
          * scroll position, X-offset, px
          */
-        scrollX: 0,
+        scrollX: defaultScrollX,
         /**
          * #property
          * width of columns, px
@@ -121,7 +123,7 @@ function stateModelFactory() {
          * #property
          *
          */
-        currentAlignment: 0,
+        currentAlignment: defaultCurrentAlignment,
         /**
          * #property
          * array of tree parent nodes that are 'collapsed' (all children are
@@ -230,6 +232,11 @@ function stateModelFactory() {
          * the currently hovered tree node ID and its descendant leaf names
          */
         hoveredTreeNode: undefined,
+        /**
+         * #volatile
+         * array of column indices to highlight
+         */
+        highlightedColumns: undefined,
         /**
          * #volatile
          * a dummy variable that is incremented when ref changes so autorun for
@@ -289,7 +296,7 @@ function stateModelFactory() {
             self.loadingMSA = arg;
         },
         /**
-         * #volatile
+         * #action
          */
         setShowZoomStar(arg) {
             self.showZoomStar = arg;
@@ -338,7 +345,7 @@ function stateModelFactory() {
                 return;
             }
             // Find the node in the hierarchy
-            const node = self.hierarchy.find((n) => n.data.id === nodeId);
+            const node = self.hierarchy.find(n => n.data.id === nodeId);
             if (!node) {
                 self.hoveredTreeNode = undefined;
                 return;
@@ -347,6 +354,13 @@ function stateModelFactory() {
             const descendantNames = node.leaves().map((leaf) => leaf.data.name);
             self.hoveredTreeNode = { nodeId, descendantNames };
         },
+        /**
+         * #action
+         * set highlighted columns
+         */
+        setHighlightedColumns(columns) {
+            self.highlightedColumns = columns;
+        },
         /**
          * #action
          */
@@ -409,7 +423,7 @@ function stateModelFactory() {
         /**
          * #action
          */
-        toggleCollapsed2(node) {
+        toggleCollapsedLeaf(node) {
             if (self.collapsedLeaves.includes(node)) {
                 self.collapsedLeaves.remove(node);
             }
@@ -461,11 +475,21 @@ 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
@@ -548,6 +572,9 @@ function stateModelFactory() {
                 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);
                 }
@@ -595,6 +622,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
          */
@@ -615,7 +669,7 @@ function stateModelFactory() {
             [...self.collapsed, ...self.collapsedLeaves]
                 .map(collapsedId => hier.find(node => node.data.id === collapsedId))
                 .filter(notEmpty)
-                .map(node => {
+                .forEach(node => {
                 collapse(node);
             });
             return hier;
@@ -637,28 +691,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;
         },
         /**
@@ -667,6 +728,62 @@ 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();
+            }
+            const result = new Map();
+            for (const [name, seq] of rows) {
+                const insertions = [];
+                let displayPos = 0;
+                let blankIdx = 0;
+                let currentInsertPos = -1;
+                let letterChars = [];
+                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
          */
@@ -698,10 +815,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
@@ -734,6 +851,182 @@ 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 = {};
+                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
@@ -765,6 +1058,13 @@ 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 => ({
         /**
@@ -851,6 +1151,17 @@ function stateModelFactory() {
         setDrawMsaLetters(arg) {
             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
          */
@@ -972,33 +1283,17 @@ function stateModelFactory() {
         get seqConsensus() {
             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() {
-            const { rowHeight, MSA, hideGaps, blanks } = self;
-            return (MSA?.tracks.map(t => ({
+            const { rowHeight, MSA, hideGapsEffective, blanks } = self;
+            return (MSA?.tracks
+                .filter(t => t.data)
+                .map(t => ({
                 model: {
                     ...t,
-                    data: t.data
-                        ? hideGaps
-                            ? skipBlanks(blanks, t.data)
-                            : t.data
-                        : undefined,
+                    data: hideGapsEffective ? skipBlanks(blanks, t.data) : t.data,
                     height: rowHeight,
                 },
                 ReactComponent: TextTrack,
@@ -1008,7 +1303,15 @@ function stateModelFactory() {
          * #getter
          */
         get tracks() {
-            return this.adapterTrackModels;
+            const conservationTrack = {
+                model: {
+                    id: 'conservation',
+                    name: 'Conservation',
+                    height: 40,
+                },
+                ReactComponent: ConservationTrack,
+            };
+            return [...this.adapterTrackModels, conservationTrack];
         },
         /**
          * #getter
@@ -1359,81 +1662,77 @@ function stateModelFactory() {
     }))
         .postProcessSnapshot(result => {
         const snap = result;
-        const { data: { tree, msa, treeMetadata }, ...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) {
-            const filtered = {};
-            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] === 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);
+        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;
         // 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 }
+                : {}),
         };
     });
 }