✨ re-introduce metadata window

resolves #21

src/adjuster/adjuster-presets.service.ts

@@ -145,6 +145,9 @@ export class AdjusterPresetsService {
   }
 
   getLabelInCurrentLang(labels: Label[]) {
+    if (!labels?.length) {
+      return;
+    }
     return this.getLabelInLang(
       labels,
       this.hsLanguageService.getCurrentLanguageCode('default')

src/adjuster/dataset-item/dataset-item.component.html

@@ -1,12 +1,13 @@
 <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
-      [ngClass]="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"
-      (click)="dataset.included = !dataset.included;$event.stopPropagation()"></button>
-    <span class="glyphicon cursor-pointer text-secondary"
-      [ngClass]="descriptionVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
-      (click)="descriptionVisible = !descriptionVisible"></span>
-    <!--label class="ps-2 cursor-pointer text-secondary"
-      (click)="descriptionVisible = !descriptionVisible">{{dataset.name}}</label-->
-    <label><!-- FIXME: a class="text-info non-underlined-link" (click)="showMetadataWindow(dataset)"-->{{getLabelInCurrentLang(dataset.labels)}}<!--/a--></label>
-    <div class="p-2 mb-2 text-info" [hidden]="!descriptionVisible">
-      {{dataset.desc}}
-    </div>
+  [ngClass]="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"
+  (click)="dataset.included = !dataset.included;$event.stopPropagation()"></button>
+<!--span class="glyphicon cursor-pointer text-secondary"
+  [ngClass]="descriptionVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
+  (click)="descriptionVisible = !descriptionVisible"></span-->
+<label class="ps-2 text-secondary"><a class="text-decoration-none"
+    (click)="dataset.included = !dataset.included;$event.stopPropagation()">{{getLabelInCurrentLang(dataset.labels)}}</a></label>
+&nbsp;
+<i class="icon-opennewwindow cursor-pointer text-info" (click)="showMetadataWindow(dataset)"></i>
+<!--div class="p-2 mb-2 text-info" [hidden]="!descriptionVisible">
+  {{dataset.desc}}
+</div-->

src/adjuster/dataset-item/dataset-item.component.ts

@@ -2,7 +2,11 @@ import {Component, Input} from '@angular/core';
 
 import {HsDialogContainerService} from 'hslayers-ng';
 
-import {AdjusterPresetsService} from '../adjuster-presets.service';
+import {
+  AdjusterPresetsService,
+  Dataset,
+  Label,
+} from '../adjuster-presets.service';
 import {MetadataDialogComponent} from '../metadata-dialog/metadata-dialog.component';
 
 @Component({
@@ -10,21 +14,22 @@ import {MetadataDialogComponent} from '../metadata-dialog/metadata-dialog.compon
   templateUrl: 'dataset-item.component.html',
 })
 export class DatasetItemComponent {
-  @Input() dataset;
-  descriptionVisible = false;
+  @Input() dataset: Dataset;
+  //descriptionVisible = false;
 
   constructor(
     public adjusterPresetsService: AdjusterPresetsService,
     public hsDialogContainerService: HsDialogContainerService
   ) {}
 
-  getLabelInCurrentLang(labels) {
+  getLabelInCurrentLang(labels: Label[]) {
     return this.adjusterPresetsService.getLabelInCurrentLang(labels);
   }
 
-  showMetadataWindow(dataset) {
+  showMetadataWindow(dataset: Dataset) {
     this.hsDialogContainerService.create(MetadataDialogComponent, {
-      title: dataset.name,
+      id: dataset.id,
+      desc: dataset.desc,
     });
   }
 }

src/adjuster/dataset-list/dataset-list.component.html

@@ -1,15 +1,15 @@
 <div class="d-flex flex-row">
   <div class="p-2 flex-grow-1">
     <span class="glyphicon cursor-pointer"
-      [ngClass]="datasetlistVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
-      (click)="datasetlistVisible = !datasetlistVisible"></span>
-    <label class="ps-2 cursor-pointer" (click)="datasetlistVisible = !datasetlistVisible">{{getLabelInCurrentLang(factor.labels)}}</label>
+      [ngClass]="datasetListVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
+      (click)="datasetListVisible = !datasetListVisible"></span>
+    <label class="ps-2 cursor-pointer" (click)="datasetListVisible = !datasetListVisible">{{getLabelInCurrentLang(factor.labels)}}</label>
   </div>
   <div class="p-2">{{(factor.weight * 100).toFixed(0)}}&nbsp;%</div>
 </div>
 <input type="range" class="form-range" [(ngModel)]="factor.weight" min="0"
   max="1.0" step="0.05">
-<div [hidden]="!datasetlistVisible">
+<div [hidden]="!datasetListVisible">
   <div *ngFor="let dataset of factor.datasets">
     <pra-dataset-item [dataset]="dataset"></pra-dataset-item>
   </div>

src/adjuster/dataset-list/dataset-list.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 
-import {AdjusterPresetsService} from '../adjuster-presets.service';
+import {AdjusterPresetsService, Factor} from '../adjuster-presets.service';
 
 @Component({
   selector: 'pra-dataset-list',
@@ -8,8 +8,8 @@ import {AdjusterPresetsService} from '../adjuster-presets.service';
   styleUrls: ['./dataset-list.component.scss'],
 })
 export class DatasetListComponent {
-  @Input() factor;
-  datasetlistVisible = false;
+  @Input() factor: Factor;
+  datasetListVisible = false;
 
   constructor(public adjusterPresetsService: AdjusterPresetsService) {}
 

src/adjuster/metadata-dialog/metadata-dialog.component.html

@@ -10,31 +10,34 @@
         </button>
       </div>
       <div class="modal-body" style="max-height: 600px; overflow-y: auto">
-        <div class="row">
+        <div class="row mb-2">
+          <div class="lead text-secondary">{{data.desc}}</div>
+        </div>
+        <div class="row mb-2">
           <div class="col-md-3">
             <b>{{ "METADATA.coverage" | translateHs: {app: 'default'} }}</b>
           </div>
-          <div class="col-md-9">{{data.coverage}}</div>
+          <div class="col-md-9">{{data.coverage ?? "unknown"}}</div>
         </div>
-        <div class="row">
+        <div class="row mb-2">
           <div class="col-md-3">
             <b>{{ "METADATA.LoD" | translateHs: {app: 'default'} }}</b>
           </div>
-          <div class="col-md-9">{{data.lod}}</div>
+          <div class="col-md-9">{{data.lod ?? "unknown"}}</div>
         </div>
-        <div class="row">
+        <div class="row mb-2">
           <div class="col-md-3">
             <b>{{ "METADATA.update" | translateHs: {app: 'default'} }}</b>
           </div>
-          <div class="col-md-9">{{data.update}}</div>
+          <div class="col-md-9">{{data.update ?? "unknown"}}</div>
         </div>
-        <div class="row">
+        <div class="row mb-2">
           <div class="col-md-3">
             <b>{{ "METADATA.source" | translateHs: {app: 'default'} }}</b>
           </div>
-          <div class="col-md-9">{{data.source}}</div>
+          <div class="col-md-9">{{data.source ?? "unknown"}}</div>
         </div>
-        <div class="row">
+        <div class="row mb-2" *ngIf="data.link">
           <div class="col-md-3">
             <b>{{ "COMMON.url" | translateHs: {app: 'default'} }}</b>
           </div>

src/adjuster/metadata-dialog/metadata-dialog.component.ts

@@ -5,11 +5,13 @@ import {HsDialogComponent, HsDialogContainerService} from 'hslayers-ng';
 import {MetadataDialogService} from './metadata-dialog.service';
 
 export type DatasetDescriptor = {
-  title: string;
+  id: string;
   coverage?: string;
+  desc?: string;
   link?: string;
   lod?: string;
   source?: string;
+  title?: string;
   update?: string;
 };
 
@@ -27,7 +29,10 @@ export class MetadataDialogComponent implements HsDialogComponent, OnInit {
   ) {}
 
   ngOnInit() {
-    this.data = this.metadataDialogService.loadDatasetMetadata(this.data.title);
+    const newData = this.metadataDialogService.loadDatasetMetadata(
+      this.data.id
+    );
+    this.data = {...this.data, ...newData};
   }
 
   close(): void {

src/adjuster/metadata-dialog/metadata-dialog.service.ts

@@ -12,35 +12,35 @@ export class MetadataDialogService {
     this.ontology = this.adjusterPresetsService.ontology;
   }
 
-  loadDatasetMetadata(datasetName: string): DatasetDescriptor {
-    console.log(this.ontology);
-    const ontoInfo = this.ontology.find((subject) =>
-      subject['http://www.w3.org/2000/01/rdf-schema#label']?.find((label) =>
-        label['@value']?.includes(datasetName)
-      )
+  loadDatasetMetadata(datasetId: string): DatasetDescriptor {
+    const ontoInfo = this.ontology.find(
+      (subject) => subject['@id'] === datasetId
     );
-    console.log(ontoInfo);
     //TODO: the returned values must reflect possibility of multi-values (e.g. coverage CZ + EU)
     return {
-      title: datasetName,
+      id: datasetId,
+      title:
+        this.adjusterPresetsService.getLabelInCurrentLang(
+          ontoInfo['http://www.w3.org/2000/01/rdf-schema#label']
+        ) ?? null,
       coverage:
-        ontoInfo['http://www.semanticweb.org/attractiveness/hasCoverage'][0][
+        ontoInfo['http://www.semanticweb.org/attractiveness/hasCoverage']?.[0][
           '@id'
         ] ?? null,
       link:
-        ontoInfo['http://www.semanticweb.org/attractiveness/link'][0][
+        ontoInfo['http://www.semanticweb.org/attractiveness/link']?.[0][
           '@value'
         ] ?? null,
       lod:
-        ontoInfo['http://www.semanticweb.org/attractiveness/hasLoD'][0][
+        ontoInfo['http://www.semanticweb.org/attractiveness/hasLoD']?.[0][
           '@id'
         ] ?? null,
       source:
-        ontoInfo['http://www.semanticweb.org/attractiveness/hasSource'][0][
+        ontoInfo['http://www.semanticweb.org/attractiveness/hasSource']?.[0][
           '@id'
         ] ?? null,
       update:
-        ontoInfo['http://www.semanticweb.org/attractiveness/update'][0][
+        ontoInfo['http://www.semanticweb.org/attractiveness/update']?.[0][
           '@value'
         ] ?? null,
     };

tsconfig.json

@@ -23,11 +23,12 @@
     "resolveJsonModule": true,
     "sourceMap": true,
     "skipLibCheck": true,
-    "target": "es2015",
+    "target": "es2015"
   },
   "angularCompilerOptions": {
     "enableResourceInlining": true,
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictTemplates": true,
   }
 }