Open urls

package.json

@@ -12,6 +12,7 @@
     "build": "rollup -c",
     "lint": "eslint src",
     "serve": "node src/cli.js",
+    "url": "node src/cli.js https://huggingface.co/datasets/codeparrot/github-code/resolve/main/data/train-00000-of-01126.parquet?download=true",
     "test": "vitest run"
   },
   "devDependencies": {

src/Url.tsx

@@ -0,0 +1,57 @@
+import HighTable, { DataFrame } from 'hightable'
+import React, { useEffect, useState } from 'react'
+import Layout, { Spinner } from './Layout.js'
+import { parquetDataFrame } from './tableProvider.js'
+
+/**
+ * Url viewer page
+ */
+export default function Url() {
+  const [error, setError] = useState<Error>()
+  const [dataframe, setDataframe] = useState<DataFrame>()
+
+  // File url from query string
+  const path = location.pathname.split('/')
+  const key = decodeURI(path.slice(2).join('/'))
+  console.log('key:', key)
+
+  if (!key?.endsWith('.parquet')) {
+    return <Layout error={new Error('Invalid file type')} title={key || ''}>
+      <div className='center'>Invalid file type</div>
+    </Layout>
+  }
+
+  // Filename loaded immediately from url, file contents loaded async
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    parquetDataFrame(key)
+      .then(setDataframe)
+      .catch(setError)
+      .finally(() => setLoading(false))
+  }, [])
+
+  function onDoubleClickCell(row: number, col: number) {
+    location.href = '/url/' + key + '?row=' + row + '&col=' + col
+  }
+
+  return (
+    <Layout error={error} title={key}>
+      <nav className='top-header'>
+        <div className='path'>
+          <a href='/files'>/</a>
+          {key && key.split('/').slice(0, -1).map((sub, depth) =>
+            <a href={`/files/${path.slice(2, depth + 3).join('/')}/`} key={depth}>{sub}/</a>
+          )}
+          <a href={`/files/${key}`}>{path.at(-1)}</a>
+        </div>
+      </nav>
+
+      {dataframe &&
+        <HighTable data={dataframe} onDoubleClickCell={onDoubleClickCell} />
+      }
+
+      {loading && <Spinner className='center' />}
+    </Layout>
+  )
+}

src/render.js

@@ -3,16 +3,21 @@ import ReactDOM from 'react-dom'
 import Cell from './Cell.js'
 import File from './File.js'
 import Folder from './Folder.js'
+import Url from './Url.js'
 
 function render() {
   const app = document.getElementById('app')
   if (!app) throw new Error('missing app element')
+  console.log('rendering', location.pathname)
 
   // @ts-expect-error TODO: fix react createRoot type
   const root = ReactDOM.createRoot(app)
   if (location.pathname.endsWith('/')) {
     // Render folder view
     root.render(React.createElement(Folder))
+  } else if (location.pathname.startsWith('/url/')) {
+    // Render url view
+    root.render(React.createElement(Url))
   } else if (location.search) {
     // Render cell view
     root.render(React.createElement(Cell))

src/serve.js

@@ -53,7 +53,7 @@ function handleRequest(req) {
   if (pathname === '/' || pathname === '/files') {
     // redirect to /files
     return { status: 301, content: '/files/' }
-  } else if (pathname.startsWith('/files/')) {
+  } else if (pathname.startsWith('/files/') || pathname.startsWith('/url/')) {
     // serve index.html
     console.log('serving index.html', `${hyperparamPath}/public/index.html`)
     return handleStatic(`${hyperparamPath}/public/index.html`)
@@ -244,8 +244,9 @@ export function serve({ port = 2048, path = '' }) {
     }
   }).listen(port, () => {
     console.log(`hyperparam server running on http://localhost:${port}`)
-    if (path) openUrl(`http://localhost:${port}/files/${path}`)
-    else openUrl(`http://localhost:${port}`)
+    if (!path) openUrl(`http://localhost:${port}`)
+    else if (path.startsWith('http')) openUrl(`http://localhost:${port}/url/${path}`)
+    else openUrl(`http://localhost:${port}/files/${path}`)
   })
 }