docs: split panes for the JSONPath playground

jg-rp · Sep 26, 2023 · 0e5e426 · 0e5e426
1 parent 829f000
commit 0e5e426
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 29 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git 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
@@ -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 (
     <Editor
-      height="8vh"
+      height="100%"
       language="text"
       theme={theme}
       defaultValue={defaultQuery}
       onChange={onChange}
-      options={{ ...commonEditorOptions }}
+      options={{ ...commonEditorOptions, fontSize: 16 }}
     />
   );
 }
@@ -59,7 +63,7 @@ function JSONEditor({ onChange }) {
 
   return (
     <Editor
-      height="70vh"
+      height="100%"
       language="json"
       theme={theme}
       defaultValue={defaultValue}
@@ -72,13 +76,15 @@ function JSONEditor({ onChange }) {
 function ResultsEditor({ result }) {
   return (
     <Editor
-      height="70vh"
+      height="100%"
       language="json"
       theme={theme}
       value={result}
       options={{
         ...commonEditorOptions,
         wordWrap: "on",
+        lineNumbers: "off",
+        readOnly: true,
       }}
     />
   );
@@ -88,6 +94,7 @@ export default function Playground() {
   let timer;
   const timerInterval = 1000;
   const defaultQuery = "$.users[[email protected] > 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() {
     <Container maxWidth="xl" className="playground">
       <Grid container spacing={1} sx={{ m: 1 }}>
         <Grid xs={12}>
-          <h2 className={styles.heading}>
-            JSONPath Query
-            <span className={styles.version}>P3 Version {p3version}</span>
-          </h2>
-          <Paper square>
-            <QueryEditor defaultQuery={defaultQuery} onChange={onQueryChange} />
-          </Paper>
+          <h1 className={styles.heading}>JSONPath Playground</h1>
+          <hr sx={{ m: 1 }} />
         </Grid>
-        <Grid xs={12} md={6}>
-          <h2 className={styles.heading}>JSON Data</h2>
-          <Paper square>
-            <JSONEditor onChange={onDataChange} />
-          </Paper>
+        <Grid xs={12} sx={{ height: "70vh" }}>
+          <Allotment minSize={100} vertical>
+            <Allotment.Pane preferredSize={60} maxSize={200} minSize={60}>
+              <QueryEditor
+                defaultQuery={defaultQuery}
+                onChange={onQueryChange}
+              />
+            </Allotment.Pane>
+            <Allotment.Pane>
+              <Allotment minSize={200} horizontal>
+                <Allotment.Pane preferredSize="50%">
+                  <JSONEditor onChange={onDataChange} />
+                </Allotment.Pane>
+                <Allotment.Pane preferredSize="50%">
+                  <ResultsEditor result={result} />
+                </Allotment.Pane>
+                <Allotment.Pane minSize={0} preferredSize="0%" priority="low">
+                  <ResultsEditor result={resultPaths} />
+                </Allotment.Pane>
+              </Allotment>
+            </Allotment.Pane>
+          </Allotment>
         </Grid>
-        <Grid xs={12} md={6}>
-          <h2 className={styles.heading}>Query Results</h2>
-          <Paper square>
-            <ResultsEditor result={result} />
-          </Paper>
+        <Grid xs={12}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fontSize: "14px",
+              textAlign: "center",
+            }}
+          >
+            <p>
+              JSON data is on the left and results are on the right.
+              <br />
+              Drag out the third pane on the right to see a normalized path for{" "}
+              each result.
+              <br />
+              Results are updated automatically after one second of inactivity.
+              <br />
+              <span className={styles.version}>
+                JSON P3 Version {p3version}
+              </span>
+            </p>
+          </div>
         </Grid>
       </Grid>
     </Container>

diff --git 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;
 
 }