Skip to content

Details page UI #66

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

Merged
el-rabies merged 3 commits into from
Apr 8, 2026
Merged

Details page UI #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d0b0f0
fix: Icon-detail page and interactor-detail page
el-rabies Apr 8, 2026
eada05d
feat: Added Icon Download to detail page
el-rabies Apr 8, 2026
a0b545a
chore: Apply Prettier formatting
github-actions[bot] Apr 8, 2026
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
205 changes: 116 additions & 89 deletions projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,117 +1,144 @@
<app-page-layout [showSidebar]="false" [showBreadcrumb]="false">
@if (loading()) {
<div class="loading-container">
<mat-spinner diameter="48"></mat-spinner>
</div>
<div class="loading-container">
<mat-spinner diameter="48"></mat-spinner>
</div>
} @else if (error()) {
<div class="error-container">
<h2>Icon not found</h2>
<p>The requested icon could not be found.</p>
</div>
<div class="error-container">
<h2>Icon not found</h2>
<p>The requested icon could not be found.</p>
</div>
} @else if (icon()) {
<div class="icon-detail">
<app-tile variant="light">
<div class="icon-header">
<div class="icon-info">
<h1>{{ icon()!.name }}</h1>
<div class="icon-detail">
<app-tile variant="light">
<div class="icon-summary">
<h1>{{ icon()!.name }}</h1>
<dl class="summary-fields">
<div class="summary-row">
<dt>Preview</dt>
<dd>
<a class="download-link" [href]="getPngUrl()" download="{{ icon()!.name }}.png" title="Click to download PNG">
<span class="material-symbols-rounded">download</span>
PNG
</a>
<a class="download-link" [href]="getSvgUrl()" download="{{ icon()!.name }}.svg" title="Click to download SVG">
<span class="material-symbols-rounded">download</span>
SVG
</a>
</dd>
<div class="icon-preview">
<img [src]="getSvgUrl()" [alt]="icon()!.name" />
</div>
</div>
<div class="summary-row">
@if (icon()!.iconCategories?.length) {
<div class="icon-categories">
@for (cat of icon()!.iconCategories; track cat) {
<span class="category-tag">{{ cat }}</span>
}
</div>
<dt>Categories</dt>
<dd>
@for (cat of icon()!.iconCategories; track cat) {
<span>{{ cat }}</span>
}
</dd>
}
</div>
<div class="icon-preview">
<img [src]="getSvgUrl()" [alt]="icon()!.name" />
<div class="summary-row">
@if (icon()!.summation) {
<dt>Description</dt>
<dd [innerHTML]="icon()!.summation"></dd>
}
</div>
</div>
</app-tile>

@if (icon()!.summation) {
<app-tile variant="light">
<h2>Description</h2>
<p [innerHTML]="icon()!.summation"></p>
</app-tile>
}

@if (icon()!.iconCuratorName || icon()!.iconDesignerName) {
<app-tile variant="light">
<h2>Credits</h2>
<div class="credits">
<div class="summary-row">
@if (icon()!.iconCuratorName) {
<div class="credit-item">
<span class="credit-label">Curator:</span>
@if (icon()!.iconCuratorOrcidId) {
<a [href]="'https://orcid.org/' + icon()!.iconCuratorOrcidId" target="_blank" rel="noopener">
{{ icon()!.iconCuratorName }}
<span class="material-symbols-rounded">open_in_new</span>
</a>
} @else {
<span>{{ icon()!.iconCuratorName }}</span>
}
</div>
<div class="credit-item">
<span class="credit-label">Curator</span>
@if (icon()!.iconCuratorOrcidId) {
<a
[href]="'https://orcid.org/' + icon()!.iconCuratorOrcidId"
target="_blank"
rel="noopener"
>
{{ icon()!.iconCuratorName }}
<span class="material-symbols-rounded">open_in_new</span>
</a>
} @else {
<span>{{ icon()!.iconCuratorName }}</span>
}
</div>
}
</div>
<div class="summary-row">
@if (icon()!.iconDesignerName) {
<div class="credit-item">
<span class="credit-label">Designer:</span>
@if (icon()!.iconDesignerUrl) {
<a [href]="icon()!.iconDesignerUrl" target="_blank" rel="noopener">
{{ icon()!.iconDesignerName }}
<span class="material-symbols-rounded">open_in_new</span>
</a>
} @else {
<span>{{ icon()!.iconDesignerName }}</span>
}
</div>
<div class="credit-item">
<span class="credit-label">Designer</span>
@if (icon()!.iconDesignerUrl) {
<a
[href]="icon()!.iconDesignerUrl"
target="_blank"
rel="noopener"
>
{{ icon()!.iconDesignerName }}
<span class="material-symbols-rounded">open_in_new</span>
</a>
} @else {
<span>{{ icon()!.iconDesignerName }}</span>
}
</div>
}
</div>
</app-tile>
}

@if (getUniProtReferences().length) {
<app-tile variant="light">
<h2>External References</h2>
<div class="references">
@for (ref of getUniProtReferences(); track ref) {
<a [href]="'https://www.uniprot.org/uniprot/' + ref" target="_blank" rel="noopener" class="ref-link">
<div class="summary-row">
@if (getUniProtReferences().length) {
<dt>External References</dt>
<div class="references">
@for (ref of getUniProtReferences(); track ref) {
<a
[href]="'https://www.uniprot.org/uniprot/' + ref"
target="_blank"
rel="noopener"
class="ref-link"
>
UniProt: {{ ref }}
<span class="material-symbols-rounded">open_in_new</span>
</a>
}
</div>
}
</div>
</app-tile>
}

@if (icon()!.iconPhysicalEntities?.length) {
<app-tile variant="light">
<h2>Physical Entities ({{ icon()!.iconPhysicalEntities.length }})</h2>
<div class="table-wrapper">
<table class="entities-table">
<thead>
<tr>
<th>Name</th>
<th>Identifier</th>
<th>Type</th>
<th>Compartment</th>
</tr>
</thead>
<tbody>
@for (entity of icon()!.iconPhysicalEntities; track entity.stId) {
<div class="summary-row">
@if (icon()!.iconPhysicalEntities?.length) {
<dt>
Physical Entities ({{ icon()!.iconPhysicalEntities.length }})
</dt>
<div class="table-wrapper">
<table class="entities-table">
<thead>
<tr>
<th>Name</th>
<th>Identifier</th>
<th>Type</th>
<th>Compartment</th>
</tr>
</thead>
<tbody>
@for (entity of icon()!.iconPhysicalEntities; track
entity.stId) {
<tr>
<td>
<a [routerLink]="'/content/detail/' + entity.stId">{{ entity.displayName || entity.name }}</a>
<a [routerLink]="'/content/detail/' + entity.stId">{{
entity.displayName || entity.name
}}</a>
</td>
<td>{{ entity.stId }}</td>
<td>{{ entity.type }}</td>
<td>{{ entity.compartments }}</td>
</tr>
}
</tbody>
</table>
}
</tbody>
</table>
</div>
}
</div>
</app-tile>
}
</div>
</dl>
</div>
</app-tile>
</div>
}
</app-page-layout>
100 changes: 80 additions & 20 deletions projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,84 @@
gap: 16px;
}

.icon-summary {
width: 100%;
margin: 16px;

h1 {
border-bottom: 1px solid var(--primary);
padding: 0 0 16px;
font-size: 1.5rem;

a {
color: var(--primary);
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
}

.summary-fields {
margin: 0;

.summary-row {
display: flex;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--outline, #eee);

.download-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--primary);
text-decoration: none;
margin-right: 16px;

&:hover {
text-decoration: underline;
}

.material-symbols-rounded {
font-size: 16px;
}
}

.icon-preview {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: 12px;

img {
height: 150px;
width: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}

&:last-child {
border-bottom: none;
}

dt {
font-weight: 600;
min-width: 100px;
flex-shrink: 0;
}

dd {
margin: 0;
}
}
}
}

.icon-header {
display: flex;
align-items: flex-start;
Expand All @@ -48,25 +126,6 @@
font-size: 1.5rem;
}
}

.icon-preview {
flex-shrink: 0;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--outline, #ddd);
border-radius: 8px;
padding: 12px;
background: white;

img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
}

.icon-categories {
Expand Down Expand Up @@ -151,7 +210,8 @@ h2 {
width: 100%;
border-collapse: collapse;

th, td {
th,
td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--outline, #ddd);
Expand Down
19 changes: 12 additions & 7 deletions projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {Component, inject, OnInit, signal} from '@angular/core';
import {ActivatedRoute, RouterLink} from '@angular/router';
import {MatProgressSpinner} from '@angular/material/progress-spinner';
import {PageLayoutComponent} from '../../../page-layout/page-layout.component';
import {TileComponent} from '../../../reactome-components/tile/tile.component';
import {IconService, IconEntry} from '../../../../services/icon.service';
import { Component, inject, OnInit, signal } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { PageLayoutComponent } from '../../../page-layout/page-layout.component';
import { TileComponent } from '../../../reactome-components/tile/tile.component';
import { IconService, IconEntry } from '../../../../services/icon.service';

@Component({
selector: 'app-icon-detail',
Expand Down Expand Up @@ -45,8 +45,13 @@ export class IconDetailComponent implements OnInit {
return stId ? `https://reactome.org/icon/${stId}.svg` : '';
}

getPngUrl(): string {
const stId = this.icon()?.stId;
return stId ? `https://reactome.org/icon/${stId}.png` : '';
}

getUniProtReferences(): string[] {
const refs = this.icon()?.iconReferences ?? [];
return refs.filter(r => !r.includes(':'));
return refs.filter((r) => !r.includes(':'));
}
}
Loading