Merge pull request #2659 from owid/grapher-redesign-updates-cds

Data table enhancements & layout fixes
owid · Sep 25, 2023 · f4e367f · f4e367f
2 parents 187156c + 5b1f2f5
commit f4e367f
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 29 deletions.
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -228,27 +228,24 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
     }
 
     private renderControlsRow(): JSX.Element {
-        const showControls = !this.manager.isOnTableTab
         return (
             <nav className="controlsRow">
                 <ContentSwitchers manager={this.manager} />
-                {showControls && (
-                    <div className="controls">
-                        <EntitySelectorToggle manager={this.manager} />
-                        <SettingsMenu
-                            manager={this.manager}
-                            top={
-                                FRAME_PADDING +
-                                this.header.height +
-                                this.verticalPadding +
-                                CONTROLS_ROW_HEIGHT +
-                                4 // margin between button and menu
-                            }
-                            bottom={FRAME_PADDING}
-                        />
-                        <MapProjectionMenu manager={this.manager} />
-                    </div>
-                )}
+                <div className="controls">
+                    <EntitySelectorToggle manager={this.manager} />
+                    <SettingsMenu
+                        manager={this.manager}
+                        top={
+                            FRAME_PADDING +
+                            this.header.height +
+                            this.verticalPadding +
+                            CONTROLS_ROW_HEIGHT +
+                            4 // margin between button and menu
+                        }
+                        bottom={FRAME_PADDING}
+                    />
+                    <MapProjectionMenu manager={this.manager} />
+                </div>
             </nav>
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.tsx b/packages/@ourworldindata/grapher/src/controls/Controls.tsx
@@ -143,6 +143,10 @@ export interface SettingsMenuManager {
 
     // show intermediate scatterplot points
     compareEndPointsOnly?: boolean
+
+    // use entity selection from chart to filter table rows
+    isOnTableTab?: boolean
+    showSelectionOnlyInDataTable?: boolean
 }
 
 @observer
@@ -220,6 +224,7 @@ export class SettingsMenu extends React.Component<{
             filledDimensions,
             availableFacetStrategies,
             hideFacetControl,
+            isOnTableTab,
             type,
         } = this.manager
 
@@ -241,11 +246,17 @@ export class SettingsMenu extends React.Component<{
             (dim) => dim.display.isProjection
         )
 
-        return showFacetControlChartType && !hideFacetControl && !hasProjection
+        return (
+            showFacetControlChartType &&
+            !hideFacetControl &&
+            !hasProjection &&
+            !isOnTableTab
+        )
     }
 
     @computed get showSettingsMenuToggle(): boolean {
         if (this.manager.isOnMapTab) return false
+        if (this.manager.isOnTableTab) return true
 
         return !!(
             this.showYScaleToggle ||
@@ -321,7 +332,14 @@ export class SettingsMenu extends React.Component<{
             showAbsRelToggle,
         } = this
 
-        const { yAxis, xAxis, compareEndPointsOnly, filledDimensions } = manager
+        const {
+            yAxis,
+            xAxis,
+            compareEndPointsOnly,
+            filledDimensions,
+            isOnTableTab,
+        } = manager
+
         const yLabel =
                 filledDimensions.find((d: ChartDimension) => d.property === "y")
                     ?.display.name ?? "Y axis",
@@ -331,6 +349,8 @@ export class SettingsMenu extends React.Component<{
             omitLoneAxisLabel =
                 showYScaleToggle && !showXScaleToggle && yLabel === "Y axis"
 
+        const menuTitle = `${isOnTableTab ? "Table" : chartType} settings`
+
         return (
             <div className="settings-menu-contents">
                 <div
@@ -347,7 +367,7 @@ export class SettingsMenu extends React.Component<{
                     }}
                 >
                     <div className="config-header">
-                        <div className="config-title">{chartType} settings</div>
+                        <div className="config-title">{menuTitle}</div>
                         <button
                             className="clickable close"
                             onClick={this.toggleVisibility}
@@ -378,6 +398,10 @@ export class SettingsMenu extends React.Component<{
                         {showZoomToggle && <ZoomToggle manager={manager} />}
                     </Setting>
 
+                    <Setting title="Data rows" active={isOnTableTab}>
+                        <TableFilterToggle manager={manager} />
+                    </Setting>
+
                     <Setting
                         title="Axis scale"
                         active={showYScaleToggle || showXScaleToggle}
@@ -648,6 +672,37 @@ export class ZoomToggle extends React.Component<{
     }
 }
 
+export interface TableFilterToggleManager {
+    showSelectionOnlyInDataTable?: boolean
+    entityTypePlural?: string
+}
+
+@observer
+export class TableFilterToggle extends React.Component<{
+    manager: TableFilterToggleManager
+}> {
+    @action.bound onToggle(): void {
+        const { manager } = this.props
+        manager.showSelectionOnlyInDataTable =
+            manager.showSelectionOnlyInDataTable ? undefined : true
+    }
+
+    render(): JSX.Element {
+        const tooltip = `Only display table rows for ${
+            this.props.manager.entityTypePlural ?? "countries or regions"
+        } selected within the chart`
+
+        return (
+            <LabeledSwitch
+                label="Show selection only"
+                tooltip={tooltip}
+                value={this.props.manager.showSelectionOnlyInDataTable}
+                onToggle={this.onToggle}
+            />
+        )
+    }
+}
+
 export interface FacetStrategySelectionManager {
     availableFacetStrategies: FacetStrategy[]
     facetStrategy?: FacetStrategy

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -359,6 +359,7 @@ export class Grapher
     /** Hides the total value label that is normally displayed for stacked bar charts */
     @observable.ref hideTotalValueLabel?: boolean = undefined
     @observable.ref missingDataStrategy?: MissingDataStrategy = undefined
+    @observable.ref showSelectionOnlyInDataTable?: boolean = undefined
 
     @observable.ref xAxis = new AxisConfig(undefined, this)
     @observable.ref yAxis = new AxisConfig(undefined, this)
@@ -1997,12 +1998,6 @@ export class Grapher
                 title: "Toggle Y log/linear",
                 category: "Chart",
             },
-            {
-                combo: "space",
-                fn: (): void => this.toggleFullScreenMode(),
-                title: "Toggle full-screen mode",
-                category: "Chart",
-            },
             {
                 combo: "esc",
                 fn: (): void => this.clearErrors(),

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
@@ -129,7 +129,7 @@
 
                     .description {
                         color: #a1a1a1;
-                        text-align: right;
+                        text-align: left;
                     }
                 }
             }

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
@@ -78,13 +78,29 @@ export interface DataTableManager {
     endTime?: Time
     startTime?: Time
     dataTableSlugs?: ColumnSlug[]
+    showSelectionOnlyInDataTable?: boolean
+    isSmall?: boolean
+    isMedium?: boolean
 }
 
 @observer
 export class DataTable extends React.Component<{
     manager?: DataTableManager
     bounds?: Bounds
 }> {
+    transformTable(table: OwidTable): OwidTable {
+        if (this.manager.showSelectionOnlyInDataTable) {
+            table = table.filterByEntityNames(
+                this.selectionArray.selectedEntityNames
+            )
+        }
+        return table
+    }
+
+    @computed get transformedTable(): OwidTable {
+        return this.transformTable(this.manager.table)
+    }
+
     @observable private storedState: DataTableState = {
         sort: DEFAULT_SORT_STATE,
     }
@@ -122,7 +138,7 @@ export class DataTable extends React.Component<{
     }
 
     @computed get table(): OwidTable {
-        return this.inputTable
+        return this.transformedTable
     }
 
     @computed get inputTable(): OwidTable {