enhance(telemetry): measure BCD table views, link clicks, cell expansions

client/src/document/ingredients/browser-compatibility-table/feature-row.tsx

@@ -11,40 +11,63 @@ import {
   isTruthy,
   versionIsPreview,
   SupportStatementExtended,
+  SupportType,
   bugURLToString,
+  SimpleSupportStatementExtended,
 } from "./utils";
 import { LEGEND_LABELS } from "./legend";
 import { DEFAULT_LOCALE } from "../../../../../libs/constants";
+import { BCD_TABLE } from "../../../telemetry/constants";
 
-function getSupportClassName(
+export function getCurrentSupportType(
   support: SupportStatementExtended | undefined,
   browser: BCD.BrowserStatement
-): "no" | "yes" | "partial" | "preview" | "removed-partial" | "unknown" {
+): SupportType {
   if (!support) {
     return "unknown";
   }
 
-  let { flags, version_added, version_removed, partial_implementation } =
-    getCurrentSupport(support)!;
+  const currentSupport = getCurrentSupport(support)!;
+
+  return getSupportType(currentSupport, browser);
+}
+
+function getSupportType(
+  support: SimpleSupportStatementExtended,
+  browser: BCD.BrowserStatement
+): SupportType {
+  const { flags, version_added, version_removed, partial_implementation } =
+    support;
 
-  let className;
   if (version_added === null) {
-    className = "unknown";
+    return "unknown";
   } else if (versionIsPreview(version_added, browser)) {
-    className = "preview";
+    return "preview";
   } else if (version_added) {
-    className = "yes";
-    if (version_removed || (flags && flags.length)) {
-      className = "no";
+    if (version_removed) {
+      if (partial_implementation) {
+        return "removed-partial";
+      } else {
+        return "removed";
+      }
+    } else if (flags && flags.length) {
+      return "no";
+    } else if (partial_implementation) {
+      return "partial";
+    } else {
+      return "yes";
     }
   } else {
-    className = "no";
+    return "no";
   }
-  if (partial_implementation) {
-    className = version_removed ? "removed-partial" : "partial";
+}
+
+function getSupportClassName(supportType: SupportType): string {
+  if (supportType === "removed") {
+    return "no";
   }
 
-  return className;
+  return supportType;
 }
 
 function getSupportBrowserReleaseDate(
@@ -123,6 +146,52 @@ function versionLabelFromSupport(
   );
 }
 
+function getCurrentStatus(
+  support: BCD.SupportStatement | undefined,
+  supportType: SupportType,
+  browser: BCD.BrowserStatement
+) {
+  const currentSupport = getCurrentSupport(support);
+
+  return getStatus(currentSupport, supportType, browser);
+}
+
+function getStatus(
+  currentSupport: SimpleSupportStatementExtended | undefined,
+  supportType: SupportType,
+  browser: BCD.BrowserStatement
+) {
+  const added = currentSupport?.version_added ?? null;
+  const lastVersion = currentSupport?.version_last ?? null;
+
+  let status: {
+    isSupported: SupportType;
+    label?: React.ReactNode;
+  };
+
+  switch (added) {
+    case null:
+      status = { isSupported: "unknown" };
+      break;
+    case true:
+      status = { isSupported: lastVersion ? "no" : "yes" };
+      break;
+    case false:
+      status = { isSupported: "no" };
+      break;
+    case "preview":
+      status = { isSupported: "preview" };
+      break;
+    default:
+      status = {
+        isSupported: supportType,
+        label: versionLabelFromSupport(added, lastVersion, browser),
+      };
+      break;
+  }
+  return status;
+}
+
 const CellText = React.memo(
   ({
     support,
@@ -133,40 +202,10 @@ const CellText = React.memo(
     browser: BCD.BrowserStatement;
     timeline?: boolean;
   }) => {
-    const currentSupport = getCurrentSupport(support);
-
-    const added = currentSupport?.version_added ?? null;
-    const lastVersion = currentSupport?.version_last ?? null;
-
     const browserReleaseDate = getSupportBrowserReleaseDate(support);
-    const supportClassName = getSupportClassName(support, browser);
-
-    let status:
-      | { isSupported: "unknown" }
-      | {
-          isSupported: "no" | "yes" | "partial" | "preview" | "removed-partial";
-          label?: React.ReactNode;
-        };
-    switch (added) {
-      case null:
-        status = { isSupported: "unknown" };
-        break;
-      case true:
-        status = { isSupported: lastVersion ? "no" : "yes" };
-        break;
-      case false:
-        status = { isSupported: "no" };
-        break;
-      case "preview":
-        status = { isSupported: "preview" };
-        break;
-      default:
-        status = {
-          isSupported: supportClassName,
-          label: versionLabelFromSupport(added, lastVersion, browser),
-        };
-        break;
-    }
+    const supportType = getCurrentSupportType(support, browser);
+    const supportClassName = getSupportClassName(supportType);
+    const status = getCurrentStatus(support, supportType, browser);
 
     let label: string | React.ReactNode;
     let title = "";
@@ -192,6 +231,7 @@ const CellText = React.memo(
         break;
 
       case "no":
+      case "removed":
         title = "No support";
         label = status.label || "No";
         break;
@@ -260,22 +300,41 @@ function Icon({ name }: { name: string }) {
 }
 
 function CellIcons({ support }: { support: BCD.SupportStatement | undefined }) {
-  const supportItem = getCurrentSupport(support);
-  if (!supportItem) {
+  const attrs = getCurrentSupportAttributes(support);
+
+  if (!attrs) {
     return null;
   }
 
   const icons = [
-    supportItem.prefix && <Icon key="prefix" name="prefix" />,
-    hasNoteworthyNotes(supportItem) && <Icon key="footnote" name="footnote" />,
-    supportItem.alternative_name && <Icon key="altname" name="altname" />,
-    supportItem.flags && <Icon key="disabled" name="disabled" />,
-    hasMore(support) && <Icon key="more" name="more" />,
+    attrs.pre && <Icon key="prefix" name="prefix" />,
+    attrs.note && <Icon key="footnote" name="footnote" />,
+    attrs.alt && <Icon key="altname" name="altname" />,
+    attrs.flag && <Icon key="disabled" name="disabled" />,
+    attrs.more && <Icon key="more" name="more" />,
   ].filter(Boolean);
 
   return icons.length ? <div className="bc-icons">{icons}</div> : null;
 }
 
+export function getCurrentSupportAttributes(
+  support: BCD.SimpleSupportStatement | BCD.SimpleSupportStatement[] | undefined
+) {
+  const supportItem = getCurrentSupport(support);
+
+  if (!supportItem) {
+    return null;
+  }
+
+  return {
+    pre: !!supportItem.prefix,
+    note: hasNoteworthyNotes(supportItem),
+    alt: !!supportItem.alternative_name,
+    flag: !!supportItem.flags,
+    more: hasMore(support),
+  };
+}
+
 function FlagsNote({
   supportItem,
   browser,
@@ -418,7 +477,7 @@ function getNotes(
             <React.Fragment key={i}>
               <div className="bc-notes-wrapper">
                 <dt
-                  className={`bc-supports-${getSupportClassName(
+                  className={`bc-supports-${getCurrentSupportType(
                     item,
                     browser
                   )} bc-supports`}
@@ -462,7 +521,8 @@ function CompatCell({
   onToggle: () => void;
   locale: string;
 }) {
-  const supportClassName = getSupportClassName(support, browserInfo);
+  const supportType = getCurrentSupportType(support, browserInfo);
+  const supportClassName = getSupportClassName(supportType);
   // NOTE: 1-5-21, I've forced hasNotes to return true, in order to
   // make the details view open all the time.
   // Whenever the support statement is complex (array with more than one entry)
@@ -545,7 +605,11 @@ export const FeatureRow = React.memo(
         `/${locale}/docs`
       );
       titleNode = (
-        <a href={href} className="bc-table-row-header">
+        <a
+          href={href}
+          className="bc-table-row-header"
+          data-glean={`${BCD_TABLE}: link -> ${href}`}
+        >
           {title}
           {compat.status && <StatusIcons status={compat.status} />}
         </a>

client/src/document/ingredients/browser-compatibility-table/index.tsx

@@ -1,12 +1,19 @@
-import React, { useReducer } from "react";
+import React, { useReducer, useRef } from "react";
 import { useLocation } from "react-router-dom";
 import type BCD from "@mdn/browser-compat-data/types";
 import { BrowserInfoContext } from "./browser-info";
 import { BrowserCompatibilityErrorBoundary } from "./error-boundary";
-import { FeatureRow } from "./feature-row";
+import {
+  FeatureRow,
+  getCurrentSupportAttributes,
+  getCurrentSupportType,
+} from "./feature-row";
 import { Headers } from "./headers";
 import { Legend } from "./legend";
 import { listFeatures } from "./utils";
+import { useViewed } from "../../../hooks";
+import { BCD_TABLE } from "../../../telemetry/constants";
+import { useGleanClick } from "../../../telemetry/glean-context";
 
 // Note! Don't import any SCSS here inside *this* component.
 // It's done in the component that lazy-loads this component.
@@ -84,11 +91,15 @@ type CellIndex = [number, number];
 function FeatureListAccordion({
   features,
   browsers,
+  browserInfo,
   locale,
+  query,
 }: {
   features: ReturnType<typeof listFeatures>;
   browsers: BCD.BrowserName[];
+  browserInfo: BCD.Browsers;
   locale: string;
+  query: string;
 }) {
   const [[activeRow, activeColumn], dispatchCellToggle] = useReducer<
     React.Reducer<CellIndex | [null, null], CellIndex>
@@ -100,6 +111,9 @@ function FeatureListAccordion({
     [null, null]
   );
 
+  const gleanClick = useGleanClick();
+  const clickedCells = useRef(new Set<string>());
+
   return (
     <>
       {features.map((feature, i) => (
@@ -109,6 +123,25 @@ function FeatureListAccordion({
           index={i}
           activeCell={activeRow === i ? activeColumn : null}
           onToggleCell={([row, column]: [number, number]) => {
+            const cell = `${column}:${row}`;
+            if (!clickedCells.current.has(cell)) {
+              clickedCells.current.add(cell);
+              const feature = features[row];
+              const browser = browsers[column];
+              const support = feature.compat.support[browser];
+              const supportType = getCurrentSupportType(
+                support,
+                browserInfo[browser]
+              );
+              const { ...supportAttributes } =
+                getCurrentSupportAttributes(support);
+              const attrs = Object.keys(supportAttributes).filter(
+                (key) => supportAttributes[key]
+              );
+              gleanClick(
+                `${BCD_TABLE}: click ${browser} ${query} -> ${feature.name} = ${supportType} [${attrs.join(",")}]`
+              );
+            }
             dispatchCellToggle([row, column]);
           }}
           locale={locale}
@@ -130,6 +163,16 @@ export default function BrowserCompatibilityTable({
   locale: string;
 }) {
   const location = useLocation();
+  const gleanClick = useGleanClick();
+
+  const observedNode = useViewed(
+    () => {
+      gleanClick(`${BCD_TABLE}: view -> ${query}`);
+    },
+    {
+      threshold: 0,
+    }
+  );
 
   if (!data || !Object.keys(data).length) {
     throw new Error(
@@ -177,7 +220,11 @@ export default function BrowserCompatibilityTable({
         </a>
         <figure className="table-container">
           <figure className="table-container-inner">
-            <table key="bc-table" className="bc-table bc-table-web">
+            <table
+              key="bc-table"
+              className="bc-table bc-table-web"
+              ref={observedNode}
+            >
               <Headers
                 platforms={platforms}
                 browsers={browsers}
@@ -186,8 +233,10 @@ export default function BrowserCompatibilityTable({
               <tbody>
                 <FeatureListAccordion
                   browsers={browsers}
+                  browserInfo={browserInfo}
                   features={listFeatures(data, "", name)}
                   locale={locale}
+                  query={query}
                 />
               </tbody>
             </table>