force graph, palette

web/components/routes/PublicHomeRoute.tsx

@@ -1,31 +1,32 @@
 "use client"
-import { useCoState } from "@/lib/providers/jazz-provider"
-import { PublicGlobalGroup } from "@/lib/schema/global-topic-graph"
-import { glob } from "fs"
-import { ID } from "jazz-tools"
-import { useMemo } from "react"
 
-export default function PublicHomeRoute() {
-	// const globalGroup = useCoState(PublicGlobalGroup, "co_z6Tmg1sZTfwkPd4pV6qBV9T5SFU" as ID<PublicGlobalGroup>, {
-	// 	root: { topicGraph: [{ connectedTopics: [{}] }] }
-	// })
+import * as react from "react"
+
+import type * as force_graph from "./force-graph-client"
+
+let graph_data_promise = import("./graph-data.json").then(a => a.default)
+let ForceGraphClient = react.lazy(() => import("./force-graph-client-lazy"))
+
+export function PublicHomeRoute() {
+	let raw_graph_data = react.use(graph_data_promise)
+
+	let graph_items = react.useMemo(() => {
+		return raw_graph_data.map(
+			(item): force_graph.ConnectionItem => ({
+				key: item.name,
+				title: item.prettyName,
+				connections: item.connectedTopics
+			})
+		)
+	}, [raw_graph_data])
 
-	// const graph = useMemo(() => {
-	// 	return globalGroup?.root.topicGraph?.map(
-	// 		topic =>
-	// 			({
-	// 				name: topic.name,
-	// 				prettyName: topic.prettyName,
-	// 				connectedTopics: topic.connectedTopics.map(connected => connected?.name)
-	// 			}) || []
-	// 	)
-	// }, [globalGroup?.root.topicGraph])
-	// const [{}]
-	// console.log(globalGroup, "graph")
 	return (
-		<>
-			<h1>I want to learn</h1>
-			<input type="text" />
-		</>
+		<ForceGraphClient
+			raw_nodes={raw_graph_data}
+			onNodeClick={val => {
+				console.log("clicked", val)
+			}}
+			filter_query=""
+		/>
 	)
 }