As a potential member of our diagnostics tool development team, your task is to design and implement a key feature: a React component named Timeline
. This component visualizes a trace timeline, constituted by multiple spans, in the form of a waterfall diagram.
- Component Development: Create a Timeline React component that accepts a trace prop. A trace is an object with an
id
andspans
. Each span has the following properties:spanId
,parentSpanId
,serviceName
,operationName
,startTime
, andduration
. - Span Rendering: Render each span within the
Timeline
component. Display theserviceName
andoperationName
in a hierarchical structure representing the parent-child relationships between spans. Each span is also represented by a bar on the timeline. The bar's length and position correspond to the span'sduration
andstartTime
relative to the entire trace. - Span Interaction: Implement a collapse/expand feature for spans with children. This should include a button on each span that toggles the visibility of its child spans.
Here's an ASCII diagram illustrating the expected timeline structure:
Frontend Service - Load Checkout Page: --------------------------------------------------------------------------------
Product Service - Get Product Details: -------------
Inventory Service - Check Stock: ----------------------
Payment Service - Process Payment: -----------------------------------------
Email Service - Send Confirmation Email: -----------------
-
Color Coding: Enhance your
Timeline
component to visually distinguish different services. Assign a unique, distinct color to eachserviceName
and consistently use this color across the timeline. -
Performance Optimization: Optimize your
Timeline
component to efficiently handle large traces with over 100,000 spans. Consider performance optimizations and explain your design decisions.
- The
src
directory contains two folders:Timeline
anddata
. - The
Timeline
folder houses theTimeline.tsx
file where you'll implement your component. - The
data
folder includes atrace.json
file, which provides the trace data for rendering the timeline. - The
Timeline
folder also contains autils.ts
file offering helper functions that could be beneficial for your task.
- Use the
trace.json
file in thedata
folder as the input for your Timeline component. - Feel free to use the helper functions in the utils.ts file.
- You may install and use any npm packages as needed.
- You have 4 hours to complete this challenge.
- You're free to use any resources you need (Google, Stack Overflow, chatGPT, etc.).
We appreciate your efforts and are excited to see your creative solutions. Good luck!