@datagrok/sequence-translator 1.2.6 → 1.2.9

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;
-  },
-};

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

@@ -1,111 +0,0 @@
-import * as grok from 'datagrok-api/grok';
-import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
-// @ts-ignore
-import * as svg from 'save-svg-as-png';
-import $ from 'cash-dom';
-
-import {isOverhang} from './helpers';
-import {axolabsStyleMap} from '../data-loading-utils/json-loader';
-
-export function generateExample(sequenceLength: number, sequenceBasis: string): string {
-  const AXOLABS_MAP = axolabsStyleMap;
-  const uniqueSymbols = AXOLABS_MAP[sequenceBasis].symbols.join('');
-  return uniqueSymbols.repeat(Math.floor(sequenceLength / 4)) + uniqueSymbols.slice(0, sequenceLength % 4);
-}
-
-export function findDuplicates(data: Int32Array | Float32Array | Float64Array | Uint32Array): number[] {
-  return Array.from(new Set(data)).filter((value) => data.indexOf(value) !== data.lastIndexOf(value));
-}
-
-export async function isCurrentUserCreatedThisPattern(patternName: string): Promise<boolean> {
-  return await grok.dapi.users.current().then((user) => {
-    const [firstName, lastName] = getUserName(patternName);
-    return (user.firstName !== firstName || user.lastName !== lastName);
-  });
-}
-
-export function getShortName(patternName: string): string {
-  let first = patternName.length + 1;
-  for (let i = 0; i < patternName.length; i++) {
-    if (patternName[i] === '(') {
-      first = i;
-      break;
-    }
-  }
-  return patternName.slice(0, first - 1);
-}
-
-function getUserName(patternName: string): string[] {
-  let first = -1;
-  for (let i = 0; i < patternName.length; i++) {
-    if (patternName[i] === '(') {
-      first = i;
-      break;
-    }
-  }
-  return (first === -1) ? ['', ''] : patternName.slice(first + 9, patternName.length - 1).split(' ').slice(1);
-}
-
-export function translateSequence(
-  sequence: string,
-  bases: DG.InputBase[],
-  ptoLinkages: DG.InputBase[],
-  startModification: DG.InputBase,
-  endModification: DG.InputBase,
-  firstPtoExist: boolean): string {
-  let i: number = -1;
-  let mainSequence = sequence.replace(/[AUGC]/g, function(x: string) {
-    i++;
-    const AXOLABS_MAP = axolabsStyleMap;
-
-    const baseChoices: string[] = Object.keys(AXOLABS_MAP);
-    // const defaultBase: string = baseChoices[0];
-    const indexOfSymbol = AXOLABS_MAP['RNA']['symbols'].indexOf(x);
-    let symbol = AXOLABS_MAP[bases[i].value]['symbols'][indexOfSymbol];
-    if (isOverhang(bases[i].value)) {
-      if (i < sequence.length / 2 && !isOverhang(bases[i + 1].value))
-        symbol = symbol + x + 'f';
-      else if (i > sequence.length / 2 && !isOverhang(bases[i - 1].value))
-        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);
-  if (mainSequence.slice(mainSequence.length - 7).split('mU').length === 3)
-    mainSequence = mainSequence.slice(0, mainSequence.length - 4) + '(uu)';
-  return startModification.value + (firstPtoExist ? 's' : '') + mainSequence + endModification.value;
-}
-
-export function addColumnWithIds(tableName: string, columnName: string, patternName: string) {
-  const nameOfNewColumn = 'ID ' + patternName;
-  const columns = grok.shell.table(tableName).columns;
-  if (columns.contains(nameOfNewColumn))
-    columns.remove(nameOfNewColumn);
-  const columnWithIds = columns.byName(columnName);
-  return columns.addNewString(nameOfNewColumn).init((i: number) => {
-    return (columnWithIds.getString(i) === '') ? '' : columnWithIds.get(i) + '_' + patternName;
-  });
-}
-
-export function addColumnWithTranslatedSequences(
-  tableName: string,
-  columnName: string,
-  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;
-  if (columns.contains(nameOfNewColumn))
-    columns.remove(nameOfNewColumn);
-  const columnWithInputSequences = columns.byName(columnName);
-  return columns.addNewString(nameOfNewColumn).init((i: number) => {
-    return columnWithInputSequences.getString(i) === '' ?
-      '' :
-      translateSequence(columnWithInputSequences.getString(i), bases, ptoLinkages, startModification, endModification,
-        firstPtoExist);
-  });
-}

package/src/view/app-ui.ts

@@ -1,193 +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 {TAB, APP} from './const/ui';
-import {TranslatorLayoutHandler} from './apps/oligo-translator';
-import {StructureLayoutHandler} from './apps/oligo-structure';
-import {PatternLayoutHandler} from './apps/oligo-pattern';
-import {MonomerLibViewer} from './monomer-lib-viewer/viewer';
-import {_package} from '../package';
-import {tryCatch} from '../model/helpers';
-
-type ViewFactories = {[name: string]: () => DG.View};
-
-export abstract class AppUIBase {
-  constructor(protected appName: string, protected parentAppName?: string) { }
-  abstract addView(): Promise<void>;
-
-  async createAppLayout(): Promise<void> {
-    const pi: DG.TaskBarProgressIndicator = DG.TaskBarProgressIndicator.create(`Loading ${this.appName}...`);
-
-    let currentView = grok.shell.v?.root;
-    if (currentView)
-      ui.setUpdateIndicator(currentView, true);
-
-    await tryCatch(async () => {
-      await this.addView();
-    }, () => pi.close());
-
-    if (currentView)
-      ui.setUpdateIndicator(currentView, false);
-  }
-}
-
-abstract class SimpleAppUIBase extends AppUIBase {
-  constructor(appName: string) {
-    super(appName);
-    this.view = DG.View.create();
-    this.setupView();
-  }
-
-  protected view: DG.View;
-  async addView(): Promise<void> {
-    await this.initView();
-    const name = this.parentAppName ? this.parentAppName + '/' + this.appName : this.appName;
-    this.view.path = `/apps/${_package.name}/${name.replace(/\s/g, '')}/`;
-    grok.shell.addView(this.view);
-  }
-
-  protected abstract getHtml(): Promise<HTMLDivElement>;
-  async initView(): Promise<void> {
-    const html = await this.getHtml();
-    this.view.append(html);
-  }
-
-  protected setupView(): void {
-    this.view.box = true;
-    this.view.name = this.appName;
-
-    const windows = grok.shell.windows;
-    windows.showProperties = false;
-    windows.showToolbox = false;
-    windows.showHelp = false;
-  }
-
-  getView(): DG.View {
-    return this.view;
-  }
-}
-
-export class CombinedAppUI extends AppUIBase {
-  constructor(externalViewFactories: ViewFactories) {
-    super(APP.COMBINED)
-    this.externalViewFactories = externalViewFactories;
-    const factories = this.getViewFactories();
-    this.multiView = new DG.MultiView({viewFactories: factories}); 
-  }
-
-  private multiView: DG.MultiView;
-  private externalViewFactories?: ViewFactories;
-
-  private getViewFactories(): ViewFactories {
-    function viewFactory(uiConstructor: new (view: DG.View) => SimpleAppUIBase): () => DG.View {
-      const view = DG.View.create();
-      const translateUI = new uiConstructor(view);
-      // intentonally don't await for the promise
-      translateUI.initView();
-      return () => translateUI.getView();
-    }
-
-    let result: {[key: string]: () => DG.View } = {
-      [TAB.TRANSLATOR]: viewFactory(OligoTranslatorUI),
-      [TAB.PATTERN]: viewFactory(OligoPatternUI),
-      [TAB.STRUCTRE]: viewFactory(OligoStructureUI),
-    }
-
-    if (this.externalViewFactories)
-      result = Object.assign({}, result, this.externalViewFactories);
-
-    return result
-  }
-
-  private getPath(): string {
-    let name = this.multiView.tabs.currentPane.name;
-    name = name.charAt(0).toUpperCase() + name.substring(1).toLowerCase();
-    const path = `/apps/${_package.name}/OligoToolkit/${name}`;
-    return path;
-  }
-
-  private setUrl(): void {
-    this.multiView.path = this.getPath();
-  }
-
-  async addView(): Promise<void> {
-    this.multiView.tabs.onTabChanged.subscribe(() => this.setUrl());
-    this.setUrl();
-    grok.shell.addView(this.multiView);
-  }
-}
-
-/** For plugins from external packages */
-export class ExternalPluginUI extends SimpleAppUIBase {
-  constructor(viewName: string, layout: HTMLDivElement) {
-    super(viewName);
-    this.layout = layout;
-  }
-  private layout: HTMLDivElement;
-
-  protected getHtml(): Promise<HTMLDivElement> {
-    return Promise.resolve(this.layout);
-  }
-}
-
-export class AppUIFactory {
-  private constructor() {}
-
-  static getUI(appName: string): SimpleAppUIBase {
-    switch (appName) {
-      case APP.TRANSLATOR:
-        return new OligoTranslatorUI();
-      case APP.PATTERN:
-        return new OligoPatternUI();
-      case APP.STRUCTRE:
-        return new OligoStructureUI();
-      default:
-        throw new Error(`Unknown app name: ${appName}`);
-    }
-  }
-}
-
-class OligoTranslatorUI extends SimpleAppUIBase {
-  constructor() {
-    super(APP.TRANSLATOR);
-
-    const viewMonomerLibIcon = ui.iconFA('book', MonomerLibViewer.view, 'View monomer library');
-    this.topPanel = [
-      viewMonomerLibIcon,
-    ];
-    this.view.setRibbonPanels([this.topPanel]);
-    this.ui = new TranslatorLayoutHandler();
-  }
-
-  private readonly topPanel: HTMLElement[];
-  private readonly ui: TranslatorLayoutHandler;
-
-  protected getHtml(): Promise<HTMLDivElement> {
-    return this.ui.getHtmlElement();
-  };
-}
-
-class OligoPatternUI extends SimpleAppUIBase {
-  constructor() {
-    super(APP.PATTERN);
-    this.ui = new PatternLayoutHandler();
-  }
-  private readonly ui: PatternLayoutHandler;
-  protected getHtml(): Promise<HTMLDivElement> {
-    return Promise.resolve(this.ui.htmlDivElement);
-  }
-}
-
-class OligoStructureUI extends SimpleAppUIBase {
-  constructor() {
-    super(APP.STRUCTRE)
-    this.ui = new StructureLayoutHandler();
-  }
-  private readonly ui: StructureLayoutHandler;
-
-  protected getHtml(): Promise<HTMLDivElement> {
-    return this.ui.getHtmlDivElement();
-  }
-}