🔨 remove availableEntities from SelectionArray

adminSiteClient/EditorBasicTab.tsx

@@ -124,7 +124,9 @@ class DimensionSlotView<
     @action.bound private updateDefaultSelection() {
         const { grapher } = this.props.editor
         const { selection } = grapher
-        const { availableEntityNames, availableEntityNameSet } = selection
+
+        const availableEntityNames = grapher.availableEntityNames
+        const availableEntityNameSet = new Set(grapher.availableEntityNames)
 
         if (grapher.isScatter || grapher.isMarimekko) {
             // chart types that display all entities by default shouldn't select any by default

adminSiteClient/EditorDataTab.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import {
+    difference,
     differenceOfSets,
     moveArrayItemToIndex,
     omit,
@@ -179,7 +180,12 @@ export class EntitySelectionSection extends React.Component<{
         const { editor } = this
         const { grapher } = editor
         const { selection } = grapher
-        const { unselectedEntityNames, selectedEntityNames } = selection
+        const { selectedEntityNames } = selection
+
+        const unselectedEntityNames = difference(
+            grapher.availableEntityNames,
+            selectedEntityNames
+        )
 
         const isEntitySelectionInherited = editor.isPropertyInherited(
             "selectedEntityNames"
@@ -450,7 +456,6 @@ class EntityFilterSection<
     @action.bound validateSelectionAndFocus() {
         this.editor.removeInvalidSelectedEntityNames()
         this.editor.removeInvalidFocusedSeriesNames()
-        this.editor.grapher.updateAvailableEntitiesOfSelection()
     }
 
     @action.bound onExcludeEntity(entityName: string) {

packages/@ourworldindata/explorer/src/Explorer.tsx

@@ -9,6 +9,7 @@ import {
     GrapherInterface,
     GrapherQueryParams,
     GRAPHER_TAB_QUERY_PARAMS,
+    EntityName,
 } from "@ourworldindata/types"
 import {
     OwidTable,
@@ -476,10 +477,13 @@ export class Explorer
     @action.bound private setGrapherTable(table: OwidTable) {
         if (this.grapher) {
             this.grapher.inputTable = table
-            this.grapher.updateAvailableEntitiesOfSelection()
         }
     }
 
+    @computed get availableEntityNames(): EntityName[] {
+        return this.grapher?.availableEntityNames ?? []
+    }
+
     private futureGrapherTable = new PromiseSwitcher<OwidTable>({
         onResolve: (table) => this.setGrapherTable(table),
         onReject: (error) => this.grapher?.setError(error),

packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.test.ts

@@ -16,7 +16,7 @@ import { OwidDistinctColorScheme } from "../color/CustomSchemes"
 
 it("can create a new bar chart", () => {
     const table = SynthesizeGDPTable({ timeRange: [2000, 2001] })
-    const selection = new SelectionArray([], table.availableEntities)
+    const selection = new SelectionArray()
     const manager: DiscreteBarChartManager = {
         table,
         selection,
@@ -26,7 +26,7 @@ it("can create a new bar chart", () => {
     const chart = new DiscreteBarChart({ manager })
 
     expect(chart.failMessage).toBeTruthy()
-    selection.selectAll()
+    selection.setSelectedEntities(table.availableEntityNames)
     expect(chart.failMessage).toEqual("")
 
     const series = chart.series

packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx

@@ -177,7 +177,8 @@ export class EntityPicker extends React.Component<{
     }
 
     @computed private get availableEntitiesForCurrentView(): Set<string> {
-        if (!this.grapherTable) return this.selection.availableEntityNameSet
+        if (!this.grapherTable)
+            return new Set(this.manager.availableEntityNames)
         if (!this.manager.requiredColumnSlugs?.length)
             return this.grapherTable.availableEntityNameSet
         return this.grapherTable.entitiesWith(this.manager.requiredColumnSlugs)
@@ -209,9 +210,10 @@ export class EntityPicker extends React.Component<{
 
     @computed
     private get entitiesWithMetricValue(): EntityOptionWithMetricValue[] {
-        const { metricTable, selection, localEntityNames } = this
+        const { metricTable, localEntityNames } = this
         const col = this.activePickerMetricColumn
-        const entityNames = selection.availableEntityNames.slice().sort()
+        const entityNames =
+            this.manager.availableEntityNames?.slice().sort() ?? []
         return entityNames.map((entityName) => {
             const plotValue =
                 col && metricTable?.has(col.slug)

packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPickerConstants.ts

@@ -1,7 +1,7 @@
 import { ColumnSlug } from "@ourworldindata/utils"
 import { GrapherAnalytics } from "../../core/GrapherAnalytics"
 import { OwidTable } from "@ourworldindata/core-table"
-import { CoreColumnDef, SortOrder } from "@ourworldindata/types"
+import { CoreColumnDef, EntityName, SortOrder } from "@ourworldindata/types"
 import { SelectionArray } from "../../selection/SelectionArray"
 import { FocusArray } from "../../focus/FocusArray"
 
@@ -21,4 +21,5 @@ export interface EntityPickerManager {
     entityType?: string
     analytics?: GrapherAnalytics
     focusArray?: FocusArray
+    availableEntityNames?: EntityName[]
 }

packages/@ourworldindata/grapher/src/core/Grapher.jsdom.test.ts

@@ -184,7 +184,7 @@ it("can generate a url with country selection even if there is no entity code",
     }
     const grapher = new Grapher(config)
     expect(grapher.queryStr).toBe("")
-    grapher.selection.selectAll()
+    grapher.selection.setSelectedEntities(grapher.availableEntityNames)
     expect(grapher.queryStr).toContain("AFG")
 
     const config2 = {
@@ -196,7 +196,7 @@ it("can generate a url with country selection even if there is no entity code",
     )!.code = undefined as any
     const grapher2 = new Grapher(config2)
     expect(grapher2.queryStr).toBe("")
-    grapher2.selection.selectAll()
+    grapher2.selection.setSelectedEntities(grapher.availableEntityNames)
     expect(grapher2.queryStr).toContain("AFG")
 })
 

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

@@ -521,10 +521,7 @@ export class Grapher
 
     selection =
         this.manager?.selection ??
-        new SelectionArray(
-            this.props.selectedEntityNames ?? [],
-            this.props.table?.availableEntities ?? []
-        )
+        new SelectionArray(this.props.selectedEntityNames ?? [])
 
     focusArray = this.manager?.focusArray ?? new FocusArray()
 
@@ -1218,8 +1215,6 @@ export class Grapher
         // transformation (can happen when columns use targetTime)
         this.setDimensionsFromConfigs(dimensions)
 
-        this.updateAvailableEntitiesOfSelection()
-
         if (this.manager?.selection?.hasSelection) {
             // Selection is managed externally, do nothing.
         } else if (this.selection.hasSelection) {
@@ -1251,10 +1246,6 @@ export class Grapher
         this.rebuildInputOwidTable(inputTableTransformer)
     }
 
-    @action.bound updateAvailableEntitiesOfSelection(): void {
-        this.selection.setAvailableEntityNames(this.availableEntities)
-    }
-
     @action.bound private applyOriginalSelectionAsAuthored(): void {
         if (this.selectedEntityNames?.length)
             this.selection.setSelectedEntities(this.selectedEntityNames)
@@ -2665,6 +2656,12 @@ export class Grapher
         return this.tableForSelection.availableEntities
     }
 
+    @computed get availableEntityNames(): EntityName[] {
+        return this.tableForSelection.availableEntities.map(
+            (entity) => entity.entityName
+        )
+    }
+
     private get keyboardShortcuts(): Command[] {
         const temporaryFacetTestCommands = range(0, 10).map((num) => {
             return {
@@ -2693,7 +2690,9 @@ export class Grapher
                         this.selection.clearSelection()
                         this.focusArray.clear()
                     } else {
-                        this.selection.selectAll()
+                        this.selection.setSelectedEntities(
+                            this.availableEntityNames
+                        )
                     }
                 },
                 title: this.selection.hasSelection
@@ -2921,7 +2920,7 @@ export class Grapher
         const currentSelection = this.selection.selectedEntityNames.length
         const newNum = num ? num : currentSelection ? currentSelection * 2 : 10
         this.selection.setSelectedEntities(
-            sampleFrom(this.selection.availableEntityNames, newNum, Date.now())
+            sampleFrom(this.availableEntityNames, newNum, Date.now())
         )
     }
 
@@ -3811,7 +3810,7 @@ export class Grapher
     // we may still want to show those entities as available in a picker. We also do not want to do things like
     // hide the Add Entity button as the user drags the timeline.
     @computed private get numSelectableEntityNames(): number {
-        return this.selection.numAvailableEntityNames
+        return this.availableEntities.length
     }
 
     @computed get entitiesAreCountryLike(): boolean {

packages/@ourworldindata/grapher/src/selection/SelectionArray.test.ts

@@ -3,13 +3,10 @@
 import { SelectionArray } from "./SelectionArray"
 
 it("can create a selection", () => {
-    const selection = new SelectionArray(
-        [],
-        [{ entityName: "USA" }, { entityName: "Canada" }]
-    )
+    const selection = new SelectionArray()
     expect(selection.hasSelection).toEqual(false)
 
-    selection.selectAll()
+    selection.setSelectedEntities(["USA", "Canada"])
     expect(selection.hasSelection).toEqual(true)
     expect(selection.selectedEntityNames).toEqual(["USA", "Canada"])
 })

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

@@ -1,5 +1,4 @@
 import { EntityCode, EntityId, EntityName } from "@ourworldindata/types"
-import { difference } from "@ourworldindata/utils"
 import { action, computed, observable } from "mobx"
 
 export interface Entity {
@@ -9,33 +8,16 @@ export interface Entity {
 }
 
 export class SelectionArray {
-    constructor(
-        selectedEntityNames: EntityName[] = [],
-        availableEntities: Entity[] = []
-    ) {
+    constructor(selectedEntityNames: EntityName[] = []) {
         this.selectedEntityNames = selectedEntityNames.slice()
-        this.availableEntities = availableEntities.slice()
     }
 
     @observable selectedEntityNames: EntityName[]
-    @observable private availableEntities: Entity[]
-
-    @computed get availableEntityNames(): string[] {
-        return this.availableEntities.map((entity) => entity.entityName)
-    }
-
-    @computed get availableEntityNameSet(): Set<string> {
-        return new Set(this.availableEntityNames)
-    }
 
     @computed get hasSelection(): boolean {
         return this.selectedEntityNames.length > 0
     }
 
-    @computed get unselectedEntityNames(): string[] {
-        return difference(this.availableEntityNames, this.selectedEntityNames)
-    }
-
     @computed get numSelectedEntities(): number {
         return this.selectedEntityNames.length
     }
@@ -55,20 +37,6 @@ export class SelectionArray {
         return this
     }
 
-    @action.bound addAvailableEntityNames(entities: Entity[]): this {
-        this.availableEntities.push(...entities)
-        return this
-    }
-
-    @action.bound setAvailableEntityNames(entities: Entity[]): this {
-        this.availableEntities = entities
-        return this
-    }
-
-    @action.bound selectAll(): this {
-        return this.addToSelection(this.unselectedEntityNames)
-    }
-
     @action.bound clearSelection(): void {
         this.selectedEntityNames = []
     }
@@ -79,10 +47,6 @@ export class SelectionArray {
             : this.selectEntity(entityName)
     }
 
-    @computed get numAvailableEntityNames(): number {
-        return this.availableEntityNames.length
-    }
-
     @action.bound selectEntity(entityName: EntityName): this {
         if (!this.selectedSet.has(entityName))
             return this.addToSelection([entityName])
@@ -107,11 +71,4 @@ export class SelectionArray {
         )
         return this
     }
-
-    // Mainly for testing
-    @action.bound selectSample(howMany = 1): this {
-        return this.setSelectedEntities(
-            this.availableEntityNames.slice(0, howMany)
-        )
-    }
 }

packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.test.ts

@@ -110,10 +110,7 @@ describe("series naming in multi-column mode", () => {
     })
 
     it("combines entity and column name if multiple entities are selected and multi entity selection is disabled", () => {
-        const selection = new SelectionArray(
-            table.availableEntityNames,
-            table.availableEntities
-        )
+        const selection = new SelectionArray(table.availableEntityNames)
         const manager = {
             table,
             canSelectMultipleEntities: false,
@@ -242,10 +239,7 @@ describe("colors", () => {
             ]
         )
 
-        const selection = new SelectionArray(
-            ["usa", "canada"],
-            [{ entityName: "usa" }, { entityName: "canada" }]
-        )
+        const selection = new SelectionArray(["usa", "canada"])
         const manager: SlopeChartManager = {
             yColumnSlugs: ["gdp", "pop"],
             table: table,