@datagrok/peptides 0.3.0 → 0.5.6

package/src/viewers/sar-viewer.ts

@@ -4,8 +4,15 @@ import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 
-import { model } from './model';
-
+import {model} from './model';
+
+/**
+ * Structure-activity relationship viewer.
+ *
+ * @export
+ * @class SARViewer
+ * @extends {DG.JsViewer}
+ */
 export class SARViewer extends DG.JsViewer {
   protected viewerGrid: DG.Grid | null;
   protected sourceGrid: DG.Grid | null;
@@ -20,16 +27,24 @@ export class SARViewer extends DG.JsViewer {
   protected _initialBitset: DG.BitSet | null;
   protected viewerVGrid: DG.Grid | null;
   protected currentBitset: DG.BitSet | null;
-  // private df: DG.DataFrame | null;
+  grouping: boolean;
+  groupMapping: {[key: string]: string} | null;
   // protected pValueThreshold: number;
   // protected amountOfBestAARs: number;
   // duplicatesHandingMethod: string;
+
+  /**
+   * Creates an instance of SARViewer.
+   *
+   * @memberof SARViewer
+   */
   constructor() {
     super();
-    
+
     this.viewerGrid = null;
     this.viewerVGrid = null;
     this.statsDf = null;
+    this.groupMapping = null;
     this.initialized = false;
     this.aminoAcidResidue = 'AAR';
     this._initialBitset = null;
@@ -41,6 +56,7 @@ export class SARViewer 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']});
@@ -48,27 +64,49 @@ export class SARViewer extends DG.JsViewer {
     this.sourceGrid = null;
   }
 
+  /**
+   * Initializes SARViewer.
+   *
+   * @memberof SARViewer
+   */
   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.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.viewerVGrid$.subscribe((data) => this.viewerVGrid = data));
+    this.subs.push(model.groupMapping$.subscribe((data) => this.groupMapping = data));
   }
 
+  /**
+   * Function that is executed when the table is attached.
+   *
+   * @memberof SARViewer
+   */
   onTableAttached() {
     this.sourceGrid = this.view.grid;
     this.sourceGrid?.dataFrame?.setTag('dataType', 'peptides');
     this.render();
   }
 
+  /**
+   * Function that is executed when the viewer is detached from the table.
+   *
+   * @memberof SARViewer
+   */
   detach() {
     this.subs.forEach((sub) => sub.unsubscribe());
   }
 
+  /**
+   * Function that is executed when the property is changed.
+   *
+   * @param {DG.Property} property New property.
+   * @memberof SARViewer
+   */
   onPropertyChanged(property: DG.Property) {
     super.onPropertyChanged(property);
 
@@ -93,6 +131,12 @@ export class SARViewer extends DG.JsViewer {
     this.render();
   }
 
+  /**
+   * Filtering/selecting sequences with the specified amino acid residue at specified position.
+   *
+   * @private
+   * @memberof SARViewer
+   */
   private applyBitset() {
     if (
       this.dataFrame &&
@@ -114,25 +158,13 @@ export class SARViewer extends DG.JsViewer {
         splitCol = this.dataFrame.columns.addNew(splitColName, 'string');
       }
 
-      const isChosen = (i: number) => this.dataFrame!.get(currentPosition, i) === currentAAR;
+      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);
-      //   this.dataFrame.filter.init(isChosen).and(this._initialBitset!, false);
-      // } else {
-      //   this.dataFrame.filter.copyFrom(this._initialBitset!);
-      //   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.sourceFilteringFunc();
 
-
-      // df.getCol(splitColName).setCategoryOrder([otherLabel, aarLabel]);
       const colorMap: {[index: string]: string | number} = {};
       colorMap[otherLabel] = DG.Color.blue;
       colorMap[aarLabel] = DG.Color.orange;
@@ -141,6 +173,12 @@ export class SARViewer extends DG.JsViewer {
     }
   }
 
+  /**
+   * Selecting/filtering sequences according to the current bitset.
+   *
+   * @private
+   * @memberof SARViewer
+   */
   private sourceFilteringFunc() {
     if (this.filterMode) {
       this.dataFrame!.selection.setAll(false, false);
@@ -151,6 +189,13 @@ export class SARViewer extends DG.JsViewer {
     }
   }
 
+  /**
+   * Property panel accordion construction function.
+   *
+   * @private
+   * @param {DG.Accordion} accordion Accordion.
+   * @memberof SARViewer
+   */
   private accordionFunc(accordion: DG.Accordion) {
     if (accordion.context instanceof DG.RowGroup) {
       const originalDf: DG.DataFrame = DG.toJs(accordion.context.dataFrame);
@@ -211,7 +256,13 @@ export class SARViewer extends DG.JsViewer {
     }
   }
 
-  syncGridsFunc(sourceVertical: boolean) { //TODO: refactor
+  /**
+   * Function for viewer girds synchronization.
+   *
+   * @param {boolean} sourceVertical Event source is vertical viewer.
+   * @memberof SARViewer
+   */
+  syncGridsFunc(sourceVertical: boolean) { //TODO: refactor, move
     if (this.viewerGrid && this.viewerGrid.dataFrame && this.viewerVGrid && this.viewerVGrid.dataFrame) {
       if (sourceVertical) {
         const dfCell = this.viewerVGrid.dataFrame.currentCell;
@@ -253,8 +304,13 @@ export class SARViewer extends DG.JsViewer {
       }
     }
   }
-  // argument compute data can be used to just redraw grids.
-  // Probably iirelevant since mostly grids are updating themselves, and render is only used to update data.
+
+  /**
+   * Viewer render function.
+   *
+   * @param {boolean} [computeData=true] Recalculate data.
+   * @memberof SARViewer
+   */
   async render(computeData = true) {
     if (!this.initialized) {
       return;
@@ -262,14 +318,6 @@ export class SARViewer 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.activityColumnColumnName,
-        //   this.activityScalingMethod,
-        //   this.sourceGrid,
-        //   this.bidirectionalAnalysis,
-        //   this._initialBitset,
-        // );
         await model?.updateData(
           this.dataFrame!,
           this.activityColumnColumnName,
@@ -277,6 +325,7 @@ export class SARViewer extends DG.JsViewer {
           this.sourceGrid,
           this.bidirectionalAnalysis,
           this._initialBitset,
+          this.grouping,
         );
 
         if (this.viewerGrid !== null && this.viewerVGrid !== null) {
@@ -297,18 +346,36 @@ export class SARViewer extends DG.JsViewer {
   }
 }
 
+/**
+ * Vertical structure activity relationship viewer.
+ *
+ * @export
+ * @class SARViewerVertical
+ * @extends {DG.JsViewer}
+ */
 export class SARViewerVertical extends DG.JsViewer {
   viewerVGrid: DG.Grid | null;
+
+  /**
+   * Creates an instance of SARViewerVertical.
+   *
+   * @memberof SARViewerVertical
+   */
   constructor() {
     super();
 
     this.viewerVGrid = null;
-    this.subs.push(model.viewerVGrid$.subscribe(data => {
+    this.subs.push(model.viewerVGrid$.subscribe((data) => {
       this.viewerVGrid = data;
       this.render();
     }));
   }
 
+  /**
+   * Viewer render function.
+   *
+   * @memberof SARViewerVertical
+   */
   render() {
     if (this.viewerVGrid) {
       $(this.root).empty();
@@ -316,4 +383,4 @@ export class SARViewerVertical extends DG.JsViewer {
     }
     this.viewerVGrid?.invalidate();
   }
-}
+}

package/src/viewers/spiral-plot.ts

@@ -0,0 +1,97 @@
+import * as DG from 'datagrok-api/dg';
+import {_toJson} from 'datagrok-api/src/utils';
+
+import {assert, argSort} from '@datagrok-libraries/utils/src/operations';
+import {Options} from '@datagrok-libraries/utils/src/type-declarations';
+
+const api = <any>window;
+
+/**
+ * Draws 2D scatter plot from 1D series.
+ *
+ * @export
+ * @class SpiralPlot
+ * @extends {DG.ScatterPlotViewer}
+ */
+export class SpiralPlot extends DG.ScatterPlotViewer {
+    static axesNames = ['~X', '~Y'];
+    static valuesKey = 'valuesColumnName';
+
+    /**
+     * Calculates coordinates of the projection into a spiral.
+     *
+     * @static
+     * @param {DG.DataFrame} t Source data frame.
+     * @param {Options} options Options to read values column name from. Must include {valuesColumnName: string}.
+     * @return {DG.DataFrame} Updated dataframe.
+     * @memberof SpiralPlot
+     */
+    static updateCoordinates(t: DG.DataFrame, options: Options): DG.DataFrame {
+      assert(options[SpiralPlot.valuesKey] != undefined);
+
+      const values = t.getCol(options[SpiralPlot.valuesKey]).getRawData() as Float32Array;
+      const columns = _calcSpiralProjection(values);
+      const cdf = DG.DataFrame.fromColumns(
+        Array.from(columns).map((v, i) => DG.Column.fromFloat32Array(SpiralPlot.axesNames[i], v)),
+      );
+      return _updateCoordinates(t, cdf);
+    }
+
+    /**
+     * Creates new SpiralPlot from a data frame with selected values column.
+     *
+     * @static
+     * @param {DG.DataFrame} t A data frame.
+     * @param {Options} options Controlling options.
+     * @return {SpiralPlot} The plot.
+     * @memberof SpiralPlot
+     */
+    static fromTable(t: DG.DataFrame, options: Options): SpiralPlot {
+      t = SpiralPlot.updateCoordinates(t, options);
+      [options.x, options.y] = SpiralPlot.axesNames;
+      options.color = options[SpiralPlot.valuesKey];
+      return new SpiralPlot(api.grok_Viewer_ScatterPlot(t.dart, _toJson(options)));
+    }
+}
+
+/**
+ * Calculates 2D projection of 1D series as a spiral.
+ *
+ * @param {(number[] | Float32Array)} values The series.
+ * @return {[Float32Array, Float32Array]} X and Y componenets of the projection.
+ */
+function _calcSpiralProjection(values: number[] | Float32Array): [Float32Array, Float32Array] {
+  const nItems = values.length;
+  const order = argSort(Array.from(values), true);
+  const maxV = values[order[0]];
+  const X = new Float32Array(nItems).fill(0);
+  const Y = new Float32Array(nItems).fill(0);
+
+  for (const i of order) {
+    const v = maxV - values[i];
+    X[i] = v * Math.cos(Math.PI * v) - Math.random() * 1.5 + 0.75;
+    Y[i] = v * Math.sin(Math.PI * v) - Math.random() * 1.5 + 0.75;
+  }
+  return [X, Y];
+}
+
+/**
+ * Adds new columns from one data frame into another one.
+ *
+ * @param {DG.DataFrame} table Destination data frame.
+ * @param {DG.DataFrame} coords Source data frame.
+ * @return {DG.DataFrame} Updated data frame.
+ */
+function _updateCoordinates(table: DG.DataFrame, coords: DG.DataFrame): DG.DataFrame {
+  const coordsColNames: string[] = coords.columns.names();
+  const tableColNames: string[] = table.columns.names();
+  const restColNames = tableColNames.filter((v: string) => !coordsColNames.includes(v));
+
+  if (tableColNames.length == restColNames.length) {
+    for (const col of coords.columns) {
+      table.columns.add(col);
+    }
+    return table;
+  }
+  return table.join(coords, coordsColNames, coordsColNames, restColNames, [], 'right', false);
+}

package/src/viewers/stacked-barchart-viewer.ts

@@ -5,6 +5,8 @@ import {ChemPalette} from '../utils/chem-palette';
 import * as rxjs from 'rxjs';
 const cp = new ChemPalette('grok');
 
+import {CorrelationAnalysisVisualizer} from '../utils/correlation-analysis';
+
 //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) => {
@@ -42,7 +44,10 @@ export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
             return true;
           } else {
             if (barchart.highlighted) {
-              ui.tooltip.show(ui.divV([ui.divText(barchart.highlighted.aaName)]), x, y);
+              let elements: HTMLElement[] = [];
+              elements = elements.concat([ui.divText(barchart.highlighted.aaName)]);
+              elements = elements.concat(barchart.getTooltipElements(cell.tableColumn.name, barchart.aminoColumnNames));
+              ui.tooltip.show(ui.divV(elements), x, y);
             }
             return true;
           }
@@ -54,6 +59,7 @@ export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
       args.g.beginPath();
       args.g.rect(args.bounds.x, args.bounds.y, args.bounds.width, args.bounds.height);
       args.g.clip();
+
       if (args.cell.isColHeader && barchart.aminoColumnNames.includes(args.cell.gridColumn.name)) {
         barchart.renderBarToCanvas(
           args.g,
@@ -95,11 +101,13 @@ export class StackedBarChart extends DG.JsViewer {
     private barStats: {[Key: string]: {'name': string, 'count': number, 'selectedCount': number}[]} = {};
     tableCanvas: HTMLCanvasElement | undefined;
     private registered: {[Key: string]: DG.GridCell} = {};
+    protected corrViz: CorrelationAnalysisVisualizer | undefined;
 
     constructor() {
       super();
       this.dataEmptyAA = this.string('dataEmptyAA', '-');
       this.initialized = false;
+      this.corrViz = undefined;
     }
 
     init() {
@@ -115,8 +123,8 @@ export class StackedBarChart extends DG.JsViewer {
       let i = 0;
       for (const value of Object.values(groups)) {
         i++;
-        for (const obj in value) {
-          this.ord[value[obj]] = i;
+        for (const obj of value) {
+          this.ord[obj] = i;
         }
       }
       this.yScale = scaleLinear();
@@ -249,9 +257,17 @@ export class StackedBarChart extends DG.JsViewer {
         });
       }
       this.max = df.filter.trueCount;
+      this.corrViz = new CorrelationAnalysisVisualizer(df, this.aminoColumnNames);
     }
 
-    renderBarToCanvas(g: CanvasRenderingContext2D, cell: DG.GridCell, x: number, y: number, w: number, h: number) {
+    renderBarToCanvas(
+      g: CanvasRenderingContext2D,
+      cell: DG.GridCell,
+      x: number,
+      y: number,
+      w: number,
+      h: number,
+    ) {
       const margin = 0.2;
       const innerMargin = 0.02;
       const selectLineRatio = 0.1;
@@ -268,6 +284,14 @@ export class StackedBarChart extends DG.JsViewer {
       g.fillText(name,
         x + (w - colNameSize)/2,
         y + h + h * margin / 4);
+      this.higlightCorrelatedPositionHeader(
+        g,
+        name,
+        x + (w - colNameSize)/2,
+        y + h + h * margin / 4,
+        colNameSize,
+        margin,
+      );
       const barData = this.barStats[name]? this.barStats[name]: this.barStats[name];
       let sum = 0;
       barData.forEach((obj) => {
@@ -287,8 +311,7 @@ export class StackedBarChart extends DG.JsViewer {
         if (h * margin / 2 <= sBarHeight - gapSize && h * margin / 2 <= w) {
           g.fillStyle = 'rgb(0,0,0)';
           g.font = `${h * margin / 2}px`;
-          // eslint-disable-next-line no-unused-vars
-          const [_c, aar, _p] = cp.getColorAAPivot(obj['name']);
+          const [, aar] = cp.getColorAAPivot(obj['name']);
           g.fillText(aar,
             x + w / 2 - h * margin / 8,
             y + h * (this.max - sum + curSum) / this.max + gapSize / 2 + (sBarHeight - gapSize)/2 - h * margin / 8);
@@ -398,11 +421,63 @@ export class StackedBarChart extends DG.JsViewer {
         return;
       }
       this.dataFrame!.selection.handleClick((i) => {
-        //let selected = true;
         // @ts-ignore
         return this.highlighted!['aaName'] === (this.dataFrame.getCol(this.highlighted!['colName']).get(i));
-
-        //&& (scope.dataFrame.selection.get(i) === selected);
       }, event);
     }
+
+    /**
+     * Highlights column header if the corresponding position is correlated with any other.
+     *
+     * @protected
+     * @param {CanvasRenderingContext2D} g A context to draw on.
+     * @param {string} name The name of the column.
+     * @param {number} x X coordinate to draw at.
+     * @param {number} y Y coordinate to draw at.
+     * @param {number} width The width to take to draw the highlighting.
+     * @param {number} margin The margin to take into account.
+     * @memberof StackedBarChart
+     */
+    protected higlightCorrelatedPositionHeader(
+      g: CanvasRenderingContext2D,
+      name: string,
+      x: number,
+      y: number,
+      width: number,
+      margin: number,
+    ) {
+      if (this.corrViz?.isPositionCorrelating(name)) {
+        const height = width/name.length; //TODO: measure height more precisely.s
+        g.fillRect(x, y + height + margin * 20, width, 2);
+      }
+    }
+
+    /**
+     * Formats HTML elements with the correlation analysis to add to the tooltip.
+     *
+     * @param {string} name A column name to consider.
+     * @param {string[]} positions Optional list of columns containing positions.
+     * @return {HTMLElement[]} The list of elements. Is empty if the position is not correlating.
+     * @memberof StackedBarChart
+     */
+    getTooltipElements(name: string, positions: string[]): HTMLElement[] {
+      const pos1 = parseInt(name);
+
+      if (this.corrViz?.isPositionCorrelating(name)) {
+        const padLen = Math.round(Math.log10(positions.length))+1;
+
+        const elements: HTMLElement[] = [];
+        elements.push(ui.divText(name, {style: {fontWeight: 'bold', fontSize: 10}}));
+        elements.push(ui.divText('Found correlations with:\n'));
+
+        for (const [pos2, weight] of Object.entries(this.corrViz.path[pos1])) {
+          const w = (weight as number);
+          const style = {style: {color: w > 0 ? 'red' : 'blue'}};
+          elements.push(ui.divText(`${pos2.padStart(padLen, '0')}: R = ${w.toFixed(2)}\n`, style));
+        }
+
+        return elements;
+      }
+      return [];
+    }
 }

package/src/widgets/analyze-peptides.ts

@@ -1,10 +1,18 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import {createPeptideSimilaritySpaceViewer} from '../utils/peptide-similarity-space';
-import {addViewerToHeader} from '../viewers/stacked-barchart-viewer';
-import {model} from '../viewers/model';
+import {Peptides} from '../peptides';
 
+/**
+ * Peptide analysis widget.
+ *
+ * @export
+ * @param {DG.Column} col Aligned sequence column.
+ * @param {DG.TableView} view Working view.
+ * @param {DG.Grid} tableGrid Working table grid.
+ * @param {DG.DataFrame} currentDf Working table.
+ * @return {Promise<DG.Widget>} Widget containing peptide analysis.
+ */
 export async function analyzePeptidesWidget(
   col: DG.Column, view: DG.TableView, tableGrid: DG.Grid, currentDf: DG.DataFrame,
 ): Promise<DG.Widget> {
@@ -18,12 +26,13 @@ export async function analyzePeptidesWidget(
   let hist: DG.Viewer;
 
   const activityScalingMethod = ui.choiceInput(
-    'Activity scaling',
+    '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 + '})');
@@ -55,7 +64,7 @@ export async function analyzePeptidesWidget(
     activityScalingMethod.fireChanged();
   };
   const activityColumnChoice = ui.columnInput(
-    'Activity column',
+    'Activity',
     currentDf,
     defaultColumn,
     activityScalingMethodState,
@@ -64,45 +73,20 @@ export async function analyzePeptidesWidget(
   activityScalingMethod.fireChanged();
 
   const startBtn = ui.button('Launch SAR', async () => {
-    const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
     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,
       };
-      for (let i = 0; i < tableGrid.columns.length; i++) {
-        const col = tableGrid.columns.byIndex(i);
-        if (col &&
-            col.name &&
-            col.column?.semType != 'aminoAcids'
-        ) {
-          //@ts-ignore
-          tableGrid.columns.byIndex(i)?.visible = false;
-        }
-      }
 
-      const sarViewer = view.addViewer('peptide-sar-viewer', options);
-      const sarViewerVertical = view.addViewer('peptide-sar-viewer-vertical');
-      const peptideSpaceViewer = await createPeptideSimilaritySpaceViewer(
-        currentDf,
-        col,
-        't-SNE',
-        'Levenshtein',
-        100,
-        `${activityColumnChoice}Scaled`,
-      );
-      let refNode = view.dockManager.dock(peptideSpaceViewer, 'down');
-      refNode = view.dockManager.dock(sarViewer, 'right', refNode);
-      view.dockManager.dock(sarViewerVertical, 'right', refNode);
+      const peptides = new Peptides();
+      await peptides.init(tableGrid, view, currentDf, options, col, activityColumnChoice.value.name);
 
-      const StackedBarchartProm = currentDf.plot.fromType('StackedBarChartAA');
-      addViewerToHeader(tableGrid, StackedBarchartProm);
-      
-      // currentDf.onValuesChanged.subscribe(async () => await model.updateDefault());
+      progress.close();
     } else {
       grok.shell.error('The activity column must be of floating point number type!');
     }
-    progress.close();
   });
 
   const viewer = await currentDf.plot.fromType('peptide-logo-viewer');

package/src/widgets/manual-alignment.ts

@@ -2,9 +2,16 @@ 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';
+import {model} from '../viewers/model';
+import {splitAlignedPeptides} from '../utils/split-aligned';
 
+/**
+ * Manual sequence alignment widget.
+ *
+ * @param {DG.Column} alignedSequenceCol Aligned sequence column.
+ * @param {DG.DataFrame} currentDf Working table.
+ * @returns {DG.Widget} Widget for manual sequence alignment.
+ */
 export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf: DG.DataFrame) {
   const sequenceInput = ui.textInput('', alignedSequenceCol.get(currentDf.currentRowIdx));
   (sequenceInput.input as HTMLElement).style.height = '50px';
@@ -13,12 +20,13 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf:
   const applyChangesBtn = ui.button('Apply', async () => {
     const newSequence = sequenceInput.value;
     const affectedRowIndex = currentDf.currentRowIdx;
-    const [splitSequence,] = splitAlignedPeptides(DG.Column.fromStrings('splitSequence', [newSequence]), false);
+    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)
+      if (currentDf.col(part.name) !== null) {
         currentDf.set(part.name, affectedRowIndex, part.get(0));
+      }
     }
 
     await model.updateDefault();

package/src/widgets/peptide-molecule.ts

@@ -3,6 +3,13 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {ChemPalette} from '../utils/chem-palette';
 
+/**
+ * 3D representation widget of peptide molecule.
+ *
+ * @export
+ * @param {string} pep Peptide string.
+ * @return {Promise<DG.Widget>} Widget.
+ */
 export async function peptideMoleculeWidget(pep: string): Promise<DG.Widget> {
   const pi = DG.TaskBarProgressIndicator.create('Creating NGL view');
 
@@ -39,4 +46,4 @@ export async function peptideMoleculeWidget(pep: string): Promise<DG.Widget> {
   pi.close();
 
   return new DG.Widget(ui.div([panel, nglHost]));
-}
+}

package/src/workers/dimensionality-reducer.ts

@@ -1,5 +1,5 @@
 import {DimensionalityReducer} from '@datagrok-libraries/utils/src/reduce-dimensionality';
-import {Coordinates} from '@datagrok-libraries/utils/src/type_declarations';
+import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
 
 /**
  * Worker thread receiving data function.