Skip to content

Commit

Permalink
Merge pull request #1305 from sagely1/AG-1425-gct-cache
Browse files Browse the repository at this point in the history 
AG-1425 refactor to support last pinned cache
  • Loading branch information
@sagely1
sagely1 authored May 13, 2024
2 parents c80b03f + d3940fa commit f7fe3e9
Show file tree
Hide file tree
Showing 4 changed files with 357 additions and 149 deletions.
48 changes: 30 additions & 18 deletions src/app/features/genes/components/gene-comparison-tool/gene-comparison-tool.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,25 +284,37 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
</p-table>

<div
*ngIf="pinnedGenes.length > 0"
*ngIf="pinnedItems.length > 0"
class="table-divider table-divider-1"
>
<div class="table-divider-inner">
<div id="pinned-genes-header">Pinned Genes ({{ pinnedGenes.length }}/50)</div>
<div id="pinned-genes-header">
<span *ngIf="category === 'RNA - Differential Expression'">
Pinned Genes ({{ pinnedItems.length }}/50)
</span>
<div *ngIf="category === 'Protein - Differential Expression'">
<div>
Pinned Genes ({{ uniquePinnedGenesCount }}/50)&nbsp;&nbsp;&nbsp;
</div>
<div id="pinned-proteins">
{{ pinnedItems.length }} Protein<ng-container *ngIf="pinnedItems.length > 1">s</ng-container>
</div>
</div>
</div>
<div class="csv-download-button">
<button (click)="downloadPinnedCsv()">
<svg-icon name="download" customClass="two-tone"></svg-icon
>Download as CSV
</button>
</div>
<div class="clear-all-button">
<button (click)="clearPinnedGenes()">Clear All</button>
<button (click)="onClearAllClick()">Clear All</button>
</div>
</div>
</div>
<p-table
#pinnedTable
[value]="pinnedGenes"
[value]="pinnedItems"
[customSort]="true"
(sortFunction)="sortCallback($event)"
breakpoint="0"
Expand Down Expand Up @@ -330,7 +342,7 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
</div>
<div>
<button
(click)="unpinGene(gene)"
(click)="onUnPinGeneClick(gene)"
pTooltip="Unpin this gene"
tooltipPosition="top"
tooltipStyleClass="tooltip"
Expand Down Expand Up @@ -392,15 +404,15 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
<button
class="pin-all-button"
[ngClass]="{
disabled: pinnedGenes.length >= maxPinnedGenes
disabled: getPinDisabledStatus()
}"
(click)="pinFilteredGenes()"
(click)="onPinAllClick()"
[pTooltip]="
pinnedGenes.length >= maxPinnedGenes
? 'You have already pinned the maximum number of genes (' +
getPinDisabledStatus()
? 'You have already pinned the maximum number of Ensembl identifiers (' +
maxPinnedGenes +
'). You must unpin some genes before you can pin more.'
: 'Add all matching genes to Pinned list'
: 'Pin all matching rows to the top.'
"
tooltipPosition="left"
tooltipStyleClass="tooltip"
Expand All @@ -413,7 +425,7 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
</div>
<div
*ngIf="
!searchTerm && !hasSelectedFilters() && pinnedGenes.length > 0
!searchTerm && !hasSelectedFilters() && pinnedItems.length > 0
"
class="table-divider"
>
Expand Down Expand Up @@ -458,16 +470,16 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
</div>
<div>
<button
(click)="pinGene(gene)"
(click)="onPinGeneClick(gene)"
[ngClass]="{
disabled: pinnedGenes.length >= maxPinnedGenes
disabled: getPinDisabledStatus()
}"
[pTooltip]="
pinnedGenes.length >= maxPinnedGenes
? 'You have already pinned the maximum number of genes (' +
getPinDisabledStatus()
? 'You have already pinned the maximum number of Ensembl identifiers (' +
maxPinnedGenes +
'). You must unpin some genes before you can pin more.'
: 'Pin this gene to the top of the list'
: 'Pin this row to the top of the list'
"
tooltipPosition="top"
tooltipStyleClass="tooltip"
Expand Down Expand Up @@ -561,8 +573,8 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
<gene-comparison-tool-pinned-genes-modal
#pinnedGenesModal
(onChange)="onPinnedGenesModalChange($event)"
[pinnedGenes]="pinnedGenes"
[pendingPinnedGenes]="pendingPinnedGenes"
[pinnedGenes]="pinnedItems"
[pendingPinnedGenes]="pendingPinnedItems"
[maxPinnedGenes]="maxPinnedGenes"
></gene-comparison-tool-pinned-genes-modal>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/app/features/genes/components/gene-comparison-tool/gene-comparison-tool.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -618,6 +618,12 @@
flex-grow: 1;
}
}

#pinned-proteins {
font-weight: normal;
padding: 5px 0;
font-size: 14px;
}
}

button {
Expand Down
19 changes: 10 additions & 9 deletions ...app/features/genes/components/gene-comparison-tool/gene-comparison-tool.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,13 @@ describe('Component: GeneComparisonToolComponent', () => {
fixture.detectChanges();

expect(component.genes).toEqual([comparisonGeneMock1, comparisonGeneMock2]);
expect(component.pinnedGenes).toEqual([comparisonGeneMock1]);
expect(component.pinnedItems).toEqual([comparisonGeneMock1]);
flush();
}));

it('should search', () => {
component.initData([comparisonGeneMock1, comparisonGeneMock2]);
component.refresh();
fixture.detectChanges();

const input = element.querySelector(
Expand Down Expand Up @@ -180,7 +181,7 @@ describe('Component: GeneComparisonToolComponent', () => {

el = element.querySelector('#pinned-genes-header') as HTMLElement;

expect(el.textContent).toBe('Pinned Genes (1/50)');
expect(el.textContent?.trim()).toBe('Pinned Genes (1/50)');
});

it('should pin/upin gene', () => {
Expand All @@ -189,15 +190,15 @@ describe('Component: GeneComparisonToolComponent', () => {

component.clearPinnedGenes();
fixture.detectChanges();
expect(component.pinnedGenes.length).toEqual(0);
expect(component.pinnedItems.length).toEqual(0);

component.pinGene(comparisonGeneMock1, true);
component.onPinGeneClick(comparisonGeneMock1);
fixture.detectChanges();
expect(component.pinnedGenes.length).toEqual(1);
expect(component.pinnedItems.length).toEqual(1);

component.unpinGene(comparisonGeneMock1, true);
component.onUnPinGeneClick(comparisonGeneMock1, true);
fixture.detectChanges();
expect(component.pinnedGenes.length).toEqual(0);
expect(component.pinnedItems.length).toEqual(0);
});

it('should clear pinned genes', fakeAsync(() => {
Expand All @@ -206,7 +207,7 @@ describe('Component: GeneComparisonToolComponent', () => {

component.clearPinnedGenes();
fixture.detectChanges();
expect(component.pinnedGenes.length).toEqual(0);
expect(component.pinnedItems.length).toEqual(0);
flush();
}));

Expand Down Expand Up @@ -397,7 +398,7 @@ describe('Component: GeneComparisonToolComponent', () => {
expect(
element.querySelector(TOGGLE_CLASS)?.querySelector('input')?.checked
).toBeTrue();
expect(component.getUrlParam('significance')[0]).toEqual(
expect(component.getUrlParam('significance')).toEqual(
threshold
);
};
Expand Down
Loading

0 comments on commit f7fe3e9

Please sign in to comment.