Merge pull request #222 from labmlai/smooth

Smoothing to a single point

Author: lakshith-403

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

@@ -5,10 +5,7 @@ import {Indicator} from "../../../models/run"
 import {
     getExtent,
     getLogScale,
-    getScale,
-    getSmoothWindow,
-    smoothSeries,
-    trimSteps
+    getScale
 } from "../utils"
 import {LineFill, LinePlot} from "./plot"
 import {BottomAxis, RightAxis} from "../axis"

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

@@ -2,7 +2,7 @@ import d3 from "../../../d3"
 import {WeyaElement, WeyaElementFunction} from '../../../../../lib/weya/weya'
 import {FillOptions, PlotOptions} from '../types'
 import {PointValue} from "../../../models/run"
-import {getSelectedIdx, mapRange, smoothSeries} from "../utils"
+import {getSelectedIdx} from "../utils"
 
 export interface LinePlotOptions extends PlotOptions {
     xScale: d3.ScaleLinear<number, number>
@@ -88,6 +88,10 @@ export class LinePlot {
                     })
             })
         })
+
+        if (this.series.length == 1) { // allways render circle for single point
+            this.renderCircle(0)
+        }
     }
 
     renderIndicators(cursorStep: number | null) {

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

@@ -1,6 +1,6 @@
 import {WeyaElementFunction} from '../../../../../lib/weya/weya'
 import {ChartOptions} from '../types'
-import {getExtent, getSmoothWindow, smoothSeries} from "../utils"
+import {getExtent} from "../utils"
 import {SparkLine} from "./spark_line"
 import ChartColors from "../chart_colors"
 import {DefaultLineGradient} from "../chart_gradients"
@@ -56,7 +56,7 @@ export class SparkLines {
         const margin = Math.floor(opt.width / 64)
         this.rowWidth = Math.min(450, opt.width - Math.max(3 * margin, 60))
 
-        this.stepExtent = getExtent(this.currentSeries.concat(this.baseSeries).map(s => s.series), d => d.step)
+        this.stepExtent = getExtent(this.currentSeries.concat(this.baseSeries).map(s => s.trimmedSeries), d => d.step)
 
         this.chartColors = new ChartColors({nColors: this.uniqueItems.size, secondNColors: this.uniqueItems.size, isDivergent: opt.isDivergent})
     }
@@ -82,7 +82,7 @@ export class SparkLines {
                 }
                 let sparkLine = new SparkLine({
                     name: s.name,
-                    series: s.series,
+                    series: s.trimmedSeries,
                     selected: this.currentPlotIdx[i],
                     stepExtent: this.stepExtent,
                     width: this.rowWidth,
@@ -105,7 +105,7 @@ export class SparkLines {
                 }
                 let sparkLine = new SparkLine({
                     name: s.name,
-                    series: s.series,
+                    series: s.trimmedSeries,
                     selected: this.basePlotIdx[i],
                     stepExtent: this.stepExtent,
                     width: this.rowWidth,

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

@@ -93,14 +93,15 @@ export function toDate(time: number) {
     return new Date(time * 1000)
 }
 
-export function smoothSeries(series: PointValue[], windowSize: number): PointValue[] {
+function smoothSeries(series: PointValue[], windowSize: number): PointValue[] {
     let result: PointValue[] = []
     windowSize = ~~windowSize
+    if (series.length < windowSize) {
+        windowSize = series.length
+    }
     let extraWindow = windowSize / 2
     extraWindow = ~~extraWindow
-    if (series.length <= windowSize) {
-        return series
-    }
+
 
     let count = 0
     let total = 0
@@ -194,15 +195,15 @@ export function smoothAndTrimAllCharts(series: Indicator[], baseSeries: Indicato
             baseSeries ?? [], smoothValue)
 
     if (series != null) {
-        series = series.map((s, i) => {
+        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) => {
+        baseSeries.map((s, i) => {
             s.series = smoothSeries(s.series, smoothWindow[1][i])
             return s
         })
@@ -218,7 +219,7 @@ export function trimSteps(series: Indicator[], min: number, max: number, smoothR
             localSmoothRange = 0
         } else {
             let trimStepCount = localSmoothRange / (s.series[1].step - s.series[0].step)
-            if (trimStepCount < 1) {
+            if (trimStepCount < 1) { // not going to trim anything - or else will filter out single steps
                 localSmoothRange = 0
             }
         }
@@ -236,6 +237,9 @@ export function trimSteps(series: Indicator[], min: number, max: number, smoothR
         }
         localMax = Math.min(localMax, s.series[s.series.length - 1].step - localSmoothRange)
 
+        localMin = Math.floor(localMin)
+        localMax = Math.ceil(localMax)
+
         let minIndex = s.series.length - 1
         let maxIndex = 0
 
@@ -249,6 +253,25 @@ export function trimSteps(series: Indicator[], min: number, max: number, smoothR
 
         s.lowTrimIndex = minIndex
         s.highTrimIndex = maxIndex
+
+        if (s.lowTrimIndex > s.highTrimIndex) { // if trim covers all just give the middle value
+            localMax = max == -1 ? s.series[s.series.length - 1].step : max
+            localMin = min == -1 ? s.series[0].step : min
+
+            minIndex = s.series.length - 1
+            maxIndex = 0
+
+            for (let i = 0; i < s.series.length; i++) {
+                let p = s.series[i]
+                if (p.step >= localMin && p.step <= localMax) {
+                    minIndex = Math.min(i, minIndex)
+                    maxIndex = Math.max(i, maxIndex)
+                }
+            }
+
+            s.lowTrimIndex = (minIndex + maxIndex) / 2
+            s.highTrimIndex = (minIndex + maxIndex) / 2
+        }
     })
 }
 
@@ -285,7 +308,7 @@ export function getSmoothWindow(currentSeries: Indicator[], baseSeries: Indicato
         return [stepRange, 0]
     }
 
-    let smoothRange = mapRange(smoothValue, 1, 100, 1, Math.max(maxRange/10, 1))
+    let smoothRange = mapRange(smoothValue, 1, 100, 1, maxRange)
 
     let stepRange = [[],[]]
     for (let s of currentSeries) {