feat: use collapsable JSON viewer (#5)

Co-authored-by: Clayton Burlison <[email protected]>
Co-authored-by: Joe Karow <[email protected]>

.gitignore

@@ -45,4 +45,7 @@ testem.log
 .DS_Store
 Thumbs.db
 
-stats.html
+stats.html
+
+# yarn
+.yarn

packages/trpc-panel/package.json

@@ -88,8 +88,12 @@
     "zustand": "^4.1.5"
   },
   "dependencies": {
+    "@textea/json-viewer": "^3.0.0",
     "fuzzysort": "^2.0.4",
     "path": "^0.12.7",
+    "pretty-bytes": "^6.1.0",
+    "pretty-ms": "^8.0.0",
+    "string-byte-length": "^1.6.0",
     "url": "^0.11.0",
     "zod-to-json-schema": "^3.20.0"
   }

packages/trpc-panel/src/react-app/components/form/ProcedureForm/RequestResult.tsx

@@ -1,7 +1,19 @@
 import React from "react";
 import { Response } from "./Response";
-import json from "json-bigint";
 
-export function RequestResult({ result }: { result: any }) {
-  return <Response>{`${json.stringify(result, null, 2)}`}</Response>;
+
+export function RequestResult({
+  result,
+  size,
+  time,
+}: {
+  result: any;
+  size?: number;
+  time?: number;
+}) {
+  return (
+    <Response size={size} time={time}>
+      {result}
+    </Response>
+  );
 }

packages/trpc-panel/src/react-app/components/form/ProcedureForm/Response.tsx

@@ -1,9 +1,36 @@
 import React from "react";
 import { FormSection } from "./FormSection";
+import { JsonViewer } from "@textea/json-viewer";
+import prettyBytes from "pretty-bytes";
+import prettyMs from "pretty-ms";
+
+export function Response({
+  children,
+  size,
+  time,
+}: {
+  children: string | object;
+  size?: number;
+  time?: number;
+}) {
+  const title = size
+    ? time
+      ? `Response (${prettyBytes(size)}, ${prettyMs(time)})`
+      : `Response (${prettyBytes(size)})`
+    : time
+    ? `Response (${prettyMs(time)})`
+    : `Response`;
+
+  if (typeof children === "object") {
+    return (
+      <FormSection title={title}>
+        <JsonViewer rootName={false} value={children} quotesOnKeys={false} />
+      </FormSection>
+    );
+  }
 
-export function Response({ children }: { children: string }) {
   return (
-    <FormSection title="Response">
+    <FormSection title={title}>
       <p className="font-mono whitespace-pre-wrap break-words">{children}</p>
     </FormSection>
   );

packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx

@@ -19,6 +19,7 @@ import type { ParsedInputNode } from "@src/parse/parseNodeTypes";
 import { DocumentationSection } from "@src/react-app/components/form/ProcedureForm/DescriptionSection";
 import { Field } from "@src/react-app/components/form/Field";
 import { ProcedureFormContextProvider } from "@src/react-app/components/form/ProcedureForm/ProcedureFormContext";
+import getSize from "string-byte-length";
 
 const TRPCErrorSchema = z.object({
   meta: z.object({
@@ -65,6 +66,9 @@ export function ProcedureForm({
   const [queryInput, setQueryInput] = useState<any>(null);
   const formRef = useRef<HTMLFormElement | null>(null);
   const context = trpc.useContext();
+  const [dataSize, setDataSize] = useState<number | undefined>();
+  const [startTime, setStartTime] = useState<number | undefined>();
+  const [opDuration, setOpDuration] = useState<number | undefined>();
 
   function getProcedure() {
     var cur: typeof trpc | (typeof trpc)[string] = trpc;
@@ -84,6 +88,11 @@ export function ProcedureForm({
       initialData: null,
       retry: false,
       refetchOnWindowFocus: false,
+      onSuccess: (data: unknown) => {
+        if (startTime) setOpDuration(Date.now() - startTime);
+        setDataSize(getSize(JSON.stringify(data)));
+        setStartTime(undefined);
+      },
     });
   })() as UseQueryResult<any>;
 
@@ -100,6 +109,11 @@ export function ProcedureForm({
     //@ts-ignore
     return router.useMutation({
       retry: false,
+      onSuccess: (data: unknown) => {
+        if (startTime) setOpDuration(Date.now() - startTime);
+        setDataSize(getSize(JSON.stringify(data)));
+        setStartTime(undefined);
+      },
     });
   })() as UseMutationResult<any>;
 
@@ -115,8 +129,8 @@ export function ProcedureForm({
       [ROOT_VALS_PROPERTY_NAME]: defaultFormValuesForNode(procedure.node),
     },
   });
-
   function onSubmit(data: { [ROOT_VALS_PROPERTY_NAME]: any }) {
+    setStartTime(Date.now());
     const newData = { json: data[ROOT_VALS_PROPERTY_NAME] };
     if (procedure.procedureType === "query") {
       setQueryInput(newData);
@@ -207,15 +221,17 @@ export function ProcedureForm({
           </div>
         </form>
         <div className="flex flex-col space-y-4">
-          {data && <RequestResult result={data} />}
+          {data && (
+            <RequestResult result={data} size={dataSize} time={opDuration} />
+          )}
           {!data && data !== null && (
             <Response>Successful request but no data was returned</Response>
           )}
           {error &&
             (isTrpcError(error) ? (
               <Error error={error} />
             ) : (
-              <Response>{JSON.stringify(error)}</Response>
+              <Response>{error}</Response>
             ))}
         </div>
       </CollapsableSection>