@datagrok/sequence-translator 1.2.7 → 1.3.0

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

@@ -0,0 +1,110 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+
+import {PATTERN_APP_DATA} from '../../common/model/data-loader/json-loader';
+import {NucleotideSequences} from './types';
+
+
+export function isOverhangNucleotide(nucleotide: string): boolean {
+  return nucleotide.endsWith('(o)');
+}
+
+
+export function getUniqueNucleotides(sequences: NucleotideSequences): string[] {
+  const nucleotides = Object.values(sequences).flat();
+  return getUniqueSortedStrings(nucleotides);
+}
+
+
+export function getUniqueNucleotidesWithNumericLabels(
+  modificationsWithNumericLabels: string[]
+): string[] {
+  const uniqueLabelledNucleotides = getUniqueSortedStrings(modificationsWithNumericLabels);
+
+  return uniqueLabelledNucleotides.filter((nucleotide) => !isOverhangNucleotide(nucleotide));
+}
+
+
+export function getMostFrequentNucleotide(sequences: NucleotideSequences): string {
+  const nucleotideToFrequencyMap = Object.values(sequences).flat().reduce((acc, nucleotide) => {
+    acc[nucleotide] = (acc[nucleotide] || 0) + 1;
+    return acc;
+  }, {} as {[key: string]: number});
+
+  const mostFrequentNucleotide = Object.entries(nucleotideToFrequencyMap)
+    .reduce((a, b) => a[1] > b[1] ? a : b, ['', 0])[0];
+
+  return mostFrequentNucleotide;
+}
+
+// export function addColumnWithIds(tableName: string, columnName: string, patternName: string) {
+//   const nameOfNewColumn = 'ID ' + patternName;
+//   const columns = grok.shell.table(tableName).columns;
+//   if (columns.contains(nameOfNewColumn))
+//     columns.remove(nameOfNewColumn);
+//   const columnWithIds = columns.byName(columnName);
+//   return columns.addNewString(nameOfNewColumn).init((i: number) => {
+//     return (columnWithIds.getString(i) === '') ? '' : columnWithIds.get(i) + '_' + patternName;
+//   });
+// }
+
+// export function addColumnWithTranslatedSequences(
+//   tableName: string,
+//   columnName: string,
+//   bases: DG.InputBase[],
+//   ptoLinkages: DG.InputBase[],
+//   startModification: DG.InputBase,
+//   endModification: DG.InputBase,
+//   firstPtoExist: boolean) {
+//   const nameOfNewColumn = 'Axolabs ' + columnName;
+//   const columns = grok.shell.table(tableName).columns;
+//   if (columns.contains(nameOfNewColumn))
+//     columns.remove(nameOfNewColumn);
+//   const columnWithInputSequences = columns.byName(columnName);
+//   return columns.addNewString(nameOfNewColumn).init((i: number) => {
+//     return columnWithInputSequences.getString(i) === '' ?
+//       '' :
+//       translateSequence(columnWithInputSequences.getString(i), bases, ptoLinkages, startModification, endModification,
+//         firstPtoExist);
+//   });
+// }
+
+export namespace StrandEditingUtils {
+  export function getTruncatedStrandData(
+    originalNucleotides: string[],
+    originalPTOFlags: boolean[],
+    newStrandLength: number
+  ): {nucleotides: string[], ptoFlags: boolean[]} {
+    const nucleotides = originalNucleotides.slice(0, newStrandLength);
+    const ptoFlags = originalPTOFlags.slice(0, newStrandLength + 1);
+    return {nucleotides, ptoFlags};
+  }
+
+  export function getExtendedStrandData(
+    originalNucleotides: string[],
+    originalPTOFlags: boolean[],
+    newStrandLength: number,
+    sequenceBase: string
+  ): {nucleotides: string[], ptoFlags: boolean[]} {
+    const appendedNucleotidesLength = newStrandLength - originalNucleotides.length;
+    const nucleotides = originalNucleotides.concat(
+      new Array(newStrandLength - originalNucleotides.length).fill(sequenceBase)
+    );
+
+    const appendedFlagsLength = (originalNucleotides.length === 0) ? newStrandLength + 1 : appendedNucleotidesLength;
+    const ptoFlags = originalPTOFlags.concat(
+      new Array(appendedFlagsLength).fill(true)
+    );
+
+    return {nucleotides, ptoFlags};
+  }
+}
+
+function getUniqueSortedStrings(array: string[]): string[] {
+  const uniqueStrings = Array.from(new Set(array));
+  const sorted = Array.from(uniqueStrings).sort(
+    (a, b) => a.toLowerCase().localeCompare(b.toLowerCase())
+  );
+
+  return sorted;
+}

package/src/apps/pattern/view/components/bulk-convert/column-input.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 '../../style.css';
+
+import {STRAND, STRANDS, STRAND_LABEL} from '../../../model/const';
+import {EventBus} from '../../../model/event-bus';
+import {StrandType} from '../../../model/types';
+
+export class ColumnInputManager {
+  private columnControlsContainer: HTMLDivElement = ui.div([]);
+
+  constructor(private eventBus: EventBus) {
+    this.eventBus.tableSelectionChanged$.subscribe(() => this.handleTableChoice());
+    this.refreshColumnControls();
+  }
+
+  getColumnControlsContainer(): HTMLDivElement {
+    return this.columnControlsContainer;
+  }
+
+  private get selectedTable(): DG.DataFrame | null {
+    return this.eventBus.getTableSelection();
+  }
+
+  private handleTableChoice(): void {
+    this.refreshColumnControls();
+  }
+
+  private refreshColumnControls(): void {
+    $(this.columnControlsContainer).empty();
+    $(this.columnControlsContainer).append(this.constructColumnControls());
+  }
+
+  private constructColumnControls(): HTMLElement[] {
+    const strandColumnInput = this.createStrandColumnInput();
+    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];
+  }
+
+  private createStrandColumnInput(): Record<StrandType, HTMLElement> {
+    const columns = this.selectedTable ?
+      this.selectedTable.columns.names().sort((a, b) => a.localeCompare(b)) :
+      [];
+    const strandColumnInput = Object.fromEntries(STRANDS.map((strand) => {
+      const input = ui.choiceInput(
+        `${STRAND_LABEL[strand]} column`,
+        columns[0],
+        columns,
+        (colName: string) => this.eventBus.selectStrandColumn(strand, colName)
+      );
+      this.eventBus.selectStrandColumn(strand, columns[0]);
+      return [strand, input.root];
+    })) as Record<StrandType, HTMLElement>;
+    return strandColumnInput;
+  }
+
+  private createIdColumnInput(): HTMLElement {
+    const columns = this.selectedTable ? this.selectedTable.columns.names() : [];
+    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

@@ -0,0 +1,38 @@
+import * as ui from 'datagrok-api/ui';
+import '../../style.css';
+
+import {EventBus} from '../../../model/event-bus';
+import {ColumnInputManager} from './column-input';
+import {TableInputManager} from './table-input';
+import {bulkTranslate} from '../../../model/translator';
+
+export class TableControlsManager {
+  private tableInputManager: TableInputManager;
+  private columnInputManager: ColumnInputManager;
+
+  constructor(private eventBus: EventBus) {
+    this.tableInputManager = new TableInputManager(eventBus);
+    this.columnInputManager = new ColumnInputManager(eventBus);
+  }
+
+  createControls(): HTMLElement[] {
+    const title = ui.h1('Bulk convert');
+    const tableInput = this.tableInputManager.getTableInputContainer();
+    const columnControls = this.columnInputManager.getColumnControlsContainer();
+
+    const convertButton = ui.bigButton('Convert', () => this.processConvertButtonClick());
+
+    return [
+      title,
+      tableInput,
+      columnControls,
+      ui.buttonsInput([
+        convertButton,
+      ]),
+    ];
+  }
+
+  private processConvertButtonClick(): void {
+    bulkTranslate(this.eventBus);
+  }
+}

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

@@ -0,0 +1,95 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+
+import $ from 'cash-dom';
+import '../../style.css';
+
+import {EventBus} from '../../../model/event-bus';
+
+export class TableInputManager {
+  private availableTables: DG.DataFrame[] = [];
+  private tableInputContainer: HTMLDivElement = ui.div([]);
+
+  constructor(private eventBus: EventBus) {
+    this.subscribeToTableEvents();
+    this.refreshTableInput();
+  }
+
+  getTableInputContainer(): HTMLDivElement {
+    return this.tableInputContainer;
+  }
+
+  private subscribeToTableEvents(): void {
+    grok.events.onTableAdded.subscribe((eventData) => this.handleTableAdded(eventData));
+    grok.events.onTableRemoved.subscribe((eventData) => this.handleTableRemoved(eventData));
+    this.eventBus.tableSelectionChanged$.subscribe(() => this.handleTableChoice());
+  }
+
+  private getTableFromEventData(eventData: any): DG.DataFrame {
+    if (! eventData && eventData.args && eventData.args.dataFrame instanceof DG.DataFrame)
+      throw new Error(`EventData does not contain a dataframe`, eventData);
+
+    return eventData.args.dataFrame as DG.DataFrame;
+  }
+
+  private handleTableAdded(eventData: any): void {
+    const table = this.getTableFromEventData(eventData);
+
+    if (this.availableTables.some((t: DG.DataFrame) => t.name === table.name))
+      return;
+
+    this.availableTables.push(table);
+    this.eventBus.selectTable(table);
+    this.refreshTableInput();
+  }
+
+  private handleTableRemoved(eventData: any): void {
+    const removedTable = this.getTableFromEventData(eventData);
+    this.availableTables = this.availableTables.filter((table: DG.DataFrame) => table.name !== removedTable.name);
+
+    const table = this.availableTables[0];
+    this.eventBus.selectTable(table ? table : null);
+    this.refreshTableInput();
+  }
+
+  private refreshTableInput(): void {
+    const tableInput = this.createTableInput();
+    $(this.tableInputContainer).empty();
+    this.tableInputContainer.append(tableInput.root);
+  }
+
+  private createTableInput(): DG.InputBase<DG.DataFrame | null> {
+    const currentlySelectedTable = this.eventBus.getTableSelection();
+
+    const tableInput = ui.tableInput(
+      'Tables',
+      currentlySelectedTable,
+      this.availableTables,
+      (table: DG.DataFrame) => {
+        // WARNING: non-null check necessary to prevent resetting columns to
+        // null upon handling onTableAdded
+        if (table !== null && table instanceof DG.DataFrame)
+          this.eventBus.selectTable(table);
+      });
+    return tableInput;
+  }
+
+  private handleTableChoice(): void {
+    const selectedTable = this.eventBus.getTableSelection();
+    if (!selectedTable) return;
+    if (!this.isTableDisplayed(selectedTable))
+      this.displayTable(selectedTable);
+  }
+
+  private isTableDisplayed(table: DG.DataFrame): boolean {
+    return grok.shell.tableNames.includes(table.name);
+  }
+
+  private displayTable(table: DG.DataFrame): void {
+    const previousView = grok.shell.v;
+    grok.shell.addTableView(table);
+    grok.shell.v = previousView;
+  }
+}

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

@@ -0,0 +1,196 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+
+import $ from 'cash-dom';
+import '../style.css';
+
+import {MAX_SEQUENCE_LENGTH, STRAND, STRANDS, STRAND_LABEL} from '../../model/const';
+import {EventBus} from '../../model/event-bus';
+import {StrandType} from '../../model/types';
+import {NumberInput, StringInput} from '../types';
+import {StrandEditorDialog} from './strand-editor/dialog';
+import {DataManager} from '../../model/data-manager';
+import {TerminalModificationEditorDialog} from './terminal-modification-editor';
+
+export class PatternEditControlsManager {
+  constructor(
+    private eventBus: EventBus,
+    private dataManager: DataManager
+  ) { }
+
+  createControls(): HTMLElement[] {
+    const antisenseStrandToggle = this.createAntisenseStrandToggle();
+    const strandLengthInputs = this.createStrandLengthInputs();
+
+    const senseStrandLengthInput = strandLengthInputs[STRAND.SENSE].root;
+    const antisenseStrandLengthInput = strandLengthInputs[STRAND.ANTISENSE].root;
+
+    const sequenceBaseInput = this.createSequenceBaseInput().root;
+    const patternCommentInput = this.createPatternCommentInput().root;
+    const patternNameInputBlock = this.createPatternNameInputBlock();
+
+    const editPatternButton = this.createEditPatternButton();
+    const editTerminalModificationsButton = this.createEditTerminalModificationsButton();
+
+    return [
+      ui.h1('Edit'),
+      antisenseStrandToggle,
+      senseStrandLengthInput,
+      antisenseStrandLengthInput,
+      sequenceBaseInput,
+      patternNameInputBlock,
+      patternCommentInput,
+      ui.buttonsInput([
+        editTerminalModificationsButton,
+        editPatternButton,
+      ]),
+    ];
+  }
+
+  private createEditPatternButton(): HTMLButtonElement {
+    const editPatternButton = ui.button(
+      'Edit strands',
+      () => StrandEditorDialog.open(this.eventBus, this.dataManager)
+    );
+
+    ui.tooltip.bind(editPatternButton, 'Edit strand modifications and PTOs');
+
+    return editPatternButton;
+  }
+
+  private createEditTerminalModificationsButton(): HTMLButtonElement {
+    const editTerminalModificationsButton = ui.button(
+      'Edit terminals',
+      () => TerminalModificationEditorDialog.open(this.eventBus)
+    );
+
+    ui.tooltip.bind(editTerminalModificationsButton, 'Edit terminal modifications');
+    $(editTerminalModificationsButton).css('margin-right', '20px');
+
+    return editTerminalModificationsButton;
+  }
+
+
+  private createAntisenseStrandToggle(): HTMLElement {
+    const toggleAntisenseStrand = ui.switchInput(
+      `${STRAND_LABEL[STRAND.ANTISENSE]} strand`,
+      this.eventBus.isAntisenseStrandActive()
+    );
+
+    toggleAntisenseStrand.onInput(
+      () => this.eventBus.toggleAntisenseStrand(toggleAntisenseStrand.value)
+    );
+
+    this.eventBus.patternLoaded$.subscribe(() => {
+      toggleAntisenseStrand.value = this.eventBus.isAntisenseStrandActive();
+    });
+
+    toggleAntisenseStrand.setTooltip('Toggle antisense strand');
+
+    return toggleAntisenseStrand.root;
+  }
+
+  private createStrandLengthInputs(): Record<string, NumberInput> {
+    const createStrandLengthInput = (strand: StrandType) => {
+      const sequenceLength = this.eventBus.getNucleotideSequences()[strand].length;
+
+      const input = ui.intInput(
+        `${STRAND_LABEL[strand]} length`,
+        sequenceLength
+      );
+      input.onInput(() => updateStrandLengthInputs(strand, input));
+
+      this.eventBus.nucleotideSequencesChanged$.subscribe(() => {
+        input.value = this.eventBus.getNucleotideSequences()[strand].length;
+      });
+
+      input.setTooltip(`Number of nucleotides in ${strand}, including overhangs`);
+      return [strand, input];
+    };
+
+    const updateStrandLengthInputs = (strand: StrandType, input: DG.InputBase<number | null>) => {
+      const length = input.value;
+      if (length === null) return;
+
+      if (length <= 0) {
+        grok.shell.warning(`Sequence length must be greater than 0`);
+        input.value = 1;
+      }
+      if (length > MAX_SEQUENCE_LENGTH) {
+        grok.shell.warning(`Sequence length must be less than ${MAX_SEQUENCE_LENGTH + 1}`);
+        input.value = MAX_SEQUENCE_LENGTH;
+      }
+
+      this.eventBus.updateStrandLength(strand, input.value!);
+    };
+
+    const strandLengthInputs = Object.fromEntries(
+      STRANDS.map((strand) => createStrandLengthInput(strand))
+    );
+
+    this.eventBus.antisenseStrandToggled$.subscribe((active: boolean) => {
+      $(strandLengthInputs[STRAND.ANTISENSE].root).toggle(active);
+    });
+
+    return strandLengthInputs;
+  }
+
+  private createSequenceBaseInput(): StringInput {
+    const availableNucleoBases = this.dataManager.fetchAvailableNucleotideBases()
+      .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+    const defaultNucleotideBase = this.dataManager.fetchDefaultNucleobase();
+
+    const sequenceBaseInput = ui.choiceInput('Sequence basis', defaultNucleotideBase, availableNucleoBases);
+
+    sequenceBaseInput.onInput(() => this.eventBus.replaceSequenceBase(sequenceBaseInput.value!));
+
+    this.eventBus.nucleotideSequencesChanged$.subscribe(() => {
+      sequenceBaseInput.value = this.eventBus.getSequenceBase();
+    });
+
+    sequenceBaseInput.setTooltip('Most frequent nucleobase in the strands');
+    return sequenceBaseInput;
+  }
+
+  private createPatternCommentInput(): StringInput {
+    const patternCommentInput = ui.textInput(
+      'Comment',
+      this.eventBus.getComment()
+    );
+
+    $(patternCommentInput.root).addClass('st-pattern-text-input');
+
+    patternCommentInput.onInput(
+      () => this.eventBus.updateComment(patternCommentInput.value!)
+    );
+
+    this.eventBus.patternLoaded$.subscribe(() => {
+      patternCommentInput.value = this.eventBus.getComment();
+    });
+
+    return patternCommentInput;
+  }
+
+  private createPatternNameInputBlock(): HTMLElement {
+    const patternNameInput = ui.textInput(
+      'Pattern name',
+      this.eventBus.getPatternName()
+    );
+
+    $(patternNameInput.root).addClass('st-pattern-text-input');
+
+    patternNameInput.onInput(
+      () => this.eventBus.updatePatternName(patternNameInput.value)
+    );
+    this.eventBus.patternLoaded$.subscribe(() => {
+      patternNameInput.value = this.eventBus.getPatternName();
+    });
+
+    patternNameInput.setTooltip('Name under which pattern will be saved');
+
+    return patternNameInput.root;
+  }
+}
+

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

@@ -0,0 +1,44 @@
+import * as ui from 'datagrok-api/ui';
+
+import $ from 'cash-dom';
+
+import {DataManager} from '../../model/data-manager';
+import {EventBus} from '../../model/event-bus';
+import {TableControlsManager} from './bulk-convert/table-controls';
+import {PatternEditControlsManager} from './edit-block-controls';
+import {PatternLoadControlsManager} from './load-block-controls';
+
+export class PatternAppLeftSection {
+  constructor(
+    private eventBus: EventBus,
+    private dataManager: DataManager
+  ) { };
+
+  getLayout(): HTMLDivElement {
+    const loadControlsManager = new PatternLoadControlsManager(this.eventBus, this.dataManager);
+
+    const editControlsManager = new PatternEditControlsManager(this.eventBus, this.dataManager);
+    const tableControlsManager = new TableControlsManager(this.eventBus);
+
+    const loadControls = loadControlsManager.createControls();
+    const editControls = editControlsManager.createControls();
+    const tableControls = tableControlsManager.createControls();
+
+    const loadControlsContainer = ui.div(loadControls);
+    $(loadControlsContainer).css({'padding-bottom': '20px'});
+
+    const form = ui.div([
+      ...editControls,
+      ...tableControls
+    ], 'ui-form');
+
+    const container = ui.div([
+      loadControlsContainer,
+      form
+    ]);
+    $(container).css({'padding': '25px'});
+
+    const layout = ui.box(container, {style: {'maxWidth': '450px'}});
+    return layout;
+  }
+}