Set fields to default value on blur

owid · Aug 19, 2024 · 3d44bde · 3d44bde
1 parent c3cff4d
commit 3d44bde
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 16 deletions.
diff --git a/adminSiteClient/ColorSchemeDropdown.tsx b/adminSiteClient/ColorSchemeDropdown.tsx
@@ -23,6 +23,7 @@ interface ColorSchemeDropdownProps {
     invertedColorScheme: boolean
     chartType: ChartTypeName
     onChange: (selected: ColorSchemeOption) => void
+    onBlur?: () => void
 }
 
 @observer
@@ -116,6 +117,7 @@ export class ColorSchemeDropdown extends React.Component<ColorSchemeDropdownProp
                 options={this.allOptions}
                 formatOptionLabel={this.formatOptionLabel}
                 onChange={this.onChange}
+                onBlur={this.props.onBlur}
                 value={this.allOptions.find(
                     (scheme) => scheme.value === this.props.value
                 )}

diff --git a/adminSiteClient/EditorCustomizeTab.tsx b/adminSiteClient/EditorCustomizeTab.tsx
@@ -40,7 +40,10 @@ import { AbstractChartEditor } from "./AbstractChartEditor.js"
 import { ErrorMessages } from "./ChartEditorTypes.js"
 
 @observer
-export class ColorSchemeSelector extends React.Component<{ grapher: Grapher }> {
+export class ColorSchemeSelector extends React.Component<{
+    grapher: Grapher
+    defaultValue?: ColorSchemeName
+}> {
     @action.bound onChange(selected: ColorSchemeOption) {
         // The onChange method can return an array of values (when multiple
         // items can be selected) or a single value. Since we are certain that
@@ -55,6 +58,15 @@ export class ColorSchemeSelector extends React.Component<{ grapher: Grapher }> {
         this.props.grapher.seriesColorMap?.clear()
     }
 
+    @action.bound onBlur() {
+        if (this.props.grapher.baseColorScheme === undefined) {
+            this.props.grapher.baseColorScheme = this.props.defaultValue
+
+            // clear out saved, pre-computed colors so the color scheme change is immediately visible
+            this.props.grapher.seriesColorMap?.clear()
+        }
+    }
+
     @action.bound onInvertColorScheme(value: boolean) {
         this.props.grapher.invertColorScheme = value || undefined
 
@@ -70,8 +82,9 @@ export class ColorSchemeSelector extends React.Component<{ grapher: Grapher }> {
                     <div className="form-group">
                         <label>Color scheme</label>
                         <ColorSchemeDropdown
-                            value={grapher.baseColorScheme || "default"}
+                            value={grapher.baseColorScheme}
                             onChange={this.onChange}
+                            onBlur={this.onBlur}
                             chartType={this.props.grapher.type}
                             invertedColorScheme={!!grapher.invertColorScheme}
                             additionalOptions={[
@@ -294,6 +307,10 @@ class TimelineSection<
         return this.props.editor.grapher
     }
 
+    @computed get activeParentConfig() {
+        return this.props.editor.activeParentConfig
+    }
+
     @computed get minTime() {
         return this.grapher.minTime
     }
@@ -320,10 +337,24 @@ class TimelineSection<
         this.grapher.timelineMinTime = value
     }
 
+    @action.bound onBlurTimelineMinTime() {
+        if (this.grapher.timelineMinTime === undefined) {
+            this.grapher.timelineMinTime =
+                this.activeParentConfig?.timelineMinTime
+        }
+    }
+
     @action.bound onTimelineMaxTime(value: number | undefined) {
         this.grapher.timelineMaxTime = value
     }
 
+    @action.bound onBlurTimelineMaxTime() {
+        if (this.grapher.timelineMaxTime === undefined) {
+            this.grapher.timelineMaxTime =
+                this.activeParentConfig?.timelineMaxTime
+        }
+    }
+
     @action.bound onToggleHideTimeline(value: boolean) {
         this.grapher.hideTimeline = value || undefined
     }
@@ -363,13 +394,23 @@ class TimelineSection<
                         <NumberField
                             label="Timeline min"
                             value={this.timelineMinTime}
-                            onValue={debounce(this.onTimelineMinTime)}
+                            // invoke on the leading edge to avoid interference with onBlur
+                            onValue={debounce(this.onTimelineMinTime, 0, {
+                                leading: true,
+                                trailing: false,
+                            })}
+                            onBlur={this.onBlurTimelineMinTime}
                             allowNegative
                         />
                         <NumberField
                             label="Timeline max"
                             value={this.timelineMaxTime}
-                            onValue={debounce(this.onTimelineMaxTime)}
+                            // invoke on the leading edge to avoid interference with onBlur
+                            onValue={debounce(this.onTimelineMaxTime, 0, {
+                                leading: true,
+                                trailing: false,
+                            })}
+                            onBlur={this.onBlurTimelineMaxTime}
                             allowNegative
                         />
                     </FieldsRow>
@@ -470,7 +511,7 @@ export class EditorCustomizeTab<
         const xAxisConfig = this.props.editor.grapher.xAxis
         const yAxisConfig = this.props.editor.grapher.yAxis
 
-        const { features } = this.props.editor
+        const { features, activeParentConfig } = this.props.editor
         const { grapher } = this.props.editor
 
         return (
@@ -486,6 +527,12 @@ export class EditorCustomizeTab<
                                         onValue={(value) =>
                                             (yAxisConfig.min = value)
                                         }
+                                        onBlur={() => {
+                                            if (yAxisConfig.min === undefined) {
+                                                yAxisConfig.min =
+                                                    activeParentConfig?.yAxis?.min
+                                            }
+                                        }}
                                         allowDecimal
                                         allowNegative
                                     />
@@ -495,6 +542,12 @@ export class EditorCustomizeTab<
                                         onValue={(value) =>
                                             (yAxisConfig.max = value)
                                         }
+                                        onBlur={() => {
+                                            if (yAxisConfig.max === undefined) {
+                                                yAxisConfig.max =
+                                                    activeParentConfig?.yAxis?.max
+                                            }
+                                        }}
                                         allowDecimal
                                         allowNegative
                                     />
@@ -535,6 +588,15 @@ export class EditorCustomizeTab<
                                 field="label"
                                 store={yAxisConfig}
                                 errorMessage={this.errorMessages.axisLabelY}
+                                onBlur={() => {
+                                    if (
+                                        yAxisConfig.label === "" &&
+                                        activeParentConfig?.yAxis?.label
+                                    ) {
+                                        yAxisConfig.label =
+                                            activeParentConfig.yAxis.label
+                                    }
+                                }}
                             />
                         )}
                     </Section>
@@ -550,6 +612,12 @@ export class EditorCustomizeTab<
                                         onValue={(value) =>
                                             (xAxisConfig.min = value)
                                         }
+                                        onBlur={() => {
+                                            if (xAxisConfig.min === undefined) {
+                                                xAxisConfig.min =
+                                                    activeParentConfig?.yAxis?.min
+                                            }
+                                        }}
                                         allowDecimal
                                         allowNegative
                                     />
@@ -559,6 +627,12 @@ export class EditorCustomizeTab<
                                         onValue={(value) =>
                                             (xAxisConfig.max = value)
                                         }
+                                        onBlur={() => {
+                                            if (xAxisConfig.max === undefined) {
+                                                xAxisConfig.max =
+                                                    activeParentConfig?.yAxis?.max
+                                            }
+                                        }}
                                         allowDecimal
                                         allowNegative
                                     />
@@ -599,14 +673,29 @@ export class EditorCustomizeTab<
                                 field="label"
                                 store={xAxisConfig}
                                 errorMessage={this.errorMessages.axisLabelX}
+                                onBlur={() => {
+                                    if (
+                                        xAxisConfig.label === "" &&
+                                        activeParentConfig?.xAxis?.label
+                                    ) {
+                                        xAxisConfig.label =
+                                            activeParentConfig.xAxis.label
+                                    }
+                                }}
                             />
                         )}
                     </Section>
                 )}
                 <TimelineSection editor={this.props.editor} />
                 <FacetSection editor={this.props.editor} />
                 <Section name="Color scheme">
-                    <ColorSchemeSelector grapher={grapher} />
+                    <ColorSchemeSelector
+                        grapher={grapher}
+                        defaultValue={
+                            this.props.editor.activeParentConfig
+                                ?.baseColorScheme
+                        }
+                    />
                 </Section>
                 {features.canSpecifySortOrder && (
                     <SortOrderSection editor={this.props.editor} />

diff --git a/adminSiteClient/EditorMapTab.tsx b/adminSiteClient/EditorMapTab.tsx
@@ -1,4 +1,8 @@
-import { ChartTypeName, MapProjectionName } from "@ourworldindata/types"
+import {
+    ChartTypeName,
+    GrapherInterface,
+    MapProjectionName,
+} from "@ourworldindata/types"
 import {
     ChartDimension,
     MapChart,
@@ -17,11 +21,19 @@ import { AbstractChartEditor } from "./AbstractChartEditor.js"
 class VariableSection extends React.Component<{
     mapConfig: MapConfig
     filledDimensions: ChartDimension[]
+    parentConfig?: GrapherInterface
 }> {
     @action.bound onColumnSlug(columnSlug: ColumnSlug) {
         this.props.mapConfig.columnSlug = columnSlug
     }
 
+    @action.bound onBlurColumnSlug() {
+        if (this.props.mapConfig.columnSlug === undefined) {
+            this.props.mapConfig.columnSlug =
+                this.props.parentConfig?.map?.columnSlug
+        }
+    }
+
     @action.bound onProjection(projection: string | undefined) {
         this.props.mapConfig.projection = projection as MapProjectionName
     }
@@ -49,6 +61,7 @@ class VariableSection extends React.Component<{
                         label: d.column.displayName,
                     }))}
                     onValue={this.onColumnSlug}
+                    onBlur={this.onBlurColumnSlug}
                 />
                 <SelectField
                     label="Region"
@@ -182,6 +195,7 @@ export class EditorMapTab<
                 <VariableSection
                     mapConfig={mapConfig}
                     filledDimensions={grapher.filledDimensions}
+                    parentConfig={this.props.editor.activeParentConfig}
                 />
                 {isReady && (
                     <React.Fragment>

diff --git a/adminSiteClient/Forms.tsx b/adminSiteClient/Forms.tsx
@@ -307,6 +307,7 @@ interface SelectFieldProps {
     options: Option[]
     helpText?: string
     placeholder?: string
+    onBlur?: () => void
 }
 
 export class SelectField extends React.Component<SelectFieldProps> {
@@ -321,6 +322,7 @@ export class SelectField extends React.Component<SelectFieldProps> {
                     onChange={(e) =>
                         props.onValue(e.currentTarget.value as string)
                     }
+                    onBlur={this.props.onBlur}
                     value={props.value}
                     defaultValue={undefined}
                 >
@@ -733,6 +735,7 @@ export class BindString extends React.Component<{
     errorMessage?: string
     buttonContent?: React.ReactChild
     onButtonClick?: () => void
+    onBlur?: () => void
 }> {
     @action.bound onValue(value: string = "") {
         this.props.store[this.props.field] = value
@@ -741,6 +744,7 @@ export class BindString extends React.Component<{
     @action.bound onBlur() {
         const trimmedValue = this.props.store[this.props.field]?.trim()
         this.props.store[this.props.field] = trimmedValue
+        this.props.onBlur?.()
     }
 
     render() {

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -425,8 +425,8 @@ export class Grapher
     // the desired faceting strategy, which might not be possible if we change the data
     @observable selectedFacetStrategy?: FacetStrategy = undefined
 
-    @observable sortBy?: SortBy
-    @observable sortOrder?: SortOrder
+    @observable sortBy?: SortBy = SortBy.total
+    @observable sortOrder?: SortOrder = SortOrder.desc
     @observable sortColumnSlug?: string
 
     @observable.ref _isInFullScreenMode = false
@@ -529,9 +529,6 @@ export class Grapher
         // always include the schema, even if it's the default
         obj.$schema = this.$schema || defaultGrapherConfig.$schema
 
-        // todo: nulls got into the DB for this one. we can remove after moving Graphers from DB.
-        if (obj.stackMode === null) delete obj.stackMode
-
         // JSON doesn't support Infinity, so we use strings instead.
         if (obj.minTime) obj.minTime = minTimeToJSON(this.minTime) as any
         if (obj.maxTime) obj.maxTime = maxTimeToJSON(this.maxTime) as any

diff --git a/packages/@ourworldindata/grapher/src/schema/grapher-schema.004.yaml b/packages/@ourworldindata/grapher/src/schema/grapher-schema.004.yaml
@@ -380,17 +380,14 @@ properties:
         default: false
         description: Indicates if the map tab should be shown
     stackMode:
-        type:
-            - string
-            - "null"
+        type: string
         description: Stack mode. Only absolute and relative are actively used.
         default: absolute
         enum:
             - absolute
             - relative
             - grouped
             - stacked
-            - null
     minTime:
         description: Start point of the initially selected time span.
         default: earliest