Skip to content

Various small fixes #34

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

Open
ckouder wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Various small fixes #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e14a69d
add new team members
ckouder Nov 21, 2025
44873c4
fix typo
ckouder Nov 21, 2025
dd0e439
make sure stats align
ckouder Nov 21, 2025
b70723e
update border color
ckouder Nov 21, 2025
7f96857
add tooltip
ckouder Nov 21, 2025
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
59 changes: 25 additions & 34 deletions src/app/components/data-snapshot/data-snapshot.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</div>
</div>
<div class="flex flex-col gap-2 w-full">
<div class="flex justify-end w-full pr-8 gap-2">
<div class="flex justify-end w-full gap-2">
@if (currentChart === 'pieChart') {
@let isShowingTotal = !(chartState.state === 'hovering' || chartState.state === 'hovering-ec' || chartState.state === 'focused');
@let currentStats = isShowingTotal ? totalStatistics : ecClassStatistics[chartState.payload];
Expand All @@ -45,42 +45,33 @@
class="font-normal ml-1">{{ isShowingTotal ? '' : ecSummary[chartState.payload].description }}</span></div>
</div>
<hr>
<div class="flex justify-between">
<div class="flex flex-col gap-2">
<div class="font-semibold">Total Dataset</div>
<div class="text-[#6C757D]">No. Entries: <span class="font-semibold text-[--text-color]">{{
currentStats.entries | number
}}</span></div>
<div class="text-[#6C757D]">% Entries: <span class="font-semibold text-[--text-color]">{{
(currentStats.entries / totalStatistics.entries * 100).toFixed(1) }}%</span>
</div>
<div class="grid grid-cols-4 grid-rows-[auto_auto_auto] grid-cols-[auto_auto_auto_auto] gap-1">
<div class="font-semibold">Total Dataset</div>
<div class="font-semibold col-start-2 col-span-3">Detailed Breakdown</div>
<div class="text-[#6C757D] text-sm">No. Entries: <span class="font-semibold text-[--text-color] text-sm">{{
currentStats.entries | number
}}</span></div>
<div class="text-[#6C757D] text-sm">EC Numbers: <span class="font-semibold text-[--text-color] text-sm">{{
currentStats.ecNumbers / 1000 | number: '1.1-1'
}}k</span></div>
<div class="text-[#6C757D] text-sm">Accession: <span class="font-semibold text-[--text-color] text-sm">{{
currentStats.accessions / 1000 | number: '1.1-1'
}}k</span></div>
<div class="text-[#6C757D] text-sm">Organisms: <span class="font-semibold text-[--text-color] text-sm">{{
currentStats.organisms / 1000 | number: '1.1-1'
}}k</span></div>
<div class="text-[#6C757D] text-sm">% Entries: <span class="font-semibold text-[--text-color] text-sm">{{
(currentStats.entries / totalStatistics.entries * 100).toFixed(1) }}%</span>
</div>
<div class="flex flex-col gap-2">
<div class="font-semibold">Detailed Breakdown</div>
<div class="text-[#6C757D]">EC Numbers: <span class="font-semibold text-[--text-color]">{{
currentStats.ecNumbers / 1000 | number: '1.1-1'
}}k</span></div>
<div class="text-[#6C757D]">Protein Names: <span class="font-semibold text-[--text-color]">{{
currentStats.proteins / 1000 | number: '1.1-1'
}}k</span>
</div>
<div class="text-[#6C757D] text-sm">Protein Names: <span class="font-semibold text-[--text-color] text-sm">{{
currentStats.proteins / 1000 | number: '1.1-1'
}}k</span>
</div>
<div class="flex flex-col gap-2">
<div class="font-semibold">&nbsp;</div>
<div class="text-[#6C757D]">Accession: <span class="font-semibold text-[--text-color]">{{
currentStats.accessions / 1000 | number: '1.1-1'
}}k</span></div>
<div class="text-[#6C757D]">Genes: <span class="font-semibold text-[--text-color]">{{
currentStats.genes / 1000 | number: '1.1-1'
}}k</span>
</div>
</div>
<div class="flex flex-col gap-2">
<div class="font-semibold">&nbsp;</div>
<div class="text-[#6C757D]">Organisms: <span class="font-semibold text-[--text-color]">{{
currentStats.organisms / 1000 | number: '1.1-1'
}}k</span></div>
<div class="text-[#6C757D] text-sm">Genes: <span class="font-semibold text-[--text-color] text-sm">{{
currentStats.genes / 1000 | number: '1.1-1'
}}k</span>
</div>
<div class="font-semibold">&nbsp;</div>
</div>
</div>
} @else {
Expand Down
48 changes: 42 additions & 6 deletions src/app/components/heatmap/heatmap.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
@let isColKey = type === 'colKey';
@let isRowKey = type === 'rowKey';
@let isKey = isColKey || isRowKey;
@let isCell = type === 'cell';
@let isMuted = interactable.state === InteractableState.MUTED;
@let isNA = interactable.value === 0;
@let isSelected = interactable.state === InteractableState.SELECTED;
Expand All @@ -38,7 +39,8 @@
@let keyClassName = 'sticky left-0 bg-white border-solid border-gray-200 h-full z-[10]' + (isColKey ? ' border-b' : ' border-r');
@let mutedClassName = 'cell-muted';
@let naClassName = 'cell-na';
@let selectedClassName = 'z-[9] border-solid border-pink-500';
@let selectedClassName = 'z-[9] border-solid border-[#38001B]';
@let interactiveClassName = isCell ? 'cursor-pointer heatmap-cell--interactive' : '';
@let topBorderClassName
= (interactable.state === InteractableState.SELECTED
&& (interactable.above ? interactable.above.state !== InteractableState.SELECTED : true))
Expand All @@ -65,6 +67,7 @@
isSelected ? selectedClassName : '',
isMuted ? mutedClassName : '',
isNA ? naClassName : '',
interactiveClassName,
topBorderClassName,
leftBorderClassName,
bottomBorderClassName,
Expand All @@ -74,12 +77,45 @@
<td
[class]="classNames"
[style.background-color]="interactable.color"
(mousedown)="onInteractableMouseDown(interactable, $event)"
(mouseover)="onInteractableMouseOver(interactable, $event)"
(mouseup)="onInteractableMouseUp(interactable, $event)"
(click)="onInteractableClick(interactable, type, $event)"
(keydown)="onInteractableKeyDown(interactable, type, $event)"
[attr.data-col-index]="interactable.column"
[attr.data-row-index]="interactable.row"
[attr.role]="isCell ? 'button' : null"
[attr.tabindex]="isCell ? 0 : null"
[attr.aria-pressed]="isCell ? isSelected : null"
[attr.aria-label]="isCell ? getCellHoverTitle(interactable) : null"
[attr.title]="isCell ? getCellHoverTitle(interactable) : null"
>
{{ type === 'cell' ? '' : interactable.value }}
{{ isCell ? '' : interactable.value }}
</td>
</ng-template>
</ng-template>

<p-overlayPanel
#cellTooltip
[dismissable]="true"
[showCloseIcon]="true"
styleClass="rounded-xl shadow-2xl max-w-xs p-2 bg-[#343A40] text-white border border-white/10"
(onHide)="onTooltipHide()"
>
<ng-container *ngIf="tooltipContext as tooltip">
<span class="text-base font-semibold tracking-tight">{{ tooltip.displayLabel }}</span>
<div class="h-px bg-white/20 my-1"></div>

<div class="flex items-center justify-between text-sm">
<span class="uppercase text-xs tracking-[0.08em] text-white/70">LLR</span>
<div class="flex items-center gap-2">
<span class="inline-block h-2.5 w-2.5 rounded-full shadow-[0_0_0_2px_rgba(255,255,255,0.2)]" [style.backgroundColor]="tooltip.accentColor"></span>
<span class="font-semibold text-white">{{ tooltip.llrFormatted }}</span>
</div>
</div>

<div class="flex items-center justify-between text-sm">
<span class="uppercase text-xs tracking-[0.08em] text-white/70">Predicted Effect</span>
<div class="flex items-center gap-2 font-semibold" [ngClass]="tooltip.accentClass">
<i class="pi text-sm" [ngClass]="tooltip.arrowIcon"></i>
<span>{{ tooltip.predictedEffectLabel }}</span>
</div>
</div>
</ng-container>
</p-overlayPanel>
13 changes: 13 additions & 0 deletions src/app/components/heatmap/heatmap.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
:host .heatmap-cell--interactive {
transition: box-shadow 0.15s ease;
}

:host .heatmap-cell--interactive:hover {
box-shadow: 0 0 0 2px rgba(56, 0, 27, 0.25);
}

:host .heatmap-cell--interactive:focus-visible {
box-shadow: 0 0 0 2px rgba(56, 0, 27, 0.4);
outline: none;
}

Loading