{"id":29595403,"url":"https://github.com/shayanb/timeline","last_synced_at":"2025-07-20T08:08:37.851Z","repository":{"id":298616098,"uuid":"974589164","full_name":"shayanb/timeline","owner":"shayanb","description":"Lifeline: Interactive web application to create and visualize timelines.","archived":false,"fork":false,"pushed_at":"2025-06-20T19:02:27.000Z","size":1092,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-15T06:07:04.806Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://shayanb.github.io/timeline/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shayanb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-29T02:29:38.000Z","updated_at":"2025-06-23T02:04:50.000Z","dependencies_parsed_at":"2025-06-20T03:22:41.527Z","dependency_job_id":null,"html_url":"https://github.com/shayanb/timeline","commit_stats":null,"previous_names":["shayanb/timeline"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shayanb/timeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Ftimeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Ftimeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Ftimeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Ftimeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shayanb","download_url":"https://codeload.github.com/shayanb/timeline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Ftimeline/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266087790,"owners_count":23874519,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-20T08:08:37.233Z","updated_at":"2025-07-20T08:08:37.821Z","avatar_url":"https://github.com/shayanb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Timeline App\n\nInteractive web application to create and visualize timelines.\n\n\nFeatures\n--------\n- Add events with title, start date, end date, color, and metadata.\n- Visual multi-row timeline with colored bars.\n- Hover over events to view details.\n- Mark life events/anniversaries using the \"Life Event\" checkbox (renders as vertical lines).\n- Randomized color is assigned to the next event input after each addition.\n- Scrollable and zoomable timeline navigation.\n- Load predefined events from `data/events.yaml` on startup.\n- Define parent/child relationships in YAML or via UI to split and merge event bars for nested timelines.\n- Edit existing events by clicking on their bars; a popup form appears with animation for in-place editing.\n- Add new events using the \"+\" button below the chart, which opens the event form.\n- UI styled with Semantic UI framework for responsive components.\n\n\n\n## Project Structure\n\nThis application has been refactored into a modular architecture for better maintainability and development experience:\n\n```\ntimeline/\n├── index.html              # Main application entry point\n├── script.js               # Main application coordination and initialization\n├── css/                    # Modular stylesheets\n│   ├── base.css           # Global styles and resets\n│   ├── timeline.css       # Timeline-specific styles\n│   ├── forms.css          # Form-related styles\n│   └── controls.css       # UI controls and buttons\n├── js/                     # Modular JavaScript components\n│   ├── config.js          # App configuration and constants\n│   ├── utils.js           # Utility functions and calculations\n│   ├── data-manager.js    # Import/export and data processing\n│   ├── event-manager.js   # Event CRUD operations\n│   ├── timeline-renderer.js # Timeline visualization\n│   ├── ui-components.js   # UI components and controls\n│   ├── interactions.js    # Zoom, pan, and timeline interactions\n│   ├── visualizations.js # Charts and geographic visualizations\n│   ├── tests.js          # Testing and validation functions\n│   └── template-loader.js # HTML template loading utilities\n├── templates/             # Reusable HTML components\n│   ├── event-form.html   # Event creation/editing form\n│   ├── controls.html     # Import/export controls\n│   ├── timeline-container.html # Timeline layout\n│   ├── charts-container.html   # Visualization charts\n│   └── footer.html       # Application footer\n└── data/                 # Data files\n    ├── events.yaml       # Default timeline events\n    └── ...              # Other data files\n```\n\nGetting Started\n---------------\n1. Clone the repository.\n2. Start a simple HTTP server (required for ES6 modules):\n   ```bash\n   python3 -m http.server 8000\n   ```\n3. Navigate to `http://localhost:8000`.\n   - The app will load predefined events from `data/events.yaml`.\n   - Use the form to add new timeline events; check \"Life Event\" to mark anniversaries.\n   - Scroll or use mouse wheel (or pinch) to zoom and pan the timeline.\n\n## Development\n\n### Module System\nThe application uses ES6 modules for better code organization. Each module has a specific responsibility:\n\n- **config.js**: Application constants and configuration\n- **utils.js**: Date calculations, formatting, and utility functions\n- **data-manager.js**: File import/export, data validation, and format conversion\n- **event-manager.js**: Event CRUD operations and form management\n- **timeline-renderer.js**: Timeline visualization and rendering\n- **ui-components.js**: UI controls, dropdowns, and interactive elements\n- **interactions.js**: Zoom, pan, and timeline navigation\n- **visualizations.js**: Charts and geographic data visualization\n- **tests.js**: Testing framework and validation functions\n\n### Testing\nEnable development mode by adding `?debug=true` to the URL or running on localhost. This enables:\n- Import/export test suite\n- Parent-child relationship validation\n- Data integrity testing\n\n### Adding New Features\n1. Identify the appropriate module for your feature\n2. Add new functions to the relevant module\n3. Import and use the functions in `script.js` or other modules\n4. Update tests as needed\n\nData Import/Export\n------------------\nThe app supports importing and exporting events in both YAML and CSV formats.\n\n### YAML Configuration\nEvents can be defined in YAML with the following fields:\n  - `title` (string, required): Event name.\n  - `start` (date, YYYY-MM-DD, required): Start date.\n  - `end` (date, YYYY-MM-DD, optional): End date for range events.\n  - `type` (`range` | `life` | `milestone`, optional): Event type. Defaults to `range`, or `life` if `life_event: true` is set.\n  - `id` (string, optional): Unique identifier for the event (used for parent-child relationships).\n  - `parentId` (string, optional): ID of the parent event for nested (child) events.\n  - `isParent` (boolean, optional): Flag to mark if this event is a parent for other events.\n  - `isImportant` (boolean, optional): Flag to highlight the event as important.\n  - `life_event` (boolean, optional): Legacy flag for life events (renders as vertical lines).\n  - `color` (string, optional): Hex color code for the event.\n  - `metadata` (string, optional): Additional event details.\n  - `category` (string, optional): Event category for grouping.\n  - `row` (number, optional): Row number for positioning the event in the timeline.\n  - `location` (object, optional): Location information with `city` and `country` properties.\n\nExample YAML:\n```yaml\n- id: \"project-2022\"\n  title: \"Project\"  \n  start: \"2022-01-01\"  \n  end: \"2022-12-31\"  \n  color: \"#4CAF50\"\n  isParent: true\n\n- id: \"phase-1\"\n  title: \"Phase 1\"  \n  start: \"2022-01-01\"  \n  end: \"2022-03-31\"  \n  parentId: \"project-2022\"  \n  color: \"#FF9800\"  \n\n- id: \"phase-2\"\n  title: \"Phase 2\"  \n  start: \"2022-04-01\"  \n  end: \"2022-06-30\"  \n  parentId: \"project-2022\"  \n  color: \"#FF9800\"  \n```\n\n### CSV Format\nThe app also supports importing and exporting events in CSV format. The CSV format includes headers for all event properties, with parent-child relationships preserved through the `eventId` and `parentId` fields.\n\nExample CSV:\n```csv\neventId,title,start,end,type,color,metadata,category,parentId,isParent,isImportant,row,location_city,location_country\nproject-2022,Project,2022-01-01,2022-12-31,range,#4CAF50,,,,,true,0,,\nphase-1,Phase 1,2022-01-01,2022-03-31,range,#FF9800,,project,project-2022,,,1,,\nphase-2,Phase 2,2022-04-01,2022-06-30,range,#FF9800,,project,project-2022,,,1,,\n```\n\n### Parent-Child Relationships\n\nWhen importing and exporting data:\n1. Each event should have a unique `id` (or `eventId` in CSV) if it will be referenced by children\n2. Child events should reference their parent's ID using the `parentId` field\n3. Parent events should set `isParent: true` to enable proper styling\n\nThe app ensures these relationships are preserved during both import and export operations.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshayanb%2Ftimeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshayanb%2Ftimeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshayanb%2Ftimeline/lists"}