From 82672da69e76875bbdf69d3f972cb90764bd4edf Mon Sep 17 00:00:00 2001 From: Pop John Date: Wed, 10 Jul 2024 12:43:30 +0300 Subject: [PATCH] fix xAxis dynamic grow and awq script --- .../src/facades/algorithmExecutionFacade.js | 2 +- .../run-drawer-actions.component.ts | 1 + .../running-quantization-charts.component.ts | 3 +- .../ms-chart-display-settings.interface.ts | 3 + .../ms-line-chart/ms-line-chart.component.ts | 26 ++++--- .../utils/charts-settings.utils.ts | 74 +++++++++++-------- 6 files changed, 65 insertions(+), 44 deletions(-) diff --git a/backend/src/facades/algorithmExecutionFacade.js b/backend/src/facades/algorithmExecutionFacade.js index 8f2dcee5..7f04c697 100644 --- a/backend/src/facades/algorithmExecutionFacade.js +++ b/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: () => {} }) }; diff --git a/frontend/src/app/modules/algorithm-comparison/components/run-drawer-actions/run-drawer-actions.component.ts b/frontend/src/app/modules/algorithm-comparison/components/run-drawer-actions/run-drawer-actions.component.ts index b22c5f18..5f1de7cd 100644 --- a/frontend/src/app/modules/algorithm-comparison/components/run-drawer-actions/run-drawer-actions.component.ts +++ b/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]; }); } diff --git a/frontend/src/app/modules/running/components/running-quantization-charts/running-quantization-charts.component.ts b/frontend/src/app/modules/running/components/running-quantization-charts/running-quantization-charts.component.ts index 29e4154e..dac40f39 100644 --- a/frontend/src/app/modules/running/components/running-quantization-charts/running-quantization-charts.component.ts +++ b/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 = { diff --git a/frontend/src/app/modules/shared/standalone/ms-line-chart/models/interfaces/ms-chart-display-settings.interface.ts b/frontend/src/app/modules/shared/standalone/ms-line-chart/models/interfaces/ms-chart-display-settings.interface.ts index 10273c47..26b73e24 100644 --- a/frontend/src/app/modules/shared/standalone/ms-line-chart/models/interfaces/ms-chart-display-settings.interface.ts +++ b/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 { diff --git a/frontend/src/app/modules/shared/standalone/ms-line-chart/ms-line-chart.component.ts b/frontend/src/app/modules/shared/standalone/ms-line-chart/ms-line-chart.component.ts index f62f9c46..07ff2b70 100644 --- a/frontend/src/app/modules/shared/standalone/ms-line-chart/ms-line-chart.component.ts +++ b/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: diff --git a/frontend/src/app/modules/shared/standalone/ms-line-chart/utils/charts-settings.utils.ts b/frontend/src/app/modules/shared/standalone/ms-line-chart/utils/charts-settings.utils.ts index f7d72472..76d81901 100644 --- a/frontend/src/app/modules/shared/standalone/ms-line-chart/utils/charts-settings.utils.ts +++ b/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) }; }