@datagrok/sequence-translator 1.2.6 → 1.2.9

package/src/apps/pattern/view/components/strand-editor/strand-controls.ts

@@ -0,0 +1,159 @@
+import * as ui from 'datagrok-api/ui';
+
+import $ from 'cash-dom';
+
+import {PATTERN_APP_DATA} from '../../../../common/model/data-loader/json-loader';
+import {STRAND, STRANDS, STRAND_LABEL} from '../../../model/const';
+import {EventBus} from '../../../model/event-bus';
+import {StrandType} from '../../../model/types';
+import {isOverhangNucleotide} from '../../../model/utils';
+import {BooleanInput, StringInput} from '../../types';
+import {SubscriptionManager} from '../../../model/subscription-manager';
+import {DataManager} from '../../../model/data-manager';
+
+export class StrandControls {
+  private displayedInputLabels: Map<StrandType, string[]>;
+
+  constructor(
+    private eventBus: EventBus,
+    private dataManager: DataManager,
+    private subscriptions: SubscriptionManager
+  ) {
+    const subscription = this.eventBus.nucleotideSequencesChanged$.subscribe(() => {
+      this.displayedInputLabels = this.computeDisplayedInputLabels();
+    });
+    this.subscriptions.add(subscription);
+  }
+
+  create(): HTMLDivElement {
+    const inputPanels = STRANDS.map((strand) => this.constructControlsPanel(strand));
+
+    const container = ui.divH(inputPanels, {style: {gap: '24px'}});
+    return container;
+  }
+
+  private constructControlsPanel(strand: StrandType): HTMLDivElement {
+    if (!this.eventBus.isAntisenseStrandActive() && strand === STRAND.ANTISENSE)
+      return ui.div([]);
+
+
+    const header = this.constructHeader();
+    const modificationControls = this.createControls(strand);
+
+    const container = ui.block([
+      ui.h1(`${STRAND_LABEL[strand]}`),
+      header,
+      modificationControls,
+    ], {style: {paddingTop: '12px'}});
+
+    return container;
+  }
+
+  private constructHeader() {
+    return ui.divH([
+      ui.div([ui.divText('#')], {style: {width: '20px'}}),
+      ui.block75([ui.divText('Modification')]),
+      ui.div([ui.divText('PTO')]),
+    ]);
+  }
+
+  private createControls(strand: StrandType): HTMLDivElement {
+    const nucleobaseInputs = this.createNucleobaseInputs(strand);
+    const labels = this.createLabelDivs(strand);
+    const ptoLinkageInputs = this.createPTOFlagInputs(strand);
+    const container = ui.div(nucleobaseInputs.map(
+      (nucleobaseInput, idx) => {
+        return ui.divH([
+          labels[idx],
+          ui.block75([nucleobaseInput.root]),
+          ptoLinkageInputs[idx].root,
+        ], {style: {alignItems: 'center'}});
+      }));
+    return container;
+  }
+
+  private createNucleobaseInputs(strand: StrandType): StringInput[] {
+    const nucleotideBaseChoices: string[] = this.dataManager.fetchAvailableNucleotideBases()
+      .sort(
+        (a, b) => a.toLowerCase().localeCompare(b.toLowerCase())
+      );
+    const nucleotides = this.eventBus.getNucleotideSequences()[strand];
+    const choiceInputs = nucleotides.map((nucleotide, index) => {
+      const input = ui.choiceInput<string>('', nucleotide, nucleotideBaseChoices);
+      input.onInput(() => {
+        const newValue = input.value!;
+        this.eventBus.setNucleotide(strand, index, newValue);
+      });
+      return input;
+    });
+
+    return choiceInputs;
+  }
+
+  private createPTOFlagInputs(strand: StrandType): BooleanInput[] {
+    const ptoLinkageFlags = this.eventBus.getPhosphorothioateLinkageFlags()[strand].slice(1);
+    const ptoLinkageInputs = ptoLinkageFlags.map((flag, index) => {
+      const input = ui.boolInput('', flag);
+      input.onInput(() => {
+        const newValue = input.value!;
+        this.eventBus.setPhosphorothioateLinkageFlag(strand, index + 1, newValue);
+      });
+
+      const subscription = this.eventBus.phosphorothioateLingeFlagsChanged$.subscribe((flags) => {
+        const newValue = flags[strand][index + 1];
+        input.value = newValue;
+      });
+      this.subscriptions.add(subscription);
+
+      return input;
+    });
+
+    return ptoLinkageInputs;
+  }
+
+  private computeDisplayedInputLabels(): Map<StrandType, string[]> {
+    const nucleotides = this.eventBus.getNucleotideSequences();
+    const labels = new Map<StrandType, string[]>();
+    STRANDS.forEach((strand) => {
+      let counter = 1;
+      const strandNucleotides = nucleotides[strand];
+      const strandLabels = strandNucleotides.map((nucleotide) => {
+        if (isOverhangNucleotide(nucleotide))
+          return '';
+
+        const label = String(counter);
+        counter++;
+        return label;
+      });
+      labels.set(strand, strandLabels);
+    });
+
+    return labels;
+  }
+
+  private createLabelDivs(strand: StrandType): HTMLElement[] {
+    const labels = this.createLabels(strand);
+    const labelDivs = labels.map((label) => ui.div([label], {style: {width: '20px'}}));
+
+    const subscription = this.eventBus.nucleotideSequencesChanged$.subscribe(() => {
+      const newLabels = this.createLabels(strand);
+      newLabels.forEach((newLabel, index) => {
+        $(labelDivs[index]).empty();
+        $(labelDivs[index]).append(newLabel);
+      });
+    });
+    this.subscriptions.add(subscription);
+
+    return labelDivs;
+  }
+
+  private createLabels(strand: StrandType): HTMLLabelElement[] {
+    const nucleotides = this.eventBus.getNucleotideSequences()[strand];
+    const labels = nucleotides.map((_, index) => {
+      const labelText = this.displayedInputLabels.get(strand)![index];
+      return ui.label(labelText);
+    });
+
+    return labels;
+  }
+}

package/src/apps/pattern/view/components/terminal-modification-editor.ts

@@ -0,0 +1,127 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+
+import $ from 'cash-dom';
+import _ from 'lodash';
+
+import {EventBus} from '../../model/event-bus';
+import {PatternConfiguration, StrandType} from '../../model/types';
+import {SubscriptionManager} from '../../model/subscription-manager';
+import {STRAND, STRANDS, STRAND_LABEL, TERMINI, TERMINUS} from '../../model/const';
+import {StringInput} from '../types';
+
+export class TerminalModificationEditorDialog {
+  private static isDialogOpen = false;
+  private static instance: TerminalModificationEditorDialog;
+
+  private initialPatternConfig: PatternConfiguration;
+  private subscriptions = new SubscriptionManager();
+
+  private constructor(
+    private eventBus: EventBus
+  ) { }
+
+  static open(eventBus: EventBus): void {
+    if (TerminalModificationEditorDialog.isDialogOpen)
+      return;
+
+    if (!TerminalModificationEditorDialog.instance)
+      TerminalModificationEditorDialog.instance = new TerminalModificationEditorDialog(eventBus);
+
+    TerminalModificationEditorDialog.instance.openDialog();
+  }
+
+  private openDialog(): void {
+    this.initialPatternConfig = _.cloneDeep(this.eventBus.getPatternConfig());
+    TerminalModificationEditorDialog.isDialogOpen = true;
+    this.createDialog().show();
+  }
+
+  private createDialog(): DG.Dialog {
+    const editorBody = ui.divV([]);
+    this.subscriptions.add(
+      this.eventBus.strandsUpdated$.subscribe(() => this.onStrandsUpdated(editorBody))
+    );
+
+    const dialog = ui.dialog('Edit terminal modifications')
+      .add(editorBody)
+      .onOK(() => {})
+      .onCancel(() => this.resetToInitialState());
+
+    this.subscriptions.add(
+      dialog.onClose.subscribe(() => {
+        TerminalModificationEditorDialog.isDialogOpen = false;
+        this.subscriptions.unsubscribeAll();
+      })
+    );
+
+    return dialog;
+  }
+
+  private onStrandsUpdated(editorBody: HTMLDivElement) {
+    const controls = new StrandTerminalModificationControls(this.eventBus).create();
+
+    $(editorBody).empty();
+    $(editorBody).append(controls);
+  }
+
+  private resetToInitialState(): void {
+    // this.eventBus.setLastLoadedPatternConfig(this.initialPatternConfig);
+    this.eventBus.setPatternConfig(this.initialPatternConfig);
+  }
+}
+
+class StrandTerminalModificationControls {
+  constructor(
+    private eventBus: EventBus
+  ) { }
+
+  create(): HTMLDivElement {
+    const inputPanels = STRANDS.map((strand) => this.constructControlsPanel(strand));
+
+    const container = ui.divH(inputPanels, {style: {gap: '24px'}});
+    return container;
+  }
+
+  private constructControlsPanel(strand: StrandType): HTMLDivElement {
+    if (!this.eventBus.isAntisenseStrandActive() && strand === STRAND.ANTISENSE)
+      return ui.div([]);
+
+    const modificationControls = this.createInputs(strand);
+
+    const container = ui.block([
+      ui.h1(`${STRAND_LABEL[strand]}`),
+      modificationControls,
+    ], {style: {paddingTop: '12px'}});
+
+    return container;
+  }
+
+  private createInputs(strand: StrandType): HTMLElement {
+    const termini = strand === STRAND.SENSE ? [...TERMINI].reverse() : TERMINI;
+    const inputs = termini.map((terminus) => this.createInputForTerminus(strand, terminus)) as DG.InputBase[];
+    return ui.form(inputs);
+  }
+
+  private createInputForTerminus(strand: StrandType, terminus: TERMINUS): StringInput {
+    const initialValue = this.eventBus.getTerminalModifications()[strand][terminus];
+    const input = ui.textInput(terminus, initialValue);
+    this.applyStylingToInput(input);
+
+    input.onInput(() => {
+      const newValue = input.value;
+      if (newValue === null)
+        return;
+
+      this.eventBus.updateTerminusModification(strand, terminus, newValue);
+    });
+
+    return input;
+  }
+
+  private applyStylingToInput(input: StringInput): void {
+    const textarea = input.root.getElementsByTagName('textarea')[0];
+    $(textarea).css('resize', 'none');
+  }
+}

package/src/apps/pattern/view/components/translation-examples-block.ts

@@ -0,0 +1,139 @@
+import * as ui from 'datagrok-api/ui';
+
+import '../style.css';
+
+import {StringInput} from '../types';
+
+import $ from 'cash-dom';
+import {NUCLEOTIDES} from '../../../common/model/const';
+import {STRAND, STRANDS, STRAND_LABEL} from '../../model/const';
+import {DataManager} from '../../model/data-manager';
+import {EventBus} from '../../model/event-bus';
+import {applyPatternToRawSequence} from '../../model/translator';
+import {SubscriptionManager} from '../../model/subscription-manager';
+
+
+export class TranslationExamplesBlock {
+  private subscriptions = new SubscriptionManager();
+  constructor(
+    private eventBus: EventBus,
+    private dataManager: DataManager
+  ) { }
+
+  createContainer(): HTMLDivElement {
+    return ui.div([
+      ui.h1('Translation example'),
+      this.createTranslationExamples(),
+    ], {style: {paddingTop: '20px'}});
+  }
+
+  private createTranslationExamples(): HTMLDivElement {
+    const strandExamples = ui.divH([
+      ...this.getExampleElements(),
+    ], 'ui-form');
+
+    this.eventBus.antisenseStrandToggled$.subscribe(() => {
+      this.subscriptions.unsubscribeAll();
+      $(strandExamples).empty();
+      $(strandExamples).append(this.getExampleElements());
+    });
+
+    return strandExamples;
+  }
+
+  private getExampleElements(): HTMLDivElement[] {
+    return STRANDS.map(
+      (strand) => new StrandExample(strand, this.eventBus, this.subscriptions).create()
+    );
+  }
+}
+
+class StrandExample {
+  private inputExample: StringInput;
+  private outputExample: StringInput;
+
+  constructor(
+    private strand: STRAND,
+    private eventBus: EventBus,
+    private subscriptions: SubscriptionManager
+  ) { }
+
+  create(): HTMLDivElement {
+    if (!this.eventBus.isAntisenseStrandActive() && this.strand === STRAND.ANTISENSE)
+      return ui.div([]);
+
+    this.inputExample = this.createInputExample();
+    this.outputExample = this.createOutputExample(this.inputExample.value!);
+    this.subscribeToEvents();
+
+    const strandExample = ui.block50([
+      ui.h2(STRAND_LABEL[this.strand]),
+      this.inputExample.root,
+      this.outputExample.root,
+    ], {style: {paddingRight: '20px'}});
+    return strandExample;
+  }
+
+  private subscribeToEvents(): void {
+    const subscription = this.eventBus.strandsLinkagesAndTerminalsUpdated$.subscribe(() => {
+      const exampleInputSequence = this.generateExampleSequence();
+      this.inputExample.value = exampleInputSequence;
+      this.outputExample.value = this.computeOutputValue(exampleInputSequence);
+    });
+
+    if (this.strand === STRAND.ANTISENSE)
+      this.subscriptions.add(subscription);
+  }
+
+  private createInputExample(): StringInput {
+    const input = this.createTextInputForExamples();
+
+    const exampleInputSequence = this.generateExampleSequence();
+    input.value = exampleInputSequence;
+
+    input.setTooltip(`Example raw nucleotides input for ${STRAND_LABEL[this.strand]}`);
+
+    return input;
+  }
+
+  private generateExampleSequence(): string {
+    const sourceSequence = this.eventBus.getNucleotideSequences()[this.strand];
+    const exampleSequence = sourceSequence.map((_, index) => {
+      return NUCLEOTIDES[index % NUCLEOTIDES.length];
+    }).join('');
+
+    return exampleSequence;
+  }
+
+  private createOutputExample(exampleInputSequence: string): StringInput {
+    const output = this.createTextInputForExamples();
+    output.value = this.computeOutputValue(exampleInputSequence);
+
+    output.setTooltip(`Pattern applied to the example input for ${STRAND_LABEL[this.strand]}`);
+
+    return output;
+  }
+
+  private computeOutputValue(exampleInputSequence: string): string {
+    const modifications = this.eventBus.getNucleotideSequences()[this.strand];
+    const terminals = this.eventBus.getTerminalModifications()[this.strand];
+    const ptoFlags = this.eventBus.getPhosphorothioateLinkageFlags()[this.strand];
+    return applyPatternToRawSequence(
+      exampleInputSequence, modifications, ptoFlags, terminals
+    );
+  }
+
+  private createTextInputForExamples(): StringInput {
+    const input = ui.textInput('', '');
+    this.applyStylingToInput(input);
+
+    return input;
+  }
+
+  private applyStylingToInput(input: StringInput): void {
+    const textarea = input.root.getElementsByTagName('textarea')[0];
+    textarea.setAttribute('readonly', 'true');
+    $(textarea).css('resize', 'none');
+    $(input.root).css('opacity', '75%');
+  }
+}

package/src/{view/style/pattern-app.css → apps/pattern/view/style.css}

@@ -1 +1,5 @@
 /* Naming convention: class names should begin with st and app name to avoid naming collitions */
+
+.st-pattern-text-input > textarea {
+  resize: none;
+}

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

@@ -0,0 +1,63 @@
+import {STRAND, TERMINUS, STRAND_END} from '../../model/const';
+
+export const enum LUMINANCE_COEFFICIENTS {
+  RED = 0.299,
+  GREEN = 0.587,
+  BLUE = 0.114,
+  THRESHOLD = 186,
+};
+
+export const enum TEXT_COLOR {
+  DARK = '#333333',
+  LIGHT = '#ffffff',
+};
+
+export const enum SVG_CIRCLE_SIZES {
+  NUCLEOBASE_RADIUS = 15,
+  NUCLEOBASE_DIAMETER = 2 * NUCLEOBASE_RADIUS,
+  LEGEND_RADIUS = 6,
+  LINKAGE_STAR_RADIUS = 5,
+};
+
+export const enum SVG_TEXT_FONT_SIZES {
+  NUCLEOBASE = 17,
+  COMMENT = 14,
+};
+
+export const enum SVG_ELEMENT_COLORS {
+  LINKAGE_STAR = 'red',
+  TEXT = 'var(--grey-6)',
+  TITLE_TEXT = 'black',
+  MODIFICATION_TEXT = 'red'
+};
+
+export const STRAND_END_LABEL_TEXT = {
+  [STRAND_END.LEFT]: {
+    [STRAND.SENSE]: `${STRAND.SENSE}: ${TERMINUS.FIVE_PRIME}`,
+    [STRAND.ANTISENSE]: `${STRAND.ANTISENSE}: ${TERMINUS.THREE_PRIME}`,
+  },
+  [STRAND_END.RIGHT]: {
+    [STRAND.SENSE]: `${TERMINUS.THREE_PRIME}`,
+    [STRAND.ANTISENSE]: `${TERMINUS.FIVE_PRIME}`,
+  }
+} as const;
+
+export const NUMERIC_LABEL_POSITION_OFFSET = {
+  ONE_DIGIT: -5,
+  TWO_DIGIT: -10,
+} as const;
+
+export const DEFAULT_FONT_FAMILY = 'Arial';
+
+export const Y_POSITIONS_FOR_STRAND_ELEMENTS = {
+  [STRAND.SENSE]: {
+    NUMERIC_LABEL: 2 * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS,
+    NUCLEOBASE_CIRCLE: 3.5 * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS,
+    NUCLEOBASE_LABEL: 4 * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS,
+  },
+  [STRAND.ANTISENSE]: {
+    NUMERIC_LABEL: 8.5 * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS,
+    NUCLEOBASE_CIRCLE: 6.5 * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS,
+    NUCLEOBASE_LABEL: 7 * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS,
+  }
+};