@datagrok/sequence-translator 1.3.15 → 1.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.3.15",
+  "version": "1.4.1",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"
@@ -22,7 +22,7 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.42.14",
+    "@datagrok-libraries/bio": "^5.42.15",
     "@datagrok-libraries/chem-meta": "^1.2.5",
     "@datagrok-libraries/tutorials": "^1.4.0",
     "@datagrok-libraries/utils": "^4.3.0",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@datagrok-libraries/helm-web-editor": "^1.1.11",
     "@datagrok-libraries/js-draw-lite": "^0.0.8",
-    "@datagrok/bio": "^2.15.0",
+    "@datagrok/bio": "^2.15.1",
     "@datagrok/helm": "^2.5.0",
     "@datagrok/chem": "^1.12.0",
     "@types/jquery": "^3.5.14",

package/src/apps/common/view/components/colored-input/colored-text-input.ts

@@ -19,7 +19,7 @@ export class ColoredTextInput {
     /** Resize, no scrolls  */
     resizeable: boolean = true
   ) {
-    $(this.root).addClass('colored-text-input');
+    $(this.root).addClass('st-colored-text-input');
     if (resizeable) {
       // make input field automatically resizeable
       this.textInputBase.onChanged.subscribe(

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

@@ -1,4 +1,4 @@
-.colored-text-input > textarea {
+.st-colored-text-input > textarea {
   width: 100%;
   -webkit-text-fill-color: transparent;
   background-color: transparent;
@@ -8,7 +8,7 @@
   height: 22px; /* Fine tuned value to avoid "jumping" of the textarea upon autoresize */
 }
 
-.colored-text-input > div {
+.st-colored-text-input > div {
   /* The values here are fine tuned to those of the ui.input textarea in order
    * to achieve precise overlap */
   overflow: auto;
@@ -25,5 +25,4 @@
   color: transparent;
   white-space: pre-wrap;
   word-wrap: break-word;
-  padding-left: 35px;
 }

package/src/apps/pattern/view/components/right-section.ts

@@ -96,10 +96,10 @@ export class PatternAppRightSection {
     }
 
     const message = ui.divV([
-      ui.divText(`Author: ${author}`),
       ui.divText(`Pattern Name: ${patternName}`),
-      ui.divText(`Created: ${new Date(createDate).toLocaleString()}`),
-      ui.divText(`Modified: ${new Date(modifyDate).toLocaleString()}`),
+      ui.divText(`Author: ${author}`),
+      ui.divText(`Created: ${getInfoTimestamp(new Date(createDate))}`),
+      ui.divText(`Modified: ${getInfoTimestamp(new Date(modifyDate))}`),
     ]);
     grok.shell.info(message);
   }
@@ -195,3 +195,6 @@ class OverwritePatternDialog {
   }
 }
 
+function getInfoTimestamp(date: Date): string {
+  return date.toLocaleString().split(':').slice(0, -1).join(':');
+}

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

@@ -33,7 +33,15 @@ class StructureAppLayout {
     this.onInvalidInput = new rxjs.Subject<string>();
     this.inputBase = Object.fromEntries(
       STRANDS.map(
-        (key) => [key, ui.input.textArea(key.toUpperCase(), {value: '', onValueChanged: () => { this.onInput.next(); }})]
+        (key) => {
+          const input = ui.input.textArea(key.toUpperCase(), {value: '', onValueChanged: () => {
+            this.onInput.next();
+            // WARNING: this fine tuning is necessary to fix layout within ui.form
+            // js-api version ^1.21
+            $(input.root.getElementsByTagName('div')).css('padding-left', '38px');
+          }});
+          return [key, input];
+        }
       )
     );
     this.useChiralInput = ui.input.bool('Use chiral', {value: true});
@@ -165,11 +173,6 @@ class StructureAppLayout {
   }
 
   private getMolfile(ss: StrandData, as: StrandData, as2: StrandData): string {
-    // if (ss.strand === '' && (as.strand !== '' || as2.strand !== '')) {
-    //   this.onInvalidInput.next();
-    //   return '';
-    // }
-
     return getLinkedMolfile(ss, as, as2, this.useChiralInput.value!, this.th);
   }
 

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

@@ -24,10 +24,6 @@
   table-layout: fixed;
 }
 
-/* .st-translator-output-table table tbody tr td { */
-/*   max-width: 20%; */
-/* } */
-
 .st-translator-output-table td {
   padding-top: 6px;
   padding-bottom: 6px;

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

@@ -10,8 +10,6 @@ import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
 import {DEFAULT_FORMATS} from '../../common/model/const';
 import {download} from '../../common/model/helpers';
-import {FormatDetector} from '../../common/model/parsing-validation/format-detector';
-import {SequenceValidator} from '../../common/model/parsing-validation/sequence-validator';
 import {ColoredTextInput} from '../../common/view/components/colored-input/colored-text-input';
 import {highlightInvalidSubsequence} from '../../common/view/components/colored-input/input-painters';
 import {MoleculeImage} from '../../common/view/components/molecule-img';
@@ -20,11 +18,11 @@ import {IsolatedAppUIBase} from '../../common/view/isolated-app-ui';
 import {MonomerLibViewer} from '../../common/view/monomer-lib-viewer';
 import {SequenceToMolfileConverter} from '../../structure/model/sequence-to-molfile';
 import {convert, getSupportedTargetFormats, getTranslatedSequences} from '../model/conversion-utils';
-import {FormatConverter} from '../model/format-converter';
 import {ITranslationHelper} from '../../../types';
 
 import {NUCLEOTIDES_FORMAT, SEQUENCE_COPIED_MSG, SEQ_TOOLTIP_MSG} from './const';
 import './style.css';
+import $ from 'cash-dom';
 import {_package} from '../../../package';
 
 const enum REQUIRED_COLUMN_LABEL {
@@ -55,7 +53,12 @@ class TranslatorAppLayout {
         await this.updateMolImg();
       }
     });
-    this.sequenceInputBase = ui.input.textArea('', {value: DEFAULT_AXOLABS_INPUT, onValueChanged: () => { this.onInput.next(); }});
+
+    $(this.formatChoiceInput.root.getElementsByTagName('select')[0]).css('width', '20%');
+
+    this.sequenceInputBase = ui.input.textArea(
+      '', {value: DEFAULT_AXOLABS_INPUT, onValueChanged: () => { this.onInput.next(); }}
+    );
 
     this.init();
 
@@ -457,9 +460,9 @@ class ColumnInputsManager {
     this.selectColumnIfTableNotNull(selectedTable, selectedColumnName, columnLabel);
 
     const input = ui.input.choice(`${columnLabel}`, {
-        value: selectedColumnName, items: columnNames,
-        onValueChanged: (value) => this.selectColumnIfTableNotNull(selectedTable, value, columnLabel)
-      }
+      value: selectedColumnName, items: columnNames,
+      onValueChanged: (value) => this.selectColumnIfTableNotNull(selectedTable, value, columnLabel)
+    }
     );
 
     return input;

package/src/demo/demo-st-ui.ts

@@ -24,7 +24,7 @@ export async function demoOligoStructureUI() {
   await tryCatch(async () => {
     async function setInputValue(idx: number, sequence: string): Promise<void> {
       await delay(500);
-      const textInputs: NodeListOf<HTMLTextAreaElement> = document.querySelectorAll('.colored-text-input > textarea');
+      const textInputs: NodeListOf<HTMLTextAreaElement> = document.querySelectorAll('.st-colored-text-input > textarea');
       const textarea = textInputs[idx];
       textarea.value = sequence;
       const event = new Event('input');

package/src/polytool/pt-conversion.ts

@@ -269,9 +269,7 @@ export class Chain {
 export function doPolyToolConvert(sequences: string[], rules: Rules): string[] {
   const helms = new Array<string>(sequences.length);
   for (let i = 0; i < sequences.length; i++) {
-    if (sequences[i] === undefined)
-      helms[i] = '';
-    else {
+    if (sequences[i] === undefined) { helms[i] = ''; } else {
       const chain = Chain.fromNotation(sequences[i], rules);
       helms[i] = chain.getHelm();
     }

package/src/polytool/pt-convert-editor.ts

@@ -74,14 +74,14 @@ export class PolyToolConvertFuncEditor {
 
   public async showDialog(): Promise<DG.Column<string>> {
     const formDiv = ui.div([
-        this.inputs.table,
-        this.inputs.seqCol,
-        this.inputs.generateHelm,
-        this.inputs.chiralityEngine,
-        this.inputs.rules.header,
-        this.inputs.rules.form,
-      ],
-      {style: {minWidth: '320px'}});
+      this.inputs.table,
+      this.inputs.seqCol,
+      this.inputs.generateHelm,
+      this.inputs.chiralityEngine,
+      this.inputs.rules.header,
+      this.inputs.rules.form,
+    ],
+    {style: {minWidth: '320px'}});
 
     return new Promise((resolve, reject) => {
       ui.dialog({title: PT_UI_DIALOG_CONVERSION})

package/src/polytool/pt-dialog.ts

@@ -3,7 +3,6 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import $ from 'cash-dom';
 import {Unsubscribable} from 'rxjs';
 
 import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
@@ -110,7 +109,6 @@ async function getPolyToolEnumerationChemDialog(cell?: DG.Cell): Promise<DG.Dial
     for (const sub of subs) sub.unsubscribe();
   };
   try {
-
     const [libList, helmHelper] = await Promise.all([
       getLibrariesList(), getHelmHelper()]);
 
@@ -209,7 +207,7 @@ export async function polyToolConvert(
 
     const resHelmColName = getUnusedName(table, `transformed(${seqCol.name})`);
     const resHelmCol = DG.Column.fromType(DG.COLUMN_TYPE.STRING, resHelmColName, resList.length)
-      .init((rowIdx: number) => { return resList[rowIdx];});
+      .init((rowIdx: number) => { return resList[rowIdx]; });
     resHelmCol.semType = DG.SEMTYPE.MACROMOLECULE;
     resHelmCol.meta.units = NOTATION.HELM;
     resHelmCol.setTag(DG.TAGS.CELL_RENDERER, 'helm');

package/src/polytool/pt-enumeration-chem.ts

@@ -60,12 +60,11 @@ M  END`;
 
 export async function getEnumerationChem(molString: string, screenLibrary: string):
   Promise<string[]> {
-
   const variableMonomers = await getAvailableMonomers(screenLibrary);
   const variableMols = await getAvailableMonomerMols(screenLibrary);
   const enumerations = new Array<string>(variableMonomers.length);
 
-	const rdkitModule: RDModule = await grok.functions.call('Chem:getRdKitModule');
+  const rdkitModule: RDModule = await grok.functions.call('Chem:getRdKitModule');
   const molScaffold: RDMol = rdkitModule.get_mol(molString);
   const smiScaffold = molScaffold.get_smiles();
   molScaffold.delete();
@@ -73,7 +72,6 @@ export async function getEnumerationChem(molString: string, screenLibrary: strin
   const smilesSubsts = new Array<string>(variableMonomers.length);
 
   for (let i = 0; i < variableMonomers.length; i++) {
-			
     const name = variableMonomers[i];
     const molBlock = variableMols[name];
     const molSubst: RDMol = rdkitModule.get_mol(molBlock);
@@ -87,18 +85,16 @@ export async function getEnumerationChem(molString: string, screenLibrary: strin
       //TODO: use RDKit linking function when exposed
       const smiResRaw = `${smiScaffold}.${smilesSubsts[i]}`.replaceAll('[1*]C', 'C([1*])').replaceAll('[1*]c', 'c([1*])').replaceAll('[1*]O', 'O([1*])').replaceAll('[1*]N', 'N([1*])');
       const smiRes = `${smiResRaw}`.replaceAll('([1*])', '9').replaceAll('[1*]', '9');
-      molRes = rdkitModule.get_mol(smiRes, JSON.stringify({mappedDummiesAreRGroups: true}))
-      let molV3 = molRes.get_v3Kmolblock();
+      molRes = rdkitModule.get_mol(smiRes, JSON.stringify({mappedDummiesAreRGroups: true}));
+      const molV3 = molRes.get_v3Kmolblock();
       enumerations[i] = molV3;
-    } 
-    catch(err:any) {
+    } catch (err:any) {
       enumerations[i] = '';
-    }
-    finally {
+    } finally {
       molRes?.delete();
     }
   }
-  
+
 
   return enumerations;
 }

package/src/polytool/pt-enumeration-helm-dialog.ts

@@ -82,9 +82,9 @@ export async function polyToolEnumerateHelmUI(cell?: DG.Cell): Promise<void> {
       if (isFirstShow) {
         const dialogInputList = dialog.inputs;
         const dialogRootCash = $(dialog.root);
-        const contentMaxHeight = maxHeight
-          - dialogRootCash.find('div.d4-dialog-header').get(0)!.offsetHeight
-          - dialogRootCash.find('div.d4-dialog-footer').get(0)!.offsetHeight;
+        const contentMaxHeight = maxHeight -
+          dialogRootCash.find('div.d4-dialog-header').get(0)!.offsetHeight -
+          dialogRootCash.find('div.d4-dialog-footer').get(0)!.offsetHeight;
 
         // dialog.inputs2.macromolecule.root.style.backgroundColor = '#CCFFCC';
 
@@ -259,9 +259,9 @@ async function getPolyToolEnumerateDialog(
           let rowIdx = posList.indexOf(clickedAtomContIdxStr);
           if (rowIdx === -1) {
             rowIdx = posList.findIndex((v) => isNaN(v));
-            if (rowIdx === -1) {
+            if (rowIdx === -1)
               rowIdx = phDf.rows.addNew([clickedAtomContIdxStr, '']).idx;
-            }
+
             phDf.set('Position', rowIdx, clickedAtomContIdxStr);
             // const tgtCell = inputs.placeholders.grid.cell('Monomers', rowIdx);
           }

package/src/polytool/pt-placeholders-input.ts

@@ -107,7 +107,7 @@ export function getPlaceholdersFromText(src: string): PolyToolPlaceholders {
     const lineM = /^\s*(?<pos>\d+)\s*:\s*(?<monomers>.+)$/.exec(line);
     if (lineM) {
       const pos: number = parseInt(lineM.groups!['pos']) - 1;
-      const monomerList: string[] = lineM.groups!['monomers'].split(',').map(m => m.trim());
+      const monomerList: string[] = lineM.groups!['monomers'].split(',').map((m) => m.trim());
       if (!(pos in res)) res[pos] = [];
       res[pos].push(...monomerList);
     }

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

@@ -86,18 +86,18 @@ category('PolyTool: Enumerate', () => {
           }
         },
       tgt: [
-        ["PEPTIDE1{[Ac(1)].D.W.G.K.L.Y.[C(1)].G.[NH2]}$$$$V2.0", "-F2D-P5K-[Tic]7Y"],
-        ["PEPTIDE1{[Ac(1)].D.W.G.K.L.T.[C(1)].G.[NH2]}$$$$V2.0", "-F2D-P5K-[Tic]7T"],
-        ["PEPTIDE1{[Ac(1)].D.W.G.P.L.Y.[C(1)].G.[NH2]}$$$$V2.0", "-F2D-P5P-[Tic]7Y"],
-        ["PEPTIDE1{[Ac(1)].D.W.G.P.L.T.[C(1)].G.[NH2]}$$$$V2.0", "-F2D-P5P-[Tic]7T"],
-        ["PEPTIDE1{[Ac(1)].D.W.G.[F4COO].L.Y.[C(1)].G.[NH2]}$$$$V2.0", "-F2D-P5[F4COO]-[Tic]7Y"],
-        ["PEPTIDE1{[Ac(1)].D.W.G.[F4COO].L.T.[C(1)].G.[NH2]}$$$$V2.0", "-F2D-P5[F4COO]-[Tic]7T"],
-        ["PEPTIDE1{[Ac(1)].L.W.G.K.L.Y.[C(1)].G.[NH2]}$$$$V2.0", "-F2L-P5K-[Tic]7Y"],
-        ["PEPTIDE1{[Ac(1)].L.W.G.K.L.T.[C(1)].G.[NH2]}$$$$V2.0", "-F2L-P5K-[Tic]7T"],
-        ["PEPTIDE1{[Ac(1)].L.W.G.P.L.Y.[C(1)].G.[NH2]}$$$$V2.0", "-F2L-P5P-[Tic]7Y"],
-        ["PEPTIDE1{[Ac(1)].L.W.G.P.L.T.[C(1)].G.[NH2]}$$$$V2.0", "-F2L-P5P-[Tic]7T"],
-        ["PEPTIDE1{[Ac(1)].L.W.G.[F4COO].L.Y.[C(1)].G.[NH2]}$$$$V2.0", "-F2L-P5[F4COO]-[Tic]7Y"],
-        ["PEPTIDE1{[Ac(1)].L.W.G.[F4COO].L.T.[C(1)].G.[NH2]}$$$$V2.0", "-F2L-P5[F4COO]-[Tic]7T"],
+        ['PEPTIDE1{[Ac(1)].D.W.G.K.L.Y.[C(1)].G.[NH2]}$$$$V2.0', '-F2D-P5K-[Tic]7Y'],
+        ['PEPTIDE1{[Ac(1)].D.W.G.K.L.T.[C(1)].G.[NH2]}$$$$V2.0', '-F2D-P5K-[Tic]7T'],
+        ['PEPTIDE1{[Ac(1)].D.W.G.P.L.Y.[C(1)].G.[NH2]}$$$$V2.0', '-F2D-P5P-[Tic]7Y'],
+        ['PEPTIDE1{[Ac(1)].D.W.G.P.L.T.[C(1)].G.[NH2]}$$$$V2.0', '-F2D-P5P-[Tic]7T'],
+        ['PEPTIDE1{[Ac(1)].D.W.G.[F4COO].L.Y.[C(1)].G.[NH2]}$$$$V2.0', '-F2D-P5[F4COO]-[Tic]7Y'],
+        ['PEPTIDE1{[Ac(1)].D.W.G.[F4COO].L.T.[C(1)].G.[NH2]}$$$$V2.0', '-F2D-P5[F4COO]-[Tic]7T'],
+        ['PEPTIDE1{[Ac(1)].L.W.G.K.L.Y.[C(1)].G.[NH2]}$$$$V2.0', '-F2L-P5K-[Tic]7Y'],
+        ['PEPTIDE1{[Ac(1)].L.W.G.K.L.T.[C(1)].G.[NH2]}$$$$V2.0', '-F2L-P5K-[Tic]7T'],
+        ['PEPTIDE1{[Ac(1)].L.W.G.P.L.Y.[C(1)].G.[NH2]}$$$$V2.0', '-F2L-P5P-[Tic]7Y'],
+        ['PEPTIDE1{[Ac(1)].L.W.G.P.L.T.[C(1)].G.[NH2]}$$$$V2.0', '-F2L-P5P-[Tic]7T'],
+        ['PEPTIDE1{[Ac(1)].L.W.G.[F4COO].L.Y.[C(1)].G.[NH2]}$$$$V2.0', '-F2L-P5[F4COO]-[Tic]7Y'],
+        ['PEPTIDE1{[Ac(1)].L.W.G.[F4COO].L.T.[C(1)].G.[NH2]}$$$$V2.0', '-F2L-P5[F4COO]-[Tic]7T'],
       ],
     }
   };