From 0e5e4266d02aef938e031fd830ccce85cfa7f0f7 Mon Sep 17 00:00:00 2001 From: James Prior Date: Tue, 26 Sep 2023 12:36:14 +0100 Subject: [PATCH] docs: split panes for the JSONPath playground --- docs/package-lock.json | 55 ++++++++++ docs/package.json | 1 + .../components/JSONPathPlayground/index.js | 101 +++++++++++++----- .../JSONPathPlayground/styles.module.css | 4 +- 4 files changed, 132 insertions(+), 29 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index 6e5b6d8..6bbe9ab 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -17,6 +17,7 @@ "@monaco-editor/react": "^4.5.2", "@mui/material": "^5.14.10", "@tsconfig/docusaurus": "^2.0.0", + "allotment": "^1.19.3", "clsx": "^1.2.1", "docusaurus-plugin-typedoc": "^0.20.1", "json-p3": "^0.2.0", @@ -3067,6 +3068,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -4447,6 +4453,28 @@ "algoliasearch": ">= 3.1 < 6" } }, + "node_modules/allotment": { + "version": "1.19.3", + "resolved": "https://registry.npmjs.org/allotment/-/allotment-1.19.3.tgz", + "integrity": "sha512-StPCZLGPNG9KhXeNCrqTkIK09s7D6+8n0w754SRY8PUvDXFLLovrFFo4ubd82fytRWS5bFntsWA5SX4sODxuiw==", + "dependencies": { + "classnames": "^2.3.0", + "eventemitter3": "^5.0.0", + "lodash.clamp": "^4.0.0", + "lodash.debounce": "^4.0.0", + "lodash.isequal": "^4.5.0", + "use-resize-observer": "^9.0.0" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/allotment/node_modules/eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==" + }, "node_modules/ansi-align": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", @@ -5170,6 +5198,11 @@ "node": ">=8" } }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -8416,6 +8449,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash.clamp": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz", + "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==" + }, "node_modules/lodash.curry": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", @@ -8446,6 +8484,11 @@ "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz", "integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -12749,6 +12792,18 @@ } } }, + "node_modules/use-resize-observer": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", + "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==", + "dependencies": { + "@juggle/resize-observer": "^3.3.1" + }, + "peerDependencies": { + "react": "16.8.0 - 18", + "react-dom": "16.8.0 - 18" + } + }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", diff --git a/docs/package.json b/docs/package.json index b768d3a..ccd10ac 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,6 +23,7 @@ "@monaco-editor/react": "^4.5.2", "@mui/material": "^5.14.10", "@tsconfig/docusaurus": "^2.0.0", + "allotment": "^1.19.3", "clsx": "^1.2.1", "docusaurus-plugin-typedoc": "^0.20.1", "json-p3": "^0.2.0", diff --git a/docs/src/components/JSONPathPlayground/index.js b/docs/src/components/JSONPathPlayground/index.js index 7fab4eb..92040ce 100644 --- a/docs/src/components/JSONPathPlayground/index.js +++ b/docs/src/components/JSONPathPlayground/index.js @@ -2,9 +2,13 @@ import React from "react"; import { useState } from "react"; import { Container } from "@mui/material"; -import Paper from "@mui/material/Paper"; import Grid from "@mui/material/Unstable_Grid2"; + import Editor from "@monaco-editor/react"; + +import { Allotment } from "allotment"; +import "allotment/dist/style.css"; + import styles from "./styles.module.css"; import { jsonpath, version as p3version } from "json-p3/dist/json-p3.esm"; @@ -32,12 +36,12 @@ const theme = "vs-dark"; function QueryEditor({ defaultQuery, onChange }) { return ( ); } @@ -59,7 +63,7 @@ function JSONEditor({ onChange }) { return ( ); @@ -88,6 +94,7 @@ export default function Playground() { let timer; const timerInterval = 1000; const defaultQuery = "$.users[?@.score > 85]"; + const defaultResult = JSON.stringify( [ { name: "Sue", score: 100 }, @@ -96,6 +103,13 @@ export default function Playground() { undefined, " ", ); + + const defaultResultNormalizedPaths = JSON.stringify( + ["$['users'][0]", "$['users'][1]"], + undefined, + " ", + ); + const defaultData = { users: [ { name: "Sue", score: 100 }, @@ -108,16 +122,19 @@ export default function Playground() { const [query, setQuery] = useState(jsonpath.compile(defaultQuery)); const [result, setResult] = useState(defaultResult); + const [resultPaths, setResultPaths] = useState(defaultResultNormalizedPaths); const [data, setData] = useState(defaultData); function _onQueryChange(value) { try { const path = jsonpath.compile(value.trim()); setQuery(path); - const rv = path.query(data).values(); - setResult(JSON.stringify(rv, undefined, " ")); + const rv = path.query(data); + setResult(JSON.stringify(rv.values(), undefined, " ")); + setResultPaths(JSON.stringify(rv.paths(), undefined, " ")); } catch (error) { setResult(JSON.stringify(String(error), undefined, " ")); + setResultPaths("[]"); } } @@ -130,10 +147,12 @@ export default function Playground() { try { const _data = JSON.parse(value); setData(_data); - const rv = query.query(_data).values(); - setResult(JSON.stringify(rv, undefined, " ")); + const rv = query.query(_data); + setResult(JSON.stringify(rv.values(), undefined, " ")); + setResultPaths(JSON.stringify(rv.paths(), undefined, " ")); } catch (error) { setResult(JSON.stringify(String(error), undefined, " ")); + setResultPaths("[]"); } } @@ -146,25 +165,55 @@ export default function Playground() { -

- JSONPath Query - P3 Version {p3version} -

- - - +

JSONPath Playground

+
- -

JSON Data

- - - + + + + + + + + + + + + + + + + + + + - -

Query Results

- - - + +
+

+ JSON data is on the left and results are on the right. +
+ Drag out the third pane on the right to see a normalized path for{" "} + each result. +
+ Results are updated automatically after one second of inactivity. +
+ + JSON P3 Version {p3version} + +

+
diff --git a/docs/src/components/JSONPathPlayground/styles.module.css b/docs/src/components/JSONPathPlayground/styles.module.css index d1f68b9..9894540 100644 --- a/docs/src/components/JSONPathPlayground/styles.module.css +++ b/docs/src/components/JSONPathPlayground/styles.module.css @@ -1,13 +1,11 @@ .heading { font-size: 18px; - /* font-family: "monospace"; */ font-weight: lighter; margin-bottom: 5px; margin-left: 5px; } .version { - font-size: 12px; - float: right; + font-weight: bold; }