@datagrok/sequence-translator 1.2.6 → 1.2.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"
@@ -19,7 +19,7 @@
     "@datagrok-libraries/utils": "^1.17.2",
     "@types/react": "^18.0.15",
     "cash-dom": "^8.1.0",
-    "datagrok-api": "^1.15.2",
+    "datagrok-api": "^1.17.4",
     "openchemlib": "6.0.1",
     "save-svg-as-png": "^1.4.17",
     "ts-loader": "^9.3.1",

package/src/view/apps/oligo-translator.ts

@@ -3,6 +3,9 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {ALPHABET, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+
 import * as rxjs from 'rxjs';
 import '../style/translator-app.css';
 
@@ -12,7 +15,7 @@ import {SequenceToMolfileConverter} from '../../model/structure-app/sequence-to-
 import {getTranslatedSequences} from '../../model/translator-app/conversion-utils';
 import {MoleculeImage} from '../utils/molecule-img';
 import {download} from '../../model/helpers';
-import {SEQUENCE_COPIED_MSG, SEQ_TOOLTIP_MSG} from '../const/oligo-translator';
+import {SEQUENCE_COPIED_MSG, SEQ_TOOLTIP_MSG, NUCLEOTIDES} from '../const/oligo-translator';
 import {DEFAULT_AXOLABS_INPUT} from '../const/ui';
 import {FormatDetector} from '../../model/parsing-validation/format-detector';
 import {SequenceValidator} from '../../model/parsing-validation/sequence-validator';
@@ -20,9 +23,15 @@ import {FormatConverter} from '../../model/translator-app/format-converter';
 import {codesToHelmDictionary} from '../../model/data-loading-utils/json-loader';
 import {DEFAULT_FORMATS} from '../../model/const';
 
+const enum REQUIRED_COLUMN_LABEL {
+  SEQUENCE = 'Sequence',
+}
+const REQUIRED_COLUMN_LABELS = [ REQUIRED_COLUMN_LABEL.SEQUENCE ];
+
 export class TranslatorLayoutHandler {
+  private eventBus: EventBus;
+  private inputFormats = Object.keys(codesToHelmDictionary).concat(DEFAULT_FORMATS.HELM);
   constructor() {
-    const INPUT_FORMATS = Object.keys(codesToHelmDictionary).concat(DEFAULT_FORMATS.HELM);
     this.moleculeImgDiv = ui.div([]);
     this.moleculeImgDiv.className = 'mol-host';
     this.moleculeImgDiv.style.border = '1px solid var(--grey-2)';
@@ -30,7 +39,7 @@ export class TranslatorLayoutHandler {
     this.moleculeImgDiv.style.marginTop = '12px';
 
     this.outputTableDiv = ui.div([]);
-    this.formatChoiceInput = ui.choiceInput('', DEFAULT_FORMATS.HELM, INPUT_FORMATS, async () => {
+    this.formatChoiceInput = ui.choiceInput('', DEFAULT_FORMATS.HELM, this.inputFormats, async () => {
       this.format = this.formatChoiceInput.value;
       this.updateTable();
       await this.updateMolImg();
@@ -46,6 +55,8 @@ export class TranslatorLayoutHandler {
       this.updateTable();
       await this.updateMolImg();
     });
+
+    this.eventBus = EventBus.getInstance();
   }
 
   // todo: reduce # of state vars by further refactoring legacy code
@@ -59,6 +70,97 @@ export class TranslatorLayoutHandler {
   private format: string | null;
 
   async getHtmlElement(): Promise<HTMLDivElement> {
+    const singleSequenceControls = this.constructSingleSequenceControls();
+    const bulkControls = this.constructBulkTranslationControls();
+    const layout = ui.box(
+      ui.panel([
+        singleSequenceControls,
+        bulkControls,
+        ui.block([ui.box(this.moleculeImgDiv)])
+      ]),
+    );
+
+    this.formatChoiceInput.value = this.format;
+    this.updateTable();
+    await this.updateMolImg();
+    return layout;
+  }
+
+  private constructBulkTranslationControls(): HTMLDivElement {
+    const title = ui.h1('Bulk');
+    ui.tooltip.bind(title, 'Bulk translation from table input');
+
+    const tableControlsManager = new TableControlsManager(this.eventBus);
+    const tableControls = tableControlsManager.createUIComponents();
+    const inputFormats = ui.choiceInput('Input format', DEFAULT_FORMATS.AXOLABS, this.inputFormats, (value: string) => this.eventBus.selectInputFormat(value));
+    const outputFormats = ui.choiceInput('Output format', NUCLEOTIDES, [NUCLEOTIDES], () => {});
+    const convertBulkButton = this.createConvertBulkButton();
+
+    const tableControlsContainer = ui.div([
+      ...tableControls,
+      inputFormats,
+      outputFormats,
+      convertBulkButton 
+    ], 'ui-form');
+
+    const bulkTranslationControls = ui.block25([
+      title,
+      tableControlsContainer,
+    ]);
+    return bulkTranslationControls;
+  }
+
+  private createConvertBulkButton(): HTMLButtonElement {
+    const convertBulkButton = ui.bigButton('Convert', () => this.processConvertBulkButtonClick());
+
+    ui.tooltip.bind(convertBulkButton, 'Convert sequences from table input');
+    $(convertBulkButton).css({
+      'float': 'right',
+      'margin-top': '20px',
+    });
+
+    return convertBulkButton;
+  }
+
+  private processConvertBulkButtonClick(): void {
+    const selectedTable = this.eventBus.getSelectedTable();
+    if (!selectedTable) {
+      grok.shell.warning('No table selected');
+      return;
+    }
+
+    const inputFormat = this.eventBus.getSelectedInputFormat();
+    const outputFormat = NUCLEOTIDES;
+    const sequenceColumn = this.eventBus.getSelectedColumn(REQUIRED_COLUMN_LABEL.SEQUENCE);
+    if (!sequenceColumn) {
+      grok.shell.warning('No sequence column selected');
+      return;
+    }
+
+    const newColumnName = `${sequenceColumn.name} (${outputFormat})`;
+    const translatedColumn = DG.Column.fromList(
+      DG.TYPE.STRING,
+      newColumnName,
+      sequenceColumn.toList().map((sequence: string) => {
+        const translatedSequences = getTranslatedSequences(sequence, -1, inputFormat);
+        return translatedSequences[outputFormat];
+      })
+    );
+
+    translatedColumn.semType = DG.SEMTYPE.MACROMOLECULE;
+    translatedColumn.setTag(DG.TAGS.UNITS, NOTATION.FASTA);
+    const unitsHandler = UnitsHandler.getOrCreate(translatedColumn);
+    UnitsHandler.setUnitsToFastaColumn(unitsHandler);
+
+    // add newColumn to the table
+    selectedTable.columns.add(translatedColumn);
+    // update the view
+
+    grok.data.detectSemanticTypes(selectedTable);
+    grok.shell.v = grok.shell.getTableView(selectedTable.name);
+  }
+
+  private constructSingleSequenceControls(): HTMLDivElement {
     const sequenceColoredInput = new ColoredTextInput(this.sequenceInputBase, highlightInvalidSubsequence);
 
     const downloadMolfileButton = ui.button(
@@ -84,29 +186,24 @@ export class TranslatorLayoutHandler {
       textInput: sequenceColoredInput.root,
       clearBtn: clearButton
     };
-    const upperBlock = ui.table(
+    const singleSequenceInputControls = ui.table(
       [inputTableRow], (item) => [item.format, item.textInput, item.clearBtn]
     );
-    upperBlock.classList.add('st-translator-input-table');
+    singleSequenceInputControls.classList.add('st-translator-input-table');
 
-    const outputTable = ui.block([
+    const singleSequenceOutputTable = ui.block([
       this.outputTableDiv,
       downloadMolfileButton,
       copySmilesButton,
     ]);
 
-    const mainTabBody = ui.box(
-      ui.panel([
-        upperBlock,
-        outputTable,
-        ui.block([ui.box(this.moleculeImgDiv)])
-      ]),
-    );
+    const singleSequenceControls = ui.block75([
+      ui.h1('Single sequence'),
+      singleSequenceInputControls,
+      singleSequenceOutputTable,
+    ])
 
-    this.formatChoiceInput.value = this.format;
-    this.updateTable();
-    await this.updateMolImg();
-    return mainTabBody;
+    return singleSequenceControls;
   }
 
   private saveMolfile(): void {
@@ -182,3 +279,223 @@ export class TranslatorLayoutHandler {
     return molfile;
   }
 }
+
+// todo: port to dedicated file, together with event bus
+class TableControlsManager {
+  private tableInputManager: TableInputManager;
+  private columnInputManager: ColumnInputsManager;
+
+  constructor(eventBus: EventBus) {
+    this.tableInputManager = new TableInputManager(eventBus);
+    this.columnInputManager = new ColumnInputsManager(eventBus);
+  }
+
+  createUIComponents(): HTMLElement[] {
+    const tableInput = this.tableInputManager.getTableInputContainer();
+    const columnControls = this.columnInputManager.getColumnControlsContainer();
+
+    return [
+      tableInput,
+      columnControls,
+    ];
+  }
+}
+
+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.tableSelected$.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.getSelectedTable();
+
+    const tableInput = ui.tableInput(
+      'Table',
+      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.getSelectedTable();
+    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;
+  }
+}
+
+class ColumnInputsManager {
+  private columnControlsContainer: HTMLDivElement = ui.div([]);
+
+  constructor(private eventBus: EventBus) {
+    this.eventBus.tableSelected$.subscribe(() => this.handleTableChoice());
+    this.refreshColumnControls();
+  }
+
+  getColumnControlsContainer(): HTMLDivElement {
+    return this.columnControlsContainer;
+  }
+
+  private handleTableChoice(): void {
+    this.refreshColumnControls();
+  }
+
+  private refreshColumnControls(): void {
+    const columnInputs = this.createColumnInputs();
+    $(this.columnControlsContainer).empty();
+    const inputRoots = columnInputs.map((input) => input.root);
+    this.columnControlsContainer.append(
+      ...inputRoots
+    );
+  }
+
+  private createColumnInputs(): DG.ChoiceInput<string | null>[] {
+    const selectedTable = this.eventBus.getSelectedTable();
+    const columnNames = selectedTable !== null ?
+      selectedTable.columns.names().sort((a, b) => a.localeCompare(b)) : [];
+
+    const columnInputs = REQUIRED_COLUMN_LABELS.map((columnLabel: REQUIRED_COLUMN_LABEL) => {
+      const input = this.createColumnInput(columnLabel, columnNames, selectedTable);
+      return input;
+    });
+    return columnInputs;
+  }
+
+  private createColumnInput(
+    columnLabel: REQUIRED_COLUMN_LABEL,
+    columnNames: string[],
+    selectedTable: DG.DataFrame | null
+  ): DG.ChoiceInput<string | null> {
+    const namePattern = columnLabel.toLowerCase();
+    const matchingColumnName = columnNames.find((name: string) => name.toLowerCase().includes(namePattern));
+    const selectedColumnName = matchingColumnName ? matchingColumnName : columnNames[0];
+    this.selectColumnIfTableNotNull(selectedTable, selectedColumnName, columnLabel);
+
+    const input = ui.choiceInput(
+      `${columnLabel}`,
+      selectedColumnName, columnNames,
+      (colName: string) => this.selectColumnIfTableNotNull(selectedTable, colName, columnLabel)
+    );
+
+    return input;
+  }
+
+  private selectColumnIfTableNotNull(
+    table: DG.DataFrame | null, columnName: string, columnLabel: REQUIRED_COLUMN_LABEL
+  ): void {
+    if (table !== null) {
+      const selectedColumn = table.getCol(columnName);
+      this.eventBus.selectColumn(columnLabel, selectedColumn);
+    }
+  }
+}
+
+export class EventBus {
+  private static _instance: EventBus;
+
+  private _tableSelection$ = new rxjs.BehaviorSubject<DG.DataFrame | null>(null);
+  private _columnSelection = Object.fromEntries(REQUIRED_COLUMN_LABELS.map((columnLabel: string) => {
+    const columnSelection$ = new rxjs.BehaviorSubject<DG.Column<string> | null>(null);
+    return [columnLabel, columnSelection$];
+  }));
+  private _inputFormatSelection$ = new rxjs.BehaviorSubject<string>(DEFAULT_FORMATS.AXOLABS);
+
+  private constructor() {}
+
+  public static getInstance(): EventBus {
+    if (EventBus._instance === undefined)
+      EventBus._instance = new EventBus();
+    return EventBus._instance;
+  }
+
+  get tableSelected$(): rxjs.Observable<DG.DataFrame | null> {
+    return this._tableSelection$.asObservable();
+  }
+
+  getSelectedTable(): DG.DataFrame | null {
+    return this._tableSelection$.getValue();
+  }
+
+  selectTable(table: DG.DataFrame | null): void {
+    this._tableSelection$.next(table);
+  }
+
+  selectColumn(columnLabel: REQUIRED_COLUMN_LABEL, column: DG.Column<string>): void {
+    this._columnSelection[columnLabel].next(column);
+  }
+
+  getSelectedColumn(columnLabel: REQUIRED_COLUMN_LABEL): DG.Column<string> | null {
+    return this._columnSelection[columnLabel].getValue();
+  }
+  
+  getSelectedInputFormat(): string {
+    return this._inputFormatSelection$.getValue();
+  }
+
+  selectInputFormat(format: string): void {
+    this._inputFormatSelection$.next(format);
+  }
+}

package/src/view/const/oligo-translator.ts

@@ -1,3 +1,5 @@
 export const DEFAULT_INPUT = 'fAmCmGmAmCpsmU';
 export const SEQUENCE_COPIED_MSG = 'Copied';
 export const SEQ_TOOLTIP_MSG = 'Copy sequence';
+
+export const NUCLEOTIDES = 'Nucleotides';