Merge branch 'develop' of github.com:Sage-Bionetworks/Agora into develop

* 'develop' of github.com:Sage-Bionetworks/Agora: Quick fix for row chart Quick fix for tslint Fixing UI issues # Conflicts: # src/app/genes/genes-list/genes-list.component.html # src/app/genes/genes-list/genes-list.component.scss
Sage-Bionetworks · Oct 26, 2018 · 692acf9 · 692acf9
2 parents 3ca05b1 + 500673e
commit 692acf9
Show file tree

Hide file tree

Showing 26 changed files with 132 additions and 79 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,7 +5,7 @@
             "name": "Launch Chrome against localhost, with sourcemaps",
             "type": "chrome",
             "request": "launch",
-            "url": "http://localhost:3000/*",
+            "url": "http://localhost:8080/*",
             "runtimeArgs": [
               "--disable-web-security",
               "--user-data-dir",
@@ -18,7 +18,7 @@
             "name": "Attach to Chrome, with sourcemaps",
             "type": "chrome",
             "request": "attach",
-            "url": "http://localhost:3000/*",
+            "url": "http://localhost:8080/*",
             "port": 9222,
             "sourceMaps": true,
             "webRoot": "${workspaceRoot}"

diff --git a/README.md b/README.md
@@ -126,7 +126,7 @@ There are two ways to use this application in a remote production environment. O
 
 If you are copying the dist folder, install Node in the remote machine. Then, install MongoDB and populate the needed collections (follow the steps described above). Start the application by running `node` against the `server.js` file.
 
-If you are copying the entire project, install Node and any needed global dependencies in the remote machine. Then, run `npm install` to get all local dependencies installed and just follow the same steps for the local development (see below). You'll need to expose port `3000` so anyone can access the application.
+If you are copying the entire project, install Node and any needed global dependencies in the remote machine. Then, run `npm install` to get all local dependencies installed and just follow the same steps for the local development (see below). You'll need to expose port `8080` so anyone can access the application.
 
 In both cases the final URL will be the remote machine public ip.
 
@@ -170,7 +170,7 @@ npm start
 npm run start:prod
 ```
 
-go to [http://0.0.0.0:3000](http://0.0.0.0:3000) or [http://localhost:3000](http://localhost:3000) in your browser. If you are running in production mode change from `3000` to `8080`.
+go to [http://0.0.0.0:8080](http://0.0.0.0:8080) in your browser.
 
 ## Other commands
 
@@ -302,7 +302,7 @@ We have good experience using these editors:
 ### Visual Studio Code + Debugger for Chrome
 > Install [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) and see docs for instructions to launch Chrome
 
-The included `.vscode` automatically connects to the webpack development server on port `3000`.
+The included `.vscode` automatically connects to the webpack development server on port `8080`.
 
 # Types
 > When you include a module that doesn't include Type Definitions inside of the module you can include external Type Definitions with @types

diff --git a/config/protractor.conf.js b/config/protractor.conf.js
@@ -6,7 +6,7 @@ require('ts-node/register');
 var helpers = require('./helpers');
 
 exports.config = {
-  baseUrl: 'http://localhost:3000/',
+  baseUrl: 'http://localhost:8080/',
 
   /**
    * Use `npm run e2e`

diff --git a/config/webpack.dev.js b/config/webpack.dev.js
@@ -20,7 +20,7 @@ const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 module.exports = function (options) {
   const ENV = (process.env.mode = process.env.ENV = process.env.NODE_ENV = 'development');
   const HOST = process.env.HOST || 'localhost';
-  const PORT = process.env.PORT || 3000;
+  const PORT = process.env.PORT || 8080;
   const Docker = process.env.Docker || false;
   const Analyzer = process.env.Analyzer || false;
 

diff --git a/config/webpack.server.js b/config/webpack.server.js
@@ -23,7 +23,7 @@ const MONGODB_PORT = process.env.MONGODB_PORT || null;
 
 const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
     host: process.env.HOST || 'localhost',
-    port: process.env.PORT || 3000,
+    port: process.env.PORT || 8080,
     ENV: ENV,
     Docker: Docker,
     MONGODB_HOST: MONGODB_HOST,

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "agora",
   "version": "0.1.0",
-  "data-version": "8",
+  "data-version": "9",
   "description": "An application to aggregate genomic evidence supporting candidate gene and module targets nominated by members of the AMP-AD consortium.",
   "keywords": [
     "angular",
@@ -83,7 +83,7 @@
     "server:dev:hmr": "npm run server:dev -- --hotOnly",
     "server:docker": "npm run build:server:docker",
     "server:prod": "cross-env PORT=8080 NODE_ENV=production npm run webpack:server -- --config config/webpack.server.js  --progress --profile --bail",
-    "server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
+    "server:prod:ci": "http-server dist -p 8080 -c-1 --cors",
     "server:wds": "npm run webpack-dev-server -- --config config/webpack.server.js --open --progress --profile --watch --content-base src/",
     "start": "npm run server",
     "start:mongo": "sh start-mongo.sh '/var/lib/mongodb/'",

diff --git a/src/app/charts/row-chart/row-chart-view/row-chart-view.component.ts b/src/app/charts/row-chart/row-chart-view/row-chart-view.component.ts
@@ -68,9 +68,9 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit {
     ) { }
 
     ngOnInit() {
-        // If we move aways from the overview page, remove
+        // If we move away from the overview page, remove
         // the charts
-        this.router.events.subscribe((event) => {
+        /*this.router.events.subscribe((event) => {
             if (event instanceof NavigationStart) {
                 if (this.chart && dc.hasChart(this.chart)) {
                     this.chartService.removeChart(
@@ -81,7 +81,7 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit {
                     this.geneService.setPreviousGene(this.geneService.getCurrentGene());
                 }
             }
-        });
+        });*/
         // Event for back and forth in the browser location
         this.location.onPopState(() => {
             if (this.chart && dc.hasChart(this.chart)) {

diff --git a/src/app/dialogs/nt-dialog/nt-dialog.component.spec.ts b/src/app/dialogs/nt-dialog/nt-dialog.component.spec.ts
@@ -5,9 +5,12 @@ import {
     fakeAsync
 } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 import {
-    DialogsServiceStub
+    DialogsServiceStub,
+    RouterStub,
+    ActivatedRouteStub
 } from '../../testing';
 
 import { NOMinatedTargetComponent } from './nt-dialog.component';
@@ -19,7 +22,9 @@ import { MockComponent } from 'ng-mocks';
 describe('Component: NTDialog', () => {
     let component: NOMinatedTargetComponent;
     let fixture: ComponentFixture<NOMinatedTargetComponent>;
+    let router: RouterStub;
     let dialogsService: DialogsServiceStub;
+    let activatedRoute: any;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -31,6 +36,8 @@ describe('Component: NTDialog', () => {
             // elements and attributes
             schemas: [NO_ERRORS_SCHEMA],
             providers: [
+                { provide: Router, useValue: new RouterStub() },
+                { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
                 { provide: DialogsService, useValue: new DialogsServiceStub() }
             ]
         })
@@ -39,7 +46,9 @@ describe('Component: NTDialog', () => {
         fixture = TestBed.createComponent(NOMinatedTargetComponent);
 
         // Get the injected instances
+        router = fixture.debugElement.injector.get(Router);
         dialogsService = fixture.debugElement.injector.get(DialogsService);
+        activatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
 
         component = fixture.componentInstance; // Component test instance
     }));

diff --git a/src/app/dialogs/soe-dialog/soe-dialog.component.html b/src/app/dialogs/soe-dialog/soe-dialog.component.html
@@ -4,10 +4,10 @@
         <div class="row content-row" dir="ltr">
             <div class="col-md-12 col-sm-12 col-12">
                 <span class="header-span" dir="ltr">
-                    AD Genetic Association:
+                    Genetic Association with LOAD:
                 </span>
                 <span>
-                    Significant genetic association with based on the International Genomics of Alzheimer&#39;s Project (IGAP) genome-wide association study.
+                    Significant genetic association with Late Onset AD (LOAD) based on the International Genomics of Alzheimer&#39;s Project (IGAP) genome-wide association study.
                 </span>
             </div>
         </div>
@@ -47,7 +47,7 @@
                     RNA Expression Change in AD Brain:
                 </span>
                 <span dir="ltr">
-                    Significant differential expression based on AMP-AD consortium work detailed on Agora under “RNA-seq Differential Expression”.
+                    Significant differential expression based on AMP-AD consortium work detailed on Agora under &#147;RNA Evidence&#148;.
                 </span>
             </div>
         </div>

diff --git a/src/app/genes/gene-overview/evidence-menu/rna/gene-network/gene-network.component.html b/src/app/genes/gene-overview/evidence-menu/rna/gene-network/gene-network.component.html
@@ -36,30 +36,30 @@ <h2 class="placeholder-text">No expression data is currently available.</h2>
     <div class="col-xl-4 col-12 currentGene">
         <div class="row cg-row">
             <div class="col-md-12 col-sm-12 col-12 cg-col">
-                <h2>{{geneInfo.hgnc_symbol}}</h2>
+                <h3>{{geneInfo.hgnc_symbol}}</h3>
                 <p class="cg-col-p">{{geneInfo.summary}}</p>
-                <h3 class="cg-col-span">
-                    AD Genetic Association &nbsp;&nbsp;&nbsp;
+                <h4 class="cg-col-span">
+                    Genetic Association with LOAD &nbsp;&nbsp;&nbsp;
                     <span [ngClass]="getTextColorClass(geneInfo.isIGAP, true)">{{getText(geneInfo.isIGAP)}}</span>
-                </h3>
-                <h3 class="cg-col-span">
+                </h4>
+                <h4 class="cg-col-span">
                     Nominated target &nbsp;&nbsp;&nbsp;
                     <span [ngClass]="getTextColorClass(geneInfo.nominations, true)">{{getText((geneInfo.nominations === undefined) ? false : geneInfo.nominations)}}</span>
-                </h3>
-                <h3 class="cg-col-span">
+                </h4>
+                <h4 class="cg-col-span">
                     Brain eQTL &nbsp;&nbsp;&nbsp;
                     <span [ngClass]="getTextColorClass(geneInfo.haseqtl, true)">{{getText(geneInfo.haseqtl)}}</span>
-                </h3>
+                </h4>
             </div>
         </div>
         <div class="row cg-row" *ngIf="!noData;">
             <div class="col-md-12 col-sm-12 col-12 cg-col">
-                <h2>
+                <h3 class="smaller-h3">
                     Tissue Specificity of Gene Connections
-                </h2>
-                <more-info [name]="'me'">
+                </h3>
+                <!--<more-info [name]="'me'">
                     <me-dialog [header]="'Tissue Specificity of Gene Connections'" [description]="true"></me-dialog>
-                </more-info>
+                </more-info>-->
                 <p class="italic-paragraph"> 6 of {{selectedGeneData.links.length}} genes</p>
                 <div class="row pathboxes-row">
                     <div class="col-md-11 col-sm-11 col-11 nopadding-left">
@@ -85,14 +85,14 @@ <h2>
         </div>
         <div class="row cg-row" *ngIf="!noData;">
             <div class="col-md-12 col-sm-12 col-12 cg-col">
-                <h2>
+                <h3 class="smaller-h3">
                     Similar Genes
-                </h2>
-                <h2 class="vmi-wrapper">
+                </h3>
+                <!--<h2 class="vmi-wrapper">
                     <more-info [name]="'sg'">
                         <sg-dialog></sg-dialog>
                     </more-info>
-                </h2>
+                </h2>-->
                 <div class="row pathboxes-row">
                     <div class="col-md-11 col-sm-11 col-11 nopadding-left">
                         <div *ngFor="let node of selectedGeneData.nodes | slice:0:6 | agrSort: 'brainregions' : true;" class="pathbox">

diff --git a/src/app/genes/gene-overview/evidence-menu/rna/gene-network/gene-network.component.scss b/src/app/genes/gene-overview/evidence-menu/rna/gene-network/gene-network.component.scss
@@ -61,6 +61,10 @@
 
     .cg-row {
         margin: 0px;
+
+        .smaller-h3 {
+            font-size: $font-size-xx-regular;
+        }
     }
 
     .vmi-wrapper {
@@ -76,6 +80,8 @@
             color: #1A1C29;
         }
 
+        font-size: $font-size-regular;
+
         span {
             @include lato-font('normal');
 
@@ -92,7 +98,6 @@
         }
     }
 
-    border-top: 1px solid #DDD;
     padding: 0px;
 }
 

diff --git a/...ne-overview/evidence-menu/rna/gene-rnaseq-de/box-plots-view/box-plots-view.component.html b/...ne-overview/evidence-menu/rna/gene-rnaseq-de/box-plots-view/box-plots-view.component.html
@@ -1,7 +1,7 @@
 <div class="row bplot-row">
     <div class="col-md-12 col-sm-12 col-12 bplot-heading">
-        <h2>{{tissue.toUpperCase()}}</h2>
-        <h3>{{model}}</h3>
+        <h3>{{tissue.toUpperCase()}}</h3>
+        <h4 class="center-text">{{model}}</h4>
     </div>
 </div>
 <div class="row bplot-content">

diff --git a/...ne-overview/evidence-menu/rna/gene-rnaseq-de/box-plots-view/box-plots-view.component.scss b/...ne-overview/evidence-menu/rna/gene-rnaseq-de/box-plots-view/box-plots-view.component.scss
@@ -1,10 +1,10 @@
-.bplot-row {
+/*.bplot-row {
     background: rgba(245, 245, 245, 0.5);
-}
+}*/
 
 .bplot-content {
     min-height: 450px;
-    background: rgba(245, 245, 245, 0.5);
+    // background: rgba(245, 245, 245, 0.5);
 }
 
 .bplot-heading {

diff --git a/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.html b/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.html
@@ -1,14 +1,10 @@
-<h1 class="inner-section-divider"></h1>
-<div class="section-thin rna-seq-me" *ngIf="dataLoaded">
-    <h2 class="filters-header">
+<div class="section-thin rna-seq-me no-vertical-padding"  *ngIf="dataLoaded">
+    <h3 class="filters-header">
         Overall Expression of Selected Gene Across Tissues
         <span class="icon-spacing"></span>
         <span class="icon-spacing"></span>
         <download *ngIf="!isEmptyGene" [target]="stme" [name]="'overall_exp_ac_tissues'"></download>
-    </h2>
-    <more-info [name]="'me2'">
-        <me-dialog [header]="'Brain Tissues'" [name]="'me2'"></me-dialog>
-    </more-info>
+    </h3>
     <p class="black-paragraph">
         This plot depicts the median expression of the selected gene across tissues (brain regions) in
 the dataset, as measured by RNA-seq read counts per million (CPM) reads. Meaningful expression is considered to be
@@ -25,26 +21,27 @@ <h2 class="filters-header">
             <h2 class="placeholder-text">No expression data is currently available.</h2>
         </div>
     </ng-template>
+    <h1 class="inner-section-divider"></h1>
 </div>
 
-<div class="section-thin rna-seq-bplot" *ngIf="dataLoaded">
+<div class="section-thin rna-seq-bplot no-vertical-padding" *ngIf="dataLoaded">
+    <h3>
+        Differential Expression of Selected Gene within Selected Tissue
+        <span class="icon-spacing"></span>
+        <download *ngIf="!isEmptyGene" [target]="stbp" [name]="'dif_exp_tissue'"></download>
+    </h3>
     <div class="row">
         <div class="col-md-8 col-sm-12 col-12 col-fixer">
-            <h2>
-                Differential Expression of Selected Gene within Selected Tissue
-                <span class="icon-spacing"></span>
-                <download *ngIf="!isEmptyGene" [target]="stbp" [name]="'dif_exp_tissue'"></download>
-            </h2>
+            <h4 class="filters-header">
+                Filter by Tissue and Model
+            </h4>
             <p class="black-paragraph de-paragraph">
                 After selecting a tissue and statistical model, you will be able to see whether the
                 selected gene is differentially expressed between AD cases and controls The box
                 plot depicts how the differential expression of the selected gene of interest
                 (red dot) compares with expression of other genes in the tissue. Summary statistics
                 can be viewed by hovering over the red dot.
             </p>
-            <h2 class="filters-header">
-                Filter by Tissue and Model
-            </h2>
             <h2 class="vmi-wrapper">
                 <more-info [name]="'bp'">
                     <bp-dialog [name]="'bp'"></bp-dialog>
@@ -107,14 +104,18 @@ <h2 class="vmi-wrapper">
             <h2 class="placeholder-text">No expression data is currently available.</h2>
         </div>
     </div>
+    <h1 class="inner-section-divider"></h1>
 </div>
 
-<div class="section-thin rna-seq-fplot" *ngIf="dataLoaded">
-    <h2>
+<div class="section-thin rna-seq-fplot no-vertical-padding" *ngIf="dataLoaded">
+    <h3>
         Consistency of Change in Expression
         <span class="icon-spacing"></span>
         <download *ngIf="!isEmptyGene" [target]="stfp" [name]="'consistency_chg_in_exp'"></download>
-    </h2>
+    </h3>
+    <more-info [name]="'me2'">
+        <me-dialog [header]="'Brain Tissues'" [name]="'me2'"></me-dialog>
+    </more-info>
     <p class="black-paragraph">
         This forest plot indicates the estimate of the log fold change with standard errors across the
         tissues in the chosen model. Genes that show consistent patterns of differential expression will
@@ -126,4 +127,5 @@ <h2>
     <div *ngIf="isEmptyGene" class="row rc-empty-plot-content">
         <h2 class="placeholder-text">No expression data is currently available.</h2>
     </div>
+    <h1 class="inner-section-divider"></h1>
 </div>
diff --git a/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.scss b/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.scss
@@ -219,6 +219,8 @@
         .ui-multiselect-trigger {
             color: #5BB0B5 !important;
             width: 32px;
+            border: none;
+            padding-right: 5%;
 
             .ui-multiselect-trigger-icon {
                 color: #5BB0B5 !important;