@datagrok/bio 2.0.22 → 2.0.24

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.0.22",
+  "version": "2.0.24",
   "description": "Bio is a [package](https://datagrok.ai/help/develop/develop#packages) for the [Datagrok](https://datagrok.ai) platform",
   "repository": {
     "type": "git",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.1.1",
+    "@datagrok-libraries/bio": "^5.2.0",
     "@datagrok-libraries/chem-meta": "1.0.1",
     "@datagrok-libraries/ml": "^6.2.0",
-    "@datagrok-libraries/utils": "^1.10.1",
+    "@datagrok-libraries/utils": "^1.11.0",
     "@deck.gl/core": "^8.7.5",
     "@deck.gl/layers": "^8.7.5",
     "@luma.gl/constants": "^8.5.10",

package/src/package-test.ts

@@ -24,8 +24,9 @@ export {tests};
 //name: test
 //input: string category {optional: true}
 //input: string test {optional: true}
+//input: bool catchUnhandled {optional: true}
 //output: dataframe result
-export async function test(category: string, test: string): Promise<DG.DataFrame> {
-  const data = await runTests({category, test});
+export async function test(category: string, test: string, catchUnhandled: boolean): Promise<DG.DataFrame> {
+  const data = await runTests({category, test, catchUnhandled});
   return DG.DataFrame.fromObjects(data)!;
 }

package/src/package.ts

@@ -138,7 +138,7 @@ export function sequenceAlignment(alignType: string, alignTable: string, gap: nu
 //tags: viewer, panel
 //output: viewer result
 export function webLogoViewer() {
-  return new bio.WebLogo();
+  return new bio.WebLogoViewer();
 }
 
 //name: VdRegions
@@ -266,14 +266,14 @@ export async function toAtomicLevel(df: DG.DataFrame, macroMolecule: DG.Column):
 //input: dataframe table
 //input: column sequence { semType: Macromolecule, units: ['fasta'], alphabet: ['DNA', 'RNA', 'PT'] }
 //output: column result
-export async function multipleSequenceAlignmentAny(table: DG.DataFrame, col: DG.Column): Promise<DG.Column | null> {
+export async function multipleSequenceAlignmentAny(table: DG.DataFrame, sequence: DG.Column): Promise<DG.Column | null> {
   const func: DG.Func = DG.Func.find({package: 'Bio', name: 'multipleSequenceAlignmentAny'})[0];
 
-  if (!checkInputColumnUi(col, 'MSA', ['fasta'], ['DNA', 'RNA', 'PT']))
+  if (!checkInputColumnUi(sequence, 'MSA', ['fasta'], ['DNA', 'RNA', 'PT']))
     return null;
 
-  const unUsedName = table.columns.getUnusedName(`msa(${col.name})`);
-  const msaCol = await runKalign(col, false, unUsedName);
+  const unUsedName = table.columns.getUnusedName(`msa(${sequence.name})`);
+  const msaCol = await runKalign(sequence, false, unUsedName);
   table.columns.add(msaCol);
 
   // This call is required to enable cell renderer activation
@@ -288,8 +288,8 @@ export async function multipleSequenceAlignmentAny(table: DG.DataFrame, col: DG.
 //tags: bio, panel
 //input: column sequence { semType: Macromolecule }
 //output: column result
-export async function panelMSA(col: DG.Column): Promise<DG.Column | null> {
-  return multipleSequenceAlignmentAny(col.dataFrame, col);
+export async function panelMSA(sequence: DG.Column): Promise<DG.Column | null> {
+  return multipleSequenceAlignmentAny(sequence.dataFrame, sequence);
 }
 
 //name: Composition Analysis
@@ -465,9 +465,9 @@ export function splitToMonomers(col: DG.Column<string>): void {
 }
 
 //name: Bio: getHelmMonomers
-//input: column col {semType: Macromolecule}
-export function getHelmMonomers(seqCol: DG.Column<string>): string[] {
-  const stats = bio.getStats(seqCol, 1, bio.splitterAsHelm);
+//input: column sequence {semType: Macromolecule}
+export function getHelmMonomers(sequence: DG.Column<string>): string[] {
+  const stats = bio.getStats(sequence, 1, bio.splitterAsHelm);
   return Object.keys(stats.freq);
 }
 

package/src/tests/WebLogo-positions-test.ts

@@ -8,7 +8,7 @@ import {after, before, category, test, expect, expectObject, delay} from '@datag
 category('WebLogo-positions', () => {
   let tvList: DG.TableView[];
   let dfList: DG.DataFrame[];
-  let currentView: DG.View;
+  let currentView: DG.ViewBase;
 
   const csvDf1 = `seq
 ATC-G-TTGC--
@@ -21,13 +21,13 @@ ATC-G-TTGC--
   before(async () => {
     tvList = [];
     dfList = [];
-    currentView = grok.shell.tv;
+    currentView = grok.shell.v;
   });
 
   after(async () => {
     dfList.forEach((df: DG.DataFrame) => { grok.shell.closeTable(df);});
     tvList.forEach((tv: DG.TableView) => tv.close());
-    currentView = grok.shell.tv;
+    grok.shell.v = currentView;
   });
 
   test('allPositions', async () => {
@@ -40,7 +40,7 @@ ATC-G-TTGC--
     seqCol.setTag(bio.TAGS.alphabet, bio.ALPHABET.DNA);
     seqCol.setTag(bio.TAGS.aligned, 'SEQ.MSA');
 
-    const wlViewer: bio.WebLogo = (await df.plot.fromType('WebLogo')) as bio.WebLogo;
+    const wlViewer: bio.WebLogoViewer = (await df.plot.fromType('WebLogo')) as bio.WebLogoViewer;
     tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
 
     tvList.push(tv);
@@ -94,8 +94,8 @@ ATC-G-TTGC--
       return i > 2;
     });
     df.filter.fireChanged();
-    const wlViewer: bio.WebLogo = (await df.plot.fromType('WebLogo',
-      {'shrinkEmptyTail': true})) as bio.WebLogo;
+    const wlViewer: bio.WebLogoViewer = (await df.plot.fromType('WebLogo',
+      {'shrinkEmptyTail': true})) as bio.WebLogoViewer;
     tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
 
     tvList.push(tv);
@@ -135,8 +135,8 @@ ATC-G-TTGC--
     seqCol.setTag(bio.TAGS.alphabet, bio.ALPHABET.DNA);
     seqCol.setTag(bio.TAGS.aligned, 'SEQ.MSA');
 
-    const wlViewer: bio.WebLogo = (await df.plot.fromType('WebLogo',
-      {'skipEmptyPositions': true})) as bio.WebLogo;
+    const wlViewer: bio.WebLogoViewer = (await df.plot.fromType('WebLogo',
+      {'skipEmptyPositions': true})) as bio.WebLogoViewer;
     tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
 
     tvList.push(tv);

package/src/tests/WebLogo-test.ts

@@ -4,11 +4,6 @@ import * as DG from 'datagrok-api/dg';
 import * as bio from '@datagrok-libraries/bio';
 
 import {after, before, category, test, expect, expectObject} from '@datagrok-libraries/utils/src/test';
-import {Nucleotides, NucleotidesPalettes} from '@datagrok-libraries/bio/src/nucleotides';
-import {Aminoacids, AminoacidsPalettes} from '@datagrok-libraries/bio/src/aminoacids';
-import {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
-import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
-import {UnknownSeqPalette} from '@datagrok-libraries/bio/src/unknown';
 
 category('WebLogo', () => {
   const csvDfN1: string = `seq
@@ -102,7 +97,7 @@ export async function _testGetAlphabetSimilarity() {
     'T': 2048,
     '-': 1000
   };
-  const alphabet: Set<string> = new Set(Object.keys(Nucleotides.Names));
+  const alphabet: Set<string> = new Set(Object.keys(bio.Nucleotides.Names));
   const res = bio.getAlphabetSimilarity(freq, alphabet);
 
   expect(res > 0.6, true);
@@ -113,7 +108,7 @@ export async function _testPickupPaletteN1(csvDfN1: string) {
   const col: DG.Column = df.col('seq')!;
   const cp = bio.pickUpPalette(col);
 
-  expect(cp instanceof NucleotidesPalettes, true);
+  expect(cp instanceof bio.NucleotidesPalettes, true);
 }
 
 export async function _testPickupPaletteN1e(csvDfN1e: string) {
@@ -121,7 +116,7 @@ export async function _testPickupPaletteN1e(csvDfN1e: string) {
   const col: DG.Column = df.col('seq')!;
   const cp = bio.pickUpPalette(col);
 
-  expect(cp instanceof NucleotidesPalettes, true);
+  expect(cp instanceof bio.NucleotidesPalettes, true);
 }
 
 export async function _testPickupPaletteAA1(csvDfAA1: string) {
@@ -129,7 +124,7 @@ export async function _testPickupPaletteAA1(csvDfAA1: string) {
   const col: DG.Column = df.col('seq')!;
   const cp = bio.pickUpPalette(col);
 
-  expect(cp instanceof AminoacidsPalettes, true);
+  expect(cp instanceof bio.AminoacidsPalettes, true);
 }
 
 export async function _testPickupPaletteX(csvDfX: string) {
@@ -137,13 +132,13 @@ export async function _testPickupPaletteX(csvDfX: string) {
   const col: DG.Column = df.col('seq')!;
   const cp = bio.pickUpPalette(col);
 
-  expect(cp instanceof UnknownSeqPalette, true);
+  expect(cp instanceof bio.UnknownSeqPalette, true);
 }
 
 export async function _testPickupPaletteAA2(dfAA2: DG.DataFrame) {
   const seqCol: DG.Column = dfAA2.col('seq')!;
   const cp = bio.pickUpPalette(seqCol);
 
-  expect(cp instanceof AminoacidsPalettes, true);
+  expect(cp instanceof bio.AminoacidsPalettes, true);
 }
 

package/src/viewers/vd-regions-viewer.ts

@@ -50,6 +50,7 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
 
   public skipEmptyPositions: boolean;
   public positionWidth: number;
+  public positionHeight: string;
 
 
   public get df(): DG.DataFrame {
@@ -77,6 +78,8 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
 
     this.skipEmptyPositions = this.bool('skipEmptyPositions', false);
     this.positionWidth = this.float('positionWidth', 16);
+    this.positionHeight = this.string('positionHeight', bio.PositionHeight.Entropy,
+      {choices: Object.keys(bio.PositionHeight)});
   }
 
   public async init() {
@@ -139,6 +142,11 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
         await this.destroyView();
         await this.buildView();
         break;
+
+      case 'positionHeight':
+        await this.destroyView();
+        await this.buildView();
+        break;
       }
     }
   }
@@ -172,7 +180,7 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
   //#region -- View --
   private host: HTMLElement | null = null;
   private mainLayout: HTMLTableElement | null = null;
-  private logos: { [chain: string]: bio.WebLogo }[] = [];
+  private logos: { [chain: string]: bio.WebLogoViewer }[] = [];
 
   private async destroyView(): Promise<void> {
     // TODO: Unsubscribe from and remove all view elements
@@ -199,7 +207,7 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
     this.logos = [];
 
     for (let orderI = 0; orderI < orderList.length; orderI++) {
-      const regionChains: { [chain: string]: bio.WebLogo } = {};
+      const regionChains: { [chain: string]: bio.WebLogoViewer } = {};
       for (const chain of this.chains) {
         const region: bio.VdRegion | undefined = regionsFiltered
           .find((r) => r.order == orderList[orderI] && r.chain == chain);
@@ -210,7 +218,8 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
           fixWidth: true,
           skipEmptyPositions: this.skipEmptyPositions,
           positionWidth: this.positionWidth,
-        })) as unknown as bio.WebLogo;
+          positionHeight: this.positionHeight,
+        })) as unknown as bio.WebLogoViewer;
       }
       // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos
       this.logos[orderI] = regionChains;
@@ -235,7 +244,7 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
           })] : []),
           // List with controls for regions
           ...[...Array(orderList.length).keys()].map((orderI) => {
-            const wl: bio.WebLogo = this.logos[orderI][chain];
+            const wl: bio.WebLogoViewer = this.logos[orderI][chain];
             wl.root.style.height = '100%';
 
             const resDiv = ui.div([wl.root]/*`${chain} ${regionsFiltered[rI]}`*/, {

package/src/widgets/bio-substructure-filter.ts

@@ -183,20 +183,18 @@ class SeparatorFilter extends FastaFilter {
 
 class HelmFilter extends BioFilterBase {
   helmEditor: any;
-  _filterPanel = ui.div('', {style: {width: '100px', height: '100px'}});
+  _filterPanel = ui.div('', {style: {cursor: 'pointer'}});
   helmSubstructure = '';
-  editDiv = ui.divText('Click to edit', {style: {cursor: 'pointer'}});
 
   constructor() {
     super();
     this.init();
-    ui.setUpdateIndicator(this._filterPanel, true);
   }
 
   async init() {
     this.helmEditor = await grok.functions.call('HELM:helmWebEditor');
-    updateDivInnerHTML(this._filterPanel, this.editDiv);
-    ui.setUpdateIndicator(this._filterPanel, false);
+    await ui.tools.waitForElementInDom(this._filterPanel);
+    this.updateFilterPanel();
     this._filterPanel.addEventListener('click', (event: MouseEvent) => {
       //@ts-ignore
       ui.dialog({showHeader: false, showFooter: true})
@@ -204,14 +202,16 @@ class HelmFilter extends BioFilterBase {
         .onOK(() => {
           const helmString = this.helmEditor
             .webEditor.canvas.getHelm(true).replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
-          if (helmString) {
-            updateDivInnerHTML(this._filterPanel, this.helmEditor.host);
-            this.helmEditor.editor.setHelm(helmString);
-          } else { updateDivInnerHTML(this._filterPanel, this.editDiv); }
+          this.updateFilterPanel(helmString);
           this.helmSubstructure = helmString;
           this.onChanged.next();
         }).show({modal: true, fullScreen: true});
     });
+    ui.onSizeChanged(this._filterPanel).subscribe((_) => {
+      const helmString = this.helmEditor
+        .webEditor.canvas.getHelm(true).replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
+      this.updateFilterPanel(helmString);
+    });
   }
 
   get filterPanel() {
@@ -225,4 +225,26 @@ class HelmFilter extends BioFilterBase {
   set substructure(s: string) {
     this.helmEditor.editor.setHelm(s);
   }
+
+  updateFilterPanel(helmString?: string) {
+    const width = this._filterPanel.parentElement!.clientWidth < 100 ? 100 :
+      this._filterPanel.parentElement!.clientWidth;
+    const height = width / 2;
+    if (!helmString) {
+      const editDivStyle = {style: {
+        width: `${width}px`,
+        height: `${height/2}px`,
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        lineHeight: `${height/2}px`,
+        border: '1px solid #dbdcdf'
+      }};
+      const editDiv = ui.divText('Click to edit', editDivStyle);
+      updateDivInnerHTML(this._filterPanel, editDiv);
+    } else {
+      updateDivInnerHTML(this._filterPanel, this.helmEditor.host);
+      this.helmEditor.editor.setHelm(helmString);
+      this.helmEditor.resizeEditor(width, height);
+    }
+  }
 }