Add description, change dataset names

src/app/components/select-dataset/select-dataset.component.html

@@ -7,18 +7,14 @@
     </ng-template>
   </ng-select>
 
-  <div class="info" *ngIf="selectedDataset && selectedDataset.label === 'CoV2 (Gordon et al., 2020)'">
-    <p>Virus: <b>SARS-CoV-2</b></p>
-    <p>Host/target: <b>Human</b>, HEK-293T kidney cells</p>
-    <p>Method: <b>AP-MS</b></p>
-    <p>Source:<a href="https://www.biorxiv.org/content/10.1101/2020.03.22.002386v3" target="_blank"> <b> Gordon et al., 2020</b></a></p>
-  </div>
-
-  <div class="info" *ngIf="selectedDataset && selectedDataset.label === 'CoV1 (Pfefferle)'">
-    TODO: Put CoV1 (Pfefferle)
-  </div>
-
-  <div class="info" *ngIf="selectedDataset && selectedDataset.label === 'CoV1 (VirHostNet)'">
-    TODO: Put CoV1 (VirHostNet)
+  <div *ngIf="selectedDataset" class="info">
+    <ul>
+      <li *ngIf="selectedDataset.strains"><b>Virus: </b>{{selectedDataset.strains}}</li>
+      <li *ngIf="selectedDataset.hostTarget"><b>Host/Target: </b>{{selectedDataset.hostTarget}}</li>
+      <li *ngIf="selectedDataset.method"><b>Method: </b>{{selectedDataset.method}}</li>
+      <li *ngIf="selectedDataset.source"><b>Source: </b> <a href="{{selectedDataset.source[0]}}"> {{selectedDataset.source[1]}}</a>
+      </li>
+      <li *ngIf="selectedDataset.year"><b>Year: </b>{{selectedDataset.year}}</li>
+    </ul>
   </div>
 </div>

src/app/components/select-dataset/select-dataset.component.ts

@@ -9,7 +9,7 @@ import {Dataset} from '../../interfaces';
 
 export class SelectDatasetComponent {
 
-  @Input() selectedDataset;
+  @Input() selectedDataset: Dataset;
   @Output() selectedDatasetChange: EventEmitter<any> = new EventEmitter();
 
   @Input() datasetItems: Dataset[];

src/app/interfaces.ts

@@ -158,6 +158,10 @@ export interface Drug {
 export interface Dataset {
   label: string;
   strains: string;
+  hostTarget: string;
+  method: string;
+  source: Array<string> | null;
+  year: number;
   datasetNames: string;
   backendId: string;
   data: Array<[string, string]>;

src/app/pages/explorer-page/explorer-page.component.ts

@@ -71,23 +71,37 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
 
   public datasetItems: Dataset[] = [
     {
-      label: 'CoV2 (Gordon et al., 2020)',
-      strains: 'CoV2',
+      label: 'SARS-CoV-2 (Gordon et al.)',
+      strains: 'SARS-CoV-2',
+      hostTarget: 'Human cell line, HEK-293T kidney cells',
+      method: 'AP-MS (affinity purification-mass spectrometry)',
+      source: ['https://www.biorxiv.org/content/10.1101/2020.03.22.002386v3', 'bioRxiv'],
+      year: 2020,
       datasetNames: 'Gordon et al., 2020',
       backendId: 'SARS_CoV2',
       data: [['Krogan', 'SARS-CoV2']]
     },
     {
-      label: 'CoV1 (Pfefferle)',
-      strains: 'CoV1',
-      datasetNames: 'Pfefferle',
+      label: 'SARS-CoV-1 (Pfefferle et al.)',
+      strains: 'SARS-CoV-1',
+      hostTarget: 'Human brain and fetal brain cDNA libraries in yeast strains',
+      method: 'High-Throughput Yeast Two Hybrid Screen (HTY2H) and validations with Lumier assay, ' +
+        'as well as experimentally validated interactions from 20 publications.',
+      source: null,
+      year: 2011,
+      datasetNames: 'Pfefferle et al., 2011',
       backendId: 'SARS_CoV1',
       data: [['Pfefferle', 'SARS-CoV1']]
     },
     {
-      label: 'CoV1 (VirHostNet)',
-      strains: 'CoV1',
-      datasetNames: 'VirHostNet',
+      label: 'SARS-CoV-1 (VirHostNet 2.0)',
+      strains: 'SARS-CoV-1',
+      hostTarget: 'Different human cell lines',
+      method: 'Literature curation, interactions from 14 publications, which have experimental validation by at ' +
+        'least one of the following assays: co-immunoprecipitation, two hybrid, pull-down, mass spectrometry.',
+      source: null,
+      year: null,
+      datasetNames: 'VirHostNet 2.0',
       backendId: 'SARS_CoV1',
       data: [['VirHostNet', 'SARS-CoV1']]
     },

src/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>CoVex</title>
   <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/ico" href="assets/covex_logo_small.png">
   <script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>
   <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

src/styles.scss

@@ -17,10 +17,12 @@ $info: $primary;
 
 html {
   overflow: hidden;
+  height: 100%;
 }
 
 body {
   overflow: hidden;
+  height: 100%;
 }
 
 .landing {