@datagrok/sequence-translator 1.6.1 → 1.6.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "author": {
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
@@ -22,7 +22,7 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.45.6",
+    "@datagrok-libraries/bio": "^5.46.0",
     "@datagrok-libraries/chem-meta": "^1.2.7",
     "@datagrok-libraries/tutorials": "^1.4.3",
     "@datagrok-libraries/utils": "^4.3.7",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@datagrok-libraries/helm-web-editor": "^1.1.13",
     "@datagrok-libraries/js-draw-lite": "^0.0.10",
-    "@datagrok/bio": "^2.17.0",
+    "@datagrok/bio": "^2.17.2",
     "@datagrok/helm": "^2.5.8",
     "@datagrok/chem": "^1.12.4",
     "@types/jquery": "^3.5.14",

package/src/apps/common/model/oligo-toolkit-package.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';
@@ -76,7 +77,7 @@ export class OligoToolkitPackage extends DG.Package implements ITranslationHelpe
     if (!this.initLibDataPromise) {
       this.initLibDataPromise = (async () => {
         const packageSettings = await this.getSettings();
-        let monomersPath: string = packageSettings['MonomersPath'];
+        let monomersPath: string = packageSettings instanceof Map ? packageSettings.get('MonomersPath') : packageSettings['MonomersPath'];
         if (!monomersPath || !(await grok.dapi.files.exists(monomersPath))) {
           this.logger.warning(`Monomers path '${monomersPath}' not found. ` +
             `Fallback to monomers sample path '${FALLBACK_LIB_PATH}'.`);

package/src/package.ts

@@ -22,7 +22,6 @@ import {polyToolEnumerateHelmUI} from './polytool/pt-enumerate-seq-dialog';
 import {_setPeptideColumn} from './polytool/utils';
 import {PolyToolCsvLibHandler} from './polytool/csv-to-json-monomer-lib-converter';
 import {ITranslationHelper} from './types';
-import {addContextMenuUI} from './utils/context-menu';
 import {PolyToolConvertFuncEditor} from './polytool/pt-convert-editor';
 import {CyclizedNotationProvider} from './utils/cyclized';
 import {getSeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
@@ -248,14 +247,6 @@ export async function createMonomerLibraryForPolyTool(file: DG.FileInfo) {
   DG.Utils.download(jsonFileName, jsonFileContent);
 }
 
-// -- Handle context menu --
-
-//name: addContextMenu
-//input: object event
-export function addContextMenu(event: DG.EventData): void {
-  addContextMenuUI(event);
-}
-
 // //name: PolyTool Converter
 // //meta.icon: img/icons/structure.png
 // //meta.browsePath: PolyTool
@@ -298,6 +289,20 @@ export async function ptEnumeratorChemApp(): Promise<void> {
   polyToolEnumerateChemUI();
 }
 
+
+//name: Polytool Helm Enumerator dialog
+//input: object cell {nullable: true}
+export async function getPtHelmEnumeratorDialog(cell?: DG.Cell) {
+  return polyToolEnumerateHelmUI(cell);
+}
+
+//name: Polytool Chem Enumerator dialog
+//input: object cell {nullable: true}
+export async function getPtChemEnumeratorDialog(cell?: DG.Cell) {
+  return polyToolEnumerateChemUI(cell);
+}
+
+
 //name: applyNotationProviderForHarmonizedSequence
 //input: column col
 //input: string separator

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

@@ -87,16 +87,33 @@ export class RulesManager {
       reactionRules: this.rules.reactionRules,
     };
 
-    const rrrr = JSON.stringify(saveable, undefined, 2);
-    _package.files.writeAsText(`polytool-rules/${this.fileName}`, rrrr);
+    const json = JSON.stringify(saveable, undefined, 2);
+    _package.files.writeAsText(`polytool-rules/${this.fileName}`, json);
     grok.shell.info(`Polytool rules at ${this.fileName} was updated`);
   }
 
-  private createGridDiv(name: string, grid: DG.Grid) {
+  private createGridDiv(name: string, grid: DG.Grid, buttons: HTMLButtonElement[] = []) {
     const header = ui.h1(name, 'polytool-grid-header');
-    grid.root.prepend(header);
+    header.style.marginTop = '10px';
+    header.style.marginRight = '10px';
     grid.root.style.height = '100%';
-    return grid.root;
+
+    buttons.forEach((b) => {
+      b.style.marginLeft = '5px';
+      b.style.marginRight = '10px';
+    });
+
+    const gridDiv = ui.splitV([
+      ui.box(
+        ui.divH([header, ...buttons]),
+        {style: {maxHeight: '60px'}},
+      ),
+      grid.root,
+    ]);
+
+    gridDiv.style.height = '100%';
+
+    return gridDiv;
   };
 
   async getLinkExamplesGrid() {
@@ -160,69 +177,48 @@ export class RulesManager {
   async getForm() {
     inputsTabControl: DG.TabControl;
 
+    const saveLinksButton = ui.bigButton('Save', () => { this.save(); });
+    const addLinkButton = ui.button('Add rule', () => { this.linkRuleDataFrame.rows.addNew(); });
+    const linksGridDiv = this.createGridDiv('Rules',
+      this.linkRuleDataFrame.plot.grid({showAddNewRowIcon: true}), [saveLinksButton, addLinkButton]);
+    const linkExamples = this.createGridDiv('Examples', await this.getLinkExamplesGrid());
+    linksGridDiv.style.width = '50%';
+    linkExamples.style.width = '50%';
+    const links = ui.divH([linksGridDiv, linkExamples]);
+
+    const saveReactionsButton = ui.bigButton('Save', () => { this.save(); });
+    const addReactionButton = ui.button('Add rule', () => { this.synthRuleDataFrame.rows.addNew(); });
+    const reactionsGridDiv = this.createGridDiv('Rules',
+      this.synthRuleDataFrame.plot.grid({showAddNewRowIcon: true}), [saveReactionsButton, addReactionButton]);
+    const reactionExamples = this.createGridDiv('Examples', await this.getReactionExamplesGrid());
+    reactionsGridDiv.style.width = '50%';
+    reactionExamples.style.width = '50%';
+    const reactions = ui.divH([reactionsGridDiv, reactionExamples]);
+
     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,
+      'Links': links,
+      'Reactions': reactions,
       'Dimers': dimerInputsDiv,
     }, false);
 
-    inputsTabControl.root.style.height = '90%';
+    inputsTabControl.root.style.height = '100%';
     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;
+    return inputsTabControl.root;
   }
 }
 

package/src/utils/cell-renderer-cyclized.ts

@@ -5,20 +5,20 @@ import * as DG from 'datagrok-api/dg';
 import {MonomerPlacer} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
 import {monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
-
 import {_package} from '../package';
 
 export class CyclizedCellRendererBack extends MonomerPlacer {
-
   constructor(
     gridCol: DG.GridColumn | null, tableCol: DG.Column,
     maxLengthOfMonomer: number, seqHelper: ISeqHelper
   ) {
     super(gridCol, tableCol, _package.logger, maxLengthOfMonomer, () => {
       const sh = seqHelper.getSeqHandler(tableCol);
+      const {font, fontWidth} = MonomerPlacer.getFontSettings(tableCol);
       return {
         seqHandler: sh,
-        monomerCharWidth: 7,
+        font: font,
+        fontCharWidth: fontWidth,
         separatorWidth: 11,
         monomerToShort: monomerToShort,
       };
@@ -26,12 +26,12 @@ export class CyclizedCellRendererBack extends MonomerPlacer {
   }
 
   override onMouseMove(gridCell: DG.GridCell, e: MouseEvent) {
-    const gridCellBounds: DG.Rect = gridCell.bounds;
-    const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCellBounds.x);
-    const left: number | null = this.getPosition(gridCell.tableRowIndex!, argsX, gridCellBounds.width);
-    if(left != null) {
+    // const gridCellBounds: DG.Rect = gridCell.bounds;
+    // const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCellBounds.x);
+    // const left: number | null = this.getPosition(gridCell.tableRowIndex!, argsX, gridCellBounds.width);
+    // if(left != null) {
 
-    }
+    // }
     super.onMouseMove(gridCell, e);
   }
 }

package/src/utils/context-menu.ts

@@ -1,53 +0,0 @@
-import * as grok from 'datagrok-api/grok';
-import * as DG from 'datagrok-api/dg';
-import * as ui from 'datagrok-api/ui';
-
-import {defaultErrorHandler} from './err-info';
-import {polyToolEnumerateHelmUI} from '../polytool/pt-enumerate-seq-dialog';
-import {polyToolEnumerateChemUI} from '../polytool/pt-dialog';
-
-import {_package} from '../package';
-
-export type SequenceTranslatorWindowType = Window & {
-  $sequenceTranslator?: {
-    contextMenuError?: any
-  },
-};
-declare const window: SequenceTranslatorWindowType;
-
-export function addContextMenuUI(event: DG.EventData): void {
-  try {
-    const item = event.args.item;
-    if (item) {
-      const menu: DG.Menu = event.args.menu;
-      if (item instanceof DG.GridCell || item.constructor.name == 'GridCell') {
-        const gridCell: DG.GridCell = item;
-        if (addContextMenuForCell(gridCell, menu))
-          event.preventDefault();
-      }
-    }
-  } catch (err: any) {
-    defaultErrorHandler(err);
-    if (!window.$sequenceTranslator) window.$sequenceTranslator = {};
-    window.$sequenceTranslator.contextMenuError = err;
-  }
-}
-
-function addContextMenuForCell(gridCell: DG.GridCell, menu: DG.Menu): boolean {
-  const logPrefix: string = `ST: addContextMenuForCell()`;
-  _package.logger.debug(`${logPrefix}, start`);
-
-  if (gridCell && gridCell.tableColumn) {
-    switch (gridCell.tableColumn.semType) {
-    case DG.SEMTYPE.MACROMOLECULE: {
-      menu.item('PolyTool-Enumerate', () => { polyToolEnumerateHelmUI(gridCell.cell).then(() => {}); });
-      return true;
-    }
-    case DG.SEMTYPE.MOLECULE: {
-      menu.item('PolyTool-Enumerate', () => { polyToolEnumerateChemUI(gridCell.cell).then(() => {}); });
-      return true;
-    }
-    }
-  }
-  return false;
-}