@datagrok/bio 2.7.0 → 2.7.2

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.7.0",
+  "version": "2.7.2",
   "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",
@@ -53,9 +53,9 @@
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.2.5",
     "typescript": "^4.8.4",
-    "webpack": "^5.76.0",
+    "webpack": "^5.76.3",
     "webpack-bundle-analyzer": "latest",
-    "webpack-cli": "^4.6.0",
+    "webpack-cli": "^4.9.1",
     "@datagrok/chem": "1.4.21",
     "@datagrok/helm": "2.1.7"
   },

package/src/package.ts

@@ -262,7 +262,7 @@ export function SeqActivityCliffsEditor(call: DG.FuncCall) {
     .show();
 }
 
-//top-menu: Bio | SAR | Activity Cliffs...
+//top-menu: Bio | Analyze | Activity Cliffs...
 //name: Sequence Activity Cliffs
 //description: detect activity cliffs
 //input: dataframe table [Input data table]
@@ -356,7 +356,7 @@ export function SequenceSpaceEditor(call: DG.FuncCall) {
     .show();
 }
 
-//top-menu: Bio | Structure | Sequence Space...
+//top-menu: Bio | Analyze | Sequence Space...
 //name: Sequence Space
 //input: dataframe table
 //input: column molecules { semType: Macromolecule }
@@ -454,7 +454,7 @@ export async function sequenceSpaceTopMenu(
   } */
 };
 
-//top-menu: Bio | Atomic Level | To Atomic Level...
+//top-menu: Bio | Convert | To Atomic Level...
 //name: To Atomic Level
 //description: returns molfiles for each monomer from HELM library
 //input: dataframe df [Input data table]
@@ -477,8 +477,8 @@ export async function toAtomicLevel(df: DG.DataFrame, macroMolecule: DG.Column):
     grok.shell.warning(ui.list(atomicLevelRes.warnings));
 }
 
-//top-menu: Bio | Alignment | MSA...
-//name: MSA...
+//top-menu: Bio | Analyze | MSA...
+//name: MSA
 //tags: bio, panel
 export function multipleSequenceAlignmentDialog(): void {
   multipleSequenceAlignmentUI();
@@ -495,7 +495,7 @@ export async function alignSequences(sequenceCol: DG.Column<string> | null = nul
   return multipleSequenceAlignmentUI({col: sequenceCol, clustersCol});
 }
 
-//top-menu: Bio | Structure | Composition Analysis
+//top-menu: Bio | Analyze | Composition
 //name: Composition Analysis
 //meta.icon: files/icons/composition-analysis.svg
 //output: viewer result
@@ -554,7 +554,7 @@ export async function compositionAnalysis(): Promise<void> {
   await handler(col);
 }
 
-//top-menu: Bio | Atomic Level | SDF to JSON Library...
+//top-menu: Bio | Convert | SDF to JSON Library...
 //name: SDF to JSON Library
 //input: dataframe table
 export async function sdfToJsonLib(table: DG.DataFrame) {
@@ -595,7 +595,7 @@ export function importBam(fileContent: string): DG.DataFrame [] {
   return [];
 }
 
-//top-menu: Bio | Convert...
+//top-menu: Bio | Convert | Notation...
 //name: convertDialog
 export function convertDialog() {
   const col = getMacromoleculeColumn();
@@ -675,7 +675,7 @@ export function SplitToMonomersEditor(call: DG.FuncCall): void {
     .show();
 }
 
-//top-menu: Bio | Split to Monomers
+//top-menu: Bio | Convert | Split to Monomers...
 //name: Split to Monomers
 //input: dataframe table
 //input: column sequence { semType: Macromolecule }
@@ -702,7 +702,7 @@ export function similaritySearchViewer(): SequenceSimilarityViewer {
   return new SequenceSimilarityViewer();
 }
 
-//top-menu: Bio | Search | Similarity Search
+//top-menu: Bio | Search | Similarity
 //name: similaritySearch
 //description: finds the most similar sequence
 //output: viewer result
@@ -720,7 +720,7 @@ export function diversitySearchViewer(): SequenceDiversityViewer {
   return new SequenceDiversityViewer();
 }
 
-//top-menu: Bio | Search | Diversity Search
+//top-menu: Bio | Search | Diversity
 //name: diversitySearch
 //description: finds the most diverse molecules
 //output: viewer result
@@ -730,7 +730,7 @@ export function diversitySearchTopMenu() {
   view.dockManager.dock(viewer, 'down');
 }
 
-//top-menu: Bio | Structure | Substructure Search ...
+//top-menu: Bio | Search | Substructure...
 //name: bioSubstructureSearch
 export function bioSubstructureSearch(): void {
   const col = getMacromoleculeColumn();

package/src/substructure-search/substructure-search.ts

@@ -105,6 +105,7 @@ export async function helmSubstructureSearch(substructure: string, col: DG.Colum
   if (col.version !== col.temp[MONOMERIC_COL_TAGS.LAST_INVALIDATED_VERSION])
     await invalidateMols(col, true);
   const substructureCol: DG.Column<string> = DG.Column.string('helm', 1).init((_i) => substructure);
+  substructureCol.semType = DG.SEMTYPE.MACROMOLECULE;
   substructureCol.setTag(DG.TAGS.UNITS, NOTATION.HELM);
   const substructureMolsCol =
     await getMonomericMols(substructureCol, true, col.temp[MONOMERIC_COL_TAGS.MONOMERS_DICT]);

package/src/tests/monomer-libraries-tests.ts

@@ -5,7 +5,7 @@ import * as ui from 'datagrok-api/ui';
 import {test, after, before, category, expect} from '@datagrok-libraries/utils/src/test';
 
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
-import {LIB_STORAGE_NAME} from '../utils/monomer-lib';
+import {getLibFileNameList, getUserLibSettings, LIB_STORAGE_NAME, setUserLibSetting} from '../utils/monomer-lib';
 
 
 category('monomerLibraries', () => {
@@ -31,4 +31,17 @@ category('monomerLibraries', () => {
     const currentMonomerLib = monomerLibHelper.getBioLib();
     expect(currentMonomerLib.getPolymerTypes().length > 0, true);
   });
+
+  test('empty', async () => {
+    // exclude all monomer libraries for empty set
+    const libSettings = await getUserLibSettings();
+    const libFnList = await getLibFileNameList();
+    libSettings.exclude = libFnList;
+    await setUserLibSetting(libSettings);
+
+    await monomerLibHelper.loadLibraries(true);
+    const currentMonomerLib = monomerLibHelper.getBioLib();
+    expect(currentMonomerLib.getPolymerTypes().length === 0, true);
+    const monomerOfTypesList = currentMonomerLib.getMonomerMolsByPolymerType('PEPTIDE');
+  });
 });

package/src/utils/monomer-lib.ts

@@ -39,18 +39,28 @@ export async function getLibFileNameList(): Promise<string[]> {
   return res;
 }
 
-export async function getUserLibSettings(): Promise<LibSettings> {
-  const resStr: string = await grok.dapi.userDataStorage.getValue(LIB_STORAGE_NAME, 'Settings', true);
-  const res: LibSettings = resStr ? JSON.parse(resStr) : {exclude: []};
-
-  // Fix empty object returned in case there is no settings stored for user
-  res.exclude = res.exclude instanceof Array ? res.exclude : [];
+let userLibSettingsPromise: Promise<void> = Promise.resolve();
 
-  return res;
+export async function getUserLibSettings(): Promise<LibSettings> {
+  let res: LibSettings;
+  userLibSettingsPromise = userLibSettingsPromise.then(async () => {
+    const resStr: string = await grok.dapi.userDataStorage.getValue(LIB_STORAGE_NAME, 'Settings', true);
+    res = resStr ? JSON.parse(resStr) : {exclude: []};
+
+    // Fix empty object returned in case there is no settings stored for user
+    res.exclude = res.exclude instanceof Array ? res.exclude : [];
+    console.debug(`Bio: getUserLibSettings()\n${JSON.stringify(res, undefined, 2)}`);
+  });
+  await userLibSettingsPromise;
+  return res!;
 }
 
 export async function setUserLibSetting(value: LibSettings): Promise<void> {
-  await grok.dapi.userDataStorage.postValue(LIB_STORAGE_NAME, 'Settings', JSON.stringify(value), true);
+  userLibSettingsPromise = userLibSettingsPromise.then(async () => {
+    console.debug(`Bio: setUserLibSettings()\n${JSON.stringify(value, undefined, 2)}`);
+    await grok.dapi.userDataStorage.postValue(LIB_STORAGE_NAME, 'Settings', JSON.stringify(value), true);
+  });
+  await userLibSettingsPromise;
 }
 
 export async function manageFiles() {
@@ -67,20 +77,19 @@ export async function getLibraryPanelUI(): Promise<DG.Widget> {
   const inputsForm: HTMLDivElement = ui.inputs([]);
   const libFileNameList: string[] = await getLibFileNameList();
 
-  let userStoragePromise: Promise<void> = Promise.resolve();
+  const settings = await getUserLibSettings();
+
   for (const libFileName of libFileNameList) {
-    const settings = await getUserLibSettings();
     const libInput: DG.InputBase<boolean | null> = ui.boolInput(libFileName, !settings.exclude.includes(libFileName),
       () => {
-        userStoragePromise = userStoragePromise.then(async () => {
-          if (libInput.value == true) {
-            // Checked library remove from excluded list
-            settings.exclude = settings.exclude.filter((l) => l != libFileName);
-          } else {
-            // Unchecked library add to excluded list
-            if (!settings.exclude.includes(libFileName)) settings.exclude.push(libFileName);
-          }
-          await setUserLibSetting(settings);
+        if (libInput.value == true) {
+          // Checked library remove from excluded list
+          settings.exclude = settings.exclude.filter((l) => l != libFileName);
+        } else {
+          // Unchecked library add to excluded list
+          if (!settings.exclude.includes(libFileName)) settings.exclude.push(libFileName);
+        }
+        setUserLibSetting(settings).then(async () => {
           await MonomerLibHelper.instance.loadLibraries(true); // from libraryPanel()
           grok.shell.info('Monomer library user settings saved.');
         });
@@ -115,7 +124,7 @@ export class MonomerLib implements IMonomerLib {
   getMonomerMolsByPolymerType(polymerType: string): { [monomerSymbol: string]: string } {
     const res: { [monomerSymbol: string]: string } = {};
 
-    Object.keys(this._monomers[polymerType]).forEach((monomerSymbol) => {
+    Object.keys(this._monomers[polymerType] ?? {}).forEach((monomerSymbol) => {
       res[monomerSymbol] = this._monomers[polymerType][monomerSymbol].molfile;
     });
 
@@ -193,8 +202,9 @@ export class MonomerLibHelper implements IMonomerLibHelper {
           getLibFileNameList(),
           getUserLibSettings(),
         ]);
-        const libs: IMonomerLib[] = await Promise.all(libFileNameList
-          .filter((libFileName) => !settings.exclude.includes(libFileName))
+        const filteredLibFnList = libFileNameList
+          .filter((libFileName) => !settings.exclude.includes(libFileName));
+        const libs: IMonomerLib[] = await Promise.all(filteredLibFnList
           .map((libFileName) => {
             //TODO handle whether files are in place
             return this.readLibrary(LIB_PATH, libFileName).catch((err: any) => {

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

@@ -62,6 +62,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   // public sequenceColumnNamePostfix: string;
 
   public skipEmptyPositions: boolean;
+  /* A value of zero means autofit to the width. */
   public positionWidth: number;
   public positionHeight: PositionHeight;
 
@@ -76,7 +77,10 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     // this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
 
     this.skipEmptyPositions = this.bool('skipEmptyPositions', false);
-    this.positionWidth = this.float('positionWidth', 16);
+    this.positionWidth = this.float('positionWidth', 16, {
+      editor: 'slider', min: 0, max: 64,
+      description: 'Internal WebLogo viewers property width of position. A value of zero means autofit to the width.'
+    });
     this.positionHeight = this.string('positionHeight', PositionHeight.Entropy,
       {choices: Object.keys(PositionHeight)}) as PositionHeight;
   }
@@ -105,7 +109,6 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
 
     // this.mlbView.dockManager.dock(this.regionsFg.root, DG.DOCK_TYPE.LEFT, rootNode, 'Filter regions', 0.2);
 
-    this.subs.push(ui.onSizeChanged(this.root).subscribe(this.rootOnSizeChanged.bind(this)));
     this.subs.push(fromEvent<MouseEvent>(this.root, 'mousemove').subscribe(this.rootOnMouseMove.bind(this)));
 
     // await this.buildView('init'); // init
@@ -213,7 +216,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
 
   private async destroyView(purpose: string): Promise<void> {
     // TODO: Unsubscribe from and remove all view elements
-    console.debug(`Bio: VdRegionsViewer.destroyView( mainLayout = ${!this.mainLayout ? 'none' : 'value'} ), ` +
+    _package.logger.debug(`Bio: VdRegionsViewer.destroyView( mainLayout = ${!this.mainLayout ? 'none' : 'value'} ), ` +
       `purpose = '${purpose}'`);
     if (this.filterSourceInput) {
       //
@@ -232,7 +235,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   }
 
   private async buildView(purpose: string): Promise<void> {
-    console.debug(`Bio: VdRegionsViewer.buildView() begin, ` + `purpose = '${purpose}'`);
+    _package.logger.debug(`Bio: VdRegionsViewer.buildView() begin, ` + `purpose = '${purpose}'`);
 
     const regionsFiltered: VdRegion[] = this.regions.filter((r: VdRegion) => this.regionTypes.includes(r.type));
     const orderList: number[] = Array.from(new Set(regionsFiltered.map((r) => r.order))).sort();
@@ -252,6 +255,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
             positionWidth: this.positionWidth,
             positionHeight: this.positionHeight,
           }) as WebLogoViewer;
+          wl.onSizeChanged.subscribe(() => { this.calcSize(); });
           return [orderI, chain, wl];
         })());
       }
@@ -321,23 +325,59 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     this.root.style.overflowX = 'auto';
 
     this.calcSize();
+    this.viewSubs.push(ui.onSizeChanged(this.root).subscribe(this.rootOnSizeChanged.bind(this)));
 
-    console.debug('Bio: VdRegionsViewer.buildView() end');
+    _package.logger.debug('Bio: VdRegionsViewer.buildView() end');
   }
 
-  private calcSize() {
-    const logoHeight = (this.root.clientHeight - 54) / this.chains.length;
+  private calcSizeRequested: boolean = false;
 
-    const maxHeight: number = Math.min(logoHeight,
-      Math.max(...this.logos.map((wlDict) =>
-        Math.max(...Object.values(wlDict).map((wl) => wl.maxHeight)))),
-    );
+  private calcSize() {
+    _package.logger.debug(`Bio: VdRegionsViewer.calcSize(), start`);
+    const calcSizeInt = (): void => {
+      const dpr: number = window.devicePixelRatio;
+      const logoHeight = (this.root.clientHeight - 54) / this.chains.length;
+
+      const maxHeight: number = Math.min(logoHeight,
+        Math.max(...this.logos.map((wlDict) =>
+          Math.max(...Object.values(wlDict).map((wl) => wl.maxHeight)))),
+      );
+
+      let totalPos: number = 0;
+      for (let orderI = 0; orderI < this.logos.length; orderI++) {
+        for (const chain of this.chains)
+          this.logos[orderI][chain].root.style.height = `${maxHeight}px`;
+
+        totalPos += Math.max(...this.chains.map((chain) => this.logos[orderI][chain].Length));
+      }
 
-    for (let orderI = 0; orderI < this.logos.length; orderI++) {
-      for (let chainI = 0; chainI < this.chains.length; chainI++) {
-        const chain: string = this.chains[chainI];
-        this.logos[orderI][chain].root.style.height = `${maxHeight}px`;
+      if (this.positionWidth === 0 && this.logos.length > 0 && totalPos > 0) {
+        const leftPad = 22/* Chain label */;
+        const rightPad = 6 + 6 + 1;
+        const logoMargin = 8 + 1;
+        const fitPositionWidth =
+          (this.root.clientWidth - leftPad - (this.logos.length - 1) * logoMargin - rightPad) / totalPos * dpr;
+
+        for (let orderI = 0; orderI < this.logos.length; orderI++) {
+          for (let chainI = 0; chainI < this.chains.length; chainI++) {
+            const chain: string = this.chains[chainI];
+            this.logos[orderI][chain].setOptions({positionWidth: fitPositionWidth});
+          }
+        }
       }
+
+      if (this.positionWidth === 0)
+        this.host!.style.setProperty('overflow-x', 'hidden', 'important');
+      else
+        this.host!.style.removeProperty('overflow-x');
+    };
+
+    if (!this.calcSizeRequested) {
+      this.calcSizeRequested = true;
+      window.setTimeout(() => {
+        calcSizeInt();
+        this.calcSizeRequested = false;
+      }, 0 /* next event cycle */);
     }
   }
 

package/tsconfig.json

@@ -4,7 +4,7 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es2020",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "target": "es2020",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     "module": "es2020",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     "lib": ["ES2022", "dom"],      /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
@@ -66,8 +66,7 @@
 
     /* Advanced Options */
     "skipLibCheck": false,                          /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true,
-    /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true,       /* Disallow inconsistently-cased references to the same file. */
     //"jsx": "react"
   }
 }

package/webpack.config.js

@@ -36,7 +36,7 @@ module.exports = {
   },
   output: {
     filename: '[name].js',
-    library: 'bio',
+    library: packageName,
     libraryTarget: 'var',
     path: path.resolve(__dirname, 'dist'),
   },