diff --git a/web/src/components/Visualization/components/Timeline/BaseSpanNode/BaseSpanNodeV2.tsx b/web/src/components/Visualization/components/Timeline/BaseSpanNode/BaseSpanNodeV2.tsx index 17edffd5d8..c42acaed0c 100644 --- a/web/src/components/Visualization/components/Timeline/BaseSpanNode/BaseSpanNodeV2.tsx +++ b/web/src/components/Visualization/components/Timeline/BaseSpanNode/BaseSpanNodeV2.tsx @@ -4,8 +4,6 @@ import {IPropsComponent} from '../SpanNodeFactoryV2'; import {useTimeline} from '../Timeline.provider'; import * as S from '../TimelineV2.styled'; -const BaseLeftPadding = 16; // TODO: Move to Timeline.constants - function toPercent(value: number) { return `${(value * 100).toFixed(1)}%`; } @@ -26,7 +24,6 @@ const BaseSpanNode = ({header, index, node, span, style}: IProps) => { const isSelected = selectedSpan === node.data.id; const isMatched = matchedSpans.includes(node.data.id); const isCollapsed = collapsedSpans.includes(node.data.id); - const leftPadding = node.depth * BaseLeftPadding; return (
@@ -42,7 +39,7 @@ const BaseSpanNode = ({header, index, node, span, style}: IProps) => { hasParent={!!node.data.parentId} id={node.data.id} isCollapsed={isCollapsed} - leftPadding={leftPadding} + nodeDepth={node.depth} onCollapse={onSpanCollapse} totalChildren={node.children} /> diff --git a/web/src/components/Visualization/components/Timeline/BaseSpanNode/ConnectorV2.tsx b/web/src/components/Visualization/components/Timeline/BaseSpanNode/ConnectorV2.tsx index 650db16451..cb332a3f84 100644 --- a/web/src/components/Visualization/components/Timeline/BaseSpanNode/ConnectorV2.tsx +++ b/web/src/components/Visualization/components/Timeline/BaseSpanNode/ConnectorV2.tsx @@ -1,47 +1,56 @@ +import {BaseLeftPaddingV2} from 'constants/Timeline.constants'; import * as S from '../TimelineV2.styled'; interface IProps { hasParent: boolean; id: string; isCollapsed: boolean; - leftPadding: number; + nodeDepth: number; onCollapse(id: string): void; totalChildren: number; } -const Connector = ({hasParent, id, isCollapsed, leftPadding, onCollapse, totalChildren}: IProps) => ( - - {hasParent && ( - <> - - - - )} +const Connector = ({hasParent, id, isCollapsed, nodeDepth, onCollapse, totalChildren}: IProps) => { + const leftPadding = nodeDepth * BaseLeftPaddingV2; - {totalChildren > 0 ? ( - <> - {!isCollapsed && } - - - {totalChildren} - - { - event.stopPropagation(); - onCollapse(id); - }} - /> - - ) : ( - - )} - -); + return ( + + {hasParent && ( + <> + + + + )} + + {totalChildren > 0 ? ( + <> + {!isCollapsed && } + + + {totalChildren} + + { + event.stopPropagation(); + onCollapse(id); + }} + /> + + ) : ( + + )} + + {new Array(nodeDepth).fill(0).map((_, index) => { + return ; + })} + + ); +}; export default Connector; diff --git a/web/src/components/Visualization/components/Timeline/TimelineV2.styled.ts b/web/src/components/Visualization/components/Timeline/TimelineV2.styled.ts index 08d73185dd..827d7b88a3 100644 --- a/web/src/components/Visualization/components/Timeline/TimelineV2.styled.ts +++ b/web/src/components/Visualization/components/Timeline/TimelineV2.styled.ts @@ -114,7 +114,7 @@ export const CircleDot = styled.circle` `; export const LineBase = styled.line` - stroke: ${({theme}) => theme.color.textSecondary}; + stroke: ${({theme}) => theme.color.borderLight}; `; export const RectBase = styled.rect<{$isActive?: boolean}>` diff --git a/web/src/constants/Timeline.constants.ts b/web/src/constants/Timeline.constants.ts index a8c3a1c480..4a4677dafd 100644 --- a/web/src/constants/Timeline.constants.ts +++ b/web/src/constants/Timeline.constants.ts @@ -3,3 +3,4 @@ export const AxisOffset = 100; export const NodeHeight = 66; export const NodeOverlayHeight = NodeHeight - 2; export const BaseLeftPadding = 10; +export const BaseLeftPaddingV2 = 16;