@datagrok/peptides 0.0.1 → 0.4.2

package/src/viewers/model.ts

@@ -0,0 +1,76 @@
+import * as DG from 'datagrok-api/dg';
+
+import {describe} from '../describe';
+import {Subject} from 'rxjs';
+
+class SARViewerModel {
+  private viewerGrid: Subject<DG.Grid> = new Subject<DG.Grid>();
+  private viewerVGrid: Subject<DG.Grid> = new Subject<DG.Grid>();
+  private statsDf: Subject<DG.DataFrame> = new Subject<DG.DataFrame>();
+  private groupMapping: Subject<{[key: string]: string}> = new Subject<{[key: string]: string}>();
+  public viewerGrid$;
+  public viewerVGrid$;
+  public statsDf$;
+  public groupMapping$;
+  private dataFrame: DG.DataFrame | null;
+  private activityColumn: string | null;
+  private activityScaling: string | null;
+  private sourceGrid: DG.Grid | null;
+  private twoColorMode: boolean | null;
+  private initialBitset: DG.BitSet | null;
+  private isUpdating = false;
+  grouping: boolean;
+
+  constructor() {
+    this.dataFrame = null;
+    this.activityColumn = null;
+    this.activityScaling = null;
+    this.sourceGrid = null;
+    this.twoColorMode = null;
+    this.initialBitset = null;
+    this.grouping = false;
+    this.viewerGrid$ = this.viewerGrid.asObservable();
+    this.viewerVGrid$ = this.viewerVGrid.asObservable();
+    this.statsDf$ = this.statsDf.asObservable();
+    this.groupMapping$ = this.groupMapping.asObservable();
+  }
+
+  async updateData(
+    df: DG.DataFrame,
+    activityCol: string,
+    activityScaling: string,
+    sourceGrid: DG.Grid,
+    twoColorMode: boolean,
+    initialBitset: DG.BitSet | null,
+    grouping: boolean,
+  ) {
+    this.dataFrame = df;
+    this.activityColumn = activityCol;
+    this.activityScaling = activityScaling;
+    this.sourceGrid = sourceGrid;
+    this.twoColorMode = twoColorMode;
+    this.initialBitset = initialBitset;
+    this.grouping = grouping;
+    await this.updateDefault();
+  }
+
+  async updateDefault() {
+    if (
+      this.dataFrame && this.activityColumn && this.activityScaling &&
+        this.sourceGrid && this.twoColorMode !== null && !this.isUpdating
+    ) {
+      this.isUpdating = true;
+      const [viewerGrid, viewerVGrid, statsDf, groupMapping] = await describe(
+        this.dataFrame, this.activityColumn, this.activityScaling,
+        this.sourceGrid, this.twoColorMode, this.initialBitset, this.grouping,
+      );
+      this.viewerGrid.next(viewerGrid);
+      this.viewerVGrid.next(viewerVGrid);
+      this.statsDf.next(statsDf);
+      this.groupMapping.next(groupMapping);
+      this.isUpdating = false;
+    }
+  }
+}
+
+export const model = new SARViewerModel();

package/src/{peptide-sar-viewer → viewers}/sar-viewer.ts

@@ -4,12 +4,11 @@ import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 
-import {describe} from './describe';
+import {model} from './model';
 
-export class SARViewerBase extends DG.JsViewer {
+export class SARViewer extends DG.JsViewer {
   protected viewerGrid: DG.Grid | null;
   protected sourceGrid: DG.Grid | null;
-  protected progress: DG.TaskBarProgressIndicator;
   protected activityColumnColumnName: string;
   protected activityScalingMethod: string;
   protected bidirectionalAnalysis: boolean;
@@ -21,16 +20,19 @@ export class SARViewerBase extends DG.JsViewer {
   protected _initialBitset: DG.BitSet | null;
   protected viewerVGrid: DG.Grid | null;
   protected currentBitset: DG.BitSet | null;
+  grouping: boolean;
+  groupMapping: {[key: string]: string} | null;
+  // private df: DG.DataFrame | null;
   // protected pValueThreshold: number;
   // protected amountOfBestAARs: number;
   // duplicatesHandingMethod: string;
   constructor() {
     super();
-    this.progress = DG.TaskBarProgressIndicator.create('Loading SAR viewer');
 
     this.viewerGrid = null;
     this.viewerVGrid = null;
     this.statsDf = null;
+    this.groupMapping = null;
     this.initialized = false;
     this.aminoAcidResidue = 'AAR';
     this._initialBitset = null;
@@ -42,6 +44,7 @@ export class SARViewerBase extends DG.JsViewer {
     this.activityScalingMethod = this.string('activityScalingMethod', 'none', {choices: ['none', 'lg', '-lg']});
     this.filterMode = this.bool('filterMode', false);
     this.bidirectionalAnalysis = this.bool('bidirectionalAnalysis', false);
+    this.grouping = this.bool('grouping', false);
     // this.pValueThreshold = this.float('pValueThreshold', 0.1);
     // this.amountOfBestAARs = this.int('amountOfBestAAR', 1);
     // this.duplicatesHandingMethod = this.string('duplicatesHandlingMethod', 'median', {choices: ['median']});
@@ -52,10 +55,18 @@ export class SARViewerBase extends DG.JsViewer {
   init() {
     this._initialBitset = this.dataFrame!.filter.clone();
     this.initialized = true;
+    this.subs.push(model.statsDf$.subscribe((data) => this.statsDf = data));
+    this.subs.push(model.viewerGrid$.subscribe((data) => {
+      this.viewerGrid = data;
+      this.render();
+    }));
+    this.subs.push(model.viewerVGrid$.subscribe((data) => this.viewerVGrid = data));
+    this.subs.push(model.groupMapping$.subscribe((data) => this.groupMapping = data));
   }
 
   onTableAttached() {
     this.sourceGrid = this.view.grid;
+    this.sourceGrid?.dataFrame?.setTag('dataType', 'peptides');
     this.render();
   }
 
@@ -73,7 +84,7 @@ export class SARViewerBase extends DG.JsViewer {
 
     if (property.name === 'activityScalingMethod' && typeof this.dataFrame !== 'undefined') {
       const minActivity = DG.Stats.fromColumn(
-        this.dataFrame.col(this.activityColumnColumnName)!,
+        this.dataFrame!.col(this.activityColumnColumnName)!,
         this._initialBitset,
       ).min;
       if (minActivity && minActivity <= 0 && this.activityScalingMethod !== 'none') {
@@ -103,12 +114,15 @@ export class SARViewerBase extends DG.JsViewer {
       const otherLabel = 'Other';
       const aarLabel = `${currentAAR === '-' ? 'Empty' : currentAAR} - ${currentPosition}`;
 
-      if (!this.dataFrame.col(splitColName)) {
-        this.dataFrame.columns.addNew(splitColName, 'string');
+      let splitCol = this.dataFrame.col(splitColName);
+      if (!splitCol) {
+        splitCol = this.dataFrame.columns.addNew(splitColName, 'string');
       }
 
-      const isChosen = (i: number) => this.dataFrame!.get(currentPosition, i) === currentAAR;
-      this.dataFrame.getCol(splitColName).init((i) => isChosen(i) ? aarLabel : otherLabel);
+      const isChosen = (i: number) => this.groupMapping![this.dataFrame!.get(currentPosition, i)] === currentAAR;
+      splitCol!.init((i) => isChosen(i) ? aarLabel : otherLabel);
+
+      //TODO: use column.compact
 
       // if (this.filterMode) {
       //   this.dataFrame.selection.setAll(false, false);
@@ -118,7 +132,8 @@ export class SARViewerBase extends DG.JsViewer {
       //   this.dataFrame.selection.init(isChosen).and(this._initialBitset!, false);
       // }
       this.currentBitset = DG.BitSet.create(this.dataFrame.rowCount, isChosen).and(this._initialBitset!);
-      // (this.filterMode ? this.dataFrame.selection.setAll(false) : this.dataFrame.filter.copyFrom(this._initialBitset!)).fireChanged();
+      // (this.filterMode ? this.dataFrame.selection.setAll(false) :
+      // this.dataFrame.filter.copyFrom(this._initialBitset!)).fireChanged();
       this.sourceFilteringFunc();
 
 
@@ -143,19 +158,21 @@ export class SARViewerBase extends DG.JsViewer {
 
   private accordionFunc(accordion: DG.Accordion) {
     if (accordion.context instanceof DG.RowGroup) {
-      const originalDf: DG.DataFrame = accordion.context.dataFrame;
+      const originalDf: DG.DataFrame = DG.toJs(accordion.context.dataFrame);
+      const viewerDf = this.viewerGrid?.dataFrame;
 
       if (
         originalDf.getTag('dataType') === 'peptides' &&
         originalDf.col('~splitCol') &&
         this.viewerGrid &&
-        this.viewerGrid.dataFrame
+        viewerDf &&
+        viewerDf.currentCol !== null
       ) {
-        const currentAAR: string = this.viewerGrid.dataFrame.get(
+        const currentAAR: string = viewerDf.get(
           this.aminoAcidResidue,
-          this.viewerGrid.dataFrame.currentRowIdx,
+          viewerDf.currentRowIdx,
         );
-        const currentPosition = this.viewerGrid.dataFrame.currentCol.name;
+        const currentPosition = viewerDf.currentCol.name;
 
         const labelStr = `${currentAAR === '-' ? 'Empty' : currentAAR} - ${currentPosition}`;
         const currentColor = DG.Color.toHtml(DG.Color.orange);
@@ -187,7 +204,8 @@ export class SARViewerBase extends DG.JsViewer {
           for (const colName of new Set(['Count', 'pValue', 'Mean difference'])) {
             const query = `${this.aminoAcidResidue} = ${currentAAR} and Position = ${currentPosition}`;
             const textNum = this.statsDf?.groupBy([colName]).where(query).aggregate().get(colName, 0);
-            const text = textNum === 0 ? '<0.01' : `${colName === 'Count' ? textNum : textNum.toFixed(2)}`;
+            // const text = textNum === 0 ? '<0.01' : `${colName === 'Count' ? textNum : textNum.toFixed(2)}`;
+            const text = colName === 'Count' ? `${textNum}` : textNum < 0.01 ? '<0.01' : textNum.toFixed(2);
             tableMap[colName === 'pValue' ? 'p-value' : colName] = text;
           }
           elements.push(ui.tableFromMap(tableMap));
@@ -249,33 +267,59 @@ export class SARViewerBase extends DG.JsViewer {
     //TODO: optimize. Don't calculate everything again if only view changes
     if (computeData) {
       if (typeof this.dataFrame !== 'undefined' && this.activityColumnColumnName && this.sourceGrid) {
-        [this.viewerGrid, this.viewerVGrid, this.statsDf] = await describe(
-          this.dataFrame,
+        // [this.viewerGrid, this.viewerVGrid, this.statsDf] = await describe(
+        //   this.dataFrame,
+        //   this.activityColumnColumnName,
+        //   this.activityScalingMethod,
+        //   this.sourceGrid,
+        //   this.bidirectionalAnalysis,
+        //   this._initialBitset,
+        // );
+        await model?.updateData(
+          this.dataFrame!,
           this.activityColumnColumnName,
           this.activityScalingMethod,
           this.sourceGrid,
           this.bidirectionalAnalysis,
           this._initialBitset,
+          this.grouping,
         );
 
         if (this.viewerGrid !== null && this.viewerVGrid !== null) {
           $(this.root).empty();
-          this.root.appendChild(ui.splitV([this.viewerGrid.root, this.viewerVGrid.root]));
+          this.root.appendChild(this.viewerGrid.root);
           this.viewerGrid.dataFrame!.onCurrentCellChanged.subscribe((_) => {
             this.applyBitset();
             this.syncGridsFunc(false);
           });
           this.viewerVGrid.dataFrame!.onCurrentCellChanged.subscribe((_) => this.syncGridsFunc(true));
-          this.dataFrame.onRowsFiltering.subscribe((_) => this.sourceFilteringFunc());
-
+          this.dataFrame!.onRowsFiltering.subscribe((_) => this.sourceFilteringFunc());
           grok.events.onAccordionConstructed.subscribe((accordion: DG.Accordion) => this.accordionFunc(accordion));
         }
       }
     }
     //fixes viewers not rendering immediately after analyze.
-    this.viewerVGrid?.invalidate();
     this.viewerGrid?.invalidate();
+  }
+}
 
-    this.progress.close();
+export class SARViewerVertical extends DG.JsViewer {
+  viewerVGrid: DG.Grid | null;
+  constructor() {
+    super();
+
+    this.viewerVGrid = null;
+    this.subs.push(model.viewerVGrid$.subscribe((data) => {
+      this.viewerVGrid = data;
+      this.render();
+    }));
+  }
+
+  render() {
+    if (this.viewerVGrid) {
+      $(this.root).empty();
+      this.root.appendChild(this.viewerVGrid.root);
+    }
+    this.viewerVGrid?.invalidate();
   }
 }

package/src/{stacked-barchart → viewers}/stacked-barchart-viewer.ts

@@ -2,13 +2,14 @@ import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import {scaleBand, scaleLinear} from 'd3';
 import {ChemPalette} from '../utils/chem-palette';
-//@ts-ignore: I should be able to install it somehow
 import * as rxjs from 'rxjs';
 const cp = new ChemPalette('grok');
 
+//TODO: the function should not accept promise. Await the parameters where it is used
 export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
   viewer.then((viewer) => {
-    const barchart = viewer as StackedBarChart;
+    const barchart = viewer as StackedBarChart; //TODO: accept specifically StackedBarChart object
+    // The following event makes the barchart interactive
     rxjs.fromEvent(grid.overlay, 'mousemove').subscribe((mm:any) => {
       mm = mm as MouseEvent;
       const cell = grid.hitTest(mm.offsetX, mm.offsetY);
@@ -73,9 +74,9 @@ export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
 export class StackedBarChart extends DG.JsViewer {
     public dataEmptyAA: string;
     public initialized: boolean;
-    highlighted:{'colName':string, 'aaName':string}|null = null;
+    highlighted: {'colName' : string, 'aaName' : string} | null = null;
     private ord: { [Key: string]: number; } = {};
-    private margin: { top: number; left: number; bottom: number; right: number } = {
+    private margin: {top: number; left: number; bottom: number; right: number} = {
       top: 10,
       right: 10,
       bottom: 50,
@@ -83,18 +84,17 @@ export class StackedBarChart extends DG.JsViewer {
     };
     private yScale: any;
     private xScale: any;
-    private data: { 'name': string, 'data': { 'name': string, 'count': number, 'selectedCount': number }[] }[] = [];
+    private data: {'name': string, 'data': {'name': string, 'count': number, 'selectedCount': number}[]}[] = [];
     private selectionMode: boolean = false;
     public aminoColumnNames: string[] = [];
-    // @ts-ignore
 
-    private aminoColumnIndices: { [Key: string]: number; } = {};
-    private aggregatedTables: { [Key: string]: DG.DataFrame; } = {};
-    private aggregatedTablesUnselected: { [Key: string]: DG.DataFrame; } = {};
+    private aminoColumnIndices: {[Key: string]: number} = {};
+    private aggregatedTables: {[Key: string]: DG.DataFrame} = {};
+    private aggregatedTablesUnselected: {[Key: string]: DG.DataFrame} = {};
     private max = 0;
-    private barStats: { [Key: string]: { 'name': string, 'count': number, 'selectedCount': number }[] } = {};
+    private barStats: {[Key: string]: {'name': string, 'count': number, 'selectedCount': number}[]} = {};
     tableCanvas: HTMLCanvasElement | undefined;
-    private registered: { [Key: string]: DG.GridCell } = {};
+    private registered: {[Key: string]: DG.GridCell} = {};
 
     constructor() {
       super();
@@ -103,22 +103,22 @@ export class StackedBarChart extends DG.JsViewer {
     }
 
     init() {
-      const groups: [string[], string][] = [
-        [['C', 'U'], 'yellow'],
-        [['G', 'P'], 'red'],
-        [['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'], 'all_green'],
-        [['R', 'H', 'K'], 'light_blue'],
-        [['D', 'E'], 'dark_blue'],
-        [['S', 'T', 'N', 'Q'], 'orange']];
+      const groups: {[key: string]: string[]} = {
+        'yellow': ['C', 'U'],
+        'red': ['G', 'P'],
+        'all_green': ['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'],
+        'light_blue': ['R', 'H', 'K'],
+        'dark_blue': ['D', 'E'],
+        'orange': ['S', 'T', 'N', 'Q'],
+      };
 
       let i = 0;
-      groups.forEach((item) => {
+      for (const value of Object.values(groups)) {
         i++;
-        // eslint-disable-next-line guard-for-in
-        for (const obj in item[0]) {
-          this.ord[item[0][obj]] = i;
+        for (const obj of value) {
+          this.ord[obj] = i;
         }
-      });
+      }
       this.yScale = scaleLinear();
       this.xScale = scaleBand();
       this.data = [];
@@ -152,8 +152,8 @@ export class StackedBarChart extends DG.JsViewer {
         {
           // @ts-ignore
           if (df.getCol(name).semType === 'aminoAcids' &&
-                    !df.getCol(name).categories.includes('COOH') &&
-                    !df.getCol(name).categories.includes('NH2')) {
+              !df.getCol(name).categories.includes('COOH') &&
+              !df.getCol(name).categories.includes('NH2')) {
             this.aminoColumnIndices[name] = this.aminoColumnNames.length + 1;
             this.aminoColumnNames.push(name);
           }
@@ -170,7 +170,7 @@ export class StackedBarChart extends DG.JsViewer {
         resbuf[i] = buf1[i] & buf2[i];
       }
 
-
+      //TODO: optimize it, why store so many tables?
       const mask = DG.BitSet.fromBytes(resbuf.buffer, df.rowCount);
       if (mask.trueCount !== df.filter.trueCount) {
         this.selectionMode = true;
@@ -214,10 +214,9 @@ export class StackedBarChart extends DG.JsViewer {
       this.barStats = {};
       for (const [name, df] of Object.entries(this.aggregatedTables)) {
         const colObj: {
-                'name': string, 'data':
-                    { 'name': string, 'count': number, 'selectedCount': number }[]
-            } =
-                {'name': name, 'data': []};
+          'name': string,
+          'data': { 'name': string, 'count': number, 'selectedCount': number }[],
+        } = {'name': name, 'data': []};
         this.barStats[colObj['name']] = colObj['data'];
         this.data.push(colObj);
         for (let i = 0; i < df.rowCount; i++) {
@@ -263,7 +262,6 @@ export class StackedBarChart extends DG.JsViewer {
       g.fillStyle = 'black';
       g.textBaseline = 'top';
       g.font = `${h * margin / 2}px`;
-      // eslint-disable-next-line no-unused-vars
 
       const name = cell.tableColumn!.name;
       const colNameSize = g.measureText(name).width;

package/src/widgets/analyze-peptides.ts

@@ -0,0 +1,87 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {Peptides} from '../peptides';
+
+export async function analyzePeptidesWidget(
+  col: DG.Column, view: DG.TableView, tableGrid: DG.Grid, currentDf: DG.DataFrame,
+): Promise<DG.Widget> {
+  let tempCol = null;
+  for (const column of currentDf.columns.numerical) {
+    tempCol = column.type === DG.TYPE.FLOAT ? column : null;
+  }
+  const defaultColumn: DG.Column = currentDf.col('activity') || currentDf.col('IC50') || tempCol;
+  const histogramHost = ui.div([]);
+
+  let hist: DG.Viewer;
+
+  const activityScalingMethod = ui.choiceInput(
+    'Activity scaling',
+    'none',
+    ['none', 'lg', '-lg'],
+    async (currentMethod: string) => {
+      const currentActivityCol = activityColumnChoice.value.name;
+      const tempDf = currentDf.clone(currentDf.filter, [currentActivityCol]);
+      //TODO: merge with scaling in describe
+      switch (currentMethod) {
+      case 'lg':
+        await tempDf.columns.addNewCalculated('scaledActivity', 'Log10(${' + currentActivityCol + '})');
+        break;
+      case '-lg':
+        await tempDf.columns.addNewCalculated('scaledActivity', '-1*Log10(${' + currentActivityCol + '})');
+        break;
+      default:
+        await tempDf.columns.addNewCalculated('scaledActivity', '${' + currentActivityCol + '}');
+        break;
+      }
+      hist = tempDf.plot.histogram({
+        filteringEnabled: false,
+        valueColumnName: 'scaledActivity',
+        legendVisibility: 'Never',
+        showXAxis: true,
+        showColumnSelector: false,
+        showRangeSlider: false,
+      // bins: b,
+      });
+      histogramHost.lastChild?.remove();
+      histogramHost.appendChild(hist.root);
+    });
+  activityScalingMethod.setTooltip('Function to apply for each value in activity column');
+
+  const activityScalingMethodState = function(_: any) {
+    activityScalingMethod.enabled =
+      activityColumnChoice.value && DG.Stats.fromColumn(activityColumnChoice.value, currentDf.filter).min > 0;
+    activityScalingMethod.fireChanged();
+  };
+  const activityColumnChoice = ui.columnInput(
+    'Activity column',
+    currentDf,
+    defaultColumn,
+    activityScalingMethodState,
+  );
+  activityColumnChoice.fireChanged();
+  activityScalingMethod.fireChanged();
+
+  const startBtn = ui.button('Launch SAR', async () => {
+    if (activityColumnChoice.value.type === DG.TYPE.FLOAT) {
+      const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
+      const options: {[key: string]: string} = {
+        'activityColumnColumnName': activityColumnChoice.value.name,
+        'activityScalingMethod': activityScalingMethod.value,
+      };
+
+      const peptides = new Peptides();
+      await peptides.init(tableGrid, view, currentDf, options, col, activityColumnChoice.value.name);
+
+      progress.close();
+    } else {
+      grok.shell.error('The activity column must be of floating point number type!');
+    }
+  });
+
+  const viewer = await currentDf.plot.fromType('peptide-logo-viewer');
+
+  return new DG.Widget(
+    ui.divV([viewer.root, ui.inputs([activityColumnChoice, activityScalingMethod]), startBtn, histogramHost]),
+  );
+}

package/src/widgets/manual-alignment.ts

@@ -0,0 +1,36 @@
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import $ from 'cash-dom';
+import {model} from '../viewers/model';
+import {splitAlignedPeptides} from '../utils/split-aligned';
+
+export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf: DG.DataFrame) {
+  const sequenceInput = ui.textInput('', alignedSequenceCol.get(currentDf.currentRowIdx));
+  (sequenceInput.input as HTMLElement).style.height = '50px';
+  (sequenceInput.input as HTMLElement).style.overflow = 'hidden';
+
+  const applyChangesBtn = ui.button('Apply', async () => {
+    const newSequence = sequenceInput.value;
+    const affectedRowIndex = currentDf.currentRowIdx;
+    const [splitSequence] = splitAlignedPeptides(DG.Column.fromStrings('splitSequence', [newSequence]), false);
+
+    alignedSequenceCol.set(affectedRowIndex, newSequence);
+    for (const part of splitSequence.columns) {
+      if (currentDf.col(part.name) !== null) {
+        currentDf.set(part.name, affectedRowIndex, part.get(0));
+      }
+    }
+
+    await model.updateDefault();
+  });
+
+  const resetBtn = ui.button(
+    ui.iconFA('redo'),
+    () => sequenceInput.value = alignedSequenceCol.get(currentDf.currentRowIdx),
+    'Reset',
+  );
+  $(resetBtn).addClass('dt-snippet-editor-icon dt-reset-icon');
+
+  return new DG.Widget(ui.divV([resetBtn, sequenceInput.root, applyChangesBtn], 'dt-textarea-box'));
+}

package/src/widgets/peptide-molecule.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';
+import {ChemPalette} from '../utils/chem-palette';
+
+export async function peptideMoleculeWidget(pep: string): Promise<DG.Widget> {
+  const pi = DG.TaskBarProgressIndicator.create('Creating NGL view');
+
+  const split = pep.split('-');
+  const mols = [];
+  for (let i = 1; i < split.length - 1; i++) {
+    if (split[i] in ChemPalette.AASmiles) {
+      const aar = ChemPalette.AASmiles[split[i]];
+      mols[i] = aar.substr(0, aar.length - 1);
+    } else if (!split[i] || split[i] == '-') {
+      mols[i] = '';
+    } else {
+      return new DG.Widget(ui.divH([]));
+    }
+  }
+  const smiles = mols.join('') + 'O';
+  let molfileStr = (await grok.functions.call('Peptides:SmiTo3D', {smiles}));
+
+  molfileStr = molfileStr.replaceAll('\\n', '\n'); ;
+  const stringBlob = new Blob([molfileStr], {type: 'text/plain'});
+  const nglHost = ui.div([], {classes: 'd4-ngl-viewer', id: 'ngl-3d-host'});
+
+  //@ts-ignore
+  const stage = new NGL.Stage(nglHost, {backgroundColor: 'white'});
+  //@ts-ignore
+  stage.loadFile(stringBlob, {ext: 'sdf'}).then(function(comp: NGL.StructureComponent) {
+    stage.setSize(300, 300);
+    comp.addRepresentation('ball+stick');
+    comp.autoView();
+  });
+  const sketch = grok.chem.svgMol(smiles);
+  const panel = ui.divH([sketch]);
+
+  pi.close();
+
+  return new DG.Widget(ui.div([panel, nglHost]));
+}

package/src/workers/dimensionality-reducer.ts

@@ -0,0 +1,29 @@
+import {DimensionalityReducer} from '@datagrok-libraries/utils/src/reduce-dimensionality';
+import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
+
+/**
+ * Worker thread receiving data function.
+ *
+ * @param {any[]} columnData Samples to process.
+ * @param {string} method Embedding method.
+ * @param {string} measure Distance metric.
+ * @param {number} cyclesCount Number of cycles to repeat.
+ * @return {Coordinates} Embedding.
+ */
+function onMessage(columnData: [], method: string, measure: string, cyclesCount: number): Coordinates {
+  const reducer = new DimensionalityReducer(
+    columnData,
+    method,
+    measure,
+    {cycles: cyclesCount},
+  );
+  return reducer.transform(true);
+}
+
+self.onmessage = ({data: {columnData, method, measure, cyclesCount}}) => {
+  const embedding = onMessage(columnData, method, measure, cyclesCount);
+  self.postMessage({
+    embedding: embedding,
+  });
+};
+