Skip to content

Commit 9ba61cf

Browse files
el-rabiesel-rabies
committed
feat: Added Search Result Type Icons
1 parent 0637616 commit 9ba61cf

File tree

4 files changed

+284
-5
lines changed

4 files changed

+284
-5
lines changed

‎projects/website-angular/src/app/search/search.component.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
281281
@for (entry of group.entries; track entry.dbId) {
282282
<div class="search-entry">
283283
<div class="type-icon">
284-
TODO: Add type icons
284+
<i [class]="getSpriteClass(entry)" title="Icon"></i>
285285
</div>
286286
<div class="entry-info">
287287
<div class="entry-header">
@@ -342,7 +342,6 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
342342
Reference: <a [href]="entry.referenceURL" target="_blank" rel="noopener"><span [innerHTML]="entry.referenceName ?? entry.databaseName"></span> ({{ entry.referenceIdentifier }})</a>
343343
</div>
344344
}
345-
<button (click)="printEntry(entry)">O</button>
346345
</div>
347346
@if (entry.exactType == "Icon") {
348347
<div class="icon-preview">

‎projects/website-angular/src/app/search/search.component.scss‎

Lines changed: 268 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,9 +244,276 @@ $border-radius: 8px;
244244
}
245245

246246
.type-icon {
247-
width: 10px;
247+
align-self: flex-start;
248+
padding: 4px;
248249
}
249250

251+
/** START - Sprite base configuration **/
252+
.sprite {
253+
background: url('/assets/spritesheet.png') no-repeat;
254+
display: inline-block;
255+
}
256+
257+
.sprite-resize {
258+
zoom: .75;
259+
transform: scale(.75);
260+
-moz-transform: scale(.75);
261+
}
262+
263+
.sprite-resize-small {
264+
zoom: .6;
265+
transform: scale(.6);
266+
-moz-transform: scale(.6);
267+
}
268+
269+
.sprite-position {
270+
vertical-align: middle;
271+
padding: 2px;
272+
}
273+
/** END - Sprite base configuration **/
274+
275+
/** PASTE NEW CSS HERE **/
276+
.sprite-BlackBoxEvent {
277+
width: 16px;
278+
height: 16px;
279+
background-position: -5px -5px;
280+
}
281+
282+
.sprite-CandidateSet {
283+
width: 16px;
284+
height: 16px;
285+
background-position: -31px -5px;
286+
}
287+
288+
.sprite-Cell {
289+
width: 16px;
290+
height: 16px;
291+
background-position: -57px -5px;
292+
}
293+
294+
.sprite-CellDevelopmentStep {
295+
width: 16px;
296+
height: 16px;
297+
background-position: -83px -5px;
298+
}
299+
300+
.sprite-CellLineagePath {
301+
width: 16px;
302+
height: 16px;
303+
background-position: -109px -5px;
304+
}
305+
306+
.sprite-ChemicalDrug {
307+
width: 16px;
308+
height: 16px;
309+
background-position: -135px -5px;
310+
}
311+
312+
.sprite-Complex {
313+
width: 16px;
314+
height: 16px;
315+
background-position: -161px -5px;
316+
}
317+
318+
.sprite-ConceptualEvent {
319+
width: 16px;
320+
height: 16px;
321+
background-position: -187px -5px;
322+
}
323+
324+
.sprite-DefinedSet {
325+
width: 16px;
326+
height: 16px;
327+
background-position: -213px -5px;
328+
}
329+
330+
.sprite-Depolymerization {
331+
width: 16px;
332+
height: 16px;
333+
background-position: -239px -5px;
334+
}
335+
336+
.sprite-EntitySet {
337+
width: 16px;
338+
height: 16px;
339+
background-position: -265px -5px;
340+
}
341+
342+
.sprite-EntityWithAccessionedSequence {
343+
width: 16px;
344+
height: 16px;
345+
background-position: -291px -5px;
346+
}
347+
348+
.sprite-EquivalentEventSet {
349+
width: 16px;
350+
height: 16px;
351+
background-position: -317px -5px;
352+
}
353+
354+
.sprite-FailedReaction {
355+
width: 16px;
356+
height: 16px;
357+
background-position: -343px -5px;
358+
}
359+
360+
.sprite-GenomeEncodedEntity {
361+
width: 16px;
362+
height: 16px;
363+
background-position: -369px -5px;
364+
}
365+
366+
.sprite-Icon {
367+
width: 16px;
368+
height: 16px;
369+
background-position: -395px -5px;
370+
}
371+
372+
.sprite-Interactor {
373+
width: 16px;
374+
height: 16px;
375+
background-position: -421px -5px;
376+
}
377+
378+
.sprite-NegativeRegulation {
379+
width: 16px;
380+
height: 16px;
381+
background-position: -447px -5px;
382+
}
383+
384+
.sprite-OpenSet {
385+
width: 16px;
386+
height: 16px;
387+
background-position: -473px -5px;
388+
}
389+
390+
.sprite-OtherEntity {
391+
width: 16px;
392+
height: 16px;
393+
background-position: -499px -5px;
394+
}
395+
396+
.sprite-Pathway {
397+
width: 16px;
398+
height: 16px;
399+
background-position: -525px -5px;
400+
}
401+
402+
.sprite-Person {
403+
width: 16px;
404+
height: 16px;
405+
background-position: -551px -5px;
406+
}
407+
408+
.sprite-Polymer {
409+
width: 16px;
410+
height: 16px;
411+
background-position: -577px -5px;
412+
}
413+
414+
.sprite-Polymerisation {
415+
width: 16px;
416+
height: 16px;
417+
background-position: -603px -5px;
418+
}
419+
420+
.sprite-PositiveRegulation {
421+
width: 16px;
422+
height: 16px;
423+
background-position: -629px -5px;
424+
}
425+
426+
.sprite-ProteinDrug {
427+
width: 16px;
428+
height: 16px;
429+
background-position: -655px -5px;
430+
}
431+
432+
.sprite-Reaction {
433+
width: 16px;
434+
height: 16px;
435+
background-position: -681px -5px;
436+
}
437+
438+
.sprite-ReferenceDNASequence {
439+
width: 16px;
440+
height: 16px;
441+
background-position: -707px -5px;
442+
}
443+
444+
.sprite-ReferenceGeneProduct {
445+
width: 16px;
446+
height: 16px;
447+
background-position: -733px -5px;
448+
}
449+
450+
.sprite-ReferenceGroup {
451+
width: 16px;
452+
height: 16px;
453+
background-position: -759px -5px;
454+
}
455+
456+
.sprite-ReferenceIsoform {
457+
width: 16px;
458+
height: 16px;
459+
background-position: -785px -5px;
460+
}
461+
462+
.sprite-ReferenceMolecule {
463+
width: 16px;
464+
height: 16px;
465+
background-position: -811px -5px;
466+
}
467+
468+
.sprite-ReferenceRNASequence {
469+
width: 16px;
470+
height: 16px;
471+
background-position: -837px -5px;
472+
}
473+
474+
.sprite-Requirement {
475+
width: 16px;
476+
height: 16px;
477+
background-position: -863px -5px;
478+
}
479+
480+
.sprite-SimpleEntity {
481+
width: 16px;
482+
height: 16px;
483+
background-position: -889px -5px;
484+
}
485+
486+
.sprite-TopLevelPathway {
487+
width: 16px;
488+
height: 16px;
489+
background-position: -915px -5px;
490+
}
491+
492+
.sprite-deleted {
493+
width: 20px;
494+
height: 20px;
495+
background-position: -941px -5px;
496+
}
497+
498+
.sprite-isDisease {
499+
width: 10px;
500+
height: 16px;
501+
background-position: -971px -5px;
502+
}
503+
504+
.sprite-minus {
505+
width: 21px;
506+
height: 20px;
507+
background-position: -991px -5px;
508+
}
509+
510+
.sprite-plus {
511+
width: 20px;
512+
height: 20px;
513+
background-position: -1022px -5px;
514+
}
515+
516+
250517
.search-entry {
251518
display: flex;
252519
flex-direction: row;

‎projects/website-angular/src/app/search/search.component.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -258,8 +258,21 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
258258
return of(null);
259259
}
260260

261-
printEntry(entry: SearchEntry): void {
262-
console.log('Entry details:', entry);
261+
getSpriteClass(entry: SearchEntry): string {
262+
const reactionSubtypes = new Set([
263+
'association',
264+
'binding',
265+
'dissociation',
266+
'omitted',
267+
'transition',
268+
'uncertain',
269+
'depolymerisation',
270+
'polymerisation'
271+
]);
272+
273+
const rawType = (entry.exactType || entry.type || '').trim();
274+
const spriteType = reactionSubtypes.has(rawType.toLowerCase()) ? 'Reaction' : (rawType || 'Pathway');
275+
return `sprite sprite-resize sprite-${spriteType}`;
263276
}
264277

265278
iconSvgUrl(entry: SearchEntry): string {

‎projects/website-angular/src/assets/spritesheet.png‎

7.83 KB
Loading

0 commit comments

Comments
 (0)