Reuters tutorial: step 9

Table of Contents

• Reuters tutorial
• Step 1: Talk to Solr
• Step 2: Add a results widget
• Step 3: Add a pager widget
• Step 4: Add a tagcloud widget
• Step 5: Display the current filters
• Step 6: Add a free-text widget
• Step 7: Add an autocomplete widget
• Step 8: Add a map widget
• Step 9: Add a calendar widget
• Step 10: Extra credit

Adding a calendar widget will introduce the Solr date faceting parameters.

First, update the Solr parameters for faceting in reuters.js:

var params = {
  ...
  'facet.date': 'date',
  'facet.date.start': '1987-01-01T00:00:00.000Z/DAY',
  'facet.date.end': '1987-12-31T00:00:00.000Z/DAY+1DAY',
  'facet.date.gap': '+1DAY',
  ...
};

Create a new widget, CalendarWidget.js, inheriting from AbstractFacetWidget:

(function ($) {
AjaxSolr.CalendarWidget = AjaxSolr.AbstractFacetWidget.extend({
});
})(jQuery);

Add the JavaScript and CSS files. We will be using jQuery UI’s Datepicker for the calendar:

<script src="widgets/CalendarWidget.js"></script>

And add an instance of the widget to the Manager in reuters.js:

Manager.addWidget(new AjaxSolr.CalendarWidget({
  id: 'calendar',
  target: '#calendar',
  field: 'date'
}));

Now, we’re ready to implement afterRequest:

afterRequest: function () {
  var self = this;
  $(this.target).datepicker('destroy').datepicker({
    dateFormat: 'yy-mm-dd',
    defaultDate: new Date(1987, 2, 1),
    maxDate: $.datepicker.parseDate('yy-mm-dd', this.manager.store.get('facet.date.end').val().substr(0, 10)),
    minDate: $.datepicker.parseDate('yy-mm-dd', this.manager.store.get('facet.date.start').val().substr(0, 10)),
    nextText: '>',
    prevText: '<',
    beforeShowDay: function (date) {
      var value = $.datepicker.formatDate('yy-mm-dd', date) + 'T00:00:00Z';
      var count = self.manager.response.facet_counts.facet_dates[self.field][value];
      return [ parseInt(count) > 0, '', count + ' documents found!' ];
    },
    onSelect: function (dateText, inst) {
      if (self.add('[' + dateText + 'T00:00:00Z TO ' + dateText + 'T23:59:59Z]')) {
        self.doRequest();
      }
    }
  });
}

There is nothing new or exciting here; we are merely implementing some of the event handlers that the jQuery UI Datepicker exposes, in order to call the add and doRequest API methods we have seen before. The only peculiar bit of code is Solr’s DateMathParser format.

[What we have so far]

If you click on a date in the calendar, the corresponding facet field-facet value pair will appear under “Current Selection.” The facet values will probably be long and verbose. To shorten them, we must replace one line in CurrentSearchWidget.js:

links.push($('<a href="#"></a>').text('(x) ' + fq[i]).click(self.removeFacet(fq[i])));

With:

if (fq[i].match(/[\[\{]\S+ TO \S+[\]\}]/)) {
  var field = fq[i].match(/^\w+:/)[0];
  var value = fq[i].substr(field.length + 1, 10);
  links.push($('<a href="#"></a>').text('(x) ' + field + value).click(self.removeFacet(fq[i])));
}
else {
  links.push($('<a href="#"></a>').text('(x) ' + fq[i]).click(self.removeFacet(fq[i])));
}

Now, the facet values will be short and concise.

[What we have so far]

That’s it for building the AJAX Solr demo site. Congrats!

Let’s wrap up with suggestions for future work.