Adding new events in to variable view and study/variable links

helxplatform · Sep 18, 2023 · 489e164 · 489e164
1 parent dc6a2b1
commit 489e164
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 9 deletions.
diff --git a/src/components/search/concept-card/studies-tab.js b/src/components/search/concept-card/studies-tab.js
@@ -1,11 +1,13 @@
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
 import { List, Spin, Space, Tag, Typography, Divider } from 'antd'
+import { useAnalytics } from '../../../contexts'
 import { Link } from '../../link'
 
 const { Text } = Typography
 const { CheckableTag: CheckableFacet } = Tag
 
 export const StudiesTab = ({ studies }) => {
+  const { analyticsEvents } = useAnalytics()
   const [facets, setFacets] = useState([])
   const [selectedFacets, setSelectedFacets] = useState([])
 
@@ -28,6 +30,10 @@ export const StudiesTab = ({ studies }) => {
     setSelectedFacets([...newSelection])
   }, [selectedFacets])
 
+  const studyLinkClicked = (studyName) => {
+    analyticsEvents.studyLinkClicked(studyName)
+  }
+
   useEffect(() => {
     const facets = (studies ?? []).reduce((acc, study) => {
       if (!acc.includes(study.type)) acc.push(study.type)
@@ -93,7 +99,7 @@ export const StudiesTab = ({ studies }) => {
               { (study.c_id && study.c_link) && (
                 <Fragment>
                   { ` ` }
-                  (<Link to={ study.c_link }>{ study.c_id }</Link>)
+                  (<Link to={ study.c_link } onClick={ () => studyLinkClicked(study.c_name) }>{ study.c_id }</Link>)
                 </Fragment>
               )}
             </Text>

diff --git a/src/components/search/concept-modal/tabs/studies/study-variable.js b/src/components/search/concept-modal/tabs/studies/study-variable.js
@@ -1,16 +1,24 @@
 import { Typography } from 'antd'
 import Highlighter from 'react-highlight-words'
+import { useAnalytics } from '../../../../../contexts'
 
 const { Text } = Typography
 
-export const StudyVariable = ({ variable, highlight, ...props }) => (
+export const StudyVariable = ({ variable, highlight, ...props }) => {
+  const { analyticsEvents } = useAnalytics()
+
+  const variableLinkClicked = () => {
+    analyticsEvents.variableLinkClicked(variable.name)
+  }
+  return (
     <div className="study-variables-list-item" {...props}>
       <Text className="variable-name">
       <Highlighter autoEscape={ true } searchWords={ highlight } textToHighlight={ variable.name } /> &nbsp;
-        ({ variable.e_link ? <a href={ variable.e_link }>{ variable.id }</a> : variable.id })
+        ({ variable.e_link ? <a href={ variable.e_link } onClick={ variableLinkClicked }>{ variable.id }</a> : variable.id })
       </Text><br />
       <Text className="variable-description">
         <Highlighter autoEscape={ true } searchWords={ highlight } textToHighlight={ variable.description } />
       </Text>
     </div>
-  )
+  )
+}
diff --git a/src/components/search/concept-modal/tabs/studies/study.js b/src/components/search/concept-modal/tabs/studies/study.js
@@ -4,11 +4,16 @@ import Highlighter from 'react-highlight-words'
 import { Link } from '../../../../link'
 import { StudyVariables } from './study-variables'
 import { StudyVariable } from './study-variable'
+import { useAnalytics } from '../../../../../contexts'
 
 const { Text, Paragraph } = Typography
 const { Panel } = Collapse
 
 export const Study = ({ study, highlight, collapsed, ...panelProps }) => {
+    const { analyticsEvents } = useAnalytics()
+    const studyLinkClicked = () => {
+      analyticsEvents.studyLinkClicked(study.c_name)
+    }
     const highlightedVariables = study.elements.filter((variable) => {
       return highlight.some((token) => (
         variable.name.includes(token) ||
@@ -21,7 +26,7 @@ export const Study = ({ study, highlight, collapsed, ...panelProps }) => {
           header={
             <Text>
               <Highlighter autoEscape={ true } searchWords={ highlight } textToHighlight={ study.c_name } />{ ` ` }
-              (<Link to={ study.c_link }>{ study.c_id }</Link>)
+              (<Link to={ study.c_link } onClick={ studyLinkClicked }>{ study.c_id }</Link>)
             </Text>
           }
           extra={ <Text>{ study.elements.length } variable{ study.elements.length === 1 ? '' : 's' }</Text> }

diff --git a/src/components/search/results/variable-view-layout/variable-results.js b/src/components/search/results/variable-view-layout/variable-results.js
@@ -13,6 +13,7 @@ import {
 import { InfoTooltip } from '../../../';
 import { Palette, PastelPalette } from '../../../../utils'
 import './variable-results.css';
+import { useAnalytics } from '../../../../contexts';
 
 const { Text, Title } = Typography
 const { Panel } = Collapse
@@ -133,7 +134,8 @@ const HistogramLegend = ({ title: _title, items, style, ...props }) =>  {
 
 /** Component that handles display of Variable Results */
 export const VariableSearchResults = () => {
-    const { variableResults, variableStudyResults, totalVariableResults } = useHelxSearch()
+    const { query, variableResults, variableStudyResults, totalVariableResults } = useHelxSearch()
+    const { analyticsEvents } = useAnalytics()
 
     const [collapseHistogram, setCollapseHistogram] = useState(false)
     const [page, setPage] = useState(0)
@@ -303,6 +305,7 @@ export const VariableSearchResults = () => {
      * Triggered by the Start Over button.
      */
     const startOverHandler = () => {
+        analyticsEvents.variableViewStartOverPressed(query)
         /** Restores the variables shown in the histogram back to the original inputs */
         overrideFilterHistory(variableResults)
 
@@ -404,7 +407,11 @@ export const VariableSearchResults = () => {
             <Collapse
                 ghost
                 activeKey={!collapseHistogram ? ["variableViewHistogramPanel"] : []}
-                onChange={ () => setCollapseHistogram(!collapseHistogram) }
+                onChange={ () => {
+                    const isCollapsed = !collapseHistogram
+                    analyticsEvents.variableViewHistogramToggled(query, !isCollapsed)
+                    setCollapseHistogram(isCollapsed)
+                } }
             >
             <Panel key="variableViewHistogramPanel" className="variable-histogram-collapse-panel" header={
                 <Fragment>

diff --git a/src/components/search/results/variable-view-layout/variable-table-by-study.js b/src/components/search/results/variable-view-layout/variable-table-by-study.js
@@ -4,6 +4,7 @@ import {
     PushpinOutlined as UnselectedIcon,
     PushpinFilled as SelectedIcon,
 } from '@ant-design/icons'
+import { useAnalytics } from '../../../../contexts'
 const { Text } = Typography
 const { Panel } = Collapse
 
@@ -26,10 +27,16 @@ const VariableList = ({ study, filteredVariables }) => {
 }
 
 const VariablePanel = ({ study, filteredVariables, dataSource, selected, onSelect }) => {
+    const { analyticsEvents } = useAnalytics()
     const [collapsed, setCollapsed] = useState(true)
+    const toggleCollapsed = () => {
+        const isCollapsed = !collapsed
+        setCollapsed(isCollapsed)
+        analyticsEvents.variableViewStudyToggled(study.c_name, !isCollapsed)
+    }
     return (
         <Fragment>
-        <Collapse ghost activeKey={collapsed ? null : `panel_${study.c_name}`} onChange={ () => setCollapsed(!collapsed) }>
+        <Collapse ghost activeKey={collapsed ? null : `panel_${study.c_name}`} onChange={ toggleCollapsed }>
             <Panel
                 key={`panel_${study.c_name}`}
                 className={ [
@@ -97,6 +104,7 @@ export const VariablesTableByStudy = ({
     studyDataSources,
     toggleStudyHighlightingInHistogram
 }) => {
+    const { analyticsEvents } = useAnalytics()
     return (
         <div className="variables-collapse">
             {
@@ -108,7 +116,11 @@ export const VariablesTableByStudy = ({
                             filteredVariables={ filteredVariables }
                             dataSource={ studyDataSources[study.data_source] }
                             selected={ studyNamesForDisplay.includes(study.c_name) }
-                            onSelect={ () => toggleStudyHighlightingInHistogram(study.c_name) }
+                            onSelect={ () => {
+                                const pinActive = studyNamesForDisplay.includes(study.c_name)
+                                analyticsEvents.variableViewStudyPinToggled(study.c_name, pinActive)
+                                toggleStudyHighlightingInHistogram(study.c_name)
+                            } }
                         />   
                     )
                 })

diff --git a/src/contexts/analytics-context/events/search-events.js b/src/contexts/analytics-context/events/search-events.js
@@ -69,4 +69,57 @@ export function searchLayoutChanged(query, newLayout, oldLayout) {
             "changed_to": newLayout
         }
     });
+}
+export function studyLinkClicked(studyName) {
+    console.log("study link", studyName)
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "study_link_clicked",
+        label: studyName,
+    });
+}
+export function variableLinkClicked(variableName) {
+    console.log("variable link", variableName)
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "variable_link_clicked",
+        label: variableName,
+    });
+}
+export function variableViewHistogramToggled(query, expanded) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "variable_view_histogram_toggled",
+        label: query,
+        customParameters: {
+            "expanded": expanded
+        }
+    });
+}
+export function variableViewStartOverPressed(query) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "variable_view_start_over",
+        label: query,
+    });
+}
+export function variableViewStudyToggled(studyName, expanded) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "variable_view_study_toggled",
+        label: studyName,
+        customParameters: {
+            "expanded": expanded
+        }
+    });
+}
+export function variableViewStudyPinToggled(studyName, active) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "variable_view_study_pin_toggled",
+        label: studyName,
+        customParameters: {
+            "active": active
+        }
+    });
 }