@datagrok/peptides 1.21.3 → 1.21.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/peptides",
   "friendlyName": "Peptides",
-  "version": "1.21.3",
+  "version": "1.21.5",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"

package/src/model.ts

@@ -150,7 +150,7 @@ export class PeptidesModel {
         this._analysisView = grok.shell.addTableView(this.df);
     }
 
-    if (this.df.getTag(C.TAGS.MULTIPLE_VIEWS) !== '1' && !this._layoutEventInitialized && !grok.shell.isInDemo)
+    if (this.df.getTag(C.TAGS.MULTIPLE_VIEWS) !== '1' && !this._layoutEventInitialized)
       grok.shell.v = this._analysisView;
 
 

package/src/package.ts

@@ -37,6 +37,7 @@ export async function initPeptides(): Promise<void> {
     monomerWorks ??= new MonomerWorks(await grok.functions.call('Bio:getBioLib'));
     treeHelper ??= await getTreeHelper();
     await PeptideUtils.loadSeqHelper();
+    await PeptideUtils.loadMonomerLib();
   } catch (e) {
     grok.log.error(e as string);
   }

package/src/peptideUtils.ts

@@ -1,7 +1,15 @@
+import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {IMonomerLib} from '@datagrok-libraries/bio/src/types';
 import {getSeqHelper, ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
 
 export class PeptideUtils {
   private static _secHelper: ISeqHelper;
+  private static _monomerLibHelper: IMonomerLibHelper;
+  public static getMonomerLib(): IMonomerLib {
+    if (!this._monomerLibHelper)
+      throw new Error('MonomerLib is not initialized');
+    return this._monomerLibHelper.getMonomerLib();
+  }
   public static getSeqHelper(): ISeqHelper {
     if (!this._secHelper)
       throw new Error('SeqHelper is not initialized');
@@ -11,4 +19,9 @@ export class PeptideUtils {
   public static async loadSeqHelper(): Promise<void> {
     this._secHelper ??= await getSeqHelper();
   }
+
+  public static async loadMonomerLib(): Promise<void> {
+    this._monomerLibHelper ??= await getMonomerLibHelper();
+    await this._monomerLibHelper.awaitLoaded();
+  }
 }

package/src/utils/cell-renderer.ts

@@ -13,6 +13,9 @@ import {MonomerPositionStats, MonomerPositionStatsCache, PositionStats} from './
 import {CLUSTER_TYPE} from '../viewers/logo-summary';
 import {MonomerPosition, MostPotentResidues, SARViewer} from '../viewers/sar-viewer';
 import {MONOMER_RENDERER_TAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer';
+import { getMonomerLibHelper } from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import { PeptideUtils } from '../peptideUtils';
+import { HelmTypes } from '@datagrok-libraries/bio/src/helm/consts';
 
 /**
  * Renders cell selection border.
@@ -51,7 +54,7 @@ export function renderMutationCliffCell(canvasContext: CanvasRenderingContext2D,
   const halfWidth = bounds.width / 2;
   const midX = Math.ceil(bounds.x + 1 + halfWidth);
   const midY = Math.ceil(bounds.y + 1 + bounds.height / 2);
-  const maxRadius = 0.9 * halfWidth / 2; // Fill at most 90% of the half of the cell width
+  const maxRadius = Math.min(0.9 * halfWidth / 2, 0.9 * bounds.height / 2); // Fill at most 90% of the half of the cell width
   // render most potent residues cells according to the p-value (color) and mean difference (size)
   if (viewer instanceof MostPotentResidues) {
     const positionStats = viewer.monomerPositionStats[currentPosition];
@@ -230,6 +233,7 @@ export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect,
   const barWidth = (bounds.width - (leftShift + drawOptions.marginHorizontal)) * pr;
   const xStart = (bounds.x + leftShift) * pr;
 
+  const monomerLib = PeptideUtils.getMonomerLib();
   const monomerBounds: { [monomer: string]: DG.Rect } = {};
   for (const monomer of sortedOrder) {
     const monomerHeight = barHeight * (stats[monomer]!.count / rowCount);
@@ -246,8 +250,8 @@ export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect,
         ctx.lineWidth = selectionWidth;
         ctx.line(xSelection, currentY, xSelection, currentY + selectionHeight, DG.Color.rowSelection);
       }
-
-      ctx.fillStyle = cp.get(monomer) ?? cp.get('other');
+      const monomerColor = monomerLib.getMonomerTextColor(HelmTypes.AA, monomer);
+      ctx.fillStyle = monomerColor;
       ctx.textAlign = 'left';
       ctx.textBaseline = 'top';
       ctx.font = drawOptions.symbolStyle;
@@ -318,6 +322,7 @@ export function setWebLogoRenderer(grid: DG.Grid, monomerPositionStats: MonomerP
     ctx.save();
     try {
       ctx.beginPath();
+      ctx.clearRect(bounds.x, bounds.y, bounds.width, bounds.height);
       ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
       ctx.clip();
 

package/src/viewers/sar-viewer.ts

@@ -427,7 +427,7 @@ export abstract class SARViewer extends DG.JsViewer implements ISARViewer {
 
   private resetTargetCategoryValue(): void {
     const colName = this.targetColumnName;
-    const col = this.dataFrame.col(colName);
+    const col = colName ? this.dataFrame.col(colName) : null;
     this.targetCategoryInput.items = col?.categories ?? [];
     this.targetCategoryInput.value = null;
     if (!colName)
@@ -676,11 +676,11 @@ export class MonomerPosition extends SARViewer {
     if (isApplicableDataframe(this.dataFrame)) {
       this.getProperty(`${MONOMER_POSITION_PROPERTIES.COLOR}${COLUMN_NAME}`)
         ?.set(this, this.activityColumnName);
-      this.targetColumnInput = ui.input.column('Target', {value: undefined, nullable: true, table: this.dataFrame,
+      this.targetColumnInput = ui.input.column('Target', {value: undefined, nullable: true, table: this.dataFrame, filter: (col: DG.Column) => col.isCategorical,
         onValueChanged: (value) => {
           const prop = this.getProperty(`${SAR_PROPERTIES.TARGET}${COLUMN_NAME}`);
-          if (prop && prop.get(this) !== value.name)
-            prop?.set(this, value.name ?? null);
+          if (prop && prop.get(this) != (value?.name ?? null))
+            prop?.set(this, value?.name ?? null);
         },
       });
     } else {
@@ -1338,6 +1338,7 @@ export class MostPotentResidues extends SARViewer {
     const afterDraw = grid.onAfterDrawContent.subscribe(() => {
       const monomerGCol = grid.col(C.COLUMNS_NAMES.MONOMER)!;
       if (monomerGCol.width === AAR_CELL_WIDTH) {
+        mdCol.width = MUTATION_CLIFFS_CELL_WIDTH;
         afterDraw.unsubscribe();
         return;
       }

package/src/widgets/mutation-cliffs.ts

@@ -34,20 +34,25 @@ export function mutationCliffsWidget(
     addExpandIconGen('Mutation Cliffs pairs', aminoToInput.root, widgetRoot,
       () => {
         const parts = cliffsPairsWidgetParts(table, options);
-        const div = ui.divV([parts!.aminoToInput.root, parts!.pairsGrid.root, parts!.uniqueSequencesGrid.root],
-          {style: {width: '100%', height: '100%'}});
+        const div = ui.splitH(
+          [ui.divV([parts!.aminoToInput.root, parts!.pairsGrid.root], {style: {marginRight: '10px'}}),
+            ui.divV([parts!.uniqueSequencesGrid.root], {style: {marginLeft: '10px'}})],
+          {style: {width: '100%', height: '100%'}}, true);
 
         setTimeout(() => {
           if (document.contains(div)) {
             const dW = div.offsetWidth;
             const pairsGridParent = parts!.pairsGrid.canvas?.parentElement;
+            parts!.pairsGrid.props.showRowHeader = true;
+            parts!.uniqueSequencesGrid.props.showRowHeader = true;
             const uniqueSequencesGridParent = parts!.uniqueSequencesGrid.canvas?.parentElement;
             if (pairsGridParent && uniqueSequencesGridParent) {
               pairsGridParent.style.height = '100%';
               uniqueSequencesGridParent.style.height = '100%';
               uniqueSequencesGridParent.style.marginTop = '20px';
-              if (dW > 200) {
-                const macroMolWidth = Math.max(dW * 0.5, 200);
+              if (dW > 400) {
+                const macroMolWidth = Math.max(dW * 0.33, 200);
+
                 const mutationGridCol = parts!.pairsGrid.columns.byName('Mutation');
                 if (mutationGridCol)
                   mutationGridCol.width = macroMolWidth;
@@ -79,6 +84,7 @@ function cliffsPairsWidgetParts(table: DG.DataFrame, options: MutationCliffsOpti
   const substitutionsArray: string[] = [];
   const deltaArray: number[] = [];
   const substitutedToArray: string[] = [];
+  const mutationsGroupsArray: string[] = [];
   const fromIdxArray: number[] = [];
   const toIdxArray: number[] = [];
   const alignedSeqCol = table.getCol(options.sequenceColumnName!);
@@ -89,6 +95,9 @@ function cliffsPairsWidgetParts(table: DG.DataFrame, options: MutationCliffsOpti
   const seenIndexes = new Map<number, number[]>();
   const uniqueSequencesBitSet = DG.BitSet.create(table.rowCount);
 
+  // one mutation position and monomer can contain multiple groups of substitutions
+  const mutationsGroupMap: Record<number, number> = {};
+
   const positionColumns: { [colName: string]: DG.Column<string> } =
     Object.fromEntries(options.positionColumns.map((col) => [col.name, col]));
   for (const pos of positions) {
@@ -106,7 +115,9 @@ function cliffsPairsWidgetParts(table: DG.DataFrame, options: MutationCliffsOpti
       for (const [referenceIdx, indexArray] of substitutionsMap.entries()) {
         if (!filteredIndexes.includes(referenceIdx))
           continue;
-
+        if (!mutationsGroupMap[referenceIdx])
+          mutationsGroupMap[referenceIdx] = Object.keys(mutationsGroupMap).length + 1;
+        const group = mutationsGroupMap[referenceIdx];
 
         const forbiddentIndexes = seenIndexes.get(referenceIdx) ?? [];
         const baseSequence = alignedSeqColCategories[alignedSeqColData[referenceIdx]];
@@ -125,6 +136,7 @@ function cliffsPairsWidgetParts(table: DG.DataFrame, options: MutationCliffsOpti
 
           seenIndexes.get(subIdx)!.push(referenceIdx);
           substitutionsArray.push(`${baseSequence}#${subSeq}`);
+          mutationsGroupsArray.push(`${group}`);
           deltaArray.push(baseActivity - activityScaledColData[subIdx]);
           substitutedToArray.push(posColCategories[posColData[subIdx]]);
           fromIdxArray.push(referenceIdx);
@@ -142,10 +154,12 @@ function cliffsPairsWidgetParts(table: DG.DataFrame, options: MutationCliffsOpti
 
   const substCol = DG.Column.fromStrings('Mutation', substitutionsArray);
   const activityDeltaCol = DG.Column.fromList('double', 'Delta', deltaArray);
+  const mutationGroupCol = DG.Column.fromStrings('Group', mutationsGroupsArray);
   const hiddenSubstToAarCol = DG.Column.fromStrings('~to', substitutedToArray);
   const toIdxCol = DG.Column.fromList(DG.COLUMN_TYPE.INT, '~toIdx', toIdxArray);
   const fromIdxCol = DG.Column.fromList(DG.COLUMN_TYPE.INT, '~fromIdx', fromIdxArray);
-  const pairsTable = DG.DataFrame.fromColumns([substCol, activityDeltaCol, hiddenSubstToAarCol, toIdxCol, fromIdxCol]);
+  const pairsTable =
+    DG.DataFrame.fromColumns([substCol, activityDeltaCol, mutationGroupCol, hiddenSubstToAarCol, toIdxCol, fromIdxCol]);
   pairsTable.name = 'Mutation Cliff pairs';
 
   const aminoToInput = ui.input.string('Mutated to:', {value: '', onValueChanged: (value) => {