RUI race condition fix (#1101)

* Working solution

* Add async inject example

* Fix tests

* Code smell

* Clear up testing errors in RUI

* Listen to reference data state instead

projects/ccf-eui/src/app/shared/components/checkbox/checkbox.component.spec.ts

@@ -1,9 +1,8 @@
-import { MatCheckbox } from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { Shallow } from 'shallow-render';
 
 import { CheckboxComponent } from './checkbox.component';
 import { CheckboxModule } from './checkbox.module';
-import { MatCheckboxChange } from '@angular/material/checkbox';
 
 
 describe('FiltersCheckboxComponent', () => {

projects/ccf-rui/src/app/core/store/anatomical-structure-tags/anatomical-structure-tags.state.spec.ts

@@ -1,11 +1,13 @@
-import { TestBed } from '@angular/core/testing';
 import { NgxsDataPluginModule } from '@angular-ru/ngxs';
+import { TestBed } from '@angular/core/testing';
 import { NgxsModule, Store } from '@ngxs/store';
 import { GlobalConfigState } from 'ccf-shared';
-import { Observable, lastValueFrom } from 'rxjs';
+import { lastValueFrom, Observable, of } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { PageState } from '../page/page.state';
+import { ReferenceDataState } from '../reference-data/reference-data.state';
+import { RegistrationState } from '../registration/registration.state';
 import { GLOBAL_CONFIG } from './../../services/config/config';
 import { ModelState } from './../model/model.state';
 import { SceneState } from './../scene/scene.state';
@@ -27,8 +29,15 @@ describe('AnatomicalStructureTagsState', () => {
       ],
       providers: [
         AnatomicalStructureTagState,
+        RegistrationState,
         SceneState,
-        ModelState,
+        {
+          provide: ModelState,
+          useValue: {
+            modelChanged$: of([])
+          }
+        },
+        ReferenceDataState,
         GlobalConfigState,
         {
           provide: GLOBAL_CONFIG,

projects/ccf-rui/src/app/core/store/model/model.state.spec.ts

@@ -1,8 +1,8 @@
-import { TestBed } from '@angular/core/testing';
 import { NgxsDataPluginModule } from '@angular-ru/ngxs';
+import { TestBed } from '@angular/core/testing';
 import { NgxsModule, Store } from '@ngxs/store';
 import { GlobalConfigState, OrganInfo } from 'ccf-shared';
-import { Observable, lastValueFrom } from 'rxjs';
+import { lastValueFrom, Observable, of } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { ExtractionSet } from '../../models/extraction-set';
@@ -54,7 +54,8 @@ describe('ModelState', () => {
         {
           provide: PageState,
           useValue: {
-            setHasChanges: () => undefined
+            setHasChanges: () => undefined,
+            registrationStarted$: of([])
           }
         }
       ]

projects/ccf-rui/src/app/core/store/page/page.state.spec.ts

@@ -1,12 +1,13 @@
-import { TestBed } from '@angular/core/testing';
 import { NgxsDataPluginModule } from '@angular-ru/ngxs';
+import { TestBed } from '@angular/core/testing';
 import { NgxsModule, Store } from '@ngxs/store';
 import { GlobalConfigState } from 'ccf-shared';
-import { Observable, lastValueFrom } from 'rxjs';
+import { lastValueFrom, Observable, of } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { GLOBAL_CONFIG } from '../../services/config/config';
 import { AnatomicalStructureTagState } from '../anatomical-structure-tags/anatomical-structure-tags.state';
+import { ReferenceDataState } from '../reference-data/reference-data.state';
 import { ModelState } from './../model/model.state';
 import { PageState } from './page.state';
 
@@ -27,7 +28,12 @@ describe('PageState', () => {
       ],
       providers: [
         ModelState,
-        AnatomicalStructureTagState,
+        ReferenceDataState,
+        {
+          provide: AnatomicalStructureTagState, useValue: {
+            tags$: of([])
+          }
+        },
         GlobalConfigState,
         { provide: GLOBAL_CONFIG, useValue: {} }
       ]

projects/ccf-rui/src/app/core/store/registration/registration.state.spec.ts

@@ -133,7 +133,12 @@ describe('RegistrationState', () => {
         {
           provide: ReferenceDataState, useValue: {
             state$: referenceDataStateSubject,
-            snapshot: initialReferenceDataState
+            snapshot: initialReferenceDataState,
+            getSourceDB: () => (
+              {
+                subscribe: () => undefined
+              }
+            )
           }
         },
         {

projects/ccf-rui/src/app/core/store/registration/registration.state.ts

@@ -141,17 +141,19 @@ export class RegistrationState extends NgxsImmutableDataRepository<RegistrationS
     this.tags = this.injector.get(AnatomicalStructureTagState);
     this.refData = this.injector.get(ReferenceDataState);
 
-    this.globalConfig.config$.pipe(
-      take(1),
-      tap(({ useDownload, register }) => this.ctx.patchState({
-        useRegistrationCallback: !!(!useDownload && register)
-      }))
-    ).subscribe();
-
-    this.globalConfig.getOption('editRegistration').pipe(
-      filterNulls(),
-      tap(reg => this.editRegistration(reg as SpatialEntityJsonLd))
-    ).subscribe();
+    this.refData.state$.subscribe(() => {
+      this.globalConfig.config$.pipe(
+        take(1),
+        tap(({ useDownload, register }) => this.ctx.patchState({
+          useRegistrationCallback: !!(!useDownload && register)
+        }))
+      ).subscribe();
+
+      this.globalConfig.getOption('editRegistration').pipe(
+        filterNulls(),
+        tap(reg => this.editRegistration(reg as SpatialEntityJsonLd))
+      ).subscribe();
+    });
   }
 
   async editRegistration(reg: SpatialEntityJsonLd): Promise<void> {

projects/ccf-rui/src/index.html

@@ -4,6 +4,10 @@
   <meta charset="utf-8">
   <title>HuBMAP CCF Registration User Interface (CCF-RUI)</title>
   <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <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">
   <script>
     // To test embedded mode, from the console paste:
     // localStorage.setItem('TEST_EMBEDDED', true);
@@ -50,8 +54,8 @@
       window.addEventListener('DOMContentLoaded', () => {
         const rui = document.querySelector('ccf-rui');
         rui.baseHref = 'https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@staging/rui/';
-        rui.user = {firstName: 'Jane', lastName: 'Doe'};
         rui.useDownload = true;
+        rui.user = {firstName: 'Jane', lastName: 'Doe'};
         rui.organ = { name: 'kidney', side: 'left', sex: 'female' };
         rui.editRegistration = sampleRegistration;
         rui.register = (data) => {
@@ -66,10 +70,6 @@
       });
     }
   </script>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Sharp" rel="stylesheet">
 </head>
 <body>
   <ccf-rui></ccf-rui>

projects/ccf-rui/src/webcomponent-async-inject-example.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>HuBMAP CCF Registration User Interface (CCF-RUI)</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <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">
+  <script>
+    // To test embedded mode, from the console paste:
+    // localStorage.setItem('TEST_EMBEDDED', true);
+    if (localStorage['TEST_EMBEDDED'] === 'true') {
+      const sampleRegistration = {
+        "@context": "https://hubmapconsortium.github.io/ccf-ontology/ccf-context.jsonld",
+        "@id": "http://purl.org/ccf/1.5/523ad946-115b-433a-bd1d-ba4b75f8c493",
+        "@type": "SpatialEntity",
+        "creator": "Jane Doe",
+        "creator_first_name": "Jane",
+        "creator_last_name": "Doe",
+        "creation_date": "2023-08-29",
+        "ccf_annotations": [
+          "http://purl.obolibrary.org/obo/UBERON_0002015",
+          "http://purl.obolibrary.org/obo/UBERON_0008716",
+          "http://purl.obolibrary.org/obo/UBERON_0000362",
+          "http://purl.obolibrary.org/obo/UBERON_0001228",
+          "http://purl.obolibrary.org/obo/UBERON_0004200",
+          "http://purl.obolibrary.org/obo/UBERON_0001225",
+          "http://purl.obolibrary.org/obo/UBERON_0001284",
+          "http://purl.obolibrary.org/obo/UBERON_0002189"
+        ],
+        "slice_thickness": 1,
+        "slice_count": 2,
+        "x_dimension": 16,
+        "y_dimension": 12,
+        "z_dimension": 14,
+        "dimension_units": "millimeter",
+        "placement": {
+          "@context": "https://hubmapconsortium.github.io/ccf-ontology/ccf-context.jsonld",
+          "@id": "http://purl.org/ccf/1.5/523ad946-115b-433a-bd1d-ba4b75f8c493_placement",
+          "@type": "SpatialPlacement",
+          "target": "http://purl.org/ccf/latest/ccf.owl#VHFLeftKidneyV1.1",
+          "placement_date": "2023-08-29",
+          "x_scaling": 1,
+          "y_scaling": 1,
+          "z_scaling": 1,
+          "scaling_units": "ratio",
+          "x_rotation": 10,
+          "y_rotation": 25,
+          "z_rotation": 32,
+          "rotation_order": "XYZ",
+          "rotation_units": "degree",
+          "x_translation": 25.866,
+          "y_translation": 94.635,
+          "z_translation": 38.79,
+          "translation_units": "millimeter"
+        }
+      };
+
+      window.addEventListener('DOMContentLoaded', () => {
+        const rui = document.createElement("ccf-rui");
+        rui.baseHref = 'https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@staging/rui/';
+        rui.useDownload = true;
+
+        setTimeout(() => {
+          rui.user = {firstName: 'Jane', lastName: 'Doe'};
+          rui.organ = { name: 'kidney', side: 'left', sex: 'female' };
+          rui.editRegistration = sampleRegistration;
+          document.body.appendChild(rui);
+        }, 2000);
+      });
+    }
+  </script>
+</head>
+
+<body class="mat-typography">
+</body>
+</html>

projects/ccf-rui/src/webcomponent-example.html

@@ -8,8 +8,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <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="styles.css" rel="stylesheet">
-  <script src="wc.js" defer></script>
   <script>
     // To test embedded mode, from the console paste:
     // localStorage.setItem('TEST_EMBEDDED', true);
@@ -74,6 +72,5 @@
   </script>
 </head>
 <body class="mat-typography">
-  <ccf-rui></ccf-rui>
 </body>
 </html>