feat: add timeline view connectors (#3623)

kubeshop · Feb 12, 2024 · 34a21fc · 34a21fc
1 parent 8c6fdc9
commit 34a21fc
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 39 deletions.
diff --git 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 (
     <div style={style}>
@@ -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
@@ -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) => (
-  <S.Connector height="100%" width={leftPadding + 30}>
-    {hasParent && (
-      <>
-        <S.LineBase x1={leftPadding - 3} x2={leftPadding + 12} y1="16" y2="16" />
-        <S.LineBase x1={leftPadding - 4} x2={leftPadding - 4} y1="0" y2="16.5" />
-      </>
-    )}
+const Connector = ({hasParent, id, isCollapsed, nodeDepth, onCollapse, totalChildren}: IProps) => {
+  const leftPadding = nodeDepth * BaseLeftPaddingV2;
 
-    {totalChildren > 0 ? (
-      <>
-        {!isCollapsed && <S.LineBase x1={leftPadding + 12} x2={leftPadding + 12} y1="16" y2="32" />}
-        <S.RectBase x={leftPadding + 2} y="8" width="20" height="16" rx="3px" ry="3px" $isActive={isCollapsed} />
-        <S.TextConnector x={leftPadding + 12} y="20" textAnchor="middle" $isActive={isCollapsed}>
-          {totalChildren}
-        </S.TextConnector>
-        <S.RectBaseTransparent
-          x={leftPadding + 2}
-          y="8"
-          width="20"
-          height="16"
-          rx="3px"
-          ry="3px"
-          onClick={event => {
-            event.stopPropagation();
-            onCollapse(id);
-          }}
-        />
-      </>
-    ) : (
-      <S.CircleDot cx={leftPadding + 12} cy="16" r="3" />
-    )}
-  </S.Connector>
-);
+  return (
+    <S.Connector height="100%" width={leftPadding + 30}>
+      {hasParent && (
+        <>
+          <S.LineBase x1={leftPadding - 3} x2={leftPadding + 12} y1="16" y2="16" />
+          <S.LineBase x1={leftPadding - 4} x2={leftPadding - 4} y1="0" y2="16.5" />
+        </>
+      )}
+
+      {totalChildren > 0 ? (
+        <>
+          {!isCollapsed && <S.LineBase x1={leftPadding + 12} x2={leftPadding + 12} y1="16" y2="32" />}
+          <S.RectBase x={leftPadding + 2} y="8" width="20" height="16" rx="3px" ry="3px" $isActive={isCollapsed} />
+          <S.TextConnector x={leftPadding + 12} y="20" textAnchor="middle" $isActive={isCollapsed}>
+            {totalChildren}
+          </S.TextConnector>
+          <S.RectBaseTransparent
+            x={leftPadding + 2}
+            y="8"
+            width="20"
+            height="16"
+            rx="3px"
+            ry="3px"
+            onClick={event => {
+              event.stopPropagation();
+              onCollapse(id);
+            }}
+          />
+        </>
+      ) : (
+        <S.CircleDot cx={leftPadding + 12} cy="16" r="3" />
+      )}
+
+      {new Array(nodeDepth).fill(0).map((_, index) => {
+        return <S.LineBase x1={index * BaseLeftPaddingV2 + 12} x2={index * BaseLeftPaddingV2 + 12} y1="0" y2="32" />;
+      })}
+    </S.Connector>
+  );
+};
 
 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
@@ -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
@@ -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;