all interactions leading to update in chart can be skeletonized

Author: b-yogesh

chartlets.js/packages/lib/src/actions/handleComponentChange.ts

@@ -70,13 +70,18 @@ function getCallbackRequests(
           equalObjPaths(input.property, changeEvent.property),
       );
       if (inputIndex >= 0) {
+        // Collect output IDs for updating their respective loading states
+        const outputs = contribution.callbacks?.[callbackIndex]["outputs"];
+        const outputIds: string[] =
+          outputs?.map((output) => output.id as string) ?? [];
         // Collect triggered callback
         callbackRequests.push({
           contribPoint,
           contribIndex,
           callbackIndex,
           inputIndex,
           inputValues: getInputValues(inputs, contribution, hostStore),
+          outputIds: outputIds,
         });
       }
     }

chartlets.js/packages/lib/src/actions/handleHostStoreChange.ts

@@ -11,6 +11,7 @@ import { invokeCallbacks } from "@/actions/helpers/invokeCallbacks";
 import type { ContributionState } from "@/types/state/contribution";
 import type { HostStore } from "@/types/state/host";
 import { store } from "@/store";
+import { shallowEqualArrays } from "@/utils/compare";
 
 /**
  * A reference to a property of an input of a callback of a contribution.
@@ -43,29 +44,69 @@ export function handleHostStoreChange() {
     contributionsRecord,
     hostStore,
   );
-  if (callbackRequests && callbackRequests.length > 0) {
-    invokeCallbacks(callbackRequests);
+
+  const filteredCallbackRequests = callbackRequests.filter(
+    (callbackRequest): callbackRequest is CallbackRequest =>
+      callbackRequest !== undefined,
+  );
+  if (filteredCallbackRequests && filteredCallbackRequests.length > 0) {
+    invokeCallbacks(filteredCallbackRequests);
   }
 }
 
-function getCallbackRequests(
+// Exporting for testing only
+export function getCallbackRequests(
   propertyRefs: PropertyRef[],
   contributionsRecord: Record<string, ContributionState[]>,
   hostStore: HostStore,
-): CallbackRequest[] {
-  return propertyRefs.map((propertyRef) => {
-    const contributions = contributionsRecord[propertyRef.contribPoint];
-    const contribution = contributions[propertyRef.contribIndex];
-    const callback = contribution.callbacks![propertyRef.callbackIndex];
-    const inputValues = getInputValues(
-      callback.inputs!,
-      contribution,
+): (CallbackRequest | undefined)[] {
+  const { lastCallbackInputValues } = store.getState();
+  return propertyRefs.map((propertyRef) =>
+    getCallbackRequest(
+      propertyRef,
+      lastCallbackInputValues,
+      contributionsRecord,
       hostStore,
-    );
-    return { ...propertyRef, inputValues };
-  });
+    ),
+  );
 }
 
+const getCallbackRequest = (
+  propertyRef: PropertyRef,
+  lastCallbackInputValues: Record<string, unknown[]>,
+  contributionsRecord: Record<string, ContributionState[]>,
+  hostStore: HostStore,
+) => {
+  const contribPoint: string = propertyRef.contribPoint;
+  const contribIndex: number = propertyRef.contribIndex;
+  const callbackIndex: number = propertyRef.callbackIndex;
+  const contributions = contributionsRecord[contribPoint];
+  const contribution = contributions[contribIndex];
+  const callback = contribution.callbacks![callbackIndex];
+  const inputValues = getInputValues(callback.inputs!, contribution, hostStore);
+  const callbackId = `${contribPoint}-${contribIndex}-${callbackIndex}`;
+  const lastInputValues = lastCallbackInputValues[callbackId];
+  if (shallowEqualArrays(lastInputValues, inputValues)) {
+    // We no longer log, as the situation is quite common
+    // Enable error logging for debugging only:
+    // console.groupCollapsed("Skipping callback request");
+    // console.debug("inputValues", inputValues);
+    // console.groupEnd();
+    return undefined;
+  }
+  store.setState({
+    lastCallbackInputValues: {
+      ...lastCallbackInputValues,
+      [callbackId]: inputValues,
+    },
+  });
+  // Collect output IDs for updating their respective loading states
+  const outputs = contribution.callbacks?.[callbackIndex]["outputs"];
+  const outputIds: string[] =
+    outputs?.map((output) => output.id as string) ?? [];
+  return { ...propertyRef, inputValues, outputIds };
+};
+
 // TODO: use a memoized selector to get hostStorePropertyRefs
 // Note that this will only be effective and once we split the
 // static contribution infos and dynamic contribution states.

chartlets.js/packages/lib/src/actions/helpers/invokeCallbacks.ts

@@ -4,7 +4,7 @@ import { fetchCallback } from "@/api/fetchCallback";
 import { applyStateChangeRequests } from "@/actions/helpers/applyStateChangeRequests";
 
 export function invokeCallbacks(callbackRequests: CallbackRequest[]) {
-  const { configuration } = store.getState();
+  const { configuration, loadingState } = store.getState();
   const shouldLog = configuration.logging?.enabled;
   const invocationId = getInvocationId();
   if (shouldLog) {
@@ -13,6 +13,20 @@ export function invokeCallbacks(callbackRequests: CallbackRequest[]) {
       callbackRequests,
     );
   }
+
+  // Set the respective callback's outputs loading state to true before
+  // sending the request
+  callbackRequests.forEach((callbackRequest) => {
+    const outputIds = callbackRequest.outputIds;
+    outputIds.forEach((outputId) => {
+      store.setState({
+        loadingState: {
+          ...loadingState,
+          [outputId]: true,
+        },
+      });
+    });
+  });
   fetchCallback(callbackRequests, configuration.api).then(
     (changeRequestsResult) => {
       if (changeRequestsResult.data) {
@@ -23,13 +37,39 @@ export function invokeCallbacks(callbackRequests: CallbackRequest[]) {
           );
         }
         applyStateChangeRequests(changeRequestsResult.data);
+        // Set the loading state of each output ID of the callback's that
+        // were invoked to false as the fetch was successful.
+        callbackRequests.forEach((callbackRequest) => {
+          const outputIds = callbackRequest.outputIds;
+          outputIds.forEach((outputId) => {
+            store.setState({
+              loadingState: {
+                ...loadingState,
+                [outputId]: false,
+              },
+            });
+          });
+        });
       } else {
         console.error(
           "callback failed:",
           changeRequestsResult.error,
           "for call requests:",
           callbackRequests,
         );
+        // Set the loading state of each output ID of the callback's that
+        // were invoked to `failed` as the fetch was unsuccessful.
+        callbackRequests.forEach((callbackRequest) => {
+          const outputIds = callbackRequest.outputIds;
+          outputIds.forEach((outputId) => {
+            store.setState({
+              loadingState: {
+                ...loadingState,
+                [outputId]: "failed",
+              },
+            });
+          });
+        });
       }
     },
   );

chartlets.js/packages/lib/src/hooks.ts

@@ -20,13 +20,16 @@ const selectContributionsRecord = (state: StoreState) =>
 
 const selectThemeMode = (state: StoreState) => state.themeMode;
 
+const selectLoadingState = (state: StoreState) => state.loadingState;
+
 const useStore = store;
 
 export const useConfiguration = () => useStore(selectConfiguration);
 export const useExtensions = () => useStore(selectExtensions);
 export const useContributionsResult = () => useStore(selectContributionsResult);
 export const useContributionsRecord = () => useStore(selectContributionsRecord);
 export const useThemeMode = () => useStore(selectThemeMode);
+export const useLoadingState = () => useStore(selectLoadingState);
 
 /**
  * A hook that retrieves the contributions for the given contribution

chartlets.js/packages/lib/src/plugins/mui/Skeleton.tsx

@@ -11,27 +11,52 @@ interface SkeletonState extends Omit<ComponentState, "type" | "children"> {
   width?: MuiSkeletonProps["width"];
   height?: MuiSkeletonProps["height"];
   animation?: MuiSkeletonProps["animation"];
-  loading: boolean;
+  opacity?: number;
+  isLoading: boolean;
   children?: ReactElement;
 }
 
-interface SkeletonProps extends SkeletonState {}
+export interface SkeletonProps extends SkeletonState {}
 
 export const Skeleton = ({
   id,
   style,
-  loading,
   children,
-  ...skeletonProps
+  isLoading,
+  ...props
 }: SkeletonProps) => {
-  return loading && skeletonProps && Object.keys(skeletonProps).length > 0 ? (
-    <MuiSkeleton
-      id={id}
-      style={style}
-      {...skeletonProps}
-      data-testid="skeleton-test-id"
-    />
-  ) : (
-    children
+  const opacity: number = props.opacity ?? 0.7;
+  props.width = props.width ?? "100%";
+  props.height = props.height ?? "100%";
+  console.log("opacity", opacity);
+  console.log("props.width", props.width);
+  console.log("props.height", props.height);
+  return (
+    <div style={{ position: "relative", ...style }} id={id}>
+      {children}
+      {isLoading && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: `rgba(255, 255, 255, ${opacity})`,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 1,
+          }}
+        >
+          <MuiSkeleton
+            id={id}
+            style={{ transform: "none" }}
+            {...props}
+            data-testid="skeleton-test-id"
+          />
+        </div>
+      )}
+    </div>
   );
 };

chartlets.js/packages/lib/src/plugins/vega/VegaChart.tsx

@@ -1,11 +1,12 @@
 import { VegaLite } from "react-vega";
 import type { TopLevelSpec } from "vega-lite";
 
-import type { ComponentProps, ComponentState } from "@/index";
-import { useSignalListeners } from "./hooks/useSignalListeners";
+import { type ComponentProps, type ComponentState } from "@/index";
 import { useVegaTheme, type VegaTheme } from "./hooks/useVegaTheme";
-import { useEffect, useState } from "react";
+import { useSignalListeners } from "@/plugins/vega/hooks/useSignalListeners";
 import { Skeleton } from "@/plugins/mui/Skeleton";
+import { useLoadingState } from "@/hooks";
+import type { ReactElement } from "react";
 
 interface VegaChartState extends ComponentState {
   theme?: VegaTheme | "default" | "system";
@@ -27,29 +28,39 @@ export function VegaChart({
 }: VegaChartProps) {
   const signalListeners = useSignalListeners(initialChart, type, id, onChange);
   const vegaTheme = useVegaTheme(theme);
-  const [chart, setChart] = useState<TopLevelSpec | null | undefined>(null);
-  const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    if (initialChart) {
-      setLoading(false);
-      setChart(initialChart);
-    }
-  }, [initialChart]);
+  const loadingState = useLoadingState();
+  if (!id) {
+    return;
+  }
+  const isLoading = loadingState[id];
 
+  if (isLoading == "failed") {
+    return <div>An error occurred while loading the data.</div>;
+  }
+  const chart: ReactElement | null = initialChart ? (
+    <VegaLite
+      theme={vegaTheme}
+      spec={initialChart}
+      signalListeners={signalListeners}
+      actions={false}
+    />
+  ) : (
+    <div />
+  );
+  const isSkeletonRequired = skeletonProps !== undefined;
+  if (!isSkeletonRequired) {
+    return chart;
+  }
+  const skeletonId = id + "-skeleton";
   return (
-    <Skeleton loading={loading} {...skeletonProps}>
-      {chart ? (
-        <VegaLite
-          theme={vegaTheme}
-          spec={chart}
-          style={style}
-          signalListeners={signalListeners}
-          actions={false}
-        />
-      ) : (
-        <div id={id} style={style} />
-      )}
+    <Skeleton
+      isLoading={isLoading}
+      id={skeletonId}
+      style={style}
+      {...skeletonProps}
+    >
+      {chart}
     </Skeleton>
   );
 }

chartlets.js/packages/lib/src/store.ts

@@ -7,4 +7,6 @@ export const store = create<StoreState>(() => ({
   extensions: [],
   contributionsResult: {},
   contributionsRecord: {},
+  lastCallbackInputValues: {},
+  loadingState: {},
 }));

chartlets.js/packages/lib/src/types/model/callback.ts

@@ -73,8 +73,8 @@ export interface InputRef {
 
 /**
  * A `CallbackRequest` is a request to invoke a server-side callback.
- * The result from invoking server-side callbacks is a list of `StateChangeRequest`
- * instances.
+ * The result from invoking server-side callbacks is a list of
+ * `StateChangeRequest` instances.
  */
 export interface CallbackRequest extends ContribRef, CallbackRef, InputRef {
   /**
@@ -83,11 +83,17 @@ export interface CallbackRequest extends ContribRef, CallbackRef, InputRef {
    * as the callback's inputs.
    */
   inputValues: unknown[];
+  /**
+   * The output IDs of the callback that will be used to update the
+   * loading state of its respective output.
+   */
+  outputIds: string[];
 }
 
 /**
  * A `StateChangeRequest` is a request to change the application state.
- * Instances of this interface are returned from invoking a server-side callback.
+ * Instances of this interface are returned from invoking a server-side
+ * callback.
  */
 export interface StateChangeRequest extends ContribRef {
   /**

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

@@ -1,7 +1,7 @@
 import { type CSSProperties } from "react";
 import { isObject } from "@/utils/isObject";
 import { isString } from "@/utils/isString";
-import type { SkeletonProps } from "@mui/material";
+import type { SkeletonProps } from "@/plugins/mui/Skeleton";
 
 export type ComponentNode =
   | ComponentState
@@ -25,7 +25,7 @@ export interface ComponentState {
   label?: string;
   color?: string;
   tooltip?: string;
-  skeletonProps?: SkeletonProps;
+  skeletonProps?: Omit<SkeletonProps, "isLoading" | "children">;
 }
 
 export interface ContainerState extends ComponentState {