@datagrok/peptides 1.0.2 → 1.2.0

package/src/tests/utils.ts

@@ -6,7 +6,6 @@ import {
   createDimensinalityReducingWorker,
   IReduceDimensionalityResult,
 } from '@datagrok-libraries/ml/src/workers/dimensionality-reducing-worker-creator';
-import {runKalign} from '../utils/multiple-sequence-alignment';
 import {StringMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
 
 /**
@@ -39,11 +38,10 @@ export async function _testViewerIsDrawing(table: DG.DataFrame, view: DG.TableVi
 export async function _testDimensionalityReducer(
   columnData: Array<string>, method: StringMetrics, measure: string): Promise<void> {
   const cyclesCount = 100;
-  let embcols;
 
   const reduceDimRes: IReduceDimensionalityResult = await createDimensinalityReducingWorker(
     {data: columnData, metric: measure as StringMetrics}, method, {cycles: cyclesCount});
-  embcols = reduceDimRes.embedding;
+  const embcols = reduceDimRes.embedding;
 
   const [X, Y] = embcols as Array<Float32Array>;
 
@@ -65,12 +63,9 @@ export async function _testDimensionalityReducer(
  */
 export async function _testPeptideSimilaritySpaceViewer(table: DG.DataFrame, alignedSequencesColumn: DG.Column,
   method: string, measure: string, cyclesCount: number): Promise<void> {
-  let viewer;
-  let df: DG.DataFrame;
-
-  viewer = await createPeptideSimilaritySpaceViewer(
+  const viewer = await createPeptideSimilaritySpaceViewer(
     table, method, measure, cyclesCount, undefined, alignedSequencesColumn);
-  df = viewer.dataFrame;
+  const df = viewer.dataFrame;
 
   const axesNames = ['~X', '~Y', '~MW'];
   const axes = axesNames.map((v) => df.getCol(v).getRawData() as Float32Array);

package/src/utils/cell-renderer.ts

@@ -1,4 +1,4 @@
-import {SeqPalette, SeqPaletteBase} from '@datagrok-libraries/bio/src/seq-palettes';
+import {SeqPaletteBase} from '@datagrok-libraries/bio/src/seq-palettes';
 import * as DG from 'datagrok-api/dg';
 
 import * as C from './constants';
@@ -63,8 +63,8 @@ export function measureAAR(s: string): number {
 
 export function renderSARCell(canvasContext: CanvasRenderingContext2D, currentAAR: string, currentPosition: string,
   statsDf: DG.DataFrame, twoColorMode: boolean, mdCol: DG.Column<number>, bound: DG.Rect, cellValue: number,
-  currentSelection: types.SelectionObject, substitutionsInfo: types.SubstitutionsInfo | null): void {
-  const queryAAR = `${C.COLUMNS_NAMES.AMINO_ACID_RESIDUE} = ${currentAAR}`;
+  currentSelection: types.SelectionObject, substitutionsInfo: types.SubstitutionsInfo): void {
+  const queryAAR = `${C.COLUMNS_NAMES.MONOMER} = ${currentAAR}`;
   const query = `${queryAAR} and ${C.COLUMNS_NAMES.POSITION} = ${currentPosition}`;
   const pVal: number = statsDf
     .groupBy([C.COLUMNS_NAMES.P_VALUE])
@@ -101,7 +101,7 @@ export function renderSARCell(canvasContext: CanvasRenderingContext2D, currentAA
   canvasContext.closePath();
 
   canvasContext.fill();
-  if (substitutionsInfo) {
+  if (substitutionsInfo.size > 0) {
     canvasContext.textBaseline = 'middle';
     canvasContext.textAlign = 'center';
     canvasContext.fillStyle = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(coef)));
@@ -136,7 +136,7 @@ export function renderBarchart(ctx: CanvasRenderingContext2D, col: DG.Column, mo
   const yMargin = bounds.y + bounds.height * margin / 4;
   const wMargin = bounds.width - bounds.width * margin * 2;
   const hMargin = bounds.height - bounds.height * margin;
-  const barWidth = wMargin - 10;
+  const barWidth = 10;
   ctx.fillStyle = 'black';
   ctx.textBaseline = 'top';
   ctx.font = `${hMargin * margin / 2}px`;

package/src/utils/constants.ts

@@ -3,7 +3,7 @@ export enum COLUMNS_NAMES {
   ACTIVITY = '~activity',
   ACTIVITY_SCALED = 'activity_scaled',
   ALIGNED_SEQUENCE = '~aligned_sequence',
-  AMINO_ACID_RESIDUE = 'AAR',
+  MONOMER = 'AAR',
   POSITION = 'Pos',
   P_VALUE = 'pValue',
   MEAN_DIFFERENCE = 'Mean difference',

package/src/utils/invariant-map.ts

@@ -0,0 +1,163 @@
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import * as C from './constants';
+import {PeptidesModel} from '../model';
+import {isGridCellInvalid} from './misc';
+
+const CELL_SIZE = 20; // 20px cell height and width
+
+export class InvariantMap extends DG.Filter {
+  model: PeptidesModel | null = null;
+  chosenCells: {[position: string]: string[]} = {};
+
+  constructor() {
+    super();
+  }
+
+  get caption(): string {return 'Invariant Map';}
+
+  get filterSummary(): string {
+    let summary = '';
+    for (const [pos, aarList] of Object.entries(this.chosenCells))
+      if (aarList.length > 0)
+        summary += `${pos}: ${aarList}\n`;
+
+    return summary;
+  }
+
+  get isFiltering(): boolean {return true && super.isFiltering;}
+
+  get isReadyToApplyFilter(): boolean {return this.model != null;}
+
+  async attach(df: DG.DataFrame): Promise<void> {
+    super.attach(df);
+    this.model = await PeptidesModel.getInstance(df);
+    this.render(true);
+  }
+
+  saveState(): any {
+    const state = super.saveState();
+    state.chosenCells = JSON.stringify(this.chosenCells);
+    return state;
+  }
+
+  applyState(state: any): void {
+    super.applyState(state);
+    if (state.chosenCells) {
+      this.chosenCells = JSON.parse(state.chosenCells);
+      this.render();
+    }
+  }
+
+  applyFilter(): void {
+    this.dataFrame?.filter.init((bitsetIndex) => {
+      for (const [position, aarList] of Object.entries(this.chosenCells)) {
+        if (aarList.length != 0 && !aarList.includes(this.dataFrame!.get(position, bitsetIndex)))
+          return false;
+      }
+      return true;
+    });
+  }
+
+  render(initChosenCells: boolean = false): void {
+    if (this.model == null)
+      return;
+
+    const invariantDf = this.model.statsDf.groupBy([C.COLUMNS_NAMES.MONOMER])
+      .pivot(C.COLUMNS_NAMES.POSITION)
+      .add('first', C.COLUMNS_NAMES.COUNT, '')
+      .aggregate();
+    invariantDf.getCol(C.COLUMNS_NAMES.MONOMER).semType = C.SEM_TYPES.MONOMER;
+    const orderedColNames = invariantDf.columns.names().sort((a, b) => {
+      const aInt = parseInt(a);
+      const bInt = parseInt(b);
+      if (isNaN(aInt))
+        return -1;
+      else if (isNaN(bInt))
+        return 1;
+      return aInt - bInt;
+    });
+
+    // Create grid and set properties
+    const invariantGrid = invariantDf.plot.grid();
+    const gridCols = invariantGrid.columns;
+    gridCols.rowHeader!.visible = false;
+    gridCols.setOrder(orderedColNames);
+
+    for (let gridColIndex = 0; gridColIndex < gridCols.length; ++gridColIndex) {
+      const gridCol = gridCols.byIndex(gridColIndex)!
+      if (gridCol.name != C.COLUMNS_NAMES.MONOMER) 
+        gridCol.width = CELL_SIZE;
+    }
+
+    if (initChosenCells) {
+      this.chosenCells = {};
+      for (const col of invariantDf.columns)
+        if (col.name != C.COLUMNS_NAMES.MONOMER)
+          this.chosenCells[col.name] = [];
+    }
+
+    invariantGrid.root.addEventListener('click', (ev) => {
+      invariantDf.currentRowIdx = -1;
+      const gridCell = invariantGrid.hitTest(ev.offsetX, ev.offsetY);
+      if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name == C.COLUMNS_NAMES.MONOMER)
+        return;
+
+      const position = gridCell!.tableColumn!.name;
+      const aar = invariantDf.get(C.COLUMNS_NAMES.MONOMER, gridCell!.tableRowIndex!);
+      const aarList = this.chosenCells[position];
+      const aarIndex = aarList.indexOf(aar);
+
+      if (aarIndex != -1)
+        aarList.splice(aarIndex, 1);
+      else
+        aarList.push(aar);
+
+      invariantGrid.invalidate();
+      this.applyFilter();
+    });
+
+    invariantGrid.onCellRender.subscribe((args) => {
+      //FIXME: for some reason it doesn't work when I set right away
+      const gridProps = invariantGrid.props;
+      gridProps.allowBlockSelection = false;
+      gridProps.allowColSelection = false;
+      gridProps.allowRowSelection = false;
+      gridProps.allowEdit = false;
+      gridProps.rowHeight = CELL_SIZE;
+
+      const gc = args.cell;
+      const tableColName = gc.tableColumn?.name;
+      const tableRowIndex = gc.tableRowIndex;
+
+      if (isGridCellInvalid(gc) || tableColName == C.COLUMNS_NAMES.MONOMER ||
+        tableRowIndex == null || tableRowIndex == -1)
+        return;
+
+      const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
+        tableColName : invariantDf.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
+      const currentAAR: string = invariantDf.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
+      const canvasContext = args.g;
+      const bound = args.bounds;
+
+      canvasContext.font = '10px Roboto';
+      canvasContext.textAlign = 'center';
+      canvasContext.textBaseline = 'middle';
+      canvasContext.fillStyle = '#000';
+      canvasContext.fillText(gc.cell.value, bound.x + (bound.width / 2), bound.y + (bound.height / 2), bound.width);
+
+      const aarSelection = this.chosenCells[currentPosition];
+      if (aarSelection.includes(currentAAR)) {
+        canvasContext.strokeStyle = '#000';
+        canvasContext.lineWidth = 1;
+        canvasContext.strokeRect(bound.x + 1, bound.y + 1, bound.width - 1, bound.height - 1);
+      }
+      args.preventDefault();
+    });
+
+    const gridHost = ui.box(invariantGrid.root);
+    gridHost.style.width = '100%';
+    this.root.appendChild(gridHost);
+  }
+}

package/src/utils/misc.ts

@@ -6,7 +6,6 @@ import {AminoacidsPalettes} from '@datagrok-libraries/bio/src/aminoacids';
 import {NucleotidesPalettes} from '@datagrok-libraries/bio/src/nucleotides';
 import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
-import {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
 
 export function getPalleteByType(paletteType: string): SeqPalette {
   switch (paletteType) {
@@ -33,28 +32,6 @@ export function getSeparator(col: DG.Column<string>): string {
   return col.getTag(C.TAGS.SEPARATOR) ?? '';
 }
 
-export function splitAlignedPeptides(peptideColumn: DG.Column<string>): DG.DataFrame {
-  const splitter = WebLogo.getSplitterForColumn(peptideColumn);
-  const colLen = peptideColumn.length;
-  const resultDf = DG.DataFrame.create(colLen);
-  let monomerList = splitter(peptideColumn.get(0)!);
-  const columnList: DG.Column<string>[] = [];
-
-  // create columns and fill the first row for faster values filling in the next loop
-  for (let i = 0; i < monomerList.length; i++) {
-    const col = resultDf.columns.addNewString((i + 1).toString());
-    col.set(0, monomerList[i] || '-', false);
-    columnList.push(col);
-  }
-
-  for (let rowIndex = 1; rowIndex < colLen; rowIndex++) {
-    monomerList = splitter(peptideColumn.get(rowIndex)!);
-    monomerList.forEach((monomer, colIndex) => columnList[colIndex].set(rowIndex, monomer || '-', false));
-  }
-
-  return resultDf;
-}
-
 export function scaleActivity(
   activityScaling: string, df: DG.DataFrame, originalActivityName?: string, cloneBitset = false,
 ): [DG.DataFrame, string] {
@@ -64,17 +41,17 @@ export function scaleActivity(
   currentActivityColName = flag ? currentActivityColName : C.COLUMNS_NAMES.ACTIVITY;
   const tempDf = df.clone(cloneBitset ? df.filter : null, [currentActivityColName]);
 
-  let formula = (v: number) => v;
+  let formula = (v: number): number => v;
   let newColName = 'activity';
   switch (activityScaling) {
   case 'none':
     break;
   case 'lg':
-    formula = (v: number) => Math.log10(v);
+    formula = (v: number): number => Math.log10(v);
     newColName = `Log10(${newColName})`;
     break;
   case '-lg':
-    formula = (v: number) => -Math.log10(v);
+    formula = (v: number): number => -Math.log10(v);
     newColName = `-Log10(${newColName})`;
     break;
   default:
@@ -95,13 +72,13 @@ export function calculateBarsData(columns: DG.Column<string>[], selection: DG.Bi
 
   for (let colIndex = 0; colIndex < columnsLen; colIndex++) {
     const col = columns[colIndex];
-    dfStats[col.name] = calculateBarData(col, selection);
+    dfStats[col.name] = calculateSingleBarData(col, selection);
   }
 
   return dfStats;
 }
 
-export function calculateBarData(col: DG.Column<string>, selection: DG.BitSet): type.MonomerColStats {
+export function calculateSingleBarData(col: DG.Column<string>, selection: DG.BitSet): type.MonomerColStats {
   const colLen = col.length;
   const colStats: type.MonomerColStats = {};
   col.categories.forEach((monomer) => colStats[monomer] = {count: 0, selected: 0});
@@ -114,3 +91,8 @@ export function calculateBarData(col: DG.Column<string>, selection: DG.BitSet):
 
   return colStats;
 }
+
+export function isGridCellInvalid(gc: DG.GridCell | null): boolean {
+  return !gc || !gc.cell.value || !gc.tableColumn || gc.tableRowIndex == null || gc.tableRowIndex == -1 ||
+    gc.cell.value == DG.INT_NULL || gc.cell.value == DG.FLOAT_NULL;
+}

package/src/viewers/sar-viewer.ts

@@ -15,7 +15,6 @@ export class SARViewerBase extends DG.JsViewer {
   model!: PeptidesModel;
   scaling: string;
   bidirectionalAnalysis: boolean;
-  showSubstitution: boolean;
   maxSubstitutions: number;
   minActivityDelta: number;
   _titleHost = ui.divText('SAR Viewer', {id: 'pep-viewer-title'});
@@ -27,23 +26,20 @@ export class SARViewerBase extends DG.JsViewer {
 
     this.scaling = this.string('scaling', 'none', {choices: ['none', 'lg', '-lg']});
     this.bidirectionalAnalysis = this.bool('bidirectionalAnalysis', false);
-    this.showSubstitution = this.bool('showSubstitution', true);
-    this.maxSubstitutions = this.int('maxSubstitutions', 2);
-    this.minActivityDelta = this.float('minActivityDelta', 1);
+    this.maxSubstitutions = this.int('maxSubstitutions', 1);
+    this.minActivityDelta = this.float('minActivityDelta', 0);
   }
 
   async onTableAttached(): Promise<void> {
     super.onTableAttached();
     this.sourceGrid = this.view?.grid ?? (grok.shell.v as DG.TableView).grid;
     this.model = await PeptidesModel.getInstance(this.dataFrame);
-    // this.model.init(this.dataFrame);
     this.helpUrl = '/help/domains/bio/peptides.md';
-    // await this.requestDataUpdate();
 
     this.initProperties();
   }
 
-  initProperties() {
+  initProperties(): void {
     const props = this.model.usedProperties;
     IS_PROPERTY_CHANGING = true;
     for (const [propName, propVal] of Object.entries(props))
@@ -65,11 +61,6 @@ export class SARViewerBase extends DG.JsViewer {
     this.viewerGrid?.invalidate();
   }
 
-  // async requestDataUpdate(): Promise<void> {
-  //   await this.model.updateData(this.scaling, this.sourceGrid, this.bidirectionalAnalysis,
-  //     this.minActivityDelta, this.maxSubstitutions, this.showSubstitution);
-  // }
-
   onPropertyChanged(property: DG.Property): void {
     super.onPropertyChanged(property);
     this.dataFrame.tags[property.name] = `${property.get(this)}`;
@@ -89,10 +80,6 @@ export class SARViewerBase extends DG.JsViewer {
       }
     }
 
-    if (!this.showSubstitution && ['maxSubstitutions', 'activityLimit'].includes(propName))
-      return;
-
-    // await this.requestDataUpdate();
     this.model.updateDefault();
     this.render(true);
   }
@@ -102,7 +89,7 @@ export class SARViewerBase extends DG.JsViewer {
  * Structure-activity relationship viewer.
  */
 export class SARViewer extends SARViewerBase {
-  _titleHost = ui.divText('Monomer-Positions', {id: 'pep-viewer-title'});
+  _titleHost = ui.divText('Mutation Cliffs', {id: 'pep-viewer-title'});
   _name = 'Structure-Activity Relationship';
 
   constructor() {super();}
@@ -112,7 +99,6 @@ export class SARViewer extends SARViewerBase {
   async onTableAttached(): Promise<void> {
     await super.onTableAttached();
     this.model.sarViewer ??= this;
-    // this.dataFrame.temp['sarViewer'] = this;
 
     this.subs.push(this.model.onSARGridChanged.subscribe((data) => {
       this.viewerGrid = data;

package/src/widgets/analyze-peptides.ts

@@ -7,7 +7,6 @@ import {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
 import '../styles.css';
 import * as C from '../utils/constants';
 import {PeptidesModel} from '../model';
-import {_package} from '../package';
 import $ from 'cash-dom';
 import {scaleActivity} from '../utils/misc';
 
@@ -17,9 +16,17 @@ import {scaleActivity} from '../utils/misc';
  * @param {DG.Column} col Aligned sequence column
  * @return {Promise<DG.Widget>} Widget containing peptide analysis */
 export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Column): Promise<DG.Widget> {
-  const funcs = DG.Func.find({package: 'Bio', name: 'webLogoViewer'});
+  if (!col.tags['aligned']?.includes('MSA') && col.tags[DG.TAGS.UNITS].toLowerCase() != 'helm')
+    return new DG.Widget(ui.divText('Peptides analysis only works with aligned sequences'));
+
+  let funcs = DG.Func.find({package: 'Bio', name: 'webLogoViewer'});
   if (funcs.length == 0)
     return new DG.Widget(ui.label('Bio package is missing or out of date. Please install the latest version.'));
+
+  funcs = DG.Func.find({package: 'Helm', name: 'getMonomerLib'});
+  if (funcs.length == 0)
+    return new DG.Widget(ui.label('Helm package is missing or out of date. Please install the latest version.'));
+
   let tempCol = null;
   let scaledDf: DG.DataFrame;
   let newScaledColName: string;
@@ -85,7 +92,7 @@ export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Col
 
 export async function startAnalysis(
   activityColumn: DG.Column<number> | null, alignedSeqCol: DG.Column<string>, currentDf: DG.DataFrame,
-  scaledDf: DG.DataFrame, newScaledColName: string, dgPackage?: DG.Package): Promise<PeptidesModel | null> {
+  scaledDf: DG.DataFrame, newScaledColName: string): Promise<PeptidesModel | null> {
   const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
   let model = null;
   if (activityColumn?.type === DG.TYPE.FLOAT) {
@@ -104,14 +111,15 @@ export async function startAnalysis(
     newDf.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newScaledColName;
     // newDf.tags[C.PEPTIDES_ANALYSIS] = 'true';
 
-    const alignedSeqColUnits = alignedSeqCol.getTag(DG.TAGS.UNITS);
     let monomerType = 'HELM_AA';
-    if (alignedSeqColUnits == 'HELM') {
+    if (alignedSeqCol.getTag(DG.TAGS.UNITS).toLowerCase() == 'helm') {
       const sampleSeq = alignedSeqCol.get(0)!;
       monomerType = sampleSeq.startsWith('PEPTIDE') ? 'HELM_AA' : 'HELM_BASE';
     } else {
-      monomerType = alignedSeqColUnits.split(':')[2] == 'PT' ? 'HELM_AA' : 'HELM_BASE';
+      const alphabet = alignedSeqCol.tags[C.TAGS.ALPHABET];
+      monomerType = alphabet == 'DNA' || alphabet == 'RNA' ? 'HELM_BASE' : 'HELM_AA';
     }
+
     newDf.setTag('monomerType', monomerType);
 
     model = await PeptidesModel.getInstance(newDf);

package/src/widgets/distribution.ts

@@ -5,7 +5,7 @@ import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations'
 import $ from 'cash-dom';
 
 import * as C from '../utils/constants';
-import {getStats, Stats} from '../utils/filtering-statistics';
+import {getStats, Stats} from '../utils/statistics';
 import {PeptidesModel} from '../model';
 
 const allConst = 'All';
@@ -21,7 +21,7 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
   let otherStr = '';
   const useSelectedStr = model.isPeptideSpaceChangingBitset;
 
-  const updateDistributionHost = () => {
+  const updateDistributionHost = (): void => {
     model.splitByPos = splitByPosition.value!;
     model.splitByAAR = splitByAAR.value!;
     const res: HTMLDivElement[] = [];
@@ -104,31 +104,32 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
     } else {
       const splitCol = table.col(C.COLUMNS_NAMES.SPLIT_COL);
       if (!splitCol)
-        return new DG.Widget(ui.divText('No distribution'));
-
-      otherStr = '';
-      if (useSelectedStr) {
-        aarStr = 'Selected';
-        otherStr = otherConst;
-      } else if (positionsLen) {
-        aarStr = '';
-        for (const position of positions)
-          aarStr += `${position}: {${selectionObject[position].join(', ')}}; `;
-        aarStr = aarStr.slice(0, aarStr.length - 2);
-        otherStr = otherConst;
-      }
+        res.push(ui.divText('No distribution'));
+      else {
+        otherStr = '';
+        if (useSelectedStr) {
+          aarStr = 'Selected';
+          otherStr = otherConst;
+        } else if (positionsLen) {
+          aarStr = '';
+          for (const position of positions)
+            aarStr += `${position}: {${selectionObject[position].join(', ')}}; `;
+          aarStr = aarStr.slice(0, aarStr.length - 2);
+          otherStr = otherConst;
+        }
 
-      const distributionTable = DG.DataFrame.fromColumns([activityScaledCol, splitCol]);
-      const stats = getStats(activityScaledCol.getRawData(), table.selection);
-      const distributionRoot = getDistributionAndStats(distributionTable, stats, aarStr, otherStr);
-      $(distributionRoot).addClass('d4-flex-col');
+        const distributionTable = DG.DataFrame.fromColumns([activityScaledCol, splitCol]);
+        const stats = getStats(activityScaledCol.getRawData(), table.selection);
+        const distributionRoot = getDistributionAndStats(distributionTable, stats, aarStr, otherStr);
+        $(distributionRoot).addClass('d4-flex-col');
 
-      res.push(distributionRoot);
+        res.push(distributionRoot);
+      }
     }
     $(distributionHost).empty().append(res);
   };
 
-  const setDefaultProperties = (input: DG.InputBase) => {
+  const setDefaultProperties = (input: DG.InputBase): void => {
     input.enabled = positionsLen != 0;
     $(input.root).find('.ui-input-editor').css('margin', '0px');
     $(input.root).find('.ui-input-description').css('padding', '0px');

package/src/widgets/manual-alignment.ts

@@ -2,10 +2,11 @@ import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
+import {splitAlignedSequences} from '@datagrok-libraries/bio/src/utils/splitter';
+
 import $ from 'cash-dom';
 import '../styles.css';
 import {PeptidesModel} from '../model';
-import {splitAlignedPeptides} from '../utils/misc';
 
 /** Manual sequence alignment widget.
  *
@@ -19,7 +20,7 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column<string>, cur
   const applyChangesBtn = ui.button('Apply', async () => {
     const newSequence = sequenceInput.value;
     const affectedRowIndex = currentDf.currentRowIdx;
-    const splitSequence = splitAlignedPeptides(DG.Column.fromStrings('splitSequence', [newSequence]));
+    const splitSequence = splitAlignedSequences(DG.Column.fromStrings('splitSequence', [newSequence]));
 
     alignedSequenceCol.set(affectedRowIndex, newSequence);
     for (const part of splitSequence.columns) {

package/src/widgets/{subst-table.ts → mutation-cliffs.ts}

@@ -5,13 +5,13 @@ import * as type from '../utils/types';
 import {PeptidesModel} from '../model';
 import {getSeparator} from '../utils/misc';
 
-export function substitutionsWidget(table: DG.DataFrame, model: PeptidesModel): DG.Widget {
+export function mutationCliffsWidget(table: DG.DataFrame, model: PeptidesModel): DG.Widget {
   const substInfo = model.substitutionsInfo;
   const currentCell = model.currentSelection;
   const positions = Object.keys(currentCell);
 
   if (!positions.length)
-    return new DG.Widget(ui.label('No substitution table generated'));
+    return new DG.Widget(ui.label('No mutations table generated'));
 
   const substitutionsArray: string[] = [];
   const deltaArray: number[] = [];
@@ -49,18 +49,19 @@ export function substitutionsWidget(table: DG.DataFrame, model: PeptidesModel):
   }
 
   if (!substitutionsArray.length)
-    return new DG.Widget(ui.label('No substitution table generated'));
+    return new DG.Widget(ui.label('No mutations table generated'));
 
-  const substCol = DG.Column.fromStrings('Substiutions', substitutionsArray);
+  const substCol = DG.Column.fromStrings('Mutation', substitutionsArray);
   substCol.semType = C.SEM_TYPES.MACROMOLECULE_DIFFERENCE;
   substCol.tags[C.TAGS.SEPARATOR] = getSeparator(alignedSeqCol);
   substCol.tags[DG.TAGS.UNITS] = alignedSeqCol.tags[DG.TAGS.UNITS];
+  substCol.tags[DG.TAGS.CELL_RENDERER] = 'MacromoleculeDifference';
   const toColName = '~to';
   const hiddenSubstToAarCol = DG.Column.fromStrings(toColName, substitutedToArray);
   const substTable =
     DG.DataFrame.fromColumns([substCol, DG.Column.fromList('double', 'Delta', deltaArray), hiddenSubstToAarCol]);
 
-  const aminoToInput = ui.stringInput('Substituted to:', '', () => {
+  const aminoToInput = ui.stringInput('Mutated to:', '', () => {
     const substitutedToAar = aminoToInput.stringValue;
     if (substitutedToAar != '')
       substTable.filter.init((idx) => hiddenSubstToAarCol.get(idx) === substitutedToAar);