♻️ merge main into branch

requirements.txt

@@ -6,3 +6,4 @@ plotly~=5.22.0
 pandas~=2.1.3
 numpy~=1.26.2
 jinja2~=3.1.4
+regex~=2024.5.15

tracex_project/db_results/forms.py

@@ -1,9 +1,10 @@
 """Implementation of forms for the database result app."""
+from typing import List, Tuple, Any
+
 from django import forms
 from django.utils.safestring import mark_safe
-
-from extraction.models import PatientJourney
 from extraction.models import Cohort
+from extraction.models import PatientJourney
 from tracex.forms import BaseEventForm
 
 
@@ -19,7 +20,7 @@ def __init__(self, *args, **kwargs):
             "selected_patient_journey"
         ].choices = self.get_patient_journey_choices()
 
-    def get_patient_journey_choices(self):
+    def get_patient_journey_choices(self) -> List[Tuple[str, str]]:
         """Retrieves the available patient journey choices with existing metrics from the database."""
         patient_journeys = PatientJourney.manager.filter(
             trace__events__metrics__isnull=False
@@ -89,7 +90,7 @@ def __init__(self, *args, **kwargs):
         self.fields["sex"].choices = self.get_choices("sex")
 
     @staticmethod
-    def get_choices(category):
+    def get_choices(category: str) -> List[Tuple[Any, Any]]:
         """Get all choices available in the database for a given category."""
         choices = Cohort.manager.values_list(category, flat=True).distinct()
         none_info_text = mark_safe("<i>Include elements with None values</i>")

tracex_project/db_results/static/db_results/js/filter_toggle.js

@@ -1,60 +1,50 @@
 $(document).ready(function () {
-    $("#toggleButton1").click(function () {
-        $("#contentWrapper1").toggle();
-    });
+    // Toggle visibility for multiple elements
+    setupToggleButton('#toggleButton1', '#contentWrapper1');
+    setupToggleButton('#toggleButton2', '#contentWrapper2');
+
+    // Setup age range slider
+    setupAgeSlider();
+
+    // Setup checkbox toggles for multiple groups
+    setupCheckboxToggle('#toggleAll', '.origin-checkbox input[type="checkbox"]');
+    setupCheckboxToggle('#togglesex', 'input[name="sex"]');
+    setupCheckboxToggle('#toggleCondition', 'input[name="condition"]');
+    setupCheckboxToggle('#togglePreexistingCondition', 'input[name="preexisting_condition"]');
+});
 
-    $("#toggleButton2").click(function () {
-        $("#contentWrapper2").toggle();
+function setupToggleButton(buttonSelector, contentSelector) {
+    $(buttonSelector).click(function () {
+        $(contentSelector).toggle();
     });
+}
 
+function setupAgeSlider() {
     const ageSlider = document.getElementById('age-slider');
     const minAgeField = document.getElementById('min-age');
     const maxAgeField = document.getElementById('max-age');
 
-    const minAgeInitial = minAgeField.value || 0;
-    const maxAgeInitial = maxAgeField.value || 100;
-
-    const ageValues = [minAgeInitial, maxAgeInitial];
-
     noUiSlider.create(ageSlider, {
-        start: ageValues,
+        start: [minAgeField.value || 0, maxAgeField.value || 100],
         connect: true,
         range: {
             'min': 0,
             'max': 100
         }
     });
 
-    minAgeField.addEventListener('change', function () {
-        ageSlider.noUiSlider.set([this.value, null]);
-    });
-    maxAgeField.addEventListener('change', function () {
-        ageSlider.noUiSlider.set([null, this.value]);
-    });
-
-    ageSlider.noUiSlider.on('update', function (values, handle) {
+    ageSlider.noUiSlider.on('update', function (values) {
         minAgeField.value = Math.round(values[0]);
         maxAgeField.value = Math.round(values[1]);
     });
 
-    document.getElementById('toggleAll').addEventListener('change', function() {
-        const checkboxes = document.querySelectorAll('.origin-checkbox input[type="checkbox"]');
-        checkboxes.forEach(checkbox => {
-            checkbox.checked = this.checked;
-        });
-    });
-    document.getElementById('togglesex').addEventListener('change', function () {
-        const checkboxes = document.querySelectorAll('input[name="sex"]');
-        checkboxes.forEach(checkbox => checkbox.checked = this.checked);
-    });
-
-    document.getElementById('toggleCondition').addEventListener('change', function () {
-        const checkboxes = document.querySelectorAll('input[name="condition"]');
-        checkboxes.forEach(checkbox => checkbox.checked = this.checked);
-    });
+    minAgeField.addEventListener('change', () => ageSlider.noUiSlider.set([minAgeField.value, null]));
+    maxAgeField.addEventListener('change', () => ageSlider.noUiSlider.set([null, maxAgeField.value]));
+}
 
-    document.getElementById('togglePreexistingCondition').addEventListener('change', function () {
-        const checkboxes = document.querySelectorAll('input[name="preexisting_condition"]');
-        checkboxes.forEach(checkbox => checkbox.checked = this.checked);
+function setupCheckboxToggle(toggleSelector, checkboxSelector) {
+    document.querySelector(toggleSelector).addEventListener('change', function() {
+        document.querySelectorAll(checkboxSelector)
+               .forEach(checkbox => checkbox.checked = this.checked);
     });
-});
+}

tracex_project/db_results/static/db_results/js/metrics-dashboard.js

@@ -1,40 +1,72 @@
+// Constants for color thresholds and descriptions
+const GREEN_THRESHOLD = 0.7;
+const ORANGE_THRESHOLD = 0.5;
+const COLORS = {
+  GREEN: 'green',
+  ORANGE: 'orange',
+  RED: 'red'
+};
+
+// Constants for content matching
+const CONTENT_MATCH = {
+  HIGH_RELEVANCE: 'High Relevance',
+  TRUE: 'True',
+  LOW_RELEVANCE: 'Low Relevance',
+  FALSE: 'False'
+};
+
+// Helper function to set the tile color based on predefined color rules.
+function setTileColor(tile, color) {
+  tile.style.backgroundColor = color;
+}
+
+// Updates the tile color based on the average time correctness ratio.
 function updateAvgTimeCorrTileColor(ratio, tile) {
-    if (ratio >= 0.7) {
-      tile.style.backgroundColor = 'green';
-    } else if (ratio >= 0.5) {
-      tile.style.backgroundColor = 'orange';
-    } else {
-      tile.style.backgroundColor = 'red';
-    }
+  if (ratio >= GREEN_THRESHOLD) {
+    setTileColor(tile, COLORS.GREEN);
+  } else if (ratio >= ORANGE_THRESHOLD) {
+    setTileColor(tile, COLORS.ORANGE);
+  } else {
+    setTileColor(tile, COLORS.RED);
   }
+}
 
+// Updates the tile color based on the frequency metric's content.
 function updateFrequentMetricTileColor(content, tile) {
-  if (content === 'High Relevance' || content === 'True') {
-    tile.style.backgroundColor = 'green';
-  } else if  (content === 'Low Relevance' || content === 'False') {
-    tile.style.backgroundColor = 'red';
-  } else {
-    tile.style.backgroundColor = 'orange';
+  switch (content) {
+    case CONTENT_MATCH.HIGH_RELEVANCE:
+    case CONTENT_MATCH.TRUE:
+      setTileColor(tile, COLORS.GREEN);
+      break;
+    case CONTENT_MATCH.LOW_RELEVANCE:
+    case CONTENT_MATCH.FALSE:
+      setTileColor(tile, COLORS.RED);
+      break;
+    default:
+      setTileColor(tile, COLORS.ORANGE);
   }
 }
 
+// Utility function to get tile and content from a given element id.
+function getTileAndContent(id) {
+  const element = document.getElementById(id);
+  const tile = element.closest('.metric-tile');
+  const content = element.textContent.trim();
+  return { tile, content };
+}
 
-const avgTimeStampCorr = document.getElementById('avgTimeStampCorr');
-const avgTimeStampCorrTile = avgTimeStampCorr.closest('.metric-tile');
-const avgTimeStampCorrContent = parseFloat(avgTimeStampCorr.textContent);
-updateAvgTimeCorrTileColor(avgTimeStampCorrContent, avgTimeStampCorrTile);
+// Update tile color for average timestamp correctness.
+const avgTimeStampCorr = getTileAndContent('avgTimeStampCorr');
+const avgTimeStampCorrContent = parseFloat(avgTimeStampCorr.content);
+updateAvgTimeCorrTileColor(avgTimeStampCorrContent, avgTimeStampCorr.tile);
 
-const most_frequent_timestamp_correctness = document.getElementById('most_frequent_timestamp_correctness');
-const most_frequent_timestamp_correctness_tile = most_frequent_timestamp_correctness.closest('.metric-tile');
-const most_frequent_timestamp_correctness_content = most_frequent_timestamp_correctness.textContent.trim();
-updateFrequentMetricTileColor(most_frequent_timestamp_correctness_content, most_frequent_timestamp_correctness_tile);
+// Update tile color for the most frequent timestamp correctness.
+const mostFreqTimestampCorr = getTileAndContent('most_frequent_timestamp_correctness');
+updateFrequentMetricTileColor(mostFreqTimestampCorr.content, mostFreqTimestampCorr.tile);
 
-const most_frequent_category = document.getElementById('most_frequent_category');
-const most_frequent_category_tile = most_frequent_category.closest('.metric-tile');
-const most_frequent_category_content = most_frequent_category.textContent.trim();
-updateFrequentMetricTileColor(most_frequent_category_content, most_frequent_category_tile);
+// Update tile color for the most frequent category.
+const mostFreqCategory = getTileAndContent('most_frequent_category');
+updateFrequentMetricTileColor(mostFreqCategory.content, mostFreqCategory.tile);
 
-// Trigger a resize event for the plots to adapt to the new size
-setTimeout(function() {
-  window.dispatchEvent(new Event('resize'));
-}, 0);
+// Trigger a resize event for the plots to adapt to the new size.
+setTimeout(() => window.dispatchEvent(new Event('resize')), 0);

tracex_project/db_results/templates/db_results_overview.html

@@ -1,27 +1,29 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Database Results</title>
-        {% load static %}
-        <link rel="stylesheet" type="text/css" href="{% static '/tracex/css/styles.css' %}">
-    </head>
+<html lang="en">
+<head>
+    <title>Database Results</title>
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static '/tracex/css/styles.css' %}">
+</head>
 <body class="main_body">
-    <img src="{% static '/tracex/img/database_results_logo.png' %}" alt="Database Results Logo" class="database_results_logo">
-    <h2>Welcome to the Database Results</h2>
-    <p> The Database Results page presents a comprehensive overview of the data gathered from the system. It offers insights into various aspects of the database, including metrics, analyses and filter possibilities.</p>
-    <p> Please select if you want to see the Metrics Dashboard or the Evaluation.</p>
+<img src="{% static '/tracex/img/database_results_logo.png' %}" alt="Database Results Logo"
+     class="database_results_logo">
+<h2>Welcome to the Database Results</h2>
+<p> The Database Results page presents a comprehensive overview of the data gathered from the system. It offers insights
+    into various aspects of the database, including metrics, analyses and filter possibilities.</p>
+<p> Please select if you want to see the Metrics Dashboard or the Evaluation.</p>
 
-    <div class="button-container">
-        <a href="{% url 'metrics_overview' %}">
-            <button class="menu_button">Go to Metrics Dashboard</button>
-        </a>
-        <a href="{% url 'evaluation' %}">
-            <button class="menu_button">Go to Evaluation</button>
-        </a>
-    </div>
-
-    <a href="{% url 'landing_page' %}">
-        <button class="menu_button">Return to TracEX Menu</button>
+<div class="button-container">
+    <a href="{% url 'metrics_overview' %}">
+        <button class="menu_button">Go to Metrics Dashboard</button>
+    </a>
+    <a href="{% url 'evaluation' %}">
+        <button class="menu_button">Go to Evaluation</button>
     </a>
+</div>
+
+<a href="{% url 'landing_page' %}">
+    <button class="menu_button">Return to TracEX Menu</button>
+</a>
 </body>
 </html>

tracex_project/db_results/templates/evaluation.html

@@ -1,10 +1,10 @@
-{% load static %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Evaluation View</title>
+    {% load static %}
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="{% static '/tracex/css/styles.css' %}">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.js"></script>
@@ -86,14 +86,14 @@ <h1 style="text-align: center">Evaluation View</h1>
     <div class="form-row">
         <div class="form-column">
             {{ form.sex.label }} <br>
-            <input type="checkbox" id="togglesex" />
+            <input type="checkbox" id="togglesex"/>
             <label for="togglesex"><i>Select/Deselect All</i></label>
             {{ form.sex }}
             {{ form.sex.errors }}
         </div>
         <div class="form-column">
             {{ form.origin.label_tag }} <br>
-            <input type="checkbox" id="toggleAll" />
+            <input type="checkbox" id="toggleAll"/>
             <label for="toggleAll"><i>Select/Deselect All</i></label>
             {{ form.origin }}
             {{ form.origin.errors }}
@@ -103,14 +103,14 @@ <h1 style="text-align: center">Evaluation View</h1>
     <div class="form-row">
         <div class="form-column">
             {{ form.condition.label_tag }} <br>
-            <input type="checkbox" id="toggleCondition" />
+            <input type="checkbox" id="toggleCondition"/>
             <label for="toggleCondition"><i>Select/Deselect All</i></label>
             {{ form.condition }}
             {{ form.condition.errors }}
         </div>
         <div class="form-column">
             {{ form.preexisting_condition.label_tag }} <br>
-            <input type="checkbox" id="togglePreexistingCondition" />
+            <input type="checkbox" id="togglePreexistingCondition"/>
             <label for="togglePreexistingCondition"><i>Select/Deselect All</i></label>
             {{ form.preexisting_condition }}
             {{ form.preexisting_condition.errors }}
@@ -147,22 +147,23 @@ <h1 style="text-align: center">Evaluation View</h1>
 </form>
 
 <!-- Trigger/Open The Modal (XES Download) -->
-    <button id="downloadBtn" class="function_button">Download XES File</button>
-    <div id="downloadModal" class="modal">
-        <div class="modal-content">
-            <span class="close">&times;</span>
-            <p>Please select the type(s) of XES file to download:</p>
-            <form id="downloadForm" action="{% url 'download_xes_evaluation' %}" method="post" enctype="multipart/form-data">
-                {% csrf_token %}
-                <input type="checkbox" id="event_log" name="trace_type[]" value="event_log" class="trace-checkbox">
-                <label for="event_log">Event Log XES</label><br><br>
-                <input type="submit" value="Confirm Download" class="button">
-            </form>
-        </div>
+<button id="downloadBtn" class="function_button">Download XES File</button>
+<div id="downloadModal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <p>Please select the type(s) of XES file to download:</p>
+        <form id="downloadForm" action="{% url 'download_xes_evaluation' %}" method="post"
+              enctype="multipart/form-data">
+            {% csrf_token %}
+            <input type="checkbox" id="event_log" name="trace_type[]" value="event_log" class="trace-checkbox">
+            <label for="event_log">Event Log XES</label><br><br>
+            <input type="submit" value="Confirm Download" class="button">
+        </form>
     </div>
+</div>
 
 <a href="{% url 'db_results_overview' %}">
-        <button class="menu_button">Return to Database Results Overview</button>
+    <button class="menu_button">Return to Database Results Overview</button>
 </a>
 
 <a href="{% url 'landing_page' %}">