move hasconnectivity logic to directive

src/atlasComponents/connectivity/hasConnectivity.directive.ts

+import {Directive, Inject, Input, OnDestroy, OnInit} from "@angular/core";
+import {of, Subscription} from "rxjs";
+import {switchMap} from "rxjs/operators";
+import {BS_ENDPOINT} from "src/util/constants";
+import {HttpClient} from "@angular/common/http";
+
+@Directive({
+  selector: '[has-connectivity]',
+  exportAs: 'hasConnectivityDirective'
+})
+
+export class HasConnectivity implements OnInit, OnDestroy {
+
+    private subscriptions: Subscription[] = []
+
+    @Input() region: any
+
+    public hasConnectivity = false
+    public connectivityNumber = 0
+
+    constructor(@Inject(BS_ENDPOINT) private siibraApiUrl: string,
+                private httpClient: HttpClient) {}
+
+    ngOnInit() {
+      this.checkConnectivity(this.region[0])
+    }
+
+    checkConnectivity(region) {
+      const {atlas, parcellation, template} = region.context
+      if (region.id && region.id.kg) {
+        const regionId = `${region.id.kg.kgSchema}/${region.id.kg.kgId}`
+
+        const connectivityUrl = `${this.siibraApiUrl}/atlases/${encodeURIComponent(atlas['@id'])}/parcellations/${encodeURIComponent(parcellation['@id'])}/regions/${encodeURIComponent(regionId)}/features/ConnectivityProfile`
+
+        this.subscriptions.push(
+          this.httpClient.get<[]>(connectivityUrl).pipe(switchMap((res: any[]) => {
+            if (res && res.length) {
+              this.hasConnectivity = true
+              const url = `${connectivityUrl}/${encodeURIComponent(res[0]['@id'])}`
+              return this.httpClient.get(url)
+            } else {
+              this.hasConnectivity = false
+              this.connectivityNumber = 0
+            }
+            return of(null)
+          })).subscribe(res => {
+
+            if (res && res['__profile']) {
+              this.connectivityNumber = res['__profile'].filter(p => p > 0).length
+            }
+          })
+        )
+      }
+    }
+
+    ngOnDestroy(){
+      while (this.subscriptions.length > 0) this.subscriptions.pop().unsubscribe()
+    }
+
+}

src/atlasComponents/connectivity/module.ts

@@ -3,22 +3,25 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
 import { AngularMaterialModule } from "src/ui/sharedModules/angularMaterial.module";
 import { DatabrowserModule } from "../databrowserModule";
 import { ConnectivityBrowserComponent } from "./connectivityBrowser/connectivityBrowser.component";
+import {HasConnectivity} from "src/atlasComponents/connectivity/hasConnectivity.directive";
 
 @NgModule({
   imports: [
     CommonModule,
     DatabrowserModule,
-    AngularMaterialModule,
+    AngularMaterialModule
   ],
   declarations: [
     ConnectivityBrowserComponent,
+    HasConnectivity
   ],
   exports: [
     ConnectivityBrowserComponent,
+    HasConnectivity
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA,
   ],
 })
 
-export class AtlasCmptConnModule{}
\ No newline at end of file
+export class AtlasCmptConnModule{}

src/viewerModule/viewerCmp/viewerCmp.component.ts

@@ -75,7 +75,7 @@ import {HttpClient} from "@angular/common/http";
   ]
 })
 
-export class ViewerCmp implements OnInit, OnDestroy {
+export class ViewerCmp implements OnDestroy {
 
   public CONST = CONST
   public ARIA_LABELS = ARIA_LABELS
@@ -106,9 +106,6 @@ export class ViewerCmp implements OnInit, OnDestroy {
   private subscriptions: Subscription[] = []
   public viewerLoaded: boolean = false
 
-  public hasConnectivity = false
-  public connectivityNumber = 0
-
   public templateSelected$ = this.store$.pipe(
     select(viewerStateSelectedTemplateSelector),
     distinctUntilChanged(),
@@ -212,50 +209,10 @@ export class ViewerCmp implements OnInit, OnDestroy {
     )
   }
 
-  ngOnInit() {
-    this.subscriptions.push(this.selectedRegions$.subscribe(sr => {
-      if (sr && sr.length) {
-        this.checkConnectivity(sr[0])
-      } else {
-        this.hasConnectivity = false
-        this.connectivityNumber = 0
-      }
-    }))
-  }
-
   ngOnDestroy() {
     while (this.subscriptions.length) this.subscriptions.pop().unsubscribe()
   }
 
-  checkConnectivity(region) {
-    const {atlas, parcellation, template} = region.context
-    if (region.id && region.id.kg) {
-      const regionId = `${region.id.kg.kgSchema}/${region.id.kg.kgId}`
-
-      const connectivityUrl = `${this.siibraApiUrl}/atlases/${encodeURIComponent(atlas['@id'])}/parcellations/${encodeURIComponent(parcellation['@id'])}/regions/${encodeURIComponent(regionId)}/features/ConnectivityProfile`
-
-      this.subscriptions.push(
-        this.httpClient.get<[]>(connectivityUrl).pipe(switchMap((res: any[]) => {
-          if (res && res.length) {
-            this.hasConnectivity = true
-            const url = `${connectivityUrl}/${encodeURIComponent(res[0]['@id'])}`
-            return this.httpClient.get(url)
-          } else {
-            this.hasConnectivity = false
-            this.connectivityNumber = 0
-          }
-          return of(null)
-        })).subscribe(res => {
-
-          if (res && res['__profile']) {
-            this.connectivityNumber = res['__profile'].filter(p => p > 0).length
-            console.log(this.connectivityNumber)
-          }
-        })
-      )
-    }
-  }
-
   public activePanelTitles$: Observable<string[]>
   private activePanelTitles: string[] = []
   handleExpansionPanelClosedEv(title: string){

src/viewerModule/viewerCmp/viewerCmp.template.html

@@ -826,7 +826,7 @@
               [region]="region"
               (setOpenState)="expansionPanel.expanded = $event"
               [accordionExpanded]="expansionPanel.expanded"
-              (connectivityNumberReceived)="connectivityNumber = $event">
+              (connectivityNumberReceived)="hasConnectivityDirective.connectivityNumber = $event">
             </connectivity-browser>
           </ng-container>
         </mat-card-content>
@@ -834,13 +834,19 @@
 
       <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
         title: 'Connectivity',
-        desc: connectivityNumber,
+        desc: hasConnectivityDirective.connectivityNumber,
         iconClass: 'fas fa-braille',
-        iconTooltip: connectivityNumber | regionAccordionTooltipTextPipe : 'connectivity',
-        iavNgIf: hasConnectivity,
+        iconTooltip: hasConnectivityDirective.connectivityNumber | regionAccordionTooltipTextPipe : 'connectivity',
+        iavNgIf: hasConnectivityDirective.hasConnectivity,
         content: connectivityContentTmpl
       }">
       </ng-container>
+
+      <div has-connectivity
+           [region]="selectedRegions$ | async"
+           #hasConnectivityDirective="hasConnectivityDirective">
+      </div>
+
     </ng-container>
 
   </mat-accordion>