Full connectivity grid prototype

package.json

@@ -81,7 +81,7 @@
     "@ngrx/store": "^9.1.1",
     "@types/node": "12.12.39",
     "export-nehuba": "0.0.12",
-    "hbp-connectivity-component": "^0.4.9",
+    "hbp-connectivity-component": "^0.5.1",
     "jszip": "^3.6.0",
     "zone.js": "^0.10.2"
   }

src/atlasComponents/connectivity/connectivityBrowser/connectivityBrowser.component.spec.ts

@@ -9,6 +9,7 @@ import {Observable, of} from "rxjs";
 import { viewerStateAllRegionsFlattenedRegionSelector, viewerStateOverwrittenColorMapSelector } from "src/services/state/viewerState/selectors";
 import { ngViewerSelectorClearViewEntries } from "src/services/state/ngViewerState.store.helper";
 import {BS_ENDPOINT} from "src/util/constants";
+import {MatDialogModule} from "@angular/material/dialog";
 
 /**
  * injecting databrowser module is bad idea
@@ -59,6 +60,7 @@ describe('ConnectivityComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 HttpClientModule,
+                MatDialogModule
             ],
             providers: [
                 provideMockActions(() => actions$),

src/atlasComponents/connectivity/connectivityBrowser/connectivityBrowser.component.ts

@@ -7,7 +7,7 @@ import {
   Output,
   ViewChild,
   Input,
-  OnInit, Inject,
+  OnInit, Inject, TemplateRef,
 } from "@angular/core";
 import {select, Store} from "@ngrx/store";
 import {fromEvent, Observable, Subscription, Subject, combineLatest} from "rxjs";
@@ -23,6 +23,7 @@ import {HttpClient} from "@angular/common/http";
 import {BS_ENDPOINT} from "src/util/constants";
 import {getIdFromKgIdObj} from "common/util";
 import {OVERWRITE_SHOW_DATASET_DIALOG_TOKEN} from "src/util/interfaces";
+import {MatDialog, MatDialogRef} from "@angular/material/dialog";
 
 
 const CONNECTIVITY_NAME_PLATE = 'Connectivity'
@@ -137,6 +138,7 @@ export class ConnectivityBrowserComponent implements OnInit, AfterViewInit, OnDe
     public selectedDatasetKgId: string = ''
     public selectedDatasetKgSchema: string = ''
     public connectedAreas = []
+    public fullGridPixelSize = 10
 
     private selectedParcellationFlatRegions$ = this.store$.pipe(
       select(viewerStateAllRegionsFlattenedRegionSelector)
@@ -152,11 +154,16 @@ export class ConnectivityBrowserComponent implements OnInit, AfterViewInit, OnDe
 
     @ViewChild('connectivityComponent', {read: ElementRef}) public connectivityComponentElement: ElementRef<HTMLHbpConnectivityMatrixRowElement>
     @ViewChild('fullConnectivityGrid') public fullConnectivityGridElement: ElementRef<HTMLFullConnectivityGridElement>
-
+
+    @ViewChild('fullGridTmp') public fullGridTmp: TemplateRef<any>
+
+    private fullGridDialogRef: MatDialogRef<any>
+
     constructor(
         private store$: Store<any>,
         private changeDetectionRef: ChangeDetectorRef,
-        private httpClient: HttpClient,
+        private httpClient: HttpClient, 
+        private matDialog: MatDialog,
         @Inject(BS_ENDPOINT) private siibraApiUrl: string,
     ) {
 
@@ -166,6 +173,14 @@ export class ConnectivityBrowserComponent implements OnInit, AfterViewInit, OnDe
       )
     }
 
+    expandFullGridDialog() {
+      this.fullGridDialogRef = this.matDialog.open(this.fullGridTmp, {
+        // autoFocus: false,
+        panelClass: ['col-12', 'col-sm-12', 'col-md-8', 'col-lg-6', 'col-xl-4'],
+        // ...overwriteConfig
+      })
+    }
+
     public loadUrl: string
     public fullConnectivityLoadUrl: string
 

src/atlasComponents/connectivity/connectivityBrowser/connectivityBrowser.template.html

@@ -46,6 +46,12 @@
                             >
                         <i class="fas fa-info"></i>
                     </button>
+                    <button class="flex-grow-0 flex-shrink-0"
+                            mat-icon-button
+                            (click)="expandFullGridDialog()"
+                    >
+                        <i class="fas fa-th"></i>
+                    </button>
                     <button class="flex-grow-0 flex-shrink-0"
                             mat-icon-button
                             (click)="exportFullConnectivity()"
@@ -88,10 +94,39 @@
             </button>
         </div>
     </hbp-connectivity-matrix-row>
-    <full-connectivity-grid #fullConnectivityGrid
-                            [loadurl]="fullConnectivityLoadUrl"
-                            [name]="selectedDataset"
-                            [description]="selectedDatasetDescription"
-                            onlyExport="true">
-    </full-connectivity-grid>
+<!--    <full-connectivity-grid #fullConnectivityGrid-->
+<!--                            [loadurl]="fullConnectivityLoadUrl"-->
+<!--                            [name]="selectedDataset"-->
+<!--                            [description]="selectedDatasetDescription"-->
+<!--                            onlyExport="true">-->
+<!--    </full-connectivity-grid>-->
 </div>
+
+<ng-template #fullGridTmp>
+    <div class="d-flex flex-column align-content-start">
+        <div class="d-block">
+            <div class="d-flex align-items-center">
+                <mat-slider
+                        class="mr-4"
+                        [max]="10"
+                        [min]="1"
+                        [step]="1"
+                        [thumbLabel]="fullGridPixelSize"
+                        [tickInterval]="1"
+                        [(ngModel)]="fullGridPixelSize"
+                        [vertical]="false"
+                        aria-labelledby="Connectivity grid slider, to change pixel size.">
+                </mat-slider>
+                <span class="text-nowrap">{{selectedDataset}}</span>
+            </div>
+        </div>
+        <div class="d-block">
+            <full-connectivity-grid #fullConnectivityGrid
+                                    theme="dark"
+                                    [textwidth]="fullGridPixelSize*7"
+                                    [pixelsize]="fullGridPixelSize"
+                                    [loadurl]="fullConnectivityLoadUrl">
+            </full-connectivity-grid>
+        </div>
+    </div>
+</ng-template>

src/atlasComponents/connectivity/module.ts

@@ -4,10 +4,12 @@ import { AngularMaterialModule } from "src/sharedModules";
 import { ConnectivityBrowserComponent } from "./connectivityBrowser/connectivityBrowser.component";
 import {HasConnectivity} from "src/atlasComponents/connectivity/hasConnectivity.directive";
 import {KgDatasetModule} from "src/atlasComponents/regionalFeatures/bsFeatures/kgDataset";
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
     KgDatasetModule,
     AngularMaterialModule
   ],