Merge pull request #219 from labmlai/compare-fix

move smoothing to a single location for both line and spark charts

Author: lakshith-403

app/ui/src/analyses/experiments/chart_wrapper/card.ts

@@ -3,7 +3,7 @@ import {Indicator} from "../../../models/run"
 import {
     AnalysisPreferenceModel, ComparisonPreferenceModel,
 } from "../../../models/preferences"
-import {getChartType} from "../../../components/charts/utils"
+import {getChartType, smoothAndTrimAllCharts, trimSteps} from "../../../components/charts/utils"
 import {LineChart} from "../../../components/charts/lines/chart"
 import {SparkLines} from "../../../components/charts/spark_lines/chart"
 
@@ -73,6 +73,8 @@ export class CardWrapper {
         this.stepRange = preferenceData.step_range
         this.focusSmoothed = preferenceData.focus_smoothed
         this.smoothValue = preferenceData.smooth_value
+
+        smoothAndTrimAllCharts(this.series, this.baseSeries, this.smoothValue, this.stepRange)
     }
 
     public render() {

app/ui/src/analyses/experiments/chart_wrapper/view.ts

@@ -3,7 +3,10 @@ import {Weya as $, WeyaElement} from "../../../../../lib/weya/weya"
 import {DeleteButton, SaveButton, ToggleButton} from "../../../components/buttons"
 import {LineChart} from "../../../components/charts/lines/chart"
 import {SparkLines} from "../../../components/charts/spark_lines/chart"
-import {getChartType} from "../../../components/charts/utils"
+import {
+    getChartType,
+    smoothAndTrimAllCharts
+} from "../../../components/charts/utils"
 import {NumericRangeField} from "../../../components/input/numeric_range_field"
 import {Loader} from "../../../components/loader"
 import {Slider} from "../../../components/input/slider"
@@ -129,7 +132,7 @@ namespace ChangeHandlers {
 
             if ((this.isBase && this.wrapper.dataStore.baseSeries[this.idx].is_summary) || (!this.isBase && this.wrapper.dataStore.series[this.idx].is_summary)) {
                 // have to load from the backend
-                this.wrapper.requestMissingMetrics()
+                this.wrapper.requestMissingMetrics().then()
             }
         }
     }
@@ -305,12 +308,17 @@ export class ViewWrapper {
                 })
             })
         } else if (!isLoading) {
+            this.smoothSeries()
             this.renderCharts()
         }
 
         this.isLoading = isLoading
     }
 
+    private smoothSeries() {
+        smoothAndTrimAllCharts(this.dataStore.series, this.dataStore.baseSeries, this.dataStore.smoothValue, this.dataStore.stepRange)
+    }
+
     private renderTopButtons() {
         this.saveButton.disabled = !this.dataStore.isUnsaved
         this.topButtonContainer.innerHTML = ''
@@ -323,6 +331,8 @@ export class ViewWrapper {
     }
 
     private renderCharts() {
+        this.smoothSeries()
+
         this.renderSparkLines()
         this.renderLineChart()
     }

app/ui/src/analyses/sessions/gpu/utils.ts

@@ -3,7 +3,7 @@ import {Indicator} from "../../../models/run"
 export function getSeriesData(series: Indicator[], analysis: string, isMean: boolean = false): Indicator[]{
     let res: Indicator[] = []
     for (let r of series) {
-        let s = {...r}
+        let s = r.getCopy()
         if (s.name.includes(analysis)) {
             if (s.name.includes('mean')) {
                 if (isMean) {

app/ui/src/components/charts/lines/chart.ts

@@ -74,8 +74,6 @@ export class LineChart {
         this.chartWidth = windowWidth - 2 * this.margin - this.axisSize
         this.chartHeight = Math.round(Math.min(this.chartWidth, windowHeight) / 2)
 
-        let [smoothWindow, smoothRange ] = getSmoothWindow(this.currentSeries, this.baseSeries, opt.smoothValue)
-
         let idx: number = 0
         for (let s of this.currentSeries.concat(this.baseSeries)) {
             if (!this.uniqueItems.has(s.name)) {
@@ -86,22 +84,7 @@ export class LineChart {
         this.baseSeries = this.baseSeries.filter((_, i) => this.basePlotIndex[i] == 1)
         this.currentSeries = this.currentSeries.filter((_, i) => this.currentPlotIndex[i] == 1)
 
-        smoothWindow[0] = smoothWindow[0].filter((_, i) => this.currentPlotIndex[i] == 1)
-        smoothWindow[1] = smoothWindow[1].filter((_, i) => this.basePlotIndex[i] == 1)
-
-        this.currentSeries = this.currentSeries.map((s, i) => {
-            s.series = smoothSeries(s.series, smoothWindow[0][i])
-            return s
-        })
-        this.baseSeries = this.baseSeries.map((s, i) => {
-            s.series = smoothSeries(s.series, smoothWindow[1][i])
-            return s
-        })
-
-        this.baseSeries = trimSteps(this.baseSeries, opt.stepRange[0], opt.stepRange[1], smoothRange)
-        this.currentSeries = trimSteps(this.currentSeries, opt.stepRange[0], opt.stepRange[1], smoothRange)
-
-        const stepExtent = getExtent(this.baseSeries.concat(this.currentSeries).map(s => s.series), d => d.step, false, true)
+        const stepExtent = getExtent(this.baseSeries.concat(this.currentSeries).map(s => s.trimmedSeries), d => d.step, false, true)
         this.xScale = getScale(stepExtent, this.chartWidth, false)
 
         this.chartColors = new ChartColors({
@@ -213,11 +196,11 @@ export class LineChart {
                                 }, $ => {
                                     if (this.currentSeries.length < 3 && this.baseSeries.length == 0) {
                                         this.currentSeries.map((s, i) => {
-                                            if (this.currentSeries[i].series.length == 0) {
+                                            if (this.currentSeries[i].trimmedSeries.length == 0) {
                                                 return
                                             }
                                             new LineFill({
-                                                series: this.currentSeries[i].series,
+                                                series: this.currentSeries[i].trimmedSeries,
                                                 xScale: this.xScale,
                                                 yScale: this.yScale,
                                                 color: this.chartColors.getColor(this.uniqueItems.get(s.name)),
@@ -228,7 +211,7 @@ export class LineChart {
                                     }
                                     this.currentSeries.map((s, i) => {
                                         let linePlot = new LinePlot({
-                                            series: s.series,
+                                            series: s.trimmedSeries,
                                             xScale: this.xScale,
                                             yScale: this.yScale,
                                             color: this.chartColors.getColor(this.uniqueItems.get(s.name)),
@@ -241,7 +224,7 @@ export class LineChart {
 
                                     this.baseSeries.map((s, i) => {
                                         let linePlot = new LinePlot({
-                                            series: s.series,
+                                            series: s.trimmedSeries,
                                             xScale: this.xScale,
                                             yScale: this.yScale,
                                             color: this.chartColors.getSecondColor(this.uniqueItems.get(s.name)),

app/ui/src/components/charts/spark_lines/chart.ts

@@ -56,17 +56,6 @@ export class SparkLines {
         const margin = Math.floor(opt.width / 64)
         this.rowWidth = Math.min(450, opt.width - Math.max(3 * margin, 60))
 
-        let [smoothWindow, _] = getSmoothWindow(this.currentSeries, this.baseSeries, opt.smoothValue)
-
-        this.currentSeries = this.currentSeries.map((s, i) => {
-            s.series = smoothSeries(s.series, smoothWindow[0][i])
-            return s
-        })
-        this.baseSeries = this.baseSeries.map((s, i) => {
-            s.series = smoothSeries(s.series, smoothWindow[1][i])
-            return s
-        })
-
         this.stepExtent = getExtent(this.currentSeries.concat(this.baseSeries).map(s => s.series), d => d.step)
 
         this.chartColors = new ChartColors({nColors: this.uniqueItems.size, secondNColors: this.uniqueItems.size, isDivergent: opt.isDivergent})

app/ui/src/components/charts/timeseries/chart.ts

@@ -75,7 +75,7 @@ export class TimeSeriesChart {
         })
 
         if (opt.stepRange != null) {
-            this.series = trimSteps(this.series, opt.stepRange[0], opt.stepRange[1])
+            // this.series = trimSteps(this.series, opt.stepRange[0], opt.stepRange[1]) // todo
             this.isEmpty = true
             for (let series of this.series) {
                 if (series.series.length > 0) {

app/ui/src/components/charts/utils.ts

@@ -181,73 +181,74 @@ export function getChartType(index: number): 'log' | 'linear' {
     return index === 0 ? 'linear' : 'log'
 }
 
-export function trimSteps(series: Indicator[], min: number, max: number, smoothRange: number = 0) : Indicator[] {
-    smoothRange /= 2 // remove half from each end
-    return  <Indicator[]>series.map(s => {
-        let res = {...s}
+/**
+ * Smooths and trims all charts in the current and base series.
+ *
+ * @param {Indicator[]} series - The current series of data.
+ * @param {Indicator[]} baseSeries - The base series of data for comparison.
+ * @param {number} smoothValue - The value to be used for smoothing the data.
+ * @param {number[]} stepRange - The range of steps to be considered for trimming.
+ */
+export function smoothAndTrimAllCharts(series: Indicator[], baseSeries: Indicator[], smoothValue: number, stepRange: number[]) {
+    let [smoothWindow, smoothRange ] = getSmoothWindow(series ?? [],
+            baseSeries ?? [], smoothValue)
+
+    if (series != null) {
+        series = series.map((s, i) => {
+            s.series = smoothSeries(s.series, smoothWindow[0][i])
+            return s
+        })
+        trimSteps(series, stepRange[0], stepRange[1], smoothRange)
+    }
 
+    if (baseSeries != null) {
+        baseSeries = baseSeries.map((s, i) => {
+            s.series = smoothSeries(s.series, smoothWindow[1][i])
+            return s
+        })
+        trimSteps(baseSeries, stepRange[0], stepRange[1], smoothRange)
+    }
+}
+
+export function trimSteps(series: Indicator[], min: number, max: number, smoothRange: number = 0) {
+    smoothRange /= 2 // remove half from each end
+    series.forEach(s => {
+        let localSmoothRange = smoothRange
         if (s.series.length <= 2) {
-            smoothRange = 0
+            localSmoothRange = 0
         } else {
-            let trimStepCount = smoothRange / (s.series[1].step - s.series[0].step)
+            let trimStepCount = localSmoothRange / (s.series[1].step - s.series[0].step)
             if (trimStepCount < 1) {
-                smoothRange = 0
+                localSmoothRange = 0
             }
         }
 
-        res.series = []
-
         let localMin = min
         let localMax = max
 
         if (localMin == -1) {
             localMin = s.series[0].step
         }
-        localMin = Math.max(localMin, s.series[0].step + smoothRange)
+        localMin = Math.max(localMin, s.series[0].step + localSmoothRange)
 
         if (localMax == -1) {
             localMax = s.series[s.series.length - 1].step
         }
-        localMax = Math.min(localMax, s.series[s.series.length - 1].step - smoothRange)
+        localMax = Math.min(localMax, s.series[s.series.length - 1].step - localSmoothRange)
+
+        let minIndex = s.series.length - 1
+        let maxIndex = 0
 
         for (let i = 0; i < s.series.length; i++) {
             let p = s.series[i]
             if (p.step >= localMin && p.step <= localMax) {
-                res.series.push(p)
-            }
-        }
-
-        return res
-    })
-}
-
-export function trimStepsOfPoints(series: PointValue[][], min: number, max: number, smoothRange: number = 0) : PointValue[][] {
-     smoothRange /= 2 // remove half from each end
-    return series.map(s => {
-        let res = []
-        let start = 1e9, end = -1
-        let localMin = min
-        let localMax = max
-
-        if (localMin == -1) {
-            localMin = s[0].step
-        }
-        localMin = Math.max(localMin, s[0].step + smoothRange)
-
-        if (localMax == -1) {
-            localMax = s[s.length - 1].step
-        }
-        localMax = Math.min(localMax, s[s.length - 1].step - smoothRange)
-        for (let i = 0; i < s.length; i++) {
-            let p = s[i]
-            if ((p.step >= localMin || localMin == -1) && (p.step <= localMax || localMax == -1)) {
-                start = Math.min(start, i)
-                end = Math.max(end, i)
-                res.push(p)
+                minIndex = Math.min(i, minIndex)
+                maxIndex = Math.max(i, maxIndex)
             }
         }
 
-        return res
+        s.lowTrimIndex = minIndex
+        s.highTrimIndex = maxIndex
     })
 }
 

app/ui/src/models/run.ts

@@ -53,11 +53,32 @@ export class Indicator {
     name : string
     series: PointValue[]
     is_summary: boolean
+    lowTrimIndex: number
+    highTrimIndex: number
 
     constructor(indicator: IndicatorModel) {
         this.name = indicator.name
         this.series = toPointValue(indicator)
         this.is_summary = indicator.is_summary
+        this.lowTrimIndex = 0
+        this.highTrimIndex = this.series.length - 1
+    }
+
+    get trimmedSeries(): PointValue[] {
+        return this.series.slice(this.lowTrimIndex, this.highTrimIndex + 1)
+    }
+
+    getCopy(): Indicator {
+        let copy = new Indicator({
+            name: this.name,
+            step: "",
+            value: "",
+            mean: 0,
+            is_summary: this.is_summary,
+            last_step: ""
+        })
+        copy.series = [...this.series]
+        return copy
     }
 }