events chart refactor & log table cosmetics

src/components/Header/styles/LogQuery.module.css

@@ -218,7 +218,7 @@
 .streamInput {
 	border: none;
 	padding-left: 0;
-	padding-right: 0;
+	padding-right: 30px;
 	height: 50px;
 	font-size: 24px;
 	font-weight: 600;

src/pages/Home/index.tsx

@@ -1,5 +1,5 @@
 import { EmptySimple } from '@/components/Empty';
-import { Text, Button, Center, Box, Group, ActionIcon, Flex } from '@mantine/core';
+import { Text, Button, Center, Box, Group, ActionIcon, Flex, Stack, Tooltip } from '@mantine/core';
 import { IconChevronRight, IconExternalLink } from '@tabler/icons-react';
 import { useEffect, type FC, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -9,7 +9,7 @@ import { HumanizeNumber, formatBytes } from '@/utils/formatBytes';
 import { LogStreamRetention, LogStreamStat } from '@/@types/parseable/api/stream';
 import { useHeaderContext } from '@/layouts/MainLayout/Context';
 import cardStyles from './styles/Card.module.css';
-import homeStyles from './styles/Home.module.css'
+import homeStyles from './styles/Home.module.css';
 
 const EmptyStreamsView: FC = () => {
 	const classes = homeStyles;
@@ -36,7 +36,7 @@ const Home: FC = () => {
 	const { container } = classes;
 	const {
 		methods: { streamChangeCleanup },
-		state: { userSpecficStreams }
+		state: { userSpecficStreams },
 	} = useHeaderContext();
 	const navigate = useNavigate();
 	const { getStreamMetadata, metaData } = useGetStreamMetadata();
@@ -51,7 +51,8 @@ const Home: FC = () => {
 		navigate(`/${stream}/logs`);
 	}, []);
 
-	if ((Array.isArray(userSpecficStreams) && userSpecficStreams.length === 0) || userSpecficStreams === null)
+	if (userSpecficStreams === null) return null;
+	if ((Array.isArray(userSpecficStreams) && userSpecficStreams.length === 0))
 		return <EmptyStreamsView />;
 
 	return (
@@ -69,7 +70,7 @@ export default Home;
 
 const BigNumber = (props: { label: string; value: any; color?: string }) => {
 	return (
-		<Box className={cardStyles.streamBoxCol} style={{ width: '12%' }}>
+		<Box className={cardStyles.streamBoxCol} style={{ width: '11%' }}>
 			<Text size="xs" style={{ color: 'black' }}>
 				{props.label}
 			</Text>
@@ -129,34 +130,35 @@ const StreamInfo: FC<StreamInfoProps> = (props) => {
 	const ingestionSize = (stats as LogStreamStat)?.ingestion?.size;
 	const storageSize = (stats as LogStreamStat)?.storage?.size;
 	return (
-		<Group
+		<Stack
 			className={classes.streamBox}
 			onClick={() => {
 				navigateToStream(stream);
-			}}
-			style={{ width: '100%' }}>
-			<Box style={{ width: 200 }}>
+			}}>
+			<Box style={{ width: 400 }}>
 				<Box className={classes.streamBoxCol}>
 					<Text size="xs" style={{ color: 'black' }}>
 						{'Stream'}
 					</Text>
-					<Text fw={700} size={'lg'} style={{ color: 'black' }}>
-						{stream}
-					</Text>
+					<Tooltip label={stream}>
+						<Text fw={700} size={'lg'} style={{ color: 'black' }} lineClamp={1}>
+							{stream}
+						</Text>
+					</Tooltip>
 				</Box>
 			</Box>
 			<BigNumber label={'Events'} value={sanitizeCount(ingestionCount)} />
 			<BigNumber label={'Ingestion'} value={sanitizeBytes(ingestionSize)} />
 			<BigNumber label={'Storage'} value={sanitizeBytes(storageSize)} />
 			<BigNumber label={'Compression'} value={calcCompressionRate(storageSize, ingestionSize)} />
 			<BigNumber label={'Retention'} value={streamRetention} />
-			<Flex style={{ flex: 1, justifyContent: 'flex-end' }}>
+			<Flex style={{ justifyContent: 'flex-end' }}>
 				<Box style={{ width: '15%' }}>
 					<ActionIcon variant="transparent" color="black" size={50}>
 						<IconChevronRight stroke={1} />
 					</ActionIcon>
 				</Box>
 			</Flex>
-		</Group>
+		</Stack>
 	);
 };

src/pages/Home/styles/Card.module.css

@@ -6,11 +6,13 @@
 .streamBox {
 	border-radius: 0.5rem;
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
-	flex-shrink: 0;
 	height: 95px;
 	padding: 1rem;
 	cursor: pointer;
 	width: auto;
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
 }
 
 .streamBoxCol {

src/pages/Logs/Column.tsx

@@ -1,17 +1,16 @@
 import { Log, SortOrder } from '@/@types/parseable/api/query';
-import { Box, Checkbox, Popover, TextInput, Tooltip, UnstyledButton, px } from '@mantine/core';
+import { Box, Checkbox, Popover, ScrollArea, Stack, TextInput, Tooltip, UnstyledButton, px } from '@mantine/core';
 import { type ChangeEvent, type FC, Fragment, useTransition, useRef, useCallback, useMemo } from 'react';
 import { IconDotsVertical, IconFilter, IconSearch, IconSortAscending, IconSortDescending } from '@tabler/icons-react';
 import useMountedState from '@/hooks/useMountedState';
 import EmptyBox from '@/components/Empty';
 import { Button } from '@mantine/core';
 import Loading from '@/components/Loading';
-import { FixedSizeList as List } from 'react-window';
 import compare from 'just-compare';
 import { parseLogData } from '@/utils';
-import { useDisclosure } from '@mantine/hooks';
 import { capitalizeFirstLetter } from '@/utils/capitalizeFirstLetter';
-import columnStyles from './styles/Column.module.css'
+import columnStyles from './styles/Column.module.css';
+import { Text } from '@mantine/core';
 
 type SortWidgetProps = {
 	setSortOrder: (order: SortOrder | null) => void;
@@ -77,7 +76,7 @@ const Column: FC<Column> = (props) => {
 
 			if (values && search) {
 				return values.filter((x) => {
-					return parseLogData(x, columnName)?.toString().includes(search);
+					return x?.toString().toLowerCase().includes(search.toLowerCase());
 				});
 			}
 
@@ -91,7 +90,10 @@ const Column: FC<Column> = (props) => {
 
 	const onOpen = useCallback(() => {
 		if (!_columnValuesRef.current) {
-			_columnValuesRef.current = getColumnFilters(columnName);
+			const uniqueValues = getColumnFilters(columnName);
+			_columnValuesRef.current = Array.isArray(uniqueValues)
+				? uniqueValues?.map((val) => parseLogData(val, columnName))
+				: null;
 			startTransition(() => {
 				setColumnValues(_columnValuesRef.current);
 			});
@@ -170,49 +172,48 @@ type CheckboxVirtualListProps = {
 	setFilters: (value: string[]) => void;
 };
 
+const SLICE_OFFSET = 50;
+
 const CheckboxVirtualList: FC<CheckboxVirtualListProps> = (props) => {
-	const { list, selectedFilters, setFilters, columnName } = props;
+	const { list, selectedFilters, setFilters } = props;
+	const classes = columnStyles;
+	const totalValues = list.length;
+	const shortList = list.slice(0, SLICE_OFFSET);
+	const { checkBoxStyle } = classes;
+
+	const remainingLength = totalValues > SLICE_OFFSET ? totalValues - SLICE_OFFSET : 0;
 
 	return (
 		<Checkbox.Group value={selectedFilters} onChange={setFilters}>
-			<List itemCount={list.length} itemSize={35} height={250} width={250} overscanCount={10}>
-				{({ index }) => {
-					const label = list[index]?.toString() || '';
-
-					return <CheckboxRow key={index} value={label} label={label} columnName={columnName} />;
-				}}
-			</List>
+			<ScrollArea style={{ height: 250 }}>
+				{shortList.map((item, index) => {
+					const label = item?.toString() || '';
+					return (
+						<div key={`${label}${index}`}>
+							<Tooltip label={label} key={index} openDelay={500} maw={300} multiline>
+								<Stack style={{ width: '100%', justifyContent: 'center' }}>
+									<Checkbox
+										value={label}
+										label={label}
+										className={checkBoxStyle}
+										styles={{
+											label: { textOverflow: 'ellipsis', width: 250, whiteSpace: 'nowrap', overflow: 'hidden' },
+											body: {
+												textOverflow: 'ellipsis',
+											},
+										}}
+									/>
+								</Stack>
+							</Tooltip>
+							{index + 1 === shortList.length && remainingLength > 0 && (
+								<Text ta="center" c="gray.5" style={{ margin: '8px 0' }}>{`+${remainingLength} more`}</Text>
+							)}
+						</div>
+					);
+				})}
+			</ScrollArea>
 		</Checkbox.Group>
 	);
 };
 
-type CheckboxRowProps = {
-	label: string;
-	value: string;
-	columnName: string;
-};
-
-const CheckboxRow: FC<CheckboxRowProps> = (props) => {
-	const { value, label, columnName } = props;
-	const [opened, { open, close }] = useDisclosure(false);
-	const classes = columnStyles;
-	const { checkBoxStyle } = classes;
-	return (
-		<Tooltip
-			label={label}
-			withinPortal
-			opened={opened}
-			style={{
-				whiteSpace: 'pre-wrap',
-				maxWidth: 250,
-				color: 'black',
-				backgroundColor: 'white',
-			}}>
-			<div onMouseOver={open} onMouseOut={close}>
-				<Checkbox value={value} label={parseLogData(label, columnName)} className={checkBoxStyle} />
-			</div>
-		</Tooltip>
-	);
-};
-
 export default Column;