@datagrok-libraries/bio 5.53.3 → 5.54.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@datagrok-libraries/bio",
   "author": {
-    "name": "Leonid Stolbov",
-    "email": "lstolbov@datagrok.ai"
+    "name": "Davit Rizhinashvili",
+    "email": "drizhinashvili@datagrok.ai"
   },
   "publishConfig": {
     "access": "public"
   },
   "friendlyName": "Datagrok bio library",
-  "version": "5.53.3",
+  "version": "5.54.0",
   "description": "Bio utilities, types supporting Macromolecule, Molecule3D data",
   "dependencies": {
     "@datagrok-libraries/chem-meta": "^1.2.7",
@@ -36,7 +36,7 @@
     "@types/wu": "^2.1.44",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",
-    "datagrok-tools": "latest",
+    "datagrok-tools": "4.14.9",
     "eslint": "8.57.1",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-deprecation": "^3.0.0",
@@ -49,7 +49,7 @@
     "link-utils": "npm link @datagrok-libraries/utils",
     "link-all": "npm link @datagrok-libraries/chem-meta datagrok-api @datagrok-libraries/gridext @datagrok-libraries/utils @datagrok-libraries/ml",
     "build-bio": "git clean -f -X -d ./src && tsc",
-    "build": "tsc",
+    "build": "grok check --soft && tsc",
     "build-all": "npm --prefix ./../../libraries/chem-meta run build && npm --prefix ./../../js-api run build && npm --prefix ./../../libraries/gridext run build && npm --prefix ./../../libraries/utils run build && npm --prefix ./../../libraries/ml run build && npm run build",
     "lint": "eslint \"./src/**/*.ts\"",
     "lint-fix": "eslint \"./src/**/*.ts\" --fix"

package/src/utils/cell-renderer-consts.d.ts

@@ -18,4 +18,9 @@ export declare const enum tempTAGS {
     referenceSequence = "reference-sequence",
     currentWord = "current-word"
 }
+export declare const MULTILINE_TAGS: {
+    renderMultiline: string;
+    monomersPerLine: string;
+    maxVisibleLines: string;
+};
 //# sourceMappingURL=cell-renderer-consts.d.ts.map

package/src/utils/cell-renderer-consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-renderer-consts.d.ts","sourceRoot":"","sources":["cell-renderer-consts.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,4BAA4B;;;CAGxC,CAAC;AAEF,kDAAkD;AAClD,0BAAkB,SAAS;IACzB,gBAAgB,sCAAsC;IACtD,SAAS,+BAA+B;IACxC,kBAAkB,wCAAwC;IAC1D,mBAAmB,yCAAyC;IAC5D,SAAS,+BAA+B;IACxC,aAAa,mCAAmC;IAChD,QAAQ,8BAA8B;IAEtC,uBAAuB,qCAAqC;IAC5D,iBAAiB,uCAAuC;CACzD;AAED,0BAAkB,QAAQ;IACxB,iBAAiB,uBAAuB;IACxC,WAAW,iBAAiB;CAC7B"}
+{"version":3,"file":"cell-renderer-consts.d.ts","sourceRoot":"","sources":["cell-renderer-consts.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,4BAA4B;;;CAGxC,CAAC;AAEF,kDAAkD;AAClD,0BAAkB,SAAS;IACzB,gBAAgB,sCAAsC;IACtD,SAAS,+BAA+B;IACxC,kBAAkB,wCAAwC;IAC1D,mBAAmB,yCAAyC;IAC5D,SAAS,+BAA+B;IACxC,aAAa,mCAAmC;IAChD,QAAQ,8BAA8B;IAEtC,uBAAuB,qCAAqC;IAC5D,iBAAiB,uCAAuC;CACzD;AAED,0BAAkB,QAAQ;IACxB,iBAAiB,uBAAuB;IACxC,WAAW,iBAAiB;CAC7B;AAED,eAAO,MAAM,cAAc;;;;CAI1B,CAAC"}

package/src/utils/cell-renderer-consts.js

@@ -2,4 +2,9 @@ export const rendererSettingsChangedState = {
     true: '1',
     false: '0',
 };
+export const MULTILINE_TAGS = {
+    renderMultiline: '.mm.cellRenderer.renderMultiline',
+    monomersPerLine: '.mm.cellRenderer.monomersPerLine',
+    maxVisibleLines: '.mm.cellRenderer.maxVisibleLines'
+};
 //# sourceMappingURL=cell-renderer-consts.js.map

package/src/utils/cell-renderer-consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell-renderer-consts.js","sourceRoot":"","sources":["cell-renderer-consts.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;CACX,CAAC"}
+{"version":3,"file":"cell-renderer-consts.js","sourceRoot":"","sources":["cell-renderer-consts.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;CACX,CAAC;AAqBF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,eAAe,EAAE,kCAAkC;IACnD,eAAe,EAAE,kCAAkC;IACnD,eAAe,EAAE,kCAAkC;CACpD,CAAC"}

package/src/utils/cell-renderer-monomer-placer.d.ts

@@ -29,10 +29,17 @@ export declare class MonomerPlacer extends CellRendererBackBase<string> {
     _monomerStructureMap: {
         [key: string]: HTMLElement;
     };
+    private _ellipsisBounds;
+    private _totalLinesNeeded;
+    private _lineHeight;
+    private _cellBounds;
     private seqHelper;
     private sysMonomerLib;
     /** View is required to subscribe and handle for data frame changes */
     constructor(gridCol: DG.GridColumn | null, tableCol: DG.Column<string>, logger: ILogger, monomerLengthLimit: number, propsProvider: () => MonomerPlacerProps);
+    private calculateFontBasedSpacing;
+    private shouldUseMultilineRendering;
+    private calculateMultiLineLayoutDynamic;
     init(): Promise<void>;
     static getFontSettings(tableCol?: DG.Column): {
         font: string;
@@ -45,8 +52,8 @@ export declare class MonomerPlacer extends CellRendererBackBase<string> {
     /** Returns monomers lengths of the {@link rowIdx} and cumulative sums for borders, monomer places */
     getCellMonomerLengths(rowIdx: number, newWidth: number): [number[], number[]];
     private getSummedMonomerLengths;
-    private getCellMonomerLengthsForSeq;
     private getCellMonomerLengthsForSeqValue;
+    private getCellMonomerLengthsForSeq;
     private getCellMonomerLengthsForSeqMsa;
     /** Returns seq position for pointer x */
     getPosition(rowIdx: number, x: number, width: number, positionShiftPadding?: number): number | null;

package/src/utils/cell-renderer-monomer-placer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-renderer-monomer-placer.d.ts","sourceRoot":"","sources":["cell-renderer-monomer-placer.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAKtC,OAAO,EAAW,kBAAkB,EAA0C,MAAM,iBAAiB,CAAC;AAEtG,OAAO,EAAC,oBAAoB,EAAqB,MAAM,2BAA2B,CAAC;AACnF,OAAO,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAKjC,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAM/C,KAAK,kBAAkB,GAAG;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,kBAAkB,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,cAAc,qBAAqB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,QAAQ,CAAC;AAE5C;mCACmC;AACnC,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAwBlG;AAED,qBAAa,aAAc,SAAQ,oBAAoB,CAAC,MAAM,CAAC;IAsBpD,kBAAkB,EAAE,MAAM;IACjC,OAAO,CAAC,QAAQ,CAAC,aAAa;IAtBhC,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,kBAAkB,CAA2B;IAGrD,OAAO,KAAK,cAAc,GAAwE;IAC3F,KAAK,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,cAAc,CAAY;IAClC,OAAO,CAAC,6BAA6B,CAAa;IAE3C,iBAAiB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE,CAAM;IACvD,oBAAoB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE,CAAM;IAEjE,OAAO,CAAC,SAAS,CAAc;IAE/B,OAAO,CAAC,aAAa,CAAgC;IAErD,sEAAsE;gBAEpE,OAAO,EAAE,EAAE,CAAC,UAAU,GAAG,IAAI,EAC7B,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAC3B,MAAM,EAAE,OAAO,EACR,kBAAkB,EAAE,MAAM,EAChB,aAAa,EAAE,MAAM,kBAAkB;IA+B7C,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;WAmBpB,eAAe,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,MAAM;;;;IAWzC,KAAK,IAAI,MAAM;IAIxB,SAAS,CAAC,aAAa,IAAI,eAAe,GAAG,IAAI;cAI9B,KAAK,IAAI,IAAI;IAWhC,SAAS,CAAC,cAAc,IAAI,IAAI;IAIhC,qGAAqG;IAC9F,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC;IAmBpF,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,2BAA2B;IAgCnC,OAAO,CAAC,gCAAgC;IAqBxC,OAAO,CAAC,8BAA8B;IAoDtC,yCAAyC;IAClC,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IASnG,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO1C,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO7C,OAAO,CAAC,OAAO,CAAa;IAE5B,IAAI,aAAa,IAAI,MAAM,CAG1B;IAED,OAAO,CAAC,qBAAqB,CAAa;IAE1C,MAAM,CAAC,CAAC,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAC5E,QAAQ,EAAE,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,EAAE,CAAC,aAAa;IA0IrD,OAAO,CAAC,4BAA4B;IAI3B,WAAW,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,GAAG,IAAI;CAkDjE;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,CAAC,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAC/F,MAAM,CAER"}
+{"version":3,"file":"cell-renderer-monomer-placer.d.ts","sourceRoot":"","sources":["cell-renderer-monomer-placer.ts"],"names":[],"mappings":"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"}

package/src/utils/cell-renderer-monomer-placer.js

@@ -51,6 +51,10 @@ export class MonomerPlacer extends CellRendererBackBase {
         this._processedMaxVisibleSeqLength = 0;
         this._monomerLengthMap = {}; // caches the lengths to save time on g.measureText
         this._monomerStructureMap = {}; // caches the atomic structures of monomers
+        this._ellipsisBounds = undefined;
+        this._totalLinesNeeded = 0;
+        this._lineHeight = 20;
+        this._cellBounds = new Map();
         this.sysMonomerLib = null;
         this.padding = 5;
         this._leftThreeDotsPadding = 0;
@@ -64,18 +68,88 @@ export class MonomerPlacer extends CellRendererBackBase {
         if (this.tableCol && this.gridCol) {
             this.subs.push(this.tableCol.dataFrame.onCurrentRowChanged.subscribe(() => {
                 const df = this.tableCol.dataFrame;
-                const grid = this.gridCol.grid;
                 if (df.currentRowIdx === -1) {
                     this.tableCol.temp["reference-sequence" /* tempTAGS.referenceSequence */] = null;
                     this.tableCol.temp["current-word" /* tempTAGS.currentWord */] = null;
                     this.invalidateGrid();
                 }
             }));
+            const resetTriggerTags = [
+                bioTAGS.positionShift,
+                'renderMultiline'
+            ];
+            this.subs.push(DG.debounce(this.tableCol.dataFrame.onMetadataChanged.pipe(operators.filter((a) => a.args.source === this.tableCol && resetTriggerTags.includes(a.args.key))), 200).subscribe((_) => {
+                this.reset();
+            }));
             this.subs.push(DG.debounce(this.tableCol.dataFrame.onMetadataChanged.pipe(operators.filter((a) => a.args.source === this.tableCol && a.args.key === bioTAGS.positionShift)), 200).subscribe((_) => {
                 this.reset();
             }));
         }
     }
+    calculateFontBasedSpacing(g) {
+        const metrics = g.measureText('M');
+        // Get font size directly from the column's temp properties for safety.
+        // This avoids parsing the font string and breaking the props interface.
+        let fontSize = 12; // Default font size
+        if (this.tableCol?.temp[".mm.cellRenderer.fontSize" /* MmcrTemps.fontSize */]) {
+            const sizeFromCol = this.tableCol.temp[".mm.cellRenderer.fontSize" /* MmcrTemps.fontSize */];
+            if (typeof sizeFromCol === 'number' && !isNaN(sizeFromCol))
+                fontSize = Math.max(sizeFromCol, 1);
+        }
+        // Line height is calculated based on the safe font size.
+        const lineHeight = Math.max(fontSize * 1.4, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + 4);
+        // Monomer spacing is proportional to character width.
+        const monomerSpacing = Math.max(2, this.props.fontCharWidth * 0.2);
+        return { lineHeight, monomerSpacing };
+    }
+    shouldUseMultilineRendering(tableCol) {
+        const renderMultiline = tableCol.getTag('renderMultiline');
+        return renderMultiline === 'true';
+    }
+    calculateMultiLineLayoutDynamic(g, w, h, subParts, positionShift, maxLengthOfMonomer) {
+        // --- 1. Setup ---
+        const { lineHeight, monomerSpacing } = this.calculateFontBasedSpacing(g);
+        const availableWidth = w - (this.padding * 2);
+        // --- 2. Find the widest monomer in the sequence to set a uniform column width ---
+        let maxMonomerWidth = 0;
+        const monomers = [];
+        if (subParts.length > 0) {
+            for (let i = positionShift; i < subParts.length; i++) {
+                const om = subParts.getOriginal(i);
+                const shortMon = this.props.monomerToShort(om, maxLengthOfMonomer);
+                monomers.push({ text: shortMon, posIdx: i });
+                maxMonomerWidth = Math.max(maxMonomerWidth, g.measureText(shortMon).width);
+            }
+        }
+        if (monomers.length === 0)
+            return { lineLayouts: [], lineHeight: lineHeight };
+        // --- 3. Calculate how many uniform columns can fit ---
+        const uniformColumnWidth = maxMonomerWidth;
+        let colsPerLine = Math.floor((availableWidth + monomerSpacing) / (uniformColumnWidth + monomerSpacing));
+        colsPerLine = Math.max(1, colsPerLine);
+        // --- 4. Generate the final grid layout ---
+        const availableHeightForLines = h - (this.padding * 2);
+        const linesToRenderCount = Math.max(0, Math.floor(availableHeightForLines / lineHeight));
+        const lineLayouts = [];
+        let monomerIdx = 0;
+        for (let lineIdx = 0; lineIdx < linesToRenderCount && monomerIdx < monomers.length; lineIdx++) {
+            const elementsForLine = [];
+            for (let colIdx = 0; colIdx < colsPerLine && monomerIdx < monomers.length; colIdx++) {
+                const monomer = monomers[monomerIdx];
+                const xPos = this.padding + colIdx * (uniformColumnWidth + monomerSpacing);
+                elementsForLine.push({
+                    posIdx: monomer.posIdx,
+                    x: xPos,
+                    width: uniformColumnWidth, // Use the uniform width for all slots
+                    om: monomer.text,
+                    isSeparator: false,
+                });
+                monomerIdx++;
+            }
+            lineLayouts.push({ lineIdx: lineIdx, elements: elementsForLine });
+        }
+        return { lineLayouts, lineHeight };
+    }
     async init() {
         await Promise.all([
             (async () => {
@@ -115,6 +189,7 @@ export class MonomerPlacer extends CellRendererBackBase {
         this._monomerLengthList = null;
         this._monomerLengthMap = {};
         this._monomerStructureMap = {};
+        this._cellBounds.clear();
         super.reset();
         this.invalidateGrid();
     }
@@ -157,6 +232,27 @@ export class MonomerPlacer extends CellRendererBackBase {
         }
         return resSum;
     }
+    getCellMonomerLengthsForSeqValue(value, width) {
+        const sh = this.seqHelper.getSeqHandler(this.tableCol);
+        const minMonWidth = this.props.separatorWidth + 1 * this.props.fontCharWidth;
+        const visibleSeqStart = this.positionShift;
+        const maxVisibleSeqLength = Math.ceil(width / minMonWidth) + visibleSeqStart;
+        const seqSS = sh.splitter(value);
+        const visibleSeqEnd = Math.min(maxVisibleSeqLength, seqSS.length);
+        const res = new Array(visibleSeqEnd - visibleSeqStart);
+        let seqWidth = 0;
+        for (let seqMonI = visibleSeqStart; seqMonI < visibleSeqEnd; ++seqMonI) {
+            const seqMonLabel = seqSS.getOriginal(seqMonI);
+            const shortMon = this.props.monomerToShort(seqMonLabel, this.monomerLengthLimit);
+            const separatorWidth = sh.isSeparator() ? this.separatorWidth : this.props.separatorWidth;
+            const seqMonWidth = separatorWidth + shortMon.length * this.props.fontCharWidth;
+            res[seqMonI - visibleSeqStart] = seqMonWidth;
+            seqWidth += seqMonWidth;
+            if (seqWidth > width)
+                break;
+        }
+        return res;
+    }
     getCellMonomerLengthsForSeq(rowIdx) {
         const logPrefix = `${this.toLog()}.getCellMonomerLengthsForSeq()`;
         // this.logger.debug(`${logPrefix}, start`);
@@ -185,27 +281,6 @@ export class MonomerPlacer extends CellRendererBackBase {
         }
         return res;
     }
-    getCellMonomerLengthsForSeqValue(value, width) {
-        const sh = this.seqHelper.getSeqHandler(this.tableCol);
-        const minMonWidth = this.props.separatorWidth + 1 * this.props.fontCharWidth;
-        const visibleSeqStart = this.positionShift;
-        const maxVisibleSeqLength = Math.ceil(width / minMonWidth) + visibleSeqStart;
-        const seqSS = sh.splitter(value);
-        const visibleSeqEnd = Math.min(maxVisibleSeqLength, seqSS.length);
-        const res = new Array(visibleSeqEnd - visibleSeqStart);
-        let seqWidth = 0;
-        for (let seqMonI = visibleSeqStart; seqMonI < visibleSeqEnd; ++seqMonI) {
-            const seqMonLabel = seqSS.getOriginal(seqMonI);
-            const shortMon = this.props.monomerToShort(seqMonLabel, this.monomerLengthLimit);
-            const separatorWidth = sh.isSeparator() ? this.separatorWidth : this.props.separatorWidth;
-            const seqMonWidth = separatorWidth + shortMon.length * this.props.fontCharWidth;
-            res[seqMonI - visibleSeqStart] = seqMonWidth;
-            seqWidth += seqMonWidth;
-            if (seqWidth > width)
-                break;
-        }
-        return res;
-    }
     getCellMonomerLengthsForSeqMsa() {
         var _a;
         const logPrefix = `${this.toLog()}.getCellMonomerLengthsForSeqMsa()`;
@@ -289,116 +364,143 @@ export class MonomerPlacer extends CellRendererBackBase {
         const isRenderedOnGrid = gridCell.grid?.canvas === g.canvas;
         if (!this.seqHelper)
             return;
-        const gridCol = this.gridCol;
         const tableCol = this.tableCol;
-        const dpr = window.devicePixelRatio;
         const positionShift = this.positionShift;
-        const logPrefix = `${this.toLog()}.render()`;
-        this.logger.debug(`${logPrefix}, start`);
-        // Cell renderer settings
-        let maxLengthOfMonomer = this.monomerLengthLimit;
-        if (mmcrTAGS.maxMonomerLength in tableCol.tags) {
-            const v = parseInt(tableCol.getTag(mmcrTAGS.maxMonomerLength));
-            maxLengthOfMonomer = !isNaN(v) && v ? v : 50;
-        }
-        if (".mm.cellRenderer.maxMonomerLength" /* MmcrTemps.maxMonomerLength */ in tableCol.temp) {
-            const v = tableCol.temp[".mm.cellRenderer.maxMonomerLength" /* MmcrTemps.maxMonomerLength */];
-            maxLengthOfMonomer = !isNaN(v) && v ? v : 50;
-        }
         g.save();
         try {
             const sh = this.seqHelper.getSeqHandler(tableCol);
+            let maxLengthOfMonomer = this.monomerLengthLimit;
+            if (mmcrTAGS.maxMonomerLength in tableCol.tags) {
+                const v = parseInt(tableCol.getTag(mmcrTAGS.maxMonomerLength));
+                maxLengthOfMonomer = !isNaN(v) && v ? v : 50;
+            }
             if (tableCol.temp[".mm.cellRenderer.settingsChanged" /* MmcrTemps.rendererSettingsChanged */] === rendererSettingsChangedState.true ||
                 this.monomerLengthLimit != maxLengthOfMonomer) {
+                // this if means that the mm renderer settings have changed,
+                // particularly monomer representation and max width.
                 let gapLength = 0;
                 const msaGapLength = 8;
                 gapLength = tableCol.temp[".mm.cellRenderer.gapLength" /* MmcrTemps.gapLength */] ?? gapLength;
-                // this event means that the mm renderer settings have changed,
-                // particularly monomer representation and max width.
                 this.setMonomerLengthLimit(maxLengthOfMonomer);
                 this.setSeparatorWidth(sh.isMsa() ? msaGapLength : gapLength);
                 tableCol.temp[".mm.cellRenderer.settingsChanged" /* MmcrTemps.rendererSettingsChanged */] = rendererSettingsChangedState.false;
             }
-            let [maxLengthWords, maxLengthWordsSum] = this.getCellMonomerLengths(gridCell.tableRowIndex, w);
-            const _maxIndex = maxLengthWords.length;
-            const value = gridCell.cell.value;
             const rowIdx = gridCell.cell.rowIndex;
-            const paletteType = tableCol.getTag(bioTAGS.alphabet);
-            const minDistanceRenderer = 50;
+            const value = gridCell.cell.value;
             if (isRenderedOnGrid)
-                w = getUpdatedWidth(gridCol?.grid, g, x, w, dpr);
+                w = getUpdatedWidth(gridCell.grid, g, x, w, window.devicePixelRatio);
             g.beginPath();
-            g.rect(x + this.padding, y, w - this.padding - 1, h);
+            g.rect(x, y, w, h);
             g.clip();
             g.font = this.props?.font ?? '12px monospace';
             g.textBaseline = 'top';
-            //TODO: can this be replaced/merged with splitSequence?
             const units = tableCol.meta.units;
             const aligned = tableCol.getTag(bioTAGS.aligned);
             const separator = tableCol.getTag(bioTAGS.separator) ?? '';
-            const minMonWidth = this.props.separatorWidth + 1 * this.props.fontCharWidth;
-            const splitLimit = Math.ceil(w / minMonWidth) + positionShift;
+            const subParts = isRenderedOnGrid ? sh.getSplitted(rowIdx) : sh.splitter(value);
+            let drawStyle = DrawStyle.classic;
+            if (aligned?.includes('MSA') && units === NOTATION.SEPARATOR)
+                drawStyle = DrawStyle.MSA;
             const tempReferenceSequence = tableCol.temp["reference-sequence" /* tempTAGS.referenceSequence */];
             const tempCurrentWord = this.tableCol.temp["current-word" /* tempTAGS.currentWord */];
-            if (tempCurrentWord && tableCol?.dataFrame?.currentRowIdx === -1)
-                this.tableCol.temp["current-word" /* tempTAGS.currentWord */] = null;
             const referenceSequence = (() => {
-                // @ts-ignore
-                const splitterFunc = sh.getSplitter(splitLimit);
-                const seqSS = splitterFunc(((tempReferenceSequence != null) && (tempReferenceSequence != '')) ?
+                const splitterFunc = sh.splitter;
+                const seqSS = splitterFunc(((tempReferenceSequence != null) && (tempReferenceSequence !== '')) ?
                     tempReferenceSequence : tempCurrentWord ?? '');
-                return wu.count(0).take(seqSS.length).slice(positionShift).map((posIdx) => seqSS.getOriginal(posIdx)).toArray();
+                return wu.count(0).take(seqSS.length).slice(positionShift).map((posIdx) => seqSS.getCanonical(posIdx)).toArray();
             })();
-            const subParts = isRenderedOnGrid ? sh.getSplitted(rowIdx) : sh.splitter(value);
-            if (!isRenderedOnGrid)
-                maxLengthWordsSum = this.getSummedMonomerLengths(this.getCellMonomerLengthsForSeqValue(value, w));
-            let drawStyle = DrawStyle.classic;
-            if (aligned && aligned.includes('MSA') && units == NOTATION.SEPARATOR)
-                drawStyle = DrawStyle.MSA;
-            // if the sequence is rendered in shifted mode, we will also render three dots at start, indicating the shift
-            this._leftThreeDotsPadding = this.shouldRenderShiftedThreeDots(positionShift) ? g.measureText(shiftedLeftPaddingText).width : 0;
-            // currently selected position to highlight
             const selectedPosition = Number.parseInt(tableCol.getTag(bioTAGS.selectedPosition) ?? '-200');
-            const visibleSeqLength = Math.min(subParts.length, splitLimit);
-            for (let posIdx = positionShift; posIdx < visibleSeqLength; ++posIdx) {
-                const om = posIdx < subParts.length ? subParts.getOriginal(posIdx) : sh.defaultGapOriginal;
-                const cm = posIdx < subParts.length ? subParts.getCanonical(posIdx) : sh.defaultGapOriginal;
-                let color = undefinedColor;
-                const monomerLib = this.getMonomerLib();
-                if (monomerLib) {
-                    const biotype = sh.defaultBiotype;
-                    //this.logger.debug(`${logPrefix}, biotype: ${biotype}, amino: ${amino}`);
-                    color = monomerLib.getMonomerTextColor(biotype, cm);
+            const shouldUseMultiLine = this.shouldUseMultilineRendering(tableCol) && drawStyle !== DrawStyle.MSA;
+            if (shouldUseMultiLine) {
+                const currentCellBounds = [];
+                const layout = this.calculateMultiLineLayoutDynamic(g, w, h, subParts, positionShift, maxLengthOfMonomer);
+                // --- NEW: Vertical Centering Logic for Single Lines ---
+                // Default to top-aligned layout
+                let yBase = y + this.padding;
+                // If there's exactly one line of content, calculate a new base Y to center it vertically.
+                if (layout.lineLayouts.length === 1)
+                    yBase = y + (h - layout.lineHeight) / 2;
+                // --- End of New Logic ---
+                for (const lineLayout of layout.lineLayouts) {
+                    // The Y position for each line is now based on our calculated `yBase`.
+                    const lineY = yBase + (lineLayout.lineIdx * layout.lineHeight);
+                    for (const element of lineLayout.elements) {
+                        const elementX = x + element.x;
+                        const monomer = element;
+                        const monomerIndex = monomer.posIdx;
+                        const cm = subParts.getCanonical(monomerIndex);
+                        let color = undefinedColor;
+                        const monomerLib = this.getMonomerLib();
+                        if (monomerLib)
+                            color = monomerLib.getMonomerTextColor(sh.defaultBiotype, cm);
+                        let transparencyRate = 0.0;
+                        if (gridCell.tableRowIndex !== tableCol.dataFrame.currentRowIdx && referenceSequence.length > 0) {
+                            const refIndex = monomerIndex - positionShift;
+                            if (refIndex >= 0 && refIndex < referenceSequence.length) {
+                                const currentMonomerCanonical = cm;
+                                const refMonomerCanonical = referenceSequence[refIndex];
+                                if (currentMonomerCanonical === refMonomerCanonical)
+                                    transparencyRate = 0.7;
+                            }
+                        }
+                        currentCellBounds.push({
+                            lineIdx: lineLayout.lineIdx,
+                            monomerIdx: monomerIndex - positionShift,
+                            bounds: new DG.Rect(element.x, (lineY - y), element.width, layout.lineHeight),
+                            sequencePosition: monomerIndex,
+                        });
+                        printLeftOrCentered(g, monomer.om, elementX, lineY, element.width, layout.lineHeight, {
+                            color: color,
+                            isMultiLineContext: true,
+                            transparencyRate: transparencyRate,
+                            selectedPosition: isNaN(selectedPosition) || selectedPosition < 1 ? undefined : selectedPosition,
+                            wordIdx: monomerIndex
+                        });
+                    }
                 }
-                g.fillStyle = undefinedColor;
-                const last = posIdx === subParts.length - 1;
-                /*x1 = */
-                const opts = {
-                    color: color, pivot: 0, left: true, transparencyRate: 1.0, separator: separator, last: last,
-                    drawStyle: drawStyle, maxWord: maxLengthWordsSum, wordIdx: posIdx - positionShift, gridCell: gridCell,
-                    referenceSequence: referenceSequence, maxLengthOfMonomer: maxLengthOfMonomer,
-                    monomerTextSizeMap: this._monomerLengthMap, logger: this.logger,
-                    selectedPosition: isNaN(selectedPosition) || selectedPosition < 1 ? undefined : selectedPosition - positionShift,
-                };
-                printLeftOrCentered(g, om, x + this.padding + this._leftThreeDotsPadding, y, w, h, opts);
-                if (minDistanceRenderer > w)
-                    break;
+                if (gridCell.tableRowIndex !== null)
+                    this._cellBounds.set(gridCell.tableRowIndex, currentCellBounds);
             }
-            if (this.shouldRenderShiftedThreeDots(positionShift)) {
-                const opts = {
-                    color: undefinedColor, pivot: 0, left: true, transparencyRate: 1.0, separator: separator, last: false,
-                    drawStyle: drawStyle, maxWord: maxLengthWordsSum, wordIdx: 0, gridCell: gridCell,
-                    maxLengthOfMonomer: maxLengthOfMonomer,
-                    monomerTextSizeMap: this._monomerLengthMap, logger: this.logger,
-                };
-                printLeftOrCentered(g, shiftedLeftPaddingText, x + this.padding, y, w, h, opts);
+            else {
+                // --- Single-line rendering path (is unchanged) ---
+                this._leftThreeDotsPadding = this.shouldRenderShiftedThreeDots(positionShift) ? g.measureText(shiftedLeftPaddingText).width : 0;
+                let [, maxLengthWordsSum] = this.getCellMonomerLengths(gridCell.tableRowIndex, w);
+                if (!isRenderedOnGrid)
+                    maxLengthWordsSum = this.getSummedMonomerLengths(this.getCellMonomerLengthsForSeqValue(value, w));
+                const minMonomerWidth = this.props.separatorWidth + 1 * this.props.fontCharWidth;
+                const visibleSeqLength = Math.min(subParts.length, Math.ceil(w / (minMonomerWidth)) + positionShift);
+                for (let posIdx = positionShift; posIdx < visibleSeqLength; ++posIdx) {
+                    const om = posIdx < subParts.length ? subParts.getOriginal(posIdx) : sh.defaultGapOriginal;
+                    const cm = posIdx < subParts.length ? subParts.getCanonical(posIdx) : sh.defaultGapOriginal;
+                    let color = undefinedColor;
+                    if (this.getMonomerLib())
+                        color = this.getMonomerLib().getMonomerTextColor(sh.defaultBiotype, cm);
+                    const last = posIdx === subParts.length - 1;
+                    const opts = {
+                        color: color, pivot: 0, left: true, transparencyRate: 0.0,
+                        separator: separator, last: last,
+                        drawStyle: drawStyle, maxWord: maxLengthWordsSum, wordIdx: posIdx - positionShift, gridCell: gridCell,
+                        referenceSequence: referenceSequence, maxLengthOfMonomer: maxLengthOfMonomer,
+                        monomerTextSizeMap: this._monomerLengthMap, logger: this.logger,
+                        selectedPosition: isNaN(selectedPosition) || selectedPosition < 1 ? undefined : selectedPosition - positionShift,
+                    };
+                    printLeftOrCentered(g, om, x + this.padding + this._leftThreeDotsPadding, y, w, h, opts);
+                }
+                if (this.shouldRenderShiftedThreeDots(positionShift)) {
+                    const opts = {
+                        color: undefinedColor, pivot: 0, left: true, transparencyRate: 0, separator: separator, last: false,
+                        drawStyle: drawStyle, maxWord: maxLengthWordsSum, wordIdx: 0, gridCell: gridCell,
+                        maxLengthOfMonomer: maxLengthOfMonomer,
+                        monomerTextSizeMap: this._monomerLengthMap, logger: this.logger,
+                    };
+                    printLeftOrCentered(g, shiftedLeftPaddingText, x + this.padding, y, w, h, opts);
+                }
             }
         }
         catch (err) {
             const [errMsg, errStack] = errInfo(err);
             this.logger.error(errMsg, undefined, errStack);
             this.errors.push(err);
-            //throw err; // Do not throw to prevent disabling renderer
         }
         finally {
             g.restore();
@@ -411,21 +513,29 @@ export class MonomerPlacer extends CellRendererBackBase {
         const logPrefix = `${this.toLog()}.onMouseMove()`;
         if (!this.seqHelper || gridCell.tableRowIndex == null)
             return;
-        // if (gridCell.cell.column.getTag(bioTAGS.aligned) !== ALIGNMENT.SEQ_MSA)
-        //   return;
         const positionShift = this.positionShift;
         const gridCellBounds = gridCell.bounds;
-        // const value: any = gridCell.cell.value;
-        //
-        // const maxLengthWords: number[] = seqColTemp.getCellMonomerLengths(gridCell.tableRowIndex!);
-        // const maxLengthWordsSum: number[] = new Array<number>(maxLengthWords.length).fill(0);
-        // for (let posI: number = 1; posI < maxLengthWords.length; posI++)
-        //   maxLengthWordsSum[posI] = maxLengthWordsSum[posI - 1] + maxLengthWords[posI];
-        // const maxIndex = maxLengthWords.length;
         const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCellBounds.x);
-        const leftPadding = this.shouldRenderShiftedThreeDots(positionShift) && (this._leftThreeDotsPadding ?? 0) > 0 ? this._leftThreeDotsPadding : 0;
-        const left = this.getPosition(gridCell.tableRowIndex, argsX, gridCellBounds.width, leftPadding);
-        this.logger.debug(`${logPrefix}, start, argsX: ${argsX}, left: ${left}`);
+        const argsY = e.offsetY - gridCellBounds.y;
+        // Reset cursor to default, as ellipsis is gone
+        if (this.gridCol?.grid?.canvas)
+            this.gridCol.grid.canvas.style.cursor = 'default';
+        let left = null;
+        const boundsForCell = this._cellBounds.get(gridCell.tableRowIndex);
+        if (boundsForCell) {
+            for (const bound of boundsForCell) {
+                if (bound.bounds.contains(argsX, argsY)) {
+                    left = bound.monomerIdx;
+                    break;
+                }
+            }
+        }
+        else {
+            // Single-line hit detection
+            const leftPadding = this.shouldRenderShiftedThreeDots(positionShift) && (this._leftThreeDotsPadding ?? 0) > 0 ? this._leftThreeDotsPadding : 0;
+            left = this.getPosition(gridCell.tableRowIndex, argsX, gridCellBounds.width, leftPadding);
+        }
+        this.logger.debug(`${logPrefix}, argsX: ${argsX}, argsY: ${argsY}, left: ${left}`);
         const sh = this.seqHelper.getSeqHandler(this.tableCol);
         const seqSS = sh.getSplitted(gridCell.tableRowIndex);
         if (left !== null && left >= 0 && left + positionShift < seqSS.length) {
@@ -437,7 +547,7 @@ export class MonomerPlacer extends CellRendererBackBase {
             };
             const tooltipElements = [];
             let monomerDiv = this._monomerStructureMap[seqMonomer.symbol];
-            if (!monomerDiv || true) {
+            if (!monomerDiv) {
                 const monomerLib = this.getMonomerLib();
                 monomerDiv = this._monomerStructureMap[seqMonomer.symbol] = (() => {
                     return monomerLib ? monomerLib.getTooltip(seqMonomer.biotype, seqMonomer.symbol) :