@sqlrooms/canvas 0.29.0-rc.2 → 0.29.0-rc.3

package/dist/nodes/SqlNode.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { QueryDataTable } from '@sqlrooms/data-table';
-import { SqlMonacoEditor } from '@sqlrooms/sql-editor';
-import { Button, useToast } from '@sqlrooms/ui';
-import { useMemo, useState } from 'react';
-import { useStoreWithCanvas } from '../CanvasSlice';
-import { CanvasNodeContainer } from './CanvasNodeContainer';
-// import type * as Monaco from 'monaco-editor';
-// type EditorInstance = Monaco.editor.IStandaloneCodeEditor;
-// type MonacoInstance = typeof Monaco;
-const EDITOR_OPTIONS = {
-    minimap: { enabled: false },
-    lineNumbers: 'off',
-    scrollbar: {
-        handleMouseWheel: false,
-    },
-    fixedOverflowWidgets: false,
-};
-export const SqlNode = ({ id, data }) => {
-    const sql = data.sql || '';
-    const updateNode = useStoreWithCanvas((s) => s.canvas.updateNode);
-    const tables = useStoreWithCanvas((s) => s.db.tables);
-    const execute = useStoreWithCanvas((s) => s.canvas.executeSqlNodeQuery);
-    const result = useStoreWithCanvas((s) => s.canvas.sqlResults[id]);
-    const { toast } = useToast();
-    // const handleEditorMount = useCallback(
-    //   (editor: EditorInstance, monaco: MonacoInstance) => {
-    //     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
-    //       if (editor.hasTextFocus()) {
-    //         execute(id);
-    //       }
-    //     });
-    //   },
-    //   [execute],
-    // );
-    // const reactFlowContainerRef = useRef<HTMLDivElement>(null);
-    // useEffect(() => {
-    //   reactFlowContainerRef.current = document.querySelector<HTMLDivElement>(
-    //     '.react-flow__renderer',
-    //   );
-    // }, []);
-    const [overflowWidgetsDomNode, setOverflowWidgetsDomNode] = useState(null);
-    const editorOptions = useMemo(() => overflowWidgetsDomNode
-        ? {
-            ...EDITOR_OPTIONS,
-            overflowWidgetsDomNode: overflowWidgetsDomNode ?? undefined,
-            fixedOverflowWidgets: false,
-        }
-        : EDITOR_OPTIONS, [overflowWidgetsDomNode]);
-    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" }) }))] }) }));
-};
-//# sourceMappingURL=SqlNode.js.map

package/dist/nodes/SqlNode.js.map

@@ -1 +0,0 @@
-{"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/dist/nodes/VegaNode.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { CanvasNodeData } from '../CanvasSlice';
-type VegaData = Extract<CanvasNodeData, {
-    type: 'vega';
-}>;
-export declare const VegaNode: FC<{
-    id: string;
-    data: VegaData;
-}>;
-export {};
-//# sourceMappingURL=VegaNode.d.ts.map

package/dist/nodes/VegaNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VegaNode.d.ts","sourceRoot":"","sources":["../../src/nodes/VegaNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAO,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAG9C,KAAK,QAAQ,GAAG,OAAO,CAAC,cAAc,EAAE;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,CA2BrD,CAAC"}

package/dist/nodes/VegaNode.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { VegaLiteChart } from '@sqlrooms/vega';
-import { CanvasNodeContainer } from './CanvasNodeContainer';
-export const VegaNode = ({ id, data }) => {
-    const spec = (data.vegaSpec || {
-        mark: 'point',
-        data: { values: [] },
-    });
-    const { vegaSpec, sql } = data;
-    return (_jsx(CanvasNodeContainer, { id: id, headerRight: _jsx("span", { className: "text-[10px] uppercase text-gray-500", children: "Vega" }), children: _jsx("div", { className: "h-full flex-1 overflow-hidden p-2", children: sql && vegaSpec ? (_jsx(VegaLiteChart, { spec: vegaSpec, sqlQuery: sql, aspectRatio: 16 / 9, className: "h-full" })) : null }) }));
-};
-//# sourceMappingURL=VegaNode.js.map

package/dist/nodes/VegaNode.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VegaNode.js","sourceRoot":"","sources":["../../src/nodes/VegaNode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAyB,MAAM,gBAAgB,CAAC;AAGrE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAI1D,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,EAAE,EAAE;IACvE,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI;QAC7B,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,EAAC,MAAM,EAAE,EAAE,EAAC;KACnB,CAAsB,CAAC;IAExB,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC;IAE7B,OAAO,CACL,KAAC,mBAAmB,IAClB,EAAE,EAAE,EAAE,EACN,WAAW,EACT,eAAM,SAAS,EAAC,qCAAqC,qBAAY,YAGnE,cAAK,SAAS,EAAC,mCAAmC,YAC/C,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CACjB,KAAC,aAAa,IACZ,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,GAAG,EACb,WAAW,EAAE,EAAE,GAAG,CAAC,EACnB,SAAS,EAAC,QAAQ,GAClB,CACH,CAAC,CAAC,CAAC,IAAI,GACJ,GACc,CACvB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {VegaLiteChart, type VisualizationSpec} from '@sqlrooms/vega';\nimport {FC} from 'react';\nimport {CanvasNodeData} from '../CanvasSlice';\nimport {CanvasNodeContainer} from './CanvasNodeContainer';\n\ntype VegaData = Extract<CanvasNodeData, {type: 'vega'}>;\n\nexport const VegaNode: FC<{id: string; data: VegaData}> = ({id, data}) => {\n  const spec = (data.vegaSpec || {\n    mark: 'point',\n    data: {values: []},\n  }) as VisualizationSpec;\n\n  const {vegaSpec, sql} = data;\n\n  return (\n    <CanvasNodeContainer\n      id={id}\n      headerRight={\n        <span className=\"text-[10px] uppercase text-gray-500\">Vega</span>\n      }\n    >\n      <div className=\"h-full flex-1 overflow-hidden p-2\">\n        {sql && vegaSpec ? (\n          <VegaLiteChart\n            spec={vegaSpec}\n            sqlQuery={sql}\n            aspectRatio={16 / 9}\n            className=\"h-full\"\n          />\n        ) : null}\n      </div>\n    </CanvasNodeContainer>\n  );\n};\n"]}