@datagrok/bio 2.8.4 → 2.8.6

package/src/utils/monomer-cell-renderer.ts

@@ -16,16 +16,18 @@ const Tags = new class {
 const svgMolOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
 
 export class MonomerTooltipHandler {
-  private readonly grid: DG.Grid;
+  private readonly gridCol: DG.GridColumn;
 
-  constructor(grid: DG.Grid) {
-    this.grid = grid;
-    this.grid.onCellTooltip(this.onCellTooltip.bind(this));
+  constructor(gridCol: DG.GridColumn) {
+    this.gridCol = gridCol;
+    this.gridCol.grid.onCellTooltip(this.onCellTooltip.bind(this));
   }
 
   private onCellTooltip(gridCell: DG.GridCell, x: number, y: number): any {
-    if (gridCell.grid.dart != this.grid.dart || !gridCell.tableColumn || !gridCell.isTableCell ||
-      gridCell.tableColumn.semType != 'Monomer') return false;
+    if (
+      gridCell.grid.dart != this.gridCol.grid.dart || gridCell.gridColumn.dart != this.gridCol.dart ||
+      !gridCell.tableColumn || !gridCell.isTableCell
+    ) return false;
 
     const alphabet = gridCell.tableColumn.getTag(bioTAGS.alphabet);
     const monomerName = gridCell.cell.value;
@@ -46,13 +48,11 @@ export class MonomerTooltipHandler {
     return true; // To prevent default tooltip behaviour
   }
 
-  public static getOrCreate(grid: DG.Grid): MonomerTooltipHandler {
-    const gridTemp: { [tempName: string]: any } = grid.dataFrame.temp;
-    if (!(Tags.tooltipHandlerTemp in gridTemp)) {
-      gridTemp[Tags.tooltipHandlerTemp] = new MonomerTooltipHandler(grid);
-      grid.temp = gridTemp;
-    }
-    return gridTemp[Tags.tooltipHandlerTemp];
+  public static getOrCreate(gridCol: DG.GridColumn): MonomerTooltipHandler {
+    let res = gridCol.temp[Tags.tooltipHandlerTemp];
+    if (!res)
+      res = gridCol.temp[Tags.tooltipHandlerTemp] = new MonomerTooltipHandler(gridCol);
+    return res;
   }
 }
 
@@ -81,7 +81,7 @@ export class MonomerCellRenderer extends DG.GridCellRenderer {
     _cellStyle: DG.GridCellStyle
   ): void {
     if (gridCell.gridRow < 0) return;
-    MonomerTooltipHandler.getOrCreate(gridCell.grid);
+    MonomerTooltipHandler.getOrCreate(gridCell.gridColumn);
 
 
     g.font = `12px monospace`;

package/src/utils/save-as-fasta.ts

@@ -107,7 +107,7 @@ export function wrapSequence(seq: string, splitter: SplitterFunc, lineWidth: num
   const seqLineList: string[] = [];
   while (seqPos < seqLength) {
     /* join sliced monomer into line */
-    const seqLine: string[] = seqMonomerList.slice(seqPos, seqPos + lineWidth);
+    const seqLine: string[] = wu(seqMonomerList).slice(seqPos, seqPos + lineWidth).toArray();
     const seqLineTxt: string = seqLine.map((m) => m.length > 1 ? `[${m}]` : m).join('');
     seqLineList.push(seqLineTxt);
     seqPos += seqLine.length;

package/src/utils/split-to-monomers.ts

@@ -1,10 +1,13 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
 import {delay} from '@datagrok-libraries/utils/src/test';
 import {checkInputColumnUI} from './check-input-column';
 import {splitAlignedSequences} from '@datagrok-libraries/bio/src/utils/splitter';
 import * as C from './constants';
 import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
-import * as grok from 'datagrok-api/grok';
-import * as DG from 'datagrok-api/dg';
+import {SEM_TYPES} from './constants';
 
 
 export async function splitToMonomersUI(table: DG.DataFrame, seqCol: DG.Column<string>): Promise<DG.DataFrame> {
@@ -14,6 +17,7 @@ export async function splitToMonomersUI(table: DG.DataFrame, seqCol: DG.Column<s
   if (!checkInputColumnUI(seqCol, 'Sequence space')) return table;
 
   const tempDf = splitAlignedSequences(seqCol);
+  tempDf.name = 'splitToMonomers';
   const originalDf = seqCol.dataFrame;
   for (const tempCol of tempDf.columns) {
     // TODO: GROK-11212
@@ -21,9 +25,39 @@ export async function splitToMonomersUI(table: DG.DataFrame, seqCol: DG.Column<s
     tempCol.semType = C.SEM_TYPES.MONOMER;
     tempCol.setTag(bioTAGS.alphabet, seqCol.getTag(bioTAGS.alphabet));
   }
-  // Create the new data frame to enable platform to setup cell renderers
-  const newDf = originalDf.join(tempDf, [], [], undefined, undefined, DG.JOIN_TYPE.LEFT, false);
-  grok.shell.addTableView(newDf);
 
-  return newDf;
+  const colNameRe = /(\d+)(?: \((\d+)\))?/;
+  const generateNewColName = (srcName: string): string => {
+    colNameRe.lastIndex = 0;
+    const ma = srcName.match(colNameRe);
+    if (!ma) return srcName;
+    return `${ma[1]} (${parseInt(ma[2] ?? 0) + 1})`;
+  };
+
+  // if (tempDf.columns.length === 0) return;
+
+  for (let tempColI = 0; tempColI < tempDf.columns.length; tempColI++) {
+    const tempCol = tempDf.columns.byIndex(tempColI);
+    tempCol.semType = SEM_TYPES.MONOMER;
+    tempCol.setTag(bioTAGS.alphabet, seqCol.getTag(bioTAGS.alphabet));
+
+    const wdMax = 100;
+    let wdCount = 0;
+    while (originalDf.columns.byName(tempCol.name) && wdCount < wdMax) {
+      tempCol.name = generateNewColName(tempCol.name);
+      wdCount++;
+    }
+
+    originalDf.columns.add(tempCol);
+  }
+
+  // originalDf.join(tempDf, [], [], undefined, undefined, DG.JOIN_TYPE.LEFT, true);
+  await grok.data.detectSemanticTypes(originalDf);
+
+  for (let tempColI = 0; tempColI < tempDf.columns.length; tempColI++) {
+    const tempCol = tempDf.columns.byIndex(tempColI);
+    tempCol.setTag(DG.TAGS.CELL_RENDERER, 'Monomer');
+  }
+
+  return originalDf;
 }

package/src/viewers/vd-regions-viewer.ts

@@ -42,6 +42,24 @@ const vrt = VdRegionType;
 //   new VdRegion(vrt.FR, 'FR4', 'Heavy', 7, '118', null/*128*/),
 // ];
 
+export enum PROPS_CATS {
+  STYLE = 'Style',
+  BEHAVIOR = 'Behavior',
+  LAYOUT = 'Layout',
+  DATA = 'Data',
+}
+
+export enum PROPS {
+  // -- Data --
+  skipEmptyPositions = 'skipEmptyPositions',
+  regionTypes = 'regionTypes',
+  chains = 'chains',
+
+  // -- Style --
+  positionWidth = 'positionWidth',
+  positionHeight = 'positionHeight',
+}
+
 /** Viewer with tabs based on description of chain regions.
  *  Used to define regions of an immunoglobulin LC.
  */
@@ -69,20 +87,24 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   constructor() {
     super();
 
+    // -- Data --
+    this.skipEmptyPositions = this.bool(PROPS.skipEmptyPositions, false,
+      {category: PROPS_CATS.DATA});
+
     // To prevent ambiguous numbering scheme in MLB
-    this.regionTypes = this.stringList('regionTypes', [vrt.CDR],
-      {choices: Object.values(vrt).filter((t) => t != vrt.Unknown)}) as VdRegionType[];
-    this.chains = this.stringList('chains', ['Heavy', 'Light'],
-      {choices: ['Heavy', 'Light']});
-    // this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
-
-    this.skipEmptyPositions = this.bool('skipEmptyPositions', false);
-    this.positionWidth = this.float('positionWidth', 16, {
-      editor: 'slider', min: 0, max: 64,
+    this.regionTypes = this.stringList(PROPS.regionTypes, [vrt.CDR], {
+      category: PROPS_CATS.DATA, choices: Object.values(vrt).filter((t) => t != vrt.Unknown)
+    }) as VdRegionType[];
+    this.chains = this.stringList(PROPS.chains, ['Heavy', 'Light'],
+      {category: PROPS_CATS.DATA, choices: ['Heavy', 'Light']});
+
+    // -- Layout --
+    this.positionWidth = this.float(PROPS.positionWidth, 16, {
+      category: PROPS_CATS.LAYOUT, editor: 'slider', min: 0, max: 64,
       description: 'Internal WebLogo viewers property width of position. A value of zero means autofit to the width.'
     });
-    this.positionHeight = this.string('positionHeight', PositionHeight.Entropy,
-      {choices: Object.keys(PositionHeight)}) as PositionHeight;
+    this.positionHeight = this.string(PROPS.positionHeight, PositionHeight.Entropy,
+      {category: PROPS_CATS.LAYOUT, choices: Object.keys(PositionHeight)}) as PositionHeight;
   }
 
   public async init() {
@@ -140,28 +162,35 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
       return;
     }
 
-    if (property) {
-      switch (property.name) {
-        case 'regionTypes':
-          break;
-        case 'chains':
-          break;
-        case 'sequenceColumnNamePostfix':
-          break;
-        // for (let orderI = 0; orderI < this.logos.length; orderI++) {
-        //   for (let chainI = 0; chainI < this.chains.length; chainI++) {
-        //     const chain: string = this.chains[chainI];
-        //     this.logos[orderI][chain].setOptions({skipEmptyPositions: this.skipEmptyPositions});
-        //   }
-        // }
-        // this.calcSize();
-      }
+    switch (property.name) {
+      case PROPS.regionTypes:
+      case PROPS.chains:
+        this.setData(this.dataFrame, this.regions);
+        break;
     }
 
     switch (property.name) {
-      case 'skipEmptyPositions':
-      case 'positionWidth':
-      case 'positionHeight':
+      case PROPS.skipEmptyPositions:
+        for (let orderI = 0; orderI < this.logos.length; ++orderI) {
+          for (const chain of this.chains)
+            this.logos[orderI][chain].setOptions({[wlPROPS.skipEmptyPositions]: this.skipEmptyPositions});
+        }
+        this.calcSize();
+        break;
+
+      case PROPS.positionWidth:
+        this.calcSize();
+        break;
+
+      case PROPS.positionHeight:
+        for (let orderI = 0; orderI < this.logos.length; ++orderI) {
+          for (const chain of this.chains)
+            this.logos[orderI][chain].setOptions({[wlPROPS.positionWidth]: this.positionWidth});
+        }
+        this.calcSize();
+        break;
+
+      default:
         this.setData(this.dataFrame, this.regions); // onPropertyChanged
         break;
     }
@@ -265,8 +294,10 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     this.logos = new Array(orderList.length);
     for (let orderI = 0; orderI < orderList.length; ++orderI)
       this.logos[orderI] = {};
-    for (const [orderI, chain, wl] of logoList)
+    for (const [orderI, chain, wl] of logoList) {
       this.logos[orderI][chain] = wl;
+      this.viewSubs.push(wl.onFreqsCalculated.subscribe(() => { this.calcSize(); }));
+    }
 
     // ui.tableFromMap()
     // DG.HtmlTable.create()
@@ -336,35 +367,41 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   private calcSize() {
     _package.logger.debug(`Bio: VdRegionsViewer.calcSize(), start`);
     const calcSizeInt = (): void => {
-      const dpr: number = window.devicePixelRatio;
-      const logoHeight = (this.root.clientHeight - 54) / this.chains.length;
-
-      const maxHeight: number = Math.min(logoHeight,
-        Math.max(...this.logos.map((wlDict) =>
-          Math.max(...Object.values(wlDict).map((wl) => wl.maxHeight)))),
-      );
+      // Postponed calcSizeInt can result call after the viewer has been closed (on tests)
+      if (!this.host) return;
 
+      const logoHeight = (this.root.clientHeight - 54) / this.chains.length;
       let totalPos: number = 0;
       for (let orderI = 0; orderI < this.logos.length; orderI++) {
-        for (const chain of this.chains)
-          this.logos[orderI][chain].root.style.height = `${maxHeight}px`;
+        for (const chain of this.chains) {
+          const wl = this.logos[orderI][chain];
+          wl.root.style.height = `${logoHeight}px`;
+        }
 
         totalPos += Math.max(...this.chains.map((chain) => this.logos[orderI][chain].Length));
       }
 
-      if (this.positionWidth === 0 && this.logos.length > 0 && totalPos > 0) {
-        const leftPad = 22/* Chain label */;
-        const rightPad = 6 + 6 + 1;
-        const logoMargin = 8 + 1;
-        const fitPositionWidth =
-          (this.root.clientWidth - leftPad - (this.logos.length - 1) * logoMargin - rightPad) / totalPos * dpr;
-
-        for (let orderI = 0; orderI < this.logos.length; orderI++) {
-          for (let chainI = 0; chainI < this.chains.length; chainI++) {
-            const chain: string = this.chains[chainI];
-            this.logos[orderI][chain].setOptions({positionWidth: fitPositionWidth});
+      if (this.positionWidth === 0) {
+        if (this.logos.length > 0 && totalPos > 0) {
+          const leftPad = 22/* Chain label */;
+          const rightPad = 6 + 6 + 1;
+          const logoMargin = 8 + 1;
+          const fitPositionWidth =
+            (this.root.clientWidth - leftPad - (this.logos.length - 1) * logoMargin - rightPad) / totalPos;
+
+          for (let orderI = 0; orderI < this.logos.length; orderI++) {
+            for (const chain of this.chains) {
+              const wl = this.logos[orderI][chain];
+              wl.setOptions({[wlPROPS.positionWidth]: fitPositionWidth});
+              wl.root.style.width = `${fitPositionWidth * wl.Length}px`;
+            }
           }
         }
+      } else {
+        for (let orderI = 0; orderI < this.logos.length; orderI++) {
+          for (const chain of this.chains)
+            this.logos[orderI][chain].setOptions({[wlPROPS.positionWidth]: this.positionWidth});
+        }
       }
 
       if (this.positionWidth === 0)