@datagrok/bio 2.12.19 → 2.12.21

package/package.json

@@ -5,7 +5,7 @@
     "name": "Aleksandr Tanas",
     "email": "atanas@datagrok.ai"
   },
-  "version": "2.12.19",
+  "version": "2.12.21",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.41.5",
+    "@datagrok-libraries/bio": "^5.41.6",
     "@datagrok-libraries/chem-meta": "^1.2.5",
     "@datagrok-libraries/math": "^1.1.5",
     "@datagrok-libraries/ml": "^6.6.5",

package/src/utils/cell-renderer.ts

@@ -106,7 +106,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
       .getSplitted(gridCell.tableRowIndex!).canonicals;
     if (left !== null && left < seqCList.length) {
       const monomerSymbol: string = seqCList[left];
-      const tooltipElements: HTMLElement[] = [ui.div(monomerSymbol)];
+      const tooltipElements: HTMLElement[] = [];
       let monomerDiv = seqColTemp._monomerStructureMap[monomerSymbol];
       if (!monomerDiv || true) {
         monomerDiv = seqColTemp._monomerStructureMap[monomerSymbol] = (() => {

package/src/utils/monomer-lib/monomer-lib.ts

@@ -9,10 +9,11 @@ import {Observable, Subject} from 'rxjs';
 import {
   IMonomerLib, Monomer, MonomerLibSummaryType, MonomerType, PolymerType, RGroup
 } from '@datagrok-libraries/bio/src/types';
-import {
-  HELM_REQUIRED_FIELD as REQ, HELM_RGROUP_FIELDS as RGP
-} from '@datagrok-libraries/bio/src/utils/const';
+import {PolymerTypes} from '@datagrok-libraries/bio/src/utils/const';
+import {HELM_REQUIRED_FIELD as REQ, HELM_RGROUP_FIELDS as RGP} from '@datagrok-libraries/bio/src/utils/const';
 import {MolfileHandler} from '@datagrok-libraries/chem-meta/src/parsing-utils/molfile-handler';
+import {GapOriginals} from '@datagrok-libraries/bio/src/utils/seq-handler';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
 import '../../../css/cell-renderer.css';
 
@@ -39,9 +40,18 @@ export class MonomerLib implements IMonomerLib {
     let mSet = this._monomers[polymerType];
     if (!mSet)
       mSet = this._monomers[polymerType] = {};
+
+    let monomerName: string = monomerSymbol;
+    if (monomerSymbol === GapOriginals[NOTATION.HELM])
+      monomerName = 'Gap';
+    else if (polymerType === PolymerTypes.PEPTIDE && monomerSymbol === 'X')
+      monomerName = 'Any';
+    else if (polymerType === PolymerTypes.RNA && monomerSymbol === 'N')
+      monomerName = 'Any';
+
     const m = mSet[monomerSymbol] = {
       [REQ.SYMBOL]: monomerSymbol,
-      [REQ.NAME]: monomerSymbol,
+      [REQ.NAME]: monomerName,
       [REQ.MOLFILE]: '',
       [REQ.AUTHOR]: 'MISSING',
       [REQ.ID]: -1,
@@ -209,37 +219,47 @@ export class MonomerLib implements IMonomerLib {
     const res = ui.div([], {classes: 'ui-form ui-tooltip'});
     const monomer = this.getMonomer(polymerType, monomerSymbol);
     if (monomer) {
-      const label = (s: string) => {
-        return ui.label(s /* span ? */, {classes: 'ui-input-label'});
-      };
-      res.append(ui.div([
-        label('Name'),
-        ui.divText(monomer.name, {classes: 'ui-input-text'})
-      ], {classes: 'ui-input-root'}));
+      // Symbol & Name
+      const symbol = monomer[REQ.SYMBOL];
+      const name = monomer[REQ.NAME];
+      res.append(ui.divH([
+        ui.div([symbol], {style: {fontWeight: 'bolder', textWrap: 'nowrap', marginRight: '6px'}}),
+        ui.div([monomer.name])
+      ], {style: {display: 'flex', flexDirection: 'row', justifyContent: 'left'}}));
 
       // Structure
       const chemOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+      let structureEl: HTMLElement;
       if (monomer.molfile) {
-        res.append(ui.div([
-          label('Mol file'),
-          grok.chem.svgMol(monomer.molfile, undefined, undefined, chemOptions),
-        ], {classes: 'ui-input-root'}));
+        structureEl = grok.chem.svgMol(monomer.molfile, undefined, undefined, chemOptions);
       } else if (monomer.smiles) {
-        res.append(ui.div([
-          label('Smiles'),
+        structureEl = ui.divV([
           grok.chem.svgMol(monomer.smiles, undefined, undefined, chemOptions),
-        ], {classes: 'ui-input-root'}));
+          ui.divText('from smiles', {style: {fontSize: 'smaller'}}),
+        ]);
       } else {
         // Unable to get monomer's structure
-        res.append(ui.div([
-          label('No structure')
-        ], {classes: 'ui-input-root'}));
+        structureEl = ui.divText('No structure', {style: {margin: '6px'}});
       }
-
-      res.append(ui.div([
-        label('Source'),
-        ui.divText(monomer.lib?.source ?? 'unknown', {classes: 'ui-input-text'}),
-      ], {classes: 'ui-input-root'}));
+      res.append(ui.div(structureEl,
+        {style: {display: 'flex', flexDirection: 'row', justifyContent: 'center', margin: '6px'}}));
+
+      // Source
+      res.append(ui.divText(monomer.lib?.source ?? 'unknown'));
+
+      // const label = (s: string) => {
+      //   return ui.label(s /* span ? */, {classes: 'ui-input-label'});
+      // };
+      // res.append(ui.div([
+      //   label('Name'),
+      //   ui.divText(monomer.name, {classes: 'ui-input-text'})
+      // ], {classes: 'ui-input-root'}));
+      //
+      //
+      // res.append(ui.div([
+      //   label('Source'),
+      //   ui.divText(monomer.lib?.source ?? 'unknown', {classes: 'ui-input-text'}),
+      // ], {classes: 'ui-input-root'}));
     } else {
       res.append(ui.divV([
         ui.divText(`Monomer '${monomerSymbol}' of type '${polymerType}' not found.`),

package/webpack.config.js

@@ -2,7 +2,11 @@ const path = require('path');
 const FuncGeneratorPlugin = require('datagrok-tools/plugins/func-gen-plugin');
 const packageName = path.parse(require('./package.json').name).name.toLowerCase().replace(/-/g, '');
 
-const mode = 'development';
+const mode = process.env.NODE_ENV ?? 'production';
+if (mode !== 'production') {
+  console.warn(`Building Bio in '${mode}' mode.`);
+}
+
 module.exports = {
   cache: {
     type: 'filesystem',
@@ -30,7 +34,7 @@ module.exports = {
   plugins: [
     new FuncGeneratorPlugin({outputPath: './src/package.g.ts'}),
   ],
-  devtool: mode === 'development' ? 'source-map' : 'inline-source-map',
+  devtool: mode !== 'production' ? 'inline-source-map' : 'source-map',
   externals: {
     'datagrok-api/dg': 'DG',
     'datagrok-api/grok': 'grok',