From d8a66798eb44f77a4fb3f2ee12b1f4e4629c2054 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Mon, 1 Apr 2024 10:33:06 +0300 Subject: [PATCH 1/8] remove package --- package.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/package.json b/package.json index 8feea0bd..36edffbc 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "react-cytoscapejs": "^2.0.0", "react-dom": "^18", "react-hook-form": "^7.49.3", + "react-json-view": "^1.21.3", "react-resizable-panels": "^1.0.9", "save-dev": "^0.0.1-security", "tailwind-merge": "^2.2.0", @@ -70,5 +71,11 @@ "eslint-config-next": "14.0.4", "postcss": "^8", "typescript": "^5" + }, + "overrides": { + "react-json-view": { + "react": "$react", + "react-dom": "$react-dom" + } } } From 82cdbcd142bd21d7db5bb7a80637fc8659fcbe7f Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Mon, 1 Apr 2024 10:35:07 +0300 Subject: [PATCH 2/8] remove package --- package-lock.json | 230 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 230 insertions(+) diff --git a/package-lock.json b/package-lock.json index 49be362a..de5f4a13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "react-cytoscapejs": "^2.0.0", "react-dom": "^18", "react-hook-form": "^7.49.3", + "react-json-view": "^1.21.3", "react-resizable-panels": "^1.0.9", "save-dev": "^0.0.1-security", "tailwind-merge": "^2.2.0", @@ -4222,6 +4223,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==" + }, "node_modules/ast-types-flow": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz", @@ -4370,6 +4376,11 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "node_modules/base16": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz", + "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==" + }, "node_modules/binary-extensions": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", @@ -5068,6 +5079,14 @@ } } }, + "node_modules/cross-fetch": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz", + "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==", + "dependencies": { + "node-fetch": "^2.6.12" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -6325,6 +6344,33 @@ "reusify": "^1.0.4" } }, + "node_modules/fbemitter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz", + "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==", + "dependencies": { + "fbjs": "^3.0.0" + } + }, + "node_modules/fbjs": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.5.tgz", + "integrity": "sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==", + "dependencies": { + "cross-fetch": "^3.1.5", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^1.0.35" + } + }, + "node_modules/fbjs-css-vars": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", + "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" + }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -6380,6 +6426,18 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==" }, + "node_modules/flux": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.4.tgz", + "integrity": "sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==", + "dependencies": { + "fbemitter": "^3.0.0", + "fbjs": "^3.0.1" + }, + "peerDependencies": { + "react": "^15.0.2 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -7355,12 +7413,22 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash.curry": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", + "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "dev": true }, + "node_modules/lodash.flow": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz", + "integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -7621,6 +7689,25 @@ "tslib": "^2.0.3" } }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-releases": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", @@ -8212,6 +8299,14 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz", "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==" }, + "node_modules/promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dependencies": { + "asap": "~2.0.3" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -8230,6 +8325,11 @@ "node": ">=6" } }, + "node_modules/pure-color": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz", + "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==" + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -8260,6 +8360,17 @@ "node": ">=0.10.0" } }, + "node_modules/react-base16-styling": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz", + "integrity": "sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==", + "dependencies": { + "base16": "^1.0.0", + "lodash.curry": "^4.0.1", + "lodash.flow": "^3.3.0", + "pure-color": "^1.2.0" + } + }, "node_modules/react-cytoscapejs": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-cytoscapejs/-/react-cytoscapejs-2.0.0.tgz", @@ -8304,6 +8415,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-json-view": { + "version": "1.21.3", + "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.21.3.tgz", + "integrity": "sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==", + "dependencies": { + "flux": "^4.0.1", + "react-base16-styling": "^0.6.0", + "react-lifecycles-compat": "^3.0.4", + "react-textarea-autosize": "^8.3.2" + }, + "peerDependencies": { + "react": "^17.0.0 || ^16.3.0 || ^15.5.4", + "react-dom": "^17.0.0 || ^16.3.0 || ^15.5.4" + } + }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-remove-scroll": { "version": "2.5.5", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", @@ -8380,6 +8511,22 @@ } } }, + "node_modules/react-textarea-autosize": { + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", + "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "use-composed-ref": "^1.3.0", + "use-latest": "^1.2.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -8699,6 +8846,11 @@ "node": ">= 0.4" } }, + "node_modules/setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -9180,6 +9332,11 @@ "node": ">=8.0" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "node_modules/tree-kill": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", @@ -9337,6 +9494,28 @@ "node": ">=14.17" } }, + "node_modules/ua-parser-js": { + "version": "1.0.37", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz", + "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "engines": { + "node": "*" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -9455,6 +9634,43 @@ } } }, + "node_modules/use-composed-ref": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", + "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-latest": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz", + "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==", + "dependencies": { + "use-isomorphic-layout-effect": "^1.1.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", @@ -9489,6 +9705,20 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", From 82b09e1cb91c172880934e01a20ac69145c3d322 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Mon, 1 Apr 2024 14:57:58 +0300 Subject: [PATCH 3/8] removing the properties color and category and displaying the object in the table view as tree --- app/graph/DataPanel.tsx | 38 +++--- app/graph/GraphView.tsx | 8 +- app/graph/tableview.tsx | 56 ++++++-- package-lock.json | 282 +++++++++------------------------------- package.json | 2 +- 5 files changed, 135 insertions(+), 251 deletions(-) diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx index d7ef06d5..cfcfa944 100644 --- a/app/graph/DataPanel.tsx +++ b/app/graph/DataPanel.tsx @@ -1,7 +1,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; -export default function DataPanel({node}: {node: Node}) { +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export default function DataPanel({ node }: { node: [string, any][] }) { return ( @@ -12,25 +13,28 @@ export default function DataPanel({node}: {node: Node}) { { - Object.entries(node).map((row, index) => ( + node.map((row, index) => ( // eslint-disable-next-line react/no-array-index-key { - Object.values(row).map((cell, cellIndex) => ( - // eslint-disable-next-line react/no-array-index-key - - - - - {JSON.stringify(cell)} - - -

{JSON.stringify(cell)}

- - - - - )) + row.map((cell, cellIndex) => { + const text = cellIndex === 1 ? JSON.stringify(cell).replace(/["]/g, "") : JSON.stringify(cell); + return ( + // eslint-disable-next-line react/no-array-index-key + + + + + {text} + + +

{text}

+ + + + + ) + }) } )) diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx index f2422f98..b38feed5 100644 --- a/app/graph/GraphView.tsx +++ b/app/graph/GraphView.tsx @@ -95,7 +95,8 @@ interface GraphViewProps { const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { - const [selectedNode, setSelectedNode] = useState(null); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const [selectedNode, setSelectedNode] = useState<[string, any][] | null>(null); // A reference to the chart container to allowing zooming and editing const chartRef = useRef(null) @@ -167,10 +168,11 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { const handleTap = (evt: EventObject) => { const node: Node = evt.target.json().data; - setSelectedNode(node); + const filteredProperties = Object.entries(node).filter(prop => prop[0] !== "color" && prop[0] !== "category") + setSelectedNode(filteredProperties); dataPanel.current?.expand(); } - + return ( diff --git a/app/graph/tableview.tsx b/app/graph/tableview.tsx index c2a18e1e..fd73c1b1 100644 --- a/app/graph/tableview.tsx +++ b/app/graph/tableview.tsx @@ -1,9 +1,15 @@ +'use client' + import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; +import { JSONTree } from "react-json-tree" +import { transparent } from "tailwindcss/colors"; import { Graph } from "./model"; // eslint-disable-next-line import/prefer-default-export export function TableView({ graph }: { graph: Graph }) { + + return (
A list of results @@ -23,14 +29,48 @@ export function TableView({ graph }: { graph: Graph }) { // eslint-disable-next-line react/no-array-index-key { - Object.values(row).map((cell, cellIndex) => ( - // eslint-disable-next-line react/no-array-index-key - - - {JSON.stringify(cell)} -

{JSON.stringify(cell)}

 - - )) + Object.values(row).map((cell, cellIndex) => { + // eslint-disable-next-line no-useless-escape + const text = JSON.stringify(cell).replace(/[\[\]{}:,]/g, (match) => { + switch (match) { + case ":": return ': '; + case ",": return ', '; + default: return ''; + } + }); + return ( + // eslint-disable-next-line react/no-array-index-key + + + + + {typeof cell === "object" ? ( + false} + theme={{ + // background + base00: transparent, + // number of keys keys + base03: transparent, + // value number + // base09: transparent, + // value string + // base0B: transparent, + // keys and triangles + // base0D: transparent, + }} + /> + ) : (text)} + + +

{text}

+ + + + + ) + }) } )) diff --git a/package-lock.json b/package-lock.json index de5f4a13..1ec2138a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,7 +41,7 @@ "react-cytoscapejs": "^2.0.0", "react-dom": "^18", "react-hook-form": "^7.49.3", - "react-json-view": "^1.21.3", + "react-json-tree": "^0.18.0", "react-resizable-panels": "^1.0.9", "save-dev": "^0.0.1-security", "tailwind-merge": "^2.2.0", @@ -3584,6 +3584,11 @@ "node": ">=10.13.0" } }, + "node_modules/@types/base16": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/base16/-/base16-1.0.5.tgz", + "integrity": "sha512-OzOWrTluG9cwqidEzC/Q6FAmIPcnZfm8BFRlIx0+UIUqnuAmi5OS88O0RpT3Yz6qdmqObvUhasrbNsCofE4W9A==" + }, "node_modules/@types/cytoscape": { "version": "3.19.16", "resolved": "https://registry.npmjs.org/@types/cytoscape/-/cytoscape-3.19.16.tgz", @@ -3613,8 +3618,7 @@ "node_modules/@types/lodash": { "version": "4.17.0", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz", - "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==", - "dev": true + "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==" }, "node_modules/@types/node": { "version": "20.11.28", @@ -3628,14 +3632,12 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "devOptional": true + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { "version": "18.2.66", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.66.tgz", "integrity": "sha512-OYTmMI4UigXeFMF/j4uv0lBBEbongSgptPrHBxqME44h9+yNov+oL6Z3ocJKo0WyXR84sQUNeyIp9MRfckvZpg==", - "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -3664,8 +3666,7 @@ "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "devOptional": true + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@types/semver": { "version": "7.5.8", @@ -4223,11 +4224,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/asap": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==" - }, "node_modules/ast-types-flow": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz", @@ -4872,11 +4868,19 @@ } } }, + "node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -4884,8 +4888,16 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } }, "node_modules/commander": { "version": "7.2.0", @@ -5079,14 +5091,6 @@ } } }, - "node_modules/cross-fetch": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz", - "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==", - "dependencies": { - "node-fetch": "^2.6.12" - } - }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -5188,8 +5192,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/cytoscape": { "version": "3.28.1", @@ -6344,33 +6347,6 @@ "reusify": "^1.0.4" } }, - "node_modules/fbemitter": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz", - "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==", - "dependencies": { - "fbjs": "^3.0.0" - } - }, - "node_modules/fbjs": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.5.tgz", - "integrity": "sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==", - "dependencies": { - "cross-fetch": "^3.1.5", - "fbjs-css-vars": "^1.0.0", - "loose-envify": "^1.0.0", - "object-assign": "^4.1.0", - "promise": "^7.1.1", - "setimmediate": "^1.0.5", - "ua-parser-js": "^1.0.35" - } - }, - "node_modules/fbjs-css-vars": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", - "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" - }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -6426,18 +6402,6 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==" }, - "node_modules/flux": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.4.tgz", - "integrity": "sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==", - "dependencies": { - "fbemitter": "^3.0.0", - "fbjs": "^3.0.1" - }, - "peerDependencies": { - "react": "^15.0.2 || ^16.0.0 || ^17.0.0" - } - }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -7424,11 +7388,6 @@ "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "dev": true }, - "node_modules/lodash.flow": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz", - "integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==" - }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -7689,25 +7648,6 @@ "tslib": "^2.0.3" } }, - "node_modules/node-fetch": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", - "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", - "dependencies": { - "whatwg-url": "^5.0.0" - }, - "engines": { - "node": "4.x || >=6.0.0" - }, - "peerDependencies": { - "encoding": "^0.1.0" - }, - "peerDependenciesMeta": { - "encoding": { - "optional": true - } - } - }, "node_modules/node-releases": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", @@ -8299,14 +8239,6 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz", "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==" }, - "node_modules/promise": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "dependencies": { - "asap": "~2.0.3" - } - }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -8325,11 +8257,6 @@ "node": ">=6" } }, - "node_modules/pure-color": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz", - "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==" - }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -8361,14 +8288,17 @@ } }, "node_modules/react-base16-styling": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz", - "integrity": "sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==", + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.9.1.tgz", + "integrity": "sha512-1s0CY1zRBOQ5M3T61wetEpvQmsYSNtWEcdYzyZNxKa8t7oDvaOn9d21xrGezGAHFWLM7SHcktPuPTrvoqxSfKw==", "dependencies": { + "@babel/runtime": "^7.16.7", + "@types/base16": "^1.0.2", + "@types/lodash": "^4.14.178", "base16": "^1.0.0", - "lodash.curry": "^4.0.1", - "lodash.flow": "^3.3.0", - "pure-color": "^1.2.0" + "color": "^3.2.1", + "csstype": "^3.0.10", + "lodash.curry": "^4.1.1" } }, "node_modules/react-cytoscapejs": { @@ -8415,26 +8345,20 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "node_modules/react-json-view": { - "version": "1.21.3", - "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.21.3.tgz", - "integrity": "sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==", + "node_modules/react-json-tree": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.18.0.tgz", + "integrity": "sha512-Qe6HKSXrr++n9Y31nkRJ3XvQMATISpqigH1vEKhLwB56+nk5thTP0ITThpjxY6ZG/ubpVq/aEHIcyLP/OPHxeA==", "dependencies": { - "flux": "^4.0.1", - "react-base16-styling": "^0.6.0", - "react-lifecycles-compat": "^3.0.4", - "react-textarea-autosize": "^8.3.2" + "@babel/runtime": "^7.20.6", + "@types/lodash": "^4.14.191", + "react-base16-styling": "^0.9.1" }, "peerDependencies": { - "react": "^17.0.0 || ^16.3.0 || ^15.5.4", - "react-dom": "^17.0.0 || ^16.3.0 || ^15.5.4" + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" - }, "node_modules/react-remove-scroll": { "version": "2.5.5", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", @@ -8511,22 +8435,6 @@ } } }, - "node_modules/react-textarea-autosize": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", - "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==", - "dependencies": { - "@babel/runtime": "^7.20.13", - "use-composed-ref": "^1.3.0", - "use-latest": "^1.2.1" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -8846,11 +8754,6 @@ "node": ">= 0.4" } }, - "node_modules/setimmediate": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==" - }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -8907,6 +8810,19 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -9332,11 +9248,6 @@ "node": ">=8.0" } }, - "node_modules/tr46": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" - }, "node_modules/tree-kill": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", @@ -9494,28 +9405,6 @@ "node": ">=14.17" } }, - "node_modules/ua-parser-js": { - "version": "1.0.37", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz", - "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/ua-parser-js" - }, - { - "type": "paypal", - "url": "https://paypal.me/faisalman" - }, - { - "type": "github", - "url": "https://github.com/sponsors/faisalman" - } - ], - "engines": { - "node": "*" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -9634,43 +9523,6 @@ } } }, - "node_modules/use-composed-ref": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", - "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/use-isomorphic-layout-effect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/use-latest": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz", - "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==", - "dependencies": { - "use-isomorphic-layout-effect": "^1.1.1" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", @@ -9705,20 +9557,6 @@ "uuid": "dist/bin/uuid" } }, - "node_modules/webidl-conversions": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" - }, - "node_modules/whatwg-url": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", - "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", - "dependencies": { - "tr46": "~0.0.3", - "webidl-conversions": "^3.0.0" - } - }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 36edffbc..be45a7e6 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "react-cytoscapejs": "^2.0.0", "react-dom": "^18", "react-hook-form": "^7.49.3", - "react-json-view": "^1.21.3", + "react-json-tree": "^0.18.0", "react-resizable-panels": "^1.0.9", "save-dev": "^0.0.1-security", "tailwind-merge": "^2.2.0", From 5bacc86a2c24c329b0d5bfed9b972665a493be11 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Mon, 1 Apr 2024 17:06:04 +0300 Subject: [PATCH 4/8] adding option to write a visualizing path objects --- app/graph/model.ts | 189 +++++++++++++++++++++++++-------------------- 1 file changed, 104 insertions(+), 85 deletions(-) diff --git a/app/graph/model.ts b/app/graph/model.ts index c2320c41..66135b6b 100644 --- a/app/graph/model.ts +++ b/app/graph/model.ts @@ -31,7 +31,7 @@ function nodeSafeKey(key: string): string { const index = NODE_RESERVED_KEYS.indexOf(key); if (index === -1) { return key; - } + } return NODE_ALTERNATIVE_RESERVED_KEYS[index]; } @@ -42,17 +42,17 @@ function edgeSafeKey(key: string): string { const index = EDGE_RESERVED_KEYS.indexOf(key); if (index === -1) { return key; - } + } return EDGE_ALTERNATIVE_RESERVED_KEYS[index]; } export function getCategoryColorName(index: number): string { - const colorIndex = index(), new Map(), new Map()) } @@ -134,6 +134,92 @@ export class Graph { return graph } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + private extendNode(cell: any, newElements: ElementDefinition[]) { + // check if category already exists in categories + let category = this.categoriesMap.get(cell.labels[0]) + if (!category) { + category = { name: cell.labels[0], index: this.categoriesMap.size, show: true } + this.categoriesMap.set(category.name, category) + this.categories.push(category) + } + + // check if node already exists in nodes or fake node was created + const currentNode = this.nodesMap.get(cell.id) + if (!currentNode) { + const node: NodeDataDefinition = { + id: cell.id.toString(), + name: cell.id.toString(), + category: category.name, + color: getCategoryColorValue(category.index) + } + Object.entries(cell.properties).forEach(([key, value]) => { + node[nodeSafeKey(key)] = value as string; + }); + this.nodesMap.set(cell.id, node) + this.elements.push({ data: node }) + newElements.push({ data: node }) + } else if (currentNode.category === "") { + // set values in a fake node + currentNode.id = cell.id.toString(); + currentNode.name = cell.id.toString(); + currentNode.category = category.name; + currentNode.color = getCategoryColorValue(category.index) + Object.entries(cell.properties).forEach(([key, value]) => { + currentNode[nodeSafeKey(key)] = value as string; + }); + newElements.push({ data: currentNode }) + } + return newElements + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + private extendEdge(cell: any, newElements: ElementDefinition[]) { + const currentEdge = this.edgesMap.get(cell.id) + if (!currentEdge) { + const sourceId = cell.sourceId.toString(); + const destinationId = cell.destinationId.toString() + + const edge: EdgeDataDefinition = { source: sourceId, target: destinationId, label: cell.relationshipType } + Object.entries(cell.properties).forEach(([key, value]) => { + edge[edgeSafeKey(key)] = value as string; + }); + this.edgesMap.set(cell.id, edge) + this.elements.push({ data: edge }) + newElements.push({ data: edge }) + + // creates a fakeS node for the source and target + let source = this.nodesMap.get(cell.sourceId) + if (!source) { + source = { + id: cell.sourceId.toString(), + name: cell.sourceId.toString(), + value: "", + category: "", + color: getCategoryColorValue() + } + this.nodesMap.set(cell.sourceId, source) + this.elements.push({ data: source }) + newElements.push({ data: source }) + } + + let destination = this.nodesMap.get(cell.destinationId) + if (!destination) { + destination = { + id: cell.destinationId.toString(), + name: cell.destinationId.toString(), + value: "", + category: "", + color: getCategoryColorValue() + } + this.nodesMap.set(cell.destinationId, destination) + this.elements.push({ data: destination }) + newElements.push({ data: destination }) + } + } + return newElements + } + // eslint-disable-next-line @typescript-eslint/no-explicit-any public extend(results: any): ElementDefinition[] { @@ -151,86 +237,19 @@ export class Graph { // eslint-disable-next-line @typescript-eslint/no-explicit-any Object.values(row).forEach((cell: any) => { if (cell instanceof Object) { - if (cell.relationshipType) { - - const currentEdge = this.edgesMap.get(cell.id) - if (!currentEdge) { - const sourceId = cell.sourceId.toString(); - const destinationId = cell.destinationId.toString() - - const edge: EdgeDataDefinition = { source: sourceId, target: destinationId, label: cell.relationshipType } - Object.entries(cell.properties).forEach(([key, value]) => { - edge[edgeSafeKey(key)] = value as string; - }); - this.edgesMap.set(cell.id, edge) - this.elements.push({data:edge}) - newElements.push({data:edge}) - - // creates a fakeS node for the source and target - let source = this.nodesMap.get(cell.sourceId) - if (!source) { - source = { - id: cell.sourceId.toString(), - name: cell.sourceId.toString(), - value: "", - category: "", - color: getCategoryColorValue() - } - this.nodesMap.set(cell.sourceId, source) - this.elements.push({data:source}) - newElements.push({data:source}) - } - - let destination = this.nodesMap.get(cell.destinationId) - if (!destination) { - destination = { - id: cell.destinationId.toString(), - name: cell.destinationId.toString(), - value: "", - category: "", - color: getCategoryColorValue() - } - this.nodesMap.set(cell.destinationId, destination) - this.elements.push({data:destination}) - newElements.push({data:destination}) - } - } + if (cell.nodes) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + cell.nodes.forEach((node: any) => { + this.extendNode(node, newElements) + }) + // eslint-disable-next-line @typescript-eslint/no-explicit-any + cell.edges.forEach((edge: any) => { + this.extendEdge(edge, newElements) + }) + } else if (cell.relationshipType) { + this.extendEdge(cell, newElements) } else if (cell.labels) { - - // check if category already exists in categories - let category = this.categoriesMap.get(cell.labels[0]) - if (!category) { - category = { name: cell.labels[0], index: this.categoriesMap.size, show: true } - this.categoriesMap.set(category.name, category) - this.categories.push(category) - } - - // check if node already exists in nodes or fake node was created - const currentNode = this.nodesMap.get(cell.id) - if (!currentNode) { - const node: NodeDataDefinition = { - id: cell.id.toString(), - name: cell.id.toString(), - category: category.name, - color: getCategoryColorValue(category.index) - } - Object.entries(cell.properties).forEach(([key, value]) => { - node[nodeSafeKey(key)] = value as string; - }); - this.nodesMap.set(cell.id, node) - this.elements.push({data:node}) - newElements.push({data:node}) - } else if (currentNode.category === ""){ - // set values in a fake node - currentNode.id = cell.id.toString(); - currentNode.name = cell.id.toString(); - currentNode.category = category.name; - currentNode.color = getCategoryColorValue(category.index) - Object.entries(cell.properties).forEach(([key, value]) => { - currentNode[nodeSafeKey(key)] = value as string; - }); - newElements.push({data:currentNode}) - } + this.extendNode(cell, newElements) } } }) From dc43c42749948fad5a891d4e817443600c0822fc Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Wed, 3 Apr 2024 14:14:22 +0300 Subject: [PATCH 5/8] fix the tabs --- app/graph/DataPanel.tsx | 1 + app/graph/GraphView.tsx | 1 + app/graph/page.tsx | 31 +++++++++++++++++++++---------- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx index 9b1ed754..e521369b 100644 --- a/app/graph/DataPanel.tsx +++ b/app/graph/DataPanel.tsx @@ -1,6 +1,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; +// eslint-disable-next-line @typescript-eslint/no-explicit-any export default function DataPanel({ node }: { node: [string, any][] }) { return (
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx index 05a3f1a4..70679bd5 100644 --- a/app/graph/GraphView.tsx +++ b/app/graph/GraphView.tsx @@ -95,6 +95,7 @@ interface GraphViewProps { const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any const [selectedNode, setSelectedNode] = useState<[string, any][] | null>(null); // A reference to the chart container to allowing zooming and editing diff --git a/app/graph/page.tsx b/app/graph/page.tsx index 2b179edc..152a4ec3 100644 --- a/app/graph/page.tsx +++ b/app/graph/page.tsx @@ -1,7 +1,7 @@ 'use client' import { toast } from "@/components/ui/use-toast"; -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { signOut } from "next-auth/react"; import { useTheme } from "next-themes"; @@ -27,9 +27,20 @@ function validateGraphSelection(graphName: string): boolean { export default function Page() { const [graph, setGraph] = useState(Graph.empty()); + const [value, setValue] = useState(""); const [metaData, setMetaData] = useState([]); const [showGraph, setShowGraph] = useState(true); - + const [showData, setShowData] = useState(true); + + useEffect(() => { + if (showGraph) { + setValue("graph") + }else if(showData) { + setValue("data") + }else { + setValue("metadata") + } + }, [showData, showGraph]) const graphView = useRef(null) @@ -73,11 +84,11 @@ export default function Page() { } const json = await result.json() + setMetaData(json.result.metadata) const newGraph = Graph.create(state.graphName, json.result) setGraph(newGraph) - setMetaData(json.result.metadata) - setShowGraph((!!json.result.data && json.result.data.length > 0)) - + setShowGraph(!!newGraph.Categories && newGraph.Categories.length > 0) + setShowData(!!newGraph.Data && newGraph.Data.length > 0) graphView.current?.expand(newGraph.Elements) } @@ -87,13 +98,13 @@ export default function Page() {
{ graph.Id && - + - MetaData - {showGraph && Data} - {showGraph && Graph} + setValue("metadata")}>Metadata + {showData && setValue("data")}>Data} + {showGraph && setValue("graph")}>Graph} - + From bfeddab1cb62a10ef104eda870adb0593bbbed40 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Wed, 3 Apr 2024 14:59:08 +0300 Subject: [PATCH 6/8] change the default query --- app/graph/query.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/graph/query.tsx b/app/graph/query.tsx index 875cb39f..e94b3a99 100644 --- a/app/graph/query.tsx +++ b/app/graph/query.tsx @@ -58,7 +58,7 @@ export function Query({ onSubmit, onQueryUpdate, className = "" }: {
setQuery(event.target.value)} /> + placeholder="MATCH (n) OPTIONAL MATCH (n)-[e]-(m) RETURN n,e,m limit 100" type="text" onChange={(event) => setQuery(event.target.value)} /> From 44b1ea405f040c77eada43a458f1eff82e321445 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Thu, 4 Apr 2024 11:48:44 +0300 Subject: [PATCH 7/8] merge main --- app/graph/GraphView.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx index b38feed5..55d289dc 100644 --- a/app/graph/GraphView.tsx +++ b/app/graph/GraphView.tsx @@ -95,8 +95,7 @@ interface GraphViewProps { const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const [selectedNode, setSelectedNode] = useState<[string, any][] | null>(null); + const [selectedNode, setSelectedNode] = useState(null); // A reference to the chart container to allowing zooming and editing const chartRef = useRef(null) @@ -168,8 +167,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { const handleTap = (evt: EventObject) => { const node: Node = evt.target.json().data; - const filteredProperties = Object.entries(node).filter(prop => prop[0] !== "color" && prop[0] !== "category") - setSelectedNode(filteredProperties); + setSelectedNode(node); dataPanel.current?.expand(); } From 6a66102db0dccc8619ae0912d5d0bd3244aeb74d Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Thu, 4 Apr 2024 12:12:06 +0300 Subject: [PATCH 8/8] change the default query that send to the graph --- app/graph/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/graph/page.tsx b/app/graph/page.tsx index 2b179edc..07e6eb6f 100644 --- a/app/graph/page.tsx +++ b/app/graph/page.tsx @@ -53,7 +53,7 @@ export default function Page() { // Proposed abstraction for improved modularity if (!validateGraphSelection(state.graphName)) return; - const q = state.query.trim() || "MATCH (n)-[e]-() RETURN n,e limit 100"; + const q = state.query.trim() || "MATCH (n) OPTIONAL MATCH (n)-[e]-(m) RETURN n,e,m limit 100"; const result = await fetch(`/api/graph?graph=${prepareArg(state.graphName)}&query=${prepareArg(q)}`, { method: 'GET',