@if (entry.species?.length) {
@for (sp of entry.species; track sp; let last = $last) {
- {{ sp }}
+
}
}
diff --git a/projects/website-angular/src/app/search/search.component.scss b/projects/website-angular/src/app/search/search.component.scss
index b512da3..d86b058 100644
--- a/projects/website-angular/src/app/search/search.component.scss
+++ b/projects/website-angular/src/app/search/search.component.scss
@@ -243,7 +243,282 @@ $border-radius: 8px;
margin-top: 16px;
}
+.type-icon {
+ align-self: flex-start;
+ padding: 4px;
+}
+
+/** START - Sprite base configuration **/
+.sprite {
+ background: url('/assets/spritesheet.png') no-repeat;
+ display: inline-block;
+}
+
+.sprite-resize {
+ zoom: .75;
+ transform: scale(.75);
+ -moz-transform: scale(.75);
+}
+
+.sprite-resize-small {
+ zoom: .6;
+ transform: scale(.6);
+ -moz-transform: scale(.6);
+}
+
+.sprite-position {
+ vertical-align: middle;
+ padding: 2px;
+}
+/** END - Sprite base configuration **/
+
+/** PASTE NEW CSS HERE **/
+.sprite-BlackBoxEvent {
+ width: 16px;
+ height: 16px;
+ background-position: -5px -5px;
+}
+
+.sprite-CandidateSet {
+ width: 16px;
+ height: 16px;
+ background-position: -31px -5px;
+}
+
+.sprite-Cell {
+ width: 16px;
+ height: 16px;
+ background-position: -57px -5px;
+}
+
+.sprite-CellDevelopmentStep {
+ width: 16px;
+ height: 16px;
+ background-position: -83px -5px;
+}
+
+.sprite-CellLineagePath {
+ width: 16px;
+ height: 16px;
+ background-position: -109px -5px;
+}
+
+.sprite-ChemicalDrug {
+ width: 16px;
+ height: 16px;
+ background-position: -135px -5px;
+}
+
+.sprite-Complex {
+ width: 16px;
+ height: 16px;
+ background-position: -161px -5px;
+}
+
+.sprite-ConceptualEvent {
+ width: 16px;
+ height: 16px;
+ background-position: -187px -5px;
+}
+
+.sprite-DefinedSet {
+ width: 16px;
+ height: 16px;
+ background-position: -213px -5px;
+}
+
+.sprite-Depolymerization {
+ width: 16px;
+ height: 16px;
+ background-position: -239px -5px;
+}
+
+.sprite-EntitySet {
+ width: 16px;
+ height: 16px;
+ background-position: -265px -5px;
+}
+
+.sprite-EntityWithAccessionedSequence {
+ width: 16px;
+ height: 16px;
+ background-position: -291px -5px;
+}
+
+.sprite-EquivalentEventSet {
+ width: 16px;
+ height: 16px;
+ background-position: -317px -5px;
+}
+
+.sprite-FailedReaction {
+ width: 16px;
+ height: 16px;
+ background-position: -343px -5px;
+}
+
+.sprite-GenomeEncodedEntity {
+ width: 16px;
+ height: 16px;
+ background-position: -369px -5px;
+}
+
+.sprite-Icon {
+ width: 16px;
+ height: 16px;
+ background-position: -395px -5px;
+}
+
+.sprite-Interactor {
+ width: 16px;
+ height: 16px;
+ background-position: -421px -5px;
+}
+
+.sprite-NegativeRegulation {
+ width: 16px;
+ height: 16px;
+ background-position: -447px -5px;
+}
+
+.sprite-OpenSet {
+ width: 16px;
+ height: 16px;
+ background-position: -473px -5px;
+}
+
+.sprite-OtherEntity {
+ width: 16px;
+ height: 16px;
+ background-position: -499px -5px;
+}
+
+.sprite-Pathway {
+ width: 16px;
+ height: 16px;
+ background-position: -525px -5px;
+}
+
+.sprite-Person {
+ width: 16px;
+ height: 16px;
+ background-position: -551px -5px;
+}
+
+.sprite-Polymer {
+ width: 16px;
+ height: 16px;
+ background-position: -577px -5px;
+}
+
+.sprite-Polymerisation {
+ width: 16px;
+ height: 16px;
+ background-position: -603px -5px;
+}
+
+.sprite-PositiveRegulation {
+ width: 16px;
+ height: 16px;
+ background-position: -629px -5px;
+}
+
+.sprite-ProteinDrug {
+ width: 16px;
+ height: 16px;
+ background-position: -655px -5px;
+}
+
+.sprite-Reaction {
+ width: 16px;
+ height: 16px;
+ background-position: -681px -5px;
+}
+
+.sprite-ReferenceDNASequence {
+ width: 16px;
+ height: 16px;
+ background-position: -707px -5px;
+}
+
+.sprite-ReferenceGeneProduct {
+ width: 16px;
+ height: 16px;
+ background-position: -733px -5px;
+}
+
+.sprite-ReferenceGroup {
+ width: 16px;
+ height: 16px;
+ background-position: -759px -5px;
+}
+
+.sprite-ReferenceIsoform {
+ width: 16px;
+ height: 16px;
+ background-position: -785px -5px;
+}
+
+.sprite-ReferenceMolecule {
+ width: 16px;
+ height: 16px;
+ background-position: -811px -5px;
+}
+
+.sprite-ReferenceRNASequence {
+ width: 16px;
+ height: 16px;
+ background-position: -837px -5px;
+}
+
+.sprite-Requirement {
+ width: 16px;
+ height: 16px;
+ background-position: -863px -5px;
+}
+
+.sprite-SimpleEntity {
+ width: 16px;
+ height: 16px;
+ background-position: -889px -5px;
+}
+
+.sprite-TopLevelPathway {
+ width: 16px;
+ height: 16px;
+ background-position: -915px -5px;
+}
+
+.sprite-deleted {
+ width: 20px;
+ height: 20px;
+ background-position: -941px -5px;
+}
+
+.sprite-isDisease {
+ width: 10px;
+ height: 16px;
+ background-position: -971px -5px;
+}
+
+.sprite-minus {
+ width: 21px;
+ height: 20px;
+ background-position: -991px -5px;
+}
+
+.sprite-plus {
+ width: 20px;
+ height: 20px;
+ background-position: -1022px -5px;
+}
+
+
.search-entry {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
padding: 12px 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
@@ -252,6 +527,10 @@ $border-radius: 8px;
}
}
+.entry-info {
+ flex: 1;
+}
+
.entry-header {
display: flex;
align-items: baseline;
diff --git a/projects/website-angular/src/app/search/search.component.ts b/projects/website-angular/src/app/search/search.component.ts
index 6d10fc0..3ebcc39 100644
--- a/projects/website-angular/src/app/search/search.component.ts
+++ b/projects/website-angular/src/app/search/search.component.ts
@@ -17,6 +17,7 @@ import {
} from '../../services/search.service';
import { DatePipe } from '@angular/common';
import { MatIcon } from "@angular/material/icon";
+import { IconEntry } from '../../services/icon.service';
@Component({
selector: 'app-search',
@@ -257,6 +258,27 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
return of(null);
}
+ getSpriteClass(entry: SearchEntry): string {
+ const reactionSubtypes = new Set([
+ 'association',
+ 'binding',
+ 'dissociation',
+ 'omitted',
+ 'transition',
+ 'uncertain',
+ 'depolymerisation',
+ 'polymerisation'
+ ]);
+
+ const rawType = (entry.exactType || entry.type || '').trim();
+ const spriteType = reactionSubtypes.has(rawType.toLowerCase()) ? 'Reaction' : (rawType || 'Pathway');
+ return `sprite sprite-resize sprite-${spriteType}`;
+ }
+
+ iconSvgUrl(entry: SearchEntry): string {
+ return `https://dev.reactome.org/icon/${entry.stId}.svg`;
+ }
+
get allEntries(): SearchEntry[] {
if (!this.results?.results) return [];
return this.results.results.flatMap(g => this.filterDeletedEntries(g.entries));
@@ -341,6 +363,9 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
}
getDetailLink(entry: SearchEntry): string {
+ //Remove HTML tags from entry.stId if present
+ entry.stId = entry.stId?.replace(/<[^>]*>/g, '');
+
if (entry.exactType === 'Interactor') return '/content/detail/interactor/' + entry.stId;
if (entry.exactType === 'Icon') return '/content/detail/icon/' + entry.stId;
return '/content/detail/' + entry.stId;
diff --git a/projects/website-angular/src/assets/spritesheet.png b/projects/website-angular/src/assets/spritesheet.png
new file mode 100644
index 0000000..f3a5838
Binary files /dev/null and b/projects/website-angular/src/assets/spritesheet.png differ