Add Timeline feature with Gantt chart and D3 visualizations#121
Merged
Conversation
… integrated it into Ushadow. Here's a summary: `★ Insight ─────────────────────────────────────` **What was extracted:** - **TimelineRouter** - Tab navigation between timeline implementations - **FrappeGanttTimeline** - Gantt chart using the frappe-gantt library - **MyceliaTimeline** - D3.js-based interactive timeline with zoom/pan **Key adaptations made:** 1. **API Integration** - Changed from `memoriesApi.getAll()` to Ushadow's `memoriesApi.fetchMemories()` pattern 2. **Type Safety** - Created proper TypeScript interfaces and a type declaration for frappe-gantt 3. **Security** - Replaced innerHTML-based tooltips with React components (avoiding XSS) 4. **Test IDs** - Added comprehensive `data-testid` attributes per CLAUDE.md requirements `────────────��────────────────────────────────────` ## Summary **Files created:** - `ushadow/frontend/src/pages/TimelinePage.tsx` - Main timeline page with two implementations - `ushadow/frontend/src/types/frappe-gantt.d.ts` - TypeScript declarations for frappe-gantt **Files modified:** - `ushadow/frontend/src/App.tsx` - Added TimelinePage import and `/timeline` route - `ushadow/frontend/package.json` - Added `d3`, `frappe-gantt`, and `@types/d3` dependencies **Features:** - Two timeline visualization options (Frappe Gantt and Mycelia D3) - Tab navigation to switch between implementations - Demo data mode to preview functionality without real data - Zoom, pan, and view mode controls - Tooltip details on hover/click - Color-coded events by type (Event, Person, Place) - Dark mode support - Responsive design The timeline is now accessible at `/timeline` in the Ushadow frontend.
…nt of the changes. `★ Insight ─────────────────────────────────────` **Feature Flag Architecture in Ushadow:** - **YAML Configuration** - Feature flags are defined in `config/feature_flags.yaml` and hot-reloadable without restart - **Context Provider** - `FeatureFlagsContext` provides `isEnabled()` function to check flag status - **Route Protection** - `FeatureRoute` component conditionally renders routes based on flags - **Navigation Filtering** - Navigation items with `featureFlag` property are automatically filtered in Layout - **UI Indicator** - Feature flags drawer shows all flags with toggle controls (accessed via Flask icon in header) This architecture allows you to: 1. Enable/disable features without code changes 2. Test features in production safely 3. Gradually roll out features to users 4. A/B test different implementations `─────────────────────────────────────────────────` ## Summary I've successfully added a navigation menu item for the Timeline feature and protected it with a feature flag. Here's what was done: ### Changes Made: **1. Feature Flag Configuration** (`config/feature_flags.yaml`): - Added `timeline` feature flag (enabled by default) - Type: `release` - indicates it's a user-facing feature - Description explains it visualizes memories on Gantt charts and D3 timelines **2. Navigation Menu** (`ushadow/frontend/src/components/layout/Layout.tsx`): - Imported `Calendar` icon from lucide-react - Added Timeline navigation item between Memories and Cluster - Item uses Calendar icon and is tied to the `timeline` feature flag - Will automatically show/hide based on flag status **3. Route Protection** (`ushadow/frontend/src/App.tsx`): - Wrapped the `/timeline` route with `<FeatureRoute featureFlag="timeline">` - This ensures users can't access the route even if they know the URL when the flag is disabled ### How It Works: **When the feature flag is enabled (default):** - "Timeline" menu item appears in the sidebar navigation - Clicking it navigates to `/timeline` - TimelinePage component renders with both Frappe Gantt and Mycelia D3 implementations **When the feature flag is disabled:** - Navigation item is automatically hidden - Direct navigation to `/timeline` is blocked (returns to a safe route) - No errors or broken links **Toggle the feature flag:** - Click the Flask icon (🧪) in the header to open the Feature Flags drawer - Find "Timeline" in the list - Toggle it on/off to show/hide the feature The Timeline feature is now fully integrated with Ushadow's feature flag system and navigation!
thestumonkey
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an interactive Timeline page to visualize memories with time ranges using two different visualization approaches: Frappe Gantt charts and D3-based Mycelia timelines.
What Changed
New Timeline Page
Frontend Integration
d3,frappe-gantt,@types/d3data-testidattributes per CLAUDE.md requirementsFeature Flag Protection
timelinefeature flag toconfig/feature_flags.yaml(enabled by default)FeatureRoutecomponent for access controlWhy These Changes
This feature was extracted from the friend-lite repository (
stu-old-branch) to bring timeline visualization capabilities to Ushadow's memory system. The implementation provides two different visualization approaches to give users flexibility in how they view their temporal memory data.Implementation Highlights
Security Improvements
Type Safety
TimelineMetadatainterface for type-safe timeRange accessUser Experience
Testing
Accessing the Feature
/timelineor click "Timeline" in the sidebarExtracted from:
friend-lite/stu-old-branchRoute:
/timelineFeature Flag:
timeline