@datagrok/bio 2.6.0 → 2.7.0

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.6.0",
+  "version": "2.7.0",
   "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",
@@ -18,11 +18,17 @@
       "propertyType": "int",
       "defaultValue": 3,
       "nullable": false
+    },
+    {
+      "name": "TooltipWebLogo",
+      "propertyType": "bool",
+      "defaultValue": "true",
+      "nullable": false
     }
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.33.0",
+    "@datagrok-libraries/bio": "^5.33.2",
     "@datagrok-libraries/chem-meta": "^1.0.1",
     "@datagrok-libraries/ml": "^6.3.39",
     "@datagrok-libraries/tutorials": "^1.3.2",

package/src/package-types.ts

@@ -8,6 +8,7 @@ import {ObjectPropertyBag} from 'datagrok-api/dg';
 /** Names of package properties/settings declared in properties section of {@link './package.json'} */
 export const enum BioPackagePropertiesNames {
   MaxMonomerLength = 'MaxMonomerLength',
+  TooltipWebLogo = 'TooltipWebLogo',
 }
 
 
@@ -26,6 +27,15 @@ export class BioPackageProperties extends Map<string, any> {
     this._onPropertyChanged.next(BioPackagePropertiesNames.MaxMonomerLength);
   }
 
+  public get tooltipWebLogo(): boolean {
+    return super.get(BioPackagePropertiesNames.TooltipWebLogo) as unknown as boolean;
+  }
+
+  public set tooltipWebLogo(value: boolean) {
+    super.set(BioPackagePropertiesNames.TooltipWebLogo, value as unknown as boolean);
+    this._onPropertyChanged.next(BioPackagePropertiesNames.TooltipWebLogo);
+  }
+
   constructor(source: any) {
     super(Object.entries(source));
   }

package/src/package.ts

@@ -33,7 +33,13 @@ import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {WebLogoViewer} from './viewers/web-logo-viewer';
 import {createJsonMonomerLibFromSdf, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
-import {MonomerLibHelper, getUserLibSettings, setUserLibSetting, getLibFileNameList} from './utils/monomer-lib';
+import {
+  MonomerLibHelper,
+  getUserLibSettings,
+  setUserLibSetting,
+  getLibFileNameList,
+  getLibraryPanelUI
+} from './utils/monomer-lib';
 import {getMacromoleculeColumn} from './utils/ui-utils';
 import {DimReductionMethods, ITSNEOptions, IUMAPOptions} from '@datagrok-libraries/ml/src/reduce-dimensionality';
 import {SequenceSpaceFunctionEditor} from '@datagrok-libraries/ml/src/functionEditors/seq-space-editor';
@@ -55,9 +61,9 @@ import {splitToMonomersUI} from './utils/split-to-monomers';
 import {MonomerCellRenderer} from './utils/monomer-cell-renderer';
 import {BioPackage, BioPackageProperties} from './package-types';
 import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
-import {ObjectPropertyBag} from 'datagrok-api/dg';
 import {PackageSettingsEditorWidget} from './widgets/package-settings-editor-widget';
 import {getCompositionAnalysisWidget} from './widgets/composition-analysis-widget';
+import {MacromoleculeColumnWidget} from './utils/macromolecule-column-widget';
 
 export const _package = new BioPackage();
 
@@ -126,17 +132,14 @@ export async function initBio() {
 //tags: tooltip
 //input: column col {semType: Macromolecule}
 //output: widget result
-export async function sequenceTooltip(col: DG.Column): Promise<DG.Widget<any>> {
-  const tv = grok.shell.tv;
-  const viewer = await tv.dataFrame.plot.fromType('WebLogo', {
-    sequenceColumnName: col.name,
-    backgroundColor: 0xFFfdffe5,
-    fitArea: false,
-    positionHeight: 'Entropy',
-    fixWidth: true,
-  });
-  viewer.root.style.height = '50px';
-  return viewer;
+export function sequenceTooltip(col: DG.Column): DG.Widget<any> {
+  const resWidget = new MacromoleculeColumnWidget(col);
+  const _resPromise = resWidget.init().then(() => { })
+    .catch((err: any) => {
+      const errMsg = err instanceof Error ? err.message : err.toString();
+      grok.shell.error(errMsg);
+    });
+  return resWidget;
 }
 
 //name: getBioLib
@@ -145,46 +148,12 @@ export function getBioLib(): IMonomerLib {
   return MonomerLibHelper.instance.getBioLib();
 }
 
-//name: manageFiles
-export async function manageFiles() {
-  const a = ui.dialog({title: 'Manage files'})
-    //@ts-ignore
-    .add(ui.fileBrowser({path: 'System:AppData/Bio/libraries'}).root)
-    .addButton('OK', () => a.close())
-    .show();
-}
-
 //name: Manage Libraries
 //input: column seqColumn {semType: Macromolecule}
 //tags: panel, exclude-actions-panel
 //output: widget result
 export async function libraryPanel(_seqColumn: DG.Column): Promise<DG.Widget> {
-  //@ts-ignore
-  const filesButton: HTMLButtonElement = ui.button('Manage', manageFiles);
-  const inputsForm: HTMLDivElement = ui.inputs([]);
-  const libFileNameList: string[] = await getLibFileNameList();
-
-  let userStoragePromise: Promise<void> = Promise.resolve();
-  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);
-          await MonomerLibHelper.instance.loadLibraries(true); // from libraryPanel()
-          grok.shell.info('Monomer library user settings saved.');
-        });
-      });
-    inputsForm.append(libInput.root);
-  }
-  return new DG.Widget(ui.divV([inputsForm, ui.div(filesButton)]));
+  return getLibraryPanelUI();
 }
 
 // -- Package settings editor --
@@ -614,6 +583,7 @@ export function importFasta(fileContent: string): DG.DataFrame [] {
   const ffh = new FastaFileHandler(fileContent);
   return ffh.importFasta();
 }
+
 //name: importBam
 //description: Opens Bam file
 //tags: file-handler

package/src/utils/cell-renderer.ts

@@ -88,11 +88,16 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     if (left !== null && left < seqMonList.length) {
       const monomerSymbol: string = seqMonList[left];
       const tooltipElements: HTMLElement[] = [ui.div(monomerSymbol)];
-      const monomer = seqColTemp.getMonomer(monomerSymbol);
-      if (monomer) {
-        const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
-        const monomerSVG = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
-        tooltipElements.push(monomerSVG);
+      if (seqColTemp._monomerStructureMap[monomerSymbol]) {
+        tooltipElements.push(seqColTemp._monomerStructureMap[monomerSymbol]);
+      } else {
+        const monomer = seqColTemp.getMonomer(monomerSymbol);
+        if (monomer) {
+          const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+          const monomerSVG = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
+          tooltipElements.push(monomerSVG);
+          seqColTemp._monomerStructureMap[monomerSymbol] = monomerSVG;
+        }
       }
       ui.tooltip.show(ui.divV(tooltipElements), e.x + 16, e.y + 16);
     } else {
@@ -122,7 +127,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
     // TODO: Store temp data to GridColumn
     // Now the renderer requires data frame table Column underlying GridColumn
-    const view = gridCell.grid.view;
+    const grid = gridCell.grid;
     const tableCol: DG.Column = gridCell.cell.column;
     const tableColTemp: TempType = tableCol.temp;
 
@@ -135,7 +140,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
     let seqColTemp: MonomerPlacer = tableCol.temp[tempTAGS.bioSeqCol];
     if (!seqColTemp) {
-      seqColTemp = new MonomerPlacer(view, tableCol,
+      seqColTemp = new MonomerPlacer(grid, tableCol,
         () => {
           const uh = UnitsHandler.getOrCreate(tableCol);
           return {
@@ -236,7 +241,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
         /*x1 = */
         printLeftOrCentered(x + this.padding, y, w, h,
           g, amino, color, 0, true, 1.0, separator, last, drawStyle,
-          maxLengthWordsSum, index, gridCell, referenceSequence, maxLengthOfMonomer);
+          maxLengthWordsSum, index, gridCell, referenceSequence, maxLengthOfMonomer, seqColTemp._monomerLengthMap);
         if (minDistanceRenderer > w) break;
       }
     } catch (err: any) {

package/src/utils/macromolecule-column-widget.ts

@@ -0,0 +1,47 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {TAGS as wlTAGS} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {WebLogoViewer} from '../viewers/web-logo-viewer';
+
+import {_package} from '../package';
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+
+/** Used in Macromolecule column tooltip */
+export class MacromoleculeColumnWidget extends DG.Widget {
+  private viewed: boolean = false;
+
+  private seqCol: DG.Column<string>;
+
+  private wlViewer: WebLogoViewer;
+
+  constructor(seqCol: DG.Column<string>) {
+    super(ui.divV([]));
+
+    this.seqCol = seqCol;
+  }
+
+  async init(): Promise<void> {
+    const uh = UnitsHandler.getOrCreate(this.seqCol);
+    const pkgTooltipWebLogo = _package.properties.tooltipWebLogo;
+    const colTooltipWebLogo = this.seqCol.getTag(wlTAGS.tooltipWebLogo);
+
+    if (pkgTooltipWebLogo !== false && !['false', 'off', 'disable', 'disabled'].includes(colTooltipWebLogo)) {
+      this.wlViewer = await this.seqCol.dataFrame.plot.fromType('WebLogo', {
+        sequenceColumnName: this.seqCol.name,
+        backgroundColor: 0x00000000,
+        positionHeight: 'Entropy',
+        positionWidth: (uh.getAlphabetIsMultichar() ? 24 : 16),
+        fixWidth: true,
+        fitArea: false,
+        // maxHeight: 100,
+        // minHeight: 25,
+      }) as unknown as WebLogoViewer;
+      this.wlViewer.root.style.height = `50px`;
+
+      this.root.appendChild(this.wlViewer.root);
+      this.root.style.width = '100%';
+    }
+  }
+}

package/src/utils/monomer-lib.ts

@@ -1,14 +1,16 @@
-// import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
 
 import {Observable, Subject} from 'rxjs';
+
 import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types/index';
 import {
   createJsonMonomerLibFromSdf,
   IMonomerLibHelper,
 } from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 import {HELM_REQUIRED_FIELDS as REQ, HELM_OPTIONAL_FIELDS as OPT} from '@datagrok-libraries/bio/src/utils/const';
+
 import {_package} from '../package';
 
 const _HELM_REQUIRED_FIELDS_ARRAY = [
@@ -51,6 +53,43 @@ export async function setUserLibSetting(value: LibSettings): Promise<void> {
   await grok.dapi.userDataStorage.postValue(LIB_STORAGE_NAME, 'Settings', JSON.stringify(value), true);
 }
 
+export async function manageFiles() {
+  const a = ui.dialog({title: 'Manage files'})
+    //@ts-ignore
+    .add(ui.fileBrowser({path: 'System:AppData/Bio/libraries'}).root)
+    .addButton('OK', () => a.close())
+    .show();
+}
+
+export async function getLibraryPanelUI(): Promise<DG.Widget> {
+  //@ts-ignore
+  const filesButton: HTMLButtonElement = ui.button('Manage', manageFiles);
+  const inputsForm: HTMLDivElement = ui.inputs([]);
+  const libFileNameList: string[] = await getLibFileNameList();
+
+  let userStoragePromise: Promise<void> = Promise.resolve();
+  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);
+          await MonomerLibHelper.instance.loadLibraries(true); // from libraryPanel()
+          grok.shell.info('Monomer library user settings saved.');
+        });
+      });
+    inputsForm.append(libInput.root);
+  }
+  return new DG.Widget(ui.divV([inputsForm, ui.div(filesButton)]));
+}
+
 export class MonomerLib implements IMonomerLib {
   public readonly error: string | undefined;
 

package/src/viewers/web-logo-viewer.ts

@@ -26,6 +26,7 @@ import {
   WebLogoPropsDefault,
 } from '@datagrok-libraries/bio/src/viewers/web-logo';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
+import {intToHtmlA} from '@datagrok-libraries/utils/src/color';
 
 import {_package} from '../package';
 
@@ -155,6 +156,7 @@ export class PositionInfo {
     jPos: number, absoluteMaxHeight: number, heightMode: PositionHeight, alphabetSizeLog: number,
     positionWidthWithMargin: number, positionWidth: number, r: number, axisHeight: number
   ): void {
+    const dpr = window.devicePixelRatio;
     // const rowCount = this.positions[jPos].rowCount;
     // const alphabetSize = this.getAlphabetSize();
     // if ((this.positionHeight == PositionHeight.Entropy) && (alphabetSize == null))
@@ -207,7 +209,7 @@ export class PositionInfo {
       // const m: string = entry[0];
       const h: number = maxHeight * pmInfo.count / this.rowCount;
 
-      pmInfo.bounds = new DG.Rect(jPos * positionWidthWithMargin, y, positionWidth, h);
+      pmInfo.bounds = new DG.Rect(jPos * dpr * positionWidthWithMargin, y, positionWidth * dpr, h);
       y += h;
     }
   }
@@ -755,9 +757,9 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
   // -- Routines --
 
-  getMonomer(p: DG.Point): [number, string | null, PositionMonomerInfo | null] {
-    const calculatedX = p.x + this.firstVisibleIndex * this.positionWidthWithMargin;
-    const jPos = Math.floor(p.x / this.positionWidthWithMargin + this.firstVisibleIndex);
+  getMonomer(p: DG.Point, dpr: number): [number, string | null, PositionMonomerInfo | null] {
+    const calculatedX = p.x + this.firstVisibleIndex * this.positionWidthWithMargin * dpr;
+    const jPos = Math.floor(p.x / (this.positionWidthWithMargin * dpr) + this.firstVisibleIndex);
     const position: PositionInfo = this.positions[jPos];
 
     if (position === undefined)
@@ -887,7 +889,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
       const length: number = this.Length;
       g.resetTransform();
-      g.fillStyle = DG.Color.toHtml(this.backgroundColor);
+      g.fillStyle = intToHtmlA(this.backgroundColor);
       g.fillRect(0, 0, this.canvas.width, this.canvas.height);
       g.textBaseline = this.textBaseline;
 
@@ -902,14 +904,15 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       g.textAlign = 'center';
       g.font = `${positionFontSize.toFixed(1)}px Roboto, Roboto Local, sans-serif`;
       const posNameMaxWidth = Math.max(...this.positions.map((pos) => g.measureText(pos.name).width));
-      const hScale = posNameMaxWidth < (this._positionWidth - 2) ? 1 : (this._positionWidth - 2) / posNameMaxWidth;
+      const hScale = posNameMaxWidth < (this._positionWidth * dpr - 2) ? 1 :
+        (this._positionWidth * dpr - 2) / posNameMaxWidth;
 
       for (let jPos = this.firstVisibleIndex; jPos < lastVisibleIndex; jPos++) {
         const pos: PositionInfo = this.positions[jPos];
         g.resetTransform();
         g.setTransform(
           hScale, 0, 0, 1,
-          jPos * this.positionWidthWithMargin + this._positionWidth / 2 -
+          jPos * this.positionWidthWithMargin * dpr + this._positionWidth * dpr / 2 -
           this.positionWidthWithMargin * firstVisibleIndex, 0);
         g.fillText(pos.label, 0, 0);
       }
@@ -1097,12 +1100,12 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   }
 
   private canvasOnMouseMove(e: MouseEvent) {
+    const dpr = window.devicePixelRatio;
     try {
       const args = e as MouseEvent;
 
-      const dpr: number = window.devicePixelRatio;
       const cursorP: DG.Point = this.canvas.getCursorPosition(args, dpr);
-      const [jPos, monomer] = this.getMonomer(cursorP);
+      const [jPos, monomer] = this.getMonomer(cursorP, dpr);
       // if (jPos != undefined && monomer == undefined) {
       //   const preEl = ui.element('pre');
       //   preEl.innerHTML = jPos < this.positions.length ?
@@ -1133,8 +1136,8 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   private canvasOnMouseDown(e: MouseEvent): void {
     try {
       const args = e as MouseEvent;
-      const r: number = window.devicePixelRatio;
-      const [jPos, monomer] = this.getMonomer(this.canvas.getCursorPosition(args, r));
+      const dpr: number = window.devicePixelRatio;
+      const [jPos, monomer] = this.getMonomer(this.canvas.getCursorPosition(args, dpr), dpr);
 
       // prevents deselect all rows if we miss monomer bounds
       if (this.dataFrame && this.seqCol && this.unitsHandler && monomer) {

package/src/widgets/package-settings-editor-widget.ts

@@ -5,6 +5,7 @@ import {_package} from '../package';
 
 export class PackageSettingsEditorWidget extends DG.Widget {
   maxMonomerLengthProp: DG.Property;
+  tooltipWebLogo: DG.Property;
 
   constructor(propList: DG.Property[]) {
     super(ui.div([], {}));
@@ -13,6 +14,7 @@ export class PackageSettingsEditorWidget extends DG.Widget {
       Object.assign({}, ...propList.map((p) => ({[p.name]: p})));
 
     this.maxMonomerLengthProp = props['MaxMonomerLength'];
+    this.tooltipWebLogo = props['TooltipWebLogo'];
   }
 
   async init(): Promise<void> {
@@ -23,6 +25,14 @@ export class PackageSettingsEditorWidget extends DG.Widget {
         _package.properties.maxMonomerLength = value;
       });
 
-    this.root.appendChild(ui.form([maxMonomerLengthInput,]));
+    const tooltipWebLogo = ui.boolInput('Tooltip WebLogo',
+      _package.properties.tooltipWebLogo,
+      (value: boolean) => {
+        _package.properties.tooltipWebLogo = value;
+      });
+
+    this.root.appendChild(ui.form([
+      maxMonomerLengthInput,
+      tooltipWebLogo]));
   }
 }