Merge branch 'forman-x-plot_with_theme' into forman-x-allow_div_chart_providers

# Conflicts:
#	chartlets.py/CHANGES.md

Author: forman

chartlets.js/src/lib/components/Plot/hooks/useSignalListeners.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from "react";
-import { TopLevelSpec } from "vega-lite";
+import type { TopLevelSpec } from "vega-lite";
 
-import { ComponentChangeHandler } from "@/lib/types/state/event";
+import type { ComponentChangeHandler } from "@/lib/types/state/event";
 import { isObject } from "@/lib/utils/isObject";
 import { isString } from "@/lib/utils/isString";
 
@@ -28,25 +28,25 @@ export function useSignalListeners(
   type: string,
   id: string | undefined,
   onChange: ComponentChangeHandler,
-): { [key: string]: SignalHandler } {
+): Record<string, SignalHandler> {
   /*
    * 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 = useMemo(() => {
-    if (!chart) {
-      return {};
+  const signalNames = useMemo((): Record<string, string> => {
+    const signalNames: Record<string, string> = {};
+    if (!chart || !chart.params) {
+      return signalNames;
     }
-    if (!chart.params) {
-      return {};
-    }
-    return chart.params.filter(isSelectionParameter).reduce((acc, param) => {
-      acc[param.select.on] = param.name;
-      return acc;
-    }, {});
+    return chart.params
+      .filter(isSelectionParameter)
+      .reduce((paramNames, param) => {
+        paramNames[param.select.on] = param.name;
+        return paramNames;
+      }, signalNames);
   }, [chart]);
 
   const handleClickSignal = useCallback(
@@ -63,32 +63,29 @@ export function useSignalListeners(
     [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],
-  );
-
   /*
    * Creates the map of signal listeners based on
    * the `signals` map computed above.
    */
   return useMemo(() => {
-    const signalListeners = {};
-    Object.entries(signals).forEach(([event, signalName]) => {
-      if (signalHandlerMap[event]) {
-        signalListeners[signalName] = signalHandlerMap[event];
+    /*
+     * Currently, we only have click events support, but if more are required,
+     * they can be implemented and added in the map below.
+     */
+    const signalHandlers: Record<string, SignalHandler> = {
+      click: handleClickSignal,
+    };
+
+    const signalListeners: Record<string, SignalHandler> = {};
+    Object.entries(signalNames).forEach(([event, signalName]) => {
+      if (signalHandlers[event]) {
+        signalListeners[signalName] = signalHandlers[event];
       } else {
         console.warn(
           `The signal "${event}" is not yet supported in chartlets.js`,
         );
       }
     });
     return signalListeners;
-  }, [signals]);
+  }, [signalNames, handleClickSignal]);
 }

chartlets.js/src/lib/hooks.ts

@@ -1,16 +1,12 @@
 import type { StoreState } from "@/lib/types/state/store";
 import { store } from "@/lib/store";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import type { ContributionState } from "@/lib/types/state/contribution";
-import { type SignalHandler } from "@/lib/components/Plot/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;