knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
Rufus Pollock
2012-04-10 01:32:48 +01:00
parent 662db37732 6c22413784
commit e75c989a6f
11 changed files with 915 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
css/data-explorer.css
View File

@@ -1,17 +1,24 @@
.data-explorer .header .navigation, .recline-data-explorer .header .navigation,
.data-explorer .header .navigation li, .recline-data-explorer .header .navigation li,
.data-explorer .header .pagination, .recline-data-explorer .header .pagination,
.data-explorer .header .pagination form .recline-data-explorer .header .pagination form
{ {
display: inline; display: inline;
} }
.data-explorer .header .navigation { .recline-data-explorer .header .navigation {
float: left; float: left;
margin-left: 0; margin-left: 0;
padding-left: 0; padding-left: 0;
} }
.recline-data-explorer .header .menu-right {
float: right;
margin-left: 5px;
padding-left: 5px;
border-left: solid 2px #ddd;
}
.header .recline-results-info { .header .recline-results-info {
line-height: 28px; line-height: 28px;
margin-left: 20px; margin-left: 20px;
@@ -40,13 +47,14 @@
.header .recline-query-editor .pagination a { .header .recline-query-editor .pagination a {
line-height: 26px; line-height: 26px;
padding: 0 6px;
} }
.header .recline-query-editor form button { .header .recline-query-editor form button {
vertical-align: top; vertical-align: top;
} }
.data-view-container { .recline-data-explorer .data-view-container {
display: block; display: block;
clear: both; clear: both;
} }
@@ -63,7 +71,7 @@
* Notifications * Notifications
*********************************************************/ *********************************************************/
.notification-loader { .recline-data-explorer .notification-loader {
width: 18px; width: 18px;
margin-left: 5px; margin-left: 5px;
background: url(images/small-spinner.gif) no-repeat; background: url(images/small-spinner.gif) no-repeat;
@@ -75,33 +83,33 @@
* Data Table * Data Table
*********************************************************/ *********************************************************/
.data-table .btn-group .dropdown-toggle { .recline-grid .btn-group .dropdown-toggle {
padding: 1px 3px; padding: 1px 3px;
line-height: auto; line-height: auto;
} }
.data-table-container { .recline-grid-container {
overflow: auto; overflow: auto;
height: 550px; height: 550px;
} }
.data-table { .recline-grid {
border: 1px solid #ccc; border: 1px solid #ccc;
width: 100%; width: 100%;
} }
.data-table td, .data-table th { .recline-grid td, .recline-grid th {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
padding: 3px 4px; padding: 3px 4px;
text-align: left; text-align: left;
} }
.data-table tr td:first-child, .data-table tr th:first-child { .recline-grid tr td:first-child, .recline-grid tr th:first-child {
width: 20px; width: 20px;
} }
/* direct borrowing from twitter buttons */ /* direct borrowing from twitter buttons */
.data-table th, .recline-grid th,
.transform-column-view .expression-preview-table-wrapper th .transform-column-view .expression-preview-table-wrapper th
{ {
background-color: #e6e6e6; background-color: #e6e6e6;
@@ -140,27 +148,6 @@
display: none; display: none;
} }
.column-header-recon-stats-bar {
margin-top: 10px;
height: 4px;
background: #ddd;
border: 1px solid #ccc;
position: relative;
width: 100%;
}
.column-header-recon-stats-matched {
position: absolute;
height: 100%;
background: #282;
}
.column-header-recon-stats-blanks {
position: absolute;
height: 100%;
background: #3d3;
}
div.data-table-cell-content { div.data-table-cell-content {
line-height: 1.2; line-height: 1.2;
color: #222; color: #222;
@@ -188,7 +175,7 @@ a.data-table-cell-edit:hover {
background-position: -25px 0px; background-position: -25px 0px;
} }
.data-table td:hover .data-table-cell-edit { .recline-grid td:hover .data-table-cell-edit {
visibility: visible; visibility: visible;
} }
@@ -205,21 +192,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
color: red; color: red;
} }
/* TODO: not sure the rest of this is needed */
.data-table-cell-editor, .data-table-topic-popup {
overflow: auto;
border: 1px solid #bcf;
background: #e3e9ff;
padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.data-table-topic-popup-header {
padding: 0 0 5px;
}
.data-table-cell-editor-editor { .data-table-cell-editor-editor {
overflow: hidden; overflow: hidden;
display: block; display: block;
@@ -249,28 +221,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
color: #999; color: #999;
} }
ul.sorting-dialog-blank-error-positions {
margin: 0;
padding: 5px;
height: 10em;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
ul.sorting-dialog-blank-error-positions > li {
display: block;
border: 1px solid #ccc;
background: #eee;
padding: 5px;
margin: 2px;
cursor: move;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/********************************************************** /**********************************************************
* Dialogs * Dialogs
@@ -432,8 +382,8 @@ td.expression-preview-value {
* Read-only mode * Read-only mode
*********************************************************/ *********************************************************/
.read-only .no-hidden .data-table tr td:first-child, .read-only .no-hidden .recline-grid tr td:first-child,
.read-only .no-hidden .data-table tr th:first-child .read-only .no-hidden .recline-grid tr th:first-child
{ {
display: none; display: none;
} }

97
docs/model.html
View File

@@ -94,36 +94,79 @@ also returned.</p> </td> <td class="code">
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h2><a id="document">A Document (aka Row)</a></h2> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h2><a id="document">A Document (aka Row)</a></h2>
<p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">&#39;Document&#39;</span> <span class="nx">__type__</span><span class="o">:</span> <span class="s1">&#39;Document&#39;</span><span class="p">,</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;getFieldValue&#39;</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <h3>getFieldValue</h3>
<p>For the provided Field get the corresponding rendered computed data value
for this document.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getFieldValue</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">deriver</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">val</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">deriver</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">field</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">renderer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">val</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">renderer</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">field</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">val</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">&#39;DocumentList&#39;</span><span class="p">,</span> <span class="nx">__type__</span><span class="o">:</span> <span class="s1">&#39;DocumentList&#39;</span><span class="p">,</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <h2><a id="field">A Field (aka Column) on a Dataset</a></h2> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <h2><a id="field">A Field (aka Column) on a Dataset</a></h2>
<p>Following attributes as standard:</p> <p>Following (Backbone) attributes as standard:</p>
<ul> <ul>
<li>id: a unique identifer for this field- usually this should match the key in the documents hash</li> <li>id: a unique identifer for this field- usually this should match the key in the documents hash</li>
<li>label: the visible label used for this field</li> <li>label: (optional: defaults to id) the visible label used for this field</li>
<li>type: the type of the data</li> <li>type: (optional: defaults to string) the type of the data in this field. Should be a string as per type names defined by ElasticSearch - see Types list on <a href="http://www.elasticsearch.org/guide/reference/mapping/">http://www.elasticsearch.org/guide/reference/mapping/</a></li>
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <li>format: (optional) used to indicate how the data should be formatted. For example:
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> <ul><li>type=date, format=yyyy-mm-dd</li>
<span class="nx">id</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <li>type=float, format=percentage</li>
<li>type=float, format='###,###.##'</li></ul></li>
<li>is_derived: (default: false) attribute indicating this field has no backend data but is just derived from other fields (see below).</li>
</ul>
<p>Following additional instance properties:</p>
<p>@property {Function} renderer: a function to render the data for this field.
Signature: function(value, field, doc) where value is the value of this
cell, field is corresponding field object and document is the document
object. Note that implementing functions can ignore arguments (e.g.
function(value) would be a valid formatter function).</p>
<p>@property {Function} deriver: a function to derive/compute the value of data
in this field as a function of this field's value (if any) and the current
document, its signature and behaviour is the same as for renderer. Use of
this function allows you to define an entirely new value for data in this
field. This provides support for a) 'derived/computed' fields: i.e. fields
whose data are functions of the data in other fields b) transforming the
value of this field prior to rendering.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <h3>defaults - define default values</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">label</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;String&#39;</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;string&#39;</span><span class="p">,</span>
<span class="p">},</span> <span class="nx">format</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>if a hash not passed in the first argument throw error</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="s1">&#39;0&#39;</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span> <span class="nx">is_derived</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <h3>initialize</h3>
<p>@param {Object} data: standard Backbone model attributes</p>
<p>@param {Object} options: renderer and/or deriver functions.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>if a hash not passed in the first argument throw error</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="s1">&#39;0&#39;</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">&#39;Looks like you did not pass a proper hash with id to Field constructor&#39;</span><span class="p">);</span> <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">&#39;Looks like you did not pass a proper hash with id to Field constructor&#39;</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">label</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">label</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">label</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">});</span> <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">label</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">});</span>
<span class="p">}</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">renderer</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">deriver</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">deriver</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">});</span> <span class="p">});</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">FieldList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FieldList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Field</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <h2><a id="query">Query</a></h2> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <h2><a id="query">Query</a></h2>
<p>Query instances encapsulate a query to the backend (see <a <p>Query instances encapsulate a query to the backend (see <a
href="backend/base.html">query method on backend</a>). Useful both href="backend/base.html">query method on backend</a>). Useful both
@@ -179,10 +222,10 @@ execution.</p></li>
<span class="k">return</span> <span class="p">{</span> <span class="k">return</span> <span class="p">{</span>
<span class="nx">size</span><span class="o">:</span> <span class="mi">100</span> <span class="nx">size</span><span class="o">:</span> <span class="mi">100</span>
<span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="mi">0</span> <span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="mi">0</span>
<span class="p">,</span> <span class="nx">facets</span><span class="o">:</span> <span class="p">{}</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p><a href="http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html">http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html</a> <span class="p">,</span> <span class="nx">facets</span><span class="o">:</span> <span class="p">{}</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p><a href="http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html">http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html</a>
, filter: {}</p> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>list of simple filters which will be add to 'add' filter of filter</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">,</span> <span class="nx">filters</span><span class="o">:</span> <span class="p">[]</span> , filter: {}</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">,</span> <span class="nx">filters</span><span class="o">:</span> <span class="p">[]</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <h4>addTermFilter</h4> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h4>addTermFilter</h4>
<p>Set (update or add) a terms filter to filters</p> <p>Set (update or add) a terms filter to filters</p>
@@ -191,13 +234,23 @@ execution.</p></li>
<span class="kd">var</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">term</span><span class="o">:</span> <span class="p">{}</span> <span class="p">};</span> <span class="kd">var</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">term</span><span class="o">:</span> <span class="p">{}</span> <span class="p">};</span>
<span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="nx">filters</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span> <span class="nx">filters</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>change does not seem to be triggered ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>change does not seem to be triggered automatically</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h3>addFacet</h3> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>adding a new blank filter and do not want to trigger a new query</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;change:filters:new-blank&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <h3>removeFilter</h3>
<p>Remove a filter from filters at index filterIndex</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filterIndex</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;filters&#39;</span><span class="p">);</span>
<span class="nx">filters</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">filterIndex</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <h3>addFacet</h3>
<p>Add a Facet to this query</p> <p>Add a Facet to this query</p>
<p>See <a href="http://www.elasticsearch.org/guide/reference/api/search/facets/">http://www.elasticsearch.org/guide/reference/api/search/facets/</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addFacet</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span> <p>See <a href="http://www.elasticsearch.org/guide/reference/api/search/facets/">http://www.elasticsearch.org/guide/reference/api/search/facets/</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addFacet</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">facets</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;facets&#39;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>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)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">facets</span><span class="p">),</span> <span class="nx">fieldId</span><span class="p">))</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">facets</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;facets&#39;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>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)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">facets</span><span class="p">),</span> <span class="nx">fieldId</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span><span class="p">;</span> <span class="k">return</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="nx">facets</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">facets</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
@@ -206,7 +259,7 @@ execution.</p></li>
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">facets</span><span class="o">:</span> <span class="nx">facets</span><span class="p">},</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span> <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">facets</span><span class="o">:</span> <span class="nx">facets</span><span class="p">},</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;facet:add&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;facet:add&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <h2><a id="facet">A Facet (Result)</a></h2> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h2><a id="facet">A Facet (Result)</a></h2>
<p>Object to store Facet information, that is summary information (e.g. values <p>Object to store Facet information, that is summary information (e.g. values
and counts) about a field obtained by some faceting method on the and counts) about a field obtained by some faceting method on the
@@ -253,9 +306,9 @@ key used to specify this facet in the facet query):</p>
<span class="nx">terms</span><span class="o">:</span> <span class="p">[]</span> <span class="nx">terms</span><span class="o">:</span> <span class="p">[]</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <h2>A Collection/List of Facets</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FacetList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <h2>A Collection/List of Facets</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FacetList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Facet</span> <span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Facet</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <h2>Backend registry</h2> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h2>Backend registry</h2>
<p>Backends will register themselves by id into this registry</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span> <p>Backends will register themselves by id into this registry</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span>

4
docs/view-flot-graph.html
View File

@@ -1,4 +1,6 @@
<!DOCTYPE html> <html> <head> <title>view-flot-graph.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-flot-graph.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span> <!DOCTYPE html> <html> <head> <title>view-flot-graph.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-flot-graph.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Graph view for a Dataset using Flot graphing library.</h2> <span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Graph view for a Dataset using Flot graphing library.</h2>

56
docs/view-grid.html
View File

@@ -1,21 +1,17 @@
<!DOCTYPE html> <html> <head> <title>view-grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span> <!DOCTYPE html> <html> <head> <title>view-grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>DataGrid</h2> <span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>DataGrid</h2>
<p>Provides a tabular view on a Dataset.</p> <p>Provides a tabular view on a Dataset.</p>
<p>Initialize it with a recline.Dataset object.</p> <p>Initialize it with a <code>recline.Model.Dataset</code>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGrid</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<p>Additional options passed in second arguments. Options:</p>
<ul>
<li>cellRenderer: function used to render individual cells. See DataGridRow for more.</li>
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGrid</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="nx">tagName</span><span class="o">:</span> <span class="s2">&quot;div&quot;</span><span class="p">,</span>
<span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;data-table-container&quot;</span><span class="p">,</span> <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;recline-grid-container&quot;</span><span class="p">,</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">modelEtc</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">modelEtc</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span> <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span>
@@ -24,7 +20,6 @@
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;remove&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;remove&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span> <span class="o">=</span> <span class="p">[];</span> <span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span><span class="p">;</span>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
@@ -67,6 +62,9 @@ Column and row menus</p> </td> <td class="code">
<span class="nx">facet</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">facet</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFacet</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFacet</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">filter</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addTermFilter</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">transform</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformDialog</span><span class="p">(</span><span class="s1">&#39;transform&#39;</span><span class="p">)</span> <span class="p">},</span> <span class="nx">transform</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformDialog</span><span class="p">(</span><span class="s1">&#39;transform&#39;</span><span class="p">)</span> <span class="p">},</span>
<span class="nx">sortAsc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">&#39;asc&#39;</span><span class="p">)</span> <span class="p">},</span> <span class="nx">sortAsc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">&#39;asc&#39;</span><span class="p">)</span> <span class="p">},</span>
<span class="nx">sortDesc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">&#39;desc&#39;</span><span class="p">)</span> <span class="p">},</span> <span class="nx">sortDesc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">&#39;desc&#39;</span><span class="p">)</span> <span class="p">},</span>
@@ -135,7 +133,7 @@ from DOM) while id may be int</p> </td> <td class="code"
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>======================================================</p> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>======================================================</p>
<h4>Templating</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span> <h4>Templating</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;table class=&quot;data-table table-striped table-condensed&quot; cellspacing=&quot;0&quot;&gt; \</span> <span class="s1"> &lt;table class=&quot;recline-grid table-striped table-condensed&quot; cellspacing=&quot;0&quot;&gt; \</span>
<span class="s1"> &lt;thead&gt; \</span> <span class="s1"> &lt;thead&gt; \</span>
<span class="s1"> &lt;tr&gt; \</span> <span class="s1"> &lt;tr&gt; \</span>
<span class="s1"> {{#notEmpty}} \</span> <span class="s1"> {{#notEmpty}} \</span>
@@ -154,9 +152,13 @@ from DOM) while id may be int</p> </td> <td class="code"
<span class="s1"> &lt;a class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;&lt;i class=&quot;icon-cog&quot;&gt;&lt;/i&gt;&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;&lt;/a&gt; \</span> <span class="s1"> &lt;a class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;&lt;i class=&quot;icon-cog&quot;&gt;&lt;/i&gt;&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;&lt;/a&gt; \</span>
<span class="s1"> &lt;ul class=&quot;dropdown-menu data-table-menu pull-right&quot;&gt; \</span> <span class="s1"> &lt;ul class=&quot;dropdown-menu data-table-menu pull-right&quot;&gt; \</span>
<span class="s1"> &lt;li&gt;&lt;a data-action=&quot;facet&quot; href=&quot;JavaScript:void(0);&quot;&gt;Facet on this Field&lt;/a&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li&gt;&lt;a data-action=&quot;facet&quot; href=&quot;JavaScript:void(0);&quot;&gt;Facet on this Field&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li&gt;&lt;a data-action=&quot;filter&quot; href=&quot;JavaScript:void(0);&quot;&gt;Text Filter&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li&gt;&lt;a data-action=&quot;sortAsc&quot; href=&quot;JavaScript:void(0);&quot;&gt;Sort ascending&lt;/a&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li&gt;&lt;a data-action=&quot;sortAsc&quot; href=&quot;JavaScript:void(0);&quot;&gt;Sort ascending&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li&gt;&lt;a data-action=&quot;sortDesc&quot; href=&quot;JavaScript:void(0);&quot;&gt;Sort descending&lt;/a&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li&gt;&lt;a data-action=&quot;sortDesc&quot; href=&quot;JavaScript:void(0);&quot;&gt;Sort descending&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li&gt;&lt;a data-action=&quot;hideColumn&quot; href=&quot;JavaScript:void(0);&quot;&gt;Hide this column&lt;/a&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li&gt;&lt;a data-action=&quot;hideColumn&quot; href=&quot;JavaScript:void(0);&quot;&gt;Hide this column&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li class=&quot;write-op&quot;&gt;&lt;a data-action=&quot;bulkEdit&quot; href=&quot;JavaScript:void(0);&quot;&gt;Transform...&lt;/a&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li class=&quot;write-op&quot;&gt;&lt;a data-action=&quot;bulkEdit&quot; href=&quot;JavaScript:void(0);&quot;&gt;Transform...&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;/ul&gt; \</span> <span class="s1"> &lt;/ul&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span> <span class="s1"> &lt;/div&gt; \</span>
@@ -188,9 +190,7 @@ from DOM) while id may be int</p> </td> <td class="code"
<span class="nx">model</span><span class="o">:</span> <span class="nx">doc</span><span class="p">,</span> <span class="nx">model</span><span class="o">:</span> <span class="nx">doc</span><span class="p">,</span>
<span class="nx">el</span><span class="o">:</span> <span class="nx">tr</span><span class="p">,</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">tr</span><span class="p">,</span>
<span class="nx">fields</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">fields</span> <span class="nx">fields</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">fields</span>
<span class="p">},</span> <span class="p">});</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">options</span>
<span class="p">);</span>
<span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> <span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">});</span> <span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">&#39;no-hidden&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">));</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">&#39;no-hidden&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">));</span>
@@ -202,16 +202,6 @@ from DOM) while id may be int</p> </td> <td class="code"
<p>In addition you <em>must</em> pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.</p> <p>In addition you <em>must</em> pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.</p>
<p>Additional options can be passed in a second hash argument. Options:</p>
<ul>
<li>cellRenderer: function to render cells. Signature: function(value,
field, doc) where value is the value of this cell, field is
corresponding field object and document is the document object. Note
that implementing functions can ignore arguments (e.g.
function(value) would be a valid cellRenderer function).</li>
</ul>
<p>Example:</p> <p>Example:</p>
<pre> <pre>
@@ -219,21 +209,11 @@ var row = new DataGridRow({
model: dataset-document, model: dataset-document,
el: dom-element, el: dom-element,
fields: mydatasets.fields // a FieldList object fields: mydatasets.fields // a FieldList object
}, { });
cellRenderer: my-cell-renderer-function
}
);
</pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGridRow</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> </pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGridRow</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initData</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initData</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span> <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_fields</span> <span class="o">=</span> <span class="nx">initData</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">_fields</span> <span class="o">=</span> <span class="nx">initData</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span> <span class="o">&amp;&amp;</span> <span class="nx">options</span><span class="p">.</span><span class="nx">cellRenderer</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_cellRenderer</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">cellRenderer</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_cellRenderer</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="p">},</span> <span class="p">},</span>
@@ -268,7 +248,7 @@ var row = new DataGridRow({
<span class="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="k">return</span> <span class="p">{</span>
<span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
<span class="nx">value</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_cellRenderer</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">),</span> <span class="nx">field</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">})</span> <span class="p">})</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">}</span> <span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">}</span>

194
docs/view.html
View File

@@ -1,4 +1,5 @@
<!DOCTYPE html> <html> <head> <title>view.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span> <!DOCTYPE html> <html> <head> <title>view.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>DataExplorer</h2> <span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>DataExplorer</h2>
@@ -53,7 +54,7 @@ operate in read-only mode (hiding all editing options).</li>
<p>NB: the element already being in the DOM is important for rendering of <p>NB: the element already being in the DOM is important for rendering of
FlotGraph subview.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataExplorer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> FlotGraph subview.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataExplorer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;data-explorer&quot;&gt; \</span> <span class="s1"> &lt;div class=&quot;recline-data-explorer&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;alert-messages&quot;&gt;&lt;/div&gt; \</span> <span class="s1"> &lt;div class=&quot;alert-messages&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> \</span> <span class="s1"> \</span>
<span class="s1"> &lt;div class=&quot;header&quot;&gt; \</span> <span class="s1"> &lt;div class=&quot;header&quot;&gt; \</span>
@@ -65,6 +66,12 @@ FlotGraph subview.</p> </td> <td class="code">
<span class="s1"> &lt;div class=&quot;recline-results-info&quot;&gt; \</span> <span class="s1"> &lt;div class=&quot;recline-results-info&quot;&gt; \</span>
<span class="s1"> Results found &lt;span class=&quot;doc-count&quot;&gt;{{docCount}}&lt;/span&gt; \</span> <span class="s1"> Results found &lt;span class=&quot;doc-count&quot;&gt;{{docCount}}&lt;/span&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span> <span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;menu-right&quot;&gt; \</span>
<span class="s1"> &lt;a href=&quot;#&quot; class=&quot;btn&quot; data-action=&quot;filters&quot;&gt;Filters&lt;/a&gt; \</span>
<span class="s1"> &lt;a href=&quot;#&quot; class=&quot;btn&quot; data-action=&quot;facets&quot;&gt;Facets&lt;/a&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;query-editor-here&quot; style=&quot;display:inline;&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span> <span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;data-view-container&quot;&gt;&lt;/div&gt; \</span> <span class="s1"> &lt;div class=&quot;data-view-container&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;dialog-overlay&quot; style=&quot;display: none; z-index: 101; &quot;&gt;&amp;nbsp;&lt;/div&gt; \</span> <span class="s1"> &lt;div class=&quot;dialog-overlay&quot; style=&quot;display: none; z-index: 101; &quot;&gt;&amp;nbsp;&lt;/div&gt; \</span>
@@ -75,6 +82,9 @@ FlotGraph subview.</p> </td> <td class="code">
<span class="s1"> &lt;/div&gt; \</span> <span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span> <span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span> <span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .menu-right a&#39;</span><span class="o">:</span> <span class="s1">&#39;onMenuClick&#39;</span>
<span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
@@ -158,11 +168,17 @@ note this.model and dataset returned are the same</p> </td>
<span class="kd">var</span> <span class="nx">queryEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span><span class="p">({</span> <span class="kd">var</span> <span class="nx">queryEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span> <span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span>
<span class="p">});</span> <span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.header&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.query-editor-here&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">queryFacetEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span><span class="p">({</span> <span class="kd">var</span> <span class="nx">filterEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FilterEditor</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$filterEditor</span> <span class="o">=</span> <span class="nx">filterEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.header&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">filterEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">facetViewer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span> <span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span>
<span class="p">});</span> <span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.header&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryFacetEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">$facetViewer</span> <span class="o">=</span> <span class="nx">facetViewer</span><span class="p">.</span><span class="nx">el</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.header&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">facetViewer</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">setupRouting</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">setupRouting</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -188,10 +204,19 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span> <span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">});</span> <span class="p">});</span>
<span class="p">},</span>
<span class="nx">onMenuClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">action</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-action&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">action</span> <span class="o">===</span> <span class="s1">&#39;filters&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$filterEditor</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">action</span> <span class="o">===</span> <span class="s1">&#39;facets&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$facetViewer</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">});</span> <span class="p">});</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recline-query-editor&#39;</span><span class="p">,</span> <span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recline-query-editor&#39;</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
@@ -199,28 +224,21 @@ note this.model and dataset returned are the same</p> </td>
<span class="s1"> &lt;div class=&quot;input-prepend text-query&quot;&gt; \</span> <span class="s1"> &lt;div class=&quot;input-prepend text-query&quot;&gt; \</span>
<span class="s1"> &lt;span class=&quot;add-on&quot;&gt;&lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;&lt;/span&gt; \</span> <span class="s1"> &lt;span class=&quot;add-on&quot;&gt;&lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;&lt;/span&gt; \</span>
<span class="s1"> &lt;input type=&quot;text&quot; name=&quot;q&quot; value=&quot;{{q}}&quot; class=&quot;span2&quot; placeholder=&quot;Search data ...&quot; class=&quot;search-query&quot; /&gt; \</span> <span class="s1"> &lt;input type=&quot;text&quot; name=&quot;q&quot; value=&quot;{{q}}&quot; class=&quot;span2&quot; placeholder=&quot;Search data ...&quot; class=&quot;search-query&quot; /&gt; \</span>
<span class="s1"> &lt;div class=&quot;btn-group menu&quot;&gt; \</span>
<span class="s1"> &lt;a class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;&lt;i class=&quot;icon-cog&quot;&gt;&lt;/i&gt;&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;&lt;/a&gt; \</span>
<span class="s1"> &lt;ul class=&quot;dropdown-menu&quot;&gt; \</span>
<span class="s1"> &lt;li&gt;&lt;a data-action=&quot;size&quot; href=&quot;&quot;&gt;Number of items to show ({{size}})&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li&gt;&lt;a data-action=&quot;from&quot; href=&quot;&quot;&gt;Show from ({{from}})&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;/ul&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span> <span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;pagination&quot;&gt; \</span> <span class="s1"> &lt;div class=&quot;pagination&quot;&gt; \</span>
<span class="s1"> &lt;ul&gt; \</span> <span class="s1"> &lt;ul&gt; \</span>
<span class="s1"> &lt;li class=&quot;prev action-pagination-update&quot;&gt;&lt;a href=&quot;&quot;&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li class=&quot;prev action-pagination-update&quot;&gt;&lt;a href=&quot;&quot;&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li class=&quot;active&quot;&gt;&lt;a&gt;{{from}} &amp;ndash; {{to}}&lt;/a&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li class=&quot;active&quot;&gt;&lt;a&gt;&lt;input name=&quot;from&quot; type=&quot;text&quot; value=&quot;{{from}}&quot; /&gt; &amp;ndash; &lt;input name=&quot;to&quot; type=&quot;text&quot; value=&quot;{{to}}&quot; /&gt; &lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;li class=&quot;next action-pagination-update&quot;&gt;&lt;a href=&quot;&quot;&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li class=&quot;next action-pagination-update&quot;&gt;&lt;a href=&quot;&quot;&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> &lt;/ul&gt; \</span> <span class="s1"> &lt;/ul&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span> <span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;button type=&quot;submit&quot; class=&quot;btn&quot;&gt;Go &amp;raquo;&lt;/button&gt; \</span>
<span class="s1"> &lt;/form&gt; \</span> <span class="s1"> &lt;/form&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span> <span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;submit form&#39;</span><span class="o">:</span> <span class="s1">&#39;onFormSubmit&#39;</span> <span class="s1">&#39;submit form&#39;</span><span class="o">:</span> <span class="s1">&#39;onFormSubmit&#39;</span>
<span class="p">,</span> <span class="s1">&#39;click .action-pagination-update&#39;</span><span class="o">:</span> <span class="s1">&#39;onPaginationUpdate&#39;</span> <span class="p">,</span> <span class="s1">&#39;click .action-pagination-update&#39;</span><span class="o">:</span> <span class="s1">&#39;onPaginationUpdate&#39;</span>
<span class="p">,</span> <span class="s1">&#39;click .menu li a&#39;</span><span class="o">:</span> <span class="s1">&#39;onMenuItemClick&#39;</span>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -232,7 +250,9 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">onFormSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">onFormSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.text-query input&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.text-query input&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">q</span><span class="o">:</span> <span class="nx">query</span><span class="p">});</span> <span class="kd">var</span> <span class="nx">newFrom</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input[name=&quot;from&quot;]&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
<span class="kd">var</span> <span class="nx">newSize</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input[name=&quot;to&quot;]&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">())</span> <span class="o">-</span> <span class="nx">newFrom</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">size</span><span class="o">:</span> <span class="nx">newSize</span><span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">,</span> <span class="nx">q</span><span class="o">:</span> <span class="nx">query</span><span class="p">});</span>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">onPaginationUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">onPaginationUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
@@ -244,20 +264,6 @@ note this.model and dataset returned are the same</p> </td>
<span class="p">}</span> <span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">});</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">});</span>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">onMenuItemClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">attrName</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-action&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="s1">&#39;New value (&lt;%= value %&gt;)&#39;</span><span class="p">,</span>
<span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">attrName</span><span class="p">)}</span>
<span class="p">);</span>
<span class="kd">var</span> <span class="nx">newValue</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="nx">msg</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">newValue</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">newValue</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">update</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">update</span><span class="p">[</span><span class="nx">attrName</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">update</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">to</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;from&#39;</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;size&#39;</span><span class="p">);</span> <span class="nx">tmplData</span><span class="p">.</span><span class="nx">to</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;from&#39;</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;size&#39;</span><span class="p">);</span>
@@ -266,6 +272,101 @@ note this.model and dataset returned are the same</p> </td>
<span class="p">}</span> <span class="p">}</span>
<span class="p">});</span> <span class="p">});</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">FilterEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recline-filter-editor well&#39;</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;a class=&quot;close js-hide&quot; href=&quot;#&quot;&gt;&amp;times;&lt;/a&gt; \</span>
<span class="s1"> &lt;div class=&quot;row filters&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;span1&quot;&gt; \</span>
<span class="s1"> &lt;h3&gt;Filters&lt;/h3&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;span11&quot;&gt; \</span>
<span class="s1"> &lt;form class=&quot;form-horizontal&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;row&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;span6&quot;&gt; \</span>
<span class="s1"> {{#termFilters}} \</span>
<span class="s1"> &lt;div class=&quot;control-group filter-term filter&quot; data-filter-id={{id}}&gt; \</span>
<span class="s1"> &lt;label class=&quot;control-label&quot; for=&quot;&quot;&gt;{{label}}&lt;/label&gt; \</span>
<span class="s1"> &lt;div class=&quot;controls&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;input-append&quot;&gt; \</span>
<span class="s1"> &lt;input type=&quot;text&quot; value=&quot;{{value}}&quot; name=&quot;{{fieldId}}&quot; class=&quot;span4&quot; data-filter-field=&quot;{{fieldId}}&quot; data-filter-id=&quot;{{id}}&quot; data-filter-type=&quot;term&quot; /&gt; \</span>
<span class="s1"> &lt;a class=&quot;btn js-remove-filter&quot;&gt;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt;&lt;/a&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> {{/termFilters}} \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;span4&quot;&gt; \</span>
<span class="s1"> &lt;p&gt;To add a filter use the column menu in the grid view.&lt;/p&gt; \</span>
<span class="s1"> &lt;button type=&quot;submit&quot; class=&quot;btn&quot;&gt;Update&lt;/button&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/form&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .js-hide&#39;</span><span class="o">:</span> <span class="s1">&#39;onHide&#39;</span><span class="p">,</span>
<span class="s1">&#39;click .js-remove-filter&#39;</span><span class="o">:</span> <span class="s1">&#39;onRemoveFilter&#39;</span><span class="p">,</span>
<span class="s1">&#39;submit form&#39;</span><span class="o">:</span> <span class="s1">&#39;onTermFiltersUpdate&#39;</span>
<span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change:filters:new-blank&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="p">{},</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>we will use idx in list as there id ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">filter</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">idx</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">filter</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">termFilters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">term</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">termFilters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">termFilters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">id</span><span class="o">:</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
<span class="nx">fieldId</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span>
<span class="nx">label</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span>
<span class="nx">value</span><span class="o">:</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;filters&#39;</span><span class="p">).</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">onHide</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">onRemoveFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">$target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">filterId</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">&#39;.filter&#39;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-filter-id&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">removeFilter</span><span class="p">(</span><span class="nx">filterId</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">onTermFiltersUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;filters&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">$form</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">$form</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">$input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">input</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">filterIndex</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-filter-id&#39;</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-filter-field&#39;</span><span class="p">);</span>
<span class="nx">filters</span><span class="p">[</span><span class="nx">filterIndex</span><span class="p">].</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recline-facet-viewer well&#39;</span><span class="p">,</span> <span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recline-facet-viewer well&#39;</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
@@ -279,7 +380,7 @@ note this.model and dataset returned are the same</p> </td>
<span class="s1"> &lt;a class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;icon-chevron-down&quot;&gt;&lt;/i&gt; {{id}} {{label}}&lt;/a&gt; \</span> <span class="s1"> &lt;a class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;icon-chevron-down&quot;&gt;&lt;/i&gt; {{id}} {{label}}&lt;/a&gt; \</span>
<span class="s1"> &lt;ul class=&quot;facet-items dropdown-menu&quot;&gt; \</span> <span class="s1"> &lt;ul class=&quot;facet-items dropdown-menu&quot;&gt; \</span>
<span class="s1"> {{#terms}} \</span> <span class="s1"> {{#terms}} \</span>
<span class="s1"> &lt;li&gt;&lt;input type=&quot;checkbox&quot; class=&quot;facet-choice js-facet-filter&quot; value=&quot;{{term}}&quot; name=&quot;{{term}}&quot; /&gt; &lt;label for=&quot;{{term}}&quot;&gt;{{term}} ({{count}})&lt;/label&gt;&lt;/li&gt; \</span> <span class="s1"> &lt;li&gt;&lt;a class=&quot;facet-choice js-facet-filter&quot; data-value=&quot;{{term}}&quot;&gt;{{term}} ({{count}})&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> {{/terms}} \</span> <span class="s1"> {{/terms}} \</span>
<span class="s1"> &lt;/ul&gt; \</span> <span class="s1"> &lt;/ul&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span> <span class="s1"> &lt;/div&gt; \</span>
@@ -289,7 +390,7 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .js-hide&#39;</span><span class="o">:</span> <span class="s1">&#39;onHide&#39;</span><span class="p">,</span> <span class="s1">&#39;click .js-hide&#39;</span><span class="o">:</span> <span class="s1">&#39;onHide&#39;</span><span class="p">,</span>
<span class="s1">&#39;change .js-facet-filter&#39;</span><span class="o">:</span> <span class="s1">&#39;onFacetFilter&#39;</span> <span class="s1">&#39;click .js-facet-filter&#39;</span><span class="o">:</span> <span class="s1">&#39;onFacetFilter&#39;</span>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span> <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span>
@@ -304,7 +405,7 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">fields</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span> <span class="nx">fields</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
<span class="p">};</span> <span class="p">};</span>
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
@@ -314,14 +415,15 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">onFacetFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>todo: uncheck</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">$checkbox</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span> <span class="nx">onFacetFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$checkbox</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">&#39;.facet-summary&#39;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-facet&#39;</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">$target</span><span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$checkbox</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">&#39;.facet-summary&#39;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-facet&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-value&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addTermFilter</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addTermFilter</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">});</span> <span class="p">});</span>
<span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">urlPathRegex</span> <span class="o">=</span> <span class="sr">/^([^?]+)(\?.*)?/</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Parse the Hash section of a URL into path and query string</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">)</span> <span class="p">{</span> <span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">urlPathRegex</span> <span class="o">=</span> <span class="sr">/^([^?]+)(\?.*)?/</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Parse the Hash section of a URL into path and query string</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">parsed</span> <span class="o">=</span> <span class="nx">urlPathRegex</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">parsed</span> <span class="o">=</span> <span class="nx">urlPathRegex</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">parsed</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">parsed</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{};</span> <span class="k">return</span> <span class="p">{};</span>
@@ -331,7 +433,7 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">query</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">||</span> <span class="s1">&#39;&#39;</span> <span class="nx">query</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">||</span> <span class="s1">&#39;&#39;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span> <span class="p">}</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{};</span> <span class="k">return</span> <span class="p">{};</span>
<span class="p">}</span> <span class="p">}</span>
@@ -344,13 +446,13 @@ note this.model and dataset returned are the same</p> </td>
<span class="k">if</span> <span class="p">(</span><span class="nx">q</span> <span class="o">&amp;&amp;</span> <span class="nx">q</span><span class="p">.</span><span class="nx">length</span> <span class="o">&amp;&amp;</span> <span class="nx">q</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="s1">&#39;?&#39;</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">q</span> <span class="o">&amp;&amp;</span> <span class="nx">q</span><span class="p">.</span><span class="nx">length</span> <span class="o">&amp;&amp;</span> <span class="nx">q</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="s1">&#39;?&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">q</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="nx">q</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span> <span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="k">return</span> <span class="nx">urlParams</span><span class="p">;</span> <span class="k">return</span> <span class="nx">urlParams</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="p">}</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">q</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">).</span><span class="nx">query</span><span class="p">;</span> <span class="nx">q</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">).</span><span class="nx">query</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">q</span><span class="p">);</span> <span class="k">return</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">q</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Compse a Query String</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span> <span class="p">}</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>Compse a Query String</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> <span class="s1">&#39;?&#39;</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> <span class="s1">&#39;?&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">items</span> <span class="o">=</span> <span class="p">[];</span> <span class="kd">var</span> <span class="nx">items</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span> <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
@@ -362,7 +464,7 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">queryPart</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">queryPart</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>slice(1) to remove # at start</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;?&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</span><span class="p">;</span> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>slice(1) to remove # at start</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;?&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">queryPart</span><span class="p">;</span> <span class="k">return</span> <span class="nx">queryPart</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
@@ -370,7 +472,7 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span> <span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <h2>notify</h2> <span class="p">}</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <h2>notify</h2>
<p>Create a notification (a div.alert in div.alert-messsages) using provide messages and options. Options are:</p> <p>Create a notification (a div.alert in div.alert-messsages) using provide messages and options. Options are:</p>
@@ -393,7 +495,7 @@ note this.model and dataset returned are the same</p> </td>
<span class="s1"> {{/loader}} \</span> <span class="s1"> {{/loader}} \</span>
<span class="s1"> &lt;/div&gt;&#39;</span><span class="p">;</span> <span class="s1"> &lt;/div&gt;&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="nx">_template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="nx">_template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
<span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.data-explorer .alert-messages&#39;</span><span class="p">));</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.recline-data-explorer .alert-messages&#39;</span><span class="p">));</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">persist</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">persist</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -401,10 +503,10 @@ note this.model and dataset returned are the same</p> </td>
<span class="p">});</span> <span class="p">});</span>
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span> <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <h2>clearNotifications</h2> <span class="p">}</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h2>clearNotifications</h2>
<p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.data-explorer .alert-messages .alert&#39;</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.recline-data-explorer .alert-messages .alert&#39;</span><span class="p">);</span>
<span class="nx">$notifications</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span> <span class="nx">$notifications</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
<span class="p">}</span> <span class="p">}</span>

626
recline.js
View File

@@ -72,17 +72,33 @@ this.recline.Model = this.recline.Model || {};
(function($, my) { (function($, my) {
// ## A Dataset model // ## <a id="dataset">A Dataset model</a>
// //
// A model has the following (non-Backbone) attributes: // A model has the following (non-Backbone) attributes:
// //
// * fields: (aka columns) is a FieldList listing all the fields on this // @property {FieldList} fields: (aka columns) is a `FieldList` listing all the
// Dataset (this can be set explicitly, or, will be set by Dataset.fetch() or Dataset.query() // fields on this Dataset (this can be set explicitly, or, will be set by
// * currentDocuments: a DocumentList containing the Documents we have // Dataset.fetch() or Dataset.query()
// currently loaded for viewing (you update currentDocuments by calling query) //
// * docCount: total number of documents in this dataset // @property {DocumentList} currentDocuments: a `DocumentList` containing the
// Documents we have currently loaded for viewing (updated by calling query
// method)
//
// @property {number} docCount: total number of documents in this dataset
//
// @property {Backend} backend: the Backend (instance) for this Dataset
//
// @property {Query} queryState: `Query` object which stores current
// queryState. queryState may be edited by other components (e.g. a query
// editor view) changes will trigger a Dataset query.
//
// @property {FacetList} facets: FacetList object containing all current
// Facets.
my.Dataset = Backbone.Model.extend({ my.Dataset = Backbone.Model.extend({
__type__: 'Dataset', __type__: 'Dataset',
// ### initialize
//
// Sets up instance properties (see above)
initialize: function(model, backend) { initialize: function(model, backend) {
_.bindAll(this, 'query'); _.bindAll(this, 'query');
this.backend = backend; this.backend = backend;
@@ -154,11 +170,29 @@ my.Dataset = Backbone.Model.extend({
} }
}); });
// ## A Document (aka Row) // ## <a id="document">A Document (aka Row)</a>
// //
// A single entry or row in the dataset // A single entry or row in the dataset
my.Document = Backbone.Model.extend({ my.Document = Backbone.Model.extend({
__type__: 'Document' __type__: 'Document',
initialize: function() {
_.bindAll(this, 'getFieldValue');
},
// ### getFieldValue
//
// For the provided Field get the corresponding rendered computed data value
// for this document.
getFieldValue: function(field) {
var val = this.get(field.id);
if (field.deriver) {
val = field.deriver(val, field, this);
}
if (field.renderer) {
val = field.renderer(val, field, this);
}
return val;
}
}); });
// ## A Backbone collection of Documents // ## A Backbone collection of Documents
@@ -167,29 +201,59 @@ my.DocumentList = Backbone.Collection.extend({
model: my.Document model: my.Document
}); });
// ## A Field (aka Column) on a Dataset // ## <a id="field">A Field (aka Column) on a Dataset</a>
// //
// Following attributes as standard: // Following (Backbone) attributes as standard:
// //
// * id: a unique identifer for this field- usually this should match the key in the documents hash // * id: a unique identifer for this field- usually this should match the key in the documents hash
// * label: the visible label used for this field // * label: (optional: defaults to id) the visible label used for this field
// * type: the type of the data // * type: (optional: defaults to string) the type of the data in this field. Should be a string as per type names defined by ElasticSearch - see Types list on <http://www.elasticsearch.org/guide/reference/mapping/>
// * format: (optional) used to indicate how the data should be formatted. For example:
// * type=date, format=yyyy-mm-dd
// * type=float, format=percentage
// * type=float, format='###,###.##'
// * is_derived: (default: false) attribute indicating this field has no backend data but is just derived from other fields (see below).
//
// Following additional instance properties:
//
// @property {Function} renderer: a function to render the data for this field.
// Signature: function(value, field, doc) where value is the value of this
// cell, field is corresponding field object and document is the document
// object. Note that implementing functions can ignore arguments (e.g.
// function(value) would be a valid formatter function).
//
// @property {Function} deriver: a function to derive/compute the value of data
// in this field as a function of this field's value (if any) and the current
// document, its signature and behaviour is the same as for renderer. Use of
// this function allows you to define an entirely new value for data in this
// field. This provides support for a) 'derived/computed' fields: i.e. fields
// whose data are functions of the data in other fields b) transforming the
// value of this field prior to rendering.
my.Field = Backbone.Model.extend({ my.Field = Backbone.Model.extend({
// ### defaults - define default values
defaults: { defaults: {
id: null,
label: null, label: null,
type: 'String' type: 'string',
format: null,
is_derived: false
}, },
// In addition to normal backbone initialization via a Hash you can also // ### initialize
// just pass a single argument representing id to the ctor //
initialize: function(data) { // @param {Object} data: standard Backbone model attributes
// if a hash not passed in the first argument is set as value for key 0 //
// @param {Object} options: renderer and/or deriver functions.
initialize: function(data, options) {
// if a hash not passed in the first argument throw error
if ('0' in data) { if ('0' in data) {
throw new Error('Looks like you did not pass a proper hash with id to Field constructor'); throw new Error('Looks like you did not pass a proper hash with id to Field constructor');
} }
if (this.attributes.label == null) { if (this.attributes.label == null) {
this.set({label: this.id}); this.set({label: this.id});
} }
if (options) {
this.renderer = options.renderer;
this.deriver = options.deriver;
}
} }
}); });
@@ -197,30 +261,99 @@ my.FieldList = Backbone.Collection.extend({
model: my.Field model: my.Field
}); });
// ## A Query object storing Dataset Query state // ## <a id="query">Query</a>
//
// Query instances encapsulate a query to the backend (see <a
// href="backend/base.html">query method on backend</a>). Useful both
// for creating queries and for storing and manipulating query state -
// e.g. from a query editor).
//
// **Query Structure and format**
//
// Query structure should follow that of [ElasticSearch query
// language](http://www.elasticsearch.org/guide/reference/api/search/).
//
// **NB: It is up to specific backends how to implement and support this query
// structure. Different backends might choose to implement things differently
// or not support certain features. Please check your backend for details.**
//
// Query object has the following key attributes:
//
// * size (=limit): number of results to return
// * from (=offset): offset into result set - http://www.elasticsearch.org/guide/reference/api/search/from-size.html
// * sort: sort order - <http://www.elasticsearch.org/guide/reference/api/search/sort.html>
// * query: Query in ES Query DSL <http://www.elasticsearch.org/guide/reference/api/search/query.html>
// * filter: See filters and <a href="http://www.elasticsearch.org/guide/reference/query-dsl/filtered-query.html">Filtered Query</a>
// * fields: set of fields to return - http://www.elasticsearch.org/guide/reference/api/search/fields.html
// * facets: TODO - see http://www.elasticsearch.org/guide/reference/api/search/facets/
//
// Additions:
//
// * q: either straight text or a hash will map directly onto a [query_string
// query](http://www.elasticsearch.org/guide/reference/query-dsl/query-string-query.html)
// in backend
//
// * Of course this can be re-interpreted by different backends. E.g. some
// may just pass this straight through e.g. for an SQL backend this could be
// the full SQL query
//
// * filters: dict of ElasticSearch filters. These will be and-ed together for
// execution.
//
// **Examples**
//
// <pre>
// {
// q: 'quick brown fox',
// filters: [
// { term: { 'owner': 'jones' } }
// ]
// }
// </pre>
my.Query = Backbone.Model.extend({ my.Query = Backbone.Model.extend({
defaults: function() { defaults: function() {
return { return {
size: 100 size: 100
, from: 0 , from: 0
, facets: {} , facets: {}
// http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html // <http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html>
// , filter: {} // , filter: {}
// list of simple filters which will be add to 'add' filter of filter
, filters: [] , filters: []
} }
}, },
// Set (update or add) a terms filter // #### addTermFilter
// http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html //
// Set (update or add) a terms filter to filters
//
// See <http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html>
addTermFilter: function(fieldId, value) { addTermFilter: function(fieldId, value) {
var filters = this.get('filters'); var filters = this.get('filters');
var filter = { term: {} }; var filter = { term: {} };
filter.term[fieldId] = value; filter.term[fieldId] = value;
filters.push(filter); filters.push(filter);
this.set({filters: filters}); this.set({filters: filters});
// change does not seem to be triggered ... // change does not seem to be triggered automatically
if (value) {
this.trigger('change');
} else {
// adding a new blank filter and do not want to trigger a new query
this.trigger('change:filters:new-blank');
}
},
// ### removeFilter
//
// Remove a filter from filters at index filterIndex
removeFilter: function(filterIndex) {
var filters = this.get('filters');
filters.splice(filterIndex, 1);
this.set({filters: filters});
this.trigger('change'); this.trigger('change');
}, },
// ### addFacet
//
// Add a Facet to this query
//
// See <http://www.elasticsearch.org/guide/reference/api/search/facets/>
addFacet: function(fieldId) { addFacet: function(fieldId) {
var facets = this.get('facets'); 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) // 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)
@@ -236,18 +369,51 @@ my.Query = Backbone.Model.extend({
}); });
// ## A Facet (Result) // ## <a id="facet">A Facet (Result)</a>
//
// Object to store Facet information, that is summary information (e.g. values
// and counts) about a field obtained by some faceting method on the
// backend.
//
// Structure of a facet follows that of Facet results in ElasticSearch, see:
// <http://www.elasticsearch.org/guide/reference/api/search/facets/>
//
// Specifically the object structure of a facet looks like (there is one
// addition compared to ElasticSearch: the "id" field which corresponds to the
// key used to specify this facet in the facet query):
//
// <pre>
// {
// "id": "id-of-facet",
// // type of this facet (terms, range, histogram etc)
// "_type" : "terms",
// // total number of tokens in the facet
// "total": 5,
// // @property {number} number of documents which have no value for the field
// "missing" : 0,
// // number of facet values not included in the returned facets
// "other": 0,
// // term object ({term: , count: ...})
// "terms" : [ {
// "term" : "foo",
// "count" : 2
// }, {
// "term" : "bar",
// "count" : 2
// }, {
// "term" : "baz",
// "count" : 1
// }
// ]
// }
// </pre>
my.Facet = Backbone.Model.extend({ my.Facet = Backbone.Model.extend({
defaults: function() { defaults: function() {
return { return {
_type: 'terms', _type: 'terms',
// total number of tokens in the facet
total: 0, total: 0,
// number of facet values not included in the returned facets
other: 0, other: 0,
// number of documents which have no value for the field
missing: 0, missing: 0,
// term object ({term: , count: ...})
terms: [] terms: []
} }
} }
@@ -265,6 +431,8 @@ my.backends = {};
}(jQuery, this.recline.Model)); }(jQuery, this.recline.Model));
/*jshint multistr:true */
var util = function() { var util = function() {
var templates = { var templates = {
transformActions: '<li><a data-action="transform" class="menuAction" href="JavaScript:void(0);">Global transform...</a></li>' transformActions: '<li><a data-action="transform" class="menuAction" href="JavaScript:void(0);">Global transform...</a></li>'
@@ -415,6 +583,8 @@ var util = function() {
observeExit: observeExit observeExit: observeExit
}; };
}(); }();
/*jshint multistr:true */
this.recline = this.recline || {}; this.recline = this.recline || {};
this.recline.View = this.recline.View || {}; this.recline.View = this.recline.View || {};
@@ -767,6 +937,8 @@ my.FlotGraph = Backbone.View.extend({
})(jQuery, recline.View); })(jQuery, recline.View);
/*jshint multistr:true */
this.recline = this.recline || {}; this.recline = this.recline || {};
this.recline.View = this.recline.View || {}; this.recline.View = this.recline.View || {};
@@ -775,16 +947,12 @@ this.recline.View = this.recline.View || {};
// //
// Provides a tabular view on a Dataset. // Provides a tabular view on a Dataset.
// //
// Initialize it with a recline.Dataset object. // Initialize it with a `recline.Model.Dataset`.
//
// Additional options passed in second arguments. Options:
//
// * cellRenderer: function used to render individual cells. See DataGridRow for more.
my.DataGrid = Backbone.View.extend({ my.DataGrid = Backbone.View.extend({
tagName: "div", tagName: "div",
className: "data-table-container", className: "recline-grid-container",
initialize: function(modelEtc, options) { initialize: function(modelEtc) {
var self = this; var self = this;
this.el = $(this.el); this.el = $(this.el);
_.bindAll(this, 'render'); _.bindAll(this, 'render');
@@ -793,7 +961,6 @@ my.DataGrid = Backbone.View.extend({
this.model.currentDocuments.bind('remove', this.render); this.model.currentDocuments.bind('remove', this.render);
this.state = {}; this.state = {};
this.hiddenFields = []; this.hiddenFields = [];
this.options = options;
}, },
events: { events: {
@@ -843,6 +1010,9 @@ my.DataGrid = Backbone.View.extend({
facet: function() { facet: function() {
self.model.queryState.addFacet(self.state.currentColumn); self.model.queryState.addFacet(self.state.currentColumn);
}, },
filter: function() {
self.model.queryState.addTermFilter(self.state.currentColumn, '');
},
transform: function() { self.showTransformDialog('transform') }, transform: function() { self.showTransformDialog('transform') },
sortAsc: function() { self.setColumnSort('asc') }, sortAsc: function() { self.setColumnSort('asc') },
sortDesc: function() { self.setColumnSort('desc') }, sortDesc: function() { self.setColumnSort('desc') },
@@ -915,7 +1085,7 @@ my.DataGrid = Backbone.View.extend({
// ====================================================== // ======================================================
// #### Templating // #### Templating
template: ' \ template: ' \
<table class="data-table table-striped table-condensed" cellspacing="0"> \ <table class="recline-grid table-striped table-condensed" cellspacing="0"> \
<thead> \ <thead> \
<tr> \ <tr> \
{{#notEmpty}} \ {{#notEmpty}} \
@@ -934,9 +1104,13 @@ my.DataGrid = Backbone.View.extend({
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \ <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 pull-right"> \ <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="facet" href="JavaScript:void(0);">Facet on this Field</a></li> \
<li><a data-action="filter" href="JavaScript:void(0);">Text Filter</a></li> \
<li class="divider"></li> \
<li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</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="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
<li class="divider"></li> \
<li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \ <li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
<li class="divider"></li> \
<li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \ <li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
</ul> \ </ul> \
</div> \ </div> \
@@ -970,9 +1144,7 @@ my.DataGrid = Backbone.View.extend({
model: doc, model: doc,
el: tr, el: tr,
fields: self.fields fields: self.fields
}, });
self.options
);
newView.render(); newView.render();
}); });
this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0)); this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0));
@@ -986,14 +1158,6 @@ my.DataGrid = Backbone.View.extend({
// //
// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid. // In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.
// //
// Additional options can be passed in a second hash argument. Options:
//
// * cellRenderer: function to render cells. Signature: function(value,
// field, doc) where value is the value of this cell, field is
// corresponding field object and document is the document object. Note
// that implementing functions can ignore arguments (e.g.
// function(value) would be a valid cellRenderer function).
//
// Example: // Example:
// //
// <pre> // <pre>
@@ -1001,22 +1165,12 @@ my.DataGrid = Backbone.View.extend({
// model: dataset-document, // model: dataset-document,
// el: dom-element, // el: dom-element,
// fields: mydatasets.fields // a FieldList object // fields: mydatasets.fields // a FieldList object
// }, { // });
// cellRenderer: my-cell-renderer-function
// }
// );
// </pre> // </pre>
my.DataGridRow = Backbone.View.extend({ my.DataGridRow = Backbone.View.extend({
initialize: function(initData, options) { initialize: function(initData) {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this._fields = initData.fields; this._fields = initData.fields;
if (options && options.cellRenderer) {
this._cellRenderer = options.cellRenderer;
} else {
this._cellRenderer = function(value) {
return value;
}
}
this.el = $(this.el); this.el = $(this.el);
this.model.bind('change', this.render); this.model.bind('change', this.render);
}, },
@@ -1051,7 +1205,7 @@ my.DataGridRow = Backbone.View.extend({
var cellData = this._fields.map(function(field) { var cellData = this._fields.map(function(field) {
return { return {
field: field.id, field: field.id,
value: self._cellRenderer(doc.get(field.id), field, doc) value: doc.getFieldValue(field)
} }
}) })
return { id: this.id, cells: cellData } return { id: this.id, cells: cellData }
@@ -1104,6 +1258,174 @@ my.DataGridRow = Backbone.View.extend({
}); });
})(jQuery, recline.View); })(jQuery, recline.View);
/*jshint multistr:true */
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
my.Map = Backbone.View.extend({
tagName: 'div',
className: 'data-map-container',
latitudeFieldNames: ['lat','latitude'],
longitudeFieldNames: ['lon','longitude'],
geometryFieldNames: ['geom','the_geom','geometry','spatial'],
//TODO: In case we want to change the default markers
/*
markerOptions: {
radius: 5,
color: 'grey',
fillColor: 'orange',
weight: 2,
opacity: 1,
fillOpacity: 1
},
*/
template: ' \
<div class="panel map"> \
</div> \
',
initialize: function(options, config) {
var self = this;
this.el = $(this.el);
this.render();
this.model.bind('change', function() {
self._setupGeometryField();
});
this.mapReady = false;
},
render: function() {
var self = this;
htmls = $.mustache(this.template, this.model.toTemplateJSON());
$(this.el).html(htmls);
this.$map = this.el.find('.panel.map');
this.model.bind('query:done', function() {
if (!self.geomReady){
self._setupGeometryField();
}
if (!self.mapReady){
self._setupMap();
}
self.redraw()
});
return this;
},
redraw: function(){
var self = this;
if (this.geomReady){
if (this.model.currentDocuments.length > 0){
this.features.clearLayers();
var bounds = new L.LatLngBounds();
this.model.currentDocuments.forEach(function(doc){
var feature = self._getGeometryFromDocument(doc);
if (feature){
// Build popup contents
// TODO: mustache?
html = ''
for (key in doc.attributes){
html += '<div><strong>' + key + '</strong>: '+ doc.attributes[key] + '</div>'
}
feature.properties = {popupContent: html};
self.features.addGeoJSON(feature);
// TODO: bounds and center map
}
});
}
}
},
_getGeometryFromDocument: function(doc){
if (this.geomReady){
if (this._geomFieldName){
// We assume that the contents of the field are a valid GeoJSON object
return doc.attributes[this._geomFieldName];
} else if (this._lonFieldName && this._latFieldName){
// We'll create a GeoJSON like point object from the two lat/lon fields
return {
type: 'Point',
coordinates: [
doc.attributes[this._lonFieldName],
doc.attributes[this._latFieldName],
]
}
}
return null;
}
},
_setupGeometryField: function(){
var geomField, latField, lonField;
// Check if there is a field with GeoJSON geometries or alternatively,
// two fields with lat/lon values
this._geomFieldName = this._checkField(this.geometryFieldNames);
this._latFieldName = this._checkField(this.latitudeFieldNames);
this._lonFieldName = this._checkField(this.longitudeFieldNames);
// TODO: Allow users to choose the fields
this.geomReady = (this._geomFieldName || (this._latFieldName && this._lonFieldName));
},
_checkField: function(fieldNames){
var field;
for (var i = 0; i < fieldNames.length; i++){
field = this.model.fields.get(fieldNames[i]);
if (field) return field.id;
}
return null;
},
_setupMap: function(){
this.map = new L.Map(this.$map.get(0));
// MapQuest OpenStreetMap base map
var mapUrl = "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png";
var osmAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">';
var bg = new L.TileLayer(mapUrl, {maxZoom: 18, attribution: osmAttribution ,subdomains: '1234'});
this.map.addLayer(bg);
// Layer to hold the features
this.features = new L.GeoJSON();
this.features.on('featureparse', function (e) {
if (e.properties && e.properties.popupContent){
e.layer.bindPopup(e.properties.popupContent);
}
});
this.map.addLayer(this.features);
this.map.setView(new L.LatLng(0, 0), 2);
this.mapReady = true;
}
});
})(jQuery, recline.View);
/*jshint multistr:true */
this.recline = this.recline || {}; this.recline = this.recline || {};
this.recline.View = this.recline.View || {}; this.recline.View = this.recline.View || {};
@@ -1310,6 +1632,7 @@ my.ColumnTransform = Backbone.View.extend({
}); });
})(jQuery, recline.View); })(jQuery, recline.View);
/*jshint multistr:true */
this.recline = this.recline || {}; this.recline = this.recline || {};
this.recline.View = this.recline.View || {}; this.recline.View = this.recline.View || {};
@@ -1365,7 +1688,7 @@ this.recline.View = this.recline.View || {};
// FlotGraph subview. // FlotGraph subview.
my.DataExplorer = Backbone.View.extend({ my.DataExplorer = Backbone.View.extend({
template: ' \ template: ' \
<div class="data-explorer"> \ <div class="recline-data-explorer"> \
<div class="alert-messages"></div> \ <div class="alert-messages"></div> \
\ \
<div class="header"> \ <div class="header"> \
@@ -1377,6 +1700,12 @@ my.DataExplorer = Backbone.View.extend({
<div class="recline-results-info"> \ <div class="recline-results-info"> \
Results found <span class="doc-count">{{docCount}}</span> \ Results found <span class="doc-count">{{docCount}}</span> \
</div> \ </div> \
<div class="menu-right"> \
<a href="#" class="btn" data-action="filters">Filters</a> \
<a href="#" class="btn" data-action="facets">Facets</a> \
</div> \
<div class="query-editor-here" style="display:inline;"></div> \
<div class="clearfix"></div> \
</div> \ </div> \
<div class="data-view-container"></div> \ <div class="data-view-container"></div> \
<div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \ <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \
@@ -1387,6 +1716,9 @@ my.DataExplorer = Backbone.View.extend({
</div> \ </div> \
</div> \ </div> \
', ',
events: {
'click .menu-right a': 'onMenuClick'
},
initialize: function(options) { initialize: function(options) {
var self = this; var self = this;
@@ -1479,11 +1811,17 @@ my.DataExplorer = Backbone.View.extend({
var queryEditor = new my.QueryEditor({ var queryEditor = new my.QueryEditor({
model: this.model.queryState model: this.model.queryState
}); });
this.el.find('.header').append(queryEditor.el); this.el.find('.query-editor-here').append(queryEditor.el);
var queryFacetEditor = new my.FacetViewer({ var filterEditor = new my.FilterEditor({
model: this.model.queryState
});
this.$filterEditor = filterEditor.el;
this.el.find('.header').append(filterEditor.el);
var facetViewer = new my.FacetViewer({
model: this.model model: this.model
}); });
this.el.find('.header').append(queryFacetEditor.el); this.$facetViewer = facetViewer.el;
this.el.find('.header').append(facetViewer.el);
}, },
setupRouting: function() { setupRouting: function() {
@@ -1513,10 +1851,19 @@ my.DataExplorer = Backbone.View.extend({
view.view.el.hide(); view.view.el.hide();
} }
}); });
},
onMenuClick: function(e) {
e.preventDefault();
var action = $(e.target).attr('data-action');
if (action === 'filters') {
this.$filterEditor.show();
} else if (action === 'facets') {
this.$facetViewer.show();
}
} }
}); });
my.QueryEditor = Backbone.View.extend({ my.QueryEditor = Backbone.View.extend({
className: 'recline-query-editor', className: 'recline-query-editor',
template: ' \ template: ' \
@@ -1524,28 +1871,21 @@ my.QueryEditor = Backbone.View.extend({
<div class="input-prepend text-query"> \ <div class="input-prepend text-query"> \
<span class="add-on"><i class="icon-search"></i></span> \ <span class="add-on"><i class="icon-search"></i></span> \
<input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \ <input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
<div class="btn-group menu"> \
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
<ul class="dropdown-menu"> \
<li><a data-action="size" href="">Number of items to show ({{size}})</a></li> \
<li><a data-action="from" href="">Show from ({{from}})</a></li> \
</ul> \
</div> \
</div> \ </div> \
<div class="pagination"> \ <div class="pagination"> \
<ul> \ <ul> \
<li class="prev action-pagination-update"><a href="">&laquo;</a></li> \ <li class="prev action-pagination-update"><a href="">&laquo;</a></li> \
<li class="active"><a>{{from}} &ndash; {{to}}</a></li> \ <li class="active"><a><input name="from" type="text" value="{{from}}" /> &ndash; <input name="to" type="text" value="{{to}}" /> </a></li> \
<li class="next action-pagination-update"><a href="">&raquo;</a></li> \ <li class="next action-pagination-update"><a href="">&raquo;</a></li> \
</ul> \ </ul> \
</div> \ </div> \
<button type="submit" class="btn">Go &raquo;</button> \
</form> \ </form> \
', ',
events: { events: {
'submit form': 'onFormSubmit' 'submit form': 'onFormSubmit'
, 'click .action-pagination-update': 'onPaginationUpdate' , 'click .action-pagination-update': 'onPaginationUpdate'
, 'click .menu li a': 'onMenuItemClick'
}, },
initialize: function() { initialize: function() {
@@ -1557,7 +1897,9 @@ my.QueryEditor = Backbone.View.extend({
onFormSubmit: function(e) { onFormSubmit: function(e) {
e.preventDefault(); e.preventDefault();
var query = this.el.find('.text-query input').val(); var query = this.el.find('.text-query input').val();
this.model.set({q: query}); var newFrom = parseInt(this.el.find('input[name="from"]').val());
var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom;
this.model.set({size: newSize, from: newFrom, q: query});
}, },
onPaginationUpdate: function(e) { onPaginationUpdate: function(e) {
e.preventDefault(); e.preventDefault();
@@ -1569,20 +1911,6 @@ my.QueryEditor = Backbone.View.extend({
} }
this.model.set({from: newFrom}); this.model.set({from: newFrom});
}, },
onMenuItemClick: function(e) {
e.preventDefault();
var attrName = $(e.target).attr('data-action');
var msg = _.template('New value (<%= value %>)',
{value: this.model.get(attrName)}
);
var newValue = prompt(msg);
if (newValue) {
newValue = parseInt(newValue);
var update = {};
update[attrName] = newValue;
this.model.set(update);
}
},
render: function() { render: function() {
var tmplData = this.model.toJSON(); var tmplData = this.model.toJSON();
tmplData.to = this.model.get('from') + this.model.get('size'); tmplData.to = this.model.get('from') + this.model.get('size');
@@ -1591,6 +1919,105 @@ my.QueryEditor = Backbone.View.extend({
} }
}); });
my.FilterEditor = Backbone.View.extend({
className: 'recline-filter-editor well',
template: ' \
<a class="close js-hide" href="#">&times;</a> \
<div class="row filters"> \
<div class="span1"> \
<h3>Filters</h3> \
</div> \
<div class="span11"> \
<form class="form-horizontal"> \
<div class="row"> \
<div class="span6"> \
{{#termFilters}} \
<div class="control-group filter-term filter" data-filter-id={{id}}> \
<label class="control-label" for="">{{label}}</label> \
<div class="controls"> \
<div class="input-append"> \
<input type="text" value="{{value}}" name="{{fieldId}}" class="span4" data-filter-field="{{fieldId}}" data-filter-id="{{id}}" data-filter-type="term" /> \
<a class="btn js-remove-filter"><i class="icon-remove"></i></a> \
</div> \
</div> \
</div> \
{{/termFilters}} \
</div> \
<div class="span4"> \
<p>To add a filter use the column menu in the grid view.</p> \
<button type="submit" class="btn">Update</button> \
</div> \
</form> \
</div> \
</div> \
',
events: {
'click .js-hide': 'onHide',
'click .js-remove-filter': 'onRemoveFilter',
'submit form': 'onTermFiltersUpdate'
},
initialize: function() {
this.el = $(this.el);
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.model.bind('change:filters:new-blank', this.render);
this.render();
},
render: function() {
var tmplData = $.extend(true, {}, this.model.toJSON());
// we will use idx in list as there id ...
tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
filter.id = idx;
return filter;
});
tmplData.termFilters = _.filter(tmplData.filters, function(filter) {
return filter.term !== undefined;
});
tmplData.termFilters = _.map(tmplData.termFilters, function(filter) {
var fieldId = _.keys(filter.term)[0];
return {
id: filter.id,
fieldId: fieldId,
label: fieldId,
value: filter.term[fieldId]
}
});
var out = $.mustache(this.template, tmplData);
this.el.html(out);
// are there actually any facets to show?
if (this.model.get('filters').length > 0) {
this.el.show();
} else {
this.el.hide();
}
},
onHide: function(e) {
e.preventDefault();
this.el.hide();
},
onRemoveFilter: function(e) {
e.preventDefault();
var $target = $(e.target);
var filterId = $target.closest('.filter').attr('data-filter-id');
this.model.removeFilter(filterId);
},
onTermFiltersUpdate: function(e) {
var self = this;
e.preventDefault();
var filters = self.model.get('filters');
var $form = $(e.target);
_.each($form.find('input'), function(input) {
var $input = $(input);
var filterIndex = parseInt($input.attr('data-filter-id'));
var value = $input.val();
var fieldId = $input.attr('data-filter-field');
filters[filterIndex].term[fieldId] = value;
});
self.model.set({filters: filters});
self.model.trigger('change');
}
});
my.FacetViewer = Backbone.View.extend({ my.FacetViewer = Backbone.View.extend({
className: 'recline-facet-viewer well', className: 'recline-facet-viewer well',
template: ' \ template: ' \
@@ -1604,7 +2031,7 @@ my.FacetViewer = Backbone.View.extend({
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-chevron-down"></i> {{id}} {{label}}</a> \ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-chevron-down"></i> {{id}} {{label}}</a> \
<ul class="facet-items dropdown-menu"> \ <ul class="facet-items dropdown-menu"> \
{{#terms}} \ {{#terms}} \
<li><input type="checkbox" class="facet-choice js-facet-filter" value="{{term}}" name="{{term}}" /> <label for="{{term}}">{{term}} ({{count}})</label></li> \ <li><a class="facet-choice js-facet-filter" data-value="{{term}}">{{term}} ({{count}})</a></li> \
{{/terms}} \ {{/terms}} \
</ul> \ </ul> \
</div> \ </div> \
@@ -1614,7 +2041,7 @@ my.FacetViewer = Backbone.View.extend({
events: { events: {
'click .js-hide': 'onHide', 'click .js-hide': 'onHide',
'change .js-facet-filter': 'onFacetFilter' 'click .js-facet-filter': 'onFacetFilter'
}, },
initialize: function(model) { initialize: function(model) {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
@@ -1642,10 +2069,9 @@ my.FacetViewer = Backbone.View.extend({
this.el.hide(); this.el.hide();
}, },
onFacetFilter: function(e) { onFacetFilter: function(e) {
// todo: uncheck var $target= $(e.target);
var $checkbox = $(e.target); var fieldId = $target.closest('.facet-summary').attr('data-facet');
var fieldId = $checkbox.closest('.facet-summary').attr('data-facet'); var value = $target.attr('data-value');
var value = $checkbox.val();
this.model.queryState.addTermFilter(fieldId, value); this.model.queryState.addTermFilter(fieldId, value);
} }
}); });
@@ -1742,7 +2168,7 @@ my.notify = function(message, options) {
{{/loader}} \ {{/loader}} \
</div>'; </div>';
var _templated = $.mustache(_template, tmplData); var _templated = $.mustache(_template, tmplData);
_templated = $(_templated).appendTo($('.data-explorer .alert-messages')); _templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages'));
if (!options.persist) { if (!options.persist) {
setTimeout(function() { setTimeout(function() {
$(_templated).fadeOut(1000, function() { $(_templated).fadeOut(1000, function() {
@@ -1756,7 +2182,7 @@ my.notify = function(message, options) {
// //
// Clear all existing notifications // Clear all existing notifications
my.clearNotifications = function() { my.clearNotifications = function() {
var $notifications = $('.data-explorer .alert-messages .alert'); var $notifications = $('.recline-data-explorer .alert-messages .alert');
$notifications.remove(); $notifications.remove();
} }

66
src/model.js
View File

@@ -106,7 +106,25 @@ my.Dataset = Backbone.Model.extend({
// //
// A single entry or row in the dataset // A single entry or row in the dataset
my.Document = Backbone.Model.extend({ my.Document = Backbone.Model.extend({
__type__: 'Document' __type__: 'Document',
initialize: function() {
_.bindAll(this, 'getFieldValue');
},
// ### getFieldValue
//
// For the provided Field get the corresponding rendered computed data value
// for this document.
getFieldValue: function(field) {
var val = this.get(field.id);
if (field.deriver) {
val = field.deriver(val, field, this);
}
if (field.renderer) {
val = field.renderer(val, field, this);
}
return val;
}
}); });
// ## A Backbone collection of Documents // ## A Backbone collection of Documents
@@ -117,18 +135,46 @@ my.DocumentList = Backbone.Collection.extend({
// ## <a id="field">A Field (aka Column) on a Dataset</a> // ## <a id="field">A Field (aka Column) on a Dataset</a>
// //
// Following attributes as standard: // Following (Backbone) attributes as standard:
// //
// * id: a unique identifer for this field- usually this should match the key in the documents hash // * id: a unique identifer for this field- usually this should match the key in the documents hash
// * label: the visible label used for this field // * label: (optional: defaults to id) the visible label used for this field
// * type: the type of the data // * type: (optional: defaults to string) the type of the data in this field. Should be a string as per type names defined by ElasticSearch - see Types list on <http://www.elasticsearch.org/guide/reference/mapping/>
// * format: (optional) used to indicate how the data should be formatted. For example:
// * type=date, format=yyyy-mm-dd
// * type=float, format=percentage
// * type=float, format='###,###.##'
// * is_derived: (default: false) attribute indicating this field has no backend data but is just derived from other fields (see below).
//
// Following additional instance properties:
//
// @property {Function} renderer: a function to render the data for this field.
// Signature: function(value, field, doc) where value is the value of this
// cell, field is corresponding field object and document is the document
// object. Note that implementing functions can ignore arguments (e.g.
// function(value) would be a valid formatter function).
//
// @property {Function} deriver: a function to derive/compute the value of data
// in this field as a function of this field's value (if any) and the current
// document, its signature and behaviour is the same as for renderer. Use of
// this function allows you to define an entirely new value for data in this
// field. This provides support for a) 'derived/computed' fields: i.e. fields
// whose data are functions of the data in other fields b) transforming the
// value of this field prior to rendering.
my.Field = Backbone.Model.extend({ my.Field = Backbone.Model.extend({
// ### defaults - define default values
defaults: { defaults: {
id: null,
label: null, label: null,
type: 'String' type: 'string',
format: null,
is_derived: false
}, },
initialize: function(data) { // ### initialize
//
// @param {Object} data: standard Backbone model attributes
//
// @param {Object} options: renderer and/or deriver functions.
initialize: function(data, options) {
// if a hash not passed in the first argument throw error // if a hash not passed in the first argument throw error
if ('0' in data) { if ('0' in data) {
throw new Error('Looks like you did not pass a proper hash with id to Field constructor'); throw new Error('Looks like you did not pass a proper hash with id to Field constructor');
@@ -136,6 +182,10 @@ my.Field = Backbone.Model.extend({
if (this.attributes.label == null) { if (this.attributes.label == null) {
this.set({label: this.id}); this.set({label: this.id});
} }
if (options) {
this.renderer = options.renderer;
this.deriver = options.deriver;
}
} }
}); });

41
src/view-grid.js
View File

@@ -8,16 +8,12 @@ this.recline.View = this.recline.View || {};
// //
// Provides a tabular view on a Dataset. // Provides a tabular view on a Dataset.
// //
// Initialize it with a recline.Dataset object. // Initialize it with a `recline.Model.Dataset`.
//
// Additional options passed in second arguments. Options:
//
// * cellRenderer: function used to render individual cells. See DataGridRow for more.
my.DataGrid = Backbone.View.extend({ my.DataGrid = Backbone.View.extend({
tagName: "div", tagName: "div",
className: "data-table-container", className: "recline-grid-container",
initialize: function(modelEtc, options) { initialize: function(modelEtc) {
var self = this; var self = this;
this.el = $(this.el); this.el = $(this.el);
_.bindAll(this, 'render'); _.bindAll(this, 'render');
@@ -26,7 +22,6 @@ my.DataGrid = Backbone.View.extend({
this.model.currentDocuments.bind('remove', this.render); this.model.currentDocuments.bind('remove', this.render);
this.state = {}; this.state = {};
this.hiddenFields = []; this.hiddenFields = [];
this.options = options;
}, },
events: { events: {
@@ -151,7 +146,7 @@ my.DataGrid = Backbone.View.extend({
// ====================================================== // ======================================================
// #### Templating // #### Templating
template: ' \ template: ' \
<table class="data-table table-striped table-condensed" cellspacing="0"> \ <table class="recline-grid table-striped table-condensed" cellspacing="0"> \
<thead> \ <thead> \
<tr> \ <tr> \
{{#notEmpty}} \ {{#notEmpty}} \
@@ -210,9 +205,7 @@ my.DataGrid = Backbone.View.extend({
model: doc, model: doc,
el: tr, el: tr,
fields: self.fields fields: self.fields
}, });
self.options
);
newView.render(); newView.render();
}); });
this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0)); this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0));
@@ -226,14 +219,6 @@ my.DataGrid = Backbone.View.extend({
// //
// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid. // In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.
// //
// Additional options can be passed in a second hash argument. Options:
//
// * cellRenderer: function to render cells. Signature: function(value,
// field, doc) where value is the value of this cell, field is
// corresponding field object and document is the document object. Note
// that implementing functions can ignore arguments (e.g.
// function(value) would be a valid cellRenderer function).
//
// Example: // Example:
// //
// <pre> // <pre>
@@ -241,22 +226,12 @@ my.DataGrid = Backbone.View.extend({
// model: dataset-document, // model: dataset-document,
// el: dom-element, // el: dom-element,
// fields: mydatasets.fields // a FieldList object // fields: mydatasets.fields // a FieldList object
// }, { // });
// cellRenderer: my-cell-renderer-function
// }
// );
// </pre> // </pre>
my.DataGridRow = Backbone.View.extend({ my.DataGridRow = Backbone.View.extend({
initialize: function(initData, options) { initialize: function(initData) {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
this._fields = initData.fields; this._fields = initData.fields;
if (options && options.cellRenderer) {
this._cellRenderer = options.cellRenderer;
} else {
this._cellRenderer = function(value) {
return value;
}
}
this.el = $(this.el); this.el = $(this.el);
this.model.bind('change', this.render); this.model.bind('change', this.render);
}, },
@@ -291,7 +266,7 @@ my.DataGridRow = Backbone.View.extend({
var cellData = this._fields.map(function(field) { var cellData = this._fields.map(function(field) {
return { return {
field: field.id, field: field.id,
value: self._cellRenderer(doc.get(field.id), field, doc) value: doc.getFieldValue(field)
} }
}) })
return { id: this.id, cells: cellData } return { id: this.id, cells: cellData }

28
src/view.js
View File

@@ -54,7 +54,7 @@ this.recline.View = this.recline.View || {};
// FlotGraph subview. // FlotGraph subview.
my.DataExplorer = Backbone.View.extend({ my.DataExplorer = Backbone.View.extend({
template: ' \ template: ' \
<div class="data-explorer"> \ <div class="recline-data-explorer"> \
<div class="alert-messages"></div> \ <div class="alert-messages"></div> \
\ \
<div class="header"> \ <div class="header"> \
@@ -66,6 +66,10 @@ my.DataExplorer = Backbone.View.extend({
<div class="recline-results-info"> \ <div class="recline-results-info"> \
Results found <span class="doc-count">{{docCount}}</span> \ Results found <span class="doc-count">{{docCount}}</span> \
</div> \ </div> \
<div class="menu-right"> \
<a href="#" class="btn" data-action="filters">Filters</a> \
<a href="#" class="btn" data-action="facets">Facets</a> \
</div> \
<div class="query-editor-here" style="display:inline;"></div> \ <div class="query-editor-here" style="display:inline;"></div> \
<div class="clearfix"></div> \ <div class="clearfix"></div> \
</div> \ </div> \
@@ -78,6 +82,9 @@ my.DataExplorer = Backbone.View.extend({
</div> \ </div> \
</div> \ </div> \
', ',
events: {
'click .menu-right a': 'onMenuClick'
},
initialize: function(options) { initialize: function(options) {
var self = this; var self = this;
@@ -174,10 +181,12 @@ my.DataExplorer = Backbone.View.extend({
var filterEditor = new my.FilterEditor({ var filterEditor = new my.FilterEditor({
model: this.model.queryState model: this.model.queryState
}); });
this.$filterEditor = filterEditor.el;
this.el.find('.header').append(filterEditor.el); this.el.find('.header').append(filterEditor.el);
var facetViewer = new my.FacetViewer({ var facetViewer = new my.FacetViewer({
model: this.model model: this.model
}); });
this.$facetViewer = facetViewer.el;
this.el.find('.header').append(facetViewer.el); this.el.find('.header').append(facetViewer.el);
}, },
@@ -208,6 +217,16 @@ my.DataExplorer = Backbone.View.extend({
view.view.el.hide(); view.view.el.hide();
} }
}); });
},
onMenuClick: function(e) {
e.preventDefault();
var action = $(e.target).attr('data-action');
if (action === 'filters') {
this.$filterEditor.show();
} else if (action === 'facets') {
this.$facetViewer.show();
}
} }
}); });
@@ -290,7 +309,8 @@ my.FilterEditor = Backbone.View.extend({
</div> \ </div> \
{{/termFilters}} \ {{/termFilters}} \
</div> \ </div> \
<div class="span2"> \ <div class="span4"> \
<p>To add a filter use the column menu in the grid view.</p> \
<button type="submit" class="btn">Update</button> \ <button type="submit" class="btn">Update</button> \
</div> \ </div> \
</form> \ </form> \
@@ -514,7 +534,7 @@ my.notify = function(message, options) {
{{/loader}} \ {{/loader}} \
</div>'; </div>';
var _templated = $.mustache(_template, tmplData); var _templated = $.mustache(_template, tmplData);
_templated = $(_templated).appendTo($('.data-explorer .alert-messages')); _templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages'));
if (!options.persist) { if (!options.persist) {
setTimeout(function() { setTimeout(function() {
$(_templated).fadeOut(1000, function() { $(_templated).fadeOut(1000, function() {
@@ -528,7 +548,7 @@ my.notify = function(message, options) {
// //
// Clear all existing notifications // Clear all existing notifications
my.clearNotifications = function() { my.clearNotifications = function() {
var $notifications = $('.data-explorer .alert-messages .alert'); var $notifications = $('.recline-data-explorer .alert-messages .alert');
$notifications.remove(); $notifications.remove();
} }

31
test/model.test.js
View File

@@ -38,6 +38,37 @@ test('Field: basics', function () {
equal('XX', out[0].label); equal('XX', out[0].label);
}); });
test('Field: deriver and renderer', function () {
var doc = new recline.Model.Document({x: 123});
var cellRenderer = function(value, field) {
return '<span class="field-' + field.id + '">' + value + '</span>';
}
var deriver = function(val, field, doc) {
return doc.get('x') * 2
}
var field = new recline.Model.Field({id: 'computed', is_derived: true}, {
deriver: deriver
});
var out = doc.getFieldValue(field);
var exp = 246;
equal(out, exp);
var field = new recline.Model.Field({id: 'x'}, {
renderer: cellRenderer
});
var out = doc.getFieldValue(field);
var exp = '<span class="field-x">123</span>'
equal(out, exp);
var field = new recline.Model.Field({id: 'computed'}, {
renderer: cellRenderer,
deriver: deriver
});
var out = doc.getFieldValue(field);
var exp = '<span class="field-computed">246</span>'
equal(out, exp);
});
// ================================= // =================================
// Dataset // Dataset

14
test/view.test.js
View File

@@ -20,20 +20,6 @@ test('new DataGridRow View', function () {
var tds = $el.find('td'); var tds = $el.find('td');
equal(tds.length, 3); equal(tds.length, 3);
equal($(tds[1]).attr('data-field'), 'a'); equal($(tds[1]).attr('data-field'), 'a');
var view = new recline.View.DataGridRow({
model: doc
, el: $el
, fields: new recline.Model.FieldList([{id: 'a'}, {id: 'b'}])
},
{
cellRenderer: function(value, field) {
return '<span class="field-' + field.id + '">' + value + '</span>';
}
});
view.render();
var tds = $el.find('td .data-table-cell-value');
equal($(tds[0]).html(), '<span class="field-a">1</span>', 'Checking cellRenderer works');
}); });
})(this.jQuery); })(this.jQuery);