Merge pull request #469 from geonetwork/wc-dataviz

Add a web component for viewing a dataset as a chart

apps/webcomponents/src/app/components/base.component.ts

@@ -1,23 +1,26 @@
+import { Component, Injector, Input, OnChanges, OnInit } from '@angular/core'
 import {
-  Component,
-  Injector,
-  Input,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core'
-import { ThemeService } from '@geonetwork-ui/util/shared'
-import { Configuration } from '@geonetwork-ui/data-access/gn4'
-import { SearchFacade } from '@geonetwork-ui/feature/search'
+  ElasticsearchService,
+  LinkClassifierService,
+  LinkUsage,
+  ThemeService,
+} from '@geonetwork-ui/util/shared'
+import { Configuration, SearchApiService } from '@geonetwork-ui/data-access/gn4'
+import {
+  ElasticsearchMapper,
+  SearchFacade,
+} from '@geonetwork-ui/feature/search'
 import { TranslateService } from '@ngx-translate/core'
+import { firstValueFrom } from 'rxjs'
 
 export const apiConfiguration = new Configuration()
 
 @Component({
   selector: 'wc-base',
   template: `<div></div>`,
 })
-export class BaseComponent implements OnChanges {
-  @Input() apiUrl = '/'
+export class BaseComponent implements OnChanges, OnInit {
+  @Input() apiUrl = null
   @Input() searchId: string
   @Input() primaryColor = '#9a9a9a'
   @Input() secondaryColor = '#767676'
@@ -29,26 +32,59 @@ export class BaseComponent implements OnChanges {
   isInitialized = false
   facade: SearchFacade
   translate: TranslateService
+  searchService: SearchApiService
+  esService: ElasticsearchService
+  esMapper: ElasticsearchMapper
+  linkClassifier: LinkClassifierService
 
   constructor(private injector: Injector) {
     this.facade = injector.get(SearchFacade)
     this.translate = injector.get(TranslateService)
+    this.searchService = injector.get(SearchApiService)
+    this.esService = injector.get(ElasticsearchService)
+    this.esMapper = injector.get(ElasticsearchMapper)
+    this.linkClassifier = injector.get(LinkClassifierService)
   }
 
-  ngOnChanges(): void {
-    if (!this.isInitialized) {
-      apiConfiguration.basePath = this.apiUrl
-      this.translate.reloadLang(this.translate.currentLang)
-      ThemeService.applyCssVariables(
-        this.primaryColor,
-        this.secondaryColor,
-        this.mainColor,
-        this.backgroundColor,
-        this.mainFont,
-        this.titleFont
-      )
-      this.facade.init(this.searchId)
-      this.isInitialized = true
+  ngOnInit() {
+    if (!this.isInitialized && this.apiUrl) {
+      this.init()
+    }
+  }
+
+  ngOnChanges() {
+    if (!this.isInitialized && this.apiUrl) {
+      this.init()
     }
   }
+
+  init() {
+    apiConfiguration.basePath = this.apiUrl
+    this.translate.reloadLang(this.translate.currentLang)
+    ThemeService.applyCssVariables(
+      this.primaryColor,
+      this.secondaryColor,
+      this.mainColor,
+      this.backgroundColor,
+      this.mainFont,
+      this.titleFont
+    )
+    this.facade.init(this.searchId)
+    this.isInitialized = true
+  }
+
+  async getRecordLink(uuid: string, usages: LinkUsage[]) {
+    const record = await firstValueFrom(
+      this.searchService.search(
+        'bucket',
+        JSON.stringify(this.esService.getMetadataByIdPayload(uuid))
+      )
+    )
+      .then((response) => this.esMapper.toRecords(response))
+      .then((records) => records[0])
+    const dataLinks = record.links.filter((link) =>
+      usages.some((usage) => this.linkClassifier.hasUsage(link, usage))
+    )
+    return dataLinks[0]
+  }
 }

apps/webcomponents/src/app/components/gn-aggregated-records/gn-aggregated-records.css

@@ -4,4 +4,5 @@
 
 :host {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
+  display: block;
 }

apps/webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.component.css

@@ -0,0 +1,5 @@
+@import '../../../styles.css';
+
+:host {
+  display: block;
+}

apps/webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.component.html

@@ -0,0 +1 @@
+<gn-ui-chart-view class="h-full" [link]="link"></gn-ui-chart-view>

apps/webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.component.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Injector,
+  Input,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core'
+import { SearchFacade, SearchService } from '@geonetwork-ui/feature/search'
+import { BaseComponent } from '../base.component'
+import { LinkUsage, MetadataLink } from '@geonetwork-ui/util/shared'
+
+@Component({
+  selector: 'wc-gn-dataset-view-chart',
+  templateUrl: './gn-dataset-view-chart.component.html',
+  styleUrls: ['./gn-dataset-view-chart.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  providers: [SearchFacade, SearchService],
+})
+export class GnDatasetViewChartComponent
+  extends BaseComponent
+  implements OnInit
+{
+  @Input() datasetId!: string
+  link: MetadataLink
+  constructor(injector: Injector, private changeDetector: ChangeDetectorRef) {
+    super(injector)
+  }
+  async init() {
+    super.init()
+    this.link = await this.getRecordLink(this.datasetId, [
+      LinkUsage.DATA,
+      LinkUsage.GEODATA,
+    ])
+    this.changeDetector.detectChanges()
+  }
+}

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

@@ -0,0 +1,57 @@
+<!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/icon?family=Material+Icons|Material+Icons+Outlined"
+      rel="stylesheet"
+    />
+    <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-chart {
+        height: 500px;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <div style="margin: 60px 16px">
+        <p>
+          Visualize dataset as a chart from a Metadata Record with
+          <b><i>gn-dataset-view-chart</i></b> web component
+        </p>
+      </div>
+
+      <script src="gn-wc.js"></script>
+      <gn-dataset-view-chart
+        api-url="https://dev.geo2france.fr/geonetwork/srv/api"
+        dataset-id="population-mel"
+        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-chart>
+    </main>
+  </body>
+</html>

apps/webcomponents/src/app/components/gn-dataset-view-table/gn-dataset-view-table.component.css

@@ -1 +1,5 @@
 @import '../../../styles.css';
+
+:host {
+  display: block;
+}

apps/webcomponents/src/app/components/gn-dataset-view-table/gn-dataset-view-table.component.html

@@ -1 +1 @@
-<gn-ui-data-view mode="table"></gn-ui-data-view>
+<gn-ui-table-view class="h-full" [link]="link"></gn-ui-table-view>

apps/webcomponents/src/app/components/gn-dataset-view-table/gn-dataset-view-table.component.ts

@@ -1,16 +1,18 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Injector,
+  Input,
   OnInit,
   ViewEncapsulation,
 } from '@angular/core'
-import { MdViewFacade } from '@geonetwork-ui/feature/record'
 import { SearchFacade, SearchService } from '@geonetwork-ui/feature/search'
 import { BaseComponent } from '../base.component'
+import { LinkUsage, MetadataLink } from '@geonetwork-ui/util/shared'
 
 @Component({
-  selector: 'wc-gn-dataset-preview',
+  selector: 'wc-gn-dataset-view-table',
   templateUrl: './gn-dataset-view-table.component.html',
   styleUrls: ['./gn-dataset-view-table.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,10 +23,17 @@ export class GnDatasetViewTableComponent
   extends BaseComponent
   implements OnInit
 {
-  constructor(injector: Injector, private mdViewFacade: MdViewFacade) {
+  @Input() datasetId!: string
+  link: MetadataLink
+  constructor(injector: Injector, private changeDetector: ChangeDetectorRef) {
     super(injector)
   }
-  ngOnInit(): void {
-    this.mdViewFacade.loadFull('ee965118-2416-4d48-b07e-bbc696f002c2')
+  async init() {
+    super.init()
+    this.link = await this.getRecordLink(this.datasetId, [
+      LinkUsage.DATA,
+      LinkUsage.GEODATA,
+    ])
+    this.changeDetector.detectChanges()
   }
 }

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

@@ -27,27 +27,31 @@
         margin-right: auto;
         margin-top: 3rem;
       }
+      gn-dataset-view-table {
+        height: 500px;
+      }
     </style>
   </head>
   <body>
     <main class="container">
       <div style="margin: 60px 16px">
         <p>
           Visualize Table dataset from a Metadata Record with
-          <b><i>gn-dataset-preview</i></b> web component
+          <b><i>gn-dataset-view-table</i></b> web component
         </p>
       </div>
 
       <script src="gn-wc.js"></script>
-      <gn-dataset-preview
+      <gn-dataset-view-table
         api-url="https://dev.geo2france.fr/geonetwork/srv/api"
+        dataset-id="population-mel"
         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-preview>
+      ></gn-dataset-view-table>
     </main>
   </body>
 </html>

apps/webcomponents/src/app/components/gn-facets/gn-facets.css

@@ -1 +1,5 @@
 @import '../../../styles.css';
+
+:host {
+  display: block;
+}

apps/webcomponents/src/app/components/gn-map-viewer/gn-map-viewer.component.css

@@ -1 +1,5 @@
 @import '../../../styles.css';
+
+:host {
+  display: block;
+}