@datagrok/sequence-translator 1.2.9 → 1.3.0

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

@@ -1,13 +1,11 @@
 /* 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 {PatternConfiguration, StrandType} from '../../model/types';
 import {EventBus} from '../../model/event-bus';
-import {NucleotidePatternSVGRenderer} from './svg-renderer';
+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([]);
@@ -16,7 +14,7 @@ export class SvgDisplayManager {
   private constructor(
     private eventBus: EventBus
   ) {
-    eventBus.patternStateChanged$.subscribe(() => this.updateSvgContainer());
+    eventBus.updateSvgContainer$.subscribe(() => this.updateSvgContainer());
     eventBus.svgSaveRequested$.subscribe(() => this.saveSvgAsPng());
   }
 
@@ -33,6 +31,7 @@ export class SvgDisplayManager {
   }
 
   private createSvg(patternConfig: PatternConfiguration) {
+    // const renderer = new NucleotidePatternSVGRenderer(patternConfig);
     const renderer = new NucleotidePatternSVGRenderer(patternConfig);
     const svg = renderer.renderPattern();
     return svg;

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

@@ -13,7 +13,7 @@ export class SVGElementFactory {
     });
   }
 
-  public createCanvas(width: number, height: number): SVGElement {
+  createCanvas(width: number, height: number): SVGElement {
     const svgElement = this.createElement('svg') as SVGElement;
     this.setAttributes(svgElement, {
       id: 'mySvg',
@@ -23,7 +23,7 @@ export class SVGElementFactory {
     return svgElement;
   }
 
-  public createCircleElement(centerPosition: Position, radius: number, color: string): SVGCircleElement {
+  createCircleElement(centerPosition: Position, radius: number, color: string): SVGCircleElement {
     const circle = this.createElement('circle') as SVGCircleElement;
     this.setAttributes(circle, {
       cx: centerPosition.x,
@@ -34,7 +34,7 @@ export class SVGElementFactory {
     return circle;
   }
 
-  public createTextElement(textContent: string, position: Position, fontSize: number, color: string): SVGTextElement {
+  createTextElement(textContent: string, position: Position, fontSize: number, color: string): SVGTextElement {
     const textElement = this.createElement('text') as SVGTextElement;
     this.setAttributes(textElement, {
       'x': position.x,
@@ -48,7 +48,7 @@ export class SVGElementFactory {
     return textElement;
   }
 
-  public createStarElement(centerPosition: Position, color: string): SVGPolygonElement {
+  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(' ');
@@ -79,4 +79,16 @@ export class SVGElementFactory {
 
     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

@@ -1,396 +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 {isOverhangNucleotide} from '../../model/utils';
-import {STRAND, STRANDS, STRAND_END, STRAND_ENDS, TERMINUS, TERMINI} from '../../model/const';
-import {PatternConfiguration, StrandType, TerminalType} from '../../model/types';
-import {SVG_CIRCLE_SIZES, SVG_TEXT_FONT_SIZES, SVG_ELEMENT_COLORS, STRAND_END_LABEL_TEXT} from './const';
-import {StrandToNumberMap, StrandEndToSVGElementsMap, TerminusToSVGElementMap} from '../types';
-import {
-  getNucleobaseLabelForCircle,
-  computeTextColorForNucleobaseLabel,
-  getNucleobaseColorFromStyleMap,
-} from './utils';
-import {PatternSVGDimensionsCalculator} from './dimensions-calculator';
+import {TitleBlock} from './title-block';
+import {LegendBlock} from './legend-block';
+import {LEGEND_PADDING, TITLE_SHIFT} from './const';
 
 export class NucleotidePatternSVGRenderer {
-  private config: PatternConfiguration;
-  private patternDimensionsCalculator: PatternSVGDimensionsCalculator;
-  private svgFactory: SVGElementFactoryWrapper;
-  private strandElementManager: StrandElementBuilder;
-  private legendBuilder: LegendBuilder;
+  private title: TitleBlock;
+  private strands: StrandsBlock;
+  private legend: LegendBlock;
+  private svgElementFactory = new SVGElementFactory();
 
   constructor(patternConfig: PatternConfiguration) {
-    this.setupPatternConfig(patternConfig);
+    const config = _.cloneDeep(patternConfig);
 
-    // todo: prefer dependency injection for all these properties
-    this.patternDimensionsCalculator = new PatternSVGDimensionsCalculator(this.config);
+    let heightShift = TITLE_SHIFT;
 
-    this.svgFactory = new SVGElementFactoryWrapper(new SVGElementFactory(), this.config, this.patternDimensionsCalculator);
+    this.title = new TitleBlock(this.svgElementFactory, config, heightShift);
+    heightShift += this.title.getContentHeight();
 
-    this.strandElementManager = new StrandElementBuilder(this.svgFactory, this.config);
-    this.legendBuilder = new LegendBuilder(this.svgFactory, this.config);
-  }
-
-  renderPattern(): SVGElement {
-    const labelElements = this.createLabelElements();
-
-    const countOfNucleotidesExcludingOverhangs = this.countNucleotidesExcludingOverhangs();
-    const strandElements = this.strandElementManager.createStrandElements(countOfNucleotidesExcludingOverhangs);
-    const titleElement = this.svgFactory.createTitleElement(this.config.patternName, countOfNucleotidesExcludingOverhangs, this.config.isAntisenseStrandIncluded);
-
-    const legend = this.legendBuilder.getLegendItems();
-
-    const patternSVGCanvas = this.svgFactory.createCanvas();
-    patternSVGCanvas.append(...labelElements, ...strandElements, titleElement, ...legend);
-
-    return patternSVGCanvas;
-  }
-
-  private countNucleotidesExcludingOverhangs(): StrandToNumberMap {
-    return STRANDS.reduce((acc, strand) => {
-      acc[strand] = this.config.nucleotideSequences[strand].filter((value) => !isOverhangNucleotide(value)).length;
-      return acc;
-    }, {} as StrandToNumberMap);
-  }
-
-  private createLabelElements(): SVGElement[] {
-    const strandEndLabels = this.getStrandEndLabels();
-    const labelsTerminusModification = this.getTerminusModificationLabels();
-
-    const labelElements = [
-      ...STRANDS.flatMap((strand) => [
-        ...Object.values(strandEndLabels[strand]),
-        ...Object.values(labelsTerminusModification[strand])
-      ]),
-    ].filter((element) => element !== null) as SVGElement[];
-
-    return labelElements;
-  }
-
-  private setupPatternConfig(patternConfig: PatternConfiguration): void {
-    // WARNING: to ensure immutability, we need to deep copy the config object
-    this.config = JSON.parse(JSON.stringify(patternConfig)) as PatternConfiguration;
-
-    this.config.nucleotideSequences[STRAND.SENSE].reverse();
-    this.config.phosphorothioateLinkageFlags[STRAND.SENSE].reverse();
-  }
-
-  private getStrandEndLabels() {
-    const strandEndLabels = STRANDS.reduce((acc, strand) => {
-      acc[strand] = STRAND_ENDS.reduce((endAcc, end) => {
-        endAcc[end] = this.svgFactory.createLabelForStrandEnd(strand, end);
-        return endAcc;
-      }, {} as StrandEndToSVGElementsMap);
-      return acc;
-    }, {} as Record<typeof STRANDS[number], StrandEndToSVGElementsMap>);
-
-    return strandEndLabels;
-  }
-
-  private getTerminusModificationLabels() {
-    const labelsTerminusModification = STRANDS.reduce((acc, strand) => {
-      acc[strand] = TERMINI.reduce((terminiAcc, terminus) => {
-        terminiAcc[terminus] = this.svgFactory.createTerminusModificationLabel(strand, terminus);
-        return terminiAcc;
-      }, {} as TerminusToSVGElementMap);
-      return acc;
-    }, {} as Record<typeof STRANDS[number], TerminusToSVGElementMap>);
-
-    return labelsTerminusModification;
-  }
-}
-
-class LegendBuilder {
-  private containsPhosphorothioateLinkages: boolean;
-  constructor(
-    private svgFactory: SVGElementFactoryWrapper,
-    private config: PatternConfiguration
-  ) {
-    this.containsPhosphorothioateLinkages = this.checkAnyPhosphorothioateLinkages();
-  }
-
-  getLegendItems(): SVGElement[] {
-    const commentLabel = this.svgFactory.createCommentLabel();
-    const nucleotideLegendItems = this.createLegendItemsForNucleotideTypes();
-    const phosphorothioateLinkageLegendItem = this.createLegendItemForPhosphorothioateLinkage(this.containsPhosphorothioateLinkages);
-
-    return [commentLabel, ...nucleotideLegendItems, ...phosphorothioateLinkageLegendItem];
-  }
-
-  private createLegendItemsForNucleotideTypes(): SVGElement[] {
-    const distinctNucleobaseTypes = this.extractNucleotideTypes();
-    const svgElements = [] as SVGElement[];
-    distinctNucleobaseTypes.forEach((nucleobaseType, index) => {
-      const legendCircle = this.svgFactory.createLegendCircle(nucleobaseType, index, distinctNucleobaseTypes, this.containsPhosphorothioateLinkages);
-      const legendText = this.svgFactory.createLegendText(nucleobaseType, index, distinctNucleobaseTypes, this.containsPhosphorothioateLinkages);
-      svgElements.push(legendCircle, legendText);
-    });
-    return svgElements;
-  }
-
-  private createLegendItemForPhosphorothioateLinkage(containsPhosphorothioateLinkages: boolean): SVGElement[] {
-    const starLinkageLegendLabel = this.svgFactory.createLinkageStarLegendLabel(containsPhosphorothioateLinkages);
-    const phosphorothioateLinkageLabel = this.svgFactory.createPhosphorothioateLinkageLabel(containsPhosphorothioateLinkages);
-
-    return [starLinkageLegendLabel, phosphorothioateLinkageLabel].filter((element) => element !== null) as SVGElement[];
-  }
-
-  private extractNucleotideTypes(): string[] {
-    const distinctNucleotides = [...new Set(
-      this.config.nucleotideSequences[STRAND.SENSE].concat(
-        this.config.isAntisenseStrandIncluded ? this.config.nucleotideSequences[STRAND.ANTISENSE] : []
-      )
-    )];
-
-    return distinctNucleotides;
-  }
-
-  private checkAnyPhosphorothioateLinkages(): boolean {
-    return [...this.config.phosphorothioateLinkageFlags[STRAND.SENSE],
-      ...(this.config.isAntisenseStrandIncluded ? this.config.phosphorothioateLinkageFlags[STRAND.ANTISENSE] : [])
-    ].some((linkage) => linkage);
-  }
-}
-
-class NucleotideCountTracker {
-  private nucleotideCounts: StrandToNumberMap;
-  constructor(initialNucleotideCounts: StrandToNumberMap) {
-    // WARNING: to ensure immutability, we need to deep copy the object
-    this.nucleotideCounts = JSON.parse(JSON.stringify(initialNucleotideCounts)) as StrandToNumberMap;
-  }
-
-  decrementIfNotOverhang(isOverhang: boolean, strand: STRAND): void {
-    if (!isOverhang)
-      this.nucleotideCounts[strand]--;
-  }
-
-  getCurrentCount(strand: STRAND): number {
-    return this.nucleotideCounts[strand];
-  }
-}
-
-class SVGElementFactoryWrapper {
-  constructor(
-    private svgElementFactory: SVGElementFactory,
-    private config: PatternConfiguration,
-    private dimensionsCalculator: PatternSVGDimensionsCalculator
-  ) { }
-
-  createCanvas(): SVGElement {
-    const canvasWidth = this.dimensionsCalculator.getCanvasWidth();
-    const canvasHeight = this.dimensionsCalculator.getCanvasHeight();
-    const svgCanvas = this.svgElementFactory.createCanvas(canvasWidth, canvasHeight);
-
-    return svgCanvas;
-  }
+    this.strands = new StrandsBlock(this.svgElementFactory, config, heightShift);
+    heightShift += this.strands.getContentHeight() + LEGEND_PADDING;
 
-  createTitleElement(patternName: string,
-    numberOfNucleotides: StrandToNumberMap,
-    isAntisenseStrandActive: boolean
-  ) {
-    const titleText = this.getTitleText(patternName, numberOfNucleotides, isAntisenseStrandActive);
-    const titleTextPosition = this.dimensionsCalculator.getTitleTextPosition();
-    return this.svgElementFactory.createTextElement(
-      titleText,
-      titleTextPosition,
-      SVG_TEXT_FONT_SIZES.NUCLEOBASE,
-      SVG_ELEMENT_COLORS.TITLE_TEXT
-    );
+    this.legend = new LegendBlock(this.svgElementFactory, config, heightShift);
   }
 
-  private getTitleText(
-    patternName: string,
-    numberOfNucleotides: StrandToNumberMap,
-    isAntisenseStrandActive: boolean
-  ): string {
-    const senseStrandLength = `${numberOfNucleotides[STRAND.SENSE]}`;
-    const antisenseStrandLength = isAntisenseStrandActive ? `/${numberOfNucleotides[STRAND.ANTISENSE]}` : '';
-    const titleText = `${patternName} for ${senseStrandLength}${antisenseStrandLength}-mer`;
-
-    return titleText;
-  }
-
-  createPhosphorothioateLinkageStar(strand: StrandType, index: number): SVGElement | null {
-    const isActive = this.config.phosphorothioateLinkageFlags[strand][index];
-    if (!isActive)
-      return null;
-
-    const centerPosition = this.dimensionsCalculator.getCenterPositionOfLinkageStar(index, strand);
-    const color = SVG_ELEMENT_COLORS.LINKAGE_STAR;
-    const starElement = this.svgElementFactory.createStarElement(centerPosition, color);
-
-    return starElement;
-  }
-
-  createNucleotideNumericLabel(
-    indexOfNucleotide: number,
-    strand: STRAND,
-    displayedNucleotideNumber: number
-  ): SVGElement {
-    const nucleotide = this.config.nucleotideSequences[strand][indexOfNucleotide];
-    const isOverhang = isOverhangNucleotide(nucleotide);
-    const labelPosition = this.dimensionsCalculator.getNumericLabelPosition(indexOfNucleotide, strand, displayedNucleotideNumber);
-
-    const labelText = (!isOverhang && this.config.nucleotidesWithNumericLabels.includes(nucleotide)) ?
-      String(displayedNucleotideNumber) :
-      '';
-
-    const nucleotideNumericLabel = this.svgElementFactory.createTextElement(
-      labelText, labelPosition, SVG_TEXT_FONT_SIZES.COMMENT, SVG_ELEMENT_COLORS.TEXT
-    );
-
-    return nucleotideNumericLabel;
-  }
-
-  createNucleotideCircle(indexOfNucleotide: number, strand: STRAND): SVGCircleElement {
-    const nucleotide = this.config.nucleotideSequences[strand][indexOfNucleotide];
-    const nucleotideCirclePosition = this.dimensionsCalculator.getNucleotideCirclePosition(indexOfNucleotide, strand);
-    const nucleotideCircle = this.svgElementFactory.createCircleElement(
-      nucleotideCirclePosition, SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS, getNucleobaseColorFromStyleMap(nucleotide)
-    );
-    return nucleotideCircle;
-  }
-
-  createNucleotideNameLabel(indexOfNucleotide: number, strand: STRAND): SVGTextElement {
-    const nucleotide = this.config.nucleotideSequences[strand][indexOfNucleotide];
-    const nucleobaseLabelTextPosition = this.dimensionsCalculator.getNucleotideLabelTextPosition(indexOfNucleotide, strand);
-    const nucleotideLabelText = this.svgElementFactory.createTextElement(
-      getNucleobaseLabelForCircle(nucleotide), nucleobaseLabelTextPosition, SVG_TEXT_FONT_SIZES.NUCLEOBASE, computeTextColorForNucleobaseLabel(nucleotide)
-    );
-    return nucleotideLabelText;
-  }
-
-  createCommentLabel(): SVGElement {
-    const commentLabelPosition = this.dimensionsCalculator.getCommentLabelPosition();
-
-    const commentLabel = this.svgElementFactory.createTextElement(
-      this.config.patternComment,
-      commentLabelPosition,
-      SVG_TEXT_FONT_SIZES.COMMENT,
-      SVG_ELEMENT_COLORS.TEXT
-    );
-
-    return commentLabel;
-  }
-
-  createLinkageStarLegendLabel(isPhosphorothioateLinkageActive: boolean): SVGElement | null {
-    const starLabelPosition = this.dimensionsCalculator.getStarLabelPosition();
-    const starLabel = isPhosphorothioateLinkageActive ?
-      this.svgElementFactory.createStarElement(starLabelPosition, SVG_ELEMENT_COLORS.LINKAGE_STAR) :
-      null;
-
-    return starLabel;
-  }
-
-  createPhosphorothioateLinkageLabel(isPhosphorothioateLinkageActive: boolean): SVGElement | null {
-    const position = this.dimensionsCalculator.getPhosphorothioateLinkageLabelPosition();
-    const phosphorothioateLinkageLabel = isPhosphorothioateLinkageActive ?
-      this.svgElementFactory.createTextElement(
-        'ps linkage',
-        position,
-        SVG_TEXT_FONT_SIZES.COMMENT,
-        SVG_ELEMENT_COLORS.TEXT) :
-      null;
-
-    return phosphorothioateLinkageLabel;
-  };
-
-  createLabelForStrandEnd(strand: StrandType, end: STRAND_END): SVGElement | null {
-    const isLabelActive = (strand === STRAND.SENSE) || (strand === STRAND.ANTISENSE && this.config.isAntisenseStrandIncluded);
-    if (!isLabelActive)
-      return null;
-
-
-    const labelText = STRAND_END_LABEL_TEXT[end][strand];
-    const labelPosition = this.dimensionsCalculator.getStrandEndLabelPosition(strand, end);
-
-    return this.svgElementFactory.createTextElement(labelText, labelPosition, SVG_TEXT_FONT_SIZES.NUCLEOBASE, SVG_ELEMENT_COLORS.TEXT);
-  }
-
-  createTerminusModificationLabel(strand: StrandType, terminus: TerminalType): SVGElement | null {
-    if (strand === STRAND.ANTISENSE && !this.config.isAntisenseStrandIncluded)
-      return null;
-
-
-    const end = (strand === STRAND.SENSE && terminus === TERMINUS.FIVE_PRIME) ||
-      (strand === STRAND.ANTISENSE && terminus === TERMINUS.THREE_PRIME) ? STRAND_END.LEFT : STRAND_END.RIGHT;
-
-    const labelText = this.config.strandTerminusModifications[strand][terminus];
-    const labelPosition = this.dimensionsCalculator.getTerminusLabelPosition(strand, end);
-    return this.svgElementFactory.createTextElement(labelText, labelPosition, SVG_TEXT_FONT_SIZES.NUCLEOBASE, SVG_ELEMENT_COLORS.MODIFICATION_TEXT);
-  }
+  renderPattern(): SVGElement {
+    const width = this.getGlobalWidth();
+    const height = this.getGlobalHeight();
+    const canvas = this.svgElementFactory.createCanvas(width, height);
 
-  createLegendCircle(nucleobaseType: string, index: number, distinctNucleobaseTypes: string[], containsPhosphorothioateLinkages: boolean): SVGCircleElement {
-    const radius = SVG_CIRCLE_SIZES.LEGEND_RADIUS;
-    const color = getNucleobaseColorFromStyleMap(nucleobaseType);
+    const elements = [this.title, this.strands, this.legend].map((block) => block.svgElements).flat();
+    canvas.append(...elements);
 
-    const centerPosition = this.dimensionsCalculator.getLegendCirclePosition(index, distinctNucleobaseTypes, containsPhosphorothioateLinkages);
-    return this.svgElementFactory.createCircleElement(centerPosition, radius, color);
+    return canvas;
   }
 
-  createLegendText(nucleobaseType: string, index: number, distinctNucleobaseTypes: string[], containsPhosphorothioateLinkages: boolean): SVGTextElement {
-    const legendPosition = this.dimensionsCalculator.getLegendTextPosition(index, distinctNucleobaseTypes, containsPhosphorothioateLinkages);
-    return this.svgElementFactory.createTextElement(nucleobaseType, legendPosition, SVG_TEXT_FONT_SIZES.COMMENT, SVG_ELEMENT_COLORS.TEXT);
+  private getGlobalWidth(): number {
+    const blocks = [this.title, this.strands, this.legend] as SVGBlockBase[];
+    return Math.max(...blocks.map((block) => block.getContentWidth()));
   }
-}
-
-class StrandElementBuilder {
-  constructor(
-    private svgFactory: SVGElementFactoryWrapper,
-    private config: PatternConfiguration
-  ) { }
-
-  createStrandElements(countOfNucleotidesExcludingOverhangs: StrandToNumberMap): SVGElement[] {
-    const svgElements = [] as SVGElement[];
-
-    const nucleotideCounter = new NucleotideCountTracker(countOfNucleotidesExcludingOverhangs);
-
-    STRANDS.forEach((strand) => {
-      const criterion = strand === STRAND.SENSE || (strand === STRAND.ANTISENSE && this.config.isAntisenseStrandIncluded);
-      if (!criterion)
-        return;
-
-      this.config.nucleotideSequences[strand].forEach((_, index) => {
-        const elements = this.createElementsForNucleotide(index, strand, nucleotideCounter, countOfNucleotidesExcludingOverhangs);
-        svgElements.push(...elements);
-      });
-    });
-
-    return svgElements;
-  }
-
-  // todo reduce the # of args
-  private createElementsForNucleotide(
-    indexOfNucleotide: number,
-    strand: STRAND,
-    counter: NucleotideCountTracker,
-    countOfNucleotidesExcludingOverhangs: StrandToNumberMap
-  ): SVGElement[] {
-    const nucleotide = this.config.nucleotideSequences[strand][indexOfNucleotide];
-    const isOverhang = isOverhangNucleotide(nucleotide);
-
-    counter.decrementIfNotOverhang(isOverhang, strand);
-    const displayedNucleotideNumber = strand === STRAND.SENSE ?
-      counter.getCurrentCount(strand) + 1 :
-      countOfNucleotidesExcludingOverhangs[strand] - counter.getCurrentCount(strand);
-
-
-    const nucleotideNumericLabel = this.svgFactory.createNucleotideNumericLabel(indexOfNucleotide, strand, displayedNucleotideNumber);
-    const nucleotideCircle = this.svgFactory. createNucleotideCircle(indexOfNucleotide, strand);
-    const nucleotideNameLabel = this.svgFactory. createNucleotideNameLabel(indexOfNucleotide, strand);
-
-    const phosphorothioateLinkageStar = this.svgFactory.createPhosphorothioateLinkageStar(strand, indexOfNucleotide);
-
-    const lastNucleotideIndex = this.config.nucleotideSequences[strand].length;
-    const lastStar = this.svgFactory.createPhosphorothioateLinkageStar(strand, lastNucleotideIndex);
-
-    const nucleotideSvgElements = [
-      nucleotideNumericLabel,
-      nucleotideCircle,
-      nucleotideNameLabel,
-      phosphorothioateLinkageStar,
-      lastStar,
-    ].filter((element) => element !== null) as SVGElement[];
 
-    return nucleotideSvgElements;
+  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/translator/view/ui.ts

@@ -165,7 +165,7 @@ class TranslatorAppLayout {
       translatedColumn.semType = DG.SEMTYPE.MACROMOLECULE;
       const units = outputFormat == NUCLEOTIDES_FORMAT ? NOTATION.FASTA : NOTATION.HELM;
       translatedColumn.setTag(DG.TAGS.UNITS, units);
-      const seqHandler = SeqHandler.forColumn(translatedColumn);
+      const seqHandler = SeqHandler.forColumn(translatedColumn as DG.Column<string>);
       const setUnits = outputFormat == NUCLEOTIDES_FORMAT ? SeqHandler.setUnitsToFastaColumn :
         SeqHandler.setUnitsToHelmColumn;
       setUnits(seqHandler);