@datagrok/sequence-translator 1.2.7 → 1.3.0

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

@@ -0,0 +1,335 @@
+import {NUCLEOTIDES} from '../../../common/model/const';
+import {STRAND, STRANDS, 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';
+import {SVGBlockBase} from './svg-block-base';
+import {SVGElementFactory} from './svg-element-factory';
+import {TextDimensionsCalculator} from './text-dimensions-calculator';
+import {computeTextColorForNucleobaseLabel, getNucleobaseColorFromStyleMap, getNucleobaseLabelForCircle} from './utils';
+
+const NUMERIC_LABEL_PADDING = 5;
+const SENSE_STRAND_HEIGHT = SVG_TEXT_FONT_SIZES.NUCLEOBASE +
+  NUMERIC_LABEL_PADDING + SVG_CIRCLE_SIZES.NUCLEOBASE_DIAMETER;
+const SENSE_STRAND_PADDING = 10;
+const LEFT_LABEL_WIDTH = 55;
+const SENSE_STRAND_HORIZONTAL_SHIFT = SENSE_STRAND_PADDING + LEFT_LABEL_WIDTH;
+const RIGHT_LABEL_WIDTH = 20;
+
+export class StrandsBlock extends SVGBlockBase {
+  private strands: SVGBlockBase[];
+  private labels: SVGBlockBase[];
+  constructor(
+    svgElementFactory: SVGElementFactory,
+    config: PatternConfiguration,
+    yShift: number
+  ) {
+    super(svgElementFactory, config, yShift);
+    const strandTypes = STRANDS.filter((strandType) => config.nucleotideSequences[strandType].length > 0);
+
+    this.strands = strandTypes
+      .map((strand) => new SingleStrandBlock(this.svgElementFactory, config, yShift, strand));
+
+    this.labels = strandTypes.map(
+      (strandType, idx) =>
+        new StrandLabel(this.svgElementFactory, config, yShift, strandType, this.strands[idx] as SingleStrandBlock)
+    );
+  }
+
+  get svgElements(): SVGElement[] {
+    const elements = [
+      ...this.strands,
+      ...this.labels
+    ].map((block) => block.svgElements).flat();
+    return elements;
+  }
+
+  getContentWidth(): number {
+    return Math.max(...this.labels.map((labelBlock) => labelBlock.getContentWidth()));
+  }
+
+  getContentHeight(): number {
+    const result = this.strands
+      .reduce((acc, strand) => acc + strand.getContentHeight(), 0);
+    return result;
+  }
+}
+
+class SingleStrandBlock extends SVGBlockBase {
+  private _svgElements: SVGElement[];
+  private nucleotideNumericLabels: (number | null)[];
+  constructor(
+    protected svgElementFactory: SVGElementFactory,
+    protected config: PatternConfiguration,
+    protected yShift: number,
+    private strand: STRAND
+  ) {
+    super(svgElementFactory, config, yShift);
+
+    // WARNING: should be computed before creating circles
+    this.nucleotideNumericLabels = this.computeNucleotideNumericLabels();
+
+    if (this.strand === STRAND.ANTISENSE) {
+      this.config.phosphorothioateLinkageFlags[this.strand].reverse();
+      this.config.nucleotideSequences[this.strand].reverse();
+      this.nucleotideNumericLabels.reverse();
+    }
+
+    this._svgElements = [
+      this.createStrandCircles(),
+      this.createPTOLinkageStars(),
+    ].flat();
+  }
+
+  private computeNucleotideNumericLabels(): (number | null)[] {
+    let index = 0;
+    const nucleotides = this.config.nucleotideSequences[this.strand];
+    const indices = nucleotides.map((nucleotide) => {
+      if (isOverhangNucleotide(nucleotide)) return null;
+      index++;
+      return index;
+    });
+    return indices;
+  }
+
+  get svgElements(): SVGElement[] {
+    return this._svgElements;
+  }
+
+  private getStrandCircleYShift(): number {
+    return getStrandCircleYShift(this.strand, this.yShift);
+  }
+
+  private createStrandCircles(): SVGElement[] {
+    const defaultShift = {
+      x: SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS + SENSE_STRAND_HORIZONTAL_SHIFT,
+      y: this.getStrandCircleYShift()
+    };
+
+    const nucleotides = this.config.nucleotideSequences[this.strand];
+
+    const elements = nucleotides
+      .map((nucleotide, index) => this.createNucleotideElementGroup(nucleotide, index, defaultShift)).flat();
+
+    return elements;
+  }
+
+  private createNucleotideElementGroup(
+    nucleotide: string,
+    index: number,
+    defaultShift: {x: number, y: number}
+  ): SVGElement[] {
+    const circleElements = this.createNucleotideCircleElements(nucleotide, index, defaultShift);
+    const numericLabel = this.config.nucleotidesWithNumericLabels.includes(nucleotide) ?
+      this.createNucleotideNumericLabel(index, defaultShift) : null;
+
+    return [...circleElements, numericLabel].filter((element) => element !== null) as SVGElement[];
+  }
+
+  private createNucleotideCircleElements(
+    nucleotide: string,
+    index: number,
+    defaultShift: {x: number, y: number}
+  ): (SVGElement | null)[] {
+    const color = getNucleobaseColorFromStyleMap(nucleotide);
+    const centerPosition = {...defaultShift, x: defaultShift.x + index * SVG_CIRCLE_SIZES.NUCLEOBASE_DIAMETER};
+
+    const circle = this.svgElementFactory
+      .createCircleElement(centerPosition, SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS, color);
+
+    const nonModifiedNucleotideLetterLabel = this.createNucleotideLetterLabel(index, defaultShift, nucleotide);
+
+    return [circle, nonModifiedNucleotideLetterLabel];
+  }
+
+  private getNucleotideCircleCenterPosition(
+    index: number,
+    defaultShift: {x: number, y: number}
+  ): {x: number, y: number} {
+    return {
+      x: defaultShift.x + index * SVG_CIRCLE_SIZES.NUCLEOBASE_DIAMETER,
+      y: defaultShift.y
+    };
+  }
+
+  private createNucleotideLetterLabel(
+    index: number,
+    defaultShift: {x: number, y: number},
+    nucleobase: string
+  ): SVGElement | null {
+    if (!NUCLEOTIDES.includes(nucleobase))
+      return null;
+
+    const text = getNucleobaseLabelForCircle(nucleobase);
+    const color = computeTextColorForNucleobaseLabel(nucleobase);
+    // position at the very center of the circle
+    const position = this.getPositionForNucleotideLabel(index, defaultShift);
+    return this.svgElementFactory.createTextElement(
+      text,
+      position,
+      SVG_TEXT_FONT_SIZES.NUCLEOBASE,
+      color
+    );
+  }
+
+  /** Returns the position for the letter with its center being at the center of the circle */
+  private getPositionForNucleotideLabel(
+    index: number,
+    defaultShift: {x: number, y: number}
+  ): {x: number, y: number} {
+    const circleCenter = this.getNucleotideCircleCenterPosition(index, defaultShift);
+    const textDimensions = TextDimensionsCalculator.getTextDimensions('A', SVG_TEXT_FONT_SIZES.NUCLEOBASE);
+    return {
+      x: circleCenter.x - textDimensions.width / 2,
+      // the coefficient 1/3 is fine-tuned to make the text look centered
+      y: circleCenter.y + textDimensions.height / 3
+    };
+  }
+
+  private getNumericLabelYShift(
+    defaultShift: {x: number, y: number}
+  ): number {
+    return this.strand === STRAND.SENSE ?
+      defaultShift.y - (SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS + NUMERIC_LABEL_PADDING) :
+      defaultShift.y + SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS + NUMERIC_LABEL_PADDING + SVG_TEXT_FONT_SIZES.COMMENT;
+  }
+
+  private createNucleotideNumericLabel(
+    index: number,
+    defaultShift: {x: number, y: number}
+  ): SVGElement | null {
+    const label = this.nucleotideNumericLabels[index];
+    if (label === null) return null;
+
+    const width = TextDimensionsCalculator.getTextDimensions(label.toString(), SVG_TEXT_FONT_SIZES.COMMENT).width;
+
+    const position = {
+      x: defaultShift.x + index * SVG_CIRCLE_SIZES.NUCLEOBASE_DIAMETER - width / 2,
+      y: this.getNumericLabelYShift(defaultShift)
+    };
+
+    return this.svgElementFactory.createTextElement(
+      label.toString(),
+      position,
+      SVG_TEXT_FONT_SIZES.COMMENT,
+      SVG_ELEMENT_COLORS.TEXT
+    );
+  }
+
+  private createPTOLinkageStars(): SVGElement[] {
+    const ptoFlags = this.config.phosphorothioateLinkageFlags[this.strand];
+
+    const yShift = this.getStrandCircleYShift() + SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS * 0.8;
+
+    const elements = ptoFlags
+      .map((ptoFlag, index) => {
+        if (!ptoFlag) return null;
+
+        const centerPosition = {
+          x: SENSE_STRAND_HORIZONTAL_SHIFT + index * SVG_CIRCLE_SIZES.NUCLEOBASE_DIAMETER,
+          y: yShift
+        };
+
+        const color = SVG_ELEMENT_COLORS.LINKAGE_STAR;
+        return this.svgElementFactory.createStarElement(centerPosition, color);
+      })
+      .filter((element) => element !== null) as SVGElement[];
+
+    return elements;
+  }
+
+  getContentWidth(): number {
+    const numberOfMonomers = this.config.nucleotideSequences[this.strand].length;
+    return numberOfMonomers * SVG_CIRCLE_SIZES.NUCLEOBASE_DIAMETER;
+  }
+
+  getContentHeight(): number {
+    return SENSE_STRAND_HEIGHT + SENSE_STRAND_PADDING;
+  }
+}
+
+class StrandLabel 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();
+    // this.strandSvgWrapper.shiftElements({x: this.getLeftLabelWidth(), y: 0});
+  }
+
+  private createSVGElements(): SVGElement[] {
+    const elements = [
+      this.createLeftLabel(),
+      this.createRightLabel()
+    ];
+    return elements;
+  }
+
+  private getLeftLabelWidth(): number {
+    return LEFT_LABEL_WIDTH;
+  }
+
+  private getRightLabelWidth(): number {
+    return RIGHT_LABEL_WIDTH;
+  }
+
+  private createLeftLabel(): SVGTextElement {
+    const terminus = this.strand === STRAND.SENSE ? TERMINUS.FIVE_PRIME : TERMINUS.THREE_PRIME;
+    const text = `${this.strand}: ${terminus}  `;
+    const textDimensions = TextDimensionsCalculator.getTextDimensions(text, SVG_TEXT_FONT_SIZES.NUCLEOBASE);
+    const position = {
+      x: SENSE_STRAND_PADDING,
+      y: getStrandCircleYShift(this.strand, this.yShift) + textDimensions.height / 3
+    };
+
+    return this.svgElementFactory.createTextElement(
+      text,
+      position,
+      SVG_TEXT_FONT_SIZES.NUCLEOBASE,
+      SVG_ELEMENT_COLORS.TEXT
+    );
+  }
+
+  private createRightLabel(): SVGTextElement {
+    const terminus = this.strand === STRAND.SENSE ? TERMINUS.THREE_PRIME : TERMINUS.FIVE_PRIME;
+    const text = `  ${terminus}`;
+    const textDimensions = TextDimensionsCalculator.getTextDimensions(text, SVG_TEXT_FONT_SIZES.NUCLEOBASE);
+    const position = {
+      x: SENSE_STRAND_HORIZONTAL_SHIFT + this.strandSvgWrapper.getContentWidth() + 5,
+      y: getStrandCircleYShift(this.strand, this.yShift) + textDimensions.height / 3
+    };
+
+    return this.svgElementFactory.createTextElement(
+      text,
+      position,
+      SVG_TEXT_FONT_SIZES.NUCLEOBASE,
+      SVG_ELEMENT_COLORS.TEXT
+    );
+  }
+
+  get svgElements(): SVGElement[] {
+    return this._svgElements;
+  }
+
+  getContentWidth(): number {
+    return this.strandSvgWrapper.getContentWidth() + this.getLeftLabelWidth() + this.getRightLabelWidth() + SENSE_STRAND_PADDING;
+  }
+
+  getContentHeight(): number {
+    return this.strandSvgWrapper.getContentHeight();
+  }
+}
+
+function getStrandCircleYShift(
+  strand: STRAND,
+  defaultYShift: number
+): number {
+  return strand === STRAND.SENSE ?
+    defaultYShift + NUMERIC_LABEL_PADDING + SVG_TEXT_FONT_SIZES.COMMENT + SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS :
+    defaultYShift + SENSE_STRAND_HEIGHT + SENSE_STRAND_PADDING + SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS;
+}

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

@@ -0,0 +1,37 @@
+import {PatternConfiguration} from '../../model/types';
+import {SVGElementFactory} from './svg-element-factory';
+
+/** Horizontal block within SVG: title, strands, legend  */
+export abstract class SVGBlockBase {
+  // protected svgElements: SVGElement[] = [];
+  constructor(
+    protected svgElementFactory: SVGElementFactory,
+    protected config: PatternConfiguration,
+    protected yShift: number
+  ) {}
+
+  abstract get svgElements(): SVGElement[];
+
+  abstract getContentHeight(): number;
+
+  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})`;
+      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/svg-display-manager.ts

@@ -0,0 +1,44 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as ui from 'datagrok-api/ui';
+
+import {EventBus} from '../../model/event-bus';
+import {PatternConfiguration} from '../../model/types';
+//@ts-ignore
+import * as svgExport from 'save-svg-as-png';
+import {NucleotidePatternSVGRenderer} from './svg-renderer';
+
+export class SvgDisplayManager {
+  private svgDisplayDiv = ui.div([]);
+  private svgElement: SVGElement;
+
+  private constructor(
+    private eventBus: EventBus
+  ) {
+    eventBus.updateSvgContainer$.subscribe(() => this.updateSvgContainer());
+    eventBus.svgSaveRequested$.subscribe(() => this.saveSvgAsPng());
+  }
+
+  static createSvgDiv(eventBus: EventBus): HTMLDivElement {
+    const displayManager = new SvgDisplayManager(eventBus);
+    return displayManager.svgDisplayDiv;
+  }
+
+  private updateSvgContainer(): void {
+    $(this.svgDisplayDiv).empty();
+    const patternConfig = this.eventBus.getPatternConfig();
+    this.svgElement = this.createSvg(patternConfig);
+    this.svgDisplayDiv.append(this.svgElement);
+  }
+
+  private createSvg(patternConfig: PatternConfiguration) {
+    // const renderer = new NucleotidePatternSVGRenderer(patternConfig);
+    const renderer = new NucleotidePatternSVGRenderer(patternConfig);
+    const svg = renderer.renderPattern();
+    return svg;
+  }
+
+  private saveSvgAsPng(): void {
+    const patternName = this.eventBus.getPatternName();
+    svgExport.saveSvgAsPng(this.svgElement, patternName, {backgroundColor: 'white'});
+  }
+}

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

@@ -0,0 +1,94 @@
+import {Position} from '../types';
+
+export class SVGElementFactory {
+  private readonly xmlNamespace = 'http://www.w3.org/2000/svg';
+
+  private createElement(elementType: string): Element {
+    return document.createElementNS(this.xmlNamespace, elementType);
+  }
+
+  private setAttributes(targetElement: Element, attributes: { [key: string]: any }): void {
+    Object.entries(attributes).forEach(([key, value]) => {
+      targetElement.setAttribute(key, String(value));
+    });
+  }
+
+  createCanvas(width: number, height: number): SVGElement {
+    const svgElement = this.createElement('svg') as SVGElement;
+    this.setAttributes(svgElement, {
+      id: 'mySvg',
+      width,
+      height,
+    });
+    return svgElement;
+  }
+
+  createCircleElement(centerPosition: Position, radius: number, color: string): SVGCircleElement {
+    const circle = this.createElement('circle') as SVGCircleElement;
+    this.setAttributes(circle, {
+      cx: centerPosition.x,
+      cy: centerPosition.y,
+      r: radius,
+      fill: color,
+    });
+    return circle;
+  }
+
+  createTextElement(textContent: string, position: Position, fontSize: number, color: string): SVGTextElement {
+    const textElement = this.createElement('text') as SVGTextElement;
+    this.setAttributes(textElement, {
+      'x': position.x,
+      'y': position.y,
+      'font-size': fontSize,
+      'font-weight': 'normal',
+      'font-family': 'Arial',
+      'fill': color,
+    });
+    textElement.textContent = textContent;
+    return textElement;
+  }
+
+  createStarElement(centerPosition: Position, color: string): SVGPolygonElement {
+    const star = this.createElement('polygon') as SVGPolygonElement;
+    const points = this.computeStarVertexCoordinates(centerPosition);
+    const pointsAttribute = points.map((point) => point.join(',')).join(' ');
+
+    this.setAttributes(star, {
+      points: pointsAttribute,
+      fill: color,
+    });
+    return star;
+  }
+
+  private computeStarVertexCoordinates(centerPosition: Position): [number, number][] {
+    const outerVerticesPerStar = 5;
+    const innerVertexRadius = 3;
+    const outerVertexRadius = innerVertexRadius * 2;
+    const radiansPerVertex = Math.PI / outerVerticesPerStar;
+    const radiansOffset = - radiansPerVertex / 2;
+    const totalNumberOfVertices = outerVerticesPerStar * 2;
+
+    const points: [number, number][] = Array.from({length: totalNumberOfVertices}, (_, i) => {
+      const isOuterVertex = i % 2 === 0;
+      const radius = isOuterVertex ? outerVertexRadius : innerVertexRadius;
+      const angle = i * radiansPerVertex + radiansOffset;
+      const x = centerPosition.x + Math.cos(angle) * radius;
+      const y = centerPosition.y + Math.sin(angle) * radius;
+      return [x, y];
+    });
+
+    return points;
+  }
+
+  createRectangleElement(topLeftCorner: Position, width: number, height: number, color: string): SVGRectElement {
+    const rectangle = this.createElement('rect') as SVGRectElement;
+    this.setAttributes(rectangle, {
+      x: topLeftCorner.x,
+      y: topLeftCorner.y,
+      width,
+      height,
+      fill: color,
+    });
+    return rectangle;
+  }
+}

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

@@ -0,0 +1,51 @@
+import _ from 'lodash';
+import {PatternConfiguration} from '../../model/types';
+import {StrandsBlock} from './strands-block';
+import {SVGBlockBase} from './svg-block-base';
+import {SVGElementFactory} from './svg-element-factory';
+import {TitleBlock} from './title-block';
+import {LegendBlock} from './legend-block';
+import {LEGEND_PADDING, TITLE_SHIFT} from './const';
+
+export class NucleotidePatternSVGRenderer {
+  private title: TitleBlock;
+  private strands: StrandsBlock;
+  private legend: LegendBlock;
+  private svgElementFactory = new SVGElementFactory();
+
+  constructor(patternConfig: PatternConfiguration) {
+    const config = _.cloneDeep(patternConfig);
+
+    let heightShift = TITLE_SHIFT;
+
+    this.title = new TitleBlock(this.svgElementFactory, config, heightShift);
+    heightShift += this.title.getContentHeight();
+
+    this.strands = new StrandsBlock(this.svgElementFactory, config, heightShift);
+    heightShift += this.strands.getContentHeight() + LEGEND_PADDING;
+
+    this.legend = new LegendBlock(this.svgElementFactory, config, heightShift);
+  }
+
+  renderPattern(): SVGElement {
+    const width = this.getGlobalWidth();
+    const height = this.getGlobalHeight();
+    const canvas = this.svgElementFactory.createCanvas(width, height);
+
+    const elements = [this.title, this.strands, this.legend].map((block) => block.svgElements).flat();
+    canvas.append(...elements);
+
+    return canvas;
+  }
+
+  private getGlobalWidth(): number {
+    const blocks = [this.title, this.strands, this.legend] as SVGBlockBase[];
+    return Math.max(...blocks.map((block) => block.getContentWidth()));
+  }
+
+  private getGlobalHeight(): number {
+    const blocks = [this.title, this.strands, this.legend];
+    const height = blocks.reduce((acc, block) => acc + block.getContentHeight(), TITLE_SHIFT);
+    return height;
+  }
+}

package/src/apps/pattern/view/svg-utils/text-dimensions-calculator.ts

@@ -0,0 +1,29 @@
+export class TextDimensionsCalculator {
+  private static instance: TextDimensionsCalculator;
+  private canvas: HTMLCanvasElement;
+  private constructor() { }
+
+  private static getInstance(): TextDimensionsCalculator {
+    if (!TextDimensionsCalculator.instance) {
+      TextDimensionsCalculator.instance = new TextDimensionsCalculator();
+      TextDimensionsCalculator.instance.canvas = document.createElement('canvas');
+    }
+    return TextDimensionsCalculator.instance;
+  }
+
+  static getTextDimensions(text: string, fontSize: number): {width: number, height: number} {
+    const canvas = TextDimensionsCalculator.getInstance().canvas;
+    const context = canvas.getContext('2d');
+    if (!context)
+      throw new Error('Canvas 2D context is not available');
+
+    context.font = `${fontSize}px Arial`;
+    const scaleFactor = 1.1;
+
+    return {
+      width: context.measureText(text).width * scaleFactor,
+      height: fontSize * scaleFactor
+    };
+  }
+}
+

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

@@ -0,0 +1,53 @@
+import {STRAND} from '../../model/const';
+import {PatternConfiguration} from '../../model/types';
+import {FONT_SIZE} from './const';
+import {SVGBlockBase} from './svg-block-base';
+import {SVGElementFactory} from './svg-element-factory';
+import {TextDimensionsCalculator} from './text-dimensions-calculator';
+
+const TITLE_LEFT_PADDING = 15;
+
+export class TitleBlock extends SVGBlockBase {
+  private titleText: string;
+  private _svgElements: SVGElement[] = [];
+  constructor(
+    protected svgElementFactory: SVGElementFactory,
+    protected config: PatternConfiguration,
+    protected yShift: number
+  ) {
+    super(svgElementFactory, config, yShift);
+    this.titleText = this.getTitleText();
+    this._svgElements = [this.getTitle()];
+  }
+
+  get svgElements(): SVGElement[] {
+    return this._svgElements;
+  }
+
+  private getTitle(): SVGElement {
+    return this.svgElementFactory.createTextElement(
+      this.titleText,
+      {x: TITLE_LEFT_PADDING, y: this.yShift + FONT_SIZE.TITLE},
+      FONT_SIZE.TITLE,
+      'black'
+    );
+  }
+
+  getContentWidth(): number {
+    return TextDimensionsCalculator.getTextDimensions(this.titleText, FONT_SIZE.TITLE).width;
+  }
+
+  getContentHeight(): number {
+    return TextDimensionsCalculator.getTextDimensions(this.titleText, FONT_SIZE.TITLE).height;
+  }
+
+  private getTitleText(): string {
+    const senseStrandLength = `${this.config.nucleotideSequences[STRAND.SENSE].length}`;
+    const antisenseStrandLength = this.config.isAntisenseStrandIncluded ?
+      `/${this.config.nucleotideSequences[STRAND.ANTISENSE].length}` : '';
+    const titleText = `${this.config.patternName} for ${senseStrandLength}${antisenseStrandLength}-mer`;
+
+    return titleText;
+  }
+}
+

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

@@ -0,0 +1,37 @@
+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';
+
+export function computeLegendCircleYPosition(isAntisenseStrandActive: boolean): number {
+  return (isAntisenseStrandActive ? 9.5 : 6) * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS;
+}
+
+export function getNucleobaseLabelForCircle(nucleobase: string): string {
+  const criterion = !isOverhangNucleotide(nucleobase) && NUCLEOTIDES.includes(nucleobase);
+
+  return criterion ? nucleobase : '';
+}
+
+export function computeTextColorForNucleobaseLabel(nucleobase: string): string {
+  const nucleobaseColor = getNucleobaseColorFromStyleMap(nucleobase);
+
+  const rgbValues = nucleobaseColor.match(/\d+/g)?.map(Number);
+  if (!rgbValues || rgbValues.length < 3)
+    return TEXT_COLOR.LIGHT;
+
+
+  const [r, g, b] = rgbValues;
+  const luminance = r * LUMINANCE_COEFFICIENTS.RED + g * LUMINANCE_COEFFICIENTS.GREEN + b * LUMINANCE_COEFFICIENTS.BLUE;
+  return luminance > LUMINANCE_COEFFICIENTS.THRESHOLD ? TEXT_COLOR.DARK : TEXT_COLOR.LIGHT;
+}
+
+export function getNucleobaseColorFromStyleMap(nucleobase: string): string {
+  // todo: optimize
+  const format = Object.keys(PATTERN_APP_DATA)[0];
+  if (!format)
+    throw new Error('No format found in PATTERN_APP_DATA');
+
+  const styleMap = PATTERN_APP_DATA[format];
+  return styleMap[nucleobase].color || '';
+}