From a8ec997cff38636568f3437b7c7ffc60bef35462 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 7 Dec 2023 19:38:36 -0500 Subject: [PATCH 1/6] Improvements to href --- apps/ftu-ui-small-wc/src/app/app.component.ts | 17 +++--- apps/ftu-ui/src/app/app.component.ts | 33 +++++----- apps/ftu-ui/src/app/app.init.ts | 4 -- apps/ftu-ui/src/app/app.module.ts | 14 +++-- apps/ftu-ui/src/index.html | 5 +- .../webcomponent-example.html | 3 +- ...ponent-multiple-illustrations-example.html | 3 +- .../state/src/base-href/base-href.actions.ts | 15 +++++ .../src/base-href/base-href.selectors.spec.ts | 10 ++++ .../src/base-href/base-href.selectors.ts | 10 ++++ .../state/src/base-href/base-href.state.ts | 22 +++++++ libs/cdk/state/src/base-href/index.ts | 3 + libs/cdk/state/src/index.ts | 1 + .../resource-registry.selectors.ts | 3 +- libs/cdk/state/src/state.module.ts | 3 +- libs/cdk/state/src/storage/storage.state.ts | 4 +- .../footer-behavior.component.html | 2 +- .../footer-behavior.component.ts | 4 -- .../header-behavior.component.html | 2 +- .../header-behavior.component.ts | 8 +-- .../landing-page-content.component.html | 6 +- .../landing-page-content.component.ts | 10 ++-- .../src/lib/metrics/metrics.component.html | 2 +- .../src/lib/ftu-data/ftu-data.impl.ts | 60 ++++++++++++------- libs/services/src/lib/service.module.ts | 5 +- .../src/lib/illustrator/illustrator.state.ts | 8 +-- 26 files changed, 162 insertions(+), 95 deletions(-) create mode 100644 libs/cdk/state/src/base-href/base-href.actions.ts create mode 100644 libs/cdk/state/src/base-href/base-href.selectors.spec.ts create mode 100644 libs/cdk/state/src/base-href/base-href.selectors.ts create mode 100644 libs/cdk/state/src/base-href/base-href.state.ts create mode 100644 libs/cdk/state/src/base-href/index.ts diff --git a/apps/ftu-ui-small-wc/src/app/app.component.ts b/apps/ftu-ui-small-wc/src/app/app.component.ts index 57265f501..139314bf5 100644 --- a/apps/ftu-ui-small-wc/src/app/app.component.ts +++ b/apps/ftu-ui-small-wc/src/app/app.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, Component, + EventEmitter, inject, Injector, Input, @@ -11,7 +12,7 @@ import { ViewEncapsulation, } from '@angular/core'; import { dispatch, dispatch$, select$, selectSnapshot } from '@hra-ui/cdk/injectors'; -import { createLinkId, LinkRegistryActions, ResourceRegistryActions } from '@hra-ui/cdk/state'; +import { BaseHrefActions, createLinkId, LinkRegistryActions, ResourceRegistryActions } from '@hra-ui/cdk/state'; import { BiomarkerDetailsWcComponent, FooterBehaviorComponent, @@ -77,6 +78,7 @@ export class AppComponent implements OnInit, OnChanges { @Output() readonly nodeClicked = select$(IllustratorSelectors.selectedOnClicked); + private readonly setBaseHref = dispatch(BaseHrefActions.Set); private readonly loadLinks = dispatch(LinkRegistryActions.LoadFromYaml); private readonly loadResources = dispatch(ResourceRegistryActions.LoadFromYaml); private readonly navigateToOrgan = dispatch(LinkRegistryActions.Navigate); @@ -87,16 +89,17 @@ export class AppComponent implements OnInit, OnChanges { private readonly reset = dispatch$(ActiveFtuActions.Reset); private readonly injector = inject(Injector); - private endpoints?: FtuDataImplEndpoints; + private readonly endpoints = inject(FTU_DATA_IMPL_ENDPOINTS) as EventEmitter; ngOnInit() { - this.endpoints = this.injector.get(FTU_DATA_IMPL_ENDPOINTS); + this.setBaseHref(this.baseHref); this.loadLinks(this.setUrl(this.linksYamlUrl)); this.loadResources(this.setUrl(this.resourcesYamlUrl)); - this.endpoints.illustrations = this.setUrl(this.illustrationsUrl); - this.endpoints.datasets = this.setUrl(this.datasetUrl); - this.endpoints.summaries = this.setUrl(this.summariesUrl); - this.endpoints.baseHref = this.baseHref as Iri; + this.endpoints.emit({ + illustrations: this.setUrl(this.illustrationsUrl), + datasets: this.setUrl(this.datasetUrl), + summaries: this.setUrl(this.summariesUrl), + }); } ngOnChanges(changes: SimpleChanges) { diff --git a/apps/ftu-ui/src/app/app.component.ts b/apps/ftu-ui/src/app/app.component.ts index 667751e87..62d79c6d3 100644 --- a/apps/ftu-ui/src/app/app.component.ts +++ b/apps/ftu-ui/src/app/app.component.ts @@ -1,10 +1,10 @@ import { AfterContentInit, Component, + EventEmitter, HostBinding, HostListener, inject, - Injector, Input, OnChanges, OnInit, @@ -15,6 +15,7 @@ import { MatDialog, MatDialogConfig, MatDialogModule, MatDialogRef } from '@angu import { Router } from '@angular/router'; import { dispatch, dispatch$, select$, selectQuerySnapshot } from '@hra-ui/cdk/injectors'; import { + BaseHrefActions, createLinkId, LinkRegistryActions, ResourceRegistryActions, @@ -22,7 +23,7 @@ import { StorageSelectors, } from '@hra-ui/cdk/state'; import { ScreenNoticeBehaviorComponent } from '@hra-ui/components/behavioral'; -import { FTU_DATA_IMPL_ENDPOINTS, FtuDataImplEndpoints, Iri } from '@hra-ui/services'; +import { FTU_DATA_IMPL_ENDPOINTS, FtuDataImplEndpoints, Url } from '@hra-ui/services'; import { ActiveFtuActions, ActiveFtuSelectors, @@ -65,9 +66,6 @@ export class AppComponent implements AfterContentInit, OnChanges, OnInit { @Output() readonly nodeClicked = select$(IllustratorSelectors.selectedOnClicked); - private readonly injector = inject(Injector); - private endpoints?: FtuDataImplEndpoints; - screenSizeNoticeOpen = false; private readonly hasShownSmallViewportNotice = selectQuerySnapshot( @@ -76,6 +74,7 @@ export class AppComponent implements AfterContentInit, OnChanges, OnInit { 'screen-size-notice' ); + private readonly setBaseHref = dispatch(BaseHrefActions.Set); private readonly loadLinks = dispatch(LinkRegistryActions.LoadFromYaml); private readonly loadResources = dispatch(ResourceRegistryActions.LoadFromYaml); private readonly navigateToOrgan = dispatch(LinkRegistryActions.Navigate); @@ -88,6 +87,7 @@ export class AppComponent implements AfterContentInit, OnChanges, OnInit { private readonly dialog = inject(MatDialog); private ref = inject(MatDialogRef); + private readonly endpoints = inject(FTU_DATA_IMPL_ENDPOINTS) as EventEmitter; constructor() { inject(Router).initialNavigation(); @@ -127,13 +127,15 @@ export class AppComponent implements AfterContentInit, OnChanges, OnInit { } ngOnInit() { - this.endpoints = this.injector.get(FTU_DATA_IMPL_ENDPOINTS); + this.setBaseHref(this.baseHref); this.loadLinks(this.setUrl(this.linksYamlUrl)); this.loadResources(this.setUrl(this.resourcesYamlUrl)); - this.endpoints.illustrations = this.setUrl(this.illustrationsUrl); - this.endpoints.datasets = this.setUrl(this.datasetUrl); - this.endpoints.summaries = this.setUrl(this.summariesUrl); - this.endpoints.baseHref = this.baseHref as Iri; + this.endpoints.emit({ + illustrations: this.setUrl(this.illustrationsUrl), + datasets: this.setUrl(this.datasetUrl), + summaries: this.setUrl(this.summariesUrl), + baseHref: this.baseHref as Url, + }); } ngOnChanges(changes: SimpleChanges) { @@ -147,11 +149,14 @@ export class AppComponent implements AfterContentInit, OnChanges, OnInit { .subscribe(); } - private setUrl(url: string): Iri { - if (url.slice(0, 4) === 'http') { - return url as Iri; + private setUrl(url: string): Url { + const { baseHref } = this; + if (url.startsWith('http')) { + return url as Url; + } else if (baseHref !== '' && !baseHref.endsWith('/')) { + return `${baseHref}/${url}` as Url; } else { - return (this.baseHref + url) as Iri; + return `${baseHref}${url}` as Url; } } diff --git a/apps/ftu-ui/src/app/app.init.ts b/apps/ftu-ui/src/app/app.init.ts index 33fbd261d..2804a82e8 100644 --- a/apps/ftu-ui/src/app/app.init.ts +++ b/apps/ftu-ui/src/app/app.init.ts @@ -17,9 +17,5 @@ export function initFactory(): () => Observable { commands: ['/'], }, }), - - new LinkRegistryActions.LoadFromYaml('assets/links.yml'), - new ResourceRegistryActions.LoadFromYaml('assets/resources.yml'), - new TissueLibraryActions.Load(), ]); } diff --git a/apps/ftu-ui/src/app/app.module.ts b/apps/ftu-ui/src/app/app.module.ts index 4080e2aa9..e4dce4421 100644 --- a/apps/ftu-ui/src/app/app.module.ts +++ b/apps/ftu-ui/src/app/app.module.ts @@ -1,21 +1,21 @@ import { HttpClient, HttpClientModule } from '@angular/common/http'; -import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core'; +import { APP_INITIALIZER, DoBootstrap, EventEmitter, Injector, NgModule } from '@angular/core'; +import { createCustomElement } from '@angular/elements'; +import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CdkStateModule } from '@hra-ui/cdk/state'; -import { createCustomElement } from '@angular/elements'; import { HeaderBehaviorComponent, TissueLibraryBehaviorComponent } from '@hra-ui/components/behavioral'; -import { HraServiceModule } from '@hra-ui/services'; +import { FTU_DATA_IMPL_ENDPOINTS, HraServiceModule } from '@hra-ui/services'; import { HraStateModule } from '@hra-ui/state'; import { ThemingModule } from '@hra-ui/theming'; import { NgxsModule } from '@ngxs/store'; import { InlineSVGModule } from 'ng-inline-svg-2'; import { MarkdownModule } from 'ngx-markdown'; +import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { initFactory } from './app.init'; -import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; -import { environment } from '../environments/environment'; @NgModule({ declarations: [AppComponent], @@ -53,6 +53,10 @@ import { environment } from '../environments/environment'; provide: MatDialogRef, useValue: {}, }, + { + provide: FTU_DATA_IMPL_ENDPOINTS, + useValue: new EventEmitter(), + }, ], }) export class AppModule implements DoBootstrap { diff --git a/apps/ftu-ui/src/index.html b/apps/ftu-ui/src/index.html index dae7b6372..5ecfb6619 100644 --- a/apps/ftu-ui/src/index.html +++ b/apps/ftu-ui/src/index.html @@ -30,11 +30,12 @@ diff --git a/apps/medical-illustration/webcomponent-example.html b/apps/medical-illustration/webcomponent-example.html index 36a821c51..0d54c559e 100644 --- a/apps/medical-illustration/webcomponent-example.html +++ b/apps/medical-illustration/webcomponent-example.html @@ -7,8 +7,7 @@