feat(landing): topic search (#134)

* feat(landing): topic search

* fix: node click

web/components/routes/public/Autocomplete.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import React, { useState, useRef, useCallback, useMemo } from "react"
+import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command"
+import { Command as CommandPrimitive } from "cmdk"
+import { motion, AnimatePresence } from "framer-motion"
+import { cn } from "@/lib/utils"
+
+interface GraphNode {
+	name: string
+	prettyName: string
+	connectedTopics: string[]
+}
+
+interface AutocompleteProps {
+	topics: GraphNode[]
+	onSelect: (topic: GraphNode) => void
+	onInputChange: (value: string) => void
+}
+
+export function Autocomplete({ topics = [], onSelect, onInputChange }: AutocompleteProps): JSX.Element {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [open, setOpen] = useState(false)
+	const [inputValue, setInputValue] = useState("")
+
+	const filteredTopics = useMemo(() => {
+		if (!inputValue) {
+			return topics.slice(0, 5)
+		}
+		const regex = new RegExp(inputValue.split("").join(".*"), "i")
+		return topics.filter(
+			topic =>
+				regex.test(topic.name) ||
+				regex.test(topic.prettyName) ||
+				topic.connectedTopics.some(connectedTopic => regex.test(connectedTopic))
+		)
+	}, [inputValue, topics])
+
+	const handleSelect = useCallback(
+		(topic: GraphNode) => {
+			setInputValue(topic.prettyName)
+			setOpen(false)
+			onSelect(topic)
+		},
+		[onSelect]
+	)
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLDivElement>) => {
+			if (e.key === "Enter" && filteredTopics.length > 0) {
+				handleSelect(filteredTopics[0])
+			} else if ((e.key === "Backspace" || e.key === "Delete") && inputRef.current?.value === "") {
+				setOpen(true)
+			}
+		},
+		[filteredTopics, handleSelect]
+	)
+
+	const handleInputChange = useCallback(
+		(value: string) => {
+			setInputValue(value)
+			setOpen(true)
+			onInputChange(value)
+		},
+		[onInputChange]
+	)
+
+	return (
+		<Command
+			className={cn("bg-background relative overflow-visible", {
+				"rounded-lg border": !open,
+				"rounded-none rounded-t-lg border-l border-r border-t": open
+			})}
+			onKeyDown={handleKeyDown}
+		>
+			<div className="flex items-center p-2">
+				<CommandPrimitive.Input
+					ref={inputRef}
+					value={inputValue}
+					onValueChange={handleInputChange}
+					onBlur={() => setTimeout(() => setOpen(false), 100)}
+					onFocus={() => setOpen(true)}
+					placeholder="Search for a topic..."
+					className={cn("placeholder:text-muted-foreground flex-1 bg-transparent px-2 py-1 outline-none", {
+						"mb-1 border-b pb-2.5": open
+					})}
+				/>
+			</div>
+			<div className="relative">
+				<AnimatePresence>
+					{open && (
+						<motion.div
+							initial={{ opacity: 0, y: -10 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -10 }}
+							transition={{ duration: 0.1 }}
+							className="bg-background absolute left-0 right-0 z-10 -mx-px rounded-b-lg border-b border-l border-r shadow-lg"
+						>
+							<CommandList className="max-h-52">
+								<CommandGroup className="mb-2">
+									{filteredTopics.map(topic => (
+										<CommandItem
+											key={topic.name}
+											onSelect={() => handleSelect(topic)}
+											className="min-h-10 rounded-none px-3 py-1.5"
+										>
+											<span>{topic.prettyName}</span>
+											<span className="text-muted-foreground ml-auto text-xs">
+												{topic.connectedTopics.length > 0 ? topic.connectedTopics.join(", ") : "-"}
+											</span>
+										</CommandItem>
+									))}
+								</CommandGroup>
+							</CommandList>
+						</motion.div>
+					)}
+				</AnimatePresence>
+			</div>
+		</Command>
+	)
+}
+
+export default Autocomplete

web/components/routes/public/PublicHomeRoute.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import dynamic from "next/dynamic"
+import { motion } from "framer-motion"
+import { Autocomplete } from "./Autocomplete"
+import { useRouter } from "next/navigation"
+
+let graph_data_promise = import("./graph-data.json").then(a => a.default)
+
+const ForceGraphClient = dynamic(() => import("./force-graph-client-lazy"), { ssr: false })
+
+interface GraphNode {
+	name: string
+	prettyName: string
+	connectedTopics: string[]
+}
+
+export function PublicHomeRoute() {
+	const router = useRouter()
+	const raw_graph_data = React.use(graph_data_promise) as GraphNode[]
+	const [filterQuery, setFilterQuery] = React.useState<string>("")
+
+	const handleTopicSelect = (topicName: string) => {
+		router.push(`/${topicName}`)
+	}
+
+	const handleInputChange = (value: string) => {
+		setFilterQuery(value)
+	}
+
+	return (
+		<div className="relative h-full w-screen">
+			<ForceGraphClient
+				raw_nodes={raw_graph_data}
+				onNodeClick={val => handleTopicSelect(val)}
+				filter_query={filterQuery}
+			/>
+
+			<motion.div
+				className="absolute left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 transform max-sm:px-5"
+				initial={{ opacity: 0, y: 20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.5 }}
+				style={{ x: "-50%", y: "-50%" }}
+			>
+				<motion.h1
+					className="mb-2 text-center text-3xl font-bold uppercase sm:mb-4 md:text-5xl"
+					initial={{ opacity: 0, y: -20 }}
+					animate={{ opacity: 1, y: 0 }}
+					transition={{ duration: 0.5, delay: 0.2 }}
+				>
+					I want to learn
+				</motion.h1>
+				<Autocomplete
+					topics={raw_graph_data}
+					onSelect={topic => handleTopicSelect(topic.name)}
+					onInputChange={handleInputChange}
+				/>
+			</motion.div>
+		</div>
+	)
+}
+
+export default PublicHomeRoute

web/components/routes/public/anim.ts

@@ -0,0 +1,84 @@
+function lerp(start: number, end: number, t: number): number {
+	return start + (end - start) * t
+}
+
+export interface AnimationLoop {
+	/** User callback to be called on each animation frame. */
+	callback: FrameRequestCallback
+	/** {@link loopFrame} bound to this loop. */
+	frame: FrameRequestCallback
+	/** The current frame id returned by {@link requestAnimationFrame}. */
+	frame_id: number
+}
+
+export function animationLoop(callback: FrameRequestCallback): AnimationLoop {
+	const loop: AnimationLoop = {
+		callback: callback,
+		frame: t => loopFrame(loop, t),
+		frame_id: 0,
+	}
+	return loop
+}
+export function loopFrame(loop: AnimationLoop, time: number): void {
+	loop.frame_id = requestAnimationFrame(loop.frame)
+	loop.callback(time)
+}
+export function loopStart(loop: AnimationLoop): void {
+	loop.frame_id ||= requestAnimationFrame(loop.frame)
+}
+export function loopClear(loop: AnimationLoop): void {
+	cancelAnimationFrame(loop.frame_id)
+	loop.frame_id = 0
+}
+
+export const DEFAULT_TARGET_FPS = 44
+
+export interface FrameIterationsLimit {
+	target_fps: number
+	last_timestamp: number
+}
+
+export function frameIterationsLimit(
+	target_fps: number = DEFAULT_TARGET_FPS,
+): FrameIterationsLimit {
+	return {
+		target_fps,
+		last_timestamp: performance.now(),
+	}
+}
+export function calcIterations(limit: FrameIterationsLimit, current_time: number): number {
+	let target_ms  = 1000 / limit.target_fps
+	let delta_time = current_time - limit.last_timestamp
+	let times      = Math.floor(delta_time / target_ms)
+	limit.last_timestamp += times * target_ms
+	return times
+}
+
+export interface AlphaUpdateSteps {
+	increment: number
+	decrement: number
+}
+export const DEFAULT_ALPHA_UPDATE_STEPS: AlphaUpdateSteps = {
+	increment: 0.03,
+	decrement: 0.005,
+}
+export const updateAlpha = (
+	alpha: number,
+	is_playing: boolean,
+	update_steps = DEFAULT_ALPHA_UPDATE_STEPS,
+): number => {
+	return is_playing
+		? lerp(alpha, 1, update_steps.increment)
+		: lerp(alpha, 0, update_steps.decrement)
+}
+
+export const DEFAULT_BUMP_TIMEOUT_DURATION = 2000
+
+export const bump = (
+	bump_end: number,
+	duration: number = DEFAULT_BUMP_TIMEOUT_DURATION,
+): number => {
+	const start = performance.now()
+	const end = start + duration
+	return end > bump_end ? end : bump_end
+}

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

@@ -0,0 +1,366 @@
+"use client"
+
+import * as react from "react"
+import * as fg from "@nothing-but/force-graph"
+import { ease, trig, raf } from "@nothing-but/utils"
+
+import * as schedule from "@/lib/utils/schedule"
+import * as canvas from "@/lib/utils/canvas"
+
+export type RawGraphNode = {
+	name: string
+	prettyName: string
+	connectedTopics: string[]
+}
+
+type HSL = [hue: number, saturation: number, lightness: number]
+
+const COLORS: readonly HSL[] = [
+	[3, 86, 64],
+	[31, 90, 69],
+	[15, 87, 66]
+]
+
+/* use a plain object instead of Map for faster lookups */
+type ColorMap = {[key: string]: string}
+type HSLMap   = Map<fg.graph.Node, HSL>
+
+const MAX_COLOR_ITERATIONS = 10
+
+/**
+ * Add a color to a node and all its connected nodes.
+ */
+function visitColorNode(
+	g:         fg.graph.Graph,
+	prev:      fg.graph.Node,
+	node:      fg.graph.Node,
+	hsl_map:   HSLMap,
+	add:       HSL,
+	iteration: number = 1
+): void {
+	if (iteration > MAX_COLOR_ITERATIONS) return
+
+	const color = hsl_map.get(node)
+
+	if (!color) {
+		hsl_map.set(node, [...add])
+	} else {
+		const add_strength = MAX_COLOR_ITERATIONS / iteration
+		color[0] = (color[0] + add[0] * add_strength) / (1 + add_strength)
+		color[1] = (color[1] + add[1] * add_strength) / (1 + add_strength)
+		color[2] = (color[2] + add[2] * add_strength) / (1 + add_strength)
+	}
+
+	for (let edge of g.edges) {
+		let b: fg.graph.Node
+		if      (edge.a === node) b = edge.b
+		else if (edge.b === node) b = edge.a
+		else continue
+		if (b !== prev) {
+			visitColorNode(g, node, b, hsl_map, add, iteration + 1)
+		}
+	}
+}
+
+function generateColorMap(g: fg.graph.Graph, nodes: readonly fg.graph.Node[]): ColorMap {
+	const hls_map: HSLMap = new Map()
+
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i]!
+		const color = COLORS[i % COLORS.length]!
+		visitColorNode(g, node, node, hls_map, color)
+	}
+
+	const color_map: ColorMap = {}
+	for (const [node, [hue, saturation, lightness]] of hls_map.entries()) {
+		color_map[node.key as string] = `${hue} ${saturation}% ${lightness}%`
+	}
+
+	return color_map
+}
+
+function generateNodesFromRawData(g: fg.graph.Graph, raw_data: RawGraphNode[]): void {
+	const nodes_map = new Map<string, fg.graph.Node>()
+
+	/* create nodes */
+	for (const raw of raw_data) {
+		const node = fg.graph.make_node()
+		node.key = raw.name
+		node.label = raw.prettyName
+
+		fg.graph.add_node(g, node)
+		nodes_map.set(raw.name, node)
+	}
+
+	/* connections */
+	for (const raw of raw_data) {
+		const node_a = nodes_map.get(raw.name)!
+
+		for (const name_b of raw.connectedTopics) {
+			const node_b = nodes_map.get(name_b)!
+			fg.graph.connect(g, node_a, node_b)
+		}
+	}
+
+	/* calc mass from number of connections */
+	for (const node of g.nodes) {
+		let edges = fg.graph.get_node_edges(g, node)
+		node.mass = fg.graph.node_mass_from_edges(edges.length)
+	}
+
+	fg.graph.randomize_positions(g)
+}
+
+function filterNodes(
+	s: State,
+	filter: string
+): void {
+	fg.graph.clear_nodes(s.graph)
+
+	if (filter === "") {
+		fg.graph.add_nodes(s.graph, s.nodes)
+		fg.graph.add_edges(s.graph, s.edges)
+	} else {
+		// regex matching all letters of the filter (out of order)
+		const regex = new RegExp(filter.split("").join(".*"), "i")
+	
+		fg.graph.add_nodes(s.graph, s.nodes.filter(node => regex.test(node.label)))
+		fg.graph.add_edges(s.graph, s.edges.filter(edge => regex.test(edge.a.label) && regex.test(edge.b.label)))
+	}
+}
+
+const GRAPH_OPTIONS: fg.graph.Options = {
+	min_move: 0.001,
+	inertia_strength: 0.3,
+	origin_strength: 0.01,
+	repel_distance: 40,
+	repel_strength: 2,
+	link_strength: 0.015,
+	grid_size: 500
+}
+
+const TITLE_SIZE_PX = 400
+
+const simulateGraph = (
+	alpha: number,
+	graph: fg.graph.Graph,
+	canvas: fg.canvas.CanvasState,
+	vw: number,
+	vh: number
+): void => {
+	alpha = alpha / 10 // slow things down a bit
+
+	fg.graph.simulate(graph, alpha)
+
+	/*
+		Push nodes away from the center (the title)
+	*/
+	let grid_radius = graph.options.grid_size / 2
+	let origin_x = grid_radius + canvas.translate.x
+	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.options.grid_size / canvas.scale) +
+		80 /* additional margin for when scrolled in */
+
+	for (let node of graph.nodes) {
+
+		let dist_x = node.pos.x - origin_x
+		let dist_y = (node.pos.y - origin_y) * 2
+		let dist = Math.sqrt(dist_x * dist_x + dist_y * dist_y)
+		if (dist > push_radius) continue
+
+		let strength = ease.in_expo((push_radius - dist) / push_radius)
+
+		node.vel.x += strength * (node.pos.x - origin_x) * 10 * alpha
+		node.vel.y += strength * (node.pos.y - origin_y) * 10 * alpha
+	}
+}
+
+const drawGraph = (c: fg.canvas.CanvasState, color_map: ColorMap): void => {
+	fg.canvas.resetFrame(c)
+	fg.canvas.drawEdges(c)
+
+	/*
+		Draw text nodes
+	*/
+	let grid_size = c.graph.options.grid_size
+	let max_size  = Math.max(c.ctx.canvas.width, c.ctx.canvas.height)
+
+	let clip_rect = fg.canvas.get_ctx_clip_rect(c.ctx, {x: 100, y: 20})
+
+	c.ctx.textAlign = "center"
+	c.ctx.textBaseline = "middle"
+
+	for (let node of c.graph.nodes) {
+
+		let x = node.pos.x / grid_size * max_size
+		let y = node.pos.y / grid_size * max_size
+
+		if (fg.canvas.in_rect_xy(clip_rect, x, y)) {
+			
+			let base_size       = max_size / 220
+			let mass_boost_size = max_size / 140
+			let mass_boost      = (node.mass - 1) / 8 / c.scale
+
+			c.ctx.font = `${base_size + mass_boost * mass_boost_size}px sans-serif`
+	
+			let opacity = 0.6 + ((node.mass - 1) / 50) * 4
+
+			c.ctx.fillStyle = node.anchor || c.hovered_node === node
+				? `rgba(129, 140, 248, ${opacity})`
+				: `hsl(${color_map[node.key as string]} / ${opacity})`
+	
+			c.ctx.fillText(node.label, x, y)
+		}
+	}
+}
+
+class State {
+	ctx: CanvasRenderingContext2D | null = null
+
+	/* copy of all nodes to filter them */
+	nodes: fg.graph.Node[] = []
+	edges: fg.graph.Edge[] = []
+
+	graph: fg.graph.Graph = fg.graph.make_graph(GRAPH_OPTIONS)
+	gestures: fg.canvas.CanvasGestures | null = null
+
+	raf_id: number = 0
+	bump_end = 0
+	alpha = 0
+	frame_iter_limit = raf.frameIterationsLimit(60)
+	schedule_filter = schedule.scheduleIdle(filterNodes)
+	ro: ResizeObserver = new ResizeObserver(() => {})
+}
+
+function init(
+	s: State,
+	props: {
+		onNodeClick: (name: string) => void
+		raw_nodes: RawGraphNode[]
+		canvas_el: HTMLCanvasElement | null
+	}
+) {
+	let {canvas_el, raw_nodes} = props
+
+	if (canvas_el == null) return
+
+	s.ctx = canvas_el.getContext("2d")
+	if (s.ctx == null) return
+
+	generateNodesFromRawData(s.graph, raw_nodes)
+	s.nodes = s.graph.nodes.slice()
+	s.edges = s.graph.edges.slice()
+
+	let color_map = generateColorMap(s.graph, s.nodes)
+
+	let canvas_state = fg.canvas.canvasState({
+		ctx: s.ctx,
+		graph: s.graph,
+		max_scale: 3,
+		init_scale: 1.7,
+		init_grid_pos: trig.ZERO
+	})
+
+	s.ro = new ResizeObserver(() => {
+		if (canvas.resizeCanvasToDisplaySize(canvas_el)) {
+			fg.canvas.updateTranslate(canvas_state, canvas_state.translate.x, canvas_state.translate.y)
+		}
+	})
+	s.ro.observe(canvas_el)
+
+	function loop(time: number) {
+		let is_active = gestures.mode.type === fg.canvas.Mode.DraggingNode
+		let iterations = Math.min(2, raf.calcIterations(s.frame_iter_limit, time))
+
+		for (let i = iterations; i > 0; i--) {
+			s.alpha = raf.updateAlpha(s.alpha, is_active || time < s.bump_end)
+			simulateGraph(s.alpha, s.graph, canvas_state, window.innerWidth, window.innerHeight)
+		}
+		
+		if (iterations > 0) {
+			drawGraph(canvas_state, color_map)
+		}
+
+		s.raf_id = requestAnimationFrame(loop)
+	}
+	s.raf_id = requestAnimationFrame(loop)
+
+	let gestures = (s.gestures = fg.canvas.canvasGestures({
+		canvas: canvas_state,
+		onGesture: e => {
+			switch (e.type) {
+			case fg.canvas.GestureEventType.Translate:
+				s.bump_end = raf.bump(s.bump_end)
+				break
+			case fg.canvas.GestureEventType.NodeClick:
+				props.onNodeClick(e.node.key as string)
+				break
+			case fg.canvas.GestureEventType.NodeDrag:
+				fg.graph.set_position(canvas_state.graph, e.node, e.pos)
+				break
+			}
+		}
+	}))
+}
+
+function updateQuery(s: State, filter_query: string) {
+	s.schedule_filter.trigger(s, filter_query)
+	s.bump_end = raf.bump(s.bump_end)
+}
+
+function cleanup(s: State) {
+	cancelAnimationFrame(s.raf_id)
+	s.gestures && fg.canvas.cleanupCanvasGestures(s.gestures)
+	s.schedule_filter.clear()
+	s.ro.disconnect()
+}
+
+export type ForceGraphProps = {
+	onNodeClick: (name: string) => void
+	/**
+	 * Filter the displayed nodes by name.
+	 *
+	 * `""` means no filter
+	 */
+	filter_query: string
+	raw_nodes: RawGraphNode[]
+}
+
+export default function ForceGraphClient(props: ForceGraphProps): react.JSX.Element {
+	const [canvas_el, setCanvasEl] = react.useState<HTMLCanvasElement | null>(null)
+
+	const state = react.useRef(new State())
+
+	react.useEffect(() => {
+		init(state.current, {
+			canvas_el: canvas_el,
+			onNodeClick: props.onNodeClick,
+			raw_nodes: props.raw_nodes
+		})
+	}, [canvas_el])
+
+	react.useEffect(() => {
+		updateQuery(state.current, props.filter_query)
+	}, [props.filter_query])
+
+	react.useEffect(() => {
+		return () => cleanup(state.current)
+	}, [])
+
+	return (
+		<div className="absolute inset-0 overflow-hidden">
+			<canvas
+				ref={setCanvasEl}
+				style={{
+					position: "absolute",
+					top: "-10%",
+					left: "-10%",
+					width: "120%",
+					height: "120%"
+				}}
+			/>
+		</div>
+	)
+}