├── .gitattributes
├── .github
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .husky
    └── pre-commit
├── .prettierignore
├── .prettierrc.mjs
├── README.md
├── assets
    └── icon.png
├── babel.config.js
├── components.json
├── components
    ├── CommandEnter.tsx
    ├── data-grid.tsx
    ├── query-input.tsx
    └── ui
    │   ├── badge.tsx
    │   ├── button.tsx
    │   ├── hover-card.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── sonner.tsx
    │   ├── switch.tsx
    │   └── textarea.tsx
├── hooks
    ├── useDuckDB.ts
    └── useParquetInfo.ts
├── lib
    ├── datasets.test.ts
    ├── datasets.ts
    └── utils.ts
├── media
    └── screenshot.png
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── services
    └── DuckDBClient.ts
├── src
    ├── content.tsx
    ├── explorer.tsx
    ├── popup.tsx
    └── styles.css
├── tailwind.config.js
├── tsconfig.json
└── types
    └── parquet.ts


/.gitattributes:
--------------------------------------------------------------------------------
1 | pnpm-lock.yaml binary
2 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: Node.js CI and Manual Release
 2 | 
 3 | on:
 4 |     push:
 5 |         branches: [main]
 6 |     pull_request:
 7 |         branches: [main]
 8 |     workflow_dispatch:
 9 |         inputs:
10 |             version:
11 |                 description: "Version to release"
12 |                 required: true
13 |                 type: string
14 | 
15 | jobs:
16 |     build:
17 |         runs-on: ubuntu-latest
18 |         steps:
19 |             - uses: actions/checkout@v4
20 |             - uses: pnpm/action-setup@v4
21 |               with:
22 |                   version: 8
23 |             - uses: actions/setup-node@v4
24 |               with:
25 |                   node-version: 20
26 |                   cache: "pnpm"
27 |             - run: pnpm install
28 |             - run: pnpm build
29 |             - run: pnpm test
30 |             - run: zip -r build.zip build
31 |             - uses: actions/upload-artifact@v3
32 |               with:
33 |                   name: build
34 |                   path: build.zip
35 | 
36 |     release:
37 |         needs: build
38 |         if: github.event_name == 'workflow_dispatch'
39 |         runs-on: ubuntu-latest
40 |         steps:
41 |             - uses: actions/checkout@v4
42 |             - uses: actions/download-artifact@v3
43 |               with:
44 |                   name: build
45 |             - name: Create Release
46 |               env:
47 |                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
48 |               run: |
49 |                   gh release create v${{ github.event.inputs.version }} \
50 |                     --title "Release v${{ github.event.inputs.version }}" \
51 |                     --notes "Release notes for version ${{ github.event.inputs.version }}" \
52 |                     build.zip
53 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | /node_modules
 6 | /.pnp
 7 | .pnp.js
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | #cache
13 | .turbo
14 | .next
15 | .vercel
16 | 
17 | # misc
18 | .DS_Store
19 | *.pem
20 | 
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | .pnpm-debug.log*
26 | 
27 | 
28 | # local env files
29 | .env*
30 | 
31 | out/
32 | build/
33 | dist/
34 | 
35 | # plasmo - https://www.plasmo.com
36 | .plasmo
37 | 
38 | # bpp - http://bpp.browser.market/
39 | keys.json
40 | 
41 | # typescript
42 | .tsbuildinfo
43 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx lint-staged
5 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | build
2 | coverage
3 | pnpm-lock.yaml


--------------------------------------------------------------------------------
/.prettierrc.mjs:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('prettier').Options}
 3 |  */
 4 | export default {
 5 |     printWidth: 80,
 6 |     tabWidth: 4,
 7 |     useTabs: false,
 8 |     semi: false,
 9 |     singleQuote: false,
10 |     trailingComma: "none",
11 |     bracketSpacing: true,
12 |     bracketSameLine: true,
13 |     plugins: ["@ianvs/prettier-plugin-sort-imports"],
14 |     importOrder: [
15 |         "<BUILTIN_MODULES>", // Node.js built-in modules
16 |         "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
17 |         "", // Empty line
18 |         "^@plasmo/(.*)$",
19 |         "",
20 |         "^@plasmohq/(.*)$",
21 |         "",
22 |         "^~(.*)$",
23 |         "",
24 |         "^[./]"
25 |     ]
26 | }
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # HF Data Explorer (Archived)
 2 | 
 3 | **This feature has been archived since it is available natively in Hugging Face now. You can learn more about it [here](https://huggingface.co/blog/sql-console).**
 4 | 
 5 | A Chrome Extension for exploring and query Hugging Face datasets with SQL.
 6 | 
 7 | ![HF Data Explorer Screenshot](./media/screenshot.png)
 8 | 
 9 | ## Getting Started
10 | 
11 | #### Installing
12 | 
13 | 1. Download the latest release from the [Releases page](https://github.com/cfahlgren1/hf-data-explorer/releases).
14 | 2. Unzip the downloaded file.
15 | 3. Open Google Chrome and navigate to `chrome://extensions/`.
16 | 4. Enable "Developer mode" by toggling the switch in the top right corner.
17 | 5. Click on "Load unpacked" button.
18 | 6. Select the unzipped folder containing the extension files.
19 | 7. The HF Data Explorer extension should now be installed and visible in your Chrome toolbar.
20 | 
21 | #### Limitations
22 | 
23 | DuckDB WASM can only use ~ 4GB of memory (_more like 3.4GB with duckdb memory limit_). Since DuckDB WASM can't spill extra data to disk like the other clients, it may not be able to perform very large or advanced queries. However, DuckDB WASM is still **very** fast, performant, and can work for most workloads.
24 | 
25 | ## Contributing
26 | 
27 | This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
28 | 
29 | First, run the development server:
30 | 
31 | ```bash
32 | pnpm dev
33 | # or
34 | npm run dev
35 | ```
36 | 
37 | Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
38 | 
39 | You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
40 | 
41 | For further guidance, [visit our Documentation](https://docs.plasmo.com/)
42 | 
43 | ## Making production build
44 | 
45 | Run the following:
46 | 
47 | ```bash
48 | pnpm build
49 | # or
50 | npm run build
51 | ```
52 | 
53 | This should create a production bundle for your extension, ready to be zipped and published to the stores.
54 | 


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cfahlgren1/hf-data-explorer/75a863fc9b4d5453641e597a93f284964bd4be1f/assets/icon.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     presets: [
3 |         ["@babel/preset-env", { targets: { node: "current" } }],
4 |         "@babel/preset-typescript"
5 |     ]
6 | }
7 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "$schema": "https://ui.shadcn.com/schema.json",
 3 |     "style": "default",
 4 |     "rsc": false,
 5 |     "tsx": true,
 6 |     "tailwind": {
 7 |         "config": "tailwind.config.js",
 8 |         "css": "src/styles.css",
 9 |         "baseColor": "slate",
10 |         "cssVariables": true,
11 |         "prefix": ""
12 |     },
13 |     "aliases": {
14 |         "components": "@/components",
15 |         "utils": "@/lib/utils"
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/components/CommandEnter.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { AiOutlineEnter } from "react-icons/ai"
 3 | 
 4 | const CommandEnter = ({ color = "currentColor" }) => {
 5 |     return (
 6 |         <div className="flex items-center space-x-1 ml-2">
 7 |             <svg
 8 |                 xmlns="http://www.w3.org/2000/svg"
 9 |                 className="w-4 h-4"
10 |                 viewBox="0 0 24 24"
11 |                 fill="none"
12 |                 stroke={color}
13 |                 strokeWidth="2"
14 |                 strokeLinecap="round"
15 |                 strokeLinejoin="round">
16 |                 <path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path>
17 |             </svg>
18 |             <AiOutlineEnter className="w-4 h-4" color={color} />
19 |         </div>
20 |     )
21 | }
22 | 
23 | export default CommandEnter
24 | 


--------------------------------------------------------------------------------
/components/data-grid.tsx:
--------------------------------------------------------------------------------
 1 | import type { ColDef, GridReadyEvent, IDatasource } from "ag-grid-community"
 2 | import { AgGridReact } from "ag-grid-react"
 3 | import React, { useCallback, useMemo, useRef, useState } from "react"
 4 | 
 5 | type RowData = Record<string, any>
 6 | 
 7 | interface DataGridProps<T extends RowData> {
 8 |     initialData: {
 9 |         rows: T[]
10 |         columns: ColDef[]
11 |     }
12 |     fetchNextBatch: () => Promise<{
13 |         rows: T[]
14 |     }>
15 |     height?: number
16 | }
17 | 
18 | export const DataGrid = React.memo(
19 |     <T extends RowData>({ initialData, fetchNextBatch }: DataGridProps<T>) => {
20 |         const gridRef = useRef<AgGridReact>(null)
21 |         const [rowCount, setRowCount] = useState<number>(
22 |             initialData.rows.length
23 |         )
24 | 
25 |         const datasource: IDatasource = useMemo(() => {
26 |             return {
27 |                 getRows: async (params) => {
28 |                     const { startRow, successCallback, failCallback } = params
29 | 
30 |                     try {
31 |                         if (startRow === 0) {
32 |                             successCallback(initialData.rows)
33 |                             setRowCount(initialData.rows.length)
34 |                         } else {
35 |                             const { rows } = await fetchNextBatch()
36 |                             successCallback(rows, startRow + rows.length)
37 |                             setRowCount((prevCount) => prevCount + rows.length)
38 |                         }
39 |                     } catch (error) {
40 |                         failCallback()
41 |                         console.error("Error fetching data:", error)
42 |                     }
43 |                 }
44 |             }
45 |         }, [initialData, fetchNextBatch])
46 | 
47 |         const onGridReady = useCallback(
48 |             (params: GridReadyEvent) => {
49 |                 params.api.setGridOption("datasource", datasource)
50 |             },
51 |             [datasource]
52 |         )
53 | 
54 |         /*
55 |     For small results, we want to use autoHeight to show smaller grid,
56 |     but not for large results as it causes performance issues.
57 |     */
58 |         const isSmallResult = initialData.rows.length < 10
59 | 
60 |         const defaultColDef = useMemo(() => {
61 |             return {
62 |                 flex: 1,
63 |                 minWidth: 100,
64 |                 sortable: false,
65 |                 filter: false
66 |             }
67 |         }, [])
68 | 
69 |         return (
70 |             <div className="flex-grow overflow-auto mt-4">
71 |                 <div
72 |                     className={`ag-theme-quartz ${!isSmallResult ? "h-80" : ""}`}>
73 |                     <AgGridReact
74 |                         ref={gridRef}
75 |                         domLayout={isSmallResult ? "autoHeight" : "normal"}
76 |                         columnDefs={initialData.columns}
77 |                         defaultColDef={defaultColDef}
78 |                         rowModelType="infinite"
79 |                         enableCellTextSelection={true}
80 |                         ensureDomOrder={true}
81 |                         maxConcurrentDatasourceRequests={1}
82 |                         onGridReady={onGridReady}
83 |                         cacheBlockSize={initialData.rows.length}
84 |                         className="overflow-auto"
85 |                     />
86 |                 </div>
87 |                 <p className="text-xs text-center text-slate-600 mt-2">
88 |                     Showing {rowCount} rows
89 |                 </p>
90 |             </div>
91 |         )
92 |     }
93 | )
94 | 


--------------------------------------------------------------------------------
/components/query-input.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@/components/ui/button"
  2 | import type { ParquetInfo } from "@/types/parquet"
  3 | import { ReloadIcon } from "@radix-ui/react-icons"
  4 | import React, { useState } from "react"
  5 | import { Controlled as CodeMirror } from "react-codemirror2"
  6 | 
  7 | import "codemirror/mode/sql/sql"
  8 | 
  9 | import CommandEnter from "./CommandEnter"
 10 | import { Badge } from "./ui/badge"
 11 | 
 12 | interface QueryInputProps {
 13 |     onRunQuery: (query: string) => void
 14 |     isRunning: boolean
 15 |     isLoading: boolean
 16 |     onCancelQuery: () => void
 17 |     isCancelling: boolean
 18 |     views: ParquetInfo[]
 19 | }
 20 | 
 21 | const QueryInput: React.FC<QueryInputProps> = React.memo(
 22 |     ({
 23 |         onRunQuery,
 24 |         isRunning,
 25 |         views,
 26 |         isLoading,
 27 |         onCancelQuery,
 28 |         isCancelling
 29 |     }) => {
 30 |         const [query, setQuery] = useState<string>("")
 31 | 
 32 |         const handleChange = React.useCallback(
 33 |             (editor: any, data: any, value: string) => {
 34 |                 setQuery(value)
 35 |             },
 36 |             []
 37 |         )
 38 |         // helpful auto-fill for preview query
 39 |         const handleTableClick = (tableName: string) => {
 40 |             const newQuery = `SELECT * FROM ${tableName} LIMIT 500`
 41 |             setQuery(newQuery)
 42 |         }
 43 | 
 44 |         // allow horizontal scrolling with mouse
 45 |         const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
 46 |             const container = event.currentTarget
 47 |             const scrollAmount = event.deltaY
 48 | 
 49 |             requestAnimationFrame(() => {
 50 |                 container.scrollLeft += scrollAmount
 51 |             })
 52 | 
 53 |             event.preventDefault()
 54 |         }
 55 | 
 56 |         return (
 57 |             <>
 58 |                 <CodeMirror
 59 |                     value={query}
 60 |                     options={{
 61 |                         mode: "sql",
 62 |                         theme: "lucario",
 63 |                         lineNumbers: true,
 64 |                         extraKeys: {
 65 |                             "Cmd-Enter": (cm: any) => {
 66 |                                 onRunQuery(cm.getValue())
 67 |                             },
 68 |                             "Ctrl-Enter": (cm: any) => {
 69 |                                 onRunQuery(cm.getValue())
 70 |                             }
 71 |                         }
 72 |                     }}
 73 |                     onBeforeChange={handleChange}
 74 |                     className="w-full max-h-32 text-sm resize-none overflow-auto mb-3"
 75 |                 />
 76 |                 {views.length > 0 && (
 77 |                     <div className="mb-4">
 78 |                         <label className="block text-sm font-medium text-slate-800 mb-2">
 79 |                             Tables
 80 |                         </label>
 81 |                         <div
 82 |                             className="overflow-x-auto pb-2"
 83 |                             onWheel={handleWheel}
 84 |                             style={{
 85 |                                 scrollbarWidth: "none",
 86 |                                 msOverflowStyle: "none",
 87 |                                 WebkitOverflowScrolling: "touch",
 88 |                                 maskImage:
 89 |                                     "linear-gradient(to right, transparent, black 8px, black calc(100% - 8px), transparent)",
 90 |                                 WebkitMaskImage:
 91 |                                     "linear-gradient(to right, transparent, black 8px, black calc(100% - 8px), transparent)"
 92 |                             }}>
 93 |                             <div className="flex gap-1 pb-2 whitespace-nowrap">
 94 |                                 {views.map((view) => (
 95 |                                     <Badge
 96 |                                         key={view.view_name}
 97 |                                         variant="secondary"
 98 |                                         className="text-xs cursor-pointer"
 99 |                                         onClick={() =>
100 |                                             handleTableClick(view.view_name)
101 |                                         }>
102 |                                         {view.name}
103 |                                     </Badge>
104 |                                 ))}
105 |                             </div>
106 |                         </div>
107 |                     </div>
108 |                 )}
109 |                 {isRunning ? (
110 |                     <Button
111 |                         onClick={onCancelQuery}
112 |                         className="w-full"
113 |                         variant="outline"
114 |                         disabled={isCancelling}>
115 |                         <ReloadIcon className="mr-2 h-4 w-4 animate-[spin_0.5s_linear_infinite]" />
116 |                         {isCancelling ? "Cancelling..." : "Cancel Query"}
117 |                     </Button>
118 |                 ) : isLoading ? (
119 |                     <Button className="w-full" variant="outline" disabled>
120 |                         <ReloadIcon className="mr-2 h-4 w-4 animate-[spin_0.5s_linear_infinite]" />
121 |                         Loading Datasets...
122 |                     </Button>
123 |                 ) : (
124 |                     <Button
125 |                         onClick={() => onRunQuery(query)}
126 |                         className="w-full"
127 |                         variant="outline">
128 |                         Run Query
129 |                         <CommandEnter />
130 |                     </Button>
131 |                 )}
132 |             </>
133 |         )
134 |     }
135 | )
136 | 
137 | QueryInput.displayName = "QueryInput"
138 | export default QueryInput
139 | 


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | import * as React from "react"
 4 | 
 5 | const badgeVariants = cva(
 6 |     "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 7 |     {
 8 |         variants: {
 9 |             variant: {
10 |                 default:
11 |                     "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
12 |                 secondary:
13 |                     "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
14 |                 destructive:
15 |                     "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
16 |                 outline: "text-foreground"
17 |             }
18 |         },
19 |         defaultVariants: {
20 |             variant: "default"
21 |         }
22 |     }
23 | )
24 | 
25 | export interface BadgeProps
26 |     extends React.HTMLAttributes<HTMLDivElement>,
27 |         VariantProps<typeof badgeVariants> {}
28 | 
29 | function Badge({ className, variant, ...props }: BadgeProps) {
30 |     return (
31 |         <div className={cn(badgeVariants({ variant }), className)} {...props} />
32 |     )
33 | }
34 | 
35 | export { Badge, badgeVariants }
36 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | import * as React from "react"
 5 | 
 6 | const buttonVariants = cva(
 7 |     "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 8 |     {
 9 |         variants: {
10 |             variant: {
11 |                 default:
12 |                     "bg-primary text-primary-foreground hover:bg-primary/90",
13 |                 destructive:
14 |                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |                 outline:
16 |                     "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |                 secondary:
18 |                     "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |                 ghost: "hover:bg-accent hover:text-accent-foreground",
20 |                 link: "text-primary underline-offset-4 hover:underline"
21 |             },
22 |             size: {
23 |                 default: "h-10 px-4 py-2",
24 |                 sm: "h-9 rounded-md px-3",
25 |                 lg: "h-11 rounded-md px-8",
26 |                 icon: "h-10 w-10"
27 |             }
28 |         },
29 |         defaultVariants: {
30 |             variant: "default",
31 |             size: "default"
32 |         }
33 |     }
34 | )
35 | 
36 | export interface ButtonProps
37 |     extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |         VariantProps<typeof buttonVariants> {
39 |     asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |     ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |         const Comp = asChild ? Slot : "button"
45 |         return (
46 |             <Comp
47 |                 className={cn(buttonVariants({ variant, size, className }))}
48 |                 ref={ref}
49 |                 {...props}
50 |             />
51 |         )
52 |     }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 3 | import * as React from "react"
 4 | 
 5 | const HoverCard = HoverCardPrimitive.Root
 6 | 
 7 | const HoverCardTrigger = HoverCardPrimitive.Trigger
 8 | 
 9 | const HoverCardContent = React.forwardRef<
10 |     React.ElementRef<typeof HoverCardPrimitive.Content>,
11 |     React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
12 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
13 |     <HoverCardPrimitive.Content
14 |         ref={ref}
15 |         align={align}
16 |         sideOffset={sideOffset}
17 |         className={cn(
18 |             "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
19 |             className
20 |         )}
21 |         {...props}
22 |     />
23 | ))
24 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
25 | 
26 | export { HoverCard, HoverCardTrigger, HoverCardContent }
27 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | import * as React from "react"
 3 | 
 4 | export interface InputProps
 5 |     extends React.InputHTMLAttributes<HTMLInputElement> {}
 6 | 
 7 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 8 |     ({ className, type, ...props }, ref) => {
 9 |         return (
10 |             <input
11 |                 type={type}
12 |                 className={cn(
13 |                     "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |                     className
15 |                 )}
16 |                 ref={ref}
17 |                 {...props}
18 |             />
19 |         )
20 |     }
21 | )
22 | Input.displayName = "Input"
23 | 
24 | export { Input }
25 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | import * as React from "react"
 5 | 
 6 | const labelVariants = cva(
 7 |     "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 8 | )
 9 | 
10 | const Label = React.forwardRef<
11 |     React.ElementRef<typeof LabelPrimitive.Root>,
12 |     React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
13 |         VariantProps<typeof labelVariants>
14 | >(({ className, ...props }, ref) => (
15 |     <LabelPrimitive.Root
16 |         ref={ref}
17 |         className={cn(labelVariants(), className)}
18 |         {...props}
19 |     />
20 | ))
21 | Label.displayName = LabelPrimitive.Root.displayName
22 | 
23 | export { Label }
24 | 


--------------------------------------------------------------------------------
/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "next-themes"
 2 | import { Toaster as Sonner } from "sonner"
 3 | 
 4 | type ToasterProps = React.ComponentProps<typeof Sonner>
 5 | 
 6 | const Toaster = ({ ...props }: ToasterProps) => {
 7 |     const { theme = "system" } = useTheme()
 8 | 
 9 |     return (
10 |         <Sonner
11 |             theme={theme as ToasterProps["theme"]}
12 |             className="toaster group"
13 |             toastOptions={{
14 |                 classNames: {
15 |                     toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
16 |                     description: "group-[.toast]:text-muted-foreground",
17 |                     actionButton:
18 |                         "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
19 |                     cancelButton:
20 |                         "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
21 |                 }
22 |             }}
23 |             {...props}
24 |         />
25 |     )
26 | }
27 | 
28 | export { Toaster }
29 | 


--------------------------------------------------------------------------------
/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 3 | import * as React from "react"
 4 | 
 5 | const Switch = React.forwardRef<
 6 |     React.ElementRef<typeof SwitchPrimitives.Root>,
 7 |     React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 8 | >(({ className, ...props }, ref) => (
 9 |     <SwitchPrimitives.Root
10 |         className={cn(
11 |             "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
12 |             className
13 |         )}
14 |         {...props}
15 |         ref={ref}>
16 |         <SwitchPrimitives.Thumb
17 |             className={cn(
18 |                 "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
19 |             )}
20 |         />
21 |     </SwitchPrimitives.Root>
22 | ))
23 | Switch.displayName = SwitchPrimitives.Root.displayName
24 | 
25 | export { Switch }
26 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | import * as React from "react"
 3 | 
 4 | export interface TextareaProps
 5 |     extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 6 | 
 7 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 8 |     ({ className, ...props }, ref) => {
 9 |         return (
10 |             <textarea
11 |                 className={cn(
12 |                     "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
13 |                     className
14 |                 )}
15 |                 ref={ref}
16 |                 {...props}
17 |             />
18 |         )
19 |     }
20 | )
21 | Textarea.displayName = "Textarea"
22 | 
23 | export { Textarea }
24 | 


--------------------------------------------------------------------------------
/hooks/useDuckDB.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react"
 2 | 
 3 | import { DuckDBClient } from "../services/DuckDBClient"
 4 | import type { DuckDBClientConfig } from "../services/DuckDBClient"
 5 | 
 6 | const useDuckDB = (config: DuckDBClientConfig = {}) => {
 7 |     const [client, setClient] = useState<DuckDBClient | null>(null)
 8 |     const [loading, setLoading] = useState(true)
 9 | 
10 |     useEffect(() => {
11 |         let isMounted = true
12 | 
13 |         const initClient = async () => {
14 |             setLoading(true)
15 |             if (client) {
16 |                 await client.close().catch((error) => {
17 |                     console.error(
18 |                         "Error closing previous DuckDB client:",
19 |                         error
20 |                     )
21 |                 })
22 |             }
23 | 
24 |             try {
25 |                 const newClient = new DuckDBClient(config)
26 |                 await newClient.initialize("next")
27 |                 if (isMounted) {
28 |                     setClient(newClient)
29 |                     setLoading(false)
30 |                 }
31 |             } catch (error) {
32 |                 console.error("Error initializing DuckDB client:", error)
33 |                 if (isMounted) {
34 |                     setLoading(false)
35 |                 }
36 |             }
37 |         }
38 | 
39 |         initClient()
40 | 
41 |         return () => {
42 |             isMounted = false
43 |             if (client) {
44 |                 client.close().catch((error) => {
45 |                     console.error("Error closing DuckDB client:", error)
46 |                 })
47 |             }
48 |         }
49 |     }, [JSON.stringify(config)]) // Reinitialize when config changes
50 | 
51 |     return { client, loading }
52 | }
53 | 
54 | export { DuckDBClient, useDuckDB }
55 | 


--------------------------------------------------------------------------------
/hooks/useParquetInfo.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     getDatasetFromURL,
 3 |     getNameFilesAndConfig,
 4 |     getParquetInfo
 5 | } from "@/lib/datasets"
 6 | import type { DuckDBClient } from "@/services/DuckDBClient"
 7 | import type { ParquetInfo } from "@/types/parquet"
 8 | import { useEffect, useState } from "react"
 9 | 
10 | export const useParquetInfo = (
11 |     client: DuckDBClient | null,
12 |     apiToken: string | null,
13 |     loading: boolean,
14 |     loadViewsOnStartup: boolean
15 | ): { views: ParquetInfo[]; viewsLoaded: boolean; error: string | null } => {
16 |     const [views, setViews] = useState<ParquetInfo[]>([])
17 |     const [viewsLoaded, setViewsLoaded] = useState<boolean>(false)
18 |     const [error, setError] = useState<string | null>(null)
19 | 
20 |     useEffect(() => {
21 |         const fetchParquetInfo = async () => {
22 |             if (!client || loading || !loadViewsOnStartup) return
23 | 
24 |             setViewsLoaded(false)
25 |             setError(null)
26 | 
27 |             try {
28 |                 const dataset = getDatasetFromURL(window.location.href)
29 |                 const {
30 |                     data,
31 |                     statusCode,
32 |                     error: apiError
33 |                 } = await getParquetInfo(dataset, apiToken)
34 | 
35 |                 // user hasn't set their API token
36 |                 if (statusCode === 401) {
37 |                     throw new Error(
38 |                         "Please set your Hugging Face API token to access this dataset."
39 |                     )
40 |                 }
41 |                 if (apiError || !data) {
42 |                     throw new Error(
43 |                         "The explorer is not available for this dataset."
44 |                     )
45 |                 }
46 | 
47 |                 const views = getNameFilesAndConfig(data.parquet_files).reduce(
48 |                     (acc, { name, files }) => ({
49 |                         ...acc,
50 |                         [name]: files.map((file) => file.url)
51 |                     }),
52 |                     {}
53 |                 )
54 | 
55 |                 const viewInfo = await client.loadConfig({ views })
56 |                 setViews(viewInfo)
57 |             } catch (err) {
58 |                 setError(
59 |                     err.message ||
60 |                         "The explorer is not available for this dataset."
61 |                 )
62 |             } finally {
63 |                 setViewsLoaded(true)
64 |             }
65 |         }
66 | 
67 |         fetchParquetInfo()
68 |     }, [client, loading, loadViewsOnStartup])
69 | 
70 |     return { views, viewsLoaded, error }
71 | }
72 | 


--------------------------------------------------------------------------------
/lib/datasets.test.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from "@jest/globals"
  2 | 
  3 | import { getNameFilesAndConfig } from "./datasets"
  4 | 
  5 | describe("getNameFilesAndConfig", () => {
  6 |     const mockParquetFiles = [
  7 |         {
  8 |             dataset: "ibm/duorc",
  9 |             config: "ParaphraseRC",
 10 |             split: "test",
 11 |             url: "https://huggingface.co/datasets/ibm/duorc/resolve/refs%2Fconvert%2Fparquet/ParaphraseRC/test/0000.parquet",
 12 |             filename: "0000.parquet",
 13 |             size: 6136591
 14 |         },
 15 |         {
 16 |             dataset: "ibm/duorc",
 17 |             config: "ParaphraseRC",
 18 |             split: "train",
 19 |             url: "https://huggingface.co/datasets/ibm/duorc/resolve/refs%2Fconvert%2Fparquet/ParaphraseRC/train/0000.parquet",
 20 |             filename: "0000.parquet",
 21 |             size: 26005668
 22 |         },
 23 |         {
 24 |             dataset: "ibm/duorc",
 25 |             config: "ParaphraseRC",
 26 |             split: "validation",
 27 |             url: "https://huggingface.co/datasets/ibm/duorc/resolve/refs%2Fconvert%2Fparquet/ParaphraseRC/validation/0000.parquet",
 28 |             filename: "0000.parquet",
 29 |             size: 5566868
 30 |         },
 31 |         {
 32 |             dataset: "ibm/duorc",
 33 |             config: "SelfRC",
 34 |             split: "test",
 35 |             url: "https://huggingface.co/datasets/ibm/duorc/resolve/refs%2Fconvert%2Fparquet/SelfRC/test/0000.parquet",
 36 |             filename: "0000.parquet",
 37 |             size: 3035736
 38 |         },
 39 |         {
 40 |             dataset: "ibm/duorc",
 41 |             config: "SelfRC",
 42 |             split: "train",
 43 |             url: "https://huggingface.co/datasets/ibm/duorc/resolve/refs%2Fconvert%2Fparquet/SelfRC/train/0000.parquet",
 44 |             filename: "0000.parquet",
 45 |             size: 14851720
 46 |         },
 47 |         {
 48 |             dataset: "ibm/duorc",
 49 |             config: "SelfRC",
 50 |             split: "validation",
 51 |             url: "https://huggingface.co/datasets/ibm/duorc/resolve/refs%2Fconvert%2Fparquet/SelfRC/validation/0000.parquet",
 52 |             filename: "0000.parquet",
 53 |             size: 3114390
 54 |         }
 55 |     ]
 56 | 
 57 |     it("should correctly group files by config and split", () => {
 58 |         const result = getNameFilesAndConfig(mockParquetFiles)
 59 | 
 60 |         expect(result).toHaveLength(8)
 61 | 
 62 |         // Check config-split combinations
 63 |         expect(result).toContainEqual({
 64 |             name: "ParaphraseRC/test",
 65 |             files: [mockParquetFiles[0]]
 66 |         })
 67 |         expect(result).toContainEqual({
 68 |             name: "ParaphraseRC/train",
 69 |             files: [mockParquetFiles[1]]
 70 |         })
 71 |         expect(result).toContainEqual({
 72 |             name: "ParaphraseRC/validation",
 73 |             files: [mockParquetFiles[2]]
 74 |         })
 75 |         expect(result).toContainEqual({
 76 |             name: "SelfRC/test",
 77 |             files: [mockParquetFiles[3]]
 78 |         })
 79 |         expect(result).toContainEqual({
 80 |             name: "SelfRC/train",
 81 |             files: [mockParquetFiles[4]]
 82 |         })
 83 |         expect(result).toContainEqual({
 84 |             name: "SelfRC/validation",
 85 |             files: [mockParquetFiles[5]]
 86 |         })
 87 | 
 88 |         // Check config views
 89 |         expect(result).toContainEqual({
 90 |             name: "ParaphraseRC",
 91 |             files: [
 92 |                 mockParquetFiles[0],
 93 |                 mockParquetFiles[1],
 94 |                 mockParquetFiles[2]
 95 |             ]
 96 |         })
 97 |         expect(result).toContainEqual({
 98 |             name: "SelfRC",
 99 |             files: [
100 |                 mockParquetFiles[3],
101 |                 mockParquetFiles[4],
102 |                 mockParquetFiles[5]
103 |             ]
104 |         })
105 | 
106 |         // Check sorting
107 |         expect(result[0].name).toBe("ParaphraseRC")
108 |         expect(result[1].name).toBe("ParaphraseRC/test")
109 |         expect(result[2].name).toBe("ParaphraseRC/train")
110 |         expect(result[3].name).toBe("ParaphraseRC/validation")
111 |         expect(result[4].name).toBe("SelfRC")
112 |         expect(result[5].name).toBe("SelfRC/test")
113 |         expect(result[6].name).toBe("SelfRC/train")
114 |         expect(result[7].name).toBe("SelfRC/validation")
115 |     })
116 | 
117 |     it("should handle empty input", () => {
118 |         const result = getNameFilesAndConfig([])
119 |         expect(result).toEqual([])
120 |     })
121 | })
122 | 


--------------------------------------------------------------------------------
/lib/datasets.ts:
--------------------------------------------------------------------------------
  1 | import axios from "axios"
  2 | 
  3 | interface ParquetFile {
  4 |     dataset: string
  5 |     config: string
  6 |     split: string
  7 |     url: string
  8 |     filename: string
  9 |     size: number
 10 | }
 11 | 
 12 | interface ParquetResponse {
 13 |     parquet_files: ParquetFile[]
 14 |     partial: boolean
 15 |     pending?: string[]
 16 |     failed?: string[]
 17 | }
 18 | 
 19 | interface NameFilesInfo {
 20 |     name: string
 21 |     files: ParquetFile[]
 22 | }
 23 | 
 24 | /*
 25 | We want to group the parquet files by config and split, and then by config
 26 | so we can create views for each config and split
 27 | */
 28 | export const getNameFilesAndConfig = (
 29 |     parquetFiles: ParquetFile[]
 30 | ): NameFilesInfo[] => {
 31 |     const result: NameFilesInfo[] = []
 32 |     const configMap: Record<string, ParquetFile[]> = {}
 33 | 
 34 |     parquetFiles.forEach((file) => {
 35 |         const configSplitName = `${file.config}/${file.split}`
 36 |         const configName = file.config
 37 | 
 38 |         // Add to config-split combination
 39 |         const existingConfigSplit = result.find(
 40 |             (entry) => entry.name === configSplitName
 41 |         )
 42 |         if (existingConfigSplit) {
 43 |             existingConfigSplit.files.push(file)
 44 |         } else {
 45 |             result.push({ name: configSplitName, files: [file] })
 46 |         }
 47 | 
 48 |         if (!configMap[configName]) {
 49 |             configMap[configName] = []
 50 |         }
 51 |         configMap[configName].push(file)
 52 |     })
 53 | 
 54 |     // Add config entries to the result list
 55 |     Object.entries(configMap).forEach(([config, files]) => {
 56 |         result.push({ name: config, files })
 57 |     })
 58 | 
 59 |     return result.sort((a, b) => a.name.localeCompare(b.name))
 60 | }
 61 | export async function getParquetInfo(
 62 |     dataset: string,
 63 |     apiToken?: string
 64 | ): Promise<{
 65 |     data: ParquetResponse | null
 66 |     statusCode: number
 67 |     error?: string
 68 | }> {
 69 |     const API_URL = `https://datasets-server.huggingface.co/parquet?dataset=${dataset}`
 70 | 
 71 |     try {
 72 |         const config = apiToken
 73 |             ? { headers: { Authorization: `Bearer ${apiToken}` } }
 74 |             : {}
 75 |         const response = await axios.get<ParquetResponse>(API_URL, config)
 76 |         return {
 77 |             data: response.data,
 78 |             statusCode: response.status
 79 |         }
 80 |     } catch (error) {
 81 |         if (axios.isAxiosError(error)) {
 82 |             return {
 83 |                 data: null,
 84 |                 statusCode: error.response?.status || 500,
 85 |                 error: error.message
 86 |             }
 87 |         }
 88 |         return {
 89 |             data: null,
 90 |             statusCode: 500,
 91 |             error: "An unexpected error occurred"
 92 |         }
 93 |     }
 94 | }
 95 | 
 96 | /*
 97 |     Extract the dataset name from the URL
 98 | */
 99 | export const getDatasetFromURL = (url: string): string | undefined => {
100 |     const regex = /https:\/\/huggingface\.co\/datasets\/([^\/]+)\/([^\/]+)/
101 |     const match = url.match(regex)
102 |     if (match && match[1] && match[2]) {
103 |         return `${match[1]}/${match[2]}`
104 |     }
105 |     return undefined
106 | }
107 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |     return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/media/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cfahlgren1/hf-data-explorer/75a863fc9b4d5453641e597a93f284964bd4be1f/media/screenshot.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "data-explorer",
 3 |     "displayName": "Hugging Face Data Explorer",
 4 |     "version": "0.0.6",
 5 |     "description": "Explore data from Hugging Face datasets in your browser",
 6 |     "author": "Caleb Fahlgren <cfahlgren1@gmail.com>",
 7 |     "scripts": {
 8 |         "dev": "plasmo dev",
 9 |         "build": "plasmo build",
10 |         "package": "plasmo package",
11 |         "pretty": "prettier --write .",
12 |         "prepare": "husky install",
13 |         "test": "jest"
14 |     },
15 |     "lint-staged": {
16 |         "**/*.{js,jsx,ts,tsx,json,md}": [
17 |             "pnpm run pretty"
18 |         ]
19 |     },
20 |     "dependencies": {
21 |         "@babel/preset-env": "^7.24.7",
22 |         "@duckdb/duckdb-wasm": "1.28.1-dev106.0",
23 |         "@plasmohq/messaging": "^0.6.2",
24 |         "@plasmohq/storage": "^1.11.0",
25 |         "@radix-ui/react-hover-card": "^1.1.1",
26 |         "@radix-ui/react-icons": "^1.3.0",
27 |         "@radix-ui/react-label": "^2.1.0",
28 |         "@radix-ui/react-slot": "^1.1.0",
29 |         "@radix-ui/react-switch": "^1.1.0",
30 |         "@testing-library/react-hooks": "^8.0.1",
31 |         "ag-grid-community": "^31.3.2",
32 |         "ag-grid-react": "^31.3.2",
33 |         "axios": "^1.7.2",
34 |         "class-variance-authority": "^0.7.0",
35 |         "clsx": "^2.1.1",
36 |         "husky": "^9.0.11",
37 |         "jest": "^29.7.0",
38 |         "lint-staged": "^15.2.7",
39 |         "lucide-react": "^0.396.0",
40 |         "next-themes": "^0.3.0",
41 |         "plasmo": "0.88.0",
42 |         "react": "18.2.0",
43 |         "react-codemirror2": "^8.0.0",
44 |         "react-dom": "18.2.0",
45 |         "react-icons": "^5.2.1",
46 |         "sonner": "^1.5.0",
47 |         "tailwind-merge": "^2.3.0",
48 |         "tailwindcss-animate": "^1.0.7"
49 |     },
50 |     "devDependencies": {
51 |         "@babel/preset-typescript": "^7.24.7",
52 |         "@ianvs/prettier-plugin-sort-imports": "4.1.1",
53 |         "@jest/globals": "^29.7.0",
54 |         "@types/chrome": "0.0.258",
55 |         "@types/node": "20.11.5",
56 |         "@types/react": "18.2.48",
57 |         "@types/react-dom": "18.2.18",
58 |         "@types/webextension-polyfill": "^0.10.7",
59 |         "autoprefixer": "^10.4.19",
60 |         "https-browserify": "^1.0.0",
61 |         "husky": "^8.0.0",
62 |         "os-browserify": "^0.3.0",
63 |         "path-browserify": "^1.0.0",
64 |         "postcss": "^8.4.38",
65 |         "prettier": "3.2.4",
66 |         "stream-browserify": "^3.0.0",
67 |         "stream-http": "^3.1.0",
68 |         "tailwindcss": "^3.4.4",
69 |         "ts-jest": "^29.1.5",
70 |         "typescript": "5.3.3",
71 |         "util": "^0.12.3"
72 |     },
73 |     "manifest": {
74 |         "host_permissions": [
75 |             "https://huggingface.co/datasets/*"
76 |         ],
77 |         "content_security_policy": {
78 |             "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
79 |         }
80 |     },
81 |     "contributors": [
82 |         "louisgv"
83 |     ]
84 | }
85 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('postcss').ProcessOptions}
 3 |  */
 4 | module.exports = {
 5 |     plugins: {
 6 |         tailwindcss: {},
 7 |         autoprefixer: {}
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/services/DuckDBClient.ts:
--------------------------------------------------------------------------------
  1 | import type { ParquetInfo } from "@/types/parquet"
  2 | import * as duckdb from "@duckdb/duckdb-wasm"
  3 | 
  4 | export interface DuckDBClientConfig {
  5 |     views?: { [key: string]: string[] }
  6 | }
  7 | 
  8 | type SchemaField = {
  9 |     name: string
 10 |     type: string
 11 |     databaseType: string
 12 | }
 13 | 
 14 | function sanitizeViewName(name: string): string {
 15 |     // Replace invalid characters with underscores
 16 |     let sanitized = name.replace(/[^a-zA-Z0-9_]/g, "_")
 17 | 
 18 |     // Add 'v_' prefix if the name starts with a number
 19 |     if (/^\d/.test(sanitized)) {
 20 |         sanitized = "v_" + sanitized
 21 |     }
 22 | 
 23 |     sanitized = sanitized.toLowerCase()
 24 | 
 25 |     return sanitized
 26 | }
 27 | 
 28 | export class DuckDBClient {
 29 |     private db: duckdb.AsyncDuckDB | null = null
 30 |     private currentConnection: duckdb.AsyncDuckDBConnection | null = null
 31 |     private currentResultSet: any = null
 32 |     private isQueryRunning: boolean = false
 33 |     private isCancelling: boolean = false
 34 | 
 35 |     constructor(private config: DuckDBClientConfig) {}
 36 | 
 37 |     async initialize(tag: "latest" | "next" = "latest"): Promise<void> {
 38 |         const CDN_BASE = `https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@${tag}`
 39 | 
 40 |         const JSDELIVR_BUNDLES = {
 41 |             mvp: {
 42 |                 mainModule: `${CDN_BASE}/dist/duckdb-mvp.wasm`,
 43 |                 mainWorker: `${CDN_BASE}/dist/duckdb-browser-mvp.worker.js`
 44 |             },
 45 |             eh: {
 46 |                 mainModule: `${CDN_BASE}/dist/duckdb-eh.wasm`,
 47 |                 mainWorker: `${CDN_BASE}/dist/duckdb-browser-eh.worker.js`
 48 |             }
 49 |         }
 50 | 
 51 |         const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES)
 52 | 
 53 |         const worker_url = URL.createObjectURL(
 54 |             new Blob([`importScripts("${bundle.mainWorker!}");`], {
 55 |                 type: "text/javascript"
 56 |             })
 57 |         )
 58 | 
 59 |         const worker = new Worker(worker_url)
 60 |         const logger = new duckdb.ConsoleLogger()
 61 |         this.db = new duckdb.AsyncDuckDB(logger, worker)
 62 |         await this.db.instantiate(bundle.mainModule, bundle.pthreadWorker)
 63 |         URL.revokeObjectURL(worker_url)
 64 | 
 65 |         await this.loadConfig(this.config || {})
 66 |     }
 67 | 
 68 |     private async getConnection(): Promise<duckdb.AsyncDuckDBConnection> {
 69 |         if (!this.db) {
 70 |             throw new Error("Database not initialized")
 71 |         }
 72 |         if (!this.currentConnection) {
 73 |             this.currentConnection = await this.db.connect()
 74 |         }
 75 |         return this.currentConnection
 76 |     }
 77 | 
 78 |     async loadConfig(config: DuckDBClientConfig): Promise<ParquetInfo[]> {
 79 |         if (!this.db) {
 80 |             throw new Error("Database not initialized")
 81 |         }
 82 | 
 83 |         const viewInfo: ParquetInfo[] = []
 84 | 
 85 |         if (config.views) {
 86 |             const connection = await this.getConnection()
 87 |             try {
 88 |                 const keywordsResult = await connection.query(
 89 |                     "SELECT keyword_name FROM duckdb_keywords() WHERE keyword_category = 'reserved';"
 90 |                 )
 91 |                 const invalidKeywords = keywordsResult
 92 |                     .toArray()
 93 |                     .map((row) => row.keyword_name)
 94 | 
 95 |                 for (const [viewName, filePaths] of Object.entries(
 96 |                     config.views
 97 |                 )) {
 98 |                     const filePathsString = filePaths
 99 |                         .map((path) => `'${path}'`)
100 |                         .join(", ")
101 | 
102 |                     let sanitizedViewName = sanitizeViewName(viewName)
103 | 
104 |                     // Check if the sanitized name is a duckdb reserved keyword
105 |                     if (invalidKeywords.includes(sanitizedViewName)) {
106 |                         sanitizedViewName += "_view"
107 |                     }
108 | 
109 |                     await connection.query(
110 |                         `CREATE OR REPLACE VIEW ${sanitizedViewName} AS SELECT * FROM read_parquet([${filePathsString}]);`
111 |                     )
112 | 
113 |                     // Get schema information using PRAGMA table_info
114 |                     const schemaResult = await connection.query(
115 |                         `PRAGMA table_info(${sanitizedViewName});`
116 |                     )
117 |                     const schema = schemaResult.toArray().map((row) => ({
118 |                         name: row.name,
119 |                         type: row.type,
120 |                         notnull: row.notnull,
121 |                         dflt_value: row.dflt_value,
122 |                         pk: row.pk
123 |                     }))
124 | 
125 |                     viewInfo.push({
126 |                         name: viewName,
127 |                         view_name: sanitizedViewName,
128 |                         schema: schema
129 |                     })
130 |                 }
131 |             } finally {
132 |                 await connection.close()
133 |                 this.currentConnection = null
134 |             }
135 |         }
136 |         return viewInfo
137 |     }
138 | 
139 |     async queryStream(query: string, params?: any[]) {
140 |         if (this.isQueryRunning) {
141 |             throw new Error("A query is already running")
142 |         }
143 | 
144 |         this.isQueryRunning = true
145 |         const conn = await this.getConnection()
146 | 
147 |         try {
148 |             let resultSet
149 |             if (params?.length) {
150 |                 const stmt = await conn.prepare(query)
151 |                 resultSet = await stmt.send(...params)
152 |             } else {
153 |                 resultSet = await conn.send(query)
154 |             }
155 | 
156 |             this.currentResultSet = resultSet
157 | 
158 |             // Read the first batch to get the schema
159 |             const firstBatch = await resultSet.next()
160 |             let schema: SchemaField[] = []
161 | 
162 |             if (firstBatch && !firstBatch.done && firstBatch.value.schema) {
163 |                 schema = firstBatch.value.schema.fields.map((field) => ({
164 |                     name: field.name,
165 |                     databaseType: String(field.type)
166 |                 }))
167 |             }
168 | 
169 |             return {
170 |                 schema,
171 |                 async *readRows() {
172 |                     if (firstBatch && !firstBatch.done) {
173 |                         yield firstBatch.value
174 |                             .toArray()
175 |                             .map((row) => row.toJSON())
176 |                     }
177 | 
178 |                     while (true) {
179 |                         const batch = await resultSet.next()
180 |                         if (batch.done) break
181 |                         yield batch.value.toArray().map((row) => row.toJSON())
182 |                     }
183 |                 }
184 |             }
185 |         } finally {
186 |             this.isQueryRunning = false
187 |         }
188 |     }
189 | 
190 |     async cancelQuery(): Promise<void> {
191 |         if (this.currentConnection && this.isQueryRunning) {
192 |             this.isCancelling = true
193 |             try {
194 |                 await this.currentConnection.cancelSent()
195 |             } finally {
196 |                 // Clean up after cancellation
197 |                 await this.currentConnection.close()
198 |                 this.currentConnection = null
199 |                 this.isQueryRunning = false
200 |                 this.isCancelling = false
201 |                 this.currentResultSet = null
202 |             }
203 |         }
204 |     }
205 | 
206 |     getQueryStatus(): { isRunning: boolean; isCancelling: boolean } {
207 |         return {
208 |             isRunning: this.isQueryRunning,
209 |             isCancelling: this.isCancelling
210 |         }
211 |     }
212 | 
213 |     async close(): Promise<void> {
214 |         // Close the current connection if it exists
215 |         if (this.currentConnection) {
216 |             await this.currentConnection.close()
217 |             this.currentConnection = null
218 |         }
219 |         // Terminate the DuckDB instance if it exists
220 |         if (this.db) {
221 |             await this.db.terminate()
222 |             this.db = null
223 |         }
224 |     }
225 | 
226 |     async getTables(): Promise<string[]> {
227 |         if (!this.db) {
228 |             throw new Error("Database not initialized")
229 |         }
230 | 
231 |         const conn = await this.getConnection()
232 |         try {
233 |             const result = await conn.query("PRAGMA SHOW_TABLES")
234 |             return result.toArray().map((row) => row.name as string)
235 |         } finally {
236 |             await this.currentConnection.close()
237 |             this.currentConnection = null
238 |         }
239 |     }
240 | }
241 | 


--------------------------------------------------------------------------------
/src/content.tsx:
--------------------------------------------------------------------------------
 1 | // CSS imports
 2 | import cssText from "data-text:~/styles.css"
 3 | import agCSS from "data-text:ag-grid-community/styles/ag-grid.css"
 4 | import agTheme from "data-text:ag-grid-community/styles/ag-theme-quartz.css"
 5 | import type { PlasmoCSConfig } from "plasmo"
 6 | import React, { useEffect, useState } from "react"
 7 | import { FiMaximize2 } from "react-icons/fi"
 8 | 
 9 | import "ag-grid-community/styles/ag-grid.css"
10 | import "ag-grid-community/styles/ag-theme-quartz.css"
11 | import "./styles.css"
12 | 
13 | import { useStorage } from "@plasmohq/storage/hook"
14 | 
15 | import Explorer from "./explorer"
16 | 
17 | export const config: PlasmoCSConfig = {
18 |     matches: ["https://huggingface.co/datasets/*/*"]
19 | }
20 | 
21 | export const getStyle = () => {
22 |     const style = document.createElement("style")
23 |     style.textContent = cssText + agCSS + agTheme
24 |     return style
25 | }
26 | 
27 | const Content = () => {
28 |     const [showExplorer, setShowExplorer] = useState(false)
29 |     const [loadViewsOnStartup, setLoadViewsOnStartup] = useStorage(
30 |         "loadViewsOnStartup",
31 |         (v) => (v === undefined ? true : v)
32 |     )
33 | 
34 |     useEffect(() => {
35 |         const handleError = (event) => {
36 |             event.preventDefault()
37 |             // ignore context invalidated errors, they are normal
38 |             if (!event.message.includes("Extension context invalidated.")) {
39 |                 console.error(event.message)
40 |             }
41 |         }
42 | 
43 |         window.addEventListener("error", handleError)
44 | 
45 |         return () => {
46 |             window.removeEventListener("error", handleError)
47 |         }
48 |     }, [])
49 | 
50 |     if (showExplorer) {
51 |         return (
52 |             <Explorer
53 |                 onClose={() => setShowExplorer(false)}
54 |                 loadViewsOnStartup={loadViewsOnStartup}
55 |             />
56 |         )
57 |     }
58 | 
59 |     // show minimized explorer button if closed
60 |     return (
61 |         <button
62 |             onClick={() => setShowExplorer(true)}
63 |             className="fixed bottom-10 left-10 bg-slate-800 hover:text-yellow text-white rounded-full p-3 shadow-lg z-50 transition-transform duration-200 ease-in-out hover:scale-110"
64 |             aria-label="Open explorer">
65 |             <FiMaximize2 size={24} />
66 |         </button>
67 |     )
68 | }
69 | 
70 | export default Content
71 | 


--------------------------------------------------------------------------------
/src/explorer.tsx:
--------------------------------------------------------------------------------
  1 | import { DataGrid } from "@/components/data-grid"
  2 | import QueryInput from "@/components/query-input"
  3 | import { useDuckDB } from "@/hooks/useDuckDB"
  4 | import { useParquetInfo } from "@/hooks/useParquetInfo"
  5 | import { useCallback, useEffect, useMemo, useRef, useState } from "react"
  6 | import { FiX } from "react-icons/fi"
  7 | 
  8 | import { useStorage } from "@plasmohq/storage/hook"
  9 | 
 10 | interface RowData {
 11 |     [key: string]: any
 12 | }
 13 | 
 14 | interface ColumnDef {
 15 |     field: string
 16 |     headerName: string
 17 | }
 18 | 
 19 | interface ExplorerProps {
 20 |     onClose: () => void
 21 |     loadViewsOnStartup: boolean
 22 | }
 23 | 
 24 | const Explorer: React.FC<ExplorerProps> = ({ onClose, loadViewsOnStartup }) => {
 25 |     const [rows, setRows] = useState<RowData[]>([])
 26 |     const [columns, setColumns] = useState<ColumnDef[]>([])
 27 |     const [error, setError] = useState<string | null>(null)
 28 |     const { client, loading } = useDuckDB()
 29 |     const [isStreaming, setIsStreaming] = useState<boolean>(false)
 30 |     const [isCancelling, setIsCancelling] = useState<boolean>(false)
 31 |     const streamRef = useRef<AsyncGenerator<RowData[], void, unknown> | null>(
 32 |         null
 33 |     )
 34 |     const rowsRef = useRef<RowData[]>([])
 35 | 
 36 |     const [showViewsError, setShowViewsError] = useState(true)
 37 |     const [apiToken, setApiToken] = useStorage("apiToken")
 38 | 
 39 |     const {
 40 |         views,
 41 |         viewsLoaded,
 42 |         error: viewsError
 43 |     } = useParquetInfo(client, apiToken, loading, loadViewsOnStartup)
 44 | 
 45 |     const [width, setWidth] = useState(480)
 46 |     const [isDragging, setIsDragging] = useState(false)
 47 | 
 48 |     const handleMouseDown = useCallback(() => {
 49 |         setIsDragging(true)
 50 |     }, [])
 51 | 
 52 |     const handleMouseUp = useCallback(() => {
 53 |         setIsDragging(false)
 54 |     }, [])
 55 | 
 56 |     const handleMouseMove = useCallback(
 57 |         (e: MouseEvent) => {
 58 |             if (isDragging) {
 59 |                 const newWidth = e.clientX - 40 // 40px offset for left margin
 60 |                 setWidth(Math.max(384, newWidth)) // Min width: 384px (md)
 61 |             }
 62 |         },
 63 |         [isDragging]
 64 |     )
 65 | 
 66 |     useEffect(() => {
 67 |         document.addEventListener("mousemove", handleMouseMove)
 68 |         document.addEventListener("mouseup", handleMouseUp)
 69 |         return () => {
 70 |             document.removeEventListener("mousemove", handleMouseMove)
 71 |             document.removeEventListener("mouseup", handleMouseUp)
 72 |         }
 73 |     }, [handleMouseMove, handleMouseUp])
 74 | 
 75 |     const runQuery = useCallback(
 76 |         async (query: string) => {
 77 |             if (!client || query.trim() === "" || isStreaming) return
 78 | 
 79 |             setRows([])
 80 |             setColumns([])
 81 |             setError(null)
 82 |             setIsStreaming(true)
 83 |             setShowViewsError(false) // Hide viewsError when a query is run
 84 | 
 85 |             try {
 86 |                 const stream = await client.queryStream(query)
 87 |                 setColumns(
 88 |                     stream.schema.map((field) => ({
 89 |                         field: field.name,
 90 |                         headerName: field.name
 91 |                     }))
 92 |                 )
 93 | 
 94 |                 streamRef.current = stream.readRows()
 95 |                 const { value: firstBatch, done } =
 96 |                     await streamRef.current.next()
 97 | 
 98 |                 if (firstBatch) {
 99 |                     rowsRef.current = firstBatch
100 |                     setRows(firstBatch)
101 |                 }
102 |             } catch (err) {
103 |                 if (
104 |                     err instanceof Error &&
105 |                     err.message !== "query was canceled"
106 |                 ) {
107 |                     setError(err.message)
108 |                 }
109 |             } finally {
110 |                 setIsStreaming(false)
111 |             }
112 |         },
113 |         [client, isStreaming]
114 |     )
115 | 
116 |     const fetchNextBatch = useCallback(async () => {
117 |         if (!streamRef.current) return { rows: [] }
118 | 
119 |         try {
120 |             const { value: nextBatch } = await streamRef.current.next()
121 | 
122 |             if (nextBatch) {
123 |                 rowsRef.current = [...rowsRef.current, ...nextBatch]
124 |                 return { rows: nextBatch }
125 |             }
126 |             return { rows: [] }
127 |         } catch (err) {
128 |             console.error("Error fetching next batch:", err)
129 |             setError("Error fetching next batch of data")
130 |             return { rows: [] }
131 |         }
132 |     }, [])
133 | 
134 |     const handleCancelQuery = useCallback(async () => {
135 |         if (!client) return
136 |         setIsCancelling(true)
137 |         try {
138 |             await client.cancelQuery()
139 |             streamRef.current = null
140 |         } catch (err) {
141 |             console.error("Error cancelling query:", err)
142 |         } finally {
143 |             setIsCancelling(false)
144 |         }
145 |     }, [client])
146 | 
147 |     const memoizedDataGrid = useMemo(
148 |         () =>
149 |             rows.length > 0 && (
150 |                 <DataGrid
151 |                     initialData={{ rows: rowsRef.current, columns }}
152 |                     fetchNextBatch={fetchNextBatch}
153 |                 />
154 |             ),
155 |         [rows.length, columns, fetchNextBatch]
156 |     )
157 | 
158 |     return (
159 |         <div
160 |             className="bg-white border border-slate-200 fixed bottom-10 left-10 rounded-lg shadow-lg z-50 flex flex-col max-h-[80vh]"
161 |             style={{ width: `${width}px` }}>
162 |             <div className="p-4 flex flex-col h-full overflow-auto">
163 |                 <div className="flex-shrink-0">
164 |                     <div className="flex justify-between items-center mb-2">
165 |                         <h1 className="text-xl font-bold text-slate-800">
166 |                             Data Explorer
167 |                         </h1>
168 |                         <button
169 |                             onClick={onClose}
170 |                             className="text-slate-500 hover:text-slate-700"
171 |                             aria-label="Close explorer">
172 |                             <FiX size={20} />
173 |                         </button>
174 |                     </div>
175 |                     <p className="text-xs text-slate-600 mb-3">
176 |                         Query datasets with SQL 🤗
177 |                     </p>
178 |                     <QueryInput
179 |                         onRunQuery={runQuery}
180 |                         isCancelling={isCancelling}
181 |                         isLoading={
182 |                             loading || (loadViewsOnStartup && !viewsLoaded)
183 |                         }
184 |                         isRunning={isStreaming}
185 |                         views={views || []}
186 |                         onCancelQuery={handleCancelQuery}
187 |                     />
188 |                     {(error || (showViewsError && viewsError)) && (
189 |                         <p className="text-xs text-red-500 mt-2">
190 |                             {error || viewsError}
191 |                         </p>
192 |                     )}
193 |                     {
194 |                         // Show a message if there are no views
195 |                         viewsLoaded &&
196 |                             !viewsError &&
197 |                             showViewsError &&
198 |                             views.length === 0 && (
199 |                                 <p className="text-xs italic text-slate-600 mt-2">
200 |                                     Sorry there wasn't a parquet conversion for
201 |                                     this dataset.
202 |                                 </p>
203 |                             )
204 |                     }
205 |                 </div>
206 |                 {memoizedDataGrid}
207 |             </div>
208 |             <div
209 |                 className="absolute top-0 right-0 w-1 h-full cursor-ew-resize bg-slate-100 hover:bg-slate-200"
210 |                 onMouseDown={handleMouseDown}></div>
211 |         </div>
212 |     )
213 | }
214 | 
215 | export default Explorer
216 | 


--------------------------------------------------------------------------------
/src/popup.tsx:
--------------------------------------------------------------------------------
  1 | import "./styles.css"
  2 | 
  3 | import { Button } from "@/components/ui/button"
  4 | import { Label } from "@/components/ui/label"
  5 | import { Switch } from "@/components/ui/switch"
  6 | import React, { useEffect, useState } from "react"
  7 | import { FaGithub } from "react-icons/fa"
  8 | import { FiExternalLink } from "react-icons/fi"
  9 | 
 10 | import { useStorage } from "@plasmohq/storage/hook"
 11 | 
 12 | const DATASETS_URL = "https://huggingface.co/datasets"
 13 | 
 14 | const IndexPopup = () => {
 15 |     const [currentUrl, setCurrentUrl] = useState<string | null>(null)
 16 |     const [loadViewsOnStartup, setLoadViewsOnStartup] =
 17 |         useStorage("loadViewsOnStartup")
 18 | 
 19 |     const [apiToken, setApiToken] = useStorage("apiToken")
 20 | 
 21 |     useEffect(() => {
 22 |         getCurrentTabInfo()
 23 |     }, [])
 24 | 
 25 |     const getCurrentTabInfo = async () => {
 26 |         if (chrome.tabs && chrome.tabs.query) {
 27 |             chrome.tabs.query(
 28 |                 { active: true, currentWindow: true },
 29 |                 async (tabs) => {
 30 |                     if (tabs[0] && tabs[0].url && tabs[0].id) {
 31 |                         setCurrentUrl(tabs[0].url)
 32 |                     }
 33 |                 }
 34 |             )
 35 |         }
 36 |     }
 37 | 
 38 |     const handleSetApiToken = () => {
 39 |         const token = prompt("Enter your Hugging Face API token")
 40 |         if (token) {
 41 |             setApiToken(token)
 42 |             chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
 43 |                 chrome.tabs.reload()
 44 |             })
 45 |         }
 46 |     }
 47 | 
 48 |     return (
 49 |         <div className="p-3 bg-white shadow-lg w-80 rounded-lg flex flex-col items-center justify-center">
 50 |             <h1 className="text-3xl font-bold text-gray-800">Data Explorer</h1>
 51 |             <p>Explore Hugging Face datasets interactively.</p>
 52 |             <div className="flex mt-10 flex-col space-y-4 w-full">
 53 |                 {currentUrl?.startsWith(DATASETS_URL) ? (
 54 |                     currentUrl === DATASETS_URL ? (
 55 |                         <p className="text-lg text-center">
 56 |                             Open a dataset to get started.
 57 |                         </p>
 58 |                     ) : (
 59 |                         <div className="space-y-4 mb-6 w-full">
 60 |                             <div className="bg-gray-100 p-4 rounded-lg shadow-sm">
 61 |                                 <div className="flex items-center space-x-3">
 62 |                                     <Switch
 63 |                                         id="load-views"
 64 |                                         checked={loadViewsOnStartup}
 65 |                                         onCheckedChange={(checked) =>
 66 |                                             setLoadViewsOnStartup(checked)
 67 |                                         }
 68 |                                     />
 69 |                                     <div>
 70 |                                         <Label
 71 |                                             htmlFor="load-views"
 72 |                                             className="text-sm font-medium text-gray-800">
 73 |                                             Load Datasets on Startup
 74 |                                         </Label>
 75 |                                         <p className="text-xs text-gray-500">
 76 |                                             Automatically load configs and
 77 |                                             splits as views on startup
 78 |                                         </p>
 79 |                                     </div>
 80 |                                 </div>
 81 |                             </div>
 82 |                             <div className="bg-gray-100 p-4 text-center rounded-lg shadow-sm">
 83 |                                 <Label className="text-sm font-medium text-gray-800">
 84 |                                     Hugging Face API Token 🤗
 85 |                                 </Label>
 86 |                                 <p className="text-xs text-gray-500 mb-2">
 87 |                                     Add your API token to access private
 88 |                                     datasets.
 89 |                                 </p>
 90 |                                 <Button
 91 |                                     variant="outline"
 92 |                                     className="w-full text-slate-800"
 93 |                                     onClick={handleSetApiToken}>
 94 |                                     {apiToken
 95 |                                         ? "Update API Token"
 96 |                                         : "Set API Token"}
 97 |                                 </Button>
 98 |                             </div>
 99 |                         </div>
100 |                     )
101 |                 ) : (
102 |                     <Button
103 |                         variant="ghost"
104 |                         onClick={() => window.open(DATASETS_URL, "_blank")}>
105 |                         Datasets 🤗 <FiExternalLink className="ml-2" />
106 |                     </Button>
107 |                 )}
108 |             </div>
109 |             <Button
110 |                 variant="link"
111 |                 className="text-xs italic mt-4 text-slate-800"
112 |                 onClick={() =>
113 |                     window.open(
114 |                         "https://github.com/cfahlgren1/hf-data-explorer",
115 |                         "_blank"
116 |                     )
117 |                 }>
118 |                 Contribute <FaGithub className="ml-2" />
119 |             </Button>
120 |         </div>
121 |     )
122 | }
123 | 
124 | export default IndexPopup
125 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | @import "codemirror/lib/codemirror.css";
 2 | @import "codemirror/theme/lucario.css";
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | .CodeMirror {
 8 |     height: 126px;
 9 | }
10 | 
11 | @layer base {
12 |     :root {
13 |         --background: 0 0% 100%;
14 |         --foreground: 222.2 84% 4.9%;
15 | 
16 |         --card: 0 0% 100%;
17 |         --card-foreground: 222.2 84% 4.9%;
18 | 
19 |         --popover: 0 0% 100%;
20 |         --popover-foreground: 222.2 84% 4.9%;
21 | 
22 |         --primary: 222.2 47.4% 11.2%;
23 |         --primary-foreground: 210 40% 98%;
24 | 
25 |         --secondary: 210 40% 96.1%;
26 |         --secondary-foreground: 222.2 47.4% 11.2%;
27 | 
28 |         --muted: 210 40% 96.1%;
29 |         --muted-foreground: 215.4 16.3% 46.9%;
30 | 
31 |         --accent: 210 40% 96.1%;
32 |         --accent-foreground: 222.2 47.4% 11.2%;
33 | 
34 |         --destructive: 0 84.2% 60.2%;
35 |         --destructive-foreground: 210 40% 98%;
36 | 
37 |         --border: 214.3 31.8% 91.4%;
38 |         --input: 214.3 31.8% 91.4%;
39 |         --ring: 222.2 84% 4.9%;
40 | 
41 |         --radius: 0.5rem;
42 |     }
43 | 
44 |     .dark {
45 |         --background: 222.2 84% 4.9%;
46 |         --foreground: 210 40% 98%;
47 | 
48 |         --card: 222.2 84% 4.9%;
49 |         --card-foreground: 210 40% 98%;
50 | 
51 |         --popover: 222.2 84% 4.9%;
52 |         --popover-foreground: 210 40% 98%;
53 | 
54 |         --primary: 210 40% 98%;
55 |         --primary-foreground: 222.2 47.4% 11.2%;
56 | 
57 |         --secondary: 217.2 32.6% 17.5%;
58 |         --secondary-foreground: 210 40% 98%;
59 | 
60 |         --muted: 217.2 32.6% 17.5%;
61 |         --muted-foreground: 215 20.2% 65.1%;
62 | 
63 |         --accent: 217.2 32.6% 17.5%;
64 |         --accent-foreground: 210 40% 98%;
65 | 
66 |         --destructive: 0 62.8% 30.6%;
67 |         --destructive-foreground: 210 40% 98%;
68 | 
69 |         --border: 217.2 32.6% 17.5%;
70 |         --input: 217.2 32.6% 17.5%;
71 |         --ring: 212.7 26.8% 83.9%;
72 |     }
73 | }
74 | 
75 | @layer base {
76 |     * {
77 |         @apply border-border;
78 |     }
79 | 
80 |     body {
81 |         @apply bg-background text-foreground;
82 |     }
83 | }
84 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |     darkMode: ["class"],
 4 |     content: [
 5 |         "./pages/**/*.{ts,tsx}",
 6 |         "./components/**/*.{ts,tsx}",
 7 |         "./app/**/*.{ts,tsx}",
 8 |         "./src/**/*.{ts,tsx}"
 9 |     ],
10 |     prefix: "",
11 |     theme: {
12 |         container: {
13 |             center: true,
14 |             padding: "2rem",
15 |             screens: {
16 |                 "2xl": "1400px"
17 |             }
18 |         },
19 |         extend: {
20 |             colors: {
21 |                 border: "hsl(var(--border))",
22 |                 input: "hsl(var(--input))",
23 |                 ring: "hsl(var(--ring))",
24 |                 background: "hsl(var(--background))",
25 |                 foreground: "hsl(var(--foreground))",
26 |                 primary: {
27 |                     DEFAULT: "hsl(var(--primary))",
28 |                     foreground: "hsl(var(--primary-foreground))"
29 |                 },
30 |                 secondary: {
31 |                     DEFAULT: "hsl(var(--secondary))",
32 |                     foreground: "hsl(var(--secondary-foreground))"
33 |                 },
34 |                 destructive: {
35 |                     DEFAULT: "hsl(var(--destructive))",
36 |                     foreground: "hsl(var(--destructive-foreground))"
37 |                 },
38 |                 muted: {
39 |                     DEFAULT: "hsl(var(--muted))",
40 |                     foreground: "hsl(var(--muted-foreground))"
41 |                 },
42 |                 accent: {
43 |                     DEFAULT: "hsl(var(--accent))",
44 |                     foreground: "hsl(var(--accent-foreground))"
45 |                 },
46 |                 popover: {
47 |                     DEFAULT: "hsl(var(--popover))",
48 |                     foreground: "hsl(var(--popover-foreground))"
49 |                 },
50 |                 card: {
51 |                     DEFAULT: "hsl(var(--card))",
52 |                     foreground: "hsl(var(--card-foreground))"
53 |                 }
54 |             },
55 |             borderRadius: {
56 |                 lg: "var(--radius)",
57 |                 md: "calc(var(--radius) - 2px)",
58 |                 sm: "calc(var(--radius) - 4px)"
59 |             },
60 |             keyframes: {
61 |                 "accordion-down": {
62 |                     from: { height: "0" },
63 |                     to: { height: "var(--radix-accordion-content-height)" }
64 |                 },
65 |                 "accordion-up": {
66 |                     from: { height: "var(--radix-accordion-content-height)" },
67 |                     to: { height: "0" }
68 |                 }
69 |             },
70 |             animation: {
71 |                 "accordion-down": "accordion-down 0.2s ease-out",
72 |                 "accordion-up": "accordion-up 0.2s ease-out"
73 |             }
74 |         }
75 |     },
76 |     plugins: [require("tailwindcss-animate")]
77 | }
78 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "plasmo/templates/tsconfig.base",
 3 |     "exclude": ["node_modules"],
 4 |     "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
 5 |     "compilerOptions": {
 6 |         "paths": {
 7 |             "~*": ["./*"],
 8 |             "@/*": ["./*"]
 9 |         },
10 |         "typeRoots": ["./node_modules/@types", "./types"],
11 |         "baseUrl": "."
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/types/parquet.ts:
--------------------------------------------------------------------------------
 1 | export interface ParquetInfo {
 2 |     name: string
 3 |     view_name: string
 4 |     schema: SchemaField[]
 5 | }
 6 | 
 7 | interface SchemaField {
 8 |     name: string
 9 |     type: string
10 |     notnull: boolean
11 |     dflt_value: string | null
12 |     pk: boolean
13 | }
14 | 


--------------------------------------------------------------------------------