@datagrok/sequence-translator 1.0.4 → 1.0.5

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.0.4",
+  "version": "1.0.5",
+  "author": {
+    "name": "Vadym Kovadlo",
+    "email": "vkovadlo@datagrok.ai"
+  },
   "description": "SequenceTranslator is a [package](https://datagrok.ai/help/develop/develop#packages) for the [Datagrok](https://datagrok.ai) platform, used to translate [oligonucleotide](https://en.wikipedia.org/wiki/Oligonucleotide) sequences between [different representations](https://github.com/datagrok-ai/public/tree/master/packages/SequenceTranslator#sequence-representations).",
   "repository": {
     "type": "git",
@@ -10,14 +14,14 @@
   },
   "dependencies": {
     "@datagrok-libraries/utils": "^0.1.0",
-    "@types/react": "latest",
+    "@types/react": "^18.0.15",
     "datagrok-api": "^1.1.7",
     "datagrok-tools": "^4.1.2",
     "npm": "^8.11.0",
+    "openchemlib": "6.0.1",
     "save-svg-as-png": "^1.4.17",
-    "ts-loader": "latest",
-    "typescript": "latest",
-    "openchemlib": "6.0.1"
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "link-api": "npm link datagrok-api",
@@ -38,18 +42,19 @@
     "vendors/openchemlib-full.js"
   ],
   "devDependencies": {
+    "@types/jest": "^27.0.0",
+    "@types/jquery": "^3.5.14",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "cash-dom": "^8.1.0",
     "eslint": "^7.32.0",
     "eslint-config-google": "^0.14.0",
-    "webpack": "^5.31.0",
-    "webpack-cli": "^4.6.0",
-    "jest-html-reporter": "^3.5.0",
     "jest": "^27.0.0",
-    "@types/jest": "^27.0.0",
+    "jest-html-reporter": "^3.5.0",
+    "puppeteer": "^13.7.0",
     "ts-jest": "^27.0.0",
-    "puppeteer": "^13.7.0"
+    "webpack": "^5.31.0",
+    "webpack-cli": "^4.6.0"
   },
   "category": "Bioinformatics"
 }

package/src/autostart/registration.ts

@@ -0,0 +1,194 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {siRnaAxolabsToGcrs, gcrsToNucleotides, asoGapmersBioSpringToGcrs, gcrsToMermade12,
+} from '../structures-works/converters';
+import {map, COL_NAMES, MODIFICATIONS} from '../structures-works/map';
+import {getFormat} from '../structures-works/sequence-codes-tools';
+import {sequenceToMolV3000} from '../structures-works/from-monomers';
+
+import {SALTS_CSV} from '../salts';
+import {USERS_CSV} from '../users';
+import {ICDS} from '../ICDs';
+import {SOURCES} from '../sources';
+import {IDPS} from '../IDPs';
+
+const weightsObj: {[code: string]: number} = {};
+for (const synthesizer of Object.keys(map)) {
+  for (const technology of Object.keys(map[synthesizer])) {
+    for (const code of Object.keys(map[synthesizer][technology]))
+      weightsObj[code] ?? map[synthesizer][technology][code].weight;
+  }
+}
+for (const [key, value] of Object.entries(MODIFICATIONS))
+  weightsObj[key] = value.molecularWeight;
+
+
+function sortByStringLengthInDescendingOrder(array: string[]): string[] {
+  return array.sort(function(a, b) {return b.length - a.length;});
+}
+
+function stringify(items: string[]): string {
+  return '["' + items.join('", "') + '"]';
+}
+
+function molecularWeight(sequence: string, weightsObj: {[index: string]: number}): number {
+  const codes = sortByStringLengthInDescendingOrder(Object.keys(weightsObj)).concat(Object.keys(MODIFICATIONS));
+  let weight = 0;
+  let i = 0;
+  while (i < sequence.length) {
+    const matchedCode = codes.find((s) => s == sequence.slice(i, i + s.length))!;
+    weight += weightsObj[sequence.slice(i, i + matchedCode.length)];
+    i += matchedCode.length;
+  }
+  return weight - 61.97;
+}
+
+async function saveTableAsSdFile(table: DG.DataFrame) {
+  if (!table.columns.contains('Compound Name')) {
+    grok.shell.warning(
+      'File saved without columns \'' +
+      [COL_NAMES.COMPOUND_NAME, COL_NAMES.COMPOUND_COMMENTS, COL_NAMES.CPD_MW,
+        COL_NAMES.SALT_MASS, COL_NAMES.BATCH_MW].join('\', \''),
+    );
+  }
+  const structureColumn = table.getCol(COL_NAMES.SEQUENCE);
+  const typeColumn = table.getCol(COL_NAMES.TYPE);
+  let result = '';
+  for (let i = 0; i < table.rowCount; i++) {
+    const format = getFormat(structureColumn.get(i))!;
+    result += (typeColumn.get(i) == 'SS') ?
+      sequenceToMolV3000(structureColumn.get(i), false, true, format) + '\n' + `>  <Sequence>\nSense Strand\n\n` :
+      sequenceToMolV3000(structureColumn.get(i), true, true, format) + '\n' + `>  <Sequence>\nAnti Sense\n\n`;
+    for (const col of table.columns) {
+      if (col.name != COL_NAMES.SEQUENCE)
+        result += `>  <${col.name}>\n${col.get(i)}\n\n`;
+    }
+    result += '$$$$\n\n';
+  }
+  const element = document.createElement('a');
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(result));
+  element.setAttribute('download', table.name + '.sdf');
+  element.click();
+}
+
+export function autostartOligoSdFileSubscription() {
+  grok.events.onViewAdded.subscribe((v: any) => {
+    if (v.type == 'TableView') {
+      if (v.dataFrame.columns.contains(COL_NAMES.TYPE))
+        oligoSdFile(v.dataFrame);
+      grok.events.onContextMenu.subscribe((args) => {
+        const seqCol = args.args.context.table.currentCol;
+        if (DG.Detector.sampleCategories(seqCol, (s) => /^[fsACGUacgu]{6,}$/.test(s))) {
+          args.args.menu.item('Convert Axolabs to GCRS', () => {
+            args.args.context.table.columns.addNewString(seqCol.name + ' to GCRS').init((i: number) => {
+              return siRnaAxolabsToGcrs(seqCol.get(i));
+            });
+          });
+        } else if (DG.Detector.sampleCategories(seqCol, (s) => /^[fmpsACGU]{6,}$/.test(s)) ||
+        DG.Detector.sampleCategories(seqCol, (s) => /^(?=.*moe)(?=.*5mC)(?=.*ps){6,}/.test(s))) {
+          args.args.menu.item('Convert GCRS to raw', () => {
+            args.args.context.table.columns.addNewString(seqCol.name + ' to raw').init((i: number) => {
+              return gcrsToNucleotides(seqCol.get(i));
+            });
+          });
+          args.args.menu.item('Convert GCRS to MM12', () => {
+            args.args.context.table.columns.addNewString(seqCol.name + ' to MM12').init((i: number) => {
+              return gcrsToMermade12(seqCol.get(i));
+            });
+          });
+        } else if (DG.Detector.sampleCategories(seqCol, (s) => /^[*56789ATGC]{6,}$/.test(s))) {
+          args.args.menu.item('Convert Biospring to GCRS', () => {
+            const seqCol = args.args.context.table.currentCol;
+            args.args.context.table.columns.addNewString(seqCol.name + ' to GCRS').init((i: number) => {
+              return asoGapmersBioSpringToGcrs(seqCol.get(i));
+            });
+          });
+        } else if (DG.Detector.sampleCategories(seqCol, (s) => /^[*1-8]{6,}$/.test(s))) {
+          args.args.menu.item('Convert Biospring to GCRS', () => {
+            args.args.context.table.columns.addNewString(seqCol.name + ' to GCRS').init((i: number) => {
+              return siRnaAxolabsToGcrs(seqCol.get(i));
+            });
+          });
+        }
+      });
+    }
+  });
+}
+
+export function oligoSdFile(table: DG.DataFrame) {
+  const saltsDf = DG.DataFrame.fromCsv(SALTS_CSV);
+  const usersDf = DG.DataFrame.fromCsv(USERS_CSV);
+  const sourcesDf = DG.DataFrame.fromCsv(SOURCES);
+  const icdsDf = DG.DataFrame.fromCsv(ICDS);
+  const idpsDf = DG.DataFrame.fromCsv(IDPS);
+
+  function addColumns(t: DG.DataFrame, saltsDf: DG.DataFrame) {
+    if (t.columns.contains(COL_NAMES.COMPOUND_NAME))
+      return grok.shell.error('Columns already exist');
+
+    const sequence = t.getCol(COL_NAMES.SEQUENCE);
+    const salt = t.getCol(COL_NAMES.SALT);
+    const equivalents = t.getCol(COL_NAMES.EQUIVALENTS);
+
+    t.columns.addNewString(COL_NAMES.COMPOUND_NAME).init((i: number) => sequence.get(i));
+    t.columns.addNewString(COL_NAMES.COMPOUND_COMMENTS).init((i: number) => (i > 0 && i % 2 == 0) ?
+      sequence.getString(i) + '; duplex of SS: ' + sequence.getString(i - 2) + ' and AS: ' + sequence.getString(i - 1) :
+      sequence.getString(i),
+    );
+    const molWeightCol = saltsDf.getCol('MOLWEIGHT');
+    const saltNamesList = saltsDf.getCol('DISPLAY').toList();
+    t.columns.addNewFloat(COL_NAMES.CPD_MW)
+      .init((i: number) => molecularWeight(sequence.get(i), weightsObj));
+    t.columns.addNewFloat(COL_NAMES.SALT_MASS).init((i: number) => {
+      const saltRowIndex = saltNamesList.indexOf(salt.get(i));
+      const mw = molWeightCol.get(saltRowIndex);
+      return mw * equivalents.get(i);
+    });
+    t.columns.addNewCalculated(COL_NAMES.BATCH_MW,
+      '${' + COL_NAMES.CPD_MW + '} + ${' + COL_NAMES.SALT_MASS + '}', DG.COLUMN_TYPE.FLOAT, false,
+    );
+
+    addColumnsPressed = true;
+    return newDf = t;
+  }
+
+  let newDf: DG.DataFrame;
+  let addColumnsPressed = false;
+
+  const d = ui.div([
+    ui.icons.edit(() => {
+      d.innerHTML = '';
+      if (table.getCol(COL_NAMES.IDP).type != DG.COLUMN_TYPE.STRING)
+        table.changeColumnType(COL_NAMES.IDP, DG.COLUMN_TYPE.STRING);
+      d.append(
+        ui.link('Add Columns', () => {
+          addColumns(table, saltsDf);
+          grok.shell.tableView(table.name).grid.columns.setOrder(Object.values(COL_NAMES));
+        }, 'Add columns: \'' + [COL_NAMES.COMPOUND_NAME, COL_NAMES.COMPOUND_COMMENTS, COL_NAMES.CPD_MW,
+          COL_NAMES.SALT_MASS, COL_NAMES.BATCH_MW].join('\', \''), ''),
+        ui.button('Save SD file', () => saveTableAsSdFile(addColumnsPressed ? newDf : table)),
+      );
+
+      const view = grok.shell.getTableView(table.name);
+
+      view.dataFrame.getCol(COL_NAMES.TYPE).setTag(DG.TAGS.CHOICES, '["AS", "SS", "Duplex"]');
+      view.dataFrame.getCol(COL_NAMES.OWNER).setTag(DG.TAGS.CHOICES, stringify(usersDf.columns.byIndex(0).toList()));
+      view.dataFrame.getCol(COL_NAMES.SALT).setTag(DG.TAGS.CHOICES, stringify(saltsDf.columns.byIndex(0).toList()));
+      view.dataFrame.getCol(COL_NAMES.SOURCE).setTag(DG.TAGS.CHOICES, stringify(sourcesDf.columns.byIndex(0).toList()));
+      view.dataFrame.getCol(COL_NAMES.ICD).setTag(DG.TAGS.CHOICES, stringify(icdsDf.columns.byIndex(0).toList()));
+      view.dataFrame.getCol(COL_NAMES.IDP).setTag(DG.TAGS.CHOICES, stringify(idpsDf.columns.byIndex(0).toList()));
+
+      grok.events.onContextMenu.subscribe((args) => {
+        if ([COL_NAMES.TYPE, COL_NAMES.OWNER, COL_NAMES.SALT, COL_NAMES.SOURCE, COL_NAMES.ICD, COL_NAMES.IDP]
+          .includes(args.args.context.table.currentCol.name)) {
+          args.args.menu.item('Fill Column With Value', () => {
+            const v = args.args.context.table.currentCell.value;
+            args.args.context.table.currentCell.column.init(v);
+          });
+        }
+      });
+    }),
+  ]);
+  grok.shell.v.setRibbonPanels([[d]]);
+}

package/src/{axolabsMap.ts → axolabs/constants.ts}

@@ -94,7 +94,7 @@ export const axolabsMap:
     color: invAbasicColor,
   },
   '2\'-OMe-U(o)': {
-    fullName: 'Nucleotide Uridine with 2’O-Methyl protection (overhang)',
+    fullName: 'Nucleotide Uridine with 2\'O-Methyl protection (overhang)',
     symbols: ['mU', 'mU', 'mU', 'mU'],
     color: 'rgb(65,233,80)',
   },

package/src/{defineAxolabsPattern.ts → axolabs/define-pattern.ts}

@@ -1,4 +1,3 @@
-/* Do not change these import lines. Datagrok will import API library in exactly the same manner */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
@@ -6,8 +5,8 @@ import * as DG from 'datagrok-api/dg';
 import * as svg from 'save-svg-as-png';
 import $ from 'cash-dom';
 
-import {drawAxolabsPattern} from './drawAxolabsPattern';
-import {axolabsMap} from './axolabsMap';
+import {drawAxolabsPattern} from './draw-svg';
+import {axolabsMap} from './constants';
 
 const baseChoices: string[] = Object.keys(axolabsMap);
 const defaultBase: string = baseChoices[0];
@@ -57,17 +56,23 @@ function getUserName(patternName: string): string[] {
 
 function translateSequence(
   sequence: string,
-  bases: any,
-  ptoLinkages: any,
-  startModification: any,
-  endModification: any,
+  bases: DG.InputBase[],
+  ptoLinkages: DG.InputBase[],
+  startModification: DG.InputBase,
+  endModification: DG.InputBase,
   firstPtoExist: boolean): string {
-  let counter: number = -1;
+  let i: number = -1;
   let mainSequence = sequence.replace(/[AUGC]/g, function(x: string) {
-    counter++;
+    i++;
     const indexOfSymbol = axolabsMap['RNA']['symbols'].indexOf(x);
-    const symbol = axolabsMap[bases[counter].value]['symbols'][indexOfSymbol];
-    return (ptoLinkages[counter].value) ? symbol + 's' : symbol;
+    let symbol = axolabsMap[bases[i].value]['symbols'][indexOfSymbol];
+    if (bases[i].value.slice(-3) == '(o)') {
+      if (i < sequence.length / 2 && bases[i + 1].value.slice(-3) != '(o)')
+        symbol = symbol + x + 'f';
+      else if (i > sequence.length / 2 && bases[i - 1].value.slice(-3) != '(o)')
+        symbol = x + 'f' + symbol;
+    }
+    return (ptoLinkages[i].value) ? symbol + 's' : symbol;
   });
   if (mainSequence.slice(0, 5).split('mU').length == 3)
     mainSequence = '(uu)' + mainSequence.slice(4);
@@ -90,10 +95,10 @@ function addColumnWithIds(tableName: string, columnName: string, patternName: st
 function addColumnWithTranslatedSequences(
   tableName: string,
   columnName: string,
-  bases: any,
-  ptoLinkages: any,
-  startModification: any,
-  endModification: any,
+  bases: DG.InputBase[],
+  ptoLinkages: DG.InputBase[],
+  startModification: DG.InputBase,
+  endModification: DG.InputBase,
   firstPtoExist: boolean) {
   const nameOfNewColumn = 'Axolabs ' + columnName;
   const columns = grok.shell.table(tableName).columns;
@@ -240,8 +245,9 @@ export function defineAxolabsPattern() {
   }
 
   function updateInputExamples() {
-    ssInputExample.value = generateExample(ssLength.value!, sequenceBase.value!);
-    if (createAsStrand.value)
+    if (inputSsColumn.value == '')
+      ssInputExample.value = generateExample(ssLength.value!, sequenceBase.value!);
+    if (createAsStrand.value && inputAsColumn.value == '')
       asInputExample.value = generateExample(asLength.value!, sequenceBase.value!);
   }
 
@@ -333,7 +339,7 @@ export function defineAxolabsPattern() {
   }
 
   function checkWhetherAllValuesInColumnHaveTheSameLength(colName: string): boolean {
-    const col = tables.value!.columns.byName(colName);
+    const col = tables.value!.getCol(colName);
     let allLengthsAreTheSame = true;
     for (let i = 1; i < col.length; i++) {
       if (col.get(i - 1).length != col.get(i).length && col.get(i).length != 0) {
@@ -510,26 +516,24 @@ export function defineAxolabsPattern() {
   const asLength = ui.intInput('AS Length', defaultSequenceLength, () => updateUiForNewSequenceLength());
   const asLengthDiv = ui.div([asLength.root]);
 
-  function validateSsColumn(colName: string) {
+  function validateSsColumn(colName: string): void {
     const allLengthsAreTheSame: boolean = checkWhetherAllValuesInColumnHaveTheSameLength(colName);
-    const firstSequence = tables.value!.columns.byName(colName).get(0);
+    const firstSequence = tables.value!.getCol(colName).get(0);
     if (allLengthsAreTheSame && firstSequence.length != ssLength.value)
-      ssLength.value = tables.value!.columns.byName(colName).get(0).length;
+      ssLength.value = tables.value!.getCol(colName).get(0).length;
     ssInputExample.value = firstSequence;
   }
 
-  function validateAsColumn(colName: string) {
+  function validateAsColumn(colName: string): void {
     const allLengthsAreTheSame: boolean = checkWhetherAllValuesInColumnHaveTheSameLength(colName);
-    const firstSequence = tables.value!.columns.byName(colName).get(0);
+    const firstSequence = tables.value!.getCol(colName).get(0);
     if (allLengthsAreTheSame && firstSequence.length != asLength.value)
-      asLength.value = tables.value!.columns.byName(colName).get(0).length;
-    asLengthDiv.innerHTML = '';
-    asLengthDiv.append(asLength.root);
+      asLength.value = tables.value!.getCol(colName).get(0).length;
     asInputExample.value = firstSequence;
   }
 
   function validateIdsColumn(colName: string) {
-    const col = tables.value!.columns.byName(colName);
+    const col = tables.value!.getCol(colName);
     if (col.type != DG.TYPE.INT)
       grok.shell.error('Column should contain integers only');
     else if (col.categories.filter((e) => e != '').length < col.toList().filter((e) => e != '').length) {
@@ -670,8 +674,8 @@ export function defineAxolabsPattern() {
       dialog
         .add(ui.divText('Length of sequences in columns doesn\'t match entered length. Update length value?'))
         .addButton('YES', () => {
-          ssLength.value = tables.value!.columns.byName(inputSsColumn.value!).getString(0).length;
-          asLength.value = tables.value!.columns.byName(inputAsColumn.value!).getString(0).length;
+          ssLength.value = tables.value!.getCol(inputSsColumn.value!).getString(0).length;
+          asLength.value = tables.value!.getCol(inputAsColumn.value!).getString(0).length;
           dialog.close();
         })
         .show();
@@ -692,10 +696,7 @@ export function defineAxolabsPattern() {
     }
   });
 
-  const ssInputExample = ui.textInput('Sense Strand', generateExample(ssLength.value!, sequenceBase.value!), () => {
-    ssOutputExample.value = translateSequence(ssInputExample.value, ssBases, ssPtoLinkages,
-      ssFiveModification, ssThreeModification, firstSsPto.value!);
-  });
+  const ssInputExample = ui.textInput('Sense Strand', generateExample(ssLength.value!, sequenceBase.value!));
   const ssOutputExample = ui.textInput(' ', translateSequence(
     ssInputExample.value, ssBases, ssPtoLinkages, ssThreeModification, ssFiveModification, firstSsPto.value!));
   (ssInputExample.input as HTMLElement).style.resize = 'none';
@@ -713,10 +714,7 @@ export function defineAxolabsPattern() {
     ], 'ui-input-options'),
   );
 
-  const asInputExample = ui.textInput('Antisense Strand', generateExample(asLength.value!, sequenceBase.value!), () => {
-    asOutputExample.value = translateSequence(
-      asInputExample.value, asBases, asPtoLinkages, asFiveModification, asThreeModification, firstSsPto.value!);
-  });
+  const asInputExample = ui.textInput('Antisense Strand', generateExample(asLength.value!, sequenceBase.value!));
   const asOutputExample = ui.textInput(' ', translateSequence(
     asInputExample.value, asBases, asPtoLinkages, asFiveModification, asThreeModification, firstSsPto.value!));
   (asInputExample.input as HTMLElement).style.resize = 'none';
@@ -760,11 +758,14 @@ export function defineAxolabsPattern() {
     ]),
   ], 'ui-form');
 
+  const downloadButton = ui.button('Download', () => svg.saveSvgAsPng(document.getElementById('mySvg'), saveAs.value,
+    {backgroundColor: 'white'}));
+
   const mainSection = ui.panel([
     ui.block([
       svgDiv,
     ], {style: {overflowX: 'scroll'}}),
-    ui.button('Download', () => svg.saveSvgAsPng(document.getElementById('mySvg'), saveAs.value)),
+    downloadButton,
     isEnumerateModificationsDiv,
     ui.div([
       ui.div([

package/src/{drawAxolabsPattern.ts → axolabs/draw-svg.ts}

@@ -1,4 +1,4 @@
-import {axolabsMap} from './axolabsMap';
+import {axolabsMap} from './constants';
 
 // https://uxdesign.cc/star-rating-make-svg-great-again-d4ce4731347e
 function getPointsToDrawStar(centerX: number, centerY: number): string {

package/src/main/main-view.ts

@@ -0,0 +1,225 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {convertSequence, undefinedInputSequence, isValidSequence} from '../structures-works/sequence-codes-tools';
+import {map, MODIFICATIONS} from '../structures-works/map';
+import {sequenceToSmiles, sequenceToMolV3000} from '../structures-works/from-monomers';
+
+import $ from 'cash-dom';
+
+const defaultInput = 'fAmCmGmAmCpsmU';
+const sequenceWasCopied = 'Copied';
+const tooltipSequence = 'Copy sequence';
+
+export function mainView() {
+  function updateTableAndMolecule(sequence: string, inputFormat: string, isSet: boolean): void {
+    moleculeSvgDiv.innerHTML = '';
+    outputTableDiv.innerHTML = '';
+    const pi = DG.TaskBarProgressIndicator.create('Rendering table and molecule...');
+    let errorsExist = false;
+    try {
+      sequence = sequence.replace(/\s/g, '');
+      const output = isValidSequence(sequence, null);
+      if (isSet)
+        output.synthesizer = [inputFormat];
+      inputFormatChoiceInput.value = output.synthesizer![0];
+      const outputSequenceObj = convertSequence(sequence, output);
+      const tableRows = [];
+
+      for (const key of Object.keys(outputSequenceObj).slice(1)) {
+        const indexOfFirstNotValidChar = ('indexOfFirstNotValidChar' in outputSequenceObj) ?
+          JSON.parse(outputSequenceObj.indexOfFirstNotValidChar!).indexOfFirstNotValidChar :
+          -1;
+        if ('indexOfFirstNotValidChar' in outputSequenceObj) {
+          const indexOfFirstNotValidChar = ('indexOfFirstNotValidChar' in outputSequenceObj) ?
+            JSON.parse(outputSequenceObj.indexOfFirstNotValidChar!).indexOfFirstNotValidChar :
+            -1;
+          if (indexOfFirstNotValidChar != -1)
+            errorsExist = true;
+        }
+
+        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, ''),
+        });
+      }
+
+      if (errorsExist) {
+        const synthesizer = JSON.parse(outputSequenceObj.indexOfFirstNotValidChar!).synthesizer.slice(0, -6);
+        asoGapmersGrid.onCellPrepare(function(gc) {
+          gc.style.backColor = (gc.gridColumn.name == synthesizer) ? 0xFFF00000 : 0xFFFFFFFF;
+        });
+        omeAndFluoroGrid.onCellPrepare(function(gc) {
+          gc.style.backColor = (gc.gridColumn.name == synthesizer) ? 0xFFF00000 : 0xFFFFFFFF;
+        });
+        switchInput.enabled = true;
+      } else {
+        asoGapmersGrid.onCellPrepare(function(gc) {gc.style.backColor = 0xFFFFFFFF;});
+        omeAndFluoroGrid.onCellPrepare(function(gc) {gc.style.backColor = 0xFFFFFFFF;});
+      }
+
+      outputTableDiv.append(
+        ui.div([
+          DG.HtmlTable.create(tableRows, (item: { key: string; value: string; }) =>
+            [item.key, item.value], ['Code', 'Sequence']).root,
+        ]),
+      );
+
+      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]);
+          // @ts-ignore
+          OCL.StructureView.drawMolecule(canv, OCL.Molecule.fromMolfile(mol), {suppressChiralText: true});
+          ui.dialog('Molecule: ' + inputSequenceField.value)
+            .add(canv)
+            .showModal(true);
+        });
+        $(canvas).on('mouseover', () => $(canvas).css('cursor', 'zoom-in'));
+        $(canvas).on('mouseout', () => $(canvas).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);
+      } else
+        moleculeSvgDiv.innerHTML = '';
+    } finally {
+      pi.close();
+    }
+  }
+
+  const inputFormatChoiceInput = ui.choiceInput(
+    'Input format: ', 'Janssen GCRS Codes', Object.keys(map), (format: string) => {
+      updateTableAndMolecule(inputSequenceField.value.replace(/\s/g, ''), format, true);
+    });
+  const moleculeSvgDiv = ui.block([]);
+  const outputTableDiv = ui.div([]);
+  const inputSequenceField = ui.textInput('', defaultInput, (sequence: string) => updateTableAndMolecule(sequence,
+      inputFormatChoiceInput.value!, false));
+
+  const asoDf = DG.DataFrame.fromObjects([
+    {'Name': '2\'MOE-5Me-rU', 'BioSpring': '5', 'Janssen GCRS': 'moeT'},
+    {'Name': '2\'MOE-rA', 'BioSpring': '6', 'Janssen GCRS': 'moeA'},
+    {'Name': '2\'MOE-5Me-rC', 'BioSpring': '7', 'Janssen GCRS': 'moe5mC'},
+    {'Name': '2\'MOE-rG', 'BioSpring': '8', 'Janssen GCRS': 'moeG'},
+    {'Name': '5-Methyl-dC', 'BioSpring': '9', 'Janssen GCRS': '5mC'},
+    {'Name': 'ps linkage', 'BioSpring': '*', 'Janssen GCRS': 'ps'},
+    {'Name': 'dA', 'BioSpring': 'A', 'Janssen GCRS': 'A, dA'},
+    {'Name': 'dC', 'BioSpring': 'C', 'Janssen GCRS': 'C, dC'},
+    {'Name': 'dG', 'BioSpring': 'G', 'Janssen GCRS': 'G, dG'},
+    {'Name': 'dT', 'BioSpring': 'T', 'Janssen GCRS': 'T, dT'},
+    {'Name': 'rA', 'BioSpring': '', 'Janssen GCRS': 'rA'},
+    {'Name': 'rC', 'BioSpring': '', 'Janssen GCRS': 'rC'},
+    {'Name': 'rG', 'BioSpring': '', 'Janssen GCRS': 'rG'},
+    {'Name': 'rU', 'BioSpring': '', 'Janssen GCRS': 'rU'},
+  ])!;
+  const asoGapmersGrid = DG.Viewer.grid(asoDf, {showRowHeader: false, showCellTooltip: false});
+
+  asoDf.onCurrentCellChanged.subscribe((_) => {
+    navigator.clipboard.writeText(asoDf.currentCell.value).then(() => grok.shell.info('Copied'));
+  });
+
+  const omeAndFluoroGrid = DG.Viewer.grid(
+      DG.DataFrame.fromObjects([
+        {'Name': '2\'-fluoro-U', 'BioSpring': '1', 'Axolabs': 'Uf', 'Janssen GCRS': 'fU'},
+        {'Name': '2\'-fluoro-A', 'BioSpring': '2', 'Axolabs': 'Af', 'Janssen GCRS': 'fA'},
+        {'Name': '2\'-fluoro-C', 'BioSpring': '3', 'Axolabs': 'Cf', 'Janssen GCRS': 'fC'},
+        {'Name': '2\'-fluoro-G', 'BioSpring': '4', 'Axolabs': 'Gf', 'Janssen GCRS': 'fG'},
+        {'Name': '2\'OMe-rU', 'BioSpring': '5', 'Axolabs': 'u', 'Janssen GCRS': 'mU'},
+        {'Name': '2\'OMe-rA', 'BioSpring': '6', 'Axolabs': 'a', 'Janssen GCRS': 'mA'},
+        {'Name': '2\'OMe-rC', 'BioSpring': '7', 'Axolabs': 'c', 'Janssen GCRS': 'mC'},
+        {'Name': '2\'OMe-rG', 'BioSpring': '8', 'Axolabs': 'g', 'Janssen GCRS': 'mG'},
+        {'Name': 'ps linkage', 'BioSpring': '*', 'Axolabs': 's', 'Janssen GCRS': 'ps'},
+      ])!, {showRowHeader: false, showCellTooltip: false},
+  );
+
+  const overhangModificationsGrid = DG.Viewer.grid(
+      DG.DataFrame.fromColumns([
+        DG.Column.fromStrings('Name', Object.keys(MODIFICATIONS)),
+      ])!, {showRowHeader: false, showCellTooltip: false},
+  );
+  updateTableAndMolecule(defaultInput, inputFormatChoiceInput.value!, true);
+
+  const codesTablesDiv = ui.splitV([
+    ui.box(ui.h2('ASO Gapmers'), {style: {maxHeight: '40px'}}),
+    asoGapmersGrid.root,
+    ui.box(ui.h2('2\'-OMe and 2\'-F siRNA'), {style: {maxHeight: '40px'}}),
+    omeAndFluoroGrid.root,
+    ui.box(ui.h2('Overhang modifications'), {style: {maxHeight: '40px'}}),
+    overhangModificationsGrid.root,
+  ], {style: {maxWidth: '350px'}});
+
+  const appMainDescription = ui.info([
+    ui.divText('How to convert one sequence:', {style: {'font-weight': 'bolder'}}),
+    ui.divText('Paste sequence into the text field below'),
+    ui.divText('\n How to convert many sequences:', {style: {'font-weight': 'bolder'}}),
+    ui.divText('1. Drag & drop an Excel or CSV file with sequences into Datagrok'),
+    ui.divText('2. Right-click on the column header, then see the \'Convert\' menu'),
+    ui.divText('This will add the result column to the right of the table'),
+  ], 'Convert oligonucleotide sequences between Nucleotides, BioSpring, Axolabs, Mermade 12 and GCRS representations.');
+
+  $(codesTablesDiv).hide();
+  const switchInput = ui.switchInput('Codes', false, (v: boolean) => (v) ?
+    $(codesTablesDiv).show() :
+    $(codesTablesDiv).hide(),
+  );
+
+  const topPanel = [
+    ui.iconFA('download', () => {
+      const result = sequenceToMolV3000(inputSequenceField.value.replace(/\s/g, ''), false, false,
+        inputFormatChoiceInput.value!);
+      const element = document.createElement('a');
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(result));
+      element.setAttribute('download', inputSequenceField.value.replace(/\s/g, '') + '.mol');
+      element.click();
+    }, 'Save .mol file'),
+    ui.iconFA('copy', () => {
+      navigator.clipboard.writeText(
+        sequenceToSmiles(inputSequenceField.value.replace(/\s/g, ''), false, inputFormatChoiceInput.value!))
+        .then(() => grok.shell.info(sequenceWasCopied));
+    }, 'Copy SMILES'),
+    switchInput.root,
+  ];
+
+  const v = grok.shell.v;
+  const tabControl = grok.shell.sidebar;
+  tabControl.onTabChanged.subscribe((_) =>
+    v.setRibbonPanels([(tabControl.currentPane.name == 'MAIN') ? topPanel : []]));
+  v.setRibbonPanels([topPanel]);
+
+  return ui.box(
+    ui.splitH([
+      ui.splitV([
+        ui.panel([
+          appMainDescription,
+          ui.div([
+            ui.h1('Input sequence'),
+            ui.div([
+              inputSequenceField.root,
+            ], 'input-base'),
+          ], 'inputSequence'),
+          ui.div([inputFormatChoiceInput], {style: {padding: '5px 0'}}),
+          ui.block([
+            ui.h1('Output'),
+            outputTableDiv,
+          ]),
+          moleculeSvgDiv,
+        ], 'sequence'),
+      ]),
+      codesTablesDiv,
+    ], {style: {height: '100%', width: '100%'}}),
+  );
+}