{inline(trimmed, pin)}
); + } + } + flushList(); + return blocks; +} + +function inline(text: string, pin: (id: string) => void): ReactNode[] { + const out: ReactNode[] = []; + let last = 0; + let key = 0; + CITATION.lastIndex = 0; + let m = CITATION.exec(text); + while (m !== null) { + if (m.index > last) out.push(text.slice(last, m.index)); + const id = m[1]; + if (id) { + out.push( + , + ); + } + last = m.index + m[0].length; + m = CITATION.exec(text); + } + if (last < text.length) out.push(text.slice(last)); + return out; +} diff --git a/crates/buzz-accumulator/ui/src/components/Explore.tsx b/crates/buzz-accumulator/ui/src/components/Explore.tsx new file mode 100644 index 0000000000..4356eace0d --- /dev/null +++ b/crates/buzz-accumulator/ui/src/components/Explore.tsx @@ -0,0 +1,198 @@ +import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; +import { useState } from "react"; +import { + api, + fmtDay, + fmtTime, + fmtTokens, + selectionIsRunnable, + shortId, + type Bucket, + type PageCursor, + type Selection, + type TimeWindow, +} from "../api"; + +type Props = { selection: Selection; window: TimeWindow }; + +/** Selection preview: stats, daily rhythm, and the actual matching events. */ +export function Explore({ selection, window }: Props) { + const runnable = selectionIsRunnable(selection); + + const preview = useQuery({ + queryKey: ["preview", selection, window], + queryFn: () => api.preview(selection, window), + enabled: runnable, + }); + + const events = useInfiniteQuery({ + queryKey: ["events", selection, window], + queryFn: ({ pageParam }) => api.events(selection, window, 50, pageParam), + initialPageParam: null as PageCursor | null, + getNextPageParam: (last) => last.next, + enabled: runnable, + }); + + if (!runnable) { + return ( +