chore: standardise preview card appearance

src/res/css/extra_styles.css

@@ -530,6 +530,11 @@ markdown-dom pre code
   background: none!important;
 }
 
+.bg-50-grey-20
+{
+  background-color: rgba(128,128,128, 0.2);
+}
+
 .dot
 {
   width: 0.5rem;

src/ui/databrowserModule/preview/previewCard/previewCard.template.html

 <mat-card class="mat-elevation-z4">
-  <div class="header-container">
+  <div class="header-container bg-50-grey-20">
     <mat-card-title>
       {{ singleDsView?.name || file.name || filename }}
     </mat-card-title>
@@ -41,25 +41,51 @@
       
     </mat-card-subtitle>
   </div>
-</mat-card>
 
-<mat-card class="mt-4">
-  <single-dataset-view [fullId]="datasetId"
-    [hideTitle]="true"
-    [hidePreview]="true"
-    [hideExplore]="true"
-    [hidePinBtn]="true"
-    [hideDownloadBtn]="true"
-    #singleDsView="singleDatasetView">
+  <mat-card-content class="mt-2 ml-15px-n mr-15px-n pb-4">
+    <mat-accordion>
+      <mat-expansion-panel hideToggle
+        [expanded]="true">
+    
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            Description
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+    
+        <ng-template matExpansionPanelContent>
+          <single-dataset-view [fullId]="datasetId"
+            [hideTitle]="true"
+            [hidePreview]="true"
+            [hideExplore]="true"
+            [hidePinBtn]="true"
+            [hideDownloadBtn]="true"
+            #singleDsView="singleDatasetView">
+          
+          </single-dataset-view>
+        </ng-template>
+      </mat-expansion-panel>
 
-  </single-dataset-view>
-</mat-card>
 
-<!-- TODO -->
-<!-- this is not exactly right -->
-<div class="mt-4">
-  <layer-browser></layer-browser>
-</div>
+      <mat-expansion-panel hideToggle>
+
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            Registered Volumes
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+
+        <ng-template matExpansionPanelContent>
+          <!-- TODO -->
+          <!-- this is not exactly right -->
+          <layer-browser class="ml-24px-n mr-24px-n"></layer-browser>
+        </ng-template>
+
+      </mat-expansion-panel>
+    </mat-accordion>
+    
+  </mat-card-content>
+</mat-card>
 
 <!-- templates -->
 <ng-template #favDatasetBtn let-singleDataset="singleDataset">
@@ -76,3 +102,14 @@
     </button>
   </ng-template>
 </ng-template>
+
+<single-dataset-view [fullId]="datasetId"
+  [hidden]="true"
+  [hideTitle]="true"
+  [hidePreview]="true"
+  [hideExplore]="true"
+  [hidePinBtn]="true"
+  [hideDownloadBtn]="true"
+  #singleDsView="singleDatasetView">
+
+</single-dataset-view>
\ No newline at end of file

src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html

@@ -8,8 +8,7 @@
 </button>
 
 <mat-card class="mat-elevation-z4">
-  <div class="header-container"
-    [style.backgroundColor]="'rgba(128,128,128, 0.2)'">
+  <div class="header-container bg-50-grey-20">
     <mat-card-title>
       <ng-content select="[region-of-interest]"></ng-content>
       <div *ngIf="!fetchFlag; else isLoadingTmpl">
@@ -53,7 +52,7 @@
     </mat-card-subtitle>
   </div>
 
-  <mat-card-content class="mt-2 ml-15px-n mr-15px-n">
+  <mat-card-content class="mt-2 ml-15px-n mr-15px-n pb-4">
     <mat-accordion>
 
       <!-- Description -->

src/ui/parcellationRegion/region.base.ts

@@ -33,7 +33,7 @@ export class RegionBase {
   set region(val) {
     this._region = val
     this.region$.next(this._region)
-    this.position = val.position
+    this.position = val && val.position
     if (!this._region) return
 
     const rgb = this._region.rgb || (this._region.labelIndex && intToRgb(Number(this._region.labelIndex))) || [255, 200, 200]