Create the space (#2)

* setup GitHub Action

* install python

* github action env vars

* gitignore

* use vite to generate the app + update action

* apply recommendations and fix errors

* copy and adapt (ts) hyperparam-cli code

only enable a Parquet URL, hardcoded

* move assets to src/assets

* fix css by renaming id

* fix height down caret in sortable

* add workers

* update tsbuildinfo

* enable Cell view

* fix url

* try this

* specific code for hf space

* fix urls

* intercept click on link when staying in the app

* use and set the 'key' query param

* parse the HF urls

* rename query param key to url

* url->raw, prepare breadcrumb for file view

* add action field + use in Cell

* show content for all the routes + error, and fix %2F in branch name

* fix query param

* fix viewer and cell for 'blob' urls

* add Folder view

* fix text, markdown and image views

* clean

* change project url

* add repository view, to select a branch

* add home page

* add home link + no view for 'base url'

* namespace dataset sends to home

* simplify code

* add dependency to huggingface.js to remove code

we will need it anyway later to enable authentication

* add unstyled dataset search on home

* add some style

* test OAuth (requires space)

* fix type

* fix ts

* comment out oauth for now

* fix scroll on home

* fix link

* comment

* upgrade hyparquet

* remove unused code

* upgrade hightable

* upgrade hightable and style (row placeholder)

* upgrade hightable and use cachedAsyncBuffer

* Fix parquetQueryWorker for parallel requests

* Optionally send chunks back from parquet worker

* Parquet aware table provider

* repository view: the main branch root path

* test oauth

* always try to get log in HF

* refactor

* use context to pass auth + return if auth not ready

* remove traces

* handle redirect + login/logout links

* add debug

* test

* test

* test

* more logs

* more debug

* test

* test

* clean

* fix token expiration + fix redirection + better UI for login/logout

* hack css

* handle gated datasets

* fix private/gated for parquet / head requests

* add fix for cell view:

hyparam/hyperparam-cli@2fa7382

* add branch dropdown

* update hightable

* remove sidebar + change color + pass url to create breadcrumb

* Revert "remove sidebar + change color + pass url to create breadcrumb"

This reverts commit 68610c1.

* move branch selector to the right + fix path parts

* css tweak to have text and icon better aligned

* add link to open the url

* fix branch (refs/convert/parquet) in external link

* handle middle mouse button on parquet view

* refactoring to fix linter

* move to folders hierarchy

* update tests

* fix file size

* fix links in the HF space

* fix Home link, to remove the ?url= param

* upgrade hightable

* Revamp the space with @hyparam/components. Temporarily without HF specifics

* add CI

* ignore coverage in eslint

* upgrade packages, in particular @hyparam/components

* add parseHuggingFaceUrl function

* implement HF filesystem

* upgrade components to 0.1.8

* enable auth - WARNING: relies on unreleased 0.1.10

see hyparam/hyperparam-cli#114

* fix lint

* remove commented code

* no need to stop the event propagation

* remove commented code

.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: Checks
+on:
+  push:
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm i
+      - run: npm run lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm i
+      - run: npx tsc
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm i
+      - run: npm run coverage
+
+  buildcheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm i
+      - run: npm run build

.github/workflows/deploy-to-huggingface.yml

@@ -0,0 +1,36 @@
+name: Deploy to Hugging Face
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  STATIC_SPACE: "severo/parquet-viewer"
+  DIRECTORY: "dist"
+
+jobs:
+  deploy:
+    # inspired by https://huggingface.co/blog/severo/build-static-html-spaces
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Python 3.12
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+      - name: Install huggingface_hub
+        run: pip install --upgrade "huggingface_hub[cli]"
+      - name: Checkout the code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: build the app
+        run: npm install && npm run build
+      - name: Copy the README.md from the space to the public folder
+        run: huggingface-cli download --token=${{ secrets.HF_TOKEN }} --repo-type=space --local-dir=${{env.DIRECTORY}} ${{env.STATIC_SPACE}} README.md
+      - name: Delete hfh cache
+        run: rm -rf ${{env.DIRECTORY}}/.cache
+      - name: Push to HF space (deleting the previous files)
+        run: huggingface-cli upload --token=${{ secrets.HF_TOKEN }} --repo-type=space ${{env.STATIC_SPACE}} ${{env.DIRECTORY}} . --delete "*"

.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# the dependencies are exact
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+
+coverage

LICENSE

@@ -0,0 +1,7 @@
+The MIT License (MIT)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,7 @@
+# View Parquet files on Hugging Face
+
+This app allows you to view Parquet files hosted in a Hugging Face dataset. It hardcoded for now: https://huggingface.co/datasets/codeparrot/github-code/resolve/main/data/train-00000-of-01126.parquet
+
+The app is static and is currently deployed with a [GitHub Action](./github/workflows/ci.yml) to a Hugging Face space: https://huggingface.co/spaces/severo/parquet-viewer.
+
+Created with `npm create vite@latest parquet-viewer -- --template react-ts`. See https://blog.rednegra.net/2024/10/14/create-a-static-huggingface-space-with-react.

eslint.config.js

@@ -0,0 +1,85 @@
+import js from '@eslint/js'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+
+// Copy from https://github.com/hyparam/hyperparam-cli/blob/87b516bbcaadc0ffacb9914c4ba7a8d827e65469/shared.eslint.config.js
+const sharedJsRules = {
+  'arrow-spacing': 'error',
+  camelcase: 'off',
+  'comma-spacing': 'error',
+  'comma-dangle': ['error', 'always-multiline'],
+  'eol-last': 'error',
+  eqeqeq: 'error',
+  'func-style': ['error', 'declaration'],
+  indent: ['error', 2],
+  'no-constant-condition': 'off',
+  'no-extra-parens': 'error',
+  'no-multi-spaces': 'error',
+  'no-trailing-spaces': 'error',
+  'no-unused-vars': 'off',
+  'no-useless-concat': 'error',
+  'no-useless-rename': 'error',
+  'no-useless-return': 'error',
+  'no-var': 'error',
+  'object-curly-spacing': ['error', 'always'],
+  'prefer-const': 'warn',
+  'prefer-destructuring': ['warn', {
+    object: true,
+    array: false,
+  }],
+  'prefer-promise-reject-errors': 'error',
+  quotes: ['error', 'single'],
+  'require-await': 'warn',
+  semi: ['error', 'never'],
+
+  'sort-imports': ['error', {
+    ignoreDeclarationSort: true,
+    ignoreMemberSort: false,
+    memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+  }],
+
+  'space-infix-ops': 'error',
+}
+const sharedTsRules = {
+  '@typescript-eslint/restrict-template-expressions': 'off',
+  '@typescript-eslint/no-unused-vars': 'warn',
+}
+
+export default tseslint.config(
+  { ignores: ['dist', 'coverage'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.strictTypeChecked, ...tseslint.configs.stylisticTypeChecked],
+    // Set the react version
+    settings: { react: { version: '18.3' } },
+    files: ['{test,src}/**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2023,
+      globals: globals.browser,
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules,
+      ...sharedJsRules,
+      ...sharedTsRules,
+    },
+  },
+)

index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Hyperparam Parquet Viewer</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap"/>
+    <meta name="description" content="hyperparam is the missing UI for machine learning" />
+    <link href="/favicon.png" rel="icon" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="theme-color" content="#6b00ff">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "parquet-viewer",
+  "private": true,
+  "version": "0.0.0",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "coverage": "vitest run --coverage --coverage.include=src",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@huggingface/hub": "0.21.0",
+    "@hyparam/components": "0.1.10",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.16.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/coverage-v8": "2.1.8",
+    "eslint": "9.16.0",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "0.4.16",
+    "globals": "15.13.0",
+    "typescript": "5.7.2",
+    "typescript-eslint": "8.17.0",
+    "vite": "5.4.11",
+    "vitest": "2.1.8"
+  }
+}