From 6798f179451a4daf8ae6bbaaebfbde42f45f35a8 Mon Sep 17 00:00:00 2001
From: turbocrime <134443988+turbocrime@users.noreply.github.com>
Date: Mon, 25 Mar 2024 12:30:49 -0700
Subject: [PATCH] too fancy json view (#813)
---
packages/ui/components/ui/json-viewer.tsx | 122 +++++++++++++++++++---
packages/ui/package.json | 4 +-
pnpm-lock.yaml | 8 +-
3 files changed, 116 insertions(+), 18 deletions(-)
diff --git a/packages/ui/components/ui/json-viewer.tsx b/packages/ui/components/ui/json-viewer.tsx
index 9c690ba4da..7bad92c4b8 100644
--- a/packages/ui/components/ui/json-viewer.tsx
+++ b/packages/ui/components/ui/json-viewer.tsx
@@ -1,30 +1,128 @@
import type { JsonObject, JsonValue } from '@bufbuild/protobuf';
import { JsonView } from 'react-json-view-lite';
+import { cn } from '../../lib/utils';
+import { CopyToClipboardIconButton } from './copy-to-clipboard-icon-button';
+import { DoubleArrowDownIcon, DoubleArrowUpIcon } from '@radix-ui/react-icons';
+import { Button } from './button';
+import { useCallback, useState } from 'react';
+
+const objectDepth = (o: JsonValue): number =>
+ o && typeof o === 'object' ? 1 + Math.max(-1, ...Object.values(o).map(objectDepth)) : 0;
+
+const objectLength = (o: JsonValue): number =>
+ o && typeof o === 'object' ? Object.entries(o).length : 0;
export const JsonViewer = ({ jsonObj }: { jsonObj: JsonObject | JsonValue[] }) => {
+ const [expandAll, setExpandAll] = useState(false);
+
+ const shouldExpandNode = useCallback(
+ (level: number, value: JsonValue, field?: string) => {
+ const collapseLevel = 3;
+ if (expandAll) return true;
+ if (
+ // expand all empty, they render small
+ objectLength(value) === 0 ||
+ objectDepth(value) === 0 ||
+ // expand arrays
+ Array.isArray(value) ||
+ // always expand below minimum
+ level < collapseLevel
+ )
+ return true;
+ // begin to collapse, small objects stay open
+ if (level === collapseLevel) return !field && objectLength(value) < 2;
+ if (level === collapseLevel + 1) return !field && objectLength(value) < 2;
+ // close all objects
+ if (level === collapseLevel + 2) return false;
+
+ // nested hidden objects stay open
+ return true;
+ },
+ [expandAll],
+ );
+
return (
+
level < 2}
+ shouldExpandNode={shouldExpandNode}
style={{
- container: 'bg-black whitespace-pre-wrap break-words font-mono -mx-4',
- basicChildStyle: 'mx-4 py-[2px]',
- label: 'font-semibold mr-1.5 text-gray-200',
+ container: cn(
+ 'font-mono',
+ 'mr-[3em]', // pad on the right side, for balance
+ 'text-ellipsis', // visually truncate long strings on the right side
+ '[&>div>span:first-child]:hidden', // hide first collapse arrow
+ ),
+ basicChildStyle: cn(
+ 'text-gray-500',
+ 'break-keep truncate', // don't break strings, visually truncate
+ 'pl-[1em]', // indent each level
+ // compact display if no children
+ '[&:not(:has(div))]:block',
+ 'only-of-type:[&:not(:has(div))]:p-0',
+ 'only-of-type:[&:not(:has(div>div))]:inline',
+ 'only-of-type:[&:not(:has(div>div))]:*:inline',
+ '[&>span:last-child]:mr-2', // space after last item, for compact display
+ ),
+ label: cn(
+ 'text-gray-200',
+ 'inline',
+ 'mr-2', // space after label
+ ),
nullValue: 'text-red-600',
undefinedValue: 'text-red-600',
- stringValue: 'text-amber-600',
+ noQuotesForStringValues: true, // quotes will be styled
+ stringValue: cn(
+ 'text-amber-600',
+ 'select-all', // entire string selected on click
+ // quotes from style, so they don't get selected
+ "before:content-['“'] before:text-gray-500",
+ "after:content-['”'] after:text-gray-500",
+ ),
booleanValue: 'text-purple-600',
- numberValue: 'text-teal-600',
+ numberValue: 'text-teal-200',
otherValue: 'text-blue-600',
- punctuation: 'text-gray-500 mr-1.5',
- collapseIcon:
- 'text-teal-200 text-[16px] p-1 mr-1.5 select-none cursor-pointer after:content-["▼"]',
- expandIcon:
- 'text-teal-200 text-[16px] p-1 mr-1.5 select-none cursor-pointer after:content-["▶"]',
- collapsedContent: 'text-amber-600 mr-1.5 after:content-["..."] after:text-xs',
+ punctuation: cn(
+ 'text-gray-500',
+ 'inline text-sm',
+ 'has-[~div]:mr-2', // space if next item is a label
+ ),
+ collapseIcon: cn(
+ 'text-teal-600 text-lg',
+ "has-[~div>div:nth-of-type(2)]:after:content-['▼']",
+ 'leading-[0] w-0 inline-block relative -left-3',
+ ),
+ expandIcon: 'hidden', // use collapsedContent ellipsis to expand
+ collapsedContent: "text-teal-600 text-xs leading-[0] after:content-['•••'] after:mx-2",
}}
/>