diff --git a/src/components/uiKit/FilterList/CustomFilterContainer.tsx b/src/components/uiKit/FilterList/CustomFilterContainer.tsx index 8ea7fd612..b5aa34c6c 100644 --- a/src/components/uiKit/FilterList/CustomFilterContainer.tsx +++ b/src/components/uiKit/FilterList/CustomFilterContainer.tsx @@ -42,6 +42,7 @@ type OwnProps = { intervalDecimal?: number; filterWithFooter?: boolean; categoryIcon?: ReactNode; + analyticsName?: string; }; const CustomFilterContainer = ({ @@ -59,6 +60,7 @@ const CustomFilterContainer = ({ intervalDecimal, filterWithFooter = true, categoryIcon, + analyticsName, }: OwnProps) => { const [isSearchVisible, setIsSearchVisible] = useState(false); const [isOpen, setIsOpen] = useState(defaultOpen); @@ -75,7 +77,7 @@ const CustomFilterContainer = ({ }, [filtersOpen]); const onChange = (fg: IFilterGroup, f: IFilter[]) => { - trackFacetSearch(index, fg.field); + trackFacetSearch(analyticsName || index, fg.field); updateActiveQueryFilters({ queryBuilderId, diff --git a/src/components/uiKit/FilterList/index.tsx b/src/components/uiKit/FilterList/index.tsx index 276aae954..423fe9779 100644 --- a/src/components/uiKit/FilterList/index.tsx +++ b/src/components/uiKit/FilterList/index.tsx @@ -21,6 +21,7 @@ type OwnProps = { filterInfo: FilterInfo; filterWithFooter?: boolean; filterMapper?: TCustomFilterMapper; + analyticsName?: string; }; const { Text } = Typography; @@ -45,6 +46,7 @@ const FilterList = ({ filterInfo, filterWithFooter = true, filterMapper, + analyticsName, }: OwnProps) => { const [filtersOpen, setFiltersOpen] = useState(isAllFacetOpen(filterInfo)); @@ -98,6 +100,7 @@ const FilterList = ({ filterWithFooter={filterWithFooter} categoryIcon={group.categoryIcon} defaults={group.defaults?.[facet]} + analyticsName={analyticsName} /> ) : (
diff --git a/src/locales/en.ts b/src/locales/en.ts index 043b11f97..d35528d27 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -170,6 +170,15 @@ const en = { placeholder: 'Search...', results: 'Results', }, + googleAnalytics: { + biospecimenTab: 'Data Exploration biospecimen tab', + dashboard: 'Dashboard', + dataExploration: 'Data Exploration', + fileTab: 'Data Exploration file tab', + germline: 'Germline', + participantTab: 'Data Exploration participant tab', + somatic: 'Somatic', + }, }, maintenance: { title: 'We are currently down for maintenance', diff --git a/src/services/analytics.ts b/src/services/analytics.ts index aa5308d3f..e5a656a4c 100644 --- a/src/services/analytics.ts +++ b/src/services/analytics.ts @@ -88,7 +88,7 @@ export const trackVariantWorkbench = (action: string) => { } }; -export const trackSetActions = (action: string, setType: SetType) => { +export const trackSetActions = (action: string, page: string, setType: SetType) => { let message = ''; switch (action) { case SetActionType.CREATE_SET: @@ -113,7 +113,7 @@ export const trackSetActions = (action: string, setType: SetType) => { if (isGaActive) { ReactGA.event({ category: 'Sets', - action: `${message} - ${setType}`, + action: `${page} - ${message} - ${setType}`, }); } }; diff --git a/src/views/Dashboard/components/DashboardCards/SavedSets/CreateEditModal/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedSets/CreateEditModal/index.tsx index 0ea756974..08022e552 100644 --- a/src/views/Dashboard/components/DashboardCards/SavedSets/CreateEditModal/index.tsx +++ b/src/views/Dashboard/components/DashboardCards/SavedSets/CreateEditModal/index.tsx @@ -80,7 +80,11 @@ const CreateEditModal = ({ ]); } else { if (saveSetActionType === SetActionType.UPDATE_SET && currentSaveSet) { - trackSetActions(SetActionType.UPDATE_SET, setType); + trackSetActions( + SetActionType.UPDATE_SET, + intl.get('global.googleAnalytics.dashboard'), + setType, + ); dispatch( updateSavedSet({ onCompleteCb: onSuccessCreateCb, @@ -90,7 +94,11 @@ const CreateEditModal = ({ }), ); } else { - trackSetActions(SetActionType.CREATE_SET, setType); + trackSetActions( + SetActionType.CREATE_SET, + intl.get('global.googleAnalytics.dashboard'), + setType, + ); dispatch( createSavedSet({ idField, diff --git a/src/views/Dashboard/components/DashboardCards/SavedSets/ListItem/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedSets/ListItem/index.tsx index c96625332..b6994ee77 100644 --- a/src/views/Dashboard/components/DashboardCards/SavedSets/ListItem/index.tsx +++ b/src/views/Dashboard/components/DashboardCards/SavedSets/ListItem/index.tsx @@ -88,7 +88,11 @@ const ListItem = ({ data, icon, queryBuilderId }: OwnProps) => { cancelText: intl.get('components.savedSets.popupConfirm.delete.cancelText'), okButtonProps: { danger: true }, onOk: () => { - trackSetActions(SetActionType.REMOVE_SET, data.setType); + trackSetActions( + SetActionType.REMOVE_SET, + intl.get('global.googleAnalytics.dashboard'), + data.setType, + ); dispatch(deleteSavedSet(data.id)); }, }) diff --git a/src/views/DataExploration/components/PageContent/tabs/Biospecimens/index.tsx b/src/views/DataExploration/components/PageContent/tabs/Biospecimens/index.tsx index a3876ba1f..7841fb700 100644 --- a/src/views/DataExploration/components/PageContent/tabs/Biospecimens/index.tsx +++ b/src/views/DataExploration/components/PageContent/tabs/Biospecimens/index.tsx @@ -529,6 +529,7 @@ const BioSpecimenTab = ({ sqon }: OwnProps) => { selectedAllResults={selectedAllResults} type={SetType.BIOSPECIMEN} selectedKeys={selectedKeys} + analyticsPage={intl.get('global.googleAnalytics.biospecimenTab')} />, { type={SetType.FILE} selectedKeys={selectedKeys} key="file-set-management" + analyticsPage={intl.get('global.googleAnalytics.fileTab')} />, { sqon={getCurrentSqon()} type={SetType.PARTICIPANT} key="participant-set-management" + analyticsPage={intl.get('global.googleAnalytics.participantTab')} />, { @@ -57,6 +58,7 @@ const AddRemoveSaveSetModal = ({ setActionType, sqon, type, + analyticsPage, }: OwnProps) => { const [form] = Form.useForm(); const [isVisible, setIsVisible] = useState(true); @@ -78,7 +80,7 @@ const AddRemoveSaveSetModal = ({ switch (setActionType) { case SetActionType.ADD_IDS: case SetActionType.REMOVE_IDS: - trackSetActions(setActionType, type); + trackSetActions(setActionType, analyticsPage, type); dispatch( updateSavedSet({ id: setId, diff --git a/src/views/DataExploration/components/SetsManagementDropdown/index.tsx b/src/views/DataExploration/components/SetsManagementDropdown/index.tsx index 0b709cc95..300b4f587 100644 --- a/src/views/DataExploration/components/SetsManagementDropdown/index.tsx +++ b/src/views/DataExploration/components/SetsManagementDropdown/index.tsx @@ -38,6 +38,7 @@ type Props = { selectedAllResults: boolean; selectedKeys?: string[]; type: SetType; + analyticsPage: string; }; export enum SetActionType { @@ -113,6 +114,7 @@ const SetsManagementDropdown = ({ type, selectedKeys = [], selectedAllResults, + analyticsPage, }: Props) => { const [isEditDisabled, setIsEditDisabled] = useState(true); const [modal, setModal] = useState(modals.hideAll); @@ -159,6 +161,7 @@ const SetsManagementDropdown = ({ }} userSets={savedSets} type={type} + analyticsPage={analyticsPage} /> )} , ], }} diff --git a/src/views/Variants/components/PageContent/index.tsx b/src/views/Variants/components/PageContent/index.tsx index 5b3a56d7e..5783d2200 100644 --- a/src/views/Variants/components/PageContent/index.tsx +++ b/src/views/Variants/components/PageContent/index.tsx @@ -14,6 +14,7 @@ import copy from 'copy-to-clipboard'; import { useVariant } from 'graphql/variants/actions'; import { IVariantResultTree } from 'graphql/variants/models'; import { GET_VARIANT_COUNT } from 'graphql/variants/queries'; +import { FilterActionType } from 'views/DataExploration/components/PageContent'; import { DEFAULT_OFFSET, DEFAULT_PAGE_INDEX, @@ -29,6 +30,7 @@ import GenericFilters from 'components/uiKit/FilterList/GenericFilters'; import { FilterInfo } from 'components/uiKit/FilterList/types'; import { getNoDataOptionValue } from 'components/utils/filterUtils'; import useQBStateWithSavedFilters from 'hooks/useQBStateWithSavedFilters'; +import { trackFilterActions } from 'services/analytics'; import { ArrangerApi } from 'services/api/arranger'; import { SavedFilterTag } from 'services/api/savedFilter/models'; import { globalActions } from 'store/global'; @@ -125,13 +127,27 @@ const PageContent = ({ variantMapping, filterGroups }: OwnProps) => { )?.displayName || key; }; - const handleOnUpdateFilter = (filter: ISavedFilter) => dispatch(updateSavedFilter(filter)); - const handleOnSaveFilter = (filter: ISavedFilter) => + const handleOnUpdateFilter = (filter: ISavedFilter) => { + trackFilterActions(FilterActionType.UPDATE_FILTER, intl.get('global.googleAnalytics.germline')); + dispatch(updateSavedFilter(filter)); + }; + const handleOnSaveFilter = (filter: ISavedFilter) => { + trackFilterActions(FilterActionType.CREATE_FILTER, intl.get('global.googleAnalytics.germline')); dispatch(createSavedFilter(addTagToFilter(filter))); - const handleOnDeleteFilter = (id: string) => dispatch(deleteSavedFilter(id)); - const handleOnSaveAsFavorite = (filter: ISavedFilter) => + }; + const handleOnDeleteFilter = (id: string) => { + trackFilterActions(FilterActionType.REMOVE_FILTER, intl.get('global.googleAnalytics.germline')); + dispatch(deleteSavedFilter(id)); + }; + const handleOnSaveAsFavorite = (filter: ISavedFilter) => { + trackFilterActions( + FilterActionType.FAVORITE_FILTER, + intl.get('global.googleAnalytics.germline'), + ); dispatch(setSavedFilterAsDefault(addTagToFilter(filter))); + }; const handleOnShareFilter = (filter: ISavedFilter) => { + trackFilterActions(FilterActionType.SHARE_FILTER, intl.get('global.googleAnalytics.germline')); copy(`${getCurrentUrl()}?${SHARED_FILTER_ID_QUERY_PARAM_KEY}=${filter.id}`); dispatch( globalActions.displayMessage({ diff --git a/src/views/Variants/components/VariantGeneSearch/index.tsx b/src/views/Variants/components/VariantGeneSearch/index.tsx index fc51ce14b..4c5e0c735 100644 --- a/src/views/Variants/components/VariantGeneSearch/index.tsx +++ b/src/views/Variants/components/VariantGeneSearch/index.tsx @@ -11,19 +11,21 @@ import { ICustomSearchProps } from 'components/uiKit/search/GlobalSearch'; import SearchAutocomplete, { OptionsType, } from 'components/uiKit/search/GlobalSearch/Search/SearchAutocomplete'; +import { trackFacetSearch } from 'services/analytics'; import { ArrangerApi } from 'services/api/arranger'; import { Suggestion, SuggestionType } from 'services/api/arranger/models'; import OptionItem from './OptionItem'; type OwnProps = ICustomSearchProps & { + analyticsName: string; type: SuggestionType; }; const getValue = (type: SuggestionType, option: Suggestion) => (type === SuggestionType.GENES ? option.symbol : option.locus) ?? ''; -const VariantGeneSearch = ({ queryBuilderId, type }: OwnProps) => { +const VariantGeneSearch = ({ analyticsName, queryBuilderId, type }: OwnProps) => { const [options, setOptions] = useState([]); const { activeQuery } = useQueryBuilderState(queryBuilderId); const field = @@ -43,15 +45,16 @@ const VariantGeneSearch = ({ queryBuilderId, type }: OwnProps) => { return ( handleSearch(value)} - onSelect={(values) => + onSelect={(values) => { + trackFacetSearch(analyticsName, field); updateActiveQueryField({ queryBuilderId, field, value: values, index: INDEXES.VARIANTS, merge_strategy: MERGE_VALUES_STRATEGIES.OVERRIDE_VALUES, - }) - } + }); + }} placeHolder={intl.get(`global.search.${type}.placeholder`)} options={options} selectedItems={ diff --git a/src/views/Variants/index.tsx b/src/views/Variants/index.tsx index 355bb1d52..a1acbb9df 100644 --- a/src/views/Variants/index.tsx +++ b/src/views/Variants/index.tsx @@ -54,6 +54,7 @@ const filterGroups: { key="variants" type={SuggestionType.VARIANTS} queryBuilderId={VARIANT_REPO_QB_ID} + analyticsName={intl.get('global.googleAnalytics.germline')} />, ], groups: [ @@ -85,6 +86,7 @@ const filterGroups: { key="genes" type={SuggestionType.GENES} queryBuilderId={VARIANT_REPO_QB_ID} + analyticsName={intl.get('global.googleAnalytics.germline')} />, , ], @@ -218,6 +220,7 @@ const Variants = () => { queryBuilderId={VARIANT_REPO_QB_ID} extendedMappingResults={variantMappingResults} filterInfo={filterGroups[FilterTypes.Participant]} + analyticsName={intl.get('global.googleAnalytics.germline')} /> ), }, @@ -233,6 +236,7 @@ const Variants = () => { queryBuilderId={VARIANT_REPO_QB_ID} extendedMappingResults={variantMappingResults} filterInfo={filterGroups[FilterTypes.Variant]} + analyticsName={intl.get('global.googleAnalytics.germline')} /> ), }, @@ -248,6 +252,7 @@ const Variants = () => { queryBuilderId={VARIANT_REPO_QB_ID} extendedMappingResults={variantMappingResults} filterInfo={filterGroups[FilterTypes.Gene]} + analyticsName={intl.get('global.googleAnalytics.germline')} /> ), }, @@ -263,6 +268,7 @@ const Variants = () => { queryBuilderId={VARIANT_REPO_QB_ID} extendedMappingResults={variantMappingResults} filterInfo={filterGroups[FilterTypes.Pathogenicity]} + analyticsName={intl.get('global.googleAnalytics.germline')} /> ), }, @@ -278,6 +284,7 @@ const Variants = () => { queryBuilderId={VARIANT_REPO_QB_ID} extendedMappingResults={variantMappingResults} filterInfo={filterGroups[FilterTypes.Frequency]} + analyticsName={intl.get('global.googleAnalytics.germline')} /> ), }, diff --git a/src/views/VariantsSomatic/components/PageContent/VariantsTable/index.tsx b/src/views/VariantsSomatic/components/PageContent/VariantsTable/index.tsx index 52ac59e33..efcdfb5e8 100644 --- a/src/views/VariantsSomatic/components/PageContent/VariantsTable/index.tsx +++ b/src/views/VariantsSomatic/components/PageContent/VariantsTable/index.tsx @@ -598,6 +598,7 @@ const VariantsTable = ({ sqon={getCurrentSqon()} type={SetType.VARIANT} key="variants-somatic-set-management" + analyticsPage={intl.get('global.googleAnalytics.somatic')} />, ], }} diff --git a/src/views/VariantsSomatic/components/PageContent/index.tsx b/src/views/VariantsSomatic/components/PageContent/index.tsx index 7b8799c2e..543096a70 100644 --- a/src/views/VariantsSomatic/components/PageContent/index.tsx +++ b/src/views/VariantsSomatic/components/PageContent/index.tsx @@ -14,6 +14,7 @@ import copy from 'copy-to-clipboard'; import { useVariantSomatic } from 'graphql/variants/actions'; import { IVariantSomaticResultTree } from 'graphql/variants/models'; import { GET_VARIANT_SOMATIC_COUNT } from 'graphql/variants/queries'; +import { FilterActionType } from 'views/DataExploration/components/PageContent'; import VariantsTable from 'views/VariantsSomatic/components/PageContent/VariantsTable'; import { DEFAULT_OFFSET, @@ -30,6 +31,7 @@ import GenericFilters from 'components/uiKit/FilterList/GenericFilters'; import { FilterInfo } from 'components/uiKit/FilterList/types'; import { getNoDataOptionValue } from 'components/utils/filterUtils'; import useQBStateWithSavedFilters from 'hooks/useQBStateWithSavedFilters'; +import { trackFilterActions } from 'services/analytics'; import { ArrangerApi } from 'services/api/arranger'; import { SavedFilterTag } from 'services/api/savedFilter/models'; import { globalActions } from 'store/global'; @@ -128,13 +130,27 @@ const PageContent = ({ variantSomaticMapping, filterGroups }: OwnProps) => { )?.displayName || key; }; - const handleOnUpdateFilter = (filter: ISavedFilter) => dispatch(updateSavedFilter(filter)); - const handleOnSaveFilter = (filter: ISavedFilter) => + const handleOnUpdateFilter = (filter: ISavedFilter) => { + trackFilterActions(FilterActionType.UPDATE_FILTER, intl.get('global.googleAnalytics.somatic')); + dispatch(updateSavedFilter(filter)); + }; + const handleOnSaveFilter = (filter: ISavedFilter) => { + trackFilterActions(FilterActionType.CREATE_FILTER, intl.get('global.googleAnalytics.somatic')); dispatch(createSavedFilter(addTagToFilter(filter))); - const handleOnDeleteFilter = (id: string) => dispatch(deleteSavedFilter(id)); - const handleOnSaveAsFavorite = (filter: ISavedFilter) => + }; + const handleOnDeleteFilter = (id: string) => { + trackFilterActions(FilterActionType.REMOVE_FILTER, intl.get('global.googleAnalytics.somatic')); + dispatch(deleteSavedFilter(id)); + }; + const handleOnSaveAsFavorite = (filter: ISavedFilter) => { + trackFilterActions( + FilterActionType.FAVORITE_FILTER, + intl.get('global.googleAnalytics.somatic'), + ); dispatch(setSavedFilterAsDefault(addTagToFilter(filter))); + }; const handleOnShareFilter = (filter: ISavedFilter) => { + trackFilterActions(FilterActionType.SHARE_FILTER, intl.get('global.googleAnalytics.somatic')); copy(`${getCurrentUrl()}?${SHARED_FILTER_ID_QUERY_PARAM_KEY}=${filter.id}`); dispatch( globalActions.displayMessage({ diff --git a/src/views/VariantsSomatic/index.tsx b/src/views/VariantsSomatic/index.tsx index ca398ca34..979222a5e 100644 --- a/src/views/VariantsSomatic/index.tsx +++ b/src/views/VariantsSomatic/index.tsx @@ -53,6 +53,7 @@ const filterGroups: { key="variantsSomatic" type={SuggestionType.SOMATIC} queryBuilderId={VARIANT_SOMATIC_REPO_QB_ID} + analyticsName={intl.get('global.googleAnalytics.somatic')} />, ], groups: [ @@ -82,6 +83,7 @@ const filterGroups: { key="genes" type={SuggestionType.GENES} queryBuilderId={VARIANT_SOMATIC_REPO_QB_ID} + analyticsName={intl.get('global.googleAnalytics.somatic')} />, , ], @@ -229,6 +231,7 @@ const Variants = () => { queryBuilderId={VARIANT_SOMATIC_REPO_QB_ID} extendedMappingResults={variantSomaticMappingResults} filterInfo={filterGroups[FilterTypes.Participant]} + analyticsName={intl.get('global.googleAnalytics.somatic')} /> ), }, @@ -244,6 +247,7 @@ const Variants = () => { queryBuilderId={VARIANT_SOMATIC_REPO_QB_ID} extendedMappingResults={variantSomaticMappingResults} filterInfo={filterGroups[FilterTypes.Variant]} + analyticsName={intl.get('global.googleAnalytics.somatic')} /> ), }, @@ -259,6 +263,7 @@ const Variants = () => { queryBuilderId={VARIANT_SOMATIC_REPO_QB_ID} extendedMappingResults={variantSomaticMappingResults} filterInfo={filterGroups[FilterTypes.Gene]} + analyticsName={intl.get('global.googleAnalytics.somatic')} /> ), }, @@ -274,6 +279,7 @@ const Variants = () => { queryBuilderId={VARIANT_SOMATIC_REPO_QB_ID} extendedMappingResults={variantSomaticMappingResults} filterInfo={filterGroups[FilterTypes.Pathogenicity]} + analyticsName={intl.get('global.googleAnalytics.somatic')} /> ), }, @@ -289,6 +295,7 @@ const Variants = () => { queryBuilderId={VARIANT_SOMATIC_REPO_QB_ID} extendedMappingResults={variantSomaticMappingResults} filterInfo={filterGroups[FilterTypes.Frequency]} + analyticsName={intl.get('global.googleAnalytics.somatic')} /> ), },