geoblacklight 4.4.2 → 5.0.0

data/app/javascript/geoblacklight/leaflet/layers.js

@@ -0,0 +1,153 @@
+/** This file contains methods for creating the various types of leaflet and esri-leaflet layers required in leaflet_viewer_controller.
+ * If complex logic is needed for a certain layer type, it is broken out into its own file,
+ * such as layer_wmts.js for WMTS layers and layer_index_map.js for index map layers, at the same directory level as this file.
+ */
+import { tileLayer, geoJson, circleMarker } from "leaflet";
+import { dynamicMapLayer, featureLayer, tiledMapLayer } from "esri-leaflet";
+import { parseWmtsCapabilities } from "geoblacklight/leaflet/layer_wmts";
+import { availabilityStyle, updateInformation } from "geoblacklight/leaflet/layer_index_map";
+import { getTileJsonBounds } from "geoblacklight/leaflet/utils";
+
+// Create a leaflet tile layer for WMS
+export const wmsLayer = (url, { layerId, opacity, detectRetina }) => {
+  return tileLayer.wms(url, {
+    layers: layerId,
+    format: "image/png",
+    transparent: true,
+    tiled: true,
+    CRS: "EPSG:3857",
+    opacity,
+    detectRetina,
+  });
+};
+
+// Fetch a WMTSCapabilities document and create a leaflet tileLayer using it
+export const wmtsLayer = async (url, { opacity, detectRetina, layerId }) => {
+  const response = await fetch(url);
+  if (!response.ok)
+    throw new Error("Unable to fetch WMTSCapabilities document", url);
+
+  const wmtsCapabilities = await response.text();
+  if (!wmtsCapabilities)
+    throw new Error("Unable to parse WMTSCapabilities document", url);
+
+  const tileInfo = parseWmtsCapabilities(wmtsCapabilities, layerId);
+  const options = tileInfo.bounds ? { bounds: tileInfo.bounds } : {};
+  return tileLayer(tileInfo.url, {
+    opacity,
+    detectRetina,
+    ...options,
+  });
+};
+
+// Create an ESRI-leaflet dynamic map layer
+export const esriDynamicMapLayer = (url, { opacity, detectRetina }) => {
+  // Remove any trailing slash and get the last segment from the URL
+  url = url.replace(/\/$/, "");
+  const pathArray = url.split("/");
+  const lastSegment = pathArray[pathArray.length - 1];
+
+  // If the last segment is an integer it's the layer ID
+  let layerId;
+  if (Number(lastSegment) === parseInt(lastSegment, 10)) {
+    layerId = lastSegment;
+    url = url.slice(0, -(lastSegment.length + 1));
+  }
+
+  const options = layerId ? { layers: [layerId] } : {};
+  return dynamicMapLayer({
+    url,
+    opacity,
+    detectRetina,
+    ...options,
+  });
+};
+
+// Create an ESRI-leaflet feature layer
+export const esriFeatureLayer = (url, { opacity, detectRetina }) => {
+  return featureLayer({
+    url,
+    opacity,
+    detectRetina,
+  });
+};
+
+// Create an ESRI tiled map layer
+export const esriTiledMapLayer = async (url, options) => {
+  const response = await fetch(url);
+
+  if (!response.ok)
+    throw new Error("Unable to fetch EsriTiledMapLayer document", url);
+
+  let layerInfo;
+  try {
+    layerInfo = await response.json();
+  } catch (error) {
+    throw new Error("Unable to parse TiledMapLayer document", response);
+  }
+
+  // For an example of tiledMapLayer data see nyu-test-soil-survey-map
+  // We aren't sure what the json structure looks like
+  // This is not rendering anything (and wasn't before we made changes) and the keys are not even present
+  // Check out this json: https://dnrmaps.wi.gov/arcgis2/rest/services/TS_AGOL_STAGING_SERVICES/EN_AGOL_STAGING_SurfaceWater_WTM/MapServer/2?f=pjson -- wrong protocol, now a feature map?? 
+  if (
+    layerInfo.singleFusedMapCache === true &&
+    layerInfo.spatialReference.wkid === 102100
+  ) {
+    return tiledMapLayer({ url, ...options });
+  }
+};
+
+// Create a leaflet tile layer 
+export const tileJsonLayer = async (url, options) => {
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error("Unable to fetch TiledJson document", url);
+  }
+
+  const layerInfo = await response.json();
+
+  const bounds = getTileJsonBounds(layerInfo);
+  if (bounds) options.bounds = bounds;
+  const tileUrl = layerInfo.tiles[0];
+  return tileLayer(tileUrl, options);
+};
+
+// Fetch an indexMapLayer document and create a leaflet geoJSON layer
+export const indexMapLayer = async (url, leafletOptions) => {
+  let prevLayer = null;
+
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error("Unable to fetch indexMapLayer document", url);
+  }
+
+  const data = await response.json();
+
+  // name the const geoJSONLayer; we access it self-referentially within the method
+  const geoJSONLayer = geoJson(data, {
+    style: (feature) =>
+      availabilityStyle(feature.properties.available, leafletOptions),
+    onEachFeature: (feature, layer) => {
+      if (feature.properties.label !== null) {
+        layer.bindTooltip(feature.properties.label);
+      }
+      if (feature.properties.available !== null) {
+        layer.on("click", (e) => {
+          layer.setStyle(leafletOptions.LAYERS.INDEX.SELECTED);
+          if (prevLayer !== null) {
+            leafletOptions.opacity = layer.options.fillOpacity;
+            geoJSONLayer.resetStyle(prevLayer);
+          }
+          prevLayer = layer;
+          updateInformation(feature.properties);
+        });
+      }
+    },
+    pointToLayer: (feature, latlng) => circleMarker(latlng),
+  });
+
+  return geoJSONLayer;
+};

data/app/javascript/geoblacklight/leaflet/utils.js

@@ -0,0 +1,83 @@
+import { latLngBounds, Util, geoJSON, latLng  } from "leaflet";
+
+export const bboxToBounds = (bbox) => {
+  bbox = bbox.split(" ");
+  if (bbox.length === 4) {
+    return latLngBounds([
+      [parseFloat(bbox[1]), parseFloat(bbox[0])],
+      [parseFloat(bbox[3]), parseFloat(bbox[2])],
+    ]);
+  } else {
+    throw new Error("Invalid bounding box string");
+  }
+};
+
+export const boundsToBbox = (bounds) => {
+  let sw = bounds.getSouthWest(),
+    ne = bounds.getNorthEast();
+
+  if (ne.lng - sw.lng >= 360) {
+    sw.lng = -180;
+    ne.lng = 180;
+  }
+  sw = sw.wrap();
+  ne = ne.wrap();
+  return [
+    Util.formatNum(sw.lng, 6),
+    Util.formatNum(sw.lat, 6),
+    Util.formatNum(ne.lng, 6),
+    Util.formatNum(ne.lat, 6),
+  ];
+};
+
+export const geoJSONToBounds = (geojson) => {
+  const layer = geoJSON(geojson);
+  return layer.getBounds();
+};
+
+export const debounce = (fn, delay) => {
+  let timeout = null;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+};
+
+export const getTileJsonBounds = (doc) => {
+  const bounds = doc.bounds;
+  if (bounds) {
+    const corner1 = latLng(bounds[1], bounds[0]),
+      corner2 = latLng(bounds[3], bounds[2]);
+    return latLngBounds(corner1, corner2);
+  }
+};
+
+export const appendLoadingMessage = () => {
+  const spinner = `<tbody class="attribute-table-body"><tr><td colspan="2">
+    <span id="attribute-table">
+    <div class="spinner-border" role="status"><span class="visually-hidden">Inspecting</span></div>
+    </span>
+    </td></tr></tbody>`;
+
+  document.querySelector(".attribute-table-body").innerHTML = spinner;
+};
+
+export const appendErrorMessage = () => {
+  document.querySelector(
+    ".attribute-table-body"
+  ).innerHTML = `<tbody class="attribute-table-body">
+    <tr><td colspan="2">Could not find that feature</td></tr></tbody>`;
+};
+
+// Looks for strings that could be URLs and wraps them in <a> tags
+export const linkify = (str) => {
+  if (!str) return '';
+  const urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;
+  return str.toString().replace(urlRegEx, '<a href=\'$1\'>$1</a>');
+}
+
+export const getLayerOpacity = (layer) => {
+  return layer.options.fillOpacity ? layer.options.fillOpacity : layer.options.opacity;
+}

data/app/javascript/geoblacklight/openlayers/basemaps.js

@@ -0,0 +1,47 @@
+export default {
+  darkMatter: {
+    url:'https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18
+  },
+  positron: {
+    url: 'https://{a-d}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18
+  },
+  positronLite: {
+    url: 'https://{a-d}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18
+  },
+  worldAntique: {
+    url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18
+  },
+  worldEco: {
+    url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-eco/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18
+  },
+  flatBlue: {
+    url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+    maxZoom: 18
+  },
+  midnightCommander: {
+    url: 'https://cartocdn_{a-d}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributionss">Carto</a>',
+      maxZoom: 18
+  },
+  openstreetmapHot: {
+    url: 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>', 
+    maxZoom: 19
+  },
+  openstreetmapStandard: {
+    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+    attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    maxZoom: 19
+  }
+}

data/app/javascript/geoblacklight/openlayers/layers.js

@@ -0,0 +1,44 @@
+import VectorTile from "ol/layer/VectorTile";
+import { Style, Stroke, Fill, Circle } from "ol/style";
+import { PMTilesVectorSource } from "ol-pmtiles";
+import { useGeographic } from "ol/proj";
+import GeoTIFF from "ol/source/GeoTIFF";
+import WebGLTileLayer from "ol/layer/WebGLTile";
+
+// Create a new PMTiles layer
+export const pmTilesLayer = (url) => {
+  useGeographic();
+  return new VectorTile({
+    declutter: true,
+    source: new PMTilesVectorSource({ url }),
+    style: new Style({
+      stroke: new Stroke({
+        color: "#7070B3",
+        width: 1,
+      }),
+      fill: new Fill({
+        color: "#FFFFFF",
+      }),
+      image: new Circle({
+        radius: 7,
+        fill: new Fill({
+          color: "#7070B3",
+        }),
+        stroke: new Stroke({
+          color: "#FFFFFF",
+          width: 2,
+        }),
+      }),
+    }),
+  });
+};
+
+// Create a new cloud-optimized GeoTIFF (COG) layer
+export const cogLayer = (url) => {
+  return new WebGLTileLayer({
+    source: new GeoTIFF({
+      sources: [{ url }],
+      convertToRGB: true,
+    }),
+  });
+};

data/app/models/concerns/geoblacklight/solr_document/citation.rb

@@ -7,23 +7,35 @@ module Geoblacklight
 
       def geoblacklight_citation(solr_document_url)
         [
-          fetch(Settings.FIELDS.CREATOR, nil),
+          creator,
           ("(#{issued})" if issued),
-          fetch(Settings.FIELDS.TITLE, nil),
+          title,
           ("[#{format}]" if format),
-          fetch(Settings.FIELDS.PUBLISHER, nil),
-          I18n.t("geoblacklight.citation.retrieved_from", document_url: solr_document_url)
+          publisher,
+          citation_link(solr_document_url)
         ].flatten.compact.join(". ")
       end
 
       private
 
-      def issued
-        fetch(Settings.FIELDS.DATE_ISSUED, nil)
+      # The actual citation link varies based on what is available in the document
+      # go through a list of potential links in order of preference, ending with the solr_document_url
+      def citation_link(solr_document_url)
+        identifier_url || reference_url || solr_document_url
       end
 
-      def format
-        fetch(Settings.FIELDS.FORMAT, nil)
+      # identifier url in solr document (if it exists)
+      def identifier_url
+        # find any identifier that look like a URL, return if found (could be DOI, Stanford PURL, etc)
+        identifiers.find { |identifier| identifier if identifier.starts_with?("https://") }
+      end
+
+      # Examine the list of references (in dct_references_s) to find a "schema.org/url"; return URL if found
+      #  References are retrieved from the SolrDocument as an array of Geoblacklight::Reference
+      #  where the "reference" attribute is an array of two elements, the first being the type and the second being the url
+      def reference_url
+        url = references.refs.find { |ref| ref.reference[0] == "http://schema.org/url" }
+        url.present? ? url.reference[1] : nil
       end
     end
   end

data/app/models/concerns/geoblacklight/solr_document.rb

@@ -4,9 +4,8 @@ module Geoblacklight
   # Extends Blacklight::Solr::Document for GeoBlacklight specific functionality
   module SolrDocument
     extend Blacklight::Solr::Document
-
+    extend ActiveSupport::Concern
     include Geoblacklight::SolrDocument::Finder
-    include Geoblacklight::SolrDocument::Carto
     include Geoblacklight::SolrDocument::Inspection
     include Geoblacklight::SolrDocument::Arcgis
     include Geoblacklight::SolrDocument::Citation
@@ -15,16 +14,33 @@ module Geoblacklight
     delegate :viewer_protocol, to: :item_viewer
     delegate :viewer_endpoint, to: :item_viewer
 
+    included do
+      attribute :display_note, :array, Settings.FIELDS.DISPLAY_NOTE
+      attribute :geom_field, :string, Settings.FIELDS.GEOMETRY
+      attribute :wxs_identifier, :string, Settings.FIELDS.WXS_IDENTIFIER
+      attribute :file_format, :string, Settings.FIELDS.FORMAT
+      attribute :rights_field_data, :string, Settings.FIELDS.ACCESS_RIGHTS
+      attribute :provider, :string, Settings.FIELDS.PROVIDER
+      attribute :resource_type, :array, Settings.FIELDS.RESOURCE_TYPE
+      attribute :resource_class, :array, Settings.FIELDS.RESOURCE_CLASS
+      attribute :title, :string, Settings.FIELDS.TITLE
+      attribute :creator, :array, Settings.FIELDS.CREATOR
+      attribute :publisher, :string, Settings.FIELDS.PUBLISHER
+      attribute :identifiers, :array, Settings.FIELDS.IDENTIFIER
+      attribute :issued, :string, Settings.FIELDS.DATE_ISSUED
+      attribute :format, :string, Settings.FIELDS.FORMAT
+    end
+
     def available?
       public? || same_institution?
     end
 
     def public?
-      rights_field_data.present? && rights_field_data.casecmp("public").zero?
+      rights_field_data&.casecmp?("public")
     end
 
     def restricted?
-      rights_field_data.blank? || rights_field_data.casecmp("restricted").zero?
+      !rights_field_data || rights_field_data.casecmp?("restricted")
     end
 
     def downloadable?
@@ -39,20 +55,12 @@ module Geoblacklight
       references.download.to_hash if references.download.present?
     end
 
-    def display_note
-      fetch(Settings.FIELDS.DISPLAY_NOTE, "")
-    end
-
-    def hgl_download
-      references.hgl.to_hash if references.hgl.present?
-    end
-
     def oembed
       references.oembed.endpoint if references.oembed.present?
     end
 
     def same_institution?
-      fetch(Settings.FIELDS.PROVIDER, "").casecmp(Settings.INSTITUTION.downcase).zero?
+      provider&.casecmp?(Settings.INSTITUTION.downcase)
     end
 
     def iiif_download
@@ -75,38 +83,22 @@ module Geoblacklight
       "http://schema.org/Dataset"
     end
 
-    def geom_field
-      fetch(Settings.FIELDS.GEOMETRY, "")
-    end
-
     def geometry
       @geometry ||= Geoblacklight::Geometry.new(geom_field)
     end
 
-    def wxs_identifier
-      fetch(Settings.FIELDS.WXS_IDENTIFIER, "")
-    end
-
-    def file_format
-      fetch(Settings.FIELDS.FORMAT)
-    end
-
     ##
     # Provides a convenience method to access a SolrDocument's References
     # endpoint url without having to check and see if it is available
     # :type => a string which if its a Geoblacklight::Constants::URI key
     #          will return a coresponding Geoblacklight::Reference
     def checked_endpoint(type)
-      type = references.send(type)
+      type = references.public_send(type)
       type.endpoint if type.present?
     end
 
     private
 
-    def rights_field_data
-      fetch(Settings.FIELDS.ACCESS_RIGHTS, "")
-    end
-
     def method_missing(method, *args, &block)
       if /.*_url$/.match?(method.to_s)
         checked_endpoint(method.to_s.gsub("_url", ""))

data/app/presenters/geoblacklight/bbox_item_presenter.rb

@@ -2,7 +2,7 @@
 
 module Geoblacklight
   class BboxItemPresenter < Blacklight::FacetItemPresenter
-    def label
+    def value
       super.to_param
     end
   end

data/app/views/catalog/_citation.html.erb

@@ -1,36 +1,19 @@
-<div data-controller="clipboard">
-  <div class="modal-header">
-    <h1><%= t('blacklight.tools.citation') %></h1>
-    <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="modal-body" data-clipboard-target="source">
-    <div class="alert alert-info d-none" role="alert">
+<%= render Blacklight::System::ModalComponent.new do |component| %>
+  <% component.with_title do %>
+    <%= t('blacklight.tools.citation') %>
+  <% end %>
+  <div data-controller="clipboard">
+    <div class="alert alert-info alert-dismissible d-none" data-clipboard-target="alert" role="alert">
       <%= t('geoblacklight.clipboard.citation') %>
-      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+    <% citation = render Geoblacklight::Document::CitationComponent.with_collection(@documents) if @documents %>
+    <div class="d-inline">
+      <%= citation %>
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-primary" data-action="clipboard#copyToClipboard" data-clipboard-value-param="<%= citation %>"><%= t('geoblacklight.modal.copy-citation') %></button>
+      <button type="button" class="btn btn-secondary" data-bl-dismiss="modal"><%= t('blacklight.modal.close') %></button>
     </div>
-
-      <%= t('blacklight.tools.citation_info') %>
-    <% @documents&.each do |document| %>
-      <%= document.geoblacklight_citation(solr_document_url(document)) %>
-    <% end %>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-primary" data-action="copyToClipboard"><%= t('blacklight.modal.copy-citation') %></button>
-    <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t('blacklight.modal.close') %></button>
   </div>
-</div>
-
-<script>
-    $('[data-action="copyToClipboard"]').on('click', function() {
-        let text = $('[data-clipboard-target="source"]').text().trim()
-        navigator.clipboard.writeText(text)
-            .then(() => {
-                $('.alert').removeClass('d-none');
-            })
-    });
-</script>
-
+<% end %>

data/app/views/catalog/_document_split.html.erb

@@ -1,6 +1,21 @@
 <div class='row'>
-  <div id="documents" class="documents-list col-md-6">
-    <%= render documents, :as => :document %>
+  <div
+    id="documents"
+    class="documents-list col-md-6"
+    data-controller="search-results"
+    data-action="leaflet-viewer:loaded@window->search-results#fitResultBounds"
+    data-search-results-leaflet-viewer-outlet=".leaflet-viewer"
+    >
+    <div id="documents-container">
+      <% document_presenters = documents.map { |doc| document_presenter(doc) } -%>
+      <% document_presenters.each_with_index do |presenter, index| %>
+        <%= render blacklight_config.index.document_component.new(document: presenter, document_counter: index) %>
+      <% end %>
+    </div>
   </div>
-  <%= content_tag :div, '', id: 'map', class: 'col-md-6', aria: { label: t('geoblacklight.map.label') }, data: { map: results_js_map_selector(controller.controller_name), 'catalog-path'=> search_catalog_path , 'map-bbox' => params[:bbox], basemap: geoblacklight_basemap, leaflet_options: leaflet_options } %>
+  <% if results_js_map_selector(controller.controller_name) == "index" %>
+    <%= render(Geoblacklight::LocationLeafletMapComponent.new(page: 'index', geosearch: { dynamic: true }, classes: 'col-md-6 sticky-top position-sticky leaflet-viewer')) %>
+  <% else %>
+    <%= render(Geoblacklight::LocationLeafletMapComponent.new(page: 'index', classes: 'col-md-6 leaflet-viewer')) %>
+  <% end %>
 </div>

data/app/views/catalog/_home_text.html.erb

@@ -15,10 +15,10 @@
     </div>
     <div class='col-sm'>
       <%= content_tag :h3, t('geoblacklight.home.map_heading') %>
-      <%= content_tag :div, '', id: 'map', aria: { label: t('geoblacklight.map.label') }, data: { map: 'home', 'catalog-path'=> search_catalog_path , 'map-geom' => Settings.HOMEPAGE_MAP_GEOM, basemap: geoblacklight_basemap, leaflet_options: leaflet_options } %>
+      <%= render(Geoblacklight::LocationLeafletMapComponent.new(page: 'home', geosearch: { dynamic: false })) %>
     </div>
   </div>
-  <div id="geoblacklight-version" class="text-right">
+  <div id="geoblacklight-version" class="text-end">
     <%= t('geoblacklight.home.version', version: Geoblacklight::VERSION ) %>
   </div>
 </div>

data/app/views/catalog/_metadata.html.erb

@@ -9,7 +9,7 @@
              href="#<%= metadata.type %>"
              aria-controls="<%= metadata.type %>"
              role="tab"
-             data-toggle="pill"
+             data-bs-toggle="pill"
              data-ref-endpoint="<%= metadata.endpoint %>"
              data-ref-download="#btn-metadata-download"><%= formatted_name_reference(metadata.type) %></a>
         </li>

data/app/views/catalog/index.html.erb

@@ -1,7 +1,5 @@
-<% content_for(:sidebar) do %>
-  <% if has_search_parameters? %>
-    <%= render 'search_sidebar' %>
-  <% end %>
+<% content_for(:head) do %>
+  <meta name="blacklight-search-storage" content="<%= blacklight_config.track_search_session.storage %>">
 <% end %>
 
 <% unless has_search_parameters? %>
@@ -9,5 +7,11 @@
   <%= render 'home' %>
   <%= render 'shared/sitelinks_search_box' %>
 <% else %>
+  <% content_for(:sidebar) do %>
+    <% conf = blacklight_config.view_config(document_index_view_type) %>
+    <%= render conf.sidebar_component.new(blacklight_config: blacklight_config,
+                                          response: @response,
+                                          view_config: conf) %>
+  <% end %>
   <%= render 'search_results' %>
 <% end %>

data/app/views/catalog/metadata/_markup.html.erb

@@ -1,7 +1,7 @@
 <div id="metadata-markup-container" class="container-fluid">
   <div class="alert alert-warning" role="alert">
     <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-    <span class="sr-only">Error:</span>
+    <span class="visually-hidden">Error:</span>
     <span><%= t('geoblacklight.metadata.metadata_error')%></span>
   </div>
   <%= CodeRay.scan(content, :xml).div.html_safe %>

data/app/views/catalog/metadata.html.erb

@@ -1,13 +1,14 @@
-<div class="modal-header">
-  <h3 class="modal-title"><%= t('geoblacklight.metadata.view_metadata')%></h3>
-  <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<div class="modal-body metadata-body">
-  <%= render partial: 'metadata' %>
-</div>
-<div class="modal-footer">
-  <button type="button" class="btn btn-default hide-without-js" data-dismiss="modal">Close</button>
-  <a href="#" target="_blank" rel="noopener noreferrer" id="btn-metadata-download" class="btn btn-primary">Download</a>
-</div>
+<%= render Blacklight::System::ModalComponent.new do |component| %>
+  <% component.with_title do %>
+    <%= t('geoblacklight.metadata.view_metadata') %>
+  <% end %>
+  <% component.with_body do %>
+    <div class="modal-body metadata-body">
+      <%= render partial: 'metadata' %>
+    </div>
+  <% end %>
+  <% component.with_footer do %>
+    <a href="#" target="_blank" rel="noopener noreferrer" id="btn-metadata-download" class="btn btn-primary">Download</a>
+    <button type="button" class="btn btn-secondary" data-bl-dismiss="modal"><%= t('blacklight.modal.close') %></button>
+  <% end %>
+<% end %>