diff options
Diffstat (limited to 'packages/memory-graph/src/components/legend.tsx')
| -rw-r--r-- | packages/memory-graph/src/components/legend.tsx | 169 |
1 files changed, 86 insertions, 83 deletions
diff --git a/packages/memory-graph/src/components/legend.tsx b/packages/memory-graph/src/components/legend.tsx index 16f588a9..db06da10 100644 --- a/packages/memory-graph/src/components/legend.tsx +++ b/packages/memory-graph/src/components/legend.tsx @@ -1,44 +1,44 @@ -"use client"; +"use client" -import { useIsMobile } from "@/hooks/use-mobile"; +import { useIsMobile } from "@/hooks/use-mobile" import { Collapsible, CollapsibleContent, CollapsibleTrigger, -} from "@/ui/collapsible"; -import { GlassMenuEffect } from "@/ui/glass-effect"; -import { Brain, ChevronDown, ChevronUp, FileText } from "lucide-react"; -import { memo, useEffect, useState } from "react"; -import { colors } from "@/constants"; -import type { GraphEdge, GraphNode, LegendProps } from "@/types"; -import * as styles from "./legend.css"; +} from "@/ui/collapsible" +import { GlassMenuEffect } from "@/ui/glass-effect" +import { Brain, ChevronDown, ChevronUp, FileText } from "lucide-react" +import { memo, useEffect, useState } from "react" +import { colors } from "@/constants" +import type { GraphEdge, GraphNode, LegendProps } from "@/types" +import * as styles from "./legend.css" // Cookie utility functions for legend state const setCookie = (name: string, value: string, days = 365) => { - if (typeof document === "undefined") return; - const expires = new Date(); - expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); - document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`; -}; + if (typeof document === "undefined") return + const expires = new Date() + expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000) + document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/` +} const getCookie = (name: string): string | null => { - if (typeof document === "undefined") return null; - const nameEQ = `${name}=`; - const ca = document.cookie.split(";"); + if (typeof document === "undefined") return null + const nameEQ = `${name}=` + const ca = document.cookie.split(";") for (let i = 0; i < ca.length; i++) { - let c = ca[i]; - if (!c) continue; - while (c.charAt(0) === " ") c = c.substring(1, c.length); - if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); + let c = ca[i] + if (!c) continue + while (c.charAt(0) === " ") c = c.substring(1, c.length) + if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length) } - return null; -}; + return null +} interface ExtendedLegendProps extends LegendProps { - id?: string; - nodes?: GraphNode[]; - edges?: GraphEdge[]; - isLoading?: boolean; + id?: string + nodes?: GraphNode[] + edges?: GraphEdge[] + isLoading?: boolean } export const Legend = memo(function Legend({ @@ -48,55 +48,57 @@ export const Legend = memo(function Legend({ edges = [], isLoading = false, }: ExtendedLegendProps) { - const isMobile = useIsMobile(); - const [isExpanded, setIsExpanded] = useState(true); - const [isInitialized, setIsInitialized] = useState(false); + const isMobile = useIsMobile() + const [isExpanded, setIsExpanded] = useState(true) + const [isInitialized, setIsInitialized] = useState(false) // Load saved preference on client side useEffect(() => { if (!isInitialized) { - const savedState = getCookie("legendCollapsed"); + const savedState = getCookie("legendCollapsed") if (savedState === "true") { - setIsExpanded(false); + setIsExpanded(false) } else if (savedState === "false") { - setIsExpanded(true); + setIsExpanded(true) } else { // Default: collapsed on mobile, expanded on desktop - setIsExpanded(!isMobile); + setIsExpanded(!isMobile) } - setIsInitialized(true); + setIsInitialized(true) } - }, [isInitialized, isMobile]); + }, [isInitialized, isMobile]) // Save to cookie when state changes const handleToggleExpanded = (expanded: boolean) => { - setIsExpanded(expanded); - setCookie("legendCollapsed", expanded ? "false" : "true"); - }; + setIsExpanded(expanded) + setCookie("legendCollapsed", expanded ? "false" : "true") + } // Get container class based on variant and mobile state const getContainerClass = () => { if (variant === "console") { - return isMobile ? styles.legendContainer.consoleMobile : styles.legendContainer.consoleDesktop; + return isMobile + ? styles.legendContainer.consoleMobile + : styles.legendContainer.consoleDesktop } - return isMobile ? styles.legendContainer.consumerMobile : styles.legendContainer.consumerDesktop; - }; + return isMobile + ? styles.legendContainer.consumerMobile + : styles.legendContainer.consumerDesktop + } // Calculate stats - const memoryCount = nodes.filter((n) => n.type === "memory").length; - const documentCount = nodes.filter((n) => n.type === "document").length; + const memoryCount = nodes.filter((n) => n.type === "memory").length + const documentCount = nodes.filter((n) => n.type === "document").length - const containerClass = isMobile && !isExpanded - ? `${getContainerClass()} ${styles.mobileSize.collapsed}` - : isMobile - ? `${getContainerClass()} ${styles.mobileSize.expanded}` - : getContainerClass(); + const containerClass = + isMobile && !isExpanded + ? `${getContainerClass()} ${styles.mobileSize.collapsed}` + : isMobile + ? `${getContainerClass()} ${styles.mobileSize.expanded}` + : getContainerClass() return ( - <div - className={containerClass} - id={id} - > + <div className={containerClass} id={id}> <Collapsible onOpenChange={handleToggleExpanded} open={isExpanded}> {/* Glass effect background */} <GlassMenuEffect rounded="xl" /> @@ -128,18 +130,22 @@ export const Legend = memo(function Legend({ {/* Stats Section */} {!isLoading && ( <div className={styles.sectionWrapper}> - <div className={styles.sectionTitle}> - Statistics - </div> + <div className={styles.sectionTitle}>Statistics</div> <div className={styles.itemsList}> <div className={styles.legendItem}> - <Brain className={styles.legendIcon} style={{ color: "rgb(96, 165, 250)" }} /> + <Brain + className={styles.legendIcon} + style={{ color: "rgb(96, 165, 250)" }} + /> <span className={styles.legendText}> {memoryCount} memories </span> </div> <div className={styles.legendItem}> - <FileText className={styles.legendIcon} style={{ color: "rgb(203, 213, 225)" }} /> + <FileText + className={styles.legendIcon} + style={{ color: "rgb(203, 213, 225)" }} + /> <span className={styles.legendText}> {documentCount} documents </span> @@ -156,9 +162,7 @@ export const Legend = memo(function Legend({ {/* Node Types */} <div className={styles.sectionWrapper}> - <div className={styles.sectionTitle}> - Nodes - </div> + <div className={styles.sectionTitle}>Nodes</div> <div className={styles.itemsList}> <div className={styles.legendItem}> <div className={styles.documentNode} /> @@ -166,26 +170,26 @@ export const Legend = memo(function Legend({ </div> <div className={styles.legendItem}> <div className={styles.memoryNode} /> - <span className={styles.legendText}>Memory (latest)</span> + <span className={styles.legendText}> + Memory (latest) + </span> </div> <div className={styles.legendItem}> <div className={styles.memoryNodeOlder} /> - <span className={styles.legendText}>Memory (older)</span> + <span className={styles.legendText}> + Memory (older) + </span> </div> </div> </div> {/* Status Indicators */} <div className={styles.sectionWrapper}> - <div className={styles.sectionTitle}> - Status - </div> + <div className={styles.sectionTitle}>Status</div> <div className={styles.itemsList}> <div className={styles.legendItem}> <div className={styles.forgottenNode}> - <div className={styles.forgottenIcon}> - ✕ - </div> + <div className={styles.forgottenIcon}>✕</div> </div> <span className={styles.legendText}>Forgotten</span> </div> @@ -204,9 +208,7 @@ export const Legend = memo(function Legend({ {/* Connection Types */} <div className={styles.sectionWrapper}> - <div className={styles.sectionTitle}> - Connections - </div> + <div className={styles.sectionTitle}>Connections</div> <div className={styles.itemsList}> <div className={styles.legendItem}> <div className={styles.connectionLine} /> @@ -214,16 +216,16 @@ export const Legend = memo(function Legend({ </div> <div className={styles.legendItem}> <div className={styles.similarityLine} /> - <span className={styles.legendText}>Doc similarity</span> + <span className={styles.legendText}> + Doc similarity + </span> </div> </div> </div> {/* Relation Types */} <div className={styles.sectionWrapper}> - <div className={styles.sectionTitle}> - Relations - </div> + <div className={styles.sectionTitle}>Relations</div> <div className={styles.itemsList}> {[ ["updates", colors.relations.updates], @@ -237,7 +239,10 @@ export const Legend = memo(function Legend({ /> <span className={styles.legendText} - style={{ color: color, textTransform: "capitalize" }} + style={{ + color: color, + textTransform: "capitalize", + }} > {label} </span> @@ -248,9 +253,7 @@ export const Legend = memo(function Legend({ {/* Similarity Strength */} <div className={styles.sectionWrapper}> - <div className={styles.sectionTitle}> - Similarity - </div> + <div className={styles.sectionTitle}>Similarity</div> <div className={styles.itemsList}> <div className={styles.legendItem}> <div className={styles.weakSimilarity} /> @@ -269,7 +272,7 @@ export const Legend = memo(function Legend({ </div> </Collapsible> </div> - ); -}); + ) +}) -Legend.displayName = "Legend"; +Legend.displayName = "Legend" |