@datagrok/helm 2.13.7 → 3.0.0

package/src/package-utils.ts

@@ -1,218 +1,26 @@
 /* eslint-disable max-len */
-import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
-import * as DG from 'datagrok-api/dg';
 
 import {Unsubscribable} from 'rxjs';
 
-import {timeout} from '@datagrok-libraries/utils/src/test';
-
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
-import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
-import {
-  DojoType, DojoxType, HweWindow, IOrgHelmWebEditor, Monomers
-} from '@datagrok-libraries/bio/src/helm/types';
-import {HelmServiceBase} from '@datagrok-libraries/bio/src/viewers/helm-service';
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types/monomer-library';
 import {LoggerWrapper} from '@datagrok-libraries/bio/src/utils/logger';
 import {IHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
-import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/types/monomer-library';
+import {IMonomerLibHelper} from '@datagrok-libraries/bio/src/types/monomer-library';
 import {ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
 
-import {HelmService} from './utils/helm-service';
-import {OrgHelmModule, ScilModule} from './types';
-import {rewriteLibraries} from './utils/get-monomer';
-
-import type {DojoWindowType} from '../helm/dojo/types';
+import * as DG from 'datagrok-api/dg';
 
 import {_package} from './package';
 
-declare const dojo: DojoType;
-declare const dojox: DojoxType;
-declare const scil: ScilModule;
-declare const org: OrgHelmModule;
-
-type DojoConfigWindowType = {
-  dojoConfig: {
-    baseUrl: string,
-    packages?: (string | { name: string, location: string })[],
-    deps?: string[], callback: Function, has?: any, parseOnLoad?: boolean, async?: boolean | string, locale?: string,
-    loaderPatch: any,
-  },
-};
-type HelmWindowType = {
-  $helmServicePromise?: Promise<HelmServiceBase>,
-  require: any,
-};
-declare const window: Window & DojoConfigWindowType & DojoWindowType & HweWindow & HelmWindowType;
-
-export async function _getHelmService(): Promise<HelmServiceBase> {
-  let res = window.$helmServicePromise;
-  if (!res)
-    res = window.$helmServicePromise = Promise.resolve(new HelmService());
-  return res;
-}
-
-export async function initHelmLoadAndPatchDojo(): Promise<void> {
-  const logPrefix = `Helm: _package.initHelmLoadAndPatchDojo()`;
-  // patch window.dojox.gfx.svg.Text.prototype.getTextWidth hangs
-  /** get the text width in pixels */
-  const pi = DG.TaskBarProgressIndicator.create('Loading Helm Web Editor ...');
-  const requireBackup = window.require;
-  //@ts-ignore
-  const defineBackup = window['define'];
-  try {
-    // Dojo modules required by JDraw2 and HELMWebEditor
-    // 'dojo.window','dojo.io.script','dojo.io.iframe','dojo.dom',
-    // 'dojox.gfx','dojox.gfx.svg','dojox.gfx.shape','dojox.charting'
-    const dojoTargetList: { name: string, checker: () => boolean }[] = [
-      {name: 'dojo.window', checker: () => !!(window.dojo?.window)},
-      {name: 'dojo.ready', checker: () => !!(window.dojo?.ready)},
-      {name: 'dojo.io.script', checker: () => !!(window.dojo?.io?.script)},
-      {name: 'dojo.io.iframe', checker: () => !!(window.dojo?.io?.iframe)},
-      // {name: 'dojo.dom', checker: () => !!(window.dojo?.dom)},
-      {name: 'dojox.gfx', checker: () => !!(window.dojox?.gfx)},
-      {name: 'dojox.gfx.svg', checker: () => !!(window.dojox?.gfx?.svg)},
-      {name: 'dojox.gfx.createSurface', checker: () => !!(window.dojox?.gfx?.createSurface)},
-      {name: 'dojox.gfx.shape', checker: () => !!(window.dojox?.gfx?.shape)},
-      {name: 'dojox.storage.Provider', checker: () => !!(window.dojox?.storage?.Provider)},
-      {name: 'dojox.storage.LocalStorageProvider', checker: () => !!(window.dojox?.storage?.LocalStorageProvider)},
-      // {name: 'dojox.charting', checker: () => !!(window.dojox.charting)},
-      // {name: 'dojox.charting.themes.Claro', checker: () => !!(window.dojox.charting?.themes?.Claro)},
-      // {name: 'dojox.charting.themes.Wetland', checker: () => !!(window.dojox.charting?.themes?.Wetland)},
-      // {name: 'dojox.charting.plot2d.Base', checker: () => !!(window.dojox.charting?.plot2d?.Base)},
-      // {name: 'dojox.charting.Series', checker: () => !!(window.dojox?.charting?.Series)},
-      // {name: 'dojox.charting.Chart2D', checker: () => !!(window.dojox?.charting?.Chart2D)},
-    ];
-    /** Gets list ofd modules not ready yet */
-    const getDojoNotReadyList = (): string[] => {
-      return dojoTargetList.filter((dt) => !dt.checker()).map((dt) => dt.name);
-    };
-
-    try {
-      // Preliminary loading BiostructureViewer package because of NGL and dojo interference
-      //await initNgl();
-
-      await timeout(async () => {
-        await new Promise<void>((resolve, reject) => {
-          window.dojoConfig = {
-            baseUrl: '/dojo',
-            callback: () => { resolve(); },
-            parseOnLoad: false,
-            async: true,
-            locale: 'en-us', // to limit dijit/nls file set
-            loaderPatch: {
-              injectUrl: (url: string, callback: any, owner: any) => {
-                const logPrefixInt = `${logPrefix} dojoConfig.loaderPatch.injectUrl()`;
-                _package.logger.debug(`${logPrefixInt}, url: ${url}`);
-                try {
-                  const bundledFn = `.${url}${window.dojo$.uncompressed}`;
-                  window.dojo$.ctx(bundledFn);
-                  callback();
-                } catch (err: any) {
-                  _package.logger.warning(`${logPrefixInt}: not loaded url: '${url}'.`);
-                }
-              },
-            },
-          };
-          // Load dojo without package/sources section for the settings dojoConfig to take effect, calleback will be called and promise resolved
-          DG.Utils.loadJsCss([
-            // 'https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js.uncompressed.js',
-            // `${_package.webRoot}/vendor/dojo-1.10.10/dojo/dojo.js.uncompressed.js`,
-            `${_package.webRoot}/dist/package-dojo.js`,
-          ]).then(() => {});
-        });
-
-        const dojoRequire = window.require;
-        const cmp = dojoRequire == requireBackup;
-        try {
-          await new Promise<void>((resolve, reject) => {
-            /* eslint-disable indent */
-            dojoRequire([
-                'dojo/window', 'dojo/dom', 'dojo/io/script', 'dojo/io/iframe',
-                'dojox/gfx', 'dojox/gfx/svg', 'dojox/gfx/shape',
-                'dojox/storage/Provider', 'dojox/storage/LocalStorageProvider',
-                'dijit/_base', 'dijit/Tooltip', 'dijit/form/_FormValueWidget',
-                'dijit/form/DropDownButton', 'dijit/layout/AccordionContainer', 'dijit/form/ComboButton',
-                'dijit/layout/StackController', 'dijit/layout/StackContainer'],
-              (...args: any[]) => { resolve(); });
-            /* eslint-enable indent */
-          });
-        } finally {
-          // TODO: Check interference with NGL
-          window.require = function(...args: any[]) {
-            _package.logger.debug(`${logPrefix}, window.require( ${JSON.stringify(args)} )`);
-            dojoRequire(...args);
-          };
-        }
-
-        /** List of dojo modules not ready yet */ let dojoNotReadyList: string[];
-        while ((dojoNotReadyList = getDojoNotReadyList()).length > 0) {
-          const dojoProgress = dojoTargetList.length - dojoNotReadyList.length;
-          pi.update(Math.round(100 * dojoProgress / dojoTargetList.length),
-            `Loading Helm Web Editor ${dojoProgress}/${dojoTargetList.length}`);
-          _package.logger.debug(`${logPrefix}, dojo loading ... ` +
-            `${dojoNotReadyList.map((m) => `'${m}'`).join(',')} ...`);
-          await DG.delay(100);
-        }
-        _package.logger.debug(`${logPrefix}, dojo ready all modules`);
-      }, 60000, 'timeout dojox.gfx.svg');
-    } catch (err: any) {
-      const dojoNotReadyList = getDojoNotReadyList();
-      _package.logger.error(`${logPrefix}, dojo not ready ${dojoNotReadyList.map((m) => `'${m}'`).join(',')} ...`);
-    }
-
-    _package.logger.debug(`${logPrefix}, patch window.dojox.gfx.svg.Text.prototype.getTextWidth`);
-    // @ts-ignore
-    window.dojox.gfx.svg.Text.prototype.getTextWidth = function() {
-      // Patched via Datagrok Helm package
-      const rawNode = this.rawNode;
-      const oldParent = rawNode.parentNode;
-      const _measurementNode = rawNode.cloneNode(true);
-      _measurementNode.style.visibility = 'hidden';
-
-      // solution to the "orphan issue" in FF
-      let _width = 0;
-      const _text = _measurementNode.firstChild.nodeValue;
-      oldParent.appendChild(_measurementNode);
-
-      // solution to the "orphan issue" in Opera
-      // (nodeValue == "" hangs firefox)
-      if (_text != '') {
-        let watchdogCounter = 100;
-        while (!_width && --watchdogCounter > 0) { // <-- hangs
-          //Yang: work around svgweb bug 417 -- http://code.google.com/p/svgweb/issues/detail?id=417
-          if (_measurementNode.getBBox)
-            _width = parseInt(_measurementNode.getBBox().width);
-          else
-            _width = 68;
-        }
-      }
-      oldParent.removeChild(_measurementNode);
-      return _width;
-    };
-    _package.logger.debug(`${logPrefix}, end`);
-  } finally {
-    window.require = requireBackup;
-    // @ts-ignore
-    window['define'] = defineBackup;
-    pi.close();
-  }
-}
-
-export const helmJsonReplacer = (key: string, value: any): any => {
-  switch (key) {
-  case '_parent': {
-    return `${value.toString()}`;
-  }
-  default:
-    return value;
-  }
-};
+// hwe migration (Phase 7): the legacy Dojo / JSDraw2 / HELMWebEditor loader and
+// the `org.helm.webeditor.Monomers` patching that lived here are gone. The
+// standalone `@datagrok-libraries/hwe` editor is self-contained (no global
+// scripts to inject) and reads Bio's monomer library directly via
+// `bridgeMonomerLib`, so package init just wires the helpers together.
 
 export class HelmPackage extends DG.Package {
-  public alertOriginal: ((s: string) => void) | null = null;
-
   private _helmHelper?: IHelmHelper;
   public get helmHelper(): IHelmHelper {
     if (!this._helmHelper)
@@ -232,92 +40,6 @@ export class HelmPackage extends DG.Package {
     super._logger = new LoggerWrapper(super.logger, opts.debug);
   }
 
-  // -- Init --
-  /** Loads Dojo and HelmWebEditor, waits for init, patches */
-  async initHELMWebEditor(): Promise<void> {
-    const logPrefix: string = 'Helm: Package.initDojo()';
-
-    _package.logger.debug(`${logPrefix}, dependence loading …`);
-    const t1: number = performance.now();
-
-    _package.logger.debug(`${logPrefix}, dojox loading and patching …`);
-    await initHelmLoadAndPatchDojo();
-    _package.logger.debug(`${logPrefix}, dojox loaded and patched`);
-
-    // Alternatively load old bundles by package.json/sources
-    _package.logger.debug(`${logPrefix}, HelmWebEditor awaiting …`);
-    // require('../helm/JSDraw/Scilligence.JSDraw2.Lite-uncompressed');
-    // require('../helm/JSDraw/Pistoia.HELM-uncompressed');
-    require('../node_modules/@datagrok-libraries/helm-web-editor/dist/package.js');
-    await window.helmWebEditor$.initPromise;
-    _package.logger.debug(`${logPrefix}, HelmWebEditor loaded`);
-
-    org.helm.webeditor.kCaseSensitive = true; // GROK-13880
-
-    _package.logger.debug(`${logPrefix}, scil.Utils.alert patch`);
-    _package.initHelmPatchScilAlert(); // patch immediately
-
-    const t2: number = performance.now();
-    _package.logger.debug(`${logPrefix}, dependence loaded, ET: ${(t2 - t1)} ms`);
-  }
-
-  public initHelmPatchScilAlert(): void {
-    const logPrefix: string = 'Helm: initHelmPatchScilAlert()';
-    this.alertOriginal = scil.Utils.alert;
-    scil.Utils.alert = (s: string): void => {
-      this.logger.warning(`${logPrefix}, scil.Utils.alert() s: "${s}".`);
-    };
-  }
-
-  /** Patches Pistoia Monomers.getMonomer method to utilize DG Bio monomer Lib */
-  public initHelmPatchPistoia(): void {
-    const logPrefix: string = 'Helm: initHelmPatchPistoia()';
-    const monomers = org.helm.webeditor.Monomers;
-
-    this.logger.debug(`${logPrefix}, this.getMonomerOriginal stored`);
-
-    this.helmHelper.overrideMonomersFuncs(this.helmHelper.buildMonomersFuncsFromLib(this.monomerLib));
-
-    // @ts-ignore, intercept with proxy to observe access and usage
-    org.helm.webeditor.Monomers = new class {
-      constructor(base: Monomers) {
-        return new Proxy(base, {
-          get(target: any, p: string | symbol, _receiver: any): any {
-            return target[p];
-          },
-          set(target: any, p: string | symbol, newValue: any, _receiver: any): boolean {
-            if (p != 'sugars' && p != 'linkers' && p != 'bases' && p != 'aas') {
-              const k = 11;
-            }
-            target[p] = newValue;
-            return true;
-          },
-          apply(target: any, thisArg: any, argArray: any[]): any {
-            return target[thisArg](...argArray);
-          },
-        });
-      }
-    }(org.helm.webeditor.Monomers) as Monomers;
-
-    // @ts-ignore, intercept with proxy to observe access and usage
-    org.helm.webeditor = new class {
-      constructor(base: IOrgHelmWebEditor) {
-        return new Proxy(base, {
-          get(target: any, p: string | symbol, _receiver: any): any {
-            return target[p];
-          },
-          set(target: any, p: string | symbol, newValue: any, _receiver: any): boolean {
-            target[p] = newValue;
-            return true;
-          },
-          apply(target: any, thisArg: any, argArray: any[]): any {
-            return target[thisArg](...argArray);
-          },
-        });
-      }
-    }(org.helm.webeditor) as IOrgHelmWebEditor;
-  }
-
   // -- MonomerLib --
 
   public get monomerLib(): IMonomerLib {
@@ -330,17 +52,15 @@ export class HelmPackage extends DG.Package {
 
   private _initialized: boolean = false;
 
-  /** Requires both Bio & HELMWebEditor initialized */
+  /** Requires Bio initialized (monomer library). */
   completeInit(helmHelper: IHelmHelper, libHelper: IMonomerLibHelper): void {
     this._helmHelper = helmHelper;
     this._libHelper = libHelper;
 
     const lib = this.monomerLib;
-    rewriteLibraries(lib); // initHelm()
     this._monomerLibSub = lib.onChanged
       .subscribe(this.monomerLibOnChangedHandler.bind(this));
 
-    this.initHelmPatchPistoia();
     this._initialized = true;
   }
 
@@ -359,10 +79,6 @@ export class HelmPackage extends DG.Package {
         .join('<br />');
       const libMsg: string = `Monomer lib updated:<br /> ${libSummaryHtml}`;
       grok.shell.info(libMsg);
-
-      _package.logger.debug(`${logPrefix}, org,helm.webeditor.Monomers updating ...`);
-      rewriteLibraries(this.monomerLib); // initHelm() monomerLib.onChanged()
-      _package.logger.debug(`${logPrefix}, end, org.helm.webeditor.Monomers completed`);
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       console.error(`${logPrefix} error:\n` + errMsg);
@@ -370,9 +86,3 @@ export class HelmPackage extends DG.Package {
     }
   }
 }
-
-async function initNgl(): Promise<void> {
-  const funcList = DG.Func.find({package: 'BiostructureViewer', name: 'getNglGlService'});
-  if (funcList.length === 0) return; // Not mandatory if the BiostructureViewer package is not installed
-  await funcList[0].prepare().call();
-}

package/src/package.g.ts

@@ -7,12 +7,6 @@ export async function initHelm() : Promise<void> {
   await PackageFunctions.initHelm();
 }
 
-//description: Helm renderer service
-//output: object result
-export async function getHelmService() : Promise<any> {
-  return await PackageFunctions.getHelmService();
-}
-
 //tags: cellRenderer
 //output: grid_cell_renderer result
 //meta.columnTags: quality=Macromolecule, units=helm
@@ -45,8 +39,8 @@ export function openEditor(mol: DG.SemanticValue) : void {
 //output: widget result
 //meta.role: widgets,panel
 //meta.domain: bio
-export function propertiesWidget(sequence: DG.SemanticValue) : any {
-  return PackageFunctions.propertiesWidget(sequence);
+export async function propertiesWidget(sequence: DG.SemanticValue) : Promise<any> {
+  return await PackageFunctions.propertiesWidget(sequence);
 }
 
 //input: column col { semType: Macromolecule }

package/src/package.ts

@@ -10,18 +10,20 @@ import {testEvent} from '@datagrok-libraries/utils/src/test';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {getSeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
-import {App, HweWindow} from '@datagrok-libraries/bio/src/helm/types';
+import {App} from '@datagrok-libraries/bio/src/helm/types';
 import {HelmInputBase, IHelmHelper, IHelmInputInitOptions} from '@datagrok-libraries/bio/src/helm/helm-helper';
-import {HelmServiceBase} from '@datagrok-libraries/bio/src/viewers/helm-service';
 import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/types/monomer-library';
 
 import {getPropertiesWidget} from './widgets/properties-widget';
 import {HelmGridCellRenderer, HelmGridCellRendererBack} from './utils/helm-grid-cell-renderer';
-import {_getHelmService, HelmPackage} from './package-utils';
+import {HelmPackage} from './package-utils';
 import {HelmHelper} from './helm-helper';
 import {getRdKitModule} from '@datagrok-libraries/bio/src/chem/rdkit-module';
 
-import type {JSDraw2Module, OrgHelmModule, ScilModule} from './types';
+// hwe editor stylesheet (`.hw-*` classes). hwe (Phase 28) ships its CSS only as
+// a bundler import — there is no runtime injection — so consumers must import it
+// or the HelmEditorApp renders unstyled. See @datagrok-libraries/hwe editor.css.
+import '@datagrok-libraries/hwe/styles.css';
 
 export * from './package.g';
 export const _package = new HelmPackage(/*{debug: true}/**/);
@@ -56,20 +58,6 @@ decorators.forEach((decorator) => {
 
 /** End temporary polyfill */
 
-
-/*
-  Loading modules:
-  Through Helm/package.json/sources section
-    dojo from ajax.googleapis.com
-    HELMWebEditor
-      JSDraw.Lite is embedded into HELMWebEditor bundle (dist/package.js)
- */
-
-declare const window: Window & HweWindow;
-declare const scil: ScilModule;
-declare const JSDraw2: JSDraw2Module;
-declare const org: OrgHelmModule;
-
 let initHelmPromise: Promise<void> | null = null;
 
 async function initHelmInt(): Promise<void> {
@@ -77,11 +65,10 @@ async function initHelmInt(): Promise<void> {
   _package.logger.debug(`${logPrefix}, start`);
 
   try {
-    await getRdKitModule();
+    const rdKitModule = await getRdKitModule();
     const seqHelper = await getSeqHelper();
     const libHelper = await getMonomerLibHelper();
-    await _package.initHELMWebEditor();
-    const helmHelper: IHelmHelper = new HelmHelper(seqHelper, _package.logger);
+    const helmHelper: IHelmHelper = new HelmHelper(seqHelper, _package.logger, rdKitModule);
     _package.completeInit(helmHelper, libHelper);
   } catch (err: any) {
     const [errMsg, errStack] = errInfo(err);
@@ -97,6 +84,7 @@ async function initHelmInt(): Promise<void> {
 
 function openWebEditor(cell: DG.GridCell, value?: string, units?: string) {
   const view = ui.div();
+  view.style.height = '100%';
   const col = cell.cell.column as DG.Column<string>;
   const sh = _package.seqHelper.getSeqHandler(col);
   const app: App =
@@ -133,14 +121,6 @@ export class PackageFunctions {
   }
 
 
-  @grok.decorators.func({
-    'description': 'Helm renderer service',
-    'outputs': [{'type': 'object', 'name': 'result'}]
-  })
-  static async getHelmService(): Promise<HelmServiceBase> {
-    return _getHelmService();
-  }
-
   @grok.decorators.func({
     'meta': {
       'columnTags': 'quality=Macromolecule, units=helm',
@@ -201,8 +181,8 @@ export class PackageFunctions {
     'meta': {role: 'widgets', domain: 'bio'},
     'tags': ['panel', 'widgets', 'bio']
   })
-  static propertiesWidget(
-    @grok.decorators.param({'options': {'semType': 'Macromolecule'}}) sequence: DG.SemanticValue): DG.Widget {
+  static async propertiesWidget(
+    @grok.decorators.param({'options': {'semType': 'Macromolecule'}}) sequence: DG.SemanticValue): Promise<DG.Widget> {
     return getPropertiesWidget(sequence);
   }
 

package/src/tests/helm-activity-cliffs.ts

@@ -24,7 +24,7 @@ category('activityCliffs', async () => {
   let monomerLibHelper: IMonomerLibHelper;
   /** Backup actual user's monomer libraries settings */
   let userLibSettings: UserLibSettings;
-  const helmEncodingFunc = DG.Func.find({name: 'helmPreprocessingFunction', package: 'Bio'})[0];
+  const helmEncodingFunc = DG.Func.find({name: 'macromoleculePreprocessingFunction', package: 'Bio'})[0];
   before(async () => {
     helmHelper = await getHelmHelper(); // init Helm package
     monomerLibHelper = await getMonomerLibHelper();
@@ -46,7 +46,7 @@ category('activityCliffs', async () => {
     const _view = grok.shell.addTableView(df);
 
     await _testActivityCliffsOpen(_view, df, DimReductionMethods.UMAP,
-      'HELM', 'Activity', 65, 20, BitArrayMetricsNames.Tanimoto, helmEncodingFunc);
+      'HELM', 'Activity', 65, 311, MmDistanceFunctionsNames.HAMMING, helmEncodingFunc);
   });
 });
 

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

@@ -50,6 +50,89 @@ category('HelmInput', () => {
     expect(mol.bonds.length, 3);
   });
 
+  test('renders-with-nonzero-height (root in a dialog)', async () => {
+    // Regression: `ui.input.helmAsync` placed in a content-sized container
+    // (no explicit height) used to collapse the editor host to 0 px, rendering
+    // an empty div. Assert the editor host AND its mounted SVG are visibly tall.
+    const helmInput = await ui.input.helmAsync('Macromolecule');
+    helmInput.stringValue = 'PEPTIDE1{[meY].A.G.T}$$$$';
+    const dlg = ui.dialog('Helm Input Height Test').add(helmInput).show();
+    try {
+      await delay(500);
+      const hostEl = helmInput.getInput();
+      expect(hostEl.clientHeight > 0, true, `editor host height must be > 0 (was ${hostEl.clientHeight})`);
+      const svg = hostEl.querySelector('svg');
+      expect(svg != null, true, 'an SVG must be mounted in the editor host');
+      const svgH = (svg as SVGSVGElement).getBoundingClientRect().height;
+      expect(svgH > 0, true, `mounted SVG height must be > 0 (was ${svgH})`);
+    } finally {
+      dlg.close();
+    }
+  });
+
+  test('default size is 250x250', async () => {
+    // `ui.input.helmAsync` with no `editorOptions` should render a compact
+    // 250×250 box, NOT stretch to the form row or fall back to hwe's 400×100.
+    const helmInput = await ui.input.helmAsync('Macromolecule');
+    helmInput.stringValue = 'PEPTIDE1{[meY].A.G.T}$$$$';
+    const dlg = ui.dialog('Helm Input Default Size').add(helmInput).show();
+    try {
+      await delay(500);
+      const host = helmInput.getInput();
+      expect(Math.abs(host.clientWidth - 250) <= 4, true, `default width ~250 (was ${host.clientWidth})`);
+      expect(Math.abs(host.clientHeight - 250) <= 4, true, `default height ~250 (was ${host.clientHeight})`);
+    } finally {
+      dlg.close();
+    }
+  });
+
+  test('editorOptions.width/height override the default size', async () => {
+    const helmInput = await ui.input.helmAsync('Macromolecule', {editable: true, editorOptions: {width: 320, height: 180}});
+    helmInput.stringValue = 'PEPTIDE1{[meY].A.G.T}$$$$';
+    const dlg = ui.dialog('Helm Input Custom Size').add(helmInput).show();
+    try {
+      await delay(500);
+      const host = helmInput.getInput();
+      expect(Math.abs(host.clientWidth - 320) <= 4, true, `width ~320 from editorOptions (was ${host.clientWidth})`);
+      expect(Math.abs(host.clientHeight - 180) <= 4, true, `height ~180 from editorOptions (was ${host.clientHeight})`);
+    } finally {
+      dlg.close();
+    }
+  });
+
+  test('editor canvas sizes from getInput() box (consumer sets height on the host)', async () => {
+    // The real consumer pattern (e.g. libraries/db-explorer/renderer.ts) sets an
+    // explicit size directly on `getInput()` (the editor host). The editor
+    // canvas must follow the HOST's own box — the old code derived the size from
+    // `this.root` and painted a 0-height SVG when a consumer sized only the host
+    // (the reported "height 0 / width 105" bug). Mount via the input so layout
+    // is real, then size the host and assert the SVG tracks it.
+    const helmInput = await ui.input.helmAsync('Macromolecule');
+    helmInput.stringValue = 'PEPTIDE1{[meY].A.G.T}$$$$';
+    const dlg = ui.dialog('Helm getInput() Size Test').add(helmInput).show();
+    try {
+      await delay(300);
+      const host = helmInput.getInput();
+      // Consumer sizes the host element directly (the db-explorer pattern).
+      host.style.setProperty('width', '360px', 'important');
+      host.style.setProperty('height', '260px', 'important');
+      await delay(500); // ResizeObserver → editor.setSize → re-render
+
+      expect(host.clientWidth, 360, `host width (was ${host.clientWidth})`);
+      expect(host.clientHeight, 260, `host height (was ${host.clientHeight})`);
+      const svg = host.querySelector('svg') as SVGSVGElement | null;
+      expect(svg != null, true, 'an SVG must be mounted');
+      const r = svg!.getBoundingClientRect();
+      // The canvas tracks the host box (NOT root): both dimensions filled.
+      expect(r.height >= host.clientHeight - 8, true,
+        `SVG height should track the host's ${host.clientHeight} (was ${r.height})`);
+      expect(r.width >= host.clientWidth - 8, true,
+        `SVG width should track the host's ${host.clientWidth} (was ${r.width})`);
+    } finally {
+      dlg.close();
+    }
+  });
+
   test('tooltip', async () => {
     await _testTooltipOnHelmInput();
   }, {timeout: 300000});