ENG-1448 - Add PostHog capture events for broader Roam feature usage telemetry

apps/roam/src/components/CreateRelationDialog.tsx

@@ -24,6 +24,7 @@ import type { Result } from "~/utils/types";
 import internalError from "~/utils/internalError";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
+import posthog from "posthog-js";
 
 export type CreateRelationDialogProps = {
   onClose: () => void;
@@ -162,6 +163,10 @@ const CreateRelationDialog = ({
   };
 
   const onCreateSync = (): void => {
+    posthog.capture("Create Relation Dialog: Create Triggered", {
+      relationName: selectedRelationName,
+      hasTarget: !!selectedTarget.uid,
+    });
     onCreate()
       .then((result: boolean) => {
         if (result) {

apps/roam/src/components/DiscourseFloatingMenu.tsx

@@ -12,6 +12,7 @@ import {
 } from "@blueprintjs/core";
 import { FeedbackWidget } from "./BirdEatsBugs";
 import { render as renderSettings } from "~/components/settings/Settings";
+import posthog from "posthog-js";
 
 type DiscourseFloatingMenuProps = {
   // CSS placement class
@@ -36,6 +37,7 @@ export const DiscourseFloatingMenu = (props: DiscourseFloatingMenuProps) => (
             text="Send feedback"
             icon="send-message"
             onClick={() => {
+              posthog.capture("Floating Menu: Feedback Clicked");
               try {
                 (window.birdeatsbug as FeedbackWidget | undefined)?.trigger?.();
               } catch (error) {
@@ -46,26 +48,34 @@ export const DiscourseFloatingMenu = (props: DiscourseFloatingMenuProps) => (
           <MenuItem
             text="Docs"
             icon="book"
+            onClick={() => posthog.capture("Floating Menu: Docs Clicked")}
             href="https://discoursegraphs.com/docs/roam"
             rel="noopener noreferrer"
             target="_blank"
           />
           <MenuItem
             text="Community"
             icon="social-media"
+            onClick={() => posthog.capture("Floating Menu: Community Clicked")}
             href="https://join.slack.com/t/discoursegraphs/shared_invite/zt-37xklatti-cpEjgPQC0YyKYQWPNgAkEg"
             rel="noopener noreferrer"
             target="_blank"
           />
           <MenuItem
             text="Settings"
             icon="cog"
-            onClick={() => renderSettings({ onloadArgs: props.onloadArgs! })}
+            onClick={() => {
+              posthog.capture("Floating Menu: Settings Clicked");
+              renderSettings({ onloadArgs: props.onloadArgs! });
+            }}
             rel="noopener noreferrer"
             target="_blank"
           />
         </Menu>
       }
+      onOpened={() => {
+        posthog.capture("Floating Menu: Opened");
+      }}
       onClosed={() => {
         document.getElementById("dg-floating-menu-button")?.blur();
       }}

apps/roam/src/components/DiscourseSuggestionsPanel.tsx

@@ -7,6 +7,7 @@ import {
   Collapse,
 } from "@blueprintjs/core";
 import React, { useState, useCallback, useEffect } from "react";
+import posthog from "posthog-js";
 import SuggestionsBody from "./SuggestionsBody";
 
 export const DiscourseSuggestionsPanel = ({
@@ -31,6 +32,9 @@ export const DiscourseSuggestionsPanel = ({
   const handleToggle = useCallback(() => {
     setIsOpen((prev) => {
       const next = !prev;
+      posthog.capture("Suggestive Mode Panel: Toggled", {
+        isOpen: next,
+      });
       onToggle(next);
       return next;
     });

apps/roam/src/components/Export.tsx

@@ -83,6 +83,7 @@ import getDiscourseRelations, {
   DiscourseRelation,
 } from "~/utils/getDiscourseRelations";
 import { AddReferencedNodeType } from "./canvas/DiscourseRelationShape/DiscourseRelationTool";
+import posthog from "posthog-js";
 
 const ExportProgress = ({ id }: { id: string }) => {
   const [progress, setProgress] = useState(0);
@@ -154,6 +155,9 @@ const ExportDialog: ExportDialogComponent = ({
   useEffect(() => {
     setDialogOpen(isOpen);
   }, [isOpen]);
+
+  // TODO: maybe add posthog capture here for isOpen
+
   const [dialogOpen, setDialogOpen] = useState(isOpen);
   const exportTypes = useMemo(
     () => getExportTypes({ results, exportId, isExportDiscourseGraph }),
@@ -651,6 +655,8 @@ const ExportDialog: ExportDialogComponent = ({
       let toastContent: React.ReactNode;
       let uid = selectedPageUid;
       const title = selectedPageTitle;
+      const isCanvasDestination = !isSendToGraph && isCanvasPage;
+      const shouldCreatePage = !isSendToGraph && !isLiveBlock(uid);
 
       if (isSendToGraph) {
         addToGraphOverView();
@@ -687,6 +693,13 @@ const ExportDialog: ExportDialogComponent = ({
         );
       }
 
+      posthog.capture("Results View: Send To Destination", {
+        destination: isSendToGraph ? "graph" : "page",
+        isCanvasDestination,
+        createdPage: shouldCreatePage,
+        resultCount: results.length,
+      });
+
       renderToast({
         content: toastContent,
         intent: "success",
@@ -735,10 +748,20 @@ const ExportDialog: ExportDialogComponent = ({
       if (download) {
         const blob = new Blob([download], { type: "application/zip" });
         saveAs(blob, `${filename}.zip`);
+        posthog.capture("Export Dialog: Export Completed", {
+          exportType: "PDF",
+          destination: activeExportDestination,
+          fileCount: files.length,
+        });
       }
       onClose();
     } catch (e) {
       setError("Failed to export files.");
+      posthog.capture("Export Dialog: Export Failed", {
+        exportType: "PDF",
+        destination: activeExportDestination,
+        error: (e as Error).message ?? "unknown error",
+      });
     }
   };
   const ExportPanel = (
@@ -838,6 +861,13 @@ const ExportDialog: ExportDialogComponent = ({
               setLoading(true);
               updateExportProgress({ progress: 0, id: exportId });
               setError("");
+              posthog.capture("Export Dialog: Export Started", {
+                exportType: activeExportType,
+                destination: activeExportDestination,
+                includeDiscourseContext,
+                resultCount: results.length,
+                isExportDiscourseGraph,
+              });
               // eslint-disable-next-line @typescript-eslint/no-misused-promises
               setTimeout(async () => {
                 try {
@@ -879,6 +909,11 @@ const ExportDialog: ExportDialogComponent = ({
                             content: "Upload Success",
                             intent: "success",
                           });
+                          posthog.capture("Export Dialog: Export Completed", {
+                            exportType: activeExportType,
+                            destination: activeExportDestination,
+                            fileCount: files.length,
+                          });
                           onClose();
                         }
                       } catch (error) {
@@ -894,6 +929,11 @@ const ExportDialog: ExportDialogComponent = ({
                         type: "text/plain;charset=utf-8",
                       });
                       saveAs(blob, title);
+                      posthog.capture("Export Dialog: Export Completed", {
+                        exportType: activeExportType,
+                        destination: activeExportDestination,
+                        fileCount: files.length,
+                      });
                       onClose();
                       return;
                     }
@@ -906,12 +946,22 @@ const ExportDialog: ExportDialogComponent = ({
                     );
                     void zip.generateAsync({ type: "blob" }).then((content) => {
                       saveAs(content, `${filename}.zip`);
+                      posthog.capture("Export Dialog: Export Completed", {
+                        exportType: activeExportType,
+                        destination: activeExportDestination,
+                        fileCount: files.length,
+                      });
                       onClose();
                     });
                   } else {
                     setError(`Unsupported export type: ${exportType}`);
                   }
                 } catch (e) {
+                  posthog.capture("Export Dialog: Export Failed", {
+                    exportType: activeExportType,
+                    destination: activeExportDestination,
+                    error: (e as Error).message ?? "unknown error",
+                  });
                   internalError({
                     error: e as Error,
                     type: "Export Dialog Failed",
@@ -1007,7 +1057,12 @@ const ExportDialog: ExportDialogComponent = ({
           id="export-tabs"
           large={true}
           selectedTabId={selectedTabId}
-          onChange={(newTabId: string) => setSelectedTabId(newTabId)}
+          onChange={(newTabId: string) => {
+            setSelectedTabId(newTabId);
+            posthog.capture("Export Dialog: Tab Opened", {
+              tabId: newTabId,
+            });
+          }}
         >
           <Tab id="sendto" title="Send To" panel={SendToPanel} />
           <Tab id="export" title="Export" panel={ExportPanel} />

apps/roam/src/components/ImportDialog.tsx

@@ -11,6 +11,7 @@ import React, { useMemo, useState } from "react";
 import createBlock from "roamjs-components/writes/createBlock";
 import getChildrenLengthByPageUid from "roamjs-components/queries/getChildrenLengthByPageUid";
 import createOverlayRender from "roamjs-components/util/createOverlayRender";
+import posthog from "posthog-js";
 import importDiscourseGraph from "~/utils/importDiscourseGraph";
 
 const ImportDialog = ({ onClose }: { onClose: () => void }) => {
@@ -49,6 +50,10 @@ const ImportDialog = ({ onClose }: { onClose: () => void }) => {
             disabled={loading}
             onClick={() => {
               setLoading(true);
+              posthog.capture("Import Dialog: Import Started", {
+                hasFile: !!file,
+                title,
+              });
               setTimeout(() => {
                 const reader = new FileReader();
                 reader.onload = (event) => {

apps/roam/src/components/LeftSidebarView.tsx

@@ -42,6 +42,7 @@ import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByPar
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import { migrateLeftSidebarSettings } from "~/utils/migrateLeftSidebarSettings";
+import posthog from "posthog-js";
 
 const parseReference = (text: string) => {
   const extracted = extractRef(text);
@@ -61,6 +62,10 @@ const openTarget = async (e: React.MouseEvent, targetUid: string) => {
   e.preventDefault();
   e.stopPropagation();
   const target = parseReference(targetUid);
+  posthog.capture("Left Sidebar: Target Opened", {
+    targetType: target.type,
+    openInSidebar: e.shiftKey,
+  });
   if (target.type === "block") {
     if (e.shiftKey) {
       await openBlockInSidebar(target.uid);

apps/roam/src/components/ModifyNodeDialog.tsx

@@ -35,6 +35,7 @@ import { render as renderToast } from "roamjs-components/components/Toast";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import resolveQueryBuilderRef from "~/utils/resolveQueryBuilderRef";
 import runQuery from "~/utils/runQuery";
+import posthog from "posthog-js";
 
 export type ModifyNodeDialogMode = "create" | "edit";
 export type ModifyNodeDialogProps = {
@@ -301,6 +302,10 @@ const ModifyNodeDialog = ({
 
   const onSubmit = async () => {
     if (!content.text.trim()) return;
+    posthog.capture("Modify Node Dialog: Submit Triggered", {
+      mode,
+      nodeType: selectedNodeType.type,
+    });
     try {
       if (mode === "create") {
         // If content is locked (user selected existing node), just insert it

apps/roam/src/components/QueryDrawer.tsx

@@ -380,7 +380,7 @@ const QueryDrawer = ({
 );
 
 export const openQueryDrawer = (onloadArgs: OnloadArgs) => {
-  posthog.capture("Query Drawer: Opened", {});
+  posthog.capture("Query Drawer: Opened");
   return Promise.resolve(
     getPageUidByPageTitle("roam/js/query-builder/drawer") ||
       createPage({

apps/roam/src/components/SuggestionsBody.tsx

@@ -29,6 +29,7 @@ import { render as renderToast } from "roamjs-components/components/Toast";
 import { getSetting } from "~/utils/extensionSettings";
 import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
 import { createReifiedRelation } from "~/utils/createReifiedBlock";
+import posthog from "posthog-js";
 
 export type DiscourseData = {
   results: Awaited<ReturnType<typeof getDiscourseContextResults>>;
@@ -369,6 +370,12 @@ const SuggestionsBody = ({
         node: { text: `[[${node.text}]]` },
       });
     }
+    posthog.capture("Suggestive Mode: Suggestion Adopted", {
+      tag,
+      nodeType: node.type,
+      nodeText: node.text,
+      useReifiedRelations: getSetting<boolean>(USE_REIFIED_RELATIONS, false),
+    });
     setHydeFilteredNodes((prev) => prev.filter((n) => n.uid !== node.uid));
   };
 

apps/roam/src/components/VectorDuplicateMatches.tsx

@@ -8,6 +8,7 @@ import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTit
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import extractContentFromTitle from "~/utils/extractContentFromTitle";
 import { handleTitleAdditions } from "~/utils/handleTitleAdditions";
+import posthog from "posthog-js";
 
 export const VectorDuplicateMatches = ({
   pageTitle,
@@ -109,6 +110,7 @@ export const VectorDuplicateMatches = ({
         className="flex cursor-pointer items-center justify-between p-2"
         onClick={() => {
           setIsOpen(!isOpen);
+          posthog.capture("Possible Duplicates: Toggled");
         }}
       >
         <div className="flex items-center gap-2">

apps/roam/src/components/canvas/CanvasDrawer.tsx

@@ -20,6 +20,7 @@ import getCurrentPageUid from "roamjs-components/dom/getCurrentPageUid";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import { DiscourseNodeShape } from "./DiscourseNodeUtil";
 import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
+import posthog from "posthog-js";
 
 export type GroupedShapes = Record<string, DiscourseNodeShape[]>;
 
@@ -390,6 +391,7 @@ export const CanvasDrawerPanel = () => {
   const editor = useEditor();
   const toggleDrawer = useCallback(() => {
     setIsOpen((prev) => !prev);
+    posthog.capture("Canvas Drawer: Toggled");
   }, []);
   const [isOpen, setIsOpen] = useState(false);
   const pageUid = getCurrentPageUid();

apps/roam/src/components/canvas/Clipboard.tsx

@@ -61,6 +61,7 @@ import getBlockProps from "~/utils/getBlockProps";
 import setBlockProps from "~/utils/setBlockProps";
 import { measureCanvasNodeText } from "~/utils/measureCanvasNodeText";
 import internalError from "~/utils/internalError";
+import posthog from "posthog-js";
 
 export type ClipboardPage = {
   uid: string;
@@ -216,7 +217,10 @@ export const ClipboardProvider = ({
 
   const openClipboard = useCallback(() => setIsOpen(true), []);
   const closeClipboard = useCallback(() => setIsOpen(false), []);
-  const toggleClipboard = useCallback(() => setIsOpen((prev) => !prev), []);
+  const toggleClipboard = useCallback(() => {
+    setIsOpen((prev) => !prev);
+    posthog.capture("Canvas Clipboard: Toggled");
+  }, []);
 
   const addPage = useCallback((page: ClipboardPage) => {
     setPages((prev) => {

apps/roam/src/components/canvas/ConvertToDialog.tsx

@@ -4,6 +4,7 @@ import { Editor } from "tldraw";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import { getOnSelectForShape } from "./uiOverrides";
 import { Dialog, Button, Classes } from "@blueprintjs/core";
+import posthog from "posthog-js";
 
 const ConvertToDialog = ({
   extensionAPI,
@@ -62,6 +63,13 @@ const ConvertToDialog = ({
                         className="flex-grow justify-start p-2 px-7 focus:bg-gray-300 focus:outline-none"
                         style={{ caretColor: "transparent" }}
                         onClick={() => {
+                          posthog.capture(
+                            "Canvas Convert To Dialog: Node Type Selected",
+                            {
+                              nodeType: node.type,
+                              shapeType: selectedShapes[0]?.type || "unknown",
+                            },
+                          );
                           getOnSelectForShape({
                             shape: selectedShapes[0],
                             nodeType: node.type,