@datagrok/sequence-translator 1.4.1 → 1.4.2

package/files/samples/cyclized.csv

@@ -1,5 +1,5 @@
 n,seqs
-1,R-F-C(1)-T-G-H-F-Y-P-C(1)-meI
+1,R-F-C(1)-T-G-H-F-Y-G-H-F-Y-G-H-F-Y-P-C(1)-meI
 2,C(1)-T-G-H-F-Y-P-C(1)-meI
 3,R-F-C(1)-T-G-H-F-Y-P-C(1)
 4,C(1)-T-G-H-F-H-P-C(1)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"
@@ -22,8 +22,8 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.42.15",
-    "@datagrok-libraries/chem-meta": "^1.2.5",
+    "@datagrok-libraries/bio": "^5.44.0",
+    "@datagrok-libraries/chem-meta": "^1.2.7",
     "@datagrok-libraries/tutorials": "^1.4.0",
     "@datagrok-libraries/utils": "^4.3.0",
     "@types/react": "^18.0.15",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@datagrok-libraries/helm-web-editor": "^1.1.11",
     "@datagrok-libraries/js-draw-lite": "^0.0.8",
-    "@datagrok/bio": "^2.15.1",
+    "@datagrok/bio": "^2.15.3",
     "@datagrok/helm": "^2.5.0",
     "@datagrok/chem": "^1.12.0",
     "@types/jquery": "^3.5.14",

package/src/package-test.ts

@@ -2,7 +2,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {runTests, tests, TestContext} from '@datagrok-libraries/utils/src/test';
+import {runTests, tests, TestContext, initAutoTests as initTests } from '@datagrok-libraries/utils/src/test';
 
 import './tests/formats-to-helm';
 import './tests/helm-to-nucleotides';
@@ -10,6 +10,7 @@ import './tests/formats-support';
 import './tests/files-tests';
 import './tests/polytool-convert-tests';
 import './tests/polytool-enumerate-tests';
+import './tests/polytool-enumerate-breadth-tests';
 
 import {OligoToolkitTestPackage} from './tests/utils';
 
@@ -25,3 +26,8 @@ export async function test(category: string, test: string, testContext: TestCont
   const data = await runTests({category, test, testContext, verbose: true});
   return DG.DataFrame.fromObjects(data)!;
 }
+
+//name: initAutoTests
+export async function initAutoTests() {
+  await initTests(_package, _package.getModule('package-test.js'));
+}

package/src/polytool/pt-dialog.ts

@@ -23,6 +23,16 @@ import {
 
 import {_package} from '../package';
 
+type PolyToolConvertSerialized = {
+  generateHelm: boolean;
+  chiralityEngine: boolean;
+};
+
+type PolyToolEnumerateChemSerialized = {
+  mol: string;
+  screenLibrary: string | null;
+}
+
 export function polyToolEnumerateChemUI(cell?: DG.Cell): void {
   getPolyToolEnumerationChemDialog(cell)
     .then((dialog) => {
@@ -79,7 +89,6 @@ export async function getPolyToolConvertDialog(targetCol?: DG.Column): Promise<D
       rulesForm
     ]);
 
-
     const exec = async (): Promise<void> => {
       try {
         const ruleFileList = await ruleInputs.getActive();
@@ -95,7 +104,17 @@ export async function getPolyToolConvertDialog(targetCol?: DG.Column): Promise<D
     subs.push(dialog.onClose.subscribe(() => {
       destroy();
     }));
-
+    dialog.history(
+      /* getInput */ (): PolyToolConvertSerialized => {
+        return {
+          generateHelm: generateHelmChoiceInput.value,
+          chiralityEngine: chiralityEngineInput.value,
+        };
+      },
+      /* applyInput */ (x: PolyToolConvertSerialized): void => {
+        generateHelmChoiceInput.value = x.generateHelm;
+        chiralityEngineInput.value = x.chiralityEngine;
+      });
     return dialog;
   } catch (err: any) {
     destroy(); // on failing to build a dialog
@@ -133,15 +152,15 @@ async function getPolyToolEnumerationChemDialog(cell?: DG.Cell): Promise<DG.Dial
     molInput.setMolFile(molfileValue);
 
     //const helmInput = helmHelper.createHelmInput('Macromolecule', {value: helmValue});
-    const screenLibrary = ui.input.choice('Library to use', {value: null, items: libList});
+    const screenLibraryInput = ui.input.choice('Library to use', {value: null, items: libList});
 
     molInput.root.setAttribute('style', `min-width:250px!important;`);
     molInput.root.setAttribute('style', `max-width:250px!important;`);
-    screenLibrary.input.setAttribute('style', `min-width:250px!important;`);
+    screenLibraryInput.input.setAttribute('style', `min-width:250px!important;`);
 
     const div = ui.div([
       molInput.root,
-      screenLibrary.root
+      screenLibraryInput.root
     ]);
 
     subs.push(grok.events.onCurrentCellChanged.subscribe(() => {
@@ -160,7 +179,7 @@ async function getPolyToolEnumerationChemDialog(cell?: DG.Cell): Promise<DG.Dial
         } else if (!molString.includes('R#')) {
           grok.shell.warning('PolyTool: no R group was provided');
         } else {
-          const molecules = await getEnumerationChem(molString, screenLibrary.value!);
+          const molecules = await getEnumerationChem(molString, screenLibraryInput.value!);
           const molCol = DG.Column.fromStrings('Enumerated', molecules);
           const df = DG.DataFrame.fromColumns([molCol]);
           grok.shell.addTableView(df);
@@ -182,6 +201,17 @@ async function getPolyToolEnumerationChemDialog(cell?: DG.Cell): Promise<DG.Dial
     subs.push(dialog.onClose.subscribe(() => {
       destroy();
     }));
+    dialog.history(
+      /* getInput */ (): PolyToolEnumerateChemSerialized => {
+        return {
+          mol: molInput.getMolFile(),
+          screenLibrary: screenLibraryInput.value,
+        };
+      },
+      /* applyInput */ (x: PolyToolEnumerateChemSerialized): void => {
+        molInput.setMolFile(x.mol);
+        screenLibraryInput.value = x.screenLibrary;
+      });
     return dialog;
   } catch (err: any) {
     destroy();
@@ -215,7 +245,7 @@ export async function polyToolConvert(
 
     const seqHelper: ISeqHelper = await getSeqHelper();
     const toAtomicLevelRes = await seqHelper.helmToAtomicLevel(resHelmCol, chiralityEngine, /* highlight */ generateHelm);
-    const resMolCol = toAtomicLevelRes.molCol;
+    const resMolCol = toAtomicLevelRes.molCol!;
     resMolCol.name = getUnusedName(table, `molfile(${seqCol.name})`);
     resMolCol.semType = DG.SEMTYPE.MOLECULE;
     if (table) {

package/src/polytool/pt-enumeration-helm-dialog.ts

@@ -10,7 +10,7 @@ import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {HelmAtom, HelmMol} from '@datagrok-libraries/helm-web-editor/src/types/org-helm';
 import {getHelmHelper, HelmInputBase} from '@datagrok-libraries/bio/src/helm/helm-helper';
 import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
-import {HelmType, ISeqMonomer} from '@datagrok-libraries/bio/src/helm/types';
+import {HelmType, PolymerType} from '@datagrok-libraries/bio/src/helm/types';
 import {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
 import {getSeqHelper, ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
 import '@datagrok-libraries/bio/src/types/input';
@@ -25,6 +25,7 @@ import {getLibrariesList} from './utils';
 import {doPolyToolEnumerateHelm, PT_HELM_EXAMPLE} from './pt-enumeration-helm';
 import {PolyToolPlaceholdersInput} from './pt-placeholders-input';
 import {defaultErrorHandler} from '../utils/err-info';
+import {PolyToolPlaceholdersBreadthInput} from './pt-placeholders-breadth-input';
 import {PT_UI_DIALOG_ENUMERATION} from './const';
 
 import {_package} from '../package';
@@ -32,15 +33,17 @@ import {_package} from '../package';
 type PolyToolEnumerateInputs = {
   macromolecule: HelmInputBase;
   placeholders: PolyToolPlaceholdersInput;
+  placeholdersBreadth: PolyToolPlaceholdersBreadthInput;
   enumeratorType: DG.ChoiceInput<PolyToolEnumeratorType>
   trivialNameCol: InputColumnBase,
   toAtomicLevel: DG.InputBase<boolean>;
   keepOriginal: DG.InputBase<boolean>;
 };
 
-type PolyToolEnumerateSerialized = {
+type PolyToolEnumerateHelmSerialized = {
   macromolecule: string;
   placeholders: string;
+  placeholdersBreadth: string;
   enumeratorType: PolyToolEnumeratorType;
   trivialNameCol: string;
   toAtomicLevel: boolean;
@@ -136,20 +139,27 @@ async function getPolyToolEnumerateDialog(
     const trivialNameSampleDiv = ui.divText('', {style: {marginLeft: '8px', marginTop: '2px'}});
     const warningsTextDiv = ui.divText('', {style: {color: 'red'}});
     inputs = {
+      macromolecule: helmHelper.createHelmInput(
+        'Macromolecule', {editable: false}),
+      placeholders: await PolyToolPlaceholdersInput.create(
+        'Placeholders', {
+          showAddNewRowIcon: true,
+          showRemoveRowIcon: true,
+          showRowHeader: false,
+          showCellTooltip: false,
+        }),
       enumeratorType: ui.input.choice<PolyToolEnumeratorType>(
         'Enumerator type', {
           value: PolyToolEnumeratorTypes.Single,
           items: Object.values(PolyToolEnumeratorTypes)
         }) as DG.ChoiceInput<PolyToolEnumeratorType>,
-      macromolecule: helmHelper.createHelmInput(
-        'Macromolecule', {editable: false}),
-      placeholders: await PolyToolPlaceholdersInput.create(
-        'Placeholders', {
+      placeholdersBreadth: await PolyToolPlaceholdersBreadthInput.create(
+        'Breadth', {
           showAddNewRowIcon: true,
           showRemoveRowIcon: true,
           showRowHeader: false,
           showCellTooltip: false,
-        }/*, 2/**/),
+        }),
       toAtomicLevel: ui.input.bool(
         'To atomic level', {value: false}),
       keepOriginal: ui.input.bool(
@@ -180,9 +190,9 @@ async function getPolyToolEnumerateDialog(
     inputs.placeholders.addValidator((value: string): string | null => {
       const errors: string[] = [];
       try {
-        const missedMonomerList: ISeqMonomer[] = [];
-        for (const [posVal, monomerSymbolList] of Object.entries(inputs.placeholders.placeholdersValue)) {
-          const pos = parseInt(posVal);
+        const missedMonomerList: { polymerType: PolymerType, symbol: string }[] = [];
+        for (const ph of inputs.placeholders.placeholdersValue) {
+          const pos = ph.position;
           if (pos >= inputs.macromolecule.molValue.atoms.length) {
             errors.push(`There is no monomer at position ${pos + 1}.`);
             continue;
@@ -190,7 +200,7 @@ async function getPolyToolEnumerateDialog(
           const a = inputs.macromolecule.molValue.atoms[pos];
           const helmType: HelmType = a.biotype()!;
           const polymerType = helmTypeToPolymerType(helmType);
-          for (const symbol of monomerSymbolList) {
+          for (const symbol of ph.monomers) {
             const substituteMonomer = monomerLib.getMonomer(polymerType, symbol)!;
             // TODO: Check substitution monomer is presented in the library
             if (!substituteMonomer || !substituteMonomer.lib)
@@ -228,8 +238,8 @@ async function getPolyToolEnumerateDialog(
         const hoveredAtom = helmHelper.getHoveredAtom(argsX, argsY, mol, inputs.macromolecule.root.clientHeight);
         if (hoveredAtom) {
           const hoveredAtomContIdx = hoveredAtom._parent.atoms.indexOf(hoveredAtom);
-          const hoveredAtomContIdxStr = (hoveredAtomContIdx + 1).toString();
-          const substitutingMonomers = inputs.placeholders.placeholdersValue[hoveredAtomContIdx];
+          const substitutingMonomers = inputs.placeholders.placeholdersValue
+            .find((ph) => ph.position === hoveredAtomContIdx)?.monomers;
 
           if (substitutingMonomers) {
             const cnt = ui.divText(substitutingMonomers.join(', '));
@@ -377,14 +387,17 @@ async function getPolyToolEnumerateDialog(
         } else /* if (helmSelections === undefined || helmSelections.length < 1) {
           grok.shell.warning('PolyTool: no selection was provided');
         } else /**/ {
-          if (Object.keys(inputs.placeholders.placeholdersValue).length === 0) {
+          if (Object.keys(inputs.placeholders.placeholdersValue).length === 0 &&
+            Object.keys(inputs.placeholdersBreadth.placeholdersBreadthValue).length === 0
+          ) {
             grok.shell.warning(`${PT_UI_DIALOG_ENUMERATION}: placeholders are empty`);
             return;
           }
           await getHelmHelper(); // initializes JSDraw and org
           const params: PolyToolEnumeratorParams = {
-            type: inputs.enumeratorType.value!,
             placeholders: inputs.placeholders.placeholdersValue,
+            type: inputs.enumeratorType.value!,
+            placeholdersBreadth: inputs.placeholdersBreadth.placeholdersBreadthValue,
             keepOriginal: inputs.keepOriginal.value,
           };
           const enumeratorResDf = await polyToolEnumerateHelm(srcHelm, srcId, params, inputs.toAtomicLevel.value, seqHelper);
@@ -399,6 +412,7 @@ async function getPolyToolEnumerateDialog(
       .add(inputs.macromolecule)
       .add(inputs.placeholders)
       .add(inputs.enumeratorType)
+      .add(inputs.placeholdersBreadth)
       .add(inputs.trivialNameCol)
       .add(inputs.toAtomicLevel)
       .add(inputs.keepOriginal)
@@ -412,20 +426,22 @@ async function getPolyToolEnumerateDialog(
       destroy();
     }));
     dialog.history(
-      /* getInput */ (): PolyToolEnumerateSerialized => {
+      /* getInput */ (): PolyToolEnumerateHelmSerialized => {
         return {
           macromolecule: inputs.macromolecule.stringValue,
           placeholders: inputs.placeholders.stringValue,
           enumeratorType: inputs.enumeratorType.value,
+          placeholdersBreadth: inputs.placeholdersBreadth.stringValue,
           trivialNameCol: inputs.trivialNameCol.stringValue,
           toAtomicLevel: inputs.toAtomicLevel.value,
           keepOriginal: inputs.keepOriginal.value,
         };
       },
-      /* applyInput */ (x: PolyToolEnumerateSerialized): void => {
+      /* applyInput */ (x: PolyToolEnumerateHelmSerialized): void => {
         inputs.macromolecule.stringValue = x.macromolecule;
         inputs.placeholders.stringValue = x.placeholders;
         inputs.enumeratorType.value = x.enumeratorType;
+        inputs.placeholdersBreadth.stringValue = x.placeholdersBreadth;
         inputs.trivialNameCol.stringValue = x.trivialNameCol;
         inputs.toAtomicLevel.value = x.toAtomicLevel;
         inputs.keepOriginal.value = x.keepOriginal;
@@ -453,9 +469,8 @@ async function polyToolEnumerateHelm(
     if (toAtomicLevel) {
       const seqHelper: ISeqHelper = await getSeqHelper();
       const toAtomicLevelRes = await seqHelper.helmToAtomicLevel(enumHelmCol, true, true);
-      toAtomicLevelRes.molCol.semType = DG.SEMTYPE.MOLECULE;
-      enumeratorResDf.columns.add(toAtomicLevelRes.molCol, false);
-      enumeratorResDf.columns.add(toAtomicLevelRes.molHighlightCol, false);
+      toAtomicLevelRes.molCol!.semType = DG.SEMTYPE.MOLECULE;
+      enumeratorResDf.columns.add(toAtomicLevelRes.molCol!, false);
     }
 
     if (srcId) {

package/src/polytool/pt-enumeration-helm.ts

@@ -10,7 +10,7 @@ import {
 
 import {Chain} from './pt-conversion';
 import {getAvailableMonomers} from './utils';
-import {PolyToolEnumeratorParams, PolyToolEnumeratorTypes, PolyToolPlaceholders} from './types';
+import {PolyToolEnumeratorParams, PolyToolEnumeratorTypes, PolyToolPlaceholders, PolyToolPlaceholdersBreadth} from './types';
 
 // For example keep monomers presented in HELMCoreLibrary.json only (not [NH2])
 export const PT_HELM_EXAMPLE = 'PEPTIDE1{R.[Aca].T.G.H.F.G.A.A.Y.P.E.[meI]}$$$$';
@@ -19,17 +19,21 @@ export const PT_HELM_EXAMPLE = 'PEPTIDE1{R.[Aca].T.G.H.F.G.A.A.Y.P.E.[meI]}$$$$'
 declare const JSDraw2: JSDraw2ModuleType;
 declare const org: OrgType;
 
-function polyToolEnumeratorCore(m: HelmMol, position: number, monomerList: string[]): HelmMol[] {
-  const resMolList: HelmMol[] = new Array<HelmMol>(monomerList.length);
-  for (let i = 0; i < monomerList.length; i++) {
-    const newSymbol = monomerList[i];
-    const resM = resMolList[i] = m.clone() as HelmMol;
-    const oldSymbol = resM.atoms[position].elem;
-    resM.atoms[position].elem = newSymbol;
+function polyToolEnumeratorCore(m: HelmMol, start: number, end: number, monomerList: string[]): HelmMol[] {
+  const resMolList: HelmMol[] = new Array<HelmMol>(monomerList.length * (end - start + 1));
+  for (let monI: number = 0; monI < monomerList.length; ++monI) {
+    const posCount = end - start + 1;
+    for (let posI: number = 0; posI < posCount; ++posI) {
+      const pos = start + posI;
+      const newSymbol = monomerList[monI];
+      const resM = resMolList[monI * posCount + posI] = m.clone() as HelmMol;
+      const oldSymbol = resM.atoms[pos].elem;
+      resM.atoms[pos].elem = newSymbol;
 
-    const idOldSymbol = oldSymbol?.length > 1 ? `[${oldSymbol}]` : oldSymbol;
-    const idNewSymbol = newSymbol?.length > 1 ? `[${newSymbol}]` : newSymbol;
-    resM.name = `${m.name}-${idOldSymbol}${position + 1}${idNewSymbol}`;
+      const idOldSymbol = oldSymbol?.length > 1 ? `[${oldSymbol}]` : oldSymbol;
+      const idNewSymbol = newSymbol?.length > 1 ? `[${newSymbol}]` : newSymbol;
+      resM.name = `${m.name}-${idOldSymbol}${pos + 1}${idNewSymbol}`;
+    }
   }
   return resMolList;
 }
@@ -40,18 +44,26 @@ function polyToolEnumeratorCore(m: HelmMol, position: number, monomerList: strin
  * @returns {string[]} List of enumerated molecules in Helm format
  */
 function getPtEnumeratorSingle(m: HelmMol, placeholders: PolyToolPlaceholders): HelmMol[] {
-  const coreResList: HelmMol[][] = Object.entries(placeholders)
-    .map(([p, monomerList]: [string, string[]]) => polyToolEnumeratorCore(m, parseInt(p), monomerList));
+  const coreResList: HelmMol[][] = placeholders
+    .map((ph) => polyToolEnumeratorCore(m, ph.position, ph.position, ph.monomers));
   const resMolList = coreResList.reduce((acc, posList) => acc.concat(posList), []);
   return resMolList;
 }
 
 function getPtEnumeratorMatrix(m: HelmMol, placeholders: PolyToolPlaceholders): HelmMol[] {
   let resMolList = [m];
-  for (const [p, monomerList] of Object.entries(placeholders)) {
-    const pos: number = parseInt(p);
-    const posResMolList: HelmMol[][] = resMolList.map((m: HelmMol) => polyToolEnumeratorCore(m, pos, monomerList));
-    resMolList = posResMolList.reduce((acc, l) => acc.concat(l), []);
+  for (const ph of placeholders) {
+    const phResMolList: HelmMol[][] = resMolList.map((m: HelmMol) => polyToolEnumeratorCore(m, ph.position, ph.position, ph.monomers));
+    resMolList = phResMolList.reduce((acc, l) => acc.concat(l), []);
+  }
+  return resMolList;
+}
+
+function getPtEnumeratorBreadth(m: HelmMol, placeholdersBreadth: PolyToolPlaceholdersBreadth): HelmMol[] {
+  let resMolList = [m];
+  for (const phb of placeholdersBreadth) {
+    const phResMolList: HelmMol[][] = resMolList.map((m: HelmMol) => polyToolEnumeratorCore(m, phb.start, phb.end, phb.monomers));
+    resMolList = phResMolList.reduce((acc, l) => acc.concat(l), []);
   }
   return resMolList;
 }
@@ -66,17 +78,25 @@ export function doPolyToolEnumerateHelm(
   const m = molHandler.m;
   m.name = id;
 
-  let resMolList: HelmMol[];
-  switch (params.type) {
-  case PolyToolEnumeratorTypes.Single: {
-    resMolList = getPtEnumeratorSingle(molHandler.m, params.placeholders);
-    break;
-  }
-  case PolyToolEnumeratorTypes.Matrix: {
-    resMolList = getPtEnumeratorMatrix(molHandler.m, params.placeholders);
-    break;
+  let resMolList: HelmMol[] = [];
+  if (params.placeholders) {
+    switch (params.type) {
+    case PolyToolEnumeratorTypes.Single: {
+      resMolList = getPtEnumeratorSingle(molHandler.m, params.placeholders);
+      break;
+    }
+    case PolyToolEnumeratorTypes.Matrix: {
+      resMolList = getPtEnumeratorMatrix(molHandler.m, params.placeholders);
+      break;
+    }
+    }
   }
+
+  let resBreadthMolList: HelmMol[] = [];
+  if (params.placeholdersBreadth) {
+    resBreadthMolList = getPtEnumeratorBreadth(molHandler.m, params.placeholdersBreadth);
   }
+  resMolList = resMolList.concat(resBreadthMolList);
 
   if (params.keepOriginal)
     resMolList = [m, ...resMolList];

package/src/polytool/pt-placeholders-breadth-input.ts

@@ -0,0 +1,111 @@
+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 {PolyToolPlaceholders, PolyToolPlaceholdersBreadth} from './types';
+import {parseMonomerSymbolList} from './pt-placeholders-input';
+
+export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFrame> {
+  get inputType(): string { return 'Breadth'; }
+
+  get dataType(): string { return DG.TYPE.DATA_FRAME; }
+
+  getInput(): HTMLElement { return this.gridHost; }
+
+  getValue(): DG.DataFrame { return this.grid.dataFrame; }
+
+  setValue(value: DG.DataFrame): void { this.grid.dataFrame = value; }
+
+  getStringValue(): string { return this.grid.dataFrame.toCsv(); }
+
+  setStringValue(str: string): void { this.grid.dataFrame = DG.DataFrame.fromCsv(str); }
+
+  get placeholdersBreadthValue(): PolyToolPlaceholdersBreadth {
+    return dfToPlaceholdersBreadth(this.grid.dataFrame);
+  }
+
+  private readonly gridHost: HTMLDivElement;
+  public readonly grid: DG.Grid;
+
+  private subs: Unsubscribable[] = [];
+
+  protected constructor(name: string | undefined, grid: DG.Grid, heightRowCount?: number) {
+    super();
+
+    if (name) this.captionLabel.innerText = name;
+
+    this.gridHost = ui.div([], {
+      classes: 'ui-input-editor',
+      style: {width: '100%', height: '100%', marginTop: '-8px', marginBottom: '8px', paddingBottom: '4px'},
+    });
+
+    this.grid = grid;
+    this.gridHost.append(this.grid.root);
+
+    if (heightRowCount != null) {
+      this.updateGridHeight(heightRowCount + 0.7);
+    } else {
+      this.updateGridHeight(this.grid.dataFrame.rowCount + 0.6);
+      this.subs.push(this.grid.dataFrame.onRowsAdded
+        .subscribe(() => { this.updateGridHeight(this.grid.dataFrame.rowCount + 0.6); }));
+    }
+    this.grid.root.style.width = `100%`;
+
+    this.subs.push(this.grid.dataFrame.onDataChanged.subscribe(() => {
+      this.fireChanged();
+    }));
+
+    this.subs.push(ui.onSizeChanged(this.grid.root).subscribe(() => {
+      this.grid.columns.byIndex(3)!.width = this.grid.root.clientWidth - this.grid.horzScroll.root.offsetWidth -
+        this.grid.columns.byIndex(0)!.width - this.grid.columns.byIndex(1)!.width - this.grid.columns.byIndex(2)!.width - 10;
+    }));
+
+    this.root.classList.add('ui-input-polytool-pos-grid');
+    this.root.append(this.gridHost);
+  }
+
+  detach(): void {
+    for (const sub of this.subs) sub.unsubscribe();
+  }
+
+  public static async create(
+    name?: string, options?: {}, heightRowCount?: number
+  ): Promise<PolyToolPlaceholdersBreadthInput> {
+    const df: DG.DataFrame = DG.DataFrame.fromColumns([
+      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'Start', 0),
+      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'End', 0),
+      DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'Monomers', 0),
+    ])!;
+    const grid = (await df.plot.fromType(DG.VIEWER.GRID, options)) as DG.Grid;
+    grid.sort(['Start', 'End']);
+    return new PolyToolPlaceholdersBreadthInput(name, grid, heightRowCount);
+  }
+
+  // -- Update view --
+
+  private updateGridHeight(visibleRowCount: number): void {
+    const gridHeight = this.grid.colHeaderHeight + visibleRowCount * this.grid.props.rowHeight + 6 + 2;
+    this.grid.root.style.height = `${gridHeight}px`;
+  }
+
+  // -- Handle events --
+
+  private gridRootOnSizeChanged(): void {
+    this.grid.columns.byIndex(3)!.width = this.grid.root.clientWidth - this.grid.horzScroll.root.offsetWidth -
+      this.grid.columns.byIndex(0)!.width - this.grid.columns.byIndex(1)!.width - this.grid.columns.byIndex(2)!.width - 10;
+  }
+}
+
+export function dfToPlaceholdersBreadth(df: DG.DataFrame): PolyToolPlaceholdersBreadth {
+  const res: PolyToolPlaceholdersBreadth = [];
+  for (let rowI = 0; rowI < df.rowCount; rowI++) {
+    const startPos = parseInt(df.get('Start', rowI));
+    const endPos = parseInt(df.get('End', rowI));
+    if (!isNaN(startPos) && !isNaN(endPos)) {
+      const monomerSymbolList = parseMonomerSymbolList(df.get('Monomers', rowI));
+      res.push({start: startPos, end: endPos, monomers: monomerSymbolList});
+    }
+  }
+  return res;
+}

package/src/polytool/pt-placeholders-input.ts

@@ -13,23 +13,15 @@ export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
 
   getInput(): HTMLElement { return this.gridHost; }
 
-  getValue(): DG.DataFrame {
-    return this.grid.dataFrame;
-  }
+  getValue(): DG.DataFrame { return this.grid.dataFrame; }
 
-  setValue(value: DG.DataFrame): void {
-    this.grid.dataFrame = value;
-  }
+  setValue(value: DG.DataFrame): void { this.grid.dataFrame = value; }
 
-  getStringValue(): string {
-    return this.grid.dataFrame.toCsv();
-  }
+  getStringValue(): string { return this.grid.dataFrame.toCsv(); }
 
-  setStringValue(str: string): void {
-    this.grid.dataFrame = DG.DataFrame.fromCsv(str);
-  }
+  setStringValue(str: string): void { this.grid.dataFrame = DG.DataFrame.fromCsv(str); }
 
-  get placeholdersValue() {
+  get placeholdersValue(): PolyToolPlaceholders {
     return dfToPlaceholders(this.grid.dataFrame);
   }
 
@@ -80,7 +72,9 @@ export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
   public static async create(
     name?: string, options?: {}, heightRowCount?: number
   ): Promise<PolyToolPlaceholdersInput> {
-    const df: DG.DataFrame = DG.DataFrame.fromObjects([{Position: '', Monomers: ''}])!;
+    const df: DG.DataFrame = DG.DataFrame.fromColumns([
+      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'Position', 0),
+      DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'Monomers', 0),])!;
     const grid = (await df.plot.fromType(DG.VIEWER.GRID, options)) as DG.Grid;
     grid.sort(['Position']);
     return new PolyToolPlaceholdersInput(name, grid, heightRowCount);
@@ -102,26 +96,25 @@ export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
 }
 
 export function getPlaceholdersFromText(src: string): PolyToolPlaceholders {
-  const res: PolyToolPlaceholders = {};
+  const res: PolyToolPlaceholders = [];
   for (const line of src.split('\n')) {
     const lineM = /^\s*(?<pos>\d+)\s*:\s*(?<monomers>.+)$/.exec(line);
     if (lineM) {
       const pos: number = parseInt(lineM.groups!['pos']) - 1;
       const monomerList: string[] = lineM.groups!['monomers'].split(',').map((m) => m.trim());
-      if (!(pos in res)) res[pos] = [];
-      res[pos].push(...monomerList);
+      res.push({position: pos, monomers: monomerList});
     }
   }
   return res;
 }
 
 export function dfToPlaceholders(df: DG.DataFrame): PolyToolPlaceholders {
-  const res: PolyToolPlaceholders = {};
+  const res: PolyToolPlaceholders = [];
   for (let rowI = 0; rowI < df.rowCount; rowI++) {
     const pos = parseInt(df.get('Position', rowI));
     if (!isNaN(pos)) {
       const monomerSymbolList = parseMonomerSymbolList(df.get('Monomers', rowI));
-      res[pos - 1] = monomerSymbolList;
+      res.push({position: pos, monomers: monomerSymbolList});
     }
   }
   return res;

package/src/polytool/types.ts

@@ -9,12 +9,15 @@ export enum PolyToolEnumeratorTypes {
 
 export type PolyToolEnumeratorType = typeof PolyToolEnumeratorTypes[keyof typeof PolyToolEnumeratorTypes];
 
-export type PolyToolPlaceholders = { [position: number]: string[] };
+export type PolyToolPlaceholders = { position: number, monomers: string[] } [];
+
+export type PolyToolPlaceholdersBreadth = { start: number, end: number, monomers: string[] }[];
 
 export type PolyToolEnumeratorParams = {
   type: PolyToolEnumeratorType;
   /** position key is zero-based */
-  placeholders: PolyToolPlaceholders;
+  placeholders?: PolyToolPlaceholders;
+  placeholdersBreadth?: PolyToolPlaceholdersBreadth;
   keepOriginal?: boolean;
   trivialName?: boolean;
 }