Apache avro file viewer

Author: platypii

package.json

@@ -48,19 +48,20 @@
   },
   "dependencies": {
     "hightable": "0.12.1",
-    "hyparquet": "1.9.0",
+    "hyparquet": "1.9.1",
     "hyparquet-compressors": "1.0.0",
+    "icebird": "0.1.8",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "9.22.0",
     "@testing-library/react": "16.2.0",
     "@types/node": "22.13.10",
-    "@types/react": "19.0.10",
+    "@types/react": "19.0.12",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-v8": "3.0.8",
+    "@vitest/coverage-v8": "3.0.9",
     "eslint": "9.22.0",
     "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "5.2.0",
@@ -70,8 +71,8 @@
     "nodemon": "3.1.9",
     "npm-run-all": "4.1.5",
     "typescript": "5.8.2",
-    "typescript-eslint": "8.26.0",
-    "vite": "6.2.1",
-    "vitest": "3.0.8"
+    "typescript-eslint": "8.27.0",
+    "vite": "6.2.2",
+    "vitest": "3.0.9"
   }
 }

src/components/viewers/AvroView.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react'
+import type { FileSource } from '../../lib/sources/types.js'
+import { parseFileSize } from '../../lib/utils.js'
+import styles from '../../styles/Json.module.css'
+import Json from '../Json.js'
+import { Spinner } from '../Layout.js'
+import ContentHeader, { ContentSize } from './ContentHeader.js'
+import { avroData, avroMetadata } from 'icebird'
+
+interface ViewerProps {
+  source: FileSource
+  setError: (error: Error | undefined) => void
+}
+
+/**
+ * Apache Avro viewer component.
+ */
+export default function AvroView({ source, setError }: ViewerProps) {
+  const [content, setContent] = useState<ContentSize>()
+  const [json, setJson] = useState<unknown>()
+  const [isLoading, setIsLoading] = useState(true)
+
+  const { resolveUrl, requestInit } = source
+
+  // Load avro content as json
+  useEffect(() => {
+    async function loadContent() {
+      try {
+        setIsLoading(true)
+        const res = await fetch(resolveUrl, requestInit)
+        if (res.status === 401) {
+          const text = await res.text()
+          setError(new Error(text))
+          setContent(undefined)
+          return
+        }
+        // Parse avro file
+        const buffer = await res.arrayBuffer()
+        const fileSize = parseFileSize(res.headers) ?? buffer.byteLength
+        const reader = { view: new DataView(buffer), offset: 0 }
+        const { metadata, syncMarker } = avroMetadata(reader)
+        const json = avroData({ reader, metadata, syncMarker })
+        setError(undefined)
+        setContent({ fileSize })
+        setJson(json)
+      } catch (error) {
+        setError(error as Error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    void loadContent()
+  }, [resolveUrl, requestInit, setError])
+
+  const headers = content === undefined && <span>Loading...</span>
+
+  return <ContentHeader content={content} headers={headers}>
+    <code className={styles.jsonView}>
+      <Json json={json} />
+    </code>
+
+    {isLoading && <div className='center'><Spinner /></div>}
+  </ContentHeader>
+}

src/components/viewers/Viewer.tsx

@@ -1,5 +1,6 @@
 import { FileSource } from '../../lib/sources/types.js'
 import { imageTypes } from '../../lib/utils.js'
+import AvroView from './AvroView.js'
 import ImageView from './ImageView.js'
 import JsonView from './JsonView.js'
 import MarkdownView from './MarkdownView.js'
@@ -39,6 +40,8 @@ export default function Viewer({
     )
   } else if (fileName.endsWith('.json')) {
     return <JsonView source={source} setError={setError} />
+  } else if (fileName.endsWith('.avro')) {
+    return <AvroView source={source} setError={setError} />
   } else if (imageTypes.some((type) => fileName.endsWith(type))) {
     return <ImageView source={source} setError={setError} />
   }

src/styles/Json.module.css

@@ -30,6 +30,7 @@
   font-size: 10pt;
   margin-left: -12px;
   margin-right: 4px;
+  padding: 2px 0;
   user-select: none;
 }
 .clickable:hover .drill {