@datagrok/sequence-translator 1.3.1 → 1.3.3

package/src/apps/pattern/model/data-manager.ts

@@ -11,8 +11,8 @@ import {
 
 import objectHash from 'object-hash';
 import {EventBus} from './event-bus';
-import {PATTERN_APP_DATA} from '../../common/model/data-loader/json-loader';
-
+import {ITranslationHelper} from '../../../types';
+import {_package} from '../../../package';
 
 export class DataManager {
   private currentUserName: string;
@@ -21,10 +21,13 @@ export class DataManager {
   private currentUserPatternNameToHash = new Map<string, string>();
 
   // WARNING: init logic encapsulated
-  private constructor( ) { }
+  private constructor(
+    private readonly th: ITranslationHelper
+  ) { }
 
   static async getInstance(): Promise<DataManager> {
-    const instance = new DataManager();
+    const th = await _package.getTranslationHelper();
+    const instance = new DataManager(th);
 
     instance.currentUserName = await instance.fetchCurrentUserName();
     instance.currentUserId = await instance.fetchCurrentUserId();
@@ -222,8 +225,8 @@ export class DataManager {
   }
 
   fetchAvailableNucleotideBases(): string[] {
-    const format = Object.keys(PATTERN_APP_DATA)[0];
-    const nucleotideBases: string[] = Object.keys(PATTERN_APP_DATA[format]);
+    const format = Object.keys(this.th.jsonData.patternAppData)[0];
+    const nucleotideBases: string[] = Object.keys(this.th.jsonData.patternAppData[format]);
     return nucleotideBases;
   }
 

package/src/apps/pattern/model/translator.ts

@@ -1,7 +1,9 @@
 import * as grok from 'datagrok-api/grok';
 import {STRAND, STRANDS, TERMINI, TERMINUS} from './const';
-import {PATTERN_APP_DATA} from '../../common/model/data-loader/json-loader';
 import {EventBus} from './event-bus';
+import {ITranslationHelper} from '../../../types';
+import {_package} from '../../../package';
+import {JsonData} from '../../common/model/data-loader/json-loader';
 
 export function bulkTranslate(eventBus: EventBus): void {
   const df = eventBus.getTableSelection();
@@ -31,16 +33,12 @@ export function applyPatternToRawSequence(
   rawNucleotideSequence: string,
   modifications: string[],
   ptoFlags: boolean[],
-  terminalModifications: Record<TERMINUS, string>
+  terminalModifications: Record<TERMINUS, string>,
 ): string {
   const rawNucleotides = rawNucleotideSequence.split('');
 
   const modifiedNucleotides = rawNucleotides.map((nucleotide, i) => {
-    const modifiedNucleotide = getModifiedNucleotide(
-      nucleotide,
-      modifications[i]
-
-    );
+    const modifiedNucleotide = getModifiedNucleotide(nucleotide, modifications[i], _package.jsonData);
     return modifiedNucleotide;
   });
 
@@ -51,9 +49,9 @@ export function applyPatternToRawSequence(
   return modificationsWithPTOLinkages.join('');
 }
 
-function getModifiedNucleotide(nucleotide: string, modification: string): string {
-  const format = Object.keys(PATTERN_APP_DATA)[0];
-  const substitution = PATTERN_APP_DATA[format][modification].substitution;
+function getModifiedNucleotide(nucleotide: string, modification: string, jsonData: JsonData): string {
+  const format = Object.keys(jsonData.patternAppData)[0];
+  const substitution = jsonData.patternAppData[format][modification].substitution;
   return nucleotide.replace(/([AGCTU])/, substitution);
 }
 

package/src/apps/pattern/model/utils.ts

@@ -1,7 +1,6 @@
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-import {PATTERN_APP_DATA} from '../../common/model/data-loader/json-loader';
 import {NucleotideSequences} from './types';
 
 

package/src/apps/pattern/view/components/strand-editor/strand-controls.ts

@@ -2,7 +2,6 @@ import * as ui from 'datagrok-api/ui';
 
 import $ from 'cash-dom';
 
-import {PATTERN_APP_DATA} from '../../../../common/model/data-loader/json-loader';
 import {STRAND, STRANDS, STRAND_LABEL} from '../../../model/const';
 import {EventBus} from '../../../model/event-bus';
 import {StrandType} from '../../../model/types';

package/src/apps/pattern/view/components/translation-examples-block.ts

@@ -15,6 +15,7 @@ import {SubscriptionManager} from '../../model/subscription-manager';
 
 export class TranslationExamplesBlock {
   private subscriptions = new SubscriptionManager();
+
   constructor(
     private eventBus: EventBus,
     private dataManager: DataManager
@@ -55,7 +56,7 @@ class StrandExample {
   constructor(
     private strand: STRAND,
     private eventBus: EventBus,
-    private subscriptions: SubscriptionManager
+    private subscriptions: SubscriptionManager,
   ) { }
 
   create(): HTMLDivElement {

package/src/apps/pattern/view/svg-utils/strands-block.ts

@@ -1,5 +1,5 @@
 import {NUCLEOTIDES} from '../../../common/model/const';
-import {STRAND, STRANDS, TERMINUS} from '../../model/const';
+import {STRAND, STRANDS, TERMINI, TERMINUS} from '../../model/const';
 import {PatternConfiguration} from '../../model/types';
 import {isOverhangNucleotide} from '../../model/utils';
 import {SVG_CIRCLE_SIZES, SVG_ELEMENT_COLORS, SVG_TEXT_FONT_SIZES} from './const';
@@ -19,6 +19,7 @@ const RIGHT_LABEL_WIDTH = 20;
 export class StrandsBlock extends SVGBlockBase {
   private strands: SVGBlockBase[];
   private labels: SVGBlockBase[];
+  private terminalModifications: SVGBlockBase[];
   constructor(
     svgElementFactory: SVGElementFactory,
     config: PatternConfiguration,
@@ -30,16 +31,22 @@ export class StrandsBlock extends SVGBlockBase {
     this.strands = strandTypes
       .map((strand) => new SingleStrandBlock(this.svgElementFactory, config, yShift, strand));
 
+
+    this.terminalModifications = strandTypes.map(
+      (strandType, idx) =>
+        new TerminalModificationLabels(this.svgElementFactory, config, yShift, strandType, this.strands[idx] as SingleStrandBlock)
+    );
     this.labels = strandTypes.map(
       (strandType, idx) =>
-        new StrandLabel(this.svgElementFactory, config, yShift, strandType, this.strands[idx] as SingleStrandBlock)
+        new StrandLabel(this.svgElementFactory, config, yShift, strandType, this.terminalModifications[idx] as TerminalModificationLabels)
     );
   }
 
   get svgElements(): SVGElement[] {
     const elements = [
       ...this.strands,
-      ...this.labels
+      ...this.terminalModifications,
+      ...this.labels,
     ].map((block) => block.svgElements).flat();
     return elements;
   }
@@ -255,11 +262,10 @@ class StrandLabel extends SVGBlockBase {
     protected config: PatternConfiguration,
     protected yShift: number,
     private strand: STRAND,
-    private strandSvgWrapper: SingleStrandBlock
+    private terminalModifications: TerminalModificationLabels
   ) {
     super(svgElementFactory, config, yShift);
     this._svgElements = this.createSVGElements();
-    // this.strandSvgWrapper.shiftElements({x: this.getLeftLabelWidth(), y: 0});
   }
 
   private createSVGElements(): SVGElement[] {
@@ -300,7 +306,7 @@ class StrandLabel extends SVGBlockBase {
     const text = `  ${terminus}`;
     const textDimensions = TextDimensionsCalculator.getTextDimensions(text, SVG_TEXT_FONT_SIZES.NUCLEOBASE);
     const position = {
-      x: SENSE_STRAND_HORIZONTAL_SHIFT + this.strandSvgWrapper.getContentWidth() + 5,
+      x: SENSE_STRAND_HORIZONTAL_SHIFT + this.terminalModifications.getContentWidth() + 5,
       y: getStrandCircleYShift(this.strand, this.yShift) + textDimensions.height / 3
     };
 
@@ -317,7 +323,92 @@ class StrandLabel extends SVGBlockBase {
   }
 
   getContentWidth(): number {
-    return this.strandSvgWrapper.getContentWidth() + this.getLeftLabelWidth() + this.getRightLabelWidth() + SENSE_STRAND_PADDING;
+    return this.terminalModifications.getContentWidth() + this.getLeftLabelWidth() +
+      this.getRightLabelWidth() + SENSE_STRAND_PADDING;
+  }
+
+  getContentHeight(): number {
+    return this.terminalModifications.getContentHeight();
+  }
+}
+
+class TerminalModificationLabels extends SVGBlockBase {
+  private _svgElements: SVGElement[];
+  constructor(
+    protected svgElementFactory: SVGElementFactory,
+    protected config: PatternConfiguration,
+    protected yShift: number,
+    private strand: STRAND,
+    private strandSvgWrapper: SingleStrandBlock
+  ) {
+    super(svgElementFactory, config, yShift);
+    this._svgElements = this.createSVGElements();
+  }
+
+  private createSVGElements(): SVGElement[] {
+    const elements = this.createTerminalModifications();
+    return elements;
+  }
+
+  private getTerminalModification(terminus: TERMINUS): string {
+    const terminalModification = this.config.strandTerminusModifications[this.strand][terminus];
+    return terminalModification;
+  }
+
+  private getTerminalModificationTextDimensions(terminus: TERMINUS): {width: number, height: number} {
+    const terminalModification = this.getTerminalModification(terminus);
+    const textDimensions = TextDimensionsCalculator
+      .getTextDimensions(terminalModification, SVG_TEXT_FONT_SIZES.NUCLEOBASE);
+    return textDimensions;
+  }
+
+  private getLeftTerminus(): TERMINUS {
+    return this.strand === STRAND.SENSE ? TERMINUS.FIVE_PRIME : TERMINUS.THREE_PRIME;
+  }
+
+  private createTerminalModification(terminus: TERMINUS): SVGTextElement {
+    const terminalModification = this.getTerminalModification(terminus);
+    const dimensions = this.getTerminalModificationTextDimensions(terminus);
+
+    const isLeft = terminus === this.getLeftTerminus();
+    const xShift = isLeft ? SENSE_STRAND_HORIZONTAL_SHIFT :
+      SENSE_STRAND_HORIZONTAL_SHIFT +
+      this.getTerminalModificationTextDimensions(this.getLeftTerminus()).width +
+      this.strandSvgWrapper.getContentWidth();
+    const position = {
+      x: xShift,
+      y: getStrandCircleYShift(this.strand, this.yShift) + dimensions.height / 3
+    };
+    if (isLeft) {
+      this.strandSvgWrapper.shiftElements({
+        x: dimensions.width,
+        y: 0
+      });
+    }
+
+    return this.svgElementFactory.createTextElement(
+      terminalModification,
+      position,
+      SVG_TEXT_FONT_SIZES.NUCLEOBASE,
+      SVG_ELEMENT_COLORS.MODIFICATION_TEXT
+    );
+  }
+
+  private createTerminalModifications(): SVGTextElement[] {
+    const termini = (this.strand === STRAND.ANTISENSE) ? TERMINI : Array.from(TERMINI).reverse();
+    const textElements = termini.map((terminus) => this.createTerminalModification(terminus));
+    return textElements;
+  }
+
+  get svgElements(): SVGElement[] {
+    return this._svgElements;
+  }
+
+  getContentWidth(): number {
+    return this.strandSvgWrapper.getContentWidth() +
+      TERMINI
+        .map((terminus) => this.getTerminalModificationTextDimensions(terminus).width)
+        .reduce((acc, curr) => acc += curr, 0);
   }
 
   getContentHeight(): number {

package/src/apps/pattern/view/svg-utils/svg-block-base.ts

@@ -17,21 +17,13 @@ export abstract class SVGBlockBase {
   shiftElements(shift: {x: number, y: number}): void {
     this.svgElements.forEach((element) => {
       const transform = element.getAttribute('transform') || '';
-      const match = transform.match(/translate\(([^,]+),([^,]+)\)/);
-      const x = match ? parseFloat(match[1]) : 0;
-      const y = match ? parseFloat(match[2]) : 0;
-      const newTransform = `translate(${x + shift.x},${y + shift.y})`;
+      // const match = transform.match(/translate\(([^,]+),([^,]+)\)/);
+      // const x = match ? parseFloat(match[1]) : 0;
+      // const y = match ? parseFloat(match[2]) : 0;
+      const newTransform = `translate(${shift.x},${shift.y})`;
       element.setAttribute('transform', `${transform} ${newTransform}`);
     });
   }
 
-  adjustContentWithinGlobalContainer(globalWidth: number): void {
-    const contentWidth = this.getContentWidth();
-    if (contentWidth < globalWidth) {
-      const shift = (globalWidth - contentWidth) / 2;
-      this.shiftElements({x: shift, y: 0});
-    }
-  }
-
   abstract getContentWidth(): number;
 }

package/src/apps/pattern/view/svg-utils/utils.ts

@@ -1,8 +1,10 @@
+import {PATTERN_APP_DATA_FILENAME} from '../../../common/model/data-loader/const';
 import {NUCLEOTIDES} from '../../../common/model/const';
-import {PATTERN_APP_DATA} from '../../../common/model/data-loader/json-loader';
 import {LUMINANCE_COEFFICIENTS, TEXT_COLOR, SVG_CIRCLE_SIZES} from './const';
 import {isOverhangNucleotide} from '../../model/utils';
 
+import {_package} from '../../../../package';
+
 export function computeLegendCircleYPosition(isAntisenseStrandActive: boolean): number {
   return (isAntisenseStrandActive ? 9.5 : 6) * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS;
 }
@@ -28,10 +30,10 @@ export function computeTextColorForNucleobaseLabel(nucleobase: string): string {
 
 export function getNucleobaseColorFromStyleMap(nucleobase: string): string {
   // todo: optimize
-  const format = Object.keys(PATTERN_APP_DATA)[0];
+  const format = Object.keys(_package.jsonData.patternAppData)[0];
   if (!format)
-    throw new Error('No format found in PATTERN_APP_DATA');
+    throw new Error(`No format found in '${PATTERN_APP_DATA_FILENAME}'`);
 
-  const styleMap = PATTERN_APP_DATA[format];
+  const styleMap = _package.jsonData.patternAppData[format];
   return styleMap[nucleobase].color || '';
 }

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

@@ -8,10 +8,13 @@ import {URLRouter} from '../model/router';
 import {PatternAppLeftSection} from './components/left-section';
 import {PatternAppRightSection} from './components/right-section';
 import {PatternConfigRecord} from '../model/types';
+import {ITranslationHelper} from '../../../types';
 
 
 export class OligoPatternUI extends IsolatedAppUIBase {
-  constructor() {
+  constructor(
+    private readonly th: ITranslationHelper
+  ) {
     super(APP_NAME.PATTERN);
   }
 

package/src/apps/structure/model/monomer-code-parser.ts

@@ -5,8 +5,14 @@ import * as DG from 'datagrok-api/dg';
 
 import {PHOSPHATE_SYMBOL} from './const';
 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';
+
+import {_package} from '../../../package';
+
+export class MonomerNotFoundError extends Error {
+  constructor(message?: string, options?: ErrorOptions) {
+    super(message, options);
+  }
+}
 
 /** Wrapper for parsing a strand and getting a sequence of monomer IDs (with
  * omitted linkers, if needed)  */
@@ -61,6 +67,10 @@ export class MonomerSequenceParser {
       const code = allCodesOfFormat.find(
         (s: string) => s === this.sequence.substring(i, i + s.length)
       )!;
+      if (code === undefined) {
+        throw new MonomerNotFoundError(
+          `Unable to match a monomer for the rest of the sequence '${this.sequence.slice(i)}'.`);
+      }
       parsedCodes.push(code);
       i += code.length;
     }
@@ -76,13 +86,13 @@ export class MonomerSequenceParser {
 
 // todo: to be eliminated after full helm support
 function monomerHasLeftPhosphateLinker(monomerSymbol: string): boolean {
-  return MONOMERS_WITH_PHOSPHATE['left'].includes(monomerSymbol);
+  return _package.jsonData.monomersWithPhosphate['left'].includes(monomerSymbol);
 }
 
 function monomerHasRightPhosphateLinker(monomerSymbol: string): boolean {
-  return MONOMERS_WITH_PHOSPHATE['right'].includes(monomerSymbol);
+  return _package.jsonData.monomersWithPhosphate['right'].includes(monomerSymbol);
 }
 
 function monomerIsPhosphateLinker(monomerSymbol: string): boolean {
-  return MONOMERS_WITH_PHOSPHATE['phosphate'].includes(monomerSymbol);
+  return _package.jsonData.monomersWithPhosphate['phosphate'].includes(monomerSymbol);
 }

package/src/apps/structure/model/oligo-structure.ts

@@ -7,8 +7,7 @@ import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {download} from '../../common/model/helpers';
 import {SequenceToMolfileConverter} from './sequence-to-molfile';
 import {linkStrandsV3000} from './mol-transformations';
-import {DEFAULT_FORMATS} from '../../common/model/const';
-import {FormatDetector} from '../../common/model/parsing-validation/format-detector';
+import {ITranslationHelper} from '../../../types';
 
 export type StrandData = {
   strand: string,
@@ -16,10 +15,10 @@ export type StrandData = {
 }
 
 /** Get a molfile for a single strand */
-export function getMolfileForStrand(strand: string, invert: boolean): string {
+export function getMolfileForStrand(strand: string, invert: boolean, th: ITranslationHelper): string {
   if (strand === '')
     return '';
-  const format = (new FormatDetector(strand)).getFormat();
+  const format = th.createFormatDetector(strand).getFormat();
   if (!format)
     return '';
   let molfile = '';
@@ -34,15 +33,15 @@ export function getMolfileForStrand(strand: string, invert: boolean): string {
 
 /** Get molfile for single strand or linked strands */
 export function getLinkedMolfile(
-  ss: StrandData, as: StrandData, as2: StrandData, useChiral: boolean
+  ss: StrandData, as: StrandData, as2: StrandData, useChiral: boolean, th: ITranslationHelper
 ): string {
   const nonEmptyStrands = [ss, as, as2].filter((item) => item.strand !== '');
   if (nonEmptyStrands.length === 1) {
-    return getMolfileForStrand(nonEmptyStrands[0].strand, nonEmptyStrands[0].invert);
+    return getMolfileForStrand(nonEmptyStrands[0].strand, nonEmptyStrands[0].invert, th);
   } else {
-    const ssMol = getMolfileForStrand(ss.strand, ss.invert);
-    const asMol = getMolfileForStrand(as.strand, as.invert);
-    const as2Mol = getMolfileForStrand(as2.strand, as2.invert);
+    const ssMol = getMolfileForStrand(ss.strand, ss.invert, th);
+    const asMol = getMolfileForStrand(as.strand, as.invert, th);
+    const as2Mol = getMolfileForStrand(as2.strand, as2.invert, th);
 
     // select only the non-empty anti-strands
     const antiStrands = [asMol, as2Mol].filter((item) => item !== '');
@@ -54,8 +53,8 @@ export function getLinkedMolfile(
 
 /** Save sdf in case ss and as (and optionally as2) strands entered */
 export function saveSdf(
-  ss: StrandData, as: StrandData, as2: StrandData, useChiral: boolean,
-  oneEntity: boolean
+  ss: StrandData, as: StrandData, as2: StrandData, useChiral: boolean, oneEntity: boolean,
+  th: ITranslationHelper
 ): void {
   const nonEmptyStrands = [ss.strand, as.strand, as2.strand].filter((item) => item !== '');
   if (
@@ -66,16 +65,16 @@ export function saveSdf(
   } else {
     let result: string;
     if (oneEntity) {
-      result = getLinkedMolfile(ss, as, as2, useChiral) + '\n$$$$\n';
+      result = getLinkedMolfile(ss, as, as2, useChiral, th) + '\n$$$$\n';
     } else {
-      const ssMol = getMolfileForStrand(ss.strand, ss.invert);
-      const asMol = getMolfileForStrand(as.strand, as.invert);
-      const as2Mol = getMolfileForStrand(as2.strand, as2.invert);
+      const ssMol = getMolfileForStrand(ss.strand, ss.invert, th);
+      const asMol = getMolfileForStrand(as.strand, as.invert, th);
+      const as2Mol = getMolfileForStrand(as2.strand, as2.invert, th);
       result = ssMol + '\n' +
         `> <Sequence>\nSense Strand\n$$$$\n`;
       if (asMol) {
         result += asMol + '\n' +
-        `> <Sequence>\nAnti Sense\n$$$$\n`;
+          `> <Sequence>\nAnti Sense\n$$$$\n`;
       }
       if (as2Mol) {
         result += as2Mol + '\n' +
@@ -85,9 +84,11 @@ export function saveSdf(
 
     // construct date-time in the form yyyy-mm-dd_hh-mm-ss
     const date = new Date();
+
     function pad(x: number): string {
       return (x >= 10) ? x.toString() : '0' + x.toString();
     }
+
     const dateString: string = date.getFullYear() + '-' + pad(date.getMonth() + 1) +
       '-' + pad(date.getDate()) + '_' + pad(date.getHours()) + '-' +
       pad(date.getMinutes()) + '-' + pad(date.getSeconds());

package/src/apps/structure/model/sequence-to-molfile.ts

@@ -5,12 +5,13 @@ import * as DG from 'datagrok-api/dg';
 
 import {MonomerSequenceParser} from './monomer-code-parser';
 import {MonomerLibWrapper} from '../../common/model/monomer-lib/lib-wrapper';
+import {_package} from '../../../package';
 
 export class SequenceToMolfileConverter {
   constructor(
     sequence: string, private invert: boolean = false, format: string
   ) {
-    this.lib = MonomerLibWrapper.getInstance();
+    this.lib = _package.monomerLibWrapper;
     const codeToSymbolMap = this.lib.getCodeToSymbolMap(format);
     this.parser = new MonomerSequenceParser(sequence, codeToSymbolMap);
   }

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

@@ -10,11 +10,13 @@ import './style.css';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
 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';
+import {ITranslationHelper} from '../../../types';
+
+import {_package} from '../../../package';
 
 const enum DIRECTION {
   STRAIGHT = '5′ → 3′',
@@ -23,7 +25,10 @@ const enum DIRECTION {
 const STRANDS = ['ss', 'as', 'as2'] as const;
 
 class StructureAppLayout {
+  private readonly th: ITranslationHelper;
+
   constructor() {
+    this.th = _package;
     this.onInput = new rxjs.Subject<string>();
     this.onInvalidInput = new rxjs.Subject<string>();
     this.inputBase = Object.fromEntries(
@@ -53,12 +58,12 @@ class StructureAppLayout {
   private onInvalidInput: rxjs.Subject<string>;
   private useChiralInput: DG.InputBase<boolean | null>;
   private saveAllStrandsInput: DG.InputBase<boolean | null>;
-  private inputBase: {[key: string]: DG.InputBase<string>};
-  private directionInversion: {[key: string]: boolean};
+  private inputBase: { [key: string]: DG.InputBase<string> };
+  private directionInversion: { [key: string]: boolean };
   private moleculeImgDiv: HTMLDivElement;
 
-  async getHtmlDivElement(): Promise<HTMLDivElement> {
-    const tableLayout = this.getTableInput();
+  async getHtmlDivElement(th: ITranslationHelper): Promise<HTMLDivElement> {
+    const tableLayout = this.getTableInput(th);
     const boolInputsAndButton = this.getBoolInputsAndButton();
     await this.updateMoleculeImg();
     const bottomDiv = ui.divH([boolInputsAndButton, this.moleculeImgDiv]);
@@ -75,7 +80,7 @@ class StructureAppLayout {
       ui.bigButton('Save SDF', () => {
         const strandData = this.getStrandData();
         saveSdf(strandData.ss, strandData.as, strandData.as2,
-          this.useChiralInput.value!, this.saveAllStrandsInput.value!);
+          this.useChiralInput.value!, this.saveAllStrandsInput.value!, this.th);
       })
     ]);
 
@@ -86,10 +91,10 @@ class StructureAppLayout {
     return boolInputsAndButton;
   }
 
-  private getTableInput(): HTMLTableElement {
+  private getTableInput(th: ITranslationHelper): HTMLTableElement {
     const coloredInput = Object.fromEntries(
       STRANDS.map(
-        (key) => [key, new ColoredTextInput(this.inputBase[key], highlightInvalidSubsequence)]
+        (key) => [key, new ColoredTextInput(this.inputBase[key], th.highlightInvalidSubsequence)]
       )
     );
 
@@ -181,7 +186,7 @@ class StructureAppLayout {
     //   return '';
     // }
 
-    return getLinkedMolfile(ss, as, as2, this.useChiralInput.value!);
+    return getLinkedMolfile(ss, as, as2, this.useChiralInput.value!, this.th);
   }
 
   private async updateMoleculeImg(): Promise<void> {
@@ -205,13 +210,16 @@ class StructureAppLayout {
 }
 
 export class OligoStructureUI extends IsolatedAppUIBase {
-  constructor() {
+  constructor(
+    private readonly th: ITranslationHelper
+  ) {
     super(APP_NAME.STRUCTURE);
     this.layout = new StructureAppLayout();
   }
+
   private readonly layout: StructureAppLayout;
 
   protected getContent(): Promise<HTMLDivElement> {
-    return this.layout.getHtmlDivElement();
+    return this.layout.getHtmlDivElement(this.th);
   }
 }

package/src/apps/translator/model/conversion-utils.ts

@@ -1,12 +1,14 @@
 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 {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(CODES_TO_HELM_DICT).concat([DEFAULT_FORMATS.HELM]) as string[];
+import {ITranslationHelper} from '../../../types';
+
+export function getTranslatedSequences(
+  sequence: string, indexOfFirstInvalidChar: number, sourceFormat: string, th: ITranslationHelper
+): { [key: string]: string } {
+  const supportedFormats = Object.keys(th.jsonData.codesToHelmDict).concat([DEFAULT_FORMATS.HELM]) as string[];
 
   if (!sequence || (indexOfFirstInvalidChar !== -1 && sourceFormat !== DEFAULT_FORMATS.HELM))
     return {};
@@ -16,7 +18,7 @@ export function getTranslatedSequences(sequence: string, indexOfFirstInvalidChar
 
   const outputFormats = supportedFormats.filter((el) => el != sourceFormat)
     .sort((a, b) => a.localeCompare(b));
-  const converter = new FormatConverter(sequence, sourceFormat);
+  const converter = th.createFormatConverter(sequence, sourceFormat);
   const result = Object.fromEntries(
     outputFormats.map((format) => {
       let translation;
@@ -29,7 +31,7 @@ export function getTranslatedSequences(sequence: string, indexOfFirstInvalidChar
     }).filter(([_, translation]) => translation)
   );
   const helm = (sourceFormat === DEFAULT_FORMATS.HELM) ? sequence : result[DEFAULT_FORMATS.HELM];
-  const nucleotides = getNucleotidesSequence(helm, MonomerLibWrapper.getInstance());
+  const nucleotides = getNucleotidesSequence(helm, th.monomerLibWrapper);
   if (nucleotides)
     result['Nucleotides'] = nucleotides;
   return result;
@@ -50,18 +52,21 @@ export function getNucleotidesSequence(helmString: string, monomerLib: MonomerLi
 }
 
 // todo: remove after refactoring as a workaround
-export function convert(sequence: string, sourceFormat: string, targetFormat: string): string | null {
-  const converter = new FormatConverter(sequence, sourceFormat);
+export function convert(
+  sequence: string, sourceFormat: string, targetFormat: string, th: ITranslationHelper
+): string | null {
+  const converter = th.createFormatConverter(sequence, sourceFormat);
   if (targetFormat === NUCLEOTIDES_FORMAT) {
     const helm = converter.convertTo(DEFAULT_FORMATS.HELM);
-    const nucleotides = getNucleotidesSequence(helm, MonomerLibWrapper.getInstance());
+    const nucleotides = getNucleotidesSequence(helm, th.monomerLibWrapper);
     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[];
+export function getSupportedTargetFormats(th: ITranslationHelper): string[] {
+  const supportedTargetFormats = Object.keys(th.jsonData.codesToHelmDict)
+    .concat([DEFAULT_FORMATS.HELM, NUCLEOTIDES_FORMAT]).sort() as string[];
   return supportedTargetFormats;
 }