@datagrok/peptides 0.8.7 → 0.8.10

package/src/viewers/stacked-barchart-viewer.ts

@@ -1,409 +1,398 @@
 import * as DG from 'datagrok-api/dg';
-import * as ui from 'datagrok-api/ui';
-import {scaleBand, scaleLinear} from 'd3';
-import {ChemPalette} from '../utils/chem-palette';
 import * as rxjs from 'rxjs';
-const cp = new ChemPalette('grok');
-
-//TODO: the function should not accept promise. Await the parameters where it is used
-export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
-  viewer.then((viewer) => {
-    const barchart = viewer as StackedBarChart; //TODO: accept specifically StackedBarChart object
-    // The following event makes the barchart interactive
-    rxjs.fromEvent(grid.overlay, 'mousemove').subscribe((mm:any) => {
-      mm = mm as MouseEvent;
-      const cell = grid.hitTest(mm.offsetX, mm.offsetY);
-      if (cell !== null && cell?.isColHeader && cell.tableColumn?.semType == 'aminoAcids')
-        barchart.highlight(cell, mm.offsetX, mm.offsetY);
-    });
-
-    rxjs.fromEvent(grid.overlay, 'click').subscribe((mm:any) => {
-      mm = mm as MouseEvent;
+import * as ui from 'datagrok-api/ui';
+import {MonomerLibrary} from '../monomer-library';
+import {PeptidesController} from '../peptides';
+
+export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
+  if (grid.temp['containsBarchart'])
+    return;
+
+  function eventAction(mouseMove: MouseEvent) {
+    const cell = grid.hitTest(mouseMove.offsetX, mouseMove.offsetY);
+    if (cell !== null && cell?.isColHeader && cell.tableColumn?.semType == 'aminoAcids')
+      barchart.highlight(cell, mouseMove.offsetX, mouseMove.offsetY, mouseMove);
+    else
+      return;
 
-      const cell = grid.hitTest(mm.offsetX, mm.offsetY);
-      if (cell?.isColHeader && cell.tableColumn?.semType == 'aminoAcids') {
-        barchart.beginSelection(mm);
-        return;
-      }
-      barchart.unhighlight();
-    });
-    rxjs.fromEvent(grid.overlay, 'mouseout').subscribe((_: any) => {
+    if (cell?.isColHeader && cell.tableColumn?.semType == 'aminoAcids')
+      barchart.beginSelection(mouseMove);
+    else
       barchart.unhighlight();
-    });
+  }
 
-    barchart.tableCanvas = grid.canvas;
-    grid.setOptions({'colHeaderHeight': 200});
-    grid.onCellTooltip((cell, x, y) => {
-      if (cell.tableColumn) {
-        if (['aminoAcids', 'alignedSequence'].includes(cell.tableColumn.semType) ) {
-          if ( !cell.isColHeader) {
-            cp.showTooltip(cell, x, y);
-            return true;
-          } else {
-            if (barchart.highlighted) {
-              let elements: HTMLElement[] = [];
-              elements = elements.concat([ui.divText(barchart.highlighted.aaName)]);
-              ui.tooltip.show(ui.divV(elements), x, y);
-            }
-            return true;
-          }
+  // The following events makes the barchart interactive
+  rxjs.fromEvent<MouseEvent>(grid.overlay, 'mousemove').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
+  rxjs.fromEvent<MouseEvent>(grid.overlay, 'click').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
+  rxjs.fromEvent<MouseEvent>(grid.overlay, 'mouseout').subscribe(() => barchart.unhighlight());
+
+  barchart.tableCanvas = grid.canvas;
+
+  //Setting grid options
+  grid.setOptions({'colHeaderHeight': 130});
+
+  grid.onCellTooltip((cell, x, y) => {
+    if (cell.tableColumn && ['aminoAcids', 'alignedSequence'].includes(cell.tableColumn.semType) ) {
+      if (!cell.isColHeader) {
+        const monomerLib = cell.cell.dataFrame.temp[MonomerLibrary.id];
+        PeptidesController.chemPalette.showTooltip(cell, x, y, monomerLib);
+      } else {
+        if (barchart.highlighted) {
+          let elements: HTMLElement[] = [];
+          elements = elements.concat([ui.divText(barchart.highlighted.aaName)]);
+          ui.tooltip.show(ui.divV(elements), x, y);
         }
       }
-    });
-    grid.onCellRender.subscribe((args) => {
-      args.g.save();
-      args.g.beginPath();
-      args.g.rect(args.bounds.x, args.bounds.y, args.bounds.width, args.bounds.height);
-      args.g.clip();
-
-      if (args.cell.isColHeader && barchart.aminoColumnNames.includes(args.cell.gridColumn.name)) {
-        barchart.renderBarToCanvas(
-          args.g,
-          args.cell,
-          args.bounds.x,
-          args.bounds.y,
-          args.bounds.width,
-          args.bounds.height,
-        );
-        args.preventDefault();
-      }
-      args.g.restore();
-    });
+    }
+    return true;
   });
+
+  grid.onCellRender.subscribe((args) => {
+    const context = args.g;
+    const boundX = args.bounds.x;
+    const boundY = args.bounds.y;
+    const boundWidth = args.bounds.width;
+    const boundHeight = args.bounds.height;
+    const cell = args.cell;
+    context.save();
+    context.beginPath();
+    context.rect(boundX, boundY, boundWidth, boundHeight);
+    context.clip();
+
+    if (cell.isColHeader && barchart.aminoColumnNames.includes(cell.gridColumn.name)) {
+      barchart.renderBarToCanvas(context, cell, boundX, boundY, boundWidth, boundHeight);
+      args.preventDefault();
+    }
+    context.restore();
+  });
+
+  grid.temp['containsBarchart'] = true;
+  //FIXME: for some reason barchat didn't show when running analysis. This fixes it, but it's bad. Find a way to fix
+  // the problem
+  barchart.unhighlight();
 }
 
+type stackedBarChartDatatype = {
+  'name': string,
+  'data': {'name': string, 'count': number, 'selectedCount': number, 'fixedSelectedCount': number}[],
+}[];
+
+type bartStatsType = {
+  [Key: string]: {'name': string, 'count': number, 'selectedCount': number, 'fixedSelectedCount': number}[],
+};
 
 export class StackedBarChart extends DG.JsViewer {
-    public dataEmptyAA: string;
-    public initialized: boolean;
-    highlighted: {'colName' : string, 'aaName' : string} | null = null;
-    private ord: { [Key: string]: number; } = {};
-    private margin: {top: number; left: number; bottom: number; right: number} = {
-      top: 10,
-      right: 10,
-      bottom: 50,
-      left: 10,
+  public dataEmptyAA: string;
+  public highlighted: {'colName' : string, 'aaName' : string} | null = null;
+  public tableCanvas: HTMLCanvasElement | undefined;
+  public aminoColumnNames: string[] = [];
+  private ord: { [Key: string]: number; } = {};
+  private aminoColumnIndices: {[Key: string]: number} = {};
+  private aggregatedTables: {[Key: string]: DG.DataFrame} = {};
+  private aggregatedHighlightedTables: {[Key: string]: DG.DataFrame} = {};
+  private max = 0;
+  private barStats:
+    {[Key: string]: {'name': string, 'count': number, 'highlightedCount': number, 'selectedCount': number}[]} = {};
+  private selected: {'colName' : string, 'aaName' : string}[] = [];
+  private highlightedMask: DG.BitSet | null = null;
+  private aggregatedSelectedTables: {[Key: string]: DG.DataFrame} = {};
+
+  constructor() {
+    super();
+    this.dataEmptyAA = this.string('dataEmptyAA', '-');
+  }
+
+  init() {
+    const groups: {[key: string]: string[]} = {
+      'yellow': ['C', 'U'],
+      'red': ['G', 'P'],
+      'all_green': ['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'],
+      'light_blue': ['R', 'H', 'K'],
+      'dark_blue': ['D', 'E'],
+      'orange': ['S', 'T', 'N', 'Q'],
     };
-    private yScale: any;
-    private xScale: any;
-    private data: {'name': string, 'data': {'name': string, 'count': number, 'selectedCount': number}[]}[] = [];
-    private selectionMode: boolean = false;
-    public aminoColumnNames: string[] = [];
-
-    private aminoColumnIndices: {[Key: string]: number} = {};
-    private aggregatedTables: {[Key: string]: DG.DataFrame} = {};
-    private aggregatedTablesUnselected: {[Key: string]: DG.DataFrame} = {};
-    private max = 0;
-    private barStats: {[Key: string]: {'name': string, 'count': number, 'selectedCount': number}[]} = {};
-    tableCanvas: HTMLCanvasElement | undefined;
-    private registered: {[Key: string]: DG.GridCell} = {};
-
-    constructor() {
-      super();
-      this.dataEmptyAA = this.string('dataEmptyAA', '-');
-      this.initialized = false;
+    let i = 0;
+
+    for (const value of Object.values(groups)) {
+      for (const obj of value)
+        this.ord[obj] = i++;
     }
 
-    init() {
-      const groups: {[key: string]: string[]} = {
-        'yellow': ['C', 'U'],
-        'red': ['G', 'P'],
-        'all_green': ['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'],
-        'light_blue': ['R', 'H', 'K'],
-        'dark_blue': ['D', 'E'],
-        'orange': ['S', 'T', 'N', 'Q'],
-      };
-
-      let i = 0;
-      for (const value of Object.values(groups)) {
-        i++;
-        for (const obj of value)
-          this.ord[obj] = i;
-      }
-      this.yScale = scaleLinear();
-      this.xScale = scaleBand();
-      this.data = [];
+    this.aminoColumnNames = [];
+  }
 
-      this.aminoColumnNames = [];
+  // Stream subscriptions
+  onTableAttached() {
+    this.init();
+    if (this.dataFrame) {
+      this.subs.push(DG.debounce(this.dataFrame.selection.onChanged, 50).subscribe((_) => this.computeData()));
+      this.subs.push(DG.debounce(this.dataFrame.filter.onChanged, 50).subscribe((_) => this.computeData()));
+      this.highlightedMask = DG.BitSet.create(this.dataFrame.rowCount);
     }
-
-    // Stream subscriptions
-    onTableAttached() {
-      this.init();
-      if (this.dataFrame) {
-        this.subs.push(DG.debounce(this.dataFrame.selection.onChanged, 50).subscribe((_) => this.render()));
-        this.subs.push(DG.debounce(this.dataFrame.filter.onChanged, 50).subscribe((_) => this.render()));
-        this.subs.push(DG.debounce(this.dataFrame.onCurrentRowChanged, 50).subscribe((_) => this.render()));
-        this.subs.push(DG.debounce(ui.onSizeChanged(this.root), 50).subscribe((_) => this.render(false)));
-        this.computeData(this.dataFrame);
+  }
+
+  // Cancel subscriptions when the viewer is detached
+  detach() {
+    this.subs.forEach((sub) => sub.unsubscribe());
+  }
+
+  computeData() {
+    this.aminoColumnNames = [];
+    this.aminoColumnIndices = {};
+
+    this.dataFrame!.columns.names().forEach((name: string) => {
+      if (this.dataFrame!.getCol(name).semType === 'aminoAcids' &&
+          !this.dataFrame!.getCol(name).categories.includes('COOH') &&
+          !this.dataFrame!.getCol(name).categories.includes('NH2')) {
+        this.aminoColumnIndices[name] = this.aminoColumnNames.length + 1;
+        this.aminoColumnNames.push(name);
       }
-    }
+    });
 
-    // Cancel subscriptions when the viewer is detached
-    detach() {
-      this.subs.forEach((sub) => sub.unsubscribe());
-    }
+    this.aggregatedTables = {};
+    this.aggregatedHighlightedTables = {};
+    this.aggregatedSelectedTables = {};
+    //TODO: optimize it, why store so many tables?
+    this.aminoColumnNames.forEach((name) => {
+      this.aggregatedTables[name] = this.dataFrame!
+        .groupBy([name])
+        .whereRowMask(this.dataFrame!.filter)
+        .add('count', name, `${name}_count`)
+        .aggregate();
+
+      this.aggregatedHighlightedTables[name] = this.dataFrame!
+        .groupBy([name])
+        .whereRowMask(this.highlightedMask!)
+        .add('count', name, `${name}_count`)
+        .aggregate();
+
+      this.aggregatedSelectedTables[name] = this.dataFrame!
+        .groupBy([name])
+        .whereRowMask(this.dataFrame!.selection)
+        .add('count', name, `${name}_count`)
+        .aggregate();
+    });
 
-    computeData(df: DG.DataFrame) {
-      this.data = [];
-      this.aminoColumnNames = [];
-      this.aminoColumnIndices = {};
-
-      df.columns.names().forEach((name: string) => {
-        {
-          // @ts-ignore
-          if (df.getCol(name).semType === 'aminoAcids' &&
-              !df.getCol(name).categories.includes('COOH') &&
-              !df.getCol(name).categories.includes('NH2')) {
-            this.aminoColumnIndices[name] = this.aminoColumnNames.length + 1;
-            this.aminoColumnNames.push(name);
-          }
-        }
-      });
-
-      this.aggregatedTables = {};
-      this.aggregatedTablesUnselected = {};
-      const buf1 = df.selection.getBuffer();
-      const buf2 = df.filter.getBuffer();
-      const resbuf = new Int32Array(df.rowCount);
-
-      for (let i = 0; i < buf2.length; i++)
-        resbuf[i] = buf1[i] & buf2[i];
-
-
-      //TODO: optimize it, why store so many tables?
-      const mask = DG.BitSet.fromBytes(resbuf.buffer, df.rowCount);
-      if (mask.trueCount !== df.filter.trueCount) {
-        this.selectionMode = true;
-        this.aminoColumnNames.forEach((name) => {
-          this.aggregatedTables[name] = df
-            .groupBy([name])
-            .whereRowMask(df.filter)
-            .add('count', name, `${name}_count`)
-            .aggregate();
-          const buf1 = df.selection.getBuffer();
-          const buf2 = df.filter.getBuffer();
-          const resbuf = new Int32Array(df.rowCount);
-
-          for (let i = 0; i < buf2.length; i++)
-            resbuf[i] = buf1[i] & buf2[i];
-
-
-          // @ts-ignore
-          const mask = DG.BitSet.fromBytes(resbuf.buffer, df.rowCount);
-          // @ts-ignore
-          this.aggregatedTablesUnselected[name] = df
-            .groupBy([name])
-            .whereRowMask(mask)
-            .add('count', name, `${name}_count`)
-            .aggregate();
-        });
-      } else {
-        this.selectionMode = false;
-        this.aminoColumnNames.forEach((name) => {
-          // @ts-ignore
-          this.aggregatedTables[name] = df
-            .groupBy([name])
-            .whereRowMask(df.filter)
-            .add('count', name, `${name}_count`)
-            .aggregate();
-        },
-        );
-      }
-      this.data = [];
-      this.barStats = {};
-      for (const [name, df] of Object.entries(this.aggregatedTables)) {
-        const colObj: {
-          'name': string,
-          'data': { 'name': string, 'count': number, 'selectedCount': number }[],
-        } = {'name': name, 'data': []};
-        this.barStats[colObj['name']] = colObj['data'];
-        this.data.push(colObj);
-        for (let i = 0; i < df.rowCount; i++) {
-          const amino = df.getCol(name).get(i);
-          const aminoCount = df.getCol(`${name}_count`).get(i);
-          if ((!amino) || amino === this.dataEmptyAA)
-            continue;
-
-          const aminoObj = {'name': amino, 'count': aminoCount, 'selectedCount': 0};
-          colObj['data'].push(aminoObj);
-          for (let j = 0; j < this.aggregatedTablesUnselected[name].rowCount; j++) {
-            const unsAmino = this.aggregatedTablesUnselected[name].getCol(`${name}`).get(j);
-            if (unsAmino == amino) {
-              aminoObj['selectedCount'] = this.aggregatedTablesUnselected[name]
-                .getCol(`${name}_count`)
-                .get(j);
+    this.barStats = {};
+
+    for (const [name, df] of Object.entries(this.aggregatedTables)) {
+      const colObj: {
+        'name': string,
+        'data': { 'name': string, 'count': number, 'highlightedCount': number, 'selectedCount': number}[],
+      } = {'name': name, 'data': []};
+      const aminoCol = df.getCol(name);
+      const aminoCountCol = df.getCol(`${name}_count`);
+      this.barStats[colObj['name']] = colObj['data'];
+
+      for (let i = 0; i < df.rowCount; i++) {
+        const amino = aminoCol.get(i);
+        const aminoCount = aminoCountCol.get(i);
+        const aminoObj = {'name': amino, 'count': aminoCount, 'highlightedCount': 0, 'selectedCount': 0};
+        const aggHighlightedAminoCol = this.aggregatedHighlightedTables[name].getCol(`${name}`);
+        const aggHighlightedCountCol = this.aggregatedHighlightedTables[name].getCol(`${name}_count`);
+        const aggSelectedAminoCol = this.aggregatedSelectedTables[name].getCol(`${name}`);
+        const aggSelectedCountCol = this.aggregatedSelectedTables[name].getCol(`${name}_count`);
+
+        if (!amino || amino === this.dataEmptyAA)
+          continue;
+
+        colObj['data'].push(aminoObj);
+
+        for (const col of [aggHighlightedCountCol, aggSelectedCountCol]) {
+          for (let j = 0; j < col.length; j++) {
+            const highlightedAmino = aggHighlightedAminoCol.get(j);
+            const selectedAmino = aggSelectedAminoCol.get(j);
+            const curAmino = (col == aggHighlightedCountCol ? highlightedAmino : selectedAmino);
+            if (curAmino == amino) {
+              aminoObj[col == aggHighlightedCountCol ? 'highlightedCount' : 'selectedCount'] = col.get(j);
               break;
             }
           }
         }
-        colObj['data'] = colObj['data'].sort((o1, o2) => {
-          if (this.ord[o1['name']] > this.ord[o2['name']])
-            return -1;
+      }
 
-          if (this.ord[o1['name']] < this.ord[o2['name']])
-            return 1;
+      colObj['data'].sort((o1, o2) => this.ord[o2['name']] - this.ord[o1['name']]);
+    }
 
+    this.max = this.dataFrame!.filter.trueCount;
+  }
 
-          return 0;
-        });
-      }
-      this.max = df.filter.trueCount;
-    }
+  renderBarToCanvas(g: CanvasRenderingContext2D, cell: DG.GridCell, x: number, y: number, w: number, h: number) {
+    const name = cell.tableColumn!.name;
+    const colNameSize = g.measureText(name).width;
+    const barData = this.barStats[name];
+    const margin = 0.2;
+    const innerMargin = 0.02;
+    const selectLineRatio = 0.1;
+    let sum = 0;
 
-    renderBarToCanvas(
-      g: CanvasRenderingContext2D,
-      cell: DG.GridCell,
-      x: number,
-      y: number,
-      w: number,
-      h: number,
-    ) {
-      const margin = 0.2;
-      const innerMargin = 0.02;
-      const selectLineRatio = 0.1;
-      x = x + w * margin;
-      y = y + h * margin / 4;
-      w = w - w * margin * 2;
-      h = h - h * margin;
-      g.fillStyle = 'black';
-      g.textBaseline = 'top';
-      g.font = `${h * margin / 2}px`;
-
-      const name = cell.tableColumn!.name;
-      const colNameSize = g.measureText(name).width;
-      g.fillText(name,
-        x + (w - colNameSize)/2,
-        y + h + h * margin / 4);
-      const barData = this.barStats[name]? this.barStats[name]: this.barStats[name];
-      let sum = 0;
-      barData.forEach((obj) => {
-        sum += obj['count'];
-      });
-      let curSum = 0;
-
-      barData.forEach((obj, index) => {
-        const sBarHeight = h * obj['count'] / this.max;
-        const gapSize = sBarHeight * innerMargin;
-        g.fillStyle = cp.getColor(obj['name']);
-        g.fillRect(
-          x,
-          y + h * (this.max - sum + curSum) / this.max + gapSize / 2,
-          w,
-          sBarHeight - gapSize);
-        if (h * margin / 2 <= sBarHeight - gapSize && h * margin / 2 <= w) {
-          g.fillStyle = 'rgb(0,0,0)';
-          g.font = `${h * margin / 2}px`;
-          const [, aar] = cp.getColorAAPivot(obj['name']);
-          g.fillText(aar,
-            x + w / 2 - h * margin / 8,
-            y + h * (this.max - sum + curSum) / this.max + gapSize / 2 + (sBarHeight - gapSize)/2 - h * margin / 8);
-        }
+    barData.forEach((obj) => {
+      sum += obj['count'];
+    });
 
-        if (this.selectionMode && obj['selectedCount'] > 0) {
-          g.fillStyle = 'rgb(255,165,0)';
-          g.fillRect(
-            x - w * selectLineRatio * 1.5,
-            y + h * (this.max - sum + curSum) / this.max + gapSize / 2,
-            w * selectLineRatio,
-            h * obj['selectedCount'] / this.max - gapSize);
+    x = x + w * margin;
+    y = y + h * margin / 4;
+    w = w - w * margin * 2;
+    h = h - h * margin;
+    const barWidth = w - 10;
+    g.fillStyle = 'black';
+    g.textBaseline = 'top';
+    g.font = `${h * margin / 2}px`;
+    g.fillText(name, x + (w - colNameSize) / 2, y + h + h * margin / 4);
+
+    barData.forEach((obj) => {
+      const sBarHeight = h * obj['count'] / this.max;
+      const gapSize = sBarHeight * innerMargin;
+      const verticalShift = (this.max - sum) / this.max;
+      const [color, aarOuter] = PeptidesController.chemPalette.getColorAAPivot(obj['name']);
+      const textSize = g.measureText(aarOuter);
+      const fontSize = 11;
+      const leftMargin = (w - (aarOuter.length > 1 ? fontSize : textSize.width - 8)) / 2;
+      const subBartHeight = sBarHeight - gapSize;
+      const yStart = h * verticalShift + gapSize / 2;
+      const xStart = (w - barWidth) / 2;
+      const absX = x + leftMargin;
+      const absY = y + yStart + subBartHeight / 2 + (aarOuter.length == 1 ? + 4 : 0);
+      const eps = 0.1;
+
+      g.strokeStyle = color;
+      g.fillStyle = color;
+      if (textSize.width <= subBartHeight) {
+        const origTransform = g.getTransform();
+
+        if (color != PeptidesController.chemPalette.undefinedColor) {
+          g.fillRect(x + xStart, y + yStart, barWidth, subBartHeight);
+          g.fillStyle = 'black';
+        } else
+          g.strokeRect(x + xStart + 0.5, y + yStart, barWidth - 1, subBartHeight);
+
+        g.font = `${fontSize}px monospace`;
+        g.textAlign = 'center';
+        g.textBaseline = 'bottom';
+
+        if (aarOuter.length > 1) {
+          g.translate(absX, absY);
+          g.rotate(Math.PI / 2);
+          g.translate(-absX, -absY);
         }
 
-        // @ts-ignore
-        if (this.dataFrame.currentRow[name] === obj['name']) {
-          g.strokeStyle = 'rgb(0,0,0)';
-          g.strokeRect(
-            x,
-            y + h * (this.max - sum + curSum) / this.max + gapSize / 2,
-            w,
-            sBarHeight - gapSize);
-        }
+        g.fillText(aarOuter, absX, absY);
+        g.setTransform(origTransform);
+      } else
+        g.fillRect(x + xStart, y + yStart, barWidth, subBartHeight);
 
-        curSum += obj['count'];
-      });
-      return;
-    }
-
-    render(computeData = true) {
-      const df = this.dataFrame!;
-      if (computeData)
-        this.computeData(df);
+      if (obj['selectedCount'] > eps) {
+        g.fillStyle = 'rgb(255,165,0)';
+        g.fillRect(
+          x + xStart - w * selectLineRatio * 2,
+          y + yStart,
+          barWidth * selectLineRatio,
+          h * obj['selectedCount'] / this.max - gapSize,
+        );
+      }
 
-      if (this.tableCanvas) {
-        for (const name of this.aminoColumnNames)
-          this.renderBar(name);
+      if (obj['highlightedCount'] > eps && obj['highlightedCount'] > obj['selectedCount']) {
+        g.fillStyle = 'rgb(209,242,251)';
+        g.fillRect(
+          x + xStart - w * selectLineRatio * 2,
+          y + yStart + h * obj['selectedCount'] / this.max - gapSize,
+          barWidth * selectLineRatio,
+          h * (obj['highlightedCount'] - obj['selectedCount']) / this.max - gapSize,
+        );
       }
-      return;
-    }
 
-    onPropertyChanged(property: DG.Property) {
-      super.onPropertyChanged(property);
-      this.render();
-    }
+      sum -= obj['count'];
+    });
+  }
 
-    register(args: DG.GridCellRenderArgs) {
-      this.registered[args.cell.tableColumn!.name] = args.cell;
-    }
+  highlight(cell: DG.GridCell, offsetX:number, offsetY:number, mouseEvent: MouseEvent) {
+    if (!cell.tableColumn?.name || !this.aminoColumnNames.includes(cell.tableColumn.name))
+      return;
 
-    unregister(name: string) {
-      if (this.registered[name])
-        delete this.registered[name];
-    }
+    const colName = cell.tableColumn?.name;
+    const innerMargin = 0.02;
+    const margin = 0.2;
+    const bound = cell.bounds;
+    const height = 130;
+    const x = bound.x + bound.width * margin;
+    const y = height * margin / 4;
+    const w = bound.width - bound.width * margin * 2;
+    const h = height - height * margin;
+    const barData = this.barStats[colName];
+    const barWidth = w - 10;
+    let sum = 0;
+
+    barData.forEach((obj) => {
+      sum += obj['count'];
+    });
 
+    this.highlighted = null;
+    barData.forEach((obj) => {
+      const sBarHeight = h * obj['count'] / this.max;
+      const gapSize = sBarHeight * innerMargin;
+      const verticalShift = (this.max - sum) / this.max;
+      const subBartHeight = sBarHeight - gapSize;
+      const yStart = h * verticalShift + gapSize / 2;
+      const xStart = (w - barWidth) / 2;
 
-    renderBar(name: string) {
-      if (!(this.registered[name]) || !(this.tableCanvas))
-        return;
+      if (offsetX >= x + xStart &&
+          offsetY >= y + yStart &&
+          offsetX <= x + xStart + barWidth &&
+          offsetY <= y + yStart + subBartHeight)
+        this.highlighted = {'colName': colName, 'aaName': obj['name']};
 
-      const cell = this.registered[name];
-      const rect = cell.bounds;
-      this.renderBarToCanvas(this.tableCanvas.getContext('2d')!, cell, rect.x, rect.y, rect.width, rect.height);
-    }
 
-    highlight(cell: DG.GridCell, offsetX:number, offsetY:number) {
-      const colName = cell.tableColumn?.name;
-      if (!colName)
-        return;
-
-      const margin = 0.2;
-      const bound = cell.bounds;
-      const x = bound.x + bound.width * margin;
-      const y = 0 + 200 * margin / 4;
-      const w = bound.width - bound.width * margin * 2;
-      const h = 200 - 200 * margin / 2;
-      const barData = this.barStats[colName];
-      let sum = 0;
-      barData.forEach((obj) => {
-        sum += obj['count'];
-      });
-      let curSum = 0;
-
-      barData.forEach((obj, index) => {
-        const sBarHeight = h * obj['count'] / this.max;
-        if (offsetX>=x &&
-            offsetY>=y + h * (this.max - sum + curSum) / this.max &&
-            offsetX<=x+w &&
-            offsetY<=y + h * (this.max - sum + curSum) / this.max + sBarHeight) {
-          this.highlighted = {'colName': colName, 'aaName': obj['name']};
-          return;
-        }
+      sum -= obj['count'];
+    });
 
-        curSum += obj['count'];
-      });
+    if (!this.highlighted)
       return;
-    }
 
-    unhighlight() {
-      this.highlighted = null;
+    if (mouseEvent.type == 'click') {
+      let idx = -1;
+
+      for (let i = 0; i < this.selected.length; ++i) {
+        if (JSON.stringify(this.selected[i]) == JSON.stringify(this.highlighted))
+          idx = i;
+      }
+
+      if (mouseEvent.shiftKey && idx == -1)
+        this.selected.push(this.highlighted);
+
+      if (mouseEvent.shiftKey && (mouseEvent.ctrlKey || mouseEvent.metaKey) && idx != -1)
+        this.selected.splice(idx, 1);
     }
+  }
 
-    beginSelection(event:any) {
-      if (!this.highlighted || !this.dataFrame)
-        return;
+  unhighlight() {
+    this.highlighted = null;
+    this.highlightedMask!.setAll(false);
+    this.computeData();
+  }
 
-      this.dataFrame!.selection.handleClick((i) => {
-        // @ts-ignore
-        return this.highlighted!['aaName'] === (this.dataFrame.getCol(this.highlighted!['colName']).get(i));
+  beginSelection(event: MouseEvent) {
+    if (!this.dataFrame)
+      return;
+
+    this.highlightedMask!.setAll(false);
+
+    this.dataFrame.selection.handleClick((i: number) => {
+      for (const high of this.selected) {
+        if (high['aaName'] === (this.dataFrame!.getCol(high['colName']).get(i)))
+          return true;
+      }
+      return false;
+    }, event);
+
+    if (this.highlighted) {
+      this.dataFrame.rows.match({[this.highlighted['colName']]: this.highlighted['aaName']}).highlight();
+      this.highlightedMask!.handleClick((i: number) => {
+        if (this.highlighted!['aaName'] === (this.dataFrame!.getCol(this.highlighted!['colName']).get(i)))
+          return true;
+        return false;
       }, event);
     }
+
+    this.computeData();
+  }
 }