@datagrok/bio 2.4.44 → 2.4.46

package/package.json

@@ -5,16 +5,24 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.4.44",
+  "version": "2.4.46",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
     "url": "https://github.com/datagrok-ai/public.git",
     "directory": "packages/Bio"
   },
+  "properties": [
+    {
+      "name": "MaxMonomerLength",
+      "propertyType": "int",
+      "defaultValue": 3,
+      "nullable": false
+    }
+  ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.32.3",
+    "@datagrok-libraries/bio": "^5.32.4",
     "@datagrok-libraries/chem-meta": "^1.0.1",
     "@datagrok-libraries/ml": "^6.3.39",
     "@datagrok-libraries/tutorials": "^1.3.2",

package/src/function-edtiors/split-to-monomers-editor.ts

@@ -0,0 +1,42 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+export class SplitToMonomersFunctionEditor {
+  tableInput: DG.InputBase;
+  seqColInput: DG.InputBase;
+
+  funcParamsDiv: HTMLDivElement;
+
+  get funcParams(): {} {
+    return {
+      table: this.tableInput.value!,
+      sequence: this.seqColInput.value!,
+    };
+  }
+
+  get paramsUI(): HTMLDivElement {
+    return this.funcParamsDiv;
+  }
+
+  constructor() {
+    this.tableInput = ui.tableInput('Table', grok.shell.tv.dataFrame, undefined, () => {
+      this.onTableInputChanged();
+    });
+    //TODO: remove when the new version of datagrok-api is available
+    const seqColValue = this.tableInput.value!.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
+    const seqColOptions = {filter: (col: DG.Column) => col.semType === DG.SEMTYPE.MACROMOLECULE};
+    //@ts-ignore
+    this.seqColInput = ui.columnInput('Sequence', this.tableInput.value!, seqColValue, null, seqColOptions);
+
+    this.funcParamsDiv = ui.inputs([
+      this.tableInput,
+      this.seqColInput,
+    ], {style: {minWidth: '320px'}});
+  }
+
+  onTableInputChanged(): void {
+    this.seqColInput = ui.columnInput('Sequence', this.tableInput.value!,
+      this.tableInput.value!.columns.bySemType(DG.SEMTYPE.MACROMOLECULE));
+  }
+}

package/src/package-test.ts

@@ -8,7 +8,9 @@ import './tests/detectors-tests';
 import './tests/detectors-weak-and-likely-tests';
 import './tests/detectors-benchmark-tests';
 import './tests/msa-tests';
-import './tests/splitters-test';
+
+import './tests/splitters-test'; //Unhandled exceptions.exceptions : Cannot read properties of null (reading 'f')
+
 import './tests/monomer-libraries-tests';
 import './tests/renderers-test';
 import './tests/converters-test';

package/src/package-types.ts

@@ -0,0 +1,40 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+
+import {Observable, Subject} from 'rxjs';
+import {ObjectPropertyBag} from 'datagrok-api/dg';
+
+/** Names of package properties/settings declared in properties section of {@link './package.json'} */
+export const enum BioPackagePropertiesNames {
+  MaxMonomerLength = 'MaxMonomerLength',
+}
+
+
+export class BioPackageProperties extends Map<string, any> {
+
+  private _onPropertyChanged: Subject<string> = new Subject<string>();
+  public get onPropertyChanged(): Observable<string> { return this._onPropertyChanged; }
+
+  /** Monomer name maximum length displayed in short mode. */
+  public get maxMonomerLength(): number {
+    return super.get(BioPackagePropertiesNames.MaxMonomerLength) as unknown as number;
+  }
+
+  public set maxMonomerLength(value: number) {
+    super.set(BioPackagePropertiesNames.MaxMonomerLength, value as unknown as object);
+    this._onPropertyChanged.next(BioPackagePropertiesNames.MaxMonomerLength);
+  }
+
+  constructor(source: any) {
+    super(Object.entries(source));
+  }
+}
+
+export class BioPackage extends DG.Package {
+  private _properties: BioPackageProperties;
+  /** Package properties/settings declared in properties section of {@link './package.json'} */
+  public get properties(): BioPackageProperties { return this._properties; };
+
+  public set properties(value: BioPackageProperties) { this._properties = value; }
+}

package/src/package.ts

@@ -2,8 +2,9 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
+
 import {
-  MacromoleculeDifferenceCellRenderer, MacromoleculeSequenceCellRenderer, MonomerCellRenderer,
+  MacromoleculeDifferenceCellRenderer, MacromoleculeSequenceCellRenderer,
 } from './utils/cell-renderer';
 import {VdRegionsViewer} from './viewers/vd-regions-viewer';
 import {SequenceAlignment} from './seq_align';
@@ -13,13 +14,11 @@ import {
   createLinesGrid, createPropPanelElement, createTooltipElement, getChemSimilaritiesMatrix,
 } from './analysis/sequence-activity-cliffs';
 import {convert} from './utils/convert';
-import {getMacroMolColumnPropertyPanel} from './widgets/representations';
+import {getMacromoleculeColumnPropertyPanel} from './widgets/representations';
 import {_toAtomicLevel} from '@datagrok-libraries/bio/src/monomer-works/to-atomic-level';
 import {FastaFileHandler} from '@datagrok-libraries/bio/src/utils/fasta-handler';
 import {removeEmptyStringRows} from '@datagrok-libraries/utils/src/dataframe-utils';
 
-import {splitAlignedSequences} from '@datagrok-libraries/bio/src/utils/splitter';
-import * as C from './utils/constants';
 import {SequenceSimilarityViewer} from './analysis/sequence-similarity-viewer';
 import {SequenceDiversityViewer} from './analysis/sequence-diversity-viewer';
 import {substructureSearchDialog} from './substructure-search/substructure-search';
@@ -39,6 +38,7 @@ import {getMacromoleculeColumn} from './utils/ui-utils';
 import {DimReductionMethods, ITSNEOptions, IUMAPOptions} from '@datagrok-libraries/ml/src/reduce-dimensionality';
 import {SequenceSpaceFunctionEditor} from '@datagrok-libraries/ml/src/functionEditors/seq-space-editor';
 import {ActivityCliffsFunctionEditor} from '@datagrok-libraries/ml/src/functionEditors/activity-cliffs-editor';
+
 import {demoBio01UI} from './demo/bio01-similarity-diversity';
 import {demoBio01aUI} from './demo/bio01a-hierarchical-clustering-and-sequence-space';
 import {demoBio01bUI} from './demo/bio01b-hierarchical-clustering-and-activity-cliffs';
@@ -50,8 +50,15 @@ import {MmDistanceFunctionsNames} from '@datagrok-libraries/ml/src/macromolecule
 import {BitArrayMetrics, BitArrayMetricsNames} from '@datagrok-libraries/ml/src/typed-metrics';
 import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
 import {WebLogoApp} from './apps/web-logo-app';
+import {SplitToMonomersFunctionEditor} from './function-edtiors/split-to-monomers-editor';
+import {splitToMonomersUI} from './utils/split-to-monomers';
+import {MonomerCellRenderer} from './utils/monomer-cell-renderer';
+import {BioPackage, BioPackageProperties} from './package-types';
+import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
+import {ObjectPropertyBag} from 'datagrok-api/dg';
+import {PackageSettingsEditorWidget} from './widgets/package-settings-editor-widget';
 
-export const _package = new DG.Package();
+export const _package = new BioPackage();
 
 // /** Avoid reassinging {@link monomerLib} because consumers subscribe to {@link IMonomerLib.onChanged} event */
 // let monomerLib: MonomerLib | null = null;
@@ -79,11 +86,20 @@ export class SeqPaletteCustom implements SeqPalette {
 
 //tags: init
 export async function initBio() {
-  await MonomerLibHelper.instance.loadLibraries();
+  let module: RDModule;
+  await Promise.all([
+    (async () => { await MonomerLibHelper.instance.loadLibraries(); })(),
+    (async () => { module = await grok.functions.call('Chem:getRdKitModule'); })(),
+    (async () => {
+      const pkgProps = await _package.getProperties();
+      const bioPkgProps = new BioPackageProperties(pkgProps);
+      _package.properties = bioPkgProps;
+    })(),
+  ]);
+
   const monomerLib = MonomerLibHelper.instance.getBioLib();
   const monomers: string[] = [];
   const logPs: number[] = [];
-  const module = await grok.functions.call('Chem:getRdKitModule');
 
   const series = monomerLib!.getMonomerMolsByPolymerType('PEPTIDE')!;
   Object.keys(series).forEach((symbol) => {
@@ -170,6 +186,21 @@ export async function libraryPanel(_seqColumn: DG.Column): Promise<DG.Widget> {
   return new DG.Widget(ui.divV([inputsForm, ui.div(filesButton)]));
 }
 
+// -- Package settings editor --
+
+//name: packageSettingsEditor
+//description: The database connection
+//tags: packageSettingsEditor
+//input: object propList
+//output: widget result
+export function packageSettingsEditor(propList: DG.Property[]): DG.Widget {
+  const widget = new PackageSettingsEditorWidget(propList);
+  widget.init().then(); // Ignore promise returned
+  return widget;
+}
+
+// -- Cell renderers --
+
 //name: fastaSequenceCellRenderer
 //tags: cellRenderer
 //meta.cellType: sequence
@@ -184,7 +215,7 @@ export function fastaSequenceCellRenderer(): MacromoleculeSequenceCellRenderer {
 //tags: panel
 //output: widget result
 export function macroMolColumnPropertyPanel(molColumn: DG.Column): DG.Widget {
-  return getMacroMolColumnPropertyPanel(molColumn);
+  return getMacromoleculeColumnPropertyPanel(molColumn);
 }
 
 //name: separatorSequenceCellRenderer
@@ -248,7 +279,7 @@ export function SeqActivityCliffsEditor(call: DG.FuncCall) {
   ui.dialog({title: 'Activity Cliffs'})
     .add(funcEditor.paramsUI)
     .onOK(async () => {
-      call.func.prepare(funcEditor.funcParams).call(true);
+      return call.func.prepare(funcEditor.funcParams).call(true);
     })
     .show();
 }
@@ -342,7 +373,7 @@ export function SequenceSpaceEditor(call: DG.FuncCall) {
   ui.dialog({title: 'Sequence Space'})
     .add(funcEditor.paramsUI)
     .onOK(async () => {
-      call.func.prepare(funcEditor.funcParams).call(true);
+      return call.func.prepare(funcEditor.funcParams).call(true);
     })
     .show();
 }
@@ -364,8 +395,7 @@ export async function sequenceSpaceTopMenu(
   // Delay is required for initial function dialog to close before starting invalidating of molfiles.
   // Otherwise, dialog is freezing
   await delay(10);
-  if (!checkInputColumnUI(macroMolecule, 'Sequence space'))
-    return;
+  if (!checkInputColumnUI(macroMolecule, 'Sequence space')) return;
 
   const embedColsNames = getEmbeddingColsNames(table);
   const withoutEmptyValues = DG.DataFrame.fromColumns([macroMolecule]).clone();
@@ -586,6 +616,7 @@ export function convertDialog() {
 //name: monomerCellRenderer
 //tags: cellRenderer
 //meta.cellType: Monomer
+//meta.columnTags: quality=Monomer
 //output: grid_cell_renderer result
 export function monomerCellRenderer(): MonomerCellRenderer {
   return new MonomerCellRenderer();
@@ -642,20 +673,27 @@ export async function testDetectMacromolecule(path: string): Promise<DG.DataFram
   return resDf;
 }
 
-//top-menu: Bio | Split to monomers
-//name: splitToMonomers
-export function splitToMonomers(): void {
-  const col = getMacromoleculeColumn();
-  const tempDf = splitAlignedSequences(col);
-  const originalDf = col.dataFrame;
-  for (const tempCol of tempDf.columns) {
-    const newCol = originalDf.columns.add(tempCol);
-    newCol.semType = C.SEM_TYPES.MONOMER;
-    // TODO: GROK-
-    //newCol.setTag(DG.TAGS.CELL_RENDERER, C.SEM_TYPES.MONOMER);
-    newCol.setTag(bioTAGS.alphabet, col.getTag(bioTAGS.alphabet));
-  }
-  grok.shell.tv.grid.invalidate();
+//name: SplitToMonomersEditor
+//tags: editor
+//input: funccall call
+export function SplitToMonomersEditor(call: DG.FuncCall): void {
+  const funcEditor = new SplitToMonomersFunctionEditor();
+  ui.dialog({title: 'Split to Monomers'})
+    .add(funcEditor.paramsUI)
+    .onOK(async () => {
+      return call.func.prepare(funcEditor.funcParams).call(true);
+    })
+    .show();
+}
+
+//top-menu: Bio | Split to Monomers
+//name: Split to Monomers
+//input: dataframe table
+//input: column sequence { semType: Macromolecule }
+//output: dataframe result
+//editor: Bio:SplitToMonomersEditor
+export async function splitToMonomersTopMenu(table: DG.DataFrame, sequence: DG.Column): Promise<void> {
+  await splitToMonomersUI(table, sequence);
 }
 
 //name: Bio: getHelmMonomers

package/src/tests/msa-tests.ts

@@ -9,9 +9,6 @@ import {multipleSequenceAlignmentUI} from '../utils/multiple-sequence-alignment-
 import {awaitContainerStart} from './utils';
 //import * as grok from 'datagrok-api/grok';
 
-export const _package = new DG.Package();
-
-
 category('MSA', async () => {
   //table = await grok.data.files.openTable('Demo:Files/bio/peptides.csv');
   const fromCsv = `seq

package/src/tests/splitters-test.ts

@@ -6,6 +6,7 @@ import {after, before, category, test, expect, expectArray, delay} from '@datagr
 import * as C from '../utils/constants';
 import {_package, getHelmMonomers} from '../package';
 import {TAGS as bioTAGS, splitterAsFasta, splitterAsHelm} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {splitToMonomersUI} from '../utils/split-to-monomers';
 
 
 category('splitters', async () => {
@@ -77,14 +78,15 @@ category('splitters', async () => {
       seqCol.semType = semType;
     seqCol.setTag(bioTAGS.aligned, C.MSA);
 
-    const _tv: DG.TableView = grok.shell.addTableView(df);
-    await delay(500); // needed to account for table adding
-    // call to calculate 'cell.renderer' tag
-    await grok.data.detectSemanticTypes(df);
+    const newDf = await splitToMonomersUI(df, seqCol);
+    expect(newDf.columns.names().includes('17'), true);
 
-    await grok.functions.call('Bio:splitToMonomers');
-    expect(df.columns.names().includes('17'), true);
-  });
+    // TODO: Check cell.renderer for columns of monomers
+    // const _tv: DG.TableView = grok.shell.addTableView(df);
+    // await delay(500); // needed to account for table adding
+    // // call to calculate 'cell.renderer' tag
+    // await grok.data.detectSemanticTypes(df);
+  }, {skipReason: 'GROK-13300'});
 
   test('getHelmMonomers', async () => {
     const df: DG.DataFrame = DG.DataFrame.fromCsv(

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

@@ -0,0 +1,27 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+export enum MonomerWidthMode {
+  long = 'long',
+  short = 'short',
+}
+
+export const enum Tags {
+  calculated = '.mm.cellRenderer.calculated',
+}
+
+export const enum Temps {
+  monomerWidth = '.mm.cellRenderer.monomerWidth',
+  maxMonomerLength = '.mm.cellRenderer.maxMonomerLength',
+  colorCode = '.mm.cellRenderer.colorCode',
+  compareWithCurrent = '.mm.cellRenderer.compareWithCurrent',
+  highlightDifference = '.mm.cellRenderer.highlightDifference',
+}
+
+// export const MacromoleculeCellRendererDefaults = new class {
+//   monomerWidth: MonomerWidthMode = MonomerWidthMode.short;
+//   maxMonomerLength: number = 3;
+//   colorCode: boolean = true;
+//   compareWithCurrent: boolean = true;
+// }();

package/src/utils/cell-renderer.ts

@@ -3,9 +3,8 @@ import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
 import {printLeftOrCentered, DrawStyle} from '@datagrok-libraries/bio/src/utils/cell-renderer';
-import * as C from './constants';
 import {
-  ALIGNMENT,
+  ALIGNMENT, ALPHABET,
   getPaletteByType,
   getSplitter,
   monomerToShort,
@@ -15,6 +14,11 @@ import {
 } from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
+import {MonomerWorks} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
+import {Tags as mmcrTags, Temps as mmcrTemps} from '../utils/cell-renderer-consts';
+
+import * as C from './constants';
+import {_package} from '../package';
 
 const enum tempTAGS {
   referenceSequence = 'reference-sequence',
@@ -151,19 +155,19 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     const referenceSequence: string[] = splitterFunc(
       ((tempReferenceSequence != null) && (tempReferenceSequence != '')) ?
         tempReferenceSequence : tempCurrentWord ?? '');
-    const monomerWidth: string = (tempMonomerWidth != null) ? tempMonomerWidth : 'short';
+    const monomerWidth: string = tempMonomerWidth ?? 'short';
 
     let gapRenderer = 5;
     let maxIndex = 0;
-    let maxLengthOfMonomer = 8;
+    let maxLengthOfMonomer: number = 8;
 
     if (monomerWidth === 'short') {
       gapRenderer = 12;
-      maxLengthOfMonomer = 1;
+      maxLengthOfMonomer = colTemp[mmcrTemps.maxMonomerLength] ?? _package.properties.maxMonomerLength;
     }
 
     let maxLengthWords: any = {};
-    if (gridCell.cell.column.getTag('.calculatedCellRender') !== splitLimit.toString()) {
+    if (gridCell.cell.column.getTag(mmcrTags.calculated) !== splitLimit.toString()) {
       let samples = 0;
       while (samples < Math.min(gridCell.cell.column.length, 100)) {
         const column = gridCell.cell.column.get(samples);
@@ -185,7 +189,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
         colTemp[tempTAGS.bioSumMaxLengthWords] = maxLengthWordSum;
         colTemp[tempTAGS.bioMaxIndex] = maxIndex;
         colTemp[tempTAGS.bioMaxLengthWords] = maxLengthWords;
-        gridCell.cell.column.setTag('.calculatedCellRender', splitLimit.toString());
+        gridCell.cell.column.setTag(mmcrTags.calculated, splitLimit.toString());
       }
     } else {
       maxLengthWords = colTemp[tempTAGS.bioMaxLengthWords];
@@ -215,58 +219,6 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   }
 }
 
-export class MonomerCellRenderer extends DG.GridCellRenderer {
-  get name(): string { return C.SEM_TYPES.MONOMER; }
-
-  get cellType(): string { return C.SEM_TYPES.MONOMER; }
-
-  get defaultHeight(): number { return 15; }
-
-  get defaultWidth(): number { return 30; }
-
-  /**
-   * 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.
-   */
-  render(
-    g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
-    _cellStyle: DG.GridCellStyle): void {
-    g.font = `12px monospace`;
-    g.textBaseline = 'middle';
-    g.textAlign = 'center';
-
-    const palette = getPaletteByType(gridCell.cell.column.getTag(bioTAGS.alphabet));
-    const s: string = gridCell.cell.value;
-    if (!s)
-      return;
-    const color = palette.get(s);
-
-    g.fillStyle = color;
-    g.fillText(monomerToShort(s, 3), x + (w / 2), y + (h / 2), w);
-  }
-
-  svgMolOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
-
-  onMouseEnter(gridCell: DG.GridCell, e: MouseEvent) {
-    super.onMouseEnter(gridCell, e);
-
-    // TODO: Display monomer structure within tooltip
-    // const monomerName = gridCell.cell.value;
-    // const mw = getMonomerWorksInstance();
-    // // TODO: Display monomer structure in Tooltip
-    // const nameDiv = ui.div(monomerName);
-    // const molDiv = grok.chem.svgMol(monomerMol, undefined, undefined, svgMolOptions);
-    //
-    // ui.tooltip.show(ui.divV([nameDiv, molEl,]), x, y);
-  }
-}
 
 export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
   get name(): string { return 'MacromoleculeDifferenceCR'; }

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

@@ -0,0 +1,100 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+
+import {ALPHABET, getPaletteByType, monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {MonomerWorks} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
+
+import {getMonomerLibHelper} from '../package';
+import * as C from './constants';
+
+const Tags = new class {
+  tooltipHandlerTemp = 'tooltip-handler.Monomer';
+}();
+
+const svgMolOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+
+export class MonomerTooltipHandler {
+  private readonly grid: DG.Grid;
+
+  constructor(grid: DG.Grid) {
+    this.grid = grid;
+    this.grid.onCellTooltip(this.onCellTooltip.bind(this));
+  }
+
+  private onCellTooltip(gridCell: DG.GridCell, x: number, y: number): any {
+    if (gridCell.grid.dart != this.grid.dart || !gridCell.tableColumn || !gridCell.isTableCell ||
+      gridCell.tableColumn.semType != 'Monomer') return false;
+
+    const alphabet = gridCell.tableColumn.getTag(bioTAGS.alphabet);
+    const monomerName = gridCell.cell.value;
+    const mw = new MonomerWorks(getMonomerLibHelper().getBioLib());
+    const monomerType: string = (alphabet === ALPHABET.DNA || alphabet === ALPHABET.RNA) ? 'RNA' :
+      alphabet === ALPHABET.PT ? 'PEPTIDE' : 'PEPTIDE';
+
+    const monomerMol: string | null = mw.getCappedRotatedMonomer(monomerType, monomerName);
+    const nameDiv = ui.div(monomerName);
+    const molDiv = !monomerMol ? null :
+      grok.chem.svgMol(monomerMol, undefined, undefined, svgMolOptions);
+
+    const canvasClientRect = gridCell.grid.canvas.getBoundingClientRect();
+    const x1 = gridCell.bounds.right + canvasClientRect.left - 4;
+    const y1 = gridCell.bounds.bottom + canvasClientRect.top - 4;
+    ui.tooltip.show(ui.divV([nameDiv, ...(molDiv ? [molDiv] : [])]), x1, y1);
+
+    return true; // To prevent default tooltip behaviour
+  }
+
+  public static getOrCreate(grid: DG.Grid): MonomerTooltipHandler {
+    const gridTemp: { [tempName: string]: any } = grid.dataFrame.temp;
+    if (!(Tags.tooltipHandlerTemp in gridTemp)) {
+      gridTemp[Tags.tooltipHandlerTemp] = new MonomerTooltipHandler(grid);
+      grid.temp = gridTemp;
+    }
+    return gridTemp[Tags.tooltipHandlerTemp];
+  }
+}
+
+export class MonomerCellRenderer extends DG.GridCellRenderer {
+  get name(): string { return C.SEM_TYPES.MONOMER; }
+
+  get cellType(): string { return C.SEM_TYPES.MONOMER; }
+
+  get defaultHeight(): number { return 15; }
+
+  get defaultWidth(): number { return 30; }
+
+  /**
+   * 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.
+   */
+  render(
+    g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
+    _cellStyle: DG.GridCellStyle
+  ): void {
+    if (gridCell.gridRow < 0) return;
+    MonomerTooltipHandler.getOrCreate(gridCell.grid);
+
+
+    g.font = `12px monospace`;
+    g.textBaseline = 'middle';
+    g.textAlign = 'center';
+
+    const palette = getPaletteByType(gridCell.cell.column.getTag(bioTAGS.alphabet));
+    const s: string = gridCell.cell.value;
+    if (!s)
+      return;
+    const color = palette.get(s);
+
+    g.fillStyle = color;
+    g.fillText(monomerToShort(s, 3), x + (w / 2), y + (h / 2), w);
+  }
+}

package/src/utils/split-to-monomers.ts

@@ -0,0 +1,29 @@
+import {delay} from '@datagrok-libraries/utils/src/test';
+import {checkInputColumnUI} from './check-input-column';
+import {splitAlignedSequences} from '@datagrok-libraries/bio/src/utils/splitter';
+import * as C from './constants';
+import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+
+
+export async function splitToMonomersUI(table: DG.DataFrame, seqCol: DG.Column<string>): Promise<DG.DataFrame> {
+  // Delay is required for initial function dialog to close before starting invalidating of molfiles.
+  // Otherwise, dialog is freezing
+  await delay(10);
+  if (!checkInputColumnUI(seqCol, 'Sequence space')) return table;
+
+  const tempDf = splitAlignedSequences(seqCol);
+  const originalDf = seqCol.dataFrame;
+  for (const tempCol of tempDf.columns) {
+    // TODO: GROK-11212
+    // tempCol.setTag(DG.TAGS.CELL_RENDERER, C.SEM_TYPES.MONOMER);
+    tempCol.semType = C.SEM_TYPES.MONOMER;
+    tempCol.setTag(bioTAGS.alphabet, seqCol.getTag(bioTAGS.alphabet));
+  }
+  // Create the new data frame to enable platform to setup cell renderers
+  const newDf = originalDf.join(tempDf, [], [], undefined, undefined, DG.JOIN_TYPE.LEFT, false);
+  grok.shell.addTableView(newDf);
+
+  return newDf;
+}

package/src/widgets/package-settings-editor-widget.ts

@@ -0,0 +1,28 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {_package} from '../package';
+
+export class PackageSettingsEditorWidget extends DG.Widget {
+  maxMonomerLengthProp: DG.Property;
+
+  constructor(propList: DG.Property[]) {
+    super(ui.div([], {}));
+
+    const props: { [name: string]: DG.Property } =
+      Object.assign({}, ...propList.map((p) => ({[p.name]: p})));
+
+    this.maxMonomerLengthProp = props['MaxMonomerLength'];
+  }
+
+  async init(): Promise<void> {
+    const maxMonomerLengthInput = ui.intInput('Max monomer length',
+      _package.properties.maxMonomerLength,
+      (value: number) => {
+        // Handle user changed value
+        _package.properties.maxMonomerLength = value;
+      });
+
+    this.root.appendChild(ui.form([maxMonomerLengthInput,]));
+  }
+}