Add date range filters to the search UI #2081

mmcfarland · 2017-07-25T13:28:19Z

Overview

Adds UI elements for collecting start and end date filters and passes them along to the existing API endpoint using the pre-existing querystring parameters. Does some light validation to ensure that
before < after, which would otherwise raise exceptions on the backend.

Also adds a small formatting improvement to the warning dialog for areas which are too large for WDC to handle.

Connects #1933

Demo

Added filter toggle

Filters exposed with date-picker

Validation response

Warning - before

Warning - after

Notes

I uncovered an issue that is visible here, but also on staging (though less pronounced), captured here: #2080. I also made a good-faith effort to match the styling shown in screenshots, but this could use some touch-ups as part of a final style pass on the larger feature.

I had to derive a bit of UX from the screenshot listed in the issue. My decisions on the behavior are as followed, and are open to feedback:

0, 1 or both dates can be filled in without a validation error. The backend appears to support this configuration.
The datepicker library handles making sure a date format is valid, so I only ensure that the date precedence is appropriate. If after < before in the WDC query, it will return an exception.
I didn't do validation on blur from the field, since that would be annoying if the user was changing the values and after changing one, had them temporarily in an invalid state. Validation is only run on search.
Toggling the filter keeps the date values in place, so they are there when you re-toggle. This means they are still used, even when hidden. This could be confusing, but in my opinion, it's not any clearer than having them disappear when you click "Hide Filters". Or if worse if they are not used when hidden, but are still there when you un-toggle. I'm open to "Hide Filters" just clearing them from state altogether as an alternative.
Hitting enter in a datebox will execute the search. At first, I didn't like that approach, but in practice, having search results displayed and going back and tweaking the date seemed like a natural workflow. Not having to tab into the query box to enter seems appropriate in that case.

Testing Instructions

A new JS dependency was added (datepicker), so npm install and rebundle the vendor and client assets.
Navigate to the search and execute a number of searches with and without dates, or partial dates.
Attempt to provide bad date values to the search.
Date range input should be reflected in the results.

This will be used for the date range filters for BigCZ catalog search.

ajrobbins · 2017-07-25T14:30:24Z

+1 for the UX decisions described in the Notes.

Toggling the filter keeps the date values in place, so they are there when you re-toggle. This means they are still used, even when hidden.

It sounds like a UI element like a flag or highlight of some kind would be useful to show that a filter is activated, even when the filter is hidden. We should address this in a design card. /cc @jfrankl

rajadain · 2017-07-25T14:43:50Z

src/mmw/js/src/data_catalog/views.js

+    },
+
+    onRender: function() {
+        $('.data-catalog-date-input').datepicker();


Need to import $ before we can use it. That's causing the linting errors:

$ kj npm run lint js/src/data_catalog/views.js: line 151, col 9, '$' is not defined. js/src/data_catalog/views.js: line 170, col 27, '$' is not defined. 2 errors

rajadain

Reviewed the code, looks well organized and straightforward. Going to run it now.

rajadain · 2017-07-25T15:03:24Z

src/mmw/js/src/data_catalog/views.js

                model: new modalModels.AlertModel({
                    alertMessage: "The bounding box of the current area of " +
-                                  "interest is " + Math.round(area) + " km², " +
+                                  "interest is " + formattedArea + "&nbspkm², " +


Missing semicolon: &nbspkm →  km

rajadain · 2017-07-25T15:03:33Z

src/mmw/js/src/data_catalog/views.js

                                  "which is larger than the current maximum " +
-                                  "area of " + MAX_AREA_SQKM + " km² supported " +
-                                  "for WDC.",
+                                  "area of " + MAX_AREA_FORMATTED + "&nbspkm² " +


rajadain · 2017-07-25T15:04:28Z

src/mmw/js/src/data_catalog/models.js

@@ -17,6 +17,8 @@ var Catalog = Backbone.Model.extend({
        id: '',
        name: '',
        description: '',
+        dateStart: null,


Consider changing to fromDate and toDate to match the API.

rajadain · 2017-07-25T15:10:00Z

src/mmw/npm-shrinkwrap.json

@@ -44,6 +44,11 @@
      "from": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.4.tgz",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.4.tgz"
    },
+    "bootstrap-datepicker": {


👏 I like the neatness of the shrinkwrap changes! There is a typo in the commit message though javascrip → javascript.

rajadain · 2017-07-25T15:30:46Z

A search with no dates is failing:

rajadain · 2017-07-25T15:38:17Z

src/mmw/js/src/data_catalog/views.js

+            after = moment(this.model.get('dateEnd'), dateFormat),
+            isValid = false;
+
+        if (!before || !after) {


Changing this to

if (!before.date() || !after.date())

fixes the issue of eager validation:

Looks like the validation message is behaving strangely in your screenshot, I'll revisit and make sure I didn't alter something as I was cleaning up my commits.

rajadain · 2017-07-25T15:46:47Z

src/mmw/js/src/data_catalog/templates/form.html

+        <input
+            class="data-catalog-date-input form-control"
+            data-date-range="start"
+            value="{{dateStart}}"


Before should map to dateEnd and After should map to dateStart, otherwise I get 2017 results when I ask for something before 11/8/2016:

The current setup is wrong:

since this describes an infinite date range with a gap in between. However, reading "After" come first and "Before" later could also be counterintuitive. Perhaps we should use other labels, like "From" and "To" or "Till".

Yeah, I found the labels problematic to map to the API attributes. I'll assume they were determined casually and come up with something that can be better understood.

rajadain

I'll take another look once the above issues have been addressed.

mmcfarland · 2017-07-25T18:08:31Z

Added a number of fixups which, in addition to some minor cleanup, alters the display of the date ranges so that it reads as "Between X and Y", to prevent confusion about which end of the spectrum a particular date can be on. This allows a more straightforward mapping from textbox -> variable -> api.

You can see the filters being applied in action, here:

The validation message is updated as well:

jfrankl · 2017-07-25T18:58:50Z

A few thoughts:

I prefer when the validation message is on its own line below the inputs. In some screen captures, it is displayed to the right of the inputs.

Would be good if there were a clear button to remove the date when one has been entered. The wireframes show a "X Reset" button after a date has been entered. An "X" button inside the inputs, on the right side, would also work.

Other than that, this looks good to me, and once it's in I can do some minor style cleanup.

rajadain

+1 tested. All cases work well, code looks great. Nice work!

rajadain · 2017-07-25T19:40:16Z

Tested the new design in a smaller window, the validation message is correctly below, not beside, the input fields:

Adds UI elements for collecting start and end date filters and passes them along to the existing API endpoint using the pre-exisitng query string parameters. Does some light validation to ensure that before < after, which would otherwise raise exceptions on the backend.

Uses formatted numbers and non-breaking spaces between the value and units.

The h2 element with the Data Source title on the search page had its size restricted by these css rules. Removing them allows the full element to be shown, as in other sidebar pages.

When a date filter is given a value, a clear icon is added to the element for easy removal.

mmcfarland · 2017-07-25T20:11:36Z

@rajadain Thanks for the review. I squashed my fixups, and added a new commit addressing @jfrankl's comment on the "clear" buttons. These weren't in the wireframes posted in the issue, but I interpreted it as:

They only show up when there is a value in the box, and clicking it will clear out the value. Adding this in created some unwanted visual effects (the box grows and shrinks if they are present/absent, and it's no longer flush with the edge). I attempted to restore my previous style, but think the effort would be better spent during the design pass. Could you give it one more spin?

rajadain · 2017-07-25T20:18:39Z

Taking another look.

rajadain

+1 tested the new stuff, works well!

Add datepicker javascrip library

c2f6c01

This will be used for the date range filters for BigCZ catalog search.

mmcfarland added the in progress label Jul 25, 2017

mmcfarland requested a review from rajadain July 25, 2017 13:28

mmcfarland assigned rajadain Jul 25, 2017

rajadain reviewed Jul 25, 2017

View reviewed changes

rajadain requested changes Jul 25, 2017

View reviewed changes

rajadain approved these changes Jul 25, 2017

View reviewed changes

rajadain assigned mmcfarland and unassigned rajadain Jul 25, 2017

Matthew McFarland added 4 commits July 25, 2017 16:05

Improve format of WDC size error

06d533c

Uses formatted numbers and non-breaking spaces between the value and units.

Don't restrict catalog header text size

2c502c2

The h2 element with the Data Source title on the search page had its size restricted by these css rules. Removing them allows the full element to be shown, as in other sidebar pages.

Add clear button to date filters

fc32018

When a date filter is given a value, a clear icon is added to the element for easy removal.

mmcfarland force-pushed the mjm/date-range-wdc branch from c5ed65a to fc32018 Compare July 25, 2017 20:07

rajadain approved these changes Jul 25, 2017

View reviewed changes

mmcfarland merged commit 31b93f9 into develop Jul 25, 2017

hectcastro removed the in progress label Jul 25, 2017

mmcfarland deleted the mjm/date-range-wdc branch July 25, 2017 20:34

rajadain added the BigCZ label Aug 7, 2017

rajadain mentioned this pull request Oct 16, 2017

Release 1.20.0 #2304

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add date range filters to the search UI #2081

Add date range filters to the search UI #2081

mmcfarland commented Jul 25, 2017

ajrobbins commented Jul 25, 2017 •

edited

Loading

rajadain Jul 25, 2017

rajadain left a comment

rajadain Jul 25, 2017

rajadain Jul 25, 2017

rajadain Jul 25, 2017

rajadain Jul 25, 2017

rajadain commented Jul 25, 2017

rajadain Jul 25, 2017

mmcfarland Jul 25, 2017 •

edited

Loading

rajadain Jul 25, 2017 •

edited

Loading

rajadain Jul 25, 2017

mmcfarland Jul 25, 2017

rajadain left a comment

mmcfarland commented Jul 25, 2017

jfrankl commented Jul 25, 2017

rajadain left a comment

rajadain commented Jul 25, 2017

mmcfarland commented Jul 25, 2017

rajadain commented Jul 25, 2017

rajadain left a comment

Add date range filters to the search UI #2081

Add date range filters to the search UI #2081

Conversation

mmcfarland commented Jul 25, 2017

Overview

Demo

Added filter toggle

Filters exposed with date-picker

Validation response

Warning - before

Warning - after

Notes

Testing Instructions

ajrobbins commented Jul 25, 2017 • edited Loading

Choose a reason for hiding this comment

rajadain left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajadain commented Jul 25, 2017

Choose a reason for hiding this comment

mmcfarland Jul 25, 2017 • edited Loading

Choose a reason for hiding this comment

rajadain Jul 25, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajadain left a comment

Choose a reason for hiding this comment

mmcfarland commented Jul 25, 2017

jfrankl commented Jul 25, 2017

rajadain left a comment

Choose a reason for hiding this comment

rajadain commented Jul 25, 2017

mmcfarland commented Jul 25, 2017

rajadain commented Jul 25, 2017

rajadain left a comment

Choose a reason for hiding this comment

ajrobbins commented Jul 25, 2017 •

edited

Loading

mmcfarland Jul 25, 2017 •

edited

Loading

rajadain Jul 25, 2017 •

edited

Loading