@datagrok/sequence-translator 1.2.9 → 1.3.1

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);

package/src/package.ts

@@ -1,5 +1,6 @@
 import DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
+
 import {loadJsonData} from './apps/common/model/data-loader/json-loader';
 import {MonomerLibWrapper} from './apps/common/model/monomer-lib/lib-wrapper';
 import {OligoToolkitPackage} from './apps/common/model/oligo-toolkit-package';
@@ -14,10 +15,12 @@ import {FormatConverter} from './apps/translator/model/format-converter';
 import {demoOligoPatternUI, demoOligoStructureUI, demoOligoTranslatorUI} from './demo/demo-st-ui';
 import {getExternalAppViewFactories} from './plugins/mermade';
 
-import {getPolyToolDialog} from './polytool/ui';
+//polytool specific
+import {getPolyToolConversionDialog, getPolyToolEnumerationDialog} from './polytool/pt-dialog';
 import {_setPeptideColumn} from './polytool/utils';
 import {PolyToolCsvLibHandler} from './polytool/csv-to-json-monomer-lib-converter';
 
+
 export const _package: OligoToolkitPackage = new OligoToolkitPackage();
 
 //name: Oligo Toolkit
@@ -145,16 +148,29 @@ async function getSpecifiedAppView(appName: string): Promise<DG.ViewBase> {
   return view;
 }
 
-//top-menu: Bio | Convert | PolyTool
-//name: polyTool
+//top-menu: Bio | Convert | PolyTool-Convert
+//name: polyToolConvert
+//description: Perform cyclization of polymers
+export async function polyToolConvert(): Promise<void> {
+  let dialog: DG.Dialog;
+  try {
+    dialog = await getPolyToolConversionDialog();
+    dialog.show();
+  } catch (err: any) {
+    grok.shell.warning('To run PolyTool Conversion, open a dataframe with macromolecules');
+  }
+}
+
+//top-menu: Bio | Convert | PolyTool-Enumerate
+//name: polyToolEnumerate
 //description: Perform cyclization of polymers
-export async function polyTool(): Promise<void> {
+export async function polyToolEnumerate(): Promise<void> {
   let dialog: DG.Dialog;
   try {
-    dialog = await getPolyToolDialog();
+    dialog = await getPolyToolEnumerationDialog();
     dialog.show();
   } catch (err: any) {
-    grok.shell.warning('To run PolyTool, open a dataframe with macromolecules');
+    grok.shell.warning('To run PolyTool Enumeration, sketch the macromolecule and select monomers to vary');
   }
 }
 

package/src/polytool/const.ts

@@ -1,17 +1,5 @@
 import {HELM_REQUIRED_FIELD} from '@datagrok-libraries/bio/src/utils/const';
 
-export const ALL_MONOMERS = '<All>';
-
-export const enum TRANSFORMATION_TYPE {
-  CYCLIZATION = 'Cyclization',
-}
-
-export const enum CYCLIZATION_TYPE {
-  NO = 'N-O',
-  NCys = 'N-Cys',
-  R3 = 'R3-R3',
-}
-
 export const helmFieldsToPolyToolInputFields = {
   [HELM_REQUIRED_FIELD.SYMBOL]: 'Short Name',
   [HELM_REQUIRED_FIELD.NAME]: 'Medium Name',
@@ -20,19 +8,19 @@ export const helmFieldsToPolyToolInputFields = {
 
 export const R_GROUP_BLOCK_DUMMY = [
   {
-    'capGroupSMILES': '[*:1][H]',
+    'capGroupSmiles': '[*:1][H]',
     'alternateId': 'R1-H',
     'capGroupName': 'H',
     'label': 'R1'
   },
   {
-    'capGroupSMILES': 'O[*:2]',
+    'capGroupSmiles': 'O[*:2]',
     'alternateId': 'R2-OH',
     'capGroupName': 'OH',
     'label': 'R2'
   },
   {
-    'capGroupSMILES': '[*:3][H]',
+    'capGroupSmiles': '[*:3][H]',
     'alternateId': 'R3-H',
     'capGroupName': 'H',
     'label': 'R3'