@datagrok/sequence-translator 1.9.10 → 1.9.11

package/files/polytool-rules/rules_example.json

@@ -4,13 +4,13 @@
   "linkRules": [
     {
       "firstMonomers": [
-        "NH2"
+        "D"
       ],
       "secondMonomers": [
-        "D"
+        "NH2"
       ],
-      "firstLinkingGroup": "2",
-      "secondLinkingGroup": "3",
+      "firstLinkingGroup": "3",
+      "secondLinkingGroup": "2",
       "code": "2"
     },
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.9.10",
+  "version": "1.9.11",
   "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,8 @@ 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';
 
 export const RULES_PATH = 'System:AppData/SequenceTranslator/polytool-rules/';
 export const RULES_STORAGE_NAME = 'Polytool';
@@ -63,6 +65,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 +106,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[]> {

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

@@ -1,7 +1,8 @@
+/* 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';
-import {getMonomerPairs, getRules, Rules} from './pt-rules';
+import {getMonomerPairs, getRules, LinkRuleRowArgs, Rules} from './pt-rules';
 import {_package, PackageFunctions} from '../../package';
 import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 import {doPolyToolConvert} from './pt-conversion';
@@ -24,13 +25,16 @@ export class RulesManager {
   heteroDimerInput: DG.InputBase;
 
   linkCards: RuleCards[];
+  addLinkRulesFunc: (rowObj: LinkRuleRowArgs) => void;
 
   // 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();
+    const linksRes = this.rules.getLinkRulesDf();
+    this.linkRuleDataFrame = linksRes.res;
+    this.addLinkRulesFunc = linksRes.addNewRow;
 
     this.synthRuleDataFrame = this.rules.getSynthesisRulesDf();
     this.fileName = fileName;
@@ -179,10 +183,26 @@ export class RulesManager {
   }
 
   async getForm() {
-    inputsTabControl: DG.TabControl;
+    const gridOptions: Partial<DG.IGridSettings> = {showAddNewRowIcon: false, allowEdit: false, rowHeight: 60};
+
+    const linksGrid = this.linkRuleDataFrame.plot.grid(gridOptions);
+    linksGrid.onCellDoubleClick.subscribe(() => {
+      if (!linksGrid.dataFrame || linksGrid.dataFrame.currentRowIdx == -1 || linksGrid.dataFrame.currentRowIdx == undefined)
+        return;
+      const idx = linksGrid.dataFrame.currentRowIdx;
+      const editArgs: LinkRuleRowArgs = {
+        row: idx,
+        code: this.linkRuleDataFrame.get('code', idx),
+        firstMonomers: this.linkRuleDataFrame.get('firstMonomers', idx),
+        secondMonomers: this.linkRuleDataFrame.get('secondMonomers', idx),
+        firstLinkingGroup: this.linkRuleDataFrame.get('firstLinkingGroup', idx),
+        secondLinkingGroup: this.linkRuleDataFrame.get('secondLinkingGroup', idx),
+      };
+      this.getAddNewLinkRuleDialog(editArgs);
+    });
 
     const linksGridDiv = this.createGridDiv('Rules',
-      this.linkRuleDataFrame.plot.grid({showAddNewRowIcon: true}),
+      linksGrid,
       'specification for monomers to link and linking positions');
     const linkExamples = this.createGridDiv('Examples', await this.getLinkExamplesGrid(),
       'specification for monomers to link and linking positions');
@@ -205,7 +225,7 @@ export class RulesManager {
     this.linkRuleDataFrame.currentRowIdx = 0;
     this.linkRuleDataFrame.onCurrentRowChanged.subscribe(async () => {
       const idx = this.linkRuleDataFrame.currentRowIdx;
-      if (idx !== -1) {
+      if (idx !== -1 && idx != undefined) {
         ui.empty(gridDiv);
         gridDiv.append(ui.splitV([
           ui.box(
@@ -214,10 +234,9 @@ export class RulesManager {
           ),
           this.linkCards[idx].root,
         ]));
+        this.linkCards[idx].render();
+        await this.linkCards[idx].reset();
       }
-
-      this.linkCards[idx].render();
-      await this.linkCards[idx].reset();
     });
 
     const links = ui.splitH([linksGridDiv, gridDiv], null, true);
@@ -260,7 +279,7 @@ export class RulesManager {
     const addButton = ui.button('Add rule', () => {
       const currentTab = inputsTabControl.currentPane.name;
       if (currentTab == TAB_LINKS)
-        this.linkRuleDataFrame.rows.addNew();
+        this.getAddNewLinkRuleDialog();
       else if (currentTab == TAB_REACTIONS)
         this.synthRuleDataFrame.rows.addNew();
     });
@@ -272,5 +291,39 @@ export class RulesManager {
 
     return inputsTabControl.root;
   }
+
+  getAddNewLinkRuleDialog(preset?: Partial<LinkRuleRowArgs>): void {
+    const codeInput = ui.input.int('Code', {nullable: false, value: preset?.code});
+    const firstMonomersInput = ui.input.string('First monomers', {placeholder: 'E.g. C,D,E', value: preset?.firstMonomers,
+      tooltipText: 'Comma separated list of first monomers applicable for the rule. If left empty, all monomers will be considered', nullable: true});
+    const secondMonomersInput = ui.input.string('Second monomers', {placeholder: 'E.g. C,D,E', value: preset?.secondMonomers,
+      tooltipText: 'Comma separated list of second monomers applicable for the rule. If left empty, all monomers will be considered', nullable: true});
+    const firstLinkingGroup = preset?.firstLinkingGroup ? `R${preset.firstLinkingGroup}` : 'R3';
+    const secondLinkingGroup = preset?.secondLinkingGroup ? `R${preset.secondLinkingGroup}` : 'R3';
+    const firstLinkingGroupInput = ui.input.choice('First linking group', {value: firstLinkingGroup, items: ['R1', 'R2', 'R3', 'R4'],
+      tooltipText: 'Specifies which R-group of the first monomer will be used for linking', nullable: false});
+    const secondLinkingGroupInput = ui.input.choice('Second linking group', {value: secondLinkingGroup, items: ['R1', 'R2', 'R3', 'R4'],
+      tooltipText: 'Specifies which R-group of the second monomer will be used for linking', nullable: false});
+    ui.dialog('Add new link rule')
+      .add(codeInput)
+      .add(firstMonomersInput)
+      .add(secondMonomersInput)
+      .add(firstLinkingGroupInput)
+      .add(secondLinkingGroupInput)
+      .onOK(async () => {
+        // we rely on validation of inputs by DG inputs
+        const code = codeInput.value!;
+        const firstMonomers = (firstMonomersInput.value ?? '').split(',').map((s) => s.trim()).filter((s) => s).join(',');
+        const secondMonomers = (secondMonomersInput.value ?? '').split(',').map((s) => s.trim()).filter((s) => s).join(',');
+        const firstLinkingGroup = parseInt(firstLinkingGroupInput.value!.substring(1));
+        const secondLinkingGroup = parseInt(secondLinkingGroupInput.value!.substring(1));
+        this.addLinkRulesFunc({code, firstMonomers: firstMonomers ?? '', secondMonomers: secondMonomers ?? '',
+          firstLinkingGroup, secondLinkingGroup, row: preset?.row});
+
+        this.rules.setLinkRules(this.linkRuleDataFrame);
+        this.linkCards = await this.rules.getLinkCards();
+        this.save();
+      }).show();
+  }
 }
 

package/src/polytool/conversion/style.css

@@ -7,9 +7,9 @@
     align-items: center;
     cursor: pointer;
     width: 200px;
-    height: 210px;
+    height: 240px;
     min-width: 200px;
-    min-height: 210px;
+    min-height: 240px;
 }
 
 .monomer-card-info-rules {

package/src/tests/polytool-convert-tests.ts

@@ -76,14 +76,14 @@ category('PolyTool: Convert', () => {
     'cyclized-D(2)-NH2(2)-3-0': {
       src: {seq: 'R-F-D(2)-T-G-H-F-Y-P-NH2(2)'},
       tgt: {
-        helm: 'PEPTIDE1{R.F.D.T.G.H.F.Y.P.[NH2]}$PEPTIDE1,PEPTIDE1,10:R2-3:R3$$$V2.0',
+        helm: 'PEPTIDE1{R.F.D.T.G.H.F.Y.P.[NH2]}$PEPTIDE1,PEPTIDE1,3:R3-10:R2$$$V2.0',
         mol: {atomCount: 81, bondCount: 86, inchiKey: 'CBMGNYKOZWNVNK-AHGCAHLCSA-N'},
       }
     },
     'cyclized-D(2)-NH2(2)-0-0': {
       src: {seq: 'D(2)-T-G-H-F-Y-P-NH2(2)'},
       tgt: {
-        helm: 'PEPTIDE1{D.T.G.H.F.Y.P.[NH2]}$PEPTIDE1,PEPTIDE1,8:R2-1:R3$$$V2.0',
+        helm: 'PEPTIDE1{D.T.G.H.F.Y.P.[NH2]}$PEPTIDE1,PEPTIDE1,1:R3-8:R2$$$V2.0',
         mol: {atomCount: 59, bondCount: 63, inchiKey: 'HGRHAUQBJXFERJ-MUFWPYSASA-N'},
       }
     },