@geogirafe/lib-geoportal 0.6.0-1428917543 → 0.6.0-1433157121

package/components/main.d.ts

@@ -12,6 +12,7 @@ export { default as LidarProfileComponent } from './lidar/profile/component';
 export { default as LRPanelComponent } from './lr-panel/component';
 export { default as MapComponent } from './map/component';
 export { default as MenuButtonComponent } from './menubutton/component';
+export { default as MetadataWindowComponent } from './metadatawindow/component';
 export { default as NavBookmarksComponent } from './navigation/navbookmarks/component';
 export { default as NavHelperComponent } from './navigation/navhelper/component';
 export { default as OfflineComponent } from './offline/component';

package/components/main.js

@@ -12,6 +12,7 @@ export { default as LidarProfileComponent } from './lidar/profile/component';
 export { default as LRPanelComponent } from './lr-panel/component';
 export { default as MapComponent } from './map/component';
 export { default as MenuButtonComponent } from './menubutton/component';
+export { default as MetadataWindowComponent } from './metadatawindow/component';
 export { default as NavBookmarksComponent } from './navigation/navbookmarks/component';
 export { default as NavHelperComponent } from './navigation/navhelper/component';
 export { default as OfflineComponent } from './offline/component';

package/components/metadatawindow/component.d.ts

@@ -0,0 +1,12 @@
+import GirafeDraggableElement from '../../base/GirafeDraggableElement';
+declare class MetadataWindowComponent extends GirafeDraggableElement {
+    template: () => import("uhtml").Hole;
+    private initialized;
+    constructor();
+    registerEvents(): void;
+    render(): void;
+    toggleMetadata(visible: boolean): void;
+    closeWindow(): void;
+    connectedCallback(): void;
+}
+export default MetadataWindowComponent;

package/components/metadatawindow/component.js

@@ -0,0 +1,104 @@
+import { html as uHtml } from 'uhtml';
+import GirafeDraggableElement from '../../base/GirafeDraggableElement';
+class MetadataWindowComponent extends GirafeDraggableElement {
+    constructor() {
+        super('metadatawindow');
+        Object.defineProperty(this, "template", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                return uHtml `<style>
+#draggable {
+  border-radius: 1px;
+  box-shadow: var(--bx-shdw);
+  height: 100%;
+  width: 100%;
+}
+
+#header {
+  height: 2rem;
+  line-height: 2rem;
+  cursor: grabbing;
+  z-index: 10;
+  background: var(--bkg-color-grad2);
+  color: var(--text-color);
+  text-align: center;
+}
+
+#content {
+  padding-left: 1rem;
+  width: calc(100% - 1rem);
+  height: calc(100% - 2rem);
+}
+
+#close {
+  cursor: pointer;
+  float: right;
+  width: 12px;
+  color: var(--text-color);
+  padding: 0.45rem;
+}
+
+iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+
+</style>
+<div id="draggable">
+  <div id="header">
+    <span i18n="${this.state.metadata.title}"></span>
+    <img id="close" alt="close-icon" src="icons/close.svg" />
+  </div>
+  <div id="content">
+    <iframe title="iframe content" src="${this.state.metadata.url}"></iframe>
+  </div>
+</div>
+`;
+            }
+        });
+        Object.defineProperty(this, "initialized", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+    }
+    registerEvents() {
+        this.stateManager.subscribe('interface.metadataVisible', (_oldValue, newValue) => this.toggleMetadata(newValue));
+        this.stateManager.subscribe(/metadata.*/, () => this.render());
+    }
+    render() {
+        if (!this.initialized) {
+            const host = this.shadow.getRootNode().host;
+            host.style.width = this.configManager.Config.metadata.defaultWindowWidth;
+            host.style.height = this.configManager.Config.metadata.defaultWindowHeight;
+            this.initialized = true;
+        }
+        super.render();
+        this.girafeTranslate();
+        this.makeDraggable();
+    }
+    toggleMetadata(visible) {
+        if (visible) {
+            this.render();
+        }
+        else {
+            this.renderEmpty();
+        }
+    }
+    closeWindow() {
+        this.state.interface.metadataVisible = false;
+    }
+    connectedCallback() {
+        this.loadConfig().then(() => {
+            this.render();
+            this.girafeTranslate();
+            this.makeDraggable();
+            this.registerEvents();
+        });
+    }
+}
+export default MetadataWindowComponent;

package/components/selectiongrid/component.d.ts

@@ -10,6 +10,7 @@ declare class SelectionGridComponent extends GirafeResizableElement {
     template: () => import("uhtml").Hole;
     private readonly eventsCallbacks;
     private readonly selectionGridManager;
+    private readonly selectionTabulatorManager;
     private isVisibleComponentSetup;
     private debounceOnFeaturesSelected;
     visible: boolean;
@@ -26,7 +27,7 @@ declare class SelectionGridComponent extends GirafeResizableElement {
     /**
      * Activates the specified tab, renders the grid, and displays the grid for the specified id.
      */
-    displayGrid(id: string): void;
+    displayGrid(id: string, replaceData?: boolean): void;
     /**
      * Clean the grid, closes the panel and deselect the selected features.
      */

package/components/selectiongrid/component.js

@@ -2,6 +2,7 @@ import { html as uHtml } from 'uhtml';
 import GirafeResizableElement from '../../base/GirafeResizableElement';
 import { debounce } from '../../tools/utils/debounce';
 import SelectionGridManager from './tools/selectiongridmanager';
+import SelectionTabulatorManager from './tools/selectiontabulatormanager';
 /**
  * Represents a selection grid component based on GridJs.
  * Display itself when it should be visible and have selected features.
@@ -25,7 +26,6 @@ class SelectionGridComponent extends GirafeResizableElement {
 }
 
 #panel {
-  position: absolute;
   top: 0;
   left: 0;
   right: 0;
@@ -161,11 +161,28 @@ th.gridjs-th {
   margin: 0.1rem;
 }
 
+/* Define the style when the column is not sorted */
+.tabulator-col[aria-sort='none'] .tabulator-col-sorter i {
+  color: #999;
+}
+
+/* Define the style when the column is sorted in ascending order */
+.tabulator-col[aria-sort='asc'] .tabulator-col-sorter i {
+  color: #f00;
+}
+
+/* Define the style when the column is sorted in descending order */
+.tabulator-col[aria-sort='desc'] .tabulator-col-sorter i {
+  color: #f00;
+  transform: scaleY(-1); /* flip the icon vertically so the arrow points down */
+}
+
 </style>
 <link rel="stylesheet" href="styles/common.css" />
 <link rel="stylesheet" href="lib/gridjs/mermaid.min.css" />
 <link rel="stylesheet" href="lib/fontawesome/css/all.min.css" />
 <link rel="stylesheet" href="lib/font-gis/font-gis.css" />
+<link rel="stylesheet" href="../../../node_modules/tabulator-tables/dist/css/tabulator.css" />
 
 <div id="panel">
   <div id="content">
@@ -176,10 +193,10 @@ th.gridjs-th {
         i18n="${th.text}"
         class="${th.active ? 'tab active' : 'tab'}"
         .active="${th.active}"
-        onclick="${() => this.displayGrid(th.id)}"></button>
+        onclick="${() => this.displayGrid(th.id, true)}"></button>
       `)}
     </div>
-    <div id="grid"></div>
+    <div id="tabulator"></div>
   </div>
   <div id="gutter"></div>
   <button id="close" onclick="this.closePanel()">
@@ -201,6 +218,12 @@ th.gridjs-th {
             writable: true,
             value: new SelectionGridManager()
         });
+        Object.defineProperty(this, "selectionTabulatorManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new SelectionTabulatorManager()
+        });
         Object.defineProperty(this, "isVisibleComponentSetup", {
             enumerable: true,
             configurable: true,
@@ -234,15 +257,18 @@ th.gridjs-th {
      * @returns The current array of TabHeader objects.
      */
     getTabHeaders() {
-        return this.selectionGridManager.tabHeaders;
+        return this.selectionTabulatorManager.tabHeaders;
     }
     /**
      * Activates the specified tab, renders the grid, and displays the grid for the specified id.
      */
-    displayGrid(id) {
-        this.selectionGridManager.activateTab(id);
+    displayGrid(id, replaceData = false) {
+        if (replaceData) {
+            this.selectionTabulatorManager.replaceData(id);
+        }
+        this.selectionTabulatorManager.activateTab(id);
         this.render();
-        this.selectionGridManager.displayGrid(id);
+        this.selectionTabulatorManager.displayGrid(id);
     }
     /**
      * Clean the grid, closes the panel and deselect the selected features.
@@ -260,7 +286,6 @@ th.gridjs-th {
     renderComponent() {
         super.render();
         super.girafeTranslate();
-        this.selectionGridManager.setGridElement(this.shadow.querySelector('#grid'));
         this.activateTooltips(false, [800, 0], 'top-end');
         if (!this.isVisibleComponentSetup) {
             this.setupVisibleComponent();
@@ -309,15 +334,16 @@ th.gridjs-th {
      * @private
      */
     onFeaturesSelected(features) {
-        this.selectionGridManager.tabHeaders = [];
+        this.selectionTabulatorManager.tabHeaders = [];
         // No feature ? Close.
         if (this.isNullOrUndefined(features) || features.length <= 0) {
             this.closePanel();
             return;
         }
-        // Otherwise, transforms features to grid data.
-        this.selectionGridManager.featuresToGridData(features);
-        const tabIds = Object.keys(this.selectionGridManager.idTab);
+        this.selectionTabulatorManager.featuresToGridData(features);
+        const tabIds = Object.keys(this.selectionTabulatorManager.idTab);
+        //define table element
+        this.selectionTabulatorManager.setElement(this.shadow.querySelector('#tabulator'));
         // No tab ? Close the panel.
         if (!tabIds.length) {
             this.closePanel();

package/components/selectiongrid/tools/selectiontabulatormanager.d.ts

@@ -0,0 +1,81 @@
+import type OlFeature from 'ol/Feature';
+import { GridDataById } from '../../../tools/featuretogriddatabyid';
+import { ColumnDefinition, TabulatorFull as Tabulator } from 'tabulator-tables';
+/**
+ * Represents the header text and state of a tab.
+ */
+export interface TabHeader {
+    id: string;
+    text: string;
+    active: boolean;
+}
+/**
+ * Represents a column in a data table.
+ */
+export interface Column {
+    id: string;
+    name: string;
+}
+/**
+ * Represents the content and backrefs of a tab.
+ */
+export interface TabContent {
+    columns: Column[];
+    data: unknown[][];
+    features: OlFeature[];
+}
+export default class SelectionTabulatorManager {
+    private readonly formatGridGeomValue;
+    private configManager;
+    private readonly featureToGridData;
+    idTab: Record<string, TabContent>;
+    tabHeaders: TabHeader[];
+    table: Tabulator | null;
+    element: string | HTMLElement;
+    data: GridDataById;
+    constructor();
+    /**
+     * Set the HTML element to be used by the grid.
+     */
+    setElement(htmlElement: HTMLElement): void;
+    /**
+     * Replace the data of the current grid with the data of the specified tab.
+     */
+    replaceData(id: string): void;
+    /**
+     * Activates a tab matching the given id.
+     */
+    activateTab(id: string): void;
+    /**
+     * Creates (replace) the GridJS grid based on the provided tab id and related data and features.
+     */
+    displayGrid(id: string): void;
+    /**
+     * Transforms the given features into grid data and sets tab headers.
+     * The grid data are completely replaced.
+     */
+    featuresToGridData(features: OlFeature[]): void;
+    /**
+     * Converts grid data to grid tab format and adds it to the idTab object.
+     * @private
+     */
+    private gridDataToGridTab;
+    columnsToGridColumns(columns: string[]): ColumnDefinition[];
+    filterEmptyColumnsOnData(data: GridDataById): GridDataById;
+    /**
+     * @returns A newly created grid column object.
+     * @private
+     */
+    private createGridColumn;
+    /**
+     * Creates grid data by mapping values (simple values, or transformed values in case of HTML).
+     * @returns The grid data array.
+     * @private
+     */
+    private createGridData;
+    /**
+     * @returns The locale specified in the configuration.
+     * @private
+     */
+    private getLocale;
+}

package/components/selectiongrid/tools/selectiontabulatormanager.js

@@ -0,0 +1,193 @@
+import OlGeomGeometry from 'ol/geom/Geometry';
+import ConfigManager from '../../../tools/configuration/configmanager';
+import FeatureToGridDataById from '../../../tools/featuretogriddatabyid';
+import I18nManager from '../../../tools/i18n/i18nmanager';
+import FormatGridGeomValue from './formatgridgeomvalue';
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+export default class SelectionTabulatorManager {
+    constructor() {
+        Object.defineProperty(this, "formatGridGeomValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new FormatGridGeomValue()
+        });
+        Object.defineProperty(this, "configManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "featureToGridData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new FeatureToGridDataById({ keepGeomProperty: true })
+        });
+        Object.defineProperty(this, "idTab", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "tabHeaders", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "table", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "element", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        this.configManager = ConfigManager.getInstance();
+    }
+    /**
+     * Set the HTML element to be used by the grid.
+     */
+    setElement(htmlElement) {
+        this.element = htmlElement;
+    }
+    /**
+     * Replace the data of the current grid with the data of the specified tab.
+     */
+    replaceData(id) {
+        const columns = this.columnsToGridColumns(this.data[id].columns);
+        this.table?.setColumns(columns);
+        this.table?.replaceData(this.data[id].notOlProperties);
+    }
+    /**
+     * Activates a tab matching the given id.
+     */
+    activateTab(id) {
+        this.tabHeaders?.forEach((tabHeader) => (tabHeader.active = false));
+        const visibleTabHeader = this.tabHeaders?.find((tabHeader) => tabHeader.id === id);
+        if (!visibleTabHeader) {
+            return;
+        }
+        visibleTabHeader.active = true;
+    }
+    /**
+     * Creates (replace) the GridJS grid based on the provided tab id and related data and features.
+     */
+    displayGrid(id) {
+        if (!this.element) {
+            return;
+        }
+        this.table = new Tabulator(this.element, {
+            data: this.data[id].notOlProperties,
+            columns: this.columnsToGridColumns(this.data[id].columns),
+            selectableRows: true,
+            layout: 'fitColumns',
+            headerSortElement: function (_, dir) {
+                switch (dir) {
+                    case 'asc':
+                        return "<i class='fas fa-sort-up'>";
+                    case 'desc':
+                        return "<i class='fas fa-sort-down'>";
+                    default:
+                        return "<i class='fas fa-sort'>";
+                }
+            }
+        });
+    }
+    /**
+     * Transforms the given features into grid data and sets tab headers.
+     * The grid data are completely replaced.
+     */
+    featuresToGridData(features) {
+        this.idTab = {};
+        const gridDataById = this.featureToGridData.toGridDataById(features);
+        // Create tabs and collect data.
+        Object.keys(gridDataById).forEach((id) => this.gridDataToGridTab(id, gridDataById[id]));
+        // Create tabs headers
+        this.tabHeaders = Object.keys(this.idTab).map((key) => {
+            return {
+                id: key,
+                text: I18nManager.getInstance().getTranslation(key),
+                active: false
+            };
+        });
+        this.data = this.filterEmptyColumnsOnData(gridDataById);
+    }
+    /**
+     * Converts grid data to grid tab format and adds it to the idTab object.
+     * @private
+     */
+    gridDataToGridTab(id, gridData) {
+        if (id in this.idTab) {
+            // Already in ? Don't add a new one.
+            return;
+        }
+        this.idTab[id] = {
+            columns: gridData.columns.map((column) => this.createGridColumn(column)),
+            data: gridData.data.map((data) => this.createGridData(data)),
+            features: gridData.features
+        };
+    }
+    columnsToGridColumns(columns) {
+        const columnDefinition = [];
+        columns.map((column) => columnDefinition.push({ title: column, field: column }));
+        columnDefinition.forEach((column) => {
+            if (column.title === 'geometry' || column.title === 'geom') {
+                column.formatter = (cell) => {
+                    return this.formatGridGeomValue.getGeometryIcons(cell.getValue(), this.getLocale()) ?? cell.getValue();
+                };
+            }
+        });
+        return columnDefinition;
+    }
+    filterEmptyColumnsOnData(data) {
+        for (const [_, entry] of Object.entries(data)) {
+            const columns = entry.columns;
+            const notOlProperties = entry.notOlProperties;
+            for (const [_, row] of Object.entries(notOlProperties)) {
+                for (const [key, _] of Object.entries(row)) {
+                    if (!columns.some((column) => column === key)) {
+                        delete row[key];
+                    }
+                }
+            }
+        }
+        return data;
+    }
+    /**
+     * @returns A newly created grid column object.
+     * @private
+     */
+    createGridColumn(id) {
+        return {
+            id,
+            name: I18nManager.getInstance().getTranslation(id)
+        };
+    }
+    /**
+     * Creates grid data by mapping values (simple values, or transformed values in case of HTML).
+     * @returns The grid data array.
+     * @private
+     */
+    createGridData(values) {
+        return values.map((value) => value instanceof OlGeomGeometry ? this.formatGridGeomValue.getGeometryIcons(value, this.getLocale()) : value);
+    }
+    /**
+     * @returns The locale specified in the configuration.
+     * @private
+     */
+    getLocale() {
+        return this.configManager.Config.general.locale;
+    }
+}

package/components/treeviewgroup/component.d.ts

@@ -15,6 +15,7 @@ declare class TreeViewGroupComponent extends GirafeHTMLElement {
     toggle(state?: 'on' | 'off' | 'semi'): void;
     connectedCallback(): void;
     deactivateGroup(layer: BaseLayer): void;
+    showMetadata(): void;
     deleteGroup(): void;
     private deleteGroupRecursive;
 }

package/components/treeviewgroup/component.js

@@ -80,8 +80,13 @@ i {
   width: 0;
 }
 
-.delete {
+.metadata {
   order: 5;
+  padding: 0.45rem;
+}
+
+.delete {
+  order: 6;
   padding-top: 0.45rem;
 }
 
@@ -144,6 +149,12 @@ i {
     >${this.group.name}</span
   >
 
+  <!-- Metadata icon -->
+  <i
+    class="${this.group.metadataUrl ? 'fa fa-solid fa-circle-info tool metadata selectable' : 'metadata hidden'}"
+    tip="More information"
+    onclick="${() => this.showMetadata()}"></i>
+
   <!-- Remove icon -->
   <i
     class="fa fa-solid fa-xmark tool delete selectable"
@@ -231,6 +242,13 @@ i {
             }
         }
     }
+    showMetadata() {
+        this.state.metadata = {
+            title: this.group.name,
+            url: this.group.metadataUrl ?? null
+        };
+        this.state.interface.metadataVisible = true;
+    }
     deleteGroup() {
         this.deactivateGroup(this.group);
         if (!this.deleteGroupRecursive(this.state.layers.layersList)) {

package/components/treeviewitem/component.d.ts

@@ -21,6 +21,7 @@ declare class TreeViewItemComponent extends GirafeHTMLElement {
     zoomToVisibleResolution(): void;
     zoomToFullExtent(): void;
     swipeLayer(side: 'left' | 'right'): void;
+    showMetadata(): void;
     connectedCallback(): void;
 }
 export default TreeViewItemComponent;

package/components/treeviewitem/component.js

@@ -125,8 +125,13 @@ i {
   order: 11;
 }
 
-.legend {
+.metadata {
   order: 12;
+  padding-right: 0.15rem;
+}
+
+.legend {
+  order: 13;
 }
 
 .item i.advanced {
@@ -228,6 +233,12 @@ i {
     class="${this.layer instanceof LayerWms && this.layer.queryable ? 'fa-solid fa-filter tool selectable filter advanced' : 'filter invisible'}"
     tip="Filter layer"></i>
 
+  <!-- Metadata icon -->
+  <i
+    class="${this.layer.metadataUrl ? 'fa fa-solid fa-circle-info tool metadata selectable' : 'metadata hidden'}"
+    tip="More information"
+    onclick="${() => this.showMetadata()}"></i>
+
   <!-- Toggle legend icon -->
   <div
     class="${this.layer instanceof LayerLocalFile || (this.layer instanceof LayerWms && this.layer.legend) ? 'legend selectable' : 'legend invisible'}">
@@ -456,6 +467,13 @@ ${Object.keys(this.legendUrls).map((l) => uHtml `<img
         // Lastly, we update the state
         this.state.layers.swipedLayers = newSwipedLayers;
     }
+    showMetadata() {
+        this.state.metadata = {
+            title: this.layer.name,
+            url: this.layer.metadataUrl ?? null
+        };
+        this.state.interface.metadataVisible = true;
+    }
     connectedCallback() {
         this.loadConfig().then(() => {
             this.render();

package/main.js

@@ -17,6 +17,7 @@ import ColorSwitcherComponent from './components/colorswitcher/component';
 import CoordinateComponent from './components/coordinate/component';
 import GlobeComponent from './components/globe/component';
 import HelpComponent from './components/help/component';
+import MetadataWindowComponent from './components/metadatawindow/component';
 import InfoboxComponent from './components/infobox/component';
 import LanguageComponent from './components/language/component';
 import LidarPanelComponent from './components/lidar/panel/component';
@@ -81,6 +82,7 @@ try {
         customElements.define('girafe-coordinate', CoordinateComponent);
         customElements.define('girafe-globe-select', GlobeComponent);
         customElements.define('girafe-help', HelpComponent);
+        customElements.define('girafe-metadata-window', MetadataWindowComponent);
         customElements.define('girafe-infobox', InfoboxComponent);
         customElements.define('girafe-language-select', LanguageComponent);
         customElements.define('girafe-lidar-panel', LidarPanelComponent);

package/models/gmf.d.ts

@@ -13,6 +13,7 @@ export interface GMFMetadata {
     legendRule?: string;
     legendImage?: string;
     disclaimer?: string;
+    metadataUrl?: string;
     hiDPILegendImages?: Record<string, string>;
     printLayers?: string;
     queryLayers?: string;

package/models/layers/baselayer.d.ts

@@ -3,6 +3,7 @@ import ThemeLayer from './themelayer';
 type BaseLayerOptions = {
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
 };
 declare abstract class BaseLayer {
     /**
@@ -18,6 +19,7 @@ declare abstract class BaseLayer {
     order: number;
     isDefaultChecked: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     hasError: boolean;
     errorMessage: string | null;
     abstract activeState: string;
@@ -26,6 +28,7 @@ declare abstract class BaseLayer {
     abstract clone(): BaseLayer;
     parent: ThemeLayer | GroupLayer | null;
     constructor(id: number, name: string, order: number, options?: BaseLayerOptions);
+    private calculateMetadataUrl;
     /**
      * @returns the name of the class to facilitate the identification
      * of subclasses, even in Proxy objects.

package/models/layers/baselayer.js

@@ -1,3 +1,4 @@
+import ConfigManager from '../../tools/configuration/configmanager';
 import { v4 as uuidv4 } from 'uuid';
 class BaseLayer {
     constructor(id, name, order, options) {
@@ -44,6 +45,12 @@ class BaseLayer {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "metadataUrl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "hasError", {
             enumerable: true,
             configurable: true,
@@ -68,6 +75,16 @@ class BaseLayer {
         this.order = order;
         this.isDefaultChecked = options?.isDefaultChecked || false;
         this.disclaimer = options?.disclaimer;
+        this.metadataUrl = this.calculateMetadataUrl(options?.metadataUrl);
+    }
+    calculateMetadataUrl(metadataUrl) {
+        if (!metadataUrl) {
+            return undefined;
+        }
+        if (!metadataUrl.startsWith('http') && ConfigManager.getInstance().Config.metadata.metadataUrlPrefix) {
+            return ConfigManager.getInstance().Config.metadata.metadataUrlPrefix + metadataUrl;
+        }
+        return metadataUrl;
     }
     /**
      * @returns the name of the class to facilitate the identification

package/models/layers/grouplayer.d.ts

@@ -2,6 +2,7 @@ import BaseLayer from './baselayer';
 export type GroupLayerOptions = {
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     isDefaultExpanded?: boolean;
     isExclusiveGroup?: boolean;
 };

package/models/layers/grouplayer.js

@@ -39,6 +39,7 @@ class GroupLayer extends BaseLayer {
     clone() {
         const options = {
             isDefaultChecked: this.isDefaultChecked,
+            metadataUrl: this.metadataUrl,
             disclaimer: this.disclaimer,
             isDefaultExpanded: this.isExpanded,
             isExclusiveGroup: this.isExclusiveGroup

package/models/layers/layer.d.ts

@@ -2,6 +2,7 @@ import BaseLayer from './baselayer';
 type LayerOptions = {
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     opacity?: number;
 };
 declare abstract class Layer extends BaseLayer {

package/models/layers/layercog.d.ts

@@ -3,6 +3,7 @@ import Layer from './layer';
 type LayerCogTilesOptions = {
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     opacity?: number;
 };
 declare class LayerCog extends Layer {

package/models/layers/layercog.js

@@ -22,6 +22,7 @@ class LayerCog extends Layer {
     clone() {
         const options = {
             isDefaultChecked: this.isDefaultChecked,
+            metadataUrl: this.metadataUrl,
             disclaimer: this.disclaimer,
             opacity: this.opacity
         };
@@ -35,6 +36,7 @@ class LayerCog extends Layer {
     static getOptionsFromGMFTreeItem(options) {
         return {
             isDefaultChecked: options.metadata?.isChecked,
+            metadataUrl: options.metadata?.metadataUrl,
             disclaimer: options.metadata?.disclaimer,
             opacity: 1 // TODO REG : Set default opacity
         };

package/models/layers/layervectortiles.d.ts

@@ -3,6 +3,7 @@ type LayerVectorTilesOptions = {
     projection?: string;
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     opacity?: number;
 };
 declare class LayerVectorTiles extends Layer {

package/models/layers/layervectortiles.js

@@ -35,6 +35,7 @@ class LayerVectorTiles extends Layer {
         const options = {
             projection: this.projection,
             isDefaultChecked: this.isDefaultChecked,
+            metadataUrl: this.metadataUrl,
             disclaimer: this.disclaimer,
             opacity: this.opacity
         };

package/models/layers/layerwms.d.ts

@@ -7,6 +7,7 @@ import Layer from './layer';
 export type LayerWmsOptions = {
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     opacity?: number;
     minResolution?: number;
     maxResolution?: number;

package/models/layers/layerwms.js

@@ -143,6 +143,7 @@ class LayerWms extends Layer {
     clone() {
         const options = {
             isDefaultChecked: this.isDefaultChecked,
+            metadataUrl: this.metadataUrl,
             disclaimer: this.disclaimer,
             opacity: this.opacity,
             minResolution: this.minResolution,
@@ -180,6 +181,7 @@ class LayerWms extends Layer {
     static getOptionsFromGMFTreeItem(options) {
         const opts = {
             isDefaultChecked: options.metadata?.isChecked,
+            metadataUrl: options.metadata?.metadataUrl,
             disclaimer: options.metadata?.disclaimer,
             opacity: 1, // TODO REG : Set default opacity
             minResolution: options.minResolutionHint,

package/models/layers/layerwmts.d.ts

@@ -6,6 +6,7 @@ import WMTS from 'ol/source/WMTS';
 export type LayerWmtsOptions = {
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     opacity?: number;
     dimensions?: Record<string, object>;
     imageType?: string;

package/models/layers/layerwmts.js

@@ -115,6 +115,7 @@ class LayerWmts extends Layer {
     clone() {
         const options = {
             isDefaultChecked: this.isDefaultChecked,
+            metadataUrl: this.metadataUrl,
             disclaimer: this.disclaimer,
             opacity: this.opacity,
             dimensions: this.dimensions,
@@ -145,6 +146,7 @@ class LayerWmts extends Layer {
     static getOptionsFromGMFTreeItem(options) {
         return {
             isDefaultChecked: options.metadata?.isChecked,
+            metadataUrl: options.metadata?.metadataUrl,
             disclaimer: options.metadata?.disclaimer,
             opacity: 1, // TODO REG : Set default opacity
             dimensions: options.dimensions,

package/models/layers/layerxyz.d.ts

@@ -3,6 +3,7 @@ import Layer from './layer';
 type LayerXYZTilesOptions = {
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     opacity?: number;
 };
 declare class LayerXYZ extends Layer {

package/models/layers/layerxyz.js

@@ -22,6 +22,7 @@ class LayerXYZ extends Layer {
     clone() {
         const options = {
             isDefaultChecked: this.isDefaultChecked,
+            metadataUrl: this.metadataUrl,
             disclaimer: this.disclaimer,
             opacity: this.opacity
         };
@@ -35,6 +36,7 @@ class LayerXYZ extends Layer {
     static getOptionsFromGMFTreeItem(options) {
         return {
             isDefaultChecked: options.metadata?.isChecked,
+            metadataUrl: options.metadata?.metadataUrl,
             disclaimer: options.metadata?.disclaimer,
             opacity: 1 // TODO REG : Set default opacity
         };

package/models/layers/themelayer.d.ts

@@ -3,6 +3,7 @@ import { Coordinate } from 'ol/coordinate';
 export type ThemeLayerOptions = {
     isDefaultChecked?: boolean;
     disclaimer?: string;
+    metadataUrl?: string;
     isDefaultExpanded?: boolean;
     isExclusiveTheme?: boolean;
 };

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "0.6.0-1428917543",
+  "version": "0.6.0-1433157121",
   "type": "module",
   "engines": {
     "node": ">=20.0.0"
@@ -40,6 +40,7 @@
     "gridjs": "6.2.0",
     "lz-string": "1.5.0",
     "on-change": "5.0.1",
+    "tabulator-tables": "^6.2.5",
     "source-map-js": "1.2.0",
     "tippy.js": "6.3.7",
     "uhtml": "4.5.9",
@@ -63,6 +64,7 @@
     "@types/file-saver": "2.0.7",
     "@types/geojson": "7946.0.14",
     "@types/proj4": "2.5.5",
+    "@types/tabulator-tables": "^6.2.3",
     "@types/uuid": "10.0.0",
     "@typescript-eslint/eslint-plugin": "7.15.0",
     "@typescript-eslint/parser": "7.15.0",

package/public/about.json

@@ -1 +1 @@
-{"version":"0.6.0-1428917543", "build":"1428917543", "date":"27/08/2024"}
+{"version":"0.6.0-1433157121", "build":"1433157121", "date":"30/08/2024"}

package/styles/index.css

@@ -265,6 +265,14 @@ girafe-share {
   transform: translate(-50%, -50%);
 }
 
+girafe-metadata-window {
+  position: absolute;
+  z-index: 100;
+  background: var(--bkg-color);
+  top: 1rem;
+  left: 2rem;
+}
+
 .border-top {
   border-top: solid 1px #fff;
 }

package/tools/configuration/girafeconfig.d.ts

@@ -121,6 +121,11 @@ declare class GirafeConfig {
         quote: string;
         separator: string;
     };
+    metadata: {
+        metadataUrlPrefix: string;
+        defaultWindowWidth: string;
+        defaultWindowHeight: string;
+    };
     offline?: {
         downloadStartZoom: number;
         downloadEndZoom: number;
@@ -145,6 +150,7 @@ declare class GirafeConfig {
     private initConfigBasemaps;
     private initConfigLidar;
     private initConfigCsv;
+    private initConfigMetadata;
     private initConfigOffline;
     private initConfigBookmarks;
     private initConfigThemes;

package/tools/configuration/girafeconfig.js

@@ -108,6 +108,12 @@ class GirafeConfig {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "metadata", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "offline", {
             enumerable: true,
             configurable: true,
@@ -129,6 +135,7 @@ class GirafeConfig {
         this.bookmarks = this.initConfigBookmarks(config);
         this.lidar = this.initConfigLidar(config);
         this.csv = this.initConfigCsv(config);
+        this.metadata = this.initConfigMetadata(config);
         this.offline = this.initConfigOffline(config);
         try {
             this.search = this.initConfigSearch(config);
@@ -302,6 +309,17 @@ class GirafeConfig {
             ...config.csv
         };
     }
+    initConfigMetadata(config) {
+        const defaultConfig = {
+            metadataUrlPrefix: '',
+            defaultWindowWidth: '960px',
+            defaultWindowHeight: '460px'
+        };
+        return {
+            ...defaultConfig,
+            ...config.metadata
+        };
+    }
     initConfigOffline(config) {
         // This can be null, that's not a problem. No default value either.
         return config.offline;

package/tools/state/state.d.ts

@@ -18,6 +18,7 @@ type GraphicalInterface = {
     selectionComponentVisible: boolean;
     selectionComponent: string;
     aboutVisible: boolean;
+    metadataVisible: boolean;
     shareVisible: boolean;
     darkMapMode: boolean;
     darkFrontendMode: boolean;
@@ -69,6 +70,10 @@ export type Lidar = {
     line: OlGeomLineString | null;
     drawActive: boolean;
 };
+export type Metadata = {
+    title: string | null;
+    url: string | null;
+};
 export default class State {
     /**
      * This class is a used as the state of the application, which will be accessed behind a javascript proxy.
@@ -97,6 +102,7 @@ export default class State {
     infobox: {
         elements: InfoBoxContent[];
     };
+    metadata: Metadata;
     isOffline: boolean;
     extendedState: Record<string, object>;
 }

package/tools/state/state.js

@@ -70,6 +70,7 @@ export default class State {
                 selectionComponentVisible: false,
                 selectionComponent: '',
                 aboutVisible: false,
+                metadataVisible: false,
                 shareVisible: false,
                 darkMapMode: false,
                 darkFrontendMode: false
@@ -177,6 +178,15 @@ export default class State {
                 elements: []
             }
         });
+        Object.defineProperty(this, "metadata", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                title: null,
+                url: null
+            }
+        });
         // Indicates is the application is currently used in offline mode
         Object.defineProperty(this, "isOffline", {
             enumerable: true,

package/tools/themesmanager.js

@@ -241,6 +241,7 @@ class ThemesManager extends GirafeSingleton {
                 // Group
                 const options = {
                     isDefaultChecked: elem.metadata?.isChecked,
+                    metadataUrl: elem.metadata?.metadataUrl,
                     disclaimer: elem.metadata?.disclaimer,
                     isDefaultExpanded: elem.metadata?.isExpanded,
                     isExclusiveGroup: elem.metadata?.exclusiveGroup