@datagrok/sequence-translator 1.0.14 → 1.0.16

package/src/axolabs/constants.ts

@@ -44,22 +44,22 @@ export const AXOLABS_MAP:
     color: 'rgb(255,192,0)',
   },
   'A': {
-    fullName: 'Adenine',
+    fullName: 'Adenosine',
     symbols: ['a', 'a', 'a', 'a'],
     color: RNA_COLOR,
   },
   'C': {
-    fullName: 'Cytosine',
+    fullName: 'Cytidine',
     symbols: ['c', 'c', 'c', 'c'],
     color: RNA_COLOR,
   },
   'G': {
-    fullName: 'Guanine',
+    fullName: 'Guanosine',
     symbols: ['g', 'g', 'g', 'g'],
     color: RNA_COLOR,
   },
   'U': {
-    fullName: 'Uracil',
+    fullName: 'Uridine',
     symbols: ['u', 'u', 'u', 'u'],
     color: RNA_COLOR,
   },

package/src/main/main-view.ts

@@ -1,35 +1,28 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
+
+import * as rxjs from 'rxjs';
 import {convertSequence, undefinedInputSequence, isValidSequence} from '../structures-works/sequence-codes-tools';
 import {map} from '../structures-works/map';
 import {MODIFICATIONS} from '../structures-works/const';
 import {sequenceToSmiles, sequenceToMolV3000} from '../structures-works/from-monomers';
 import $ from 'cash-dom';
 import {download} from '../helpers';
+import {extractAtomDataV3000} from '../structures-works/mol-transformations';
+import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
 const defaultInput = 'fAmCmGmAmCpsmU'; // todo: capitalize constants
 const sequenceWasCopied = 'Copied'; // todo: wrap hardcoded literals into constants
 const tooltipSequence = 'Copy sequence';
 
-export async function mainView(): Promise<HTMLDivElement> {
-  const monomersLibAddress = 'System:AppData/SequenceTranslator/helmLib.json';
+export async function mainView(onSequenceChanged: (seq: string) => void): Promise<HTMLDivElement> {
+  const onInput: rxjs.Subject<string> = new rxjs.Subject<string>();
+
   async function updateTableAndMolecule(sequence: string, inputFormat: string): Promise<void> {
     moleculeSvgDiv.innerHTML = '';
     outputTableDiv.innerHTML = '';
     const pi = DG.TaskBarProgressIndicator.create('Rendering table and molecule...');
-    let errorsExist = false;
-
-    // external helm-like monomers library
-    const fileExists = await grok.dapi.files.exists(monomersLibAddress);
-    if (!fileExists) {
-      // todo: improve behaviour in this case
-      grok.shell.warning('Please, provide the file with monomers library as System:AppData/SequenceTranslator/helmLib.json');
-      pi.close();
-      return;
-    }
-
-    const monomersLib = await grok.dapi.files.readAsText(monomersLibAddress);
 
     try {
       sequence = sequence.replace(/\s/g, '');
@@ -46,16 +39,16 @@ export async function mainView(): Promise<HTMLDivElement> {
         tableRows.push({
           'key': key,
           'value': ('indexOfFirstNotValidChar' in outputSequenceObj) ?
-          ui.divH([
-            ui.divText(sequence.slice(0, indexOfFirstNotValidChar), {style: {color: 'grey'}}),
-            ui.tooltip.bind(
-              ui.divText(sequence.slice(indexOfFirstNotValidChar), {style: {color: 'red'}}),
-              'Expected format: ' + JSON.parse(outputSequenceObj.indexOfFirstNotValidChar!).synthesizer +
-              '. See tables with valid codes on the right',
-            ),
-          ]) : //@ts-ignore
-          ui.link(outputSequenceObj[key], () => navigator.clipboard.writeText(outputSequenceObj[key])
-            .then(() => grok.shell.info(sequenceWasCopied)), tooltipSequence, ''),
+            ui.divH([
+              ui.divText(sequence.slice(0, indexOfFirstNotValidChar), {style: {color: 'grey'}}),
+              ui.tooltip.bind(
+                ui.divText(sequence.slice(indexOfFirstNotValidChar), {style: {color: 'red'}}),
+                'Expected format: ' + JSON.parse(outputSequenceObj.indexOfFirstNotValidChar!).synthesizer +
+                '. See tables with valid codes on the right',
+              ),
+            ]) : //@ts-ignore
+            ui.link(outputSequenceObj[key], () => navigator.clipboard.writeText(outputSequenceObj[key])
+              .then(() => grok.shell.info(sequenceWasCopied)), tooltipSequence, ''),
         });
       }
 
@@ -67,27 +60,71 @@ export async function mainView(): Promise<HTMLDivElement> {
       );
 
       if (outputSequenceObj.type != undefinedInputSequence && outputSequenceObj.Error != undefinedInputSequence) {
-        const canvas = ui.canvas(300, 170);
-        canvas.addEventListener('click', () => {
-          const canv = ui.canvas($(window).width(), $(window).height());
-          const mol = sequenceToMolV3000(
-            inputSequenceField.value.replace(/\s/g, ''), false, true,
-            output.synthesizer![0],
-          );
-          console.log(mol);
-          // @ts-ignore
-          OCL.StructureView.drawMolecule(canv, OCL.Molecule.fromMolfile(mol), {suppressChiralText: true});
-          ui.dialog('Molecule: ' + inputSequenceField.value)
-            .add(canv)
-            .showModal(true);
+        const formCanvasWidth = 500;
+        const formCanvasHeight = 170;
+        const formCanvas = ui.canvas(
+          formCanvasWidth * window.devicePixelRatio, formCanvasHeight * window.devicePixelRatio);
+        formCanvas.style.width = `${formCanvasWidth}px`;
+        formCanvas.style.height = `${formCanvasHeight}px`;
+
+        formCanvas.addEventListener('click', async () => {
+          try {
+            const mol = sequenceToMolV3000(
+              inputSequenceField.value.replace(/\s/g, ''), false, true,
+              output.synthesizer![0],
+            );
+            console.log(mol);
+
+            const addDiv = ui.div([], {style: {overflowX: 'scroll'}});
+
+            // addDiv size required, but now available before dialog show()
+            const coordinates = extractAtomDataV3000(mol);
+            const cw: number = $(window).width() * 0.80; // addDiv.clientWidth
+            const ch: number = $(window).height() * 0.70; // addDiv.clientHeight
+            const molWidth: number = Math.max(...coordinates.x) - Math.min(...coordinates.x);
+            const molHeight: number = Math.max(...coordinates.y) - Math.min(...coordinates.y);
+
+            const wR: number = cw / molWidth;
+            const hR: number = ch / molHeight;
+            const r: number = hR; // Math.max(wR, hR);
+            const dlgCanvasWidth = r * molWidth;
+            const dlgCanvasHeight = r * molHeight;
+
+            const dlgCanvas = ui.canvas(dlgCanvasWidth * window.devicePixelRatio, dlgCanvasHeight * window.devicePixelRatio);
+            dlgCanvas.style.width = `${dlgCanvasWidth}px`;
+            dlgCanvas.style.height = `${dlgCanvasHeight}px`;
+
+            // // @ts-ignore
+            // OCL.StructureView.drawMolecule(dlgCanvas, OCL.Molecule.fromMolfile(mol), {suppressChiralText: true});
+            // await grok.chem.canvasMol(0, 0, dlgCanvas.width, dlgCanvas.height, dlgCanvas, mol, null,
+            //   {setNewCoords: false, normalizeDepiction: false, straightenDepiction: false});
+            await grok.functions.call('Chem:canvasMol', {
+              x: 0, y: 0, w: dlgCanvas.width, h: dlgCanvas.height, canvas: dlgCanvas,
+              molString: mol, scaffoldMolString: '',
+              options: {normalizeDepiction: false, straightenDepiction: false}
+            });
+
+            addDiv.appendChild(dlgCanvas);
+            ui.dialog('Molecule: ' + inputSequenceField.value)
+              .add(addDiv)
+              .showModal(true);
+          } catch (err) {
+            const errStr = errorToConsole(err);
+            console.error(errStr);
+          }
         });
-        $(canvas).on('mouseover', () => $(canvas).css('cursor', 'zoom-in'));
-        $(canvas).on('mouseout', () => $(canvas).css('cursor', 'default'));
+        $(formCanvas).on('mouseover', () => $(formCanvas).css('cursor', 'zoom-in'));
+        $(formCanvas).on('mouseout', () => $(formCanvas).css('cursor', 'default'));
         const mol = sequenceToMolV3000(inputSequenceField.value.replace(/\s/g, ''), false, true,
           output.synthesizer![0]);
-        // @ts-ignore
-        OCL.StructureView.drawMolecule(canvas, OCL.Molecule.fromMolfile(mol), {suppressChiralText: true});
-        moleculeSvgDiv.append(canvas);
+        // // @ts-ignore
+        // OCL.StructureView.drawMolecule(formCanvas, OCL.Molecule.fromMolfile(mol), {suppressChiralText: true});
+        await grok.functions.call('Chem:canvasMol', {
+          x: 0, y: 0, w: formCanvas.width, h: formCanvas.height, canvas: formCanvas,
+          molString: mol, scaffoldMolString: '',
+          options: {normalizeDepiction: false, straightenDepiction: false}
+        });
+        moleculeSvgDiv.append(formCanvas);
       } else
         moleculeSvgDiv.innerHTML = '';
     } finally {
@@ -102,7 +139,13 @@ export async function mainView(): Promise<HTMLDivElement> {
   const moleculeSvgDiv = ui.block([]);
   const outputTableDiv = ui.div([]);
   const inputSequenceField = ui.textInput('', defaultInput, (sequence: string) => {
+    // Send event to DG.debounce()
+    onInput.next(sequence);
+  });
+
+  DG.debounce<string>(onInput, 300).subscribe((sequence) => {
     updateTableAndMolecule(sequence, inputFormatChoiceInput.value!);
+    onSequenceChanged(sequence);
   });
 
   const asoGapmersGrid = DG.Viewer.grid(
@@ -139,9 +182,9 @@ export async function mainView(): Promise<HTMLDivElement> {
   );
 
   const overhangModificationsGrid = DG.Viewer.grid(
-      DG.DataFrame.fromColumns([
-        DG.Column.fromStrings('Name', Object.keys(MODIFICATIONS)),
-      ])!, {showRowHeader: false, showCellTooltip: false, allowEdit: false},
+    DG.DataFrame.fromColumns([
+      DG.Column.fromStrings('Name', Object.keys(MODIFICATIONS)),
+    ])!, {showRowHeader: false, showCellTooltip: false, allowEdit: false},
   );
   updateTableAndMolecule(defaultInput, inputFormatChoiceInput.value!);
 
@@ -171,7 +214,6 @@ export async function mainView(): Promise<HTMLDivElement> {
 
   const downloadMolFileIcon = ui.iconFA('download', async () => {
     const clearSequence = inputSequenceField.value.replace(/\s/g, '');
-    const monomersLib = await grok.dapi.files.readAsText(monomersLibAddress);
     const result = sequenceToMolV3000(inputSequenceField.value.replace(/\s/g, ''), false, false,
       inputFormatChoiceInput.value!);
     download(clearSequence + '.mol', encodeURIComponent(result));
@@ -203,9 +245,8 @@ export async function mainView(): Promise<HTMLDivElement> {
           appMainDescription,
           ui.div([
             ui.h1('Input sequence'),
-            ui.div([
-              inputSequenceField.root,
-            ], 'input-base'),
+            ui.div([], 'input-base'),
+            inputSequenceField.root,
           ], 'inputSequence'),
           ui.div([inputFormatChoiceInput], {style: {padding: '5px 0'}}),
           ui.block([

package/src/package.ts

@@ -6,6 +6,7 @@ import {defineAxolabsPattern} from './axolabs/define-pattern';
 import {saveSenseAntiSense} from './structures-works/save-sense-antisense';
 import {mainView} from './main/main-view';
 import {IMonomerLib, MonomerWorks, readLibrary} from '@datagrok-libraries/bio';
+import {OligoSdFileApp} from './apps/oligo-sd-file-app';
 
 export const _package = new DG.Package();
 
@@ -16,11 +17,11 @@ export let monomerWorks: MonomerWorks | null = null;
 
 export function getMonomerWorks() {
   return monomerWorks;
-};
+}
 
 export function getMonomerLib() {
   return monomerLib;
-};
+}
 
 //name: Sequence Translator
 //tags: app
@@ -35,14 +36,60 @@ export async function sequenceTranslator(): Promise<void> {
   windows.showToolbox = false;
   windows.showHelp = false;
 
+  let urlParams: URLSearchParams = new URLSearchParams(window.location.search);
+  let mainSeq: string = 'fAmCmGmAmCpsmU';
   const v = grok.shell.newView('Sequence Translator', []);
   v.box = true;
-  v.append(ui.tabControl({
-    'MAIN': await mainView(),
+  const tc = ui.tabControl({
+    'MAIN': await mainView((seq) => {
+      mainSeq = seq;
+      urlParams = new URLSearchParams();
+      urlParams.set('seq', mainSeq);
+      updatePath();
+    }),
     'AXOLABS': defineAxolabsPattern(),
     'SDF': saveSenseAntiSense(),
-  }));
+  });
+  tc.onTabChanged.subscribe((value) => {
+    if (tc.currentPane.name != 'MAIN')
+      urlParams.delete('seq');
+    else
+      urlParams.set('seq', mainSeq);
+    updatePath();
+  });
+
+  function updatePath() {
+    const urlParamsTxt: string = Object.entries(urlParams)
+      .map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
+    v.path = '/apps/SequenceTranslator/SequenceTranslator' + `/${tc.currentPane.name}/?${urlParamsTxt}`;
+  }
+
+  const pathParts: string[] = window.location.pathname.split('/');
+  if (pathParts.length >= 5) {
+    const tabName: string = pathParts[5];
+    tc.currentPane = tc.getPane(tabName);
+  }
+
+  v.append(tc);
+  console.debug('SequenceTranslator: app sequenceTranslator() ' + `v.path='${v.path}', v.basePath='${v.basePath}'.`);
 }
 
 //tags: autostart
 autostartOligoSdFileSubscription();
+
+//name: oligoSdFileApp
+//description: Test/demo app for oligoSdFile
+export async function oligoSdFileApp() {
+  console.debug('SequenceTranslator: package.ts oligoSdFileApp()');
+
+  const pi = DG.TaskBarProgressIndicator.create('open oligoSdFile app');
+  try {
+    grok.shell.windows.showProperties = false;
+    grok.shell.windows.showHelp = false;
+
+    const app = new OligoSdFileApp();
+    await app.init();
+  } finally {
+    pi.close();
+  }
+}

package/src/structures-works/const.ts

@@ -1,18 +1,5 @@
-export const MODIFICATIONS: {[index: string]: {molecularWeight: number, left: string, right: string}} = {
-  '(invabasic)': {
-    molecularWeight: 118.13,
-    left: 'O[C@@H]1C[C@@H]O[C@H]1CO',
-    right: 'O[C@@H]1C[C@@H]O[C@H]1CO',
-  },
-  '(GalNAc-2-JNJ)': {
-    molecularWeight: 1273.3,
-    left: 'C(COCCC(=O)NCCCNC(=O)CCCCOC2OC(CO)C(O)C(O)C2NC(=O)C)' +
-    '(COCCC(=O)NCCCNC(=O)CCCCOC2OC(CO)C(O)C(O)C2NC(=O)C)' +
-    '(COCCC(=O)NCCCNC(=O)CCCCOC2OC(CO)C(O)C(O)C2NC(=O)C)NC(=O)CCCC(=O)NCC(O)CO',
-    right: 'OCC(O)CNC(=O)CCCC(=O)NC(COCCC(=O)NCCCNC(=O)CCCCOC2OC(CO)C(O)C(O)C2NC(=O)C)' +
-    '(COCCC(=O)NCCCNC(=O)CCCCOC2OC(CO)C(O)C(O)C2NC(=O)C)'+
-    '(COCCC(=O)NCCCNC(=O)CCCCOC2OC(CO)C(O)C(O)C2NC(=O)C)',
-  },
-};
+import * as map from './map';
+
+export const MODIFICATIONS = map.MODIFICATIONS;
 
 export const standardPhosphateLinkSmiles = 'OP(=O)(O)O';

package/src/structures-works/converters.ts

@@ -1,33 +1,35 @@
-import {lcmsToGcrs} from './map';
+import {lcmsToGcrs, MODIFICATIONS} from './map';
 import * as DG from 'datagrok-api/dg';
 import {DELIMITER} from './map';
+import {sortByStringLengthInDescendingOrder} from '../helpers';
 //name: gcrsToLcms
 //input: string nucleotides {semType: GCRS}
 //output: string result {semType: LCMS}
 export function gcrsToLcms(sequence: string): string {
-  const df = DG.DataFrame.fromCsv(lcmsToGcrs);
-  const arr1 = df.getCol('GCRS').toList();
-  const arr2 = df.getCol('LCMS').toList();
-  const obj: {[i: string]: string} = {};
-  arr1.forEach((element, index) => obj[element] = arr2[index]);
-  obj[DELIMITER] = DELIMITER;
-  // for (let i = 0; i < arr1.length; i++) {
-  //   arr1[i] = arr1[i].replace('(', '\\(');
-  //   arr1[i] = arr1[i].replace(')', '\\)');
-  // }
-  // const regExp = new RegExp('(' + arr1.join('|') + ')', 'g');
-  // let r1 = sequence.replace(regExp, function(code) {return obj[code];});
-  const codes = arr1.concat(DELIMITER).sort(function(a, b) {return b.length - a.length;});
-  let i = 0;
-  let r1 = '';
-  while (i < sequence.length) {
-    const matchedCode = codes.find((c) => c == sequence.slice(i, i + c.length));
-    r1 += obj[sequence.slice(i, i + matchedCode.length)];
-    i += matchedCode.length;
+  try {
+    const df = DG.DataFrame.fromCsv(lcmsToGcrs);
+    const arr1: string[] = df.getCol('GCRS').toList();
+    const arr2: string[] = df.getCol('LCMS').toList();
+    const obj: { [i: string]: string } = {};
+    arr1.forEach((element, index) => obj[element] = arr2[index]);
+    obj[DELIMITER] = DELIMITER;
+    const codes = arr1
+      .concat(DELIMITER)
+      .concat(Object.keys(MODIFICATIONS));
+    const sortedCodes = sortByStringLengthInDescendingOrder(codes);
+    let i = 0;
+    let r1 = '';
+    while (i < sequence.length) {
+      const matchedCode = sortedCodes.find((c) => c == sequence.slice(i, i + c.length))!;
+      r1 += obj[sequence.slice(i, i + matchedCode.length)];
+      i += matchedCode.length;
+    }
+    while (r1.indexOf('//') != -1)
+      r1 = r1.replace('//', '/');
+    return r1;
+  } catch {
+    return '<error>';
   }
-  while (r1.indexOf('//') != -1)
-    r1 = r1.replace('//', '/');
-  return r1;
 }
 
 //name: asoGapmersNucleotidesToBioSpring
@@ -35,9 +37,9 @@ export function gcrsToLcms(sequence: string): string {
 //output: string result {semType: BioSpring / Gapmers}
 export function asoGapmersNucleotidesToBioSpring(nucleotides: string): string {
   let count: number = -1;
-  const objForEdges: {[index: string]: string} = {
+  const objForEdges: { [index: string]: string } = {
     '(invabasic)': '(invabasic)', '(GalNAc-2-JNJ)': '(GalNAc-2-JNJ)', 'T': '5*', 'A': '6*', 'C': '7*', 'G': '8*'};
-  const objForCenter: {[index: string]: string} = {
+  const objForCenter: { [index: string]: string } = {
     '(invabasic)': '(invabasic)', '(GalNAc-2-JNJ)': '(GalNAc-2-JNJ)', 'T': 'T*', 'A': 'A*', 'C': '9*', 'G': 'G*'};
   return nucleotides.replace(/(\(invabasic\)|\(GalNAc-2-JNJ\)|A|T|C|G)/g, function(x: string) {
     count++;
@@ -51,7 +53,7 @@ export function asoGapmersNucleotidesToBioSpring(nucleotides: string): string {
 //output: string result {semType: GCRS / Gapmers}
 export function asoGapmersNucleotidesToGcrs(nucleotides: string): string {
   let count: number = -1;
-  const objForEdges: {[index: string]: string} = {
+  const objForEdges: { [index: string]: string } = {
     '(invabasic)': '(invabasic)', '(GalNAc-2-JNJ)': '(GalNAc-2-JNJ)', 'T': 'moeUnps',
     'A': 'moeAnps', 'C': 'moe5mCnps', 'G': 'moeGnps'};
   const objForCenter: {[index: string]: string} = {'(invabasic)': '(invabasic)', '(GalNAc-2-JNJ)': '(GalNAc-2-JNJ)',