@datagrok/sequence-translator 1.2.9 → 1.3.1

package/files/polytool-rules/rules_example.json

@@ -0,0 +1,34 @@
+[ 
+	{
+		"type": "link",
+		"code": "1",
+		"monomericSubstitution": {
+		    "firstMonomer": "C",
+		    "secondMonomer": "C",
+		    "firstLinkingGroup":"3",
+		    "secondLinkingGroup":"3",
+		    "firstSubstitution": "C",
+		    "secondSubstitution": "C"
+		}
+	},
+	{
+		"type": "link",
+		"code": "2",
+		"monomericSubstitution": {
+		    "firstMonomer": "NH2",
+		    "secondMonomer": "L",
+		    "firstLinkingGroup":"2",
+		    "secondLinkingGroup":"3",
+		    "firstSubstitution": "NH2",
+		    "secondSubstitution": "L"
+		}
+	},
+	{
+		"type": "fragmentDuplication",
+		"code": "#3"
+	},
+	{
+		"type": "differentFragments",
+		"code": "$4"
+	}
+]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"
@@ -13,13 +13,13 @@
     "directory": "packages/SequenceTranslator"
   },
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.40.3",
+    "@datagrok-libraries/bio": "^5.41.9",
     "@datagrok-libraries/chem-meta": "^1.2.3",
     "@datagrok-libraries/tutorials": "^1.3.12",
     "@datagrok-libraries/utils": "^4.1.45",
     "@types/react": "^18.0.15",
     "cash-dom": "^8.1.0",
-    "datagrok-api": "^1.18.2",
+    "datagrok-api": "^1.18.6",
     "lodash": "^4.17.21",
     "object-hash": "^3.0.0",
     "openchemlib": "6.0.1",
@@ -51,6 +51,7 @@
   },
   "scripts": {
     "link-api": "npm link datagrok-api",
+    "link-bio": "npm link @datagrok-libraries/bio",
     "link-all": "npm link @datagrok-libraries/chem-meta datagrok-api @datagrok-libraries/utils @datagrok-libraries/bio @datagrok-libraries/tutorials",
     "debug-sequencetranslator": "grok publish",
     "release-sequencetranslator": "grok publish localhost --release",

package/src/apps/pattern/model/event-bus.ts

@@ -1,7 +1,7 @@
 /* Do not change these import lines to match external modules in webpack configuration */
 import * as DG from 'datagrok-api/dg';
 import * as rxjs from 'rxjs';
-import {debounceTime, map, skip, switchMap} from 'rxjs/operators';
+import {debounceTime, throttleTime, map, skip, switchMap} from 'rxjs/operators';
 
 import {
   GRAPH_SETTINGS_KEYS as G, LEGEND_SETTINGS_KEYS as L, PATTERN_RECORD_KEYS as R, STRAND, STRANDS, TERMINI, TERMINUS
@@ -49,7 +49,9 @@ export class EventBus {
   private _patternHasUnsavedChanges$ = new rxjs.BehaviorSubject<boolean>(false);
   private _lastLoadedPatternConfig: rxjs.BehaviorSubject<PatternConfiguration >;
 
-  private _selectedColumn = new rxjs.BehaviorSubject<{strand: string, colName: string} | null>(null);
+  private _selectedStrandColumn = new rxjs.BehaviorSubject<{[strand: string]: string | null} | null>(null);
+  private _selectedIdColumn = new rxjs.BehaviorSubject<string | null>(null);
+
 
   constructor(
     private dataManager: DataManager,
@@ -459,12 +461,27 @@ export class EventBus {
     return this._patternHasUnsavedChanges$.asObservable();
   }
 
-  selectColumn(strand: StrandType, colName: string) {
-    this._selectedColumn.next({strand, colName});
+  selectStrandColumn(strand: StrandType, colName: string | null) {
+    this._selectedStrandColumn.next({...this._selectedStrandColumn.getValue(), [strand]: colName});
+  }
+
+  getSelectedStrandColumn(strand: StrandType): string | null {
+    const value = this._selectedStrandColumn.getValue();
+    return value ? value[strand] : null;
+  }
+
+  selectIdColumn(colName: string) {
+    this._selectedIdColumn.next(colName);
+  }
+
+  getSelectedIdColumn(): string | null {
+    return this._selectedIdColumn.getValue();
   }
 
-  getSelectedColumn(strand: StrandType): string | null {
-    return this._selectedColumn.getValue()?.colName ?? null;
+  get updateSvgContainer$(): rxjs.Observable<void> {
+    return this.patternStateChanged$.pipe(
+      debounceTime(100)
+    );
   }
 }
 

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

@@ -1,5 +1,31 @@
-import {TERMINI, TERMINUS} from './const';
+import * as grok from 'datagrok-api/grok';
+import {STRAND, STRANDS, TERMINI, TERMINUS} from './const';
 import {PATTERN_APP_DATA} from '../../common/model/data-loader/json-loader';
+import {EventBus} from './event-bus';
+
+export function bulkTranslate(eventBus: EventBus): void {
+  const df = eventBus.getTableSelection();
+  if (!df) {
+    grok.shell.warning('Please select a table');
+    return;
+  }
+  const strandColNames = STRANDS.filter(
+    (strand) => !(strand === STRAND.ANTISENSE && !eventBus.isAntisenseStrandActive())
+  ).map((strand) => eventBus.getSelectedStrandColumn(strand))
+    .filter((colName) => colName) as string[];
+
+  if (strandColNames.length === 0) {
+    grok.shell.warning('Please column for sense strand');
+    return;
+  }
+
+  const idColumnName = eventBus.getSelectedIdColumn();
+  if (!idColumnName) throw new Error('No ID column selected');
+
+  const idColumn = df.getCol(idColumnName);
+
+  const strandCols = strandColNames.map((colName) => df.getCol(colName));
+}
 
 export function applyPatternToRawSequence(
   rawNucleotideSequence: string,

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

@@ -27,7 +27,6 @@ export class ColumnInputManager {
 
   private handleTableChoice(): void {
     this.refreshColumnControls();
-    // grok.shell.info(`Table ${this.selectedTable?.name} selection from column input manager`);
   }
 
   private refreshColumnControls(): void {
@@ -40,6 +39,10 @@ export class ColumnInputManager {
     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];
@@ -54,8 +57,9 @@ export class ColumnInputManager {
         `${STRAND_LABEL[strand]} column`,
         columns[0],
         columns,
-        (colName: string) => this.eventBus.selectColumn(strand, colName)
+        (colName: string) => this.eventBus.selectStrandColumn(strand, colName)
       );
+      this.eventBus.selectStrandColumn(strand, columns[0]);
       return [strand, input.root];
     })) as Record<StrandType, HTMLElement>;
     return strandColumnInput;
@@ -63,7 +67,13 @@ export class ColumnInputManager {
 
   private createIdColumnInput(): HTMLElement {
     const columns = this.selectedTable ? this.selectedTable.columns.names() : [];
-    const idColumnInput = ui.choiceInput('ID column', columns[0], columns, () => { });
+    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

@@ -4,7 +4,7 @@ import '../../style.css';
 import {EventBus} from '../../../model/event-bus';
 import {ColumnInputManager} from './column-input';
 import {TableInputManager} from './table-input';
-import {STRAND} from '../../../model/const';
+import {bulkTranslate} from '../../../model/translator';
 
 export class TableControlsManager {
   private tableInputManager: TableInputManager;
@@ -20,18 +20,19 @@ export class TableControlsManager {
     const tableInput = this.tableInputManager.getTableInputContainer();
     const columnControls = this.columnInputManager.getColumnControlsContainer();
 
-    const convertSequenceButton = ui.bigButton('Convert', () => this.processConvertButtonClick());
+    const convertButton = ui.bigButton('Convert', () => this.processConvertButtonClick());
 
     return [
       title,
       tableInput,
       columnControls,
       ui.buttonsInput([
-        convertSequenceButton,
+        convertButton,
       ]),
     ];
   }
 
   private processConvertButtonClick(): void {
+    bulkTranslate(this.eventBus);
   }
 }

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

@@ -153,7 +153,7 @@ export class PatternLoadControlsManager {
     this.subscriptions.add(
       this.eventBus.patternLoaded$.subscribe(() => {
         const patternName = this.eventBus.getPatternName();
-        if (!choiceInput.value?.includes(patternName))
+        if (choiceInput.value !== patternName)
           choiceInput.value = this.getPatternName(patternList);
       })
     );
@@ -162,7 +162,9 @@ export class PatternLoadControlsManager {
   }
 
   private getPatternName(patternList: string[]): string {
-    return patternList.find((patternName) => patternName.includes(this.eventBus.getPatternName())) ?? patternList[0];
+    return patternList.find(
+      (patternName) => patternName === this.eventBus.getPatternName()
+    ) ?? patternList[0];
   }
 
   private createDeletePatternButton(): HTMLButtonElement {

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

@@ -1,5 +1,7 @@
 import {STRAND, TERMINUS, STRAND_END} from '../../model/const';
 
+export const LEGEND_PADDING = 10;
+
 export const enum LUMINANCE_COEFFICIENTS {
   RED = 0.299,
   GREEN = 0.587,
@@ -21,7 +23,7 @@ export const enum SVG_CIRCLE_SIZES {
 
 export const enum SVG_TEXT_FONT_SIZES {
   NUCLEOBASE = 17,
-  COMMENT = 14,
+  COMMENT = 15,
 };
 
 export const enum SVG_ELEMENT_COLORS {
@@ -61,3 +63,15 @@ export const Y_POSITIONS_FOR_STRAND_ELEMENTS = {
     NUCLEOBASE_LABEL: 7 * SVG_CIRCLE_SIZES.NUCLEOBASE_RADIUS,
   }
 };
+
+export const MIN_WIDTH = 200;
+
+export const TITLE_SHIFT = 10;
+
+export const enum FONT_SIZE {
+  TITLE = 17,
+  LEGEND = 14,
+  NUCLEOBASE = 17,
+  COMMENT = 14,
+}
+

package/src/apps/pattern/view/svg-utils/legend-block.ts

@@ -0,0 +1,92 @@
+import {PatternConfiguration} from '../../model/types';
+import {LEGEND_PADDING, SVG_CIRCLE_SIZES, SVG_ELEMENT_COLORS, SVG_TEXT_FONT_SIZES} from './const';
+import {SVGBlockBase} from './svg-block-base';
+import {SVGElementFactory} from './svg-element-factory';
+import {TextDimensionsCalculator} from './text-dimensions-calculator';
+import {getNucleobaseColorFromStyleMap} from './utils';
+
+export class LegendBlock extends SVGBlockBase {
+  private _svgElements: SVGElement[] = [];
+  private width: number;
+
+  constructor(
+    svgElementFactory: SVGElementFactory,
+    config: PatternConfiguration,
+    heightShift: number
+  ) {
+    super(svgElementFactory, config, heightShift);
+    const {elements, width} = this.createLegendItems();
+    this._svgElements = elements;
+    this.width = width;
+  }
+
+  private isPhosphorothioatePresent(): boolean {
+    return Object.values(this.config.phosphorothioateLinkageFlags)
+      .flat().some((element) => element);
+  }
+
+  private getModificationTypesList(): string[] {
+    return [...new Set(
+      Object.values(this.config.nucleotideSequences).flat().sort(
+        (a, b) => a.toLowerCase().localeCompare(b.toLowerCase())
+      )
+    )];
+  }
+
+  get svgElements(): SVGElement[] {
+    return this._svgElements;
+  }
+
+  private createLegendItem(
+    name: string,
+    xShift: number
+  ): {elements: SVGElement[], width: number} {
+    const circlePosition = {
+      x: xShift,
+      y: this.yShift - SVG_CIRCLE_SIZES.LEGEND_RADIUS
+    };
+
+    const circle = name.includes('linkage') ?
+      this.svgElementFactory.createStarElement(circlePosition, SVG_ELEMENT_COLORS.LINKAGE_STAR) :
+      this.svgElementFactory
+        .createCircleElement(circlePosition, SVG_CIRCLE_SIZES.LEGEND_RADIUS, getNucleobaseColorFromStyleMap(name));
+    const paddedCircleWidth = 2 * SVG_CIRCLE_SIZES.LEGEND_RADIUS;
+    xShift += paddedCircleWidth;
+
+    const textPosition = {y: this.yShift, x: xShift};
+
+    const textElement = this.svgElementFactory
+      .createTextElement(name, textPosition, SVG_TEXT_FONT_SIZES.COMMENT, SVG_ELEMENT_COLORS.TEXT);
+    const textWidth = TextDimensionsCalculator.getTextDimensions(name, SVG_TEXT_FONT_SIZES.COMMENT).width;
+
+    return {elements: [circle, textElement], width: paddedCircleWidth + textWidth};
+  }
+
+  private createLegendItems(): { elements: SVGElement[], width: number } {
+    let xShift = LEGEND_PADDING;
+    const items = [] as SVGElement[][];
+
+    const shift = (width: number) => xShift += width + 15;
+
+    if (this.isPhosphorothioatePresent()) {
+      const {elements, width} = this.createLegendItem('PTO linkage', xShift);
+      shift(width);
+      items.push(elements);
+    }
+
+    const modificationTypes = this.getModificationTypesList();
+    modificationTypes.forEach((name) => {
+      const {elements, width} = this.createLegendItem(name, xShift);
+      shift(width);
+      items.push(elements);
+    });
+
+    return {elements: items.flat(), width: xShift};
+  }
+
+  getContentHeight(): number { return 20; };
+
+  getContentWidth(): number {
+    return this.width;
+  }
+}