@datagrok/helm 2.2.1 → 2.3.1

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

@@ -0,0 +1,55 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {after, before, category, delay, expect, test, expectArray} from '@datagrok-libraries/utils/src/test';
+import {IHelmHelper, getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {UserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/types';
+import {
+  getUserLibSettings, setUserLibSettings, setUserLibSettingsForTests
+} from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
+
+import {initHelmMainPackage} from './utils';
+
+category('helm-web-editor', async () => {
+  let monomerLibHelper: IMonomerLibHelper;
+  let userLibSettings: UserLibSettings;
+
+  let hh: IHelmHelper;
+
+  before(async () => {
+    await initHelmMainPackage();
+    monomerLibHelper = await getMonomerLibHelper();
+    userLibSettings = await getUserLibSettings();
+    await setUserLibSettingsForTests();
+    await monomerLibHelper.awaitLoaded();
+    await monomerLibHelper.loadLibraries(true);
+
+    hh = await getHelmHelper();
+  });
+
+  after(async () => {
+    await setUserLibSettings(userLibSettings);
+    await monomerLibHelper.loadLibraries(true);
+  });
+
+  test('helm-web-editor', async () => {
+    const editor = hh.createHelmWebEditor();
+  });
+
+  test('web-editor-app', async () => {
+    const helmStr: string = 'PEPTIDE1{I.H.A.N.T.Thr_PO3H2.Aca.D-Tyr_Et}$$$$';
+
+    const appHost = ui.div([],
+      {style: {width: '700px', height: '432px'}});
+    const app = hh.createWebEditorApp(appHost, helmStr);
+
+    const dlg = ui.dialog().add(appHost).show();
+    try {
+
+    } finally {
+      dlg.close();
+    }
+  });
+});

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

@@ -0,0 +1,98 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+
+import {after, before, category, delay, expect, test, expectArray, timeout} from '@datagrok-libraries/utils/src/test';
+import {HelmType, Mol, OrgType} from '@datagrok-libraries/bio/src/helm/types';
+import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {UserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/types';
+import {
+  getUserLibSettings, setUserLibSettings, setUserLibSettingsForTests
+} from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
+
+import {JSDraw2HelmModule} from '../types';
+import {initHelmMainPackage} from './utils';
+
+declare const org: OrgType;
+declare const JSDraw2: JSDraw2HelmModule;
+
+type TestTgtType = { atomCount: number, bondCount: number };
+
+category('parseHelm', () => {
+  const testData: { [testName: string]: { src: string, tgt: TestTgtType } } = {
+    'PT': {
+      src: 'PEPTIDE1{[L-hArg(Et,Et)].E.F.G}|PEPTIDE2{C.E}$PEPTIDE1,PEPTIDE2,2:R3-1:R1$$$V2.0',
+      tgt: {atomCount: 6, bondCount: 5}
+    },
+    'RNA': {
+      src: 'RNA1{[dhp]([m1A])p.r(T)p.r(T)p.r(G)p}$$$$V2.0',
+      tgt: {atomCount: 12, bondCount: 11}
+    }
+  };
+
+  let libHelper: IMonomerLibHelper;
+  /** Backup actual user's monomer libraries settings */
+  let userLibSettings: UserLibSettings;
+
+  before(async () => {
+    await initHelmMainPackage();
+
+    libHelper = await getMonomerLibHelper();
+
+    await timeout(async () => { userLibSettings = await getUserLibSettings(); }, 5000,
+      'get user lib settings for backup');
+
+    // parseHelm is dependent on monomers RGroups available, test requires default monomer library
+    await setUserLibSettingsForTests();
+    await timeout(async () => { await libHelper.awaitLoaded(); }, 5000,
+      'await monomerLib to be loaded');
+    await libHelper.loadLibraries(true);
+  });
+
+  after(async () => {
+    await setUserLibSettings(userLibSettings);
+    await libHelper.loadLibraries(true);
+  });
+
+  for (const [testName, {src, tgt}] of Object.entries(testData)) {
+    test(`Editor-${testName}`, async () => {
+      _testParseHelmWithEditor(src, tgt);
+    });
+  }
+
+  for (const [testName, {src, tgt}] of Object.entries(testData)) {
+    test(`woDOM-${testName}`, async () => {
+      _testParseHelmWithoutDOM(src, tgt);
+    });
+  }
+});
+
+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 plugin = new org.helm.webeditor.Plugin(editor);
+  const origin = new JSDraw2.Point(0, 0);
+  io.parseHelm(plugin, src, origin, null);
+
+  const m: Mol<HelmType> = plugin.jsd.m;
+  expect(m.atoms.length, tgt.atomCount);
+  expect(m.bonds.length, tgt.bondCount);
+}
+
+function _testParseHelmWithoutDOM(src: string, tgt: TestTgtType): void {
+  const io = org.helm.webeditor.IO;
+
+  const molHandler = new JSDraw2.MolHandler();
+
+  const plugin = new org.helm.webeditor.Plugin(molHandler);
+  const origin = new JSDraw2.Point(0, 0);
+  io.parseHelm(plugin, src, origin, null);
+
+  const m: Mol<HelmType> = plugin.jsd.m;
+  expect(m.atoms.length, tgt.atomCount);
+  expect(m.bonds.length, tgt.bondCount);
+}

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

@@ -2,15 +2,17 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 
-import {after, before, category, expect, expectObject, test} from '@datagrok-libraries/utils/src/test';
+import {after, before, category, expect, expectObject, test, timeout} from '@datagrok-libraries/utils/src/test';
 import {ALPHABET, NOTATION, TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
 import {
   getUserLibSettings, setUserLibSettings, setUserLibSettingsForTests
 } from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {generateLongSequence} from '@datagrok-libraries/bio/src/utils/generator';
 
-import {getPropertiesDict} from '../widgets/properties-widget';
+import {initHelmMainPackage} from './utils';
+import {getPropertiesDict, SeqPropertiesError} from '../widgets/properties-widget';
 
 const enum MolProps {
   formula = 'formula',
@@ -25,6 +27,7 @@ const enum Tests {
   separatorGaps = 'separator-gaps',
   fastaPt = 'fasta-PT',
   fastaPtMsa = 'fasta-PT-MSA',
+  fastaRna = 'fasta-RNA',
   fastaDna = 'fasta-DNA',
 }
 
@@ -56,6 +59,11 @@ const TestsData: {
     units: NOTATION.FASTA, alphabet: ALPHABET.PT,
     res: {[MolProps.formula]: 'C38H58N10O12S', [MolProps.mw]: 878.99, [MolProps.extinctCoef]: 1.55}
   },
+  [Tests.fastaRna]: {
+    seq: 'ACGUAUUCC',
+    units: NOTATION.FASTA, alphabet: ALPHABET.RNA,
+    res: {[MolProps.formula]: 'C84H107N30O65P9', [MolProps.mw]: 2855.67, [MolProps.extinctCoef]: 96.27}
+  },
   [Tests.fastaDna]: {
     seq: 'ACGTATTCC',
     units: NOTATION.FASTA, alphabet: ALPHABET.DNA,
@@ -69,9 +77,14 @@ category('properties-widget', () => {
   let userLibSettings: any = null;
 
   before(async () => {
+    await initHelmMainPackage();
+
     monomerLibHelper = await getMonomerLibHelper();
     userLibSettings = getUserLibSettings();
+
     await setUserLibSettingsForTests();
+    await timeout(async () => { await monomerLibHelper.awaitLoaded(); },
+      5000, 'MonomerLibHelper.awaitLoaded() timeout');
     await monomerLibHelper.loadLibraries(true); // load default libraries
   });
 
@@ -85,6 +98,22 @@ category('properties-widget', () => {
       testPropertiesDict(testData.seq, testData.units, testData.separator, testData.alphabet, testData.res);
     });
   }
+
+  test('too-long', async () => {
+    const colList = generateLongSequence();
+    const df = DG.DataFrame.fromColumns(colList);
+    const col = df.getCol('MSA');
+
+    const sh = SeqHandler.forColumn(col);
+    let errCatched = true;
+    try {
+      const _actPropDict = getPropertiesDict(col.get(0), sh);
+      const k = 11;
+    } catch (err: any) {
+      if (err instanceof SeqPropertiesError) errCatched = true;
+    }
+    expect(errCatched, true);
+  });
 });
 
 function testPropertiesDict(
@@ -95,7 +124,7 @@ function testPropertiesDict(
   col.setTag(DG.TAGS.UNITS, units);
   if (separator) col.setTag(bioTAGS.separator, separator);
   if (alphabet) col.setTag(bioTAGS.alphabet, alphabet);
-  const uh = SeqHandler.forColumn(col);
-  const actPropDict = getPropertiesDict(seq, uh);
+  const sh = SeqHandler.forColumn(col);
+  const actPropDict = getPropertiesDict(seq, sh);
   expectObject(actPropDict, expPropDict);
 }

package/src/tests/renderers-tests.ts

@@ -15,7 +15,7 @@ import {
   getUserLibSettings, setUserLibSettings, setUserLibSettingsForTests
 } from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
 
-import {awaitGrid} from './utils';
+import {awaitGrid, initHelmMainPackage} from './utils';
 import {TAGS as helmTAGS} from '../constants';
 
 import {_package} from '../package-test';
@@ -26,6 +26,8 @@ category('renderers', () => {
   let userLibSettings: UserLibSettings;
 
   before(async () => {
+    await initHelmMainPackage();
+
     monomerLibHelper = await getMonomerLibHelper();
     userLibSettings = await getUserLibSettings();
 

package/src/tests/utils.ts

@@ -3,6 +3,12 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {delay, testEvent} from '@datagrok-libraries/utils/src/test';
+import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+
+
+export async function initHelmMainPackage(): Promise<void> {
+  await getHelmHelper();
+}
 
 export async function awaitGrid(grid: DG.Grid, timeout: number = 5000): Promise<void> {
   await delay(100);

package/src/types/index.ts

@@ -0,0 +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 OrgHelmModule = OrgType;

package/src/utils/get-hovered.ts

@@ -2,15 +2,14 @@ import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
-import * as JSDraw2 from 'JSDraw2';
+import {HelmType, PolymerType, Atom, Mol} from '@datagrok-libraries/bio/src/helm/types';
 
 import {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
-import {PolymerType} from '@datagrok-libraries/bio/src/types';
 
 import {HelmMonomerPlacer, ISeqMonomer} from '../helm-monomer-placer';
 
 export function getHoveredMonomerFromEditorMol(
-  argsX: number, argsY: number, gridCell: DG.GridCell, mol: JSDraw2.IEditorMol
+  argsX: number, argsY: number, gridCell: DG.GridCell, mol: Mol<HelmType>
 ): ISeqMonomer | null {
   let hoveredSeqMonomer: ISeqMonomer | null = null;
 
@@ -84,7 +83,7 @@ export function getHoveredMonomerFallback(
   return hoveredSeqMonomer;
 }
 
-function getSeqMonomerFromHelmAtom(atom: JSDraw2.IEditorMolAtom): ISeqMonomer {
+function getSeqMonomerFromHelmAtom(atom: Atom<HelmType>): ISeqMonomer {
   const polymerType = helmTypeToPolymerType(atom.bio.type);
   return {symbol: atom.elem, polymerType: polymerType};
 }

package/src/utils/{dummy-monomer.ts → get-monomer-dummy.ts}

@@ -2,7 +2,9 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import * as org from 'org';
+import {
+  HelmType, IWebEditorMonomer, MonomerType, PolymerType, WebEditorRGroups
+} from '@datagrok-libraries/bio/src/helm/types';
 
 import {Monomer} from '@datagrok-libraries/bio/src/types/index';
 import {
@@ -33,56 +35,18 @@ export function getRS(smiles: string) {
   return res;
 }
 
-export class LibraryWebEditorMonomer implements org.helm.WebEditorMonomer {
-  public get rs(): number { return Object.keys(this.at).length; }
-
-  /* eslint-disable max-params */
-  protected constructor(
-    public readonly id: string,
-    public readonly m: string,
-    public readonly n: string,
-    public readonly na: string | undefined,
-    public readonly type: org.helm.PolymerType,
-    public readonly mt: org.helm.MonomerType,
-    public readonly at: org.helm.WebEditorRGroups,
-  ) /* eslint-enable max-params */ {}
-
-  static fromMonomer(biotype: org.helm.HelmType, monomer: Monomer): org.helm.WebEditorMonomer {
-    let at: org.helm.WebEditorRGroups = {};
-    const smiles = monomer[REQ.SMILES];
-    if (monomer.rgroups.length > 0) {
-      monomer.rgroups.forEach((it) => {
-        at[it[RGP.LABEL]] = it[RGP.CAP_GROUP_NAME];
-      });
-    } else if (smiles) {
-      // Generate R-Groups from SMILES
-      at = getRS(smiles);
-    } else {
-      // broken
-      return new BrokenWebEditorMonomer(biotype, monomer[REQ.SYMBOL]);
-    }
-
-    return new LibraryWebEditorMonomer(
-      monomer[REQ.SYMBOL],
-      monomer[REQ.MOLFILE],
-      monomer[REQ.NAME],
-      monomer[OPT.NATURAL_ANALOG],
-      monomer[REQ.POLYMER_TYPE],
-      monomer[REQ.MONOMER_TYPE],
-      at);
-  }
-}
-
 /* eslint-disable camelcase */
-export abstract class DummyWebEditorMonomer implements org.helm.WebEditorMonomer {
+export abstract class DummyWebEditorMonomer implements IWebEditorMonomer {
   //@formatter:off
   public abstract get backgroundcolor(): string | undefined;
   public abstract get linecolor(): string | undefined;
   public abstract get textcolor(): string | undefined;
   //@formatter:on
 
+  get issmiles(): boolean { return !!this.smiles; }
+
   /** R-Group index os single digit only is allowed in Pistoia code */
-  public readonly at: org.helm.WebEditorRGroups = {
+  public readonly at: WebEditorRGroups = {
     R1: 'H', R2: 'H', R3: 'H', R4: 'H', R5: 'H', R6: 'H', R7: 'H', R8: 'H', R9: 'H'
   };
 
@@ -94,8 +58,9 @@ export abstract class DummyWebEditorMonomer implements org.helm.WebEditorMonomer
     /** name */ public readonly n: string | undefined = 'missing',
     /** molfile */ public readonly m: string | undefined = undefined,
     /* Pistoia.HELM deletes .type and .mt in Monomers.addOneMonomer() */
-    /** polymer type */ public readonly type: org.helm.PolymerType | undefined = undefined,
-    /** monomer type */ public readonly mt: org.helm.MonomerType | undefined = undefined,
+    /** polymer type */ public readonly type: PolymerType | undefined = undefined,
+    /** monomer type */ public readonly mt: MonomerType | undefined = undefined,
+    public readonly smiles?: string,
   ) {
     if (!this.id)
       throw new Error('Invalid arg undefined [id].');

package/src/utils/get-monomer-of-library.ts

@@ -0,0 +1,90 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {
+  HelmType, IWebEditorMonomer, IMonomerColors, MonomerType, PolymerType, WebEditorRGroups
+} from '@datagrok-libraries/bio/src/helm/types';
+import {Monomer} from '@datagrok-libraries/bio/src/types';
+import {
+  HELM_OPTIONAL_FIELDS as OPT, HELM_REQUIRED_FIELD as REQ, HELM_RGROUP_FIELDS as RGP
+} from '@datagrok-libraries/bio/src/utils/const';
+import {BrokenWebEditorMonomer, getRS, MissingWebEditorMonomer} from './get-monomer-dummy';
+
+function getMonomerColors(monomer: Monomer): IMonomerColors | null {
+  const currentMonomerSchema = 'default';
+  let monomerSchema: string = currentMonomerSchema;
+  if (!monomer.meta || !monomer.meta.colors) return null;
+
+  const monomerColors: { [colorSchemaName: string]: any } = monomer.meta.colors;
+
+  if (!(currentMonomerSchema in monomerColors)) monomerSchema = 'default';
+
+  const res = monomerColors[monomerSchema];
+
+  return !res ? null : {
+    textcolor: res.text ?? res.textColor,
+    linecolor: res.line ?? res.lineColor,
+    backgroundcolor: res.background ?? res.backgroundColor
+  } as IMonomerColors;
+}
+
+export class LibraryWebEditorMonomer implements IWebEditorMonomer {
+  public get rs(): number { return Object.keys(this.at).length; }
+
+  public get issmiles(): boolean { return !!this.smiles; }
+
+  public linecolor?: string;
+  public backgroundcolor?: string;
+  public textcolor?: string;
+
+  /* eslint-disable max-params */
+  protected constructor(
+    public readonly id: string,
+    public readonly m: string,
+    public readonly n: string,
+    public readonly na: string | undefined,
+    public readonly type: PolymerType,
+    public readonly mt: MonomerType,
+    public readonly at: WebEditorRGroups,
+    public readonly smiles?: string,
+  ) /* eslint-enable max-params */ {}
+
+  static fromMonomer(biotype: HelmType, monomer: Monomer): IWebEditorMonomer {
+    let at: WebEditorRGroups = {};
+    const symbol = monomer[REQ.SYMBOL];
+    const smiles = monomer[REQ.SMILES];
+    if (monomer.rgroups.length > 0) {
+      monomer.rgroups.forEach((it) => {
+        at[it[RGP.LABEL]] = it[RGP.CAP_GROUP_NAME];
+      });
+    } else if (smiles) {
+      // Generate R-Groups from SMILES
+      at = getRS(smiles);
+    } else if (!monomer.lib) {
+      // missing
+      return new MissingWebEditorMonomer(biotype, symbol);
+    } else {
+      // broken
+      return new BrokenWebEditorMonomer(biotype, symbol);
+    }
+
+    const res = new LibraryWebEditorMonomer(
+      monomer[REQ.SYMBOL],
+      monomer[REQ.MOLFILE],
+      monomer[REQ.NAME],
+      monomer[OPT.NATURAL_ANALOG],
+      monomer[REQ.POLYMER_TYPE],
+      monomer[REQ.MONOMER_TYPE],
+      at);
+
+    const colors = getMonomerColors(monomer);
+    if (colors) {
+      res.textcolor = colors?.textcolor;
+      res.linecolor = colors?.linecolor;
+      res.backgroundcolor = colors?.backgroundcolor;
+    }
+
+    return res;
+  }
+}

package/src/utils/get-monomer.ts

@@ -2,30 +2,30 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import * as org from 'org';
-import * as scil from 'scil';
-import * as JSDraw2 from 'JSDraw2';
-import Atom = JSDraw2.Atom;
-
 import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
-import {HelmType, IMonomerLib, Monomer, WebEditorMonomer} from '@datagrok-libraries/bio/src/types';
+import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types';
+import {Atom, HelmType, IWebEditorMonomer, GetMonomerResType} from '@datagrok-libraries/bio/src/helm/types';
 import {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
-import {PolymerTypes, HelmTypes} from '@datagrok-libraries/bio/src/utils/const';
 import {
   HELM_REQUIRED_FIELD as REQ
 } from '@datagrok-libraries/bio/src/utils/const';
+import {HelmTypes} from '@datagrok-libraries/bio/src/helm/consts';
+
+import {AmbiguousWebEditorMonomer, GapWebEditorMonomer, MissingWebEditorMonomer} from './get-monomer-dummy';
+import {LibraryWebEditorMonomer} from './get-monomer-of-library';
+import {OrgHelmModule, ScilModule} from '../types';
+
+import {_package} from '../package';
 
-import {AmbiguousWebEditorMonomer, GapWebEditorMonomer, LibraryWebEditorMonomer} from './dummy-monomer';
+declare const org: OrgHelmModule;
+declare const scil: ScilModule;
 
 const monomerRe = /[\w()]+/;
 //** Do not mess with monomer symbol with parenthesis enclosed in square brackets */
 const ambMonomerRe = RegExp(String.raw`\(${monomerRe}(,${monomerRe})+\)`);
 
-export type GetMonomerResType = WebEditorMonomer | null;
-
-export type GetMonomerFunc = (a: Atom<HelmType> | HelmType, name: string | undefined) => GetMonomerResType;
 type GetMonomerOverridingFunc = (
-  a: Atom<HelmType> | HelmType, name: string, monomerLib: IMonomerLib,
+  a: Atom<HelmType> | HelmType, name: string | undefined, monomerLib: IMonomerLib,
   originalGetMonomer: (a: Atom<HelmType> | HelmType, name: string) => GetMonomerResType) => GetMonomerResType;
 
 export function getMonomerOverrideAndLogAlert(
@@ -36,11 +36,10 @@ export function getMonomerOverrideAndLogAlert(
   const getMonomerOriginal = monomers.getMonomer.bind(monomers);
   const alertOriginal = scil.Utils.alert;
   try {
-    org.helm.webeditor.Monomers.getMonomer = (
-      a: Atom<HelmType> | HelmType, name: string
-    ): GetMonomerResType => {
-      return getMonomerOverriding(a, name, monomerLib, getMonomerOriginal);
-    };
+    org.helm.webeditor.Monomers.getMonomer =
+      (a: Atom<HelmType> | HelmType, name?: string): GetMonomerResType => {
+        return getMonomerOverriding(a, name, monomerLib, getMonomerOriginal);
+      };
     // Preventing alert message box for missing monomers with compressed Scilligence.JSDraw2.Lite.js
     scil.Utils.alert = (s: string): void => {
       logger.warning(`${logPrefix}, scil.Utils.alert() s = 's'.`);
@@ -59,7 +58,7 @@ export function getMonomerHandleArgs(
   let biotype: HelmType;
   let elem: string;
   if ((a as Atom<HelmType>).T === 'ATOM') {
-    biotype = (a as Atom<HelmType>).biotype();
+    biotype = (a as Atom<HelmType>).biotype()!;
     elem = (a as Atom<HelmType>).elem;
   } else {
     biotype = a as HelmType;
@@ -72,8 +71,8 @@ export function getMonomerHandleArgs(
 /** Substitutes {@link org.helm.webeditor.Monomers.getMonomer()} */
 export function getWebEditorMonomer(
   monomerLib: IMonomerLib,
-  a: Atom<HelmType> | HelmType, argName: string,
-): WebEditorMonomer | null {
+  a: Atom<HelmType> | HelmType, argName?: string,
+): IWebEditorMonomer | null {
   const [biotype, elem] = getMonomerHandleArgs(a, argName);
   const pt = helmTypeToPolymerType(biotype);
 
@@ -91,7 +90,7 @@ export function getWebEditorMonomer(
     m = monomerLib.addMissingMonomer(pt, elem);
 
   /** Get or create {@link org,helm.WebEditorMonomer} */
-  let resWem: WebEditorMonomer | undefined = m.wem;
+  let resWem: IWebEditorMonomer | null = m.wem ?? null;
   if (!resWem) {
     if (elem === '*')
       resWem = m.wem = new GapWebEditorMonomer(biotype, elem);
@@ -102,6 +101,9 @@ export function getWebEditorMonomer(
       ambMonomerRe.test(elem) // e.g. (A,R,_)
     )
       resWem = m.wem = new AmbiguousWebEditorMonomer(biotype, elem);
+    else if (!m.lib)
+      resWem = m.wem = new MissingWebEditorMonomer(biotype, elem);
+
 
     if (!resWem)
       resWem = m.wem = LibraryWebEditorMonomer.fromMonomer(biotype, m);

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

@@ -2,9 +2,9 @@ import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
-import * as JSDraw2 from 'JSDraw2';
 import wu from 'wu';
 
+import {HelmType, Mol} from '@datagrok-libraries/bio/src/helm/types';
 import {
   CellRendererBackAsyncBase, RenderServiceBase
 } from '@datagrok-libraries/bio/src/utils/cell-renderer-async-base';
@@ -18,6 +18,8 @@ import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
 import {getGridCellRendererBack} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 
 import {_package, getMonomerLib} from '../package';
+import {IMonomerLib} from '@datagrok-libraries/bio/src/types/index';
+import {GridCell, GridCellStyle, x} from 'datagrok-api/dg';
 
 class WrapLogger implements ILogger {
   constructor(
@@ -44,6 +46,8 @@ class WrapLogger implements ILogger {
 export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProps, HelmAux> {
   private _auxList: (HelmAux | null)[];
 
+  private monomerLib: IMonomerLib | null = null;
+
   constructor(
     gridCol: DG.GridColumn | null,
     tableCol: DG.Column<string>,
@@ -134,7 +138,7 @@ export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProp
     const argsX = (e.offsetX - gcb.x) * dpr;
     const argsY = (e.offsetY - gcb.y) * dpr;
 
-    const editorMol: JSDraw2.IEditorMol | null = aux.mol;
+    const editorMol: Mol<HelmType> | null = aux.mol;
     if (!editorMol) {
       this.logger.warning(`${logPrefix}, editorMol of the cell not found.`);
       return; // The gridCell is not rendered yet
@@ -152,10 +156,22 @@ export class HelmGridCellRendererBack extends CellRendererBackAsyncBase<HelmProp
     }
   }
 
+  public override render(g: CanvasRenderingContext2D,
+    x: number, y: number, w: number, h: number,
+    gridCell: GridCell, cellStyle: GridCellStyle) {
+    if (!this.monomerLib) {
+      this.monomerLib = getMonomerLib();
+      if (this.monomerLib) {
+        this.subs.push(this.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this)));
+      }
+    }
+    super.render(g, x, y, w, h, gridCell, cellStyle);
+  }
+
   // -- Handle events --
+
   private monomerLibOnChanged(_value: any): void {
     this.reset();
-    this.invalidateGrid();
   }
 
   static getOrCreate(gridCell: DG.GridCell): HelmGridCellRendererBack {

package/src/utils/helm-service.ts

@@ -2,25 +2,26 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import * as org from 'org';
-import * as scil from 'scil';
-import * as JSDraw2 from 'JSDraw2';
-
 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 {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 {_package} from '../package';
 
+declare const JSDraw2: JSDraw2HelmModule;
+
 export class HelmService extends HelmServiceBase {
   private readonly hostDiv: HTMLDivElement;
 
-  private editor!: JSDraw2.Editor;
+  private editor!: Editor<HelmType>;
   private image: HTMLImageElement | null = null;
 
   constructor() {