feat: changed name from 'Histogram' to 'Frequency chart' (#5369)

* feat: changed name from 'Histogram' to 'Frequence chart'

* feat: cdoe refactor and test case changes

* feat: added test case for frequency chart

frontend/src/container/LogsExplorerViews/index.tsx

@@ -63,10 +63,10 @@ import { v4 } from 'uuid';
 
 function LogsExplorerViews({
 	selectedView,
-	showHistogram,
+	showFrequencyChart,
 }: {
 	selectedView: SELECTED_VIEWS;
-	showHistogram: boolean;
+	showFrequencyChart: boolean;
 }): JSX.Element {
 	const { notifications } = useNotifications();
 	const history = useHistory();
@@ -561,7 +561,7 @@ function LogsExplorerViews({
 
 	return (
 		<div className="logs-explorer-views-container">
-			{showHistogram && (
+			{showFrequencyChart && (
 				<LogsExplorerChart
 					className="logs-histogram"
 					isLoading={isFetchingListChartData || isLoadingListChartData}

frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx

@@ -76,7 +76,10 @@ const renderer = (): RenderResult =>
 							<VirtuosoMockContext.Provider
 								value={{ viewportHeight: 300, itemHeight: 100 }}
 							>
-								<LogsExplorerViews selectedView={SELECTED_VIEWS.SEARCH} showHistogram />
+								<LogsExplorerViews
+									selectedView={SELECTED_VIEWS.SEARCH}
+									showFrequencyChart
+								/>
 							</VirtuosoMockContext.Provider>
 						</QueryBuilderProvider>
 					</MockQueryClientProvider>

frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx

@@ -10,7 +10,7 @@ interface LeftToolbarActionsProps {
 	selectedView: string;
 	onToggleHistrogramVisibility: () => void;
 	onChangeSelectedView: (view: SELECTED_VIEWS) => void;
-	showHistogram: boolean;
+	showFrequencyChart: boolean;
 }
 
 const activeTab = 'active-tab';
@@ -22,7 +22,7 @@ export default function LeftToolbarActions({
 	selectedView,
 	onToggleHistrogramVisibility,
 	onChangeSelectedView,
-	showHistogram,
+	showFrequencyChart,
 }: LeftToolbarActionsProps): JSX.Element {
 	const { clickhouse, search, queryBuilder: QB } = items;
 
@@ -71,11 +71,11 @@ export default function LeftToolbarActions({
 				)}
 			</div>
 
-			<div className="histogram-view-controller">
-				<Typography>Histogram</Typography>
+			<div className="frequency-chart-view-controller">
+				<Typography>Frequency chart</Typography>
 				<Switch
 					size="small"
-					checked={showHistogram}
+					checked={showFrequencyChart}
 					defaultChecked
 					onChange={onToggleHistrogramVisibility}
 				/>

frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss

@@ -37,7 +37,7 @@
 		}
 	}
 
-	.histogram-view-controller {
+	.frequency-chart-view-controller {
 		display: flex;
 		align-items: center;
 		padding-left: 8px;

frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx

@@ -8,7 +8,7 @@ import RightToolbarActions from '../RightToolbarActions';
 describe('ToolbarActions', () => {
 	it('LeftToolbarActions - renders correctly with default props', async () => {
 		const handleChangeSelectedView = jest.fn();
-		const handleToggleShowHistogram = jest.fn();
+		const handleToggleShowFrequencyChart = jest.fn();
 		const { queryByTestId } = render(
 			<LeftToolbarActions
 				items={{
@@ -32,8 +32,8 @@ describe('ToolbarActions', () => {
 				}}
 				selectedView={SELECTED_VIEWS.SEARCH}
 				onChangeSelectedView={handleChangeSelectedView}
-				onToggleHistrogramVisibility={handleToggleShowHistogram}
-				showHistogram
+				onToggleHistrogramVisibility={handleToggleShowFrequencyChart}
+				showFrequencyChart
 			/>,
 		);
 		expect(screen.getByTestId('search-view')).toBeInTheDocument();
@@ -51,7 +51,7 @@ describe('ToolbarActions', () => {
 
 	it('renders - clickhouse view and test histogram toggle', async () => {
 		const handleChangeSelectedView = jest.fn();
-		const handleToggleShowHistogram = jest.fn();
+		const handleToggleShowFrequencyChart = jest.fn();
 		const { queryByTestId, getByRole } = render(
 			<LeftToolbarActions
 				items={{
@@ -76,8 +76,8 @@ describe('ToolbarActions', () => {
 				}}
 				selectedView={SELECTED_VIEWS.QUERY_BUILDER}
 				onChangeSelectedView={handleChangeSelectedView}
-				onToggleHistrogramVisibility={handleToggleShowHistogram}
-				showHistogram
+				onToggleHistrogramVisibility={handleToggleShowFrequencyChart}
+				showFrequencyChart
 			/>,
 		);
 
@@ -88,7 +88,7 @@ describe('ToolbarActions', () => {
 		expect(handleChangeSelectedView).toBeCalled();
 
 		await userEvent.click(getByRole('switch'));
-		expect(handleToggleShowHistogram).toBeCalled();
+		expect(handleToggleShowFrequencyChart).toBeCalled();
 	});
 
 	it('RightToolbarActions - render correctly with props', async () => {

frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx

@@ -35,12 +35,14 @@ jest.mock(
 			return <div>Time Series Chart</div>;
 		},
 );
+
+const frequencyChartContent = 'Frequency chart content';
 jest.mock(
 	'container/LogsExplorerChart',
 	() =>
 		// eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
 		function () {
-			return <div>Histogram Chart</div>;
+			return <div>{frequencyChartContent}</div>;
 		},
 );
 
@@ -83,13 +85,13 @@ describe('Logs Explorer Tests', () => {
 			</MemoryRouter>,
 		);
 
-		// check the presence of histogram chart
-		expect(getByText('Histogram Chart')).toBeInTheDocument();
+		// check the presence of frequency chart content
+		expect(getByText(frequencyChartContent)).toBeInTheDocument();
 
 		// toggle the chart and check it gets removed from the DOM
 		const histogramToggle = getByRole('switch');
 		await userEvent.click(histogramToggle);
-		expect(queryByText('Histogram Chart')).not.toBeInTheDocument();
+		expect(queryByText(frequencyChartContent)).not.toBeInTheDocument();
 
 		// check the presence of search bar and query builder and absence of clickhouse
 		const searchView = getByTestId('search-view');
@@ -229,4 +231,33 @@ describe('Logs Explorer Tests', () => {
 		const aggrInterval = queryAllByText('AGGREGATION INTERVAL');
 		expect(aggrInterval.length).toBe(2);
 	});
+
+	test('frequency chart visibility and switch toggle', async () => {
+		const { getByRole, queryByText } = render(
+			<MemoryRouter initialEntries={[logExplorerRoute]}>
+				<Provider store={store}>
+					<I18nextProvider i18n={i18n}>
+						<MockQueryClientProvider>
+							<QueryBuilderProvider>
+								<LogsExplorer />,
+							</QueryBuilderProvider>
+						</MockQueryClientProvider>
+					</I18nextProvider>
+				</Provider>
+			</MemoryRouter>,
+		);
+
+		// check the presence of Frequency Chart
+		expect(queryByText('Frequency chart')).toBeInTheDocument();
+
+		// check the default state of the histogram toggle
+		const histogramToggle = getByRole('switch');
+		expect(histogramToggle).toBeInTheDocument();
+		expect(histogramToggle).toBeChecked();
+		expect(queryByText(frequencyChartContent)).toBeInTheDocument();
+
+		// toggle the chart and check it gets removed from the DOM
+		await userEvent.click(histogramToggle);
+		expect(queryByText(frequencyChartContent)).not.toBeInTheDocument();
+	});
 });

frontend/src/pages/LogsExplorer/index.tsx

@@ -16,15 +16,15 @@ import { WrapperStyled } from './styles';
 import { SELECTED_VIEWS } from './utils';
 
 function LogsExplorer(): JSX.Element {
-	const [showHistogram, setShowHistogram] = useState(true);
+	const [showFrequencyChart, setShowFrequencyChart] = useState(true);
 	const [selectedView, setSelectedView] = useState<SELECTED_VIEWS>(
 		SELECTED_VIEWS.SEARCH,
 	);
 
 	const { handleRunQuery, currentQuery } = useQueryBuilder();
 
-	const handleToggleShowHistogram = (): void => {
-		setShowHistogram(!showHistogram);
+	const handleToggleShowFrequencyChart = (): void => {
+		setShowFrequencyChart(!showFrequencyChart);
 	};
 
 	const handleChangeSelectedView = (view: SELECTED_VIEWS): void => {
@@ -78,8 +78,8 @@ function LogsExplorer(): JSX.Element {
 						items={toolbarViews}
 						selectedView={selectedView}
 						onChangeSelectedView={handleChangeSelectedView}
-						onToggleHistrogramVisibility={handleToggleShowHistogram}
-						showHistogram={showHistogram}
+						onToggleHistrogramVisibility={handleToggleShowFrequencyChart}
+						showFrequencyChart={showFrequencyChart}
 					/>
 				}
 				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
@@ -96,7 +96,7 @@ function LogsExplorer(): JSX.Element {
 					<div className="logs-explorer-views">
 						<LogsExplorerViews
 							selectedView={selectedView}
-							showHistogram={showHistogram}
+							showFrequencyChart={showFrequencyChart}
 						/>
 					</div>
 				</div>