react-msaview 5.0.4 → 5.0.5

package/dist/components/ConservationTrack.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { observer } from 'mobx-react';
+import { drawConservationBars } from "./tracks/renderTracksSvg.js";
 const ConservationBlock = observer(function ({ model, offsetX, trackHeight, }) {
     const { blockSize, scrollX, colWidth, highResScaleFactor, conservation } = model;
     const ref = useRef(null);
@@ -15,15 +16,14 @@ const ConservationBlock = observer(function ({ model, offsetX, trackHeight, }) {
         ctx.scale(highResScaleFactor, highResScaleFactor);
         ctx.clearRect(0, 0, blockSize, trackHeight);
         ctx.translate(-offsetX, 0);
-        const xStart = Math.max(0, Math.floor(offsetX / colWidth));
-        const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth));
-        for (let i = xStart; i < xEnd && i < conservation.length; i++) {
-            const value = conservation[i];
-            const barHeight = value * trackHeight;
-            const x = i * colWidth;
-            ctx.fillStyle = 'gray';
-            ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight);
-        }
+        drawConservationBars({
+            ctx,
+            conservation,
+            colWidth,
+            trackHeight,
+            offsetX,
+            blockSize,
+        });
     }, [
         blockSize,
         colWidth,

package/dist/components/ConservationTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConservationTrack.js","sourceRoot":"","sources":["../../src/components/ConservationTrack.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ConservationTrack.js","sourceRoot":"","sources":["../../src/components/ConservationTrack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAKlE,MAAM,iBAAiB,GAAG,QAAQ,CAAC,UAAU,EAC3C,KAAK,EACL,OAAO,EACP,WAAW,GAKZ;IACC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,YAAY,EAAE,GACtE,KAAK,CAAA;IAEP,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAM;QACR,CAAC;QAED,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,GAAG,CAAC,cAAc,EAAE,CAAA;QACpB,GAAG,CAAC,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAA;QACjD,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,WAAW,CAAC,CAAA;QAC3C,GAAG,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;QAE1B,oBAAoB,CAAC;YACnB,GAAG;YACH,YAAY;YACZ,QAAQ;YACR,WAAW;YACX,OAAO;YACP,SAAS;SACV,CAAC,CAAA;IACJ,CAAC,EAAE;QACD,SAAS;QACT,QAAQ;QACR,WAAW;QACX,OAAO;QACP,kBAAkB;QAClB,YAAY;KACb,CAAC,CAAA;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,WAAW,GAAG,kBAAkB,EACxC,KAAK,EAAE,SAAS,GAAG,kBAAkB,EACrC,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,OAAO,GAAG,OAAO;YACvB,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,WAAW;SACpB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,iBAAiB,GAAG,QAAQ,CAAC,UAAU,EAC3C,KAAK,EACL,KAAK,GAIN;IACC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IACvC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAA;IAEtC,OAAO,CACL,6BACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,WAAW;YACnB,KAAK,EAAE,YAAY;YACnB,QAAQ,EAAE,QAAQ;SACnB,IAEA,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACjB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,EAAE,EACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,EAAE,EACX,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,iBAAiB,CAAA"}

package/dist/components/MSAView.js

@@ -15,27 +15,34 @@ const TopArea = observer(function ({ model }) {
         showHorizontalScrollbar ? React.createElement(Minimap, { model: model }) : null));
 });
 const TrackColumnIndicator = observer(function ({ model, }) {
-    const { mouseCol, mouseClickCol, colWidth, scrollX, treeAreaWidth, resizeHandleWidth, totalTrackAreaHeight, } = model;
+    const { mouseCol, mouseClickCol, colWidth, scrollX, treeAreaWidth, resizeHandleWidth, totalTrackAreaHeight, msaAreaWidth, verticalScrollbarWidth, } = model;
     const left = treeAreaWidth + resizeHandleWidth;
-    return (React.createElement(React.Fragment, null,
+    const clipWidth = msaAreaWidth - verticalScrollbarWidth;
+    return (React.createElement("div", { style: {
+            position: 'absolute',
+            left,
+            top: 0,
+            width: clipWidth,
+            height: totalTrackAreaHeight,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+        } },
         mouseCol !== undefined ? (React.createElement("div", { style: {
                 position: 'absolute',
-                left: left + mouseCol * colWidth + scrollX,
+                left: mouseCol * colWidth + scrollX,
                 top: 0,
                 width: colWidth,
                 height: totalTrackAreaHeight,
                 backgroundColor: 'rgba(0,0,0,0.15)',
-                pointerEvents: 'none',
                 zIndex: 100,
             } })) : null,
         mouseClickCol !== undefined ? (React.createElement("div", { style: {
                 position: 'absolute',
-                left: left + mouseClickCol * colWidth + scrollX,
+                left: mouseClickCol * colWidth + scrollX,
                 top: 0,
                 width: colWidth,
                 height: totalTrackAreaHeight,
                 backgroundColor: 'rgba(128,128,0,0.2)',
-                pointerEvents: 'none',
                 zIndex: 100,
             } })) : null));
 });

package/dist/components/MSAView.js.map

@@ -1 +1 @@
-{"version":3,"file":"MSAView.js","sourceRoot":"","sources":["../../src/components/MSAView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MSAView.js","sourceRoot":"","sources":["../../src/components/MSAView.tsx"],"names":[],"mappings":"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"}

package/dist/components/TextTrack.js

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import { colorContrast } from "../util.js";
+import { drawTextTrackContent } from "./tracks/renderTracksSvg.js";
 const AnnotationBlock = observer(function ({ track, model, offsetX, }) {
     const { blockSize, scrollX, bgColor, colorScheme: modelColorScheme, colWidth, fontSize, rowHeight, highResScaleFactor, } = model;
     const { model: { customColorScheme, data }, } = track;
@@ -17,29 +18,23 @@ const AnnotationBlock = observer(function ({ track, model, offsetX, }) {
         if (!ctx) {
             return;
         }
-        // this logic is very similar to MSACanvas
         ctx.resetTransform();
         ctx.scale(highResScaleFactor, highResScaleFactor);
         ctx.clearRect(0, 0, blockSize, rowHeight);
         ctx.translate(-offsetX, 0);
         ctx.textAlign = 'center';
         ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`);
-        const xStart = Math.max(0, Math.floor(offsetX / colWidth));
-        const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth));
-        const str = data?.slice(xStart, xEnd);
-        for (let i = 0; str && i < str.length; i++) {
-            const letter = str[i];
-            const color = colorScheme[letter.toUpperCase()];
-            if (bgColor) {
-                const x = i * colWidth + offsetX - (offsetX % colWidth);
-                ctx.fillStyle = color || 'white';
-                ctx.fillRect(x, 0, colWidth, rowHeight);
-                if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
-                    ctx.fillStyle = contrastScheme[letter.toUpperCase()] || 'black';
-                    ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1); // +1 to avoid cutoff at height:10
-                }
-            }
-        }
+        drawTextTrackContent({
+            ctx,
+            data,
+            colorScheme,
+            contrastScheme,
+            bgColor,
+            colWidth,
+            rowHeight,
+            offsetX,
+            blockSize,
+        });
     }, [
         fontSize,
         bgColor,

package/dist/components/TextTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextTrack.js","sourceRoot":"","sources":["../../src/components/TextTrack.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextTrack.js","sourceRoot":"","sources":["../../src/components/TextTrack.tsx"],"names":[],"mappings":"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"}

package/dist/components/msa/MSAMouseoverCanvas.js

@@ -5,7 +5,8 @@ import { observer } from 'mobx-react';
 import { renderMouseover } from "./renderMSAMouseover.js";
 const MSAMouseoverCanvas = observer(function ({ model, }) {
     const ref = useRef(null);
-    const { height, width } = model;
+    const { height, msaAreaWidth, verticalScrollbarWidth } = model;
+    const width = msaAreaWidth - verticalScrollbarWidth;
     useEffect(() => {
         const ctx = ref.current?.getContext('2d');
         return ctx

package/dist/components/msa/MSAMouseoverCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"MSAMouseoverCanvas.js","sourceRoot":"","sources":["../../../src/components/msa/MSAMouseoverCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAIzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,KAAK,GAGN;IACC,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC3C,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;QACzC,OAAO,GAAG;YACR,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE;gBACX,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;oBACnB,eAAe,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;gBACjC,CAAC;YACH,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAA;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK;YACL,MAAM;YACN,MAAM,EAAE,IAAI;YACZ,aAAa,EAAE,MAAM;SACtB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"MSAMouseoverCanvas.js","sourceRoot":"","sources":["../../../src/components/msa/MSAMouseoverCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAIzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,KAAK,GAGN;IACC,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC3C,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,sBAAsB,EAAE,GAAG,KAAK,CAAA;IAC9D,MAAM,KAAK,GAAG,YAAY,GAAG,sBAAsB,CAAA;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;QACzC,OAAO,GAAG;YACR,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE;gBACX,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;oBACnB,eAAe,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;gBACjC,CAAC;YACH,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAA;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK;YACL,MAAM;YACN,MAAM,EAAE,IAAI;YACZ,aAAa,EAAE,MAAM;SACtB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/components/msa/renderMSAMouseover.js

@@ -3,9 +3,10 @@ const highlightColor = 'rgba(128,128,0,0.2)';
 const referenceColor = 'rgba(0,128,255,0.3)'; // Blue highlight for reference row
 const multiRowHoverColor = 'rgba(255,165,0,0.15)'; // Orange highlight for multi-row tree hover
 export function renderMouseover({ ctx, model, }) {
-    const { mouseCol, colWidth, width, height, rowHeight, scrollX, scrollY, mouseRow, 
+    const { mouseCol, colWidth, msaAreaWidth, verticalScrollbarWidth, height, rowHeight, scrollX, scrollY, mouseRow, 
     // @ts-expect-error
     mouseCol2, mouseClickRow, mouseClickCol, relativeTo, rowNamesSet, hoveredTreeNode, highlightedColumns, } = model;
+    const width = msaAreaWidth - verticalScrollbarWidth;
     ctx.resetTransform();
     ctx.clearRect(0, 0, width, height);
     // Highlight reference row (relativeTo) persistently

package/dist/components/msa/renderMSAMouseover.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderMSAMouseover.js","sourceRoot":"","sources":["../../../src/components/msa/renderMSAMouseover.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"renderMSAMouseover.js","sourceRoot":"","sources":["../../../src/components/msa/renderMSAMouseover.ts"],"names":[],"mappings":"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"}

package/dist/components/tracks/renderTracksSvg.d.ts

@@ -1,5 +1,24 @@
 import type { MsaViewModel } from '../../model.ts';
 import type { BasicTrack } from '../../types.ts';
+export declare function drawConservationBars({ ctx, conservation, colWidth, trackHeight, offsetX, blockSize, }: {
+    ctx: CanvasRenderingContext2D;
+    conservation: number[];
+    colWidth: number;
+    trackHeight: number;
+    offsetX: number;
+    blockSize: number;
+}): void;
+export declare function drawTextTrackContent({ ctx, data, colorScheme, contrastScheme, bgColor, colWidth, rowHeight, offsetX, blockSize, }: {
+    ctx: CanvasRenderingContext2D;
+    data: string | undefined;
+    colorScheme: Record<string, string>;
+    contrastScheme: Record<string, string>;
+    bgColor: boolean;
+    colWidth: number;
+    rowHeight: number;
+    offsetX: number;
+    blockSize: number;
+}): void;
 export declare function renderConservationTrack({ model, ctx, offsetX, offsetY, trackHeight, blockSizeXOverride, highResScaleFactorOverride, }: {
     model: MsaViewModel;
     ctx: CanvasRenderingContext2D;

package/dist/components/tracks/renderTracksSvg.js

@@ -1,20 +1,47 @@
-export function renderConservationTrack({ model, ctx, offsetX, offsetY, trackHeight, blockSizeXOverride, highResScaleFactorOverride, }) {
-    const { blockSize, colWidth, highResScaleFactor, conservation } = model;
-    const bx = blockSizeXOverride ?? blockSize;
-    const k = highResScaleFactorOverride ?? highResScaleFactor;
-    ctx.resetTransform();
-    ctx.scale(k, k);
-    ctx.translate(-offsetX, offsetY);
+export function drawConservationBars({ ctx, conservation, colWidth, trackHeight, offsetX, blockSize, }) {
     const xStart = Math.max(0, Math.floor(offsetX / colWidth));
-    const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth));
+    const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth));
+    ctx.fillStyle = 'gray';
     for (let i = xStart; i < xEnd && i < conservation.length; i++) {
         const value = conservation[i];
         const barHeight = value * trackHeight;
         const x = i * colWidth;
-        const hue = value * 120;
-        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
         ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight);
     }
+}
+export function drawTextTrackContent({ ctx, data, colorScheme, contrastScheme, bgColor, colWidth, rowHeight, offsetX, blockSize, }) {
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+    const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth));
+    const str = data?.slice(xStart, xEnd);
+    for (let i = 0; str && i < str.length; i++) {
+        const letter = str[i];
+        const color = colorScheme[letter.toUpperCase()];
+        if (bgColor) {
+            const x = i * colWidth + offsetX - (offsetX % colWidth);
+            ctx.fillStyle = color || 'white';
+            ctx.fillRect(x, 0, colWidth, rowHeight);
+            if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
+                ctx.fillStyle = contrastScheme[letter.toUpperCase()] || 'black';
+                ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1);
+            }
+        }
+    }
+}
+export function renderConservationTrack({ model, ctx, offsetX, offsetY, trackHeight, blockSizeXOverride, highResScaleFactorOverride, }) {
+    const { blockSize, colWidth, highResScaleFactor, conservation } = model;
+    const bx = blockSizeXOverride ?? blockSize;
+    const k = highResScaleFactorOverride ?? highResScaleFactor;
+    ctx.resetTransform();
+    ctx.scale(k, k);
+    ctx.translate(-offsetX, offsetY);
+    drawConservationBars({
+        ctx,
+        conservation,
+        colWidth,
+        trackHeight,
+        offsetX,
+        blockSize: bx,
+    });
     ctx.resetTransform();
 }
 export function renderTextTrack({ model, ctx, track, offsetX, offsetY, contrastScheme, blockSizeXOverride, highResScaleFactorOverride, }) {
@@ -28,25 +55,17 @@ export function renderTextTrack({ model, ctx, track, offsetX, offsetY, contrastS
     ctx.translate(-offsetX, offsetY);
     ctx.textAlign = 'center';
     ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`);
-    const xStart = Math.max(0, Math.floor(offsetX / colWidth));
-    const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth));
-    const str = data?.slice(xStart, xEnd);
-    for (let i = 0; str && i < str.length; i++) {
-        const letter = str[i];
-        const color = colorScheme[letter.toUpperCase()];
-        const x = i * colWidth + offsetX - (offsetX % colWidth);
-        if (bgColor && color) {
-            ctx.fillStyle = color;
-            ctx.fillRect(x, 0, colWidth, rowHeight);
-        }
-        if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
-            ctx.fillStyle =
-                bgColor && color
-                    ? (contrastScheme[letter.toUpperCase()] ?? 'black')
-                    : 'black';
-            ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1);
-        }
-    }
+    drawTextTrackContent({
+        ctx,
+        data,
+        colorScheme,
+        contrastScheme,
+        bgColor,
+        colWidth,
+        rowHeight,
+        offsetX,
+        blockSize: bx,
+    });
     ctx.resetTransform();
 }
 export function renderAllTracks({ model, ctx, offsetX, contrastScheme, blockSizeXOverride, highResScaleFactorOverride, }) {

package/dist/components/tracks/renderTracksSvg.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTracksSvg.js","sourceRoot":"","sources":["../../../src/components/tracks/renderTracksSvg.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"renderTracksSvg.js","sourceRoot":"","sources":["../../../src/components/tracks/renderTracksSvg.ts"],"names":[],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "5.0.4";
+export declare const version = "5.0.5";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '5.0.4';
+export const version = '5.0.5';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -44,8 +44,8 @@
     "d3-hierarchy": "^3.1.2",
     "flatbush": "^4.4.0",
     "pako": "^2.1.0",
-    "@jbrowse/svgcanvas": "5.0.4",
-    "msa-parsers": "5.0.4"
+    "@jbrowse/svgcanvas": "5.0.5",
+    "msa-parsers": "5.0.5"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/components/ConservationTrack.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useRef } from 'react'
 
 import { observer } from 'mobx-react'
 
+import { drawConservationBars } from './tracks/renderTracksSvg.ts'
+
 import type { MsaViewModel } from '../model.ts'
 import type { BasicTrack } from '../types.ts'
 
@@ -34,17 +36,14 @@ const ConservationBlock = observer(function ({
     ctx.clearRect(0, 0, blockSize, trackHeight)
     ctx.translate(-offsetX, 0)
 
-    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-    const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
-
-    for (let i = xStart; i < xEnd && i < conservation.length; i++) {
-      const value = conservation[i]!
-      const barHeight = value * trackHeight
-      const x = i * colWidth
-
-      ctx.fillStyle = 'gray'
-      ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight)
-    }
+    drawConservationBars({
+      ctx,
+      conservation,
+      colWidth,
+      trackHeight,
+      offsetX,
+      blockSize,
+    })
   }, [
     blockSize,
     colWidth,

package/src/components/MSAView.tsx

@@ -39,22 +39,34 @@ const TrackColumnIndicator = observer(function ({
     treeAreaWidth,
     resizeHandleWidth,
     totalTrackAreaHeight,
+    msaAreaWidth,
+    verticalScrollbarWidth,
   } = model
 
   const left = treeAreaWidth + resizeHandleWidth
+  const clipWidth = msaAreaWidth - verticalScrollbarWidth
 
   return (
-    <>
+    <div
+      style={{
+        position: 'absolute',
+        left,
+        top: 0,
+        width: clipWidth,
+        height: totalTrackAreaHeight,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+      }}
+    >
       {mouseCol !== undefined ? (
         <div
           style={{
             position: 'absolute',
-            left: left + mouseCol * colWidth + scrollX,
+            left: mouseCol * colWidth + scrollX,
             top: 0,
             width: colWidth,
             height: totalTrackAreaHeight,
             backgroundColor: 'rgba(0,0,0,0.15)',
-            pointerEvents: 'none',
             zIndex: 100,
           }}
         />
@@ -63,17 +75,16 @@ const TrackColumnIndicator = observer(function ({
         <div
           style={{
             position: 'absolute',
-            left: left + mouseClickCol * colWidth + scrollX,
+            left: mouseClickCol * colWidth + scrollX,
             top: 0,
             width: colWidth,
             height: totalTrackAreaHeight,
             backgroundColor: 'rgba(128,128,0,0.2)',
-            pointerEvents: 'none',
             zIndex: 100,
           }}
         />
       ) : null}
-    </>
+    </div>
   )
 })
 

package/src/components/TextTrack.tsx

@@ -4,6 +4,7 @@ import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { colorContrast } from '../util.ts'
+import { drawTextTrackContent } from './tracks/renderTracksSvg.ts'
 
 import type { MsaViewModel } from '../model.ts'
 import type { BasicTrack } from '../types.ts'
@@ -48,7 +49,6 @@ const AnnotationBlock = observer(function ({
       return
     }
 
-    // this logic is very similar to MSACanvas
     ctx.resetTransform()
     ctx.scale(highResScaleFactor, highResScaleFactor)
     ctx.clearRect(0, 0, blockSize, rowHeight)
@@ -56,22 +56,17 @@ const AnnotationBlock = observer(function ({
     ctx.textAlign = 'center'
     ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
 
-    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-    const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
-    const str = data?.slice(xStart, xEnd)
-    for (let i = 0; str && i < str.length; i++) {
-      const letter = str[i]!
-      const color = colorScheme[letter.toUpperCase()]
-      if (bgColor) {
-        const x = i * colWidth + offsetX - (offsetX % colWidth)
-        ctx.fillStyle = color || 'white'
-        ctx.fillRect(x, 0, colWidth, rowHeight)
-        if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
-          ctx.fillStyle = contrastScheme[letter.toUpperCase()] || 'black'
-          ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1) // +1 to avoid cutoff at height:10
-        }
-      }
-    }
+    drawTextTrackContent({
+      ctx,
+      data,
+      colorScheme,
+      contrastScheme,
+      bgColor,
+      colWidth,
+      rowHeight,
+      offsetX,
+      blockSize,
+    })
   }, [
     fontSize,
     bgColor,

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -14,7 +14,8 @@ const MSAMouseoverCanvas = observer(function ({
   model: MsaViewModel
 }) {
   const ref = useRef<HTMLCanvasElement>(null)
-  const { height, width } = model
+  const { height, msaAreaWidth, verticalScrollbarWidth } = model
+  const width = msaAreaWidth - verticalScrollbarWidth
   useEffect(() => {
     const ctx = ref.current?.getContext('2d')
     return ctx

package/src/components/msa/renderMSAMouseover.ts

@@ -15,7 +15,8 @@ export function renderMouseover({
   const {
     mouseCol,
     colWidth,
-    width,
+    msaAreaWidth,
+    verticalScrollbarWidth,
     height,
     rowHeight,
     scrollX,
@@ -30,6 +31,7 @@ export function renderMouseover({
     hoveredTreeNode,
     highlightedColumns,
   } = model
+  const width = msaAreaWidth - verticalScrollbarWidth
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)