@datagrok/peptides 0.6.0 → 0.6.1

package/detectors.js

@@ -3,7 +3,7 @@ class PeptidesPackageDetectors extends DG.Package {
   //input: column col
   //output: string semType
   detectAligned(col) {
-    const regexp = new RegExp(/^([^-^\n]*-){2,49}(\w|\(|\))+$/);
+    const regexp = new RegExp(/^([^-^\n]*-){7,49}(\w|\(|\))+$/);
     return DG.Detector.sampleCategories(col, (s) => regexp.test(s.trim())) ? 'alignedSequence' : null;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@datagrok/peptides",
-	"version": "0.6.0",
+	"version": "0.6.1",
 	"description": "",
 	"dependencies": {
 		"@keckelt/tsne": "^1.0.2",
@@ -21,6 +21,8 @@
 	"devDependencies": {
 		"typescript": "^4.4.4",
 		"ts-loader": "^9.2.5",
+		"css-loader": "^5.2.4",
+		"style-loader": "^2.0.0",
 		"@typescript-eslint/eslint-plugin": "^4.29.1",
 		"@typescript-eslint/parser": "^4.29.1",
 		"eslint": "^7.32.0",

package/src/describe.ts

@@ -178,7 +178,7 @@ export async function describe(
 
   //calculate p-values based on t-test
   let position: string;
-  let AAR: string;
+  let aar: string;
   let currentActivity: number[];
   let otherActivity: number[];
   let testResult;
@@ -190,17 +190,17 @@ export async function describe(
   const pValCol: DG.Column = matrixDf.columns.addNewFloat('pValue');
   for (let i = 0; i < matrixDf.rowCount; i++) {
     position = matrixDf.get(positionColName, i);
-    AAR = matrixDf.get(aminoAcidResidue, i);
+    aar = matrixDf.get(aminoAcidResidue, i);
 
     //@ts-ignore
-    splitSeqDf.rows.select((row) => groupMapping[row[position]] === AAR);
+    splitSeqDf.rows.select((row) => groupMapping[row[position]] === aar);
     currentActivity = splitSeqDf
       .clone(splitSeqDf.selection, [activityColumnScaled])
       .getCol(activityColumnScaled)
       .toList();
 
     //@ts-ignore
-    splitSeqDf.rows.select((row) => groupMapping[row[position]] !== AAR);
+    splitSeqDf.rows.select((row) => groupMapping[row[position]] !== aar);
     otherActivity = splitSeqDf
       .clone(splitSeqDf.selection, [activityColumnScaled])
       .getCol(activityColumnScaled)
@@ -271,23 +271,23 @@ export async function describe(
   renderColNames.push('Mean difference');
 
   // !!! DRAWING PHASE !!!
-  const SARgrid = matrixDf.plot.grid();
-  SARgrid.sort([aminoAcidResidue]);
-  SARgrid.columns.setOrder([aminoAcidResidue].concat(positionColumns));
+  const sarGrid = matrixDf.plot.grid();
+  sarGrid.sort([aminoAcidResidue]);
+  sarGrid.columns.setOrder([aminoAcidResidue].concat(positionColumns));
 
-  const SARVgrid = sequenceDf.plot.grid();
-  SARVgrid.sort([positionColName]);
-  SARVgrid.col('pValue')!.format = 'four digits after comma';
-  SARVgrid.col('pValue')!.name = 'P-Value';
+  const sarVGrid = sequenceDf.plot.grid();
+  sarVGrid.sort([positionColName]);
+  sarVGrid.col('pValue')!.format = 'four digits after comma';
+  sarVGrid.col('pValue')!.name = 'P-Value';
 
   if (!grouping) {
     let tempCol = matrixDf.columns.byName(aminoAcidResidue);
     if (tempCol) {
-      setAARRenderer(tempCol, SARgrid);
+      setAARRenderer(tempCol, sarGrid);
     }
     tempCol = sequenceDf.columns.byName(aminoAcidResidue);
     if (tempCol) {
-      setAARRenderer(tempCol, SARgrid);
+      setAARRenderer(tempCol, sarGrid);
     }
   }
 
@@ -358,8 +358,8 @@ export async function describe(
     }
     args.g.restore();
   };
-  SARgrid.onCellRender.subscribe(cellRendererFunc);
-  SARVgrid.onCellRender.subscribe(cellRendererFunc);
+  sarGrid.onCellRender.subscribe(cellRendererFunc);
+  sarVGrid.onCellRender.subscribe(cellRendererFunc);
 
   // show all the statistics in a tooltip over cell
   const onCellTooltipFunc = function(cell: DG.GridCell, x: number, y: number) {
@@ -412,8 +412,8 @@ export async function describe(
     }
     return true;
   };
-  SARgrid.onCellTooltip(onCellTooltipFunc);
-  SARVgrid.onCellTooltip(onCellTooltipFunc);
+  sarGrid.onCellTooltip(onCellTooltipFunc);
+  sarVGrid.onCellTooltip(onCellTooltipFunc);
 
   sourceGrid.onCellPrepare((cell: DG.GridCell) => {
     const currentRowIndex = cell.tableRowIndex;
@@ -423,13 +423,16 @@ export async function describe(
   });
 
   for (const col of matrixDf.columns.names()) {
-    SARgrid.col(col)!.width = SARgrid.props.rowHeight;
+    sarGrid.col(col)!.width = sarGrid.props.rowHeight;
   }
 
   if (grouping) {
-    SARgrid.col(aminoAcidResidue)!.name = 'Groups';
-    SARVgrid.col(aminoAcidResidue)!.name = 'Groups';
+    sarGrid.col(aminoAcidResidue)!.name = 'Groups';
+    sarVGrid.col(aminoAcidResidue)!.name = 'Groups';
   }
 
-  return [SARgrid, SARVgrid, statsDf, groupMapping];
+  sarGrid.props.allowEdit = false;
+  sarVGrid.props.allowEdit = false;
+
+  return [sarGrid, sarVGrid, statsDf, groupMapping];
 }

package/src/package.ts

@@ -16,7 +16,7 @@ import {manualAlignmentWidget} from './widgets/manual-alignment';
 import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
 import {peptideMoleculeWidget} from './widgets/peptide-molecule';
 import {SpiralPlot} from './viewers/spiral-plot';
-import { SubstViewer } from './viewers/subst-viewer';
+import {SubstViewer} from './viewers/subst-viewer';
 
 export const _package = new DG.Package();
 let tableGrid: DG.Grid;
@@ -64,25 +64,18 @@ export function Peptides() {
     'Use and analyse peptide sequence data to support your research:',
   );
 
-  const annotationViewerDiv = ui.div();
-
   const windows = grok.shell.windows;
   windows.showToolbox = false;
   windows.showHelp = false;
   windows.showProperties = false;
 
-  const mainDiv = ui.div();
   grok.shell.newView('Peptides', [
     appDescription,
     ui.info([textLink]),
-    ui.div([
-      ui.block25([
-        ui.button('Open peptide sequences demonstration set', () => main('aligned.csv'), ''),
-        ui.button('Open complex case demo', () => main('aligned_2.csv'), ''),
-      ]),
-      ui.block75([annotationViewerDiv]),
+    ui.divH([
+      ui.button('Open peptide sequences demonstration set', () => main('aligned.csv'), ''),
+      ui.button('Open complex case demo', () => main('aligned_2.csv'), ''),
     ]),
-    mainDiv,
   ]);
 }
 
@@ -91,6 +84,9 @@ export function Peptides() {
 //input: column col {semType: alignedSequence}
 //output: widget result
 export async function peptidesPanel(col: DG.Column): Promise<DG.Widget> {
+  if (col.getTag('isAnalysisApplicable') === 'false') {
+    return new DG.Widget(ui.divText('Analysis is not applicable'));
+  }
   view = (grok.shell.v as DG.TableView);
   tableGrid = view.grid;
   currentDf = col.dataFrame;

package/src/peptides.ts

@@ -2,6 +2,7 @@ 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 $ from 'cash-dom';
 
 /**
  * Peptides controller class.
@@ -41,9 +42,10 @@ export class Peptides {
     }
 
     const originalDfColumns = (currentDf.columns as DG.ColumnList).names();
+    const originalDfName = currentDf.name;
 
     const substViewer = view.addViewer(
-      'substitution-analysis-viewer', {'activityColumnName': options['activityColumnColumnName']},
+      'substitution-analysis-viewer', {'activityColumnName': options['activityColumnName']},
     );
     view.dockManager.dock(substViewer, DG.DOCK_TYPE.RIGHT, null, 'Substitution Analysis');
 
@@ -62,10 +64,13 @@ export class Peptides {
       view,
       `${activityColumnChoice}Scaled`,
     );
-    view.dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.LEFT, sarNode, 'Peptide Space Viewer', 0.3);
+    const psNode = view.dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.LEFT, sarNode, 'Peptide Space Viewer', 0.3);
+    // const sarDockNodes = [sarNode, sarVNode, psNode];
+    // const sarViewers = [sarViewer, sarViewerVertical, peptideSpaceViewer];
 
     const StackedBarchartProm = currentDf.plot.fromType('StackedBarChartAA');
     addViewerToHeader(tableGrid, StackedBarchartProm);
+    tableGrid.props.allowEdit = false;
 
     const hideIcon = ui.iconFA('window-close', () => { //undo?, times?
       const viewers = [];
@@ -88,10 +93,47 @@ export class Peptides {
 
       tableGrid.setOptions({'colHeaderHeight': 20});
       tableGrid.columns.setVisible(originalDfColumns);
+      tableGrid.props.allowEdit = true;
+      currentDf.name = originalDfName;
 
       view.setRibbonPanels(ribbonPanels);
     }, 'Close viewers and restore dataframe');
 
+    // let substViewer: DG.Viewer | null = null;
+    // let substNode: DG.DockNode | null = null;
+    // let isSA = false;
+    // let viewLayout1: DG.ViewLayout | null = null;
+    // let viewLayout2: DG.ViewLayout | null = null;
+    // const switchViewers = ui.iconFA('toggle-on', () => {
+    //   if (isSA) {
+    //     viewLayout2 = view.saveLayout();
+    //     // view.dockManager.close(substNode!);
+    //     substViewer?.close();
+
+    //     view.loadLayout(viewLayout1!);
+
+    //     $(switchViewers).removeClass('fa-toggle-off');
+    //     $(switchViewers).addClass('fa-toggle-on');
+    //   } else {
+    //     viewLayout1 = view.saveLayout();
+    //     // sarDockNodes.forEach((node) => view.dockManager.close(node));
+    //     sarViewers.forEach((v) => v.close());
+
+    //     if (viewLayout2 === null) {
+    //       substViewer = view.addViewer(
+    //         'substitution-analysis-viewer', {'activityColumnName': options['activityColumnName']},
+    //       );
+    //       substNode = view.dockManager.dock(substViewer, DG.DOCK_TYPE.DOWN, null, 'Substitution Analysis');
+    //     } else {
+    //       view.loadLayout(viewLayout2);
+    //     }
+
+    //     $(switchViewers).removeClass('fa-toggle-on');
+    //     $(switchViewers).addClass('fa-toggle-off');
+    //   }
+    //   isSA = !isSA;
+    // });
+
     const ribbonPanels = view.getRibbonPanels();
     view.setRibbonPanels([[hideIcon]]);
   }

package/src/styles.css

@@ -0,0 +1,37 @@
+.pep-textarea-box {
+  position: relative;
+}
+
+.pep-textarea-box:hover .pep-snippet-editor-icon {
+  visibility: visible;
+}
+
+.pep-snippet-editor-icon {
+  position: absolute;
+  top: 5px;
+  visibility: hidden;
+  margin: 5px;
+  z-index: 1;
+}
+
+.pep-reset-icon {
+  right: 10px;
+}
+
+.pep-snippet-editor-icon i {
+  font-size: 13px;
+}
+
+.pep-snippet-editor-icon:hover {
+  background-color: var(--steel-1);
+  border-radius: 2px;
+}
+
+.pep-snippet-inline-icon i {
+  font-size: 13px;
+}
+
+.pep-textinput {
+  height: 50px;
+  overflow: hidden;
+}

package/src/utils/chem-palette.ts

@@ -56,7 +56,7 @@ export class ChemPalette {
   /**
    * Get color for the provided amino acid residue.
    * @param {string} c Amino acid residue string.
-   * @returns {string} Color.
+   * @return {string} Color.
    */
   getColor(c: string): string {
     const [color] = this.getColorPivot(c);
@@ -66,7 +66,7 @@ export class ChemPalette {
   /**
    * Get color for the provided amino acid residue pivot
    * @param {string} [c=''] Amino acid residue string.
-   * @returns {[string, string, number]}
+   * @return {[string, string, number]}
    */
   getColorAAPivot(c: string = ''): [string, string, number] {
     if (c.length == 1 || c[1] == '(') {

package/src/viewers/sar-viewer.ts

@@ -16,8 +16,8 @@ import {model} from './model';
 export class SARViewer extends DG.JsViewer {
   protected viewerGrid: DG.Grid | null;
   protected sourceGrid: DG.Grid | null;
-  protected activityColumnColumnName: string;
-  protected activityScalingMethod: string;
+  protected activityColumnName: string;
+  protected scaling: string;
   protected bidirectionalAnalysis: boolean;
   protected filterMode: boolean;
   protected statsDf: DG.DataFrame | null;
@@ -51,9 +51,9 @@ export class SARViewer extends DG.JsViewer {
     this.viewGridInitialized = false;
     this.currentBitset = null;
 
-    //TODO: find a way to restrict activityColumnColumnName to accept only numerical columns (double even better)
-    this.activityColumnColumnName = this.string('activityColumnColumnName');
-    this.activityScalingMethod = this.string('activityScalingMethod', 'none', {choices: ['none', 'lg', '-lg']});
+    //TODO: find a way to restrict activityColumnName to accept only numerical columns (double even better)
+    this.activityColumnName = this.string('activityColumnName');
+    this.scaling = this.string('scaling', 'none', {choices: ['none', 'lg', '-lg']});
     this.filterMode = this.bool('filterMode', false);
     this.bidirectionalAnalysis = this.bool('bidirectionalAnalysis', false);
     this.grouping = this.bool('grouping', false);
@@ -115,14 +115,14 @@ export class SARViewer extends DG.JsViewer {
       return;
     }
 
-    if (property.name === 'activityScalingMethod' && typeof this.dataFrame !== 'undefined') {
+    if (property.name === 'scaling' && typeof this.dataFrame !== 'undefined') {
       const minActivity = DG.Stats.fromColumn(
-        this.dataFrame!.col(this.activityColumnColumnName)!,
+        this.dataFrame!.col(this.activityColumnName)!,
         this._initialBitset,
       ).min;
-      if (minActivity && minActivity <= 0 && this.activityScalingMethod !== 'none') {
-        grok.shell.warning(`Could not apply ${this.activityScalingMethod}: ` +
-          `activity column ${this.activityColumnColumnName} contains zero or negative values, falling back to 'none'.`);
+      if (minActivity && minActivity <= 0 && this.scaling !== 'none') {
+        grok.shell.warning(`Could not apply ${this.scaling}: ` +
+          `activity column ${this.activityColumnName} contains zero or negative values, falling back to 'none'.`);
         property.set(this, 'none');
         return;
       }
@@ -230,7 +230,7 @@ export class SARViewer extends DG.JsViewer {
           const hist = originalDf.clone(this._initialBitset).plot.histogram({
           // const hist = originalDf.plot.histogram({
             filteringEnabled: false,
-            valueColumnName: `${this.activityColumnColumnName}Scaled`,
+            valueColumnName: `${this.activityColumnName}Scaled`,
             splitColumnName: '~splitCol',
             legendVisibility: 'Never',
             showXAxis: true,
@@ -317,11 +317,11 @@ 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) {
+      if (typeof this.dataFrame !== 'undefined' && this.activityColumnName && this.sourceGrid) {
         await model?.updateData(
           this.dataFrame!,
-          this.activityColumnColumnName,
-          this.activityScalingMethod,
+          this.activityColumnName,
+          this.scaling,
           this.sourceGrid,
           this.bidirectionalAnalysis,
           this._initialBitset,

package/src/viewers/subst-viewer.ts

@@ -1,11 +1,11 @@
-import * as grok from 'datagrok-api/grok';
+// import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 
-import { aarGroups } from '../describe';
-import { setAARRenderer } from '../utils/cell-renderer';
+// import {aarGroups} from '../describe';
+import {setAARRenderer} from '../utils/cell-renderer';
 
 export class SubstViewer extends DG.JsViewer {
   viewerGrid: DG.Grid | null;
@@ -32,28 +32,27 @@ export class SubstViewer extends DG.JsViewer {
 
   calcSubstitutions() {
     const aarColName = 'AAR';
-    let splitedMatrix: string[][];
-    let df: DG.DataFrame = this.dataFrame!;
+    const df: DG.DataFrame = this.dataFrame!;
     const col: DG.Column = df.columns.bySemType('alignedSequence');
     // let values: number[] = df.columns.byName('IC50').toList();
-    const values = df.getCol(this.activityColumnName).toList().map(x => -Math.log10(x));
+    const values = df.getCol(this.activityColumnName).toList().map((x) => -Math.log10(x));
     // values = values;
-    splitedMatrix = this.split(col);
+    const splitedMatrix = this.split(col);
 
-    let tableValues: { [aar: string]: number[] } = {};
-    let tableTooltips: { [aar: string]: string[] } = {};
-    let tableCases: { [aar: string]: number[][][] } = {};
+    const tableValues: { [aar: string]: number[] } = {};
+    const tableTooltips: { [aar: string]: {[index: string]: string}[][] } = {};
+    const tableCases: { [aar: string]: number[][][] } = {};
 
-    let nRows = splitedMatrix.length;
-    let nCols = splitedMatrix[0].length;
+    const nRows = splitedMatrix.length;
+    const nCols = splitedMatrix[0].length;
     const nColsArray = Array(nCols);
 
     for (let i = 0; i < nRows - 1; i++) {
       for (let j = i + 1; j < nRows; j++) {
         let substCounter = 0;
-        let subst1: { [pos: number]: [string, string] } = {};
-        let subst2: { [pos: number]: [string, string] } = {};
-        let delta = values[i] - values[j];
+        const subst1: { [pos: number]: [string, {[index: string]: string}] } = {};
+        const subst2: { [pos: number]: [string, {[index: string]: string}] } = {};
+        const delta = values[i] - values[j];
 
         for (let k = 0; k < nCols; k++) {
           const smik = splitedMatrix[i][k];
@@ -62,53 +61,76 @@ export class SubstViewer extends DG.JsViewer {
             const vi = values[i].toFixed(2);
             const vj = values[j].toFixed(2);
             substCounter++;
-            subst1[k] = [smik, `${smik} -> ${smjk}\t\t${vi} -> ${vj}`];
-            subst2[k] = [smjk, `${smjk} -> ${smik}\t\t${vj} -> ${vi}`];
+            subst1[k] = [
+              smik,
+              {key: `${smik === '-' ? 'Empty' : smik} → ${smjk === '-' ? 'Empty' : smjk}`, value: `${vi} → ${vj}`},
+            ];
+            subst2[k] = [
+              smjk,
+              {key: `${smjk === '-' ? 'Empty' : smjk} → ${smik === '-' ? 'Empty' : smik}`, value: `${vj} → ${vi}`},
+            ];
           }
         }
 
         if (substCounter <= this.maxSubstitutions && substCounter > 0) {
-
           Object.keys(subst1).forEach((pos) => {
             const posInt = parseInt(pos);
-            let aar = subst1[posInt][0];
+            const aar = subst1[posInt][0];
             if (!Object.keys(tableValues).includes(aar)) {
-              tableValues[aar] = Array.apply(null, nColsArray).map(function () { return DG.INT_NULL; });
-              tableTooltips[aar] = Array.apply(null, nColsArray).map(function () { return ""; });
-              tableCases[aar] = Array.apply(null, nColsArray).map(function () { return []; });
+              tableValues[aar] = Array.apply(null, nColsArray).map(function() {
+                return DG.INT_NULL;
+              });
+              tableTooltips[aar] = Array.apply(null, nColsArray).map(function() {
+                return [];
+              });
+              tableCases[aar] = Array.apply(null, nColsArray).map(function() {
+                return [];
+              });
             }
 
             tableValues[aar][posInt] = tableValues[aar][posInt] === DG.INT_NULL ? 1 : tableValues[aar][posInt] + 1;
-            tableTooltips[aar][posInt] = tableTooltips[aar][posInt] == "" ? "Substitution\tvalues\n" : tableTooltips[aar][posInt];
-            tableTooltips[aar][posInt] += subst1[posInt][1] + "\n";
+            tableTooltips[aar][posInt] = !tableTooltips[aar][posInt].length ?
+              [{key: 'Substitution', value: 'Values'}] : tableTooltips[aar][posInt];
+            tableTooltips[aar][posInt].push(subst1[posInt][1]);
             tableCases[aar][posInt].push([i, j, delta]);
           });
           Object.keys(subst2).forEach((pos) => {
             const posInt = parseInt(pos);
-            let aar = subst2[posInt][0];
+            const aar = subst2[posInt][0];
             if (!Object.keys(tableValues).includes(aar)) {
-              tableValues[aar] = Array.apply(null, nColsArray).map(function () { return DG.INT_NULL; });
-              tableTooltips[aar] = Array.apply(null, nColsArray).map(function () { return ""; });
-              tableCases[aar] = Array.apply(null, nColsArray).map(function () { return []; });
+              tableValues[aar] = Array.apply(null, nColsArray).map(function() {
+                return DG.INT_NULL;
+              });
+              tableTooltips[aar] = Array.apply(null, nColsArray).map(function() {
+                return [];
+              });
+              tableCases[aar] = Array.apply(null, nColsArray).map(function() {
+                return [];
+              });
             }
 
             tableValues[aar][posInt] = tableValues[aar][posInt] === DG.INT_NULL ? 1 : tableValues[aar][posInt] + 1;
             // tableValues[aar][posInt]++;
-            tableTooltips[aar][posInt] = tableTooltips[aar][posInt] == "" ? "Substitution\tValues\n" : tableTooltips[aar][posInt];
-            tableTooltips[aar][posInt] += subst2[posInt][1] + "\n";
+            tableTooltips[aar][posInt] = !tableTooltips[aar][posInt].length ?
+              [{key: 'Substitution', value: 'Values'}] : tableTooltips[aar][posInt];
+            tableTooltips[aar][posInt].push(subst2[posInt][1]);
             tableCases[aar][posInt].push([j, i, -delta]);
           });
         }
       }
     }
 
-    const cols = [...Array(nCols).keys()].map((v) => DG.Column.int(v.toString()));
-    const aarCol = DG.Column.string(aarColName);
+    const tableValuesKeys = Object.keys(tableValues);
+    const dfLength = tableValuesKeys.length;
+    const cols = [...nColsArray.keys()].map((v) => DG.Column.int(v.toString(), dfLength));
+    const aarCol = DG.Column.string(aarColName, dfLength);
     cols.splice(0, 1, aarCol);
-    let table = DG.DataFrame.fromColumns(cols);
-    for (const aar of Object.keys(tableValues)) {
+    const table = DG.DataFrame.fromColumns(cols);
+
+    for (let i = 0; i < dfLength; i++) {
+      const aar = tableValuesKeys[i];
       tableValues[aar].splice(0, 1);
-      table.rows.addNew([aar, ...tableValues[aar]]);
+      table.rows.setValues(i, [aar, ...tableValues[aar]]);
     }
 
     // let groupMapping: { [key: string]: string } = {};
@@ -127,12 +149,15 @@ export class SubstViewer extends DG.JsViewer {
           if (colName !== aarColName) {
             const aar = this.viewerGrid!.table.get(aarColName, gCell.tableRowIndex);
             const pos = parseInt(colName);
-            const tooltipText = tableTooltips[aar][pos];
-            ui.tooltip.show(ui.divText(tooltipText ? tooltipText : 'No substitutions'), x, y);
+            const tooltipText = tableTooltips[aar][pos].length ?
+              DG.HtmlTable.create(
+                tableTooltips[aar][pos], (item: {[index: string]: string}, idx: number) => [item.key, item.value],
+              ).root : ui.divText('No substitutions');
+            ui.tooltip.show(tooltipText, x, y);
           }
         }
         return true;
-      }
+      },
     );
 
     for (const col of table.columns.names()) {
@@ -146,28 +171,35 @@ export class SubstViewer extends DG.JsViewer {
       }
     });
 
+    this.viewerGrid.props.allowEdit = false;
+
     table.onCurrentCellChanged.subscribe((_) => {
       if (table.currentCol !== null && table.currentCol.name !== aarColName && table.currentCell.value !== null) {
         const aar = table.get(aarColName, table.currentRowIdx);
         const pos = parseInt(table.currentCol.name);
         const currentCase = tableCases[aar][pos];
-        const initCol = DG.Column.string('Initial');
-        const subsCol = DG.Column.string('Substituted');
+        const tempDfLength = currentCase.length;
+        const initCol = DG.Column.string('Initial', tempDfLength);
+        const subsCol = DG.Column.string('Substituted', tempDfLength);
 
         const tempDf = DG.DataFrame.fromColumns([
           initCol,
           subsCol,
-          DG.Column.float('Difference'),
+          DG.Column.float('Difference', tempDfLength),
         ]);
 
-        for (const row of currentCase) {
-          tempDf.rows.addNew([col.get(row[0]), col.get(row[1]), row[2]]);
+        for (let i = 0; i < tempDfLength; i++) {
+          const row = currentCase[i];
+          tempDf.rows.setValues(i, [col.get(row[0]), col.get(row[1]), row[2]]);
         }
 
         initCol.semType = 'alignedSequence';
+        initCol.setTag('isAnalysisApplicable', 'false');
         subsCol.semType = 'alignedSequence';
+        subsCol.setTag('isAnalysisApplicable', 'false');
 
         this.casesGrid = tempDf.plot.grid();
+        this.casesGrid.props.allowEdit = false;
       } else {
         this.casesGrid = null;
       }
@@ -180,7 +212,7 @@ export class SubstViewer extends DG.JsViewer {
   render() {
     $(this.root).empty();
     this.root.appendChild(this.casesGrid === null ?
-      this.viewerGrid!.root : ui.splitH([this.viewerGrid!.root, this.casesGrid.root])
+      this.viewerGrid!.root : ui.splitH([this.viewerGrid!.root, this.casesGrid.root]),
     );
   }
 
@@ -207,7 +239,7 @@ export class SubstViewer extends DG.JsViewer {
     // and marking invalid sequences
     let nTerminal: string;
     const invalidIndexes: number[] = [];
-    let splitColumns: string[][] = Array.from({ length: modeMonomerCount }, (_) => []);
+    let splitColumns: string[][] = Array.from({length: modeMonomerCount}, (_) => []);
     modeMonomerCount--; // minus N-terminal
     for (let i = 0; i < colLength; i++) {
       currentSplitPeptide = splitPeptidesArray[i];
@@ -224,7 +256,7 @@ export class SubstViewer extends DG.JsViewer {
     modeMonomerCount--; // minus C-terminal
 
     //create column names list
-    const columnNames = Array.from({ length: modeMonomerCount }, (_, index) => `${index + 1 < 10 ? 0 : ''}${index + 1}`);
+    const columnNames = Array.from({length: modeMonomerCount}, (_, index) => `${index + 1 < 10 ? 0 : ''}${index + 1}`);
     columnNames.splice(0, 0, 'N-terminal');
     columnNames.push('C-terminal');
 

package/src/widgets/analyze-peptides.ts

@@ -76,8 +76,8 @@ export async function analyzePeptidesWidget(
     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,
+        'activityColumnName': activityColumnChoice.value.name,
+        'scaling': activityScalingMethod.value,
       };
 
       const peptides = new Peptides();

package/src/widgets/manual-alignment.ts

@@ -4,18 +4,18 @@ import * as DG from 'datagrok-api/dg';
 import $ from 'cash-dom';
 import {model} from '../viewers/model';
 import {splitAlignedPeptides} from '../utils/split-aligned';
+import '../styles.css';
 
 /**
  * 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.
+ * @return {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';
-  (sequenceInput.input as HTMLElement).style.overflow = 'hidden';
+  $(sequenceInput.root).addClass('pep-textinput');
 
   const applyChangesBtn = ui.button('Apply', async () => {
     const newSequence = sequenceInput.value;
@@ -37,7 +37,7 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf:
     () => sequenceInput.value = alignedSequenceCol.get(currentDf.currentRowIdx),
     'Reset',
   );
-  $(resetBtn).addClass('dt-snippet-editor-icon dt-reset-icon');
+  $(resetBtn).addClass('pep-snippet-editor-icon pep-reset-icon');
 
-  return new DG.Widget(ui.divV([resetBtn, sequenceInput.root, applyChangesBtn], 'dt-textarea-box'));
+  return new DG.Widget(ui.divV([resetBtn, sequenceInput.root, applyChangesBtn], 'pep-textarea-box'));
 }

package/webpack.config.js

@@ -12,6 +12,10 @@ module.exports = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   resolve: {