@datagrok/sequence-translator 1.2.7 → 1.3.0

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

@@ -0,0 +1,200 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+
+import {SubscriptionManager} from '../../model/subscription-manager';
+
+import '../style.css';
+
+import {StringInput} from '../types';
+
+import $ from 'cash-dom';
+import {DataManager} from '../../model/data-manager';
+import {EventBus} from '../../model/event-bus';
+
+export class PatternLoadControlsManager {
+  private subscriptions = new SubscriptionManager();
+  private authorSelectedByUser = false;
+
+  constructor(
+    private eventBus: EventBus,
+    private dataManager: DataManager
+  ) {
+    this.eventBus.patternLoadRequested$.subscribe((patternHash: string) => this.handlePatternChoice(patternHash));
+
+    this.eventBus.patternDeletionRequested$.subscribe(async (patternName: string) => {
+      await this.dataManager.deletePattern(patternName, this.eventBus);
+    });
+  }
+
+  private async handlePatternChoice(patternHash: string): Promise<void> {
+    let patternConfiguration = await this.dataManager.getPatternConfig(patternHash);
+    if (patternConfiguration === null)
+      patternConfiguration = this.dataManager.getDefaultPatternConfig();
+
+    this.eventBus.setPatternConfig(patternConfiguration);
+    this.eventBus.updateControlsUponPatternLoaded(patternHash);
+    this.eventBus.setLastLoadedPatternConfig(patternConfiguration);
+  }
+
+  private isCurrentUserSelected(): boolean {
+    return this.eventBus.getSelectedAuthor() !== this.dataManager.getOtherUsersAuthorshipCategory();
+  }
+
+  createControls(): HTMLElement[] {
+    const inputsContainer = this.getPatternInputsContainer();
+    return [
+      ui.h1('Load'),
+      inputsContainer,
+    ];
+  }
+
+  private getPatternInputsContainer(): HTMLDivElement {
+    const inputsContainer = ui.divH(this.createPatternInputs());
+
+    this.eventBus.patternListUpdated$.subscribe(() => {
+      this.subscriptions.unsubscribeAll();
+
+      // todo: change values of selectedPattern and selectedUser here
+
+      $(inputsContainer).empty();
+      $(inputsContainer).append(this.createPatternInputs());
+    });
+
+    return inputsContainer;
+  }
+
+  private createPatternInputs(): HTMLElement[] {
+    const authorChoiceInput = this.createAuthorChoiceInput();
+    const patternChoiceInputContainer = this.createPatternChoiceInputContainer();
+    const deletePatternButton = this.createDeletePatternButton();
+
+    return [
+      authorChoiceInput.root,
+      patternChoiceInputContainer,
+      deletePatternButton
+    ];
+  }
+
+  private createPatternChoiceInputContainer(): HTMLDivElement {
+    const patternChoiceInput = this.createPatternChoiceInput();
+    const patternChoiceInputContainer = ui.div([patternChoiceInput.root]);
+
+    const subscription = this.eventBus.userSelection$.subscribe(() => {
+      $(patternChoiceInputContainer).empty();
+      $(patternChoiceInputContainer).append(this.createPatternChoiceInput().root);
+    });
+    this.subscriptions.add(subscription);
+
+    return patternChoiceInputContainer;
+  }
+
+  private createAuthorChoiceInput(): StringInput {
+    const possibleValues = [this.dataManager.getCurrentUserAuthorshipCategory()];
+    if (this.dataManager.getOtherUsersPatternNames().length > 0)
+      possibleValues.push(this.dataManager.getOtherUsersAuthorshipCategory());
+
+    const authorChoiceInput = ui.choiceInput(
+      'Author',
+      this.eventBus.getSelectedAuthor(),
+      possibleValues,
+      (userName: string) => {
+        this.authorSelectedByUser = true;
+        this.eventBus.selectAuthor(userName);
+      }
+    );
+    this.setAuthorChoiceInputStyle(authorChoiceInput);
+    authorChoiceInput.setTooltip('Select pattern author');
+
+    return authorChoiceInput;
+  }
+
+  private setAuthorChoiceInputStyle(userChoiceInput: StringInput): void {
+    $(userChoiceInput.input).css({
+      'max-width': '100px',
+      'min-width': '100px',
+    });
+    $(userChoiceInput.root).css({
+      'padding-right': '30px',
+      'padding-left': '30px',
+    });
+  }
+
+  private createPatternChoiceInput(): StringInput {
+    const patternList = this.isCurrentUserSelected() ?
+      this.dataManager.getCurrentUserPatternNames() :
+      this.dataManager.getOtherUsersPatternNames();
+
+    if (this.authorSelectedByUser) {
+      const patternHash = this.dataManager.getPatternHash(patternList[0], this.isCurrentUserSelected());
+      this.eventBus.requestPatternLoad(patternHash);
+      this.eventBus.updateUrlState(patternHash);
+      this.authorSelectedByUser = false;
+    }
+
+    const defaultValue = this.getPatternName(patternList);
+    const choiceInput = ui.choiceInput('Pattern', defaultValue, patternList);
+    choiceInput.setTooltip('Select pattern to load');
+
+    $(choiceInput.input).css({
+      'max-width': '100px',
+      'min-width': '100px',
+    });
+
+    this.subscriptions.add(
+      choiceInput.onInput(
+        () => {
+          const patternHash = this.dataManager.getPatternHash(choiceInput.value!, this.isCurrentUserSelected());
+          this.eventBus.requestPatternLoad(patternHash);
+          this.eventBus.updateUrlState(patternHash);
+        }
+      )
+    );
+
+    this.subscriptions.add(
+      this.eventBus.patternLoaded$.subscribe(() => {
+        const patternName = this.eventBus.getPatternName();
+        if (choiceInput.value !== patternName)
+          choiceInput.value = this.getPatternName(patternList);
+      })
+    );
+
+    return choiceInput;
+  }
+
+  private getPatternName(patternList: string[]): string {
+    return patternList.find(
+      (patternName) => patternName === this.eventBus.getPatternName()
+    ) ?? patternList[0];
+  }
+
+  private createDeletePatternButton(): HTMLButtonElement {
+    const button = ui.button(
+      ui.iconFA('trash-alt'),
+      () => {
+        if (this.eventBus.getPatternName() === this.dataManager.getDefaultPatternName()) {
+          grok.shell.warning('Cannot delete example pattern');
+          return;
+        }
+        this.showDeletePatternDialog();
+      }
+    );
+
+    ui.tooltip.bind(button, 'Delete pattern from user storage');
+
+    const subscription = this.eventBus.userSelection$.subscribe(() => {
+      // $(button).toggle(this.isCurrentUserSelected());
+      button.disabled = !this.isCurrentUserSelected();
+    });
+    this.subscriptions.add(subscription);
+
+    return button;
+  }
+
+  private showDeletePatternDialog(): void {
+    const dialog = ui.dialog('Delete pattern');
+    const patternName = this.eventBus.getPatternName();
+    dialog.add(ui.divText(`Are you sure you want to delete pattern ${patternName}?`));
+    dialog.onOK(() => this.eventBus.requestPatternDeletion(patternName));
+    dialog.show();
+  }
+}

package/src/apps/pattern/view/components/numeric-label-visibility-controls.ts

@@ -0,0 +1,69 @@
+import * as ui from 'datagrok-api/ui';
+
+import {EventBus} from '../../model/event-bus';
+import {isOverhangNucleotide} from '../../model/utils';
+import {BooleanInput} from '../types';
+
+import $ from 'cash-dom';
+
+/** Toggles for numeric labels over nucleotides in SVG */
+export class NumericLabelVisibilityControls {
+  private togglesContainer: HTMLDivElement = ui.div([]);
+
+  constructor(
+    private eventBus: EventBus
+  ) {
+    this.eventBus.uniqueNucleotidesChanged$().subscribe(() => {
+      this.updateContainer();
+    });
+  }
+
+  getContainer(): HTMLDivElement {
+    return this.togglesContainer;
+  }
+
+  private updateContainer(): void {
+    $(this.togglesContainer).empty();
+    $(this.togglesContainer).append(this.createInputs());
+  }
+
+  private createInputs(): HTMLDivElement {
+    const uniqueNucleotideBases = this.eventBus.getUniqueNucleotides();
+    const nucleotidesWithoutOverhangs = uniqueNucleotideBases.filter((n) => !isOverhangNucleotide(n));
+
+    const inputBases = nucleotidesWithoutOverhangs.map(
+      (nucleotide: string) => this.createSingleInput(nucleotide)
+    );
+
+    inputBases.sort(
+      (inputA, inputB) => inputA.captionLabel.textContent!.localeCompare(inputB.captionLabel.textContent!)
+    );
+
+    return ui.divH(inputBases.map((input) => input.root));
+  }
+
+  private createSingleInput(nucleotide: string): BooleanInput {
+    const initialValue = this.eventBus.getModificationsWithNumericLabels().includes(nucleotide);
+    const input = ui.boolInput(
+      nucleotide,
+      initialValue,
+      (value: boolean) => this.handleNumericLabelToggle(nucleotide, value)
+    );
+    $(input.root).css('padding-right', '20px');
+
+    input.setTooltip(`Show numeric labels for ${nucleotide}`);
+
+    return input;
+  }
+
+  private handleNumericLabelToggle(nucleotide: string, isVisible: boolean): void {
+    const labelledNucleotides = this.eventBus.getModificationsWithNumericLabels();
+    const hasNumericLabel = labelledNucleotides.includes(nucleotide);
+    if (hasNumericLabel === isVisible)
+      return;
+
+    const newArray = isVisible ? labelledNucleotides.concat(nucleotide) :
+      labelledNucleotides.filter((n) => n !== nucleotide);
+    this.eventBus.updateModificationsWithNumericLabels(newArray);
+  }
+}

package/src/apps/pattern/view/components/right-section.ts

@@ -0,0 +1,148 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+
+import {EventBus} from '../../model/event-bus';
+import {DataManager} from '../../model/data-manager';
+import {PatternExistsError, PatternNameExistsError} from '../../model/types';
+import {SvgDisplayManager} from '../svg-utils/svg-display-manager';
+import {NumericLabelVisibilityControls} from './numeric-label-visibility-controls';
+import {TranslationExamplesBlock} from './translation-examples-block';
+
+export class PatternAppRightSection {
+  private svgDisplay: HTMLDivElement;
+
+  constructor(
+    private eventBus: EventBus,
+    private dataManager: DataManager
+  ) {
+    this.svgDisplay = SvgDisplayManager.createSvgDiv(eventBus);
+  };
+
+  getLayout(): HTMLDivElement {
+    const numericLabelTogglesContainer = new NumericLabelVisibilityControls(this.eventBus).getContainer();
+    const downloadAndEditControls = this.generateDownloadControls();
+    const translationExamplesContainer = new TranslationExamplesBlock(
+      this.eventBus, this.dataManager
+    ).createContainer();
+    const layout = ui.panel([
+      this.svgDisplay,
+      numericLabelTogglesContainer,
+      downloadAndEditControls,
+      translationExamplesContainer,
+      // ui.h1('Additional modifications'),
+      // ui.form([
+      //   terminalModificationInputs[STRAND.SENSE][FIVE_PRIME_END],
+      //   terminalModificationInputs[STRAND.SENSE][THREE_PRIME_END],
+      // ]),
+      // asModificationDiv,
+    ], {style: {overflowX: 'scroll', padding: '12px 24px'}});
+    return layout;
+  }
+
+  private generateDownloadControls(): HTMLDivElement {
+    return ui.divH([
+      this.createSavePatternButton(),
+      this.createDownloadPngButton(),
+      this.createShareLinkButton(),
+    ], {style: {gap: '12px', marginTop: '12px'}});
+  }
+
+  private createDownloadPngButton(): HTMLButtonElement {
+    const svgDownloadButton = ui.button('Get PNG', () => this.eventBus.requestSvgSave());
+
+    ui.tooltip.bind(svgDownloadButton, 'Download pattern as PNG');
+
+    return svgDownloadButton;
+  }
+
+  private createShareLinkButton(): HTMLButtonElement {
+    const shareLinkButton = ui.button(
+      ui.iconFA('link'),
+      () => navigator.clipboard.writeText(window.location.href)
+        .then(() => grok.shell.info('Link to pattern copied to clipboard'))
+    );
+
+    this.eventBus.patternHasUnsavedChanges$.subscribe((hasUnsavedChanges: boolean) => {
+      shareLinkButton.disabled = hasUnsavedChanges;
+    });
+
+    ui.tooltip.bind(shareLinkButton, 'Share pattern link');
+    return shareLinkButton;
+  }
+
+  private createSavePatternButton(): HTMLButtonElement {
+    const savePatternButton = ui.button('Save', () => this.processSaveButtonClick());
+
+    this.eventBus.patternHasUnsavedChanges$.subscribe((hasUnsavedChanges: boolean) => {
+      savePatternButton.disabled = !hasUnsavedChanges;
+    });
+
+    ui.tooltip.bind(savePatternButton, 'Save pattern to user storage');
+
+    return savePatternButton;
+  }
+
+  private processSaveButtonClick(): void {
+    const patternName = this.eventBus.getPatternName();
+    if (patternName === this.dataManager.getDefaultPatternName()) {
+      grok.shell.warning(`Cannot save default pattern`);
+      return;
+    }
+    if (patternName === '') {
+      grok.shell.warning(`Insert pattern name`);
+      return;
+    }
+    this.dataManager.savePatternToUserStorage(this.eventBus)
+      .then(() => {
+        grok.shell.info(`Pattern ${patternName} saved`);
+      })
+      .catch((e) => this.handleErrorWhileSavingPattern(e));
+  }
+
+  private handleErrorWhileSavingPattern(e: Error): void {
+    if (e instanceof PatternNameExistsError) {
+      new OverwritePatternDialog(this.eventBus, this.dataManager).show();
+    } else if (e instanceof PatternExistsError) {
+      grok.shell.warning(ui.div([
+        ui.divText(`Pattern already exists`),
+        ui.button('Load', () => {
+          const hash = e.message;
+          this.eventBus.requestLoadPatternInNewTab(hash);
+        }),
+      ]));
+    } else {
+      console.error('Error while saving pattern', e);
+    }
+  }
+}
+
+class OverwritePatternDialog {
+  constructor(
+    private eventBus: EventBus,
+    private dataManager: DataManager
+  ) { }
+
+  show(): void {
+    const patternName = this.eventBus.getPatternName();
+    const dialog = ui.dialog(`Pattern "${patternName}" already exists`);
+    dialog.add(ui.divText(
+      `Pattern "${patternName}" already exists. Do you want to overwrite it?`
+    ));
+    dialog.show();
+
+    dialog.onOK(() => this.processOverwriteNamesakePattern());
+  }
+
+  private processOverwriteNamesakePattern(): void {
+    const patternName = this.eventBus.getPatternName();
+    this.dataManager.overwritePatternInUserStorage(this.eventBus)
+      .then(() => {
+        grok.shell.info(`Pattern ${patternName} overwritten`);
+      })
+      .catch((e) => {
+        console.error('Error while overwriting pattern in user storage', e);
+        grok.shell.error('Error while overwriting pattern');
+      });
+  }
+}
+

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

@@ -0,0 +1,79 @@
+/* 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} from '../../../model/types';
+import {HeaderControls} from './header-controls';
+import {StrandControls} from './strand-controls';
+import {SubscriptionManager} from '../../../model/subscription-manager';
+import {DataManager} from '../../../model/data-manager';
+
+export class StrandEditorDialog {
+  private static isDialogOpen = false;
+  private static instance: StrandEditorDialog;
+
+  private initialPatternConfig: PatternConfiguration;
+  private subscriptions = new SubscriptionManager();
+
+  private constructor(
+    private eventBus: EventBus,
+    private dataManager: DataManager
+  ) { }
+
+  static open(eventBus: EventBus, dataManager: DataManager): void {
+    if (StrandEditorDialog.isDialogOpen)
+      return;
+
+    if (!StrandEditorDialog.instance)
+      StrandEditorDialog.instance = new StrandEditorDialog(eventBus, dataManager);
+
+    StrandEditorDialog.instance.openDialog();
+  }
+
+  private openDialog(): void {
+    this.initialPatternConfig = _.cloneDeep(this.eventBus.getPatternConfig());
+    StrandEditorDialog.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 strands')
+      .add(editorBody)
+      .onOK(() => {})
+      .onCancel(() => this.resetToInitialState());
+
+    this.subscriptions.add(
+      dialog.onClose.subscribe(() => {
+        StrandEditorDialog.isDialogOpen = false;
+        this.subscriptions.unsubscribeAll();
+      })
+    );
+
+    return dialog;
+  }
+
+  private onStrandsUpdated(editorBody: HTMLDivElement) {
+    const headerControls = new HeaderControls(
+      this.eventBus, this.initialPatternConfig, this.subscriptions
+    ).create();
+    const strandControls = new StrandControls(this.eventBus, this.dataManager, this.subscriptions).create();
+
+    $(editorBody).empty();
+    $(editorBody).append(headerControls, strandControls);
+  }
+
+  private resetToInitialState(): void {
+    // this.eventBus.setLastLoadedPatternConfig(this.initialPatternConfig);
+    this.eventBus.setPatternConfig(this.initialPatternConfig);
+  }
+}
+

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

@@ -0,0 +1,105 @@
+import * as ui from 'datagrok-api/ui';
+
+import {STRAND, STRANDS} from '../../../model/const';
+import {EventBus} from '../../../model/event-bus';
+import {PatternConfiguration, PhosphorothioateLinkageFlags} from '../../../model/types';
+import {BooleanInput} from '../../types';
+import {SubscriptionManager} from '../../../model/subscription-manager';
+
+export class HeaderControls {
+  constructor(
+    private eventBus: EventBus,
+    private initialPatternConfig: PatternConfiguration,
+    private subscriptions: SubscriptionManager
+  ) { }
+
+  create(): HTMLDivElement {
+    const container = ui.divV([
+      ui.h1('PTO'),
+      ui.divH([
+        this.createAllPtoActivationInput().root,
+        ...this.createFirstPtoInputs().map((input) => input.root),
+      ], {style: {gap: '12px'}})
+    ]);
+
+    return container;
+  }
+
+  private areAllPtoLinkagesSet(flags: PhosphorothioateLinkageFlags): boolean {
+    const totalNumberOfPTOFlags = STRANDS.map(
+      (strand) => flags[strand].filter((flag) => flag).length
+    )
+      .reduce((a, b) => a + b, 0);
+
+    const totalNumberOfNucleotides = STRANDS.map(
+      (strand) => this.initialPatternConfig.nucleotideSequences[strand].length
+    ).reduce((a, b) => a + b, 0);
+
+    // There are +1 more PTO flags in each strand than there are nucleotides
+    const addendum = STRANDS.filter((strand) => flags[strand].length).length;
+    return totalNumberOfPTOFlags === totalNumberOfNucleotides + addendum;
+  }
+
+  private createAllPtoActivationInput(): BooleanInput {
+    const flags = this.initialPatternConfig.phosphorothioateLinkageFlags;
+    const initialValue = this.areAllPtoLinkagesSet(flags);
+    const allPtoActivationInput = ui.boolInput('All PTO', initialValue);
+
+    allPtoActivationInput.onInput(() => {
+      const value = allPtoActivationInput.value!;
+      this.eventBus.setAllPTOLinkages(value);
+    });
+
+    const subscription = this.eventBus.phosphorothioateLingeFlagsChanged$.subscribe(() => {
+      const flags = this.eventBus.getPatternConfig().phosphorothioateLinkageFlags;
+      const newValue = this.areAllPtoLinkagesSet(flags);
+      allPtoActivationInput.value = newValue;
+    });
+    this.subscriptions.add(subscription);
+
+    this.addStyleToPtoInput(allPtoActivationInput);
+    ui.tooltip.bind(allPtoActivationInput.captionLabel, 'Activate all phosphothioates');
+
+    return allPtoActivationInput;
+  }
+
+  private addStyleToPtoInput(allPtoActivationInput: BooleanInput): void {
+    const label = allPtoActivationInput.captionLabel;
+    label.classList.add('ui-label-right');
+    Object.assign(label.style, {
+      textAlign: 'left',
+      maxWidth: '100px',
+      minWidth: '40px',
+      width: 'auto'
+    });
+  }
+
+  private createFirstPtoInputs(): BooleanInput [] {
+    return STRANDS.map((strand) => {
+      if (!this.eventBus.isAntisenseStrandActive() && strand === STRAND.ANTISENSE)
+        return;
+      const initialValue = this.isFirstPtoActive(strand);
+      const firstPtoInput = ui.boolInput(`First ${strand} PTO`, initialValue);
+
+      firstPtoInput.onInput(() => {
+        const value = firstPtoInput.value!;
+        this.eventBus.setPhosphorothioateLinkageFlag(strand, 0, value);
+      });
+
+      const subscription = this.eventBus.phosphorothioateLingeFlagsChanged$.subscribe((flags) => {
+        const newValue = flags[strand][0];
+        firstPtoInput.value = newValue;
+      });
+      this.subscriptions.add(subscription);
+
+      this.addStyleToPtoInput(firstPtoInput);
+      ui.tooltip.bind(firstPtoInput.captionLabel, `Activate first phosphothioate in ${strand}`);
+      return firstPtoInput;
+    }).filter((input) => input !== undefined) as BooleanInput[];
+  }
+
+  private isFirstPtoActive(strand: STRAND): boolean {
+    return this.initialPatternConfig.phosphorothioateLinkageFlags[strand][0];
+  }
+}
+