Modifications for our main app of es-backbone.js between 0.1 and 0.2 of the es-backbone.js lib. I haven't had time to update the sample code in the lib, so hopefully this diff of our application helps show how to use what has changed.

gistfile1.diff

Index: wpes-mgs-p2.css
===================================================================
--- wpes-mgs-p2.css  (revision 53507)
+++ wpes-mgs-p2.css	(working copy)
@@ -13,7 +13,6 @@
 
 div#wpes-p2-header {
 	border-bottom: 1px solid #ccc;
-	padding: 20px 30px;
 }
 div#wpes-p2-left-col, div#wpes-p2-center-col, div#wpes-p2-right-col {
 	box-sizing: border-box;
@@ -22,11 +21,10 @@
 	-ms-box-sizing:border-box;
 }
 div#wpes-p2-left-col {
-	width: 25%;
-	padding: 20px 30px;
+	width: 0%;
+	padding: 20px 0px 0px 0px;
 	display: block;
 	float: left;
-	border-right: 1px solid #ccc;
 }
 div#wpes-p2-center-col {
 	width: 65%;
@@ -35,12 +33,54 @@
 }
 
 div#wpes-p2-right-col {
-	width: 10%;
+	width: 35%;
 	padding: 20px 30px;
 	display: block;
 	float: left;
+	border-left: 1px solid #ccc;
 }
 
+/* Filters */
+div.wpes-p2-filter,
+div#wpes-p2-date-range {
+	width: 100%;
+}
+.wpes-p2-filter:after {
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+}
+#wpes-p2-right-col br {
+	clear: both;
+}
+div.wpes-p2-filter input.esbb-filter-terms,
+div.wpes-p2-filter div.esbb-filter-terms {
+	width: 75%;
+	float: right;
+	margin-right: 10px;
+	margin-bottom: 5px;
+	overflow: visible;
+}
+div#wpes-p2-date-range div.esbb-date-range-input {
+	width: 70%;
+	float: right;
+	margin-right: 10px;
+	margin-bottom: 5px;
+	overflow: visible;
+}
+div.wpes-p2-filter div.esbb-filter-header,
+div#wpes-p2-date-range div.esbb-date-range-header {
+	float: left;
+}
+
+span#wpes-p2-timeline-tip {
+	color: #BABABA;
+	font-size: 12px;
+	float: right;
+}
+
 a.esbb-search-button {
 	border: 1px solid #CCC;
 	border-radius: 12px;
@@ -80,7 +120,12 @@
 #wpes-p2-search-filters div.select2-container {
 	vertical-align: middle;
 }
-#wpes-p2-search-results h3 {
+#wpes-p2-sorter {
+	font-size: 12px;
+}
+#wpes-p2-search-results h4 {
+	color: #BABABA;
+	font-size: 12px;
 	margin-bottom: 3em;
 }
 .esbb-result {
@@ -88,10 +133,15 @@
 	margin-bottom: 3em;
 }
 .esbb-result>.esbb-result-title>a {
+	color: #39C;
+	font-size: 14px;
 	font-weight: bold;
-	font-size: 1.17em;
 	display: block;
 }
+span.esbb-result-site {
+	font-size: 12px;
+	color: #999;
+}
 
 div#wpes-p2-left-col li {
 	font-size: 90%;
@@ -106,7 +156,7 @@
 }
 
 div.esbb-timeline {
-	width: 600px;
+	width: 300px;
 	height: 400px;
 }
 
@@ -145,3 +195,15 @@
 table.esbb-facet-selector-table td.esbb-count {
 	font-size: 90%;
 }
+
+/* Faceting Display */
+
+div#wpes-p2-right-col h4 {
+	background-color: #f5f5f5;
+	border-top: 1px solid #333333;
+	width: 100%;
+	padding: 3px 3px 3px 3px;
+	font-style: bold;
+	-webkit-margin-before: 0.25em;
+	-webkit-margin-after: 0.25em;
+}
Index: js/wpes-p2-view.js
===================================================================
--- js/wpes-p2-view.js	(revision 53507)
+++ js/wpes-p2-view.js	(working copy)
@@ -5,29 +5,54 @@
 	query: null,
 	template: '\
 		<div id="{{prefix}}-header">\
-			<div id="{{prefix}}-search-url"></div>\
-			<div id="{{prefix}}-search-bar"></div>\
-			<div id="{{prefix}}-search-filters"></div>\
-			<div id="{{prefix}}-date-range"></div>\
 		</div>\
 		<div id="{{prefix}}-left-col">\
-			<h3>Authors</h3><div id="{{prefix}}-author-pie" class="esbb-pie"></div>\
-			<h3>Sites</h3><div id="{{prefix}}-site-pie" class="esbb-pie"></div>\
-			<div id="{{prefix}}-tag-selector"></div>\
-			<h3>Type</h3><div id="{{prefix}}-type-pie" class="esbb-pie"></div>\
 		</div>\
 		<div id="{{prefix}}-center-col">\
-			<div id="{{prefix}}-timeline" class="esbb-timeline"></div>\
+			<div id="{{prefix}}-search-bar"></div>\
+			<div id="{{prefix}}-sorter"></div>\
 			<div id="{{prefix}}-search-results"></div>\
 		</div>\
 		<div id="{{prefix}}-right-col">\
-			<div id="{{prefix}}-images"></div>\
+			<h4>Filters</h4>\
+			<div id="{{prefix}}-filters">\
+				<div id="{{prefix}}-title-filter" class="{{prefix}}-filter"></div>\
+				<div id="{{prefix}}-author-filter" class="{{prefix}}-filter"></div>\
+				<div id="{{prefix}}-site-filter" class="{{prefix}}-filter"></div>\
+				<div id="{{prefix}}-people-filter" class="{{prefix}}-filter"></div>\
+				<div id="{{prefix}}-type-filter" class="{{prefix}}-filter"></div>\
+				<div id="{{prefix}}-tag-filter" class="{{prefix}}-filter"></div>\
+				<div id="{{prefix}}-content-filter" class="{{prefix}}-filter"></div>\
+				<div id="{{prefix}}-date-range"></div>\
+			</div>\
+			<br />\
+			<h4>Date Histogram <span id="{{prefix}}-timeline-tip">Drag to select date range</span></h4>\
+			<div id="{{prefix}}-timeline" class="esbb-timeline"></div>\
+			<div id="{{prefix}}-author-selector"></div>\
+			<div id="{{prefix}}-site-selector"></div>\
+			<div id="{{prefix}}-type-selector"></div>\
+			<div id="{{prefix}}-tag-selector"></div>\
 		</div>\
 	',
 
+	templateResults: '\
+		<h4>{{total}} Results</h4>\
+		{{#hits}}\
+		<p class="esbb-result"> \
+			<span class="esbb-result-title">\
+				<a href="{{fields.url}}">{{#commentString}}{{fields.type}}{{/commentString}}{{fields.title}} &#8212;\
+				{{fields.user}}</a></span>\
+			<span class="esbb-result-site">{{fields.blogname}} &#8212; {{fields.date}} \
+				<a href="mlt.php?id={{_id}}&idx=p2" style="color: #999;">More Like This</a></span><br />\
+			{{{highlight.content}}}\
+		</p>\
+		{{/hits}}\
+	',
+
 	initialize: function() {
 		this.query = this.options.query;
 		_.bindAll( this, 'render' );
 		this.render();
 	},
 	
@@ -42,13 +67,9 @@
 		new esbbSearchBarView( { 
 			model: this.query,
 			el: '#' + this.options.id_prefix + '-search-bar',
-			headerName: 'P2 Faceted Search'
+			headerName: '',
+			buttonText: 'Refine Search'
 		} );
-		new esbbSearchFilterSelectView( { 
-			model: this.query, 
-			el: '#' + this.options.id_prefix + '-search-filters',
-			avail_fields: [ 'title:', 'content:', 'tag:', 'author:', 'site:', 'blogname:', 'type:', 'has:image', 'has:link', 'has:mention', 'has:video' ]
-		} );
 		new esbbSearchDateRangePickerView( { 
 			model: this.query,
 			el: '#' + this.options.id_prefix + '-date-range',
@@ -58,32 +79,118 @@
 
 		new esbbSearchResultsView( { 
 			model: this.model, 
-			el: '#' + this.options.id_prefix + '-search-results' 
+			queryModel: this.query,
+			headerName: '',
+			template: this.templateResults,
+			el: '#' + this.options.id_prefix + '-search-results',
+			default_data: {
+				commentString: function() {
+					return function( val, render ) {
+						return ( val == 'comment' ) ? '[comment] ' : '';
+					}
+				}
+			}
 		} );
+
+		new esbbSortView( {
+			model: this.query, 
+			headerName: ' ', 
+			sorts: [ 
+				{
+					name: 'Most Relevant', 
+					data:  [
+        		"_score"
+					]
+				},
+				{
+					name: 'Oldest First', 
+					data:  [
+        		{ "date" : {"order" : "asc"} },
+        		"_score"
+					]
+				},
+				{
+					name: 'Newest First', 
+					data:  [
+        		{ "date" : {"order" : "desc"} },
+        		"_score"
+					]
+				}
+			 ],
+			el: '#' + this.options.id_prefix + '-sorter'
+		} );
+
+		new esbbSearchFilterTermsSelectorView( { 
+			model: this.query, 
+			headerName: 'Title', 
+			facetName: 'title',
+			el: '#' + this.options.id_prefix + '-title-filter'
+		} );
+		new esbbSearchFilterTermsSelectorView( { 
+			model: this.query, 
+			headerName: 'Author', 
+			facetName: 'user',
+			el: '#' + this.options.id_prefix + '-author-filter'
+		} );
+		new esbbSearchFilterTermsSelectorView( { 
+			model: this.query, 
+			headerName: 'Site', 
+			facetName: 'site',
+			el: '#' + this.options.id_prefix + '-site-filter'
+		} );
+		new esbbSearchFilterTermsSelectorView( { 
+			model: this.query, 
+			headerName: 'Participants', 
+			facetName: 'people',
+			el: '#' + this.options.id_prefix + '-people-filter'
+		} );
+		new esbbSearchFilterTermsSelectorView( { 
+			model: this.query, 
+			headerName: 'Type', 
+			facetName: 'type',
+			avail_fields: [ 'post', 'comment', 'xpost', 'xcomment' ],
+			el: '#' + this.options.id_prefix + '-type-filter'
+		} );
+		new esbbSearchFilterTermsSelectorView( { 
+			model: this.query, 
+			headerName: 'Tag', 
+			facetName: 'tag',
+			el: '#' + this.options.id_prefix + '-tag-filter'
+		} );
+		new esbbSearchFilterTermsSelectorView( { 
+			model: this.query, 
+			headerName: 'Content', 
+			facetName: 'content',
+			el: '#' + this.options.id_prefix + '-content-filter'
+		} );
+
+
+
 		new esbbSearchFacetTimelineView( { 
 			facetName: 'date',
+			horizontal: true,
 			el: '#' + this.options.id_prefix + '-timeline',
 			model: this.model,
 			searchQueryModel: this.query
 		} );
-		new esbbSearchFacetPieView( { 
+		new esbbSearchFacetSelectView( { 
 			facetName: 'user',
-			el: '#' + this.options.id_prefix + '-author-pie',
-			model: this.model,
-			searchQueryModel: this.query
+			headerName: 'Authors',
+			el: '#' + this.options.id_prefix + '-author-selector',
+			searchQueryModel: this.query,
+			model: this.model
 		} );
-		new esbbSearchFacetPieView( { 
+		new esbbSearchFacetSelectView( { 
 			facetName: 'site',
-			el: '#' + this.options.id_prefix + '-site-pie',
-			model: this.model,
-			searchQueryModel: this.query
+			headerName: 'Sites',
+			el: '#' + this.options.id_prefix + '-site-selector',
+			searchQueryModel: this.query,
+			model: this.model
 		} );
-
-
-
-		new esbbSearchFacetPieView( { 
+		new esbbSearchFacetSelectView( { 
 			facetName: 'type',
-			el: '#' + this.options.id_prefix + '-type-pie',
+			headerName: 'Content Type',
+			el: '#' + this.options.id_prefix + '-type-selector',
 			searchQueryModel: this.query,
 			model: this.model
 		} );