71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { useGetStickies, useClusterStickies } from '../api/api';
|
|
import type { Sticky as StickyType } from '../types/types';
|
|
import Sticky from './sticky';
|
|
import Button from './button';
|
|
import '../styles/stickies.css';
|
|
|
|
const scoreLabel = (score: number): string => {
|
|
if (score >= 0.7) return 'Strong';
|
|
if (score >= 0.4) return 'Moderate';
|
|
if (score >= 0.1) return 'Weak';
|
|
return 'Poor';
|
|
};
|
|
|
|
const Stickies = () => {
|
|
const { data: stickies, isLoading, error } = useGetStickies();
|
|
const { mutate: cluster, data: clusterResponse, isPending } = useClusterStickies();
|
|
if (isLoading) return <div>Loading...</div>;
|
|
if (error) return <div>Error: {error.message}</div>;
|
|
|
|
const clusters = clusterResponse?.clusters;
|
|
const score = clusterResponse?.score;
|
|
|
|
const handleCluster = () => {
|
|
cluster();
|
|
};
|
|
|
|
const buildStickyMap = (): Map<string, StickyType> => {
|
|
const map = new Map<string, StickyType>();
|
|
stickies?.forEach((s) => map.set(s.id, s));
|
|
return map;
|
|
};
|
|
|
|
const stickyMap = buildStickyMap();
|
|
|
|
const renderStickies = (items: StickyType[]) =>
|
|
items?.map((sticky) => <Sticky key={sticky.id} sticky={sticky} />);
|
|
|
|
return (
|
|
<div className="stickies-container">
|
|
<Button onClick={handleCluster} isLoading={isPending} label="Group Stickies By Topic" />
|
|
{clusters ? (
|
|
<div className="clusters-container">
|
|
{score != null && (
|
|
<div className="cohesion-score">
|
|
Cluster cohesion: <strong>{score.toFixed(2)}</strong> — {scoreLabel(score)}
|
|
</div>
|
|
)}
|
|
{clusters.map((group) => (
|
|
<div key={group.label} className="cluster-group">
|
|
<h3 className="cluster-label">{group.label}</h3>
|
|
<div className="stickies-grid">
|
|
{renderStickies(
|
|
group?.noteIds
|
|
.map((id) => stickyMap?.get(id))
|
|
.filter((s): s is StickyType => !!s)
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="stickies-grid">
|
|
{renderStickies(stickies ?? [])}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Stickies;
|