Remove all Recoil references (#920)

* Rename to renderHookWithJotai

* Remove usage of recoilDiffSets

* Remove recoilDiffSets

* Update changelog

Author: kmcginnes

Changelog.md

@@ -13,7 +13,8 @@
 - **Removed** Recoil state debugging tool that was never used
   ([#909](https://github.com/aws/graph-explorer/pull/909))
 - **Updated** the state management layer to use Jotai instead of Recoil
-  ([#896](https://github.com/aws/graph-explorer/pull/896))
+  ([#896](https://github.com/aws/graph-explorer/pull/896),
+  [#920](https://github.com/aws/graph-explorer/pull/920))
 - **Updated** to use the React Compiler to improve performance and simplify code
   ([#916](https://github.com/aws/graph-explorer/pull/916))
 - **Fixed** issue where a schema sync would not automatically run when a

packages/graph-explorer/src/core/StateProvider/displayEdge.test.ts

@@ -6,7 +6,7 @@ import {
   createRandomSchema,
   createRandomVertex,
   JotaiSnapshot,
-  renderHookWithRecoilRoot,
+  renderHookWithJotai,
 } from "@/utils/testing";
 import { DisplayEdge, useDisplayEdgeFromEdge } from "./displayEdge";
 import { formatDate, sanitizeText } from "@/utils";
@@ -230,7 +230,7 @@ describe("useDisplayEdgeFromEdge", () => {
     edge: Edge,
     initializeState?: (mutableSnapshot: JotaiSnapshot) => void
   ) {
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useDisplayEdgeFromEdge(edge),
       initializeState
     );

packages/graph-explorer/src/core/StateProvider/displayTypeConfigs.test.ts

@@ -4,7 +4,7 @@ import {
   createRandomSchema,
   createRandomVertexTypeConfig,
   JotaiSnapshot,
-  renderHookWithRecoilRoot,
+  renderHookWithJotai,
 } from "@/utils/testing";
 import {
   activeConfigurationAtom,
@@ -110,7 +110,7 @@ describe("useDisplayVertexTypeConfig", () => {
   // Helpers
 
   function act(vertexConfigType: string, schema?: Schema) {
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useDisplayVertexTypeConfig(vertexConfigType),
       schema ? withSchema(schema) : undefined
     );
@@ -188,7 +188,7 @@ describe("useDisplayEdgeTypeConfig", () => {
   // Helpers
 
   function act(edgeConfigType: string, schema?: Schema) {
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useDisplayEdgeTypeConfig(edgeConfigType),
       schema ? withSchema(schema) : undefined
     );

packages/graph-explorer/src/core/StateProvider/displayVertex.test.ts

@@ -4,7 +4,7 @@ import {
   createRandomVertex,
   createRandomVertexTypeConfig,
   JotaiSnapshot,
-  renderHookWithRecoilRoot,
+  renderHookWithJotai,
 } from "@/utils/testing";
 import {
   createVertexId,
@@ -241,7 +241,7 @@ describe("useDisplayVertexFromVertex", () => {
     vertex: Vertex,
     initializeState?: (mutableSnapshot: JotaiSnapshot) => void
   ) {
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useDisplayVertexFromVertex(vertex),
       initializeState
     );

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

@@ -1,4 +1,4 @@
-import { atom } from "jotai";
+import { atom, useSetAtom } from "jotai";
 import { atomFamily, atomWithReset, RESET } from "jotai/utils";
 import {
   createRenderedEdgeId,
@@ -57,6 +57,22 @@ export const edgesOutOfFocusRenderedIdsAtom = atom(
 export const edgesFilteredIdsAtom = atomWithReset(new Set<EdgeId>());
 export const edgesTypesFilteredAtom = atomWithReset(new Set<string>());
 
+const toggleFilteredEdgeAtom = atom(null, (_get, set, edgeId: EdgeId) => {
+  set(edgesFilteredIdsAtom, prev => {
+    const newSet = new Set(prev);
+    if (prev.has(edgeId)) {
+      newSet.delete(edgeId);
+    } else {
+      newSet.add(edgeId);
+    }
+    return newSet;
+  });
+});
+
+export function useToggleFilteredEdge() {
+  return useSetAtom(toggleFilteredEdgeAtom);
+}
+
 /**
  * Filters the edges added to the graph by:
  *

packages/graph-explorer/src/core/StateProvider/neighbors.test.ts

@@ -3,7 +3,7 @@ import { calculateNeighbors, useNeighbors } from "./neighbors";
 import {
   createRandomVertex,
   DbState,
-  renderHookWithRecoilRoot,
+  renderHookWithJotai,
 } from "@/utils/testing";
 import { explorerForTestingAtom } from "../connector";
 import { createMockExplorer } from "@/utils/testing/createMockExplorer";
@@ -50,7 +50,7 @@ describe("useNeighbors", () => {
     const vertex = createRandomVertex();
     const explorer = createMockExplorer();
 
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useNeighbors(vertex.id),
       snapshot => {
         dbState.applyTo(snapshot);
@@ -78,7 +78,7 @@ describe("useNeighbors", () => {
     };
     vi.mocked(explorer.fetchNeighborsCount).mockResolvedValueOnce(response);
 
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useNeighbors(vertex.id),
       snapshot => {
         dbState.applyTo(snapshot);

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

@@ -1,4 +1,4 @@
-import { atom, useAtomValue } from "jotai";
+import { atom, useAtomValue, useSetAtom } from "jotai";
 import { atomFamily, atomWithReset, RESET } from "jotai/utils";
 import {
   createRenderedVertexId,
@@ -57,6 +57,22 @@ export const nodesOutOfFocusRenderedIdsAtom = atom(
 export const nodesFilteredIdsAtom = atomWithReset(new Set<VertexId>());
 export const nodesTypesFilteredAtom = atomWithReset(new Set<string>());
 
+const toggleFilteredNodeAtom = atom(null, (_get, set, vertexId: VertexId) => {
+  set(nodesFilteredIdsAtom, prev => {
+    const newSet = new Set(prev);
+    if (prev.has(vertexId)) {
+      newSet.delete(vertexId);
+    } else {
+      newSet.add(vertexId);
+    }
+    return newSet;
+  });
+});
+
+export function useToggleFilteredNode() {
+  return useSetAtom(toggleFilteredNodeAtom);
+}
+
 /**
  * Filters the nodes added to the graph by:
  *

packages/graph-explorer/src/core/renderedEntities.test.ts

@@ -2,7 +2,7 @@ import {
   createRandomEdge,
   createRandomVertex,
   DbState,
-  renderHookWithRecoilRoot,
+  renderHookWithJotai,
 } from "@/utils/testing";
 import { createEdgeId, createVertexId } from "./entityIdType";
 import {
@@ -95,7 +95,7 @@ describe("useRenderedVertices", () => {
       createRenderedVertexId(dbState.vertices[2].id),
     ];
 
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useRenderedEntities(),
       snapshot => dbState.applyTo(snapshot)
     );
@@ -121,7 +121,7 @@ describe("useRenderedVertices", () => {
       createRenderedVertexId(dbState.vertices[2].id),
     ];
 
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useRenderedEntities(),
       snapshot => dbState.applyTo(snapshot)
     );
@@ -162,7 +162,7 @@ describe("useRenderedEdges", () => {
       createRenderedEdgeId(dbState.edges[3].id),
     ];
 
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useRenderedEntities(),
       snapshot => dbState.applyTo(snapshot)
     );
@@ -202,7 +202,7 @@ describe("useRenderedEdges", () => {
       createRenderedEdgeId(dbState.edges[3].id),
     ];
 
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useRenderedEntities(),
       snapshot => dbState.applyTo(snapshot)
     );
@@ -240,7 +240,7 @@ describe("useRenderedEdges", () => {
       createRenderedEdgeId(dbState.edges[3].id),
     ];
 
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useRenderedEntities(),
       snapshot => dbState.applyTo(snapshot)
     );
@@ -276,7 +276,7 @@ describe("useRenderedEdges", () => {
       createRenderedEdgeId(dbState.edges[1].id),
     ];
 
-    const { result } = renderHookWithRecoilRoot(
+    const { result } = renderHookWithJotai(
       () => useRenderedEntities(),
       snapshot => dbState.applyTo(snapshot)
     );

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

@@ -4,7 +4,7 @@ import {
   createRandomVertex,
   createRandomVertexForRdf,
   DbState,
-  renderHookWithRecoilRoot,
+  renderHookWithJotai,
 } from "@/utils/testing";
 import { useAddToGraph } from "./useAddToGraph";
 import { act } from "react";
@@ -39,7 +39,7 @@ test("should add one node", async () => {
     Promise.resolve(toNodeMap([vertex]))
   );
 
-  const { result } = renderHookWithRecoilRoot(() => {
+  const { result } = renderHookWithJotai(() => {
     const callback = useAddToGraph();
     const vertices = useAtomValue(nodesAtom);
     const edges = useAtomValue(edgesAtom);
@@ -65,7 +65,7 @@ test("should materialize fragment vertices", async () => {
     Promise.resolve(toNodeMap([clonedVertex]))
   );
 
-  const { result } = renderHookWithRecoilRoot(() => {
+  const { result } = renderHookWithJotai(() => {
     const callback = useAddToGraph();
     const vertices = useAtomValue(nodesAtom);
     const edges = useAtomValue(edgesAtom);
@@ -90,7 +90,7 @@ test("should add one edge", async () => {
     Promise.resolve(toNodeMap([node1, node2]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const vertices = useAtomValue(nodesAtom);
@@ -118,7 +118,7 @@ test("should add multiple nodes and edges", async () => {
     Promise.resolve(randomEntities.nodes)
   );
 
-  const { result } = renderHookWithRecoilRoot(() => {
+  const { result } = renderHookWithJotai(() => {
     const callback = useAddToGraph();
     const vertices = useAtomValue(nodesAtom);
     const edges = useAtomValue(edgesAtom);
@@ -153,7 +153,7 @@ test("should update schema when adding a node", async () => {
     Promise.resolve(toNodeMap([vertex]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const vertices = useAtomValue(nodesAtom);
@@ -186,7 +186,7 @@ test("should update schema when adding a node with no label", async () => {
     Promise.resolve(toNodeMap([vertex]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const vertices = useAtomValue(nodesAtom);
@@ -221,7 +221,7 @@ test("should update schema when adding an edge", async () => {
     Promise.resolve(toNodeMap([node1, node2]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const vertices = useAtomValue(nodesAtom);
@@ -259,7 +259,7 @@ test("should add missing attributes to the schema when adding a node", async ()
     Promise.resolve(toNodeMap([vertex]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const vertices = useAtomValue(nodesAtom);
@@ -301,7 +301,7 @@ test("should add missing attributes to the schema when adding an edge", async ()
     Promise.resolve(toNodeMap([node1, node2]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const vertices = useAtomValue(nodesAtom);
@@ -331,7 +331,7 @@ test("should update graph storage when adding a node", async () => {
     Promise.resolve(toNodeMap([vertex]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const graph = useAtomValue(activeGraphSessionAtom);
@@ -365,7 +365,7 @@ test("should update graph storage when adding an edge", async () => {
     Promise.resolve(toNodeMap([node1, node2]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const graph = useAtomValue(activeGraphSessionAtom);
@@ -398,7 +398,7 @@ test("should ignore blank nodes when updating graph storage", async () => {
     Promise.resolve(toNodeMap([vertex, blankNode]))
   );
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useAddToGraph();
       const graph = useAtomValue(activeGraphSessionAtom);

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

@@ -9,7 +9,7 @@ import {
   createRandomSchema,
   createRandomVertex,
   DbState,
-  renderHookWithRecoilRoot,
+  renderHookWithJotai,
 } from "@/utils/testing";
 import { waitFor } from "@testing-library/react";
 import { act } from "react";
@@ -19,7 +19,7 @@ import { useAtomValue } from "jotai";
 test("should delete the active configuration", async () => {
   const config1 = createRandomRawConfiguration();
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useDeleteActiveConfiguration();
       const allConfigs = useAtomValue(configurationAtom);
@@ -45,7 +45,7 @@ test("should delete the active schema", async () => {
   const config1 = createRandomRawConfiguration();
   const schema1 = createRandomSchema();
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useDeleteActiveConfiguration();
       const allSchemas = useAtomValue(schemaAtom);
@@ -70,7 +70,7 @@ test("should delete the graph session for the active connection", async () => {
   const dbState = new DbState();
   dbState.addVertexToGraph(createRandomVertex());
 
-  const { result } = renderHookWithRecoilRoot(
+  const { result } = renderHookWithJotai(
     () => {
       const callback = useDeleteActiveConfiguration();
       const allGraphs = useAtomValue(allGraphSessionsAtom);