Download tool#6411
Conversation
- Separate the UI Logic - Add page (app) provider with theme - Move state elements into contex.tsx ( as per maps / scatter tools use ) - Remove data range, defaulting to DATE_ALL, updating the validation/url params. - Update facet fetching
- Add pill examples - Remove info_places references an info - Refactor stat_var_chooser access - Add download to shared vis tool components - Add redirects to allow pill link construction - Refactor dowload flash template
- Removes preview button, content reloads when a varStat is selected - Refactor messages and filters logics - Fix url based loader for pills - Reset content when options are emptied
|
Warning Gemini encountered an error creating the summary. You can try again by commenting |
|
@nick-nlb ready for review, let me know if you need more context. |
nick-nlb
left a comment
nick-nlb
left a comment
There was a problem hiding this comment.
Thank you Pablo for all of this!
There are some inline comments, but I'll put a couple of behavioral notes here.
Mismatch of responsive breakpoints.
- View in a wide desktop view
- Select a location (say “United States”)
- Select a breakdown (say “State”)
- You will see “Pick a statistical variable in the left pane” as well as the statistical variable explorer on the left.
- Slowly shrink the viewport
- At a certain point, we flip into mobile/tablet, where the lefthand explorer disappears.
- At this point, the message correctly switches to “Pick a statistical variable using the “select variable” button above.”
- However, the button does not appear.
- Shrink the viewport further, and the button will appear.
Facet Selector State state correspond with selected stat vars [I've suggested a fix in the comments]
- Select “United States”
- Select “State”
- Select Health: Medical Condition: Diabetes: Percentage…”
- You will see two facets (these are correct).
- Now select Total Population
- We expect 15 facets now be available (but we only see the two).
- Refresh the page - you will see fifteen.
Remove preview and validation state management from the download context since they are no longer used. This includes removing PreviewWrapper and ValidationWrapper interfaces, and their associated state from useInitialContext(). Also update loadStateFromURL to accept only the setOptions function instead of the entire context object, and destructure facet methods directly for cleaner code.
Remove the maximum 5 statistical variable constraint and the associated modal dialog. Update the download tool to support single stat var selection at a time, replacing the previous selection instead of accumulating multiple variables. Simplify stat_var_chooser component by removing unused modal UI and state management logic.
Move variables and facets display into the preview card section for better organization. This includes: - Wrapping variables and facet selector in a Card inside the preview - Updating button label to "Download CSV" for clarity - Converting Preview component from Card to div (Card moved to parent) - Adding error handling for URL parameter JSON parsing - Converting window.onhashchange to useEffect for proper cleanup
Add @emotion/react usage and theming to the data download tool. Import css and useTheme, apply theme.spacing for layout, replace Card with FormBox using flexDirection, add a responsive "select variable" Button, and remove unused imports. Also update the Preview component to use emotion styles (max-width, overflow, padding/margin) and useTheme. Minor layout and styling cleanup for a more consistent, theme-aware UI.
Add a short introductory paragraph to the Data Download Tool page and refactor the preview area into a bordered card with separated header (facet selector) and content region for improved spacing and UX. Also adjust the Preview component's container to use flex column layout to better align child elements. Files changed: static/js/tools/download/page.tsx, static/js/tools/download/preview.tsx.
nick-nlb
left a comment
nick-nlb
left a comment
There was a problem hiding this comment.
Thank you Pablo!
Have a look at the comments - and could we also update the description, screenshots to reflect the design changes since the PR was originally created?
|
@pablonoel Some questions to consider:
|
New PlaceTag componen as an outlined-pill variant for single-select place pickers. Update place_search_bar.tsx to: import emotion css/jsx pragma, use PlaceTag when numPlacesLimit === 1, add removePlaceAndRefocus and focusInputOnUpdate to ensure the autocomplete input is refocused after removing the single selected place, and keep existing Chip behavior for multi-select. Adjust styles in static/css/_search_place.scss to target #location-field.input-area-hidden #ac and prevent flex growth when hidden.
Update download tool UI and caching: change i18n messages for the download tool (title/subtitle/placeholder) and remove an old go-back message. In page.tsx, include selectedStatVars keys in facetListCacheKey so cache varies by chosen stat vars, replace hardcoded title/subtitle/placeholder with intl.formatMessage usages (and pass placeholder to the search component), and switch hashchange handling to addEventListener/removeEventListener for proper cleanup. Co-Authored-By: Nicholas Blumberg <41446765+nick-nlb@users.noreply.github.com>
Yes to both, I can take care of the button. |
To use current button component.
|
nick-nlb
left a comment
nick-nlb
left a comment
There was a problem hiding this comment.
Thank you for the updates!
One item left in the comments, as well as another item to still be addressed:
The removal of the stat var from the column names (Date:Median_Age_Person -> Date), and the move of the stat var name into the file download.
The download tool was reusing instruction messages from the map tool. This change adds dedicated instruction messages for the download tool's variable selection UI.
- Always display facet selector in download tool, showing appropriate message when no alternatives exist - Add mode-specific message for download tool's single facet case - Keep stat var widget open after selection regardless of place type changes - Add styling for no-facet message text in download page
Introduce a legacy/old download tool frontend and wire a feature flag to toggle it. Added a new static/js/tools/old_download React implementation (page, preview, info, stat_var_chooser, mocks, tests and snapshot) and a webpack entry (old_download). Server changes: add DOWNLOAD_TOOL_FEATURE_FLAG constant, update /tools/download route to choose between new download UI or legacy info+old_download bundle, and update download.html template to render either UI and include download.js or old_download.js accordingly. Enabled download_tool flag in multiple feature-flag config files (local/dev/staging/custom/autopush).
Implements a new DOWNLOAD_TOOL_FEATURE_FLAG to conditionally enable the new download tool functionality. The FacetSelector now returns null when in download mode with the flag disabled, and PlaceSearchBar only uses single-select mode when the flag is enabled. Refactor radio button type checking across multiple components to use a new isRadioButtonType() function that respects the feature flag. This allows the legacy download tool (multi-select via checkboxes) to coexist with the new download tool (single-select via radio buttons).
|
Feature flag implementation is up, there is some extra logic that needed to be implemented on the stat_var_chooser in order to accommodate for both ways to coexist, other than that when the feature flag is inactive, things should look and work exactly as they where. |
nick-nlb
left a comment
nick-nlb
left a comment
There was a problem hiding this comment.
Thank you for the updates!
In addition to inline comments:
Column headers
Now that the tool displays data in tidy long, we no longer need to have the stat var in the headers. I.e., Source:Median_Income_Person should just be Source. The same applies for Date and Value.
However, let's include the stat var in the download file name itself (now that it is "global" to the file that is downloaded).
Download button reactivity
When you click the download button, it takes a second before the download is indicated by the browser, and the button itself gives you no indication that the click was received and that something is happening.
We solved this in the download dialog by animating a temporary check icon in the button that provides feedback to the user. You can see this by going to the explore page, opening any chart and clicking Copy Values. What do you think of using this here? (open to ideas on this).
Yes! changed the headers and good idea to implement the download button, all is done in the next push |
Rename the feature flag from 'download_tool' to 'use_new_download_tool' across all configs and code. Update CSV export to use simplified headers and include stat var DCIDs in filenames when the new download tool is enabled. Add download success feedback with icon transition. Reorganize isRadioButtonType function to stat_var_hierarchy util module.
… (disabling it and putting up a spinner).
… on feature flag state
nick-nlb
left a comment
nick-nlb
left a comment
There was a problem hiding this comment.
Thank you Pablo for all of this!
2 participants
This PR address the Download Tool refactor, it includes fixing the Facet selector and streamline the interface.
Things to consider: