Create visualizations GraphQL endpoint
Problem to solve
Currently, the product analytics visualizations are retrieved through the file REST API and read directly into the frontend code.
async loadAvailableVisualizations() {
// Loading all visualizations from file
this.availableVisualizations = [];
if (this.customDashboardsProject) {
const visualizations = await getProductAnalyticsVisualizationList(
this.customDashboardsProject,
);
for (const visualization of visualizations) {
const fileName = visualization.file_name;
if (isValidConfigFileName(fileName)) {
const id = configFileNameToID(fileName);
this.availableVisualizations.push({
id,
name: id,
});
}
}
}
},
This should be moved to the backend to consolidate with the dashboards GraphQL endpoint so that there is one SSOT for the dashboard list
Proposal
Add a new visualizations GraphQL endpoint which retrieves all visualizations for a project (or config project), as well as the ability to retrieve a single visualization by its slug.
In a similar vein to Define snowplow built-in analytics dashboards (!118088 - merged)
Implementation plan
- Create new field on
ProjectType
to connect to the (already existing)VisualizationType
. - Add a
slug
field toVisualizationType
which is an underscored, lowercased version of thetype
value. - Create a new GraphQL resolver to load all visualizations for a project for this new GraphQL edge. The resolver should be aware of loading visualizations either for the project, or its linked configuration project if it exists.
- Be mindful of performance issues on projects with large numbers of visualisations.
Example queries
All visualisations
query {
project(fullPath: "test") {
name
productAnalyticsVisulizations {
nodes {
slug
type
options
data
}
}
}
}
Specific visualisation
query {
project(fullPath: "test") {
name
productAnalyticsVisulizations(type: "{VISUALIZATION_TYPE}") {
nodes {
slug
type
options
data
}
}
}
}
Edited by Max Woolf