Skip to content

Commit 3d48565

Browse files
lakshith-403lakshith-403
authored
Merge pull request #231 from labmlai/smooth
Smoothing
2 parents 97bdfef + b9d22da commit 3d48565

File tree

9 files changed

+63
-37
lines changed

9 files changed

+63
-37
lines changed

‎app/server/labml_app/analyses/preferences.py

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ class Preferences:
1515
step_range: List[int]
1616
focus_smoothed: bool
1717
smooth_value: float
18-
trim_smooth_ends: float
1918

2019
@classmethod
2120
def defaults(cls):
@@ -24,8 +23,7 @@ def defaults(cls):
2423
errors=[],
2524
step_range=[-1, -1],
2625
focus_smoothed=True,
27-
smooth_value=50, # 50% smooth
28-
trim_smooth_ends=True
26+
smooth_value=0.5, # 50% smooth
2927
)
3028

3129
def update_preferences(self, data: PreferencesData) -> None:
@@ -44,9 +42,6 @@ def update_preferences(self, data: PreferencesData) -> None:
4442
if 'smooth_value' in data:
4543
self.smooth_value = data['smooth_value']
4644

47-
if 'trim_smooth_ends' in data:
48-
self.trim_smooth_ends = data['trim_smooth_ends']
49-
5045
self.save()
5146

5247
def update_series_preferences(self, data: SeriesPreferences) -> None:
@@ -59,5 +54,4 @@ def get_data(self) -> Dict[str, Any]:
5954
'step_range': self.step_range,
6055
'focus_smoothed': self.focus_smoothed,
6156
'smooth_value': self.smooth_value,
62-
'trim_smooth_ends': self.trim_smooth_ends
6357
}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export class CardWrapper {
3737
private stepRange: number[]
3838
private focusSmoothed: boolean
3939
private smoothValue: number
40-
private trimSmoothEnds: boolean
4140

4241
private readonly title?: string
4342

@@ -75,7 +74,6 @@ export class CardWrapper {
7574
this.stepRange = preferenceData.step_range
7675
this.focusSmoothed = preferenceData.focus_smoothed
7776
this.smoothValue = preferenceData.smooth_value
78-
this.trimSmoothEnds = preferenceData.trim_smooth_ends
7977

8078
let [smoothedSeries, smoothedBaseSeries] = (new TwoSidedExponentialAverage({
8179
indicators: this.series.concat(this.baseSeries ?? []) ?? [],

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

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export interface MetricDataStore {
3636
focusSmoothed: boolean
3737
stepRange: number[]
3838
smoothValue: number
39-
trimSmoothEnds: boolean
4039

4140
isUnsaved: boolean
4241
}
@@ -101,12 +100,6 @@ namespace ChangeHandlers {
101100
}
102101
}
103102

104-
export class TrimSmoothToggleHandler extends ChangeHandlerBase {
105-
protected handleChange() {
106-
this.wrapper.dataStore.trimSmoothEnds = !this.wrapper.dataStore.trimSmoothEnds
107-
}
108-
}
109-
110103
export class ToggleChangeHandler extends ChangeHandlerBase {
111104
private readonly idx: number
112105
private readonly isBase: boolean
@@ -160,7 +153,6 @@ export class ViewWrapper {
160153
private readonly focusButton: ToggleButton
161154
private readonly smoothSlider: Slider
162155
private readonly deleteButton: DeleteButton
163-
private readonly trimSmoothToggleButton: ToggleButton
164156
private sparkLines: SparkLines
165157

166158
public dataStore: MetricDataStore
@@ -222,9 +214,9 @@ export class ViewWrapper {
222214
})
223215
this.smoothSlider = new Slider({
224216
min: 0,
225-
max: 100,
217+
max: 1,
226218
value: this.dataStore.smoothValue,
227-
step: 0.001,
219+
step: 0.0001,
228220
onChange: (value: number) => {
229221
let changeHandler = new ChangeHandlers.SmoothValueHandler(this, value)
230222
changeHandler.change()
@@ -234,15 +226,6 @@ export class ViewWrapper {
234226
parent: this.constructor.name,
235227
onButtonClick: this.onDelete
236228
})
237-
this.trimSmoothToggleButton = new ToggleButton({
238-
onButtonClick: () => {
239-
let changeHandler = new ChangeHandlers.TrimSmoothToggleHandler(this)
240-
changeHandler.change()
241-
},
242-
text: 'Clip',
243-
isToggled: this.dataStore.trimSmoothEnds,
244-
parent: this.constructor.name
245-
})
246229
}
247230

248231
public clear() {
@@ -383,7 +366,6 @@ export class ViewWrapper {
383366
$('div', '.button-row', $ => {
384367
$('span.key', 'Smoothing:')
385368
this.smoothSlider.render($)
386-
this.trimSmoothToggleButton.render($)
387369
})
388370
})
389371
}

‎app/ui/src/analyses/experiments/comparison/view.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ class ComparisonView extends ScreenView implements MetricDataStore {
3737
focusSmoothed: boolean
3838
stepRange: number[]
3939
smoothValue: number
40-
trimSmoothEnds: boolean
4140

4241
isUnsaved: boolean
4342

@@ -99,7 +98,6 @@ class ComparisonView extends ScreenView implements MetricDataStore {
9998
this.basePlotIdx = [...this.preferenceData.base_series_preferences]
10099
}
101100
this.smoothValue = this.preferenceData.smooth_value
102-
this.trimSmoothEnds = this.preferenceData.trim_smooth_ends
103101

104102
if (!!this.baseUuid) {
105103
await this.updateBaseRun(force)
@@ -278,7 +276,6 @@ class ComparisonView extends ScreenView implements MetricDataStore {
278276
series_names: this.series.map(s => s.name),
279277
base_series_names: this.baseSeries ? this.baseSeries.map(s => s.name) : [],
280278
smooth_value: this.smoothValue,
281-
trim_smooth_ends: this.trimSmoothEnds
282279
}
283280

284281
await this.preferenceCache.setPreference(preferenceData)

‎app/ui/src/analyses/experiments/metrics/view.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ class MetricsView extends ScreenView implements MetricDataStore {
5656
stepRange: number[]
5757
smoothValue: number
5858
isUnsaved: boolean
59-
trimSmoothEnds: boolean
6059

6160
constructor(uuid: string, metricUuid?: string) {
6261
super()
@@ -92,7 +91,6 @@ class MetricsView extends ScreenView implements MetricDataStore {
9291
this.focusSmoothed = this.preferenceData.focus_smoothed
9392
this.plotIdx = [...fillPlotPreferences(this.series, this.preferenceData.series_preferences)]
9493
this.smoothValue = this.preferenceData.smooth_value
95-
this.trimSmoothEnds = this.preferenceData.trim_smooth_ends
9694
})
9795

9896
this.refresh = new AwesomeRefreshButton(this.onRefresh.bind(this))
@@ -278,7 +276,6 @@ class MetricsView extends ScreenView implements MetricDataStore {
278276
sub_series_preferences: undefined,
279277
series_names: this.series.map(s => s.name),
280278
smooth_value: this.smoothValue,
281-
trim_smooth_ends: this.trimSmoothEnds
282279
}
283280

284281
if (this.metricUuid == null) {

‎app/ui/src/components/charts/smoothing/two_sided_exponential_average.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@ import {PointValue} from "../../../models/run"
33

44
export class TwoSidedExponentialAverage extends SeriesSmoothing {
55
protected smooth(): void {
6-
let smoothingFactor = this.smoothValue / 100
6+
let smoothingFactor = this.smoothValue
7+
8+
if (smoothingFactor <= 0) {
9+
smoothingFactor = 0
10+
}
11+
if (smoothingFactor >= 1) {
12+
smoothingFactor = 1
13+
}
714

815
for (let i = 0; i < this.indicators.length; i++) {
916
let ind = this.indicators[i]

‎app/ui/src/components/input/slider.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface SliderOptions {
1010

1111
export class Slider {
1212
private slider: HTMLInputElement
13+
private valueElem: HTMLInputElement
1314
private readonly onChange: (value: number) => void
1415

1516
private readonly min: number
@@ -34,11 +35,39 @@ export class Slider {
3435
value: this.value,
3536
step: this.step
3637
})
38+
$('div.input-container', $ => {
39+
$('div.input-content', $ => {
40+
this.valueElem = <HTMLInputElement>$('input.value', {
41+
type: 'number',
42+
value: this.value
43+
})
44+
})
45+
})
3746
})
3847

3948
this.slider.oninput = () => {
4049
this.value = parseFloat(this.slider.value)
50+
this.valueElem.value = this.value.toString()
51+
this.onChange(this.value)
52+
}
53+
this.valueElem.oninput = () => {
54+
let value = parseFloat(this.valueElem.value)
55+
// check NaN
56+
if (value !== value) {
57+
value = this.value
58+
}
59+
60+
if (value < this.min) {
61+
value = this.min
62+
} else if (value > this.max) {
63+
value = this.max
64+
}
65+
66+
this.value = value
67+
68+
this.slider.value = this.value.toString()
4169
this.onChange(this.value)
4270
}
71+
this.slider.value = this.value.toString()
4372
}
4473
}

‎app/ui/src/models/preferences.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export interface AnalysisPreferenceBaseModel {
66
step_range: number[]
77
focus_smoothed: boolean
88
smooth_value: number
9-
trim_smooth_ends: boolean
109
}
1110

1211
export interface AnalysisPreferenceModel extends AnalysisPreferenceBaseModel {

‎app/ui/src/style.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1591,4 +1591,27 @@ pre {
15911591
-ms-user-select: text !important;
15921592
-webkit-user-select: text !important;
15931593

1594+
}
1595+
1596+
.slider-container {
1597+
display: flex;
1598+
flex-direction: row;
1599+
align-items: flex-start;
1600+
justify-content: space-between;
1601+
gap: 10px;
1602+
1603+
input {
1604+
width: 4rem;
1605+
}
1606+
1607+
.input-container {
1608+
width: 5rem;
1609+
flex: unset;
1610+
}
1611+
1612+
.slider {
1613+
width: 9rem;
1614+
margin-top: auto;
1615+
margin-bottom: auto;
1616+
}
15941617
}

0 commit comments

Comments
 (0)