chore: render dataset card classic UI

src/atlasComponents/regionalFeatures/bsFeatures/kgDataset/showDataset/showDataset.directive.ts

@@ -59,7 +59,7 @@ export class ShowDatasetDialogDirective{
       }
       if (this.name || this.description) {
         const { name, description, urls } = this
-        return { name, description, urls }
+        return { name, description, urls, useClassicUi: true }
       }
     })()
 
@@ -72,10 +72,11 @@ export class ShowDatasetDialogDirective{
     }
 
     if (!this.dialogCmp) throw new Error(`IAV_DATASET_SHOW_DATASET_DIALOG_CMP not provided!`)
+    const { useClassicUi } = data
     this.matDialog.open(this.dialogCmp, {
       ...ShowDatasetDialogDirective.defaultDialogConfig,
-      panelClass: ['no-padding-dialog'],
-      data
+      data,
+      ...(useClassicUi ? {} : { panelClass: ['no-padding-dialog'] })
     })
   }
 }

src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.component.ts

@@ -37,6 +37,7 @@ export class KgRegDetailCmp extends BsRegionInputBase implements OnChanges {
   public isGdprProtected = false
 
   public descriptionFallback = `[This dataset cannot be fetched right now]`
+  public useClassicUi = false
 
   public description: string
   public name: string
@@ -51,10 +52,11 @@ export class KgRegDetailCmp extends BsRegionInputBase implements OnChanges {
   ){
     super(svc)
     if (data) {
-      const { description, name, urls } = data
+      const { description, name, urls, useClassicUi } = data
       this.description = description
       this.name = name
       this.urls = urls
+      this.useClassicUi = useClassicUi
     }
   }
 

src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.template.html

-<!-- header -->
-<mat-card class="mat-elevation-z4">
-
-  <div class="sidenav-cover-header-container bg-50-grey-20">
-    <mat-card-title>
-      <ng-content select="[region-of-interest]"></ng-content>
-      <div *ngIf="!loadingFlag; else isLoadingTmpl">
-        {{ name || nameFallback }}
-      </div>
-    </mat-card-title>
-
-    <mat-card-subtitle class="d-inline-flex align-items-center">
-      <mat-icon fontSet="fas" fontIcon="fa-database"></mat-icon>
-      <span>
-        ebrains regional dataset
-      </span>
-
-      <button *ngIf="isGdprProtected"
-        [matTooltip]="CONST.GDPR_TEXT"
-        mat-icon-button color="warn">
-        <i class="fas fa-exclamation-triangle"></i>
-      </button>
-
-      <mat-divider [vertical]="true" class="ml-2 h-2rem"></mat-divider>
-
-      <!-- explore btn -->
+
+<!-- classic UI -->
+<ng-template [ngIf]="useClassicUi" [ngIfElse]="modernUi">
+  <mat-card-subtitle>
+    <ng-container *ngTemplateOutlet="nameTmpl">
+    </ng-container>
+  </mat-card-subtitle>
+
+
+  <!-- desc -->
+  <small>
+    <ng-container *ngTemplateOutlet="descTmpl"></ng-container>
+  </small>
+
+
+  <!-- footer -->
+  <mat-card-actions iav-media-query #iavMediaQuery="iavMediaQuery">
+    <ng-container *ngTemplateOutlet="actionBtnsTmpl; context: {
+      $implicit: (iavMediaQuery.mediaBreakPoint$ | async) > 1
+    }" >
+    </ng-container>
+  </mat-card-actions>
+
+  <ng-template #actionBtnsTmpl let-useSmallIcon>
+    <!-- explore -->
+    <ng-container>
+
       <a *ngFor="let kgRef of (urls || [])"
         [href]="kgRef.doi | doiParserPipe"
         class="color-inherit"
         mat-icon-button
         [matTooltip]="ARIA_LABELS.EXPLORE_DATASET_IN_KG"
         target="_blank">
-        <i class="fas fa-external-link-alt"></i>
+        <iav-dynamic-mat-button
+          [iav-dynamic-mat-button-style]="useSmallIcon ? 'mat-icon-button' : 'mat-raised-button'"
+          iav-dynamic-mat-button-color="primary">
+
+          <span *ngIf="!useSmallIcon">
+            Explore
+          </span>
+          <i class="fas fa-external-link-alt"></i>
+        </iav-dynamic-mat-button>
       </a>
-      
-    </mat-card-subtitle>
-  </div>
+    </ng-container>
+  </ng-template>
+</ng-template>
+
+<!-- modern UI -->
+<ng-template #modernUi>
+  <!-- header -->
+  <mat-card class="mat-elevation-z4">
 
-</mat-card>
+    <div class="sidenav-cover-header-container bg-50-grey-20">
+      <mat-card-title>
+        <ng-content select="[region-of-interest]"></ng-content>
+        <ng-container *ngTemplateOutlet="nameTmpl">
+        </ng-container>
+      </mat-card-title>
 
-<!-- description -->
+      <mat-card-subtitle class="d-inline-flex align-items-center">
+        <mat-icon fontSet="fas" fontIcon="fa-database"></mat-icon>
+        <span>
+          ebrains regional dataset
+        </span>
 
-<markdown-dom class="text-muted d-block mat-body m-4" *ngIf="!loadingFlag"
-  [markdown]="description || descriptionFallback">
-</markdown-dom>
+        <button *ngIf="isGdprProtected"
+          [matTooltip]="CONST.GDPR_TEXT"
+          mat-icon-button color="warn">
+          <i class="fas fa-exclamation-triangle"></i>
+        </button>
+
+        <mat-divider [vertical]="true" class="ml-2 h-2rem"></mat-divider>
+
+        <!-- explore btn -->
+        <a *ngFor="let kgRef of (urls || [])"
+          [href]="kgRef.doi | doiParserPipe"
+          class="color-inherit"
+          mat-icon-button
+          [matTooltip]="ARIA_LABELS.EXPLORE_DATASET_IN_KG"
+          target="_blank">
+          <i class="fas fa-external-link-alt"></i>
+        </a>
+        
+      </mat-card-subtitle>
+    </div>
+
+  </mat-card>
+
+  <!-- description -->
+  <div class="text-muted d-block mat-body m-4"
+    *ngIf="!loadingFlag">
+    <ng-container *ngTemplateOutlet="descTmpl">
+    </ng-container>
+  </div>
+</ng-template>
+
+<ng-template #nameTmpl>
+  <span *ngIf="!loadingFlag; else isLoadingTmpl">
+    {{ name || nameFallback }}
+  </span>
+</ng-template>
+
+<!-- desc -->
+<ng-template #descTmpl>
+  <markdown-dom 
+    [markdown]="description || descriptionFallback">
+  </markdown-dom>
+</ng-template>
 
+<!-- is loading tmpl -->
 <ng-template #isLoadingTmpl>
   <spinner-cmp></spinner-cmp>
 </ng-template>

src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/module.ts

 import { CommonModule } from "@angular/common";
-import { Component, NgModule } from "@angular/core";
+import { Component, Inject, NgModule, Optional } from "@angular/core";
 import { AngularMaterialModule } from "src/ui/sharedModules/angularMaterial.module";
 import { KgRegSummaryCmp } from "./kgRegSummary/kgRegSummary.component";
 import { KgRegionalFeaturesList } from "./kgRegList/kgRegList.component";
@@ -10,23 +10,39 @@ import { IAV_DATASET_SHOW_DATASET_DIALOG_CMP } from "../kgDataset/showDataset/sh
 import { UtilModule } from "src/util";
 import { ComponentsModule } from "src/components";
 import { BsFeatureService } from "../service";
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
 
 @Component({
-  selector: 'blabla',
+  selector: 'show-ds-dialog-cmp',
   template: `
-<mat-dialog-content class="m-0 p-0">
+<ng-template [ngIf]="useClassicUi" [ngIfElse]="modernUiTmpl">
   <kg-regional-feature-detail></kg-regional-feature-detail>
-</mat-dialog-content>
+</ng-template>
 
-<mat-dialog-actions align="center">
-  <button mat-button mat-dialog-close>
-    Close
-  </button>
-</mat-dialog-actions>
+<ng-template #modernUiTmpl>
+
+  <mat-dialog-content class="m-0 p-0">
+    <kg-regional-feature-detail></kg-regional-feature-detail>
+  </mat-dialog-content>
+
+  <mat-dialog-actions align="center">
+    <button mat-button mat-dialog-close>
+      Close
+    </button>
+  </mat-dialog-actions>
+
+</ng-template>
 `
 })
 
-export class ShowDsDialogCmp{}
+export class ShowDsDialogCmp{
+  public useClassicUi = false
+  constructor(
+    @Optional() @Inject(MAT_DIALOG_DATA) data: any
+  ){
+    this.useClassicUi = data.useClassicUi
+  }
+}
 
 @NgModule({
   imports: [

src/util/siibraApiConstants/types.ts

@@ -84,6 +84,7 @@ export type TDatainfos = {
     cite: string
     doi: string
   }[]
+  useClassicUi: boolean
 }
 
 export type TSpaceFull = {