Json component and viewer (#163)

Author: platypii

packages/cli/public/styles.css

@@ -309,7 +309,7 @@ button.close-button:hover {
   border-top: none;
 }
 .file-list a {
-  border-top: 1px solid #bbb;
+  border-top: 1px solid #ddd;
   color: #444;
   display: flex;
   padding: 8px 16px 8px 20px;

packages/cli/src/AppComponent.js

@@ -1,6 +1,7 @@
 import { Page, getHttpSource, getHyperparamSource } from '@hyparam/components'
 import 'hightable/src/HighTable.css'
 import React from 'react'
+import '@hyparam/components/components.css'
 
 export default function App() {
   const search = new URLSearchParams(location.search)

packages/cli/tsconfig.json

@@ -1,13 +1,13 @@
 {
-    "compilerOptions": {
-      "allowJs": true,
-      "checkJs": true,
-      "jsx": "react",
-      "lib": ["esnext", "dom"],
-      "module": "nodenext",
-      "noEmit": true,
-      "resolveJsonModule": true,    
-      "strict": true,
-    },
-    "include": ["src", "test"],
-  }
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "jsx": "react",
+    "lib": ["esnext", "dom"],
+    "module": "nodenext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": true
+  },
+  "include": ["src", "test"]
+}

packages/components/eslint.config.js

@@ -37,6 +37,7 @@ export default tseslint.config(
       ...tseslint.configs.recommended.rules,
       ...sharedJsRules,
       ...sharedTsRules,
+      'no-extra-parens': 'warn',
     },
   },
   {

packages/components/package.json

@@ -24,7 +24,8 @@
       "types": "./es/index.d.ts",
       "import": "./dist/index.es.min.js",
       "require": "./dist/index.umd.min.js"
-    }
+    },
+    "./components.css": "./dist/components.css"
   },
   "files": [
     "dist",

packages/components/src/components/Json.tsx

@@ -0,0 +1,83 @@
+import { ReactNode, useState } from 'react'
+import styles from '../styles/Json.module.css'
+
+interface JsonProps {
+  json: unknown
+  label?: string
+}
+
+/**
+ * JSON viewer component with collapsible objects and arrays.
+ */
+export default function Json({ json, label }: JsonProps): ReactNode {
+  let div
+  if (Array.isArray(json)) {
+    div = <JsonArray array={json} label={label} />
+  } else if (typeof json === 'object' && json !== null) {
+    div = <JsonObject label={label} obj={json} />
+  } else {
+    // primitive
+    const key = label ? <span className={styles.key}>{label}: </span> : ''
+    if (typeof json === 'string') {
+      div = <>{key}<span className={styles.string}>{JSON.stringify(json)}</span></>
+    } else if (typeof json === 'number') {
+      div = <>{key}<span className={styles.number}>{JSON.stringify(json)}</span></>
+    } else if (typeof json === 'bigint') {
+      // it's not really json, but show it anyway
+      div = <>{key}<span>{json.toString()}</span></>
+    } else {
+      div = <>{key}<span>{JSON.stringify(json)}</span></>
+    }
+  }
+  return <div className={styles.json}>{div}</div>
+}
+
+function JsonArray({ array, label }: { array: unknown[], label?: string }): ReactNode {
+  const [collapsed, setCollapsed] = useState(false)
+  const key = label ? <span className={styles.key}>{label}: </span> : ''
+  if (collapsed) {
+    return <div className={styles.clickable} onClick={() => { setCollapsed(false) }}>
+      <span className={styles.drill}>{'\u25B6'}</span>
+      {key}
+      <span className={styles.array}>{'[...]'}</span>
+    </div>
+  }
+  return <>
+    <div className={styles.clickable} onClick={() => { setCollapsed(true) }}>
+      <span className={styles.drill}>{'\u25BC'}</span>
+      {key}
+      <span className={styles.array}>{'['}</span>
+    </div>
+    <ul>
+      {array.map((item, index) => <li key={index}>{<Json json={item} />}</li>)}
+    </ul>
+    <div className={styles.array}>{']'}</div>
+  </>
+}
+
+function JsonObject({ obj, label }: { obj: object, label?: string }): ReactNode {
+  const [collapsed, setCollapsed] = useState(false)
+  const key = label ? <span className={styles.key}>{label}: </span> : ''
+  if (collapsed) {
+    return <div className={styles.clickable} onClick={() => { setCollapsed(false) }}>
+      <span className={styles.drill}>{'\u25B6'}</span>
+      {key}
+      <span className={styles.object}>{'{...}'}</span>
+    </div>
+  }
+  return <>
+    <div className={styles.clickable} onClick={() => { setCollapsed(true) }}>
+      <span className={styles.drill}>{'\u25BC'}</span>
+      {key}
+      <span className={styles.object}>{'{'}</span>
+    </div>
+    <ul>
+      {Object.entries(obj).map(([key, value]) => (
+        <li key={key}>
+          <Json json={value as unknown} label={key} />
+        </li>
+      ))}
+    </ul>
+    <div className={styles.object}>{'}'}</div>
+  </>
+}

packages/components/src/components/viewers/JsonView.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react'
+import type { FileSource } from '../../lib/sources/types.js'
+import { parseFileSize } from '../../lib/utils.js'
+import Json from '../Json.js'
+import { Spinner } from '../Layout.js'
+import ContentHeader, { TextContent } from './ContentHeader.js'
+import styles from '../../styles/Json.module.css'
+
+interface ViewerProps {
+  source: FileSource
+  setError: (error: Error | undefined) => void
+}
+
+const largeFileSize = 8_000_000 // 8 mb
+
+/**
+ * JSON viewer component.
+ */
+export default function JsonView({ source, setError }: ViewerProps) {
+  const [content, setContent] = useState<TextContent>()
+  const [json, setJson] = useState<unknown>()
+  const [isLoading, setIsLoading] = useState(true)
+
+  const { resolveUrl, requestInit } = source
+
+  // Load json content
+  useEffect(() => {
+    async function loadContent() {
+      try {
+        setIsLoading(true)
+        const res = await fetch(resolveUrl, requestInit)
+        const futureText = res.text()
+        if (res.status === 401) {
+          const text = await futureText
+          setError(new Error(text))
+          setContent(undefined)
+          return
+        }
+        const fileSize = parseFileSize(res.headers) ?? (await futureText).length
+        if (fileSize > largeFileSize) {
+          setError(new Error('File is too large to display'))
+          setContent(undefined)
+          return
+        }
+        const text = await futureText
+        setError(undefined)
+        setContent({ text, fileSize })
+        setJson(JSON.parse(text))
+      } catch (error) {
+        // TODO: show plain text in error case
+        setError(error as Error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    void loadContent()
+  }, [resolveUrl, requestInit, setError])
+
+  const headers = content?.text === undefined && <span>Loading...</span>
+
+  const isLarge = content?.fileSize && content.fileSize > 1024 * 1024
+
+  // If json failed to parse, show the text instead
+  const showFallbackText = content?.text !== undefined && json === undefined
+
+  return <ContentHeader content={content} headers={headers}>
+    {!isLarge && <>
+      {!showFallbackText && <code className={styles.jsonView}>
+        <Json json={json} />
+      </code>}
+      {showFallbackText && <code className={styles.text}>
+        {content.text}
+      </code>}
+    </>}
+    {isLarge && <div className='center'>
+      File is too large to display
+    </div>}
+
+    {isLoading && <div className='center'><Spinner /></div>}
+  </ContentHeader>
+}

packages/components/src/components/viewers/MarkdownView.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { FileSource } from '../../lib/sources/types.js'
+import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
 import { Spinner } from '../Layout.js'
 import Markdown from '../Markdown.js'
@@ -25,6 +25,7 @@ export default function MarkdownView({ source, setError }: ViewerProps) {
 
   const { resolveUrl, requestInit } = source
 
+  // Load markdown content
   useEffect(() => {
     async function loadContent() {
       try {

packages/components/src/components/viewers/TextView.tsx

@@ -15,13 +15,15 @@ interface ViewerProps {
  */
 export default function TextView({ source, setError }: ViewerProps) {
   const [content, setContent] = useState<TextContent>()
+  const [isLoading, setIsLoading] = useState(true)
 
   const { resolveUrl, requestInit } = source
 
   // Load plain text content
   useEffect(() => {
     async function loadContent() {
       try {
+        setIsLoading(true)
         const res = await fetch(resolveUrl, requestInit)
         const text = await res.text()
         const fileSize = parseFileSize(res.headers) ?? text.length
@@ -35,6 +37,8 @@ export default function TextView({ source, setError }: ViewerProps) {
       } catch (error) {
         setError(error as Error)
         setContent(undefined)
+      } finally {
+        setIsLoading(false)
       }
     }
 
@@ -51,7 +55,7 @@ export default function TextView({ source, setError }: ViewerProps) {
       {content.text}
     </code>}
 
-    {!content && <div className='center'><Spinner /></div>}
+    {isLoading && <div className='center'><Spinner /></div>}
   </ContentHeader>
 }
 

packages/components/src/components/viewers/Viewer.tsx

@@ -1,6 +1,7 @@
 import { FileSource } from '../../lib/sources/types.js'
 import { imageTypes } from '../../lib/utils.js'
 import ImageView from './ImageView.js'
+import JsonView from './JsonView.js'
 import MarkdownView from './MarkdownView.js'
 import TableView, { ParquetViewConfig } from './ParquetView.js'
 import TextView from './TextView.js'
@@ -36,6 +37,8 @@ export default function Viewer({
         config={config}
       />
     )
+  } else if (fileName.endsWith('.json')) {
+    return <JsonView source={source} setError={setError} />
   } else if (imageTypes.some((type) => fileName.endsWith(type))) {
     return <ImageView source={source} setError={setError} />
   }