Add onPropertyChange

Author: b-yogesh

dashi/src/lib/components/DashiPlot.tsx

@@ -1,11 +1,11 @@
 import { createClassFromSpec } from "react-vega";
 
 import { type PlotState } from "@/lib/types/state/component";
-// import { type PropertyChangeHandler } from "@/lib/types/model/event";
+import { type PropertyChangeHandler } from "@/lib/types/model/event";
 import type { CSSProperties } from "react";
 
 export interface DashiPlotProps extends Omit<PlotState, "type"> {
-  // onPropertyChange: PropertyChangeHandler;
+  onPropertyChange: PropertyChangeHandler;
 }
 
 interface VegaChartWrapperProps {
@@ -17,15 +17,30 @@ export function DashiPlot({
   id,
   style,
   figure,
-  // onPropertyChange,
+  onPropertyChange,
 }: DashiPlotProps) {
+  if (!figure) {
+    console.error(
+      "Rendering DashiPlot failed:",
+      "Expected figure, got",
+      figure,
+    );
+    return null;
+  }
   const { datasets, ...spec } = figure;
   const Plot = createClassFromSpec({
     mode: "vega-lite",
     spec: spec,
   });
-  const handleSignal = (signalName: string, value: unknown) => {
-    console.log("signalName", signalName, value);
+  const handleSignal = (_signalName: string, value: unknown) => {
+    if (id) {
+      return onPropertyChange({
+        componentType: "Plot",
+        componentId: id,
+        propertyName: "points",
+        propertyValue: value,
+      });
+    }
   };
   const VegaChartWrapper = ({ id, style }: VegaChartWrapperProps) => {
     return (

dashi/src/lib/types/state/component.ts

@@ -37,9 +37,11 @@ export interface CheckboxState extends ComponentState {
 
 export interface PlotState extends ComponentState {
   type: "Plot";
-  figure: VisualizationSpec & {
-    datasets?: Record<string, unknown>; // Add the datasets property
-  };
+  figure:
+    | (VisualizationSpec & {
+        datasets?: Record<string, unknown>; // Add the datasets property
+      })
+    | null;
 }
 
 export interface BoxState extends ContainerState {