feat(mcp): support chart visualization for HogQL queries#53806
Open
posthog[bot] wants to merge 1 commit intomasterfrom
Open
feat(mcp): support chart visualization for HogQL queries#53806posthog[bot] wants to merge 1 commit intomasterfrom
posthog[bot] wants to merge 1 commit intomasterfrom
Conversation
…lizationNode HogQL queries created via MCP always produced table views because the DataVisualizationNode schema lacked display and chartSettings fields. This adds display type selection (line graph, bar, area, bold number, table) and chart axis configuration to the MCP tool schema, updates analyzeQuery to detect chart visualizations, and adds prompt guidance so the LLM knows when to use line charts for time-series data. Generated-By: PostHog Code Task-Id: 05b5a308-0893-459c-802f-972f80e59a59
Member
|
@fercgomes in case you wanna own this! also cc @skoob13 since you might know if this is a good solution. More context in https://posthog.slack.com/archives/C0ACRAMJUAG/p1775669298592529 |
Contributor
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
67
to
73
| // DataVisualizationNode wraps HogQL queries for custom visualizations | ||
| if (q.kind === 'DataVisualizationNode' && q.source && typeof q.source === 'object') { | ||
| // When a chart display type is set, treat as trends-style visualization | ||
| if (typeof q.display === 'string' && CHART_DISPLAY_TYPES.has(q.display)) { | ||
| return { visualization: 'trends', innerKind: 'HogQLQuery' } | ||
| } | ||
| return { visualization: 'table', innerKind: 'HogQLQuery' } |
Contributor
There was a problem hiding this comment.
When a DataVisualizationNode with a chart display type is detected, analyzeQuery() returns visualization: 'trends' with no innerQuery. In run.ts, the 'trends' branch then returns results: queryResult.data.results. For a DataVisualizationNode wrapping a HogQL query, the PostHog API returns { results: [[row, ...], ...], columns: ['col1', 'col2'] }, so queryResult.data.results is raw row arrays without column names.
Component.tsx's inferVisualizationType then receives those raw arrays and:
isTrendsResultfails (items lack.data/.labels/.daysarrays)isHogQLResultfails (it's an array, not{columns, results})- The query-kind fallback only handles
TrendsQuery,FunnelsQuery, andHogQLQuery—DataVisualizationNodeis not covered
The result is null and the UI shows "This visualization type isn't supported in this view yet" instead of a chart. The chart feature is effectively silently broken end-to-end.
Two changes are needed together:
- In
run.ts, keep the{ columns, results }format forDataVisualizationNode(same as the table path), or add a dedicated'dataViz'branch that preserves columns. - In
Component.tsx, add aDataVisualizationNodecase toinferVisualizationType's query-kind fallback and a corresponding chart renderer that readschartSettingsfrom the query to map column names to positions.
Prompt To Fix With AI
This is a comment left during a code review.
Path: services/mcp/src/tools/shared.ts
Line: 67-73
Comment:
**Chart path returns results without column names, breaking UI rendering**
When a `DataVisualizationNode` with a chart display type is detected, `analyzeQuery()` returns `visualization: 'trends'` with no `innerQuery`. In `run.ts`, the `'trends'` branch then returns `results: queryResult.data.results`. For a DataVisualizationNode wrapping a HogQL query, the PostHog API returns `{ results: [[row, ...], ...], columns: ['col1', 'col2'] }`, so `queryResult.data.results` is raw row arrays without column names.
`Component.tsx`'s `inferVisualizationType` then receives those raw arrays and:
- `isTrendsResult` fails (items lack `.data`/`.labels`/`.days` arrays)
- `isHogQLResult` fails (it's an array, not `{columns, results}`)
- The query-kind fallback only handles `TrendsQuery`, `FunnelsQuery`, and `HogQLQuery` — `DataVisualizationNode` is not covered
The result is `null` and the UI shows _"This visualization type isn't supported in this view yet"_ instead of a chart. The chart feature is effectively silently broken end-to-end.
Two changes are needed together:
1. In `run.ts`, keep the `{ columns, results }` format for `DataVisualizationNode` (same as the table path), or add a dedicated `'dataViz'` branch that preserves columns.
2. In `Component.tsx`, add a `DataVisualizationNode` case to `inferVisualizationType`'s query-kind fallback and a corresponding chart renderer that reads `chartSettings` from the query to map column names to positions.
How can I resolve this? If you propose a fix, please make it concise.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When using the MCP to create dashboards/insights with HogQL queries, results always render as table views — even for time-series data that should be displayed as line charts. This is because:
DataVisualizationNodeSchemain the MCP only acceptedkindandsource, missing thedisplayandchartSettingsfields that the backend supportsanalyzeQuery()hardcodedDataVisualizationNodetovisualization: 'table'Changes
Schema (
services/mcp/src/schema/query.ts):displayfield toDataVisualizationNodeSchemawith enum values:ActionsLineGraph,ActionsBar,ActionsAreaGraph,ActionsTable,BoldNumberchartSettingsfield withxAxis,yAxis, andseriesBreakdownColumnconfigurationQuery analysis (
services/mcp/src/tools/shared.ts):analyzeQuery()now checks for chart display types onDataVisualizationNodeand returnsvisualization: 'trends'instead of always'table'Tool descriptions (
services/mcp/schema/tool-definitions.json):query-rundescription with guidance and example for wrapping HogQL queries inDataVisualizationNodewith chart settingsinsight-create-from-querydescription with visualization type selection guidanceHow did you test this code?
🤖 LLM context
Authored by PostHog Code agent. The fix addresses all three layers needed: schema (accepting the fields), runtime (detecting chart visualization), and prompt (guiding the LLM to use charts for time-series data).
Created with PostHog Code