@datagrok/peptides 0.0.1 → 0.2.0

package/src/utils/peptide-similarity-space.ts

@@ -0,0 +1,242 @@
+/* Do not change these import lines. Datagrok will import API library in exactly the same manner */
+// eslint-disable-next-line no-unused-vars
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {getSequenceMolecularWeight} from './molecular-measure';
+import {AlignedSequenceEncoder} from '@datagrok-libraries/utils/src/sequence-encoder';
+import {DimensionalityReducer} from '@datagrok-libraries/utils/src/reduce-dimensionality';
+import {Measurer} from '@datagrok-libraries/utils/src/string-measure';
+import {Coordinates} from '@datagrok-libraries/utils/src/type_declarations';
+
+/**
+ * Creates a worker to perform a dimensionality reduction.
+ *
+ * @param {any[]} columnData Samples to process.
+ * @param {string} method Embedding method.
+ * @param {string} measure Distance metric.
+ * @param {number} cyclesCount Number of cycles to repeat.
+ * @return {Promise<unknown>} Promise.
+ */
+function createDimensinalityReducingWorker(
+  columnData: any[],
+  method: string,
+  measure: string,
+  cyclesCount: number,
+): Promise<unknown> {
+  return new Promise(function(resolve) {
+    const worker = new Worker(new URL('../workers/dimensionality-reducer.ts', import.meta.url));
+    worker.postMessage({
+      columnData: columnData,
+      method: method,
+      measure: measure,
+      cyclesCount: cyclesCount,
+    });
+    worker.onmessage = ({data: {embedding}}) => {
+      resolve(embedding);
+    };
+  });
+}
+
+/**
+ * Finds a column with an activity.
+ *
+ * @param {DG.DataFrame} table The data frame to search for.
+ * @return {(string | null)} Column name or null if not found.
+ */
+function inferActivityColumnsName(table: DG.DataFrame): string | null {
+  const re = /activity|ic50/i;
+  for (const name of table.columns.names()) {
+    if (name.match(re)) {
+      console.log(`${name} found.`);
+      return name;
+    }
+  }
+  return null;
+}
+
+/**
+ * Creates scatter plot with sequences embeded.
+ *
+ * @export
+ * @param {DG.DataFrame} table The table containing samples.
+ * @param {DG.Column} alignedSequencesColumn Samples column.
+ * @param {string} method Embedding method to apply.
+ * @param {string} measure Distance metric.
+ * @param {number} cyclesCount Number of cycles to repeat.
+ * @param {(string | null)} [activityColumnName] Activity containing column to assign it to points radius.
+ * @param {boolean} [zoom=false] Whether to fit view.
+ * @return {Promise<DG.ScatterPlotViewer>} A viewer.
+ */
+export async function createPeptideSimilaritySpaceViewer(
+  table: DG.DataFrame,
+  alignedSequencesColumn: DG.Column,
+  method: string,
+  measure: string,
+  cyclesCount: number,
+  activityColumnName?: string | null,
+  zoom: boolean = false,
+): Promise<DG.ScatterPlotViewer> {
+  const pi = DG.TaskBarProgressIndicator.create('Creating embedding.');
+
+  activityColumnName = activityColumnName ?? inferActivityColumnsName(table);
+
+  const axesNames = ['~X', '~Y', '~MW'];
+  const columnData = alignedSequencesColumn.toList().map((v, _) => AlignedSequenceEncoder.clean(v));
+
+  const embcols = await createDimensinalityReducingWorker(columnData, method, measure, cyclesCount);
+
+  const columns = Array.from(
+    embcols as Coordinates,
+    (v: Float32Array, k) => (DG.Column.fromFloat32Array(axesNames[k], v)),
+  );
+
+  function _getMW(sequences = columnData) {
+    const mw: Float32Array = new Float32Array(sequences.length).fill(0);
+    let currentSequence;
+
+    for (let i = 0; i < sequences.length; ++i) {
+      currentSequence = sequences[i];
+      mw[i] = currentSequence == null ? 0 : getSequenceMolecularWeight(currentSequence);
+    }
+    return mw;
+  }
+
+  columns.push(DG.Column.fromFloat32Array('~MW', _getMW()));
+
+  const edf = DG.DataFrame.fromColumns(columns);
+
+  // Add new axes.
+  for (const axis of axesNames) {
+    const col = table.col(axis);
+
+    if (col == null) {
+      table.columns.insert(edf.getCol(axis));
+    } else {
+      table.columns.replace(col, edf.getCol(axis));
+    }
+  }
+  const viewer = DG.Viewer.scatterPlot(table, {x: '~X', y: '~Y', color: activityColumnName ?? '~MW', size: '~MW'});
+
+  // Fit view if needed.
+  /*if (zoom) {
+    viewer.zoom(
+      table.getCol('~X').min,
+      table.getCol('~Y').min,
+      table.getCol('~X').max,
+      table.getCol('~Y').max,
+    );
+  }*/
+  pi.close();
+  return viewer;
+}
+
+/**
+ * Controls creation of the peptide similarity space viewer.
+ *
+ * @export
+ * @class PeptideSimilaritySpaceWidget
+ */
+export class PeptideSimilaritySpaceWidget {
+  protected method: string;
+  protected metrics: string;
+  protected cycles: number = 100;
+  protected currentDf: DG.DataFrame;
+  protected alignedSequencesColumn: DG.Column;
+  protected availableMethods: string[];
+  protected availableMetrics: string[];
+  protected viewer: HTMLElement;
+
+  /**
+   * Creates an instance of PeptideSimilaritySpaceWidget.
+   * @param {DG.Column} alignedSequencesColumn The column to get amino acid sequences from.
+   * @memberof PeptideSimilaritySpaceWidget
+   */
+  constructor(alignedSequencesColumn: DG.Column) {
+    this.availableMethods = DimensionalityReducer.availableMethods;
+    this.availableMetrics = Measurer.availableMeasures;
+    this.method = this.availableMethods[0];
+    this.metrics = this.availableMetrics[0];
+    this.currentDf = alignedSequencesColumn.dataFrame;
+    this.alignedSequencesColumn = alignedSequencesColumn;
+    this.viewer = ui.div([]);
+  }
+
+  /**
+   * Creates viewer itself.
+   *
+   * @return {Promise<DG.Viewer>} the viewer.
+   * @memberof PeptideSimilaritySpaceWidget
+   */
+  public async drawViewer(): Promise<DG.Viewer> {
+    const viewer = await createPeptideSimilaritySpaceViewer(
+      this.currentDf,
+      this.alignedSequencesColumn,
+      this.method,
+      this.metrics,
+      this.cycles,
+      null,
+      true,
+    );
+    viewer.root.style.width = 'auto';
+    return viewer;
+  }
+
+  /**
+   * Updates the viewer on options changes.
+   *
+   * @protected
+   * @memberof PeptideSimilaritySpaceWidget
+   */
+  protected async updateViewer() {
+    this.viewer.lastChild?.remove();
+    const viewer = await this.drawViewer();
+    this.viewer.appendChild(viewer.root);
+  }
+
+  /**
+   * Adds input controls to manage the viewer's parameters.
+   *
+   * @protected
+   * @return {Promise<HTMLElement>} Bunch of control elements.
+   * @memberof PeptideSimilaritySpaceWidget
+   */
+  protected async drawInputs(): Promise<HTMLElement> {
+    const methodsList = ui.choiceInput('Embedding method', this.method, this.availableMethods,
+      async (currentMethod: string) => {
+        this.method = currentMethod;
+        await this.updateViewer();
+      },
+    );
+    methodsList.setTooltip('Embedding method to apply to the dataset.');
+
+    const metricsList = ui.choiceInput('Distance metric', this.metrics, this.availableMetrics,
+      async (currentMetrics: string) => {
+        this.metrics = currentMetrics;
+        await this.updateViewer();
+      },
+    );
+    metricsList.setTooltip('Custom distance metric to pass to the embedding procedure.');
+
+    const cyclesSlider = ui.intInput('Cycles count', this.cycles,
+      async (currentCycles: number) => {
+        this.cycles = currentCycles;
+        await this.updateViewer();
+      },
+    );
+    cyclesSlider.setTooltip('Number of cycles affects the embedding quality.');
+
+    return ui.inputs([methodsList, metricsList, cyclesSlider]);
+  }
+
+  /**
+   * Draws a viewer on property panel.
+   *
+   * @return {Promise<DG.Widget>} The corresponding widget.
+   * @memberof PeptideSimilaritySpaceWidget
+   */
+  public async draw(): Promise<DG.Widget> {
+    return new DG.Widget(ui.divV([(await this.drawViewer()).root, await this.drawInputs()]));
+  }
+}

package/src/utils/split-aligned.ts

@@ -0,0 +1,65 @@
+import * as DG from 'datagrok-api/dg';
+
+export function splitAlignedPeptides(peptideColumn: DG.Column, filter: boolean = true): [DG.DataFrame, number[]] {
+  const splitPeptidesArray: string[][] = [];
+  let currentSplitPeptide: string[];
+  let modeMonomerCount = 0;
+  let currentLength;
+  const colLength = peptideColumn.length;
+
+  // splitting data
+  const monomerLengths: {[index: string]: number} = {};
+  for (let i = 0; i < colLength; i++) {
+    currentSplitPeptide = peptideColumn.get(i).split('-').map((value: string) => value ? value : '-');
+    splitPeptidesArray.push(currentSplitPeptide);
+    currentLength = currentSplitPeptide.length;
+    monomerLengths[currentLength + ''] =
+      monomerLengths[currentLength + ''] ? monomerLengths[currentLength + ''] + 1 : 1;
+  }
+  //@ts-ignore: what I do here is converting string to number the most effective way I could find. parseInt is slow
+  modeMonomerCount = 1 * Object.keys(monomerLengths).reduce((a, b) => monomerLengths[a] > monomerLengths[b] ? a : b);
+
+  // making sure all of the sequences are of the same size
+  // and marking invalid sequences
+  let nTerminal: string;
+  const invalidIndexes: number[] = [];
+  let splitColumns: string[][] = Array.from({length: modeMonomerCount}, (_) => []);
+  modeMonomerCount--; // minus N-terminal
+  for (let i = 0; i < colLength; i++) {
+    currentSplitPeptide = splitPeptidesArray[i];
+    nTerminal = currentSplitPeptide.pop()!; // it is guaranteed that there will be at least one element
+    currentLength = currentSplitPeptide.length;
+    if (currentLength !== modeMonomerCount) {
+      invalidIndexes.push(i);
+    }
+    for (let j = 0; j < modeMonomerCount; j++) {
+      splitColumns[j].push(j < currentLength ? currentSplitPeptide[j] : '-');
+    }
+    splitColumns[modeMonomerCount].push(nTerminal);
+  }
+  modeMonomerCount--; // minus C-terminal
+
+  //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');
+
+  // filter out the columns with the same values
+  
+  if (filter) {
+    splitColumns = splitColumns.filter((positionArray, index) => {
+      const isRetained = new Set(positionArray).size > 1;
+      if (!isRetained) {
+        columnNames.splice(index, 1);
+      }
+      return isRetained;
+    });
+  }
+
+  return [
+    DG.DataFrame.fromColumns(splitColumns.map((positionArray, index) => {
+      return DG.Column.fromList('string', columnNames[index], positionArray);
+    })),
+    invalidIndexes,
+  ];
+}

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

@@ -4,7 +4,7 @@ import * as DG from 'datagrok-api/dg';
 import $ from 'cash-dom';
 
 import * as logojs from 'logojs-react';
-import {splitAlignedPeptides} from '../split-aligned';
+import {splitAlignedPeptides} from '../utils/split-aligned';
 import {ChemPalette} from '../utils/chem-palette';
 
 export class Logo extends DG.JsViewer {
@@ -31,6 +31,7 @@ export class Logo extends DG.JsViewer {
       'A': 0, 'B': 1, 'C': 2, 'D': 3, 'E': 4, 'F': 5, 'G': 6, 'H': 7, 'I': 8, 'K': 9, 'L': 10, 'M': 11,
       'N': 12, 'P': 13, 'Q': 14, 'R': 15, 'S': 16, 'T': 17, 'U': 18, 'V': 19, 'W': 20, 'Y': 21, 'Z': 22,
     };
+    //TODO: use chem palette
     this.LET_COLORS = [
       {color: 'rgb(44,160,44)', regex: 'A'},
       {color: 'rgb(44,160,44)', regex: 'B'},
@@ -63,9 +64,10 @@ export class Logo extends DG.JsViewer {
     // this.reactHost = ui.div([]);
     console.log('INIT');
     this.target = this.dataFrame;
-    this.splitted = splitAlignedPeptides(this.dataFrame!.columns.bySemType(this.colSemType));
+    [this.splitted] = splitAlignedPeptides(this.dataFrame!.columns.bySemType(this.colSemType));
     this.root.style.width = 'auto';
     this.root.style.height = 'auto';
+    this.root.style.maxHeight = '200px';
   }
 
   onTableAttached() {
@@ -103,8 +105,8 @@ export class Logo extends DG.JsViewer {
         .aggregate();
     }
     if (selected) {
-      this.splitted = splitAlignedPeptides(this.target!.columns.bySemType(this.colSemType));
-    } else this.splitted = splitAlignedPeptides(this.dataFrame!.columns.bySemType(this.colSemType));
+      [this.splitted] = splitAlignedPeptides(this.target!.columns.bySemType(this.colSemType));
+    } else [this.splitted] = splitAlignedPeptides(this.dataFrame!.columns.bySemType(this.colSemType));
     $(this.root).empty();
 
     if (typeof this.dataFrame !== 'undefined') {

package/src/viewers/model.ts

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

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

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