Allow alternativeEngines links to be defined

Author: rubensworks

index.html

@@ -114,20 +114,27 @@ <h1><a href="#">Query the Web of Linked Data</a></h1>
           <pre class="log"></pre>
         </li>
       </ul>
+
+      <p class="alternative-engines">
+        <label>Or try an alternative Comunica engine</label>
+        <select class="alternative-engines-select">
+          <option value="">Loading alternative engines...</option>
+        </select>
+      </p>
     </fieldset>
 
     <p>
-      Discover how <a href="http://linkeddatafragments.org" target="_blank">Linked Data Fragments</a>
-      enable Web-scale querying of Linked Data.
+      Discover how <a href="https://comunica.dev/" target="_blank">Comunica</a>
+      enables Web-scale querying of Knowledge Graphs.
     </p>
   </main>
 
   <footer>
     <p>
       ©2013–now
       <a href="http://www.ugent.be/" target="_blank">Ghent University</a> –
-      <a href="http://www.imec.be/" target="_blank">imec</a>, Belgium.
-      <a href="https://github.com/comunica/jQuery-Widget.js">Source code</a>.
+      <a href="http://www.imec.be/" target="_blank">imec</a>, Belgium.<br />
+      Source code of <a href="https://github.com/comunica/comunica">Comunica</a> and this <a href="https://github.com/comunica/jQuery-Widget.js">Web client</a>.
       <p id="comunica-version"></p>
     </p>
   </footer>

settings.json

@@ -111,5 +111,13 @@
     "bow":         "https://betweenourworlds.org/ontology/",
     "lc":          "http://semweb.mmlab.be/ns/linkedconnections#"
   },
+  "alternativeEngines": {
+    "Default": "https://query.comunica.dev/",
+    "Link Traversal Solid (default)": "https://comunica.github.io/comunica-feature-link-traversal-web-clients/builds/solid-default/",
+    "Link Traversal Solid (single pod)": "https://comunica.github.io/comunica-feature-link-traversal-web-clients/builds/solid-single-pod/",
+    "Link Traversal (default)": "https://comunica.github.io/comunica-feature-link-traversal-web-clients/builds/default/",
+    "Link Traversal (follow all)": "https://comunica.github.io/comunica-feature-link-traversal-web-clients/builds/follow-all/",
+    "Link Traversal (TREE)": "https://comunica.github.io/comunica-feature-link-traversal-web-clients/builds/tree/"
+  },
   "queries": "(Will be generated from the 'queries' folder by running the './queries-to-json' script.)"
 }

src/ldf-client-ui.js

@@ -87,6 +87,7 @@ if (typeof global.process === 'undefined')
       datasources: [],
       queries: [],
       prefixes: [],
+      alternativeEngines: {},
     },
 
     // Initializes the widget
@@ -115,7 +116,9 @@ if (typeof global.process === 'undefined')
           $executeOnLoad = this.$executeOnLoad = $('.executeOnLoad', $element),
           $solidIdp = this.$solidIdp = $('.solid-auth .idp', $element),
           $showDetails = this.$showDetails = $('.details-toggle', $element),
-          $proxyDefault = $('.proxy-default', $element);
+          $proxyDefault = $('.proxy-default', $element),
+          $alternativeEngines = this.$alternativeEngines = $('.alternative-engines-select', $element);
+      this.$alternativeEnginesWrapper = $('.alternative-engines', $element);
       this.$details = $('.details', $element);
 
       // Replace non-existing elements by an empty text box
@@ -268,6 +271,12 @@ if (typeof global.process === 'undefined')
         return false;
       });
 
+      // Handle alternative engine clicks
+      $alternativeEngines.on('change', function () {
+        document.location.href = $alternativeEngines.val();
+        return false;
+      });
+
       // Apply all options
       for (var key in options)
         this._setOption(key, options[key], true);
@@ -606,6 +615,18 @@ if (typeof global.process === 'undefined')
       case 'allowNoSources':
         this.$allowNoSources = value;
         break;
+      // Initialize alternative engines
+      case 'alternativeEngines':
+        this.$alternativeEngines.find('option').remove().end();
+        for ([key, value] of Object.entries(value)) {
+          const option = $('<option />').text(key).val(value);
+          if (document.location.href.startsWith(value))
+            option.attr('selected', 'selected');
+          this.$alternativeEngines.append(option);
+        }
+        if (Object.keys(value).length > 1)
+          this.$alternativeEnginesWrapper.show();
+        break;
       // Load settings from a JSON resource
       case 'settings':
         $.getJSON(value, function (settings) {

styles/ldf-client.css

@@ -730,3 +730,14 @@ li.search-choice-focus .search-choice-close {
 .extra-information.highlighted {
   background-color: grey;
 }
+
+.alternative-engines {
+  display: none;
+  label {
+    display: inline-block;
+    width: 312px;
+  }
+  select {
+    width: 330px;
+  }
+}