@datagrok/sequence-translator 1.10.11 → 1.10.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.10.11",
+  "version": "1.10.12",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
@@ -22,7 +22,7 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.62.1",
+    "@datagrok-libraries/bio": "^5.63.6",
     "@datagrok-libraries/chem-meta": "^1.2.8",
     "@datagrok-libraries/tutorials": "^1.6.1",
     "@datagrok-libraries/utils": "^4.6.5",
@@ -42,9 +42,9 @@
   "devDependencies": {
     "@datagrok-libraries/helm-web-editor": "^1.1.16",
     "@datagrok-libraries/js-draw-lite": "^0.0.10",
-    "@datagrok/bio": "^2.24.0",
-    "@datagrok/chem": "^1.13.0",
-    "@datagrok/helm": "^2.7.0",
+    "@datagrok/bio": "^2.26.0",
+    "@datagrok/chem": "^1.17.0",
+    "@datagrok/helm": "^2.13.0",
     "@types/jquery": "^3.5.32",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.202",

package/src/apps/common/view/components/colored-input/style.css

@@ -1,6 +1,8 @@
 .st-colored-text-input > textarea {
   width: 100%;
-  -webkit-text-fill-color: transparent;
+  color: transparent !important;
+  caret-color: var(--grey-6);
+  -webkit-text-fill-color: transparent !important;
   background-color: transparent;
   position: relative;
   z-index: 1;

package/src/apps/structure/view/style.css

@@ -2,11 +2,22 @@
 
 .st-structure-body {
   padding-right: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .st-structure-mol-img {
-  margin-right: 30px;
-  float: right;
+  flex: 1 1 0;
+  min-height: 100px;
+  min-width: 0;
+  transform: translateX(-50px);
+  overflow: hidden;
+}
+
+.st-structure-mol-img canvas {
+  max-width: 100% !important;
+  height: auto !important;
 }
 
 .st-structure-bool-button-block {
@@ -15,8 +26,9 @@
 }
 
 .st-structure-bottom {
-  flex-direction: row-reverse;
+  flex: 1 1 0;
   padding-top: 20px;
+  min-height: 0;
 }
 
 .st-structure-clear-buttons {

package/src/apps/structure/view/ui.ts

@@ -52,7 +52,6 @@ class StructureAppLayout {
     );
     this.moleculeImgDiv = ui.block([]);
     $(this.moleculeImgDiv).addClass('st-structure-mol-img');
-
     DG.debounce<string>(this.onInput, 300).subscribe(async () => {
       await this.updateMoleculeImg();
     });
@@ -74,7 +73,7 @@ class StructureAppLayout {
     const tableLayout = this.getTableInput(th);
     const boolInputsAndButton = this.getBoolInputsAndButton();
     await this.updateMoleculeImg();
-    const bottomDiv = ui.divH([boolInputsAndButton, this.moleculeImgDiv]);
+    const bottomDiv = ui.divH([this.moleculeImgDiv, boolInputsAndButton]);
     $(bottomDiv).addClass('st-structure-bottom');
 
     const layout = ui.divV([tableLayout, bottomDiv]);
@@ -186,13 +185,8 @@ class StructureAppLayout {
       const errStr = errorToConsole(err);
       console.error(errStr);
     }
-    // todo: compute relative numbers
-    const canvasWidth = 650;
-    const canvasHeight = 150;
     const molImgObj = new MoleculeImage(molfile);
-    await molImgObj.drawMolecule(this.moleculeImgDiv, canvasWidth, canvasHeight);
-    // should the canvas be returned from the above function?
-    $(this.moleculeImgDiv).find('canvas').css('float', 'inherit');
+    await molImgObj.drawMolecule(this.moleculeImgDiv, 650, 150);
   }
 }
 

package/src/apps/translator/view/ui.ts

@@ -56,8 +56,6 @@ class TranslatorAppLayout {
       }
     });
 
-    $(this.formatChoiceInput.root.getElementsByTagName('select')[0]).css('width', '20%');
-
     this.sequenceInputBase = ui.input.textArea(
       '', {value: DEFAULT_AXOLABS_INPUT, onValueChanged: () => { this.onInput.next(); }}
     );
@@ -235,9 +233,13 @@ class TranslatorAppLayout {
   }
 
   private saveMolfile(): void {
-    const result = (new SequenceToMolfileConverter(this.sequence, false,
-      this.formatChoiceInput.value!)).convert() + '\n$$$$';
-    download(this.sequence + '.sdf', encodeURIComponent(result));
+    try {
+      const result = (new SequenceToMolfileConverter(this.sequence, false,
+        this.formatChoiceInput.value!)).convert() + '\n$$$$';
+      download(this.sequence + '.sdf', encodeURIComponent(result));
+    } catch (e: any) {
+      grok.shell.warning('Unable to save SDF: ' + e.message);
+    }
   }
 
   private copySmiles(): void {

package/src/polytool/pt-enumerate-seq-dialog.ts

@@ -16,7 +16,6 @@ import {helmTypeToPolymerType} from '@datagrok-libraries/bio/src/monomer-works/m
 import {getSeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
 import '@datagrok-libraries/bio/src/types/input';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
-import {InputColumnBase} from '@datagrok-libraries/bio/src/types/input';
 import {SeqValueBase} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {SeqTemps} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
@@ -60,7 +59,8 @@ type PolyToolEnumerateInputs = {
   placeholders: PolyToolPlaceholdersInput;
   placeholdersBreadth: PolyToolPlaceholdersBreadthInput;
   enumeratorType: DG.ChoiceInput<PolyToolEnumeratorType>
-  trivialNameCol: InputColumnBase,
+  trivialName: DG.InputBase<string>,
+  appendToTable: DG.InputBase<DG.DataFrame | null>,
   keepOriginal: DG.InputBase<boolean>;
   toAtomicLevel: DG.InputBase<boolean>;
   generateHelm: DG.InputBase<boolean>;
@@ -75,7 +75,7 @@ type PolyToolEnumerateHelmSerialized = {
   placeholders: string;
   placeholdersBreadth: string;
   enumeratorType: PolyToolEnumeratorType;
-  trivialNameCol: string;
+  trivialName: string;
   keepOriginal: boolean;
   toAtomicLevel: boolean;
   generateHelm: boolean;
@@ -170,7 +170,6 @@ async function getPolyToolEnumerateDialog(
     const libHelper = await getMonomerLibHelper();
     const monomerLib = libHelper.getMonomerLib();
     const seqHelper = await getSeqHelper();
-    const emptyDf: DG.DataFrame = DG.DataFrame.fromColumns([]);
 
     const helmHelper = await getHelmHelper();
     const monomerLibFuncs = helmHelper.buildMonomersFuncsFromLib(monomerLib);
@@ -216,7 +215,6 @@ async function getPolyToolEnumerateDialog(
     let srcId: { value: string, colName: string } | null = null;
     let ruleFileList: string[];
     let ruleInputs: RuleInputs;
-    const trivialNameSampleDiv = ui.divText('', {style: {marginLeft: '8px', marginTop: '2px'}});
     const warningsTextDiv = ui.divText('', {style: {color: 'red'}});
     const resultCountDiv = ui.divText('', {style: {
       fontSize: '11px', color: 'var(--grey-4)', marginTop: '2px', marginLeft: '4px', whiteSpace: 'nowrap',
@@ -291,22 +289,17 @@ async function getPolyToolEnumerateDialog(
           onValueChanged: (value: string[]) => { ruleFileList = value; }
         })).getForm()
       },
-      trivialNameCol: ui.input.column2(
+      trivialName: ui.input.string(
         'Trivial name', {
-          table: cell?.dataFrame,
-          filter: (col: DG.Column): boolean => {
-            return col.type === DG.COLUMN_TYPE.STRING && col != cell?.column; /* id */
-          },
-          onValueChanged: (): void => {
-            const valueCol = inputs.trivialNameCol.value;
-            let newSrcId: typeof srcId = null;
-            if (cell && valueCol) {
-              const originalId = valueCol.get(cell.rowIndex)!;
-              newSrcId = {value: originalId, colName: valueCol.name};
-            }
-            srcId = newSrcId;
-            trivialNameSampleDiv.textContent = srcId ? `Original ID: ${srcId.value}` : '';
+          value: '',
+          onValueChanged: (value: string): void => {
+            const trimmed = value?.trim();
+            srcId = trimmed ? {value: trimmed, colName: 'Trivial name'} : null;
           },
+        }),
+      appendToTable: ui.input.table(
+        'Append to table', {
+          items: grok.shell.tables,
           nullable: true,
         }),
     };
@@ -319,7 +312,22 @@ async function getPolyToolEnumerateDialog(
     };
     updateEnumTypeTooltip();
 
-    inputs.trivialNameCol.addOptions(trivialNameSampleDiv);
+    // Attach a "pick from column" icon button to the trivial name input
+    if (cell?.dataFrame) {
+      const colIcon = ui.iconFA('columns', (e: MouseEvent) => {
+        DG.Menu.popup()
+          .singleColumnSelector(cell.dataFrame, {
+            columnFilter: (col: DG.Column) => col.type === DG.COLUMN_TYPE.STRING && col !== cell.column,
+            onChange: (_grid, col: DG.Column, currentRowChanged: boolean) => {
+              if (currentRowChanged)
+                inputs.trivialName.value = col.get(cell.rowIndex) ?? '';
+            },
+          })
+          .show({x: e.clientX, y: e.clientY});
+      }, 'Pick trivial name from a column');
+      inputs.trivialName.addOptions(colIcon);
+    }
+    inputs.trivialName.root.style.maxWidth = '450px';
 
     // Wire up monomer cell double-click to open selection dialog
     inputs.placeholders.onMonomerCellEdit = async (position: number, currentMonomers: string[]) => {
@@ -634,14 +642,7 @@ async function getPolyToolEnumerateDialog(
       }
     };
 
-    const fillTrivialNameList = (table?: DG.DataFrame) => {
-      if (table) {
-        inputs.trivialNameCol.setColumnInputTable(table);
-        inputs.trivialNameCol.root.style.removeProperty('display');
-      } else {
-        inputs.trivialNameCol.setColumnInputTable(emptyDf);
-        inputs.trivialNameCol.root.style.setProperty('display', 'none');
-      }
+    const fillTrivialNameList = (_table?: DG.DataFrame) => {
       if (resizeInputs)
         resizeInputs();
     };
@@ -711,7 +712,13 @@ async function getPolyToolEnumerateDialog(
               rules: await ruleInputs.getActive()
             } : false,
             helmHelper);
-          grok.shell.addTableView(enumeratorResDf);
+          const appendTarget = inputs.appendToTable.value;
+          if (appendTarget) {
+            appendTarget.append(enumeratorResDf, true);
+            appendTarget.meta.detectSemanticTypes();
+          } else {
+            grok.shell.addTableView(enumeratorResDf);
+          }
         }
       } catch (err: any) {
         defaultErrorHandler(err);
@@ -735,8 +742,9 @@ async function getPolyToolEnumerateDialog(
       {style: {width: '100%'}}))
       .add(ui.divH([
         ui.divV([
-          inputs.trivialNameCol.root,
-          inputs.keepOriginal.root],
+          inputs.trivialName.root,
+          inputs.keepOriginal.root,
+          inputs.appendToTable.root],
         {style: {width: '50%'}}),
         ui.divV([
           ui.divH([inputs.toAtomicLevel.root, inputs.generateHelm.root]),
@@ -767,7 +775,7 @@ async function getPolyToolEnumerateDialog(
           placeholders: inputs.placeholders.stringValue,
           enumeratorType: inputs.enumeratorType.value,
           placeholdersBreadth: inputs.placeholdersBreadth.stringValue,
-          trivialNameCol: inputs.trivialNameCol.stringValue,
+          trivialName: inputs.trivialName.value,
           keepOriginal: inputs.keepOriginal.value,
           toAtomicLevel: inputs.toAtomicLevel.value,
           generateHelm: inputs.generateHelm.value,
@@ -781,7 +789,8 @@ async function getPolyToolEnumerateDialog(
         inputs.enumeratorType.value = x.enumeratorType ?? PolyToolEnumeratorTypes.Single;
         inputs.placeholders.stringValue = x.placeholders;
         inputs.placeholdersBreadth.stringValue = x.placeholdersBreadth;
-        inputs.trivialNameCol.stringValue = x.trivialNameCol;
+        if (x.trivialName)
+          inputs.trivialName.value = x.trivialName;
         inputs.keepOriginal.value = x.keepOriginal ?? false;
         inputs.toAtomicLevel.value = x.toAtomicLevel ?? true;
         inputs.generateHelm.value = x.generateHelm ?? true;