@datagrok/bio 1.5.7 → 1.5.8

package/src/utils/atomic-works.ts

@@ -1,22 +1,84 @@
 import * as OCL from 'openchemlib/full.js';
+import * as grok from 'datagrok-api/grok';
+
+export async function getMacroMol(monomers: any[][]): Promise<string[]> {
+  let result: string[] = [];
+  const moduleRdkit = await grok.functions.call('Chem:getRdKitModule');
+  for(let i = 0; i < monomers.length; i++) {
+    for (let j = 0; j < monomers[i].length; j++){
+      const mol = moduleRdkit.get_mol(monomers[i][j]['molfile']);
+      const a = mol.get_v3Kmolblock();
+      const indices = getIndices(monomers[i][j], a);
+      monomers[i][j]['indices'] = indices;
+
+      monomers[i][j]['molfile'] = await rotateBackboneV3000(a, indices);
+      mol?.delete();
+    }
+    result.push(linkV3000(monomers[i]));
+  }
 
-export function getMacroMol(molBlocks: string[]): string {
-  for (let i = 0; i < molBlocks.length; i++)
-    molBlocks[i] = rotateBackboneV3000(molBlocks[i]);
+  return result;
+}
+
+function getIndices(monomer: any, molV3000: string): {first: number, last: number, 
+                                    remFirst: number, remLast: number, 
+                                    remBondFirst: number, remBondLast: Number} {
+  const molfile = monomer["molfile"];
+  let indexStart = molfile.indexOf('M  RGP', 0) + 8;
+  let indexEnd = molfile.indexOf('\n', indexStart);
+  const indicesData = molfile.substring(indexStart, indexEnd).replaceAll('  ', ' ').replaceAll('  ', ' ');
+  let parsedData = indicesData.split(' ')
+  const remFirst = parsedData[2] == '1' ? parseInt(parsedData[1]) : parseInt(parsedData[3]);
+  const remLast = parsedData[2] == '2' ? parseInt(parsedData[1]) : parseInt(parsedData[3]);
+  
+  const numbers = extractAtomsBondsNumbersV3000(molV3000);
+  let indexBonds = molV3000.indexOf('M  V30 BEGIN BOND'); // V3000 index for bonds
+  indexBonds = molV3000.indexOf('\n', indexBonds);
+  indexStart = indexBonds;
+  indexEnd = indexBonds;
+
+  let first = 0;
+  let last = 0;
+  let remBondFirst = 0;
+  let remBondLast = 0;
+
+  for (let j = 0; j < numbers.nbond; j++) {
+    if(first == 0 || last == 0){
+      indexStart = molV3000.indexOf('V30', indexStart) + 4;
+      indexEnd = molV3000.indexOf('\n', indexStart);
+      const bondData = molV3000.substring(indexStart, indexEnd).replaceAll('  ', ' ').replaceAll('  ', ' ');
+      parsedData = bondData.split(' ')
+
+      if(parseInt(parsedData[2]) == remFirst){
+        first = parseInt(parsedData[3]);
+        remBondFirst = parseInt(parsedData[0]);
+      }
+      else if(parseInt(parsedData[3]) == remFirst){
+        first = parseInt(parsedData[2]);
+        remBondFirst = parseInt(parsedData[0]);
+      }
+      else if(parseInt(parsedData[2]) == remLast){
+        last = parseInt(parsedData[3]);
+        remBondLast = parseInt(parsedData[0]);
+      }
+      else if(parseInt(parsedData[3]) == remLast){
+        last = parseInt(parsedData[2]);
+        remBondLast = parseInt(parsedData[0]);
+      }
+    }
+  }
 
-  return linkV3000(molBlocks);
+  return {first, last, remFirst, remLast, remBondFirst, remBondLast};
 }
 
-function rotateBackboneV3000(molecule: string): string {
-  let molBlock = OCL.Molecule.fromMolfile(molecule).toMolfileV3();
+async function rotateBackboneV3000(molBlock: string, indices:any): Promise<string> {
   const coordinates = extractAtomDataV3000(molBlock);
   const natom = coordinates.atomIndex.length;
+  const first = indices['first'];
+  const last = indices['last'];
 
-  const indexFivePrime = coordinates.atomIndex.indexOf(1);
-  const indexThreePrime = coordinates.atomIndex.indexOf(natom);
-
-  const xCenter = (coordinates.x[indexThreePrime] + coordinates.x[indexFivePrime])/2;
-  const yCenter = (coordinates.y[indexThreePrime] + coordinates.y[indexFivePrime])/2;
+  const xCenter = (coordinates.x[last] + coordinates.x[first])/2;
+  const yCenter = (coordinates.y[last] + coordinates.y[first])/2;
 
   //place to center
   for (let i = 0; i < natom; i++) {
@@ -25,13 +87,16 @@ function rotateBackboneV3000(molecule: string): string {
   }
 
   let angle = 0;
-  if (coordinates.x[indexFivePrime] == 0)
-    angle = coordinates.y[indexFivePrime] > coordinates.y[indexThreePrime] ? Math.PI/2 : 3*Math.PI/2;
-  else if (coordinates.y[indexFivePrime] == 0)
-    angle = coordinates.x[indexFivePrime] > coordinates.x[indexThreePrime] ? Math.PI : 0;
+  if (coordinates.x[first] == 0)
+    angle = coordinates.y[first] > coordinates.y[last] ? Math.PI/2 : 3*Math.PI/2;
+  else if (coordinates.y[first] == 0)
+    angle = coordinates.x[first] > coordinates.x[last] ? Math.PI : 0;
   else {
-    const derivative = coordinates.y[indexFivePrime]/coordinates.x[indexFivePrime];
-    angle = derivative > 0 ? Math.PI - Math.atan(derivative) : Math.atan(derivative);
+    const derivative = coordinates.y[first]/coordinates.x[first];
+    if(coordinates.x[first] < coordinates.x[last])
+      angle = derivative > 0 ? Math.PI - Math.atan(derivative) : Math.atan(derivative);
+    else
+      angle = derivative > 0 ? Math.atan(derivative) : Math.PI - Math.atan(derivative);
   }
 
   const cos = Math.cos(angle);
@@ -44,7 +109,7 @@ function rotateBackboneV3000(molecule: string): string {
   }
 
   //place to right
-  const xShift = coordinates.x[indexFivePrime];
+  const xShift = coordinates.x[first];
   for (let i = 0; i < natom; i++)
     coordinates.x[i] -= xShift;
 
@@ -103,7 +168,7 @@ function extractAtomDataV3000(molBlock: string) {
   return {atomIndex: indexes, atomType: types, x: x, y: y};
 }
 
-function linkV3000(molBlocks: string[]): string {
+function linkV3000(monomers: any[]): string {
   let macroMolBlock = '\nDatagrok macromolecule handler\n\n';
   macroMolBlock += '  0  0  0  0  0  0            999 V3000\n';
   macroMolBlock += 'M  V30 BEGIN CTAB\n';
@@ -115,112 +180,168 @@ function linkV3000(molBlocks: string[]): string {
   let nbond = 0;
   let xShift = 0;
 
-  for (let i = 0; i < molBlocks.length; i++) {
-    molBlocks[i] = molBlocks[i].replaceAll('(-\nM  V30 ', '(')
+  for (let i = 0; i < monomers.length; i++) {
+    let molfile = monomers[i]['molfile'];
+    const first = monomers[i]['indices']['first'];
+    const last = monomers[i]['indices']['last'];
+    const remFirst = monomers[i]['indices']['remFirst'];
+    const remLast = monomers[i]['indices']['remLast'];
+    const remBondFirst = monomers[i]['indices']['remBondFirst'];
+    const remBondLast = monomers[i]['indices']['remBondLast'];
+    molfile = molfile.replaceAll('(-\nM  V30 ', '(')
       .replaceAll('-\nM  V30 ', '').replaceAll(' )', ')');
-    const numbers = extractAtomsBondsNumbersV3000(molBlocks[i]);
-    const coordinates = extractAtomDataV3000(molBlocks[i]);
+    const numbers = extractAtomsBondsNumbersV3000(molfile);
+    const coordinates = extractAtomDataV3000(molfile);
 
-    let indexAtoms = molBlocks[i].indexOf('M  V30 BEGIN ATOM'); // V3000 index for atoms coordinates
-    indexAtoms = molBlocks[i].indexOf('\n', indexAtoms);
+    let indexAtoms = molfile.indexOf('M  V30 BEGIN ATOM'); // V3000 index for atoms coordinates
+    indexAtoms = molfile.indexOf('\n', indexAtoms);
     let index = indexAtoms;
     let indexEnd = indexAtoms;
+    const totalShift = xShift - coordinates.x[first - 1];
 
     for (let j = 0; j < numbers.natom; j++) {
-      if (coordinates.atomIndex[j] != 1 || i == 0) {
+      if (coordinates.atomIndex[j] != remFirst && coordinates.atomIndex[j] != remLast) { //|| i == 0) {
         //rewrite atom number
-        index = molBlocks[i].indexOf('V30', index) + 4;
-        indexEnd = molBlocks[i].indexOf(' ', index);
-        const atomNumber = parseInt(molBlocks[i].substring(index, indexEnd)) + natom;
-        molBlocks[i] = molBlocks[i].slice(0, index) + atomNumber + molBlocks[i].slice(indexEnd);
+        index = molfile.indexOf('V30', index) + 4;
+        indexEnd = molfile.indexOf(' ', index);
+  
+        let atomNumber = parseInt(molfile.substring(index, indexEnd))
+        atomNumber = (atomNumber > remFirst && atomNumber > remLast) ? atomNumber - 2 :
+                     (atomNumber > remFirst || atomNumber > remLast) ? atomNumber - 1 : atomNumber;
+        atomNumber += natom;
+        molfile = molfile.slice(0, index) + atomNumber + molfile.slice(indexEnd);
 
         //rewrite coordinates
-        index = molBlocks[i].indexOf(' ', index) + 1;
-        index = molBlocks[i].indexOf(' ', index) + 1;
-        indexEnd = molBlocks[i].indexOf(' ', index);
+        index = molfile.indexOf(' ', index) + 1;
+        index = molfile.indexOf(' ', index) + 1;
+        indexEnd = molfile.indexOf(' ', index);
 
-        const totalShift = xShift - coordinates.x[0];
-        let coordinate = Math.round(10000*(parseFloat(molBlocks[i].substring(index, indexEnd)) + totalShift))/10000;
-        molBlocks[i] = molBlocks[i].slice(0, index) + coordinate + molBlocks[i].slice(indexEnd);
+        let coordinate = Math.round(10000*(parseFloat(molfile.substring(index, indexEnd)) + totalShift))/10000;
+        molfile = molfile.slice(0, index) + coordinate + molfile.slice(indexEnd);
 
-        index = molBlocks[i].indexOf(' ', index) + 1;
-        indexEnd = molBlocks[i].indexOf(' ', index);
-        coordinate = Math.round(10000*(parseFloat(molBlocks[i].substring(index, indexEnd))))/10000;
-        molBlocks[i] = molBlocks[i].slice(0, index) + coordinate + molBlocks[i].slice(indexEnd);
+        index = molfile.indexOf(' ', index) + 1;
+        indexEnd = molfile.indexOf(' ', index);
+        coordinate = Math.round(10000*(parseFloat(molfile.substring(index, indexEnd))))/10000;
+        molfile = molfile.slice(0, index) + coordinate + molfile.slice(indexEnd);
 
-        index = molBlocks[i].indexOf('\n', index) + 1;
+        index = molfile.indexOf('\n', index) + 1;
       } else {
-        index = molBlocks[i].indexOf('M  V30', index) - 1;
-        indexEnd = molBlocks[i].indexOf('\n', index + 1);
-        molBlocks[i] = molBlocks[i].slice(0, index) + molBlocks[i].slice(indexEnd);
+        index = molfile.indexOf('M  V30', index) - 1;
+        indexEnd = molfile.indexOf('\n', index + 1);
+        molfile = molfile.slice(0, index) + molfile.slice(indexEnd);
       }
     }
 
-    const indexAtomsEnd = molBlocks[i].indexOf('M  V30 END ATOM');
-    atomBlock += molBlocks[i].substring(indexAtoms + 1, indexAtomsEnd);
+    const indexAtomsEnd = molfile.indexOf('M  V30 END ATOM');
+    atomBlock += molfile.substring(indexAtoms + 1, indexAtomsEnd);
 
-    let indexBonds = molBlocks[i].indexOf('M  V30 BEGIN BOND'); // V3000 index for bonds
-    indexBonds = molBlocks[i].indexOf('\n', indexBonds);
+    let indexBonds = molfile.indexOf('M  V30 BEGIN BOND'); // V3000 index for bonds
+    indexBonds = molfile.indexOf('\n', indexBonds);
     index = indexBonds;
     indexEnd = indexBonds;
+    let bondNumber = 0;
 
     for (let j = 0; j < numbers.nbond; j++) {
       //rewrite bond number
-      index = molBlocks[i].indexOf('V30', index) + 4;
-      indexEnd = molBlocks[i].indexOf(' ', index);
-      const bondNumber = parseInt(molBlocks[i].substring(index, indexEnd)) + nbond;
-      molBlocks[i] = molBlocks[i].slice(0, index) + bondNumber + molBlocks[i].slice(indexEnd);
-
-      //rewrite atom pair in bond
-      index = molBlocks[i].indexOf(' ', index) + 1;
-      index = molBlocks[i].indexOf(' ', index) + 1;
-      indexEnd = molBlocks[i].indexOf(' ', index);
-      let atomNumber = parseInt(molBlocks[i].substring(index, indexEnd)) + natom;
-      molBlocks[i] = molBlocks[i].slice(0, index) + atomNumber + molBlocks[i].slice(indexEnd);
-      index = molBlocks[i].indexOf(' ', index) + 1;
-      indexEnd = Math.min(molBlocks[i].indexOf('\n', index), molBlocks[i].indexOf(' ', index));
-      atomNumber = parseInt(molBlocks[i].substring(index, indexEnd)) + natom;
-      molBlocks[i] = molBlocks[i].slice(0, index) + atomNumber + molBlocks[i].slice(indexEnd);
-
-      index = molBlocks[i].indexOf('\n', index) + 1;
-    }
+      index = molfile.indexOf('V30', index) + 4;
+      indexEnd = molfile.indexOf(' ', index);
+      bondNumber = parseInt(molfile.substring(index, indexEnd));
+
+      if(bondNumber == remBondFirst || bondNumber == remBondLast){
+        indexEnd = molfile.indexOf('\n', index) + 1;
+        index -=7;
+        molfile = molfile.slice(0, index) + molfile.slice(indexEnd);
+        continue
+      }
 
-    const indexBondEnd = molBlocks[i].indexOf('M  V30 END BOND');
-    bondBlock += molBlocks[i].substring(indexBonds + 1, indexBondEnd);
+      bondNumber = (bondNumber > remBondFirst && bondNumber > remBondLast) ? bondNumber - 2 :
+                   (bondNumber > remBondFirst || bondNumber > remBondLast) ? bondNumber - 1 : bondNumber;
+      bondNumber += nbond;
 
-    let indexCollection = molBlocks[i].indexOf('M  V30 MDLV30/STEABS ATOMS=('); // V3000 index for collections
+      molfile = molfile.slice(0, index) + bondNumber + molfile.slice(indexEnd);
 
-    while (indexCollection != -1) {
-      indexCollection += 28;
-      const collectionEnd = molBlocks[i].indexOf(')', indexCollection);
-      const collectionEntries = molBlocks[i].substring(indexCollection, collectionEnd).split(' ').slice(1);
-      collectionEntries.forEach((e) => {
-        collection.push(parseInt(e) + natom);
-      });
-      indexCollection = collectionEnd;
-      indexCollection = molBlocks[i].indexOf('M  V30 MDLV30/STEABS ATOMS=(', indexCollection);
+      //rewrite atom pair in bond
+      index = molfile.indexOf(' ', index) + 1;
+      index = molfile.indexOf(' ', index) + 1;
+      indexEnd = molfile.indexOf(' ', index);
+      let atomNumber = parseInt(molfile.substring(index, indexEnd))
+      atomNumber = (atomNumber > remFirst && atomNumber > remLast) ? atomNumber - 2 :
+                   (atomNumber > remFirst || atomNumber > remLast) ? atomNumber - 1 : atomNumber;
+      atomNumber += natom;
+      molfile = molfile.slice(0, index) + atomNumber + molfile.slice(indexEnd);
+      index = molfile.indexOf(' ', index) + 1;
+      indexEnd = Math.min(molfile.indexOf('\n', index), molfile.indexOf(' ', index));
+      atomNumber = parseInt(molfile.substring(index, indexEnd))
+      atomNumber = (atomNumber > remFirst && atomNumber > remLast) ? atomNumber - 2 :
+                   (atomNumber > remFirst || atomNumber > remLast) ? atomNumber - 1 : atomNumber;
+      atomNumber += natom;
+      molfile = molfile.slice(0, index) + atomNumber + molfile.slice(indexEnd);
+
+      index = molfile.indexOf('\n', index) + 1;
     }
 
-    natom += numbers.natom - 1;
-    nbond += numbers.nbond;
-    xShift += coordinates.x[numbers.natom - 1] - coordinates.x[0];
-  }
-
-  const entries = 4;
-  const collNumber = Math.ceil(collection.length / entries);
-  collectionBlock += 'M  V30 MDLV30/STEABS ATOMS=(' + collection.length + ' -\n';
-  for (let i = 0; i < collNumber; i++) {
-    collectionBlock += 'M  V30 ';
-    const entriesCurrent = i + 1 == collNumber ? collection.length - (collNumber - 1)*entries : entries;
-    for (let j = 0; j < entriesCurrent; j++) {
-      collectionBlock += (j + 1 == entriesCurrent) ?
-        (i == collNumber - 1 ? collection[entries*i + j] + ')\n' : collection[entries*i + j] + ' -\n') :
-        collection[entries*i + j] + ' ';
+    const indexBondEnd = molfile.indexOf('M  V30 END BOND');
+    bondBlock += molfile.substring(indexBonds + 1, indexBondEnd);
+    //let indexCollection = molfile.indexOf('M  V30 MDLV30/STEABS ATOMS=('); // V3000 index for collections
+
+    // while (indexCollection != -1) {
+    //   indexCollection += 28;
+    //   const collectionEnd = molfile.indexOf(')', indexCollection);
+    //   const collectionEntries = molfile.substring(indexCollection, collectionEnd).split(' ').slice(1);
+    //   collectionEntries.forEach((e: string) => {
+    //     collection.push(parseInt(e) + natom);
+    //   });
+    //   indexCollection = collectionEnd;
+    //   indexCollection = molfile.indexOf('M  V30 MDLV30/STEABS ATOMS=(', indexCollection);
+    // }
+
+    natom += numbers.natom - 2;
+    nbond += numbers.nbond - 2;
+    xShift += coordinates.x[last] - coordinates.x[first] + 1;
+
+    if(i == monomers.length -1){
+      natom++;
+      const shift = xShift + 0.2;
+      atomBlock += 'M  V30 ' + natom + ' O ' + shift + ' 0 0.000000 0\n';
+    }
+    nbond++;
+    if(i == monomers.length -1){
+      const rightTerminal = (last > remFirst && last > remLast) ? last + natom - (numbers.natom - 2) - 3:
+                            (last > remFirst || last > remLast) ? last + natom - (numbers.natom - 2) - 2 : 
+                            last + natom - (numbers.natom - 2) - 1;
+      bondBlock += 'M  V30 ' + nbond + ' 1 ' + rightTerminal + ' ' + natom + '\n';
+    } else{
+      const rightTerminal = (last > remFirst && last > remLast) ? last + natom - (numbers.natom - 2) - 2:
+                            (last > remFirst || last > remLast) ? last + natom - (numbers.natom - 2) - 1 : 
+                            last + natom - (numbers.natom - 2);
+      
+      const next = monomers[i + 1]['indices'];
+      const nextFirst = next['first'];
+      const nextRemFirst = next['remFirst'];
+      const nextRemLast = next['remLast'];
+
+      const leftTerminal = (nextFirst > nextRemFirst && nextFirst > nextRemLast) ? nextFirst + natom - 2 :
+                           (nextFirst > nextRemFirst || nextFirst > nextRemLast) ? nextFirst + natom - 1 :
+                            nextFirst + natom;
+
+      bondBlock += 'M  V30 ' + nbond + ' 1 ' + rightTerminal + ' ' + leftTerminal + '\n';
     }
   }
 
+  // const entries = 4;
+  // const collNumber = Math.ceil(collection.length / entries);
+  // collectionBlock += 'M  V30 MDLV30/STEABS ATOMS=(' + collection.length + ' -\n';
+  // for (let i = 0; i < collNumber; i++) {
+  //   collectionBlock += 'M  V30 ';
+  //   const entriesCurrent = i + 1 == collNumber ? collection.length - (collNumber - 1)*entries : entries;
+  //   for (let j = 0; j < entriesCurrent; j++) {
+  //     collectionBlock += (j + 1 == entriesCurrent) ?
+  //       (i == collNumber - 1 ? collection[entries*i + j] + ')\n' : collection[entries*i + j] + ' -\n') :
+  //       collection[entries*i + j] + ' ';
+  //   }
+  // }
+
   //generate file
-  natom++;
   macroMolBlock += 'M  V30 COUNTS ' + natom + ' ' + nbond + ' 0 0 0\n';
   macroMolBlock += 'M  V30 BEGIN ATOM\n';
   macroMolBlock += atomBlock;
@@ -228,9 +349,9 @@ function linkV3000(molBlocks: string[]): string {
   macroMolBlock += 'M  V30 BEGIN BOND\n';
   macroMolBlock += bondBlock;
   macroMolBlock += 'M  V30 END BOND\n';
-  macroMolBlock += 'M  V30 BEGIN COLLECTION\n';
-  macroMolBlock += collectionBlock;
-  macroMolBlock += 'M  V30 END COLLECTION\n';
+  //macroMolBlock += 'M  V30 BEGIN COLLECTION\n';
+  //macroMolBlock += collectionBlock;
+  //macroMolBlock += 'M  V30 END COLLECTION\n';
   macroMolBlock += 'M  V30 END CTAB\n';
   macroMolBlock += 'M  END\n';
 

package/src/utils/cell-renderer.ts

@@ -0,0 +1,214 @@
+import * as C from "./constants";
+import {getSeparator} from "./misc";
+import {ChemPalette} from "./chem-palette";
+import * as DG from 'datagrok-api/dg';
+import {AminoacidsPalettes} from "@datagrok-libraries/bio/src/aminoacids";
+import {NucleotidesPalettes} from "@datagrok-libraries/bio/src/nucleotides";
+import {UnknownSeqPalettes} from "@datagrok-libraries/bio/src/unknown";
+import {SplitterFunc, WebLogo} from "@datagrok-libraries/bio/src/viewers/web-logo";
+import {SeqPalette} from "@datagrok-libraries/bio/src/seq-palettes";
+import * as ui from 'datagrok-api/ui';
+
+const lru = new DG.LruCache<any, any>(); 
+
+function getPalleteByType(paletteType: string): SeqPalette  {
+  switch (paletteType) {
+    case 'PT':
+      return  AminoacidsPalettes.GrokGroups;
+    case 'NT':
+      return  NucleotidesPalettes.Chromatogram
+      // other
+    default:
+      return UnknownSeqPalettes.Color;
+  }
+}
+
+export function processSequence(subParts: string[]): [string[], boolean] {
+  const simplified = !subParts.some((amino, index) =>
+      amino.length > 1 &&
+      index != 0 &&
+      index != subParts.length - 1);
+
+  const text: string[] = [];
+  const gap = simplified ? '' : ' ';
+  subParts.forEach((amino: string, index) => {
+    if (index < subParts.length)
+      amino += `${amino ? '' : '-'}${gap}`;
+
+    text.push(amino);
+  });
+  return [text, simplified];
+}
+/**
+ * A function that prints a string aligned to left or centered.
+ *
+ * @param {number} x x coordinate.
+ * @param {number} y y coordinate.
+ * @param {number} w Width.
+ * @param {number} h Height.
+ * @param {CanvasRenderingContext2D} g Canvas rendering context.
+ * @param {string} s String to print.
+ * @param {string} [color=ChemPalette.undefinedColor] String color.
+ * @param {number} [pivot=0] Pirvot.
+ * @param {boolean} [left=false] Is left aligned.
+ * @param {boolean} [hideMod=false] Hide amino acid redidue modifications.
+ * @param {number} [transparencyRate=0.0] Transparency rate where 1.0 is fully transparent
+ * @return {number} x coordinate to start printing at.
+ */
+function printLeftOrCentered(
+    x: number, y: number, w: number, h: number,
+    g: CanvasRenderingContext2D, s: string, color = ChemPalette.undefinedColor,
+    pivot: number = 0, left = false, hideMod = false, transparencyRate: number = 1.0,
+    separator: string = ''): number {
+  g.textAlign = 'start';
+  let colorPart = s.substring(0);
+  let grayPart = separator;
+  const textSize = g.measureText(colorPart + grayPart);
+  const indent = 5;
+
+  const colorTextSize = g.measureText(colorPart);
+  const dy = (textSize.fontBoundingBoxAscent + textSize.fontBoundingBoxDescent) / 2;
+
+  function draw(dx1: number, dx2: number): void {
+    g.fillStyle = color;
+    g.globalAlpha = transparencyRate;
+    g.fillText(colorPart, x + dx1, y + dy);
+    g.fillStyle = '#808080';
+    g.fillText(grayPart, x + dx2, y + dy);
+  }
+
+
+  if (left || textSize.width > w) {
+    draw(indent, indent + colorTextSize.width);
+    return x + colorTextSize.width + g.measureText(grayPart).width;
+  } else {
+    const dx = (w - textSize.width) / 2;
+    draw(dx, dx + colorTextSize.width);
+    return x + dx + colorTextSize.width;
+  }
+}
+function renderSequense(
+      g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
+      cellStyle: DG.GridCellStyle,
+): void {
+    const grid = gridCell.grid;
+    const cell = gridCell.cell;
+    const [type, subtype, paletteType] =  gridCell.cell.column.getTag(DG.TAGS.UNITS).split(":");
+    w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
+    g.save();
+    g.beginPath();
+    g.rect(x, y, w, h);
+    g.clip();
+    g.font = '12px monospace';
+    g.textBaseline = 'top';
+    const s: string = cell.value ?? '';
+
+  //TODO: can this be replaced/merged with splitSequence?
+  const units = gridCell.cell.column.getTag(DG.TAGS.UNITS);
+
+  const palette = getPalleteByType(paletteType);
+
+  const separator = gridCell.cell.column.getTag('separator') ?? '';
+  const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, gridCell.cell.column.getTag('separator') );// splitter,
+
+  const subParts:string[] =  splitterFunc(cell.value);
+
+  const textSize = g.measureText(subParts.join(''));
+  let x1 = Math.max(x, x + (w - textSize.width) / 2);
+
+  subParts.forEach((amino, index) => {
+    let [color, outerAmino,, pivot] = ChemPalette.getColorAAPivot(amino);
+    color = palette.get(amino);
+    g.fillStyle = ChemPalette.undefinedColor;
+    x1 = printLeftOrCentered(x1, y, w, h, g, amino, color, pivot, true, false, 1.0, separator);
+  });
+
+  g.restore();
+}
+
+export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
+  constructor() {
+    super();
+  }
+
+  get name(): string {return 'macromoleculeSequence';}
+
+  get cellType(): string {return C.SEM_TYPES.Macro_Molecule;}
+
+  get defaultHeight(): number {return 30;}
+
+  get defaultWidth(): number {return 230;}
+
+  /**
+   * Cell renderer function.
+   *
+   * @param {CanvasRenderingContext2D} g Canvas rendering context.
+   * @param {number} x x coordinate on the canvas.
+   * @param {number} y y coordinate on the canvas.
+   * @param {number} w width of the cell.
+   * @param {number} h height of the cell.
+   * @param {DG.GridCell} gridCell Grid cell.
+   * @param {DG.GridCellStyle} cellStyle Cell style.
+   * @memberof AlignedSequenceCellRenderer
+   */
+  render(
+      g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
+      cellStyle: DG.GridCellStyle,
+  ): void {
+    const grid = gridCell.grid;
+    const cell = gridCell.cell;
+    const tag = gridCell.cell.column.getTag(DG.TAGS.UNITS);
+    if (tag === 'HELM') {
+      let host = ui.div([], { style: { width: `${w}px`, height: `${h}px`}});
+      host.setAttribute('dataformat', 'helm');
+      host.setAttribute('data', gridCell.cell.value);
+      
+      //@ts-ignore
+      var canvas = new JSDraw2.Editor(host, { width: w, height: h, skin: "w8", viewonly: true });
+      var formula = canvas.getFormula(true);
+      if (!formula) {
+        gridCell.element = ui.divText(gridCell.cell.value, {style: {color: 'red'}});
+      } else {
+        gridCell.element = host;
+        var molWeight = Math.round(canvas.getMolWeight() * 100) / 100;
+        var coef = Math.round(canvas.getExtinctionCoefficient(true) * 100) / 100;
+        var molfile = canvas.getMolfile();
+        var result = formula + ', ' + molWeight + ', ' + coef + ', ' + molfile;
+        lru.set(gridCell.cell.value, result);
+      }
+    } else {
+      const [type, subtype, paletteType] =  gridCell.cell.column.getTag(DG.TAGS.UNITS).split(":");
+      w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
+      g.save();
+      g.beginPath();
+      g.rect(x, y, w, h);
+      g.clip();
+      g.font = '12px monospace';
+      g.textBaseline = 'top';
+      const s: string = cell.value ?? '';
+  
+      //TODO: can this be replaced/merged with splitSequence?
+      const units = gridCell.cell.column.getTag(DG.TAGS.UNITS);
+  
+      const palette = getPalleteByType(paletteType);
+  
+      const separator = gridCell.cell.column.getTag('separator') ?? '';
+      const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, gridCell.cell.column.getTag('separator') );// splitter,
+  
+      const subParts:string[] =  splitterFunc(cell.value);
+      console.log(subParts);
+  
+      const textSize = g.measureText(subParts.join(''));
+      let x1 = Math.max(x, x + (w - textSize.width) / 2);
+  
+      subParts.forEach((amino, index) => {
+        let [color, outerAmino,, pivot] = ChemPalette.getColorAAPivot(amino);
+        color = palette.get(amino);
+        g.fillStyle = ChemPalette.undefinedColor;
+        x1 = printLeftOrCentered(x1, y, w, h, g, amino, color, pivot, true, false, 1.0, separator);
+      });
+  
+      g.restore();
+    }
+  }
+}