Add the fit evaluation graphs on the frontend.

AhmedBasem20 · AhmedBasem20 · commit f4f5ac588ace · 2024-08-14T04:52:23.000+03:00
diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
@@ -46,9 +46,14 @@ jobs:
         with:
           name: 'Data'
 
+      - name: Run the test that generates the plots report.
+        run: |
+          pytest tests/IVIMmodels/unit_tests/test_ivim_fit.py
+
       - name: move data to the dashboard folder
         run: |
           mv test_output.csv website/dashboard
+          mv test_results_report.json website/dashboard
 
       - name: Build documentation
         run: |
diff --git a/tests/IVIMmodels/unit_tests/test_ivim_fit.py b/tests/IVIMmodels/unit_tests/test_ivim_fit.py
@@ -88,7 +88,7 @@ def to_list_if_needed(value):
         test_result['status'] = "XFAILED"
 
     test_results.append(test_result)
-    with open('plots_data.json', 'w') as f:
+    with open('test_results_report.json', 'w') as f:
             json.dump({"results": test_results, "rtol": tolerances["rtol"],
         "atol": tolerances["atol"], }, f, indent=4)
     npt.assert_allclose(data['f'], f_fit, rtol=tolerances["rtol"]["f"], atol=tolerances["atol"]["f"])
diff --git a/website/dashboard/index.html b/website/dashboard/index.html
@@ -9,6 +9,7 @@
   <script src="https://cdn.plot.ly/plotly-2.30.0.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
   <script src="index.js"></script>
+  <script src="test_plots.js"></script>
   <link rel="stylesheet" href="index.css">
 </head>
 <body>
@@ -96,6 +97,12 @@ <h1 class="bar-title">IVIM MRI Algorithm Fitting Dashboard</h1>
       <div class="chart-card" id="regionDiv">
         <!-- New chart will be rendered here -->
       </div>
+      <h1>Validation Data Plots</h1>
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <div class="chart-card" id="plot_f_fit" "></div>
+      <div class="chart-card" id="plot_Dp_fit" "></div>
+      <div class="chart-card" id="plot_D_fit" "></div>
+      </div>
 
       
     </main>
diff --git a/website/dashboard/test_plots.js b/website/dashboard/test_plots.js
@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('test_results_report.json')
+        .then(response => response.json())
+        .then(data => {
+            var rtol = data['rtol']
+
+            var atol = data['atol']
+
+            function createPlot(container, parameter, rtol_value, atol_value) {
+                var reference_values = data['results'].map(d => d[parameter]); // Assuming fit values are the reference
+                var fit_values = data['results'].map(d => d[parameter + '_fit']);
+                var errors = fit_values.map((d, i) => d - reference_values[i]);
+
+                var tolerance = reference_values.map(d => atol_value + rtol_value * d);
+                var negative_tolerance = reference_values.map(d => -(atol_value + rtol_value * d));
+
+                var scatter_trace = {
+                    x: reference_values,
+                    y: errors,
+                    mode: 'markers',
+                    type: 'scatter',
+                    name: parameter.toUpperCase() + ' Fit Errors'
+                };
+
+                var tolerance_trace = {
+                    x: reference_values,
+                    y: tolerance,
+                    mode: 'lines',
+                    type: 'scatter',
+                    line: { dash: 'dash', color: 'red' },
+                    name: 'Positive Tolerance'
+                };
+
+                var negative_tolerance_trace = {
+                    x: reference_values,
+                    y: negative_tolerance,
+                    mode: 'lines',
+                    type: 'scatter',
+                    line: { dash: 'dash', color: 'green' },
+                    name: 'Negative Tolerance'
+                };
+
+                var layout = {
+                    title: `Error Plot for ${parameter.toUpperCase()}_fit with Tolerance Bands`,
+                    xaxis: { title: `Reference ${parameter.toUpperCase()} Values` },
+                    yaxis: { title: `Error (${parameter}_fit - Reference ${parameter})` }
+                };
+
+                var plot_data = [scatter_trace, tolerance_trace, negative_tolerance_trace];
+
+                Plotly.newPlot(container, plot_data, layout);
+            }
+
+            createPlot('plot_f_fit', 'f', rtol.f, atol.f);
+            createPlot('plot_Dp_fit', 'Dp', rtol.Dp, atol.Dp);
+            createPlot('plot_D_fit', 'D', rtol.D, atol.D);
+        });
+});
