🔨 clean up

owid · Dec 14, 2024 · e3f0ba7 · e3f0ba7
1 parent 762b0d1
commit e3f0ba7
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 28 deletions.
diff --git a/adminSiteClient/admin.scss b/adminSiteClient/admin.scss
@@ -519,15 +519,6 @@ $nav-height: 45px;
         align-items: center;
     }
 
-    i {
-        font-size: 1.2rem;
-        color: #666;
-    }
-
-    > div:first-child > * {
-        margin-right: 12px;
-    }
-
     &.invalid {
         background: #fce9e6;
     }

diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -740,7 +740,7 @@ export class FacetChart
         const activeColors = uniq(
             this.intermediateChartInstances.flatMap((chartInstance) =>
                 chartInstance.series
-                    .filter((series) => focusArray?.has(series.seriesName))
+                    .filter((series) => focusArray.has(series.seriesName))
                     .map((series) => series.color)
             )
         )
@@ -799,6 +799,7 @@ export class FacetChart
     }
 
     @action.bound onLegendClick(bin: ColorScaleBin): void {
+        if (!this.manager.focusArray) return
         // find all series (of all facets) that are contained in the bin
         const seriesNames = uniq(
             this.intermediateChartInstances.flatMap((chartInstance) =>
@@ -807,7 +808,7 @@ export class FacetChart
                     .map((series) => series.seriesName)
             )
         )
-        this.manager.focusArray?.toggle(...seriesNames)
+        this.manager.focusArray.toggle(...seriesNames)
     }
 
     // end of legend props

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -184,7 +184,7 @@ class Lines extends React.Component<LinesProps> {
         const strokeDasharray = series.isProjection ? "2,3" : undefined
         const strokeWidth =
             hover.background || focus.background
-                ? this.strokeWidth - 0.33 * this.strokeWidth
+                ? 0.66 * this.strokeWidth
                 : this.strokeWidth
         const strokeOpacity =
             hover.background && !focus.background ? GRAPHER_OPACITY_MUTE : 1
@@ -565,14 +565,14 @@ export class LineChart
                     )
                     if (!value || series.hover.background) return null
 
-                    const seriesColor = this.hasColorScale
+                    const valueColor = this.hasColorScale
                         ? darkenColorForLine(
                               this.getColorScaleColor(value.colorValue)
                           )
                         : series.color
                     const color =
                         !series.focus.background || series.hover.active
-                            ? seriesColor
+                            ? valueColor
                             : GRAY_50
 
                     return (

diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -743,11 +743,13 @@ export class LineLegend extends React.Component<LineLegendProps> {
             }
 
             // we initially need to pick at least two candidates.
-            // if we already picked two from the set of focused series,
-            // we're done. if we picked one, then we pick a another one
-            // that is as far away from the first one as possible.
-            // if we haven't picked any focused series, we pick two from
-            // the non-focused series, one from the top and one from the bottom.
+            // - if we already picked two from the set of focused series,
+            //   we're done
+            // - if we picked only one focused series, then we pick another
+            //   one from the set of non-focused series. we pick the one that
+            //   is furthest away from the focused one
+            // - if we haven't picked any focused series, we pick two from
+            //   the non-focused series, one from the top and one from the bottom
             if (sortedKeepSeries.length === 0) {
                 // sort the remaining candidates by their position
                 const sortedCandidates = sortBy(
@@ -777,11 +779,12 @@ export class LineLegend extends React.Component<LineLegendProps> {
                     const cIndex = nonFocusedCandidates.indexOf(candidate)
                     if (cIndex > -1) nonFocusedCandidates.splice(cIndex, 1)
 
-                    // we only need one more candidate
+                    // we only need one more candidate, so if we find one, we're done
                     const picked = maybePickCandidate(candidate)
                     if (picked) break
 
-                    // if the candidate wasn't picked, remove it from the candidates and continue
+                    // if the candidate wasn't picked, remove it from the
+                    // candidates and continue
                     candidates.delete(candidate)
                 }
             }

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -229,6 +229,10 @@ export class SlopeChart
         return makeSelectionArray(this.manager.selection)
     }
 
+    @computed get focusArray(): FocusArray {
+        return this.manager.focusArray ?? new FocusArray()
+    }
+
     @computed private get formatColumn(): CoreColumn {
         return this.yColumns[0]
     }
@@ -472,10 +476,6 @@ export class SlopeChart
         return this.focusArray.state(series.seriesName)
     }
 
-    @computed get focusArray(): FocusArray {
-        return this.manager.focusArray ?? new FocusArray()
-    }
-
     @computed private get renderSeries(): RenderSlopeChartSeries[] {
         const series: RenderSlopeChartSeries[] = this.placedSeries.map(
             (series) => {
@@ -487,6 +487,8 @@ export class SlopeChart
             }
         )
 
+        // sort by interaction state so that foreground series
+        // are drawn on top of background series
         if (this.isHoverModeActive || this.isFocusModeActive) {
             return sortBy(series, byHoverThenFocusState)
         }
@@ -1333,9 +1335,7 @@ function Slope({
             ? series.color
             : NON_FOCUSED_LINE_COLOR
     const lineWidth =
-        hover.background || focus.background
-            ? strokeWidth - 0.33 * strokeWidth
-            : strokeWidth
+        hover.background || focus.background ? 0.66 * strokeWidth : strokeWidth
 
     return (
         <g