- |
+ |
diff --git a/ui/src/pages/Pivot.jsx b/ui/src/pages/Pivot.jsx
new file mode 100644
index 0000000..02fe9f2
--- /dev/null
+++ b/ui/src/pages/Pivot.jsx
@@ -0,0 +1,155 @@
+import { useEffect, useRef, useState } from 'react'
+import { api } from '../api'
+
+// Fetch all rows for a source (no pagination limit)
+async function fetchAllRows(source) {
+ const res = await api.getViewData(source, 100000, 0)
+ return res.rows || []
+}
+
+let perspectiveLoaded = false
+let perspectivePromise = null
+
+function loadPerspective() {
+ if (perspectivePromise) return perspectivePromise
+ perspectivePromise = (async () => {
+ // Inject theme CSS once
+ if (!document.getElementById('psp-theme')) {
+ const link = document.createElement('link')
+ link.id = 'psp-theme'
+ link.rel = 'stylesheet'
+ link.crossOrigin = 'anonymous'
+ link.href = 'https://cdn.jsdelivr.net/npm/@perspective-dev/viewer/dist/css/themes.css'
+ document.head.appendChild(link)
+ }
+ const [{ default: perspective }] = await Promise.all([
+ import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/@perspective-dev/client@4.4.0/dist/cdn/perspective.js'),
+ import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/@perspective-dev/viewer@4.4.0/dist/cdn/perspective-viewer.js'),
+ import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/@perspective-dev/viewer-datagrid@4.4.0/dist/cdn/perspective-viewer-datagrid.js'),
+ import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/@perspective-dev/viewer-d3fc@4.4.0/dist/cdn/perspective-viewer-d3fc.js'),
+ ])
+ perspectiveLoaded = true
+ return perspective
+ })()
+ return perspectivePromise
+}
+
+const LAYOUT_KEY = (source) => `psp_layout_${source}`
+
+export default function Pivot({ source }) {
+ const viewerRef = useRef()
+ const workerRef = useRef()
+ const [status, setStatus] = useState('idle')
+ const [error, setError] = useState('')
+ const [saved, setSaved] = useState(false)
+
+ useEffect(() => {
+ if (!source) return
+ let cancelled = false
+ setSaved(false)
+
+ async function init() {
+ setStatus('loading')
+ setError('')
+
+ try {
+ const [perspective, rows] = await Promise.all([
+ loadPerspective(),
+ fetchAllRows(source),
+ ])
+ if (cancelled) return
+
+ if (!rows.length) {
+ setStatus('noview')
+ return
+ }
+
+ if (workerRef.current) {
+ try { workerRef.current.terminate() } catch {}
+ }
+
+ const worker = await perspective.worker()
+ if (cancelled) { worker.terminate(); return }
+ workerRef.current = worker
+
+ await worker.table(rows, { name: source })
+ if (cancelled) return
+
+ const viewer = viewerRef.current
+ await viewer.load(worker)
+
+ const saved = localStorage.getItem(LAYOUT_KEY(source))
+ if (saved) {
+ await viewer.restore(JSON.parse(saved))
+ } else {
+ await viewer.restore({ table: source, settings: true })
+ }
+ setStatus('ready')
+ } catch (err) {
+ if (!cancelled) { setStatus('error'); setError(err.message) }
+ }
+ }
+
+ init()
+ return () => { cancelled = true }
+ }, [source])
+
+ async function saveLayout() {
+ const viewer = viewerRef.current
+ if (!viewer) return
+ const layout = await viewer.save()
+ localStorage.setItem(LAYOUT_KEY(source), JSON.stringify(layout))
+ setSaved(true)
+ setTimeout(() => setSaved(false), 2000)
+ }
+
+ function clearLayout() {
+ localStorage.removeItem(LAYOUT_KEY(source))
+ const viewer = viewerRef.current
+ if (viewer) viewer.restore({ table: source, settings: true })
+ }
+
+ if (!source) return Select a source first.
+
+ return (
+
+ {status === 'ready' && (
+
+
+ {localStorage.getItem(LAYOUT_KEY(source)) && (
+
+ )}
+
+ )}
+ {status === 'loading' && (
+
+ )}
+ {status === 'error' && (
+
+ )}
+ {status === 'noview' && (
+
+ No view data — generate a view and transform records first.
+
+ )}
+
+ Loading… }
+ {!loading && viewError && (
+ View error: {viewError} — check field types in Sources.
+ )}
+
{!loading && exists === false && (
No view generated yet. Go to Sources, check fields as In view, then click Generate view.
diff --git a/ui/src/pages/Sources.jsx b/ui/src/pages/Sources.jsx
index 5a63f15..37785b6 100644
--- a/ui/src/pages/Sources.jsx
+++ b/ui/src/pages/Sources.jsx
@@ -1,13 +1,42 @@
import { useState, useEffect, useRef } from 'react'
+import { useSearchParams } from 'react-router-dom'
import { api } from '../api'
const FIELD_TYPES = ['text', 'numeric', 'date']
+function SampleTable({ rows }) {
+ if (!rows || rows.length === 0) return null
+ const cols = Object.keys(rows[0])
+ return (
+
+
+
+
+ {cols.map(c => | {c} | )}
+
+
+
+ {rows.map((row, i) => (
+
+ {cols.map(c => (
+ |
+ {row[c] == null ? — : String(row[c])}
+ |
+ ))}
+
+ ))}
+
+
+
+
{sourceObj ? sourceObj.name : 'Sources'}
@@ -185,16 +238,43 @@ export default function Sources({ source, sources, setSources, setSource }) {
- | Key |
- Origin |
- Type |
- Constraint |
- In view |
- Seq |
+ {[
+ { col: 'key', label: 'Key' },
+ { col: 'origin', label: 'Origin' },
+ { col: 'type', label: 'Type' },
+ { col: 'constraint', label: 'Constraint', center: true },
+ { col: 'inview', label: 'In view', center: true },
+ { col: 'seq', label: 'Seq', center: true },
+ ].map(({ col, label, center }) => (
+ setFieldSort(s => ({ col, dir: s.col === col && s.dir === 'asc' ? 'desc' : 'asc' }))}
+ className={`pb-1 font-medium cursor-pointer select-none hover:text-gray-600 ${center ? 'text-center' : ''}`}
+ >
+ {label}
+
+ {fieldSort.col === col ? (fieldSort.dir === 'asc' ? '▲' : '▼') : '⇅'}
+
+ |
+ ))}
- {availableFields.map(f => {
+ {[...availableFields].sort((a, b) => {
+ const constraintList = constraintFields.split(',').map(s => s.trim())
+ const aSchema = schemaFields.find(sf => sf.name === a.key)
+ const bSchema = schemaFields.find(sf => sf.name === b.key)
+ let av, bv
+ if (fieldSort.col === 'key') { av = a.key; bv = b.key }
+ else if (fieldSort.col === 'origin') { av = a.origins.join(','); bv = b.origins.join(',') }
+ else if (fieldSort.col === 'type') { av = aSchema?.type || ''; bv = bSchema?.type || '' }
+ else if (fieldSort.col === 'constraint') { av = constraintList.includes(a.key) ? 0 : 1; bv = constraintList.includes(b.key) ? 0 : 1 }
+ else if (fieldSort.col === 'inview') { av = aSchema ? 0 : 1; bv = bSchema ? 0 : 1 }
+ else if (fieldSort.col === 'seq') { av = aSchema?.seq ?? 999; bv = bSchema?.seq ?? 999 }
+ if (av < bv) return fieldSort.dir === 'asc' ? -1 : 1
+ if (av > bv) return fieldSort.dir === 'asc' ? 1 : -1
+ return 0
+ }).map(f => {
const isRaw = f.origins.includes('raw')
const constraintChecked = constraintFields.split(',').map(s => s.trim()).includes(f.key)
const schemaEntry = schemaFields.find(sf => sf.name === f.key)
@@ -301,6 +381,7 @@ export default function Sources({ source, sources, setSources, setSource }) {
)}
+
)}
@@ -349,8 +430,14 @@ export default function Sources({ source, sources, setSources, setSource }) {
New source
-
-
+
+
|