Merge pull request #273 from helxplatform/feature/analytics

bin/populate_env

@@ -11,11 +11,13 @@ search_enabled="${REACT_APP_SEMANTIC_SEARCH_ENABLED:-true}"
 search_url="${REACT_APP_HELX_SEARCH_URL}"
 brand_name="${REACT_APP_UI_BRAND_NAME}"
 tranql_url="${REACT_APP_TRANQL_URL:-\/tranql}"
-analytics="${REACT_APP_ANALYTICS:-}"
 hidden_support_sections="${REACT_APP_HIDDEN_SUPPORT_SECTIONS}"
 hidden_result_tabs="${REACT_APP_HIDDEN_RESULT_TABS}"
 deployment_namespace="${REACT_APP_DEPLOYMENT_NAMESPACE}"
 appstore_asset_branch="${REACT_APP_APPSTORE_ASSET_BRANCH}"
+analytics_enabled="${REACT_APP_ANALYTICS_ENABLED:-false}"
+analytics_platform="${REACT_APP_ANALYTICS_PLATFORM}"
+analytics_token="${REACT_APP_ANALYTICS_TOKEN}"
 meta_title="${META_TITLE:-HeLx UI}"
 meta_description="${META_DESCRIPTION:-HeLx UI}"
 
@@ -28,12 +30,9 @@ template='{
     "workspaces_enabled": "%WORKSPACES_ENABLED%",
     "tranql_url": "%TRANQL_URL%",
     "analytics": {
-      "enabled": true,
-      "platform": "mixpanel",
-      "auth": {
-      "mixpanel_token": "%ANALYTICS%",
-      "ga_property": ""
-      }
+      "enabled": %ANALYTICS_ENABLED%,
+      "platform": "%ANALYTICS_PLATFORM%",
+      "token": "%ANALYTICS_TOKEN%"
     },
     "hidden_support_sections": "%HIDDEN_SUPPORT_SECTIONS%",
     "hidden_result_tabs": "%HIDDEN_RESULT_TABS%",
@@ -52,10 +51,12 @@ echo "$template" | sed \
   -e "s/%BRAND%/$brand_name/" \
   -e "s/%HIDDEN_SUPPORT_SECTIONS%/$hidden_support_sections/" \
   -e "s/%HIDDEN_RESULT_TABS%/$hidden_result_tabs/" \
-  -e "s/%ANALYTICS%/$analytics/" \
   -e "s/%TRANQL_URL%/$tranql_url/" \
   -e "s/%DEPLOYMENT_NAMESPACE%/$deployment_namespace/" \
   -e "s/%APPSTORE_ASSET_BRANCH%/$appstore_asset_branch/" \
+  -e "s/%ANALYTICS_ENABLED%/$analytics_enabled/" \
+  -e "s/%ANALYTICS_PLATFORM%/$analytics_platform/" \
+  -e "s/%ANALYTICS_TOKEN%/$analytics_token/" \
   -e "s/%META_TITLE%/$meta_title/" \
   -e "s/%META_DESCRIPTION%/$meta_description/" \
   > $1

package.json

@@ -21,7 +21,7 @@
     "elasticlunr": "^0.9.5",
     "es6-error": "^4.1.1",
     "exponential-backoff": "^3.1.0",
-    "helx-analytics": "^1.0.14",
+    "helx-analytics": "^2.0.0",
     "js-cookie": "^3.0.1",
     "lunr": "^2.3.9",
     "nanoevents": "^6.0.2",

src/app.js

@@ -12,15 +12,15 @@ const ContextProviders = ({ children }) => {
     <EnvironmentProvider>
       <LocationProvider>
         <DestProvider>
-          <AnalyticsProvider>
-            <WorkspacesAPIProvider>
+          <WorkspacesAPIProvider>
+            <AnalyticsProvider>
               <ActivityProvider>
                 <InstanceProvider>
                   {children}
                 </InstanceProvider>
               </ActivityProvider>
-            </WorkspacesAPIProvider>
-          </AnalyticsProvider>
+            </AnalyticsProvider>
+          </WorkspacesAPIProvider>
         </DestProvider>
       </LocationProvider>
     </EnvironmentProvider >

src/components/layout/layout.js

@@ -24,12 +24,11 @@ export const Layout = ({ children }) => {
 
   const logout = async () => {
     setLoggingOut(true)
-    analyticsEvents.logout()
+    analyticsEvents.workspacesLogout()
     try {
       await api.logout()
     } catch (e) {}
     setLoggingOut(false)
-    // logoutHandler(helxAppstoreUrl)
   }
   const removeTrailingSlash = (url) => url.endsWith("/") ? url.slice(0, url.length - 1) : url
   const activeRoutes = routes.filter((route) => (
@@ -97,11 +96,10 @@ export const Layout = ({ children }) => {
         context?.brand === 'heal'
         ? <Footer style={{ textAlign: 'center', paddingTop: 0 }}>
           NIH HEAL Semantic Search is powered by Dug, an open source semantic search developed
-          by <a href="https://renci.org" target="_blank">RENCI</a> and <a href="https://www.rti.org/" target="_blank">RTI International</a>
+          by <a href="https://renci.org" target="_blank" rel="noopener noreferrer">RENCI</a> and <a href="https://www.rti.org/" target="_blank" rel="noopener noreferrer">RTI International</a>
         </Footer>
         : <Footer style={{ textAlign: 'center', paddingTop: 0 }}>&copy;{ context?.meta.title ?? 'HeLx' }{new Date().getFullYear()}</Footer>
       }
-      <Footer style={{ textAlign: 'center', paddingTop: 0 }}></Footer>
     </AntLayout>
   )
 }

src/components/layout/menu/mobile-menu.js

@@ -1,23 +1,28 @@
 import React, { useState } from 'react'
 import { Button, Drawer, Menu } from 'antd'
 import { MenuOutlined } from '@ant-design/icons'
-import { logoutHandler } from '../../../api/'
 import { Link } from '@gatsbyjs/reach-router'
 import { useEnvironment } from '../../../contexts/environment-context'
-import { useAnalytics } from '../../../contexts'
+import { useAnalytics, useWorkspacesAPI } from '../../../contexts'
 import '../layout.css'
 
 export const MobileMenu = ({menu}) => {
     const [visible, setVisible] = useState(false);
-    const { helxAppstoreUrl, context } = useEnvironment();
+    const [loggingOut, setLoggingOut] = useState(false)
+    const { context } = useEnvironment();
+    const { api, loggedIn, loading: apiLoading } = useWorkspacesAPI()
     const { analyticsEvents } = useAnalytics();
 
     const baseLinkPath = context.workspaces_enabled === 'true' ? '/helx' : ''
 
-    const logout = () => {
-        analyticsEvents.logout();
-        logoutHandler(helxAppstoreUrl);
-    }
+    const logout = async () => {
+        setLoggingOut(true)
+        analyticsEvents.workspacesLogout()
+        try {
+          await api.logout()
+        } catch (e) {}
+        setLoggingOut(false)
+      }
 
     return (
         <div className="mobile-menu-toggle">
@@ -34,8 +39,13 @@ export const MobileMenu = ({menu}) => {
                 visible={visible}
             >
                 <Menu mode="vertical" style={{ border: 0 }}>
-                    {menu.map(m => m['text'] !== '' && <Menu.Item key={m.text}><Link to={`${baseLinkPath}${m.path}`}>{m.text}</Link></Menu.Item>)}
-                    <Menu.Item key="logout" className="logout"><Button onClick={logout}>LOG OUT</Button></Menu.Item>
+                    {
+                        menu.map(m => m['text'] !== '' && (
+                            <Menu.Item key={m.text}><Link to={`${baseLinkPath}${m.path}`}>{m.text}</Link></Menu.Item>
+                        )) }
+                    { context.workspaces_enabled === 'true' && !apiLoading && loggedIn && (
+                        <Menu.Item key="logout" className="logout"><Button onClick={ logout } disabled={ loggingOut }>LOG OUT</Button></Menu.Item>
+                    ) }
                 </Menu>
             </Drawer>
         </div>

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 = (studyId) => {
+    analyticsEvents.studyLinkClicked(studyId)
+  }
+
   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_id) }>{ study.c_id }</Link>)
                 </Fragment>
               )}
             </Text>

src/components/search/concept-modal/concept-modal.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Menu, Modal, Result, Space, Spin, Typography, Tooltip, Divider } from 'antd'
 import CustomIcon, {
   InfoCircleOutlined as OverviewIcon,
@@ -113,19 +113,21 @@ export const ConceptModalBody = ({ result }) => {
     delete links[tab]
   })
 
-  const setCurrentTab = (() => {
+  const setCurrentTab = useCallback((() => {
     let oldTime = Date.now();
     return (tabName) => {
       const newTime = Date.now();
       const elapsed = newTime - oldTime;
-      if (tabName !== currentTab) {
-        // Make sure we only track events when the tab actually changes.
-        analyticsEvents.resultTabSelected(tabs[tabName].title, tabs[currentTab].title, elapsed)
-      } 
+      _setCurrentTab((currentTab) => {
+        if (tabName !== currentTab) {
+          // Make sure we only track events when the tab actually changes.
+          analyticsEvents.resultTabSelected(tabs[tabName].title, tabs[currentTab].title, elapsed)
+        } 
+        return tabName
+      })
       oldTime = newTime;
-      _setCurrentTab(tabName);
     }
-  })()
+  })(), [tabs])
 
   useEffect(() => {
     setCurrentTab('overview')

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>

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()
+                    }
                 },
             ]}
         />

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;

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>