Feature: Viewing Search Results
Relevant source files
The following files were used as context for generating this wiki page:
- web/src/Pages/SearchSQLite/components/ResultsStep.jsx
- web/src/analytics/MessageDataProcessor.js
- web/src/analytics/processors/statisticsProcessor.js
- web/src/analytics/components/StatisticsDisplay.jsx
- web/src/Pages/SearchSQLite/index.jsx
- web/src/analytics/components/ActivityChart.jsx
- web/src/analytics/components/MessagesOverTimeChart.jsx
- web/src/Pages/SearchSQLite/hooks/useMessageSearch.js
The "Viewing Search Results" feature is the final step in the SearchSQLite page, responsible for visualizing the analytics derived from the user's WhatsApp chat messages. After a user uploads their database, applies search filters, and executes a search, this feature presents the resulting message data through a series of interactive charts and statistical summaries.
The core of this feature is the ResultsStep component, which orchestrates data processing and rendering. It utilizes a powerful MessageDataProcessor class to transform the raw message list into structured data suitable for visualization. This processed data is then passed to specialized chart and statistics components, providing the user with insights into their messaging habits, activity patterns, and overall chat history.
Architecture and Data Flow
The results view is initiated when the application's state transitions to the RESULTS step. The messagesList data, fetched in the previous step, is the primary input for this feature.
Component Hierarchy
The ResultsStep component is the top-level container for all visual elements in the results view. It renders several child components, each responsible for a specific part of the analytics display.
This diagram shows the component hierarchy, starting from the main SearchSQLite page down to the individual chart components rendered within ResultsStep.
Sources: web/src/Pages/SearchSQLite/index.jsx:130-141, web/src/Pages/SearchSQLite/components/ResultsStep.jsx:17-36, web/src/analytics/components/ActivityChart.jsx:45-50
Data Processing Flow
The process begins when the user clicks "Next" on the search step, triggering the executeSearch function. This function queries the database and, upon completion, passes the resulting messagesList to the ResultsStep component. Inside ResultsStep, the MessageDataProcessor is instantiated to analyze this data.
This sequence diagram illustrates the data flow from user interaction to the final display of analytics.
Sources: web/src/Pages/SearchSQLite/index.jsx:62-64, web/src/Pages/SearchSQLite/hooks/useMessageSearch.js:40-58, web/src/Pages/SearchSQLite/components/ResultsStep.jsx:13-15
Core Components
ResultsStep Component
This is the main component for the results view. It displays a loading message while data is being fetched and, once loaded, initializes the MessageDataProcessor and renders the analytics components.
- Props:
isLoading: A boolean to indicate if the search is in progress.messagesList: An array of message objects from the database query.startDateSelected: The start of the selected date range.endDateSelected: The end of the selected date range.
If isLoading is true, it simply returns a "Loading messages..." text. Otherwise, it proceeds to process and display the data.
Sources: web/src/Pages/SearchSQLite/components/ResultsStep.jsx:10-12
MessageDataProcessor Class
This class is the central engine for all data analysis. It takes the raw messagesList and provides methods to get structured data for charts and statistics. It uses a lazy-loading pattern, caching processed data to avoid redundant computations.
This diagram shows the MessageDataProcessor class and its relationship with the specialized processor classes it utilizes.
Sources: web/src/analytics/MessageDataProcessor.js
The processor is instantiated within ResultsStep as follows:
// web/src/Pages/SearchSQLite/components/ResultsStep.jsx:13-14
const dataProcessor = new MessageDataProcessor(messagesList, startDateSelected, endDateSelected);
const chatName = dataProcessor.chatNames[0];
Analytics Visualizations
The ResultsStep component renders three main analytics components.
StatisticsDisplay
This component shows a high-level summary of message statistics. It includes the total message count, a breakdown of message types with progress bars, and a list of key metrics.
| Metric | Description |
|---|---|
| Total messages | The total number of messages in the selected period. |
| Message Type Bars | A visual breakdown of message types (text, image, audio, etc.) as a percentage of the total. |
| First message sent on | Timestamp of the first message. |
| Last message sent on | Timestamp of the last message. |
| Longest audio lasts | Duration of the longest audio message. |
| Total audio duration | Sum of all audio message durations. |
| Average audio duration | The average duration of an audio message. |
| Longest days streak | The longest consecutive number of days with at least one message. |
| Days with at least one message | The total count of days that had messaging activity. |
Sources: web/src/analytics/components/StatisticsDisplay.jsx:45-81, web/src/analytics/processors/statisticsProcessor.js:60-84
ActivityChart
This component visualizes message activity patterns. It includes a dropdown to switch between different views.
| Chart Option | Description | Chart Type |
|---|---|---|
hourPerDay | Shows message count for each hour of the day. | ColumnCategoryChart |
dayPerWeek | Shows message count for each day of the week. | ColumnCategoryChart |
monthPerYear | Shows message count for each month of the year. | ColumnCategoryChart |
heatMapHourPerDay | A heatmap showing message density by hour and day of the week. | HeatMapChart |
Sources: web/src/analytics/components/ActivityChart.jsx:13-20, 22-43
MessagesOverTimeChart
This component displays message volume over different time frames, allowing the user to see trends.
| Time Frame Option | Description |
|---|---|
day | Shows message count per day over the selected range. |
month | Aggregates and shows message count per month. |
year | Aggregates and shows message count per year. |
Sources: web/src/analytics/components/MessagesOverTimeChart.jsx:13-17, 19-32
Summary
The "Viewing Search Results" feature provides a comprehensive and visually rich interface for analyzing WhatsApp chat data. By separating data processing (MessageDataProcessor) from presentation (ResultsStep and its children), the architecture remains modular and extensible. The use of on-demand data processing and caching ensures efficient performance, while the variety of charts and statistics offers users deep insights into their communication patterns.