Add semantic lookups for features

Author: avillar

pygeoapi/api/itemtypes.py

@@ -958,6 +958,8 @@ def get_collection_item(api: API, request: APIRequest,
 
     config_dataset = api.config['resources'][dataset]
     linked_data = config_dataset.get('linked-data')
+    if linked_data:
+        content['linked_data'] = linked_data
 
     if request.format == F_HTML:  # render
         tpl_config = api.get_dataset_templates(dataset)

pygeoapi/static/css/linked-data.css

@@ -0,0 +1,37 @@
+.object-property.resource-loading::before,
+.literal-value.resource-loading::before {
+    content: "";
+    display: inline-block;
+    margin-right: 0.35em;
+    width: 1em;
+    height: 1em;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    border-top-color: black;
+    border-radius: 50%;
+    vertical-align: middle;
+    animation: spin 0.8s linear infinite;
+}
+
+.object-property.resource-resolved::after,
+.literal-value.resource-resolved::after {
+    content: "✔";
+    color: green;
+    margin-left: 0.35em;
+    font-weight: bold;
+    vertical-align: middle;
+    font-family: "Arial", "Helvetica", sans-serif;
+}
+
+.object-property.resource-error::after,
+.literal-value.resource-error::after {
+    content: "✖";
+    color: red;
+    margin-left: 0.35em;
+    font-weight: bold;
+    vertical-align: middle;
+    font-family: "Arial", "Helvetica", sans-serif;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

pygeoapi/templates/collections/items/item.html

@@ -1,25 +1,33 @@
 {% extends "_base.html" %}
 {% set ptitle = data['properties'][data['title_field']] or data['id'] | string %}
+{% set linked_data = data.get('linked_data') %}
 {% block desc %}{{ data.get('properties',{}).get('description', {}) | string | truncate(250) }}{% endblock %}
 {% block tags %}{{ data['properties'].get('themes', [{}])[0].get('concepts', []) | join(',') }}{% endblock %}
 {# Optionally renders an img element, otherwise standard value or link rendering #}
-{% macro render_item_value(v, width) -%}
+{% macro render_item_value(v, width, additional_classes='') -%}
     {% set val = v | string | trim %}
     {% if val|length and val.lower().endswith(('.jpg', '.jpeg', '.png', '.gif', '.bmp')) %}
         {# Ends with image extension: render img element with link to image #}
+      <span class="literal-value">
         <a href="{{ val }}"><img src="{{ val }}" alt="{{ val.split('/') | last }}" width="{{ width }}"/></a>
+      </span>
     {% elif v is string or v is number %}
-        {{ val | urlize() }}
+      <span class="literal-value">{{ val | urlize() }}</span>
     {% elif v is mapping %}
-      {% for i,j in v.items() %}
-        <i>{{ i }}:</i> {{ render_item_value(j, 60) }}<br/>
-      {% endfor %}
+      <table class="table table-striped table-border object-table {{ additional_classes }}">
+        {% for i,j in v.items() %}
+          <tr>
+            <td class="object-property" data-property="{{ i }}">{{ i }}</td>
+            <td class="object-value">{{ render_item_value(j, 60) }}</td>
+          </tr>
+        {% endfor %}
+      </table>
     {% elif v is iterable %}
       {% for i in v %}
-        {{ render_item_value(i, 60) }}
+        {{ render_item_value(i, 60, 'array-entry') }}
       {% endfor %}
     {% else %}
-      {{ val | urlize() }}
+      <span class="literal-value">{{ val | urlize() }}</span>
     {% endif %}
 {%- endmacro %}
 {% block title %}{{ ptitle }}{% endblock %}
@@ -35,6 +43,7 @@
 {% endblock %}
 {% block extrahead %}
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
+    <link rel="stylesheet" href="{{ config['server']['url'] }}/static/css/linked-data.css">
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
 {% endblock %}
 
@@ -71,7 +80,7 @@ <h1>{{ ptitle }}</h1>
           </div>
         </div>
         <div class="col-md-6 col-sm-12">
-            <table class="table table-striped table-bordered">
+            <table class="table table-striped table-bordered object-table" id="item-properties-table">
               <thead>
               <tr>
                 <th>{% trans %}Property{% endtrans %}</th>
@@ -86,14 +95,14 @@ <h1>{{ ptitle }}</h1>
               </tr>
               {% endif %}
               <tr>
-                <td>id</td>
-                <td>{{ data.id }}</td>
+                <td class="object-property" data-property="id">id</td>
+                <td class="object-value">{{ data.id }}</td>
               </tr>
               {% for k, v in data['properties'].items() %}
                 {% if k != data['id_field'] %}
                 <tr>
-                  <td>{{ k | striptags }}</td>
-                  <td>{{ render_item_value(v, 80) }}</td>
+                  <td class="object-property" data-property="{{ k | striptags }}">{{ k | striptags }}</td>
+                  <td class="object-value">{{ render_item_value(v, 80) }}</td>
                 </tr>
                 {% endif %}
               {% endfor %}
@@ -135,4 +144,23 @@ <h1>{{ ptitle }}</h1>
     map.addLayer(items);
     map.fitBounds(items.getBounds(), {maxZoom: 15});
     </script>
+    {% if linked_data and linked_data.get('context') | length %}
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rdflib.min.js"></script>
+      <script src="https://github.com/avillar/jsonld-ui-utils/releases/latest/download/jsonld-ui-utils.min.js"></script>
+      <script>
+        const rootElem = document.getElementById('item-properties-table');
+        if (rootElem) {
+          const linkedDataConfig = {{ linked_data | tojson }}
+          const options = {};
+          if (linkedDataConfig.fallback_sparql_endpoint) {
+            options.fallbackSparqlEndpoint = linkedDataConfig.fallback_sparql_endpoint;
+          }
+          const context = { '@context': linkedDataConfig['context'] };
+          jsonldUIUtils.loadContext(context)
+            .then(loadedContext => {
+                jsonldUIUtils.augment(rootElem, loadedContext, options);
+            });
+        }
+      </script>
+    {% endif %}
 {% endblock %}