@sqlrooms/canvas 0.29.0-rc.11 → 0.29.0-rc.13
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
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
# @sqlrooms/canvas
|
|
2
|
+
|
|
3
|
+
> **Experimental:** This package's API and behavior may change between releases.
|
|
4
|
+
|
|
5
|
+
React Flow-based, artifact-scoped canvas for building SQL and Vega node DAGs in
|
|
6
|
+
SQLRooms apps.
|
|
2
7
|
|
|
3
8
|
This package includes:
|
|
4
9
|
|
|
@@ -7,7 +12,61 @@ This package includes:
|
|
|
7
12
|
- `Canvas` React component, which requires an explicit `artifactId`
|
|
8
13
|
- `CanvasSliceConfig`, `CanvasNodeMeta`, and `CanvasArtifactMeta` schemas/types
|
|
9
14
|
|
|
10
|
-
|
|
15
|
+
## Setup
|
|
16
|
+
|
|
17
|
+
Canvas uses the canonical cell state from `@sqlrooms/cells`. Compose both
|
|
18
|
+
slices, persist both configs, and initialize backing state for each canvas
|
|
19
|
+
artifact:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import {Canvas, CanvasSliceConfig, createCanvasSlice} from '@sqlrooms/canvas';
|
|
23
|
+
import {
|
|
24
|
+
CellsSliceConfig,
|
|
25
|
+
createCellsSlice,
|
|
26
|
+
createDefaultCellRegistry,
|
|
27
|
+
} from '@sqlrooms/cells';
|
|
28
|
+
import {
|
|
29
|
+
RoomStateProvider,
|
|
30
|
+
createRoomShellSlice,
|
|
31
|
+
createRoomStore,
|
|
32
|
+
persistSliceConfigs,
|
|
33
|
+
} from '@sqlrooms/room-shell';
|
|
34
|
+
|
|
35
|
+
const {roomStore} = createRoomStore(
|
|
36
|
+
persistSliceConfigs(
|
|
37
|
+
{
|
|
38
|
+
name: 'canvas-workspace',
|
|
39
|
+
sliceConfigSchemas: {
|
|
40
|
+
canvas: CanvasSliceConfig,
|
|
41
|
+
cells: CellsSliceConfig,
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
(set, get, store) => ({
|
|
45
|
+
...createRoomShellSlice({})(set, get, store),
|
|
46
|
+
...createCellsSlice({
|
|
47
|
+
cellRegistry: createDefaultCellRegistry(),
|
|
48
|
+
})(set, get, store),
|
|
49
|
+
...createCanvasSlice()(set, get, store),
|
|
50
|
+
}),
|
|
51
|
+
),
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
roomStore.getState().canvas.ensureArtifact('analysis-canvas');
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Render the canvas inside a `RoomShell` (or another host that provides the room
|
|
58
|
+
store context):
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
<RoomStateProvider roomStore={roomStore}>
|
|
62
|
+
<Canvas artifactId="analysis-canvas" />
|
|
63
|
+
</RoomStateProvider>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
When canvases are top-level workspace entries, connect `ensureArtifact()` and
|
|
67
|
+
`removeArtifact()` to an `@sqlrooms/artifacts` type lifecycle. See the
|
|
68
|
+
[Artifacts guide](https://sqlrooms.org/artifacts) and the
|
|
69
|
+
[Canvas example](https://github.com/sqlrooms/examples/tree/main/canvas).
|
|
11
70
|
|
|
12
71
|
## Stable vs internal imports
|
|
13
72
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasNodeContainer.d.ts","sourceRoot":"","sources":["../../src/nodes/CanvasNodeContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CanvasNodeContainer.d.ts","sourceRoot":"","sources":["../../src/nodes/CanvasNodeContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAIpE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAClC,iBAAiB,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB,CAAC,CAqDH,CAAC"}
|
|
@@ -5,11 +5,6 @@ import { PlusIcon } from 'lucide-react';
|
|
|
5
5
|
import { useCallback } from 'react';
|
|
6
6
|
import { useStoreWithCanvas } from '../CanvasSlice';
|
|
7
7
|
import { AddNodePopover } from './AddNodePopover';
|
|
8
|
-
const PROMPT_PLACEHOLDER = {
|
|
9
|
-
sql: 'What would you like to learn about the data?',
|
|
10
|
-
vega: 'How would you like to visualize the data?',
|
|
11
|
-
default: 'What would you like to do?',
|
|
12
|
-
};
|
|
13
8
|
/**
|
|
14
9
|
* Container applied to every canvas node. Provides resizing, connection handles,
|
|
15
10
|
* and a standard "add child" affordance that creates downstream nodes.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasNodeContainer.js","sourceRoot":"","sources":["../../src/nodes/CanvasNodeContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,YAAY,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACtD,OAAO,EAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AACtC,OAAO,EAAmC,WAAW,EAAC,MAAM,OAAO,CAAC;AACpE,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD
|
|
1
|
+
{"version":3,"file":"CanvasNodeContainer.js","sourceRoot":"","sources":["../../src/nodes/CanvasNodeContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,YAAY,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACtD,OAAO,EAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AACtC,OAAO,EAAmC,WAAW,EAAC,MAAM,OAAO,CAAC;AACpE,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAO5B,CAAC,EAAC,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC7C,MAAM,UAAU,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,IAAI,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAC1C,CAAC,CAAC,KAAK,CAAC,oBAAoB,CAAC,EAAE,CAAC,CACjC,CAAC;IAEF,MAAM,KAAK,GAAI,IAAI,EAAE,IAAY,EAAE,KAAK,CAAC;IACzC,MAAM,aAAa,GAAG,WAAW,CAC/B,KAAK,EAAE,CAAS,EAAE,EAAE;QAClB,MAAM,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,EAAE,EAAE,UAAU,CAAC,CACjB,CAAC;IACF,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,uEAAuE,EACvE,SAAS,CACV,aAED,KAAC,WAAW,IAAC,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,GAAI,EAC9C,eAAK,SAAS,EAAC,kDAAkD,aAC9D,CAAC,KAAK,KAAK,SAAS,IAAI,WAAW,CAAC,IAAI,CACvC,eAAK,SAAS,EAAC,mEAAmE,aAChF,KAAC,YAAY,IACX,SAAS,EAAC,qBAAqB,EAC/B,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,GACnC,EACF,cAAK,SAAS,EAAC,yBAAyB,YAAE,WAAW,GAAO,IACxD,CACP,EACD,cAAK,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAO,IACzD,EACN,KAAC,cAAc,IACb,UAAU,EAAE,UAAU,IAAI,EAAE,EAC5B,SAAS,EAAC,4BAA4B,EACtC,QAAQ,EAAE,EAAE,YAEZ,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,SAAS,EAAC,uCAAuC,EACjD,KAAK,EAAC,gBAAgB,YAEtB,KAAC,QAAQ,IAAC,SAAS,EAAC,SAAS,GAAG,GACzB,GACM,EACjB,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,GAAI,EAClD,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,GAAI,IAC7C,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Button, EditableText, cn} from '@sqlrooms/ui';\nimport {Handle, NodeResizer, Position} from '@xyflow/react';\nimport {PlusIcon} from 'lucide-react';\nimport {FC, PropsWithChildren, ReactNode, useCallback} from 'react';\nimport {useStoreWithCanvas} from '../CanvasSlice';\nimport {AddNodePopover} from './AddNodePopover';\n\n/**\n * Container applied to every canvas node. Provides resizing, connection handles,\n * and a standard \"add child\" affordance that creates downstream nodes.\n * Also renders an optional shared header with editable title and customizable right-side content.\n */\nexport const CanvasNodeContainer: FC<\n PropsWithChildren<{\n id: string;\n className?: string;\n /** Right-side header content (e.g. buttons, badges). */\n headerRight?: ReactNode;\n }>\n> = ({id, className, headerRight, children}) => {\n const renameNode = useStoreWithCanvas((s) => s.canvas.renameNode);\n const cell = useStoreWithCanvas((s) => s.cells.config.data[id]);\n const artifactId = useStoreWithCanvas((s) =>\n s.cells.getArtifactIdForCell(id),\n );\n\n const title = (cell?.data as any)?.title;\n const onTitleChange = useCallback(\n async (v: string) => {\n await renameNode(id, v);\n },\n [id, renameNode],\n );\n return (\n <div\n className={cn(\n `bg-background relative flex h-full w-full rounded-md border shadow-sm`,\n className,\n )}\n >\n <NodeResizer minWidth={200} minHeight={200} />\n <div className=\"flex h-full min-h-0 w-full flex-col items-center\">\n {(title !== undefined || headerRight) && (\n <div className=\"flex w-full items-center justify-between gap-2 border-b px-3 py-2\">\n <EditableText\n className=\"text-sm font-medium\"\n value={title ?? ''}\n onChange={(v) => onTitleChange?.(v)}\n />\n <div className=\"flex items-center gap-2\">{headerRight}</div>\n </div>\n )}\n <div className=\"w-full flex-1 overflow-auto\">{children}</div>\n </div>\n <AddNodePopover\n artifactId={artifactId ?? ''}\n className=\"absolute top-1/2 -right-10\"\n parentId={id}\n >\n <Button\n variant=\"default\"\n className=\"h-8 w-8 -translate-y-1/2 rounded-full\"\n title=\"Add child node\"\n >\n <PlusIcon className=\"h-4 w-4\" />\n </Button>\n </AddNodePopover>\n <Handle type=\"source\" position={Position.Right} />\n <Handle type=\"target\" position={Position.Left} />\n </div>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/canvas",
|
|
3
|
-
"version": "0.29.0-rc.
|
|
3
|
+
"version": "0.29.0-rc.13",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/sqlrooms/sqlrooms.git"
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@paralleldrive/cuid2": "^3.0.0",
|
|
39
|
-
"@sqlrooms/cells": "0.29.0-rc.
|
|
40
|
-
"@sqlrooms/crdt": "0.29.0-rc.
|
|
41
|
-
"@sqlrooms/duckdb": "0.29.0-rc.
|
|
42
|
-
"@sqlrooms/room-store": "0.29.0-rc.
|
|
43
|
-
"@sqlrooms/ui": "0.29.0-rc.
|
|
44
|
-
"@sqlrooms/utils": "0.29.0-rc.
|
|
39
|
+
"@sqlrooms/cells": "0.29.0-rc.13",
|
|
40
|
+
"@sqlrooms/crdt": "0.29.0-rc.13",
|
|
41
|
+
"@sqlrooms/duckdb": "0.29.0-rc.13",
|
|
42
|
+
"@sqlrooms/room-store": "0.29.0-rc.13",
|
|
43
|
+
"@sqlrooms/ui": "0.29.0-rc.13",
|
|
44
|
+
"@sqlrooms/utils": "0.29.0-rc.13",
|
|
45
45
|
"@xyflow/react": "^12.8.5",
|
|
46
46
|
"immer": "^11.0.1",
|
|
47
47
|
"loro-mirror": "^1.1.2",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"publishConfig": {
|
|
56
56
|
"access": "public"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "d183fe9164e5f67c23b358328ca03dbf77a035a4"
|
|
59
59
|
}
|