@datagrok/peptides 0.8.9 → 0.8.13

package/src/monomer-library.ts

@@ -1,8 +1,11 @@
 /** HELM associated sdf libraries with monomer processing*/
 export class MonomerLibrary {
+  private static _name = 'monomerLibrary';
+
   private monomerFields: string[] = [
     'molecule', 'MonomerType', 'MonomerNaturalAnalogCode', 'MonomerName', 'MonomerCode', 'MonomerCaps', 'BranchMonomer',
   ];
+
   private library: {
     [name: string]: {
       mol: string,
@@ -11,6 +14,7 @@ export class MonomerLibrary {
       linkages: { [link: string]: { atomNumber: number, type: string } }
     }
   } = {};
+
   private monomers: string[] = [];
 
   constructor(sdf: string) {
@@ -72,6 +76,10 @@ export class MonomerLibrary {
     return this.monomers;
   }
 
+  static get id(): string {
+    return MonomerLibrary._name;
+  }
+
   private getLinkData(mol: string, caps: string, name: string) {
     const rawData = mol.match(/M  RGP  .+/);
     if (rawData === null)

package/src/package-test.ts

@@ -1,12 +1,13 @@
 import * as DG from 'datagrok-api/dg';
 
-import {runTests} from '@datagrok-libraries/utils/src/test';
+import {runTests, tests} from '@datagrok-libraries/utils/src/test';
 
 import './tests/peptide-space-test';
 import './tests/peptides-tests';
 import './tests/msa-tests';
 
-export const _package = new DG.Package();
+export const _packageTest = new DG.Package();
+export {tests};
 
 //name: test
 //input: string category {optional: true}

package/src/package.ts

@@ -3,6 +3,8 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
+import * as C from './utils/constants';
+
 import {
   AlignedSequenceCellRenderer,
   AlignedSequenceDifferenceCellRenderer,
@@ -16,9 +18,11 @@ import {PeptideSimilaritySpaceWidget} from './utils/peptide-similarity-space';
 import {manualAlignmentWidget} from './widgets/manual-alignment';
 import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
 import {peptideMoleculeWidget, getMolecule} from './widgets/peptide-molecule';
-import {SubstViewer} from './viewers/subst-viewer';
-import {substTableWidget} from './widgets/subst-table';
+import {runKalign, testMSAEnoughMemory} from './utils/multiple-sequence-alignment';
+import {substitutionsWidget} from './widgets/subst-table';
 import {msaWidget} from './widgets/multiple-sequence-alignment';
+import {getDistributionWidget} from './widgets/distribution';
+import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
 
 export const _package = new DG.Package();
 let currentGrid: DG.Grid;
@@ -31,7 +35,6 @@ async function main(chosenFile: string) {
   const path = _package.webRoot + 'files/' + chosenFile;
   const peptides = (await grok.data.loadTable(path));
   peptides.name = 'Peptides';
-  peptides.setTag('dataType', 'peptides');
   const view = grok.shell.addTableView(peptides);
   currentGrid = view.grid;
   view.name = 'PeptidesView';
@@ -77,6 +80,7 @@ export async function Peptides() {
     ui.divH([
       ui.button('Simple demo', () => main('aligned.csv'), ''),
       ui.button('Complex demo', () => main('aligned_2.csv'), ''),
+
     ]),
   ]);
 }
@@ -90,8 +94,8 @@ export async function peptidesPanel(col: DG.Column): Promise<DG.Widget> {
     return new DG.Widget(ui.divText('Analysis is not applicable'));
 
   [currentView, currentGrid, currentTable, alignedSequenceColumn] =
-    getOrDefineWIP(currentView, currentGrid, currentTable, col);
-  return await analyzePeptidesWidget(col, currentView, currentGrid, currentTable);
+    getOrDefine(undefined, undefined, col.dataFrame, col);
+  return analyzePeptidesWidget(currentTable, alignedSequenceColumn);
 }
 
 //name: peptide-sar-viewer
@@ -110,12 +114,12 @@ export function sarVertical(): SARViewerVertical {
   return new SARViewerVertical();
 }
 
-//name: substitution-analysis-viewer
-//description: Substitution Analysis Viewer
+//name: peptide-space-viewer
+//description: Peptide Space Viewer
 //tags: viewer
 //output: viewer result
-export function subst(): SubstViewer {
-  return new SubstViewer();
+export function peptideSpace(): PeptideSpaceViewer {
+  return new PeptideSpaceViewer();
 }
 
 //name: StackedBarchart Widget
@@ -133,7 +137,7 @@ export async function stackedBarchartWidget(col: DG.Column): Promise<DG.Widget>
 //input: string peptide {semType: alignedSequence}
 //output: widget result
 export async function peptideMolecule(peptide: string): Promise<DG.Widget> {
-  return await peptideMoleculeWidget(peptide);
+  return peptideMoleculeWidget(peptide);
 }
 
 //name: Peptide Molecule
@@ -142,9 +146,9 @@ export async function peptideMolecule(peptide: string): Promise<DG.Widget> {
 //output: widget result
 export async function peptideMolecule2(aar: string): Promise<DG.Widget> {
   [currentView, currentGrid, currentTable, alignedSequenceColumn] =
-    getOrDefineWIP(currentView, currentGrid, currentTable, alignedSequenceColumn);
+    getOrDefine();
   const peptide = alignedSequenceColumn.get(currentTable.currentRowIdx);
-  return await peptideMolecule(peptide);
+  return peptideMolecule(peptide);
 }
 
 //name: StackedBarChartAA
@@ -183,7 +187,7 @@ export function logov() {
 //output: widget result
 export function manualAlignment(monomer: string) {
   [currentView, currentGrid, currentTable, alignedSequenceColumn] =
-    getOrDefineWIP(currentView, currentGrid, currentTable, alignedSequenceColumn);
+    getOrDefine();
   //TODO: recalculate Molfile and Molecule panels on sequence update
   return manualAlignmentWidget(alignedSequenceColumn, currentTable);
 }
@@ -194,9 +198,9 @@ export function manualAlignment(monomer: string) {
 //output: widget result
 export async function peptideSpacePanel(col: DG.Column): Promise<DG.Widget> {
   [currentView, currentGrid, currentTable, alignedSequenceColumn] =
-    getOrDefineWIP(currentView, currentGrid, currentTable, col);
+    getOrDefine(undefined, undefined, col.dataFrame, col);
   const widget = new PeptideSimilaritySpaceWidget(col, currentView);
-  return await widget.draw();
+  return widget.draw();
 }
 
 //name: Molfile
@@ -205,7 +209,7 @@ export async function peptideSpacePanel(col: DG.Column): Promise<DG.Widget> {
 //output: widget result
 export async function peptideMolfile(peptide: string): Promise<DG.Widget> {
   const smiles = getMolecule(peptide);
-  return await grok.functions.call('Chem:molfile', {'smiles': smiles});
+  return grok.functions.call('Chem:molfile', {'smiles': smiles});
 }
 
 //name: Molfile
@@ -214,9 +218,9 @@ export async function peptideMolfile(peptide: string): Promise<DG.Widget> {
 //output: widget result
 export async function peptideMolfile2(aar: string): Promise<DG.Widget> {
   [currentView, currentGrid, currentTable, alignedSequenceColumn] =
-    getOrDefineWIP(currentView, currentGrid, currentTable, alignedSequenceColumn);
+    getOrDefine();
   const peptide = alignedSequenceColumn.get(currentTable.currentRowIdx);
-  return await peptideMolfile(peptide);
+  return peptideMolfile(peptide);
 }
 
 //name: Multiple sequence alignment
@@ -224,7 +228,26 @@ export async function peptideMolfile2(aar: string): Promise<DG.Widget> {
 //input: column col {semType: alignedSequence}
 //output: dataframe result
 export async function multipleSequenceAlignment(col: DG.Column): Promise<DG.DataFrame> {
-  return await msaWidget(col);
+  return msaWidget(col);
+}
+
+//name: Multiple sequence alignment for any column
+//input: dataframe table
+//input: column col
+//output: dataframe result
+export async function multipleSequenceAlignmentAny(table: DG.DataFrame, col: DG.Column): Promise<DG.DataFrame> {
+  const msaCol = await runKalign(col, false);
+  table.columns.add(msaCol);
+  return table;
+}
+
+//name: Test multiple sequence alignment for any column
+//input: dataframe table
+//input: column col
+//output: column result
+export async function runTestMSAEnoughMemory(table: DG.DataFrame, col: DG.Column) {
+  await testMSAEnoughMemory(col);
+  return col;
 }
 
 //name: Substitution
@@ -232,7 +255,19 @@ export async function multipleSequenceAlignment(col: DG.Column): Promise<DG.Data
 //input: dataframe table {semType: Substitution}
 //output: widget result
 export async function peptideSubstitution(table: DG.DataFrame): Promise<DG.Widget> {
-  return substTableWidget(table);
+  if (!table.temp[C.PEPTIDES_ANALYSIS])
+    return new DG.Widget(ui.divText('This widget is only applicable for peptides analysis'));
+  return substitutionsWidget(table);
+}
+
+//name: Distribution
+//tags: panel, widgets
+//input: dataframe table {semType: viewerTable}
+//output: widget result
+export function peptideDistribution(table: DG.DataFrame): DG.Widget {
+  if (!table.temp[C.PEPTIDES_ANALYSIS])
+    return new DG.Widget(ui.divText('This widget is only applicable for peptides analysis'));
+  return getDistributionWidget(table);
 }
 
 //name: alignedSequenceDifferenceCellRenderer
@@ -243,13 +278,13 @@ export function alignedSequenceDifferenceCellRenderer() {
   return new AlignedSequenceDifferenceCellRenderer();
 }
 
-function getOrDefineWIP(
+function getOrDefine(
   view?: DG.TableView, grid?: DG.Grid, dataframe?: DG.DataFrame, column?: DG.Column | null,
 ): [DG.TableView, DG.Grid, DG.DataFrame, DG.Column] {
   view ??= (grok.shell.v as DG.TableView);
   grid ??= view.grid;
   dataframe ??= grok.shell.t;
-  column ??= (dataframe.columns as DG.ColumnList).bySemType('alignedSequence');
+  column ??= (dataframe.columns as DG.ColumnList).bySemType(C.SEM_TYPES.ALIGNED_SEQUENCE);
   if (column === null)
     throw new Error('Table does not contain aligned sequence columns');
 

package/src/peptides.ts

@@ -1,80 +1,90 @@
-import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
-import {createPeptideSimilaritySpaceViewer} from './utils/peptide-similarity-space';
 import {PeptidesModel} from './model';
-import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
 import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
-import {SubstViewer} from './viewers/subst-viewer';
 import {ChemPalette} from './utils/chem-palette';
 import {Observable} from 'rxjs';
-
-type viewerTypes = SARViewer | SARViewerVertical | SubstViewer;
+import {MonomerLibrary} from './monomer-library';
+import {_package} from './package';
+import {setAARRenderer} from './utils/cell-renderer';
+import * as C from './utils/constants';
+import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
+import { FilteringStatistics } from './utils/filtering-statistics';
+
+type viewerTypes = SARViewer | SARViewerVertical;
 export class PeptidesController {
   private static _controllerName: string = 'peptidesController';
   private helpUrl = '/help/domains/bio/peptides.md';
-  private _dataFrame: DG.DataFrame;
+
   private _model: PeptidesModel;
+  sarViewer!: SARViewer;
+  sarViewerVertical!: SARViewerVertical;
+  isInitialized = false;
 
   private constructor(dataFrame: DG.DataFrame) {
-    this._dataFrame = dataFrame;
-    this._model = PeptidesModel.getOrInit(this._dataFrame);
-    // this.getOrInitModel(this._dataFrame);
+    this._model = PeptidesModel.getInstance(dataFrame);
   }
 
-  static getInstance(dataFrame: DG.DataFrame): PeptidesController {
+  static async getInstance(dataFrame: DG.DataFrame): Promise<PeptidesController> {
     dataFrame.temp[PeptidesController.controllerName] ??= new PeptidesController(dataFrame);
+    if (dataFrame.temp[MonomerLibrary.id] === null) {
+      const sdf = await _package.files.readAsText('HELMMonomers_June10.sdf');
+      dataFrame.temp[MonomerLibrary.id] ??= new MonomerLibrary(sdf);
+    }
     return dataFrame.temp[PeptidesController.controllerName];
   }
 
-  static get controllerName() {
-    return PeptidesController._controllerName;
-  }
+  static get controllerName() {return PeptidesController._controllerName;}
 
-  // getOrInitModel(): PeptidesModel {
-  //   this._model ??= PeptidesModel.getOrInit(this._dataFrame);
-  //   return this._model;
-  // }
+  get dataFrame() {return this._model.dataFrame;}
 
-  get onStatsDataFrameChanged(): Observable<DG.DataFrame> {
-    return this._model.onStatsDataFrameChanged;
+  static setAARRenderer(col: DG.Column, grid: DG.Grid) {
+    return setAARRenderer(col, grid);
   }
 
-  get onSARGridChanged(): Observable<DG.Grid> {
-    return this._model.onSARGridChanged;
-  }
+  get onStatsDataFrameChanged(): Observable<DG.DataFrame> {return this._model.onStatsDataFrameChanged;}
 
-  get onSARVGridChanged(): Observable<DG.Grid> {
-    return this._model.onSARVGridChanged;
-  }
+  get onSARGridChanged(): Observable<DG.Grid> {return this._model.onSARGridChanged;}
 
-  get onGroupMappingChanged(): Observable<StringDictionary> {
-    return this._model.onGroupMappingChanged;
-  }
+  get onSARVGridChanged(): Observable<DG.Grid> {return this._model.onSARVGridChanged;}
 
-  get onSubstFlagChanged(): Observable<boolean> {
-    return this._model.onSubstFlagChanged;
-  }
+  // get onGroupMappingChanged(): Observable<StringDictionary> {return this._model.onGroupMappingChanged;}
 
-  async updateDefault() {
-    await this._model.updateDefault();
-  }
+  get onSubstTableChanged(): Observable<DG.DataFrame> {return this._model.onSubstTableChanged;}
+
+  async updateDefault() {await this._model.updateDefault();}
+
+  get sarGrid() {return this._model._sarGrid;}
+
+  get sarVGrid() {return this._model._sarVGrid;}
+
+  get sourceGrid() {return this._model._sourceGrid!; }
 
   async updateData(
-    dataFrame: DG.DataFrame | null, activityCol: string | null, activityScaling: string | null,
-    sourceGrid: DG.Grid | null, twoColorMode: boolean | null, initialBitset: DG.BitSet | null,
-    grouping: boolean | null) {
+    activityScaling?: string, sourceGrid?: DG.Grid, twoColorMode?: boolean, activityLimit?: number,
+    maxSubstitutions?: number, isSubstitutionOn?: boolean, filterMode?: boolean,
+  ) {
+    filterMode ??= false;
     await this._model.updateData(
-      dataFrame, activityCol, activityScaling, sourceGrid, twoColorMode, initialBitset, grouping);
+      activityScaling, sourceGrid, twoColorMode, activityLimit, maxSubstitutions, isSubstitutionOn, filterMode);
+  }
+
+  getSubstitutions() {
+    return this._model.getSubstitutionTable();
   }
 
   static async scaleActivity(
-    activityScaling: string, activityColumn: string, activityColumnScaled: string, df: DG.DataFrame,
+    activityScaling: string, df: DG.DataFrame, originalActivityName?: string, cloneBitset = false,
   ): Promise<[DG.DataFrame, string]> {
     // const df = sourceGrid.dataFrame!;
-    const tempDf = df.clone(null, [activityColumn]);
-
-    let formula = '${' + activityColumn + '}';
-    let newColName = activityColumn;
+    let currentActivityColName = originalActivityName ?? C.COLUMNS_NAMES.ACTIVITY;
+    const flag = (df.columns as DG.ColumnList).names().includes(currentActivityColName) &&
+      currentActivityColName === originalActivityName;
+    currentActivityColName = flag ? currentActivityColName : C.COLUMNS_NAMES.ACTIVITY;
+    const tempDf = df.clone(cloneBitset ? df.filter : null, [currentActivityColName]);
+
+    let formula = '${' + currentActivityColName + '}';
+    let newColName = 'activity'; //originalActivityName ?? df.temp[C.COLUMNS_NAMES.ACTIVITY] ?? currentActivityColName;
     switch (activityScaling) {
     case 'none':
       break;
@@ -90,11 +100,16 @@ export class PeptidesController {
       throw new Error(`ScalingError: method \`${activityScaling}\` is not available.`);
     }
 
-    await (tempDf.columns as DG.ColumnList).addNewCalculated(activityColumnScaled, formula);
+    await (tempDf.columns as DG.ColumnList).addNewCalculated(C.COLUMNS_NAMES.ACTIVITY_SCALED, formula);
+    df.tags['scaling'] = activityScaling;
 
     return [tempDf, newColName];
   }
 
+  get originalActivityColumnName(): string {return this.dataFrame.temp[C.COLUMNS_NAMES.ACTIVITY];}
+
+  get substTooltipData() {return this._model.substTooltipData;}
+
   static splitAlignedPeptides(peptideColumn: DG.Column, filter: boolean = true): [DG.DataFrame, number[]] {
     const splitPeptidesArray: string[][] = [];
     let currentSplitPeptide: string[];
@@ -136,8 +151,8 @@ export class PeptidesController {
 
     //create column names list
     const columnNames = Array.from({length: modeMonomerCount}, (_, index) => `${index + 1 < 10 ? 0 : ''}${index + 1 }`);
-    columnNames.splice(0, 0, 'N-terminal');
-    columnNames.push('C-terminal');
+    columnNames.splice(0, 0, 'Nterminal');
+    columnNames.push('Cterminal');
 
     // filter out the columns with the same values
     if (filter) {
@@ -158,23 +173,91 @@ export class PeptidesController {
     ];
   }
 
-  static getChemPalette() {
-    return ChemPalette;
+  static get chemPalette() { return ChemPalette; }
+
+  assertVar(variable: string, init = false): boolean {
+    //@ts-ignore
+    let foundVariable: any = this[variable];
+    if (!foundVariable && init) {
+      //@ts-ignore
+      this[variable] = foundVariable = this.dataFrame.temp[variable];
+    }
+
+    const assertionResult = foundVariable ? true : false
+    if (init && !assertionResult)
+      throw new Error(`Variable assertion error: variable '${variable}' is not found in dataFrame`);
+      
+    return assertionResult;
+  }
+
+  assertVariables(variables: string[], init = false) {
+    let result = true;
+    for (const variable of variables)
+      result &&= this.assertVar(variable, init);
+
+    return result;
+  }
+
+  syncProperties(isSourceSAR = true) {
+    this.assertVariables(['sarViewer', 'sarViewerVertical'], true);
+    const sourceViewer = isSourceSAR ? this.sarViewer : this.sarViewerVertical;
+    const targetViewer = isSourceSAR ? this.sarViewerVertical : this.sarViewer;
+    const properties = sourceViewer.props.getProperties();
+    for (const property of properties)
+      targetViewer.props.set(property.name, property.get(sourceViewer));
+  }
+
+  modifyOrCreateSplitCol(aar: string, position: string, notify: boolean = true) {
+    this._model.modifyOrCreateSplitCol(aar, position);
+    if (notify)
+      this._model.fireBitsetChanged();
+  }
+
+  setSARGridCellAt(aar: string, position: string) {
+    const sarDf = this.sarGrid.dataFrame;
+    const aarCol = sarDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    const aarColLen = aarCol.length;
+    let index = -1;
+    for (let i = 0; i < aarColLen; i++) {
+      if (aarCol.get(i) === aar) {
+        index = i;
+        break;
+      }
+    }
+    position = position === C.CATEGORIES.ALL ? C.COLUMNS_NAMES.AMINO_ACID_RESIDUE : position;
+    sarDf.currentCell = sarDf.cell(index, position);
   }
 
   /**
    * Class initializer
    *
-   * @param {DG.Grid} tableGrid Working talbe grid.
-   * @param {DG.TableView} view Working view.
+   * @param {DG.Grid} sourceGrid Working talbe grid.
+   * @param {DG.TableView} currentView Working view.
    * @param {DG.DataFrame} currentDf Working table.
    * @param {StringDictionary} options SAR viewer options
    * @param {DG.Column} col Aligned sequences column.
    * @memberof Peptides
    */
-  async init(
-    tableGrid: DG.Grid, view: DG.TableView, options: StringDictionary, col: DG.Column,
-    originalDfColumns: string[]) {
+  async init(table: DG.DataFrame) {
+    if (this.isInitialized)
+      return;
+    this.isInitialized = true;
+    //calculate initial stats
+    const stats = new FilteringStatistics();
+    const activityScaledCol = table.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    stats.setData(activityScaledCol.getRawData() as Float32Array);
+    stats.setMask(table.selection);
+    table.temp[C.STATS] = stats;
+
+    //set up views
+    let currentView = grok.shell.v as DG.TableView ;
+    if (currentView.dataFrame.tags['isPeptidesAnalysis'] !== 'true')
+      currentView = grok.shell.addTableView(table);
+    const sourceGrid = currentView.grid;
+    sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED)!.name = table.temp[C.COLUMNS_NAMES.ACTIVITY_SCALED];
+    sourceGrid.columns.setOrder([table.temp[C.COLUMNS_NAMES.ACTIVITY_SCALED]]);
+    
+    this.dataFrame.temp[C.EMBEDDING_STATUS] = false;
     function adjustCellSize(grid: DG.Grid) {
       const colNum = grid.columns.length;
       for (let i = 0; i < colNum; ++i) {
@@ -184,82 +267,45 @@ export class PeptidesController {
       grid.props.rowHeight = 20;
     }
 
-    for (let i = 0; i < tableGrid.columns.length; i++) {
-      const aarCol = tableGrid.columns.byIndex(i);
-      if (aarCol &&
-          aarCol.name &&
-          aarCol.column?.semType != 'aminoAcids'
-      ) {
-        //@ts-ignore
-        tableGrid.columns.byIndex(i)?.visible = false;
-      }
+    for (let i = 0; i < sourceGrid.columns.length; i++) {
+      const aarCol = sourceGrid.columns.byIndex(i);
+      if (aarCol && aarCol.name && aarCol.column?.semType !== C.SEM_TYPES.AMINO_ACIDS &&
+        aarCol.name !== this.dataFrame.temp[C.COLUMNS_NAMES.ACTIVITY_SCALED]
+      )
+        sourceGrid.columns.byIndex(i)!.visible = false;
     }
 
-    const originalDfName = this._dataFrame.name;
-    const dockManager = view.dockManager;
-
-    const sarViewer = await this._dataFrame.plot.fromType('peptide-sar-viewer', options) as SARViewer;
-    sarViewer.helpUrl = this.helpUrl;
-
-    const sarViewerVertical = await this._dataFrame.plot.fromType('peptide-sar-viewer-vertical') as SARViewerVertical;
-    sarViewerVertical.helpUrl = this.helpUrl;
-
-    const sarViewersGroup: viewerTypes[] = [sarViewer, sarViewerVertical];
-
-    const peptideSpaceViewer = await createPeptideSimilaritySpaceViewer(
-      this._dataFrame, col, 't-SNE', 'Levenshtein', 100, view, `${options['activityColumnName']}Scaled`);
-    dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.RIGHT, null, 'Peptide Space viewer');
+    const options = {scaling: table.tags['scaling']};
+    await this.updateData(table.tags['scaling'], sourceGrid, false, 1, 2, false, false);
 
-    let nodeList = dockViewers(sarViewersGroup, DG.DOCK_TYPE.RIGHT, dockManager, DG.DOCK_TYPE.DOWN);
+    const dockManager = currentView.dockManager;
 
-    const substViewer = await this._dataFrame.plot.fromType(
-      'substitution-analysis-viewer', {'activityColumnName': `${options['activityColumnName']}Scaled`}) as SubstViewer;
-    const substViewersGroup = [substViewer];
+    this.dataFrame.temp['sarViewer'] = this.sarViewer =
+      await this.dataFrame.plot.fromType('peptide-sar-viewer', options) as SARViewer;
+    this.sarViewer.helpUrl = this.helpUrl;
 
-    tableGrid.props.allowEdit = false;
-    adjustCellSize(tableGrid);
+    this.dataFrame.temp['sarViewerVertical'] = this.sarViewerVertical =
+      await this.dataFrame.plot.fromType('peptide-sar-viewer-vertical', options) as SARViewerVertical;
+      this.sarViewerVertical.helpUrl = this.helpUrl;
 
-    const hideIcon = ui.iconFA('window-close', () => {
-      const viewers = [];
-      for (const viewer of view.viewers) {
-        if (viewer.type !== DG.VIEWER.GRID)
-          viewers.push(viewer);
-      }
-      viewers.forEach((v) => v.close());
-
-      const cols = (this._dataFrame.columns as DG.ColumnList);
-      for (const colName of cols.names()) {
-        if (!originalDfColumns.includes(colName))
-          cols.remove(colName);
-      }
+    const sarViewersGroup: viewerTypes[] = [this.sarViewer, this.sarViewerVertical];
 
-      this._dataFrame.selection.setAll(false);
-      this._dataFrame.filter.setAll(true);
+    const peptideSpaceViewerOptions = {method: 't-SNE', measure: 'Levenshtein', cyclesCount: 100};
+    const peptideSpaceViewer =
+      await this.dataFrame.plot.fromType('peptide-space-viewer', peptideSpaceViewerOptions) as PeptideSpaceViewer;
+    dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.RIGHT, null, 'Peptide Space Viewer');
 
-      tableGrid.setOptions({'colHeaderHeight': 20});
-      tableGrid.columns.setVisible(originalDfColumns);
-      tableGrid.props.allowEdit = true;
-      this._dataFrame.name = originalDfName;
+    dockViewers(sarViewersGroup, DG.DOCK_TYPE.RIGHT, dockManager, DG.DOCK_TYPE.DOWN);
 
-      view.setRibbonPanels(ribbonPanels);
-    }, 'Close viewers and restore dataframe');
+    sourceGrid.props.allowEdit = false;
+    adjustCellSize(sourceGrid);
 
-    let isSA = false;
-    const switchViewers = ui.iconFA('toggle-on', () => {
-      $(switchViewers).toggleClass('fa-toggle-off').toggleClass('fa-toggle-on');
-      nodeList?.forEach((node) => {
-        view.dockManager.close(node);
-        node.container.destroy();
-      });
-      const getCurrentViewerGroup = () => isSA ? substViewersGroup : sarViewersGroup;
-      getCurrentViewerGroup().forEach((v) => v.removeFromView());
-      isSA = !isSA;
-      nodeList = dockViewers(getCurrentViewerGroup(), DG.DOCK_TYPE.LEFT, dockManager, DG.DOCK_TYPE.DOWN);
-    }, 'Toggle viewer group');
-
-    const ribbonPanels = view.getRibbonPanels();
-    view.setRibbonPanels([[hideIcon, switchViewers]]);
+    // this._model._sarGrid.invalidate();
+    // this._model._sarVGrid.invalidate();
+    this._model.invalidateGrids();
   }
+
+  invalidateSourceGrid() { this.sourceGrid.invalidate(); }
 }
 
 function dockViewers(

package/src/styles.css

@@ -44,3 +44,11 @@
   height: unset;
   width: 100%;
 }
+
+#pep-viewer-title {
+  height: 23px;
+  font-size: 1.2rem;
+  font-family: 'Roboto', 'Roboto Local', sans-serif;
+  color: #4D5261;
+  text-align: center;
+}