[KED-2804] Heap event tracking (#556)

* testing for theme click * Added data-heap-events * add back events lost from merge Signed-off-by: Tynan DeBold <[email protected]> Co-authored-by: Tynan DeBold <[email protected]>
kedro-org · May 18, 2022 · 2ab2366 · 2ab2366
1 parent b2c3f6c
commit 2ab2366
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 1 deletion.
diff --git a/src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js b/src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js
@@ -46,6 +46,7 @@ export const FlowchartPrimaryToolbar = ({
       <IconButton
         ariaLabel={`Turn data layers ${visibleLayers ? 'off' : 'on'}`}
         className={'pipeline-menu-button--layers'}
+        dataHeapEvent={`visible.layers.${visibleLayers}`}
         onClick={() => onToggleLayers(!visibleLayers)}
         icon={LayersIcon}
         labelText={`${visibleLayers ? 'Hide' : 'Show'} layers`}

diff --git a/src/components/flowchart/draw.js b/src/components/flowchart/draw.js
@@ -159,6 +159,7 @@ export const drawNodes = function (changed) {
     enterNodes
       .attr('tabindex', '0')
       .attr('class', 'pipeline-node')
+      .attr('data-heap-event', (node) => `clicked.graph.${node.type}`)
       .attr('transform', (node) => `translate(${node.x}, ${node.y})`)
       .attr('data-id', (node) => node.id)
       .classed(

diff --git a/src/components/global-toolbar/global-toolbar.js b/src/components/global-toolbar/global-toolbar.js
@@ -64,9 +64,10 @@ export const GlobalToolbar = ({
             className={
               'pipeline-menu-button--theme pipeline-menu-button--large'
             }
+            dataHeapEvent={`theme.${theme}`}
+            onClick={() => onToggleTheme(theme === 'light' ? 'dark' : 'light')}
             icon={ThemeIcon}
             labelText="Toggle theme"
-            onClick={() => onToggleTheme(theme === 'light' ? 'dark' : 'light')}
           />
           <IconButton
             ariaLabel={'Change the settings flags'}

diff --git a/src/components/node-list/node-list-row.js b/src/components/node-list/node-list-row.js
@@ -110,6 +110,7 @@ const NodeListRow = memo(
             `pipeline-nodelist__row__text--kind-${kind}`,
             `pipeline-nodelist__row__text--${rowType}`
           )}
+          data-heap-event={`clicked.sidebar.${icon}`}
           onClick={onClick}
           onFocus={onMouseEnter}
           onBlur={onMouseLeave}
@@ -148,6 +149,11 @@ const NodeListRow = memo(
             <input
               id={id}
               className="pipeline-nodelist__row__checkbox"
+              data-heap-event={
+                kind === 'element'
+                  ? `focusMode.checked.${checked}`
+                  : `visible.${name}.${checked}`
+              }
               type="checkbox"
               checked={checked}
               disabled={disabled}

diff --git a/src/components/primary-toolbar/primary-toolbar.js b/src/components/primary-toolbar/primary-toolbar.js
@@ -22,6 +22,7 @@ export const PrimaryToolbar = ({
       {displaySidebar && (
         <IconButton
           ariaLabel={`${visible.sidebar ? 'Hide' : 'Show'} menu`}
+          dataHeapEvent={`visible.sidebar.${visible.sidebar}`}
           className={classnames(
             'pipeline-menu-button',
             'pipeline-menu-button--menu',

diff --git a/src/components/ui/command-copier/command-copier.js b/src/components/ui/command-copier/command-copier.js
@@ -36,6 +36,7 @@ const CommandCopier = ({ command }) => {
             <IconButton
               ariaLabel="Copy run command to clipboard."
               className="copy-button"
+              dataHeapEvent={`clicked.run_command`}
               icon={CopyIcon}
               onClick={onCopyClick}
             />

diff --git a/src/components/ui/icon-button/icon-button.js b/src/components/ui/icon-button/icon-button.js
@@ -16,6 +16,7 @@ const IconButton = ({
   hasReminder,
   icon,
   labelText,
+  dataHeapEvent,
   onClick,
   visible,
 }) => {
@@ -24,6 +25,7 @@ const IconButton = ({
   return visible ? (
     <Container>
       <button
+        data-heap-event={dataHeapEvent}
         aria-label={ariaLabel}
         aria-live={ariaLive}
         className={classnames(className, {
@@ -48,6 +50,7 @@ IconButton.propTypes = {
   disabled: PropTypes.bool,
   icon: PropTypes.func,
   labelText: PropTypes.string,
+  dataHeapEvent: PropTypes.string,
   onClick: PropTypes.func,
   visible: PropTypes.bool,
   active: PropTypes.bool,
@@ -60,6 +63,7 @@ IconButton.defaultProps = {
   disabled: false,
   icon: null,
   labelText: null,
+  dataHeapEvent: null,
   onClick: null,
   visible: true,
   active: false,

diff --git a/src/components/ui/toggle/toggle.js b/src/components/ui/toggle/toggle.js
@@ -23,6 +23,7 @@ const Toggle = ({
       id={`pipeline-toggle-input-${id}`}
       className="pipeline-toggle-input"
       type="checkbox"
+      data-heap-event={`visible.code.${checked}`}
       checked={checked}
       disabled={!enabled}
       onChange={onChange}