fix xAxis dynamic grow and awq script

backend/src/facades/algorithmExecutionFacade.js

@@ -1,4 +1,3 @@
-const express = require('express');
 const { broadcastTerminal } = require('../services/websocketService');
 const ALGORITHM_TYPES = require('../constants/algorithmTypesConstants');
 const { executeCommand } = require('./commandExecutionFacade');
@@ -57,6 +56,7 @@ const executorFactory = {
 		ALGORITHM_TYPES.MACHINE_UNLEARNING,
 		machineUnlearningParserInstance
 	),
+	[ALGORITHM_TYPES.AWQ]: new ScriptExecutor(ALGORITHM_TYPES.AWQ, { reset: () => {}, parseLine: () => {} }),
 	[ALGORITHM_TYPES.MULTIFLOW]: new ScriptExecutor(ALGORITHM_TYPES.MULTIFLOW, { reset: () => {}, parseLine: () => {} })
 };
 

frontend/src/app/modules/algorithm-comparison/components/run-drawer-actions/run-drawer-actions.component.ts

@@ -181,6 +181,7 @@ export class RunDrawerActionsComponent implements OnInit, AfterViewInit {
 					datasetColors: [{ backgroundColor: backgroundColor, borderColor: borderColor }]
 				}
 			};
+
 			this.lastRunAccuracyTestingChartData = [...this.lastRunAccuracyTestingChartData];
 		});
 	}

frontend/src/app/modules/running/components/running-quantization-charts/running-quantization-charts.component.ts

@@ -87,7 +87,8 @@ export class RunningQuantizationChartsComponent {
 		},
 		datasetColorSettingsKey: ChartColorEnum.GREEN,
 		isXAxisDynamic: true,
-		realtimeUpdateMetric: RealtimeUpdateMetricEnum.ACCURACY
+		realtimeUpdateMetric: RealtimeUpdateMetricEnum.ACCURACY,
+		enhanceSinglePhaseXAxisWebsocketEvent: true
 	};
 
 	accuracyTestingChartDisplaySettings: ChartDisplaySettings = {

frontend/src/app/modules/shared/standalone/ms-line-chart/models/interfaces/ms-chart-display-settings.interface.ts

@@ -114,6 +114,9 @@ export interface ChartDisplaySettings {
 
 	// Determines the density of the X-axis labels. A higher value means fewer labels.
 	xAxisLabelDensity?: number;
+
+	// Determines whether the websocketEvent for the enhanceXAxis is allowed to execute or not
+	enhanceSinglePhaseXAxisWebsocketEvent?: boolean;
 }
 
 export interface ChartZoomLimits {

frontend/src/app/modules/shared/standalone/ms-line-chart/ms-line-chart.component.ts

@@ -68,8 +68,8 @@ export class MsLineChartComponent implements OnInit, OnChanges, OnDestroy {
 	private latestValuesToUpdate: { datasetIndex: number; value: number }[] = [];
 	private updateIntervalId: any;
 
-	@ViewChild(BaseChartDirective) chart?: BaseChartDirective;
-	@ViewChild('chartContainer') chartContainer!: ElementRef;
+	@ViewChild(BaseChartDirective, { static: true }) chart?: BaseChartDirective;
+	@ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;
 
 	public lineChartData!: ChartConfiguration['data'];
 	public lineChartOptions!: ChartConfiguration['options'];
@@ -96,8 +96,11 @@ export class MsLineChartComponent implements OnInit, OnChanges, OnDestroy {
 		this.chartWebsocketService.latestValuesToUpdate.pipe(untilDestroyed(this)).subscribe((update) => {
 			this.addLatestValueToChart(update.datasetIndex, update.value);
 		});
+
 		this.chartWebsocketService.enhanceXAxis.pipe(untilDestroyed(this)).subscribe((reconstructionIndex) => {
-			this.enhanceSinglePhaseXAxis(reconstructionIndex);
+			if (this.settings.enhanceSinglePhaseXAxisWebsocketEvent) {
+				this.enhanceSinglePhaseXAxis(reconstructionIndex);
+			}
 		});
 	}
 
@@ -199,27 +202,26 @@ export class MsLineChartComponent implements OnInit, OnChanges, OnDestroy {
 		this.lineChartOptions = ChartSettingsUtils.configureChartOptions(this.settings);
 		this.updateChartSettingsBasedOnScriptState();
 
+		const xAxisAvailableWidth = this.chartContainer.nativeElement.offsetWidth;
+
 		switch (this.settings?.chartDataStructure) {
 			case ChartDataStructure.SINGLE_PHASE_X_AXIS: {
 				this.lineChartData = ChartSettingsUtils.prepareSinglePhaseChartDataStructure(
-					this.settings?.xAxisDataPointsCount || 0,
-					this.settings
+					this.settings,
+					xAxisAvailableWidth
 				);
+
 				break;
 			}
 			case ChartDataStructure.SINGLE_PHASE_X_AXIS_SKIP_ONE: {
 				this.lineChartData = ChartSettingsUtils.prepareSinglePhaseSkipOneChartDataStructure(
-					this.settings?.xAxisDataPointsCount || 0,
-					this.settings
+					this.settings,
+					xAxisAvailableWidth
 				);
 				break;
 			}
 			case ChartDataStructure.MUlTI_PHASE_X_AXIS: {
-				this.lineChartData = ChartSettingsUtils.prepareChartDataStructure(
-					this.settings.xAxisRepetitionCount,
-					this.settings.xAxisDataPointsCount,
-					this.settings
-				);
+				this.lineChartData = ChartSettingsUtils.prepareChartDataStructure(this.settings);
 				break;
 			}
 			default:

frontend/src/app/modules/shared/standalone/ms-line-chart/utils/charts-settings.utils.ts

@@ -25,28 +25,52 @@ import {
 } from '../models/constants/chart.constants';
 import { ChartDataStructure, ChartDisplaySettings } from '../models/interfaces/ms-chart-display-settings.interface';
 
+export const AVERAGE_CHAR_WIDTH: number = 6;
+
 export class ChartSettingsUtils {
 	static registerZoomPlugin() {
 		Chart.register(zoomPlugin);
 	}
 
-	static createXAxisLabels(totalEpochs: number, totalSteps: number, displaySettings: ChartDisplaySettings): string[] {
+	static createXAxisLabels(displaySettings: ChartDisplaySettings): string[] {
 		const density = displaySettings.xAxisLabelDensity || 1;
+		const totalEpochs: number = displaySettings.xAxisRepetitionCount || DEFAULT_TOTAL_EPOCHS_NR;
+		const totalSteps: number = displaySettings.xAxisDataPointsCount || DEFAULT_NR_OF_STEPS_PER_EPOCH;
 		return Array.from({ length: totalEpochs * totalSteps }, (_, index) =>
 			index % (totalSteps * density) === 0 ? `${displaySettings?.xAxisLabelPrefix || ''} ${index / totalSteps}` : ''
 		);
 	}
 
-	static createSinglePhaseAxisLabels(length: number, displaySettings: ChartDisplaySettings): string[] {
-		const density = displaySettings.xAxisLabelDensity || 1;
+	static createSinglePhaseAxisLabels(displaySettings: ChartDisplaySettings, xAxisAvailableWidth: number): string[] {
 		const startingNumber = displaySettings.xAxisInitialLabelValue ?? 1;
+		const length = displaySettings.xAxisDataPointsCount ?? 0;
+		const highestNumber = length + startingNumber - 1;
+		const sampleLabel = `${displaySettings?.xAxisLabelPrefix || ''} ${highestNumber}`;
+		const averageCharWidth = AVERAGE_CHAR_WIDTH;
+		const labelWidth = sampleLabel.length * averageCharWidth;
+
+		const maxLabels = Math.floor(xAxisAvailableWidth / labelWidth);
+		const density = Math.max(1, Math.ceil(length / maxLabels));
+
 		return Array.from({ length }, (_, i) =>
 			i % density === 0 ? `${displaySettings?.xAxisLabelPrefix || ''} ${i + startingNumber}` : ''
 		);
 	}
 
-	static createSinglePhaseSkipOneAxisLabels(length: number, displaySettings: ChartDisplaySettings): string[] {
-		const density = displaySettings.xAxisLabelDensity || 1;
+	static createSinglePhaseSkipOneAxisLabels(
+		displaySettings: ChartDisplaySettings,
+		xAxisAvailableWidth: number
+	): string[] {
+		const length = displaySettings.xAxisDataPointsCount || 0;
+		const startingNumber = displaySettings.xAxisInitialLabelValue ?? 1;
+		const highestNumber = length + startingNumber - 1;
+		const sampleLabel = `${displaySettings?.xAxisLabelPrefix || ''} ${highestNumber}`;
+		const averageCharWidth = AVERAGE_CHAR_WIDTH;
+		const labelWidth = sampleLabel.length * averageCharWidth;
+
+		const maxLabels = Math.floor(xAxisAvailableWidth / labelWidth);
+		const density = Math.max(1, Math.ceil(length / maxLabels));
+
 		return Array.from({ length }, (_, i) =>
 			i % density === 0 && i !== 0 ? `${displaySettings?.xAxisLabelPrefix || ''} ${i - 1}` : ''
 		);
@@ -168,11 +192,14 @@ export class ChartSettingsUtils {
 		const availableWidth = chart.width || 0;
 		const startingNumber = settings.xAxisInitialLabelValue ?? 1;
 
-		const sampleLabel = `${settings?.xAxisLabelPrefix || ''} ${startingNumber + maxIndex}`;
-		const labelWidth = this.calculateLabelWidth(sampleLabel, chart);
+		const length = maxIndex - minIndex + 1;
+		const highestNumber = length + startingNumber - 1;
+		const sampleLabel = `${settings?.xAxisLabelPrefix || ''} ${highestNumber}`;
+		const averageCharWidth = AVERAGE_CHAR_WIDTH;
+		const labelWidth = sampleLabel.length * averageCharWidth;
+
 		const maxLabels = Math.floor(availableWidth / labelWidth);
-		const totalDataPoints = maxIndex - minIndex + 1;
-		const density = Math.max(1, Math.ceil(totalDataPoints / maxLabels));
+		const density = Math.max(1, Math.ceil(length / maxLabels));
 
 		const labels = Array.from({ length: chart?.data?.labels!.length }, (_, i) => {
 			if (i < minIndex || i > maxIndex) {
@@ -185,43 +212,30 @@ export class ChartSettingsUtils {
 		chart.update('none');
 	}
 
-	static calculateLabelWidth(label: string, chart: Chart): number {
-		const ctx = chart.ctx;
-		ctx.save();
-		ctx.font = ctx.font;
-		const labelWidth = ctx.measureText(label).width;
-		ctx.restore();
-		return labelWidth;
-	}
-
 	static prepareSinglePhaseChartDataStructure(
-		length: number,
-		displaySettings: ChartDisplaySettings
+		displaySettings: ChartDisplaySettings,
+		xAxisAvailableWidth: number
 	): ChartConfiguration['data'] {
 		return {
 			datasets: [],
-			labels: this.createSinglePhaseAxisLabels(length, displaySettings)
+			labels: this.createSinglePhaseAxisLabels(displaySettings, xAxisAvailableWidth)
 		};
 	}
 
 	static prepareSinglePhaseSkipOneChartDataStructure(
-		length: number,
-		displaySettings: ChartDisplaySettings
+		displaySettings: ChartDisplaySettings,
+		xAxisAvailableWidth: number
 	): ChartConfiguration['data'] {
 		return {
 			datasets: [],
-			labels: this.createSinglePhaseSkipOneAxisLabels(length, displaySettings)
+			labels: this.createSinglePhaseSkipOneAxisLabels(displaySettings, xAxisAvailableWidth)
 		};
 	}
 
-	static prepareChartDataStructure(
-		totalEpochs: number = DEFAULT_TOTAL_EPOCHS_NR,
-		totalSteps: number = DEFAULT_NR_OF_STEPS_PER_EPOCH,
-		displaySettings: ChartDisplaySettings
-	): ChartConfiguration['data'] {
+	static prepareChartDataStructure(displaySettings: ChartDisplaySettings): ChartConfiguration['data'] {
 		return {
 			datasets: [],
-			labels: this.createXAxisLabels(totalEpochs, totalSteps, displaySettings)
+			labels: this.createXAxisLabels(displaySettings)
 		};
 	}