Newswires UI: fix filter search by date issues

newswires/client/src/App.tsx

@@ -15,6 +15,7 @@ import {
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useSearch } from './context/SearchContext.tsx';
+import { isRestricted } from './dateMathHelpers.ts';
 import { Feed } from './Feed';
 import { Item } from './Item';
 import { SideNav } from './SideNav';
@@ -31,7 +32,7 @@ export function App() {
 		handlePreviousItem,
 	} = useSearch();
 
-	const { view, itemId: selectedItemId } = config;
+	const { view, itemId: selectedItemId, query } = config;
 	const { status } = state;
 
 	const isPoppedOut = !!window.opener;
@@ -74,9 +75,26 @@ export function App() {
 						</p>
 					</EuiToast>
 				)}
+				{isRestricted(query.end) && (
+					<EuiToast
+						title="Restricted"
+						iconType="warning"
+						css={css`
+							border-radius: 0;
+							background: #fdf6d8;
+							position: fixed;
+						`}
+					>
+						<p>
+							Your current filter settings exclude recent updates. Adjust the
+							filter to see the latest data.
+						</p>
+					</EuiToast>
+				)}
 				<div
 					css={css`
-						${status === 'offline' && 'padding-top: 84px;'}
+						${(status === 'offline' || isRestricted(query.end)) &&
+						'padding-top: 84px;'}
 						height: 100%;
 						${(status === 'loading' || status === 'error') &&
 						'display: flex; align-items: center;'}

newswires/client/src/DatePicker.tsx

@@ -40,13 +40,14 @@ export const DatePicker = () => {
 		<div style={{ paddingTop: 20, paddingBottom: 20 }}>
 			<EuiSuperDatePicker
 				width={'auto'}
-				start={config.query.start}
-				end={config.query.end}
+				start={config.query.start ?? 'now/d'}
+				end={config.query.end ?? 'now'}
 				minDate={minDate}
 				maxDate={maxDate}
 				onTimeChange={onTimeChange}
-				showUpdateButton={true}
+				updateButtonProps={{ showTooltip: true, iconOnly: true }}
 				customQuickSelectRender={customQuickSelectRender}
+				dateFormat={'MMM D • HH:mm'}
 				commonlyUsedRanges={[
 					timeRangeOption('30m'),
 					timeRangeOption('1h'),

newswires/client/src/Feed.tsx

@@ -24,32 +24,44 @@ export const Feed = () => {
 			)}
 			{(status == 'success' || status == 'offline') &&
 				queryData.results.length === 0 && (
-					<EuiEmptyPrompt
-						body={
-							<>
-								<SearchSummary />
-								<p>Try another search or reset filters.</p>
-							</>
-						}
-						color="subdued"
-						layout="horizontal"
-						title={<h2>No results match your search criteria</h2>}
-						titleSize="s"
-					/>
-				)}
-			{(status == 'success' || status == 'offline') &&
-				queryData.results.length > 0 && (
 					<>
 						<EuiFlexGroup>
 							<EuiFlexItem
 								style={{ flex: 1, paddingTop: 20, paddingBottom: 20 }}
-							>
-								<SearchSummary />
-							</EuiFlexItem>
+							></EuiFlexItem>
 							<EuiFlexItem grow={false}>
 								<DatePicker />
 							</EuiFlexItem>
 						</EuiFlexGroup>
+						<EuiEmptyPrompt
+							body={
+								<>
+									<SearchSummary />
+									<p>Try another search or reset filters.</p>
+								</>
+							}
+							color="subdued"
+							layout="horizontal"
+							title={<h2>No results match your search criteria</h2>}
+							titleSize="s"
+						/>
+					</>
+				)}
+			{(status == 'success' || status == 'offline') &&
+				queryData.results.length > 0 && (
+					<>
+						<div>
+							<EuiFlexGroup>
+								<EuiFlexItem
+									style={{ flex: 1, paddingTop: 20, paddingBottom: 20 }}
+								>
+									<SearchSummary />
+								</EuiFlexItem>
+								<EuiFlexItem grow={false}>
+									<DatePicker />
+								</EuiFlexItem>
+							</EuiFlexGroup>
+						</div>
 
 						<WireItemList
 							wires={queryData.results}

newswires/client/src/SearchSummary.tsx

@@ -2,10 +2,11 @@ import { EuiBadge, EuiText } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import { useSearch } from './context/SearchContext.tsx';
+import { deriveDateMathRangeLabel } from './dateMathHelpers.ts';
 
 const Summary = ({ searchSummary }: { searchSummary: string }) => {
 	const { config, handleEnterQuery } = useSearch();
-	const { q, bucket, subjects, supplier: suppliers } = config.query;
+	const { q, bucket, subjects, supplier: suppliers, start, end } = config.query;
 
 	const displaySubjects = (subjects ?? []).length > 0;
 	const displaySuppliers = (suppliers ?? []).length > 0;
@@ -20,6 +21,8 @@ const Summary = ({ searchSummary }: { searchSummary: string }) => {
 		handleEnterQuery({
 			...config.query,
 			q: label === 'Search term' ? '' : config.query.q,
+			start: label === 'Time range' ? undefined : config.query.start,
+			end: label === 'Time range' ? undefined : config.query.end,
 			bucket: label === 'Bucket' ? undefined : config.query.bucket,
 			supplier:
 				label === 'Supplier'
@@ -43,7 +46,8 @@ const Summary = ({ searchSummary }: { searchSummary: string }) => {
 					handleBadgeClick(label, value);
 				}}
 			>
-				<strong>{label}</strong>: {value}
+				<strong>{label}</strong>
+				{value !== '' ? `: ${value}` : ''}
 			</EuiBadge>
 		) : null;
 
@@ -53,6 +57,9 @@ const Summary = ({ searchSummary }: { searchSummary: string }) => {
 				{searchSummary}
 				{displayFilters && ' for: '}
 			</span>
+			{start &&
+				end &&
+				renderBadge('Time range', deriveDateMathRangeLabel(start, end))}
 			{q && renderBadge('Search term', q)}
 			{bucket && renderBadge('Bucket', bucket)}
 			{displaySuppliers &&

newswires/client/src/context/SearchContext.tsx

@@ -86,6 +86,7 @@ const ActionSchema = z.discriminatedUnion('type', [
 	z.object({ type: z.literal('SELECT_ITEM'), item: z.string().optional() }),
 	z.object({
 		type: z.literal('UPDATE_RESULTS'),
+		query: QuerySchema,
 		data: WiresQueryResponseSchema,
 	}),
 	z.object({ type: z.literal('TOGGLE_AUTO_UPDATE') }),
@@ -193,7 +194,11 @@ export function SearchContextProvider({ children }: PropsWithChildren) {
 					fetchResults(currentConfig.query, { sinceId }, abortController)
 						.then((data) => {
 							if (!abortController.signal.aborted) {
-								dispatch({ type: 'UPDATE_RESULTS', data });
+								dispatch({
+									type: 'UPDATE_RESULTS',
+									data,
+									query: currentConfig.query,
+								});
 							}
 						})
 						.catch(handleFetchError);
@@ -215,7 +220,9 @@ export function SearchContextProvider({ children }: PropsWithChildren) {
 	]);
 
 	const handleEnterQuery = (query: Query) => {
-		dispatch({ type: 'ENTER_QUERY' });
+		dispatch({
+			type: 'ENTER_QUERY',
+		});
 
 		if (currentConfig.view === 'item') {
 			pushConfigState({

newswires/client/src/context/SearchReducer.test.ts

@@ -1,7 +1,16 @@
+import dateMath from '@elastic/datemath';
+import moment from 'moment/moment';
 import { sampleWireData } from '../tests/fixtures/wireData.ts';
 import type { Action, State } from './SearchContext.tsx';
 import { SearchReducer } from './SearchReducer';
 
+jest.mock('@elastic/datemath', () => ({
+	__esModule: true,
+	default: {
+		parse: jest.fn(),
+	},
+}));
+
 describe('SearchReducer', () => {
 	const initialState: State = {
 		status: 'loading',
@@ -80,6 +89,7 @@ describe('SearchReducer', () => {
 			const action: Action = {
 				type: 'UPDATE_RESULTS',
 				data: { results: [{ ...sampleWireData, id: 2 }], totalCount: 1 },
+				query: { q: 'test' },
 			};
 
 			const newState = SearchReducer(state, action);
@@ -99,6 +109,79 @@ describe('SearchReducer', () => {
 		});
 	});
 
+	it(`should filter storing when handling UPDATE_RESULTS action in success state`, () => {
+		const state: State = {
+			...successState,
+			queryData: {
+				results: [
+					{ ...sampleWireData, id: 1, ingestedAt: '2025-01-01T02:00:00Z' },
+					{ ...sampleWireData, id: 2, ingestedAt: '2025-01-01T02:05:00Z' },
+				],
+				totalCount: 2,
+			},
+		};
+
+		(dateMath.parse as jest.Mock).mockImplementation(() =>
+			moment('2025-01-01T02:04:00Z'),
+		);
+
+		const action: Action = {
+			type: 'UPDATE_RESULTS',
+			data: {
+				results: [
+					{ ...sampleWireData, id: 4, ingestedAt: '2025-01-01T02:07:00Z' },
+					{ ...sampleWireData, id: 3, ingestedAt: '2025-01-01T02:06:00Z' },
+				],
+				totalCount: 2,
+			},
+			query: { q: 'test', start: 'now-30' },
+		};
+
+		expect(state.queryData.results).toContainEqual({
+			...sampleWireData,
+			id: 2,
+			ingestedAt: '2025-01-01T02:05:00Z',
+		});
+
+		expect(state.queryData.results).toContainEqual({
+			...sampleWireData,
+			id: 1,
+			ingestedAt: '2025-01-01T02:00:00Z',
+		});
+
+		const newState = SearchReducer(state, action);
+
+		expect(newState.status).toBe('success');
+		expect(newState.queryData?.results).toHaveLength(3);
+		expect(newState.queryData?.totalCount).toBe(3);
+
+		expect(newState.queryData?.results).toContainEqual({
+			...sampleWireData,
+			id: 4,
+			ingestedAt: '2025-01-01T02:07:00Z',
+			isFromRefresh: true,
+		});
+
+		expect(newState.queryData?.results).toContainEqual({
+			...sampleWireData,
+			id: 3,
+			ingestedAt: '2025-01-01T02:06:00Z',
+			isFromRefresh: true,
+		});
+
+		expect(newState.queryData?.results).toContainEqual({
+			...sampleWireData,
+			id: 2,
+			ingestedAt: '2025-01-01T02:05:00Z',
+		});
+
+		expect(newState.queryData?.results).not.toContainEqual({
+			...sampleWireData,
+			id: 1,
+			ingestedAt: '2025-01-01T02:00:00Z',
+		});
+	});
+
 	it(`should handle APPEND_RESULTS action in success state`, () => {
 		const state: State = {
 			...successState,

newswires/client/src/context/SearchReducer.ts

@@ -1,26 +1,42 @@
+import dateMath from '@elastic/datemath';
 import { isEqual as deepIsEqual } from 'lodash';
+import moment from 'moment';
 import type { Query, WiresQueryResponse } from '../sharedTypes.ts';
 import { defaultQuery } from '../urlState.ts';
 import type { Action, SearchHistory, State } from './SearchContext.tsx';
 
 function mergeQueryData(
 	existing: WiresQueryResponse | undefined,
 	newData: WiresQueryResponse,
+	{ start }: Query,
 ): WiresQueryResponse {
+	const parsePostgresTimestamp = (timestamp: string) =>
+		moment(timestamp.replace(/\[.*]$/, ''));
+
 	if (existing) {
 		const existingIds = new Set(existing.results.map((item) => item.id));
 
-		const mergedResults = [
-			...newData.results
-				.filter((newItem) => !existingIds.has(newItem.id))
-				.map((newItem) => ({ ...newItem, isFromRefresh: true })),
-			...existing.results,
-		];
+		const filteredExistingResults =
+			start !== undefined
+				? existing.results.filter((existingItem) => {
+						return parsePostgresTimestamp(
+							existingItem.ingestedAt,
+						).isSameOrAfter(dateMath.parse(start));
+					})
+				: existing.results;
+
+		const filteredOutCount =
+			existing.results.length - filteredExistingResults.length;
 
 		return {
 			...newData,
-			totalCount: existing.totalCount + newData.totalCount,
-			results: mergedResults,
+			totalCount: existing.totalCount + newData.totalCount - filteredOutCount,
+			results: [
+				...newData.results
+					.filter((newItem) => !existingIds.has(newItem.id))
+					.map((newItem) => ({ ...newItem, isFromRefresh: true })),
+				...filteredExistingResults,
+			],
 		};
 	} else {
 		return {
@@ -89,14 +105,22 @@ export const SearchReducer = (state: State, action: Action): State => {
 				case 'success':
 					return {
 						...state,
-						queryData: mergeQueryData(state.queryData, action.data),
+						queryData: mergeQueryData(
+							state.queryData,
+							action.data,
+							action.query,
+						),
 					};
 				case 'offline':
 				case 'error':
 					return {
 						...state,
 						status: 'success',
-						queryData: mergeQueryData(state.queryData, action.data),
+						queryData: mergeQueryData(
+							state.queryData,
+							action.data,
+							action.query,
+						),
 					};
 				default:
 					return state;