Merge pull request #531 from HumanBrainProject/bugfix_downloadPreview

Restore download of dataset preview

common/constants.js

@@ -5,6 +5,8 @@
     TOGGLE_EXPLORE_PANEL: `Toggle explore panel`,
     MODALITY_FILTER: `Toggle dataset modality filter`,
     LIST_OF_DATASETS: `List of datasets`,
+    DOWNLOAD_PREVIEW: `Download`,
+    DOWNLOAD_PREVIEW_CSV: `Download CSV`,
 
     // overlay specific
     CONTEXT_MENU: `Viewer context menu`,

docs/advanced/keyboard.md

@@ -6,4 +6,5 @@ Please note that the keyboard shortcuts may alter the behaviour irreversibly.
 |---|---|
 |[0-9]|Toggle layer visibility|
 |[h] [?]|Show help|
-|[o]|Toggle orthographic/perspective _3d view_ |
+|[o]|Toggle orthographic/perspective _3d view_ |
\ No newline at end of file
+|[a]|Toggle axis visibility |

docs/releases/v2.2.2.md

@@ -4,3 +4,4 @@
 
 - Fixed PMap color map reset colormap (#523)
 - Modal filters are now sorted alphabetically (#524)
+- Restored ability to download csv and image from dataset preview (#522)

e2e/src/advanced/browsingForDatasets.prod.e2e-spec.js

 const { AtlasPage } = require('../util')
 const { ARIA_LABELS } = require('../../../common/constants')
-const { TOGGLE_EXPLORE_PANEL, MODALITY_FILTER } = ARIA_LABELS
+const { TOGGLE_EXPLORE_PANEL, MODALITY_FILTER, DOWNLOAD_PREVIEW, DOWNLOAD_PREVIEW_CSV } = ARIA_LABELS
 
 const templates = [
   'MNI Colin 27',
@@ -103,6 +103,14 @@ describe('> receptor dataset previews', () => {
       await iavPage.waitFor(true, true)
       const modalHasCanvas = await iavPage.modalHasChild('canvas')
       expect(modalHasCanvas).toEqual(true)
+
+      await iavPage.wait(500)
+
+      const modalHasDownloadBtn = await iavPage.modalHasChild(`[aria-label="${DOWNLOAD_PREVIEW}"]`)
+      const modalHasDownloadCSVBtn = await iavPage.modalHasChild(`[aria-label="${DOWNLOAD_PREVIEW_CSV}"]`)
+
+      expect(modalHasDownloadBtn).toEqual(true)
+      expect(modalHasDownloadCSVBtn).toEqual(true)
     })
 
     it('> can display profile', async () => {
@@ -113,6 +121,14 @@ describe('> receptor dataset previews', () => {
       await iavPage.waitFor(true, true)
       const modalHasCanvas = await iavPage.modalHasChild('canvas')
       expect(modalHasCanvas).toEqual(true)
+
+      await iavPage.wait(500)
+
+      const modalHasDownloadBtn = await iavPage.modalHasChild(`[aria-label="${DOWNLOAD_PREVIEW}"]`)
+      const modalHasDownloadCSVBtn = await iavPage.modalHasChild(`[aria-label="${DOWNLOAD_PREVIEW_CSV}"]`)
+
+      expect(modalHasDownloadBtn).toEqual(true)
+      expect(modalHasDownloadCSVBtn).toEqual(true)
     })
   })
   it('> can display image', async () => {
@@ -122,6 +138,14 @@ describe('> receptor dataset previews', () => {
     await iavPage.waitFor(true, true)
     const modalHasImage = await iavPage.modalHasChild('div[data-img-src]')
     expect(modalHasImage).toEqual(true)
+
+    await iavPage.wait(500)
+
+    const modalHasDownloadBtn = await iavPage.modalHasChild(`[aria-label="${DOWNLOAD_PREVIEW}"]`)
+    const modalHasDownloadCSVBtn = await iavPage.modalHasChild(`[aria-label="${DOWNLOAD_PREVIEW_CSV}"]`)
+
+    expect(modalHasDownloadBtn).toEqual(true)
+    expect(modalHasDownloadCSVBtn).toEqual(false)
   })
 })
 

src/index.html

@@ -11,7 +11,7 @@
   <link rel="stylesheet" href="theme.css">
   <link rel="stylesheet" href="version.css">
   
-  <script src="https://unpkg.com/kg-dataset-previewer@0.0.17/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
+  <script src="https://unpkg.com/kg-dataset-previewer@0.0.18/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
   </script>
 
   <title>Interactive Atlas Viewer</title>

src/res/ext/bigbrain.json

@@ -8,7 +8,7 @@
   "originDatasets": [
     {
       "kgSchema": "minds/core/dataset/v1.0.0",
-      "kgId": "e32f9053-38c9-4911-b868-845c56828f4d"
+      "kgId": "d07f9305-1e75-4548-a348-b155fb323d31"
     }
   ],
   "nehubaConfigURL": "nehubaConfig/bigbrainNehubaConfig",

src/ui/databrowserModule/databrowser.useEffect.ts

@@ -172,7 +172,7 @@ export class DataBrowserUseEffect implements OnDestroy {
   
             return forkJoin(
               from(this.kgSingleDatasetService.getInfoFromKg({ kgSchema: re[0], kgId: re[1] })),
-              this.http.get(`${DS_PREVIEW_URL}/${re[1]}/${filename}`)
+              this.http.get(`${DS_PREVIEW_URL}/${re[1]}/${encodeURIComponent(filename)}`)
             ).pipe(
               map(([ dataset, file ]) => {
                 return {

src/ui/databrowserModule/kgSingleDatasetService.service.ts

@@ -35,15 +35,6 @@ export class KgSingleDatasetService implements OnDestroy {
     }
   }
 
-  // TODO deprecate, in favour of web component
-  public datasetHasPreview({ name }: { name: string } = { name: null }) {
-    if (!name) { throw new Error('kgSingleDatasetService#datasetHashPreview name must be defined') }
-    const _url = new URL(`${BACKENDURL.replace(/\/$/, '')}/datasets/hasPreview`)
-    const searchParam = _url.searchParams
-    searchParam.set('datasetName', name)
-    return this.http.get(_url.toString())
-  }
-
   public getInfoFromKg({ kgId, kgSchema = 'minds/core/dataset/v1.0.0' }: Partial<KgQueryInterface>) {
     const _url = new URL(`${BACKENDURL.replace(/\/$/, '')}/datasets/kgInfo`)
     const searchParam = _url.searchParams

src/ui/databrowserModule/preview/previewComponentWrapper/previewCW.component.ts

-import { Component, Input, Inject } from "@angular/core";
+import { Component, Input, Inject, ViewChild, ElementRef } from "@angular/core";
 import { MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { AtlasViewerConstantsServices } from "../../singleDataset/singleDataset.base";
-import { Observable } from "rxjs";
+import { Observable, fromEvent, Subscription, from, of, throwError } from "rxjs";
+import { switchMapTo, catchError, take, concatMap, map, retryWhen, delay } from "rxjs/operators";
+import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
+import { ARIA_LABELS } from 'common/constants'
+
+const { 
+  DOWNLOAD_PREVIEW,
+  DOWNLOAD_PREVIEW_CSV
+} = ARIA_LABELS
+
+const fromPromiseRetry = ({ retries = 10, timeout = 100 } = {}) => {
+  const retryCounter = 0
+  return (fn: () => Promise<any>) => new Observable(obs => {
+    fn()
+      .then(val => obs.next(val))
+      .catch(e => obs.error(e))
+      .finally(() => obs.complete())
+  }).pipe(
+    
+    retryWhen(err => {
+      if (retryCounter >= retries) return throwError(err)
+      return err.pipe(
+        delay(timeout)
+      )
+    })
+  )
+}
 
 @Component({
   templateUrl: './previewCW.template.html',
@@ -12,6 +38,14 @@ import { Observable } from "rxjs";
 
 export class PreviewComponentWrapper{
 
+  public DOWNLOAD_PREVIEW_ARIA_LABEL = DOWNLOAD_PREVIEW
+  public DOWNLOAD_PREVIEW_CSV_ARIA_LABEL = DOWNLOAD_PREVIEW_CSV
+
+  private subscriptions: Subscription[] = []
+
+  @ViewChild('dataPreviewerStencilCmp', { read: ElementRef, static: true })
+  private dataPreviewerStencilCmp: ElementRef<any>
+
   public darktheme$: Observable<boolean>
 
   @Input()
@@ -28,7 +62,8 @@ export class PreviewComponentWrapper{
 
   constructor(
     @Inject(MAT_DIALOG_DATA) data: any,
-    private constantService: AtlasViewerConstantsServices
+    private constantService: AtlasViewerConstantsServices,
+    private sanitizer: DomSanitizer
   ){
 
     this.darktheme$ = this.constantService.darktheme$
@@ -40,4 +75,43 @@ export class PreviewComponentWrapper{
       this.datasetName = datasetName
     }
   }
+
+  public downloadHref: SafeResourceUrl
+  public downloadCsvHref: SafeResourceUrl
+
+  ngAfterViewInit(){
+    this.dataPreviewerStencilCmp.nativeElement.getDownloadPreviewHref()
+
+    const hydrateHrefSubscription = fromEvent(this.dataPreviewerStencilCmp.nativeElement, 'renderEvent').pipe(
+      switchMapTo(
+        fromPromiseRetry()(() => this.dataPreviewerStencilCmp.nativeElement.getDownloadPreviewHref()).pipe(
+          concatMap((downloadHref: string) => {
+            return from(this.dataPreviewerStencilCmp.nativeElement.getDownloadCsvHref()).pipe(
+              catchError(err => of(null)),
+              map(csvHref => {
+                return {
+                  downloadHref,
+                  csvHref
+                }
+              })
+            )
+          })
+        )
+      ),
+      take(1)
+    ).subscribe(({ downloadHref, csvHref }) => {
+      if (csvHref) this.downloadCsvHref = this.sanitizer.bypassSecurityTrustResourceUrl(csvHref)
+      this.downloadHref = this.sanitizer.bypassSecurityTrustResourceUrl(downloadHref)
+    })
+
+    this.subscriptions.push(
+      hydrateHrefSubscription
+    )
+  }
+
+  ngOnDestroy(){
+    while(this.subscriptions.length > 0) {
+      this.subscriptions.pop().unsubscribe()
+    }
+  }  
 }
\ No newline at end of file

src/ui/databrowserModule/preview/previewComponentWrapper/previewCW.template.html

@@ -11,8 +11,8 @@
     </div>
 
     <!-- main content -->
-    <div class="flex-grow-1 flex-shrink-1">
-      <span class="d-block">
+    <div class="flex-grow-1 flex-shrink-1 w-0 d-flex align-items-center">
+      <span class="text-truncate">
         {{ filename }}
       </span>
       <small class="text-muted d-block">
@@ -34,6 +34,29 @@
   [darkmode]="darktheme$ | async"
   [filename]="filename"
   [kgId]="kgId"
-  [backendUrl]="backendUrl">
+  [backendUrl]="backendUrl"
+  #dataPreviewerStencilCmp>
 
 </kg-dataset-previewer>
+
+<div class="flex-shrink-0 flex-grow-0 d-inline-flex">
+  <a *ngIf="downloadHref"
+    [attr.href]="downloadHref"
+    [attr.download]="filename"
+    [attr.aria-label]="DOWNLOAD_PREVIEW_ARIA_LABEL"
+    target="_blank"
+    mat-icon-button
+    color="primary">
+    <i class="fas fa-download"></i>
+  </a>
+
+  <a *ngIf="downloadCsvHref"
+    [attr.href]="downloadCsvHref"
+    [attr.download]="filename"
+    [attr.aria-label]="DOWNLOAD_PREVIEW_CSV_ARIA_LABEL"
+    target="_blank"
+    mat-icon-button
+    color="primary">
+    <i class="fas fa-file-csv"></i>
+  </a>
+</div>