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

style: run prettifier plugin on entire frontend

Browse Source
This commit is contained in:
Dylan De Faoite
2026-03-25 19:30:21 +00:00
parent 8730af146d
commit aae10c4d9d
20 changed files with 1381 additions and 868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/AppLayout.tsx
View File

@@ -3,7 +3,7 @@ import axios from "axios";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import StatsStyling from "../styles/stats_styling";
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL;
type ProfileResponse = {
user?: Record<string, unknown>;
@@ -33,7 +33,10 @@ const AppLayout = () => {
const location = useLocation();
const navigate = useNavigate();
const [isSignedIn, setIsSignedIn] = useState(false);
const [currentUser, setCurrentUser] = useState<Record<string, unknown> | null>(null);
const [currentUser, setCurrentUser] = useState<Record<
string,
unknown
> | null>(null);
const syncAuthState = useCallback(async () => {
const token = localStorage.getItem("access_token");
@@ -48,7 +51,9 @@ const AppLayout = () => {
axios.defaults.headers.common.Authorization = `Bearer ${token}`;
try {
const response = await axios.get<ProfileResponse>(`${API_BASE_URL}/profile`);
const response = await axios.get<ProfileResponse>(
`${API_BASE_URL}/profile`,
);
setIsSignedIn(true);
setCurrentUser(response.data.user ?? null);
} catch {
@@ -81,27 +86,35 @@ const AppLayout = () => {
<div style={{ ...styles.container, ...styles.appHeaderWrap }}>
<div style={{ ...styles.card, ...styles.headerBar }}>
<div style={styles.appHeaderBrandRow}>
<span style={styles.appTitle}>
CrossPost Analysis Engine
</span>
<span style={styles.appTitle}>CrossPost Analysis Engine</span>
<span
style={{
...styles.authStatusBadge,
...(isSignedIn ? styles.authStatusSignedIn : styles.authStatusSignedOut),
...(isSignedIn
? styles.authStatusSignedIn
: styles.authStatusSignedOut),
}}
>
{isSignedIn ? `Signed in: ${getUserLabel(currentUser)}` : "Not signed in"}
{isSignedIn
? `Signed in: ${getUserLabel(currentUser)}`
: "Not signed in"}
</span>
</div>
<div style={styles.controlsWrapped}>
{isSignedIn && <button
type="button"
style={location.pathname === "/datasets" ? styles.buttonPrimary : styles.buttonSecondary}
onClick={() => navigate("/datasets")}
>
My datasets
</button>}
{isSignedIn && (
<button
type="button"
style={
location.pathname === "/datasets"
? styles.buttonPrimary
: styles.buttonSecondary
}
onClick={() => navigate("/datasets")}
>
My datasets
</button>
)}
<button
type="button"

12
frontend/src/components/Card.tsx
View File

@@ -8,20 +8,20 @@ const Card = (props: {
value: string | number;
sublabel?: string;
rightSlot?: React.ReactNode;
style?: CSSProperties
style?: CSSProperties;
}) => {
return (
<div style={{ ...styles.cardBase, ...props.style }}>
<div style={styles.cardTopRow}>
<div style={styles.cardLabel}>
{props.label}
</div>
<div style={styles.cardLabel}>{props.label}</div>
{props.rightSlot ? <div>{props.rightSlot}</div> : null}
</div>
<div style={styles.cardValue}>{props.value}</div>
{props.sublabel ? <div style={styles.cardSubLabel}>{props.sublabel}</div> : null}
{props.sublabel ? (
<div style={styles.cardSubLabel}>{props.sublabel}</div>
) : null}
</div>
);
}
};
export default Card;

14
frontend/src/components/ConfirmationModal.tsx
View File

@@ -34,10 +34,20 @@ export default function ConfirmationModal({
<p style={styles.sectionSubtitle}>{message}</p>
<div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
<button type="button" onClick={onCancel} style={styles.buttonSecondary} disabled={loading}>
<button
type="button"
onClick={onCancel}
style={styles.buttonSecondary}
disabled={loading}
>
{cancelLabel}
</button>
<button type="button" onClick={onConfirm} style={styles.buttonDanger} disabled={loading}>
<button
type="button"
onClick={onConfirm}
style={styles.buttonDanger}
disabled={loading}
>
{loading ? "Deleting..." : confirmLabel}
</button>
</div>

88
frontend/src/components/CulturalStats.tsx
View File

@@ -14,15 +14,17 @@ const CulturalStats = ({ data }: CulturalStatsProps) => {
const inGroupWords = identity?.in_group_usage ?? 0;
const outGroupWords = identity?.out_group_usage ?? 0;
const totalGroupWords = inGroupWords + outGroupWords;
const inGroupWordRate = typeof identity?.in_group_ratio === "number"
? identity.in_group_ratio * 100
: null;
const outGroupWordRate = typeof identity?.out_group_ratio === "number"
? identity.out_group_ratio * 100
: null;
const inGroupWordRate =
typeof identity?.in_group_ratio === "number"
? identity.in_group_ratio * 100
: null;
const outGroupWordRate =
typeof identity?.out_group_ratio === "number"
? identity.out_group_ratio * 100
: null;
const rawEntities = data.avg_emotion_per_entity?.entity_emotion_avg ?? {};
const entities = Object.entries(rawEntities)
.sort((a, b) => (b[1].post_count - a[1].post_count))
.sort((a, b) => b[1].post_count - a[1].post_count)
.slice(0, 20);
const topEmotion = (emotionAvg: Record<string, number> | undefined) => {
@@ -42,7 +44,10 @@ const CulturalStats = ({ data }: CulturalStatsProps) => {
<div style={{ ...styles.container, ...styles.grid }}>
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>Community Framing Overview</h2>
<p style={styles.sectionSubtitle}>Simple view of how often people use "us" words vs "them" words, and the tone around that language.</p>
<p style={styles.sectionSubtitle}>
Simple view of how often people use "us" words vs "them" words, and
the tone around that language.
</p>
</div>
<Card
@@ -84,13 +89,17 @@ const CulturalStats = ({ data }: CulturalStatsProps) => {
/>
<Card
label="In-Group Share"
value={inGroupWordRate === null ? "—" : `${inGroupWordRate.toFixed(2)}%`}
value={
inGroupWordRate === null ? "—" : `${inGroupWordRate.toFixed(2)}%`
}
sublabel="Share of all words"
style={{ gridColumn: "span 3" }}
/>
<Card
label="Out-Group Share"
value={outGroupWordRate === null ? "—" : `${outGroupWordRate.toFixed(2)}%`}
value={
outGroupWordRate === null ? "—" : `${outGroupWordRate.toFixed(2)}%`
}
sublabel="Share of all words"
style={{ gridColumn: "span 3" }}
/>
@@ -98,52 +107,87 @@ const CulturalStats = ({ data }: CulturalStatsProps) => {
<Card
label="Hedging Words"
value={stance?.hedge_total?.toLocaleString() ?? "—"}
sublabel={typeof stance?.hedge_per_1k_tokens === "number" ? `${stance.hedge_per_1k_tokens.toFixed(1)} per 1k words` : "Word frequency"}
sublabel={
typeof stance?.hedge_per_1k_tokens === "number"
? `${stance.hedge_per_1k_tokens.toFixed(1)} per 1k words`
: "Word frequency"
}
style={{ gridColumn: "span 3" }}
/>
<Card
label="Certainty Words"
value={stance?.certainty_total?.toLocaleString() ?? "—"}
sublabel={typeof stance?.certainty_per_1k_tokens === "number" ? `${stance.certainty_per_1k_tokens.toFixed(1)} per 1k words` : "Word frequency"}
sublabel={
typeof stance?.certainty_per_1k_tokens === "number"
? `${stance.certainty_per_1k_tokens.toFixed(1)} per 1k words`
: "Word frequency"
}
style={{ gridColumn: "span 3" }}
/>
<Card
label="Need/Should Words"
value={stance?.deontic_total?.toLocaleString() ?? "—"}
sublabel={typeof stance?.deontic_per_1k_tokens === "number" ? `${stance.deontic_per_1k_tokens.toFixed(1)} per 1k words` : "Word frequency"}
sublabel={
typeof stance?.deontic_per_1k_tokens === "number"
? `${stance.deontic_per_1k_tokens.toFixed(1)} per 1k words`
: "Word frequency"
}
style={{ gridColumn: "span 3" }}
/>
<Card
label="Permission Words"
value={stance?.permission_total?.toLocaleString() ?? "—"}
sublabel={typeof stance?.permission_per_1k_tokens === "number" ? `${stance.permission_per_1k_tokens.toFixed(1)} per 1k words` : "Word frequency"}
sublabel={
typeof stance?.permission_per_1k_tokens === "number"
? `${stance.permission_per_1k_tokens.toFixed(1)} per 1k words`
: "Word frequency"
}
style={{ gridColumn: "span 3" }}
/>
<div style={{ ...styles.card, gridColumn: "span 6" }}>
<h2 style={styles.sectionTitle}>Mood in "Us" Posts</h2>
<p style={styles.sectionSubtitle}>Most likely emotion when in-group wording is stronger.</p>
<div style={styles.topUserName}>{topEmotion(identity?.in_group_emotion_avg)}</div>
<p style={styles.sectionSubtitle}>
Most likely emotion when in-group wording is stronger.
</p>
<div style={styles.topUserName}>
{topEmotion(identity?.in_group_emotion_avg)}
</div>
</div>
<div style={{ ...styles.card, gridColumn: "span 6" }}>
<h2 style={styles.sectionTitle}>Mood in "Them" Posts</h2>
<p style={styles.sectionSubtitle}>Most likely emotion when out-group wording is stronger.</p>
<div style={styles.topUserName}>{topEmotion(identity?.out_group_emotion_avg)}</div>
<p style={styles.sectionSubtitle}>
Most likely emotion when out-group wording is stronger.
</p>
<div style={styles.topUserName}>
{topEmotion(identity?.out_group_emotion_avg)}
</div>
</div>
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>Entity Mood Snapshot</h2>
<p style={styles.sectionSubtitle}>Most mentioned entities and the mood that appears most with each.</p>
<p style={styles.sectionSubtitle}>
Most mentioned entities and the mood that appears most with each.
</p>
{!entities.length ? (
<div style={styles.topUserMeta}>No entity-level cultural data available.</div>
<div style={styles.topUserMeta}>
No entity-level cultural data available.
</div>
) : (
<div style={{ ...styles.topUsersList, maxHeight: 420, overflowY: "auto" }}>
<div
style={{
...styles.topUsersList,
maxHeight: 420,
overflowY: "auto",
}}
>
{entities.map(([entity, aggregate]) => (
<div key={entity} style={styles.topUserItem}>
<div style={styles.topUserName}>{entity}</div>
<div style={styles.topUserMeta}>
{aggregate.post_count.toLocaleString()} posts • Likely mood: {topEmotion(aggregate.emotion_avg)}
{aggregate.post_count.toLocaleString()} posts • Likely mood:{" "}
{topEmotion(aggregate.emotion_avg)}
</div>
</div>
))}

135
frontend/src/components/EmotionalStats.tsx
View File

@@ -1,16 +1,17 @@
import type { ContentAnalysisResponse } from "../types/ApiTypes"
import type { ContentAnalysisResponse } from "../types/ApiTypes";
import StatsStyling from "../styles/stats_styling";
const styles = StatsStyling;
type EmotionalStatsProps = {
contentData: ContentAnalysisResponse;
}
};
const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
const EmotionalStats = ({ contentData }: EmotionalStatsProps) => {
const rows = contentData.average_emotion_by_topic ?? [];
const overallEmotionAverage = contentData.overall_emotion_average ?? [];
const dominantEmotionDistribution = contentData.dominant_emotion_distribution ?? [];
const dominantEmotionDistribution =
contentData.dominant_emotion_distribution ?? [];
const emotionBySource = contentData.emotion_by_source ?? [];
const lowSampleThreshold = 20;
const stableSampleThreshold = 50;
@@ -34,7 +35,7 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
topic: String(row.topic),
count: Number(row.n ?? 0),
emotion: maxKey.replace("emotion_", "") || "unknown",
value: maxValue > Number.NEGATIVE_INFINITY ? maxValue : 0
value: maxValue > Number.NEGATIVE_INFINITY ? maxValue : 0,
};
});
@@ -48,8 +49,12 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
.filter((count) => Number.isFinite(count) && count > 0)
.sort((a, b) => a - b);
const lowSampleTopics = strongestPerTopic.filter((topic) => topic.count < lowSampleThreshold).length;
const stableSampleTopics = strongestPerTopic.filter((topic) => topic.count >= stableSampleThreshold).length;
const lowSampleTopics = strongestPerTopic.filter(
(topic) => topic.count < lowSampleThreshold,
).length;
const stableSampleTopics = strongestPerTopic.filter(
(topic) => topic.count >= stableSampleThreshold,
).length;
const medianSampleSize = sampleSizes.length
? sampleSizes[Math.floor(sampleSizes.length / 2)]
@@ -68,15 +73,37 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
<div style={styles.page}>
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
<h2 style={styles.sectionTitle}>Topic Mood Overview</h2>
<p style={styles.sectionSubtitle}>Use the strength score together with post count. Topics with fewer than {lowSampleThreshold} events are often noisy.</p>
<p style={styles.sectionSubtitle}>
Use the strength score together with post count. Topics with fewer
than {lowSampleThreshold} events are often noisy.
</p>
<div style={styles.emotionalSummaryRow}>
<span><strong style={{ color: "#24292f" }}>Topics:</strong> {strongestPerTopic.length}</span>
<span><strong style={{ color: "#24292f" }}>Median Posts:</strong> {medianSampleSize}</span>
<span><strong style={{ color: "#24292f" }}>Small Topics (&lt;{lowSampleThreshold}):</strong> {lowSampleTopics}</span>
<span><strong style={{ color: "#24292f" }}>Stable Topics ({stableSampleThreshold}+):</strong> {stableSampleTopics}</span>
<span>
<strong style={{ color: "#24292f" }}>Topics:</strong>{" "}
{strongestPerTopic.length}
</span>
<span>
<strong style={{ color: "#24292f" }}>Median Posts:</strong>{" "}
{medianSampleSize}
</span>
<span>
<strong style={{ color: "#24292f" }}>
Small Topics (&lt;{lowSampleThreshold}):
</strong>{" "}
{lowSampleTopics}
</span>
<span>
<strong style={{ color: "#24292f" }}>
Stable Topics ({stableSampleThreshold}+):
</strong>{" "}
{stableSampleTopics}
</span>
</div>
<p style={{ ...styles.sectionSubtitle, marginTop: 10, marginBottom: 0 }}>
Strength means how far the top emotion is ahead in that topic. It does not mean model accuracy.
<p
style={{ ...styles.sectionSubtitle, marginTop: 10, marginBottom: 0 }}
>
Strength means how far the top emotion is ahead in that topic. It does
not mean model accuracy.
</p>
</div>
@@ -85,14 +112,24 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
<h2 style={styles.sectionTitle}>Mood Averages</h2>
<p style={styles.sectionSubtitle}>Average score for each emotion.</p>
{!overallEmotionAverage.length ? (
<div style={styles.topUserMeta}>No overall emotion averages available.</div>
<div style={styles.topUserMeta}>
No overall emotion averages available.
</div>
) : (
<div style={{ ...styles.topUsersList, maxHeight: 260, overflowY: "auto" }}>
<div
style={{
...styles.topUsersList,
maxHeight: 260,
overflowY: "auto",
}}
>
{[...overallEmotionAverage]
.sort((a, b) => b.score - a.score)
.map((row) => (
<div key={row.emotion} style={styles.topUserItem}>
<div style={styles.topUserName}>{formatEmotion(row.emotion)}</div>
<div style={styles.topUserName}>
{formatEmotion(row.emotion)}
</div>
<div style={styles.topUserMeta}>{row.score.toFixed(3)}</div>
</div>
))}
@@ -102,17 +139,32 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
<div style={{ ...styles.card, gridColumn: "span 4" }}>
<h2 style={styles.sectionTitle}>Mood Split</h2>
<p style={styles.sectionSubtitle}>How often each emotion is dominant.</p>
<p style={styles.sectionSubtitle}>
How often each emotion is dominant.
</p>
{!dominantEmotionDistribution.length ? (
<div style={styles.topUserMeta}>No dominant-emotion split available.</div>
<div style={styles.topUserMeta}>
No dominant-emotion split available.
</div>
) : (
<div style={{ ...styles.topUsersList, maxHeight: 260, overflowY: "auto" }}>
<div
style={{
...styles.topUsersList,
maxHeight: 260,
overflowY: "auto",
}}
>
{[...dominantEmotionDistribution]
.sort((a, b) => b.ratio - a.ratio)
.map((row) => (
<div key={row.emotion} style={styles.topUserItem}>
<div style={styles.topUserName}>{formatEmotion(row.emotion)}</div>
<div style={styles.topUserMeta}>{(row.ratio * 100).toFixed(1)}% • {row.count.toLocaleString()} events</div>
<div style={styles.topUserName}>
{formatEmotion(row.emotion)}
</div>
<div style={styles.topUserMeta}>
{(row.ratio * 100).toFixed(1)}% •{" "}
{row.count.toLocaleString()} events
</div>
</div>
))}
</div>
@@ -123,16 +175,26 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
<h2 style={styles.sectionTitle}>Mood by Source</h2>
<p style={styles.sectionSubtitle}>Leading emotion in each source.</p>
{!emotionBySource.length ? (
<div style={styles.topUserMeta}>No source emotion profile available.</div>
<div style={styles.topUserMeta}>
No source emotion profile available.
</div>
) : (
<div style={{ ...styles.topUsersList, maxHeight: 260, overflowY: "auto" }}>
<div
style={{
...styles.topUsersList,
maxHeight: 260,
overflowY: "auto",
}}
>
{[...emotionBySource]
.sort((a, b) => b.event_count - a.event_count)
.map((row) => (
<div key={row.source} style={styles.topUserItem}>
<div style={styles.topUserName}>{row.source}</div>
<div style={styles.topUserMeta}>
{formatEmotion(row.dominant_emotion)} • {row.dominant_score.toFixed(3)} • {row.event_count.toLocaleString()} events
{formatEmotion(row.dominant_emotion)} •{" "}
{row.dominant_score.toFixed(3)} •{" "}
{row.event_count.toLocaleString()} events
</div>
</div>
))}
@@ -142,20 +204,27 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>Topic Snapshots</h2>
<p style={styles.sectionSubtitle}>Per-topic mood with strength and post count.</p>
<p style={styles.sectionSubtitle}>
Per-topic mood with strength and post count.
</p>
<div style={{ ...styles.grid, marginTop: 10 }}>
{strongestPerTopic.map((topic) => (
<div key={topic.topic} style={{ ...styles.cardBase, gridColumn: "span 4" }}>
<h3 style={{ ...styles.sectionTitle, marginBottom: 6 }}>{topic.topic}</h3>
<div style={styles.emotionalTopicLabel}>
Likely Mood
</div>
<div
key={topic.topic}
style={{ ...styles.cardBase, gridColumn: "span 4" }}
>
<h3 style={{ ...styles.sectionTitle, marginBottom: 6 }}>
{topic.topic}
</h3>
<div style={styles.emotionalTopicLabel}>Likely Mood</div>
<div style={styles.emotionalTopicValue}>
{formatEmotion(topic.emotion)}
</div>
<div style={styles.emotionalMetricRow}>
<span>Strength</span>
<span style={styles.emotionalMetricValue}>{topic.value.toFixed(3)}</span>
<span style={styles.emotionalMetricValue}>
{topic.value.toFixed(3)}
</span>
</div>
<div style={styles.emotionalMetricRowCompact}>
<span>Posts in Topic</span>
@@ -168,6 +237,6 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
</div>
</div>
);
}
};
export default EmotionalStats;

169
frontend/src/components/InteractionalStats.tsx
View File

@@ -24,25 +24,32 @@ type InteractionalStatsProps = {
const InteractionalStats = ({ data }: InteractionalStatsProps) => {
const graph = data.interaction_graph ?? {};
const userCount = Object.keys(graph).length;
const edges = Object.values(graph).flatMap((targets) => Object.values(targets));
const edges = Object.values(graph).flatMap((targets) =>
Object.values(targets),
);
const edgeCount = edges.length;
const interactionVolume = edges.reduce((sum, value) => sum + value, 0);
const concentration = data.conversation_concentration;
const topTenCommentShare = typeof concentration?.top_10pct_comment_share === "number"
? concentration?.top_10pct_comment_share
: null;
const topTenAuthorCount = typeof concentration?.top_10pct_author_count === "number"
? concentration.top_10pct_author_count
: null;
const totalCommentingAuthors = typeof concentration?.total_commenting_authors === "number"
? concentration.total_commenting_authors
: null;
const singleCommentAuthorRatio = typeof concentration?.single_comment_author_ratio === "number"
? concentration.single_comment_author_ratio
: null;
const singleCommentAuthors = typeof concentration?.single_comment_authors === "number"
? concentration.single_comment_authors
: null;
const topTenCommentShare =
typeof concentration?.top_10pct_comment_share === "number"
? concentration?.top_10pct_comment_share
: null;
const topTenAuthorCount =
typeof concentration?.top_10pct_author_count === "number"
? concentration.top_10pct_author_count
: null;
const totalCommentingAuthors =
typeof concentration?.total_commenting_authors === "number"
? concentration.total_commenting_authors
: null;
const singleCommentAuthorRatio =
typeof concentration?.single_comment_author_ratio === "number"
? concentration.single_comment_author_ratio
: null;
const singleCommentAuthors =
typeof concentration?.single_comment_authors === "number"
? concentration.single_comment_authors
: null;
const topPairs = (data.top_interaction_pairs ?? [])
.filter((item): item is [[string, string], number] => {
@@ -53,26 +60,28 @@ const InteractionalStats = ({ data }: InteractionalStatsProps) => {
const pair = item[0];
const count = item[1];
return Array.isArray(pair)
&& pair.length === 2
&& typeof pair[0] === "string"
&& typeof pair[1] === "string"
&& typeof count === "number";
return (
Array.isArray(pair) &&
pair.length === 2 &&
typeof pair[0] === "string" &&
typeof pair[1] === "string" &&
typeof count === "number"
);
})
.slice(0, 20);
const topPairChartData = topPairs.slice(0, 8).map(([[source, target], value], index) => ({
pair: `${source} -> ${target}`,
replies: value,
rank: index + 1,
}));
const topPairChartData = topPairs
.slice(0, 8)
.map(([[source, target], value], index) => ({
pair: `${source} -> ${target}`,
replies: value,
rank: index + 1,
}));
const topTenSharePercent = topTenCommentShare === null
? null
: topTenCommentShare * 100;
const nonTopTenSharePercent = topTenSharePercent === null
? null
: Math.max(0, 100 - topTenSharePercent);
const topTenSharePercent =
topTenCommentShare === null ? null : topTenCommentShare * 100;
const nonTopTenSharePercent =
topTenSharePercent === null ? null : Math.max(0, 100 - topTenSharePercent);
let concentrationPieData: { name: string; value: number }[] = [];
if (topTenSharePercent !== null && nonTopTenSharePercent !== null) {
@@ -89,12 +98,18 @@ const InteractionalStats = ({ data }: InteractionalStatsProps) => {
<div style={{ ...styles.container, ...styles.grid }}>
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>Conversation Overview</h2>
<p style={styles.sectionSubtitle}>Who talks to who, and how concentrated the replies are.</p>
<p style={styles.sectionSubtitle}>
Who talks to who, and how concentrated the replies are.
</p>
</div>
<Card
label="Average Reply Depth"
value={typeof data.average_thread_depth === "number" ? data.average_thread_depth.toFixed(2) : "—"}
value={
typeof data.average_thread_depth === "number"
? data.average_thread_depth.toFixed(2)
: "—"
}
sublabel="How deep reply chains usually go"
style={{ gridColumn: "span 3" }}
/>
@@ -118,31 +133,51 @@ const InteractionalStats = ({ data }: InteractionalStatsProps) => {
/>
<Card
label="Concentrated Replies"
value={topTenSharePercent === null ? "-" : `${topTenSharePercent.toFixed(1)}%`}
sublabel={topTenAuthorCount === null || totalCommentingAuthors === null
? "Reply share from the top 10% commenters"
: `${topTenAuthorCount.toLocaleString()} of ${totalCommentingAuthors.toLocaleString()} authors`}
value={
topTenSharePercent === null
? "-"
: `${topTenSharePercent.toFixed(1)}%`
}
sublabel={
topTenAuthorCount === null || totalCommentingAuthors === null
? "Reply share from the top 10% commenters"
: `${topTenAuthorCount.toLocaleString()} of ${totalCommentingAuthors.toLocaleString()} authors`
}
style={{ gridColumn: "span 6" }}
/>
<Card
label="Single-Comment Authors"
value={singleCommentAuthorRatio === null ? "-" : `${(singleCommentAuthorRatio * 100).toFixed(1)}%`}
sublabel={singleCommentAuthors === null
? "Authors who commented exactly once"
: `${singleCommentAuthors.toLocaleString()} authors commented exactly once`}
value={
singleCommentAuthorRatio === null
? "-"
: `${(singleCommentAuthorRatio * 100).toFixed(1)}%`
}
sublabel={
singleCommentAuthors === null
? "Authors who commented exactly once"
: `${singleCommentAuthors.toLocaleString()} authors commented exactly once`
}
style={{ gridColumn: "span 6" }}
/>
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>Conversation Visuals</h2>
<p style={styles.sectionSubtitle}>Main reply links and concentration split.</p>
<p style={styles.sectionSubtitle}>
Main reply links and concentration split.
</p>
<div style={{ ...styles.grid, marginTop: 12 }}>
<div style={{ ...styles.cardBase, gridColumn: "span 6" }}>
<h3 style={{ ...styles.sectionTitle, fontSize: "1rem" }}>Top Interaction Pairs</h3>
<h3 style={{ ...styles.sectionTitle, fontSize: "1rem" }}>
Top Interaction Pairs
</h3>
<div style={{ width: "100%", height: 300 }}>
<ResponsiveContainer>
<BarChart data={topPairChartData} layout="vertical" margin={{ top: 8, right: 16, left: 16, bottom: 8 }}>
<BarChart
data={topPairChartData}
layout="vertical"
margin={{ top: 8, right: 16, left: 16, bottom: 8 }}
>
<CartesianGrid strokeDasharray="3 3" stroke="#d9e2ec" />
<XAxis type="number" allowDecimals={false} />
<YAxis
@@ -152,14 +187,20 @@ const InteractionalStats = ({ data }: InteractionalStatsProps) => {
width={36}
/>
<Tooltip />
<Bar dataKey="replies" fill="#2b6777" radius={[0, 6, 6, 0]} />
<Bar
dataKey="replies"
fill="#2b6777"
radius={[0, 6, 6, 0]}
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
<div style={{ ...styles.cardBase, gridColumn: "span 6" }}>
<h3 style={{ ...styles.sectionTitle, fontSize: "1rem" }}>Top 10% vs Other Comment Share</h3>
<h3 style={{ ...styles.sectionTitle, fontSize: "1rem" }}>
Top 10% vs Other Comment Share
</h3>
<div style={{ width: "100%", height: 300 }}>
<ResponsiveContainer>
<PieChart>
@@ -172,7 +213,10 @@ const InteractionalStats = ({ data }: InteractionalStatsProps) => {
paddingAngle={2}
>
{concentrationPieData.map((entry, index) => (
<Cell key={`${entry.name}-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
<Cell
key={`${entry.name}-${index}`}
fill={PIE_COLORS[index % PIE_COLORS.length]}
/>
))}
</Pie>
<Tooltip />
@@ -186,15 +230,32 @@ const InteractionalStats = ({ data }: InteractionalStatsProps) => {
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>Frequent Reply Paths</h2>
<p style={styles.sectionSubtitle}>Most common user-to-user reply paths.</p>
<p style={styles.sectionSubtitle}>
Most common user-to-user reply paths.
</p>
{!topPairs.length ? (
<div style={styles.topUserMeta}>No interaction pair data available.</div>
<div style={styles.topUserMeta}>
No interaction pair data available.
</div>
) : (
<div style={{ ...styles.topUsersList, maxHeight: 420, overflowY: "auto" }}>
<div
style={{
...styles.topUsersList,
maxHeight: 420,
overflowY: "auto",
}}
>
{topPairs.map(([[source, target], value], index) => (
<div key={`${source}->${target}-${index}`} style={styles.topUserItem}>
<div style={styles.topUserName}>{source} -&gt; {target}</div>
<div style={styles.topUserMeta}>{value.toLocaleString()} replies</div>
<div
key={`${source}->${target}-${index}`}
style={styles.topUserItem}
>
<div style={styles.topUserName}>
{source} -&gt; {target}
</div>
<div style={styles.topUserMeta}>
{value.toLocaleString()} replies
</div>
</div>
))}
</div>

44
frontend/src/components/LinguisticStats.tsx
View File

@@ -23,7 +23,9 @@ const LinguisticStats = ({ data }: LinguisticStatsProps) => {
<div style={{ ...styles.container, ...styles.grid }}>
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>Language Overview</h2>
<p style={styles.sectionSubtitle}>Quick read on how broad and repetitive the wording is.</p>
<p style={styles.sectionSubtitle}>
Quick read on how broad and repetitive the wording is.
</p>
</div>
<Card
@@ -40,7 +42,9 @@ const LinguisticStats = ({ data }: LinguisticStatsProps) => {
/>
<Card
label="Vocabulary Variety"
value={typeof lexical?.ttr === "number" ? lexical.ttr.toFixed(4) : "—"}
value={
typeof lexical?.ttr === "number" ? lexical.ttr.toFixed(4) : "—"
}
sublabel="Higher means less repetition"
style={{ gridColumn: "span 4" }}
/>
@@ -48,11 +52,19 @@ const LinguisticStats = ({ data }: LinguisticStatsProps) => {
<div style={{ ...styles.card, gridColumn: "span 4" }}>
<h2 style={styles.sectionTitle}>Top Words</h2>
<p style={styles.sectionSubtitle}>Most used single words.</p>
<div style={{ ...styles.topUsersList, maxHeight: 360, overflowY: "auto" }}>
<div
style={{
...styles.topUsersList,
maxHeight: 360,
overflowY: "auto",
}}
>
{topWords.map((item) => (
<div key={item.word} style={styles.topUserItem}>
<div style={styles.topUserName}>{item.word}</div>
<div style={styles.topUserMeta}>{item.count.toLocaleString()} uses</div>
<div style={styles.topUserMeta}>
{item.count.toLocaleString()} uses
</div>
</div>
))}
</div>
@@ -61,11 +73,19 @@ const LinguisticStats = ({ data }: LinguisticStatsProps) => {
<div style={{ ...styles.card, gridColumn: "span 4" }}>
<h2 style={styles.sectionTitle}>Top Bigrams</h2>
<p style={styles.sectionSubtitle}>Most used 2-word phrases.</p>
<div style={{ ...styles.topUsersList, maxHeight: 360, overflowY: "auto" }}>
<div
style={{
...styles.topUsersList,
maxHeight: 360,
overflowY: "auto",
}}
>
{topBigrams.map((item) => (
<div key={item.ngram} style={styles.topUserItem}>
<div style={styles.topUserName}>{item.ngram}</div>
<div style={styles.topUserMeta}>{item.count.toLocaleString()} uses</div>
<div style={styles.topUserMeta}>
{item.count.toLocaleString()} uses
</div>
</div>
))}
</div>
@@ -74,11 +94,19 @@ const LinguisticStats = ({ data }: LinguisticStatsProps) => {
<div style={{ ...styles.card, gridColumn: "span 4" }}>
<h2 style={styles.sectionTitle}>Top Trigrams</h2>
<p style={styles.sectionSubtitle}>Most used 3-word phrases.</p>
<div style={{ ...styles.topUsersList, maxHeight: 360, overflowY: "auto" }}>
<div
style={{
...styles.topUsersList,
maxHeight: 360,
overflowY: "auto",
}}
>
{topTrigrams.map((item) => (
<div key={item.ngram} style={styles.topUserItem}>
<div style={styles.topUserName}>{item.ngram}</div>
<div style={styles.topUserMeta}>{item.count.toLocaleString()} uses</div>
<div style={styles.topUserMeta}>
{item.count.toLocaleString()} uses
</div>
</div>
))}
</div>

254
frontend/src/components/SummaryStats.tsx
View File

@@ -6,32 +6,32 @@ import {
YAxis,
Tooltip,
CartesianGrid,
ResponsiveContainer
ResponsiveContainer,
} from "recharts";
import ActivityHeatmap from "../stats/ActivityHeatmap";
import { ReactWordcloud } from '@cp949/react-wordcloud';
import { ReactWordcloud } from "@cp949/react-wordcloud";
import StatsStyling from "../styles/stats_styling";
import Card from "../components/Card";
import UserModal from "../components/UserModal";
import {
type SummaryResponse,
type FrequencyWord,
type UserAnalysisResponse,
import {
type SummaryResponse,
type FrequencyWord,
type UserAnalysisResponse,
type TimeAnalysisResponse,
type ContentAnalysisResponse,
type User
} from '../types/ApiTypes'
type User,
} from "../types/ApiTypes";
const styles = StatsStyling;
type SummaryStatsProps = {
userData: UserAnalysisResponse | null;
timeData: TimeAnalysisResponse | null;
contentData: ContentAnalysisResponse | null;
summary: SummaryResponse | null;
}
userData: UserAnalysisResponse | null;
timeData: TimeAnalysisResponse | null;
contentData: ContentAnalysisResponse | null;
summary: SummaryResponse | null;
};
function formatDateRange(startUnix: number, endUnix: number) {
const start = new Date(startUnix * 1000);
@@ -48,168 +48,180 @@ function formatDateRange(startUnix: number, endUnix: number) {
}
function convertFrequencyData(data: FrequencyWord[]) {
return data.map((d: FrequencyWord) => ({
text: d.word,
value: d.count,
}))
return data.map((d: FrequencyWord) => ({
text: d.word,
value: d.count,
}));
}
const SummaryStats = ({userData, timeData, contentData, summary}: SummaryStatsProps) => {
const [selectedUser, setSelectedUser] = useState<string | null>(null);
const selectedUserData: User | null = userData?.users.find((u) => u.author === selectedUser) ?? null;
const SummaryStats = ({
userData,
timeData,
contentData,
summary,
}: SummaryStatsProps) => {
const [selectedUser, setSelectedUser] = useState<string | null>(null);
const selectedUserData: User | null =
userData?.users.find((u) => u.author === selectedUser) ?? null;
return (
return (
<div style={styles.page}>
{/* main grid*/}
<div style={{ ...styles.container, ...styles.grid }}>
<Card
label="Total Activity"
value={summary?.total_events ?? "—"}
sublabel="Posts + comments"
style={{
gridColumn: "span 4",
}}
/>
<Card
label="Active People"
value={summary?.unique_users ?? "—"}
sublabel="Distinct users"
style={{
gridColumn: "span 4",
}}
/>
<Card
label="Posts vs Comments"
value={
summary ? `${summary.total_posts} / ${summary.total_comments}` : "—"
}
sublabel={`Comments per post: ${summary?.comments_per_post ?? "—"}`}
style={{
gridColumn: "span 4",
}}
/>
{/* main grid*/}
<div style={{ ...styles.container, ...styles.grid}}>
<Card
label="Total Activity"
value={summary?.total_events ?? "—"}
sublabel="Posts + comments"
style={{
gridColumn: "span 4"
}}
/>
<Card
label="Active People"
value={summary?.unique_users ?? "—"}
sublabel="Distinct users"
style={{
gridColumn: "span 4"
}}
/>
<Card
label="Posts vs Comments"
value={
summary
? `${summary.total_posts} / ${summary.total_comments}`
: "—"
}
sublabel={`Comments per post: ${summary?.comments_per_post ?? "—"}`}
style={{
gridColumn: "span 4"
}}
/>
<Card
label="Time Range"
value={
summary?.time_range
? formatDateRange(
summary.time_range.start,
summary.time_range.end,
)
: "—"
}
sublabel="Based on dataset timestamps"
style={{
gridColumn: "span 4",
}}
/>
<Card
label="Time Range"
value={
summary?.time_range
? formatDateRange(summary.time_range.start, summary.time_range.end)
: "—"
}
sublabel="Based on dataset timestamps"
style={{
gridColumn: "span 4"
}}
/>
<Card
label="One-Time Users"
value={
typeof summary?.lurker_ratio === "number"
? `${Math.round(summary.lurker_ratio * 100)}%`
: "—"
}
sublabel="Users with only one event"
style={{
gridColumn: "span 4",
}}
/>
<Card
label="One-Time Users"
value={
typeof summary?.lurker_ratio === "number"
? `${Math.round(summary.lurker_ratio * 100)}%`
: "—"
}
sublabel="Users with only one event"
style={{
gridColumn: "span 4"
}}
/>
<Card
label="Sources"
value={summary?.sources?.length ?? "—"}
sublabel={
summary?.sources?.length
? summary.sources.slice(0, 3).join(", ") +
(summary.sources.length > 3 ? "…" : "")
: "—"
}
style={{
gridColumn: "span 4"
}}
/>
<Card
label="Sources"
value={summary?.sources?.length ?? "—"}
sublabel={
summary?.sources?.length
? summary.sources.slice(0, 3).join(", ") +
(summary.sources.length > 3 ? "…" : "")
: "—"
}
style={{
gridColumn: "span 4",
}}
/>
{/* events per day */}
<div style={{ ...styles.card, gridColumn: "span 5" }}>
<h2 style={styles.sectionTitle}>Activity Over Time</h2>
<p style={styles.sectionSubtitle}>How much posting happened each day.</p>
<h2 style={styles.sectionTitle}>Activity Over Time</h2>
<p style={styles.sectionSubtitle}>
How much posting happened each day.
</p>
<div style={styles.chartWrapper}>
<div style={styles.chartWrapper}>
<ResponsiveContainer width="100%" height="100%">
<LineChart data={timeData?.events_per_day ?? []}>
<LineChart data={timeData?.events_per_day ?? []}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="count" name="Events" />
</LineChart>
</LineChart>
</ResponsiveContainer>
</div>
</div>
</div>
{/* Word Cloud */}
<div style={{ ...styles.card, gridColumn: "span 4" }}>
<h2 style={styles.sectionTitle}>Common Words</h2>
<p style={styles.sectionSubtitle}>Frequently used words across the dataset.</p>
<h2 style={styles.sectionTitle}>Common Words</h2>
<p style={styles.sectionSubtitle}>
Frequently used words across the dataset.
</p>
<div style={styles.chartWrapper}>
<div style={styles.chartWrapper}>
<ReactWordcloud
words={convertFrequencyData(contentData?.word_frequencies ?? [])}
options={{
words={convertFrequencyData(contentData?.word_frequencies ?? [])}
options={{
rotations: 2,
rotationAngles: [0, 90],
fontSizes: [14, 60],
enableTooltip: true,
}}
}}
/>
</div>
</div>
</div>
{/* Top Users */}
<div style={{...styles.card, ...styles.scrollArea, gridColumn: "span 3",
}}
<div
style={{ ...styles.card, ...styles.scrollArea, gridColumn: "span 3" }}
>
<h2 style={styles.sectionTitle}>Most Active Users</h2>
<p style={styles.sectionSubtitle}>Who posted the most events.</p>
<h2 style={styles.sectionTitle}>Most Active Users</h2>
<p style={styles.sectionSubtitle}>Who posted the most events.</p>
<div style={styles.topUsersList}>
<div style={styles.topUsersList}>
{userData?.top_users.slice(0, 100).map((item) => (
<div
<div
key={`${item.author}-${item.source}`}
style={{ ...styles.topUserItem, cursor: "pointer" }}
onClick={() => setSelectedUser(item.author)}
>
>
<div style={styles.topUserName}>{item.author}</div>
<div style={styles.topUserMeta}>
{item.source} • {item.count} events
</div>
{item.source} • {item.count} events
</div>
</div>
))}
</div>
</div>
</div>
{/* Heatmap */}
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>Weekly Activity Pattern</h2>
<p style={styles.sectionSubtitle}>When activity tends to happen by weekday and hour.</p>
<h2 style={styles.sectionTitle}>Weekly Activity Pattern</h2>
<p style={styles.sectionSubtitle}>
When activity tends to happen by weekday and hour.
</p>
<div style={styles.heatmapWrapper}>
<div style={styles.heatmapWrapper}>
<ActivityHeatmap data={timeData?.weekday_hour_heatmap ?? []} />
</div>
</div>
</div>
</div>
</div>
<UserModal
<UserModal
open={!!selectedUser}
onClose={() => setSelectedUser(null)}
username={selectedUser ?? ""}
userData={selectedUserData}
/>
/>
</div>
);
}
);
};
export default SummaryStats;

22
frontend/src/components/UserModal.tsx
View File

@@ -11,9 +11,15 @@ type Props = {
username: string;
};
export default function UserModal({ open, onClose, userData, username }: Props) {
const dominantEmotionEntry = Object.entries(userData?.avg_emotions ?? {})
.sort((a, b) => b[1] - a[1])[0];
export default function UserModal({
open,
onClose,
userData,
username,
}: Props) {
const dominantEmotionEntry = Object.entries(
userData?.avg_emotions ?? {},
).sort((a, b) => b[1] - a[1])[0];
return (
<Dialog open={open} onClose={onClose} style={styles.modalRoot}>
@@ -36,7 +42,9 @@ export default function UserModal({ open, onClose, userData, username }: Props)
<p style={styles.sectionSubtitle}>No data for this user.</p>
) : (
<div style={styles.topUsersList}>
<div style={{...styles.topUserName, fontSize: 20}}>{userData.author}</div>
<div style={{ ...styles.topUserName, fontSize: 20 }}>
{userData.author}
</div>
<div style={styles.topUserItem}>
<div style={styles.topUserName}>Posts</div>
<div style={styles.topUserMeta}>{userData.post}</div>
@@ -65,7 +73,8 @@ export default function UserModal({ open, onClose, userData, username }: Props)
<div style={styles.topUserItem}>
<div style={styles.topUserName}>Vocab Richness</div>
<div style={styles.topUserMeta}>
{userData.vocab.vocab_richness} (avg {userData.vocab.avg_words_per_event} words/event)
{userData.vocab.vocab_richness} (avg{" "}
{userData.vocab.avg_words_per_event} words/event)
</div>
</div>
) : null}
@@ -74,7 +83,8 @@ export default function UserModal({ open, onClose, userData, username }: Props)
<div style={styles.topUserItem}>
<div style={styles.topUserName}>Dominant Avg Emotion</div>
<div style={styles.topUserMeta}>
{dominantEmotionEntry[0].replace("emotion_", "")} ({dominantEmotionEntry[1].toFixed(3)})
{dominantEmotionEntry[0].replace("emotion_", "")} (
{dominantEmotionEntry[1].toFixed(3)})
</div>
</div>
) : null}

222
frontend/src/components/UserStats.tsx
View File

@@ -2,9 +2,9 @@ import { useEffect, useMemo, useRef, useState } from "react";
import ForceGraph3D from "react-force-graph-3d";
import {
type UserAnalysisResponse,
type InteractionGraph
} from '../types/ApiTypes';
type UserAnalysisResponse,
type InteractionGraph,
} from "../types/ApiTypes";
import StatsStyling from "../styles/stats_styling";
import Card from "./Card";
@@ -12,38 +12,43 @@ import Card from "./Card";
const styles = StatsStyling;
type GraphLink = {
source: string;
target: string;
value: number;
source: string;
target: string;
value: number;
};
function ApiToGraphData(apiData: InteractionGraph) {
const nodes = Object.keys(apiData).map(username => ({ id: username }));
const links: GraphLink[] = [];
for (const [source, targets] of Object.entries(apiData)) {
for (const [target, count] of Object.entries(targets)) {
links.push({ source, target, value: count });
}
const nodes = Object.keys(apiData).map((username) => ({ id: username }));
const links: GraphLink[] = [];
for (const [source, targets] of Object.entries(apiData)) {
for (const [target, count] of Object.entries(targets)) {
links.push({ source, target, value: count });
}
// drop low-value and deleted interactions to reduce clutter
const filteredLinks = links.filter(link =>
link.value >= 2 &&
link.source !== "[deleted]" &&
link.target !== "[deleted]"
);
}
// also filter out nodes that are no longer connected after link filtering
const connectedNodeIds = new Set(filteredLinks.flatMap(link => [link.source, link.target]));
const filteredNodes = nodes.filter(node => connectedNodeIds.has(node.id));
// drop low-value and deleted interactions to reduce clutter
const filteredLinks = links.filter(
(link) =>
link.value >= 2 &&
link.source !== "[deleted]" &&
link.target !== "[deleted]",
);
return { nodes: filteredNodes, links: filteredLinks};
// also filter out nodes that are no longer connected after link filtering
const connectedNodeIds = new Set(
filteredLinks.flatMap((link) => [link.source, link.target]),
);
const filteredNodes = nodes.filter((node) => connectedNodeIds.has(node.id));
return { nodes: filteredNodes, links: filteredLinks };
}
const UserStats = (props: { data: UserAnalysisResponse }) => {
const graphData = useMemo(() => ApiToGraphData(props.data.interaction_graph), [props.data.interaction_graph]);
const graphData = useMemo(
() => ApiToGraphData(props.data.interaction_graph),
[props.data.interaction_graph],
);
const graphContainerRef = useRef<HTMLDivElement | null>(null);
const [graphSize, setGraphSize] = useState({ width: 720, height: 540 });
@@ -63,86 +68,113 @@ const UserStats = (props: { data: UserAnalysisResponse }) => {
const totalUsers = props.data.users.length;
const connectedUsers = graphData.nodes.length;
const totalInteractions = graphData.links.reduce((sum, link) => sum + link.value, 0);
const avgInteractionsPerConnectedUser = connectedUsers ? totalInteractions / connectedUsers : 0;
const totalInteractions = graphData.links.reduce(
(sum, link) => sum + link.value,
0,
);
const avgInteractionsPerConnectedUser = connectedUsers
? totalInteractions / connectedUsers
: 0;
const strongestLink = graphData.links.reduce<GraphLink | null>((best, current) => {
if (!best || current.value > best.value) {
return current;
}
return best;
}, null);
const strongestLink = graphData.links.reduce<GraphLink | null>(
(best, current) => {
if (!best || current.value > best.value) {
return current;
}
return best;
},
null,
);
const highlyInteractiveUser = [...props.data.users].sort((a, b) => b.comment_share - a.comment_share)[0];
const highlyInteractiveUser = [...props.data.users].sort(
(a, b) => b.comment_share - a.comment_share,
)[0];
const mostActiveUser = props.data.top_users.find(u => u.author !== "[deleted]");
const mostActiveUser = props.data.top_users.find(
(u) => u.author !== "[deleted]",
);
return (
<div style={styles.page}>
<div style={{ ...styles.container, ...styles.grid }}>
<Card
label="Users"
value={totalUsers.toLocaleString()}
sublabel={`${connectedUsers.toLocaleString()} users in filtered graph`}
style={{ gridColumn: "span 3" }}
/>
<Card
label="Replies"
value={totalInteractions.toLocaleString()}
sublabel="Links with at least 2 replies"
style={{ gridColumn: "span 3" }}
/>
<Card
label="Replies per Connected User"
value={avgInteractionsPerConnectedUser.toFixed(1)}
sublabel="Average from visible graph links"
style={{ gridColumn: "span 3" }}
/>
<Card
label="Most Active User"
value={mostActiveUser?.author ?? "—"}
sublabel={mostActiveUser ? `${mostActiveUser.count.toLocaleString()} events` : "No user activity found"}
style={{ gridColumn: "span 3" }}
/>
<div style={{ ...styles.container, ...styles.grid }}>
<Card
label="Users"
value={totalUsers.toLocaleString()}
sublabel={`${connectedUsers.toLocaleString()} users in filtered graph`}
style={{ gridColumn: "span 3" }}
/>
<Card
label="Replies"
value={totalInteractions.toLocaleString()}
sublabel="Links with at least 2 replies"
style={{ gridColumn: "span 3" }}
/>
<Card
label="Replies per Connected User"
value={avgInteractionsPerConnectedUser.toFixed(1)}
sublabel="Average from visible graph links"
style={{ gridColumn: "span 3" }}
/>
<Card
label="Most Active User"
value={mostActiveUser?.author ?? "—"}
sublabel={
mostActiveUser
? `${mostActiveUser.count.toLocaleString()} events`
: "No user activity found"
}
style={{ gridColumn: "span 3" }}
/>
<Card
label="Strongest User Link"
value={strongestLink ? `${strongestLink.source} -> ${strongestLink.target}` : "—"}
sublabel={strongestLink ? `${strongestLink.value.toLocaleString()} replies` : "No graph links after filtering"}
style={{ gridColumn: "span 6" }}
/>
<Card
label="Most Comment-Heavy User"
value={highlyInteractiveUser?.author ?? "—"}
sublabel={
highlyInteractiveUser
? `${Math.round(highlyInteractiveUser.comment_share * 100)}% comments`
: "No user distribution available"
}
style={{ gridColumn: "span 6" }}
/>
<Card
label="Strongest User Link"
value={
strongestLink
? `${strongestLink.source} -> ${strongestLink.target}`
: "—"
}
sublabel={
strongestLink
? `${strongestLink.value.toLocaleString()} replies`
: "No graph links after filtering"
}
style={{ gridColumn: "span 6" }}
/>
<Card
label="Most Comment-Heavy User"
value={highlyInteractiveUser?.author ?? "—"}
sublabel={
highlyInteractiveUser
? `${Math.round(highlyInteractiveUser.comment_share * 100)}% comments`
: "No user distribution available"
}
style={{ gridColumn: "span 6" }}
/>
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>User Interaction Graph</h2>
<p style={styles.sectionSubtitle}>
Each node is a user, and each link shows replies between them.
</p>
<div ref={graphContainerRef} style={{ width: "100%", height: graphSize.height }}>
<ForceGraph3D
width={graphSize.width}
height={graphSize.height}
graphData={graphData}
nodeAutoColorBy="id"
linkDirectionalParticles={1}
linkDirectionalParticleSpeed={0.004}
linkWidth={(link) => Math.sqrt(Number(link.value))}
nodeLabel={(node) => `${node.id}`}
/>
</div>
<div style={{ ...styles.card, gridColumn: "span 12" }}>
<h2 style={styles.sectionTitle}>User Interaction Graph</h2>
<p style={styles.sectionSubtitle}>
Each node is a user, and each link shows replies between them.
</p>
<div
ref={graphContainerRef}
style={{ width: "100%", height: graphSize.height }}
>
<ForceGraph3D
width={graphSize.width}
height={graphSize.height}
graphData={graphData}
nodeAutoColorBy="id"
linkDirectionalParticles={1}
linkDirectionalParticleSpeed={0.004}
linkWidth={(link) => Math.sqrt(Number(link.value))}
nodeLabel={(node) => `${node.id}`}
/>
</div>
</div>
</div>
</div>
);
}
};
export default UserStats;

238
frontend/src/pages/AutoScrape.tsx
View File

@@ -58,8 +58,8 @@ const AutoScrapePage = () => {
if (axios.isAxiosError(requestError)) {
setReturnMessage(
`Failed to load available sources: ${String(
requestError.response?.data?.error || requestError.message
)}`
requestError.response?.data?.error || requestError.message,
)}`,
);
} else {
setReturnMessage("Failed to load available sources.");
@@ -70,15 +70,19 @@ const AutoScrapePage = () => {
});
}, []);
const updateSourceConfig = (index: number, field: keyof SourceConfig, value: string) => {
const updateSourceConfig = (
index: number,
field: keyof SourceConfig,
value: string,
) => {
setSourceConfigs((previous) =>
previous.map((config, configIndex) =>
configIndex === index
? field === "sourceName"
? { ...config, sourceName: value, search: "", category: "" }
: { ...config, [field]: value }
: config
)
: config,
),
);
};
@@ -93,7 +97,9 @@ const AutoScrapePage = () => {
};
const removeSourceConfig = (index: number) => {
setSourceConfigs((previous) => previous.filter((_, configIndex) => configIndex !== index));
setSourceConfigs((previous) =>
previous.filter((_, configIndex) => configIndex !== index),
);
};
const autoScrape = async () => {
@@ -123,7 +129,9 @@ const AutoScrapePage = () => {
return {
name: source.sourceName,
limit: Number(source.limit || 100),
search: supportsSearch(sourceOption) ? source.search.trim() || undefined : undefined,
search: supportsSearch(sourceOption)
? source.search.trim() || undefined
: undefined,
category: supportsCategories(sourceOption)
? source.category.trim() || undefined
: undefined,
@@ -131,12 +139,15 @@ const AutoScrapePage = () => {
});
const invalidSource = normalizedSources.find(
(source) => !source.name || !Number.isFinite(source.limit) || source.limit <= 0
(source) =>
!source.name || !Number.isFinite(source.limit) || source.limit <= 0,
);
if (invalidSource) {
setHasError(true);
setReturnMessage("Every source needs a name and a limit greater than zero.");
setReturnMessage(
"Every source needs a name and a limit greater than zero.",
);
return;
}
@@ -155,13 +166,13 @@ const AutoScrapePage = () => {
headers: {
Authorization: `Bearer ${token}`,
},
}
},
);
const datasetId = Number(response.data.dataset_id);
setReturnMessage(
`Auto scrape queued successfully (dataset #${datasetId}). Redirecting to processing status...`
`Auto scrape queued successfully (dataset #${datasetId}). Redirecting to processing status...`,
);
setTimeout(() => {
@@ -171,7 +182,9 @@ const AutoScrapePage = () => {
setHasError(true);
if (axios.isAxiosError(requestError)) {
const message = String(
requestError.response?.data?.error || requestError.message || "Auto scrape failed."
requestError.response?.data?.error ||
requestError.message ||
"Auto scrape failed.",
);
setReturnMessage(`Auto scrape failed: ${message}`);
} else {
@@ -189,15 +202,26 @@ const AutoScrapePage = () => {
<div>
<h1 style={styles.sectionHeaderTitle}>Auto Scrape Dataset</h1>
<p style={styles.sectionHeaderSubtitle}>
Select sources and scrape settings, then queue processing automatically.
Select sources and scrape settings, then queue processing
automatically.
</p>
<p style={{ ...styles.subtleBodyText, marginTop: 6, color: "#9a6700" }}>
Warning: Scraping more than 250 posts from any single site can take hours due to rate limits.
<p
style={{
...styles.subtleBodyText,
marginTop: 6,
color: "#9a6700",
}}
>
Warning: Scraping more than 250 posts from any single site can
take hours due to rate limits.
</p>
</div>
<button
type="button"
style={{ ...styles.buttonPrimary, opacity: isSubmitting || isLoadingSources ? 0.75 : 1 }}
style={{
...styles.buttonPrimary,
opacity: isSubmitting || isLoadingSources ? 0.75 : 1,
}}
onClick={autoScrape}
disabled={isSubmitting || isLoadingSources}
>
@@ -213,8 +237,12 @@ const AutoScrapePage = () => {
}}
>
<div style={{ ...styles.card, gridColumn: "auto" }}>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>Dataset Name</h2>
<p style={styles.sectionSubtitle}>Use a clear label so you can identify this run later.</p>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>
Dataset Name
</h2>
<p style={styles.sectionSubtitle}>
Use a clear label so you can identify this run later.
</p>
<input
style={{ ...styles.input, ...styles.inputFullWidth }}
type="text"
@@ -225,97 +253,129 @@ const AutoScrapePage = () => {
</div>
<div style={{ ...styles.card, gridColumn: "auto" }}>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>Sources</h2>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>
Sources
</h2>
<p style={styles.sectionSubtitle}>
Configure source, limit, optional search, and optional category.
</p>
{isLoadingSources && <p style={styles.subtleBodyText}>Loading sources...</p>}
{isLoadingSources && (
<p style={styles.subtleBodyText}>Loading sources...</p>
)}
{!isLoadingSources && sourceOptions.length === 0 && (
<p style={styles.subtleBodyText}>No source connectors are currently available.</p>
<p style={styles.subtleBodyText}>
No source connectors are currently available.
</p>
)}
{!isLoadingSources && sourceOptions.length > 0 && (
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
<div
style={{ display: "flex", flexDirection: "column", gap: 10 }}
>
{sourceConfigs.map((source, index) => {
const sourceOption = getSourceOption(source.sourceName);
const searchEnabled = supportsSearch(sourceOption);
const categoriesEnabled = supportsCategories(sourceOption);
return (
<div
key={`source-${index}`}
style={{
border: "1px solid #d0d7de",
borderRadius: 8,
padding: 12,
background: "#f6f8fa",
display: "grid",
gap: 8,
}}
>
<select
value={source.sourceName}
style={{ ...styles.input, ...styles.inputFullWidth }}
onChange={(event) => updateSourceConfig(index, "sourceName", event.target.value)}
<div
key={`source-${index}`}
style={{
border: "1px solid #d0d7de",
borderRadius: 8,
padding: 12,
background: "#f6f8fa",
display: "grid",
gap: 8,
}}
>
{sourceOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
<input
type="number"
min={1}
value={source.limit}
placeholder="Limit"
style={{ ...styles.input, ...styles.inputFullWidth }}
onChange={(event) => updateSourceConfig(index, "limit", event.target.value)}
/>
<input
type="text"
value={source.search}
placeholder={
searchEnabled
? "Search term (optional)"
: "Search not supported for this source"
}
style={{ ...styles.input, ...styles.inputFullWidth }}
disabled={!searchEnabled}
onChange={(event) => updateSourceConfig(index, "search", event.target.value)}
/>
<input
type="text"
value={source.category}
placeholder={
categoriesEnabled
? "Category (optional)"
: "Categories not supported for this source"
}
style={{ ...styles.input, ...styles.inputFullWidth }}
disabled={!categoriesEnabled}
onChange={(event) => updateSourceConfig(index, "category", event.target.value)}
/>
{sourceConfigs.length > 1 && (
<button
type="button"
style={styles.buttonSecondary}
onClick={() => removeSourceConfig(index)}
<select
value={source.sourceName}
style={{ ...styles.input, ...styles.inputFullWidth }}
onChange={(event) =>
updateSourceConfig(
index,
"sourceName",
event.target.value,
)
}
>
Remove source
</button>
)}
</div>
{sourceOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
<input
type="number"
min={1}
value={source.limit}
placeholder="Limit"
style={{ ...styles.input, ...styles.inputFullWidth }}
onChange={(event) =>
updateSourceConfig(index, "limit", event.target.value)
}
/>
<input
type="text"
value={source.search}
placeholder={
searchEnabled
? "Search term (optional)"
: "Search not supported for this source"
}
style={{ ...styles.input, ...styles.inputFullWidth }}
disabled={!searchEnabled}
onChange={(event) =>
updateSourceConfig(
index,
"search",
event.target.value,
)
}
/>
<input
type="text"
value={source.category}
placeholder={
categoriesEnabled
? "Category (optional)"
: "Categories not supported for this source"
}
style={{ ...styles.input, ...styles.inputFullWidth }}
disabled={!categoriesEnabled}
onChange={(event) =>
updateSourceConfig(
index,
"category",
event.target.value,
)
}
/>
{sourceConfigs.length > 1 && (
<button
type="button"
style={styles.buttonSecondary}
onClick={() => removeSourceConfig(index)}
>
Remove source
</button>
)}
</div>
);
})}
<button type="button" style={styles.buttonSecondary} onClick={addSourceConfig}>
<button
type="button"
style={styles.buttonSecondary}
onClick={addSourceConfig}
>
Add another source
</button>
</div>

43
frontend/src/pages/DatasetEdit.tsx
View File

@@ -51,7 +51,9 @@ const DatasetEditPage = () => {
.catch((error: unknown) => {
setHasError(true);
if (axios.isAxiosError(error)) {
setStatusMessage(String(error.response?.data?.error || error.message));
setStatusMessage(
String(error.response?.data?.error || error.message),
);
} else {
setStatusMessage("Could not get dataset info.");
}
@@ -61,7 +63,6 @@ const DatasetEditPage = () => {
});
}, [parsedDatasetId]);
const saveDatasetName = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
@@ -87,14 +88,18 @@ const DatasetEditPage = () => {
await axios.patch(
`${API_BASE_URL}/dataset/${parsedDatasetId}`,
{ name: trimmedName },
{ headers: { Authorization: `Bearer ${token}` } }
{ headers: { Authorization: `Bearer ${token}` } },
);
navigate("/datasets", { replace: true });
} catch (error: unknown) {
setHasError(true);
if (axios.isAxiosError(error)) {
setStatusMessage(String(error.response?.data?.error || error.message || "Save failed."));
setStatusMessage(
String(
error.response?.data?.error || error.message || "Save failed.",
),
);
} else {
setStatusMessage("Save failed due to an unexpected error.");
}
@@ -117,17 +122,20 @@ const DatasetEditPage = () => {
setHasError(false);
setStatusMessage("");
await axios.delete(
`${API_BASE_URL}/dataset/${parsedDatasetId}`,
{ headers: { Authorization: `Bearer ${deleteToken}` } }
);
await axios.delete(`${API_BASE_URL}/dataset/${parsedDatasetId}`, {
headers: { Authorization: `Bearer ${deleteToken}` },
});
setIsDeleteModalOpen(false);
navigate("/datasets", { replace: true });
} catch (error: unknown) {
setHasError(true);
if (axios.isAxiosError(error)) {
setStatusMessage(String(error.response?.data?.error || error.message || "Delete failed."));
setStatusMessage(
String(
error.response?.data?.error || error.message || "Delete failed.",
),
);
} else {
setStatusMessage("Delete failed due to an unexpected error.");
}
@@ -142,7 +150,9 @@ const DatasetEditPage = () => {
<div style={{ ...styles.card, ...styles.headerBar }}>
<div>
<h1 style={styles.sectionHeaderTitle}>Edit Dataset</h1>
<p style={styles.sectionHeaderSubtitle}>Update the dataset name shown in your datasets list.</p>
<p style={styles.sectionHeaderSubtitle}>
Update the dataset name shown in your datasets list.
</p>
</div>
</div>
@@ -173,8 +183,8 @@ const DatasetEditPage = () => {
style={styles.buttonDanger}
onClick={() => setIsDeleteModalOpen(true)}
disabled={isSaving || isDeleting}
>
Delete Dataset
>
Delete Dataset
</button>
<button
@@ -187,15 +197,16 @@ const DatasetEditPage = () => {
</button>
<button
type="submit"
style={{ ...styles.buttonPrimary, opacity: loading || isSaving ? 0.75 : 1 }}
style={{
...styles.buttonPrimary,
opacity: loading || isSaving ? 0.75 : 1,
}}
disabled={loading || isSaving || isDeleting}
>
{isSaving ? "Saving..." : "Save"}
</button>
{loading
? "Loading dataset details..."
: statusMessage}
{loading ? "Loading dataset details..." : statusMessage}
</div>
</form>

35
frontend/src/pages/DatasetStatus.tsx
View File

@@ -3,7 +3,7 @@ import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
import StatsStyling from "../styles/stats_styling";
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL;
type DatasetStatusResponse = {
status?: "fetching" | "processing" | "complete" | "error";
@@ -17,7 +17,8 @@ const DatasetStatusPage = () => {
const navigate = useNavigate();
const { datasetId } = useParams<{ datasetId: string }>();
const [loading, setLoading] = useState(true);
const [status, setStatus] = useState<DatasetStatusResponse["status"]>("processing");
const [status, setStatus] =
useState<DatasetStatusResponse["status"]>("processing");
const [statusMessage, setStatusMessage] = useState("");
const parsedDatasetId = useMemo(() => Number(datasetId), [datasetId]);
@@ -34,7 +35,7 @@ const DatasetStatusPage = () => {
const pollStatus = async () => {
try {
const response = await axios.get<DatasetStatusResponse>(
`${API_BASE_URL}/dataset/${parsedDatasetId}/status`
`${API_BASE_URL}/dataset/${parsedDatasetId}/status`,
);
const nextStatus = response.data.status ?? "processing";
@@ -51,7 +52,9 @@ const DatasetStatusPage = () => {
setLoading(false);
setStatus("error");
if (axios.isAxiosError(error)) {
const message = String(error.response?.data?.error || error.message || "Request failed");
const message = String(
error.response?.data?.error || error.message || "Request failed",
);
setStatusMessage(message);
} else {
setStatusMessage("Unable to fetch dataset status.");
@@ -73,7 +76,8 @@ const DatasetStatusPage = () => {
};
}, [navigate, parsedDatasetId, status]);
const isProcessing = loading || status === "fetching" || status === "processing";
const isProcessing =
loading || status === "fetching" || status === "processing";
const isError = status === "error";
return (
@@ -81,26 +85,37 @@ const DatasetStatusPage = () => {
<div style={styles.containerNarrow}>
<div style={{ ...styles.card, marginTop: 28 }}>
<h1 style={styles.sectionHeaderTitle}>
{isProcessing ? "Processing dataset..." : isError ? "Dataset processing failed" : "Dataset ready"}
{isProcessing
? "Processing dataset..."
: isError
? "Dataset processing failed"
: "Dataset ready"}
</h1>
<p style={{ ...styles.sectionSubtitle, marginTop: 10 }}>
{isProcessing &&
"Your dataset is being analyzed. This page will redirect to stats automatically once complete."}
{isError && "There was an issue while processing your dataset. Please review the error details."}
{status === "complete" && "Processing complete. Redirecting to your stats now..."}
{isError &&
"There was an issue while processing your dataset. Please review the error details."}
{status === "complete" &&
"Processing complete. Redirecting to your stats now..."}
</p>
<div
style={{
...styles.card,
...styles.statusMessageCard,
borderColor: isError ? "rgba(185, 28, 28, 0.28)" : "rgba(0,0,0,0.06)",
borderColor: isError
? "rgba(185, 28, 28, 0.28)"
: "rgba(0,0,0,0.06)",
background: isError ? "#fff5f5" : "#ffffff",
color: isError ? "#991b1b" : "#374151",
}}
>
{statusMessage || (isProcessing ? "Waiting for updates from the worker queue..." : "No details provided.")}
{statusMessage ||
(isProcessing
? "Waiting for updates from the worker queue..."
: "No details provided.")}
</div>
</div>
</div>

62
frontend/src/pages/Datasets.tsx
View File

@@ -39,7 +39,9 @@ const DatasetsPage = () => {
})
.catch((requestError: unknown) => {
if (axios.isAxiosError(requestError)) {
setError(String(requestError.response?.data?.error || requestError.message));
setError(
String(requestError.response?.data?.error || requestError.message),
);
} else {
setError("Failed to load datasets.");
}
@@ -61,13 +63,28 @@ const DatasetsPage = () => {
</div>
<div style={styles.loadingSkeleton}>
<div style={{ ...styles.loadingSkeletonLine, ...styles.loadingSkeletonLineLong }} />
<div style={{ ...styles.loadingSkeletonLine, ...styles.loadingSkeletonLineMed }} />
<div style={{ ...styles.loadingSkeletonLine, ...styles.loadingSkeletonLineShort }} />
<div
style={{
...styles.loadingSkeletonLine,
...styles.loadingSkeletonLineLong,
}}
/>
<div
style={{
...styles.loadingSkeletonLine,
...styles.loadingSkeletonLineMed,
}}
/>
<div
style={{
...styles.loadingSkeletonLine,
...styles.loadingSkeletonLineShort,
}}
/>
</div>
</div>
</div>
)
);
}
return (
@@ -81,7 +98,11 @@ const DatasetsPage = () => {
</p>
</div>
<div style={styles.controlsWrapped}>
<button type="button" style={styles.buttonPrimary} onClick={() => navigate("/upload")}>
<button
type="button"
style={styles.buttonPrimary}
onClick={() => navigate("/upload")}
>
Upload New Dataset
</button>
<button
@@ -116,20 +137,25 @@ const DatasetsPage = () => {
)}
{!error && datasets.length > 0 && (
<div style={{ ...styles.card, marginTop: 14, padding: 0, overflow: "hidden" }}>
<div
style={{
...styles.card,
marginTop: 14,
padding: 0,
overflow: "hidden",
}}
>
<ul style={styles.listNoBullets}>
{datasets.map((dataset) => {
const isComplete = dataset.status === "complete" || dataset.status === "error";
const isComplete =
dataset.status === "complete" || dataset.status === "error";
const editPath = `/dataset/${dataset.id}/edit`;
const targetPath = isComplete
? `/dataset/${dataset.id}/stats`
: `/dataset/${dataset.id}/status`;
return (
<li
key={dataset.id}
style={styles.datasetListItem}
>
<li key={dataset.id} style={styles.datasetListItem}>
<div style={{ minWidth: 0 }}>
<div style={styles.datasetName}>
{dataset.name || `Dataset #${dataset.id}`}
@@ -145,19 +171,23 @@ const DatasetsPage = () => {
</div>
<div>
{ isComplete &&
{isComplete && (
<button
type="button"
style={{...styles.buttonSecondary, "margin": "5px"}}
style={{ ...styles.buttonSecondary, margin: "5px" }}
onClick={() => navigate(editPath)}
>
Edit Dataset
</button>
}
)}
<button
type="button"
style={isComplete ? styles.buttonPrimary : styles.buttonSecondary}
style={
isComplete
? styles.buttonPrimary
: styles.buttonSecondary
}
onClick={() => navigate(targetPath)}
>
{isComplete ? "Open stats" : "View status"}

178
frontend/src/pages/Login.tsx
View File

@@ -3,7 +3,7 @@ import axios from "axios";
import { useNavigate } from "react-router-dom";
import StatsStyling from "../styles/stats_styling";
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL;
const styles = StatsStyling;
@@ -44,13 +44,17 @@ const LoginPage = () => {
try {
if (isRegisterMode) {
await axios.post(`${API_BASE_URL}/register`, { username, email, password });
await axios.post(`${API_BASE_URL}/register`, {
username,
email,
password,
});
setInfo("Account created. You can now sign in.");
setIsRegisterMode(false);
} else {
const response = await axios.post<{ access_token: string }>(
`${API_BASE_URL}/login`,
{ username, password }
{ username, password },
);
const token = response.data.access_token;
@@ -61,7 +65,11 @@ const LoginPage = () => {
} catch (requestError: unknown) {
if (axios.isAxiosError(requestError)) {
setError(
String(requestError.response?.data?.error || requestError.message || "Request failed")
String(
requestError.response?.data?.error ||
requestError.message ||
"Request failed",
),
);
} else {
setError("Unexpected error occurred.");
@@ -73,90 +81,86 @@ const LoginPage = () => {
return (
<div style={styles.containerAuth}>
<div style={{ ...styles.card, ...styles.authCard }}>
<div style={styles.headingBlock}>
<h1 style={styles.headingXl}>
{isRegisterMode ? "Create your account" : "Welcome back"}
</h1>
<p style={styles.mutedText}>
{isRegisterMode
? "Register to start uploading and exploring your dataset insights."
: "Sign in to continue to your analytics workspace."}
</p>
</div>
<form onSubmit={handleSubmit} style={styles.authForm}>
<input
type="text"
placeholder="Username"
style={{ ...styles.input, ...styles.authControl }}
value={username}
onChange={(event) => setUsername(event.target.value)}
required
/>
{isRegisterMode && (
<input
type="email"
placeholder="Email"
style={{ ...styles.input, ...styles.authControl }}
value={email}
onChange={(event) => setEmail(event.target.value)}
required
/>
)}
<input
type="password"
placeholder="Password"
style={{ ...styles.input, ...styles.authControl }}
value={password}
onChange={(event) => setPassword(event.target.value)}
required
/>
<button
type="submit"
style={{ ...styles.buttonPrimary, ...styles.authControl, marginTop: 2 }}
disabled={loading}
>
{loading
? "Please wait..."
: isRegisterMode
? "Create account"
: "Sign in"}
</button>
</form>
{error && (
<p style={styles.authErrorText}>
{error}
</p>
)}
{info && (
<p style={styles.authInfoText}>
{info}
</p>
)}
<div style={styles.authSwitchRow}>
<span style={styles.authSwitchLabel}>
{isRegisterMode ? "Already have an account?" : "New here?"}
</span>
<button
type="button"
style={styles.authSwitchButton}
onClick={() => {
setError("");
setInfo("");
setIsRegisterMode((value) => !value);
}}
>
{isRegisterMode ? "Switch to sign in" : "Create account"}
</button>
</div>
<div style={{ ...styles.card, ...styles.authCard }}>
<div style={styles.headingBlock}>
<h1 style={styles.headingXl}>
{isRegisterMode ? "Create your account" : "Welcome back"}
</h1>
<p style={styles.mutedText}>
{isRegisterMode
? "Register to start uploading and exploring your dataset insights."
: "Sign in to continue to your analytics workspace."}
</p>
</div>
<form onSubmit={handleSubmit} style={styles.authForm}>
<input
type="text"
placeholder="Username"
style={{ ...styles.input, ...styles.authControl }}
value={username}
onChange={(event) => setUsername(event.target.value)}
required
/>
{isRegisterMode && (
<input
type="email"
placeholder="Email"
style={{ ...styles.input, ...styles.authControl }}
value={email}
onChange={(event) => setEmail(event.target.value)}
required
/>
)}
<input
type="password"
placeholder="Password"
style={{ ...styles.input, ...styles.authControl }}
value={password}
onChange={(event) => setPassword(event.target.value)}
required
/>
<button
type="submit"
style={{
...styles.buttonPrimary,
...styles.authControl,
marginTop: 2,
}}
disabled={loading}
>
{loading
? "Please wait..."
: isRegisterMode
? "Create account"
: "Sign in"}
</button>
</form>
{error && <p style={styles.authErrorText}>{error}</p>}
{info && <p style={styles.authInfoText}>{info}</p>}
<div style={styles.authSwitchRow}>
<span style={styles.authSwitchLabel}>
{isRegisterMode ? "Already have an account?" : "New here?"}
</span>
<button
type="button"
style={styles.authSwitchButton}
onClick={() => {
setError("");
setInfo("");
setIsRegisterMode((value) => !value);
}}
>
{isRegisterMode ? "Switch to sign in" : "Create account"}
</button>
</div>
</div>
</div>
);
};

567
frontend/src/pages/Stats.tsx
View File

@@ -9,47 +9,59 @@ import LinguisticStats from "../components/LinguisticStats";
import InteractionalStats from "../components/InteractionalStats";
import CulturalStats from "../components/CulturalStats";
import {
type SummaryResponse,
type UserAnalysisResponse,
import {
type SummaryResponse,
type UserAnalysisResponse,
type TimeAnalysisResponse,
type ContentAnalysisResponse,
type UserEndpointResponse,
type LinguisticAnalysisResponse,
type EmotionalAnalysisResponse,
type InteractionAnalysisResponse,
type CulturalAnalysisResponse
} from '../types/ApiTypes'
type CulturalAnalysisResponse,
} from "../types/ApiTypes";
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL;
const styles = StatsStyling;
const DELETED_USERS = ["[deleted]"];
const isDeletedUser = (value: string | null | undefined) => (
DELETED_USERS.includes((value ?? "").trim().toLowerCase())
);
const isDeletedUser = (value: string | null | undefined) =>
DELETED_USERS.includes((value ?? "").trim().toLowerCase());
const StatPage = () => {
const { datasetId: routeDatasetId } = useParams<{ datasetId: string }>();
const [error, setError] = useState('');
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [activeView, setActiveView] = useState<"summary" | "emotional" | "user" | "linguistic" | "interactional" | "cultural">("summary");
const [activeView, setActiveView] = useState<
| "summary"
| "emotional"
| "user"
| "linguistic"
| "interactional"
| "cultural"
>("summary");
const [userData, setUserData] = useState<UserAnalysisResponse | null>(null);
const [timeData, setTimeData] = useState<TimeAnalysisResponse | null>(null);
const [contentData, setContentData] = useState<ContentAnalysisResponse | null>(null);
const [linguisticData, setLinguisticData] = useState<LinguisticAnalysisResponse | null>(null);
const [interactionData, setInteractionData] = useState<InteractionAnalysisResponse | null>(null);
const [culturalData, setCulturalData] = useState<CulturalAnalysisResponse | null>(null);
const [contentData, setContentData] =
useState<ContentAnalysisResponse | null>(null);
const [linguisticData, setLinguisticData] =
useState<LinguisticAnalysisResponse | null>(null);
const [interactionData, setInteractionData] =
useState<InteractionAnalysisResponse | null>(null);
const [culturalData, setCulturalData] =
useState<CulturalAnalysisResponse | null>(null);
const [summary, setSummary] = useState<SummaryResponse | null>(null);
const searchInputRef = useRef<HTMLInputElement>(null);
const beforeDateRef = useRef<HTMLInputElement>(null);
const afterDateRef = useRef<HTMLInputElement>(null);
const parsedDatasetId = Number(routeDatasetId ?? "");
const datasetId = Number.isInteger(parsedDatasetId) && parsedDatasetId > 0 ? parsedDatasetId : null;
const datasetId =
Number.isInteger(parsedDatasetId) && parsedDatasetId > 0
? parsedDatasetId
: null;
const getFilterParams = () => {
const params: Record<string, string> = {};
@@ -99,112 +111,147 @@ const StatPage = () => {
setLoading(true);
Promise.all([
axios.get<TimeAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/temporal`, {
params,
headers: authHeaders,
}),
axios.get<UserEndpointResponse>(`${API_BASE_URL}/dataset/${datasetId}/user`, {
params,
headers: authHeaders,
}),
axios.get<LinguisticAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/linguistic`, {
params,
headers: authHeaders,
}),
axios.get<EmotionalAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/emotional`, {
params,
headers: authHeaders,
}),
axios.get<InteractionAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/interactional`, {
params,
headers: authHeaders,
}),
axios.get<SummaryResponse>(`${API_BASE_URL}/dataset/${datasetId}/summary`, {
params,
headers: authHeaders,
}),
axios.get<CulturalAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/cultural`, {
params,
headers: authHeaders,
}),
])
.then(([timeRes, userRes, linguisticRes, emotionalRes, interactionRes, summaryRes, culturalRes]) => {
const usersList = userRes.data.users ?? [];
const topUsersList = userRes.data.top_users ?? [];
const interactionGraphRaw = interactionRes.data?.interaction_graph ?? {};
const topPairsRaw = interactionRes.data?.top_interaction_pairs ?? [];
axios.get<TimeAnalysisResponse>(
`${API_BASE_URL}/dataset/${datasetId}/temporal`,
{
params,
headers: authHeaders,
},
),
axios.get<UserEndpointResponse>(
`${API_BASE_URL}/dataset/${datasetId}/user`,
{
params,
headers: authHeaders,
},
),
axios.get<LinguisticAnalysisResponse>(
`${API_BASE_URL}/dataset/${datasetId}/linguistic`,
{
params,
headers: authHeaders,
},
),
axios.get<EmotionalAnalysisResponse>(
`${API_BASE_URL}/dataset/${datasetId}/emotional`,
{
params,
headers: authHeaders,
},
),
axios.get<InteractionAnalysisResponse>(
`${API_BASE_URL}/dataset/${datasetId}/interactional`,
{
params,
headers: authHeaders,
},
),
axios.get<SummaryResponse>(
`${API_BASE_URL}/dataset/${datasetId}/summary`,
{
params,
headers: authHeaders,
},
),
axios.get<CulturalAnalysisResponse>(
`${API_BASE_URL}/dataset/${datasetId}/cultural`,
{
params,
headers: authHeaders,
},
),
])
.then(
([
timeRes,
userRes,
linguisticRes,
emotionalRes,
interactionRes,
summaryRes,
culturalRes,
]) => {
const usersList = userRes.data.users ?? [];
const topUsersList = userRes.data.top_users ?? [];
const interactionGraphRaw =
interactionRes.data?.interaction_graph ?? {};
const topPairsRaw = interactionRes.data?.top_interaction_pairs ?? [];
const filteredUsers: typeof usersList = [];
for (const user of usersList) {
if (isDeletedUser(user.author)) continue;
filteredUsers.push(user);
}
const filteredTopUsers: typeof topUsersList = [];
for (const user of topUsersList) {
if (isDeletedUser(user.author)) continue;
filteredTopUsers.push(user);
}
const filteredInteractionGraph: Record<string, Record<string, number>> = {};
for (const [source, targets] of Object.entries(interactionGraphRaw)) {
if (isDeletedUser(source)) {
continue;
const filteredUsers: typeof usersList = [];
for (const user of usersList) {
if (isDeletedUser(user.author)) continue;
filteredUsers.push(user);
}
const nextTargets: Record<string, number> = {};
for (const [target, count] of Object.entries(targets)) {
if (isDeletedUser(target)) {
const filteredTopUsers: typeof topUsersList = [];
for (const user of topUsersList) {
if (isDeletedUser(user.author)) continue;
filteredTopUsers.push(user);
}
const filteredInteractionGraph: Record<
string,
Record<string, number>
> = {};
for (const [source, targets] of Object.entries(interactionGraphRaw)) {
if (isDeletedUser(source)) {
continue;
}
nextTargets[target] = count;
const nextTargets: Record<string, number> = {};
for (const [target, count] of Object.entries(targets)) {
if (isDeletedUser(target)) {
continue;
}
nextTargets[target] = count;
}
filteredInteractionGraph[source] = nextTargets;
}
filteredInteractionGraph[source] = nextTargets;
}
const filteredTopInteractionPairs: typeof topPairsRaw = [];
for (const pairEntry of topPairsRaw) {
const pair = pairEntry[0];
const source = pair[0];
const target = pair[1];
if (isDeletedUser(source) || isDeletedUser(target)) {
continue;
const filteredTopInteractionPairs: typeof topPairsRaw = [];
for (const pairEntry of topPairsRaw) {
const pair = pairEntry[0];
const source = pair[0];
const target = pair[1];
if (isDeletedUser(source) || isDeletedUser(target)) {
continue;
}
filteredTopInteractionPairs.push(pairEntry);
}
filteredTopInteractionPairs.push(pairEntry);
}
const combinedUserData: UserAnalysisResponse = {
...userRes.data,
users: filteredUsers,
top_users: filteredTopUsers,
interaction_graph: filteredInteractionGraph,
};
const combinedUserData: UserAnalysisResponse = {
...userRes.data,
users: filteredUsers,
top_users: filteredTopUsers,
interaction_graph: filteredInteractionGraph,
};
const combinedContentData: ContentAnalysisResponse = {
...linguisticRes.data,
...emotionalRes.data,
};
const combinedContentData: ContentAnalysisResponse = {
...linguisticRes.data,
...emotionalRes.data,
};
const filteredInteractionData: InteractionAnalysisResponse = {
...interactionRes.data,
interaction_graph: filteredInteractionGraph,
top_interaction_pairs: filteredTopInteractionPairs,
};
const filteredInteractionData: InteractionAnalysisResponse = {
...interactionRes.data,
interaction_graph: filteredInteractionGraph,
top_interaction_pairs: filteredTopInteractionPairs,
};
const filteredSummary: SummaryResponse = {
...summaryRes.data,
unique_users: filteredUsers.length,
};
const filteredSummary: SummaryResponse = {
...summaryRes.data,
unique_users: filteredUsers.length,
};
setUserData(combinedUserData);
setTimeData(timeRes.data || null);
setContentData(combinedContentData);
setLinguisticData(linguisticRes.data || null);
setInteractionData(filteredInteractionData || null);
setCulturalData(culturalRes.data || null);
setSummary(filteredSummary || null);
})
setUserData(combinedUserData);
setTimeData(timeRes.data || null);
setContentData(combinedContentData);
setLinguisticData(linguisticRes.data || null);
setInteractionData(filteredInteractionData || null);
setCulturalData(culturalRes.data || null);
setSummary(filteredSummary || null);
},
)
.catch((e) => setError("Failed to load statistics: " + String(e)))
.finally(() => setLoading(false));
};
@@ -233,7 +280,7 @@ const StatPage = () => {
return;
}
getStats();
}, [datasetId])
}, [datasetId]);
if (loading) {
return (
@@ -243,155 +290,199 @@ const StatPage = () => {
<div style={styles.loadingSpinner} />
<div>
<h2 style={styles.loadingTitle}>Loading analytics</h2>
<p style={styles.loadingSubtitle}>Fetching summary, timeline, user, and content insights.</p>
<p style={styles.loadingSubtitle}>
Fetching summary, timeline, user, and content insights.
</p>
</div>
</div>
<div style={styles.loadingSkeleton}>
<div style={{ ...styles.loadingSkeletonLine, ...styles.loadingSkeletonLineLong }} />
<div style={{ ...styles.loadingSkeletonLine, ...styles.loadingSkeletonLineMed }} />
<div style={{ ...styles.loadingSkeletonLine, ...styles.loadingSkeletonLineShort }} />
<div
style={{
...styles.loadingSkeletonLine,
...styles.loadingSkeletonLineLong,
}}
/>
<div
style={{
...styles.loadingSkeletonLine,
...styles.loadingSkeletonLineMed,
}}
/>
<div
style={{
...styles.loadingSkeletonLine,
...styles.loadingSkeletonLineShort,
}}
/>
</div>
</div>
</div>
);
}
if (error) return <p style={{...styles.page}}>{error}</p>;
if (error) return <p style={{ ...styles.page }}>{error}</p>;
return (
<div style={styles.page}>
<div style={{ ...styles.container, ...styles.card, ...styles.headerBar }}>
<div style={styles.controls}>
<input
type="text"
id="query"
ref={searchInputRef}
placeholder="Search events..."
style={styles.input}
/>
return (
<div style={styles.page}>
<div style={{ ...styles.container, ...styles.card, ...styles.headerBar }}>
<div style={styles.controls}>
<input
type="text"
id="query"
ref={searchInputRef}
placeholder="Search events..."
style={styles.input}
/>
<input
type="date"
ref={beforeDateRef}
placeholder="Search before date"
style={styles.input}
/>
<input
type="date"
ref={beforeDateRef}
placeholder="Search before date"
style={styles.input}
/>
<input
<input
type="date"
ref={afterDateRef}
placeholder="Search before date"
style={styles.input}
/>
/>
<button onClick={onSubmitFilters} style={styles.buttonPrimary}>
Search
</button>
<button onClick={onSubmitFilters} style={styles.buttonPrimary}>
Search
</button>
<button onClick={resetFilters} style={styles.buttonSecondary}>
Reset
</button>
</div>
<div style={styles.dashboardMeta}>Analytics Dashboard</div>
<div style={styles.dashboardMeta}>Dataset #{datasetId ?? "-"}</div>
<button onClick={resetFilters} style={styles.buttonSecondary}>
Reset
</button>
</div>
<div style={{ ...styles.container, ...styles.tabsRow, justifyContent: "center" }}>
<button
onClick={() => setActiveView("summary")}
style={activeView === "summary" ? styles.buttonPrimary : styles.buttonSecondary}
>
Summary
</button>
<button
onClick={() => setActiveView("emotional")}
style={activeView === "emotional" ? styles.buttonPrimary : styles.buttonSecondary}
>
Emotional
</button>
<div style={styles.dashboardMeta}>Analytics Dashboard</div>
<div style={styles.dashboardMeta}>Dataset #{datasetId ?? "-"}</div>
</div>
<button
onClick={() => setActiveView("user")}
style={activeView === "user" ? styles.buttonPrimary : styles.buttonSecondary}
<div
style={{
...styles.container,
...styles.tabsRow,
justifyContent: "center",
}}
>
Users
</button>
<button
onClick={() => setActiveView("linguistic")}
style={activeView === "linguistic" ? styles.buttonPrimary : styles.buttonSecondary}
>
Linguistic
</button>
<button
onClick={() => setActiveView("interactional")}
style={activeView === "interactional" ? styles.buttonPrimary : styles.buttonSecondary}
>
Interactional
</button>
<button
onClick={() => setActiveView("cultural")}
style={activeView === "cultural" ? styles.buttonPrimary : styles.buttonSecondary}
>
Cultural
</button>
<button
onClick={() => setActiveView("summary")}
style={
activeView === "summary"
? styles.buttonPrimary
: styles.buttonSecondary
}
>
Summary
</button>
<button
onClick={() => setActiveView("emotional")}
style={
activeView === "emotional"
? styles.buttonPrimary
: styles.buttonSecondary
}
>
Emotional
</button>
<button
onClick={() => setActiveView("user")}
style={
activeView === "user"
? styles.buttonPrimary
: styles.buttonSecondary
}
>
Users
</button>
<button
onClick={() => setActiveView("linguistic")}
style={
activeView === "linguistic"
? styles.buttonPrimary
: styles.buttonSecondary
}
>
Linguistic
</button>
<button
onClick={() => setActiveView("interactional")}
style={
activeView === "interactional"
? styles.buttonPrimary
: styles.buttonSecondary
}
>
Interactional
</button>
<button
onClick={() => setActiveView("cultural")}
style={
activeView === "cultural"
? styles.buttonPrimary
: styles.buttonSecondary
}
>
Cultural
</button>
</div>
{activeView === "summary" && (
<SummaryStats
userData={userData}
timeData={timeData}
contentData={contentData}
summary={summary}
/>
)}
{activeView === "emotional" && contentData && (
<EmotionalStats contentData={contentData} />
)}
{activeView === "emotional" && !contentData && (
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
No emotional data available.
</div>
)}
{activeView === "user" && userData && <UserStats data={userData} />}
{activeView === "linguistic" && linguisticData && (
<LinguisticStats data={linguisticData} />
)}
{activeView === "linguistic" && !linguisticData && (
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
No linguistic data available.
</div>
)}
{activeView === "interactional" && interactionData && (
<InteractionalStats data={interactionData} />
)}
{activeView === "interactional" && !interactionData && (
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
No interactional data available.
</div>
)}
{activeView === "cultural" && culturalData && (
<CulturalStats data={culturalData} />
)}
{activeView === "cultural" && !culturalData && (
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
No cultural data available.
</div>
)}
</div>
{activeView === "summary" && (
<SummaryStats
userData={userData}
timeData={timeData}
contentData={contentData}
summary={summary}
/>
)}
{activeView === "emotional" && contentData && (
<EmotionalStats contentData={contentData} />
)}
{activeView === "emotional" && !contentData && (
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
No emotional data available.
</div>
)}
{activeView === "user" && userData && (
<UserStats data={userData} />
)}
{activeView === "linguistic" && linguisticData && (
<LinguisticStats data={linguisticData} />
)}
{activeView === "linguistic" && !linguisticData && (
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
No linguistic data available.
</div>
)}
{activeView === "interactional" && interactionData && (
<InteractionalStats data={interactionData} />
)}
{activeView === "interactional" && !interactionData && (
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
No interactional data available.
</div>
)}
{activeView === "cultural" && culturalData && (
<CulturalStats data={culturalData} />
)}
{activeView === "cultural" && !culturalData && (
<div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
No cultural data available.
</div>
)}
</div>
);
}
);
};
export default StatPage;

63
frontend/src/pages/Upload.tsx
View File

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
import StatsStyling from "../styles/stats_styling";
const styles = StatsStyling;
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL;
const UploadPage = () => {
const [datasetName, setDatasetName] = useState("");
@@ -40,16 +40,20 @@ const UploadPage = () => {
setHasError(false);
setReturnMessage("");
const response = await axios.post(`${API_BASE_URL}/datasets/upload`, formData, {
headers: {
"Content-Type": "multipart/form-data",
const response = await axios.post(
`${API_BASE_URL}/datasets/upload`,
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
},
});
);
const datasetId = Number(response.data.dataset_id);
setReturnMessage(
`Upload queued successfully (dataset #${datasetId}). Redirecting to processing status...`
`Upload queued successfully (dataset #${datasetId}). Redirecting to processing status...`,
);
setTimeout(() => {
@@ -58,7 +62,9 @@ const UploadPage = () => {
} catch (error: unknown) {
setHasError(true);
if (axios.isAxiosError(error)) {
const message = String(error.response?.data?.error || error.message || "Upload failed.");
const message = String(
error.response?.data?.error || error.message || "Upload failed.",
);
setReturnMessage(`Upload failed: ${message}`);
} else {
setReturnMessage("Upload failed due to an unexpected error.");
@@ -75,12 +81,16 @@ const UploadPage = () => {
<div>
<h1 style={styles.sectionHeaderTitle}>Upload Dataset</h1>
<p style={styles.sectionHeaderSubtitle}>
Name your dataset, then upload posts and topic map files to generate analytics.
Name your dataset, then upload posts and topic map files to
generate analytics.
</p>
</div>
<button
type="button"
style={{ ...styles.buttonPrimary, opacity: isSubmitting ? 0.75 : 1 }}
style={{
...styles.buttonPrimary,
opacity: isSubmitting ? 0.75 : 1,
}}
onClick={uploadFiles}
disabled={isSubmitting}
>
@@ -96,8 +106,12 @@ const UploadPage = () => {
}}
>
<div style={{ ...styles.card, gridColumn: "auto" }}>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>Dataset Name</h2>
<p style={styles.sectionSubtitle}>Use a clear label so you can identify this upload later.</p>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>
Dataset Name
</h2>
<p style={styles.sectionSubtitle}>
Use a clear label so you can identify this upload later.
</p>
<input
style={{ ...styles.input, ...styles.inputFullWidth }}
type="text"
@@ -108,8 +122,12 @@ const UploadPage = () => {
</div>
<div style={{ ...styles.card, gridColumn: "auto" }}>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>Posts File (.jsonl)</h2>
<p style={styles.sectionSubtitle}>Upload the raw post records export.</p>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>
Posts File (.jsonl)
</h2>
<p style={styles.sectionSubtitle}>
Upload the raw post records export.
</p>
<input
style={{ ...styles.input, ...styles.inputFullWidth }}
type="file"
@@ -122,16 +140,24 @@ const UploadPage = () => {
</div>
<div style={{ ...styles.card, gridColumn: "auto" }}>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>Topics File (.json)</h2>
<p style={styles.sectionSubtitle}>Upload your topic bucket mapping file.</p>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>
Topics File (.json)
</h2>
<p style={styles.sectionSubtitle}>
Upload your topic bucket mapping file.
</p>
<input
style={{ ...styles.input, ...styles.inputFullWidth }}
type="file"
accept=".json"
onChange={(event) => setTopicBucketFile(event.target.files?.[0] ?? null)}
onChange={(event) =>
setTopicBucketFile(event.target.files?.[0] ?? null)
}
/>
<p style={styles.subtleBodyText}>
{topicBucketFile ? `Selected: ${topicBucketFile.name}` : "No file selected"}
{topicBucketFile
? `Selected: ${topicBucketFile.name}`
: "No file selected"}
</p>
</div>
</div>
@@ -143,7 +169,8 @@ const UploadPage = () => {
...(hasError ? styles.alertCardError : styles.alertCardInfo),
}}
>
{returnMessage || "After upload, your dataset is queued for processing and you'll land on stats."}
{returnMessage ||
"After upload, your dataset is queued for processing and you'll land on stats."}
</div>
</div>
</div>

48
frontend/src/stats/ActivityHeatmap.tsx
View File

@@ -25,8 +25,7 @@ const DAYS = [
"Sunday",
];
const hourLabel = (h: number) =>
`${h.toString().padStart(2, "0")}:00`;
const hourLabel = (h: number) => `${h.toString().padStart(2, "0")}:00`;
const convertWeeklyData = (dataset: ApiRow[]): ChartSeries[] => {
return dataset.map((dayData, index) => ({
@@ -40,32 +39,29 @@ const convertWeeklyData = (dataset: ApiRow[]): ChartSeries[] => {
}));
};
const ActivityHeatmap = ({ data }: ActivityHeatmapProps) => {
const convertedData = convertWeeklyData(data);
const convertedData = convertWeeklyData(data);
const maxValue = Math.max(
...convertedData.flatMap(day =>
day.data.map(point => point.y)
)
const maxValue = Math.max(
...convertedData.flatMap((day) => day.data.map((point) => point.y)),
);
return (
<ResponsiveHeatMap
data={convertedData}
valueFormat=">-.2s"
axisTop={{ tickRotation: -90 }}
axisRight={{ legend: 'Weekday', legendOffset: 70 }}
axisLeft={{ legend: 'Weekday', legendOffset: -72 }}
colors={{
type: 'diverging',
scheme: 'red_yellow_blue',
divergeAt: 0.3,
minValue: 0,
maxValue: maxValue
}}
/>
)
}
return (
<ResponsiveHeatMap
data={convertedData}
valueFormat=">-.2s"
axisTop={{ tickRotation: -90 }}
axisRight={{ legend: "Weekday", legendOffset: 70 }}
axisLeft={{ legend: "Weekday", legendOffset: -72 }}
colors={{
type: "diverging",
scheme: "red_yellow_blue",
divergeAt: 0.3,
minValue: 0,
maxValue: maxValue,
}}
/>
);
};
export default ActivityHeatmap;
export default ActivityHeatmap;

10
frontend/src/types/ApiTypes.ts
View File

@@ -17,7 +17,7 @@ type Emotion = {
emotion_sadness: number;
};
// User
// User
type TopUser = {
author: string;
source: string;
@@ -57,7 +57,7 @@ type UserAnalysisResponse = {
interaction_graph: InteractionGraph;
};
// Time
// Time
type EventsPerDay = {
date: Date;
count: number;
@@ -125,7 +125,7 @@ type EmotionalAnalysisResponse = {
emotion_by_source?: EmotionBySource[];
};
// Interactional
// Interactional
type ConversationConcentration = {
total_commenting_authors: number;
top_10pct_author_count: number;
@@ -180,7 +180,7 @@ type CulturalAnalysisResponse = {
avg_emotion_per_entity?: AverageEmotionPerEntity;
};
// Summary
// Summary
type SummaryResponse = {
total_events: number;
total_posts: number;
@@ -195,7 +195,7 @@ type SummaryResponse = {
sources: string[];
};
// Filter
// Filter
type FilterResponse = {
rows: number;
data: any;

2
frontend/src/utils/documentTitle.ts
View File

@@ -13,7 +13,7 @@ export const getDocumentTitle = (pathname: string) => {
}
if (pathname.includes("stats")) {
return "Ethnography Analysis"
return "Ethnography Analysis";
}
return STATIC_TITLES[pathname] ?? DEFAULT_TITLE;