feat: add expansion depth to json tree

Author: AlemTuzlak

.changeset/silent-beds-create.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-ui': patch
+---
+
+Improvements to the json tree component, now supports expansion length config

packages/devtools-ui/src/components/tree.tsx

@@ -3,108 +3,21 @@ import clsx from 'clsx'
 import { css, useStyles } from '../styles/use-styles'
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
 
-export function JsonTree(props: { value: any; copyable?: boolean }) {
-  return <JsonValue isRoot value={props.value} copyable={props.copyable} />
+export function JsonTree(props: { value: any; copyable?: boolean, defaultExpansionDepth?: number }) {
+  return <JsonValue isRoot value={props.value} copyable={props.copyable} depth={0} defaultExpansionDepth={props.defaultExpansionDepth ?? 1} />
 }
-type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
-
-const CopyButton = (props: { value: unknown }) => {
-  const styles = useStyles()
-  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
 
-  return (
-    <button
-      class={styles().tree.actionButton}
-      title="Copy object to clipboard"
-      aria-label={`${
-        copyState() === 'NoCopy'
-          ? 'Copy object to clipboard'
-          : copyState() === 'SuccessCopy'
-            ? 'Object copied to clipboard'
-            : 'Error copying object to clipboard'
-      }`}
-      onClick={
-        copyState() === 'NoCopy'
-          ? () => {
-              navigator.clipboard
-                .writeText(JSON.stringify(props.value, null, 2))
-                .then(
-                  () => {
-                    setCopyState('SuccessCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                  (err) => {
-                    console.error('Failed to copy: ', err)
-                    setCopyState('ErrorCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                )
-            }
-          : undefined
-      }
-    >
-      <Switch>
-        <Match when={copyState() === 'NoCopy'}>
-          <Copier />
-        </Match>
-        <Match when={copyState() === 'SuccessCopy'}>
-          <CopiedCopier theme={'dark'} />
-        </Match>
-        <Match when={copyState() === 'ErrorCopy'}>
-          <ErrorCopier />
-        </Match>
-      </Switch>
-    </button>
-  )
-}
-
-const Expander = (props: { expanded: boolean }) => {
-  const styles = useStyles()
-  return (
-    <span
-      class={clsx(
-        styles().tree.expander,
-        css`
-          transform: rotate(${props.expanded ? 90 : 0}deg);
-        `,
-        props.expanded &&
-          css`
-            & svg {
-              top: -1px;
-            }
-          `,
-      )}
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 12L10 8L6 4"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </span>
-  )
-}
 
 function JsonValue(props: {
   value: any
   keyName?: string
   isRoot?: boolean
   isLastKey?: boolean
   copyable?: boolean
+  defaultExpansionDepth: number
+  depth: number
 }) {
-  const { value, keyName, isRoot = false, isLastKey, copyable } = props
+  const { value, keyName, isRoot = false, isLastKey, copyable, defaultExpansionDepth, depth } = props
   const styles = useStyles()
 
   return (
@@ -137,12 +50,12 @@ function JsonValue(props: {
         }
         if (Array.isArray(value)) {
           return (
-            <ArrayValue copyable={copyable} keyName={keyName} value={value} />
+            <ArrayValue defaultExpansionDepth={defaultExpansionDepth} depth={depth} copyable={copyable} keyName={keyName} value={value} />
           )
         }
         if (typeof value === 'object') {
           return (
-            <ObjectValue copyable={copyable} keyName={keyName} value={value} />
+            <ObjectValue defaultExpansionDepth={defaultExpansionDepth} depth={depth} copyable={copyable} keyName={keyName} value={value} />
           )
         }
         return <span />
@@ -161,16 +74,32 @@ const ArrayValue = ({
   value,
   keyName,
   copyable,
+  defaultExpansionDepth,
+  depth
 }: {
   value: Array<any>
   copyable?: boolean
   keyName?: string
+  defaultExpansionDepth: number
+  depth: number
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(true)
+  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
+
+  if (value.length === 0) {
+    return (<span class={styles().tree.expanderContainer}>
+      {keyName && <span
+
+        class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+      >
+        &quot;{keyName}&quot;:{' '}
+      </span>}
+      <span class={styles().tree.valueBraces}>[]</span>
+    </span>)
+  }
   return (
     <span class={styles().tree.expanderContainer}>
-      <Expander expanded={expanded()} />
+      <Expander onClick={() => setExpanded(!expanded())} expanded={expanded()} />
       {keyName && (
         <span
           onclick={(e) => {
@@ -195,6 +124,8 @@ const ArrayValue = ({
                   copyable={copyable}
                   value={item}
                   isLastKey={isLastKey}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
                 />
               )
             }}
@@ -222,19 +153,31 @@ const ObjectValue = ({
   value,
   keyName,
   copyable,
+  defaultExpansionDepth,
+  depth
 }: {
   value: Record<string, any>
   keyName?: string
   copyable?: boolean
+  defaultExpansionDepth: number
+  depth: number
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(true)
+  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
   const keys = Object.keys(value)
   const lastKeyName = keys[keys.length - 1]
 
+  if (keys.length === 0) {
+    return (<span class={styles().tree.expanderContainer}>
+      {keyName && <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+        &quot;{keyName}&quot;:{' '}
+      </span>}
+      <span class={styles().tree.valueBraces}>{"{}"}</span>
+    </span>)
+  }
   return (
     <span class={styles().tree.expanderContainer}>
-      {keyName && <Expander expanded={expanded()} />}
+      {keyName && <Expander onClick={() => setExpanded(!expanded())} expanded={expanded()} />}
       {keyName && (
         <span
           onClick={(e) => {
@@ -259,6 +202,8 @@ const ObjectValue = ({
                   keyName={k}
                   isLastKey={lastKeyName === k}
                   copyable={copyable}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
                 />
               </>
             )}
@@ -281,3 +226,94 @@ const ObjectValue = ({
     </span>
   )
 }
+
+type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
+
+const CopyButton = (props: { value: unknown }) => {
+  const styles = useStyles()
+  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
+
+  return (
+    <button
+      class={styles().tree.actionButton}
+      title="Copy object to clipboard"
+      aria-label={`${copyState() === 'NoCopy'
+        ? 'Copy object to clipboard'
+        : copyState() === 'SuccessCopy'
+          ? 'Object copied to clipboard'
+          : 'Error copying object to clipboard'
+        }`}
+      onClick={
+        copyState() === 'NoCopy'
+          ? () => {
+            navigator.clipboard
+              .writeText(JSON.stringify(props.value, null, 2))
+              .then(
+                () => {
+                  setCopyState('SuccessCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+                (err) => {
+                  console.error('Failed to copy: ', err)
+                  setCopyState('ErrorCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+              )
+          }
+          : undefined
+      }
+    >
+      <Switch>
+        <Match when={copyState() === 'NoCopy'}>
+          <Copier />
+        </Match>
+        <Match when={copyState() === 'SuccessCopy'}>
+          <CopiedCopier theme={'dark'} />
+        </Match>
+        <Match when={copyState() === 'ErrorCopy'}>
+          <ErrorCopier />
+        </Match>
+      </Switch>
+    </button>
+  )
+}
+
+const Expander = (props: { expanded: boolean, onClick: () => void }) => {
+  const styles = useStyles()
+  return (
+    <span
+      onClick={props.onClick}
+      class={clsx(
+        styles().tree.expander,
+        css`
+          transform: rotate(${props.expanded ? 90 : 0}deg);
+        `,
+        props.expanded &&
+        css`
+            & svg {
+              top: -1px;
+            }
+          `,
+      )}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 12L10 8L6 4"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  )
+}

packages/devtools-ui/src/styles/use-styles.ts

@@ -317,9 +317,9 @@ const stylesFactory = (theme: Theme = 'dark') => {
         height: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.full};
         background-color: ${t(
-          tokens.colors[color][500],
-          tokens.colors[color][500],
-        )};
+        tokens.colors[color][500],
+        tokens.colors[color][500],
+      )};
       `,
       base: css`
         display: flex;
@@ -393,6 +393,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
       `,
       expander: css`
         position: absolute;
+        cursor: pointer;
         left: -16px;
         top: 3px;
         & path {
@@ -538,9 +539,9 @@ const stylesFactory = (theme: Theme = 'dark') => {
         border: 1px solid ${t(colors.gray[300], colors.gray[700])};
         border-radius: 0.75rem;
         box-shadow: ${t(
-          '0 1px 3px rgba(0,0,0,0.06)',
-          '0 1px 3px rgba(0,0,0,0.18)',
-        )};
+        '0 1px 3px rgba(0,0,0,0.06)',
+        '0 1px 3px rgba(0,0,0,0.18)',
+      )};
       `,
       title: css`
         font-size: 1.125rem;