@odigos/ui-kit 0.0.90 → 0.0.92

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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)
+
+
+### Features
+
+* **trace-view:** add error indicator ([#346](https://github.com/odigos-io/ui-kit/issues/346)) ([554ec47](https://github.com/odigos-io/ui-kit/commit/554ec47c946d2faeaba739f75f48dfd080b0e066))
+
+
+### Bug Fixes
+
+* trace-view visual fixes ([#344](https://github.com/odigos-io/ui-kit/issues/344)) ([8eec6ee](https://github.com/odigos-io/ui-kit/commit/8eec6eea76972440656e5cb5891be7df56e26c04))
+
 ## [0.0.90](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.89...ui-kit-v0.0.90) (2025-08-24)
 
 

package/lib/components/divider/index.d.ts

@@ -6,6 +6,7 @@ interface DividerProps {
     thickness?: number;
     length?: string;
     margin?: string;
+    opacity?: number;
 }
 declare const Divider: FC<DividerProps>;
 export { Divider, type DividerProps };

package/lib/components.js

@@ -1,6 +1,6 @@
-import { B as Button } from './index-651d36f3.js';
-export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-651d36f3.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-41bb44dd.js';
+import { B as Button } from './index-c616d2a7.js';
+export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-c616d2a7.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-941ea41c.js';
 import React, { createContext, Component, createElement } from 'react';
 import { T as Theme } from './index-40dfa720.js';
 import 'styled-components';

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

@@ -1,21 +1,33 @@
 import React, { type FC } from 'react';
-import type { TraceSpan } from '@/types';
+import { type TraceLog, type TraceSpan } from '@/types';
+import { TooltipProps } from '@/components';
 interface SpanProps {
+    span: TraceSpan;
+    depth: number;
+    indexInMatrix: number;
+    maxDuration: number;
+    minStartTime: number;
+    maxEndTime: number;
+    withErrors?: boolean;
+    errorTooltip?: TooltipProps;
+    isOpen?: boolean;
+    withToggle?: boolean;
+    onToggleOpen?: () => void;
+}
+interface RecursiveSpansProps {
+    spans: TraceSpan[];
+    logs: TraceLog[];
     depth: number;
     indexInMatrix: number;
-    isHidden: boolean;
-    isOpen: boolean;
-    onToggleOpen: () => void;
-    withToggle: boolean;
-    span: TraceSpan;
     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[], indexInMatrix: number, depth: number, minStartTime: number, maxEndTime: number, maxDuration: 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

@@ -2,16 +2,16 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, us
 import styled, { css } from 'styled-components';
 import { b as DISPLAY_TITLES, T as Theme, V as usePendingStore, W as useNotificationStore, Q as useDrawerStore, B as BUTTON_TEXTS, X as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, O as useModalStore, F as FORM_ALERTS, Y as useFilterStore, e as getInstrumentationRuleIcon, Z as useDataStreamStore, _ as useInstrumentStore, d as getEntityId, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, c as compareCondition, $ as useSetupStore, f as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, a0 as useSelectedStore, l as ImageErrorIcon, a1 as useDarkMode } from './index-40dfa720.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, ProgrammingLanguages, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, a3 as Toggle, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm } from './index-651d36f3.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, a3 as Toggle, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm, S as ScrollX } from './index-c616d2a7.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-eff01b3d.js';
+import { C as CheckCircledIcon, O as OdigosLogo, E as ErrorTriangleIcon } from './index-eff01b3d.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, a as OverviewIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-a53852b3.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
 import { u as useKeyDown, a as useContainerSize, b as useClickNode, c as usePopup, d as useOnClickOutside, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-2df374a9.js';
 import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-1bc2b507.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-41bb44dd.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-941ea41c.js';
 import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-d92ef50b.js';
-import { f as filterActions, l as getEntityLabel, k as getEntityIcon, t as sleep, e as formatBytes, i as getContainersIcons, n as getValueForRange, j as getDestinationIcon, d as filterSourcesByStream, c as filterSources, b as filterDestinationsByStream, a as filterDestinations, s as mapDestinationFieldsForDisplay, p as getYamlFieldsForDestination, m as getMetricForEntity, o as getWorkloadId, q as hasUnhealthyInstances, h as getContainersInstrumentedCount, r as isOverTime, g as formatDuration } from './index-e21ce984.js';
+import { f as filterActions, l as getEntityLabel, k as getEntityIcon, u as sleep, e as formatBytes, i as getContainersIcons, o as getValueForRange, j as getDestinationIcon, d as filterSourcesByStream, c as filterSources, b as filterDestinationsByStream, a as filterDestinations, t as mapDestinationFieldsForDisplay, q as getYamlFieldsForDestination, m as getMetricForEntity, p as getWorkloadId, r as hasUnhealthyInstances, h as getContainersInstrumentedCount, s as isOverTime, n as getRecursiveValues, g as formatDuration } from './index-9e75254d.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
 import { NoteBackToSummary, EditButton } from './snippets.js';
 import { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.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 = {
@@ -5230,16 +5230,15 @@ const Container$1 = styled.div `
   display: flex;
   align-items: center;
   width: ${LEFT_MAX_WIDTH}px;
-  background-color: ${({ theme }) => theme.colors.dark_grey};
-  border-right: 1px solid ${({ theme }) => theme.colors.dropdown_bg_2};
+  background-color: ${({ $withErrors, theme }) => ($withErrors ? theme.colors.error + Theme.opacity.hex['042'] : theme.colors.dark_grey)};
 `;
 const Left = styled(FlexRow) `
   align-items: center;
+  justify-content: space-between;
   gap: 4px;
-  padding: 12px 0;
-  padding-left: ${({ $depth }) => $depth * 12 || 4}px;
+  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;
@@ -5263,57 +5262,69 @@ const DurationText = styled(Text) `
   font-family: ${({ theme }) => theme.font_family.secondary};
   white-space: nowrap;
 `;
-const Span = ({ depth, indexInMatrix, isHidden, isOpen, onToggleOpen, withToggle, span, maxDuration, minStartTime, maxEndTime }) => {
+const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, withErrors, errorTooltip, isOpen, withToggle, onToggleOpen }) => {
     const theme = Theme.useTheme();
-    if (isHidden)
-        return null;
-    return (React.createElement(Container$1, { className: 'span-container' },
+    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
+        (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);
+    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' },
-            withToggle ? (React.createElement(IconButton, { onClick: onToggleOpen, size: 24 },
-                React.createElement(ExtendArrow, { extend: isOpen }))) : (React.createElement("div", { style: { width: '24px' } })),
-            React.createElement(Text, null, span.processID),
-            React.createElement(Text, { size: 12, color: theme.text.darker_grey }, span.operationName)),
+            React.createElement(FlexRow, { "$gap": 4, "$alignItems": 'center' },
+                withToggle ? (React.createElement(IconButton, { onClick: onToggleOpen, size: 24 },
+                    React.createElement(ExtendArrow, { extend: isOpen ?? false }))) : (React.createElement("div", { style: { width: '24px' } })),
+                React.createElement(ScrollX, { maxWidth: textMaxWidth / 2, text: span.processID, textSize: 14 }),
+                React.createElement(Text, { size: 12, color: theme.text.darker_grey }, "\u2022"),
+                React.createElement(ScrollX, { maxWidth: textMaxWidth / 2, text: span.operationName, textSize: 12, textColor: theme.text.darker_grey })),
+            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: '-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 getChildSpanIds = (span) => {
-    return span.spans?.map((s) => [s.spanID, ...getChildSpanIds(s)]).flat() ?? [];
-};
-const renderSpans = (spans, indexInMatrix, depth, minStartTime, maxEndTime, maxDuration, openSpanIdsState) => {
-    if (!minStartTime) {
-        // is equal left: 0%;
-        minStartTime = spans.reduce((min, span) => Math.min(min, span.startTime), Number.MAX_SAFE_INTEGER);
-    }
-    if (!maxEndTime) {
-        // is equal left: 100%;
-        maxEndTime = spans.reduce((max, span) => Math.max(max, span.startTime + span.duration), 0);
-    }
+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);
         const hasChildSpans = !!(span.spans?.length ?? 0);
-        return (React.createElement(Fragment, { key: id },
-            React.createElement(Span, { depth: depth, indexInMatrix: indexInMatrix + i + depth, isHidden: false, isOpen: isOpen, withToggle: hasChildSpans, onToggleOpen: () => openSpanIdsState.set((prev) => {
+        const allLogs = logs.length ? logs : getRecursiveValues(span, 'spans', 'logs');
+        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("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,
+                    text: errorMessage,
+                }, isOpen: isOpen, withToggle: hasChildSpans, onToggleOpen: () => openSpanIdsState.set((prev) => {
                     const alreadyOpen = prev.some((st) => st === id);
                     if (alreadyOpen)
                         return prev.filter((st) => st != id);
-                    return [...prev, id, ...getChildSpanIds(span)];
-                }), span: span, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime }),
-            isOpen && hasChildSpans ? renderSpans(span.spans || [], indexInMatrix + i, depth + 1, minStartTime, maxEndTime, maxDuration, openSpanIdsState) : null));
+                    return [...prev, id, ...getRecursiveValues(span, 'spans', 'spanID')];
+                }) }),
+            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));
     });
 };
 
 const Container = styled.div `
   width: 100%;
-  height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
 `;
 const ContainSpans = styled.div `
+  max-height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove}px + 2px)`};
+  overflow: auto;
+
   display: flex;
   flex-direction: column;
-  gap: 0;
+
   border-radius: 24px;
-  overflow: hidden;
   border: 1px solid ${({ theme }) => theme.colors.dropdown_bg_2};
   position: relative;
 `;
@@ -5325,10 +5336,11 @@ const ContainTitle = styled.div `
 const NUM_OF_DURATION_DIVIDERS = 5;
 const DurationDivider = styled.div `
   width: 1px;
-  height: 100%;
-  border-left: 1px dashed ${({ theme }) => theme.colors.dropdown_bg_2};
-  position: absolute;
-  left: calc(${LEFT_MAX_WIDTH}px + ((100% - ${LEFT_MAX_WIDTH}px) / ${NUM_OF_DURATION_DIVIDERS}) * ${({ index }) => index});
+  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;
 `;
 const DurationTitle = styled(Text) `
@@ -5351,14 +5363,21 @@ const TraceView = ({ heightToRemove, traces }) => {
             return Math.max(max, trace.spans.reduce((max, span) => max + span.duration, 0));
         }, 0);
     }, [finalTraces]);
-    return (React.createElement(Container, { "$heightToRemove": heightToRemove }, finalTraces.length ? (React.createElement(ContainSpans, null,
+    return (React.createElement(Container, { "$heightToRemove": heightToRemove }, finalTraces.length ? (React.createElement(ContainSpans, { "$heightToRemove": heightToRemove },
         React.createElement(ContainTitle, null,
             React.createElement(Text, null, "Service & operation")),
-        finalTraces.map((trace, i) => renderSpans(trace.spans, i, 0, 0, 0, maxDuration, {
-            value: openSpanIds,
-            set: setOpenSpanIds,
-        })),
-        new Array(NUM_OF_DURATION_DIVIDERS).fill(null).map((_, i) => (React.createElement(DurationDivider, { key: `${i}-divider`, index: i },
+        finalTraces.map((trace, i) => {
+            const { spans } = trace;
+            // is equal CSS left: 0%;
+            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 (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' },
         React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_TRACES_FOUND, subTitle: DISPLAY_TITLES.ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC })))));
 };

package/lib/functions/get-recursive-values/index.d.ts

@@ -0,0 +1,4 @@
+type RecrusiveObject = Record<string, RecrusiveObject[]>;
+type ReturnObject = Record<string, unknown>;
+export declare const getRecursiveValues: <RootItem = RecrusiveObject, ReturnItem = ReturnObject>(obj: RootItem, childrenKey: keyof RootItem, returnKey: keyof RootItem) => ReturnItem[];
+export {};

package/lib/functions/index.d.ts

@@ -26,6 +26,7 @@ export * from './get-monitor-icon';
 export * from './get-platform-icon';
 export * from './get-platform-label';
 export * from './get-programming-language-icon';
+export * from './get-recursive-values';
 export * from './get-sse-target-from-id';
 export * from './get-status-icon';
 export * from './get-value-for-range';

package/lib/functions.js

@@ -2,7 +2,7 @@ export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsB
 import { K as K8sLogo } from './index-40dfa720.js';
 export { c as compareCondition, g as getActionIcon, d as getEntityId, e as getInstrumentationRuleIcon, f as getProgrammingLanguageIcon } from './index-40dfa720.js';
 export { d as deepClone, i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-export { f as filterActions, a as filterDestinations, b as filterDestinationsByStream, c as filterSources, d as filterSourcesByStream, e as formatBytes, g as formatDuration, i as getContainersIcons, h as getContainersInstrumentedCount, j as getDestinationIcon, k as getEntityIcon, l as getEntityLabel, m as getMetricForEntity, n as getValueForRange, o as getWorkloadId, p as getYamlFieldsForDestination, q as hasUnhealthyInstances, r as isOverTime, s as mapDestinationFieldsForDisplay, t as sleep } from './index-e21ce984.js';
+export { f as filterActions, a as filterDestinations, b as filterDestinationsByStream, c as filterSources, d as filterSourcesByStream, e as formatBytes, g as formatDuration, i as getContainersIcons, h as getContainersInstrumentedCount, j as getDestinationIcon, k as getEntityIcon, l as getEntityLabel, m as getMetricForEntity, n as getRecursiveValues, o as getValueForRange, p as getWorkloadId, q as getYamlFieldsForDestination, r as hasUnhealthyInstances, s as isOverTime, t as mapDestinationFieldsForDisplay, u as sleep } from './index-9e75254d.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 import { ProgrammingLanguages, PlatformType, EntityTypes } from './types.js';
 import 'react';

package/lib/{index-41bb44dd.js → index-941ea41c.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a6 as WarningModal } from './index-651d36f3.js';
+import { a6 as WarningModal } from './index-c616d2a7.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-40dfa720.js';
 import 'styled-components';

package/lib/{index-e21ce984.js → index-9e75254d.js}

@@ -250,6 +250,26 @@ const getMetricForEntity = (metrics, entityType, entityId) => {
     return metric || { throughput: 0 };
 };
 
+const getRecursiveValues = (obj, childrenKey, returnKey) => {
+    const children = obj[childrenKey];
+    if (!children)
+        return [];
+    return children.flatMap((item) => {
+        const values = item[returnKey];
+        const result = [];
+        if (values !== undefined) {
+            if (Array.isArray(values)) {
+                result.push(...values);
+            }
+            else {
+                result.push(values);
+            }
+        }
+        result.push(...getRecursiveValues(item, childrenKey, returnKey));
+        return result;
+    });
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getValueForRange = (current, matrix) => {
     // CURRENT: represents the current value (such as window width)
@@ -317,4 +337,4 @@ const mapDestinationFieldsForDisplay = (destination, yamlFields) => {
 
 const sleep = async (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
 
-export { filterDestinations as a, filterDestinationsByStream as b, filterSources as c, filterSourcesByStream as d, formatBytes as e, filterActions as f, formatDuration as g, getContainersInstrumentedCount as h, getContainersIcons as i, getDestinationIcon as j, getEntityIcon as k, getEntityLabel as l, getMetricForEntity as m, getValueForRange as n, getWorkloadId as o, getYamlFieldsForDestination as p, hasUnhealthyInstances as q, isOverTime as r, mapDestinationFieldsForDisplay as s, sleep as t };
+export { filterDestinations as a, filterDestinationsByStream as b, filterSources as c, filterSourcesByStream as d, formatBytes as e, filterActions as f, formatDuration as g, getContainersInstrumentedCount as h, getContainersIcons as i, getDestinationIcon as j, getEntityIcon as k, getEntityLabel as l, getMetricForEntity as m, getRecursiveValues as n, getValueForRange as o, getWorkloadId as p, getYamlFieldsForDestination as q, hasUnhealthyInstances as r, isOverTime as s, mapDestinationFieldsForDisplay as t, sleep as u };

package/lib/{index-651d36f3.js → index-c616d2a7.js}

@@ -556,14 +556,11 @@ const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, child
         children,
         withIcon && React.createElement(InfoIcon, null),
         React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left, asPortal: true, withPointerEvents: hasLinks, onMouseEnter: hasLinks ? handleMouseEvent : undefined, maxWidth: '270px', borderRadius: '16px', padding: '8px 12px' },
-            React.createElement(Text, { size: 12, color: theme.text.secondary },
-                (!!TitleIcon || !!title) && (React.createElement(FlexRow, { style: { marginBottom: '4px' }, "$gap": 4 },
-                    TitleIcon && React.createElement(TitleIcon, { fill: theme.text.secondary, size: 12 }),
-                    title && React.createElement(React.Fragment, null,
-                        title,
-                        "\u00A0-\u00A0"))),
-                React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, text),
-                !!timestamp && (React.createElement(Text, { size: 10, color: theme.text.darker_grey, family: 'secondary', style: { marginTop: '8px' } }, new Date(timestamp).toLocaleString()))))));
+            (!!TitleIcon || !!title) && (React.createElement(FlexRow, { style: { marginBottom: '4px' }, "$gap": 4 },
+                TitleIcon && React.createElement(TitleIcon, { size: 12, fill: theme.text.secondary }),
+                title && (React.createElement(Text, { size: 12, color: theme.text.secondary }, title)))),
+            React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, text),
+            !!timestamp && (React.createElement(Text, { size: 10, color: theme.text.darker_grey, family: 'secondary', style: { marginTop: '8px' } }, new Date(timestamp).toLocaleString())))));
 };
 
 const Container$F = styled.div `
@@ -4147,9 +4144,10 @@ const StyledDivider = styled.div `
   height: ${({ $orientation, $thickness, $length }) => ($orientation === 'horizontal' ? `${$thickness}px` : $length || '100%')};
   margin: ${({ $orientation, $margin }) => $margin || ($orientation === 'horizontal' ? '8px 0' : '0 8px')};
   background-color: ${({ $type, theme }) => (!!$type ? theme.text[$type] : theme.colors.border) + Theme.opacity.hex['050']};
+  opacity: ${({ $opacity }) => $opacity || 1};
 `;
-const Divider = ({ orientation = 'horizontal', type, thickness = 1, length, margin }) => {
-    return React.createElement(StyledDivider, { "$orientation": orientation, "$type": type, "$thickness": thickness, "$length": length, "$margin": margin });
+const Divider = ({ orientation = 'horizontal', type, thickness = 1, length, margin, opacity }) => {
+    return React.createElement(StyledDivider, { "$orientation": orientation, "$type": type, "$thickness": thickness, "$length": length, "$margin": margin, "$opacity": opacity });
 };
 
 const Container$B = styled.div `

package/lib/snippets.js

@@ -1,5 +1,5 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-651d36f3.js';
-export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-651d36f3.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-c616d2a7.js';
+export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-c616d2a7.js';
 import React from 'react';
 import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-40dfa720.js';
 import { E as EditIcon } from './index-1bc2b507.js';

package/lib/types/traces/index.d.ts

@@ -8,7 +8,7 @@ interface TraceReference {
     traceID: string;
     spanID: string;
 }
-interface TraceLog {
+export interface TraceLog {
     timestamp: number;
     fields: TraceTag[];
 }

package/package.json

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