BL-823_fe_i_want_export_raw-data #25

publiminal · 2022-09-03T13:59:55Z

Description

This task implements a 'download data button' that allows a final user to download the whole data set in raw format (.csv) for their own consumption and run it in Excel or some other BI tool.

For this ticket was needed :

To perform a research about current/new js capabilities to create and download files instantly with a non-blocking ui.
To review libraries that already abstracted best options above.

Conclusions :
Backend :

It is expected to fetch a static .zip file containing a the whole dataset.
The fetched url should be included as .env var for easy further update.
currently : REACT_APP_DOWNLOAD_RAW_CSV_DATA_URL=http://localhost:3000/test-raw-data.zip
There is work to do in BE side to confirm this zipped .csv file is available to FE to download.

FrontEnd :

Axios is the chosen library since it was already installed and also is capable to fetch files with the new stream capabilities available since ES6 2015.
Added 2 libs to display a beautiful download progress and actually trigger the download action from the browser. All above means there is no any other backend call required.
Added friendly messages to the final user at every step of the process (start download, download in progress, finish download) using ant message component.

Video Link

Loom Video

Jira Link

BL-823

Type of change

New feature (non-breaking change which adds functionality)
This change requires a documentation update

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have removed unnecessary comments/console logs from my code
My changes generate no new warnings
I have checked my code and corrected any misspellings
No duplicate code left within changed files
Size of pull request kept to a minimum
Pull request description clearly describes changes made & motivations for said changes

XavierTwitty

I really enjoyed the UX for the download button, the progress bar feature makes the site more appealing to me. The code looks clean and easy to read. Good use of reusability.

lisamdespain

Greetings from the CoderHeroes team! I was excited to see this being implemented because we have a component that could use a download to csv feature. Curious if you considered installing react-csv instead of the library you used? ALSO - great job on the progress bar feature. Looks great! If you fix the linting errors (looks like missing semicolons), this should be good to go.

publiminal · 2022-09-07T01:44:42Z

Greetings from the CoderHeroes team! I was excited to see this being implemented because we have a component that could use a download to csv feature. Curious if you considered installing react-csv instead of the library you used? ALSO - great job on the progress bar feature. Looks great! If you fix the linting errors (looks like missing semicolons), this should be good to go.

Hi @lisamdespain : I'll be more than glad you can reuse this work !
Use case in mind to create the component was fetch a url (.zip file containing a .csv file) and download it instantly without any data transformation or blocking the UI. So, the library chosen as 'save-window-opener' just have specific code to trigger the file-to-save-window only (js vanilla code). All main preparation work (fetching / streaming the file) is previously and separately made by Axios library.

Reviewing the react-csv will work better for cases when you want to download a .csv in memory already but prior data transformations are needed. So, the 'react-csv' library will work beautifully handling data transformations from array / object / json / string to csv. In addition,it also include typesecript for linter validation, and all react component scafolding to import it as a full react component.

Thanks for your review !

publiminal · 2022-09-07T01:45:33Z

reopening PR ! Closed by mistake !

…le instead

…s upon navigating with office heatmap in view on All

XavierTwitty

The components look good , like your use of Redux . Great work!

lisamdespain

Greetings from CoderHeroes! I was happy to see this implemented, as we had something similar over on CH that needs to be implemented, except we were planning on using react-csv. I like how you did this one, especially the progress bar. Great job!

MaxT6

Wow! Really extensive PR. Great job being so detailed in exporting the raw data.

MaxT6 · 2022-09-16T18:44:38Z

src/components/common/DownloadButton.js

+function DownloadButton(props){
+  const info = props.downloadBtnInfo || defaultInfo;
+  const { BTN_TXT, MSG_LOADING, DOWNLOAD_TXT, MSG_DOWNLOAD_FINISHED, STYLING } = info;
+  const [txt, setTxt] = useState(BTN_TXT);


Nice job using a hook to update the button text. Very dynamic!

MaxT6 · 2022-09-16T18:48:34Z

src/components/pages/DataVisualizations/AllOfficesRoute.jsx

+  const { set_view } = props;
+  return (
+    <div className="all-offices-route">
+      <GraphWrapper set_view={set_view} />


Nice job deconstructing set_view from props and passing that to the GraphWrapper component

MaxT6 · 2022-09-16T18:54:53Z

src/components/pages/DataVisualizations/GraphWrapper.jsx

+      case 'time-series':
+        map_to_render = <TimeSeriesAll />;
+        break;
+      case 'office-heat-map':


Good idea to utilize switch case here instead of if else

MaxT6 · 2022-09-16T19:12:31Z

src/state/actionCreators/index.js

-  SET_DATE_FILTER_FORMAT,
-  SET_ASYLUM_OFFICE_FILTER,
-  SET_CONTINENT_FILTER,
-  SET_GEOPOLITICAL_FILTER,


Excellent job cleaning up the imports!

ezra-casas

Loving the new and improved code! Ya'll doing wonderous work!

AlexiusThomas

Great work and great explanation of the values

publiminal and others added 9 commits August 30, 2022 11:22

init button scafolding

b0011b4

added test raw data fileg

16b0f36

addedd Downloadbutton as component

42a7cab

added main download functionality . POC succeded

fd4bfb6

added ~axios-progress-bar and js-file-download libs

86c35b6

added styling and vars cleanup

243cd8d

added default info button if no received in props

8d18a69

updated styles to be overwritten out of component

b60cbd2

BL-821 added visualization download functionality

c4bc8b7

publiminal requested a review from ashtilawat23 September 3, 2022 14:03

XavierTwitty previously approved these changes Sep 5, 2022

View reviewed changes

lisamdespain previously approved these changes Sep 6, 2022

View reviewed changes

publiminal closed this Sep 7, 2022

publiminal reopened this Sep 7, 2022

added missing semicolons. Thanks linter !

7ec0b8f

publiminal dismissed stale reviews from lisamdespain and XavierTwitty via 7ec0b8f September 7, 2022 01:56

publiminal and others added 11 commits September 6, 2022 22:05

removed unsused raw .csv file. For local testing purposes use .zip fi…

de1de7a

…le instead

initial replacement of files in DataVisualizations

5897b9c

rethink folder structure

470ecb2

begin routing

cfec9e3

basic routing between HeatMap components

62a16de

clarify ViewSelect

1ca5a62

fix nested routing

2c93444

skeleton layout

d156bf7

drop-down menu to select office

9662d81

fix bug where office heatmap view would be shown within single office…

2b3b1c2

…s upon navigating with office heatmap in view on All

change drop-down to be ant design style

54d2b27

Austin-T-Johnson and others added 23 commits September 6, 2022 22:38

adds link to external page via read more button

fb31677

adds iPhone SE mobile styling

c8fc0f4

adds ant d button component to landing page, changes styling in footer

131bd55

adds media queries

adf3e5c

fixes mobile-large media query

ee8e5d5

fixes mobile-large media query

a8ca7a4

removes unwanted commented out code

71766ae

rough draft of landing page

a4dc95e

adds link to external page via read more button

4ec9ab3

adds iPhone SE mobile styling

265a038

adds ant d button component to landing page, changes styling in footer

a7553dd

adds media queries

98afa82

fixes mobile-large media query

2ac3360

fixes mobile-large media query

2f9691a

add meta tags in index

47f1d7f

adds xml sitemap for SEO purposes.

2a5836d

rebasing fixing conflicts

28b81c7

rebasing fixing conflicts

d996351

added styling and vars cleanup

27bb032

added default info button if no received in props

5ee400f

rebasing fixing conflicts

d5cbebf

added missing semicolons. Thanks linter !

68df0f3

rebasing with latest PR

e9a75b5

XavierTwitty approved these changes Sep 7, 2022

View reviewed changes

publiminal requested review from lisamdespain and removed request for ashtilawat23 September 9, 2022 05:27

lisamdespain approved these changes Sep 9, 2022

View reviewed changes

MaxT6 approved these changes Sep 16, 2022

View reviewed changes

ezra-casas approved these changes Sep 19, 2022

View reviewed changes

AlexiusThomas reviewed Oct 24, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BL-823_fe_i_want_export_raw-data #25

BL-823_fe_i_want_export_raw-data #25

publiminal commented Sep 3, 2022

XavierTwitty left a comment

lisamdespain left a comment •

edited

Loading

publiminal commented Sep 7, 2022 •

edited

Loading

publiminal commented Sep 7, 2022

XavierTwitty left a comment

lisamdespain left a comment

MaxT6 left a comment

MaxT6 Sep 16, 2022

MaxT6 Sep 16, 2022

MaxT6 Sep 16, 2022

MaxT6 Sep 16, 2022

ezra-casas left a comment

AlexiusThomas left a comment

BL-823_fe_i_want_export_raw-data #25

Are you sure you want to change the base?

BL-823_fe_i_want_export_raw-data #25

Conversation

publiminal commented Sep 3, 2022

Description

Video Link

Jira Link

Type of change

Checklist:

XavierTwitty left a comment

Choose a reason for hiding this comment

lisamdespain left a comment • edited Loading

Choose a reason for hiding this comment

publiminal commented Sep 7, 2022 • edited Loading

publiminal commented Sep 7, 2022

XavierTwitty left a comment

Choose a reason for hiding this comment

lisamdespain left a comment

Choose a reason for hiding this comment

MaxT6 left a comment

Choose a reason for hiding this comment

MaxT6 Sep 16, 2022

Choose a reason for hiding this comment

MaxT6 Sep 16, 2022

Choose a reason for hiding this comment

MaxT6 Sep 16, 2022

Choose a reason for hiding this comment

MaxT6 Sep 16, 2022

Choose a reason for hiding this comment

ezra-casas left a comment

Choose a reason for hiding this comment

AlexiusThomas left a comment

Choose a reason for hiding this comment

lisamdespain left a comment •

edited

Loading

publiminal commented Sep 7, 2022 •

edited

Loading