@datagrok/bio 2.6.1 → 2.7.1

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.6.1",
+  "version": "2.7.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",
@@ -18,6 +18,12 @@
       "propertyType": "int",
       "defaultValue": 3,
       "nullable": false
+    },
+    {
+      "name": "TooltipWebLogo",
+      "propertyType": "bool",
+      "defaultValue": "true",
+      "nullable": false
     }
   ],
   "dependencies": {

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/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/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 = [
@@ -37,18 +39,64 @@ export async function getLibFileNameList(): Promise<string[]> {
   return res;
 }
 
+let userLibSettingsPromise: Promise<void> = Promise.resolve();
+
 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: []};
+  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!;
+}
 
-  // Fix empty object returned in case there is no settings stored for user
-  res.exclude = res.exclude instanceof Array ? res.exclude : [];
+export async function setUserLibSetting(value: LibSettings): Promise<void> {
+  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;
+}
 
-  return res;
+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 setUserLibSetting(value: LibSettings): Promise<void> {
-  await grok.dapi.userDataStorage.postValue(LIB_STORAGE_NAME, 'Settings', JSON.stringify(value), true);
+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();
+
+  const settings = await getUserLibSettings();
+
+  for (const libFileName of libFileNameList) {
+    const libInput: DG.InputBase<boolean | null> = ui.boolInput(libFileName, !settings.exclude.includes(libFileName),
+      () => {
+        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.');
+        });
+      });
+    inputsForm.append(libInput.root);
+  }
+  return new DG.Widget(ui.divV([inputsForm, ui.div(filesButton)]));
 }
 
 export class MonomerLib implements IMonomerLib {
@@ -76,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;
     });
 
@@ -154,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/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]));
   }
 }