Model Test Results Summary Heatmap and Filtering

In v3.3.2-hotfix3, the ability to filter all tables/charts/graphs within a model test result was added. This

allows a user to filter all of the tables and charts within the page, based on a given filter.

Setup:

To enable this feature, structure the Model Test Result JSON with consistent segment identifiers across all data components. The system will automatically populate dropdown filters by detecting:

Tables containing filterable columns (e.g., "Segment," "Region")
Charts with multiple data series, where each key represents a segment

These dropdown filters will appear at the top of the Model Test Results page( i.e. https://${MOC_URL}/#/models/business-models/snapshot/${SNAPSHOT_ID}/monitoring/tests/${TEST_RESULT_ID})

Example Test Data Structure

{
  // Time series data example (detected as chart data)
  "performance_metrics": {
    "title": "Performance Metrics Over Time",
    "data": {
      "Overall": [['2024-02-27', 0.0894], ['2024-02-28', 0.0901], ['2024-02-29', 0.0887]],
      "Segment_1": [['2024-02-27', 0.0894], ['2024-02-28', 0.0901], ['2024-02-29', 0.1887]],
      "Segment_2": [['2024-02-27', 0.0894], ['2024-02-28', 0.0901], ['2024-02-29', 0.1015]],
      "Segment_4": [['2024-02-27', 0.0894], ['2024-02-28', 0.0901], ['2024-02-29', 0.0405]],,
      "Segment_5": [['2024-02-27', 0.0894], ['2024-02-28', 0.0901], ['2024-02-29', 0.0590]],
    },
    "x_axis_label": "Date",
    "y_axis_label": "RMSE"
  },
  
  // Tabular data example (detected as filterable table)
  "customer_segments": [
    { "Segment": "Segment_1", "Region": "North", "Customers": 1245, "RMSE": 0.1191, "R2_Score": 0.9173 },
    { "Segment": "Segment_2", "Region": "South", "Customers": 2150, "RMSE": 0.1024, "R2_Score": 0.9247 },
    { "Segment": "Segment_4", "Region": "West", "Customers": 1550, "RMSE": 0.0412, "R2_Score": 0.9812 },
    { "Segment": "Segment_5", "Region": "North", "Customers": 1690, "RMSE": 0.0598, "R2_Score": 0.9654 }
  ]
}

Dropdown Values From Example Data:

Using the example data above, the "Filter Tables" dropdown values would be:

Segment, Region, Customers, RMSE, and R2_score

The “Filter Charts” dropdown values would be:

Overall, Segment_1, Segment_2, Segment_3, Segment_4, and Segment_5

If the user selects “Region”, from the “Filter Tables” dropdown, the values “North”, “South”, and “West” get appended to the “Filter Charts” dropdown resulting in the final dropdown values being:

North, South, West, Overall, Segment_1, Segment_2, Segment_3, Segment_4, and Segment_5

How to Use Filters:

1. Filtering Tables

Tables require a two-step selection: column name → Column value.

Steps:

Select a Column:
- Click the "Filter Tables" dropdown.
- Choose a column (e.g., "Region" or "Segment").
Select Values:
- The "Filter Charts" dropdown will update to include all unique values from the selected column.
- Select one or more values (e.g., "North" or both "Segment_1" and "Segment_2").

Example:

To view all of the Heat maps “Green” outcomes you can:
- Filter Tables → Select "Outcome" → Charts → Select "GREEN".
- This will apply those filters individually to all of our data tables containing those column names and values

2. Filtering Charts/Graphs

Charts/graphs only require selecting the chart keys directly.

Steps:

Click the "Filter Charts" dropdown.
Select the keys you want to display (e.g., "Overall" or "Segment_1").

Example:

To compare "Segment_1" and "Segment_2" in charts:
- Filter Charts → Select both "Segment_1" and "Segment_2".

Key Notes

If a table or chart does not contain the selected column (for tables) or key (for charts), filtering will be skipped for that component.
Filters apply globally to all tables/charts on the page. The filters for an individual chart can still be altered independently of the global filter.
The Filter Charts dropdown can be used to filter both tables and charts in the same context. (e.g., filter tables by "Segment" while filtering charts by "Segment_1" and “Segment_2”. This will filter both the Charts and Tables to only show results for “Segment_1” and “Segment_2”
The Filter Charts dropdown can be used to filter in two different contexts at the same time (e.g., filter tables by "Region" while filtering charts by "Segment" by selecting “North” and “Segment_1” from the Chart dropdown).