@datagrok/bio 1.7.20 → 1.7.23

package/package.json

@@ -2,7 +2,11 @@
   "name": "@datagrok/bio",
   "beta": false,
   "friendlyName": "Bio",
-  "version": "1.7.20",
+  "author": {
+    "name": "Leonid Stolbov",
+    "email": "lstolbov@datagrok.ai"
+  },
+  "version": "1.7.23",
   "description": "Bio is a [package](https://datagrok.ai/help/develop/develop#packages) for the [Datagrok](https://datagrok.ai) platform",
   "repository": {
     "type": "git",
@@ -11,7 +15,7 @@
   },
   "dependencies": {
     "@biowasm/aioli": ">=2.4.0",
-    "@datagrok-libraries/bio": "^3.0.0",
+    "@datagrok-libraries/bio": "^3.0.2",
     "@datagrok-libraries/ml": "^3.0.0",
     "@datagrok-libraries/utils": "^1.4.0",
     "cash-dom": "latest",

package/src/package-test.ts

@@ -11,6 +11,7 @@ import './tests/activity-cliffs-tests';
 import './tests/splitters-test';
 import './tests/renderers-test';
 import './tests/convert-test';
+import './tests/fasta-handler-test';
 import './tests/WebLogo-positions-test';
 
 export const _package = new DG.Package();

package/src/package.ts

@@ -5,7 +5,7 @@ import * as DG from 'datagrok-api/dg';
 
 export const _package = new DG.Package();
 
-import {AlignedSequenceDifferenceCellRenderer, AminoAcidsCellRenderer} from './utils/cell-renderer';
+import {MacromoleculeDifferenceCellRenderer, MonomerCellRenderer} from './utils/cell-renderer';
 import {WebLogo, SeqColStats} from '@datagrok-libraries/bio/src/viewers/web-logo';
 import {VdRegionsViewer} from './viewers/vd-regions-viewer';
 import {runKalign, testMSAEnoughMemory} from './utils/multiple-sequence-alignment';
@@ -26,17 +26,18 @@ import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {FastaFileHandler} from '@datagrok-libraries/bio/src/utils/fasta-handler';
 
 
-
 //tags: init
 export async function initBio(): Promise<void> {
   // apparently HELMWebEditor requires dojo to be initialized first
-  if (DG.Func.find({package: 'Helm', name: 'initHelm'}) != null) {
-    grok.functions.call('Helm:initHelp');
-  }
+  const funcList: DG.Func[] = DG.Func.find({package: 'Helm', name: 'initHelm'});
+  console.debug(`Bio: initBio() funcList.length = ${funcList.length}`);
+  if (funcList.length === 1)
+    await grok.functions.call('Helm:initHelp');
+
   return new Promise((resolve, reject) => {
     // @ts-ignore
     dojo.ready(function() { resolve(null); });
-  });  
+  });
 }
 
 //name: Lru
@@ -240,6 +241,14 @@ export async function multipleSequenceAlignmentAny(table: DG.DataFrame, col: DG.
   return msaCol;
 }
 
+//name: Bio | MSA
+//tags: bio, panel
+//input: column sequence { semType: Macromolecule }
+//output: column result
+export async function panelMSA(col: DG.Column): Promise<DG.Column | null> {
+  return multipleSequenceAlignmentAny(col.dataFrame, col);
+}
+
 //name: Composition Analysis
 //top-menu: Bio | Composition Analysis
 //output: viewer result
@@ -333,20 +342,20 @@ export function convertPanel(col: DG.Column): void {
   convert(col);
 }
 
-//name: aminoAcidsCellRenderer
+//name: monomerCellRenderer
 //tags: cellRenderer
-//meta.cellType: aminoAcids
+//meta.cellType: Monomer
 //output: grid_cell_renderer result
-export function aminoAcidsCellRenderer(): AminoAcidsCellRenderer {
-  return new AminoAcidsCellRenderer();
+export function monomerCellRenderer(): MonomerCellRenderer {
+  return new MonomerCellRenderer();
 }
 
-//name: alignedSequenceDifferenceCellRenderer
+//name: MacromoleculeDifferenceCellRenderer
 //tags: cellRenderer
-//meta.cellType: alignedSequenceDifference
+//meta.cellType: MacromoleculeDifference
 //output: grid_cell_renderer result
-export function alignedSequenceDifferenceCellRenderer(): AlignedSequenceDifferenceCellRenderer {
-  return new AlignedSequenceDifferenceCellRenderer();
+export function macromoleculeDifferenceCellRenderer(): MacromoleculeDifferenceCellRenderer {
+  return new MacromoleculeDifferenceCellRenderer();
 }
 
 //name: testDetectMacromolecule

package/src/tests/WebLogo-positions-test.ts

@@ -1,13 +1,14 @@
+
 import {after, before, category, test, expect, expectObject} from '@datagrok-libraries/utils/src/test';
 
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {PositionInfo, PositionMonomerInfo, WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
-
 category('WebLogo-positions', () => {
   let tvList: DG.TableView[];
   let dfList: DG.DataFrame[];
+  let currentView: DG.View;
 
   const csvDf1 = `seq
     ATC-G-TTGC--
@@ -22,13 +23,14 @@ category('WebLogo-positions', () => {
   before(async () => {
     tvList = [];
     dfList = [];
+    currentView = grok.shell.tv;
   });
 
   after(async () => {
-    dfList.forEach((df: DG.DataFrame) => { grok.shell.closeTable(df); });
+    dfList.forEach((df: DG.DataFrame) => { grok.shell.closeTable(df);});
     tvList.forEach((tv: DG.TableView) => tv.close());
+    currentView = grok.shell.tv;
   });
-
   test('allPositions', async () => {
     const df: DG.DataFrame = DG.DataFrame.fromCsv(csvDf1);
     const tv: DG.TableView = grok.shell.addTableView(df);
@@ -55,12 +57,82 @@ category('WebLogo-positions', () => {
       new PositionInfo('11', {'-': new PositionMonomerInfo(5)}),
       new PositionInfo('12', {'-': new PositionMonomerInfo(5)})
     ];
+    console.log(positions);
+    expect(positions.length,resAllDf1.length);
     // check all positions are equal resAllDf1
     for (let i = 0; i < positions.length; i++) {
       expect(positions[i].name, resAllDf1[i].name);
-        for (const key in positions[i].freq) {
-          expect(positions[i].freq[key].count, resAllDf1[i].freq[key].count);
-        }
+      for (const key in positions[i].freq) {
+        expect(positions[i].freq[key].count, resAllDf1[i].freq[key].count);
+      }
+    }
+
+  });
+  test('positions with shrinkEmptyTail option', async () => {
+    const df: DG.DataFrame = DG.DataFrame.fromCsv(csvDf1);
+    const tv: DG.TableView = grok.shell.addTableView(df);
+
+    const wlViewer: WebLogo = await df.plot.fromType('WebLogo', {'shrinkEmptyTail': true}) as unknown as WebLogo;
+    tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
+
+    tvList.push(tv);
+    dfList.push(df);
+
+    const positions: PositionInfo[] = wlViewer['positions'];
+
+    const resAllDf1: PositionInfo[] = [
+      new PositionInfo('1', {'A': new PositionMonomerInfo(2), '-': new PositionMonomerInfo(3)}),
+      new PositionInfo('2', {'T': new PositionMonomerInfo(5)}),
+      new PositionInfo('3', {'C': new PositionMonomerInfo(5)}),
+      new PositionInfo('4', {'-': new PositionMonomerInfo(5)}),
+      new PositionInfo('5', {'G': new PositionMonomerInfo(5)}),
+      new PositionInfo('6', {'-': new PositionMonomerInfo(3), 'C': new PositionMonomerInfo(2)}),
+      new PositionInfo('7', {'T': new PositionMonomerInfo(5)}),
+      new PositionInfo('8', {'T': new PositionMonomerInfo(5)}),
+      new PositionInfo('9', {'G': new PositionMonomerInfo(5)}),
+      new PositionInfo('10', {'C': new PositionMonomerInfo(5)})
+    ];
+
+    console.log(positions);
+    for (let i = 0; i < positions.length; i++) {
+      expect(positions[i].name, resAllDf1[i].name);
+      for (const key in positions[i].freq) {
+        expect(positions[i].freq[key].count, resAllDf1[i].freq[key].count);
+      }
+    }
+
+  });
+
+  test('positions with skipEmptyPositions option', async () => {
+    const df: DG.DataFrame = DG.DataFrame.fromCsv(csvDf1);
+    const tv: DG.TableView = grok.shell.addTableView(df);
+
+    const wlViewer: WebLogo = await df.plot.fromType('WebLogo', {'skipEmptyPositions': false}) as unknown as WebLogo;
+    tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
+
+    tvList.push(tv);
+    dfList.push(df);
+
+    const positions: PositionInfo[] = wlViewer['positions'];
+
+    const resAllDf1: PositionInfo[] = [
+      new PositionInfo('1', {'A': new PositionMonomerInfo(2), '-': new PositionMonomerInfo(3)}),
+      new PositionInfo('2', {'T': new PositionMonomerInfo(5)}),
+      new PositionInfo('3', {'C': new PositionMonomerInfo(5)}),
+      new PositionInfo('5', {'G': new PositionMonomerInfo(5)}),
+      new PositionInfo('6', {'-': new PositionMonomerInfo(3), 'C': new PositionMonomerInfo(2)}),
+      new PositionInfo('7', {'T': new PositionMonomerInfo(5)}),
+      new PositionInfo('8', {'T': new PositionMonomerInfo(5)}),
+      new PositionInfo('9', {'G': new PositionMonomerInfo(5)}),
+      new PositionInfo('10', {'C': new PositionMonomerInfo(5)})
+    ];
+    console.log(positions);
+
+    for (let i = 0; i < positions.length; i++) {
+      expect(positions[i].name, resAllDf1[i].name);
+      for (const key in positions[i].freq) {
+        expect(positions[i].freq[key].count, resAllDf1[i].freq[key].count);
+      }
     }
 
   });

package/src/tests/WebLogo-test.ts

@@ -146,3 +146,4 @@ export async function _testPickupPaletteAA2(dfAA2: DG.DataFrame) {
 
   expect(cp instanceof AminoacidsPalettes, true);
 }
+

package/src/tests/detectors-test.ts

@@ -125,6 +125,7 @@ MWRSWY-CKHP
     testSpgi100 = 'testSpgi100',
     testUnichemSources = 'testUnichemSources',
     testDmvOffices = 'testDmvOffices',
+    testAlertCollection = 'testAlertCollection',
   }
 
   const samples: { [key: string]: string } = {
@@ -145,6 +146,7 @@ MWRSWY-CKHP
     'testSpgi100': 'System:AppData/Bio/tests/testSpgi100.csv',
     'testUnichemSources': 'System:AppData/Bio/tests/testUnichemSources.csv',
     'testDmvOffices': 'System:AppData/Bio/tests/testDmvOffices.csv',
+    'testAlertCollection': 'System:AppData/Bio/tests/testAlertCollection.csv',
   };
 
   const _samplesDfs: { [key: string]: Promise<DG.DataFrame> } = {};
@@ -342,6 +344,9 @@ MWRSWY-CKHP
   test('samplesTestSpgi100NegativePrimaryScaffoldName', async () => {
     await _testNeg(readSamples(Samples.testSpgi100), 'Primary Scaffold Name');
   });
+  test('samplesTestSpgi100NegativeSampleName', async () => {
+    await _testNeg(readSamples(Samples.testSpgi100), 'Sample Name');
+  });
 
   test('samplesTestUnichemSourcesNegativeSrcUrl', async () => {
     await _testNeg(readSamples(Samples.testUnichemSources), 'src_url');
@@ -356,6 +361,10 @@ MWRSWY-CKHP
   test('samplesTestDmvOfficesNegativeCity', async () => {
     await _testNeg(readSamples(Samples.testDmvOffices), 'City');
   });
+
+  test('samplesTestAlertCollectionNegativeSmarts', async () => {
+    await _testNeg(readSamples(Samples.testAlertCollection), 'smarts');
+  });
 });
 
 export async function _testNeg(readDf: DfReaderFunc, colName: string) {

package/src/tests/fasta-handler-test.ts

@@ -0,0 +1,141 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {category, expectArray, test} from '@datagrok-libraries/utils/src/test';
+import {FastaFileHandler} from '@datagrok-libraries/bio/src/utils/fasta-handler';
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+
+
+category('fastaFileHandler', () => {
+  const fastaNormalFormatting = `>description:1
+MDYKETLLMPKTDFPMRGGLPNKEPQIQEKW
+
+>description:2
+MIEVFLFGIVLGLIPITLAGLFVTAYLQYRRGDQLDL
+
+>description:3
+MMELVLKTIIGPIVVGVVLRIVDKWLNKDK
+
+>description:4
+MDRTDEVSNHTHDKPTLTWFEEIFEEYHSPFHN
+`;
+
+  const fastaExtraSpaces = `>description:1
+     MDYKETLLMPKTDFPMRGGLPNKEPQIQEKW
+
+>description:2
+MI  EVF  LFGIVLGLI  PITLAGLFVTAY        LQYRRGDQLDL
+
+>description:3
+M      MELVLKTI      IGPI    VVGVVLR      IVDKWLNKDK
+
+>description:4
+MDR    TDEVSNHTHDKP        TLTWFEEIFEEYHSPFHN
+    `;
+
+  const fastaExtraNewlines = `>description:1
+
+MDYKETLLMPKTDFPMRGGLPNKEPQIQEKW
+
+>description:2
+MIEVF
+LFGIVLGLI
+PITLAGLFVTA
+YLQYRRGDQLDL
+
+>description:3
+M
+ME
+
+LVLKTIIG
+
+PIVVGVVLRI
+VDKWLNKDK
+
+
+>description:4
+
+MDRT
+
+DEVSNHTHDKP
+
+TLTWFEEIFEE
+
+
+
+YHSPFHN
+`;
+  // a "broken" fasta file
+  // const fastaBroken = `
+    
+  //   >description:1
+// MDYKETLLM
+// PKTDFPMRGGLPN
+// KEPQIQEKW
+
+
+
+  //     >description:2
+// MIEVFL    FGIVLGLIPI     TLAGLFVTAYLQYRRGDQLDL
+
+// >description:3
+
+// M
+  // MELVLKTIIGP
+ // IVVGVVLR
+// IVDKWLNKD
+
+// K
+
+  // >description:4
+  //       MDRTDEV
+
+  //   SNHTHDKP
+// TLTWFEEI
+// FEE
+
+// YHSPFHN
+
+
+  //       `;
+
+  const descriptionsArray = [
+    'description:1', 'description:2', 'description:3', 'description:4',
+  ];
+  const descriptionCol = DG.Column.fromStrings('description', descriptionsArray);
+
+  const sequencesArray = [
+    'MDYKETLLMPKTDFPMRGGLPNKEPQIQEKW',
+    'MIEVFLFGIVLGLIPITLAGLFVTAYLQYRRGDQLDL',
+    'MMELVLKTIIGPIVVGVVLRIVDKWLNKDK',
+    'MDRTDEVSNHTHDKPTLTWFEEIFEEYHSPFHN',
+  ];
+  const sequencesCol = DG.Column.fromStrings('sequence', sequencesArray);
+  sequencesCol.semType = DG.SEMTYPE.MACROMOLECULE;
+  UnitsHandler.setUnitsToFastaColumn(sequencesCol);
+
+  const fastaDf = DG.DataFrame.fromColumns([descriptionCol, sequencesCol]);
+
+  function _testColumnsParser(inputFasta: string) {
+    const ffh = new FastaFileHandler(inputFasta);
+    const parsedDescriptionsArray = ffh.descriptionsArray;
+    const parsedSequencesArray = ffh.sequencesArray;
+    expectArray(
+      [parsedDescriptionsArray, parsedSequencesArray],
+      [descriptionsArray, sequencesArray]
+    );
+  }
+
+  // test parser
+  test('testNormalFormatting', async () => {
+    _testColumnsParser(fastaNormalFormatting);
+  });
+  test('testExtraSpaces', async () => {
+    _testColumnsParser(fastaExtraSpaces);
+  });
+  test('testExtraNewlines', async () => {
+    _testColumnsParser(fastaExtraNewlines);
+  });
+});

package/src/utils/cell-renderer.ts

@@ -2,7 +2,7 @@ import * as C from './constants';
 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 {UnknownSeqPalette, 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';
@@ -44,6 +44,7 @@ export function processSequence(subParts: string[]): [string[], boolean] {
   return [text, simplified];
 }
 
+
 /**
  * A function that prints a string aligned to left or centered.
  *
@@ -65,33 +66,46 @@ function printLeftOrCentered(
   x: number, y: number, w: number, h: number,
   g: CanvasRenderingContext2D, s: string, color = undefinedColor,
   pivot: number = 0, left = false, transparencyRate: number = 1.0,
-  separator: string = '', last: boolean = false): number {
+  separator: string = '', last: boolean = false, drawStyle: string = 'classic', maxWord:any={}, maxWordIdx:number=0, gridCell:any = {}): number {
   g.textAlign = 'start';
   const colorPart = s.substring(0);
-  let grayPart =  last ? '' : separator;
+  let grayPart = last ? '' : separator;
+  if (drawStyle === 'msa') {
+    grayPart = ' ';
+  }
 
-  const textSize = g.measureText(colorPart + grayPart);
+  let textSize: any = g.measureText(colorPart + grayPart);
   const indent = 5;
 
-  const colorTextSize = g.measureText(colorPart);
+  let colorTextSize = g.measureText(colorPart).width;
   const dy = (textSize.fontBoundingBoxAscent + textSize.fontBoundingBoxDescent) / 2;
+  textSize = textSize.width;
+  if (drawStyle === 'msa') {
+    if (colorTextSize > maxWord) {
+      maxWord[maxWordIdx] = colorTextSize;
+      gridCell.cell.column.temp = maxWord;
+    }
+    colorTextSize = maxWord[maxWordIdx];
+    textSize = maxWord[maxWordIdx];
+  }
 
   function draw(dx1: number, dx2: number): void {
     g.fillStyle = color;
     g.globalAlpha = transparencyRate;
     g.fillText(colorPart, x + dx1, y + dy);
-    g.fillStyle = grayColor;
-    g.fillText(grayPart, x + dx2, y + dy);
+    if (drawStyle === 'classic') {
+      g.fillStyle = grayColor;
+      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;
+  if (left || textSize > w) {
+    draw(indent, indent + colorTextSize);
+    return x + colorTextSize + g.measureText(grayPart).width;
   } else {
-    const dx = (w - textSize.width) / 2;
-    draw(dx, dx + colorTextSize.width);
-    return x + dx + colorTextSize.width;
+    const dx = (w - textSize) / 2;
+    draw(dx, dx + colorTextSize);
+    return x + dx + colorTextSize;
   }
 }
 
@@ -114,7 +128,7 @@ function findMonomers(helmString: string) {
 export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   get name(): string { return 'macromoleculeSequence'; }
 
-  get cellType(): string { return C.SEM_TYPES.Macro_Molecule; }
+  get cellType(): string { return C.SEM_TYPES.MACROMOLECULE; }
 
   get defaultHeight(): number { return 30; }
 
@@ -198,15 +212,51 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
       const separator = gridCell.cell.column.getTag('separator') ?? '';
       const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, gridCell.cell.column.getTag('separator'));
 
+      // обработка новых елементов
+      const columns = gridCell.cell.column.categories;
+      let maxLengthWords = {};
+      // check if gridCell.cell.column.temp is array
+      if (gridCell.cell.column.getTag('.calculatedCellRender') !== 'exist') {
+        for (let i = 0; i < columns.length; i++) {
+          let subParts: string[] = splitterFunc(columns[i]);
+          subParts.forEach((amino, index) => {
+            //@ts-ignore
+            let textSizeWidth = g.measureText(WebLogo.monomerToText(amino) + ' ');
+            //@ts-ignore
+            if (textSizeWidth.width > (maxLengthWords[index] ?? 0)) {
+              //@ts-ignore
+              maxLengthWords[index] = textSizeWidth.width;
+            }
+          });
+        }
+        gridCell.cell.column.temp = maxLengthWords;
+        gridCell.cell.column.setTag('.calculatedCellRender', 'exist');
+      } else {
+        maxLengthWords = gridCell.cell.column.temp;
+      }
+
       const subParts: string[] = splitterFunc(cell.value);
-      // console.log(subParts);
       let x1 = x;
       let color = undefinedColor;
+      // get max length word in subParts
+      let tagUnits = gridCell.cell.column.getTag(DG.TAGS.UNITS);
+      let maxLength = 0;
+      let maxWord = '';
+      let drawStyle = 'classic';
+      if (tagUnits.includes('MSA')) {
+        subParts.forEach(part => {
+          if (part.length > maxLength) {
+            maxLength = part.length;
+            maxWord = part;
+            drawStyle = 'msa';
+          }
+        });
+      }
       subParts.forEach((amino, index) => {
         color = palette.get(amino);
         g.fillStyle = undefinedColor;
         let last = index === subParts.length - 1;
-        x1 = printLeftOrCentered(x1, y, w, h, g, amino, color, 0, true, 1.0, separator, last);
+        x1 = printLeftOrCentered(x1, y, w, h, g, WebLogo.monomerToText(amino), color, 0, true, 1.0, separator, last, drawStyle, maxLengthWords, index, gridCell);
       });
 
       g.restore();
@@ -215,11 +265,10 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   }
 }
 
+export class MonomerCellRenderer extends DG.GridCellRenderer {
+  get name(): string {return 'MonomerCR';}
 
-export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
-  get name(): string {return 'aminoAcidsCR';}
-
-  get cellType(): string {return C.SEM_TYPES.AMINO_ACIDS;}
+  get cellType(): string {return C.SEM_TYPES.MONOMER;}
 
   get defaultHeight(): number {return 15;}
 
@@ -256,10 +305,10 @@ export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
   }
 }
 
-export class AlignedSequenceDifferenceCellRenderer extends DG.GridCellRenderer {
-  get name(): string {return 'alignedSequenceDifferenceCR';}
+export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
+  get name(): string {return 'MacromoleculeDifferenceCR';}
 
-  get cellType(): string {return C.SEM_TYPES.ALIGNED_SEQUENCE_DIFFERENCE;}
+  get cellType(): string {return C.SEM_TYPES.MACROMOLECULE_DIFFERENCE;}
 
   get defaultHeight(): number {return 30;}
 
@@ -295,23 +344,28 @@ export class AlignedSequenceDifferenceCellRenderer extends DG.GridCellRenderer {
     //TODO: can this be replaced/merged with splitSequence?
     const [s1, s2] = s.split('#');
     const separator = gridCell.tableColumn!.tags[C.TAGS.SEPARATOR];
-    const subParts1 = s1.split(separator);
-    const subParts2 = s2.split(separator);
+    const units: string = gridCell.tableColumn!.tags[DG.TAGS.UNITS];
+    const splitter = WebLogo.getSplitter(units, separator);
+    const subParts1 = splitter(s1);
+    const subParts2 = splitter(s2);
     const [text] = processSequence(subParts1);
     const textSize = g.measureText(text.join(''));
     let updatedX = Math.max(x, x + (w - (textSize.width + subParts1.length * 4)) / 2);
     // 28 is the height of the two substitutions on top of each other + space
     const updatedY = Math.max(y, y + (h - 28) / 2);
 
-    const palette = getPalleteByType(gridCell.tableColumn!.tags[C.TAGS.ALPHABET]);
+    let palette: SeqPalette = UnknownSeqPalettes.Color;
+    if (units != 'HELM')
+      palette = getPalleteByType(units.substring(units.length - 2));
+
+    const vShift = 7;
     for (let i = 0; i < subParts1.length; i++) {
       const amino1 = subParts1[i];
       const amino2 = subParts2[i];
       const color1 = palette.get(amino1);
-      const color2 = palette.get(amino2);
 
       if (amino1 != amino2) {
-        const vShift = 7;
+        const color2 = palette.get(amino2);
         const subX0 = printLeftOrCentered(updatedX, updatedY - vShift, w, h, g, amino1, color1, 0, true);
         const subX1 = printLeftOrCentered(updatedX, updatedY + vShift, w, h, g, amino2, color2, 0, true);
         updatedX = Math.max(subX1, subX0);

package/src/utils/constants.ts

@@ -23,12 +23,11 @@ export enum TAGS {
 }
 
 export enum SEM_TYPES {
-  AMINO_ACIDS = 'aminoAcids',
-  ALIGNED_SEQUENCE = 'alignedSequence',
-  ALIGNED_SEQUENCE_DIFFERENCE = 'alignedSequenceDifference',
+  MONOMER = 'Monomer',
+  MACROMOLECULE_DIFFERENCE = 'MacromoleculeDifference',
   ACTIVITY = 'activity',
   ACTIVITY_SCALED = 'activityScaled',
-  Macro_Molecule = 'Macromolecule',
+  MACROMOLECULE = 'Macromolecule',
 }
 
 export const STATS = 'stats';

package/src/viewers/vd-regions-viewer.ts

@@ -50,6 +50,9 @@ export class VdRegionsViewer extends DG.JsViewer {
   public chains: string[];
   public sequenceColumnNamePostfix: string;
 
+  public skipEmptyPositions: boolean;
+
+
   public get df(): DG.DataFrame {
     return this.dataFrame;
   }
@@ -72,6 +75,8 @@ export class VdRegionsViewer extends DG.JsViewer {
     this.chains = this.stringList('chains', ['Heavy', 'Light'],
       {choices: ['Heavy', 'Light']});
     this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
+
+    this.skipEmptyPositions = this.bool('skipEmptyPositions', false);
   }
 
   public async init() {
@@ -119,6 +124,17 @@ export class VdRegionsViewer extends DG.JsViewer {
         break;
       case 'sequenceColumnNamePostfix':
         break;
+      case 'skipEmptyPositions':
+        // for (let orderI = 0; orderI < this.logos.length; orderI++) {
+        //   for (let chainI = 0; chainI < this.chains.length; chainI++) {
+        //     const chain: string = this.chains[chainI];
+        //     this.logos[orderI][chain].setOptions({skipEmptyPositions: this.skipEmptyPositions});
+        //   }
+        // }
+        // this.calcSize();
+        await this.destroyView();
+        await this.buildView();
+        break;
       }
     }
   }
@@ -188,6 +204,7 @@ export class VdRegionsViewer extends DG.JsViewer {
           startPositionName: region!.positionStartName,
           endPositionName: region!.positionEndName,
           fixWidth: true,
+          skipEmptyPositions: this.skipEmptyPositions,
         })) as unknown as WebLogo;
       }
       // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos