feat: introduce renderer plugin architecture and renderer packages

.github/workflows/auto-build.yml

@@ -20,5 +20,9 @@ jobs:
         run: yarn install
       - name: npm package build
         run: yarn workspace @kanaries/graphic-walker build
+      - name: Observable Plot renderer plugin build
+        run: yarn workspace @kanaries/graphic-walker-renderer-observable-plot build
+      - name: ECharts renderer plugin build
+        run: yarn workspace @kanaries/graphic-walker-renderer-echarts build
       - name: Web app (playground) build
-        run: yarn workspace playground build
+        run: yarn workspace playground build

.github/workflows/bump-version.yml

@@ -25,15 +25,27 @@ jobs:
       working-directory: ./packages/graphic-walker
       run: |
         yarn version --no-git-tag-version --new-version ${{ github.event.inputs.newVersion }}
+    - name: Bump observable renderer plugin version
+      working-directory: ./packages/renderer-observable-plot
+      run: |
+        yarn version --no-git-tag-version --new-version ${{ github.event.inputs.newVersion }}
+    - name: Bump echarts renderer plugin version
+      working-directory: ./packages/renderer-echarts
+      run: |
+        yarn version --no-git-tag-version --new-version ${{ github.event.inputs.newVersion }}
 
     - name: Update playground dependency
       run: |
         yarn add @kanaries/graphic-walker@${{ github.event.inputs.newVersion }}
+        yarn add @kanaries/graphic-walker-renderer-observable-plot@${{ github.event.inputs.newVersion }}
+        yarn add @kanaries/graphic-walker-renderer-echarts@${{ github.event.inputs.newVersion }}
       working-directory: ./packages/playground
 
     - name: Update Wasm dependecy
       run: |
         yarn add -D @kanaries/graphic-walker@${{ github.event.inputs.newVersion }}
+        yarn add -D @kanaries/graphic-walker-renderer-observable-plot@${{ github.event.inputs.newVersion }}
+        yarn add -D @kanaries/graphic-walker-renderer-echarts@${{ github.event.inputs.newVersion }}
       working-directory: ./packages/duckdb-wasm-computation
 
     - name: Commit Changes

.github/workflows/release-duckdb.yml

@@ -15,6 +15,10 @@ jobs:
         run: yarn install
       - name: npm package build
         run: yarn workspace @kanaries/graphic-walker build
+      - name: Observable Plot renderer plugin build
+        run: yarn workspace @kanaries/graphic-walker-renderer-observable-plot build
+      - name: ECharts renderer plugin build
+        run: yarn workspace @kanaries/graphic-walker-renderer-echarts build
       - name: Duckdb build
         run: yarn workspace @kanaries/duckdb-computation build
       - run: npm publish

.github/workflows/release-renderer-plugin.yml

@@ -0,0 +1,46 @@
+name: Publish Renderer Plugins to npmjs
+
+on:
+  workflow_dispatch:
+    inputs:
+      npmTag:
+        description: 'npm dist-tag'
+        required: true
+        default: latest
+        type: choice
+        options:
+          - latest
+          - pre
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install deps
+        run: yarn install
+
+      - name: Observable Plot renderer plugin build
+        run: yarn workspace @kanaries/graphic-walker-renderer-observable-plot build
+
+      - name: ECharts renderer plugin build
+        run: yarn workspace @kanaries/graphic-walker-renderer-echarts build
+
+      - name: Publish observable plugin
+        run: npm publish --tag ${{ github.event.inputs.npmTag }}
+        working-directory: ./packages/renderer-observable-plot
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish echarts plugin
+        run: npm publish --tag ${{ github.event.inputs.npmTag }}
+        working-directory: ./packages/renderer-echarts
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release.yml

@@ -16,10 +16,24 @@ jobs:
         run: yarn install
       - name: npm package build
         run: yarn workspace @kanaries/graphic-walker build
+      - name: Observable Plot renderer plugin build
+        run: yarn workspace @kanaries/graphic-walker-renderer-observable-plot build
+      - name: ECharts renderer plugin build
+        run: yarn workspace @kanaries/graphic-walker-renderer-echarts build
       - name: Web app (playground) build
         run: yarn workspace playground build
       - name: Publish package
         run: npm publish --tag ${{ github.event.release.prerelease && 'pre' || 'latest' }}
         working-directory: ./packages/graphic-walker
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish observable plugin
+        run: npm publish --tag ${{ github.event.release.prerelease && 'pre' || 'latest' }}
+        working-directory: ./packages/renderer-observable-plot
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish echarts plugin
+        run: npm publish --tag ${{ github.event.release.prerelease && 'pre' || 'latest' }}
+        working-directory: ./packages/renderer-echarts
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -16,3 +16,4 @@ app-dist
 .vercel
 chartinfo.json
 stoinfo_v2.json
+packages/renderer-echarts/test/__artifacts__

.vscode/settings.json

@@ -0,0 +1 @@
+{}

README.md

@@ -146,6 +146,26 @@ const YourChart: React.FC<IYourChartProps> = props => {
 export default YourChart;
 ```
 
+### Renderer Plugins
+
+Graphic Walker now supports renderer plugins.
+
+```typescript
+import {
+    GraphicRenderer,
+    registerRendererPlugin,
+} from '@kanaries/graphic-walker';
+import { createObservablePlotPlugin } from '@kanaries/graphic-walker-renderer-observable-plot';
+import { createEChartsPlugin } from '@kanaries/graphic-walker-renderer-echarts';
+
+registerRendererPlugin(createObservablePlotPlugin());
+registerRendererPlugin(createEChartsPlugin());
+
+// legacy IDs are still supported:
+// - "vega-lite" => builtin:vega
+// - "observable-plot" => plugin:observable-plot
+```
+
 The `GraphicRenderer` component accepts same props as `GraphicWalker`, and would display the chart and the filters of the chart to change.
 
 ```typescript

package.json

@@ -7,6 +7,8 @@
   "devDependencies": {},
   "scripts": {
     "build": "yarn workspace @kanaries/graphic-walker build",
+    "build:plugins": "yarn workspace @kanaries/graphic-walker-renderer-observable-plot build && yarn workspace @kanaries/graphic-walker-renderer-echarts build",
+    "build:all": "yarn build && yarn build:plugins",
     "deploy": "yarn workspace playground deploy"
   },
   "workspaces": {
@@ -35,5 +37,6 @@
   "homepage": "https://github.com/Kanaries/graphic-walker#readme",
   "engines": {
     "node": ">=20.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.19+sha256.732620bac8b1690d507274f025f3c6cfdc3627a84d9642e38a07452cc00e0f2e"
 }

packages/graphic-walker/package.json

@@ -52,7 +52,6 @@
     "@heroicons/react": "^2.2.0",
     "@kanaries/react-beautiful-dnd": "^0.1.1",
     "@kanaries/web-data-loader": "^0.1.7",
-    "@observablehq/plot": "^0.6.16",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.16",
@@ -98,14 +97,14 @@
     "postcss": "^8.3.7",
     "postinstall-postinstall": "^2.1.0",
     "rbush": "^3.0.1",
-    "re-resizable": "^6.9.8",
+    "re-resizable": "^6.11.2",
     "react-color": "^2.19.3",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.11",
     "react-i18next": "^11.18.6",
     "react-leaflet": "^4.2.1",
     "react-resizable-panels": "^1.0.10",
-    "react-resize-detector": "^9.1.1",
+    "react-resize-detector": "^12.3.0",
     "react-shadow": "^20.6.0",
     "rxjs": "^7.3.0",
     "tailwind-merge": "^2.2.1",

packages/graphic-walker/src/App.tsx

@@ -36,6 +36,7 @@ import { getComputation } from './computation/clientComputation';
 import LogPanel from './fields/datasetFields/logPanel';
 import BinPanel from './fields/datasetFields/binPanel';
 import RenamePanel from './components/renameField';
+import FieldConfigDialog from './components/fieldConfigDialog';
 import { ErrorContext } from './utils/reportError';
 import { ErrorBoundary } from 'react-error-boundary';
 import Errorpanel from './components/errorpanel';
@@ -53,6 +54,7 @@ import { Tabs, TabsList, TabsTrigger } from './components/ui/tabs';
 import { ChartPieIcon, CircleStackIcon, ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';
 import { TabsContent } from '@radix-ui/react-tabs';
 import { VegaliteChat } from './components/chat';
+import { ensureBuiltinRendererPlugins, registerRendererPlugin } from './renderer/plugins';
 
 export type BaseVizProps = IAppI18nProps &
     IVizProps &
@@ -100,6 +102,13 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
 
     const vizStore = useVizStore();
 
+    useEffect(() => {
+        ensureBuiltinRendererPlugins();
+        props.rendererPlugins?.forEach((plugin) => {
+            registerRendererPlugin(plugin);
+        });
+    }, [props.rendererPlugins]);
+
     useEffect(() => {
         if (geographicData) {
             vizStore.setGeographicData(geographicData, geographicData.key);
@@ -234,6 +243,7 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
                                             <LogPanel />
                                             <BinPanel />
                                             <RenamePanel />
+                                            <FieldConfigDialog />
                                             <ComputedFieldDialog />
                                             <Painter themeConfig={appliedThemeConfig} themeKey={appliedThemeKey} />
                                             {vizStore.showGeoJSONConfigPanel && <GeoConfigPanel geoList={props.geoList} />}
@@ -276,6 +286,7 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
                                                                 computationFunction={wrappedComputation}
                                                                 // @TODO remove channelScales
                                                                 scales={props.scales ?? props.channelScales}
+                                                                rendererPlugins={props.rendererPlugins}
                                                             />
                                                         )}
                                                         <VizEmbedMenu />

packages/graphic-walker/src/Renderer.tsx

@@ -156,6 +156,7 @@ export const RendererApp = observer(function VizApp(props: BaseVizProps) {
                                         // @TODO remove channelScales
                                         scales={props.scales ?? props.channelScales}
                                         overrideSize={props.overrideSize}
+                                        rendererPlugins={props.rendererPlugins}
                                     />
                                 )}
                             </div>