🎉 (admin) edit focused entities/columns

Author: sophiamersmann

adminSiteClient/EditorDataTab.tsx

@@ -1,11 +1,16 @@
 import React from "react"
-import { moveArrayItemToIndex, omit } from "@ourworldindata/utils"
+import {
+    differenceOfSets,
+    moveArrayItemToIndex,
+    omit,
+} from "@ourworldindata/utils"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
 import {
     EntitySelectionMode,
     MissingDataStrategy,
     EntityName,
+    SeriesName,
 } from "@ourworldindata/types"
 import { Grapher } from "@ourworldindata/grapher"
 import { ColorBox, SelectField, Section, FieldsRow } from "./Forms.js"
@@ -30,6 +35,11 @@ interface EntityItemProps extends React.HTMLProps<HTMLDivElement> {
     onRemove?: () => void
 }
 
+interface SeriesItemProps extends React.HTMLProps<HTMLDivElement> {
+    seriesName: SeriesName
+    onRemove?: () => void
+}
+
 @observer
 class EntityItem extends React.Component<EntityItemProps> {
     @observable.ref isChoosingColor: boolean = false
@@ -88,6 +98,32 @@ class EntityItem extends React.Component<EntityItemProps> {
     }
 }
 
+@observer
+class SeriesItem extends React.Component<SeriesItemProps> {
+    @action.bound onRemove() {
+        this.props.onRemove?.()
+    }
+
+    render() {
+        const { props } = this
+        const { seriesName } = props
+        const rest = omit(props, ["seriesName", "onRemove"])
+
+        return (
+            <div
+                className="list-group-item EditableListItem"
+                key={seriesName}
+                {...rest}
+            >
+                <div>{seriesName}</div>
+                <div className="clickable" onClick={this.onRemove}>
+                    <FontAwesomeIcon icon={faTimes} />
+                </div>
+            </div>
+        )
+    }
+}
+
 @observer
 export class KeysSection extends React.Component<{
     editor: AbstractChartEditor
@@ -216,6 +252,58 @@ export class KeysSection extends React.Component<{
     }
 }
 
+@observer
+export class FocusSection extends React.Component<{
+    editor: AbstractChartEditor
+}> {
+    @computed get editor() {
+        return this.props.editor
+    }
+
+    @action.bound onFocusSeries(seriesName: SeriesName) {
+        this.editor.grapher.focusArray.activate(seriesName)
+    }
+
+    render() {
+        const { editor } = this
+        const { grapher } = editor
+
+        const seriesNameSet = new Set(grapher.chartSeriesNames)
+        const focusedSeriesNameSet = grapher.focusArray.activeSeriesNameSet
+        const availableSeriesNameSet = differenceOfSets<string>([
+            seriesNameSet,
+            focusedSeriesNameSet,
+        ])
+
+        const availableSeriesNames: SeriesName[] = Array.from(
+            availableSeriesNameSet
+        )
+        const focusedSeriesNames: SeriesName[] =
+            Array.from(focusedSeriesNameSet)
+
+        return (
+            <Section name="Data to highlight">
+                <FieldsRow>
+                    <SelectField
+                        onValue={this.onFocusSeries}
+                        value="Select data"
+                        options={["Select data"]
+                            .concat(availableSeriesNames)
+                            .map((key) => ({ value: key }))}
+                    />
+                </FieldsRow>
+                {focusedSeriesNames.map((seriesName) => (
+                    <SeriesItem
+                        key={seriesName}
+                        seriesName={seriesName}
+                        onRemove={() => grapher.focusArray.toggle(seriesName)}
+                    />
+                ))}
+            </Section>
+        )
+    }
+}
+
 @observer
 class MissingDataSection<
     Editor extends AbstractChartEditor,
@@ -332,6 +420,7 @@ export class EditorDataTab<
                     </div>
                 </Section>
                 <KeysSection editor={editor} />
+                <FocusSection editor={editor} />
                 {features.canSpecifyMissingDataStrategy && (
                     <MissingDataSection editor={this.props.editor} />
                 )}

packages/@ourworldindata/grapher/src/core/Grapher.tsx

@@ -875,6 +875,10 @@ export class Grapher
         return new ChartClass({ manager: this })
     }
 
+    @computed get chartSeriesNames(): SeriesName[] {
+        return this.chartInstance.series.map((series) => series.seriesName)
+    }
+
     @computed get table(): OwidTable {
         return this.tableAfterAuthorTimelineFilter
     }

packages/@ourworldindata/grapher/src/selection/InteractionArray.ts

@@ -12,6 +12,10 @@ export class InteractionArray {
 
     @observable private activeSet: Set<SeriesName>
 
+    @computed get activeSeriesNameSet(): Set<SeriesName> {
+        return this.activeSet
+    }
+
     @computed get activeSeriesNames(): SeriesName[] {
         return Array.from(this.activeSet)
     }