@datagrok/sequence-translator 1.0.13 → 1.0.14

package/src/axolabs/draw-svg.ts

@@ -1,253 +1,192 @@
-import {axolabsMap} from './constants';
-
-// https://uxdesign.cc/star-rating-make-svg-great-again-d4ce4731347e
-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;
-}
-
-function countOverhangsOnTheRightEdge(modifications: string[]): number {
-  let i = 0;
-  while (i < modifications.length && modifications[i].slice(-3) == '(o)')
-    i++;
-  return (i == modifications.length - 1) ? 0 : i;
-}
-
-function getTextWidth(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;
-}
-
-function getTextInsideCircle(bases: string[], index: number): string {
-  return (bases[index].slice(-3) == '(o)' || !['A', 'G', 'C', 'U', 'T'].includes(bases[index])) ? '' : bases[index];
-}
-
-function getFontColorVisibleOnBackground(rgbString: string): string {
-  const rgbIntList = rgbString.match(/\d+/g)!.map((e) => Number(e));
-  return (rgbIntList[0] * 0.299 + rgbIntList[1] * 0.587 + rgbIntList[2] * 0.114) > 186 ? '#33333' : '#ffffff';
-}
-
-function getBaseColor(base: string): string {
-  return axolabsMap[base]['color'];
-}
+import {NUCLEOTIDES} from '../structures-works/map';
+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[],
-  ssThreeModification: string, ssFiveModification: string,
-  asThreeModification: string, asFiveModification: string, comment: string,
-  enumerateModifications: string[]) {
-  function getEquidistantXForLegend(index: number): number {
-    return Math.round((index + startFrom) * width / (uniqueBases.length + startFrom) + legendRadius);
+  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 getXOfBaseCircles(index: number, rightOverhangs: number): number {
+  function xOfBaseCircles(index: number, rightOverhangs: number): number {
     return widthOfRightModification +
-      (resultingNumberOfNucleotidesInStrands - index + rightOverhangs + 1) * baseDiameter;
+      (resultingNumberOfNucleotidesInStrands - index + rightOverhangs + 1) * BASE_DIAMETER;
   }
 
-  function getShiftToAlignNumberInsideCircle(bases: string[], generalIndex: number, nucleotideIndex: number): number {
-    return (nucleotideIndex < 10 || ['A', 'G', 'C', 'U', 'T'].
-      includes(bases[generalIndex])) ? shiftToAlignOneDigitNumberInsideCircle : shiftToAlignTwoDigitNumberInsideCircle;
+  function shiftToAlignNumberNearCircle(bases: string[], generalIndex: number, nucleotideIndex: number): number {
+    return (isOneDigitNumber(nucleotideIndex) || NUCLEOTIDES.includes(bases[generalIndex])) ?
+      shiftToAlignOneDigitNumberNearCircle : shiftToAlignTwoDigitNumberNearCircle;
   }
 
-  const svg = {
-    xmlns: 'http://www.w3.org/2000/svg',
-    render: function(width: number, height: number) {
-      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) {
-      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) {
-      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) {
-      const e = document.createElementNS(this.xmlns, 'polygon');
-      e.setAttribute('points', getPointsToDrawStar(x, y));
-      e.setAttribute('fill', fill);
-      return e;
-    },
-  };
-
   ssBases = ssBases.reverse();
   ssPtoStatuses = ssPtoStatuses.reverse();
 
-  const baseRadius = 15;
-  const shiftToAlignTwoDigitNumberInsideCircle = -10;
-  const shiftToAlignOneDigitNumberInsideCircle = -5;
-  const legendRadius = 6;
-  const psLinkageRadius = 5;
-  const baseFontSize = 17;
-  const legendFontSize = 14;
-  const psLinkageColor = 'red';
-  const fontColor = 'var(--grey-6)';
-  const titleFontColor = 'black';
-  const modificationsColor = 'red';
-  const ssLeftText = 'SS: 5\'';
-  const asLeftText = 'AS: 3\'';
-  const ssRightText = '3\'';
-  const asRightText = '5\'';
-
   const ssRightOverhangs = countOverhangsOnTheRightEdge(ssBases);
   const asRightOverhangs = countOverhangsOnTheRightEdge(asBases);
-  const resultingNumberOfNucleotidesInStrands =
-    Math.max(ssBases.length - ssRightOverhangs, asBases.length - asRightOverhangs);
-  const baseDiameter = 2 * baseRadius;
-  const widthOfBases =
-    baseDiameter * (resultingNumberOfNucleotidesInStrands + Math.max(ssRightOverhangs, asRightOverhangs));
-  const widthOfLeftModification =
-    Math.max(getTextWidth(ssThreeModification, baseFontSize), getTextWidth(asFiveModification, baseFontSize));
-  const widthOfRightModification =
-    Math.max(getTextWidth(ssFiveModification, baseFontSize), getTextWidth(asThreeModification, baseFontSize));
-  const widthOfLeftText = Math.max(getTextWidth(ssLeftText, baseFontSize), getTextWidth(asLeftText, baseFontSize));
-  const widthOfRightText = Math.max(getTextWidth(ssRightText, baseFontSize), getTextWidth(asRightText, baseFontSize));
-  const width =
-    widthOfLeftText + widthOfLeftModification + widthOfBases +
-    widthOfRightModification + widthOfRightText + baseDiameter;
-  const height = asExists ? 11 * baseRadius : 9 * baseRadius;
-  const xOfTitle = baseRadius; // Math.round(width / 4),
-  const uniqueBases = asExists ? [...new Set(ssBases.concat(asBases))] : [...new Set(ssBases)];
-  const isPtoExist =
-    asExists ? [...new Set(ssPtoStatuses.concat(asPtoStatuses))].includes(true) :
-      [...new Set(ssPtoStatuses)].includes(true);
+
+  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 xOfLeftTexts = 0;
-  const xOfLeftModifications = xOfLeftTexts + widthOfLeftText - 5;
-  const xOfSsRightModifications = ssRightOverhangs * baseDiameter + getXOfBaseCircles(-0.5, 0);
-  const xOfAsRightModifications = asRightOverhangs * baseDiameter + getXOfBaseCircles(-0.5, 0);
-  const xOfRightTexts =
-    Math.max(xOfSsRightModifications, xOfAsRightModifications) +
-      widthOfLeftModification + baseDiameter * (Math.max(ssRightOverhangs, asRightOverhangs));
-  const yOfTitle = baseRadius;
-  const yOfSsNumbers = 2 * baseRadius;
-  const yOfAsNumbers = 8.5 * baseRadius;
-  const yOfSsTexts = 4 * baseRadius;
-  const yOfAsTexts = 7 * baseRadius;
-  const yOfComment = asExists ? 11 * baseRadius : 8.5 * baseRadius;
-  const yOfSsCircles = 3.5 * baseRadius;
-  const yOfAsCircles = 6.5 * baseRadius;
-  const yOfCirclesInLegends = asExists ? 9.5 * baseRadius : 6 * baseRadius;
-  const yOfTextLegend = asExists ? 10 * baseRadius - 3 : yOfAsCircles - 3;
-
-  const image = svg.render(width, height);
+
+  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(ssLeftText, xOfLeftTexts, yOfSsTexts, baseFontSize, fontColor),
-    asExists ? svg.text(asLeftText, xOfLeftTexts, yOfAsTexts, baseFontSize, fontColor) : '',
-    svg.text(ssRightText, xOfRightTexts, yOfSsTexts, baseFontSize, fontColor),
-    asExists ? svg.text(asRightText, xOfRightTexts, yOfAsTexts, baseFontSize, fontColor) : '',
-    svg.text(ssFiveModification, xOfLeftModifications, yOfSsTexts, baseFontSize, modificationsColor),
-    asExists ? svg.text(asThreeModification, xOfLeftModifications, yOfAsTexts, baseFontSize, modificationsColor) : '',
-    svg.text(ssThreeModification, xOfSsRightModifications, yOfSsTexts, baseFontSize, modificationsColor),
-    asExists ? svg.text(asFiveModification, xOfAsRightModifications, yOfAsTexts, baseFontSize, modificationsColor) : '',
-    svg.text(comment, xOfLeftTexts, yOfComment, legendFontSize, fontColor),
-    isPtoExist ? svg.star(baseRadius, yOfCirclesInLegends, psLinkageColor) : '',
-    isPtoExist ? svg.text('ps linkage', 2 * baseRadius - 8, yOfTextLegend, legendFontSize, fontColor) : '',
+    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) : '',
   );
 
-  let numberOfSsNucleotides = 0;
-  for (let i = 0; i < ssBases.length; i++) {
-    if (ssBases[i].slice(-3) != '(o)')
-      numberOfSsNucleotides++;
-  }
+  const numberOfSsNucleotides = ssBases.filter((value) => !isOverhang(value)).length;
   let nucleotideCounter = numberOfSsNucleotides;
   for (let i = ssBases.length - 1; i > -1; i--) {
-    const xOfNumbers = getXOfBaseCircles(i, ssRightOverhangs) +
-      getShiftToAlignNumberInsideCircle(ssBases, ssBases.length - i, numberOfSsNucleotides - nucleotideCounter);
-    if (ssBases[i].slice(-3) != '(o)')
+    const xOfNumbers = xOfBaseCircles(i, ssRightOverhangs) +
+      shiftToAlignNumberNearCircle(ssBases, ssBases.length - i, numberOfSsNucleotides - nucleotideCounter);
+    if (!isOverhang(ssBases[i]))
       nucleotideCounter--;
-    const n = (ssBases[i].slice(-3) != '(o)' && enumerateModifications.includes(ssBases[i])) ?
+    const n = (!isOverhang(ssBases[i]) && enumerateModifications.includes(ssBases[i])) ?
       String(numberOfSsNucleotides - nucleotideCounter) : '';
     image.append(
-      svg.text(n, xOfNumbers, yOfSsNumbers, legendFontSize, fontColor),
-      svg.circle(getXOfBaseCircles(i, ssRightOverhangs), yOfSsCircles, baseRadius, getBaseColor(ssBases[i])),
-      svg.text(getTextInsideCircle(ssBases, i), xOfNumbers, yOfSsTexts, baseFontSize,
-        getFontColorVisibleOnBackground(getBaseColor(ssBases[i]))),
+      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(getXOfBaseCircles(i, ssRightOverhangs) + baseRadius, yOfSsTexts + psLinkageRadius, psLinkageColor) :
+        svg.star(xOfBaseCircles(i, ssRightOverhangs) + BASE_RADIUS, Y.SS_TEXTS + PS_LINKAGE_RADIUS, PS_LINKAGE_COLOR) :
         '',
     );
   }
   image.append(
     ssPtoStatuses[ssBases.length] ?
-      svg.star(getXOfBaseCircles(ssBases.length, ssRightOverhangs) +
-      baseRadius, yOfSsTexts + psLinkageRadius, psLinkageColor) : '',
+      svg.star(xOfBaseCircles(ssBases.length, ssRightOverhangs) +
+      BASE_RADIUS, Y.SS_TEXTS + PS_LINKAGE_RADIUS, PS_LINKAGE_COLOR) : '',
   );
 
-  let numberOfAsNucleotides = 0;
-  for (let i = 0; i < asBases.length; i++) {
-    if (asBases[i].slice(-3) != '(o)')
-      numberOfAsNucleotides++;
-  }
+  const numberOfAsNucleotides = asBases.filter((value) => !isOverhang(value)).length;
   if (asExists) {
     let nucleotideCounter = numberOfAsNucleotides;
     for (let i = asBases.length - 1; i > -1; i--) {
-      if (asBases[i].slice(-3) != '(o)')
+      if (!isOverhang(asBases[i]))
         nucleotideCounter--;
-      const xOfNumbers = getXOfBaseCircles(i, asRightOverhangs) +
-        getShiftToAlignNumberInsideCircle(asBases, i, nucleotideCounter + 1);
-      const n = (asBases[i].slice(-3) != '(o)' && enumerateModifications.includes(asBases[i])) ?
+      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, yOfAsNumbers, legendFontSize, fontColor),
-        svg.circle(getXOfBaseCircles(i, asRightOverhangs), yOfAsCircles, baseRadius, getBaseColor(asBases[i])),
-        svg.text(getTextInsideCircle(asBases, i),
-          getXOfBaseCircles(i, asRightOverhangs) + getShiftToAlignNumberInsideCircle(asBases, i, nucleotideCounter + 1),
-          yOfAsTexts, baseFontSize, getFontColorVisibleOnBackground(getBaseColor(asBases[i]))),
-        asPtoStatuses[i] ? svg.star(getXOfBaseCircles(i, asRightOverhangs) +
-          baseRadius, yOfAsTexts + psLinkageRadius, psLinkageColor) : '',
+        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(getXOfBaseCircles(asBases.length, asRightOverhangs) +
-         baseRadius, yOfAsTexts + psLinkageRadius, psLinkageColor) : '',
+        svg.star(xOfBaseCircles(asBases.length, asRightOverhangs) + BASE_RADIUS, Y.AS_TEXTS + PS_LINKAGE_RADIUS,
+          PS_LINKAGE_COLOR) : '',
     );
   }
 
-  const title = patternName + ' for ' +
-    String(numberOfSsNucleotides) + (asExists ? '/' + String(numberOfAsNucleotides) : '') + 'mer';
-  image.append(svg.text(title, xOfTitle, yOfTitle, baseFontSize, titleFontColor));
+  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(getEquidistantXForLegend(i), yOfCirclesInLegends, legendRadius, getBaseColor(uniqueBases[i])),
-      svg.text(uniqueBases[i], getEquidistantXForLegend(i) +
-        legendRadius + 4, yOfTextLegend, legendFontSize, fontColor),
+      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/axolabs/helpers.ts

@@ -0,0 +1,94 @@
+import {AXOLABS_MAP} from './constants';
+import {NUCLEOTIDES} from '../structures-works/map';
+
+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 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 {
+  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/main/main-view.ts

@@ -2,20 +2,35 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {convertSequence, undefinedInputSequence, isValidSequence} from '../structures-works/sequence-codes-tools';
-import {map, MODIFICATIONS} from '../structures-works/map';
+import {map} from '../structures-works/map';
+import {MODIFICATIONS} from '../structures-works/const';
 import {sequenceToSmiles, sequenceToMolV3000} from '../structures-works/from-monomers';
 import $ from 'cash-dom';
 import {download} from '../helpers';
 
-const defaultInput = 'fAmCmGmAmCpsmU';
-const sequenceWasCopied = 'Copied';
+const defaultInput = 'fAmCmGmAmCpsmU'; // todo: capitalize constants
+const sequenceWasCopied = 'Copied'; // todo: wrap hardcoded literals into constants
 const tooltipSequence = 'Copy sequence';
 
-export function mainView() {
-  function updateTableAndMolecule(sequence: string, inputFormat: string): void {
+export async function mainView(): Promise<HTMLDivElement> {
+  const monomersLibAddress = 'System:AppData/SequenceTranslator/helmLib.json';
+  async function updateTableAndMolecule(sequence: string, inputFormat: string): Promise<void> {
     moleculeSvgDiv.innerHTML = '';
     outputTableDiv.innerHTML = '';
     const pi = DG.TaskBarProgressIndicator.create('Rendering table and molecule...');
+    let errorsExist = false;
+
+    // external helm-like monomers library
+    const fileExists = await grok.dapi.files.exists(monomersLibAddress);
+    if (!fileExists) {
+      // todo: improve behaviour in this case
+      grok.shell.warning('Please, provide the file with monomers library as System:AppData/SequenceTranslator/helmLib.json');
+      pi.close();
+      return;
+    }
+
+    const monomersLib = await grok.dapi.files.readAsText(monomersLibAddress);
+
     try {
       sequence = sequence.replace(/\s/g, '');
       const output = isValidSequence(sequence, null);
@@ -31,16 +46,16 @@ export function mainView() {
         tableRows.push({
           'key': key,
           'value': ('indexOfFirstNotValidChar' in outputSequenceObj) ?
-            ui.divH([
-              ui.divText(sequence.slice(0, indexOfFirstNotValidChar), {style: {color: 'grey'}}),
-              ui.tooltip.bind(
-                ui.divText(sequence.slice(indexOfFirstNotValidChar), {style: {color: 'red'}}),
-                'Expected format: ' + JSON.parse(outputSequenceObj.indexOfFirstNotValidChar!).synthesizer +
-                '. See tables with valid codes on the right',
-              ),
-            ]) : //@ts-ignore
-            ui.link(outputSequenceObj[key], () => navigator.clipboard.writeText(outputSequenceObj[key])
-              .then(() => grok.shell.info(sequenceWasCopied)), tooltipSequence, ''),
+          ui.divH([
+            ui.divText(sequence.slice(0, indexOfFirstNotValidChar), {style: {color: 'grey'}}),
+            ui.tooltip.bind(
+              ui.divText(sequence.slice(indexOfFirstNotValidChar), {style: {color: 'red'}}),
+              'Expected format: ' + JSON.parse(outputSequenceObj.indexOfFirstNotValidChar!).synthesizer +
+              '. See tables with valid codes on the right',
+            ),
+          ]) : //@ts-ignore
+          ui.link(outputSequenceObj[key], () => navigator.clipboard.writeText(outputSequenceObj[key])
+            .then(() => grok.shell.info(sequenceWasCopied)), tooltipSequence, ''),
         });
       }
 
@@ -55,8 +70,11 @@ export function mainView() {
         const canvas = ui.canvas(300, 170);
         canvas.addEventListener('click', () => {
           const canv = ui.canvas($(window).width(), $(window).height());
-          const mol = sequenceToMolV3000(inputSequenceField.value.replace(/\s/g, ''), false, true,
-            output.synthesizer![0]);
+          const mol = sequenceToMolV3000(
+            inputSequenceField.value.replace(/\s/g, ''), false, true,
+            output.synthesizer![0],
+          );
+          console.log(mol);
           // @ts-ignore
           OCL.StructureView.drawMolecule(canv, OCL.Molecule.fromMolfile(mol), {suppressChiralText: true});
           ui.dialog('Molecule: ' + inputSequenceField.value)
@@ -66,7 +84,7 @@ export function mainView() {
         $(canvas).on('mouseover', () => $(canvas).css('cursor', 'zoom-in'));
         $(canvas).on('mouseout', () => $(canvas).css('cursor', 'default'));
         const mol = sequenceToMolV3000(inputSequenceField.value.replace(/\s/g, ''), false, true,
-        output.synthesizer![0]);
+          output.synthesizer![0]);
         // @ts-ignore
         OCL.StructureView.drawMolecule(canvas, OCL.Molecule.fromMolfile(mol), {suppressChiralText: true});
         moleculeSvgDiv.append(canvas);
@@ -151,9 +169,11 @@ export function mainView() {
     $(codesTablesDiv).hide(),
   );
 
-  const downloadMolFileIcon = ui.iconFA('download', () => {
+  const downloadMolFileIcon = ui.iconFA('download', async () => {
     const clearSequence = inputSequenceField.value.replace(/\s/g, '');
-    const result = sequenceToMolV3000(clearSequence, false, false, inputFormatChoiceInput.value!);
+    const monomersLib = await grok.dapi.files.readAsText(monomersLibAddress);
+    const result = sequenceToMolV3000(inputSequenceField.value.replace(/\s/g, ''), false, false,
+      inputFormatChoiceInput.value!);
     download(clearSequence + '.mol', encodeURIComponent(result));
   }, 'Save .mol file');
 

package/src/package.ts

@@ -5,13 +5,31 @@ import {autostartOligoSdFileSubscription} from './autostart/registration';
 import {defineAxolabsPattern} from './axolabs/define-pattern';
 import {saveSenseAntiSense} from './structures-works/save-sense-antisense';
 import {mainView} from './main/main-view';
+import {IMonomerLib, MonomerWorks, readLibrary} from '@datagrok-libraries/bio';
 
 export const _package = new DG.Package();
 
+const LIB_PATH = 'System:AppData/SequenceTranslator';
+
+let monomerLib: IMonomerLib | null = null;
+export let monomerWorks: MonomerWorks | null = null;
+
+export function getMonomerWorks() {
+  return monomerWorks;
+};
+
+export function getMonomerLib() {
+  return monomerLib;
+};
 
 //name: Sequence Translator
 //tags: app
-export function sequenceTranslator(): void {
+export async function sequenceTranslator(): Promise<void> {
+  monomerLib = await readLibrary(LIB_PATH, 'helmLib.json');
+
+  if (monomerWorks == null)
+    monomerWorks = new MonomerWorks(monomerLib);
+
   const windows = grok.shell.windows;
   windows.showProperties = false;
   windows.showToolbox = false;
@@ -20,7 +38,7 @@ export function sequenceTranslator(): void {
   const v = grok.shell.newView('Sequence Translator', []);
   v.box = true;
   v.append(ui.tabControl({
-    'MAIN': mainView(),
+    'MAIN': await mainView(),
     'AXOLABS': defineAxolabsPattern(),
     'SDF': saveSenseAntiSense(),
   }));