added matomo in right side panel

Author: Aniket-Engg

apps/remix-ide/src/app/components/right-side-panel.tsx

@@ -5,6 +5,7 @@ import { PluginRecord, RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { RemixUIPanelHeader } from '@remix-ui/panel'
 import { PluginViewWrapper } from '@remix-ui/helper'
+import { trackMatomoEvent } from '@remix-api'
 
 const rightSidePanel = {
   name: 'rightSidePanel',
@@ -61,6 +62,7 @@ export class RightSidePanel extends AbstractPanel {
       if (this.isHidden) {
         const pinnedPanel = document.querySelector('#right-side-panel')
         pinnedPanel?.classList.add('d-none')
+        trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'hiddenOnLoad', isClick: false })
         this.emit('rightSidePanelHidden')
         this.events.emit('rightSidePanelHidden')
       }
@@ -76,6 +78,7 @@ export class RightSidePanel extends AbstractPanel {
       window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
       const pinnedPanel = document.querySelector('#right-side-panel')
       pinnedPanel?.classList.add('d-none')
+      trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'InitializeDefaultAndHiddenOnLoad', isClick: false })
       this.emit('rightSidePanelHidden')
       this.events.emit('rightSidePanelHidden')
     }
@@ -126,7 +129,7 @@ export class RightSidePanel extends AbstractPanel {
       this.events.emit('rightSidePanelShown')
       this.emit('rightSidePanelShown')
     }
-
+    trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'shownOnPluginPinned', isClick: false })
     // Save pinned plugin profile to panelStates
     const updatedPanelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
     updatedPanelStates.rightSidePanel = {
@@ -156,6 +159,7 @@ export class RightSidePanel extends AbstractPanel {
       pluginProfile: null
     }
     window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
+    trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'hiddenOnPluginUnpinned', isClick: false })
     this.renderComponent()
     this.events.emit('unPinnedPlugin', profile)
     this.emit('unPinnedPlugin', profile)
@@ -180,6 +184,7 @@ export class RightSidePanel extends AbstractPanel {
       // Ensure the panel is hidden and toggle icon is off
       if (!this.isHidden) {
         this.isHidden = true
+        trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'hiddenOnToggleIconClickAndNoPluginPinned', isClick: false })
         pinnedPanel?.classList.add('d-none')
         this.emit('rightSidePanelHidden')
         this.events.emit('rightSidePanelHidden')
@@ -196,12 +201,14 @@ export class RightSidePanel extends AbstractPanel {
     if (this.isHidden) {
       this.isHidden = false
       pinnedPanel?.classList.remove('d-none')
+      trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'shownOnToggleIconClick', isClick: false })
       this.emit('rightSidePanelShown')
       this.events.emit('rightSidePanelShown')
     } else {
       this.isHidden = true
       this.hiddenPlugin = pluginProfile
       pinnedPanel?.classList.add('d-none')
+      trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'hiddenOnToggleIconClick', isClick: false })
       this.emit('rightSidePanelHidden')
       this.events.emit('rightSidePanelHidden')
     }
@@ -225,6 +232,7 @@ export class RightSidePanel extends AbstractPanel {
       this.isHidden = false
       this.hiddenPlugin = null
       pinnedPanel?.classList.remove('d-none')
+      trackMatomoEvent(this, { category: 'topbar', action: 'rightSidePanel', name: 'shownOnVerticalIconClick', isClick: false })
       this.emit('rightSidePanelShown')
       this.events.emit('rightSidePanelShown')
 

libs/remix-api/src/lib/plugins/matomo/events/ui-events.ts

@@ -27,8 +27,9 @@ export interface TopbarEvent extends MatomoEventBase {
   category: 'topbar';
   action:
     | 'GIT'
-    | 'panelShown'
-    | 'panelHidden'
+    | 'leftSidePanel'
+    | 'terminalPanel'
+    | 'rightSidePanel'
     | 'header';
 }
 

libs/remix-ui/top-bar/src/lib/remix-ui-topbar.tsx

@@ -107,31 +107,31 @@ export function RemixUiTopbar() {
     // Listen to left side panel events
     plugin.on('sidePanel', 'leftSidePanelHidden', () => {
       setLeftPanelHidden(true)
-      trackMatomoEvent({ category: 'topbar', action: 'panelHidden', name: 'leftSidePanel', isClick: true })
+      trackMatomoEvent({ category: 'topbar', action: 'leftSidePanel', name: 'panelHidden', isClick: false })
     })
     plugin.on('sidePanel', 'leftSidePanelShown', () => {
       setLeftPanelHidden(false)
-      trackMatomoEvent({ category: 'topbar', action: 'panelShown', name: 'leftSidePanel', isClick: true })
+      trackMatomoEvent({ category: 'topbar', action: 'leftSidePanel', name: 'panelShown', isClick: false })
     })
 
     // Listen to terminal panel events
     plugin.on('terminal', 'terminalPanelHidden', () => {
       setBottomPanelHidden(true)
-      trackMatomoEvent({ category: 'topbar', action: 'panelHidden', name: 'terminalPanel', isClick: true })
+      trackMatomoEvent({ category: 'topbar', action: 'terminalPanel', name: 'panelHidden', isClick: false })
     })
     plugin.on('terminal', 'terminalPanelShown', () => {
       setBottomPanelHidden(false)
-      trackMatomoEvent({ category: 'topbar', action: 'panelShown', name: 'terminalPanel', isClick: true })
+      trackMatomoEvent({ category: 'topbar', action: 'terminalPanel', name: 'panelShown', isClick: false })
     })
 
     // Listen to right side panel events
     plugin.on('rightSidePanel', 'rightSidePanelHidden', () => {
       setRightPanelHidden(true)
-      trackMatomoEvent({ category: 'topbar', action: 'panelHidden', name: 'rightSidePanel', isClick: true })
+      trackMatomoEvent({ category: 'topbar', action: 'rightSidePanel', name: 'panelHidden', isClick: false })
     })
     plugin.on('rightSidePanel', 'rightSidePanelShown', () => {
       setRightPanelHidden(false)
-      trackMatomoEvent({ category: 'topbar', action: 'panelShown', name: 'rightSidePanel', isClick: true })
+      trackMatomoEvent({ category: 'topbar', action: 'rightSidePanel', name: 'panelShown', isClick: false })
     })
 
     // Initialize panel states from localStorage
@@ -597,21 +597,33 @@ export function RemixUiTopbar() {
               <div
                 className={`codicon codicon-layout-sidebar-left${leftPanelHidden ? '-off' : ''} fs-5`}
                 data-id="toggleLeftSidePanelIcon"
-                onClick={() => plugin.call('sidePanel', 'togglePanel')}
+                onClick={() => {
+                  trackMatomoEvent({ category: 'topbar', action: 'leftSidePanel', name: 'toggleIconClicked', isClick: true })
+                  plugin.call('sidePanel', 'togglePanel')
+                  }
+                }
               ></div>
             </CustomTooltip>
             <CustomTooltip placement="bottom-start" tooltipText={`Toggle Bottom Panel`}>
               <div
                 className={`codicon codicon-layout-panel${bottomPanelHidden ? '-off' : ''} fs-5`}
                 data-id="toggleBottomPanelIcon"
-                onClick={() => plugin.call('terminal', 'togglePanel')}
+                onClick={() => {
+                  trackMatomoEvent({ category: 'topbar', action: 'terminalPanel', name: 'toggleIconClicked', isClick: true })
+                  plugin.call('terminal', 'togglePanel')
+                  }
+                }
               ></div>
             </CustomTooltip>
             <CustomTooltip placement="bottom-start" tooltipText={`Toggle Right Side Panel`}>
               <div
                 className={`codicon codicon-layout-sidebar-right${rightPanelHidden ? '-off' : ''} fs-5`}
                 data-id="toggleRightSidePanelIcon"
-                onClick={() => plugin.call('rightSidePanel', 'togglePanel')}
+                onClick={() => {
+                  trackMatomoEvent({ category: 'topbar', action: 'rightSidePanel', name: 'toggleIconClicked', isClick: true })
+                  plugin.call('rightSidePanel', 'togglePanel')
+                }
+                }
               ></div>
             </CustomTooltip>
           </div>