hubmapconsortium · axdanbol · Jan 16, 2025 · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025
diff --git a/EMBEDDING.md b/EMBEDDING.md
diff --git a/apps/ccf-eui/EMBEDDING.md b/apps/ccf-eui/EMBEDDING.md
@@ -0,0 +1,113 @@
+# Embedding _CCF Exploration User Interface (CCF-EUI)_
+
+## Basic Usage
+
+The following code snippet can be used to get started with the _CCF-EUI_.
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Regular metadata. Customize as you see fit -->
+    <meta charset="utf-8" />
+    <title>HuBMAP CCF Exploration User Interface (CCF-EUI)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+
+    <!-- The important bits -->
+    <base href="https://cdn.humanatlas.io/ui/ccf-eui/" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
+    <link href="https://cdn.humanatlas.io/ui/ccf-eui/styles.css" rel="stylesheet" />
+    <script src="https://cdn.humanatlas.io/ui/ccf-eui/wc.js" type="module"></script>
+  </head>
+  <body>
+    <ccf-eui id="eui"></ccf-eui>
+  </body>
+</html>
+```
+
+## Inputs
+
+The _CCF-EUI_ has many inputs in different formats. Each input can be set using either HTML attributes:
+
+```html
+<ccf-eui token="..."> </ccf-eui>
+```
+
+or through javascript:
+
+```js
+const eui = document.getElementById('eui');
+eui.token = '...';
+```
+
+### Available inputs
+
+| Attribute name        | Description                                                           | Data format         | Default                                |
+| --------------------- | --------------------------------------------------------------------- | ------------------- | -------------------------------------- |
+| _data-sources_        | Data sources from which data is queried                               | An array of strings | None                                   |
+| _selected-organs_     | The initially enabled organs                                          | An array of strings | None                                   |
+| _remote-api-endpoint_ | The api endpoint from which data is queried                           | An url              | `https://apps.humanatlas.io/api`       |
+| _token_               | Api token passed during data queries                                  | A string            | None                                   |
+| _filter_              | Initial data filter                                                   | A `Filter` object   | None                                   |
+| _theme_               | Application theme                                                     | A string            | None                                   |
+| _header_              | Whether to show the header bar                                        | A boolean           | `true`                                 |
+| _login-disabled_      | Whether login is disabled                                             | A boolean           | `false`                                |
+| _home-url_            | Url visited when the user clicks the EUI logo                         | An url              | `https://portal.hubmapconsortium.org/` |
+| _logo-tooltip_        | Tooltip displayed when the user hover over the logo                   | A string            | `Human BioMolecular Atlas Project`     |
+| _base-href_           | Base url to fetch relative links. Must be set if `<base>` is not used | An url              | None                                   |
+
+A `Filter` is a plain object with the following **optional** properties:
+
+| Property name     | Description                                 | Data format                      |
+| ----------------- | ------------------------------------------- | -------------------------------- |
+| _sex_             | Filter data by sex                          | `Both`, `Female`, or `Male`      |
+| _ageRange_        | Filter data by a range of ages              | A two number tuple, `[from, to]` |
+| _bmiRange_        | Filter data by a range of bmis              | A two number tuple, `[from, to]` |
+| _consortiums_     | Filter data by one or more consortiums      | An array of strings              |
+| _tmc_             | Filter data by one or more tmcs             | An array of strings              |
+| _technologies_    | Filter data by one or more technologies     | An array of strings              |
+| _ontologyTerms_   | Filter data by one or more ontology terms   | An array of strings              |
+| _cellTypeTerms_   | Filter data by one or more cell type terms  | An array of strings              |
+| _biomarkerTerms_  | Filter data by one or more biomarker terms  | An array of strings              |
+| _spatialSearches_ | Filter data by one or more spatial searches | An array of `SpatialSearch`      |
+
+A `SpatialSearch` is a plain object with the following properties:
+
+| Property name | Description   | Data format |
+| ------------- | ------------- | ----------- |
+| _x_           | X coordinate  | A number    |
+| _y_           | Y coordinate  | A number    |
+| _z_           | Z coordinate  | A number    |
+| _radius_      | Search radius | A number    |
+| _target_      | Search target | A string    |
+
+## Outputs
+
+This application does not emit any output events.
+
+## Full example
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Regular metadata. Customize as you see fit -->
+    <meta charset="utf-8" />
+    <title>HuBMAP CCF Exploration User Interface (CCF-EUI)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+
+    <!-- The important bits -->
+    <base href="https://cdn.humanatlas.io/ui/ccf-eui/" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
+    <link href="https://cdn.humanatlas.io/ui/ccf-eui/styles.css" rel="stylesheet" />
+    <script src="https://cdn.humanatlas.io/ui/ccf-eui/wc.js" type="module"></script>
+  </head>
+  <body>
+    <ccf-eui id="eui"></ccf-eui>
+  </body>
+</html>
+```
diff --git a/apps/ccf-rui/EMBEDDING.md b/apps/ccf-rui/EMBEDDING.md
@@ -0,0 +1,109 @@
+# Embedding _CCF Registration User Interface (CCF-RUI)_
+
+## Basic Usage
+
+The following code snippet can be used to get started with the _CCF-RUI_.
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Regular metadata. Customize as you see fit -->
+    <meta charset="utf-8" />
+    <title>HuBMAP CCF Registration User Interface (CCF-RUI)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+
+    <!-- The important bits -->
+    <base href="https://cdn.humanatlas.io/ui/ccf-rui/" />
+    <link href="https://cdn.humanatlas.io/ui/ccf-rui/styles.css" rel="stylesheet" />
+    <script src="https://cdn.humanatlas.io/ui/ccf-rui/wc.js" type="module"></script>
+  </head>
+  <body>
+    <ccf-rui id="rui"></ccf-rui>
+  </body>
+</html>
+```
+
+## Inputs
+
+The _CCF-RUI_ has many inputs in different formats. Each input can be set using either HTML attributes:
+
+```html
+<ccf-rui user='{ "firstName": "bob", "lastName": "the dragon" }'> </ccf-rui>
+```
+
+or through javascript:
+
+```js
+const rui = document.getElementById('rui');
+rui.user = {
+  firstName: 'bob',
+  lastName: 'the dragon',
+};
+```
+
+### Available inputs
+
+| Attribute name                      | Description                                                                        | Data format                                 | Default                                                |
+| ----------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------ |
+| _user_                              | Prepopulated user                                                                  | An `User` object                            |                                                        |
+| _organ_                             | Prepopulated organ                                                                 | An `Organ` object                           |                                                        |
+| _view_                              | Initial view mode                                                                  | `register` or `3d`                          | `register`                                             |
+| _view-side_                         | Initial view side in `register` mode                                               | `left`, `right`, `anterior`, or `posterior` | `anterior`                                             |
+| _use-download_                      | Whether to download the registration on review                                     | A boolean                                   | `false`                                                |
+| _skip-unsaved-changes-confirmation_ | Whether to disable the unsaved changes prompt when the user leaves the application | A boolean                                   | `false`                                                |
+| _edit-registration_                 | Prepopulated registration                                                          | A `SpatialEntityJsonLd` object              | None                                                   |
+| _fetch-previous-registrations_      | A callback to fetch previous registrations                                         | A function                                  | None                                                   |
+| _register_                          | Callback that recieves the registration on review                                  | A function                                  | None                                                   |
+| _cancel-registration_               | Callback when the user leaves the application                                      | A function                                  | None                                                   |
+| _reference-data_                    | Reference data api endpoint                                                        | An url                                      | `https://apps.humanatlas.io/api/v1/rui-reference-data` |
+| _collision-endpoint_                | Collision query api endpoint                                                       | An url                                      | `https://apps.humanatlas.io/api/v1/collisions`         |
+| _organ-options_                     | A list of enabled organs                                                           | An array of strings                         | None                                                   |
+| _theme_                             | Application theme                                                                  | A string                                    | None                                                   |
+| _home-url_                          | Url visited when the user clicks the RUI logo                                      | An url                                      | `https://apps.humanatlas.io/rui/`                      |
+| _base-href_                         | Base url to fetch relative links. Must be set if `<base>` is not used              | An url                                      | None                                                   |
+
+A `User` is a plain object with the following properties:
+
+| Property name | Description          | Data format |
+| ------------- | -------------------- | ----------- |
+| _firstName_   | User's first name    | A string    |
+| _lastName_    | User's last name     | A string    |
+| _email_       | User's email address | A string    |
+
+A `Organ` is a plain object with the following properties:
+
+| Property name | Description | Data format        | Required |
+| ------------- | ----------- | ------------------ | -------- |
+| _name_        | Organ name  | A string           | `yes`    |
+| _ontologyId_  | Organ id    | A string           | `no`     |
+| _sex_         | Organ sex   | `female` or `male` | `no`     |
+| _side_        | Organ side  | `left` or `right`  | `no`     |
+
+## Outputs
+
+This application does not emit any output events.
+
+## Full example
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Regular metadata. Customize as you see fit -->
+    <meta charset="utf-8" />
+    <title>HuBMAP CCF Registration User Interface (CCF-RUI)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+
+    <!-- The important bits -->
+    <base href="https://cdn.humanatlas.io/ui/ccf-rui/" />
+    <link href="https://cdn.humanatlas.io/ui/ccf-rui/styles.css" rel="stylesheet" />
+    <script src="https://cdn.humanatlas.io/ui/ccf-rui/wc.js" type="module"></script>
+  </head>
+  <body>
+    <ccf-rui id="rui"></ccf-rui>
+  </body>
+</html>
+```
diff --git a/apps/ccf-rui/src/app/app-web-component.component.ts b/apps/ccf-rui/src/app/app-web-component.component.ts
@@ -40,9 +40,7 @@ export class AppWebComponent extends BaseWebComponent {
   @Input() fetchPreviousRegistrations!: string | FetchPreviousRegistrationsCallback;
   @Input() skipUnsavedChangesConfirmation!: string | boolean;
   @Input() theme!: string;
-  @Input() header!: string | boolean;
   @Input() homeUrl!: string;
-  @Input() logoTooltip!: string;
   @Input() organOptions!: string | string[];
   @Input() collisionsEndpoint!: string;
   @Input() view!: ViewType;
@@ -66,7 +64,6 @@ export class AppWebComponent extends BaseWebComponent {
         cancelRegistration: BP.function,
         fetchPreviousRegistrations: BP.function,
         skipUnsavedChangesConfirmation: BP.boolean,
-        header: BP.boolean,
         organOptions: BP.stringArray,
       },
     });

diff --git a/apps/ccf-rui/src/app/app.component.html b/apps/ccf-rui/src/app/app.component.html
@@ -1,6 +1,7 @@
+<hra-back-bar (backClick)="page.cancelRegistration()"></hra-back-bar>
 <hra-nav-header-buttons
   app="rui"
-  appLink="https://apps.humanatlas.io/rui/"
+  [appLink]="(homeUrl$ | async) ?? 'https://apps.humanatlas.io/rui/'"
   appTitle="Registration User Interface"
   [brandmark]="true"
 ></hra-nav-header-buttons>

diff --git a/apps/ccf-rui/src/app/app.component.scss b/apps/ccf-rui/src/app/app.component.scss
@@ -1,16 +1,29 @@
 :host {
   display: grid;
-  grid-template-columns: 21rem minmax(586px, calc(100vw - 44.25rem)) 22.25rem;
-  grid-template-rows: 4.5rem auto;
+  grid-template-columns: 21rem minmax(586px, calc(100vw - 43.25rem - 4px)) 22.25rem;
+  grid-template-rows: 0rem 4.5rem auto;
   grid-template-areas:
+    'back back back'
     'header registration metadata'
     'left content metadata';
   height: 100%;
 
+  &.embedded {
+    grid-template-rows: 3rem 4.5rem auto;
+  }
+
+  &:not(.embedded) hra-back-bar {
+    display: none;
+  }
+
   ccf-registration-modal {
     display: none;
   }
 
+  hra-back-bar {
+    grid-area: back;
+  }
+
   hra-nav-header-buttons {
     grid-area: header;
   }

diff --git a/apps/ccf-rui/src/app/app.component.ts b/apps/ccf-rui/src/app/app.component.ts
@@ -14,14 +14,15 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { GlobalConfigState, TrackingPopupComponent } from 'ccf-shared';
 import { ConsentService } from 'ccf-shared/analytics';
 import { GoogleAnalyticsService } from 'ngx-google-analytics';
-import { combineLatest, ReplaySubject, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';
 import { GlobalConfig } from './core/services/config/config';
 import { ThemingService } from './core/services/theming/theming.service';
 import { ModelState, ViewSide, ViewType } from './core/store/model/model.state';
 import { PageState } from './core/store/page/page.state';
 import { RegistrationState } from './core/store/registration/registration.state';
 import { MetadataService } from './modules/metadata/metadata.service';
 import { openScreenSizeNotice } from './modules/screen-size-notice/screen-size-notice.component';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 export interface User {
   firstName: string;
@@ -30,7 +31,6 @@ export interface User {
 
 interface AppOptions extends GlobalConfig {
   theme?: string;
-  header?: boolean;
   homeUrl?: string;
   logoTooltip?: string;
   view?: ViewType;
@@ -49,6 +49,7 @@ export type Side = 'left' | 'right' | 'anterior' | 'posterior' | '3D';
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
+    '[class.embedded]': 'embedded()',
     '(document:mousedown)': 'handleClick($event.target)',
   },
 })
@@ -66,21 +67,13 @@ export class AppComponent implements OnDestroy, OnInit {
   }
 
   readonly theme$ = this.globalConfig.getOption('theme');
-  readonly themeMode$ = new ReplaySubject<'light' | 'dark'>(1);
+  readonly themeMode$ = new BehaviorSubject<'light' | 'dark'>('light');
 
-  readonly header$ = this.globalConfig.getOption('header');
   readonly homeUrl$ = this.globalConfig.getOption('homeUrl');
-  readonly logoTooltip$ = this.globalConfig.getOption('logoTooltip');
 
   readonly view$ = this.globalConfig.getOption('view');
   readonly viewSide$ = this.globalConfig.getOption('viewSide');
 
-  theme!: string;
-
-  homeUrl!: string;
-
-  logoTooltip!: string;
-
   /** Input that allows changing the current side from outside the component */
   @Input() side: Side = 'anterior';
 
@@ -89,6 +82,8 @@ export class AppComponent implements OnDestroy, OnInit {
 
   private readonly metadata = inject(MetadataService);
 
+  protected readonly embedded = toSignal(inject(PageState).useCancelRegistrationCallback$);
+
   /** All subscriptions managed by the container. */
   private readonly subscriptions = new Subscription();
 
@@ -112,15 +107,6 @@ export class AppComponent implements OnDestroy, OnInit {
         this.registrationStarted = registrationStarted;
       }),
     );
-    this.theme$.subscribe((theme) => {
-      this.theme = theme ?? 'light';
-    });
-    this.globalConfig.getOption('homeUrl').subscribe((url) => {
-      this.homeUrl = url ?? '';
-    });
-    this.globalConfig.getOption('logoTooltip').subscribe((tooltip) => {
-      this.logoTooltip = tooltip ?? '';
-    });
 
     combineLatest([this.theme$, this.themeMode$]).subscribe(([theme, mode]) => {
       this.theming.setTheme(`${theme}-theme-${mode}`);
@@ -148,10 +134,6 @@ export class AppComponent implements OnDestroy, OnInit {
       panelClass: 'usage-snackbar',
     });
 
-    this.themeMode$.next('light');
-
-    this.theming.setTheme(`${this.theme}-theme-light`);
-
     const { editRegistration, user, organ } = this.globalConfig.snapshot;
     if (!editRegistration && (!user || !organ)) {
       this.metadata.openModal('create');

diff --git a/apps/ccf-rui/src/app/app.module.ts b/apps/ccf-rui/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideDesignSystem } from '@hra-ui/design-system';
+import { BackBarComponent } from '@hra-ui/design-system/back-bar';
 import { ButtonModule } from '@hra-ui/design-system/button';
 import {
   ExpansionPanelActionsComponent,
@@ -45,6 +46,7 @@ import { RightSidebarModule } from './modules/right-sidebar/right-sidebar.module
     MatButtonToggleModule,
     ButtonModule,
     MatDividerModule,
+    BackBarComponent,
   ],
   declarations: [AppComponent, AppWebComponent],
   providers: [