feat: added KG ToS

src/atlasViewer/atlasViewer.component.ts

 import { Component, HostBinding, ViewChild, ViewContainerRef, OnDestroy, OnInit, TemplateRef, AfterViewInit } from "@angular/core";
-import { Store, select } from "@ngrx/store";
+import { Store, select, ActionsSubject } from "@ngrx/store";
 import { ViewerStateInterface, isDefined, FETCHED_SPATIAL_DATA, UPDATE_SPATIAL_DATA, TOGGLE_SIDE_PANEL, safeFilter } from "../services/stateStore.service";
 import { Observable, Subscription, combineLatest, interval, merge, of } from "rxjs";
 import { map, filter, distinctUntilChanged, delay, concatMap, debounceTime, withLatestFrom } from "rxjs/operators";
@@ -17,6 +17,7 @@ import { NehubaContainer } from "../ui/nehubaContainer/nehubaContainer.component
 import { colorAnimation } from "./atlasViewer.animation"
 import { FixedMouseContextualContainerDirective } from "src/util/directives/FixedMouseContextualContainerDirective.directive";
 import { DatabrowserService } from "src/ui/databrowserModule/databrowser.service";
+import { AGREE_COOKIE, AGREE_KG_TOS, SHOW_KG_TOS } from "src/services/state/uiState.store";
 
 @Component({
   selector: 'atlas-viewer',
@@ -35,6 +36,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   @ViewChild('helpComponent', {read: TemplateRef}) helpComponent : TemplateRef<any>
   @ViewChild('signinModalComponent', {read: TemplateRef}) signinModalComponent : TemplateRef<any>
   @ViewChild('cookieAgreementComponent', {read: TemplateRef}) cookieAgreementComponent : TemplateRef<any>
+  @ViewChild('kgToS', {read: TemplateRef}) kgTosComponent: TemplateRef<any>
   @ViewChild(LayoutMainSide) layoutMainSide: LayoutMainSide
 
   @ViewChild(NehubaContainer) nehubaContainer: NehubaContainer
@@ -84,7 +86,8 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     public urlService: AtlasViewerURLService,
     public apiService: AtlasViewerAPIServices,
     private modalService: BsModalService,
-    private databrowserService: DatabrowserService
+    private databrowserService: DatabrowserService,
+    private dispatcher$: ActionsSubject
   ) {
     this.ngLayerNames$ = this.store.pipe(
       select('viewerState'),
@@ -287,9 +290,11 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     /**
      * TODO avoid creating new views in lifecycle hooks in general
      */
-    of(localStorage.getItem('cookies') !== 'agreed').pipe(
-      delay(0),
-      filter(flag => flag)
+    this.store.pipe(
+      select('uiState'),
+      select('agreedCookies'),
+      filter(agreed => !agreed),
+      delay(0)
     ).subscribe(() => {
       this.modalService.show(ModalUnit, {
         initialState: {
@@ -299,6 +304,24 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       }) 
     })
 
+    this.dispatcher$.pipe(
+      filter(({type}) => type === SHOW_KG_TOS),
+      withLatestFrom(this.store.pipe(
+        select('uiState'),
+        select('agreedKgTos')
+      )),
+      map(([_, agreed]) => agreed),
+      filter(flag => !flag),
+      delay(0)
+    ).subscribe(val => {
+      this.modalService.show(ModalUnit, {
+        initialState: {
+          title: 'Knowldge Graph ToS',
+          template: this.kgTosComponent
+        }
+      })
+    })
+
     this.onhoverSegmentForFixed$ = this.rClContextualMenu.onShow.pipe(
       withLatestFrom(this.onhoverSegment$),
       map(([_flag, onhoverSegment]) => onhoverSegment)
@@ -352,9 +375,18 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       }) as NgLayerInterface)
   }
 
+  kgTosClickedOk(){
+    this.modalService.hide(1)
+    this.store.dispatch({
+      type: AGREE_KG_TOS
+    })
+  }
+
   cookieClickedOk(){
     this.modalService.hide(1)
-    localStorage.setItem('cookies', 'agreed');
+    this.store.dispatch({
+      type: AGREE_COOKIE
+    })
   }
 
   panelAnimationEnd(){

src/atlasViewer/atlasViewer.template.html

@@ -95,6 +95,12 @@
         </cookie-agreement>
       </div>
     </tab>
+    <tab heading="KG ToS">
+      <div class="mt-2">
+        <kgtos-component>
+        </kgtos-component>
+      </div>
+    </tab>
   </tabset>
 </ng-template>
 <ng-template #signinModalComponent>
@@ -102,6 +108,7 @@
     
   </signin-modal>
 </ng-template>
+
 <ng-template #cookieAgreementComponent>
   <cookie-agreement>
   </cookie-agreement>
@@ -111,6 +118,14 @@
   </div>
 </ng-template>
 
+<ng-template #kgToS>
+  <kgtos-component>
+  </kgtos-component>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" (click)="kgTosClickedOk()">Ok</button>
+  </div>
+</ng-template>
+
 <div class="d-flex flex-column" minReq *ngIf="!meetsRequirement">
   <div class="jumbotron bg-light text-center mb-0">
     <div>

src/services/state/uiState.store.ts

 import { Action } from '@ngrx/store'
 
-export function uiState(state:UIStateInterface = {mouseOverSegment:null, mouseOverLandmark : null, focusedSidePanel:null, sidePanelOpen: false},action:UIAction){
+const agreedCookieKey = 'agreed-cokies'
+const aggredKgTosKey = 'agreed-kg-tos'
+
+const defaultState : UIStateInterface = {
+  mouseOverSegment: null,
+  mouseOverLandmark: null,
+  focusedSidePanel: null,
+  sidePanelOpen: false,
+
+  /**
+   * replace with server side logic (?)
+   */
+  agreedCookies: localStorage.getItem(agreedCookieKey) === 'agreed',
+  agreedKgTos: localStorage.getItem(aggredKgTosKey) === 'agreed'
+}
+
+export function uiState(state:UIStateInterface = defaultState,action:UIAction){
   switch(action.type){
     case MOUSE_OVER_SEGMENT:
-      return Object.assign({},state,{
+      return {
+        ...state,
         mouseOverSegment : action.segment
-      })
+      }
     case MOUSE_OVER_LANDMARK:
-      return Object.assign({}, state, {
+      return {
+        ...state,
         mouseOverLandmark : action.landmark
-      })
+      }
+    /**
+     * TODO deprecated
+     * remove ASAP
+     */
     case TOGGLE_SIDE_PANEL:
       return Object.assign({}, state, {
         focusedSidePanel : typeof action.focusedSidePanel  === 'undefined' || state.focusedSidePanel === action.focusedSidePanel
@@ -17,15 +39,35 @@ export function uiState(state:UIStateInterface = {mouseOverSegment:null, mouseOv
           : action.focusedSidePanel, 
         sidePanelOpen : !(typeof action.focusedSidePanel  === 'undefined' || state.focusedSidePanel === action.focusedSidePanel)
       } as Partial<UIStateInterface>)
-    case OPEN_SIDE_PANEL :
-      return Object.assign({},state,{
-        sidePanelOpen : true
-      })
-    case CLOSE_SIDE_PANEL :
-      return Object.assign({},state,{
-        sidePanelOpen : false
-      })
-    default :
+    case OPEN_SIDE_PANEL:
+      return {
+        ...state,
+        sidePanelOpen: true
+      }
+    case CLOSE_SIDE_PANEL:
+      return {
+        ...state,
+        sidePanelOpen: false
+      }
+    case AGREE_COOKIE:
+      /**
+       * TODO replace with server side logic
+       */
+      localStorage.setItem(agreedCookieKey, 'agreed')
+      return {
+        ...state,
+        agreedCookies: true
+      }
+    case AGREE_KG_TOS:
+      /**
+       * TODO replace with server side logic
+       */
+      localStorage.setItem(aggredKgTosKey, 'agreed')
+      return {
+        ...state,
+        agreedKgTos: true
+      }
+    default:
       return state
   }
 }
@@ -35,6 +77,9 @@ export interface UIStateInterface{
   mouseOverSegment : any | number
   mouseOverLandmark : any 
   focusedSidePanel : string | null
+
+  agreedCookies: boolean
+  agreedKgTos: boolean
 }
 
 export interface UIAction extends Action{
@@ -48,4 +93,8 @@ export const MOUSE_OVER_LANDMARK = `MOUSE_OVER_LANDMARK`
 
 export const TOGGLE_SIDE_PANEL = 'TOGGLE_SIDE_PANEL'
 export const CLOSE_SIDE_PANEL = `CLOSE_SIDE_PANEL`
-export const OPEN_SIDE_PANEL = `OPEN_SIDE_PANEL`
\ No newline at end of file
+export const OPEN_SIDE_PANEL = `OPEN_SIDE_PANEL`
+
+export const AGREE_COOKIE = `AGREE_COOKIE`
+export const AGREE_KG_TOS = `AGREE_KG_TOS`
+export const SHOW_KG_TOS = `SHOW_KG_TOS`
\ No newline at end of file

src/ui/databrowserModule/databrowser.service.ts

@@ -11,6 +11,7 @@ import { NO_METHODS } from "./util/filterDataEntriesByMethods.pipe";
 import { ComponentRef } from "@angular/core/src/render3";
 import { DataBrowser } from "./databrowser/databrowser.component";
 import { WidgetUnit } from "src/atlasViewer/widgetUnit/widgetUnit.component";
+import { SHOW_KG_TOS } from "src/services/state/uiState.store";
 
 const noMethodDisplayName = 'No methods described'
 
@@ -294,6 +295,12 @@ export class DatabrowserService implements OnDestroy{
     })
   }
 
+  public dbComponentInit(db:DataBrowser){
+    this.store.dispatch({
+      type: SHOW_KG_TOS
+    })
+  }
+
   public getModalityFromDE = getModalityFromDE
 }
 

src/ui/databrowserModule/databrowser/databrowser.component.ts

@@ -60,6 +60,7 @@ export class DataBrowser implements OnDestroy,OnInit{
 
 
   ngOnInit(){
+    this.dbService.dbComponentInit(this)
     this.regions = this.regions.map(r => {
       /**
        * TODO to be replaced with properly region UUIDs from KG

src/ui/kgtos/kgtos.component.ts

+import { Component } from "@angular/core";
+
+@Component({
+  selector: 'kgtos-component',
+  templateUrl: './kgtos.template.html',
+  styleUrls: [
+    './kgtos.style.css'
+  ]
+})
+
+export class KGToS{
+
+}
\ No newline at end of file

src/ui/kgtos/kgtos.template.html

+<div>
+  <p>
+    The interactive viewer queries HBP Knowledge Graph Data Platform ("KG") for published datasets.
+  </p>
+  <p>
+    Access to the data and metadata provided through KG requires that you cite and acknowledge said data and metadata according to the Terms and Conditions of the Platform.
+  </p>
+  <p>
+    Citation requirements are outlined <a target="_blank" href="https://www.humanbrainproject.eu/en/explore-the-brain/search-terms-of-use#citations">here</a>.
+  </p>
+  <p>
+    Acknowledgement requirements are outlined <a target="_blank" href="https://www.humanbrainproject.eu/en/explore-the-brain/search-terms-of-use#acknowledgements">here</a>.
+  </p>
+  <p>
+    These outlines are based on the authoritative Terms and Conditions are found <a target="_blank" href="https://www.humanbrainproject.eu/en/explore-the-brain/search-terms-of-use">here</a>.
+  </p>
+  <p>
+    If you do not accept the Terms & Conditions you are not permitted to access or use the KG to search for, to submit, to post, or to download any materials found there-in.
+  </p>
+</div>
\ No newline at end of file

src/ui/ui.module.ts

@@ -44,6 +44,7 @@ import { RegionHierarchy } from "./regionHierachy/regionHierarchy.component";
 import { FilterNameBySearch } from "./regionHierachy/filterNameBySearch.pipe";
 import { StatusCardComponent } from "./nehubaContainer/statusCard/statusCard.component";
 import { CookieAgreement } from "./cookieAgreement/cookieAgreement.component";
+import { KGToS } from "./kgtos/kgtos.component";
 
 
 @NgModule({
@@ -78,6 +79,7 @@ import { CookieAgreement } from "./cookieAgreement/cookieAgreement.component";
     RegionHierarchy,
     StatusCardComponent,
     CookieAgreement,
+    KGToS,
 
     /* pipes */
     GroupDatasetByRegion,
@@ -120,6 +122,7 @@ import { CookieAgreement } from "./cookieAgreement/cookieAgreement.component";
     SigninBanner,
     SigninModal,
     CookieAgreement,
+    KGToS
   ]
 })