\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; className?: string }> = ({ \n children, \n className = \"\" \n}) => (\n \n {children}\n \n);\n\nconst TableHead: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n \n {children}\n \n);\n\nconst TableCell: React.FC<{ children: React.ReactNode; className?: string }> = ({ \n children, \n className = \"\" \n}) => (\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<{ theme: \"light\" | \"dark\"; readOnly: boolean }>({\n theme: \"light\",\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 list\n setSpans(prev => [...prev, 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 return [\"ID\", \"Input\", \"Output\", \"Expected\", \"Metadata\"];\n }, []);\n\n if (spans.length === 0) {\n return (\n

No span data available

Waiting for data messages...

\n );\n }\n\n const isDark = settings.theme === \"dark\";\n const containerClass = isDark \n ? \"bg-gray-900 text-white min-h-screen p-4\" \n : \"bg-white text-gray-900 min-h-screen p-4\";\n\n return (\n

Span Data Table

\n Theme: {settings.theme} | Read Only: {settings.readOnly ? \"Yes\" : \"No\"} | \n Total Spans: {spans.length}\n

\n\n \n \n \n {headers.map((header) => (\n {header}\n ))}\n \n \n \n {spans.map((span, index) => (\n \n \n {span.span_id || `span-${index}`}\n \n \n

\n {renderValue(span.input)}\n

\n \n \n

\n {renderValue(span.output)}\n

\n \n \n

\n {renderValue(span.expected)}\n

\n \n \n

\n {renderValue(span.metadata)}\n

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

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/dpdiliberto/table2/code/frontend/components/SpanTable.tsx","extension","actionData","errors"]