@datagrok/sequence-translator 1.2.9 → 1.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"
@@ -13,13 +13,13 @@
     "directory": "packages/SequenceTranslator"
   },
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.40.3",
+    "@datagrok-libraries/bio": "^5.41.9",
     "@datagrok-libraries/chem-meta": "^1.2.3",
     "@datagrok-libraries/tutorials": "^1.3.12",
     "@datagrok-libraries/utils": "^4.1.45",
     "@types/react": "^18.0.15",
     "cash-dom": "^8.1.0",
-    "datagrok-api": "^1.18.2",
+    "datagrok-api": "^1.18.6",
     "lodash": "^4.17.21",
     "object-hash": "^3.0.0",
     "openchemlib": "6.0.1",
@@ -51,6 +51,7 @@
   },
   "scripts": {
     "link-api": "npm link datagrok-api",
+    "link-bio": "npm link @datagrok-libraries/bio",
     "link-all": "npm link @datagrok-libraries/chem-meta datagrok-api @datagrok-libraries/utils @datagrok-libraries/bio @datagrok-libraries/tutorials",
     "debug-sequencetranslator": "grok publish",
     "release-sequencetranslator": "grok publish localhost --release",

package/src/apps/pattern/model/event-bus.ts

@@ -1,7 +1,7 @@
 /* Do not change these import lines to match external modules in webpack configuration */
 import * as DG from 'datagrok-api/dg';
 import * as rxjs from 'rxjs';
-import {debounceTime, map, skip, switchMap} from 'rxjs/operators';
+import {debounceTime, throttleTime, map, skip, switchMap} from 'rxjs/operators';
 
 import {
   GRAPH_SETTINGS_KEYS as G, LEGEND_SETTINGS_KEYS as L, PATTERN_RECORD_KEYS as R, STRAND, STRANDS, TERMINI, TERMINUS
@@ -49,7 +49,9 @@ export class EventBus {
   private _patternHasUnsavedChanges$ = new rxjs.BehaviorSubject<boolean>(false);
   private _lastLoadedPatternConfig: rxjs.BehaviorSubject<PatternConfiguration >;
 
-  private _selectedColumn = new rxjs.BehaviorSubject<{strand: string, colName: string} | null>(null);
+  private _selectedStrandColumn = new rxjs.BehaviorSubject<{[strand: string]: string | null} | null>(null);
+  private _selectedIdColumn = new rxjs.BehaviorSubject<string | null>(null);
+
 
   constructor(
     private dataManager: DataManager,
@@ -459,12 +461,27 @@ export class EventBus {
     return this._patternHasUnsavedChanges$.asObservable();
   }
 
-  selectColumn(strand: StrandType, colName: string) {
-    this._selectedColumn.next({strand, colName});
+  selectStrandColumn(strand: StrandType, colName: string | null) {
+    this._selectedStrandColumn.next({...this._selectedStrandColumn.getValue(), [strand]: colName});
+  }
+
+  getSelectedStrandColumn(strand: StrandType): string | null {
+    const value = this._selectedStrandColumn.getValue();
+    return value ? value[strand] : null;
+  }
+
+  selectIdColumn(colName: string) {
+    this._selectedIdColumn.next(colName);
+  }
+
+  getSelectedIdColumn(): string | null {
+    return this._selectedIdColumn.getValue();
   }
 
-  getSelectedColumn(strand: StrandType): string | null {
-    return this._selectedColumn.getValue()?.colName ?? null;
+  get updateSvgContainer$(): rxjs.Observable<void> {
+    return this.patternStateChanged$.pipe(
+      debounceTime(100)
+    );
   }
 }
 

package/src/apps/pattern/model/translator.ts

@@ -1,5 +1,31 @@
-import {TERMINI, TERMINUS} from './const';
+import * as grok from 'datagrok-api/grok';
+import {STRAND, STRANDS, TERMINI, TERMINUS} from './const';
 import {PATTERN_APP_DATA} from '../../common/model/data-loader/json-loader';
+import {EventBus} from './event-bus';
+
+export function bulkTranslate(eventBus: EventBus): void {
+  const df = eventBus.getTableSelection();
+  if (!df) {
+    grok.shell.warning('Please select a table');
+    return;
+  }
+  const strandColNames = STRANDS.filter(
+    (strand) => !(strand === STRAND.ANTISENSE && !eventBus.isAntisenseStrandActive())
+  ).map((strand) => eventBus.getSelectedStrandColumn(strand))
+    .filter((colName) => colName) as string[];
+
+  if (strandColNames.length === 0) {
+    grok.shell.warning('Please column for sense strand');
+    return;
+  }
+
+  const idColumnName = eventBus.getSelectedIdColumn();
+  if (!idColumnName) throw new Error('No ID column selected');
+
+  const idColumn = df.getCol(idColumnName);
+
+  const strandCols = strandColNames.map((colName) => df.getCol(colName));
+}
 
 export function applyPatternToRawSequence(
   rawNucleotideSequence: string,

package/src/apps/pattern/view/components/bulk-convert/column-input.ts

@@ -27,7 +27,6 @@ export class ColumnInputManager {
 
   private handleTableChoice(): void {
     this.refreshColumnControls();
-    // grok.shell.info(`Table ${this.selectedTable?.name} selection from column input manager`);
   }
 
   private refreshColumnControls(): void {
@@ -40,6 +39,10 @@ export class ColumnInputManager {
     const senseStrandColumnInput = strandColumnInput[STRAND.SENSE];
     const antisenseStrandColumnInput = strandColumnInput[STRAND.ANTISENSE];
 
+    this.eventBus.antisenseStrandToggled$.subscribe((isAntisenseActive) => {
+      $(antisenseStrandColumnInput).toggle(isAntisenseActive);
+    });
+
     const idColumnInput = this.createIdColumnInput();
 
     return [senseStrandColumnInput, antisenseStrandColumnInput, idColumnInput];
@@ -54,8 +57,9 @@ export class ColumnInputManager {
         `${STRAND_LABEL[strand]} column`,
         columns[0],
         columns,
-        (colName: string) => this.eventBus.selectColumn(strand, colName)
+        (colName: string) => this.eventBus.selectStrandColumn(strand, colName)
       );
+      this.eventBus.selectStrandColumn(strand, columns[0]);
       return [strand, input.root];
     })) as Record<StrandType, HTMLElement>;
     return strandColumnInput;
@@ -63,7 +67,13 @@ export class ColumnInputManager {
 
   private createIdColumnInput(): HTMLElement {
     const columns = this.selectedTable ? this.selectedTable.columns.names() : [];
-    const idColumnInput = ui.choiceInput('ID column', columns[0], columns, () => { });
+    const idColumnInput = ui.choiceInput(
+      'ID column',
+      columns[0],
+      columns,
+      (colName: string) => this.eventBus.selectIdColumn(colName)
+    );
+    this.eventBus.selectIdColumn(columns[0]);
     return idColumnInput.root;
   }
 }

package/src/apps/pattern/view/components/bulk-convert/table-controls.ts

@@ -4,7 +4,7 @@ import '../../style.css';
 import {EventBus} from '../../../model/event-bus';
 import {ColumnInputManager} from './column-input';
 import {TableInputManager} from './table-input';
-import {STRAND} from '../../../model/const';
+import {bulkTranslate} from '../../../model/translator';
 
 export class TableControlsManager {
   private tableInputManager: TableInputManager;
@@ -20,18 +20,19 @@ export class TableControlsManager {
     const tableInput = this.tableInputManager.getTableInputContainer();
     const columnControls = this.columnInputManager.getColumnControlsContainer();
 
-    const convertSequenceButton = ui.bigButton('Convert', () => this.processConvertButtonClick());
+    const convertButton = ui.bigButton('Convert', () => this.processConvertButtonClick());
 
     return [
       title,
       tableInput,
       columnControls,
       ui.buttonsInput([
-        convertSequenceButton,
+        convertButton,
       ]),
     ];
   }
 
   private processConvertButtonClick(): void {
+    bulkTranslate(this.eventBus);
   }
 }

package/src/apps/pattern/view/components/load-block-controls.ts

@@ -153,7 +153,7 @@ export class PatternLoadControlsManager {
     this.subscriptions.add(
       this.eventBus.patternLoaded$.subscribe(() => {
         const patternName = this.eventBus.getPatternName();
-        if (!choiceInput.value?.includes(patternName))
+        if (choiceInput.value !== patternName)
           choiceInput.value = this.getPatternName(patternList);
       })
     );
@@ -162,7 +162,9 @@ export class PatternLoadControlsManager {
   }
 
   private getPatternName(patternList: string[]): string {
-    return patternList.find((patternName) => patternName.includes(this.eventBus.getPatternName())) ?? patternList[0];
+    return patternList.find(
+      (patternName) => patternName === this.eventBus.getPatternName()
+    ) ?? patternList[0];
   }
 
   private createDeletePatternButton(): HTMLButtonElement {

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

@@ -1,5 +1,7 @@
 import {STRAND, TERMINUS, STRAND_END} from '../../model/const';
 
+export const LEGEND_PADDING = 10;
+
 export const enum LUMINANCE_COEFFICIENTS {
   RED = 0.299,
   GREEN = 0.587,
@@ -21,7 +23,7 @@ export const enum SVG_CIRCLE_SIZES {
 
 export const enum SVG_TEXT_FONT_SIZES {
   NUCLEOBASE = 17,
-  COMMENT = 14,
+  COMMENT = 15,
 };
 
 export const enum SVG_ELEMENT_COLORS {
@@ -61,3 +63,15 @@ export const Y_POSITIONS_FOR_STRAND_ELEMENTS = {
     NUCLEOBASE_LABEL: 7 * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS,
   }
 };
+
+export const MIN_WIDTH = 200;
+
+export const TITLE_SHIFT = 10;
+
+export const enum FONT_SIZE {
+  TITLE = 17,
+  LEGEND = 14,
+  NUCLEOBASE = 17,
+  COMMENT = 14,
+}
+

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

@@ -0,0 +1,92 @@
+import {PatternConfiguration} from '../../model/types';
+import {LEGEND_PADDING, 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 {getNucleobaseColorFromStyleMap} from './utils';
+
+export class LegendBlock extends SVGBlockBase {
+  private _svgElements: SVGElement[] = [];
+  private width: number;
+
+  constructor(
+    svgElementFactory: SVGElementFactory,
+    config: PatternConfiguration,
+    heightShift: number
+  ) {
+    super(svgElementFactory, config, heightShift);
+    const {elements, width} = this.createLegendItems();
+    this._svgElements = elements;
+    this.width = width;
+  }
+
+  private isPhosphorothioatePresent(): boolean {
+    return Object.values(this.config.phosphorothioateLinkageFlags)
+      .flat().some((element) => element);
+  }
+
+  private getModificationTypesList(): string[] {
+    return [...new Set(
+      Object.values(this.config.nucleotideSequences).flat().sort(
+        (a, b) => a.toLowerCase().localeCompare(b.toLowerCase())
+      )
+    )];
+  }
+
+  get svgElements(): SVGElement[] {
+    return this._svgElements;
+  }
+
+  private createLegendItem(
+    name: string,
+    xShift: number
+  ): {elements: SVGElement[], width: number} {
+    const circlePosition = {
+      x: xShift,
+      y: this.yShift - SVG_CIRCLE_SIZES.LEGEND_RADIUS
+    };
+
+    const circle = name.includes('linkage') ?
+      this.svgElementFactory.createStarElement(circlePosition, SVG_ELEMENT_COLORS.LINKAGE_STAR) :
+      this.svgElementFactory
+        .createCircleElement(circlePosition, SVG_CIRCLE_SIZES.LEGEND_RADIUS, getNucleobaseColorFromStyleMap(name));
+    const paddedCircleWidth = 2 * SVG_CIRCLE_SIZES.LEGEND_RADIUS;
+    xShift += paddedCircleWidth;
+
+    const textPosition = {y: this.yShift, x: xShift};
+
+    const textElement = this.svgElementFactory
+      .createTextElement(name, textPosition, SVG_TEXT_FONT_SIZES.COMMENT, SVG_ELEMENT_COLORS.TEXT);
+    const textWidth = TextDimensionsCalculator.getTextDimensions(name, SVG_TEXT_FONT_SIZES.COMMENT).width;
+
+    return {elements: [circle, textElement], width: paddedCircleWidth + textWidth};
+  }
+
+  private createLegendItems(): { elements: SVGElement[], width: number } {
+    let xShift = LEGEND_PADDING;
+    const items = [] as SVGElement[][];
+
+    const shift = (width: number) => xShift += width + 15;
+
+    if (this.isPhosphorothioatePresent()) {
+      const {elements, width} = this.createLegendItem('PTO linkage', xShift);
+      shift(width);
+      items.push(elements);
+    }
+
+    const modificationTypes = this.getModificationTypesList();
+    modificationTypes.forEach((name) => {
+      const {elements, width} = this.createLegendItem(name, xShift);
+      shift(width);
+      items.push(elements);
+    });
+
+    return {elements: items.flat(), width: xShift};
+  }
+
+  getContentHeight(): number { return 20; };
+
+  getContentWidth(): number {
+    return this.width;
+  }
+}

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