Skip to content

Commit 74b2364

Browse files
el-rabiesel-rabies
authored
Merge pull request #26 from reactome/add-table-content-pages
Add table content pages
2 parents 13bf086 + 9608181 commit 74b2364

26 files changed

Lines changed: 3658 additions & 44 deletions

‎package-lock.json‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"rxjs": "~7.8.0",
7171
"svg-pan-zoom": "^3.6.1",
7272
"svgcanvas": "^2.6.0",
73+
"swagger-ui-dist": "^5.32.0",
7374
"tinacms": "^3.4.1",
7475
"tslib": "^2.3.0",
7576
"vectorious": "^6.1.12",

‎projects/website-angular/src/app/app.routes.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const routes: Routes = [
1818
{ path: 'community/collaboration', loadComponent: () => import('./community/collaboration/collaboration.component').then(m => m.CollaborationComponent), pathMatch: 'full' },
1919
{ path: 'community/icon-lib', loadComponent: () => import('./community/icon-lib/icon-lib.component').then(m => m.IconLibComponent), pathMatch: 'full' },
2020
{ path: 'community/icon-lib/:id', loadComponent: () => import('./community/icon-lib/icon-lib.component').then(m => m.IconLibComponent), pathMatch: 'full' },
21+
{ path: 'community/contributors', loadComponent: () => import('./content/contributors/contributors.component').then(m => m.ContributorsComponent), pathMatch: 'full' },
2122

2223
//Documentation Pages
2324
{ path: 'documentation/faq', loadComponent: () => import('./documentation/faq/faq.component').then(m => m.FaqComponent), pathMatch: 'full' },
@@ -29,10 +30,20 @@ export const routes: Routes = [
2930
{ path: 'content/reactome-research-spotlight', loadComponent: () => import('./article/article-page/article-page.component').then(m => m.ArticlePageComponent), pathMatch: 'full' },
3031
{ path: 'content/reactome-research-spotlight/:slug', loadComponent: () => import('./article/article/article.component').then(m => m.ArticleComponent), pathMatch: 'full' },
3132

33+
//Content Pages (TOC, DOI, Schema)
34+
{ path: 'content/toc', loadComponent: () => import('./content/toc/toc.component').then(m => m.TocComponent), pathMatch: 'full' },
35+
{ path: 'content/doi', loadComponent: () => import('./content/doi/doi.component').then(m => m.DoiComponent), pathMatch: 'full' },
36+
{ path: 'content/schema', loadComponent: () => import('./content/schema/schema.component').then(m => m.SchemaComponent), pathMatch: 'full' },
37+
{ path: 'content/schema/:className', loadComponent: () => import('./content/schema/schema.component').then(m => m.SchemaComponent), pathMatch: 'full' },
38+
3239
//Search Pages
3340
{ path: 'content/query', loadComponent: () => import('./search/search.component').then(m => m.SearchComponent) },
3441
{ path: 'tools/site-search', loadComponent: () => import('./site-search/site-search.component').then(m => m.SiteSearchComponent) },
3542

43+
//API Documentation (Swagger UI)
44+
{ path: 'ContentService', loadComponent: () => import('./swagger-page/swagger-page.component').then(m => m.SwaggerPageComponent), data: { serviceName: 'ContentService' } },
45+
{ path: 'AnalysisService', loadComponent: () => import('./swagger-page/swagger-page.component').then(m => m.SwaggerPageComponent), data: { serviceName: 'AnalysisService' } },
46+
3647
//404 Page
3748
{ path: '404', loadComponent: () => import('./page-not-found/page-not-found.component').then(m => m.PageNotFoundComponent) }, //TODO: Remove?
3849
/* Non - CMS Pages Above this Line */

‎projects/website-angular/src/app/content/contributors/contributors.component.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<app-page-layout>
2+
<article class="contributors-page">
3+
<header class="page-header">
4+
<span class="category-badge">Content</span>
5+
<h1>Contributors</h1>
6+
<p class="description">
7+
Reactome authors and reviewers who have contributed pathways and reactions.
8+
</p>
9+
</header>
10+
11+
<!-- Search bar -->
12+
<div class="search-bar">
13+
<div class="search-input-wrapper">
14+
<span class="material-symbols-rounded search-icon">search</span>
15+
<input
16+
type="text"
17+
placeholder="Search by name or ORCID..."
18+
[value]="searchQuery"
19+
(input)="onSearchInput($event)"
20+
/>
21+
@if (searchQuery) {
22+
<button class="clear-btn" (click)="clearSearch()">
23+
<span class="material-symbols-rounded">close</span>
24+
</button>
25+
}
26+
</div>
27+
</div>
28+
29+
<!-- Letter filter bar -->
30+
@if (!loading && !error) {
31+
<div class="letter-filter">
32+
<button
33+
class="letter-chip"
34+
[class.active]="!activeLetter && !searchQuery"
35+
(click)="selectAll()"
36+
>All</button>
37+
@for (letter of letters; track letter) {
38+
<button
39+
class="letter-chip"
40+
[class.active]="activeLetter === letter"
41+
(click)="selectLetter(letter)"
42+
>{{ letter }}</button>
43+
}
44+
</div>
45+
46+
<div class="results-info">
47+
{{ resultCount }} contributor{{ resultCount !== 1 ? 's' : '' }}
48+
@if (activeLetter) {
49+
<span> starting with "{{ activeLetter }}"</span>
50+
}
51+
@if (searchQuery) {
52+
<span> matching "{{ searchQuery }}"</span>
53+
}
54+
</div>
55+
}
56+
57+
@if (loading) {
58+
<div class="loading-state">
59+
<div class="spinner"></div>
60+
<p>Loading contributors...</p>
61+
</div>
62+
}
63+
64+
@if (error && !loading) {
65+
<div class="error-state">
66+
<span class="material-symbols-rounded">error</span>
67+
<p>Unable to load data. Please try again later.</p>
68+
</div>
69+
}
70+
71+
@if (!loading && !error) {
72+
@if (filteredContributors.length === 0) {
73+
<div class="empty-state">
74+
<span class="material-symbols-rounded">search_off</span>
75+
<p>No contributors found.</p>
76+
</div>
77+
} @else {
78+
<div class="contributors-table-wrapper">
79+
<table class="contributors-table">
80+
<thead>
81+
<tr>
82+
<th class="col-name sortable" (click)="toggleSort('displayName')">
83+
Name
84+
<span class="material-symbols-rounded sort-icon">{{ sortIcon('displayName') }}</span>
85+
</th>
86+
<th class="col-orcid">ORCID</th>
87+
<th class="col-num sortable" (click)="toggleSort('authoredPathways')">
88+
Authored Pathways
89+
<span class="material-symbols-rounded sort-icon">{{ sortIcon('authoredPathways') }}</span>
90+
</th>
91+
<th class="col-num sortable" (click)="toggleSort('reviewedPathways')">
92+
Reviewed Pathways
93+
<span class="material-symbols-rounded sort-icon">{{ sortIcon('reviewedPathways') }}</span>
94+
</th>
95+
<th class="col-num sortable" (click)="toggleSort('authoredReactions')">
96+
Authored Reactions
97+
<span class="material-symbols-rounded sort-icon">{{ sortIcon('authoredReactions') }}</span>
98+
</th>
99+
<th class="col-num sortable" (click)="toggleSort('reviewedReactions')">
100+
Reviewed Reactions
101+
<span class="material-symbols-rounded sort-icon">{{ sortIcon('reviewedReactions') }}</span>
102+
</th>
103+
</tr>
104+
</thead>
105+
<tbody>
106+
@for (c of pagedContributors; track c.person.dbId) {
107+
<tr>
108+
<td class="col-name">
109+
<a [href]="personUrl(c.person.dbId)" class="person-link">{{ c.person.displayName }}</a>
110+
</td>
111+
<td class="col-orcid">
112+
@if (c.person.orcidId) {
113+
<a class="orcid-link" [href]="orcidUrl(c.person.orcidId)" target="_blank" rel="noopener">
114+
{{ c.person.orcidId }}
115+
</a>
116+
}
117+
</td>
118+
<td class="col-num">{{ c.authoredPathways }}</td>
119+
<td class="col-num">{{ c.reviewedPathways }}</td>
120+
<td class="col-num">{{ c.authoredReactions }}</td>
121+
<td class="col-num">{{ c.reviewedReactions }}</td>
122+
</tr>
123+
}
124+
</tbody>
125+
</table>
126+
</div>
127+
128+
@if (maxPage > 1) {
129+
<div class="pagination">
130+
<button class="page-btn" [disabled]="currentPage <= 1" (click)="prevPage()">
131+
<span class="material-symbols-rounded">chevron_left</span>
132+
Previous
133+
</button>
134+
<span class="page-info">Page {{ currentPage }} of {{ maxPage }}</span>
135+
<button class="page-btn" [disabled]="currentPage >= maxPage" (click)="nextPage()">
136+
Next
137+
<span class="material-symbols-rounded">chevron_right</span>
138+
</button>
139+
</div>
140+
}
141+
}
142+
}
143+
</article>
144+
</app-page-layout>

0 commit comments

Comments
 (0)