Merge pull request #921 from geonetwork/share-integrate-maps-tables

[Dataset page] : Share features for tables and maps

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(() => {
@@ -365,6 +366,9 @@ describe('dataset pages', () => {
         })
         cy.screenshot({ capture: 'fullPage' })
       })
+      it('should display the sharing options', () => {
+        cy.get('gn-ui-data-view-share').should('be.visible')
+      })
     })
     describe('features', () => {
       it('MAP : should open a popup on layer click', () => {

apps/datahub/src/app/record/record-metadata/record-metadata.component.html

@@ -110,7 +110,8 @@
     </div>
   </div>
   <gn-ui-data-view-share
-    *ngIf="(selectedTabIndex$ | async) === 2"
+    *ngIf="(displayMap$ | async) || (displayData$ | async)"
+    [viewType]="selectedView$ | async"
   ></gn-ui-data-view-share>
   <div
     id="access"

apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts

@@ -421,10 +421,10 @@ describe('RecordMetadataComponent', () => {
           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,14 +446,14 @@ 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)', () => {
+      describe('when selectedView$ is chart', () => {
         beforeEach(() => {
-          component.selectedTabIndex$.next(2)
+          component.selectedView$.next('chart')
           fixture.detectChanges()
         })
         it('renders the permalink component', () => {

apps/datahub/src/app/record/record-metadata/record-metadata.component.ts

@@ -83,7 +83,7 @@ export class RecordMetadataComponent {
 
   errorTypes = ErrorType
 
-  selectedTabIndex$ = new BehaviorSubject(0)
+  selectedView$ = new BehaviorSubject('map')
 
   thumbnailUrl$ = this.metadataViewFacade.metadata$.pipe(
     map((metadata) => {
@@ -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)

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;
+}

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()
   }
 }

apps/webcomponents/src/app/components/gn-dataset-view-map/gn-dataset-view-map.sample.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Web Component Demo</title>
+    <base href="./" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style>
+      html,
+      body {
+        font-family: var(--font-family-main);
+      }
+      .container {
+        max-width: 1024px;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 3rem;
+      }
+      gn-dataset-view-map {
+        height: 500px;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <div style="margin: 60px 16px">
+        <p>
+          Visualize Map dataset from a Metadata Record with
+          <b><i>gn-dataset-view-map</i></b> web component
+        </p>
+      </div>
+
+      <script src="gn-wc.js"></script>
+      <gn-dataset-view-map
+        api-url="https://www.geo2france.fr/geonetwork/srv/api"
+        dataset-id="9da51f58-15c6-4325-82b1-2cf6c8e75d0f"
+        primary-color="#0f4395"
+        secondary-color="#8bc832"
+        main-color="#555"
+        background-color="#fdfbff"
+        main-font="'Inter', sans-serif"
+        title-font="'DM Serif Display', serif"
+      ></gn-dataset-view-map>
+    </main>
+  </body>
+</html>

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,

apps/webcomponents/src/index.html

@@ -81,6 +81,9 @@ <h1 class="text-3xl">GeoNetwork demo</h1>
             >Preview dataset as chart</a
           >
         </li>
+        <li>
+          <a href="gn-dataset-view-map.sample.html">Preview dataset as map</a>
+        </li>
         <li class="mt-5">
           <a href="gn-map-viewer.sample.html">Map viewer</a>
         </li>

libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts

@@ -75,46 +75,87 @@ describe('DataViewPermalinkComponent', () => {
     facade = TestBed.inject(MdViewFacade)
     fixture = TestBed.createComponent(DataViewPermalinkComponent)
     component = fixture.componentInstance
+    component.viewType$.next('chart')
     fixture.detectChanges()
   })
 
   it('should create', () => {
     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.viewType$.next('map')
+    })
+    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.viewType$.next('table')
     })
-    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`
+        )
+      })
     })
   })
 })