add telemetry events to matches

guardian · Aug 27, 2020 · 9e57458 · 9e57458
1 parent 245774b
commit 9e57458
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 70 deletions.
diff --git a/src/ts/components/Match.tsx b/src/ts/components/Match.tsx
@@ -31,8 +31,7 @@ class Match<TMatch extends IMatch> extends Component<IMatchProps<TMatch>> {
       suggestions,
       replacement,
       markAsCorrect,
-      matchContext,
-      matchedText
+      matchContext
     } = match;
     const url = document.URL;
     const feedbackInfo = {
@@ -52,8 +51,7 @@ class Match<TMatch extends IMatch> extends Component<IMatchProps<TMatch>> {
         {suggestionsToRender && applySuggestions && !markAsCorrect && (
           <SuggestionList
             applySuggestions={applySuggestions}
-            matchId={matchId}
-            matchedText={matchedText}
+            match={match}
             suggestions={suggestionsToRender}
           />
         )}

diff --git a/src/ts/components/SidebarMatch.tsx b/src/ts/components/SidebarMatch.tsx
@@ -1,6 +1,6 @@
 import compact from "lodash/compact";
 
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 
 import { IMatch } from "../interfaces/IMatch";
 import {
@@ -12,6 +12,7 @@ import titleCase from "lodash/startCase";
 import { ApplySuggestionOptions } from "../commands";
 import SuggestionList from "./SuggestionList";
 import { getHtmlFromMarkdown } from "../utils/dom";
+import TelemetryContext from "../contexts/TelemetryContext";
 
 interface IProps {
   match: IMatch;
@@ -37,11 +38,12 @@ const SidebarMatch = ({
   stopHighlight,
   selectedMatch,
   editorScrollElement,
-  getScrollOffset,
+  getScrollOffset
 }: IProps) => {
-
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  const { telemetryService } = useContext(TelemetryContext);
+
   const color = getColourForMatch(match, matchColours, false).borderColour;
   const hasSuggestions = !!match.suggestions && !!match.suggestions.length;
   const suggestions = compact([
@@ -57,10 +59,18 @@ const SidebarMatch = ({
     e.preventDefault();
     e.stopPropagation();
 
+    telemetryService?.sidebarMatchClicked({
+      documentUrl: document.URL,
+      ruleId: match.ruleId,
+      matchId: match.matchId,
+      matchedText: match.matchedText,
+      matchContext: match.matchContext
+    });
+
     if (!editorScrollElement) {
       return;
     }
-  
+
     const decorationElement = maybeGetDecorationElement(match.matchId);
 
     if (decorationElement) {
@@ -80,7 +90,6 @@ const SidebarMatch = ({
     stopHighlight();
   };
 
-
   return (
     <div
       className={`SidebarMatch__container ${
@@ -128,8 +137,7 @@ const SidebarMatch = ({
             <div className="SidebarMatch__suggestion-list">
               <SuggestionList
                 applySuggestions={applySuggestions}
-                matchId={match.matchId}
-                matchedText={match.matchedText}
+                match={match}
                 suggestions={suggestions}
               />
             </div>

diff --git a/src/ts/components/Suggestion.tsx b/src/ts/components/Suggestion.tsx
@@ -1,21 +1,21 @@
-import React from "react";
+import React, { useContext } from "react";
 import jsDiff, { Change } from "diff";
 
 import { ApplySuggestionOptions } from "../commands";
-import { ISuggestion } from "../interfaces/IMatch";
+import { ISuggestion, IMatch } from "../interfaces/IMatch";
 import WikiSuggestion from "./WikiSuggestion";
+import TelemetryContext from "../contexts/TelemetryContext";
 
 interface IProps {
-  matchId: string;
-  matchedText: string;
+  match: IMatch;
   suggestion: ISuggestion;
   applySuggestions: (opts: ApplySuggestionOptions) => void;
 }
 
 /**
  * At the moment, only show fancy diffs for smaller words.
  */
-const shouldShowDiff = (matchedText: string) => matchedText.length < 16
+const shouldShowDiff = (matchedText: string) => matchedText.length < 16;
 
 /**
  * Render a diff between the matched text and the suggestion, only showing
@@ -56,31 +56,41 @@ const renderSuggestionText = (matchedText: string, suggestionText: string) => {
         <span className="Suggestion__arrow">&nbsp;→&nbsp;</span>
         <span className="Suggestion__text">{suggestionText}</span>
       </>
-    )
+    );
   }
 
-  return <span className="Suggestion__text">{suggestionText}</span>
-}
+  return <span className="Suggestion__text">{suggestionText}</span>;
+};
+
+const Suggestion = ({ match, suggestion, applySuggestions }: IProps) => {
+  const { telemetryService } = useContext(TelemetryContext);
+
+  const boundApplySuggestions = () => {
+    if (!applySuggestions) {
+      return;
+    }
 
-const Suggestion = ({
-  matchId,
-  suggestion,
-  matchedText,
-  applySuggestions
-}: IProps) => {
-  const boundApplySuggestions = () =>
-    applySuggestions &&
     applySuggestions([
       {
-        matchId,
+        matchId: match.matchId,
         text: suggestion.text
       }
     ]);
+
+    telemetryService?.suggestionIsAccepted({
+      documentUrl: document.URL,
+      ruleId: match.ruleId,
+      matchId: match.matchId,
+      matchedText: match.matchedText,
+      matchContext: match.matchContext,
+      suggestion: suggestion.text
+    });
+  };
   switch (suggestion.type) {
     case "TEXT_SUGGESTION": {
       return (
         <div className="Suggestion" onClick={boundApplySuggestions}>
-          {renderSuggestionText(matchedText, suggestion.text)}
+          {renderSuggestionText(match.matchedText, suggestion.text)}
         </div>
       );
     }

diff --git a/src/ts/components/SuggestionList.tsx b/src/ts/components/SuggestionList.tsx
@@ -1,51 +1,52 @@
-import React, { useState }  from "react";
-import { ISuggestion } from "../interfaces/IMatch";
+import React, { useState } from "react";
+import { ISuggestion, IMatch } from "../interfaces/IMatch";
 import Suggestion from "./Suggestion";
 import { ApplySuggestionOptions } from "../commands";
 
 interface IProps {
   suggestions: ISuggestion[];
-  matchId: string;
-  matchedText: string;
+  match: IMatch;
   applySuggestions: (opts: ApplySuggestionOptions) => void;
 }
 
-const SuggestionList = ({ suggestions, matchId, matchedText, applySuggestions }: IProps) => {
+const SuggestionList = ({
+  suggestions,
+  match,
+  applySuggestions,
+}: IProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const firstSuggestion = suggestions[0];
   const otherSuggestions = suggestions.slice(1);
   return (
-    <div className="SidebarMatch__suggestion-list">
-      {suggestions.length ? (
-        <Suggestion
-          matchId={matchId}
-          matchedText={matchedText}
-          suggestion={firstSuggestion}
-          applySuggestions={applySuggestions}
-        />
-      ) : null}
-      {!!otherSuggestions.length ? (
-        <div
-          className="Button SuggestionList__see-more"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          See {!isOpen ? "more" : "fewer"} suggestions (
-          {otherSuggestions.length})
-        </div>
-      ) : null}
-      {isOpen && (
-        <>
-          {otherSuggestions.map(suggestion => (
-            <Suggestion
-              matchId={matchId}
-              matchedText={matchedText}
-              suggestion={suggestion}
-              applySuggestions={applySuggestions}
-            />
-          ))}
-        </>
-      )}
-    </div>
+      <div className="SidebarMatch__suggestion-list">
+        {suggestions.length ? (
+          <Suggestion
+            match={match}
+            suggestion={firstSuggestion}
+            applySuggestions={applySuggestions}
+          />
+        ) : null}
+        {!!otherSuggestions.length ? (
+          <div
+            className="Button SuggestionList__see-more"
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            See {!isOpen ? "more" : "fewer"} suggestions (
+            {otherSuggestions.length})
+          </div>
+        ) : null}
+        {isOpen && (
+          <>
+            {otherSuggestions.map(suggestion => (
+              <Suggestion
+                match={match}
+                suggestion={suggestion}
+                applySuggestions={applySuggestions}
+              />
+            ))}
+          </>
+        )}
+      </div>
   );
 };
 

diff --git a/src/ts/createView.tsx b/src/ts/createView.tsx
@@ -59,7 +59,7 @@ const createView = ({
 
   // Finally, render our components.
   render(
-    <TelemetryContext.Provider value={{telemetryService}}>
+    <TelemetryContext.Provider value={{ telemetryService }}>
       <MatchOverlay
         store={store}
         applySuggestions={suggestionOpts => {
@@ -71,18 +71,24 @@ const createView = ({
           (match => {
             commands.ignoreMatch(match.matchId);
             onMarkCorrect(match);
+            telemetryService.matchIsMarkedAsCorrect({
+              documentUrl: document.URL,
+              ruleId: match.ruleId,
+              matchId: match.matchId,
+              matchedText: match.matchedText,
+              matchContext: match.matchContext
+            });
           })
         }
         feedbackHref={feedbackHref}
         stopHover={commands.stopHover}
       />
     </TelemetryContext.Provider>,
     overlayNode
-
   );
 
   render(
-    <TelemetryContext.Provider value={{telemetryService}}>
+    <TelemetryContext.Provider value={{ telemetryService }}>
       <Sidebar
         store={store}
         matcherService={matcherService}

diff --git a/src/ts/interfaces/ITelemetryData.ts b/src/ts/interfaces/ITelemetryData.ts
@@ -29,9 +29,10 @@ export interface ITyperighterTelemetryEvent extends ITelemetryEvent {
 }
 
 interface IMatchEventTags {
-  ruleId: string;
+  ruleId: string,
   suggestion?: string;
-  match: string;
+  matchId: string;
+  matchedText: string;
   matchContext: string;
 }