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

Grapher redesign updates (iii)
owid · Oct 8, 2023 · 785653f · 785653f
2 parents fc63f6f + e045217
commit 785653f
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.scss b/packages/@ourworldindata/grapher/src/controls/Controls.scss
@@ -63,9 +63,33 @@ nav.controlsRow .controls {
 
 //
 // Make buttons narrower by omitting their text labels as the viewport gets narrower
-// TODO: move the logic to js to calculate actual widths for different entity name lengths
-//       and the variable number of buttons present in the content switcher block
+// use the .GrapherComponentSemiNarrow if necessary but allow container queries to
+// collapse labels in two steps on browsers that support them
 //
+// TODO: the measurement and label-hiding logic will have to move to js anyway once the
+//       number of chart buttons becomes variable and the settings button can be replaced
+//       by a single control widget ‘promoted’ from within the drawer
+//
+@at-root {
+    // collapse both the settings and entity selector labels down at the semi-narrow breakpoint
+    .GrapherComponentSemiNarrow {
+        nav.controlsRow .settings-menu button.menu-toggle {
+            min-height: $control-row-height;
+            svg {
+                margin: 0 2px;
+            }
+            .label {
+                display: none;
+            }
+        }
+        nav.controlsRow .entity-selection-menu button.menu-toggle {
+            label span {
+                display: none;
+            }
+        }
+    }
+}
+
 @container grapher (max-width:550px) {
     // collapse the Settings toggle down to just an icon on small screens
     nav.controlsRow .settings-menu button.menu-toggle {
@@ -77,7 +101,15 @@ nav.controlsRow .controls {
             display: none;
         }
     }
+
+    // undo the .GrapherComponentSemiNarrow hiding until next container query
+    nav.controlsRow .entity-selection-menu button.menu-toggle {
+        label span {
+            display: inline;
+        }
+    }
 }
+
 @container grapher (max-width:475px) {
     // hide the entity name in the Edit/Select/Switch button
     nav.controlsRow .entity-selection-menu button.menu-toggle {

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -2312,6 +2312,7 @@ export class Grapher
             isExportingToSvgOrPng: this.isExportingtoSvgOrPng,
             optimizeForHorizontalSpace: this.optimizeForHorizontalSpace,
             GrapherComponentNarrow: this.isNarrow,
+            GrapherComponentSemiNarrow: this.isSemiNarrow,
             GrapherComponentSmall: this.isSmall,
             GrapherComponentMedium: this.isMedium,
         })
@@ -2416,6 +2417,12 @@ export class Grapher
         return this.renderWidth <= 400
     }
 
+    // SemiNarrow charts shorten their button labels to fit within the controls row
+    @computed get isSemiNarrow(): boolean {
+        if (this.isExportingtoSvgOrPng) return false
+        return this.renderWidth <= 550
+    }
+
     // Small charts are rendered into 6 or 7 columns in a 12-column grid layout
     // (e.g. side-by-side charts or charts in the All Charts block)
     @computed get isSmall(): boolean {

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -331,7 +331,7 @@ export class LineChart
 
     @action.bound private onCursorLeave(): void {
         this.tooltipState.target = null
-        this.hoveredSeriesName = undefined
+        this.clearHighlightedSeries()
     }
 
     @computed private get allValues(): LinePoint[] {
@@ -375,6 +375,7 @@ export class LineChart
             hoverX = closestValue?.x
         }
 
+        // be sure all lines are un-dimmed if the cursor is above the graph itself
         if (this.dualAxis.innerBounds.contains(mouse)) {
             this.hoveredSeriesName = undefined
         }
@@ -611,13 +612,16 @@ export class LineChart
         this.hoveredSeriesName = seriesName
     }
 
-    @action.bound onLineLegendMouseLeave(): void {
+    @action.bound clearHighlightedSeries(): void {
         clearTimeout(this.hoverTimer)
-
         this.hoverTimer = setTimeout(() => {
             // wait before clearing selection in case the mouse is moving quickly over neighboring labels
             this.hoveredSeriesName = undefined
-        }, 100)
+        }, 200)
+    }
+
+    @action.bound onLineLegendMouseLeave(): void {
+        this.clearHighlightedSeries()
     }
 
     @computed get focusedSeriesNames(): string[] {