Add variable/study link click events, cde events

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

Hide file tree

Showing 9 changed files with 94 additions and 21 deletions.
diff --git a/src/components/search/concept-card/studies-tab.js b/src/components/search/concept-card/studies-tab.js
@@ -30,8 +30,8 @@ export const StudiesTab = ({ studies }) => {
     setSelectedFacets([...newSelection])
   }, [selectedFacets])
 
-  const studyLinkClicked = (studyName) => {
-    analyticsEvents.studyLinkClicked(studyName)
+  const studyLinkClicked = (studyId) => {
+    analyticsEvents.studyLinkClicked(studyId)
   }
 
   useEffect(() => {
@@ -99,7 +99,7 @@ export const StudiesTab = ({ studies }) => {
               { (study.c_id && study.c_link) && (
                 <Fragment>
                   { ` ` }
-                  (<Link to={ study.c_link } onClick={ () => studyLinkClicked(study.c_name) }>{ study.c_id }</Link>)
+                  (<Link to={ study.c_link } onClick={ () => studyLinkClicked(study.c_id) }>{ study.c_id }</Link>)
                 </Fragment>
               )}
             </Text>

diff --git a/src/components/search/concept-modal/tabs/cdes/cde-item.js b/src/components/search/concept-modal/tabs/cdes/cde-item.js
@@ -4,6 +4,7 @@ import { ExportOutlined } from '@ant-design/icons'
 import _Highlighter from 'react-highlight-words'
 import { RelatedConceptsList } from './related-concepts'
 import { SideCollapse } from '../../../..'
+import { useAnalytics } from '../../../../../contexts'
 
 const { Text, Link } = Typography
 const { Panel } = Collapse
@@ -20,6 +21,8 @@ const Section = ({ title, children }) => (
 
 export const CdeItem = ({ cde, cdeRelatedConcepts, highlight }) => {
     const [collapsed, setCollapsed] = useState(false)
+
+    const { analyticsEvents } = useAnalytics()
 
     const relatedConceptsSource = useMemo(() => (
         cdeRelatedConcepts[cde.id]
@@ -36,7 +39,10 @@ export const CdeItem = ({ cde, cdeRelatedConcepts, highlight }) => {
         >
             <SideCollapse
                 collapsed={ collapsed }
-                onCollapse={ setCollapsed }
+                onCollapse={ (collapsed) => {
+                    analyticsEvents.cdeToggled(cde.id, !collapsed)
+                    setCollapsed(collapsed)
+                } }
                 header={
                     <Fragment>
                         <Text style={{ fontWeight: "500", fontSize: "14px" }}>
@@ -75,6 +81,9 @@ export const CdeItem = ({ cde, cdeRelatedConcepts, highlight }) => {
                         <RelatedConceptsList
                             concepts={relatedConceptsSource}
                             highlight={highlight}
+                            onShowMore={ (expanded) => {
+                                analyticsEvents.cdeRelatedConceptsToggled(cde.id, expanded)
+                            } }
                         />
                     </Section>
                     {false && <Section>

diff --git a/src/components/search/concept-modal/tabs/cdes/related-concepts/related-concept-options.js b/src/components/search/concept-modal/tabs/cdes/related-concepts/related-concept-options.js
@@ -1,9 +1,11 @@
 import { Menu, Typography } from 'antd'
 import { ExportOutlined, SearchOutlined } from '@ant-design/icons'
+import { useAnalytics } from '../../../../../../contexts'
 
 const { Text } = Typography
 
 export const RelatedConceptOptions = ({ concept, openSearch, openConcept, setClosed }) => {
+    const { analyticsEvents } = useAnalytics()
     return (
         <Menu
             mode="vertical"
@@ -17,15 +19,21 @@ export const RelatedConceptOptions = ({ concept, openSearch, openConcept, setClo
                         <Text>Open</Text>
                     ),
                     icon: <ExportOutlined />,
-                    onClick: openConcept,
+                    onClick: () => {
+                        analyticsEvents.cdeRelatedConceptOpened(concept.id)
+                        openConcept()
+                    },
                 },
                 {
                     key: 1,
                     label: (
                         <Text>Search</Text>
                     ),
                     icon: <SearchOutlined />,
-                    onClick: openSearch
+                    onClick: () => {
+                        analyticsEvents.cdeRelatedConceptSearched(concept.id)
+                        openSearch()
+                    }
                 },
             ]}
         />

diff --git a/src/components/search/concept-modal/tabs/cdes/related-concepts/related-concept-tag.css b/src/components/search/concept-modal/tabs/cdes/related-concepts/related-concept-tag.css
@@ -4,6 +4,7 @@
 }
 .related-concept-popover-overlay .ant-popover-inner-content {
     padding: 0;
+    width: 100%;
 }
 .related-concept-popover-overlay .ant-popover-title {
     padding: 8px 12px;

diff --git a/src/components/search/concept-modal/tabs/cdes/related-concepts/related-concepts-list.js b/src/components/search/concept-modal/tabs/cdes/related-concepts/related-concepts-list.js
@@ -7,7 +7,7 @@ const { Text } = Typography
 
 const SHOW_COUNT = 8
 
-export const RelatedConceptsList = ({ concepts, highlight }) => {
+export const RelatedConceptsList = ({ concepts, highlight, onShowMore }) => {
     const [showingAll, setShowingAll] = useState(false)
 
     const failed = useMemo(() => concepts === null || concepts.length === 0, [concepts])
@@ -56,8 +56,10 @@ export const RelatedConceptsList = ({ concepts, highlight }) => {
                     size="small"
                     type="link"
                     style={{ fontSize: "12px" }}
-                    onClick={ () => setShowingAll(!showingAll)
-                    }
+                    onClick={ () => {
+                        onShowMore(!showingAll)
+                        setShowingAll(!showingAll)
+                    } }
                 >
                     { !showingAll ? `Show ${hiddenConcepts.length - hiddenHighlighted.length} more results` : "Show less" }
                 </Button>

diff --git a/src/components/search/concept-modal/tabs/studies/study-variable.js b/src/components/search/concept-modal/tabs/studies/study-variable.js
@@ -8,7 +8,7 @@ export const StudyVariable = ({ variable, highlight, ...props }) => {
   const { analyticsEvents } = useAnalytics()
 
   const variableLinkClicked = () => {
-    analyticsEvents.variableLinkClicked(variable.name)
+    analyticsEvents.variableLinkClicked(variable.id)
   }
   return (
     <div className="study-variables-list-item" {...props}>

diff --git a/src/components/search/concept-modal/tabs/studies/study.js b/src/components/search/concept-modal/tabs/studies/study.js
@@ -12,7 +12,7 @@ const { Panel } = Collapse
 export const Study = ({ study, highlight, collapsed, ...panelProps }) => {
     const { analyticsEvents } = useAnalytics()
     const studyLinkClicked = () => {
-      analyticsEvents.studyLinkClicked(study.c_name)
+      analyticsEvents.studyLinkClicked(study.c_id)
     }
     const highlightedVariables = study.elements.filter((variable) => {
       return highlight.some((token) => (

diff --git a/src/components/search/results/variable-view-layout/variable-results.js b/src/components/search/results/variable-view-layout/variable-results.js
@@ -526,12 +526,18 @@ export const VariableSearchResults = () => {
                             </Button>
                         </Tooltip>
                         <Tooltip title="Undo zoom">
-                        <Button onClick={ () => setPage(page - 1) } disabled={ page === 0 } style={{ marginLeft: 4 }}>
+                        <Button onClick={ () => {
+                            setPage(page - 1)
+                            analyticsEvents.variableViewHistoryBackwardsPressed(query)
+                        } } disabled={ page === 0 } style={{ marginLeft: 4 }}>
                             <ArrowLeftOutlined />
                         </Button>
                         </Tooltip>
                         <Tooltip title="Redo zoom">
-                            <Button onClick={ () => setPage(page + 1) } disabled={ page === _filteredVariables.length - 1 } style={{ marginLeft: 4 }}>
+                            <Button onClick={ () => {
+                                setPage(page + 1)
+                                analyticsEvents.variableViewHistoryForwardsPressed(query)
+                            } } disabled={ page === _filteredVariables.length - 1 } style={{ marginLeft: 4 }}>
                                 <ArrowRightOutlined />
                             </Button>
                         </Tooltip>

diff --git a/src/contexts/analytics-context/events/search-events.js b/src/contexts/analytics-context/events/search-events.js
@@ -70,26 +70,59 @@ export function searchLayoutChanged(query, newLayout, oldLayout) {
         }
     });
 }
-export function studyLinkClicked(studyName) {
+export function cdeToggled(cdeId, expanded) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "cde_toggle",
+        label: cdeId,
+        customParameters: {
+            "expanded": expanded
+        }
+    });
+}
+export function cdeRelatedConceptsToggled(cdeId, expanded) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "cde_related_concepts_toggle",
+        label: cdeId,
+        customParameters: {
+            "expanded": expanded
+        }
+    });
+}
+export function cdeRelatedConceptOpened(conceptId) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "cde_related_concept_open",
+        label: conceptId
+    });
+}
+export function cdeRelatedConceptSearched(conceptId) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "cde_related_concept_search",
+        label: conceptId
+    });
+}
+export function studyLinkClicked(studyId) {
     console.log("study link", studyName)
     this.analytics.trackEvent({
         category: "ui_interaction",
         action: "study_link_clicked",
-        label: studyName,
+        label: studyId,
     });
 }
-export function variableLinkClicked(variableName) {
-    console.log("variable link", variableName)
+export function variableLinkClicked(variableId) {
     this.analytics.trackEvent({
         category: "ui_interaction",
         action: "variable_link_clicked",
-        label: variableName,
+        label: variableId,
     });
 }
 export function variableViewHistogramToggled(query, expanded) {
     this.analytics.trackEvent({
         category: "ui_interaction",
-        action: "variable_view_histogram_toggled",
+        action: "variable_view_histogram_toggle",
         label: query,
         customParameters: {
             "expanded": expanded
@@ -103,10 +136,24 @@ export function variableViewStartOverPressed(query) {
         label: query,
     });
 }
+export function variableViewHistoryForwardsPressed(query) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "variable_view_history_forward",
+        label: query,
+    });
+}
+export function variableViewHistoryBackwardsPressed(query) {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "variable_view_history_backward",
+        label: query,
+    });
+}
 export function variableViewStudyToggled(studyName, expanded) {
     this.analytics.trackEvent({
         category: "ui_interaction",
-        action: "variable_view_study_toggled",
+        action: "variable_view_study_toggle",
         label: studyName,
         customParameters: {
             "expanded": expanded
@@ -116,7 +163,7 @@ export function variableViewStudyToggled(studyName, expanded) {
 export function variableViewStudyPinToggled(studyName, active) {
     this.analytics.trackEvent({
         category: "ui_interaction",
-        action: "variable_view_study_pin_toggled",
+        action: "variable_view_study_pin_toggle",
         label: studyName,
         customParameters: {
             "active": active