Add send behavior events for mixpanel

Author: jgreywolf

packages/office/src/lib/client/clientApi/PowerPointService.ts

@@ -5,6 +5,7 @@ import { showUserMessage } from '../stores/messaging';
 import type { Diagram } from './officeManager';
 import { authStore } from '../stores/auth';
 import { OfficeService } from './OfficeService';
+import { sendBehaviorEvent } from '../util/sendEvents';
 export class PowerPointService extends OfficeService {
   authToken = authStore.accessKey();
 
@@ -73,6 +74,11 @@ export class PowerPointService extends OfficeService {
     const docDetails = splitReferenceToken(tag);
     const document = await this.mermaidChartApi.getDocument(docDetails.documentID);
     if(!document) {
+      sendBehaviorEvent(
+        'Could not find document in presentation', {
+          area: 'sync-diagrams',
+          eventID: `REPLACE_DIAGRAM_POWERPOINT`
+        });
       throw new DiagramNotFoundError(docDetails.documentID);
     }
 

packages/office/src/lib/client/clientApi/WordService.ts

@@ -6,6 +6,7 @@ import { ContentControlsNotFoundError, DiagramNotFoundError, RefreshError } from
 import type { Diagram } from './officeManager';
 import { authStore } from '../stores/auth';
 import { OfficeService } from './OfficeService';
+import { sendBehaviorEvent } from '../util/sendEvents';
 
 export class WordService extends OfficeService {
   authToken = authStore.accessKey();
@@ -56,6 +57,11 @@ export class WordService extends OfficeService {
   public async syncDiagrams() {
     const controlTagsToUpdate = await this.getContentControlTagsToUpdate().catch((error) => {
       if(error instanceof ContentControlsNotFoundError) {
+        sendBehaviorEvent(
+          'No diagrams found in document to sync', {
+            area: 'sync-diagrams',
+            eventID: `SYNC_DIAGRAM_WORD`
+          });
         showUserMessage(
           'No diagrams found in document',
           'info'

packages/office/src/lib/client/clientApi/officeManager.ts

@@ -7,6 +7,7 @@ import { PowerPointService } from './PowerPointService';
 import { WordService } from './WordService';
 import { InvalidTokenError } from '$lib/errors';
 import { ExcelService } from './ExcelService';
+import { sendBehaviorEvent } from '../util/sendEvents';
 
 export interface Diagram {
   base64Image: string;
@@ -19,9 +20,11 @@ export interface Diagram {
 export class OfficeManager {
   officeService: OfficeService;
   mermaidChartApi: MermaidChart;
+  host: Office.HostType;
 
   constructor(host: Office.HostType, api: MermaidChart) { 
     this.mermaidChartApi = api;
+    this.host = host;
     switch(host) {
       case Office.HostType.Word: {
         this.officeService = new WordService(this.mermaidChartApi);
@@ -65,13 +68,28 @@ export class OfficeManager {
       };
 
       await this.officeService.insertDiagram(diagram);
+      sendBehaviorEvent(
+        'Insert PNG of diagram', {
+          area: 'insert-diagram',
+          eventID: `DIAGRAM_INSERT_${this.host.toString().toUpperCase()}`
+        });
     } catch (error) {
         if(error instanceof InvalidTokenError) {
+          sendBehaviorEvent(
+            'Auth token invalid or not found', {
+              area: 'insert-diagram',
+              eventID: `DIAGRAM_INSERT_${this.host.toString().toUpperCase()}`
+            });
           showUserMessage(
             'Auth token invalid or not found, please make sure that you are authenticated, or contact support',
             'error'
           );
         } else {
+          sendBehaviorEvent(
+            'Error generating PNG', {
+              area: 'insert-diagram',
+              eventID: `DIAGRAM_INSERT_${this.host.toString().toUpperCase()}`
+            });
           showUserMessage(
             'Error generating image, or image not found. Please contact support',
             'error'
@@ -86,7 +104,17 @@ export class OfficeManager {
       try {
         loading.setState(true, 'Syncing diagrams in document...');
         await this.officeService.syncDiagrams();
+        sendBehaviorEvent(
+          'Sync diagrams with mermaid chart', {
+            area: 'sync-diagrams',
+            eventID: `SYNC_DIAGRAM_${this.host.toString().toUpperCase()}`
+          });
       } catch {
+        sendBehaviorEvent(
+          'Sync diagrams failed', {
+            area: 'insert-diagram',
+            eventID: `SYNC_DIAGRAM_${this.host.toString().toUpperCase()}`
+          });
         showUserMessage(
           'Error refreshing diagrams. Please contact support',
           'error'

packages/office/src/lib/client/components/DocumentCard.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import type { OfficeManager } from '$lib/client/clientApi/officeManager';
-  import { createEventDispatcher } from 'svelte';
   import { documentStore } from '../stores/documents';
   import { storePopup } from '@skeletonlabs/skeleton';
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-  import { C } from '$lib/constants';
-  import { loading } from '../stores/loading';
-    import RawView from './Editor/RawView.svelte';
+
+  import RawView from './Editor/RawView.svelte';
 
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });