@odigos/ui-kit 0.0.91 → 0.0.93

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.0.93](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.92...ui-kit-v0.0.93) (2025-08-25)
+
+
+### Bug Fixes
+
+* **overview-drawer:** add onClose prop to OverviewDrawer and update SourceDrawer to handle close action ([#349](https://github.com/odigos-io/ui-kit/issues/349)) ([ea12dc2](https://github.com/odigos-io/ui-kit/commit/ea12dc23a74779ae45c8efca1aeec32ad08935eb))
+* **tooltip:** comment out cursor style in TooltipContainer ([#351](https://github.com/odigos-io/ui-kit/issues/351)) ([a86cb47](https://github.com/odigos-io/ui-kit/commit/a86cb47ae89966b7300b65953a724b1188d0b01b))
+
+## [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/components.js

@@ -1,6 +1,6 @@
-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 { B as Button } from './index-c529b896.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-c529b896.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-9a7beddb.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/overview-drawer/index.d.ts

@@ -11,6 +11,7 @@ interface OverviewDrawerProps extends PropsWithChildren {
     isEdit?: boolean;
     isFormDirty?: boolean;
     isLastItem?: boolean;
+    onClose?: () => void;
     onEdit?: (bool?: boolean) => void;
     onSave?: (newTitle: string) => void;
     onDelete?: () => void;

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

@@ -2,14 +2,14 @@ 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, S as ScrollX } from './index-c616d2a7.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-c529b896.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.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-941ea41c.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-9a7beddb.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, 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';
@@ -527,7 +527,7 @@ const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }
         React.createElement(TextArea, { title: 'Notes', value: formData['notes'], onChange: ({ target: { value } }) => handleFormChange('notes', value), errorMessage: formErrors['notes'] })));
 };
 
-const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip, hideEditTitleFromEdit, icons, iconSrcs, isEdit = false, isFormDirty = false, isLastItem = false, onEdit, onSave, onDelete, onCancel, tabs, headerActionButtons, }, drawerRef) => {
+const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip, hideEditTitleFromEdit, icons, iconSrcs, isEdit = false, isFormDirty = false, isLastItem = false, onClose, onEdit, onSave, onDelete, onCancel, tabs, headerActionButtons, }, drawerRef) => {
     const theme = Theme.useTheme();
     const { isThisPending } = usePendingStore();
     const { addNotification } = useNotificationStore();
@@ -547,6 +547,7 @@ const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip,
             onEdit(false);
         setDrawerType(null);
         setDrawerEntityId(null);
+        onClose?.();
     };
     useImperativeHandle(drawerRef, () => ({
         closeDrawer,
@@ -1614,7 +1615,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 +3822,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 = {
@@ -4267,7 +4268,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
     const [fetchedSource, setFetchedSource] = useState(null);
     // this is used to fetch the source on drawer open, so we ensure we have the latest data
     useEffect(() => {
-        if (!isOpen || !drawerEntityId || !!fetchedSource)
+        if (!isOpen || !drawerEntityId)
             return;
         fetchSourceById(drawerEntityId).then((source) => setFetchedSource(source || null));
     }, [isOpen, drawerEntityId, fetchedSource]);
@@ -4275,7 +4276,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
     const thisItem = useMemo(() => {
         if (!isOpen)
             return null;
-        const found = fetchedSource ||
+        const found = (!!fetchedSource && JSON.stringify(getWorkloadId(fetchedSource)) === JSON.stringify(getWorkloadId(drawerEntityId)) ? fetchedSource : null) ||
             sourcesByStream?.find((x) => x.namespace === drawerEntityId.namespace && x.name === drawerEntityId.name && x.kind === drawerEntityId.kind);
         if (!!found)
             loadFormWithDrawerItem(found);
@@ -4341,7 +4342,10 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
         setIsFormDirty(false);
         setIsEditing(false);
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', hideEditTitleFromEdit: true, icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: tabs, headerActionButtons: [
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, onClose: () => {
+            setSelectedTab(Tabs.Overview);
+            setFetchedSource(null);
+        }, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', hideEditTitleFromEdit: true, icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: tabs, headerActionButtons: [
             {
                 'data-id': 'rollout-restart',
                 variant: 'tertiary',
@@ -5239,7 +5243,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 +5269,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 +5287,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 +5303,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 +5314,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 +5322,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 +5340,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 +5376,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/lib/{index-941ea41c.js → index-9a7beddb.js}

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

package/lib/{index-c616d2a7.js → index-c529b896.js}

@@ -527,7 +527,7 @@ const TooltipContainer = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
-  cursor: help;
+  // cursor: help;
 `;
 const TextBreakWord = styled(Text) `
   word-break: break-word;

package/lib/snippets.js

@@ -1,5 +1,5 @@
-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 { B as Button, _ as Text, L as NotificationNote } from './index-c529b896.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-c529b896.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/package.json

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