@datagrok/bio 2.0.12 → 2.0.16

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.0.12",
+  "version": "2.0.16",
   "description": "Bio is a [package](https://datagrok.ai/help/develop/develop#packages) for the [Datagrok](https://datagrok.ai) platform",
   "repository": {
     "type": "git",
@@ -14,35 +14,42 @@
   },
   "dependencies": {
     "@biowasm/aioli": ">=2.4.0",
-    "@datagrok-libraries/bio": "^4.4.0",
+    "@datagrok-libraries/bio": "^4.4.3",
     "@datagrok-libraries/chem-meta": "1.0.0",
     "@datagrok-libraries/ml": "^6.2.0",
     "@datagrok-libraries/utils": "^1.6.2",
+    "@deck.gl/core": "^8.7.5",
+    "@deck.gl/layers": "^8.7.5",
+    "@luma.gl/constants": "^8.5.10",
+    "@luma.gl/core": "^8.5.10",
+    "@phylocanvas/phylocanvas.gl": "^1.43.0",
     "cash-dom": "latest",
-    "datagrok-api": "^1.6.7",
+    "datagrok-api": "^1.6.12",
     "dayjs": "^1.11.4",
     "openchemlib": "6.0.1",
     "rxjs": "^6.5.5",
-    "typescript": "^4.4.2",
     "wu": "latest"
   },
   "devDependencies": {
-    "@types/jest": "^27.0.0",
+    "@types/jest": "^27.5.1",
+    "@types/js-yaml": "^4.0.5",
+    "@types/node": "^17.0.24",
+    "@types/node-fetch": "^2.6.2",
+    "@types/wu": "latest",
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
-    "eslint": "^8.20.0",
+    "eslint": "latest",
     "eslint-config-google": "latest",
-    "jest": "^27.0.0",
+    "jest": "^27.5.1",
     "jest-html-reporter": "^3.6.0",
+    "js-yaml": "^4.1.0",
+    "node-fetch": "^2.6.7",
     "puppeteer": "^13.7.0",
     "ts-jest": "^27.0.0",
     "ts-loader": "^9.2.5",
+    "typescript": "^4.5.4",
     "webpack": "latest",
-    "webpack-cli": "^4.10.0",
-    "@types/js-yaml": "^4.0.5",
-    "js-yaml": "^4.1.0",
-    "@types/node-fetch": "^2.6.2",
-    "node-fetch": "^2.6.7"
+    "webpack-cli": "^4.10.0"
   },
   "scripts": {
     "link-api": "npm link datagrok-api",

package/scripts/read-tree-pkl.py

@@ -0,0 +1,215 @@
+# coding: utf-8
+
+import ete3
+import numpy as np
+import pandas as pd
+import pickle
+import six
+from sklearn.cluster import AgglomerativeClustering
+from Bio import Phylo as ph
+from Bio.Phylo.BaseTree import TreeElement
+from Bio.Phylo import parse
+
+import click
+from click_default_group import DefaultGroup
+
+
+class TreeNode:
+
+    def __init__(self, node_id: int, distance: float, children: list['TreeNode']):
+        """
+        :param id:
+        :param distance:
+        :param children: list of child nodes, set None for leaf node
+        """
+        self._node_id: int = node_id
+        self._distance: float = distance
+        self._children: [] = children
+
+    def set_height(self, height):
+        """ Sets distance based on overal height of children"""
+        self._distance = height - max((ch.get_height() for ch in self._children))
+
+    def get_height(self):
+        if self._children is None or len(self._children) == 0:
+            return self._distance
+        else:
+            return self._distance + max(ch.get_height() for ch in self._children)
+
+    def __str__(self):
+        if self._children is None or len(self._children) == 0:
+            return "{id}:{distance}".format(id=self._node_id, distance=self._distance)
+        else:
+            return "({children}){id}:{distance}".format(
+                children=','.join((str(ch) for ch in self._children)),
+                id=self._node_id,
+                distance=self._distance)
+
+
+@click.group(cls=DefaultGroup, default='main')
+def cli():
+    pass
+
+
+@cli.command()
+@click.option('--pkl', 'pkl_f',
+              help="Pickle file with tree data",
+              type=click.File('rb'))
+@click.option('--nwk', 'nwk_f',
+              help="Output file for tree in newick format",
+              type=click.File('w'))
+@click.pass_context
+def main(ctx, pkl_f, nwk_f):
+    data = pickle.load(pkl_f)
+
+    all_nodes = {}
+
+    # https://stackoverflow.com/questions/27386641/how-to-traverse-a-tree-from-sklearn-agglomerativeclustering
+    # The hint from user76284
+    v = dict(enumerate(data.children_, data.n_leaves_))
+
+    root: TreeNode = None  # The last created node is a root
+    for row_i in range(data.children_.shape[0]):
+        height = data.distances_[row_i]  # height of connection - distance between nodes (groups) -
+
+        node_id = data.n_leaves_ + row_i
+        child_id_list = data.children_[row_i, :].tolist()
+
+        child_node_list = []
+        for child_id in child_id_list:
+            child_node: TreeNode = None
+            if child_id < data.n_leaves_:
+                # leaf
+                # create child node on height
+                child_node = TreeNode(child_id, height, None)
+                pass
+            else:
+                # internal node
+                child_node = all_nodes[child_id]
+                child_node.set_height(height);
+                pass
+
+            child_node_list.append(child_node)
+
+        # create node with distance 0, set distance to parent node later based on connection height
+        root = TreeNode(node_id, 0, child_node_list)
+        all_nodes[node_id] = root
+
+        k = 11
+
+    nwk_f.write(str(root))
+    nwk_f.write(';')
+
+
+def build_Newick_tree(children, n_leaves, X, leaf_labels, spanner):
+    """
+    build_Newick_tree(children,n_leaves,X,leaf_labels,spanner)
+
+    Get a string representation (Newick tree) from the sklearn
+    AgglomerativeClustering.fit output.
+
+    Input:
+        children: AgglomerativeClustering.children_
+        n_leaves: AgglomerativeClustering.n_leaves_
+        X: parameters supplied to AgglomerativeClustering.fit
+        leaf_labels: The label of each parameter array in X
+        spanner: Callable that computes the dendrite's span
+
+    Output:
+        ntree: A str with the Newick tree representation
+
+    """
+    return go_down_tree(children, n_leaves, X, leaf_labels, len(children) + n_leaves - 1, spanner)[0] + ';'
+
+
+def go_down_tree(children, n_leaves, X, leaf_labels, nodename, spanner):
+    """
+    go_down_tree(children,n_leaves,X,leaf_labels,nodename,spanner)
+
+    Iterative function that traverses the subtree that descends from
+    nodename and returns the Newick representation of the subtree.
+
+    Input:
+        children: AgglomerativeClustering.children_
+        n_leaves: AgglomerativeClustering.n_leaves_
+        X: parameters supplied to AgglomerativeClustering.fit
+        leaf_labels: The label of each parameter array in X
+        nodename: An int that is the intermediate node name whos
+            children are located in children[nodename-n_leaves].
+        spanner: Callable that computes the dendrite's span
+
+    Output:
+        ntree: A str with the Newick tree representation
+
+    """
+    nodeindex = nodename - n_leaves
+    if nodename < n_leaves:
+        return leaf_labels[nodeindex], np.array([X[nodeindex]])
+    else:
+        node_children = children[nodeindex]
+        branch0, branch0samples = go_down_tree(children, n_leaves, X, leaf_labels, node_children[0])
+        branch1, branch1samples = go_down_tree(children, n_leaves, X, leaf_labels, node_children[1])
+        node = np.vstack((branch0samples, branch1samples))
+        branch0span = spanner(branch0samples)
+        branch1span = spanner(branch1samples)
+        nodespan = spanner(node)
+        branch0distance = nodespan - branch0span
+        branch1distance = nodespan - branch1span
+        nodename = '({branch0}:{branch0distance},{branch1}:{branch1distance})'.format(branch0=branch0,
+                                                                                      branch0distance=branch0distance,
+                                                                                      branch1=branch1,
+                                                                                      branch1distance=branch1distance)
+        return nodename, node
+
+
+def get_cluster_spanner(aggClusterer):
+    """
+    spanner = get_cluster_spanner(aggClusterer)
+
+    Input:
+        aggClusterer: sklearn.cluster.AgglomerativeClustering instance
+
+    Get a callable that computes a given cluster's span. To compute
+    a cluster's span, call spanner(cluster)
+
+    The cluster must be a 2D numpy array, where the axis=0 holds
+    separate cluster members and the axis=1 holds the different
+    variables.
+
+    """
+    if aggClusterer.linkage == 'ward':
+        if aggClusterer.affinity == 'euclidean':
+            spanner = lambda x: np.sum((x - aggClusterer.pooling_func(x, axis=0)) ** 2)
+    elif aggClusterer.linkage == 'complete':
+        if aggClusterer.affinity == 'euclidean':
+            spanner = lambda x: np.max(np.sum((x[:, None, :] - x[None, :, :]) ** 2, axis=2))
+        elif aggClusterer.affinity == 'l1' or aggClusterer.affinity == 'manhattan':
+            spanner = lambda x: np.max(np.sum(np.abs(x[:, None, :] - x[None, :, :]), axis=2))
+        elif aggClusterer.affinity == 'l2':
+            spanner = lambda x: np.max(np.sqrt(np.sum((x[:, None, :] - x[None, :, :]) ** 2, axis=2)))
+        elif aggClusterer.affinity == 'cosine':
+            spanner = lambda x: np.max(np.sum((x[:, None, :] * x[None, :, :])) / (
+                    np.sqrt(np.sum(x[:, None, :] * x[:, None, :], axis=2, keepdims=True)) * np.sqrt(
+                np.sum(x[None, :, :] * x[None, :, :], axis=2, keepdims=True))))
+        else:
+            raise AttributeError('Unknown affinity attribute value {0}.'.format(aggClusterer.affinity))
+    elif aggClusterer.linkage == 'average':
+        if aggClusterer.affinity == 'euclidean':
+            spanner = lambda x: np.mean(np.sum((x[:, None, :] - x[None, :, :]) ** 2, axis=2))
+        elif aggClusterer.affinity == 'l1' or aggClusterer.affinity == 'manhattan':
+            spanner = lambda x: np.mean(np.sum(np.abs(x[:, None, :] - x[None, :, :]), axis=2))
+        elif aggClusterer.affinity == 'l2':
+            spanner = lambda x: np.mean(np.sqrt(np.sum((x[:, None, :] - x[None, :, :]) ** 2, axis=2)))
+        elif aggClusterer.affinity == 'cosine':
+            spanner = lambda x: np.mean(np.sum((x[:, None, :] * x[None, :, :])) / (
+                    np.sqrt(np.sum(x[:, None, :] * x[:, None, :], axis=2, keepdims=True)) * np.sqrt(
+                np.sum(x[None, :, :] * x[None, :, :], axis=2, keepdims=True))))
+        else:
+            raise AttributeError('Unknown affinity attribute value {0}.'.format(aggClusterer.affinity))
+    else:
+        raise AttributeError('Unknown linkage attribute value {0}.'.format(aggClusterer.linkage))
+    return spanner
+
+
+if __name__ == '__main__':
+    cli()

package/src/__jest__/remote.test.ts

@@ -36,10 +36,10 @@ expect.extend({
 });
 
 it('TEST', async () => {
-  const targetPackage:string = process.env.TARGET_PACKAGE ?? 'Bio';
+  const targetPackage: string = process.env.TARGET_PACKAGE ?? 'Bio';
   console.log(`Testing ${targetPackage} package`);
 
-  const r = await page.evaluate((targetPackage):Promise<object> => {
+  const r = await page.evaluate((targetPackage): Promise<object> => {
     return new Promise<object>((resolve, reject) => {
       (<any>window).grok.functions.eval(targetPackage + ':test()').then((df: any) => {
         const cStatus = df.columns.byName('success');
@@ -52,10 +52,12 @@ it('TEST', async () => {
         let failReport = '';
         for (let i = 0; i < df.rowCount; i++) {
           if (cStatus.get(i)) {
-            passReport += `Test result : Success : ${cTime.get(i)} : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
+            passReport += `Test result : Success : ${cTime.get(i)} : ` +
+              `${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
           } else {
             failed = true;
-            failReport += `Test result : Failed : ${cTime.get(i)} : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
+            failReport += `Test result : Failed : ${cTime.get(i)} : ` +
+              `${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
           }
         }
         resolve({failReport, passReport, failed});

package/src/__jest__/test-node.ts

@@ -76,7 +76,7 @@ export async function getBrowserPage(puppeteer: any): Promise<{ browser: any, pa
   }, token);
   await page.goto(url);
   try {
-//    await page.waitForSelector('.grok-preloader', { timeout: 1800000 });
+    // await page.waitForSelector('.grok-preloader', { timeout: 1800000 });
     await page.waitForFunction(() => document.querySelector('.grok-preloader') == null, {timeout: 3600000});
   } catch (error) {
     throw error;

package/src/{utils → analysis}/sequence-activity-cliffs.ts

@@ -4,10 +4,10 @@ import * as ui from 'datagrok-api/ui';
 import {getSimilarityFromDistance} from '@datagrok-libraries/utils/src/similarity-metrics';
 import {AvailableMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
 import * as grok from 'datagrok-api/grok';
-import { SplitterFunc, WebLogo } from '@datagrok-libraries/bio/src/viewers/web-logo';
-import { UnitsHandler } from '@datagrok-libraries/bio/src/utils/units-handler';
+import {SplitterFunc, WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {SEM_TYPES, TAGS} from '../utils/constants';
-import { drawMoleculeDifferenceOnCanvas } from './cell-renderer';
+import {drawMoleculeDifferenceOnCanvas} from '../utils/cell-renderer';
 
 export async function getDistances(col: DG.Column, seq: string): Promise<Array<number>> {
   const stringArray = col.toList();
@@ -21,18 +21,17 @@ export async function getDistances(col: DG.Column, seq: string): Promise<Array<n
 
 export async function getSimilaritiesMarix(dim: number, seqCol: DG.Column, df: DG.DataFrame, colName: string, simArr: DG.Column[])
   : Promise<DG.Column[]> {
-
   const distances = new Array(simArr.length).fill(null);
   for (let i = 0; i != dim - 1; ++i) {
-    const seq: string = seqCol.get(i);  
+    const seq: string = seqCol.get(i);
     df.rows.removeAt(0, 1, false);
     distances[i] = (await getDistances(df.col(colName)!, seq))!;
   }
 
   for (let i = 0; i < distances.length; i++) {
-    for (let j = 0; j < distances[i].length; j++) {
+    for (let j = 0; j < distances[i].length; j++)
       distances[i][j] = getSimilarityFromDistance(distances[i][j]);
-    }
+
     simArr[i] = DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'distances', distances[i]);
   }
   return simArr;
@@ -62,11 +61,10 @@ export function createTooltipElement(params: ITooltipAndPanelParams): HTMLDivEle
 }
 
 function moleculeInfo(df: DG.DataFrame, idx: number, seqColName: string): HTMLElement {
-  let dict: {[key: string]: string} = {};
-  for (let col of df.columns) {
-    if(col.name !== seqColName) {
+  const dict: {[key: string]: string} = {};
+  for (const col of df.columns) {
+    if (col.name !== seqColName)
       dict[col.name] = df.get(col.name, idx);
-    }
   }
   return ui.tableFromMap(dict);
 }
@@ -75,7 +73,7 @@ function moleculeInfo(df: DG.DataFrame, idx: number, seqColName: string): HTMLEl
 export function createPropPanelElement(params: ITooltipAndPanelParams): HTMLDivElement {
   const propPanel = ui.div();
 
-  propPanel.append(ui.divText(params.seqCol.name, { style: { fontWeight: 'bold' } }));
+  propPanel.append(ui.divText(params.seqCol.name, {style: {fontWeight: 'bold'}}));
 
   const sequencesArray = new Array<string>(2);
   const activitiesArray = new Array<number>(2);
@@ -83,39 +81,60 @@ export function createPropPanelElement(params: ITooltipAndPanelParams): HTMLDivE
     sequencesArray[idx] = params.seqCol.get(molIdx);
     activitiesArray[idx] = params.activityCol.get(molIdx);
   });
+
+  const molDifferences: {[key: number]: HTMLCanvasElement} = {};
+  const units = params.seqCol.getTag(DG.TAGS.UNITS);
+  const separator = params.seqCol.getTag(TAGS.SEPARATOR);
+  const splitter = WebLogo.getSplitter(units, separator);
+  const subParts1 = splitter(sequencesArray[0]);
+  const subParts2 = splitter(sequencesArray[1]);
+  const canvas = createDifferenceCanvas(subParts1, subParts2, units, molDifferences);
+  propPanel.append(ui.div(canvas, {style: {width: '300px', overflow: 'scroll'}}));
+
+  propPanel.append(createDifferencesWithPositions(molDifferences));
+
+  propPanel.append(createPropPanelField('Activity delta', Math.abs(activitiesArray[0] - activitiesArray[1])));
+  propPanel.append(createPropPanelField('Cliff', params.sali!));
+
+  return propPanel;
+}
+
+function createPropPanelField(name: string, value: number): HTMLDivElement {
+  return ui.divH([
+    ui.divText(`${name}: `, {style: {fontWeight: 'bold', paddingRight: '5px'}}),
+    ui.divText(value.toFixed(2))
+  ], {style: {paddingTop: '5px'}});
+}
+
+export function createDifferenceCanvas(
+  subParts1: string[],
+  subParts2: string[],
+  units: string,
+  molDifferences: { [key: number]: HTMLCanvasElement }): HTMLCanvasElement {
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
   canvas.height = 30;
-  const units = params.seqCol.getTag(DG.TAGS.UNITS);
-  const separator = params.seqCol.getTag(TAGS.SEPARATOR);
-  const molDifferences: {[key: number]: HTMLCanvasElement} = {};
-  drawMoleculeDifferenceOnCanvas(context!, 0, 0, 0, 30, sequencesArray.join('#'), units, separator, true, molDifferences);
-  propPanel.append(ui.div(canvas, { style: { width: '300px', overflow: 'scroll' } }));
-  
+  drawMoleculeDifferenceOnCanvas(context!, 0, 0, 0, 30, subParts1, subParts2, units, true, molDifferences);
+  return canvas;
+}
+
+export function createDifferencesWithPositions(
+  molDifferences: { [key: number]: HTMLCanvasElement }): HTMLDivElement {
+  const div = ui.div();
   if (Object.keys(molDifferences).length > 0) {
     const diffsPanel = ui.divV([]);
     diffsPanel.append(ui.divH([
-      ui.divText('Pos', { style: { fontWeight: 'bold', width: '30px' } }),
-      ui.divText('Difference', { style: { fontWeight: 'bold' } }) 
-    ]))
-    for (let key of Object.keys(molDifferences)) {
+      ui.divText('Pos', {style: {fontWeight: 'bold', width: '30px', borderBottom: '1px solid'}}),
+      ui.divText('Difference', {style: {fontWeight: 'bold', borderBottom: '1px solid'}})
+    ]));
+    for (const key of Object.keys(molDifferences)) {
+      molDifferences[key as any].style.borderBottom = '1px solid lightgray';
       diffsPanel.append(ui.divH([
-        ui.divText(key, { style: { width: '30px' } }),
+        ui.divText((parseInt(key) + 1).toString(), {style: {width: '30px', borderBottom: '1px solid lightgray'}}),
         molDifferences[key as any]
       ]));
     }
-    propPanel.append(diffsPanel);
-  }
-
-  function addFiledToPropPanel(name: string, value: number) {
-    propPanel.append(ui.divH([
-      ui.divText(`${name}: `, { style: { fontWeight: 'bold', paddingRight: '5px' } }),
-      ui.divText(value.toFixed(2))
-    ], { style: { paddingTop: '5px' } }));
+    div.append(diffsPanel);
   }
-
-  addFiledToPropPanel('Activity delta', Math.abs(activitiesArray[0] - activitiesArray[1]));
-  addFiledToPropPanel('Cliff', params.sali!);
-
-  return propPanel;
-}
+  return div;
+}

package/src/analysis/sequence-diversity-viewer.ts

@@ -0,0 +1,48 @@
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+import BitArray from '@datagrok-libraries/utils/src/bit-array';
+import {similarityMetric, getDiverseSubset} from '@datagrok-libraries/utils/src/similarity-metrics';
+import $ from 'cash-dom';
+import {ArrayUtils} from '@datagrok-libraries/utils/src/array-utils';
+import {SequenceSearchBaseViewer} from './sequence-search-base-viewer';
+import {getMonomericMols} from '../calculations/monomerLevelMols';
+import {updateDivInnerHTML} from '../utils/ui-utils';
+import { Subject } from 'rxjs';
+
+export class SequenceDiversityViewer extends SequenceSearchBaseViewer {
+  renderMolIds: number[] | null = null;
+  columnNames = [];
+  computeCompleted = new Subject<boolean>();
+
+  constructor() {
+    super('diversity');
+  }
+
+
+  async render(computeData = true): Promise<void> {
+    if (!this.beforeRender())
+      return;
+    if (this.dataFrame) {
+      if (computeData && this.moleculeColumn) {
+        const monomericMols = await getMonomericMols(this.moleculeColumn);
+        //need to create df to calculate fingerprints
+        const monomericMolsDf = DG.DataFrame.fromColumns([monomericMols]);
+        this.renderMolIds =
+        await grok.functions.call('Chem:callChemDiversitySearch', {
+          col: monomericMols,
+          metricName: this.distanceMetric,
+          limit: this.limit,
+          fingerprint: this.fingerprint
+        });
+        const resCol = DG.Column.string('sequence', this.renderMolIds!.length)
+          .init((i) => this.moleculeColumn?.get(this.renderMolIds![i]));
+        resCol.semType = DG.SEMTYPE.MACROMOLECULE;
+        this.tags.forEach((tag) => resCol.setTag(tag, this.moleculeColumn!.getTag(tag)));
+        const resDf = DG.DataFrame.fromColumns([resCol]);
+        updateDivInnerHTML(this.root, resDf.plot.grid().root);
+        this.computeCompleted.next(true);
+      }
+    }
+  }
+}

package/src/analysis/sequence-search-base-viewer.ts

@@ -0,0 +1,81 @@
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+import {CHEM_SIMILARITY_METRICS} from '@datagrok-libraries/utils/src/similarity-metrics';
+import * as C from '../utils/constants';
+
+export class SequenceSearchBaseViewer extends DG.JsViewer {
+  name: string = '';
+  distanceMetric: string;
+  limit: number;
+  fingerprint: string;
+  metricsProperties = ['distanceMetric', 'fingerprint'];
+  fingerprintChoices = ['Morgan', 'Pattern'];
+  moleculeColumn?: DG.Column|null;
+  moleculeColumnName: string;
+  initialized: boolean = false;
+  tags = [DG.TAGS.UNITS, C.TAGS.ALIGNED, C.TAGS.SEPARATOR, C.TAGS.ALPHABET];
+
+  constructor(name: string) {
+    super();
+    this.fingerprint = this.string('fingerprint', this.fingerprintChoices[0], {choices: this.fingerprintChoices});
+    this.limit = this.int('limit', 10);
+    this.distanceMetric = this.string('distanceMetric', CHEM_SIMILARITY_METRICS[0], {choices: CHEM_SIMILARITY_METRICS});
+    this.moleculeColumnName = this.string('moleculeColumnName');
+    this.name = name;
+  }
+
+  init(): void {
+    this.initialized = true;
+  }
+
+  detach(): void {
+    this.subs.forEach((sub) => sub.unsubscribe());
+  }
+
+  async onTableAttached(): Promise<void> {
+    this.init();
+
+    if (this.dataFrame) {
+      this.subs.push(DG.debounce(this.dataFrame.onRowsRemoved, 50).subscribe(async (_: any) => await this.render()));
+      const compute = this.name !== 'diversity';
+      this.subs.push(DG.debounce(this.dataFrame.onCurrentRowChanged, 50)
+        .subscribe(async (_: any) => await this.render(compute)));
+      this.subs.push(DG.debounce(this.dataFrame.selection.onChanged, 50)
+        .subscribe(async (_: any) => await this.render(false)));
+      this.subs.push(DG.debounce(ui.onSizeChanged(this.root), 50)
+        .subscribe(async (_: any) => await this.render(false)));
+      this.moleculeColumn = this.dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
+      this.moleculeColumnName = this.moleculeColumn?.name!;
+      this.getProperty('limit')!.fromOptions({min: 1, max: this.dataFrame.rowCount});
+    }
+    await this.render();
+  }
+
+  onPropertyChanged(property: DG.Property): void {
+    super.onPropertyChanged(property);
+    if (!this.initialized)
+      return;
+    if (property.name === 'moleculeColumnName') {
+      const col = this.dataFrame.col(property.get(this))!;
+      if (col.semType === DG.SEMTYPE.MACROMOLECULE)
+        this.moleculeColumn = col;
+    }
+    this.render();
+  }
+
+  async render(computeData = true) {
+
+  }
+
+  beforeRender() {
+    if (!this.initialized)
+      return false;
+    if (this.dataFrame && this.moleculeColumnName &&
+          this.dataFrame.col(this.moleculeColumnName)!.semType !== DG.SEMTYPE.MACROMOLECULE) {
+      grok.shell.error(`${this.moleculeColumnName} is not Macromolecule type`);
+      return false;
+    }
+    return true;
+  }
+}