├── .gitignore ├── Instructions.md ├── README.md ├── package-lock.json ├── package.json ├── public ├── demo.gif └── index.html └── src ├── dateAxis.js ├── index.js ├── item.js ├── itemDurationDragControl.js ├── itemName.js ├── mouseMonitor.js ├── renderSizes.js ├── timeline.css ├── timeline.js └── timelineItems.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /Instructions.md: -------------------------------------------------------------------------------- 1 | ## High level objective: 2 | 3 | Design and implement a component for visualizing events on a timeline. 4 | 5 | ## Details: 6 | 7 | Your timeline layout should arrange events in a compact space-efficient way: generally speaking, if event A ends before event B starts, the bars for those events can share the same horizontal lane, instead of existing on separate lanes. You may want to slightly relax this constraint to fit in the name of the event (for example, if the event's bar is too short, or the event's name is too long). 8 | 9 | The input to the component should be an array of events, where each event has a name, start date, and end date. 10 | 11 | The start and end dates will be formatted as YYYY-MM-DD date strings, for example: “2018-12-23”. You don't need to worry about hours, minutes, seconds, or time zones. 12 | 13 | You can assume every event's end date is the same or later than its start date. 14 | 15 | Avoid using libraries that solve too much of the problem. General purpose libraries like React are definitely okay, but a library that calculates the layout for a timeline is not, for example. This also applies to the CSS Grid `grid-auto-flow` property (but you may use CSS Grid for positioning). 16 | 17 | After you have a basic read-only timeline showing up, here are some potential improvements to attempt: 18 | 19 | * Allow zooming in and out of the timeline. 20 | * Allow dragging and dropping to change the start date and/or end date for an event. 21 | * Allow editing the name of events inline. 22 | * Any other polish or useful enhancements you can think of. 23 | 24 | Include a README that covers: 25 | 26 | * How long you spent on the assignment. 27 | * What you like about your implementation. 28 | * What you would change if you were going to do it again. 29 | * How you made your design decisions. For example, if you looked at other timelines for inspiration, please note that. 30 | * How you would test this if you had more time. 31 | 32 | If you did not use the starter code, please also include instructions on how to build and run your project so we can see and interact with the timeline component you built. It should render the sample data included in "src/timelineItems.js" 33 | 34 | What we're looking for: 35 | 36 | * Clean, readable, maintainable code. 37 | * A sensible user experience and design for the final product. 38 | 39 | ## Starter code: 40 | 41 | To use the starter code: navigate to this project directory, run `npm install` to install dependencies (this takes a couple minutes), and then run `npm start` to initialize and connect to a node server with your default browser. Please feel free to use as much or as little of the starter code as you'd like. 42 | 43 | ## Sample data: 44 | 45 | The "src/timelineItems.js" file has some sample data you can use to get started. 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Timeline 2 | 3 | Mary Rose Cook / mary@maryrosecook.com 4 | 5 | ## Build and run 6 | 7 | Navigate to this project directory, run `npm install` to install dependencies (this takes a couple minutes), and then run `npm start` to initialize and connect to a node server with your default browser. 8 | 9 | ![Demo of the timeline](public/demo.gif) 10 | 11 | ## What I like about my implementation 12 | 13 | ### The code 14 | 15 | * Each concern is separated into its own component. This makes the code more readable and maintainable. 16 | 17 | * The code for allocating timeline items to rows is succinct. (See `Timeline.itemsWithRow`.) 18 | 19 | * The code for allocating timeline items to rows is mostly decoupled from the rest of the code that edits, displays and annotates timeline items. It receives some items and returns a set of row assignments. It only needs a function to map between a date and horizontal placement, and a function to determine the width of an item. (See `Timeline.itemsWithRow`.) 20 | 21 | * The logic for translating between screen coordinates and dates is isolated to two functions: `Timeline.dateToColumn` and `Timeline.xPositionToDate`. 22 | 23 | ### The design 24 | 25 | * The rows reflow after the user edits a timeline date. But they don't jump around while the user is still in the middle of editing. 26 | 27 | ## What I'd change 28 | 29 | ### The code 30 | 31 | * I'd find a way to amalgamate the mouse state tracking code (`MouseMonitor`) with the date drag control code (`ItemDurationDragControl`). I couldn't figure out a nice way to get mouse clicks and moves without putting the mouse tracking code near the top level. This reduced coherence (because those chunks of code are distant from each other) and increased complexity (see that `ItemDurationDragControl.handleDrag` has to monitor incoming props rather that just respond to events). 32 | 33 | * I'd add PropTypes to make future refactors easier. 34 | 35 | * (My first implementation used some plain JS objects (`Timeline`, `Row`, `Item`) to calculate and update item positioning. The idea was to keep that complexity in one place. But, React components are supposed to be for layout. So the layout code ended up spread between the JS objects and the components. Things became a lot simpler when I removed the objects.) 36 | 37 | * I'd consider using a min heap when laying out the timeline items in rows. When finding a row in which to place an item, the current code iterates the rows and returns the first one that has space for the item. Instead of this iteration, I could use a heap and pop off the first row that has space in `O(log(n))` time. (It seems likely there are better performance improvements that making this change, so I'd check this was a performance bottleneck first.) 38 | 39 | ### The design 40 | 41 | * You can't set an item's start or end to a date outside the current date span of the timeline. To solve this, I'd make dragging a control to the edge of the timeline scroll the view. 42 | 43 | * The date row at the top is too cluttered. The next design I'd try would be like the one below. This would reduce the amount of text, and allow faster scanning of the span of time. 44 | 45 | ``` 46 | 2018 47 | May June 48 | 1 5 10 22 1 5 49 | ----- ------------- ------ 50 | ------------ 51 | ``` 52 | 53 | * I'd allow zooming. 54 | 55 | * I'd handle an item start date being dragged past the item's end date (and vice versa). 56 | 57 | * I'd support item date editing on mobile. 58 | 59 | * I'd adjust the space-to-date mapping code to make the draggable date controls map precisely onto the grid. 60 | 61 | ## How I made design decisions 62 | 63 | * I designed the first version by sketching on paper. (I spent a while trying to find a nice way to make the timeline vertical, rather than horizontal. This felt like it would be a big win because scrolling through events would be so natural. I could never find a design that a) had room for item names and b) tied an item's date span to its name.) 64 | 65 | * I designed the second version by cutting out strips of paper and laying them out on my desk. 66 | 67 | * I hacked together implementations of ideas and then tried them out. 68 | 69 | * I got my wife to try out the interface and used her feedback to improve the design. (For example, as a result of this feedback, I moved the row of dates from the bottom to the top.) 70 | 71 | ## How I'd test this 72 | 73 | * I'd use Jest, because it's nicely integrated with React. I'd probably use Enzyme because it has a nice API over testing React components. 74 | 75 | * The componenents are all pure, so I could test them by just passing in props and checking the right HTML was rendered and the right callbacks were called. 76 | 77 | * When testing a component, I'd test the interfaces between it and its sub components. I'd check its sub-components were rendered and were passed the expected props. 78 | 79 | * I'd also have a few integration tests that checked the output from the whole app to check it worked. 80 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "timeline_assignment", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "moment": "^2.24.0", 7 | "react": "16.2.0", 8 | "react-dom": "16.2.0", 9 | "react-scripts": "1.1.0" 10 | }, 11 | "devDependencies": {}, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /public/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maryrosecook/timeline/d88afe3cf66d89c3692d04d303ba473da2c6061a/public/demo.gif -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Timeline 7 | 8 | 9 |
10 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/dateAxis.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export default class DateAxis extends Component { 4 | dates() { 5 | return this.props.items 6 | .reduce((dates, item) => dates.concat(item.start, item.end), []) 7 | .reduce((dates, date) => { 8 | dates[this.props.dateToColumn(date) - 1] = date; 9 | 10 | return dates; 11 | }, []) 12 | .map(date => (date ? date.format("MMM DD YYYY") : "")); 13 | } 14 | 15 | render() { 16 | return this.dates().map((date, i) => { 17 | return ( 18 |
26 |
{date}
27 |
28 | ); 29 | }); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | 4 | import timelineItems from "./timelineItems"; 5 | import Timeline from "./timeline"; 6 | 7 | render(, document.getElementById("root")); 8 | -------------------------------------------------------------------------------- /src/item.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | import ItemName from "./itemName"; 4 | import ItemDurationDragControl from "./itemDurationDragControl"; 5 | 6 | export default class Item extends Component { 7 | componentWillMount() { 8 | this.setState({ 9 | item: this.props.item, 10 | editing: false 11 | }); 12 | } 13 | 14 | getColor() { 15 | return COLORS[this.item().id % (COLORS.length - 1)]; 16 | } 17 | 18 | startColumn() { 19 | return this.props.dateToColumn(this.item().start); 20 | } 21 | 22 | barEndColumn() { 23 | return this.props.dateToColumn(this.item().end) + 1; 24 | } 25 | 26 | updateDate(whichDate, mouseX) { 27 | this.setState({ 28 | item: { 29 | ...this.state.item, 30 | [whichDate]: this.props.xPositionToDate(mouseX) 31 | }, 32 | editing: true 33 | }); 34 | } 35 | 36 | item() { 37 | return this.state.editing ? this.state.item : this.props.item; 38 | } 39 | 40 | commitDate(whichDate) { 41 | this.setState({ editing: false }); 42 | 43 | this.props.updateItem({ 44 | id: this.item().id, 45 | [whichDate]: this.state.item[whichDate] 46 | }); 47 | } 48 | 49 | render() { 50 | const row = this.props.row; 51 | const startColumn = this.startColumn(); 52 | const barEndColumn = this.barEndColumn(); 53 | 54 | return ( 55 |
61 |
65 | this.updateDate("start", mouseX)} 67 | onDrop={() => this.commitDate("start")} 68 | mouse={this.props.mouse} 69 | /> 70 | 71 | this.updateDate("end", mouseX)} 73 | onDrop={() => this.commitDate("end")} 74 | mouse={this.props.mouse} 75 | /> 76 |
77 | 78 | 83 |
84 | ); 85 | } 86 | } 87 | 88 | const COLORS = [ 89 | "cyan", 90 | "lightgreen", 91 | "lightpink", 92 | "lightseagreen", 93 | "mediumaquamarine", 94 | "mediumorchid", 95 | "mediumpurple", 96 | "mediumseagreen", 97 | "mediumslateblue", 98 | "mediumspringgreen", 99 | "mediumturquoise", 100 | "mediumvioletred" 101 | ]; 102 | -------------------------------------------------------------------------------- /src/itemDurationDragControl.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export default class ItemDurationDragControl extends Component { 4 | state = { dragging: false }; 5 | 6 | componentWillReceiveProps(newProps) { 7 | this.handleDrag(newProps); 8 | } 9 | 10 | handleDrag(newProps) { 11 | if (!this.draggingAndMouseChanged(newProps)) { 12 | return; 13 | } 14 | 15 | if (newProps.mouse.isDown) { 16 | this.props.onDrag(newProps.mouse.x); 17 | } else { 18 | this.setState({ dragging: false }); 19 | this.props.onDrop(); 20 | } 21 | } 22 | 23 | draggingAndMouseChanged(newProps) { 24 | return ( 25 | this.state.dragging && 26 | (this.props.mouse.isDown !== newProps.mouse.isDown || 27 | this.props.mouse.x !== newProps.mouse.x) 28 | ); 29 | } 30 | 31 | startDrag(control, event) { 32 | this.setState({ dragging: true }); 33 | } 34 | 35 | render() { 36 | return ( 37 |
38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/itemName.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | import RENDER_SIZES from "./renderSizes"; 4 | 5 | export default class ItemName extends Component { 6 | updateName(event) { 7 | const id = this.props.id; 8 | const name = event.target.value; 9 | 10 | this.props.updateItem({ id, name }); 11 | } 12 | 13 | render() { 14 | const name = this.props.name; 15 | 16 | return ( 17 | 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/mouseMonitor.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export default class MouseMonitor extends Component { 4 | state = { x: 0, isDown: false }; 5 | 6 | recordMouseX({ pageX }) { 7 | this.setState({ ...this.state, x: pageX }, () => 8 | this.props.onMouseChange(this.state) 9 | ); 10 | } 11 | 12 | recordIsMouseDown(isDown) { 13 | this.setState({ ...this.state, isDown }, () => 14 | this.props.onMouseChange(this.state) 15 | ); 16 | } 17 | 18 | render() { 19 | return ( 20 |
this.recordIsMouseDown(true)} 24 | onMouseUp={() => this.recordIsMouseDown(false)} 25 | > 26 | {this.props.children} 27 |
28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/renderSizes.js: -------------------------------------------------------------------------------- 1 | export default { 2 | nameLengthToItemWidth: nameLength => nameLength * 0.5, 3 | 4 | contentLengthToInputFieldSize: contentLength => 5 | Math.floor(contentLength * 1.1) + 1, 6 | 7 | xPositionToDate: xPosition => Math.floor(xPosition / 30) * 1000 * 60 * 60 * 24 8 | }; 9 | -------------------------------------------------------------------------------- /src/timeline.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: monospace; 3 | font-size: 14px; 4 | color: #555; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .screen { 10 | padding: 10px; 11 | } 12 | 13 | .timeline-grid { 14 | display: grid; 15 | } 16 | 17 | .timeline-item { 18 | margin-right: 2px; 19 | margin-top: 15px; 20 | padding-top: 2px; 21 | white-space: nowrap; 22 | user-select: none; 23 | } 24 | 25 | .date-mark { 26 | padding: 10px 5px 80px 0; 27 | } 28 | 29 | .date { 30 | transform: rotate(90deg); 31 | white-space: nowrap; 32 | } 33 | 34 | input { 35 | border: 0; 36 | font-family: inherit; 37 | font-size: inherit; 38 | outline-width: 0; 39 | } 40 | 41 | .item-duration { 42 | display: flex; 43 | justify-content: space-between; 44 | height: 17px; 45 | } 46 | 47 | .drag-control { 48 | background-color: #fff; 49 | border: 1px solid black; 50 | width: 10px; 51 | } 52 | -------------------------------------------------------------------------------- /src/timeline.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import moment from "moment"; 3 | 4 | import Item from "./item"; 5 | import DateAxis from "./dateAxis"; 6 | import RENDER_SIZES from "./renderSizes"; 7 | import MouseMonitor from "./mouseMonitor"; 8 | import "./timeline.css"; 9 | 10 | export default class Timeline extends Component { 11 | componentWillMount() { 12 | this.setState({ items: parseDates(this.props.items) }); 13 | } 14 | 15 | itemsWithRow() { 16 | let _rows = []; 17 | 18 | return this.state.items 19 | .concat() 20 | .sort((item1, item2) => item1.start - item2.start) 21 | .map(item => { 22 | let row = Array.from(_rows.keys()).find( 23 | i => this.itemEndColumn(_rows[i]) < this.dateToColumn(item.start) 24 | ); 25 | 26 | if (row === undefined) { 27 | row = _rows.length; 28 | } 29 | 30 | item.row = row; 31 | _rows[row] = item; 32 | 33 | return item; 34 | }); 35 | } 36 | 37 | start() { 38 | return this.earliestItem().start; 39 | } 40 | 41 | earliestItem() { 42 | return this.state.items.reduce((earliest, item) => 43 | earliest.start < item.start ? earliest : item 44 | ); 45 | } 46 | 47 | latestItem() { 48 | return this.state.items.reduce((latest, item) => 49 | latest.end > item.end ? latest : item 50 | ); 51 | } 52 | 53 | xPositionToDate(xPosition) { 54 | return moment(this.start() + RENDER_SIZES.xPositionToDate(xPosition)); 55 | } 56 | 57 | dateToColumn(date) { 58 | return date.diff(this.start(), "days") + 1; 59 | } 60 | 61 | itemEndColumn(item) { 62 | const textWidth = 63 | item.start.diff(this.start(), "days") + 64 | Math.floor(RENDER_SIZES.nameLengthToItemWidth(item.name.length)); 65 | 66 | return Math.max(textWidth, this.dateToColumn(item.end)); 67 | } 68 | 69 | columnCount() { 70 | return this.itemEndColumn(this.latestItem()); 71 | } 72 | 73 | recordMouseState(mouse) { 74 | this.setState({ mouse }); 75 | } 76 | 77 | updateItem(itemUpdate) { 78 | this.setState({ 79 | items: this.state.items.map(item => { 80 | if (item.id !== itemUpdate.id) { 81 | return item; 82 | } 83 | 84 | return { ...item, ...itemUpdate }; 85 | }) 86 | }); 87 | } 88 | 89 | render() { 90 | if (this.state.items.length === 0) { 91 | return "Please pass in some timeline entries to display"; 92 | } 93 | 94 | const headerRowOffset = 2; 95 | 96 | return ( 97 | 98 |
102 | 106 | 107 | {this.itemsWithRow().map(item => ( 108 | 117 | ))} 118 |
119 | 120 | ); 121 | } 122 | } 123 | 124 | function parseDates(items) { 125 | return items.map(item => { 126 | return { ...item, start: moment(item.start), end: moment(item.end) }; 127 | }); 128 | } 129 | -------------------------------------------------------------------------------- /src/timelineItems.js: -------------------------------------------------------------------------------- 1 | const timelineItems = [ 2 | { 3 | id: 1, 4 | start: "2018-01-01", 5 | end: "2018-01-05", 6 | name: "First item" 7 | }, 8 | { 9 | id: 2, 10 | start: "2018-01-02", 11 | end: "2018-01-08", 12 | name: "Second item" 13 | }, 14 | { 15 | id: 3, 16 | start: "2018-01-06", 17 | end: "2018-01-13", 18 | name: "Another item" 19 | }, 20 | { 21 | id: 4, 22 | start: "2018-01-14", 23 | end: "2018-01-14", 24 | name: "Another item" 25 | }, 26 | { 27 | id: 5, 28 | start: "2018-02-01", 29 | end: "2018-02-15", 30 | name: "Third item" 31 | }, 32 | { 33 | id: 6, 34 | start: "2018-01-12", 35 | end: "2018-02-16", 36 | name: "Fourth item with a super long name" 37 | }, 38 | { 39 | id: 7, 40 | start: "2018-02-01", 41 | end: "2018-02-02", 42 | name: "Fifth item with a super long name" 43 | }, 44 | { 45 | id: 8, 46 | start: "2018-01-03", 47 | end: "2018-01-05", 48 | name: "First item" 49 | }, 50 | { 51 | id: 9, 52 | start: "2018-01-04", 53 | end: "2018-01-08", 54 | name: "Second item" 55 | }, 56 | { 57 | id: 10, 58 | start: "2018-01-06", 59 | end: "2018-01-13", 60 | name: "Another item" 61 | }, 62 | { 63 | id: 11, 64 | start: "2018-01-09", 65 | end: "2018-01-09", 66 | name: "Another item" 67 | }, 68 | { 69 | id: 12, 70 | start: "2018-02-01", 71 | end: "2018-02-15", 72 | name: "Third item" 73 | }, 74 | { 75 | id: 13, 76 | start: "2018-01-12", 77 | end: "2018-02-16", 78 | name: "Fourth item with a super long name" 79 | }, 80 | { 81 | id: 14, 82 | start: "2018-02-01", 83 | end: "2018-02-02", 84 | name: "Fifth item with a super long name" 85 | } 86 | ]; 87 | 88 | export default timelineItems; 89 | --------------------------------------------------------------------------------