connectivityBrowser.template.html

<div class="w-100 h-100 d-block d-flex flex-column sxplr-pb-2">
    <form [formGroup]="connectivityFilterForm">
        
        <ng-template [ngIf]="types$ | async" let-types>

            <div
                class="flex-grow-0 flex-shrink-0 d-flex flex-row flex-nowrap d-flex flex-column">
                <mat-form-field class="flex-grow-1 flex-shrink-1 w-100">
                    <mat-label>
                        Modality
                    </mat-label>
                    <mat-select formControlName="selectedType">
                        <mat-option *ngFor="let type of types" [value]="type">
                            {{ type.display_name }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

                <ng-template [ngIf]="cohorts$ | async" let-cohorts>
                    <ng-template [ngIf]="cohorts.length > 0">

                        <mat-form-field class="flex-grow-1 flex-shrink-1 w-100">
                            <mat-label>
                                Cohort
                            </mat-label>
                            <mat-select formControlName="selectedCohort">
                                <mat-option *ngFor="let cohort of cohorts$ | async"
                                    [value]="cohort">
                                    {{ cohort }}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>

                        
                        <ng-template [ngIf]="view$ | async | getProperty : 'showAverageToggle'">
                            <mat-radio-group formControlName="selectedView">
                                <mat-radio-button value="average" class="m-2" color="primary">
                                    Average
                                </mat-radio-button>
                                <mat-radio-button value="subject" class="m-2" color="primary">
                                    Subject
                                </mat-radio-button>
                            </mat-radio-group>
                        </ng-template>
                
                    </ng-template>
                </ng-template>

            </div>
        </ng-template>

        <ng-template [ngIf]="cohortDatasets$ | async" let-cohortDatasets>
            <ng-template [ngIf]="cohortDatasets.length > 1">
                <div class="flex-grow-0 flex-shrink-0 d-flex flex-nowrap align-items-center">
                    <div class="flex-grow-1 flex-shrink-1 w-100">
                        <mat-label>
                            Dataset: {{ view$ | async | getProperty : 'selectedDataset' }}
                        </mat-label>
                        <mat-slider [min]="0"
                            [max]="cohortDatasets.length - 1"
                            step="1"
                            thumbLabel
                            [discrete]="true"
                            class="w-100">
                            <input matSliderThumb formControlName="selectedDatasetIndex">
                        </mat-slider>
                    </div>
                </div>
            </ng-template>
        </ng-template>

        <div *ngIf="view$ | async | getProperty : 'showSubject'"
            class="flex-grow-0 flex-shrink-0 d-flex flex-nowrap align-items-center">
            <div class="flex-grow-1 flex-shrink-1 w-100">
                <mat-label>
                    Subject: {{ view$ | async | getProperty : 'selectedSubject' }}
                </mat-label>
                <mat-slider [min]="0"
                    [max]="(view$ | async | getProperty : 'numSubjects') - 1"
                    [displayWith]="subjectDisplayWith"
                    step="1"
                    [discrete]="true"
                    class="w-100">
                    <input matSliderThumb formControlName="selectedSubjectIndex">
                </mat-slider>
            </div>
        </div>

    </form>

    <ng-template [ngIf]="view$ | async | getProperty : 'region'" let-region>

        <!-- loading spinner -->
        <ng-template [ngIf]="view$ | async | getProperty : 'busy'"
            [ngIfElse]="profileTmpl">
        </ng-template>

        <!-- profile -->
        <ng-template #profileTmpl>
            
            <ng-template #noConnTmpl>
                No connectivity Found
            </ng-template>
        
            <ng-template [ngIf]="view$ | async | getProperty : 'connections'" let-conn
                [ngIfElse]="noConnTmpl">
                <div class="d-flex align-items-center">
                    <form [formGroup]="displayForm">
                        <mat-checkbox
                            class="mr-2"
                            formControlName="logChecked">
                            Log 10
                        </mat-checkbox>
                    </form>
                    <button mat-button [matMenuTriggerFor]="exportMenu">
                        <i class="fas fa-download mr-2"></i>
                        <span>Export</span>
                    </button>
                    <ng-template ngFor [ngForOf]="selectedDatasetAdditionalInfos$ | async" let-info>
                        <button class="icons"
                            mat-icon-button
                            sxplr-dialog
                            [sxplr-dialog-size]="null"
                            [sxplr-dialog-data]="{
                                title: info?.name,
                                descMd: info?.description,
                                actions: [info.ebrains_page]
                            }">
                            <i class="fas fa-info"></i>
                        </button>
                    </ng-template>
                </div>
            
                <hbp-connectivity-matrix-row #connectivityComponent
                    [region]="region.name"
                    [connections]="conn | json"
                    show-export="true"
                    hide-export-view="true"
                    theme="dark">
                </hbp-connectivity-matrix-row>
            </ng-template>
        </ng-template>
    </ng-template>
</div>


<mat-menu #exportMenu="matMenu">
    <button mat-menu-item
        (click)="exportConnectivityProfile()">
        Regional
    </button>
    <button mat-menu-item (click)="exportFullConnectivity()">Dataset</button>
</mat-menu>

<ng-template [ngIf]="view$ | async | getProperty : 'busy'">
    <div class="d-flex justify-content-center">
        <ng-template [ngTemplateOutlet]="loadingTmpl"></ng-template>
    </div>
</ng-template>

<ng-template #loadingTmpl>
    <mat-spinner></mat-spinner>
</ng-template>