Revert "Explorer Toolbar maximised and minimised (#4656)" (#4705)

This reverts commit aadb962b6c.

(cherry picked from commit cf22039562)

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -146,7 +146,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.39.0
+    image: signoz/query-service:0.41.0
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -186,7 +186,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:0.39.0
+    image: signoz/frontend:0.41.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -199,7 +199,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.88.12
+    image: signoz/signoz-otel-collector:0.88.15
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -237,7 +237,7 @@ services:
       - query-service
 
   otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.88.12
+      image: signoz/signoz-schema-migrator:0.88.15
       deploy:
         restart_policy:
           condition: on-failure

deploy/docker/clickhouse-setup/docker-compose-core.yaml

@@ -66,7 +66,7 @@ services:
       - --storage.path=/data
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.15}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -81,7 +81,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
   otel-collector:
     container_name: signoz-otel-collector
-    image: signoz/signoz-otel-collector:0.88.12
+    image: signoz/signoz-otel-collector:0.88.15
     command:
       [
         "--config=/etc/otel-collector-config.yaml",

deploy/docker/clickhouse-setup/docker-compose.yaml

@@ -164,7 +164,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.39.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.41.0}
     container_name: signoz-query-service
     command:
       [
@@ -203,7 +203,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.39.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.41.0}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -215,7 +215,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.15}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -229,7 +229,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.12}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.15}
     container_name: signoz-otel-collector
     command:
       [

frontend/src/constants/localStorage.ts

@@ -16,5 +16,4 @@ export enum LOCALSTORAGE {
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
 	IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
 	DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
-	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
 }

frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx

@@ -1,56 +0,0 @@
-import { DndContext, DragEndEvent } from '@dnd-kit/core';
-import { useEffect, useState } from 'react';
-
-import ExplorerOptions, { ExplorerOptionsProps } from './ExplorerOptions';
-import {
-	getExplorerToolBarVisibility,
-	setExplorerToolBarVisibility,
-} from './utils';
-
-type ExplorerOptionsWrapperProps = Omit<
-	ExplorerOptionsProps,
-	'isExplorerOptionDrop'
->;
-
-function ExplorerOptionWrapper({
-	disabled,
-	query,
-	isLoading,
-	onExport,
-	sourcepage,
-}: ExplorerOptionsWrapperProps): JSX.Element {
-	const [isExplorerOptionHidden, setIsExplorerOptionHidden] = useState(false);
-
-	useEffect(() => {
-		const toolbarVisibility = getExplorerToolBarVisibility(sourcepage);
-		setIsExplorerOptionHidden(!toolbarVisibility);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const handleDragEnd = (event: DragEndEvent): void => {
-		const { active, over } = event;
-		if (
-			over !== null &&
-			active.id === 'explorer-options-draggable' &&
-			over.id === 'explorer-options-droppable'
-		) {
-			setIsExplorerOptionHidden(true);
-			setExplorerToolBarVisibility(false, sourcepage);
-		}
-	};
-	return (
-		<DndContext onDragEnd={handleDragEnd}>
-			<ExplorerOptions
-				disabled={disabled}
-				query={query}
-				isLoading={isLoading}
-				onExport={onExport}
-				sourcepage={sourcepage}
-				isExplorerOptionHidden={isExplorerOptionHidden}
-				setIsExplorerOptionHidden={setIsExplorerOptionHidden}
-			/>
-		</DndContext>
-	);
-}
-
-export default ExplorerOptionWrapper;

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -3,7 +3,7 @@
 }
 .explorer-update {
 	position: fixed;
-	bottom: 24px;
+	bottom: 16px;
 	left: calc(50% - 225px);
 	display: flex;
 	align-items: center;
@@ -47,7 +47,7 @@
 	box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.25);
 	backdrop-filter: blur(20px);
 	position: fixed;
-	bottom: 24px;
+	bottom: 16px;
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -1,7 +1,5 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import './ExplorerOptions.styles.scss';
 
-import { useDraggable } from '@dnd-kit/core';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
@@ -33,15 +31,7 @@ import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { Check, ConciergeBell, Disc3, Plus, X, XCircle } from 'lucide-react';
-import {
-	CSSProperties,
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { CSSProperties, useCallback, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -51,7 +41,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 
-import ExplorerOptionsDroppableArea from './ExplorerOptionsDroppableArea';
 import {
 	DATASOURCE_VS_ROUTES,
 	generateRGBAFromHex,
@@ -68,8 +57,6 @@ function ExplorerOptions({
 	onExport,
 	query,
 	sourcepage,
-	isExplorerOptionHidden = false,
-	setIsExplorerOptionHidden,
 }: ExplorerOptionsProps): JSX.Element {
 	const [isExport, setIsExport] = useState<boolean>(false);
 	const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
@@ -79,7 +66,6 @@ function ExplorerOptions({
 	const history = useHistory();
 	const ref = useRef<RefSelectProps>(null);
 	const isDarkMode = useIsDarkMode();
-	const [isDragEnabled, setIsDragEnabled] = useState(false);
 
 	const onModalToggle = useCallback((value: boolean) => {
 		setIsExport(value);
@@ -271,31 +257,11 @@ function ExplorerOptions({
 		[isDarkMode],
 	);
 
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		transform,
-		isDragging,
-	} = useDraggable({
-		id: 'explorer-options-draggable',
-		disabled: isDragEnabled,
-	});
-
 	const isEditDeleteSupported = allowedRoles.includes(role as string);
 
-	const style: React.CSSProperties | undefined = transform
-		? {
-				transform: `translate3d(${transform.x - 338}px, ${transform.y}px, 0)`,
-				width: `${400 - transform.y * 6}px`,
-				maxWidth: '440px', // initial width of the explorer options
-				overflow: 'hidden',
-		  }
-		: undefined;
-
 	return (
 		<>
-			{isQueryUpdated && !isExplorerOptionHidden && !isDragging && (
+			{isQueryUpdated && (
 				<div
 					className={cx(
 						isEditDeleteSupported ? '' : 'hide-update',
@@ -323,105 +289,87 @@ function ExplorerOptions({
 					</Tooltip>
 				</div>
 			)}
-			{!isExplorerOptionHidden && (
-				<div
-					className="explorer-options"
-					style={{
-						background: extraData
-							? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
-							: 'transparent',
-						backdropFilter: 'blur(20px)',
-						...style,
-					}}
-					ref={setNodeRef}
-					{...listeners}
-					{...attributes}
-				>
-					<div className="view-options">
-						<Select<string, { key: string; value: string }>
-							showSearch
-							placeholder="Select a view"
-							loading={viewsIsLoading || isRefetching}
-							value={viewName || undefined}
-							onSelect={handleSelect}
-							style={{
-								minWidth: 170,
-							}}
-							dropdownStyle={dropdownStyle}
-							className="views-dropdown"
-							allowClear={{
-								clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
-							}}
-							onDropdownVisibleChange={(open): void => {
-								setIsDragEnabled(open);
-							}}
-							onClear={handleClearSelect}
-							ref={ref}
-						>
-							{viewsData?.data?.data?.map((view) => {
-								const extraData =
-									view.extraData !== '' ? JSON.parse(view.extraData) : '';
-								let bgColor = getRandomColor();
-								if (extraData !== '') {
-									bgColor = extraData.color;
-								}
-								return (
-									<Select.Option key={view.uuid} value={view.name}>
-										<div className="render-options">
-											<span
-												className="dot"
-												style={{
-													background: bgColor,
-													boxShadow: `0px 0px 6px 0px ${bgColor}`,
-												}}
-											/>{' '}
-											{view.name}
-										</div>
-									</Select.Option>
-								);
-							})}
-						</Select>
+			<div
+				className="explorer-options"
+				style={{
+					background: extraData
+						? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
+						: 'transparent',
+					backdropFilter: 'blur(20px)',
+				}}
+			>
+				<div className="view-options">
+					<Select<string, { key: string; value: string }>
+						showSearch
+						placeholder="Select a view"
+						loading={viewsIsLoading || isRefetching}
+						value={viewName || undefined}
+						onSelect={handleSelect}
+						style={{
+							minWidth: 170,
+						}}
+						dropdownStyle={dropdownStyle}
+						className="views-dropdown"
+						allowClear={{
+							clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
+						}}
+						onClear={handleClearSelect}
+						ref={ref}
+					>
+						{viewsData?.data?.data?.map((view) => {
+							const extraData =
+								view.extraData !== '' ? JSON.parse(view.extraData) : '';
+							let bgColor = getRandomColor();
+							if (extraData !== '') {
+								bgColor = extraData.color;
+							}
+							return (
+								<Select.Option key={view.uuid} value={view.name}>
+									<div className="render-options">
+										<span
+											className="dot"
+											style={{
+												background: bgColor,
+												boxShadow: `0px 0px 6px 0px ${bgColor}`,
+											}}
+										/>{' '}
+										{view.name}
+									</div>
+								</Select.Option>
+							);
+						})}
+					</Select>
 
-						<Button
-							shape="round"
-							onClick={handleSaveViewModalToggle}
-							className={isEditDeleteSupported ? '' : 'hidden'}
-							disabled={viewsIsLoading || isRefetching}
-						>
-							<Disc3 size={16} /> Save this view
-						</Button>
-					</div>
-
-					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
-
-					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-						<Tooltip title="Create Alerts">
-							<Button
-								disabled={disabled}
-								shape="circle"
-								onClick={onCreateAlertsHandler}
-							>
-								<ConciergeBell size={16} />
-							</Button>
-						</Tooltip>
-
-						<Tooltip title="Add to Dashboard">
-							<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
-								<Plus size={16} />
-							</Button>
-						</Tooltip>
-					</div>
+					<Button
+						shape="round"
+						onClick={handleSaveViewModalToggle}
+						className={isEditDeleteSupported ? '' : 'hidden'}
+						disabled={viewsIsLoading || isRefetching}
+					>
+						<Disc3 size={16} /> Save this view
+					</Button>
 				</div>
-			)}
 
-			<ExplorerOptionsDroppableArea
-				isExplorerOptionHidden={isExplorerOptionHidden}
-				setIsExplorerOptionHidden={setIsExplorerOptionHidden}
-				sourcepage={sourcepage}
-				isQueryUpdated={isQueryUpdated}
-				handleClearSelect={handleClearSelect}
-				onUpdateQueryHandler={onUpdateQueryHandler}
-			/>
+				<hr className={isEditDeleteSupported ? '' : 'hidden'} />
+
+				<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
+					<Tooltip title="Create Alerts">
+						<Button
+							disabled={disabled}
+							shape="circle"
+							onClick={onCreateAlertsHandler}
+						>
+							<ConciergeBell size={16} />
+						</Button>
+					</Tooltip>
+
+					<Tooltip title="Add to Dashboard">
+						<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
+							<Plus size={16} />
+						</Button>
+					</Tooltip>
+				</div>
+			</div>
 
 			<Modal
 				className="save-view-modal"
@@ -479,14 +427,8 @@ export interface ExplorerOptionsProps {
 	query: Query | null;
 	disabled: boolean;
 	sourcepage: DataSource;
-	isExplorerOptionHidden?: boolean;
-	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
 }
 
-ExplorerOptions.defaultProps = {
-	isLoading: false,
-	isExplorerOptionHidden: false,
-	setIsExplorerOptionHidden: undefined,
-};
+ExplorerOptions.defaultProps = { isLoading: false };
 
 export default ExplorerOptions;

frontend/src/container/ExplorerOptions/ExplorerOptionsDroppableArea.styles.scss

@@ -1,55 +0,0 @@
-.explorer-option-droppable-container {
-    position: fixed;
-	bottom: 0;
-    width: -webkit-fill-available;
-    height: 24px;
-    display: flex;
-    justify-content: center;
-    border-radius: 10px 10px 0px 0px;
-    // box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
-    // backdrop-filter: blur(20px);
-
-    .explorer-actions-btn {
-        display: flex;
-        gap: 8px;
-        margin-right: 8px;
-
-        .action-btn {
-            display: flex; 
-            justify-content: center;
-            align-items: center;
-            border-radius: 10px 10px 0px 0px;
-            box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
-            backdrop-filter: blur(20px);
-            height: 24px !important;
-            border: none;
-        }
-    }
-
-    .explorer-show-btn {
-        border-radius: 10px 10px 0px 0px;
-        border: 1px solid var(--bg-slate-400);
-        background: rgba(22, 24, 29, 0.40);
-        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
-        backdrop-filter: blur(20px);
-        align-self: center;
-        padding: 8px 12px;
-        height: 24px !important;
-
-        .menu-bar {
-            border-radius: 50px;
-            background: var(--bg-slate-200);
-            height: 4px;
-            width: 50px;
-        }
-    }
-}
-
-.lightMode {
-    .explorer-option-droppable-container {
-
-        .explorer-show-btn {
-            background: var(--bg-vanilla-400);
-        }
-    }
-}

frontend/src/container/ExplorerOptions/ExplorerOptionsDroppableArea.tsx

@@ -1,83 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import './ExplorerOptionsDroppableArea.styles.scss';
-
-import { useDroppable } from '@dnd-kit/core';
-import { Color } from '@signozhq/design-tokens';
-import { Button, Tooltip } from 'antd';
-import { Disc3, X } from 'lucide-react';
-import { Dispatch, SetStateAction } from 'react';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { setExplorerToolBarVisibility } from './utils';
-
-interface DroppableAreaProps {
-	isQueryUpdated: boolean;
-	isExplorerOptionHidden?: boolean;
-	sourcepage: DataSource;
-	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
-	handleClearSelect: () => void;
-	onUpdateQueryHandler: () => void;
-}
-
-function ExplorerOptionsDroppableArea({
-	isQueryUpdated,
-	isExplorerOptionHidden,
-	sourcepage,
-	setIsExplorerOptionHidden,
-	handleClearSelect,
-	onUpdateQueryHandler,
-}: DroppableAreaProps): JSX.Element {
-	const { setNodeRef } = useDroppable({
-		id: 'explorer-options-droppable',
-	});
-
-	const handleShowExplorerOption = (): void => {
-		if (setIsExplorerOptionHidden) {
-			setIsExplorerOptionHidden(false);
-			setExplorerToolBarVisibility(true, sourcepage);
-		}
-	};
-
-	return (
-		<div ref={setNodeRef} className="explorer-option-droppable-container">
-			{isExplorerOptionHidden && (
-				<>
-					{isQueryUpdated && (
-						<div className="explorer-actions-btn">
-							<Tooltip title="Clear this view">
-								<Button
-									onClick={handleClearSelect}
-									className="action-btn"
-									style={{ background: Color.BG_CHERRY_500 }}
-									icon={<X size={14} color={Color.BG_INK_500} />}
-								/>
-							</Tooltip>
-							<Tooltip title="Update this View">
-								<Button
-									onClick={onUpdateQueryHandler}
-									className="action-btn"
-									style={{ background: Color.BG_ROBIN_500 }}
-									icon={<Disc3 size={14} color={Color.BG_INK_500} />}
-								/>
-							</Tooltip>
-						</div>
-					)}
-					<Button
-						// style={{ alignSelf: 'center', marginRight: 'calc(10% - 20px)' }}
-						className="explorer-show-btn"
-						onClick={handleShowExplorerOption}
-					>
-						<div className="menu-bar" />
-					</Button>
-				</>
-			)}
-		</div>
-	);
-}
-
-ExplorerOptionsDroppableArea.defaultProps = {
-	isExplorerOptionHidden: undefined,
-	setIsExplorerOptionHidden: undefined,
-};
-
-export default ExplorerOptionsDroppableArea;

frontend/src/container/ExplorerOptions/utils.ts

@@ -1,6 +1,5 @@
 import { Color } from '@signozhq/design-tokens';
 import { showErrorNotification } from 'components/ExplorerCard/utils';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
@@ -68,54 +67,3 @@ export const generateRGBAFromHex = (hex: string, opacity: number): string =>
 		hex.slice(3, 5),
 		16,
 	)}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`;
-
-export const getExplorerToolBarVisibility = (dataSource: string): boolean => {
-	try {
-		const showExplorerToolbar = localStorage.getItem(
-			LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
-		);
-		if (showExplorerToolbar === null) {
-			const parsedShowExplorerToolbar: {
-				[DataSource.LOGS]: boolean;
-				[DataSource.TRACES]: boolean;
-				[DataSource.METRICS]: boolean;
-			} = {
-				[DataSource.METRICS]: true,
-				[DataSource.TRACES]: true,
-				[DataSource.LOGS]: true,
-			};
-			localStorage.setItem(
-				LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
-				JSON.stringify(parsedShowExplorerToolbar),
-			);
-			return true;
-		}
-		const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar || '{}');
-		return parsedShowExplorerToolbar[dataSource];
-	} catch (error) {
-		console.error(error);
-		return false;
-	}
-};
-
-export const setExplorerToolBarVisibility = (
-	value: boolean,
-	dataSource: string,
-): void => {
-	try {
-		const showExplorerToolbar = localStorage.getItem(
-			LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
-		);
-		if (showExplorerToolbar) {
-			const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar);
-			parsedShowExplorerToolbar[dataSource] = value;
-			localStorage.setItem(
-				LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
-				JSON.stringify(parsedShowExplorerToolbar),
-			);
-			return;
-		}
-	} catch (error) {
-		console.error(error);
-	}
-};

frontend/src/container/LogsExplorerViews/index.tsx

@@ -14,7 +14,7 @@ import {
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
-import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
+import ExplorerOptions from 'container/ExplorerOptions/ExplorerOptions';
 import GoToTop from 'container/GoToTop';
 import LogsExplorerChart from 'container/LogsExplorerChart';
 import LogsExplorerList from 'container/LogsExplorerList';
@@ -634,7 +634,7 @@ function LogsExplorerViews({
 
 			<GoToTop />
 
-			<ExplorerOptionWrapper
+			<ExplorerOptions
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}
 				isLoading={isUpdateDashboardLoading}

frontend/src/pages/TracesExplorer/index.tsx

@@ -5,7 +5,7 @@ import axios from 'axios';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
+import ExplorerOptions from 'container/ExplorerOptions/ExplorerOptions';
 import ExportPanel from 'container/ExportPanel';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
@@ -208,12 +208,12 @@ function TracesExplorer(): JSX.Element {
 						onChange={handleExplorerTabChange}
 					/>
 				</Container>
-				<ExplorerOptionWrapper
+				<ExplorerOptions
 					disabled={!stagedQuery}
 					query={exportDefaultQuery}
 					isLoading={isLoading}
-					sourcepage={DataSource.TRACES}
 					onExport={handleExport}
+					sourcepage={DataSource.TRACES}
 				/>
 			</>
 		</ErrorBoundary>

go.mod

@@ -4,8 +4,9 @@ go 1.21.3
 
 require (
 	github.com/ClickHouse/clickhouse-go/v2 v2.20.0
+	github.com/DATA-DOG/go-sqlmock v1.5.2
 	github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd
-	github.com/SigNoz/signoz-otel-collector v0.88.12
+	github.com/SigNoz/signoz-otel-collector v0.88.15
 	github.com/SigNoz/zap_otlp/zap_otlp_encoder v0.0.0-20230822164844-1b861a431974
 	github.com/SigNoz/zap_otlp/zap_otlp_sync v0.0.0-20230822164844-1b861a431974
 	github.com/antonmedv/expr v1.15.3
@@ -84,7 +85,6 @@ require (
 	github.com/Azure/azure-sdk-for-go/sdk/internal v1.3.0 // indirect
 	github.com/AzureAD/microsoft-authentication-library-for-go v1.0.0 // indirect
 	github.com/ClickHouse/ch-go v0.61.3 // indirect
-	github.com/DATA-DOG/go-sqlmock v1.5.2 // indirect
 	github.com/alecthomas/units v0.0.0-20211218093645-b94a6e3cc137 // indirect
 	github.com/andybalholm/brotli v1.1.0 // indirect
 	github.com/aws/aws-sdk-go v1.45.26 // indirect

go.sum

@@ -98,8 +98,8 @@ github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd h1:Bk43AsDYe0fhkb
 github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd/go.mod h1:nxRcH/OEdM8QxzH37xkGzomr1O0JpYBRS6pwjsWW6Pc=
 github.com/SigNoz/prometheus v1.9.79-0.1 h1:RjsOw7oXVKx7IDA+/sRXW2x5pnw60/tT9MMuEz3+8DU=
 github.com/SigNoz/prometheus v1.9.79-0.1/go.mod h1:MffmFu2qFILQrOHehx3D0XjYtaZMVfI+Ppeiv98x4Ww=
-github.com/SigNoz/signoz-otel-collector v0.88.12 h1:UwkVi1o2NY9gRgCLBtWVKr+UDxb4FaTs63Sb20qgf8w=
-github.com/SigNoz/signoz-otel-collector v0.88.12/go.mod h1:RH9OEjni6tkh9RgN/meSPxv3kykjcFscqMwJgbUAXmo=
+github.com/SigNoz/signoz-otel-collector v0.88.15 h1:JUi9wzlj7WonPiXD4fak7yv/JMgd39sYFBGKTJIvP2Q=
+github.com/SigNoz/signoz-otel-collector v0.88.15/go.mod h1:Dst94AfUCw8+w2R32FvOwTpjzL//ZaY3tIPGpyJ4iqw=
 github.com/SigNoz/zap_otlp v0.1.0 h1:T7rRcFN87GavY8lDGZj0Z3Xv6OhJA6Pj3I9dNPmqvRc=
 github.com/SigNoz/zap_otlp v0.1.0/go.mod h1:lcHvbDbRgvDnPxo9lDlaL1JK2PyOyouP/C3ynnYIvyo=
 github.com/SigNoz/zap_otlp/zap_otlp_encoder v0.0.0-20230822164844-1b861a431974 h1:PKVgdf83Yw+lZJbFtNGBgqXiXNf3+kOXW2qZ7Ms7OaY=
@@ -792,8 +792,6 @@ github.com/spf13/cobra v1.7.0 h1:hyqWnYt1ZQShIddO5kBpj3vu05/++x6tJ6dg8EC572I=
 github.com/spf13/cobra v1.7.0/go.mod h1:uLxZILRyS/50WlhOIKD7W6V5bgeIt+4sICxh6uRMrb0=
 github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
-github.com/srikanthccv/ClickHouse-go-mock v0.6.0 h1:Dok9g6l1OwBWOv9c6PHR1XeGE3YfwNcft40rRjpS/TU=
-github.com/srikanthccv/ClickHouse-go-mock v0.6.0/go.mod h1:IJZ/eL1h4cOy/Jo3PzNKXSPmqRus15BC2MbduYPpA/g=
 github.com/srikanthccv/ClickHouse-go-mock v0.7.0 h1:XhRMX2663xkDGq3DYavw8m75O94s9u76hOIjo9QBl8c=
 github.com/srikanthccv/ClickHouse-go-mock v0.7.0/go.mod h1:IJZ/eL1h4cOy/Jo3PzNKXSPmqRus15BC2MbduYPpA/g=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=

pkg/query-service/tests/test-deploy/docker-compose.yaml

@@ -192,7 +192,7 @@ services:
     <<: *db-depend
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.15}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -205,7 +205,7 @@ services:
       #   condition: service_healthy
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.88.12
+    image: signoz/signoz-otel-collector:0.88.15
     container_name: signoz-otel-collector
     command:
       [