Add HTTP proxy input field to settings dropdown

rubensworks · Jul 29, 2019 · 93ece111d9d1f0ccaa3d41653d768c4853167b43 · 93ece11
1 parent 5d8c255
commit 93ece111d9d1f0ccaa3d41653d768c4853167b43
Unified Split

Showing with 39 additions and 17 deletions.

+0 −4 images/memento.svg

+4 −0 index.html

+17 −8 src/ldf-client-ui.js

+4 −0 src/ldf-client-url-state.js

+5 −0 src/ldf-client-worker.js

+8 −4 styles/ldf-client.css

+1 −1 webpack.config.js
diff --git a/images/memento.svg b/images/memento.svg
diff --git a/index.html b/index.html
@@ -29,6 +29,10 @@ <h1><a href="#">Query the Web of Linked Data</a></h1>
           <label>Pick a date</label>
           <input class="datetime" type="date">
         </li>
+        <li class="details">
+          <label>Set a HTTP proxy</label>
+          <input class="httpProxy" type="text">
+        </li>
 
         <li>
           <label>Type or pick a query</label>

diff --git a/src/ldf-client-ui.js b/src/ldf-client-ui.js
@@ -99,6 +99,7 @@ require('yasgui-yasqe/dist/yasqe.css'); // Make webpack import the css as well
           $resultsText = $('<div>', { class: 'text' }),
           $datasources = this.$datasources = $('.datasources', $element),
           $datetime = this.$datetime = $('.datetime', $element),
+          $httpProxy = this.$httpProxy = $('.httpProxy', $element),
           $details = this.$details = $('.details', $element),
           $showDetails = this.$showDetails = $('.details-toggle', $element);
 
@@ -210,6 +211,9 @@ require('yasgui-yasqe/dist/yasqe.css'); // Make webpack import the css as well
       // Update datetime on change
       $datetime.change(function () { self._setOption('datetime', $datetime.val()); });
 
+      // Update http proxy on change
+      $httpProxy.change(function () { self._setOption('httpProxy', $httpProxy.val()); });
+
       // Set up starting and stopping
       $start.click(this._startExecution.bind(this));
       $stop.click(this._stopExecution.bind(this));
@@ -384,6 +388,11 @@ require('yasgui-yasqe/dist/yasqe.css'); // Make webpack import the css as well
           this._showDetails();
         this.$datetime.val(value).change();
         break;
+      case 'httpProxy':
+        if (value)
+          this._showDetails();
+        this.$httpProxy.val(value).change();
+        break;
       // Set the list of selectable queries
       case 'relevantQueries':
         value = value || [];
@@ -536,11 +545,12 @@ require('yasgui-yasqe/dist/yasqe.css'); // Make webpack import the css as well
 
       // Let the worker execute the query
       var context = {
-        'sources': datasources.map(function (datasource) {
+        sources: datasources.map(function (datasource) {
           return { type: 'auto', value: datasource };
         }),
-        '@comunica/actor-http-memento:datetime': parseDate(this.options.datetime),
-        'queryFormat': this.options.queryFormat,
+        datetime: parseDate(this.options.datetime),
+        queryFormat: this.options.queryFormat,
+        httpProxy: this.options.httpProxy,
       };
       if (this.options.queryContext) {
         try {
@@ -735,13 +745,12 @@ require('yasgui-yasqe/dist/yasqe.css'); // Make webpack import the css as well
   // Escapes special HTML characters and convert URLs into links
   function escape(text) {
     return (text + '').split('\n').map(function (line) {
-      return line.replace(/( )|(<)|(>)|(&)|http(s?:\/\/[^\s<>]+)/g, escapeMatch);
+      return line.replace(/([\s"])(https?:\/\/[^\s<>"]+)/g, escapeMatchUrl);
     }).join('<br/>');
   }
-  function escapeMatch(match, space, lt, gt, amp, url) {
-    return space && '&nbsp;' || lt && '&lt;' || gt && '&gt;' || amp && '&amp;' ||
-           (url = 'http' + escape(url)) &&
-           '<a href="' + url + '" target=_blank>' + url + '</a>';
+  function escapeMatchUrl(match, preUrl, url) {
+    url = escape(url);
+    return preUrl + '<a href="' + url + '" target=_blank>' + url + '</a>';
   }
 
   // Escapes the string for usage as a regular expression

diff --git a/src/ldf-client-url-state.js b/src/ldf-client-url-state.js
@@ -42,6 +42,8 @@ jQuery(function ($) {
       $queryui.queryui('option', 'resultsToTree', uiState.resultsToTree !== 'false');
     if (uiState.datetime)
       $queryui.queryui('option', 'datetime', uiState.datetime);
+    if (uiState.httpProxy)
+      $queryui.queryui('option', 'httpProxy', uiState.httpProxy);
   }
 
   // Stores the current UI state in the URL
@@ -68,6 +70,8 @@ jQuery(function ($) {
       queryString.push('queryFormat=' + encodeURIComponent(options.queryFormat || ''));
     if (options.datetime)
       queryString.push('datetime=' + encodeURIComponent(options.datetime));
+    if (options.httpProxy)
+      queryString.push('httpProxy=' + encodeURIComponent(options.httpProxy));
 
     // Compose new URL with query string
     queryString = queryString.length ? '#' + queryString.join('&') : '';

diff --git a/src/ldf-client-worker.js b/src/ldf-client-worker.js
@@ -2,6 +2,7 @@ var engine = null;
 var RdfString = require('rdf-string');
 var LoggerPretty = require('@comunica/logger-pretty').LoggerPretty;
 var bindingsStreamToGraphQl = require('@comunica/actor-sparql-serialize-tree').bindingsStreamToGraphQl;
+var ProxyHandlerStatic = require('@comunica/actor-http-proxy').ProxyHandlerStatic;
 
 // The active fragments client and the current results
 var resultsIterator;
@@ -20,6 +21,10 @@ var handlers = {
     if (!engine)
       engine = require('../comunica-engine');
 
+    // Set up a proxy handler
+    if (config.context.httpProxy)
+      config.context.httpProxyHandler = new ProxyHandlerStatic(config.context.httpProxy);
+
     // Create a client to fetch the fragments through HTTP
     config.context.log = logger;
     engine.query(config.query, config.context)

diff --git a/styles/ldf-client.css b/styles/ldf-client.css
@@ -129,13 +129,17 @@ select {
   float: right;
 }
 
-input.datetime {
+input.datetime, input.httpProxy {
   float: right;
   font-size: 13px;
   border: 1px solid #999999;
   border-radius: 3px;
 }
 
+input.httpProxy {
+  width: 418px;
+}
+
 .details {
   display: none;
 }
@@ -146,14 +150,14 @@ input.datetime {
   margin: 0 -35px;
   float: right;
   cursor: pointer;
-  background: url(../images/memento.svg) no-repeat center center / contain;
+  background: url(../images/settings.svg) no-repeat center center / contain;
   opacity: .8;
 }
 .details-toggle:hover, .details-toggle.enabled {
   opacity: 1;
 }
 .details-toggle.enabled {
-  background-image: url(../images/memento.svg#active);
+  background-image: url(../images/settings.svg#active);
   width: 25px; /* for Chrome */
 }
 
@@ -325,7 +329,7 @@ footer {
   select {
     width: 350px;
   }
-  .chosen, input.datetime {
+  .chosen, input.datetime, input.httpProxy {
     float: none;
     margin-bottom: 0;
   }

diff --git a/webpack.config.js b/webpack.config.js
@@ -19,7 +19,7 @@ module.exports = [
       './images/chosen-sprite@2x.png',
       './images/graphql.svg',
       './images/logo.svg',
-      './images/memento.svg',
+      './images/settings.svg',
       './images/sparql.png',
       './favicon.ico',
       './queries.json',