fix: update name

docs/api/openapi.yml

@@ -3425,13 +3425,6 @@ components:
           nullable: true
           type: number
       type: object
-    DashboardtypesAxisScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -4174,7 +4167,6 @@ components:
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
-          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -4190,7 +4182,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4204,7 +4195,6 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
-      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4290,18 +4280,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/ScatterPlotPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -4381,16 +4359,6 @@ components:
         visualization:
           $ref: '#/components/schemas/DashboardtypesBasicVisualization'
       type: object
-    DashboardtypesPointDiameter:
-      maximum: 40
-      minimum: 2
-      nullable: true
-      type: integer
-    DashboardtypesPointOpacity:
-      maximum: 1
-      minimum: 0.1
-      nullable: true
-      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -4564,87 +4532,6 @@ components:
       required:
       - queryValue
       type: object
-    DashboardtypesScatterPlotAxes:
-      properties:
-        x:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
-        "y":
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
-      type: object
-    DashboardtypesScatterPlotAxis:
-      properties:
-        label:
-          description: Axis title. Empty draws none.
-          type: string
-        scale:
-          $ref: '#/components/schemas/DashboardtypesAxisScale'
-        softMax:
-          nullable: true
-          type: number
-        softMin:
-          nullable: true
-          type: number
-      type: object
-    DashboardtypesScatterPlotChartAppearance:
-      properties:
-        points:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
-      type: object
-    DashboardtypesScatterPlotDimensions:
-      properties:
-        colorBy:
-          description: Group-by label names (e.g. k8s.namespace.name) whose combined
-            values colour dots and drive the legend. Empty colours by every group-by
-            label.
-          items:
-            type: string
-          nullable: true
-          type: array
-        sizeBy:
-          description: Value column key that scales dot size. Empty draws every dot
-            at the default size.
-          type: string
-        x:
-          description: Value column key (queryName, or queryName.expression for a
-            multi-aggregation query) plotted on the x axis. Empty uses the first value
-            column.
-          type: string
-        "y":
-          description: Value column key plotted on the y axis. Empty uses the second
-            value column.
-          type: string
-      type: object
-    DashboardtypesScatterPlotPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
-        dimensions:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesTableFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        thresholds:
-          items:
-            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
-          nullable: true
-          type: array
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
-      type: object
-    DashboardtypesScatterPlotPoints:
-      properties:
-        maxSize:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-        minSize:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-        opacity:
-          $ref: '#/components/schemas/DashboardtypesPointOpacity'
-        size:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-      type: object
     DashboardtypesSource:
       enum:
       - user

frontend/__mocks__/uplotMock.ts

@@ -57,7 +57,6 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
-const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -71,7 +70,6 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -42,9 +42,6 @@
 		display: flex;
 		flex-direction: column;
 		padding: 0 16px;
-		// OverlayScrollbar owns the scroll. A native scrollbar here changes the
-		// body width when it toggles and shifts the header grid.
-		overflow: hidden;
 	}
 
 	.title {
@@ -72,7 +69,7 @@
 	}
 
 	.log-detail-drawer__content {
-		min-height: 100%;
+		height: 100%;
 	}
 
 	.log-detail-drawer__log {

frontend/src/components/LogDetail/index.tsx

@@ -5,7 +5,6 @@ import { Drawer, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
@@ -289,150 +288,148 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<OverlayScrollbar style={{ height: '100%' }}>
-				<div
-					className="log-detail-drawer__content"
-					data-log-detail-ignore="true"
-					data-testid="log-detail-drawer"
-				>
-					<div className="log-detail-drawer__log">
-						<LogStateIndicator
-							severityText={log.severity_text}
-							severityNumber={log.severity_number}
-							fontSize={options?.fontSize ?? FontSize.MEDIUM}
-						/>
-						<Tooltip
-							title={removeEscapeCharacters(logBody)}
-							placement="left"
-							mouseLeaveDelay={0}
-						>
-							<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-						</Tooltip>
+			<div
+				className="log-detail-drawer__content"
+				data-log-detail-ignore="true"
+				data-testid="log-detail-drawer"
+			>
+				<div className="log-detail-drawer__log">
+					<LogStateIndicator
+						severityText={log.severity_text}
+						severityNumber={log.severity_number}
+						fontSize={options?.fontSize ?? FontSize.MEDIUM}
+					/>
+					<Tooltip
+						title={removeEscapeCharacters(logBody)}
+						placement="left"
+						mouseLeaveDelay={0}
+					>
+						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+					</Tooltip>
 
-						<div className="log-overflow-shadow">&nbsp;</div>
-					</div>
-
-					<LogHighlights log={log} />
-
-					<div className="log-detail-drawer__section-divider" />
-
-					<div className="tabs-and-search">
-						<ToggleGroupSimple
-							type="single"
-							className="views-tabs"
-							onChange={handleModeChange}
-							value={selectedView}
-							items={[
-								{
-									value: VIEW_TYPES.OVERVIEW,
-									label: (
-										<div className="view-title">
-											<Table size={14} />
-											Overview
-										</div>
-									),
-								},
-								{
-									value: VIEW_TYPES.CONTEXT,
-									label: (
-										<div className="view-title">
-											<TextSelect size={14} />
-											Context
-										</div>
-									),
-								},
-								{
-									value: VIEW_TYPES.INFRAMETRICS,
-									label: (
-										<div className="view-title">
-											<Histogram size="md" />
-											Metrics
-										</div>
-									),
-								},
-							]}
-						/>
-
-						<div className="log-detail-drawer__actions">
-							{selectedView === VIEW_TYPES.CONTEXT && (
-								<Tooltip
-									title="Show Filters"
-									placement="topLeft"
-									aria-label="Show Filters"
-									mouseLeaveDelay={0}
-								>
-									<Button
-										variant="link"
-										color="secondary"
-										size="sm"
-										prefix={<Filter size="lg" />}
-										onClick={handleFilterVisible}
-									/>
-								</Tooltip>
-							)}
-						</div>
-					</div>
-					{isFilterVisible && contextQuery?.builder.queryData[0] && (
-						<div className="log-detail-drawer-query-container">
-							<QuerySearch
-								onChange={(value): void => handleQueryExpressionChange(value, 0)}
-								dataSource={DataSource.LOGS}
-								queryData={contextQuery?.builder.queryData[0]}
-								onRun={handleRunQuery}
-							/>
-						</div>
-					)}
-
-					{selectedView === VIEW_TYPES.OVERVIEW && (
-						<Overview
-							logData={log}
-							isListViewPanel={isListViewPanel}
-							handleChangeSelectedView={handleChangeSelectedView}
-							onApplyLogFilter={onApplyLogFilter}
-						/>
-					)}
-					{selectedView === VIEW_TYPES.CONTEXT && (
-						<ContextView
-							log={log}
-							filters={filters}
-							contextQuery={contextQuery}
-							isEdit={isEdit}
-						/>
-					)}
-					{selectedView === VIEW_TYPES.INFRAMETRICS && (
-						<InfraMetrics
-							clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-							podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-							nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-							hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-							timestamp={log.timestamp.toString()}
-							dataSource={DataSource.LOGS}
-						/>
-					)}
-
-					{selectedView === VIEW_TYPES.OVERVIEW && (
-						<div className="log-detail-drawer__footer-hint">
-							<div className="log-detail-drawer__footer-hint-content">
-								<Typography.Text
-									color="muted"
-									className="log-detail-drawer__footer-hint-text"
-								>
-									Use
-								</Typography.Text>
-								<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
-								<span>/</span>
-								<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
-								<Typography.Text
-									color="muted"
-									className="log-detail-drawer__footer-hint-text"
-								>
-									to view previous/next log
-								</Typography.Text>
-							</div>
-						</div>
-					)}
+					<div className="log-overflow-shadow">&nbsp;</div>
 				</div>
-			</OverlayScrollbar>
+
+				<LogHighlights log={log} />
+
+				<div className="log-detail-drawer__section-divider" />
+
+				<div className="tabs-and-search">
+					<ToggleGroupSimple
+						type="single"
+						className="views-tabs"
+						onChange={handleModeChange}
+						value={selectedView}
+						items={[
+							{
+								value: VIEW_TYPES.OVERVIEW,
+								label: (
+									<div className="view-title">
+										<Table size={14} />
+										Overview
+									</div>
+								),
+							},
+							{
+								value: VIEW_TYPES.CONTEXT,
+								label: (
+									<div className="view-title">
+										<TextSelect size={14} />
+										Context
+									</div>
+								),
+							},
+							{
+								value: VIEW_TYPES.INFRAMETRICS,
+								label: (
+									<div className="view-title">
+										<Histogram size="md" />
+										Metrics
+									</div>
+								),
+							},
+						]}
+					/>
+
+					<div className="log-detail-drawer__actions">
+						{selectedView === VIEW_TYPES.CONTEXT && (
+							<Tooltip
+								title="Show Filters"
+								placement="topLeft"
+								aria-label="Show Filters"
+								mouseLeaveDelay={0}
+							>
+								<Button
+									variant="link"
+									color="secondary"
+									size="sm"
+									prefix={<Filter size="lg" />}
+									onClick={handleFilterVisible}
+								/>
+							</Tooltip>
+						)}
+					</div>
+				</div>
+				{isFilterVisible && contextQuery?.builder.queryData[0] && (
+					<div className="log-detail-drawer-query-container">
+						<QuerySearch
+							onChange={(value): void => handleQueryExpressionChange(value, 0)}
+							dataSource={DataSource.LOGS}
+							queryData={contextQuery?.builder.queryData[0]}
+							onRun={handleRunQuery}
+						/>
+					</div>
+				)}
+
+				{selectedView === VIEW_TYPES.OVERVIEW && (
+					<Overview
+						logData={log}
+						isListViewPanel={isListViewPanel}
+						handleChangeSelectedView={handleChangeSelectedView}
+						onApplyLogFilter={onApplyLogFilter}
+					/>
+				)}
+				{selectedView === VIEW_TYPES.CONTEXT && (
+					<ContextView
+						log={log}
+						filters={filters}
+						contextQuery={contextQuery}
+						isEdit={isEdit}
+					/>
+				)}
+				{selectedView === VIEW_TYPES.INFRAMETRICS && (
+					<InfraMetrics
+						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+						timestamp={log.timestamp.toString()}
+						dataSource={DataSource.LOGS}
+					/>
+				)}
+
+				{selectedView === VIEW_TYPES.OVERVIEW && (
+					<div className="log-detail-drawer__footer-hint">
+						<div className="log-detail-drawer__footer-hint-content">
+							<Typography.Text
+								color="muted"
+								className="log-detail-drawer__footer-hint-text"
+							>
+								Use
+							</Typography.Text>
+							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
+							<span>/</span>
+							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
+							<Typography.Text
+								color="muted"
+								className="log-detail-drawer__footer-hint-text"
+							>
+								to view previous/next log
+							</Typography.Text>
+						</div>
+					</div>
+				)}
+			</div>
 		</Drawer>
 	);
 }

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -21,6 +21,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -29,7 +30,6 @@ import { capitalize, isEmpty } from 'lodash-es';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import TruncatedTooltip from './TruncatedTooltip';
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	ALL_SELECTED_VALUE,
@@ -729,71 +729,65 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			};
 
 			return (
-				<TruncatedTooltip
+				<div
 					key={option.value || `option-${index}`}
-					title={String(option.label || '')}
+					id={optionId}
+					ref={(el): void => {
+						if (index !== undefined) {
+							optionRefs.current[index] = el;
+						}
+					}}
+					className={cx('option-item', {
+						selected: isSelected,
+						active: isActive,
+					})}
+					onKeyDown={(e): void => {
+						if ((e.key === 'Enter' || e.key === SPACEKEY) && isActive) {
+							e.stopPropagation();
+							e.preventDefault();
+							handleItemSelection();
+						}
+					}}
+					onMouseEnter={(): void => {
+						setActiveIndex(index ?? -1);
+						setActiveChipIndex(-1); // Clear chip selection when hovering ALL option
+					}}
+					role="option"
+					aria-selected={isSelected}
+					aria-disabled={option.disabled}
+					tabIndex={isActive ? 0 : -1}
 				>
-					{(textRef): JSX.Element => (
-						<div
-							id={optionId}
-							ref={(el): void => {
-								if (index !== undefined) {
-									optionRefs.current[index] = el;
-								}
-							}}
-							className={cx('option-item', {
-								selected: isSelected,
-								active: isActive,
-							})}
-							onKeyDown={(e): void => {
-								if ((e.key === 'Enter' || e.key === SPACEKEY) && isActive) {
-									e.stopPropagation();
-									e.preventDefault();
-									handleItemSelection();
-								}
-							}}
-							onMouseEnter={(): void => {
-								setActiveIndex(index ?? -1);
-								setActiveChipIndex(-1); // Clear chip selection when hovering ALL option
-							}}
-							role="option"
-							aria-selected={isSelected}
-							aria-disabled={option.disabled}
-							tabIndex={isActive ? 0 : -1}
-						>
-							<Checkbox
-								value={isSelected}
-								className="option-checkbox"
+					<Checkbox
+						value={isSelected}
+						className="option-checkbox"
+						onClick={(e): void => selectFromButton(e, 'checkbox')}
+					>
+						<div className="option-content">
+							<Typography.Text truncate={1} className="option-label-text">
+								{highlightMatchedText(String(option.label || ''), searchText)}
+							</Typography.Text>
+							{(option.type === 'custom' || option.type === 'regex') && (
+								<div className="option-badge">{capitalize(option.type)}</div>
+							)}
+							{option.value && ensureValidOption(option.value) && (
+								<Button
+									type="text"
+									className="only-btn"
+									onClick={(e): void => selectFromButton(e, 'option')}
+								>
+									{currentToggleTagValue({ option: option.value })}
+								</Button>
+							)}
+							<Button
+								type="text"
+								className="toggle-btn"
 								onClick={(e): void => selectFromButton(e, 'checkbox')}
 							>
-								<div className="option-content">
-									<span ref={textRef} className="option-label-text">
-										{highlightMatchedText(String(option.label || ''), searchText)}
-									</span>
-									{(option.type === 'custom' || option.type === 'regex') && (
-										<div className="option-badge">{capitalize(option.type)}</div>
-									)}
-									{option.value && ensureValidOption(option.value) && (
-										<Button
-											type="text"
-											className="only-btn"
-											onClick={(e): void => selectFromButton(e, 'option')}
-										>
-											{currentToggleTagValue({ option: option.value })}
-										</Button>
-									)}
-									<Button
-										type="text"
-										className="toggle-btn"
-										onClick={(e): void => selectFromButton(e, 'checkbox')}
-									>
-										Toggle
-									</Button>
-								</div>
-							</Checkbox>
+								Toggle
+							</Button>
 						</div>
-					)}
-				</TruncatedTooltip>
+					</Checkbox>
+				</div>
 			);
 		},
 		[

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,7 +16,6 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';
@@ -26,7 +25,6 @@ import { capitalize, isEmpty } from 'lodash-es';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import TruncatedTooltip from './TruncatedTooltip';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
@@ -209,46 +207,41 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const optionId = `option-${index}`;
 
 			return (
-				<TruncatedTooltip key={option.value} title={String(option.label || '')}>
-					{(textRef): JSX.Element => (
-						<div
-							id={optionId}
-							ref={(el): void => {
-								if (index !== undefined) {
-									optionRefs.current[index] = el;
-								}
-							}}
-							className={cx('option-item', {
-								selected: isSelected,
-								active: isActive,
-							})}
-							onClick={(e): void => {
-								e.stopPropagation();
-								handleSelection();
-							}}
-							onKeyDown={(e): void => {
-								if (e.key === 'Enter' || e.key === SPACEKEY) {
-									e.preventDefault();
-									handleSelection();
-								}
-							}}
-							onMouseEnter={(): void => setActiveOptionIndex(index || -1)}
-							role="option"
-							aria-selected={isSelected}
-							aria-disabled={option.disabled}
-							tabIndex={isActive ? 0 : -1}
-						>
-							<div className="option-content">
-								<span ref={textRef} className="option-label-text">
-									{highlightMatchedText(String(option.label || ''), searchText)}
-								</span>
-								{option.type === 'custom' && (
-									<div className="option-badge">{capitalize(option.type)}</div>
-								)}
-							</div>
-						</div>
-					)}
-				</TruncatedTooltip>
+				<div
+					key={option.value}
+					id={optionId}
+					ref={(el): void => {
+						if (index !== undefined) {
+							optionRefs.current[index] = el;
+						}
+					}}
+					className={cx('option-item', {
+						selected: isSelected,
+						active: isActive,
+					})}
+					onClick={(e): void => {
+						e.stopPropagation();
+						handleSelection();
+					}}
+					onKeyDown={(e): void => {
+						if (e.key === 'Enter' || e.key === SPACEKEY) {
+							e.preventDefault();
+							handleSelection();
+						}
+					}}
+					onMouseEnter={(): void => setActiveOptionIndex(index || -1)}
+					role="option"
+					aria-selected={isSelected}
+					aria-disabled={option.disabled}
+					tabIndex={isActive ? 0 : -1}
+				>
+					<div className="option-content">
+						<div>{highlightMatchedText(String(option.label || ''), searchText)}</div>
+						{option.type === 'custom' && (
+							<div className="option-badge">{capitalize(option.type)}</div>
+						)}
+					</div>
+				</div>
 			);
 		},
 		[highlightMatchedText, searchText, onChange, activeOptionIndex],
@@ -709,67 +702,50 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	// ===== Final Processing =====
 
 	// Apply highlight to matched text in options
-	const optionsWithHighlight = useMemo(() => {
-		const matching =
-			options?.filter((option) =>
-				String(option.label || '')
-					.toLowerCase()
-					.includes(searchText.toLowerCase()),
-			) ?? [];
-
-		// antd shows a value with no matching option as a bare string, so keep the
-		// selected value listed to render it through the tooltip label below.
-		return (
-			isEmpty(value)
-				? matching
-				: prioritizeOrAddOptionForSingleSelect(matching, value)
-		).map((option) => ({
-			...option,
-			// Rendered as the selected value in the closed control.
-			label: (
-				<TruncatedTooltip title={String(option.label || '')} side="bottom">
-					{(textRef): JSX.Element => (
-						<span ref={textRef} className="option-label-text">
-							{highlightMatchedText(String(option.label || ''), searchText)}
-						</span>
-					)}
-				</TruncatedTooltip>
-			),
-		}));
-	}, [options, searchText, value, highlightMatchedText]);
+	const optionsWithHighlight = useMemo(
+		() =>
+			options
+				?.filter((option) =>
+					String(option.label || '')
+						.toLowerCase()
+						.includes(searchText.toLowerCase()),
+				)
+				?.map((option) => ({
+					...option,
+					label: highlightMatchedText(String(option.label || ''), searchText),
+				})),
+		[options, searchText, highlightMatchedText],
+	);
 
 	// ===== Component Rendering =====
 	return (
-		// Self-provided so label tooltips work wherever this select is rendered.
-		<TooltipProvider>
-			<Select
-				ref={selectRef}
-				className={cx('custom-select', className)}
-				placeholder={placeholder}
-				showSearch
-				filterOption={false}
-				onSearch={handleSearch}
-				value={value}
-				onChange={onChange}
-				onDropdownVisibleChange={handleDropdownVisibleChange}
-				open={isOpen}
-				options={optionsWithHighlight}
-				defaultActiveFirstOption={defaultActiveFirstOption}
-				popupMatchSelectWidth={popupMatchSelectWidth}
-				allowClear={allowClear ? { clearIcon } : false}
-				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
-				dropdownRender={customDropdownRender}
-				menuItemSelectedIcon={null}
-				popupClassName={cx('custom-select-dropdown-container', popupClassName)}
-				listHeight={300}
-				placement={placement}
-				optionFilterProp="label"
-				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-				onKeyDown={handleKeyDown}
-				{...rest}
-			/>
-		</TooltipProvider>
+		<Select
+			ref={selectRef}
+			className={cx('custom-select', className)}
+			placeholder={placeholder}
+			showSearch
+			filterOption={false}
+			onSearch={handleSearch}
+			value={value}
+			onChange={onChange}
+			onDropdownVisibleChange={handleDropdownVisibleChange}
+			open={isOpen}
+			options={optionsWithHighlight}
+			defaultActiveFirstOption={defaultActiveFirstOption}
+			popupMatchSelectWidth={popupMatchSelectWidth}
+			allowClear={allowClear ? { clearIcon } : false}
+			getPopupContainer={getPopupContainer ?? popupContainer}
+			suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+			dropdownRender={customDropdownRender}
+			menuItemSelectedIcon={null}
+			popupClassName={cx('custom-select-dropdown-container', popupClassName)}
+			listHeight={300}
+			placement={placement}
+			optionFilterProp="label"
+			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+			onKeyDown={handleKeyDown}
+			{...rest}
+		/>
 	);
 };
 

frontend/src/components/NewSelect/TruncatedTooltip.module.scss

@@ -1,4 +0,0 @@
-// Above the antd select popup it is shown from.
-.tooltipContent {
-	--tooltip-z-index: 2100;
-}

frontend/src/components/NewSelect/TruncatedTooltip.tsx

@@ -1,41 +0,0 @@
-import { ReactElement, RefObject, useRef, useState } from 'react';
-import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
-
-import styles from './TruncatedTooltip.module.scss';
-
-interface TruncatedTooltipProps {
-	title: string;
-	side?: TooltipSimpleProps['side'];
-	/** Renders the trigger; attach the ref to the element that may truncate. */
-	children: (textRef: RefObject<HTMLSpanElement>) => ReactElement;
-}
-
-function TruncatedTooltip({
-	title,
-	side = 'right',
-	children,
-}: TruncatedTooltipProps): JSX.Element {
-	const textRef = useRef<HTMLSpanElement>(null);
-	const [open, setOpen] = useState(false);
-
-	const handleOpenChange = (next: boolean): void => {
-		const el = textRef.current;
-		setOpen(next && !!el && el.scrollWidth > el.clientWidth);
-	};
-
-	return (
-		<TooltipSimple
-			title={title}
-			side={side}
-			arrow
-			delayDuration={300}
-			open={open}
-			onOpenChange={handleOpenChange}
-			tooltipContentProps={{ className: styles.tooltipContent }}
-		>
-			{children(textRef)}
-		</TooltipSimple>
-	);
-}
-
-export default TruncatedTooltip;

frontend/src/components/NewSelect/__test__/CustomSelect.selectedTooltip.test.tsx

@@ -1,34 +0,0 @@
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import CustomSelect from '../CustomSelect';
-
-const LABEL = '/oteldemo.RecommendationService/ListRecommendations';
-
-describe('CustomSelect selected value tooltip', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-		jest.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(400);
-		jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(200);
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-		jest.restoreAllMocks();
-	});
-
-	it.each([
-		['listed in the options', [{ label: LABEL, value: LABEL }]],
-		['missing from the options', [{ label: 'other', value: 'other' }]],
-	])('reveals a truncated selected value %s on hover', async (_, options) => {
-		render(<CustomSelect options={options} value={LABEL} />);
-
-		const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-		await user.hover(screen.getByText(LABEL));
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		expect(screen.getByRole('tooltip')).toHaveTextContent(LABEL);
-	});
-});

frontend/src/components/NewSelect/__test__/TruncatedTooltip.test.tsx

@@ -1,63 +0,0 @@
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-
-import TruncatedTooltip from '../TruncatedTooltip';
-
-const LABEL = '/oteldemo.RecommendationService/ListRecommendations';
-
-function renderRow(scrollWidth: number, clientWidth: number): void {
-	jest
-		.spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
-		.mockReturnValue(scrollWidth);
-	jest
-		.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
-		.mockReturnValue(clientWidth);
-
-	render(
-		<TooltipProvider>
-			<TruncatedTooltip title={LABEL}>
-				{(textRef): JSX.Element => (
-					<div data-testid="row">
-						<span ref={textRef}>{LABEL}</span>
-					</div>
-				)}
-			</TruncatedTooltip>
-		</TooltipProvider>,
-	);
-}
-
-async function hover(element: HTMLElement): Promise<void> {
-	const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-	await user.hover(element);
-	act(() => {
-		jest.advanceTimersByTime(500);
-	});
-}
-
-describe('TruncatedTooltip', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-		jest.restoreAllMocks();
-	});
-
-	it('reveals truncated text when its row is hovered', async () => {
-		renderRow(400, 200);
-
-		await hover(screen.getByTestId('row'));
-
-		expect(screen.getByRole('tooltip')).toHaveTextContent(LABEL);
-	});
-
-	it('shows no tooltip when the text fits', async () => {
-		renderRow(200, 200);
-
-		await hover(screen.getByTestId('row'));
-
-		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-	});
-});

frontend/src/components/NewSelect/stories/NewSelect.stories.tsx

@@ -135,51 +135,6 @@ const LONG_LABEL_OPTION = {
 	value: 'checkout-payment-authorisation',
 };
 
-/** Truncation: hovering a cut-off option reveals its full label beside the row. */
-export const TruncatedOption: Story = {
-	args: { options: [LONG_LABEL_OPTION, ...options] },
-	play: async (): Promise<void> => {
-		await userEvent.click(
-			await screen.findByRole('combobox', { name: 'Service' }),
-		);
-		await userEvent.hover(
-			await screen.findByRole('option', { name: LONG_LABEL_OPTION.label }),
-		);
-		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
-	},
-};
-
-/** Truncation: hovering a cut-off selected value reveals it in full. */
-export const TruncatedValue: Story = {
-	args: {
-		options: [LONG_LABEL_OPTION, ...options],
-		value: LONG_LABEL_OPTION.value,
-	},
-	play: async (): Promise<void> => {
-		await userEvent.hover(await screen.findByText(LONG_LABEL_OPTION.label));
-		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
-	},
-};
-
-/** Truncation: a multi-select option reveals its full label the same way. */
-export const MultiTruncatedOption: Story = {
-	render: (): JSX.Element => (
-		<CustomMultiSelect
-			aria-label="Services"
-			options={[LONG_LABEL_OPTION, ...options]}
-		/>
-	),
-	play: async (): Promise<void> => {
-		await userEvent.click(
-			await screen.findByRole('combobox', { name: 'Services' }),
-		);
-		await userEvent.hover(
-			await screen.findByRole('option', { name: LONG_LABEL_OPTION.label }),
-		);
-		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
-	},
-};
-
 /**
  * Every tooltip the select renders, held open: the selected chip revealing the
  * option label it was cut from. Nothing bounds that label, so the chip is given

frontend/src/components/NewSelect/styles.scss

@@ -29,13 +29,6 @@ $custom-border-color: #2c3044;
 		background-color: var(--l2-background);
 		color: color-mix(in srgb, var(--border) 70%, transparent);
 	}
-
-	// The search input overlays the selected value; lift the value above it while
-	// closed so hovers reach its tooltip. Clicks still open the select and focus the input.
-	&:not(.ant-select-open) .ant-select-selection-item {
-		position: relative;
-		z-index: 1;
-	}
 }
 
 // Keep chip styles ONLY in the multi-select
@@ -230,33 +223,6 @@ $custom-border-color: #2c3044;
 	}
 }
 
-// Ellipsized option label; also the selected value in the closed single select.
-.option-label-text {
-	display: block;
-	flex: 1 1 auto;
-	min-width: 0;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-// overscroll-behavior only holds on a box that overflows; a 1px sentinel past
-// the bottom makes even a short list overflow, so the wheel never scrolls the page.
-.custom-select-dropdown,
-.custom-multiselect-dropdown {
-	position: relative;
-	overscroll-behavior: contain;
-
-	&::after {
-		content: '';
-		position: absolute;
-		top: 100%;
-		left: 0;
-		width: 1px;
-		height: 1px;
-	}
-}
-
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -5,7 +5,7 @@ import {
 	InframonitoringtypesHostRecordDTO,
 	InframonitoringtypesHostStatusDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/types';
+import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { TextNoData } from 'container/InfraMonitoringK8sV2/components';

frontend/src/container/InfraMonitoringK8sV2/Base/EntityGroupHeader.module.scss

@@ -2,13 +2,6 @@
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-5);
-
-	// A block span leaves the icon on the text baseline, a couple of pixels
-	// above the centre of the row it sits in
-	[data-slot='icon'] {
-		display: inline-flex;
-		align-items: center;
-	}
 }
 
 .infoIcon {

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.stories.mocks.tsx

@@ -1,78 +0,0 @@
-import { rest } from 'msw';
-
-import { toggleControl } from '@/storybook/controls/controls';
-import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
-
-export const POD_UID = '63edbad0-398e-48e5-baba-f7ded7c73f1b';
-const POD_NAME = 'app-demo-loadgenerator-579fbdd749-q5kgd';
-export const NODE_NAME = 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7';
-
-const POD_META = {
-	'k8s.pod.uid': POD_UID,
-	'k8s.pod.name': POD_NAME,
-	'k8s.namespace.name': 'generator',
-	'k8s.cluster.name': 'mgmt',
-	'k8s.node.name': NODE_NAME,
-	'k8s.deployment.name': 'app-demo-loadgenerator',
-};
-
-const podRecord = {
-	podUID: POD_UID,
-	podCPU: 0.92,
-	podCPURequest: 31,
-	podCPULimit: 30.7,
-	podMemory: 148 * 1024 * 1024,
-	podMemoryRequest: 42,
-	podMemoryLimit: 38,
-	podStatus: 'running',
-	podRestarts: 0,
-	podAge: 49_000_000,
-	meta: POD_META,
-};
-
-const container = {
-	containerName: 'loadgenerator',
-	podName: POD_NAME,
-	status: 'running',
-	ready: true,
-	restarts: 0,
-	meta: POD_META,
-};
-
-const list = (records: unknown[]): Record<string, unknown> => ({
-	status: 'success',
-	data: { type: 'list', records, total: records.length },
-});
-
-export const drawerMocks = defineStoryMocks({
-	controls: {
-		openedFromANode: toggleControl('Opened from a node', {
-			group: 'Drawer',
-			value: true,
-		}),
-	},
-	handlers: () => [
-		rest.post('http://localhost/api/v2/infra_monitoring/pods', (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(list([podRecord]))),
-		),
-
-		rest.post(
-			'http://localhost/api/v2/infra_monitoring/kube_containers',
-			(_req, res, ctx) => res(ctx.status(200), ctx.json(list([container]))),
-		),
-
-		rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
-			),
-		),
-
-		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
-			),
-		),
-	],
-});

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.stories.tsx

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { storyMocks } from '@/storybook/controls/defineStoryMocks';
-import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
-
-import { podEntityConfig } from '../Pods/entity.config';
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../constants';
-import K8sBaseDetails from './K8sBaseDetails';
-import {
-	drawerMocks,
-	NODE_NAME,
-	POD_UID,
-} from './K8sBaseDetails.stories.mocks';
-import type { K8sBaseDetailsProps } from './types';
-import {
-	getDrawerHistoryDepth,
-	pushDrawerHistory,
-	resetDrawerHistory,
-} from './useDrawerHistoryStore';
-
-type DrawerArgs = PageStoryArgs<typeof drawerMocks> &
-	K8sBaseDetailsProps<unknown>;
-
-const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
-
-const meta = {
-	title: 'Infra monitoring/Kubernetes drawer',
-	component: K8sBaseDetails as (props: DrawerArgs) => JSX.Element,
-	...storyMocks(drawerMocks, { route }),
-	decorators: [
-		(Story, context): JSX.Element => {
-			// The back control appears only for a resource opened from another
-			const depth = getDrawerHistoryDepth();
-			if (context.args.openedFromANode && depth === 0) {
-				pushDrawerHistory({
-					params: { selectedItem: NODE_NAME, category: InfraMonitoringEntity.NODES },
-					category: InfraMonitoringEntity.NODES,
-					label: NODE_NAME,
-					entity: { nodeName: NODE_NAME },
-					queryKeyPrefix: 'node',
-				});
-			}
-			if (!context.args.openedFromANode && depth > 0) {
-				resetDrawerHistory();
-			}
-
-			return <Story />;
-		},
-	],
-} satisfies Meta<DrawerArgs>;
-
-export default meta;
-
-type Story = StoryObj<DrawerArgs>;
-
-/** A pod opened from a node's overview tab, so the header leads with the way back. */
-export const Default: Story = {
-	args: { ...podEntityConfig.details } as Partial<DrawerArgs> as DrawerArgs,
-};

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { ArrowLeft, X } from '@signozhq/icons';
+import { X } from '@signozhq/icons';
 import { Divider } from '@signozhq/ui/divider';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper, DrawerWrapperProps } from '@signozhq/ui/drawer';
@@ -16,19 +16,12 @@ import {
 	useGlobalTimeStore,
 } from 'store/globalTime';
 
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	K8S_CATEGORY_SINGULAR_LABELS,
-} from '../constants';
+import { INFRA_MONITORING_K8S_PARAMS_KEYS } from '../constants';
 import { useInfraMonitoringSelectedItemParams } from '../hooks';
 import CopyButton from 'periscope/components/CopyButton/CopyButton';
 import LoadingContainer from '../LoadingContainer';
 
 import K8sBaseDetailsContent from './K8sBaseDetailsContent';
-import { CategoryIcon } from './categoryIcons';
-import { getEntityNameAttributeKey } from './relations';
-import { useDrawerHistoryStore } from './useDrawerHistoryStore';
-import { usePrimeEntityDetails } from './usePrimeEntityDetails';
 import { K8sBaseDetailsProps } from './types';
 import { useDrawerLifecycleStore } from './useDrawerLifecycleStore';
 
@@ -93,11 +86,6 @@ export default function K8sBaseDetails<T>({
 		useInfraMonitoringSelectedItemParams();
 	const selectedItem = selectedItemParams.selectedItem;
 
-	const selectedItemExpression = useMemo(
-		() => getSelectedItemExpression(selectedItemParams),
-		[getSelectedItemExpression, selectedItemParams],
-	);
-
 	const entityQueryKey = useMemo(
 		() =>
 			getAutoRefreshQueryKey(
@@ -133,10 +121,9 @@ export default function K8sBaseDetails<T>({
 			const { minTime, maxTime } = getMinMaxTime();
 			const start = Math.floor(minTime / NANO_SECOND_MULTIPLIER);
 			const end = Math.floor(maxTime / NANO_SECOND_MULTIPLIER);
-			return fetchEntityData(
-				{ filter: { expression: selectedItemExpression }, start, end },
-				signal,
-			);
+			const expression = getSelectedItemExpression(selectedItemParams);
+
+			return fetchEntityData({ filter: { expression }, start, end }, signal);
 		},
 		cacheTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
 		staleTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
@@ -171,29 +158,9 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [selectedItem, markDrawerOpened, markDrawerClosed]);
 
-	const previousEntry = useDrawerHistoryStore(
-		(store) => store.entries[store.entries.length - 1] ?? null,
-	);
-	const popDrawerHistory = useDrawerHistoryStore((store) => store.pop);
-	const primeDetails = usePrimeEntityDetails();
-	const resetHistory = useDrawerHistoryStore((store) => store.reset);
-
 	const handleClose = useCallback((): void => {
-		resetHistory();
 		setSelectedItemParams(null);
-	}, [resetHistory, setSelectedItemParams]);
-
-	// Steps back through resources opened from an overview tab
-	const handleBack = useCallback((): void => {
-		const previous = popDrawerHistory();
-
-		if (!previous) {
-			return;
-		}
-
-		primeDetails(previous);
-		setSelectedItemParams(previous.params);
-	}, [popDrawerHistory, primeDetails, setSelectedItemParams]);
+	}, [setSelectedItemParams]);
 
 	const handleOpenChange = useCallback(
 		(open: boolean): void => {
@@ -205,25 +172,11 @@ export default function K8sBaseDetails<T>({
 	);
 
 	const handleCopyId = useCallback((): void => {
-		toast.success(
-			`${K8S_CATEGORY_SINGULAR_LABELS[category]} name copied to clipboard`,
-			{ position: 'bottom-left' },
-		);
-	}, [category]);
+		toast.success('ID copied to clipboard', { position: 'bottom-left' });
+	}, []);
 
 	const entityName = entity ? getEntityName(entity) : '';
 
-	// meta carries the resource's parents; its own name comes from the config
-	const entityAttributes = useMemo((): Record<string, string> => {
-		const meta = (entity as { meta?: Record<string, string> | null } | null)
-			?.meta;
-
-		return {
-			...(meta ?? {}),
-			...(entityName ? { [getEntityNameAttributeKey(category)]: entityName } : {}),
-		};
-	}, [entity, entityName, category]);
-
 	useEffect(() => {
 		if (entity) {
 			void logEvent(InfraMonitoringEvents.PageVisited, {
@@ -234,48 +187,20 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [entity, eventCategory]);
 
-	// Names the resource it returns to, so a drill several levels deep stays clear
-	const backTarget = previousEntry
-		? `Back to ${K8S_CATEGORY_SINGULAR_LABELS[previousEntry.category]}`
-		: '';
-	const backLabel = previousEntry ? `${backTarget}: ${previousEntry.label}` : '';
-
 	// TODO(H4ad): Improve this on component level
 	// DrawerWrapper types `title` as string but renders any ReactNode.
 	const drawerTitle = (
 		<>
-			{/* One control: step back where there is a trail, close otherwise.
-			    Clicking outside the drawer closes it either way. The label is text
-			    rather than a tooltip, which a click on the control would dismiss. */}
-			{previousEntry ? (
-				<Button
-					variant="ghost"
-					size="sm"
-					color="secondary"
-					onClick={handleBack}
-					data-testid="drawer-back-button"
-					className={styles.backButton}
-					aria-label={backLabel}
-					prefix={<ArrowLeft size={14} />}
-				>
-					{backTarget}
-				</Button>
-			) : (
-				<Button
-					variant="ghost"
-					size="sm"
-					color="secondary"
-					onClick={handleClose}
-					data-testid="close-drawer-button"
-					className={styles.closeButton}
-					prefix={<X />}
-				/>
-			)}
+			<Button
+				variant="ghost"
+				size="sm"
+				color="secondary"
+				onClick={handleClose}
+				data-testid="close-drawer-button"
+				className={styles.closeButton}
+				prefix={<X />}
+			/>
 			<Divider type="vertical" />
-			<span className={styles.entityKind} data-testid="drawer-entity-kind">
-				<CategoryIcon category={category} />
-				{K8S_CATEGORY_SINGULAR_LABELS[category]}
-			</span>
 			<Typography.Text className={styles.title}>
 				{entityName ||
 					((isEntityError || hasResponseError) && 'Failed to load entity details') ||
@@ -283,8 +208,8 @@ export default function K8sBaseDetails<T>({
 					'-'}
 			</Typography.Text>
 			<CopyButton
-				value={entityName || selectedItem || ''}
-				ariaLabel={`Copy ${K8S_CATEGORY_SINGULAR_LABELS[category]} name`}
+				value={selectedItem ?? ''}
+				ariaLabel="Copy ID"
 				className={styles.copyIdButton}
 				testId="copy-id-button"
 				onCopy={handleCopyId}
@@ -346,8 +271,6 @@ export default function K8sBaseDetails<T>({
 						customTabs={customTabs}
 						logsAndTracesInitialExpression={logsAndTracesInitialExpression}
 						eventsInitialExpression={eventsInitialExpression}
-						entityAttributes={entityAttributes}
-						entityName={entityName}
 					/>
 				</GlobalTimeProvider>
 			)}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetailsContent.tsx

@@ -4,7 +4,6 @@ import {
 	ChevronsLeftRight,
 	Compass,
 	DraftingCompass,
-	LayoutGrid,
 	ScrollText,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
@@ -32,7 +31,6 @@ import EntityEvents from '../EntityDetailsUtils/EntityEvents';
 import EntityLogs from '../EntityDetailsUtils/EntityLogs';
 import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
 import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
-import EntityOverview from '../EntityDetailsUtils/EntityOverview/EntityOverview';
 import EntityTraces from '../EntityDetailsUtils/EntityTraces';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
 import {
@@ -69,16 +67,12 @@ export default function K8sBaseDetailsContent<T>({
 	customTabs,
 	logsAndTracesInitialExpression,
 	eventsInitialExpression,
-	entityAttributes,
-	entityName,
 }: K8sBaseDetailsContentProps<T>): JSX.Element {
 	const { timeRange, selectedInterval, handleTimeChange } =
 		useEntityDetailsTime();
 
 	const tabVisibility = useMemo(
 		() => ({
-			// Declared per category, since only a kubernetes resource relates to others
-			showOverview: false,
 			showMetrics: true,
 			showLogs: true,
 			showTraces: true,
@@ -92,9 +86,6 @@ export default function K8sBaseDetailsContent<T>({
 
 	const validTabs = useMemo(() => {
 		const tabs: string[] = [];
-		if (tabVisibility.showOverview) {
-			tabs.push(VIEW_TYPES.OVERVIEW);
-		}
 		if (tabVisibility.showMetrics) {
 			tabs.push(VIEW_TYPES.METRICS);
 		}
@@ -113,28 +104,14 @@ export default function K8sBaseDetailsContent<T>({
 		return tabs;
 	}, [tabVisibility, customTabs]);
 
-	const defaultView = validTabs[0] || VIEW_TYPES.METRICS;
-
 	useEffect(() => {
-		if (
-			!hideDetailViewTabs &&
-			selectedView &&
-			!validTabs.includes(selectedView)
-		) {
-			void setSelectedView(defaultView);
+		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
+			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
+			void setSelectedView(firstValid);
 		}
-	}, [
-		hideDetailViewTabs,
-		selectedView,
-		validTabs,
-		defaultView,
-		setSelectedView,
-	]);
+	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
 
-	// An absent view param lands on the first tab the category offers
-	const effectiveView = hideDetailViewTabs
-		? VIEW_TYPES.METRICS
-		: (selectedView ?? defaultView);
+	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
 
 	// Wait until the view is a valid tab so we don't log a pending value before
 	// the validation effect above corrects an out-of-scope query param
@@ -192,20 +169,20 @@ export default function K8sBaseDetailsContent<T>({
 			entity: InfraMonitoringEvents.K8sEntity,
 			page: InfraMonitoringEvents.DetailedPage,
 			category: eventCategory,
-			view: effectiveView,
+			view: selectedView,
 		});
 
 		logInfraExplorerNavigatedEvent({
 			entityType: category,
 			destination:
-				effectiveView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
+				selectedView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
 			source: 'tab_cta_button',
-			tab: effectiveView,
+			tab: selectedView,
 			sourceKey: null,
 			drawerDurationMsAtNavigation: getDrawerDurationMs(),
 		});
 
-		if (effectiveView === VIEW_TYPES.LOGS) {
+		if (selectedView === VIEW_TYPES.LOGS) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
 				userLogsExpression || '',
@@ -230,7 +207,7 @@ export default function K8sBaseDetailsContent<T>({
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
 			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
-		} else if (effectiveView === VIEW_TYPES.TRACES) {
+		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
 				userTracesExpression || '',
@@ -287,7 +264,7 @@ export default function K8sBaseDetailsContent<T>({
 							filterExpression={getCountsFilterExpression(entity)}
 							closeDrawer={handleClose}
 							entityType={category}
-							activeTab={effectiveView}
+							activeTab={selectedView}
 						/>
 					)}
 			</div>
@@ -298,21 +275,8 @@ export default function K8sBaseDetailsContent<T>({
 						type="single"
 						className={styles.viewsTabs}
 						onChange={handleTabChange}
-						value={effectiveView}
+						value={selectedView}
 						items={[
-							...(tabVisibility.showOverview
-								? [
-										{
-											value: VIEW_TYPES.OVERVIEW,
-											label: (
-												<div className={styles.viewTitle}>
-													<LayoutGrid size={14} />
-													Overview
-												</div>
-											),
-										},
-									]
-								: []),
 							...(tabVisibility.showMetrics
 								? [
 										{
@@ -377,7 +341,7 @@ export default function K8sBaseDetailsContent<T>({
 						]}
 					/>
 
-					{effectiveView === VIEW_TYPES.LOGS && (
+					{selectedView === VIEW_TYPES.LOGS && (
 						<TooltipSimple title="Go to Logs Explorer" side="left" arrow>
 							<Button
 								variant="ghost"
@@ -390,7 +354,7 @@ export default function K8sBaseDetailsContent<T>({
 							</Button>
 						</TooltipSimple>
 					)}
-					{effectiveView === VIEW_TYPES.TRACES && (
+					{selectedView === VIEW_TYPES.TRACES && (
 						<TooltipSimple title="Go to Traces Explorer" side="left" arrow>
 							<Button
 								variant="ghost"
@@ -406,16 +370,6 @@ export default function K8sBaseDetailsContent<T>({
 				</div>
 			)}
 
-			{effectiveView === VIEW_TYPES.OVERVIEW && tabVisibility.showOverview && (
-				<EntityOverview
-					category={category}
-					eventEntity={eventCategory}
-					attributes={entityAttributes}
-					entity={entity}
-					entityName={entityName}
-					queryKeyPrefix={queryKeyPrefix}
-				/>
-			)}
 			{effectiveView === VIEW_TYPES.METRICS && (
 				<EntityMetrics<T>
 					entity={entity}
@@ -452,7 +406,7 @@ export default function K8sBaseDetailsContent<T>({
 				/>
 			)}
 			{customTabs?.map((tab) =>
-				effectiveView === tab.key ? (
+				selectedView === tab.key ? (
 					<Fragment key={tab.key}>
 						{tab.render({
 							entity,

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -39,7 +39,6 @@ import K8sOptionsSidePanel from './K8sOptionsSidePanel';
 import K8sHeader from './K8sHeader';
 import { K8sPaginationWarning } from './K8sPaginationWarning';
 import K8sTableToolbar from './K8sTableToolbar';
-import { resetDrawerHistory } from './useDrawerHistoryStore';
 import { K8sBaseFilters } from './types';
 import { getGroupedByMeta } from './utils';
 import { K8sInstrumentationChecksCallout } from './components/K8sInstrumentationChecksCallout/K8sInstrumentationChecksCallout';
@@ -302,8 +301,6 @@ export function K8sBaseList<
 					queryClient.setQueryData(detailQueryKey, { data: record });
 				}
 
-				// Opening from the list starts a fresh trail for the drawer's back control
-				resetDrawerHistory();
 				setSelectedItemParams(params);
 			}
 

frontend/src/container/InfraMonitoringK8sV2/Base/K8sDynamicList.tsx

@@ -1,9 +1,6 @@
 import { useMemo } from 'react';
 
-import {
-	useInfraMonitoringCategory,
-	useInfraMonitoringSelectedItemParams,
-} from '../hooks';
+import { useInfraMonitoringCategory } from '../hooks';
 import { getEntityConfig } from './entity.registry';
 import { K8sBaseList } from './K8sBaseList';
 import K8sBaseDetails from './K8sBaseDetails';
@@ -18,35 +15,27 @@ export function K8sDynamicList({
 	leftFilters,
 }: K8sDynamicListProps): JSX.Element | null {
 	const [selectedCategory] = useInfraMonitoringCategory();
-	const [selectedItemParams] = useInfraMonitoringSelectedItemParams();
 
 	const config = useMemo(
 		() => getEntityConfig(selectedCategory),
 		[selectedCategory],
 	);
 
-	// A row opened from the drawer's overview tab belongs to another category
-	const drawerCategory = selectedItemParams.category ?? selectedCategory;
-	const drawerConfig = useMemo(
-		() => getEntityConfig(drawerCategory),
-		[drawerCategory],
-	);
-
 	if (!config) {
 		return null;
 	}
 
+	const { list, details } = config;
+
 	return (
 		<>
 			<K8sBaseList
-				{...config.list}
+				{...list}
 				controlListPrefix={controlListPrefix}
 				leftFilters={leftFilters}
 			/>
 
-			{/* No key: remounting would animate the drawer shut and open again
-			    for what is really a change of contents */}
-			{drawerConfig && <K8sBaseDetails {...drawerConfig.details} />}
+			<K8sBaseDetails {...details} />
 		</>
 	);
 }

frontend/src/container/InfraMonitoringK8sV2/Base/K8sExpandedRow.tsx

@@ -30,7 +30,6 @@ import {
 	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItemParams,
 } from '../hooks';
-import { resetDrawerHistory } from './useDrawerHistoryStore';
 import { K8sBaseFilters } from './types';
 import { useLogEventForColumnCustomized } from './useLogEventForColumnCustomized';
 import { useInfraMonitoringFontSize } from './useInfraMonitoringTablePreferencesStore';
@@ -220,8 +219,6 @@ export function K8sExpandedRow<
 				queryClient.setQueryData(detailQueryKey, { data: row });
 			}
 
-			// Opening from the list starts a fresh trail for the drawer's back control
-			resetDrawerHistory();
 			setSelectedItemParams(params);
 		},
 		[

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.backNavigation.test.tsx

@@ -1,152 +0,0 @@
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { InfraMonitoringEvents } from 'constants/events';
-import {
-	NuqsTestingAdapter,
-	type OnUrlUpdateFunction,
-} from 'nuqs/adapters/testing';
-import { act, render, waitFor } from 'tests/test-utils';
-
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../../constants';
-import K8sBaseDetails from '../K8sBaseDetails';
-import { useDrawerHistoryStore } from '../useDrawerHistoryStore';
-
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="mock-datetime" />,
-}));
-
-type TestEntity = { name: string };
-
-const mockEntity: TestEntity = { name: 'test-container' };
-
-const NODE_PARAMS = {
-	selectedItem: 'node-1',
-	category: InfraMonitoringEntity.NODES,
-	clusterName: null,
-	namespaceName: null,
-};
-
-/** What the drawer records before opening a resource from the node's overview */
-const NODE_ENTRY = {
-	params: NODE_PARAMS,
-	category: InfraMonitoringEntity.NODES,
-	label: 'node-1',
-	entity: { name: 'node-1' },
-	queryKeyPrefix: 'node',
-};
-
-function renderDrawer(onUrlUpdate?: OnUrlUpdateFunction): void {
-	render(
-		<NuqsTestingAdapter
-			searchParams={{
-				[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: 'container-1',
-			}}
-			onUrlUpdate={onUrlUpdate}
-		>
-			<K8sBaseDetails<TestEntity>
-				category={InfraMonitoringEntity.CONTAINERS}
-				eventCategory={InfraMonitoringEvents.Pod}
-				getSelectedItemExpression={(): string => "k8s.pod.uid = 'abc'"}
-				fetchEntityData={jest
-					.fn()
-					.mockResolvedValue({ data: mockEntity, error: null })}
-				getEntityName={(entity): string => entity.name}
-				getInitialLogTracesExpression={(): string => ''}
-				getInitialEventsExpression={(): string => ''}
-				metadataConfig={[
-					{ label: 'Name', getValue: (entity): string => entity.name },
-				]}
-				entityWidgetInfo={[{ title: 'CPU', yAxisUnit: 'percent' }]}
-				getEntityQueryPayload={jest.fn().mockReturnValue([])}
-				queryKeyPrefix="testContainer"
-			/>
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('K8sBaseDetails - back navigation', () => {
-	beforeEach(() => {
-		useDrawerHistoryStore.getState().reset();
-	});
-
-	it('closes rather than going back when opened from the list', async () => {
-		act(() => {
-			renderDrawer();
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-container').length).toBeGreaterThan(0);
-		});
-
-		expect(screen.queryByTestId('drawer-back-button')).not.toBeInTheDocument();
-		expect(screen.getByTestId('close-drawer-button')).toBeInTheDocument();
-	});
-
-	it('replaces the close control while there is somewhere to go back to', async () => {
-		useDrawerHistoryStore.getState().push(NODE_ENTRY);
-
-		act(() => {
-			renderDrawer();
-		});
-
-		const backButton = await screen.findByTestId('drawer-back-button');
-
-		// The destination is text rather than a tooltip, which a click would dismiss
-		expect(backButton).toHaveTextContent('Back to Node');
-		expect(backButton).toHaveAccessibleName('Back to Node: node-1');
-		expect(screen.queryByTestId('close-drawer-button')).not.toBeInTheDocument();
-	});
-
-	it('returns to the resource this one was opened from', async () => {
-		const user = userEvent.setup();
-		const onUrlUpdate = jest.fn();
-
-		useDrawerHistoryStore.getState().push(NODE_ENTRY);
-
-		act(() => {
-			renderDrawer(onUrlUpdate);
-		});
-
-		const backButton = await screen.findByTestId('drawer-back-button');
-		await user.click(backButton);
-
-		await waitFor(() => {
-			const params = onUrlUpdate.mock.calls.map((call) => call[0].searchParams);
-			expect(
-				params.some(
-					(searchParams) =>
-						searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM) ===
-							'node-1' &&
-						searchParams.get(
-							INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY,
-						) === InfraMonitoringEntity.NODES,
-				),
-			).toBe(true);
-		});
-
-		// The trail is one step shorter, so a second back closes instead
-		expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
-	});
-
-	it('drops the trail when the drawer is dismissed', async () => {
-		const user = userEvent.setup();
-
-		useDrawerHistoryStore.getState().push(NODE_ENTRY);
-
-		act(() => {
-			renderDrawer();
-		});
-
-		await screen.findByTestId('drawer-back-button');
-		// Dismissing from outside the drawer, the way a click on the overlay does
-		await user.keyboard('{Escape}');
-
-		await waitFor(() => {
-			expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.tabValidation.test.tsx

@@ -21,7 +21,6 @@ type TestEntity = {
 	name: string;
 	namespace: string;
 	cluster: string;
-	meta?: Record<string, string>;
 };
 
 const mockEntity: TestEntity = {
@@ -30,22 +29,14 @@ const mockEntity: TestEntity = {
 	cluster: 'test-cluster',
 };
 
-/** The overview tab appears only for a resource whose meta relates it to others */
-const relatedEntity: TestEntity = {
-	...mockEntity,
-	meta: {
-		'k8s.pod.uid': '63edbad0-398e-48e5-baba-f7ded7c73f1b',
-		'k8s.namespace.name': 'default',
-		'k8s.cluster.name': 'test-cluster',
-	},
-};
-
-function createBaseProps(category: InfraMonitoringEntity, entity = mockEntity) {
+function createBaseProps() {
 	return {
-		category,
+		category: InfraMonitoringEntity.PODS,
 		eventCategory: InfraMonitoringEvents.Pod,
 		getSelectedItemExpression: (): string => 'k8s.pod.name = "test-pod"',
-		fetchEntityData: jest.fn().mockResolvedValue({ data: entity, error: null }),
+		fetchEntityData: jest
+			.fn()
+			.mockResolvedValue({ data: mockEntity, error: null }),
 		getEntityName: (e: TestEntity): string => e.name,
 		getInitialLogTracesExpression: (): string => 'k8s.pod.name = "test-pod"',
 		getInitialEventsExpression: (): string => 'k8s.pod.name = "test-pod"',
@@ -60,10 +51,7 @@ function createBaseProps(category: InfraMonitoringEntity, entity = mockEntity) {
 
 interface RenderOptions {
 	view?: string;
-	category?: InfraMonitoringEntity;
-	entity?: TestEntity;
 	tabsConfig?: {
-		showOverview?: boolean;
 		showMetrics?: boolean;
 		showLogs?: boolean;
 		showTraces?: boolean;
@@ -79,9 +67,6 @@ interface RenderOptions {
 
 function renderK8sBaseDetails({
 	view = VIEW_TYPES.METRICS,
-	// Volumes have no related resources, so they get no overview tab
-	category = InfraMonitoringEntity.VOLUMES,
-	entity = mockEntity,
 	tabsConfig,
 	customTabs,
 }: RenderOptions = {}) {
@@ -93,7 +78,7 @@ function renderK8sBaseDetails({
 	return render(
 		<NuqsTestingAdapter searchParams={searchParams}>
 			<K8sBaseDetails<TestEntity>
-				{...createBaseProps(category, entity)}
+				{...createBaseProps()}
 				tabsConfig={tabsConfig}
 				customTabs={customTabs}
 			/>
@@ -121,25 +106,6 @@ describe('K8sBaseDetails - Tab Validation', () => {
 		});
 	});
 
-	it('should land on the overview tab for a category with related resources', async () => {
-		act(() => {
-			renderK8sBaseDetails({
-				view: 'invalid-tab',
-				category: InfraMonitoringEntity.PODS,
-				entity: relatedEntity,
-				tabsConfig: { showOverview: true },
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
-		});
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Overview');
-		});
-	});
-
 	it('should reset to first available tab when METRICS is disabled and view is invalid', async () => {
 		act(() => {
 			renderK8sBaseDetails({

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/relations.test.ts

@@ -1,154 +0,0 @@
-import { InfraMonitoringEntity } from '../../constants';
-import {
-	buildRelatedFilterExpression,
-	carryOverListFilters,
-	getRelatedCategories,
-} from '../relations';
-
-/** What /api/v2/infra_monitoring/pods returns as a pod's meta. */
-const POD_ATTRIBUTES = {
-	'k8s.pod.uid': '63edbad0-398e-48e5-baba-f7ded7c73f1b',
-	'k8s.pod.name': 'checkout-7d9f',
-	'k8s.namespace.name': 'shop',
-	'k8s.cluster.name': 'prod',
-	'k8s.node.name': 'node-1',
-	'k8s.deployment.name': 'checkout',
-};
-
-const NODE_ATTRIBUTES = {
-	'k8s.node.name': 'node-1',
-	'k8s.cluster.name': 'prod',
-};
-
-describe('getRelatedCategories', () => {
-	it('offers every other kubernetes category, never itself', () => {
-		expect(
-			getRelatedCategories(InfraMonitoringEntity.PODS, POD_ATTRIBUTES),
-		).toStrictEqual([
-			InfraMonitoringEntity.CONTAINERS,
-			InfraMonitoringEntity.DEPLOYMENTS,
-			InfraMonitoringEntity.STATEFULSETS,
-			InfraMonitoringEntity.DAEMONSETS,
-			InfraMonitoringEntity.JOBS,
-			InfraMonitoringEntity.VOLUMES,
-			InfraMonitoringEntity.NODES,
-			InfraMonitoringEntity.NAMESPACES,
-			InfraMonitoringEntity.CLUSTERS,
-		]);
-	});
-
-	it('scopes a category it has no relation to by what they share', () => {
-		// Not this pod's statefulsets, which it has none of: the ones beside it
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.STATEFULSETS,
-				POD_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop'");
-	});
-
-	it('falls back to the cluster where that is all two categories share', () => {
-		// Deployment metrics carry no node, so this relation is unexpressible
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.NODES,
-				InfraMonitoringEntity.DEPLOYMENTS,
-				NODE_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod'");
-	});
-
-	it('finds nothing for a host, which is not a kubernetes resource', () => {
-		// Host rows carry os.type and the host name, no kubernetes attribute
-		expect(
-			getRelatedCategories(InfraMonitoringEntity.HOSTS, {
-				'host.name': 'ip-10-0-0-1',
-				'os.type': 'linux',
-			}),
-		).toStrictEqual([]);
-	});
-
-	it('lists pods first, which makes them the default for a node', () => {
-		expect(
-			getRelatedCategories(InfraMonitoringEntity.NODES, NODE_ATTRIBUTES)[0],
-		).toBe(InfraMonitoringEntity.PODS);
-	});
-});
-
-describe('buildRelatedFilterExpression', () => {
-	it('scopes the pods of a node by the node, inside its cluster', () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.NODES,
-				InfraMonitoringEntity.PODS,
-				NODE_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'");
-	});
-
-	it("scopes a pod's containers by the pod uid, which those rows carry", () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.CONTAINERS,
-				POD_ATTRIBUTES,
-			),
-		).toBe(
-			"k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop' AND k8s.pod.uid = '63edbad0-398e-48e5-baba-f7ded7c73f1b'",
-		);
-	});
-
-	it("reaches a pod's deployment by name, the only key that endpoint has", () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.DEPLOYMENTS,
-				POD_ATTRIBUTES,
-			),
-		).toBe(
-			"k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop' AND k8s.deployment.name = 'checkout'",
-		);
-	});
-
-	it('names the parent when the drawer resource belongs to it', () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.NODES,
-				POD_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'");
-	});
-
-	it('asks a cluster list for the cluster alone', () => {
-		expect(
-			buildRelatedFilterExpression(
-				InfraMonitoringEntity.PODS,
-				InfraMonitoringEntity.CLUSTERS,
-				POD_ATTRIBUTES,
-			),
-		).toBe("k8s.cluster.name = 'prod'");
-	});
-});
-
-describe('carryOverListFilters', () => {
-	it('keeps the clauses the target endpoint understands', () => {
-		expect(
-			carryOverListFilters(
-				"k8s.namespace.name = 'shop' AND k8s.node.condition_ready = true",
-				InfraMonitoringEntity.PODS,
-			),
-		).toBe("k8s.namespace.name = 'shop'");
-	});
-
-	it('drops a filter written against the source entity only', () => {
-		expect(
-			carryOverListFilters('k8s.node.cpu.usage > 0.5', InfraMonitoringEntity.PODS),
-		).toBe('');
-	});
-
-	it('returns nothing for an empty list filter', () => {
-		expect(carryOverListFilters('   ', InfraMonitoringEntity.PODS)).toBe('');
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/Base/categoryIcons.tsx

@@ -1,48 +0,0 @@
-import type { ComponentProps } from 'react';
-import {
-	ArrowUpDown,
-	Bolt,
-	Box,
-	Boxes,
-	Computer,
-	Container,
-	FilePenLine,
-	Group,
-	HardDrive,
-	Server,
-	Workflow,
-} from '@signozhq/icons';
-
-import { InfraMonitoringEntity } from '../constants';
-
-/**
- * One icon per category, so the section tabs and the drawer that opens from
- * them show a resource the same way.
- */
-type IconSize = ComponentProps<typeof Container>['size'];
-
-const CATEGORY_ICONS: Record<InfraMonitoringEntity, typeof Container> = {
-	[InfraMonitoringEntity.HOSTS]: Server,
-	[InfraMonitoringEntity.PODS]: Container,
-	[InfraMonitoringEntity.CONTAINERS]: Box,
-	[InfraMonitoringEntity.NODES]: Workflow,
-	[InfraMonitoringEntity.NAMESPACES]: FilePenLine,
-	[InfraMonitoringEntity.CLUSTERS]: Boxes,
-	[InfraMonitoringEntity.DEPLOYMENTS]: Computer,
-	[InfraMonitoringEntity.STATEFULSETS]: ArrowUpDown,
-	[InfraMonitoringEntity.DAEMONSETS]: Group,
-	[InfraMonitoringEntity.JOBS]: Bolt,
-	[InfraMonitoringEntity.VOLUMES]: HardDrive,
-};
-
-export function CategoryIcon({
-	category,
-	size = 14,
-}: {
-	category: InfraMonitoringEntity;
-	size?: IconSize;
-}): JSX.Element {
-	const Icon = CATEGORY_ICONS[category];
-
-	return <Icon size={size} />;
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.tsx

@@ -3,11 +3,18 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { Compass } from '@signozhq/icons';
 import { TextNoData } from '../../../components/TextNoData';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
 import { Link } from 'react-router-dom';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
 
-import { InfraMonitoringEntity } from '../../../constants';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../../constants';
 import { getDrawerDurationMs } from '../../useDrawerLifecycleStore';
-import { buildK8sListNavigationUrl } from '../../utils';
 import styles from './EntityCountsSection.module.scss';
 import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
@@ -48,6 +55,70 @@ export function EntityCountsSection<T>({
 		closeDrawer();
 	};
 
+	const buildNavigationUrl = (targetCategory: InfraMonitoringEntity): string => {
+		const defaultQuery = initialQueriesMap[DataSource.METRICS];
+
+		const compositeQuery = {
+			...defaultQuery,
+			id: uuid(),
+			builder: {
+				...defaultQuery.builder,
+				queryData: defaultQuery.builder.queryData.map((query) => ({
+					...query,
+					filter: { expression: filterExpression },
+					filters: { items: [], op: 'AND' as const },
+				})),
+			},
+		};
+
+		const urlParams = new URLSearchParams();
+		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
+		urlParams.set(
+			QueryParams.compositeQuery,
+			encodeURIComponent(JSON.stringify(compositeQuery)),
+		);
+
+		const currentSearchParams = new URLSearchParams(window.location.search);
+		const detailRelativeTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+		);
+		const detailStartTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+		);
+		const detailEndTime = currentSearchParams.get(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+		);
+
+		const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
+		const listStartTime = currentSearchParams.get(QueryParams.startTime);
+		const listEndTime = currentSearchParams.get(QueryParams.endTime);
+
+		if (listRelativeTime) {
+			urlParams.set(QueryParams.relativeTime, listRelativeTime);
+		} else if (listStartTime && listEndTime) {
+			urlParams.set(QueryParams.startTime, listStartTime);
+			urlParams.set(QueryParams.endTime, listEndTime);
+		}
+
+		if (detailRelativeTime) {
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+				detailRelativeTime,
+			);
+		} else if (detailStartTime && detailEndTime) {
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+				detailStartTime,
+			);
+			urlParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+				detailEndTime,
+			);
+		}
+
+		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
+	};
+
 	return (
 		<div className={styles.countsContainer}>
 			{countsConfig.map((config) => (
@@ -76,7 +147,7 @@ export function EntityCountsSection<T>({
 						<TextNoData type="typography" className={styles.countValue} />
 					)}
 					<Link
-						to={buildK8sListNavigationUrl(config.targetCategory, filterExpression)}
+						to={buildNavigationUrl(config.targetCategory)}
 						onClick={(): void => handleCardNavigate(config.label)}
 						data-testid={`navigate-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
 					>

frontend/src/container/InfraMonitoringK8sV2/Base/events.ts

@@ -97,11 +97,7 @@ export function logInfraExplorerNavigatedEvent(params: {
 		| 'logs_explorer'
 		| 'traces_explorer'
 		| 'k8s_list';
-	source:
-		| 'chart_compass_icon'
-		| 'tab_cta_button'
-		| 'stats_card'
-		| 'overview_cta';
+	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
 	tab: string;
 	sourceKey: string | null;
 	drawerDurationMsAtNavigation: number | null;

frontend/src/container/InfraMonitoringK8sV2/Base/relations.ts

@@ -1,265 +0,0 @@
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-import { extractQueryPairs } from 'utils/queryContextUtils';
-
-import {
-	INFRA_MONITORING_ATTR_KEYS,
-	InfraMonitoringEntity,
-} from '../constants';
-
-/** The attribute that names one record of a category. */
-const PRIMARY_KEY: Record<InfraMonitoringEntity, string> = {
-	[InfraMonitoringEntity.CLUSTERS]: INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-	[InfraMonitoringEntity.NAMESPACES]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-	[InfraMonitoringEntity.NODES]: INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-	[InfraMonitoringEntity.PODS]: INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
-	[InfraMonitoringEntity.CONTAINERS]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_CONTAINER_NAME,
-	[InfraMonitoringEntity.DEPLOYMENTS]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
-	[InfraMonitoringEntity.STATEFULSETS]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-	[InfraMonitoringEntity.DAEMONSETS]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
-	[InfraMonitoringEntity.JOBS]: INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
-	[InfraMonitoringEntity.VOLUMES]:
-		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
-	[InfraMonitoringEntity.HOSTS]: INFRA_MONITORING_ATTR_KEYS.HOST_NAME,
-};
-
-/**
- * Attributes each list endpoint can be filtered by, broadest first so a built
- * expression reads cluster to container. Only keys the category's metrics
- * actually carry belong here.
- */
-const FILTERABLE_KEYS: Record<InfraMonitoringEntity, string[]> = {
-	[InfraMonitoringEntity.CLUSTERS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-	],
-	[InfraMonitoringEntity.NODES]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-	],
-	[InfraMonitoringEntity.NAMESPACES]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-	],
-	[InfraMonitoringEntity.DEPLOYMENTS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
-	],
-	[InfraMonitoringEntity.STATEFULSETS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-	],
-	[InfraMonitoringEntity.DAEMONSETS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
-	],
-	[InfraMonitoringEntity.JOBS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
-	],
-	[InfraMonitoringEntity.VOLUMES]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
-		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
-	],
-	[InfraMonitoringEntity.PODS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
-	],
-	[InfraMonitoringEntity.CONTAINERS]: [
-		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
-		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
-		INFRA_MONITORING_ATTR_KEYS.K8S_CONTAINER_NAME,
-	],
-	[InfraMonitoringEntity.HOSTS]: [],
-};
-
-/** Dropdown order: what a resource usually contains, then what contains it. */
-const DISPLAY_ORDER: InfraMonitoringEntity[] = [
-	InfraMonitoringEntity.PODS,
-	InfraMonitoringEntity.CONTAINERS,
-	InfraMonitoringEntity.DEPLOYMENTS,
-	InfraMonitoringEntity.STATEFULSETS,
-	InfraMonitoringEntity.DAEMONSETS,
-	InfraMonitoringEntity.JOBS,
-	InfraMonitoringEntity.VOLUMES,
-	InfraMonitoringEntity.NODES,
-	InfraMonitoringEntity.NAMESPACES,
-	InfraMonitoringEntity.CLUSTERS,
-];
-
-export type EntityAttributes = Record<string, string>;
-
-/** The attribute a category's display name belongs under. */
-const NAME_KEY: Partial<Record<InfraMonitoringEntity, string>> = {
-	[InfraMonitoringEntity.PODS]: INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
-};
-
-export function getEntityNameAttributeKey(
-	category: InfraMonitoringEntity,
-): string {
-	return NAME_KEY[category] ?? PRIMARY_KEY[category];
-}
-
-function matchingKeys(
-	target: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): string[] {
-	return FILTERABLE_KEYS[target].filter((key) => !!attributes[key]);
-}
-
-/**
- * The attribute that ties a target to the drawer's resource: the resource
- * itself when the target's records belong to it (the containers of this pod),
- * otherwise the target's own name as the resource knows it (the node this pod
- * runs on). Null when neither holds, which leaves the target scoped only by
- * the ancestors the two share.
- */
-function relationKey(
-	source: InfraMonitoringEntity,
-	target: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): string | null {
-	if (target === source) {
-		return null;
-	}
-
-	const keys = matchingKeys(target, attributes);
-
-	if (keys.includes(PRIMARY_KEY[source])) {
-		return PRIMARY_KEY[source];
-	}
-
-	return keys.includes(PRIMARY_KEY[target]) ? PRIMARY_KEY[target] : null;
-}
-
-/**
- * Every category the drawer's resource can scope a list of, which for a
- * kubernetes resource is all of them: where no closer relation exists the two
- * still share a cluster. A target is left out only when nothing is shared at
- * all, so a list is never asked for unscoped.
- */
-export function getRelatedCategories(
-	source: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): InfraMonitoringEntity[] {
-	return DISPLAY_ORDER.filter(
-		(target) =>
-			target !== source &&
-			buildRelatedFilterClauses(source, target, attributes).length > 0,
-	);
-}
-
-/**
- * Cluster and namespace ride along with the relation itself, the way other
- * observability tools scope these lists: a pod's deployment is read as that
- * deployment, in that namespace, in that cluster.
- */
-const SCOPE_KEYS = [
-	INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
-	INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
-];
-
-export interface RelatedFilterClause {
-	key: string;
-	value: string;
-}
-
-/**
- * Scope clauses, broadest first. The last carries the relation where one
- * exists; without one the list is scoped to the shared ancestors, which reads
- * as "beside this resource" rather than "belonging to it".
- */
-export function buildRelatedFilterClauses(
-	source: InfraMonitoringEntity,
-	target: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): RelatedFilterClause[] {
-	const key = relationKey(source, target, attributes);
-
-	const scope = SCOPE_KEYS.filter(
-		(scopeKey) =>
-			scopeKey !== key &&
-			FILTERABLE_KEYS[target].includes(scopeKey) &&
-			!!attributes[scopeKey],
-	);
-
-	return (key ? [...scope, key] : scope).map((clauseKey) => ({
-		key: clauseKey,
-		value: attributes[clauseKey] as string,
-	}));
-}
-
-export function formatRelatedFilterClause(clause: RelatedFilterClause): string {
-	return `${clause.key} = ${formatValueForExpression(clause.value)}`;
-}
-
-export function buildRelatedFilterExpression(
-	source: InfraMonitoringEntity,
-	target: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-): string {
-	return buildRelatedFilterClauses(source, target, attributes)
-		.map(formatRelatedFilterClause)
-		.join(' AND ');
-}
-
-export function resolveRelatedCategory(
-	source: InfraMonitoringEntity,
-	attributes: EntityAttributes,
-	requested: string | null,
-): InfraMonitoringEntity | null {
-	const related = getRelatedCategories(source, attributes);
-	const match = related.find((target) => target === requested);
-
-	return match ?? related[0] ?? null;
-}
-
-export function carryOverListFilters(
-	expression: string,
-	target: InfraMonitoringEntity,
-): string {
-	if (!expression.trim()) {
-		return '';
-	}
-
-	const supported = new Set(FILTERABLE_KEYS[target]);
-
-	return extractQueryPairs(expression)
-		.filter((pair) => supported.has(pair.key))
-		.map((pair) => {
-			const start = pair.position.negationStart ?? pair.position.keyStart;
-			const lastValue = pair.valuesPosition?.[pair.valuesPosition.length - 1];
-			const end =
-				lastValue?.end ?? pair.position.valueEnd ?? pair.position.operatorEnd;
-
-			return expression.slice(start, end + 1).trim();
-		})
-		.filter(Boolean)
-		.join(' AND ');
-}

frontend/src/container/InfraMonitoringK8sV2/Base/types.ts

@@ -75,8 +75,6 @@ export type GetEntityQueryPayload<T> = (
 ) => GetQueryResultsProps[];
 
 export interface K8sDetailsTabsConfig {
-	/** Declared by categories whose resources relate to others; see relations.ts */
-	showOverview?: boolean;
 	showMetrics?: boolean;
 	showLogs?: boolean;
 	showTraces?: boolean;
@@ -143,10 +141,6 @@ export interface K8sBaseDetailsContentProps<T> {
 	customTabs?: K8sDetailsCustomTab<T>[];
 	logsAndTracesInitialExpression: string;
 	eventsInitialExpression: string;
-	/** The drawer entity's own attributes, used to find and scope related resources */
-	entityAttributes: Record<string, string>;
-	/** Name of the drawer entity, for the back control of a resource opened from it */
-	entityName: string;
 }
 
 // Aliases for backward compatibility

frontend/src/container/InfraMonitoringK8sV2/Base/useDrawerHistoryStore.ts

@@ -1,56 +0,0 @@
-import { create } from 'zustand';
-
-import { InfraMonitoringEntity } from '../constants';
-import { SelectedItemParams } from '../hooks';
-
-export interface DrawerHistoryEntry {
-	params: SelectedItemParams;
-	/** Category of the resource that was open, which the back control names */
-	category: InfraMonitoringEntity;
-	/** Name of that resource, shown on hover */
-	label: string;
-	/**
-	 * The record the drawer was showing, and the prefix of the query that holds
-	 * it, so stepping back renders from it instead of fetching again.
-	 */
-	entity: unknown;
-	queryKeyPrefix: string;
-}
-
-export interface IDrawerHistoryStore {
-	entries: DrawerHistoryEntry[];
-	push: (entry: DrawerHistoryEntry) => void;
-	pop: () => DrawerHistoryEntry | null;
-	reset: () => void;
-}
-
-/**
- * The trail left by opening one resource from another's overview tab, so the
- * drawer can step back through it instead of only closing.
- */
-export const useDrawerHistoryStore = create<IDrawerHistoryStore>()(
-	(set, get) => ({
-		entries: [],
-		push: (entry): void => set({ entries: [...get().entries, entry] }),
-		pop: (): DrawerHistoryEntry | null => {
-			const { entries } = get();
-			const previous = entries[entries.length - 1] ?? null;
-
-			if (previous) {
-				set({ entries: entries.slice(0, -1) });
-			}
-
-			return previous;
-		},
-		reset: (): void => set({ entries: [] }),
-	}),
-);
-
-export const resetDrawerHistory = (): void =>
-	useDrawerHistoryStore.getState().reset();
-
-export const pushDrawerHistory = (entry: DrawerHistoryEntry): void =>
-	useDrawerHistoryStore.getState().push(entry);
-
-export const getDrawerHistoryDepth = (): number =>
-	useDrawerHistoryStore.getState().entries.length;

frontend/src/container/InfraMonitoringK8sV2/Base/usePrimeEntityDetails.ts

@@ -1,47 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { useGlobalTimeStore } from 'store/globalTime';
-
-import { SelectedItemParams } from '../hooks';
-
-interface PrimeEntityDetailsParams {
-	params: SelectedItemParams;
-	queryKeyPrefix: string;
-	entity: unknown;
-}
-
-/**
- * Seeds the drawer's entity query with a record already in hand, so navigating
- * between resources renders straight away instead of passing through a loading
- * state. The list page does the same on a row click.
- */
-export function usePrimeEntityDetails(): (
-	params: PrimeEntityDetailsParams,
-) => void {
-	const queryClient = useQueryClient();
-	const selectedTime = useGlobalTimeStore((store) => store.selectedTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(store) => store.getAutoRefreshQueryKey,
-	);
-
-	return useCallback(
-		({ params, queryKeyPrefix, entity }): void => {
-			if (!queryKeyPrefix || !entity) {
-				return;
-			}
-
-			queryClient.setQueryData(
-				getAutoRefreshQueryKey(
-					selectedTime,
-					`${queryKeyPrefix}EntityDetails`,
-					params.selectedItem,
-					params.clusterName,
-					params.namespaceName,
-					params.containerName,
-				),
-				{ data: entity },
-			);
-		},
-		[queryClient, selectedTime, getAutoRefreshQueryKey],
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/Base/utils.tsx

@@ -7,16 +7,7 @@ import {
 	formatValueForExpression,
 } from 'components/QueryBuilderV2/utils';
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
-import {
-	INFRA_MONITORING_ATTR_KEYS,
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from 'container/InfraMonitoringK8sV2/constants';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 as uuid } from 'uuid';
+import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 
 export function sortByColumnOrder<T>(
 	items: T[],
@@ -187,74 +178,3 @@ export function buildExpressionFromSelectedItemParams(
 
 	return clauses.join(' AND ');
 }
-
-/**
- * Link to the k8s list page for `targetCategory`, pre-filtered by `filterExpression`
- * and carrying whichever time range (list or drawer) the current URL holds.
- */
-export function buildK8sListNavigationUrl(
-	targetCategory: InfraMonitoringEntity,
-	filterExpression: string,
-): string {
-	const defaultQuery = initialQueriesMap[DataSource.METRICS];
-
-	const compositeQuery = {
-		...defaultQuery,
-		id: uuid(),
-		builder: {
-			...defaultQuery.builder,
-			queryData: defaultQuery.builder.queryData.map((query) => ({
-				...query,
-				filter: { expression: filterExpression },
-				filters: { items: [], op: 'AND' as const },
-			})),
-		},
-	};
-
-	const urlParams = new URLSearchParams();
-	urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
-	urlParams.set(
-		QueryParams.compositeQuery,
-		encodeURIComponent(JSON.stringify(compositeQuery)),
-	);
-
-	const currentSearchParams = new URLSearchParams(window.location.search);
-	const detailRelativeTime = currentSearchParams.get(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-	);
-	const detailStartTime = currentSearchParams.get(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-	);
-	const detailEndTime = currentSearchParams.get(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-	);
-
-	const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
-	const listStartTime = currentSearchParams.get(QueryParams.startTime);
-	const listEndTime = currentSearchParams.get(QueryParams.endTime);
-
-	if (listRelativeTime) {
-		urlParams.set(QueryParams.relativeTime, listRelativeTime);
-	} else if (listStartTime && listEndTime) {
-		urlParams.set(QueryParams.startTime, listStartTime);
-		urlParams.set(QueryParams.endTime, listEndTime);
-	}
-
-	if (detailRelativeTime) {
-		urlParams.set(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-			detailRelativeTime,
-		);
-	} else if (detailStartTime && detailEndTime) {
-		urlParams.set(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-			detailStartTime,
-		);
-		urlParams.set(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-			detailEndTime,
-		);
-	}
-
-	return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
-}

frontend/src/container/InfraMonitoringK8sV2/Clusters/constants.ts

@@ -6,7 +6,10 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsCountConfig, K8sDetailsMetadataConfig } from '../Base/types';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/Clusters/entity.config.ts

@@ -123,7 +123,6 @@ export const clusterEntityConfig: K8sEntityConfig<InframonitoringtypesClusterRec
 		details: {
 			category: InfraMonitoringEntity.CLUSTERS,
 			eventCategory: InfraMonitoringEvents.Cluster,
-			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'cluster',
 			getSelectedItemExpression: k8sClusterGetSelectedItemExpression,
 			fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Containers/entity.config.ts

@@ -127,7 +127,6 @@ export const containerEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.CONTAINERS,
 		eventCategory: InfraMonitoringEvents.Container,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'container',
 		getSelectedItemExpression: k8sContainerGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Containers/table.config.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@signozhq/icons';
+import { Container } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import {
 	InframonitoringtypesContainerReadyDTO,
@@ -94,7 +94,7 @@ export const k8sContainerColumnsConfig: ContainerTableColumnConfig[] = [
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Container Name"
-				icon={<Box data-hide-expanded="true" size={14} />}
+				icon={<Container data-hide-expanded="true" size={14} />}
 				docPath={`${CONTAINERS_DOC_PATH}#container-name`}
 			/>
 		),

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/entity.config.ts

@@ -132,7 +132,6 @@ export const daemonSetEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.DAEMONSETS,
 		eventCategory: InfraMonitoringEvents.DaemonSet,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'daemonset',
 		getSelectedItemExpression: k8sDaemonSetGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Deployments/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/Deployments/entity.config.ts

@@ -147,7 +147,6 @@ export const deploymentEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.DEPLOYMENTS,
 		eventCategory: InfraMonitoringEvents.Deployment,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'deployment',
 		getSelectedItemExpression: k8sDeploymentGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.module.scss

@@ -1,166 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	margin-top: var(--spacing-8);
-	min-width: 0;
-}
-
-.controls {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-3);
-	flex-wrap: wrap;
-}
-
-.tableHeader {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	padding: var(--spacing-4) var(--spacing-8);
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.resourcePicker {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	flex: 0 0 auto;
-}
-
-.resourceTrigger {
-	--select-trigger-width: 240px;
-	--select-trigger-height: 2rem;
-}
-
-.resourceOptions {
-	// The drawer is a dialog at z-index 50 and select content ships without one,
-	// so without this the dropdown paints behind the drawer.
-	z-index: 60;
-
-	// Radix measures the trigger for us; without this the list is narrower than it
-	min-width: var(--radix-select-trigger-width);
-}
-
-.filterRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	padding-left: var(--spacing-3);
-	min-width: 0;
-	border: 1px solid var(--l2-border);
-	border-radius: 2px;
-	background: var(--l1-background);
-
-	// The row draws the field outline, so the editor inside it draws none
-	--query-builder-v2-border-color: transparent;
-	--query-builder-v2-background-color: transparent;
-}
-
-.scopeChip {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	flex: 0 1 auto;
-	min-width: 0;
-	max-width: 420px;
-	padding: var(--spacing-1) var(--spacing-3);
-	border-radius: 2px;
-	background: var(--l3-background);
-	color: var(--l2-foreground);
-	font-size: 12px;
-	line-height: 20px;
-	cursor: default;
-}
-
-.scopeMore {
-	flex: none;
-	color: var(--l3-foreground);
-}
-
-// The editor beside it is CodeMirror on the copilot theme in dark and
-// githubLight in light; the chip borrows those token colours so one filter
-// does not read as two
-.scopeKey {
-	color: #939da5;
-}
-
-.scopeOperator {
-	color: #939da5;
-}
-
-.scopeValue {
-	color: #5bec95;
-}
-
-:global(.lightMode) {
-	.scopeKey,
-	.scopeOperator {
-		color: #005cc5;
-	}
-
-	.scopeValue {
-		color: #032f62;
-	}
-}
-
-.scopeExpression {
-	font-family: var(--font-mono, monospace);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.filterInput {
-	flex: 1 1 auto;
-	min-width: 0;
-
-	// The locked scope is already shown as a chip, so drop the editor's own
-	// scope marker and the room it reserves for it
-	:global(.query-search-initial-scope-label) {
-		display: none;
-	}
-
-	:global(
-		.query-where-clause-editor.hasInitialExpression .cm-editor .cm-content
-	) {
-		padding-left: 0 !important;
-	}
-
-	// Its page-width minimum would force the filter row to overflow the drawer
-	:global(.code-mirror-where-clause .query-where-clause-editor) {
-		min-width: 0;
-	}
-}
-
-.tableCard {
-	display: flex;
-	flex-direction: column;
-	min-height: 480px;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	overflow: hidden;
-	min-width: 0;
-}
-
-.table {
-	flex: 1 1 auto;
-	min-height: 0;
-	--typography-color: var(--l2-foreground);
-}
-
-.noRelations {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 240px;
-	margin-top: var(--spacing-8);
-}
-
-.emptyState {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 180px;
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.stories.mocks.tsx

@@ -1,76 +0,0 @@
-import { rest } from 'msw';
-
-import { countControl } from '@/storybook/controls/controls';
-import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
-
-function buildContainers(count: number): unknown[] {
-	return Array.from({ length: count }, (_, index) => ({
-		containerName: index === 0 ? 'loadgenerator' : `sidecar-${index}`,
-		containerID: `containerd://${index}`,
-		podName: 'app-demo-loadgenerator-579fbdd749-q5kgd',
-		status: 'running',
-		ready: true,
-		restarts: index,
-		image: 'ghcr.io/open-telemetry/demo:1.14.0-loadgenerator',
-		cpuUsage: 0.12,
-		memoryUsage: 148 * 1024 * 1024,
-		meta: {
-			'k8s.pod.name': 'app-demo-loadgenerator-579fbdd749-q5kgd',
-			'k8s.namespace.name': 'generator',
-			'k8s.cluster.name': 'mgmt',
-			'k8s.node.name': 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7',
-		},
-	}));
-}
-
-export const overviewMocks = defineStoryMocks({
-	controls: {
-		containers: countControl('Containers', {
-			group: 'Overview tab',
-			value: 12,
-			max: 40,
-		}),
-	},
-	handlers: (values) => [
-		// The filter's suggestions ask for these; without them the search box
-		// logs a failed request and the story's smoke test fails on it
-		rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
-			),
-		),
-
-		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
-			),
-		),
-
-		rest.post(
-			'http://localhost/api/v2/infra_monitoring/kube_containers',
-			async (req, res, ctx) => {
-				const { offset = 0, limit = 10 } = (await req.json()) as {
-					offset?: number;
-					limit?: number;
-				};
-
-				return res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							type: 'list',
-							records: buildContainers(values.containers).slice(
-								offset,
-								offset + limit,
-							),
-							total: values.containers,
-						},
-					}),
-				);
-			},
-		),
-	],
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { GlobalTimeProvider } from 'store/globalTime';
-
-import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
-import { storyMocks } from '@/storybook/controls/defineStoryMocks';
-
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../../constants';
-import EntityOverview, { EntityOverviewProps } from './EntityOverview';
-import { overviewMocks } from './EntityOverview.stories.mocks';
-
-import drawerStyles from '../entityDetails.module.scss';
-
-const POD_UID = '63edbad0-398e-48e5-baba-f7ded7c73f1b';
-
-/** The meta /api/v2/infra_monitoring/pods returns for one pod. */
-const POD_ATTRIBUTES = {
-	'k8s.pod.uid': POD_UID,
-	'k8s.pod.name': 'app-demo-loadgenerator-579fbdd749-q5kgd',
-	'k8s.namespace.name': 'generator',
-	'k8s.cluster.name': 'mgmt',
-	'k8s.node.name': 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7',
-	'k8s.deployment.name': 'app-demo-loadgenerator',
-};
-
-const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
-
-type OverviewArgs = PageStoryArgs<typeof overviewMocks> & EntityOverviewProps;
-
-const meta = {
-	title: 'Infra monitoring/Drawer overview tab',
-	component: EntityOverview,
-	...storyMocks(overviewMocks, { route }),
-	decorators: [
-		(Story): JSX.Element => (
-			<DrawerWrapper
-				open
-				direction="right"
-				title="app-demo-loadgenerator-579fbdd749-q5kgd"
-				onOpenChange={(): void => undefined}
-				className={drawerStyles.entityDetailDrawer}
-			>
-				<GlobalTimeProvider>
-					<Story />
-				</GlobalTimeProvider>
-			</DrawerWrapper>
-		),
-	],
-} satisfies Meta<OverviewArgs>;
-
-export default meta;
-
-type Story = StoryObj<OverviewArgs>;
-
-export const Default: Story = {
-	args: {
-		category: InfraMonitoringEntity.PODS,
-		eventEntity: 'pod',
-		attributes: POD_ATTRIBUTES,
-		entity: { podUID: POD_UID },
-		entityName: POD_ATTRIBUTES['k8s.pod.name'],
-		queryKeyPrefix: 'pod',
-	},
-};

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.tsx

@@ -1,343 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Compass } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '@signozhq/ui/select';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
-import {
-	QuerySearchV2Provider,
-	useExpression,
-	useInputExpression,
-	useQuerySearchInitialExpressionProp,
-	useQuerySearchOnChange,
-	useQuerySearchOnRun,
-	useUserExpression,
-} from 'components/QueryBuilderV2';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import {
-	combineInitialAndUserExpression,
-	getUserExpressionFromCombined,
-} from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
-import { validateQuery } from 'utils/queryValidationUtils';
-
-import { getEntityConfig } from '../../Base/entity.registry';
-import { logInfraExplorerNavigatedEvent } from '../../Base/events';
-import {
-	buildRelatedFilterClauses,
-	EntityAttributes,
-	formatRelatedFilterClause,
-	RelatedFilterClause,
-	getEntityNameAttributeKey,
-	getRelatedCategories,
-	resolveRelatedCategory,
-} from '../../Base/relations';
-import { getDrawerDurationMs } from '../../Base/useDrawerLifecycleStore';
-import { buildK8sListNavigationUrl } from '../../Base/utils';
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-	K8S_CATEGORY_LABELS,
-	K8S_CATEGORY_SINGULAR_LABELS,
-	METRIC_NAMESPACE_BY_ENTITY,
-	VIEW_TYPES,
-} from '../../constants';
-import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
-import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
-import { logInfraDrawerFilterCustomizedEvent } from '../events';
-import { RelatedEntitiesTable } from './RelatedEntitiesTable';
-import { ScopeChip } from './ScopeChip';
-import { useCarriedOverFilters } from './useCarriedOverFilters';
-import { useRelatedEntities } from './useRelatedEntities';
-
-import styles from './EntityOverview.module.scss';
-
-export interface EntityOverviewProps {
-	category: InfraMonitoringEntity;
-	eventEntity: string;
-	/** The drawer entity's own attributes, which scope every related query */
-	attributes: EntityAttributes;
-	/** The drawer's own record and query prefix, so a row click can leave a
-	 * trail that steps back without fetching again */
-	entity: unknown;
-	entityName: string;
-	queryKeyPrefix: string;
-}
-
-interface ContentProps extends EntityOverviewProps {
-	targetCategory: InfraMonitoringEntity;
-	lockedExpression: string;
-	lockedClauses: RelatedFilterClause[];
-	onCategoryChange: (category: string) => void;
-}
-
-function EntityOverviewContent({
-	category,
-	eventEntity,
-	attributes,
-	entity,
-	entityName,
-	queryKeyPrefix,
-	targetCategory,
-	lockedExpression,
-	lockedClauses,
-	onCategoryChange,
-}: ContentProps): JSX.Element | null {
-	const { timeRange } = useEntityDetailsTime();
-	const expression = useExpression();
-	const userExpression = useUserExpression();
-	const inputExpression = useInputExpression();
-	const querySearchOnChange = useQuerySearchOnChange();
-	const querySearchOnRun = useQuerySearchOnRun();
-	const querySearchInitialExpressionProp = useQuerySearchInitialExpressionProp();
-
-	const targetConfig = getEntityConfig(targetCategory);
-
-	useCarriedOverFilters(targetCategory);
-
-	const {
-		records,
-		total,
-		isLoading,
-		isFetching,
-		isError,
-		error,
-		endTimeBeforeRetention,
-		setPage,
-		setLimit,
-		refetch,
-		cancel,
-	} = useRelatedEntities({
-		fetchListData: targetConfig?.list.fetchListData,
-		queryKey: `${targetCategory}RelatedEntities`,
-		expression,
-		timeRange,
-	});
-
-	// The editor holds only what the user typed; the locked scope is shown beside it
-	const queryData = useMemo(
-		(): IBuilderQuery =>
-			({
-				aggregateOperator: 'noop',
-				filter: { expression: userExpression },
-			}) as IBuilderQuery,
-		[userExpression],
-	);
-
-	const handleCategoryChange = useCallback(
-		(value: string | string[]): void => {
-			if (typeof value === 'string') {
-				onCategoryChange(value);
-			}
-		},
-		[onCategoryChange],
-	);
-
-	const handleRunQuery = useCallback(
-		(updatedExpression?: string): void => {
-			const newUserExpression = updatedExpression
-				? getUserExpressionFromCombined(lockedExpression, updatedExpression)
-				: inputExpression;
-
-			const validation = validateQuery(
-				combineInitialAndUserExpression(lockedExpression, newUserExpression || ''),
-			);
-
-			if (!validation.isValid) {
-				return;
-			}
-
-			querySearchOnRun(newUserExpression);
-			logInfraDrawerFilterCustomizedEvent(
-				category,
-				VIEW_TYPES.OVERVIEW,
-				newUserExpression || '',
-				'search',
-			);
-			refetch();
-		},
-		[lockedExpression, inputExpression, querySearchOnRun, category, refetch],
-	);
-
-	const handleNavigate = useCallback((): void => {
-		logInfraExplorerNavigatedEvent({
-			entityType: category,
-			destination: 'k8s_list',
-			source: 'overview_cta',
-			tab: VIEW_TYPES.OVERVIEW,
-			sourceKey: targetCategory,
-			drawerDurationMsAtNavigation: getDrawerDurationMs(),
-		});
-
-		openInNewTab(buildK8sListNavigationUrl(targetCategory, expression));
-	}, [category, targetCategory, expression]);
-
-	if (!targetConfig) {
-		return null;
-	}
-
-	const targetLabel = K8S_CATEGORY_LABELS[targetCategory];
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.controls}>
-				<EntityDateTimeSelector
-					eventEntity={eventEntity}
-					category={category}
-					view={VIEW_TYPES.OVERVIEW}
-				/>
-
-				<RunQueryBtn
-					isLoadingQueries={isFetching}
-					onStageRunQuery={(): void => handleRunQuery()}
-					handleCancelQuery={cancel}
-				/>
-			</div>
-
-			<div className={styles.filterRow}>
-				<ScopeChip clauses={lockedClauses} expression={lockedExpression} />
-
-				<div className={styles.filterInput}>
-					<QuerySearch
-						queryData={queryData}
-						dataSource={DataSource.METRICS}
-						onChange={querySearchOnChange}
-						onRun={handleRunQuery}
-						signalSource=""
-						showFilterSuggestionsWithoutMetric
-						placeholder={`Filter these ${targetLabel.toLowerCase()}`}
-						metricNamespace={METRIC_NAMESPACE_BY_ENTITY[targetCategory]}
-						initialExpression={querySearchInitialExpressionProp}
-					/>
-				</div>
-			</div>
-
-			<RelatedEntitiesTable
-				key={targetCategory}
-				targetCategory={targetCategory}
-				header={
-					<div className={styles.resourcePicker}>
-						<Typography.Text color="muted" size="small">
-							Showing
-						</Typography.Text>
-
-						<Select value={targetCategory} onChange={handleCategoryChange}>
-							<SelectTrigger
-								className={styles.resourceTrigger}
-								data-testid="overview-resource-select"
-							>
-								<SelectValue>{targetLabel}</SelectValue>
-							</SelectTrigger>
-							{/* The drawer sits at z-index 50 and select content ships without one */}
-							<SelectContent className={styles.resourceOptions}>
-								{getRelatedCategories(category, attributes).map((relatedCategory) => (
-									<SelectItem
-										key={relatedCategory}
-										value={relatedCategory}
-										testId={`overview-resource-option-${relatedCategory}`}
-									>
-										{K8S_CATEGORY_LABELS[relatedCategory]}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
-
-						<TooltipSimple
-							title={`View on ${targetLabel.toLowerCase()} page`}
-							side="top"
-							arrow
-						>
-							<Button
-								variant="ghost"
-								size="icon"
-								color="secondary"
-								onClick={handleNavigate}
-								data-testid="overview-view-on-list-page"
-								prefix={<Compass size={16} />}
-							/>
-						</TooltipSimple>
-					</div>
-				}
-				listConfig={targetConfig.list}
-				records={records}
-				total={total}
-				isLoading={isLoading}
-				isError={isError}
-				error={error}
-				endTimeBeforeRetention={endTimeBeforeRetention}
-				source={{ category, label: entityName, entity, queryKeyPrefix }}
-				onPageChange={setPage}
-				onLimitChange={setLimit}
-			/>
-		</div>
-	);
-}
-
-export default function EntityOverview(
-	props: EntityOverviewProps,
-): JSX.Element | null {
-	const { category, attributes } = props;
-
-	// Tied to the resource it was picked on, so another drawer starts at its
-	// own default instead of inheriting the last pick
-	const [selection, setSelection] = useState<{
-		identity: string;
-		category: string;
-	} | null>(null);
-
-	const identity = `${category}:${
-		attributes[getEntityNameAttributeKey(category)] ?? ''
-	}`;
-
-	const targetCategory = resolveRelatedCategory(
-		category,
-		attributes,
-		selection?.identity === identity ? selection.category : null,
-	);
-
-	const handleCategoryChange = useCallback(
-		(value: string): void => setSelection({ identity, category: value }),
-		[identity],
-	);
-
-	const lockedClauses = targetCategory
-		? buildRelatedFilterClauses(category, targetCategory, attributes)
-		: [];
-	const lockedExpression = lockedClauses
-		.map(formatRelatedFilterClause)
-		.join(' AND ');
-
-	if (!targetCategory) {
-		return (
-			<div className={styles.noRelations}>
-				<Typography.Text color="muted">
-					{`Nothing related to this ${K8S_CATEGORY_SINGULAR_LABELS[category]} was reported in this time range.`}
-				</Typography.Text>
-			</div>
-		);
-	}
-
-	return (
-		<QuerySearchV2Provider
-			queryParamKey={INFRA_MONITORING_K8S_PARAMS_KEYS.OVERVIEW_EXPRESSION}
-			initialExpression={lockedExpression}
-		>
-			<EntityOverviewContent
-				{...props}
-				targetCategory={targetCategory}
-				lockedExpression={lockedExpression}
-				lockedClauses={lockedClauses}
-				onCategoryChange={handleCategoryChange}
-			/>
-		</QuerySearchV2Provider>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/RelatedEntitiesTable.tsx

@@ -1,142 +0,0 @@
-import { ReactNode, useCallback } from 'react';
-import cx from 'classnames';
-import TanStackTable from 'components/TanStackTableView';
-import APIError from 'types/api/error';
-
-import {
-	K8sEntityData,
-	K8sEntityListConfig,
-} from '../../Base/entity.config.types';
-import { K8sEmptyState } from '../../Base/K8sEmptyState';
-import {
-	DrawerHistoryEntry,
-	useDrawerHistoryStore,
-} from '../../Base/useDrawerHistoryStore';
-import {
-	useInfraMonitoringFontSize,
-	useInfraMonitoringLineClamp,
-} from '../../Base/useInfraMonitoringTablePreferencesStore';
-import { InfraMonitoringEntity, K8S_CATEGORY_LABELS } from '../../constants';
-import {
-	SelectedItemParams,
-	useInfraMonitoringSelectedItemParams,
-} from '../../hooks';
-import { usePrimeEntityDetails } from '../../Base/usePrimeEntityDetails';
-import { RELATED_ENTITIES_PAGE_SIZE } from './useRelatedEntities';
-
-import listStyles from '../../Base/K8sBaseList.module.scss';
-import styles from './EntityOverview.module.scss';
-
-interface RelatedEntitiesTableProps {
-	targetCategory: InfraMonitoringEntity;
-	listConfig: K8sEntityListConfig<K8sEntityData, string | SelectedItemParams>;
-	records: K8sEntityData[];
-	total: number;
-	isLoading: boolean;
-	isError: boolean;
-	error?: APIError | null;
-	endTimeBeforeRetention?: boolean;
-	onPageChange: (page: number) => void;
-	onLimitChange: (limit: number) => void;
-	/** Rendered in the card's header strip, above the rows it describes */
-	header: ReactNode;
-	/** The drawer's own resource, so a row click can leave a trail back to it */
-	source: Omit<DrawerHistoryEntry, 'params'>;
-}
-
-export function RelatedEntitiesTable({
-	targetCategory,
-	listConfig,
-	records,
-	total,
-	isLoading,
-	isError,
-	error,
-	endTimeBeforeRetention,
-	onPageChange,
-	onLimitChange,
-	header,
-	source,
-}: RelatedEntitiesTableProps): JSX.Element {
-	const [selectedItemParams, setSelectedItemParams] =
-		useInfraMonitoringSelectedItemParams();
-	const pushDrawerHistory = useDrawerHistoryStore((store) => store.push);
-	const primeDetails = usePrimeEntityDetails();
-	const lineClamp = useInfraMonitoringLineClamp();
-	const fontSize = useInfraMonitoringFontSize();
-
-	// Opens the clicked resource in its own drawer, overview tab included
-	const handleRowClick = useCallback(
-		(record: K8sEntityData, itemKey: string | SelectedItemParams): void => {
-			const params: SelectedItemParams =
-				typeof itemKey === 'object'
-					? itemKey
-					: { selectedItem: itemKey, clusterName: null, namespaceName: null };
-
-			pushDrawerHistory({ ...source, params: selectedItemParams });
-
-			// The row already carries the record the drawer is about to fetch
-			primeDetails({
-				params,
-				queryKeyPrefix: listConfig.detailsQueryKeyPrefix,
-				entity: record,
-			});
-			setSelectedItemParams({ ...params, category: targetCategory });
-		},
-		[
-			primeDetails,
-			pushDrawerHistory,
-			selectedItemParams,
-			source,
-			setSelectedItemParams,
-			targetCategory,
-			listConfig.detailsQueryKeyPrefix,
-		],
-	);
-
-	const isEmpty = !isLoading && records.length === 0;
-
-	return (
-		<div className={styles.tableCard}>
-			<div className={styles.tableHeader}>{header}</div>
-
-			{isEmpty ? (
-				<div className={styles.emptyState}>
-					<K8sEmptyState
-						isError={isError}
-						error={error}
-						isLoading={isLoading}
-						endTimeBeforeRetention={endTimeBeforeRetention}
-					/>
-				</div>
-			) : (
-				<TanStackTable<K8sEntityData, string | SelectedItemParams>
-					data={records}
-					columns={listConfig.tableColumns}
-					columnStorageKey={`k8s-overview-${targetCategory}-columns`}
-					isLoading={isLoading}
-					getRowKey={listConfig.getRowKey}
-					getItemKey={listConfig.getItemKey}
-					onRowClick={handleRowClick}
-					className={cx(listStyles.k8SListTable, styles.table)}
-					testId={`related-entities-table-${targetCategory}`}
-					// A page of rows is short enough to render whole, which keeps the card
-					// at the height of its rows instead of stretching down the drawer
-					disableVirtualScroll
-					pagination={{
-						total,
-						defaultLimit: RELATED_ENTITIES_PAGE_SIZE,
-						showTotalCount: true,
-						totalCountLabel: K8S_CATEGORY_LABELS[targetCategory],
-						onPageChange,
-						onLimitChange,
-					}}
-					plainTextCellLineClamp={lineClamp}
-					cellTypographySize={fontSize}
-					paginationClassname={listStyles.paginationContainer}
-					resetScrollKey={targetCategory}
-				/>
-			)}
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/ScopeChip.tsx

@@ -1,42 +0,0 @@
-import { Lock } from '@signozhq/icons';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-
-import { RelatedFilterClause } from '../../Base/relations';
-
-import styles from './EntityOverview.module.scss';
-
-interface ScopeChipProps {
-	clauses: RelatedFilterClause[];
-	/** The clauses as one expression, shown in full on hover */
-	expression: string;
-}
-
-/**
- * The locked half of the filter. It reads like the editor beside it: the last
- * clause carries the relation, the ones scoping it are counted instead.
- */
-export function ScopeChip({
-	clauses,
-	expression,
-}: ScopeChipProps): JSX.Element {
-	const relation = clauses[clauses.length - 1];
-
-	return (
-		<TooltipSimple title={expression} side="top" arrow>
-			<span className={styles.scopeChip} data-testid="overview-locked-scope">
-				<Lock size={12} />
-				<span className={styles.scopeExpression}>
-					<span className={styles.scopeKey}>{relation.key}</span>
-					<span className={styles.scopeOperator}> = </span>
-					<span className={styles.scopeValue}>
-						{formatValueForExpression(relation.value)}
-					</span>
-				</span>
-				{clauses.length > 1 && (
-					<span className={styles.scopeMore}>{`+${clauses.length - 1}`}</span>
-				)}
-			</span>
-		</TooltipSimple>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/__tests__/EntityOverview.test.tsx

@@ -1,242 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { NuqsTestingAdapter, OnUrlUpdateFunction } from 'nuqs/adapters/testing';
-
-import { TableColumnDef } from 'components/TanStackTableView';
-
-import { InfraMonitoringEntity } from '../../../constants';
-import EntityOverview from '../EntityOverview';
-
-window.ResizeObserver =
-	window.ResizeObserver ||
-	jest.fn().mockImplementation(() => ({
-		disconnect: jest.fn(),
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-	}));
-
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="mock-datetime" />,
-}));
-
-const mockQuerySearchProps = jest.fn();
-
-jest.mock('components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch', () => ({
-	__esModule: true,
-	default: (props: {
-		queryData?: { filter?: { expression?: string } };
-		initialExpression?: string;
-	}): JSX.Element => {
-		mockQuerySearchProps(props);
-		return <div data-testid="mock-query-search" />;
-	},
-}));
-
-type TestRecord = { name: string; meta?: Record<string, string> | null };
-
-const mockFetchListData = jest.fn();
-
-const mockTableColumns: TableColumnDef<TestRecord>[] = [
-	{
-		id: 'name',
-		header: 'Name',
-		accessorKey: 'name',
-		cell: ({ value }): string => String(value),
-	},
-];
-
-jest.mock('../../../Base/entity.registry', () => ({
-	getEntityConfig: (category: string) => ({
-		list: {
-			entity: category,
-			tableColumns: mockTableColumns,
-			fetchListData: mockFetchListData,
-			getRowKey: (record: TestRecord): string => record.name,
-			getItemKey: (record: TestRecord): string => record.name,
-		},
-	}),
-}));
-
-const NODE_ATTRIBUTES = {
-	'k8s.node.name': 'node-1',
-	'k8s.cluster.name': 'prod',
-};
-
-const LOCKED_EXPRESSION =
-	"k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'";
-
-interface RenderOptions {
-	onUrlUpdate?: OnUrlUpdateFunction;
-	attributes?: Record<string, string>;
-}
-
-function overviewTree(
-	attributes: Record<string, string>,
-	queryClient: QueryClient,
-	onUrlUpdate?: OnUrlUpdateFunction,
-): JSX.Element {
-	return (
-		<MemoryRouter>
-			<QueryClientProvider client={queryClient}>
-				<NuqsTestingAdapter onUrlUpdate={onUrlUpdate}>
-					<VirtuosoMockContext.Provider
-						value={{ viewportHeight: 800, itemHeight: 50 }}
-					>
-						<TooltipProvider>
-							<EntityOverview
-								category={InfraMonitoringEntity.NODES}
-								eventEntity="node"
-								attributes={attributes}
-								entity={{ nodeName: attributes['k8s.node.name'] }}
-								entityName={attributes['k8s.node.name']}
-								queryKeyPrefix="node"
-							/>
-						</TooltipProvider>
-					</VirtuosoMockContext.Provider>
-				</NuqsTestingAdapter>
-			</QueryClientProvider>
-		</MemoryRouter>
-	);
-}
-
-function renderOverview({
-	onUrlUpdate,
-	attributes = NODE_ATTRIBUTES,
-}: RenderOptions = {}): {
-	openAnotherResource: (next: Record<string, string>) => void;
-} {
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-
-	const { rerender } = render(
-		overviewTree(attributes, queryClient, onUrlUpdate),
-	);
-
-	return {
-		openAnotherResource: (next): void =>
-			rerender(overviewTree(next, queryClient, onUrlUpdate)),
-	};
-}
-
-describe('EntityOverview', () => {
-	beforeEach(() => {
-		mockQuerySearchProps.mockReset();
-		mockFetchListData.mockReset();
-		mockFetchListData.mockResolvedValue({
-			type: 'list',
-			records: [{ name: 'pod-1' }],
-			total: 1,
-		});
-	});
-
-	it('lists the first related resource scoped by the locked expression', async () => {
-		renderOverview();
-
-		await waitFor(() => {
-			expect(mockFetchListData).toHaveBeenCalled();
-		});
-
-		expect(mockFetchListData.mock.calls[0][0].filter.expression).toBe(
-			LOCKED_EXPRESSION,
-		);
-		await expect(
-			screen.findByTestId('related-entities-table-pods'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('keeps the locked scope out of the editable filter', async () => {
-		renderOverview();
-
-		// The chip leads with the relation and counts the scope behind it
-		const chip = await screen.findByTestId('overview-locked-scope');
-		expect(chip).toHaveTextContent("k8s.node.name = 'node-1'");
-		expect(chip).toHaveTextContent('+1');
-
-		// The editor is handed the user's own expression, never the locked scope
-		const lastProps = mockQuerySearchProps.mock.calls.at(-1)?.[0];
-		expect(lastProps.queryData.filter.expression).toBe('');
-		expect(lastProps.initialExpression).toBe(LOCKED_EXPRESSION);
-	});
-
-	it('opens the clicked resource in its own drawer', async () => {
-		const user = userEvent.setup();
-		const onUrlUpdate = jest.fn();
-
-		renderOverview({ onUrlUpdate });
-
-		const row = await screen.findByText('pod-1');
-		await user.click(row);
-
-		await waitFor(() => {
-			const params = onUrlUpdate.mock.calls.map((call) => call[0].searchParams);
-			expect(
-				params.some(
-					(searchParams) =>
-						searchParams.get('selectedItem') === 'pod-1' &&
-						searchParams.get('selectedItemCategory') === 'pods',
-				),
-			).toBe(true);
-		});
-	});
-
-	it("forgets the previous drawer's resource when another one opens", async () => {
-		const user = userEvent.setup();
-
-		const { openAnotherResource } = renderOverview();
-
-		await user.click(screen.getByTestId('overview-resource-select'));
-		await user.click(
-			await screen.findByTestId('overview-resource-option-containers'),
-		);
-		await expect(
-			screen.findByTestId('related-entities-table-containers'),
-		).resolves.toBeInTheDocument();
-
-		openAnotherResource({ ...NODE_ATTRIBUTES, 'k8s.node.name': 'node-2' });
-
-		// Back to pods, this node's default, rather than the containers just picked
-		await expect(
-			screen.findByTestId('related-entities-table-pods'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('says so when the resource relates to nothing', async () => {
-		renderOverview({ attributes: { 'os.type': 'linux' } });
-
-		await expect(
-			screen.findByText(/Nothing related to this Node/),
-		).resolves.toBeInTheDocument();
-		expect(mockFetchListData).not.toHaveBeenCalled();
-	});
-
-	it('switches the listed resource from the dropdown', async () => {
-		const user = userEvent.setup();
-
-		renderOverview();
-
-		await waitFor(() => {
-			expect(mockFetchListData).toHaveBeenCalled();
-		});
-
-		await user.click(screen.getByTestId('overview-resource-select'));
-
-		// Every resource related to a node is offered, the listed one included
-		await expect(
-			screen.findByTestId('overview-resource-option-pods'),
-		).resolves.toBeInTheDocument();
-
-		await user.click(
-			await screen.findByTestId('overview-resource-option-containers'),
-		);
-
-		await expect(
-			screen.findByTestId('related-entities-table-containers'),
-		).resolves.toBeInTheDocument();
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/useCarriedOverFilters.ts

@@ -1,51 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useQuerySearchOnRun } from 'components/QueryBuilderV2';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { parseAsString, useQueryState } from 'nuqs';
-
-import { carryOverListFilters } from '../../Base/relations';
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../../constants';
-
-/**
- * Seeds the editable half of the filter with whatever the list page was
- * filtered by, reduced to the clauses the listed resource understands. Runs
- * once per resource, so it never overwrites what the user types, and stands
- * aside for a drawer opened from a link that already carries a filter.
- */
-export function useCarriedOverFilters(
-	targetCategory: InfraMonitoringEntity,
-): void {
-	const { currentQuery } = useQueryBuilder();
-	const listExpression =
-		currentQuery.builder.queryData[0]?.filter?.expression || '';
-	const querySearchOnRun = useQuerySearchOnRun();
-
-	const [urlExpression] = useQueryState(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.OVERVIEW_EXPRESSION,
-		parseAsString,
-	);
-
-	const seededFor = useRef<string | null>(null);
-	const hadUrlExpressionOnMount = useRef<boolean | null>(null);
-	if (hadUrlExpressionOnMount.current === null) {
-		hadUrlExpressionOnMount.current = !!urlExpression;
-	}
-
-	useEffect(() => {
-		if (seededFor.current === targetCategory) {
-			return;
-		}
-
-		const isFirstResource = seededFor.current === null;
-		seededFor.current = targetCategory;
-
-		if (isFirstResource && hadUrlExpressionOnMount.current) {
-			return;
-		}
-
-		querySearchOnRun(carryOverListFilters(listExpression, targetCategory));
-	}, [targetCategory, listExpression, querySearchOnRun]);
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/useRelatedEntities.ts

@@ -1,113 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import APIError from 'types/api/error';
-
-import {
-	K8sEntityData,
-	K8sEntityListConfig,
-} from '../../Base/entity.config.types';
-import { SelectedItemParams } from '../../hooks';
-
-type FetchRelatedEntities = K8sEntityListConfig<
-	K8sEntityData,
-	string | SelectedItemParams
->['fetchListData'];
-
-interface UseRelatedEntitiesParams {
-	/** Absent while the target category is still unresolved; the query stays idle */
-	fetchListData?: FetchRelatedEntities;
-	queryKey: string;
-	expression: string;
-	/** Time range in seconds — see useEntityDetailsTime */
-	timeRange: { startTime: number; endTime: number };
-}
-
-interface UseRelatedEntitiesResult {
-	records: K8sEntityData[];
-	total: number;
-	page: number;
-	limit: number;
-	setPage: (page: number) => void;
-	setLimit: (limit: number) => void;
-	isLoading: boolean;
-	isFetching: boolean;
-	isError: boolean;
-	error?: APIError | null;
-	endTimeBeforeRetention?: boolean;
-	refetch: () => void;
-	cancel: () => void;
-}
-
-export const RELATED_ENTITIES_PAGE_SIZE = 10;
-
-const SECOND_IN_MS = 1000;
-
-export function useRelatedEntities({
-	fetchListData,
-	queryKey,
-	expression,
-	timeRange,
-}: UseRelatedEntitiesParams): UseRelatedEntitiesResult {
-	const queryClient = useQueryClient();
-	const [page, setPage] = useState(1);
-	const [limit, setLimit] = useState(RELATED_ENTITIES_PAGE_SIZE);
-
-	useEffect(() => {
-		setPage(1);
-	}, [expression, queryKey]);
-
-	const reactQueryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-			queryKey,
-			timeRange.startTime,
-			timeRange.endTime,
-			expression,
-			page,
-			limit,
-		],
-		[queryKey, timeRange.startTime, timeRange.endTime, expression, page, limit],
-	);
-
-	const { data, isLoading, isFetching, isError, refetch } = useQuery({
-		queryKey: reactQueryKey,
-		queryFn: ({ signal }) =>
-			(fetchListData as FetchRelatedEntities)(
-				{
-					filter: { expression },
-					offset: (page - 1) * limit,
-					limit,
-					// The list APIs take milliseconds, useEntityDetailsTime gives seconds
-					start: timeRange.startTime * SECOND_IN_MS,
-					end: timeRange.endTime * SECOND_IN_MS,
-				},
-				signal,
-			),
-		enabled: !!fetchListData && !!expression.trim(),
-	});
-
-	const cancel = useCallback((): void => {
-		void queryClient.cancelQueries({ queryKey: reactQueryKey });
-	}, [queryClient, reactQueryKey]);
-
-	const handleRefetch = useCallback((): void => {
-		void refetch();
-	}, [refetch]);
-
-	return {
-		records: data?.records ?? data?.data ?? [],
-		total: data?.total ?? 0,
-		page,
-		limit,
-		setPage,
-		setLimit,
-		isLoading,
-		isFetching,
-		isError,
-		error: data?.error,
-		endTimeBeforeRetention: data?.endTimeBeforeRetention,
-		refetch: handleRefetch,
-		cancel,
-	};
-}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab.tsx

@@ -2,7 +2,7 @@ import { Container } from '@signozhq/icons';
 import { InfraMonitoringEvents } from 'constants/events';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 
-import { CustomTab } from '../Base/types';
+import { CustomTab } from '../Base/K8sBaseDetails';
 import {
 	InfraMonitoringEntity,
 	podUtilizationByPodWidgetInfo,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/entityDetails.module.scss

@@ -26,10 +26,7 @@
 		overflow-y: auto;
 		padding: var(--spacing-8);
 		margin: 0;
-		// On a 13" screen the drawer itself is narrower than 900px, and a flat
-		// minimum there clips the right edge of every tab
-		box-sizing: border-box;
-		min-width: min(900px, 100%);
+		min-width: 900px;
 	}
 }
 
@@ -37,29 +34,6 @@
 	--button-padding: var(--spacing-2);
 }
 
-.backButton {
-	--button-padding: var(--spacing-2) var(--spacing-3);
-
-	flex: none;
-	white-space: nowrap;
-}
-
-// The kind reads as a label on the name, not as part of it
-.entityKind {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	flex: none;
-	padding: var(--spacing-1) var(--spacing-3);
-	border-radius: 2px;
-	background: var(--l3-background);
-	color: var(--l2-foreground);
-	font-size: 11px;
-	font-weight: 500;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-}
-
 .title {
 	font-family: var(--periscope-font-family-mono);
 

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/events.ts

@@ -1,7 +1,4 @@
-import type {
-	InfraMonitoringEntity,
-	VIEWS,
-} from 'container/InfraMonitoringK8sV2/constants';
+import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import logEvent from 'api/common/logEvent';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { isCustomTimeRange } from 'store/globalTime';
@@ -18,7 +15,7 @@ export function logInfraDrawerTimeRangeCustomizedEvent(
 
 export function logInfraDrawerFilterCustomizedEvent(
 	entityType: InfraMonitoringEntity,
-	tab: `${VIEWS}`,
+	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
 	expression: string,
 	filterSource: 'search' | 'logs',
 ): void {

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -12,11 +12,23 @@ import {
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ArrowUpToLine, Filter } from '@signozhq/icons';
+import {
+	ArrowUpDown,
+	ArrowUpToLine,
+	Bolt,
+	Box,
+	Boxes,
+	Computer,
+	Container,
+	FilePenLine,
+	Filter,
+	Group,
+	HardDrive,
+	Workflow,
+} from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { CategoryIcon } from './Base/categoryIcons';
 import { K8sDynamicList } from './Base/K8sDynamicList';
 import {
 	GetClustersQuickFiltersConfig,
@@ -30,7 +42,6 @@ import {
 	GetStatefulsetsQuickFiltersConfig,
 	GetVolumesQuickFiltersConfig,
 	InfraMonitoringEntity,
-	K8S_CATEGORY_LABELS,
 	K8sCategories,
 	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
@@ -145,62 +156,62 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		() => [
 			{
 				key: K8sCategories.CONTAINERS,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.CONTAINERS],
-				icon: <CategoryIcon category={InfraMonitoringEntity.CONTAINERS} />,
+				label: 'Containers',
+				icon: <Box size={14} />,
 				config: GetContainersQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.PODS,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.PODS],
-				icon: <CategoryIcon category={InfraMonitoringEntity.PODS} />,
+				label: 'Pods',
+				icon: <Container size={14} />,
 				config: GetPodsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.NODES,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.NODES],
-				icon: <CategoryIcon category={InfraMonitoringEntity.NODES} />,
+				label: 'Nodes',
+				icon: <Workflow size={14} />,
 				config: GetNodesQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.NAMESPACES,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.NAMESPACES],
-				icon: <CategoryIcon category={InfraMonitoringEntity.NAMESPACES} />,
+				label: 'Namespaces',
+				icon: <FilePenLine size={14} />,
 				config: GetNamespaceQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.CLUSTERS,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.CLUSTERS],
-				icon: <CategoryIcon category={InfraMonitoringEntity.CLUSTERS} />,
+				label: 'Clusters',
+				icon: <Boxes size={14} />,
 				config: GetClustersQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.DEPLOYMENTS,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.DEPLOYMENTS],
-				icon: <CategoryIcon category={InfraMonitoringEntity.DEPLOYMENTS} />,
+				label: 'Deployments',
+				icon: <Computer size={14} />,
 				config: GetDeploymentsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.JOBS,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.JOBS],
-				icon: <CategoryIcon category={InfraMonitoringEntity.JOBS} />,
+				label: 'Jobs',
+				icon: <Bolt size={14} />,
 				config: GetJobsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.DAEMONSETS,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.DAEMONSETS],
-				icon: <CategoryIcon category={InfraMonitoringEntity.DAEMONSETS} />,
+				label: 'DaemonSets',
+				icon: <Group size={14} />,
 				config: GetDaemonsetsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.STATEFULSETS,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.STATEFULSETS],
-				icon: <CategoryIcon category={InfraMonitoringEntity.STATEFULSETS} />,
+				label: 'StatefulSets',
+				icon: <ArrowUpDown size={14} />,
 				config: GetStatefulsetsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.VOLUMES,
-				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.VOLUMES],
-				icon: <CategoryIcon category={InfraMonitoringEntity.VOLUMES} />,
+				label: 'Volumes',
+				icon: <HardDrive size={14} />,
 				config: GetVolumesQuickFiltersConfig(),
 			},
 		],

frontend/src/container/InfraMonitoringK8sV2/Jobs/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/Jobs/entity.config.ts

@@ -132,7 +132,6 @@ export const jobEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.JOBS,
 		eventCategory: InfraMonitoringEvents.Job,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'job',
 		getSelectedItemExpression: k8sJobGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Namespaces/constants.ts

@@ -6,7 +6,10 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsCountConfig, K8sDetailsMetadataConfig } from '../Base/types';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/Namespaces/entity.config.ts

@@ -143,7 +143,6 @@ export const namespaceEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.NAMESPACES,
 		eventCategory: InfraMonitoringEvents.Namespace,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'namespace',
 		getSelectedItemExpression: k8sNamespaceGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Nodes/constants.ts

@@ -12,7 +12,7 @@ import {
 	buildLogsTracesExpression,
 } from 'container/InfraMonitoringK8sV2/Base/utils';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 

frontend/src/container/InfraMonitoringK8sV2/Nodes/entity.config.ts

@@ -129,7 +129,6 @@ export const nodeEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.NODES,
 		eventCategory: InfraMonitoringEvents.Node,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'node',
 		getSelectedItemExpression: k8sNodeGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Pods/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	buildEventsExpression,

frontend/src/container/InfraMonitoringK8sV2/Pods/entity.config.ts

@@ -121,7 +121,6 @@ export const podEntityConfig: K8sEntityConfig<InframonitoringtypesPodRecordDTO>
 		details: {
 			category: InfraMonitoringEntity.PODS,
 			eventCategory: InfraMonitoringEvents.Pod,
-			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'pod',
 			getSelectedItemExpression: k8sPodGetSelectedItemExpression,
 			fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/entity.config.ts

@@ -132,7 +132,6 @@ export const statefulSetEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.STATEFULSETS,
 		eventCategory: InfraMonitoringEvents.StatefulSet,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'statefulSet',
 		getSelectedItemExpression: k8sStatefulSetGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Volumes/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/types';
+import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {

frontend/src/container/InfraMonitoringK8sV2/Volumes/entity.config.ts

@@ -127,7 +127,6 @@ export const volumeEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.VOLUMES,
 		eventCategory: InfraMonitoringEvents.Volume,
-		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'volume',
 		getSelectedItemExpression: k8sVolumeGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -157,11 +157,9 @@ export enum VIEWS {
 	PROCESSES = 'processes',
 	EVENTS = 'events',
 	POD_METRICS = 'pod_metrics',
-	OVERVIEW = 'overview',
 }
 
 export const VIEW_TYPES = {
-	OVERVIEW: VIEWS.OVERVIEW,
 	METRICS: VIEWS.METRICS,
 	LOGS: VIEWS.LOGS,
 	TRACES: VIEWS.TRACES,
@@ -898,41 +896,6 @@ export const getInvalidValueTooltipText = (
 	attribute: string,
 ): string => `Some ${entity} do not have ${attribute}s.`;
 
-export const K8S_CATEGORY_LABELS: Record<InfraMonitoringEntity, string> = {
-	[InfraMonitoringEntity.HOSTS]: 'Hosts',
-	[InfraMonitoringEntity.PODS]: 'Pods',
-	[InfraMonitoringEntity.NODES]: 'Nodes',
-	[InfraMonitoringEntity.NAMESPACES]: 'Namespaces',
-	[InfraMonitoringEntity.CLUSTERS]: 'Clusters',
-	[InfraMonitoringEntity.DEPLOYMENTS]: 'Deployments',
-	[InfraMonitoringEntity.STATEFULSETS]: 'StatefulSets',
-	[InfraMonitoringEntity.DAEMONSETS]: 'DaemonSets',
-	[InfraMonitoringEntity.CONTAINERS]: 'Containers',
-	[InfraMonitoringEntity.JOBS]: 'Jobs',
-	[InfraMonitoringEntity.VOLUMES]: 'Volumes',
-};
-
-/**
- * Used where one record is named, like the drawer's back control. Cased the
- * same way as the plural labels, so StatefulSet keeps its capital.
- */
-export const K8S_CATEGORY_SINGULAR_LABELS: Record<
-	InfraMonitoringEntity,
-	string
-> = {
-	[InfraMonitoringEntity.HOSTS]: 'Host',
-	[InfraMonitoringEntity.PODS]: 'Pod',
-	[InfraMonitoringEntity.NODES]: 'Node',
-	[InfraMonitoringEntity.NAMESPACES]: 'Namespace',
-	[InfraMonitoringEntity.CLUSTERS]: 'Cluster',
-	[InfraMonitoringEntity.DEPLOYMENTS]: 'Deployment',
-	[InfraMonitoringEntity.STATEFULSETS]: 'StatefulSet',
-	[InfraMonitoringEntity.DAEMONSETS]: 'DaemonSet',
-	[InfraMonitoringEntity.CONTAINERS]: 'Container',
-	[InfraMonitoringEntity.JOBS]: 'Job',
-	[InfraMonitoringEntity.VOLUMES]: 'Volume',
-};
-
 export const ENTITY_FILTER_PLACEHOLDERS: Record<InfraMonitoringEntity, string> =
 	{
 		[InfraMonitoringEntity.HOSTS]:
@@ -976,11 +939,9 @@ export const INFRA_MONITORING_K8S_PARAMS_KEYS = {
 	PAGE_SIZE: 'pageSize',
 	EXPANDED: 'expanded',
 	SELECTED_ITEM: 'selectedItem',
-	SELECTED_ITEM_CATEGORY: 'selectedItemCategory',
 	SELECTED_ITEM_CLUSTER_NAME: 'selectedItemClusterName',
 	SELECTED_ITEM_NAMESPACE_NAME: 'selectedItemNamespaceName',
 	SELECTED_ITEM_CONTAINER_NAME: 'selectedItemContainerName',
-	OVERVIEW_EXPRESSION: 'overviewExpression',
 	DETAIL_RELATIVE_TIME: 'detailRelativeTime',
 	DETAIL_START_TIME: 'detailStartTime',
 	DETAIL_END_TIME: 'detailEndTime',

frontend/src/container/InfraMonitoringK8sV2/hooks.ts

@@ -18,6 +18,7 @@ import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 import {
 	DEFAULT_K8S_CATEGORY,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	VIEWS,
 } from './constants';
 import { orderBySchema, OrderBySchemaType } from './schemas';
 
@@ -84,13 +85,10 @@ export const useInfraMonitoringGroupBy = (): UseQueryStateReturn<
 		parseAsGroupBy.withDefault([]).withOptions(defaultNuqsOptions),
 	);
 
-export const useInfraMonitoringView = (): UseQueryStateReturn<
-	string | null,
-	undefined
-> =>
+export const useInfraMonitoringView = (): UseQueryStateReturn<string, string> =>
 	useQueryState(
 		INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW,
-		parseAsString.withOptions(defaultNuqsOptions),
+		parseAsString.withDefault(VIEWS.METRICS).withOptions(defaultNuqsOptions),
 	);
 
 export const useInfraMonitoringLogFilters = (): UseQueryStateReturn<
@@ -139,8 +137,6 @@ export const useInfraMonitoringCategory = (): UseQueryStateReturn<
 
 export interface SelectedItemParams {
 	selectedItem: string | null;
-	/** Drawer category, when it differs from the list page category. */
-	category?: string | null;
 	clusterName?: string | null;
 	namespaceName?: string | null;
 	containerName?: string | null;
@@ -148,7 +144,6 @@ export interface SelectedItemParams {
 
 const selectedItemParamsParsers = {
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: parseAsString,
-	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CONTAINER_NAME]: parseAsString,
@@ -170,8 +165,6 @@ export const useInfraMonitoringSelectedItemParams =
 			() => ({
 				selectedItem:
 					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM] ?? null,
-				category:
-					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY] ?? null,
 				clusterName:
 					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME] ??
 					null,
@@ -190,7 +183,6 @@ export const useInfraMonitoringSelectedItemParams =
 				if (newParams === null) {
 					void setRawParams({
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: null,
-						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CONTAINER_NAME]: null,
@@ -201,8 +193,6 @@ export const useInfraMonitoringSelectedItemParams =
 				void setRawParams({
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]:
 						newParams.selectedItem ?? null,
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]:
-						newParams.category ?? null,
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]:
 						newParams.clusterName ?? null,
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]:

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -24,7 +24,6 @@ export default function Legend({
 	focusedSeriesIndex,
 	onAction,
 	showCopy = true,
-	itemLabel = 'series',
 }: LegendProps): JSX.Element {
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
 	const [filterQuery, setFilterQuery] = useState('');
@@ -93,12 +92,11 @@ export default function Legend({
 					position={position}
 					filterQuery={filterQuery}
 					onFilterQueryChange={setFilterQuery}
-					itemLabel={itemLabel}
 				/>
 			)}
 			{isEmptyState ? (
 				<div className={styles.emptyState}>
-					No {itemLabel} found matching &quot;{effectiveQuery}&quot;
+					No series found matching &quot;{effectiveQuery}&quot;
 				</div>
 			) : (
 				<VirtuosoGrid

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx

@@ -14,7 +14,6 @@ export interface LegendToolbarProps {
 	position: LegendPosition;
 	filterQuery: string;
 	onFilterQueryChange: (query: string) => void;
-	itemLabel: string;
 }
 
 /** Legend chrome: the series search box and the "Showing N of M" readout. */
@@ -24,7 +23,6 @@ export default function LegendToolbar({
 	position,
 	filterQuery,
 	onFilterQueryChange,
-	itemLabel,
 }: LegendToolbarProps): JSX.Element {
 	const handleFilterChange = useCallback(
 		(event: ChangeEvent<HTMLInputElement>): void =>
@@ -50,7 +48,7 @@ export default function LegendToolbar({
 			aria-live="polite"
 			data-testid="legend-status"
 		>
-			{`Showing ${visibleCount} of ${totalCount} ${itemLabel}`}
+			{`Showing ${visibleCount} of ${totalCount} series`}
 		</span>
 	);
 

frontend/src/lib/uPlotV2/components/Tooltip/ScatterTooltip.module.scss

@@ -1,100 +0,0 @@
-// Surface matches the shared Tooltip: same tokens, same radius, no shadow.
-// Padding lives on the sections so a footer can reach the container edges.
-.container {
-	font-family: 'Inter';
-	font-size: 12px;
-	background: var(--l2-background);
-	-webkit-font-smoothing: antialiased;
-	color: var(--l2-foreground);
-	border-radius: 6px;
-	border: 1px solid var(--l2-border);
-	display: flex;
-	flex-direction: column;
-	min-width: 200px;
-
-	&.pinned {
-		border-color: var(--ring);
-	}
-}
-
-.divider {
-	display: block;
-	width: 100%;
-	height: 1px;
-	background-color: var(--l2-border);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-// Matches the legend row's marker.
-.marker {
-	width: 10px;
-	height: 10px;
-	border-radius: var(--radius);
-	flex-shrink: 0;
-}
-
-.title {
-	flex: 1;
-	min-width: 0;
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-weight: 600;
-	color: var(--text-vanilla-100);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.status {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-1);
-	font-size: 11px;
-	color: var(--text-vanilla-400);
-	flex-shrink: 0;
-}
-
-.rows {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-.row {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-variant-numeric: tabular-nums;
-	color: var(--text-vanilla-100);
-}
-
-// The group values name the point; the channels are what it says.
-.rowMuted {
-	color: var(--text-vanilla-400);
-}
-
-.rowLabel {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.rowValue {
-	flex: 0 0 auto;
-	max-width: 60%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}

frontend/src/lib/uPlotV2/components/Tooltip/ScatterTooltip.tsx

@@ -1,111 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import { Pin } from '@signozhq/icons';
-
-import { ScatterTooltipProps } from '../types';
-import { buildChannelRows, resolveHoveredPoint } from './scatterTooltipContent';
-
-import Styles from './ScatterTooltip.module.scss';
-
-/**
- * One point, its channels, then the group values that name it. Purpose-built
- * rather than composed from the shared `Tooltip`, whose list is one row per
- * series at a shared x; a scatter point has no such neighbours.
- */
-export default function ScatterTooltip({
-	uPlotInstance,
-	dataIndexes,
-	seriesIndex,
-	channels,
-	resolvePointLabels,
-	decimalPrecision,
-	isPinned,
-	dismiss,
-	renderTooltipFooter,
-}: ScatterTooltipProps): JSX.Element | null {
-	const point = useMemo(
-		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
-		[uPlotInstance, seriesIndex, dataIndexes],
-	);
-
-	const rows = useMemo(
-		() => (point ? buildChannelRows(point, channels, decimalPrecision) : []),
-		[point, channels, decimalPrecision],
-	);
-
-	const labels = useMemo(
-		() =>
-			point
-				? (resolvePointLabels?.(point.seriesIndex, point.dataIndex) ?? [])
-				: [],
-		[point, resolvePointLabels],
-	);
-
-	if (!point) {
-		return null;
-	}
-
-	return (
-		<div
-			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
-			data-pinned={isPinned}
-			data-testid="scatter-tooltip"
-		>
-			<div className={Styles.header}>
-				<span className={Styles.marker} style={{ backgroundColor: point.color }} />
-				<span
-					className={Styles.title}
-					title={point.label}
-					data-testid="scatter-tooltip-title"
-				>
-					{point.label}
-				</span>
-				{isPinned && (
-					<span className={Styles.status} data-testid="scatter-tooltip-status">
-						<Pin size={12} />
-						<span>Pinned</span>
-					</span>
-				)}
-			</div>
-
-			<span className={Styles.divider} />
-
-			<div className={Styles.rows}>
-				{rows.map((row) => (
-					<div
-						key={row.label}
-						className={Styles.row}
-						data-testid="scatter-tooltip-row"
-					>
-						<span className={Styles.rowLabel}>{row.label}</span>
-						<span className={Styles.rowValue}>{row.value}</span>
-					</div>
-				))}
-			</div>
-
-			{labels.length > 0 && (
-				<>
-					<span className={Styles.divider} />
-					<div className={Styles.rows}>
-						{labels.map((label) => (
-							<div
-								key={label.key}
-								className={cx(Styles.row, Styles.rowMuted)}
-								data-testid="scatter-tooltip-label"
-							>
-								<span className={Styles.rowLabel} title={label.key}>
-									{label.key}
-								</span>
-								<span className={Styles.rowValue} title={label.value}>
-									{label.value}
-								</span>
-							</div>
-						))}
-					</div>
-				</>
-			)}
-
-			{renderTooltipFooter?.({ isPinned, dismiss })}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/scatterTooltipContent.test.ts

@@ -1,94 +0,0 @@
-import type uPlot from 'uplot';
-
-import {
-	buildChannelRows,
-	resolveHoveredPoint,
-	ScatterHoveredPoint,
-} from '../scatterTooltipContent';
-
-jest.mock('components/Graph/yAxisConfig', () => ({
-	getToolTipValue: jest.fn((value: number | string, unit?: string) =>
-		`${value} ${unit ?? ''}`.trim(),
-	),
-}));
-
-const plot = {
-	data: [
-		null,
-		[
-			[10, 20],
-			[100, 200],
-			[5, null],
-		],
-		[[30], [300]],
-	],
-	series: [
-		{},
-		{ label: 'cart', stroke: '#ff0000' },
-		{ label: 'checkout', stroke: (): string => '#00ff00' },
-	],
-} as unknown as uPlot;
-
-describe('resolveHoveredPoint', () => {
-	it('reads the focused series at its own data index', () => {
-		expect(resolveHoveredPoint(plot, 1, [null, 1, null])).toStrictEqual({
-			seriesIndex: 1,
-			dataIndex: 1,
-			label: 'cart',
-			color: '#ff0000',
-			x: 20,
-			y: 200,
-			size: null,
-		});
-	});
-
-	it('carries the size column when present and resolves function strokes', () => {
-		expect(resolveHoveredPoint(plot, 1, [null, 0, null])?.size).toBe(5);
-		expect(resolveHoveredPoint(plot, 2, [null, null, 0])).toMatchObject({
-			label: 'checkout',
-			color: '#00ff00',
-			size: null,
-		});
-	});
-
-	it('is null without a focused series or an index for it', () => {
-		expect(resolveHoveredPoint(plot, null, [null, 0, null])).toBeNull();
-		expect(resolveHoveredPoint(plot, 0, [0, 0, null])).toBeNull();
-		expect(resolveHoveredPoint(plot, 1, [null, null, null])).toBeNull();
-	});
-});
-
-describe('buildChannelRows', () => {
-	const point: ScatterHoveredPoint = {
-		seriesIndex: 1,
-		dataIndex: 0,
-		label: 'cart',
-		color: '#f00',
-		x: 12,
-		y: 340,
-		size: 7,
-	};
-
-	it('formats x and y with their own units', () => {
-		const rows = buildChannelRows(point, {
-			x: { label: 'Throughput', unit: 'reqps' },
-			y: { label: 'p99', unit: 'ms' },
-		});
-
-		expect(rows).toStrictEqual([
-			{ label: 'Throughput', value: '12 reqps' },
-			{ label: 'p99', value: '340 ms' },
-		]);
-	});
-
-	it('adds the size row only when the channel is mapped and the point has one', () => {
-		const channels = {
-			x: { label: 'x' },
-			y: { label: 'y' },
-			size: { label: 'Errors' },
-		};
-
-		expect(buildChannelRows(point, channels)).toHaveLength(3);
-		expect(buildChannelRows({ ...point, size: null }, channels)).toHaveLength(2);
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/scatterTooltipContent.ts

@@ -1,90 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import type uPlot from 'uplot';
-
-import type {
-	ScatterChannel,
-	ScatterChannels,
-	ScatterSeriesData,
-} from '../../plugins/ScatterPlugin/types';
-import { resolveSeriesColor } from './utils';
-
-export interface ScatterHoveredPoint {
-	seriesIndex: number;
-	dataIndex: number;
-	label: string;
-	color: string;
-	x: number;
-	y: number;
-	size: number | null;
-}
-
-export interface ScatterTooltipRow {
-	label: string;
-	value: string;
-}
-
-/** The point the cursor resolved to: the focused series' own index into its columns. */
-export function resolveHoveredPoint(
-	u: uPlot,
-	seriesIndex: number | null,
-	dataIndexes: Array<number | null>,
-): ScatterHoveredPoint | null {
-	if (seriesIndex == null || seriesIndex < 1) {
-		return null;
-	}
-	const dataIndex = dataIndexes[seriesIndex];
-	const series = u.series[seriesIndex];
-	const columns = u.data[seriesIndex] as unknown as
-		| ScatterSeriesData
-		| undefined;
-	if (dataIndex == null || !series || !columns) {
-		return null;
-	}
-	const x = columns[0][dataIndex];
-	const y = columns[1][dataIndex];
-	if (x == null || y == null) {
-		return null;
-	}
-	return {
-		seriesIndex,
-		dataIndex,
-		label: String(series.label ?? ''),
-		color: resolveSeriesColor(series.stroke, u, seriesIndex),
-		x,
-		y,
-		size: columns[2]?.[dataIndex] ?? null,
-	};
-}
-
-function formatChannel(
-	value: number,
-	channel: ScatterChannel,
-	decimalPrecision?: PrecisionOption,
-): string {
-	return getToolTipValue(value, channel.unit, decimalPrecision);
-}
-
-export function buildChannelRows(
-	point: ScatterHoveredPoint,
-	channels: ScatterChannels,
-	decimalPrecision?: PrecisionOption,
-): ScatterTooltipRow[] {
-	const rows: ScatterTooltipRow[] = [
-		{
-			label: channels.x.label,
-			value: formatChannel(point.x, channels.x, decimalPrecision),
-		},
-		{
-			label: channels.y.label,
-			value: formatChannel(point.y, channels.y, decimalPrecision),
-		},
-	];
-	if (channels.size && point.size != null) {
-		rows.push({
-			label: channels.size.label,
-			value: formatChannel(point.size, channels.size, decimalPrecision),
-		});
-	}
-	return rows;
-}

frontend/src/lib/uPlotV2/components/types.ts

@@ -6,10 +6,6 @@ import uPlot from 'uplot';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
 import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
-import type {
-	ScatterChannels,
-	ScatterPointLabel,
-} from '../plugins/ScatterPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -123,17 +119,6 @@ export interface HeatmapTooltipProps
 	groupColor: string;
 }
 
-/** Not part of `TooltipProps`: it describes one point's channels, not a series list. */
-export interface ScatterTooltipProps
-	extends BaseTooltipProps, TooltipRenderArgs {
-	channels: ScatterChannels;
-	/** The group values behind a point, e.g. `service.name` → `cart`. */
-	resolvePointLabels?: (
-		seriesIndex: number,
-		dataIndex: number,
-	) => ScatterPointLabel[];
-}
-
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps
@@ -183,8 +168,6 @@ export interface LegendProps {
 	onAction: OnLegendAction;
 	/** Show the per-item copy button. Default true. */
 	showCopy?: boolean;
-	/** Plural noun for the items in the search readouts. Default 'series'. */
-	itemLabel?: string;
 }
 
 /** Props for the uPlot legend controller, which derives items + interaction

frontend/src/lib/uPlotV2/config/UPlotAxisBuilder.ts

@@ -39,16 +39,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
-	/** The axis line reads as the outermost grid line, so it takes the grid's style. */
-	private buildBorderConfig(
-		grid: uPlot.Axis.Grid | undefined,
-	): uPlot.Axis.Border | undefined {
-		if (this.props.showBorder === false || !grid) {
-			return undefined;
-		}
-		return { show: true, stroke: grid.stroke, width: grid.width };
-	}
-
 	/**
 	 * Build ticks configuration
 	 */
@@ -68,49 +58,32 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 	}
 
 	/**
-	 * Build values formatter for X-axis: time, or a value axis when a unit or
-	 * precision is given (scatter). Neither leaves uPlot's numeric default.
+	 * Build values formatter for X-axis (time)
 	 */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis, yAxisUnit, decimalPrecision } = this.props;
+		const { isTimeAxis } = this.props;
 
 		if (isTimeAxis) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 
-		if (yAxisUnit !== undefined || decimalPrecision !== undefined) {
-			return this.buildValueAxisFormatter();
-		}
-
 		return undefined;
 	}
 
 	/**
-	 * Build values formatter for a value axis (values with units). A split outside
-	 * the scale's range gets no label: uPlot's arcsinh splits always include
-	 * ±threshold, and it would draw that label past the plot's edge.
+	 * Build values formatter for Y-axis (values with units)
 	 */
-	private buildValueAxisFormatter(): uPlot.Axis.Values {
-		const { yAxisUnit, decimalPrecision, scaleKey } = this.props;
+	private buildYAxisValuesFormatter(): uPlot.Axis.Values {
+		const { yAxisUnit, decimalPrecision } = this.props;
 
-		return (u, t): string[] => {
-			const scale = u?.scales?.[scaleKey];
-			const min = scale?.min ?? -Infinity;
-			const max = scale?.max ?? Infinity;
-			return t.map((v) => {
-				if (
-					v === null ||
-					v === undefined ||
-					Number.isNaN(v) ||
-					v < min ||
-					v > max
-				) {
+		return (_, t): string[] =>
+			t.map((v) => {
+				if (v === null || v === undefined || Number.isNaN(v)) {
 					return '';
 				}
 				const value = getToolTipValue(v.toString(), yAxisUnit, decimalPrecision);
 				return `${value}`;
 			});
-		};
 	}
 
 	/**
@@ -128,7 +101,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildValueAxisFormatter()
+				? this.buildYAxisValuesFormatter()
 				: undefined;
 	}
 
@@ -176,12 +149,10 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			side = 2, // bottom by default
 			space,
 			splits,
-			filter,
 			gap = 5, // default gap is 5
 		} = this.props;
 
 		const grid = this.buildGridConfig();
-		const border = this.buildBorderConfig(grid);
 		const ticks = this.buildTicksConfig();
 		const values = this.buildValuesFormatter();
 		const size = this.buildSizeCalculator();
@@ -206,9 +177,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (ticks) {
 			axisConfig.ticks = ticks;
 		}
-		if (border) {
-			axisConfig.border = border;
-		}
 		if (values) {
 			axisConfig.values = values;
 		}
@@ -221,9 +189,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (space !== undefined) {
 			axisConfig.space = space;
 		}
-		if (filter) {
-			axisConfig.filter = filter;
-		}
 		if (size) {
 			axisConfig.size = size;
 		}

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -19,7 +19,6 @@ import {
 	ConfigBuilder,
 	ConfigBuilderProps,
 	LegendItem,
-	PlotMode,
 	SelectionPreferencesSource,
 	StackMode,
 } from './types';
@@ -66,8 +65,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private stackMode: StackMode = StackMode.None;
 
-	private mode: PlotMode = PlotMode.Aligned;
-
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -163,15 +160,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.stackMode;
 	}
 
-	/** Faceted series carry their own x column each; see `SeriesProps.facets`. */
-	setMode(mode: PlotMode): void {
-		this.mode = mode;
-	}
-
-	getMode(): PlotMode {
-		return this.mode;
-	}
-
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -524,10 +512,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			{} as Record<string, uPlot.Scale>,
 		);
 
-		if (this.mode === PlotMode.Faceted) {
-			config.mode = this.mode as number as uPlot.Mode;
-		}
-
 		config.hooks = this.hooks;
 		config.select = this.select;
 

frontend/src/lib/uPlotV2/config/UPlotScaleBuilder.ts

@@ -99,7 +99,6 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			time,
 			distr,
 			logBase,
-			asinhThreshold: this.props.asinhThreshold,
 		});
 
 		const { rangeConfig, hardMinOnly, hardMaxOnly, hasFixedRange } =

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -87,8 +87,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			lineConfig.fill = finalFillColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
-		} else if (this.props.drawStyle === DrawStyle.Scatter) {
-			lineConfig.fill = `${finalFillColor}${toAlphaHex(resolveFillOpacity(fillOpacity))}`;
 		} else if (fillMode && fillMode !== FillMode.None) {
 			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
@@ -124,8 +122,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		// Scatter without a `pathBuilder` has nothing to draw its discs with.
-		if (drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter) {
+		if (drawStyle === DrawStyle.Points) {
 			return { paths: (): null => null };
 		}
 
@@ -197,10 +194,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		if (drawStyle === DrawStyle.Points) {
 			return true;
 		}
-		// The discs are the series path; uPlot's own points would double-draw them.
-		if (drawStyle === DrawStyle.Scatter) {
-			return false;
-		}
 		return !!showPoints;
 	}
 
@@ -225,7 +218,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 	}
 
 	getConfig(): ExtendedSeries {
-		const { scaleKey, label, spanGaps, show = true, metric, facets } = this.props;
+		const { scaleKey, label, spanGaps, show = true, metric } = this.props;
 
 		const resolvedLineColor = this.getLineColor();
 
@@ -253,7 +246,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			...pathConfig,
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
-			...(facets && { facets }),
 		};
 	}
 }

frontend/src/lib/uPlotV2/config/__tests__/UPlotAxisBuilder.test.ts

@@ -120,35 +120,6 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
-	it('draws the axis line by default, styled like the grid', () => {
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ isDarkMode: true, grid: { width: 0.5 } }),
-		).getConfig();
-
-		expect(config.border).toStrictEqual({
-			show: true,
-			stroke: config.grid?.stroke,
-			width: 0.5,
-		});
-	});
-
-	it('leaves the axis line off when showBorder is false', () => {
-		expect(
-			new UPlotAxisBuilder(createAxisProps({ showBorder: false })).getConfig(),
-		).not.toHaveProperty('border');
-	});
-
-	it('passes explicit splits and a label filter through to uPlot', () => {
-		const splits = jest.fn();
-		const filter = jest.fn();
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ splits, filter }),
-		).getConfig();
-
-		expect(config.splits).toBe(splits);
-		expect(config.filter).toBe(filter);
-	});
-
 	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
 		const customTicks = { width: 1, show: false };
 		const withTicks = new UPlotAxisBuilder(
@@ -405,51 +376,3 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBeDefined();
 	});
 });
-
-describe('UPlotAxisBuilder value x axis', () => {
-	it('formats a non-time x axis with its unit', () => {
-		(getToolTipValue as jest.Mock).mockReturnValue('1.2K req/s');
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'x', isTimeAxis: false, yAxisUnit: 'reqps' }),
-		).getConfig();
-
-		const values = (config.values as uPlot.Axis.DynamicValues)(
-			{} as uPlot,
-			[1200],
-			0,
-			0,
-			0,
-		);
-
-		expect(values).toStrictEqual(['1.2K req/s']);
-		expect(getToolTipValue).toHaveBeenCalledWith('1200', 'reqps', undefined);
-	});
-
-	it('leaves a non-time x axis to uPlot when nothing says how to format it', () => {
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'x', isTimeAxis: false }),
-		).getConfig();
-
-		expect(config.values).toBeUndefined();
-	});
-});
-
-describe('UPlotAxisBuilder out-of-range splits', () => {
-	it('leaves a split the scale cannot place unlabelled', () => {
-		(getToolTipValue as jest.Mock).mockImplementation((v: string) => `${v} ms`);
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'y', yAxisUnit: 'ms' }),
-		).getConfig();
-		const u = { scales: { y: { min: 0, max: 1000 } } } as unknown as uPlot;
-
-		const values = (config.values as uPlot.Axis.DynamicValues)(
-			u,
-			[-10, 0, 500, 5000],
-			0,
-			0,
-			0,
-		);
-
-		expect(values).toStrictEqual(['', '0 ms', '500 ms', '']);
-	});
-});

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -5,12 +5,7 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import {
-	DrawStyle,
-	PlotMode,
-	SelectionPreferencesSource,
-	StackMode,
-} from '../types';
+import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -656,15 +651,3 @@ describe('UPlotConfigBuilder stacking', () => {
 		expect(builder.getConfig().bands).toStrictEqual([{ series: [1, 3] }]);
 	});
 });
-
-describe('UPlotConfigBuilder plot mode', () => {
-	it('leaves mode unset for aligned data and emits 2 when faceted', () => {
-		const aligned = new UPlotConfigBuilder({ id: 'aligned' });
-		expect(aligned.getConfig().mode).toBeUndefined();
-
-		const faceted = new UPlotConfigBuilder({ id: 'faceted' });
-		faceted.setMode(PlotMode.Faceted);
-		expect(faceted.getMode()).toBe(PlotMode.Faceted);
-		expect(faceted.getConfig().mode).toBe(2);
-	});
-});

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -399,39 +399,3 @@ describe('UPlotSeriesBuilder', () => {
 		expect(builder.getConfig().fill).toBeUndefined();
 	});
 });
-
-describe('UPlotSeriesBuilder scatter', () => {
-	it('draws through the given path builder and hides uPlot points', () => {
-		const pathBuilder = jest.fn();
-		const config = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Scatter,
-				pathBuilder,
-				facets: [{ scale: 'x' }, { scale: 'y' }],
-				lineColor: '#ff0000',
-				fillOpacity: 0.5,
-				lineWidth: 1,
-				pointSize: 8,
-			}),
-		).getConfig();
-
-		expect(config.paths).toBe(pathBuilder);
-		expect(config.facets).toStrictEqual([{ scale: 'x' }, { scale: 'y' }]);
-		expect(config.points?.show).toBe(false);
-		expect(config.points?.size).toBe(8);
-		expect(config.stroke).toBe('#ff0000');
-		expect(config.width).toBe(1);
-		expect(config.fill).toBe('#ff000080');
-	});
-
-	it('draws nothing without a path builder', () => {
-		const config = new UPlotSeriesBuilder(
-			createBaseProps({ drawStyle: DrawStyle.Scatter }),
-		).getConfig();
-
-		expect(
-			(config.paths as uPlot.Series.PathBuilder)({} as uPlot, 1, 0, 0),
-		).toBeNull();
-		expect(config.facets).toBeUndefined();
-	});
-});

frontend/src/lib/uPlotV2/config/types.ts

@@ -78,12 +78,8 @@ export interface AxisProps {
 	};
 	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Explicit tick positions, replacing uPlot's per-distribution default. */
+	/** Explicit axis splits, overriding the default tick calculation. */
 	splits?: uPlot.Axis.Splits;
-	/** Which splits get a label, replacing uPlot's per-distribution default. */
-	filter?: uPlot.Axis.Filter;
-	/** Draw the axis line along the plot edge, styled like the grid. Default true. */
-	showBorder?: boolean;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
@@ -94,8 +90,7 @@ export interface AxisProps {
 	isDarkMode?: boolean;
 	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the value ticks are formatted in (`spec.formatting.unit`). Named for the
-	 *  y axis, the only value axis until scatter; a non-time x axis reads it too. */
+	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
 	yAxisUnit?: string;
 	/**
 	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
@@ -114,15 +109,6 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
-	/** arcsinh: linear within ±`asinhThreshold`, logarithmic beyond. Takes zero and
-	 *  negatives, which a plain log cannot place. */
-	SymmetricLog = 'symlog',
-}
-
-/** uPlot's data layout: one shared x per chart, or per-series x/y columns. */
-export enum PlotMode {
-	Aligned = 1,
-	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -139,8 +125,6 @@ export interface ScaleProps {
 	auto?: boolean;
 	logBase?: uPlot.Scale.LogBase;
 	distribution?: DistributionType;
-	/** Half-width of a `SymmetricLog` scale's linear band around zero. Default 1. */
-	asinhThreshold?: number;
 }
 
 export enum DisconnectedValuesMode {
@@ -162,8 +146,6 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
-	/** Faceted (mode 2) discs at per-series x/y, drawn by the caller's `pathBuilder`. */
-	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -247,8 +229,6 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	isDarkMode?: boolean;
 	stepInterval?: number;
 	metric?: { [key: string]: string };
-	/** Mode 2 only: the scales the series' own x and y columns are read against. */
-	facets?: Series.Facet[];
 }
 
 export interface LegendItem {

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/geometry.test.ts

@@ -1,114 +0,0 @@
-import type uPlot from 'uplot';
-
-import { Quadtree } from '../../../utils/quadtree';
-import {
-	resolveHit,
-	resolvePointDiameter,
-	resolveSizeDomain,
-} from '../geometry';
-import { ScatterHit, ScatterPointSize } from '../types';
-
-const POINT_SIZE: ScatterPointSize = { fixed: 6, min: 4, max: 20 };
-
-const asData = (columns: unknown[]): uPlot.AlignedData =>
-	columns as unknown as uPlot.AlignedData;
-
-describe('resolveSizeDomain', () => {
-	it('spans the size columns of every series, skipping nulls', () => {
-		const data = asData([
-			null,
-			[
-				[1, 2],
-				[1, 2],
-				[10, null],
-			],
-			[[3], [3], [40]],
-		]);
-
-		expect(resolveSizeDomain(data)).toStrictEqual({ min: 10, max: 40 });
-	});
-
-	it('is null when no series carries sizes', () => {
-		expect(resolveSizeDomain(asData([null, [[1], [1]]]))).toBeNull();
-		expect(resolveSizeDomain(asData([null, [[1], [1], [null]]]))).toBeNull();
-	});
-});
-
-describe('resolvePointDiameter', () => {
-	it('uses the fixed diameter without a size or a domain', () => {
-		expect(resolvePointDiameter(null, { min: 0, max: 10 }, POINT_SIZE)).toBe(6);
-		expect(resolvePointDiameter(5, null, POINT_SIZE)).toBe(6);
-	});
-
-	it('maps the domain ends to min and max', () => {
-		const domain = { min: 0, max: 100 };
-		expect(resolvePointDiameter(0, domain, POINT_SIZE)).toBe(4);
-		expect(resolvePointDiameter(100, domain, POINT_SIZE)).toBe(20);
-	});
-
-	it('scales by area, not diameter', () => {
-		const midArea = (4 ** 2 + 20 ** 2) / 2;
-		expect(
-			resolvePointDiameter(50, { min: 0, max: 100 }, POINT_SIZE),
-		).toBeCloseTo(Math.sqrt(midArea));
-	});
-
-	it('clamps values outside the domain', () => {
-		const domain = { min: 10, max: 20 };
-		expect(resolvePointDiameter(-5, domain, POINT_SIZE)).toBe(4);
-		expect(resolvePointDiameter(500, domain, POINT_SIZE)).toBe(20);
-	});
-
-	it('uses the midpoint when every size is the same', () => {
-		expect(resolvePointDiameter(7, { min: 7, max: 7 }, POINT_SIZE)).toBe(12);
-	});
-});
-
-describe('resolveHit', () => {
-	const hit = (
-		seriesIndex: number,
-		dataIndex: number,
-		x: number,
-		y: number,
-		d: number,
-	): ScatterHit => ({ seriesIndex, dataIndex, x, y, w: d, h: d });
-
-	it('returns the disc under the cursor', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-		tree.add(hit(2, 3, 50, 50, 6));
-
-		expect(resolveHit(tree, 13, 13, 0)).toMatchObject({
-			seriesIndex: 1,
-			dataIndex: 0,
-		});
-		expect(resolveHit(tree, 52, 52, 0)).toMatchObject({
-			seriesIndex: 2,
-			dataIndex: 3,
-		});
-	});
-
-	it('is null when the cursor is off every disc', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-
-		expect(resolveHit(tree, 30, 30, 0)).toBeNull();
-	});
-
-	it('tolerance widens each disc', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-
-		expect(resolveHit(tree, 18, 13, 0)).toBeNull();
-		expect(resolveHit(tree, 18, 13, 3)).not.toBeNull();
-	});
-
-	it('prefers the disc whose centre is nearest when they overlap', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 10));
-		tree.add(hit(1, 1, 14, 10, 10));
-
-		expect(resolveHit(tree, 13, 15, 0)?.dataIndex).toBe(0);
-		expect(resolveHit(tree, 21, 15, 0)?.dataIndex).toBe(1);
-	});
-});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/scatterPlugin.test.ts

@@ -1,288 +0,0 @@
-import uPlot from 'uplot';
-
-import { PlotMode } from '../../../config/types';
-import { UPlotConfigBuilder } from '../../../config/UPlotConfigBuilder';
-import {
-	applyScatterPlugin,
-	createScatterPlugin,
-	SCATTER_FACETS,
-} from '../scatterPlugin';
-
-jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
-	getStoredSeriesVisibility: jest.fn(),
-}));
-
-/** jsdom has no Path2D; the builder only needs something that takes the calls. */
-class FakePath2D {
-	moveTo = jest.fn();
-	arc = jest.fn();
-}
-
-type OrientCallback = Parameters<typeof uPlot.orient>[2];
-
-interface FakePlotArgs {
-	series: Array<{ xs: number[]; ys: number[]; sizes?: Array<number | null> }>;
-	cursor?: { left: number; top: number };
-	scaleX?: { min: number; max: number };
-	scaleY?: { min: number; max: number };
-}
-
-/**
- * A 100×100 plot at the canvas origin with identity scales: value 10 draws at
- * pixel 10 on x, and at 100 − 10 on y (uPlot's y grows downward).
- */
-function createFakePlot({
-	series,
-	cursor = { left: -1, top: -1 },
-	scaleX = { min: 0, max: 100 },
-	scaleY = { min: 0, max: 100 },
-}: FakePlotArgs): uPlot {
-	const data = [
-		null,
-		...series.map((entry) =>
-			entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
-		),
-	];
-	return {
-		data,
-		series: [{}, ...series.map((_, index) => ({ label: `s${index + 1}` }))],
-		bbox: { left: 0, top: 0, width: 100, height: 100 },
-		cursor,
-		scales: { x: scaleX, y: scaleY },
-	} as unknown as uPlot;
-}
-
-/** Stands in for `uPlot.orient`: identity x, flipped y, an `arc` that records. */
-function orientWithIdentityScales(
-	u: uPlot,
-	seriesIdx: number,
-	cb: OrientCallback,
-): void {
-	const columns = (u.data as unknown as Array<number[][] | null>)[seriesIdx];
-	if (!columns) {
-		return;
-	}
-	const scaleX = (u.scales as unknown as Record<string, uPlot.Scale>).x;
-	const scaleY = (u.scales as unknown as Record<string, uPlot.Scale>).y;
-	const valToPosX = (value: number): number => value;
-	const valToPosY = (value: number): number => 100 - value;
-	// Real uPlot's `arc` helper forwards to the path; the test counts those calls.
-	const arc = (path: FakePath2D, ...args: number[]): void => {
-		path.arc(...args);
-	};
-	cb(
-		u.series[seriesIdx],
-		columns[0],
-		columns[1],
-		scaleX,
-		scaleY,
-		valToPosX as unknown as uPlot.ValToPos,
-		valToPosY as unknown as uPlot.ValToPos,
-		0,
-		0,
-		100,
-		100,
-		jest.fn() as never,
-		jest.fn() as never,
-		jest.fn() as never,
-		arc as never,
-		jest.fn() as never,
-	);
-}
-
-describe('createScatterPlugin', () => {
-	beforeAll(() => {
-		(globalThis as { Path2D?: unknown }).Path2D = FakePath2D;
-	});
-
-	beforeEach(() => {
-		(uPlot.orient as jest.Mock).mockImplementation(orientWithIdentityScales);
-	});
-
-	afterEach(() => {
-		(uPlot.orient as jest.Mock).mockReset();
-	});
-
-	function drawAll(
-		u: uPlot,
-		plugin: ReturnType<typeof createScatterPlugin>,
-	): void {
-		plugin.hooks.drawClear(u);
-		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
-			const columns = (u.data as unknown as number[][][])[seriesIdx];
-			plugin.pathBuilder(u, seriesIdx, 0, columns[0].length - 1);
-		}
-	}
-
-	/** Runs the cursor scan the way uPlot does: every data series, in order. */
-	function scan(
-		u: uPlot,
-		plugin: ReturnType<typeof createScatterPlugin>,
-	): Array<number | null> {
-		const dataIdx = plugin.cursor.dataIdx as NonNullable<uPlot.Cursor['dataIdx']>;
-		const indexes: Array<number | null> = [null];
-		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
-			indexes.push(dataIdx(u, seriesIdx, 0, 0));
-		}
-		return indexes;
-	}
-
-	it('returns one path that strokes and fills the same discs', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({ series: [{ xs: [10, 20], ys: [10, 20] }] });
-		plugin.hooks.drawClear(u);
-
-		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
-
-		expect(paths.stroke).toBeInstanceOf(FakePath2D);
-		expect(paths.fill).toBe(paths.stroke);
-		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(2);
-	});
-
-	it('resolves the hovered point to its own series and index', () => {
-		const plugin = createScatterPlugin({
-			pointSize: { fixed: 6, min: 4, max: 20 },
-		});
-		const u = createFakePlot({
-			series: [
-				{ xs: [10, 50], ys: [10, 50] },
-				{ xs: [80], ys: [80] },
-			],
-			// Over the second series' only point: x 80, y drawn at 100 − 80.
-			cursor: { left: 80, top: 20 },
-		});
-		drawAll(u, plugin);
-
-		expect(scan(u, plugin)).toStrictEqual([null, null, 0]);
-		expect(plugin.getHit()).toMatchObject({ seriesIndex: 2, dataIndex: 0 });
-	});
-
-	it('returns null for every series when the cursor is off the plot or off any disc', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({
-			series: [{ xs: [10], ys: [10] }],
-			cursor: { left: -1, top: -1 },
-		});
-		drawAll(u, plugin);
-
-		expect(scan(u, plugin)).toStrictEqual([null, null]);
-
-		(u.cursor as { left: number; top: number }).left = 50;
-		(u.cursor as { left: number; top: number }).top = 50;
-		expect(scan(u, plugin)).toStrictEqual([null, null]);
-	});
-
-	it('skips points outside the visible scale range', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({
-			series: [{ xs: [10, 500], ys: [10, 10] }],
-			cursor: { left: 10, top: 90 },
-		});
-		drawAll(u, plugin);
-
-		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
-		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(1);
-		expect(scan(u, plugin)).toStrictEqual([null, 0]);
-	});
-
-	it('rings the hit disc, in CSS pixels, with a gap around it', () => {
-		const plugin = createScatterPlugin({
-			pointSize: { fixed: 8, min: 4, max: 20 },
-		});
-		const u = createFakePlot({
-			series: [{ xs: [10], ys: [10] }],
-			cursor: { left: 10, top: 90 },
-		});
-		drawAll(u, plugin);
-		scan(u, plugin);
-
-		const bbox = plugin.cursor.points?.bbox;
-		// The 8px disc spans 6..14; the ring sits 3px out and is 2px wide.
-		expect(bbox?.(u, 1)).toStrictEqual({
-			left: 1,
-			top: 81,
-			width: 18,
-			height: 18,
-		});
-		expect(bbox?.(u, 2)).toMatchObject({ width: 0, height: 0 });
-	});
-
-	it('snaps the ring to whole pixels without moving its centre', () => {
-		const plugin = createScatterPlugin({
-			pointSize: { fixed: 7, min: 4, max: 20 },
-		});
-		const u = createFakePlot({
-			series: [{ xs: [10], ys: [10] }],
-			cursor: { left: 10, top: 90 },
-		});
-		drawAll(u, plugin);
-		scan(u, plugin);
-
-		// The 7px disc starts at 6.5, so the ring's edge would land on 1.5.
-		const ring = plugin.cursor.points?.bbox?.(u, 1);
-		expect(ring).toMatchObject({ left: 1, width: 18 });
-		expect((ring?.left ?? 0) + (ring?.width ?? 0) / 2).toBe(10);
-	});
-
-	it('draws the hover marker as an outline in the series colour', () => {
-		const plugin = createScatterPlugin();
-		const u = {
-			series: [{}, { stroke: (): string => '#E5484D' }, { stroke: '#30A46C' }],
-		} as unknown as uPlot;
-		const points = plugin.cursor.points as {
-			fill: (u: uPlot, seriesIdx: number) => string;
-			stroke: (u: uPlot, seriesIdx: number) => string;
-			width: (u: uPlot, seriesIdx: number, size: number) => number;
-		};
-
-		expect(points.fill(u, 1)).toBe('transparent');
-		expect(points.stroke(u, 1)).toBe('#E5484D');
-		expect(points.stroke(u, 2)).toBe('#30A46C');
-		expect(points.width(u, 1, 0)).toBe(2);
-	});
-
-	it('drawClear drops cached paths on data series only', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({ series: [{ xs: [1], ys: [1] }] });
-		const [xSeries, dataSeries] = u.series as Array<{ _paths?: unknown }>;
-		xSeries._paths = 'x';
-		dataSeries._paths = 'cached';
-
-		plugin.hooks.drawClear(u);
-
-		expect(xSeries._paths).toBe('x');
-		expect(dataSeries._paths).toBeNull();
-	});
-
-	it('focus distance is zero, so the hit series wins focus', () => {
-		const plugin = createScatterPlugin();
-		expect(plugin.cursor.focus?.dist?.({} as uPlot, 1, 0, 0, 0)).toBe(0);
-	});
-});
-
-describe('applyScatterPlugin', () => {
-	it('switches the builder to faceted mode and disables drag selection', () => {
-		const builder = new UPlotConfigBuilder({ id: 'scatter' });
-		const plugin = createScatterPlugin();
-
-		applyScatterPlugin(builder, plugin);
-		const config = builder.getConfig();
-
-		expect(builder.getMode()).toBe(PlotMode.Faceted);
-		expect(config.mode).toBe(2);
-		expect(config.cursor?.drag).toMatchObject({
-			x: false,
-			y: false,
-			setScale: false,
-		});
-		expect(config.hooks?.drawClear).toHaveLength(1);
-		expect(config.hooks?.destroy).toHaveLength(1);
-	});
-
-	it('facets read x and y against the shared scales', () => {
-		expect(SCATTER_FACETS).toStrictEqual([
-			{ scale: 'x', auto: true },
-			{ scale: 'y', auto: true },
-		]);
-	});
-});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/geometry.ts

@@ -1,96 +0,0 @@
-import type uPlot from 'uplot';
-
-import type { Quadtree } from '../../utils/quadtree';
-import type { ScatterHit, ScatterPointSize, ScatterSeriesData } from './types';
-
-export interface SizeDomain {
-	min: number;
-	max: number;
-}
-
-/**
- * Extent of the size column across every series, so equal values draw equal
- * discs whichever group they belong to. `null` when nothing carries a size.
- */
-export function resolveSizeDomain(data: uPlot.AlignedData): SizeDomain | null {
-	let min = Infinity;
-	let max = -Infinity;
-	for (let seriesIndex = 1; seriesIndex < data.length; seriesIndex++) {
-		const sizes = (data[seriesIndex] as unknown as ScatterSeriesData)[2];
-		if (!sizes) {
-			continue;
-		}
-		for (const size of sizes) {
-			if (size == null || !Number.isFinite(size)) {
-				continue;
-			}
-			min = Math.min(min, size);
-			max = Math.max(max, size);
-		}
-	}
-	return min <= max ? { min, max } : null;
-}
-
-/**
- * Disc diameter for a size value. Area, not diameter, follows the value: a
- * point worth twice as much should look twice as big.
- */
-export function resolvePointDiameter(
-	size: number | null | undefined,
-	domain: SizeDomain | null,
-	pointSize: ScatterPointSize,
-): number {
-	if (size == null || domain == null || !Number.isFinite(size)) {
-		return pointSize.fixed;
-	}
-	if (domain.max === domain.min) {
-		return (pointSize.min + pointSize.max) / 2;
-	}
-	const t = Math.min(
-		1,
-		Math.max(0, (size - domain.min) / (domain.max - domain.min)),
-	);
-	const minArea = pointSize.min ** 2;
-	const maxArea = pointSize.max ** 2;
-	return Math.sqrt(minArea + (maxArea - minArea) * t);
-}
-
-/**
- * Nearest disc under the cursor, or `null`. Overlapping discs resolve to the one
- * whose centre is closest; `tolerance` widens every disc so thin points stay
- * hoverable.
- */
-export function resolveHit(
-	tree: Quadtree<ScatterHit>,
-	cx: number,
-	cy: number,
-	tolerance: number,
-): ScatterHit | null {
-	let best: ScatterHit | null = null;
-	let bestDistance = Infinity;
-
-	tree.get(
-		cx - tolerance,
-		cy - tolerance,
-		tolerance * 2,
-		tolerance * 2,
-		(hit) => {
-			const left = hit.x - tolerance;
-			const top = hit.y - tolerance;
-			const right = hit.x + hit.w + tolerance;
-			const bottom = hit.y + hit.h + tolerance;
-			if (cx < left || cx > right || cy < top || cy > bottom) {
-				return;
-			}
-			const dx = cx - (hit.x + hit.w / 2);
-			const dy = cy - (hit.y + hit.h / 2);
-			const distance = dx * dx + dy * dy;
-			if (distance < bestDistance) {
-				best = hit;
-				bestDistance = distance;
-			}
-		},
-	);
-
-	return best;
-}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin.ts

@@ -1,234 +0,0 @@
-import uPlot, { Series } from 'uplot';
-
-import { DEFAULT_FOCUS_PROXIMITY_VALUE } from '../../constants';
-import { PlotMode } from '../../config/types';
-import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
-import { Quadtree } from '../../utils/quadtree';
-import {
-	resolveHit,
-	resolvePointDiameter,
-	resolveSizeDomain,
-	SizeDomain,
-} from './geometry';
-import {
-	DEFAULT_HOVER_TOLERANCE_PX,
-	DEFAULT_SCATTER_POINT_SIZE,
-	ScatterHit,
-	ScatterPluginOptions,
-	ScatterSeriesData,
-} from './types';
-
-/** Every scatter series reads its own x and y columns against the shared scales. */
-export const SCATTER_FACETS: Series.Facet[] = [
-	{ scale: 'x', auto: true },
-	{ scale: 'y', auto: true },
-];
-
-const HIDDEN_BBOX: uPlot.BBox = { left: -10, top: -10, width: 0, height: 0 };
-
-const TWO_PI = 2 * Math.PI;
-
-/** CSS pixels between a hovered disc and the outline ring drawn around it. */
-const HOVER_RING_GAP_PX = 3;
-const HOVER_RING_WIDTH_PX = 2;
-
-/**
- * uPlot `ceil`s a cursor point's left/top but not its size, which pulls a ring
- * up to 1px right and down of the disc. Snapping the edge to a whole pixel and
- * growing the span by twice the snap keeps the centre exact.
- */
-function snapToPixel(start: number, length: number): [number, number] {
-	const snapped = Math.floor(start);
-	return [snapped, length + (start - snapped) * 2];
-}
-
-export function getSeriesStroke(u: uPlot, seriesIdx: number): string {
-	const { stroke } = u.series[seriesIdx];
-	const color = typeof stroke === 'function' ? stroke(u, seriesIdx) : stroke;
-	return typeof color === 'string' ? color : '';
-}
-
-/** uPlot caches built paths on the series; the field is internal to it. */
-type SeriesWithPaths = Series & { _paths?: Series.Paths | null };
-
-export interface ScatterPlugin {
-	/** Draws every point of a series as one path and indexes the discs for hover. */
-	pathBuilder: Series.PathBuilder;
-	/** Hover by disc rather than by nearest x: mode 2 has no shared x to scan. */
-	cursor: uPlot.Cursor;
-	hooks: {
-		drawClear: (u: uPlot) => void;
-		destroy: (u: uPlot) => void;
-	};
-	getHit: () => ScatterHit | null;
-}
-
-export function createScatterPlugin({
-	pointSize = DEFAULT_SCATTER_POINT_SIZE,
-	hoverTolerance = DEFAULT_HOVER_TOLERANCE_PX,
-}: ScatterPluginOptions = {}): ScatterPlugin {
-	let tree: Quadtree<ScatterHit> | null = null;
-	let hit: ScatterHit | null = null;
-
-	// The domain spans every series, so it is resolved once per dataset rather than
-	// once per series path.
-	let cachedData: uPlot.AlignedData | null = null;
-	let cachedDomain: SizeDomain | null = null;
-
-	function getSizeDomain(u: uPlot): SizeDomain | null {
-		if (cachedData !== u.data) {
-			cachedDomain = resolveSizeDomain(u.data);
-			cachedData = u.data;
-		}
-		return cachedDomain;
-	}
-
-	const pathBuilder: Series.PathBuilder = (u, seriesIdx, idx0, idx1) => {
-		const path = new Path2D();
-		const sizes = (u.data[seriesIdx] as unknown as ScatterSeriesData)[2];
-		const domain = getSizeDomain(u);
-		const { pxRatio } = uPlot;
-
-		uPlot.orient(
-			u,
-			seriesIdx,
-			(
-				_series,
-				dataX,
-				dataY,
-				scaleX,
-				scaleY,
-				valToPosX,
-				valToPosY,
-				xOff,
-				yOff,
-				xDim,
-				yDim,
-				_moveTo,
-				_lineTo,
-				_rect,
-				arc,
-			) => {
-				const xMin = scaleX.min ?? -Infinity;
-				const xMax = scaleX.max ?? Infinity;
-				const yMin = scaleY.min ?? -Infinity;
-				const yMax = scaleY.max ?? Infinity;
-
-				for (let i = idx0; i <= idx1; i++) {
-					const x = dataX[i];
-					const y = dataY[i];
-					if (
-						x == null ||
-						y == null ||
-						x < xMin ||
-						x > xMax ||
-						y < yMin ||
-						y > yMax
-					) {
-						continue;
-					}
-
-					const diameter =
-						resolvePointDiameter(sizes?.[i], domain, pointSize) * pxRatio;
-					const radius = diameter / 2;
-					const cx = valToPosX(x, scaleX, xDim, xOff);
-					const cy = valToPosY(y, scaleY, yDim, yOff);
-
-					path.moveTo(cx + radius, cy);
-					arc(path, cx, cy, radius, 0, TWO_PI);
-
-					tree?.add({
-						x: cx - radius - u.bbox.left,
-						y: cy - radius - u.bbox.top,
-						w: diameter,
-						h: diameter,
-						seriesIndex: seriesIdx,
-						dataIndex: i,
-					});
-				}
-			},
-		);
-
-		return { stroke: path, fill: path, clip: null };
-	};
-
-	const cursor: uPlot.Cursor = {
-		// Selection would set the dashboard time range; neither axis is time here.
-		drag: { x: false, y: false, setScale: false },
-		dataIdx: (u, seriesIdx): number | null => {
-			// uPlot asks series 1..n in order on every cursor move; resolve once.
-			if (seriesIdx === 1) {
-				const { left = -1, top = -1 } = u.cursor;
-				const { pxRatio } = uPlot;
-				hit =
-					tree && left >= 0 && top >= 0
-						? resolveHit(
-								tree,
-								left * pxRatio,
-								top * pxRatio,
-								hoverTolerance * pxRatio,
-							)
-						: null;
-			}
-			return hit?.seriesIndex === seriesIdx ? hit.dataIndex : null;
-		},
-		points: {
-			bbox: (_u, seriesIdx): uPlot.BBox => {
-				if (hit?.seriesIndex !== seriesIdx) {
-					return HIDDEN_BBOX;
-				}
-				const { pxRatio } = uPlot;
-				const inset = HOVER_RING_GAP_PX + HOVER_RING_WIDTH_PX;
-				const [left, width] = snapToPixel(
-					hit.x / pxRatio - inset,
-					hit.w / pxRatio + inset * 2,
-				);
-				const [top, height] = snapToPixel(
-					hit.y / pxRatio - inset,
-					hit.h / pxRatio + inset * 2,
-				);
-				return { left, top, width, height };
-			},
-			// An outline around the disc, so the point itself stays readable.
-			fill: (): string => 'transparent',
-			stroke: getSeriesStroke,
-			width: (): number => HOVER_RING_WIDTH_PX,
-		},
-		// uPlot only measures series that returned a data index, i.e. the hit one.
-		focus: { prox: DEFAULT_FOCUS_PROXIMITY_VALUE, dist: (): number => 0 },
-	};
-
-	return {
-		pathBuilder,
-		cursor,
-		hooks: {
-			drawClear: (u: uPlot): void => {
-				tree = new Quadtree<ScatterHit>(0, 0, u.bbox.width, u.bbox.height);
-				// The tree only knows what the path builder last drew, so cached paths
-				// must be rebuilt alongside it.
-				u.series.forEach((series, index) => {
-					if (index > 0) {
-						(series as SeriesWithPaths)._paths = null;
-					}
-				});
-			},
-			destroy: (): void => {
-				tree = null;
-				hit = null;
-				cachedData = null;
-				cachedDomain = null;
-			},
-		},
-		getHit: (): ScatterHit | null => hit,
-	};
-}
-
-export function applyScatterPlugin(
-	builder: UPlotConfigBuilder,
-	plugin: ScatterPlugin,
-): void {
-	builder.setMode(PlotMode.Faceted);
-	builder.setCursor(plugin.cursor);
-	builder.addHook('drawClear', plugin.hooks.drawClear);
-	builder.addHook('destroy', plugin.hooks.destroy);
-}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/types.ts

@@ -1,58 +0,0 @@
-import type { QuadtreeRect } from '../../utils/quadtree';
-
-/** Diameters in CSS pixels. `min`/`max` bound the area scale when a size column is mapped. */
-export interface ScatterPointSize {
-	fixed: number;
-	min: number;
-	max: number;
-}
-
-export const DEFAULT_SCATTER_POINT_SIZE: ScatterPointSize = {
-	fixed: 6,
-	min: 4,
-	max: 24,
-};
-
-/** CSS pixels around a point's disc that still register as a hover. */
-export const DEFAULT_HOVER_TOLERANCE_PX = 3;
-
-export interface ScatterPluginOptions {
-	pointSize?: ScatterPointSize;
-	hoverTolerance?: number;
-}
-
-/**
- * One faceted series: parallel columns, one point per index. Sizes are in the
- * caller's units and mapped to `pointSize` at draw time; `null` draws at `fixed`.
- */
-export type ScatterSeriesData = [
-	xs: number[],
-	ys: number[],
-	sizes?: Array<number | null>,
-];
-
-/** Mode-2 data: series 0 is uPlot's x placeholder and carries nothing. */
-export type ScatterChartData = [null, ...ScatterSeriesData[]];
-
-/** A drawn point's disc, in canvas pixels relative to the plot area. */
-export interface ScatterHit extends QuadtreeRect {
-	seriesIndex: number;
-	dataIndex: number;
-}
-
-export interface ScatterChannel {
-	label: string;
-	unit?: string;
-}
-
-/** What each visual channel plots, for the tooltip and axes. */
-export interface ScatterChannels {
-	x: ScatterChannel;
-	y: ScatterChannel;
-	size?: ScatterChannel;
-}
-
-export interface ScatterPointLabel {
-	key: string;
-	value: string;
-}

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/__tests__/buildClickData.test.ts

@@ -1,52 +0,0 @@
-import type uPlot from 'uplot';
-
-import { buildClickData } from '../utils';
-
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	getFocusedSeriesAtPosition: jest.fn(() => ({ seriesIndex: 1 })),
-}));
-
-const event = {
-	offsetX: 10,
-	offsetY: 20,
-	clientX: 110,
-	clientY: 220,
-} as MouseEvent;
-
-describe('buildClickData', () => {
-	it('skips the x-index lookups on a faceted plot, which has no shared x series', () => {
-		const posToIdx = jest.fn(() => {
-			throw new Error('faceted data[0] is null');
-		});
-		const plot = {
-			data: [null],
-			posToVal: (pos: number): number => pos * 2,
-			posToIdx,
-		} as unknown as uPlot;
-
-		expect(buildClickData(event, plot)).toStrictEqual({
-			xValue: 20,
-			yValue: 40,
-			focusedSeries: null,
-			clickedDataTimestamp: 20,
-			mouseX: 10,
-			mouseY: 20,
-			absoluteMouseX: 110,
-			absoluteMouseY: 220,
-		});
-		expect(posToIdx).not.toHaveBeenCalled();
-	});
-
-	it('resolves the focused series and clicked timestamp on an aligned plot', () => {
-		const plot = {
-			data: [[100, 200, 300]],
-			posToVal: (pos: number): number => pos,
-			posToIdx: (): number => 1,
-		} as unknown as uPlot;
-
-		expect(buildClickData(event, plot)).toMatchObject({
-			focusedSeries: { seriesIndex: 1 },
-			clickedDataTimestamp: 200,
-		});
-	});
-});

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -174,25 +174,6 @@ export function createLayoutObserver(
 export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
-	const pointer = {
-		mouseX: event.offsetX,
-		mouseY: event.offsetY,
-		absoluteMouseX: event.clientX,
-		absoluteMouseY: event.clientY,
-	};
-
-	// A faceted plot (scatter) has no shared x series, so `data[0]` is null and
-	// `posToIdx` would throw; the hit is the plot's own to resolve.
-	if (plot.data[0] == null) {
-		return {
-			xValue,
-			yValue,
-			focusedSeries: null,
-			clickedDataTimestamp: xValue,
-			...pointer,
-		};
-	}
-
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
 
 	const dataIndex = plot.posToIdx(event.offsetX);
@@ -212,6 +193,9 @@ export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 		yValue,
 		focusedSeries,
 		clickedDataTimestamp,
-		...pointer,
+		mouseX: event.offsetX,
+		mouseY: event.offsetY,
+		absoluteMouseX: event.clientX,
+		absoluteMouseY: event.clientY,
 	};
 }

frontend/src/lib/uPlotV2/utils/__tests__/logGridSplits.test.ts

@@ -1,59 +0,0 @@
-import type uPlot from 'uplot';
-
-import { logScaleSplits, spacedLogLabels } from '../logGridSplits';
-
-describe('logScaleSplits', () => {
-	const splitsFor = (min: number, max: number): number[] =>
-		(
-			logScaleSplits as (
-				u: uPlot,
-				axisIdx: number,
-				min: number,
-				max: number,
-			) => number[]
-		)({} as uPlot, 0, min, max);
-
-	it('splits at 1, 2 and 5 × 10ⁿ inside an unsnapped range', () => {
-		expect(splitsFor(10.6, 990)).toStrictEqual([20, 50, 100, 200, 500]);
-	});
-
-	it('includes the ends when they fall on a split', () => {
-		expect(splitsFor(0.1, 10)).toStrictEqual([0.1, 0.2, 0.5, 1, 2, 5, 10]);
-	});
-
-	it('is empty for a range a log scale cannot hold', () => {
-		expect(splitsFor(0, 10)).toStrictEqual([]);
-		expect(splitsFor(5, 5)).toStrictEqual([]);
-	});
-});
-
-describe('spacedLogLabels', () => {
-	// 100px per decade.
-	const plot = {
-		axes: [{ scale: 'x' }],
-		valToPos: (value: number): number => Math.log10(value) * 100,
-	} as unknown as uPlot;
-	const label = (splits: number[], space: number): (number | null)[] =>
-		spacedLogLabels(plot, splits, 0, space, 0) as (number | null)[];
-
-	it('always labels the powers of ten', () => {
-		expect(label([10, 20, 50, 100], 200)).toStrictEqual([10, null, null, 100]);
-	});
-
-	it('adds a 2 or 5 that clears the labels already kept', () => {
-		// 20 is 30px from 10; 50 is 70px from 10 and 30px from 100.
-		expect(label([10, 20, 50, 100], 25)).toStrictEqual([10, 20, 50, 100]);
-		expect(label([10, 20, 50, 100], 40)).toStrictEqual([10, null, null, 100]);
-	});
-
-	it('labels both ends of a range spanning under a decade', () => {
-		// 100 sits at 200px; 20 (130px) and 500 (270px) clear it, 50 and 200 do not.
-		expect(label([20, 50, 100, 200, 500], 60)).toStrictEqual([
-			20,
-			null,
-			100,
-			null,
-			500,
-		]);
-	});
-});

frontend/src/lib/uPlotV2/utils/__tests__/quadtree.test.ts

@@ -1,70 +0,0 @@
-import { Quadtree, QuadtreeRect } from '../quadtree';
-
-interface Item extends QuadtreeRect {
-	id: number;
-}
-
-function collect(
-	tree: Quadtree<Item>,
-	x: number,
-	y: number,
-	w: number,
-	h: number,
-): Set<number> {
-	const ids = new Set<number>();
-	tree.get(x, y, w, h, (item) => ids.add(item.id));
-	return ids;
-}
-
-describe('Quadtree', () => {
-	it('returns items in the queried region and not those far from it', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
-		tree.add({ id: 2, x: 80, y: 80, w: 5, h: 5 });
-
-		// Below the split threshold every item is visited; callers refine the hit.
-		expect(collect(tree, 9, 9, 8, 8)).toStrictEqual(new Set([1, 2]));
-	});
-
-	it('splits past the object limit and still finds every item', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		const total = 50;
-		for (let id = 0; id < total; id++) {
-			tree.add({ id, x: (id % 10) * 10, y: Math.floor(id / 10) * 10, w: 4, h: 4 });
-		}
-
-		expect(collect(tree, 0, 0, 100, 100).size).toBe(total);
-	});
-
-	it('after a split, a query in one quadrant skips items confined to another', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		for (let id = 0; id < 20; id++) {
-			// All in the north-west quadrant.
-			tree.add({ id, x: 1 + id, y: 1, w: 2, h: 2 });
-		}
-		tree.add({ id: 99, x: 90, y: 90, w: 2, h: 2 });
-
-		const northWest = collect(tree, 0, 0, 10, 10);
-		expect(northWest.has(99)).toBe(false);
-		expect(collect(tree, 85, 85, 10, 10).has(99)).toBe(true);
-	});
-
-	it('reports an item straddling the midline from either side', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		for (let id = 0; id < 20; id++) {
-			tree.add({ id, x: 1, y: 1 + id, w: 2, h: 2 });
-		}
-		tree.add({ id: 99, x: 48, y: 48, w: 4, h: 4 });
-
-		expect(collect(tree, 40, 40, 5, 5).has(99)).toBe(true);
-		expect(collect(tree, 55, 55, 5, 5).has(99)).toBe(true);
-	});
-
-	it('clear empties the tree', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
-		tree.clear();
-
-		expect(collect(tree, 0, 0, 100, 100).size).toBe(0);
-	});
-});

frontend/src/lib/uPlotV2/utils/__tests__/scale.test.ts

@@ -195,40 +195,3 @@ describe('scale utils', () => {
 		});
 	});
 });
-
-describe('symmetric log scale', () => {
-	it('maps to uPlot arcsinh with the given linear threshold', () => {
-		expect(
-			scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.SymmetricLog,
-				asinhThreshold: 0.01,
-			}),
-		).toStrictEqual({ distr: 4, log: 10, asinh: 0.01 });
-
-		expect(
-			scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.SymmetricLog,
-			}).asinh,
-		).toBe(scaleUtils.DEFAULT_ASINH_THRESHOLD);
-	});
-
-	it('ranges a distr 4 scale through uPlot.rangeAsinh', () => {
-		const rangeAsinh = jest.fn(() => [-10, 1000] as uPlot.Range.MinMax);
-		Object.assign(uPlot, { rangeAsinh });
-
-		const rangeFn = scaleUtils.createRangeFunction({
-			rangeConfig: {} as uPlot.Range.Config,
-			hardMinOnly: false,
-			hardMaxOnly: false,
-			hasFixedRange: false,
-			min: null,
-			max: null,
-		});
-		const u = { scales: { y: { distr: 4, log: 10 } } } as unknown as uPlot;
-
-		expect(rangeFn(u, -3, 700, 'y')).toStrictEqual([-10, 1000]);
-		expect(rangeAsinh).toHaveBeenCalledWith(-3, 700, 10, true);
-	});
-});

frontend/src/lib/uPlotV2/utils/logGridSplits.ts

@@ -1,69 +0,0 @@
-import type uPlot from 'uplot';
-
-const DECADE_TOLERANCE = 1e-9;
-
-function isDecade(value: number): boolean {
-	if (value === 0) {
-		return true;
-	}
-	const exponent = Math.log10(Math.abs(value));
-	return Math.abs(exponent - Math.round(exponent)) < DECADE_TOLERANCE;
-}
-
-const LOG_SPLIT_MULTIPLES = [1, 2, 5];
-
-/**
- * Splits at 1, 2 and 5 × 10ⁿ inside the scale. uPlot's own log splits step
- * from the scale's minimum, so a range not snapped to a power of ten would
- * label 10.79, 21.58, … instead.
- */
-export const logScaleSplits: uPlot.Axis.Splits = (_u, _axisIdx, min, max) => {
-	if (!(min > 0) || !(max > min)) {
-		return [];
-	}
-	const splits: number[] = [];
-	for (
-		let exponent = Math.floor(Math.log10(min));
-		exponent <= Math.ceil(Math.log10(max));
-		exponent++
-	) {
-		LOG_SPLIT_MULTIPLES.forEach((multiple) => {
-			// Rounded through toPrecision so 0.1 × 3 noise can't fall outside [min, max].
-			const split = Number((multiple * 10 ** exponent).toPrecision(12));
-			if (split >= min && split <= max) {
-				splits.push(split);
-			}
-		});
-	}
-	return splits;
-};
-
-/**
- * Labels for `logScaleSplits`: every power of ten, then any 2 or 5 that sits
- * at least `space` px from the labels already kept, so a range spanning under
- * one decade still reads at both ends.
- */
-export const spacedLogLabels: uPlot.Axis.Filter = (
-	u,
-	splits,
-	axisIdx,
-	space,
-) => {
-	const scaleKey = u.axes[axisIdx]?.scale ?? 'x';
-	const positions = splits.map((split) =>
-		split == null ? null : u.valToPos(split, scaleKey),
-	);
-	const kept = splits.map((split) => split != null && isDecade(split));
-	const isClear = (index: number): boolean =>
-		kept.every(
-			(isKept, other) =>
-				!isKept ||
-				Math.abs((positions[other] ?? 0) - (positions[index] ?? 0)) >= space,
-		);
-	splits.forEach((split, index) => {
-		if (split != null && !kept[index] && isClear(index)) {
-			kept[index] = true;
-		}
-	});
-	return splits.map((split, index) => (kept[index] ? split : null));
-};

frontend/src/lib/uPlotV2/utils/quadtree.ts

@@ -1,110 +0,0 @@
-export interface QuadtreeRect {
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-}
-
-const MAX_OBJECTS = 10;
-const MAX_LEVELS = 4;
-
-/**
- * Spatial index over axis-aligned rectangles, for answering "what is under the
- * cursor" on charts whose marks have no shared x order to binary-search. An item
- * straddling a quadrant boundary lives in every quadrant it touches, so `get` can
- * report it more than once.
- */
-export class Quadtree<T extends QuadtreeRect = QuadtreeRect> {
-	private items: T[] = [];
-	private quadrants: Quadtree<T>[] | null = null;
-
-	constructor(
-		private readonly x: number,
-		private readonly y: number,
-		private readonly w: number,
-		private readonly h: number,
-		private readonly level = 0,
-	) {}
-
-	add(item: T): void {
-		if (this.quadrants) {
-			this.forEachQuadrant(item, (quadrant) => quadrant.add(item));
-			return;
-		}
-
-		this.items.push(item);
-
-		if (this.items.length > MAX_OBJECTS && this.level < MAX_LEVELS) {
-			this.split();
-			const items = this.items;
-			this.items = [];
-			for (const existing of items) {
-				this.forEachQuadrant(existing, (quadrant) => quadrant.add(existing));
-			}
-		}
-	}
-
-	/** Visits every item whose quadrant overlaps the rectangle; callers refine the test. */
-	get(
-		x: number,
-		y: number,
-		w: number,
-		h: number,
-		visit: (item: T) => void,
-	): void {
-		for (const item of this.items) {
-			visit(item);
-		}
-		if (this.quadrants) {
-			this.forEachQuadrant({ x, y, w, h }, (quadrant) =>
-				quadrant.get(x, y, w, h, visit),
-			);
-		}
-	}
-
-	clear(): void {
-		this.items = [];
-		this.quadrants = null;
-	}
-
-	private split(): void {
-		const w = this.w / 2;
-		const h = this.h / 2;
-		const level = this.level + 1;
-		// North-east, north-west, south-west, south-east.
-		this.quadrants = [
-			new Quadtree<T>(this.x + w, this.y, w, h, level),
-			new Quadtree<T>(this.x, this.y, w, h, level),
-			new Quadtree<T>(this.x, this.y + h, w, h, level),
-			new Quadtree<T>(this.x + w, this.y + h, w, h, level),
-		];
-	}
-
-	private forEachQuadrant(
-		rect: QuadtreeRect,
-		visit: (quadrant: Quadtree<T>) => void,
-	): void {
-		if (!this.quadrants) {
-			return;
-		}
-		const midX = this.x + this.w / 2;
-		const midY = this.y + this.h / 2;
-		const startsNorth = rect.y < midY;
-		const startsWest = rect.x < midX;
-		const endsEast = rect.x + rect.w > midX;
-		const endsSouth = rect.y + rect.h > midY;
-
-		if (startsNorth && endsEast) {
-			visit(this.quadrants[0]);
-		}
-		if (startsWest && startsNorth) {
-			visit(this.quadrants[1]);
-		}
-		if (startsWest && endsSouth) {
-			visit(this.quadrants[2]);
-		}
-		if (endsEast && endsSouth) {
-			visit(this.quadrants[3]);
-		}
-	}
-}

frontend/src/lib/uPlotV2/utils/scale.ts

@@ -58,23 +58,18 @@ function normalizeLogLimit(
 	return logBase ** exp;
 }
 
-export const DEFAULT_ASINH_THRESHOLD = 1;
-
 /**
- * Returns uPlot scale distribution options for a value axis.
- * Time scales get no distr/log; value scales get distr 1 (linear), 3 (log) or
- * 4 (arcsinh, uPlot's symmetric log) and log base 2 or 10.
+ * Returns uPlot scale distribution options for the Y axis.
+ * Time (X) scale gets no distr/log; Y scale gets distr 1 (linear) or 3 (log) and log base 2 or 10.
  */
 export function getDistributionConfig({
 	time,
 	distr,
 	logBase,
-	asinhThreshold,
 }: {
 	time: ScaleProps['time'];
 	distr?: DistributionType;
 	logBase?: number;
-	asinhThreshold?: number;
 }): Partial<Scale> {
 	if (time) {
 		return {};
@@ -82,14 +77,6 @@ export function getDistributionConfig({
 
 	const resolvedLogBase = (logBase ?? 10) === 2 ? 2 : 10;
 
-	if (distr === DistributionType.SymmetricLog) {
-		return {
-			distr: 4,
-			log: resolvedLogBase,
-			asinh: asinhThreshold ?? DEFAULT_ASINH_THRESHOLD,
-		};
-	}
-
 	return {
 		distr: distr === DistributionType.Logarithmic ? 3 : 1,
 		log: resolvedLogBase,
@@ -210,33 +197,6 @@ function getLogScaleRange(
 	);
 }
 
-/**
- * Computes the arcsinh-scale range using uPlot.rangeAsinh, which pads to whole
- * magnitudes on either side of zero and pins an edge that sits exactly on zero.
- */
-function getAsinhScaleRange(
-	minMax: Range.MinMax,
-	params: RangeFunctionParams,
-	dataMin: number | null,
-	dataMax: number | null,
-	logBase?: uPlot.Scale['log'],
-): Range.MinMax {
-	const { min, max } = params;
-	const resolvedMin = min ?? dataMin;
-	const resolvedMax = max ?? dataMax;
-
-	if (resolvedMin == null || resolvedMax == null) {
-		return minMax;
-	}
-
-	return uPlot.rangeAsinh(
-		resolvedMin,
-		resolvedMax,
-		(logBase ?? 10) as 2 | 10,
-		true,
-	);
-}
-
 /**
  * Snaps log-scale [min, max] to exact powers of logBase (nearest magnitude below/above).
  * If min and max would be equal after snapping, max is increased by one magnitude so the range is valid.
@@ -339,8 +299,6 @@ export function createRangeFunction(
 			minMax = getLogScaleRange(minMax, params, dataMin, dataMax, logBase);
 			const logFn = scale.log === 2 ? Math.log2 : Math.log10;
 			minMax = adjustLogRange(minMax, (logBase ?? 10) as number, logFn);
-		} else if (scale.distr === 4) {
-			minMax = getAsinhScaleRange(minMax, params, dataMin, dataMax, logBase);
 		}
 
 		minMax = applyHardLimits(minMax, params, scale.distr ?? 1);

frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -37,7 +37,6 @@ export default function ChartWrapper({
 	syncKey,
 	syncFilterMode,
 	onDestroy = noop,
-	plotRef,
 	children,
 	layoutChildren,
 	yAxisUnit,
@@ -64,20 +63,20 @@ export default function ChartWrapper({
 	);
 
 	const legendComponent = useCallback(
-		(layout: LegendLayout): React.ReactNode => {
+		({ averageLegendWidth, showSearch }: LegendLayout): React.ReactNode => {
 			if (!showLegend) {
 				return null;
 			}
 			// A pie's slices and a heatmap's groups are not uPlot series.
 			if (customLegend) {
-				return customLegend(layout);
+				return customLegend(averageLegendWidth);
 			}
 			return (
 				<UPlotLegend
 					config={config}
 					position={legendConfig.position}
-					averageLegendWidth={layout.averageLegendWidth}
-					showSearch={layout.showSearch}
+					averageLegendWidth={averageLegendWidth}
+					showSearch={showSearch}
 				/>
 			);
 		},
@@ -124,7 +123,6 @@ export default function ChartWrapper({
 						height={chartHeight}
 						plotRef={(plot): void => {
 							plotInstanceRef.current = plot;
-							plotRef?.(plot);
 						}}
 						onDestroy={(plot: uPlot): void => {
 							plotInstanceRef.current = null;

frontend/src/lib/visualization/charts/ChartWrapper/__tests__/ChartWrapper.test.tsx

@@ -1,45 +0,0 @@
-import { render } from 'tests/test-utils';
-import type uPlot from 'uplot';
-
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-
-import ChartWrapper from '../ChartWrapper';
-
-const FAKE_PLOT = { id: 'plot' } as unknown as uPlot;
-
-jest.mock('lib/uPlotV2/components/UPlotChart/UPlotChart', () => ({
-	__esModule: true,
-	default: ({ plotRef }: { plotRef?: (plot: uPlot | null) => void }): null => {
-		plotRef?.(FAKE_PLOT);
-		return null;
-	},
-}));
-
-window.ResizeObserver =
-	window.ResizeObserver ||
-	jest.fn().mockImplementation(() => ({
-		disconnect: jest.fn(),
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-	}));
-
-describe('ChartWrapper', () => {
-	it('hands the plot instance to the caller', () => {
-		const plotRef = jest.fn();
-		render(
-			<ChartWrapper
-				config={new UPlotConfigBuilder({ id: 'chart' })}
-				data={[[1], [2]]}
-				width={400}
-				height={300}
-				legendConfig={{ position: LegendPosition.BOTTOM }}
-				showLegend={false}
-				showTooltip={false}
-				plotRef={plotRef}
-			/>,
-		);
-
-		expect(plotRef).toHaveBeenCalledWith(FAKE_PLOT);
-	});
-});

frontend/src/lib/visualization/charts/Heatmap/Heatmap.tsx

@@ -26,7 +26,6 @@ import {
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 import { HeatmapChartProps } from 'lib/visualization/charts/types';
-import type { LegendLayout } from 'lib/visualization/layout/ChartLayout/ChartLayout';
 import { useLegendVisibility } from 'lib/visualization/hooks/useLegendVisibility';
 import {
 	buildHeatmapConfig,
@@ -278,13 +277,11 @@ export default function Heatmap(props: HeatmapChartProps): JSX.Element {
 	}, []);
 
 	const groupLegend = useCallback(
-		({ averageLegendWidth, showSearch }: LegendLayout): React.ReactNode => (
+		(averageLegendWidth: number): React.ReactNode => (
 			<Legend
 				items={legendItems}
 				position={legendPosition}
 				averageLegendWidth={averageLegendWidth}
-				showSearch={showSearch}
-				itemLabel="groups"
 				focusedSeriesIndex={focusedSeriesIndex}
 				onAction={onLegendAction}
 			/>

frontend/src/lib/visualization/charts/Scatter/Scatter.stories.tsx

@@ -1,256 +0,0 @@
-import { useMemo, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import type { Threshold } from 'lib/uPlotV2/hooks/types';
-import type { ScatterPointLabel } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
-
-import Scatter from './Scatter';
-import {
-	buildScatterConfig,
-	prepareScatterChartData,
-	ScatterAxisScale,
-	ScatterSeries,
-} from './utils';
-
-const SERVICES = [
-	'frontend',
-	'cart',
-	'checkout',
-	'payment',
-	'shipping',
-	'currency',
-	'email',
-	'recommendation',
-	'ads',
-	'product-catalog',
-];
-
-type Shape = 'spread' | 'single' | 'sameX';
-
-interface ScatterStoryProps {
-	groups: number;
-	pointsPerGroup: number;
-	/** Adds an error-count size column. */
-	sized: boolean;
-	xScale: ScatterAxisScale;
-	yScale: ScatterAxisScale;
-	/** Zeroes a share of y values, which forces the symmetric log. */
-	withZeros: boolean;
-	shape: Shape;
-	thresholds: boolean;
-	pointSize: number;
-	/** 0–1. */
-	fillOpacity: number;
-	width: number;
-	height: number;
-}
-
-/** Deterministic, so a story renders the same points on every run. */
-function createRng(seed: number): () => number {
-	let state = seed >>> 0;
-	return (): number => {
-		state = (state * 1664525 + 1013904223) >>> 0;
-		return state / 2 ** 32;
-	};
-}
-
-function buildSeries({
-	groups,
-	pointsPerGroup,
-	sized,
-	withZeros,
-	shape,
-}: ScatterStoryProps): ScatterSeries[] {
-	const rng = createRng(42);
-	return Array.from({ length: groups }, (_, groupIndex) => {
-		const label = SERVICES[groupIndex % SERVICES.length];
-		// Each service sits in its own throughput/latency band, so groups are telling
-		// apart rather than one cloud.
-		const baseThroughput = 20 * 2 ** (groupIndex % 5);
-		const baseLatency = 40 + 60 * (groupIndex % 4);
-
-		const count = shape === 'single' ? 1 : pointsPerGroup;
-		const xs: number[] = [];
-		const ys: number[] = [];
-		const sizes: Array<number | null> = [];
-
-		for (let i = 0; i < count; i++) {
-			const throughput =
-				shape === 'sameX' ? baseThroughput : baseThroughput * (0.5 + rng() * 1.5);
-			// Latency grows with load, plus noise; the odd outlier keeps the axis honest.
-			const outlier = rng() < 0.03 ? 4 + rng() * 6 : 1;
-			let latency =
-				baseLatency *
-				(0.8 + (throughput / baseThroughput) * 0.4 + rng() * 0.3) *
-				outlier;
-			if (withZeros && rng() < 0.2) {
-				latency = 0;
-			}
-			xs.push(Number(throughput.toFixed(2)));
-			ys.push(Number(latency.toFixed(2)));
-			sizes.push(rng() < 0.1 ? null : Math.round(rng() * rng() * 500));
-		}
-
-		return sized ? { label, xs, ys, sizes } : { label, xs, ys };
-	});
-}
-
-const THRESHOLDS: Threshold[] = [
-	{
-		thresholdValue: 300,
-		thresholdUnit: 'ms',
-		thresholdColor: '#E5484D',
-		thresholdLabel: 'p99 SLO',
-	},
-];
-
-function ScatterStory(props: ScatterStoryProps): JSX.Element {
-	const {
-		xScale,
-		yScale,
-		sized,
-		thresholds,
-		pointSize,
-		fillOpacity,
-		width,
-		height,
-	} = props;
-	const isDarkMode = useIsDarkMode();
-	const [drawMs, setDrawMs] = useState<number | null>(null);
-
-	const series = useMemo(() => buildSeries(props), [props]);
-	const pointCount = series.reduce((sum, entry) => sum + entry.xs.length, 0);
-	const drawLabel = drawMs === null ? '—' : `${drawMs.toFixed(1)} ms`;
-
-	const config = useMemo(() => {
-		const builder = buildScatterConfig({
-			id: 'scatter-story',
-			series,
-			isDarkMode,
-			x: { unit: 'reqps', scale: xScale },
-			y: { unit: 'ms', scale: yScale },
-			pointSize: { fixed: pointSize, min: 4, max: pointSize * 4 },
-			fillOpacity,
-			thresholds: thresholds ? THRESHOLDS : undefined,
-		});
-		let started = 0;
-		builder.addHook('drawClear', (): void => {
-			started = performance.now();
-		});
-		builder.addHook('draw', (): void => {
-			setDrawMs(performance.now() - started);
-		});
-		return builder;
-	}, [series, isDarkMode, xScale, yScale, pointSize, fillOpacity, thresholds]);
-
-	const data = useMemo(() => prepareScatterChartData(series), [series]);
-
-	const resolvePointLabels = (
-		seriesIndex: number,
-		dataIndex: number,
-	): ScatterPointLabel[] => [
-		{ key: 'service.name', value: series[seriesIndex - 1]?.label ?? '' },
-		{
-			key: 'k8s.pod.name',
-			value: `pod-${dataIndex.toString().padStart(3, '0')}`,
-		},
-	];
-
-	return (
-		<div style={{ width, padding: 16 }}>
-			<Scatter
-				config={config}
-				data={data}
-				width={width}
-				height={height}
-				legendConfig={{ position: LegendPosition.BOTTOM }}
-				channels={{
-					x: { label: 'Throughput', unit: 'reqps' },
-					y: { label: 'p99 latency', unit: 'ms' },
-					...(sized && { size: { label: 'Errors', unit: 'short' } }),
-				}}
-				resolvePointLabels={resolvePointLabels}
-				canPinTooltip
-			/>
-			<p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, opacity: 0.7 }}>
-				{`${pointCount.toLocaleString()} points · last draw ${drawLabel}`}
-			</p>
-		</div>
-	);
-}
-
-const meta = {
-	title: 'Charts/Scatter',
-	component: ScatterStory,
-	parameters: { layout: 'padded' },
-	args: {
-		groups: 1,
-		pointsPerGroup: 10,
-		sized: false,
-		xScale: ScatterAxisScale.Linear,
-		yScale: ScatterAxisScale.Linear,
-		withZeros: false,
-		shape: 'spread',
-		thresholds: false,
-		pointSize: 6,
-		fillOpacity: 0.7,
-		width: 800,
-		height: 420,
-	},
-	argTypes: {
-		shape: { control: 'radio', options: ['spread', 'single', 'sameX'] },
-		xScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
-		yScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
-		fillOpacity: { control: { type: 'range', min: 0, max: 1, step: 0.05 } },
-		pointSize: { control: { type: 'range', min: 2, max: 16, step: 1 } },
-	},
-} satisfies Meta<ScatterStoryProps>;
-
-export default meta;
-
-type Story = StoryObj<ScatterStoryProps>;
-
-/** One service, ten points: axes formatted with units, hover picks the right point. */
-export const Basic: Story = {};
-
-/** Five services, one legend entry each; toggling a row hides its points. */
-export const Grouped: Story = {
-	args: { groups: 5, pointsPerGroup: 40 },
-};
-
-/** Error count as disc area, between the configured min and max diameters. */
-export const Sized: Story = {
-	args: { groups: 5, pointsPerGroup: 40, sized: true, pointSize: 5 },
-};
-
-/** Log x; a fifth of the latencies are 0, so y falls back to the symmetric log. */
-export const LogAxes: Story = {
-	args: {
-		groups: 5,
-		pointsPerGroup: 60,
-		xScale: ScatterAxisScale.Log,
-		yScale: ScatterAxisScale.Log,
-		withZeros: true,
-	},
-};
-
-/** A single point still gets a padded range rather than an empty plot. */
-export const SinglePoint: Story = {
-	args: { shape: 'single' },
-};
-
-/** Fifty points sharing one x collide on nothing: no shared x array to align. */
-export const SameX: Story = {
-	args: { groups: 3, pointsPerGroup: 50, shape: 'sameX' },
-};
-
-/** Horizontal line with label on the y axis; the scale stretches to include it. */
-export const Thresholds: Story = {
-	args: { groups: 3, pointsPerGroup: 40, thresholds: true },
-};
-
-/** Perf harness: raise `pointsPerGroup` and read the draw time under the chart. */
-export const Dense: Story = {
-	args: { groups: 5, pointsPerGroup: 1000, pointSize: 4, fillOpacity: 0.5 },
-};

frontend/src/lib/visualization/charts/Scatter/Scatter.tsx

@@ -1,102 +0,0 @@
-import { useCallback, useRef } from 'react';
-import ChartWrapper from 'lib/visualization/charts/ChartWrapper/ChartWrapper';
-import ScatterTooltip from 'lib/uPlotV2/components/Tooltip/ScatterTooltip';
-import {
-	ScatterTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import uPlot from 'uplot';
-
-import { ScatterChartProps } from 'lib/visualization/charts/types';
-
-import { getSeriesStroke } from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
-
-import { getCursorHit } from './utils';
-
-// Faceted uPlot reads series 1's facets at init, so a chart with no series cannot
-// mount; empty aligned data makes the shell show its no-data state instead.
-const EMPTY_ALIGNED_DATA: uPlot.AlignedData = [[]];
-
-export default function Scatter(props: ScatterChartProps): JSX.Element {
-	const {
-		children,
-		customTooltip,
-		channels,
-		resolvePointLabels,
-		pinnedTooltipElement,
-		onPointClick,
-		plotRef,
-		...rest
-	} = props;
-
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const handlePlotRef = useCallback(
-		(plot: uPlot | null): void => {
-			plotInstanceRef.current = plot;
-			plotRef?.(plot);
-		},
-		[plotRef],
-	);
-
-	// The shared click data finds its series by x position, which a faceted plot
-	// has no single axis for; the hit comes from the cursor instead.
-	const handleClick = useCallback(
-		(click: ChartClickData): void => {
-			const plot = plotInstanceRef.current;
-			const hit = plot ? getCursorHit(plot) : null;
-			if (!plot || !hit || !onPointClick) {
-				return;
-			}
-			onPointClick({
-				...hit,
-				color: getSeriesStroke(plot, hit.seriesIndex),
-				coordinates: { x: click.absoluteMouseX, y: click.absoluteMouseY },
-			});
-		},
-		[onPointClick],
-	);
-
-	const renderTooltip = useCallback(
-		(args: TooltipRenderArgs): React.ReactNode => {
-			if (customTooltip) {
-				return customTooltip(args);
-			}
-			const tooltipProps: ScatterTooltipProps = {
-				...args,
-				id: rest.config.getId(),
-				channels,
-				resolvePointLabels,
-				decimalPrecision: rest.decimalPrecision,
-				canPinTooltip: rest.canPinTooltip,
-				renderTooltipFooter: rest.renderTooltipFooter,
-			};
-			return <ScatterTooltip {...tooltipProps} />;
-		},
-		[
-			customTooltip,
-			channels,
-			resolvePointLabels,
-			rest.config,
-			rest.decimalPrecision,
-			rest.canPinTooltip,
-			rest.renderTooltipFooter,
-		],
-	);
-
-	const hasSeries = rest.data.length > 1;
-
-	return (
-		<ChartWrapper
-			{...rest}
-			data={hasSeries ? rest.data : EMPTY_ALIGNED_DATA}
-			plotRef={handlePlotRef}
-			onClick={onPointClick ? handleClick : rest.onClick}
-			customTooltip={renderTooltip}
-			pinnedTooltipElement={pinnedTooltipElement}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}