Final styles fix (#240)

* scroll fix on main page * horizontal and vertical scroll fix on ftu page * scroll fix when full screen * padding for source list and display all entries * no ripple effect * row styles changes * correcting label * added Protein and Lipid labels * tabs styles fix * fixed about link * styles fix for columns * stylex fix fullscreen column * removed fixed width. adjusted rows and columns * removed max height and styles * Formatting fix --------- Co-authored-by: Daniel Bolin <axbolin@iu.edu>
hubmapconsortium · Sep 6, 2023 · 4c9e7de · 4c9e7de
1 parent 2ef06d5
commit 4c9e7de
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 51 deletions.
diff --git a/apps/ftu-ui-small-wc/src/app/app.component.scss b/apps/ftu-ui-small-wc/src/app/app.component.scss
@@ -75,6 +75,10 @@
   position: initial !important;
 }
 
+::ng-deep .fullscreen-on ftu-biomarker-details {
+  grid-template-columns: 0.5fr 0.5fr 1fr;
+}
+
 ::ng-deep .mat-mdc-tab-body {
   height: 30rem;
 }

diff --git a/apps/ftu-ui/src/app/app.component.scss b/apps/ftu-ui/src/app/app.component.scss
@@ -5,7 +5,7 @@
   width: 100%;
   height: 100%;
   grid-template-columns: 21rem calc(100% - 21rem);
-  grid-template-rows: 5rem auto;
+  grid-template-rows: 5rem max(100% - 5rem);
   grid-template-areas:
     'header header'
     'sidebar content';

diff --git a/apps/ftu-ui/src/app/pages/ftu-page/ftu.component.scss b/apps/ftu-ui/src/app/pages/ftu-page/ftu.component.scss
@@ -1,10 +1,11 @@
 :host {
   display: block;
   height: 100%;
+  overflow-y: hidden;
 
   .content-container {
     display: flex;
-    height: calc(100vh - 5rem - 5rem);
+    height: calc(100% - 5rem - 1px);
 
     .illustration {
       flex-grow: 1;
@@ -31,7 +32,7 @@
   }
   .fullscreen-on::ng-deep {
     ftu-biomarker-details {
-      grid-template-columns: 33.5rem 33.5rem auto;
+      grid-template-columns: 0.5fr 0.5fr 1fr;
       hra-source-list {
         width: unset !important;
         hra-label-box {

diff --git a/apps/ftu-ui/src/assets/TEMP/2d-ftu-illustrations.jsonld b/apps/ftu-ui/src/assets/TEMP/2d-ftu-illustrations.jsonld
@@ -1625,7 +1625,7 @@
       "representation_of": "UBERON:0001984",
       "label": "crypt of Lieberkuhn of large intestine",
       "organ_id": "UBERON:0000059",
-      "organ_label": "LargeIntestine",
+      "organ_label": "Large intestine",
       "illustration_files": [
         {
           "@id": "https://purl.humanatlas.io/2d-ftu/large-intestine-crypt-lieberkuhn#svg_file",
@@ -17039,4 +17039,4 @@
       ]
     }
   ]
-}
+}
diff --git a/apps/ftu-ui/src/assets/links.yml b/apps/ftu-ui/src/assets/links.yml
@@ -9,6 +9,7 @@ FTU:
 About:
   type: external
   url: https://humanatlas.io/
+  target: _blank
 ExploreFTU:
   type: internal
   commands:

diff --git a/libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.html b/libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.html
@@ -5,7 +5,7 @@
   </mat-icon>
 </hra-label-box>
 
-<mat-tab-group class="table" [class.table-fullscreen]="isTableFullScreen" mat-stretch-tabs="false" color="accent">
+<mat-tab-group class="table" [class.table-fullscreen]="isTableFullScreen" mat-stretch-tabs="true" color="accent">
   <mat-tab *ngFor="let tab of tabs()" labelClass="table-tab-header" [label]="tab.label">
     <hra-biomarker-table
       *ngIf="tab.rows.length !== 0"

diff --git a/libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.scss b/libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.scss
@@ -2,19 +2,19 @@
 
 :host {
   display: grid;
-  grid-template-columns: 21.5rem 21.5rem auto;
-  grid-template-rows: 3.5rem 19.5rem 3rem 5rem auto;
+  grid-template-columns: 1fr 1fr auto;
+  grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);
   grid-template-areas:
     'table-header table-header table-header'
     'table table table'
     'gradient-legend-header size-legend-header .'
     'gradient-legend size-legend .'
     'source-list source-list source-list';
   overflow-y: auto;
+
   .table-header {
     grid-area: table-header;
     border-bottom: 0.063rem solid #d3d3d3;
-    width: 43rem;
     height: 3.5rem;
   }
 
@@ -77,10 +77,6 @@
 
   .source-list {
     grid-area: source-list;
-
-    .content {
-      width: min-content;
-    }
   }
 }
 

diff --git a/libs/components/molecules/src/lib/source-list/source-list.component.html b/libs/components/molecules/src/lib/source-list/source-list.component.html
@@ -5,8 +5,8 @@
   </mat-icon>
 </hra-label-box>
 
-<div class="table-content">
-  <table mat-table [dataSource]="sources" [class.hidden]="!showTable">
+<div class="table-content" [class.hidden]="!showTable">
+  <table mat-table [dataSource]="sources">
     <caption class="sr-only">
       Source List Table with Title and Links
     </caption>

diff --git a/libs/components/molecules/src/lib/source-list/source-list.component.scss b/libs/components/molecules/src/lib/source-list/source-list.component.scss
@@ -3,49 +3,44 @@
 
 :host {
   display: block;
-
-  @include utils.define-flex-filler();
-
-  h1 {
-    margin: 0;
-  }
-
-  .mat-mdc-cell {
-    vertical-align: top;
-    border: none;
-    padding: 0.25rem 0.875rem;
-    font-size: 1rem;
-  }
-
-  .filler {
-    width: 30rem;
-  }
+  height: 100%;
 
   .sr-only {
     @include utils.sr-only();
   }
 
-  .table-content {
-    height: calc(100vh - 25rem);
-    overflow: auto;
-  }
-
   .toggle {
-    margin-bottom: 1rem;
     display: flex;
     align-items: center;
-    width: 43rem;
     height: 3.5rem;
     grid-area: source-list-header;
     color: var(--dark-primary-text);
     border-top: 0.063rem solid #d3d3d3;
     border-bottom: 0.063rem solid #d3d3d3;
-    .mat-icon {
-      margin-left: 32rem;
-    }
   }
 
-  .hidden {
-    display: none;
+  .table-content {
+    height: calc(100% - 3.5rem);
+    overflow: auto;
+
+    &.hidden {
+      display: none;
+    }
+
+    table {
+      height: 100%;
+    }
+
+    .mat-mdc-cell {
+      vertical-align: top;
+      border: none;
+      padding: 0.25rem 0.875rem;
+      font-size: 1rem;
+    }
+
+    ::ng-deep .mdc-data-table__content {
+      display: block;
+      padding: 1rem 0rem;
+    }
   }
 }
diff --git a/libs/components/molecules/src/lib/tissue-tree-list/tissue-tree-list.component.html b/libs/components/molecules/src/lib/tissue-tree-list/tissue-tree-list.component.html
@@ -27,7 +27,7 @@
 </mat-tree>
 
 <ng-template let-label="label" let-data="data" #label>
-  <div class="label-container" matRipple [matRippleDisabled]="!data.link">
+  <div class="label-container">
     <a
       *ngIf="data.link; else noLink"
       [hraLink]="data.link"

diff --git a/libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.scss b/libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.scss
@@ -3,7 +3,6 @@
 
 :host {
   display: block;
-  max-height: 16.5rem;
   max-width: 43rem;
 
   .sr-only {
@@ -12,13 +11,12 @@
 
   .table {
     margin-left: -1px;
-    .emptyFiller {
-      padding: 1.3rem;
-    }
+
     .highlight {
       background-color: gold;
     }
   }
+
   .table th {
     background-color: #fff7f8;
     color: #59264d;

diff --git a/libs/services/src/lib/ftu-data/ftu-data.impl.ts b/libs/services/src/lib/ftu-data/ftu-data.impl.ts
@@ -119,6 +119,11 @@ const TISSUE_LINK = createLinkId('FTU');
 /** Provides Base/root url for the tissue tree */
 const BASE_IRI = 'https://purl.humanatlas.io/2d-ftu/' as Iri;
 
+/** Capitalizes the first character */
+function capitalize(str: string): string {
+  return str.slice(0, 1).toUpperCase() + str.slice(1);
+}
+
 /**
  * FtuDataImplService - Angular service for handling FTU (Functional Tissue Unit) data operations.
  */
@@ -324,7 +329,7 @@ export class FtuDataImplService extends FtuDataService {
   }
 
   /**
-   * constructCellSummaries : Formates Cell Summary after etching the data
+   * constructCellSummaries : Formates Cell Summary after fetching the data
    * @param data
    * @returns
    */
@@ -349,11 +354,23 @@ export class FtuDataImplService extends FtuDataService {
         dataset_count: entry.dataset_count,
       }));
       cellSummary.push({
-        label: summaryGroup.biomarker_type,
+        label: `${capitalize(summaryGroup.biomarker_type)} Biomarkers`,
         cells,
         biomarkers,
         summaries,
       });
+      cellSummary.push({
+        label: `Protein Biomarkers`,
+        cells: [],
+        biomarkers: [],
+        summaries: [],
+      });
+      cellSummary.push({
+        label: `Lipid Biomarkers`,
+        cells: [],
+        biomarkers: [],
+        summaries: [],
+      });
     });
     return cellSummary;
   }