@datagrok/sequence-translator 1.0.2 → 1.0.5

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.0.2",
+  "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,46 +14,47 @@
   },
   "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",
-    "debug-sequencetranslator": "grok publish --rebuild",
-    "release-sequencetranslator": "grok publish --rebuild --release",
+    "debug-sequencetranslator": "grok publish",
+    "release-sequencetranslator": "grok publish localhost --release",
     "build-sequencetranslator": "webpack",
     "build": "webpack",
-    "debug-sequencetranslator-public": "grok publish public --rebuild",
-    "release-sequencetranslator-public": "grok publish public --rebuild --release",
-    "debug-sequencetranslator-local": "grok publish local --rebuild",
-    "release-sequencetranslator-local": "grok publish local --rebuild --release",
+    "debug-sequencetranslator-public": "grok publish public",
+    "release-sequencetranslator-public": "grok publish public --release",
+    "debug-sequencetranslator-local": "grok publish local",
+    "release-sequencetranslator-local": "grok publish local --release",
     "test": "set HOST=dev && jest",
     "test-dev": "set HOST=dev && jest",
     "test-local": "set HOST=localhost && jest"
   },
   "sources": [
     "css/style.css",
-    "common/openchemlib-full.js"
+    "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/__jest__/remote.test.ts

@@ -16,34 +16,53 @@ beforeAll(async () => {
 }, P_START_TIMEOUT);
 
 afterAll(async () => {
-  await browser.close();
+  await browser?.close();
+});
+
+expect.extend({
+  checkOutput(received, expected, context) {
+    if (received === expected) {
+      return {
+        message: () => context,
+        pass: true
+      };
+    } else {
+      return {
+        message: () => context,
+        pass: false
+      };
+    }
+  }
 });
 
 it('TEST', async () => {
-  const target_package:string = process.env.TARGET_PACKAGE ?? 'SequenceTranslator';
-  console.log(`Testing ${target_package} package`);
+  const targetPackage:string = process.env.TARGET_PACKAGE ?? 'SequenceTranslator';
+  console.log(`Testing ${targetPackage} package`);
 
-  //console.log(require('root-require')('package.json').version);
-  let r = await page.evaluate((target_package):Promise<object> => {
+  let r = await page.evaluate((targetPackage):Promise<object> => {
     return new Promise<object>((resolve, reject) => {
-      (<any>window).grok.functions.eval(target_package + ':test()').then((df: any) => {
+      (<any>window).grok.functions.eval(targetPackage + ':test()').then((df: any) => {
         let cStatus = df.columns.byName('success');
         let cMessage = df.columns.byName('result');
         let cCat = df.columns.byName('category');
         let cName = df.columns.byName('name');
         let failed = false;
-        let report = '';
-        for (let i = 0; i < df.rowCount; i++)
-          if (!cStatus.get(i)) {
-            report += `${cCat.get(i)}.${cName.get(i)}: ${cMessage.get(i)}\n`;
+        let passReport = '';
+        let failReport = '';
+        for (let i = 0; i < df.rowCount; i++) {
+          if (cStatus.get(i)) {
+            passReport += `Test result : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
+          } else {
             failed = true;
+            failReport += `Test result : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
           }
-        resolve({report, failed});
+        }
+        resolve({failReport, passReport, failed});
       }).catch((e: any) => reject(e));
     });
-  }, target_package);
+  }, targetPackage);
   // @ts-ignore
-  console.log(r.report);
+  console.log(r.passReport);
   // @ts-ignore
-  expect(r.failed).toBe(false);
+  expect(r.failed).checkOutput(false, r.failReport);
 }, 100000);

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);
@@ -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 {