From 51ff83646c6740e694f16b37cc966328662f7668 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Tue, 3 Apr 2012 21:23:21 +0100 Subject: [PATCH 1/8] [demo/style/images][xs]: remove long obsolete and unused images. --- demo/style/images/down-arrow.png | Bin 971 -> 0 bytes demo/style/images/edit-map.png | Bin 1569 -> 0 bytes demo/style/images/loader-blue.gif | Bin 1343 -> 0 bytes demo/style/images/loader.gif | Bin 1413 -> 0 bytes demo/style/images/menu-dropdown.png | Bin 1123 -> 0 bytes 5 files changed, 0 insertions(+), 0 deletions(-) delete mode 100755 demo/style/images/down-arrow.png delete mode 100755 demo/style/images/edit-map.png delete mode 100755 demo/style/images/loader-blue.gif delete mode 100755 demo/style/images/loader.gif delete mode 100755 demo/style/images/menu-dropdown.png diff --git a/demo/style/images/down-arrow.png b/demo/style/images/down-arrow.png deleted file mode 100755 index f172a16234ca91c04ffc9d7cddd898870d6f3620..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 971 zcmaJ=J#W)M7(Nk*N>L>`mZc{b!P5AX#I+Su1v{ojaTFzy$QZ}IBvxvlu`k5QgeoyG zqy7uTiUb1)vG5NNI}1p3La@O(O;QGeCHwAu^*qn}>1U1l{jJR#n*e|<>&R%*^D2Gw z8#(&DwPXCG#}27>NDKGL#EB88c({k46*vRbM2IeYV#fxf3P4~sT$M>-n%N3$5UX7#o^8@Y^b|SGj9&m!9D4B*R7AT^SOhe+N zg)rG$Di|nnV?QE34q>L~^zfKy49)bsgdkeUhRLE$v|(K8M4Z6#SxHNvZT}w{1S@nx zn&=|me+nnEQZ%S*S?WW8@GVw=q6mcCj(U1SdlrLA_Okw&VI?X3z1q zty*D1oX|y#fg4Ud!cZGF&#;zXrW@(e25utF@)Z zYVlD>w>_q7J*=EPrN2bJQEOKvN&5Ev*N@llKT*#m(yX_BgDh(^axcK`ucx(Z6bh_r-FSJgd-4ZJH!76? diff --git a/demo/style/images/edit-map.png b/demo/style/images/edit-map.png deleted file mode 100755 index dea0ed1ef4e1a8d301f58c9a24ce7ed3ea297bb6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1569 zcmeAS@N?(olHy`uVBq!ia0vp^MnEjU!3HElqIG(Jlw^r(L`iUdT1k0gQ7VIDN`6wR zf@f}GdTLN=VoGJ<$y6H#24v4 zq}24xJX@vryZ0+8WTx0Eg`4^s_!c;)W@LI)6{QAO`Gq7`WhYyvDB0U7*i={n4aiL` zNmQuF&B-gas<2f8n`;GRgM{^!6u?SKvTcwn`Gtf;oFf&jvGt@IQ zHZeCh*HJJsFf`CNFw!?P(ls=ndS0-B(gnVDi`Y3yQQ>}q7{VqjotXz1c*X=!fZ;%w&ZVrt;# zXl&>R)9aF-T$-DjR|3v4~Pj*wm=R%;iu*SQ+p9GSx?XmOJ`tUn(FD|7*cU7 z>CgZF_J<1?bQF?q9W(#tu!_6m?23$UnhJWSKZ#p%JhBkKzi_5(b#*A;CI{9qhK(#! znNRX$ty8gmlhDL9A%)RkiX=~{rQwY?YkGL1xMWUvsTOSDWJ=HgMh9oohDyts5;ZzM z4BjLxH1RN#{e9xY%iHz_w+}Y3zmQaG%jT~OFumcOZkJr~@0lKpccGqNlVi|~sSoe0&FAs$jx(tF_mAJT=IFlf8dXZNtP*^2 ze-0gB=&4jT)!PuUYP-SVH*50~y<%ogF#Qqv(Rk0lAM7%x7Njt7CC)f}h~K z$Bs$o@BK~u!DJ%cl4!`n`qbwI->;wCLd*+h1WZe6KRtK%-`1hW%Y2!BWZ4a&gi$?sGPuetgw8Sf*;h z?XxWX;v}t|4V;!PjvE~l9gaM%CaJb>8OCt&WB73QrJ#wOUN}&b*PE)d9Y`Z&QUg>?-MS)IMAw}aDM0P zPls%~w8b1x21#$_aAQn0p4VhtQoc*%#>EX=_`LkK%l~IcubAOpcvMLva*^mko}LA2 zTpQAsM_RK+oHuaFE}M0eaaDSP;io3IvONb5F54#CW6*zu@uRF(bOC#o9y2f<$>^<( gS8GdTVqoH7aNjQEEY|+vJ*d$3boFyt=akR{0GM<+9{>OV diff --git a/demo/style/images/loader-blue.gif b/demo/style/images/loader-blue.gif deleted file mode 100755 index 45b49052eb4b92428e751766e45816773cd45842..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1343 zcmb`HUq};i9Ke6u-A-Lon;qAx%eHaputUs-SdG}9+d0?p?K#jo)^PYR<9&QW`)kE ztv<+Z6L10-!jmj7am})=wu33+#Qs@ki{LvjAYF_L$0ls`A=CF|Wp1I`<*0BM<`-Zp zgplboo<<-XvG5E-=n&Ef#;3jbb2&E})T-Byol?c_tEzLaQg>P|*RhVx!JN^wSfwAC z&&*iRxsm*Gee^Z5@M$K;hlL~F^ta4Lj4peBZTi(adG2^u$@O!>T#m(J`uQTw;){9~ zX`5xz%mT17cOfT5;=V&sT^0?~1GcqnKM(?dE`wxw5qRi48{mNjfCp?bJjt~VkY+0g z0#sjTlw8e#5#R@AFv1l16uPDU5xZhecX2@=bhodnMRmCFk>tk5wT5S2EMRchFWiev z-|8qD%tX}|38hIU6tJXpouo1Q$_IX`MSrAipEec8g%oc;l~E&>xY{(CD-balb~;z3 zS33Un6-xM;NY+8;Siu+U9|B3%0Y-4G4io@C7y(nsQa}Xg15MC{A{PW5iYC(Vfl$y2 zDS;y}rKxSupXzzQ?1}dAHTt?dKD*(?OCLskRGprFh$`fqKHOY+6BUeZk7A$3M@D)Z zxh6SlFzzyTqIPqf2n6QYyurq!w?)s5C*kQ-*~{otHiUky{*T6ztDjJ2Y?hOu!;HyY z!*nnv5J2CsYiK~p8d@KohpVtw?T3+-*5OW|^;RWrm>qy11||CN6!-vW5VO<^U;IC! z*6!pyMm}8frn#V)zA}@F*)?6x-Z#Q|Px1K98P%L4Bjzq&FvX2{_mhpWao47y$ID$k z#xc?ztfjKmNL!k|c6W_d!Xe*mqmgt@Rw8t zhPcFu2%QsTHv3x@_)|V0iO+&^UKFhy$2R5rK<9IdXiNP>)Wy{N4x>Mz%0r(S+ODyG zHJ)9g_Rkzdba}X86L}1szzEfj!~NPKq#pGWgxsxOFxar&O$H)G@7cSK@~>UtEUgz% UD#5u8RQf7a)1`{DP6yih1MQt(r~m)} diff --git a/demo/style/images/loader.gif b/demo/style/images/loader.gif deleted file mode 100755 index 4a16dea3604ba668fe9faf7ca389206883501c81..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1413 zcmcK4ZAcSw00!{?wsWsH@l0#Zxwf@LQbKKpmEhi-tIU^NrY5muN`=&{Ard1lnPO(9 zwqB?aSt}|=Z%9P=L1UDZgoFfzM8%2nkg-D8i&ran$NsvMIqCO!K+(V1xAOu$v|ns_=9c@r7BH>CX`D=l(V zT1@3dxht~;JVJ=}J0%g41d@f{I0Q{dT&YIi6WO_Z+n1W{k~nfcpAGiagy=xQf#Vyk zx_&}m;2X)UPMY16SkB~W6h?FSvnk`4z?qY~p}?;=6s#cpUC)pDJ~$FvgO8K>zaO#e z?<3k{Ioo{U`(dliijxH|1aU;f%UY4;@AprCnNC`qgfJjLlBV5FNYdTaJ$QT2u-bq~ zb+vT}%rS9BAOH}URB9EBVgxUL5zI#6Qn0olmTuuL;g;b(x1-b3VILrDufAO;BR93i zULCn|dzg;5v|Y+c)Z0>7+i9M-H=eZ1o#GqKJ=qjFTU@i$lB$+2T3+L_B+yBfL@q5` zDj-bRkrbZY^jk_bN9tE2V1ZHuF9#6@Q8^bdfd+7RwAVNM0EO&-$0{A} zblbCR!V_J^cU8)C_I>(zGhduCqN_dHn(iO)WqPQUX6r+zU0it5c2V-$kXdo$tJY;N zTq4|RNtSJ^*s8Gz6pTnI_1cb`{}Acs5dFJ6v`3$=M>Nz08Ic!NgByy1j|r*+1VgTY z`3>uMGEVp+HyjBijvdPq$Q_x HCbI4)eWJZy diff --git a/demo/style/images/menu-dropdown.png b/demo/style/images/menu-dropdown.png deleted file mode 100755 index c733fef7f4b2c5249752673204f7c604a453e5dd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1123 zcmaJ=T}TvB7#&i`EEOw??4fB4GHB;--Q9L_6Wwuh%h|TwiL9r_nd|PL^W)659epYC zA&jWBf?k4pi--y`kqWHd0v}3yDkYM%AT%_DQpE0WCqb&W7-G{cN!0jx$bngAZvq!dU1N$F^N1*$MC zk5I)%*eEn`vZ0ZZiy};*|zO;1c)$qdPQ_dV_1TCw?>6c=0j zo^83cX8Y0W?dym7FN~9Sd#+qfC5nf4c649rK0MvCS=g4m?4%BTE@8d9HjNaJZPT@F zrIjzbVp2iHN$UK={O^y()*WF7-t71^_vB{uL$kPh@#EmdGh^g)?B3(G&r+Qy_9Hu3 Mv@XWquRV3{7e{)Hj{pDw From b0fae7c3d032f9cc70d60c139ec22c43846fb9f6 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Tue, 3 Apr 2012 21:54:22 +0100 Subject: [PATCH 2/8] [#65,refactor][s]: move demo to app and rework mains docs to reflect app / library distinction. --- {demo => app}/built.html | 0 {demo => app}/images/bg_gradient.gif | Bin {demo => app}/images/couch.png | Bin {demo => app}/images/large-spinner.gif | Bin {demo => app}/index.html | 6 ++-- {demo => app}/js/app.js | 0 {demo => app}/style/demo.css | 0 index.html | 43 +++++++++++++++++-------- 8 files changed, 32 insertions(+), 17 deletions(-) rename {demo => app}/built.html (100%) rename {demo => app}/images/bg_gradient.gif (100%) rename {demo => app}/images/couch.png (100%) rename {demo => app}/images/large-spinner.gif (100%) rename {demo => app}/index.html (96%) rename {demo => app}/js/app.js (100%) rename {demo => app}/style/demo.css (100%) diff --git a/demo/built.html b/app/built.html similarity index 100% rename from demo/built.html rename to app/built.html diff --git a/demo/images/bg_gradient.gif b/app/images/bg_gradient.gif similarity index 100% rename from demo/images/bg_gradient.gif rename to app/images/bg_gradient.gif diff --git a/demo/images/couch.png b/app/images/couch.png similarity index 100% rename from demo/images/couch.png rename to app/images/couch.png diff --git a/demo/images/large-spinner.gif b/app/images/large-spinner.gif similarity index 100% rename from demo/images/large-spinner.gif rename to app/images/large-spinner.gif diff --git a/demo/index.html b/app/index.html similarity index 96% rename from demo/index.html rename to app/index.html index bfd45a5f..059c1f89 100644 --- a/demo/index.html +++ b/app/index.html @@ -2,8 +2,8 @@ - Recline Data Explorer Demo - + Recline Data Explorer + @@ -49,7 +49,7 @@
- Recline Data Explorer Demo + Recline Data Explorer diff --git a/demo/js/app.js b/app/js/app.js similarity index 100% rename from demo/js/app.js rename to app/js/app.js diff --git a/demo/style/demo.css b/app/style/demo.css similarity index 100% rename from demo/style/demo.css rename to app/style/demo.css diff --git a/index.html b/index.html index c43582b4..fbc70442 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Recline DataExplorer + Recline Data Explorer and Library
+

Use It

+

Visit the Data Explorer »

Get It

Development Version
v0.3 (67k)

Dependencies

From 1be758e6b81df3abfee8cdeeeaa16ebd69a3def7 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Tue, 3 Apr 2012 22:04:09 +0100 Subject: [PATCH 3/8] [addendum,refactor][xs]: symlink app to demo so old urls do not break. --- demo | 1 + 1 file changed, 1 insertion(+) create mode 120000 demo diff --git a/demo b/demo new file mode 120000 index 00000000..f83b1b63 --- /dev/null +++ b/demo @@ -0,0 +1 @@ +app/ \ No newline at end of file From b24d031851cec2a9efd6ab614032f67ff4b8ac1d Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Tue, 3 Apr 2012 22:05:02 +0100 Subject: [PATCH 4/8] [#65,refactor][xs]: remove read-only link in app (was for demo not app). --- app/index.html | 1 - app/js/app.js | 6 ------ 2 files changed, 7 deletions(-) diff --git a/app/index.html b/app/index.html index 059c1f89..0a11e6cd 100644 --- a/app/index.html +++ b/app/index.html @@ -66,7 +66,6 @@ -
  • Read-only
    • diff --git a/app/js/app.js b/app/js/app.js index e99abcae..9f17f845 100755 --- a/app/js/app.js +++ b/app/js/app.js @@ -17,12 +17,6 @@ $(function() { // setup the loader menu in top bar setupLoader(createExplorer); - - // set up readonly enabling in top bar - $('a.set-read-only').click(function() { - window.dataExplorer.setReadOnly(); - alert('Read-only mode set'); - }); }); // make Explorer creation / initialization in a function so we can call it From 76d709a1eb39a7eadd5dbeb99c995f39b6d5daf9 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Wed, 4 Apr 2012 10:49:26 +0100 Subject: [PATCH 5/8] [#65,docs][s]: start on examples section with quickstart case using createDataset. --- index.html | 76 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 58 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index fbc70442..2f707218 100644 --- a/index.html +++ b/index.html @@ -92,9 +92,9 @@

    Recline is two things:

      -
    • Data Explorer combining a data grid, Google Refine-style data +
    • A Data Explorer combining a data grid, Google Refine-style data transforms and visualizations all in lightweight javascript and html.
      • -
    • Simple but powerful library of extensible of data components - data +
    • A simple but powerful library of extensible of data components - data grid, graphing, and data connectors - which you can selectively use and build on.
    @@ -126,19 +126,40 @@

    Demo

    For demo see the Data Explorer »

    -

    Documentation

    -

    Quickstart

    - 
    -// Note: you should have included the relevant JS libraries (and CSS)
-// See above for dependencies
+    
    Data Explorer Documentation
    
+    
    Usage instructions are built into the Data Explorer
+    itself so no specific additional documentation is provided on usage.
    
+    
    To embed the data explorer in another site you can use a simple iframe
+    in your web page:
    
+    
+    
    Alternatively, you can initialize the explorer yourself from javascript. To see how
+    to do this just take at look at the Explorer's initialization javascript
+    in: app.js.
    
 
-// Dataset is a Backbone model so the first hash become model attributes
-var dataset = recline.Model.Dataset({
-    id: 'my-id'
-  },
-  // Either a backend instance or string id for a backend in the registry
-  backend
-);
+
+    
    Library Documentation
    
+
+    
    Examples
    
+    
    Note: A quick read through of the Concepts section will
+    likely be useful in understanding the details of the examples.
    
+    
    Note: for all the following examples you should have
+    included relevant Recline dependencies.
    
+    
    Simple in-memory dataset.
    
+    
    +// Some data you have
+// Your data must be in the form of list of documents / rows
+// Each document/row is an Object with keys and values
+var data = [
+    {id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'}
+    , {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
+    , {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
+  ];
+
+// Create a Dataset object from local in-memory data
+// Dataset object is a Backbone model - more info on attributes in model docs below
+var dataset = recline.Backend.createDataset(data);
+
+// Now create the main explorer view (it will create other views as needed)
 // DataExplorer is a Backbone View
 var explorer = recline.View.DataExplorer({
   model: dataset,
@@ -147,10 +168,29 @@ var explorer = recline.View.DataExplorer({
 });
 // Start Backbone routing (if you want routing support)
 Backbone.history.start();
-    
    
-    
    More details and examples: see docs below and the Demo -- just hit view source (NB: the javascript for the
-    demo is in: app.js).
    
+
    + +

    Creating a Dataset Explicitly with a Backend

    +
    +// Backend can be an instance or string id for a backend in the
+// recline.Model.backends registry
+var backend = 'elasticsearch'
+// alternatively you can create explicitly
+// var backend = new recline.Backend.ElasticSearch();
+// or even from your own backend ...
+// var backend = new myModule.Backend();
+
+// Dataset is a Backbone model so the first hash become model attributes
+var dataset = recline.Model.Dataset({
+    id: 'my-id',
+    // url for source of this dataset - will be used by backend
+    url: 'http://localhost:9200/my-index/my-type',
+    // any other metadata e.g.
+    title: 'My Dataset Title'
+  },
+  backend
+);
+

    Concepts and Structure

    Recline has a simple structure layered on top of the basic Model/View From 2b8f1bcf6450b8e5d069322c7a543e44c33641d1 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Wed, 4 Apr 2012 10:53:50 +0100 Subject: [PATCH 6/8] [refactor,docs][xs]: indentation and text-wrap. --- index.html | 261 +++++++++++++++++++++++++++++------------------------ 1 file changed, 142 insertions(+), 119 deletions(-) diff --git a/index.html b/index.html index 2f707218..80828a33 100644 --- a/index.html +++ b/index.html @@ -77,75 +77,85 @@

    -
    -
    -
    -

    - Recline Data Explorer and Library
    - - A. Powerful data explorer using only javascript and html -
    - B. Suite of data components - grid, graphing and data connectors -
    - — All built on Backbone     -

    -
    -

    Recline is two things:

    -
      -
    • A Data Explorer combining a data grid, Google Refine-style data - transforms and visualizations all in lightweight javascript and html.
      • -
    • A simple but powerful library of extensible of data components - data - grid, graphing, and data connectors - which you can selectively use and - build on.
      • -
    -

    The Explorer can be used standalone (just download and use) or can be - embedded into your own site. Recline builds on the powerful but lightweight - Backbone framework making it extremely easy to extend and adapt. The - library's modular design mean means you only have to take what you - need.

    +
    +
    -

    Main Features

    -
      -
    • View and edit your data in a clean grid / table interface
      • -
    • Bulk update/clean your data using an easy scripting UI
      • -
    • Easily extensible with new Backends so you can connect to your - database or storage layer
      • -
    • Visualize data
      • -
    • Open-source, pure javascript and designed for integration -- so it is - easy to embed in other sites and applications
      • -
    • Built on the simple but powerful Backbone giving a - clean and robust design which is easy to extend
      • -
    • Properly designed model with clean separation of data and presentation
      • -
    • Componentized design means you use only what you need
      • -
    +
    +

    + Recline Data Explorer and Library
    + + A. Powerful data explorer using only javascript and html +
    + B. Suite of data components - grid, graphing and data connectors +
    + — All built on Backbone     +

    +
    -

    Screenshots

    -

    Recline Data Explorer Screenshot

    +

    Recline is two things:

    -

    Demo

    -

    For demo see the Data Explorer »

    +
      +
    • A Data Explorer combining a data grid, Google Refine-style data + transforms and visualizations all in lightweight javascript and html.
      • +
    • A simple but powerful library of extensible of data components - data + grid, graphing, and data connectors - which you can selectively use and build + on.
      • +
    -

    Data Explorer Documentation

    -

    Usage instructions are built into the Data Explorer - itself so no specific additional documentation is provided on usage.

    -

    To embed the data explorer in another site you can use a simple iframe - in your web page:

    - -

    Alternatively, you can initialize the explorer yourself from javascript. To see how - to do this just take at look at the Explorer's initialization javascript - in: app.js.

    +

    The Explorer can be used standalone (just download and use) or can be +embedded into your own site. Recline builds on the powerful but lightweight +Backbone framework making it extremely easy to extend and adapt. The library's +modular design mean means you only have to take what you need.

    + +

    Main Features

    +
      +
    • View and edit your data in a clean grid / table interface
      • +
    • Bulk update/clean your data using an easy scripting UI
      • +
    • Easily extensible with new Backends so you can connect to your + database or storage layer
      • +
    • Visualize data
      • +
    • Open-source, pure javascript and designed for integration -- so it is + easy to embed in other sites and applications
      • +
    • Built on the simple but powerful Backbone giving a + clean and robust design which is easy to extend
      • +
    • Properly designed model with clean separation of data and presentation
      • +
    • Componentized design means you use only what you need
      • +
    + +

    Screenshots

    +

    Recline Data Explorer Screenshot

    + +

    Demo

    +

    For demo see the Data Explorer »

    + +

    Data Explorer Documentation

    + +

    Usage instructions are built into the Data Explorer +itself so no specific additional documentation is provided on usage.

    + +

    To embed the data explorer in another site you can use a simple iframe in +your web page:

    + + + +

    Alternatively, you can initialize the explorer yourself from javascript. To +see how to do this just take at look at the Explorer's initialization +javascript in: app.js.

    -

    Library Documentation

    +

    Library Documentation

    -

    Examples

    -

    Note: A quick read through of the Concepts section will - likely be useful in understanding the details of the examples.

    -

    Note: for all the following examples you should have - included relevant Recline dependencies.

    -

    Simple in-memory dataset.

    - 
    +
    Examples
    
+
+
    Note: A quick read through of the Concepts section will
+likely be useful in understanding the details of the examples.
    
+
+
    Note: for all the following examples you should have
+included relevant Recline dependencies.
    
+
+
    Simple in-memory dataset.
    
+
     // Some data you have
 // Your data must be in the form of list of documents / rows
 // Each document/row is an Object with keys and values
@@ -170,7 +180,7 @@ var explorer = recline.View.DataExplorer({
 Backbone.history.start();
 
    
 
-    
    Creating a Dataset Explicitly with a Backend
    
+
    Creating a Dataset Explicitly with a Backend
    
 
     // Backend can be an instance or string id for a backend in the
 // recline.Model.backends registry
@@ -192,66 +202,79 @@ var dataset = recline.Model.Dataset({
 );
 
    
 
-    
    Concepts and Structure
    
-    
    Recline has a simple structure layered on top of the basic Model/View
-    distinction inherent in Backbone.
    
-    
-    
    Models: there are two main model objects:
    
-    
      
-      
    • Dataset: represents the dataset. Holds dataset info and a pointer to list of data items (Documents in our terminology) which it can load from the relevant Backend.
      • 
-      
    • Document: an individual data item (e.g. a row from a relational database or a spreadsheet, a document from from a document DB like CouchDB or MongoDB).
      • 
-    
    
-    
    More detail of how these work can be found in the Model source docs.
    
+
    Concepts and Structure
    
 
-    
    Backends connect Dataset and Documents to data
-    from a specific 'Backend' data source. They provide methods for loading and
-    saving Datasets and individuals Documents as well as for bulk loading via a
-    query API and doing bulk transforms on the backend.
    
-    
    A template Base class can be found in
-      the Backend base module of the source docs. It documents both the
-    relevant methods a Backend must have and (optionally) provides a base
-    'class' for inheritance. You can also find detailed examples of backend
-    implementations in the source documentation below.
    
-    
-    
    Views: complementing the model are various Views (you can also easily write your own). Each view holds a pointer to a Dataset:
    
-    
      
-      
    • DataExplorer: the parent view which manages the overall app and sets up sub views.
      • 
-      
    • DataGrid: the data grid view.
      • 
-      
    • FlotGraph: a simple graphing view using Flot.
      • 
-    
    
+
    Recline has a simple structure layered on top of the basic Model/View
+distinction inherent in Backbone.
    
 
-    
    Source Docs (via Docco)
    
-    
+
    Models: there are two main model objects:
    
+
      
+  
    • Dataset: represents the dataset.
+  Holds dataset info and a pointer to list of data items (Documents in our
+  terminology) which it can load from the relevant Backend.
      • 
+  
    • Document: an individual data item
+  (e.g. a row from a relational database or a spreadsheet, a document from from
+  a document DB like CouchDB or MongoDB).
      • 
+
    
 
-    
    Tests
    
-    
    Run the tests online.
    
+
    More detail of how these work can be found in the Model source docs.
    
 
-    
    History
    
-    
    Max Ogden was developing Recline as the frontend data browser and editor
-    for his http://datacouch.com/ project.
-    Meanwhile, Rufus Pollock and the CKAN team
-    at the Open Knowledge Foundation had been
-    working on a Data
-      Explorer for use in the DataHub
-    and CKAN software.
    
-    
    When they met up, they realized that they were pretty much working on
-    the same thing and so decided to join forces to produce the new Recline
-    Data Explorer.
    
-    
    The new project forked off Max's original recline
-      codebase combining some portions of the original Data Explorer.
-    However, it has been rewritten from the ground up using Backbone.
    
+
    Backends connect Dataset and Documents to data from a
+specific 'Backend' data source. They provide methods for loading and saving
+Datasets and individuals Documents as well as for bulk loading via a query API
+and doing bulk transforms on the backend.
    
+
+
    A template Base class can be found in the
+  Backend base module of the source docs. It documents both the relevant
+methods a Backend must have and (optionally) provides a base 'class' for
+inheritance. You can also find detailed examples of backend implementations in
+the source documentation below.
    
+
+
    Views: complementing the model are various Views (you can
+also easily write your own). Each view holds a pointer to a Dataset:
    
+
      
+  
    • DataExplorer: the parent view which manages the overall app and sets up
+  sub views.
      • 
+  
    • DataGrid: the data grid view.
      • 
+  
    • FlotGraph: a simple graphing view using Flot.
      • 
+
    
+
+
    Source Docs (via Docco)
    
+
+
+
    Tests
    
+
    Run the tests online.
    
+
+
    History
    
+
    Max Ogden was developing Recline as the frontend data browser and editor for
+his http://datacouch.com/ project.
+Meanwhile, Rufus Pollock and the CKAN team at
+the Open Knowledge Foundation had been working
+on a Data Explorer for use in
+the DataHub and CKAN software.
    
+
+
    When they met up, they realized that they were pretty much working on the
+same thing and so decided to join forces to produce the new Recline Data
+Explorer.
    
+
+
    The new project forked off Max's original recline
+  codebase combining some portions of the original Data Explorer.
+However, it has been rewritten from the ground up using Backbone.
    From 25ab4df892072be3fab5ad8276f6ad73ce942496 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Wed, 4 Apr 2012 10:54:41 +0100 Subject: [PATCH 7/8] [package.json][xs]: bump to 0.4a. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index be14f8df..80918ea8 100644 --- a/package.json +++ b/package.json @@ -13,5 +13,5 @@ }, "lib" : "src", "main" : "recline.js", - "version" : "0.3a" + "version" : "0.4a" } From 14bd9364db92001d21ab31307e09fbf93c379606 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Wed, 4 Apr 2012 10:59:05 +0100 Subject: [PATCH 8/8] [build][m]: build docs and latest version of library. --- docs/backend/base.html | 116 ++++++++++++++++++++++++------ docs/backend/dataproxy.html | 9 +-- docs/backend/elasticsearch.html | 35 +++++++--- docs/backend/gdocs.html | 6 +- docs/backend/localcsv.html | 120 ++++++++++++++++++++++++++++++++ docs/backend/memory.html | 92 ++++++++++++++++++++++-- docs/model.html | 66 +++++++++++++++--- docs/view-flot-graph.html | 114 ++++++++++++++++++------------ docs/view-grid.html | 31 ++++----- docs/view.html | 89 ++++++++++++++++++++--- index.html | 1 + recline.js | 76 +++++++++++++++----- 12 files changed, 607 insertions(+), 148 deletions(-) create mode 100644 docs/backend/localcsv.html diff --git a/docs/backend/base.html b/docs/backend/base.html index b4da1482..61eab0d5 100644 --- a/docs/backend/base.html +++ b/docs/backend/base.html @@ -1,37 +1,107 @@ - base.js

    base.js

    Recline Backends

    + base.js

    base.js

    Recline Backends

    Backends are connectors to backend data sources and stores

    -

    This is just the base module containing various convenience methods.

    		 
    this.recline = this.recline || {};
+
    This is just the base module containing a template Base class and convenience methods.
                 
    this.recline = this.recline || {};
 this.recline.Backend = this.recline.Backend || {};
 
 (function($, my) {

    Backbone.sync

    Override Backbone.sync to hand off to sync function in relevant backend

    		 
      Backbone.sync = function(method, model, options) {
     return model.backend.sync(method, model, options);
-  }

    wrapInTimeout

    + }

    recline.Backend.Base

    -

    Crude way to catch backend errors -Many of backends use JSONP and so will not get error messages and this is -a crude way to catch those errors.

    		 
      my.wrapInTimeout = function(ourFunction) {
-    var dfd = $.Deferred();
-    var timeout = 5000;
-    var timer = setTimeout(function() {
-      dfd.reject({
-        message: 'Request Error: Backend did not respond after ' + (timeout / 1000) + ' seconds'
+
    Base class for backends providing a template and convenience functions.
+You do not have to inherit from this class but even when not it does provide guidance on the functions you must implement.
    
+
+
    Note also that while this (and other Backends) are implemented as Backbone models this is just a convenience.
                 
      my.Base = Backbone.Model.extend({

    sync

    + +

    An implementation of Backbone.sync that will be used to override +Backbone.sync on operations for Datasets and Documents which are using this backend.

    + +

    For read-only implementations you will need only to implement read method +for Dataset models (and even this can be a null operation). The read method +should return relevant metadata for the Dataset. We do not require read support +for Documents because they are loaded in bulk by the query method.

    + +

    For backends supporting write operations you must implement update and delete support for Document objects.

    + +

    All code paths should return an object conforming to the jquery promise API.

    		 
        sync: function(method, model, options) {
+    },
+

    query

    + +

    Query the backend for documents returning them in bulk. This method will +be used by the Dataset.query method to search the backend for documents, +retrieving the results in bulk.

    + +

    @param {recline.model.Dataset} model: Dataset model.

    + +

    @param {Object} queryObj: object describing a query (usually produced by +using recline.Model.Query and calling toJSON on it).

    + +

    The structure of data in the Query object or +Hash should follow that defined in issue 34. +(Of course, if you are writing your own backend, and hence +have control over the interpretation of the query object, you +can use whatever structure you like).

    + +

    @returns {Promise} promise API object. The promise resolve method will +be called on query completion with a QueryResult object.

    + +

    A QueryResult has the following structure (modelled closely on +ElasticSearch - see this issue for more +details):

    + +
    +{
+  total: // (required) total number of results (can be null)
+  hits: [ // (required) one entry for each result document
+    {
+       _score:   // (optional) match score for document
+       _type: // (optional) document type
+       _source: // (required) document/row object
+    } 
+  ],
+  facets: { // (optional) 
+    // facet results (as per )
+  }
+}
+
    		 
        query: function(model, queryObj) {
+    },

    convenience method to convert simple set of documents / rows to a QueryResult

    		 
        _docsToQueryResult: function(rows) {
+      var hits = _.map(rows, function(row) {
+        return { _source: row };
       });
-    }, timeout);
-    ourFunction.done(function(arguments) {
-        clearTimeout(timer);
-        dfd.resolve(arguments);
-      })
-      .fail(function(arguments) {
-        clearTimeout(timer);
-        dfd.reject(arguments);
-      })
-      ;
-    return dfd.promise();
-  }
+      return {
+        total: null,
+        hits: hits
+      };
+    },

    _wrapInTimeout

    + +

    Convenience method providing a crude way to catch backend errors on JSONP calls. +Many of backends use JSONP and so will not get error messages and this is +a crude way to catch those errors.

    		 
        _wrapInTimeout: function(ourFunction) {
+      var dfd = $.Deferred();
+      var timeout = 5000;
+      var timer = setTimeout(function() {
+        dfd.reject({
+          message: 'Request Error: Backend did not respond after ' + (timeout / 1000) + ' seconds'
+        });
+      }, timeout);
+      ourFunction.done(function(arguments) {
+          clearTimeout(timer);
+          dfd.resolve(arguments);
+        })
+        .fail(function(arguments) {
+          clearTimeout(timer);
+          dfd.reject(arguments);
+        })
+        ;
+      return dfd.promise();
+    }
+  });
+
 }(jQuery, this.recline.Backend));
    \ No newline at end of file diff --git a/docs/backend/dataproxy.html b/docs/backend/dataproxy.html index d232ef91..303d2286 100644 --- a/docs/backend/dataproxy.html +++ b/docs/backend/dataproxy.html @@ -1,4 +1,4 @@ - dataproxy.js

    dataproxy.js 

    this.recline = this.recline || {};
+      dataproxy.js           
         
                          
                    
                            
                   dataproxy.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    this.recline = this.recline || {};
 this.recline.Backend = this.recline.Backend || {};
 
 (function($, my) {
                     		           
                                   
                                
                                    
                   
    DataProxy Backend
    
@@ -18,7 +18,7 @@
 
  • format: (optional) csv | xls (defaults to csv if not specified)
    • 
 
 
-
    Note that this is a read-only backend.
                     		                            
      my.DataProxy = Backbone.Model.extend({
+
    Note that this is a read-only backend.
                 
    		                            
      my.DataProxy = my.Base.extend({
     defaults: {
       dataproxy_url: 'http://jsonpdataproxy.appspot.com'
     },
@@ -35,6 +35,7 @@ retrieve)
                 
    		                            
    }
     },
     query: function(dataset, queryObj) {
+      var self = this;
       var base = this.get('dataproxy_url');
       var data = {
         url: dataset.get('url')
@@ -47,7 +48,7 @@ retrieve)
                 
    		                            
    , dataType: 'jsonp'
       });
       var dfd = $.Deferred();
-      my.wrapInTimeout(jqxhr).done(function(results) {
+      this._wrapInTimeout(jqxhr).done(function(results) {
         if (results.error) {
           dfd.reject(results.error);
         }
@@ -62,7 +63,7 @@ retrieve)
                 
    		                            
    });
           return tmp;
         });
-        dfd.resolve(_out);
+        dfd.resolve(self._docsToQueryResult(_out));
       })
       .fail(function(arguments) {
         dfd.reject(arguments);
diff --git a/docs/backend/elasticsearch.html b/docs/backend/elasticsearch.html
index 0b91fa81..bb338392 100644
--- a/docs/backend/elasticsearch.html
+++ b/docs/backend/elasticsearch.html
@@ -1,4 +1,4 @@
-      elasticsearch.js           
         
                          
                    
                            
                   elasticsearch.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    this.recline = this.recline || {};
+      elasticsearch.js           
         
                          
                    
                            
                   elasticsearch.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    this.recline = this.recline || {};
 this.recline.Backend = this.recline.Backend || {};
 
 (function($, my) {
                     		           
                                   
                                
                                    
                   
    ElasticSearch Backend
    
@@ -17,7 +17,7 @@ url
 
    This should point to the ES type url. E.G. for ES running on
 localhost:9200 with index twitter and type tweet it would be
    
 
-
    http://localhost:9200/twitter/tweet
                     		                            
      my.ElasticSearch = Backbone.Model.extend({
+
    http://localhost:9200/twitter/tweet
                 
    		                            
      my.ElasticSearch = my.Base.extend({
     _getESUrl: function(dataset) {
       var out = dataset.get('elasticsearch_url');
       if (out) return out;
@@ -37,7 +37,7 @@ localhost:9200 with index twitter and type tweet it would be
    
             dataType: 'jsonp'
           });
           var dfd = $.Deferred();
-          my.wrapInTimeout(jqxhr).done(function(schema) {
                     		           
                                   
                                
                                    
                   
    only one top level key in ES = the type so we can ignore it
                     		                            
                var key = _.keys(schema)[0];
+          this._wrapInTimeout(jqxhr).done(function(schema) {
                     		           
                                   
                                
                                    
                   
    only one top level key in ES = the type so we can ignore it
                     		                            
                var key = _.keys(schema)[0];
             var fieldData = _.map(schema[key].properties, function(dict, fieldName) {
               dict.id = fieldName;
               return dict;
@@ -74,6 +74,17 @@ localhost:9200 with index twitter and type tweet it would be
    
           }
         }
         delete out.q;
+      }
                     		           
                                   
                                
                                    
                   
    now do filters (note the plural)
                     		                            
          if (out.filters && out.filters.length) {
+        if (!out.filter) {
+          out.filter = {}
+        }
+        if (!out.filter.and) {
+          out.filter.and = [];
+        }
+        out.filter.and = out.filter.and.concat(out.filters);
+      }
+      if (out.filters != undefined) {
+        delete out.filters;
       }
       return out;
     },
@@ -86,14 +97,16 @@ localhost:9200 with index twitter and type tweet it would be
    
         data: data,
         dataType: 'jsonp'
       });
-      var dfd = $.Deferred();
                     		           
                                   
                                
                                    
                   
    TODO: fail case
                     		                            
          jqxhr.done(function(results) {
-        model.docCount = results.hits.total;
-        var docs = _.map(results.hits.hits, function(result) {
-          var _out = result._source;
-          _out.id = result._id;
-          return _out;
-        });
-        dfd.resolve(docs);
+      var dfd = $.Deferred();
                     		           
                                   
                                
                                    
                   
    TODO: fail case
                     		                            
          jqxhr.done(function(results) {
+        _.each(results.hits.hits, function(hit) {
+          if (!'id' in hit._source && hit._id) {
+            hit._source.id = hit._id;
+          }
+        })
+        if (results.facets) {
+          results.hits.facets = results.facets;
+        }
+        dfd.resolve(results.hits);
       });
       return dfd.promise();
     }
diff --git a/docs/backend/gdocs.html b/docs/backend/gdocs.html
index c058c6f5..10963ee7 100644
--- a/docs/backend/gdocs.html
+++ b/docs/backend/gdocs.html
@@ -1,4 +1,4 @@
-      gdocs.js           
         
                          
                    
                            
                   gdocs.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    this.recline = this.recline || {};
+      gdocs.js           
         
                          
                    
                            
                   gdocs.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    this.recline = this.recline || {};
 this.recline.Backend = this.recline.Backend || {};
 
 (function($, my) {
                     		           
                                   
                                
                                    
                   
    Google spreadsheet backend
    
@@ -14,7 +14,7 @@ var dataset = new recline.Model.Dataset({
   },
   'gdocs'
 );
-                 		                            
      my.GDoc = Backbone.Model.extend({
+
                 
    		                            
      my.GDoc = my.Base.extend({
     getUrl: function(dataset) {
       var url = dataset.get('url');
       if (url.indexOf('feeds/list') != -1) {
@@ -58,7 +58,7 @@ TODO: factor this out as a common method with other backends
                 _.each(_.zip(fields, d), function (x) { obj[x[0]] = x[1]; })
         return obj;
       });
-      dfd.resolve(objs);
+      dfd.resolve(this._docsToQueryResult(objs));
       return dfd;
     },
     gdocsToJavascript:  function(gdocsSpreadsheet) {
diff --git a/docs/backend/localcsv.html b/docs/backend/localcsv.html
new file mode 100644
index 00000000..1abf5bf3
--- /dev/null
+++ b/docs/backend/localcsv.html
@@ -0,0 +1,120 @@
+      localcsv.js           
         
                          
                    
                            
                   localcsv.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    this.recline = this.recline || {};
+this.recline.Backend = this.recline.Backend || {};
+
+(function($, my) {
+  my.loadFromCSVFile = function(file, callback) {
+    var metadata = {
+      id: file.name,
+      file: file
+    };
+    var reader = new FileReader();
                     		           
                                   
                                
                                    
                   
    TODO
                     		                            
        reader.onload = function(e) {
+      var dataset = my.csvToDataset(e.target.result);
+      callback(dataset);
+    };
+    reader.onerror = function (e) {
+      alert('Failed to load file. Code: ' + e.target.error.code);
+    }
+    reader.readAsText(file);
+  };
+
+  my.csvToDataset = function(csvString) {
+    var out = my.parseCSV(csvString);
+    fields = _.map(out[0], function(cell) {
+      return { id: cell, label: cell };
+    });
+    var data = _.map(out.slice(1), function(row) {
+      var _doc = {};
+      _.each(out[0], function(fieldId, idx) {
+        _doc[fieldId] = row[idx];
+      });
+      return _doc;
+    });
+    var dataset = recline.Backend.createDataset(data, fields);
+    return dataset;
+  }
                     		           
                                   
                                
                                    
                   
    Converts a Comma Separated Values string into an array of arrays.
+Each line in the CSV becomes an array.
    
+
+
    Empty fields are converted to nulls and non-quoted numbers are converted to integers or floats.
    
+
+
    @return The CSV parsed as an array
+@type Array
    
+
+
    @param {String} s The string to convert
+@param {Boolean} [trm=false] If set to True leading and trailing whitespace is stripped off of each non-quoted field as it is imported
    
+
+
    Heavily based on uselesscode's JS CSV parser (MIT Licensed):
+thttp://www.uselesscode.org/javascript/csv/
                     		                            
    	my.parseCSV= function(s, trm) {
                     		           
                                   
                                
                                    
                   
    Get rid of any trailing \n
                     		                            
    		s = chomp(s);
+
+		var cur = '', // The character we are currently processing.
+			inQuote = false,
+			fieldQuoted = false,
+			field = '', // Buffer for building up the current field
+			row = [],
+			out = [],
+			i,
+			processField;
+
+		processField = function (field) {
+			if (fieldQuoted !== true) {
                     		           
                                   
                                
                                    
                   
    If field is empty set to null
                     		                            
    				if (field === '') {
+					field = null;
                     		           
                                   
                                
                                    
                   
    If the field was not quoted and we are trimming fields, trim it
                     		                            
    				} else if (trm === true) {
+					field = trim(field);
+				}
                     		           
                                   
                                
                                    
                   
    Convert unquoted numbers to their appropriate types
                     		                            
    				if (rxIsInt.test(field)) {
+					field = parseInt(field, 10);
+				} else if (rxIsFloat.test(field)) {
+					field = parseFloat(field, 10);
+				}
+			}
+			return field;
+		};
+
+		for (i = 0; i < s.length; i += 1) {
+			cur = s.charAt(i);
                     		           
                                   
                                
                                    
                   
    If we are at a EOF or EOR
                     		                            
    			if (inQuote === false && (cur === ',' || cur === "\n")) {
+				field = processField(field);
                     		           
                                   
                                
                                    
                   
    Add the current field to the current row
                     		                            
    				row.push(field);
                     		           
                                   
                                
                                    
                   
    If this is EOR append row to output and flush row
                     		                            
    				if (cur === "\n") {
+					out.push(row);
+					row = [];
+				}
                     		           
                                   
                                
                                    
                   
    Flush the field buffer
                     		                            
    				field = '';
+				fieldQuoted = false;
+			} else {
                     		           
                                   
                                
                                    
                   
    If it's not a ", add it to the field buffer
                     		                            
    				if (cur !== '"') {
+					field += cur;
+				} else {
+					if (!inQuote) {
                     		           
                                   
                                
                                    
                   
    We are not in a quote, start a quote
                     		                            
    						inQuote = true;
+						fieldQuoted = true;
+					} else {
                     		           
                                   
                                
                                    
                   
    Next char is ", this is an escaped "
                     		                            
    						if (s.charAt(i + 1) === '"') {
+							field += '"';
                     		           
                                   
                                
                                    
                   
    Skip the next char
                     		                            
    							i += 1;
+						} else {
                     		           
                                   
                                
                                    
                   
    It's not escaping, so end quote
                     		                            
    							inQuote = false;
+						}
+					}
+				}
+			}
+		}
                     		           
                                   
                                
                                    
                   
    Add the last field
                     		                            
    		field = processField(field);
+		row.push(field);
+		out.push(row);
+
+		return out;
+	};
+
+	var rxIsInt = /^\d+$/,
+		rxIsFloat = /^\d*\.\d+$|^\d+\.\d*$/,
                     		           
                                   
                                
                                    
                   
    If a string has leading or trailing space,
+contains a comma double quote or a newline
+it needs to be quoted in CSV output
                     		                            
    		rxNeedsQuoting = /^\s|\s$|,|"|\n/,
+		trim = (function () {
                     		           
                                   
                                
                                    
                   
    Fx 3.1 has a native trim function, it's about 10x faster, use it if it exists
                     		                            
    			if (String.prototype.trim) {
+				return function (s) {
+					return s.trim();
+				};
+			} else {
+				return function (s) {
+					return s.replace(/^\s*/, '').replace(/\s*$/, '');
+				};
+			}
+		}());
+
+	function chomp(s) {
+		if (s.charAt(s.length - 1) !== "\n") {
                     		           
                                   
                                
                                    
                   
    Does not end with \n, just return string
                     		                            
    			return s;
+		} else {
                     		           
                                   
                                
                                    
                   
    Remove the \n
                     		                            
    			return s.substring(0, s.length - 1);
+		}
+	}
+
+
+}(jQuery, this.recline.Backend));
+
+
                     		           
                             
       
       
\ No newline at end of file
diff --git a/docs/backend/memory.html b/docs/backend/memory.html
index 8b9fe834..3f03bd6a 100644
--- a/docs/backend/memory.html
+++ b/docs/backend/memory.html
@@ -1,7 +1,42 @@
-      memory.js           
         
                          
                    
                            
                   memory.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    this.recline = this.recline || {};
+      memory.js           
         
                          my.FieldList=Backbone.Collection.extend({model:my.Field});return}varseries=this.createSeries();
-    varoptions=this.graphOptions[this.chartConfig.graphType];
+    varoptions=this.getGraphOptions(this.chartConfig.graphType);this.plot=$.plot(this.$graph,series,options);
-    if(this.chartConfig.graphTypein{'points':'','lines-and-points':''}){
-      this.setupTooltips();
-    }
      this.plot.resize();
      this.plot.setupGrid();
      this.plot.draw();
-   }
    varpreviousPoint=null;this.$graph.bind("plothover",function(event,pos,item){if(item){
-        if(previousPoint!=item.dataIndex){
-          previousPoint=item.dataIndex;
+        if(previousPoint!=item.datapoint){
+          previousPoint=item.datapoint;$("#flot-tooltip").remove();
-          varx=item.datapoint[0].toFixed(2),
-              y=item.datapoint[1].toFixed(2);
+          varx=item.datapoint[0];
+          vary=item.datapoint[1];vary=doc.get(field);if(typeofx==='string'){x=index;
+          }model:this.model.queryState});this.el.find('.header').append(queryEditor.el);
+    varqueryFacetEditor=newmy.FacetViewer({
+      model:this.model
+    });
+    this.el.find('.header').append(queryFacetEditor.el);},setupRouting:function(){
-    varself=this;}});
 
+my.FacetViewer=Backbone.View.extend({
+  className:'recline-facet-viewer well', 
+  template:' \
+    <a class="close js-hide" href="#">&times;</a> \
+    <div class="facets row"> \
+      <div class="span1"> \
+        <h3>Facets</h3> \
+      </div> \
+      {{#facets}} \
+      <div class="facet-summary span2 dropdown" data-facet="{{id}}"> \
+        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-chevron-down"></i> {{id}} {{label}}</a> \
+        <ul class="facet-items dropdown-menu"> \
+        {{#terms}} \
+          <li><input type="checkbox" class="facet-choice js-facet-filter" value="{{term}}" name="{{term}}" /> <label for="{{term}}">{{term}} ({{count}})</label></li> \
+        {{/terms}} \
+        </ul> \
+      </div> \
+      {{/facets}} \
+    </div> \
+  ',
 
-/* ========================================================== */query:parsed[2]||''}}
-}if(q&&q.length&&q[0]==='?'){q=q.slice(1);}
-  while(e=r.exec(q)){returnqueryString;}
 
+my.getNewHashForQueryString=function(queryParams){
+  varqueryPart=my.composeQueryString(queryParams);
+  if(window.location.hash){});},1000);}
-}
                    
                            
                   memory.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    this.recline = this.recline || {};
 this.recline.Backend = this.recline.Backend || {};
 
-(function($, my) {
                     		           
                                   
                                
                                    
                   
    Memory Backend - uses in-memory data
    
+(function($, my) {                 		           
                                   
                                
                                    
                   
    createDataset
    
+
+
    Convenience function to create a simple 'in-memory' dataset in one step.
    
+
+
    @param data: list of hashes for each document/row in the data ({key:
+value, key: value})
+@param fields: (optional) list of field hashes (each hash defining a hash
+as per recline.Model.Field). If fields not specified they will be taken
+from the data.
+@param metadata: (optional) dataset metadata - see recline.Model.Dataset.
+If not defined (or id not provided) id will be autogenerated.
                     		                            
      my.createDataset = function(data, fields, metadata) {
+    if (!metadata) {
+      var metadata = {};
+    }
+    if (!metadata.id) {
+      metadata.id = String(Math.floor(Math.random() * 100000000) + 1);
+    }
+    var backend = recline.Model.backends['memory'];
+    var datasetInfo = {
+      documents: data,
+      metadata: metadata
+    };
+    if (fields) {
+      datasetInfo.fields = fields;
+    } else {
+      if (data) {
+        datasetInfo.fields = _.map(data[0], function(value, key) {
+          return {id: key};
+        });
+      }
+    }
+    backend.addDataset(datasetInfo);
+    var dataset = new recline.Model.Dataset({id: metadata.id}, 'memory');
+    dataset.fetch();
+    return dataset;
+  };
                     		           
                                   
                                
                                    
                   
    Memory Backend - uses in-memory data
    
 
 
    To use it you should provide in your constructor data:
    
 
@@ -30,7 +65,7 @@
  var dataset = Dataset({id: 'my-id'}, 'memory');
  dataset.fetch();
  etc ...
- 
                     		                            
      my.Memory = Backbone.Model.extend({
+ 
                 
    		                            
      my.Memory = my.Base.extend({
     initialize: function() {
       this.datasets = {};
     },
@@ -76,19 +111,62 @@
       }
     },
     query: function(model, queryObj) {
+      var dfd = $.Deferred();
+      var out = {};
       var numRows = queryObj.size;
       var start = queryObj.from;
-      var dfd = $.Deferred();
-      results = this.datasets[model.id].documents;
                     		           
                                   
                                
                                    
                   
    not complete sorting!
                     		                            
          _.each(queryObj.sort, function(sortObj) {
+      results = this.datasets[model.id].documents;
+      _.each(queryObj.filters, function(filter) {
+        results = _.filter(results, function(doc) {
+          var fieldId = _.keys(filter.term)[0];
+          return (doc[fieldId] == filter.term[fieldId]);
+        });
+      });
                     		           
                                   
                                
                                    
                   
    not complete sorting!
                     		                            
          _.each(queryObj.sort, function(sortObj) {
         var fieldName = _.keys(sortObj)[0];
         results = _.sortBy(results, function(doc) {
           var _out = doc[fieldName];
           return (sortObj[fieldName].order == 'asc') ? _out : -1*_out;
         });
       });
-      var results = results.slice(start, start+numRows);
-      dfd.resolve(results);
+      out.facets = this._computeFacets(results, queryObj);
+      var total = results.length;
+      resultsObj = this._docsToQueryResult(results.slice(start, start+numRows));
+      _.extend(out, resultsObj);
+      out.total = total;
+      dfd.resolve(out);
       return dfd.promise();
+    },
+
+    _computeFacets: function(documents, queryObj) {
+      var facetResults = {};
+      if (!queryObj.facets) {
+        return facetsResults;
+      }
+      _.each(queryObj.facets, function(query, facetId) {
+        facetResults[facetId] = new recline.Model.Facet({id: facetId}).toJSON();
+        facetResults[facetId].termsall = {};
+      });
                     		           
                                   
                                
                                    
                   
    faceting
                     		                            
          _.each(documents, function(doc) {
+        _.each(queryObj.facets, function(query, facetId) {
+          var fieldId = query.terms.field;
+          var val = doc[fieldId];
+          var tmp = facetResults[facetId];
+          if (val) {
+            tmp.termsall[val] = tmp.termsall[val] ? tmp.termsall[val] + 1 : 1;
+          } else {
+            tmp.missing = tmp.missing + 1;
+          }
+        });
+      });
+      _.each(queryObj.facets, function(query, facetId) {
+        var tmp = facetResults[facetId];
+        var terms = _.map(tmp.termsall, function(count, term) {
+          return { term: term, count: count };
+        });
+        tmp.terms = _.sortBy(terms, function(item) {
                     		           
                                   
                                
                                    
                   
    want descending order
                     		                            
              return -item.count;
+        });
+        tmp.terms = tmp.terms.slice(0, 10);
+      });
+      return facetResults;
     }
   });
   recline.Model.backends['memory'] = new my.Memory();
diff --git a/docs/model.html b/docs/model.html
index 3c926946..98c17439 100644
--- a/docs/model.html
+++ b/docs/model.html
@@ -21,9 +21,11 @@ currently loaded for viewing (you update currentDocuments by calling query)
     }
     this.fields = new my.FieldList();
     this.currentDocuments = new my.DocumentList();
+    this.facets = new my.FacetList();
     this.docCount = null;
     this.queryState = new my.Query();
     this.queryState.bind('change', this.query);
+    this.queryState.bind('facet:add', this.query);
   },
                     		           
                                   
                                
                                    
                   
    query
    
 
 
    AJAX method with promise API to get documents from the backend.
    
@@ -33,18 +35,26 @@ updated by queryObj (if provided).
    
 
 
    Resulting DocumentList are used to reset this.currentDocuments and are
 also returned.
                     		                            
      query: function(queryObj) {
-    this.trigger('query:start');
     var self = this;
-    this.queryState.set(queryObj);
+    this.trigger('query:start');
+    var actualQuery = self._prepareQuery(queryObj);
     var dfd = $.Deferred();
-    this.backend.query(this, this.queryState.toJSON()).done(function(rows) {
-      var docs = _.map(rows, function(row) {
-        var _doc = new my.Document(row);
+    this.backend.query(this, actualQuery).done(function(queryResult) {
+      self.docCount = queryResult.total;
+      var docs = _.map(queryResult.hits, function(hit) {
+        var _doc = new my.Document(hit._source);
         _doc.backend = self.backend;
         _doc.dataset = self;
         return _doc;
       });
       self.currentDocuments.reset(docs);
+      if (queryResult.facets) {
+        var facets = _.map(queryResult.facets, function(facetResult, facetId) {
+          facetResult.id = facetId;
+          return new my.Facet(facetResult);
+        });
+        self.facets.reset(facets);
+      }
       self.trigger('query:done');
       dfd.resolve(self.currentDocuments);
     })
@@ -55,6 +65,14 @@ also returned.
                 
    		             
     return dfd.promise();
   },
 
+  _prepareQuery: function(newQueryObj) {
+    if (newQueryObj) {
+      this.queryState.set(newQueryObj);
+    }
+    var out = this.queryState.toJSON();
+    return out;
+  },
+
   toTemplateJSON: function() {
     var data = this.toJSON();
     data.docCount = this.docCount;
@@ -94,11 +112,41 @@ just pass a single argument representing id to the ctor
                     		
   
    
                         
                                   
                                
                                    
                   
    A Query object storing Dataset Query state
                     		                            
    my.Query = Backbone.Model.extend({
-  defaults: {
-    size: 100
-    , from: 0
+  defaults: function() {
+    return {
+      size: 100
+      , from: 0
+      , facets: {}
                     		           
                                   
                                
                                    
                   
    http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html 
+, filter: {}
+list of simple filters which will be add to 'add' filter of filter
                     		                            
          , filters: []
+    }
+  },
                     		           
                                   
                                
                                    
                   
    Set (update or add) a terms filter
+http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html
                     		                            
      addTermFilter: function(fieldId, value) {
+    var filters = this.get('filters');
+    var filter = { term: {} };
+    filter.term[fieldId] = value;
+    filters.push(filter);
+    this.set({filters: filters});
                     		           
                                   
                                
                                    
                   
    change does not seem to be triggered ...
                     		                            
        this.trigger('change');
+  },
+  addFacet: function(fieldId) {
+    var facets = this.get('facets');
                     		           
                                   
                                
                                    
                   
    Assume id and fieldId should be the same (TODO: this need not be true if we want to add two different type of facets on same field)
                     		                            
        if (_.contains(_.keys(facets), fieldId)) {
+      return;
+    }
+    facets[fieldId] = {
+      terms: { field: fieldId }
+    };
+    this.set({facets: facets}, {silent: true});
+    this.trigger('facet:add', this);
   }
-});
                     		           
                                   
                                
                                    
                   
    Backend registry
    
+});                 		           
                                   
                                
                                    
                   
    A Facet (Result)
                     		                            
    my.Facet = Backbone.Model.extend({
+  defaults: function() {
+    return {
+      _type: 'terms',
                     		           
                                   
                                
                                    
                   
    total number of tokens in the facet
                     		                            
          total: 0,
                     		           
                                   
                                
                                    
                   
    number of facet values not included in the returned facets
                     		                            
          other: 0,
                     		           
                                   
                                
                                    
                   
    number of documents which have no value for the field
                     		                            
          missing: 0,
                     		           
                                   
                                
                                    
                   
    term object ({term: , count: ...})
                     		                            
          terms: []
+    }
+  }
+});
                     		           
                                   
                                
                                    
                   
    A Collection/List of Facets
                     		                            
    my.FacetList = Backbone.Collection.extend({
+  model: my.Facet
+});
                     		           
                                   
                                
                                    
                   
    Backend registry
    
 
 
    Backends will register themselves by id into this registry
                     		                            
    my.backends = {};
 
diff --git a/docs/view-flot-graph.html b/docs/view-flot-graph.html
index cd3d6080..7ef5b8eb 100644
--- a/docs/view-flot-graph.html
+++ b/docs/view-flot-graph.html
@@ -138,11 +138,9 @@ could be simpler just to have a common template!
                 
    		
       
     
              
                                          
                                   
                                
                                    
                   
    create this.plot and cache it
+    this.setupTooltips();             
    		           
                                   
                                
                                    
                   
    create this.plot and cache it
    if (!this.plot) {
      this.plot = $.plot(this.$graph, series, options);
    } else {
@@ -151,42 +149,60 @@ could be simpler just to have a common template!
                     		                                         
      },
-
-  graphOptions: { 
-    lines: {
-       series: { 
-         lines: { show: true }
-       }
-    }
-    , points: {
-      series: {
-        points: { show: true }
-      },
-      grid: { hoverable: true, clickable: true }
-    }
-    , 'lines-and-points': {
-      series: {
-        points: { show: true },
-        lines: { show: true }
-      },
-      grid: { hoverable: true, clickable: true }
-    }
-    , bars: {
-      series: {
-        lines: {show: false},
-        bars: {
-          show: true,
-          barWidth: 1,
-          align: "left",
-          fill: true
+   }
                 
    		                            
      },
                     		           
                                   
                                
                                    
                   
    needs to be function as can depend on state
                     		                            
      getGraphOptions: function(typeId) { 
+    var self = this;
                     		           
                                   
                                
                                    
                   
    special tickformatter to show labels rather than numbers
                     		                            
        var tickFormatter = function (val) {
+      if (self.model.currentDocuments.models[val]) {
+        var out = self.model.currentDocuments.models[val].get(self.chartConfig.group);
                     		           
                                   
                                
                                    
                   
    if the value was in fact a number we want that not the 
                     		                            
            if (typeof(out) == 'number') {
+          return val;
+        } else {
+          return out;
+        }
+      }
+      return val;
+    }
                     		           
                                   
                                
                                    
                   
    TODO: we should really use tickFormatter and 1 interval ticks if (and
+only if) x-axis values are non-numeric
+However, that is non-trivial to work out from a dataset (datasets may
+have no field type info). Thus at present we only do this for bars.
                     		                            
        var options = { 
+      lines: {
+         series: { 
+           lines: { show: true }
+         }
+      }
+      , points: {
+        series: {
+          points: { show: true }
+        },
+        grid: { hoverable: true, clickable: true }
+      }
+      , 'lines-and-points': {
+        series: {
+          points: { show: true },
+          lines: { show: true }
+        },
+        grid: { hoverable: true, clickable: true }
+      }
+      , bars: {
+        series: {
+          lines: {show: false},
+          bars: {
+            show: true,
+            barWidth: 1,
+            align: "center",
+            fill: true,
+            horizontal: true
+          }
+        },
+        grid: { hoverable: true, clickable: true },
+        yaxis: {
+          tickSize: 1,
+          tickLength: 1,
+          tickFormatter: tickFormatter,
+          min: -0.5,
+          max: self.model.currentDocuments.length - 0.5
         }
-      },
-      xaxis: {
-        tickSize: 1,
-        tickLength: 1,
       }
     }
+    return options[typeId];
   },
 
   setupTooltips: function() {
@@ -207,12 +223,17 @@ could be simpler just to have a common template!
                 
    		
        
          
                     
           
                                              
                                   
                                
                                    
                   
    convert back from 'index' value on x-axis (e.g. in cases where non-number values)
                     		                            
              if (self.model.currentDocuments.models[x]) {
+            x = self.model.currentDocuments.models[x].get(self.chartConfig.group);
+          } else {
+            x = x.toFixed(2);
+          }
+          y = y.toFixed(2);
           
           var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
             group: self.chartConfig.group,
@@ -241,14 +262,17 @@ could be simpler just to have a common template!
                 
    		
              
                
                                       
                                   
                                
                                    
                   
    horizontal bar chart
                     		                            
              if (self.chartConfig.graphType == 'bars') {
+            points.push([y, x]);
+          } else {
+            points.push([x, y]);
           }
-          points.push([x, y]);
         });
         series.push({data: points, label: field});
       });
     }
     return series;
-  },
                     		           
                                   
                                
                                    
                   
    Public: Adds a new empty series select box to the editor.
    
+  },                 		           
                                   
                                
                                    
                   
    Public: Adds a new empty series select box to the editor.
    
 
 
    All but the first select box will have a remove button that allows them
 to be removed.
    
@@ -264,7 +288,7 @@ to be removed.
    
     label.append(' [<a href="#remove" class="action-remove-series">Remove</a>]');
     label.find('span').text(String.fromCharCode(this.$series.length + 64));
     return this;
-  },                 		           
                                   
                                
                                    
                   
    Public: Removes a series list item from the editor.
    
+  },                 		           
                                   
                                
                                    
                   
    Public: Removes a series list item from the editor.
    
 
 
    Also updates the labels of the remaining series elements.
                     		                            
      removeSeries: function (e) {
     e.preventDefault();
@@ -282,7 +306,7 @@ to be removed.
    
 
   toggleHelp: function() {
     this.el.find('.editor-info').toggleClass('editor-hide-info');
-  },
                     		           
                                   
                                
                                    
                   
    Private: Resets the series property to reference the select elements.
    
+  },                 		           
                                   
                                
                                    
                   
    Private: Resets the series property to reference the select elements.
    
 
 
    Returns itself.
                     		                            
      _updateSeries: function () {
     this.$series  = this.el.find('.editor-series select');
diff --git a/docs/view-grid.html b/docs/view-grid.html
index f5472749..eb67d2e1 100644
--- a/docs/view-grid.html
+++ b/docs/view-grid.html
@@ -64,21 +64,16 @@ Column and row menus
                 
    		             
     e.preventDefault();
     var actions = {
       bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.state.currentColumn}) },
+      facet: function() { 
+        self.model.queryState.addFacet(self.state.currentColumn);
+      },
       transform: function() { self.showTransformDialog('transform') },
       sortAsc: function() { self.setColumnSort('asc') },
       sortDesc: function() { self.setColumnSort('desc') },
       hideColumn: function() { self.hideColumn() },
-      showColumn: function() { self.showColumn(e) },                        
                                   
                                
                                    
                   
    TODO: Delete or re-implement ...
                     		                            
          csv: function() { window.location.href = app.csvUrl },
-      json: function() { window.location.href = "_rewrite/api/json" },
-      urlImport: function() { showDialog('urlImport') },
-      pasteImport: function() { showDialog('pasteImport') },
-      uploadImport: function() { showDialog('uploadImport') },
                     		           
                                   
                                
                                    
                   
    END TODO
                     		                            
          deleteColumn: function() {
-        var msg = "Are you sure? This will delete '" + self.state.currentColumn + "' from all documents.";
                     		           
                                   
                                
                                    
                   
    TODO:
                     		                            
            alert('This function needs to be re-implemented');
-        return;
-        if (confirm(msg)) costco.deleteColumn(self.state.currentColumn);
-      },
+      showColumn: function() { self.showColumn(e) },
       deleteRow: function() {
-        var doc = _.find(self.model.currentDocuments.models, function(doc) {
                     		           
                                   
                                
                                    
                   
    important this is == as the currentRow will be string (as comes
+        var doc = _.find(self.model.currentDocuments.models, function(doc) {             
    		           
                                   
                                
                                    
                   
    important this is == as the currentRow will be string (as comes
 from DOM) while id may be int
                     		                            
              return doc.id == self.state.currentRow
         });
         doc.destroy().then(function() { 
@@ -137,7 +132,7 @@ from DOM) while id may be int
                 
    		             showColumn: function(e) {
     this.hiddenFields = _.without(this.hiddenFields, $(e.target).data('column'));
     this.render();
-  },                        
                                   
                                
                                    
                   
    ======================================================
    
+  },                 		           
                                   
                                
                                    
                   
    ======================================================
    
 
 
    Templating
                     		                            
      template: ' \
     <table class="data-table table-striped table-condensed" cellspacing="0"> \
@@ -157,12 +152,12 @@ from DOM) while id may be int
                 
    		                         <th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}"> \
               <div class="btn-group column-header-menu"> \
                 <a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
-                <ul class="dropdown-menu data-table-menu"> \
-                  <li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
-                  <li class="write-op"><a data-action="deleteColumn" href="JavaScript:void(0);">Delete this column</a></li> \
+                <ul class="dropdown-menu data-table-menu pull-right"> \
+                  <li><a data-action="facet" href="JavaScript:void(0);">Facet on this Field</a></li> \
                   <li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \
                   <li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
                   <li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
+                  <li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
                 </ul> \
               </div> \
               <span class="column-header-name">{{label}}</span> \
@@ -176,7 +171,7 @@ from DOM) while id may be int
                     		             toTemplateJSON: function() {
     var modelData = this.model.toJSON()
-    modelData.notEmpty = ( this.fields.length > 0 )                        
                                   
                                
                                    
                   
    TODO: move this sort of thing into a toTemplateJSON method on Dataset?
                     		                            
        modelData.fields = _.map(this.fields, function(field) { return field.toJSON() });
+    modelData.notEmpty = ( this.fields.length > 0 )
                     		           
                                   
                                
                                    
                   
    TODO: move this sort of thing into a toTemplateJSON method on Dataset?
                     		                            
        modelData.fields = _.map(this.fields, function(field) { return field.toJSON() });
     return modelData;
   },
   render: function() {
@@ -192,7 +187,7 @@ from DOM) while id may be int
                 
    		             var newView = new my.DataGridRow({
           model: doc,
           el: tr,
-          fields: self.fields,
+          fields: self.fields
         },
         self.options
         );
@@ -201,7 +196,7 @@ from DOM) while id may be int
                     		             this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0));
     return this;
   }
-});                        
                                   
                                
                                    
                   
    DataGridRow View for rendering an individual document.
    
+});                 		           
                                   
                                
                                    
                   
    DataGridRow View for rendering an individual document.
    
 
 
    Since we want this to update in place it is up to creator to provider the element to attach to.
    
 
@@ -284,7 +279,7 @@ var row = new DataGridRow({
     var html = $.mustache(this.template, this.toTemplateJSON());
     $(this.el).html(html);
     return this;
-  },                 		           
                                   
                                
                                    
                   
    ===================
+  },             
    		           
                                   
                                
                                    
                   
    ===================
 Cell Editor methods
                     		                            
      onEditClick: function(e) {
     var editing = this.el.find('.data-table-cell-editor-editor');
     if (editing.length > 0) {
diff --git a/docs/view.html b/docs/view.html
index 8e0c77f3..daf29400 100644
--- a/docs/view.html
+++ b/docs/view.html
@@ -108,7 +108,8 @@ FlotGraph subview.
                 
    		             
         self.el.find('.doc-count').text(self.model.docCount || 'Unknown');
         my.notify('Data loaded', {category: 'success'});                        
                                   
                                
                                    
                   
    update navigation
                     		                            
            var qs = my.parseHashQueryString();
         qs['reclineQuery'] = JSON.stringify(self.model.queryState.toJSON());
-        my.setHashQueryString(qs);
+        var out = my.getNewHashForQueryString(qs);
+        self.router.navigate(out);
       });
     this.model.bind('query:fail', function(error) {
         my.clearNotifications();
@@ -158,11 +159,15 @@ note this.model and dataset returned are the same
                 
    		
        
     
          
   
 
                                
                                   
                                
                                    
                   
    Default route
                     		                            
        this.router.route('', this.pageViews[0].id, function() {
-      self.updateNav(self.pageViews[0].id);
+    var self = this;
                     		           
                                   
                                
                                    
                   
    Default route
                     		                            
        this.router.route(/^(\?.*)?$/, this.pageViews[0].id, function(queryString) {
+      self.updateNav(self.pageViews[0].id, queryString);
     });
     $.each(this.pageViews, function(idx, view) {
       self.router.route(/^([^?]+)(\?.*)?/, 'view', function(viewId, queryString) {
@@ -261,8 +266,62 @@ note this.model and dataset returned are the same
                 
    		
   
                             
                                   
                                
                                    
                   
    Miscellaneous Utilities
                     		                            
    var urlPathRegex = /^([^?]+)(\?.*)?/;
                     		           
                                   
                                
                                    
                   
    Parse the Hash section of a URL into path and query string
                     		                            
    my.parseHashUrl = function(hashUrl) {
+  events: {
+    'click .js-hide': 'onHide',
+    'change .js-facet-filter': 'onFacetFilter'
+  },
+  initialize: function(model) {
+    _.bindAll(this, 'render');
+    this.el = $(this.el);
+    this.model.facets.bind('all', this.render);
+    this.model.fields.bind('all', this.render);
+    this.render();
+  },
+  render: function() {
+    var tmplData = {
+      facets: this.model.facets.toJSON(),
+      fields: this.model.fields.toJSON()
+    };
+    var templated = $.mustache(this.template, tmplData);
+    this.el.html(templated);
                     		           
                                   
                                
                                    
                   
    are there actually any facets to show?
                     		                            
        if (this.model.facets.length > 0) {
+      this.el.show();
+    } else {
+      this.el.hide();
+    }
+  },
+  onHide: function(e) {
+    e.preventDefault();
+    this.el.hide();
+  },
+  onFacetFilter: function(e) {
                     		           
                                   
                                
                                    
                   
    todo: uncheck
                     		                            
        var $checkbox = $(e.target);
+    var fieldId = $checkbox.closest('.facet-summary').attr('data-facet');
+    var value = $checkbox.val();
+    this.model.queryState.addTermFilter(fieldId, value);
+  }
+});
+
+/* ========================================================== */
                     		           
                                   
                                
                                    
                   
    Miscellaneous Utilities
                     		                            
    var urlPathRegex = /^([^?]+)(\?.*)?/;
                     		           
                                   
                                
                                    
                   
    Parse the Hash section of a URL into path and query string
                     		                            
    my.parseHashUrl = function(hashUrl) {
   var parsed = urlPathRegex.exec(hashUrl);
   if (parsed == null) {
     return {};
@@ -272,7 +331,7 @@ note this.model and dataset returned are the same
                 
    		
          
     
                           
                                   
                                
                                    
                   
    Parse a URL query string (?xyz=abc...) into a dictionary.
                     		                            
    my.parseQueryString = function(q) {
+}
                     		           
                                   
                                
                                    
                   
    Parse a URL query string (?xyz=abc...) into a dictionary.
                     		                            
    my.parseQueryString = function(q) {
   if (!q) {
     return {};
   }
@@ -285,13 +344,13 @@ note this.model and dataset returned are the same
                 
    		
           
       
                               
                                   
                                
                                    
                   
    TODO: have values be array as query string allow repetition of keys
                     		                            
        urlParams[d(e[1])] = d(e[2]);
+  while (e = r.exec(q)) {
                     		           
                                   
                                
                                    
                   
    TODO: have values be array as query string allow repetition of keys
                     		                            
        urlParams[d(e[1])] = d(e[2]);
   }
   return urlParams;
-}
                     		           
                                   
                                
                                    
                   
    Parse the query string out of the URL hash
                     		                            
    my.parseHashQueryString = function() {
+}
                     		           
                                   
                                
                                    
                   
    Parse the query string out of the URL hash
                     		                            
    my.parseHashQueryString = function() {
   q = my.parseHashUrl(window.location.hash).query;
   return my.parseQueryString(q);
-}
                     		           
                                   
                                
                                    
                   
    Compse a Query String
                     		                            
    my.composeQueryString = function(queryParams) {
+}
                     		           
                                   
                                
                                    
                   
    Compse a Query String
                     		                            
    my.composeQueryString = function(queryParams) {
   var queryString = '?';
   var items = [];
   $.each(queryParams, function(key, value) {
@@ -301,9 +360,17 @@ note this.model and dataset returned are the same
                 
    		
    
                                 
                                   
                                
                                    
                   
    slice(1) to remove # at start
                     		                            
        return window.location.hash.split('?')[0].slice(1) + queryPart;
+  } else {
+    return queryPart;
+  }
+}
+
 my.setHashQueryString = function(queryParams) {
-  window.location.hash = window.location.hash.split('?')[0] + my.composeQueryString(queryParams);
-}
                     		           
                                   
                                
                                    
                   
    notify
    
+  window.location.hash = my.getNewHashForQueryString(queryParams);
+}                 		           
                                   
                                
                                    
                   
    notify
    
 
 
    Create a notification (a div.alert in div.alert-messsages) using provide messages and options. Options are:
    
 
@@ -334,7 +401,7 @@ note this.model and dataset returned are the same
                     		
       
      
                           
                                   
                                
                                    
                   
    clearNotifications
    
+}                 		           
                                   
                                
                                    
                   
    clearNotifications
    
 
 
    Clear all existing notifications
                     		                            
    my.clearNotifications = function() {
   var $notifications = $('.data-explorer .alert-messages .alert');
diff --git a/index.html b/index.html
index 80828a33..a246a01f 100644
--- a/index.html
+++ b/index.html
@@ -252,6 +252,7 @@ also easily write your own). Each view holds a pointer to a Dataset:
    
   
  • Backend: ElasticSearch
    • 
   
  • Backend: DataProxy (CSV and XLS on the Web)
    • 
   
  • Backend: Google Docs (Spreadsheet)
    • 
+  
  • Backend: Local CSV file
    • 
 
 
 
    Tests
    
diff --git a/recline.js b/recline.js
index ef842239..73860da4 100644
--- a/recline.js
+++ b/recline.js
@@ -199,14 +199,27 @@ my.FieldList = Backbone.Collection.extend({
 
 // ## A Query object storing Dataset Query state
 my.Query = Backbone.Model.extend({
-  defaults: {
-    size: 100
-    , from: 0
-    , facets: {}
+  defaults: function() {
+    return {
+      size: 100
+      , from: 0
+      , facets: {}
+      // http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html 
+      // , filter: {}
+      // list of simple filters which will be add to 'add' filter of filter
+      , filters: []
+    }
   },
   // Set (update or add) a terms filter
   // http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html
-  setFilter: function(fieldId, values) {
+  addTermFilter: function(fieldId, value) {
+    var filters = this.get('filters');
+    var filter = { term: {} };
+    filter.term[fieldId] = value;
+    filters.push(filter);
+    this.set({filters: filters});
+    // change does not seem to be triggered ...
+    this.trigger('change');
   },
   addFacet: function(fieldId) {
     var facets = this.get('facets');
@@ -225,16 +238,18 @@ my.Query = Backbone.Model.extend({
 
 // ## A Facet (Result)
 my.Facet = Backbone.Model.extend({
-  defaults: {
-    _type: 'terms',
-    // total number of tokens in the facet
-    total: 0,
-    // number of facet values not included in the returned facets
-    other: 0,
-    // number of documents which have no value for the field
-    missing: 0,
-    // term object ({term: , count: ...})
-    terms: []
+  defaults: function() {
+    return {
+      _type: 'terms',
+      // total number of tokens in the facet
+      total: 0,
+      // number of facet values not included in the returned facets
+      other: 0,
+      // number of documents which have no value for the field
+      missing: 0,
+      // term object ({term: , count: ...})
+      terms: []
+    }
   }
 });
 
@@ -1589,7 +1604,7 @@ my.FacetViewer = Backbone.View.extend({
          {{id}} {{label}} \
         
       \
         {{#terms}} \
-          
    •  
      •  \
+          
    •  
      •  \
         {{/terms}} \
         
     \
       
     \
@@ -1598,7 +1613,8 @@ my.FacetViewer = Backbone.View.extend({
   ',
 
   events: {
-    'click .js-hide': 'onHide'
+    'click .js-hide': 'onHide',
+    'change .js-facet-filter': 'onFacetFilter'
   },
   initialize: function(model) {
     _.bindAll(this, 'render');
@@ -1624,6 +1640,13 @@ my.FacetViewer = Backbone.View.extend({
   onHide: function(e) {
     e.preventDefault();
     this.el.hide();
+  },
+  onFacetFilter: function(e) {
+    // todo: uncheck
+    var $checkbox = $(e.target);
+    var fieldId = $checkbox.closest('.facet-summary').attr('data-facet');
+    var value = $checkbox.val();
+    this.model.queryState.addTermFilter(fieldId, value);
   }
 });
 
@@ -2020,6 +2043,19 @@ this.recline.Backend = this.recline.Backend || {};
         }
         delete out.q;
       }
+      // now do filters (note the *plural*)
+      if (out.filters && out.filters.length) {
+        if (!out.filter) {
+          out.filter = {}
+        }
+        if (!out.filter.and) {
+          out.filter.and = [];
+        }
+        out.filter.and = out.filter.and.concat(out.filters);
+      }
+      if (out.filters != undefined) {
+        delete out.filters;
+      }
       return out;
     },
     query: function(model, queryObj) {
@@ -2472,6 +2508,12 @@ this.recline.Backend = this.recline.Backend || {};
       var numRows = queryObj.size;
       var start = queryObj.from;
       results = this.datasets[model.id].documents;
+      _.each(queryObj.filters, function(filter) {
+        results = _.filter(results, function(doc) {
+          var fieldId = _.keys(filter.term)[0];
+          return (doc[fieldId] == filter.term[fieldId]);
+        });
+      });
       // not complete sorting!
       _.each(queryObj.sort, function(sortObj) {
         var fieldName = _.keys(sortObj)[0];