Visualizations with hyphens in name fail to load once added to dashboard
Summary
When using the product analytics visualization designer to build a new visualization, saving a name with a hyphen (or other separator?) character in the title will cause issues once added to a dashboard.
- The visualization will no longer display the hyphenated name in the list of available visualizations
- A panel containing this visualization will fail to load with a "visualization file cannot be found" error.
Steps to reproduce
- Visit the Product Analytics visualization designer
- Create a new visualization, and give it a name containing a hyphenated word. e.g.
best deep-fried snacks
- Save the visualization
- Create a new dashboard, and add the visualization to it. (You may need to refresh to see your new viz)
- Notice your new visualization name is no longer correctly hyphenated
best deep fried snacks
- Save your new dashboard
- Refresh the page so the dashboard fully reloads
- Notice the panel is broken
What is the current bug behavior?
Visualization name loses some information.
Visualization fails to be loaded once added to a dashboard.
What is the expected correct behavior?
Name retained correctly.
Dashboard panels load as expected and display data.
Possible fixes
Document the bug/gap
Until there's a code fix adding a note to docs that hyphens aren't supported in visualizations and dashboards may suffice/provide a workaround.
Code fix
The issue may be due to the way we load the visualization yml and parse its filename into a human readable name. The file is written with a slugified name, e.g. best_deep-fried_snacks.yml
- note the spaces are converted to _
but the hyphen remains. The backend likely needs to be more specific in how it converts separators to spaces so that the name comes out with the hyphen. Instead, all separators are converted to spaces, best deep fried snacks
Because of these changes when loading the visualization name, when saving a new panel onto a dashboard the frontend will add an incorrect visualization reference to the dashboard - best_deep_fried_snacks
(the frontend runs the modified title back through slugify to create the reference).
So now when loading the dashboard, it looks for best_deep_fried_snacks.yml
instead of best_deep-fried_snacks.yml