@datagrok/bio 2.0.13 → 2.0.16

package/src/utils/cell-renderer.ts

@@ -11,7 +11,6 @@ import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 const undefinedColor = 'rgb(100,100,100)';
 const monomerToShortFunction: (amino: string, maxLengthOfMonomer: number) => string = WebLogo.monomerToShort;
-const gapRenderer = 5;
 
 
 function getPaletteByType(paletteType: string): SeqPalette {
@@ -61,10 +60,15 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
   get defaultWidth(): number { return 230; }
 
+  onClick(gridCell: DG.GridCell, e: MouseEvent): void {
+    gridCell.cell.column.temp['current-word'] = gridCell.cell.value;
+    gridCell.grid.invalidate();
+  }
+
   onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
-    if (gridCell.cell.column.getTag(UnitsHandler.TAGS.aligned) !== 'SEQ.MSA') {
+    if (gridCell.cell.column.getTag(UnitsHandler.TAGS.aligned) !== 'SEQ.MSA')
       return;
-    }
+
     const maxLengthWordsSum = gridCell.cell.column.temp['bio-sum-maxLengthWords'];
     const maxIndex = gridCell.cell.column.temp['bio-maxIndex'];
     const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x);
@@ -84,16 +88,16 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
         } else if (argsX > maxLengthWordsSum[mid + 1]) {
           left = mid + 1;
         }
-        if (left == right) {
+        if (left == right)
           found = true;
-        }
       }
     }
     left = (argsX >= maxLengthWordsSum[left]) ? left + 1 : left;
     const separator = gridCell.cell.column.getTag('separator') ?? '';
     const splitterFunc: SplitterFunc = WebLogo.getSplitter('separator', separator);
     const subParts: string[] = splitterFunc(gridCell.cell.value);
-    (((subParts[left]?.length ?? 0) > 0)) ? ui.tooltip.show(ui.div(subParts[left]), e.x + 16, e.y + 16) : ui.tooltip.hide();
+    (((subParts[left]?.length ?? 0) > 0)) ?
+      ui.tooltip.show(ui.div(subParts[left]), e.x + 16, e.y + 16) : ui.tooltip.hide();
   }
 
   /**
@@ -131,45 +135,52 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
     const separator = gridCell.cell.column.getTag('separator') ?? '';
     const splitLimit = gridCell.bounds.width / 5;
-    const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, separator, gridCell.bounds.width / 5);
+    const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, separator, splitLimit);
+    const referenceSequence: string[] = splitterFunc(((gridCell.cell.column?.temp['reference-sequence'] != null) && (gridCell.cell.column?.temp['reference-sequence'] != ''))
+      ? gridCell.cell.column.temp['reference-sequence'] : gridCell.cell.column.temp['current-word'] ?? '');
+    const monomerWidth = (gridCell.cell.column?.temp['monomer-width'] != null) ? gridCell.cell.column.temp['monomer-width'] : 'short';
+    let gapRenderer = 5;
 
+    let maxIndex = 0;
 
-    const maxLengthOfMonomer = 8;
+    let maxLengthOfMonomer = 8;
+
+    if (monomerWidth === 'short') {
+      gapRenderer = 12;
+      maxLengthOfMonomer = 1;
+    }
 
     let maxLengthWords: any = {};
     if (gridCell.cell.column.getTag('.calculatedCellRender') !== splitLimit.toString()) {
       let samples = 0;
       while (samples < Math.min(gridCell.cell.column.length, 100)) {
-        let column = gridCell.cell.column.get(samples);
-        let subParts: string[] = splitterFunc(column);
+        const column = gridCell.cell.column.get(samples);
+        const subParts: string[] = splitterFunc(column);
         subParts.forEach((amino, index) => {
-          let textSize = monomerToShortFunction(amino, maxLengthOfMonomer).length * 7 + gapRenderer;
-          if (textSize > (maxLengthWords[index] ?? 0)) {
+          const textSize = monomerToShortFunction(amino, maxLengthOfMonomer).length * 7 + gapRenderer;
+          if (textSize > (maxLengthWords[index] ?? 0))
             maxLengthWords[index] = textSize;
-          }
-          if (index > (maxLengthWords['bio-maxIndex'] ?? 0)) {
-            maxLengthWords['bio-maxIndex'] = index;
+          if (index > maxIndex) {
+            maxIndex = index;
           }
         });
         samples += 1;
       }
       let minLength = 3 * 7;
-      for (let i = 0; i <= maxLengthWords['bio-maxIndex']; i++) {
+      for (let i = 0; i <= maxIndex; i++) {
         if (maxLengthWords[i] < minLength) {
           maxLengthWords[i] = minLength;
         }
+        const maxLengthWordSum: any = {};
+        maxLengthWordSum[0] = maxLengthWords[0];
+        for (let i = 1; i <= maxIndex; i++) {
+          maxLengthWordSum[i] = maxLengthWordSum[i - 1] + maxLengthWords[i];
+        }
+        gridCell.cell.column.temp['bio-sum-maxLengthWords'] = maxLengthWordSum;
+        gridCell.cell.column.temp['bio-maxIndex'] = maxIndex;
+        gridCell.cell.column.temp['bio-maxLengthWords'] = maxLengthWords;
+        gridCell.cell.column.setTag('.calculatedCellRender', splitLimit.toString());
       }
-      let maxLengthWordSum: any = {};
-      maxLengthWordSum[0] = maxLengthWords[0];
-      for (let i = 1; i <= maxLengthWords['bio-maxIndex']; i++) {
-        maxLengthWordSum[i] = maxLengthWordSum[i - 1] + maxLengthWords[i];
-      }
-      gridCell.cell.column.temp = {
-        'bio-sum-maxLengthWords': maxLengthWordSum,
-        'bio-maxIndex': maxLengthWords['bio-maxIndex'],
-        'bio-maxLengthWords': maxLengthWords
-      };
-      gridCell.cell.column.setTag('.calculatedCellRender', splitLimit.toString());
     } else {
       maxLengthWords = gridCell.cell.column.temp['bio-maxLengthWords'];
     }
@@ -178,16 +189,15 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     let x1 = x;
     let color = undefinedColor;
     let drawStyle = DrawStyle.classic;
-    if (gridCell.cell.column.getTag('aligned').includes('MSA') && gridCell.cell.column.getTag('units') === 'separator') {
+    if (gridCell.cell.column.getTag('aligned').includes('MSA') && gridCell.cell.column.getTag('units') === 'separator')
       drawStyle = DrawStyle.MSA;
-    }
+
     subParts.every((amino, index) => {
       color = palette.get(amino);
       g.fillStyle = undefinedColor;
       let last = index === subParts.length - 1;
-      x1 = printLeftOrCentered(x1, y, w, h, g, monomerToShortFunction(amino, maxLengthOfMonomer), color, 0, true, 1.0, separator, last, drawStyle, maxLengthWords, index, gridCell);
+      x1 = printLeftOrCentered(x1, y, w, h, g, amino, color, 0, true, 1.0, separator, last, drawStyle, maxLengthWords, index, gridCell, referenceSequence, maxLengthOfMonomer);
       return x1 - minDistanceRenderer - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x) <= gridCell.bounds.width;
-
     });
 
     g.restore();
@@ -196,13 +206,13 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 }
 
 export class MonomerCellRenderer extends DG.GridCellRenderer {
-  get name(): string {return C.SEM_TYPES.MONOMER;}
+  get name(): string { return C.SEM_TYPES.MONOMER; }
 
-  get cellType(): string {return C.SEM_TYPES.MONOMER;}
+  get cellType(): string { return C.SEM_TYPES.MONOMER; }
 
-  get defaultHeight(): number {return 15;}
+  get defaultHeight(): number { return 15; }
 
-  get defaultWidth(): number {return 30;}
+  get defaultWidth(): number { return 30; }
 
   /**
    * Cell renderer function.
@@ -213,7 +223,7 @@ export class MonomerCellRenderer extends DG.GridCellRenderer {
    * @param {number} w width of the cell.
    * @param {number} h height of the cell.
    * @param {DG.GridCell} gridCell Grid cell.
-   * @param {DG.GridCellStyle} cellStyle Cell style.
+   * @param {DG.GridCellStyle} _cellStyle Cell style.
    */
   render(
     g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
@@ -249,7 +259,7 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
    * @param {number} w width of the cell.
    * @param {number} h height of the cell.
    * @param {DG.GridCell} gridCell Grid cell.
-   * @param {DG.GridCellStyle} cellStyle Cell style.
+   * @param {DG.GridCellStyle} _cellStyle Cell style.
    * @memberof AlignedSequenceDifferenceCellRenderer
    */
   render(
@@ -261,7 +271,12 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
     const separator = gridCell.tableColumn!.tags[C.TAGS.SEPARATOR];
     const units: string = gridCell.tableColumn!.tags[DG.TAGS.UNITS];
     w = getUpdatedWidth(grid, g, x, w);
-    drawMoleculeDifferenceOnCanvas(g, x, y, w, h, s, units, separator);
+    //TODO: can this be replaced/merged with splitSequence?
+    const [s1, s2] = s.split('#');
+    const splitter = WebLogo.getSplitter(units, separator);
+    const subParts1 = splitter(s1);
+    const subParts2 = splitter(s2);
+    drawMoleculeDifferenceOnCanvas(g, x, y, w, h, subParts1, subParts2, units, separator);
   }
 }
 
@@ -271,17 +286,17 @@ export function drawMoleculeDifferenceOnCanvas(
   y: number,
   w: number,
   h: number,
-  s: string,
+  subParts1: string [],
+  subParts2: string [],
   units: string,
-  separator: string,
   fullStringLength?: boolean,
-  molDifferences?:{[key: number]: HTMLCanvasElement}) {
+  molDifferences?: { [key: number]: HTMLCanvasElement }) {
 
-  //TODO: can this be replaced/merged with splitSequence?
-  const [s1, s2] = s.split('#');
-  const splitter = WebLogo.getSplitter(units, separator);
-  const subParts1 = splitter(s1);
-  const subParts2 = splitter(s2);
+  if (subParts1.length !== subParts2.length) {
+    const emptyMonomersArray = new Array<string>(Math.abs(subParts1.length - subParts2.length)).fill('');
+    subParts1.length > subParts2.length ?
+      subParts2 = subParts2.concat(emptyMonomersArray) : subParts1 = subParts1.concat(emptyMonomersArray);
+  }
   const textSize1 = g.measureText(processSequence(subParts1).join(''));
   const textSize2 = g.measureText(processSequence(subParts2).join(''));
   const textWidth = Math.max(textSize1.width, textSize2.width);
@@ -315,35 +330,33 @@ export function drawMoleculeDifferenceOnCanvas(
       const subX0 = printLeftOrCentered(updatedX, updatedY - vShift, w, h, g, amino1, color1, 0, true);
       const subX1 = printLeftOrCentered(updatedX, updatedY + vShift, w, h, g, amino2, color2, 0, true);
       updatedX = Math.max(subX1, subX0);
-      if (molDifferences) {        
+      if (molDifferences)
         molDifferences[i] = createDifferenceCanvas(amino1, amino2, color1, color2, updatedY, vShift, h);
-      }
-    } else
-      updatedX = printLeftOrCentered(updatedX, updatedY, w, h, g, amino1, color1, 0, true, 0.5);
+    } else { updatedX = printLeftOrCentered(updatedX, updatedY, w, h, g, amino1, color1, 0, true, 0.5); }
     updatedX += 4;
   }
   g.restore();
 }
 
 function createDifferenceCanvas(
-  amino1: string, 
-  amino2: string, 
-  color1: string, 
-  color2: string, 
+  amino1: string,
+  amino2: string,
+  color1: string,
+  color2: string,
   y: number,
-  shift: number, 
+  shift: number,
   h: number): HTMLCanvasElement {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d')!;
-    context.font = '12px monospace';
-    const width1 = context.measureText(processSequence([amino1]).join('')).width;
-    const width2 = context.measureText(processSequence([amino2]).join('')).width;
-    const width = Math.max(width1, width2);
-    canvas.height = h;
-    canvas.width = width + 4;
-    context.font = '12px monospace';
-    context.textBaseline = 'top';
-    printLeftOrCentered(0, y - shift, width, h, context, amino1, color1, 0, true);
-    printLeftOrCentered(0, y + shift, width, h, context, amino2, color2, 0, true);
-    return canvas;
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  context.font = '12px monospace';
+  const width1 = context.measureText(processSequence([amino1]).join('')).width;
+  const width2 = context.measureText(processSequence([amino2]).join('')).width;
+  const width = Math.max(width1, width2);
+  canvas.height = h;
+  canvas.width = width + 4;
+  context.font = '12px monospace';
+  context.textBaseline = 'top';
+  printLeftOrCentered(0, y - shift, width, h, context, amino1, color1, 0, true);
+  printLeftOrCentered(0, y + shift, width, h, context, amino2, color2, 0, true);
+  return canvas;
 }

package/src/utils/ui-utils.ts

@@ -0,0 +1,4 @@
+export function updateDivInnerHTML(div: HTMLElement, content: string | Node): void {
+    div.innerHTML = '';
+    div.append(content);
+  }

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

@@ -3,6 +3,7 @@ import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
 import {VdRegionType, VdRegion} from '@datagrok-libraries/bio/src/vd-regions';
+import {IVdRegionsViewer} from '@datagrok-libraries/bio/src/viewers/vd-regions-viewer';
 import {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
 
 const vrt = VdRegionType;
@@ -36,7 +37,7 @@ const vrt = VdRegionType;
 /** Viewer with tabs based on description of chain regions.
  *  Used to define regions of an immunoglobulin LC.
  */
-export class VdRegionsViewer extends DG.JsViewer {
+export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   // private regionsDf: DG.DataFrame;
   private regionsFg: DG.FilterGroup | null = null;
   // private regionsTV: DG.TableView;

package/src/widgets/representations.ts

@@ -4,6 +4,64 @@ import * as DG from 'datagrok-api/dg';
 import {getMolfilesFromSingleSeq, HELM_CORE_LIB_FILENAME} from '../utils/utils';
 import {getMacroMol} from '../utils/atomic-works';
 
+/**
+ * @export
+ * @param {DG.Column} col macromolecule cell.
+ * @return {Promise<DG.Widget>} Widget.
+ */
+export function getMacroMolColumnPropertyPanel(col: DG.Column): DG.Widget {
+  const NONE = 'None';
+  const scaffoldColName = 'short';
+
+  // TODO: replace with an efficient version, bySemTypesExact won't help; GROK-8094
+  const columnsList = Array.from(col.dataFrame.columns as any).filter(
+    (c: any) => c.semType === DG.SEMTYPE.MOLECULE).map((c: any) => c.name);
+  const columnsSet = new Set(columnsList);
+  columnsSet.delete(col.name);
+
+  const monomerWidth = ui.choiceInput('Monomer width',
+    (col?.temp['monomer-width'] != null) ? col.temp['monomer-width'] : 'short',
+    ['short', 'long'],
+    (s: string) => {
+      col.temp['monomer-width'] = s;
+      col.setTag('.calculatedCellRender', '0');
+      col.dataFrame.fireValuesChanged();
+    });
+  monomerWidth.setTooltip('In short mode, only the first character should be visible, followed by .. if there are more characters');
+
+  const colorCode = ui.boolInput('Color code',
+    (col?.temp['color-code'] != null) ? col.temp['color-code'] : true,
+    (v: boolean) => {
+      col.temp['color-code'] = v;
+      col.dataFrame.fireValuesChanged();
+    });
+  colorCode.setTooltip('Color code');
+
+  const referenceSequence = ui.stringInput('Reference sequence', (col?.temp['reference-sequence'] != null) ? col?.temp['reference-sequence'] : '', (v: string) => {
+    col.temp['reference-sequence'] = v;
+    col.dataFrame.fireValuesChanged();
+  });
+  referenceSequence.setTooltip('Reference sequence is not empty, then the sequence will be render ' + '\n' +
+    'as a difference from the reference sequence');
+
+  const compareWithCurrent = ui.boolInput('Compare with current',
+    (col?.temp['compare-with-current'] != null) ? col.temp['compare-with-current'] : true,
+    (v: boolean) => {
+      col.temp['compare-with-current'] = v;
+      col.dataFrame.fireValuesChanged();
+    });
+  compareWithCurrent.setTooltip('When on, all sequences get rendered in the "diff" mode');
+
+  const rdKitInputs = ui.inputs([
+    monomerWidth,
+    colorCode,
+    referenceSequence,
+    compareWithCurrent
+  ]);
+
+  return new DG.Widget(rdKitInputs);
+}
+
 /**
  * 3D representation widget of macromolecule.
  *