support for word-wrap on column level

src/pages/Stream/Views/Explore/LogsViewConfig.tsx

@@ -210,10 +210,6 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 		setLogsStore((store) => setDisabledColumns(store, []));
 	}, [orderedHeaders]);
 
-	// const onToggleWordWrap = useCallback(() => {
-	// 	setLogsStore((store) => toggleWordWrap(store));
-	// }, []);
-
 	const handleOnlyClick = useCallback(
 		(column: string) => {
 			const filteredHeaders = orderedHeaders.filter((el) => el !== column);
@@ -245,15 +241,6 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 
 	return (
 		<>
-			{/* <Stack style={{ alignItems: 'flex-end', padding: '0 0.5rem' }}>
-				<Switch
-					styles={{ label: { fontSize: '0.7rem' } }}
-					labelPosition="left"
-					label="Wrap Words"
-					checked={enableWordWrap}
-					onChange={onToggleWordWrap}
-				/>
-			</Stack> */}
 			<SearchBar
 				placeholder="Search Headers"
 				value={searchValue}

src/pages/Stream/Views/Explore/StaticLogTable.tsx

@@ -59,7 +59,7 @@ const makeColumnVisiblityOpts = (columns: string[]) => {
 };
 
 const Table = (props: { primaryHeaderHeight: number }) => {
-	const [{ orderedHeaders, disabledColumns, pinnedColumns, pageData, enableWordWrap }, setLogsStore] = useLogsStore(
+	const [{ orderedHeaders, disabledColumns, pinnedColumns, pageData, wrapDisabledColumns }, setLogsStore] = useLogsStore(
 		(store) => store.tableOpts,
 	);
 	const [isSecureHTTPContext] = useAppStore((store) => store.isSecureHTTPContext);
@@ -71,22 +71,30 @@ const Table = (props: { primaryHeaderHeight: number }) => {
 
 		setLogsStore((store) => setSelectedLog(store, log));
 	}, []);
-	return (
-		<MantineReactTable
-			enableBottomToolbar={false}
-			enableTopToolbar={false}
-			enableColumnResizing={true}
-			mantineTableBodyCellProps={{
+
+	const makeCellCustomStyles = useCallback(
+		(columnName: string) => {
+			return {
 				className: tableStyles.customCell,
 				style: {
 					padding: '0.5rem 1rem',
 					fontSize: '0.6rem',
 					overflow: 'hidden',
 					textOverflow: 'ellipsis',
 					display: 'table-cell',
-					...(enableWordWrap ? { whiteSpace: 'nowrap' } : {}),
+					...(!_.includes(wrapDisabledColumns, columnName) ? { whiteSpace: 'nowrap' as 'nowrap' } : {}),
 				},
-			}}
+			};
+		},
+		[wrapDisabledColumns],
+	);
+
+	return (
+		<MantineReactTable
+			enableBottomToolbar={false}
+			enableTopToolbar={false}
+			enableColumnResizing={true}
+			mantineTableBodyCellProps={({ column: { id } }) => makeCellCustomStyles(id)}
 			mantineTableHeadRowProps={{ style: { border: 'none' } }}
 			mantineTableHeadCellProps={{
 				style: {

src/pages/Stream/components/Column.tsx

@@ -1,5 +1,5 @@
 import { Log } from '@/@types/parseable/api/query';
-import { Box, Checkbox, Menu, ScrollArea, Stack, TextInput, Tooltip, px } from '@mantine/core';
+import { Checkbox, Menu, ScrollArea, Stack, Switch, TextInput, Tooltip, px } from '@mantine/core';
 import { type ChangeEvent, type FC, Fragment, useRef, useCallback, useState, useEffect } from 'react';
 import { IconFilter, IconSearch } from '@tabler/icons-react';
 import EmptyBox from '@/components/Empty';
@@ -9,7 +9,7 @@ import { Text } from '@mantine/core';
 import { useLogsStore, logsStoreReducers } from '../providers/LogsProvider';
 import _ from 'lodash';
 
-const { getUniqueValues, setAndFilterData } = logsStoreReducers;
+const { getUniqueValues, setAndFilterData, toggleWrapDisabledColumns } = logsStoreReducers;
 
 type Column = {
 	columnName: string;
@@ -21,6 +21,7 @@ const Column: FC<Column> = (props) => {
 	const [filteredValues, setFilteredValues] = useState<string[]>([]);
 	const [selectedValues, setSelectedValues] = useState<string[]>([]);
 	const [rawData, setLogsStore] = useLogsStore((store) => store.data.rawData);
+	const [wrapDisabledColumns] = useLogsStore((store) => store.tableOpts.wrapDisabledColumns);
 	const inputValueRef = useRef('');
 
 	useEffect(() => {
@@ -53,38 +54,55 @@ const Column: FC<Column> = (props) => {
 
 	const checkboxList =
 		filteredValues.length === 0 ? (inputValueRef.current.length === 0 ? uniqueValues : []) : filteredValues;
+
+	const onToggleWrap = () => {
+		setLogsStore((store) => toggleWrapDisabledColumns(store, columnName));
+	};
+	const wordWrapEnabled = _.includes(wrapDisabledColumns, columnName);
 	return (
 		<div>
-			<Box style={{ width: '20rem', padding: '0.25rem 0.5rem 0.25rem 0.5rem' }}>
-				<Stack gap={8} my={16} style={{ flexDirection: 'row' }}>
-					<IconFilter stroke={1} size="1rem" />
-					<Text>Filter by values:</Text>
+			<Stack style={{ width: '20rem', padding: '0.8rem 1rem' }} gap={16}>
+				<Stack style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+					<Text style={{ fontSize: '0.7rem', fontWeight: 600 }}>Word Wrap</Text>
+					<Switch
+						styles={{ label: { fontSize: '0.7rem' } }}
+						labelPosition="left"
+						label={wordWrapEnabled ? 'Enabled' : 'Disabled'}
+						checked={wordWrapEnabled}
+						onChange={onToggleWrap}
+					/>
+				</Stack>
+				<Stack gap={4}>
+					<Stack gap={4} style={{ flexDirection: 'row', alignItems: 'center' }}>
+						<IconFilter stroke={1.4} size="0.8rem" />
+						<Text style={{ fontSize: '0.7rem', fontWeight: 600 }}>Filter by values:</Text>
+					</Stack>
+					<TextInput
+						className={searchInputStyle}
+						placeholder="Search"
+						leftSection={<IconSearch size={px('1rem')} />}
+						onChange={onSearch}
+						mt={8}
+					/>
+					{checkboxList.length ? (
+						<Fragment>
+							<CheckboxVirtualList
+								columnName={columnName}
+								list={checkboxList}
+								selectedFilters={selectedValues}
+								onSelect={onSelect}
+							/>
+							<Menu.Item>
+								<Button className={applyBtn} onClick={onApply} disabled={selectedValues.length === 0}>
+									Apply
+								</Button>
+							</Menu.Item>
+						</Fragment>
+					) : (
+						<EmptyBox mb="lg" />
+					)}
 				</Stack>
-				<TextInput
-					className={searchInputStyle}
-					placeholder="Search"
-					leftSection={<IconSearch size={px('1rem')} />}
-					onChange={onSearch}
-					mt={8}
-				/>
-				{checkboxList.length ? (
-					<Fragment>
-						<CheckboxVirtualList
-							columnName={columnName}
-							list={checkboxList}
-							selectedFilters={selectedValues}
-							onSelect={onSelect}
-						/>
-						<Menu.Item>
-							<Button className={applyBtn} onClick={onApply} disabled={selectedValues.length === 0}>
-								Apply
-							</Button>
-						</Menu.Item>
-					</Fragment>
-				) : (
-					<EmptyBox mb="lg" />
-				)}
-			</Box>
+			</Stack>
 		</div>
 	);
 };

src/pages/Stream/providers/LogsProvider.tsx

@@ -196,6 +196,7 @@ type LogsStore = {
 
 	tableOpts: {
 		disabledColumns: string[];
+		wrapDisabledColumns: string[];
 		pinnedColumns: string[];
 		pageData: Log[];
 		totalPages: number;
@@ -252,6 +253,7 @@ type LogsStoreReducers = {
 
 	// table opts reducers
 	toggleDisabledColumns: (store: LogsStore, columnName: string) => ReducerOutput;
+	toggleWrapDisabledColumns: (store: LogsStore, columnName: string) => ReducerOutput;
 	togglePinnedColumns: (store: LogsStore, columnName: string) => ReducerOutput;
 	setCurrentOffset: (store: LogsStore, offset: number) => ReducerOutput;
 	setPerPage: (store: LogsStore, perPage: number) => ReducerOutput;
@@ -309,6 +311,7 @@ const initialState: LogsStore = {
 
 	tableOpts: {
 		disabledColumns: [],
+		wrapDisabledColumns: [],
 		pinnedColumns: [],
 		pageData: [],
 		perPage: 50,
@@ -487,6 +490,16 @@ const toggleDisabledColumns = (store: LogsStore, columnName: string) => {
 	};
 };
 
+const toggleWrapDisabledColumns = (store: LogsStore, columnName: string) => {
+	const { tableOpts } = store;
+	return {
+		tableOpts: {
+			...tableOpts,
+			wrapDisabledColumns: addOrRemoveElement(tableOpts.wrapDisabledColumns, columnName),
+		},
+	};
+};
+
 const setDisabledColumns = (store: LogsStore, columns: string[]) => {
 	return {
 		tableOpts: {
@@ -688,6 +701,7 @@ const setCleanStoreForStreamChange = (store: LogsStore) => {
 			totalPages: 0,
 			orderedHeaders: [],
 			disabledColumns: [],
+			wrapDisabledColumns: [],
 			pinnedColumns: [],
 			filters: {},
 		},
@@ -981,6 +995,7 @@ const logsStoreReducers: LogsStoreReducers = {
 	setDisabledColumns,
 	setOrderedHeaders,
 	toggleWordWrap,
+	toggleWrapDisabledColumns
 };
 
 export { LogsProvider, useLogsStore, logsStoreReducers };