@odigos/ui-kit 0.0.50 → 0.0.51

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.51](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.50...ui-kit-v0.0.51) (2025-07-10)
+
+
+### Bug Fixes
+
+* 'no data' fixes in service map ([#218](https://github.com/odigos-io/ui-kit/issues/218)) ([8c5da1a](https://github.com/odigos-io/ui-kit/commit/8c5da1a130e45e09983f439892bf60e84d80315b))
+
 ## [0.0.50](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.49...ui-kit-v0.0.50) (2025-07-10)
 
 

package/lib/components.js

@@ -1,6 +1,6 @@
-import { e as Button } from './index-CgdNGqvh.js';
-export { f as AutocompleteInput, g as Badge, al as CenterThis, h as Checkbox, i as Code, j as ConditionDetails, D as DataCard, l as DataCardFieldTypes, k as DataCardFields, m as DataFinger, o as DataTab, p as DescribeRow, q as Divider, r as DocsButton, s as Drawer, u as DrawerFooter, t as DrawerHeader, v as Dropdown, w as ExtendArrow, x as FadeLoader, y as FieldError, z as FieldLabel, ak as FlexColumn, aj as FlexRow, G as Header, I as IconButton, J as IconGroup, K as IconTitleBadge, O as IconWrapped, Q as IconsNav, R as ImageControlled, U as Input, V as InputList, W as InputTable, X as InteractiveTable, Y as KeyValueInputsList, Z as Modal, ao as ModalBody, _ as MonitorsCheckboxes, $ as MonitorsIcons, a0 as NavigationButtons, a1 as NoDataFound, a2 as NotificationNote, an as Overlay, a3 as Popup, a4 as PopupForm, a5 as ScrollX, a6 as SectionTitle, a7 as Segment, a8 as SelectionButton, a9 as SkeletonLoader, aa as Status, ab as Stepper, ap as TableContainer, aq as TableTitleWrap, ar as TableWrap, ac as Tag, ad as Text, ae as TextArea, af as Toggle, T as ToggleCodeComponent, ag as Tooltip, ah as TraceLoader, am as VerticalScroll, ai as WarningModal } from './index-CgdNGqvh.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-DnhO-nLH.js';
+import { e as Button } from './index-1-F2f04H.js';
+export { f as AutocompleteInput, g as Badge, al as CenterThis, h as Checkbox, i as Code, j as ConditionDetails, D as DataCard, l as DataCardFieldTypes, k as DataCardFields, m as DataFinger, o as DataTab, p as DescribeRow, q as Divider, r as DocsButton, s as Drawer, u as DrawerFooter, t as DrawerHeader, v as Dropdown, w as ExtendArrow, x as FadeLoader, y as FieldError, z as FieldLabel, ak as FlexColumn, aj as FlexRow, G as Header, I as IconButton, J as IconGroup, K as IconTitleBadge, O as IconWrapped, Q as IconsNav, R as ImageControlled, U as Input, V as InputList, W as InputTable, X as InteractiveTable, Y as KeyValueInputsList, Z as Modal, ao as ModalBody, _ as MonitorsCheckboxes, $ as MonitorsIcons, a0 as NavigationButtons, a1 as NoDataFound, a2 as NotificationNote, an as Overlay, a3 as Popup, a4 as PopupForm, a5 as ScrollX, a6 as SectionTitle, a7 as Segment, a8 as SelectionButton, a9 as SkeletonLoader, aa as Status, ab as Stepper, ap as TableContainer, aq as TableTitleWrap, ar as TableWrap, ac as Tag, ad as Text, ae as TextArea, af as Toggle, T as ToggleCodeComponent, ag as Tooltip, ah as TraceLoader, am as VerticalScroll, ai as WarningModal } from './index-1-F2f04H.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-Coq_Nro0.js';
 import React, { Component, createElement, createContext } from 'react';
 import { T as Theme } from './index-BC03UmY5.js';
 import './types.js';

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

@@ -1,5 +1,5 @@
 import React, { type CSSProperties } from 'react';
-import type { ServiceMapSources } from '@/types';
+import { type ServiceMapSources } from '@/types';
 interface ServiceMapProps {
     heightToRemove: CSSProperties['height'];
     serviceMap: ServiceMapSources;

package/lib/containers.js

@@ -2,18 +2,18 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, us
 import styled, { css } from 'styled-components';
 import { m as DISPLAY_TITLES, T as Theme, i as usePendingStore, h as useNotificationStore, c as useDrawerStore, B as BUTTON_TEXTS, d as useEntityStore, A as ACTION_OPTIONS, n as getActionIcon, g as useModalStore, F as FORM_ALERTS, e as useFilterStore, M as MONITORS_OPTIONS, p as getInstrumentationRuleIcon, b as useDataStreamStore, f as useInstrumentStore, o as getEntityId, S as STORAGE_KEYS, l as DEFAULT_DATA_STREAM_NAME, k as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, j as useSelectedStore, v as ImageErrorIcon, a as useDarkMode } from './index-BC03UmY5.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind } from './types.js';
-import { l as DataCardFieldTypes, z as FieldLabel, h as Checkbox, y as FieldError, U as Input, W as InputTable, Y as KeyValueInputsList, V as InputList, ad as Text, a7 as Segment, a6 as SectionTitle, r as DocsButton, _ as MonitorsCheckboxes, ae as TextArea, s as Drawer, j as ConditionDetails, D as DataCard, ak as FlexColumn, Z as Modal, a0 as NavigationButtons, ao as ModalBody, a2 as NotificationNote, f as AutocompleteInput, q as Divider, aa as Status, aj as FlexRow, ag as Tooltip, O as IconWrapped, $ as MonitorsIcons, ap as TableContainer, aq as TableTitleWrap, K as IconTitleBadge, ar as TableWrap, X as InteractiveTable, al as CenterThis, a1 as NoDataFound, ah as TraceLoader, g as Badge, w as ExtendArrow, am as VerticalScroll, a8 as SelectionButton, e as Button, v as Dropdown, n as nodeConfig, as as useNodesState, at as useEdgesState, F as Flow, au as applyNodeChanges, a3 as Popup, af as Toggle, I as IconButton, A as AddButton, x as FadeLoader, o as DataTab, ab as Stepper, k as DataCardFields, av as MarkerType, Q as IconsNav, C as CopyText, p as DescribeRow, P as PodContainer, d as SourceContainer, J as IconGroup, a4 as PopupForm } from './index-CgdNGqvh.js';
+import { l as DataCardFieldTypes, z as FieldLabel, h as Checkbox, y as FieldError, U as Input, W as InputTable, Y as KeyValueInputsList, V as InputList, ad as Text, a7 as Segment, a6 as SectionTitle, r as DocsButton, _ as MonitorsCheckboxes, ae as TextArea, s as Drawer, j as ConditionDetails, D as DataCard, ak as FlexColumn, Z as Modal, a0 as NavigationButtons, ao as ModalBody, a2 as NotificationNote, f as AutocompleteInput, q as Divider, aa as Status, aj as FlexRow, ag as Tooltip, O as IconWrapped, $ as MonitorsIcons, ap as TableContainer, aq as TableTitleWrap, K as IconTitleBadge, ar as TableWrap, X as InteractiveTable, al as CenterThis, a1 as NoDataFound, ah as TraceLoader, g as Badge, w as ExtendArrow, am as VerticalScroll, a8 as SelectionButton, e as Button, v as Dropdown, n as nodeConfig, as as useNodesState, at as useEdgesState, F as Flow, au as applyNodeChanges, a3 as Popup, af as Toggle, I as IconButton, A as AddButton, x as FadeLoader, o as DataTab, ab as Stepper, k as DataCardFields, av as MarkerType, Q as IconsNav, C as CopyText, p as DescribeRow, P as PodContainer, d as SourceContainer, J as IconGroup, a4 as PopupForm } from './index-1-F2f04H.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BnvrwbRB.js';
 import { C as CheckCircledIcon, O as OdigosLogo } from './index-H8TwBQHm.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-LgzkJ05H.js';
 import { u as useActionFormData, d as useSessionStorage, b as useDataStreamFormData, c as useDestinationFormData, a as useClickNotification, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-CwggurLH.js';
 import { e as useKeyDown, f as useOnClickOutside, a as useContainerSize, u as useClickNode, g as usePopup, d as useInstrumentationRuleFormData, i as useTransition, h as useTimeAgo, b as useCopy, c as useGenericForm } from './useTransition-DmHfJSEP.js';
 import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, A as ArrowIcon, P as PlusIcon, a as CopyIcon } from './index-CyHOJpMl.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-DnhO-nLH.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-Coq_Nro0.js';
 import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter, p as parseBooleanFromString } from './index-Dbs7YARA.js';
 import { f as filterActions, m as getEntityLabel, l as getEntityIcon, w as sleep, o as getPlatformIcon, p as getPlatformLabel, h as formatBytes, j as getContainersIcons, q as getValueForRange, k as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, s as getYamlFieldsForDestination, d as deepClone, n as getMetricForEntity, r as getWorkloadId, t as hasUnhealthyInstances, i as getContainersInstrumentedCount, u as isOverTime } from './index-CPMIZB66.js';
 import { m as mapExportedSignals } from './index-BlZKWuxe.js';
-import { N as NoteBackToSummary, E as EditButton } from './index-r72g3gV5.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-4BmryHdH.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-CMsBAVAn.js';
 import 'react-dom';
@@ -3906,15 +3906,30 @@ const ServiceMap = ({ heightToRemove, serviceMap }) => {
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
     const handleNodesChanged = (currNodes) => {
-        setNodes((prevNodes) => applyNodeChanges(currNodes.map((cn) => ({
-            id: cn.id,
-            item: cn,
-            type: prevNodes.find((pn) => pn.id === cn.id) ? 'replace' : 'add',
-        })), prevNodes));
+        setNodes((prevNodes) => {
+            const mutatedNodes = currNodes.map((cn) => {
+                const pn = prevNodes.find((pn) => pn.id === cn.id);
+                cn.position = pn?.position || cn.position;
+                return {
+                    id: cn.id,
+                    item: cn,
+                    type: pn ? 'replace' : 'add',
+                };
+            });
+            const noDataNode = prevNodes.find((pn) => pn.id === `${EntityTypes.Source}-${NodeTypes.NoData}`);
+            if (noDataNode) {
+                mutatedNodes.push({
+                    id: `${EntityTypes.Source}-${NodeTypes.NoData}`,
+                    type: 'remove',
+                });
+            }
+            return applyNodeChanges(mutatedNodes, prevNodes);
+        });
     };
     useEffect(() => {
         const newNodes = buildMapNodes({ serviceMap, sources: [userSource].concat(sources), containerHeight, containerWidth });
-        if (nodes.length) {
+        // greater than 1, because at the very least we would have a 'no data' node
+        if (nodes.length > 1) {
             handleNodesChanged(newNodes);
         }
         else {

package/lib/{index-CgdNGqvh.js → index-1-F2f04H.js}

@@ -16669,8 +16669,8 @@ HeaderNode.displayName = HeaderNode.name;
 Actions.displayName = Actions.name;
 
 const Container$p = styled(FlexColumn) `
-  width: 300px;
-  height: 100px;
+  max-width: 300px;
+  padding: 12px;
   border-radius: 12px;
   background-color: ${({ theme }) => theme.colors.dropdown_bg};
   justify-content: center;
@@ -17567,13 +17567,13 @@ const TitleWrapper = styled.div `
 `;
 const Title$4 = styled(Text) `
   color: ${({ theme }) => theme.text.darker_grey};
-  line-height: 24px;
 `;
 const SubTitle = styled(Text) `
   color: ${({ theme }) => theme.colors.border};
   font-size: 14px;
   font-weight: 200;
   line-height: 20px;
+  text-align: center;
 `;
 const NoDataFound = ({ title = 'No data found', subTitle = 'Check your search phrase and try one more time' }) => {
     const theme = Theme.useTheme();

package/lib/{index-r72g3gV5.js → index-4BmryHdH.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { T as Theme, B as BUTTON_TEXTS, m as DISPLAY_TITLES } from './index-BC03UmY5.js';
 import { E as EditIcon } from './index-CyHOJpMl.js';
-import { e as Button, ad as Text, a2 as NotificationNote } from './index-CgdNGqvh.js';
+import { e as Button, ad as Text, a2 as NotificationNote } from './index-1-F2f04H.js';
 import { StatusType } from './types.js';
 import 'styled-components';
 import { I as InfoIcon } from './index-H8TwBQHm.js';

package/lib/{index-DnhO-nLH.js → index-Coq_Nro0.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ai as WarningModal } from './index-CgdNGqvh.js';
+import { ai as WarningModal } from './index-1-F2f04H.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-BC03UmY5.js';
 import 'styled-components';

package/lib/snippets.js

@@ -1,5 +1,5 @@
-export { A as AddButton, a as AddNode, B as BaseNode, C as CopyText, E as EdgedNode, F as Flow, b as FrameNode, H as HeaderNode, L as LabeledEdge, M as MapItemNode, N as NoDataNode, P as PodContainer, S as ScrollNode, c as SkeletonNode, d as SourceContainer, n as nodeConfig } from './index-CgdNGqvh.js';
-export { E as EditButton, N as NoteBackToSummary } from './index-r72g3gV5.js';
+export { A as AddButton, a as AddNode, B as BaseNode, C as CopyText, E as EdgedNode, F as Flow, b as FrameNode, H as HeaderNode, L as LabeledEdge, M as MapItemNode, N as NoDataNode, P as PodContainer, S as ScrollNode, c as SkeletonNode, d as SourceContainer, n as nodeConfig } from './index-1-F2f04H.js';
+export { E as EditButton, N as NoteBackToSummary } from './index-4BmryHdH.js';
 import 'react';
 import './index-BC03UmY5.js';
 import './types.js';

package/package.json

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