feat: early return for unsupported data limit

Author: AykutSarac

src/constants/graph.ts

@@ -2,3 +2,5 @@ export const NODE_DIMENSIONS = {
   ROW_HEIGHT: 24, // Regular row height
   PARENT_HEIGHT: 36, // Height for parent nodes
 } as const;
+
+export const SUPPORTED_LIMIT = +(process.env.NEXT_PUBLIC_NODE_LIMIT as string);

src/features/editor/views/GraphView/index.tsx

@@ -136,12 +136,10 @@ const GraphCanvas = ({ isWidget }: GraphProps) => {
   );
 };
 
-const SUPPORTED_LIMIT = +(process.env.NEXT_PUBLIC_NODE_LIMIT as string);
-
 export const GraphView = ({ isWidget = false }: GraphProps) => {
   const setViewPort = useGraph(state => state.setViewPort);
   const viewPort = useGraph(state => state.viewPort);
-  const aboveSupportedLimit = useGraph(state => state.nodes.length > SUPPORTED_LIMIT);
+  const aboveSupportedLimit = useGraph(state => state.aboveSupportedLimit);
   const loading = useGraph(state => state.loading);
   const gesturesEnabled = useConfig(state => state.gesturesEnabled);
   const rulersEnabled = useConfig(state => state.rulersEnabled);

src/features/editor/views/GraphView/stores/useGraph.ts

@@ -1,6 +1,7 @@
 import type { ViewPort } from "react-zoomable-ui/dist/ViewPort";
 import type { CanvasDirection } from "reaflow/dist/layout/elkLayout";
 import { create } from "zustand";
+import { SUPPORTED_LIMIT } from "../../../../../constants/graph";
 import useJson from "../../../../../store/useJson";
 import type { EdgeData, NodeData } from "../../../../../types/graph";
 import { parser } from "../lib/jsonParser";
@@ -21,6 +22,7 @@ export interface Graph {
   collapsedParents: string[];
   selectedNode: NodeData | null;
   path: string;
+  aboveSupportedLimit: boolean;
 }
 
 const initialStates: Graph = {
@@ -37,6 +39,7 @@ const initialStates: Graph = {
   collapsedParents: [],
   selectedNode: null,
   path: "",
+  aboveSupportedLimit: false,
 };
 
 interface GraphActions {
@@ -75,16 +78,32 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
     const { nodes, edges } = parser(data ?? useJson.getState().json);
 
     if (get().collapseAll) {
-      set({ nodes, edges, ...options });
+      if (nodes.length > SUPPORTED_LIMIT) {
+        return set({ aboveSupportedLimit: true, ...options, loading: false });
+      }
+
+      set({ nodes, edges, aboveSupportedLimit: false, ...options });
       get().collapseGraph();
     } else {
+      if (nodes.length > SUPPORTED_LIMIT) {
+        return set({
+          aboveSupportedLimit: true,
+          collapsedParents: [],
+          collapsedNodes: [],
+          collapsedEdges: [],
+          ...options,
+          loading: false,
+        });
+      }
+
       set({
         nodes,
         edges,
         collapsedParents: [],
         collapsedNodes: [],
         collapsedEdges: [],
         graphCollapsed: false,
+        aboveSupportedLimit: false,
         ...options,
       });
     }