From 706d0721c08fd5949ee06349302d780b0f94a3e2 Mon Sep 17 00:00:00 2001 From: Kenny Daniel Date: Sun, 15 Sep 2024 19:29:31 -0700 Subject: [PATCH] demo: url parsing and links --- demo/App.tsx | 19 +++++++++-- demo/assets/azure.svg | 3 ++ demo/assets/git.svg | 3 ++ demo/assets/huggingface.svg | 4 +++ demo/assets/s3.svg | 3 ++ demo/bundle.min.js | 2 +- demo/bundle.min.js.map | 2 +- demo/demo.css | 66 +++++++++++++++++++++++++++++++++---- demo/demo.js | 5 ++- index.html | 41 ++++++++++++++++++++--- package.json | 2 +- 11 files changed, 134 insertions(+), 16 deletions(-) create mode 100644 demo/assets/azure.svg create mode 100644 demo/assets/git.svg create mode 100644 demo/assets/huggingface.svg create mode 100644 demo/assets/s3.svg diff --git a/demo/App.tsx b/demo/App.tsx index 6a292f4..8c7ac9c 100644 --- a/demo/App.tsx +++ b/demo/App.tsx @@ -1,6 +1,6 @@ import HighTable, { DataFrame, sortableDataFrame } from 'hightable' import { compressors } from 'hyparquet-compressors' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { parquetReadObjects } from '../src/hyparquet.js' import { FileMetaData, parquetMetadataAsync, parquetSchema } from '../src/metadata.js' import type { AsyncBuffer } from '../src/types.js' @@ -15,9 +15,11 @@ type Lens = 'table' | 'metadata' | 'layout' /** * Hyparquet demo viewer page + * @param {Object} props + * @param {string} [props.url] * @returns {ReactNode} */ -export default function App() { +export default function App({ url }: { url?: string }) { const [progress, setProgress] = useState() const [error, setError] = useState() const [df, setDf] = useState() @@ -26,13 +28,26 @@ export default function App() { const [metadata, setMetadata] = useState() const [byteLength, setByteLength] = useState() + useEffect(() => { + if (!df && url) { + asyncBufferFromUrl(url).then(asyncBuffer => setAsyncBuffer(url, asyncBuffer)) + } + }, [ url ]) + async function onFileDrop(file: File) { + // Clear query string + history.pushState({}, '', location.pathname) setAsyncBuffer(file.name, await file.arrayBuffer()) } async function onUrlDrop(url: string) { + // Add key=url to query string + const params = new URLSearchParams(location.search) + params.set('key', url) + history.pushState({}, '', `${location.pathname}?${params}`) setAsyncBuffer(url, await asyncBufferFromUrl(url)) } async function setAsyncBuffer(name: string, asyncBuffer: AsyncBuffer) { + // TODO: Replace welcome with spinner const metadata = await parquetMetadataAsync(asyncBuffer) setMetadata(metadata) setName(name) diff --git a/demo/assets/azure.svg b/demo/assets/azure.svg new file mode 100644 index 0000000..7ac89d0 --- /dev/null +++ b/demo/assets/azure.svg @@ -0,0 +1,3 @@ + + + diff --git a/demo/assets/git.svg b/demo/assets/git.svg new file mode 100644 index 0000000..99de7a4 --- /dev/null +++ b/demo/assets/git.svg @@ -0,0 +1,3 @@ + + + diff --git a/demo/assets/huggingface.svg b/demo/assets/huggingface.svg new file mode 100644 index 0000000..9b31c76 --- /dev/null +++ b/demo/assets/huggingface.svg @@ -0,0 +1,4 @@ + + + + diff --git a/demo/assets/s3.svg b/demo/assets/s3.svg new file mode 100644 index 0000000..400f3c9 --- /dev/null +++ b/demo/assets/s3.svg @@ -0,0 +1,3 @@ + + + diff --git a/demo/bundle.min.js b/demo/bundle.min.js index 2cb042c..3c8e872 100644 --- a/demo/bundle.min.js +++ b/demo/bundle.min.js @@ -7,5 +7,5 @@ * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. - */!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(e){console.error(e)}}(),c.exports=function(){if(o)return f;o=1;var e=i,n=h();function t(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t