@datagrok/bio 2.19.0 → 2.20.1

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.19.0",
+  "version": "2.20.1",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -47,10 +47,10 @@
     "@datagrok-libraries/bio": "^5.50.1",
     "@datagrok-libraries/chem-meta": "^1.2.7",
     "@datagrok-libraries/math": "^1.2.4",
-    "@datagrok-libraries/ml": "^6.7.6",
-    "@datagrok-libraries/tutorials": "^1.4.3",
-    "@datagrok-libraries/utils": "^4.4.0",
-    "datagrok-api": "^1.24.0",
+    "@datagrok-libraries/ml": "^6.10.0",
+    "@datagrok-libraries/tutorials": "^1.6.0",
+    "@datagrok-libraries/utils": "^4.5.0",
+    "datagrok-api": "^1.25.0",
     "@webgpu/types": "^0.1.40",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
@@ -109,7 +109,7 @@
     "analyze": "webpack --profile --json > ./stats.json && npx webpack-bundle-analyzer ./stats.json"
   },
   "canEdit": [
-    "Developers"
+    "Administrators"
   ],
   "canView": [
     "All users"

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

@@ -5,12 +5,13 @@ import * as grok from 'datagrok-api/grok';
 import {getDiverseSubset} from '@datagrok-libraries/utils/src/similarity-metrics';
 import {SequenceSearchBaseViewer} from './sequence-search-base-viewer';
 import {getMonomericMols} from '../calculations/monomerLevelMols';
-import {updateDivInnerHTML} from '../utils/ui-utils';
+import {adjustGridcolAfterRender, updateDivInnerHTML} from '../utils/ui-utils';
 import {Subject} from 'rxjs';
 import {ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
 import {getEncodedSeqSpaceCol} from './sequence-space';
 import {MmDistanceFunctionsNames} from '@datagrok-libraries/ml/src/macromolecule-distance-functions';
 import {DistanceMatrixService, dmLinearIndex} from '@datagrok-libraries/ml/src/distance-matrix';
+import {MmcrTemps} from '@datagrok-libraries/bio/src/utils/cell-renderer-consts';
 
 export class SequenceDiversityViewer extends SequenceSearchBaseViewer {
   diverseColumnLabel: string | null; // Use postfix Label to prevent activating table column selection editor
@@ -22,7 +23,7 @@ export class SequenceDiversityViewer extends SequenceSearchBaseViewer {
   constructor(
     private readonly seqHelper: ISeqHelper,
   ) {
-    super('diversity');
+    super('diversity', DG.SEMTYPE.MACROMOLECULE);
     this.diverseColumnLabel = this.string('diverseColumnLabel', null);
   }
 
@@ -30,27 +31,34 @@ export class SequenceDiversityViewer extends SequenceSearchBaseViewer {
     if (!this.beforeRender())
       return;
     if (this.dataFrame) {
-      if (computeData && this.moleculeColumn) {
-        const sh = this.seqHelper.getSeqHandler(this.moleculeColumn);
+      if (computeData && this.targetColumn) {
+        const sh = this.seqHelper.getSeqHandler(this.targetColumn);
         await (sh.isFasta() ? this.computeByMM() : this.computeByChem());
 
         const diverseColumnName: string = this.diverseColumnLabel != null ? this.diverseColumnLabel :
-          `diverse (${this.moleculeColumnName})`;
+          `diverse (${this.targetColumnName})`;
         const resCol = DG.Column.string(diverseColumnName, this.renderMolIds!.length)
-          .init((i) => this.moleculeColumn?.get(this.renderMolIds![i]));
+          .init((i) => this.targetColumn?.get(this.renderMolIds![i]));
         resCol.semType = DG.SEMTYPE.MACROMOLECULE;
-        this.tags.forEach((tag) => resCol.setTag(tag, this.moleculeColumn!.getTag(tag)));
+        this.tags.forEach((tag) => resCol.setTag(tag, this.targetColumn!.getTag(tag)));
         const resDf = DG.DataFrame.fromColumns([resCol]);
-        resDf.onCurrentRowChanged.subscribe(
-          (_: any) => { this.dataFrame.currentRowIdx = this.renderMolIds![resDf.currentRowIdx]; });
-        updateDivInnerHTML(this.root, resDf.plot.grid().root);
+        resCol.temp[MmcrTemps.maxMonomerLength] = 4;
+
+        const _ = resDf.onCurrentRowChanged.subscribe((_: any) => {
+          this.dataFrame.currentRowIdx = this.renderMolIds![resDf.currentRowIdx];
+        });
+
+        const grid = resDf.plot.grid();
+        adjustGridcolAfterRender(grid, resCol.name, 450, 30);
+
+        updateDivInnerHTML(this.root, grid.root);
         this.computeCompleted.next(true);
       }
     }
   }
 
   private async computeByChem() {
-    const monomericMols = await getMonomericMols(this.moleculeColumn!, this.seqHelper);
+    const monomericMols = await getMonomericMols(this.targetColumn!, this.seqHelper);
     //need to create df to calculate fingerprints
     const _monomericMolsDf = DG.DataFrame.fromColumns([monomericMols]);
     this.renderMolIds = await grok.functions.call('Chem:callChemDiversitySearch', {
@@ -63,15 +71,15 @@ export class SequenceDiversityViewer extends SequenceSearchBaseViewer {
 
   private async computeByMM() {
     const encodedSequences =
-      (await getEncodedSeqSpaceCol(this.moleculeColumn!, MmDistanceFunctionsNames.LEVENSHTEIN)).seqList;
+      (await getEncodedSeqSpaceCol(this.targetColumn!, MmDistanceFunctionsNames.LEVENSHTEIN)).seqList;
     const distanceMatrixService = new DistanceMatrixService(true, false);
     const distanceMatrixData = await distanceMatrixService.calc(encodedSequences, MmDistanceFunctionsNames.LEVENSHTEIN);
     distanceMatrixService.terminate();
-    const len = this.moleculeColumn!.length;
+    const len = this.targetColumn!.length;
     const linearizeFunc = dmLinearIndex(len);
     this.renderMolIds = getDiverseSubset(len, Math.min(len, this.limit),
       (i1: number, i2: number) => {
-        return this.moleculeColumn!.isNone(i1) || this.moleculeColumn!.isNone(i2) ? 0 :
+        return this.targetColumn!.isNone(i1) || this.targetColumn!.isNone(i2) ? 0 :
           distanceMatrixData[linearizeFunc(i1, i2)];
       });
   }

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

@@ -4,94 +4,28 @@ import * as grok from 'datagrok-api/grok';
 
 import {CHEM_SIMILARITY_METRICS} from '@datagrok-libraries/ml/src/distance-metrics-methods';
 import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {SearchBaseViewer} from '@datagrok-libraries/ml/src/viewers/search-base-viewer';
 
 const MAX_ROWS_FOR_DISTANCE_MATRIX = 22000;
 
-export class SequenceSearchBaseViewer extends DG.JsViewer {
-  name: string = '';
+export class SequenceSearchBaseViewer extends SearchBaseViewer {
   distanceMetric: string;
-  limit: number;
   fingerprint: string;
   metricsProperties = ['distanceMetric', 'fingerprint'];
   fingerprintChoices = ['Morgan', 'Pattern'];
-  moleculeColumn?: DG.Column<string>;
-  moleculeColumnName: string;
-  initialized: boolean = false;
-  tags = [DG.TAGS.UNITS, bioTAGS.aligned, bioTAGS.separator, bioTAGS.alphabet];
+  tags = [DG.TAGS.UNITS, bioTAGS.aligned, bioTAGS.separator, bioTAGS.alphabet, 'cell.renderer'];
   preComputeDistanceMatrix: boolean = false;
 
-  constructor(name: string) {
-    super();
+  constructor(name: string, semType: string) {
+    super(name, semType);
     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();
+    super.onTableAttached();
 
-    if (this.dataFrame) {
+    if (this.dataFrame)
       this.preComputeDistanceMatrix = this.dataFrame.rowCount <= MAX_ROWS_FOR_DISTANCE_MATRIX;
-      this.subs.push(DG.debounce(this.dataFrame.onRowsRemoved, 50)
-        .subscribe((_: any) => this.render(true)));
-      const compute = this.name !== 'diversity';
-      this.subs.push(DG.debounce(this.dataFrame.onCurrentRowChanged, 50)
-        .subscribe((_: any) => this.render(compute)));
-      this.subs.push(DG.debounce(this.dataFrame.selection.onChanged, 50)
-        .subscribe((_: any) => this.render(false)));
-      this.subs.push(DG.debounce(ui.onSizeChanged(this.root), 50)
-        .subscribe((_: any) => this.render(false)));
-      this.moleculeColumn = this.dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE) as DG.Column<string>;
-      this.moleculeColumnName = this.moleculeColumn?.name!;
-      this.getProperty('limit')!.fromOptions({min: 1, max: this.dataFrame.rowCount});
-    }
-    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();
-  }
-
-  /** For tests */ public computeRequested: boolean = false;
-  public renderPromise: Promise<void> = Promise.resolve();
-
-  protected render(computeData = true): void {
-    this.renderPromise = this.renderPromise.then(async () => {
-      this.computeRequested = this.computeRequested || computeData;
-      await this.renderInt(computeData);
-    });
-  }
-
-  async renderInt(_computeData: boolean): Promise<void> {
-
-  }
-
-  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;
   }
 }

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

@@ -3,15 +3,15 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {SequenceSearchBaseViewer} from './sequence-search-base-viewer';
-import {getMonomericMols} from '../calculations/monomerLevelMols';
 import {createDifferenceCanvas, createDifferencesWithPositions} from './sequence-activity-cliffs';
-import {updateDivInnerHTML} from '../utils/ui-utils';
+import {adjustGridcolAfterRender, updateDivInnerHTML} from '../utils/ui-utils';
 import {Subject} from 'rxjs';
 import {ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
 import {alignSequencePair} from '@datagrok-libraries/bio/src/utils/macromolecule/alignment';
 import {KnnResult, SparseMatrixService} from '@datagrok-libraries/ml/src/distance-matrix/sparse-matrix-service';
 import {getEncodedSeqSpaceCol} from './sequence-space';
 import {MmDistanceFunctionsNames} from '@datagrok-libraries/ml/src/macromolecule-distance-functions';
+import {MmcrTemps, tempTAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer-consts';
 
 export class SequenceSimilarityViewer extends SequenceSearchBaseViewer {
   cutoff: number;
@@ -31,12 +31,14 @@ export class SequenceSimilarityViewer extends SequenceSearchBaseViewer {
   knn?: KnnResult;
   kPrevNeighbors: number = 0;
   demo?: boolean;
+  analysisGrid?: DG.Grid;
+  subInited: boolean = false;
 
   constructor(
     private readonly seqHelper: ISeqHelper,
     demo?: boolean,
   ) {
-    super('similarity');
+    super('similarity', DG.SEMTYPE.MACROMOLECULE);
     this.cutoff = this.float('cutoff', 0.01, {min: 0, max: 1});
     this.hotSearch = this.bool('hotSearch', true);
     this.similarColumnLabel = this.string('similarColumnLabel', null);
@@ -51,63 +53,60 @@ export class SequenceSimilarityViewer extends SequenceSearchBaseViewer {
   override async renderInt(computeData: boolean): Promise<void> {
     if (!this.beforeRender())
       return;
-    if (this.moleculeColumn) {
+    if (this.targetColumn) {
       this.curIdx = this.dataFrame!.currentRowIdx == -1 ? 0 : this.dataFrame!.currentRowIdx;
       if (computeData && !this.gridSelect) {
-        this.targetMoleculeIdx = this.dataFrame!.currentRowIdx == -1 ? 0 : this.dataFrame!.currentRowIdx;
-        const sh = this.seqHelper.getSeqHandler(this.moleculeColumn!);
+        this.targetMoleculeIdx = (this.dataFrame!.currentRowIdx ?? -1) < 0 ? 0 : this.dataFrame!.currentRowIdx;
 
-        await (!sh.isHelm() ? this.computeByMM() : this.computeByChem());
+        await this.computeByMM();
         const similarColumnName: string = this.similarColumnLabel != null ? this.similarColumnLabel :
-          `similar (${this.moleculeColumnName})`;
+          `similar (${this.targetColumn})`;
         this.molCol = DG.Column.string(similarColumnName,
-          this.idxs!.length).init((i) => this.moleculeColumn?.get(this.idxs?.get(i)));
+          this.idxs!.length).init((i) => this.targetColumn?.get(this.idxs?.get(i)));
         this.molCol.semType = DG.SEMTYPE.MACROMOLECULE;
-        this.tags.forEach((tag) => this.molCol!.setTag(tag, this.moleculeColumn!.getTag(tag)));
+        this.tags.forEach((tag) => this.molCol!.setTag(tag, this.targetColumn!.getTag(tag)));
         const resDf = DG.DataFrame.fromColumns([this.idxs!, this.molCol!, this.scores!]);
-        resDf.onCurrentRowChanged.subscribe((_: any) => {
+        await resDf.meta.detectSemanticTypes();
+        await grok.data.detectSemanticTypes(resDf);
+        this.molCol.temp[tempTAGS.referenceSequence] = this.targetColumn!.get(this.targetMoleculeIdx);
+        this.molCol.temp[MmcrTemps.maxMonomerLength] = 4;
+        let prevTimer: any = null;
+        const _ = resDf.onCurrentRowChanged.subscribe((_: any) => {
+          prevTimer && clearTimeout(prevTimer);
           this.dataFrame.currentRowIdx = resDf.col('indexes')!.get(resDf.currentRowIdx);
-          setTimeout(() => { this.createPropertyPanel(resDf); }, 1000);
+          prevTimer = setTimeout(() => { this.createPropertyPanel(resDf); }, 300);
           this.gridSelect = true;
         });
-        const grid = resDf.plot.grid();
-        grid.col('indexes')!.visible = false;
+        if (!this.analysisGrid) {
+          this.analysisGrid = resDf.plot.grid();
+          updateDivInnerHTML(this.root, this.analysisGrid.root);
+        } else {
+          this.analysisGrid.dataFrame = resDf;
+          this.analysisGrid.invalidate();
+        }
+        this.analysisGrid.col('indexes')!.visible = false;
+        adjustGridcolAfterRender(this.analysisGrid, this.molCol!.name, 450, 30, true);
         const targetMolRow = this.idxs?.getRawData().findIndex((it) => it == this.targetMoleculeIdx);
-        const targetScoreCell = grid.cell('score', targetMolRow!);
+        const targetScoreCell = this.analysisGrid.cell('score', targetMolRow!);
         targetScoreCell.cell.value = null;
-        const view = this.demo ? (grok.shell.view('Browse')! as DG.BrowseView)!.preview! as DG.TableView : grok.shell.v as DG.TableView;
-        view.grid.root.addEventListener('click', (_event: MouseEvent) => {
-          this.gridSelect = false;
-        });
-        updateDivInnerHTML(this.root, grid.root);
+        const view = grok.shell.tv;
+        if (!this.subInited) {
+          view.grid.root.addEventListener('click', (_event: MouseEvent) => {
+            this.gridSelect = false;
+          });
+          this.subInited = true;
+        }
         this.computeCompleted.next(true);
       }
     }
   }
 
-  private async computeByChem() {
-    const monomericMols = await getMonomericMols(this.moleculeColumn!, this.seqHelper);
-    //need to create df to calculate fingerprints
-    const _monomericMolsDf = DG.DataFrame.fromColumns([monomericMols]);
-    const df = await grok.functions.call('Chem:callChemSimilaritySearch', {
-      df: this.dataFrame,
-      col: monomericMols,
-      molecule: monomericMols.get(this.targetMoleculeIdx),
-      metricName: this.distanceMetric,
-      limit: this.limit,
-      minScore: this.cutoff,
-      fingerprint: this.fingerprint,
-    });
-    this.idxs = df.getCol('indexes');
-    this.scores = df.getCol('score');
-  }
-
   private async computeByMM() {
-    const len = this.moleculeColumn!.length;
+    const len = this.targetColumn!.length;
     const actualLimit = Math.min(this.limit, len - 1);
     if (!this.knn || this.kPrevNeighbors !== actualLimit) {
       const encodedSequences =
-        (await getEncodedSeqSpaceCol(this.moleculeColumn!, MmDistanceFunctionsNames.LEVENSHTEIN)).seqList;
+        (await getEncodedSeqSpaceCol(this.targetColumn!, MmDistanceFunctionsNames.LEVENSHTEIN)).seqList;
 
       this.kPrevNeighbors = actualLimit;
       this.knn = await (new SparseMatrixService()
@@ -128,12 +127,13 @@ export class SequenceSimilarityViewer extends SequenceSearchBaseViewer {
     const molDifferences: { [key: number]: HTMLCanvasElement } = {};
     const molColName = this.molCol?.name!;
     const resCol: DG.Column<string> = resDf.col(molColName)!;
-    const molColSh = this.seqHelper.getSeqHandler(this.moleculeColumn!);
+    const molColSh = this.seqHelper.getSeqHandler(this.targetColumn!);
     const resSh = this.seqHelper.getSeqHandler(resCol);
     const subParts1 = molColSh.getSplitted(this.targetMoleculeIdx);
     const subParts2 = resSh.getSplitted(resDf.currentRowIdx);
     const alignment = alignSequencePair(subParts1, subParts2);
-    const canvas = createDifferenceCanvas(alignment.seq1Splitted, alignment.seq2Splitted, resSh.defaultBiotype, molDifferences);
+    const canvas =
+      createDifferenceCanvas(alignment.seq1Splitted, alignment.seq2Splitted, resSh.defaultBiotype, molDifferences);
     propPanel.append(ui.div(canvas, {style: {width: '300px', overflow: 'scroll'}}));
     if (subParts1.length !== subParts2.length) {
       propPanel.append(ui.divV([

package/src/demo/bio01-similarity-diversity.ts

@@ -8,11 +8,30 @@ import {handleError} from './utils';
 import {SequenceDiversityViewer} from '../analysis/sequence-diversity-viewer';
 import {SequenceSimilarityViewer} from '../analysis/sequence-similarity-viewer';
 import {getSeqHelper, ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
+import {adjustGridcolAfterRender} from '../utils/ui-utils';
+import {MmcrTemps} from '@datagrok-libraries/bio/src/utils/cell-renderer-consts';
 
 const dataFn: string = 'samples/FASTA_PT_activity.csv';
 
-export async function demoBio01UI() {
-  let seqHelper: ISeqHelper = await getSeqHelper();
+export async function demoBioSimDiv() {
+  const t = await _package.files.readCsv('samples/peptides-non-natural.csv');
+  t.name = 'Similarity and Diversity Demo';
+  t.col('activity')!.setTag('format', '3 significant digits');
+  t.col('sequence')!.temp[MmcrTemps.maxMonomerLength] = 4;
+  const tv = grok.shell.addTableView(t);
+  await t.meta.detectSemanticTypes();
+  await grok.data.detectSemanticTypes(t);
+  const simV = tv.addViewer('Sequence Similarity Search', {limit: 20});
+  const dn = tv.dockManager.dock(simV, DG.DOCK_TYPE.RIGHT, null, 'Similarity search', 0.45);
+  adjustGridcolAfterRender(tv.grid, 'sequence', 500, 30);
+  const divV = tv.addViewer('Sequence Diversity Search', {limit: 20});
+  tv.dockManager.dock(divV, DG.DOCK_TYPE.DOWN, dn, 'Diversity search', 0.4);
+  grok.functions.call('Dendrogram:HierarchicalClustering',
+    {df: grok.shell.t, colNameList: ['sequence'], distance: 'euclidian', linkage: 'complete'});
+}
+
+export async function demoBio01UISteps() {
+  const seqHelper: ISeqHelper = await getSeqHelper();
 
   let view: DG.TableView;
   let df: DG.DataFrame;

package/src/demo/bio01a-hierarchical-clustering-and-sequence-space.ts

@@ -12,6 +12,13 @@ import {getClusterMatrixWorker} from '@datagrok-libraries/math';
 const dataFn = 'samples/FASTA_PT_activity.csv';
 const seqColName = 'sequence';
 
+export async function demoSeqSpace() {
+  const p = await grok.functions.eval('Bio:SeqSpaceDemo');
+  const project = await grok.dapi.projects.find(p.id);
+  await project.open();
+  grok.shell.windows.help.showHelp('/help/datagrok/solutions/domains/bio/bio.md#sequence-space');
+}
+
 export async function demoBio01aUI() {
   let treeHelper: ITreeHelper;
   let dendrogramSvc: IDendrogramService;

package/src/demo/bio01b-hierarchical-clustering-and-activity-cliffs.ts

@@ -28,7 +28,7 @@ export async function demoBio01bUI() {
 
   try {
     const demoScript = new DemoScript('Activity Cliffs', 'Activity Cliffs analysis on Macromolecules data', false,
-      {autoStartFirstStep: true});
+      {autoStartFirstStep: true, path: 'Bioinformatics/Activity Cliffs'});
     await demoScript
       .step(`Load DNA sequences`, async () => {
         grok.shell.windows.showContextPanel = false;
@@ -107,3 +107,40 @@ export async function demoBio01bUI() {
     handleError(err);
   }
 }
+
+export async function demoActivityCliffsCyclic() {
+  const df = await _package.files.readCsv('tests/helm_cyclic_cliffs.csv');
+  df.name = 'Activity Cliffs Demo';
+  await grok.data.detectSemanticTypes(df);
+  await df.meta.detectSemanticTypes();
+  const tv = grok.shell.addTableView(df);
+  ui.setUpdateIndicator(tv.root, true);
+  try {
+    const seqEncodingFunc = DG.Func.find({name: 'macromoleculePreprocessingFunction', package: 'Bio'})[0];
+    const activityCliffsViewer = (await activityCliffs(
+      df, df.getCol('Sequence'), df.getCol('Activity'),
+      96, DimReductionMethods.UMAP, MmDistanceFunctionsNames.MONOMER_CHEMICAL_DISTANCE,
+      seqEncodingFunc, {}, true)) as DG.ScatterPlotViewer;
+    tv.dockManager.dock(activityCliffsViewer, DG.DOCK_TYPE.RIGHT, null, 'Activity Cliffs', 0.65);
+    await DG.delay(100);
+    const cliffsLink: HTMLButtonElement = $(activityCliffsViewer.root)
+      .find('button.scatter_plot_link,cliffs_grid').get()[0] as HTMLButtonElement;
+    cliffsLink.click();
+    await DG.delay(100);
+    tv.grid.props.rowHeight = 180;
+    tv.grid.col('sequence') && (tv.grid.col('sequence')!.width = 300);
+    tv.grid.col('structure') && (tv.grid.col('structure')!.width = 300);
+    const cliffsGrid = Array.from(tv.viewers).find((v) => v !== tv.grid && v.type === DG.VIEWER.GRID) as DG.Grid;
+    if (cliffsGrid) {
+      cliffsGrid.props.rowHeight = 40;
+      cliffsGrid.col('seq_diff')!.width = 600;
+      tv.dockManager.dock(cliffsGrid, DG.DOCK_TYPE.DOWN, null, 'Cliffs', 0.35);
+      tv.dockManager.dock(activityCliffsViewer, DG.DOCK_TYPE.RIGHT, null, 'Activity Cliffs', 0.55);
+    }
+  } catch (err: any) {
+    handleError(err);
+  } finally {
+    ui.setUpdateIndicator(tv.root, false);
+  }
+  grok.shell.windows.help.showHelp('/help/datagrok/solutions/domains/bio/bio.md#activity-cliffs');
+}

package/src/demo/bio03-atomic-level.ts

@@ -5,6 +5,21 @@ import {_package, toAtomicLevel} from '../package';
 import {handleError} from './utils';
 import {DemoScript} from '@datagrok-libraries/tutorials/src/demo-script';
 import {delay} from '@datagrok-libraries/utils/src/test';
+import {adjustGridcolAfterRender} from '../utils/ui-utils';
+
+export async function demoToAtomicLevel(): Promise<void> {
+  const data = await _package.files.readCsv('samples/HELM_BI_CYCLIC.csv');
+  data.name = 'To Atomic Level';
+  await data.meta.detectSemanticTypes();
+  await grok.data.detectSemanticTypes(data);
+  const view = grok.shell.addTableView(data);
+  const seqCol = data.col('HELM')!;
+  await toAtomicLevel(data, seqCol, true, false);
+  adjustGridcolAfterRender(view.grid, 'molfile(HELM)', 500, 300, true);
+  adjustGridcolAfterRender(view.grid, 'HELM', 500, undefined, true);
+  grok.shell.info('Hover over monomers in HELM column to highlight them in molecular structure.', {timeout: 10});
+  grok.shell.windows.help.showHelp('/help/datagrok/solutions/domains/bio/bio.md#get-atomic-level-structure');
+}
 
 export async function demoBio03UI(): Promise<void> {
   const dataFn: string = 'samples/HELM.csv';

package/src/package.ts

@@ -47,11 +47,10 @@ import {BioSubstructureFilter} from './widgets/bio-substructure-filter';
 import {WebLogoViewer} from './viewers/web-logo-viewer';
 import {MonomerLibManager} from './utils/monomer-lib/lib-manager';
 import {getMonomerLibraryManagerLink, showManageLibrariesDialog, showManageLibrariesView} from './utils/monomer-lib/library-file-manager/ui';
-import {demoBio01UI} from './demo/bio01-similarity-diversity';
-import {demoBio01aUI} from './demo/bio01a-hierarchical-clustering-and-sequence-space';
-import {demoBio01bUI} from './demo/bio01b-hierarchical-clustering-and-activity-cliffs';
-import {demoBio03UI} from './demo/bio03-atomic-level';
-import {demoBio05UI} from './demo/bio05-helm-msa-sequence-space';
+import {demoBioSimDiv} from './demo/bio01-similarity-diversity';
+import {demoSeqSpace} from './demo/bio01a-hierarchical-clustering-and-sequence-space';
+import {demoActivityCliffsCyclic} from './demo/bio01b-hierarchical-clustering-and-activity-cliffs';
+import {demoToAtomicLevel} from './demo/bio03-atomic-level';
 import {checkInputColumnUI} from './utils/check-input-column';
 import {MsaWarning} from './utils/multiple-sequence-alignment';
 import {multipleSequenceAlignmentUI} from './utils/multiple-sequence-alignment-ui';
@@ -587,7 +586,7 @@ export async function sequenceSpaceTopMenu(table: DG.DataFrame, molecules: DG.Co
   plotEmbeddings: boolean, preprocessingFunction?: DG.Func, options?: (IUMAPOptions | ITSNEOptions) & Options,
   clusterEmbeddings?: boolean, isDemo?: boolean
 ): Promise<DG.ScatterPlotViewer | undefined> {
-  const tableView = isDemo ? (grok.shell.view('Browse')! as DG.BrowseView)!.preview! as DG.TableView :
+  const tableView =
     grok.shell.tv.dataFrame == table ? grok.shell.tv : undefined;
   if (!checkInputColumnUI(molecules, 'Sequence Space'))
     return;
@@ -967,21 +966,14 @@ export async function manageLibrariesApp(): Promise<DG.View> {
 
 //name: Monomer Manager Tree Browser
 //input: dynamic treeNode
-//input: view browseView
-export async function manageLibrariesAppTreeBrowser(treeNode: DG.TreeViewGroup, browseView: DG.BrowseView) {
+//input: dynamic browsePanel
+export async function manageLibrariesAppTreeBrowser(treeNode: DG.TreeViewGroup, browsePanel: DG.BrowsePanel) {
   const libraries = (await (await MonomerLibManager.getInstance()).getFileManager()).getValidLibraryPaths();
   libraries.forEach((libName) => {
     const nodeName = libName.endsWith('.json') ? libName.substring(0, libName.length - 5) : libName;
     const libNode = treeNode.item(nodeName);
     // eslint-disable-next-line rxjs/no-ignored-subscription, rxjs/no-async-subscribe
     libNode.onSelected.subscribe(async () => {
-      const monomerManager = await MonomerManager.getNewInstance();
-      browseView.preview = await monomerManager.getViewRoot(libName, false);
-    });
-
-    libNode.root.addEventListener('dblclick', async (e) => {
-      e.preventDefault();
-      e.stopImmediatePropagation();
       const monomerManager = await MonomerManager.getInstance();
       await monomerManager.getViewRoot(libName, true);
       monomerManager.resetCurrentRowFollowing();
@@ -1103,10 +1095,9 @@ export function addCopyMenu(cell: DG.Cell, menu: DG.Menu): void {
 //meta.demoPath: Bioinformatics | Similarity, Diversity
 //description: Sequence similarity tracking and evaluation dataset diversity
 //meta.path: /apps/Tutorials/Demo/Bioinformatics/Similarity,%20Diversity
-//meta.isDemoScript: True
 //meta.demoSkip: GROK-14320
 export async function demoBioSimilarityDiversity(): Promise<void> {
-  await demoBio01UI();
+  await demoBioSimDiv();
 }
 
 // demoBio01a
@@ -1114,10 +1105,9 @@ export async function demoBioSimilarityDiversity(): Promise<void> {
 //meta.demoPath: Bioinformatics | Sequence Space
 //description: Exploring sequence space of Macromolecules, comparison with hierarchical clustering results
 //meta.path: /apps/Tutorials/Demo/Bioinformatics/Sequence%20Space
-//meta.isDemoScript: True
 //meta.demoSkip: GROK-14320
 export async function demoBioSequenceSpace(): Promise<void> {
-  await demoBio01aUI();
+  await demoSeqSpace();
 }
 
 // demoBio01b
@@ -1125,10 +1115,9 @@ export async function demoBioSequenceSpace(): Promise<void> {
 //meta.demoPath: Bioinformatics | Activity Cliffs
 //description: Activity Cliffs analysis on Macromolecules data
 //meta.path: /apps/Tutorials/Demo/Bioinformatics/Activity%20Cliffs
-//meta.isDemoScript: True
 //meta.demoSkip: GROK-14320
 export async function demoBioActivityCliffs(): Promise<void> {
-  await demoBio01bUI();
+  await demoActivityCliffsCyclic();
 }
 
 // demoBio03
@@ -1136,21 +1125,9 @@ export async function demoBioActivityCliffs(): Promise<void> {
 //meta.demoPath: Bioinformatics | Atomic Level
 //description: Atomic level structure of Macromolecules
 //meta.path: /apps/Tutorials/Demo/Bioinformatics/Atomic%20Level
-//meta.isDemoScript: True
 //meta.demoSkip: GROK-14320
 export async function demoBioAtomicLevel(): Promise<void> {
-  await demoBio03UI();
-}
-
-// demoBio05
-//name: demoBioHelmMsaSequenceSpace
-//meta.demoPath: Bioinformatics | Helm, MSA, Sequence Space
-//description: MSA and composition analysis on Helm data
-//meta.path: /apps/Tutorials/Demo/Bioinformatics/Helm,%20MSA,%20Sequence%20Space
-//meta.isDemoScript: True
-//meta.demoSkip: GROK-14320
-export async function demoBioHelmMsaSequenceSpace(): Promise<void> {
-  await demoBio05UI();
+  await demoToAtomicLevel();
 }
 
 //name: SDF to JSON Library

package/src/tests/activity-cliffs-utils.ts

@@ -1,7 +1,7 @@
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 
-import {expect} from '@datagrok-libraries/utils/src/test';
+import {awaitCheck, expect} from '@datagrok-libraries/utils/src/test';
 import {MmDistanceFunctionsNames} from '@datagrok-libraries/ml/src/macromolecule-distance-functions';
 import {BitArrayMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
 import {BYPASS_LARGE_DATA_WARNING} from '@datagrok-libraries/ml/src/functionEditors/consts';
@@ -25,9 +25,10 @@ export async function _testActivityCliffsOpen(df: DG.DataFrame, drMethod: DimRed
   })) as DG.Viewer | undefined;
   expect(scatterPlot != null, true);
 
-  const cliffsLink = Array.from(scatterPlot!.root.children).find((el) => {
-    const classList: string[] = el.className.split(' ');
-    return ['ui-btn', 'ui-btn-ok'].every((reqClassName) => classList.includes(reqClassName));
-  });
-  expect((cliffsLink as HTMLElement).innerText.toLowerCase(), `${tgtNumberCliffs} cliffs`);
+  await awaitCheck(() => {
+    const link = Array.from(scatterPlot!.root.getElementsByClassName('scatter_plot_link'));
+    if (link.length)
+      return (link[0] as HTMLElement).innerText.toLowerCase() === `${tgtNumberCliffs} cliffs`;
+    return true;
+  }, 'incorrect cliffs link', 3000);
 }

package/src/tests/similarity-diversity-tests.ts

@@ -37,7 +37,7 @@ async function _testSimilaritySearchViewer() {
   await awaitCheck(() => getSearchViewer(moleculesView, 'Sequence Similarity Search') !== undefined,
     'Sequence Similarity Search viewer has not been created', 100);
   if (!viewer.initialized) throw new Error('The viewer is not initialized.');
-  if (!viewer.moleculeColumn) throw new Error('The viewer has not molecule column (onTableAttached).');
+  if (!viewer.targetColumn) throw new Error('The viewer has not molecule column (onTableAttached).');
   if (!viewer.beforeRender()) throw new Error('The viewer is not able to render.');
   if (!viewer.computeRequested) throw new Error('The viewer has not compute requested even.');
   if (!computeCompleted) throw new Error('The viewer has not compute completed.');
@@ -87,7 +87,7 @@ async function _testDiversitySearchViewer() {
   await awaitCheck(() => getSearchViewer(moleculesView, 'Sequence Diversity Search') !== undefined,
     'Sequence Diversity Search viewer has not been created', 100);
   if (!viewer.initialized) throw new Error('The viewer is not initialized.');
-  if (!viewer.moleculeColumn) throw new Error('The viewer has not molecule column (onTableAttached).');
+  if (!viewer.targetColumn) throw new Error('The viewer has not molecule column (onTableAttached).');
   if (!viewer.beforeRender()) throw new Error('The viewer is not able to render.');
   if (!viewer.computeRequested) throw new Error('The viewer has not compute requested even.');
   if (!computeCompleted) throw new Error('The viewer has not compute completed.');