(Rework): Removed hack for delayed display of Runtime phase and made correct sync ordering

Author: ArneTR

frontend/js/helpers/phase-stats.js

@@ -59,9 +59,7 @@ const getAndShowPhase = () => {
         const sub_phase_regex = /^[\.\s0-9a-zA-Z_\(\)-]+$/; // Matches strings containing only letters and digits
         if (phase_to_display[1] != null && sub_phase_regex.test(phase_to_display[1])) {
             try {
-                setTimeout(function(){
-                    document.querySelector(`a.runtime-step[data-tab="${phase_to_display[1]}"`).dispatchEvent(new Event('click'));
-                }, 1000); // hacky ... this needs better solution ... but unclear WHY it is not sync ...
+                document.querySelector(`a.runtime-step[data-tab="${phase_to_display[1]}"`).dispatchEvent(new Event('click'));
             } catch(err) {
                 console.log('Could not match phase to show', err);
             }

frontend/js/stats.js

@@ -330,13 +330,15 @@ const fetchAndFillPhaseStatsData = async (url_params) => {
 
 
     buildPhaseTabs(phase_stats.data)
-    renderCompareChartsForPhase(phase_stats.data, getAndShowPhase());
-    displayTotalChart(...buildTotalChartData(phase_stats.data));
 
     document.querySelectorAll('.ui.steps.phases .step, .runtime-step').forEach(node => node.addEventListener('click', el => {
-        const phase = el.currentTarget.getAttribute('data-tab');
-        renderCompareChartsForPhase(phase_stats.data, phase);
-    }));
+            const phase = el.currentTarget.getAttribute('data-tab');
+            renderCompareChartsForPhase(phase_stats.data, phase);
+        })
+    );
+
+    renderCompareChartsForPhase(phase_stats.data, getAndShowPhase());
+    displayTotalChart(...buildTotalChartData(phase_stats.data));
 
 }