geoblacklight 4.4.1 → 5.0.0.pre.alpha.11

data/app/helpers/geoblacklight_helper.rb

@@ -1,70 +1,14 @@
 # frozen_string_literal: true
 
 module GeoblacklightHelper
-  def document_available?
-    @document.public? || (@document.same_institution? && user_signed_in?)
-  end
-
-  def document_downloadable?
-    document_available? && @document.downloadable?
+  def document_available?(document = @document)
+    document.public? || (document.same_institution? && user_signed_in?)
   end
 
   def iiif_jpg_url
     @document.references.iiif.endpoint.sub! "info.json", "full/full/0/default.jpg"
   end
 
-  def download_link_file(label, id, url)
-    link_to(
-      label,
-      url,
-      "contentUrl" => url,
-      :data => {
-        download: "trigger",
-        download_type: "direct",
-        download_id: id
-      }
-    )
-  end
-
-  def download_link_hgl(text, document)
-    link_to(
-      text,
-      download_hgl_path(id: document),
-      data: {
-        blacklight_modal: "trigger",
-        download: "trigger",
-        download_type: "harvard-hgl",
-        download_id: document.id
-      }
-    )
-  end
-
-  # Generates the link markup for the IIIF JPEG download
-  # @return [String]
-  def download_link_iiif
-    link_to(
-      download_text("JPG"),
-      iiif_jpg_url,
-      "contentUrl" => iiif_jpg_url,
-      :data => {
-        download: "trigger"
-      }
-    )
-  end
-
-  def download_link_generated(download_type, document)
-    link_to(
-      t("geoblacklight.download.export_link", download_format: export_format_label(download_type)),
-      "",
-      data: {
-        download_path: download_path(document.id, type: download_type),
-        download: "trigger",
-        download_type: download_type,
-        download_id: document.id
-      }
-    )
-  end
-
   ##
   # Blacklight catalog controller helper method to truncate field value to 150 chars
   # @param [SolrDocument] args
@@ -76,29 +20,16 @@ module GeoblacklightHelper
   ##
   # Returns an SVG icon or empty HTML span element
   # @return [SVG or HTML tag]
-  # standard:disable Style/ArgumentsForwarding
-  # TODO: Remove linter disable after lowest supported Ruby version >= 3.2
   def geoblacklight_icon(name, **args)
     icon_name = name ? name.to_s.parameterize : "none"
+    icon_name = Settings.ICON_MAPPING && Settings.ICON_MAPPING[icon_name] || icon_name
+    camel_icon = icon_name.tr("-", "_").camelize.delete(" ")
     begin
-      blacklight_icon(icon_name, **args)
-    rescue Blacklight::Exceptions::IconNotFound
+      render "Blacklight::Icons::#{camel_icon}Component".constantize.new(name: icon_name, **args)
+    rescue NameError
       tag.span class: "icon-missing geoblacklight-none"
     end
   end
-  # standard:enable Style/ArgumentsForwarding
-
-  ##
-  # Looks up properly formatted names for formats
-  #
-  def proper_case_format(format)
-    t("geoblacklight.formats.#{format.to_s.parameterize(separator: "_")}")
-  end
-
-  # Format labels are customized for exports - look up the appropriate key.
-  def export_format_label(format)
-    t("geoblacklight.download.export_#{format.to_s.parameterize(separator: "_")}_link")
-  end
 
   ##
   # Looks up formatted names for references
@@ -108,52 +39,6 @@ module GeoblacklightHelper
     t "geoblacklight.references.#{reference}"
   end
 
-  ##
-  # Wraps download text with proper_case_format
-  #
-  def download_text(format)
-    download_format = proper_case_format(format)
-    value = t("geoblacklight.download.download_link", download_format: download_format)
-    value.html_safe
-  end
-
-  ##
-  # Deteremines if a feature should include help text popover
-  # @return [Boolean]
-  def show_help_text?(feature, key)
-    Settings&.HELP_TEXT&.send(feature)&.include?(key)
-  end
-
-  ##
-  # Render help text popover for a given feature and translation key
-  # @return [HTML tag]
-  def render_help_text_entry(feature, key)
-    if I18n.exists?("geoblacklight.help_text.#{feature}.#{key}", locale)
-      help_text = I18n.t("geoblacklight.help_text.#{feature}.#{key}")
-      tag.h3 class: "help-text viewer_protocol h6" do
-        tag.a data: {toggle: "popover", title: help_text[:title], content: help_text[:content]} do
-          help_text[:title]
-        end
-      end
-    else
-      tag.span class: "help-text translation-missing"
-    end
-  end
-
-  ##
-  # Determines if item view should render the sidebar static map
-  # @return [Boolean]
-  def render_sidebar_map?(document)
-    Settings.SIDEBAR_STATIC_MAP&.any? { |vp| document.viewer_protocol == vp }
-  end
-
-  ##
-  # Deteremines if item view should include attribute table
-  # @return [Boolean]
-  def show_attribute_table?
-    document_available? && @document.inspectable?
-  end
-
   ##
   # Render value for a document's field as a truncate abstract
   # div. Arguments come from Blacklight::DocumentPresenter's
@@ -172,19 +57,6 @@ module GeoblacklightHelper
     blacklight_config.basemap_provider || "positron"
   end
 
-  ##
-  # Renders the partials for a Geoblacklight::Reference in the web services
-  # modal
-  # @param [Geoblacklight::Reference]
-  def render_web_services(reference)
-    render(
-      partial: "web_services_#{reference.type}",
-      locals: {reference: reference}
-    )
-  rescue ActionView::MissingTemplate
-    render partial: "web_services_default", locals: {reference: reference}
-  end
-
   ##
   # Returns a hash of the leaflet plugin settings to pass to the viewer.
   # @return[Hash]
@@ -229,14 +101,12 @@ module GeoblacklightHelper
 
   ## Returns the icon used based off a Settings strategy
   def relations_icon(document, icon)
-    icon_name = document[Settings.FIELDS.GEOM_TYPE] if Settings.USE_GEOM_FOR_RELATIONS_ICON
-    icon_name = icon if icon_name.blank?
-    icon_options = {}
-    icon_options = {classes: "svg_tooltip"} if Settings.USE_GEOM_FOR_RELATIONS_ICON
-    geoblacklight_icon(icon_name, **icon_options)
+    icon_html = render Geoblacklight::HeaderIconsComponent.new(document: document, fields: [Settings.FIELDS.GEOM_TYPE]) if Settings.USE_GEOM_FOR_RELATIONS_ICON
+    return icon_html unless !Settings.USE_GEOM_FOR_RELATIONS_ICON || icon_html.include?("icon-missing")
+    geoblacklight_icon(icon, **{})
   end
 
-  ## Returns the data-map attribute value used as the JS map selector
+  ## Returns the data-page attribute value used as the JS map selector
   def results_js_map_selector(controller_name)
     case controller_name
     when "bookmarks"
@@ -245,58 +115,4 @@ module GeoblacklightHelper
       "index"
     end
   end
-
-  def viewer_container
-    if openlayers_container?
-      ol_viewer
-    elsif iiif_manifest_container?
-      iiif_manifest_viewer
-    else
-      leaflet_viewer
-    end
-  end
-
-  def openlayers_container?
-    return false unless @document
-    @document.item_viewer.pmtiles || @document.item_viewer.cog
-  end
-
-  def leaflet_viewer
-    tag.div(nil,
-      id: "map",
-      data: {
-        :map => "item", :protocol => @document.viewer_protocol.camelize,
-        :url => @document.viewer_endpoint,
-        "layer-id" => @document.wxs_identifier,
-        "map-geom" => @document.geometry.geojson,
-        "catalog-path" => search_catalog_path,
-        :available => document_available?,
-        :basemap => geoblacklight_basemap,
-        :leaflet_options => leaflet_options
-      })
-  end
-
-  def ol_viewer
-    tag.div(nil,
-      id: "ol-map",
-      data: {
-        :map => "item", :protocol => @document.viewer_protocol.camelize,
-        :url => @document.viewer_endpoint,
-        "layer-id" => @document.wxs_identifier,
-        "map-geom" => @document.geometry.geojson,
-        "catalog-path" => search_catalog_path,
-        :available => document_available?,
-        :basemap => geoblacklight_basemap,
-        :leaflet_options => leaflet_options
-      })
-  end
-
-  def iiif_manifest_container?
-    return false unless @document
-    @document&.item_viewer&.viewer_preference&.key?(:iiif_manifest)
-  end
-
-  def iiif_manifest_viewer
-    tag.div(nil, id: "clover-viewer", iiif_content: @document.viewer_endpoint)
-  end
 end

data/app/javascript/geoblacklight/controllers/clipboard_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ["alert"];
+
+    async copyToClipboard(event) {  
+        let text = event.params.value;
+        await navigator.clipboard.writeText(text)
+        this.alertTarget.classList.remove('d-none');
+    }
+}

data/app/javascript/geoblacklight/controllers/clover_viewer_controller.js

@@ -0,0 +1,47 @@
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import Viewer from "@samvera/clover-iiif/viewer";
+import Image from "@samvera/clover-iiif/image";
+import { Controller } from "@hotwired/stimulus";
+
+const viewerOptions = {
+  showTitle: false,
+  showIIIFBadge: false,
+  informationPanel: {
+    renderToggle: false,
+    renderAbout: false,
+  },
+};
+
+export default class CloverViewerController extends Controller {
+  static values = {
+    url: String,
+    protocol: String,
+  };
+
+  connect() {
+    const root = createRoot(this.element);
+    root.render(this.getViewer(this.protocolValue, this.urlValue));
+  }
+
+  getViewer(protocol, url) {
+    if (protocol == "Iiif") {
+      // Create a wrapper div with inline style, as recommended in the docs:
+      // https://samvera-labs.github.io/clover-iiif/docs/image#react
+      return createElement(
+        "div",
+        { style: { height: 400 } },
+        createElement(Image, {
+          src: url.replace(/\/info\.json$/, ""),
+          isTiledImage: true,
+        })
+      );
+    }
+    if (protocol == "IiifManifest")
+      return createElement(Viewer, {
+        iiifContent: url,
+        options: viewerOptions,
+      });
+    console.error(`Unsupported protocol name: "${protocol}"`);
+  }
+}

data/app/javascript/geoblacklight/controllers/downloads_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  download(ev) {
+    ev.preventDefault();
+    if (this.downloading) {
+      return;
+    }
+    this.downloading = true;
+    ev.target.classList.add('download-in-progress');
+    const url = ev.target.dataset.downloadPath;
+    ev.target.removeAttribute('href');
+    ev.target.innerHTML = '<div class="spinner-border spinner-border-sm float-end"></div> Preparing download...';
+
+    fetch(url)
+      .then((response) => {
+        if (!response.ok) {
+          return response.json().then((errorData) => {
+            const exception = new Error("Network response was not ok");
+            exception.data = errorData; // Attach the parsed JSON data to the error object
+            throw exception;
+          });
+        }
+        return response.json();
+      })
+      .then((data) => this.complete(data, ev.target))
+      .catch((error) => this.error(error, ev.target));
+  }
+
+  complete(data, target) {
+    this.downloading = false;
+    target.classList.remove('download-in-progress');
+    target.classList.add('download-complete');
+    target.innerHTML = `Download ready (${target.dataset.downloadType})`;
+    target.href = data[1];
+    this.renderMessage(data[0]);
+    //target.click();
+  }
+
+  error(exception, target) {
+    this.downloading = false;
+    target.classList.remove('download-in-progress');
+    target.classList.add('download-complete');
+    target.innerHTML = `Download failed (${target.dataset.downloadType})`;
+    this.renderMessage(exception.data[0]);
+  }
+
+  renderMessage(message) {
+    Object.entries(message).forEach(([idx, msg]) => {
+      const flash = document.createElement("div");
+      flash.className = `alert alert-${msg[0]}`;
+      flash.innerHTML = `<button type="button" class="close" data-bs-dismiss="alert" aria-hidden="true">&times;</button>${msg[1]}`;
+      document.querySelector("div.flash_messages").appendChild(flash);
+    });
+  }
+}

data/app/javascript/geoblacklight/controllers/leaflet_viewer_controller.js

@@ -0,0 +1,217 @@
+import { Icon, Control } from "leaflet";
+import "leaflet-fullscreen";
+import { layerGroup, polygon, map, tileLayer } from "leaflet";
+import { imageMapLayer } from "esri-leaflet";
+import { Controller } from "@hotwired/stimulus";
+import basemaps from "geoblacklight/leaflet/basemaps";
+import LayerOpacityControl from "geoblacklight/leaflet/controls/layer_opacity";
+import GeoSearchControl from "geoblacklight/leaflet/controls/geosearch";
+import { wmsInspection,
+  tiledMapLayerInspection,
+  featureLayerInspection,
+  dynamicMapLayerInspection
+} from "geoblacklight/leaflet/inspection";
+import {
+  esriDynamicMapLayer,
+  esriFeatureLayer,
+  esriTiledMapLayer,
+  tileJsonLayer,
+  wmsLayer,
+  wmtsLayer,
+  indexMapLayer,
+} from "geoblacklight/leaflet/layers";
+import { geoJSONToBounds } from "geoblacklight/leaflet/utils";
+import { DEFAULT_BOUNDS, DEFAULT_OPACITY, DEFAULT_GEOM_OVERLAY_OPTIONS } from "geoblacklight/leaflet/constants";
+
+export default class LeafletViewerController extends Controller {
+  static values = {
+    url: String,
+    catalogBaseUrl: String,
+    protocol: String,
+    available: Boolean,
+    options: Object,
+    basemap: String,
+    mapGeom: Object,
+    page: String,
+    layerId: String,
+    drawInitialBounds: Boolean,
+  };
+
+  connect() {
+    // Sets leaflet icon paths to ex. /assets/marker-icon-2x-rails-fingerprint
+    // TODO: figure out why vite @leaftlet_images alias is not working.
+    Icon.Default.imagePath = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/";
+
+    // Set up layers
+    this.basemap = this.getBasemap();
+    this.overlay = layerGroup();
+
+    // Calculate bounds
+    this.bounds = DEFAULT_BOUNDS;
+    if (this.hasMapGeomValue) this.bounds = geoJSONToBounds(this.mapGeomValue);
+
+    // Load the map
+    this.loadMap();
+  }
+
+  get config() {
+
+    if (!this.optionsValue.VIEWERS || !this.hasProtocolValue) return {};
+    return this.optionsValue.VIEWERS[this.protocolValue.toUpperCase()];
+  }
+
+  // Create the map, add layers, fit the bounds
+  async loadMap() {
+    if (this.map) return;
+
+    // Set up the map and fit to bounds
+    this.map = map(this.element);
+    this.map.addLayer(this.basemap);
+    this.map.addLayer(this.overlay);
+    this.fitBounds(this.bounds);
+    this.map.options.selected_color = this.optionsValue.SELECTED_COLOR || 'blue';
+
+    // If the data is available, add the preview and set up inspection
+    // Otherwise just draw the bounds, if configured to do so
+    if (this.availableValue && this.protocolValue) {
+      await this.addPreviewOverlay();
+      this.addInspection();
+    } else if (this.drawInitialBoundsValue && this.bounds) {
+      this.addBoundsOverlay(this.bounds);
+    }
+
+    // Add configured controls
+    this.addControls();
+
+    if (this.protocolValue == "IndexMap"){
+      this.fitBounds(this.previewOverlay.getBounds())
+    }
+
+    // Enable geosearch handler, if available
+    if (this.map.geosearch) this.map.geosearch.enable();
+
+    // Emit an event for other controllers to listen to
+    this.dispatch("loaded");
+  }
+
+  // Set the bounds of the map to an L.LatLngBounds object
+  fitBounds(bounds) {
+    // prevent map from moving when setting bounds, if relevant
+    if (this.map.geosearch) this.map.geosearch.disable();
+    this.map.fitBounds(bounds, { animate: false, noMoveStart: true });
+    this.bounds = bounds;
+    if (this.map.geosearch) this.map.geosearch.enable();
+    this.element.dataset.bounds = this.bounds.toBBoxString();
+  }
+
+  // Select the configured basemap to use
+  getBasemap() {
+    const basemapName = this.basemapValue || "positron";
+    return tileLayer(basemaps[basemapName].url, {
+      ...basemaps[basemapName],
+      detectRetina: this.optionsValue.LAYERS.DETECT_RETINA || false,
+    });
+  }
+
+  // Add the configured controls to the map
+  addControls() {
+    // Add any top-level controls (e.g. geosearch) first
+    const globalControls = this.optionsValue.CONTROLS || {};
+    Object.entries(globalControls).forEach(([controlName, controlOptions]) => {
+      const control = this.getControl(controlName, controlOptions);
+      if (control) this.addControl(control);
+    });
+
+    // Add opacity and fullscreen controls for all layers
+    if (this.hasProtocolValue) {
+      if (this.availableValue){
+        const opacityControl = this.getControl("Opacity");
+        this.addControl(opacityControl);
+      }
+      const fullscreenControl = this.getControl("Fullscreen");
+      this.addControl(fullscreenControl);
+    }
+  }
+
+  // Add a pre-configured L.Control instance to the map
+  addControl(control) {
+    this.map.addControl(control);
+  }
+
+  // Look up the control name and return the corresponding L.Control instance
+  getControl(controlName, controlOptions) {
+    if (controlName == "Opacity")
+      return new LayerOpacityControl(this.previewOverlay);
+    if (controlName == "Fullscreen")
+      return new Control.Fullscreen({ position: "topright", ...controlOptions });
+    if (controlName == "Geosearch")
+      return new GeoSearchControl({ baseUrl: this.catalogBaseUrlValue, ...controlOptions });
+    console.error(`Unsupported control name: "${controlName}"`);
+  }
+
+  // Add the bounding box to the map
+  addBoundsOverlay(bounds) {
+    const hasMapGeomValue = Object.keys(this.mapGeomValue).length > 0 && !this.map.geosearch;
+    var defaultOptions = hasMapGeomValue ? DEFAULT_GEOM_OVERLAY_OPTIONS : {};
+    const overlayOptions = this.optionsValue.BOUNDSOVERLAY || {};
+    const options = {...defaultOptions, ...overlayOptions[this.pageValue]}
+    const boundsOverlay = polygon([
+      bounds.getSouthWest(),
+      bounds.getSouthEast(),
+      bounds.getNorthEast(),
+      bounds.getNorthWest(),
+    ], options
+    );
+    
+    // Render geometry layer if available
+    if (hasMapGeomValue) this.map.addLayer(L.geoJSON(this.mapGeomValue, overlayOptions[this.pageValue]));
+
+    // Render the bounds overlay
+    this.boundsOverlay = boundsOverlay;
+    this.overlay.addLayer(boundsOverlay);
+  }
+
+  // Remove the bounding box overlay
+  removeBoundsOverlay() {
+    if (this.boundsOverlay) this.overlay.removeLayer(this.boundsOverlay);
+  }
+
+  addInspection() {
+    if (this.protocolValue == "Wms") return wmsInspection(this.map, this.urlValue, this.layerIdValue, this.previewOverlay);
+    if (this.protocolValue == "FeatureLayer") return featureLayerInspection(this.map, this.previewOverlay);
+    if (this.protocolValue  == "DynamicMapLayer") return dynamicMapLayerInspection(this.map, this.previewOverlay, this.layerIdValue)
+    // TODO: TiledMapLayer is converted but seems busted -- see layers.js. Don't know what to test it with, need a fixture.
+    // if (this.protocolValue == "TiledMapLayer") return tiledMapLayerInspection(this.map, this.previewOverlay);
+  }
+
+  // Add the actual data to the map as a layer
+  async addPreviewOverlay() {
+    this.previewOverlay = await this.getPreviewOverlay(
+      this.protocolValue,
+      this.urlValue,
+      {
+        layerId: this.layerIdValue,
+        opacity: this.optionsValue.opacity || DEFAULT_OPACITY,
+        detectRetina: this.optionsValue.LAYERS.DETECT_RETINA || false,
+      }
+    );
+    if (this.previewOverlay) this.overlay.addLayer(this.previewOverlay);
+  }
+
+  // Generate a layer based on the protocol
+  async getPreviewOverlay(protocol, url, options) {
+    if (protocol == "DynamicMapLayer") return esriDynamicMapLayer(url, options);
+    if (protocol == "FeatureLayer") return esriFeatureLayer(url, options);
+    // imageMapLayer is a built-in method from esri-leaflet
+    if (protocol == "ImageMapLayer") return imageMapLayer({url, ...options});
+    if (protocol == "IndexMap") return await indexMapLayer(url, this.optionsValue);
+    if (protocol == "TiledMapLayer") return await esriTiledMapLayer(url, options);
+    if (protocol == "Tilejson") return await tileJsonLayer(url, options);
+    // tileLayer is a built-in method from leaflet
+    if (protocol == "Tms") return tileLayer(url, { tms: true, ...options });
+    if (protocol == "Wms") return wmsLayer(url, options);
+    if (protocol == "Wmts") return await wmtsLayer(url, options);
+    if (protocol == "Xyz") return tileLayer(url, options);
+    console.error(`Unsupported protocol name: "${protocol}"`);
+  }
+}

data/app/javascript/geoblacklight/controllers/oembed_viewer_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class OembedViewerController extends Controller {
+  static values = {
+    url: String,
+  };
+
+  connect() {
+    fetch(this.urlValue)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data) this.element.innerHTML = data.html;
+      })
+      .catch((error) => {
+        console.error("Error loading oEmbed data:", error);
+      });
+  }
+}

data/app/javascript/geoblacklight/controllers/openlayers_viewer_controller.js

@@ -0,0 +1,63 @@
+import { Map } from "ol";
+import TileLayer from "ol/layer/Tile";
+import XYZ from "ol/source/XYZ";
+import GeoJSON from "ol/format/GeoJSON";
+import { FullScreen, defaults as defaultControls } from "ol/control";
+import { pmTilesLayer, cogLayer } from "geoblacklight/openlayers/layers";
+import basemaps from "geoblacklight/openlayers/basemaps";
+import { Controller } from "@hotwired/stimulus";
+
+export default class OpenlayersViewerController extends Controller {
+  static values = {
+    url: String,
+    protocol: String,
+    basemap: String,
+    mapGeom: String,
+  };
+
+  async connect() {
+    // Set up layers
+    this.basemap = this.getBasemap();
+    this.overlay = this.getPreviewOverlay(this.protocolValue, this.urlValue);
+
+    await this.getBounds();
+    // Load the map
+    this.loadMap();
+  }
+
+  // Create the map, add layers, and fit the bounds
+  loadMap() {
+    this.map = new Map({
+      target: this.element,
+      controls: defaultControls().extend([new FullScreen()]),
+      layers: [this.basemap, this.overlay],
+    });
+    this.map.getView().fit(this.extent, this.map.getSize());
+  }
+
+  async getBounds() {
+    if (this.protocolValue == 'Cog') {
+      const view = await this.overlay.getSource().getView();
+      this.extent = view.extent;
+    } else {
+      this.extent = new GeoJSON()
+      .readFeatures(this.mapGeomValue)[0]
+      .getGeometry()
+      .getExtent();
+    }
+  }
+
+  // Select the configured basemap to use
+  getBasemap() {
+    const basemap = basemaps[this.basemapValue || "positron"];
+    const layer = new TileLayer({ source: new XYZ(basemap) });
+    return layer;
+  }
+
+  // Generate a layer based on the protocol
+  getPreviewOverlay(protocol, url) {
+    if (protocol === "Pmtiles") return pmTilesLayer(url);
+    if (protocol === "Cog") return cogLayer(url);
+    console.error(`Unsupported protocol name: "${protocol}"`);
+  }
+}