Json component render byte arrays

Author: platypii

src/components/ImageView/ImageView.test.tsx

@@ -23,7 +23,7 @@ describe('ImageView Component', () => {
     assert(source?.kind === 'file')
 
     const { findByRole, findByText } = render(
-      <ImageView source={source} setError={console.error} />
+      <ImageView source={source} setError={vi.fn()} />
     )
 
     // wait for asynchronous image loading

src/components/Json/Json.module.css

@@ -70,6 +70,11 @@
 .comment {
   color: #ccd8;
 }
+.hexDump {
+  margin: 4px 0 4px 20px;
+  font-family: monospace;
+  line-height: 1.4;
+}
 .showMore {
   cursor: pointer;
   color: #ccd8;

src/components/Json/Json.stories.tsx

@@ -144,3 +144,19 @@ export const MessagesList: Story = {
   },
   render,
 }
+
+export const ByteArrays: Story = {
+  args: {
+    json: {
+      small: new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]),
+      withAscii: new Uint8Array(
+        Array.from('Hello, World! This is a test of the hex dump viewer.', c => c.charCodeAt(0))
+      ),
+      binary: new Uint8Array(Array.from({ length: 256 }, (_, i) => i)),
+      empty: new Uint8Array(0),
+      fromBuffer: new Uint8Array(new ArrayBuffer(32)).map((_, i) => i * 8),
+    },
+    label: 'json',
+  },
+  render,
+}

src/components/Json/Json.test.tsx

@@ -194,6 +194,20 @@ describe('Json Component', () => {
     await user.click(treeItem) // expand again
     expect(queryByText('...')).toBeNull()
   })
+
+  it('renders Uint8Array as hex dump', () => {
+    const bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f])
+    const { getByText } = render(<Json json={bytes} />)
+    getByText('Uint8Array(5)')
+    getByText(/48 65 6c 6c 6f/)
+    getByText('Hello')
+  })
+
+  it('renders ArrayBuffer as hex dump', () => {
+    const { buffer } = new Uint8Array([0xff, 0x00, 0x7e])
+    const { getByText } = render(<Json json={buffer} />)
+    getByText(/ff 00 7e/)
+  })
 })
 
 describe('isPrimitive', () => {

src/components/Json/Json.tsx

@@ -30,6 +30,9 @@ function JsonContent({ json, label, expandRoot, pageLimit }: JsonProps): ReactNo
   } else if (json instanceof Date) {
     const key = label ? <span className={styles.key}>{label}: </span> : ''
     div = <>{key}<span className={styles.string}>{`"${json.toISOString()}"`}</span></>
+  } else if (json instanceof ArrayBuffer || json instanceof Uint8Array) {
+    const bytes = json instanceof ArrayBuffer ? new Uint8Array(json) : json
+    div = <ByteArray bytes={bytes} label={label} expandRoot={expandRoot} />
   } else if (typeof json === 'object' && json !== null) {
     div = <JsonObject label={label} obj={json} expandRoot={expandRoot} pageLimit={pageLimit} />
   } else {
@@ -54,6 +57,44 @@ function JsonContent({ json, label, expandRoot, pageLimit }: JsonProps): ReactNo
   return div
 }
 
+function formatHexDump(bytes: Uint8Array): { hex: string, ascii: string }[] {
+  const lines: { hex: string, ascii: string }[] = []
+  for (let i = 0; i < bytes.length; i += 16) {
+    const slice = bytes.slice(i, i + 16)
+    const hex = Array.from(slice).map(b => b.toString(16).padStart(2, '0')).join(' ')
+    const ascii = Array.from(slice).map(b => b >= 0x20 && b <= 0x7e ? String.fromCharCode(b) : '.').join('')
+    lines.push({ hex: hex.padEnd(47), ascii })
+  }
+  return lines
+}
+
+function ByteArray({ bytes, label, expandRoot }: { bytes: Uint8Array, label?: string, expandRoot?: boolean }): ReactNode {
+  const [collapsed, setCollapsed] = useState(!expandRoot)
+  const key = label ? <span className={styles.key}>{label}: </span> : ''
+  const summary = `${bytes.constructor.name}(${bytes.length})`
+
+  if (collapsed) {
+    return <div role="treeitem" className={styles.clickable} aria-expanded="false" onClick={() => { setCollapsed(false) }}>
+      {key}
+      <span className={styles.comment}>{summary}</span>
+    </div>
+  }
+
+  const lines = formatHexDump(bytes)
+  return <>
+    <div role="treeitem" className={styles.clickable} aria-expanded="true" onClick={() => { setCollapsed(true) }}>
+      {key}
+      <span className={styles.comment}>{summary}</span>
+    </div>
+    <pre className={styles.hexDump}>
+      {lines.map((line, i) => {
+        const offset = (i * 16).toString(16).padStart(8, '0')
+        return <div key={i}><span className={styles.comment}>{offset}</span>  <span className={styles.number}>{line.hex}</span>  <span className={styles.string}>{line.ascii}</span></div>
+      })}
+    </pre>
+  </>
+}
+
 function CollapsedArray({ array }: {array: unknown[]}): ReactNode {
   const { elementRef, width } = useWidth<HTMLSpanElement>()
   const maxCharacterCount = Math.max(20, Math.floor(width / 8))

src/components/SlidePanel/SlidePanel.module.css

@@ -14,16 +14,16 @@
 
   /* resizer separator */
   & > [role="separator"] {
-    border-right: 1px solid #ddd;
-    border-left: 1px solid #ddd;
+    border-right: 1px solid var(--color-border, #ddd);
+    border-left: 1px solid var(--color-border, #ddd);
     width: 6px;
     cursor: col-resize;
-    background-color: #eee;
+    background-color: var(--color-background-alt, #eee);
     transition: background-color 0.2s;
     user-select: none;
 
     &:hover {
-      background-color: #9f9999;
+      background-color: var(--color-neutral-500, #9f9999);
     }
   }