\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}","deleted","label",[99],"permalink","https://www.val.town/x/DocJoc/knowit/code/main.tsx","extension","actionData","errors"]