Merge pull request #4433 from owid/fix-filtered-data-download

🐛 take table filter toggle into account for data download / TAS-796

functions/_common/downloadFunctions.ts

@@ -68,10 +68,12 @@ export async function fetchZipForGrapher(
 }
 function assembleCsv(grapher: Grapher, searchParams: URLSearchParams): string {
     const useShortNames = searchParams.get("useColumnShortNames") === "true"
+    const fullTable = grapher.inputTable
+    const filteredTable = grapher.isOnTableTab
+        ? grapher.tableForDisplay
+        : grapher.transformedTable
     const table =
-        searchParams.get("csvType") === "filtered"
-            ? grapher.transformedTable
-            : grapher.inputTable
+        searchParams.get("csvType") === "filtered" ? filteredTable : fullTable
     return table.toPrettyCsv(useShortNames)
 }
 

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

@@ -158,7 +158,7 @@ import { isOnTheMap } from "../mapCharts/EntitiesOnTheMap"
 import { ChartManager } from "../chart/ChartManager"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons"
-import { SettingsMenuManager } from "../controls/SettingsMenu"
+import { SettingsMenu, SettingsMenuManager } from "../controls/SettingsMenu"
 import { TooltipContainer } from "../tooltip/Tooltip"
 import {
     EntitySelectorModal,
@@ -811,13 +811,48 @@ export class Grapher
         return !this.hideLegend
     }
 
+    @computed private get showsAllEntitiesInChart(): boolean {
+        return this.isScatter || this.isMarimekko
+    }
+
+    @computed private get settingsMenu(): SettingsMenu {
+        return new SettingsMenu({ manager: this, top: 0, bottom: 0, right: 0 })
+    }
+
+    /**
+     * If the table filter toggle isn't offered, then we default to
+     * to showing only the selected entities – unless there is a view
+     * that displays all data points, like a map or a scatter plot.
+     */
+    @computed get forceShowSelectionOnlyInDataTable(): boolean {
+        return (
+            !this.settingsMenu.showTableFilterToggle &&
+            this.hasChartTab &&
+            !this.showsAllEntitiesInChart &&
+            !this.hasMapTab
+        )
+    }
+
     // table that is used for display in the table tab
     @computed get tableForDisplay(): OwidTable {
-        const table = this.table
+        let table = this.table
+
         if (!this.isReady || !this.isOnTableTab) return table
-        return this.chartInstance.transformTableForDisplay
-            ? this.chartInstance.transformTableForDisplay(table)
-            : table
+
+        if (this.chartInstance.transformTableForDisplay) {
+            table = this.chartInstance.transformTableForDisplay(table)
+        }
+
+        if (
+            this.forceShowSelectionOnlyInDataTable ||
+            this.showSelectionOnlyInDataTable
+        ) {
+            table = table.filterByEntityNames(
+                this.selection.selectedEntityNames
+            )
+        }
+
+        return table
     }
 
     @computed get tableForSelection(): OwidTable {

packages/@ourworldindata/grapher/src/dataTable/DataTable.sample.ts

@@ -86,6 +86,7 @@ export const GrapherWithIncompleteData = (
     ]
     return new Grapher({
         tab: GRAPHER_TAB_OPTIONS.table,
+        selectedEntityNames: ["Iceland", "France", "Afghanistan"],
         dimensions,
         ...props,
         owidDataset: createOwidTestDataset([{ metadata, data }]),
@@ -127,6 +128,7 @@ export const GrapherWithAggregates = (
     return new Grapher({
         tab: GRAPHER_TAB_OPTIONS.table,
         dimensions,
+        selectedEntityNames: ["Afghanistan", "Iceland", "World"],
         ...props,
         owidDataset: createOwidTestDataset([
             { metadata: childMortalityMetadata, data: childMortalityData },

packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx

@@ -44,7 +44,6 @@ import {
     IndicatorTitleWithFragments,
     joinTitleFragments,
 } from "@ourworldindata/utils"
-import { makeSelectionArray } from "../chart/ChartUtils"
 import { SelectionArray } from "../selection/SelectionArray"
 import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../core/GrapherConstants"
 
@@ -86,7 +85,6 @@ export interface DataTableManager {
     endTime?: Time
     startTime?: Time
     dataTableSlugs?: ColumnSlug[]
-    showSelectionOnlyInDataTable?: boolean
     entitiesAreCountryLike?: boolean
     isSmall?: boolean
     isMedium?: boolean
@@ -138,36 +136,8 @@ export class DataTable extends React.Component<{
         }
     }
 
-    @computed get showSelectionOnlyInDataTable(): boolean {
-        const {
-            showSelectionOnlyInDataTable,
-            canChangeAddOrHighlightEntities,
-            hasChartTab,
-            hasMapTab,
-        } = this.manager
-        const { selectionArray } = this
-
-        // filter the table if the "Show selection only" toggle is hidden
-        if (
-            !canChangeAddOrHighlightEntities &&
-            selectionArray.hasSelection &&
-            hasChartTab &&
-            // if we have a map tab, we want to show all entities
-            !hasMapTab
-        )
-            return true
-
-        return !!showSelectionOnlyInDataTable
-    }
-
     @computed get table(): OwidTable {
-        let table = this.manager.tableForDisplay
-        if (this.showSelectionOnlyInDataTable) {
-            table = table.filterByEntityNames(
-                this.selectionArray.selectedEntityNames
-            )
-        }
-        return table
+        return this.manager.tableForDisplay
     }
 
     @computed get manager(): DataTableManager {
@@ -693,10 +663,6 @@ export class DataTable extends React.Component<{
         )
     }
 
-    @computed private get selectionArray(): SelectionArray {
-        return makeSelectionArray(this.manager.selection)
-    }
-
     @computed private get entityNames(): string[] {
         const tableForEntities = this.table
         return union(

packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx

@@ -56,13 +56,15 @@ export interface DownloadModalManager {
     queryStr?: string
     table?: OwidTable
     transformedTable?: OwidTable
+    tableForDisplay?: OwidTable
     yColumnsFromDimensionsOrSlugsOrAuto?: CoreColumn[]
     shouldIncludeDetailsInStaticExport?: boolean
     detailsOrderedByReference?: string[]
     isDownloadModalOpen?: boolean
     frameBounds?: Bounds
     captionedChartBounds?: Bounds
     isOnChartOrMapTab?: boolean
+    isOnTableTab?: boolean
     showAdminControls?: boolean
     isSocialMediaExport?: boolean
     isPublished?: boolean
@@ -432,19 +434,20 @@ interface DataDownloadContextClientSide extends DataDownloadContextBase {
     shortColNames: boolean
 
     // Only needed for local CSV generation
-    table: OwidTable
-    transformedTable: OwidTable
+    fullTable: OwidTable
+    filteredTable: OwidTable
     activeColumnSlugs: string[] | undefined
 }
 
 const createCsvBlobLocally = async (ctx: DataDownloadContextClientSide) => {
-    const csv =
+    const downloadTable =
         ctx.csvDownloadType === CsvDownloadType.Full
-            ? ctx.table.toPrettyCsv(ctx.shortColNames, ctx.activeColumnSlugs)
-            : ctx.transformedTable.toPrettyCsv(
-                  ctx.shortColNames,
-                  ctx.activeColumnSlugs
-              )
+            ? ctx.fullTable
+            : ctx.filteredTable
+    const csv = downloadTable.toPrettyCsv(
+        ctx.shortColNames,
+        ctx.activeColumnSlugs
+    )
 
     return new Blob([csv], { type: "text/csv;charset=utf-8" })
 }
@@ -768,17 +771,21 @@ export const DownloadModalDataTab = (props: DownloadModalProps) => {
                 props.manager.baseUrl ??
                 `/grapher/${props.manager.displaySlug}`,
 
-            table: props.manager.table ?? BlankOwidTable(),
-            transformedTable:
-                props.manager.transformedTable ?? BlankOwidTable(),
+            fullTable: props.manager.table ?? BlankOwidTable(),
+            filteredTable:
+                (props.manager.isOnTableTab
+                    ? props.manager.tableForDisplay
+                    : props.manager.transformedTable) ?? BlankOwidTable(),
             activeColumnSlugs: props.manager.activeColumnSlugs,
         }),
         [
             props.manager.baseUrl,
             props.manager.displaySlug,
             props.manager.queryStr,
+            props.manager.isOnTableTab,
             props.manager.table,
             props.manager.transformedTable,
+            props.manager.tableForDisplay,
             props.manager.activeColumnSlugs,
         ]
     )