diff --git a/src/components/search/concept-card/studies-tab.js b/src/components/search/concept-card/studies-tab.js index 0973b72e..4c09ec89 100644 --- 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) && ( { ` ` } - ( studyLinkClicked(study.c_name) }>{ study.c_id }) + ( studyLinkClicked(study.c_id) }>{ study.c_id }) )} diff --git a/src/components/search/concept-modal/tabs/cdes/cde-item.js b/src/components/search/concept-modal/tabs/cdes/cde-item.js index 13d96cbe..ee7c2719 100644 --- 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 }) => { > { + analyticsEvents.cdeToggled(cde.id, !collapsed) + setCollapsed(collapsed) + } } header={ @@ -75,6 +81,9 @@ export const CdeItem = ({ cde, cdeRelatedConcepts, highlight }) => { { + analyticsEvents.cdeRelatedConceptsToggled(cde.id, expanded) + } } /> {false &&
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 index 2b2792da..ee06e8d4 100644 --- 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 ( Open ), icon: , - onClick: openConcept, + onClick: () => { + analyticsEvents.cdeRelatedConceptOpened(concept.id) + openConcept() + }, }, { key: 1, @@ -25,7 +30,10 @@ export const RelatedConceptOptions = ({ concept, openSearch, openConcept, setClo Search ), icon: , - 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 index 9d014223..92f0a1a1 100644 --- 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 index f3ea72df..f63418e8 100644 --- 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" } diff --git a/src/components/search/concept-modal/tabs/studies/study-variable.js b/src/components/search/concept-modal/tabs/studies/study-variable.js index b8b4542f..9620de5c 100644 --- 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 (
diff --git a/src/components/search/concept-modal/tabs/studies/study.js b/src/components/search/concept-modal/tabs/studies/study.js index eb8a19ea..b99ce8a6 100644 --- 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 index 2ee63f4f..3faaf236 100644 --- 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 = () => { - - diff --git a/src/contexts/analytics-context/events/search-events.js b/src/contexts/analytics-context/events/search-events.js index 4f63ea57..62b81920 100644 --- 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