add logic to handle large file

Author: Chaos-19

icon.png

@@ -1,5 +1,6 @@
 {
-    "name": "@chaos-19/json-graph-acode", "version": "1.0.1",
+    "name": "@chaos-19/json-graph-acode",
+    "version": "1.0.1",
     "description": "A JSON to Graph Visualizer plugin for Acode, built with React. This plugin enables users to visualize JSON data as an interactive graph for easy exploration of complex structures.",
     "main": "dist/main.js",
     "author": "kalkidan Getachew",

package.json

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useRef } from "react";
-import PageContextProvider, { PageContext } from "./PageContext";
 
 import Jsoncrack from "./components/Jsoncrack";
 import { fileExtensions, jsonIcon } from "./constants";
 import DropDown from "./components/Dropdown";
 
+const fs = acode.require("fsOperation");
+
 const App = ({ $page }) => {
     const [pageState, setPageState] = useState({
         theme: "light",
@@ -77,10 +78,14 @@ const App = ({ $page }) => {
     };
 
     useEffect(() => {
-        const handleSwitchFile = () => {
+        const handleSwitchFile = async () => {
             const { filename, uri } = editorManager.activeFile;
-
-            if (fileExtensions.includes(filename?.split(".").pop())) {
+            
+            const isFileExist = await fs(uri).exists();
+            if (
+                isFileExist &&
+                fileExtensions.includes(filename?.split(".").pop())
+            ) {
                 setActiveFile({
                     filename,
                     uri

src/App.jsx

@@ -1,4 +1,4 @@
-const DropDown = ({ $page, pageState, handlePageState, graphRef }) => {
+const DropDown = ({ $page, pageState, handlePageState }) => {
     const toggleMenu = false;
 
     const dropdownMenu = tag("span", {
@@ -34,21 +34,12 @@ const DropDown = ({ $page, pageState, handlePageState, graphRef }) => {
             <li data-theme="light">
               <span class="dropdown-item theme">theme</span>
             </li>
-            <li data-value="false" data-collapseNodes="false">
-              <span class="dropdown-item collapseNodes">collapseNodes</span>
-            </li>
-            <li data-value="false" data-compactNodes="false">
-              <span class="dropdown-item compactNodes">compactNodes</span>
-            </li>
             <li data-value="false" data-hideChildrenCount="false">
               <span class="dropdown-item hideChildrenCount">hideChildrenCount</span>
             </li>
             <li data-value="false" data-hideCollapseButton="false">
               <span class="dropdown-item hideCollapseButton">hideCollapseButton</span>
             </li>
-            <li data-value="false" data-disableImagePreview="false">
-              <span class="dropdown-item">disableImagePreview</span>
-            </li>
           </ul>
     `;
 
@@ -98,21 +89,13 @@ const DropDown = ({ $page, pageState, handlePageState, graphRef }) => {
 
     const keys = [
         // "collapseNodes",
-        "compactNodes",
+        //"compactNodes",
         "hideChildrenCount",
-        "hideCollapseButton",
-        "disableImagePreview"
+        "hideCollapseButton"
+        //"disableImagePreview"
     ];
-    list[2].addEventListener("click", e => {
-        const collapseNodes = list[1].dataset.value;
-        e.target.textContent = collapsGraph ? "collapseNodes" : "expandNodes";
-        list[1].dataset.value = !collapseNodes;
-        console.log(JSON.stringify(graphRef.current));
-        if (!collapseNodes) graphRef.current?.collapsGraph();
-        else graphRef.current.expandGraph();
-    });
 
-    for (let i = 3; i < list.length; i++)
+    for (let i = 2; i < list.length; i++)
         list[i].addEventListener("click", e => {
             e.preventDefault();
             //console.log(list[i].dataset.value, i);

src/PageContext.jsx

@@ -1,38 +1,37 @@
-import React, { useState, useEffect ,useRef} from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { JSONGraph as Graph } from "jsongraph-react";
 import { fileExtensions } from "../constants";
 const fs = acode.require("fsOperation");
 
 const Jsoncrack = ({
     graphRef,
-    options: {
-        theme,
-        direction,
-        hideChildrenCount,
-        hideCollapseButton,
-        collapseNodes
-    },
+    options: { theme, direction, hideChildrenCount, hideCollapseButton },
     fileName,
     uri
 }) => {
-    const [fileContent, setFileContent] = useState([]);
+    const [fileContent, setFileContent] = useState("");
     const [readeState, setReadeState] = useState(false);
+    const [isTooLarge, setIsTooLarge] = useState(false);
 
     const currentFileRef = useRef(null); // Track the current file being read
 
     async function readFileInChunks() {
-        let chunkSize = 100 * 824;
         const file = editorManager.activeFile;
         const fileContentArray = [];
         let offset = 0;
 
         try {
+            // Read the entire file
             const content = await fs(file.uri).readFile("utf-8");
+            const fileStat = await fs(uri).stat();
+
+            setIsTooLarge(fileStat.length > 200000);
+
             const fileSize = content.length;
-            chunkSize = fileSize / 2;
+            let chunkSize = fileSize / 5;
 
             while (offset < fileSize) {
-                if (file !== currentFileRef.current) {
+                if (file !== currentFileRef.current || isTooLarge) {
                     console.log("File switched, stopping read process...");
                     return;
                 }
@@ -42,7 +41,7 @@ const Jsoncrack = ({
 
                 offset += chunkSize;
 
-                setFileContent(prev => [...prev, chunk]);
+                setFileContent(prev => prev + chunk);
                 console.log(`Processed ${offset} of ${fileSize}`);
             }
 
@@ -53,13 +52,12 @@ const Jsoncrack = ({
     }
 
     useEffect(() => {
-        console.log(fileName, "...New file detected");
-
         const handleSwitchFile = async () => {
             const { filename } = editorManager.activeFile;
 
             if (fileExtensions.includes(filename?.split(".").pop())) {
                 currentFileRef.current = editorManager.activeFile; // Set current file reference
+                setIsTooLarge(false);
                 setFileContent(""); // Reset file content for the new file
                 setReadeState(true);
                 await readFileInChunks();
@@ -80,24 +78,34 @@ const Jsoncrack = ({
 
     return (
         <div className="w-[99%] h-[94dvh]">
-            {readeState || fileContent.length == 0 ? (
-                <h1>Loading...</h1>
+            {readeState ? (
+                <div className="h-full w-full flex items-center justify-center">
+                    <h1>Loading...</h1>
+                </div>
+            ) : isTooLarge ? (
+                <div className="h-full w-full flex items-center justify-center">
+                    <div>
+                        <h3 className="text-lg font-bold">Oppsss!</h3>
+                        <p className="text-sm">file is too large</p>
+                    </div>
+                </div>
             ) : (
-                <Graph
-                    json={fileContent.join("")}
-                    ref={graphRef}
-                    style={{
-                        width: "100%",
-                        height: "100%"
-                    }}
-                    layout={{
-                        theme,
-                        direction,
-                        hideChildrenCount,
-                        hideCollapseButton,
-                        collapseNodes
-                    }}
-                />
+                fileContent && (
+                    <Graph
+                        json={fileContent}
+                        ref={graphRef}
+                        style={{
+                            width: "100%",
+                            height: "100%"
+                        }}
+                        layout={{
+                            theme,
+                            direction,
+                            hideChildrenCount,
+                            hideCollapseButton
+                        }}
+                    />
+                )
             )}
         </div>
     );

src/components/Dropdown.jsx

@@ -2,7 +2,7 @@ import plugin from "../plugin.json";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css"; // Import TailwindCSS
-import PageContextProvider from "./PageContext";
+
 import ErrorBoundary from "./components/ErrorBoundary";
 import App from "./App";