Skip to content

Commit

Permalink
use expansion panel for cell types module
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhushankhope
bhushankhope committed Oct 24, 2024
1 parent 1733a37 commit 44eed2c
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 173 deletions.
280 changes: 144 additions & 136 deletions libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,150 @@
<span class="cell-types-label">
Cell Types
<button
mat-icon-button
[matMenuTriggerFor]="menu"
hraMicroTooltip="More"
hraIconButtonSize="large"
data-testid="trigger"
>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [matMenuTriggerFor]="infoSubMenu" class="expanded" matRipple matRippleColor="#201E3D14">
<mat-icon>info</mat-icon>
<span>Info</span>
<mat-icon class="expand-arrow">arrow_right</mat-icon>
</button>
<button mat-menu-item [matMenuTriggerFor]="downloadSubMenu" class="expanded" matRipple matRippleColor="#201E3D14">
<mat-icon>download</mat-icon>
<span>Download</span>
<mat-icon class="expand-arrow">arrow_right</mat-icon>
</button>
<button mat-menu-item (click)="toggleLinksColumn()">
<mat-icon>{{ hideCellLinkData() ? 'visibility' : 'visibility_off' }}visibility</mat-icon>
{{ hideCellLinkData() ? 'Show' : 'Hide' }} Cell Link Data
</button>
<button mat-menu-item (click)="resetAllColors.emit()">
<mat-icon>reset_wrench</mat-icon>
Reset All Colors
</button>
<a
mat-menu-item
href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
target="_blank"
rel="noopener noreferrer"
>
<mat-icon>code</mat-icon>
Embed App
</a>
</mat-menu>
<mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
{{ infoToolTipDescription }}
</mat-menu>
<mat-menu #downloadSubMenu="matMenu">
<button mat-menu-item (click)="downloadNodes.emit()">
<mat-icon>download</mat-icon>
<span>Cells CSV</span>
</button>
<button mat-menu-item (click)="downloadEdges.emit()">
<mat-icon>download</mat-icon>
<span>Cell Links CSV</span>
</button>
<button mat-menu-item (click)="downloadColorMap.emit()">
<mat-icon>download</mat-icon>
<span>Cell Color Map CSV</span>
</button>
</mat-menu>
</span>

<div class="total-ct-label">
<span>{{ selection().length }}</span>
Total Cell Types
</div>
<div class="total-cells">
<span data-testid="total-cell-count">{{ totalCellCount() | number }}</span>
Total Cells
</div>
@if (!hideCellLinkData()) {
<div class="total-cell-links">
<span data-testid="total-cell-link-count">{{ totalCellLinksCount() | number }}</span>
Total Cell Links
<hra-expansion-panel [title]="'Cell Types'" disabled="">
<hra-expansion-panel-actions>
<span class="cell-types-label">
<button
mat-icon-button
[matMenuTriggerFor]="menu"
hraMicroTooltip="More"
hraIconButtonSize="large"
data-testid="trigger"
>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [matMenuTriggerFor]="infoSubMenu" class="expanded" matRipple matRippleColor="#201E3D14">
<mat-icon>info</mat-icon>
<span>Info</span>
<mat-icon class="expand-arrow">arrow_right</mat-icon>
</button>
<button
mat-menu-item
[matMenuTriggerFor]="downloadSubMenu"
class="expanded"
matRipple
matRippleColor="#201E3D14"
>
<mat-icon>download</mat-icon>
<span>Download</span>
<mat-icon class="expand-arrow">arrow_right</mat-icon>
</button>
<button mat-menu-item (click)="toggleLinksColumn()">
<mat-icon>{{ hideCellLinkData() ? 'visibility' : 'visibility_off' }}visibility</mat-icon>
{{ hideCellLinkData() ? 'Show' : 'Hide' }} Cell Link Data
</button>
<button mat-menu-item (click)="resetAllColors.emit()">
<mat-icon>reset_wrench</mat-icon>
Reset All Colors
</button>
<a
mat-menu-item
href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
target="_blank"
rel="noopener noreferrer"
>
<mat-icon>code</mat-icon>
Embed App
</a>
</mat-menu>
<mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
{{ infoToolTipDescription }}
</mat-menu>
<mat-menu #downloadSubMenu="matMenu">
<button mat-menu-item (click)="downloadNodes.emit()">
<mat-icon>download</mat-icon>
<span>Cells CSV</span>
</button>
<button mat-menu-item (click)="downloadEdges.emit()">
<mat-icon>download</mat-icon>
<span>Cell Links CSV</span>
</button>
<button mat-menu-item (click)="downloadColorMap.emit()">
<mat-icon>download</mat-icon>
<span>Cell Color Map CSV</span>
</button>
</mat-menu>
</span>
</hra-expansion-panel-actions>
<div class="total-ct-label">
<span>{{ selection().length }}</span>
Total Cell Types
</div>
<div class="total-cells">
<span data-testid="total-cell-count">{{ totalCellCount() | number }}</span>
Total Cells
</div>
}
@if (!hideCellLinkData()) {
<div class="total-cell-links">
<span data-testid="total-cell-link-count">{{ totalCellLinksCount() | number }}</span>
Total Cell Links
</div>
}

<ng-scrollbar
class="table-overflow-container"
externalViewport=".scroll-viewport"
externalContentWrapper="tbody"
externalSpacer="tbody"
asyncDetection="auto"
hraScrollOverflowFade
[scrollOverflowFadeOffset]="36"
>
<div class="scroll-viewport">
<table
mat-table
[dataSource]="dataSource"
[trackBy]="trackByName"
matSort
matSortDirection="desc"
matSortActive="count"
aria-label="Cell Types Count Table"
>
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
(change)="toggleAllRows()"
[checked]="selectionState() === 'full'"
[indeterminate]="selectionState() === 'partial'"
[aria-label]="getCheckboxLabel(selectionState() === 'full')"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row; let index = index">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="toggleRow(row)"
[checked]="isSelected(row)"
[aria-label]="getCheckboxLabel(isSelected(row), index + 1)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-scrollbar
class="table-overflow-container"
externalViewport=".scroll-viewport"
externalContentWrapper="tbody"
externalSpacer="tbody"
asyncDetection="auto"
hraScrollOverflowFade
[scrollOverflowFadeOffset]="36"
>
<div class="scroll-viewport">
<table
mat-table
[dataSource]="dataSource"
[trackBy]="trackByName"
matSort
matSortDirection="desc"
matSortActive="count"
aria-label="Cell Types Count Table"
>
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
(change)="toggleAllRows()"
[checked]="selectionState() === 'full'"
[indeterminate]="selectionState() === 'partial'"
[aria-label]="getCheckboxLabel(selectionState() === 'full')"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row; let index = index">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="toggleRow(row)"
[checked]="isSelected(row)"
[aria-label]="getCheckboxLabel(isSelected(row), index + 1)"
>
</mat-checkbox>
</td>
</ng-container>

<ng-container matColumnDef="cellType">
<th mat-header-cell *matHeaderCellDef mat-sort-header="name" start="desc">Cell Type</th>
<td mat-cell *matCellDef="let element" class="name">
<cde-color-picker-label
[label]="element.name"
[color]="element.color"
[isAnchor]="element.name === selectedCellType()"
(colorChange)="updateColor(element, $event)"
>
</cde-color-picker-label>
</td>
</ng-container>
<ng-container matColumnDef="cellType">
<th mat-header-cell *matHeaderCellDef mat-sort-header="name" start="desc">Cell Type</th>
<td mat-cell *matCellDef="let element" class="name">
<cde-color-picker-label
[label]="element.name"
[color]="element.color"
[isAnchor]="element.name === selectedCellType()"
(colorChange)="updateColor(element, $event)"
>
</cde-color-picker-label>
</td>
</ng-container>

<ng-container matColumnDef="count">
<th mat-header-cell *matHeaderCellDef mat-sort-header="count" start="desc">#Cells</th>
<td mat-cell *matCellDef="let element">{{ element.count.toLocaleString() }}</td>
</ng-container>
<ng-container matColumnDef="count">
<th mat-header-cell *matHeaderCellDef mat-sort-header="count" start="desc">#Cells</th>
<td mat-cell *matCellDef="let element">{{ element.count.toLocaleString() }}</td>
</ng-container>

<ng-container matColumnDef="links">
<th mat-header-cell *matHeaderCellDef mat-sort-header="outgoingEdgeCount" start="desc">#Links</th>
<td mat-cell *matCellDef="let element">{{ element.outgoingEdgeCount.toLocaleString() }}</td>
</ng-container>
<ng-container matColumnDef="links">
<th mat-header-cell *matHeaderCellDef mat-sort-header="outgoingEdgeCount" start="desc">#Links</th>
<td mat-cell *matCellDef="let element">{{ element.outgoingEdgeCount.toLocaleString() }}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columns(); sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: columns()"></tr>
</table>
</div>
</ng-scrollbar>
<tr mat-header-row *matHeaderRowDef="columns(); sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: columns()"></tr>
</table>
</div>
</ng-scrollbar>
</hra-expansion-panel>
61 changes: 24 additions & 37 deletions libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,6 @@ $blue-theme: mat.m2-define-light-theme(

:host {
@include mat.button-color($blue-theme);

display: grid;
grid:
'cell-types . download'
'total-cell-types total-cells total-cell-links'
'table table table' 1fr
/ auto 1fr auto;
align-items: start;
row-gap: 0.75rem;
overflow: hidden;
padding: 0.75rem 1rem;
border-width: 0 2px 0px 0px;
Expand All @@ -48,34 +39,30 @@ $blue-theme: mat.m2-define-light-theme(
--mat-table-header-container-height: 2rem;
--mat-menu-item-label-text-color: var(--sys-primary);

&:not(:has(.total-cell-links)) {
grid:
'cell-types . download'
'total-cell-types . total-cells'
'table table table' 1fr
/ auto 1fr auto;
}
::ng-deep {
hra-expansion-panel {
.header {
margin-bottom: 0.25rem;

span.cell-types-label {
font: var(--sys-label-medium);
letter-spacing: var(--sys-label-medium-tracking);
grid-area: cell-types;
display: flex;
align-items: center;
gap: 0.25rem;
}
.title {
font: var(--sys-label-medium);
}
}

button.download-csv {
--mdc-filled-button-label-text-color: #{button-text-color};
grid-area: download;
padding: 0.3438rem 0.5rem;

.mat-icon {
margin-left: unset;
margin-right: 0.125rem;
font-size: 1.25rem;
height: 1.25rem;
width: 1.25rem;
.expansion-body {
display: grid;
grid:
'total-cell-types total-cells total-cell-links'
'table table table' 1fr
/ auto 1fr auto;

&:not(:has(.total-cell-links)) {
grid:
'total-cell-types . total-cells'
'table table table' 1fr
/ auto 1fr auto;
}
}
}
}

Expand All @@ -84,6 +71,7 @@ $blue-theme: mat.m2-define-light-theme(
.total-cell-links {
font: var(--sys-label-small);
letter-spacing: var(--sys-label-medium-tracking);
margin: 0.25rem 0;

span {
display: block;
Expand All @@ -92,7 +80,6 @@ $blue-theme: mat.m2-define-light-theme(
}
}

.mat-caption,
.total-ct-label {
grid-area: total-cell-types;
}
Expand Down Expand Up @@ -229,7 +216,7 @@ $blue-theme: mat.m2-define-light-theme(

::ng-deep {
div.mat-mdc-menu-panel {
max-width: 308px;
max-width: 19.25rem;
&.info-sub-menu .mat-mdc-menu-content {
padding: 1rem 1rem;
}
Expand Down
Loading

0 comments on commit 44eed2c

Please sign in to comment.