feat: tracking the usage of filters #344 (#493)

* feat: tracking the usage of filters #344 * feat: add tracking config (altos-labs/data-browser#344) * feat: make tracking config properties optional (altos-labs/data-browser#344) * chore: update parameter descriptions (altos-labs/data-browser#344) * refactor: use relative import path (altos-labs/data-browser#344) * refactor: create interfaces for filter tracking payloads (altos-labs/data-browser#344) --------- Co-authored-by: hunterckx <[email protected]>
clevercanary · Dec 5, 2023 · b5944dc · b5944dc
1 parent 02115fe
commit b5944dc
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 25 deletions.
diff --git a/packages/data-explorer-ui/src/components/Filter/components/Filter/filter.tsx b/packages/data-explorer-ui/src/components/Filter/components/Filter/filter.tsx
@@ -2,6 +2,7 @@ import { CloseRounded } from "@mui/icons-material";
 import { Grow, PopoverPosition, PopoverProps } from "@mui/material";
 import React, { MouseEvent, ReactNode, useState } from "react";
 import { SelectCategoryView } from "../../../../common/entities";
+import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { CloseDrawerIconButton } from "../../../common/IconButton/iconButton.styles";
 import { FilterLabel } from "../FilterLabel/filterLabel";
@@ -18,19 +19,23 @@ const DRAWER_SLOT_PROPS: PopoverProps["slotProps"] = {
 };
 
 export interface FilterProps {
+  categorySection?: string;
   categoryView: SelectCategoryView;
   closeAncestor?: () => void;
   isFilterDrawer: boolean;
   onFilter: OnFilterFn;
   tags?: ReactNode; // e.g. filter tags
+  trackFilterOpened?: TrackFilterOpenedFunction;
 }
 
 export const Filter = ({
+  categorySection,
   categoryView,
   closeAncestor,
   isFilterDrawer,
   onFilter,
   tags,
+  trackFilterOpened,
 }: FilterProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [position, setPosition] = useState<PopoverPosition>(DEFAULT_POSITION);
@@ -67,6 +72,7 @@ export const Filter = ({
     // Set popover position and open state.
     setPosition({ left: popoverLeftPos, top: popoverTopPos });
     setIsOpen(true);
+    trackFilterOpened?.({ category: categoryView.key });
   };
 
   return (
@@ -95,6 +101,7 @@ export const Filter = ({
           />
         )}
         <FilterMenu
+          categorySection={categorySection}
           categoryKey={categoryView.key}
           categoryLabel={categoryView.label}
           isFilterDrawer={isFilterDrawer}

diff --git a/packages/data-explorer-ui/src/components/Filter/components/FilterMenu/filterMenu.tsx b/packages/data-explorer-ui/src/components/Filter/components/FilterMenu/filterMenu.tsx
@@ -15,6 +15,7 @@ import { Button, FilterView, FilterViewTools } from "./filterMenu.styles";
 export interface FilterMenuProps {
   categoryKey: CategoryKey;
   categoryLabel: string;
+  categorySection?: string;
   isFilterDrawer: boolean;
   menuWidth?: number;
   onCloseFilter: () => void;
@@ -25,6 +26,7 @@ export interface FilterMenuProps {
 export const FilterMenu = ({
   categoryKey,
   categoryLabel,
+  categorySection,
   isFilterDrawer,
   menuWidth = 312,
   onCloseFilter,
@@ -55,6 +57,7 @@ export const FilterMenu = ({
       </FilterViewTools>
       {filteredValues.length > 0 ? (
         <VariableSizeList
+          categorySection={categorySection}
           categoryKey={categoryKey}
           isFilterDrawer={isFilterDrawer}
           onFilter={onFilter}

diff --git a/packages/data-explorer-ui/src/components/Filter/components/Filters/filters.tsx b/packages/data-explorer-ui/src/components/Filter/components/Filters/filters.tsx
@@ -1,4 +1,5 @@
 import { Divider } from "@mui/material";
+import { TrackFilterOpenedFunction } from "config/entities";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { CategoryTag, SelectCategoryView } from "../../../../common/entities";
 import {
@@ -22,6 +23,7 @@ export interface FiltersProps {
   closeAncestor?: () => void;
   disabled: boolean; // Global disabling of filters; typically in "related" entity view.
   onFilter: OnFilterFn;
+  trackFilterOpened?: TrackFilterOpenedFunction;
 }
 
 /**
@@ -65,6 +67,7 @@ export const Filters = ({
   closeAncestor,
   disabled = false,
   onFilter,
+  trackFilterOpened,
 }: FiltersProps): JSX.Element => {
   const isFilterDrawer = useBreakpointHelper(
     BREAKPOINT_FN_NAME.DOWN,
@@ -80,16 +83,18 @@ export const Filters = ({
 
   return (
     <FilterList disabled={disabled} height={height} ref={filterListRef}>
-      {categoryFilters.map(({ categoryViews }, i) => (
+      {categoryFilters.map(({ categoryViews, label }, i) => (
         <Fragment key={i}>
           {i !== 0 && <Divider />}
           {categoryViews.map((categoryView) => (
             <Filter
               key={categoryView.key}
+              categorySection={label}
               categoryView={categoryView}
               closeAncestor={closeAncestor}
               isFilterDrawer={isFilterDrawer}
               onFilter={onFilter}
+              trackFilterOpened={trackFilterOpened}
               tags={renderFilterTags(categoryView, onFilter)}
             />
           ))}

diff --git a/...nents/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.tsx b/...nents/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.tsx
@@ -15,7 +15,6 @@ import {
   VariableSizeListProps as ListProps,
 } from "react-window";
 import { SelectCategoryView } from "../../../../../../common/entities";
-import { escapeRegExp } from "../../../../../../common/utils";
 import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
@@ -59,7 +58,7 @@ interface VariableSizeListData {
   filteredItems: SearchAllFiltersItem[];
   onFilter: OnFilterFn;
   onUpdateItemSizeByItemKey: (key: string, size: number) => void;
-  searchTermRegExp: RegExp | null;
+  searchTerm?: string;
 }
 
 interface OuterElementContextValue {
@@ -75,12 +74,8 @@ interface OuterElementContextValue {
 function renderListItem(props: ListChildComponentProps): JSX.Element {
   const { data, index, style } = props;
   delete style.height; // Remove height style to allow variable size list to set item height.
-  const {
-    filteredItems,
-    onFilter,
-    onUpdateItemSizeByItemKey,
-    searchTermRegExp,
-  } = data as VariableSizeListData;
+  const { filteredItems, onFilter, onUpdateItemSizeByItemKey, searchTerm } =
+    data as VariableSizeListData;
   const item = filteredItems[index];
   if (item.type === ITEM_TYPE.DIVIDER) return <Divider style={style} />;
   else
@@ -89,7 +84,7 @@ function renderListItem(props: ListChildComponentProps): JSX.Element {
         item={item}
         onFilter={onFilter}
         onUpdateItemSizeByItemKey={onUpdateItemSizeByItemKey}
-        searchTermRegExp={searchTermRegExp}
+        searchTerm={searchTerm}
         style={style}
       />
     );
@@ -135,9 +130,6 @@ export const VariableSizeList = forwardRef<
   autocompleteListRef
 ): JSX.Element {
   const filteredItems = applyMenuFilter(categoryViews, searchTerm);
-  const searchTermRegExp = searchTerm
-    ? new RegExp(escapeRegExp(searchTerm), "ig")
-    : null;
   let resizeRequired = true;
   const desktopSmDown = useBreakpointHelper(
     BREAKPOINT_FN_NAME.DOWN,
@@ -188,7 +180,7 @@ export const VariableSizeList = forwardRef<
           filteredItems,
           onFilter,
           onUpdateItemSizeByItemKey,
-          searchTermRegExp,
+          searchTerm,
         }}
         itemSize={(index): number => {
           const item = filteredItems[index];

diff --git a/...lter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.tsx b/...lter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.tsx
@@ -6,6 +6,7 @@ import {
   Typography,
 } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { escapeRegExp } from "../../../../../../common/utils";
 import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
 import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
@@ -18,18 +19,21 @@ interface Props {
   item: SearchAllFiltersDynamicItem;
   onFilter: OnFilterFn;
   onUpdateItemSizeByItemKey: (key: string, size: number) => void;
-  searchTermRegExp: RegExp | null;
+  searchTerm?: string;
   style: React.CSSProperties;
 }
 
 export default function VariableSizeListItem({
   item,
   onFilter,
   onUpdateItemSizeByItemKey,
-  searchTermRegExp,
+  searchTerm,
   style,
 }: Props): JSX.Element {
   const { key } = item;
+  const searchTermRegExp = searchTerm
+    ? new RegExp(escapeRegExp(searchTerm), "ig")
+    : null;
   const listItemRef = useRef<HTMLElement>();
 
   const setRef = (e: HTMLElement | null): void => {
@@ -50,7 +54,9 @@ export default function VariableSizeListItem({
       <ListItemButton
         ref={setRef}
         key={key}
-        onClick={(): void => onFilter(categoryKey, valueKey, !selected)}
+        onClick={(): void =>
+          onFilter(categoryKey, valueKey, !selected, undefined, searchTerm)
+        }
         selected={selected}
         style={style}
       >

diff --git a/...s/data-explorer-ui/src/components/Filter/components/VariableSizeList/VariableSizeList.tsx b/...s/data-explorer-ui/src/components/Filter/components/VariableSizeList/VariableSizeList.tsx
@@ -23,6 +23,7 @@ export type ItemSizeByItemKey = Map<string, number>;
 
 export interface VariableSizeListProps {
   categoryKey: CategoryKey;
+  categorySection?: string;
   height?: number; // Height of list; vertical list must be a number.
   isFilterDrawer: boolean;
   itemSize?: number; // Default item size.
@@ -39,9 +40,16 @@ export interface VariableSizeListProps {
  */
 function renderListItem(props: ListChildComponentProps): JSX.Element {
   const { data, index, style } = props;
-  const { categoryKey, onFilter, onUpdateItemSizeByItemKey, values } = data;
+  const {
+    categoryKey,
+    categorySection,
+    onFilter,
+    onUpdateItemSizeByItemKey,
+    values,
+  } = data;
   return (
     <VariableSizeListItem
+      categorySection={categorySection}
       categoryKey={categoryKey}
       listItem={values[index]}
       onFilter={onFilter}
@@ -53,6 +61,7 @@ function renderListItem(props: ListChildComponentProps): JSX.Element {
 
 export const VariableSizeList = ({
   categoryKey,
+  categorySection,
   height: initHeight = MAX_LIST_HEIGHT_PX,
   isFilterDrawer,
   itemSize = LIST_ITEM_HEIGHT,
@@ -101,6 +110,7 @@ export const VariableSizeList = ({
       itemCount={values.length}
       itemData={{
         categoryKey,
+        categorySection,
         onFilter,
         onUpdateItemSizeByItemKey,
         values,

diff --git a/...xplorer-ui/src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx b/...xplorer-ui/src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx
@@ -16,6 +16,7 @@ import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIc
 
 interface Props {
   categoryKey: CategoryKey;
+  categorySection?: string;
   listItem: SelectCategoryValueView;
   onFilter: OnFilterFn;
   onUpdateItemSizeByItemKey: (itemKey: string, itemSize: number) => void;
@@ -24,6 +25,7 @@ interface Props {
 
 export default function VariableSizeListItem({
   categoryKey,
+  categorySection,
   listItem,
   onFilter,
   onUpdateItemSizeByItemKey,
@@ -38,10 +40,14 @@ export default function VariableSizeListItem({
     onUpdateItemSizeByItemKey(key, listItemRef.current?.clientHeight || 0);
   }, [key, onUpdateItemSizeByItemKey]);
 
+  const handleItemClicked = (): void => {
+    onFilter(categoryKey, key, !selected, categorySection);
+  };
+
   return (
     <ListItemButton
       ref={listItemRef}
-      onClick={(): void => onFilter(categoryKey, key, !selected)}
+      onClick={handleItemClicked}
       selected={selected}
       style={style}
     >

diff --git a/packages/data-explorer-ui/src/config/entities.ts b/packages/data-explorer-ui/src/config/entities.ts
@@ -279,6 +279,44 @@ type RelatedSearchFunction = (
   selectedCategoryValues: SelectedFilterValue | undefined
 ) => Promise<RelatedSearchResult | undefined>;
 
+/**
+ * Filter applied tracking payload
+ */
+export interface TrackFilterAppliedPayload {
+  category: string;
+  fromSearchAll: boolean;
+  searchTerm: string;
+  section: string;
+  selected: boolean;
+  value: string;
+}
+
+/**
+ * Filter applied tracking function
+ */
+export type TrackFilterAppliedFunction = (
+  payload: TrackFilterAppliedPayload
+) => void;
+
+/**
+ * Filter opened tracking payload
+ */
+export interface TrackFilterOpenedPayload {
+  category: string;
+}
+
+/**
+ * Filter opened tracking function
+ */
+export type TrackFilterOpenedFunction = (
+  payload: TrackFilterOpenedPayload
+) => void;
+
+interface TrackingConfig {
+  trackFilterApplied?: TrackFilterAppliedFunction;
+  trackFilterOpened?: TrackFilterOpenedFunction;
+}
+
 /**
  * Product of the related search function.
  */
@@ -321,6 +359,7 @@ export interface SiteConfig {
   redirectRootToPath: string;
   summaryConfig?: SummaryConfig;
   themeOptions?: ThemeOptions;
+  trackingConfig?: TrackingConfig;
 }
 
 /**

diff --git a/packages/data-explorer-ui/src/hooks/useCategoryFilter.ts b/packages/data-explorer-ui/src/hooks/useCategoryFilter.ts
@@ -31,7 +31,9 @@ export interface FilterInstance {
 export type OnFilterFn = (
   categoryKey: CategoryKey,
   selectedCategoryValue: CategoryValueKey,
-  selected: boolean
+  selected: boolean,
+  categorySection?: string,
+  searchTerm?: string
 ) => void;
 
 /**