Merge pull request #1358 from FZJ-INM1-BDA/feat_refineConn

maint: simplify periodic service

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
 

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),

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>

src/util/periodic.service.ts

 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)
+    }
   }
 }