From 053fe9aa7978e61373ec8eba9ddd4df834dd24e1 Mon Sep 17 00:00:00 2001
From: Christian Swinehart <drafting@samizdat.co>
Date: Tue, 10 Oct 2023 14:55:17 -0400
Subject: [PATCH] :hammer: (controls): add tracking labels to widgets

---
 .../grapher/src/controls/EntitySelectionToggle.tsx          | 1 +
 .../@ourworldindata/grapher/src/controls/LabeledSwitch.tsx  | 6 ++++--
 .../@ourworldindata/grapher/src/controls/SettingsMenu.tsx   | 4 +---
 .../grapher/src/controls/settings/AbsRelToggle.tsx          | 1 +
 .../grapher/src/controls/settings/AxisScaleToggle.tsx       | 2 ++
 .../grapher/src/controls/settings/FacetStrategySelector.tsx | 1 +
 .../grapher/src/controls/settings/FacetYDomainToggle.tsx    | 1 +
 .../grapher/src/controls/settings/NoDataAreaToggle.tsx      | 1 +
 .../grapher/src/controls/settings/TableFilterToggle.tsx     | 1 +
 .../grapher/src/controls/settings/ZoomToggle.tsx            | 1 +
 10 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
index 8b0eee25bfb..7d67cfc1172 100644
--- a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
@@ -80,6 +80,7 @@ export class EntitySelectionToggle extends React.Component<{
                     onClick={(): void => {
                         this.props.manager.isSelectingData = !active
                     }}
+                    data-track-note="chart_add_entity"
                 >
                     {label.icon}
                     <label>
diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
index 03cad0a11b8..a05ad95508a 100644
--- a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
@@ -9,10 +9,11 @@ export class LabeledSwitch extends React.Component<{
     value?: boolean
     label?: string
     tooltip?: string
+    tracking?: string
     onToggle: () => any
 }> {
     render(): JSX.Element {
-        const { label, value, tooltip } = this.props
+        const { label, value, tooltip, tracking } = this.props
 
         return (
             <div className="config-switch">
@@ -21,8 +22,9 @@ export class LabeledSwitch extends React.Component<{
                         type="checkbox"
                         checked={value}
                         onChange={this.props.onToggle}
+                        data-track-note={tracking}
                     />
-                    <div className="outer">
+                    <div data-track-note="" className="outer">
                         <div className="inner"></div>
                     </div>
                     {label}
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
index 58c0dcbdd97..f47d62b8171 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -53,7 +53,6 @@ export interface SettingsMenuManager
         FacetStrategySelectionManager {
     base?: React.RefObject<SVGGElement | HTMLDivElement> // the root grapher element
     showConfigurationDrawer?: boolean
-    isInIFrame?: boolean
 
     // ArchieML directives
     hideFacetControl?: boolean
@@ -266,8 +265,6 @@ export class SettingsMenu extends React.Component<{
     }
 
     @computed get drawer(): Element | null {
-        // use a drop-down menu when embedded in an iframe
-        if (this.manager.isInIFrame) return null
         // use the drawer `<nav>` element if it exists, otherwise render into a drop-down menu
         return this.manager.base?.current?.closest(".related-charts")
             ? null // also use a drop-down menu within the Related Charts section
@@ -424,6 +421,7 @@ export class SettingsMenu extends React.Component<{
                 <button
                     className={classnames("menu-toggle", { active })}
                     onClick={this.toggleVisibility}
+                    data-track-note="chart_settings_menu_toggle"
                 >
                     <FontAwesomeIcon icon={faGear} />
                     <span className="label"> Settings</span>
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
index 8b1bc1c0c44..35548006997 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
@@ -48,6 +48,7 @@ export class AbsRelToggle extends React.Component<{
                 value={this.isRelativeMode}
                 tooltip={this.tooltip}
                 onToggle={this.onToggle}
+                tracking="chart_abs_rel_toggle"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
index e603e286b2e..d0fa8992351 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
@@ -28,12 +28,14 @@ export class AxisScaleToggle extends React.Component<{
                     <button
                         className={classnames({ active: isLinear })}
                         onClick={(): void => this.setAxisScale(linear)}
+                        data-track-note="chart_toggle_scale"
                     >
                         {label}Linear
                     </button>
                     <button
                         className={classnames({ active: !isLinear })}
                         onClick={(): void => this.setAxisScale(log)}
+                        data-track-note="chart_toggle_scale"
                     >
                         {label}Logarithmic
                     </button>
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
index 8b7e8d7f5da..b810cc5994d 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
@@ -83,6 +83,7 @@ export class FacetStrategySelector extends React.Component<{
                                 onClick={(): void => {
                                     this.props.manager.facetStrategy = value
                                 }}
+                                data-track-note={`chart_facet_${option}`}
                             >
                                 <div className="faceting-icon">
                                     {range(value === "none" ? 1 : 6).map(
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
index b033849443d..b8c4038c330 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
@@ -39,6 +39,7 @@ export class FacetYDomainToggle extends React.Component<{
                 tooltip="Use the same minimum and maximum values on all charts or scale axes to fit the data in each chart"
                 value={this.isYDomainShared}
                 onToggle={this.onToggle}
+                tracking="chart_facet_ydomain_toggle"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
index 7a856facad5..81baf47af25 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
@@ -26,6 +26,7 @@ export class NoDataAreaToggle extends React.Component<{
                 value={this.manager.showNoDataArea}
                 tooltip="Include entities for which ‘no data’ is available in the chart."
                 onToggle={this.onToggle}
+                tracking="chart_no_data_area_toggle"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
index c55f5d989e0..6f0c6751a69 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
@@ -31,6 +31,7 @@ export class TableFilterToggle extends React.Component<{
                 tooltip={tooltip}
                 value={this.props.manager.showSelectionOnlyInDataTable}
                 onToggle={this.onToggle}
+                tracking="chart_filter_table_rows"
             />
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
index 8508546e2c9..0a160ceb37a 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
@@ -24,6 +24,7 @@ export class ZoomToggle extends React.Component<{
                 tooltip="Scale axes to focus on the currently highlighted data points."
                 value={this.props.manager.zoomToSelection}
                 onToggle={this.onToggle}
+                tracking="chart_zoom_to_selection"
             />
         )
     }