Commit 42d35dd6 authored by Rajkumar-D's avatar Rajkumar-D
Browse files

Dashboard releated changes

parent 5f8ca461
......@@ -5,35 +5,69 @@
.container{
padding: 10px 0px 0px 0px;
}
.cardTitle{
font-weight: 550;
font-size: 16px;
text-align: center;
color: #00000080;
}
.cardSubTitle{
font-style: italic;
text-align: left;
font-size: 12px;
}
.cat-element span{
display: inline-block;
text-align: center;
width: 140px;
vertical-align: top;
width: 280px;
vertical-align: middle;
cursor: pointer;
height: 100px;
padding-top: 13px;
height: 60px;
}
.cat-column1{
float: left;
width: 55%;
}
.cat-column2{
float: left;
width: 45%;
}
.cat-element span p{
margin-top: -10px;
height: 15px;
padding-top: 14px;
padding-left: 60px;
text-align: left;
}
.cat-element span mat-icon{
font-size: 50px;
padding-right: 50px;
margin-right: 10px;
margin-top: 5PX;
}
.cat-column span mat-icon{
font-size: 50px;
margin-right: 10px;
}
span:hover {
background-color: rgba(180, 180, 180, 0.164);
}
mat-card{
margin:10px;
}
mat-card{
margin:30px;
}
.mat-card-css{
background: #f5f5f5;
padding:30px !important;
width:45%;
}
.metadataImage{
width: 100%;
text-align: right;
}
mat-card-subtitle{
......@@ -43,4 +77,72 @@ span:hover {
.category{
text-align: left;
}
.dashboard-welcome-card {
width: 55%;
margin-right:15px;
background: none;
padding: 0 !important;
}
.dashboard-image-card{
width: 35%;
margin-bottom: 0px;
background: none;
}
.note_add, .insert_chart{
float: left;
}
.dashboard-content{
padding-left: 5%;
padding-right: 5%;
}
.icon-yellow{
color: #ffbe1b;
}
.icon-green{
color: #71ab46;
}
.icon-blue{
color: #487daf;
}
.icon-gray{
color: #aeabab;
}
.icon-safron{
color: #ef8a43;
}
@media screen and (max-width: 980px) {
.mat-card-css{
background: #f5f5f5;
width:100%;
overflow: auto;
}
.dashboard-welcome-card {
width: 100%;
margin-right:15px;
background: none;
padding: 0 !important;
}
.dashboard-image-card{
width: 100%;
margin-bottom: 0px;
}
.cat-column1{
width: 100%;
}
.cat-column2{
float: left;
width: 100%;
}
}
\ No newline at end of file
......@@ -3,174 +3,230 @@
<mat-divider></mat-divider>
<div fxLayout="row wrap" fxLayoutGap="10px" fxLayoutAlign="center end">
<!-- <ng-container *ngIf="!isEga()">
<mat-card class="mat-card-css">
<mat-card-subtitle>
Account Management
</mat-card-subtitle>
<div class="cat-element">
<span [routerLink]="['/accountInfo']">
<mat-icon class="account_box">account_box</mat-icon>
<p class="mat-small mat-caption">Edit Information</p>
</span>
</div>
</mat-card>
</ng-container> -->
<ng-container>
<mat-card class="mat-card-css">
<mat-card-subtitle> Metadata Registration </mat-card-subtitle>
<div class="cat-element">
<span [routerLink]="['/study']">
<mat-icon class=note_add>add_box</mat-icon>
<p class="mat-small mat-caption">Register Study (Project)</p>
</span>
<span *ngIf="isSuperUser()" [routerLink]="['/umbrella']">
<mat-icon class=note_add>add_box</mat-icon>
<p class="mat-small mat-caption">Register Umbrella Project</p>
</span>
<span [routerLink]="['/app-checklist','sample',true]">
<mat-icon class="note_add">add_box</mat-icon>
<p class="mat-small mat-caption">Register Samples</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/taxonomy']">
<mat-icon class="note_add">add_box</mat-icon>
<p class="mat-small mat-caption">Register Taxonomy</p>
</span>
<span *ngIf="isEga()" [routerLink]="['/dac']">
<mat-icon class="note_add">add_box</mat-icon>
<p class="mat-small mat-caption">Register Dacs</p>
</span>
<span *ngIf="isEga()" [routerLink]="['/dac-policy']">
<mat-icon class="note_add">add_box</mat-icon>
<p class="mat-small mat-caption">Register Policy</p>
</span>
<span *ngIf="isEga()" [routerLink]="['/dac-dataset']">
<mat-icon class="note_add">add_box</mat-icon>
<p class="mat-small mat-caption">Register Dataset</p>
</span>
</div>
</mat-card>
</ng-container>
<ng-container>
<mat-card class="mat-card-css">
<mat-card-subtitle> Data Submission </mat-card-subtitle>
<div class="cat-element">
<span [routerLink]="['/app-submit']">
<mat-icon class="note_add">note_add</mat-icon>
<p class="mat-small mat-caption">Submit XML</p>
</span>
<span [routerLink]="['/read-submission']">
<mat-icon class="note_add">note_add</mat-icon>
<p class="mat-small mat-caption">Submit Reads</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/app-checklist','sequence',true]">
<mat-icon class="note_add">note_add</mat-icon>
<p class="mat-small mat-caption">Create Annotated Sequence Spreadsheet</p>
</span>
<div class="dashboard-content">
<div fxLayout="row wrap" fxLayoutGap="30px" fxLayoutAlign="start start">
<mat-card class="dashboard-welcome-card mat-elevation-z0">
<mat-card-title>Welcome to the Webin Submissions Portal</mat-card-title>
<div>
<mat-card-subtitle *ngIf="!isEga()" style="text-align: left;">
<p>You can use this service for a range of submission activities as well as reports
on your submissions. For help with submitting your data, including the use of
this interface, please refer to our <a href="https://ena-docs.readthedocs.io/en/latest/index.html">Help
Guides. </a>. Please familiarise yourself with
the different submission interfaces and what can be submitted through each by
reading our <a href="https://ena-docs.readthedocs.io/en/latest/submit/general-guide.html">General Guide on
ENA Data
Submission.</a>. All users are advised to take a
moment to understand the <a
href="https://ena-docs.readthedocs.io/en/latest/submit/general-guide/metadata.html">ENA Metadata
Model.</a> You may also like to review how the release
of data is managed in our <a href="https://ena-docs.readthedocs.io/en/latest/faq/release.html">Data
Release
FAQ.</a></p>
<p>A dedicated submission API for COVID-19 genomes is available <a
href="https://www.ebi.ac.uk/ena/submit/webin-cli">here.</a> </p>
</mat-card-subtitle>
<mat-card-subtitle *ngIf="isEga()" style="text-align: left;">
<p>You can use this service for a range of submission activities as well as reports
on your submissions. </p>
</mat-card-subtitle>
</div>
</mat-card>
</ng-container>
<ng-container *ngIf="!isEga()">
<!-- <mat-card>
<mat-card-subtitle>Spreadsheet Templates</mat-card-subtitle>
<div class="cat-element">
<span [routerLink]="['/app-checklist','sample',true]">
<mat-icon class="system_update_alt">system_update_alt</mat-icon>
<p class="mat-small mat-caption">Register samples</p>
</span>
<span [routerLink]="['/app-checklist','sequence',true]">
<mat-icon class="system_update_alt">system_update_alt</mat-icon>
<p class="mat-small mat-caption">Submit annotated Sequences</p>
</span>
</div>
</mat-card> -->
</ng-container>
</div>
<!-------------------------Reports------------------------->
<div>
<div class="category" style="padding-left: 10%;padding-right: 10%;">
<mat-card class="mat-card-css">
<mat-card-subtitle>Reports</mat-card-subtitle>
<div class="cat-element">
<span [routerLink]="['/report',ReportType.studies,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Studies Report</p>
</span>
<span *ngIf="isSuperUser()" [routerLink]="['/report',ReportType.umbrellaProjects,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Umbrella Project Report</p>
</span>
<span [routerLink]="['/report',ReportType.samples,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Samples Report</p>
</span>
<span [routerLink]="['/report',ReportType.analyses,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Analyses Report</p>
</span>
<ng-container *ngIf="!isEga()">
<span [routerLink]="['/report',ReportType.analysisFiles,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Analysis File Report</p>
</span>
<span [routerLink]="['/report',ReportType.analysisProcess,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Analysis Processing Report</p>
</span>
</ng-container>
<span [routerLink]="['/report',ReportType.runs,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Runs Report</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/report',ReportType.runFiles,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Run Files Report</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/report',ReportType.runProcess,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Run Processing Report</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/report',ReportType.unsubmittedFiles,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Unsubmitted Files Report</p>
</span>
<ng-container *ngIf="isEga()">
<span [routerLink]="['/report',ReportType.dacs,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Dacs Report</p>
</span>
<span [routerLink]="['/report',ReportType.policies,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Policies Report</p>
</span>
<span [routerLink]="['/report',ReportType.datasets,{defaultSearch: true}]">
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Datasets Report</p>
</span>
</ng-container>
<mat-card class="dashboard-image-card mat-elevation-z0">
<div class="metadataImage" routerLink="">
<img *ngIf="isEga()" src="assets/ega_metadata_model_lite.png" alt="ENA Logo">
<img *ngIf="!isEga()" src="assets/ena_metadata_model_lite.png" alt="ENA Logo">
</div>
</mat-card>
</div>
</div>
\ No newline at end of file
<ng-container>
<mat-card class="mat-elevation-z8 mat-card-css">
<mat-card-title class="cardTitle"> Studies (Projects) </mat-card-title>
<div class="cat-element">
<div class="cat-column1">
<span *ngIf="isSuperUser()" [routerLink]="['/umbrella']">
<mat-icon class="note_add icon-yellow">add_box</mat-icon>
<p class="mat-small mat-caption">Register Umbrella Project</p>
</span>
<span [routerLink]="['/study']">
<mat-icon class="note_add icon-yellow">add_box</mat-icon>
<p class="mat-small mat-caption">Register Study</p>
</span>
<span [routerLink]="['/app-submit']">
<mat-icon class="note_add icon-yellow">add_box</mat-icon>
<p class="mat-small mat-caption">Submit XMLs (advanced)</p>
</span>
</div>
<div class="cat-column2">
<span [routerLink]="['/report',ReportType.studies,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-yellow">insert_chart</mat-icon>
<p class="mat-small mat-caption">Studies Report</p>
</span>
</div>
</div>
</mat-card>
</ng-container>
<ng-container>
<mat-card class="mat-elevation-z8 mat-card-css">
<mat-card-title class="cardTitle"> Samples </mat-card-title>
<div class="cat-element">
<div class="cat-column1">
<span [routerLink]="['/app-checklist','sample',true]">
<mat-icon class="note_add icon-green">add_box</mat-icon>
<p class="mat-small mat-caption">Register Samples</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/taxonomy']">
<mat-icon class="note_add icon-green">add_box</mat-icon>
<p class="mat-small mat-caption">Register Novel Taxonomy</p>
</span>
<span [routerLink]="['/app-submit']">
<mat-icon class="note_add icon-green">add_box</mat-icon>
<p class="mat-small mat-caption">Submit XMLs (advanced)</p>
</span>
</div>
<div class="cat-column2">
<span [routerLink]="['/report',ReportType.samples,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-green">insert_chart</mat-icon>
<p class="mat-small mat-caption">Samples Report</p>
</span>
</div>
</div>
</mat-card>
</ng-container>
<!-- EGA links-->
<ng-container *ngIf="isEga()">
<mat-card class="mat-elevation-z8 mat-card-css">
<mat-card-title class="cardTitle"> Data Access </mat-card-title>
<div class="cat-element">
<div class="cat-column1">
<span [routerLink]="['/dac']">
<mat-icon class="note_add icon-gray">add_box</mat-icon>
<p class="mat-small mat-caption">Register Dacs</p>
</span>
<span [routerLink]="['/dac-policy']">
<mat-icon class="note_add icon-gray">add_box</mat-icon>
<p class="mat-small mat-caption">Register Policy</p>
</span>
<span [routerLink]="['/dac-dataset']">
<mat-icon class="note_add icon-gray">add_box</mat-icon>
<p class="mat-small mat-caption">Register Dataset</p>
</span>
<span [routerLink]="['/app-submit']">
<mat-icon class="note_add icon-gray">add_box</mat-icon>
<p class="mat-small mat-caption">Submit XMLs (advanced)</p>
</span>
</div>
<div class="cat-column2">
<span [routerLink]="['/report',ReportType.dacs,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-gray">insert_chart</mat-icon>
<p class="mat-small mat-caption">Dacs Report</p>
</span>
<span [routerLink]="['/report',ReportType.policies,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-gray">insert_chart</mat-icon>
<p class="mat-small mat-caption">Policies Report</p>
</span>
<span [routerLink]="['/report',ReportType.datasets,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-gray">insert_chart</mat-icon>
<p class="mat-small mat-caption">Datasets Report</p>
</span>
</div>
</div>
</mat-card>
</ng-container>
<ng-container>
<mat-card class="mat-elevation-z8 mat-card-css">
<mat-card-title class="cardTitle"> Raw Reads (Experiments and Runs)</mat-card-title>
<mat-card-subtitle class="cardSubTitle">Raw reads can also be submitted using <a
href="https://ena-docs.readthedocs.io/en/latest/reads/webin-cli.html">Webin-CLI</a>.</mat-card-subtitle>
<div class="cat-element">
<div class="cat-column1">
<span [routerLink]="['/read-submission']">
<mat-icon class="note_add icon-safron">add_box</mat-icon>
<p class="mat-small mat-caption">Submit Reads</p>
</span>
<span [routerLink]="['/app-submit']">
<mat-icon class="note_add icon-safron">add_box</mat-icon>
<p class="mat-small mat-caption">Submit XMLs (advanced)</p>
</span>
</div>
<div class="cat-column2">
<span [routerLink]="['/report',ReportType.runs,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-safron">insert_chart</mat-icon>
<p class="mat-small mat-caption">Runs Report</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/report',ReportType.runFiles,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-safron">insert_chart</mat-icon>
<p class="mat-small mat-caption">Run Files Report</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/report',ReportType.runProcess,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-safron">insert_chart</mat-icon>
<p class="mat-small mat-caption">Run Processing Report</p>
</span>
<span *ngIf="!isEga()" [routerLink]="['/report',ReportType.unsubmittedFiles,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-safron">insert_chart</mat-icon>
<p class="mat-small mat-caption">Unsubmitted files report
</p>
</span>
</div>
</div>
</mat-card>
</ng-container>
<ng-container>
<mat-card *ngIf="!isEga()" class="mat-elevation-z8 mat-card-css">
<mat-card-title class="cardTitle"> Data Analyses</mat-card-title>
<mat-card-subtitle class="cardSubTitle">Assemblies and annotated sequences must be submitted with <a
href="https://ena-docs.readthedocs.io/en/latest/reads/webin-cli.html">Webin-CLI</a>. Other analyses can be
submitted as XMLs.
</mat-card-subtitle>
<div class="cat-element">
<div class="cat-element">
<div class="cat-column1">
<span [routerLink]="['/app-checklist','sequence',true]">
<mat-icon class="note_add icon-blue">add_box</mat-icon>
<p class="mat-small mat-caption">Generate Annotated Sequence Spreadsheet</p>
</span>
<span [routerLink]="['/app-submit']">
<mat-icon class="note_add icon-blue">add_box</mat-icon>
<p class="mat-small mat-caption">Submit XMLs (advanced)</p>
</span>
</div>
<div class="cat-column2">
<span [routerLink]="['/report',ReportType.analyses,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-blue">insert_chart</mat-icon>
<p class="mat-small mat-caption">Analyses Report</p>
</span>
<ng-container *ngIf="!isEga()">
<span [routerLink]="['/report',ReportType.analysisFiles,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-blue">insert_chart</mat-icon>
<p class="mat-small mat-caption">Analysis File Report</p>
</span>
<span [routerLink]="['/report',ReportType.analysisProcess,{defaultSearch: true}]">
<mat-icon class="insert_chart icon-blue">insert_chart</mat-icon>
<p class="mat-small mat-caption">Analysis Processing Report</p>
</span>
</ng-container>
</div>
</div>
</div>
</mat-card>
</ng-container>
</div>
\ No newline at end of file
......@@ -21,7 +21,7 @@
.mat-toolbar.mat-primary {
background: #39a2a7c4;
background: #70bdbd;
color: white;
}
......
<form (ngSubmit)="login()" autocomplete="off">
<div fxLayout="row" fxLayoutAlign="left center" class="login-card-container">
<mat-card class="welcome-card mat-elevation-z0">
<mat-card-title>Welcome to the Webin submission service.</mat-card-title>
<mat-card-title>Welcome to the Webin submission Portal.</mat-card-title>
<div>
<mat-card-subtitle style="text-align: left;">
<p>To submit human data requiring controlled access please log in using EGA credentials.</p>
<p>You can use this service to submit sequence reads and to register metadata such as studies (projects) and
samples. A dedicated submission API for COVID-19 genomes is available <a
href="https://www.ebi.ac.uk/ena/submit/webin-cli">here.</a> Reads, genomes, transcriptomes and annotated
sequences can be submitted to ENA using <a
href="https://ena-docs.readthedocs.io/en/latest/reads/webin-cli.html">Webin-CLI</a>. Full details of all
Webin submission services are
available <a
href="https://ena-docs.readthedocs.io/en/latest/submit/general-guide.html#submission-services">here.</a>
</p>
<p>You can use this service for a range of submission activities as well as reports
on your submissions.</p>
<p>A dedicated submission API for COVID-19 genomes is available <a
href="https://www.ebi.ac.uk/ena/submit/webin-cli">here.</a> </p>
<p>New to Webin? Please register using the Register button.</p>
</mat-card-subtitle>
</div>
</mat-card>
......
......@@ -10,78 +10,101 @@
<mat-icon style="padding-right: 35px;">dashboard</mat-icon>
<a class="full-width-dashboard">Dashboard</a>
</mat-list-item>
<mat-list-item *ngIf="!isEga()" class="parent" [ngStyle]="{'pointer-events':'none'}">
<!--<mat-list-item *ngIf="!isEga()" class="parent" [ngStyle]="{'pointer-events':'none'}">
<mat-icon style="padding-right: 35px;">account_box</mat-icon>
<span class="full-width">Account Management</span>
</mat-list-item>
<div *ngIf="!isEga()" class="submenu" [ngClass]="{'expanded' : showSubmenu}">
<a mat-list-item routerLink="/accountInfo" (click)="snav.toggle()">Edit Information</a>
</div>
</div>-->
<mat-list-item class="parent" [ngStyle]="{'pointer-events':'none'}">
<mat-icon style="padding-right: 35px;">add_box</mat-icon>
<span class="full-width">Metadata Registration</span>
<span class="full-width">Studies (Projects)</span>
</mat-list-item>