Migrate to jotai-family as suggested

packages/graph-explorer/package.json

@@ -36,6 +36,7 @@
     "file-saver": "^2.0.5",
     "flat": "^6.0.1",
     "jotai": "^2.16.1",
+    "jotai-family": "^1.0.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.554.0",

packages/graph-explorer/src/core/ConfigurationProvider/useConfiguration.ts

@@ -6,7 +6,7 @@ import {
   mergedConfigurationSelector,
 } from "@/core/StateProvider/configuration";
 import type { ConfigurationContextProps } from "./types";
-import { atomFamily } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 import { atom, useAtomValue } from "jotai";
 import type { EdgeType, VertexType } from "../entities";
 

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

@@ -17,7 +17,7 @@ import {
 import { textTransformSelector } from "@/hooks";
 import { LABELS, RESERVED_ID_PROPERTY, RESERVED_TYPES_PROPERTY } from "@/utils";
 import { atom, useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 
 /** Represents an edge's display information after all transformations have been applied. */
 export type DisplayEdge = {

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

@@ -14,7 +14,8 @@ import {
 } from "@/core";
 import { type TextTransformer, textTransformSelector } from "@/hooks";
 import { LABELS, logger, SEARCH_TOKENS } from "@/utils";
-import { atomFamily, useAtomCallback } from "jotai/utils";
+import { useAtomCallback } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 import { atom, useAtomValue } from "jotai";
 import { useCallback } from "react";
 import { sortAttributeByName } from "./sortAttributeByName";

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

@@ -15,7 +15,7 @@ import {
 import { textTransformSelector } from "@/hooks";
 import { LABELS, RESERVED_ID_PROPERTY, RESERVED_TYPES_PROPERTY } from "@/utils";
 import { atom, useAtomValue } from "jotai";
-import { atomFamily } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 
 /** Represents a vertex's display information after all transformations have been applied. */
 export type DisplayVertex = {

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

@@ -1,5 +1,6 @@
 import { atom, useAtomValue, useSetAtom } from "jotai";
-import { atomFamily, atomWithReset } from "jotai/utils";
+import { atomWithReset } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 import type { Edge, EdgeId } from "@/core";
 
 export function toEdgeMap(edges: Iterable<Edge>): Map<EdgeId, Edge> {

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

@@ -1,6 +1,7 @@
 import type { VertexId, VertexType } from "@/core";
 import { atom, useAtomValue } from "jotai";
-import { atomFamily, useAtomCallback } from "jotai/utils";
+import { useAtomCallback } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 import { edgesAtom } from "./edges";
 import { nodesAtom, toNodeMap } from "./nodes";
 import { useCallback, useMemo } from "react";

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

@@ -1,5 +1,6 @@
 import { atom, useAtomValue, useSetAtom } from "jotai";
-import { atomFamily, atomWithReset } from "jotai/utils";
+import { atomWithReset } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 import { type Vertex, type VertexId, createVertex } from "@/core";
 import { vertexDetailsQuery } from "@/connector";
 import { useQuery } from "@tanstack/react-query";

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

@@ -19,7 +19,8 @@ import { logger } from "@/utils";
 import generatePrefixes from "@/utils/generatePrefixes";
 import { startTransition, useCallback, useDeferredValue } from "react";
 import { atom, useAtomValue } from "jotai";
-import { atomFamily, RESET, useAtomCallback } from "jotai/utils";
+import { RESET, useAtomCallback } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 import type { SetStateActionWithReset } from "@/utils/jotai";
 import { createTypedValue, type ScalarValue } from "@/connector/entities";
 import type { Simplify } from "type-fest";

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

@@ -4,7 +4,7 @@ import { useDeferredValue } from "react";
 import { logger, RESERVED_ID_PROPERTY, RESERVED_TYPES_PROPERTY } from "@/utils";
 import type { Simplify } from "type-fest";
 import { useActiveSchema } from "./schema";
-import { atomFamily } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 import { userStylingAtom } from "./storageAtoms";
 import type { EdgeType, VertexType } from "../entities";