force graph input

web/components/routes/PublicHomeRoute.tsx

@@ -1,8 +1,9 @@
 "use client"
-
 import * as react from "react"
-
 import type * as force_graph from "./force-graph-client"
+import { useCoState } from "@/lib/providers/jazz-provider"
+import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
+import { ID } from "jazz-tools"
 
 let graph_data_promise = import("./graph-data.json").then(a => a.default)
 let ForceGraphClient = react.lazy(() => import("./force-graph-client-lazy"))
@@ -10,17 +11,52 @@ 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
-			})
+	const [placeholder, setPlaceholder] = react.useState("Search something...")
+	const [currentTopicIndex, setCurrentTopicIndex] = react.useState(0)
+	const [currentCharIndex, setCurrentCharIndex] = react.useState(0)
+	const globalGroup = useCoState(
+		PublicGlobalGroup,
+		process.env.NEXT_PUBLIC_JAZZ_GLOBAL_GROUP as ID<PublicGlobalGroup>,
+		{
+			root: {
+				topics: []
+			}
+		}
 	)
-	}, [raw_graph_data])
+	const topics = globalGroup?.root.topics?.map(topic => topic?.prettyName) || []
+
+	// 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])
+
+	react.useEffect(() => {
+		if (topics.length === 0) return
+
+		const typingInterval = setInterval(() => {
+			const currentTopic = topics[currentTopicIndex]
+			if (currentTopic && currentCharIndex < currentTopic.length) {
+				setPlaceholder(`${currentTopic.slice(0, currentCharIndex + 1)}`)
+				setCurrentCharIndex(currentCharIndex + 1)
+			} else {
+				clearInterval(typingInterval)
+				setTimeout(() => {
+					setCurrentTopicIndex(prevIndex => (prevIndex + 1) % topics.length)
+					setCurrentCharIndex(0)
+				}, 1000)
+			}
+		}, 200)
+
+		return () => clearInterval(typingInterval)
+	}, [currentTopicIndex, currentCharIndex, topics])
 
 	return (
+		<div className="relative h-full w-screen">
 			<ForceGraphClient
 				raw_nodes={raw_graph_data}
 				onNodeClick={val => {
@@ -28,5 +64,19 @@ export function PublicHomeRoute() {
 				}}
 				filter_query=""
 			/>
+			<div className="absolute left-0 top-0 z-20 p-4">
+				<h2 className="text-xl font-bold text-black dark:text-white">Learn Anything</h2>
+			</div>
+			<div className="absolute left-1/2 top-1/2 z-10 w-[60%] -translate-x-1/2 -translate-y-1/2 transform">
+				<div className="flex flex-col items-center justify-center gap-6">
+					<h1 className="text-center text-5xl font-bold uppercase text-black dark:text-white">i want to learn</h1>
+					<input
+						type="text"
+						placeholder={placeholder}
+						className="bg-result w-[70%] rounded-md border px-6 py-3 text-lg shadow-lg placeholder:text-black/40 focus:outline-none active:outline-none dark:placeholder:text-white/40"
+					/>
+				</div>
+			</div>
+		</div>
 	)
 }

web/components/routes/force-graph-client-lazy.tsx

@@ -8,9 +8,9 @@ import * as schedule from "@/lib/utils/schedule"
 import * as canvas from "@/lib/utils/canvas"
 
 export type RawGraphNode = {
-	name:            string,
-	prettyName:      string,
-	connectedTopics: string[],
+	name: string
+	prettyName: string
+	connectedTopics: string[]
 }
 
 type HSL = [hue: number, saturation: number, lightness: number]
@@ -57,8 +57,7 @@ const visitColorNode = (
 	}
 }
 
-function generateColorMap(nodes: readonly fg.graph.Node[]): ColorMap
-{
+function generateColorMap(nodes: readonly fg.graph.Node[]): ColorMap {
 	const hls_map: HSLMap = new Map()
 
 	for (let i = 0; i < nodes.length; i++) {
@@ -75,8 +74,7 @@ function generateColorMap(nodes: readonly fg.graph.Node[]): ColorMap
 	return color_map
 }
 
-function generateNodesFromRawData(raw_data: RawGraphNode[]): [fg.graph.Node[], fg.graph.Edge[]]
-{
+function generateNodesFromRawData(raw_data: RawGraphNode[]): [fg.graph.Node[], fg.graph.Edge[]] {
 	const nodes_map = new Map<string, fg.graph.Node>()
 	const edges: fg.graph.Edge[] = []
 
@@ -120,10 +118,8 @@ function filterNodes(
 	// regex matching all letters of the filter (out of order)
 	const regex = new RegExp(filter.split("").join(".*"), "i")
 
-	graph.nodes = nodes.filter((node) => regex.test(node.label))
-	graph.edges = edges.filter(
-		(edge) => regex.test(edge.a.label) && regex.test(edge.b.label)
-	)
+	graph.nodes = nodes.filter(node => regex.test(node.label))
+	graph.edges = edges.filter(edge => regex.test(edge.a.label) && regex.test(edge.b.label))
 
 	fg.graph.resetGraphGrid(graph.grid, graph.nodes)
 }
@@ -135,7 +131,7 @@ const GRAPH_OPTIONS: fg.graph.Options = {
 	repel_distance: 40,
 	repel_strength: 2,
 	link_strength: 0.015,
-	grid_size:        500,
+	grid_size: 500
 }
 
 const TITLE_SIZE_PX = 400
@@ -159,8 +155,7 @@ const simulateGraph = (
 	let origin_y = grid_radius + canvas.translate.y
 	let vmax = Math.max(vw, vh)
 	let push_radius =
-		(Math.min(TITLE_SIZE_PX, vw / 2, vh / 2) / vmax) *
-		(graph.grid.size / canvas.scale) +
+		(Math.min(TITLE_SIZE_PX, vw / 2, vh / 2) / vmax) * (graph.grid.size / canvas.scale) +
 		80 /* additional margin for when scrolled in */
 
 	for (let node of graph.nodes) {
@@ -176,10 +171,7 @@ const simulateGraph = (
 	}
 }
 
-const drawGraph = (
-	canvas: fg.canvas.CanvasState,
-	color_map: ColorMap
-): void => {
+const drawGraph = (canvas: fg.canvas.CanvasState, color_map: ColorMap): void => {
 	fg.canvas.resetFrame(canvas)
 	fg.canvas.drawEdges(canvas)
 
@@ -194,18 +186,20 @@ const drawGraph = (
 	ctx.textBaseline = "middle"
 
 	for (let node of graph.nodes) {
-
 		let opacity = 0.6 + ((node.mass - 1) / 50) * 4
 
 		ctx.font = `${max_size / 200 + (((node.mass - 1) / 5) * (max_size / 100)) / canvas.scale}px sans-serif`
 
-		ctx.fillStyle = node.anchor || canvas.hovered_node === node
+		ctx.fillStyle =
+			node.anchor || canvas.hovered_node === node
 				? `rgba(129, 140, 248, ${opacity})`
 				: `hsl(${color_map[node.key as string]} / ${opacity})`
 
-		ctx.fillText(node.label,
+		ctx.fillText(
+			node.label,
 			(node.position.x / graph.grid.size) * max_size,
-			(node.position.y / graph.grid.size) * max_size)
+			(node.position.y / graph.grid.size) * max_size
+		)
 	}
 }
 
@@ -231,7 +225,8 @@ function init(
 		onNodeClick: (name: string) => void
 		raw_nodes: RawGraphNode[]
 		canvas_el: HTMLCanvasElement | null
-}) {
+	}
+) {
 	let { canvas_el, raw_nodes } = props
 
 	if (canvas_el == null) return
@@ -239,7 +234,7 @@ function init(
 	s.ctx = canvas_el.getContext("2d")
 	if (s.ctx == null) return
 
-	[s.nodes, s.edges] = generateNodesFromRawData(raw_nodes)
+	;[s.nodes, s.edges] = generateNodesFromRawData(raw_nodes)
 	let color_map = generateColorMap(s.nodes)
 
 	s.graph = fg.graph.makeGraph(GRAPH_OPTIONS, s.nodes.slice(), s.edges.slice())
@@ -259,7 +254,7 @@ function init(
 	})
 	s.ro.observe(canvas_el)
 
-	let loop = s.loop = raf.makeAnimationLoop((time) => {
+	let loop = (s.loop = raf.makeAnimationLoop(time => {
 		let is_active = gestures.mode.type === fg.canvas.Mode.DraggingNode
 		let iterations = raf.calcIterations(s.frame_iter_limit, time)
 
@@ -268,12 +263,12 @@ function init(
 			simulateGraph(s.alpha, s.graph, canvas_state, window.innerWidth, window.innerHeight)
 		}
 		drawGraph(canvas_state, color_map)
-	})
+	}))
 	raf.loopStart(loop)
 
-	let gestures = s.gestures = fg.canvas.canvasGestures({
+	let gestures = (s.gestures = fg.canvas.canvasGestures({
 		canvas: canvas_state,
-		onGesture: (e) => {
+		onGesture: e => {
 			switch (e.type) {
 				case fg.canvas.GestureEventType.Translate:
 					s.bump_end = raf.bump(s.bump_end)
@@ -282,16 +277,11 @@ function init(
 					props.onNodeClick(e.node.key as string)
 					break
 				case fg.canvas.GestureEventType.NodeDrag:
-				fg.graph.changeNodePosition(
-					canvas_state.graph.grid,
-					e.node,
-					e.pos.x,
-					e.pos.y
-				)
+					fg.graph.changeNodePosition(canvas_state.graph.grid, e.node, e.pos.x, e.pos.y)
 					break
 			}
 		}
-	})
+	}))
 }
 
 function updateQuery(s: State, filter_query: string) {
@@ -318,7 +308,6 @@ export type ForceGraphProps = {
 }
 
 export default function ForceGraphClient(props: ForceGraphProps): react.JSX.Element {
-
 	const [canvas_el, setCanvasEl] = react.useState<HTMLCanvasElement | null>(null)
 
 	const state = react.useRef(new State())
@@ -327,7 +316,7 @@ export default function ForceGraphClient(props: ForceGraphProps): react.JSX.Elem
 		init(state.current, {
 			canvas_el: canvas_el,
 			onNodeClick: props.onNodeClick,
-			raw_nodes:   props.raw_nodes,
+			raw_nodes: props.raw_nodes
 		})
 	}, [canvas_el])
 
@@ -339,7 +328,8 @@ export default function ForceGraphClient(props: ForceGraphProps): react.JSX.Elem
 		return () => cleanup(state.current)
 	}, [])
 
-	return <div className="absolute inset-0 overflow-hidden">
+	return (
+		<div className="absolute inset-0 overflow-hidden">
 			<canvas
 				ref={setCanvasEl}
 				style={{
@@ -347,8 +337,9 @@ export default function ForceGraphClient(props: ForceGraphProps): react.JSX.Elem
 					top: "-10%",
 					left: "-10%",
 					width: "120%",
-				height: "120%",
+					height: "120%"
 				}}
 			/>
 		</div>
+	)
 }

web/components/routes/force-graph-client.tsx

@@ -328,7 +328,7 @@ export const createForceGraph = (props: ForceGraphProps): react.JSX.Element => {
 					top: "-10%",
 					left: "-10%",
 					width: "120%",
-					height: "120%"
+					height: "100%"
 				}}
 			/>
 		</div>