feat: allow filter to filter for no methods included

src/atlasViewer/widgetUnit/widgetUnit.style.css

@@ -45,4 +45,4 @@ panel-component[widgetUnitPanel]
 [emptyspan]
 {
   opacity:0.01;
-}
\ No newline at end of file
+}

src/res/css/extra_styles.css

@@ -291,6 +291,11 @@ markdown-dom pre code
   max-width: 60%!important;
 }
 
+.mh-20em
+{
+  max-height: 20em;
+}
+
 .pe-all
 {
   pointer-events: all;

src/ui/databrowserModule/databrowser.service.ts

@@ -7,11 +7,16 @@ import { ADD_NG_LAYER, REMOVE_NG_LAYER, DataEntry, safeFilter, FETCHED_DATAENTRI
 import { map, distinctUntilChanged, debounceTime, filter, tap } from "rxjs/operators";
 import { AtlasWorkerService } from "src/atlasViewer/atlasViewer.workerService.service";
 import { FilterDataEntriesByRegion } from "./util/filterDataEntriesByRegion.pipe";
+import { NO_METHODS } from "./util/filterDataEntriesByMethods.pipe";
+
+const noMethodDisplayName = 'No methods described'
 
 export function temporaryFilterDataentryName(name: string):string{
   return /autoradiography/.test(name)
     ? 'autoradiography'
-    : name
+    : NO_METHODS === name
+      ? noMethodDisplayName
+      : name
 }
 
 function generateToken() {
@@ -218,10 +223,14 @@ export class DatabrowserService implements OnDestroy{
   public getModalityFromDE = getModalityFromDE
 }
 
+
 export function reduceDataentry(accumulator:{name:string, occurance:number}[], dataentry: DataEntry) {
   const methods = dataentry.activity
     .map(a => a.methods)
-    .reduce((acc, item) => acc.concat(item), [])
+    .reduce((acc, item) => acc.concat(
+      item.length > 0
+        ? item
+        : NO_METHODS ), [])
     .map(temporaryFilterDataentryName)
 
   const newDE = Array.from(new Set(methods))

src/ui/databrowserModule/databrowser/databrowser.style.css

@@ -63,11 +63,6 @@ div[databrowserheader]
   white-space: nowrap;
 }
 
-:host > div
-{
-  padding : 0.5em 1em;
-}
-
 div[filterBlock] > *
 {
   white-space: nowrap;
@@ -188,7 +183,7 @@ radio-list
 }
 
 /* datawrapper */
-:host > .dataEntryWrapper
+:host .dataEntryWrapper
 {
   white-space: nowrap;
   overflow: hidden;
@@ -211,3 +206,12 @@ radio-list
   max-height: 100%;
   overflow:auto;
 }
+
+.overflow-container
+{
+  overflow:hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}

src/ui/databrowserModule/databrowser/databrowser.template.html

-<div
-  [ngStyle]="filePreviewName ? {'transform': 'translateX(-50%)'} : {}"
-  class="dataEntryWrapper">
+<div class="overflow-container">
 
-  <!-- main window -->
   <div
-    class="t-a-ease-500"
-    [style.height]="filePreviewName ? '0px' : 'auto'">
+    [ngStyle]="filePreviewName ? {'transform': 'translateX(-50%)'} : {}"
+    class="dataEntryWrapper">
 
-    <!-- description -->
-    <readmore-component>
-      <div class="p-2">
-        Datasets relevant to
+    <!-- main window -->
+    <div
+      class="t-a-ease-500"
+      [style.height]="filePreviewName ? '0px' : 'auto'">
+
+      <!-- description -->
+      <readmore-component>
+        <div class="p-2 mh-20em overflow-auto">
+          Datasets relevant to
+          <span
+            *ngFor="let region of regions"
+            class="badge badge-secondary mr-1">
+            {{ region.name }}
+          </span>
+        </div>
+      </readmore-component>
+      
+      <!-- modality picker -->
+      <div>
         <span
-          *ngFor="let region of regions"
-          class="badge badge-secondary mr-1">
-          {{ region.name }}
+          placement="bottom"
+          container="body"
+          [popover]="countedDataM.length > 0 ? modalityPicker : null"
+          [outsideClick]="true"
+          [containerClass]="darktheme ? 'darktheme' : ''"
+          class="clickable btn-sm btn btn-secondary btn-block">
+          Filter by Modality <small *ngIf="visibleCountedDataM.length as visibleDMLength">({{ visibleDMLength }})</small>
         </span>
       </div>
-    </readmore-component>
     
-    <!-- modality picker -->
-    <div>
-      <span
-        placement="bottom"
-        container="body"
-        [popover]="countedDataM.length > 0 ? modalityPicker : null"
-        [outsideClick]="true"
-        [containerClass]="darktheme ? 'darktheme' : ''"
-        class="clickable btn-sm btn btn-secondary btn-block">
-        Filter by Modality <small *ngIf="visibleCountedDataM.length as visibleDMLength">({{ visibleDMLength }})</small>
-      </span>
-    </div>
-  
-    <!-- datasets container -->
-    <div
-      *ngIf="fetchingFlag; else fetched"
-      class="spinnerAnimationCircleContainer">
-      <div class="spinnerAnimationCircle"></div>
-      <div>Fetching datasets...</div>
+      <!-- datasets container -->
+      <div
+        *ngIf="fetchingFlag; else fetched"
+        class="spinnerAnimationCircleContainer">
+        <div class="spinnerAnimationCircle"></div>
+        <div>Fetching datasets...</div>
+      </div>
+
     </div>
 
-  </div>
+    <!-- file previewer -->
+    <div
+      class="filePreview">
+      <div class="filePreviewContainer">
+        <div (click)="filePreviewName=null" class="rounded-circle btn btn-sm btn-outline-secondary">
+          <i class="fas fa-arrow-left"></i>
+        </div>
+        <preview-component
+          *ngIf="filePreviewName"
+          [datasetName]="filePreviewName">
 
-  <!-- file previewer -->
-  <div
-    class="filePreview">
-    <div class="filePreviewContainer">
-      <div (click)="filePreviewName=null" class="rounded-circle btn btn-sm btn-outline-secondary">
-        <i class="fas fa-arrow-left"></i>
+        </preview-component>
+          
       </div>
-      <preview-component
-        *ngIf="filePreviewName"
-        [datasetName]="filePreviewName">
-
-      </preview-component>
-        
     </div>
   </div>
 </div>
@@ -112,7 +115,6 @@
       </div>
       
       <pagination-component
-        *ngIf="dbService.fetchedDataEntries$ | async"
         (paginationChange)="currentPage = $event"
         [hitsPerPage]="hitsPerPage"
         [total]="filteredDataEntry.length"

src/ui/databrowserModule/util/filterDataEntriesByMethods.pipe.ts

@@ -2,16 +2,24 @@ import { PipeTransform, Pipe } from "@angular/core";
 import { DataEntry } from "src/services/stateStore.service";
 import { temporaryFilterDataentryName, CountedDataModality } from '../databrowser.service'
 
+export const NO_METHODS = `NO_METHODS`
+
 @Pipe({
   name : 'filterDataEntriesByMethods'
 })
 
 export class FilterDataEntriesbyMethods implements PipeTransform{
   public transform(dataEntries:DataEntry[],dataModalities:CountedDataModality[]):DataEntry[]{
+    const noMethodDisplayName = temporaryFilterDataentryName(NO_METHODS)
+    const includeEmpty = dataModalities.some(d => d.name === noMethodDisplayName)
     return dataEntries && dataModalities && dataModalities.length > 0
       ? dataEntries.filter(dataEntry => {
-          return dataEntry.activity.some(a => a.methods.some(m => dataModalities.findIndex(dm => dm.name === temporaryFilterDataentryName(m)) >= 0))
+          return dataEntry.activity.some(a => 
+            includeEmpty
+              ? a.methods.length === 0
+              : a.methods.some(m => 
+                  dataModalities.findIndex(dm => dm.name === temporaryFilterDataentryName(m)) >= 0))
         })
       : dataEntries
   }
-}
\ No newline at end of file
+}