File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
goToURL
|
goToURL(url: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| url |
string
|
No
|
|
|
deepDives
|
Type : LinkCard[]
|
Default value : [
{
body: '',
buttonTitle: 'HRA Portal',
buttonUrl: 'https://humanatlas.io',
},
{
body: '',
buttonTitle: 'Online Course',
buttonUrl: 'https://expand.iu.edu/browse/sice/cns/courses/hubmap-visible-human-mooc',
},
{
body: '',
buttonTitle: 'Paper',
buttonUrl: 'https://www.nature.com/articles/s41556-021-00788-6',
},
]
|
|
|
|
linkCards
|
Type : LinkCard[]
|
Default value : [
{
body: 'Add tissue blocks using the HRA Registration User Interface (RUI).',
buttonTitle: 'Register Tissue',
buttonUrl: 'https://hubmapconsortium.github.io/ccf-ui/rui/',
},
{
body: 'Explore tissue sections in tissue blocks with the HRA Exploration User Interface (EUI).',
buttonTitle: 'Explore Tissue',
buttonUrl: 'https://portal.hubmapconsortium.org/ccf-eui',
},
{
body: 'View linkages between anatomical structures, cell types, and common biomarkers (ASCT+B).',
buttonTitle: 'ASCT+B Reporter',
buttonUrl: 'https://hubmapconsortium.github.io/ccf-asct-reporter/',
},
]
|
|
|
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
interface LinkCard {
body: string;
buttonTitle: string;
buttonUrl: string;
}
@Component({
selector: 'ccf-link-cards',
templateUrl: './link-cards.component.html',
styleUrls: ['./link-cards.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LinkCardsComponent implements OnInit {
@Input() ruiUrl!: string;
@Input() euiUrl!: string;
@Input() asctbUrl!: string;
@Input() hraPortalUrl!: string;
@Input() onlineCourseUrl!: string;
@Input() paperUrl!: string;
linkCards: LinkCard[] = [
{
body: 'Add tissue blocks using the HRA Registration User Interface (RUI).',
buttonTitle: 'Register Tissue',
buttonUrl: 'https://hubmapconsortium.github.io/ccf-ui/rui/',
},
{
body: 'Explore tissue sections in tissue blocks with the HRA Exploration User Interface (EUI).',
buttonTitle: 'Explore Tissue',
buttonUrl: 'https://portal.hubmapconsortium.org/ccf-eui',
},
{
body: 'View linkages between anatomical structures, cell types, and common biomarkers (ASCT+B).',
buttonTitle: 'ASCT+B Reporter',
buttonUrl: 'https://hubmapconsortium.github.io/ccf-asct-reporter/',
},
];
deepDives: LinkCard[] = [
{
body: '',
buttonTitle: 'HRA Portal',
buttonUrl: 'https://humanatlas.io',
},
{
body: '',
buttonTitle: 'Online Course',
buttonUrl: 'https://expand.iu.edu/browse/sice/cns/courses/hubmap-visible-human-mooc',
},
{
body: '',
buttonTitle: 'Paper',
buttonUrl: 'https://www.nature.com/articles/s41556-021-00788-6',
},
];
ngOnInit() {
const linkUrls = [this.ruiUrl, this.euiUrl, this.asctbUrl];
const deepDivesUrls = [this.hraPortalUrl, this.onlineCourseUrl, this.paperUrl];
this.linkCards = this.linkCards.map((card, index) => ({ ...card, buttonUrl: linkUrls[index] ?? card.buttonUrl }));
this.deepDives = this.deepDives.map((card, index) => ({
...card,
buttonUrl: deepDivesUrls[index] ?? card.buttonUrl,
}));
}
goToURL(url: string): void {
window.open(url, '_blank');
}
}
<div class="link-cards-container" gaCategory="link-cards">
<div class="link-card" *ngFor="let card of linkCards">
<div class="link-card-content">
<div class="body">{{ card.body }}</div>
<div class="link-button btn" gaEvent="visit-link" [gaLabel]="card.buttonUrl" (click)="goToURL(card.buttonUrl)">
{{ card.buttonTitle }}
</div>
</div>
</div>
</div>
<div class="deep-dive-section" gaCategory="deep-dive">
<div class="title">Human Reference Atlas (HRA) Deep Dive</div>
<div class="button-container">
<div
*ngFor="let button of deepDives"
class="btn-outline btn"
gaEvent="visit-link"
[gaLabel]="button.buttonUrl"
(click)="goToURL(button.buttonUrl)"
>
{{ button.buttonTitle }}
</div>
</div>
</div>
.link-cards-container {
max-width: 30rem;
.link-card {
border-top: 1px solid #e0e0e0;
padding-top: 1px;
padding-bottom: 1px;
&:last-of-type {
border-bottom: 1px solid #e0e0e0;
}
.link-card-content {
align-items: center;
padding: 1rem;
padding-right: 0rem;
display: flex;
flex-direction: row;
justify-content: space-between;
border-left: 6px solid #444a65;
.link-button {
margin-left: 2rem;
background-color: #444a65;
color: #ffffff;
&:hover {
background-color: #2f3346;
}
}
}
}
}
.deep-dive-section {
margin-top: 2rem;
.title {
margin-bottom: 1rem;
font-size: 1rem;
}
.button-container {
display: flex;
flex-direction: row;
.btn-outline {
color: #444a65;
border: 1px solid #444a65;
background-color: white;
&:not(:last-of-type) {
margin-right: 1rem;
}
&:hover {
background-color: #e0e0e0;
}
}
}
}
.btn {
min-width: 9rem !important;
max-height: 2.28125rem;
text-align: center;
white-space: nowrap;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
border-radius: 2px;
line-height: 2.75;
transition:
background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-family:
var(--ccf-ui-font, ''),
Inter,
Inter Variable,
Helvetica,
Arial,
sans-serif;
}
Legend
Html element with directive