Integrate Dash reports into the app

[adamkendis]

Description

We have decided to use Dash from Plotly as the main reporting engine for 311 Data reports. The main benefit is flexibility and the authoring workflow. They are generated server-side with a dedicated server and the resulting interactive reports have their data cached nightly so they will be performant. The best plan seems to be to host the reports in iframes in the client. Some work has been done to align the design and styling.

Action Items

• Confirm the iframe solution as the best
• Modify the report CSS per UX direction
• Change any report design parameter that can't be handled in CSS (e.g. graph layout, axes, etc.)
• Figure out how to make the list of reports available in the client
• Explore linking between reports and the map (and vice-versa)

Resources

• Jupyter Notebook with reports
• Report Server
• Report in iframe

[rufataliy]

I would like to take part in it and other visualization tasks.

[adamkendis]

Idea from @mattyweb :

Chart demos via jupyter notebook.
Relevant libraries: jupyter-dash, pandas, plotly (python)

https://colab.research.google.com/drive/1_22tL048ZfAGUt7Ftj4VtW5BzWQ6om7b?usp=sharing#scrollTo=dvy1IUS6F23x

Benefits: Data-first over design-first approach to visualizations. Allows data team to easily explore and quickly generate plotly charts via Jupyter notebook.
Unknowns: Best method for integrating with React client.

[mattyweb]

I finished the prototype version of this: https://dash-reporting.tofn9kh9mlm7g.us-east-1.cs.amazonlightsail.com/

Been tracking in a separate card: https://github.com/hackforla/311-data/projects/10#card-54099353

Next step is to figure out how to include in the client. I'm thinking there should be a menu that has those 3 reports/links and they should appear in an iframe...but there may be a more elegant way to do this. Let me know if I can help!

[adamkendis]

Client rendering the dash prototype /dashboards endpoint in an iframe:
http://plotly-experimental.s3-website-us-east-1.amazonaws.com/plotly-serverside

Looking pretty good. I spent a little time translating the python plotly into client-side react-plotly. This isn't working yet and now seems like a poor use of time when the Dash app in an iframe works.

[adamkendis]

Suggestion from @rufataliy
https://pivottable.js.org/examples/

The UI might be too confusing for basic users.

[mattyweb]

To clarify, this task is really about exploring and finalizing the approach. I'll open another for building the report page.

[danarchen]

@adamkendis could you detail what the requirements are for the UX/UI team?

[adamkendis]

@danarchen The reports have been merged in and can be viewed on dev.311-data.org. Let's discuss this at tonight's meeting.

[mattyweb]

I think this one is done. For this version we'll just include the Dash reports using the menu of the React app. I don't think we need to worry about linking between reports and the map in v2. But we should look into that in a follow-on release.

[mattyweb]

I added a responsive layout to the reports. They now look at least tolerable on mobile.