From 85e33e30490afafe5e9a1c562b1b488e4712ba49 Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Fri, 28 Jun 2024 14:37:53 +0200 Subject: [PATCH 1/9] feat: make map view component work --- .../gn-dataset-view-map.component.css | 6 +++ .../gn-dataset-view-map.component.ts | 22 ++++++-- .../gn-dataset-view-map.sample.html | 53 +++++++++++++++++++ 3 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.sample.html diff --git a/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.css b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.css index f1146d699b..6ac7bba4dd 100644 --- a/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.css +++ b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.css @@ -1 +1,7 @@ @import '../../../styles.css'; +@import 'ol/ol.css'; + +:host { + display: block; + height: 500px; +} diff --git a/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.ts b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.ts index 7f7c3907b4..7c5494e54b 100644 --- a/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.ts +++ b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.component.ts @@ -1,13 +1,17 @@ import { ChangeDetectionStrategy, + ChangeDetectorRef, Component, Injector, + Input, OnInit, ViewEncapsulation, } from '@angular/core' import { MdViewFacade } from '@geonetwork-ui/feature/record' import { SearchFacade } from '@geonetwork-ui/feature/search' import { BaseComponent } from '../base.component' +import { LinkUsage } from '@geonetwork-ui/util/shared' +import { DatasetDistribution } from '@geonetwork-ui/common/domain/model/record' @Component({ selector: 'wc-gn-dataset-view-map', @@ -18,10 +22,22 @@ import { BaseComponent } from '../base.component' providers: [SearchFacade], }) export class GnDatasetViewMapComponent extends BaseComponent implements OnInit { - constructor(injector: Injector, private mdViewFacade: MdViewFacade) { + constructor( + injector: Injector, + private mdViewFacade: MdViewFacade, + private changeDetector: ChangeDetectorRef + ) { super(injector) } - ngOnInit(): void { - this.mdViewFacade.loadFull('ee965118-2416-4d48-b07e-bbc696f002c2') + @Input() datasetId: string + link: DatasetDistribution + async init() { + super.init() + this.mdViewFacade.loadFull(this.datasetId) + this.link = await this.getRecordLink(this.datasetId, [ + LinkUsage.MAP_API, + LinkUsage.GEODATA, + ]) + this.changeDetector.detectChanges() } } diff --git a/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.sample.html b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.sample.html new file mode 100644 index 0000000000..f46c32478d --- /dev/null +++ b/apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.sample.html @@ -0,0 +1,53 @@ + + + + + Web Component Demo + + + + + + + + +
+
+

+ Visualize Map dataset from a Metadata Record with + gn-dataset-view-map web component +

+
+ + + +
+ + From 47aee91b9294459f43eee5bc7da12a9285f11b4f Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Fri, 28 Jun 2024 14:39:19 +0200 Subject: [PATCH 2/9] fea: include tables and maps into embedding and share components --- .../data-view-permalink.component.spec.ts | 101 ++++++++++----- .../data-view-permalink.component.ts | 55 ++++++--- .../data-view-share.component.html | 8 +- .../data-view-share.component.ts | 2 + .../data-view-web-component.component.spec.ts | 115 +++++++++++++----- .../data-view-web-component.component.ts | 71 +++++++++-- 6 files changed, 256 insertions(+), 96 deletions(-) diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts index ac42247bc6..f93ecb8541 100644 --- a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts +++ b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts @@ -4,7 +4,7 @@ import { DataViewPermalinkComponent, WEB_COMPONENT_EMBEDDER_URL, } from './data-view-permalink.component' -import { BehaviorSubject, firstValueFrom } from 'rxjs' +import { BehaviorSubject, firstValueFrom, lastValueFrom, takeLast } from 'rxjs' import { MdViewFacade } from '../state' import { Component, Input } from '@angular/core' import { TranslateModule } from '@ngx-translate/core' @@ -75,6 +75,7 @@ describe('DataViewPermalinkComponent', () => { facade = TestBed.inject(MdViewFacade) fixture = TestBed.createComponent(DataViewPermalinkComponent) component = fixture.componentInstance + component.tabIndex$.next(2) fixture.detectChanges() }) @@ -82,39 +83,79 @@ describe('DataViewPermalinkComponent', () => { expect(component).toBeTruthy() }) - describe('init permalinkUrl$', () => { - it('should generate URL based on configs', async () => { - const url = await firstValueFrom(component.permalinkUrl$) - expect(url).toBe( - `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=api-url%3D${encodeURIComponent( - component.config.basePath - )}&a=dataset-id%3D${ - metadata.uniqueIdentifier - }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff&a=aggregation%3D${ - chartConfig1.aggregation - }&a=x-property%3D${chartConfig1.xProperty}&a=y-property%3D${ - chartConfig1.yProperty - }&a=chart-type%3D${chartConfig1.chartType}` - ) + describe('Chart view', () => { + describe('init permalinkUrl$', () => { + it('should generate URL based on configs', async () => { + const url = await firstValueFrom(component.permalinkUrl$) + expect(url).toBe( + `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=aggregation%3D${ + chartConfig1.aggregation + }&a=x-property%3D${chartConfig1.xProperty}&a=y-property%3D${ + chartConfig1.yProperty + }&a=chart-type%3D${ + chartConfig1.chartType + }&a=api-url%3D${encodeURIComponent( + component.config.basePath + )}&a=dataset-id%3D${ + metadata.uniqueIdentifier + }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff` + ) + }) + }) + describe('update permalinkUrl$', () => { + beforeEach(() => { + facade.chartConfig$.next(chartConfig2) + }) + it('should update URL based on configs', async () => { + const url = await firstValueFrom(component.permalinkUrl$) + expect(url).toBe( + `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=aggregation%3D${ + chartConfig2.aggregation + }&a=x-property%3D${chartConfig2.xProperty}&a=y-property%3D${ + chartConfig2.yProperty + }&a=chart-type%3D${ + chartConfig2.chartType + }&a=api-url%3D${encodeURIComponent( + component.config.basePath + )}&a=dataset-id%3D${ + metadata.uniqueIdentifier + }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff` + ) + }) + }) + }) + describe('Map view', () => { + beforeEach(() => { + component.tabIndex$.next(0) + }) + describe('init permalinkUrl$', () => { + it('should generate URL based on configs', async () => { + const url = await firstValueFrom(component.permalinkUrl$) + expect(url).toBe( + `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-map&a=api-url%3D${encodeURIComponent( + component.config.basePath + )}&a=dataset-id%3D${ + metadata.uniqueIdentifier + }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff` + ) + }) }) }) - describe('update permalinkUrl$', () => { + describe('Table view', () => { beforeEach(() => { - facade.chartConfig$.next(chartConfig2) + component.tabIndex$.next(1) }) - it('should update URL based on configs', async () => { - const url = await firstValueFrom(component.permalinkUrl$) - expect(url).toBe( - `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=api-url%3D${encodeURIComponent( - component.config.basePath - )}&a=dataset-id%3D${ - metadata.uniqueIdentifier - }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff&a=aggregation%3D${ - chartConfig2.aggregation - }&a=x-property%3D${chartConfig2.xProperty}&a=y-property%3D${ - chartConfig2.yProperty - }&a=chart-type%3D${chartConfig2.chartType}` - ) + describe('init permalinkUrl$', () => { + it('should generate URL based on configs', async () => { + const url = await firstValueFrom(component.permalinkUrl$) + expect(url).toBe( + `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-table&a=api-url%3D${encodeURIComponent( + component.config.basePath + )}&a=dataset-id%3D${ + metadata.uniqueIdentifier + }&a=primary-color%3D%230f4395&a=secondary-color%3D%238bc832&a=main-color%3D%23555&a=background-color%3D%23fdfbff` + ) + }) }) }) }) diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts index 1bff396f40..f430cc8de7 100644 --- a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts +++ b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts @@ -3,10 +3,11 @@ import { Component, Inject, InjectionToken, + Input, Optional, } from '@angular/core' import { Configuration } from '@geonetwork-ui/data-access/gn4' -import { combineLatest, map } from 'rxjs' +import { BehaviorSubject, combineLatest, map } from 'rxjs' import { MdViewFacade } from '../state' import { GN_UI_VERSION } from '../gn-ui-version.token' @@ -21,29 +22,45 @@ export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken( changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataViewPermalinkComponent { + tabIndex$ = new BehaviorSubject(0) + @Input() + set tabIndex(value: number) { + this.tabIndex$.next(value) + } + permalinkUrl$ = combineLatest([ + this.tabIndex$, this.facade.chartConfig$, this.facade.metadata$, ]).pipe( - map(([config, metadata]) => { - if (config) { - const { aggregation, xProperty, yProperty, chartType } = config - const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin) - url.searchParams.set('v', `${this.version}`) - url.searchParams.append('e', `gn-dataset-view-chart`) - url.searchParams.append('a', `api-url=${this.config.basePath}`) - url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`) - url.searchParams.append('a', `primary-color=#0f4395`) - url.searchParams.append('a', `secondary-color=#8bc832`) - url.searchParams.append('a', `main-color=#555`) - url.searchParams.append('a', `background-color=#fdfbff`) - url.searchParams.append('a', `aggregation=${aggregation}`) - url.searchParams.append('a', `x-property=${xProperty}`) - url.searchParams.append('a', `y-property=${yProperty}`) - url.searchParams.append('a', `chart-type=${chartType}`) - return url.toString() + map(([tabIndex, config, metadata]) => { + const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin) + url.searchParams.set('v', `${this.version}`) + if (tabIndex === 2) { + if (config) { + const { aggregation, xProperty, yProperty, chartType } = config + url.searchParams.append('e', `gn-dataset-view-chart`) + url.searchParams.append('a', `aggregation=${aggregation}`) + url.searchParams.append('a', `x-property=${xProperty}`) + url.searchParams.append('a', `y-property=${yProperty}`) + url.searchParams.append('a', `chart-type=${chartType}`) + } else { + return '' + } + } else if (tabIndex === 1) { + // table + url.searchParams.append('e', `gn-dataset-view-table`) + } else { + // map + url.searchParams.append('e', `gn-dataset-view-map`) } - return '' + url.searchParams.append('a', `api-url=${this.config.basePath}`) + url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`) + url.searchParams.append('a', `primary-color=#0f4395`) + url.searchParams.append('a', `secondary-color=#8bc832`) + url.searchParams.append('a', `main-color=#555`) + url.searchParams.append('a', `background-color=#fdfbff`) + return url.toString() }) ) diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.html b/libs/feature/record/src/lib/data-view-share/data-view-share.component.html index 4af8536077..f9d5a39fe3 100644 --- a/libs/feature/record/src/lib/data-view-share/data-view-share.component.html +++ b/libs/feature/record/src/lib/data-view-share/data-view-share.component.html @@ -10,7 +10,9 @@ share.tab.permalink - + @@ -24,7 +26,9 @@ >share.tab.webComponent - + diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts b/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts index 2480fd2e67..7be9f4527c 100644 --- a/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts +++ b/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, + Input, Optional, } from '@angular/core' import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-permalink.component' @@ -13,6 +14,7 @@ import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-per changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataViewShareComponent { + @Input() tabIndex: number constructor( @Optional() @Inject(WEB_COMPONENT_EMBEDDER_URL) diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts index b274b4299b..38221b2293 100644 --- a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts +++ b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts @@ -69,6 +69,7 @@ describe('DataViewWebComponentComponent', () => { facade = TestBed.inject(MdViewFacade) fixture = TestBed.createComponent(DataViewWebComponentComponent) component = fixture.componentInstance + component.tabIndex$.next(2) fixture.detectChanges() }) @@ -76,51 +77,99 @@ describe('DataViewWebComponentComponent', () => { expect(component).toBeTruthy() }) - describe('init webComponentHtml$', () => { - it('should generate HTML based on configs', async () => { - const html = await firstValueFrom(component.webComponentHtml$) - expect(html).toBe( - ` -` - ) + describe('Chart view', () => { + describe('init webComponentHtml$', () => { + it('should generate HTML based on configs', async () => { + const html = await firstValueFrom(component.webComponentHtml$) + expect(html).toBe( + ` + ` + ) + }) + }) + describe('update webComponentHtml$', () => { + beforeEach(() => { + facade.chartConfig$.next(chartConfig2) + }) + it('should update HTML based on configs', async () => { + const html = await firstValueFrom(component.webComponentHtml$) + expect(html).toBe( + ` + ` + ) + }) }) }) - describe('update webComponentHtml$', () => { + describe('Map view', () => { beforeEach(() => { - facade.chartConfig$.next(chartConfig2) + component.tabIndex$.next(0) }) - it('should update HTML based on configs', async () => { - const html = await firstValueFrom(component.webComponentHtml$) - expect(html).toBe( - ` - { + it('should generate HTML based on configs', async () => { + const html = await firstValueFrom(component.webComponentHtml$) + expect(html).toBe( + ` +` - ) +>` + ) + }) + }) + }) + describe('Table view', () => { + beforeEach(() => { + component.tabIndex$.next(1) + }) + describe('init webComponentHtml$', () => { + it('should generate HTML based on configs', async () => { + const html = await firstValueFrom(component.webComponentHtml$) + expect(html).toBe( + ` + ` + ) + }) }) }) }) diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts index 37b84acfd2..a2164d2562 100644 --- a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts +++ b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts @@ -1,7 +1,12 @@ -import { ChangeDetectionStrategy, Component, Inject } from '@angular/core' +import { + ChangeDetectionStrategy, + Component, + Inject, + Input, +} from '@angular/core' import { Configuration } from '@geonetwork-ui/data-access/gn4' import { MdViewFacade } from '../state' -import { combineLatest, map } from 'rxjs' +import { BehaviorSubject, combineLatest, map } from 'rxjs' import { GN_UI_VERSION } from '../gn-ui-version.token' @Component({ @@ -11,35 +16,77 @@ import { GN_UI_VERSION } from '../gn-ui-version.token' changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataViewWebComponentComponent { + tabIndex$ = new BehaviorSubject(0) + @Input() + set tabIndex(value: number) { + this.tabIndex$.next(value) + } webComponentHtml$ = combineLatest( + this.tabIndex$, this.facade.chartConfig$, this.facade.metadata$ ).pipe( - map(([config, metadata]) => { - if (config) { - const { aggregation, xProperty, yProperty, chartType } = config + map(([tabIndex, config, metadata]) => { + if (tabIndex === 2) { + if (config) { + const { aggregation, xProperty, yProperty, chartType } = config + return ` + ` + } + return '' + } else if (tabIndex === 1) { return ` -` + } else { + return ` +` +>` } - return '' }) ) From 2ee4c7da3e9c97992018f7d88d9ef5926d6759b7 Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Fri, 28 Jun 2024 14:39:54 +0200 Subject: [PATCH 3/9] feat: add new webcomponents to modules --- apps/webcomponents/src/app/webcomponents.module.ts | 5 ++++- apps/webcomponents/src/index.html | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/webcomponents/src/app/webcomponents.module.ts b/apps/webcomponents/src/app/webcomponents.module.ts index 37862f3fff..1515a39e71 100644 --- a/apps/webcomponents/src/app/webcomponents.module.ts +++ b/apps/webcomponents/src/app/webcomponents.module.ts @@ -36,6 +36,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { provideGn4 } from '@geonetwork-ui/api/repository' import { GnFigureDatasetsComponent } from './components/gn-figure-datasets/gn-figure-datasets.component' import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz' +import { GnDatasetViewMapComponent } from './components/gn-dataset-view-map/gn-dataset-view-map.component' const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [ [GnFacetsComponent, 'gn-facets'], @@ -46,6 +47,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [ [GnDatasetViewChartComponent, 'gn-dataset-view-chart'], [GnMapViewerComponent, 'gn-map-viewer'], [GnFigureDatasetsComponent, 'gn-figure-datasets'], + [GnDatasetViewMapComponent, 'gn-dataset-view-map'], ] @NgModule({ @@ -61,6 +63,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [ GnDatasetViewChartComponent, GnMapViewerComponent, GnFigureDatasetsComponent, + GnDatasetViewMapComponent, ], imports: [ CommonModule, @@ -100,7 +103,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [ }, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], - // bootstrap: [AppComponent], + bootstrap: [AppComponent], }) export class WebcomponentsModule { constructor(private injector: Injector) { diff --git a/apps/webcomponents/src/index.html b/apps/webcomponents/src/index.html index 5368d639da..11553c7c9a 100644 --- a/apps/webcomponents/src/index.html +++ b/apps/webcomponents/src/index.html @@ -81,6 +81,9 @@

GeoNetwork demo

>Preview dataset as chart +
  • + Preview dataset as map +
  • Map viewer
    • From 173163d8a09af70b3c2260b0564a2dadf5200c2d Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Fri, 28 Jun 2024 14:40:51 +0200 Subject: [PATCH 4/9] feat: make data view share be displayed all the time --- .../record/record-metadata/record-metadata.component.html | 2 +- .../record-metadata/record-metadata.component.spec.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html index efc77e05c4..ae74bdfc8a 100644 --- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html +++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html @@ -110,7 +110,7 @@
    { fixture.debugElement.query(By.directive(MockDataViewComponent)) ).toBeFalsy() }) - it('does not render the permalink component', () => { + it('does render the permalink component', () => { expect( fixture.debugElement.query(By.directive(MockDataViewShareComponent)) - ).toBeFalsy() + ).toBeTruthy() }) }) describe('when a DATA link present', () => { @@ -446,10 +446,10 @@ describe('RecordMetadataComponent', () => { .length ).toEqual(2) }) - it('does not render the permalink component', () => { + it('does render the permalink component', () => { expect( fixture.debugElement.query(By.directive(MockDataViewShareComponent)) - ).toBeFalsy() + ).toBeTruthy() }) describe('when selectedTabIndex$ is 2 (chart tab)', () => { beforeEach(() => { From bb2314aa2ad68b56d1addef2c67ff42a7f4c6007 Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Fri, 28 Jun 2024 14:41:04 +0200 Subject: [PATCH 5/9] feat: e2e testing --- apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index 0e9813850e..92a928df64 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -1,4 +1,5 @@ import 'cypress-real-events' +import { tile } from 'ol/loadingstrategy' import path from 'path' beforeEach(() => { @@ -355,6 +356,9 @@ describe('dataset pages', () => { }) cy.screenshot({ capture: 'fullPage' }) }) + it('should display the sharing options', () => { + cy.get('gn-ui-data-view-permalink').should('be.visible') + }) }) describe('features', () => { it('MAP : should open a popup on layer click', () => { From 0225bdfee175a2b8266b551003b741b9703b98d4 Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Fri, 28 Jun 2024 15:01:24 +0200 Subject: [PATCH 6/9] fix: fix e2e tests --- apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index 92a928df64..f4860f419d 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -294,7 +294,7 @@ describe('dataset pages', () => { }) }) - describe('PREVIEW SECTION : display & functions', () => { + describe.only('PREVIEW SECTION : display & functions', () => { beforeEach(() => { cy.get('datahub-record-metadata') .find('[id="preview"]') @@ -357,7 +357,7 @@ describe('dataset pages', () => { cy.screenshot({ capture: 'fullPage' }) }) it('should display the sharing options', () => { - cy.get('gn-ui-data-view-permalink').should('be.visible') + cy.get('gn-ui-data-view-share').should('be.visible') }) }) describe('features', () => { From 498ed25d9220d1f4626e168fca006b73ca5f5fca Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Tue, 2 Jul 2024 09:51:46 +0200 Subject: [PATCH 7/9] feat: make changes from review --- apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts | 2 +- .../record-metadata.component.html | 2 +- .../record-metadata/record-metadata.component.ts | 15 +++++++++++++-- .../data-view-permalink.component.ts | 14 +++++++------- .../data-view-share.component.html | 4 ++-- .../data-view-share/data-view-share.component.ts | 11 ++++++++++- .../data-view-web-component.component.ts | 14 +++++++------- 7 files changed, 41 insertions(+), 21 deletions(-) diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index f4860f419d..4db1f53251 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -294,7 +294,7 @@ describe('dataset pages', () => { }) }) - describe.only('PREVIEW SECTION : display & functions', () => { + describe('PREVIEW SECTION : display & functions', () => { beforeEach(() => { cy.get('datahub-record-metadata') .find('[id="preview"]') diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html index ae74bdfc8a..8cd37d1680 100644 --- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html +++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html @@ -110,7 +110,7 @@
    { @@ -108,7 +108,18 @@ export class RecordMetadataComponent { ) {} onTabIndexChange(index: number): void { - this.selectedTabIndex$.next(index) + let view + switch (index) { + case 0: + view = 'map' + break + case 1: + view = 'table' + break + default: + view = 'chart' + } + this.selectedView$.next(view) setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0) diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts index f430cc8de7..ef55091071 100644 --- a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts +++ b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts @@ -22,21 +22,21 @@ export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken( changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataViewPermalinkComponent { - tabIndex$ = new BehaviorSubject(0) + viewType$ = new BehaviorSubject('map') @Input() - set tabIndex(value: number) { - this.tabIndex$.next(value) + set viewType(value: string) { + this.viewType$.next(value) } permalinkUrl$ = combineLatest([ - this.tabIndex$, + this.viewType$, this.facade.chartConfig$, this.facade.metadata$, ]).pipe( - map(([tabIndex, config, metadata]) => { + map(([viewType, config, metadata]) => { const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin) url.searchParams.set('v', `${this.version}`) - if (tabIndex === 2) { + if (viewType === 'chart') { if (config) { const { aggregation, xProperty, yProperty, chartType } = config url.searchParams.append('e', `gn-dataset-view-chart`) @@ -47,7 +47,7 @@ export class DataViewPermalinkComponent { } else { return '' } - } else if (tabIndex === 1) { + } else if (viewType === 'table') { // table url.searchParams.append('e', `gn-dataset-view-table`) } else { diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.html b/libs/feature/record/src/lib/data-view-share/data-view-share.component.html index f9d5a39fe3..8fd544693c 100644 --- a/libs/feature/record/src/lib/data-view-share/data-view-share.component.html +++ b/libs/feature/record/src/lib/data-view-share/data-view-share.component.html @@ -11,7 +11,7 @@ share.tab.permalink @@ -27,7 +27,7 @@ > diff --git a/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts b/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts index 7be9f4527c..95085e9e0b 100644 --- a/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts +++ b/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts @@ -14,7 +14,16 @@ import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-per changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataViewShareComponent { - @Input() tabIndex: number + private _viewType: string + + @Input() + set viewType(value: string) { + this._viewType = value + } + + get viewType(): string { + return this._viewType + } constructor( @Optional() @Inject(WEB_COMPONENT_EMBEDDER_URL) diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts index a2164d2562..98a9baa7b5 100644 --- a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts +++ b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts @@ -16,18 +16,18 @@ import { GN_UI_VERSION } from '../gn-ui-version.token' changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataViewWebComponentComponent { - tabIndex$ = new BehaviorSubject(0) + viewType$ = new BehaviorSubject('map') @Input() - set tabIndex(value: number) { - this.tabIndex$.next(value) + set viewType(value: string) { + this.viewType$.next(value) } webComponentHtml$ = combineLatest( - this.tabIndex$, + this.viewType$, this.facade.chartConfig$, this.facade.metadata$ ).pipe( - map(([tabIndex, config, metadata]) => { - if (tabIndex === 2) { + map(([viewType, config, metadata]) => { + if (viewType === 'chart') { if (config) { const { aggregation, xProperty, yProperty, chartType } = config return ` From 51db788f03e3ee4fe59a6ac82481ca57f4e91412 Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Tue, 2 Jul 2024 10:01:03 +0200 Subject: [PATCH 8/9] fix: fix unit tests --- .../record-metadata/record-metadata.component.spec.ts | 4 ++-- .../data-view-permalink.component.spec.ts | 6 +++--- .../data-view-web-component.component.spec.ts | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts index 589d2a4aa4..0b23b693b5 100644 --- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts +++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts @@ -451,9 +451,9 @@ describe('RecordMetadataComponent', () => { fixture.debugElement.query(By.directive(MockDataViewShareComponent)) ).toBeTruthy() }) - describe('when selectedTabIndex$ is 2 (chart tab)', () => { + describe('when selectedView$ is chart', () => { beforeEach(() => { - component.selectedTabIndex$.next(2) + component.selectedView$.next('chart') fixture.detectChanges() }) it('renders the permalink component', () => { diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts index f93ecb8541..848ee4bac4 100644 --- a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts +++ b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts @@ -75,7 +75,7 @@ describe('DataViewPermalinkComponent', () => { facade = TestBed.inject(MdViewFacade) fixture = TestBed.createComponent(DataViewPermalinkComponent) component = fixture.componentInstance - component.tabIndex$.next(2) + component.viewType$.next('chart') fixture.detectChanges() }) @@ -126,7 +126,7 @@ describe('DataViewPermalinkComponent', () => { }) describe('Map view', () => { beforeEach(() => { - component.tabIndex$.next(0) + component.viewType$.next('map') }) describe('init permalinkUrl$', () => { it('should generate URL based on configs', async () => { @@ -143,7 +143,7 @@ describe('DataViewPermalinkComponent', () => { }) describe('Table view', () => { beforeEach(() => { - component.tabIndex$.next(1) + component.viewType$.next('table') }) describe('init permalinkUrl$', () => { it('should generate URL based on configs', async () => { diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts index 38221b2293..7521751966 100644 --- a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts +++ b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts @@ -69,7 +69,7 @@ describe('DataViewWebComponentComponent', () => { facade = TestBed.inject(MdViewFacade) fixture = TestBed.createComponent(DataViewWebComponentComponent) component = fixture.componentInstance - component.tabIndex$.next(2) + component.viewType$.next('chart') fixture.detectChanges() }) @@ -128,7 +128,7 @@ describe('DataViewWebComponentComponent', () => { }) describe('Map view', () => { beforeEach(() => { - component.tabIndex$.next(0) + component.viewType$.next('map') }) describe('init webComponentHtml$', () => { it('should generate HTML based on configs', async () => { @@ -151,7 +151,7 @@ describe('DataViewWebComponentComponent', () => { }) describe('Table view', () => { beforeEach(() => { - component.tabIndex$.next(1) + component.viewType$.next('table') }) describe('init webComponentHtml$', () => { it('should generate HTML based on configs', async () => { From 5bb338b5e258887855d30f5e1c2d847074a8cda7 Mon Sep 17 00:00:00 2001 From: Camille Moinier Date: Mon, 15 Jul 2024 10:14:01 +0200 Subject: [PATCH 9/9] feat: add condition to display share tool and comment bootstrap mention --- .../app/record/record-metadata/record-metadata.component.html | 1 + apps/webcomponents/src/app/webcomponents.module.ts | 2 +- .../data-view-permalink/data-view-permalink.component.spec.ts | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html index 8cd37d1680..0a28b804b9 100644 --- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html +++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html @@ -110,6 +110,7 @@
    BaseComponent, string][] = [ }, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], - bootstrap: [AppComponent], + // bootstrap: [AppComponent], }) export class WebcomponentsModule { constructor(private injector: Injector) { diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts index 848ee4bac4..381b66ecbf 100644 --- a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts +++ b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts @@ -4,7 +4,7 @@ import { DataViewPermalinkComponent, WEB_COMPONENT_EMBEDDER_URL, } from './data-view-permalink.component' -import { BehaviorSubject, firstValueFrom, lastValueFrom, takeLast } from 'rxjs' +import { BehaviorSubject, firstValueFrom } from 'rxjs' import { MdViewFacade } from '../state' import { Component, Input } from '@angular/core' import { TranslateModule } from '@ngx-translate/core'