Skip to content

Commit

Permalink
✨ (admin) allow to overwrite parent values with automatic defaults
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiamersmann
sophiamersmann committed Sep 20, 2024
1 parent cea9233 commit 58bcb8b
Show file tree
Hide file tree
Showing 13 changed files with 322 additions and 170 deletions.
71 changes: 29 additions & 42 deletions adminSiteClient/EditorCustomizeTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ import Select from "react-select"
import { AbstractChartEditor } from "./AbstractChartEditor.js"
import { ErrorMessages } from "./ChartEditorTypes.js"

const debounceOnLeadingEdge = (fn: (...args: any[]) => void) =>
debounce(fn, 0, { leading: true, trailing: false })

@observer
export class ColorSchemeSelector extends React.Component<{
grapher: Grapher
Expand Down Expand Up @@ -307,10 +310,6 @@ class TimelineSection<
return this.props.editor.grapher
}

@computed get activeParentConfig() {
return this.props.editor.activeParentConfig
}

@computed get minTime() {
return this.grapher.minTime
}
Expand All @@ -333,14 +332,25 @@ class TimelineSection<
this.grapher.maxTime = value ?? TimeBoundValue.positiveInfinity
}

@action.bound onBlurMinTime() {
if (this.minTime === undefined) {
this.grapher.minTime = TimeBoundValue.negativeInfinity
}
}

@action.bound onBlurMaxTime() {
if (this.maxTime === undefined) {
this.grapher.maxTime = TimeBoundValue.positiveInfinity
}
}

@action.bound onTimelineMinTime(value: number | undefined) {
this.grapher.timelineMinTime = value
}

@action.bound onBlurTimelineMinTime() {
if (this.grapher.timelineMinTime === undefined) {
this.grapher.timelineMinTime =
this.activeParentConfig?.timelineMinTime
this.grapher.timelineMinTime = TimeBoundValue.negativeInfinity
}
}

Expand All @@ -350,8 +360,7 @@ class TimelineSection<

@action.bound onBlurTimelineMaxTime() {
if (this.grapher.timelineMaxTime === undefined) {
this.grapher.timelineMaxTime =
this.activeParentConfig?.timelineMaxTime
this.grapher.timelineMaxTime = TimeBoundValue.positiveInfinity
}
}

Expand All @@ -374,7 +383,9 @@ class TimelineSection<
<NumberField
label="Selection start"
value={this.minTime}
onValue={debounce(this.onMinTime)}
// invoke on the leading edge to avoid interference with onBlur
onValue={debounceOnLeadingEdge(this.onMinTime)}
onBlur={this.onBlurMinTime}
allowNegative
/>
)}
Expand All @@ -385,7 +396,9 @@ class TimelineSection<
: "Selected year"
}
value={this.maxTime}
onValue={debounce(this.onMaxTime)}
// invoke on the leading edge to avoid interference with onBlur
onValue={debounceOnLeadingEdge(this.onMaxTime)}
onBlur={this.onBlurMaxTime}
allowNegative
/>
</FieldsRow>
Expand All @@ -395,21 +408,19 @@ class TimelineSection<
label="Timeline min"
value={this.timelineMinTime}
// invoke on the leading edge to avoid interference with onBlur
onValue={debounce(this.onTimelineMinTime, 0, {
leading: true,
trailing: false,
})}
onValue={debounceOnLeadingEdge(
this.onTimelineMinTime
)}
onBlur={this.onBlurTimelineMinTime}
allowNegative
/>
<NumberField
label="Timeline max"
value={this.timelineMaxTime}
// invoke on the leading edge to avoid interference with onBlur
onValue={debounce(this.onTimelineMaxTime, 0, {
leading: true,
trailing: false,
})}
onValue={debounceOnLeadingEdge(
this.onTimelineMaxTime
)}
onBlur={this.onBlurTimelineMaxTime}
allowNegative
/>
Expand Down Expand Up @@ -527,12 +538,6 @@ export class EditorCustomizeTab<
onValue={(value) =>
(yAxisConfig.min = value)
}
onBlur={() => {
if (yAxisConfig.min === undefined) {
yAxisConfig.min =
activeParentConfig?.yAxis?.min
}
}}
allowDecimal
allowNegative
/>
Expand All @@ -542,12 +547,6 @@ export class EditorCustomizeTab<
onValue={(value) =>
(yAxisConfig.max = value)
}
onBlur={() => {
if (yAxisConfig.max === undefined) {
yAxisConfig.max =
activeParentConfig?.yAxis?.max
}
}}
allowDecimal
allowNegative
/>
Expand Down Expand Up @@ -612,12 +611,6 @@ export class EditorCustomizeTab<
onValue={(value) =>
(xAxisConfig.min = value)
}
onBlur={() => {
if (xAxisConfig.min === undefined) {
xAxisConfig.min =
activeParentConfig?.yAxis?.min
}
}}
allowDecimal
allowNegative
/>
Expand All @@ -627,12 +620,6 @@ export class EditorCustomizeTab<
onValue={(value) =>
(xAxisConfig.max = value)
}
onBlur={() => {
if (xAxisConfig.max === undefined) {
xAxisConfig.max =
activeParentConfig?.yAxis?.max
}
}}
allowDecimal
allowNegative
/>
Expand Down
37 changes: 21 additions & 16 deletions adminSiteClient/EditorTextTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,9 @@ export class EditorTextTab<
<Section name="Header">
<BindAutoStringExt
label="Title"
readFn={({ grapher }) => grapher.displayTitle}
writeFn={({ grapher }, newVal) =>
(grapher.title = newVal)
}
readAutoFn={({ editor }) =>
readFn={(grapher) => grapher.displayTitle}
writeFn={(grapher, newVal) => (grapher.title = newVal)}
auto={
editor.couldPropertyBeInherited("title")
? editor.activeParentConfig!.title
: undefined
Expand All @@ -106,7 +104,7 @@ export class EditorTextTab<
editor.isPropertyInherited("title") ||
grapher.title === undefined
}
store={{ grapher, editor }}
store={grapher}
softCharacterLimit={100}
/>
{features.showEntityAnnotationInTitleToggle && (
Expand Down Expand Up @@ -156,11 +154,11 @@ export class EditorTextTab<
/>
<BindAutoStringExt
label="Subtitle"
readFn={({ grapher }) => grapher.currentSubtitle}
writeFn={({ grapher }, newVal) =>
readFn={(grapher) => grapher.currentSubtitle}
writeFn={(grapher, newVal) =>
(grapher.subtitle = newVal)
}
readAutoFn={({ editor }) =>
auto={
editor.couldPropertyBeInherited("subtitle")
? editor.activeParentConfig!.subtitle
: undefined
Expand All @@ -169,7 +167,7 @@ export class EditorTextTab<
editor.isPropertyInherited("subtitle") ||
grapher.subtitle === undefined
}
store={{ grapher, editor }}
store={grapher}
placeholder="Briefly describe the context of the data. It's best to avoid duplicating any information which can be easily inferred from other visual elements of the chart."
textarea
softCharacterLimit={280}
Expand All @@ -192,11 +190,11 @@ export class EditorTextTab<
<Section name="Footer">
<BindAutoStringExt
label="Source"
readFn={({ grapher }) => grapher.sourcesLine}
writeFn={({ grapher }, newVal) =>
readFn={(grapher) => grapher.sourcesLine}
writeFn={(grapher, newVal) =>
(grapher.sourceDesc = newVal)
}
readAutoFn={({ editor }) =>
auto={
editor.couldPropertyBeInherited("sourceDesc")
? editor.activeParentConfig!.sourceDesc
: undefined
Expand All @@ -205,7 +203,7 @@ export class EditorTextTab<
editor.isPropertyInherited("sourceDesc") ||
grapher.sourceDesc === undefined
}
store={{ grapher, editor }}
store={grapher}
helpText="Short comma-separated list of source names"
softCharacterLimit={60}
/>
Expand Down Expand Up @@ -233,9 +231,16 @@ export class EditorTextTab<
</div>
)}

<BindString
<BindAutoStringExt
label="Footer note"
field="note"
readFn={(grapher) => grapher.note ?? ""}
writeFn={(grapher, newVal) => (grapher.note = newVal)}
auto={
editor.couldPropertyBeInherited("note")
? editor.activeParentConfig?.note
: undefined
}
isAuto={editor.isPropertyInherited("note")}
store={grapher}
helpText="Any important clarification needed to avoid miscommunication"
softCharacterLimit={140}
Expand Down
Loading

0 comments on commit 58bcb8b

Please sign in to comment.