Merge pull request #612 from hubmapconsortium/develop

Develop

.eslintrc.json

@@ -4,7 +4,7 @@
   "plugins": ["@nx"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx", "*.js", "*.mjs", "*.cjs", "*.jsx"],
       "rules": {
         "@nx/enforce-module-boundaries": [
           "error",
@@ -88,15 +88,15 @@
       }
     },
     {
-      "files": ["*.js", "*.jsx"],
+      "files": ["*.js", "*.mjs", "*.cjs", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
       "rules": {
         "@typescript-eslint/no-extra-semi": "error",
         "no-extra-semi": "off"
       }
     },
     {
-      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.mjs", "*.spec.cjs", "*.spec.jsx"],
       "env": {
         "jest": true
       },

.lintstagedrc.mjs

@@ -0,0 +1,7 @@
+const lint = 'npx nx affected:lint --uncommitted --fix true';
+const format = 'npx nx format:write --uncommitted';
+
+export default {
+  '*.{js,mjs,cjs,ts,html,scss,css}': [lint, format],
+  '*.{md,json,yml,yaml}': format,
+};

apps/ccf-eui/src/app/app.component.html

@@ -163,6 +163,7 @@
           [organList]="$any(scene.referenceOrgans$ | async)"
           (organsChanged)="scene.setSelectedReferenceOrgans($event)"
           [selectedOrgans]="$any(scene.selectedReferenceOrgans$ | async)"
+          [expanded]="selector.expanded"
         >
         </ccf-organ-selector>
       </div>

apps/ccf-eui/src/app/modules/filters/filters-content/filters-content.component.scss

@@ -9,10 +9,12 @@
   }
 
   ::ng-deep ccf-checkbox {
+    min-width: fit-content;
+    display: block;
+
     .options-container {
       position: relative;
       left: -0.5rem;
-      width: calc(100% + 0.5rem);
 
       .mdc-checkbox {
         padding: 0.5rem;

apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.html

@@ -7,12 +7,7 @@
       <mat-icon svgIcon="filter" class="icon funnel"></mat-icon>
     </ng-template>
   </button>
-  <div
-    class="popup-container"
-    [class.visible]="filtersVisible"
-    [class.hidden]="!filtersVisible"
-    [style.height]="popupHeight"
-  >
+  <div #container class="popup-container" [class.visible]="filtersVisible" [class.hidden]="!filtersVisible">
     <ccf-filters-content
       class="popup-body"
       [technologyFilters]="technologyFilters"

apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss

@@ -20,26 +20,32 @@
   top: 1.2rem;
   left: 1.48rem;
   box-shadow: 0.2rem 0.2rem 1rem 0rem #00000058;
+  transition-property: all;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  max-height: 80vh;
+  max-width: 80vw;
 
   &.visible {
     border-width: 1px;
     padding: 2rem;
-    width: 56.5rem;
-    height: 40rem;
-    transition: all 0.2s ease-in-out 0s;
+    transition-delay: 0s;
+    height: fit-content !important;
+    width: fit-content !important;
 
     .popup-body {
       opacity: 1;
       transition: opacity 0.2s ease-in-out 0.3s;
+      width: fit-content;
+      display: flex;
+      flex-direction: column;
     }
   }
 
   &.hidden {
     border-width: 0;
     padding: 0;
-    width: 0;
-    height: 0 !important;
-    transition: all 0.2s ease-in-out 0.3s;
+    transition-delay: 0.3s;
 
     .popup-body {
       opacity: 0;

apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts

@@ -1,4 +1,15 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
 import { Dispatch } from '@ngxs-labs/dispatch-decorator';
 
 import { SpatialSearchFilterItem } from '../../../core/store/spatial-search-filter/spatial-search-filter.state';
@@ -13,7 +24,7 @@ import { SetExecuteSearchOnGenerate } from '../../../core/store/spatial-search-u
   styleUrls: ['./filters-popover.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FiltersPopoverComponent {
+export class FiltersPopoverComponent implements OnChanges, AfterViewInit {
   /**
    * Allows the filters to be set from outside the component, and still render / function normally
    */
@@ -55,28 +66,58 @@ export class FiltersPopoverComponent {
    */
   @Output() readonly spatialSearchRemoved = new EventEmitter<string>();
 
+  /**
+   * Popup container element ref
+   */
+  @ViewChild('container', { static: false }) containerRef!: ElementRef;
+
   /**
    * Keeps track of whether or not the filters popover box is visible or not
    */
   filtersVisible = false;
 
+  ngAfterViewInit() {
+    const el = this.containerRef.nativeElement as HTMLElement;
+    el.style.height = `0px`;
+    el.style.width = `0px`;
+  }
+
   /**
-   * Calculate the popup height based on length of spatial search list
+   * Updates popup height when spatial search filters changes
+   * @param changes Changes
    */
-  get popupHeight(): string {
-    if (!this.filtersVisible) {
-      return '0rem';
-    } else {
-      return `${this.spatialSearchFilters.length > 0 ? 44 + this.spatialSearchFilters.length * 3 : 41}rem`;
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.containerRef && 'spatialSearchFilters' in changes) {
+      const el = this.containerRef.nativeElement as HTMLElement;
+      el.style.transitionDuration = '0s'; // Temporarily disable height transition
+      el.style.height = 'fit-content';
+      setTimeout(() => {
+        el.style.height = `${el.clientHeight}px`;
+      }, 1);
     }
   }
 
   /**
-   * Toggles filter visible
+   * Toggles filter popup visibility
    */
   @Dispatch()
   toggleFilterVisible(): SetExecuteSearchOnGenerate {
+    const el = this.containerRef.nativeElement as HTMLElement;
+    el.style.transitionDuration = '0.2s';
     this.filtersVisible = !this.filtersVisible;
+    if (this.filtersVisible) {
+      setTimeout(() => {
+        el.style.overflow = 'auto';
+      }, 200);
+    } else {
+      el.style.overflow = 'hidden';
+      el.style.height = `${el.clientHeight}px`;
+      el.style.width = `${el.clientWidth}px`;
+      setTimeout(() => {
+        el.style.height = `0px`;
+        el.style.width = `0px`;
+      }, 1);
+    }
     return new SetExecuteSearchOnGenerate(false);
   }
 

apps/ccf-eui/src/app/shared/components/checkbox/checkbox.component.scss

@@ -5,24 +5,21 @@
 }
 
 .options-container {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
 
   .option {
     display: flex;
     height: 2rem;
     align-items: center;
+    min-width: 8rem;
+    width: min-content;
   }
 
   &.three {
-    .option {
-      width: 16.375rem;
-    }
+    grid-template-columns: auto auto auto;
   }
 
   &.five {
-    .option {
-      width: 20%;
-    }
+    grid-template-columns: auto auto auto auto auto;
   }
 }

apps/ccf-eui/src/index.html

@@ -12,10 +12,6 @@
   <script>
     window.addEventListener('DOMContentLoaded', () => {
       const eui = document.querySelector('ccf-eui');
-      eui.dataSources = ['https://cdn.humanatlas.io/digital-objects/ds-graph/hubmap/v2023/assets/dataset-graph.jsonld'];
-      eui.filter = {
-        sex: 'Female',
-      };
     });
   </script>
   <body class="mat-typography">

apps/cde-visualization-wc/jest.config.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 export default {
   displayName: 'cde-visualization-wc',
-  preset: '../../jest.preset.cjs',
+  preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/apps/cde-visualization-wc',
   transform: {

apps/dashboard-ui/jest.config.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 export default {
   displayName: 'dashboard-ui',
-  preset: '../../jest.preset.cjs',
+  preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/apps/dashboard-ui',
   transform: {

apps/humanatlas.io/jest.config.ts

@@ -1,6 +1,6 @@
 export default {
   displayName: 'humanatlas.io',
-  preset: '../../jest.preset.cjs',
+  preset: '../../jest.preset.js',
   coverageDirectory: '../../coverage/apps/humanatlas.io',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   globals: {},

libs/cde-visualization/jest.config.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 export default {
   displayName: 'cde-visualization',
-  preset: '../../jest.preset.cjs',
+  preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/libs/cde-visualization',
   transform: {

libs/dashboard/jest.config.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 export default {
   displayName: 'dashboard',
-  preset: '../../jest.preset.cjs',
+  preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/libs/dashboard',
   transform: {