From 028dfca8591c3024037ee3ae0113ec852b840e29 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Sun, 3 Jun 2012 09:50:47 +0100
Subject: [PATCH] [#110,app,load,ux][s]: refactor import/load menu to be called
 load, to support DataHub directly, and have better UX.

* List options to load from in dropdown menu rather than modal dialog
* Provide some help info in load dialog
* Support DataHub (including auto-guessing of Data API) - fixes #110.
---
 app/index.html | 52 ++++++++++++++++++++++++--------------------------
 app/js/app.js  | 40 ++++++++++++++++++++++++++++----------
 2 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/app/index.html b/app/index.html
index 6fd4dc9a..2b355186 100644
--- a/app/index.html
+++ b/app/index.html
@@ -84,13 +84,23 @@
         <ul class="nav pull-right">
           <li class="dropdown">
             <a data-toggle="dropdown" class="dropdown-toggle">
-              Import <b class="caret"></b></a>
-            <ul class="dropdown-menu js-import">
+              Load Data <b class="caret"></b></a>
+            <ul class="dropdown-menu js-load">
               <li>
-                <a data-toggle="modal" href=".js-import-dialog-url">Import from URL</a>
+                <a href="#" class="js-load-dialog-url" data-type="datahub" data-help="The link to the Dataset Data Resource on the DataHub to load from - note that the resource must have its Data API enabled">Load from the DataHub</a>
               </li>
               <li>
-                <a data-toggle="modal" href=".js-import-dialog-file">Import from File</a>
+                <a href="#" class="js-load-dialog-url" data-type="csv" data-help="Provide the link to the CSV file online">Load from CSV online</a>
+              </li>
+              <li>
+                <a href="#" class="js-load-dialog-url" data-type="excel" data-help="Provide the link to the Excel file online">Load from Excel online</a>
+              </li>
+              <li>
+                <a href="#" class="js-load-dialog-url" data-type="elasticsearch" data-help="Provide the link to the ElasticSearch endpoint (either an index or a type/table">Load from ElasticSearch</a>
+              </li>
+              <li class="divider"></li>
+              <li>
+                <a data-toggle="modal" href=".js-load-dialog-file">Load from CSV on disk</a>
               </li>
             </ul>
           </li>
@@ -127,7 +137,7 @@
                 <li>Data grid</li>
                 <li>Data editing including programmatic data transformation in javascript</li>
                 <li>Visualizations includes graphs and maps</li>
-                <li>Import and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
+                <li>Load and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
                 the <a href="http://datahub.io/">DataHub</a> and offline sources like CSV files on your local machine.</li>
                 <li>Use online or offline - because the app is built in pure javascript and html you can use it anywhere there's a modern web browser. Using offline is as easy and downloading this web page to your local machine.</li>
               </ul>
@@ -149,41 +159,29 @@
     </div>
 
   <!-- modals for menus -->
-  <div class="modal fade in js-import-dialog-url" style="display: none;">
+  <div class="modal fade in js-load-dialog-url" style="display: none;">
     <div class="modal-header">
       <a class="close" data-dismiss="modal">×</a>
-      <h3>Import from URL</h3>
+      <h3>Load from URL</h3>
     </div>
     <div class="modal-body">
-      <form class="js-import-url form-horizontal">
+      <form class="js-load-url">
         <div class="control-group">
-          <label class="control-label">URL</label>
           <div class="controls">
-            <input type="text" name="source" class="input-xlarge" />
+            <input type="text" name="source" class="span5" placeholder="URL to data source" />
+            <p class="help-block"></p>
+            <input name="backend_type" style="display: none;" />
           </div>
         </div>
-        <div class="control-group">
-          <label class="control-label">Type of data</label>
-          <div class="controls">
-            <select name="backend_type">
-              <option value="csv">CSV</option>
-              <option vlaue="excel">Excel</option>
-              <option value="gdocs">Google Spreadsheet</option>
-              <option value="elasticsearch">ElasticSearch</option>
-            </select>
-          </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary">Import &raquo;</button>
-        </div>
+        <button type="submit" class="btn btn-primary">Load &raquo;</button>
       </form>
     </div>
   </div>
 
-  <div class="modal fade in js-import-dialog-file" style="display: none;">
+  <div class="modal fade in js-load-dialog-file" style="display: none;">
     <div class="modal-header">
       <a class="close" data-dismiss="modal">×</a>
-      <h3>Import from File</h3>
+      <h3>Load from File</h3>
     </div>
     <div class="modal-body">
       <form class="form-horizontal">
@@ -213,7 +211,7 @@
           </div>
         </div>
         <div class="form-actions">
-          <button type="submit" class="btn btn-primary">Import &raquo;</button>
+          <button type="submit" class="btn btn-primary">Load &raquo;</button>
         </div>
       </form>
     </div>
diff --git a/app/js/app.js b/app/js/app.js
index fb8d375e..3cc8c186 100755
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -6,8 +6,9 @@ jQuery(function($) {
 
 var ExplorerApp = Backbone.View.extend({
   events: {
-    'submit form.js-import-url': '_onImportURL',
-    'submit .js-import-dialog-file form': '_onImportFile'
+    'click .nav .js-load-dialog-url': '_onLoadURLDialog',
+    'submit form.js-load-url': '_onLoadURL',
+    'submit .js-load-dialog-file form': '_onLoadFile'
   },
 
   initialize: function() {
@@ -153,33 +154,52 @@ var ExplorerApp = Backbone.View.extend({
   setupLoader: function(callback) {
     // pre-populate webstore load form with an example url
     var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013';
-    $('form.js-import-url input[name="source"]').val(demoUrl);
+    $('form.js-load-url input[name="source"]').val(demoUrl);
   },
 
-  _onImportURL: function(e) {
+  _onLoadURLDialog: function(e) {
     e.preventDefault();
-    $('.modal.js-import-dialog-url').modal('hide');
+    var $link = $(e.target);
+    var $modal = $('.modal.js-load-dialog-url');
+    $modal.find('h3').text($link.text());
+    $modal.modal('show');
+    $modal.find('input[name="source"]').val('');
+    $modal.find('input[name="backend_type"]').val($link.attr('data-type'));
+    $modal.find('.help-block').text($link.attr('data-help'));
+  },
+
+  _onLoadURL: function(e) {
+    e.preventDefault();
+    $('.modal.js-load-dialog-url').modal('hide');
     var $form = $(e.target);
     var source = $form.find('input[name="source"]').val();
     var datasetInfo = {
       id: 'my-dataset',
-      url: source,
-      webstore_url: source
+      url: source
     };
-    var type = $form.find('select[name="backend_type"]').val();
+    var type = $form.find('input[name="backend_type"]').val();
     if (type === 'csv' || type === 'excel') {
       datasetInfo.format = type;
       type = 'dataproxy';
     }
+    if (type === 'datahub') {
+      // have a full resource url so convert to data API
+      if (source.indexOf('dataset') != -1) {
+        var parts = source.split('/');
+        datasetInfo.url = parts[0] + '/' + parts[1] + '/' + parts[2] + '/api/data/' + parts[parts.length-1];
+      }
+      type = 'elasticsearch';
+    }
+    console.log(datasetInfo.url);
     var dataset = new recline.Model.Dataset(datasetInfo, type);
     this.createExplorer(dataset);
   },
 
-  _onImportFile: function(e) {
+  _onLoadFile: function(e) {
     var self = this;
     e.preventDefault();
     var $form = $(e.target);
-    $('.modal.js-import-dialog-file').modal('hide');
+    $('.modal.js-load-dialog-file').modal('hide');
     var $file = $form.find('input[type="file"]')[0];
     var file = $file.files[0];
     var options = {