\subsection{Manual Testing of UC-140-2.2: Render a time series plot in the GUI}

Rendering a time series plot (or a generic scatter plot) in the GUI requires manual testing, as this functionality is essential for effective data visualization.
This test case verifies that the plot is displayed correctly, with the expected data and formatting.

Before starting, ensure that Docker is installed on your system.

You can build and run the Docker container in the background using the following command:
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
make up
\end{minted}

If you would like to view the log output, you can also run the following command in the same terminal:
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
make logs
\end{minted}
and checks the logs output in the terminal, while executing the next steps.

The QualPipe-webapp GUI can now be accessed at \url{http://localhost/home}.
You should see the main page of the application, which features a navigation bar at the top, a sidebar on the left, and a footer at the bottom.
To test the rendering of a time series plot, navigate to the page where such a plot is expected to appear.
From the main navigation bar at the top of the window, select the \textit{LSTs} item, and a secondary navigation bar should then appear.
From this secondary bar, select the \texttt{Event rates} item (the first option on the left). A page with four plot placeholders should now be displayed.
Each placeholder should have a title shown in a badge at the top left:
\texttt{LSTs event rates plot interleaved\_pedestal\_rate},
\texttt{LSTs event rates plot interleaved\_flatfield\_rate},
\texttt{LSTs event rates plot cosmic\_rate},
\texttt{LSTs event rates plot contained\_mu-rings\_rate}.
To render the plot, you first need to specify which data you want to view. Move your mouse toward the left sidebar; it will automatically expand.
You must select four mandatory parameters for your plot: \texttt{Site}, \texttt{Date}, \texttt{Observation Block}, and \texttt{Telescope ID}.
Click on the first dropdown menu and select the \texttt{North} option for the Site (this should be pre-selected by default).
Next, click on the second dropdown menu and select the date \texttt{1st June 2025}.
The previously empty dropdown menu for \texttt{Observation Block} should now display \texttt{Select an OB}. If you click on it, it should be populated with the available Observation Block numbers for your selected date (in this case: 1, 2, 3).
You can verify this automatic update by selecting the date \texttt{2nd June 2025}, which should provide 4 and 5 as available OBs.
Return to the date \texttt{1st June 2025} and select OB number 1.
Then, click on the last dropdown menu and select the \texttt{Telescope ID} option \texttt{1}.
If you now click the \texttt{Make Plot} button, just below the last dropdown menu, the various time series plots should render correctly in the four placeholders.
If you have activated the log in the terminal, you should see log messages indicating that the data has been successfully retrieved (e.g., "\ldots HTTP/1.1" 200 OK).
The four plots should have mock titles, mock x-axis and y-axis labels (with units), and display mock data points connected by a line.

The \texttt{LSTs event rates plot interleaved\_pedestal\_rate} plot should display the following data, without any error bars:
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
x = [-2, 1, 3, 4.5, 7, 10],
y = [-40, 20, 30, 40, -20, 10]
\end{minted}

The \texttt{LSTs event rates plot interleaved\_flatfield\_rate} plot should display the following data with horizontal and vertical error bars:
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
x = [-2, 0, 2, 3.5, 6, 8, 10],
y = [-40, -30, -35, -50, -10, -20, -30],
xerr = [0.5, 0.5, 0.75, 0.5, 1, 0.5, 0.5],
yerr = [6, 5, 7, 4, 7, 5, 8]
\end{minted}

The \texttt{LSTs event rates plot cosmic\_rate} plot should display the following data with only horizontal error bars.
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
x = [-2, 0, 2, 3.5, 6, 8, 10],
y = [-40, -30, -35, -50, -10, -20, -30],
xerr = [0.5, 0.5, 0.75, 0.5, 1, 0.5, 0.5]
\end{minted}

The \texttt{LSTs event rates plot contained\_mu-rings\_rate} plot should display only vertical error bars.
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
x = [-2, 0, 2, 3.5, 6, 8, 10],
y = [-30, -20, -10, -50, -35, -30, -40],
yerr = [8, 5, 7, 4, 7, 5, 6]
\end{minted}

If you return to the left sidebar and, for example, change the Telescope ID parameter from 1 to 2, then click the \texttt{Make Plot} button again, the data should update accordingly, and the plots should reflect the new mock data for the selected option, which are the following:
The \texttt{LSTs event rates plot interleaved\_pedestal\_rate} plot should display the following data with only horizontal error bars.
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
x = [-2, 0, 2, 3.5, 6, 8, 10],
y = [-40, -30, -35, -50, -10, -20, -30],
xerr = [0.5, 0.5, 0.75, 0.5, 1, 0.5, 0.5]
\end{minted}

The \texttt{LSTs event rates plot interleaved\_flatfield\_rate} plot should display only vertical error bars.
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
x = [-2, 0, 2, 3.5, 6, 8, 10],
y = [-30, -20, -10, -50, -35, -30, -40],
yerr = [8, 5, 7, 4, 7, 5, 6]
\end{minted}

The \texttt{LSTs event rates plot cosmic\_rate} plot should display the following data, without any error bars:
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
x = [-2, 1, 3, 4.5, 7, 10],
y = [-40, 20, 30, 40, -20, 10]
\end{minted}

The \texttt{LSTs event rates plot contained\_mu-rings\_rate} plot should display the following data with horizontal and vertical error bars:
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
x = [-2, 0, 2, 3.5, 6, 8, 10],
y = [-40, -30, -35, -50, -10, -20, -30],
xerr = [0.5, 0.5, 0.75, 0.5, 1, 0.5, 0.5],
yerr = [6, 5, 7, 4, 7, 5, 8]
\end{minted}



If you now change the Telescope ID parameter from 2 to 3 (for which data is intentionally unavailable) and click the \texttt{Make Plot} button, an informative error message should appear in place of the plot placeholders and also be displayed on the sidebar.
The error message should also be visible in your browser's developer console, indicating that data for the selected parameters is not available, as well as in the terminal log (e.g., "$\ldots$HTTP/1.1" 404 Not Found).

If you then change the date parameter in the sidebar from \texttt{1st June 2025} to \texttt{3rd June 2025}, the Observation Block dropdown menu should now display \texttt{No OB available}.
If you attempt to click the \texttt{Make Plot} button in this situation, or in any other case where a required plotting parameter is missing, a clear error message will appear in red on the sidebar and in your browser's developer console.

In addition to the data points, the plots also display the criteria against which the metrics have been validated. The currently implemented criteria are allowed range intervals and thresholds.
This information is typically shown as reference lines and shaded regions on the plots, allowing users to visually compare the plotted data with the validation criteria.
The results of the criteria checks embedded in the quality metrics are also reported in a badge on the top right corner of each plot, indicating whether the data points meet the criteria.

EXTRA INFO: If you manually resize your browser window, the plots should automatically adjust their size to fit the new dimensions.
If you resize the window to a very small size, the plots and their placeholders will automatically reorganize themselves to fit, stacking vertically if necessary, but the plots should still render correctly.
The content of the navigation bar should also automatically adapt to the new window size.
When the window is resized to a very small width, both navigation bars should collapse into two independent buttons. Clicking on these buttons will display dropdown menus with the respective navigation bar content, allowing you to access all options.

Once you have completed all your checks, you can stop the log in your terminal by simply terminating the last process with \texttt{Ctrl+C}.

To turn off the container then execute the command:
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
make down
\end{minted}

To stop the container, you can use the command:
\begin{minted}[fontsize=\scriptsize, breaklines]{bash}
make down
\end{minted}

\ManualTestCase{UC-140-2.2}{passed}{Tested manually the rendering plot functionalities in the GUI. Details are provided in the manual testing section.}
