Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AG-1425 refactor to support last pinned cache #1305

Merged
merged 5 commits into from
May 13, 2024
Merged

AG-1425 refactor to support last pinned cache #1305

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
45ffc4c
AG-1425 refactor to support last pinned cache
sagely1 May 7, 2024
9f19393
AG-1425 fix breaking unit tests
sagely1 May 9, 2024
abae471
AG-1425 updating variables and comments for clarity, fixing plural bu…
sagely1 May 9, 2024
83dc635
AG-1425 refactor, fix more than 50 url proteins and fix for switching…
sagely1 May 10, 2024
d3940fa
AG-1425 code cleanup for clarity
sagely1 May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 30 additions & 18 deletions src/app/features/genes/components/gene-comparison-tool/gene-comparison-tool.component.html
View file
Open in desktop
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>
sagely1 marked this conversation as resolved.
Show resolved Hide resolved
<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>
sagely1 marked this conversation as resolved.
Show resolved Hide resolved
</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="top"
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
Open in desktop
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
Open in desktop
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(
sagely1 marked this conversation as resolved.
Show resolved Hide resolved
expect(component.getUrlParam('significance')).toEqual(
threshold
);
};
Expand Down
Loading
Loading