Merge pull request #413 from HumanBrainProject/feat/simplifyDownloadZipo

feat: simplified download zip

deploy/datasets/index.js

@@ -177,6 +177,7 @@ datasetsRouter.get('/downloadKgFiles', checkKgQuery, async (req, res) => {
   try {
     const stream = await getDatasetFileAsZip({ user, kgId })
     res.setHeader('Content-Type', 'application/zip')
+    res.setHeader('Content-Disposition', `attachment; filename="${kgId}.zip"`)
     stream.pipe(res)
   } catch (e) {
     console.warn('datasets/index#downloadKgFiles', e)

src/ui/databrowserModule/kgSingleDatasetService.service.ts

@@ -64,26 +64,12 @@ export class KgSingleDatasetService implements OnDestroy{
       })
   }
 
-  public downloadZipFromKg({ kgSchema = 'minds/core/dataset/v1.0.0', kgId } : Partial<KgQueryInterface>, filename = 'download'){
+  public getDownloadZipFromKgHref({ kgSchema = 'minds/core/dataset/v1.0.0', kgId }){
     const _url = new URL(`${this.constantService.backendUrl}datasets/downloadKgFiles`)
     const searchParam = _url.searchParams
     searchParam.set('kgSchema', kgSchema)
     searchParam.set('kgId', kgId)
-    return fetch(_url.toString())
-      .then(res => {
-        if (res.status >= 400) throw new Error(res.status.toString())
-        return res.blob()
-      })
-      .then(data => this.simpleDownload(data, filename))
-  }
-
-  public simpleDownload(data, filename) {
-    const blob = new Blob([data], { type: 'application/zip'})
-    const url= window.URL.createObjectURL(blob);
-    const anchor = document.createElement("a");
-    anchor.download = filename + '.zip';
-    anchor.href = url;
-    anchor.click();
+    return _url.toString()
   }
 
   public showPreviewList(template: TemplateRef<any>){

src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html

@@ -44,14 +44,16 @@
 
     <!-- download -->
     <mat-grid-tile *ngIf="downloadEnabled">
-      <button
-        matTooltip="Download"
-        iav-stop="click mousedown"
-        (click)="downloadZipFromKg()"
-        [disabled]="downloadInProgress"
-        mat-icon-button>
-        <i class="ml-1 fas" [ngClass]="!downloadInProgress? 'fa-download' :'fa-spinner fa-pulse'"></i>
-      </button>
+      <a [href]="dlFromKgHref"
+        target="_blank"
+        iav-stop="click mousedown">
+        <button
+          matTooltip="Download"
+          [disabled]="downloadInProgress"
+          mat-icon-button>
+          <i class="ml-1 fas" [ngClass]="!downloadInProgress? 'fa-download' :'fa-spinner fa-pulse'"></i>
+        </button>
+      </a>
     </mat-grid-tile>
   </mat-grid-list>
 
@@ -107,19 +109,21 @@
 
 
   <!-- download -->
-  <button
-    (click)="downloadZipFromKg()"
-    [disabled]="downloadInProgress"
-    [matTooltip]="tooltipText"
-    class="m-2"
-    *ngIf="files.length > 0"
-    mat-button
-    color="basic">
-    <span>
-      Download as Zip
-    </span>
-    <i class="ml-1 fas" [ngClass]="!downloadInProgress? 'fa-download' :'fa-spinner fa-pulse'"></i>
-  </button>
+  <a *ngIf="files.length > 0"
+    [href]="dlFromKgHref"
+    target="_blank">
+    <button
+      [disabled]="downloadInProgress"
+      [matTooltip]="tooltipText"
+      class="m-2"
+      mat-button
+      color="basic">
+      <span>
+        Download as Zip
+      </span>
+      <i class="ml-1 fas" [ngClass]="!downloadInProgress? 'fa-download' :'fa-spinner fa-pulse'"></i>
+    </button>
+  </a>
 
   <button mat-button
     mat-dialog-close

src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html

@@ -87,15 +87,17 @@
     </button>
     
     <!-- download -->
-    <button mat-menu-item
-      *ngIf="downloadEnabled"
-      class="no-focus"
-      iav-stop="mousedown click"
-      (click)="downloadZipFromKg()"
-      [disabled]="downloadInProgress">
-      <mat-icon [ngClass]="{'fa-spinner': downloadInProgress}" fontSet="fas" [fontIcon]="!downloadInProgress? 'fa-download' :'fa-pulse'"></mat-icon>
-      Download
-    </button>
+    <a *ngIf="downloadEnabled"
+      [href]="dlFromKgHref"
+      target="_blank"
+      iav-stop="mousedown click">
+      <button mat-menu-item
+        class="no-focus"
+        [disabled]="downloadInProgress">
+        <mat-icon [ngClass]="{'fa-spinner': downloadInProgress}" fontSet="fas" [fontIcon]="!downloadInProgress? 'fa-download' :'fa-pulse'"></mat-icon>
+        Download
+      </button>
+    </a>
   </ng-template>
 </mat-menu>
 
@@ -127,11 +129,13 @@
   </button>
 
   <!-- download dataset -->
-  <button mat-icon-button
-    *ngIf="downloadEnabled"
-    iav-stop="click mousedown"
-    (click)="downloadZipFromKg()"
-    [disabled]="downloadInProgress">
-    <i class="fas" [ngClass]="!downloadInProgress? 'fa-download' :'fa-spinner fa-pulse'"></i>
-  </button>
+  <a *ngIf="downloadEnabled"
+    [href]="dlFromKgHref"
+    target="_blank"
+    iav-stop="click mousedown">
+    <button mat-icon-button
+      [disabled]="downloadInProgress">
+      <i class="fas" [ngClass]="!downloadInProgress? 'fa-download' :'fa-spinner fa-pulse'"></i>
+    </button>
+  </a>
 </ng-template>
\ No newline at end of file

src/ui/databrowserModule/singleDataset/singleDataset.base.ts

@@ -52,6 +52,8 @@ export class SingleDatasetBase implements OnInit {
   public fetchingSingleInfoInProgress = false
   public downloadInProgress = false
 
+  public dlFromKgHref: string = null
+
   public favedDataentries$: Observable<DataEntry[]>
   constructor(
     private dbService: DatabrowserService,
@@ -76,6 +78,7 @@ export class SingleDatasetBase implements OnInit {
 
   ngOnInit() {
     const { kgId, kgSchema, dataset } = this
+    this.dlFromKgHref = this.singleDatasetService.getDownloadZipFromKgHref({ kgSchema, kgId })
     if ( dataset ) {
       const { name, description, kgReference, publications, files, preview, ...rest } = dataset
       this.name = name
@@ -155,20 +158,4 @@ export class SingleDatasetBase implements OnInit {
     this.previewingFile.emit(file)
     this.singleDatasetService.previewFile(file, this.dataset)
   }
-  
-  downloadZipFromKg() {
-    this.downloadInProgress = true
-    this.cdr.markForCheck()
-
-    const { kgId, kgSchema }  = this
-    this.singleDatasetService.downloadZipFromKg({
-      kgId,
-      kgSchema
-    }, this.name)
-      .catch(err => this.constantService.catchError(err))
-      .finally(() => {
-        this.downloadInProgress = false
-        this.cdr.markForCheck()
-      })
-  }
 }