@datagrok/sequence-translator 1.0.3 → 1.0.6

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);
@@ -82,16 +87,18 @@ function addColumnWithIds(tableName: string, columnName: string, patternName: st
   if (columns.contains(nameOfNewColumn))
     columns.remove(nameOfNewColumn);
   const columnWithIds = columns.byName(columnName);
-  return columns.addNewString(nameOfNewColumn).init((i: number) => columnWithIds.get(i) + '_' + patternName);
+  return columns.addNewString(nameOfNewColumn).init((i: number) => {
+    return (columnWithIds.getString(i) == '') ? '' : columnWithIds.get(i) + '_' + patternName;
+  });
 }
 
 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;
@@ -99,8 +106,10 @@ function addColumnWithTranslatedSequences(
     columns.remove(nameOfNewColumn);
   const columnWithInputSequences = columns.byName(columnName);
   return columns.addNewString(nameOfNewColumn).init((i: number) => {
-    return translateSequence(columnWithInputSequences.getString(i),
-      bases, ptoLinkages, startModification, endModification, firstPtoExist);
+    return columnWithInputSequences.getString(i) == '' ?
+      '' :
+      translateSequence(columnWithInputSequences.getString(i), bases, ptoLinkages, startModification, endModification,
+        firstPtoExist);
   });
 }
 
@@ -236,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!);
   }
 
@@ -329,10 +339,10 @@ 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) {
+      if (col.get(i - 1).length != col.get(i).length && col.get(i).length != 0) {
         allLengthsAreTheSame = false;
         break;
       }
@@ -361,12 +371,13 @@ export function defineAxolabsPattern() {
   }
 
   async function postPatternToUserStorage() {
-    const author = await getCurrentUserName();
-    if (!saveAs.stringValue.includes('(created by '))
-      saveAs.value = saveAs.stringValue + author;
+    const currUserName = await getCurrentUserName();
+    saveAs.value = (saveAs.stringValue.includes('(created by ')) ?
+      getShortName(saveAs.value) + currUserName :
+      saveAs.stringValue + currUserName;
     return grok.dapi.userDataStorage.postValue(
       userStorageKey,
-      saveAs.stringValue,
+      saveAs.value,
       JSON.stringify({
         'ssBases': ssBases.slice(0, ssLength.value!).map((e) => e.value),
         'asBases': asBases.slice(0, asLength.value!).map((e) => e.value),
@@ -387,11 +398,12 @@ export function defineAxolabsPattern() {
       const lstMy: string[] = [];
       const lstOthers: string[] = [];
 
+      // TODO: display short name, but use long for querying userdataStorage
       for (const ent of Object.keys(entities)) {
         if (await isCurrentUserCreatedThisPattern(ent))
           lstOthers.push(ent);
         else
-          lstMy.push(getShortName(ent));
+          lstMy.push(ent);//getShortName(ent));
       }
 
       let loadPattern = ui.choiceInput('Load Pattern', '', lstMy, (v: string) => parsePatternAndUpdateUi(v));
@@ -504,29 +516,27 @@ 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.length < col.length) {
+    else if (col.categories.filter((e) => e != '').length < col.toList().filter((e) => e != '').length) {
       const duplicates = findDuplicates(col.getRawData());
       ui.dialog('Non-unique IDs')
         .add(ui.divText('Press \'OK\' to select rows with non-unique values'))
@@ -541,25 +551,43 @@ export function defineAxolabsPattern() {
   }
 
   const tables = ui.tableInput('Tables', grok.shell.tables[0], grok.shell.tables, (t: DG.DataFrame) => {
-    const inputSsColumn =
-      ui.choiceInput('SS Column', '', t.columns.names(), (colName: string) => validateSsColumn(colName));
+    const inputSsColumn = ui.choiceInput('SS Column', '', t.columns.names(), (colName: string) => {
+      validateSsColumn(colName);
+      ssVar = colName;
+    });
     inputSsColumnDiv.innerHTML = '';
     inputSsColumnDiv.append(inputSsColumn.root);
-    const inputAsColumn =
-      ui.choiceInput('AS Column', '', t.columns.names(), (colName: string) => validateAsColumn(colName));
+    const inputAsColumn = ui.choiceInput('AS Column', '', t.columns.names(), (colName: string) => {
+      validateAsColumn(colName);
+      asVar = colName;
+    });
     inputAsColumnDiv.innerHTML = '';
     inputAsColumnDiv.append(inputAsColumn.root);
-    const inputIdColumn =
-      ui.choiceInput('ID Column', '', t.columns.names(), (colName: string) => validateIdsColumn(colName));
+    const inputIdColumn = ui.choiceInput('ID Column', '', t.columns.names(), (colName: string) => {
+      validateIdsColumn(colName);
+      idVar = colName;
+    });
     inputIdColumnDiv.innerHTML = '';
     inputIdColumnDiv.append(inputIdColumn.root);
   });
 
-  const inputSsColumn = ui.choiceInput('SS Column', '', []);
+  let ssVar = '';
+  const inputSsColumn = ui.choiceInput('SS Column', '', [], (colName: string) => {
+    validateSsColumn(colName);
+    ssVar = colName;
+  });
   inputSsColumnDiv.append(inputSsColumn.root);
-  const inputAsColumn = ui.choiceInput('AS Column', '', []);
+  let asVar = '';
+  const inputAsColumn = ui.choiceInput('AS Column', '', [], (colName: string) => {
+    validateAsColumn(colName);
+    asVar = colName;
+  });
   inputAsColumnDiv.append(inputAsColumn.root);
-  const inputIdColumn = ui.choiceInput('ID Column', '', []);
+  let idVar = '';
+  const inputIdColumn = ui.choiceInput('ID Column', '', [], (colName: string) => {
+    validateIdsColumn(colName);
+    idVar = colName;
+  });
   inputIdColumnDiv.append(inputIdColumn.root);
 
   updatePatternsList();
@@ -638,7 +666,7 @@ export function defineAxolabsPattern() {
   });
 
   const convertSequenceButton = ui.button('Convert Sequences', () => {
-    if (inputSsColumn.value == null || (createAsStrand.value && inputAsColumn.value == null))
+    if (ssVar == '' || (createAsStrand.value && asVar == ''))
       grok.shell.info('Please select table and columns on which to apply pattern');
     else if (ssLength.value != ssInputExample.value.length || asLength.value != asInputExample.value.length) {
       const dialog = ui.dialog('Length Mismatch');
@@ -646,20 +674,20 @@ 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();
     } else {
-      if (inputIdColumn.value != null)
-        addColumnWithIds(tables.value!.name, inputIdColumn.value, getShortName(saveAs.value));
+      if (idVar != '')
+        addColumnWithIds(tables.value!.name, idVar, getShortName(saveAs.value));
       addColumnWithTranslatedSequences(
-        tables.value!.name, inputSsColumn.value, ssBases, ssPtoLinkages,
+        tables.value!.name, ssVar, ssBases, ssPtoLinkages,
         ssFiveModification, ssThreeModification, firstSsPto.value!);
       if (createAsStrand.value) {
         addColumnWithTranslatedSequences(
-          tables.value!.name, inputAsColumn.value!, asBases, asPtoLinkages,
+          tables.value!.name, asVar, asBases, asPtoLinkages,
           asFiveModification, asThreeModification, firstAsPto.value!);
       }
       grok.shell.v = grok.shell.getTableView(tables.value!.name);
@@ -668,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';
@@ -689,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';
@@ -736,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%'}}),
+  );
+}