@datagrok-libraries/bio 5.53.2 → 5.53.3

package/src/utils/sequence-position-scroller.js

@@ -1,3 +1,5 @@
+/* eslint-disable new-cap */
+/* eslint-disable valid-jsdoc */
 /* eslint-disable max-len */
 /**
  * MSAHeader.ts - Interactive MSA Header Component
@@ -5,15 +7,499 @@
  * with position markers, slider navigation, and position selection.
  */
 import * as ui from 'datagrok-api/ui';
-export class MSAScrollingHeader {
+import * as DG from 'datagrok-api/dg';
+// Layout Constants
+// const LAYOUT_CONSTANTS = {
+//   TITLE_HEIGHT: 16,
+//   TRACK_GAP: 4,
+//   DOTTED_CELL_HEIGHT: 30,
+//   SLIDER_HEIGHT: 8,
+//   TOP_PADDING: 5,
+//   DEFAULT_TRACK_HEIGHT: 45,
+//   MIN_TRACK_HEIGHT: 35,
+//   TRACK_SELECTOR_SIZE: 20,
+//   TRACK_SELECTOR_MARGIN: 5
+// } as const;
+// WebLogo Constants
+const WEBLOGO_CONSTANTS = {
+    PADDING: 2,
+    MIN_LETTER_HEIGHT: 4,
+    SEPARATOR_WIDTH: 1,
+    MIN_GRID_COLUMNS: 45
+};
+// Typography Constants
+const FONTS = {
+    TITLE: 'bold 10px Roboto, Roboto Local',
+    COLUMN_TITLE: 'bold 13px Roboto, Roboto Local',
+    POSITION_LABELS: '12px monospace',
+    CONSERVATION_TEXT: '9px monospace',
+    TOOLTIP_MAIN: '13px',
+    TOOLTIP_SECONDARY: '12px',
+    TOOLTIP_SMALL: '11px',
+};
+// Color Constants
+const COLORS = {
+    TITLE_TEXT: '#333333',
+    SELECTION_HIGHLIGHT: 'rgba(60, 177, 115, 0.1)',
+    SELECTION_STRONG: 'rgba(60, 177, 115, 0.2)',
+    SELECTION_CONNECTION: 'rgba(60, 177, 115, 0.4)',
+    BACKGROUND_LIGHT: 'rgba(240, 240, 240, 0.5)',
+    BORDER_LIGHT: 'rgba(100, 100, 100, 0.3)',
+    SEPARATOR_LIGHT: 'rgba(255, 255, 255, 0.4)',
+    HOVER_SHADOW: 'rgba(255, 255, 255, 0.8)',
+    SLIDER_DEFAULT: 'rgba(220, 220, 220, 0.4)',
+    SLIDER_WINDOW: 'rgba(150, 150, 150, 0.5)',
+    POSITION_DOT: '#999999',
+    SLIDER_MARKER: '#3CB173',
+};
+// Tooltip Style Template
+const TOOLTIP_STYLE = {
+    color: '#4A4A49',
+    background: '#FFFBCC',
+    borderRadius: '3px',
+    padding: '8px',
+    fontSize: '12px',
+    fontFamily: 'Roboto, Roboto Local',
+    minWidth: '120px'
+};
+/**
+ * Base class for all MSA header tracks
+ */
+export class MSAHeaderTrack {
+    constructor(height = LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT, minHeight = LAYOUT_CONSTANTS.MIN_TRACK_HEIGHT, title = '') {
+        this.ctx = null;
+        this.visible = true;
+        this.title = '';
+        this.tooltipEnabled = false;
+        this.tooltipContent = null;
+        this.height = height;
+        this.defaultHeight = height;
+        this.minHeight = minHeight;
+        this.title = title;
+    }
+    /**
+     * Initialize the track with a canvas context
+     */
+    init(ctx) {
+        this.ctx = ctx;
+    }
+    getMonomerAt(x, y, position) {
+        return null;
+    }
+    enableTooltip(enabled) {
+        this.tooltipEnabled = enabled;
+    }
+    setTooltipContentGenerator(contentGenerator) {
+        this.tooltipContent = contentGenerator;
+    }
+    getTooltipContent(position) {
+        if (!this.tooltipEnabled || !this.tooltipContent)
+            return null;
+        const positionData = this.getPositionData(position);
+        return this.tooltipContent(position, positionData);
+    }
+    /**
+     * Get data for a specific position (to be implemented by subclasses)
+     */
+    getPositionData(position) {
+        return null;
+    }
+    setVisible(visible) {
+        this.visible = visible;
+    }
+    getHeight() {
+        return this.visible ? this.height : 0;
+    }
+    getDefaultHeight() {
+        return this.defaultHeight;
+    }
+    getMinHeight() {
+        return this.minHeight;
+    }
+    setHeight(height) {
+        this.height = Math.max(this.minHeight, height);
+    }
+    resetHeight() {
+        this.height = this.defaultHeight;
+    }
+    isVisible() {
+        return this.visible;
+    }
+    setTitle(title) {
+        this.title = title;
+    }
+    getTitle() {
+        return this.title;
+    }
+}
+export class WebLogoTrack extends MSAHeaderTrack {
+    constructor(data = new Map(), height = LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT, _colorScheme = '', title = 'WebLogo') {
+        super(height, LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT, title);
+        this.data = new Map();
+        this.monomerLib = null;
+        this.biotype = 'PEPTIDE';
+        this.hoveredPosition = -1;
+        this.hoveredMonomer = null;
+        this.data = data;
+        this.visible = data.size > 0;
+    }
+    setHovered(position, monomer) {
+        this.hoveredPosition = position;
+        this.hoveredMonomer = monomer;
+    }
+    getPositionData(position) {
+        return this.data.get(position) || null;
+    }
+    setupDefaultTooltip() {
+        this.enableTooltip(true);
+        this.setTooltipContentGenerator((position, data) => {
+            return this.createTooltipContent(position, data);
+        });
+    }
+    createFrequencyTable(data) {
+        const sortedResidues = Array.from(data.entries()).sort((a, b) => b[1] - a[1]);
+        const table = document.createElement('table');
+        table.style.borderCollapse = 'collapse';
+        table.style.marginTop = '4px';
+        table.style.fontSize = '11px';
+        // Create header
+        const headerRow = table.insertRow();
+        const headerCell1 = headerRow.insertCell();
+        const headerCell2 = headerRow.insertCell();
+        headerCell1.textContent = 'Residue';
+        headerCell2.textContent = 'Frequency';
+        headerCell1.style.fontWeight = 'bold';
+        headerCell2.style.fontWeight = 'bold';
+        headerCell1.style.padding = '4px 8px';
+        headerCell2.style.padding = '4px 8px';
+        headerCell1.style.borderBottom = '1px solid #ccc';
+        headerCell2.style.borderBottom = '1px solid #ccc';
+        for (const [residue, freq] of sortedResidues) {
+            const row = table.insertRow();
+            const cell1 = row.insertCell();
+            const cell2 = row.insertCell();
+            const backgroundColor = this.getMonomerBackgroundColor(residue);
+            const textColor = this.getMonomerTextColor(residue);
+            cell1.textContent = residue;
+            cell1.style.backgroundColor = backgroundColor;
+            cell1.style.color = textColor;
+            cell1.style.textAlign = 'center';
+            cell1.style.fontWeight = 'bold';
+            cell1.style.padding = '4px 8px';
+            cell1.style.border = '1px solid rgba(0,0,0,0.1)';
+            cell2.textContent = `${(freq * 100).toFixed(0)}%`;
+            cell2.style.textAlign = 'right';
+            cell2.style.padding = '4px 8px';
+            cell2.style.border = '1px solid rgba(0,0,0,0.1)';
+        }
+        return table;
+    }
+    createTooltipContent(position, data) {
+        const tooltipRows = [];
+        tooltipRows.push(ui.divText(`Position: ${position + 1}`, {
+            style: { fontWeight: 'bold', marginBottom: '6px', fontSize: '13px' }
+        }));
+        if (data && data.size > 0) {
+            const freqTable = this.createFrequencyTable(data);
+            tooltipRows.push(freqTable);
+        }
+        else {
+            tooltipRows.push(ui.divText('No data available', {
+                style: { fontStyle: 'italic', color: '#666' }
+            }));
+        }
+        // Use the standard tooltip container approach
+        const tooltipEl = ui.divV(tooltipRows);
+        tooltipEl.style.maxHeight = '80vh';
+        return tooltipEl;
+    }
+    setMonomerLib(monomerLib) {
+        this.monomerLib = monomerLib;
+    }
+    setBiotype(biotype) {
+        this.biotype = biotype;
+    }
+    /**
+     * Calculate which monomer is at the specified coordinates within a WebLogo column
+     */
+    getMonomerAt(x, y, position) {
+        if (!this.ctx || !this.visible || this.data.size === 0)
+            return null;
+        const residueFreqs = this.data.get(position);
+        if (!residueFreqs || residueFreqs.size === 0)
+            return null;
+        // No title offset needed since we don't draw titles in tracks anymore
+        const relativeY = y;
+        const sortedResidues = Array.from(residueFreqs.entries()).sort((a, b) => b[1] - a[1]);
+        const totalFreq = sortedResidues.reduce((sum, [_, freq]) => sum + freq, 0);
+        const columnHeight = this.height;
+        let currentY = 0;
+        for (const [residue, freq] of sortedResidues) {
+            const letterHeight = freq * columnHeight / totalFreq;
+            if (relativeY >= currentY && relativeY < currentY + letterHeight)
+                return residue;
+            currentY += letterHeight;
+        }
+        return null;
+    }
+    updateData(data) {
+        this.data = data;
+        this.visible = data.size > 0;
+    }
+    /**
+     * Draw the WebLogo track
+     */
+    draw(x, y, width, height, windowStart, positionWidth, totalPositions, currentPosition) {
+        if (!this.ctx || !this.visible || this.data.size === 0)
+            return;
+        const visiblePositionsN = Math.floor(width / positionWidth);
+        const effectiveLogoHeight = height - WEBLOGO_CONSTANTS.PADDING * 2;
+        const columnY = y + WEBLOGO_CONSTANTS.PADDING;
+        for (let i = 0; i < visiblePositionsN; i++) {
+            this.drawWebLogoColumn(i, x, y, width, height, windowStart, positionWidth, totalPositions, currentPosition, columnY, effectiveLogoHeight);
+        }
+    }
+    drawWebLogoColumn(i, x, y, width, height, windowStart, positionWidth, totalPositions, currentPosition, columnY, effectiveLogoHeight) {
+        const position = windowStart + i - 1;
+        if (position < 0 || position >= totalPositions)
+            return;
+        const residueFreqs = this.data.get(position);
+        if (!residueFreqs || residueFreqs.size === 0)
+            return;
+        const posX = x + (i * positionWidth);
+        const cellWidth = positionWidth - WEBLOGO_CONSTANTS.PADDING;
+        // Highlight selected position
+        if (windowStart + i === currentPosition) {
+            this.ctx.fillStyle = COLORS.SELECTION_HIGHLIGHT;
+            this.ctx.fillRect(posX, y, positionWidth, height);
+        }
+        // Draw column background
+        this.ctx.fillStyle = COLORS.BACKGROUND_LIGHT;
+        this.ctx.fillRect(posX + WEBLOGO_CONSTANTS.PADDING / 2, columnY, cellWidth, effectiveLogoHeight);
+        this.drawLettersInColumn(position, posX, cellWidth, columnY, effectiveLogoHeight, residueFreqs);
+        this.drawColumnBorder(posX, columnY, cellWidth, effectiveLogoHeight);
+    }
+    drawLettersInColumn(position, posX, cellWidth, columnY, effectiveLogoHeight, residueFreqs) {
+        const sortedResidues = Array.from(residueFreqs.entries()).sort((a, b) => b[1] - a[1]);
+        const totalFreq = sortedResidues.reduce((sum, [_, freq]) => sum + freq, 0);
+        const scaleFactor = Math.min(1, effectiveLogoHeight / (totalFreq * effectiveLogoHeight));
+        let currentY = columnY;
+        const columnBottom = columnY + effectiveLogoHeight;
+        for (const [residue, freq] of sortedResidues) {
+            const rawLetterHeight = freq * effectiveLogoHeight * scaleFactor;
+            const letterHeight = Math.max(WEBLOGO_CONSTANTS.MIN_LETTER_HEIGHT, Math.floor(rawLetterHeight));
+            if (letterHeight < WEBLOGO_CONSTANTS.MIN_LETTER_HEIGHT)
+                continue;
+            const isHovered = position === this.hoveredPosition && residue === this.hoveredMonomer;
+            const finalHeight = Math.min(letterHeight, columnBottom - currentY);
+            if (finalHeight < WEBLOGO_CONSTANTS.MIN_LETTER_HEIGHT)
+                break;
+            this.drawLetter(residue, posX + WEBLOGO_CONSTANTS.PADDING / 2, currentY, cellWidth, finalHeight, isHovered);
+            currentY += finalHeight;
+        }
+    }
+    drawColumnBorder(posX, columnY, cellWidth, effectiveLogoHeight) {
+        this.ctx.strokeStyle = COLORS.BORDER_LIGHT;
+        this.ctx.lineWidth = 1;
+        this.ctx.strokeRect(posX + WEBLOGO_CONSTANTS.PADDING / 2, columnY, cellWidth, effectiveLogoHeight);
+    }
+    drawLetter(letter, x, y, width, height, isHovered = false) {
+        if (!this.ctx)
+            return;
+        const backgroundColor = this.getMonomerBackgroundColor(letter);
+        const textColor = this.getMonomerTextColor(letter);
+        // Fill background
+        this.ctx.fillStyle = backgroundColor;
+        this.ctx.fillRect(x, y, width, height);
+        // Apply hover effect
+        if (isHovered) {
+            this.ctx.shadowColor = COLORS.HOVER_SHADOW;
+            this.ctx.shadowBlur = 8;
+            this.ctx.strokeStyle = 'white';
+            this.ctx.lineWidth = 2;
+            this.ctx.strokeRect(x, y, width, height);
+            this.ctx.shadowBlur = 0;
+        }
+        this.drawLetterSeparators(x, y, width, height);
+        this.drawLetterText(letter, x, y, width, height, textColor);
+    }
+    drawLetterSeparators(x, y, width, height) {
+        this.ctx.strokeStyle = COLORS.SEPARATOR_LIGHT;
+        this.ctx.lineWidth = WEBLOGO_CONSTANTS.SEPARATOR_WIDTH;
+        if (y + height < y + this.ctx.canvas.height) {
+            this.ctx.beginPath();
+            this.ctx.moveTo(x, y + height);
+            this.ctx.lineTo(x + width, y + height);
+            this.ctx.stroke();
+        }
+    }
+    drawLetterText(letter, x, y, width, height, textColor) {
+        const fontSize = Math.min(height * 0.8, width * 0.8);
+        if (fontSize >= 7) {
+            this.ctx.fillStyle = textColor;
+            this.ctx.font = `bold ${fontSize}px Roboto, Roboto Local`;
+            this.ctx.textAlign = 'center';
+            this.ctx.textBaseline = 'middle';
+            this.ctx.fillText(letter, x + width / 2, y + height / 2);
+        }
+    }
+    getMonomerBackgroundColor(letter) {
+        if (this.monomerLib) {
+            try {
+                const colors = this.monomerLib.getMonomerColors(this.biotype, letter);
+                if (colors && colors.backgroundcolor)
+                    return colors.backgroundcolor;
+            }
+            catch (e) {
+                console.warn('Error getting background color from monomerLib:', e);
+            }
+        }
+        return '#CCCCCC';
+    }
+    getMonomerTextColor(letter) {
+        const backgroundColor = this.getMonomerBackgroundColor(letter);
+        try {
+            const backgroundColorInt = DG.Color.fromHtml(backgroundColor);
+            const contrastColorInt = DG.Color.getContrastColor(backgroundColorInt);
+            return DG.Color.toHtml(contrastColorInt);
+        }
+        catch (e) {
+            console.warn('Error calculating contrast color:', e);
+            return '#000000';
+        }
+    }
+}
+/**
+ * Track for displaying conservation bars
+ */
+export class ConservationTrack extends MSAHeaderTrack {
+    constructor(data, height = LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT, colorScheme = 'default', title = 'Conservation') {
+        super(height, LAYOUT_CONSTANTS.MIN_TRACK_HEIGHT, title);
+        this.data = data;
+        this.colorScheme = colorScheme;
+        this.visible = data.length > 0;
+    }
+    updateData(data) {
+        this.data = data;
+        this.visible = data.length > 0;
+    }
     /**
-     * Constructor for the MSA Header
-     * @param {MSAHeaderOptions} options - Configuration options
+     * Draw the conservation track
      */
+    draw(x, y, width, height, windowStart, positionWidth, totalPositions, currentPosition) {
+        if (!this.ctx || !this.visible || this.data.length === 0)
+            return;
+        const visiblePositionsN = Math.floor(width / positionWidth);
+        for (let i = 0; i < visiblePositionsN; i++) {
+            const position = windowStart + i;
+            if (position > totalPositions)
+                break;
+            const posX = x + (i * positionWidth);
+            const cellWidth = positionWidth;
+            const cellCenterX = posX + cellWidth / 2;
+            if (position - 1 < this.data.length) {
+                this.drawConservationBar(position - 1, posX, cellWidth, cellCenterX, y, height);
+                if (position === currentPosition) {
+                    this.ctx.fillStyle = COLORS.SELECTION_HIGHLIGHT;
+                    this.ctx.fillRect(posX, y, cellWidth, height);
+                }
+            }
+        }
+    }
+    drawConservationBar(posIndex, x, cellWidth, cellCenterX, barplotTop, barplotHeight) {
+        if (!this.ctx)
+            return;
+        const conservation = this.data[posIndex];
+        const barplotPadding = WEBLOGO_CONSTANTS.PADDING;
+        // Draw bar background
+        this.ctx.fillStyle = COLORS.BACKGROUND_LIGHT;
+        this.ctx.fillRect(x + barplotPadding, barplotTop, cellWidth - barplotPadding * 2, barplotHeight);
+        // Determine bar color based on color scheme
+        let barColor = '#3CB173';
+        if (this.colorScheme === 'default') {
+            if (conservation < 0.5)
+                barColor = '#E74C3C';
+            else if (conservation < 0.75)
+                barColor = '#F39C12';
+        }
+        else if (this.colorScheme === 'rainbow') {
+            if (conservation < 0.2)
+                barColor = '#E74C3C';
+            else if (conservation < 0.4)
+                barColor = '#FF7F00';
+            else if (conservation < 0.6)
+                barColor = '#FFFF00';
+            else if (conservation < 0.8)
+                barColor = '#00FF00';
+            else
+                barColor = '#0000FF';
+        }
+        else if (this.colorScheme === 'heatmap') {
+            const intensity = Math.round(conservation * 255);
+            barColor = `rgb(255, ${intensity}, ${intensity})`;
+        }
+        const barHeight = conservation * barplotHeight;
+        this.ctx.fillStyle = barColor;
+        this.ctx.fillRect(x + barplotPadding, barplotTop + barplotHeight - barHeight, cellWidth - barplotPadding * 2, barHeight);
+        // Add outline
+        this.ctx.strokeStyle = COLORS.BORDER_LIGHT;
+        this.ctx.lineWidth = 1;
+        this.ctx.strokeRect(x + barplotPadding, barplotTop, cellWidth - barplotPadding * 2, barplotHeight);
+        // Add conservation percentage text if cell is wide enough
+        if (cellWidth > 20) {
+            this.ctx.fillStyle = COLORS.TITLE_TEXT;
+            this.ctx.font = FONTS.CONSERVATION_TEXT;
+            this.ctx.textAlign = 'center';
+            this.ctx.textBaseline = 'middle';
+            this.ctx.fillText(`${Math.round(conservation * 100)}%`, cellCenterX, barplotTop + barplotHeight / 2);
+        }
+    }
+}
+const LAYOUT_CONSTANTS = {
+    TITLE_HEIGHT: 16,
+    TRACK_GAP: 4,
+    DOTTED_CELL_HEIGHT: 30,
+    SLIDER_HEIGHT: 8,
+    TOP_PADDING: 5,
+    DEFAULT_TRACK_HEIGHT: 45,
+    MIN_TRACK_HEIGHT: 35,
+};
+// STRICT HEIGHT THRESHOLDS - All pixel-perfect and deterministic
+const HEIGHT_THRESHOLDS = {
+    // Base: just dotted cells + slider
+    BASE: LAYOUT_CONSTANTS.DOTTED_CELL_HEIGHT + LAYOUT_CONSTANTS.SLIDER_HEIGHT, // 38px
+    // With title but no tracks
+    WITH_TITLE: function () {
+        return this.BASE + LAYOUT_CONSTANTS.TITLE_HEIGHT + LAYOUT_CONSTANTS.TRACK_GAP; // 58px
+    },
+    // With title + WebLogo track
+    WITH_WEBLOGO: function () {
+        return this.WITH_TITLE() + LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT + LAYOUT_CONSTANTS.TRACK_GAP; // 107px
+    },
+    // With title + WebLogo + Conservation tracks
+    WITH_BOTH: function () {
+        return this.WITH_WEBLOGO() + LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT + LAYOUT_CONSTANTS.TRACK_GAP; // 156px
+    }
+};
+export class MSAScrollingHeader {
     constructor(options) {
         this.canvas = null;
         this.ctx = null;
-        // Default configuration with required fields
+        this.tracks = new Map();
+        // Tooltip and hover state
+        this.currentHoverPosition = -1;
+        this.currentHoverTrack = null;
+        this.previousHoverPosition = -1;
+        this.previousHoverTrack = null;
+        this.previousHoverMonomer = null;
+        // Selection state
+        this.dataFrame = null;
+        this.seqHandler = null;
+        this.seqColumn = null;
+        this.onSelectionCallback = null;
+        // Track button state
+        this.trackButtons = [];
+        this.userSelectedTracks = null;
         this.config = {
             x: options.x || 0,
             y: options.y || 0,
@@ -22,142 +508,455 @@ export class MSAScrollingHeader {
             windowStartPosition: options.windowStartPosition || 1,
             positionWidth: options.positionWidth || 15,
             totalPositions: options.totalPositions || 5000,
-            headerHeight: options.headerHeight || 50,
-            sliderHeight: options.sliderHeight || 8,
+            headerHeight: options.headerHeight || HEIGHT_THRESHOLDS.BASE,
+            sliderHeight: options.sliderHeight || LAYOUT_CONSTANTS.SLIDER_HEIGHT,
             currentPosition: options.currentPosition || 1,
             cellBackground: options.cellBackground !== undefined ? options.cellBackground : true,
-            sliderColor: options.sliderColor || 'rgba(220, 220, 220, 0.4)',
+            sliderColor: options.sliderColor || COLORS.SLIDER_DEFAULT,
             onPositionChange: options.onPositionChange || ((_, __) => { }),
-            ...options // Override defaults with any provided options
+            onHeaderHeightChange: options.onHeaderHeightChange || (() => { }),
+            ...options
         };
         this.eventElement = ui.div();
         this.eventElement.style.position = 'absolute';
         this.config.canvas.parentElement?.appendChild(this.eventElement);
-        // Internal state
-        this.state = {
-            isDragging: false,
-            dragStartX: 0
-        };
+        this.state = { isDragging: false, dragStartX: 0 };
+        this.setupEventListeners();
         this.init();
     }
+    determineVisibleTracks() {
+        const currentHeight = this.config.headerHeight;
+        const webLogoTrack = this.getTrack('weblogo');
+        const conservationTrack = this.getTrack('conservation');
+        // Reset all tracks
+        this.tracks.forEach((track) => {
+            track.setVisible(false);
+            track.setHeight(LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT);
+        });
+        // Apply strict thresholds
+        if (currentHeight < HEIGHT_THRESHOLDS.WITH_TITLE()) {
+            // Below 58px: No tracks, no title
+            return;
+        }
+        if (currentHeight < HEIGHT_THRESHOLDS.WITH_WEBLOGO()) {
+            // 58px - 106px: Title only, no tracks
+            return;
+        }
+        if (currentHeight < HEIGHT_THRESHOLDS.WITH_BOTH()) {
+            // 107px - 155px: WebLogo only
+            if (webLogoTrack) {
+                webLogoTrack.setVisible(true);
+                // Scale WebLogo with extra space
+                const extraSpace = currentHeight - HEIGHT_THRESHOLDS.WITH_WEBLOGO();
+                webLogoTrack.setHeight(LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT + extraSpace);
+            }
+            return;
+        }
+        // 156px+: Both tracks
+        if (webLogoTrack)
+            webLogoTrack.setVisible(true);
+        if (conservationTrack)
+            conservationTrack.setVisible(true);
+        // Distribute extra space to WebLogo
+        if (webLogoTrack && currentHeight > HEIGHT_THRESHOLDS.WITH_BOTH()) {
+            const extraSpace = currentHeight - HEIGHT_THRESHOLDS.WITH_BOTH();
+            webLogoTrack.setHeight(LAYOUT_CONSTANTS.DEFAULT_TRACK_HEIGHT + extraSpace);
+        }
+        // Override with user selections if they exist (but still respect minimum heights)
+        if (this.userSelectedTracks) {
+            // Force hide tracks that user disabled
+            this.tracks.forEach((track, id) => {
+                if (!this.userSelectedTracks[id])
+                    track.setVisible(false);
+            });
+            // But auto-hide if height is insufficient regardless of user preference
+            if (currentHeight < HEIGHT_THRESHOLDS.WITH_WEBLOGO() && webLogoTrack)
+                webLogoTrack.setVisible(false);
+            if (currentHeight < HEIGHT_THRESHOLDS.WITH_BOTH() && conservationTrack)
+                conservationTrack.setVisible(false);
+        }
+    }
+    drawTrackButtons() {
+        const buttonWidth = 70;
+        // todo: Make sure buttons are not colliding with the header
+        if (!this.ctx || this.config.width < buttonWidth * 4)
+            return;
+        this.trackButtons = [];
+        const conservationTrack = this.getTrack('conservation');
+        const webLogoTrack = this.getTrack('weblogo');
+        const conservationVisible = conservationTrack?.isVisible() ?? false;
+        const webLogoVisible = webLogoTrack?.isVisible() ?? false;
+        const buttonHeight = 14;
+        const buttonGap = 4;
+        const rightMargin = 16;
+        let buttonX = this.config.width - rightMargin;
+        const buttonY = this.config.headerHeight >= HEIGHT_THRESHOLDS.WITH_TITLE() ?
+            (LAYOUT_CONSTANTS.TITLE_HEIGHT - buttonHeight) / 2 : // Center in title area
+            2; // Or just 2px from top if no title
+        // Show individual track buttons only if not both are visible
+        if (!(conservationVisible && webLogoVisible)) {
+            if (!conservationVisible && conservationTrack) {
+                buttonX -= buttonWidth;
+                this.drawTrackButton('conservation', 'Conservation', buttonX, buttonY, buttonWidth, buttonHeight);
+                buttonX -= buttonGap;
+            }
+            if (!webLogoVisible && webLogoTrack) {
+                buttonX -= buttonWidth;
+                this.drawTrackButton('weblogo', 'WebLogo', buttonX, buttonY, buttonWidth, buttonHeight);
+            }
+        }
+    }
+    drawTrackButton(id, label, x, y, width, height, isAutoButton = false) {
+        if (!this.ctx)
+            return;
+        this.trackButtons.push({ id, label, x, y, width, height });
+        this.ctx.fillStyle = isAutoButton ? 'rgba(100, 150, 200, 0.8)' : 'rgba(240, 240, 240, 0.8)';
+        this.ctx.fillRect(x, y, width, height);
+        this.ctx.strokeStyle = isAutoButton ? 'rgba(70, 120, 170, 0.8)' : 'rgba(180, 180, 180, 0.8)';
+        this.ctx.lineWidth = 1;
+        this.ctx.strokeRect(x, y, width, height);
+        this.ctx.fillStyle = isAutoButton ? '#ffffff' : '#666666';
+        this.ctx.font = '9px Roboto, Roboto Local';
+        this.ctx.textAlign = 'center';
+        this.ctx.textBaseline = 'middle';
+        this.ctx.fillText(label, x + width / 2, y + height / 2);
+    }
+    handleTrackButtonClick(x, y) {
+        for (const button of this.trackButtons) {
+            if (x >= button.x && x <= button.x + button.width &&
+                y >= button.y && y <= button.y + button.height) {
+                // if (button.id === 'auto')
+                //   this.resetToAutoMode();
+                // else
+                //   this.snapToTrackHeight(button.id);
+                // return true;
+                this.snapToTrackHeight(button.id);
+                return true;
+            }
+        }
+        return false;
+    }
+    snapToTrackHeight(trackId) {
+        let targetHeight;
+        if (trackId === 'weblogo')
+            targetHeight = HEIGHT_THRESHOLDS.WITH_WEBLOGO();
+        else if (trackId === 'conservation')
+            targetHeight = HEIGHT_THRESHOLDS.WITH_BOTH();
+        else
+            return;
+        // Set user preference
+        if (!this.userSelectedTracks) {
+            this.userSelectedTracks = {};
+            this.tracks.forEach((track, id) => {
+                this.userSelectedTracks[id] = false; // Start with all hidden
+            });
+        }
+        // Enable the requested track and any dependencies
+        if (trackId === 'conservation') {
+            this.userSelectedTracks['weblogo'] = true; // Conservation requires WebLogo
+            this.userSelectedTracks['conservation'] = true;
+        }
+        else if (trackId === 'weblogo')
+            this.userSelectedTracks['weblogo'] = true;
+        // Don't change conservation setting
+        // Snap to exact height
+        if (this.config.onHeaderHeightChange)
+            this.config.onHeaderHeightChange(targetHeight);
+        window.requestAnimationFrame(() => this.redraw());
+    }
+    resetToAutoMode() {
+        this.userSelectedTracks = null;
+        // Calculate automatic initial height
+        const hasMultipleSequences = this.tracks.size > 0;
+        const initialHeight = hasMultipleSequences ? HEIGHT_THRESHOLDS.WITH_BOTH() : HEIGHT_THRESHOLDS.BASE;
+        if (this.config.onHeaderHeightChange)
+            this.config.onHeaderHeightChange(initialHeight);
+        window.requestAnimationFrame(() => this.redraw());
+    }
     /**
-     * Initialize the component
+     * Draw the column title (shown when above threshold)
      */
-    init() {
-        // Get canvas and context
-        this.canvas = this.config.canvas;
-        if (!this.canvas) {
-            console.error(`canvas not found.`);
+    drawColumnTitle(x, y, width, columnName) {
+        if (!this.ctx || !columnName)
             return;
+        if (this.config.headerHeight >= HEIGHT_THRESHOLDS.WITH_TITLE()) {
+            this.ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
+            this.ctx.fillRect(x, y, width, LAYOUT_CONSTANTS.TITLE_HEIGHT);
+            this.ctx.fillStyle = COLORS.TITLE_TEXT;
+            this.ctx.font = FONTS.COLUMN_TITLE;
+            this.ctx.textAlign = 'center';
+            this.ctx.textBaseline = 'middle';
+            this.ctx.fillText(columnName, x + width / 2, y + LAYOUT_CONSTANTS.TITLE_HEIGHT / 2);
         }
-        const context = this.canvas.getContext('2d');
-        if (!context) {
-            console.error('Failed to get 2D context from canvas');
+    }
+    clearHoverStates() {
+        const hasHoverState = this.previousHoverPosition !== -1 ||
+            this.previousHoverTrack !== null ||
+            this.previousHoverMonomer !== null;
+        if (hasHoverState) {
+            this.previousHoverPosition = -1;
+            this.previousHoverTrack = null;
+            this.previousHoverMonomer = null;
+            this.tracks.forEach((track) => {
+                if (track instanceof WebLogoTrack)
+                    track.setHovered(-1, null);
+            });
+            window.requestAnimationFrame(() => this.redraw());
+        }
+    }
+    redraw() {
+        this.draw(this.config.x, this.config.y, this.config.width, this.config.height, this.config.currentPosition, this.config.windowStartPosition, { preventDefault: () => { } }, this.seqColumn?.name);
+    }
+    setSelectionData(dataFrame, seqColumn, seqHandler, callback) {
+        this.dataFrame = dataFrame;
+        this.seqColumn = seqColumn;
+        this.seqHandler = seqHandler;
+        this.onSelectionCallback = callback || null;
+    }
+    setupTooltipHandling() {
+        this.eventElement.addEventListener('mousemove', this.handleTooltipMouseMove.bind(this));
+        this.eventElement.addEventListener('mouseleave', this.handleTooltipMouseLeave.bind(this));
+    }
+    handleTooltipMouseMove(e) {
+        if (!this.isValid)
+            return;
+        const { x, y } = this.getCoords(e);
+        const cellWidth = this.config.positionWidth;
+        const hoveredCellIndex = Math.floor(x / cellWidth);
+        const windowStart = this.config.windowStartPosition;
+        const hoveredPosition = windowStart + hoveredCellIndex - 1;
+        if (hoveredPosition < 0 || hoveredPosition >= this.config.totalPositions) {
+            this.hideTooltip();
+            this.clearHoverStates();
             return;
         }
-        this.ctx = context;
-        // Add event listeners
-        this.eventElement.addEventListener('mousedown', this.handleMouseDown.bind(this));
-        this.eventElement.addEventListener('mousemove', this.handleMouseMove.bind(this));
-        this.eventElement.addEventListener('mouseup', this.handleMouseUp.bind(this));
-        this.eventElement.addEventListener('mouseleave', this.handleMouseUp.bind(this));
-        this.eventElement.addEventListener('click', this.handleClick.bind(this));
-        this.eventElement.addEventListener('wheel', this.handleMouseWheel.bind(this));
-        window.addEventListener('keydown', this.handleKeyDown.bind(this));
+        const titleHeight = this.config.headerHeight >= HEIGHT_THRESHOLDS.WITH_TITLE() ? LAYOUT_CONSTANTS.TITLE_HEIGHT : 0;
+        const sliderTop = this.config.headerHeight - LAYOUT_CONSTANTS.SLIDER_HEIGHT;
+        const dottedCellsTop = sliderTop - LAYOUT_CONSTANTS.DOTTED_CELL_HEIGHT;
+        const tracksEndY = dottedCellsTop - LAYOUT_CONSTANTS.TRACK_GAP;
+        if (y >= dottedCellsTop || y < titleHeight) {
+            this.hideTooltip();
+            this.clearHoverStates();
+            return;
+        }
+        // Find hovered track working backwards from dotted cells
+        let hoveredTrackId = null;
+        let trackRelativeY = 0;
+        const visibleTracks = [];
+        const webLogoTrack = this.getTrack('weblogo');
+        if (webLogoTrack && webLogoTrack.isVisible())
+            visibleTracks.push({ id: 'weblogo', track: webLogoTrack });
+        const conservationTrack = this.getTrack('conservation');
+        if (conservationTrack && conservationTrack.isVisible())
+            visibleTracks.push({ id: 'conservation', track: conservationTrack });
+        let currentY = tracksEndY;
+        for (const { id, track } of visibleTracks) {
+            const trackHeight = track.getHeight();
+            const trackStartY = currentY - trackHeight;
+            if (y >= trackStartY && y < currentY) {
+                hoveredTrackId = id;
+                trackRelativeY = y - trackStartY;
+                break;
+            }
+            currentY = trackStartY - LAYOUT_CONSTANTS.TRACK_GAP;
+        }
+        // Check for hovered monomer
+        let currentHoverMonomer = null;
+        if (hoveredTrackId) {
+            const track = this.tracks.get(hoveredTrackId);
+            if (track)
+                currentHoverMonomer = track.getMonomerAt(x, trackRelativeY, hoveredPosition);
+        }
+        // Update hover state if changed
+        const hoverStateChanged = (this.previousHoverPosition !== hoveredPosition ||
+            this.previousHoverTrack !== hoveredTrackId ||
+            this.previousHoverMonomer !== currentHoverMonomer);
+        if (hoverStateChanged) {
+            this.previousHoverPosition = hoveredPosition;
+            this.previousHoverTrack = hoveredTrackId;
+            this.previousHoverMonomer = currentHoverMonomer;
+            if (hoveredTrackId) {
+                const track = this.tracks.get(hoveredTrackId);
+                if (track instanceof WebLogoTrack) {
+                    track.setHovered(hoveredPosition, currentHoverMonomer);
+                    window.requestAnimationFrame(() => this.redraw());
+                }
+            }
+        }
+        // Handle tooltips
+        if (hoveredPosition !== this.currentHoverPosition || hoveredTrackId !== this.currentHoverTrack) {
+            this.currentHoverPosition = hoveredPosition;
+            this.currentHoverTrack = hoveredTrackId;
+            if (hoveredTrackId) {
+                const track = this.tracks.get(hoveredTrackId);
+                if (track) {
+                    const tooltipContent = track.getTooltipContent(hoveredPosition);
+                    if (tooltipContent) {
+                        ui.tooltip.show(tooltipContent, e.clientX + 16, e.clientY + 16);
+                        return;
+                    }
+                }
+            }
+        }
+        if (!hoveredTrackId || !currentHoverMonomer) {
+            this.hideTooltip();
+            this.clearHoverStates();
+        }
     }
-    get isValid() {
-        return !!this.canvas && !!this.ctx && this.config.height >= this.config.headerHeight;
+    handleTooltipMouseLeave() {
+        this.hideTooltip();
+        this.clearHoverStates();
+        window.requestAnimationFrame(() => this.draw(this.config.x, this.config.y, this.config.width, this.config.height, this.config.currentPosition, this.config.windowStartPosition, { preventDefault: () => { } }, this.seqColumn?.name));
+    }
+    hideTooltip() {
+        this.currentHoverPosition = -1;
+        this.currentHoverTrack = null;
+        ui.tooltip.hide();
     }
-    draw(x, y, w, h, currentPos, scrollerStart, preventable) {
-        // soft internal update
-        if (this.config.x != x || this.config.y != y || this.config.width != w || this.config.height != h || this.config.currentPosition != currentPos || this.config.windowStartPosition != scrollerStart)
-            Object.assign(this.config, { x, y, width: w, height: h, currentPosition: currentPos, windowStartPosition: scrollerStart });
+    draw(x, y, w, h, currentPos, scrollerStart, preventable, columnName) {
+        Object.assign(this.config, {
+            x, y, width: w, height: h,
+            currentPosition: currentPos,
+            windowStartPosition: scrollerStart
+        });
         if (!this.isValid) {
             this.eventElement.style.display = 'none';
             return;
         }
         this.ctx.save();
-        // Clear canvas
         this.ctx.clearRect(x, y, w, h);
         this.ctx.translate(x, y);
         this.ctx.rect(0, 0, w, h);
         this.ctx.clip();
-        // Calculate dimensions
-        const canvasWidth = w;
-        const canvasHeight = h;
-        const topPadding = 5;
-        const posIndexTop = topPadding;
-        const sliderTop = this.config.headerHeight - this.config.sliderHeight;
-        // Draw the full sequence slider bar (very subtle gray bar)
-        this.ctx.fillStyle = this.config.sliderColor;
-        this.ctx.fillRect(0, sliderTop, canvasWidth, this.config.sliderHeight);
-        const visiblePositionsN = Math.floor(this.config.width / this.config.positionWidth);
-        const windowStart = Math.max(1, this.config.windowStartPosition);
-        // Calculate slider position on the bar
-        const totalSliderRange = this.config.totalPositions - visiblePositionsN;
-        const sliderStartPX = totalSliderRange <= 0 ? 0 :
-            windowStart / (totalSliderRange) * (canvasWidth - this.sliderWidth);
-        const sliderLengthPX = totalSliderRange <= 0 ? canvasWidth :
-            this.sliderWidth;
-        // Draw slider window (darker rectangle)
-        this.ctx.fillStyle = 'rgba(150, 150, 150, 0.5)';
-        this.ctx.fillRect(sliderStartPX, sliderTop, sliderLengthPX, this.config.sliderHeight);
+        this.determineVisibleTracks();
+        const showTitle = this.config.headerHeight >= HEIGHT_THRESHOLDS.WITH_TITLE();
+        const titleHeight = showTitle ? LAYOUT_CONSTANTS.TITLE_HEIGHT : 0;
+        if (columnName && showTitle)
+            this.drawColumnTitle(0, 0, w, columnName);
+        const sliderTop = h - LAYOUT_CONSTANTS.SLIDER_HEIGHT;
+        const dottedCellsTop = sliderTop - LAYOUT_CONSTANTS.DOTTED_CELL_HEIGHT;
+        const tracksEndY = dottedCellsTop - LAYOUT_CONSTANTS.TRACK_GAP;
+        const visibleTrackPositions = [];
+        // Draw tracks working backwards from dotted cells
+        const visibleTracks = [];
+        const webLogoTrack = this.getTrack('weblogo');
+        if (webLogoTrack && webLogoTrack.isVisible())
+            visibleTracks.push({ id: 'weblogo', track: webLogoTrack });
+        const conservationTrack = this.getTrack('conservation');
+        if (conservationTrack && conservationTrack.isVisible())
+            visibleTracks.push({ id: 'conservation', track: conservationTrack });
+        let currentY = tracksEndY;
+        for (const { track } of visibleTracks) {
+            const trackHeight = track.getHeight();
+            const trackStartY = currentY - trackHeight;
+            track.draw(0, trackStartY, w, trackHeight, this.config.windowStartPosition, this.config.positionWidth, this.config.totalPositions, this.config.currentPosition);
+            visibleTrackPositions.unshift({ y: trackStartY, height: trackHeight });
+            currentY = trackStartY - LAYOUT_CONSTANTS.TRACK_GAP;
+        }
+        // Draw dotted cells
+        this.drawDottedCells(0, dottedCellsTop, w, LAYOUT_CONSTANTS.DOTTED_CELL_HEIGHT, sliderTop);
+        visibleTrackPositions.push({ y: dottedCellsTop, height: LAYOUT_CONSTANTS.DOTTED_CELL_HEIGHT });
+        // Draw connection lines for selected position
         if (this.config.currentPosition >= 1 && this.config.currentPosition <= this.config.totalPositions) {
-            // Calculate the position of the current selection as a proportion of total sequence
-            const currentPositionRatio = (this.config.currentPosition - 1) / (this.config.totalPositions - 1);
-            const notchX = Math.round(currentPositionRatio * canvasWidth);
-            // Draw a 3px thick vertical green marker at this position
-            this.ctx.fillStyle = '#3CB173'; // Same green as the cell highlight
-            this.ctx.fillRect(notchX - 1, // Center the 3px marker on the calculated position
-            sliderTop - 2, // Extend the marker 2px above the scrollbar
-            3, // 3px width as requested
-            this.config.sliderHeight + 4 // Make the marker taller than the scrollbar
-            );
-        }
-        // Draw position marks and indices
+            const cellWidth = this.config.positionWidth;
+            const position = this.config.currentPosition;
+            const windowStart = this.config.windowStartPosition;
+            const visibleIndex = position - windowStart;
+            if (visibleIndex >= 0 && visibleIndex < Math.floor(w / cellWidth)) {
+                const posX = visibleIndex * cellWidth;
+                const cellCenterX = posX + cellWidth / 2;
+                for (let i = 0; i < visibleTrackPositions.length - 1; i++) {
+                    const upperTrack = visibleTrackPositions[i];
+                    const lowerTrack = visibleTrackPositions[i + 1];
+                    this.ctx.strokeStyle = COLORS.SELECTION_CONNECTION;
+                    this.ctx.lineWidth = 1;
+                    this.ctx.beginPath();
+                    this.ctx.moveTo(cellCenterX, upperTrack.y + upperTrack.height);
+                    this.ctx.lineTo(cellCenterX, lowerTrack.y);
+                    this.ctx.stroke();
+                }
+            }
+        }
+        this.drawTrackButtons();
+        this.ctx.restore();
+        preventable.preventDefault();
+        this.setupEventElement();
+    }
+    /**
+     * Draw the dotted cells area with position markers
+     */
+    drawDottedCells(x, y, width, height, sliderTop) {
+        if (!this.ctx)
+            return;
+        const totalPositions = this.config.totalPositions;
+        const positionWidth = this.config.positionWidth;
+        const currentPosition = this.config.currentPosition;
+        const windowStart = this.config.windowStartPosition;
+        const visiblePositionsN = Math.floor(width / positionWidth);
+        const posIndexTop = y + LAYOUT_CONSTANTS.TOP_PADDING;
+        this.drawSlider(x, sliderTop, width);
         for (let i = 0; i < visiblePositionsN; i++) {
             const position = windowStart + i;
-            if (position > this.config.totalPositions)
+            if (position > totalPositions)
                 break;
-            const x = i * this.config.positionWidth;
-            const cellWidth = this.config.positionWidth;
-            const cellCenterX = x + cellWidth / 2;
-            // Draw cell background for monospace appearance
+            const posX = x + (i * positionWidth);
+            const cellWidth = positionWidth;
+            const cellCenterX = posX + cellWidth / 2;
             if (this.config.cellBackground) {
-                // Very light alternating cell background
                 this.ctx.fillStyle = i % 2 === 0 ? 'rgba(248, 248, 248, 0.3)' : 'rgba(242, 242, 242, 0.2)';
-                this.ctx.fillRect(x, posIndexTop, cellWidth, Math.min(this.config.headerHeight - topPadding, canvasHeight - posIndexTop) - this.config.sliderHeight);
-                // Cell borders - very light vertical lines
+                this.ctx.fillRect(posX, y, cellWidth, height);
                 this.ctx.strokeStyle = 'rgba(220, 220, 220, 0.7)';
                 this.ctx.beginPath();
-                this.ctx.moveTo(x, posIndexTop);
-                this.ctx.lineTo(x, Math.min(this.config.headerHeight, canvasHeight) - this.config.sliderHeight);
+                this.ctx.moveTo(posX, y);
+                this.ctx.lineTo(posX, sliderTop);
                 this.ctx.stroke();
             }
-            // Draw position dot for every position - centered in cell
-            this.ctx.fillStyle = '#999999';
+            // Draw position dot
+            this.ctx.fillStyle = COLORS.POSITION_DOT;
             this.ctx.beginPath();
-            this.ctx.arc(cellCenterX, posIndexTop * 2, 1, 0, Math.PI * 2);
+            this.ctx.arc(cellCenterX, posIndexTop + 5, 1, 0, Math.PI * 2);
             this.ctx.fill();
-            // Draw position number for every 10th position, on the current position and also make sure that the number is not obstructed by some other numbers
-            if (position === this.config.currentPosition || ((position === 1 || position % 10 === 0) && Math.abs(position - this.config.currentPosition) > 1)) {
-                this.ctx.fillStyle = '#333333';
-                this.ctx.font = '12px monospace';
+            // Draw position number
+            if (position === currentPosition || ((position === 1 || position % 10 === 0) &&
+                Math.abs(position - currentPosition) > 1)) {
+                this.ctx.fillStyle = COLORS.TITLE_TEXT;
+                this.ctx.font = FONTS.POSITION_LABELS;
                 this.ctx.textAlign = 'center';
                 this.ctx.textBaseline = 'middle';
-                this.ctx.fillText(position.toString(), cellCenterX, posIndexTop * 4);
+                this.ctx.fillText(position.toString(), cellCenterX, posIndexTop + 15);
             }
-            // Highlight current selected position with square marker
-            // if current is outside the range, draw it at the end
-            if (position === this.config.currentPosition) {
-                // Draw filled background with 50% opacity
-                this.ctx.fillStyle = 'rgba(60, 177, 115, 0.2)';
-                this.ctx.fillRect(x, 0, cellWidth, sliderTop);
+            // Highlight current selected position
+            if (position === currentPosition) {
+                this.ctx.fillStyle = COLORS.SELECTION_STRONG;
+                this.ctx.fillRect(posX, y, cellWidth, height);
             }
         }
-        this.ctx.restore();
-        // Prevent default behavior if in header area
-        preventable.preventDefault();
+    }
+    /**
+     * Draw the position slider
+     */
+    drawSlider(x, sliderTop, width) {
+        if (!this.ctx)
+            return;
+        this.ctx.fillStyle = this.config.sliderColor;
+        this.ctx.fillRect(x, sliderTop, width, LAYOUT_CONSTANTS.SLIDER_HEIGHT);
+        const visiblePositionsN = Math.floor(width / this.config.positionWidth);
+        const windowStart = this.config.windowStartPosition;
+        const totalSliderRange = this.config.totalPositions - visiblePositionsN;
+        const sliderWidth = this.sliderWidth;
+        const sliderStartPX = totalSliderRange <= 0 ? 0 :
+            (windowStart - 1) / totalSliderRange * (width - sliderWidth);
+        const sliderLengthPX = totalSliderRange <= 0 ? width : sliderWidth;
+        this.ctx.fillStyle = COLORS.SLIDER_WINDOW;
+        this.ctx.fillRect(x + sliderStartPX, sliderTop, sliderLengthPX, LAYOUT_CONSTANTS.SLIDER_HEIGHT);
+        if (this.config.currentPosition >= 1 && this.config.currentPosition <= this.config.totalPositions) {
+            const currentPositionRatio = (this.config.currentPosition - 1) / (this.config.totalPositions - 1);
+            const notchX = Math.round(currentPositionRatio * width);
+            this.ctx.fillStyle = COLORS.SLIDER_MARKER;
+            this.ctx.fillRect(x + notchX - 1, sliderTop - 2, 3, LAYOUT_CONSTANTS.SLIDER_HEIGHT + 4);
+        }
+    }
+    setupEventElement() {
         this.eventElement.style.display = 'block';
         this.eventElement.style.left = `${this.config.x}px`;
         this.eventElement.style.top = `${this.config.y}px`;
@@ -182,8 +981,8 @@ export class MSAScrollingHeader {
     }
     isInSliderArea(e) {
         const { y } = this.getCoords(e);
-        const sliderTop = this.config.headerHeight - this.config.sliderHeight;
-        return y > sliderTop && y < sliderTop + this.config.sliderHeight;
+        const sliderTop = this.config.headerHeight - LAYOUT_CONSTANTS.SLIDER_HEIGHT;
+        return y > sliderTop && y < sliderTop + LAYOUT_CONSTANTS.SLIDER_HEIGHT;
     }
     get sliderWidth() {
         const pseudoPositionWidth = this.config.width / this.config.totalPositions;
@@ -192,19 +991,138 @@ export class MSAScrollingHeader {
     }
     isInSliderDraggableArea(e) {
         const { x, y } = this.getCoords(e);
-        const sliderTop = this.config.headerHeight - this.config.sliderHeight;
+        const sliderTop = this.config.headerHeight - LAYOUT_CONSTANTS.SLIDER_HEIGHT;
         const visiblePositionsN = Math.floor(this.config.width / this.config.positionWidth);
-        const windowStart = Math.max(1, this.config.windowStartPosition);
-        // Calculate slider position on the bar
+        const windowStart = this.config.windowStartPosition;
         const totalSliderRange = this.config.totalPositions - visiblePositionsN;
         const sliderStartPX = totalSliderRange <= 0 ? 0 :
-            windowStart / (totalSliderRange) * (this.config.width - this.sliderWidth);
-        return y > sliderTop && y < sliderTop + this.config.sliderHeight && x >= sliderStartPX && x < sliderStartPX + this.sliderWidth;
+            (windowStart - 1) / totalSliderRange * (this.config.width - this.sliderWidth);
+        return y > sliderTop && y < sliderTop + LAYOUT_CONSTANTS.SLIDER_HEIGHT &&
+            x >= sliderStartPX && x < sliderStartPX + this.sliderWidth;
+    }
+    setupEventListeners() {
+        this.eventElement.addEventListener('mousemove', (e) => {
+            if (!this.isValid)
+                return;
+            if (this.isInSliderDraggableArea(e))
+                this.eventElement.style.cursor = 'grab';
+            else if (this.isInSliderArea(e))
+                this.eventElement.style.cursor = 'pointer';
+            else if (this.isInHeaderArea(e))
+                this.eventElement.style.cursor = 'pointer';
+            else
+                this.eventElement.style.cursor = 'default';
+        });
+        this.eventElement.addEventListener('mousedown', this.handleMouseDown.bind(this));
+        this.eventElement.addEventListener('mousemove', this.handleMouseMove.bind(this));
+        this.eventElement.addEventListener('mouseup', this.handleMouseUp.bind(this));
+        this.eventElement.addEventListener('mouseleave', this.handleMouseUp.bind(this));
+        this.eventElement.addEventListener('click', this.handleSelectionClick.bind(this));
+        this.eventElement.addEventListener('click', this.handleClick.bind(this));
+        this.eventElement.addEventListener('wheel', this.handleMouseWheel.bind(this));
+        window.addEventListener('keydown', this.handleKeyDown.bind(this));
+    }
+    handleSelectionClick(e) {
+        if (!this.isValid || !this.dataFrame || !this.seqColumn || !this.seqHandler)
+            return;
+        const { x, y } = this.getCoords(e);
+        if (this.handleTrackButtonClick(x, y))
+            return;
+        const cellWidth = this.config.positionWidth;
+        const clickedCellIndex = Math.floor(x / cellWidth);
+        const windowStart = this.config.windowStartPosition;
+        const clickedPosition = windowStart + clickedCellIndex - 1;
+        if (clickedPosition < 0 || clickedPosition >= this.config.totalPositions)
+            return;
+        const titleHeight = this.config.headerHeight >= HEIGHT_THRESHOLDS.WITH_TITLE() ? LAYOUT_CONSTANTS.TITLE_HEIGHT : 0;
+        const sliderTop = this.config.headerHeight - LAYOUT_CONSTANTS.SLIDER_HEIGHT;
+        const dottedCellsTop = sliderTop - LAYOUT_CONSTANTS.DOTTED_CELL_HEIGHT;
+        const tracksEndY = dottedCellsTop - LAYOUT_CONSTANTS.TRACK_GAP;
+        if (y >= dottedCellsTop || y < titleHeight)
+            return;
+        // Find clicked track
+        let clickedTrackId = null;
+        let trackRelativeY = 0;
+        const visibleTracks = [];
+        const webLogoTrack = this.getTrack('weblogo');
+        if (webLogoTrack && webLogoTrack.isVisible())
+            visibleTracks.push({ id: 'weblogo', track: webLogoTrack });
+        const conservationTrack = this.getTrack('conservation');
+        if (conservationTrack && conservationTrack.isVisible())
+            visibleTracks.push({ id: 'conservation', track: conservationTrack });
+        let currentY = tracksEndY;
+        for (const { id, track } of visibleTracks) {
+            const trackHeight = track.getHeight();
+            const trackStartY = currentY - trackHeight;
+            if (y >= trackStartY && y < currentY) {
+                clickedTrackId = id;
+                trackRelativeY = y - trackStartY;
+                break;
+            }
+            currentY = trackStartY - LAYOUT_CONSTANTS.TRACK_GAP;
+        }
+        if (clickedTrackId) {
+            const track = this.tracks.get(clickedTrackId);
+            if (track) {
+                const monomer = track.getMonomerAt(x, trackRelativeY, clickedPosition);
+                if (monomer) {
+                    if (this.onSelectionCallback) {
+                        this.onSelectionCallback(clickedPosition, monomer);
+                        return;
+                    }
+                    this.selectRowsWithMonomerAtPosition(clickedPosition, monomer);
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                }
+            }
+        }
+    }
+    selectRowsWithMonomerAtPosition(position, monomer) {
+        if (!this.dataFrame || !this.seqHandler)
+            return;
+        try {
+            const selection = this.dataFrame.selection;
+            const monomersAtPositon = this.seqHandler.getMonomersAtPosition(position, true);
+            selection.init((i) => monomersAtPositon[i] === monomer);
+        }
+        catch (error) {
+            console.error('Error selecting rows:', error);
+        }
+    }
+    init() {
+        this.canvas = this.config.canvas;
+        if (!this.canvas) {
+            console.error('Canvas not found');
+            return;
+        }
+        const context = this.canvas.getContext('2d');
+        if (!context) {
+            console.error('Failed to get 2D context from canvas');
+            return;
+        }
+        this.ctx = context;
+        this.tracks.forEach((track) => track.init(context));
+    }
+    addTrack(id, track) {
+        if (this.ctx)
+            track.init(this.ctx);
+        this.tracks.set(id, track);
+    }
+    removeTrack(id) {
+        this.tracks.delete(id);
+    }
+    getTrack(id) {
+        return this.tracks.get(id);
+    }
+    updateTrack(id, updater) {
+        const track = this.getTrack(id);
+        if (track)
+            updater(track);
+    }
+    get isValid() {
+        return !!this.canvas && !!this.ctx &&
+            this.config.height >= HEIGHT_THRESHOLDS.WITH_TITLE();
     }
-    /**
-     * Handle mouse down (start dragging)
-     * @param {MouseEvent} e - Mouse event
-     */
     handleMouseDown(e) {
         if (!this.isValid)
             return;
@@ -225,14 +1143,9 @@ export class MSAScrollingHeader {
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
-            // Determine scroll direction and amount
-            // Use deltaX if available (for horizontal scrolling devices)
-            // otherwise use deltaY with shift key for horizontal scroll
             const delta = e.shiftKey ? Math.sign(e.deltaY) : Math.sign(e.deltaX || e.deltaY);
-            // Move by 1 position or more for faster scrolling (optional)
-            const scrollSpeed = e.shiftKey ? 3 : 1; // Faster scrolling with shift
+            const scrollSpeed = e.shiftKey ? 3 : 1;
             const newStartPosition = this.config.windowStartPosition + (delta * scrollSpeed);
-            // Clamp to valid range
             const visiblePositions = Math.floor(this.config.width / this.config.positionWidth);
             const maxStart = this.config.totalPositions - visiblePositions + 1;
             this.config.windowStartPosition = Math.max(1, Math.min(maxStart, newStartPosition));
@@ -240,10 +1153,6 @@ export class MSAScrollingHeader {
                 this.config.onPositionChange(this.config.currentPosition, this.getWindowRange());
         }
     }
-    /**
-     * Handle mouse move (dragging)
-     * @param {MouseEvent} e - Mouse event
-     */
     handleMouseMove(e) {
         if (!this.state.isDragging || !this.isValid)
             return;
@@ -263,13 +1172,11 @@ export class MSAScrollingHeader {
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
-            // Determine scroll direction
             const delta = e.key === 'ArrowLeft' ? -1 : 1;
             const newPosition = Math.min(Math.max(this.config.currentPosition + delta, 1), this.config.totalPositions);
             if (newPosition === this.config.currentPosition)
                 return;
             this.config.currentPosition = newPosition;
-            // make sure that the cureent position is visible
             const visiblePositions = Math.floor(this.config.width / this.config.positionWidth);
             const start = this.config.windowStartPosition;
             const end = start + visiblePositions - 1;
@@ -281,7 +1188,6 @@ export class MSAScrollingHeader {
             }
         }
         else if (e.key === 'Escape') {
-            // reset the current position
             this.config.currentPosition = -2;
             e.preventDefault();
             e.stopPropagation();
@@ -292,114 +1198,84 @@ export class MSAScrollingHeader {
         if (typeof this.config.onPositionChange === 'function')
             this.config.onPositionChange(this.config.currentPosition, this.getWindowRange());
     }
-    /**
-     * Handle mouse up (end dragging)
-     */
     handleMouseUp() {
         this.state.isDragging = false;
     }
-    /**
-     * Handle slider drag
-     * @param {number} x - X position of mouse
-     */
     handleSliderDrag(x) {
         if (!this.isValid)
             return;
         const sliderWidth = this.sliderWidth;
-        // Calculate the position based on the drag position
         const canvasWidth = this.config.width - sliderWidth;
         const normalizedX = Math.max(0, Math.min(this.config.width, x));
         const fittedPositions = Math.floor(this.config.width / this.config.positionWidth);
         const visiblePositionsN = Math.floor(this.config.width / this.config.positionWidth);
-        // Calculate slider position on the bar
         const totalSliderRange = this.config.totalPositions - visiblePositionsN;
-        // const sliderStartPX =
-        //   windowStart / (totalSliderRange) * (this.config.width - this.sliderWidth);
-        // after we normalize the x position of the mouse, this is where the center of the slider should be.
         const sliderStartPx = Math.max(0, normalizedX - sliderWidth / 2);
-        // then we reverse the formula and calculate the new start position
         const windowStart = sliderStartPx / (canvasWidth) * (totalSliderRange);
-        // we add these positions so that it feels like we are grabbing the slider by its center
         this.config.windowStartPosition = Math.max(1, Math.min(windowStart, this.config.totalPositions - fittedPositions + 1));
-        // Call callback if defined
         if (typeof this.config.onPositionChange === 'function')
             this.config.onPositionChange(this.config.currentPosition, this.getWindowRange());
     }
     get headerHeight() {
         return this.config.headerHeight;
     }
-    /** Soft setting of header hight, without redrawing or update event
-     * @param {number} value - New header height
-     */
     set headerHeight(value) {
         this.config.headerHeight = value;
     }
-    /**
-     * Handle click on positions
-     * @param {MouseEvent} e - Mouse event
-     */
     handleClick(e) {
         if (!this.isValid)
             return;
-        // Get calculated coordinates
+        const absoluteX = e.clientX - this.canvas.getBoundingClientRect().left;
+        const absoluteY = e.clientY - this.canvas.getBoundingClientRect().top;
         const { x, y } = this.getCoords(e);
-        const sliderTop = this.config.headerHeight - this.config.sliderHeight;
+        if (this.handleTrackButtonClick(x, y)) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        const sliderTop = this.config.headerHeight - LAYOUT_CONSTANTS.SLIDER_HEIGHT;
         if (y < sliderTop && y >= 0) {
-            // Calculate which position was clicked
             const cellWidth = this.config.positionWidth;
             const clickedCellIndex = Math.round(x / cellWidth - 0.5);
-            // Calculate actual position in sequence
             const windowStart = this.config.windowStartPosition;
             const clickedPosition = windowStart + clickedCellIndex;
-            // Update current position if valid
             if (clickedPosition >= 1 && clickedPosition <= this.config.totalPositions) {
                 this.config.currentPosition = clickedPosition;
-                // Call callback if defined
                 if (typeof this.config.onPositionChange === 'function')
                     this.config.onPositionChange(this.config.currentPosition, this.getWindowRange());
             }
         }
     }
-    /**
-     * Get the current window range
-     * @return {WindowRange} Object with start and end properties
-     */
     getWindowRange() {
         return {
             start: this.config.windowStartPosition,
             end: Math.min(this.config.totalPositions, this.config.windowStartPosition + Math.floor(this.config.width / this.config.positionWidth))
         };
     }
-    /**
-     * Update configuration
-     * @param {MSAHeaderOptions} newConfig - New configuration options
-     */
     updateConfig(newConfig) {
-        // Update config with new values
         Object.assign(this.config, newConfig);
-        // Ensure current position is still valid
         this.config.currentPosition = Math.min(this.config.currentPosition, this.config.totalPositions);
-        // Call callback if defined
         if (typeof this.config.onPositionChange === 'function')
             this.config.onPositionChange(this.config.currentPosition, this.getWindowRange());
     }
-    /**
-     * Get current position
-     * @return {number} Current position
-     */
     getCurrentPosition() {
         return this.config.currentPosition;
     }
-    /**
-     * Set current position
-     * @param {number} position - New position
-     */
     setCurrentPosition(position) {
-        // Clamp to valid range
         this.config.currentPosition = Math.max(1, Math.min(this.config.totalPositions, position));
-        // Call callback if defined
         if (typeof this.config.onPositionChange === 'function')
             this.config.onPositionChange(this.config.currentPosition, this.getWindowRange());
     }
+    /**
+     * ADDED: Public methods for external control
+     */
+    getHeightThresholds() {
+        return {
+            BASE: HEIGHT_THRESHOLDS.BASE,
+            WITH_TITLE: HEIGHT_THRESHOLDS.WITH_TITLE(),
+            WITH_WEBLOGO: HEIGHT_THRESHOLDS.WITH_WEBLOGO(),
+            WITH_BOTH: HEIGHT_THRESHOLDS.WITH_BOTH()
+        };
+    }
 }
 //# sourceMappingURL=sequence-position-scroller.js.map