\n {key}:\n {isExpandable ? (\n

\n {renderValue(value)}\n {Array.isArray(value) ? (\n value.slice(0, 5).map((item, i) => (\n

\n {typeof item === 'object' && item !== null ? (\n <>\n [{i}]:\n {Object.entries(item).map(([k, v]) => renderNode(k, v, nodeLevel + 1))}\n \n ) : (\n

\n [{i}]: {renderValue(item)}\n

\n )}\n

\n ))\n ) : (\n Object.entries(value).map(([k, v]) => renderNode(k, v, nodeLevel + 1))\n )}\n {Array.isArray(value) && value.length > 5 && (\n

... {value.length - 5} more items

\n )}\n

\n ) : (\n renderValue(value)\n )}\n

\n );\n };\n \n return (\n

\n {Object.entries(data).map(([key, value]) => renderNode(key, value, level))}\n

\n );\n };\n\n // Function to find and prepare data for charts\n const prepareChartData = () => {\n if (!data) return null;\n \n // Find arrays in the data that might be suitable for charting\n const findChartableData = (obj: any, path = '') => {\n if (Array.isArray(obj) && obj.length > 0 && typeof obj[0] === 'object') {\n return { data: obj, path };\n }\n \n if (obj && typeof obj === 'object') {\n for (const key in obj) {\n const result = findChartableData(obj[key], path ? `${path}.${key}` : key);\n if (result) return result;\n }\n }\n \n return null;\n };\n \n const chartableData = findChartableData(data);\n \n if (!chartableData) {\n return null;\n }\n \n // Find potential numeric values for the chart\n const numericKeys = Object.keys(chartableData.data[0]).filter(key => \n typeof chartableData.data[0][key] === 'number'\n );\n \n // Find potential label values\n const labelKeys = Object.keys(chartableData.data[0]).filter(key => \n typeof chartableData.data[0][key] === 'string'\n );\n \n if (numericKeys.length === 0 || labelKeys.length === 0) {\n return null;\n }\n \n const valueKey = numericKeys[0];\n const labelKey = labelKeys[0];\n \n // Prepare data for chart\n const chartData = chartableData.data.slice(0, 10).map((item: any) => ({\n name: String(item[labelKey]).substring(0, 15), // Limit label length\n value: item[valueKey]\n }));\n \n return {\n chartData,\n path: chartableData.path\n };\n };\n\n // Function to render charts\n const renderChartView = () => {\n const chartData = prepareChartData();\n \n if (!chartData) {\n return (\n

\n \n

No chartable data

\n Couldn't find suitable numeric and label data for charting in this dataset.\n

\n setVisualizationType('tree')}\n className=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\n >\n Switch to Explorer View\n \n

\n );\n }\n \n // Simple placeholder for the chart\n return (\n

Visualization of {chartData.path}

Charting would render here with {chartData.chartData.length} data points.

Use the tree view to explore the complete dataset structure.

\n \n

\n \n \n \n \n \n \n \n \n {chartData.chartData.map((item, index) => (\n \n \n \n \n ))}\n \n

\n Label\n	\n Value\n
\n {item.name}\n	\n {item.value}\n

\n );\n };\n\n return (\n

Interactive Data Explorer

\n Visualize and explore structured data from any topic using the dynamic data API\n

\n \n

\n setSearchTerm(e.target.value)}\n placeholder=\"Enter a topic (e.g., countries/population)\"\n className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n {isLoading ? 'Loading...' : 'Explore'}\n \n \n \n {searchHistory.length > 0 && (\n

Recent searches:

\n {searchHistory.map((item) => (\n handleHistoryClick(item)}\n className=\"bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm transition-colors duration-200\"\n >\n {item.query}\n \n ))}\n

\n )}\n \n

Try these topics:

\n {suggestions.map((suggestion, index) => (\n handleSuggestionClick(suggestion)}\n className=\"bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm transition-colors duration-200\"\n >\n {suggestion}\n \n ))}\n

\n \n {error && (\n

\n \n

\n {error}\n

\n )}\n \n {data && (\n

\n setVisualizationType('tree')}\n className={`px-4 py-3 text-sm font-medium border-b-2 ${\n visualizationType === 'tree' \n ? 'border-blue-500 text-blue-600' \n : 'border-transparent hover:border-gray-300 text-gray-500 hover:text-gray-700'\n }`}\n >\n Explorer View\n \n setVisualizationType('bar')}\n className={`px-4 py-3 text-sm font-medium border-b-2 ${\n visualizationType === 'bar' \n ? 'border-blue-500 text-blue-600' \n : 'border-transparent hover:border-gray-300 text-gray-500 hover:text-gray-700'\n }`}\n >\n Bar Chart\n \n setVisualizationType('line')}\n className={`px-4 py-3 text-sm font-medium border-b-2 ${\n visualizationType === 'line' \n ? 'border-blue-500 text-blue-600' \n : 'border-transparent hover:border-gray-300 text-gray-500 hover:text-gray-700'\n }`}\n >\n Line Chart\n \n

\n \n

\n {visualizationType === 'tree' ? (\n renderTreeView(data)\n ) : (\n renderChartView()\n )}\n

\n )}\n \n

About this explorer

\n This interactive tool connects to a dynamic data API that uses AI to generate \n structured information about any topic. Simply enter a topic or click one of the \n suggestions to explore the data. The system will retrieve comprehensive information \n and present it in an interactive, visual format.\n

\n );\n}\n\nfunction App() {\n return (\n

Dynamic Data Explorer

\n\n

\n \n

\n\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n // Extract endpoint and parameters from URL\n const url = new URL(request.url);\n const path = url.pathname.split(\"/\").filter(Boolean);\n \n // If this is a request to proxy to the API\n if (path.length > 0 && path[0] === \"api\") {\n try {\n // Remove \"api\" from the path and reconstruct\n const apiPath = path.slice(1).join(\"/\");\n const apiUrl = `https://docjoc-aiapi2.web.val.run/${apiPath}${url.search}`;\n \n log(\"INFO\", \"Proxying request to API\", { apiUrl });\n \n // Forward the request to the actual API\n const response = await fetch(apiUrl, {\n method: request.method,\n headers: request.headers,\n body: request.method !== 'GET' && request.method !== 'HEAD' ? await request.blob() : undefined,\n });\n \n // Return the API response\n return new Response(await response.blob(), {\n status: response.status,\n headers: response.headers,\n });\n } catch (error) {\n log(\"ERROR\", \"API proxy request failed\", {\n error: error instanceof Error ? error.message : String(error),\n });\n \n return new Response(\n JSON.stringify({\n error: \"Failed to proxy request to API\",\n details: error instanceof Error ? error.message : String(error),\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n }\n );\n }\n }\n \n // Serve the main HTML page for all other requests\n return new Response(\n `\n \n \n \n \n Dynamic Data Explorer\n \n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n }\n );\n}","createdAt",["D",1741632566901],"version",19,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","DocJoc","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0eUkyOUNMcllpZjViMjNJbmNQVHpORTJ3aCJ9","forkedVal","interval","slug","DocJoc/knowit","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,211,215],{"_118":119,"_142":-5,"_116":143,"_113":111},"prId",["D",1741632566901],{"_118":145,"_142":-5,"_116":146,"_113":147},18,["D",1741630055065],"8b253a64-fdda-11ef-ba46-569c3dd06744",{"_118":149,"_142":-5,"_116":150,"_113":151},17,["D",1741630054998],"8b18d670-fdda-11ef-a279-569c3dd06744",{"_118":153,"_142":-5,"_116":154,"_113":155},16,["D",1741630022742],"77e1a500-fdda-11ef-ae30-569c3dd06744",{"_118":157,"_142":-5,"_116":158,"_113":159},15,["D",1741630022321],"779fee30-fdda-11ef-adc2-569c3dd06744",{"_118":161,"_142":-5,"_116":162,"_113":163},14,["D",1741630010250],"706d62c8-fdda-11ef-9d15-569c3dd06744",{"_118":165,"_142":-5,"_116":166,"_113":167},13,["D",1741630009951],"703f5c7a-fdda-11ef-a279-569c3dd06744",{"_118":169,"_142":-5,"_116":170,"_113":171},12,["D",1741629980304],"5e952cca-fdda-11ef-ad46-569c3dd06744",{"_118":173,"_142":-5,"_116":174,"_113":175},11,["D",1741629980085],"5e74fab8-fdda-11ef-966a-569c3dd06744",{"_118":177,"_142":-5,"_116":178,"_113":179},10,["D",1741629950175],"4c9f16e8-fdda-11ef-9b6f-569c3dd06744",{"_118":181,"_142":-5,"_116":182,"_113":183},9,["D",1741629950069],"4c90ce26-fdda-11ef-a845-569c3dd06744",{"_118":185,"_142":-5,"_116":186,"_113":187},8,["D",1741629917899],"3962af40-fdda-11ef-9d15-569c3dd06744",{"_118":189,"_142":-5,"_116":190,"_113":191},7,["D",1741629880221],"22ebfcb2-fdda-11ef-b8f9-569c3dd06744",{"_118":193,"_142":-5,"_116":194,"_113":195},6,["D",1741629879676],"229ab834-fdda-11ef-a35b-569c3dd06744",{"_118":197,"_142":-5,"_116":198,"_113":199},5,["D",1741629864318],"1971e002-fdda-11ef-8207-569c3dd06744",{"_118":201,"_142":-5,"_116":202,"_113":203},4,["D",1741629856465],"14c3aa5e-fdda-11ef-b7db-569c3dd06744",{"_118":205,"_142":-5,"_116":206,"_113":207},3,["D",1741629830259],"0526aaec-fdda-11ef-b644-569c3dd06744",{"_118":91,"_142":-5,"_116":209,"_113":210},["D",1741629799191],"f2a2ab00-fdd9-11ef-a7f1-569c3dd06744",{"_118":212,"_142":-5,"_116":213,"_113":214},1,["D",1741629704403],"ba21f100-fdd9-11ef-8fc5-569c3dd06744",{"_118":32,"_142":-5,"_116":216,"_113":217},["D",1741629501215],"410689c0-fdd9-11ef-b7db-569c3dd06744","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_94":225,"_226":227,"_95":228},"single","redirect","/v/DocJoc/knowit/versions",{"_113":171,"_114":229,"_118":169,"_116":230,"_231":100,"_101":102,"_108":109,"_129":130,"_11":97,"_232":-5,"_233":-5,"_234":-5,"_222":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n Bar,\n BarChart,\n CartesianGrid,\n Legend,\n Line,\n LineChart,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"https://esm.sh/recharts\";\n\nconst apiBaseUrl = \"https://docjoc-aiapi2.web.val.run\";\n\nconst DataExplorer = () => {\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [data, setData] = useState(null);\n const [visualizationType, setVisualizationType] = useState(\"tree\");\n const [searchHistory, setSearchHistory] = useState([]);\n const [suggestions, setSuggestions] = useState([\n \"countries/population\",\n \"technology/trends\",\n \"finance/stocks\",\n \"science/discoveries\",\n \"space/planets\",\n \"health/nutrition\",\n ]);\n\n const fetchData = async (path) => {\n setIsLoading(true);\n setError(null);\n try {\n const response = await fetch(`${apiBaseUrl}/${path}`);\n\n if (!response.ok) {\n throw new Error(`Error: ${response.status}`);\n }\n\n const result = await response.json();\n setData(result);\n\n // Add to search history if not already there\n if (!searchHistory.includes(path)) {\n setSearchHistory(prev => [path, ...prev].slice(0, 5));\n }\n } catch (err) {\n setError(err.message);\n setData(null);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleSearch = (e) => {\n e.preventDefault();\n if (searchTerm.trim()) {\n const formattedPath = searchTerm.trim().replace(/\\s+/g, \"/\");\n fetchData(formattedPath);\n }\n };\n\n const handleSuggestionClick = (suggestion) => {\n setSearchTerm(suggestion);\n fetchData(suggestion);\n };\n\n const renderChartFromData = () => {\n if (!data) return null;\n\n // Find arrays in the data that might be suitable for charting\n const findChartableData = (obj, path = \"\") => {\n if (Array.isArray(obj) && obj.length > 0 && typeof obj[0] === \"object\") {\n return { data: obj, path };\n }\n\n if (obj && typeof obj === \"object\") {\n for (const key in obj) {\n const result = findChartableData(obj[key], path ? `${path}.${key}` : key);\n if (result) return result;\n }\n }\n\n return null;\n };\n\n const chartableData = findChartableData(data);\n\n if (!chartableData) {\n return (\n

No chartable data found in this dataset.

\n );\n }\n\n // Find potential numeric values for the chart\n const numericKeys = Object.keys(chartableData.data[0]).filter(key =>\n typeof chartableData.data[0][key] === \"number\"\n );\n\n // Find potential label values\n const labelKeys = Object.keys(chartableData.data[0]).filter(key => typeof chartableData.data[0][key] === \"string\");\n\n if (numericKeys.length === 0 || labelKeys.length === 0) {\n return (\n

No suitable numeric and label data found for charting.

\n );\n }\n\n const valueKey = numericKeys[0];\n const labelKey = labelKeys[0];\n\n // Prepare data for chart\n const chartData = chartableData.data.slice(0, 10).map(item => ({\n name: item[labelKey],\n value: item[valueKey],\n }));\n\n return (\n `

Visualization of {chartableData.path}

\n \n {visualizationType === 'bar' ? (\n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n \n \n \n \n )}\n \n

`\n );\n };\n\n const renderTreeView = (data, level = 0) => {\n if (!data) return null;\n\n const renderValue = (value) => {\n if (value === null) return `null`;\n if (typeof value === \"object\") {\n if (Array.isArray(value)) {\n return `[Array: {value.length} items]`;\n }\n return `{{Object: ${Object.keys(value).length} keys}}`;\n }\n if (typeof value === \"string\")\n return `\"{value}\";\n return {value}`;\n };\n\n const renderNode = (key, value, nodeLevel) => {\n const isExpandable = value !== null && typeof value === \"object\";\n const paddingLeft = `${nodeLevel * 1.5}rem`;\n\n return (\n `

\n {key}:\n {isExpandable ? (\n

\n {renderValue(value)}\n {Array.isArray(value) ? (\n value.slice(0, 5).map((item, i) => (\n

\n {typeof item === 'object' ? (\n <>\n [{i}]:\n {Object.entries(item).map(([k, v]) => renderNode(k, v, nodeLevel + 1))}\n \n ) : (\n

\n [{i}]: {renderValue(item)}\n

\n )}\n

\n ))\n ) : (\n Object.entries(value).map(([k, v]) => renderNode(k, v, nodeLevel + 1))\n )}\n {Array.isArray(value) && value.length > 5 && (\n

... {value.length - 5} more items

\n )}\n

\n ) : (\n renderValue(value)\n )}\n

`\n );\n };\n\n return (\n `

\n {Object.entries(data).map(([key, value]) => renderNode(key, value, level))}\n

`\n );\n };\n\n return (\n `

Interactive Data Explorer

\n Visualize and explore structured data from any topic using the dynamic data API\n

\n \n

\n \n {isLoading ? 'Loading...' : 'Explore'}\n \n \n \n {searchHistory.length > 0 && (\n

Recent searches:

\n {searchHistory.map((item, index) => (\n handleSuggestionClick(item)}\n className=\"bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm transition-colors duration-200\"\n >\n {item}\n \n ))}\n

\n )}\n \n

Try these topics:

\n \n {error && (\n

\n \n

\n {error}\n

\n )}\n \n {data && (\n

\n setVisualizationType('tree')}\n className={px-4 py-3 text-sm font-medium border-b-2 ${\n visualizationType === \"tree\"\n ? \"border-blue-500 text-blue-600\"\n : \"border-transparent hover:border-gray-300 text-gray-500 hover:text-gray-700\"\n }}\n >\n Explorer View\n \n setVisualizationType('bar')}\n className={px-4 py-3 text-sm font-medium border-b-2 ${\n visualizationType === \"bar\"\n ? \"border-blue-500 text-blue-600\"\n : \"border-transparent hover:border-gray-300 text-gray-500 hover:text-gray-700\"\n }}\n >\n Bar Chart\n \n setVisualizationType('line')}\n className={px-4 py-3 text-sm font-medium border-b-2 ${\n visualizationType === \"line\"\n ? \"border-blue-500 text-blue-600\"\n : \"border-transparent hover:border-gray-300 text-gray-500 hover:text-gray-700\"\n }}\n >\n Line Chart\n \n

\n \n

\n {visualizationType === 'tree' ? (\n renderTreeView(data)\n ) : (\n renderChartFromData()\n )}\n

\n )}\n \n

About this explorer

`\n );\n};\n\nexport default DataExplorer;",["D",1741629980304],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

knowit

Version 12