feat: redesign explaining ratings

mturoci commented 3 years ago

This PR tries to make the UI look polished while keeping code easy to follow and understand.

Previous UX:

https://user-images.githubusercontent.com/64769322/111164687-9705d180-859e-11eb-9676-f714feff3e56.mov

New UX:

https://user-images.githubusercontent.com/64769322/111164739-a1c06680-859e-11eb-9d4d-5a0718bbdef5.mov

Makes layout look good on desktop devices (switched to flex layout instead of grid).
Removes unnecessary libs in from requirements.txt.
Exchanges dynamic filters for static ones - cleaner code and better looking UI.
Renders height-oriented or width-oriented word clouds depending on layout.
Minor README markdown refactoring.

Blocked by: h2oai/wave#150, h2oai/wave#611

lo5 commented 3 years ago

@mturoci - I'm not convinced about h2oai/wave#611 h2oai/wave#610. It's special-casing empty zones, and I feel like it's better behavior for the UI to exactly follow the layout spec.

For this particular app, a better way might be to use a single zone with both the 'original' and 'difference' panels in it, so that adding/removing panels automatically adjusts their relative widths.

mturoci commented 3 years ago

Thanks for the suggestion @lo5! Works like a charm.

h2oai / wave-apps

feat: redesign explaining ratings #47