@sqlrooms/vega 0.27.0-rc.4 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -41,6 +41,6 @@ export function VegaChartToolResult({ className, sqlQuery, vegaLiteSpec, options
41
41
  });
42
42
  }
43
43
  }, [toolCallId, currentSessionId, appliedSpec, setToolAdditionalData]);
44
- return (_jsx("div", { className: cn('flex flex-col gap-2', className), children: _jsx(VegaChartContainer, { spec: vegaLiteSpec, sqlQuery: sqlQuery, options: options, editable: editable, onSpecChange: handleSpecChange, onSqlChange: handleSqlChange, children: _jsx("div", { className: "relative", children: _jsx(VegaChartDisplay, { aspectRatio: 16 / 9, className: "pt-2", children: _jsxs(VegaLiteArrowChart.Actions, { className: "right-3", children: [_jsx(VegaExportAction, {}), editable && _jsx(VegaEditAction, { editorMode: editorMode })] }) }) }) }) }));
44
+ return (_jsx("div", { className: cn('flex max-w-full flex-col gap-2', className), children: _jsx(VegaChartContainer, { spec: vegaLiteSpec, sqlQuery: sqlQuery, options: options, editable: editable, onSpecChange: handleSpecChange, onSqlChange: handleSqlChange, children: _jsx("div", { className: "relative max-w-full overflow-x-auto", children: _jsx(VegaChartDisplay, { aspectRatio: 16 / 9, className: "pt-2", children: _jsxs(VegaLiteArrowChart.Actions, { className: "right-3", children: [_jsx(VegaExportAction, {}), editable && _jsx(VegaEditAction, { editorMode: editorMode })] }) }) }) }) }));
45
45
  }
46
46
  //# sourceMappingURL=VegaChartToolResult.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAwBxD;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,UAAU,EACV,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,MAAM,GACM;IACzB,8CAA8C;IAC9C,MAAM,qBAAqB,GAAG,cAAc,CAC1C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,4BAA4B,CACzC,CAAC;IACF,MAAM,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACvE,MAAM,gBAAgB,GAAG,cAAc,EAAE,EAAE,CAAC;IAE5C,6EAA6E;IAC7E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEvD,2CAA2C;IAC3C,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAA0B,EAAE,EAAE;QAC7B,cAAc,CAAC,OAAO,CAAC,CAAC;QACxB,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;YACnC,qBAAqB,CAAC,gBAAgB,EAAE,UAAU,EAAE;gBAClD,QAAQ,EAAE,UAAU;gBACpB,YAAY,EAAE,OAAO;aACtB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,qBAAqB,CAAC,CAClE,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAc,EAAE,EAAE;QACjB,aAAa,CAAC,MAAM,CAAC,CAAC;QACtB,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;YACnC,qBAAqB,CAAC,gBAAgB,EAAE,UAAU,EAAE;gBAClD,QAAQ,EAAE,MAAM;gBAChB,YAAY,EAAE,WAAW;aAC1B,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,qBAAqB,CAAC,CACnE,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,YAClD,KAAC,kBAAkB,IACjB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,YAG5B,cAAK,SAAS,EAAC,UAAU,YACvB,KAAC,gBAAgB,IAAC,WAAW,EAAE,EAAE,GAAG,CAAC,EAAE,SAAS,EAAC,MAAM,YACrD,MAAC,kBAAkB,CAAC,OAAO,IAAC,SAAS,EAAC,SAAS,aAC7C,KAAC,gBAAgB,KAAG,EACnB,QAAQ,IAAI,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,GAAI,IAC5B,GACZ,GACf,GACa,GACjB,CACP,CAAC;AACJ,CAAC","sourcesContent":["import {useStoreWithAi} from '@sqlrooms/ai';\nimport {cn} from '@sqlrooms/ui';\nimport {useCallback, useState} from 'react';\nimport {EmbedOptions, VisualizationSpec} from 'vega-embed';\nimport {VegaChartContainer} from './editor/VegaChartContainer';\nimport {VegaChartDisplay} from './editor/VegaChartDisplay';\nimport {EditorMode} from './editor/types';\nimport {VegaEditAction} from './VegaEditAction';\nimport {VegaExportAction} from './VegaExportAction';\nimport {VegaLiteArrowChart} from './VegaLiteArrowChart';\n\nexport type VegaChartToolResultProps = {\n className?: string;\n reasoning: string;\n sqlQuery: string;\n vegaLiteSpec: VisualizationSpec;\n options?: EmbedOptions;\n /**\n * Tool call ID for AI slice integration (enables persistence)\n */\n toolCallId?: string;\n /**\n * Whether editing is enabled\n * @default true\n */\n editable?: boolean;\n /**\n * Which editors to show when editing\n * @default 'both'\n */\n editorMode?: EditorMode;\n};\n\n/**\n * Renders a chart tool call with visualization using Vega-Lite.\n * Supports inline editing with AI slice persistence.\n *\n * @param {VegaChartToolResultProps} props - The component props\n * @returns {JSX.Element} The rendered chart tool call\n */\nexport function VegaChartToolResult({\n className,\n sqlQuery,\n vegaLiteSpec,\n options,\n toolCallId,\n editable = true,\n editorMode = 'both',\n}: VegaChartToolResultProps) {\n // AI slice integration for persisting changes\n const setToolAdditionalData = useStoreWithAi(\n (s) => s.ai.setSessionToolAdditionalData,\n );\n const currentSession = useStoreWithAi((s) => s.ai.getCurrentSession());\n const currentSessionId = currentSession?.id;\n\n // Track applied values for callbacks (to persist both spec and sql together)\n const [appliedSpec, setAppliedSpec] = useState(vegaLiteSpec);\n const [appliedSql, setAppliedSql] = useState(sqlQuery);\n\n // Callbacks to persist changes to AI slice\n const handleSpecChange = useCallback(\n (newSpec: VisualizationSpec) => {\n setAppliedSpec(newSpec);\n if (toolCallId && currentSessionId) {\n setToolAdditionalData(currentSessionId, toolCallId, {\n sqlQuery: appliedSql,\n vegaLiteSpec: newSpec,\n });\n }\n },\n [toolCallId, currentSessionId, appliedSql, setToolAdditionalData],\n );\n\n const handleSqlChange = useCallback(\n (newSql: string) => {\n setAppliedSql(newSql);\n if (toolCallId && currentSessionId) {\n setToolAdditionalData(currentSessionId, toolCallId, {\n sqlQuery: newSql,\n vegaLiteSpec: appliedSpec,\n });\n }\n },\n [toolCallId, currentSessionId, appliedSpec, setToolAdditionalData],\n );\n\n return (\n <div className={cn('flex flex-col gap-2', className)}>\n <VegaChartContainer\n spec={vegaLiteSpec}\n sqlQuery={sqlQuery}\n options={options}\n editable={editable}\n onSpecChange={handleSpecChange}\n onSqlChange={handleSqlChange}\n >\n {/* Chart with actions toolbar */}\n <div className=\"relative\">\n <VegaChartDisplay aspectRatio={16 / 9} className=\"pt-2\">\n <VegaLiteArrowChart.Actions className=\"right-3\">\n <VegaExportAction />\n {editable && <VegaEditAction editorMode={editorMode} />}\n </VegaLiteArrowChart.Actions>\n </VegaChartDisplay>\n </div>\n </VegaChartContainer>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"VegaChartToolResult.js","sourceRoot":"","sources":["../src/VegaChartToolResult.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAwBxD;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,UAAU,EACV,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,MAAM,GACM;IACzB,8CAA8C;IAC9C,MAAM,qBAAqB,GAAG,cAAc,CAC1C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,4BAA4B,CACzC,CAAC;IACF,MAAM,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACvE,MAAM,gBAAgB,GAAG,cAAc,EAAE,EAAE,CAAC;IAE5C,6EAA6E;IAC7E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEvD,2CAA2C;IAC3C,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAA0B,EAAE,EAAE;QAC7B,cAAc,CAAC,OAAO,CAAC,CAAC;QACxB,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;YACnC,qBAAqB,CAAC,gBAAgB,EAAE,UAAU,EAAE;gBAClD,QAAQ,EAAE,UAAU;gBACpB,YAAY,EAAE,OAAO;aACtB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,qBAAqB,CAAC,CAClE,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAc,EAAE,EAAE;QACjB,aAAa,CAAC,MAAM,CAAC,CAAC;QACtB,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;YACnC,qBAAqB,CAAC,gBAAgB,EAAE,UAAU,EAAE;gBAClD,QAAQ,EAAE,MAAM;gBAChB,YAAY,EAAE,WAAW;aAC1B,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,qBAAqB,CAAC,CACnE,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,YAC7D,KAAC,kBAAkB,IACjB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,YAG5B,cAAK,SAAS,EAAC,qCAAqC,YAClD,KAAC,gBAAgB,IAAC,WAAW,EAAE,EAAE,GAAG,CAAC,EAAE,SAAS,EAAC,MAAM,YACrD,MAAC,kBAAkB,CAAC,OAAO,IAAC,SAAS,EAAC,SAAS,aAC7C,KAAC,gBAAgB,KAAG,EACnB,QAAQ,IAAI,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,GAAI,IAC5B,GACZ,GACf,GACa,GACjB,CACP,CAAC;AACJ,CAAC","sourcesContent":["import {useStoreWithAi} from '@sqlrooms/ai';\nimport {cn} from '@sqlrooms/ui';\nimport {useCallback, useState} from 'react';\nimport {EmbedOptions, VisualizationSpec} from 'vega-embed';\nimport {VegaChartContainer} from './editor/VegaChartContainer';\nimport {VegaChartDisplay} from './editor/VegaChartDisplay';\nimport {EditorMode} from './editor/types';\nimport {VegaEditAction} from './VegaEditAction';\nimport {VegaExportAction} from './VegaExportAction';\nimport {VegaLiteArrowChart} from './VegaLiteArrowChart';\n\nexport type VegaChartToolResultProps = {\n className?: string;\n reasoning: string;\n sqlQuery: string;\n vegaLiteSpec: VisualizationSpec;\n options?: EmbedOptions;\n /**\n * Tool call ID for AI slice integration (enables persistence)\n */\n toolCallId?: string;\n /**\n * Whether editing is enabled\n * @default true\n */\n editable?: boolean;\n /**\n * Which editors to show when editing\n * @default 'both'\n */\n editorMode?: EditorMode;\n};\n\n/**\n * Renders a chart tool call with visualization using Vega-Lite.\n * Supports inline editing with AI slice persistence.\n *\n * @param {VegaChartToolResultProps} props - The component props\n * @returns {JSX.Element} The rendered chart tool call\n */\nexport function VegaChartToolResult({\n className,\n sqlQuery,\n vegaLiteSpec,\n options,\n toolCallId,\n editable = true,\n editorMode = 'both',\n}: VegaChartToolResultProps) {\n // AI slice integration for persisting changes\n const setToolAdditionalData = useStoreWithAi(\n (s) => s.ai.setSessionToolAdditionalData,\n );\n const currentSession = useStoreWithAi((s) => s.ai.getCurrentSession());\n const currentSessionId = currentSession?.id;\n\n // Track applied values for callbacks (to persist both spec and sql together)\n const [appliedSpec, setAppliedSpec] = useState(vegaLiteSpec);\n const [appliedSql, setAppliedSql] = useState(sqlQuery);\n\n // Callbacks to persist changes to AI slice\n const handleSpecChange = useCallback(\n (newSpec: VisualizationSpec) => {\n setAppliedSpec(newSpec);\n if (toolCallId && currentSessionId) {\n setToolAdditionalData(currentSessionId, toolCallId, {\n sqlQuery: appliedSql,\n vegaLiteSpec: newSpec,\n });\n }\n },\n [toolCallId, currentSessionId, appliedSql, setToolAdditionalData],\n );\n\n const handleSqlChange = useCallback(\n (newSql: string) => {\n setAppliedSql(newSql);\n if (toolCallId && currentSessionId) {\n setToolAdditionalData(currentSessionId, toolCallId, {\n sqlQuery: newSql,\n vegaLiteSpec: appliedSpec,\n });\n }\n },\n [toolCallId, currentSessionId, appliedSpec, setToolAdditionalData],\n );\n\n return (\n <div className={cn('flex max-w-full flex-col gap-2', className)}>\n <VegaChartContainer\n spec={vegaLiteSpec}\n sqlQuery={sqlQuery}\n options={options}\n editable={editable}\n onSpecChange={handleSpecChange}\n onSqlChange={handleSqlChange}\n >\n {/* Chart with actions toolbar */}\n <div className=\"relative max-w-full overflow-x-auto\">\n <VegaChartDisplay aspectRatio={16 / 9} className=\"pt-2\">\n <VegaLiteArrowChart.Actions className=\"right-3\">\n <VegaExportAction />\n {editable && <VegaEditAction editorMode={editorMode} />}\n </VegaLiteArrowChart.Actions>\n </VegaChartDisplay>\n </div>\n </VegaChartContainer>\n </div>\n );\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"VegaChartDisplay.d.ts","sourceRoot":"","sources":["../../src/editor/VegaChartDisplay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiE5D,CAAC"}
1
+ {"version":3,"file":"VegaChartDisplay.d.ts","sourceRoot":"","sources":["../../src/editor/VegaChartDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkE5D,CAAC"}
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { ToolErrorMessage } from '@sqlrooms/ai';
2
3
  import { useSql } from '@sqlrooms/duckdb';
3
4
  import { cn } from '@sqlrooms/ui';
4
5
  import { VegaLiteArrowChart } from '../VegaLiteArrowChart';
@@ -38,7 +39,7 @@ export const VegaChartDisplay = ({ className, aspectRatio = 16 / 9, children, })
38
39
  }
39
40
  // Show error state
40
41
  if (sqlQuery && !arrowTable && sqlResult.error) {
41
- return (_jsx("div", { className: cn('flex items-center justify-center text-red-500', className), children: _jsxs("span", { className: "text-sm", children: ["Error: ", sqlResult.error.message] }) }));
42
+ return (_jsx("div", { className: className, children: _jsx(ToolErrorMessage, { error: sqlResult.error, triggerLabel: "SQL query failed", title: "Query error", align: "start", details: sqlQuery }) }));
42
43
  }
43
44
  return (_jsx("div", { className: cn('relative', className), children: _jsx(VegaLiteArrowChart, { className: "w-full", spec: spec, arrowTable: chartData, aspectRatio: aspectRatio, options: options, children: children }) }));
44
45
  };
@@ -1 +1 @@
1
- {"version":3,"file":"VegaChartDisplay.js","sourceRoot":"","sources":["../../src/editor/VegaChartDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAkBzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,SAAS,EACT,WAAW,GAAG,EAAE,GAAG,CAAC,EACpB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAE5D,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC;IAElC,gDAAgD;IAChD,MAAM,SAAS,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,QAAQ,IAAI,EAAE;QACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,UAAU;KACnC,CAAC,CAAC;IAEH,wDAAwD;IACxD,MAAM,SAAS,GAAG,UAAU,IAAI,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC;IAE3D,iFAAiF;IACjF,8EAA8E;IAC9E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,aAAa,CAAC;IAErD,qBAAqB;IACrB,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;QACnD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,wDAAwD,EACxD,SAAS,CACV,aAED,cAAK,SAAS,EAAC,8EAA8E,GAAG,EAChG,eAAM,SAAS,EAAC,cAAc,gCAAuB,IACjD,CACP,CAAC;IACJ,CAAC;IAED,mBAAmB;IACnB,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/C,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,+CAA+C,EAC/C,SAAS,CACV,YAED,gBAAM,SAAS,EAAC,SAAS,wBAAS,SAAS,CAAC,KAAK,CAAC,OAAO,IAAQ,GAC7D,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,YACvC,KAAC,kBAAkB,IACjB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,SAAS,EACrB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,YAEf,QAAQ,GACU,GACjB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useSql} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport React from 'react';\nimport {VegaLiteArrowChart} from '../VegaLiteArrowChart';\nimport {useVegaEditorContext} from './VegaEditorContext';\n\nexport interface VegaChartDisplayProps {\n /**\n * Custom class name for the chart container\n */\n className?: string;\n /**\n * Aspect ratio for the chart\n * @default 16/9\n */\n aspectRatio?: number;\n /**\n * Children passed through to VegaLiteArrowChart (e.g., action components)\n */\n children?: React.ReactNode;\n}\n\n/**\n * Chart display subcomponent for VegaLiteChart.Container.\n * Renders the Vega-Lite chart with data from SQL query or arrow table.\n *\n * Uses the parsed spec from the editor state for live preview during editing.\n *\n * Must be used within a VegaLiteChart.Container component.\n *\n * @example\n * ```tsx\n * <VegaLiteChart.Container spec={spec} sqlQuery={query}>\n * <VegaLiteChart.Chart />\n * </VegaLiteChart.Container>\n * ```\n */\nexport const VegaChartDisplay: React.FC<VegaChartDisplayProps> = ({\n className,\n aspectRatio = 16 / 9,\n children,\n}) => {\n const {state, arrowTable, options} = useVegaEditorContext();\n\n // Use the applied SQL for chart rendering (updates when Apply is clicked)\n const sqlQuery = state.appliedSql;\n\n // Fetch data from SQL if no arrowTable provided\n const sqlResult = useSql({\n query: sqlQuery || '',\n enabled: !!sqlQuery && !arrowTable,\n });\n\n // Use arrow table if provided, otherwise use SQL result\n const chartData = arrowTable ?? sqlResult.data?.arrowTable;\n\n // Use parsed spec for live preview, fall back to last valid spec if parse failed\n // This ensures the chart keeps rendering during typing even with invalid JSON\n const spec = state.parsedSpec ?? state.lastValidSpec;\n\n // Show loading state\n if (sqlQuery && !arrowTable && sqlResult.isLoading) {\n return (\n <div\n className={cn(\n 'text-muted-foreground flex items-center justify-center',\n className,\n )}\n >\n <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\" />\n <span className=\"ml-2 text-sm\">Loading data...</span>\n </div>\n );\n }\n\n // Show error state\n if (sqlQuery && !arrowTable && sqlResult.error) {\n return (\n <div\n className={cn(\n 'flex items-center justify-center text-red-500',\n className,\n )}\n >\n <span className=\"text-sm\">Error: {sqlResult.error.message}</span>\n </div>\n );\n }\n\n return (\n <div className={cn('relative', className)}>\n <VegaLiteArrowChart\n className=\"w-full\"\n spec={spec}\n arrowTable={chartData}\n aspectRatio={aspectRatio}\n options={options}\n >\n {children}\n </VegaLiteArrowChart>\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"VegaChartDisplay.js","sourceRoot":"","sources":["../../src/editor/VegaChartDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAkBzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,SAAS,EACT,WAAW,GAAG,EAAE,GAAG,CAAC,EACpB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAE5D,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC;IAElC,gDAAgD;IAChD,MAAM,SAAS,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,QAAQ,IAAI,EAAE;QACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,UAAU;KACnC,CAAC,CAAC;IAEH,wDAAwD;IACxD,MAAM,SAAS,GAAG,UAAU,IAAI,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC;IAE3D,iFAAiF;IACjF,8EAA8E;IAC9E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,aAAa,CAAC;IAErD,qBAAqB;IACrB,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;QACnD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,wDAAwD,EACxD,SAAS,CACV,aAED,cAAK,SAAS,EAAC,8EAA8E,GAAG,EAChG,eAAM,SAAS,EAAC,cAAc,gCAAuB,IACjD,CACP,CAAC;IACJ,CAAC;IAED,mBAAmB;IACnB,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/C,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,YACvB,KAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,YAAY,EAAC,kBAAkB,EAC/B,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,QAAQ,GACjB,GACE,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,YACvC,KAAC,kBAAkB,IACjB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,SAAS,EACrB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,YAEf,QAAQ,GACU,GACjB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {ToolErrorMessage} from '@sqlrooms/ai';\nimport {useSql} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport React from 'react';\nimport {VegaLiteArrowChart} from '../VegaLiteArrowChart';\nimport {useVegaEditorContext} from './VegaEditorContext';\n\nexport interface VegaChartDisplayProps {\n /**\n * Custom class name for the chart container\n */\n className?: string;\n /**\n * Aspect ratio for the chart\n * @default 16/9\n */\n aspectRatio?: number;\n /**\n * Children passed through to VegaLiteArrowChart (e.g., action components)\n */\n children?: React.ReactNode;\n}\n\n/**\n * Chart display subcomponent for VegaLiteChart.Container.\n * Renders the Vega-Lite chart with data from SQL query or arrow table.\n *\n * Uses the parsed spec from the editor state for live preview during editing.\n *\n * Must be used within a VegaLiteChart.Container component.\n *\n * @example\n * ```tsx\n * <VegaLiteChart.Container spec={spec} sqlQuery={query}>\n * <VegaLiteChart.Chart />\n * </VegaLiteChart.Container>\n * ```\n */\nexport const VegaChartDisplay: React.FC<VegaChartDisplayProps> = ({\n className,\n aspectRatio = 16 / 9,\n children,\n}) => {\n const {state, arrowTable, options} = useVegaEditorContext();\n\n // Use the applied SQL for chart rendering (updates when Apply is clicked)\n const sqlQuery = state.appliedSql;\n\n // Fetch data from SQL if no arrowTable provided\n const sqlResult = useSql({\n query: sqlQuery || '',\n enabled: !!sqlQuery && !arrowTable,\n });\n\n // Use arrow table if provided, otherwise use SQL result\n const chartData = arrowTable ?? sqlResult.data?.arrowTable;\n\n // Use parsed spec for live preview, fall back to last valid spec if parse failed\n // This ensures the chart keeps rendering during typing even with invalid JSON\n const spec = state.parsedSpec ?? state.lastValidSpec;\n\n // Show loading state\n if (sqlQuery && !arrowTable && sqlResult.isLoading) {\n return (\n <div\n className={cn(\n 'text-muted-foreground flex items-center justify-center',\n className,\n )}\n >\n <div className=\"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600\" />\n <span className=\"ml-2 text-sm\">Loading data...</span>\n </div>\n );\n }\n\n // Show error state\n if (sqlQuery && !arrowTable && sqlResult.error) {\n return (\n <div className={className}>\n <ToolErrorMessage\n error={sqlResult.error}\n triggerLabel=\"SQL query failed\"\n title=\"Query error\"\n align=\"start\"\n details={sqlQuery}\n />\n </div>\n );\n }\n\n return (\n <div className={cn('relative', className)}>\n <VegaLiteArrowChart\n className=\"w-full\"\n spec={spec}\n arrowTable={chartData}\n aspectRatio={aspectRatio}\n options={options}\n >\n {children}\n </VegaLiteArrowChart>\n </div>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sqlrooms/vega",
3
- "version": "0.27.0-rc.4",
3
+ "version": "0.27.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "module": "dist/index.js",
@@ -20,12 +20,12 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@openassistant/utils": "1.0.0-alpha.0",
23
- "@sqlrooms/ai": "0.27.0-rc.4",
24
- "@sqlrooms/duckdb": "0.27.0-rc.4",
25
- "@sqlrooms/monaco-editor": "0.27.0-rc.4",
26
- "@sqlrooms/sql-editor": "0.27.0-rc.4",
27
- "@sqlrooms/ui": "0.27.0-rc.4",
28
- "@sqlrooms/utils": "0.27.0-rc.4",
23
+ "@sqlrooms/ai": "0.27.0",
24
+ "@sqlrooms/duckdb": "0.27.0",
25
+ "@sqlrooms/monaco-editor": "0.27.0",
26
+ "@sqlrooms/sql-editor": "0.27.0",
27
+ "@sqlrooms/ui": "0.27.0",
28
+ "@sqlrooms/utils": "0.27.0",
29
29
  "lucide-react": "^0.556.0",
30
30
  "react-vega": "^8.0.0",
31
31
  "vega": "^6.2.0",
@@ -48,5 +48,5 @@
48
48
  "typecheck": "tsc --noEmit",
49
49
  "typedoc": "typedoc"
50
50
  },
51
- "gitHead": "892408d49720d1fb195308029674894ae059969d"
51
+ "gitHead": "f215995ab4adeac4c58171739261a15cbba9e82b"
52
52
  }