diff --git a/docs/img/webapp_compare_models_merge_plots.png b/docs/img/webapp_compare_models_merge_plots.png index c6df26b7..fafdbba9 100644 Binary files a/docs/img/webapp_compare_models_merge_plots.png and b/docs/img/webapp_compare_models_merge_plots.png differ diff --git a/docs/img/webapp_compare_models_merge_plots_dark.png b/docs/img/webapp_compare_models_merge_plots_dark.png index e7e5b80b..bf70aa7c 100644 Binary files a/docs/img/webapp_compare_models_merge_plots_dark.png and b/docs/img/webapp_compare_models_merge_plots_dark.png differ diff --git a/docs/img/webapp_compare_models_variant_plots.png b/docs/img/webapp_compare_models_variant_plots.png new file mode 100644 index 00000000..1cc03ba2 Binary files /dev/null and b/docs/img/webapp_compare_models_variant_plots.png differ diff --git a/docs/img/webapp_compare_models_variant_plots_dark.png b/docs/img/webapp_compare_models_variant_plots_dark.png new file mode 100644 index 00000000..6daa4de3 Binary files /dev/null and b/docs/img/webapp_compare_models_variant_plots_dark.png differ diff --git a/docs/webapp/webapp_model_comparing.md b/docs/webapp/webapp_model_comparing.md index 38a68eb8..1eb188ec 100644 --- a/docs/webapp/webapp_model_comparing.md +++ b/docs/webapp/webapp_model_comparing.md @@ -23,8 +23,10 @@ it from the comparison. You can add/remove models to your comparison: 1. Click the `+` button in any of the comparison tabs. This opens up a window with a model table with the currently compared models at the top. + ![Adding models](../img/webapp_compare_model_select_2.png#light-mode-only) -![Adding models](../img/webapp_compare_model_select_2_dark.png#dark-mode-only) + ![Adding models](../img/webapp_compare_model_select_2_dark.png#dark-mode-only) + 1. Find the models to add by sorting and [filtering](webapp_model_table.md#filtering-columns) the models with the appropriate column header controls. Alternatively, use the search bar to find models by name. 1. Select models to include in the comparison (and/or clear the selection of any models you wish to remove). @@ -57,7 +59,7 @@ information is displayed in a column, so each field is lined up side-by-side. The model on the left is used as the base model, to which the other models are compared. You can set a new base model in one of the following ways: -* Hover and click Switch base task +* Hover and click Switch base model on the model that will be the new base. * Hover and click Pan icon on the new base model and drag it all the way to the left @@ -82,16 +84,25 @@ Switch on the **Show row extremes** toggle to highlight each variant's maximum a ![side-by-side scalar comparison](../img/webapp_compare_models_scalar_table_dark.png#dark-mode-only) -### Graphic Comparison -The **Scalars** (Graph view) and **Plots** tabs display plots attached to the models. The **Scalars** tab compares -scalar values as time series line charts. The **Plots** tab compares the last reported iteration sample of each -metric/variant combination per compared model. +### Plot Comparison +The **Scalars** (Graph view) and **Plots** tabs display plots attached to the models. -Line, scatter, box, and bar graphs are compared by a single plot per metric/variant into which the plots of all compared -models are combined. +The **Scalars** tab compares scalar values as time series line charts. The **Plots** tab compares the last reported +iteration sample of each metric/variant combination per compared model. -![Merged plots](../img/webapp_compare_models_merge_plots.png#light-mode-only) -![Merged plots](../img/webapp_compare_models_merge_plots_dark.png#dark-mode-only) +Line, scatter, box, and bar graphs are compared by overlaying each metric/variant from all compared models' into a single +comparative plot. + +For overlaid plots, use **Group by** to select how to group plots: +* **Metric** - All variants for a metric appear on the same plot. + + ![Scalar plot grouped by metric](../img/webapp_compare_models_merge_plots.png#light-mode-only) + ![Scalar plot grouped by metric](../img/webapp_compare_models_merge_plots_dark.png#dark-mode-only) + +* **Metric+Variant** (default) - Every variant appears on its own plot. + + ![Scalar plot grouped by metric and variant](../img/webapp_compare_models_variant_plots.png#light-mode-only) + ![Scalar plot grouped by metric and variant](../img/webapp_compare_models_variant_plots_dark.png#dark-mode-only) Other plot types are displayed separately for each model.