@datagrok/sequence-translator 1.6.4 → 1.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.6.4",
+  "version": "1.8.0",
   "author": {
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
@@ -22,13 +22,13 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.46.0",
-    "@datagrok-libraries/chem-meta": "^1.2.7",
+    "@datagrok-libraries/bio": "^5.50.0",
+    "@datagrok-libraries/chem-meta": "^1.2.8",
     "@datagrok-libraries/tutorials": "^1.4.3",
     "@datagrok-libraries/utils": "^4.3.7",
     "@types/react": "^18.0.15",
     "cash-dom": "^8.1.0",
-    "datagrok-api": "^1.21.1",
+    "datagrok-api": "^1.24.0",
     "lodash": "^4.17.21",
     "object-hash": "^3.0.0",
     "openchemlib": "6.0.1",
@@ -41,10 +41,10 @@
   "devDependencies": {
     "@datagrok-libraries/helm-web-editor": "^1.1.13",
     "@datagrok-libraries/js-draw-lite": "^0.0.10",
-    "@datagrok/bio": "^2.17.2",
-    "@datagrok/helm": "^2.5.8",
-    "@datagrok/chem": "^1.12.4",
-    "@types/jquery": "^3.5.14",
+    "@datagrok/bio": "^2.18.0",
+    "@datagrok/chem": "^1.13.0",
+    "@datagrok/helm": "^2.7.0",
+    "@types/jquery": "^3.5.32",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.202",
     "@types/node-fetch": "^2.6.2",

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

@@ -0,0 +1,70 @@
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+
+import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {getSeqHelper, ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
+import {_toAtomicLevel} from '@datagrok-libraries/bio/src/monomer-works/to-atomic-level';
+import {ALPHABET, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {IMonomerLibBase} from '@datagrok-libraries/bio/src/types';
+import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
+
+export function dealGroups(col: DG.Column<string>): void {
+  for (let i = 0; i < col.length; i++) {
+    col.set(i, col.get(i)!.replaceAll('undefined', 'H'));
+    col.set(i, col.get(i)!.replaceAll('Oh', 'O'));
+    col.set(i, col.get(i)!.replaceAll('0.000000 3', '0.000000 0'));
+    col.set(i, col.get(i)!.replaceAll('?', 'O'));
+    col.set(i, col.get(i)!.replaceAll('0 3\n', '0 0\n'));
+    col.set(i, col.get(i)!.replaceAll('RGROUPS=(1 1)', ''));
+  }
+}
+
+export async function helmToMol(resHelmCol: DG.Column, resList: string[],
+  isLinear: boolean[], chiralityEngine: boolean, highlight: boolean, linearize: boolean,
+  lib: IMonomerLibBase, rdkit: RDModule, seqHelper: ISeqHelper) {
+  const getUnusedName = (df: DG.DataFrame | undefined, colName: string): string => {
+    if (!df) return colName;
+    return df.columns.getUnusedName(colName);
+  };
+
+  const toAtomicLevelRes =
+    await seqHelper.helmToAtomicLevel(resHelmCol, chiralityEngine, highlight, lib);
+
+  const resMolCol = toAtomicLevelRes.molCol!;
+
+  const allLinear = isLinear.filter((l) => l).length;
+  if (linearize && allLinear > 0) {
+    const lin = new Array<string>(allLinear);
+    let counter = 0;
+    for (let i = 0; i < isLinear.length; i++) {
+      if (isLinear[i]) {
+        lin[counter] = resList[i];
+        counter++;
+      }
+    }
+
+    const linCol = DG.Column.fromStrings('helm', lin);
+    linCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    linCol.meta.units = NOTATION.HELM;
+    linCol.setTag(DG.TAGS.CELL_RENDERER, 'helm');
+
+    const monomerLibHelper = await getMonomerLibHelper();
+    const systemMonomerLib = monomerLibHelper.getMonomerLib();
+    try {
+      const linear = await _toAtomicLevel(DG.DataFrame.create(0), linCol, systemMonomerLib, seqHelper, rdkit);
+      counter = 0;
+      for (let i = 0; i < isLinear.length; i++) {
+        if (isLinear[i]) {
+          resMolCol.set(i, linear!.molCol!.get(counter));
+          counter++;
+        }
+      }
+    } catch (e: any) {
+      grok.shell.warning('PolyTool was not able to linearize sequences');
+    }
+  }
+
+  dealGroups(resMolCol);
+
+  return resMolCol;
+}

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

@@ -16,6 +16,7 @@ export class Chain {
   linkagesUnderRules: Linkage[];
   monomersUnderRules: string[][];
   molUnderRules: HelmMol;
+  posToPosUnderRules: number[][] = [];
 
   constructor(monomers: string[][], linkages: Linkage[], protected helmHelper: IHelmHelper) {
     this.linkages = linkages;
@@ -52,9 +53,28 @@ export class Chain {
   applyRules(rules: Rules): void {
     const sequence = this.getNotation();
 
-    const [linkages, mainFragments] = handleDuplicated(sequence, rules);
+    const [linkages, mainFragments, isDuplicated] = handleDuplicated(sequence, rules);
     const monomers = new Array<Array<string>>(mainFragments.length);
-    handleLinkRules(mainFragments, monomers, linkages, rules);
+
+    let counter = 0;
+    for (let i = 0; i < mainFragments.length; i++) {
+      monomers[i] = mainFragments[i].split('-');
+      if (!isDuplicated[i]) {
+        for (let j = 0; j < monomers[i].length; j++) {
+          this.posToPosUnderRules.push([counter]);
+          counter++;
+        }
+      } else {
+        const start = this.posToPosUnderRules.length - monomers[i].length;
+        for (let j = 0; j < monomers[i].length; j++) {
+          this.posToPosUnderRules[start + j].push(counter);
+          counter++;
+        }
+      }
+    }
+
+    //his.posToPosUnderRules
+    handleLinkRules(monomers, linkages, rules);
     handleReactionRules(monomers, linkages, rules);
 
     this.underRules = true;

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

@@ -6,9 +6,11 @@ import {Chain} from './pt-chain';
 import {_package} from '../../package';
 
 /** The main PolyTool convert engine. Returns list of Helms. Covered with tests. */
-export function doPolyToolConvert(sequences: string[], rules: Rules, helmHelper: IHelmHelper): [string[], boolean[]] {
+export function doPolyToolConvert(sequences: string[], rules: Rules, helmHelper: IHelmHelper):
+[string[], boolean[], number[][][]] {
   const helms = new Array<string>(sequences.length);
   const isLinear = new Array<boolean>(sequences.length);
+  const positionMaps = new Array<number[][]>(sequences.length);
   for (let i = 0; i < sequences.length; i++) {
     try {
       if (sequences[i] == null) { helms[i] = ''; } else {
@@ -16,6 +18,7 @@ export function doPolyToolConvert(sequences: string[], rules: Rules, helmHelper:
         chain.applyRules(rules);
         isLinear[i] = chain.monomersUnderRules.length > 1 || chain.linkagesUnderRules.length > 0 ? false : true;
         helms[i] = chain.getHelm();
+        positionMaps[i] = chain.posToPosUnderRules;
       }
     } catch (err: any) {
       const [errMsg, errStack] = errInfo(err);
@@ -23,5 +26,5 @@ export function doPolyToolConvert(sequences: string[], rules: Rules, helmHelper:
       helms[i] = '';
     }
   }
-  return [helms, isLinear];
+  return [helms, isLinear, positionMaps];
 }

package/src/polytool/conversion/pt-rule-cards.ts

@@ -0,0 +1,160 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import './style.css';
+
+import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types';
+import {Rules} from './pt-rules';
+import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {doPolyToolConvert} from './pt-conversion';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {getRdKitModule} from '@datagrok-libraries/bio/src/chem/rdkit-module';
+import {getSeqHelper, ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
+import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
+import {getOverriddenLibrary} from './pt-synthetic';
+import {helmToMol} from './pt-atomic';
+
+class MonomerCard {
+  root: HTMLElement = ui.divV([], {classes: 'monomer-card-rule-root'});
+
+  private _selected: boolean = false;
+  get selected(): boolean { return this._selected; }
+  set selected(value: boolean) {
+    this._selected = value;
+    this.root.style.border = value ? '2px solid var(--green-2)' : '2px solid var(--grey-2)';
+  }
+
+  constructor(public monomer: Monomer | null) {}
+
+  render() {
+    if (this.monomer) {
+      ui.empty(this.root);
+      const monomerMolSvg = this.monomer.smiles && grok.chem.checkSmiles(this.monomer.smiles) ?
+        grok.chem.drawMolecule(this.monomer.smiles, 150, 120) :
+        grok.chem.drawMolecule(this.monomer.molfile ?? '', 150, 120);
+      this.root.appendChild(monomerMolSvg);
+      const monomerName =
+        ui.divH([ui.divText('Monomer Name: '), ui.divText(this.monomer.name)], {classes: 'monomer-card-info-rules'});
+
+      this.root.appendChild(monomerName);
+      ui.tooltip.bind(monomerName, this.monomer.name);
+      if (this.monomer.lib?.source) {
+        const monomerSource =
+          ui.divH([ui.divText('Source: '), ui.divText(this.monomer.lib.source)], {classes: 'monomer-card-info-rules'});
+        this.root.appendChild(monomerSource);
+        ui.tooltip.bind(monomerSource, this.monomer.lib.source);
+      }
+      const monomerType = ui.divH([
+        ui.divText('Polymer Type: '),
+        ui.divText(this.monomer.polymerType)
+      ], {classes: 'monomer-card-info-rules'});
+      this.root.appendChild(monomerType);
+      ui.tooltip.bind(monomerType, this.monomer.polymerType);
+
+      ui.tooltip.bind(this.root, 'Select Monomer');
+    }
+  }
+}
+
+export class RuleCards {
+  root: HTMLElement = ui.divH([],
+    {style: {
+      alignItems: 'center',
+      width: '100%',
+      overflow: 'hidden',
+      visibility: 'visible',
+    }, classes: 'monomer-cards'}
+  );
+  cardsFirst: MonomerCard[];
+  cardsSecond: MonomerCard[];
+  firstCard: MonomerCard;
+  secondCard: MonomerCard;
+  resulting: HTMLElement;
+  actionable: boolean;
+
+  constructor(public firstMonomers: string[], public secondMonomers: string[],
+    lib: IMonomerLib, public code: number, public rules: Rules) {
+    if (firstMonomers.length > 0) {
+      this.actionable = true;
+      const monomerGalleryFirst = ui.divH([], {style: {overflowX: 'auto', width: '100%'}});
+      const monomerGallerySecond = ui.divH([], {style: {overflowX: 'auto', width: '100%'}});
+      this.resulting = ui.divH([], {style: {overflowX: 'auto', width: '100%', minHeight: '150px'}});
+      const galleries = ui.divV([monomerGalleryFirst, monomerGallerySecond, this.resulting]);
+      this.cardsFirst = firstMonomers.map((symbol) => new MonomerCard(lib.getMonomer('PEPTIDE', symbol)));
+      this.cardsSecond = secondMonomers.map((symbol) => new MonomerCard(lib.getMonomer('PEPTIDE', symbol)));
+
+      this.cardsFirst.forEach((card) => {
+        card.root.onclick = () => {
+          this.cardsFirst.forEach((c) => c.selected = false);
+          card.selected = true;
+          this.firstCard = card;
+          this.reset();
+          //onMonomerSelected(card.monomer);
+        };
+        monomerGalleryFirst.appendChild(card.root);
+      });
+
+      this.cardsSecond.forEach((card) => {
+        card.root.onclick = () => {
+          this.cardsSecond.forEach((c) => c.selected = false);
+          card.selected = true;
+          this.secondCard = card;
+          this.reset();
+          //onMonomerSelected(card.monomer);
+        };
+        monomerGallerySecond.appendChild(card.root);
+      });
+
+      this.cardsFirst[0].selected = true;
+      this.cardsSecond[0].selected = true;
+      this.firstCard = this.cardsFirst[0];
+      this.secondCard = this.cardsSecond[0];
+      this.root.appendChild(galleries);
+    } else {
+      const es = ui.divV(['Rule is active for all monomers, no examples to show']);
+      this.root.appendChild(es);
+      this.actionable = false;
+    }
+  }
+
+  async reset() {
+    if (this.actionable) {
+      const seqs: string[] = [
+        `${this.firstCard.monomer?.symbol}(${this.code})-A-A-A-A-${this.secondCard.monomer?.symbol}(${this.code})`
+      ];
+
+      const helmHelper = await getHelmHelper();
+      const [helms, isLinear, positionMaps] = doPolyToolConvert(seqs, this.rules, helmHelper);
+
+      const resHelmCol = DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'helm', helms.length)
+        .init((rowIdx: number) => { return helms[rowIdx]; });
+      resHelmCol.semType = DG.SEMTYPE.MACROMOLECULE;
+      resHelmCol.meta.units = NOTATION.HELM;
+      resHelmCol.setTag(DG.TAGS.CELL_RENDERER, 'helm');
+
+      const rdKitModule: RDModule = await getRdKitModule();
+      const seqHelper: ISeqHelper = await getSeqHelper();
+
+      const lib = await getOverriddenLibrary(this.rules);
+      const resHelmColTemp = resHelmCol.temp;
+      resHelmCol.temp = resHelmColTemp;
+      const resMolCol = await helmToMol(resHelmCol, helms,
+        isLinear, true, false, false, lib, rdKitModule, seqHelper);
+
+      const mol = resMolCol.get(0);
+      const monomerMolSvg = mol && grok.chem.checkSmiles(mol) ?
+        grok.chem.drawMolecule(mol, 150, 120) :
+        grok.chem.drawMolecule(mol ?? '', 150, 120);
+
+      ui.empty(this.resulting);
+      this.resulting.append(ui.divH([monomerMolSvg], {style: {overflowX: 'auto', width: '100%', minHeight: '150px'}}));
+    }
+  }
+
+  render() {
+    if (this.actionable) {
+      this.cardsFirst.forEach((card) => card.render());
+      this.cardsSecond.forEach((card) => card.render());
+    }
+  }
+}

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

@@ -3,6 +3,9 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import {ActiveFiles} from '@datagrok-libraries/utils/src/settings/active-files-base';
 import {RulesManager} from './rule-manager';
+import {RuleCards} from './pt-rule-cards';
+import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {applyNotationProviderForCyclized} from '../../package';
 
 export const RULES_PATH = 'System:AppData/SequenceTranslator/polytool-rules/';
 export const RULES_STORAGE_NAME = 'Polytool';
@@ -95,10 +98,17 @@ export class Rules {
     const length = this.linkRules.length;
     const codeCol = DG.Column.int(NAME_CODE, length);
     codeCol.setTag('friendlyName', 'Code');
+    //ui.tooltip.bind(codeCol.root, 'Click to zoom');
     const firstMonomerCol = DG.Column.string(NAME_FIRST_MONOMERS, length);
     firstMonomerCol.setTag('friendlyName', 'First monomers');
+    firstMonomerCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    applyNotationProviderForCyclized(firstMonomerCol, ',');
+
     const secondMonomerCol = DG.Column.string(NAME_SECOND_MONOMERS, length);
     secondMonomerCol.setTag('friendlyName', 'Second monomers');
+    secondMonomerCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    applyNotationProviderForCyclized(secondMonomerCol, ',');
+
     const firstLinkingGroup = DG.Column.int(NAME_FIRST_LINK, length);
     firstLinkingGroup.setTag('friendlyName', 'First group');
     const secondLinkingGroup = DG.Column.int(NAME_SECOND_LINK, length);
@@ -119,6 +129,20 @@ export class Rules {
     return res;
   }
 
+  async getLinkCards(): Promise<RuleCards[]> {
+    const length = this.linkRules.length;
+    const cards: RuleCards[] = new Array<RuleCards>(length);
+    const monomerLibHelper = await getMonomerLibHelper();
+    const systemMonomerLib = monomerLibHelper.getMonomerLib();
+
+    for (let i = 0; i < length; i++) {
+      cards[i] = new RuleCards(this.linkRules[i].firstMonomers, this.linkRules[i].secondMonomers,
+        systemMonomerLib, this.linkRules[i].code, this);
+    }
+
+    return cards;
+  }
+
   getSynthesisRulesDf(): DG.DataFrame {
     const length = this.reactionRules.length;
     const codeCol = DG.Column.int(NAME_CODE, length);

package/src/polytool/conversion/pt-tools-parse.ts

@@ -121,9 +121,10 @@ export function fromObjectsToHelm(linkages: Linkage[], monomers: string[][]): st
   return helm;
 }
 
-//homo and hetero dimers
-export function handleDuplicated(sequence: string, rules: Rules): [Linkage[], string[]] {
+//homo and hetero dimers/ also fills map from initial positions to positions arrays
+export function handleDuplicated(sequence: string, rules: Rules): [Linkage[], string[], boolean[]] {
   const mainFragments: string[] = [];
+  const isDuplicated: boolean[] = [];
   const linkages: Linkage[] = [];
   const heterodimerCode = rules.heterodimerCode;
   const homodimerCode = rules.homodimerCode;
@@ -134,8 +135,11 @@ export function handleDuplicated(sequence: string, rules: Rules): [Linkage[], st
     linkages.push({fChain: 0, sChain: 1, fMonomer: 1, sMonomer: 1, fR: 1, sR: 1});
     mainFragments.push(heterodimeric[1].replaceAll('{', '').replaceAll('}', ''));
     mainFragments.push(heterodimeric[2].replaceAll('{', '').replaceAll('}', ''));
+    isDuplicated.push(false);
+    isDuplicated.push(false);
   } else {
     mainFragments.push(sequence);
+    isDuplicated.push(false);
   }
 
   //NOTICE: this works only with simple single dimers
@@ -151,30 +155,16 @@ export function handleDuplicated(sequence: string, rules: Rules): [Linkage[], st
 
       mainFragments[i] = linker + body;
       mainFragments.push(body);
+      isDuplicated.push(true);
     }
   }
 
-  for (let i = 0; i < mainFragments.length; i++) {
-    if (homodimerCode !== null && mainFragments[i].includes(`(${homodimerCode!})`)) {
-      const idxSequence = mainFragments.length;
-
-      linkages.push({fChain: i, sChain: idxSequence, fMonomer: 1, sMonomer: 1, fR: 1, sR: 1});
-      const rawDimer = mainFragments[i].replace(`(${homodimerCode!})`, '');
-      const idx = rawDimer.indexOf('{');
-      const linker = rawDimer.slice(0, idx);
-      const body = rawDimer.replace(linker, '').replaceAll('{', '').replaceAll('}', '');
-
-      mainFragments[i] = linker + body;
-      mainFragments.push(body);
-    }
-  }
-
-  return [linkages, mainFragments];
+  return [linkages, mainFragments, isDuplicated];
 }
 
-export function handleLinkRules(mf: string[], monomers: string[][], linkages: Linkage[], rules: Rules): void {
-  for (let i = 0; i < mf.length; i++) {
-    const rawMonomers = mf[i].split('-');
+export function handleLinkRules(monomers: string[][], linkages: Linkage[], rules: Rules): void {
+  for (let i = 0; i < monomers.length; i++) {
+    const rawMonomers = monomers[i];
     const linkedPositions = getLinkedPositions(rawMonomers, rules.linkRules);
     const [allPos1, allPos2, allAttaches1, allAttaches2] =
       getAllCycles(rules.linkRules, rawMonomers, linkedPositions);

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

@@ -6,6 +6,7 @@ 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';
+import {RuleCards} from './pt-rule-cards';
 
 
 const TAB_LINKS = 'Links';
@@ -22,12 +23,15 @@ export class RulesManager {
   homoDimerInput: DG.InputBase;
   heteroDimerInput: DG.InputBase;
 
+  linkCards: RuleCards[];
+
   // every rule set will have its editor instance
   private static instances: Record<string, RulesManager> = {};
 
   protected constructor(rules: Rules, fileName: string) {
     this.rules = rules;
     this.linkRuleDataFrame = this.rules.getLinkRulesDf();
+
     this.synthRuleDataFrame = this.rules.getSynthesisRulesDf();
     this.fileName = fileName;
 
@@ -96,8 +100,9 @@ export class RulesManager {
     grok.shell.info(`Polytool rules at ${this.fileName} was updated`);
   }
 
-  private createGridDiv(name: string, grid: DG.Grid) {
+  private createGridDiv(name: string, grid: DG.Grid, tooltipMsg?: string) {
     const header = ui.h1(name, 'polytool-grid-header');
+    ui.tooltip.bind(header, tooltipMsg);
     header.style.marginTop = '10px';
     header.style.marginRight = '10px';
     grid.root.style.height = '100%';
@@ -128,7 +133,7 @@ export class RulesManager {
     }
     const helmHelper = await getHelmHelper();
 
-    const [helms, isLinear] = doPolyToolConvert(seqs, this.rules, helmHelper);
+    const [helms, isLinear, positionMaps] = doPolyToolConvert(seqs, this.rules, helmHelper);
 
     const initCol = DG.Column.fromStrings('Monomers', seqs);
     const helmCol = DG.Column.fromStrings('Helm', helms);
@@ -157,7 +162,7 @@ export class RulesManager {
     }
     const helmHelper = await getHelmHelper();
 
-    const [helms, isLinear] = doPolyToolConvert(seqs, this.rules, helmHelper);
+    const [helms, isLinear, positionMaps] = doPolyToolConvert(seqs, this.rules, helmHelper);
 
     const initCol = DG.Column.fromStrings('Monomers', seqs);
     const helmCol = DG.Column.fromStrings('Helm', helms);
@@ -177,11 +182,45 @@ export class RulesManager {
     inputsTabControl: DG.TabControl;
 
     const linksGridDiv = this.createGridDiv('Rules',
-      this.linkRuleDataFrame.plot.grid({showAddNewRowIcon: true}));
-    const linkExamples = this.createGridDiv('Examples', await this.getLinkExamplesGrid());
+      this.linkRuleDataFrame.plot.grid({showAddNewRowIcon: true}),
+      'specification for monomers to link and linking positions');
+    const linkExamples = this.createGridDiv('Examples', await this.getLinkExamplesGrid(),
+      'specification for monomers to link and linking positions');
     linksGridDiv.style.width = '50%';
     linkExamples.style.width = '50%';
-    const links = ui.divH([linksGridDiv, linkExamples]);
+    const header = ui.h1('Monomers', 'polytool-grid-header');
+    ui.tooltip.bind(header, 'Click different cobination to see how monomers will link');
+    this.linkCards = await this.rules.getLinkCards();
+    const gridDiv: HTMLElement = ui.splitV([
+      ui.box(
+        header,
+        {style: {maxHeight: '30px'}},
+      ),
+      this.linkCards[0].root,
+    ]);
+
+    this.linkCards[0].render();
+    await this.linkCards[0].reset();
+
+    this.linkRuleDataFrame.currentRowIdx = 0;
+    this.linkRuleDataFrame.onCurrentRowChanged.subscribe(async () => {
+      const idx = this.linkRuleDataFrame.currentRowIdx;
+      if (idx !== -1) {
+        ui.empty(gridDiv);
+        gridDiv.append(ui.splitV([
+          ui.box(
+            header,
+            {style: {maxHeight: '30px'}},
+          ),
+          this.linkCards[idx].root,
+        ]));
+      }
+
+      this.linkCards[idx].render();
+      await this.linkCards[idx].reset();
+    });
+
+    const links = ui.splitH([linksGridDiv, gridDiv], null, true);
 
     const reactionsGridDiv = this.createGridDiv('Rules',
       this.synthRuleDataFrame.plot.grid({showAddNewRowIcon: true}));
@@ -201,6 +240,13 @@ export class RulesManager {
       'Dimers': dimerInputsDiv,
     }, false);
 
+    ui.tooltip.bind(inputsTabControl.getPane(TAB_LINKS).header,
+      'Specify rules to link monomers based on HELM notation');
+    ui.tooltip.bind(inputsTabControl.getPane(TAB_REACTIONS).header,
+      'Specify rules to perform reactions within monomers');
+    ui.tooltip.bind(inputsTabControl.getPane(TAB_DIMERS).header,
+      'Specify symbols for homodimeric and heterodimeric codes');
+
     inputsTabControl.root.style.height = '100%';
     inputsTabControl.root.style.width = '100%';
     inputsTabControl.root.classList.add('rules-manager-form-tab-control');

package/src/polytool/conversion/style.css

@@ -0,0 +1,32 @@
+.monomer-card-rule-root {
+    border: 2px solid var(--grey-2);
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    overflow: hidden;
+    align-items: center;
+    cursor: pointer;
+    width: 200px;
+    height: 210px;
+    min-width: 200px;
+    min-height: 210px;
+}
+
+.monomer-card-info-rules {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 10px;
+}
+
+.monomer-card-info-rules > div:nth-child(2) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.monomer-card-info-rules > div:nth-child(1) {
+    font-weight: bold;
+    margin-right: 5px;
+    text-wrap: nowrap;
+}