Unify url view

src/components/Cell.tsx

@@ -31,6 +31,8 @@ export default function CellView() {
   // File path from url
   const path = location.pathname.split('/')
   const key = decodeURI(path.slice(2).join('/'))
+  const isUrl = key.startsWith('http://') || key.startsWith('https://')
+  const url = isUrl ? key : '/api/store/get?key=' + key
 
   // row, col from url
   const search = new URLSearchParams(location.search)
@@ -42,7 +44,7 @@ export default function CellView() {
     async function loadCellData() {
       try {
         // TODO: handle first row > 100kb
-        const df = await parquetDataFrame(`/api/store/get?key=${key}`)
+        const df = await parquetDataFrame(url)
         const rows = await df.rows(row, row + 1)
         const cell = rows[0][col]
         setText(stringify(cell))
@@ -66,9 +68,9 @@ export default function CellView() {
       <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.slice(2, depth + 3).join('/')}/`} key={depth}>{sub}/</a>
         )}
-        <a href={`/files/${key}`}>{path.at(-1)}</a>
+        <a href={`/files?key=${key}`}>{path.at(-1)}</a>
       </div>
     </nav>
 

src/components/File.tsx

@@ -11,38 +11,41 @@ export default function File() {
   const [dataframe, setDataframe] = useState<DataFrame>()
 
   // File path from url
-  const path = location.pathname.split('/')
-  const key = decodeURI(path.slice(2).join('/'))
+  const search = new URLSearchParams(location.search)
+  const key = decodeURIComponent(search.get('key') || '').replace(/\/$/, '')
+  const path = key.split('/')
 
-  if (!key.endsWith('.parquet')) {
-    return <Layout error={new Error('Invalid file type')} title={key}>
-      <div className='center'>Invalid file type</div>
-    </Layout>
-  }
+  const isUrl = key.startsWith('http://') || key.startsWith('https://')
+  const url = isUrl ? key : '/api/store/get?key=' + key
 
   // Filename loaded immediately from url, file contents loaded async
   const [loading, setLoading] = useState(false)
 
   useEffect(() => {
-    parquetDataFrame('/api/store/get?key=' + key)
+    parquetDataFrame(url)
       .then(setDataframe)
       .catch(setError)
       .finally(() => setLoading(false))
   }, [])
 
   function onDoubleClickCell(row: number, col: number) {
-    location.href = '/files/' + key + '?row=' + row + '&col=' + col
+    location.href = '/files?key=' + 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>
+          {isUrl &&
+            <a href={`/files?key=${key}`}>{key}</a>
+          }
+          {!isUrl && <>
+            <a href='/files'>/</a>
+            {key && key.split('/').slice(0, -1).map((sub, depth) =>
+              <a href={`/files?key=${path.slice(2, depth + 3).join('/')}/`} key={depth}>{sub}/</a>
+            )}
+            <a href={`/files?key=${key}`}>{path.at(-1)}</a>
+          </>}
         </div>
       </nav>
 

src/components/Folder.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { FileMetadata, getFileDate, getFileDateShort, getFileSize, listFiles } from '../files.js'
+import {
+  FileMetadata, getFileDate, getFileDateShort, getFileSize, listFiles,
+} from '../files.js'
 import Layout, { Spinner, cn } from './Layout.js'
 
 /**
@@ -12,30 +14,31 @@ export default function Folder() {
   const listRef = useRef<HTMLUListElement>(null)
 
   // Folder path from url
-  const path = location.pathname.split('/')
-  const prefix = decodeURI(path.slice(2, -1).join('/'))
+  const search = new URLSearchParams(location.search)
+  const key = (search.get('key') || '').replace(/\/$/, '')
+  const path = key.split('/')
 
   // Fetch files on component mount
   useEffect(() => {
-    listFiles(prefix)
+    listFiles(key)
       .then(setFiles)
       .catch(error => {
         setFiles([])
         setError(error)
       })
-  }, [prefix])
+  }, [key])
 
   function fileUrl(file: FileMetadata): string {
-    return prefix ? `/files/${prefix}/${file.key}` : `/files/${file.key}`
+    return key ? `/files?key=${key}/${file.key}` : `/files?key=${file.key}`
   }
 
   return (
-    <Layout error={error} title={prefix}>
+    <Layout error={error} title={key}>
       <nav className='top-header'>
         <div className='path'>
           <a href='/files'>/</a>
-          {prefix && prefix.split('/').map((sub, depth) =>
-            <a href={`/files/${path.slice(2, depth + 3).join('/')}/`} key={depth}>{sub}/</a>
+          {key && key.split('/').map((sub, depth) =>
+            <a href={`/files?key=${path.slice(2, depth + 3).join('/')}/`} key={depth}>{sub}/</a>
           )}
         </div>
       </nav>

src/render.js

@@ -3,28 +3,23 @@ import ReactDOM from 'react-dom'
 import Cell from './components/Cell.js'
 import File from './components/File.js'
 import Folder from './components/Folder.js'
-import Url from './components/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('/')) {
+  const search = new URLSearchParams(location.search)
+  if (!search.has('key') || search.get('key')?.endsWith('/')) {
     // folder view
     root.render(React.createElement(Folder))
-  } else if (location.pathname.startsWith('/url/')) {
-    // url view
-    root.render(React.createElement(Url))
-  } else if (location.search) {
-    // local cell view
+  } else if (search.has('row') && search.has('col')) {
+    // cell view
     root.render(React.createElement(Cell))
   } else {
-    // local file view
+    // file view
     root.render(React.createElement(File))
   }
-
 }
 render()

src/serve.js

@@ -50,12 +50,11 @@ function handleRequest(req) {
     .replace('file://', '')
     .replace('/src/serve.js', '')
 
-  if (pathname === '/' || pathname === '/files') {
+  if (pathname === '/' || pathname === '/files/') {
     // redirect to /files
-    return { status: 301, content: '/files/' }
-  } else if (pathname.startsWith('/files/') || pathname.startsWith('/url/')) {
+    return { status: 301, content: '/files' }
+  } else if (pathname.startsWith('/files')) {
     // serve index.html
-    console.log('serving index.html', `${hyperparamPath}/public/index.html`)
     return handleStatic(`${hyperparamPath}/public/index.html`)
   } else if (pathname.startsWith('/public/')) {
     // serve static files
@@ -245,8 +244,10 @@ export function serve({ port = 2048, path = '' }) {
   }).listen(port, () => {
     console.log(`hyperparam server running on 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}`)
+    else {
+      path = encodeURIComponent(path)
+      openUrl(`http://localhost:${port}/files?key=${path}`)
+    }
   })
 }