dylan/crosspost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Corpus Explorer Feature #11

Merged
dylan merged 14 commits from feat/corpus-explorer into main 2026-04-13 19:02:45 +01:00
Conversation 0 Commits 14 Files Changed 28 +151 -74
1 changed files with 151 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 430793cd09 - Show all commits

225
frontend/src/components/CorpusExplorer.tsx
View File

@@ -1,9 +1,13 @@
import { useEffect, useMemo, useState } from "react";
import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
import StatsStyling from "../styles/stats_styling"; import StatsStyling from "../styles/stats_styling";
import type { DatasetRecord } from "../utils/corpusExplorer"; import type { DatasetRecord } from "../utils/corpusExplorer";
const styles = StatsStyling; const styles = StatsStyling;
const INITIAL_RECORD_COUNT = 60;
const RECORD_BATCH_SIZE = 60;
const EXCERPT_LENGTH = 320;
const cleanText = (value: unknown) => { const cleanText = (value: unknown) => {
if (typeof value !== "string") { if (typeof value !== "string") {
@@ -79,15 +83,6 @@ const getRecordTitle = (record: DatasetRecord) => {
return content.length > 120 ? `${content.slice(0, 117)}...` : content; return content.length > 120 ? `${content.slice(0, 117)}...` : content;
}; };
const getRecordExcerpt = (record: DatasetRecord) => {
const content = cleanText(record.content);
if (!content) {
return "No content available.";
}
return content.length > 320 ? `${content.slice(0, 317)}...` : content;
};
const CorpusExplorer = ({ const CorpusExplorer = ({
open, open,
onClose, onClose,
@@ -97,79 +92,161 @@ const CorpusExplorer = ({
loading, loading,
error, error,
emptyMessage, emptyMessage,
}: CorpusExplorerProps) => ( }: CorpusExplorerProps) => {
<Dialog open={open} onClose={onClose} style={styles.modalRoot}> const [visibleCount, setVisibleCount] = useState(INITIAL_RECORD_COUNT);
<div style={styles.modalBackdrop} /> const [expandedKeys, setExpandedKeys] = useState<Record<string, boolean>>({});
<div style={styles.modalContainer}> useEffect(() => {
<DialogPanel if (open) {
style={{ setVisibleCount(INITIAL_RECORD_COUNT);
...styles.card, setExpandedKeys({});
...styles.modalPanel, }
width: "min(960px, 96vw)", }, [open, title, records.length]);
maxHeight: "88vh",
display: "flex", const visibleRecords = useMemo(
flexDirection: "column", () => records.slice(0, visibleCount),
gap: 12, [records, visibleCount],
}} );
>
<div style={styles.headerBar}> const hasMoreRecords = visibleCount < records.length;
<div>
<DialogTitle style={styles.sectionTitle}>{title}</DialogTitle> return (
<p style={styles.sectionSubtitle}> <Dialog open={open} onClose={onClose} style={styles.modalRoot}>
{description} {loading ? "Loading records..." : `${records.length.toLocaleString()} records.`} <div style={styles.modalBackdrop} />
</p>
<div style={styles.modalContainer}>
<DialogPanel
style={{
...styles.card,
...styles.modalPanel,
width: "min(960px, 96vw)",
maxHeight: "88vh",
display: "flex",
flexDirection: "column",
gap: 12,
overflow: "hidden",
}}
>
<div style={styles.headerBar}>
<div style={{ minWidth: 0 }}>
<DialogTitle style={styles.sectionTitle}>{title}</DialogTitle>
<p style={styles.sectionSubtitle}>
{description} {loading ? "Loading records..." : `${records.length.toLocaleString()} records.`}
</p>
</div>
<button onClick={onClose} style={styles.buttonSecondary}>
Close
</button>
</div> </div>
<button onClick={onClose} style={styles.buttonSecondary}> {error ? <p style={styles.sectionSubtitle}>{error}</p> : null}
Close
</button>
</div>
{error ? <p style={styles.sectionSubtitle}>{error}</p> : null} {!loading && !error && !records.length ? (
<p style={styles.sectionSubtitle}>{emptyMessage}</p>
) : null}
{!loading && !error && !records.length ? ( {loading ? <div style={styles.topUserMeta}>Preparing corpus slice...</div> : null}
<p style={styles.sectionSubtitle}>{emptyMessage}</p>
) : null}
{loading ? ( {!loading && !error && records.length ? (
<div style={styles.topUserMeta}>Preparing corpus slice...</div> <>
) : null} <div
style={{
...styles.topUsersList,
overflowY: "auto",
overflowX: "hidden",
paddingRight: 4,
}}
>
{visibleRecords.map((record, index) => {
const recordKey = getRecordKey(record, index);
const titleText = getRecordTitle(record);
const content = cleanText(record.content);
const isExpanded = !!expandedKeys[recordKey];
const canExpand = content.length > EXCERPT_LENGTH;
const excerpt =
canExpand && !isExpanded
? `${content.slice(0, EXCERPT_LENGTH - 3)}...`
: content || "No content available.";
{!loading && !error && records.length ? ( return (
<div <div key={recordKey} style={styles.topUserItem}>
style={{ <div style={{ ...styles.headerBar, alignItems: "flex-start" }}>
...styles.topUsersList, <div style={{ minWidth: 0, flex: 1 }}>
overflowY: "auto", {titleText ? <div style={styles.topUserName}>{titleText}</div> : null}
paddingRight: 4, <div
}} style={{
> ...styles.topUserMeta,
{records.map((record, index) => ( overflowWrap: "anywhere",
<div key={getRecordKey(record, index)} style={styles.topUserItem}> wordBreak: "break-word",
<div style={{ ...styles.headerBar, alignItems: "flex-start" }}> }}
<div> >
{getRecordTitle(record) ? ( {displayText(record.author, "Unknown author")} • {displayText(record.source, "Unknown source")} • {displayText(record.type, "record")} • {formatRecordDate(record)}
<div style={styles.topUserName}>{getRecordTitle(record)}</div> </div>
) : null} </div>
<div style={styles.topUserMeta}> <div
{displayText(record.author, "Unknown author")} • {displayText(record.source, "Unknown source")} • {displayText(record.type, "record")} • {formatRecordDate(record)} style={{
...styles.topUserMeta,
marginLeft: 12,
textAlign: "right",
overflowWrap: "anywhere",
wordBreak: "break-word",
}}
>
{cleanText(record.topic) ? `Topic: ${cleanText(record.topic)}` : ""}
</div>
</div>
<div
style={{
...styles.topUserMeta,
marginTop: 8,
whiteSpace: "pre-wrap",
overflowWrap: "anywhere",
wordBreak: "break-word",
}}
>
{excerpt}
</div>
{canExpand ? (
<div style={{ marginTop: 10 }}>
<button
onClick={() =>
setExpandedKeys((current) => ({
...current,
[recordKey]: !current[recordKey],
}))
}
style={styles.buttonSecondary}
>
{isExpanded ? "Show Less" : "Show More"}
</button>
</div>
) : null}
</div> </div>
</div> );
<div style={styles.topUserMeta}> })}
{cleanText(record.topic) ? `Topic: ${cleanText(record.topic)}` : ""}
</div>
</div>
<div style={{ ...styles.topUserMeta, marginTop: 8, whiteSpace: "pre-wrap" }}>
{getRecordExcerpt(record)}
</div>
</div> </div>
))}
</div> {hasMoreRecords ? (
) : null} <div style={{ display: "flex", justifyContent: "center" }}>
</DialogPanel> <button
</div> onClick={() =>
</Dialog> setVisibleCount((current) => current + RECORD_BATCH_SIZE)
); }
style={styles.buttonSecondary}
>
Show More Records
</button>
</div>
) : null}
</>
) : null}
</DialogPanel>
</div>
</Dialog>
);
};
export default CorpusExplorer; export default CorpusExplorer;