diff --git a/docs/releases/v2.12.0.md b/docs/releases/v2.12.0.md index d06017301861d4aec9d2f6dd809bc016632b6fba..15888867a8ec145a8dc8b2bbd2ad52072942bb8c 100644 --- a/docs/releases/v2.12.0.md +++ b/docs/releases/v2.12.0.md @@ -3,6 +3,7 @@ ## Feature - enable rat connectivity +- added visual indicators for selected subject and dataset in connectivity browser ## Behind the scene diff --git a/src/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts b/src/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts index 77b69d99dccae4d04870b68d7ac6a223b59548df..b90f25adb9706e80ae2cf8c433acc58bacceff38 100644 --- a/src/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts +++ b/src/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts @@ -370,6 +370,7 @@ export class ConnectivityBrowserComponent implements OnChanges, OnDestroy { selectedView } }), + distinctUntilChanged((o, n) => o?.feature_id === n?.feature_id && o?.subject === n?.subject && o?.selectedView === n?.selectedView && o?.parcellation?.id === n?.parcellation?.id), shareReplay(1), ) @@ -450,6 +451,7 @@ export class ConnectivityBrowserComponent implements OnChanges, OnDestroy { ) view$ = combineLatest([ + this.busy$, this.selectedDataset$, this.formValue$, this.#fetchingMatrix$, @@ -459,13 +461,16 @@ export class ConnectivityBrowserComponent implements OnChanges, OnDestroy { ), this.region$, ]).pipe( - map(([sDs, form, fetchingMatrix, pureConnections, region]) => { + map(([busy, sDs, form, fetchingMatrix, pureConnections, region]) => { return { showSubject: sDs && form.selectedView === "subject", numSubjects: sDs?.subjects.length, - fetchingMatrix, connections: pureConnections, region, + showAverageToggle: form.selectedCohort !== null && typeof form.selectedCohort !== "undefined", + busy: busy || fetchingMatrix, + selectedSubject: (sDs?.subjects || [])[form.selectedSubjectIndex], + selectedDataset: form?.selectedDatasetIndex } }), shareReplay(1), diff --git a/src/features/connectivity/connectivityBrowser/connectivityBrowser.template.html b/src/features/connectivity/connectivityBrowser/connectivityBrowser.template.html index 416763f02dab74f3dd141ab7d954d7155739a5b7..1b56fa9e49a8f6b2209bd5c76a68c5eb18133585 100644 --- a/src/features/connectivity/connectivityBrowser/connectivityBrowser.template.html +++ b/src/features/connectivity/connectivityBrowser/connectivityBrowser.template.html @@ -32,7 +32,7 @@ </mat-form-field> - <ng-template [ngIf]="formValue$ | async | getProperty : 'selectedCohort'"> + <ng-template [ngIf]="view$ | async | getProperty : 'showAverageToggle'"> <mat-radio-group formControlName="selectedView"> <mat-radio-button value="average" class="m-2" color="primary"> Average @@ -54,7 +54,7 @@ <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 + Dataset: {{ view$ | async | getProperty : 'selectedDataset' }} </mat-label> <mat-slider [min]="0" [max]="cohortDatasets.length - 1" @@ -72,7 +72,7 @@ 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 + Subject: {{ view$ | async | getProperty : 'selectedSubject' }} </mat-label> <mat-slider [min]="0" [max]="(view$ | async | getProperty : 'numSubjects') - 1" @@ -90,15 +90,11 @@ <ng-template [ngIf]="view$ | async | getProperty : 'region'" let-region> <!-- loading spinner --> - <ng-template [ngIf]="view$ | async | getProperty : 'fetchingMatrix'" + <ng-template [ngIf]="view$ | async | getProperty : 'busy'" [ngIfElse]="profileTmpl"> - <div class="d-flex justify-content-center"> - <mat-spinner></mat-spinner> - </div> </ng-template> <!-- profile --> - <!-- <pre>{{ view$ | async | json }}</pre> --> <ng-template #profileTmpl> <ng-template #noConnTmpl> @@ -154,3 +150,13 @@ </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> diff --git a/src/util/periodic.service.ts b/src/util/periodic.service.ts index e3e280cbc541f9a891dc6d7fd36f54dbb5ef385d..d32637ced9f44e3db18dd5a4de9d80767cac5b64 100644 --- a/src/util/periodic.service.ts +++ b/src/util/periodic.service.ts @@ -1,57 +1,21 @@ import { Injectable } from "@angular/core"; -import { Subject, combineLatest, interval, merge } from "rxjs"; -import { filter, map, scan } from "rxjs/operators"; -import { getUuid } from "./fn"; - -type Queue = { - callback: () => boolean - uuid: string -} +import { wait } from "./fn"; @Injectable({ providedIn: 'root' }) export class PeriodicSvc{ - #queue$ = new Subject<Queue>() - #dequeue$ = new Subject<Queue>() - #scannedQueue$ = merge<{ queue?: Queue, dequeue?: Queue }>( - this.#queue$.pipe( - map(queue => ({ queue })), - ), - this.#dequeue$.pipe( - map(dequeue => ({ dequeue })) - ) - ).pipe( - scan((acc, curr) => { - const { queue, dequeue } = curr - if (queue) { - return [...acc, queue] - } - if (dequeue) { - return acc.filter(q => q.uuid !== dequeue.uuid) - } - console.warn(`neither queue nor dequeue were defined!`) - return acc - }, [] as Queue[]) - ) - - addToQueue(callback: () => boolean){ - this.#queue$.next({ callback, uuid: getUuid() }) - } - constructor(){ - combineLatest([ - this.#scannedQueue$, - interval(160) - ]).pipe( - map(([queues, _]) => queues), - filter(queues => queues.length > 0), - ).subscribe(queues => { - for (const queue of queues) { - const { callback } = queue - if (callback()) { - this.#dequeue$.next(queue) - } + /** + * @description retry a callback until it succeeds + * @param callback + */ + async addToQueue(callback: () => boolean) { + // eslint-disable-next-line no-constant-condition + while (true) { + if (callback()) { + break } - }) + await wait(160) + } } }