✨ (admin) improve support for focusing series

adminSiteClient/AbstractChartEditor.ts

@@ -5,6 +5,8 @@ import {
     diffGrapherConfigs,
     mergeGrapherConfigs,
     PostReference,
+    SeriesName,
+    difference,
 } from "@ourworldindata/utils"
 import { action, computed, observable, when } from "mobx"
 import { EditorFeatures } from "./EditorFeatures.js"
@@ -163,6 +165,24 @@ export abstract class AbstractChartEditor<
         return Object.hasOwn(this.activeParentConfig, property)
     }
 
+    @computed get invalidFocusedSeriesNames(): SeriesName[] {
+        const { grapher } = this
+
+        // if focusing is not supported, then all focused series are invalid
+        if (!this.features.canHighlightSeries) {
+            return grapher.focusArray.seriesNames
+        }
+
+        // find invalid focused series
+        const availableSeriesNames = grapher.chartSeriesNames
+        const focusedSeriesNames = grapher.focusArray.seriesNames
+        return difference(focusedSeriesNames, availableSeriesNames)
+    }
+
+    @action.bound removeInvalidFocusedSeriesNames(): void {
+        this.grapher.focusArray.remove(...this.invalidFocusedSeriesNames)
+    }
+
     abstract get isNewGrapher(): boolean
     abstract get availableTabs(): EditorTab[]
 

adminSiteClient/ChartEditorTypes.ts

@@ -6,13 +6,8 @@ export type FieldWithDetailReferences =
     | "axisLabelX"
     | "axisLabelY"
 
-export interface DimensionErrorMessage {
-    displayName?: string
-}
+type ErrorMessageFieldName = FieldWithDetailReferences | "focusedSeriesNames"
 
-export type ErrorMessages = Partial<Record<FieldWithDetailReferences, string>>
+export type ErrorMessages = Partial<Record<ErrorMessageFieldName, string>>
 
-export type ErrorMessagesForDimensions = Record<
-    DimensionProperty,
-    DimensionErrorMessage[]
->
+export type ErrorMessagesForDimensions = Record<DimensionProperty, string[]>

adminSiteClient/ChartEditorView.tsx

@@ -265,6 +265,14 @@ export class ChartEditorView<
             }
         )
 
+        // add an error message if any focused series names are invalid
+        const { invalidFocusedSeriesNames = [] } = this.editor ?? {}
+        if (invalidFocusedSeriesNames.length > 0) {
+            const invalidNames = invalidFocusedSeriesNames.join(", ")
+            const message = `Invalid focus state. The following entities/indicators are not plotted: ${invalidNames}`
+            errorMessages.focusedSeriesNames = message
+        }
+
         return errorMessages
     }
 
@@ -287,9 +295,8 @@ export class ChartEditorView<
 
                 // add error message if details are referenced in the display name
                 if (hasDetailsInDisplayName) {
-                    errorMessages[slot.property][dimensionIndex] = {
-                        displayName: "Detail syntax is not supported",
-                    }
+                    errorMessages[slot.property][dimensionIndex] =
+                        `Detail syntax is not supported for display names of indicators: ${dimension.display.name}`
                 }
             })
         })

adminSiteClient/DimensionCard.tsx

@@ -4,7 +4,6 @@ import { observer } from "mobx-react"
 import { ChartDimension } from "@ourworldindata/grapher"
 import { OwidColumnDef, OwidVariableRoundingMode } from "@ourworldindata/types"
 import { startCase } from "@ourworldindata/utils"
-import { DimensionErrorMessage } from "./ChartEditorTypes.js"
 import {
     Toggle,
     BindAutoString,
@@ -35,7 +34,7 @@ export class DimensionCard<
     onChange: (dimension: ChartDimension) => void
     onEdit?: () => void
     onRemove?: () => void
-    errorMessage?: DimensionErrorMessage
+    errorMessage?: string
 }> {
     @observable.ref isExpanded: boolean = false
 
@@ -171,7 +170,7 @@ export class DimensionCard<
                             store={dimension.display}
                             auto={column.displayName}
                             onBlur={this.onChange}
-                            errorMessage={this.props.errorMessage?.displayName}
+                            errorMessage={this.props.errorMessage}
                         />
                         <BindAutoString
                             label="Unit of measurement"

adminSiteClient/EditorBasicTab.tsx

@@ -14,14 +14,12 @@ import {
     ALL_GRAPHER_CHART_TYPES,
     GrapherChartType,
     GRAPHER_CHART_TYPES,
-    SeriesName,
 } from "@ourworldindata/types"
 import {
     DimensionSlot,
     WorldEntityName,
     CONTINENTS_INDICATOR_ID,
     POPULATION_INDICATOR_ID_USED_IN_ADMIN,
-    Grapher,
 } from "@ourworldindata/grapher"
 import {
     DimensionProperty,
@@ -31,7 +29,6 @@ import {
     sampleSize,
     startCase,
     OwidChartDimensionInterface,
-    differenceOfSets,
 } from "@ourworldindata/utils"
 import { FieldsRow, Section, SelectField, Toggle } from "./Forms.js"
 import { VariableSelector } from "./VariableSelector.js"
@@ -64,6 +61,10 @@ class DimensionSlotView<
 
     @observable.ref isSelectingVariables: boolean = false
 
+    private get editor() {
+        return this.props.editor
+    }
+
     private get grapher() {
         return this.props.editor.grapher
     }
@@ -145,20 +146,6 @@ class DimensionSlotView<
         }
     }
 
-    @action.bound private validateFocusedSeriesNames(): void {
-        const { grapher } = this.props.editor
-
-        // focus state is only supported for line and slope charts
-        if (!grapher.hasLineChart && !grapher.hasSlopeChart) {
-            grapher.focusArray.clear()
-            return
-        }
-
-        // sync focused series names by removing invalid ones
-        const invalidFocusedSeriesNames = findInvalidFocusedSeriesNames(grapher)
-        grapher.focusArray.remove(...invalidFocusedSeriesNames)
-    }
-
     componentDidMount() {
         // We want to add the reaction only after the grapher is loaded,
         // so we don't update the initial chart (as configured) by accident.
@@ -170,14 +157,14 @@ class DimensionSlotView<
                         () => this.grapher.validChartTypes,
                         () => {
                             this.updateDefaultSelection()
-                            this.validateFocusedSeriesNames()
+                            this.editor.removeInvalidFocusedSeriesNames()
                         }
                     ),
                     reaction(
                         () => this.grapher.yColumnsFromDimensions.length,
                         () => {
                             this.updateDefaultSelection()
-                            this.validateFocusedSeriesNames()
+                            this.editor.removeInvalidFocusedSeriesNames()
                         }
                     )
                 )
@@ -531,12 +518,3 @@ function IndicatorChartInfo(props: { editor: IndicatorChartEditor }) {
         </Section>
     )
 }
-
-export function findInvalidFocusedSeriesNames(grapher: Grapher): SeriesName[] {
-    const availableSeriesNames = new Set(grapher.chartSeriesNames)
-    const focusedSeriesNames = grapher.focusArray.seriesNameSet
-
-    return Array.from(
-        differenceOfSets([focusedSeriesNames, availableSeriesNames])
-    )
-}

adminSiteClient/EditorDataTab.tsx

@@ -30,7 +30,6 @@ import {
     DropResult,
 } from "react-beautiful-dnd"
 import { AbstractChartEditor } from "./AbstractChartEditor.js"
-import { findInvalidFocusedSeriesNames } from "./EditorBasicTab.js"
 
 interface EntityListItemProps extends React.HTMLProps<HTMLDivElement> {
     grapher: Grapher
@@ -143,12 +142,12 @@ export class EntitySelectionSection extends React.Component<{
 
     @action.bound onAddKey(entityName: EntityName) {
         this.editor.grapher.selection.selectEntity(entityName)
-        this.syncFocusedSeriesNames()
+        this.editor.removeInvalidFocusedSeriesNames()
     }
 
     @action.bound onRemoveKey(entityName: EntityName) {
         this.editor.grapher.selection.deselectEntity(entityName)
-        this.syncFocusedSeriesNames()
+        this.editor.removeInvalidFocusedSeriesNames()
     }
 
     @action.bound onDragEnd(result: DropResult) {
@@ -171,12 +170,7 @@ export class EntitySelectionSection extends React.Component<{
         grapher.selection.setSelectedEntities(
             activeParentConfig.selectedEntityNames
         )
-    }
-
-    @action.bound private syncFocusedSeriesNames(): void {
-        const { grapher } = this.props.editor
-        const invalidFocusedSeriesNames = findInvalidFocusedSeriesNames(grapher)
-        grapher.focusArray.remove(...invalidFocusedSeriesNames)
+        this.editor.removeInvalidFocusedSeriesNames()
     }
 
     render() {
@@ -287,10 +281,23 @@ export class FocusSection extends React.Component<{
         this.editor.grapher.focusArray.remove(seriesName)
     }
 
+    @action.bound setFocusedSeriesNamesToParentValue() {
+        const { grapher, activeParentConfig } = this.editor
+        if (!activeParentConfig || !activeParentConfig.focusedSeriesNames)
+            return
+        grapher.focusArray.clearAllAndAdd(
+            ...activeParentConfig.focusedSeriesNames
+        )
+        this.editor.removeInvalidFocusedSeriesNames()
+    }
+
     render() {
         const { editor } = this
         const { grapher } = editor
 
+        const isFocusInherited =
+            editor.isPropertyInherited("focusedSeriesNames")
+
         const focusedSeriesNameSet = grapher.focusArray.seriesNameSet
         const focusedSeriesNames = grapher.focusArray.seriesNames
 
@@ -300,13 +307,19 @@ export class FocusSection extends React.Component<{
             seriesNameSet,
             focusedSeriesNameSet,
         ])
+
+        // focusing only makes sense for two or more plotted series
+        if (focusedSeriesNameSet.size === 0 && availableSeriesNameSet.size < 2)
+            return null
+
         const availableSeriesNames: SeriesName[] = sortBy(
             Array.from(availableSeriesNameSet)
         )
 
-        const invalidFocusedSeriesNames = new Set(
-            findInvalidFocusedSeriesNames(grapher)
-        )
+        const invalidFocusedSeriesNames = differenceOfSets([
+            focusedSeriesNameSet,
+            seriesNameSet,
+        ])
 
         return (
             <Section name="Data to highlight">
@@ -318,6 +331,20 @@ export class FocusSection extends React.Component<{
                             .concat(availableSeriesNames)
                             .map((key) => ({ value: key }))}
                     />
+                    {editor.couldPropertyBeInherited("focusedSeriesNames") && (
+                        <button
+                            className="btn btn-outline-secondary"
+                            type="button"
+                            style={{ maxWidth: "min-content" }}
+                            title="Reset to parent focus"
+                            onClick={this.setFocusedSeriesNamesToParentValue}
+                            disabled={isFocusInherited}
+                        >
+                            <FontAwesomeIcon
+                                icon={isFocusInherited ? faLink : faUnlink}
+                            />
+                        </button>
+                    )}
                 </FieldsRow>
                 {focusedSeriesNames.map((seriesName) => (
                     <SeriesListItem
@@ -450,7 +477,9 @@ export class EditorDataTab<
                     </div>
                 </Section>
                 <EntitySelectionSection editor={editor} />
-                <FocusSection editor={editor} />
+                {features.canHighlightSeries && (
+                    <FocusSection editor={editor} />
+                )}
                 {features.canSpecifyMissingDataStrategy && (
                     <MissingDataSection editor={this.props.editor} />
                 )}

adminSiteClient/EditorExportTab.tsx

@@ -211,6 +211,7 @@ export class EditorExportTab<
                     staticFormat: format,
                     selectedEntityNames:
                         this.grapher.selection.selectedEntityNames,
+                    focusedSeriesNames: this.grapher.focusedSeriesNames,
                     isSocialMediaExport,
                 })
             }

adminSiteClient/EditorFeatures.tsx

@@ -156,4 +156,11 @@ export class EditorFeatures {
             )
         )
     }
+
+    @computed get canHighlightSeries() {
+        return (
+            (this.grapher.hasLineChart || this.grapher.hasSlopeChart) &&
+            this.grapher.isOnChartTab
+        )
+    }
 }