feat: add Modal popup for extra User Info

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@cp949/react-wordcloud": "^1.0.1",
+        "@headlessui/react": "^2.2.9",
         "@nivo/heatmap": "^0.99.0",
         "axios": "^1.13.3",
         "react": "^19.2.0",
@@ -937,6 +938,79 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
+      "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
+      "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.4",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.7.tgz",
+      "integrity": "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@headlessui/react": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.9.tgz",
+      "integrity": "sha512-Mb+Un58gwBn0/yWZfyrCh0TJyurtT+dETj7YHleylHk5od3dv2XqETPGWMyQ5/7sYN7oWdyM1u9MvC0OC8UmzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.20.2",
+        "@react-aria/interactions": "^3.25.0",
+        "@tanstack/react-virtual": "^3.13.9",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1337,6 +1411,73 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-aria/focus": {
+      "version": "3.21.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.21.3.tgz",
+      "integrity": "sha512-FsquWvjSCwC2/sBk4b+OqJyONETUIXQ2vM0YdPAuC+QFQh2DT6TIBo6dOZVSezlhudDla69xFBd6JvCFq1AbUw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.26.0",
+        "@react-aria/utils": "^3.32.0",
+        "@react-types/shared": "^3.32.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.26.0.tgz",
+      "integrity": "sha512-AAEcHiltjfbmP1i9iaVw34Mb7kbkiHpYdqieWufldh4aplWgsF11YQZOfaCJW4QoR2ML4Zzoa9nfFwLXA52R7Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.10",
+        "@react-aria/utils": "^3.32.0",
+        "@react-stately/flags": "^3.1.2",
+        "@react-types/shared": "^3.32.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.10.tgz",
+      "integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.32.0.tgz",
+      "integrity": "sha512-/7Rud06+HVBIlTwmwmJa2W8xVtgxgzm0+kLbuFooZRzKDON6hhozS1dOMR/YLMxyJOaYOTpImcP4vRR9gL1hEg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.10",
+        "@react-stately/flags": "^3.1.2",
+        "@react-stately/utils": "^3.11.0",
+        "@react-types/shared": "^3.32.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/@react-spring/animated": {
       "version": "10.0.3",
       "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.3.tgz",
@@ -1409,6 +1550,36 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@react-stately/flags": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz",
+      "integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.11.0.tgz",
+      "integrity": "sha512-8LZpYowJ9eZmmYLpudbo/eclIRnbhWIJZ994ncmlKlouNzKohtM8qTC6B1w1pwUbiwGdUoyzLuQbeaIor5Dvcw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.32.1.tgz",
+      "integrity": "sha512-famxyD5emrGGpFuUlgOP6fVW2h/ZaF405G5KDi3zPHzyjAWys/8W6NAVJtNbkCkhedmvL0xOhvt8feGXyXaw5w==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
@@ -1814,6 +1985,42 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.18",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.18.tgz",
+      "integrity": "sha512-dZkhyfahpvlaV0rIKnvQiVoWPyURppl6w4m9IwMDpuIjcJ1sD9YGWrt0wISvgU7ewACXx2Ct46WPgI6qAD4v6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.18",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.18.tgz",
+      "integrity": "sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -4193,6 +4400,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
+      "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -4238,6 +4451,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@cp949/react-wordcloud": "^1.0.1",
+    "@headlessui/react": "^2.2.9",
     "@nivo/heatmap": "^0.99.0",
     "axios": "^1.13.3",
     "react": "^19.2.0",

frontend/src/components/UserModal.tsx

@@ -0,0 +1,90 @@
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
+import type { User } from "../types/ApiTypes";
+import StatsStyling from "../styles/stats_styling";
+
+const styles = StatsStyling;
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  userData: User | null;
+  username: string;
+};
+
+export default function UserModal({ open, onClose, userData, username }: Props) {
+  return (
+    <Dialog open={open} onClose={onClose} style={{ position: "relative", zIndex: 50 }}>
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.45)",
+        }}
+      />
+
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 16,
+        }}
+      >
+        <DialogPanel style={{ ...styles.card, width: "min(520px, 95vw)" }}>
+          <div style={styles.headerBar}>
+            <div>
+              <DialogTitle style={styles.sectionTitle}>{username}</DialogTitle>
+              <p style={styles.sectionSubtitle}>User activity breakdown</p>
+            </div>
+
+            <button onClick={onClose} style={styles.buttonSecondary}>
+              Close
+            </button>
+          </div>
+
+          {!userData ? (
+            <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.topUserItem}>
+                <div style={styles.topUserName}>Posts</div>
+                <div style={styles.topUserMeta}>{userData.post}</div>
+              </div>
+
+              <div style={styles.topUserItem}>
+                <div style={styles.topUserName}>Comments</div>
+                <div style={styles.topUserMeta}>{userData.comment}</div>
+              </div>
+
+              <div style={styles.topUserItem}>
+                <div style={styles.topUserName}>Comment/Post Ratio</div>
+                <div style={styles.topUserMeta}>
+                  {userData.comment_post_ratio.toFixed(2)}
+                </div>
+              </div>
+
+              <div style={styles.topUserItem}>
+                <div style={styles.topUserName}>Comment Share</div>
+                <div style={styles.topUserMeta}>
+                  {(userData.comment_share * 100).toFixed(1)}%
+                </div>
+              </div>
+
+              {userData.vocab ? (
+                <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)
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          )}
+        </DialogPanel>
+      </div>
+    </Dialog>
+  );
+}

frontend/src/pages/Stats.tsx

@@ -14,6 +14,7 @@ import ActivityHeatmap from "../stats/ActivityHeatmap";
 import { ReactWordcloud } from '@cp949/react-wordcloud';
 import StatsStyling from "../styles/stats_styling";
 import Card from "../components/Card";
+import UserModal from "../components/UserModal";
 
 import { 
   type TopUser, 
@@ -22,7 +23,8 @@ import {
   type UserAnalysisResponse, 
   type TimeAnalysisResponse,
   type ContentAnalysisResponse,
-  type FilterResponse
+  type FilterResponse,
+  type User
 } from '../types/ApiTypes'
 
 const styles = StatsStyling;
@@ -57,6 +59,9 @@ const StatPage = () => {
   const [contentData, setContentData] = useState<ContentAnalysisResponse | null>(null);
   const [summary, setSummary] = useState<SummaryResponse | null>(null);
 
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+  const selectedUserData: User | null = userData?.users.find((u) => u.author === selectedUser) ?? null;
+
 
   const searchInputRef = useRef<HTMLInputElement>(null);
   const beforeDateRef = useRef<HTMLInputElement>(null);
@@ -275,10 +280,11 @@ return (
         <p style={styles.sectionSubtitle}>Most active authors</p>
 
         <div style={styles.topUsersList}>
-          {userData?.top_users.map((item) => (
+          {userData?.top_users.slice(0, 100).map((item) => (
             <div
               key={`${item.author}-${item.source}`}
-              style={styles.topUserItem}
+              style={{ ...styles.topUserItem, cursor: "pointer" }}
+              onClick={() => setSelectedUser(item.author)}
             >
               <div style={styles.topUserName}>{item.author}</div>
               <div style={styles.topUserMeta}>
@@ -299,6 +305,13 @@ return (
         </div>
       </div>
     </div>
+
+    <UserModal
+      open={!!selectedUser}
+      onClose={() => setSelectedUser(null)}
+      username={selectedUser ?? ""}
+      userData={selectedUserData}
+    />
   </div>
 );
 }

frontend/src/styles/stats_styling.tsx

@@ -119,6 +119,7 @@ const StatsStyling: Record<string, CSSProperties> = {
   topUserName: {
     fontWeight: 700,
     fontSize: 14,
+    color: "black"
   },
 
   topUserMeta: {