Span Data Table

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_217":218,"_219":220},"routes/_app.x.$handle.$name",{"_93":92,"_31":42,"_101":83,"_26":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":24,"_116":117,"_118":55,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","45aa136e-9f1b-11f0-a7af-0224a6c84d84","name","fileType","content","# Span Data Table Component\n\nA React table component that handles span data through message-based communication. The component listens for `postMessage` events and displays span data in a responsive table format.\n\n## Features\n\n- **Message-based data handling**: Listens for `postMessage` events with span data\n- **Flexible schema**: Uses Zod for runtime validation of incoming messages\n- **Theme support**: Light/dark theme switching via settings messages\n- **Read-only mode**: Configurable read-only state\n- **Responsive design**: Mobile-friendly table with overflow handling\n- **Type safety**: Full TypeScript support with proper type inference\n\n## Message Schema\n\nThe component accepts two types of messages:\n\n### Data Messages\n```typescript\n{\n type: 'data',\n data: {\n span_id: string,\n input: unknown,\n output: unknown,\n expected: unknown,\n metadata: unknown | null\n }\n}\n```\n\n### Settings Messages\n```typescript\n{\n type: 'settings',\n settings: {\n theme: 'light' | 'dark',\n readOnly: boolean\n }\n}\n```\n\n## Usage\n\nThe component automatically starts listening for messages when mounted. To send data:\n\n```javascript\n// Send span data\nwindow.postMessage({\n type: 'data',\n data: {\n span_id: 'unique-id',\n input: 'Some input text',\n output: 'Generated output',\n expected: 'Expected output',\n metadata: { additional: 'info' }\n }\n}, '*');\n\n// Update settings\nwindow.postMessage({\n type: 'settings',\n settings: {\n theme: 'dark',\n readOnly: true\n }\n}, '*');\n```\n\n## Demo\n\nThe included demo provides buttons to:\n- Add sample span data\n- Toggle between light/dark themes\n- Toggle read-only mode\n\n## File Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server for serving files\n├── frontend/\n│ ├── components/\n│ │ └── SpanTable.tsx # Main table component\n│ └── index.html # Demo page\n└── README.md\n```\n\n## Key Features\n\n1. **Flexible Data Handling**: The component can handle any data type in the span fields (string, number, object, etc.)\n2. **Safe Rendering**: All values are safely converted to strings for display\n3. **Metadata Formatting**: JSON metadata is pretty-printed for readability\n4. **Responsive Design**: Table scrolls horizontally on smaller screens\n5. **Error Handling**: Invalid messages are logged but don't crash the component\n\n## Technical Details\n\n- Built with React 18.2.0\n- Uses Zod for runtime schema validation\n- Styled with TailwindCSS\n- No external UI library dependencies (custom table components)\n- Fully typed with TypeScript","createdAt",["D",1759359993013],"branchVersion","branchId","c5b5ad30-9f1a-11f0-aa03-0224a6c84d84","id","c5b53b34-9f1a-11f0-aa03-0224a6c84d84","table",["D",1759359778339],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0199a201-a793-711b-b040-d4354de16e25","pinnedFileId","39e1a18c-9f1b-11f0-acbe-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0199a201-a793-711b-b040-d93eb49f4c78","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":51,"_97":98,"_99":24},"branch",{"_13":82,"_31":83,"_40":39,"_84":41,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":42,"_91":92},"isOwned",19,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dpdiliberto","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzVTc4QUJqQzc3V0lLY05ES2RsWnNWRXo5YiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":213,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":214,"_77":215,"_79":216,"_81":24},"tree",[163,165,169,170],"files",[163,164,165,166,167,168,169,170],"counts",{"_153":59,"_154":131,"_155":59,"_156":157,"_158":159},"contents",[123,124,125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_40":147,"_31":148,"_29":149,"_130":-5,"_38":39,"_37":150,"_132":55,"_35":151,"_13":59,"_32":145,"_33":-5,"_23":24,"_135":-5,"_26":152},{"_40":140,"_31":141,"_29":142,"_130":-5,"_38":39,"_37":143,"_132":55,"_35":144,"_13":59,"_32":145,"_33":-5,"_23":24,"_135":-5,"_26":146},{"_40":137,"_31":27,"_29":30,"_130":-5,"_38":39,"_37":14,"_132":24,"_35":138,"_13":59,"_32":20,"_33":34,"_23":24,"_135":-5,"_26":139},{"_40":127,"_31":128,"_29":129,"_130":-5,"_38":39,"_37":131,"_132":55,"_35":133,"_13":59,"_32":134,"_33":102,"_23":24,"_135":-5,"_26":136},"dc3a27c0-9f1a-11f0-a00f-0224a6c84d84","new-file-4156.ts","dc3a28b0-9f1a-11f0-a00f-0224a6c84d84","parentId",1,"latest",["D",1759359816111],"script","label",[128],"45aa12ba-9f1b-11f0-a7af-0224a6c84d84",["D",1759359993013],[27],"296c6800-9f1b-11f0-9265-0224a6c84d84","frontend","0109715d-524a-4f93-8660-cc6d79a3287e",2,["D",1759359945623],"directory",[141],"39e1b136-9f1b-11f0-acbe-0224a6c84d84","backend","5788af28-45ee-481b-b7b0-eb2c4899fe8a",4,["D",1759359973241],[148],"pulls","branches","forks","envVars",{"_160":59,"_162":59},"connections",{"_160":59,"_161":59},"count","unfilledCount","emptyCount",{"_40":147,"_31":148,"_29":149,"_130":-5,"_38":39,"_37":150,"_132":55,"_35":210,"_13":59,"_32":145,"_33":-5,"_23":24,"_135":-5,"_172":211,"_26":212},{"_40":202,"_31":203,"_29":53,"_130":149,"_38":39,"_37":204,"_132":24,"_35":205,"_13":131,"_32":206,"_33":207,"_23":24,"_135":-5,"_172":208,"_26":209},{"_40":140,"_31":141,"_29":142,"_130":-5,"_38":39,"_37":143,"_132":55,"_35":199,"_13":59,"_32":145,"_33":-5,"_23":24,"_135":-5,"_172":200,"_26":201},{"_40":195,"_31":194,"_29":189,"_130":142,"_38":39,"_37":143,"_132":55,"_35":196,"_13":59,"_32":145,"_33":-5,"_23":24,"_135":-5,"_172":197,"_26":198},{"_40":186,"_31":187,"_29":188,"_130":189,"_38":39,"_37":143,"_132":24,"_35":190,"_13":59,"_32":134,"_33":191,"_23":24,"_135":-5,"_172":192,"_26":193},{"_40":178,"_31":179,"_29":180,"_130":142,"_38":39,"_37":181,"_132":24,"_35":182,"_13":59,"_32":20,"_33":183,"_23":24,"_135":-5,"_172":184,"_26":185},{"_40":137,"_31":27,"_29":30,"_130":-5,"_38":39,"_37":14,"_132":24,"_35":175,"_13":59,"_32":20,"_33":34,"_23":24,"_135":-5,"_172":176,"_26":177},{"_40":127,"_31":128,"_29":129,"_130":-5,"_38":39,"_37":131,"_132":55,"_35":171,"_13":59,"_32":134,"_33":102,"_23":24,"_135":-5,"_172":173,"_26":174},["D",1759359816111],"children",[],[128],["D",1759359993013],[],[27],"33f55a48-9f1b-11f0-8ffa-0224a6c84d84","index.html","33f55b10-9f1b-11f0-8ffa-0224a6c84d84",3,["D",1759359963298],"\n\n\n \n \n Span Data Table\n \n \n \n\n\n

\n \n \n

Demo Controls

\n \n \n \n

\n\n \n\n",[],[141,179],"296c4da2-9f1b-11f0-9265-0224a6c84d84","SpanTable.tsx","296c4e7e-9f1b-11f0-9265-0224a6c84d84","58406871-b539-4592-9c6a-9958c3fc35e4",["D",1759359945623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { z } from \"https://esm.sh/zod@3.22.4\";\n\n// Zod schemas for message validation\nexport const spanDataSchema = z.object({\n span_id: z.string(),\n input: z.unknown(),\n output: z.unknown(),\n expected: z.unknown(),\n metadata: z.unknown().nullable(),\n});\n\nexport const dataMessageSchema = z.object({\n type: z.literal(\"data\"),\n data: spanDataSchema,\n});\n\nexport const settingsMessageSchema = z.object({\n type: z.literal(\"settings\"),\n settings: z.object({\n theme: z.enum([\"light\", \"dark\"]),\n readOnly: z.boolean(),\n }),\n});\n\nexport const messageSchema = z.union([\n dataMessageSchema,\n settingsMessageSchema,\n]);\n\nexport type Message = z.infer;\nexport type SpanData = z.infer;\n\n// Simple table components (since we don't have shadcn/ui)\nconst Table: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = \"\" }) => (\n \n {children}\n

\n);\n\nconst TableHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n {children}\n);\n\nconst TableBody: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n {children}\n);\n\nconst TableRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n {children}\n);\n\nconst TableHead: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n \n {children}\n \n);\n\nconst TableCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n \n {children}\n \n);\n\n// Helper function to safely render any value\nconst renderValue = (value: unknown): string => {\n if (value === null || value === undefined) {\n return \"null\";\n }\n if (typeof value === \"string\") {\n return value;\n }\n if (typeof value === \"number\" || typeof value === \"boolean\") {\n return String(value);\n }\n if (typeof value === \"object\") {\n try {\n return JSON.stringify(value, null, 2);\n } catch {\n return \"[Object]\";\n }\n }\n return String(value);\n};\n\nexport default function SpanTable() {\n const [spans, setSpans] = useState([]);\n const [settings, setSettings] = useState({\n theme: \"light\" as \"light\" | \"dark\",\n readOnly: false,\n });\n\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n try {\n const message = messageSchema.parse(event.data);\n \n if (message.type === \"data\") {\n // Add new span data to the existing spans\n setSpans(prevSpans => [...prevSpans, message.data]);\n } else if (message.type === \"settings\") {\n setSettings(message.settings);\n }\n } catch (error) {\n console.error(\"Invalid message received:\", error);\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n \n // Add sample data for demonstration\n const sampleSpan: SpanData = {\n span_id: \"initial-sample\",\n input: \"An orphaned boy discovers he's a wizard on his 11th birthday when Hagrid escorts him to magic-teaching Hogwarts School.\",\n output: \"Harry Potter and the Philosopher's Stone\",\n expected: \"Harry Potter and the Sorcerer's Stone\",\n metadata: null,\n };\n setSpans([sampleSpan]);\n\n return () => {\n window.removeEventListener(\"message\", handleMessage);\n };\n }, []);\n\n const headers = useMemo(() => {\n if (spans.length === 0) return [];\n // Get all possible keys from all spans to handle varying structures\n const allKeys = new Set();\n spans.forEach(span => {\n Object.keys(span).forEach(key => allKeys.add(key));\n });\n return Array.from(allKeys);\n }, [spans]);\n\n if (spans.length === 0) {\n return (\n

No span data available

Waiting for messages...

\n );\n }\n\n const themeClass = settings.theme === \"dark\" ? \"bg-gray-900 text-white\" : \"bg-white text-gray-900\";\n\n return (\n

Span Data Table

\n Showing {spans.length} span{spans.length !== 1 ? 's' : ''}\n {settings.readOnly && \" (Read-only mode)\"}\n

\n \n

\n \n \n \n {headers.map((header) => (\n \n {header.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase())}\n \n ))}\n \n \n \n {spans.map((span, index) => (\n \n {headers.map((header) => (\n \n

\n {header === \"metadata\" && span[header as keyof SpanData] ? (\n

\n                          {renderValue(span[header as keyof SpanData])}\n

\n ) : (\n \n {renderValue(span[header as keyof SpanData])}\n \n )}\n

\n \n ))}\n \n ))}\n \n

\n );\n}",[],[141,194,187],"components","296c6b02-9f1b-11f0-9265-0224a6c84d84",["D",1759359945623],[167],[141,194],["D",1759359945623],[166,168],[141],"3cb9f210-9f1b-11f0-9bc6-0224a6c84d84","index.ts",5,["D",1759359978014],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve the main HTML file\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// API endpoint to send sample data (for testing)\napp.post(\"/api/send-sample\", async (c) => {\n const body = await c.req.json();\n \n // In a real application, you might broadcast this to connected clients\n // For now, we'll just return the data that should be sent via postMessage\n return c.json({\n message: \"Sample data ready to send\",\n data: {\n type: \"data\",\n data: body\n }\n });\n});\n\nexport default app.fetch;",[],[148,203],["D",1759359973241],[164],[148],["D",1759359778339],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":51,"_97":98,"_99":24},{"_13":82,"_31":83,"_40":39,"_84":41,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":42,"_91":92},"ctx",{"_75":-5,"_120":250,"_251":252,"_253":254,"_255":24,"_256":24,"_257":24,"_258":55,"_259":-5,"_260":-7,"_261":-7,"_262":59,"_263":24,"_264":24,"_265":-5,"_266":24,"_267":24,"_268":24,"_269":-5},"ENV",{"_221":222,"_223":224,"_225":83,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","899124c68db8496248a17ee95f074b807335ea7b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v6