@odigos/ui-kit 0.0.91 → 0.0.92

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.92](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.91...ui-kit-v0.0.92) (2025-08-25)
+
+
+### Bug Fixes
+
+* **trace-view:** more visual fixes ([#347](https://github.com/odigos-io/ui-kit/issues/347)) ([defa80c](https://github.com/odigos-io/ui-kit/commit/defa80c9f45a668a365d6b8754ace78444b8ab42))
+
 ## [0.0.91](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.90...ui-kit-v0.0.91) (2025-08-24)
 
 

package/lib/containers/data-flow/index.d.ts

@@ -1,7 +1,7 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { type Metrics } from '@/types';
 interface DataFlowProps {
-    heightToRemove: CSSProperties['height'];
+    heightToRemove: number;
     metrics: Metrics;
 }
 declare const DataFlow: React.FC<DataFlowProps>;

package/lib/containers/service-map/index.d.ts

@@ -1,7 +1,7 @@
-import React, { type CSSProperties } from 'react';
+import React from 'react';
 import { type ServiceMapSources } from '@/types';
 interface ServiceMapProps {
-    heightToRemove: CSSProperties['height'];
+    heightToRemove: number;
     serviceMap: ServiceMapSources;
 }
 declare const ServiceMap: React.FC<ServiceMapProps>;

package/lib/containers/trace-view/index.d.ts

@@ -1,8 +1,7 @@
 import { type FC } from 'react';
 import type { Trace } from '@/types';
-import { CSSProperties } from 'styled-components';
 interface TraceViewProps {
-    heightToRemove: CSSProperties['height'];
+    heightToRemove: number;
     traces: Trace[];
 }
 declare const TraceView: FC<TraceViewProps>;

package/lib/containers/trace-view/span/index.d.ts

@@ -14,10 +14,20 @@ interface SpanProps {
     withToggle?: boolean;
     onToggleOpen?: () => void;
 }
+interface RecursiveSpansProps {
+    spans: TraceSpan[];
+    logs: TraceLog[];
+    depth: number;
+    indexInMatrix: number;
+    maxDuration: number;
+    minStartTime: number;
+    maxEndTime: number;
+    openSpanIdsState: {
+        value: string[];
+        set: React.Dispatch<React.SetStateAction<string[]>>;
+    };
+}
 export declare const LEFT_MAX_WIDTH = 370;
 declare const Span: FC<SpanProps>;
-declare const renderSpans: (spans: TraceSpan[], logs: TraceLog[], depth: number, indexInMatrix: number, maxDuration: number, minStartTime: number, maxEndTime: number, openSpanIdsState: {
-    value: string[];
-    set: React.Dispatch<React.SetStateAction<string[]>>;
-}) => React.JSX.Element[];
-export { Span, type SpanProps, renderSpans };
+declare const RecursiveSpans: FC<RecursiveSpansProps>;
+export { Span, type SpanProps, RecursiveSpans };

package/lib/containers.js

@@ -1614,7 +1614,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount,
 
 const Container$h = styled.div `
   width: 100%;
-  height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
+  height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove}px)`};
   position: relative;
 `;
 const DataFlow = ({ heightToRemove, metrics }) => {
@@ -3821,7 +3821,7 @@ const buildMapNodes = ({ sources, serviceMap, containerHeight, containerWidth })
 
 const Container$7 = styled.div `
   width: 100%;
-  height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
+  height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove}px)`};
   position: relative;
 `;
 const userSource = {
@@ -5239,7 +5239,6 @@ const Left = styled(FlexRow) `
   padding: 12px;
   padding-left: ${({ $depth }) => $depth * 12 || 12}px;
   width: calc(${LEFT_MAX_WIDTH}px - ${({ $depth }) => $depth * 12}px);
-  overflow: auto;
 `;
 const Right = styled(FlexRow) `
   position: absolute;
@@ -5266,12 +5265,12 @@ const DurationText = styled(Text) `
 const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, withErrors, errorTooltip, isOpen, withToggle, onToggleOpen }) => {
     const theme = Theme.useTheme();
     const textMaxWidth = LEFT_MAX_WIDTH -
+        // 12px times depth is the left padding, 12px is the right padding
+        12 * depth -
         // 24px is the width of the toggle icon, 4px is the gap between the toggle icon and the text
-        (withToggle ? 24 - 4 : 0) -
+        (24 - 4) -
         // 16px is the width of the error icon, 4px is the gap between the text and the error icon
-        (withErrors ? 16 - 4 : 0) -
-        // 12px times depth is the left padding, 12px is the right padding
-        12 * depth;
+        (withErrors ? 16 - 4 : 0);
     const withErrorIcon = withErrors && (depth === 1 || span.logs.length > 0);
     return (React.createElement(Container$1, { className: 'span-container', "$withErrors": withErrors },
         React.createElement(Left, { "$depth": depth, className: 'span-left' },
@@ -5284,13 +5283,14 @@ const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTim
             withErrors &&
                 (withErrorIcon ? (React.createElement(Tooltip, { ...errorTooltip },
                     React.createElement(ErrorTriangleIcon, { fill: theme.text.error }))) : (React.createElement("div", { style: { position: 'relative' } },
-                    React.createElement("div", { style: { position: 'absolute', top: '-32px', right: '8px' } },
-                        React.createElement(Divider, { type: StatusType.Error, orientation: 'vertical', thickness: 1, length: '64px', margin: '0', opacity: 0.5 })))))),
+                    React.createElement("div", { style: { position: 'absolute', top: '-24px', right: '8px' } },
+                        React.createElement(Divider, { type: StatusType.Error, orientation: 'vertical', thickness: 1, length: '48px', margin: '0', opacity: 0.5 })))))),
         React.createElement(Right, { className: 'span-right' },
             React.createElement(DurationBar, { "$indexInMatrix": indexInMatrix, "$duration": span.duration, "$maxDuration": maxDuration, "$startTime": span.startTime, "$minStartTime": minStartTime, "$maxEndTime": maxEndTime },
                 React.createElement(DurationText, null, formatDuration(span.duration))))));
 };
-const renderSpans = (spans, logs, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, openSpanIdsState) => {
+const RecursiveSpans = ({ spans, logs, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, openSpanIdsState }) => {
+    const theme = Theme.useTheme();
     return spans.map((span, i) => {
         const id = span.spanID;
         const isOpen = openSpanIdsState.value.includes(id);
@@ -5299,7 +5299,7 @@ const renderSpans = (spans, logs, depth, indexInMatrix, maxDuration, minStartTim
         const withErrors = allLogs.length > 0;
         const errorTitle = withErrors ? (allLogs.length > 1 ? `(${allLogs.length}) errors` : allLogs[0].fields.find((field) => field.key === 'exception.message')?.value) : undefined;
         const errorMessage = withErrors ? (allLogs.length > 1 ? undefined : allLogs[0].fields.find((field) => field.key === 'exception.stacktrace')?.value) : undefined;
-        return (React.createElement(Fragment, { key: id },
+        return (React.createElement("div", { key: `span-${id}`, style: { borderBottom: depth === 1 ? `1px dotted ${theme.colors.border}` : 'none' } },
             React.createElement(Span, { span: span, depth: depth, indexInMatrix: indexInMatrix + i + depth, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, withErrors: withErrors, errorTooltip: {
                     titleIcon: ErrorTriangleIcon,
                     title: errorTitle,
@@ -5310,7 +5310,7 @@ const renderSpans = (spans, logs, depth, indexInMatrix, maxDuration, minStartTim
                         return prev.filter((st) => st != id);
                     return [...prev, id, ...getRecursiveValues(span, 'spans', 'spanID')];
                 }) }),
-            isOpen && hasChildSpans ? renderSpans(span.spans || [], allLogs, depth + 1, indexInMatrix + i, maxDuration, minStartTime, maxEndTime, openSpanIdsState) : null));
+            isOpen && hasChildSpans ? (React.createElement(RecursiveSpans, { spans: span.spans || [], logs: allLogs, depth: depth + 1, indexInMatrix: indexInMatrix + i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: openSpanIdsState })) : null));
     });
 };
 
@@ -5318,7 +5318,7 @@ const Container = styled.div `
   width: 100%;
 `;
 const ContainSpans = styled.div `
-  max-height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove} + 2px)`};
+  max-height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove}px + 2px)`};
   overflow: auto;
 
   display: flex;
@@ -5336,8 +5336,9 @@ const ContainTitle = styled.div `
 const NUM_OF_DURATION_DIVIDERS = 5;
 const DurationDivider = styled.div `
   width: 1px;
-  height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove} + 2px)`};
-  border-left: 1px dashed ${({ theme }) => theme.colors.dropdown_bg_2};
+  height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove}px + 2px)`};
+  background: ${({ theme }) => `linear-gradient(to bottom, ${theme.colors.border}, transparent)`};
+
   position: fixed;
   left: calc(${LEFT_MAX_WIDTH + 18}px + ((100% - ${LEFT_MAX_WIDTH}px) / ${NUM_OF_DURATION_DIVIDERS}) * ${({ index }) => index});
   z-index: -1;
@@ -5371,10 +5372,10 @@ const TraceView = ({ heightToRemove, traces }) => {
             const minStartTime = spans.reduce((min, span) => Math.min(min, span.startTime), Number.MAX_SAFE_INTEGER);
             // is equal CSS left: 100%;
             const maxEndTime = spans.reduce((max, span) => Math.max(max, span.startTime + span.duration), 0);
-            return renderSpans(spans, [], 1, i, maxDuration, minStartTime, maxEndTime, {
-                value: openSpanIds,
-                set: setOpenSpanIds,
-            });
+            return (React.createElement(RecursiveSpans, { key: `recursive-spans-${trace.traceID}`, spans: spans, logs: [], depth: 1, indexInMatrix: i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: {
+                    value: openSpanIds,
+                    set: setOpenSpanIds,
+                } }));
         }),
         new Array(NUM_OF_DURATION_DIVIDERS).fill(null).map((_, i) => (React.createElement(DurationDivider, { key: `${i}-divider`, "$heightToRemove": heightToRemove, index: i },
             React.createElement(DurationTitle, null, formatDuration((maxDuration / NUM_OF_DURATION_DIVIDERS) * i))))))) : (React.createElement(CenterThis, { "$height": '50vh' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "author": "Odigos",
   "repository": {
     "type": "git",