demo: url parsing and links

This commit is contained in:
Kenny Daniel 2024-09-15 19:29:31 -07:00
parent 58e42a8ac7
commit 706d0721c0
No known key found for this signature in database
GPG Key ID: 90AB653A8CAD7E45
11 changed files with 134 additions and 16 deletions

@ -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<number>()
const [error, setError] = useState<Error>()
const [df, setDf] = useState<DataFrame>()
@ -26,13 +28,26 @@ export default function App() {
const [metadata, setMetadata] = useState<FileMetaData>()
const [byteLength, setByteLength] = useState<number>()
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)

3
demo/assets/azure.svg Normal file

@ -0,0 +1,3 @@
<svg width="128" height="128" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<path d="m59.2 108c16.4-2.91 30-5.31 30.2-5.34l0.284-0.0602-15.5-18.5c-8.54-10.2-15.5-18.5-15.5-18.6 0-0.0911 16-44.2 16.1-44.4 0.0302-0.0524 10.9 18.8 26.4 45.7 14.5 25.2 26.5 45.9 26.6 46.1l0.202 0.353-98.7-0.012 29.9-5.28zm-59.2-5.63c0-0.026 7.32-12.7 16.3-28.2l16.3-28.2 18.9-15.9c10.4-8.74 19-15.9 19-15.9 0.0343-0.0127-0.103 0.332-0.305 0.767-0.202 0.435-9.46 20.3-20.6 44.1l-20.2 43.3-14.7 0.0184c-8.08 0.0102-14.7-0.00282-14.7-0.0288z" fill="#222"/>
</svg>

After

Width:  |  Height:  |  Size: 568 B

3
demo/assets/git.svg Normal file

@ -0,0 +1,3 @@
<svg width="92" height="92" version="1.1" viewBox="0 0 92 92" xmlns="http://www.w3.org/2000/svg">
<path d="m89.7 41.9-39.7-39.7a5.86 5.86 0 0 0-8.29 0l-8.25 8.25 10.5 10.5a6.97 6.97 0 0 1 7.16 1.66 6.98 6.98 0 0 1 1.65 7.21l10.1 10.1a6.97 6.97 0 0 1 7.21 1.65 6.98 6.98 0 0 1 0 9.87 6.98 6.98 0 0 1-9.87 0 6.98 6.98 0 0 1-1.52-7.59l-9.41-9.41v24.8a6.98 6.98 0 0 1 1.84 11.2 6.98 6.98 0 0 1-9.87 0 6.98 6.98 0 0 1 0-9.87 6.97 6.97 0 0 1 2.29-1.53v-25a6.94 6.94 0 0 1-2.29-1.53 6.99 6.99 0 0 1-1.51-7.63l-10.3-10.3-27.2 27.2a5.87 5.87 0 0 0 0 8.29l39.7 39.7a5.87 5.87 0 0 0 8.29 0l39.5-39.5a5.87 5.87 0 0 0 0-8.29" fill="#333"/>
</svg>

After

Width:  |  Height:  |  Size: 635 B

@ -0,0 +1,4 @@
<svg width="128" height="128" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<path d="m126 101c0.658-0.987 1.1-2.1 1.29-3.27 0.195-1.17 0.14-2.37-0.16-3.52-0.436-1.66-1.34-3.03-2.56-4.02 0.589-0.968 0.975-2.04 1.14-3.17 0.353-2.44-0.457-4.87-2.28-6.86-1.42-1.54-3.42-2.39-5.64-2.39-0.258 0-0.521 0.0138-0.788 0.04 1.68-5.38 2.53-11 2.53-16.6 0-30.6-24.8-55.5-55.5-55.5-30.6 0-55.5 24.8-55.5 55.5-0.00551 5.62 0.843 11.2 2.52 16.6h-0.0592c-2.22 0-4.22 0.85-5.64 2.39-1.82 1.98-2.63 4.42-2.28 6.86 0.161 1.12 0.547 2.2 1.14 3.17-1.22 0.989-2.12 2.37-2.56 4.02-0.301 1.15-0.355 2.35-0.159 3.52s0.637 2.29 1.29 3.27c-0.117 0.183-0.225 0.371-0.326 0.565-1.1 2.08-1.17 4.43-0.199 6.62 1.47 3.32 5.11 5.94 12.2 8.74 4.4 1.75 8.44 2.86 8.47 2.87 5.82 1.51 11.1 2.28 15.7 2.28 7.49 0 13.1-2.05 16.6-6.1 6.04 0.958 12.2 0.922 18.2-0.104 3.56 4.12 9.18 6.2 16.7 6.2 9.05-0.333 16.8-2.27 24.1-5.15 7.08-2.81 10.7-5.42 12.2-8.74 0.968-2.19 0.897-4.54-0.2-6.62-0.0998-0.195-0.21-0.384-0.326-0.565zm-77.8 13.4c-2.69 1.47-6.1 1.98-9.56 1.98-5.47 0-11.1-1.28-14.2-2.09-0.155-0.04-19.3-5.44-16.8-10 0.407-0.773 1.08-1.08 1.92-1.08 3.41 0 9.6 5.07 12.3 5.07 0.595 0 1.02-0.253 1.19-0.872 1.14-4.07-17.3-5.79-15.7-11.7 0.273-1.04 1.01-1.47 2.06-1.47 4.5-6.57e-4 14.6 7.92 16.7 7.92 0.162 0 0.278-0.0479 0.341-0.148 0.0092-0.0151 0.0184-0.0295 0.027-0.0453 0.992-1.64 0.423-2.83-6.37-6.99l-0.653-0.397c-7.48-4.53-12.7-7.25-9.74-10.5 0.343-0.375 0.83-0.541 1.42-0.541 0.701 0 1.55 0.234 2.48 0.628 3.95 1.67 9.42 6.21 11.7 8.19 0.36 0.312 0.717 0.628 1.07 0.946 0 0 2.9 3.01 4.65 3.01 0.403 0 0.745-0.159 0.977-0.551 1.24-2.09-11.5-11.8-12.3-15.8-0.488-2.71 0.343-4.08 1.88-4.08 0.731 0 1.62 0.311 2.61 0.936 3.05 1.94 8.95 12.1 11.1 16 0.723 1.32 1.96 1.88 3.07 1.88 2.21 0 3.93-2.19 0.202-4.98-5.61-4.2-3.64-11.1-0.964-11.5 0.114-0.0184 0.23-0.0276 0.345-0.0276 2.43 0 3.51 4.19 3.51 4.19s3.15 7.9 8.55 13.3c4.91 4.9 5.5 8.88 2.73 13.9-1.1 1.99-2.8 3.84-4.54 4.82zm22-3.79c-3.86 0.491-7.8 0.461-11.6 0.0735h-0.0098c3-6.7 1.48-12.9-4.58-19-3.98-3.97-6.62-9.83-7.17-11.1-1.11-3.81-4.05-8.05-8.94-8.05-0.413 0-0.825 0.0328-1.23 0.0972-2.14 0.337-4.01 1.57-5.34 3.42-1.44-1.79-2.84-3.22-4.11-4.02-1.91-1.21-3.82-1.83-5.67-1.83-2.32 0-4.39 0.952-5.83 2.68l-0.0368 0.044c-0.0276-0.114-0.0538-0.227-0.0808-0.341l-0.0033-0.0151c-0.869-3.68-1.28-7.56-1.29-11.3 0-27.5 22.3-49.8 49.8-49.8s49.8 22.3 49.8 49.8c0.01 1.65-0.0843 3.34-0.234 4.92v0.0085c-0.233 2.23-0.541 4.08-0.991 6.12-1.4-1.36-3.26-2.1-5.3-2.1-1.86 0-3.76 0.614-5.67 1.83-1.27 0.805-2.67 2.23-4.11 4.02-1.34-1.85-3.21-3.08-5.34-3.42-0.408-0.0643-0.82-0.0972-1.23-0.0972-4.88 0-7.82 4.24-8.94 8.05-0.551 1.29-3.2 7.15-7.18 11.1-6.06 6.04-7.59 12.3-4.63 18.9zm50.4-12c-0.884 0.876-2.23 1.64-3.75 2.35-1.4 0.645-3.02 1.26-4.38 1.79-0.899 0.346-1.76 0.691-2.63 1.06-2.52 1.08-4.31 2.18-3.95 3.55 0.0571 0.217 0.162 0.397 0.292 0.548 0.423 0.488 1.26 0.392 2.29 0.0223 0.497-0.176 1-0.416 1.45-0.628 1.26-0.614 2.68-1.44 4.09-2.19 0.565-0.305 1.14-0.595 1.72-0.87 1.34-0.63 2.6-1.08 3.61-1.08 1.02 0.0419 1.36 0.379 1.92 1.08 0.5 0.949 0.0814 1.93-0.897 2.89-0.939 0.925-2.4 1.83-4.06 2.67-3.77 1.85-7.82 3.28-11.9 4.46-1.73 0.447-4.19 1.03-6.97 1.47-3.51 0.553-6.95 0.799-10.4 0.464-4.35-0.347-8.2-2.22-10.5-5.91-1.13-1.8-1.96-4.17-2.06-6.03-0.0368-2.81 1.38-5.5 4.42-8.53 5.41-5.4 8.55-13.3 8.55-13.3 0.438-1.63 1.25-3.21 2.81-4.07 0.351-0.131 0.694-0.109 1.05-0.0926 0.487 0.0775 0.951 0.368 1.35 0.815 1.51 1.87 1.57 4.58 0.766 6.72-0.769 2.24-2.62 3.42-4.19 4.91-0.987 1.04-1.22 1.95-0.995 2.64 0.213 0.564 0.573 0.876 0.99 1.08 1.27 0.614 2.13 0.152 3.19-0.276 0.523-0.331 0.864-0.815 1.19-1.31 1.28-2.34 2.63-4.64 4.04-6.9 1.91-2.84 3.81-5.84 5.8-8.02 0.502-0.552 1.03-0.954 1.63-1.31 1.54-0.904 2.84-0.946 3.58-0.206 0.448 0.448 0.696 1.19 0.682 2.22 0.0245 2.39-1.68 4.26-3.17 5.94-2.69 3.31-6.7 6.09-8.95 9.84-0.214 0.357-0.307 0.766-0.325 1.13-0.0124 0.252 0.217 0.402 0.377 0.548 0.177 0.162 0.431 0.211 0.672 0.204 0.913-0.0532 1.64-0.545 2.37-1.04 0.197-0.135 0.335-0.249 0.525-0.393 4.28-3.79 8.5-7.6 13.5-10.2 1.44-0.802 2.74-1.36 4.2-1.04 0.972 0.215 1.28 1.04 1.56 1.86 0.15 1.17-0.382 1.86-1.05 2.69-1.55 1.56-3.44 2.74-5.24 3.84-3.12 1.94-6.24 3.64-9.27 5.85-1.05 0.815-2.24 1.67-2.39 3.07 0.024 0.378 0.225 0.724 0.36 1.01 0.748 0.446 1.87-0.267 2.44-0.566 0.0584-0.0315 0.123-0.0643 0.185-0.0985 1.98-1.08 4.02-2.37 5.7-3.35 1.78-1.09 3.59-2.04 5.45-2.85l0.22-0.0893 0.0263-0.0105c1.17-0.462 2.22-0.746 3.08-0.746 0.951-0.0126 1.6 0.433 2 1.28 0.021 0.0624 0.0394 0.123 0.0584 0.188 0.241 1.26-0.185 2.07-0.99 2.94z" fill="#222" stroke-width="1.52"/>
<path d="m45.1 37.7c-0.547-0.0094-1.89 0.0702-3.19 0.69-1.31 0.62-2.87 2.1-3.55 3.74s-0.717 3.48-0.113 5.16c0.604 1.67 2.07 3.2 3.38 3.89 1.31 0.698 1.85-0.576 2.49-1.51 0.645-0.935 1.15-1.64 1.9-1.91 0.746-0.264 1.53 0.0731 2.56 0.483 1.03 0.41 2.15 1.06 2.73-0.0282s0.943-2.67 0.802-4.08c-0.142-1.41-0.699-2.74-1.6-3.84-0.901-1.09-2.46-2-3.46-2.3-0.997-0.301-1.62-0.301-1.95-0.306-0.328-0.0056 0.547 0.0094 0 2.6e-5zm36 0.0064c-0.788-0.0538-1.58 0.0698-2.34 0.299-1.01 0.305-1.95 0.831-2.73 1.54s-1.4 1.58-1.81 2.56c-0.407 0.977-0.593 2.03-0.544 3.09 0.0496 1.06 0.333 2.09 0.83 3.02 0.491 0.924 1.58 0.488 2.73 0.0282 0.901-0.361 1.84-0.737 2.56-0.483 0.776 0.274 1.35 1.11 1.9 1.91 0.742 1.07 1.43 2.07 2.49 1.51 1.25-0.665 2.27-1.69 2.94-2.93 0.67-1.25 0.956-2.67 0.821-4.07-0.101-1.05-0.435-2.07-0.977-2.98-0.542-0.909-1.24-1.74-2.16-2.28-1.2-0.7-2.56-1.13-3.71-1.21zm-0.798 23.2c-1.84 0-3.13 1.1-4.49 1.77-3.31 1.64-7.71 3.82-12.6 3.82-4.84 0-9.24-2.18-12.6-3.82-3.72-1.84-6.06-3-6.06 0.41 0 4.37 2.09 11.5 7.83 15.7 1.64e-4 -3.41e-4 -5.51e-4 -2e-3 0-0.0013 2.72 1.98 6.26 3.28 10.8 3.28 4.82 0 8.52-1.47 11.3-3.67 2.76e-4 5.19e-4 0.0013 6.57e-4 0.0013 0.0013 5.35-4.21 7.31-11.1 7.31-15.3 0-1.67-0.563-2.25-1.58-2.18h-3.3e-5z" fill="#222" stroke-width="1.52"/>
</svg>

After

Width:  |  Height:  |  Size: 5.8 KiB

3
demo/assets/s3.svg Normal file

@ -0,0 +1,3 @@
<svg width="128" height="128" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<path class="st0" d="m64 2.561c28.87 0 52.27 10.96 52.27 24.46 0 13.51-23.41 24.46-52.27 24.46s-52.27-10.96-52.27-24.46 23.41-24.46 52.27-24.46zm-52.27 81.83v18.78c9.3 33.03 101.2 26.65 104.6-1.69v-18.76c-4.59 31.11-97.2 33.35-104.6 1.67zm-0.26-48.89v18.34c9.3 32.26 101.7 27.9 105.1 0.23v-18.33c-4.6 30.39-97.72 30.7-105.1-0.24zm0 23.7v18.78c9.3 33.03 101.7 28.57 105.1 0.23v-18.76c-4.6 31.11-97.72 31.43-105.1-0.25z" fill="#333"/>
</svg>

After

Width:  |  Height:  |  Size: 543 B

2
demo/bundle.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -261,9 +261,45 @@ main,
max-width: 640px;
margin: 0 auto;
}
#welcome ul {
margin-top: 10px;
margin-left: 30px;
/* quick link buttons */
.quick-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
}
.quick-links li {
display: flex;
flex: 1 1 calc(50% - 10px);
min-width: 0;
}
.quick-links a {
background-position: 10px center;
background-size: 18px;
border: 1px solid #444;
border-radius: 4px;
font-size: 8pt;
overflow: hidden;
padding: 12px;
padding-left: 36px;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.quick-links a:hover {
background-color: #cec;
}
.huggingface {
background: url('assets/huggingface.svg') no-repeat 8px center;
}
.github {
background: url('assets/git.svg') no-repeat 8px center;
}
.aws {
background: url('assets/s3.svg') no-repeat 8px center;
}
.azure {
background: url('assets/azure.svg') no-repeat 8px center;
}
/* file upload */
@ -319,12 +355,11 @@ table:focus-visible {
.table thead th {
background-color: #eaeaeb;
border: none;
border-top: 4px solid #706fb1;
border-bottom: 2px solid #c9c9c9;
box-sizing: content-box;
color: #444;
height: 20px;
padding-top: 4px;
padding-top: 8px;
position: sticky;
top: -1px; /* fix 1px gap above thead */
user-select: none;
@ -348,7 +383,7 @@ table:focus-visible {
.table thead th.orderby ::after {
position: absolute;
right: 8px;
top: 4px;
top: 8px;
padding-left: 2px;
background-color: #eaeaeb;
content: "▾";
@ -368,6 +403,25 @@ table:focus-visible {
white-space: pre-wrap;
}
/* pending state */
.table th::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #706fb1;
z-index: 100;
}
.pending .table th::before {
animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
0%, 100% { background-color: #6fb176; }
50% { background-color: #adc6b0; }
}
/* column resize */
.table thead span {
position: absolute;

@ -5,6 +5,9 @@ import App from './App.js'
const app = document.getElementById('app')
if (!app) throw new Error('missing app element')
const params = new URLSearchParams(location.search)
const url = params.get('key') || undefined
// @ts-expect-error TODO: fix react createRoot type
const root = ReactDOM.createRoot(document.getElementById('app'))
root.render(React.createElement(App))
root.render(React.createElement(App, { url }))

@ -23,6 +23,10 @@
<h1>hyparquet</h1>
<sub>/haɪ pɑːrˈkeɪ/</sub>
<h2>in-browser parquet file reader</h2>
<p>
<a href="https://www.npmjs.com/package/hyparquet"><img src="https://img.shields.io/npm/v/hyparquet" alt="npm hyparquet"></a>
<a href="https://github.com/hyparam/hyparquet"><img src="https://img.shields.io/github/stars/hyparam/hyparquet?style=social" alt="star hyparquet"></a>
</p>
<p>
Online demo of <a href="https://github.com/hyparam/hyparquet">hyparquet</a>: a parser for apache parquet files.
Uses <a href="https://github.com/hyparam/hightable">hightable</a> for high performance windowed table viewing.
@ -30,10 +34,39 @@
<p>
Drag and drop a parquet file (or url) to see your parquet data. 👀
</p>
<ul>
<li><a href="https://github.com/hyparam/hyparquet">hyparquet github</a></li>
<li><a href="https://www.npmjs.com/package/hyparquet">hyparquet npm</a></li>
</ul>
<p>
Example files:
<ul class="quick-links">
<li>
<a
class="aws"
href="?key=https://hyperparam-public.s3.amazonaws.com/wiki-en-00000-of-00041.parquet">
s3://wiki-en-00000-of-00041.parquet
</a>
</li>
<li>
<a
class="azure"
href="?key=https://hyperparam.blob.core.windows.net/hyperparam/starcoderdata-js-00000-of-00065.parquet">
azure://starcoderdata-js-00000-of-00065.parquet
</a>
</li>
<li>
<a
class="huggingface"
href="?key=https://huggingface.co/datasets/codeparrot/github-code/resolve/main/data/train-00000-of-01126.parquet?download=true">
huggingface://github-code-00000-of-01126.parquet
</a>
</li>
<li>
<a
class="github"
href="?key=https://raw.githubusercontent.com/hyparam/hyparquet/master/test/files/rowgroups.parquet">
github://rowgroups.parquet
</a>
</li>
</ul>
</p>
</div>
</main>
<input id="file-input" type="file">

@ -40,7 +40,7 @@
"eslint": "8.57.0",
"eslint-plugin-import": "2.30.0",
"eslint-plugin-jsdoc": "50.2.3",
"hightable": "0.4.0",
"hightable": "0.4.1",
"http-server": "14.1.1",
"hyparquet-compressors": "0.1.4",
"react": "18.3.1",