update css for vis page and its modules

hubmapconsortium · Oct 16, 2024 · 9ae7670 · 9ae7670
1 parent 8443702
commit 9ae7670
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 163 deletions.
diff --git a/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.scss b/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.scss
@@ -45,9 +45,9 @@
   width: 100%;
   display: grid;
   grid-template-columns: 22.75rem minmax(57.1875rem, calc(100vw - 22.75rem));
-  grid-template-rows: 4rem minmax(calc(46.5rem - 4rem), calc(100vh - 5.25rem));
+  grid-template-rows: 4rem minmax(42.375rem, calc(100vh - 4rem));
   grid-template-areas:
-    'header header'
+    'header visualization'
     'metadata visualization';
   color: #201e3d;
 
@@ -84,12 +84,13 @@
       border-width: 0 0 2px 0;
       border-style: solid;
       height: 100%;
-      min-width: calc(100% - 390px);
+      min-width: 32.75rem;
     }
 
     cde-violin {
       height: 100%;
-      min-width: 390px;
+      min-width: 24.25rem;
+      max-width: 31.5rem;
     }
   }
 }
@@ -101,6 +102,7 @@
   .violin-overlay {
     .mat-mdc-menu-content {
       background-color: var(--sys-on-primary);
+      color: var(--sys-secondary);
       .mat-mdc-menu-item {
         --mat-menu-item-with-icon-leading-spacing: 1rem;
         --mat-menu-item-with-icon-trailing-spacing: 1rem;
@@ -117,13 +119,11 @@
     min-width: 208px;
     &.info-sub-menu .mat-mdc-menu-content {
       padding: 0.75rem 1rem;
-      color: var(--sys-primary);
       background-color: var(--sys-on-primary);
       font: var(--sys-label-medium);
     }
 
     &.download-sub-menu .mat-mdc-menu-content {
-      color: var(--sys-primary);
       background-color: var(--sys-on-primary);
       font: var(--sys-label-medium);
 

diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss
@@ -228,15 +228,10 @@ $blue-theme: mat.m2-define-light-theme(
 }
 
 ::ng-deep {
-  .mat-mdc-menu-content button {
-    color: var(--sys-primary);
-  }
-
   div.mat-mdc-menu-panel {
     max-width: 308px;
     &.info-sub-menu .mat-mdc-menu-content {
       padding: 1rem 1rem;
-      color: var(--sys-primary);
     }
   }
 }
diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.component.html b/libs/cde-visualization/src/lib/components/histogram/histogram.component.html
@@ -34,6 +34,7 @@
           >
             <mat-icon>info</mat-icon>
             <span>Info</span>
+            <mat-icon class="expand-arrow">arrow_right</mat-icon>
           </button>
           <button
             mat-menu-item
@@ -44,15 +45,21 @@
           >
             <mat-icon>download</mat-icon>
             <span>Downloads</span>
+            <mat-icon class="expand-arrow">arrow_right</mat-icon>
           </button>
           <button mat-menu-item>
             <mat-icon>fullscreen</mat-icon>
             Full Screen
           </button>
-          <button mat-menu-item>
+          <a
+            mat-menu-item
+            href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <mat-icon>code</mat-icon>
             Embed App
-          </button>
+          </a>
           <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
             This histogram plot shows the cell-to-nearest-anchor cell distance distributions categorized by each cell
             type in the dataset.

diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.component.scss b/libs/cde-visualization/src/lib/components/histogram/histogram.component.scss
@@ -68,6 +68,9 @@
         cde-color-picker-label {
           .label {
             font: var(--sys-label-small);
+            display: flex;
+            white-space: unset;
+            max-width: unset;
           }
         }
       }

diff --git a/libs/cde-visualization/src/lib/components/metadata/metadata.component.html b/libs/cde-visualization/src/lib/components/metadata/metadata.component.html
@@ -27,15 +27,21 @@
           >
             <mat-icon>info</mat-icon>
             <span>Info</span>
+            <mat-icon class="expand-arrow">arrow_right</mat-icon>
           </button>
           <button mat-menu-item (click)="toggleEmptyFields()">
             <mat-icon>{{ showEmptyFields() ? 'visibility_off' : 'visibility' }}visibility</mat-icon>
             {{ showEmptyFields() ? 'Hide' : 'Show' }} Unknown Metadata
           </button>
-          <button mat-menu-item>
+          <a
+            mat-menu-item
+            href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <mat-icon>code</mat-icon>
             Embed App
-          </button>
+          </a>
           <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
             Visualization metadata for the sample dataset.
           </mat-menu>

diff --git a/...ization/src/lib/components/node-dist-visualization/node-dist-visualization.component.html b/...ization/src/lib/components/node-dist-visualization/node-dist-visualization.component.html
@@ -20,6 +20,7 @@
     >
       <mat-icon>info</mat-icon>
       <span>Info</span>
+      <mat-icon class="expand-arrow">arrow_right</mat-icon>
     </button>
     <button
       mat-menu-item
@@ -30,6 +31,7 @@
     >
       <mat-icon>download</mat-icon>
       <span>Downloads</span>
+      <mat-icon class="expand-arrow">arrow_right</mat-icon>
     </button>
     <button
       mat-menu-item
@@ -40,6 +42,7 @@
     >
       <mat-icon>reset_wrench</mat-icon>
       <span>Reset</span>
+      <mat-icon class="expand-arrow">arrow_right</mat-icon>
     </button>
     <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
       <div>
@@ -66,10 +69,6 @@
         <mat-icon>download</mat-icon>
         <span>PNG</span>
       </button>
-      <button mat-menu-item (click)="download()">
-        <mat-icon>download</mat-icon>
-        <span>SVG</span>
-      </button>
     </mat-menu>
     <mat-menu #resetSubMenu="matMenu" [class]="'reset-sub-menu'">
       <button mat-menu-item (click)="resetView()">
@@ -89,10 +88,15 @@
       <mat-icon>{{ cellLinksVisible() ? 'visibility_off' : 'visibility' }}</mat-icon>
       {{ cellLinksVisible() ? 'Hide' : 'Show' }} Cell Links
     </button>
-    <button mat-menu-item>
+    <a
+      mat-menu-item
+      href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       <mat-icon>code</mat-icon>
       Embed App
-    </button>
+    </a>
   </mat-menu>
   <div class="filler"></div>
   <mat-icon class="delete" hraMicroTooltip="Select at least one cell to delete it from this dataset">delete</mat-icon>
@@ -114,9 +118,4 @@
   </mat-button-toggle-group>
 </div>
 
-<!-- <button mat-flat-button class="download mat-caption" (click)="download()">
-  PNG
-  <mat-icon class="material-symbols-rounded">download</mat-icon>
-</button> -->
-
 <hra-node-dist-vis class="vis" data-testid="node-dist-vis" #vis></hra-node-dist-vis>
diff --git a/...ization/src/lib/components/node-dist-visualization/node-dist-visualization.component.scss b/...ization/src/lib/components/node-dist-visualization/node-dist-visualization.component.scss
@@ -58,7 +58,6 @@
 
     li {
       margin-left: 1.5rem;
-      color: var(--sys-primary);
     }
   }
 

diff --git a/libs/cde-visualization/src/lib/components/violin/violin.component.html b/libs/cde-visualization/src/lib/components/violin/violin.component.html
@@ -20,6 +20,7 @@
     >
       <mat-icon>info</mat-icon>
       <span>Info</span>
+      <mat-icon class="expand-arrow">arrow_right</mat-icon>
     </button>
     <button
       mat-menu-item
@@ -30,15 +31,21 @@
     >
       <mat-icon>download</mat-icon>
       <span>Downloads</span>
+      <mat-icon class="expand-arrow">arrow_right</mat-icon>
     </button>
     <button mat-menu-item>
       <mat-icon>fullscreen</mat-icon>
       Full Screen
     </button>
-    <button mat-menu-item>
+    <a
+      mat-menu-item
+      href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       <mat-icon>code</mat-icon>
       Embed App
-    </button>
+    </a>
     <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
       This violin plot shows a cell-to-nearest-anchor cell distance distributions categorized by each cell type in the
       dataset.

diff --git a/libs/cde-visualization/src/lib/components/violin/violin.component.scss b/libs/cde-visualization/src/lib/components/violin/violin.component.scss
@@ -1,31 +1,24 @@
 :host {
   --mdc-filled-button-container-height: 2rem;
-  display: grid;
-  grid:
-    'violin . download'
-    'plot plot plot' 1fr
-    / auto 1fr auto;
-  grid-template-rows: 2rem calc(100% - 2rem);
-  align-items: start;
-  row-gap: 0.75rem;
+  display: block;
   overflow: hidden;
-  padding: 0.75rem 0.5rem;
   border-width: 0px 0px 2px 2px;
   border-style: solid;
   border-color: var(--sys-outline-variant);
 
   span.violin-label {
     grid-area: violin;
     font: var(--sys-label-medium);
-    height: 2rem;
     display: flex;
     align-items: center;
+    padding: 1rem;
   }
 
   .violin {
     grid-area: plot;
     height: 100%;
     overflow-y: scroll;
+    padding: 0 1rem 1rem 1rem;
   }
 }