浏览代码

HUE-5116 [search] Unify the grid of grid result and facet

Romain Rigaux 9 年之前
父节点
当前提交
77bee32
共有 2 个文件被更改,包括 81 次插入289 次删除
  1. 7 3
      apps/search/src/search/static/search/js/search.ko.js
  2. 74 286
      apps/search/src/search/templates/common_search.mako

+ 7 - 3
apps/search/src/search/static/search/js/search.ko.js

@@ -597,6 +597,10 @@ var Collection = function (vm, collection) {
     $(document).trigger("addFunctionToSource", self.template.selectedSourceFunction());
   };
 
+  self.widgetType = ko.computed(function() {
+     return self.template.isGridLayout() ? 'resultset-widget' : 'html-resultset-widget'; 
+  });
+
   if (collection.facets.length > 0) {
     collection.facets.forEach(function (f) {
       if (f.properties.facets_form && typeof f.properties.facets_form.field === 'undefined') {
@@ -624,7 +628,7 @@ var Collection = function (vm, collection) {
     }
 
     // For Hue 4 facets only
-    if (typeof facet.docs != 'undefined') {
+    if (typeof facet.template != 'undefined') {
       facet.template.filteredAttributeFields = ko.computed(function() { // Dup of template.filteredAttributeFields
         var _fields = [];
 
@@ -656,8 +660,8 @@ var Collection = function (vm, collection) {
       });
 
       facet.template.fieldsSelected.subscribe(function(newValue) { // Could be more efficient as we don't need to research, just redraw
-         vm.getFacetFromQuery(facet.id()).resultHash('');
-         vm.search();
+        vm.getFacetFromQuery(facet.id()).resultHash('');
+        vm.search();
       });
     }
   }

+ 74 - 286
apps/search/src/search/templates/common_search.mako

@@ -908,227 +908,15 @@ ${ dashboard.layout_skeleton() }
 <script type="text/html" id="resultset-widget">
   <!-- ko if: $root.collection.template.isGridLayout() -->
 
-  <div class="grid-row">
-
-    <div class="grid-left-bar">
-      <div>
-        <!-- ko if: $root.response && $root.response().response && $root.response().response.numFound > 0 -->
-        <div style="margin-top:3px">
-          <a class="grid-side-btn active" href="javascript: void(0)"
-             data-bind="click: function(){ $root.collection.template.showChart(false); $root.collection.template.showGrid(true); }, css: {'active': $root.collection.template.showGrid() }" title="${_('Grid')}">
-            <i class="fa fa-th fa-fw"></i>
-          </a>
-        </div>
-
-        <div class="dropdown">
-          <a class="grid-side-btn" style="padding-right:0" href="javascript:void(0)"
-             data-bind="css: {'active': $root.collection.template.showChart() }, click: function(){ $root.collection.template.showChart(true); $root.collection.template.showGrid(false); huePubSub.publish('gridChartForceUpdate'); }">
-            <i class="hcha hcha-bar-chart fa-fw" data-bind="visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART"></i>
-            <i class="hcha hcha-line-chart fa-fw" data-bind="visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART"
-               style="display: none;"></i>
-            <i class="hcha hcha-pie-chart fa-fw" data-bind="visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART"
-               style="display: none;"></i>
-            <i class="fa fa-fw fa-map-marker" data-bind="visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP"
-               style="display: none;"></i>
-          </a>
-          <a class="dropdown-toggle grid-side-btn" style="padding:0" data-toggle="dropdown"
-             href="javascript: void(0)" data-bind="css: {'active': $root.collection.template.showChart()}">
-            <i class="fa fa-caret-down"></i>
-          </a>
-
-          <ul class="dropdown-menu">
-            <li>
-              <a href="javascript:void(0)"
-                 data-bind="css: {'active': $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART}, click: function(){ $root.collection.template.showChart(true); $root.collection.template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.BARCHART); $root.collection.template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}"
-                 class="active">
-                <i class="hcha hcha-bar-chart fa-fw"></i> ${_('Bars')}
-              </a>
-            </li>
-            <li>
-              <a href="javascript:void(0)"
-                 data-bind="css: {'active': $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART}, click: function(){ $root.collection.template.showChart(true); $root.collection.template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.LINECHART); $root.collection.template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}">
-                <i class="hcha hcha-line-chart fa-fw"></i> ${_('Lines')}
-              </a>
-            </li>
-            <li>
-              <a href="javascript:void(0)"
-                 data-bind="css: {'active': $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART}, click: function(){ $root.collection.template.showChart(true); $root.collection.template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.PIECHART); $root.collection.template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}">
-                <i class="hcha hcha-pie-chart fa-fw"></i> ${_('Pie')}
-              </a>
-            </li>
-            <li>
-              <a href="javascript:void(0)"
-                 data-bind="css: {'active': $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP}, click: function(){ $root.collection.template.showChart(true); $root.collection.template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.MAP); $root.collection.template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}">
-                <i class="fa fa-fw fa-map-marker chart-icon"></i> ${_('Marker Map')}
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div>
-          <a class="grid-side-btn" href="javascript:void(0)" data-bind="click: function(){ $root.collection.template.showFieldList(!$root.collection.template.showFieldList())}, css: { 'blue' : $root.collection.template.showFieldList() }">
-            <!-- ko if: $root.collection.template.showFieldList() -->
-              <i class="fa fa-fw fa-chevron-left"></i>
-            <!-- /ko -->
-            <!-- ko ifnot: $root.collection.template.showFieldList() -->
-              <i class="fa fa-fw fa-columns"></i>
-            <!-- /ko -->
-          </a>
-        </div>
-        <form method="POST" action="${ url('search:download') }" style="display:inline">
-          ${ csrf_token(request) | n,unicode }
-          <input type="hidden" name="collection" data-bind="value: ko.mapping.toJSON($root.collection)"/>
-          <input type="hidden" name="query" data-bind="value: ko.mapping.toJSON($root.query)"/>
-          <input type="hidden" name="download">
-          <input type="hidden" name="type" value="">
-          <div class="dropdown">
-            <a class="grid-side-btn dropdown-toggle" style="padding-left:7px" data-toggle="dropdown">
-              <i class="fa fa-download fa-fw"></i>
-            </a>
-            <ul class="dropdown-menu">
-              <li>
-                <a class="inactive-action download" href="javascript:void(0)" data-bind="click: function(widget, event){ var $f = $(event.currentTarget).parents('form'); $f.find('[name=\'type\']').val('csv'); $f.submit()}" title="${ _('Download first rows as JSON') }">
-                  <i class="hfo hfo-file-csv"></i> CSV
-                </a>
-              </li>
-              <li>
-                <a class="inactive-action download" href="javascript:void(0)" data-bind="click: function(widget, event){ var $f = $(event.currentTarget).parents('form'); $f.find('[name=\'type\']').val('xls'); $f.submit()}" title="${ _('Download first rows as XLS') }">
-                  <i class="hfo hfo-file-xls"></i> Excel
-                </a>
-              </li>
-              <li>
-                <a class="inactive-action download" href="javascript:void(0)" data-bind="click: function(widget, event){ var $f = $(event.currentTarget).parents('form'); $f.find('[name=\'type\']').val('json'); $f.submit()}" title="${ _('Download first rows as JSON') }">
-                  <i class="hfo hfo-file-json"></i> JSON
-                </a>
-              </li>
-            </ul>
-          </div>
-        </form>
-        <!-- /ko -->
-
-      </div>
-    </div>
-  </div>
-
-  <div class="grid-results">
-    <span data-bind="visible: $root.hasRetrievedResults() && $root.response().response">
-      <div data-bind="visible: $root.collection.template.showFieldList() && $root.collection.template.showGrid()" style="float:left; width:200px; margin-right:10px; background-color:#FFF; padding:5px;">
-        <input type="text" data-bind="clearable: $root.collection.template.fieldsAttributesFilter, valueUpdate:'afterkeydown'" placeholder="${_('Filter fields')}" style="width:180px; margin-bottom:10px" />
-        <div style="margin-bottom: 8px">
-          <a href="javascript: void(0)" data-bind="click: function(){$root.collection.template.filteredAttributeFieldsAll(true)}, style: {'font-weight': $root.collection.template.filteredAttributeFieldsAll() ? 'bold': 'normal'}">${_('All')} (<span data-bind="text: $root.collection.template.fieldsAttributes().length"></span>)</a> / <a href="javascript: void(0)" data-bind="click: function(){$root.collection.template.filteredAttributeFieldsAll(false)}, style: {'font-weight': ! $root.collection.template.filteredAttributeFieldsAll() ? 'bold': 'normal'}">${_('Current')} (<span data-bind="text: $root.collection.template.fields().length"></span>)</a>
-        </div>
-        <div style="border-bottom: 1px solid #CCC; padding-bottom: 4px;">
-          <!-- ko with: $root.collection -->
-          <a href="javascript: void(0)" class="btn btn-mini"
-            data-bind="click: toggleGridFieldsSelection, css: { 'btn-inverse': $root.collection.template.fields().length > 0 }"
-            style="margin-right: 2px;">
-            <i class="fa fa-square-o"></i>
-          </a>
-          <!-- /ko -->
-          <strong>${_('Field Name')}</strong>
-        </div>
-        <div class="fields-list" data-bind="foreach: $root.collection.template.filteredAttributeFields">
-          <div style="margin-bottom: 3px; white-space: nowrap; position:relative">
-            <input type="checkbox" data-bind="checkedValue: name, checked: $root.collection.template.fieldsSelected" style="margin: 0" />
-            <div data-bind="text: name, css:{'field-selector': true, 'hoverable': $root.collection.template.fieldsSelected.indexOf(name()) > -1}, click: highlightColumn" style="margin-right:10px"></div>
-            <i class="fa fa-question-circle muted pointer analysis" data-bind="click: function(data, e) { $root.fieldAnalysesName(name()); $root.showFieldAnalysis(data, e); }, attr: {'title': '${ _ko('Analyze ') } ' + name() + ' (' + type() + ')'}" style="position:absolute; left: 168px; background-color: #FFF"></i>
-          </div>
-        </div>
-        <div data-bind="visible: $root.collection.template.filteredAttributeFields().length == 0" style="padding-left:4px; padding-top:5px; font-size:40px; color:#CCC">
-          ${ _('No matches.') }
-        </div>
-      </div>
-
-      <div data-bind="visible: $root.collection.template.showFieldList() && $root.collection.template.showChart()" style="float:left; width:200px; margin-right:10px; background-color:#FFF; padding:5px;">
-        <span data-bind="template: {name: 'grid-chart-settings', data: $root.collection.template.chartSettings}"></span>
-      </div>
-    </span>
-
-      <div class="widget-spinner" data-bind="visible: ! $root.hasRetrievedResults() || !$root.response().response">
-        <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
-        <!--[if IE]><img src="${ static('desktop/art/spinner.gif') }" /><![endif]-->
-      </div>
-
-      <div data-bind="visible: $root.hasRetrievedResults() && $root.results().length == 0 && $root.response().response">
-        <br/>
-        ${ _('Your search did not match any documents.') }
-      </div>
-
-      <div data-bind="visible: $root.hasRetrievedResults() && $root.results().length > 0 && $root.collection.template.showGrid()">
-        <!-- ko if: $root.response().response -->
-          <!-- ko with: $root.collection -->
-            <div data-bind="template: {name: 'resultset-pagination', data: $root.response()}" style="padding:8px; color:#666"></div>
-          <!-- /ko -->
-        <!-- /ko -->
-
-        <div id="result-main" style="overflow-x: auto">
-          <table id="result-container" data-bind="visible: $root.hasRetrievedResults()" style="margin-top: 0; width: 100%; border-collapse: initial">
-            <thead>
-              <!-- ko if: $root.collection.template.fieldsSelected().length > 0 -->
-              <tr class="result-sorting" data-bind="template: {name: 'result-sorting', data: $root.collection}">
-              </tr>
-              <!-- /ko -->
-              <tr data-bind="visible: $root.collection.template.fieldsSelected().length == 0">
-                <th style="width: 18px">&nbsp;</th>
-                <th>${ _('Document') }</th>
-              </tr>
-            </thead>
-            <tbody data-bind="foreach: {data: $root.results, as: 'doc'}" class="result-tbody">
-              <tr class="result-row" data-bind="style: {'backgroundColor': $index() % 2 == 0 ? '#FFF': '#F6F6F6'}">
-                <td>
-                  <a href="javascript:void(0)" data-bind="click: toggleDocDetails">
-                    <i class="fa" data-bind="css: {'fa-caret-right' : ! doc.showDetails(), 'fa-caret-down': doc.showDetails()}"></i>
-                    <!-- ko if: doc.childDocuments != undefined -->
-                    &nbsp(<span data-bind="text: doc.childDocuments().length"></span>)
-                    <!-- /ko -->
-                  </a>
-                </td>
-                <!-- ko foreach: row -->
-                  <td data-bind="html: $data"></td>
-                <!-- /ko -->
-              </tr>
-              <tr data-bind="visible: doc.showDetails" class="show-details">
-                <td>&nbsp;</td>
-                <td data-bind="attr: {'colspan': $root.collection.template.fieldsSelected().length > 0 ? $root.collection.template.fieldsSelected().length + 1 : 2}">
-                  <span data-bind="template: {name: 'document-details', data: $data}"></span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <div data-bind="visible: $root.hasRetrievedResults() && $root.results().length > 0 && $root.collection.template.showChart()">
-        <div data-bind="visible: !$root.collection.template.hasDataForChart()" style="padding: 10px">${ _('Please select the chart parameters on the left.') }</div>
-        <div class="grid-chart-container" data-bind="visible: $root.collection.template.hasDataForChart" style="overflow-x: auto">
-          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART -->
-          <div data-bind="attr:{'id': 'pieChart_'+id()}, pieChart: {data: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]),
-                transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" class="chart"></div>
-          <!-- /ko -->
-
-          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART -->
-          <div data-bind="attr:{'id': 'barChart_'+id()}, barChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]), hideSelection: true,
-                transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true, isPivot: false},  stacked: true, showLegend: true, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
-          <!-- /ko -->
-
-          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART -->
-          <div data-bind="attr:{'id': 'lineChart_'+id()}, lineChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
-                transformer: multiSerieDataTransformerGrid, showControls: false }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
-          <!-- /ko -->
-
-          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP -->
-          <div data-bind="attr:{'id': 'leafletMapChart_'+id()}, leafletMapChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
-                transformer: leafletMapChartDataTransformerGrid, showControls: false, height: 380, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP, forceRedraw: true}" class="chart"></div>
-          <!-- /ko -->
-          <div class="clearfix"></div>
-
-        </div>
-      </div>
-    </div>
-  </div>
+   <!-- ko with: $root -->
+      <!-- ko if: $root.hasRetrievedResults() && $root.response().response -->
+      <span data-bind="template: {name: 'data-grid', data: $root.collection}"></span>
+      <!-- /ko -->
+   <!-- /ko -->
   <!-- /ko -->
 </script>
 
+
 <script type="text/html" id="grid-chart-settings">
   <ul class="nav nav-list" style="border: none; background-color: #FFF" data-bind="visible: chartType() != ''">
     <li data-bind="visible: [ko.HUE_CHARTS.TYPES.MAP, ko.HUE_CHARTS.TYPES.GRADIENTMAP, ko.HUE_CHARTS.TYPES.PIECHART].indexOf(chartType()) == -1" class="nav-header">${_('x-axis')}</li>
@@ -1588,8 +1376,6 @@ ${ dashboard.layout_skeleton() }
 
 
 <script type="text/html" id="data-grid">
-##   <!-- ko if: $root.collection.template.isGridLayout() -->
-
   <div class="grid-row">
 
     <div class="grid-left-bar">
@@ -1778,77 +1564,80 @@ ${ dashboard.layout_skeleton() }
            <div data-bind="visible: ! template.hasDataForChart()" style="padding: 10px">${ _('Please select the chart parameters on the left.') }</div>
            <div class="grid-chart-container" data-bind="visible: template.hasDataForChart" style="overflow-x: auto">
              
+        <!-- ko if: widgetType() == 'bucket-widget' -->
+          <!-- ko with: $parent -->
+
+          <!-- ko if: dimension() == 1 -->
+            <div data-bind="barChart: {datum: {counts: counts(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(), field: field, label: label(),
+              fqs: $root.query.fqs,
+              transformer: ($data.type == 'range-up' ? barChartRangeUpDataTransformer : barChartDataTransformer),
+              onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
+              onClick: function(d) {
+                if (d.obj.field != undefined) {
+                  if ($data.type == 'range-up') {
+                    viewModel.query.selectRangeUpFacet({count: d.obj.value, widget_id: d.obj.widget_id, from: d.obj.from, to: d.obj.to, cat: d.obj.field, 'exclude': false, is_up: d.obj.is_up});
+                  } else {
+                    viewModel.query.selectRangeFacet({count: d.obj.value, widget_id: d.obj.widget_id, from: d.obj.from, to: d.obj.to, cat: d.obj.field});
+                  }
+                } else {
+                  viewModel.query.toggleFacet({facet: d.obj, widget_id: d.obj.widget_id});
+                }
+              },
+              onSelectRange: function(from, to){ viewModel.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
+              onComplete: function(){ viewModel.getWidgetById($parent.id()).isLoading(false) } }"
+            />
+            <div class="clearfix"></div>
+          <!-- /ko -->
+    
+          <!-- ko if: dimension() == 2 -->
+            <div data-bind="barChart: {datum: {counts: counts(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(),
+              isPivot: true,
+              fqs: $root.query.fqs,
+              transformer: pivotChartDataTransformer,
+              onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
+              onClick: function(d) {
+                $root.query.togglePivotFacet({facet: d.obj, widget_id: id()});
+              },
+              onComplete: function(){ viewModel.getWidgetById($parent.id()).isLoading(false) } }"
+            />
+            <div class="clearfix"></div>
+          <!-- /ko -->
+    
+          <!-- ko if: dimension() == 3 -->
+          <div data-bind="timelineChart: {datum: {counts: counts(), extraSeries: extraSeries(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(), field: field, label: label(), transformer: timelineChartDataTransformer,
+            type: $root.collection.getFacetById($parent.id()).properties.timelineChartType,
+            fqs: $root.query.fqs,
+            onSelectRange: function(from, to){ $root.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
+            onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
+            onClick: function(d){ $root.query.selectRangeFacet({count: d.obj.value, widget_id: $parent.id(), from: d.obj.from, to: d.obj.to, cat: d.obj.field}) },
+            onComplete: function(){ $root.getWidgetById($parent.id()).isLoading(false) }}" />
+            <div class="clearfix"></div>
+          <!-- /ko -->
 
-      <!-- ko with: $parent -->
-
-      <!-- ko if: dimension() == 1 -->
-        <div data-bind="barChart: {datum: {counts: counts(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(), field: field, label: label(),
-          fqs: $root.query.fqs,
-          transformer: ($data.type == 'range-up' ? barChartRangeUpDataTransformer : barChartDataTransformer),
-          onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
-          onClick: function(d) {
-            if (d.obj.field != undefined) {
-              if ($data.type == 'range-up') {
-                viewModel.query.selectRangeUpFacet({count: d.obj.value, widget_id: d.obj.widget_id, from: d.obj.from, to: d.obj.to, cat: d.obj.field, 'exclude': false, is_up: d.obj.is_up});
-              } else {
-                viewModel.query.selectRangeFacet({count: d.obj.value, widget_id: d.obj.widget_id, from: d.obj.from, to: d.obj.to, cat: d.obj.field});
-              }
-            } else {
-              viewModel.query.toggleFacet({facet: d.obj, widget_id: d.obj.widget_id});
-            }
-          },
-          onSelectRange: function(from, to){ viewModel.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
-          onComplete: function(){ viewModel.getWidgetById($parent.id()).isLoading(false) } }"
-        />
-        <div class="clearfix"></div>
-      <!-- /ko -->
-
-      <!-- ko if: dimension() == 2 -->
-        <div data-bind="barChart: {datum: {counts: counts(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(),
-          isPivot: true,
-          fqs: $root.query.fqs,
-          transformer: pivotChartDataTransformer,
-          onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
-          onClick: function(d) {
-            $root.query.togglePivotFacet({facet: d.obj, widget_id: id()});
-          },
-          onComplete: function(){ viewModel.getWidgetById($parent.id()).isLoading(false) } }"
-        />
-        <div class="clearfix"></div>
-      <!-- /ko -->
-
-      <!-- ko if: dimension() == 3 -->
-      <div data-bind="timelineChart: {datum: {counts: counts(), extraSeries: extraSeries(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(), field: field, label: label(), transformer: timelineChartDataTransformer,
-        type: $root.collection.getFacetById($parent.id()).properties.timelineChartType,
-        fqs: $root.query.fqs,
-        onSelectRange: function(from, to){ $root.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
-        onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
-        onClick: function(d){ $root.query.selectRangeFacet({count: d.obj.value, widget_id: $parent.id(), from: d.obj.from, to: d.obj.to, cat: d.obj.field}) },
-        onComplete: function(){ $root.getWidgetById($parent.id()).isLoading(false) }}" />
-        <div class="clearfix"></div>
-      <!-- /ko -->
-      
-    <!-- /ko -->
-             
-##              <div data-bind="attr:{'id': 'pieChart_'+id()}, pieChart: {data: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]),
-##                    transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" class="chart"></div>
-##    
-##              <div data-bind="attr:{'id': 'barChart_'+id()}, barChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]), hideSelection: true,
-##                    transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true},  stacked: true, showLegend: true, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
-##    
-##              <div data-bind="attr:{'id': 'lineChart_'+id()}, lineChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
-##                    transformer: multiSerieDataTransformerGrid, showControls: false }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
-##    
-##              <div data-bind="attr:{'id': 'leafletMapChart_'+id()}, leafletMapChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
-##                    transformer: leafletMapChartDataTransformerGrid, showControls: false, height: 380, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP, forceRedraw: true}" class="chart"></div>
-##              <div class="clearfix"></div>
+           <!-- /ko -->
+         <!-- /ko -->               
+
+         <!-- ko if: widgetType() == 'resultset-widget' -->
+            <div data-bind="attr:{'id': 'pieChart_'+id()}, pieChart: {data: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]),
+                  transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" class="chart"></div>
+  
+            <div data-bind="attr:{'id': 'barChart_'+id()}, barChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]), hideSelection: true,
+                  transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true},  stacked: true, showLegend: true, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
+  
+            <div data-bind="attr:{'id': 'lineChart_'+id()}, lineChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
+                  transformer: multiSerieDataTransformerGrid, showControls: false }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
+  
+            <div data-bind="attr:{'id': 'leafletMapChart_'+id()}, leafletMapChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
+                  transformer: leafletMapChartDataTransformerGrid, showControls: false, height: 380, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP, forceRedraw: true}" class="chart"></div>
+            <div class="clearfix"></div>
+         <!-- /ko -->
+         
            </div>
          </div>
 
     </div>
   </div>
 
-##   <!-- /ko -->
 </script>
 
 
@@ -1907,8 +1696,7 @@ ${ dashboard.layout_skeleton() }
       <div class="clearfix"></div>
     </div>
 
-      ##<span data-bind="template: {name: 'data-grid', data: $root.collection.getFacetById($parent.id())}"></span>
-      <span data-bind="template: { name: 'data-grid' }"></span>
+    <span data-bind="template: { name: 'data-grid' }"></span>
     ##<!-- /ko -->
    <!-- /ko -->
   </div>