@datagrok/peptides 1.17.20 → 1.17.22

package/package.json

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

package/src/package.ts

@@ -14,6 +14,7 @@ import {PeptidesModel} from './model';
 import {macromoleculeSarFastaDemoUI} from './demo/fasta';
 import {u2} from '@datagrok-libraries/utils/src/u2';
 import {ClusterMaxActivityViewer} from './viewers/cluster-max-activity-viewer';
+import {LSTPieChartRenderer} from './utils/cell-renderer';
 
 let monomerWorks: MonomerWorks | null = null;
 let treeHelper: ITreeHelper;
@@ -169,3 +170,12 @@ export function manualAlignment(_monomer: string): DG.Widget {
 export async function macromoleculeSarFastaDemo(): Promise<void> {
   return macromoleculeSarFastaDemoUI();
 }
+
+//name: LST Pie Chart
+//tags: cellRenderer
+//meta.cellType: lst-pie-chart
+//meta.gridChart: true
+//output: grid_cell_renderer result
+export function lstPiechartCellRenderer(): LSTPieChartRenderer {
+  return new LSTPieChartRenderer();
+}

package/src/utils/cell-renderer.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
@@ -439,3 +440,190 @@ function findWebLogoMonomerPosition(cell: DG.GridCell, ev: MouseEvent, webLogoBo
 
   return null;
 }
+
+
+/**
+ * Renderer for LST pie chart cell
+ *
+ */
+
+export class LSTPieChartRenderer extends DG.GridCellRenderer {
+  get name(): string {return 'LST Pie Chart';}
+
+  get cellType(): string {return 'lst-pie-chart';}
+
+  get defaultWidth(): number | null {return 80;}
+
+  get defaultHeight(): number | null {return 80;}
+
+  colorCacheKey = 'lst-pie-chart-color-cache'; // key for temp storage of category number cache
+  categoryNumberCache(col: DG.Column): {[_: string]: number} {
+    if (!col.temp[this.colorCacheKey])
+      col.temp[this.colorCacheKey] = {};
+    return col.temp[this.colorCacheKey] as {[_: string]: number};
+  };
+
+  HoverTempKey = 'lst-pie-chart-hovered-sector'; // key for temp storage of hovered sector
+  hoverSeparator = ',,,,,'; // separator for hovered sector
+
+  getPrevHoveredSector(col: DG.Column): string | null {
+    return col.temp[this.HoverTempKey] as string;
+  }
+
+  onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
+    const prev = this.getPrevHoveredSector(gridCell.cell.column);
+    const beforeReturn = (): void => {
+      gridCell.cell.column.temp[this.HoverTempKey] = null;
+      ui.tooltip.hide();
+
+      if (prev !== null)
+        gridCell.grid.invalidate();
+    };
+
+    const value = gridCell.cell.value;
+    if (!value) {
+      beforeReturn();
+      return;
+    }
+    const vectorX = e.offsetX - gridCell.bounds.midX;
+    const vectorY = e.offsetY - gridCell.bounds.midY;
+    const distance = Math.sqrt(vectorX * vectorX + vectorY * vectorY);
+    const atan2 = Math.atan2(vectorY, vectorX);
+    const angle = atan2 < 0 ? atan2 + 2 * Math.PI : atan2;
+    if (distance > Math.min(gridCell.bounds.width, gridCell.bounds.height) / 2 - 2) {
+      beforeReturn();
+      return;
+    }
+
+    let JSONData: {[_: string]: number};
+    try {
+      JSONData = JSON.parse(value);
+    } catch (e) {
+      beforeReturn();
+      return;
+    }
+
+    const angles = new Float64Array(Object.keys(JSONData).length + 1);
+    const totalCount = Object.values(JSONData).reduce((a, b) => a + b, 0);
+    angles[Object.keys(JSONData).length] = Math.PI * 2;
+    let angleAccum = 0;
+    let i = 0;
+    for (const val of Object.values(JSONData)) {
+      angles[i++] = angleAccum;
+      const angleAdd = 2 * Math.PI * val / totalCount;
+      angleAccum += angleAdd;
+    }
+
+    let hitCategory = -1;
+    for (let i = 0; i < angles.length - 1; i++) {
+      if (angle >= angles[i] && angle < angles[i + 1]) {
+        hitCategory = i;
+        break;
+      }
+    }
+    if (hitCategory === -1) {
+      beforeReturn();
+      return;
+    }
+    const hitCategoryName = Object.keys(JSONData)[hitCategory];
+    const hitCategoryValue = JSONData[hitCategoryName];
+    const percentage = (hitCategoryValue / totalCount * 100).toFixed(2);
+    ui.tooltip.show(ui.h1(`${hitCategoryName}: ${hitCategoryValue} (${percentage}%)`), e.x + 16, e.y +
+      16);
+    const hoverTemp = gridCell.cell.rowIndex.toString() + this.hoverSeparator + hitCategoryName;
+    gridCell.cell.column.temp[this.HoverTempKey] = hoverTemp;
+    if (prev !== hoverTemp)
+      gridCell.grid.invalidate();
+  }
+
+  render(
+    g: CanvasRenderingContext2D,
+    x: number, y: number, w: number, h: number,
+    gridCell: DG.GridCell, _cellStyle: DG.GridCellStyle,
+  ): void {
+    const df = gridCell.cell.dataFrame;
+    const box = new DG.Rect(x, y, w, h).fitSquare().inflate(-2, -2);
+    if (w < 5 || h < 5 || !df) return;
+    const value = gridCell.cell.value;
+    g.clearRect(x, y, w, h);
+    if (!value) return;
+
+    let JSONData: {[_: string]: number};
+    try {
+      JSONData = JSON.parse(value);
+    } catch (e) {
+      return;
+    }
+
+    const totalCount = Object.values(JSONData).reduce((a, b) => a + b, 0);
+
+    let angleAccum = 0;
+
+    const alphas = Object.fromEntries(Object.keys(JSONData).map((key) => [key, 255]));
+
+    const hoverTemp = gridCell.cell.column.temp[this.HoverTempKey] as string;
+    if (hoverTemp && hoverTemp.split(this.hoverSeparator).length === 2) {
+      const [rowIdx, category] = hoverTemp.split(this.hoverSeparator);
+      if (rowIdx === gridCell.cell.rowIndex.toString()) {
+        for (const [key, _] of Object.entries(JSONData))
+          alphas[key] = 100;
+        alphas[category] = 255;
+      }
+    }
+
+    const radius = Math.min(w, h) / 2.2;
+
+    for (const [key, val] of Object.entries(JSONData)) {
+      const angle = 2 * Math.PI * val / totalCount;
+      g.beginPath();
+      g.moveTo(box.midX, box.midY);
+      g.arc(box.midX, box.midY, radius, angleAccum, angleAccum + angle);
+      angleAccum += angle;
+      const colorCache = this.categoryNumberCache(gridCell.cell.column);
+      if (!colorCache[key]) {
+        colorCache[key] = Object.keys(colorCache).length; // cache category number keys, so that colors are consistent
+        gridCell.cell.column.temp[this.colorCacheKey] = colorCache;
+      }
+      g.fillStyle = DG.Color.toHtml(
+        DG.Color.setAlpha(DG.Color.getCategoricalColor(colorCache[key]), alphas[key]),
+      );
+      g.fill();
+      g.strokeStyle = DG.Color.toRgb(DG.Color.lightGray);
+      g.stroke();
+
+
+      // text rendering
+      const text = key;
+      // g.font = '10px Arial'; // Adjust font size and family as needed
+      g.fillStyle = DG.Color.toRgb(DG.Color.white);
+      g.font = '9px Arial';
+      const textWidth = g.measureText(text).width;
+
+      const middleAngle = angleAccum - (angle / 2);
+
+      // get the best position for the text
+      for (let textRadiusMult = 0.8; textRadiusMult >= 0.4; textRadiusMult -= 0.05) {
+        const textRadius = radius * textRadiusMult;
+        const textX = box.midX + Math.cos(middleAngle) * textRadius;
+        const textY = box.midY + Math.sin(middleAngle) * textRadius;
+
+        // perform pseudo hit test to check if text fits in the pie slice
+        const leftPart = textX - textWidth / 2 - 2;
+        const rightPart = textX + textWidth / 2 + 2;
+
+        const isTextInside = [[leftPart, textY], [rightPart, textY]]
+          .every((point) => {
+            const d = Math.sqrt((point[0] - box.midX) ** 2 + (point[1] - box.midY) ** 2);
+            const at = Math.atan2(point[1] - box.midY, point[0] - box.midX);
+            const a = at < 0 ? at + 2 * Math.PI : at;
+            return d < radius - 2 && a > angleAccum - angle && a < angleAccum;
+          });
+
+        if (isTextInside) {
+          g.fillText(text, textX, textY);
+          break;
+        }
+      }
+    }
+  }
+}

package/src/utils/misc.ts

@@ -431,12 +431,14 @@ export function mutationCliffsToMaskInfo(mutationCliffs: type.MutationCliffs, ro
  * @param aggColsModel - Object with aggregation columns from analysis settings.
  * @return - Array of combined aggregation columns.
  */
-export function getTotalAggColumns(viewerSelectedColNames: string[], aggColsViewer: AggregationColumns,
-  aggColsModel?: AggregationColumns): [string, DG.AggregationType][] {
+export function getTotalAggColumns(df: DG.DataFrame, viewerSelectedColNames: string[],
+  aggColsViewer: AggregationColumns, aggColsModel?: AggregationColumns): [string, DG.AggregationType][] {
   const aggColsEntries = Object.entries(aggColsViewer);
   const aggColsEntriesFromSettings = !aggColsModel ? [] : Object.entries(aggColsModel)
     .filter((it) => !viewerSelectedColNames.includes(it[0]) || aggColsViewer[it[0]] !== it[1]);
-  return aggColsEntries.concat(aggColsEntriesFromSettings);
+
+  return aggColsEntries.concat(aggColsEntriesFromSettings)
+    .filter((it) => df.columns.contains(it[0]) && df.col(it[0])!.matches('numerical'));
 }
 
 /**

package/src/utils/statistics.ts

@@ -152,3 +152,19 @@ export function getAggregatedColumnValuesFromDf(df: DG.DataFrame, idx: number,
   }
   return colResults;
 }
+
+export function getStringColAggregatedJSON(df: DG.DataFrame, colName: string, mask?: DG.BitSet): string {
+  const col = df.col(colName.substring(5, colName.length - 1)); // remove 'dist(' and ')'
+  if (!col || !col.matches('categorical'))
+    return '{}';
+  mask ??= DG.BitSet.create(df.rowCount, () => true);
+  const values = col.getRawData();
+  const valueCounts = new Map<number, number>();
+  for (let i = -1; (i = mask.findNext(i, true)) !== -1;)
+    valueCounts.set(values[i], (valueCounts.get(values[i]) ?? 0) + 1);
+
+  const resJSON: {[_: string]: number} = {};
+  for (const [value, count] of valueCounts)
+    resJSON[col.categories[value]] = count;
+  return JSON.stringify(resJSON);
+}

package/src/viewers/cluster-max-activity-viewer.ts

@@ -290,7 +290,7 @@ export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMax
 
     this.render();
 
-    this.dataFrame.onDataChanged.subscribe(() => {
+    this.dataFrame?.onDataChanged.subscribe(() => {
       this.render();
     });
   }
@@ -299,6 +299,8 @@ export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMax
     if (this.renderTimeout)
       clearTimeout(this.renderTimeout);
     this.renderTimeout = setTimeout(() => {
+      if (!this.dataFrame)
+        return;
       $(this.root).empty();
       const scViewer = this.scViewer;
       if (scViewer == null) {

package/src/viewers/logo-summary.ts

@@ -14,6 +14,7 @@ import {
   getAggregatedColumnValues,
   getAggregatedValue,
   getStats,
+  getStringColAggregatedJSON,
   StatsItem,
 } from '../utils/statistics';
 import wu from 'wu';
@@ -96,8 +97,11 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
       {
         category: LST_CATEGORIES.GENERAL,
         nullable: false,
+        columnTypeFilter: DG.TYPE.CATEGORICAL,
       });
-    this.activityColumnName = this.column(LST_PROPERTIES.ACTIVITY, {category: LST_CATEGORIES.GENERAL, nullable: false});
+    this.activityColumnName = this.column(LST_PROPERTIES.ACTIVITY, {
+      category: LST_CATEGORIES.GENERAL, nullable: false, columnTypeFilter: DG.TYPE.NUMERICAL,
+    });
     this.activityScaling = this.string(LST_PROPERTIES.ACTIVITY_SCALING, C.SCALING_METHODS.NONE,
       {
         category: LST_CATEGORIES.GENERAL,
@@ -276,7 +280,9 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
    * @return - map of columns and aggregations.
    */
   getAggregationColumns(): AggregationColumns {
-    return Object.fromEntries(this.columns.map((colName) => [colName, this.aggregation] as [string, DG.AGG]));
+    return Object.fromEntries(this.columns.map((colName) => [colName, this.aggregation] as [string, DG.AGG])
+      .filter(([colName, _]) => this.model.df.columns.contains(colName) &&
+        this.model.df.col(colName)!.matches('numerical')));
   }
 
   /** Processes attached table and sets viewer properties. */
@@ -411,7 +417,12 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
    */
   getTotalViewerAggColumns(): [string, DG.AggregationType][] {
     const aggrCols = this.getAggregationColumns();
-    return getTotalAggColumns(this.columns, aggrCols, this.model?.settings?.columns);
+    return getTotalAggColumns(this.model.df, this.columns, aggrCols, this.model?.settings?.columns);
+  }
+
+  getStringAggregatedColumns(): string[] {
+    return this.columns.filter((colName) => this.model.df.columns.contains(colName) &&
+      this.model.df.col(colName)!.matches('categorical')).map((cn) => `dist(${cn})`);
   }
 
   /**
@@ -449,16 +460,18 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     const customRatioColData = customLSTCols.addNewFloat(C.LST_COLUMN_NAMES.RATIO).getRawData();
 
     let origLSTBuilder = filteredDf.groupBy([clustersColName]);
-    const aggColsEntries = this.getTotalViewerAggColumns();
-    const aggColNames = aggColsEntries.map(([colName, aggFn]) => getAggregatedColName(aggFn, colName));
-    const customAggRawCols = new Array(aggColNames.length);
-    const colAggEntries = aggColsEntries.map(
+    const aggNumericColsEntries = this.getTotalViewerAggColumns();
+    const aggStringColNames = this.getStringAggregatedColumns();
+    const aggStringCols = aggStringColNames.map((colName) => customLSTCols.addNewString(colName));
+    const aggNumericColNames = aggNumericColsEntries.map(([colName, aggFn]) => getAggregatedColName(aggFn, colName));
+    const customAggRawCols = new Array(aggNumericColNames.length + aggStringColNames.length);
+    const numericColAggEntries = aggNumericColsEntries.map(
       ([colName, aggFn]) => [filteredDf.getCol(colName), aggFn] as [DG.Column<number>, DG.AggregationType]);
 
-    for (let aggIdx = 0; aggIdx < aggColsEntries.length; ++aggIdx) {
-      const [colName, aggFn] = aggColsEntries[aggIdx];
-      origLSTBuilder = origLSTBuilder.add(aggFn, colName, aggColNames[aggIdx]);
-      const customLSTAggCol = customLSTCols.addNewFloat(aggColNames[aggIdx]);
+    for (let aggIdx = 0; aggIdx < aggNumericColsEntries.length; ++aggIdx) {
+      const [colName, aggFn] = aggNumericColsEntries[aggIdx];
+      origLSTBuilder = origLSTBuilder.add(aggFn, colName, aggNumericColNames[aggIdx]);
+      const customLSTAggCol = customLSTCols.addNewFloat(aggNumericColNames[aggIdx]);
       customAggRawCols[aggIdx] = customLSTAggCol.getRawData();
     }
 
@@ -484,10 +497,15 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
       customPValColData[rowIdx] = stats.pValue ?? DG.FLOAT_NULL;
       customRatioColData[rowIdx] = stats.ratio;
 
-      for (let aggColIdx = 0; aggColIdx < aggColNames.length; ++aggColIdx) {
-        const [col, aggFn] = colAggEntries[aggColIdx];
+      for (let aggColIdx = 0; aggColIdx < aggNumericColNames.length; ++aggColIdx) {
+        const [col, aggFn] = numericColAggEntries[aggColIdx];
         customAggRawCols[aggColIdx][rowIdx] = getAggregatedValue(col, aggFn, bsMask);
       }
+      for (let aggColIdx = aggNumericColNames.length; aggColIdx < customAggRawCols.length; ++aggColIdx) {
+        const colName = aggStringColNames[aggColIdx - aggNumericColNames.length];
+        aggStringCols[aggColIdx - aggNumericColNames.length]
+          .set(rowIdx, getStringColAggregatedJSON(filteredDf, colName, bsMask));
+      }
     }
     customWebLogoCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
     customDistCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
@@ -512,6 +530,7 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     const origMDColData = origLSTCols.addNewFloat(C.LST_COLUMN_NAMES.MEAN_DIFFERENCE).getRawData();
     const origPValColData = origLSTCols.addNewFloat(C.LST_COLUMN_NAMES.P_VALUE).getRawData();
     const origRatioColData = origLSTCols.addNewFloat(C.LST_COLUMN_NAMES.RATIO).getRawData();
+    const origAggStringCols = aggStringColNames.map((colName) => origLSTCols.addNewString(colName));
     const origBitsets: DG.BitSet[] = new Array(origLSTLen);
     const origClustMasks = Array.from({length: origLSTLen},
       () => new BitArray(filteredDfRowCount, false));
@@ -527,10 +546,15 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
       if (mask.allFalse)
         continue;
 
+
       const bsMask = DG.BitSet.fromBytes(mask.buffer.buffer, filteredDfRowCount);
       const stats = isDfFiltered ? getStats(activityColData, mask) :
         this.clusterStats[CLUSTER_TYPE.ORIGINAL][origLSTClustColCat[rowIdx]];
-
+      for (let aggColIdx = 0; aggColIdx < aggStringColNames.length; ++aggColIdx) {
+        const colName = aggStringColNames[aggColIdx];
+        origAggStringCols[aggColIdx]
+          .set(rowIdx, getStringColAggregatedJSON(filteredDf, colName, bsMask));
+      }
       origMembersColData[rowIdx] = stats.count;
       origBitsets[rowIdx] = bsMask;
       origMDColData[rowIdx] = stats.meanDifference;
@@ -544,6 +568,9 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     // combine LSTs and create a grid
     const summaryTable = origLST.append(customLST);
     this.bitsets = origBitsets.concat(customBitsets);
+
+    aggStringColNames.forEach((sn) => summaryTable.col(sn)!.semType = 'lst-pie-chart');
+
     return summaryTable;
   }
 
@@ -563,7 +590,8 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     const gridClustersCol = grid.col(C.LST_COLUMN_NAMES.CLUSTER)!;
     gridClustersCol.visible = true;
     grid.columns.setOrder([C.LST_COLUMN_NAMES.CLUSTER, C.LST_COLUMN_NAMES.MEMBERS,
-      C.LST_COLUMN_NAMES.WEB_LOGO, C.LST_COLUMN_NAMES.DISTRIBUTION, C.LST_COLUMN_NAMES.MEAN_DIFFERENCE,
+      C.LST_COLUMN_NAMES.WEB_LOGO, ...this.getStringAggregatedColumns(),
+      C.LST_COLUMN_NAMES.DISTRIBUTION, C.LST_COLUMN_NAMES.MEAN_DIFFERENCE,
       C.LST_COLUMN_NAMES.P_VALUE, C.LST_COLUMN_NAMES.RATIO, ...aggColNames]);
     grid.columns.rowHeader!.visible = false;
     grid.props.rowHeight = 55;
@@ -800,13 +828,21 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     const aggregatedValues: {
       [colName: string]: number
     } = {};
+    const stringAggregatedValues: {
+      [colName: string]: string
+    } = {};
     const aggColsEntries = this.getTotalViewerAggColumns();
+    const aggStringColNames = this.getStringAggregatedColumns();
     for (const [colName, aggFn] of aggColsEntries) {
       const newColName = getAggregatedColName(aggFn, colName);
       const col = this.dataFrame.getCol(colName);
       aggregatedValues[newColName] = getAggregatedValue(col, aggFn, currentSelection);
     }
 
+    for (const colName of aggStringColNames)
+      stringAggregatedValues[colName] = getStringColAggregatedJSON(this.dataFrame, colName, currentSelection);
+
+
     for (let i = 0; i < viewerDfColsLength; ++i) {
       const col = viewerDfCols.byIndex(i);
       newClusterVals[i] = col.name === C.LST_COLUMN_NAMES.CLUSTER ? newClusterName :
@@ -817,7 +853,8 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
                 col.name === C.LST_COLUMN_NAMES.P_VALUE ? stats.pValue :
                   col.name === C.LST_COLUMN_NAMES.RATIO ? stats.ratio :
                     col.name in aggregatedValues ? aggregatedValues[col.name] :
-                      undefined;
+                      col.name in stringAggregatedValues ? stringAggregatedValues[col.name] :
+                        undefined;
       if (typeof newClusterVals[i] === 'undefined')
         _package.logger.warning(`PeptidesLSTWarn: value for column ${col.name} is undefined`);
     }

package/src/viewers/sar-viewer.ts

@@ -122,7 +122,6 @@ export abstract class SARViewer extends DG.JsViewer implements ISARViewer {
       {category: PROPERTY_CATEGORIES.MUTATION_CLIFFS, min: 0, max: 100});
     this.maxMutations = this.int(SAR_PROPERTIES.MAX_MUTATIONS, 1,
       {category: PROPERTY_CATEGORIES.MUTATION_CLIFFS, min: 1, max: 20});
-
     this.columns = this.columnList(SAR_PROPERTIES.COLUMNS, [], {category: PROPERTY_CATEGORIES.AGGREGATION});
     this.aggregation = this.string(SAR_PROPERTIES.AGGREGATION, DG.AGG.AVG,
       {category: PROPERTY_CATEGORIES.AGGREGATION, choices: C.AGGREGATION_TYPES});
@@ -422,8 +421,9 @@ export abstract class SARViewer extends DG.JsViewer implements ISARViewer {
    * @return - map of columns and aggregations.
    */
   getAggregationColumns(): AggregationColumns {
-    return Object.fromEntries(
-      this.columns.map((colName) => [colName, this.aggregation] as [string, DG.AGG]));
+    return Object.fromEntries(this.columns.map((colName) => [colName, this.aggregation] as [string, DG.AGG])
+      .filter(([colName, _]) => this.model.df.columns.contains(colName) &&
+        this.model.df.col(colName)!.matches('numerical')));
   }
 
   /**
@@ -432,7 +432,7 @@ export abstract class SARViewer extends DG.JsViewer implements ISARViewer {
    */
   getTotalViewerAggColumns(): [string, DG.AggregationType][] {
     const aggrCols = this.getAggregationColumns();
-    return getTotalAggColumns(this.columns, aggrCols, this.model?.settings?.columns);
+    return getTotalAggColumns(this.model.df, this.columns, aggrCols, this.model?.settings?.columns);
   }
 
   /** Creates viewer grid. */

package/src/widgets/mutation-cliffs.ts

@@ -243,6 +243,9 @@ function cliffsPairsWidgetParts(table: DG.DataFrame, options: MutationCliffsOpti
     pairsGrid.root.style.setProperty('width', '100%');
     uniqueSequencesGrid.root.style.removeProperty('width');
     uniqueSequencesGrid.root.style.setProperty('width', '100%');
+    pairsGrid.root.style.height = 'unset';
+    uniqueSequencesGrid.root.style.height = 'unset';
   }, 200);
+
   return {pairsGrid, uniqueSequencesGrid, aminoToInput};
 }

package/tsconfig.json

@@ -12,7 +12,7 @@
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
     // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                           /* Generates corresponding '.map' file. */
+     "sourceMap": true,                           /* Generates corresponding '.map' file. */
     // "outFile": "./",                             /* Concatenate and emit output to single file. */
     // "outDir": "./",                              /* Redirect output structure to the directory. */
     // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
@@ -57,8 +57,8 @@
     /* Source Map Options */
     "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
     "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
-    "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
-    "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+//    "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
+//    "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
 
     /* Experimental Options */
     // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */

package/webpack.config.js

@@ -34,7 +34,7 @@ module.exports = {
   resolve: {
     extensions: ['.mjs', '.ts', '.js', '.json', '.tsx'],
   },
-  devtool: 'inline-source-map',
+  devtool: 'source-map',
   externals: {
     'datagrok-api/dg': 'DG',
     'datagrok-api/grok': 'grok',