Merge pull request #434 from thehyve/dev

UI refinements

README.md

@@ -21,7 +21,7 @@ This project is based on [Angular 6](https://github.com/angular/angular),
     ```
 
 
-### How to run
+### How to run locally
 We assume that a TranSMART backend has been installed and run,
 either locally, e.g. on [localhost:8081](localhost:8081), 
 or remotely, e.g. on https://transmart-dev.thehyve.net. 

src/app/config/config.default.json

@@ -2,6 +2,8 @@
   "api-url": "https://transmart-dev.thehyve.net",
   "api-version": "v2",
   "app-url": "http://localhost:4200",
+  "app-version": "0.6.1-rc.2",
+  "doc-url": "https://glowingbear.app",
   "autosave-subject-sets": false,
   "export-data-view": "default",
   "show-observation-counts": true,

src/app/config/config.dev.json

@@ -2,14 +2,16 @@
   "api-url": "http://localhost:8081",
   "api-version": "v2",
   "app-url": "http://localhost:4200",
+  "app-version": "0.6.1-rc.2",
+  "doc-url": "https://glowingbear.app",
   "autosave-subject-sets": false,
   "export-data-view": "default",
   "show-observation-counts": true,
   "instant-counts-update-1": false,
   "instant-counts-update-2": false,
   "instant-counts-update-3": false,
   "include-data-table": true,
-  "include-query-subscription": false,
+  "include-query-subscription": true,
   "authentication-service-type": "oidc",
   "oidc-server-url": "https://keycloak-dwh-test.thehyve.net/auth/realms/transmart-dev/protocol/openid-connect",
   "oidc-client-id": "transmart-client"

src/app/config/config.transmart.json

@@ -2,6 +2,8 @@
   "api-url": "https://transmart-dev.thehyve.net",
   "api-version": "v2",
   "app-url": "https://glowingbear-dev.thehyve.net",
+  "app-version": "0.6.1-rc.2",
+  "doc-url": "https://glowingbear.app",
   "autosave-subject-sets": false,
   "export-data-view": "default",
   "show-observation-counts": true,

src/app/modules/gb-analysis-module/gb-cross-table/gb-cross-table.component.css

@@ -1,6 +1,7 @@
 .gb-cross-table-container {
   font-size: small;
   margin-right: 1em;
+  margin-top: 0.5em;
 }
 
 .gb-cross-table-top-header {

src/app/modules/gb-data-selection-module/accordion-components/gb-selection/gb-selection.component.html

@@ -11,8 +11,9 @@
   <!-- Inclusion criteria -->
   <div #inclusionCriteriaBox
        class="criteria-box">
-    <p><b>Inclusion</b> criteria:</p>
+
     <div class="subject-count-box">
+      <span><b>Inclusion</b> criteria:</span>
       <i class="fa fa-spin fa-refresh fa-fw gb-spinner" [class.loading]="loadingStateInclusion == 'loading'"></i>
       <span [@notifyState]="loadingStateInclusion">{{inclusionSubjectCount}} subjects included.</span>
     </div>
@@ -24,8 +25,8 @@
   <!-- Exclusion criteria -->
   <div #exclusionCriteriaBox
        class="criteria-box">
-    <p><b>Exclusion</b> criteria:</p>
     <div class="subject-count-box">
+      <span><b>Exclusion</b> criteria:</span>
       <i class="fa fa-spin fa-refresh fa-fw gb-spinner" [class.loading]="loadingStateExclusion == 'loading'"></i>
       <span [@notifyState]="loadingStateExclusion">{{exclusionSubjectCount}} subjects excluded.</span>
     </div>
@@ -37,6 +38,7 @@
 
   <!-- Intersection calculation -->
   <div class="subject-count-box">
+    <span><b>Total:</b></span>
     <i class="fa fa-spin fa-refresh fa-fw gb-spinner" [class.loading]="loadingStateTotal_1 == 'loading'"></i>
     <span [@notifyState]="loadingStateTotal_1">{{subjectCount_1}} subjects match your selection.</span>
   </div>

src/app/modules/gb-data-selection-module/gb-data-selection.component.css

@@ -7,7 +7,7 @@
 }
 
 .gb-data-selection-container {
-  margin-top: 100px;
+  margin-top: 1px;
   margin-bottom: 100px;
 }
 
@@ -53,3 +53,41 @@
 .fa-circle-o-notch {
   opacity: .5;
 }
+
+/*
+ * The style for the overview panel on top of data-selection
+ * padding and margin: top, right, bottom, left
+ * shadow option: text-shadow: 1px 1px 3px black;
+ */
+.gb-data-selection-top-panel {
+  background-color: rgba(51, 156, 144, 0.1);
+  border-radius: 3px;
+  border: 1px solid lightgray;
+  padding: 0.5em 1em 0.5em 1em;
+  margin: 3px 16px -2px 0px;
+  color: darkslategrey;
+  overflow: hidden;
+  width: 100%;
+  font-size: 0.9em;
+}
+
+.gb-data-selection-top-panel-input {
+  margin-bottom: 3px;
+  margin-right: 7px;
+  max-width: 100%;
+  font-size: small;
+  padding: 0.3em 0.3em 0.3em 0.5em;
+}
+
+/* save btn */
+.gb-data-selection-top-panel-btn {
+  margin: .1em;
+}
+.gb-data-selection-top-panel-btn:hover {
+  background-color: var(--gb-clinical-green);
+  opacity: 0.7;
+}
+.gb-data-selection-top-panel-btn:active {
+  background-color: var(--gb-clinical-green);
+  opacity: 0.9;
+}

src/app/modules/gb-data-selection-module/gb-data-selection.component.html

@@ -1,4 +1,18 @@
 <div class="gb-data-selection-container">
+  <!-- Saving query -->
+  <div class="container form-inline gb-data-selection-top-panel">
+    <input id="queryName" type="text"
+           class="form-control gb-data-selection-top-panel-input"
+           placeholder="Specify query name"
+           (drop)="preventNodeDrop($event)"
+           [(ngModel)]="queryName">
+    <button class="btn btn-outline-primary btn-sm gb-data-selection-top-panel-btn"
+            (click)="saveQuery()"
+            type="button">
+      <span *ngIf="isSavingQueryCompleted">Save query</span>
+      <span *ngIf="!isSavingQueryCompleted">Saving...</span>
+    </button>
+  </div>
 
   <!-- The accordions -->
   <md2-accordion [multiple]="true"

src/app/modules/gb-data-selection-module/gb-data-selection.component.spec.ts

@@ -34,6 +34,7 @@ import {DataTableServiceMock} from '../../services/mocks/data-table.service.mock
 describe('GbDataSelectionComponent', () => {
   let component: GbDataSelectionComponent;
   let fixture: ComponentFixture<GbDataSelectionComponent>;
+  let queryService: QueryService;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -85,10 +86,38 @@ describe('GbDataSelectionComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(GbDataSelectionComponent);
     component = fixture.componentInstance;
+    queryService = TestBed.get(QueryService);
     fixture.detectChanges();
   });
 
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should save query', () => {
+    spyOn(component, 'saveQuery').and.callThrough();
+    component.saveQuery();
+    expect(component.saveQuery).toHaveBeenCalled();
+    // when queryName is defined
+    component.queryName = 'test name';
+    spyOn(queryService, 'saveQueryByName').and.callThrough();
+    component.saveQuery();
+    expect(queryService.saveQueryByName).toHaveBeenCalled();
+  });
+  it('should prevent node drop on top panel', () => {
+    let func = function () {
+    };
+    let event = {
+      stopPropagation: func,
+      preventDefault: func
+    };
+    spyOn(component, 'preventNodeDrop').and.callThrough();
+    spyOn(event, 'stopPropagation').and.callThrough();
+    spyOn(event, 'preventDefault').and.callThrough();
+    component.preventNodeDrop(event);
+    expect(component.preventNodeDrop).toHaveBeenCalled();
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
 });

src/app/modules/gb-data-selection-module/gb-data-selection.component.ts

@@ -9,15 +9,18 @@
 import {Component, OnInit} from '@angular/core';
 import {FormatHelper} from '../../utilities/format-helper';
 import {QueryService} from '../../services/query.service';
+import {MessageHelper} from '../../utilities/message-helper';
 
 @Component({
   selector: 'gb-data-selection',
   templateUrl: './gb-data-selection.component.html',
   styleUrls: ['./gb-data-selection.component.css']
 })
 export class GbDataSelectionComponent implements OnInit {
+  public queryName: string;
 
   constructor(public queryService: QueryService) {
+    this.queryName = '';
   }
 
   ngOnInit() {
@@ -83,6 +86,28 @@ export class GbDataSelectionComponent implements OnInit {
     return this.queryService.isDataTableUsed;
   }
 
+  get isSavingQueryCompleted(): boolean {
+    return this.queryService.isSavingQueryCompleted;
+  }
+  /**
+   * Prevent the default behavior of node drop
+   * @param event
+   */
+  preventNodeDrop(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  saveQuery() {
+    let name = this.queryName ? this.queryName.trim() : '';
+    let queryNameIsValid = name !== '';
+    if (queryNameIsValid) {
+      this.queryService.saveQueryByName(name);
+      this.queryName = '';
+    } else {
+      MessageHelper.alert('error', 'Please specify the query name.', '');
+    }
+  }
+
   update_1(event) {
     event.stopPropagation();
     this.queryService.update_1();

src/app/modules/gb-main-module/gb-main.component.css

@@ -9,36 +9,5 @@
 }
 
 .gb-router-outlet-container {
-  margin-top: 4em;
   padding-left: 0.5em;
 }
-
-.gb-main-panel {
-  margin-top: var(--gb-top-panel-height);
-}
-
-.gb-top-panel {
-  background-color: var(--gb-clinical-green-dark);
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 100;
-  border: none;
-  padding: 2px 1em 2px 1em;
-  margin: 0px;
-  height: var(--gb-top-panel-height);
-}
-
-.gb-top-panel button {
-  background-color: transparent;
-  border: none;
-  color: white;
-  padding: 3px 5px 1px 7px;
-  margin-top: -5px;
-}
-.gb-top-panel button:hover {
-  color: var(--gb-orange-light)
-}
-.gb-top-panel button:active {
-  border: none;
-}

src/app/modules/gb-main-module/gb-main.component.html

@@ -1,16 +1,6 @@
 <div class="gb-container">
-  <!-- Top panel -->
-  <div class="gb-top-panel">
-      <span class="float-right">
-        <button type="button" id="logout" class="btn btn-outline-secondary"
-                (click)="logout()">
-          <i class="fa fa-sign-out" aria-hidden="true"></i>
-        </button>
-      </span>
-  </div>
-
   <!-- Split main panel -->
-  <split direction="horizontal" [gutterSize]="10" class="gb-main-panel">
+  <split direction="horizontal" [gutterSize]="10">
     <split-area [size]="25">
       <gb-side-panel></gb-side-panel>
     </split-area>

src/app/modules/gb-main-module/gb-main.component.spec.ts

@@ -41,11 +41,12 @@ import {TreeNodeService} from '../../services/tree-node.service';
 import {DataTableServiceMock} from '../../services/mocks/data-table.service.mock';
 import {AuthenticationServiceMock} from '../../services/mocks/authentication.service.mock';
 import {AngularSplitModule} from 'angular-split';
+import {AppConfig} from '../../config/app.config';
+import {AppConfigMock} from '../../config/app.config.mock';
 
 describe('GbMainComponent', () => {
   let component: GbMainComponent;
   let fixture: ComponentFixture<GbMainComponent>;
-  let authService: AuthenticationService;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -70,6 +71,10 @@ describe('GbMainComponent', () => {
           provide: APP_BASE_HREF,
           useValue: '/'
         },
+        {
+          provide: AppConfig,
+          useClass: AppConfigMock
+        },
         {
           provide: AuthenticationService,
           useClass: AuthenticationServiceMock
@@ -119,16 +124,9 @@ describe('GbMainComponent', () => {
     fixture = TestBed.createComponent(GbMainComponent);
     component = fixture.componentInstance;
     component.ngOnInit();
-    authService = TestBed.get(AuthenticationService);
   })
 
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should log out', () => {
-    let spy = spyOn(authService, 'logout').and.stub();
-    component.logout();
-    expect(spy).toHaveBeenCalled();
-  })
 });

src/app/modules/gb-main-module/gb-main.component.ts

@@ -13,6 +13,7 @@ import {ConstraintService} from '../../services/constraint.service';
 import {TreeNodeService} from '../../services/tree-node.service';
 import {QueryService} from '../../services/query.service';
 import {TransmartResourceService} from '../../services/transmart-services/transmart-resource.service';
+import {AppConfig} from '../../config/app.config';
 
 @Component({
   selector: 'gb-main',
@@ -21,7 +22,8 @@ import {TransmartResourceService} from '../../services/transmart-services/transm
 })
 export class GbMainComponent implements OnInit {
 
-  constructor(private authenticationService: AuthenticationService,
+  constructor(private appConfig: AppConfig,
+              private authenticationService: AuthenticationService,
               private resourceService: ResourceService,
               private transmartResourceService: TransmartResourceService,
               private treeNodeService: TreeNodeService,
@@ -32,8 +34,4 @@ export class GbMainComponent implements OnInit {
   ngOnInit() {
   }
 
-  logout() {
-    this.authenticationService.logout();
-  }
-
 }