@datagrok/sequence-translator 1.9.10 → 1.9.12

package/files/polytool-rules/rules_example.json

@@ -3,26 +3,71 @@
   "heterodimerCode": "$2",
   "linkRules": [
     {
+      "code": 2,
       "firstMonomers": [
+        "D"
+      ],
+      "secondMonomers": [
         "NH2"
       ],
+      "firstLinkingGroup": 3,
+      "secondLinkingGroup": 2
+    },
+    {
+      "code": 1,
+      "firstMonomers": [
+        "C",
+        "dC"
+      ],
       "secondMonomers": [
-        "D"
+        "C",
+        "dC"
       ],
-      "firstLinkingGroup": "2",
-      "secondLinkingGroup": "3",
-      "code": "2"
+      "firstLinkingGroup": 3,
+      "secondLinkingGroup": 3
     },
     {
+      "code": 10,
       "firstMonomers": [
-        "C"
+        "C",
+        "D",
+        "E",
+        "K"
       ],
       "secondMonomers": [
-        "C"
+        "C",
+        "D",
+        "E",
+        "K"
+      ],
+      "firstLinkingGroup": 3,
+      "secondLinkingGroup": 2
+    },
+    {
+      "code": 11,
+      "firstMonomers": [
+        "C",
+        "E",
+        "K"
       ],
-      "firstLinkingGroup": "3",
-      "secondLinkingGroup": "3",
-      "code": "1"
+      "secondMonomers": [
+        "NH2"
+      ],
+      "firstLinkingGroup": 3,
+      "secondLinkingGroup": 2
+    },
+    {
+      "code": 1,
+      "firstMonomers": [
+        "C",
+        "dC"
+      ],
+      "secondMonomers": [
+        "THA",
+        "MG3"
+      ],
+      "firstLinkingGroup": 3,
+      "secondLinkingGroup": 3
     }
   ],
   "reactionRules": [
@@ -36,6 +81,50 @@
       ],
       "reaction": "[C:1]N=[N+]=[N-].[C:2]C#C>>[C:1]N1-N=NC=C1[C:2]",
       "name": "GGaz"
+    },
+    {
+      "code": 8,
+      "firstMonomers": [
+        "DRR1"
+      ],
+      "secondMonomers": [
+        "DRR2"
+      ],
+      "reaction": "C=C[C:1].C=C/C=C/[C:2]>>C1=CC([C:2])C([C:1])CC1",
+      "name": "DARR"
+    },
+    {
+      "code": 8,
+      "firstMonomers": [
+        "ODAR1"
+      ],
+      "secondMonomers": [
+        "ODAR2"
+      ],
+      "reaction": "C=CC(=O)[C:1].C=C[C:2]>>C1CC([C:1])OC([C:2])C1",
+      "name": "ODARR"
+    },
+    {
+      "code": 7,
+      "firstMonomers": [
+        "PHAR1"
+      ],
+      "secondMonomers": [
+        "PHAR2"
+      ],
+      "reaction": "C=C[C:1].C=C[C:2]>>C1CC([C:2])C1[C:1]",
+      "name": "PHAR_CIS"
+    },
+    {
+      "code": 6,
+      "firstMonomers": [
+        "PHAR1"
+      ],
+      "secondMonomers": [
+        "PHAR2"
+      ],
+      "reaction": "C=C[C:1].C=C[C:2]>>C1C([C:1])CC1[C:2]",
+      "name": "PHAR_TRANS"
     }
   ]
-}
+}

package/files/samples/cyclized.csv

@@ -7,3 +7,9 @@ n,seqs
 6,D(2)-T-G-H-F-Y-P-NH2(2)
 7,R-F-azG(4)-T-G-H-F-Y-P-aG(4)-meI
 8,R-F-aG(4)-T-G-H-F-Y-P-azG(4)-meI
+9,R-F-R-I-F-D-C(1)-T-G-H-F-Y-G-H-F-Y-G-H-F-Y-P-THA(1)-meI-G-T
+10,R-F-R-I-F-D-C(1)-T-G-H-F-Y-G-H-F-Y-G-H-F-Y-P-MG3(1)-meI-G-T
+11,R-F-DRR1(8)-T-G-H-F-Y-P-DRR2(8)-C-C
+12,R-F-ODAR1(8)-T-G-H-F-Y-P-ODAR2(8)-meI-R-P-NH2
+13,R-F-PHAR1(7)-T-G-H-F-Y-P-PHAR2(7)-meI-F-K-NH2
+14,R-F-PHAR1(6)-T-G-H-F-Y-P-PHAR2(6)-C-C

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.9.10",
+  "version": "1.9.12",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
@@ -22,7 +22,7 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.54.7",
+    "@datagrok-libraries/bio": "^5.54.8",
     "@datagrok-libraries/chem-meta": "^1.2.8",
     "@datagrok-libraries/tutorials": "^1.6.1",
     "@datagrok-libraries/utils": "^4.6.3",
@@ -54,7 +54,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "css-loader": "^6.7.3",
-    "datagrok-tools": "^4.14.47",
+    "datagrok-tools": "^4.14.48",
     "eslint": "^8.57.0",
     "eslint-config-google": "^0.14.0",
     "style-loader": "^3.3.1",

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
@@ -13,6 +14,7 @@ import {getSeqHelper, ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-he
 import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
 import {getOverriddenLibrary} from './pt-synthetic';
 import {helmToMol} from './pt-atomic';
+import {execMonomerHoverLinks} from '@datagrok-libraries/bio/src/monomer-works/monomer-hover';
 
 class MonomerCard {
   root: HTMLElement = ui.divV([], {classes: 'monomer-card-rule-root'});
@@ -24,11 +26,12 @@ class MonomerCard {
     this.root.style.border = value ? '2px solid var(--green-2)' : '2px solid var(--grey-2)';
   }
 
-  constructor(public monomer: Monomer | null) {}
+  constructor(public monomer: Monomer | null, public monomerSymbol: string) {}
 
   render() {
+    ui.empty(this.root);
+    this.root.appendChild(ui.h2(this.monomerSymbol, {style: {textAlign: 'center'}}));
     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);
@@ -52,6 +55,9 @@ class MonomerCard {
       ui.tooltip.bind(monomerType, this.monomer.polymerType);
 
       ui.tooltip.bind(this.root, 'Select Monomer');
+    } else {
+      this.root.appendChild(ui.divV([`Monomer ${this.monomerSymbol} not found in libraries`],
+        {style: {textAlign: 'center', height: '100%'}}));
     }
   }
 }
@@ -59,7 +65,6 @@ class MonomerCard {
 export class RuleCards {
   root: HTMLElement = ui.divH([],
     {style: {
-      alignItems: 'center',
       width: '100%',
       overflow: 'hidden',
       visibility: 'visible',
@@ -74,47 +79,53 @@ export class RuleCards {
 
   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;
-    }
+    const emptyFirst = !firstMonomers?.length;
+    const emptySecond = !secondMonomers?.length;
+    // if one of the lists is empty, it means that the rule is active for all monomers
+    if (emptyFirst)
+      this.firstMonomers = firstMonomers = ['C', 'D', 'E', 'F', 'G'];
+    if (emptySecond)
+      this.secondMonomers = secondMonomers = ['D', 'C', 'E', 'F', 'G'];
+    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 headerFirst = ui.h2('First Monomer' + (!emptyFirst ? '' : ' (Applied to all monomers, example list shown)'),
+      {style: {width: '100%'}});
+    const headerSecond = ui.h2('Second Monomer' + (!emptySecond ? '' : ' (Applied to all monomers, example list shown)'),
+      {style: {width: '100%'}});
+    const galleries = ui.divV([headerFirst, monomerGalleryFirst, headerSecond, monomerGallerySecond, this.resulting]);
+    this.cardsFirst = firstMonomers.map((symbol) => new MonomerCard(lib.getMonomer('PEPTIDE', symbol), symbol));
+    this.cardsSecond = secondMonomers.map((symbol) => new MonomerCard(lib.getMonomer('PEPTIDE', symbol), 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);
   }
 
   async reset() {
@@ -122,6 +133,7 @@ export class RuleCards {
       const seqs: string[] = [
         `${this.firstCard.monomer?.symbol}(${this.code})-A-A-A-A-${this.secondCard.monomer?.symbol}(${this.code})`
       ];
+      'PEPTIDE1{[NH2].A.A.A.A.D}$PEPTIDE1,PEPTIDE1,1:R2-6:R3$$$V2.0';
 
       const helmHelper = await getHelmHelper();
       const [helms, isLinear, positionMaps] = doPolyToolConvert(seqs, this.rules, helmHelper);
@@ -143,11 +155,28 @@ export class RuleCards {
 
       const mol = resMolCol.get(0);
       const monomerMolSvg = mol && grok.chem.checkSmiles(mol) ?
-        grok.chem.drawMolecule(mol, 150, 120) :
-        grok.chem.drawMolecule(mol ?? '', 150, 120);
+        grok.chem.drawMolecule(mol, 200, 200) :
+        grok.chem.drawMolecule(mol ?? '', 200, 200);
+
+      if (mol) {
+        monomerMolSvg.style.cursor = 'pointer';
+        monomerMolSvg.onclick = () => {
+          const width = window.innerWidth - 200;
+          const height = window.innerHeight - 200;
+          const bigMol = grok.chem.checkSmiles(mol) ?
+            grok.chem.drawMolecule(mol, width, height) :
+            grok.chem.drawMolecule(mol ?? '', width, height);
+          ui.dialog({title: 'Molecule'}).add(bigMol).showModal(true);
+        };
+        ui.tooltip.bind(monomerMolSvg, 'Click to expand');
+      }
+
+      const exampleDiv = ui.divV([
+        ui.h2('Example Result:'), ui.h2(seqs[0])
+      ], {style: {width: '200px'}});
 
       ui.empty(this.resulting);
-      this.resulting.append(ui.divH([monomerMolSvg], {style: {overflowX: 'auto', width: '100%', minHeight: '150px'}}));
+      this.resulting.append(ui.divH([exampleDiv, monomerMolSvg], {style: {overflowX: 'auto', width: '100%', minHeight: '150px'}}));
     }
   }
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
@@ -6,7 +7,9 @@ import {RulesManager} from './rule-manager';
 import {RuleCards} from './pt-rule-cards';
 import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 import {
-   PackageFunctions} from '../../package';
+  PackageFunctions} from '../../package';
+import {MmcrTemps} from '@datagrok-libraries/bio/src/utils/cell-renderer-consts';
+import {ReactionEditorProps} from './rule-reaction-editor';
 
 export const RULES_PATH = 'System:AppData/SequenceTranslator/polytool-rules/';
 export const RULES_STORAGE_NAME = 'Polytool';
@@ -63,6 +66,15 @@ export type RuleReaction = {
   name: string
 }
 
+export type LinkRuleRowArgs = {
+  row?: number,
+  code: number,
+  firstMonomers: string,
+  secondMonomers: string,
+  firstLinkingGroup: number,
+  secondLinkingGroup: number
+}
+
 export class Rules {
   homodimerCode: string | null;
   heterodimerCode: string | null;
@@ -95,39 +107,54 @@ export class Rules {
       this.reactionRules.push(rules[j]);
   }
 
-  getLinkRulesDf(): DG.DataFrame {
+  getLinkRulesDf() {
     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.temp[MmcrTemps.fontSize] = 16;
     firstMonomerCol.setTag('friendlyName', 'First monomers');
     firstMonomerCol.semType = DG.SEMTYPE.MACROMOLECULE;
     PackageFunctions.applyNotationProviderForCyclized(firstMonomerCol, ',');
 
     const secondMonomerCol = DG.Column.string(NAME_SECOND_MONOMERS, length);
     secondMonomerCol.setTag('friendlyName', 'Second monomers');
+    secondMonomerCol.temp[MmcrTemps.fontSize] = 16;
     secondMonomerCol.semType = DG.SEMTYPE.MACROMOLECULE;
     PackageFunctions.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);
-    secondLinkingGroup.setTag('friendlyName', 'Second group');
+    const firstLinkingGroupCol = DG.Column.int(NAME_FIRST_LINK, length);
+    firstLinkingGroupCol.setTag('friendlyName', 'First group');
+    const secondLinkingGroupCol = DG.Column.int(NAME_SECOND_LINK, length);
+    secondLinkingGroupCol.setTag('friendlyName', 'Second group');
 
     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);
+      firstLinkingGroupCol.set(i, this.linkRules[i].firstLinkingGroup);
+      secondLinkingGroupCol.set(i, this.linkRules[i].secondLinkingGroup);
     }
 
     const res = DG.DataFrame.fromColumns([
-      codeCol, firstMonomerCol, secondMonomerCol, firstLinkingGroup, secondLinkingGroup
+      codeCol, firstMonomerCol, secondMonomerCol, firstLinkingGroupCol, secondLinkingGroupCol
     ]);
 
-    return res;
+    const addNewRow = (rowObj: LinkRuleRowArgs) => {
+      if (rowObj.row != undefined && rowObj.row < res.rowCount && rowObj.row >= 0) {
+        codeCol.set(rowObj.row, rowObj.code);
+        firstMonomerCol.set(rowObj.row, rowObj.firstMonomers);
+        secondMonomerCol.set(rowObj.row, rowObj.secondMonomers);
+        firstLinkingGroupCol.set(rowObj.row, rowObj.firstLinkingGroup);
+        secondLinkingGroupCol.set(rowObj.row, rowObj.secondLinkingGroup);
+      } else {
+        const {code, firstMonomers, secondMonomers, firstLinkingGroup, secondLinkingGroup} = rowObj;
+        res.rows.addNew([code, firstMonomers ?? '', secondMonomers ?? '', firstLinkingGroup ?? 1, secondLinkingGroup ?? 2]);
+      }
+    };
+
+    return {res, addNewRow};
   }
 
   async getLinkCards(): Promise<RuleCards[]> {
@@ -144,7 +171,7 @@ export class Rules {
     return cards;
   }
 
-  getSynthesisRulesDf(): DG.DataFrame {
+  getSynthesisRulesDf() {
     const length = this.reactionRules.length;
     const codeCol = DG.Column.int(NAME_CODE, length);
     codeCol.setTag('friendlyName', 'Code');
@@ -152,6 +179,15 @@ export class Rules {
     firstMonomerCol.setTag('friendlyName', 'First monomers');
     const secondMonomerCol = DG.Column.string(NAME_SECOND_MONOMERS, length);
     secondMonomerCol.setTag('friendlyName', 'Second monomers');
+    // set these columns as macromolecule for better visualization
+    firstMonomerCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    firstMonomerCol.temp[MmcrTemps.fontSize] = 16;
+    PackageFunctions.applyNotationProviderForCyclized(firstMonomerCol, ',');
+    secondMonomerCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    secondMonomerCol.temp[MmcrTemps.fontSize] = 16;
+    PackageFunctions.applyNotationProviderForCyclized(secondMonomerCol, ',');
+    secondMonomerCol.setTag(DG.TAGS.CELL_RENDERER, 'Sequence');
+    firstMonomerCol.setTag(DG.TAGS.CELL_RENDERER, 'Sequence');
     const name = DG.Column.string(NAME_REACTION_NAME, length);
     name.setTag('friendlyName', 'Name');
     const firstReactant = DG.Column.string('firstReactant', length);
@@ -179,9 +215,27 @@ export class Rules {
     product.semType = DG.SEMTYPE.MOLECULE;
 
 
-    return DG.DataFrame.fromColumns([
+    const df = DG.DataFrame.fromColumns([
       name, firstReactant, secondReactant, product, codeCol, firstMonomerCol, secondMonomerCol
     ]);
+
+    const addNewRow = (rowObj: ReactionEditorProps) => {
+      if (rowObj.rowIndex != undefined && rowObj.rowIndex < df.rowCount && rowObj.rowIndex >= 0) {
+        name.set(rowObj.rowIndex, rowObj.resultMonomerName);
+        codeCol.set(rowObj.rowIndex, rowObj.code);
+        firstMonomerCol.set(rowObj.rowIndex, rowObj.firstMonomers.join(','));
+        secondMonomerCol.set(rowObj.rowIndex, rowObj.secondMonomers.join(','));
+        firstReactant.set(rowObj.rowIndex, rowObj.firstReactantSmiles);
+        secondReactant.set(rowObj.rowIndex, rowObj.secondReactantSmiles);
+        product.set(rowObj.rowIndex, rowObj.productSmiles);
+      } else {
+        const {resultMonomerName, code, firstMonomers, secondMonomers,
+          firstReactantSmiles, secondReactantSmiles, productSmiles} = rowObj;
+        df.rows.addNew([resultMonomerName, firstReactantSmiles, secondReactantSmiles,
+          productSmiles, code, firstMonomers.join(','), secondMonomers.join(',')]);
+      }
+    };
+    return {df, addNewRow};
   }
 
   setLinkRules(df: DG.DataFrame) : void {