Supressed showing features with no values (GSI-1968) (#234)

* Supressed showing features with no values

* Update src/mocks/data.ts

Co-authored-by: Christoph Zwerschke <c.zwerschke@dkfz-heidelberg.de>
Signed-off-by: Jordy <31940280+ac-jorellanaf@users.noreply.github.com>

---------

Signed-off-by: Jordy <31940280+ac-jorellanaf@users.noreply.github.com>
Co-authored-by: Christoph Zwerschke <c.zwerschke@dkfz-heidelberg.de>

Author: ac-jorellanaf

src/app/metadata/features/dataset-summary/dataset-summary.html

@@ -2,14 +2,14 @@
   <div class="pt-4 text-sm">
     <div class="mb-4 flex flex-col gap-y-2 sm:float-right sm:w-52 md:ms-6 md:mb-4">
       @if (hitContent().ega_accession !== '') {
-      <a
-        appExtLink
-        mat-stroked-button
-        class="larger-button-text"
-        [href]="'https://ega-archive.org/datasets/' + hitContent().ega_accession"
-        data-umami-event="Dataset Summary EGA Dataset Clicked"
-        >EGA Dataset</a
-      >
+        <a
+          appExtLink
+          mat-stroked-button
+          class="larger-button-text"
+          [href]="'https://ega-archive.org/datasets/' + hitContent().ega_accession"
+          data-umami-event="Dataset Summary EGA Dataset Clicked"
+          >EGA Dataset</a
+        >
       }
       <app-dynamic-access-request-button datasetID="{{ hit().id_ }}" />
       <a
@@ -22,7 +22,7 @@
     </div>
     <p class="*:mb-0.5"><strong>Dataset ID:</strong> {{ summary().accession }}</p>
     @if (hitContent().ega_accession) {
-    <p><strong>EGA ID:</strong> {{ hitContent().ega_accession }}</p>
+      <p><strong>EGA ID:</strong> {{ hitContent().ega_accession }}</p>
     }
     <p class="*:mb-0.5"><strong>Full title:</strong> {{ summary().title }}</p>
     <app-paragraphs
@@ -31,14 +31,14 @@
       pClasses="text-sm mb-0.5"
     />
     @if (summary().types.length) {
-    <div class="flex flex-wrap items-baseline">
-      <strong>Types:&nbsp;</strong>
-      <mat-chip-set>
-        @for (type of summary().types; track type) {
-        <mat-chip class="small-chip mr-1 text-sm">{{ type }}</mat-chip>
-        }
-      </mat-chip-set>
-    </div>
+      <div class="flex flex-wrap items-baseline">
+        <strong>Types:&nbsp;</strong>
+        <mat-chip-set>
+          @for (type of summary().types; track type) {
+            <mat-chip class="small-chip mr-1 text-sm">{{ type }}</mat-chip>
+          }
+        </mat-chip-set>
+      </div>
     }
     <div
       class="mt-8 mb-4 *:flex *:grow *:flex-col *:gap-y-8 sm:flex *:sm:mb-0 *:sm:max-w-[50%] *:sm:overflow-x-auto lg:pe-[15%]"
@@ -72,23 +72,28 @@
             <strong>Sample info:</strong>
             <p>
               <strong>{{ samplesSummary().count }}</strong> Sample{{
-              samplesSummary().count | addPluralS }} @if (samplesSex().length) { (Sex:
-              @for (sex of samplesSex(); track sex.value; let last = $last) { {{
-              sex.count }} {{ sex.value }}{{ last ? ')' : ', ' }} } }
-            </p>
-            <p>
-              <strong>{{ samplesTissues().length }}</strong>
-              Tissue{{ samplesTissues().length | addPluralS }}
+                samplesSummary().count | addPluralS
+              }}
+              @if (samplesSex().length) {
+                (Sex:
+                @for (sex of samplesSex(); track sex.value; let last = $last) {
+                  {{ sex.count }} {{ sex.value }}{{ last ? ')' : ', ' }}
+                }
+              }
             </p>
             @if (samplesTissues().length > 0) {
-            <app-summary-badges [data]="samplesTissues()" />
+              <p>
+                <strong>{{ samplesTissues().length }}</strong>
+                Tissue{{ samplesTissues().length | addPluralS }}
+              </p>
+              <app-summary-badges [data]="samplesTissues()" />
             }
-            <p>
-              <strong>{{ samplesPhenotypes().length }}</strong>
-              Phenotypic Feature{{ samplesPhenotypes().length | addPluralS }}
-            </p>
             @if (samplesPhenotypes().length > 0) {
-            <app-summary-badges [data]="samplesPhenotypes()" />
+              <p>
+                <strong>{{ samplesPhenotypes().length }}</strong>
+                Phenotypic Feature{{ samplesPhenotypes().length | addPluralS }}
+              </p>
+              <app-summary-badges [data]="samplesPhenotypes()" />
             }
           </div>
         </div>
@@ -101,11 +106,12 @@
           <div class="*:mb-0.5">
             <strong>File Summary:</strong>
             <p>
-              <strong>{{ filesSummary().count }}</strong> File{{ filesSummary().count |
-              addPluralS }}
+              <strong>{{ filesSummary().count }}</strong> File{{
+                filesSummary().count | addPluralS
+              }}
             </p>
             @if (filesSummary().count > 0) {
-            <app-summary-badges [data]="filesFormats()" />
+              <app-summary-badges [data]="filesFormats()" />
             }
           </div>
         </div>
@@ -118,14 +124,15 @@
             <strong>Experiments Summary:</strong>
             <p>
               <strong>{{ experimentsSummary().count }}</strong> Experiment{{
-              experimentsSummary().count | addPluralS }}
-            </p>
-            <p>
-              <strong>{{ experimentsPlatforms().length }} </strong>
-              Platform{{ experimentsPlatforms().length | addPluralS }}
+                experimentsSummary().count | addPluralS
+              }}
             </p>
             @if (experimentsPlatforms().length > 0) {
-            <app-summary-badges [data]="experimentsPlatforms()" />
+              <p>
+                <strong>{{ experimentsPlatforms().length }} </strong>
+                Platform{{ experimentsPlatforms().length | addPluralS }}
+              </p>
+              <app-summary-badges [data]="experimentsPlatforms()" />
             }
           </div>
         </div>

src/mocks/data.ts

@@ -229,10 +229,20 @@ export const allIvasOfMar = allIvas.filter((iva) => iva.user_id === 'mar@test.de
  */
 
 // get dataset summaries with arbitrary accessions
-export const getDatasetSummary = (accession: string) => ({
-  ...datasetSummary,
-  accession: accession,
-});
+// get dataset summaries with arbitrary accessions
+export const getDatasetSummary = (accession: string) => {
+  const summary = structuredClone(datasetSummary);
+  if (accession === 'GHGAD12345678901236') {
+    // this is to test the rendering of empty stats
+    summary.samples_summary.stats.phenotypic_features =
+      summary.experiments_summary.stats.experiment_methods =
+      summary.files_summary.stats.format =
+      summary.samples_summary.stats.tissues =
+        [];
+  }
+  summary.accession = accession;
+  return summary;
+};
 
 // get embedded datasets with arbitrary accessions
 export const getDatasetDetails = (accession: string) => ({