Make frontend-backend talk

Author: b-yogesh

dashi/src/lib/components/DashiPlot.tsx

@@ -1,65 +1,33 @@
-import { createClassFromSpec, type VisualizationSpec } from "react-vega";
+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">,
-    Omit<PlotState, "onPropertyChange"> {
-  onPropertyChange: PropertyChangeHandler;
+export interface DashiPlotProps extends Omit<PlotState, "type"> {
+  // onPropertyChange: PropertyChangeHandler;
 }
 
 interface VegaChartWrapperProps {
   id?: string;
   style?: CSSProperties;
 }
 
-const specification: VisualizationSpec = {
-  config: { view: { continuousWidth: 300, continuousHeight: 300 } },
-  data: { name: "myData" },
-  mark: { type: "bar" },
-  description: "A simple bar chart with embedded data.",
-  encoding: {
-    tooltip: [
-      { field: "a", title: "a", type: "nominal" },
-      { field: "b", title: "b", type: "quantitative" },
-    ],
-    x: { field: "a", title: "a", type: "nominal" },
-    y: { field: "b", title: "b", type: "quantitative" },
-  },
-  params: [{ name: "click", select: { type: "point", on: "click" } }],
-  $schema: "https://vega.github.io/schema/vega-lite/v5.20.1.json",
-  datasets: {},
-};
-
-const data = {
-  myData: [
-    { a: "A", b: 28 },
-    { a: "B", b: 55 },
-    { a: "C", b: 43 },
-    { a: "D", b: 91 },
-    { a: "E", b: 81 },
-    { a: "F", b: 53 },
-    { a: "G", b: 19 },
-    { a: "H", b: 87 },
-    { a: "I", b: 52 },
-  ],
-};
-
 export function DashiPlot({
   id,
   style,
+  figure,
   // onPropertyChange,
 }: DashiPlotProps) {
+  const { datasets, ...spec } = figure;
   const Plot = createClassFromSpec({
     mode: "vega-lite",
-    spec: specification,
+    spec: spec,
   });
   const VegaChartWrapper = ({ id, style }: VegaChartWrapperProps) => {
     return (
       <div id={id} style={style}>
-        <Plot data={data} />
+        <Plot data={datasets} />
       </div>
     );
   };

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

@@ -1,5 +1,5 @@
 import { type CSSProperties } from "react";
-import { type Config, type Layout, type PlotData } from "plotly.js";
+import type { VisualizationSpec } from "react-vega";
 
 export type ComponentType = "Button" | "Checkbox" | "Dropdown" | "Plot" | "Box";
 
@@ -37,11 +37,9 @@ export interface CheckboxState extends ComponentState {
 
 export interface PlotState extends ComponentState {
   type: "Plot";
-  figure: {
-    data: PlotData[];
-    layout: Partial<Layout>;
-    config: Partial<Config>;
-  } | null;
+  figure: VisualizationSpec & {
+    datasets?: Record<string, unknown>; // Add the datasets property
+  };
 }
 
 export interface BoxState extends ContainerState {

dashipy/dashipy/callback.py

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

dashipy/dashipy/components/plot.py

@@ -1,14 +1,14 @@
 from dataclasses import dataclass
 from typing import Any
 
-import plotly.graph_objects as go
+import altair as alt
 
 from dashipy import Component
 
 
 @dataclass(frozen=True)
 class Plot(Component):
-    figure: go.Figure | None = None
+    figure: alt.Chart | None = None
 
     def to_dict(self) -> dict[str, Any]:
         d = super().to_dict()

dashipy/dashipy/demo/context.py

@@ -1,7 +1,17 @@
+from typing import Union
+import pandas as pd
+
+
 class Context:
     def __init__(self):
-        self.datasets: dict[int, list[int]] = {
-            0: [10, 20, 30],
-            1: [20, 30, 10],
-            2: [30, 10, 20],
-        }
+        self.datasets= {0: pd.DataFrame(({'a': 'A', 'b': 28},
+                                          {'a': 'B', 'b': 55},
+                                          {'a': 'C', 'b': 43},
+                                          {'a': 'D', 'b': 91},
+                                          {'a': 'E', 'b': 81})),
+                        1: pd.DataFrame(({'a': 'V', 'b': 99},
+                                         {'a': 'W', 'b': 1},
+                                         {'a': 'X', 'b': 7},
+                                         {'a': 'Y', 'b': 43},
+                                         {'a': 'Z', 'b': 49}))
+                        }

dashipy/environment.yml

@@ -5,7 +5,7 @@ dependencies:
   - python
   # Dependencies
   - pandas
-  - plotly
+  - altair
   - pyaml
   - tornado
   # Dev Dependencies

dashipy/my_extension/my_panel_1.py

@@ -1,5 +1,4 @@
-import plotly.graph_objects as go
-from plotly.graph_objs import Layout
+import altair as alt
 
 from dashipy import (Component, Input, Output)
 from dashipy.components import (Plot, Box, Dropdown)
@@ -48,14 +47,17 @@ def render_panel(ctx: Context) -> Component:
     Input("selected_dataset"),
     Output("plot", "figure"),
 )
-def make_figure(ctx: Context, selected_dataset: int = 0) -> go.Figure:
+def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
     dataset = ctx.datasets[selected_dataset]
-    fig = go.Figure(
-        layout=Layout(
-            title=f"DS #{selected_dataset + 1}",
-            margin=dict(t=40, r=4, b=4, l=4),
-            autosize=True,
-        )
-    )
-    fig.add_trace(go.Bar(x=["A", "B", "C"], y=dataset))
+    fig = alt.Chart(dataset).mark_bar().encode(
+        x=alt.X('a:N', title='a'),
+        y=alt.Y('b:Q', title='b'),
+        tooltip=[
+            alt.Tooltip('a:N', title='a'),
+            alt.Tooltip('b:Q', title='b'),
+        ]
+    ).properties(
+    width=400,
+    height=400
+)
     return fig