Vega Custom Toolbar

dashi/package.json

@@ -49,10 +49,12 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.1.0",
     "@mui/material": "^6.1.5",
+    "@mui/icons-material": "^6.1.4",
     "microdiff": "^1.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-vega": "^7.6.0",
+    "vega-lite": "^5.21.0",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {

dashi/src/demo/components/Panel.tsx

@@ -34,11 +34,17 @@ const panelContentStyle: CSSProperties = {
 
 interface PanelProps {
   panelModel: Contribution;
+  panelIndex: number;
   panelState: ContributionState;
   onPropertyChange: PropertyChangeHandler;
 }
 
-function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
+function Panel({
+  panelModel,
+  panelIndex,
+  panelState,
+  onPropertyChange,
+}: PanelProps) {
   if (!panelState.visible) {
     return null;
   }
@@ -47,7 +53,11 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
   const componentModelResult = panelState.componentStateResult;
   if (componentModelResult.data && componentState) {
     panelElement = (
-      <DashiComponent {...componentState} onPropertyChange={onPropertyChange} />
+      <DashiComponent
+        {...componentState}
+        onPropertyChange={onPropertyChange}
+        panelIndex={panelIndex}
+      />
     );
   } else if (componentModelResult.error) {
     panelElement = (

dashi/src/demo/components/PanelsRow.tsx

@@ -38,6 +38,7 @@ function PanelsRow() {
           key={panelIndex}
           panelState={panelState}
           panelModel={panelModels[panelIndex]}
+          panelIndex={panelIndex}
           onPropertyChange={(e) => handlePropertyChange(panelIndex, e)}
         />,
       );

dashi/src/lib/components/DashiBox.tsx

@@ -6,17 +6,20 @@ import { DashiChildren } from "./DashiChildren";
 
 export interface DashiBoxProps extends Omit<BoxState, "type"> {
   onPropertyChange: PropertyChangeHandler;
+  panelIndex: number;
 }
 
 export function DashiBox({
   id,
   style,
   components,
+  panelIndex,
   onPropertyChange,
 }: DashiBoxProps) {
   return (
     <Box id={id} style={style}>
       <DashiChildren
+        panelIndex={panelIndex}
         components={components}
         onPropertyChange={onPropertyChange}
       />

dashi/src/lib/components/DashiButton.tsx

@@ -6,6 +6,7 @@ import { type PropertyChangeHandler } from "@/lib/types/model/event";
 
 export interface DashiButtonProps extends Omit<ButtonState, "type"> {
   onPropertyChange: PropertyChangeHandler;
+  panelIndex: number;
 }
 
 export function DashiButton({

dashi/src/lib/components/DashiChildren.tsx

@@ -1,14 +1,16 @@
 import { type PropertyChangeHandler } from "@/lib/types/model/event";
 import { type ComponentState } from "@/lib/types/state/component";
-import { DashiComponent } from "./DashiComponent";
+import { DashiComponent } from "@/lib";
 
 export interface DashiChildrenProps {
   components?: ComponentState[];
   onPropertyChange: PropertyChangeHandler;
+  panelIndex: number;
 }
 
 export function DashiChildren({
   components,
+  panelIndex,
   onPropertyChange,
 }: DashiChildrenProps) {
   if (!components || components.length === 0) {
@@ -22,6 +24,7 @@ export function DashiChildren({
           <DashiComponent
             key={key}
             {...component}
+            panelIndex={panelIndex}
             onPropertyChange={onPropertyChange}
           />
         );

dashi/src/lib/components/DashiComponent.tsx

@@ -7,6 +7,7 @@ import { DashiDropdown, type DashiDropdownProps } from "./DashiDropdown";
 
 export interface DashiComponentProps extends ComponentState {
   onPropertyChange: PropertyChangeHandler;
+  panelIndex: number;
 }
 
 export function DashiComponent({ type, ...props }: DashiComponentProps) {

dashi/src/lib/components/DashiDropdown.tsx

@@ -8,6 +8,7 @@ import { type PropertyChangeHandler } from "@/lib/types/model/event";
 
 export interface DashiDropdownProps extends Omit<DropdownState, "type"> {
   onPropertyChange: PropertyChangeHandler;
+  panelIndex: number;
 }
 
 export function DashiDropdown({
@@ -46,6 +47,7 @@ export function DashiDropdown({
         value={`${value}`}
         disabled={disabled}
         onChange={handleChange}
+        variant={"standard"}
       >
         {options.map(([text, value], index) => (
           <MenuItem key={index} value={value}>

dashi/src/lib/components/DashiPlot.tsx

@@ -1,22 +1,26 @@
 import { VegaLite } from "react-vega";
+import { type PropertyChangeHandler } from "@/lib/types/model/event";
 
 import { type PlotState } from "@/lib/types/state/component";
-import { type PropertyChangeHandler } from "@/lib/types/model/event";
+import { DashiPlotToolbar } from "@/lib/components/DashiPlotToolbar";
 
 export interface DashiPlotProps extends Omit<PlotState, "type"> {
   onPropertyChange: PropertyChangeHandler;
+  panelIndex: number;
 }
 
 export function DashiPlot({
   id,
   style,
   chart,
+  panelIndex,
   onPropertyChange,
 }: DashiPlotProps) {
   if (!chart) {
     return <div id={id} style={style} />;
   }
-  const { datasets, ...spec } = chart;
+  const { datasets, ...specification } = chart;
+
   const handleSignal = (_signalName: string, value: unknown) => {
     if (id) {
       return onPropertyChange({
@@ -28,12 +32,19 @@ export function DashiPlot({
     }
   };
   return (
-    <VegaLite
-      spec={spec}
-      data={datasets}
-      style={style}
-      signalListeners={{ onClick: handleSignal }}
-      actions={false}
-    />
+    <DashiPlotToolbar
+      style={{ position: "relative", display: "inline-block" }}
+      onPropertyChange={onPropertyChange}
+      panelIndex={panelIndex}
+    >
+      <VegaLite
+        spec={specification}
+        data={datasets}
+        style={style}
+        signalListeners={{ onClick: handleSignal }}
+        actions={false}
+        renderer={"svg"}
+      />
+    </DashiPlotToolbar>
   );
 }