@datagrok/helm 2.13.8 → 3.0.0

package/src/widgets/helm-input.ts

@@ -18,6 +18,17 @@ import {getHoveredMonomerFromEditorMol, getSeqMonomerFromHelmAtom} from '../util
 
 import {_package} from '../package';
 
+/**
+ * Default editor size (px). The editor canvas AND the host element both default
+ * to this so `ui.input.helmAsync` renders a compact, predictable box instead of
+ * stretching to the (often wide) form row or falling back to hwe's 400×100
+ * editor default. Override per-input via `editorOptions.{width,height}`, or — for
+ * a fill layout — set `width/height` directly on `getInput()` (e.g. `'100%'`),
+ * which wins over these defaults; `onSizeChanged` then re-fits the canvas.
+ */
+const DEFAULT_HELM_INPUT_HEIGHT = 250;
+const DEFAULT_HELM_INPUT_WIDTH = 250;
+
 export class HelmInput extends HelmInputBase {
   /** Input type identifier (such as "Slider" for the slider input). See {@link InputType}. */
   get inputType(): string {
@@ -91,11 +102,31 @@ export class HelmInput extends HelmInputBase {
 
     if (name) this.captionLabel.innerText = name;
 
+    // The host defaults to a fixed DEFAULT_HELM_INPUT_{WIDTH,HEIGHT} box (NOT
+    // `width:100%`, which would stretch to the wide form row and surface the
+    // hwe 400×100 editor default). A consumer that wants a fill layout sets
+    // `width/height` on `getInput()` directly (those inline overrides win); the
+    // `min-*` floor keeps it visible if they set `width:100%` in a 0-size
+    // parent. The editor canvas is created at the SAME default so the very first
+    // paint is already the right size (no 400-wide flash), and `onSizeChanged`
+    // below re-fits it from the host's own box whenever the host is resized.
+    const defaultHeight = options?.editorOptions?.height ?? DEFAULT_HELM_INPUT_HEIGHT;
+    const defaultWidth = options?.editorOptions?.width ?? DEFAULT_HELM_INPUT_WIDTH;
     this.viewerHost = ui.div([], {
       classes: 'ui-input-editor',
-      style: {width: '100%', height: '100%', overflow: 'hidden'},
+      style: {
+        width: `${defaultWidth}px`,
+        height: `${defaultHeight}px`,
+        minWidth: `${defaultWidth}px`,
+        minHeight: `${defaultHeight}px`,
+        overflow: 'hidden',
+      },
+    });
+    this.viewer = this.helmHelper.createHelmWebEditor(this.viewerHost, {
+      ...options?.editorOptions,
+      width: defaultWidth,
+      height: defaultHeight,
     });
-    this.viewer = this.helmHelper.createHelmWebEditor(this.viewerHost, options?.editorOptions);
 
     this.editHintDiv = ui.divH([
       ui.link('Click to edit', () => { this.viewer.host.click(); }, undefined, {}),
@@ -115,18 +146,16 @@ export class HelmInput extends HelmInputBase {
       .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`;
-    }));
-
+    // Drive the editor canvas from the host element's OWN measured box so it
+    // works no matter how the consumer mounts the input — via `root` (form
+    // layout) or by lifting `getInput()` (the host) into a custom container.
+    // (The old code read `this.root.clientHeight`, which is 0 whenever only
+    // `getInput()` is in the DOM — producing the reported 0-height editor.)
     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);
+      const h = this.input.clientHeight;
+      if (w > 0 && h > 0)
+        this.viewer.editor.setSize(w, h);
     }));
 
     this.root.classList.add('ui-input-helm');
@@ -222,6 +251,7 @@ export class HelmInput extends HelmInputBase {
 
   showEditorDialog(): void {
     const webEditorHost = ui.div();
+    webEditorHost.style.height = '100%';
     const webEditorApp = this.helmHelper.createWebEditorApp(webEditorHost, this.viewer.editor.getHelm());
 
     const destroyEditorDialog = () => {

package/src/widgets/properties-widget.ts

@@ -6,21 +6,26 @@ import $ from 'cash-dom';
 
 import {ISeqHandler} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 
-import {JSDraw2Module} from '../types';
 import {removeGapsFromHelm} from '../utils';
 
-import {_package} from '../package';
-
-declare const JSDraw2: JSDraw2Module;
-
 export class SeqPropertiesError extends Error {
   constructor(message?: string, options?: ErrorOptions) {
     super(message, options);
   }
 }
 
-export function getPropertiesDict(seq: string, sh: ISeqHandler): {} {
+// hwe migration (Phase 7): formula / MW / extinction coefficient now come from
+// the standalone `@datagrok-libraries/hwe` editor (via the adapter's
+// `LegacyEditorWrapper`), replacing the legacy `new JSDraw2.Editor(...)`. The
+// helper is obtained through the async `getHelmHelper()` factory (which ensures
+// the Helm package is initialized) rather than `_package.helmHelper` — the
+// latter is not initialized in the standalone test bundle. This makes the
+// property calc async (it previously relied on the eagerly-loaded JSDraw2
+// global). The adapter emits the formula in the legacy element order
+// (C,H,N,O,S,P) with no `<sub>` markup, so the strip below is a defensive no-op.
+export async function getPropertiesDict(seq: string, sh: ISeqHandler): Promise<{}> {
   const host = ui.div([], {style: {width: '0', height: '0'}});
   document.documentElement.appendChild(host);
   try {
@@ -28,10 +33,11 @@ export function getPropertiesDict(seq: string, sh: ISeqHandler): {} {
       throw new SeqPropertiesError('Too long sequence to calculate molecular properties.');
 
     const helmString = sh.isHelm() ? seq : sh.getConverter(NOTATION.HELM)(seq);
-    // Remove gap symbols for compatibility with WebEditor
+    // Remove gap symbols for compatibility with the editor
     const helmString2 = removeGapsFromHelm(helmString);
 
-    const editor = new JSDraw2.Editor(host, {viewonly: true});
+    const helmHelper = await getHelmHelper();
+    const editor = helmHelper.createHelmWebEditor(host).editor;
     editor.setHelm(helmString2);
 
     const formula = editor.getFormula(true);
@@ -49,10 +55,11 @@ export function getPropertiesDict(seq: string, sh: ISeqHandler): {} {
 }
 
 
-export function getPropertiesWidget(value: DG.SemanticValue<string>): DG.Widget {
-  const sh = _package.seqHelper.getSeqHandler(value.cell.column as DG.Column<string>);
+export async function getPropertiesWidget(value: DG.SemanticValue<string>): Promise<DG.Widget> {
+  const helmHelper = await getHelmHelper();
+  const sh = helmHelper.seqHelper.getSeqHandler(value.cell.column as DG.Column<string>);
   try {
-    const propDict = getPropertiesDict(value.value, sh);
+    const propDict = await getPropertiesDict(value.value, sh);
     return new DG.Widget(
       ui.tableFromMap(propDict, true)
     );