Skip to content

Conversation

@grogs84
Copy link

@grogs84 grogs84 commented Nov 10, 2025

Pull request type

Check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Issue Number: N/A

Current State:
Gephi Lite currently lacks the ability to filter and visualize temporal networks. Users with time-series graph data (edges with date/timestamp attributes) have no way to:

  • View how their network changes over time
  • Filter edges based on date ranges
  • Explore temporal patterns in their data
  • Animate network evolution

This limits Gephi Lite's usefulness for analyzing temporal networks like social interactions, communication patterns, citation networks, and transaction histories.

What is the new behavior?

Timeline Filter Feature:

This PR adds comprehensive timeline filtering capability to Gephi Lite, enabling users to interactively explore temporal networks.

Key Features:

1. Custom TimeRangeSlider Component

A fully accessible dual-thumb range slider with advanced interactions:

  • Resize: Drag individual thumbs to adjust the time window size
  • Pan: Drag the selected track to slide the entire time window (unique feature!)
  • Quick Jump: Click anywhere on the rail to move the nearest thumb
  • Keyboard Navigation:
    • Arrow keys (←→) to resize the range
    • Shift + Arrow keys to pan the time window
    • Tab to focus between thumbs
  • Full ARIA Support: Proper roles and attributes for accessibility
  • Visual Feedback: Helpful hints showing available keyboard shortcuts

2. Timeline Filter Type

  • New filter type that automatically appears for date/timestamp fields on edges
  • Min/max date range selection with millisecond precision
  • Option to keep or hide edges with missing date values
  • Uses Luxon DateTime for robust date parsing

3. Fade Mode (Innovative Feature)

Two visualization modes:

  • Standard Mode: Filtered edges and disconnected nodes are hidden
  • Fade Mode: Filtered elements remain visible with 5% opacity (ghost elements)
    • Provides context while maintaining focus on the active time period
    • Nodes without active edges in the time range are also faded
    • Creates smooth visual transitions when sliding through time

4. Sample Graph

Added "Social Network Timeline.json" demonstrating the feature:

  • 5 nodes, 10 edges with timestamps spanning January-October 2023
  • Various interaction types (message, call, meeting, email)
  • Shows realistic temporal patterns

Technical Implementation:

New Files:

  • packages/gephi-lite/src/components/GraphFilters/TimeRangeSlider.tsx - Custom slider
  • packages/gephi-lite/src/components/GraphFilters/TimelineFilter.tsx - Filter UI
  • packages/gephi-lite/public/samples/Social Network Timeline.json - Sample data

Modified Files:

  • packages/sdk/src/filters/types.ts - Added TimelineFilterType
  • packages/gephi-lite/src/core/filters/types.ts - Exported timeline type
  • packages/gephi-lite/src/core/filters/utils.ts - Filtering logic
  • packages/gephi-lite/src/components/GraphFilters/index.tsx - Integration
  • packages/gephi-lite/src/components/modals/SelectFilterModal.tsx - Auto-selection
  • packages/gephi-lite/src/views/graphPage/controllers/AppearanceController.tsx - Fade mode
  • packages/gephi-lite/src/components/modals/WelcomeModal.tsx - Added sample
  • packages/gephi-lite/src/locales/en.json - Translations

Usage:

  1. Load a graph with date/timestamp attributes on edges
  2. Click "Filters" → "Add filter" → Select a date field
  3. Use the slider to:
    • Drag thumbs to resize the time window
    • Drag the track to pan through time
    • Use keyboard shortcuts (arrows/Shift+arrows)
  4. Toggle "Show faded edges and nodes" to see filtered elements as ghosts

Testing:

  • ✅ Slider interactions (drag thumbs, drag track, click rail)
  • ✅ Keyboard navigation and accessibility
  • ✅ Fade mode opacity application
  • ✅ Performance with various time ranges
  • ✅ Missing/invalid date handling
  • ✅ Real-time graph updates

Breaking Changes:

None - all changes are additive.

Dependencies:

  • Uses existing Luxon and Chroma.js libraries (no new dependencies)

Other information

Why This Matters:

Many real-world networks have temporal dimensions. This feature enables researchers, analysts, and data scientists to:

  • Explore how network structure evolves over time
  • Identify temporal patterns and trends
  • Understand causality and sequences in their data
  • Create temporal network visualizations for presentations

Accessibility:

Full keyboard navigation, ARIA attributes, focus indicators, and screen reader support included.

Future Enhancements (not in this PR):

  • Animation controls (play/pause) for automatic timeline advancement
  • Node timestamp support (currently edges only)
  • Time aggregation views (group by day/week/month)

Screenshots:

image image

This feature significantly enhances Gephi Lite's capability for temporal network analysis, making it a more powerful tool for understanding dynamic networks.

- Add TimelineFilterType to SDK and gephi-lite packages
- Implement timeline filtering logic using Luxon DateTime
- Create TimelineFilter component with interactive slider
- Integrate timeline filter into filters panel
- Add automatic filter selection for date fields on edges
- Create sample 'Social Network Timeline' graph with temporal data
- Add English translations for timeline filter
- Document feature in TIMELINE_FEATURE.md

This feature allows users to filter graph edges based on date/timestamp
attributes using an interactive slider. Users can visualize how their
graph evolves over time by selecting different time ranges.
- Remove unused inRangeIncluded import from TimelineFilter
- Move useFilteredGraphAt hook call before early return to fix React Hooks rules
- Add 'Social Network Timeline.json' to samples list in WelcomeModal

Fixes:
- ESLint no-unused-vars warning
- React Hooks rules-of-hooks error
- Sample file now appears in the loading window menu
- Created custom TimeRangeSlider component with draggable range track
- Support for dragging individual thumbs to resize range
- Support for dragging the selected track to pan the time window
- Full keyboard navigation (arrows to resize, Shift+arrows to pan)
- Complete ARIA accessibility support
- Added fadeInsteadOfHide option to timeline filters
- Implemented opacity-based filtering (0.05 alpha) for edges and nodes
- Faded nodes without active edges in timeline range
- Updated translations to be more user-friendly
- Timeline filter now shows 'Timeline' label
- Fade checkbox shows 'Show faded edges and nodes'
@grogs84 grogs84 changed the base branch from main to dev November 10, 2025 21:26
@grogs84 grogs84 marked this pull request as draft November 11, 2025 02:11
@grogs84
Copy link
Author

grogs84 commented Nov 11, 2025

@jacomyma or team. What is the process for contributing to the project? I have a feature to allow for filtering by dates I think would be useful. I didn't see anything already in the Issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant