react-msaview 6.0.0 → 6.1.1

package/dist/model/DataModel.js

@@ -52,15 +52,13 @@ export function DataModelF() {
             self.gff = gff;
         },
     }))
-        .postProcessSnapshot(snap => {
-        const { tree, msa, treeMetadata, gff } = snap;
-        const max = 50_000;
-        return {
-            tree: tree && tree.length > max ? undefined : tree,
-            msa: msa && msa.length > max ? undefined : msa,
-            treeMetadata: treeMetadata && treeMetadata.length > max ? undefined : treeMetadata,
-            gff: gff && gff.length > max ? undefined : gff,
-        };
-    });
+        .postProcessSnapshot(snap => 
+    // a large document is dropped from the snapshot rather than inlined
+    // into a session or a shared URL, and every field here holds one, so
+    // the rule is the same for all of them
+    Object.fromEntries(Object.entries(snap).map(([key, text]) => [
+        key,
+        text && text.length > 50_000 ? undefined : text,
+    ])));
 }
 //# sourceMappingURL=DataModel.js.map

package/dist/model/DataModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataModel.js","sourceRoot":"","sources":["../../src/model/DataModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD;;;;;;GAMG;AACH,MAAM,UAAU,UAAU;IACxB,OAAO,KAAK;SACT,KAAK,CAAC;QACL;;WAEG;QACH,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QAC/B;;WAEG;QACH,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QAC9B;;WAEG;QACH,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QACvC;;WAEG;QACH,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;KAC/B,CAAC;SACD,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChB;;WAEG;QACH,OAAO,CAAC,IAAa;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAClB,CAAC;QACD;;WAEG;QACH,MAAM,CAAC,GAAY;YACjB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QAChB,CAAC;QACD;;WAEG;QACH,eAAe,CAAC,YAAqB;YACnC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;QAClC,CAAC;QACD;;WAEG;QACH,MAAM,CAAC,GAAY;YACjB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QAChB,CAAC;KACF,CAAC,CAAC;SACF,mBAAmB,CAAC,IAAI,CAAC,EAAE;QAC1B,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;QAC7C,MAAM,GAAG,GAAG,MAAM,CAAA;QAClB,OAAO;YACL,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;YAClD,GAAG,EAAE,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG;YAC9C,YAAY,EACV,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY;YACtE,GAAG,EAAE,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG;SAC/C,CAAA;IACH,CAAC,CAAC,CAAA;AACN,CAAC"}
+{"version":3,"file":"DataModel.js","sourceRoot":"","sources":["../../src/model/DataModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD;;;;;;GAMG;AACH,MAAM,UAAU,UAAU;IACxB,OAAO,KAAK;SACT,KAAK,CAAC;QACL;;WAEG;QACH,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QAC/B;;WAEG;QACH,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QAC9B;;WAEG;QACH,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QACvC;;WAEG;QACH,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;KAC/B,CAAC;SACD,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChB;;WAEG;QACH,OAAO,CAAC,IAAa;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAClB,CAAC;QACD;;WAEG;QACH,MAAM,CAAC,GAAY;YACjB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QAChB,CAAC;QACD;;WAEG;QACH,eAAe,CAAC,YAAqB;YACnC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;QAClC,CAAC;QACD;;WAEG;QACH,MAAM,CAAC,GAAY;YACjB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QAChB,CAAC;KACF,CAAC,CAAC;SACF,mBAAmB,CAAC,IAAI,CAAC,EAAE;IAC1B,oEAAoE;IACpE,qEAAqE;IACrE,uCAAuC;IACvC,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG;QACH,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;KAChD,CAAC,CACH,CACF,CAAA;AACL,CAAC"}

package/dist/model/treeModel.d.ts

@@ -36,7 +36,7 @@ export declare function TreeModelF(): import("@jbrowse/mobx-state-tree").IModelT
     drawTree: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     /**
      * #property
-     * draw clickable node bubbles on the tree
+     * draw node bubbles on the tree; the branches stay clickable either way
      */
     drawNodeBubbles: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     /**

package/dist/model/treeModel.js

@@ -41,7 +41,7 @@ export function TreeModelF() {
         drawTree: stripDefault(types.boolean, defaultDrawTree),
         /**
          * #property
-         * draw clickable node bubbles on the tree
+         * draw node bubbles on the tree; the branches stay clickable either way
          */
         drawNodeBubbles: stripDefault(types.boolean, defaultDrawNodeBubbles),
         /**

package/dist/model.d.ts

@@ -518,7 +518,10 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
     showOnly: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     /**
      * #property
-     * turned off tracks
+     * the user's explicit show/hide choice per track id, keyed by id with
+     * the value meaning "off". A track the user has never touched is absent
+     * and falls back to its own default (see `defaultOffTracks`), so a
+     * hidden-by-default track adds nothing to the shared URL.
      */
     turnedOffTracks: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IMapType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>, [undefined]>;
     /**
@@ -537,10 +540,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         setTreeMetadata(treeMetadata?: string): void;
         setGFF(gff?: string): void;
     }, import("@jbrowse/mobx-state-tree")._NotCustomized, {
-        tree: string | undefined;
-        msa: string | undefined;
-        treeMetadata: string | undefined;
-        gff: string | undefined;
+        [k: string]: string | undefined;
     }>, [undefined]>;
     /**
      * #property
@@ -664,6 +664,13 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
      * #volatile
      */
     conservationTrackHeight: number;
+    /**
+     * #volatile
+     * taller than the conservation track by default: the logo spends its
+     * height on stacked glyphs, and a 40px stack of four residues leaves each
+     * one too short to identify
+     */
+    sequenceLogoTrackHeight: number;
     /**
      * #volatile
      */
@@ -1013,6 +1020,13 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
      * Returns values 0-1 where 1 = fully conserved, 0 = no conservation.
      */
     readonly conservation: number[];
+    /**
+     * #getter
+     * The information content of a fully conserved column, in bits, which
+     * depends on the alphabet. Both the entropy ceiling `conservation`
+     * normalizes against and the y-axis ceiling of the sequence logo track.
+     */
+    readonly alphabetMaxBits: number;
     /**
      * #getter
      * Per-column conservation of physicochemical property class (amino acids
@@ -1070,6 +1084,12 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
      * #getter
      */
     readonly blocksY: number[];
+    /**
+     * #getter
+     * height of the alignment viewport, px. The same subtraction as
+     * msaAreaHeight, which is defined later in the views chain
+     */
+    readonly visibleMsaHeight: number;
 } & {
     /**
      * #getter
@@ -1086,8 +1106,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
     /**
      * #getter
      * most-negative allowed scrollY, keeping the last row in view rather than
-     * letting the whole alignment scroll off the top. visible MSA height is
-     * computed inline here because msaAreaHeight is defined later in the chain.
+     * letting the whole alignment scroll off the top.
      */
     readonly maxScrollY: number;
     /**
@@ -1206,6 +1225,12 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
      * #getter
      */
     readonly labelWidthMap: Map<string, number>;
+    /**
+     * #getter
+     * factor turning a labelWidthMap entry into its width at the current
+     * font size
+     */
+    readonly labelWidthScale: number;
     readonly labelsWidth: number;
     /**
      * #getter
@@ -1446,6 +1471,10 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
      * #action
      */
     setConservationTrackHeight(arg: number): void;
+    /**
+     * #action
+     */
+    setSequenceLogoTrackHeight(arg: number): void;
     /**
      * #action
      */

package/dist/model.js

@@ -9,9 +9,8 @@ import { calculateBlocks } from './calculateBlocks.js';
 import { clustalXColumnColors } from './clustalX.js';
 import colorSchemes from './colorSchemes.js';
 import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.js';
-import ConservationTrack from './components/ConservationTrack.js';
-import TextTrack from './components/TextTrack.js';
-import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, maxCellSize, minColWidth, minRowHeight, segmentFeatureTypes, segmentShades, } from './constants.js';
+import TrackBlocks from './components/tracks/TrackBlocks.js';
+import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, labelReferenceFontSize, maxCellSize, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, segmentFeatureTypes, segmentShades, } from './constants.js';
 import { createPaletteMap } from './createPaletteMap.js';
 import { fetchTextWithProgress, isAbortError } from './fetchUtils.js';
 import { flatToTree } from './flatToTree.js';
@@ -26,6 +25,7 @@ import { parseAsn1 } from './parseAsn1.js';
 import { calculatePropertyConservation } from './propertyConservation.js';
 import { globalColToVisibleCol, visibleColToGlobalCol, visibleColToSeqPosForRow, visibleColsBefore, } from './rowCoordinateCalculations.js';
 import { buildSeqPosIndex } from './seqPosToGlobalCol.js';
+import { maxBitsFor } from './sequenceLogo.js';
 import { stripDefault } from './stripDefault.js';
 import { computeRowInsertions, len, skipBlanks, transform } from './util.js';
 import { saveAs } from './vendor/fileSaver.js';
@@ -35,6 +35,17 @@ function parseTreeText(text) {
     }
     return parseNewick(text.startsWith('SEQ') ? parseEmfTree(text).tree : text);
 }
+// Tracks that start hidden. The sequence logo answers a narrower question than
+// conservation does and costs three times the vertical space, so it waits to be
+// asked for.
+const defaultOffTracks = new Set(['sequence-logo']);
+// `turnedOffTracks` records the user's explicit choices only: an id is absent
+// until they touch that track, and then its value is whether the track is OFF.
+// Reading the default through this is what lets a track ship hidden without
+// writing an entry into every snapshot and shared URL.
+function trackIsOff(turnedOffTracks, id) {
+    return turnedOffTracks.get(id) ?? defaultOffTracks.has(id);
+}
 /**
  * #stateModel MsaView
  *
@@ -165,7 +176,10 @@ function stateModelFactory() {
         showOnly: types.maybe(types.string),
         /**
          * #property
-         * turned off tracks
+         * the user's explicit show/hide choice per track id, keyed by id with
+         * the value meaning "off". A track the user has never touched is absent
+         * and falls back to its own default (see `defaultOffTracks`), so a
+         * hidden-by-default track adds nothing to the shared URL.
          */
         turnedOffTracks: stripDefault(types.map(types.boolean), {}),
         /**
@@ -272,6 +286,13 @@ function stateModelFactory() {
          * #volatile
          */
         conservationTrackHeight: 40,
+        /**
+         * #volatile
+         * taller than the conservation track by default: the logo spends its
+         * height on stacked glyphs, and a 40px stack of four residues leaves each
+         * one too short to identify
+         */
+        sequenceLogoTrackHeight: 80,
         /**
          * #volatile
          */
@@ -877,26 +898,25 @@ function stateModelFactory() {
          * Returns values 0-1 where 1 = fully conserved, 0 = no conservation.
          */
         get conservation() {
-            const { colStats, sequenceType } = this;
-            const alphabetSize = sequenceType === 'amino' ? 20 : 4;
-            const maxEntropy = Math.log2(alphabetSize);
+            const { colStats, alphabetMaxBits } = this;
             return Array.from({ length: colStats.numColumns }, (_, col) => {
                 const total = colStats.total(col);
                 const gapCount = colStats.gapCount(col);
-                const nonGapTotal = total - gapCount;
-                let score = 0;
-                if (nonGapTotal > 0) {
-                    let entropy = 0;
-                    colStats.forEachResidue(col, (_slot, count) => {
-                        const freq = count / nonGapTotal;
-                        entropy -= freq * Math.log2(freq);
-                    });
-                    score =
-                        Math.max(0, 1 - entropy / maxEntropy) * (1 - gapCount / total);
-                }
-                return score;
+                return total > gapCount
+                    ? Math.max(0, 1 - colStats.entropy(col) / alphabetMaxBits) *
+                        (1 - gapCount / total)
+                    : 0;
             });
         },
+        /**
+         * #getter
+         * The information content of a fully conserved column, in bits, which
+         * depends on the alphabet. Both the entropy ceiling `conservation`
+         * normalizes against and the y-axis ceiling of the sequence logo track.
+         */
+        get alphabetMaxBits() {
+            return maxBitsFor(this.sequenceType);
+        },
         /**
          * #getter
          * Per-column conservation of physicochemical property class (amino acids
@@ -1001,12 +1021,22 @@ function stateModelFactory() {
          */
         get blocksY() {
             return calculateBlocks({
-                viewportSize: self.height,
+                viewportSize: this.visibleMsaHeight,
                 viewportPos: -self.scrollY,
                 blockSize: self.blockSize,
                 mapSize: self.totalHeight,
             });
         },
+        /**
+         * #getter
+         * height of the alignment viewport, px. The same subtraction as
+         * msaAreaHeight, which is defined later in the views chain
+         */
+        get visibleMsaHeight() {
+            return (self.height -
+                self.headerHeight -
+                (self.msaAreaWidth < self.totalWidth ? self.minimapHeight : 0));
+        },
     }))
         .views(self => ({
         /**
@@ -1030,28 +1060,25 @@ function stateModelFactory() {
         /**
          * #getter
          * most-negative allowed scrollY, keeping the last row in view rather than
-         * letting the whole alignment scroll off the top. visible MSA height is
-         * computed inline here because msaAreaHeight is defined later in the chain.
+         * letting the whole alignment scroll off the top.
          */
         get maxScrollY() {
-            const visibleHeight = self.height -
-                self.headerHeight -
-                (self.msaAreaWidth < self.totalWidth ? self.minimapHeight : 0);
-            return Math.min(-self.totalHeight + visibleHeight, 0);
+            return Math.min(-self.totalHeight + self.visibleMsaHeight, 0);
         },
         /**
          * #getter
          */
         get showMsaLetters() {
             return (self.drawMsaLetters &&
-                self.rowHeight >= 5 &&
+                self.rowHeight >= minLetterRowHeight &&
+                self.colWidth >= minLetterColWidth &&
                 self.colWidth > self.rowHeight / 2);
         },
         /**
          * #getter
          */
         get showTreeText() {
-            return self.drawLabels && self.rowHeight >= 5;
+            return self.drawLabels && self.rowHeight >= minLetterRowHeight;
         },
     }))
         .actions(self => ({
@@ -1232,12 +1259,9 @@ function stateModelFactory() {
          * #action
          */
         toggleTrack(id) {
-            if (self.turnedOffTracks.has(id)) {
-                self.turnedOffTracks.delete(id);
-            }
-            else {
-                self.turnedOffTracks.set(id, true);
-            }
+            // the stored value is "is off", so the current shown state is exactly
+            // what the flipped entry should hold
+            self.turnedOffTracks.set(id, !trackIsOff(self.turnedOffTracks, id));
         },
         /**
          * #action
@@ -1251,10 +1275,13 @@ function stateModelFactory() {
          * #getter
          */
         get labelWidthMap() {
-            const { showTreeText, leaves, treeMetadata, fontSize } = self;
+            const { showTreeText, leaves, treeMetadata } = self;
             // gated on the same condition the renderer draws labels under, so the
             // gutter labelsWidth reserves and the labels actually drawn cannot
-            // disagree -- and so turning labels off hands their space to the tree
+            // disagree -- and so turning labels off hands their space to the tree.
+            // Measured at a fixed reference size and scaled by labelWidthScale:
+            // re-measuring every leaf on every vertical-zoom frame cost ~200ms on a
+            // 50k-leaf tree
             return showTreeText
                 ? new Map(leaves.map(node => {
                     const { name } = node.data;
@@ -1262,10 +1289,21 @@ function stateModelFactory() {
                     // to the row name, and measuring '' would size the gutter (and
                     // the label's click target) to nothing
                     const displayName = treeMetadata[name]?.genome || name;
-                    return [name, measureTextCanvas(displayName, fontSize)];
+                    return [
+                        name,
+                        measureTextCanvas(displayName, labelReferenceFontSize),
+                    ];
                 }))
                 : new Map();
         },
+        /**
+         * #getter
+         * factor turning a labelWidthMap entry into its width at the current
+         * font size
+         */
+        get labelWidthScale() {
+            return self.fontSize / labelReferenceFontSize;
+        },
         get labelsWidth() {
             // a loop, not Math.max(...widths.values()): spreading a map of every
             // leaf passes one argument per row, and the argument limit is somewhere
@@ -1278,7 +1316,7 @@ function stateModelFactory() {
                     max = width;
                 }
             }
-            return max;
+            return max * this.labelWidthScale;
         },
         /**
          * #getter
@@ -1303,10 +1341,11 @@ function stateModelFactory() {
                 .map(t => ({
                 model: {
                     ...t,
+                    kind: 'text',
                     data: hideGapsEffective ? skipBlanks(blanks, t.data) : t.data,
                     height: rowHeight,
                 },
-                ReactComponent: TextTrack,
+                ReactComponent: TrackBlocks,
             }));
         },
         /**
@@ -1314,34 +1353,41 @@ function stateModelFactory() {
          */
         get tracks() {
             const conservationTrack = {
-                model: {
-                    id: 'conservation',
-                    name: 'Conservation',
-                    height: self.conservationTrackHeight,
-                    barColor: 'gray',
-                },
-                ReactComponent: ConservationTrack,
+                id: 'conservation',
+                name: 'Conservation',
+                kind: 'bar',
+                height: self.conservationTrackHeight,
+                barColor: 'gray',
             };
             const propertyConservationTrack = {
-                model: {
-                    id: 'property-conservation',
-                    name: 'Property conservation',
-                    height: self.conservationTrackHeight,
-                    barColor: '#6a51a3',
-                },
-                ReactComponent: ConservationTrack,
+                id: 'property-conservation',
+                name: 'Property conservation',
+                kind: 'bar',
+                height: self.conservationTrackHeight,
+                barColor: '#6a51a3',
+            };
+            const sequenceLogoTrack = {
+                id: 'sequence-logo',
+                name: 'Sequence logo',
+                kind: 'logo',
+                height: self.sequenceLogoTrackHeight,
             };
             return [
                 ...this.adapterTrackModels,
-                conservationTrack,
-                ...(self.sequenceType === 'amino' ? [propertyConservationTrack] : []),
+                ...[
+                    conservationTrack,
+                    ...(self.sequenceType === 'amino'
+                        ? [propertyConservationTrack]
+                        : []),
+                    sequenceLogoTrack,
+                ].map(model => ({ model, ReactComponent: TrackBlocks })),
             ];
         },
         /**
          * #getter
          */
         get turnedOnTracks() {
-            return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id));
+            return this.tracks.filter(f => !trackIsOff(self.turnedOffTracks, f.model.id));
         },
         /**
          * #getter
@@ -1575,9 +1621,9 @@ function stateModelFactory() {
          * needs to keep residues readable on top of the boxes.
          */
         get domainBands() {
+            const { blanks } = self;
             const bands = new Map();
             for (const [name, annotations] of Object.entries(self.annotationsByRow)) {
-                const { blanks } = self;
                 const rowBands = annotations
                     .toSorted((a, b) => len(b) - len(a))
                     .map(annotation => {
@@ -1687,8 +1733,11 @@ function stateModelFactory() {
                 return undefined;
             }
             const { colStats } = self;
+            if (mouseCol >= colStats.numColumns) {
+                return undefined;
+            }
             const total = colStats.total(mouseCol);
-            if (mouseCol >= colStats.numColumns || !total) {
+            if (!total) {
                 return undefined;
             }
             const gaps = colStats.gapCount(mouseCol);
@@ -1732,6 +1781,12 @@ function stateModelFactory() {
         setConservationTrackHeight(arg) {
             self.conservationTrackHeight = arg;
         },
+        /**
+         * #action
+         */
+        setSequenceLogoTrackHeight(arg) {
+            self.sequenceLogoTrackHeight = arg;
+        },
         /**
          * #action
          */