Skip to main content

Memory Graph

The Memory Graph visualization is one of Reeflect's most powerful features, allowing you to visualize and explore the relationships between memories as an interactive network.

Memory Graph Visualization

Graph Components​

Nodes

Individual memories displayed as interactive nodes. Node size represents importance, and color represents namespace or memory type.

Edges

Relationships between memories shown as connections. Edge type and thickness represent relationship type and confidence.

Clusters

Related memories grouped into clusters representing topics, concepts, or time periods for easier navigation.

Using the Memory Graph​

There are several ways to integrate the Memory Graph into your application:

1. Using the React Component​

For web applications, you can use our React component:

import React, { useState, useEffect } from 'react';
import { MemoryGraph } from 'reeflect-react';

const MemoryVisualizer = () => {
  const [nodes, setNodes] = useState([]);
  const [links, setLinks] = useState([]);
  
  useEffect(() => {
    // Fetch memories from your API
    async function fetchMemories() {
      const response = await fetch('/api/memories?namespace=user_preferences');
      const data = await response.json();
      
      // Transform data for visualization
      setNodes(data.memories.map(memory => ({
        id: memory.id,
        content: memory.content,
        importance: memory.importance,
        namespace: memory.namespace,
        created_at: memory.created_at,
        access_count: memory.access_count
      })));
      
      // Transform relationships into links
      const linkData = [];
      data.memories.forEach(memory => {
        memory.relations.forEach(relation => {
          linkData.push({
            source: memory.id,
            target: relation.target_id,
            relation_type: relation.relation_type,
            confidence: relation.confidence
          });
        });
      });
      setLinks(linkData);
    }
    
    fetchMemories();
  }, []);
  
  const handleNodeClick = (node) => {
    console.log('Selected node:', node);
    // Do something with the selected node
  };
  
  return (
    <div className="memory-graph-container" style={{ height: '600px' }}>
      <MemoryGraph
        nodes={nodes}
        links={links}
        width={800}
        height={600}
        onNodeClick={handleNodeClick}
      />
    </div>
  );
};

2. Using the Python API​

For Python applications or notebooks, you can generate visualizations with our Python API:

from reeflect.visualization import MemoryGraphVisualizer

# Create visualizer
visualizer = MemoryGraphVisualizer(memory_system)

# Generate and display visualization
graph = visualizer.generate_graph(
    namespace="user_preferences",
    filter_params={"min_importance": 0.3},
    layout="force-directed",  # Options: force-directed, radial, hierarchical
    color_by="namespace",     # Options: namespace, memory_type, importance
    size_by="importance",     # Options: importance, access_count, age
    max_nodes=100
)

# For Jupyter notebooks
visualizer.display(graph)

# Export as HTML
visualizer.export_html(graph, "memory_graph.html")

# Export as image
visualizer.export_image(graph, "memory_graph.svg", width=1200, height=800)

3. Using the REST API​

For custom integrations, you can use our REST API to get graph data:

// Example using fetch API
async function fetchMemoryGraph() {
  const response = await fetch('https://api.reeflect.ai/v1/graph', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_API_KEY'
    },
    body: JSON.stringify({
      namespace: 'user_preferences',
      filter_params: {
        min_importance: 0.3
      },
      max_nodes: 100
    })
  });
  
  const graphData = await response.json();
  return graphData;
}

Customizing the Graph​

The Memory Graph is highly customizable to fit your application's needs:

PropertyOptionsDescription
layoutforce-directed, radial, hierarchical, temporalThe algorithm used to position nodes in the visualization
color_bynamespace, memory_type, importance, age, customThe attribute used to determine node colors
size_byimportance, access_count, age, customThe attribute used to determine node sizes
group_bynamespace, memory_type, tags, customHow nodes are grouped into clusters
show_labelsall, important, hover, noneWhen and how to display node labels

Interactive Features​

The Memory Graph supports various interactive features:

Node Selection​

<MemoryGraph
  // ...other props
  onNodeClick={(node) => setSelectedNode(node)}
  onNodeHover={(node) => setHoveredNode(node)}
  highlightSelected={true}
/>

Filtering​

<MemoryGraph
  // ...other props
  initialFilters={{
    min_importance: 0.5,
    tags: ["preference", "ui"],
    date_range: {
      start: "2025-01-01",
      end: "2025-04-01"
    }
  }}
  showFilterControls={true}
/>

Zooming and Panning​

<MemoryGraph
  // ...other props
  enableZoom={true}
  enablePan={true}
  defaultZoom={1.2}
  zoomExtent={[0.5, 3]}
/>

Temporal Playback​

For time-based visualizations:

<MemoryGraph
  // ...other props
  enableTimePlayback={true}
  timeField="created_at"
  timeRange={{
    start: "2025-01-01",
    end: "2025-04-01"
  }}
  playbackSpeed={1000} // ms per step
/>

Use Cases​

The Memory Graph visualization is particularly useful for:

  1. Knowledge Exploration: Discover connections between different pieces of information
  2. Content Auditing: Identify contradictions or inconsistencies in the memory system
  3. Teaching and Training: Explain how AI remembers and connects information
  4. Transparency: Show users what information is being used to make decisions
  5. Memory Debugging: Diagnose issues with memory retrieval or reasoning

Real-World Example​

Here's a complete example of using the Memory Graph to visualize user preferences and their relationships:

import React, { useState, useEffect } from 'react';
import { MemoryGraph, useMemory } from 'reeflect-react';

const UserPreferenceVisualizer = () => {
  const [selectedNode, setSelectedNode] = useState(null);
  const { fetchGraph, isLoading, error } = useMemory();
  const [graphData, setGraphData] = useState({ nodes: [], links: [] });
  
  useEffect(() => {
    async function loadGraph() {
      const data = await fetchGraph({
        namespace: 'user_preferences',
        layout: 'force-directed',
        color_by: 'importance',
        size_by: 'access_count',
        max_nodes: 50
      });
      
      setGraphData(data);
    }
    
    loadGraph();
  }, [fetchGraph]);
  
  const handleNodeClick = (node) => {
    setSelectedNode(node);
  };
  
  if (isLoading) return <div>Loading graph...</div>;
  if (error) return <div>Error loading graph: {error.message}</div>;
  
  return (
    <div className="graph-container">
      <div className="graph-controls">
        <h3>User Preference Knowledge Graph</h3>
        <div className="control-buttons">
          <button onClick={() => setGraphData({ ...graphData, layout: 'force-directed' })}>
            Force Layout
          </button>
          <button onClick={() => setGraphData({ ...graphData, layout: 'radial' })}>
            Radial Layout
          </button>
          <button onClick={() => setGraphData({ ...graphData, layout: 'hierarchical' })}>
            Hierarchical Layout
          </button>
        </div>
      </div>
      
      <div className="graph-visualization" style={{ height: '600px' }}>
        <MemoryGraph
          nodes={graphData.nodes}
          links={graphData.links}
          width="100%"
          height={600}
          layout={graphData.layout}
          onNodeClick={handleNodeClick}
          highlightSelected={true}
          showLegend={true}
        />
      </div>
      
      {selectedNode && (
        <div className="node-details">
          <h4>{selectedNode.content}</h4>
          <div className="detail-grid">
            <div>
              <strong>Importance:</strong> {selectedNode.importance.toFixed(2)}
            </div>
            <div>
              <strong>Created:</strong> {new Date(selectedNode.created_at).toLocaleString()}
            </div>
            <div>
              <strong>Access Count:</strong> {selectedNode.access_count}
            </div>
            <div>
              <strong>Tags:</strong> {selectedNode.tags.join(', ')}
            </div>
          </div>
          {selectedNode.relations && selectedNode.relations.length > 0 && (
            <div className="relations">
              <strong>Relations:</strong>
              <ul>
                {selectedNode.relations.map(rel => (
                  <li key={rel.target_id}>
                    {rel.relation_type} → {rel.target_content || rel.target_id}
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

Next Steps​

Learn about other visualization tools in Reeflect: