UI Components Overview

Relevant source files

The following files were used as context for generating this wiki page:

• web/src/Pages/SearchSQLite/components/StepNavigation.jsx
• web/src/analytics/components/charts/columnDateChart.jsx
• web/src/analytics/components/charts/heatMapChart.jsx
• web/src/Pages/SearchSQLite/index.jsx
• web/src/analytics/components/StatisticsDisplay.jsx
• web/src/analytics/components/ActivityChart.jsx
• web/src/Pages/SearchSQLite/components/UploadStep.jsx
• web/src/Pages/SearchSQLite/components/SearchStep.jsx
• web/src/Pages/SearchSQLite/components/ResultsStep.jsx
• web/src/analytics/MessageDataProcessor.js
• web/src/analytics/components/MessagesOverTimeChart.jsx

The web application for WhatsApp Chat Analytics is a client-side tool built with React. It provides a user-friendly interface for uploading, searching, and visualizing WhatsApp chat data locally in the browser. The UI is structured around a multi-step wizard that guides the user through the process, culminating in a results page with interactive charts and detailed statistics.

The core UI technology stack includes React for component-based architecture, rsuite for pre-built UI components like pickers and navigation steps, and amCharts5 for sophisticated and interactive data visualizations. All data processing and rendering happen within the user's browser, ensuring that private chat data is never sent to a server.

Sources: README.md:11-15, web/package.json:5-22, web/public/index.html:20

Search SQLite Wizard

The primary user workflow is managed by the SearchSQLite component, which implements a three-step wizard for chat analysis. This component manages the application's state, including the current step, uploaded files, and search parameters.

Sources: web/src/Pages/SearchSQLite/index.jsx:14-16

The following diagram illustrates the user flow through the wizard's steps.

Wizard State Management

The main SearchSQLite component uses React hooks (useState) to manage the application's state.

• step: Tracks the current step in the wizard (UPLOAD, SEARCH, RESULTS).
• useFileUpload: A custom hook to manage the state for the messages database (msgstore.db) and the chats list (model-storage-chat.json).
• useMessageSearch: A custom hook that encapsulates the logic and state for search filters (date range, media type, etc.) and the resulting message list.

Sources: web/src/Pages/SearchSQLite/index.jsx:15-53

Step 1: Upload Files (UploadStep.jsx)

This is the initial step where the user uploads the necessary files for analysis. The UI consists of two drag-and-drop upload areas.

• Messages Database: Accepts the msgstore.db file.
• Contacts File: Accepts the model-storage-chat.json file.

The component uses the Uploader from the rsuite library, configured to prevent auto-upload and accept only the specified file types (.db or .json). The main page validates that both files are present before allowing the user to proceed to the next step.

Sources: web/src/Pages/SearchSQLite/components/UploadStep.jsx, web/src/Pages/SearchSQLite/index.jsx:61-64

Step 2: Search & Filter (SearchStep.jsx)

Once files are uploaded, the user can define search criteria to filter the messages. This step uses several rsuite components to provide filtering options.

Component	Library	Purpose
DateRangePicker	rsuite	Select a start and end date for the search. The selectable range is determined by the first and last message dates in the database.
CheckPicker	rsuite	Filter messages by media type (e.g., image, video, audio).
SelectPicker	rsuite	Filter by message direction (sent, received, or both).
SelectPicker	rsuite	Select a specific chat to analyze. If left empty, all chats are included.

Sources: web/src/Pages/SearchSQLite/components/SearchStep.jsx:12-80

Step 3: View Results (ResultsStep.jsx)

This is the final step where the analysis results are displayed. It instantiates a MessageDataProcessor with the filtered messages and then passes the processed data to various analytical UI components.

The component hierarchy for displaying results is as follows:

Analytics & Visualization Components

The results page is composed of several specialized React components designed to visualize different aspects of the chat data. These components rely on the MessageDataProcessor class to get structured data for rendering.

StatisticsDisplay.jsx

This component renders a high-level summary of the chat statistics. It is divided into two main sections:

1. Message Type Distribution: Shows the count and percentage of different message types (text, image, audio, etc.) using progress bars. The types are defined in analytics/constants.js.
2. Main Statistics: A list of key metrics.

The following statistics are displayed:

Statistic	Description
Total messages	The total count of messages in the selection.
First message sent on	The timestamp of the earliest message.
Last message sent on	The timestamp of the latest message.
Longest audio lasts	The duration of the longest audio message.
Total audio duration	The sum of all audio message durations.
Average audio duration	The average duration of audio messages.
Longest days streak	The longest consecutive number of days with at least one message.
Days with at least one message	The total number of unique days that have messages.

Sources: web/src/analytics/components/StatisticsDisplay.jsx:14-100, web/src/analytics/constants.js:6-19, web/src/analytics/processors/statisticsProcessor.js

ActivityChart.jsx

This component acts as a container for visualizing message activity patterns. It uses a SelectPicker to allow the user to switch between different views. Based on the user's selection, it conditionally renders either a ColumnCategoryChart or a HeatMapChart.

The available chart options are:

• Hour per day
• Day per week
• Month per year
• Heat Map hour per day

Sources: web/src/analytics/components/ActivityChart.jsx:12-49

MessagesOverTimeChart.jsx

This component is dedicated to showing message volume over time. It uses a SelectPicker to change the time granularity (day, month, year) and renders the data using the ColumnDateChart component.

The data for the selected time frame is fetched from the MessageDataProcessor.

Sources: web/src/analytics/components/MessagesOverTimeChart.jsx:11-44, web/src/analytics/MessageDataProcessor.js:41-75

Core Chart Implementations (amCharts5)

The actual charts are implemented as separate components using the amCharts5 library.

ColumnDateChart.jsx

This component is used to display time-series data, such as messages per day, month, or year.

• Axes: It uses a DateAxis for the x-axis and a ValueAxis for the y-axis.
• Series: A ColumnSeries is used to render the data as columns.
• Interactivity: It includes a XYCursor for tooltips and an XYChartScrollbar with a preview of the entire dataset, allowing the user to zoom and pan across the time range. The scrollbar grips display the selected start and end dates.

Sources: web/src/analytics/components/charts/columnDateChart.jsx

HeatMapChart.jsx

This component visualizes message density across days of the week and hours of the day.

• Axes: It uses two CategoryAxis instances: one for the day of the week (y-axis) and one for the hour (x-axis).
• Series: A ColumnSeries is used where each column represents an hour-of-day/day-of-week cell.
• Heat Rules: The color of each cell is determined by a heatRules configuration, which maps the message count (value) to a color gradient from yellow (low) to red (high).
• Legend: A HeatLegend is displayed at the bottom of the chart to indicate the value-to-color mapping.

Sources: web/src/analytics/components/charts/heatMapChart.jsx, web/src/analytics/processors/heatmapProcessor.js

ColumnCategoryChart.jsx

This component is used for displaying data grouped by a non-date category, such as messages per hour of the day.

• Axes: It uses a CategoryAxis for the x-axis (e.g., hours '00' through '23') and a ValueAxis for the y-axis (message count).
• Series: A ColumnSeries renders the data.
• Heat Rules: Like the heatmap, it uses heatRules to color the columns based on their value, providing an immediate visual cue for activity levels.

Sources: web/src/analytics/components/charts/columnCategoryChart.jsx

Conclusion

The UI of the WhatsApp Chat Analytics tool is a well-structured React application that effectively leverages specialized libraries for its interface and data visualization needs. The wizard-based approach simplifies the process of loading and filtering data, while the modular analytics components provide rich, interactive insights into the user's chat history. The reliance on rsuite and amCharts5 allows for a feature-rich user experience that runs entirely on the client side, prioritizing user privacy.