Fix vega warnings 2 (#49)

* Fix vega OnClick warning

* Fix Scale bindings warning

* Fix infinite extent warning

* Added comments

* Added optimizations

* Changes based on reviewers comments

* Replace == "string" with isString type-guard

* TODO: new callback onclick test

* Access the click event in the callback function

* fix merge conflict error

* fix build error - remove src exports

* fix useCallback dep

* minor refactoring

* TODO: improve callback fn

* Update callback fn.

* Update CHANGES.md and bump up the version

* Remove print

Author: b-yogesh

chartlets.js/CHANGES.md

@@ -1,3 +1,7 @@
+## Version 0.0.29 (from 2024/11/26)
+
+* Resolved warnings that appeared when using Vega charts.
+
 ## Version 0.0.28 (from 2024/11/26)
 
 * Updated docs.

chartlets.js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [

chartlets.js/src/lib/components/Plot.tsx

@@ -1,40 +1,30 @@
-import { VegaLite, type VisualizationSpec } from "react-vega";
+import { VegaLite } from "react-vega";
 
 import { type ComponentState } from "@/lib/types/state/component";
 import type { ComponentProps } from "@/lib/component/Component";
+import { useSignalListeners } from "@/lib/hooks";
+import type { TopLevelSpec } from "vega-lite";
 
 interface PlotState extends ComponentState {
   chart?:
-    | (VisualizationSpec & {
-        datasets?: Record<string, unknown>; // Add the datasets property
-      })
-    | null
-    | undefined;
+    | TopLevelSpec // This is the vega-lite specification type
+    | null;
 }
 
 interface PlotProps extends ComponentProps, PlotState {}
 
 export function Plot({ type, id, style, chart, onChange }: PlotProps) {
+  const signalListeners = useSignalListeners(chart, type, id, onChange);
+
   if (!chart) {
     return <div id={id} style={style} />;
   }
-  const { datasets, ...spec } = chart;
-  const handleSignal = (_signalName: string, value: unknown) => {
-    if (id) {
-      return onChange({
-        componentType: type,
-        id: id,
-        property: "points",
-        value: value,
-      });
-    }
-  };
+
   return (
     <VegaLite
-      spec={spec}
-      data={datasets}
+      spec={chart}
       style={style}
-      signalListeners={{ onClick: handleSignal }}
+      signalListeners={signalListeners}
       actions={false}
     />
   );

chartlets.js/src/lib/components/Select.tsx

@@ -5,6 +5,7 @@ import MuiSelect, { type SelectChangeEvent } from "@mui/material/Select";
 
 import { type ComponentState } from "@/lib/types/state/component";
 import type { ComponentProps } from "@/lib/component/Component";
+import { isString } from "@/lib/utils/isString";
 
 export type SelectOption =
   | string
@@ -70,7 +71,7 @@ export function Select({
 function normalizeSelectOption(
   option: SelectOption,
 ): [string | number, string] {
-  if (typeof option === "string") {
+  if (isString(option)) {
     return [option, option];
   } else if (typeof option === "number") {
     return [option, option.toString()];

chartlets.js/src/lib/hooks.ts

@@ -1,12 +1,16 @@
 import type { StoreState } from "@/lib/types/state/store";
 import { store } from "@/lib/store";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import type { ContributionState } from "@/lib/types/state/contribution";
+import { type SignalHandler } from "@/lib/types/state/vega";
+import type { TopLevelSpec } from "vega-lite";
 import type {
   ComponentChangeEvent,
   ComponentChangeHandler,
 } from "@/lib/types/state/event";
 import { handleComponentChange } from "@/lib/actions/handleComponentChange";
+import { isString } from "@/lib/utils/isString";
+import { isObject } from "@/lib/utils/isObject";
 
 const selectConfiguration = (state: StoreState) => state.configuration;
 
@@ -38,6 +42,102 @@ export function makeContributionsHook<S extends object = object>(
   };
 }
 
+export function useSignalListeners(
+  chart: TopLevelSpec | null | undefined,
+  type: string,
+  id: string | undefined,
+  onChange: ComponentChangeHandler,
+): { [key: string]: SignalHandler } {
+  /*
+       This is a partial representation of the parameter type from
+       SelectionParameter type from the `vega-lite` module. Since we are
+       only interested in extracting the handlers, the following
+       properties are required.
+     */
+  type SelectionParameter = { name: string; select: { on: string } };
+  /*
+     Here, we create map of signals which will be then used to create the
+     map of signal-listeners because not all params are event-listeners, and we
+     need to identify them. Later in the code, we then see which handlers do we
+     have so that we can create those listeners with the `name` specified in
+     the event-listener object.
+   */
+  const signals: { [key: string]: string } = useMemo(() => {
+    if (!chart) return {};
+    if (!chart.params) return {};
+    return chart.params
+      .filter(
+        (param): param is SelectionParameter =>
+          isObject(param) &&
+          param !== null &&
+          "name" in param &&
+          "select" in param &&
+          isObject(param.select) &&
+          param.select?.on != null &&
+          isString(param.select.on),
+      )
+      .reduce(
+        (acc, param) => {
+          acc[param.select.on] = param.name;
+          return acc;
+        },
+        {} as { [key: string]: string },
+      );
+  }, [chart]);
+
+  const handleClickSignal = useCallback(
+    (signalName: string, signalValue: unknown) => {
+      if (id) {
+        return onChange({
+          componentType: type,
+          id: id,
+          property: signalName,
+          value: signalValue,
+        });
+      }
+    },
+    [id, onChange, type],
+  );
+
+  /*
+     Currently, we only have click events support, but if more are required,
+     they can be implemented and added in the map below.
+     */
+  const signalHandlerMap: { [key: string]: SignalHandler } = useMemo(
+    () => ({
+      click: handleClickSignal,
+    }),
+    [handleClickSignal],
+  );
+
+  /*
+     This function creates the map of signal listeners based on the `signals`
+     map computed above.
+     */
+  const createSignalListeners = useCallback(
+    (signals: { [key: string]: string }) => {
+      const signalListeners: { [key: string]: SignalHandler } = {};
+      Object.entries(signals).forEach(([event, signalName]) => {
+        if (signalHandlerMap[event]) {
+          signalListeners[signalName] = signalHandlerMap[event];
+        } else {
+          console.warn(
+            "The signal " + event + " is not yet supported in chartlets.js",
+          );
+        }
+      });
+
+      return signalListeners;
+    },
+    [signalHandlerMap],
+  );
+
+  return useMemo(
+    () => createSignalListeners(signals),
+    [createSignalListeners, signals],
+  );
+}
+
 /**
  * A hook that retrieves the contributions for the given contribution
  * point given by `contribPoint`.

chartlets.js/src/lib/types/state/component.ts

@@ -1,5 +1,6 @@
 import { type CSSProperties } from "react";
 import { isObject } from "@/lib/utils/isObject";
+import { isString } from "@/lib/utils/isString";
 
 export type ComponentType =
   | "Box"
@@ -37,7 +38,7 @@ export interface ContainerState extends ComponentState {
 }
 
 export function isComponentState(object: unknown): object is ComponentState {
-  return isObject(object) && typeof object.type === "string";
+  return isObject(object) && isString(object.type);
 }
 
 export function isContainerState(object: unknown): object is ContainerState {

chartlets.js/src/lib/types/state/vega.ts

@@ -0,0 +1 @@
+export type SignalHandler = (signalName: string, value: unknown) => void;

chartlets.js/src/lib/utils/isString.ts

@@ -0,0 +1,3 @@
+export function isString(signalName: unknown): signalName is string {
+  return typeof signalName === "string";
+}

chartlets.js/src/lib/utils/objPath.ts

@@ -1,4 +1,5 @@
 import { isObject } from "@/lib/utils/isObject";
+import { isString } from "@/lib/utils/isString";
 
 export type ObjPath = (string | number)[];
 export type ObjPathLike = ObjPath | string | number | undefined | null;
@@ -83,7 +84,7 @@ export function normalizeObjPath(pathLike: ObjPathLike): ObjPath {
 }
 
 export function formatObjPath(objPath: ObjPathLike): string {
-  if (typeof objPath === "string") {
+  if (isString(objPath)) {
     return objPath;
   } else if (Array.isArray(objPath)) {
     return objPath

chartlets.py/CHANGES.md

@@ -1,7 +1,9 @@
-## Version 0.0.x (in development)
+## Version 0.0.29 (from 2024/11/26)
 
-* Fixed a bug that prevent using annotations of type `dict` or `dict[str, T]`.
+* Fixed a bug that prevents using annotations of type `dict` or `dict[str, T]`.
   in callback functions.
+* Introduced a callback function in `my_panel.py` to handle click events. 
+  Demonstrates how to dynamically change the color of a clicked bar.
 
 
 ## Version 0.0.28 (from 2024/11/26)