Merge pull request #710 from hubmapconsortium/develop

Develop

apps/ccf-organ-info/src/app/app-web-component.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NodeClickEvent } from 'ccf-body-ui';
 import { GlobalConfigState } from 'ccf-shared';
 import { BaseWebComponent, BUILTIN_PARSERS, GenericGlobalConfig } from 'ccf-shared/web-components';
-
 import { environment } from '../environments/environment';
 
 function parseDataSources(value: unknown): string[] {
@@ -42,8 +42,12 @@ function parseStringArray(value: unknown): string[] {
 
 @Component({
   selector: 'ccf-root-wc',
-  template:
-    '<ccf-root (sexChange)="sexChange.emit($event)" (nodeClick)="nodeClicked.emit($event)" (sideChange)="sideChange.emit($event)" *ngIf="initialized"></ccf-root>',
+  template: `<ccf-root
+    *ngIf="initialized"
+    (sexChange)="sexChange.emit($event)"
+    (nodeClicked)="nodeClicked.emit($event)"
+    (sideChange)="sideChange.emit($event)"
+  ></ccf-root>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppWebComponent extends BaseWebComponent {
@@ -67,7 +71,7 @@ export class AppWebComponent extends BaseWebComponent {
 
   @Output() readonly sexChange = new EventEmitter<'Male' | 'Female'>();
   @Output() readonly sideChange = new EventEmitter<'Left' | 'Right'>();
-  @Output() readonly nodeClicked = new EventEmitter();
+  @Output() readonly nodeClicked = new EventEmitter<NodeClickEvent>();
 
   constructor(configStore: GlobalConfigState<GenericGlobalConfig>, cdr: ChangeDetectorRef) {
     super(configStore, cdr, {

apps/ccf-organ-info/src/app/app.component.ts

@@ -9,6 +9,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { AggregateCount, FilterSexEnum, SpatialEntity, SpatialSceneNode, TissueBlock } from '@hra-api/ng-client';
+import { NodeClickEvent } from 'ccf-body-ui';
 import { GlobalConfigState, OrganInfo } from 'ccf-shared';
 import { GoogleAnalyticsService } from 'ngx-google-analytics';
 import { Observable, combineLatest, of } from 'rxjs';
@@ -43,7 +44,7 @@ export class AppComponent implements AfterViewInit {
 
   @Output() readonly sexChange = new EventEmitter<'Male' | 'Female'>();
   @Output() readonly sideChange = new EventEmitter<'Left' | 'Right'>();
-  @Output() readonly nodeClicked = new EventEmitter();
+  @Output() readonly nodeClicked = new EventEmitter<NodeClickEvent>();
   readonly sex$ = this.configState.getOption('sex');
   readonly side$ = this.configState.getOption('side');
   readonly filter$ = this.configState

apps/ccf-organ-info/src/app/features/organ/organ.component.ts

@@ -31,7 +31,7 @@ export class OrganComponent implements AfterViewChecked, OnChanges {
 
   @Output() readonly sexChange = new EventEmitter<'Male' | 'Female'>();
   @Output() readonly sideChange = new EventEmitter<'Left' | 'Right'>();
-  @Output() readonly nodeClick = new EventEmitter();
+  @Output() readonly nodeClick = new EventEmitter<NodeClickEvent>();
 
   @ViewChild('bodyUI', { static: true }) readonly bodyUI!: BodyUiComponent;
 

apps/ccf-organ-info/src/index.html

@@ -13,6 +13,7 @@
     <ccf-organ-info
       organ-iri="http://purl.obolibrary.org/obo/UBERON_0002113"
       highlight-providers="TMC-Vanderbilt"
+      data-sources='["https://purl.humanatlas.io/collection/ds-graphs"]'
     ></ccf-organ-info>
   </body>
 </html>

apps/cde-ui/src/assets/data/examples/index.json

@@ -15,6 +15,7 @@
       "pixelSize": "0.65",
       "creationDate": "March 14, 2024",
       "creationTime": "UTC 7:03:23",
+      "creationTimestamp": 1710399803000,
       "sampleExtra": {
         "type": "2D",
         "organ": "Large Intestine",
@@ -39,6 +40,7 @@
       "pixelSize": "0.325",
       "creationDate": "March 14, 2024",
       "creationTime": "UTC 7:03:23",
+      "creationTimestamp": 1710399803000,
       "sampleExtra": {
         "type": "3D",
         "organ": "Skin",

apps/cde-visualization-wc/src/index.html

@@ -5,8 +5,6 @@
     <title>CDE Visualization</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/png" href="favicon.png" />
-    <link href="https://cdn.humanatlas.io/ui/cde-visualization-wc/styles.css" rel="stylesheet" />
-    <script src="https://cdn.humanatlas.io/ui/cde-visualization-wc/main.js" type="module"></script>
   </head>
   <script>
     window.addEventListener('DOMContentLoaded', () => {

libs/design-system/button-toggle/src/lib/button-toggle.component.stories.ts

@@ -36,6 +36,7 @@ export const SingleSelect: Story = {
     props: args,
     template: `
       <mat-button-toggle-group name="singleSelect" aria-label="Single Select"
+      hideSingleSelectionIndicator
       hraButtonToggleSize="${args['size']}">
         <mat-button-toggle disableRipple value="button1" checked>Button</mat-button-toggle>
         <mat-button-toggle disableRipple value="button2">Button</mat-button-toggle>
@@ -59,6 +60,7 @@ export const MultiSelect: Story = {
     props: args,
     template: `
       <mat-button-toggle-group multiple name="multiSelect" aria-label="Multi Select"
+      hideMultipleSelectionIndicator
       hraButtonToggleSize="${args['size']}">
         <mat-button-toggle disableRipple value="button1" checked>Button</mat-button-toggle>
         <mat-button-toggle disableRipple value="button2">Button</mat-button-toggle>

libs/design-system/button/src/lib/button-styles/button-styles.component.scss

@@ -115,14 +115,6 @@ $y-multiplier: 0.4566;
 }
 
 // Toggle
-mat-button-toggle.mat-button-toggle-standalone.mat-button-toggle-checked:not(.nav-cat-button)
-  .mat-button-toggle-label-content::before {
-  @include material-symbols-rounded();
-  content: 'check';
-  vertical-align: middle;
-  margin-right: 0.5rem;
-}
-
 mat-button-toggle.mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
   --mat-standard-button-toggle-shape: 0;
   --mat-standard-button-toggle-hover-state-layer-opacity: 0.04;