Fix styling sidebar performance

packages/graph-explorer/src/core/StateProvider/userPreferences.ts

@@ -1,4 +1,4 @@
-import { atom } from "recoil";
+import { atom, DefaultValue, selectorFamily } from "recoil";
 import localForageEffect from "./localForageEffect";
 
 export type ShapeStyle =
@@ -111,6 +111,84 @@ export const userStylingAtom = atom<UserPreferences["styling"]>({
   effects: [localForageEffect()],
 });
 
+export const userStylingNodeAtom = selectorFamily({
+  key: "user-styling-node",
+  get:
+    (nodeType: string) =>
+    ({ get }) => {
+      return get(userStylingAtom).vertices?.find(
+        node => node.type === nodeType
+      );
+    },
+  set:
+    (nodeType: string) =>
+    ({ set }, newValue) => {
+      set(userStylingAtom, prev => {
+        let newNodes = Array.from(prev.vertices ?? []);
+        const existingIndex = newNodes.findIndex(
+          node => node.type === nodeType
+        );
+
+        if (newValue instanceof DefaultValue || !newValue) {
+          // Remove the entry from user styles
+          newNodes = newNodes.filter(node => node.type !== nodeType);
+        } else if (existingIndex === -1) {
+          // Add it because it doesn't exist
+          newNodes.push(newValue);
+        } else {
+          // Replace the existing entry
+          newNodes[existingIndex] = {
+            ...newNodes[existingIndex],
+            ...newValue,
+          };
+        }
+
+        return {
+          ...prev,
+          vertices: newNodes,
+        };
+      });
+    },
+});
+
+export const userStylingEdgeAtom = selectorFamily({
+  key: "user-styling-edge",
+  get:
+    (edgeType: string) =>
+    ({ get }) => {
+      return get(userStylingAtom).edges?.find(edge => edge.type === edgeType);
+    },
+  set:
+    (edgeType: string) =>
+    ({ set }, newValue) => {
+      set(userStylingAtom, prev => {
+        let newEdges = Array.from(prev.edges ?? []);
+        const existingIndex = newEdges.findIndex(
+          edge => edge.type === edgeType
+        );
+
+        if (newValue instanceof DefaultValue || !newValue) {
+          // Remove the entry from user styles
+          newEdges = newEdges.filter(edge => edge.type !== edgeType);
+        } else if (existingIndex === -1) {
+          // Add it because it doesn't exist
+          newEdges.push(newValue);
+        } else {
+          // Replace the existing entry
+          newEdges[existingIndex] = {
+            ...newEdges[existingIndex],
+            ...newValue,
+          };
+        }
+
+        return {
+          ...prev,
+          edges: newEdges,
+        };
+      });
+    },
+});
+
 export const userLayoutAtom = atom<UserPreferences["layout"]>({
   key: "user-layout",
   default: {

packages/graph-explorer/src/hooks/usePrevious.test.ts

@@ -2,17 +2,17 @@ import { renderHook } from "@testing-library/react";
 import usePrevious from "./usePrevious";
 
 describe("usePrevious", () => {
-  it("should return undefined for the first render", () => {
+  it("should return null for the first render", () => {
     const { result } = renderHook(() => usePrevious(10));
-    expect(result.current).toBeUndefined();
+    expect(result.current).toBeNull();
   });
 
   it("should return the previous value after a re-render", () => {
     const { result, rerender } = renderHook(({ value }) => usePrevious(value), {
       initialProps: { value: 10 },
     });
 
-    expect(result.current).toBeUndefined();
+    expect(result.current).toBeNull();
 
     rerender({ value: 20 });
     expect(result.current).toEqual(10);

packages/graph-explorer/src/hooks/usePrevious.ts

@@ -1,13 +1,13 @@
-import { useEffect, useRef } from "react";
+import React from "react";
 
-const usePrevious = <T>(value: T) => {
-  const ref = useRef<T>();
+export default function usePrevious<T>(value: T): T | null {
+  const [current, setCurrent] = React.useState(value);
+  const [previous, setPrevious] = React.useState<T | null>(null);
 
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
+  if (value !== current) {
+    setPrevious(current);
+    setCurrent(value);
+  }
 
-  return ref.current;
-};
-
-export default usePrevious;
+  return previous;
+}