Update based on reviewer's comments

Author: b-yogesh

dashi/src/lib/actions/applyPropertyChange.test.ts

@@ -17,7 +17,7 @@ const componentState: ComponentState = {
   type: "Box",
   id: "b1",
   components: [
-    { type: "Plot", id: "p1", figure: null } as PlotState,
+    { type: "Plot", id: "p1", chart: null } as PlotState,
     {
       type: "Box",
       id: "b2",

dashi/src/lib/components/DashiPlot.tsx

@@ -1,32 +1,22 @@
-import { createClassFromSpec } from "react-vega";
+import { VegaLite } from "react-vega";
 
 import { type PlotState } from "@/lib/types/state/component";
 import { type PropertyChangeHandler } from "@/lib/types/model/event";
-import type { CSSProperties } from "react";
 
 export interface DashiPlotProps extends Omit<PlotState, "type"> {
   onPropertyChange: PropertyChangeHandler;
 }
 
-interface VegaChartWrapperProps {
-  id?: string;
-  style?: CSSProperties;
-}
-
 export function DashiPlot({
   id,
   style,
-  figure,
+  chart,
   onPropertyChange,
 }: DashiPlotProps) {
-  if (!figure) {
+  if (!chart) {
     return <div id={id} style={style} />;
   }
-  const { datasets, ...spec } = figure;
-  const Plot = createClassFromSpec({
-    mode: "vega-lite",
-    spec: spec,
-  });
+  const { datasets, ...spec } = chart;
   const handleSignal = (_signalName: string, value: unknown) => {
     if (id) {
       return onPropertyChange({
@@ -37,12 +27,13 @@ export function DashiPlot({
       });
     }
   };
-  const VegaChartWrapper = ({ id, style }: VegaChartWrapperProps) => {
-    return (
-      <div id={id} style={style}>
-        <Plot data={datasets} signalListeners={{ onClick: handleSignal }} />
-      </div>
-    );
-  };
-  return <VegaChartWrapper id={id} style={style} />;
+  return (
+    <VegaLite
+      spec={spec}
+      data={datasets}
+      style={style}
+      signalListeners={{ onClick: handleSignal }}
+      actions={false}
+    />
+  );
 }

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

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

dashipy/dashipy/callback.py

@@ -205,7 +205,6 @@ def _parameter_to_dict(parameter: inspect.Parameter) -> dict[str, Any]:
 }
 
 _object_types = {
-    "Figure": "Figure",
     "Component": "Component",
     "Chart": "Chart"
 }

dashipy/dashipy/components/plot.py

@@ -8,12 +8,12 @@
 
 @dataclass(frozen=True)
 class Plot(Component):
-    figure: alt.Chart | None = None
+    chart: alt.Chart | None = None
 
     def to_dict(self) -> dict[str, Any]:
         d = super().to_dict()
-        if self.figure is not None:
-            d.update(figure=self.figure.to_dict())
+        if self.chart is not None:
+            d.update(chart=self.chart.to_dict())
         else:
-            d.update(figure=None)
+            d.update(chart=None)
         return d

dashipy/environment.yml

@@ -2,7 +2,7 @@ name: dashi
 channels:
   - conda-forge
 dependencies:
-  - python
+  - python >=3.12,<3.13
   # Dependencies
   - pandas
   - altair

dashipy/my_extension/my_panel_1.py

@@ -13,7 +13,7 @@
 def render_panel(ctx: Context) -> Component:
     selected_dataset: int = 0
     plot = Plot(
-        id="plot", figure=make_figure(ctx, selected_dataset), style={"flexGrow": 1}
+        id="plot", chart=make_figure(ctx, selected_dataset), style={"flexGrow": 1}
     )
     dropdown = Dropdown(
         id="selected_dataset",
@@ -45,7 +45,7 @@ def render_panel(ctx: Context) -> Component:
 
 @panel.callback(
     Input("selected_dataset"),
-    Output("plot", "figure"),
+    Output("plot", "chart"),
 )
 def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
     dataset = ctx.datasets[selected_dataset]
@@ -60,7 +60,7 @@ def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
                                       fields=["a", "b"])
     # Create a chart type using mark_* where * could be any kind of chart
     # supported by Vega. We can add properties and parameters as shown below.
-    fig = alt.Chart(dataset).mark_bar(cornerRadius=corner_var).encode(
+    chart = alt.Chart(dataset).mark_bar(cornerRadius=corner_var).encode(
         x=alt.X('a:N', title='a'),
         y=alt.Y('b:Q', title='b'),
         tooltip=[
@@ -74,4 +74,4 @@ def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
         title="Vega charts"
     ).add_params(corner_var, click_param)
 
-    return fig
+    return chart

dashipy/my_extension/my_panel_2.py

@@ -13,7 +13,7 @@
 def render_panel(ctx: Context) -> Component:
     selected_dataset: int = 0
     plot = Plot(
-        id="plot", figure=make_figure(ctx, selected_dataset), style={"flexGrow": 1}
+        id="plot", chart=make_figure(ctx, selected_dataset), style={"flexGrow": 1}
     )
     dropdown = Dropdown(
         id="selected_dataset",
@@ -45,7 +45,7 @@ def render_panel(ctx: Context) -> Component:
 
 @panel.callback(
     Input("selected_dataset"),
-    Output("plot", "figure"),
+    Output("plot", "chart"),
 )
 def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
     dataset = ctx.datasets[selected_dataset]
@@ -55,7 +55,7 @@ def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
     # notation for setting x,y and the tooltip, although they both give the
     # same output. We also call interactive() on this chart object which allows
     # to zoom in and out as well as move the chart around.
-    fig = alt.Chart(dataset).mark_bar().encode(
+    chart = alt.Chart(dataset).mark_bar().encode(
         x='a:N',
         y='b:Q',
         tooltip=['a:N','b:Q'],
@@ -71,5 +71,5 @@ def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
     ).add_params(
         selector
     ).interactive()
-    return fig
+    return chart