@datagrok/sequence-translator 1.2.7 → 1.3.0

package/src/tests/formats-support.ts

@@ -4,11 +4,11 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {before, category, expect, test} from '@datagrok-libraries/utils/src/test';
-import {DEFAULT_FORMATS} from '../model/const';
-import {getJsonData} from '../model/data-loading-utils/json-loader';
+import {DEFAULT_FORMATS} from '../apps/common/model/const';
+import {loadJsonData} from '../apps/common/model/data-loader/json-loader';
 import {formatsToHelm} from './const';
-import {SequenceValidator} from '../model/parsing-validation/sequence-validator';
-import {getTranslatedSequences} from '../model/translator-app/conversion-utils';
+import {SequenceValidator} from '../apps/common/model/parsing-validation/sequence-validator';
+import {getTranslatedSequences} from '../apps/translator/model/conversion-utils';
 import {_package} from '../package';
 
 function getTranslationObject(sequence: string, format: string): {[format: string]: string} {
@@ -19,11 +19,11 @@ function getTranslationObject(sequence: string, format: string): {[format: strin
 const inputs = {
   [DEFAULT_FORMATS.AXOLABS]: 'Afcgacsu',
   [DEFAULT_FORMATS.HELM]: 'RNA1{[fR](A)p.[25r](C)p.[25r](G)p.[25r](A)p.[25r](C)[sp].[25r](U)}$$$$'
-}
+};
 
 category('Formats support', () => {
   before(async () => {
-    await getJsonData();
+    await loadJsonData();
     await _package.initMonomerLib();
   });
 

package/src/tests/formats-to-helm.ts

@@ -4,9 +4,9 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {before, category, expect, test} from '@datagrok-libraries/utils/src/test';
-import {DEFAULT_FORMATS} from '../model/const';
-import {FormatConverter} from '../model/translator-app/format-converter';
-import {getJsonData} from '../model/data-loading-utils/json-loader';
+import {DEFAULT_FORMATS} from '../apps/common/model/const';
+import {FormatConverter} from '../apps/translator/model/format-converter';
+import {loadJsonData} from '../apps/common/model/data-loader/json-loader';
 import {formatsToHelm} from './const';
 import {_package} from '../package';
 
@@ -20,7 +20,7 @@ function getFromat(helm: string, format: string): string {
 
 category('Formats to HELM', () => {
   before(async () => {
-    await getJsonData();
+    await loadJsonData();
     await _package.initMonomerLib();
   });
 
@@ -37,7 +37,7 @@ category('Formats to HELM', () => {
 
 category('HELM to Formats', () => {
   before(async () => {
-    await getJsonData();
+    await loadJsonData();
     await _package.initMonomerLib();
   });
 

package/src/tests/helm-to-nucleotides.ts

@@ -1,18 +1,13 @@
-/* Do not change these import lines to match external modules in webpack configuration */
-import * as grok from 'datagrok-api/grok';
-import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
-
 import {before, category, expect, test} from '@datagrok-libraries/utils/src/test';
-import {getNucleotidesSequence} from '../model/translator-app/conversion-utils';
-import {getJsonData} from '../model/data-loading-utils/json-loader';
+import {getNucleotidesSequence} from '../apps/translator/model/conversion-utils';
+import {loadJsonData} from '../apps/common/model/data-loader/json-loader';
 import {helmToNucleotides} from './const';
 import {_package} from '../package';
-import {MonomerLibWrapper} from '../model/monomer-lib/lib-wrapper';
+import {MonomerLibWrapper} from '../apps/common/model/monomer-lib/lib-wrapper';
 
 category('HELM to Nucleotides', () => {
   before(async () => {
-    await getJsonData();
+    await loadJsonData();
     await _package.initMonomerLib();
   });
 
@@ -22,5 +17,5 @@ category('HELM to Nucleotides', () => {
       const result = getNucleotidesSequence(helm, MonomerLibWrapper.getInstance());
       expect(result, expected);
     });
-  })
+  });
 });

package/tsconfig.json

@@ -4,15 +4,9 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es2022",
-    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "module": "es2022",
-    /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
-    /* Specify library files to be included in the compilation. */
+    "target": "es2020",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "es2020",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "lib": ["ES2022", "ES2022.String", "dom"],      /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */

package/webpack.config.js

@@ -2,6 +2,9 @@ const path = require('path');
 const packageName = path.parse(require('./package.json').name).name.toLowerCase().replace(/-/g, '');
 
 module.exports = {
+  cache: {
+    type: 'filesystem',
+  },
   mode: 'development',
   entry: {
     package: ['./src/package.ts'],

package/files/axolabs-style.json

@@ -1,97 +0,0 @@
-{
-  "RNA": {
-    "fullName": "RNA nucleotides",
-    "symbols": ["A", "C", "G", "U"],
-    "color": "rgb(255,230,153)"
-  },
-  "DNA": {
-    "fullName": "DNA nucleotides",
-    "symbols": ["dA", "dC", "dG", "dT"],
-    "color": "rgb(66, 120, 245)"
-  },
-  "2'-Fluoro": {
-    "fullName": "2'-Fluoro nucleotides",
-    "symbols": ["Af", "Cf", "Gf", "Uf"],
-    "color": "rgb(95, 212, 245)"
-  },
-  "2'-O-Methyl": {
-    "fullName": "2'-O-Methyl nucleotides",
-    "symbols": ["a", "c", "g", "u"],
-    "color": "rgb(150, 95, 245)"
-  },
-  "2'-O-MOE": {
-    "fullName": "2'-O-MOE nucleotides (including 5-Methyl C)",
-    "symbols": ["Am", "Cm", "Gm", "Tm"],
-    "color": "rgb(129, 199, 130)"
-  },
-  "GNA": {
-    "fullName": "Glycol nucleic acid",
-    "symbols": ["(GNA-A)", "(GNA-C)", "(GNA-G)", "(GNA-T)"],
-    "color": "rgb(199, 169, 129)"
-  },
-  "LNA": {
-    "fullName": "Locked nucleic acid (including 5-Methyl C)",
-    "symbols": ["Ab", "Cb", "Gb", "Tb"],
-    "color": "rgb(250, 185, 182)"
-  },
-  "UNA": {
-    "fullName": "Unlocked nucleotides",
-    "symbols": ["Ao", "Co", "Go", "Uo"],
-    "color": "rgb(237, 104, 184)"
-  },
-  "A": {
-    "fullName": "Adenosine",
-    "symbols": ["a"],
-    "color": "rgb(255,230,153)"
-  },
-  "C": {
-    "fullName": "Cytidine",
-    "symbols": ["c"],
-    "color": "rgb(255,230,153)"
-  },
-  "G": {
-    "fullName": "Guanosine",
-    "symbols": ["g"],
-    "color": "rgb(255,230,153)"
-  },
-  "U": {
-    "fullName": "Uridine",
-    "symbols": ["u"],
-    "color": "rgb(255,230,153)"
-  },
-  "X-New": {
-    "fullName": "",
-    "symbols": ["X"],
-    "color": "rgb(196, 91, 252)"
-  },
-  "Y-New": {
-    "fullName": "",
-    "symbols": ["Y"],
-    "color": "rgb(150, 177, 255)"
-  },
-  "Z-New": {
-    "fullName": "",
-    "symbols": ["Z"],
-    "color": "rgb(11, 222, 71)"
-  },
-  "invAb": {
-    "fullName": "Inverted abasic capped",
-    "symbols": ["(invAb)"],
-    "color": "rgb(243, 153, 247)"
-  },
-  "5'-vinylps": {
-    "fullName": "5'-vinylphosphonate-2'-OMe-uridine",
-    "symbols": ["(vinu)"],
-    "color": "rgb(99, 3, 40)"
-  },
-  "invAb(o)": {
-    "fullName": "Inverted abasic capped (overhang)",
-    "symbols": ["(invAb)"],
-    "color": "rgb(240, 224, 108)"
-  },
-  "2'-OMe-U(o)": {
-    "fullName": "Nucleotide Uridine with 2'O-Methyl protection (overhang)",
-    "symbols": ["mU"],
-    "color": "rgb(190, 237, 123)"
-  }
-}

package/src/model/data-loading-utils/json-loader.ts

@@ -1,38 +0,0 @@
-/* Do not change these import lines to match external modules in webpack configuration */
-import * as grok from 'datagrok-api/grok';
-import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
-
-import {APP_PATH, AXOLABS_STYLE_FILENAME, CODES_TO_HELM_DICT_FILENAME, CODES_TO_SYMBOLS_FILENAME, MONOMERS_WITH_PHOSPHATE_LINKERS} from './const';
-import {AxolabsStyle, FormatToHELMDict, CodeToSymbol} from './types';
-
-const fileSource = new DG.FileSource(APP_PATH);
-
-export let axolabsStyleMap: AxolabsStyle;
-export let codesToHelmDictionary: FormatToHELMDict;
-export let codesToSymbolsDictionary: CodeToSymbol;
-export let monomersWithPhosphateLinkers: {[key: string]: string[]};
-
-export async function getJsonData(): Promise<void> {
-  const data = [axolabsStyleMap, codesToHelmDictionary, codesToSymbolsDictionary, monomersWithPhosphateLinkers];
-
-  if (data.every((item) => item !== undefined))
-    return;
-
-  axolabsStyleMap = await parse(AXOLABS_STYLE_FILENAME);
-  codesToHelmDictionary = await parse(CODES_TO_HELM_DICT_FILENAME);
-  codesToSymbolsDictionary = await parse(CODES_TO_SYMBOLS_FILENAME);
-  monomersWithPhosphateLinkers = await parse(MONOMERS_WITH_PHOSPHATE_LINKERS);
-}
-
-async function parse(path: string): Promise<any> {
-  let parsedJson: string;
-  try {
-    parsedJson = JSON.parse(await fileSource.readAsText(path))
-  } catch (err: any) {
-    const errMsg: string = err.hasOwnProperty('message') ? err.message : err.toString();
-    throw new Error(`Error loading json from ${path}:` + errMsg);
-  }
-  return parsedJson;
-}
-

package/src/model/pattern-app/const.ts

@@ -1,33 +0,0 @@
-export const DEFAULT_PTO: boolean = true;
-export const DEFAULT_SEQUENCE_LENGTH: number = 23;
-export const MAX_SEQUENCE_LENGTH: number = 35;
-export const USER_STORAGE_KEY: string = 'SequenceTranslator';
-export const EXAMPLE_MIN_WIDTH: string = '400px';
-
-export const enum JSON_FIELD {
-  SS_BASES = 'ssBases',
-  AS_BASES = 'asBases',
-  SS_PTO = 'ssPtoLinkages',
-  AS_PTO = 'asPtoLinkages',
-  SS_3 = 'ssThreeModification',
-  SS_5 = 'ssFiveModification',
-  AS_3 = 'asThreeModification',
-  AS_5 = 'asFiveModification',
-  COMMENT = 'comment',
-};
-
-export const SS = 'SS' as const;
-export const AS = 'AS' as const;
-export const STRANDS = [SS, AS];
-export const STRAND_NAME = {
-  [SS]: 'Sense strand',
-  [AS]: 'Anti sense',
-}
-
-export const THREE_PRIME = 'THREE_PRIME' as const;
-export const FIVE_PRIME = 'FIVE_PRIME' as const;
-export const TERMINAL_KEYS = [THREE_PRIME, FIVE_PRIME];
-export const TERMINAL = {
-  [THREE_PRIME]: 3,
-  [FIVE_PRIME]: 5,
-}

package/src/model/pattern-app/draw-svg.ts

@@ -1,193 +0,0 @@
-import {NUCLEOTIDES} from '../const';
-import {isOverhang, svg, textWidth, countOverhangsOnTheRightEdge, baseColor, textInsideCircle,
-  fontColorVisibleOnBackground, isOneDigitNumber} from './helpers';
-
-const BASE_RADIUS = 15;
-const BASE_DIAMETER = 2 * BASE_RADIUS;
-const shiftToAlignTwoDigitNumberNearCircle = -10;
-const shiftToAlignOneDigitNumberNearCircle = -5;
-const LEGEND_RADIUS = 6;
-const PS_LINKAGE_RADIUS = 5;
-const BASE_FONT_SIZE = 17;
-const LEGEND_FONT_SIZE = 14;
-const PS_LINKAGE_COLOR = 'red';
-const FONT_COLOR = 'var(--grey-6)';
-const TITLE_FONT_COLOR = 'black';
-const MODIFICATIONS_COLOR = 'red';
-const SS_LEFT_TEXT = 'SS: 5\'';
-const AS_LEFT_TEXT = 'AS: 3\'';
-const SS_RIGHT_TEXT = '3\'';
-const AS_RIGHT_TEXT = '5\'';
-
-const WIDTH_OF_LEFT_TEXT = Math.max(
-  textWidth(SS_LEFT_TEXT, BASE_FONT_SIZE),
-  textWidth(AS_LEFT_TEXT, BASE_FONT_SIZE),
-);
-
-const WIDTH_OF_RIGHT_TEXT = Math.max(
-  textWidth(SS_RIGHT_TEXT, BASE_FONT_SIZE),
-  textWidth(AS_RIGHT_TEXT, BASE_FONT_SIZE),
-);
-
-const X = {
-  TITLE: BASE_RADIUS, // Math.round(width / 4),
-  LEFT_TEXTS: 0,
-};
-const X_OF_LEFT_MODIFICATIONS = X.LEFT_TEXTS + WIDTH_OF_LEFT_TEXT - 5;
-
-const Y = {
-  TITLE: BASE_RADIUS,
-  SS_INDICES: 2 * BASE_RADIUS,
-  SS_CIRCLES: 3.5 * BASE_RADIUS,
-  SS_TEXTS: 4 * BASE_RADIUS,
-  AS_CIRCLES: 6.5 * BASE_RADIUS,
-  AS_TEXTS: 7 * BASE_RADIUS,
-  AS_INDICES: 8.5 * BASE_RADIUS,
-  comment: (asExists: boolean) => (asExists) ? 11 * BASE_RADIUS : 8.5 * BASE_RADIUS,
-  circlesInLegends: (asExists: boolean) => (asExists) ? 9.5 * BASE_RADIUS : 6 * BASE_RADIUS,
-  textLegend: (asExists: boolean) => (asExists) ? 10 * BASE_RADIUS - 3 : Y.AS_CIRCLES - 3,
-  svgHeight: (asExists: boolean) => (asExists) ? 11 * BASE_RADIUS : 9 * BASE_RADIUS,
-};
-
-export function drawAxolabsPattern(
-  patternName: string, asExists: boolean, ssBases: string[],
-  asBases: string[], ssPtoStatuses: boolean[], asPtoStatuses: boolean[],
-  ss3Modification: string, ss5Modification: string,
-  as3Modification: string, as5Modification: string, comment: string,
-  enumerateModifications: string[],
-): Element {
-  function equidistantXForLegend(index: number): number {
-    return Math.round((index + startFrom) * width / (uniqueBases.length + startFrom) + LEGEND_RADIUS);
-  }
-
-  function xOfBaseCircles(index: number, rightOverhangs: number): number {
-    return widthOfRightModification +
-      (resultingNumberOfNucleotidesInStrands - index + rightOverhangs + 1) * BASE_DIAMETER;
-  }
-
-  function shiftToAlignNumberNearCircle(bases: string[], generalIndex: number, nucleotideIndex: number): number {
-    return (isOneDigitNumber(nucleotideIndex) || NUCLEOTIDES.includes(bases[generalIndex])) ?
-      shiftToAlignOneDigitNumberNearCircle : shiftToAlignTwoDigitNumberNearCircle;
-  }
-
-  ssBases = ssBases.reverse();
-  ssPtoStatuses = ssPtoStatuses.reverse();
-
-  const ssRightOverhangs = countOverhangsOnTheRightEdge(ssBases);
-  const asRightOverhangs = countOverhangsOnTheRightEdge(asBases);
-
-  const resultingNumberOfNucleotidesInStrands = Math.max(
-    ssBases.length - ssRightOverhangs,
-    asBases.length - asRightOverhangs,
-  );
-
-  const widthOfRightOverhangs = Math.max(ssRightOverhangs, asRightOverhangs);
-  const widthOfBases = BASE_DIAMETER * (resultingNumberOfNucleotidesInStrands + widthOfRightOverhangs);
-
-  const widthOfLeftModification = Math.max(
-    textWidth(ss3Modification, BASE_FONT_SIZE),
-    textWidth(as5Modification, BASE_FONT_SIZE),
-  );
-
-  const widthOfRightModification = Math.max(
-    textWidth(ss5Modification, BASE_FONT_SIZE),
-    textWidth(as3Modification, BASE_FONT_SIZE),
-  );
-
-  const uniqueBases = asExists ?
-    [...new Set(ssBases.concat(asBases))] :
-    [...new Set(ssBases)];
-
-  const isPtoExist = asExists ?
-    ssPtoStatuses.concat(asPtoStatuses).includes(true) :
-    ssPtoStatuses.includes(true);
-
-  const startFrom = isPtoExist ? 1 : 0;
-
-  const xOfSsRightModifications = ssRightOverhangs * BASE_DIAMETER + xOfBaseCircles(-0.5, 0);
-  const xOfAsRightModifications = asRightOverhangs * BASE_DIAMETER + xOfBaseCircles(-0.5, 0);
-
-  const xOfRightTexts = Math.max(xOfSsRightModifications, xOfAsRightModifications) + widthOfLeftModification +
-    BASE_DIAMETER * widthOfRightOverhangs;
-
-  const width = WIDTH_OF_LEFT_TEXT + widthOfLeftModification + widthOfBases + widthOfRightModification +
-                WIDTH_OF_RIGHT_TEXT + BASE_DIAMETER;
-  const image = svg.render(width, Y.svgHeight(asExists));
-
-  image.append(
-    svg.text(SS_LEFT_TEXT, X.LEFT_TEXTS, Y.SS_TEXTS, BASE_FONT_SIZE, FONT_COLOR),
-    asExists ? svg.text(AS_LEFT_TEXT, X.LEFT_TEXTS, Y.AS_TEXTS, BASE_FONT_SIZE, FONT_COLOR) : '',
-    svg.text(SS_RIGHT_TEXT, xOfRightTexts, Y.SS_TEXTS, BASE_FONT_SIZE, FONT_COLOR),
-    asExists ? svg.text(AS_RIGHT_TEXT, xOfRightTexts, Y.AS_TEXTS, BASE_FONT_SIZE, FONT_COLOR) : '',
-    svg.text(ss5Modification, X_OF_LEFT_MODIFICATIONS, Y.SS_TEXTS, BASE_FONT_SIZE, MODIFICATIONS_COLOR),
-    asExists ? svg.text(as3Modification, X_OF_LEFT_MODIFICATIONS, Y.AS_TEXTS, BASE_FONT_SIZE, MODIFICATIONS_COLOR) : '',
-    svg.text(ss3Modification, xOfSsRightModifications, Y.SS_TEXTS, BASE_FONT_SIZE, MODIFICATIONS_COLOR),
-    asExists ? svg.text(as5Modification, xOfAsRightModifications, Y.AS_TEXTS, BASE_FONT_SIZE, MODIFICATIONS_COLOR) : '',
-    svg.text(comment, X.LEFT_TEXTS, Y.comment(asExists), LEGEND_FONT_SIZE, FONT_COLOR),
-    isPtoExist ? svg.star(BASE_RADIUS, Y.circlesInLegends(asExists), PS_LINKAGE_COLOR) : '',
-    isPtoExist ? svg.text('ps linkage', 2 * BASE_RADIUS - 8, Y.textLegend(asExists), LEGEND_FONT_SIZE, FONT_COLOR) : '',
-  );
-
-  const numberOfSsNucleotides = ssBases.filter((value) => !isOverhang(value)).length;
-  let nucleotideCounter = numberOfSsNucleotides;
-  for (let i = ssBases.length - 1; i > -1; i--) {
-    const xOfNumbers = xOfBaseCircles(i, ssRightOverhangs) +
-      shiftToAlignNumberNearCircle(ssBases, ssBases.length - i, numberOfSsNucleotides - nucleotideCounter);
-    if (!isOverhang(ssBases[i]))
-      nucleotideCounter--;
-    const n = (!isOverhang(ssBases[i]) && enumerateModifications.includes(ssBases[i])) ?
-      String(numberOfSsNucleotides - nucleotideCounter) : '';
-    image.append(
-      svg.text(n, xOfNumbers, Y.SS_INDICES, LEGEND_FONT_SIZE, FONT_COLOR),
-      svg.circle(xOfBaseCircles(i, ssRightOverhangs), Y.SS_CIRCLES, BASE_RADIUS, baseColor(ssBases[i])),
-      svg.text(textInsideCircle(ssBases, i), xOfNumbers, Y.SS_TEXTS, BASE_FONT_SIZE,
-        fontColorVisibleOnBackground(ssBases[i])),
-      ssPtoStatuses[i] ?
-        svg.star(xOfBaseCircles(i, ssRightOverhangs) + BASE_RADIUS, Y.SS_TEXTS + PS_LINKAGE_RADIUS, PS_LINKAGE_COLOR) :
-        '',
-    );
-  }
-  image.append(
-    ssPtoStatuses[ssBases.length] ?
-      svg.star(xOfBaseCircles(ssBases.length, ssRightOverhangs) +
-      BASE_RADIUS, Y.SS_TEXTS + PS_LINKAGE_RADIUS, PS_LINKAGE_COLOR) : '',
-  );
-
-  const numberOfAsNucleotides = asBases.filter((value) => !isOverhang(value)).length;
-  if (asExists) {
-    let nucleotideCounter = numberOfAsNucleotides;
-    for (let i = asBases.length - 1; i > -1; i--) {
-      if (!isOverhang(asBases[i]))
-        nucleotideCounter--;
-      const xOfNumbers = xOfBaseCircles(i, asRightOverhangs) +
-        shiftToAlignNumberNearCircle(asBases, i, nucleotideCounter + 1);
-      const n = (!isOverhang(asBases[i]) && enumerateModifications.includes(asBases[i])) ?
-        String(nucleotideCounter + 1) : '';
-      image.append(
-        svg.text(n, xOfNumbers, Y.AS_INDICES, LEGEND_FONT_SIZE, FONT_COLOR),
-        svg.circle(xOfBaseCircles(i, asRightOverhangs), Y.AS_CIRCLES, BASE_RADIUS, baseColor(asBases[i])),
-        svg.text(textInsideCircle(asBases, i),
-          xOfBaseCircles(i, asRightOverhangs) + shiftToAlignNumberNearCircle(asBases, i, nucleotideCounter + 1),
-          Y.AS_TEXTS, BASE_FONT_SIZE, fontColorVisibleOnBackground(asBases[i])),
-        asPtoStatuses[i] ? svg.star(xOfBaseCircles(i, asRightOverhangs) +
-          BASE_RADIUS, Y.AS_TEXTS + PS_LINKAGE_RADIUS, PS_LINKAGE_COLOR) : '',
-      );
-    }
-    image.append(
-      asPtoStatuses[asBases.length] ?
-        svg.star(xOfBaseCircles(asBases.length, asRightOverhangs) + BASE_RADIUS, Y.AS_TEXTS + PS_LINKAGE_RADIUS,
-          PS_LINKAGE_COLOR) : '',
-    );
-  }
-
-  const title = `${patternName} for ${numberOfSsNucleotides}${(asExists ? `/${numberOfAsNucleotides}` : '')}mer`;
-  image.append(svg.text(title, X.TITLE, Y.TITLE, BASE_FONT_SIZE, TITLE_FONT_COLOR));
-  for (let i = 0; i < uniqueBases.length; i++) {
-    image.append(
-      svg.circle(equidistantXForLegend(i), Y.circlesInLegends(asExists), LEGEND_RADIUS, baseColor(uniqueBases[i])),
-      svg.text(uniqueBases[i], equidistantXForLegend(i) + LEGEND_RADIUS + 4, Y.textLegend(asExists), LEGEND_FONT_SIZE,
-        FONT_COLOR),
-    );
-  }
-  return image;
-}

package/src/model/pattern-app/helpers.ts

@@ -1,96 +0,0 @@
-import {NUCLEOTIDES} from '../const';
-import {axolabsStyleMap} from '../data-loading-utils/json-loader';
-
-export function isOverhang(modification: string): boolean {
-  return modification.slice(-3) === '(o)';
-}
-
-export function isOneDigitNumber(n: number): boolean {
-  return n < 10;
-}
-
-// https://uxdesign.cc/star-rating-make-svg-great-again-d4ce4731347e
-export function getPointsToDrawStar(centerX: number, centerY: number): string {
-  const innerCirclePoints = 5; // a 5 point star
-  const innerRadius = 15 / innerCirclePoints;
-  const innerOuterRadiusRatio = 2; // outter circle is x2 the inner
-  const outerRadius = innerRadius * innerOuterRadiusRatio;
-  const angle = Math.PI / innerCirclePoints;
-  const angleOffsetToCenterStar = 60;
-  const totalNumberOfPoints = innerCirclePoints * 2; // 10 in a 5-points star
-
-  let points = '';
-  for (let i = 0; i < totalNumberOfPoints; i++) {
-    const r = (i % 2 === 0) ? outerRadius : innerRadius;
-    const currentX = centerX + Math.cos(i * angle + angleOffsetToCenterStar) * r;
-    const currentY = centerY + Math.sin(i * angle + angleOffsetToCenterStar) * r;
-    points += `${currentX},${currentY} `;
-  }
-  return points;
-}
-
-export function countOverhangsOnTheRightEdge(modifications: string[]): number {
-  let i = 0;
-  while (i < modifications.length && isOverhang(modifications[i]))
-    i++;
-  return (i === modifications.length - 1) ? 0 : i;
-}
-
-export function textWidth(text: string, font: number): number {
-  const context = document.createElement('canvas').getContext('2d');
-  // @ts-ignore
-  context.font = String(font);
-  // @ts-ignore
-  return 2 * context.measureText(text).width;
-}
-
-export function textInsideCircle(bases: string[], index: number): string {
-  return (isOverhang(bases[index]) || !NUCLEOTIDES.includes(bases[index])) ? '' : bases[index];
-}
-
-export function fontColorVisibleOnBackground(base: string): string {
-  const AXOLABS_MAP = axolabsStyleMap;
-  const rgbIntList = AXOLABS_MAP[base].color.match(/\d+/g)!.map((e) => Number(e));
-  return (rgbIntList[0] * 0.299 + rgbIntList[1] * 0.587 + rgbIntList[2] * 0.114) > 186 ? '#33333' : '#ffffff';
-}
-
-export function baseColor(base: string): string {
-  const AXOLABS_MAP = axolabsStyleMap;
-  return AXOLABS_MAP[base].color;
-}
-
-export const svg = {
-  xmlns: 'http://www.w3.org/2000/svg',
-  render: function(width: number, height: number): Element {
-    const e = document.createElementNS(this.xmlns, 'svg');
-    e.setAttribute('id', 'mySvg');
-    e.setAttribute('width', String(width));
-    e.setAttribute('height', String(height));
-    return e;
-  },
-  circle: function(x: number, y: number, radius: number, color: string): Element {
-    const e = document.createElementNS(this.xmlns, 'circle');
-    e.setAttribute('cx', String(x));
-    e.setAttribute('cy', String(y));
-    e.setAttribute('r', String(radius));
-    e.setAttribute('fill', color);
-    return e;
-  },
-  text: function(text: string, x: number, y: number, fontSize: number, color: string): Element {
-    const e = document.createElementNS(this.xmlns, 'text');
-    e.setAttribute('x', String(x));
-    e.setAttribute('y', String(y));
-    e.setAttribute('font-size', String(fontSize));
-    e.setAttribute('font-weight', 'normal');
-    e.setAttribute('font-family', 'Arial');
-    e.setAttribute('fill', color);
-    e.innerHTML = text;
-    return e;
-  },
-  star: function(x: number, y: number, fill: string): Element {
-    const e = document.createElementNS(this.xmlns, 'polygon');
-    e.setAttribute('points', getPointsToDrawStar(x, y));
-    e.setAttribute('fill', fill);
-    return e;
-  },
-};