Compound performance plot layout

f1_visualization/plotly_dash/layout.py

@@ -225,6 +225,104 @@ def lap_numbers_slider(slider_id: str, **kwargs) -> dcc.RangeSlider:
     label="Distribution Plot",
 )
 
+compound_plot_explanation = dbc.Alert(
+    [
+        html.H4("Methodology", className="alert-heading"),
+        html.P(
+            "The metric behind this graph is delta to lap representative time (DLRT). "
+            "It is a measure of how good a lap time is compared to other cars on track "
+            "at the same time, thus accounting for fuel load and track evolution."
+        ),
+        html.Hr(),
+        html.P(
+            "Since this metric is relative, this plot is best used for understanding "
+            "how different compounds degrade at different rates."
+        ),
+    ],
+    color="info",
+    dismissable=True,
+)
+
+compound_plot_caveats = dbc.Alert(
+    [
+        html.H4("Caveats", className="alert-heading"),
+        html.P(
+            "The above driver selection does not apply to this plot. "
+            "This plot always considers laps driven by all drivers."
+        ),
+        html.Hr(),
+        html.P(
+            "Tyre life does not always correspond to stint length. "
+            "As the same tyre may have been used in qualifying sessions."
+        ),
+        html.Hr(),
+        html.P("Only compounds that completed at least one sixth of all laps are shown."),
+        html.Hr(),
+        html.P(
+            "For each compound, the range of shown tyre life is limited by "
+            "the number of drivers who complete a stint of that length. This is to avoid "
+            "the plot being stretched by one driver doing a very long stint."
+        ),
+    ],
+    color="info",
+    dismissable=True,
+)
+
+compound_plot_tab = dbc.Tab(
+    dbc.Card(
+        dbc.CardBody(
+            [
+                compound_plot_explanation,
+                compound_plot_caveats,
+                html.Br(),
+                dbc.Row(
+                    [
+                        dbc.Col(
+                            dcc.Dropdown(
+                                options=["lineplot", "boxplot", "violinplot"],
+                                value="lineplot",
+                                clearable=False,
+                                placeholder="Select a plot type",
+                                id="compound-type",
+                            ),
+                            width=6,
+                        ),
+                        dbc.Col(
+                            dcc.Dropdown(
+                                options=[
+                                    {"label": "Show as seconds", "value": True},
+                                    {"label": "Show as percentage", "value": False},
+                                ],
+                                value=True,
+                                clearable=False,
+                                placeholder="Select a unit",
+                                id="compound-unit",
+                            ),
+                            width=6,
+                        ),
+                    ]
+                ),
+                html.Br(),
+                dbc.Row(
+                    dcc.Loading(
+                        dcc.Dropdown(
+                            options=[],
+                            value=[],
+                            placeholder="Select compounds",
+                            disabled=True,
+                            multi=True,
+                            id="compounds",
+                        )
+                    )
+                ),
+                html.Br(),
+                dbc.Row(dcc.Loading(dcc.Graph(id="compound-plot"))),
+            ]
+        )
+    ),
+    label="Compound Performance Plot",
+)
+
 external_links = dbc.Alert(
     [
         "All data provided by ",
@@ -267,7 +365,9 @@ def lap_numbers_slider(slider_id: str, **kwargs) -> dcc.RangeSlider:
         html.Br(),
         add_gap_row,
         html.Br(),
-        dbc.Tabs([strategy_tab, scatterplot_tab, lineplot_tab, distplot_tab]),
+        dbc.Tabs(
+            [strategy_tab, scatterplot_tab, lineplot_tab, distplot_tab, compound_plot_tab]
+        ),
         html.Br(),
         dbc.Row(external_links),
     ]