Fixed the requested Changes

Avaiga · Nov 1, 2024 · 6e8b61d · 6e8b61d
1 parent 00272c1
commit 6e8b61d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 36 deletions.
diff --git a/doc/gui/examples/controls/collapse_data_view.py b/doc/gui/examples/controls/collapse_data_view.py
@@ -1,25 +1,23 @@
+import taipy as tp
+import taipy.gui.builder as tgb
+from taipy import Config, Orchestrator, Scope
 from taipy.gui import Gui
-import json
 
-# Sample JSON data for testing
-json_data = {
-    "name": "Sample Data",
-    "type": "Example JSON",
-    "attributes": {
-        "id": 123,
-        "description": "A simple JSON structure for demonstration",
-        "values": [1, 2, 3, 4, 5],
-        "nested": {
-            "flag": True,
-            "count": 10
-        }
-    }
-}
+json_config_node = Config.configure_json_data_node(
+    id="json_node",
+    default_path="./demo-1248-dn.json",
+    scope=Scope.GLOBAL,
+)
 
-# Define the page with the JSON viewer
-page = """
-<|{json_data}|json|expandable|>
-"""
+with tgb.Page() as data_node_viewer:
+    tgb.html("h2", "Discovering Data Node JSON Viewer")
+    tgb.data_node(
+        data_node="{json_data_node}"
+    )
+
+gui = Gui(page=data_node_viewer)
 
 if __name__ == "__main__":
-    Gui(page).run(title="DataNode JSON Viewer Example")
+    Orchestrator().run()
+    json_data_node = tp.create_global_data_node(json_config_node)
+    gui.run(title="1248 JSON Data Node")
diff --git a/frontend/taipy/package.json b/frontend/taipy/package.json
@@ -30,7 +30,9 @@
     "fast-deep-equal": "^3.1.3",
     "formik": "^2.2.9",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-json-tree": "^0.19.0",
+    "taipy-gui": "file:../../taipy/gui/webapp"
   },
   "scripts": {
     "postinstall": "node scripts/install.js",

diff --git a/frontend/taipy/src/DataNodeViewer.tsx b/frontend/taipy/src/DataNodeViewer.tsx
@@ -96,8 +96,7 @@ import CoreSelector from "./CoreSelector";
 import { useUniqueId } from "./utils/hooks";
 import DataNodeChart from "./DataNodeChart";
 import DataNodeTable from "./DataNodeTable";
-
-const LazyReactJson = lazy(() => import("react-json-view"));
+import JSONTree from "./utils/LazyReactJsonTree";
 
 const editTimestampFormat = "YYY/MM/dd HH:mm";
 
@@ -1025,19 +1024,14 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                                     <>
                                                     <Suspense fallback={<div>Loading JSON...</div>}>
                                                         <Grid container spacing={2}>
-                                                            <Grid xs={12}>
+                                                            <Grid size={12}>
                                                                 <Typography variant="subtitle2">JSON Data</Typography>
                                                             </Grid>
-                                                            <Grid xs={12}>
-                                                                <LazyReactJson
-                                                                    // json data as prop
-                                                                    src={dtValue}
-                                                                    // collapsed intitially
-                                                                    collapsed={true}
-                                                                    // disabling copy to clipboard
-                                                                    enableClipboard={true}
-                                                                    // hide data type
-                                                                    displayDataTypes={false}
+                                                            <Grid size={12}>
+                                                                <JSONTree
+                                                                    data={dtValue}
+                                                                    hideRoot={true}
+                                                                    shouldExpandNode={() => false}
                                                                 />
                                                             </Grid>
                                                         </Grid>

diff --git a/frontend/taipy/src/react-json-tree.d.ts b/frontend/taipy/src/react-json-tree.d.ts
@@ -0,0 +1,14 @@
+// For Import of React Json Tree Lib
+
+declare module "react-json-tree" {
+  import { ComponentType } from "react";
+
+  interface JSONTreeProps {
+    data: any; 
+    shouldExpandNode?: (keyPath: (string | number)[], data: any, level: number) => boolean;
+    hideRoot?: boolean;
+  }
+
+  const JSONTree: ComponentType<JSONTreeProps>;
+  export = JSONTree;
+}
diff --git a/frontend/taipy/src/utils/LazyReactJsonTree.tsx b/frontend/taipy/src/utils/LazyReactJsonTree.tsx
@@ -0,0 +1,3 @@
+import JSONTree from "react-json-tree";
+
+export default JSONTree;
diff --git a/taipy/gui_core/_adapters.py b/taipy/gui_core/_adapters.py
@@ -42,6 +42,7 @@
 from taipy.gui._warnings import _warn
 from taipy.gui.gui import _DoNotUpdate
 from taipy.gui.utils import _is_boolean, _is_true, _TaipyBase
+from taipy.core.data import JSONDataNode
 
 from .filters import DataNodeFilter, ScenarioFilter, _Filter
 
@@ -187,8 +188,8 @@ def get_hash():
 class _GuiCoreDatanodeAdapter(_TaipyBase):
     @staticmethod
     def _is_tabular_data(datanode: DataNode, value: t.Any):
-        return isinstance(datanode, _TabularDataNodeMixin) or isinstance(
-            value, (pd.DataFrame, pd.Series, list, tuple, dict)
+        return isinstance(datanode, _TabularDataNodeMixin) or (
+            isinstance(value, (pd.DataFrame, pd.Series, list, tuple, dict)) and not isinstance(datanode, JSONDataNode)
         )
 
     def __get_data(self, dn: DataNode):