@datagrok/sequence-translator 1.2.7 → 1.3.0

package/src/apps/pattern/view/types.ts

@@ -0,0 +1,14 @@
+import * as DG from 'datagrok-api/dg';
+
+import {STRANDS, STRAND_ENDS, TERMINI} from '../model/const';
+
+export type BooleanInput = DG.InputBase<boolean | null>;
+export type StringInput = DG.InputBase<string | null>;
+export type NumberInput = DG.InputBase<number | null>;
+
+export type Position = { x: number, y: number };
+
+export type StrandEndToNumberMap = Record<typeof STRAND_ENDS[number], number>;
+export type StrandToNumberMap = Record<typeof STRANDS[number], number>;
+export type StrandEndToSVGElementsMap = Record<typeof STRAND_ENDS[number], SVGElement | null>;
+export type TerminusToSVGElementMap = Record<typeof TERMINI[number], SVGElement | null>

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

@@ -0,0 +1,61 @@
+import * as ui from 'datagrok-api/ui';
+
+import {APP_NAME} from '../../common/view/const';
+import {IsolatedAppUIBase} from '../../common/view/isolated-app-ui';
+import {DataManager} from '../model/data-manager';
+import {EventBus} from '../model/event-bus';
+import {URLRouter} from '../model/router';
+import {PatternAppLeftSection} from './components/left-section';
+import {PatternAppRightSection} from './components/right-section';
+import {PatternConfigRecord} from '../model/types';
+
+
+export class OligoPatternUI extends IsolatedAppUIBase {
+  constructor() {
+    super(APP_NAME.PATTERN);
+  }
+
+  protected getContent(): Promise<HTMLDivElement> {
+    return getContent();
+  }
+}
+
+
+async function getContent(): Promise<HTMLDivElement> {
+  const dataManager = await DataManager.getInstance();
+  const urlRouter = new URLRouter();
+
+  const initialPatternRecord = await getInitialPatternRecord(dataManager, urlRouter);
+  const eventBus = new EventBus(dataManager, initialPatternRecord);
+  urlRouter.subscribeToObservables(eventBus);
+
+  const leftSection = new PatternAppLeftSection(eventBus, dataManager).getLayout();
+  const rightSection = new PatternAppRightSection(eventBus, dataManager).getLayout();
+
+  const isResizeable = true;
+
+  const layout = ui.splitH([
+    leftSection,
+    rightSection,
+  ], {}, isResizeable);
+
+  return layout;
+}
+
+async function getInitialPatternRecord(
+  dataManager: DataManager,
+  urlRouter: URLRouter
+): Promise<PatternConfigRecord> {
+  const patternHash = urlRouter.getPatternHash();
+  if (!patternHash) {
+    urlRouter.clearPatternURL();
+    return dataManager.getDefaultPatternRecord();
+  }
+
+  let initialPatternRecord = await dataManager.getPatternRecord(patternHash);
+  if (!initialPatternRecord) {
+    urlRouter.clearPatternURL();
+    initialPatternRecord = dataManager.getDefaultPatternRecord();
+  }
+  return initialPatternRecord;
+}

package/src/{model/structure-app → apps/structure/model}/mol-transformations.ts

@@ -36,7 +36,7 @@ export function linkStrandsV3000(
 
   let inverted = false;
   const molBlocks = strands.senseStrands.concat(strands.antiStrands);
-  /** Minimal value of AS and AS2 shift  */
+  /** Minimal value of ANTISENSE_STRAND and AS2 shift  */
   let ssYShift = 0;
 
   for (let i = 0; i < molBlocks.length; i++) {
@@ -47,12 +47,12 @@ export function linkStrandsV3000(
 
     if (i >= strands.senseStrands.length) {
       if (inverted === false) {
-        // AS strand
+        // ANTISENSE_STRAND strand
         inverted = true;
         xShift = 0;
       }
     } else {
-      // SS strands
+      // SENSE_STRAND strands
       ssYShift = Math.min(ssYShift, Math.min(
         ...coordinates.y.filter((item) => item < 0)
       ));

package/src/{model/structure-app → apps/structure/model}/monomer-code-parser.ts

@@ -4,15 +4,15 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {PHOSPHATE_SYMBOL} from './const';
-import {sortByReverseLength} from '../helpers';
-import {MonomerLibWrapper} from '../monomer-lib/lib-wrapper';
-import {monomersWithPhosphateLinkers} from '../data-loading-utils/json-loader';
+import {sortByReverseLength} from '../../common/model/helpers';
+import {MonomerLibWrapper} from '../../common/model/monomer-lib/lib-wrapper';
+import {MONOMERS_WITH_PHOSPHATE} from '../../common/model/data-loader/json-loader';
 
 /** Wrapper for parsing a strand and getting a sequence of monomer IDs (with
  * omitted linkers, if needed)  */
 export class MonomerSequenceParser {
   constructor(
-    private sequence: string, 
+    private sequence: string,
     // todo: remove from the list of parameters
     private codeMap: Map<string, string>
   ) {
@@ -39,9 +39,8 @@ export class MonomerSequenceParser {
       const nextMonomerIsPhosphate = (i + 1 < parsedRawCodes.length && monomerIsPhosphateLinker(this.getSymbolForCode(parsedRawCodes[i + 1])));
 
       // todo: refactor as molfile-specific
-      if (!isPhosphate && !monomerHasRightPhosphateLinker(monomerSymbol) && !nextMonomerIsPhosphate && !lastMonomer) {
+      if (!isPhosphate && !monomerHasRightPhosphateLinker(monomerSymbol) && !nextMonomerIsPhosphate && !lastMonomer)
         monomerSymbolSequence.push(PHOSPHATE_SYMBOL);
-      }
     });
     return monomerSymbolSequence;
   }
@@ -70,20 +69,20 @@ export class MonomerSequenceParser {
 
   // todo: port to monomer handler
   private getAllCodesOfFormat(): string[] {
-    let allCodesInTheFormat = Array.from(this.codeMap.keys());
+    const allCodesInTheFormat = Array.from(this.codeMap.keys());
     return sortByReverseLength(allCodesInTheFormat);
   }
 }
 
 // todo: to be eliminated after full helm support
 function monomerHasLeftPhosphateLinker(monomerSymbol: string): boolean {
-  return monomersWithPhosphateLinkers['left'].includes(monomerSymbol);
+  return MONOMERS_WITH_PHOSPHATE['left'].includes(monomerSymbol);
 }
 
 function monomerHasRightPhosphateLinker(monomerSymbol: string): boolean {
-  return monomersWithPhosphateLinkers['right'].includes(monomerSymbol);
+  return MONOMERS_WITH_PHOSPHATE['right'].includes(monomerSymbol);
 }
 
 function monomerIsPhosphateLinker(monomerSymbol: string): boolean {
-  return monomersWithPhosphateLinkers['phosphate'].includes(monomerSymbol);
+  return MONOMERS_WITH_PHOSPHATE['phosphate'].includes(monomerSymbol);
 }

package/src/{model/structure-app → apps/structure/model}/oligo-structure.ts

@@ -4,11 +4,11 @@ import * as DG from 'datagrok-api/dg';
 
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
-import {download} from '../helpers';
+import {download} from '../../common/model/helpers';
 import {SequenceToMolfileConverter} from './sequence-to-molfile';
 import {linkStrandsV3000} from './mol-transformations';
-import {DEFAULT_FORMATS} from '../const';
-import {FormatDetector} from '../parsing-validation/format-detector';
+import {DEFAULT_FORMATS} from '../../common/model/const';
+import {FormatDetector} from '../../common/model/parsing-validation/format-detector';
 
 export type StrandData = {
   strand: string,
@@ -62,7 +62,7 @@ export function saveSdf(
     nonEmptyStrands.length === 0 ||
     nonEmptyStrands.length === 1 && ss.strand === ''
   ) {
-    grok.shell.warning('Enter SS and optionally AS/AS2 to save SDF');
+    grok.shell.warning('Enter SENSE_STRAND and optionally ANTISENSE_STRAND/AS2 to save SDF');
   } else {
     let result: string;
     if (oneEntity) {

package/src/{model/structure-app → apps/structure/model}/sequence-to-molfile.ts

@@ -4,7 +4,7 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {MonomerSequenceParser} from './monomer-code-parser';
-import {MonomerLibWrapper} from '../monomer-lib/lib-wrapper';
+import {MonomerLibWrapper} from '../../common/model/monomer-lib/lib-wrapper';
 
 export class SequenceToMolfileConverter {
   constructor(
@@ -24,7 +24,7 @@ export class SequenceToMolfileConverter {
     parsedSequence.forEach((monomerSymbol, idx) => {
       const monomerMolfile = this.getMonomerMolfile(monomerSymbol, idx);
       monomerMolfiles.push(monomerMolfile);
-    })
+    });
     let molfile = this.getPolymerMolfile(monomerMolfiles);
     if (this.invert) {
       molfile = this.reflect(molfile);

package/src/{view/apps/oligo-structure.ts → apps/structure/view/ui.ts}

@@ -1,19 +1,20 @@
 /* Do not change these import lines to match external modules in webpack configuration */
+import * as DG from 'datagrok-api/dg';
 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 '../style/structure-app.css';
 import $ from 'cash-dom';
+import * as rxjs from 'rxjs';
+import './style.css';
 
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
-import {highlightInvalidSubsequence} from '../utils/colored-input/input-painters';
-import {getLinkedMolfile, saveSdf} from '../../model/structure-app/oligo-structure';
-import {ColoredTextInput} from '../utils/colored-input/colored-text-input';
-import {MoleculeImage} from '../utils/molecule-img';
-import {StrandData} from '../../model/structure-app/oligo-structure';
+import {ColoredTextInput} from '../../common/view/components/colored-input/colored-text-input';
+import {highlightInvalidSubsequence} from '../../common/view/components/colored-input/input-painters';
+import {MoleculeImage} from '../../common/view/components/molecule-img';
+import {APP_NAME} from '../../common/view/const';
+import {IsolatedAppUIBase} from '../../common/view/isolated-app-ui';
+import {getLinkedMolfile, saveSdf, StrandData} from '../model/oligo-structure';
 
 const enum DIRECTION {
   STRAIGHT = '5′ → 3′',
@@ -21,7 +22,7 @@ const enum DIRECTION {
 };
 const STRANDS = ['ss', 'as', 'as2'] as const;
 
-export class StructureLayoutHandler {
+class StructureAppLayout {
   constructor() {
     this.onInput = new rxjs.Subject<string>();
     this.onInvalidInput = new rxjs.Subject<string>();
@@ -98,7 +99,7 @@ export class StructureLayoutHandler {
           const selected = (idx === 0) ? DIRECTION.STRAIGHT : DIRECTION.INVERSE;
           return [key, ui.choiceInput(
             `${key.toUpperCase()} direction`, selected, [DIRECTION.STRAIGHT, DIRECTION.INVERSE]
-          )]
+          )];
         }
       )
     );
@@ -106,8 +107,9 @@ export class StructureLayoutHandler {
     STRANDS.forEach((strand, idx) => {
       directionChoiceInput[strand].onChanged(() => {
         let value = directionChoiceInput[strand].value === DIRECTION.INVERSE;
-        // warning: the next line is necessary until the legacy notion of direction used in the molfile generation gets fixed
-        if (idx > 0) { value = !value; }
+        // warning: the next line is necessary
+        // until the legacy notion of direction used in the molfile generation gets fixed
+        if (idx > 0) value = !value;
         this.directionInversion[strand] = value;
         this.onInput.next();
       });
@@ -126,7 +128,7 @@ export class StructureLayoutHandler {
     const clearBlock = Object.fromEntries(
       STRANDS.map(
         (key) => {
-          const clearIcon = ui.icons.delete(() => { coloredInput[key].inputBase.value = '' });
+          const clearIcon = ui.icons.delete(() => { coloredInput[key].inputBase.value = ''; });
           const clearButton = ui.button(clearIcon, () => {});
           ui.tooltip.bind(clearButton, `Clear ${key.toUpperCase()}`);
           return [key, clearIcon];
@@ -163,12 +165,12 @@ export class StructureLayoutHandler {
 
   private getStrandData() {
     return Object.fromEntries(
-      STRANDS.map((strand, idx) => {
-        let invert = this.directionInversion[strand];
+      STRANDS.map((strand) => {
+        const invert = this.directionInversion[strand];
         return [strand, {
           strand: this.inputBase[strand].value.replace(/\s*/g, ''),
           invert: invert
-        }]
+        }];
       })
     );
   }
@@ -192,7 +194,7 @@ export class StructureLayoutHandler {
       const errStr = errorToConsole(err);
       console.error(errStr);
     }
-    // todo: calculate relative numbers
+    // todo: compute relative numbers
     const canvasWidth = 650;
     const canvasHeight = 150;
     const molImgObj = new MoleculeImage(molfile);
@@ -201,3 +203,15 @@ export class StructureLayoutHandler {
     $(this.moleculeImgDiv).find('canvas').css('float', 'inherit');
   }
 }
+
+export class OligoStructureUI extends IsolatedAppUIBase {
+  constructor() {
+    super(APP_NAME.STRUCTURE);
+    this.layout = new StructureAppLayout();
+  }
+  private readonly layout: StructureAppLayout;
+
+  protected getContent(): Promise<HTMLDivElement> {
+    return this.layout.getHtmlDivElement();
+  }
+}

package/src/{model/translator-app → apps/translator/model}/conversion-utils.ts

@@ -1,17 +1,18 @@
-import {DEFAULT_FORMATS, NUCLEOTIDES} from '../const';
+import {DEFAULT_FORMATS, NUCLEOTIDES} from '../../common/model/const';
+import {NUCLEOTIDES_FORMAT} from '../view/const';
 import {UNKNOWN_SYMBOL} from './const';
 import {FormatConverter} from './format-converter';
-import {codesToHelmDictionary} from '../data-loading-utils/json-loader';
-import {MonomerLibWrapper} from '../monomer-lib/lib-wrapper';
+import {CODES_TO_HELM_DICT} from '../../common/model/data-loader/json-loader';
+import {MonomerLibWrapper} from '../../common/model/monomer-lib/lib-wrapper';
 
 export function getTranslatedSequences(sequence: string, indexOfFirstInvalidChar: number, sourceFormat: string): {[key: string]: string} {
-  const supportedFormats = Object.keys(codesToHelmDictionary).concat([DEFAULT_FORMATS.HELM]) as string[];
+  const supportedFormats = Object.keys(CODES_TO_HELM_DICT).concat([DEFAULT_FORMATS.HELM]) as string[];
 
   if (!sequence || (indexOfFirstInvalidChar !== -1 && sourceFormat !== DEFAULT_FORMATS.HELM))
     return {};
 
   if (!supportedFormats.includes(sourceFormat))
-    throw new Error(`${sourceFormat} format is not supported by SequenceTranslator`)
+    throw new Error(`${sourceFormat} format is not supported by SequenceTranslator`);
 
   const outputFormats = supportedFormats.filter((el) => el != sourceFormat)
     .sort((a, b) => a.localeCompare(b));
@@ -25,8 +26,8 @@ export function getTranslatedSequences(sequence: string, indexOfFirstInvalidChar
         translation = null;
       }
       return [format, translation];
-    }).filter(([format, translation]) => translation)
-  )
+    }).filter(([_, translation]) => translation)
+  );
   const helm = (sourceFormat === DEFAULT_FORMATS.HELM) ? sequence : result[DEFAULT_FORMATS.HELM];
   const nucleotides = getNucleotidesSequence(helm, MonomerLibWrapper.getInstance());
   if (nucleotides)
@@ -47,3 +48,20 @@ export function getNucleotidesSequence(helmString: string, monomerLib: MonomerLi
   }).map((el) => el ? el : UNKNOWN_SYMBOL).join('');
   return nucleotides;
 }
+
+// todo: remove after refactoring as a workaround
+export function convert(sequence: string, sourceFormat: string, targetFormat: string): string | null {
+  const converter = new FormatConverter(sequence, sourceFormat);
+  if (targetFormat === NUCLEOTIDES_FORMAT) {
+    const helm = converter.convertTo(DEFAULT_FORMATS.HELM);
+    const nucleotides = getNucleotidesSequence(helm, MonomerLibWrapper.getInstance());
+    return nucleotides;
+  }
+
+  return converter.convertTo(targetFormat);
+}
+
+export function getSupportedTargetFormats(): string[] {
+  const supportedTargetFormats = Object.keys(CODES_TO_HELM_DICT).concat([DEFAULT_FORMATS.HELM, NUCLEOTIDES_FORMAT]).sort() as string[];
+  return supportedTargetFormats;
+}

package/src/{model/translator-app → apps/translator/model}/format-converter.ts

@@ -1,7 +1,7 @@
 import * as DG from 'datagrok-api/dg';
-import {DEFAULT_FORMATS} from '../const';
+import {DEFAULT_FORMATS} from '../../common/model/const';
 import {PHOSPHATE_SYMBOL, UNKNOWN_SYMBOL} from './const';
-import {FormatHandler, getRegExpPattern} from '../parsing-validation/format-handler';
+import {FormatHandler, getRegExpPattern} from '../../common/model/parsing-validation/format-handler';
 
 const HELM_WRAPPER = {
   LEFT: 'RNA1{',
@@ -16,21 +16,16 @@ export class FormatConverter {
   convertTo(targetFormat: string): string {
     const formats = this.formats.getFormatNames();
 
-    if (this.sourceFormat === DEFAULT_FORMATS.HELM && formats.includes(targetFormat))
-      return this.helmToFormat(this.sequence, targetFormat);
-    else if (formats.includes(this.sourceFormat) && targetFormat === DEFAULT_FORMATS.HELM)
-      return this.formatToHelm(this.sequence, this.sourceFormat);
-    else if ([this.sourceFormat, targetFormat].every((el) => formats.includes(el))) {
+    if (this.sourceFormat === DEFAULT_FORMATS.HELM && formats.includes(targetFormat)) { return this.helmToFormat(this.sequence, targetFormat); } else if (formats.includes(this.sourceFormat) && targetFormat === DEFAULT_FORMATS.HELM) { return this.formatToHelm(this.sequence, this.sourceFormat); } else if ([this.sourceFormat, targetFormat].every((el) => formats.includes(el))) {
       const helm = this.formatToHelm(this.sequence, this.sourceFormat);
       return this.helmToFormat(helm, targetFormat);
-    }
-    else {
-      throw new Error (`ST: unsupported translation direction ${this.sourceFormat} -> ${targetFormat}`);
+    } else {
+      throw new Error(`ST: unsupported translation direction ${this.sourceFormat} -> ${targetFormat}`);
     }
   }
 
   private helmToFormat(helmSequence: string, targetFormat: string): string {
-    const wrapperRegExp = new RegExp(getRegExpPattern(Object.values(HELM_WRAPPER)), 'g')
+    const wrapperRegExp = new RegExp(getRegExpPattern(Object.values(HELM_WRAPPER)), 'g');
     let result = helmSequence.replace(wrapperRegExp, '');
 
     const dict = this.formats.getHelmToFormatDict(targetFormat);
@@ -54,7 +49,7 @@ export class FormatConverter {
     const phosphateRegExp = this.formats.getPhosphateHelmCodesRegExp(sourceFormat);
 
     let helm = sequence.replace(formatRegExp, (match) => {
-      const result = formatCodes.includes(match) ?  dict[match] + '.' : '?';
+      const result = formatCodes.includes(match) ? dict[match] + '.' : '?';
       return result;
     });
     helm = helm.replace(/\?+/g, `${UNKNOWN_SYMBOL}.`);

package/src/{view/const/oligo-translator.ts → apps/translator/view/const.ts}

@@ -2,4 +2,4 @@ export const DEFAULT_INPUT = 'fAmCmGmAmCpsmU';
 export const SEQUENCE_COPIED_MSG = 'Copied';
 export const SEQ_TOOLTIP_MSG = 'Copy sequence';
 
-export const NUCLEOTIDES = 'Nucleotides';
+export const NUCLEOTIDES_FORMAT = 'Nucleotides';

package/src/{view/apps/oligo-translator.ts → apps/translator/view/ui.ts}

@@ -1,36 +1,39 @@
 /* Do not change these import lines to match external modules in webpack configuration */
+import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
 
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
-import {ALPHABET, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
 import * as rxjs from 'rxjs';
-import '../style/translator-app.css';
-
-import {highlightInvalidSubsequence} from '../utils/colored-input/input-painters';
-import {ColoredTextInput} from '../utils/colored-input/colored-text-input';
-import {SequenceToMolfileConverter} from '../../model/structure-app/sequence-to-molfile';
-import {getTranslatedSequences} from '../../model/translator-app/conversion-utils';
-import {MoleculeImage} from '../utils/molecule-img';
-import {download} from '../../model/helpers';
-import {SEQUENCE_COPIED_MSG, SEQ_TOOLTIP_MSG, NUCLEOTIDES} from '../const/oligo-translator';
-import {DEFAULT_AXOLABS_INPUT} from '../const/ui';
-import {FormatDetector} from '../../model/parsing-validation/format-detector';
-import {SequenceValidator} from '../../model/parsing-validation/sequence-validator';
-import {FormatConverter} from '../../model/translator-app/format-converter';
-import {codesToHelmDictionary} from '../../model/data-loading-utils/json-loader';
-import {DEFAULT_FORMATS} from '../../model/const';
+
+import {DEFAULT_FORMATS} from '../../common/model/const';
+import {CODES_TO_HELM_DICT} from '../../common/model/data-loader/json-loader';
+import {download} from '../../common/model/helpers';
+import {FormatDetector} from '../../common/model/parsing-validation/format-detector';
+import {SequenceValidator} from '../../common/model/parsing-validation/sequence-validator';
+import {ColoredTextInput} from '../../common/view/components/colored-input/colored-text-input';
+import {highlightInvalidSubsequence} from '../../common/view/components/colored-input/input-painters';
+import {MoleculeImage} from '../../common/view/components/molecule-img';
+import {APP_NAME, DEFAULT_AXOLABS_INPUT} from '../../common/view/const';
+import {IsolatedAppUIBase} from '../../common/view/isolated-app-ui';
+import {MonomerLibViewer} from '../../common/view/monomer-lib-viewer';
+import {SequenceToMolfileConverter} from '../../structure/model/sequence-to-molfile';
+import {convert, getSupportedTargetFormats, getTranslatedSequences} from '../model/conversion-utils';
+import {FormatConverter} from '../model/format-converter';
+import {NUCLEOTIDES_FORMAT, SEQUENCE_COPIED_MSG, SEQ_TOOLTIP_MSG} from './const';
+import './style.css';
 
 const enum REQUIRED_COLUMN_LABEL {
   SEQUENCE = 'Sequence',
 }
-const REQUIRED_COLUMN_LABELS = [ REQUIRED_COLUMN_LABEL.SEQUENCE ];
+const REQUIRED_COLUMN_LABELS = [REQUIRED_COLUMN_LABEL.SEQUENCE];
 
-export class TranslatorLayoutHandler {
+class TranslatorAppLayout {
   private eventBus: EventBus;
-  private inputFormats = Object.keys(codesToHelmDictionary).concat(DEFAULT_FORMATS.HELM);
+  private inputFormats = Object.keys(CODES_TO_HELM_DICT).concat(DEFAULT_FORMATS.HELM);
+
   constructor() {
     this.moleculeImgDiv = ui.div([]);
     this.moleculeImgDiv.className = 'mol-host';
@@ -77,7 +80,7 @@ export class TranslatorLayoutHandler {
         singleSequenceControls,
         bulkControls,
         ui.block([ui.box(this.moleculeImgDiv)])
-      ]),
+      ])
     );
 
     this.formatChoiceInput.value = this.format;
@@ -92,15 +95,26 @@ export class TranslatorLayoutHandler {
 
     const tableControlsManager = new TableControlsManager(this.eventBus);
     const tableControls = tableControlsManager.createUIComponents();
-    const inputFormats = ui.choiceInput('Input format', DEFAULT_FORMATS.AXOLABS, this.inputFormats, (value: string) => this.eventBus.selectInputFormat(value));
-    const outputFormats = ui.choiceInput('Output format', NUCLEOTIDES, [NUCLEOTIDES], () => {});
+    const inputFormats = ui.choiceInput(
+      'Input format',
+      DEFAULT_FORMATS.AXOLABS,
+      this.inputFormats,
+      (value: string) => this.eventBus.selectInputFormat(value)
+    );
+
+    const outputFormats = ui.choiceInput(
+      'Output format',
+      NUCLEOTIDES_FORMAT,
+      getSupportedTargetFormats(),
+      (value: string) => this.eventBus.selectOutputFormat(value)
+    );
     const convertBulkButton = this.createConvertBulkButton();
 
     const tableControlsContainer = ui.div([
       ...tableControls,
       inputFormats,
       outputFormats,
-      convertBulkButton 
+      convertBulkButton
     ], 'ui-form');
 
     const bulkTranslationControls = ui.block25([
@@ -130,7 +144,7 @@ export class TranslatorLayoutHandler {
     }
 
     const inputFormat = this.eventBus.getSelectedInputFormat();
-    const outputFormat = NUCLEOTIDES;
+    const outputFormat = this.eventBus.getSelectedOutputFormat();
     const sequenceColumn = this.eventBus.getSelectedColumn(REQUIRED_COLUMN_LABEL.SEQUENCE);
     if (!sequenceColumn) {
       grok.shell.warning('No sequence column selected');
@@ -142,15 +156,20 @@ export class TranslatorLayoutHandler {
       DG.TYPE.STRING,
       newColumnName,
       sequenceColumn.toList().map((sequence: string) => {
-        const translatedSequences = getTranslatedSequences(sequence, -1, inputFormat);
-        return translatedSequences[outputFormat];
+        const result = convert(sequence, inputFormat, outputFormat);
+        return result;
       })
     );
 
-    translatedColumn.semType = DG.SEMTYPE.MACROMOLECULE;
-    translatedColumn.setTag(DG.TAGS.UNITS, NOTATION.FASTA);
-    const unitsHandler = UnitsHandler.getOrCreate(translatedColumn);
-    UnitsHandler.setUnitsToFastaColumn(unitsHandler);
+    if (outputFormat === NUCLEOTIDES_FORMAT || outputFormat === DEFAULT_FORMATS.HELM) {
+      translatedColumn.semType = DG.SEMTYPE.MACROMOLECULE;
+      const units = outputFormat == NUCLEOTIDES_FORMAT ? NOTATION.FASTA : NOTATION.HELM;
+      translatedColumn.setTag(DG.TAGS.UNITS, units);
+      const seqHandler = SeqHandler.forColumn(translatedColumn as DG.Column<string>);
+      const setUnits = outputFormat == NUCLEOTIDES_FORMAT ? SeqHandler.setUnitsToFastaColumn :
+        SeqHandler.setUnitsToHelmColumn;
+      setUnits(seqHandler);
+    }
 
     // add newColumn to the table
     selectedTable.columns.add(translatedColumn);
@@ -176,7 +195,7 @@ export class TranslatorLayoutHandler {
     const formatChoiceInput = ui.div([this.formatChoiceInput]);
 
     const clearButton = ui.button(
-      ui.icons.delete(() => { sequenceColoredInput.inputBase.value = '' }),
+      ui.icons.delete(() => { sequenceColoredInput.inputBase.value = ''; }),
       () => {}
     );
     ui.tooltip.bind(clearButton, 'Clear input');
@@ -201,7 +220,7 @@ export class TranslatorLayoutHandler {
       ui.h1('Single sequence'),
       singleSequenceInputControls,
       singleSequenceOutputTable,
-    ])
+    ]);
 
     return singleSequenceControls;
   }
@@ -222,7 +241,8 @@ export class TranslatorLayoutHandler {
   private updateTable(): void {
     this.outputTableDiv.innerHTML = '';
     // todo: does not detect correctly (U-A)(U-A)
-    const indexOfInvalidChar = (!this.format) ? 0 : (new SequenceValidator(this.sequence)).getInvalidCodeIndex(this.format!);
+    const indexOfInvalidChar = (!this.format) ? 0 :
+      (new SequenceValidator(this.sequence)).getInvalidCodeIndex(this.format!);
     const translatedSequences = getTranslatedSequences(this.sequence, indexOfInvalidChar, this.format!);
     const tableRows = [];
 
@@ -320,14 +340,11 @@ class TableInputManager {
     this.eventBus.tableSelected$.subscribe(() => this.handleTableChoice());
   }
 
-  private getTableFromEventData(eventData: any): DG.DataFrame {
-    if (! eventData && eventData.args && eventData.args.dataFrame instanceof DG.DataFrame)
-      throw new Error(`EventData does not contain a dataframe`, eventData);
-
-    return eventData.args.dataFrame as DG.DataFrame;
+  private getTableFromEventData(eventData: DG.EventData<DG.DataFrameArgs>): DG.DataFrame {
+    return eventData.args.dataFrame;
   }
 
-  private handleTableAdded(eventData: any): void {
+  private handleTableAdded(eventData: DG.EventData<DG.DataFrameArgs>): void {
     const table = this.getTableFromEventData(eventData);
 
     if (this.availableTables.some((t: DG.DataFrame) => t.name === table.name))
@@ -462,6 +479,7 @@ export class EventBus {
     return [columnLabel, columnSelection$];
   }));
   private _inputFormatSelection$ = new rxjs.BehaviorSubject<string>(DEFAULT_FORMATS.AXOLABS);
+  private _outputFormatSelection$ = new rxjs.BehaviorSubject<string>(NUCLEOTIDES_FORMAT);
 
   private constructor() {}
 
@@ -490,7 +508,7 @@ export class EventBus {
   getSelectedColumn(columnLabel: REQUIRED_COLUMN_LABEL): DG.Column<string> | null {
     return this._columnSelection[columnLabel].getValue();
   }
-  
+
   getSelectedInputFormat(): string {
     return this._inputFormatSelection$.getValue();
   }
@@ -498,4 +516,32 @@ export class EventBus {
   selectInputFormat(format: string): void {
     this._inputFormatSelection$.next(format);
   }
+
+  selectOutputFormat(format: string): void {
+    this._outputFormatSelection$.next(format);
+  }
+
+  getSelectedOutputFormat(): string {
+    return this._outputFormatSelection$.getValue();
+  }
+}
+
+export class OligoTranslatorUI extends IsolatedAppUIBase {
+  private readonly topPanel: HTMLElement[];
+  private readonly layout = new TranslatorAppLayout();
+
+  constructor() {
+    super(APP_NAME.TRANSLATOR);
+
+    const viewMonomerLibIcon = ui.iconFA('book', MonomerLibViewer.view, 'View monomer library');
+    this.topPanel = [
+      viewMonomerLibIcon,
+    ];
+    this.view.setRibbonPanels([this.topPanel]);
+  }
+
+  protected getContent(): Promise<HTMLDivElement> {
+    return this.layout.getHtmlElement();
+  };
 }
+