Shareable accurate datatable links #5098
Conversation
johnnyporkchops
requested review from
patphongs,
rfultz,
JonellaCulmer,
cnlucas and
kathycarothers
johnnyporkchops
requested review from
fec-jli and
pkfec
and removed request for
fec-jli and
kathycarothers
There was a problem hiding this comment.
Excellent work @johnnyporkchops. I have tested your changes on feature space. Unlike in production, the filters are rendering on the URL and accurate counts/results are showing on the datatables.
There was a problem hiding this comment.
@johnnyporkchops Great work on this, it all works as expected 🎉 . I also appreciated all the comments you added to this, I only had very minor things to fix up.
tasks.py
Outdated
| @@ -76,7 +76,7 @@ def _detect_space(repo, branch=None, yes=False): | |||
| ('stage', lambda _, branch: branch.startswith('release')), | |||
| ('dev', lambda _, branch: branch == 'develop'), | |||
| # Uncomment below and adjust branch name to deploy desired feature branch to the feature space | |||
| # ('feature', lambda _, branch: branch == '[BRANCH NAME]'), | |||
| ('feature', lambda _, branch: branch == 'feature/4010-shareable-datatable-links'), | |||
There was a problem hiding this comment.
Comment out deploy to feature
fec/fec/static/js/modules/tables.js
Outdated
| } | ||
| }, 0); | ||
|
|
||
| // No Set-timrouot needed on pages without two filter panels... |
There was a problem hiding this comment.
"Set-timrouot" spelling needs correction
fec/fec/static/js/modules/tables.js
Outdated
| } | ||
| }); | ||
|
|
||
| // Put 0-secopnd, set-timeout on receipts/disbursements datatales so checkoxes are availale to check... |
There was a problem hiding this comment.
"0-secopnd" spelling needs correction. "datatales" spelling needs correction.
Codecov Report
@@ Coverage Diff @@
## develop #5098 +/- ##
===========================================
- Coverage 75.54% 74.93% -0.61%
===========================================
Files 125 125
Lines 8050 8118 +68
Branches 637 648 +11
===========================================
+ Hits 6081 6083 +2
- Misses 1969 2035 +66
Continue to review full report at Codecov.
|
Summary (required)
User feedback on https://www.fec.gov/data/committees/?committee_type=O FEC#10195
User feedback on https://www.fec.gov/data/disbursements/?cycle=2020&data_type=processed&two_year_transaction_period=2020&line_number=F3X-23 FEC#10194
This PR addresses two existing issues with some data tables that are causing inconsistencies between the URL querystring parameters and the state of the filters panel and taglist buttons.(active filters). Below is each issue and its fix.
Issue: Certain checkbox filters (in a checkbox dropdown widget) are not added to the URL querystring parameters when chosen, or do not remove from the querystring when manually removed via the filter panel or taglist buttons.
Fix: Use the correct macro variable in
committee_types.jinjafordata-nameattributes of fieldsets to ensure the Jinja tag resolves to the correct values for the specific datatable it is on. There should be at least one fieldset on the page for each of the threedata-namevariables. (designation, committee_type, and organization_type)Issue: Having checkboxes with differing
nameattributes inside a fieldset of a certaindata-nameconfuses existing logic that compares all filters in the filter panel against the filters indicated by querystring parameters. It expects a fieldsetsdata-nameand all of its childrens'nameattributes to be the same.Fix: Upon page load, programmatically activate all checkbox filters indicated in the querystring parameters (if they are not already activated by existing logic).
Also add three hidden empty fieldsets to
committee-types.jinjawithdata-namesof the three needed variables:(( designation }},{{ committee_type }}and{{ organization_type }}. Then name the other fieldsets with a descriptive data-name for grouping purposes, but not with one of the variable names or a Jinja tag that resolves to one of the variables.This will ensure that the URL matches the state of the filter panel and vice versa allowing datatable URLs to remain accurate when shared, bookmarked or refreshed.
Required reviewers
One frontend, one backend. Optional: one content/UX
Impacted areas of the application
These fixes are specifically for the
committee-type filterswhere we have checkbox filters who'snameattribute is different than its parent fieldset'sdata-nameattribute. The changes allow us to maintain this unique structure without confusing the existing logic that expects them to match.modified: data/templates/macros/filters/committee-types.jinja
modified: fec/static/js/modules/tables.js
Related PR
#5078
How to test
This branch is deployed to feature space, see pages below listed under "linked to feature"
checkout branch and
npm run build-jsTest adding
Lobbyist/Registrant PACas a filter on http://127.0.0.1:8000/data/committees/pac-party/ (or on feature)committee_designation=B?Test copy/pasting a URL with several query parameters into a browser (Please see list of important pages to test below)
Copy/paste this prod URL into a browser
https://www.fec.gov/data/committees/pac-party/?cycle=2020&organization_type=Vcommittee_type=Vto the URL after the page loads even though is was not in original URL?Pages important to test are any pages that use
committee-type filters:Linked to local:
Linked to feature:
Try to break it
Another test we should do is to compare the data returned from using OpenFEC against results from datatables to ensure the data is indeed filtered according to what the URL and filter panel/tags indicate.
I am not sure if this would be useful for testing or not, but there is also a spreadsheet from the research issue that documents which filters were problematic
Don't merge before reverting
tasks.pyto remove feature deploy directive