@odigos/ui-kit 0.0.7 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.0.8](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.7...ui-kit-v0.0.8) (2025-03-16)
+
+
+### Features
+
+* add error-boundary ([#13](https://github.com/odigos-io/ui-kit/issues/13)) ([8e8e7c8](https://github.com/odigos-io/ui-kit/commit/8e8e7c813a72da550f9d312bfb9f032c391e0aa9))
+* add tooltip to filtered-count ([#16](https://github.com/odigos-io/ui-kit/issues/16)) ([9b7af73](https://github.com/odigos-io/ui-kit/commit/9b7af731cd73e9348dba1ed72ab2b34de28e102b))
+* handle reset inside entity store ([#11](https://github.com/odigos-io/ui-kit/issues/11)) ([09ab02e](https://github.com/odigos-io/ui-kit/commit/09ab02e69d5534c15b0b0e9fa63f6d188c1b9da6))
+
+
+### Bug Fixes
+
+* cannot read "writeText" of undefined ([#18](https://github.com/odigos-io/ui-kit/issues/18)) ([1382940](https://github.com/odigos-io/ui-kit/commit/13829401d5afdf2b51e2a597a52590ecfa3e7e7c))
+* copy CLI command text overflowed ([#17](https://github.com/odigos-io/ui-kit/issues/17)) ([96a0d67](https://github.com/odigos-io/ui-kit/commit/96a0d67fbfec883739c1335a2b47dd797f69c98d))
+* dropdown multi-option click area ([#9](https://github.com/odigos-io/ui-kit/issues/9)) ([43fb125](https://github.com/odigos-io/ui-kit/commit/43fb125cb3dd4c6dc53c8984917061fb51f7b9ea))
+* icon size for CP select ([#8](https://github.com/odigos-io/ui-kit/issues/8)) ([d316e8b](https://github.com/odigos-io/ui-kit/commit/d316e8bdda5a75275e690e1bd4dbe15381a471fa))
+* numberOfInstances in source selection ([#15](https://github.com/odigos-io/ui-kit/issues/15)) ([9b41658](https://github.com/odigos-io/ui-kit/commit/9b416583079839094a76c9be1992ab0b730fe81a))
+* side-nav click area, and bigger icons ([#10](https://github.com/odigos-io/ui-kit/issues/10)) ([63b741a](https://github.com/odigos-io/ui-kit/commit/63b741abe28d8b8d9881109ce9459a4be9dd1215))
+
 ## [0.0.7](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.6...ui-kit-v0.0.7) (2025-03-13)
 
 

package/lib/components/dropdown/dropdown.stories.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import type { StoryFn } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
 import { type DropdownProps } from '.';
 declare const _default: {
     title: string;
     component: React.FC<DropdownProps>;
 };
 export default _default;
-export declare const Default: StoryFn<DropdownProps>;
+export declare const Default: StoryObj<DropdownProps>;
+export declare const Multi: StoryObj<DropdownProps>;

package/lib/components/error-boundary/error-boundary.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type ErrorBoundaryProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<ErrorBoundaryProps>;
+};
+export default _default;
+export declare const Default: StoryFn<ErrorBoundaryProps>;

package/lib/components/error-boundary/index.d.ts

@@ -0,0 +1,5 @@
+import { type FC, type PropsWithChildren } from 'react';
+interface ErrorBoundaryProps extends PropsWithChildren {
+}
+declare const ErrorBoundary: FC<ErrorBoundaryProps>;
+export { ErrorBoundary, type ErrorBoundaryProps };

package/lib/components/icon-title-badge/index.d.ts

@@ -4,6 +4,7 @@ interface IconTitleBadgeProps {
     icon?: SVG;
     title: string;
     badge?: string | number;
+    badgeTooltip?: string;
     loading?: boolean;
 }
 declare const IconTitleBadge: FC<IconTitleBadgeProps>;

package/lib/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './divider/index';
 export * from './docs-button/index';
 export * from './drawer/index';
 export * from './dropdown/index';
+export * from './error-boundary/index';
 export * from './extend-arrow/index';
 export * from './fade-loader/index';
 export * from './field-error/index';

package/lib/components.js

@@ -1,17 +1,18 @@
-export { A as AutocompleteInput, B as Badge, a as Button, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, f as DATA_CARD_FIELD_TYPES, D as DataCard, e as DataCardFields, g as DataTab, h as DeleteWarning, 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, $ as FlexColumn, _ 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, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-COMxdOJo.js';
-import 'react';
+import { B as Button } from './index-CKUgKtl0.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, f as DATA_CARD_FIELD_TYPES, D as DataCard, e as DataCardFields, g as DataTab, h as DeleteWarning, 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, $ as FlexColumn, _ 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, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-CKUgKtl0.js';
+import React, { Component, createElement, createContext } from 'react';
+import Theme from './theme.js';
 import './types.js';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
-import './theme.js';
-import './index-4tCBQ2pl.js';
+import './index-BulCzWQI.js';
 import './index-DLKEpJJm.js';
 import './index-BGlk5VhF.js';
 import './index-BZS1ijMm.js';
 import './index-BJxaoI0G.js';
-import './index-Byh3BO6S.js';
-import './index-BhCi-TxF.js';
-import './useTransition-5w3VnEhL.js';
+import './index-CZe2VX28.js';
+import './index-BumPE6cF.js';
+import './useTransition-Dfxjcy-C.js';
 import 'react-dom';
 import 'babel-runtime/helpers/extends';
 import 'babel-runtime/core-js/object/get-prototype-of';
@@ -20,3 +21,153 @@ import 'babel-runtime/helpers/createClass';
 import 'babel-runtime/helpers/possibleConstructorReturn';
 import 'babel-runtime/helpers/inherits';
 import 'object-assign';
+
+const ErrorBoundaryContext = createContext(null);
+
+const initialState = {
+  didCatch: false,
+  error: null
+};
+let ErrorBoundary$1 = class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+
+    // There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array,
+    // we'd end up resetting the error boundary immediately.
+    // This would likely trigger a second error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.
+
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = createElement(FallbackComponent, props);
+      } else if (fallback !== undefined) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+};
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
+
+const ErrorFallback = ({ error }) => {
+    const theme = Theme.useTheme();
+    const styles = {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
+            color: theme.text.error,
+            fontFamily: theme.font_family.primary,
+        },
+        errorMessage: {
+            padding: 10,
+            borderRadius: 5,
+            whiteSpace: 'pre-wrap',
+            background: theme.colors.error,
+        },
+        errorStack: {
+            whiteSpace: 'pre-wrap',
+            fontSize: '12px',
+        },
+        errorStackWrapper: {
+            textAlign: 'left',
+            marginTop: 10,
+        },
+        infoText: {
+            marginTop: 100,
+            color: theme.text.secondary,
+            fontSize: '14px',
+        },
+    };
+    return (React.createElement("div", { style: styles.container },
+        React.createElement("h2", null, "Something went wrong!"),
+        React.createElement("pre", { style: styles.errorMessage }, error?.message || 'Unknown Error'),
+        React.createElement("details", { style: styles.errorStackWrapper },
+            React.createElement("summary", null, "Stack Trace"),
+            React.createElement("pre", { style: styles.errorStack }, error?.stack || 'Unknown Stack')),
+        React.createElement("p", { style: styles.infoText }, "Try refreshing the page or contact support"),
+        React.createElement(Button, { variant: 'secondary', onClick: () => window.location.reload(), style: { fontSize: '1rem' } }, "Reload")));
+};
+const ErrorBoundary = ({ children }) => {
+    return (React.createElement(ErrorBoundary$1, { FallbackComponent: (props) => (React.createElement(Theme.Provider, null,
+            React.createElement(ErrorFallback, { ...props }))) }, children));
+};
+
+export { Button, ErrorBoundary };

package/lib/constants.js

@@ -1,11 +1,11 @@
-export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-Byh3BO6S.js';
+export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-CZe2VX28.js';
 export { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-Cu2uHOuh.js';
 import './types.js';
-import './index-BhCi-TxF.js';
+import './index-BumPE6cF.js';
 import './index-BGlk5VhF.js';
 import 'react';
 import './theme.js';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
 
 const TOKEN_ABOUT_TO_EXPIRE = 604800000; // 7 days in milliseconds

package/lib/containers/compute-platform-select/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { type Platform } from '@/types';
+import { type Connection } from '@/types';
 interface ComputePlatformSelectProps {
-    computePlatforms: Platform[];
-    selected?: Platform;
-    onSelect: (payload: Platform) => void;
+    connections: Connection[];
+    selected?: Connection;
+    onSelect: (payload: Connection) => void;
     onViewAll: () => void;
 }
 declare const ComputePlatformSelect: React.FC<ComputePlatformSelectProps>;

package/lib/containers/compute-platforms/index.d.ts

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
-import { type Platform } from '@/types';
+import { type Connection } from '@/types';
 interface ComputePlatformsProps {
-    computePlatforms: Platform[];
-    onSelect: (payload: Platform) => void;
+    connections: Connection[];
+    onSelect: (payload: Connection) => void;
 }
 declare const ComputePlatforms: FC<ComputePlatformsProps>;
 export { ComputePlatforms, type ComputePlatformsProps };

package/lib/containers/compute-platforms-actions-menu/index.d.ts

@@ -1,7 +1,7 @@
 import { type FC } from 'react';
-import type { Platform } from '@/types';
+import type { Connection } from '@/types';
 interface ComputePlatformsActionsMenuProps {
-    computePlatforms: Platform[];
+    connections: Connection[];
 }
 declare const ComputePlatformsActionsMenu: FC<ComputePlatformsActionsMenuProps>;
 export { ComputePlatformsActionsMenu, type ComputePlatformsActionsMenuProps };

package/lib/containers/data-flow/nodes/header-node.d.ts

@@ -5,7 +5,8 @@ export interface HeaderNodeProps extends NodeProps<Node<{
     nodeWidth: number;
     icon: SVG;
     title: string;
-    tagValue: string | number;
+    badge: string | number;
+    badgeTooltip?: string;
     isFetching?: boolean;
     sources?: Source[];
 }, NODE_TYPES.HEADER>> {

package/lib/containers/dropdowns/connection-status-dropdown/index.d.ts

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
-import type { Platform } from '@/types';
+import type { Connection } from '@/types';
 import { type DropdownProps } from '@/components';
 interface ConnectionStatusDropdownProps {
-    computePlatforms: Platform[];
+    connections: Connection[];
     title?: string;
     value?: DropdownProps['options'];
     onSelect: (val: DropdownProps['options'][0]) => void;

package/lib/containers/dropdowns/connection-type-dropdown/connection-type-dropdown.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type ConnectionTypeDropdownProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<ConnectionTypeDropdownProps>;
+};
+export default _default;
+export declare const Default: StoryFn<ConnectionTypeDropdownProps>;

package/lib/containers/dropdowns/{platform-types-dropdown → connection-type-dropdown}/index.d.ts

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
-import type { Platform } from '@/types';
+import type { Connection } from '@/types';
 import { type DropdownProps } from '@/components';
-interface PlatformTypesDropdownProps {
-    computePlatforms: Platform[];
+interface ConnectionTypeDropdownProps {
+    connections: Connection[];
     title?: string;
     value?: DropdownProps['options'];
     onSelect: (val: DropdownProps['options'][0]) => void;
@@ -11,5 +11,5 @@ interface PlatformTypesDropdownProps {
     required?: boolean;
     showSearch?: boolean;
 }
-declare const PlatformTypesDropdown: FC<PlatformTypesDropdownProps>;
-export { PlatformTypesDropdown, type PlatformTypesDropdownProps };
+declare const ConnectionTypeDropdown: FC<ConnectionTypeDropdownProps>;
+export { ConnectionTypeDropdown, type ConnectionTypeDropdownProps };

package/lib/containers/dropdowns/index.d.ts

@@ -1,7 +1,7 @@
 export * from './connection-status-dropdown/index';
+export * from './connection-type-dropdown/index';
 export * from './error-dropdown/index';
 export * from './language-dropdown/index';
 export * from './monitor-dropdown/index';
 export * from './namespace-dropdown/index';
-export * from './platform-types-dropdown/index';
 export * from './kind-dropdown/index';

package/lib/containers.js

@@ -1,20 +1,20 @@
 import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo, useId, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-Byh3BO6S.js';
+import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CZe2VX28.js';
 import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-Cu2uHOuh.js';
 import { ACTION_TYPE, ENTITY_TYPES, NOTIFICATION_TYPE, CRUD, OTHER_STATUS, NODE_TYPES, ADD_NODE_TYPES, EDGE_TYPES, FIELD_TYPES, SIGNAL_TYPE, CODE_ATTRIBUTES_KEY_TYPES, PAYLOAD_COLLECTION_KEY_TYPES, INSTRUMENTATION_RULE_TYPE } from './types.js';
-import { f as DATA_CARD_FIELD_TYPES, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, $ as FlexColumn, r as IconTitleBadge, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, Y as TraceLoader, B as Badge, a as Button, E as ExtendArrow, n as Dropdown, a3 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-COMxdOJo.js';
-import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DRT_7tQl.js';
+import { f as DATA_CARD_FIELD_TYPES, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, $ as FlexColumn, r as IconTitleBadge, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a3 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-CKUgKtl0.js';
+import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DIcomki-.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
 import { C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-DLKEpJJm.js';
 import { C as CrossCircledIcon, E as EditIcon, O as OdigosLogoText, b as OverviewIcon, F as FilterIcon, N as NotificationIcon, S as SlackLogo, a as FolderIcon, K as KeyIcon, T as TerminalIcon } from './index-3KUV6Vlt.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BhCi-TxF.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-ClorQ_WP.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-5w3VnEhL.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BumPE6cF.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BY6B70Kf.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-Dfxjcy-C.js';
 import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-4tCBQ2pl.js';
-import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-DUW6bkzG.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-BulCzWQI.js';
+import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-CKD2OX24.js';
 import require$$1 from 'use-sync-external-store/shim';
 import { createPortal } from 'react-dom';
 import { O as OdigosLogo } from './index-BGlk5VhF.js';
@@ -800,11 +800,19 @@ const StyledButton = styled(Button) `
     background-color: ${({ theme }) => theme.colors.majestic_blue + Theme.opacity.hex['048']};
   }
 `;
+const TextLimited = styled(Text) `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+`;
 const SelectionButton = ({ label, onClick, icon: Icon, iconSrc, badgeLabel, badgeFilled, isSelected, withBorder, color, hoverColor, style }) => {
     return (React.createElement(StyledButton, { onClick: onClick, className: isSelected ? 'selected' : 'not-selected', "$withBorder": withBorder, "$color": color, "$hoverColor": hoverColor, style: style },
-        Icon && React.createElement(Icon, null),
-        iconSrc && React.createElement("img", { src: iconSrc, alt: '', width: 16, height: 16 }),
-        React.createElement(Text, { size: 14, style: { whiteSpace: 'nowrap' } }, label),
+        Icon && (React.createElement("div", null,
+            React.createElement(Icon, null))),
+        iconSrc && (React.createElement("div", null,
+            React.createElement("img", { src: iconSrc, alt: '', width: 16, height: 16 }))),
+        React.createElement(TextLimited, null, label),
         badgeLabel !== undefined && React.createElement(Badge, { label: badgeLabel, filled: badgeFilled || isSelected })));
 };
 
@@ -867,7 +875,7 @@ const FootWrap = styled.div `
   border-top: ${({ theme }) => `1px solid ${theme.colors.border}`};
   padding: 12px;
 `;
-const ComputePlatformSelect = ({ computePlatforms, selected, onSelect, onViewAll }) => {
+const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) => {
     const theme = Theme.useTheme();
     const { addNotification } = useNotificationStore();
     const [isOpen, setIsOpen] = useState(false);
@@ -878,8 +886,8 @@ const ComputePlatformSelect = ({ computePlatforms, selected, onSelect, onViewAll
     const containerRef = useRef(null);
     useOnClickOutside(containerRef, onClose);
     useKeyDown({ key: 'Escape', active: isOpen }, onClose);
-    const withSelect = !!computePlatforms.length;
-    const filtered = computePlatforms.filter(({ id }) => id.toLowerCase().includes(searchText));
+    const withSelect = !!connections.length;
+    const filtered = connections.filter(({ id }) => id.toLowerCase().includes(searchText));
     const Icon = !!selected?.type ? getPlatformIcon(selected.type) : null;
     return (React.createElement(RelativeContainer$2, { ref: containerRef },
         React.createElement(Tab, { "$withSelect": withSelect, onClick: () => setIsOpen((prev) => !prev) },
@@ -908,9 +916,9 @@ const ComputePlatformSelect = ({ computePlatforms, selected, onSelect, onViewAll
                 React.createElement(Button, { variant: 'secondary', style: { width: '100%' }, onClick: onViewAll }, "VIEW ALL"))))));
 };
 
-const ComputePlatforms = ({ computePlatforms, onSelect }) => {
+const ComputePlatforms = ({ connections, onSelect }) => {
     const { searchText, platformTypes, statuses } = useFilterStore();
-    const filtered = computePlatforms.filter(({ id, type, connectionStatus }) => (!searchText || id.toLowerCase().includes(searchText)) &&
+    const filtered = connections.filter(({ id, type, connectionStatus }) => (!searchText || id.toLowerCase().includes(searchText)) &&
         (!platformTypes?.length || platformTypes.find((opt) => opt.id === type)) &&
         (!statuses?.length || statuses.find((opt) => opt.id === connectionStatus)));
     return (React.createElement(React.Fragment, null,
@@ -937,19 +945,32 @@ const ComputePlatforms = ({ computePlatforms, onSelect }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const ConnectionStatusDropdown = ({ computePlatforms, title = '', value, onSelect, onDeselect, ...props }) => {
+const ConnectionStatusDropdown = ({ connections, title = '', value, onSelect, onDeselect, ...props }) => {
     const options = useMemo(() => {
         const payload = [];
-        computePlatforms?.forEach(({ connectionStatus }) => {
+        connections?.forEach(({ connectionStatus }) => {
             if (!payload.find((opt) => opt.id === connectionStatus)) {
                 payload.push({ id: connectionStatus, value: connectionStatus });
             }
         });
         return payload;
-    }, [computePlatforms]);
+    }, [connections]);
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Statuses', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
+const ConnectionTypeDropdown = ({ connections, title = '', value, onSelect, onDeselect, ...props }) => {
+    const options = useMemo(() => {
+        const payload = [];
+        connections?.forEach(({ type }) => {
+            if (!payload.find((opt) => opt.id === type)) {
+                payload.push({ id: type, value: type });
+            }
+        });
+        return payload;
+    }, [connections]);
+    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Types', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
+};
+
 const ErrorDropdown = ({ title = 'Error Message', value, onSelect, onDeselect, disabled, ...props }) => {
     const { sources } = useEntityStore();
     const options = useMemo(() => {
@@ -1017,19 +1038,6 @@ const NamespaceDropdown = ({ namespaces, title = 'Namespace', value, onSelect, o
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'Select namespace', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const PlatformTypesDropdown = ({ computePlatforms, title = '', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        computePlatforms?.forEach(({ type }) => {
-            if (!payload.find((opt) => opt.id === type)) {
-                payload.push({ id: type, value: type });
-            }
-        });
-        return payload;
-    }, [computePlatforms]);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Types', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
 const KindDropdown = ({ title = 'Kind', value, onSelect, onDeselect, ...props }) => {
     const { sources } = useEntityStore();
     const options = useMemo(() => {
@@ -1058,7 +1066,7 @@ const Title$1 = styled(Text) `
 const SearchAndFilterWrapper = styled.div `
   width: 200px;
 `;
-const ComputePlatformsActionsMenu = ({ computePlatforms }) => {
+const ComputePlatformsActionsMenu = ({ connections }) => {
     const { searchText, setSearchText, statuses, setStatuses, clearAll } = useFilterStore();
     // cleanup filters on unmount
     useEffect(() => {
@@ -1068,12 +1076,12 @@ const ComputePlatformsActionsMenu = ({ computePlatforms }) => {
         React.createElement(FlexRow, { "$gap": 16 },
             React.createElement(FlexRow, { "$gap": 12 },
                 React.createElement(Title$1, null, "Compute platforms"),
-                React.createElement(Badge, { label: computePlatforms.length, filled: !!computePlatforms.length })),
+                React.createElement(Badge, { label: connections.length, filled: !!connections.length })),
             React.createElement(Divider, { orientation: 'vertical', length: '20px', margin: '0' }),
             React.createElement(SearchAndFilterWrapper, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
             React.createElement(SearchAndFilterWrapper, null,
-                React.createElement(ConnectionStatusDropdown, { computePlatforms: computePlatforms, value: statuses, onSelect: (val) => setStatuses([...(statuses || []), val]), onDeselect: (val) => setStatuses((statuses || []).filter((opt) => opt.id !== val.id)), showSearch: true, required: true, isMulti: true })))));
+                React.createElement(ConnectionStatusDropdown, { connections: connections, value: statuses, onSelect: (val) => setStatuses([...(statuses || []), val]), onDeselect: (val) => setStatuses((statuses || []).filter((opt) => opt.id !== val.id)), showSearch: true, required: true, isMulti: true })))));
 };
 
 var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.center {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
@@ -12844,7 +12852,7 @@ const Progress = styled.div `
   transition: width 0.3s;
 `;
 const HeaderNode = memo(({ id: nodeId, data }) => {
-    const { nodeWidth, title, icon: Icon, tagValue, isFetching, sources } = data;
+    const { nodeWidth, title, icon: Icon, badge, badgeTooltip, isFetching, sources } = data;
     const entityType = nodeId.split('-')[0];
     const { isAwaitingInstrumentation, sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted } = useInstrumentStore();
     const isSourceAwaitingInstrumentation = entityType === ENTITY_TYPES.SOURCE && isAwaitingInstrumentation;
@@ -12882,7 +12890,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
     return (React.createElement(Container$e, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         entityType === ENTITY_TYPES.SOURCE && (React.createElement(SelectorWrapper, null,
             React.createElement(Checkbox, { partiallyChecked: hasSelected && sources?.length !== totalSelectedSources, value: hasSelected && sources?.length === totalSelectedSources, onChange: onSelect, disabled: !sources?.length }))),
-        React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : tagValue, loading: isFetching && !isSourceAwaitingInstrumentation }),
+        React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : badge, badgeTooltip: badgeTooltip, loading: isFetching && !isSourceAwaitingInstrumentation }),
         React.createElement(Actions$1, { entityType: entityType }),
         isSourceAwaitingInstrumentation && React.createElement(Progress, { percent: instrumentingPercent })));
 });
@@ -13079,7 +13087,7 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
             nodeWidth: nodeWidth$4,
             title: 'Instrumentation Rules',
             icon: getEntityIcon(ENTITY_TYPES.INSTRUMENTATION_RULE),
-            tagValue: unfilteredCount,
+            badge: unfilteredCount,
             isFetching: loading,
         },
     });
@@ -13159,7 +13167,7 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
             nodeWidth: nodeWidth$3,
             title: 'Actions',
             icon: getEntityIcon(ENTITY_TYPES.ACTION),
-            tagValue: unfilteredCount,
+            badge: unfilteredCount,
             isFetching: loading,
         },
     });
@@ -13246,6 +13254,7 @@ const mapToNodeData$1 = (entity) => {
 const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, containerHeight, onScroll }) => {
     const nodes = [];
     const position = positions[ENTITY_TYPES.SOURCE];
+    const hasFiltersApplied = entities.length !== unfilteredCount;
     nodes.push({
         id: `${ENTITY_TYPES.SOURCE}-${NODE_TYPES.HEADER}`,
         type: NODE_TYPES.HEADER,
@@ -13257,7 +13266,8 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
             nodeWidth: nodeWidth$2,
             title: 'Sources',
             icon: getEntityIcon(ENTITY_TYPES.SOURCE),
-            tagValue: entities.length !== unfilteredCount ? `${entities.length}/${unfilteredCount}` : unfilteredCount,
+            badge: hasFiltersApplied ? `${entities.length}/${unfilteredCount}` : unfilteredCount,
+            badgeTooltip: hasFiltersApplied ? 'Represents filtered amount, out of total amount' : undefined,
             isFetching: loading,
             sources: entities,
         },
@@ -13394,7 +13404,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
             nodeWidth,
             title: 'Destinations',
             icon: getEntityIcon(ENTITY_TYPES.DESTINATION),
-            tagValue: unfilteredCount,
+            badge: unfilteredCount,
             isFetching: loading,
         },
     });
@@ -15949,4 +15959,4 @@ const ToggleDarkMode = () => {
         React.createElement(Background, { "$darkMode": darkMode })));
 };
 
-export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NAV_ICON_IDS, NamespaceDropdown, NotificationManager, OverviewDrawer, PlatformTypesDropdown, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, ToastList, ToggleDarkMode };
+export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NAV_ICON_IDS, NamespaceDropdown, NotificationManager, OverviewDrawer, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, ToastList, ToggleDarkMode };

package/lib/data/sources/index.d.ts

@@ -6,6 +6,7 @@ export declare const MOCK_SOURCE_JAEGER: {
     kind: K8S_RESOURCE_KIND;
     selected: boolean;
     otelServiceName: string;
+    numberOfInstances: number;
     containers: {
         containerName: string;
         language: PROGRAMMING_LANGUAGES;

package/lib/functions.js

@@ -1,8 +1,8 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-4tCBQ2pl.js';
-export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterSources, d as formatBytes, g as getConditionsBooleans, h as getContainersIcons, e as getContainersInstrumentedCount, i as getEntityIcon, j as getEntityLabel, k as getMetricForEntity, l as getPlatformIcon, m as getPlatformLabel, n as getValueForRange, o as isOverTime, s as sleep } from './index-DUW6bkzG.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-BulCzWQI.js';
+export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterSources, d as formatBytes, g as getConditionsBooleans, h as getContainersIcons, e as getContainersInstrumentedCount, i as getEntityIcon, j as getEntityLabel, k as getMetricForEntity, l as getPlatformIcon, m as getPlatformLabel, n as getValueForRange, o as isOverTime, s as sleep } from './index-CKD2OX24.js';
 import { INSTRUMENTATION_RULE_TYPE, ENTITY_TYPES } from './types.js';
-export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BhCi-TxF.js';
-export { k as getEntityId, l as isTimeElapsed } from './index-DRT_7tQl.js';
+export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BumPE6cF.js';
+export { k as getEntityId, l as isTimeElapsed } from './index-DIcomki-.js';
 export { g as getIdFromSseTarget } from './index-BFct3S32.js';
 export { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
 import 'react';

package/lib/hooks/useCopy.d.ts

@@ -1,6 +1,6 @@
 declare const useCopy: () => {
     isCopied: boolean;
     copiedIndex: number;
-    clickCopy: (str: string, idx?: number) => void;
+    clickCopy: (str: string, idx?: number) => Promise<void>;
 };
 export { useCopy };

package/lib/hooks.js

@@ -1,12 +1,12 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-ClorQ_WP.js';
-export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-5w3VnEhL.js';
+export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BY6B70Kf.js';
+export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-Dfxjcy-C.js';
 import './types.js';
 import 'react';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
 import './index-BZS1ijMm.js';
-import './index-Byh3BO6S.js';
-import './index-BhCi-TxF.js';
+import './index-CZe2VX28.js';
+import './index-BumPE6cF.js';
 import './index-BGlk5VhF.js';
 import './theme.js';
 import './index-Cu2uHOuh.js';

package/lib/icons.js

@@ -5,7 +5,7 @@ import React from 'react';
 import Theme from './theme.js';
 export { A as ActionsIcon, D as DestinationsIcon, R as RulesIcon, S as SourcesIcon, V as VmLogo } from './index-BjJpYtF1.js';
 export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, T as TracesIcon, W as WarningTriangleIcon } from './index-DLKEpJJm.js';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-4tCBQ2pl.js → index-BulCzWQI.js}

@@ -1,6 +1,6 @@
 import { PROGRAMMING_LANGUAGES, SIGNAL_TYPE, NOTIFICATION_TYPE } from './types.js';
 import 'react';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
 import { T as TracesIcon, M as MetricsIcon, L as LogsIcon, I as InfoIcon, W as WarningTriangleIcon, E as ErrorTriangleIcon, C as CheckCircledIcon } from './index-DLKEpJJm.js';
 import { O as OdigosLogo } from './index-BGlk5VhF.js';

package/lib/{index-BhCi-TxF.js → index-BumPE6cF.js}

@@ -1,7 +1,7 @@
 import { ACTION_TYPE, INSTRUMENTATION_RULE_TYPE } from './types.js';
 import { S as SamplerIcon, P as PiiMaskingIcon, R as RenameAttributeIcon, D as DeleteAttributeIcon, A as AddClusterInfoIcon, K as K8sLogo, O as OdigosLogo, C as CodeAttributesIcon, a as PayloadCollectionIcon } from './index-BGlk5VhF.js';
 import 'react';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
 
 const getActionIcon = (type) => {

package/lib/{index-DUW6bkzG.js → index-CKD2OX24.js}

@@ -1,7 +1,7 @@
 import { NOTIFICATION_TYPE, OTHER_STATUS, ENTITY_TYPES, PLATFORM_TYPE } from './types.js';
-import { a as getProgrammingLanguageIcon } from './index-4tCBQ2pl.js';
+import { a as getProgrammingLanguageIcon } from './index-BulCzWQI.js';
 import 'react';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
 import { R as RulesIcon, A as ActionsIcon, D as DestinationsIcon, S as SourcesIcon, V as VmLogo } from './index-BjJpYtF1.js';
 import { K as K8sLogo } from './index-BGlk5VhF.js';

package/lib/{index-COMxdOJo.js → index-CKUgKtl0.js}

@@ -1,13 +1,13 @@
 import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment, useId } from 'react';
 import { NOTIFICATION_TYPE, OTHER_STATUS, PROGRAMMING_LANGUAGES, ENTITY_TYPES } from './types.js';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import styled, { css } from 'styled-components';
 import Theme from './theme.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-4tCBQ2pl.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-BulCzWQI.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.js';
 import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, T as TrashIcon, P as PlusIcon, A as ArrowIcon } from './index-BJxaoI0G.js';
-import { M as MONITORS_OPTIONS } from './index-Byh3BO6S.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-5w3VnEhL.js';
+import { M as MONITORS_OPTIONS } from './index-CZe2VX28.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-Dfxjcy-C.js';
 import ReactDOM from 'react-dom';
 import { O as OdigosLogo } from './index-BGlk5VhF.js';
 import require$$0 from 'babel-runtime/helpers/extends';
@@ -4553,6 +4553,7 @@ const CopyWrapper = styled(FlexRow) `
   pre {
     color: ${({ theme }) => theme.text.default};
     font-size: 12px;
+    overflow-x: auto;
   }
 `;
 const DataCardFields = ({ data }) => {
@@ -5200,9 +5201,10 @@ const DropdownItem = styled.div `
 const DropdownListItem = ({ option, value, isMulti, onSelect, onDeselect }) => {
     const theme = Theme.useTheme();
     const isSelected = Array.isArray(value) ? !!value?.find((s) => s.id === option.id) : value?.id === option.id;
+    const handleChange = (toAdd) => (toAdd ? onSelect?.(option) : onDeselect?.(option));
     if (isMulti) {
-        return (React.createElement(DropdownItem, { className: isSelected ? 'selected' : '' },
-            React.createElement(Checkbox, { title: option.value || '', titleColor: theme.text.secondary, value: isSelected, onChange: (toAdd) => (toAdd ? onSelect?.(option) : onDeselect?.(option)), style: { width: '100%' } })));
+        return (React.createElement(DropdownItem, { className: isSelected ? 'selected' : '', onClick: () => handleChange(!isSelected) },
+            React.createElement(Checkbox, { title: option.value || '', titleColor: theme.text.secondary, value: isSelected, onChange: handleChange, style: { width: '100%' } })));
     }
     return (React.createElement(DropdownItem, { className: isSelected ? 'selected' : '', onClick: () => (isSelected ? onDeselect?.(option) : onSelect?.(option)) },
         React.createElement(Text, { size: 14 }, option.value),
@@ -5242,11 +5244,12 @@ const Header = ({ left = [], center = [], right = [] }) => {
 const Title$4 = styled(Text) `
   color: ${({ theme }) => theme.text.grey};
 `;
-const IconTitleBadge = ({ icon: Icon, title, badge, loading }) => {
+const IconTitleBadge = ({ icon: Icon, title, badge, badgeTooltip, loading }) => {
     return (React.createElement(FlexRow, { "$gap": 6 },
         Icon && React.createElement(Icon, null),
         React.createElement(Title$4, { size: 14 }, title),
-        React.createElement(Badge, { label: badge }),
+        typeof badge !== 'undefined' && (React.createElement(Tooltip, { text: badgeTooltip },
+            React.createElement(Badge, { label: badge }))),
         loading && React.createElement(FadeLoader, null)));
 };
 
@@ -5264,8 +5267,8 @@ const Container$d = styled.div `
   justify-content: center;
 `;
 const IconWrap = styled.div `
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
 
   border-radius: 100%;
   background-color: ${({ theme, $selected }) => ($selected ? theme.colors.majestic_blue + Theme.opacity.hex['070'] : theme.colors.secondary + Theme.opacity.hex['012'])};
@@ -5280,12 +5283,12 @@ const IconWrap = styled.div `
 const IconsNav = ({ orientation = 'vertical', flip, mainIcons, subIcons }) => {
     return (React.createElement(Container$d, { "$orientation": orientation, "$flip": flip },
         mainIcons.map(({ icon: Icon, selected, onClick, tooltip }, idx) => (React.createElement(Tooltip, { key: `main-nav-icon-${idx}`, text: tooltip },
-            React.createElement(IconWrap, { "$selected": selected },
-                React.createElement(Icon, { onClick: onClick }))))),
+            React.createElement(IconWrap, { "$selected": selected, onClick: onClick },
+                React.createElement(Icon, { size: 20 }))))),
         !!mainIcons.length && !!subIcons.length && React.createElement(Divider, { orientation: orientation === 'vertical' ? 'horizontal' : 'vertical', margin: '0', length: '20px' }),
         subIcons.map(({ icon: Icon, selected, onClick, tooltip }, idx) => (React.createElement(Tooltip, { key: `sub-nav-icon-${idx}`, text: tooltip },
-            React.createElement(IconWrap, { "$selected": selected },
-                React.createElement(Icon, { onClick: onClick })))))));
+            React.createElement(IconWrap, { "$selected": selected, onClick: onClick },
+                React.createElement(Icon, { size: 20 })))))));
 };
 
 const Container$c = styled.div `
@@ -29571,4 +29574,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-export { FlexColumn as $, AutocompleteInput as A, Badge as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexRow as _, Button$4 as a, CenterThis as a0, Overlay as a1, ModalBody as a2, getDefaultExportFromCjs as a3, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DATA_CARD_FIELD_TYPES as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };
+export { FlexColumn as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexRow as _, Badge as a, CenterThis as a0, Overlay as a1, ModalBody as a2, getDefaultExportFromCjs as a3, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DATA_CARD_FIELD_TYPES as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };

package/lib/{index-Byh3BO6S.js → index-CZe2VX28.js}

@@ -1,7 +1,7 @@
 import { SIGNAL_TYPE, ACTION_TYPE, INSTRUMENTATION_RULE_TYPE } from './types.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BhCi-TxF.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BumPE6cF.js';
 import 'react';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
 
 const ACTION_OPTIONS = [

package/lib/{index-DRT_7tQl.js → index-DIcomki-.js}

@@ -361,6 +361,18 @@ const useEntityStore = create((set) => ({
             return { [KEY]: prev };
         });
     },
+    resetEntityStore: () => {
+        set({
+            sourcesLoading: false,
+            sources: [],
+            destinationsLoading: false,
+            destinations: [],
+            actionsLoading: false,
+            actions: [],
+            instrumentationRulesLoading: false,
+            instrumentationRules: [],
+        });
+    },
 }));
 
 const getEmptyState = () => ({

package/lib/store/useEntityStore.d.ts

@@ -16,6 +16,7 @@ interface IEntityStateSetters {
     setEntities: (entityType: ENTITY_TYPES, entities: EntityItems) => void;
     addEntities: (entityType: ENTITY_TYPES, entities: EntityItems) => void;
     removeEntities: (entityType: ENTITY_TYPES, entityIds: EntityId[]) => void;
+    resetEntityStore: () => void;
 }
 export declare const useEntityStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IEntityState & IEntityStateSetters>>;
 export {};

package/lib/store.js

@@ -1,4 +1,4 @@
-export { u as useDarkMode, a as useDrawerStore, b as useEntityStore, c as useFilterStore, d as useInstrumentStore, e as useModalStore, f as useNotificationStore, g as usePendingStore, h as useSelectedStore, i as useSetupStore } from './index-DRT_7tQl.js';
+export { u as useDarkMode, a as useDrawerStore, b as useEntityStore, c as useFilterStore, d as useInstrumentStore, e as useModalStore, f as useNotificationStore, g as usePendingStore, h as useSelectedStore, i as useSetupStore } from './index-DIcomki-.js';
 import './types.js';
 import 'react';
 import 'styled-components';

package/lib/theme.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { u as useDarkMode, j as animations } from './index-DRT_7tQl.js';
+import { u as useDarkMode, j as animations } from './index-DIcomki-.js';
 import { ThemeProvider, useTheme } from 'styled-components';
 import './types.js';
 

package/lib/types/{compute-platform → connection}/index.d.ts

@@ -1,5 +1,5 @@
 import { NOTIFICATION_TYPE, PLATFORM_TYPE } from '../common';
-export interface Platform {
+export interface Connection {
     id: string;
     name?: string;
     type: PLATFORM_TYPE;

package/lib/types/index.d.ts

@@ -1,6 +1,6 @@
 export * from './actions';
 export * from './common';
-export * from './compute-platform';
+export * from './connection';
 export * from './data-flow';
 export * from './describe';
 export * from './destinations';

package/lib/{useSourceSelectionFormData-ClorQ_WP.js → useSourceSelectionFormData-BY6B70Kf.js}

@@ -1,11 +1,11 @@
 import { ACTION_TYPE, NOTIFICATION_TYPE, ADD_NODE_TYPES, ENTITY_TYPES, FIELD_TYPES } from './types.js';
 import { useState, useEffect, useCallback } from 'react';
-import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, i as useSetupStore } from './index-DRT_7tQl.js';
+import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, i as useSetupStore } from './index-DIcomki-.js';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import './index-Byh3BO6S.js';
+import './index-CZe2VX28.js';
 import { F as FORM_ALERTS } from './index-Cu2uHOuh.js';
-import { b as useGenericForm } from './useTransition-5w3VnEhL.js';
+import { b as useGenericForm } from './useTransition-Dfxjcy-C.js';
 import { g as getIdFromSseTarget } from './index-BFct3S32.js';
 
 const INITIAL$2 = {
@@ -417,10 +417,11 @@ const useSourceSelectionFormData = (params) => {
                 ...prev,
                 [name]: !!prev[name].length
                     ? prev[name]
-                    : sources.map(({ name, kind, selected }) => ({
+                    : sources.map(({ name, kind, selected, numberOfInstances }) => ({
                         name,
                         kind,
                         selected,
+                        numberOfInstances,
                     })),
             }));
         }

package/lib/{useTransition-5w3VnEhL.js → useTransition-Dfxjcy-C.js}

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-Byh3BO6S.js';
-import { f as useNotificationStore } from './index-DRT_7tQl.js';
+import './index-CZe2VX28.js';
+import { f as useNotificationStore } from './index-DIcomki-.js';
 import { CODE_ATTRIBUTES_KEY_TYPES, PAYLOAD_COLLECTION_KEY_TYPES } from './types.js';
 import styled from 'styled-components';
 
@@ -87,12 +87,33 @@ const useContainerSize = () => {
 const useCopy = () => {
     const [isCopied, setIsCopied] = useState(false);
     const [copiedIndex, setCopiedIndex] = useState(-1);
-    const clickCopy = (str, idx) => {
+    const clickCopy = async (str, idx) => {
         if (!isCopied) {
             setIsCopied(true);
             if (idx !== undefined)
                 setCopiedIndex(idx);
-            navigator.clipboard.writeText(str);
+            if (navigator?.clipboard && navigator.clipboard.writeText) {
+                try {
+                    await navigator.clipboard.writeText(str);
+                }
+                catch (err) {
+                    console.error('Clipboard write failed:', err);
+                }
+            }
+            else {
+                // Fallback: Create a temporary textarea
+                const textArea = document.createElement('textarea');
+                textArea.value = str;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                }
+                catch (err) {
+                    console.error('execCommand copy failed:', err);
+                }
+                document.body.removeChild(textArea);
+            }
             setTimeout(() => {
                 setIsCopied(false);
                 setCopiedIndex(-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -8,6 +8,7 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
+    "prebuild": "rm -rf lib",
     "build": "rollup -c --bundleConfigAsCjs"
   },
   "release": {
@@ -71,6 +72,7 @@
     "prism-react-renderer": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-lottie": "^1.2.10",
     "styled-components": "^6.1.15",
     "zustand": "^5.0.3"
@@ -81,6 +83,7 @@
     "prism-react-renderer": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-lottie": "^1.2.10",
     "styled-components": "^6.1.15",
     "zustand": "^5.0.3"

package/lib/containers/dropdowns/platform-types-dropdown/platform-types-dropdown.stories.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { StoryFn } from '@storybook/react';
-import { type PlatformTypesDropdownProps } from '.';
-declare const _default: {
-    title: string;
-    component: React.FC<PlatformTypesDropdownProps>;
-};
-export default _default;
-export declare const Default: StoryFn<PlatformTypesDropdownProps>;