Merge branch 'v1.1'

Author: marc92w

app/components/graph/graph.ctrl.js

@@ -4,19 +4,23 @@
  *
  * @param $scope
  * @param {$q} $q
+ * @param {$location} $location
  * @param {$log} $log
  * @param Filters
  * @param {ClassExtractor} ClassExtractor
  * @param {RelationExtractor} RelationExtractor
  * @param TypeExtractor
  * @param DetailExtractor
- * @param RequestConfig
  * @param Requests
+ * @param RequestConfig
  * @param Prefixes
  * @param StopWatch
+ * @param Data
+ * @param View
+ * @param Promises
  */
-function graphCtrl($scope, $q, $log, Filters, ClassExtractor, RelationExtractor, TypeExtractor, DetailExtractor,
-                           RequestConfig, Requests, Prefixes, StopWatch) {
+function graphCtrl($scope, $q, $location, $log, Filters, ClassExtractor, RelationExtractor, TypeExtractor,
+                   DetailExtractor, Requests, RequestConfig, Prefixes, StopWatch, Data, View, Promises) {
   'ngInject';
 
   /* jshint validthis: true */
@@ -36,7 +40,8 @@ function graphCtrl($scope, $q, $log, Filters, ClassExtractor, RelationExtractor,
   vm.showEndpointUrl = __SHOW_ENDPOINT__; // eslint-disable-line no-undef
   // jshint ignore:end
 
-  vm.endpointURL = RequestConfig.getEndpointURL();
+  vm.requestedEndpoint = $location.search()['endpointURL'];
+  vm.endpointURL = (vm.requestedEndpoint !== undefined) ? vm.requestedEndpoint : RequestConfig.getEndpointURL();
   vm.data = {};
   vm.data.nodes = [];
 
@@ -129,10 +134,51 @@ function graphCtrl($scope, $q, $log, Filters, ClassExtractor, RelationExtractor,
     }
   };
 
+  /**
+   * Stop the extraction by rejecting all promises.
+   */
+  vm.stopLoading = function () {
+    Promises.rejectAll();
+    StopWatch.stop();
+  };
+
+  /**
+   * First clear all loaded data, then restart Loading
+   */
+  vm.restartLoading = function () {
+    Data.clearAll();
+    vm.classes = [];
+    StopWatch.stop();
+
+    $log.warn('[Graph] Restart loading...');
+
+    vm.startLoading();
+  };
+
   /**
    * Start loading data requesting classes. For each class request referring types and search class-class relations.
    */
   vm.startLoading = function () {
+    if (vm.endpointURL === undefined || vm.endpointURL === '') {
+      Data.clearAll();
+      RequestConfig.setEndpointURL();
+      Data.initMaps();
+      View.reset();
+
+      // do not try to query an empty url
+      return;
+    } else {
+      if (vm.endpointURL !== RequestConfig.getEndpointURL()) {
+        Data.clearAll();
+        RequestConfig.setEndpointURL(vm.endpointURL);
+        Data.initMaps();
+        View.reset();
+      }
+
+      // insert endpoint URL if missing
+      $location.search('endpointURL', vm.endpointURL);
+    }
+
     StopWatch.start();
     ClassExtractor.requestClasses().then(function extractForClasses(newClasses) {
 
@@ -142,7 +188,7 @@ function graphCtrl($scope, $q, $log, Filters, ClassExtractor, RelationExtractor,
       if (newClasses.length === 0) {
         $log.debug('[Graph] No new classes!');
       } else {
-        for (var i = 0; i < newClasses.length; i++) {
+        for (let i = 0; i < newClasses.length; i++) {
           vm.classes.push(newClasses[i]);
         }
       }

app/components/graph/nodelink-graph.drv.js

@@ -14,10 +14,11 @@ import d3 from 'd3';
  * @param Filters
  * @param {Geometry} Geometry
  * @param Utils
+ * @param Requests
  *
  * @returns {{restrict: string, scope: {data: string, onClick: string}, link: link}}
  */
-function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geometry, Utils) {
+function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geometry, Utils, Requests, View) {
 
   'ngInject';
 
@@ -29,6 +30,7 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
     },
     link: function (scope, element, attrs) {
       var margin = parseInt(attrs.margin) || 20;
+      var width = 0;
       var height = parseInt(attrs.height) || $window.innerHeight;
 
       var colorRange = [d3.rgb('#3366CC'), d3.rgb('#EE2867')];
@@ -43,14 +45,21 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
 
       var root = svg.append('g');
 
+      let notification = svg.append('g')
+                            .attr('id', 'notification');
+      let notificationText = notification.append('text')
+                              .attr('class', 'notification')
+                              .style('opacity', 0.0);
+
       var lastUpdate = null;
 
       var minUpdateInterval = 1500;
 
       // Browser onresize event
       $window.onresize = function () {
         height = $window.innerHeight;
-        svg.attr('height', height-60);
+        svg.attr('height', Math.max(height - 60, 0));
+        scope.drawPlaceholder(scope.data, width, height);
         scope.$apply();
       };
 
@@ -68,6 +77,9 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
       scope.loopSpline = {};
       scope.linearLine = {};
 
+      scope.translate = View.getTranslate();
+      scope.scale = View.getScale();
+
       scope.color = d3.scale.linear().domain([1, Prefixes.size()])
         .interpolate(d3.interpolateHsl)
         .range(colorRange);
@@ -79,7 +91,8 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
         'showTypes': Filters.getIncludeLiterals(),
         'showLoops': Filters.getIncludeLoops(),
         'showDisjointNode': Filters.getIncludeDisjointNode(),
-        'showSubclassRelations': Filters.getIncludeSubclassRelations()
+        'showSubclassRelations': Filters.getIncludeSubclassRelations(),
+        'loading': (Requests.getPendingRequests() > 0)
       };
 
       scope.$watch(function () {
@@ -171,6 +184,11 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
         scope.render(scope.data);
       });
 
+      scope.$on('pending-requests-changed', function(event, pending) {
+        scope.data.loading = (pending > 0);
+        scope.drawPlaceholder(scope.data, width, height);
+      });
+
       scope.lineColor = d3.scale.log()
                           .base(2)
                           .domain([1, 32])
@@ -284,6 +302,13 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
 
       scope.redraw = function () {
         root.attr('transform', 'translate(' + d3.event.translate + ')' + 'scale(' + d3.event.scale + ')');
+
+        // save current view
+        View.setTranslate(d3.event.translate);
+        View.setScale(d3.event.scale);
+
+        scope.scale = d3.event.scale;
+        scope.translate = d3.event.translate;
       };
 
       /**
@@ -623,6 +648,43 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
         return node;
       };
 
+      /**
+       * Draws or redraws a placeholder on the graph while classes are loaded or no endpoint is selected.
+       */
+      scope.drawPlaceholder = function (data, width, height) {
+        if (data.nodes.size === 0) {
+          $log.debug(`[Graph] Redraw placeholder! Loading: ${scope.data.loading}`);
+          let boxHeight = 35;
+          let transitionDuration = 750;
+
+          if (scope.data.loading) {
+            let boxWidth = 200;
+            let centerX = (width - boxWidth) / 2;
+            let centerY = Math.max(((height - boxHeight) / 2), 50);
+
+            notificationText.text('Loading classes...')
+              .attr('x', centerX + 5)
+              .attr('y', centerY - 24)
+              .transition()
+                .duration(transitionDuration)
+                .style('opacity', 1.0);
+          } else {
+            let boxWidth = 350;
+            let centerX = (width - boxWidth) / 2;
+            let centerY = Math.max(((height - boxHeight) / 2), 50);
+
+            notificationText.text('Given SPARQL endpoint not accessible.')
+              .attr('x', centerX + 5)
+              .attr('y', centerY - 24)
+              .transition()
+                .duration(transitionDuration)
+                .style('opacity', 1.0);
+          }
+        } else {
+          notificationText.attr('display', 'none');
+        }
+      };
+
       /**
        * Function which creates the graph.
        *
@@ -642,10 +704,18 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
           return;
         }
 
+        // restore view
+        root.attr('transform', 'translate(' + scope.translate + ')' + 'scale(' + scope.scale + ')');
+
+        // set up zoom
         var zoom = d3.behavior.zoom()
-                    .duration(150)
                     .scaleExtent([0.1,2.0])
+                    .duration(150)
                     .on('zoom', scope.redraw);
+
+        zoom.translate(scope.translate)
+          .scale(scope.scale);
+
         svg.call(zoom);
 
         scope.maxValue = 0;
@@ -738,7 +808,9 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
         } // end of if data.properties are defined
 
         // set up dimensions
-        var width = d3.select(element[0]).node().offsetWidth - margin;
+        width = d3.select(element[0]).node().offsetWidth - margin;
+
+        scope.drawPlaceholder(data, width, height);
 
         // create force layout
         scope.force = d3.layout.force()
@@ -782,7 +854,7 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Geom
           });
 
         svg.attr('width', width)
-          .attr('height', height - 60);
+          .attr('height', Math.max(height - 60, 0));
 
         scope.nodesToDraw.forEach(function (node) {
           node.radius = scope.calcRadius(node);

app/components/settings/settings.html

@@ -1,17 +1,17 @@
 <div class="container">
 
-  <h2>SPARQL Queries</h2>
+  <h2>Retrieval Options</h2>
 
   <form name="extractionForm" class="form-horizontal well" role="form" novalidate>
     <div class="form-group" ng-class="{ 'has-error' : extractionForm.limit.$invalid && !extractionForm.limit.$pristine }">
-      <label class="control-label col-sm-3" for="lang">Label Language</label>
+      <label class="control-label col-sm-3" for="lang">Language of Labels</label>
       <div class="col-sm-4">
         <select class="form-control" name="lang" id="lang" ng-model="vm.currentLanguage"
                 ng-options="language.id as language.name for language in vm.availableLanguages">
         </select>
       </div>
 
-      <label for="limit" class="col-sm-2 control-label">Default Limit</label>
+      <label for="limit" class="col-sm-2 control-label">Number of Classes</label>
       <div class="col-sm-3">
         <input class="form-control" name="limit" id="limit" type="number" ng-model="vm.currentLimit" min="1" required/>
         <p ng-show="extractionForm.limit.$invalid && !extractionForm.limit.$pristine" class="help-block">
@@ -25,7 +25,7 @@ <h2>SPARQL Queries</h2>
         <div class="checkbox">
           <label>
             <input type="checkbox" name="ordered" ng-model="vm.propsOrdered">
-            fetch properties in descending order of their usage
+            retrieve properties in descending order of their usage frequency
           </label>
         </div>
       </div>

app/components/sidebar/groups/endpoint-group/endpoint-group.html

@@ -4,6 +4,7 @@
       <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
       URL:
     </strong>
+    <span ng-show="vm.endpointURL.length === 0">None</span>
     <a href="{{vm.endpointURL}}" target="_blank">{{vm.endpointURL}}</a>
   </p>
 
@@ -34,4 +35,17 @@
     <span>(Status: {{errorStatus.join(', ')}})</span>
     <span ng-show="failedRequests === 0">None</span>
   </p>
+
+  <div class="text-center" ng-if="vm.endpointURL.length > 0">
+    <button type="button" class="btn btn-warning" ng-click="vm.restartLoading()" ng-show="pendingRequests === 0">
+      <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
+      Reload
+    </button>
+
+    <button type="button" class="btn btn-danger" ng-click="vm.stopLoading()" ng-hide="pendingRequests === 0">
+      <span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
+      Stop
+    </button>
+  </div>
+
 </div>

app/components/sidebar/slider.drv.js

@@ -24,6 +24,11 @@ function slider($rootScope) {
             scope.value = parseInt(ui.value);
             $rootScope.$broadcast(attrs.model + '-changed', ui.value);
           });
+        },
+
+        // this function is needed to set the initial value, otherwise slider will always be at zero in the beginning
+        create: function() {
+          $(this).slider('value', scope.value);
         }
       });
     } // end pf link()

app/components/start/start.ctrl.js

@@ -5,13 +5,12 @@
  *
  * @param $log
  * @param $location
- * @param Nodes
- * @param Properties
+ * @param Data
+ * @param View
  * @param Requests
  * @param RequestConfig
- * @param Promises
  */
-function startCtrl($log, $location, Nodes, Properties, Requests, RequestConfig, Promises) {
+function startCtrl($log, $location, Data, View, Requests, RequestConfig) {
 
   'ngInject';
 
@@ -136,23 +135,18 @@ function startCtrl($log, $location, Nodes, Properties, Requests, RequestConfig,
    */
   start.showGraph = function () {
 
-      var lastEndpoint = RequestConfig.getEndpointURL();
+      const lastEndpoint = RequestConfig.getEndpointURL();
 
       // clear loaded data if endpoint has changed
       if (lastEndpoint !== start.endpoint && start.endpoint !== undefined && start.endpoint.length > 0) {
-        Promises.rejectAll();
+        Data.clearAll();
 
-        Nodes.clearAll();
-        Properties.clearAll();
-        Requests.clear();
-
-        $log.warn('[Start] Cleared all saved data!');
+        View.reset();
 
         // change endpoint
         RequestConfig.setEndpointURL(start.endpoint);
 
-        Nodes.initMap();
-        Properties.initProperties();
+        Data.initMaps();
       }
 
       RequestConfig.setUseLocalProxy(start.useLocalProxy);
@@ -163,6 +157,9 @@ function startCtrl($log, $location, Nodes, Properties, Requests, RequestConfig,
 
         // move to the graph view
         $location.path('graph');
+
+        // $location url-encodes parameters automatically
+        $location.search('endpointURL', start.endpoint);
       } else {
         $log.error('[Start] Please enter an url for the SPARQL endpoint!');
       }