Comparing Scores

Relevant source files

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

• src/components/comparison-dialog.tsx
• src/components/ScoreHistory.tsx
• src/lib/cvss/metrics-data.ts
• src/lib/cvss/v3/scoring.ts
• src/lib/cvss/types.ts
• README.md

The "Comparing Scores" feature provides users with a side-by-side analysis of CVSS scores that have been saved to the Score Manager. This functionality is designed to help users track changes in vulnerability assessments, understand the impact of different metric choices, and compare assessments across different CVSS versions.

The primary interface for this feature is the ComparisonDialog, which is launched from the ScoreManager. It offers a high-level summary for any number of selected scores and a detailed, color-coded metric-level difference analysis when exactly two scores of the same major CVSS version are compared.

Sources: src/components/comparison-dialog.tsx, src/components/ScoreHistory.tsx, README.md:50-52

Architecture and Components

The score comparison functionality is orchestrated by two main React components, ScoreManager and ComparisonDialog, which work together to provide the user experience.

Sources: src/components/ScoreHistory.tsx, src/components/comparison-dialog.tsx

Component Interaction

The diagram below illustrates the relationship between the user, the ScoreManager, and the ComparisonDialog.

This diagram shows the flow from user selection in the ScoreManager to the ComparisonDialog rendering the final analysis.

Sources: src/components/ScoreHistory.tsx:173-176, src/components/comparison-dialog.tsx:28-32

Key Components

Component	Description	File
ScoreManager	Manages the list of all saved CVSS scores. It handles user selections and contains the "Compare" button that triggers the ComparisonDialog.	src/components/ScoreHistory.tsx
ComparisonDialog	A modal dialog that receives selected score entries and renders the comparison view. It contains the logic for both high-level summaries and detailed metric-level diffing.	src/components/comparison-dialog.tsx

Sources: src/components/ScoreHistory.tsx:501-784, src/components/comparison-dialog.tsx:26-280

Data Flow and Comparison Logic

The process of comparing scores begins with user selection in the ScoreManager and flows through several logical checks within the ComparisonDialog to determine what information to display.

The following flowchart outlines the core logic:

1. User Selection and Invocation

1. In the ScoreManager component, the user selects checkboxes next to the scores they wish to compare. The IDs of these scores are stored in the selectedIds state.
2. The "Compare" button, which is enabled only when two or more scores are selected (selectedCount >= 2), is clicked.
3. This action sets the isCompareDialogOpen state to true, which renders the ComparisonDialog component.
4. The ComparisonDialog receives the selected ScoreHistoryEntry objects via the selectedEntries prop.

Sources: src/components/ScoreHistory.tsx:173-176, src/components/ScoreHistory.tsx:501-512, src/components/ScoreHistory.tsx:714-726

2. Version Check

The dialog first determines if a detailed metric comparison is possible. The is_same_version memoized value checks two conditions:

1. Exactly two entries are selected.
2. The major version number of both entries is the same (e.g., 3.0 and 3.1 are comparable, but 3.1 and 4.0 are not).

This is done by splitting the version string by . and comparing the first part.

Sources: src/components/comparison-dialog.tsx:114-126

3. ScoreHistoryEntry Data Structure

The comparison logic operates on an array of ScoreHistoryEntry objects. This is the fundamental data structure for a saved score.

Field	Type	Description	Source
id	string	A unique identifier for the entry.	src/lib/cvss/types.ts:409-411
name	string	A user-provided name for the score.	src/components/ScoreHistory.tsx:492-494
timestamp	Date / string	The date and time the score was saved.	src/lib/cvss/types.ts:412-414
version	CVSSVersion	The CVSS version (e.g., 4.0, 3.1).	src/lib/cvss/types.ts:415-417
score	number	The calculated final score.	src/lib/cvss/typests:421-423
severity	SeverityRating	The qualitative severity rating (e.g., High).	src/lib/cvss/types.ts:424-426
vectorString	string	The CVSS vector string representing the metrics.	src/lib/cvss/types.ts:418-420

Sources: src/lib/cvss/types.ts:407-429, src/components/ScoreHistory.tsx

Metric Difference Analysis

When two scores of the same major version are compared, the system performs a detailed analysis to identify and display the exact metric changes.

Calculating Differences

The core logic resides in the getMetricDifferences callback. This function is responsible for parsing the vector strings and comparing the resulting metric objects.

The following sequence diagram shows the process:

The process is as follows:

1. The vectorString for each of the two scores is passed to vectorParser.parseVector.
2. The parser, such as the one for v3.x, splits the string by / and then by : to create a key-value metrics object.
3. A Set of all unique metric keys from both objects is created to ensure all changes are captured.
4. The function iterates over this set, comparing the values for each key in the two metric objects.
5. If the values differ, an object containing the metric key, the first value, and the second value is added to a differences array.

Sources: src/components/comparison-dialog.tsx:128-161, src/lib/cvss/v3/scoring.ts:449-487

Displaying Differences

The calculated differences are rendered in a table with human-readable labels.

• Metric Labels: The getMetricLabel function converts a metric key (e.g., AV) into its full name (e.g., Attack Vector (AV)) by looking it up in the appropriate metric data structure from cvss-metrics-data.ts.
• Value Labels: Similarly, getMetricValueLabel converts a metric value (e.g., N) into its descriptive label (e.g., Network (N)).
• Highlighting: To visually distinguish the changes, the value from the first score is styled with a red background, and the value from the second score is styled with a green background.

Sources: src/components/comparison-dialog.tsx:55-112, src/components/comparison-dialog.tsx:241-249, src/lib/cvss/metrics-data.ts

UI Scenarios

The ComparisonDialog presents different views based on the number and type of scores being compared.

Scenario 1: Comparing Two Scores (Same Major Version)

This is the most detailed view.

• Summary Cards: Two cards are displayed at the top, each showing the key details of one score.
• Metric Differences Table: A table is rendered below the cards, listing only the metrics that have changed between the two scores.

Metric Differences Table Structure

Column	Description
Metric	The human-readable name of the changed metric.
Score 1	The value of the metric for the first score, highlighted in red.
Score 2	The value of the metric for the second score, highlighted in green.

Sources: src/components/comparison-dialog.tsx:189-258

Scenario 2: Comparing Two Scores (Different Major Versions)

When scores use different major versions (e.g., v3.1 vs. v4.0), a metric-level comparison is not meaningful.

• The two summary cards are still displayed.
• A note is shown explaining that metric-level comparison is only available for scores of the same major version.

Sources: src/components/comparison-dialog.tsx:260-266

Scenario 3: Comparing More Than Two Scores

When more than two scores are selected, the UI provides a simple tip.

• No summary cards or difference tables are shown.
• A message is displayed informing the user that detailed comparison is only available when exactly two scores are selected.

Sources: src/components/comparison-dialog.tsx:268-274

Conclusion

The "Comparing Scores" feature is an integral part of the ScoreManager, providing powerful analytical capabilities. By handling multiple comparison scenarios gracefully, it allows users to either get a quick overview of several assessments or dive deep into a one-on-one comparison. The logic to parse vector strings, identify differences, and map technical metric keys to human-readable labels makes it a highly effective tool for understanding the evolution and impact of vulnerability assessments.

Sources: src/components/comparison-dialog.tsx, src/components/ScoreHistory.tsx