@datagrok/peptides 0.8.13 → 1.0.0

package/src/utils/types.ts

@@ -1,10 +1,13 @@
 import * as DG from 'datagrok-api/dg';
 
-export type SubstitutionCases = {[aar: string]: number[][][]};
-export type SubstitutionTooltips = { [aar: string]: {}[][]; };
 export type DataFrameDict = {[key: string]: DG.DataFrame};
 
 export namespace BarChart {
   export type BarPart = {colName : string, aaName : string};
   export type BarStatsObject = {name: string, count: number, selectedCount: number};
 }
+
+export type UTypedArray = Uint8Array | Uint16Array | Uint32Array;
+//AAR: (Position: (index: indexList))
+export type SubstitutionsInfo = Map<string, Map<string, Map<number, number[] | UTypedArray>>>;
+export type SelectionObject = {[postiton: string]: string[]};

package/src/viewers/peptide-space-viewer.ts

@@ -6,21 +6,21 @@ import $ from 'cash-dom';
 
 import {getSequenceMolecularWeight} from '../utils/molecular-measure';
 import {AlignedSequenceEncoder} from '@datagrok-libraries/bio/src/sequence-encoder';
-import {
-  createDimensinalityReducingWorker,
+import {createDimensinalityReducingWorker, IReduceDimensionalityResult,
 } from '@datagrok-libraries/ml/src/workers/dimensionality-reducing-worker-creator';
 import {StringMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
-import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
 import * as C from '../utils/constants';
-import {PeptidesController} from '../peptides';
+import {PeptidesModel} from '../model';
 
 export class PeptideSpaceViewer extends DG.JsViewer {
   method: string;
   measure: string;
   cyclesCount: number;
-  // controller: PeptidesController | null = null;
   customProperties = new Set(['method', 'measure', 'cyclesCount']);
   isEmbeddingCreating: boolean = false;
+  model!: PeptidesModel;
+  //FIXME: even if the property stays the same, for some reason it's still triggering prop change
+  prevProps!: {'method': string, 'measure': string, 'cyclesCount': number};
 
   constructor() {
     super();
@@ -30,35 +30,60 @@ export class PeptideSpaceViewer extends DG.JsViewer {
     const measureChoices = ['Levenshtein', 'Jaro-Winkler'];
     this.measure = this.addProperty('measure', DG.TYPE.STRING, 'Levenshtein', {choices: measureChoices});
     this.cyclesCount = this.addProperty('cyclesCount', DG.TYPE.INT, 100);
+    this.updatePrevProperties();
   }
 
-  async onFrameAttached(dataFrame: DG.DataFrame) {
-    super.onFrameAttached(dataFrame);
+  updatePrevProperties(): void {
+    this.prevProps = {'method': this.method, 'measure': this.measure, 'cyclesCount': this.cyclesCount};
+  }
+
+  async onTableAttached(): Promise<void> {
+    super.onTableAttached();
 
-    // this.controller = await PeptidesController.getInstance(this.dataFrame!);
+    this.model = await PeptidesModel.getInstance(this.dataFrame);
 
-    await this.render(this.dataFrame!.temp[C.EMBEDDING_STATUS]);
+    await this.render(!this.dataFrame.temp[C.EMBEDDING_STATUS]);
   }
 
-  async onPropertyChanged(property: DG.Property | null) {
+  async onPropertyChanged(property: DG.Property | null): Promise<void> {
     super.onPropertyChanged(property);
+    if (this.prevProps[property?.name as 'method' | 'measure' | 'cyclesCount' ?? ''] == property?.get(this))
+      return;
 
+    if (this.model)
+      await this.render(this.customProperties.has(property?.name ?? '') || !this.dataFrame.temp[C.EMBEDDING_STATUS]);
 
-    await this.render(this.customProperties.has(property?.name ?? '') || this.dataFrame!.temp[C.EMBEDDING_STATUS]);
+    this.updatePrevProperties();
   }
 
-  async render(computeData=false) {
-    if (computeData && !this.isEmbeddingCreating) {
+  async render(computeData=false): Promise<void> {
+    if (computeData && !this.isEmbeddingCreating && !this.model.isChangingEdfBitset) {
       this.isEmbeddingCreating = true;
       $(this.root).empty();
       const viewerHost = ui.waitBox(async () => {
-        await computeWeights(this.dataFrame!, this.method, this.measure, this.cyclesCount);
+        const edf = await computeWeights(this.dataFrame, this.method, this.measure, this.cyclesCount);
+        this.dataFrame.temp[C.EMBEDDING_STATUS] = true;
+        this.model.edf = edf;
+
+        if (edf === null)
+          return ui.label('Could not compute embeddings');
+
+        const edfSelection = edf.selection;
+        edfSelection.copyFrom(this.model.getBiteset());
+        edfSelection.onChanged.subscribe(() => {
+          if (!this.model.isChangingEdfBitset)
+            this.model.fireBitsetChanged(true);
+        });
+
+        const colorCol = this.dataFrame.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
+        edf.columns.add(colorCol);
 
         const viewerOptions = {
-          x: '~X', y: '~Y', color: C.COLUMNS_NAMES.ACTIVITY_SCALED ?? '~MW', size: '~MW', title: 'Peptide Space',
+          x: '~X', y: '~Y', color: colorCol.name ?? '~MW', size: '~MW', title: 'Peptide Space',
           showYSelector: false, showXSelector: false, showColorSelector: false, showSizeSelector: false,
+          zoomAndFilter: 'no action', axesFollowFilter: false,
         };
-        const viewerRoot = this.dataFrame!.plot.scatter(viewerOptions).root;
+        const viewerRoot = edf.plot.scatter(viewerOptions).root;
         viewerRoot.style.width = 'auto';
         this.isEmbeddingCreating = false;
         viewerHost.style.paddingLeft = 'unset';
@@ -70,22 +95,24 @@ export class PeptideSpaceViewer extends DG.JsViewer {
   }
 }
 
+//Do not accept table, only column
 export async function computeWeights(
   table: DG.DataFrame, method: string, measure: string, cyclesCount: number, col?: DG.Column,
-): Promise<void> {
+): Promise<DG.DataFrame | null> {
   const pi = DG.TaskBarProgressIndicator.create('Creating embedding...');
+  let edf: DG.DataFrame | null = null;
   try {
     const axesNames = ['~X', '~Y', '~MW'];
-    const columnData = (col ?? table.getCol(C.COLUMNS_NAMES.ALIGNED_SEQUENCE)).toList()
-      .map((v) => AlignedSequenceEncoder.clean(v));
+    col ??= table.columns.bySemType(C.SEM_TYPES.ALIGNED_SEQUENCE)!;
+    const columnData = col.toList().map((v) => AlignedSequenceEncoder.clean(v));
 
-    const embcols = await createDimensinalityReducingWorker(
-      {data: columnData, metric: measure as StringMetrics}, method, cyclesCount);
+    const reduceDimRes: IReduceDimensionalityResult = await createDimensinalityReducingWorker(
+      {data: columnData, metric: measure as StringMetrics}, method, {cycles: cyclesCount});
+    const embcols = reduceDimRes.embedding;
 
-    const columns = Array.from(
-      embcols as Coordinates, (v: Float32Array, k) => DG.Column.fromFloat32Array(axesNames[k], v));
+    const columns = Array.from(embcols, (v: Float32Array, k) => DG.Column.fromFloat32Array(axesNames[k], v));
 
-    function _getMW(sequences: string[]) {
+    function _getMW(sequences: string[]): Float32Array {
       const mw: Float32Array = new Float32Array(sequences.length);
 
       mw.map((_, index) => getSequenceMolecularWeight(sequences[index] ?? ''));
@@ -95,27 +122,28 @@ export async function computeWeights(
 
     columns.push(DG.Column.fromFloat32Array('~MW', _getMW(columnData)));
 
-    const edf = DG.DataFrame.fromColumns(columns);
+    edf = DG.DataFrame.fromColumns(columns);
 
     // Add new axes.
-    for (const axis of axesNames) {
-      const col = table.col(axis);
-      const newCol = edf.getCol(axis);
-
-      // if (col != null) {
-      //   for (let i = 0; i < newCol.length; ++i) {
-      //     const v = newCol.get(i);
-      //     table.set(axis, i, v);
-      //   }
-      // } else
-      //   table.columns.insert(newCol);
-      const columnList = table.columns as DG.ColumnList;
-      col !== null ? columnList.replace(col, newCol) : columnList.insert(newCol);
-    }
+    // for (const axis of axesNames) {
+    //   const col = table.col(axis);
+    //   const newCol = edf.getCol(axis);
+
+    //   // if (col != null) {
+    //   //   for (let i = 0; i < newCol.length; ++i) {
+    //   //     const v = newCol.get(i);
+    //   //     table.set(axis, i, v);
+    //   //   }
+    //   // } else
+    //   //   table.columns.insert(newCol);
+    //   const columnList = table.columns;
+    //   col !== null ? columnList.replace(col, newCol) : columnList.insert(newCol);
+    // }
   } catch (error) {
     grok.shell.error('Could not compute embeddings. See console for details.');
     console.error(error);
   } finally {
     pi.close();
+    return edf;
   }
 }

package/src/viewers/sar-viewer.ts

@@ -3,8 +3,8 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
-import {PeptidesController} from '../peptides';
 import * as C from '../utils/constants';
+import {PeptidesModel} from '../model';
 
 let IS_PROPERTY_CHANGING = false;
 
@@ -12,11 +12,9 @@ export class SARViewerBase extends DG.JsViewer {
   tempName!: string;
   viewerGrid!: DG.Grid;
   sourceGrid!: DG.Grid;
-  controller!: PeptidesController;
+  model!: PeptidesModel;
   scaling: string;
-  // filterMode: boolean;
   bidirectionalAnalysis: boolean;
-  // grouping: boolean;
   showSubstitution: boolean;
   maxSubstitutions: number;
   activityLimit: number;
@@ -28,29 +26,25 @@ export class SARViewerBase extends DG.JsViewer {
     super();
 
     this.scaling = this.string('scaling', 'none', {choices: ['none', 'lg', '-lg']});
-    // this.filterMode = this.bool('filterMode', false);
     this.bidirectionalAnalysis = this.bool('bidirectionalAnalysis', false);
-    // this.grouping = this.bool('grouping', false);
-
-    this.showSubstitution = this.bool('showSubstitution', false);
+    this.showSubstitution = this.bool('showSubstitution', true);
     this.maxSubstitutions = this.int('maxSubstitutions', 1);
     this.activityLimit = this.float('activityLimit', 2);
   }
 
-  async onTableAttached() {
+  async onTableAttached(): Promise<void> {
     super.onTableAttached();
     this.dataFrame.temp[this.tempName] ??= this;
     this.sourceGrid = this.view?.grid ?? (grok.shell.v as DG.TableView).grid;
-    this.controller = await PeptidesController.getInstance(this.dataFrame);
-    this.controller.init(this.dataFrame);
+    this.model = await PeptidesModel.getInstance(this.dataFrame);
+    // this.model.init(this.dataFrame);
     await this.requestDataUpdate();
-
-    // this.subs.push(this.controller.onGroupMappingChanged.subscribe(() => {this.render(true);}));
+    this.helpUrl = '/help/domains/bio/peptides.md';
   }
 
-  detach() {this.subs.forEach((sub) => sub.unsubscribe());}
+  detach(): void {this.subs.forEach((sub) => sub.unsubscribe());}
 
-  render(refreshOnly = false) {
+  render(refreshOnly = false): void {
     if (!this.initialized)
       return;
     if (!refreshOnly) {
@@ -62,24 +56,26 @@ export class SARViewerBase extends DG.JsViewer {
     this.viewerGrid?.invalidate();
   }
 
-  async requestDataUpdate() {
-    await this.controller.updateData(this.scaling, this.sourceGrid, this.bidirectionalAnalysis,
+  async requestDataUpdate(): Promise<void> {
+    await this.model.updateData(this.scaling, this.sourceGrid, this.bidirectionalAnalysis,
       this.activityLimit, this.maxSubstitutions, this.showSubstitution);
   }
 
-  async onPropertyChanged(property: DG.Property) {
+  async onPropertyChanged(property: DG.Property): Promise<void> {
     super.onPropertyChanged(property);
     this.dataFrame.tags[property.name] = `${property.get(this)}`;
     if (!this.initialized || IS_PROPERTY_CHANGING)
       return;
-      
+
     const propName = property.name;
 
     if (propName === 'scaling' && typeof this.dataFrame !== 'undefined') {
-      const minActivity = this.dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY).stats.min;
+      const activityCol = this.dataFrame.columns.bySemType(C.SEM_TYPES.ACTIVITY)!;
+      // const minActivity = this.dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY).stats.min;
+      const minActivity = activityCol.stats.min;
       if (minActivity && minActivity <= 0 && this.scaling !== 'none') {
         grok.shell.warning(`Could not apply ${this.scaling}: ` +
-          `activity column ${C.COLUMNS_NAMES.ACTIVITY} contains zero or negative values, falling back to 'none'.`);
+          `activity column ${activityCol.name} contains zero or negative values, falling back to 'none'.`);
         property.set(this, 'none');
         return;
       }
@@ -101,15 +97,16 @@ export class SARViewer extends SARViewerBase {
   _name = 'Structure-Activity Relationship';
   tempName = 'sarViewer';
 
-  constructor() { super(); }
+  constructor() {super();}
 
-  get name() {return this._name;}
+  get name(): string {return this._name;}
 
-  async onTableAttached() {
+  async onTableAttached(): Promise<void> {
     await super.onTableAttached();
-    this.viewerGrid = this.controller.sarGrid;
+    this.viewerGrid = this.model._sarGrid;
+    this.dataFrame.temp['sarViewer'] = this;
 
-    this.subs.push(this.controller.onSARGridChanged.subscribe((data) => {
+    this.subs.push(this.model.onSARGridChanged.subscribe((data) => {
       this.viewerGrid = data;
       this.render();
     }));
@@ -118,22 +115,21 @@ export class SARViewer extends SARViewerBase {
     this.render();
   }
 
-  isInitialized() { return this.controller?.sarGrid ?? false; }
+  isInitialized(): DG.Grid {return this.model?._sarGrid;}
 
+  //1. debouncing in rxjs; 2. flags?
   async onPropertyChanged(property: DG.Property): Promise<void> {
     if (!this.isInitialized() || IS_PROPERTY_CHANGING)
       return;
 
     await super.onPropertyChanged(property);
     IS_PROPERTY_CHANGING = true;
-    this.controller.syncProperties(true);
+    this.model.syncProperties(true);
     IS_PROPERTY_CHANGING = false;
   }
 }
 
-/**
- * Vertical structure activity relationship viewer.
- */
+/** Vertical structure activity relationship viewer. */
 export class SARViewerVertical extends SARViewerBase {
   _name = 'Sequence-Activity relationship';
   _titleHost = ui.divText('Most Potent Residues', {id: 'pep-viewer-title'});
@@ -143,13 +139,14 @@ export class SARViewerVertical extends SARViewerBase {
     super();
   }
 
-  get name() {return this._name;}
+  get name(): string {return this._name;}
 
-  async onTableAttached() {
+  async onTableAttached(): Promise<void> {
     await super.onTableAttached();
-    this.viewerGrid = this.controller.sarVGrid;
+    this.viewerGrid = this.model._sarVGrid;
+    this.dataFrame.temp['sarViewerVertical'] = this;
 
-    this.subs.push(this.controller.onSARVGridChanged.subscribe((data) => {
+    this.subs.push(this.model.onSARVGridChanged.subscribe((data) => {
       this.viewerGrid = data;
       this.render();
     }));
@@ -158,7 +155,7 @@ export class SARViewerVertical extends SARViewerBase {
     this.render();
   }
 
-  isInitialized() { return this.controller?.sarVGrid ?? false; }
+  isInitialized(): DG.Grid {return this.model?._sarVGrid;}
 
   async onPropertyChanged(property: DG.Property): Promise<void> {
     if (!this.isInitialized() || IS_PROPERTY_CHANGING)
@@ -166,7 +163,7 @@ export class SARViewerVertical extends SARViewerBase {
 
     await super.onPropertyChanged(property);
     IS_PROPERTY_CHANGING = true;
-    this.controller.syncProperties(false);
+    this.model.syncProperties(false);
     IS_PROPERTY_CHANGING = false;
   }
 }

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

@@ -2,28 +2,21 @@ import * as DG from 'datagrok-api/dg';
 import * as rxjs from 'rxjs';
 import * as ui from 'datagrok-api/ui';
 import {MonomerLibrary} from '../monomer-library';
-import {PeptidesController} from '../peptides';
 
 import * as C from '../utils/constants';
 import * as type from '../utils/types';
+import {PeptidesModel} from '../model';
 
-export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
+export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart): void {
   if (grid.temp['containsBarchart'])
     return;
-  
-  const compareBarParts = (bar1: type.BarChart.BarPart | null, bar2: type.BarChart.BarPart | null) =>
-    bar1 && bar2 && bar1.aaName === bar2.aaName && bar1.colName === bar2.colName;
 
-  const eventAction = (mouseMove: MouseEvent) => {
-    const cell = grid.hitTest(mouseMove.offsetX, mouseMove.offsetY);
+  const eventAction = (ev: MouseEvent): void => {
+    const cell = grid.hitTest(ev.offsetX, ev.offsetY);
     if (cell?.isColHeader && cell.tableColumn?.semType == C.SEM_TYPES.AMINO_ACIDS) {
-      const newBarPart = barchart.findAARandPosition(cell, mouseMove);
-      const previousClickedBarPart = barchart._previousClickedBarPart;
-      if (mouseMove.type === 'click' && compareBarParts(newBarPart, previousClickedBarPart))
-        barchart.isSameBarClicked = true;
-      else
-        barchart.currentBarPart = newBarPart;
-      barchart.requestAction(mouseMove);
+      const newBarPart = barchart.findAARandPosition(cell, ev);
+      barchart._currentBarPart = newBarPart;
+      barchart.requestAction(ev, newBarPart);
       barchart.computeData();
     }
   };
@@ -45,10 +38,10 @@ export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
     ) {
       if (!cell.isColHeader) {
         const monomerLib = cell.cell.dataFrame.temp[MonomerLibrary.id];
-        PeptidesController.chemPalette.showTooltip(cell, x, y, monomerLib);
-      } else if (barchart.currentBarPart) {
+        PeptidesModel.chemPalette.showTooltip(cell, x, y, monomerLib);
+      } else if (barchart._currentBarPart) {
         let elements: HTMLElement[] = [];
-        elements = elements.concat([ui.divText(barchart.currentBarPart.aaName)]);
+        elements = elements.concat([ui.divText(barchart._currentBarPart.aaName)]);
         ui.tooltip.show(ui.divV(elements), x, y);
       }
     }
@@ -92,22 +85,14 @@ export class StackedBarChart extends DG.JsViewer {
   barStats: {[Key: string]: type.BarChart.BarStatsObject[]} = {};
   selected: type.BarChart.BarPart[] = [];
   aggregatedSelectedTables: type.DataFrameDict = {};
-  controller!: PeptidesController;
-  isSameBarClicked: boolean = false;
-  _previousClickedBarPart: type.BarChart.BarPart | null = null;
+  model!: PeptidesModel;
 
   constructor() {
     super();
     this.dataEmptyAA = this.string('dataEmptyAA', '-');
   }
 
-  get currentBarPart() { return this._currentBarPart; }
-  set currentBarPart(barPart: type.BarChart.BarPart | null) {
-    this._currentBarPart = barPart;
-    this.isSameBarClicked = false;
-  }
-
-  init() {
+  init(): void {
     const groups: {[key: string]: string[]} = {
       'yellow': ['C', 'U'],
       'red': ['G', 'P'],
@@ -127,10 +112,10 @@ export class StackedBarChart extends DG.JsViewer {
   }
 
   // Stream subscriptions
-  async onTableAttached() {
+  async onTableAttached(): Promise<void> {
     this.init();
-    this.controller = await PeptidesController.getInstance(this.dataFrame);
-    this.controller.init(this.dataFrame);
+    this.model = await PeptidesModel.getInstance(this.dataFrame);
+    // this.controller.init(this.dataFrame);
     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()));
@@ -139,18 +124,18 @@ export class StackedBarChart extends DG.JsViewer {
   }
 
   // Cancel subscriptions when the viewer is detached
-  detach() {
+  detach(): void {
     this.subs.forEach((sub) => sub.unsubscribe());
   }
 
-  computeData() {
+  computeData(): void {
     this.aminoColumnNames = [];
     this.aminoColumnIndices = {};
 
-    this.dataFrame!.columns.names().forEach((name: string) => {
-      if (this.dataFrame!.getCol(name).semType === C.SEM_TYPES.AMINO_ACIDS &&
-          !this.dataFrame!.getCol(name).categories.includes('COOH') &&
-          !this.dataFrame!.getCol(name).categories.includes('NH2')) {
+    this.dataFrame.columns.names().forEach((name: string) => {
+      if (this.dataFrame.getCol(name).semType === C.SEM_TYPES.AMINO_ACIDS &&
+          !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);
       }
@@ -160,15 +145,15 @@ export class StackedBarChart extends DG.JsViewer {
     this.aggregatedSelectedTables = {};
     //TODO: optimize it, why store so many tables?
     this.aminoColumnNames.forEach((name) => {
-      this.aggregatedFilterTables[name] = this.dataFrame!
+      this.aggregatedFilterTables[name] = this.dataFrame
         .groupBy([name])
-        .whereRowMask(this.dataFrame!.filter)
+        .whereRowMask(this.dataFrame.filter)
         .add('count', name, `${name}_count`)
         .aggregate();
 
-      this.aggregatedSelectedTables[name] = this.dataFrame!
+      this.aggregatedSelectedTables[name] = this.dataFrame
         .groupBy([name])
-        .whereRowMask(this.dataFrame!.selection)
+        .whereRowMask(this.dataFrame.selection)
         .add('count', name, `${name}_count`)
         .aggregate();
     });
@@ -206,10 +191,10 @@ export class StackedBarChart extends DG.JsViewer {
       colData.sort((o1, o2) => this.ord[o2['name']] - this.ord[o1['name']]);
     }
 
-    this.max = this.dataFrame!.filter.trueCount;
+    this.max = this.dataFrame.filter.trueCount;
   }
 
-  renderBarToCanvas(g: CanvasRenderingContext2D, cell: DG.GridCell, x: number, y: number, w: number, h: number) {
+  renderBarToCanvas(g: CanvasRenderingContext2D, cell: DG.GridCell, x: number, y: number, w: number, h: number): void {
     const name = cell.tableColumn!.name;
     const colNameSize = g.measureText(name).width;
     const barData = this.barStats[name];
@@ -236,7 +221,7 @@ export class StackedBarChart extends DG.JsViewer {
       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 [color, aarOuter] = PeptidesModel.chemPalette.getColorAAPivot(obj['name']);
       const textSize = g.measureText(aarOuter);
       const fontSize = 11;
       const leftMargin = (w - (aarOuter.length > 1 ? fontSize : textSize.width - 8)) / 2;
@@ -252,7 +237,7 @@ export class StackedBarChart extends DG.JsViewer {
       if (textSize.width <= subBartHeight) {
         const origTransform = g.getTransform();
 
-        if (color != PeptidesController.chemPalette.undefinedColor) {
+        if (color != PeptidesModel.chemPalette.undefinedColor) {
           g.fillRect(x + xStart, y + yStart, barWidth, subBartHeight);
           g.fillStyle = 'black';
         } else
@@ -287,7 +272,7 @@ export class StackedBarChart extends DG.JsViewer {
     });
   }
 
-  findAARandPosition(cell: DG.GridCell, mouseEvent: MouseEvent) {
+  findAARandPosition(cell: DG.GridCell, mouseEvent: MouseEvent): {colName: string, aaName: string} | null {
     if (!cell.tableColumn?.name || !this.aminoColumnNames.includes(cell.tableColumn.name))
       return null;
 
@@ -330,28 +315,20 @@ export class StackedBarChart extends DG.JsViewer {
     return null;
   }
 
-  unhighlight() {
+  unhighlight(): void {
     ui.tooltip.hide();
     this.computeData();
   }
 
-  /**
-   * Requests highlight/select/filter action based on currentBarPart
-   * @param event 
-   * @returns 
-   */
-  requestAction(event: MouseEvent) {
-    if (!this._currentBarPart)
+  /** Requests highlight/select/filter action based on currentBarPart */
+  requestAction(event: MouseEvent, barPart: {colName: string, aaName: string} | null): void {
+    if (!barPart)
       return;
-    let aar = this._currentBarPart!['aaName'];
-    let position = this._currentBarPart!['colName'];
+    const aar = barPart['aaName'];
+    const position = barPart['colName'];
     if (event.type === 'click') {
-      if (this.isSameBarClicked) {
-        aar = position = C.CATEGORIES.ALL;
-        this.currentBarPart = null;
-      }
-      this.controller.setSARGridCellAt(aar, position);
-      this._previousClickedBarPart = this._currentBarPart;
+      event.shiftKey ? this.model.modifyCurrentSelection(aar, position) :
+        this.model.initCurrentSelection(aar, position);
     } else {
       ui.tooltip.showRowGroup(this.dataFrame, (i) => {
         const currentAAR = this.dataFrame.get(position, i);