publish_my_data 0.0.32 → 1.0.0

data/app/assets/javascripts/publish_my_data/grid/60_dataset_cube_grid.js

@@ -0,0 +1,187 @@
+// object to setup a cube grid for a pmd dataset, and wire everything together.
+(function ($) {
+
+  function DatasetCubeGrid(siteDomain, datasetSlug, datasetTitle, elementSelector) {
+
+    var pageSize = 25
+        , cubeDimensions = null
+        , cubeDimensionsControls = null
+        ;
+
+    function setGridStatus(status, busy) {
+      $(".grid-status .status-value").empty();
+      $(".grid-status .status-value").append(status);
+
+      if (busy) {
+        $(".grid-status img.busy").show();
+      } else {
+        $(".grid-status img.busy").hide();
+      }
+    }
+
+    function setGridError(httpStatusCode) {
+      $(".grid-status img.busy").hide();
+      $(".grid-status .status-value").empty();
+      if (httpStatusCode == 500 || httpStatusCode == 400) {
+        $(".grid-status .status-value").append('<i class="icon-warning"></i> Error fetching data');
+      } else if (httpStatusCode == 503) {
+        $(".grid-status .status-value").append('<i class="icon-warning"></i> Query timed out');
+      }
+    }
+
+    function setDimensionsStatus(status, busy){
+      $(".dimensions-status .status-value").empty();
+      $(".dimensions-status .status-value").append(status);
+
+      if (busy) {
+        $(".dimensions-status").show();
+        $(".dimensions-status img.busy").show();
+      } else {
+        $(".dimensions-status").hide();
+        $(".dimensions-status img.busy").hide();
+      }
+    }
+
+    function showDimensionsControls() {
+      $("#dimensions-controls form").show();
+    }
+
+    function showOptionsToggler() {
+      $("#options-toggler").show();
+    }
+
+    function setTitle(title) {
+      $("#cube-grid-title").empty();
+      $("#cube-grid-title").append(title);
+    }
+
+    function calculateGridTitle() {
+      var title = datasetTitle;
+      var lockedDimensionLabels = cubeDimensionsControls.getLockedDimensionValueLabels();
+      if ( lockedDimensionLabels.length > 0 ) {
+        title += ' (';
+        $.each(lockedDimensionLabels, function(i, label) {
+          title += label;
+          if ( lockedDimensionLabels.length-1 != i ){
+            title += ", ";
+          }
+        });
+        title += ')';
+      }
+      return title;
+    }
+
+    function wireUpCubeDimensionsEvents() {
+
+      cubeDimensionsControls.onInitialized.subscribe(function (e,args) {
+
+        showDimensionsControls();
+        showOptionsToggler();
+        setDimensionsStatus('', false);
+
+        // once the controls are initialized...
+        setTitle(calculateGridTitle()); // set initial title
+
+        // wire up the ready/busy events
+        cubeDimensionsControls.onReady.subscribe(function (e, args) {
+          cubeDimensionsControls.enable();
+          setDimensionsStatus('', false);
+
+          // re-init grid
+          cubeGrid.clear();
+          cubeGrid.initGridWhenReady();
+
+          // set locked dims
+          $.each(cubeDimensionsControls.getLockedDimensionUris(), function(i, lockedDimUri) {
+            var value = cubeDimensionsControls.getLockedDimensionValues()[i];
+            cubeGrid.setLockedDimensionValue(lockedDimUri, value);
+          });
+
+          // set rows and cols
+          cubeGrid.setRowsDimension(cubeDimensionsControls.getRowsDimension());
+          cubeGrid.setColumnsDimension(cubeDimensionsControls.getColumnsDimension());
+
+          cubeGrid.showCSVDownloadLink();
+          setTitle(calculateGridTitle());
+        });
+
+        cubeDimensionsControls.onBusy.subscribe(function (e, args) {
+          setTitle('&nbsp;');
+          cubeGrid.hideCSVDownloadLink();
+          setDimensionsStatus('Re-calculating options...', true);
+          setGridStatus('Re-initializing grid...', true);
+          cubeDimensionsControls.disable(); // disable the controls while they're busy.
+        });
+
+        // and enable the controls
+        cubeDimensionsControls.enable();
+      });
+
+    }
+
+    function setInitialGridStatus() {
+      // unsubscribe
+      cubeGrid.onCubeDimensionsReady.unsubscribe(setInitialGridStatus);
+
+      $.ajax({
+        url: "http://" +  siteDomain + "/data/" + datasetSlug + "/cube/recommended_dimensions.json",
+        dataType: 'json',
+        success: function(recommendedDimensions){
+
+          // for locked dims, just set the uris
+          for ( var dim in recommendedDimensions.locked_dimensions ) {
+            cubeGrid.setLockedDimensionValue( dim, recommendedDimensions.locked_dimensions[dim] )
+          }
+
+          // for the other dimensions, find the appropriate object
+          var columnsDimension = cubeGrid.getDimensionWithUri(recommendedDimensions.columns_dimension);
+          var rowsDimension = cubeGrid.getDimensionWithUri(recommendedDimensions.rows_dimension);
+
+          cubeGrid.setColumnsDimension(columnsDimension);
+          cubeGrid.setRowsDimension(rowsDimension);
+          cubeGrid.showCSVDownloadLink();
+        },
+        error: function(jqXHR, _, _) {
+          setGridError(jqXHR.status);
+        }
+      });
+
+    }
+
+    // set initial status
+    setTitle('&nbsp;');
+    setGridStatus('Initializing grid...', true);
+
+    var cubeGrid = new Swirrl.CubeGrid(elementSelector, siteDomain, datasetSlug, pageSize);
+
+    cubeGrid.onAjaxError.subscribe(function (e, args) {
+      setGridError(args.status);
+    });
+
+    // subscribe to grid events.
+    cubeGrid.onGridReady.subscribe(function (e, args) {
+      setGridStatus("Grid ready.", false);
+    });
+
+    var gridInitializedHandler = function (e, args) {
+      cubeDimensionsControls = new Swirrl.CubeDimensionsControls(cubeGrid, "#dimensions-controls");
+      wireUpCubeDimensionsEvents();
+      cubeDimensionsControls.init();
+      cubeGrid.onGridInitialized.unsubscribe(gridInitializedHandler);// only do 1st time round.
+    }
+
+    cubeGrid.onGridInitialized.subscribe(gridInitializedHandler);
+
+    cubeGrid.onGridGettingData.subscribe(function (e, args) {
+      setGridStatus("Getting data...", true)
+    });
+
+    // tell the grid to get all it's dimensions (and set up init grid status when they're ready).
+    cubeGrid.onCubeDimensionsReady.subscribe(setInitialGridStatus);
+    cubeGrid.getAllDimensionsAsync();
+
+  }
+
+
+  $.extend(true, window, { Swirrl: { DatasetCubeGrid: DatasetCubeGrid }});
+})(jQuery);

data/app/assets/javascripts/publish_my_data/grid/70_sparql_results_grid.js

@@ -0,0 +1,135 @@
+// object to setup a grid for sparql results
+(function ($) {
+
+  // ctor
+  function SparqlResultsGrid(encodedQuery) {
+
+    var SLICKGRIDOPTIONS = {
+        enableCellNavigation: false
+      , enableColumnReorder: false
+      , syncColumnCellResize: true
+      , rowHeight: 24
+      , enableTextSelectionOnCells: true
+      }
+    , ROWNUMBERSCOLUMNWIDTH = 55
+    , COLUMNWIDTH = 270
+    , PAGESIZE = 20
+    , INITIALTOTALCOUNT = 500
+    , TOTALCOUNTMARGIN = 200
+    , TOTALCOUNTEXTENDAMOUNT = 200
+
+    var totalCount = INITIALTOTALCOUNT;
+    var columns = null;
+    var loader = new Swirrl.DataLoader(totalCount, PAGESIZE);
+    var slickGrid = new Slick.Grid('#results-grid.data-grid', loader.data, [], SLICKGRIDOPTIONS);
+
+    $(document).on("click", ".slick-cell", function() {
+      $(this).selectText();
+    });
+
+    // These are thte same methods as in the cube grid. Refactor??
+    function setGridStatus(status, busy) {
+      $(".grid-status .status-value").empty();
+      $(".grid-status .status-value").append(status);
+
+      if (busy) {
+        $(".grid-status img.busy").show();
+      } else {
+        $(".grid-status img.busy").hide();
+      }
+    }
+
+    function setGridError(httpStatusCode) {
+      $(".grid-status img.busy").hide();
+      $(".grid-status .status-value").empty();
+      if (httpStatusCode == 500 || httpStatusCode == 400) {
+        $(".grid-status .status-value").append('<i class="icon-warning"></i> Error fetching data');
+      } else if (httpStatusCode == 503) {
+        $(".grid-status .status-value").append('<i class="icon-warning"></i> Query timed out');
+      }
+    }
+
+    function setColumns(responseData) {
+      var vars = responseData["head"]["vars"];
+      columns = [{id: '__row_num', field: '__row_num', name: '#', width: ROWNUMBERSCOLUMNWIDTH, cssClass: 'row-num' }];
+      $.each(vars, function(i, col) {
+        columns.push({id: col, name: col, field: col, width: COLUMNWIDTH});
+      });
+      slickGrid.setColumns(columns);
+    }
+
+    function loaderFunction(pageIndex) {
+
+      function processResponseData(responseData) {
+        // set the columns onto the grid if we haven't already
+        if(!columns) { setColumns(responseData); }
+
+        var rowsData = [];
+        var results = responseData["results"]["bindings"];
+
+        // go through the results, and make rows data.
+        for (var i = 0; i < results.length; i++) {
+          var resultsRow = null;
+          resultsRow = {};
+          for (var col in results[i]) {
+            resultsRow[col] = results[i][col]["value"];
+          }
+          rowsData.push(resultsRow);
+        }
+        return rowsData;
+      };
+
+      var theUrl = "/sparql.json?query=" + encodedQuery +
+        "&page=" + (pageIndex+1).toString() + // we use one-based pagination on the server.
+        "&per_page=" + PAGESIZE.toString();
+
+      setGridStatus('Getting data...', true);
+      req = $.ajax({
+        url: theUrl,
+        dataType: 'json',
+        success: function(responseData, _, jqXHR) {
+          loader.setPageOfData(jqXHR.page, processResponseData(responseData));
+          setGridStatus('Grid Ready.');
+        },
+        error: function( jqXHR, _, _ ) {
+          setGridError(jqXHR.status);
+        }
+      });
+      req.page = pageIndex; // add a page property onto the jqXHR obj
+    }
+
+    // initialisation...
+
+    // when a bunch of rows are loaded,
+    // re-render them.
+    loader.onDataLoaded.subscribe(function (e, args) {
+      for (var i = args.from; i <= args.to; i++) {
+        slickGrid.invalidateRow(i); // causes the appropriate rows to redraw.
+      }
+      slickGrid.updateRowCount(); // uses data.length
+      slickGrid.render();
+    });
+
+    // When the viewport changes, ensure the loader has the relevent data.
+    // (when scrolling stops for 200ms)
+    var viewportChangedTimer;
+
+    slickGrid.onViewportChanged.subscribe(function (e, args) {
+      clearTimeout(viewportChangedTimer);
+      viewportChangedTimer = setTimeout( function() {
+
+        // extend the grid if near the bottom
+        if( slickGrid.getViewport().bottom > (totalCount - TOTALCOUNTMARGIN) ) {
+          totalCount = totalCount + TOTALCOUNTEXTENDAMOUNT;
+          loader.updateTotalCount( totalCount );
+        }
+
+        loader.ensureData(slickGrid.getViewport().top, slickGrid.getViewport().bottom, loaderFunction);
+       }, 200); // 200ms delay.
+    });
+
+    loader.ensureData(slickGrid.getViewport().top, slickGrid.getViewport().bottom, loaderFunction);
+  }
+
+  $.extend(true, window, { Swirrl: { SparqlResultsGrid: SparqlResultsGrid }});
+})(jQuery);

data/app/assets/javascripts/publish_my_data/select_text.js

@@ -0,0 +1,27 @@
+/*!
+ *  Highlight areas of text
+ *  Copyright 2012, Swirrl IT Limited
+ *  All rights reserved
+ */
+
+jQuery.fn.selectText = function(){
+    var doc = document;
+    var element = this[0];
+    if (doc.body.createTextRange) {
+        var range = document.body.createTextRange();
+        range.moveToElementText(element);
+        range.select();
+    } else if (window.getSelection) {
+        var selection = window.getSelection();
+        var range = document.createRange();
+        range.selectNodeContents(element);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+};
+
+$(function(){
+    $('.click-to-select').click(function(){
+      $(this).selectText();
+    });
+});

data/app/assets/javascripts/publish_my_data.js

@@ -10,4 +10,7 @@
 // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 // GO AFTER THE REQUIRES BELOW.
 //
+//= require jquery
+//= require_tree ./slick_grid
 //= require_tree ./publish_my_data
+//= require bootstrap/tab