react-msaview 5.0.7 → 5.0.13

package/src/model.ts

@@ -2,8 +2,6 @@ import {
   clamp,
   fetchAndMaybeUnzipText,
   groupBy,
-  localStorageGetBoolean,
-  localStorageSetBoolean,
   notEmpty,
   sum,
 } from '@jbrowse/core/util'
@@ -11,21 +9,14 @@ import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
 import { addDisposer, cast, types } from '@jbrowse/mobx-state-tree'
 import { colord } from 'colord'
-import { ascending } from 'd3-array'
-import { cluster, hierarchy } from 'd3-hierarchy'
 import { autorun, transaction } from 'mobx'
 import {
-  A3mMSA,
-  ClustalMSA,
-  EmfMSA,
-  FastaMSA,
-  StockholmMSA,
   generateNodeIds,
   gffToInterProResults,
   parseEmfTree,
   parseGFF,
+  parseMSA,
   parseNewick,
-  stockholmSniff,
 } from 'msa-parsers'
 
 import { blocksX, blocksY } from './calculateBlocks.ts'
@@ -37,7 +28,6 @@ import {
   defaultBgColor,
   defaultColWidth,
   defaultColorSchemeName,
-  defaultContrastLettering,
   defaultCurrentAlignment,
   defaultDrawLabels,
   defaultDrawMsaLetters,
@@ -54,10 +44,21 @@ import {
   defaultSubFeatureRows,
   defaultTreeAreaWidth,
   defaultTreeWidth,
-  defaultTreeWidthMatchesArea,
 } from './constants.ts'
 import { createPaletteMap } from './createPaletteMap.ts'
 import { flatToTree } from './flatToTree.ts'
+import {
+  clusterLayout,
+  collapse,
+  find,
+  hierarchy,
+  leaves,
+  links,
+  maxLength,
+  setBrLength,
+  sort,
+  sum as hierarchySum,
+} from './hierarchy.ts'
 import { measureTextCanvas } from './measureTextCanvas.ts'
 import { DataModelF } from './model/DataModel.ts'
 import { DialogQueueSessionMixin } from './model/DialogQueue.ts'
@@ -65,19 +66,18 @@ import { MSAModelF } from './model/msaModel.ts'
 import { TreeModelF } from './model/treeModel.ts'
 import { calculateNeighborJoiningTree } from './neighborJoining.ts'
 import { parseAsn1 } from './parseAsn1.ts'
-import { reparseTree } from './reparseTree.ts'
 import {
   globalColToVisibleCol,
   visibleColToGlobalCol,
   visibleColToSeqPosForRow,
 } from './rowCoordinateCalculations.ts'
 import { seqPosToGlobalCol } from './seqPosToGlobalCol.ts'
-import { collapse, len, maxLength, setBrLength, skipBlanks } from './util.ts'
+import { len, skipBlanks } from './util.ts'
 import { saveAs } from './vendor/fileSaver.ts'
 
+import type { HierarchyNode } from './hierarchy.ts'
 import type { InterProScanResults } from './launchInterProScan.ts'
 import type {
-  Accession,
   BasicTrack,
   NodeWithIds,
   NodeWithIdsAndLength,
@@ -86,9 +86,6 @@ import type {
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { Theme } from '@mui/material'
-import type { HierarchyNode } from 'd3-hierarchy'
-
-const showZoomStarKey = 'msa-showZoomStar'
 
 /**
  * #stateModel MsaView
@@ -122,11 +119,6 @@ function stateModelFactory() {
          * #property
          */
         allowedGappyness: defaultAllowedGappyness,
-        /**
-         * #property
-         */
-        contrastLettering: defaultContrastLettering,
-
         /**
          * #property
          */
@@ -200,7 +192,6 @@ function stateModelFactory() {
 
         /**
          * #property
-         *
          */
         currentAlignment: defaultCurrentAlignment,
 
@@ -211,12 +202,6 @@ function stateModelFactory() {
          */
         collapsed: types.array(types.string),
 
-        /**
-         * #property
-         * array of tree leaf nodes that are 'collapsed' (just that leaf node
-         * is hidden)
-         */
-        collapsedLeaves: types.array(types.string),
         /**
          * #property
          * focus on particular subtree
@@ -265,11 +250,6 @@ function stateModelFactory() {
        */
       highResScaleFactor: 2,
 
-      /**
-       * #volatile
-       * obtained from localStorage
-       */
-      showZoomStar: localStorageGetBoolean(showZoomStarKey, false),
       /**
        * #volatile
        */
@@ -359,11 +339,6 @@ function stateModelFactory() {
        */
       error: undefined as unknown,
 
-      /**
-       * #volatile
-       */
-      annotPos: undefined as { left: number; right: number } | undefined,
-
       /**
        * #volatile
        */
@@ -390,24 +365,12 @@ function stateModelFactory() {
       setAllowedGappyness(arg: number) {
         self.allowedGappyness = arg
       },
-      /**
-       * #action
-       */
-      setContrastLettering(arg: boolean) {
-        self.contrastLettering = arg
-      },
       /**
        * #action
        */
       setLoadingMSA(arg: boolean) {
         self.loadingMSA = arg
       },
-      /**
-       * #action
-       */
-      setShowZoomStar(arg: boolean) {
-        self.showZoomStar = arg
-      },
       /**
        * #action
        */
@@ -455,8 +418,8 @@ function stateModelFactory() {
           return
         }
 
-        // Find the node in the hierarchy
-        const node = (self as MsaViewModel).hierarchy.find(
+        const node = find(
+          (self as MsaViewModel).hierarchy,
           n => n.data.id === nodeId,
         )
         if (!node) {
@@ -464,8 +427,7 @@ function stateModelFactory() {
           return
         }
 
-        // Get all descendant leaf names
-        const descendantNames = node.leaves().map(leaf => leaf.data.name)
+        const descendantNames = leaves(node).map(leaf => leaf.data.name)
 
         self.hoveredTreeNode = { nodeId, descendantNames }
       },
@@ -482,7 +444,6 @@ function stateModelFactory() {
       setShowDomains(arg: boolean) {
         self.showDomains = arg
       },
-
       /**
        * #action
        */
@@ -541,16 +502,6 @@ function stateModelFactory() {
         }
       },
 
-      /**
-       * #action
-       */
-      toggleCollapsedLeaf(node: string) {
-        if (self.collapsedLeaves.includes(node)) {
-          self.collapsedLeaves.remove(node)
-        } else {
-          self.collapsedLeaves.push(node)
-        }
-      },
       /**
        * #action
        */
@@ -561,7 +512,12 @@ function stateModelFactory() {
       /**
        * #action
        */
-      setData(data: { msa?: string; tree?: string; treeMetadata?: string }) {
+      setData(data: {
+        msa?: string
+        tree?: string
+        treeMetadata?: string
+        gff?: string
+      }) {
         self.data = cast(data)
       },
 
@@ -616,9 +572,7 @@ function stateModelFactory() {
       get hideGapsEffective() {
         return (
           self.hideGaps &&
-          (self.collapsed.length > 0 ||
-            self.collapsedLeaves.length > 0 ||
-            self.allowedGappyness < 100)
+          (self.collapsed.length > 0 || self.allowedGappyness < 100)
         )
       },
       /**
@@ -633,9 +587,6 @@ function stateModelFactory() {
       get actuallyShowDomains() {
         return self.showDomains && !!self.interProAnnotations
       },
-      /**
-       * #getter
-       */
       get viewInitialized() {
         return self.volatileWidth !== undefined
       },
@@ -668,7 +619,7 @@ function stateModelFactory() {
        * #getter
        */
       get header() {
-        return this.MSA?.getHeader() || {}
+        return (this.MSA?.getHeader() || {}) as Record<string, unknown>
       },
 
       /**
@@ -683,15 +634,9 @@ function stateModelFactory() {
       get noTree() {
         return !!this.tree.noTree
       },
-      /**
-       * #getter
-       */
       get noDomains() {
         return !self.interProAnnotations
       },
-      /**
-       * #getter
-       */
       menuItems() {
         return []
       },
@@ -706,20 +651,9 @@ function stateModelFactory() {
        */
       get MSA() {
         const text = self.data.msa
-        if (text) {
-          if (stockholmSniff(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')) {
-            return new EmfMSA(text)
-          } else {
-            return new ClustalMSA(text)
-          }
-        }
-        return null
+        // uses parseMSA so the named MSAParserType return type is portable
+        // to downstream consumers (avoids TS2883 with default exports)
+        return text ? parseMSA(text, self.currentAlignment) : null
       },
       /**
        * #getter
@@ -734,22 +668,20 @@ function stateModelFactory() {
       get tree(): NodeWithIds {
         const text = self.data.tree
 
-        return reparseTree(
-          text
-            ? generateNodeIds(
-                text.startsWith('BioTreeContainer')
-                  ? flatToTree(parseAsn1(text))
-                  : parseNewick(
-                      text.startsWith('SEQ') ? parseEmfTree(text).tree : text,
-                    ),
-              )
-            : this.MSA?.getTree() || {
-                noTree: true,
-                children: [],
-                id: 'empty',
-                name: 'empty',
-              },
-        )
+        return text
+          ? generateNodeIds(
+              text.startsWith('BioTreeContainer')
+                ? flatToTree(parseAsn1(text))
+                : parseNewick(
+                    text.startsWith('SEQ') ? parseEmfTree(text).tree : text,
+                  ),
+            )
+          : this.MSA?.getTree() || {
+              noTree: true,
+              children: [],
+              id: 'empty',
+              name: 'empty',
+            }
       },
 
       /**
@@ -798,25 +730,29 @@ function stateModelFactory() {
        */
       get root() {
         let hier = hierarchy(this.tree, d => d.children)
-          // todo: investigate whether needed, typescript says children always true
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          .sum(d => (d.children ? 0 : 1))
-          // eslint-disable-next-line unicorn/no-array-sort
-          .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
+        hierarchySum(hier, d => (d.children.length > 0 ? 0 : 1))
+        sort(hier, (a, b) => (a.data.length ?? 1) - (b.data.length ?? 1))
 
         if (self.showOnly) {
-          const res = hier.find(n => n.data.id === self.showOnly)
+          const res = find(hier, n => n.data.id === self.showOnly)
           if (res) {
             hier = res
           }
         }
 
-        ;[...self.collapsed, ...self.collapsedLeaves]
-          .map(collapsedId => hier.find(node => node.data.id === collapsedId))
-          .filter(notEmpty)
-          .forEach(node => {
+        for (const collapsedId of self.collapsed) {
+          const node = find(hier, n => n.data.id === collapsedId)
+          if (!node) {
+            continue
+          }
+          if (node.children) {
             collapse(node)
-          })
+          } else if (node.parent?.children) {
+            node.parent.children = node.parent.children.filter(
+              c => c.data.id !== collapsedId,
+            )
+          }
+        }
 
         return hier
       },
@@ -1252,11 +1188,9 @@ function stateModelFactory() {
        */
       get hierarchy(): HierarchyNode<NodeWithIdsAndLength> {
         const r = this.root
-        const clust = cluster<NodeWithIds>()
-          .size([this.totalHeight, self.treeWidth])
-          .separation(() => 1)
-        clust(r)
-        setBrLength(r, (r.data.length = 0), self.treeWidth / maxLength(r))
+        clusterLayout(r, this.totalHeight, self.treeWidth)
+        r.data.length = 0
+        setBrLength(r, 0, self.treeWidth / maxLength(r))
         return r as HierarchyNode<NodeWithIdsAndLength>
       },
 
@@ -1264,21 +1198,21 @@ function stateModelFactory() {
        * #getter
        */
       get totalHeight() {
-        return this.root.leaves().length * self.rowHeight
+        return leaves(this.root).length * self.rowHeight
       },
 
       /**
        * #getter
        */
       get leaves() {
-        return this.hierarchy.leaves()
+        return leaves(this.hierarchy)
       },
 
       /**
        * #getter
        */
       get allBranchesLength0() {
-        return this.hierarchy.links().every(s => !s.source.data.length)
+        return links(this.hierarchy).every(s => !s.source.data.length)
       },
 
       /**
@@ -1333,13 +1267,9 @@ function stateModelFactory() {
        * #getter
        */
       get blocks2d() {
-        const ret = []
-        for (const by of self.blocksY) {
-          for (const bx of self.blocksX) {
-            ret.push([bx, by] as const)
-          }
-        }
-        return ret
+        return self.blocksY.flatMap(by =>
+          self.blocksX.map(bx => [bx, by] as const),
+        )
       },
 
       /**
@@ -1447,15 +1377,19 @@ function stateModelFactory() {
       /**
        * #action
        */
+      doScrollY(deltaY: number) {
+        self.scrollY = clamp(self.scrollY + deltaY, -self.totalHeight + 10, 0)
+      },
+
       setInterProAnnotations(data: Record<string, InterProScanResults>) {
         self.interProAnnotations = data
       },
 
-      /**
-       * #action
-       */
-      doScrollY(deltaY: number) {
-        self.scrollY = clamp(self.scrollY + deltaY, -self.totalHeight + 10, 0)
+      applyGFFText(gffText: string) {
+        const gffRecords = parseGFF(gffText)
+        const interProResults = gffToInterProResults(gffRecords)
+        self.interProAnnotations = interProResults
+        self.setShowDomains(true)
       },
 
       /**
@@ -1494,20 +1428,21 @@ function stateModelFactory() {
        * #getter
        */
       get labelsWidth() {
-        let x = 0
         const { rowHeight, leaves, treeMetadata, fontSize } = self
-        if (rowHeight > 5) {
-          for (const node of leaves) {
-            x = Math.max(
+        if (rowHeight <= 5) {
+          return 0
+        }
+        return leaves.reduce(
+          (max, node) =>
+            Math.max(
+              max,
               measureTextCanvas(
                 treeMetadata[node.data.name]?.genome || node.data.name,
                 fontSize,
               ),
-              x,
-            )
-          }
-        }
-        return x
+            ),
+          0,
+        )
       },
 
       /**
@@ -1529,18 +1464,22 @@ function stateModelFactory() {
        */
       get adapterTrackModels(): BasicTrack[] {
         const { rowHeight, MSA, hideGapsEffective, blanks } = self
-        return (
-          MSA?.tracks
-            .filter(t => t.data)
-            .map(t => ({
-              model: {
-                ...t,
-                data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
-                height: rowHeight,
-              } as TextTrackModel,
-              ReactComponent: TextTrack,
-            })) || []
-        )
+        const tracks = (MSA?.tracks ?? []) as (TextTrackModel & {
+          data?: string
+        })[]
+        return tracks
+          .filter(t => !!t.data)
+          .map(t => ({
+            model: {
+              ...t,
+              data:
+                hideGapsEffective && t.data
+                  ? skipBlanks(blanks, t.data)
+                  : t.data,
+              height: rowHeight,
+            },
+            ReactComponent: TextTrack,
+          }))
       },
 
       /**
@@ -1718,55 +1657,38 @@ function stateModelFactory() {
       get totalTrackAreaHeight() {
         return sum(self.turnedOnTracks.map(r => r.model.height))
       },
-      /**
-       * #getter
-       */
       get tidyInterProAnnotationTypes() {
-        const types = new Map<string, Accession>()
-        for (const annot of this.tidyInterProAnnotations) {
-          types.set(annot.accession, annot)
-        }
-        return types
+        return new Map(
+          this.tidyInterProAnnotations.map(annot => [annot.accession, annot]),
+        )
       },
-      /**
-       * #getter
-       */
       get tidyInterProAnnotations() {
-        const ret = []
         const { interProAnnotations } = self
-        if (interProAnnotations) {
-          for (const [id, val] of Object.entries(interProAnnotations)) {
-            for (const { signature, locations } of val.matches) {
-              const { entry } = signature
-              if (entry) {
-                const { name, accession, description } = entry
-                for (const { start, end } of locations) {
-                  ret.push({
+        if (!interProAnnotations) {
+          return []
+        }
+        return Object.entries(interProAnnotations)
+          .flatMap(([id, val]) =>
+            val.matches.flatMap(({ signature, locations }) =>
+              signature.entry
+                ? locations.map(({ start, end }) => ({
                     id,
-                    name,
-                    accession,
-                    description,
+                    name: signature.entry!.name,
+                    accession: signature.entry!.accession,
+                    description: signature.entry!.description,
                     start,
                     end,
-                  })
-                }
-              }
-            }
-          }
-        }
-        return ret.toSorted((a, b) => len(b) - len(a))
+                  }))
+                : [],
+            ),
+          )
+          .toSorted((a, b) => len(b) - len(a))
       },
-      /**
-       * #getter
-       */
       get tidyFilteredInterProAnnotations() {
         return this.tidyInterProAnnotations.filter(r =>
           self.featureFilters.get(r.accession),
         )
       },
-      /**
-       * #getter
-       */
       get tidyFilteredGatheredInterProAnnotations() {
         return groupBy(this.tidyFilteredInterProAnnotations, r => r.id)
       },
@@ -1786,15 +1708,9 @@ function stateModelFactory() {
       get verticalScrollbarWidth() {
         return self.showVerticalScrollbar ? 20 : 0
       },
-      /**
-       * #getter
-       */
       get fillPalette() {
         return createPaletteMap([...self.tidyInterProAnnotationTypes.keys()])
       },
-      /**
-       * #getter
-       */
       get strokePalette() {
         return Object.fromEntries(
           Object.entries(this.fillPalette).map(([key, val]) => [
@@ -1842,6 +1758,9 @@ function stateModelFactory() {
         self.setCurrentAlignment(0)
         self.setTreeFilehandle(undefined)
         self.setMSAFilehandle(undefined)
+        self.setGFFFilehandle(undefined)
+        self.setInterProAnnotations({})
+        self.setShowDomains(false)
       },
       /**
        * #action
@@ -1865,21 +1784,16 @@ function stateModelFactory() {
         self.nref++
       },
 
-      /**
-       * #action
-       */
       initFilter(arg: string) {
         const ret = self.featureFilters.get(arg)
         if (ret === undefined) {
           self.featureFilters.set(arg, true)
         }
       },
-      /**
-       * #action
-       */
       setFilter(arg: string, flag: boolean) {
         self.featureFilters.set(arg, flag)
       },
+
       /**
        * #action
        */
@@ -1914,14 +1828,6 @@ function stateModelFactory() {
           }),
         )
 
-        // autorun saves local settings
-        addDisposer(
-          self,
-          autorun(() => {
-            localStorageSetBoolean(showZoomStarKey, self.showZoomStar)
-          }),
-        )
-
         // autorun opens treeFilehandle
         addDisposer(
           self,
@@ -1966,6 +1872,22 @@ function stateModelFactory() {
           }),
         )
 
+        // autorun parses inline gff text from data.gff
+        addDisposer(
+          self,
+          autorun(() => {
+            const gffText = self.data.gff
+            if (gffText) {
+              try {
+                self.applyGFFText(gffText)
+              } catch (e) {
+                console.error(e)
+                self.setError(e)
+              }
+            }
+          }),
+        )
+
         // autorun opens gffFilehandle for InterProScan domains
         addDisposer(
           self,
@@ -1976,10 +1898,7 @@ function stateModelFactory() {
                 const gffText = await fetchAndMaybeUnzipText(
                   openLocation(gffFilehandle),
                 )
-                const gffRecords = parseGFF(gffText)
-                const interProResults = gffToInterProResults(gffRecords)
-                self.setInterProAnnotations(interProResults)
-                self.setShowDomains(true)
+                self.applyGFFText(gffText)
                 if (gffFilehandle.locationType === 'BlobLocation') {
                   self.setGFFFilehandle(undefined)
                 }
@@ -2040,15 +1959,13 @@ function stateModelFactory() {
         // autorun synchronizes treeWidth with treeAreaWidth
         addDisposer(
           self,
-          autorun(async () => {
-            if (self.treeWidthMatchesArea) {
-              self.setTreeWidth(
-                Math.max(
-                  50,
-                  self.treeAreaWidth - self.labelsWidth - 10 - self.marginLeft,
-                ),
-              )
-            }
+          autorun(() => {
+            self.setTreeWidth(
+              Math.max(
+                50,
+                self.treeAreaWidth - self.labelsWidth - 10 - self.marginLeft,
+              ),
+            )
           }),
         )
       },
@@ -2061,7 +1978,6 @@ function stateModelFactory() {
         showDomains,
         hideGaps,
         allowedGappyness,
-        contrastLettering,
         subFeatureRows,
         drawMsaLetters,
         height,
@@ -2071,7 +1987,6 @@ function stateModelFactory() {
         colWidth,
         currentAlignment,
         collapsed,
-        collapsedLeaves,
         showOnly,
         turnedOffTracks,
         featureFilters,
@@ -2084,7 +1999,6 @@ function stateModelFactory() {
         labelsAlignRight,
         treeAreaWidth,
         treeWidth,
-        treeWidthMatchesArea,
         showBranchLen,
         drawTree,
         drawNodeBubbles,
@@ -2092,8 +2006,35 @@ function stateModelFactory() {
         ...rest
       } = snap
 
-      // remove the MSA/tree data from the tree if the filehandle available in
-      // which case it can be reloaded on refresh
+      const defaults: Record<string, unknown> = {
+        showDomains: defaultShowDomains,
+        hideGaps: defaultHideGaps,
+        allowedGappyness: defaultAllowedGappyness,
+        subFeatureRows: defaultSubFeatureRows,
+        drawMsaLetters: defaultDrawMsaLetters,
+        height: defaultHeight,
+        rowHeight: defaultRowHeight,
+        scrollY: defaultScrollY,
+        scrollX: defaultScrollX,
+        colWidth: defaultColWidth,
+        currentAlignment: defaultCurrentAlignment,
+        bgColor: defaultBgColor,
+        colorSchemeName: defaultColorSchemeName,
+        drawLabels: defaultDrawLabels,
+        labelsAlignRight: defaultLabelsAlignRight,
+        treeAreaWidth: defaultTreeAreaWidth,
+        treeWidth: defaultTreeWidth,
+        showBranchLen: defaultShowBranchLen,
+        drawTree: defaultDrawTree,
+        drawNodeBubbles: defaultDrawNodeBubbles,
+      }
+
+      const nonDefaults = Object.fromEntries(
+        Object.entries(defaults)
+          .filter(([key, def]) => snap[key as keyof typeof snap] !== def)
+          .map(([key]) => [key, snap[key as keyof typeof snap]]),
+      )
+
       return {
         ...rest,
         data: {
@@ -2101,29 +2042,9 @@ function stateModelFactory() {
           ...(result.msaFilehandle ? {} : { msa }),
           ...(result.treeMetadataFilehandle ? {} : { treeMetadata }),
         },
-        // 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 }
-          : {}),
+        ...nonDefaults,
         // 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
@@ -2134,26 +2055,6 @@ function stateModelFactory() {
           ? { 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
     })
 }