Merge branch 'main' into feat/disable_side_drawer_missing_identifiers

Co-authored-by: Yunus M <myounis.ar@live.com>

conf/example.yaml

@@ -320,3 +320,4 @@ user:
     # The name of the organization to create or look up for the root user.
     org:
       name: default
+      id: 00000000-0000-0000-0000-000000000000

frontend/package.json

@@ -117,6 +117,7 @@
 		"lucide-react": "0.498.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"motion": "12.4.13",
+		"nuqs": "2.8.8",
 		"overlayscrollbars": "^2.8.1",
 		"overlayscrollbars-react": "^0.5.6",
 		"papaparse": "5.4.1",
@@ -130,7 +131,7 @@
 		"react-dom": "18.2.0",
 		"react-drag-listview": "2.0.0",
 		"react-error-boundary": "4.0.11",
-		"react-force-graph": "^1.43.0",
+		"react-force-graph-2d": "^1.29.1",
 		"react-full-screen": "1.1.1",
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
@@ -162,7 +163,8 @@
 		"webpack": "5.94.0",
 		"webpack-dev-server": "^5.2.1",
 		"webpack-retry-chunk-load-plugin": "3.1.1",
-		"xstate": "^4.31.0"
+		"xstate": "^4.31.0",
+		"zustand": "5.0.11"
 	},
 	"browserslist": {
 		"production": [
@@ -287,4 +289,4 @@
 		"on-headers": "^1.1.0",
 		"tmp": "0.2.4"
 	}
-}
+}

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -50,6 +50,7 @@ export interface HostListResponse {
 		total: number;
 		sentAnyHostMetricsData: boolean;
 		isSendingK8SAgentMetrics: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/components/Graph/utils.ts

@@ -248,6 +248,11 @@ declare module 'chart.js' {
 	}
 }
 
+const intlNumberFormatter = new Intl.NumberFormat('en-US', {
+	useGrouping: false,
+	maximumFractionDigits: 20,
+});
+
 /**
  * Formats a number for display, preserving leading zeros after the decimal point
  * and showing up to DEFAULT_SIGNIFICANT_DIGITS digits after the first non-zero decimal digit.
@@ -270,10 +275,7 @@ export const formatDecimalWithLeadingZeros = (
 	}
 
 	// Use toLocaleString to get a full decimal representation without scientific notation.
-	const numStr = value.toLocaleString('en-US', {
-		useGrouping: false,
-		maximumFractionDigits: 20,
-	});
+	const numStr = intlNumberFormatter.format(value);
 
 	const [integerPart, decimalPart = ''] = numStr.split('.');
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -85,7 +85,6 @@ interface QuerySearchProps {
 	signalSource?: string;
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
-	showFilterSuggestionsWithoutMetric?: boolean;
 }
 
 function QuerySearch({
@@ -96,7 +95,6 @@ function QuerySearch({
 	onRun,
 	signalSource,
 	hardcodedAttributeKeys,
-	showFilterSuggestionsWithoutMetric,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -253,8 +251,7 @@ function QuerySearch({
 		async (searchText?: string): Promise<void> => {
 			if (
 				dataSource === DataSource.METRICS &&
-				!queryData.aggregateAttribute?.key &&
-				!showFilterSuggestionsWithoutMetric
+				!queryData.aggregateAttribute?.key
 			) {
 				setKeySuggestions([]);
 				return;
@@ -303,7 +300,6 @@ function QuerySearch({
 			queryData.aggregateAttribute?.key,
 			signalSource,
 			hardcodedAttributeKeys,
-			showFilterSuggestionsWithoutMetric,
 		],
 	);
 
@@ -1560,7 +1556,6 @@ QuerySearch.defaultProps = {
 	hardcodedAttributeKeys: undefined,
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
-	showFilterSuggestionsWithoutMetric: false,
 };
 
 export default QuerySearch;

frontend/src/components/ValueGraph/index.tsx

@@ -40,6 +40,7 @@ function ValueGraph({
 	value,
 	rawValue,
 	thresholds,
+	yAxisUnit,
 }: ValueGraphProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -87,7 +88,7 @@ function ValueGraph({
 	const {
 		threshold,
 		isConflictingThresholds,
-	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue);
+	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);
 
 	return (
 		<div
@@ -155,6 +156,7 @@ interface ValueGraphProps {
 	value: string;
 	rawValue: number;
 	thresholds: ThresholdProps[];
+	yAxisUnit?: string;
 }
 
 export default ValueGraph;

frontend/src/components/ValueGraph/utils.ts

@@ -1,9 +1,10 @@
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
-function compareThreshold(
+function doesValueSatisfyThreshold(
 	rawValue: number,
 	threshold: ThresholdProps,
+	yAxisUnit?: string,
 ): boolean {
 	if (
 		threshold.thresholdOperator === undefined ||
@@ -11,31 +12,14 @@ function compareThreshold(
 	) {
 		return false;
 	}
-	switch (threshold.thresholdOperator) {
-		case '>':
-			return rawValue > threshold.thresholdValue;
-		case '>=':
-			return rawValue >= threshold.thresholdValue;
-		case '<':
-			return rawValue < threshold.thresholdValue;
-		case '<=':
-			return rawValue <= threshold.thresholdValue;
-		case '=':
-			return rawValue === threshold.thresholdValue;
-		default:
-			return false;
-	}
-}
 
-function extractNumbersFromString(inputString: string): number[] {
-	const regex = /[+-]?\d+(\.\d+)?/g;
-	const matches = inputString.match(regex);
-
-	if (matches) {
-		return matches.map(Number);
-	}
-
-	return [];
+	return evaluateThresholdWithConvertedValue(
+		rawValue,
+		threshold.thresholdValue,
+		threshold.thresholdOperator,
+		threshold.thresholdUnit,
+		yAxisUnit,
+	);
 }
 
 function getHighestPrecedenceThreshold(
@@ -60,21 +44,32 @@ function getHighestPrecedenceThreshold(
 	return highestPrecedenceThreshold;
 }
 
+function extractNumbersFromString(inputString: string): number[] {
+	const regex = /[+-]?\d+(\.\d+)?/g;
+	const matches = inputString.match(regex);
+
+	if (matches) {
+		return matches.map(Number);
+	}
+
+	return [];
+}
+
 export function getBackgroundColorAndThresholdCheck(
 	thresholds: ThresholdProps[],
 	rawValue: number,
+	yAxisUnit?: string,
 ): {
 	threshold: ThresholdProps;
 	isConflictingThresholds: boolean;
 } {
-	const matchingThresholds = thresholds.filter((threshold) =>
-		compareThreshold(
-			extractNumbersFromString(
-				getYAxisFormattedValue(rawValue.toString(), threshold.thresholdUnit || ''),
-			)[0],
-			threshold,
-		),
-	);
+	const matchingThresholds = thresholds.filter((threshold) => {
+		const numbers = extractNumbersFromString(rawValue.toString());
+		if (numbers.length === 0) {
+			return false;
+		}
+		return doesValueSatisfyThreshold(numbers[0], threshold, yAxisUnit);
+	});
 
 	if (matchingThresholds.length === 0) {
 		return {

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -22,6 +22,8 @@ function YAxisUnitSelector({
 	'data-testid': dataTestId,
 	source,
 	initialValue,
+	categoriesOverride,
+	containerClassName,
 }: YAxisUnitSelectorProps): JSX.Element {
 	const universalUnit = mapMetricUnitToUniversalUnit(value);
 
@@ -66,10 +68,14 @@ function YAxisUnitSelector({
 		return aliases.some((alias) => alias.toLowerCase().includes(search));
 	};
 
-	const categories = getYAxisCategories(source);
+	const categoriesToRender = useMemo(() => {
+		return categoriesOverride || getYAxisCategories(source);
+	}, [categoriesOverride, source]);
 
 	return (
-		<div className="y-axis-unit-selector-component">
+		<div
+			className={classNames('y-axis-unit-selector-component', containerClassName)}
+		>
 			<Select
 				showSearch
 				value={universalUnit}
@@ -90,7 +96,7 @@ function YAxisUnitSelector({
 				data-testid={dataTestId}
 				allowClear
 			>
-				{categories.map((category) => (
+				{categoriesToRender.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
 							<Select.Option key={unit.id} value={unit.id}>

frontend/src/components/YAxisUnitSelector/__tests__/YAxisUnitSelector.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { YAxisSource } from '../types';
+import { YAxisCategoryNames } from '../constants';
+import { UniversalYAxisUnit, YAxisSource } from '../types';
 import YAxisUnitSelector from '../YAxisUnitSelector';
 
 describe('YAxisUnitSelector', () => {
@@ -123,4 +124,34 @@ describe('YAxisUnitSelector', () => {
 		const warningIcon = screen.queryByLabelText('warning');
 		expect(warningIcon).not.toBeInTheDocument();
 	});
+
+	it('uses categories override to render custom units', () => {
+		const customCategories = [
+			{
+				name: YAxisCategoryNames.Data,
+				units: [
+					{
+						id: UniversalYAxisUnit.BYTES,
+						name: 'Custom Bytes (B)',
+					},
+				],
+			},
+		];
+
+		render(
+			<YAxisUnitSelector
+				value=""
+				onChange={mockOnChange}
+				source={YAxisSource.ALERTS}
+				categoriesOverride={customCategories}
+			/>,
+		);
+
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
+
+		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
+		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();
+	});
 });

frontend/src/components/YAxisUnitSelector/types.ts

@@ -9,6 +9,8 @@ export interface YAxisUnitSelectorProps {
 	'data-testid'?: string;
 	source: YAxisSource;
 	initialValue?: string;
+	categoriesOverride?: YAxisCategory[];
+	containerClassName?: string;
 }
 
 export enum UniversalYAxisUnit {

frontend/src/container/GridTableComponent/utils.ts

@@ -49,7 +49,7 @@ function evaluateCondition(
  * @param columnUnit - The current unit of the value.
  * @returns A boolean indicating whether the value meets the threshold condition.
  */
-function evaluateThresholdWithConvertedValue(
+export function evaluateThresholdWithConvertedValue(
 	value: number,
 	thresholdValue: number,
 	thresholdOperator?: string,

frontend/src/container/GridValueComponent/index.tsx

@@ -99,6 +99,7 @@ function GridValueComponent({
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
+					yAxisUnit={yAxisUnit}
 					value={
 						yAxisUnit
 							? getYAxisFormattedValue(

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Skeleton,
@@ -14,12 +14,93 @@ import { InfraMonitoringEvents } from 'constants/events';
 
 import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import {
+	EmptyOrLoadingViewProps,
 	formatDataForTable,
 	getHostsListColumns,
 	HostRowData,
 	HostsListTableProps,
 } from './utils';
 
+function EmptyOrLoadingView(
+	viewState: EmptyOrLoadingViewProps,
+): React.ReactNode {
+	const { isError, errorMessage } = viewState;
+	if (isError) {
+		return <Typography>{errorMessage || 'Something went wrong'}</Typography>;
+	}
+	if (viewState.showHostsEmptyState) {
+		return (
+			<HostsEmptyOrIncorrectMetrics
+				noData={!viewState.sentAnyHostMetricsData}
+				incorrectData={viewState.isSendingIncorrectK8SAgentMetrics}
+			/>
+		);
+	}
+	if (viewState.showEndTimeBeforeRetentionMessage) {
+		return (
+			<div className="hosts-empty-state-container">
+				<div className="hosts-empty-state-container-content">
+					<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
+					<div className="no-hosts-message">
+						<Typography.Title level={5} className="no-hosts-message-title">
+							Queried time range is before earliest host metrics
+						</Typography.Title>
+						<Typography.Text className="no-hosts-message-text">
+							Your requested end time is earlier than the earliest detected time of
+							host metrics data, please adjust your end time.
+						</Typography.Text>
+					</div>
+				</div>
+			</div>
+		);
+	}
+	if (viewState.showNoRecordsInSelectedTimeRangeMessage) {
+		return (
+			<div className="no-filtered-hosts-message-container">
+				<div className="no-filtered-hosts-message-content">
+					<img
+						src="/Icons/emptyState.svg"
+						alt="thinking-emoji"
+						className="empty-state-svg"
+					/>
+					<Typography.Title level={5} className="no-filtered-hosts-title">
+						No host metrics found
+					</Typography.Title>
+					<Typography.Text className="no-filtered-hosts-message">
+						No host metrics in the selected time range and filters. Please adjust your
+						time range or filters.
+					</Typography.Text>
+				</div>
+			</div>
+		);
+	}
+	if (viewState.showTableLoadingState) {
+		return (
+			<div className="hosts-list-loading-state">
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+			</div>
+		);
+	}
+	return null;
+}
+
 export default function HostsListTable({
 	isLoading,
 	isFetching,
@@ -46,6 +127,11 @@ export default function HostsListTable({
 		[data],
 	);
 
+	const endTimeBeforeRetention = useMemo(
+		() => data?.payload?.data?.endTimeBeforeRetention || false,
+		[data],
+	);
+
 	const formattedHostMetricsData = useMemo(
 		() => formatDataForTable(hostMetricsData),
 		[hostMetricsData],
@@ -84,12 +170,6 @@ export default function HostsListTable({
 		});
 	};
 
-	const showNoFilteredHostsMessage =
-		!isFetching &&
-		!isLoading &&
-		formattedHostMetricsData.length === 0 &&
-		filters.items.length > 0;
-
 	const showHostsEmptyState =
 		!isFetching &&
 		!isLoading &&
@@ -97,63 +177,36 @@ export default function HostsListTable({
 		(!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics) &&
 		!filters.items.length;
 
+	const showEndTimeBeforeRetentionMessage =
+		!isFetching &&
+		!isLoading &&
+		formattedHostMetricsData.length === 0 &&
+		endTimeBeforeRetention &&
+		!filters.items.length;
+
+	const showNoRecordsInSelectedTimeRangeMessage =
+		!isFetching &&
+		!isLoading &&
+		formattedHostMetricsData.length === 0 &&
+		!showEndTimeBeforeRetentionMessage &&
+		!showHostsEmptyState;
+
 	const showTableLoadingState =
 		(isLoading || isFetching) && formattedHostMetricsData.length === 0;
 
-	if (isError) {
-		return <Typography>{data?.error || 'Something went wrong'}</Typography>;
-	}
+	const emptyOrLoadingView = EmptyOrLoadingView({
+		isError,
+		errorMessage: data?.error ?? '',
+		showHostsEmptyState,
+		sentAnyHostMetricsData,
+		isSendingIncorrectK8SAgentMetrics,
+		showEndTimeBeforeRetentionMessage,
+		showNoRecordsInSelectedTimeRangeMessage,
+		showTableLoadingState,
+	});
 
-	if (showHostsEmptyState) {
-		return (
-			<HostsEmptyOrIncorrectMetrics
-				noData={!sentAnyHostMetricsData}
-				incorrectData={isSendingIncorrectK8SAgentMetrics}
-			/>
-		);
-	}
-
-	if (showNoFilteredHostsMessage) {
-		return (
-			<div className="no-filtered-hosts-message-container">
-				<div className="no-filtered-hosts-message-content">
-					<img
-						src="/Icons/emptyState.svg"
-						alt="thinking-emoji"
-						className="empty-state-svg"
-					/>
-
-					<Typography.Text className="no-filtered-hosts-message">
-						This query had no results. Edit your query and try again!
-					</Typography.Text>
-				</div>
-			</div>
-		);
-	}
-
-	if (showTableLoadingState) {
-		return (
-			<div className="hosts-list-loading-state">
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-			</div>
-		);
+	if (emptyOrLoadingView) {
+		return <>{emptyOrLoadingView}</>;
 	}
 
 	return (

frontend/src/container/InfraMonitoringHosts/__tests__/HostsListTable.test.tsx

@@ -1,12 +1,16 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { render, screen } from '@testing-library/react';
+import { HostData, HostListResponse } from 'api/infraMonitoring/getHostLists';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import HostsListTable from '../HostsListTable';
+import { HostsListTableProps } from '../utils';
 
 const EMPTY_STATE_CONTAINER_CLASS = '.hosts-empty-state-container';
 
-describe('HostsListTable', () => {
-	const mockHost = {
+const createMockHost = (): HostData =>
+	({
 		hostName: 'test-host-1',
 		active: true,
 		cpu: 0.75,
@@ -14,20 +18,46 @@ describe('HostsListTable', () => {
 		wait: 0.03,
 		load15: 1.5,
 		os: 'linux',
-	};
+		cpuTimeSeries: { labels: {}, labelsArray: [], values: [] },
+		memoryTimeSeries: { labels: {}, labelsArray: [], values: [] },
+		waitTimeSeries: { labels: {}, labelsArray: [], values: [] },
+		load15TimeSeries: { labels: {}, labelsArray: [], values: [] },
+	} as HostData);
 
-	const mockTableData = {
+const createMockTableData = (
+	overrides: Partial<HostListResponse['data']> = {},
+): SuccessResponse<HostListResponse> => {
+	const mockHost = createMockHost();
+	return {
+		statusCode: 200,
+		message: 'Success',
+		error: null,
 		payload: {
+			status: 'success',
 			data: {
-				hosts: [mockHost],
+				type: 'list',
+				records: [mockHost],
+				groups: null,
+				total: 1,
+				sentAnyHostMetricsData: true,
+				isSendingK8SAgentMetrics: false,
+				endTimeBeforeRetention: false,
+				...overrides,
 			},
 		},
 	};
+};
+
+describe('HostsListTable', () => {
+	const mockHost = createMockHost();
+	const mockTableData = createMockTableData();
+
 	const mockOnHostClick = jest.fn();
 	const mockSetCurrentPage = jest.fn();
 	const mockSetOrderBy = jest.fn();
 	const mockSetPageSize = jest.fn();
-	const mockProps = {
+
+	const mockProps: HostsListTableProps = {
 		isLoading: false,
 		isError: false,
 		isFetching: false,
@@ -43,7 +73,7 @@ describe('HostsListTable', () => {
 		pageSize: 10,
 		setOrderBy: mockSetOrderBy,
 		setPageSize: mockSetPageSize,
-	} as any;
+	};
 
 	it('renders loading state if isLoading is true and tableData is empty', () => {
 		const { container } = render(
@@ -51,7 +81,7 @@ describe('HostsListTable', () => {
 				{...mockProps}
 				isLoading
 				hostMetricsData={[]}
-				tableData={{ payload: { data: { hosts: [] } } }}
+				tableData={createMockTableData({ records: [] })}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
@@ -63,7 +93,7 @@ describe('HostsListTable', () => {
 				{...mockProps}
 				isFetching
 				hostMetricsData={[]}
-				tableData={{ payload: { data: { hosts: [] } } }}
+				tableData={createMockTableData({ records: [] })}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
@@ -74,19 +104,56 @@ describe('HostsListTable', () => {
 		expect(screen.getByText('Something went wrong')).toBeTruthy();
 	});
 
+	it('renders "Something went wrong" fallback when isError is true and error message is empty', () => {
+		const tableDataWithEmptyError: ErrorResponse = {
+			statusCode: 500,
+			payload: null,
+			error: '',
+			message: null,
+		};
+		render(
+			<HostsListTable
+				{...mockProps}
+				isError
+				hostMetricsData={[]}
+				tableData={tableDataWithEmptyError}
+			/>,
+		);
+		expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+	});
+
+	it('renders custom error message when isError is true and error message is provided', () => {
+		const customErrorMessage = 'Failed to fetch host metrics';
+		const tableDataWithError: ErrorResponse = {
+			statusCode: 500,
+			payload: null,
+			error: customErrorMessage,
+			message: null,
+		};
+		render(
+			<HostsListTable
+				{...mockProps}
+				isError
+				hostMetricsData={[]}
+				tableData={tableDataWithError}
+			/>,
+		);
+		expect(screen.getByText(customErrorMessage)).toBeInTheDocument();
+	});
+
 	it('renders empty state if no hosts are found', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
 				hostMetricsData={[]}
-				tableData={{
-					payload: {
-						data: { hosts: [] },
-					},
-				}}
+				tableData={createMockTableData({
+					records: [],
+				})}
 			/>,
 		);
-		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
+		expect(
+			container.querySelector('.no-filtered-hosts-message-container'),
+		).toBeTruthy();
 	});
 
 	it('renders empty state if sentAnyHostMetricsData is false', () => {
@@ -94,58 +161,114 @@ describe('HostsListTable', () => {
 			<HostsListTable
 				{...mockProps}
 				hostMetricsData={[]}
-				tableData={{
-					...mockTableData,
-					payload: {
-						...mockTableData.payload,
-						data: {
-							...mockTableData.payload.data,
-							sentAnyHostMetricsData: false,
-							hosts: [],
-						},
-					},
-				}}
+				tableData={createMockTableData({
+					sentAnyHostMetricsData: false,
+					records: [],
+				})}
 			/>,
 		);
 		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
 	});
 
-	it('renders empty state if isSendingIncorrectK8SAgentMetrics is true', () => {
+	it('renders empty state if isSendingK8SAgentMetrics is true', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
 				hostMetricsData={[]}
-				tableData={{
-					...mockTableData,
-					payload: {
-						...mockTableData.payload,
-						data: {
-							...mockTableData.payload.data,
-							isSendingIncorrectK8SAgentMetrics: true,
-							hosts: [],
-						},
-					},
-				}}
+				tableData={createMockTableData({
+					isSendingK8SAgentMetrics: true,
+					records: [],
+				})}
 			/>,
 		);
 		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
 	});
 
+	it('renders end time before retention message when endTimeBeforeRetention is true', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				hostMetricsData={[]}
+				tableData={createMockTableData({
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+					endTimeBeforeRetention: true,
+					records: [],
+				})}
+			/>,
+		);
+		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
+		expect(
+			screen.getByText(
+				/Your requested end time is earlier than the earliest detected time of host metrics data, please adjust your end time\./,
+			),
+		).toBeInTheDocument();
+	});
+
+	it('renders no records message when noRecordsInSelectedTimeRangeAndFilters is true', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				hostMetricsData={[]}
+				tableData={createMockTableData({
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+					records: [],
+				})}
+			/>,
+		);
+		expect(
+			container.querySelector('.no-filtered-hosts-message-container'),
+		).toBeTruthy();
+		expect(
+			screen.getByText(/No host metrics in the selected time range and filters/),
+		).toBeInTheDocument();
+	});
+
+	it('renders no filtered hosts message when filters are present and no hosts are found', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				hostMetricsData={[]}
+				filters={{
+					items: [
+						{
+							id: 'host_name',
+							key: {
+								key: 'host_name',
+								dataType: DataTypes.String,
+								type: 'tag',
+								isIndexed: true,
+							},
+							op: '=',
+							value: 'unknown',
+						},
+					],
+					op: 'AND',
+				}}
+				tableData={createMockTableData({
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+					records: [],
+				})}
+			/>,
+		);
+		expect(container.querySelector('.no-filtered-hosts-message')).toBeTruthy();
+		expect(
+			screen.getByText(
+				/No host metrics in the selected time range and filters\. Please adjust your time range or filters\./,
+			),
+		).toBeInTheDocument();
+	});
+
 	it('renders table data', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
-				tableData={{
-					...mockTableData,
-					payload: {
-						...mockTableData.payload,
-						data: {
-							...mockTableData.payload.data,
-							isSendingIncorrectK8SAgentMetrics: false,
-							sentAnyHostMetricsData: true,
-						},
-					},
-				}}
+				tableData={createMockTableData({
+					isSendingK8SAgentMetrics: false,
+					sentAnyHostMetricsData: true,
+				})}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-table')).toBeTruthy();

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -107,6 +107,17 @@ export interface HostsListTableProps {
 	setPageSize: (pageSize: number) => void;
 }
 
+export interface EmptyOrLoadingViewProps {
+	isError: boolean;
+	errorMessage: string;
+	showHostsEmptyState: boolean;
+	sentAnyHostMetricsData: boolean;
+	isSendingIncorrectK8SAgentMetrics: boolean;
+	showEndTimeBeforeRetentionMessage: boolean;
+	showNoRecordsInSelectedTimeRangeMessage: boolean;
+	showTableLoadingState: boolean;
+}
+
 export const getHostListsQuery = (): HostListPayload => ({
 	filters: {
 		items: [],

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -453,6 +453,9 @@ function K8sClustersList({
 
 	const handleRowClick = (record: K8sClustersRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.clusterNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedClusterName(record.clusterUID);
 			setSearchParams({
@@ -517,9 +520,13 @@ function K8sClustersList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedClusterName(record.clusterUID);
+								if (record.clusterNameRaw) {
+									setselectedClusterName(record.clusterUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.clusterNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -709,7 +716,10 @@ function K8sClustersList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.clusterNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx

@@ -47,6 +47,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sClustersRowData {
 	key: string;
 	clusterUID: string;
+	clusterNameRaw: string;
 	clusterName: React.ReactNode;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
@@ -175,6 +176,7 @@ export const formatDataForTable = (
 	data.map((cluster, index) => ({
 		key: index.toString(),
 		clusterUID: cluster.meta.k8s_cluster_name,
+		clusterNameRaw: cluster.meta.k8s_cluster_name || '',
 		clusterName: (
 			<Tooltip title={cluster.meta.k8s_cluster_name}>
 				{cluster.meta.k8s_cluster_name}

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -459,6 +459,9 @@ function K8sDaemonSetsList({
 
 	const handleRowClick = (record: K8sDaemonSetsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.daemonsetNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setSelectedDaemonSetUID(record.daemonsetUID);
 			setSearchParams({
@@ -523,9 +526,13 @@ function K8sDaemonSetsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setSelectedDaemonSetUID(record.daemonsetUID);
+								if (record.daemonsetNameRaw) {
+									setSelectedDaemonSetUID(record.daemonsetUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.daemonsetNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -717,7 +724,10 @@ function K8sDaemonSetsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.daemonsetNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/DaemonSets/utils.tsx

@@ -82,6 +82,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sDaemonSetsRowData {
 	key: string;
 	daemonsetUID: string;
+	daemonsetNameRaw: string;
 	daemonsetName: React.ReactNode;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -276,6 +277,7 @@ export const formatDataForTable = (
 	data.map((daemonSet, index) => ({
 		key: index.toString(),
 		daemonsetUID: daemonSet.daemonSetName,
+		daemonsetNameRaw: daemonSet.meta.k8s_daemonset_name || '',
 		daemonsetName: (
 			<Tooltip title={daemonSet.meta.k8s_daemonset_name}>
 				{daemonSet.meta.k8s_daemonset_name || ''}

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -465,6 +465,9 @@ function K8sDeploymentsList({
 
 	const handleRowClick = (record: K8sDeploymentsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.deploymentNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedDeploymentUID(record.deploymentUID);
 			setSearchParams({
@@ -529,9 +532,13 @@ function K8sDeploymentsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedDeploymentUID(record.deploymentUID);
+								if (record.deploymentNameRaw) {
+									setselectedDeploymentUID(record.deploymentUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.deploymentNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -724,7 +731,10 @@ function K8sDeploymentsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.deploymentNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Deployments/utils.tsx

@@ -81,6 +81,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sDeploymentsRowData {
 	key: string;
 	deploymentUID: string;
+	deploymentNameRaw: string;
 	deploymentName: React.ReactNode;
 	available_pods: React.ReactNode;
 	desired_pods: React.ReactNode;
@@ -267,6 +268,7 @@ export const formatDataForTable = (
 	data.map((deployment, index) => ({
 		key: index.toString(),
 		deploymentUID: deployment.meta.k8s_deployment_name,
+		deploymentNameRaw: deployment.meta.k8s_deployment_name || '',
 		deploymentName: (
 			<Tooltip title={deployment.meta.k8s_deployment_name}>
 				{deployment.meta.k8s_deployment_name}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

@@ -337,6 +337,11 @@
 		cursor: pointer;
 	}
 
+	.disabled-row {
+		cursor: default;
+		opacity: 0.6;
+	}
+
 	.k8s-list-table {
 		.ant-table {
 			.ant-table-thead > tr > th {

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -430,6 +430,9 @@ function K8sJobsList({
 
 	const handleRowClick = (record: K8sJobsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.jobNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedJobUID(record.jobUID);
 			setSearchParams({
@@ -494,9 +497,11 @@ function K8sJobsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedJobUID(record.jobUID);
+								if (record.jobNameRaw) {
+									setselectedJobUID(record.jobUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.jobNameRaw ? 'expanded-clickable-row' : 'disabled-row',
 						})}
 					/>
 
@@ -686,7 +691,10 @@ function K8sJobsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.jobNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Jobs/utils.tsx

@@ -94,6 +94,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sJobsRowData {
 	key: string;
 	jobUID: string;
+	jobNameRaw: string;
 	jobName: React.ReactNode;
 	namespaceName: React.ReactNode;
 	successful_pods: React.ReactNode;
@@ -303,6 +304,7 @@ export const formatDataForTable = (
 	data.map((job, index) => ({
 		key: index.toString(),
 		jobUID: job.jobName,
+		jobNameRaw: job.meta.k8s_job_name || '',
 		jobName: (
 			<Tooltip title={job.meta.k8s_job_name}>
 				{job.meta.k8s_job_name || ''}

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -461,6 +461,9 @@ function K8sNamespacesList({
 
 	const handleRowClick = (record: K8sNamespacesRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.namespaceNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedNamespaceUID(record.namespaceUID);
 			setSearchParams({
@@ -525,9 +528,13 @@ function K8sNamespacesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedNamespaceUID(record.namespaceUID);
+								if (record.namespaceNameRaw) {
+									setselectedNamespaceUID(record.namespaceUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.namespaceNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -718,7 +725,10 @@ function K8sNamespacesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.namespaceNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Namespaces/utils.tsx

@@ -41,6 +41,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sNamespacesRowData {
 	key: string;
 	namespaceUID: string;
+	namespaceNameRaw: string;
 	namespaceName: string;
 	clusterName: string;
 	cpu: React.ReactNode;
@@ -161,6 +162,7 @@ export const formatDataForTable = (
 	data.map((namespace, index) => ({
 		key: index.toString(),
 		namespaceUID: namespace.namespaceName,
+		namespaceNameRaw: namespace.namespaceName || '',
 		namespaceName: namespace.namespaceName,
 		clusterName: namespace.meta.k8s_cluster_name,
 		cpu: (

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -440,6 +440,9 @@ function K8sNodesList({
 
 	const handleRowClick = (record: K8sNodesRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.nodeNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setSelectedNodeUID(record.nodeUID);
 			setSearchParams({
@@ -505,9 +508,13 @@ function K8sNodesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setSelectedNodeUID(record.nodeUID);
+								if (record.nodeNameRaw) {
+									setSelectedNodeUID(record.nodeUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.nodeNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -697,7 +704,10 @@ function K8sNodesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.nodeNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Nodes/utils.tsx

@@ -53,6 +53,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sNodesRowData {
 	key: string;
 	nodeUID: string;
+	nodeNameRaw: string;
 	nodeName: React.ReactNode;
 	clusterName: string;
 	cpu: React.ReactNode;
@@ -193,6 +194,7 @@ export const formatDataForTable = (
 	data.map((node, index) => ({
 		key: `${node.nodeUID}-${index}`,
 		nodeUID: node.nodeUID || '',
+		nodeNameRaw: node.meta.k8s_node_name || '',
 		nodeName: (
 			<Tooltip title={node.meta.k8s_node_name}>
 				{node.meta.k8s_node_name || ''}

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -497,6 +497,9 @@ function K8sPodsList({
 
 	const handleRowClick = (record: K8sPodsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.podNameRaw) {
+				return;
+			}
 			setSelectedPodUID(record.podUID);
 			setSearchParams({
 				...Object.fromEntries(searchParams.entries()),
@@ -617,9 +620,11 @@ function K8sPodsList({
 						}}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setSelectedPodUID(record.podUID);
+								if (record.podNameRaw) {
+									setSelectedPodUID(record.podUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.podNameRaw ? 'expanded-clickable-row' : 'disabled-row',
 						})}
 					/>
 
@@ -754,7 +759,10 @@ function K8sPodsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.podNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -462,6 +462,9 @@ function K8sStatefulSetsList({
 
 	const handleRowClick = (record: K8sStatefulSetsRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.statefulsetNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedStatefulSetUID(record.statefulsetUID);
 			setSearchParams({
@@ -526,9 +529,13 @@ function K8sStatefulSetsList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedStatefulSetUID(record.statefulsetUID);
+								if (record.statefulsetNameRaw) {
+									setselectedStatefulSetUID(record.statefulsetUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.statefulsetNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -720,7 +727,10 @@ function K8sStatefulSetsList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.statefulsetNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/StatefulSets/utils.tsx

@@ -82,6 +82,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sStatefulSetsRowData {
 	key: string;
 	statefulsetUID: string;
+	statefulsetNameRaw: string;
 	statefulsetName: React.ReactNode;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -276,6 +277,7 @@ export const formatDataForTable = (
 	data.map((statefulSet, index) => ({
 		key: index.toString(),
 		statefulsetUID: statefulSet.statefulSetName,
+		statefulsetNameRaw: statefulSet.meta.k8s_statefulset_name || '',
 		statefulsetName: (
 			<Tooltip title={statefulSet.meta.k8s_statefulset_name}>
 				{statefulSet.meta.k8s_statefulset_name || ''}

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -392,6 +392,9 @@ function K8sVolumesList({
 
 	const handleRowClick = (record: K8sVolumesRowData): void => {
 		if (groupBy.length === 0) {
+			if (!record.volumeNameRaw) {
+				return;
+			}
 			setSelectedRowData(null);
 			setselectedVolumeUID(record.volumeUID);
 			setSearchParams({
@@ -456,9 +459,13 @@ function K8sVolumesList({
 						showHeader={false}
 						onRow={(record): { onClick: () => void; className: string } => ({
 							onClick: (): void => {
-								setselectedVolumeUID(record.volumeUID);
+								if (record.volumeNameRaw) {
+									setselectedVolumeUID(record.volumeUID);
+								}
 							},
-							className: 'expanded-clickable-row',
+							className: record.volumeNameRaw
+								? 'expanded-clickable-row'
+								: 'disabled-row',
 						})}
 					/>
 
@@ -643,7 +650,10 @@ function K8sVolumesList({
 				onChange={handleTableChange}
 				onRow={(record): { onClick: () => void; className: string } => ({
 					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
+					className:
+						groupBy.length > 0 || record.volumeNameRaw
+							? 'clickable-row'
+							: 'disabled-row',
 				})}
 				expandable={{
 					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,

frontend/src/container/InfraMonitoringK8s/Volumes/utils.tsx

@@ -47,6 +47,7 @@ export const defaultAddedColumns: IEntityColumn[] = [
 export interface K8sVolumesRowData {
 	key: string;
 	volumeUID: string;
+	volumeNameRaw: string;
 	pvcName: React.ReactNode;
 	namespaceName: React.ReactNode;
 	capacity: React.ReactNode;
@@ -186,6 +187,7 @@ export const formatDataForTable = (
 	data.map((volume, index) => ({
 		key: index.toString(),
 		volumeUID: volume.persistentVolumeClaimName,
+		volumeNameRaw: volume.persistentVolumeClaimName || '',
 		pvcName: (
 			<Tooltip title={volume.persistentVolumeClaimName}>
 				{volume.persistentVolumeClaimName || ''}

frontend/src/container/InfraMonitoringK8s/utils.tsx

@@ -107,6 +107,7 @@ export const defaultAvailableColumns = [
 export interface K8sPodsRowData {
 	key: string;
 	podName: React.ReactNode;
+	podNameRaw: string;
 	podUID: string;
 	cpu_request: React.ReactNode;
 	cpu_limit: React.ReactNode;
@@ -350,6 +351,7 @@ export const formatDataForTable = (
 				{pod.meta.k8s_pod_name || ''}
 			</Tooltip>
 		),
+		podNameRaw: pod.meta.k8s_pod_name || '',
 		podUID: pod.podUID || '',
 		cpu_request: (
 			<ValidateColumnValueWrapper

frontend/src/container/MetricsExplorer/Inspect/ExpandedView.tsx

@@ -33,7 +33,7 @@ function ExpandedView({
 	options,
 	spaceAggregationSeriesMap,
 	step,
-	metricInspectionAppliedOptions,
+	metricInspectionOptions,
 	timeAggregatedSeriesMap,
 }: ExpandedViewProps): JSX.Element {
 	const [
@@ -44,17 +44,17 @@ function ExpandedView({
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.InspectPointClicked, {
 			[MetricsExplorerEventKeys.Modal]: 'inspect',
-			[MetricsExplorerEventKeys.Filters]: metricInspectionAppliedOptions.filters,
+			[MetricsExplorerEventKeys.Filters]: metricInspectionOptions.filters,
 			[MetricsExplorerEventKeys.TimeAggregationInterval]:
-				metricInspectionAppliedOptions.timeAggregationInterval,
+				metricInspectionOptions.timeAggregationInterval,
 			[MetricsExplorerEventKeys.TimeAggregationOption]:
-				metricInspectionAppliedOptions.timeAggregationOption,
+				metricInspectionOptions.timeAggregationOption,
 			[MetricsExplorerEventKeys.SpaceAggregationOption]:
-				metricInspectionAppliedOptions.spaceAggregationOption,
+				metricInspectionOptions.spaceAggregationOption,
 			[MetricsExplorerEventKeys.SpaceAggregationLabels]:
-				metricInspectionAppliedOptions.spaceAggregationLabels,
+				metricInspectionOptions.spaceAggregationLabels,
 		});
-	}, [metricInspectionAppliedOptions]);
+	}, [metricInspectionOptions]);
 
 	useEffect(() => {
 		if (step !== InspectionStep.COMPLETED) {
@@ -167,7 +167,7 @@ function ExpandedView({
 							<Typography.Text strong>
 								{`${absoluteValue} is the ${
 									SPACE_AGGREGATION_OPTIONS_FOR_EXPANDED_VIEW[
-										metricInspectionAppliedOptions.spaceAggregationOption ??
+										metricInspectionOptions.spaceAggregationOption ??
 											SpaceAggregationOptions.SUM_BY
 									]
 								} of`}
@@ -240,7 +240,7 @@ function ExpandedView({
 											)?.value ?? options?.value
 									  } is the ${
 											TIME_AGGREGATION_OPTIONS[
-												metricInspectionAppliedOptions.timeAggregationOption ??
+												metricInspectionOptions.timeAggregationOption ??
 													TimeAggregationOptions.SUM
 											]
 									  } of`
@@ -299,7 +299,7 @@ function ExpandedView({
 							<Typography.Text strong>
 								{`${absoluteValue} is the ${
 									TIME_AGGREGATION_OPTIONS[
-										metricInspectionAppliedOptions.timeAggregationOption ??
+										metricInspectionOptions.timeAggregationOption ??
 											TimeAggregationOptions.SUM
 									]
 								} of`}

frontend/src/container/MetricsExplorer/Inspect/GraphView.tsx

@@ -13,10 +13,9 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
 import { METRIC_TYPE_TO_COLOR_MAP, METRIC_TYPE_TO_ICON_MAP } from './constants';
 import GraphPopover from './GraphPopover';
-import HoverPopover from './HoverPopover';
 import TableView from './TableView';
 import { GraphPopoverOptions, GraphViewProps } from './types';
-import { onGraphClick, onGraphHover } from './utils';
+import { HoverPopover, onGraphClick, onGraphHover } from './utils';
 
 function GraphView({
 	inspectMetricsTimeSeries,
@@ -30,7 +29,7 @@ function GraphView({
 	popoverOptions,
 	setShowExpandedView,
 	setExpandedViewOptions,
-	metricInspectionAppliedOptions,
+	metricInspectionOptions,
 	isInspectMetricsRefetching,
 }: GraphViewProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
@@ -234,7 +233,7 @@ function GraphView({
 						inspectMetricsTimeSeries={inspectMetricsTimeSeries}
 						setShowExpandedView={setShowExpandedView}
 						setExpandedViewOptions={setExpandedViewOptions}
-						metricInspectionAppliedOptions={metricInspectionAppliedOptions}
+						metricInspectionOptions={metricInspectionOptions}
 						isInspectMetricsRefetching={isInspectMetricsRefetching}
 					/>
 				)}
@@ -256,7 +255,7 @@ function GraphView({
 				<HoverPopover
 					options={hoverPopoverOptions}
 					step={inspectionStep}
-					metricInspectionAppliedOptions={metricInspectionAppliedOptions}
+					metricInspectionOptions={metricInspectionOptions}
 				/>
 			)}
 		</div>

frontend/src/container/MetricsExplorer/Inspect/HoverPopover.tsx

@@ -1,111 +0,0 @@
-import { useMemo } from 'react';
-import { Card, Typography } from 'antd';
-
-import {
-	GraphPopoverOptions,
-	InspectionStep,
-	MetricInspectionOptions,
-} from './types';
-import { TimeSeriesLabelProps } from './types';
-import { formatTimestampToFullDateTime } from './utils';
-
-function TimeSeriesLabel({
-	timeSeries,
-	textColor,
-}: TimeSeriesLabelProps): JSX.Element {
-	return (
-		<>
-			{Object.entries(timeSeries?.labels ?? {}).map(([key, value]) => (
-				<span key={key}>
-					<Typography.Text style={{ color: textColor, fontWeight: 600 }}>
-						{key}
-					</Typography.Text>
-					: {value}{' '}
-				</span>
-			))}
-		</>
-	);
-}
-
-function HoverPopover({
-	options,
-	step,
-	metricInspectionAppliedOptions,
-}: {
-	options: GraphPopoverOptions;
-	step: InspectionStep;
-	metricInspectionAppliedOptions: MetricInspectionOptions;
-}): JSX.Element {
-	const closestTimestamp = useMemo(() => {
-		if (!options.timeSeries) {
-			return options.timestamp;
-		}
-		return options.timeSeries?.values.reduce((prev, curr) => {
-			const prevDiff = Math.abs(prev.timestamp - options.timestamp);
-			const currDiff = Math.abs(curr.timestamp - options.timestamp);
-			return prevDiff < currDiff ? prev : curr;
-		}).timestamp;
-	}, [options.timeSeries, options.timestamp]);
-
-	const closestValue = useMemo(() => {
-		if (!options.timeSeries) {
-			return options.value;
-		}
-		const index = options.timeSeries.values.findIndex(
-			(value) => value.timestamp === closestTimestamp,
-		);
-		return index !== undefined && index >= 0
-			? options.timeSeries?.values[index].value
-			: null;
-	}, [options.timeSeries, closestTimestamp, options.value]);
-
-	const title = useMemo(() => {
-		if (
-			step === InspectionStep.COMPLETED &&
-			metricInspectionAppliedOptions.spaceAggregationLabels.length === 0
-		) {
-			return undefined;
-		}
-		if (step === InspectionStep.COMPLETED && options.timeSeries?.title) {
-			return options.timeSeries.title;
-		}
-		if (!options.timeSeries) {
-			return undefined;
-		}
-		return (
-			<TimeSeriesLabel
-				timeSeries={options.timeSeries}
-				textColor={options.timeSeries?.strokeColor}
-			/>
-		);
-	}, [step, options.timeSeries, metricInspectionAppliedOptions]);
-
-	return (
-		<Card
-			className="hover-popover-card"
-			style={{
-				top: options.y + 10,
-				left: options.x + 10,
-			}}
-		>
-			<div className="hover-popover-row">
-				<Typography.Text>
-					{formatTimestampToFullDateTime(closestTimestamp ?? 0)}
-				</Typography.Text>
-				<Typography.Text>{Number(closestValue).toFixed(2)}</Typography.Text>
-			</div>
-			{options.timeSeries && (
-				<Typography.Text
-					style={{
-						color: options.timeSeries?.strokeColor,
-						fontWeight: 200,
-					}}
-				>
-					{title}
-				</Typography.Text>
-			)}
-		</Card>
-	);
-}
-
-export default HoverPopover;

frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss

@@ -122,10 +122,6 @@
 				gap: 4px;
 
 				.inspect-metrics-query-builder-header {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-
 					.query-builder-button-label {
 						display: flex;
 						align-items: center;
@@ -261,21 +257,6 @@
 
 				.completed-checklist-container {
 					margin-left: 20px;
-
-					.completed-checklist-item,
-					.whats-next-checklist-item {
-						.completed-checklist-item-title,
-						.whats-next-checklist-item-title {
-							display: flex;
-							align-items: center;
-							gap: 4px;
-							.ant-typography {
-								display: flex;
-								align-items: center;
-								gap: 4px;
-							}
-						}
-					}
 				}
 
 				.completed-message-container {

frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx

@@ -9,7 +9,6 @@ import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
@@ -32,12 +31,7 @@ function Inspect({
 	onClose,
 }: InspectProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const [currentMetricName, setCurrentMetricName] = useState<string>(
-		defaultMetricName,
-	);
-	const [appliedMetricName, setAppliedMetricName] = useState<string>(
-		defaultMetricName,
-	);
+	const [metricName, setMetricName] = useState<string | null>(defaultMetricName);
 	const [
 		popoverOptions,
 		setPopoverOptions,
@@ -48,12 +42,9 @@ function Inspect({
 	] = useState<GraphPopoverOptions | null>(null);
 	const [showExpandedView, setShowExpandedView] = useState(false);
 
-	const { data: metricDetailsData } = useGetMetricDetails(
-		appliedMetricName ?? '',
-		{
-			enabled: !!appliedMetricName,
-		},
-	);
+	const { data: metricDetailsData } = useGetMetricDetails(metricName ?? '', {
+		enabled: !!metricName,
+	});
 
 	const { currentQuery } = useQueryBuilder();
 	const { handleChangeQueryData } = useQueryOperations({
@@ -106,16 +97,25 @@ function Inspect({
 		aggregatedTimeSeries,
 		timeAggregatedSeriesMap,
 		reset,
-	} = useInspectMetrics(appliedMetricName);
+	} = useInspectMetrics(metricName);
 
 	const handleDispatchMetricInspectionOptions = useCallback(
 		(action: MetricInspectionAction): void => {
 			dispatchMetricInspectionOptions(action);
 			logEvent(MetricsExplorerEvents.InspectQueryChanged, {
 				[MetricsExplorerEventKeys.Modal]: 'inspect',
+				[MetricsExplorerEventKeys.Filters]: metricInspectionOptions.filters,
+				[MetricsExplorerEventKeys.TimeAggregationInterval]:
+					metricInspectionOptions.timeAggregationInterval,
+				[MetricsExplorerEventKeys.TimeAggregationOption]:
+					metricInspectionOptions.timeAggregationOption,
+				[MetricsExplorerEventKeys.SpaceAggregationOption]:
+					metricInspectionOptions.spaceAggregationOption,
+				[MetricsExplorerEventKeys.SpaceAggregationLabels]:
+					metricInspectionOptions.spaceAggregationLabels,
 			});
 		},
-		[dispatchMetricInspectionOptions],
+		[dispatchMetricInspectionOptions, metricInspectionOptions],
 	);
 
 	const selectedMetricType = useMemo(
@@ -128,39 +128,18 @@ function Inspect({
 		[metricDetailsData],
 	);
 
-	const aggregateAttribute = useMemo(
-		() => ({
-			key: currentMetricName ?? '',
-			dataType: DataTypes.String,
-			type: selectedMetricType as string,
-			isColumn: true,
-			isJSON: false,
-			id: `${currentMetricName}--${DataTypes.String}--${selectedMetricType}--true`,
-		}),
-		[currentMetricName, selectedMetricType],
-	);
-
-	const [currentQueryData, setCurrentQueryData] = useState<IBuilderQuery>({
-		...searchQuery,
-		aggregateAttribute,
-	});
-
-	useEffect(() => {
-		if (searchQuery) {
-			setCurrentQueryData({
-				...searchQuery,
-				aggregateAttribute,
-			});
-		}
-	}, [aggregateAttribute, searchQuery]);
-
 	const resetInspection = useCallback(() => {
 		setShowExpandedView(false);
 		setPopoverOptions(null);
 		setExpandedViewOptions(null);
-		setCurrentQueryData(searchQuery as IBuilderQuery);
 		reset();
-	}, [reset, searchQuery]);
+	}, [reset]);
+
+	// Reset inspection when the selected metric changes
+	useEffect(() => {
+		resetInspection();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [metricName]);
 
 	// Hide expanded view whenever inspection step changes
 	useEffect(() => {
@@ -214,7 +193,7 @@ function Inspect({
 						inspectMetricsTimeSeries={aggregatedTimeSeries}
 						formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
 						resetInspection={resetInspection}
-						metricName={appliedMetricName}
+						metricName={metricName}
 						metricUnit={selectedMetricUnit}
 						metricType={selectedMetricType}
 						spaceAggregationSeriesMap={spaceAggregationSeriesMap}
@@ -224,20 +203,19 @@ function Inspect({
 						showExpandedView={showExpandedView}
 						setExpandedViewOptions={setExpandedViewOptions}
 						popoverOptions={popoverOptions}
-						metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+						metricInspectionOptions={metricInspectionOptions}
 						isInspectMetricsRefetching={isInspectMetricsRefetching}
 					/>
 					<QueryBuilder
-						currentMetricName={currentMetricName}
-						setCurrentMetricName={setCurrentMetricName}
-						setAppliedMetricName={setAppliedMetricName}
+						metricName={metricName}
+						metricType={selectedMetricType}
+						setMetricName={setMetricName}
 						spaceAggregationLabels={spaceAggregationLabels}
-						currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
+						metricInspectionOptions={metricInspectionOptions}
 						dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
 						inspectionStep={inspectionStep}
 						inspectMetricsTimeSeries={inspectMetricsTimeSeries}
-						currentQuery={currentQueryData}
-						setCurrentQuery={setCurrentQueryData}
+						searchQuery={searchQuery as IBuilderQuery}
 					/>
 				</div>
 				<div className="inspect-metrics-content-second-col">
@@ -250,7 +228,7 @@ function Inspect({
 							options={expandedViewOptions}
 							spaceAggregationSeriesMap={spaceAggregationSeriesMap}
 							step={inspectionStep}
-							metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+							metricInspectionOptions={metricInspectionOptions}
 							timeAggregatedSeriesMap={timeAggregatedSeriesMap}
 						/>
 					)}
@@ -266,21 +244,17 @@ function Inspect({
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,
 		resetInspection,
-		appliedMetricName,
+		metricName,
 		selectedMetricUnit,
 		selectedMetricType,
 		spaceAggregationSeriesMap,
 		inspectionStep,
 		showExpandedView,
 		popoverOptions,
-		metricInspectionOptions.appliedOptions,
-		metricInspectionOptions.currentOptions,
-		currentMetricName,
-		setCurrentMetricName,
-		setAppliedMetricName,
+		metricInspectionOptions,
 		spaceAggregationLabels,
 		handleDispatchMetricInspectionOptions,
-		currentQueryData,
+		searchQuery,
 		expandedViewOptions,
 		timeAggregatedSeriesMap,
 	]);

frontend/src/container/MetricsExplorer/Inspect/MetricFilters.tsx

@@ -1,57 +0,0 @@
-import { useCallback } from 'react';
-import { Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
-import { MetricFiltersProps } from './types';
-
-function MetricFilters({
-	dispatchMetricInspectionOptions,
-	currentQuery,
-	setCurrentQuery,
-}: MetricFiltersProps): JSX.Element {
-	const handleOnChange = useCallback(
-		(expression: string): void => {
-			logEvent(MetricsExplorerEvents.FilterApplied, {
-				[MetricsExplorerEventKeys.Modal]: 'inspect',
-			});
-			const tagFilter = {
-				items: convertExpressionToFilters(expression),
-				op: 'AND',
-			};
-			setCurrentQuery({
-				...currentQuery,
-				filters: tagFilter,
-				filter: {
-					...currentQuery.filter,
-					expression,
-				},
-				expression,
-			});
-			dispatchMetricInspectionOptions({
-				type: 'SET_FILTERS',
-				payload: tagFilter,
-			});
-		},
-		[currentQuery, dispatchMetricInspectionOptions, setCurrentQuery],
-	);
-
-	return (
-		<div
-			data-testid="metric-filters"
-			className="inspect-metrics-input-group metric-filters"
-		>
-			<Typography.Text>Where</Typography.Text>
-			<QuerySearch
-				queryData={currentQuery}
-				onChange={handleOnChange}
-				dataSource={DataSource.METRICS}
-			/>
-		</div>
-	);
-}
-
-export default MetricFilters;

frontend/src/container/MetricsExplorer/Inspect/MetricNameSearch.tsx

@@ -1,40 +0,0 @@
-import { useState } from 'react';
-import { Typography } from 'antd';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import { AggregatorFilter } from 'container/QueryBuilder/filters';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { MetricNameSearchProps } from './types';
-
-function MetricNameSearch({
-	currentMetricName,
-	setCurrentMetricName,
-}: MetricNameSearchProps): JSX.Element {
-	const [searchText, setSearchText] = useState(currentMetricName);
-
-	const handleSetMetricName = (value: BaseAutocompleteData): void => {
-		setCurrentMetricName(value.key);
-	};
-
-	const handleChange = (value: BaseAutocompleteData): void => {
-		setSearchText(value.key);
-	};
-
-	return (
-		<div
-			data-testid="metric-name-search"
-			className="inspect-metrics-input-group metric-name-search"
-		>
-			<Typography.Text>From</Typography.Text>
-			<AggregatorFilter
-				defaultValue={searchText ?? ''}
-				query={initialQueriesMap[DataSource.METRICS].builder.queryData[0]}
-				onSelect={handleSetMetricName}
-				onChange={handleChange}
-			/>
-		</div>
-	);
-}
-
-export default MetricNameSearch;

frontend/src/container/MetricsExplorer/Inspect/MetricSpaceAggregation.tsx

@@ -1,73 +0,0 @@
-import { Typography } from 'antd';
-import { Select } from 'antd';
-import classNames from 'classnames';
-
-import { SPACE_AGGREGATION_OPTIONS } from './constants';
-import { InspectionStep } from './types';
-import { MetricSpaceAggregationProps } from './types';
-
-function MetricSpaceAggregation({
-	spaceAggregationLabels,
-	currentMetricInspectionOptions,
-	dispatchMetricInspectionOptions,
-	inspectionStep,
-}: MetricSpaceAggregationProps): JSX.Element {
-	return (
-		<div
-			data-testid="metric-space-aggregation"
-			className="metric-space-aggregation"
-		>
-			<div
-				className={classNames('metric-space-aggregation-header', {
-					'selected-step': inspectionStep === InspectionStep.SPACE_AGGREGATION,
-				})}
-			>
-				<Typography.Text>AGGREGATE BY LABELS</Typography.Text>
-			</div>
-			<div className="metric-space-aggregation-content">
-				<div className="metric-space-aggregation-content-left">
-					<Select
-						value={currentMetricInspectionOptions.spaceAggregationOption}
-						placeholder="Select option"
-						onChange={(value): void => {
-							dispatchMetricInspectionOptions({
-								type: 'SET_SPACE_AGGREGATION_OPTION',
-								payload: value,
-							});
-						}}
-						style={{ width: 130 }}
-						disabled={inspectionStep === InspectionStep.TIME_AGGREGATION}
-					>
-						{/* eslint-disable-next-line sonarjs/no-identical-functions */}
-						{Object.entries(SPACE_AGGREGATION_OPTIONS).map(([key, value]) => (
-							<Select.Option key={key} value={key}>
-								{value}
-							</Select.Option>
-						))}
-					</Select>
-				</div>
-				<Select
-					mode="multiple"
-					style={{ width: '100%' }}
-					placeholder="Search for attributes..."
-					value={currentMetricInspectionOptions.spaceAggregationLabels}
-					onChange={(value): void => {
-						dispatchMetricInspectionOptions({
-							type: 'SET_SPACE_AGGREGATION_LABELS',
-							payload: value,
-						});
-					}}
-					disabled={inspectionStep === InspectionStep.TIME_AGGREGATION}
-				>
-					{spaceAggregationLabels.map((label) => (
-						<Select.Option key={label} value={label}>
-							{label}
-						</Select.Option>
-					))}
-				</Select>
-			</div>
-		</div>
-	);
-}
-
-export default MetricSpaceAggregation;

frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx

@@ -1,80 +0,0 @@
-import { Input, Typography } from 'antd';
-import { Select } from 'antd';
-import classNames from 'classnames';
-
-import { TIME_AGGREGATION_OPTIONS } from './constants';
-import { InspectionStep } from './types';
-import { MetricTimeAggregationProps } from './types';
-import { getDefaultTimeAggregationInterval } from './utils';
-
-function MetricTimeAggregation({
-	currentMetricInspectionOptions,
-	dispatchMetricInspectionOptions,
-	inspectionStep,
-	inspectMetricsTimeSeries,
-}: MetricTimeAggregationProps): JSX.Element {
-	return (
-		<div
-			data-testid="metric-time-aggregation"
-			className="metric-time-aggregation"
-		>
-			<div
-				className={classNames('metric-time-aggregation-header', {
-					'selected-step': inspectionStep === InspectionStep.TIME_AGGREGATION,
-				})}
-			>
-				<Typography.Text>AGGREGATE BY TIME</Typography.Text>
-			</div>
-			<div className="metric-time-aggregation-content">
-				<div className="inspect-metrics-input-group">
-					<Typography.Text>Align with</Typography.Text>
-					<Select
-						value={currentMetricInspectionOptions.timeAggregationOption}
-						onChange={(value): void => {
-							dispatchMetricInspectionOptions({
-								type: 'SET_TIME_AGGREGATION_OPTION',
-								payload: value,
-							});
-							// set the time aggregation interval to the default value if it is not set
-							if (!currentMetricInspectionOptions.timeAggregationInterval) {
-								dispatchMetricInspectionOptions({
-									type: 'SET_TIME_AGGREGATION_INTERVAL',
-									payload: getDefaultTimeAggregationInterval(
-										inspectMetricsTimeSeries[0],
-									),
-								});
-							}
-						}}
-						style={{ width: 130 }}
-						placeholder="Select option"
-					>
-						{Object.entries(TIME_AGGREGATION_OPTIONS).map(([key, value]) => (
-							<Select.Option key={key} value={key}>
-								{value}
-							</Select.Option>
-						))}
-					</Select>
-				</div>
-				<div className="inspect-metrics-input-group">
-					<Typography.Text>aggregated every</Typography.Text>
-					<Input
-						type="number"
-						className="no-arrows-input"
-						value={currentMetricInspectionOptions.timeAggregationInterval}
-						placeholder="Select interval..."
-						suffix="seconds"
-						onChange={(e): void => {
-							dispatchMetricInspectionOptions({
-								type: 'SET_TIME_AGGREGATION_INTERVAL',
-								payload: parseInt(e.target.value, 10),
-							});
-						}}
-						onWheel={(e): void => (e.target as HTMLInputElement).blur()}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default MetricTimeAggregation;

frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx

@@ -1,33 +1,25 @@
-import { useCallback } from 'react';
 import { Button, Card } from 'antd';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { Atom } from 'lucide-react';
 
-import MetricFilters from './MetricFilters';
-import MetricNameSearch from './MetricNameSearch';
-import MetricSpaceAggregation from './MetricSpaceAggregation';
-import MetricTimeAggregation from './MetricTimeAggregation';
 import { QueryBuilderProps } from './types';
+import {
+	MetricFilters,
+	MetricNameSearch,
+	MetricSpaceAggregation,
+	MetricTimeAggregation,
+} from './utils';
 
 function QueryBuilder({
-	currentMetricName,
-	setCurrentMetricName,
-	setAppliedMetricName,
+	metricName,
+	setMetricName,
 	spaceAggregationLabels,
-	currentMetricInspectionOptions,
+	metricInspectionOptions,
 	dispatchMetricInspectionOptions,
 	inspectionStep,
 	inspectMetricsTimeSeries,
-	currentQuery,
-	setCurrentQuery,
+	searchQuery,
+	metricType,
 }: QueryBuilderProps): JSX.Element {
-	const applyInspectionOptions = useCallback(() => {
-		setAppliedMetricName(currentMetricName ?? '');
-		dispatchMetricInspectionOptions({
-			type: 'APPLY_METRIC_INSPECTION_OPTIONS',
-		});
-	}, [currentMetricName, setAppliedMetricName, dispatchMetricInspectionOptions]);
-
 	return (
 		<div className="inspect-metrics-query-builder">
 			<div className="inspect-metrics-query-builder-header">
@@ -39,28 +31,25 @@ function QueryBuilder({
 				>
 					Query Builder
 				</Button>
-				<RunQueryBtn onStageRunQuery={applyInspectionOptions} />
 			</div>
 			<Card className="inspect-metrics-query-builder-content">
-				<MetricNameSearch
-					currentMetricName={currentMetricName}
-					setCurrentMetricName={setCurrentMetricName}
-				/>
+				<MetricNameSearch metricName={metricName} setMetricName={setMetricName} />
 				<MetricFilters
 					dispatchMetricInspectionOptions={dispatchMetricInspectionOptions}
-					currentQuery={currentQuery}
-					setCurrentQuery={setCurrentQuery}
+					searchQuery={searchQuery}
+					metricName={metricName}
+					metricType={metricType || null}
 				/>
 				<MetricTimeAggregation
 					inspectionStep={inspectionStep}
-					currentMetricInspectionOptions={currentMetricInspectionOptions}
+					metricInspectionOptions={metricInspectionOptions}
 					dispatchMetricInspectionOptions={dispatchMetricInspectionOptions}
 					inspectMetricsTimeSeries={inspectMetricsTimeSeries}
 				/>
 				<MetricSpaceAggregation
 					inspectionStep={inspectionStep}
 					spaceAggregationLabels={spaceAggregationLabels}
-					currentMetricInspectionOptions={currentMetricInspectionOptions}
+					metricInspectionOptions={metricInspectionOptions}
 					dispatchMetricInspectionOptions={dispatchMetricInspectionOptions}
 				/>
 			</Card>

frontend/src/container/MetricsExplorer/Inspect/TableView.tsx

@@ -11,13 +11,13 @@ function TableView({
 	setShowExpandedView,
 	setExpandedViewOptions,
 	isInspectMetricsRefetching,
-	metricInspectionAppliedOptions,
+	metricInspectionOptions,
 }: TableViewProps): JSX.Element {
 	const isSpaceAggregatedWithoutLabel = useMemo(
 		() =>
-			!!metricInspectionAppliedOptions.spaceAggregationOption &&
-			metricInspectionAppliedOptions.spaceAggregationLabels.length === 0,
-		[metricInspectionAppliedOptions],
+			!!metricInspectionOptions.spaceAggregationOption &&
+			metricInspectionOptions.spaceAggregationLabels.length === 0,
+		[metricInspectionOptions],
 	);
 	const labelKeys = useMemo(() => {
 		if (isSpaceAggregatedWithoutLabel) {

frontend/src/container/MetricsExplorer/Inspect/TimeSeriesLabel.tsx

@@ -1,23 +0,0 @@
-import { Typography } from 'antd';
-
-import { TimeSeriesLabelProps } from './types';
-
-function TimeSeriesLabel({
-	timeSeries,
-	textColor,
-}: TimeSeriesLabelProps): JSX.Element {
-	return (
-		<>
-			{Object.entries(timeSeries?.labels ?? {}).map(([key, value]) => (
-				<span key={key}>
-					<Typography.Text style={{ color: textColor, fontWeight: 600 }}>
-						{key}
-					</Typography.Text>
-					: {value}{' '}
-				</span>
-			))}
-		</>
-	);
-}
-
-export default TimeSeriesLabel;

frontend/src/container/MetricsExplorer/Inspect/__tests__/ExpandedView.test.tsx

@@ -62,7 +62,7 @@ describe('ExpandedView', () => {
 		],
 	]);
 
-	const mockMetricInspectionAppliedOptions: MetricInspectionOptions = {
+	const mockMetricInspectionOptions: MetricInspectionOptions = {
 		timeAggregationOption: TimeAggregationOptions.MAX,
 		timeAggregationInterval: 60,
 		spaceAggregationOption: SpaceAggregationOptions.MAX_BY,
@@ -79,7 +79,7 @@ describe('ExpandedView', () => {
 				options={mockOptions}
 				spaceAggregationSeriesMap={mockSpaceAggregationSeriesMap}
 				step={InspectionStep.TIME_AGGREGATION}
-				metricInspectionAppliedOptions={mockMetricInspectionAppliedOptions}
+				metricInspectionOptions={mockMetricInspectionOptions}
 				timeAggregatedSeriesMap={mockTimeAggregatedSeriesMap}
 			/>,
 		);
@@ -96,8 +96,8 @@ describe('ExpandedView', () => {
 				options={mockOptions}
 				spaceAggregationSeriesMap={mockSpaceAggregationSeriesMap}
 				step={InspectionStep.SPACE_AGGREGATION}
-				metricInspectionAppliedOptions={{
-					...mockMetricInspectionAppliedOptions,
+				metricInspectionOptions={{
+					...mockMetricInspectionOptions,
 					timeAggregationInterval: TIME_AGGREGATION_INTERVAL,
 				}}
 				timeAggregatedSeriesMap={mockTimeAggregatedSeriesMap}
@@ -112,7 +112,7 @@ describe('ExpandedView', () => {
 			screen.getByText(
 				`42.123 is the ${
 					TIME_AGGREGATION_OPTIONS[
-						mockMetricInspectionAppliedOptions.timeAggregationOption as TimeAggregationOptions
+						mockMetricInspectionOptions.timeAggregationOption as TimeAggregationOptions
 					]
 				} of`,
 			),
@@ -127,7 +127,7 @@ describe('ExpandedView', () => {
 				options={mockOptions}
 				spaceAggregationSeriesMap={mockSpaceAggregationSeriesMap}
 				step={InspectionStep.COMPLETED}
-				metricInspectionAppliedOptions={mockMetricInspectionAppliedOptions}
+				metricInspectionOptions={mockMetricInspectionOptions}
 				timeAggregatedSeriesMap={mockTimeAggregatedSeriesMap}
 			/>,
 		);
@@ -139,7 +139,7 @@ describe('ExpandedView', () => {
 			screen.getByText(
 				`42.123 is the ${
 					SPACE_AGGREGATION_OPTIONS_FOR_EXPANDED_VIEW[
-						mockMetricInspectionAppliedOptions.spaceAggregationOption as SpaceAggregationOptions
+						mockMetricInspectionOptions.spaceAggregationOption as SpaceAggregationOptions
 					]
 				} of`,
 			),
@@ -153,7 +153,7 @@ describe('ExpandedView', () => {
 				options={mockOptions}
 				spaceAggregationSeriesMap={mockSpaceAggregationSeriesMap}
 				step={InspectionStep.TIME_AGGREGATION}
-				metricInspectionAppliedOptions={mockMetricInspectionAppliedOptions}
+				metricInspectionOptions={mockMetricInspectionOptions}
 				timeAggregatedSeriesMap={mockTimeAggregatedSeriesMap}
 			/>,
 		);

frontend/src/container/MetricsExplorer/Inspect/__tests__/GraphView.test.tsx

@@ -54,7 +54,7 @@ describe('GraphView', () => {
 		setExpandedViewOptions: jest.fn(),
 		resetInspection: jest.fn(),
 		showExpandedView: false,
-		metricInspectionAppliedOptions: {
+		metricInspectionOptions: {
 			timeAggregationInterval: 60,
 			spaceAggregationOption: SpaceAggregationOptions.MAX_BY,
 			spaceAggregationLabels: ['host_name'],

frontend/src/container/MetricsExplorer/Inspect/__tests__/QueryBuilder.test.tsx

@@ -2,7 +2,6 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import * as appContextHooks from 'providers/App/App';
 import store from 'store';
@@ -23,27 +22,6 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('container/QueryBuilder/filters', () => ({
-	AggregatorFilter: ({ onSelect, onChange, defaultValue }: any): JSX.Element => (
-		<div data-testid="mock-aggregator-filter">
-			<input
-				data-testid="metric-name-input"
-				defaultValue={defaultValue}
-				onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
-					onChange({ key: e.target.value })
-				}
-			/>
-			<button
-				type="button"
-				data-testid="select-metric-button"
-				onClick={(): void => onSelect({ key: 'test_metric_2' })}
-			>
-				Select Metric
-			</button>
-		</div>
-	),
-}));
-
 jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 	user: {
 		role: 'admin',
@@ -70,16 +48,12 @@ jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 
 const queryClient = new QueryClient();
 
-const mockSetCurrentMetricName = jest.fn();
-const mockSetAppliedMetricName = jest.fn();
-
 describe('QueryBuilder', () => {
 	const defaultProps = {
-		currentMetricName: 'test_metric',
-		setCurrentMetricName: mockSetCurrentMetricName,
-		setAppliedMetricName: mockSetAppliedMetricName,
+		metricName: 'test_metric',
+		setMetricName: jest.fn(),
 		spaceAggregationLabels: ['label1', 'label2'],
-		currentMetricInspectionOptions: {
+		metricInspectionOptions: {
 			timeAggregationInterval: 60,
 			timeAggregationOption: TimeAggregationOptions.AVG,
 			spaceAggregationLabels: [],
@@ -93,20 +67,19 @@ describe('QueryBuilder', () => {
 		metricType: MetricType.SUM,
 		inspectionStep: InspectionStep.TIME_AGGREGATION,
 		inspectMetricsTimeSeries: [],
-		currentQuery: {
+		searchQuery: {
 			filters: {
 				items: [],
 				op: 'and',
 			},
 		} as any,
-		setCurrentQuery: jest.fn(),
 	};
 
 	beforeEach(() => {
 		jest.clearAllMocks();
 	});
 
-	it('renders query builder with all components', () => {
+	it('renders query builder header', () => {
 		render(
 			<QueryClientProvider client={queryClient}>
 				<Provider store={store}>
@@ -115,53 +88,49 @@ describe('QueryBuilder', () => {
 			</QueryClientProvider>,
 		);
 		expect(screen.getByText('Query Builder')).toBeInTheDocument();
+	});
+
+	it('renders metric name search component', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<QueryBuilder {...defaultProps} />
+				</Provider>
+			</QueryClientProvider>,
+		);
 		expect(screen.getByTestId('metric-name-search')).toBeInTheDocument();
+	});
+
+	it('renders metric filters component', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<QueryBuilder {...defaultProps} />
+				</Provider>
+			</QueryClientProvider>,
+		);
 		expect(screen.getByTestId('metric-filters')).toBeInTheDocument();
+	});
+
+	it('renders time aggregation component', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<QueryBuilder {...defaultProps} />
+				</Provider>
+			</QueryClientProvider>,
+		);
 		expect(screen.getByTestId('metric-time-aggregation')).toBeInTheDocument();
+	});
+
+	it('renders space aggregation component', () => {
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<QueryBuilder {...defaultProps} />
+				</Provider>
+			</QueryClientProvider>,
+		);
 		expect(screen.getByTestId('metric-space-aggregation')).toBeInTheDocument();
 	});
-
-	it('should call setCurrentMetricName when metric name is selected', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<QueryClientProvider client={queryClient}>
-				<Provider store={store}>
-					<QueryBuilder {...defaultProps} />
-				</Provider>
-			</QueryClientProvider>,
-		);
-
-		const metricNameSearch = screen.getByTestId('metric-name-search');
-		expect(metricNameSearch).toBeInTheDocument();
-
-		expect(screen.getByText('From')).toBeInTheDocument();
-
-		const selectButton = screen.getByTestId('select-metric-button');
-		await user.click(selectButton);
-
-		expect(mockSetCurrentMetricName).toHaveBeenCalledWith('test_metric_2');
-	});
-
-	it('should call setAppliedMetricName and apply inspection options when query is applied', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<QueryClientProvider client={queryClient}>
-				<Provider store={store}>
-					<QueryBuilder {...defaultProps} />
-				</Provider>
-			</QueryClientProvider>,
-		);
-
-		const applyQueryButton = screen.getByText('Run Query');
-		await user.click(applyQueryButton);
-
-		expect(mockSetCurrentMetricName).toHaveBeenCalledTimes(0);
-		expect(mockSetAppliedMetricName).toHaveBeenCalledWith('test_metric');
-
-		expect(defaultProps.dispatchMetricInspectionOptions).toHaveBeenCalledWith({
-			type: 'APPLY_METRIC_INSPECTION_OPTIONS',
-		});
-	});
 });

frontend/src/container/MetricsExplorer/Inspect/__tests__/TableView.test.tsx

@@ -49,7 +49,7 @@ describe('TableView', () => {
 		inspectMetricsTimeSeries: mockTimeSeries,
 		setShowExpandedView: jest.fn(),
 		setExpandedViewOptions: jest.fn(),
-		metricInspectionAppliedOptions: {
+		metricInspectionOptions: {
 			timeAggregationInterval: 60,
 			timeAggregationOption: TimeAggregationOptions.MAX,
 			spaceAggregationOption: SpaceAggregationOptions.MAX_BY,

frontend/src/container/MetricsExplorer/Inspect/constants.ts

@@ -11,7 +11,7 @@ import {
 } from 'lucide-react';
 
 import {
-	MetricInspectionState,
+	MetricInspectionOptions,
 	SpaceAggregationOptions,
 	TimeAggregationOptions,
 } from './types';
@@ -71,26 +71,14 @@ export const SPACE_AGGREGATION_OPTIONS_FOR_EXPANDED_VIEW: Record<
 	[SpaceAggregationOptions.AVG_BY]: 'Avg',
 };
 
-export const INITIAL_INSPECT_METRICS_OPTIONS: MetricInspectionState = {
-	currentOptions: {
-		timeAggregationOption: undefined,
-		timeAggregationInterval: undefined,
-		spaceAggregationOption: undefined,
-		spaceAggregationLabels: [],
-		filters: {
-			items: [],
-			op: 'AND',
-		},
-	},
-	appliedOptions: {
-		timeAggregationOption: undefined,
-		timeAggregationInterval: undefined,
-		spaceAggregationOption: undefined,
-		spaceAggregationLabels: [],
-		filters: {
-			items: [],
-			op: 'AND',
-		},
+export const INITIAL_INSPECT_METRICS_OPTIONS: MetricInspectionOptions = {
+	timeAggregationOption: undefined,
+	timeAggregationInterval: undefined,
+	spaceAggregationOption: undefined,
+	spaceAggregationLabels: [],
+	filters: {
+		items: [],
+		op: 'AND',
 	},
 };
 

frontend/src/container/MetricsExplorer/Inspect/types.ts

@@ -7,7 +7,7 @@ import {
 import { AlignedData } from 'uplot';
 
 export type InspectProps = {
-	metricName: string;
+	metricName: string | null;
 	isOpen: boolean;
 	onClose: () => void;
 };
@@ -19,7 +19,7 @@ export interface UseInspectMetricsReturnData {
 	isInspectMetricsError: boolean;
 	formattedInspectMetricsTimeSeries: AlignedData;
 	spaceAggregationLabels: string[];
-	metricInspectionOptions: MetricInspectionState;
+	metricInspectionOptions: MetricInspectionOptions;
 	dispatchMetricInspectionOptions: (action: MetricInspectionAction) => void;
 	inspectionStep: InspectionStep;
 	isInspectMetricsRefetching: boolean;
@@ -43,36 +43,36 @@ export interface GraphViewProps {
 	showExpandedView: boolean;
 	setShowExpandedView: (showExpandedView: boolean) => void;
 	setExpandedViewOptions: (options: GraphPopoverOptions | null) => void;
-	metricInspectionAppliedOptions: MetricInspectionOptions;
+	metricInspectionOptions: MetricInspectionOptions;
 	isInspectMetricsRefetching: boolean;
 }
 
 export interface QueryBuilderProps {
-	currentMetricName: string | null;
-	setCurrentMetricName: (metricName: string) => void;
-	setAppliedMetricName: (metricName: string) => void;
+	metricName: string | null;
+	setMetricName: (metricName: string) => void;
+	metricType: MetricType | undefined;
 	spaceAggregationLabels: string[];
-	currentMetricInspectionOptions: MetricInspectionOptions;
+	metricInspectionOptions: MetricInspectionOptions;
 	dispatchMetricInspectionOptions: (action: MetricInspectionAction) => void;
 	inspectionStep: InspectionStep;
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
-	currentQuery: IBuilderQuery;
-	setCurrentQuery: (query: IBuilderQuery) => void;
+	searchQuery: IBuilderQuery;
 }
 
 export interface MetricNameSearchProps {
-	currentMetricName: string | null;
-	setCurrentMetricName: (metricName: string) => void;
+	metricName: string | null;
+	setMetricName: (metricName: string) => void;
 }
 
 export interface MetricFiltersProps {
+	searchQuery: IBuilderQuery;
 	dispatchMetricInspectionOptions: (action: MetricInspectionAction) => void;
-	currentQuery: IBuilderQuery;
-	setCurrentQuery: (query: IBuilderQuery) => void;
+	metricName: string | null;
+	metricType: MetricType | null;
 }
 
 export interface MetricTimeAggregationProps {
-	currentMetricInspectionOptions: MetricInspectionOptions;
+	metricInspectionOptions: MetricInspectionOptions;
 	dispatchMetricInspectionOptions: (action: MetricInspectionAction) => void;
 	inspectionStep: InspectionStep;
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
@@ -80,7 +80,7 @@ export interface MetricTimeAggregationProps {
 
 export interface MetricSpaceAggregationProps {
 	spaceAggregationLabels: string[];
-	currentMetricInspectionOptions: MetricInspectionOptions;
+	metricInspectionOptions: MetricInspectionOptions;
 	dispatchMetricInspectionOptions: (action: MetricInspectionAction) => void;
 	inspectionStep: InspectionStep;
 }
@@ -109,19 +109,13 @@ export interface MetricInspectionOptions {
 	filters: TagFilter;
 }
 
-export interface MetricInspectionState {
-	currentOptions: MetricInspectionOptions;
-	appliedOptions: MetricInspectionOptions;
-}
-
 export type MetricInspectionAction =
 	| { type: 'SET_TIME_AGGREGATION_OPTION'; payload: TimeAggregationOptions }
 	| { type: 'SET_TIME_AGGREGATION_INTERVAL'; payload: number }
 	| { type: 'SET_SPACE_AGGREGATION_OPTION'; payload: SpaceAggregationOptions }
 	| { type: 'SET_SPACE_AGGREGATION_LABELS'; payload: string[] }
 	| { type: 'SET_FILTERS'; payload: TagFilter }
-	| { type: 'RESET_INSPECTION' }
-	| { type: 'APPLY_METRIC_INSPECTION_OPTIONS' };
+	| { type: 'RESET_INSPECTION' };
 
 export enum InspectionStep {
 	TIME_AGGREGATION = 1,
@@ -162,7 +156,7 @@ export interface ExpandedViewProps {
 	options: GraphPopoverOptions | null;
 	spaceAggregationSeriesMap: Map<string, InspectMetricsSeries[]>;
 	step: InspectionStep;
-	metricInspectionAppliedOptions: MetricInspectionOptions;
+	metricInspectionOptions: MetricInspectionOptions;
 	timeAggregatedSeriesMap: Map<number, GraphPopoverData[]>;
 }
 
@@ -171,7 +165,7 @@ export interface TableViewProps {
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
 	setShowExpandedView: (showExpandedView: boolean) => void;
 	setExpandedViewOptions: (options: GraphPopoverOptions | null) => void;
-	metricInspectionAppliedOptions: MetricInspectionOptions;
+	metricInspectionOptions: MetricInspectionOptions;
 	isInspectMetricsRefetching: boolean;
 }
 
@@ -180,8 +174,3 @@ export interface TableViewDataItem {
 	values: JSX.Element;
 	key: number;
 }
-
-export interface TimeSeriesLabelProps {
-	timeSeries: InspectMetricsSeries | undefined;
-	textColor: string | undefined;
-}

frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts

@@ -10,7 +10,7 @@ import {
 	GraphPopoverData,
 	InspectionStep,
 	MetricInspectionAction,
-	MetricInspectionState,
+	MetricInspectionOptions,
 	UseInspectMetricsReturnData,
 } from './types';
 import {
@@ -20,62 +20,37 @@ import {
 } from './utils';
 
 const metricInspectionReducer = (
-	state: MetricInspectionState,
+	state: MetricInspectionOptions,
 	action: MetricInspectionAction,
-): MetricInspectionState => {
+): MetricInspectionOptions => {
 	switch (action.type) {
 		case 'SET_TIME_AGGREGATION_OPTION':
 			return {
 				...state,
-				currentOptions: {
-					...state.currentOptions,
-					timeAggregationOption: action.payload,
-				},
+				timeAggregationOption: action.payload,
 			};
 		case 'SET_TIME_AGGREGATION_INTERVAL':
 			return {
 				...state,
-				currentOptions: {
-					...state.currentOptions,
-					timeAggregationInterval: action.payload,
-				},
+				timeAggregationInterval: action.payload,
 			};
 		case 'SET_SPACE_AGGREGATION_OPTION':
 			return {
 				...state,
-				currentOptions: {
-					...state.currentOptions,
-					spaceAggregationOption: action.payload,
-				},
+				spaceAggregationOption: action.payload,
 			};
 		case 'SET_SPACE_AGGREGATION_LABELS':
 			return {
 				...state,
-				currentOptions: {
-					...state.currentOptions,
-					spaceAggregationLabels: action.payload,
-				},
+				spaceAggregationLabels: action.payload,
 			};
 		case 'SET_FILTERS':
 			return {
 				...state,
-				currentOptions: {
-					...state.currentOptions,
-					filters: action.payload,
-				},
-			};
-		case 'APPLY_METRIC_INSPECTION_OPTIONS':
-			return {
-				...state,
-				appliedOptions: {
-					...state.appliedOptions,
-					...state.currentOptions,
-				},
+				filters: action.payload,
 			};
 		case 'RESET_INSPECTION':
-			return {
-				...INITIAL_INSPECT_METRICS_OPTIONS,
-			};
+			return { ...INITIAL_INSPECT_METRICS_OPTIONS };
 		default:
 			return state;
 	}
@@ -109,7 +84,7 @@ export function useInspectMetrics(
 			metricName: metricName ?? '',
 			start,
 			end,
-			filters: metricInspectionOptions.appliedOptions.filters,
+			filters: metricInspectionOptions.filters,
 		},
 		{
 			enabled: !!metricName,
@@ -142,26 +117,13 @@ export function useInspectMetrics(
 	);
 
 	// Evaluate inspection step
-	const currentInspectionStep = useMemo(() => {
-		if (metricInspectionOptions.currentOptions.spaceAggregationOption) {
+	const inspectionStep = useMemo(() => {
+		if (metricInspectionOptions.spaceAggregationOption) {
 			return InspectionStep.COMPLETED;
 		}
 		if (
-			metricInspectionOptions.currentOptions.timeAggregationOption &&
-			metricInspectionOptions.currentOptions.timeAggregationInterval
-		) {
-			return InspectionStep.SPACE_AGGREGATION;
-		}
-		return InspectionStep.TIME_AGGREGATION;
-	}, [metricInspectionOptions]);
-
-	const appliedInspectionStep = useMemo(() => {
-		if (metricInspectionOptions.appliedOptions.spaceAggregationOption) {
-			return InspectionStep.COMPLETED;
-		}
-		if (
-			metricInspectionOptions.appliedOptions.timeAggregationOption &&
-			metricInspectionOptions.appliedOptions.timeAggregationInterval
+			metricInspectionOptions.timeAggregationOption &&
+			metricInspectionOptions.timeAggregationInterval
 		) {
 			return InspectionStep.SPACE_AGGREGATION;
 		}
@@ -187,26 +149,23 @@ export function useInspectMetrics(
 
 		// Apply time aggregation once required options are set
 		if (
-			appliedInspectionStep >= InspectionStep.SPACE_AGGREGATION &&
-			metricInspectionOptions.appliedOptions.timeAggregationOption &&
-			metricInspectionOptions.appliedOptions.timeAggregationInterval
+			inspectionStep >= InspectionStep.SPACE_AGGREGATION &&
+			metricInspectionOptions.timeAggregationOption &&
+			metricInspectionOptions.timeAggregationInterval
 		) {
 			const {
 				timeAggregatedSeries,
 				timeAggregatedSeriesMap,
-			} = applyTimeAggregation(
-				inspectMetricsTimeSeries,
-				metricInspectionOptions.appliedOptions,
-			);
+			} = applyTimeAggregation(inspectMetricsTimeSeries, metricInspectionOptions);
 			timeSeries = timeAggregatedSeries;
 			setTimeAggregatedSeriesMap(timeAggregatedSeriesMap);
 			setAggregatedTimeSeries(timeSeries);
 		}
 		// Apply space aggregation
-		if (appliedInspectionStep === InspectionStep.COMPLETED) {
+		if (inspectionStep === InspectionStep.COMPLETED) {
 			const { aggregatedSeries, spaceAggregatedSeriesMap } = applySpaceAggregation(
 				timeSeries,
-				metricInspectionOptions.appliedOptions,
+				metricInspectionOptions,
 			);
 			timeSeries = aggregatedSeries;
 			setSpaceAggregatedSeriesMap(spaceAggregatedSeriesMap);
@@ -227,7 +186,7 @@ export function useInspectMetrics(
 
 		const rawData = [timestamps, ...timeseriesArray];
 		return rawData.map((series) => new Float64Array(series));
-	}, [inspectMetricsTimeSeries, appliedInspectionStep, metricInspectionOptions]);
+	}, [inspectMetricsTimeSeries, inspectionStep, metricInspectionOptions]);
 
 	const spaceAggregationLabels = useMemo(() => {
 		const labels = new Set<string>();
@@ -257,7 +216,7 @@ export function useInspectMetrics(
 		spaceAggregationLabels,
 		metricInspectionOptions,
 		dispatchMetricInspectionOptions,
-		inspectionStep: currentInspectionStep,
+		inspectionStep,
 		isInspectMetricsRefetching,
 		spaceAggregatedSeriesMap,
 		aggregatedTimeSeries,

frontend/src/container/MetricsExplorer/Inspect/utils.tsx

@@ -1,12 +1,36 @@
 /* eslint-disable no-nested-ternary */
+import { useMemo, useState } from 'react';
+import { Card, Input, Select, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { InspectMetricsSeries } from 'api/metricsExplorer/getInspectMetricsDetails';
+import classNames from 'classnames';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { AggregatorFilter } from 'container/QueryBuilder/filters';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { HardHat } from 'lucide-react';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
 
+import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
+import {
+	SPACE_AGGREGATION_OPTIONS,
+	TIME_AGGREGATION_OPTIONS,
+} from './constants';
 import {
 	GraphPopoverData,
 	GraphPopoverOptions,
+	InspectionStep,
+	MetricFiltersProps,
 	MetricInspectionOptions,
+	MetricNameSearchProps,
+	MetricSpaceAggregationProps,
+	MetricTimeAggregationProps,
 	SpaceAggregationOptions,
 	TimeAggregationOptions,
 } from './types';
@@ -48,6 +72,220 @@ export function getDefaultTimeAggregationInterval(
 	return Math.max(60, reportingInterval);
 }
 
+export function MetricNameSearch({
+	metricName,
+	setMetricName,
+}: MetricNameSearchProps): JSX.Element {
+	const [searchText, setSearchText] = useState(metricName);
+
+	const handleSetMetricName = (value: BaseAutocompleteData): void => {
+		setMetricName(value.key);
+	};
+
+	const handleChange = (value: BaseAutocompleteData): void => {
+		setSearchText(value.key);
+	};
+
+	return (
+		<div
+			data-testid="metric-name-search"
+			className="inspect-metrics-input-group metric-name-search"
+		>
+			<Typography.Text>From</Typography.Text>
+			<AggregatorFilter
+				defaultValue={searchText ?? ''}
+				query={initialQueriesMap[DataSource.METRICS].builder.queryData[0]}
+				onSelect={handleSetMetricName}
+				onChange={handleChange}
+			/>
+		</div>
+	);
+}
+
+export function MetricFilters({
+	dispatchMetricInspectionOptions,
+	searchQuery,
+	metricName,
+	metricType,
+}: MetricFiltersProps): JSX.Element {
+	const { handleChangeQueryData } = useQueryOperations({
+		index: 0,
+		query: searchQuery,
+		entityVersion: '',
+	});
+
+	const aggregateAttribute = useMemo(
+		() => ({
+			key: metricName ?? '',
+			dataType: DataTypes.String,
+			type: metricType,
+			id: `${metricName}--${DataTypes.String}--${metricType}--true`,
+		}),
+		[metricName, metricType],
+	);
+
+	return (
+		<div
+			data-testid="metric-filters"
+			className="inspect-metrics-input-group metric-filters"
+		>
+			<Typography.Text>Where</Typography.Text>
+			<QueryBuilderSearch
+				query={{
+					...searchQuery,
+					aggregateAttribute,
+				}}
+				onChange={(value): void => {
+					handleChangeQueryData('filters', value);
+					logEvent(MetricsExplorerEvents.FilterApplied, {
+						[MetricsExplorerEventKeys.Modal]: 'inspect',
+					});
+					dispatchMetricInspectionOptions({
+						type: 'SET_FILTERS',
+						payload: value,
+					});
+				}}
+				suffixIcon={<HardHat size={16} />}
+				disableNavigationShortcuts
+			/>
+		</div>
+	);
+}
+
+export function MetricTimeAggregation({
+	metricInspectionOptions,
+	dispatchMetricInspectionOptions,
+	inspectionStep,
+	inspectMetricsTimeSeries,
+}: MetricTimeAggregationProps): JSX.Element {
+	return (
+		<div
+			data-testid="metric-time-aggregation"
+			className="metric-time-aggregation"
+		>
+			<div
+				className={classNames('metric-time-aggregation-header', {
+					'selected-step': inspectionStep === InspectionStep.TIME_AGGREGATION,
+				})}
+			>
+				<Typography.Text>AGGREGATE BY TIME</Typography.Text>
+			</div>
+			<div className="metric-time-aggregation-content">
+				<div className="inspect-metrics-input-group">
+					<Typography.Text>Align with</Typography.Text>
+					<Select
+						value={metricInspectionOptions.timeAggregationOption}
+						onChange={(value): void => {
+							dispatchMetricInspectionOptions({
+								type: 'SET_TIME_AGGREGATION_OPTION',
+								payload: value,
+							});
+							// set the time aggregation interval to the default value if it is not set
+							if (!metricInspectionOptions.timeAggregationInterval) {
+								dispatchMetricInspectionOptions({
+									type: 'SET_TIME_AGGREGATION_INTERVAL',
+									payload: getDefaultTimeAggregationInterval(
+										inspectMetricsTimeSeries[0],
+									),
+								});
+							}
+						}}
+						style={{ width: 130 }}
+						placeholder="Select option"
+					>
+						{Object.entries(TIME_AGGREGATION_OPTIONS).map(([key, value]) => (
+							<Select.Option key={key} value={key}>
+								{value}
+							</Select.Option>
+						))}
+					</Select>
+				</div>
+				<div className="inspect-metrics-input-group">
+					<Typography.Text>aggregated every</Typography.Text>
+					<Input
+						type="number"
+						className="no-arrows-input"
+						value={metricInspectionOptions.timeAggregationInterval}
+						placeholder="Select interval..."
+						suffix="seconds"
+						onChange={(e): void => {
+							dispatchMetricInspectionOptions({
+								type: 'SET_TIME_AGGREGATION_INTERVAL',
+								payload: parseInt(e.target.value, 10),
+							});
+						}}
+						onWheel={(e): void => (e.target as HTMLInputElement).blur()}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function MetricSpaceAggregation({
+	spaceAggregationLabels,
+	metricInspectionOptions,
+	dispatchMetricInspectionOptions,
+	inspectionStep,
+}: MetricSpaceAggregationProps): JSX.Element {
+	return (
+		<div
+			data-testid="metric-space-aggregation"
+			className="metric-space-aggregation"
+		>
+			<div
+				className={classNames('metric-space-aggregation-header', {
+					'selected-step': inspectionStep === InspectionStep.SPACE_AGGREGATION,
+				})}
+			>
+				<Typography.Text>AGGREGATE BY LABELS</Typography.Text>
+			</div>
+			<div className="metric-space-aggregation-content">
+				<div className="metric-space-aggregation-content-left">
+					<Select
+						value={metricInspectionOptions.spaceAggregationOption}
+						placeholder="Select option"
+						onChange={(value): void => {
+							dispatchMetricInspectionOptions({
+								type: 'SET_SPACE_AGGREGATION_OPTION',
+								payload: value,
+							});
+						}}
+						style={{ width: 130 }}
+						disabled={inspectionStep === InspectionStep.TIME_AGGREGATION}
+					>
+						{/* eslint-disable-next-line sonarjs/no-identical-functions */}
+						{Object.entries(SPACE_AGGREGATION_OPTIONS).map(([key, value]) => (
+							<Select.Option key={key} value={key}>
+								{value}
+							</Select.Option>
+						))}
+					</Select>
+				</div>
+				<Select
+					mode="multiple"
+					style={{ width: '100%' }}
+					placeholder="Search for attributes..."
+					value={metricInspectionOptions.spaceAggregationLabels}
+					onChange={(value): void => {
+						dispatchMetricInspectionOptions({
+							type: 'SET_SPACE_AGGREGATION_LABELS',
+							payload: value,
+						});
+					}}
+					disabled={inspectionStep === InspectionStep.TIME_AGGREGATION}
+				>
+					{spaceAggregationLabels.map((label) => (
+						<Select.Option key={label} value={label}>
+							{label}
+						</Select.Option>
+					))}
+				</Select>
+			</div>
+		</div>
+	);
+}
+
 export function applyFilters(
 	inspectMetricsTimeSeries: InspectMetricsSeries[],
 	filters: TagFilter,
@@ -84,7 +322,7 @@ export function applyFilters(
 
 export function applyTimeAggregation(
 	inspectMetricsTimeSeries: InspectMetricsSeries[],
-	metricInspectionAppliedOptions: MetricInspectionOptions,
+	metricInspectionOptions: MetricInspectionOptions,
 ): {
 	timeAggregatedSeries: InspectMetricsSeries[];
 	timeAggregatedSeriesMap: Map<number, GraphPopoverData[]>;
@@ -92,7 +330,7 @@ export function applyTimeAggregation(
 	const {
 		timeAggregationOption,
 		timeAggregationInterval,
-	} = metricInspectionAppliedOptions;
+	} = metricInspectionOptions;
 
 	if (!timeAggregationInterval) {
 		return {
@@ -177,7 +415,7 @@ export function applyTimeAggregation(
 
 export function applySpaceAggregation(
 	inspectMetricsTimeSeries: InspectMetricsSeries[],
-	metricInspectionAppliedOptions: MetricInspectionOptions,
+	metricInspectionOptions: MetricInspectionOptions,
 ): {
 	aggregatedSeries: InspectMetricsSeries[];
 	spaceAggregatedSeriesMap: Map<string, InspectMetricsSeries[]>;
@@ -187,7 +425,7 @@ export function applySpaceAggregation(
 
 	inspectMetricsTimeSeries.forEach((series) => {
 		// Create composite key from selected labels
-		const key = metricInspectionAppliedOptions.spaceAggregationLabels
+		const key = metricInspectionOptions.spaceAggregationLabels
 			.map((label) => `${label}:${series.labels[label]}`)
 			.join(',');
 
@@ -222,7 +460,7 @@ export function applySpaceAggregation(
 			([timestamp, values]) => {
 				let aggregatedValue: number;
 
-				switch (metricInspectionAppliedOptions.spaceAggregationOption) {
+				switch (metricInspectionOptions.spaceAggregationOption) {
 					case SpaceAggregationOptions.SUM_BY:
 						aggregatedValue = values.reduce((sum, val) => sum + val, 0);
 						break;
@@ -457,6 +695,103 @@ export const formatTimestampToFullDateTime = (
 	return `${datePart} ⎯ ${timePart}`;
 };
 
+export function getTimeSeriesLabel(
+	timeSeries: InspectMetricsSeries | null,
+	textColor: string | undefined,
+): JSX.Element {
+	return (
+		<>
+			{Object.entries(timeSeries?.labels ?? {}).map(([key, value]) => (
+				<span key={key}>
+					<Typography.Text style={{ color: textColor, fontWeight: 600 }}>
+						{key}
+					</Typography.Text>
+					: {value}{' '}
+				</span>
+			))}
+		</>
+	);
+}
+
+export function HoverPopover({
+	options,
+	step,
+	metricInspectionOptions,
+}: {
+	options: GraphPopoverOptions;
+	step: InspectionStep;
+	metricInspectionOptions: MetricInspectionOptions;
+}): JSX.Element {
+	const closestTimestamp = useMemo(() => {
+		if (!options.timeSeries) {
+			return options.timestamp;
+		}
+		return options.timeSeries?.values.reduce((prev, curr) => {
+			const prevDiff = Math.abs(prev.timestamp - options.timestamp);
+			const currDiff = Math.abs(curr.timestamp - options.timestamp);
+			return prevDiff < currDiff ? prev : curr;
+		}).timestamp;
+	}, [options.timeSeries, options.timestamp]);
+
+	const closestValue = useMemo(() => {
+		if (!options.timeSeries) {
+			return options.value;
+		}
+		const index = options.timeSeries.values.findIndex(
+			(value) => value.timestamp === closestTimestamp,
+		);
+		return index !== undefined && index >= 0
+			? options.timeSeries?.values[index].value
+			: null;
+	}, [options.timeSeries, closestTimestamp, options.value]);
+
+	const title = useMemo(() => {
+		if (
+			step === InspectionStep.COMPLETED &&
+			metricInspectionOptions.spaceAggregationLabels.length === 0
+		) {
+			return undefined;
+		}
+		if (step === InspectionStep.COMPLETED && options.timeSeries?.title) {
+			return options.timeSeries.title;
+		}
+		if (!options.timeSeries) {
+			return undefined;
+		}
+		return getTimeSeriesLabel(
+			options.timeSeries,
+			options.timeSeries?.strokeColor,
+		);
+	}, [step, options.timeSeries, metricInspectionOptions]);
+
+	return (
+		<Card
+			className="hover-popover-card"
+			style={{
+				top: options.y + 10,
+				left: options.x + 10,
+			}}
+		>
+			<div className="hover-popover-row">
+				<Typography.Text>
+					{formatTimestampToFullDateTime(closestTimestamp ?? 0)}
+				</Typography.Text>
+				<Typography.Text>{Number(closestValue).toFixed(2)}</Typography.Text>
+			</div>
+			{options.timeSeries && (
+				<Typography.Text
+					style={{
+						color: options.timeSeries?.strokeColor,
+						fontWeight: 200,
+					}}
+				>
+					{title}
+				</Typography.Text>
+			)}
+		</Card>
+	);
+}
+
 export function onGraphHover(
 	e: MouseEvent,
 	u: uPlot,

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -333,7 +333,7 @@ function Summary(): JSX.Element {
 					openInspectModal={openInspectModal}
 				/>
 			)}
-			{isInspectModalOpen && selectedMetricName && (
+			{isInspectModalOpen && (
 				<InspectModal
 					isOpen={isInspectModalOpen}
 					onClose={closeInspectModal}

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.styles.scss

@@ -169,6 +169,10 @@
 				font-weight: 400;
 				line-height: 16px; /* 133.333% */
 
+				.ant-select {
+					width: 100%;
+				}
+
 				.ant-select-selector {
 					border: none;
 					height: unset;

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx

@@ -2,6 +2,9 @@
 import { useMemo, useRef, useState } from 'react';
 import { useDrag, useDrop, XYCoord } from 'react-dnd';
 import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
+import YAxisUnitSelector from 'components/YAxisUnitSelector';
+import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { unitOptions } from 'container/NewWidget/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -204,6 +207,18 @@ function Threshold({
 		return unit !== 'none' && convertUnit(value, unit, toUnitId) === null;
 	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits, unit, value]);
 
+	const unitSelectCategories = useMemo(() => {
+		return unitOptions(
+			selectedGraph === PANEL_TYPES.TABLE
+				? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
+				: yAxisUnit || '',
+		);
+	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits]);
+
+	const unitLabel = useMemo(() => {
+		return Y_AXIS_UNIT_NAMES[unit as keyof typeof Y_AXIS_UNIT_NAMES];
+	}, [unit]);
+
 	return (
 		<div
 			ref={allowDragAndDrop ? ref : null}
@@ -313,19 +328,17 @@ function Threshold({
 						<ShowCaseValue value={value} className="unit-input" />
 					)}
 					{isEditMode ? (
-						<Select
-							defaultValue={unit}
-							options={unitOptions(
-								selectedGraph === PANEL_TYPES.TABLE
-									? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
-									: yAxisUnit || '',
-							)}
+						<YAxisUnitSelector
+							value={unit}
 							onChange={handleUnitChange}
-							showSearch
-							className="unit-selection"
+							placeholder="Select unit"
+							source={YAxisSource.DASHBOARDS}
+							initialValue={unit}
+							categoriesOverride={unitSelectCategories}
+							containerClassName="unit-selection"
 						/>
 					) : (
-						<ShowCaseValue value={unit} className="unit-selection-prev" />
+						<ShowCaseValue value={unitLabel} className="unit-selection-prev" />
 					)}
 				</div>
 				<div className="thresholds-color-selector">
@@ -356,7 +369,10 @@ function Threshold({
 					)}
 				</div>
 				{isInvalidUnitComparison && (
-					<Typography.Text className="invalid-unit">
+					<Typography.Text
+						className="invalid-unit"
+						data-testid="invalid-unit-comparison"
+					>
 						Threshold unit ({unit}) is not valid in comparison with the{' '}
 						{selectedGraph === PANEL_TYPES.TABLE ? 'column' : 'y-axis'} unit (
 						{selectedGraph === PANEL_TYPES.TABLE

frontend/src/container/NewWidget/RightContainer/Threshold/__tests__/Threshold.test.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { render, screen } from 'tests/test-utils';
 
@@ -14,12 +16,26 @@ jest.mock('lib/query/createTableColumnsFromQuery', () => ({
 	),
 }));
 
-// Mock the unitOptions function
+// Mock the unitOptions function to return YAxisCategory-shaped data
 jest.mock('container/NewWidget/utils', () => ({
 	unitOptions: jest.fn(() => [
-		{ value: 'none', label: 'None' },
-		{ value: '%', label: 'Percent (0 - 100)' },
-		{ value: 'ms', label: 'Milliseconds (ms)' },
+		{
+			name: 'Mock Category',
+			units: [
+				{
+					id: UniversalYAxisUnit.NONE,
+					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
+				},
+				{
+					id: UniversalYAxisUnit.PERCENT,
+					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
+				},
+				{
+					id: UniversalYAxisUnit.MILLISECONDS,
+					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS],
+				},
+			],
+		},
 	]),
 }));
 
@@ -28,7 +44,7 @@ const defaultProps = {
 	keyIndex: 0,
 	thresholdOperator: '>' as const,
 	thresholdValue: 50,
-	thresholdUnit: 'none',
+	thresholdUnit: UniversalYAxisUnit.NONE,
 	thresholdColor: 'Red',
 	thresholdFormat: 'Text' as const,
 	isEditEnabled: true,
@@ -38,8 +54,11 @@ const defaultProps = {
 		{ value: 'memory_usage', label: 'Memory Usage' },
 	],
 	thresholdTableOptions: 'cpu_usage',
-	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
-	yAxisUnit: '%',
+	columnUnits: {
+		cpu_usage: UniversalYAxisUnit.PERCENT,
+		memory_usage: UniversalYAxisUnit.BYTES,
+	},
+	yAxisUnit: UniversalYAxisUnit.PERCENT,
 	moveThreshold: jest.fn(),
 };
 
@@ -68,28 +87,27 @@ describe('Threshold Component Unit Validation', () => {
 	it('should show validation error when threshold unit is not "none" and units are incompatible', () => {
 		// Act - Render component with incompatible units (ms vs percent)
 		renderThreshold({
-			thresholdUnit: 'ms',
+			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
 			thresholdValue: 50,
 		});
 
+		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(
-			screen.getByText(
-				/Threshold unit \(ms\) is not valid in comparison with the column unit \(percent\)/i,
-			),
-		).toBeInTheDocument();
+		expect(errorMessage.textContent).toBe(
+			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
+		);
 	});
 
 	it('should not show validation error when threshold unit matches column unit', () => {
 		// Act - Render component with matching units
 		renderThreshold({
-			thresholdUnit: 'percent',
+			thresholdUnit: UniversalYAxisUnit.PERCENT,
 			thresholdValue: 50,
 		});
 
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
+			screen.queryByTestId('invalid-unit-comparison'),
 		).not.toBeInTheDocument();
 	});
 
@@ -97,17 +115,16 @@ describe('Threshold Component Unit Validation', () => {
 		// Act - Render component for time series with incompatible units
 		renderThreshold({
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
-			thresholdUnit: 'ms',
+			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
 			thresholdValue: 100,
-			yAxisUnit: 'percent',
+			yAxisUnit: UniversalYAxisUnit.PERCENT,
 		});
 
+		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(
-			screen.getByText(
-				/Threshold unit \(ms\) is not valid in comparison with the y-axis unit \(percent\)/i,
-			),
-		).toBeInTheDocument();
+		expect(errorMessage.textContent).toBe(
+			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the y-axis unit (${UniversalYAxisUnit.PERCENT})`,
+		);
 	});
 
 	it('should not show validation error for time series graph when threshold unit is "none"', () => {
@@ -116,43 +133,39 @@ describe('Threshold Component Unit Validation', () => {
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
 			thresholdUnit: 'none',
 			thresholdValue: 100,
-			yAxisUnit: 'percent',
+			yAxisUnit: UniversalYAxisUnit.PERCENT,
 		});
-
-		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
+			screen.queryByTestId('invalid-unit-comparison'),
 		).not.toBeInTheDocument();
 	});
 
 	it('should not show validation error when threshold unit is compatible with column unit', () => {
 		// Act - Render component with compatible units (both in same category - Time)
 		renderThreshold({
-			thresholdUnit: 's',
+			thresholdUnit: UniversalYAxisUnit.SECONDS,
 			thresholdValue: 100,
-			columnUnits: { cpu_usage: 'ms' },
+			columnUnits: { cpu_usage: UniversalYAxisUnit.MILLISECONDS },
 			thresholdTableOptions: 'cpu_usage',
 		});
-
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
+			screen.queryByTestId('invalid-unit-comparison'),
 		).not.toBeInTheDocument();
 	});
 
 	it('should show validation error when threshold unit is in different category than column unit', () => {
 		// Act - Render component with units from different categories
 		renderThreshold({
-			thresholdUnit: 'bytes',
+			thresholdUnit: UniversalYAxisUnit.BYTES,
 			thresholdValue: 100,
-			yAxisUnit: 'percent',
+			yAxisUnit: UniversalYAxisUnit.PERCENT,
 		});
 
+		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(
-			screen.getByText(
-				/Threshold unit \(bytes\) is not valid in comparison with the column unit \(percent\)/i,
-			),
-		).toBeInTheDocument();
+		expect(errorMessage.textContent).toBe(
+			`Threshold unit (${UniversalYAxisUnit.BYTES}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
+		);
 	});
 });

frontend/src/container/NewWidget/utils.ts

@@ -1,9 +1,12 @@
 import { Layout } from 'react-grid-layout';
-import { DefaultOptionType } from 'antd/es/select';
 import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
 import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
+import {
+	UniversalYAxisUnit,
+	YAxisCategory,
+	YAxisSource,
+} from 'components/YAxisUnitSelector/types';
 import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -606,7 +609,7 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  */
 export const getCategorySelectOptionByName = (
 	name?: YAxisCategoryNames,
-): DefaultOptionType[] => {
+): { name: string; id: UniversalYAxisUnit }[] => {
 	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
 	if (!categories.length) {
 		return [];
@@ -615,8 +618,8 @@ export const getCategorySelectOptionByName = (
 		categories
 			.find((category) => category.name === name)
 			?.units.map((unit) => ({
-				label: unit.name,
-				value: unit.id,
+				name: unit.name,
+				id: unit.id,
 			})) || []
 	);
 };
@@ -628,19 +631,19 @@ export const getCategorySelectOptionByName = (
  * select options. If a valid category is found, it filters the supported categories
  * to return only the options for the matched category.
  */
-export const unitOptions = (columnUnit: string): DefaultOptionType[] => {
+export const unitOptions = (columnUnit: string): YAxisCategory[] => {
 	const category = getCategoryName(columnUnit);
 	if (isEmpty(category)) {
 		return categoryToSupport.map((category) => ({
-			label: category,
-			options: getCategorySelectOptionByName(category),
+			name: category,
+			units: getCategorySelectOptionByName(category),
 		}));
 	}
 	return categoryToSupport
 		.filter((supportedCategory) => supportedCategory === category)
 		.map((filteredCategory) => ({
-			label: filteredCategory,
-			options: getCategorySelectOptionByName(filteredCategory),
+			name: filteredCategory,
+			units: getCategorySelectOptionByName(filteredCategory),
 		}));
 };
 

frontend/src/modules/Servicemap/Map.tsx

@@ -2,7 +2,7 @@
 //@ts-nocheck
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { memo } from 'react';
-import { ForceGraph2D } from 'react-force-graph';
+import ForceGraph2D from 'react-force-graph-2d';
 
 import { getGraphData, getTooltip, transformLabel } from './utils';
 

frontend/yarn.lock

@@ -2,37 +2,6 @@
 # yarn lockfile v1
 
 
-"3d-force-graph-ar@1":
-  version "1.8.3"
-  resolved "https://registry.npmjs.org/3d-force-graph-ar/-/3d-force-graph-ar-1.8.3.tgz"
-  integrity sha512-irj1Kk2qsRGSMsddSXdiVzzwtsNMZRbsJYBg+0ypkk5t5arZpo3h/PoN9Gfusvlu5fCAOk1wKVPUWN9Vkwrn7g==
-  dependencies:
-    aframe-forcegraph-component "3"
-    kapsule "1"
-
-"3d-force-graph-vr@2":
-  version "2.2.2"
-  resolved "https://registry.npmjs.org/3d-force-graph-vr/-/3d-force-graph-vr-2.2.2.tgz"
-  integrity sha512-LSI24ugjT7SUE8JCusV5pmFHaFZ51EgGH1B7KMOK4JEgmUvogFwkJcXg7Go2mHI28WXDzFyBvrckWiwv5yLUeA==
-  dependencies:
-    accessor-fn "1"
-    aframe "^1.4"
-    aframe-extras "^6.1"
-    aframe-forcegraph-component "3"
-    kapsule "1"
-    polished "4"
-
-"3d-force-graph@1":
-  version "1.71.3"
-  resolved "https://registry.npmjs.org/3d-force-graph/-/3d-force-graph-1.71.3.tgz"
-  integrity sha512-cPM2d8Lbf7VJ8SgRE5BDcpy5wOxrsIILwEseD3OdAITcM/3zGbuKzJdDQ98DHM6Ne3iHxl7F4v0A3IJuyqXYXQ==
-  dependencies:
-    accessor-fn "1"
-    kapsule "1"
-    three ">=0.118 <1"
-    three-forcegraph "1"
-    three-render-objects "1"
-
 "@adobe/css-tools@^4.0.1":
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.2.tgz#a6abc715fb6884851fca9dad37fc34739a04fd11"
@@ -2212,7 +2181,7 @@
   resolved "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.19.0", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.19.0", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.28.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.2.tgz#2ae5a9d51cc583bd1f5673b3bb70d6d819682473"
   integrity sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==
@@ -5252,6 +5221,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@standard-schema/spec@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/spec/-/spec-1.0.0.tgz#f193b73dc316c4170f2e82a881da0f550d551b9c"
+  integrity sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==
+
 "@stoplight/better-ajv-errors@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@stoplight/better-ajv-errors/-/better-ajv-errors-1.0.3.tgz#d74a5c4da5d786c17188d7f4edec505f089885fa"
@@ -5596,10 +5570,10 @@
   resolved "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz"
   integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
 
-"@tweenjs/tween.js@18 - 19", "@tweenjs/tween.js@19":
-  version "19.0.0"
-  resolved "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-19.0.0.tgz"
-  integrity sha512-QVbvSlnP7FcjKr1edg460BbUlpdGzmIOfvpsvHCj3JPIVZ9S9KeQLk9mB24VlDzPIl/a/ehAZPE95xFsmqm+pQ==
+"@tweenjs/tween.js@18 - 25":
+  version "25.0.0"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-25.0.0.tgz#7266baebcc3affe62a3a54318a3ea82d904cd0b9"
+  integrity sha512-XKLA6syeBUaPzx4j3qwMqzzq+V4uo72BnlbOjmuljLrRqdsd3qnzvZZoxvMHZ23ndsRS4aufU6JOZYpCbU6T1A==
 
 "@types/acorn@^4.0.0":
   version "4.0.6"
@@ -6627,11 +6601,6 @@
     rehype "~12.0.1"
     rehype-prism-plus "~1.6.1"
 
-"@ungap/custom-elements@^1.1.0":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@ungap/custom-elements/-/custom-elements-1.2.0.tgz"
-  integrity sha512-zdSuu79stAwVUtzkQU9B5jhGh2LavtkeX4kxd2jtMJmZt7QqRJ1KJW5bukt/vUOaUs3z674GHd+nqYm0bu0Gyg==
-
 "@ungap/structured-clone@^1.0.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
@@ -7022,40 +6991,6 @@ acorn@^8.15.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
   integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
 
-aframe-extras@^6.1:
-  version "6.1.1"
-  resolved "https://registry.npmjs.org/aframe-extras/-/aframe-extras-6.1.1.tgz"
-  integrity sha512-w3o3sKfQG+cwe1ZoKUxvMLehh0D/MlvFZeg2XuyIto+Nrs/kGLPcb/fsI5DXM4jociZ3wVQfqcA1BVF+0Nq45A==
-  dependencies:
-    three-pathfinding "^0.7.0"
-
-aframe-forcegraph-component@3:
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/aframe-forcegraph-component/-/aframe-forcegraph-component-3.0.8.tgz"
-  integrity sha512-ir1SzOYWYVQ4wtG18QwZRR/aVeZlZDXDbcRgFxSIc8A1YB6Mz3Mh0f0zMFKE3jAq481xNgpktxMvsWGZTPi63Q==
-  dependencies:
-    accessor-fn "1"
-    three-forcegraph "1"
-
-aframe@^1.4:
-  version "1.4.2"
-  resolved "https://registry.npmjs.org/aframe/-/aframe-1.4.2.tgz"
-  integrity sha512-/sWCOB3ZNe5dWvMknIIMi5dwfU3rIyCiV+QkfYTDK36rNGivmUrmcdkregLmZk0OGHu9WAXoeUP3n0a23n6D0A==
-  dependencies:
-    "@ungap/custom-elements" "^1.1.0"
-    buffer "^6.0.3"
-    custom-event-polyfill "^1.0.6"
-    debug ngokevin/debug#noTimestamp
-    deep-assign "^2.0.0"
-    load-bmfont "^1.2.3"
-    object-assign "^4.0.1"
-    present "0.0.6"
-    promise-polyfill "^3.1.0"
-    super-animejs "^3.1.0"
-    super-three "^0.147.1"
-    three-bmfont-text dmarcos/three-bmfont-text#21d017046216e318362c48abd1a48bddfb6e0733
-    webvr-polyfill "^0.10.12"
-
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -7130,11 +7065,6 @@ ajv@^8.11.0, ajv@^8.17.1:
     json-schema-traverse "^1.0.0"
     require-from-string "^2.0.2"
 
-an-array@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/an-array/-/an-array-1.0.0.tgz"
-  integrity sha512-M175GYI7RmsYu24Ok383yZQa3eveDfNnmhTe3OQ3bm70bEovz2gWenH+ST/n32M8lrwLWk74hcPds5CDRPe2wg==
-
 ansi-colors@^4.1.1:
   version "4.1.3"
   resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz"
@@ -7337,11 +7267,6 @@ array-includes@^3.1.5, array-includes@^3.1.6:
     get-intrinsic "^1.1.3"
     is-string "^1.0.7"
 
-array-shuffle@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/array-shuffle/-/array-shuffle-1.0.1.tgz"
-  integrity sha512-PBqgo1Y2XWSksBzq3GFPEb798ZrW2snAcmr4drbVeF/6MT/5aBlkGJEvu5A/CzXHf4EjbHOj/ZowatjlIiVidA==
-
 array-tree-filter@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz"
@@ -7429,11 +7354,6 @@ arrify@^1.0.1:
   resolved "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz"
   integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
 
-as-number@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/as-number/-/as-number-1.0.0.tgz"
-  integrity sha512-HkI/zLo2AbSRO4fqVkmyf3hms0bJDs3iboHqTrNuwTiCRvdYXM7HFhfhB6Dk51anV2LM/IMB83mtK9mHw4FlAg==
-
 ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
@@ -8106,21 +8026,11 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-equal@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz"
-  integrity sha512-RgSV6InVQ9ODPdLWJ5UAqBqJBOg370Nz6ZQtRzpt6nUjc8v0St97uJ4PYC6NztqIScrAXafKM3mZPMygSe1ggA==
-
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-buffer-to-arraybuffer@^0.0.5:
-  version "0.0.5"
-  resolved "https://registry.npmjs.org/buffer-to-arraybuffer/-/buffer-to-arraybuffer-0.0.5.tgz"
-  integrity sha512-3dthu5CYiVB1DEJp61FtApNnNndTckcqe4pFcLdvHtrpG+kcyekCJKg4MRiDcFW7A6AODnXB9U4dwQiCW5kzJQ==
-
 buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
@@ -8279,22 +8189,13 @@ caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz#4adcb443c8b9c8303e04498318f987616b8fea2e"
   integrity sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==
 
-canvas-color-tracker@1:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/canvas-color-tracker/-/canvas-color-tracker-1.2.1.tgz"
-  integrity sha512-i5clg2pEdaWqHuEM/B74NZNLkHh5+OkXbA/T4iaBiaNDagkOCXkLNrhqUfdUugsRwuaNRU20e/OygzxWRor3yg==
+canvas-color-tracker@^1.3:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/canvas-color-tracker/-/canvas-color-tracker-1.3.2.tgz#b924cf94b33441b82692938fca5b936be971a46d"
+  integrity sha512-ryQkDX26yJ3CXzb3hxUVNlg1NKE4REc5crLBq661Nxzr8TNd236SaEf2ffYLXyI5tSABSeguHLqcVq4vf9L3Zg==
   dependencies:
     tinycolor2 "^1.6.0"
 
-cardboard-vr-display@^1.0.19:
-  version "1.0.19"
-  resolved "https://registry.npmjs.org/cardboard-vr-display/-/cardboard-vr-display-1.0.19.tgz"
-  integrity sha512-+MjcnWKAkb95p68elqZLDPzoiF/dGncQilLGvPBM5ZorABp/ao3lCs7nnRcYBckmuNkg1V/5rdGDKoUaCVsHzQ==
-  dependencies:
-    gl-preserve-state "^1.0.0"
-    nosleep.js "^0.7.0"
-    webvr-polyfill-dpdb "^1.0.17"
-
 ccount@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
@@ -9190,11 +9091,6 @@ csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-custom-event-polyfill@^1.0.6:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz"
-  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
-
 "d3-array@1 - 3", "d3-array@2 - 3", "d3-array@2.10.0 - 3":
   version "3.2.3"
   resolved "https://registry.npmjs.org/d3-array/-/d3-array-3.2.3.tgz"
@@ -9398,13 +9294,6 @@ dargs@^7.0.0:
   resolved "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz"
   integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
 
-data-joint@1:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/data-joint/-/data-joint-1.3.1.tgz"
-  integrity sha512-tMK0m4OVGqiA3zkn8JmO6YAqD8UwJqIAx4AAwFl1SKTtKAqcXePuT+n2aayiX9uITtlN3DFtKKTOxJRUc2+HvQ==
-  dependencies:
-    index-array-by "^1.4.0"
-
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz"
@@ -9466,7 +9355,7 @@ debounce@^1.2.1:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
   integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
-debug@2.6.9, debug@4, debug@4.3.4, debug@^3.2.6, debug@^3.2.7, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.6, debug@^4.4.3, debug@ngokevin/debug#noTimestamp:
+debug@2.6.9, debug@4, debug@4.3.4, debug@^3.2.6, debug@^3.2.7, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.6, debug@^4.4.3:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -9498,18 +9387,6 @@ decode-named-character-reference@^1.0.0:
   dependencies:
     character-entities "^2.0.0"
 
-decode-uri-component@^0.2.0:
-  version "0.2.2"
-  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz"
-  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
-
-decompress-response@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz"
-  integrity sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==
-  dependencies:
-    mimic-response "^1.0.0"
-
 decompress-response@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
@@ -9522,13 +9399,6 @@ dedent@^0.7.0:
   resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
-deep-assign@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/deep-assign/-/deep-assign-2.0.0.tgz"
-  integrity sha512-2QhG3Kxulu4XIF3WL5C5x0sc/S17JLgm1SfvDfIRsR/5m7ZGmcejII7fZ2RyWhN0UWIJm0TNM/eKow6LAn3evQ==
-  dependencies:
-    is-obj "^1.0.0"
-
 deep-equal@^2.0.5:
   version "2.2.1"
   resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.1.tgz"
@@ -9866,11 +9736,6 @@ dotenv@^16.4.2:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.6.1.tgz#773f0e69527a8315c7285d5ee73c4459d20a8020"
   integrity sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==
 
-dtype@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/dtype/-/dtype-2.0.0.tgz"
-  integrity sha512-s2YVcLKdFGS0hpFqJaTwscsyt0E8nNFdmo73Ocd81xNPj4URI4rj6D60A+vFMIw7BXWlb4yRkEwfBqcZzPGiZg==
-
 dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
@@ -10964,12 +10829,14 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-flatten-vertex-data@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/flatten-vertex-data/-/flatten-vertex-data-1.0.2.tgz"
-  integrity sha512-BvCBFK2NZqerFTdMDgqfHBwxYWnxeCkwONsw6PvBMcUXqo8U/KDWwmXhqx1x2kLIg7DqIsJfOaJFOmlua3Lxuw==
+float-tooltip@^1.7:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/float-tooltip/-/float-tooltip-1.7.5.tgz#7083bf78f0de5a97f9c2d6aa8e90d2139f34047f"
+  integrity sha512-/kXzuDnnBqyyWyhDMH7+PfP8J/oXiAavGzcRxASOMRHFuReDtofizLLJsf7nnDLAfEaMW4pVWaXrAjtnglpEkg==
   dependencies:
-    dtype "^2.0.0"
+    d3-selection "2 - 3"
+    kapsule "^1.16"
+    preact "10"
 
 flubber@^0.4.2:
   version "0.4.2"
@@ -11007,15 +10874,15 @@ for-each@^0.3.5:
   dependencies:
     is-callable "^1.2.7"
 
-force-graph@1:
-  version "1.43.1"
-  resolved "https://registry.npmjs.org/force-graph/-/force-graph-1.43.1.tgz"
-  integrity sha512-JOrmhMYr3uF6zzCXTauEo0KIiSp9OB2fAYYXkOGs6z0GQNSLIpcjCY3lhod4kAbkQCOup+u8JE9mmw7ojQaxTQ==
+force-graph@^1.51:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/force-graph/-/force-graph-1.51.1.tgz#c967249bf6ad2cb4a3ba89ed4c6d79895bd70fe1"
+  integrity sha512-uEEX8iRzgq1IKRISOw6RrB2RLMhcI25xznQYrCTVvxZHZZ+A2jH6qIolYuwavVxAMi64pFp2yZm4KFVdD993cg==
   dependencies:
-    "@tweenjs/tween.js" "19"
+    "@tweenjs/tween.js" "18 - 25"
     accessor-fn "1"
     bezier-js "3 - 6"
-    canvas-color-tracker "1"
+    canvas-color-tracker "^1.3"
     d3-array "1 - 3"
     d3-drag "2 - 3"
     d3-force-3d "2 - 3"
@@ -11023,8 +10890,9 @@ force-graph@1:
     d3-scale-chromatic "1 - 3"
     d3-selection "2 - 3"
     d3-zoom "2 - 3"
+    float-tooltip "^1.7"
     index-array-by "1"
-    kapsule "^1.14"
+    kapsule "^1.16"
     lodash-es "4"
 
 form-data@4.0.4, form-data@^3.0.0, form-data@^4.0.4:
@@ -11067,11 +10935,6 @@ fresh@0.5.2:
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
   integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
 
-fromentries@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/fromentries/-/fromentries-1.3.2.tgz"
-  integrity sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==
-
 fs-extra@^10.0.0:
   version "10.1.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz"
@@ -11284,11 +11147,6 @@ github-slugger@^2.0.0:
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-2.0.0.tgz#52cf2f9279a21eb6c59dd385b410f0c0adda8f1a"
   integrity sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==
 
-gl-preserve-state@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/gl-preserve-state/-/gl-preserve-state-1.0.0.tgz"
-  integrity sha512-zQZ25l3haD4hvgJZ6C9+s0ebdkW9y+7U2qxvGu1uWOJh8a4RU+jURIKEQhf8elIlFpMH6CrAY2tH0mYrRjet3Q==
-
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -11337,7 +11195,7 @@ global-dirs@^0.1.1:
   dependencies:
     ini "^1.3.4"
 
-global@^4.3.0, global@~4.4.0:
+global@^4.3.0:
   version "4.4.0"
   resolved "https://registry.npmjs.org/global/-/global-4.4.0.tgz"
   integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
@@ -12171,7 +12029,7 @@ indent-string@^4.0.0:
   resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
-index-array-by@1, index-array-by@^1.4.0:
+index-array-by@1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/index-array-by/-/index-array-by-1.4.1.tgz"
   integrity sha512-Zu6THdrxQdyTuT2uA5FjUoBEsFHPzHcPIj18FszN6yXKHxSfGcR4TPLabfuT//E25q1Igyx9xta2WMvD/x9P/g==
@@ -12400,11 +12258,6 @@ is-boolean-object@^1.2.1:
     call-bound "^1.0.3"
     has-tostringtag "^1.0.2"
 
-is-buffer@^1.0.2:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
 is-buffer@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
@@ -12497,11 +12350,6 @@ is-fullwidth-code-point@^4.0.0:
   resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz"
   integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
 
-is-function@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz"
-  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
-
 is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz"
@@ -12604,11 +12452,6 @@ is-number@^7.0.0:
   resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-is-obj@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz"
-  integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
-
 is-obj@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz"
@@ -13617,10 +13460,10 @@ junk@^3.1.0:
   resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
   integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
 
-kapsule@1, kapsule@^1.14:
-  version "1.14.2"
-  resolved "https://registry.npmjs.org/kapsule/-/kapsule-1.14.2.tgz"
-  integrity sha512-6ROjWt7DHJ6pBv8RqpcP5uhP7+IgoaF5XavzcRU0U1/5wT/dZgBDNPrdZMNXaWyWLZvAdJ/ONuVRW0Dr9NbLkA==
+kapsule@^1.16:
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/kapsule/-/kapsule-1.16.3.tgz#5684ed89838b6658b30d0f2cc056dffc3ba68c30"
+  integrity sha512-4+5mNNf4vZDSwPhKprKwz3330iisPrb08JyMgbsdFrimBCKNHecua/WBwvVg3n7vwx0C1ARjfhwIpbrbd9n5wg==
   dependencies:
     lodash-es "4"
 
@@ -13671,15 +13514,6 @@ launch-editor@^2.6.1:
     picocolors "^1.0.0"
     shell-quote "^1.8.1"
 
-layout-bmfont-text@^1.2.0:
-  version "1.3.4"
-  resolved "https://registry.npmjs.org/layout-bmfont-text/-/layout-bmfont-text-1.3.4.tgz"
-  integrity sha512-mceomHZ8W7pSKQhTdLvOe1Im4n37u8xa5Gr0J3KPCHRMO/9o7+goWIOzZcUUd+Xgzy3+22bvoIQ0OaN3LRtgaw==
-  dependencies:
-    as-number "^1.0.0"
-    word-wrapper "^1.0.7"
-    xtend "^4.0.0"
-
 lerc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz"
@@ -13810,20 +13644,6 @@ listr2@^4.0.5:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
-load-bmfont@^1.2.3:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz"
-  integrity sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==
-  dependencies:
-    buffer-equal "0.0.1"
-    mime "^1.3.4"
-    parse-bmfont-ascii "^1.0.3"
-    parse-bmfont-binary "^1.0.5"
-    parse-bmfont-xml "^1.1.4"
-    phin "^2.9.1"
-    xhr "^2.0.1"
-    xtend "^4.0.0"
-
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
@@ -14122,13 +13942,6 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
-map-limit@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/map-limit/-/map-limit-0.0.1.tgz"
-  integrity sha512-pJpcfLPnIF/Sk3taPW21G/RQsEEirGaFpCW3oXRwH9dnFHPHNGjNyvh++rdmC2fNqEaTw2MhYJraoJWAHx8kEg==
-  dependencies:
-    once "~1.3.0"
-
 map-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
@@ -14899,7 +14712,7 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17,
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0, mime@^1.3.4, mime@^1.4.1:
+mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -15168,57 +14981,11 @@ neo-async@^2.6.2:
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-new-array@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/new-array/-/new-array-1.0.0.tgz"
-  integrity sha512-K5AyFYbuHZ4e/ti52y7k18q8UHsS78FlRd85w2Fmsd6AkuLipDihPflKC0p3PN5i8II7+uHxo+CtkLiJDfmS5A==
-
 next-themes@^0.4.6:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.4.6.tgz#8d7e92d03b8fea6582892a50a928c9b23502e8b6"
   integrity sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==
 
-ngraph.events@^1.0.0, ngraph.events@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.2.tgz"
-  integrity sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ==
-
-ngraph.forcelayout@3:
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/ngraph.forcelayout/-/ngraph.forcelayout-3.3.1.tgz"
-  integrity sha512-MKBuEh1wujyQHFTW57y5vd/uuEOK0XfXYxm3lC7kktjJLRdt/KEKEknyOlc6tjXflqBKEuYBBcu7Ax5VY+S6aw==
-  dependencies:
-    ngraph.events "^1.0.0"
-    ngraph.merge "^1.0.0"
-    ngraph.random "^1.0.0"
-
-ngraph.graph@20:
-  version "20.0.1"
-  resolved "https://registry.npmjs.org/ngraph.graph/-/ngraph.graph-20.0.1.tgz"
-  integrity sha512-VFsQ+EMkT+7lcJO1QP8Ik3w64WbHJl27Q53EO9hiFU9CRyxJ8HfcXtfWz/U8okuoYKDctbciL6pX3vG5dt1rYA==
-  dependencies:
-    ngraph.events "^1.2.1"
-
-ngraph.merge@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/ngraph.merge/-/ngraph.merge-1.0.0.tgz"
-  integrity sha512-5J8YjGITUJeapsomtTALYsw7rFveYkM+lBj3QiYZ79EymQcuri65Nw3knQtFxQBU1r5iOaVRXrSwMENUPK62Vg==
-
-ngraph.random@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/ngraph.random/-/ngraph.random-1.1.0.tgz"
-  integrity sha512-h25UdUN/g8U7y29TzQtRm/GvGr70lK37yQPvPKXXuVfs7gCm82WipYFZcksQfeKumtOemAzBIcT7lzzyK/edLw==
-
-nice-color-palettes@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/nice-color-palettes/-/nice-color-palettes-1.0.1.tgz"
-  integrity sha512-aHEFYKuGiaga8LqMi0Ttarqzn4tKS7BaIE2MeD9SDjv6yVc7DMIu/Eax4RvUgwR7vS0hXAUEIUx9P0/54O1W0g==
-  dependencies:
-    map-limit "0.0.1"
-    minimist "^1.2.0"
-    new-array "^1.0.0"
-    xhr-request "^1.0.1"
-
 nimma@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/nimma/-/nimma-0.2.3.tgz#33cd6244ede857d9c8ac45b9d1aad07091559e45"
@@ -15323,11 +15090,6 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-nosleep.js@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.7.0.tgz"
-  integrity sha512-Z4B1HgvzR+en62ghwZf6BwAR6x4/pjezsiMcbF9KMLh7xoscpoYhaSXfY3lLkqC68AtW+/qLJ1lzvBIj0FGaTA==
-
 not@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/not/-/not-0.1.0.tgz#c9691c1746c55dcfbe54cbd8bd4ff041bc2b519d"
@@ -15362,6 +15124,13 @@ nth-check@^2.0.0, nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
+nuqs@2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/nuqs/-/nuqs-2.8.8.tgz#375be35455b1d7e1104a15ff4d840533d6c55f76"
+  integrity sha512-LF5sw9nWpHyPWzMMu9oho3r9C5DvkpmBIg4LQN78sexIzGaeRx8DWr0uy3YiFx5i2QGZN1Qqcb+OAtEVRa2bnA==
+  dependencies:
+    "@standard-schema/spec" "1.0.0"
+
 nwsapi@^2.2.0:
   version "2.2.4"
   resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz"
@@ -15413,7 +15182,7 @@ oas-validator@^5.0.8:
     should "^13.2.1"
     yaml "^1.10.0"
 
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -15573,13 +15342,6 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
-once@~1.3.0:
-  version "1.3.3"
-  resolved "https://registry.npmjs.org/once/-/once-1.3.3.tgz"
-  integrity sha512-6vaNInhu+CHxtONf3zw3vq4SP2DOQhjBvIa3rNcG0+P7eKWlYH6Peu7rHizSloRU2EwMz6GraLieis9Ac9+p1w==
-  dependencies:
-    wrappy "1"
-
 onetime@^5.1.0, onetime@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz"
@@ -15809,24 +15571,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-bmfont-ascii@^1.0.3:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz"
-  integrity sha512-U4RrVsUFCleIOBsIGYOMKjn9PavsGOXxbvYGtMOEfnId0SVNsgehXh1DxUdVPLoxd5mvcEtvmKs2Mmf0Mpa1ZA==
-
-parse-bmfont-binary@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz"
-  integrity sha512-GxmsRea0wdGdYthjuUeWTMWPqm2+FAd4GI8vCvhgJsFnoGhTrLhXDDupwTo7rXVAgaLIGoVHDZS9p/5XbSqeWA==
-
-parse-bmfont-xml@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/parse-bmfont-xml/-/parse-bmfont-xml-1.1.4.tgz"
-  integrity sha512-bjnliEOmGv3y1aMEfREMBJ9tfL3WR0i0CKPj61DnSLaoxWR3nLrsQrEbCId/8rF4NyRF0cCqisSVXyQYWM+mCQ==
-  dependencies:
-    xml-parse-from-string "^1.0.0"
-    xml2js "^0.4.5"
-
 parse-entities@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
@@ -15853,7 +15597,7 @@ parse-entities@^4.0.0:
     is-decimal "^2.0.0"
     is-hexadecimal "^2.0.0"
 
-parse-headers@^2.0.0, parse-headers@^2.0.2:
+parse-headers@^2.0.2:
   version "2.0.5"
   resolved "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz"
   integrity sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==
@@ -16000,7 +15744,7 @@ periscopic@^3.0.0:
     estree-walker "^3.0.0"
     is-reference "^3.0.0"
 
-phin@^2.9.1, phin@^3.7.1:
+phin@^3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/phin/-/phin-3.7.1.tgz#bf841da75ee91286691b10e41522a662aa628fd6"
   integrity sha512-GEazpTWwTZaEQ9RhL7Nyz0WwqilbqgLahDM3D0hxWwmVDI52nXEybHqiN6/elwpkJBhcuj+WbBu+QfT0uhPGfQ==
@@ -16070,13 +15814,6 @@ playwright@1.55.1:
   optionalDependencies:
     fsevents "2.3.2"
 
-polished@4:
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz"
-  integrity sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==
-  dependencies:
-    "@babel/runtime" "^7.17.8"
-
 pony-cause@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/pony-cause/-/pony-cause-1.1.1.tgz#f795524f83bebbf1878bd3587b45f69143cbf3f9"
@@ -16410,6 +16147,11 @@ posthog-js@1.298.0:
     preact "^10.19.3"
     web-vitals "^4.2.4"
 
+preact@10:
+  version "10.28.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.28.3.tgz#3c2171526b3e29628ad1a6c56a9e3ca867bbdee8"
+  integrity sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==
+
 preact@^10.19.3:
   version "10.22.0"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.22.0.tgz#a50f38006ae438d255e2631cbdaf7488e6dd4e16"
@@ -16425,11 +16167,6 @@ prelude-ls@~1.1.2:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
-present@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.npmjs.org/present/-/present-0.0.6.tgz"
-  integrity sha512-8HGGcsH0xefDkhtWzXhigzieKtervWPQgyX8RtQD3cKr4wU307j8XANVSaZLxbR0+1EBonCJNOdUrQ7hbk3Kiw==
-
 prettier-linter-helpers@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz"
@@ -16493,11 +16230,6 @@ progress@^2.0.0, progress@^2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-promise-polyfill@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-3.1.0.tgz"
-  integrity sha512-t20OwHJ4ZOUj5fV+qms67oczphAVkRC6Rrjcrne+V1FJkQMym7n69xJmYyXHulm9OUQ0Ie5KSzg0QhOYgaxy+w==
-
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz"
@@ -16590,24 +16322,6 @@ qs@6.13.0:
   dependencies:
     side-channel "^1.0.6"
 
-quad-indices@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/quad-indices/-/quad-indices-2.0.1.tgz"
-  integrity sha512-6jtmCsEbGAh5npThXrBaubbTjPcF0rMbn57XCJVI7LkW8PUT56V+uIrRCCWCn85PSgJC9v8Pm5tnJDwmOBewvA==
-  dependencies:
-    an-array "^1.0.0"
-    dtype "^2.0.0"
-    is-buffer "^1.0.2"
-
-query-string@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz"
-  integrity sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
@@ -17155,17 +16869,14 @@ react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
-react-force-graph@^1.43.0:
-  version "1.43.0"
-  resolved "https://registry.yarnpkg.com/react-force-graph/-/react-force-graph-1.43.0.tgz#cf38d053dbce5ce16e16585d3166e95b5324d0d5"
-  integrity sha512-g59ZWGrR6hkokY8RMO6FQHbltaIZ3+AGf9mrQs+s1+J26Sc2Wc6aro4cLW8PTHMIHgX/zml44yp60gRbzdFSMw==
+react-force-graph-2d@^1.29.1:
+  version "1.29.1"
+  resolved "https://registry.yarnpkg.com/react-force-graph-2d/-/react-force-graph-2d-1.29.1.tgz#a0784d4387b12b28e2b552058ec09d092b4e8cda"
+  integrity sha512-1Rl/1Z3xy2iTHKj6a0jRXGyiI86xUti81K+jBQZ+Oe46csaMikp47L5AjrzA9hY9fNGD63X8ffrqnvaORukCuQ==
   dependencies:
-    "3d-force-graph" "1"
-    "3d-force-graph-ar" "1"
-    "3d-force-graph-vr" "2"
-    force-graph "1"
+    force-graph "^1.51"
     prop-types "15"
-    react-kapsule "2"
+    react-kapsule "^2.5"
 
 react-full-screen@1.1.1:
   version "1.1.1"
@@ -17240,12 +16951,11 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-kapsule@2:
-  version "2.4.0"
-  resolved "https://registry.npmjs.org/react-kapsule/-/react-kapsule-2.4.0.tgz"
-  integrity sha512-w4Yv9CgWdj8kWGQEPNWFGJJ08dYEZHZpiaFR/DgZjCMBNqv9wus2Gy1qvHVJmJbzvAZbq6jdvFC+NYzEqAlNhQ==
+react-kapsule@^2.5:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-kapsule/-/react-kapsule-2.5.7.tgz#dcd957ae8e897ff48055fc8ff48ed04ebe3c5bd2"
+  integrity sha512-kifAF4ZPD77qZKc4CKLmozq6GY1sBzPEJTIJb0wWFK6HsePJatK3jXplZn2eeAt3x67CDozgi7/rO8fNQ/AL7A==
   dependencies:
-    fromentries "^1.3.2"
     jerrypick "^1.1.1"
 
 react-lifecycles-compat@^3.0.4:
@@ -18531,11 +18241,6 @@ signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
-simple-concat@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz"
-  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
-
 simple-eval@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/simple-eval/-/simple-eval-1.0.1.tgz#f91fc2b1583b7f5b972cdc088b769880087120a5"
@@ -18543,15 +18248,6 @@ simple-eval@1.0.1:
   dependencies:
     jsep "^1.3.6"
 
-simple-get@^2.7.0:
-  version "2.8.2"
-  resolved "https://registry.npmjs.org/simple-get/-/simple-get-2.8.2.tgz"
-  integrity sha512-Ijd/rV5o+mSBBs4F/x9oDPtTx9Zb6X9brmnXvMW4J7IR15ngi9q5xxqWBKU744jTZiaXtxaPL7uHG6vtN8kUkw==
-  dependencies:
-    decompress-response "^3.3.0"
-    once "^1.3.1"
-    simple-concat "^1.0.0"
-
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
@@ -18840,11 +18536,6 @@ strict-event-emitter@^0.4.3:
   resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz#ff347c8162b3e931e3ff5f02cfce6772c3b07eb3"
   integrity sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==
 
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz"
-  integrity sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==
-
 string-argv@^0.3.1:
   version "0.3.1"
   resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz"
@@ -19119,16 +18810,6 @@ stylus@^0.62.0:
     sax "~1.3.0"
     source-map "^0.7.3"
 
-super-animejs@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/super-animejs/-/super-animejs-3.1.0.tgz"
-  integrity sha512-6MFAFJDRuvwkovxQZPruuyHinTa4rgj4hNLOndjcYYhZLckoXtVRY9rJPuq8p6c/tgZJrFYEAYAfJ2/hhNtUCA==
-
-super-three@^0.147.1:
-  version "0.147.1"
-  resolved "https://registry.npmjs.org/super-three/-/super-three-0.147.1.tgz"
-  integrity sha512-H8yhlXqjscWpqYLhPQ/h3EfElNBxe3Ktp1tGVp13vBjIxF5sMVkAo2NpIDXkY8+MVhuTrA0ZN42IMNPdOKwKLg==
-
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -19319,60 +19000,6 @@ thingies@^1.20.0:
   resolved "https://registry.yarnpkg.com/thingies/-/thingies-1.21.0.tgz#e80fbe58fd6fdaaab8fad9b67bd0a5c943c445c1"
   integrity sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==
 
-three-bmfont-text@dmarcos/three-bmfont-text#21d017046216e318362c48abd1a48bddfb6e0733:
-  version "2.4.0"
-  resolved "https://codeload.github.com/dmarcos/three-bmfont-text/tar.gz/21d017046216e318362c48abd1a48bddfb6e0733"
-  dependencies:
-    array-shuffle "^1.0.1"
-    inherits "^2.0.1"
-    layout-bmfont-text "^1.2.0"
-    nice-color-palettes "^1.0.1"
-    object-assign "^4.0.1"
-    quad-indices "^2.0.1"
-    three-buffer-vertex-data dmarcos/three-buffer-vertex-data#69378fc58daf27d3b1d930df9f233473e4a4818c
-
-three-buffer-vertex-data@dmarcos/three-buffer-vertex-data#69378fc58daf27d3b1d930df9f233473e4a4818c:
-  version "1.1.0"
-  resolved "https://codeload.github.com/dmarcos/three-buffer-vertex-data/tar.gz/69378fc58daf27d3b1d930df9f233473e4a4818c"
-  dependencies:
-    flatten-vertex-data "^1.0.0"
-
-three-forcegraph@1:
-  version "1.41.8"
-  resolved "https://registry.npmjs.org/three-forcegraph/-/three-forcegraph-1.41.8.tgz"
-  integrity sha512-UvD0qgl3wfFQb+2FGuMn2FFL0Ss58WYlfk1g3D3/lbxNqEL1c0C/EbIrJYm9R02CvSzQ0bLnEZbSfD0wlaxmlA==
-  dependencies:
-    accessor-fn "1"
-    d3-array "1 - 3"
-    d3-force-3d "2 - 3"
-    d3-scale "1 - 4"
-    d3-scale-chromatic "1 - 3"
-    data-joint "1"
-    kapsule "1"
-    ngraph.forcelayout "3"
-    ngraph.graph "20"
-    tinycolor2 "1"
-
-three-pathfinding@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.npmjs.org/three-pathfinding/-/three-pathfinding-0.7.0.tgz"
-  integrity sha512-UwWvzgio1UFe81n5jKHNzB4B+AG3wfZ54OKp7bTb1MHuC3cy6RTtr0dbbiPQQoqxzr+DRArR2DUwQSEknw5+nw==
-
-three-render-objects@1:
-  version "1.28.3"
-  resolved "https://registry.npmjs.org/three-render-objects/-/three-render-objects-1.28.3.tgz"
-  integrity sha512-E4FUEirpNoHwIRn1z2pVioqAaOx8Gyyofb7ukNfuPn/M+MFMIIYszubceKBQmROCW+sF4dALta5W/+UoUCcTkg==
-  dependencies:
-    "@tweenjs/tween.js" "18 - 19"
-    accessor-fn "1"
-    kapsule "1"
-    polished "4"
-
-"three@>=0.118 <1":
-  version "0.152.0"
-  resolved "https://registry.npmjs.org/three/-/three-0.152.0.tgz"
-  integrity sha512-uvKoYo4b2bnqzsR4RJFuWecxwMKcgT1nFNmiWooCNr6AxZLCtfkj/xcfFgoi5mFopSVorh7bnvTHPfeW8DINGg==
-
 throat@^6.0.1:
   version "6.0.2"
   resolved "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz"
@@ -19405,11 +19032,6 @@ thunky@^1.0.2:
   resolved "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
-timed-out@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz"
-  integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
-
 timestamp-nano@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/timestamp-nano/-/timestamp-nano-1.0.1.tgz"
@@ -19425,7 +19047,7 @@ tiny-warning@^1.0.0:
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-tinycolor2@1, tinycolor2@1.6.0, tinycolor2@^1.6.0:
+tinycolor2@1.6.0, tinycolor2@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
@@ -20078,11 +19700,6 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-url-set-query@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/url-set-query/-/url-set-query-1.0.0.tgz"
-  integrity sha512-3AChu4NiXquPfeckE5R5cGdiHCMWJx1dwCWOmWIL4KHAziJNOFIYJlpGFeKDvwLPHovZRCxK3cYlwzqI9Vp+Gg==
-
 use-callback-ref@^1.3.0, use-callback-ref@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
@@ -20503,18 +20120,6 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
-webvr-polyfill-dpdb@^1.0.17:
-  version "1.0.18"
-  resolved "https://registry.npmjs.org/webvr-polyfill-dpdb/-/webvr-polyfill-dpdb-1.0.18.tgz"
-  integrity sha512-O0S1ZGEWyPvyZEkS2VbyV7mtir/NM9MNK3EuhbHPoJ8EHTky2pTXehjIl+IiDPr+Lldgx129QGt3NGly7rwRPw==
-
-webvr-polyfill@^0.10.12:
-  version "0.10.12"
-  resolved "https://registry.npmjs.org/webvr-polyfill/-/webvr-polyfill-0.10.12.tgz"
-  integrity sha512-trDJEVUQnRIVAnmImjEQ0BlL1NfuWl8+eaEdu+bs4g59c7OtETi/5tFkgEFDRaWEYwHntXs/uFF3OXZuutNGGA==
-  dependencies:
-    cardboard-vr-display "^1.0.19"
-
 whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz"
@@ -20658,11 +20263,6 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-word-wrapper@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/word-wrapper/-/word-wrapper-1.0.7.tgz"
-  integrity sha512-VOPBFCm9b6FyYKQYfn9AVn2dQvdR/YOVFV6IBRA1TBMJWKffvhEX1af6FMGrttILs2Q9ikCRhLqkbY2weW6dOQ==
-
 wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
@@ -20714,45 +20314,17 @@ ws@^8.18.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.2.tgz#42738b2be57ced85f46154320aabb51ab003705a"
   integrity sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==
 
-xhr-request@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/xhr-request/-/xhr-request-1.1.0.tgz"
-  integrity sha512-Y7qzEaR3FDtL3fP30k9wO/e+FBnBByZeybKOhASsGP30NIkRAAkKD/sCnLvgEfAIEC1rcmK7YG8f4oEnIrrWzA==
-  dependencies:
-    buffer-to-arraybuffer "^0.0.5"
-    object-assign "^4.1.1"
-    query-string "^5.0.1"
-    simple-get "^2.7.0"
-    timed-out "^4.0.1"
-    url-set-query "^1.0.0"
-    xhr "^2.0.4"
-
-xhr@^2.0.1, xhr@^2.0.4:
-  version "2.6.0"
-  resolved "https://registry.npmjs.org/xhr/-/xhr-2.6.0.tgz"
-  integrity sha512-/eCGLb5rxjx5e3mF1A7s+pLlR6CGyqWN91fv1JgER5mVWg1MZmlhBvy9kjcsOdRk8RrIujotWyJamfyrp+WIcA==
-  dependencies:
-    global "~4.4.0"
-    is-function "^1.0.1"
-    parse-headers "^2.0.0"
-    xtend "^4.0.0"
-
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xml-parse-from-string@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz"
-  integrity sha512-ErcKwJTF54uRzzNMXq2X5sMIy88zJvfN2DmdoQvy7PAFJ+tPRU6ydWuOKNMyfmOjdyBQTFREi60s0Y0SyI0G0g==
-
 xml-utils@^1.0.2:
   version "1.7.0"
   resolved "https://registry.npmjs.org/xml-utils/-/xml-utils-1.7.0.tgz"
   integrity sha512-bWB489+RQQclC7A9OW8e5BzbT8Tu//jtAOvkYwewFr+Q9T9KDGvfzC1lp0pYPEQPEoPQLDkmxkepSC/2gIAZGw==
 
-xml2js@0.5.0, xml2js@^0.4.5:
+xml2js@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.5.0.tgz#d9440631fbb2ed800203fad106f2724f62c493b7"
   integrity sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==
@@ -20864,6 +20436,11 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
+zustand@5.0.11:
+  version "5.0.11"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.11.tgz#99f912e590de1ca9ce6c6d1cab6cdb1f034ab494"
+  integrity sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==
+
 zwitch@^2.0.0, zwitch@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"

pkg/modules/user/config.go

@@ -22,7 +22,8 @@ type RootConfig struct {
 }
 
 type OrgConfig struct {
-	Name string `mapstructure:"name"`
+	ID   valuer.UUID `mapstructure:"id"`
+	Name string      `mapstructure:"name"`
 }
 
 type PasswordConfig struct {

pkg/modules/user/impluser/service.go

@@ -78,6 +78,43 @@ func (s *service) Stop(ctx context.Context) error {
 }
 
 func (s *service) reconcile(ctx context.Context) error {
+	if !s.config.Org.ID.IsZero() {
+		return s.reconcileWithOrgID(ctx)
+	}
+
+	return s.reconcileByName(ctx)
+}
+
+func (s *service) reconcileWithOrgID(ctx context.Context) error {
+	org, err := s.orgGetter.Get(ctx, s.config.Org.ID)
+	if err != nil {
+		if !errors.Ast(err, errors.TypeNotFound) {
+			return err // something really went wrong
+		}
+
+		// org was not found using id check if we can find an org using name
+
+		existingOrgByName, nameErr := s.orgGetter.GetByName(ctx, s.config.Org.Name)
+		if nameErr != nil && !errors.Ast(nameErr, errors.TypeNotFound) {
+			return nameErr // something really went wrong
+		}
+
+		// we found an org using name
+		if existingOrgByName != nil {
+			// the existing org has the same name as config but org id is different inform user with actionable message
+			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "organization with name %q already exists with a different ID %s (expected %s)", s.config.Org.Name, existingOrgByName.ID.StringValue(), s.config.Org.ID.StringValue())
+		}
+
+		// default - we did not found any org using id and name both - create a new org
+		newOrg := types.NewOrganizationWithID(s.config.Org.ID, s.config.Org.Name, s.config.Org.Name)
+		_, err = s.module.CreateFirstUser(ctx, newOrg, s.config.Email.String(), s.config.Email, s.config.Password)
+		return err
+	}
+
+	return s.reconcileRootUser(ctx, org.ID)
+}
+
+func (s *service) reconcileByName(ctx context.Context) error {
 	org, err := s.orgGetter.GetByName(ctx, s.config.Org.Name)
 	if err != nil {
 		if errors.Ast(err, errors.TypeNotFound) {

pkg/query-service/app/clickhouseReader/reader.go

@@ -4308,6 +4308,28 @@ func (r *ClickHouseReader) GetListResultV3(ctx context.Context, query string) ([
 
 }
 
+// GetHostMetricsExistenceAndEarliestTime returns (count, minFirstReportedUnixMilli, error) for the given host metric names
+// from distributed_metadata. When count is 0, minFirstReportedUnixMilli is 0.
+func (r *ClickHouseReader) GetMetricsExistenceAndEarliestTime(ctx context.Context, metricNames []string) (uint64, uint64, error) {
+	if len(metricNames) == 0 {
+		return 0, 0, nil
+	}
+
+	query := fmt.Sprintf(
+		`SELECT count(*) AS cnt, min(first_reported_unix_milli) AS min_first_reported
+		FROM %s.%s
+		WHERE metric_name IN @metric_names`,
+		constants.SIGNOZ_METRIC_DBNAME, constants.SIGNOZ_METADATA_TABLENAME)
+
+	var count, minFirstReported uint64
+	err := r.db.QueryRow(ctx, query, clickhouse.Named("metric_names", metricNames)).Scan(&count, &minFirstReported)
+	if err != nil {
+		zap.L().Error("error getting host metrics existence and earliest time", zap.Error(err))
+		return 0, 0, err
+	}
+	return count, minFirstReported, nil
+}
+
 func getPersonalisedError(err error) error {
 	if err == nil {
 		return nil

pkg/query-service/app/inframetrics/common.go

@@ -10,6 +10,7 @@ import (
 )
 
 var dotMetricMap = map[string]string{
+	"system_filesystem_usage":               "system.filesystem.usage",
 	"system_cpu_time":                       "system.cpu.time",
 	"system_memory_usage":                   "system.memory.usage",
 	"system_cpu_load_average_15m":           "system.cpu.load_average.15m",

pkg/query-service/app/inframetrics/hosts.go

@@ -67,10 +67,11 @@ var (
 		GetDotMetrics("os_type"),
 	}
 	metricNamesForHosts = map[string]string{
-		"cpu":    GetDotMetrics("system_cpu_time"),
-		"memory": GetDotMetrics("system_memory_usage"),
-		"load15": GetDotMetrics("system_cpu_load_average_15m"),
-		"wait":   GetDotMetrics("system_cpu_time"),
+		"filesystem": GetDotMetrics("system_filesystem_usage"),
+		"cpu":        GetDotMetrics("system_cpu_time"),
+		"memory":     GetDotMetrics("system_memory_usage"),
+		"load15":     GetDotMetrics("system_cpu_load_average_15m"),
+		"wait":       GetDotMetrics("system_cpu_time"),
 	}
 )
 
@@ -316,24 +317,15 @@ func (h *HostsRepo) getTopHostGroups(ctx context.Context, orgID valuer.UUID, req
 	return topHostGroups, allHostGroups, nil
 }
 
-func (h *HostsRepo) DidSendHostMetricsData(ctx context.Context, req model.HostListRequest) (bool, error) {
-
+// GetHostMetricsExistenceAndEarliestTime returns (count, minFirstReportedUnixMilli, error) for host metrics
+// in distributed_metadata. Uses metricNamesForHosts plus system.filesystem.usage.
+func (h *HostsRepo) GetHostMetricsExistenceAndEarliestTime(ctx context.Context, req model.HostListRequest) (uint64, uint64, error) {
 	names := []string{}
 	for _, metricName := range metricNamesForHosts {
 		names = append(names, metricName)
 	}
 
-	namesStr := "'" + strings.Join(names, "','") + "'"
-
-	query := fmt.Sprintf("SELECT count() FROM %s.%s WHERE metric_name IN (%s)",
-		constants.SIGNOZ_METRIC_DBNAME, constants.SIGNOZ_TIMESERIES_v4_1DAY_TABLENAME, namesStr)
-
-	count, err := h.reader.GetCountOfThings(ctx, query)
-	if err != nil {
-		return false, err
-	}
-
-	return count > 0, nil
+	return h.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
 }
 
 func (h *HostsRepo) IsSendingK8SAgentMetrics(ctx context.Context, req model.HostListRequest) ([]string, []string, error) {
@@ -412,8 +404,25 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 		resp.ClusterNames = clusterNames
 		resp.NodeNames = nodeNames
 	}
-	if sentAnyHostMetricsData, err := h.DidSendHostMetricsData(ctx, req); err == nil {
-		resp.SentAnyHostMetricsData = sentAnyHostMetricsData
+
+	// 1. Check if any host metrics exist and get earliest retention time
+	// if no hosts metrics exist, that means we should show the onboarding guide on UI, and return early.
+	// 2. If host metrics exist, but req.End is earlier than the earliest time of host metrics as read from
+	// metadata table, then we should convey the same to the user and return early
+	if count, minFirstReportedUnixMilli, err := h.GetHostMetricsExistenceAndEarliestTime(ctx, req); err == nil {
+		if count == 0 {
+			resp.SentAnyHostMetricsData = false
+			resp.Records = []model.HostListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyHostMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.HostListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
 	}
 
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))

pkg/query-service/constants/constants.go

@@ -125,6 +125,8 @@ const (
 	SIGNOZ_TIMESERIES_v4_6HRS_TABLENAME        = "distributed_time_series_v4_6hrs"
 	SIGNOZ_ATTRIBUTES_METADATA_TABLENAME       = "distributed_attributes_metadata"
 	SIGNOZ_ATTRIBUTES_METADATA_LOCAL_TABLENAME = "attributes_metadata"
+	SIGNOZ_METADATA_TABLENAME                  = "distributed_metadata"
+	SIGNOZ_METADATA_LOCAL_TABLENAME            = "metadata"
 )
 
 // alert related constants

pkg/query-service/interfaces/interface.go

@@ -100,6 +100,8 @@ type Reader interface {
 
 	GetCountOfThings(ctx context.Context, query string) (uint64, error)
 
+	GetMetricsExistenceAndEarliestTime(ctx context.Context, metricNames []string) (uint64, uint64, error)
+
 	//trace
 	GetTraceFields(ctx context.Context) (*model.GetFieldsResponse, *model.ApiError)
 	UpdateTraceField(ctx context.Context, field *model.UpdateField) *model.ApiError

pkg/query-service/model/infra.go

@@ -44,6 +44,7 @@ type HostListResponse struct {
 	IsSendingK8SAgentMetrics bool             `json:"isSendingK8SAgentMetrics"`
 	ClusterNames             []string         `json:"clusterNames"`
 	NodeNames                []string         `json:"nodeNames"`
+	EndTimeBeforeRetention   bool             `json:"endTimeBeforeRetention"`
 }
 
 func (r *HostListResponse) SortBy(orderBy *v3.OrderBy) {

pkg/types/organization.go

@@ -41,6 +41,21 @@ func NewOrganization(displayName string, name string) *Organization {
 	}
 }
 
+func NewOrganizationWithID(id valuer.UUID, displayName string, name string) *Organization {
+	return &Organization{
+		Identifiable: Identifiable{
+			ID: id,
+		},
+		TimeAuditable: TimeAuditable{
+			CreatedAt: time.Now(),
+			UpdatedAt: time.Now(),
+		},
+		Name:        name,
+		DisplayName: displayName,
+		Key:         NewOrganizationKey(id),
+	}
+}
+
 func NewOrganizationKey(orgID valuer.UUID) uint32 {
 	hasher := fnv.New32a()