@sqlrooms/canvas 0.26.0 → 0.26.1-rc.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.
- package/README.md +2 -2
- package/dist/nodes/SqlNode.d.ts.map +1 -1
- package/dist/nodes/SqlNode.js +17 -1
- package/dist/nodes/SqlNode.js.map +1 -1
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# @sqlrooms/canvas
|
|
2
|
-
|
|
3
1
|
ReactFlow-based canvas for building and editing DAGs of SQL and Vega nodes, with a Zustand slice for persistence in SQLRooms apps.
|
|
4
2
|
|
|
5
3
|
- CanvasSlice stores nodes and edges under `canvas.config`
|
|
6
4
|
- Canvas component renders and edits the graph
|
|
5
|
+
|
|
6
|
+
Refer to the [Canvas example](https://github.com/sqlrooms/examples/tree/main/canvas).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SqlNode.d.ts","sourceRoot":"","sources":["../../src/nodes/SqlNode.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"SqlNode.d.ts","sourceRoot":"","sources":["../../src/nodes/SqlNode.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAC,cAAc,EAAqB,MAAM,gBAAgB,CAAC;AAelE,KAAK,OAAO,GAAG,OAAO,CAAC,cAAc,EAAE;IAAC,IAAI,EAAE,KAAK,CAAA;CAAC,CAAC,CAAC;AAEtD,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,CAgGnD,CAAC"}
|
package/dist/nodes/SqlNode.js
CHANGED
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { QueryDataTable } from '@sqlrooms/data-table';
|
|
3
3
|
import { SqlMonacoEditor } from '@sqlrooms/sql-editor';
|
|
4
4
|
import { Button, useToast } from '@sqlrooms/ui';
|
|
5
|
+
import { useMemo, useState } from 'react';
|
|
5
6
|
import { useStoreWithCanvas } from '../CanvasSlice';
|
|
6
7
|
import { CanvasNodeContainer } from './CanvasNodeContainer';
|
|
7
8
|
// import type * as Monaco from 'monaco-editor';
|
|
@@ -13,6 +14,7 @@ const EDITOR_OPTIONS = {
|
|
|
13
14
|
scrollbar: {
|
|
14
15
|
handleMouseWheel: false,
|
|
15
16
|
},
|
|
17
|
+
fixedOverflowWidgets: false,
|
|
16
18
|
};
|
|
17
19
|
export const SqlNode = ({ id, data }) => {
|
|
18
20
|
const sql = data.sql || '';
|
|
@@ -31,6 +33,20 @@ export const SqlNode = ({ id, data }) => {
|
|
|
31
33
|
// },
|
|
32
34
|
// [execute],
|
|
33
35
|
// );
|
|
34
|
-
|
|
36
|
+
// const reactFlowContainerRef = useRef<HTMLDivElement>(null);
|
|
37
|
+
// useEffect(() => {
|
|
38
|
+
// reactFlowContainerRef.current = document.querySelector<HTMLDivElement>(
|
|
39
|
+
// '.react-flow__renderer',
|
|
40
|
+
// );
|
|
41
|
+
// }, []);
|
|
42
|
+
const [overflowWidgetsDomNode, setOverflowWidgetsDomNode] = useState(null);
|
|
43
|
+
const editorOptions = useMemo(() => overflowWidgetsDomNode
|
|
44
|
+
? {
|
|
45
|
+
...EDITOR_OPTIONS,
|
|
46
|
+
overflowWidgetsDomNode: overflowWidgetsDomNode ?? undefined,
|
|
47
|
+
fixedOverflowWidgets: false,
|
|
48
|
+
}
|
|
49
|
+
: EDITOR_OPTIONS, [overflowWidgetsDomNode]);
|
|
50
|
+
return (_jsx(CanvasNodeContainer, { id: id, headerRight: _jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => execute(id), children: "Run" }), _jsx("span", { className: "text-[10px] uppercase text-gray-500", children: "SQL" })] }), children: _jsxs("div", { className: "flex h-full w-full flex-col", children: [_jsx("div", { className: "relative flex-1", children: _jsx(SqlMonacoEditor, { className: "absolute inset-0 p-1", value: sql, options: editorOptions, onChange: (v) => updateNode(id, (d) => ({ ...d, sql: v || '' })), tableSchemas: tables }) }), result?.status === 'error' && (_jsx("div", { className: "flex-1 overflow-auto whitespace-pre-wrap border-t p-4 font-mono text-xs text-red-600", children: result.error })), result?.status === 'success' && (_jsx("div", { className: "flex-[2] overflow-hidden border-t", children: _jsx(QueryDataTable, { query: `SELECT * FROM ${result.tableName}`, fontSize: "text-xs" }) }))] }) }));
|
|
35
51
|
};
|
|
36
52
|
//# sourceMappingURL=SqlNode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SqlNode.js","sourceRoot":"","sources":["../../src/nodes/SqlNode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAC,eAAe,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"SqlNode.js","sourceRoot":"","sources":["../../src/nodes/SqlNode.tsx"],"names":[],"mappings":"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","sourcesContent":["import {QueryDataTable} from '@sqlrooms/data-table';\nimport {SqlMonacoEditor} from '@sqlrooms/sql-editor';\nimport {Button, useToast} from '@sqlrooms/ui';\nimport {FC, useMemo, useState} from 'react';\nimport {CanvasNodeData, useStoreWithCanvas} from '../CanvasSlice';\nimport {CanvasNodeContainer} from './CanvasNodeContainer';\n// import type * as Monaco from 'monaco-editor';\n// type EditorInstance = Monaco.editor.IStandaloneCodeEditor;\n// type MonacoInstance = typeof Monaco;\n\nconst EDITOR_OPTIONS: Parameters<typeof SqlMonacoEditor>[0]['options'] = {\n minimap: {enabled: false},\n lineNumbers: 'off',\n scrollbar: {\n handleMouseWheel: false,\n },\n fixedOverflowWidgets: false,\n};\n\ntype SqlData = Extract<CanvasNodeData, {type: 'sql'}>;\n\nexport const SqlNode: FC<{id: string; data: SqlData}> = ({id, data}) => {\n const sql = data.sql || '';\n const updateNode = useStoreWithCanvas((s) => s.canvas.updateNode);\n const tables = useStoreWithCanvas((s) => s.db.tables);\n const execute = useStoreWithCanvas((s) => s.canvas.executeSqlNodeQuery);\n const result = useStoreWithCanvas((s) => s.canvas.sqlResults[id]);\n const {toast} = useToast();\n\n // const handleEditorMount = useCallback(\n // (editor: EditorInstance, monaco: MonacoInstance) => {\n // editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {\n // if (editor.hasTextFocus()) {\n // execute(id);\n // }\n // });\n // },\n // [execute],\n // );\n\n // const reactFlowContainerRef = useRef<HTMLDivElement>(null);\n // useEffect(() => {\n // reactFlowContainerRef.current = document.querySelector<HTMLDivElement>(\n // '.react-flow__renderer',\n // );\n // }, []);\n const [overflowWidgetsDomNode, setOverflowWidgetsDomNode] =\n useState<HTMLDivElement | null>(null);\n\n const editorOptions = useMemo(\n (): typeof EDITOR_OPTIONS =>\n overflowWidgetsDomNode\n ? {\n ...EDITOR_OPTIONS,\n overflowWidgetsDomNode: overflowWidgetsDomNode ?? undefined,\n fixedOverflowWidgets: false,\n }\n : EDITOR_OPTIONS,\n [overflowWidgetsDomNode],\n );\n\n return (\n <CanvasNodeContainer\n id={id}\n headerRight={\n <>\n <Button size=\"sm\" variant=\"secondary\" onClick={() => execute(id)}>\n Run\n </Button>\n <span className=\"text-[10px] uppercase text-gray-500\">SQL</span>\n </>\n }\n >\n <div className=\"flex h-full w-full flex-col\">\n <div className=\"relative flex-1\">\n <SqlMonacoEditor\n className=\"absolute inset-0 p-1\"\n value={sql}\n options={editorOptions}\n onChange={(v) =>\n updateNode(id, (d) => ({...(d as SqlData), sql: v || ''}))\n }\n tableSchemas={tables}\n // onMount={handleEditorMount}\n />\n </div>\n {result?.status === 'error' && (\n <div className=\"flex-1 overflow-auto whitespace-pre-wrap border-t p-4 font-mono text-xs text-red-600\">\n {result.error}\n </div>\n )}\n {result?.status === 'success' && (\n <div className=\"flex-[2] overflow-hidden border-t\">\n <QueryDataTable\n query={`SELECT * FROM ${result.tableName}`}\n fontSize=\"text-xs\"\n />\n </div>\n )}\n </div>\n {/* {reactFlowContainerRef.current &&\n createPortal(\n <div\n ref={(node) => {\n if (node && !overflowWidgetsDomNode) {\n setOverflowWidgetsDomNode(node);\n }\n }}\n // CRITICAL: You must re-apply the monaco class here!\n className=\"monaco-editor\"\n // CRITICAL: Styles to ensure overlays position correctly relative to window\n style={{position: 'absolute', top: 0, left: 0}}\n />,\n reactFlowContainerRef.current,\n )} */}\n </CanvasNodeContainer>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/canvas",
|
|
3
|
-
"version": "0.26.0",
|
|
3
|
+
"version": "0.26.1-rc.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,16 +19,16 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@paralleldrive/cuid2": "^2.2.2",
|
|
22
|
-
"@sqlrooms/ai": "0.26.0",
|
|
23
|
-
"@sqlrooms/data-table": "0.26.0",
|
|
24
|
-
"@sqlrooms/duckdb": "0.26.0",
|
|
25
|
-
"@sqlrooms/room-shell": "0.26.0",
|
|
26
|
-
"@sqlrooms/sql-editor": "0.26.0",
|
|
27
|
-
"@sqlrooms/ui": "0.26.0",
|
|
28
|
-
"@sqlrooms/vega": "0.26.0",
|
|
22
|
+
"@sqlrooms/ai": "0.26.1-rc.0",
|
|
23
|
+
"@sqlrooms/data-table": "0.26.1-rc.0",
|
|
24
|
+
"@sqlrooms/duckdb": "0.26.1-rc.0",
|
|
25
|
+
"@sqlrooms/room-shell": "0.26.1-rc.0",
|
|
26
|
+
"@sqlrooms/sql-editor": "0.26.1-rc.0",
|
|
27
|
+
"@sqlrooms/ui": "0.26.1-rc.0",
|
|
28
|
+
"@sqlrooms/vega": "0.26.1-rc.0",
|
|
29
29
|
"@xyflow/react": "^12.8.5",
|
|
30
30
|
"immer": "^10.1.3",
|
|
31
|
-
"lucide-react": "^0.
|
|
31
|
+
"lucide-react": "^0.555.0",
|
|
32
32
|
"zod": "^4.1.8"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"typecheck": "tsc --noEmit",
|
|
43
43
|
"typedoc": "typedoc"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "89c252c460ccd29d108cfabf7b34c4a679f85609"
|
|
46
46
|
}
|