Merge pull request #1036 from FZJ-INM1-BDA/staging

v2.4.8

.github/workflows/docker_img.yml

@@ -24,23 +24,26 @@ jobs:
 
         echo "BRANCH_NAME=${GITHUB_REF#refs/heads/}" >> $GITHUB_ENV
         
+        echo "MATOMO_URL=${{ env.MATOMO_URL_PROD }}" >> $GITHUB_ENV
+        echo "MATOMO_ID=${{ env.MATOMO_ID_PROD }}" >> $GITHUB_ENV
+
         if [[ "$GITHUB_REF" == 'refs/heads/master' ]]
         then
           echo "Either master, using prod env..."
-          echo "MATOMO_URL=${{ env.MATOMO_URL_PROD }}" >> $GITHUB_ENV
-          echo "MATOMO_ID=${{ env.MATOMO_ID_PROD }}" >> $GITHUB_ENV
           echo "BS_REST_URL=${{ env.SIIBRA_API_STABLE }}" >> $GITHUB_ENV
         elif [[ "$GITHUB_REF" == 'refs/heads/staging' ]]
         then
           echo "Either staging, using staging env..."
-          echo "MATOMO_URL=${{ env.MATOMO_URL_PROD }}" >> $GITHUB_ENV
-          echo "MATOMO_ID=${{ env.MATOMO_ID_PROD }}" >> $GITHUB_ENV
           echo "BS_REST_URL=${{ env.SIIBRA_API_RC }}" >> $GITHUB_ENV
         else
-          echo "Using dev env..."
-          echo "MATOMO_URL=${{ env.MATOMO_URL_DEV }}" >> $GITHUB_ENV
-          echo "MATOMO_ID=${{ env.MATOMO_ID_DEV }}" >> $GITHUB_ENV
-          echo "BS_REST_URL=${{ env.SIIBRA_API_LATEST }}" >> $GITHUB_ENV
+          if [[ "$GITHUB_REF" == *hotfix* ]]
+          then
+            echo "Hotfix branch, using prod env..."
+            echo "BS_REST_URL=${{ env.SIIBRA_API_STABLE }}" >> $GITHUB_ENV
+          else
+            echo "Using dev env..."
+            echo "BS_REST_URL=${{ env.SIIBRA_API_LATEST }}" >> $GITHUB_ENV
+          fi
         fi
 
     - name: 'Set version variable'

common/constants.js

@@ -70,7 +70,8 @@
     USER_ANNOTATION_HIDE: 'user annotations hide',
     USER_ANNOTATION_DELETE: 'Delete annotation',
     GOTO_ANNOTATION_ROI: 'Navigate to annotation location of interest',
-    EXIT_ANNOTATION_MODE: 'Exit annotation mode'
+    EXIT_ANNOTATION_MODE: 'Exit annotation mode',
+    BULK_DELETE_ANNOTATIONS: 'Delete all user annotations'
   }
 
   exports.IDS = {
@@ -79,6 +80,8 @@
   }
 
   exports.CONST = {
+    LOADING_TXT: `Loading ...`,
+
     CANNOT_DECIPHER_HEMISPHERE: 'Cannot decipher region hemisphere.',
     DOES_NOT_SUPPORT_MULTI_REGION_SELECTION: `Please only select a single region.`,
     MULTI_REGION_SELECTION: `Multi region selection`,
@@ -103,6 +106,9 @@
     QUICKTOUR_OK: `Start`,
     QUICKTOUR_NEXTTIME: `Not now`,
     QUICKTOUR_CANCEL: `Dismiss`,
+
+    DELETE_ALL_ANNOTATION_CONFIRMATION_MSG: `Are you sure you want to delete all annotations?`,
+    LOADING_ANNOTATION_MSG: `Loading annotations... Please wait...`
   }
 
   exports.QUICKTOUR_DESC ={

docs/releases/v2.4.8.md

@@ -0,0 +1,13 @@
+# v2.4.8
+
+## Enhancements
+
+- Added badges to annotation tab button to show number of annotations added (#1007)
+- Added some feedbacks when annotations are being loaded
+- Added delete all annotation button
+- Added feedbacks when annotation from different reference spaces are added
+
+## Under the hood stuff
+
+- Tweaked space bar capture
+- Allow branches with `hotfix` in its name to target production siibra-api endpoints

mkdocs.yml

@@ -40,6 +40,7 @@ pages:
     - Fetching datasets: 'advanced/datasets.md'
     - Display non-atlas volumes: 'advanced/otherVolumes.md'
   - Release notes:
+    - v2.4.8: 'releases/v2.4.8.md'
     - v2.4.7: 'releases/v2.4.7.md'
     - v2.4.6: 'releases/v2.4.6.md'
     - v2.4.5: 'releases/v2.4.5.md'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interactive-viewer",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "description": "HBP interactive atlas viewer. Integrating KG query, dataset previews & more. Based on humanbrainproject/nehuba & google/neuroglancer. Built with angular",
   "scripts": {
     "build-aot": "PRODUCTION=true GIT_HASH=`node -e 'console.log(require(\"./package.json\").version)'` webpack --config ./webpack/webpack.aot.js && node ./third_party/matomo/processMatomo.js",

spec/test.ts

@@ -18,10 +18,12 @@ getTestBed().initTestEnvironment(
   platformBrowserDynamicTesting()
 );
 
-const testContext = require.context('../src', true, /\.spec\.ts$/)
-testContext.keys().map(testContext)
+// const testContext = require.context('../src', true, /\.spec\.ts$/)
+// testContext.keys().map(testContext)
 
-const workerCtx = require.context('../worker', true, /\.spec\.js$/)
-workerCtx.keys().map(workerCtx)
+// const workerCtx = require.context('../worker', true, /\.spec\.js$/)
+// workerCtx.keys().map(workerCtx)
 
-require('../common/util.spec.js')
+// require('../common/util.spec.js')
+
+require('../src/util/directives/keyDownListener.directive.spec')

src/atlasComponents/userAnnotations/annotationList/annotationList.component.ts

@@ -1,15 +1,16 @@
-import {Component, ViewChild} from "@angular/core";
-import {ARIA_LABELS} from "common/constants";
+import { Component, Optional, ViewChild } from "@angular/core";
+import { ARIA_LABELS, CONST } from "common/constants";
 import { ModularUserAnnotationToolService } from "../tools/service";
 import { IAnnotationGeometry, TExportFormats } from "../tools/type";
 import { ComponentStore } from "src/viewerModule/componentStore";
 import { map, shareReplay, startWith } from "rxjs/operators";
-import { Observable } from "rxjs";
+import { Observable, Subscription } from "rxjs";
 import { TZipFileConfig } from "src/zipFilesOutput/type";
 import { TFileInputEvent } from "src/getFileInput/type";
 import { FileInputDirective } from "src/getFileInput/getFileInput.directive";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { unzip } from "src/zipFilesOutput/zipFilesOutput.directive";
+import { DialogService } from "src/services/dialogService.service";
 
 const README = `{id}.sands.json file contains the data of annotations. {id}.desc.json contains the metadata of annotations.`
 
@@ -26,11 +27,17 @@ export class AnnotationList {
 
   public ARIA_LABELS = ARIA_LABELS
 
-
   @ViewChild(FileInputDirective)
   fileInput: FileInputDirective
 
+  private subs: Subscription[] = []
+  private managedAnnotations: IAnnotationGeometry[] = []
   public managedAnnotations$ = this.annotSvc.spaceFilteredManagedAnnotations$
+  public annotationInOtherSpaces$ = this.annotSvc.otherSpaceManagedAnnotations$
+
+  public badge$ = this.managedAnnotations$.pipe(
+    map(mann => mann.length > 0 ? mann.length : null)
+  )
 
   public manAnnExists$ = this.managedAnnotations$.pipe(
     map(arr => !!arr && arr.length > 0),
@@ -64,10 +71,15 @@ export class AnnotationList {
     private annotSvc: ModularUserAnnotationToolService,
     private snackbar: MatSnackBar,
     cStore: ComponentStore<{ useFormat: TExportFormats }>,
+    @Optional() private dialogSvc: DialogService,
   ) {
     cStore.setState({
       useFormat: 'sands'
     })
+
+    this.subs.push(
+      this.managedAnnotations$.subscribe(anns => this.managedAnnotations = anns)
+    )
   }
 
   public hiddenAnnotations$ = this.annotSvc.hiddenAnnotations$
@@ -82,6 +94,11 @@ export class AnnotationList {
   }
 
   async handleImportEvent(ev: TFileInputEvent<'text' | 'file'>){
+
+    const { abort } = this.dialogSvc.blockUserInteraction({
+      title: CONST.LOADING_TXT,
+      markdown: CONST.LOADING_ANNOTATION_MSG,
+    })
     try {
       const clearFileInputAndInform = () => {
         if (this.fileInput) {
@@ -135,6 +152,31 @@ export class AnnotationList {
       this.snackbar.open(`Error importing: ${e.toString()}`, 'Dismiss', {
         duration: 3000
       })
+    } finally {
+      abort()
+    }
+  }
+
+  async deleteAllAnnotation(){
+    if (this.dialogSvc) {
+      try {
+        await this.dialogSvc.getUserConfirm({
+          markdown: CONST.DELETE_ALL_ANNOTATION_CONFIRMATION_MSG
+        })
+
+        for (const ann of this.managedAnnotations) {
+          ann.remove()
+        }
+      } catch (e) {
+        // aborted
+      }
+    } else {
+      if (window.confirm(CONST.DELETE_ALL_ANNOTATION_CONFIRMATION_MSG)) {
+
+        for (const ann of this.managedAnnotations) {
+          ann.remove()
+        }
+      }
     }
   }
 }

src/atlasComponents/userAnnotations/annotationList/annotationList.style.css

@@ -8,3 +8,11 @@
 :host-context([darktheme="false"]) .hovering-header {
     background-color: rgb(245, 245, 245);
 }
+
+.single-annotation-grid-container
+{
+    display: grid; 
+    grid-template-columns: 3em auto; 
+    gap: 0px 0px; 
+    grid-template-areas: ". ."; 
+}

src/atlasComponents/userAnnotations/annotationList/annotationList.template.html

@@ -33,6 +33,15 @@
                 [disabled]="!(manAnnExists$ | async)">
                 <i class="fas fa-download"></i>
             </button>
+
+            <!-- delete all annotations -->
+            <button mat-icon-button
+                color="warn"
+                (click)="deleteAllAnnotation()"
+                [matTooltip]="ARIA_LABELS.BULK_DELETE_ANNOTATIONS"
+                [disabled]="!(manAnnExists$ | async)">
+                <i class="fas fa-trash"></i>
+            </button>
         </mat-card-subtitle>
     </div>
 
@@ -68,20 +77,23 @@
 
                     <!-- single annotation edit body -->
                     <ng-template matExpansionPanelContent>
-                        <div class="d-flex">
-
+                        <div class="single-annotation-grid-container">
                             <!-- spacer for inset single-annotation-unit -->
-                            <div class="w-3em flex-grow-0 flex-shrink-0"></div>
-
-                            <single-annotation-unit [single-annotation-unit-annotation]="managedAnnotation"
-                                class="flex-grow-1 flex-shrink-1">
+                            <div></div>
+                            <single-annotation-unit [single-annotation-unit-annotation]="managedAnnotation">
                             </single-annotation-unit>
                         </div>
                     </ng-template>
                 </mat-expansion-panel>
             </mat-accordion>
         </ng-template>
 
+        <ng-template [ngIf]="annotationInOtherSpaces$ | async" let-annsInOtherSpace>
+            <div *ngIf="annsInOtherSpace.length > 0" class="p-4 text-muted">
+                {{ annsInOtherSpace.length }} annotations found in other reference spaces, and not shown here.
+            </div>
+        </ng-template>
+
         <!-- place holder when no annotations exist -->
         <ng-template #placeholderTmpl>
             <div class="p-4 text-muted">

src/atlasComponents/userAnnotations/filterAnnotationBySpace.pipe.ts

@@ -1,13 +1,20 @@
 import { Pipe, PipeTransform } from "@angular/core";
 import { IAnnotationGeometry } from "./tools/type";
 
+type TOpts = {
+  reverse?: boolean
+}
+
 @Pipe({
   name: 'filterAnnotationsBySpace',
   pure: true
 })
 
 export class FilterAnnotationsBySpace implements PipeTransform{
-  public transform(annotations: IAnnotationGeometry[], space: { '@id': string }): IAnnotationGeometry[]{
-    return annotations.filter(ann => ann.space["@id"] === space["@id"])
+  public transform(annotations: IAnnotationGeometry[], space: { '@id': string }, opts?: TOpts): IAnnotationGeometry[]{
+    const { reverse = false } = opts || {}
+    return reverse
+      ? annotations.filter(ann => ann.space["@id"] !== space["@id"])
+      : annotations.filter(ann => ann.space["@id"] === space["@id"])
   }
 }

src/atlasComponents/userAnnotations/tools/service.ts

@@ -103,6 +103,20 @@ export class ModularUserAnnotationToolService implements OnDestroy{
     scanCollapse(),
     shareReplay(1),
   )
+
+  public otherSpaceManagedAnnotations$ = combineLatest([
+    this.selectedTmpl$,
+    this.managedAnnotations$
+  ]).pipe(
+    map(([tmpl, annts]) => {
+      return this.filterAnnotationBySpacePipe.transform(
+        annts,
+        tmpl,
+        { reverse: true }
+      )
+    })
+  )
+
   public spaceFilteredManagedAnnotations$ = combineLatest([
     this.selectedTmpl$,
     this.managedAnnotations$

src/components/confirmDialog/confirmDialog.component.ts

@@ -25,12 +25,15 @@ export class ConfirmDialogComponent {
   @Input()
   public markdown: string
 
+  public hideActionBar = false
+
   constructor(@Inject(MAT_DIALOG_DATA) data: any) {
-    const { title = null, message  = null, markdown, okBtnText, cancelBtnText} = data || {}
+    const { title = null, message  = null, markdown, okBtnText, cancelBtnText, hideActionBar} = data || {}
     if (title) this.title = title
     if (message) this.message = message
     if (markdown) this.markdown = markdown
     if (okBtnText) this.okBtnText = okBtnText
     if (cancelBtnText) this.cancelBtnText = cancelBtnText
+    if (hideActionBar) this.hideActionBar = hideActionBar
   }
 }

src/components/confirmDialog/confirmDialog.template.html

@@ -17,7 +17,7 @@ <h1 mat-dialog-title>
 
 <mat-divider></mat-divider>
 
-<mat-dialog-actions class="justify-content-start flex-row-reverse">
+<mat-dialog-actions *ngIf="!hideActionBar" class="justify-content-start flex-row-reverse">
     <button [mat-dialog-close]="true" mat-raised-button color="primary">{{ okBtnText }}</button>
   <button [mat-dialog-close]="false" mat-button>{{ cancelBtnText }}</button>
 </mat-dialog-actions>

src/services/dialogService.service.ts

@@ -3,6 +3,10 @@ import { ConfirmDialogComponent } from "src/components/confirmDialog/confirmDial
 import { DialogComponent } from "src/components/dialog/dialog.component";
 import {MatDialog, MatDialogRef} from "@angular/material/dialog";
 
+type TCancellable = {
+  abort: () => void
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -16,13 +20,26 @@ export class DialogService {
 
   }
 
+  public blockUserInteraction(config: Partial<DialogConfig>): TCancellable {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        ...config,
+        hideActionBar: true
+      },
+      hasBackdrop: true,
+      disableClose: true
+    })
+    const abort = () => dialogRef.close()
+    return { abort }
+  }
+
   public getUserConfirm(config: Partial<DialogConfig> = {}): Promise<string> {
     this.confirmDialogRef = this.dialog.open(ConfirmDialogComponent, {
       data: config,
     })
     return new Promise((resolve, reject) => this.confirmDialogRef.afterClosed()
       .subscribe(val => {
-        if (val) { resolve() } else { reject('User cancelled') }
+        if (val) { resolve('') } else { reject('User cancelled') }
       },
       reject,
       () => this.confirmDialogRef = null))