@datagrok/bio 2.11.41 → 2.11.42

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.11.41",
+  "version": "2.11.42",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",

package/src/const.ts

@@ -0,0 +1,5 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+export const GAP_SYMBOL: string = '';

package/src/tests/WebLogo-positions-test.ts

@@ -11,6 +11,10 @@ import {
 } from '../viewers/web-logo-viewer';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
+import {GAP_SYMBOL} from '../const';
+
+const g: string = GAP_SYMBOL;
+
 category('WebLogo-positions', () => {
   const csvDf1 = `seq
 ATC-G-TTGC--
@@ -36,18 +40,18 @@ ATC-G-TTGC--
     const positions: PI[] = wlViewer['positions'];
 
     const resAllDf1: PI[] = [
-      new PI(0, '1', {'A': new PMI(2), '-': new PMI(3)}),
+      new PI(0, '1', {'A': new PMI(2), [g]: new PMI(3)}),
       new PI(1, '2', {'T': new PMI(5)}),
       new PI(2, '3', {'C': new PMI(5)}),
-      new PI(3, '4', {'-': new PMI(5)}),
+      new PI(3, '4', {[g]: new PMI(5)}),
       new PI(4, '5', {'G': new PMI(5)}),
-      new PI(5, '6', {'-': new PMI(3), 'C': new PMI(2)}),
+      new PI(5, '6', {[g]: new PMI(3), 'C': new PMI(2)}),
       new PI(6, '7', {'T': new PMI(5)}),
       new PI(7, '8', {'T': new PMI(5)}),
       new PI(8, '9', {'G': new PMI(5)}),
       new PI(9, '10', {'C': new PMI(5)}),
-      new PI(10, '11', {'-': new PMI(5)}),
-      new PI(11, '12', {'-': new PMI(5)}),
+      new PI(10, '11', {[g]: new PMI(5)}),
+      new PI(11, '12', {[g]: new PMI(5)}),
     ];
 
     expect(positions.length, resAllDf1.length);
@@ -89,15 +93,15 @@ ATC-G-TTGC--
     const positions: PI[] = wlViewer['positions'];
 
     const resAllDf1: PI[] = [
-      new PI(0, '1', {'-': new PMI(3)}),
+      new PI(0, '1', {[g]: new PMI(3)}),
       new PI(1, '2', {'T': new PMI(3)}),
-      new PI(2, '3', {'-': new PMI(3)}),
-      new PI(3, '4', {'-': new PMI(3)}),
+      new PI(2, '3', {[g]: new PMI(3)}),
+      new PI(3, '4', {[g]: new PMI(3)}),
       new PI(4, '5', {'C': new PMI(3)}),
-      new PI(5, '6', {'-': new PMI(2), 'C': new PMI(1)}),
+      new PI(5, '6', {[g]: new PMI(2), 'C': new PMI(1)}),
       new PI(6, '7', {'G': new PMI(3)}),
       new PI(7, '8', {'T': new PMI(3)}),
-      new PI(8, '9', {'-': new PMI(3)}),
+      new PI(8, '9', {[g]: new PMI(3)}),
     ];
 
     expect(positions.length, resAllDf1.length);
@@ -128,11 +132,11 @@ ATC-G-TTGC--
     const resPosList: PI[] = wlViewer['positions'];
 
     const tgtPosList: PI[] = [
-      new PI(0, '1', {'A': new PMI(2), '-': new PMI(3)}),
+      new PI(0, '1', {'A': new PMI(2), [g]: new PMI(3)}),
       new PI(1, '2', {'T': new PMI(5)}),
       new PI(2, '3', {'C': new PMI(5)}),
       new PI(4, '5', {'G': new PMI(5)}),
-      new PI(5, '6', {'-': new PMI(3), 'C': new PMI(2)}),
+      new PI(5, '6', {[g]: new PMI(3), 'C': new PMI(2)}),
       new PI(6, '7', {'T': new PMI(5)}),
       new PI(7, '8', {'T': new PMI(5)}),
       new PI(8, '9', {'G': new PMI(5)}),
@@ -166,7 +170,7 @@ ATC-G-TTGC--
     const tgtPosList: PI[] = [
       new PI(2, '3', {'C': new PMI(5)}),
       new PI(4, '5', {'G': new PMI(5)}),
-      new PI(5, '6', {'-': new PMI(3), 'C': new PMI(2)}),
+      new PI(5, '6', {[g]: new PMI(3), 'C': new PMI(2)}),
       new PI(6, '7', {'T': new PMI(5)}),
     ];
 

package/src/tests/bio-tests.ts

@@ -16,6 +16,11 @@ import {UnknownSeqPalette} from '@datagrok-libraries/bio/src/unknown';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {getStatsForCol} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
 
+import {GAP_SYMBOL} from '../const';
+
+/** GAP_SYMBOL */
+const g: string = GAP_SYMBOL;
+
 category('bio', () => {
   const csvDfN1: string = `seq
 ACGTCT
@@ -144,7 +149,7 @@ export async function _testGetAlphabetSimilarity() {
     'C': 3015,
     'G': 3015,
     'T': 2048,
-    '-': 1000,
+    [g]: 1000,
   };
   const alphabet: Set<string> = new Set(Object.keys(Nucleotides.Names));
   const res = getAlphabetSimilarity(freq, alphabet);

package/src/utils/macromolecule-column-widget.ts

@@ -14,7 +14,7 @@ export class MacromoleculeColumnWidget extends DG.Widget {
 
   private readonly seqCol: DG.Column<string>;
 
-  private wlViewer: WebLogoViewer;
+  private wlViewer: WebLogoViewer | null = null;
 
   constructor(seqCol: DG.Column<string>) {
     super(ui.divV([]));
@@ -46,7 +46,10 @@ export class MacromoleculeColumnWidget extends DG.Widget {
   }
 
   override detach() {
-    this.wlViewer.detach();
+    if (this.wlViewer) {
+      this.wlViewer.detach();
+      this.wlViewer = null;
+    }
     super.detach();
   }
 }

package/src/viewers/web-logo-viewer.ts

@@ -26,6 +26,7 @@ import {AggFunc, getAgg} from '../utils/agg';
 import {buildCompositionTable} from '../widgets/composition-analysis-widget';
 
 import {_package} from '../package';
+import {GAP_SYMBOL} from '../const';
 
 declare global {
   interface HTMLCanvasElement {
@@ -81,12 +82,6 @@ export class PositionMonomerInfo {
 }
 
 export class PositionInfo {
-  /** Position in sequence */
-  public readonly pos: number;
-
-  /** Position name from column tag*/
-  public readonly name: string;
-
   private readonly _label: string | undefined;
   public get label(): string { return !!this._label ? this._label : this.name; }
 
@@ -105,11 +100,12 @@ export class PositionInfo {
    * @param {number} rowCount Count of elements in column
    * @param {number} sumForHeightCalc Sum of all monomer counts for height calculation
    */
-  constructor(pos: number, name: string, freqs?: { [m: string]: PositionMonomerInfo },
+  constructor(
+    /** Position in sequence */ public readonly pos: number,
+    /** Position name from column tag*/ public readonly name: string,
+    freqs?: { [m: string]: PositionMonomerInfo },
     options?: { sumRowCount?: number, sumValueForHeight?: number, label?: string }
   ) {
-    this.pos = pos;
-    this.name = name;
     this._freqs = freqs ?? {};
 
     if (options?.sumRowCount) this.sumRowCount = options.sumRowCount;
@@ -240,6 +236,8 @@ export class PositionInfo {
   }
 
   buildCompositionTable(palette: SeqPalette): HTMLTableElement {
+    if ('-' in this._freqs)
+      throw new Error(`Unexpected monomer symbol '-'.`);
     return buildCompositionTable(palette,
       Object.assign({}, ...Object.entries(this._freqs)
         .map(([m, pmi]) => ({[m]: pmi.rowCount})))
@@ -616,13 +614,13 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   private getFilter(): DG.BitSet {
     let dfFilterRes: DG.BitSet;
     switch (this.filterSource) {
-      case FilterSources.Filtered:
-        dfFilterRes = this.dataFrame.filter;
-        break;
+    case FilterSources.Filtered:
+      dfFilterRes = this.dataFrame.filter;
+      break;
 
-      case FilterSources.Selected:
-        dfFilterRes = this.dataFrame.selection.trueCount === 0 ? this.dataFrame.filter : this.dataFrame.selection;
-        break;
+    case FilterSources.Selected:
+      dfFilterRes = this.dataFrame.selection.trueCount === 0 ? this.dataFrame.filter : this.dataFrame.selection;
+      break;
     }
     return dfFilterRes;
   }
@@ -816,45 +814,42 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     super.onPropertyChanged(property);
 
     switch (property.name) {
-      case PROPS.sequenceColumnName:
-        this.updateSeqCol();
-        break;
-      case PROPS.sequenceColumnName:
-      case PROPS.startPositionName:
-      case PROPS.endPositionName:
-      case PROPS.filterSource:
-      case PROPS.shrinkEmptyTail:
-      case PROPS.skipEmptyPositions:
-      case PROPS.positionHeight: {
-        this.render(WlRenderLevel.Freqs, `onPropertyChanged( ${property.name} )`);
-        break;
-      }
-
-      case PROPS.valueColumnName:
-      case PROPS.valueAggrType: {
-        this.render(WlRenderLevel.Freqs, `onPropertyChanged( ${property.name} )`);
-        break;
-      }
+    case PROPS.sequenceColumnName:
+      this.updateSeqCol();
+      break;
+    case PROPS.startPositionName:
+    case PROPS.endPositionName:
+    case PROPS.filterSource:
+    case PROPS.shrinkEmptyTail:
+    case PROPS.skipEmptyPositions:
+    case PROPS.positionHeight: {
+      this.render(WlRenderLevel.Freqs, `onPropertyChanged( ${property.name} )`);
+      break;
+    }
+    case PROPS.valueColumnName:
+    case PROPS.valueAggrType: {
+      this.render(WlRenderLevel.Freqs, `onPropertyChanged( ${property.name} )`);
+      break;
+    }
+    case PROPS.minHeight:
+    case PROPS.maxHeight:
+    case PROPS.positionWidth:
+    case PROPS.showPositionLabels:
+    case PROPS.fixWidth:
+    case PROPS.fitArea:
+    case PROPS.horizontalAlignment:
+    case PROPS.verticalAlignment:
+    case PROPS.positionMargin:
+    case PROPS.positionMarginState: {
       // this.positionWidth obtains a new value
       // this.updateSlider updates this._positionWidth
-      case PROPS.minHeight:
-      case PROPS.maxHeight:
-      case PROPS.positionWidth:
-      case PROPS.showPositionLabels:
-      case PROPS.fixWidth:
-      case PROPS.fitArea:
-      case PROPS.horizontalAlignment:
-      case PROPS.verticalAlignment:
-      case PROPS.positionMargin:
-      case PROPS.positionMarginState: {
-        this.render(WlRenderLevel.Layout, `onPropertyChanged(${property.name})`);
-        break;
-      }
-
-      case PROPS.backgroundColor: {
-        this.render(WlRenderLevel.Render, `onPropertyChanged(${property.name})`);
-        break;
-      }
+      this.render(WlRenderLevel.Layout, `onPropertyChanged(${property.name})`);
+      break;
+    }
+    case PROPS.backgroundColor: {
+      this.render(WlRenderLevel.Render, `onPropertyChanged(${property.name})`);
+      break;
+    }
     }
   }
 
@@ -928,8 +923,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   protected _removeEmptyPositions() {
     if (this.skipEmptyPositions) {
       this.positions = wu(this.positions).filter((pi) => {
-        const gapSymbol: string = this.unitsHandler!.defaultGapSymbol;
-        return !pi.hasMonomer(gapSymbol) || pi.getFreq(gapSymbol).rowCount !== pi.sumRowCount;
+        return !pi.hasMonomer(GAP_SYMBOL) || pi.getFreq(GAP_SYMBOL).rowCount !== pi.sumRowCount;
       }).toArray();
     }
   }
@@ -1004,9 +998,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
         for (let rowI = 0; rowI < dfRowCount; ++rowI) {
           if (dfFilter.get(rowI)) {
             const seqMList: ISeqSplitted = splitted[rowI];
-            const m: string = seqMList[this.startPosition + jPos] || this.unitsHandler.defaultGapSymbol;
+            const om: string = seqMList[this.startPosition + jPos] || this.unitsHandler.defaultGapSymbol;
+            const cm: string = this.unitsHandler?.defaultGapSymbol === om ? GAP_SYMBOL : om;
             const pi = this.positions[jPos];
-            const pmi = pi.getFreq(m);
+            const pmi = pi.getFreq(cm);
             ++pi.sumRowCount;
             pmi.value = ++pmi.rowCount;
           }
@@ -1078,9 +1073,8 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       if (this.seqCol && !this.palette) {
         this.msgHost!.innerText = `Unknown palette (column semType: '${this.seqCol.semType}').`;
         this.msgHost!.style.display = '';
-      } else {
+      } else
         this.msgHost!.style.display = 'none';
-      }
     }
 
     if (!this.seqCol || !this.dataFrame || !this.palette || this.host == null || this.slider == null)
@@ -1233,9 +1227,8 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
           tooltipRows.push(ui.div(`${this.valueAggrType}: ${pmi.value.toFixed(3)}`));
         const tooltipEl = ui.divV(tooltipRows);
         ui.tooltip.show(tooltipEl, args.x + 16, args.y + 16);
-      } else {
+      } else
         ui.tooltip.hide();
-      }
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.canvasOnMouseMove() error:\n` + errMsg);

package/src/widgets/composition-analysis-widget.ts

@@ -9,6 +9,7 @@ import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
 import '../../css/composition-analysis.css';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {GAP_SYMBOL} from '../const';
 
 
 export function getCompositionAnalysisWidget(val: DG.SemanticValue): DG.Widget {
@@ -17,15 +18,15 @@ export function getCompositionAnalysisWidget(val: DG.SemanticValue): DG.Widget {
   const alphabet = val.cell.column.tags[bioTAGS.alphabet];
   let palette: SeqPalette = UnknownSeqPalettes.Color;
   switch (alphabet) {
-    case ALPHABET.DNA:
-    case ALPHABET.RNA:
-      palette = getPaletteByType(ALPHABET.DNA);
-      break;
-    case ALPHABET.PT:
-      palette = getPaletteByType(ALPHABET.PT);
-      break;
-    default:
-      break;
+  case ALPHABET.DNA:
+  case ALPHABET.RNA:
+    palette = getPaletteByType(ALPHABET.DNA);
+    break;
+  case ALPHABET.PT:
+    palette = getPaletteByType(ALPHABET.PT);
+    break;
+  default:
+    break;
   }
 
   const counts: { [m: string]: number } = {};
@@ -57,15 +58,21 @@ export function buildCompositionTable(palette: SeqPalette, counts: { [m: string]
   const maxRatio = maxValue! / sumValue;
   const elMap: { [m: string]: HTMLElement } = Object.assign({}, ...Array.from(Object.entries(counts))
     .sort((a, b) => b[1] - a[1])
-    .map(([m, value]) => {
+    .map(([cm, value]) => {
       const ratio = value / sumValue;
-      const color = palette.get(m);
+      const color = palette.get(cm);
       const barDiv = ui.div('', {classes: 'macromolecule-cell-comp-analysis-bar'});
       barDiv.style.width = `${50 * ratio / maxRatio}px`;
       barDiv.style.backgroundColor = color;
+      if (GAP_SYMBOL === cm) {
+        barDiv.style.borderWidth = '1px';
+        barDiv.style.borderStyle = 'solid';
+        barDiv.style.borderColor = DG.Color.toHtml(DG.Color.lightGray);
+      }
+      const displayMonomer: string = GAP_SYMBOL === cm ? '-' : cm;
       const valueDiv = ui.div(`${(100 * ratio).toFixed(2)}%`);
       const el = ui.div([barDiv, valueDiv], {classes: 'macromolecule-cell-comp-analysis-value'});
-      return ({[m]: el});
+      return ({[displayMonomer]: el});
     }));
 
   const table = ui.tableFromMap(elMap);