🔀 Merge pull request #20 from cnr-ibba/devel

✨ add about page

src/app/about/about.component.html

@@ -0,0 +1,119 @@
+<h1 class="free-text">About the SMARTER database</h1>
+
+<div flex fxLayout="row" fxLayoutAlign="center center">
+  <div fxFlex="90">
+
+    <p>
+      The SMARTER project site is a place where WP4 partners of the
+      <a href="https://www.smarterproject.eu/">Smarter project</a>
+      can browse and access their data.
+    </p>
+
+    <h2>The SMARTER project</h2>
+
+    <p>
+      Small ruminant populations play a fundamental role for the livelihood and
+      socio-economic well-being of human settlements, especially in marginal areas
+      of Europe. Under-utilized sheep and goat breeds may be highly valuable in
+      increasing the profitability of small ruminant farming in such marginal areas.
+      These breeds are valuable because they have peculiar and often atypical
+      genetic make-up which make them a potentially extraordinary resource to
+      be exploited for adaptation to (harsh) environments, resilience to farming
+      conditions, resistance to biotic and abiotic stressors, and the production
+      of quality of products of animal origin.
+    </p>
+
+    <p>
+      In this particular context, WP4 aims to address knowledge gaps concerning
+      genetic diversity in goats and sheep. Its objective is to identify genetic
+      factors that contribute to their ability to adapt to climate conditions and,
+      more broadly, to withstand environmental disturbances.
+      Available datasets relevant to the genomic characterization
+      were identified and furthermore comprehensive data on hardy and under-utilized
+      breeds were collected, including genotypes, phenotypes, and environmental
+      measurements associated with rearing conditions.
+      To ensure consistency, the recording of this data was standardized: genotypes
+      were converted to the same genome version and coding convention.
+      Finally, a shared database was established, consolidating
+      the wealth of knowledge on genetic variation in small ruminants,
+      as a culmination of the project's efforts.
+    </p>
+
+    <p>
+      Data are made available to the community using three different instruments:
+    </p>
+
+      <ul>
+        <li>
+          The <a href="https://github.com/cnr-ibba/SMARTER-database">SMARTER-database</a>,
+          which is a collection of tools and scripts to collect, standardize and provide
+          to the community a collection of genotype data and metadata information
+          in hardy goat and sheep populations by combining new with already existing datasets.
+          This project is better explained and documented in its
+          <a href="https://smarter-database.readthedocs.io/en/latest/index.html">manual pages</a>.
+        </li>
+        <li>
+          The <a href="https://github.com/cnr-ibba/SMARTER-backend">SMARTER-backend</a>,
+          which is a REST API service developed on top of the <em>SMARTER-database</em>
+          which provide methods to interact and access with SMARTER data using web resources.
+          By using <em>SMARTER-backend</em>, you can develop softwares or scripts which get
+          access to SMARTER data through web, without have a local instance
+          of the <em>SMARTER-database</em>. An example of this is the
+          <a href="https://github.com/cnr-ibba/r-smarter-api">smarterapi R package</a>,
+          which allow to collect SMARTER data using the <em>SMARTER-backend</em>. More
+          information can be found in the
+          <a href="https://smarter-backend.readthedocs.io/en/latest/index.html">SMARTER-backend documentation</a>
+          and <a href="https://cnr-ibba.github.io/r-smarter-api/index.html">smarterapi manual pages</a>.
+        </li>
+        <li>
+          The <a href="https://github.com/cnr-ibba/SMARTER-frontend">SMARTER-frontend</a>
+          (<a routerLink="/">this site</a>), which is a web interface to browse <em>SMARTER-database</em>
+          data relying on <em>SMARTER-backend</em>.
+        </li>
+      </ul>
+
+      <p>
+        Those instrument can be used to collect metadata and other samples information: genotypes
+        are available for both <em>Goat and Sheep species</em> as a whole PLINK binary file for each
+        of the supported assemblies. Users are required to identify their samples of interest and then
+        subset the genotype files according their needs. Additional filtering steps
+        on the selected genotypes can be done to get rid of missing samples or variants.
+      </p>
+
+    <h2>About this site</h2>
+
+    <p>
+      You can browse WP4 SMARTER using the different tabs. Data like samples, variants
+      and breed can be browsed by <em>species</em> (Goat, Sheep): you will find
+      a button on the top of the page which will select the data you can browse.
+      Data like datasets are available in the same page for both species. Here's
+      a list of the site sections:
+    </p>
+
+    <ul>
+      <li>
+        <a routerLink="/breeds">Breeds</a>: navigate data by breeds, you can
+        search for a specific breed or get general information about how many samples
+        belong to the same breed. You can follow the links to retrieve all samples
+        of a particular breed.
+      </li>
+      <li>
+        <a routerLink="/datasets">Datasets</a>: navigate data by datasets, browse
+        data relying on the files submitted by the partners or by file content. For
+        a <em>genotypes</em> dataset you can follow the links a retrieve all samples
+        belonging to the same dataset.
+      </li>
+      <li>
+        <a routerLink="/samples">Samples</a>: navigate samples by species.
+        You can filter out samples by filling the form fields.
+      </li>
+      <li>
+        <a routerLink="/variants">Variants</a>: navigate the variants used
+        to normalize the genotype files and collect information about their positions
+        and genotype codings. You can browse variants by species and
+        by assembly versions, and filter out variants by filling the form fields.
+      </li>
+    </ul>
+
+  </div>
+</div>

src/app/about/about.component.scss

@@ -0,0 +1,5 @@
+
+p {
+  text-align:justify;
+  text-justify:inter-word;
+}

src/app/about/about.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/about/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/app-routing.module.ts

@@ -1,8 +1,9 @@
-import { NgModule } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { AuthGuard } from './auth/auth.guard';
 import { HomeComponent } from './home/home.component';
+import { AboutComponent } from './about/about.component';
 import { LoginComponent } from './auth/login/login.component';
 import { DatasetsComponent } from './datasets/datasets.component';
 import { DatasetDetailComponent } from './datasets/dataset-detail/dataset-detail.component';
@@ -19,6 +20,7 @@ import { VariantResolver } from './variants/variant-detail/variant-resolver.serv
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
+  { path: 'about', component: AboutComponent },
   { path: 'login', component: LoginComponent },
   {
     path: 'breeds',

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { SampleMetadataComponent } from './samples/sample-detail/sample-metadata
 import { VariantsComponent } from './variants/variants.component';
 import { VariantDetailComponent } from './variants/variant-detail/variant-detail.component';
 import { TextToColumnPipe } from './shared/text-to-column.pipe';
+import { AboutComponent } from './about/about.component';
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { TextToColumnPipe } from './shared/text-to-column.pipe';
     VariantsComponent,
     VariantDetailComponent,
     TextToColumnPipe,
+    AboutComponent,
   ],
   imports: [
     BrowserModule,

src/app/navigation/header/header.component.html

@@ -11,6 +11,9 @@
   </div>
   <div fxHide.xs fxFlex fxLayout fxLayoutAlign="flex-end">
     <ul fxLayout fxLayoutGap="10px" class="navigation-items">
+      <li>
+        <a routerLink="/about" routerLinkActive="active">About</a>
+      </li>
       <li>
         <a routerLink="/breeds" routerLinkActive="active">Breeds</a>
       </li>

src/app/navigation/sidenav-list/sidenav-list.component.html

@@ -3,6 +3,10 @@
     <mat-icon>home</mat-icon>
     <span class="nav-caption">Home</span>
   </a>
+  <a mat-list-item routerLink="/about" routerLinkActive="active" (click)="onClose()">
+    <mat-icon>info</mat-icon>
+    <span class="nav-caption">About</span>
+  </a>
   <a mat-list-item routerLink="/breeds" routerLinkActive="active" (click)="onClose()">
     <mat-icon>pets</mat-icon>
     <span class="nav-caption">Breeds</span>

src/app/samples/samples.component.html

@@ -13,7 +13,8 @@ <h1 class="free-text">
 <form
   [formGroup]="samplesForm"
   (ngSubmit)="onSubmit()">
-    <div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px">
+    <div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px grid">
+
       <mat-form-field>
         <input
           type="text"
@@ -88,6 +89,7 @@ <h1 class="free-text">
           </mat-autocomplete>
         <mat-error *ngIf="samplesForm.controls['country'].errors?.['noWhiteSpaces']">No white spaces around fields are allowed!</mat-error>
       </mat-form-field>
+
     </div>
 
     <div fxLayoutAlign="center center" fxLayoutGap="20px">

src/app/samples/samples.component.ts

@@ -265,19 +265,19 @@ export class SamplesComponent implements OnInit, AfterViewInit, OnDestroy {
   private _filterCountry(value: string): string[] {
     // console.log(this.samplesService.countries);
     const filterValue = value.toLowerCase();
-    return this.samplesService.countries.filter(country => country.toLowerCase().includes(filterValue));
+    return this.samplesService.countries.filter(country => country.toLowerCase().includes(filterValue)).sort();
   }
 
   private _filterBreed(value: string): string[] {
     // console.log(this.samplesService.breeds);
     const filterValue = value.toLowerCase();
-    return this.samplesService.breeds.filter(breed => breed.toLowerCase().includes(filterValue));
+    return this.samplesService.breeds.filter(breed => breed.toLowerCase().includes(filterValue)).sort();
   }
 
   private _filterCode(value: string): string[] {
     // console.log(this.samplesService.breed_codes);
     const filterValue = value.toLowerCase();
-    return this.samplesService.breed_codes.filter(code => code.toLowerCase().includes(filterValue));
+    return this.samplesService.breed_codes.filter(code => code.toLowerCase().includes(filterValue)).sort();
   }
 
   ngOnDestroy() {

src/app/variants/variants.component.html

@@ -12,8 +12,8 @@ <h1 class="free-text">
 <form
   [formGroup]="variantsForm"
   (ngSubmit)="onSubmit()">
-    <div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px">
-      <mat-form-field fxFlex="12%">
+    <div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px grid">
+      <mat-form-field>
         <input
           type="text"
           matInput
@@ -22,7 +22,7 @@ <h1 class="free-text">
         <mat-error *ngIf="variantsForm.controls['name'].errors?.['noWhiteSpaces']">No white spaces around fields are allowed!</mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="12%">
+      <mat-form-field>
         <input
           type="text"
           matInput
@@ -38,7 +38,7 @@ <h1 class="free-text">
         <mat-error *ngIf="variantsForm.controls['chip_name'].errors?.['noWhiteSpaces']">No white spaces around fields are allowed!</mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="12%">
+      <mat-form-field>
         <input
           type="text"
           matInput
@@ -47,7 +47,7 @@ <h1 class="free-text">
         <mat-error *ngIf="variantsForm.controls['rs_id'].errors?.['noWhiteSpaces']">No white spaces around fields are allowed!</mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="12%">
+      <mat-form-field>
         <input
           type="text"
           matInput
@@ -56,7 +56,7 @@ <h1 class="free-text">
         <mat-error *ngIf="variantsForm.controls['probeset_id'].errors?.['noWhiteSpaces']">No white spaces around fields are allowed!</mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="12%">
+      <mat-form-field>
         <input
           type="text"
           matInput

src/app/variants/variants.component.ts

@@ -298,7 +298,7 @@ export class VariantsComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     const filterValue = value.toLowerCase();
-    return this.variantsService.supportedChips.filter(chip => chip.toLowerCase().includes(filterValue));
+    return this.variantsService.supportedChips.filter(chip => chip.toLowerCase().includes(filterValue)).sort();
   }
 
   ngOnDestroy(): void {

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>SMARTERFrontend</title>
+  <title>SMARTER Database</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">