@datagrok/sequence-translator 1.2.9 → 1.3.1

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

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