Refactor metadata viewing and related functions to reduce duplication (…

…#277)

Co-authored-by: Rob Quincey <rob.quincey@dorsetcouncil.gov.uk>

GIFrameworkMaps.Web/Scripts/FeatureQuery/FeatureQueryResultRenderer.ts

@@ -16,6 +16,7 @@ import { FeaturePropertiesHelper } from "./FeaturePropertiesHelper";
 import { FeatureQueryTemplateHelper } from "./FeatureQueryTemplateHelper";
 import { Source } from "ol/source";
 import LayerRenderer from "ol/renderer/Layer";
+import { MetadataViewer } from "../Metadata/MetadataViewer";
 
 export class FeatureQueryResultRenderer {
   _gifwMapInstance: GIFWMap;
@@ -172,6 +173,10 @@ export class FeatureQueryResultRenderer {
           );
         }
 
+        popupActions.push(new GIFWPopupAction("About this layer", () => {
+          MetadataViewer.showMetadataModal(gifwLayer, layer, this._gifwMapInstance)
+        },false,false))
+
         if (parentResponses) {
           popupActions.push(
             new GIFWPopupAction(

GIFrameworkMaps.Web/Scripts/Map.ts

@@ -1183,6 +1183,44 @@ export class GIFWMap {
     return withinBasemapExtent && withinMapProjectionExtent;
   }
 
+  /**
+   * Returns a boolean indicating if the layer has a filter applied to it
+   * A 'user editable' filter is one they have either applied themselves, or a default one
+   * (applied by admins) that the user is allowed to modify
+   * @param layer The layer configuration information
+   * @param olLayer The OpenLayers layer
+   * @param userEditableOnly If true, will return true if a CQL filter is applied AND the user is able to edit it
+   * @return Boolean indicating if it does have a filter applied
+   */
+  public getLayerFilteredStatus(
+    layer: Layer,
+    olLayer: olLayer.Layer,
+    userEditableOnly: boolean = true,
+  ): boolean {
+    if (olLayer.get("gifw-filter-applied")) {
+      return true;
+    }
+    const source = olLayer.getSource();
+    if (source instanceof TileWMS || source instanceof ImageWMS) {
+      const params = (source as TileWMS | ImageWMS).getParams();
+      let cqlFilter: string;
+      for (const property in params) {
+        if (property.toLowerCase() === "cql_filter") {
+          cqlFilter = params[property];
+        }
+      }
+
+      if (cqlFilter) {
+        if (userEditableOnly) {
+          return layer.defaultFilterEditable;
+        } else {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   /**
    * Gets all Legend URLs for layers that are legendable, and a list of layer names that are not legendable
    * @param additionalLegendOptions Optional string of additoinal options to add to the LEGEND_OPTIONS parameter of the GetLegendGraphic request

GIFrameworkMaps.Web/Scripts/Metadata/MetadataViewer.ts

@@ -9,6 +9,7 @@ import { Layer as olLayer } from "ol/layer";
 import { ImageWMS, TileWMS } from "ol/source";
 import { Metadata } from "./Metadata";
 import { Helper, Mapping as MappingUtil } from "../Util";
+import { GIFWMap } from "../Map";
 
 export class MetadataViewer {
   static async getCSWMetadataForLayer(
@@ -372,8 +373,7 @@ export class MetadataViewer {
   static async showMetadataModal(
     layerConfig: Layer,
     olLayer: olLayer,
-    isFiltered: boolean = false,
-    proxyEndpoint: string = "",
+    gifwMapInstance: GIFWMap
   ) {
     const metaModal = new Modal(document.getElementById("meta-modal"), {});
     const metaModalContent = document.querySelector("#meta-modal .modal-body");
@@ -391,7 +391,11 @@ export class MetadataViewer {
 
       metaModalContent.innerHTML = descriptionHTML;
       metaModal.show();
-
+      let proxyEndpoint = ""
+      if (layerConfig.proxyMetaRequests) {
+        proxyEndpoint = `${document.location.protocol}//${gifwMapInstance.config.appRoot}proxy`;
+      }
+      const isFiltered = gifwMapInstance.getLayerFilteredStatus(layerConfig, olLayer, false);
       const metadata = await MetadataViewer.getCSWMetadataForLayer(
         layerConfig,
         olLayer,

GIFrameworkMaps.Web/Scripts/Panels/BasemapsPanel.ts

@@ -183,17 +183,12 @@ export class BasemapsPanel implements SidebarPanel {
       const layerConfig = (layerGroup.layers as Layer[]).filter(
         (l) => l.id == eTarget.dataset.gifwAboutBasemap,
       );
-      let proxyEndpoint = "";
-      if (layerConfig[0].proxyMetaRequests) {
-        proxyEndpoint = `${document.location.protocol}//${this.gifwMapInstance.config.appRoot}proxy`;
-      }
       if (layerConfig && layerConfig.length === 1) {
         const olLayer = this.gifwMapInstance.getActiveBasemap();
         MetadataViewer.showMetadataModal(
           layerConfig[0],
           olLayer,
-          undefined,
-          proxyEndpoint,
+          this.gifwMapInstance,
         );
       }
       e.preventDefault();

GIFrameworkMaps.Web/Scripts/Panels/LayerList.ts

@@ -190,20 +190,10 @@ export class LayerList {
           (l) => l.id == eTarget.dataset.gifwAboutLayer,
         );
         if (layerConfig && layerConfig.length === 1) {
-          const isFiltered = this.layersPanelInstance.getLayerFilteredStatus(
-            layer,
-            olLayer as olLayer,
-            false,
-          );
-          let proxyEndpoint = "";
-          if (layerConfig[0].proxyMetaRequests) {
-            proxyEndpoint = `${document.location.protocol}//${this.gifwMapInstance.config.appRoot}proxy`;
-          }
           MetadataViewer.showMetadataModal(
             layerConfig[0],
             olLayer as olLayer,
-            isFiltered,
-            proxyEndpoint,
+            this.gifwMapInstance
           );
         }
         e.preventDefault();
@@ -221,7 +211,7 @@ export class LayerList {
       //Determine if the layer has a user editable filter applied,
       //and display the button as filled if so
       const icon = `bi-funnel${
-        this.layersPanelInstance.getLayerFilteredStatus(
+        this.gifwMapInstance.getLayerFilteredStatus(
           layer,
           olLayer as olLayer,
         )

GIFrameworkMaps.Web/Scripts/Panels/LayersPanel.ts

@@ -859,8 +859,7 @@ export class LayersPanel implements SidebarPanel {
     if (layerCheckboxLabelContainer) {
       layerCheckboxLabelContainer.setAttribute(
         "title",
-        `This layer is out of range. Zoom ${
-          newZoom > layer.getMaxZoom() ? "out" : "in"
+        `This layer is out of range. Zoom ${newZoom > layer.getMaxZoom() ? "out" : "in"
         } to view.`,
       );
 
@@ -1316,15 +1315,13 @@ export class LayersPanel implements SidebarPanel {
     isActive: boolean = false,
   ): HTMLElement {
     const styleLinkContainer = document.createElement("a");
-    styleLinkContainer.className = `list-group-item list-group-item-action ${
-      isActive ? "active" : ""
-    }`;
+    styleLinkContainer.className = `list-group-item list-group-item-action ${isActive ? "active" : ""
+      }`;
     styleLinkContainer.href = "#";
     styleLinkContainer.dataset.gifwLayerStyleName = style.name;
     styleLinkContainer.innerHTML = `<h5 class="mb-2">${style.title}</h5>`;
-    styleLinkContainer.innerHTML += `<p class="mb-1">${
-      style.abstract ? style.abstract : "No description provided"
-    }</p>`;
+    styleLinkContainer.innerHTML += `<p class="mb-1">${style.abstract ? style.abstract : "No description provided"
+      }</p>`;
 
     styleLinkContainer.addEventListener("click", (e) => {
       const selectedStyleName = (e.currentTarget as HTMLElement).dataset
@@ -1382,9 +1379,8 @@ export class LayersPanel implements SidebarPanel {
       LayerGroupType.Overlay,
     ]);
     if (olLayer && layer) {
-      const icon = `bi-funnel${
-        this.getLayerFilteredStatus(layer, olLayer as olLayer) ? "-fill" : ""
-      }`;
+      const icon = `bi-funnel${this.gifwMapInstance.getLayerFilteredStatus(layer, olLayer as olLayer) ? "-fill" : ""
+        }`;
       if (layersListFilterButton) {
         layersListFilterButton.querySelector(".bi").className = `bi ${icon}`;
       }
@@ -1397,41 +1393,4 @@ export class LayersPanel implements SidebarPanel {
   private updateSortOrderPreference() {
     UserSettings.setItem("LayerControlSortOrderPreference", this.listSortOrder);
   }
-
-  /**
-   * Returns a boolean indicating if the layer has a user editable filter applied to it
-   * A 'user editable' filter is one they have either applied themselves, or a default one
-   * (applied by admins) that the user is allowed to modify
-   * @param layer The layer configuration information
-   * @param olLayer The OpenLayers layer
-   * @return Boolean indicating if it does have a user editable filter applied
-   */
-  public getLayerFilteredStatus(
-    layer: Layer,
-    olLayer: olLayer,
-    userEditableOnly: boolean = true,
-  ): boolean {
-    if (olLayer.get("gifw-filter-applied")) {
-      return true;
-    }
-    const source = olLayer.getSource();
-    if (source instanceof TileWMS || source instanceof ImageWMS) {
-      const params = (source as TileWMS | ImageWMS).getParams();
-      let cqlFilter: string;
-      for (const property in params) {
-        if (property.toLowerCase() === "cql_filter") {
-          cqlFilter = params[property];
-        }
-      }
-
-      if (cqlFilter) {
-        if (userEditableOnly) {
-          return layer.defaultFilterEditable;
-        } else {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-}
+}