@datagrok/sequence-translator 1.4.8 → 1.5.0

package/src/polytool/conversion/pt-misc.ts

@@ -0,0 +1,193 @@
+import * as grok from 'datagrok-api/grok';
+
+import wu from 'wu';
+import {PolymerTypes} from '@datagrok-libraries/bio/src/helm/consts';
+import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {IMonomerLib, IMonomerLibBase, Monomer, MonomerLibData, RGroup} from '@datagrok-libraries/bio/src/types';
+import {RDModule, RDMol, RDReaction, MolList, RDReactionResult} from '@datagrok-libraries/chem-meta/src/rdkit-api';
+import {HELM_REQUIRED_FIELD as REQ,
+  HELM_OPTIONAL_FIELDS as OPT, HELM_RGROUP_FIELDS} from '@datagrok-libraries/bio/src/utils/const';
+import {getRdKitModule} from '@datagrok-libraries/bio/src/chem/rdkit-module';
+import {Rules, RuleReaction, getMonomerPairs} from './pt-rules';
+import {InvalidReactionError, MonomerNotFoundError} from '../types';
+import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
+
+/** Gets 0-based in-index (simple polymer) of out-index (continuous) {@link idx} */
+export function getInnerIdx(outIdx: number, monomers: string[][]): [number, number] {
+  // let prevSpCount = 0;
+  // for (let spI = 0; spI < monomers.length && idx >= (prevSpCount + monomers[spI].length); ++spI)
+  //   prevSpCount += monomers[spI].length;
+  // return idx - prevSpCount;
+  let inIdx = outIdx;
+  let spIdx: number;
+  for (spIdx = 0; spIdx < monomers.length && inIdx >= monomers[spIdx].length; ++spIdx)
+    inIdx -= monomers[spIdx].length;
+  return [inIdx, spIdx];
+}
+
+/** Gets 0-based out-index of 0-based in-index {@link inIdx} monomer of simple polymer {@link spIdx} */
+export function getOuterIdx(inIdx: number, spIdx: number, monomers: string[][]): number {
+  let outIdx = 0;
+  for (let i = 0; i < spIdx; ++i)
+    outIdx += monomers[i].length;
+  return outIdx + inIdx;
+}
+
+function getMonomersMolBlocks(monomer1: Monomer, monomer2: Monomer): [string, string] {
+  const mb1 = monomer1.molfile;
+  let mb2 = monomer2.molfile;
+  const addGroups = monomer1.rgroups.length;
+
+  //mol v2000 monomer
+  const rgpIdx = mb2.indexOf('M  RGP');
+  if (rgpIdx !== -1) {
+    const groupsCountStr = mb2.substring(rgpIdx + 6, rgpIdx + 9);
+    const groupsCount = Number(groupsCountStr);
+
+    for (let i = 0; i < groupsCount; i++) {
+      const start = rgpIdx + 9 + 4 + i * 8;
+      const end = rgpIdx + 9 + 8 + i * 8;
+      const rGroupSpecifier = mb2.substring(start, end);
+      const groupPosition = Number(rGroupSpecifier) + addGroups;
+      const digits = Math.floor(Math.log10(groupPosition) + 1);
+      const newSpecifier = ' '.repeat(4 - digits) + String(groupPosition);
+      mb2 = mb2.substring(0, start) + newSpecifier + mb2.substring(end, mb2.length);
+    }
+  }
+
+  //TODO: same for v3000 monomer
+
+  return [mb1, mb2];
+}
+
+function getSyntheticMolBlock(rdkit: RDModule, reaction: string,
+  mb1: string, mb2: string, monomerName: string): string {
+  let rxn: RDReaction | null = null;
+  let mols: MolList | null = null;
+  let mol1: RDMol | null = null;
+  let mol2: RDMol | null = null;
+  let rctns: RDReactionResult | null = null;
+  let molP: RDMol | null = null;
+  let molBlock = '';
+
+  try {
+    rxn = rdkit.get_rxn(reaction);
+    if (!rxn) throw new InvalidReactionError(reaction);
+    mols = new rdkit.MolList();
+    mol1 = rdkit.get_mol(mb1!);
+    mol2 = rdkit.get_mol(mb2!);
+    mols.append(mol1!);
+    mols.append(mol2!);
+
+    rctns = rxn.run_reactants(mols, 1);
+    //const size = rctns.size();
+    const element = rctns.get(0);
+
+    molP = element.next();
+    molBlock = molP?.get_molblock();//molP?.get_v3Kmolblock();//
+  } catch (err: any) {
+    const [errMsg, _errStack] = errInfo(err);
+    grok.shell.error(`Can not assemble monomer '${monomerName}': ${errMsg}.`);
+    throw err;
+  } finally {
+    rxn?.delete();
+    mols?.delete();
+    mol1?.delete();
+    mol2?.delete();
+    rctns?.delete();
+    molP?.delete();
+  }
+
+  return molBlock;
+}
+
+function getNewGroups(monomer1: Monomer, monomer2: Monomer): RGroup[] {
+  const groups = new Array<RGroup>(monomer1?.rgroups.length! + monomer2?.rgroups.length!);
+  const length1 = monomer1?.rgroups.length!;
+  const length2 = monomer2?.rgroups.length!;
+
+  for (let i = 0; i < length1; i++)
+    groups[i] = monomer1?.rgroups[i]!;
+
+  for (let i = 0; i < length2; i++) {
+    const rGroupSpecifier = monomer2?.rgroups[i]!.label.replace('R', '');
+    const groupPosition = Number(rGroupSpecifier) + length1;
+    const group: RGroup = {
+      //@ts-ignore
+      [HELM_RGROUP_FIELDS.CAP_GROUP_SMILES_UPPERCASE]: monomer2?.rgroups[i].capGroupSMILES
+        .replace(rGroupSpecifier, String(groupPosition)),
+      [HELM_RGROUP_FIELDS.ALTERNATE_ID]: monomer2?.rgroups[i].alternateId
+        .replace(rGroupSpecifier, String(groupPosition)),
+      [HELM_RGROUP_FIELDS.CAP_GROUP_NAME]: monomer2?.rgroups[i].capGroupName,
+      [HELM_RGROUP_FIELDS.LABEL]: monomer2?.rgroups[i].label.replace(rGroupSpecifier, String(groupPosition)),
+    };
+
+    groups[i + length1] = group;
+  }
+
+  return groups;
+}
+
+export function getNewMonomers(rdkit: RDModule, mLib: IMonomerLib, rule: RuleReaction): [string[], Monomer[]] {
+  const reacSmarts = rule.reaction;
+  const monomerName = rule.name;
+
+  const [firstMonomers, secondMonomers] = getMonomerPairs(rule);
+
+  const monomerNames = new Array<string>(firstMonomers.length);
+  const resMonomers = new Array<Monomer>(firstMonomers.length);
+
+  for (let i = 0; i < firstMonomers.length; i ++) {
+    const monomer1 = mLib.getMonomer('PEPTIDE', firstMonomers[i]);
+    if (!monomer1) throw new MonomerNotFoundError('PEPTIDE', firstMonomers[i]);
+    const monomer2 = mLib.getMonomer('PEPTIDE', secondMonomers[i]);
+    if (!monomer2) throw new MonomerNotFoundError('PEPTIDE', secondMonomers[i]);
+
+    const [mb1, mb2] = getMonomersMolBlocks(monomer1!, monomer2!);
+    const molBlock = getSyntheticMolBlock(rdkit, reacSmarts, mb1, mb2, monomerName);
+    const groups: RGroup[] = getNewGroups(monomer1!, monomer2!);
+
+    const resMonomer: Monomer = {
+      [REQ.SYMBOL]: monomerName,
+      [REQ.NAME]: monomerName,
+      [REQ.MOLFILE]: molBlock,
+      [REQ.AUTHOR]: '',
+      [REQ.ID]: 0,
+      [REQ.RGROUPS]: groups,
+      [REQ.SMILES]: '',
+      [REQ.POLYMER_TYPE]: 'PEPTIDE',
+      [REQ.MONOMER_TYPE]: 'Backbone',
+      [REQ.CREATE_DATE]: null,
+      // // @ts-ignore
+      // lib: {source: 'Reaction'},
+    };
+
+    resMonomer[OPT.META] = Object.assign(resMonomer[OPT.META] ?? {},
+      {'colors': {'default': {line: '#2083D5', text: '#2083D5', background: '#F2F2F5'}}});
+
+    monomerNames[i] = monomerName;
+    resMonomers[i] = resMonomer;
+  }
+
+  return [monomerNames, resMonomers];
+}
+
+export async function getOverriddenLibrary(rules: Rules): Promise<IMonomerLibBase> {
+  const monomerLibHelper = await getMonomerLibHelper();
+  const systemMonomerLib = monomerLibHelper.getMonomerLib();
+
+  const rdkit = await getRdKitModule();
+  const argLib: { [symbol: string]: Monomer } = {};
+
+  for (let i = 0; i < rules.reactionRules.length; i++) {
+    const [names, monomers] = getNewMonomers(rdkit, systemMonomerLib, rules.reactionRules[i]);
+    for (let j = 0; j < names.length; j ++)
+      argLib[names[j]] = monomers[j];
+  }
+
+  const overrideMonomerLibData: MonomerLibData = {[PolymerTypes.PEPTIDE]: argLib};
+  const overriddenMonomerLib = systemMonomerLib.override(overrideMonomerLibData,
+    'ST-PT-reactions.' + wu.repeat(1).map(() => Math.floor((Math.random() * 36))
+      .toString(36)).take(4).toArray().join(''));
+  return overriddenMonomerLib;
+}

package/src/polytool/conversion/pt-rules.ts

@@ -0,0 +1,231 @@
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+import {ActiveFiles} from '@datagrok-libraries/utils/src/settings/active-files-base';
+import {RulesManager} from './rule-manager';
+
+export const RULES_PATH = 'System:AppData/SequenceTranslator/polytool-rules/';
+export const RULES_STORAGE_NAME = 'Polytool';
+export const RULES_TYPE_LINK = 'link';
+export const RULES_TYPE_REACTION = 'reaction';
+export const RULES_TYPE_HOMODIMER = 'fragmentDuplication';
+export const RULES_TYPE_HETERODIMER = 'differentFragments';
+
+const NAME_CODE = 'code';
+const NAME_FIRST_MONOMERS = 'firstMonomers';
+const NAME_SECOND_MONOMERS = 'secondMonomers';
+const NAME_REACTION_NAME = 'name';
+const NAME_FIRST_LINK = 'firstLinkingGroup';
+const NAME_SECOND_LINK = 'secondLinkingGroup';
+
+export class RuleInputs extends ActiveFiles {
+  constructor(
+    path: string, userStorageName: string, ext: string,
+    options?: { onValueChanged: (value: string[]) => void }
+  ) {
+    super(path, userStorageName, ext, options);
+  }
+
+  override createInput(available: string, isChecked: boolean): DG.InputBase<boolean> {
+    const res = super.createInput(available, isChecked);
+
+    const editIcon = ui.icons.edit(async () => {
+      const rulesManager = await RulesManager.getInstance(available);
+      //await rulesManager.show();
+      grok.shell.addView(await rulesManager.getView());
+    }, 'Edit rules');
+
+    res.addOptions(editIcon);
+
+    return res;
+  }
+}
+
+export type RuleLink = {
+  code: number,
+  firstMonomers: string[],
+  secondMonomers: string[],
+  firstLinkingGroup: number,
+  secondLinkingGroup: number
+}
+
+export type RuleReaction = {
+  code: number,
+  firstMonomers: string[],
+  secondMonomers: string[],
+  reaction: string,
+  name: string
+}
+
+export class Rules {
+  homodimerCode: string | null;
+  heterodimerCode: string | null;
+  linkRules: RuleLink[];
+  reactionRules: RuleReaction[];
+
+  constructor(homodimerCode: string | null, heterodimerCode: string | null,
+    linkRules: RuleLink[], reactionRules: RuleReaction[]) {
+    this.homodimerCode = homodimerCode;
+    this.heterodimerCode = heterodimerCode;
+    this.linkRules = linkRules;
+    this.reactionRules = reactionRules;
+  }
+
+  set homodimer(code: string) {
+    this.homodimerCode = code;
+  }
+
+  set heterodimer(code: string) {
+    this.heterodimerCode = code;
+  }
+
+  addLinkRules(rules: RuleLink[]): void {
+    for (let j = 0; j < rules.length; j++)
+      this.linkRules.push(rules[j]);
+  }
+
+  addSynthesisRules(rules: RuleReaction[]): void {
+    for (let j = 0; j < rules.length; j++)
+      this.reactionRules.push(rules[j]);
+  }
+
+  getLinkRulesDf(): DG.DataFrame {
+    const length = this.linkRules.length;
+    const codeCol = DG.Column.int(NAME_CODE, length);
+    const firstMonomerCol = DG.Column.string(NAME_FIRST_MONOMERS, length);
+    const secondMonomerCol = DG.Column.string(NAME_SECOND_MONOMERS, length);
+    const firstLinkingGroup = DG.Column.int(NAME_FIRST_LINK, length);
+    const secondLinkingGroup = DG.Column.int(NAME_SECOND_LINK, length);
+
+    for (let i = 0; i < length; i++) {
+      codeCol.set(i, this.linkRules[i].code);
+      firstMonomerCol.set(i, this.linkRules[i].firstMonomers.toString());
+      secondMonomerCol.set(i, this.linkRules[i].secondMonomers.toString());
+      firstLinkingGroup.set(i, this.linkRules[i].firstLinkingGroup);
+      secondLinkingGroup.set(i, this.linkRules[i].secondLinkingGroup);
+    }
+
+    return DG.DataFrame.fromColumns([
+      codeCol, firstMonomerCol, secondMonomerCol, firstLinkingGroup, secondLinkingGroup
+    ]);
+  }
+
+  getSynthesisRulesDf(): DG.DataFrame {
+    const length = this.reactionRules.length;
+    const codeCol = DG.Column.int(NAME_CODE, length);
+    const firstMonomerCol = DG.Column.string(NAME_FIRST_MONOMERS, length);
+    const secondMonomerCol = DG.Column.string(NAME_SECOND_MONOMERS, length);
+    const name = DG.Column.string(NAME_REACTION_NAME, length);
+    const firstReactant = DG.Column.string('firstReactant', length);
+    const secondReactant = DG.Column.string('secondReactant', length);
+    const product = DG.Column.string('product', length);
+
+    for (let i = 0; i < length; i++) {
+      codeCol.set(i, this.reactionRules[i].code);
+      firstMonomerCol.set(i, this.reactionRules[i].firstMonomers.toString());
+      secondMonomerCol.set(i, this.reactionRules[i].secondMonomers.toString());
+      name.set(i, this.reactionRules[i].name);
+
+      const reaction = this.reactionRules[i].reaction.split('>>');
+      const reactants = reaction[0].split('.');
+
+      firstReactant.set(i, reactants[0]);
+      secondReactant.set(i, reactants[1]);
+      product.set(i, reaction[1]);
+    }
+    firstReactant.semType = DG.SEMTYPE.MOLECULE;
+    secondReactant.semType = DG.SEMTYPE.MOLECULE;
+    product.semType = DG.SEMTYPE.MOLECULE;
+
+
+    return DG.DataFrame.fromColumns([
+      name, firstReactant, secondReactant, product, codeCol, firstMonomerCol, secondMonomerCol
+    ]);
+  }
+
+  setLinkRules(df: DG.DataFrame) : void {
+    const length = df.rowCount;
+    const rules: RuleLink [] = new Array<RuleLink>(length);
+    const codeCol = df.columns.byName(NAME_CODE);
+    const firstMonomerCol = df.columns.byName(NAME_FIRST_MONOMERS);
+    const secondMonomerCol = df.columns.byName(NAME_SECOND_MONOMERS);
+    const firstLink = df.columns.byName(NAME_FIRST_LINK);
+    const secondLink = df.columns.byName(NAME_SECOND_LINK);
+
+
+    for (let i = 0; i < length; i++) {
+      const rule = {
+        code: codeCol.get(i),
+        firstMonomers: firstMonomerCol.get(i).split(','),
+        secondMonomers: secondMonomerCol.get(i).split(','),
+        firstLinkingGroup: firstLink.get(i),
+        secondLinkingGroup: secondLink.get(i)
+      };
+
+      rules[i] = rule;
+    }
+
+    this.linkRules = rules;
+  }
+
+  setSynthesisRules(df: DG.DataFrame) : void {
+    const length = df.rowCount;
+    const rules: RuleReaction [] = new Array<RuleReaction>(length);
+    const codeCol = df.columns.byName(NAME_CODE);
+    const firstMonomerCol = df.columns.byName(NAME_FIRST_MONOMERS);
+    const secondMonomerCol = df.columns.byName(NAME_SECOND_MONOMERS);
+    const name = df.columns.byName(NAME_REACTION_NAME);
+    const firstReactant = df.columns.byName('firstReactant');
+    const secondReactant = df.columns.byName('secondReactant');
+    const product = df.columns.byName('product');
+
+    for (let i = 0; i < length; i++) {
+      const smartsReaction = `${firstReactant.get(i)}.${secondReactant.get(i)}>>${product.get(i)}`;
+
+      const rule = {
+        code: codeCol.get(i),
+        firstMonomers: firstMonomerCol.get(i).split(','),
+        secondMonomers: secondMonomerCol.get(i).split(','),
+        reaction: smartsReaction,
+        name: name.get(i)
+      };
+
+      rules[i] = rule;
+    }
+
+    this.reactionRules = rules;
+  }
+}
+
+export async function getRules(ruleFiles: string[]): Promise<Rules> {
+  const fileSource = new DG.FileSource(RULES_PATH);
+  const rules: Rules = new Rules(null, null, [], []);
+
+  for (let i = 0; i < ruleFiles.length; i++) {
+    const rulesRaw = await fileSource.readAsText(ruleFiles[i].replace(RULES_PATH, ''));
+    const ruleSingle : Rules = JSON.parse(rulesRaw);
+
+    rules.homodimer = ruleSingle.homodimerCode!;
+    rules.heterodimer = ruleSingle.heterodimerCode!;
+    rules.addLinkRules(ruleSingle.linkRules);
+    rules.addSynthesisRules(ruleSingle.reactionRules);
+  }
+
+  return rules;
+}
+
+export function getMonomerPairs(rule: RuleLink | RuleReaction) : [string[], string[]] {
+  const allPairsNum = rule.firstMonomers.length*rule.secondMonomers.length;
+  const firstMonomers = new Array<string>(allPairsNum);
+  const secondMonomers = new Array<string>(allPairsNum);
+
+  let counter = 0;
+  for (let i = 0; i < rule.firstMonomers.length; i++) {
+    for (let j = 0; j < rule.secondMonomers.length; j++) {
+      firstMonomers[counter] = rule.firstMonomers[i];
+      secondMonomers[counter] = rule.secondMonomers[j];
+      counter++;
+    }
+  }
+
+  return [firstMonomers, secondMonomers];
+}

package/src/polytool/conversion/rule-manager.ts

@@ -0,0 +1,205 @@
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+import {getMonomerPairs, getRules, Rules} from './pt-rules';
+import {_package, applyNotationProviderForCyclized} from '../../package';
+import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {doPolyToolConvert} from './pt-conversion';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+
+export class RulesManager {
+  rules: Rules;
+  linkRuleDataFrame: DG.DataFrame;
+  synthRuleDataFrame: DG.DataFrame;
+  fileName: string;
+  v: DG.View | null = null;
+
+  homoDimerInput: DG.InputBase;
+  heteroDimerInput: DG.InputBase;
+
+  currentTab = '';
+
+  private static instance: RulesManager;
+
+  protected constructor(rules: Rules, fileName: string) {
+    this.rules = rules;
+    this.linkRuleDataFrame = this.rules.getLinkRulesDf();
+    this.synthRuleDataFrame = this.rules.getSynthesisRulesDf();
+    this.fileName = fileName;
+
+    const homoValue = this.rules.homodimerCode ? this.rules.homodimerCode : '';
+    const heteroValue = this.rules.heterodimerCode ? this.rules.heterodimerCode : '';
+    this.homoDimerInput = ui.input.string('Homo dimer', {value: homoValue, onValueChanged: () => {}, nullable: false});
+    this.heteroDimerInput = ui.input.string(
+      'Hetero dimer', {value: heteroValue, onValueChanged: () => {}, nullable: false}
+    );
+  }
+
+  async getView(): Promise<DG.ViewBase> {
+    if (!this.v) {
+      this.v = DG.View.create();
+      this.v.append(await this.getForm());
+    }
+
+    return this.v;
+  }
+
+  public static async getInstance(name: string): Promise<RulesManager> {
+    if (!this.instance) {
+      const rules = await getRules([name]);
+      this.instance = new RulesManager(rules, name);
+    }
+    return this.instance;
+  }
+
+  save(): void {
+    this.rules.homodimerCode = this.homoDimerInput.value;
+    this.rules.heterodimerCode = this.heteroDimerInput.value;
+    this.rules.setLinkRules(this.linkRuleDataFrame);
+    this.rules.setSynthesisRules(this.synthRuleDataFrame);
+
+    const saveable = {
+      homodimerCode: this.rules.homodimerCode,
+      heterodimerCode: this.rules.heterodimerCode,
+      linkRules: this.rules.linkRules,
+      reactionRules: this.rules.reactionRules,
+    };
+
+    const rrrr = JSON.stringify(saveable, undefined, 2);
+    _package.files.writeAsText(`polytool-rules/${this.fileName}`, rrrr);
+    grok.shell.info(`Polytool rules at ${this.fileName} was updated`);
+  }
+
+  private createGridDiv(name: string, grid: DG.Grid) {
+    const header = ui.h1(name, 'polytool-grid-header');
+    grid.root.prepend(header);
+    grid.root.style.height = '100%';
+    return grid.root;
+  };
+
+  async getLinkExamplesGrid() {
+    const seqs: string[] = [];
+
+    for (let i = 0; i < this.rules.linkRules.length; i++) {
+      const code = this.rules.linkRules[i].code;
+      const [firstMonomers, secondMonomers] = getMonomerPairs(this.rules.linkRules[i]);
+      for (let j = 0; j < firstMonomers.length; j++) {
+        const seq = `${firstMonomers[j]}(${code})-A-A-A-A-${secondMonomers[j]}(${code})-A`;
+        seqs.push(seq);
+      }
+    }
+    const helmHelper = await getHelmHelper();
+
+    const helms = doPolyToolConvert(seqs, this.rules, helmHelper);
+
+    const initCol = DG.Column.fromStrings('monomers', seqs);
+    const helmCol = DG.Column.fromStrings('helm', helms);
+
+    initCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    applyNotationProviderForCyclized(initCol, '-');
+
+    helmCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    helmCol.meta.units = NOTATION.HELM;
+    helmCol.setTag(DG.TAGS.CELL_RENDERER, 'helm');
+    return DG.DataFrame.fromColumns([
+      initCol, helmCol
+    ]).plot.grid();
+  }
+
+  async getReactionExamplesGrid() {
+    const seqs: string[] = [];
+
+    for (let i = 0; i < this.rules.reactionRules.length; i++) {
+      const code = this.rules.reactionRules[i].code;
+      const [firstMonomers, secondMonomers] = getMonomerPairs(this.rules.reactionRules[i]);
+      for (let j = 0; j < firstMonomers.length; j++) {
+        const seq = `${firstMonomers[j]}(${code})-A-A-A-A-${secondMonomers[j]}(${code})-A`;
+        seqs.push(seq);
+      }
+    }
+    const helmHelper = await getHelmHelper();
+
+    const helms = doPolyToolConvert(seqs, this.rules, helmHelper);
+
+    const initCol = DG.Column.fromStrings('monomers', seqs);
+    const helmCol = DG.Column.fromStrings('helm', helms);
+
+    initCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    applyNotationProviderForCyclized(initCol, '-');
+
+    helmCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    helmCol.meta.units = NOTATION.HELM;
+    helmCol.setTag(DG.TAGS.CELL_RENDERER, 'helm');
+    return DG.DataFrame.fromColumns([
+      initCol, helmCol
+    ]).plot.grid();
+  }
+
+  async getForm() {
+    inputsTabControl: DG.TabControl;
+
+    const dimerInputsDiv = ui.divV([
+      this.homoDimerInput,
+      this.heteroDimerInput,
+    ]);
+
+    const linkExamples = await this.getLinkExamplesGrid();
+    const reactionExamples = await this.getReactionExamplesGrid();
+
+    const inputsTabControl = ui.tabControl({
+      'Links': linkExamples,
+      'Reactions': reactionExamples,
+      'Dimers': dimerInputsDiv,
+    }, false);
+
+    inputsTabControl.root.style.height = '90%';
+    inputsTabControl.root.style.width = '100%';
+    inputsTabControl.root.classList.add('rules-manager-form-tab-control');
+    inputsTabControl.header.style.marginBottom = '10px';
+
+    const linksGridDiv = this.createGridDiv('Link rules', this.linkRuleDataFrame.plot.grid({showAddNewRowIcon: true}));
+    const reactionsGridDiv =
+      this.createGridDiv('Reaction rules', this.synthRuleDataFrame.plot.grid({showAddNewRowIcon: true}));
+
+    linksGridDiv.style.width = '100%';
+    reactionsGridDiv.style.width = '100%';
+
+    const divs = [linksGridDiv, reactionsGridDiv, ui.div()];
+    divs[0].style.removeProperty('display');
+    divs[1].style.display = 'none';
+    divs[2].style.display = 'none';
+
+    inputsTabControl.onTabChanged.subscribe(() => {
+      this.currentTab = inputsTabControl.currentPane.name;
+
+      const idx = inputsTabControl.panes.findIndex((p) => p.name == this.currentTab);
+
+      for (let i = 0; i < divs.length; i++) {
+        if (i == idx)
+          divs[i].style.removeProperty('display');
+        else
+          divs[i].style.display = 'none';
+      }
+    });
+
+    const saveButton = ui.bigButton('Save changes', () => {
+      this.save();
+    });
+
+
+    const panel = ui.divV([
+      inputsTabControl.root,
+      saveButton
+    ]);
+
+    panel.style.height = '100%';
+    panel.style.alignItems = 'center';
+
+    const form = ui.splitH([
+      panel,
+      ui.divV(divs, {style: {width: '100%'}})
+    ], {style: {width: '100%'}}, true);
+    form.style.height = '100%';
+    return form;
+  }
+}
+

package/src/polytool/pt-convert-editor.ts

@@ -4,7 +4,7 @@ import * as DG from 'datagrok-api/dg';
 import {_package} from '../package';
 import {defaultErrorHandler} from '../utils/err-info';
 import {PT_UI_DIALOG_CONVERSION, PT_UI_RULES_USED} from './const';
-import {RuleInputs, RULES_PATH, RULES_STORAGE_NAME} from './pt-rules';
+import {RuleInputs, RULES_PATH, RULES_STORAGE_NAME} from './conversion/pt-rules';
 
 /** Inputs of polyToolConvert2 package function */
 export enum P {