@datagrok/helm 2.3.3 → 2.4.1

package/src/tests/helm-web-editor-tests.ts

@@ -24,14 +24,14 @@ category('helm-web-editor', async () => {
     userLibSettings = await getUserLibSettings();
     await setUserLibSettingsForTests();
     await monomerLibHelper.awaitLoaded();
-    await monomerLibHelper.loadLibraries(true);
+    await monomerLibHelper.loadMonomerLib(true);
 
     hh = await getHelmHelper();
   });
 
   after(async () => {
     await setUserLibSettings(userLibSettings);
-    await monomerLibHelper.loadLibraries(true);
+    await monomerLibHelper.loadMonomerLib(true);
   });
 
   test('helm-web-editor', async () => {

package/src/tests/parse-helm-tests.ts

@@ -11,11 +11,12 @@ import {
   getUserLibSettings, setUserLibSettings, setUserLibSettingsForTests
 } from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
 
-import {JSDraw2HelmModule} from '../types';
+import {JSDraw2Module} from '../types';
 import {initHelmMainPackage} from './utils';
+import {IHelmDrawOptions} from '@datagrok-libraries/helm-web-editor/src/types/org-helm';
 
 declare const org: OrgType;
-declare const JSDraw2: JSDraw2HelmModule;
+declare const JSDraw2: JSDraw2Module;
 
 type TestTgtType = { atomCount: number, bondCount: number };
 
@@ -47,12 +48,12 @@ category('parseHelm', () => {
     await setUserLibSettingsForTests();
     await timeout(async () => { await libHelper.awaitLoaded(); }, 5000,
       'await monomerLib to be loaded');
-    await libHelper.loadLibraries(true);
+    await libHelper.loadMonomerLib(true);
   });
 
   after(async () => {
     await setUserLibSettings(userLibSettings);
-    await libHelper.loadLibraries(true);
+    await libHelper.loadMonomerLib(true);
   });
 
   for (const [testName, {src, tgt}] of Object.entries(testData)) {
@@ -72,11 +73,11 @@ function _testParseHelmWithEditor(src: string, tgt: TestTgtType): void {
   const io = org.helm.webeditor.IO;
 
   const editorHost = ui.div();
-  const editor = new JSDraw2.Editor(editorHost, {viewonly: true});
+  const editor = new JSDraw2.Editor<HelmType, IHelmDrawOptions>(editorHost, {viewonly: true});
 
   const plugin = new org.helm.webeditor.Plugin(editor);
   const origin = new JSDraw2.Point(0, 0);
-  io.parseHelm(plugin, src, origin, null);
+  io.parseHelm(plugin, src, origin, undefined);
 
   const m: Mol<HelmType> = plugin.jsd.m;
   expect(m.atoms.length, tgt.atomCount);
@@ -86,11 +87,11 @@ function _testParseHelmWithEditor(src: string, tgt: TestTgtType): void {
 function _testParseHelmWithoutDOM(src: string, tgt: TestTgtType): void {
   const io = org.helm.webeditor.IO;
 
-  const molHandler = new JSDraw2.MolHandler();
+  const molHandler = new JSDraw2.MolHandler<HelmType>();
 
   const plugin = new org.helm.webeditor.Plugin(molHandler);
   const origin = new JSDraw2.Point(0, 0);
-  io.parseHelm(plugin, src, origin, null);
+  io.parseHelm(plugin, src, origin, undefined);
 
   const m: Mol<HelmType> = plugin.jsd.m;
   expect(m.atoms.length, tgt.atomCount);

package/src/tests/properties-widget-tests.ts

@@ -85,12 +85,12 @@ category('properties-widget', () => {
     await setUserLibSettingsForTests();
     await timeout(async () => { await monomerLibHelper.awaitLoaded(); },
       5000, 'MonomerLibHelper.awaitLoaded() timeout');
-    await monomerLibHelper.loadLibraries(true); // load default libraries
+    await monomerLibHelper.loadMonomerLib(true); // load default libraries
   });
 
   after(async () => {
     await setUserLibSettings(userLibSettings);
-    await monomerLibHelper.loadLibraries(true); // load user settings libraries
+    await monomerLibHelper.loadMonomerLib(true); // load user settings libraries
   });
 
   for (const [testName, testData] of Object.entries(TestsData)) {

package/src/tests/renderers-tests.ts

@@ -33,13 +33,13 @@ category('renderers', () => {
 
     // Test 'helm' requires default monomer library loaded
     await setUserLibSettingsForTests();
-    await monomerLibHelper.loadLibraries(true); // load default libraries
+    await monomerLibHelper.loadMonomerLib(true); // load default libraries
   });
 
   after(async () => {
     // UserDataStorage.put() replaces existing data
     await setUserLibSettings(userLibSettings);
-    await monomerLibHelper.loadLibraries(true); // load user settings libraries
+    await monomerLibHelper.loadMonomerLib(true); // load user settings libraries
   });
 
 

package/src/types/index.ts

@@ -1,5 +1,5 @@
 import {HelmType, JSDraw2ModuleType, OrgType, ScilModuleType} from '@datagrok-libraries/bio/src/helm/types';
 
 export type ScilModule = ScilModuleType;
-export type JSDraw2HelmModule = JSDraw2ModuleType<HelmType>;
+export type JSDraw2Module = JSDraw2ModuleType;
 export type OrgHelmModule = OrgType;

package/src/utils/get-hovered.ts

@@ -2,17 +2,15 @@ import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
-import {HelmType, PolymerType, Atom, Mol, ISeqMonomer} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmType, PolymerType, Atom, Mol, ISeqMonomer, HelmMol, HelmAtom} from '@datagrok-libraries/bio/src/helm/types';
 
 import {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
 
 import {HelmMonomerPlacer} from '../helm-monomer-placer';
 
 export function getHoveredMonomerFromEditorMol(
-  argsX: number, argsY: number, mol: Mol<HelmType>, cellHeight? : number
-): ISeqMonomer | null {
-  let hoveredSeqMonomer: ISeqMonomer | null = null;
-
+  argsX: number, argsY: number, mol: HelmMol, cellHeight?: number
+): HelmAtom | null {
   /** @return {[number, number]} [atom, distance] */
   function getNearest(excluded: (number | undefined)[]): [number | undefined, number | undefined] {
     let atom: number | undefined = undefined;
@@ -34,18 +32,18 @@ export function getHoveredMonomerFromEditorMol(
   const [firstAtomI, firstDistance] = getNearest([]);
   const [secondAtomI, secondDistance] = getNearest([firstAtomI]);
 
+  let resAtom: HelmAtom | null = null;
   if (firstAtomI !== undefined && firstDistance !== undefined) {
     const firstAtom = mol.atoms[firstAtomI];
-    const firstSeqMonomer = getSeqMonomerFromHelmAtom(firstAtom);
     if (secondAtomI !== undefined && secondDistance !== undefined) {
       if (firstDistance < secondDistance * 0.45)
-        hoveredSeqMonomer = firstSeqMonomer;
+        resAtom = firstAtom;
     } else {
       if (cellHeight && firstDistance < 0.35 * cellHeight)
-        hoveredSeqMonomer = firstSeqMonomer;
+        resAtom = firstAtom;
     }
   }
-  return hoveredSeqMonomer;
+  return resAtom;
 }
 
 export function getHoveredMonomerFallback(
@@ -83,7 +81,7 @@ export function getHoveredMonomerFallback(
   return hoveredSeqMonomer;
 }
 
-function getSeqMonomerFromHelmAtom(atom: Atom<HelmType>): ISeqMonomer {
+export function getSeqMonomerFromHelmAtom(atom: HelmAtom): ISeqMonomer {
   const polymerType = helmTypeToPolymerType(atom.bio!.type);
   return {symbol: atom.elem, polymerType: polymerType};
 }

package/src/utils/get-monomer.ts

@@ -11,10 +11,7 @@ import {
 } from '@datagrok-libraries/bio/src/utils/const';
 import {HelmTypes} from '@datagrok-libraries/bio/src/helm/consts';
 
-
-import {
-  AmbiguousWebEditorMonomer, GapWebEditorMonomer, getRS, MissingWebEditorMonomer
-} from './get-monomer-dummy';
+import {AmbiguousWebEditorMonomer, GapWebEditorMonomer, getRS, MissingWebEditorMonomer} from './get-monomer-dummy';
 import {LibraryWebEditorMonomer} from './get-monomer-of-library';
 import {OrgHelmModule, ScilModule} from '../types';
 import {RGROUP_CAP_GROUP_NAME, RGROUP_LABEL, SMILES} from '../constants';
@@ -59,6 +56,8 @@ export function getMonomerOverrideAndLogAlert(
 export function getMonomerHandleArgs(
   a: Atom<HelmType> | HelmType, name?: string
 ): [/** biotype */ HelmType, /** elem */ string] {
+  if (!a)
+    throw new Error(`Argument 'a' of type Atom or HelmType is mandatory.`);
   let biotype: HelmType;
   let elem: string;
   if ((a as Atom<HelmType>).T === 'ATOM') {

package/src/utils/helm-grid-cell-renderer.ts

@@ -9,54 +9,38 @@ import {
   CellRendererBackAsyncBase, RenderServiceBase
 } from '@datagrok-libraries/bio/src/utils/cell-renderer-async-base';
 import {HelmAux, HelmProps} from '@datagrok-libraries/bio/src/viewers/helm-service';
+import {_getHelmService} from '../package-utils';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
 import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
 import {getGridCellRendererBack} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
 
-import {getHoveredMonomerFromEditorMol} from './get-hovered';
-import {_getHelmService} from '../package-utils';
+import {getHoveredMonomerFromEditorMol, getSeqMonomerFromHelmAtom} from './get-hovered';
 
 import {_package} from '../package';
 
-class WrapLogger implements ILogger {
-  constructor(
-    private readonly base: ILogger
-  ) {}
-
-  error(message: any, params?: object | undefined, stackTrace?: string | undefined): void {
-    this.base.error(message, params, stackTrace);
-  }
-
-  warning(message: string, params?: object | undefined): void {
-    this.base.warning(message, params);
-  }
-
-  info(message: string, params?: object | undefined): void {
-    // this.base.info(message, params);
-  }
-
-  debug(message: string, params?: object | undefined): void {
-    // this.base.debug(message, params);
-  }
-}
-
 export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProps, HelmAux> {
   private _auxList: (HelmAux | null)[];
 
   private monomerLib: IMonomerLib | null = null;
 
+  // eslint-disable-next-line max-len
+  private readonly uuid: string = wu.repeat(1).map(() => Math.floor((Math.random() * 36)).toString(36)).take(4).toArray().join('');
+
   constructor(
     gridCol: DG.GridColumn | null,
     tableCol: DG.Column<string>,
   ) {
-    super(gridCol, tableCol, new WrapLogger(_package.logger) /* _package.logger */, true);
+    super(gridCol, tableCol, _package.logger, true);
   }
 
   protected override reset(): void {
+    const logPrefix = `${this.toLog()}.reset()`;
+    this.logger.debug(`${logPrefix}, start`);
     super.reset();
     this._auxList = new Array<HelmAux | null>(this.tableCol.length).fill(null);
     if (this.gridCol && this.gridCol.dart) this.gridCol.grid?.invalidate();
+    this.logger.debug(`${logPrefix}, end`);
   }
 
   protected override getRenderService(): RenderServiceBase<HelmProps, HelmAux> {
@@ -70,6 +54,8 @@ export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProp
   }
 
   protected override storeAux(gridCell: DG.GridCell, aux: HelmAux): void {
+    const logPrefix = `${this.toLog()}.storeAux()`;
+    this.logger.debug(`${logPrefix}, start`);
     if (gridCell.tableRowIndex !== null)
       this._auxList[gridCell.tableRowIndex] = aux;
   }
@@ -141,10 +127,10 @@ export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProp
       this.logger.warning(`${logPrefix}, editorMol of the cell not found.`);
       return; // The gridCell is not rendered yet
     }
-    const seqMonomer: ISeqMonomer | null =
-      getHoveredMonomerFromEditorMol(argsX, argsY, editorMol, gridCell.bounds.height);
+    const hoveredAtom = getHoveredMonomerFromEditorMol(argsX, argsY, editorMol, gridCell.bounds.height);
 
-    if (seqMonomer) {
+    if (hoveredAtom) {
+      const seqMonomer = getSeqMonomerFromHelmAtom(hoveredAtom);
       const monomerLib = _package.monomerLib;
       const tooltipEl = monomerLib ? monomerLib.getTooltip(seqMonomer.polymerType, seqMonomer.symbol) :
         ui.divText('Monomer library is not available');
@@ -170,7 +156,8 @@ export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProp
   // -- Handle events --
 
   private monomerLibOnChanged(_value: any): void {
-    this.reset();
+    this.dirty = true;
+    this.invalidateGrid();
   }
 
   static getOrCreate(gridCell: DG.GridCell): HelmGridCellRendererBack {

package/src/utils/helm-service.ts

@@ -5,23 +5,21 @@ import * as DG from 'datagrok-api/dg';
 import $ from 'cash-dom';
 import {Subject, Unsubscribable} from 'rxjs';
 
-import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
-import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
-import {Editor, HelmType} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmEditor} from '@datagrok-libraries/bio/src/helm/types';
 import {RenderTask} from '@datagrok-libraries/bio/src/utils/cell-renderer-async-base';
 import {HelmAux, HelmProps, HelmServiceBase} from '@datagrok-libraries/bio/src/viewers/helm-service';
 import {svgToImage} from '@datagrok-libraries/utils/src/svg';
 
-import {JSDraw2HelmModule} from '../types';
+import {JSDraw2Module} from '../types';
 
 import {_package} from '../package';
 
-declare const JSDraw2: JSDraw2HelmModule;
+declare const JSDraw2: JSDraw2Module;
 
 export class HelmService extends HelmServiceBase {
   private readonly hostDiv: HTMLDivElement;
 
-  private editor!: Editor<HelmType>;
+  private editor!: HelmEditor;
   private image: HTMLImageElement | null = null;
 
   constructor() {

package/src/widgets/helm-input.ts

@@ -3,19 +3,20 @@ import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
-import {fromEvent, Unsubscribable} from 'rxjs';
+import {fromEvent, Observable, Unsubscribable} from 'rxjs';
 
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
-import {IHelmHelper, IInputInitOptions} from '@datagrok-libraries/bio/src/helm/helm-helper';
-import {HelmMol, IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmInputBase, IHelmHelper, IHelmInputInitOptions} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {HelmAtom, HelmMol, HelmString, IHelmWebEditor} from '@datagrok-libraries/bio/src/helm/types';
 
 import {defaultErrorHandler} from '../utils/err-info';
-import {getHoveredMonomerFromEditorMol} from '../utils/get-hovered';
+import {getHoveredMonomerFromEditorMol, getSeqMonomerFromHelmAtom} from '../utils/get-hovered';
 
-import {_package} from '../package';
+import {MonomerNumberingTypes} from '@datagrok-libraries/bio/src/helm/consts';
 
+import {_package} from '../package';
 
-export class HelmInput extends DG.JsInputBase<HelmMol> {
+export class HelmInput extends HelmInputBase {
   /** Input type identifier (such as "Slider" for the slider input). See {@link InputType}. */
   get inputType(): string {
     return 'Macromolecule';
@@ -30,12 +31,12 @@ export class HelmInput extends DG.JsInputBase<HelmMol> {
     return this.viewerHost;
   }
 
-  getValue(): HelmMol {
-    return this.viewer.editor.m;
+  getValue(): HelmString {
+    return this.viewer.editor.getHelm();
   }
 
-  setValue(value: HelmMol): void {
-    this.viewer.editor.setMol(value);
+  setValue(value: HelmString): void {
+    this.viewer.editor.setHelm(value);
   }
 
   getStringValue(): string {
@@ -46,8 +47,24 @@ export class HelmInput extends DG.JsInputBase<HelmMol> {
     this.viewer.editor.setHelm(value);
   }
 
-  viewerHost: HTMLDivElement;
-  viewer: IHelmWebEditor;
+  // -- IHelmInput --
+
+  get molValue(): HelmMol {
+    return this.viewer.editor.m;
+  }
+
+  set molValue(value: HelmMol) {
+    this.viewer.editor.setMol(value);
+  }
+
+  get onMouseMove(): Observable<MouseEvent> { return fromEvent<MouseEvent>(this.viewer.host, 'mousemove'); }
+
+  get onClick(): Observable<MouseEvent> { return fromEvent<MouseEvent>(this.viewer.host, 'click'); }
+
+  readonly viewerHost: HTMLDivElement;
+  readonly viewer: IHelmWebEditor;
+  readonly editHintDiv: HTMLDivElement;
+
   helmString: string = '';
   helmSelection: number[];
 
@@ -57,6 +74,7 @@ export class HelmInput extends DG.JsInputBase<HelmMol> {
     private readonly helmHelper: IHelmHelper,
     private readonly monomerLib: IMonomerLib,
     name?: string,
+    public readonly options?: IHelmInputInitOptions,
     private readonly logger = _package.logger,
   ) {
     super();
@@ -67,18 +85,49 @@ export class HelmInput extends DG.JsInputBase<HelmMol> {
       classes: 'ui-input-editor',
       style: {width: '100%', height: '100%', overflow: 'hidden'},
     });
-    this.viewer = this.helmHelper.createHelmWebEditor(this.viewerHost);
+    this.viewer = this.helmHelper.createHelmWebEditor(this.viewerHost, {
+      monomerNumbering: MonomerNumberingTypes.continuous
+    });
+
+    this.editHintDiv = ui.divH([
+      ui.link('Click to edit', () => { this.viewer.host.click(); }, undefined, {}),
+    ], {style: {display: 'none', position: 'absolute', top: '0', right: '0'}});
 
     this.subs = [];
     this.subs.push(this.monomerLib.onChanged
       .subscribe(() => this.viewer.editor.redraw()));
-    this.subs.push(fromEvent<MouseEvent>(this.viewer.host, 'mousemove')
-      .subscribe(this.viewerOnMouseMove.bind(this)));
-    this.subs.push(fromEvent<MouseEvent>(this.viewer.host, 'click')
-      .subscribe(this.viewerOnClick.bind(this)));
+    /* eslint-disable rxjs/no-ignored-subscription */
+    fromEvent<MouseEvent>(this.viewer.host, 'mousemove')
+      .subscribe(this.viewerOnMouseMove.bind(this));
+    fromEvent<MouseEvent>(this.viewer.host, 'mouseenter')
+      .subscribe(this.viewerOnMouseEnter.bind(this));
+    fromEvent<MouseEvent>(this.viewer.host, 'mouseleave')
+      .subscribe(this.viewerOnMouseLeave.bind(this));
+    fromEvent<MouseEvent>(this.viewer.host, 'click')
+      .subscribe(this.viewerOnClick.bind(this));
+    /* eslint-enable rxjs/no-ignored-subscription */
+
+    this.subs.push(ui.onSizeChanged(this.root).subscribe(() => {
+      const rootStyle = window.getComputedStyle(this.root);
+      const h = this.root.clientHeight - parseFloat(rootStyle.paddingTop) - parseFloat(rootStyle.paddingBottom);
+      this.input.style.height = `${h}px`;
+    }));
+
+    this.subs.push(ui.onSizeChanged(this.input).subscribe(() => {
+      const rootStyle = window.getComputedStyle(this.root);
+      const h = this.root.clientHeight - parseFloat(rootStyle.paddingTop) - parseFloat(rootStyle.paddingBottom);
+      this.input.style.height = `{h}px`;
+      const w = this.input.clientWidth;
+      this.viewer.editor.setSize(w, h);
+    }));
 
     this.root.classList.add('ui-input-helm');
-    this.root.append(this.viewerHost);
+    this.root.append(this.viewerHost, this.editHintDiv);
+  }
+
+  detach(): void {
+    for (const sub of this.subs)
+      sub.unsubscribe();
   }
 
   protected toLog(): string {
@@ -86,51 +135,33 @@ export class HelmInput extends DG.JsInputBase<HelmMol> {
   }
 
   /** Inspired by {@link DG.MarkdownInput}, {@link ui._create} */
-  static create(
-    helmHelper: IHelmHelper, monomerLib: IMonomerLib, name?: string, options?: IInputInitOptions<HelmMol>
+  static create(helmHelper: IHelmHelper, monomerLib: IMonomerLib,
+    name?: string, options?: IHelmInputInitOptions
   ): HelmInput {
-    const input = new HelmInput(helmHelper, monomerLib, name);
+    const input = new HelmInput(helmHelper, monomerLib, name, options);
     // TODO: Apply options
     const value: HelmMol | string | undefined = options?.value;
     if (value !== undefined) {
       if (value instanceof String || typeof value === 'string')
         input.stringValue = value as any as string;
+      else if (typeof value === 'object' /* && value.T === 'MOL'*/)
+        input.molValue = value;
       else
-        input.value = value;
+        throw new Error(`Unsupported value of type '${typeof value}'.`);
     }
 
     return input;
   }
 
-  // static async init(host?: HTMLElement, cell?: DG.Cell): Promise<HelmInput> {
-  //   const helmHelper = await getHelmHelper();
-  //   const libHelper = await getMonomerLibHelper();
-  //
-  //   const editor = helmHelper.createHelmWebEditor();
-  //   editor.host.style.width = '270px';
-  //   editor.host.style.height = '150px';
-  //   editor.host.style.paddingLeft = '40px';
-  //
-  //   cell = cell ?? grok.shell.tv.dataFrame.currentCell;
-  //
-  //   if (cell.column.semType === DG.SEMTYPE.MACROMOLECULE && cell.column.tags[DG.TAGS.UNITS] === NOTATION.HELM)
-  //     editor.editor.setHelm(cell.value);
-  //   else
-  //     editor.editor.setHelm(PT_HELM_EXAMPLE);
-  //
-  //   return new HelmInput(helmHelper, editor, libHelper);
-  // }
-
-  setHelmString(helm: string): void {
-    this.helmString = helm;
-    this.viewer.editor.setHelm(helm);
-    this.helmSelection = [];
+  redraw(): void {
+    this.viewer.editor.redraw();
   }
 
-  getDiv(): HTMLDivElement {
-    const title = ui.divText('Macromolecule', {style: {paddingTop: '43px', color: 'var(--grey-4)'}});
-
-    return ui.divH([title, this.viewer.host], {style: {paddingLeft: '48px'}});
+  showTooltip(content: HTMLElement | string, a: HelmAtom): void {
+    /** Monomer sign offset for tooltip inspired by {@link org.helm.webeditor.drawMonomer()} */
+    const so = this.viewer.editor.getDrawOptions().fontsize * 1.2;
+    const bcr = this.input.getBoundingClientRect();
+    ui.tooltip.show(content, bcr.left + a.p.x + so, bcr.top + a.p.y + so);
   }
 
   // -- Handle events --
@@ -138,6 +169,58 @@ export class HelmInput extends DG.JsInputBase<HelmMol> {
   private viewerOnClick(_event: MouseEvent): void {
     ui.tooltip.hide();
 
+    if (this.options?.editable != false)
+      this.showEditorDialog();
+  }
+
+  private viewerOnMouseMove(event: MouseEvent): void {
+    const logPrefix = `${this.toLog()}.viewerOnMouseMove()`;
+
+    const argsX = event.offsetX;
+    const argsY = event.offsetY;
+    const mol = this.viewer.editor.m;
+    const hoveredAtom = getHoveredMonomerFromEditorMol(argsX, argsY, mol, this.viewer.editor.div.clientHeight);
+    if (hoveredAtom) {
+      const seqMonomer = getSeqMonomerFromHelmAtom(hoveredAtom);
+      const monomerLib = _package.monomerLib;
+      const tooltipEl = monomerLib ? monomerLib.getTooltip(seqMonomer.polymerType, seqMonomer.symbol) :
+        ui.divText('Monomer library is not available');
+      this.showTooltip(tooltipEl, hoveredAtom);
+      event.preventDefault();
+      event.stopPropagation();
+    } else
+      ui.tooltip.hide();
+
+    //this.logger.debug(`${logPrefix}, x = ${event.x}, y = ${event.y}`);
+  }
+
+  private viewerOnMouseEnter(_event: MouseEvent): void {
+    //this.logger.debug(`${this.toLog()}.viewerOnMouseEnter()`);
+    if (this.options?.editable != false)
+      this.showEditHint();
+  }
+
+  private viewerOnMouseLeave(event: MouseEvent): void {
+    if (this.editHintDiv.contains(event.relatedTarget as Node)) return; // prevents flickering
+
+    //this.logger.debug(`${this.toLog()}.viewerOnMouseLeave()`);
+    if (this.options?.editable != false)
+      this.hideEditHint();
+  }
+
+  // editHint
+
+  showEditHint(): void {
+    this.editHintDiv.style.removeProperty('display');
+  }
+
+  hideEditHint(): void {
+    this.editHintDiv.style.display = 'none';
+  }
+
+  // editor dialog
+
+  showEditorDialog(): void {
     const webEditorHost = ui.div();
     const webEditorApp = this.helmHelper.createWebEditorApp(webEditorHost, this.viewer.editor.getHelm());
 
@@ -146,16 +229,16 @@ export class HelmInput extends DG.JsInputBase<HelmMol> {
     };
 
     // Edit the molecule and select monomers to enumerate
-    const dlg = ui.dialog({showHeader: false, showFooter: true})
+    const _editorDialog = ui.dialog({showHeader: false, showFooter: true})
       .add(webEditorHost!)
       .onOK(() => {
         try {
-          const webEditorValue = webEditorApp.canvas!.getHelm(true)
+          const webEditorValue = webEditorApp!.canvas!.getHelm(true)
             .replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
           this.viewer.editor.setHelm(webEditorValue);
           this.helmString = webEditorValue;
 
-          const selection = webEditorApp.canvas!.helm!.jsd.m.atoms;
+          const selection = webEditorApp!.canvas!.helm!.jsd.m.atoms;
           this.helmSelection = [];
           for (let i = 0; i < selection.length; i++) {
             if (selection[i].selected)
@@ -175,24 +258,4 @@ export class HelmInput extends DG.JsInputBase<HelmMol> {
       })
       .show({modal: true, fullScreen: true});
   }
-
-  private viewerOnMouseMove(event: MouseEvent): void {
-    const logPrefix = `${this.toLog()}.viewerOnMouseMove()`;
-    const dpr = window.devicePixelRatio;
-
-    const argsX = event.offsetX;
-    const argsY = event.offsetY;
-    const mol = this.viewer.editor.m;
-    const seqMonomer = getHoveredMonomerFromEditorMol(argsX, argsY, mol, this.viewer.editor.div.clientHeight);
-    if (seqMonomer) {
-      const monomerLib = _package.monomerLib;
-      const tooltipEl = monomerLib ? monomerLib.getTooltip(seqMonomer.polymerType, seqMonomer.symbol) :
-        ui.divText('Monomer library is not available');
-      ui.tooltip.show(tooltipEl, event.x + 16, event.y + 16);
-    } else {
-      // Tooltip for missing monomers
-      ui.tooltip.hide();
-    }
-    this.logger.debug(`${logPrefix}, x = ${event.x}, y = ${event.y}`);
-  }
 }

package/src/widgets/properties-widget.ts

@@ -7,10 +7,10 @@ import $ from 'cash-dom';
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
-import {JSDraw2HelmModule} from '../types';
+import {JSDraw2Module} from '../types';
 import {removeGapsFromHelm} from '../utils';
 
-declare const JSDraw2: JSDraw2HelmModule;
+declare const JSDraw2: JSDraw2Module;
 
 export class SeqPropertiesError extends Error {
   constructor(message?: string, options?: ErrorOptions) {
@@ -47,8 +47,8 @@ export function getPropertiesDict(seq: string, sh: SeqHandler): {} {
 }
 
 
-export function getPropertiesWidget(value: DG.SemanticValue): DG.Widget {
-  const sh = SeqHandler.forColumn(value.cell.column);
+export function getPropertiesWidget(value: DG.SemanticValue<string>): DG.Widget {
+  const sh = SeqHandler.forColumn(value.cell.column as DG.Column<string>);
   try {
     const propDict = getPropertiesDict(value.value, sh);
     return new DG.Widget(

package/tsconfig.json

@@ -4,9 +4,9 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "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", "ES2022.String", "dom"],      /* Specify library files to be included in the compilation. */
+    "target": "ES2022",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "ES2022",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "lib": ["ES2022", "ES2022.String", "DOM"],      /* Specify library files to be included in the compilation. */
     "allowJs": true,                                /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */