Austenem/CAT-1113 Add list metrics

CHANGELOG-add-my-lists-metrics.md

@@ -0,0 +1 @@
+- Add metrics for the "My Lists" feature.

context/app/static/js/components/detailPage/entityHeader/EntityHeaderActionButtons/EntityHeaderActionButtons.tsx

@@ -2,7 +2,6 @@ import React, { useState, ElementType, useCallback } from 'react';
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 import { IconButtonTypeMap } from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
-import { useEventCallback } from '@mui/material/utils';
 import Button, { ButtonProps } from '@mui/material/Button';
 import UnfoldLessRoundedIcon from '@mui/icons-material/UnfoldLessRounded';
 
@@ -45,15 +44,10 @@ function JSONButton({ entity_type, uuid }: Pick<Entity, 'uuid'> & { entity_type:
 }
 
 function SaveEntityButton({ uuid }: Pick<Entity, 'uuid'>) {
-  const { handleSaveEntities } = useSavedLists();
+  const { useHandleSaveEntity } = useSavedLists();
+  const handleSaveEntity = useHandleSaveEntity({ entityUUID: uuid });
 
-  const handleClick = useEventCallback(() => {
-    handleSaveEntities({ entityUUIDs: new Set([uuid]) }).catch((error) => {
-      console.error(error);
-    });
-  });
-
-  return <ActionButton onClick={handleClick} icon={SaveEntityIcon} tooltip="Save to list" />;
+  return <ActionButton onClick={handleSaveEntity} icon={SaveEntityIcon} tooltip="Save to list" />;
 }
 
 function EditSavedEntityButton({ uuid }: Pick<Entity, 'uuid'>) {

context/app/static/js/components/detailPage/summary/SummarySaveEntityButton/SummarySaveEntityButton.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import useEventCallback from '@mui/material/utils/useEventCallback';
 import { useAppContext } from 'js/components/Contexts';
 import useSavedLists from 'js/components/savedLists/hooks';
 import { Entity } from 'js/components/types';
@@ -8,16 +7,11 @@ import { WhiteRectangularTooltipIconButton } from 'js/shared-styles/buttons/Tool
 import { EditSavedEntityIcon, SaveEntityIcon } from 'js/shared-styles/icons';
 
 function SaveEntityButton({ uuid }: Pick<Entity, 'uuid'>) {
-  const { handleSaveEntities } = useSavedLists();
-
-  const handleClick = useEventCallback(() => {
-    handleSaveEntities({ entityUUIDs: new Set([uuid]) }).catch((error) => {
-      console.error(error);
-    });
-  });
+  const { useHandleSaveEntity } = useSavedLists();
+  const handleSaveEntity = useHandleSaveEntity({ entityUUID: uuid });
 
   return (
-    <WhiteRectangularTooltipIconButton onClick={handleClick} tooltip="Save to list">
+    <WhiteRectangularTooltipIconButton onClick={handleSaveEntity} tooltip="Save to list">
       <SaveEntityIcon color="primary" />
     </WhiteRectangularTooltipIconButton>
   );

context/app/static/js/components/organ/Samples/Samples.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
 
-import { withSelectableTableProvider, useSelectableTableStore } from 'js/shared-styles/tables/SelectableTableProvider';
-import AddItemsToListDialog from 'js/components/savedLists/AddItemsToListDialog';
+import SaveEntitiesButtonFromSearch from 'js/components/savedLists/SaveEntitiesButtonFromSearch';
+import { withSelectableTableProvider } from 'js/shared-styles/tables/SelectableTableProvider';
 import EntitiesTables from 'js/shared-styles/tables/EntitiesTable/EntitiesTables';
 import { SampleDocument } from 'js/typings/search';
 import {
@@ -25,7 +26,6 @@ interface OrganSamplesProps {
 }
 
 function Samples({ organTerms, id }: OrganSamplesProps) {
-  const { selectedRows, deselectHeaderAndRows } = useSelectableTableStore();
   const searchUrl = getSearchURL({ entityType: 'Sample', organTerms });
 
   const query = useMemo(
@@ -59,16 +59,12 @@ function Samples({ organTerms, id }: OrganSamplesProps) {
       id={id}
       title="Samples"
       action={
-        <>
+        <Stack direction="row" spacing={1}>
           <Button color="primary" variant="outlined" component="a" href={searchUrl}>
             View Data on Search Page
           </Button>
-          <AddItemsToListDialog
-            itemsToAddUUIDS={selectedRows}
-            onSaveCallback={deselectHeaderAndRows}
-            disabled={selectedRows.size === 0}
-          />
-        </>
+          <SaveEntitiesButtonFromSearch entity_type="Sample" />
+        </Stack>
       }
     >
       <EntitiesTables<SampleDocument> entities={[{ query, columns, entityType: 'Sample' }]} />

context/app/static/js/components/savedLists/SaveEntitiesButton/SaveEntitiesButton.tsx

@@ -2,25 +2,29 @@ import React from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 import useEventCallback from '@mui/material/utils/useEventCallback';
 
-import { useAppContext } from 'js/components/Contexts';
+import { useAppContext, useFlaskDataContext } from 'js/components/Contexts';
 import useSavedLists from 'js/components/savedLists/hooks';
 import { EditSavedEntityIcon, SaveEntityIcon } from 'js/shared-styles/icons';
 import { AllEntityTypes } from 'js/shared-styles/icons/entityIconMap';
 import { WhiteBackgroundIconTooltipButton } from 'js/shared-styles/buttons';
+import { trackEvent } from 'js/helpers/trackers';
+import { SavedListsEventCategories } from 'js/components/savedLists/types';
+import { useEntitiesData } from 'js/hooks/useEntityData';
+import { generateCommaList } from 'js/helpers/functions';
 
 function createTooltip({
   entity_type,
   allInSavedEntities,
   disabled,
-  enableSelectableTableTooltips,
+  fromSelectableTable,
 }: {
   entity_type: AllEntityTypes;
   allInSavedEntities: boolean;
   disabled: boolean;
-  enableSelectableTableTooltips?: boolean;
+  fromSelectableTable?: boolean;
 }) {
   const entityTypes = `${entity_type.toLowerCase()}s`;
-  const entityLabel = enableSelectableTableTooltips ? `selected ${entityTypes}` : entityTypes;
+  const entityLabel = fromSelectableTable ? `selected ${entityTypes}` : entityTypes;
 
   if (!disabled) {
     return `Save ${entityLabel}.`;
@@ -34,19 +38,36 @@ function createTooltip({
 export default function SaveEntitiesButton({
   entity_type,
   uuids,
-  enableSelectableTableTooltips,
+  fromSelectableTable,
 }: {
   entity_type: AllEntityTypes;
   uuids: Set<string>;
-  enableSelectableTableTooltips?: boolean;
+  fromSelectableTable?: boolean;
 }) {
   const { isAuthenticated } = useAppContext();
   const { savedEntities, handleSaveEntities } = useSavedLists();
+  const {
+    entity: { entity_type: page_entity_type },
+  } = useFlaskDataContext();
+
+  const [entityData] = useEntitiesData(Array.from(uuids), ['hubmap_id']);
 
   const handleClick = useEventCallback(() => {
     handleSaveEntities({ entityUUIDs: uuids }).catch((error) => {
       console.error(error);
     });
+
+    if (!entityData) {
+      return;
+    }
+
+    trackEvent({
+      category: fromSelectableTable
+        ? SavedListsEventCategories.EntitySearchPage(entity_type)
+        : SavedListsEventCategories.EntityDetailPage(page_entity_type),
+      action: 'Save Entity to Items',
+      label: generateCommaList(entityData.map((entity) => entity.hubmap_id)),
+    });
   });
 
   if (!isAuthenticated) {
@@ -61,7 +82,7 @@ export default function SaveEntitiesButton({
     entity_type,
     allInSavedEntities,
     disabled,
-    enableSelectableTableTooltips,
+    fromSelectableTable,
   });
 
   return (

context/app/static/js/components/savedLists/SaveEntitiesButtonFromSearch/SaveEntitiesButtonFromSearch.tsx

@@ -6,5 +6,5 @@ import SaveEntitiesButton from 'js/components/savedLists/SaveEntitiesButton';
 export default function SaveEntitiesButtonFromSearch({ entity_type }: { entity_type: AllEntityTypes }) {
   const { selectedRows } = useSelectableTableStore();
 
-  return <SaveEntitiesButton uuids={selectedRows} entity_type={entity_type} enableSelectableTableTooltips />;
+  return <SaveEntitiesButton uuids={selectedRows} entity_type={entity_type} fromSelectableTable />;
 }

context/app/static/js/components/savedLists/SaveToListDialog/SaveToListDialog.tsx

@@ -7,6 +7,10 @@ import DialogModal from 'js/shared-styles/DialogModal';
 import AddToList from 'js/components/savedLists/AddToList';
 import CreateListDialog from 'js/components/savedLists/CreateListDialog';
 import useSavedLists from 'js/components/savedLists/hooks';
+import { SavedListsEventCategories } from 'js/components/savedLists/types';
+import { trackEvent } from 'js/helpers/trackers';
+import { useEntitiesData } from 'js/hooks/useEntityData';
+import { generateCommaList } from 'js/helpers/functions';
 
 interface SaveToListDialogProps {
   title: string;
@@ -24,13 +28,23 @@ function SaveToListDialog({
   onSaveCallback,
 }: SaveToListDialogProps) {
   const [selectedLists, addToSelectedLists, removeFromSelectedLists] = useStateSet<string>([]);
-
   const { savedLists, handleAddEntitiesToList } = useSavedLists();
+  const [entitiesData] = useEntitiesData(Array.from(entitiesToAdd), ['hubmap_id']);
 
   async function addSavedEntitiesToList() {
     await Promise.all(
       Array.from(selectedLists).map((list) => handleAddEntitiesToList({ listUUID: list, entityUUIDs: entitiesToAdd })),
     );
+
+    if (!entitiesData) {
+      return;
+    }
+
+    trackEvent({
+      category: SavedListsEventCategories.LandingPage,
+      action: 'Save Entity',
+      label: generateCommaList(entitiesData.map((entity) => entity.hubmap_id)),
+    });
   }
 
   async function handleSubmit() {

context/app/static/js/components/savedLists/SavedListsDescription/SavedListsDescription.tsx

@@ -4,10 +4,20 @@ import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
+import { trackEvent } from 'js/helpers/trackers';
+import { SavedListsEventCategories } from 'js/components/savedLists/types';
 import { useAppContext } from 'js/components/Contexts';
 import Description from 'js/shared-styles/sections/Description';
 import { InternalLink } from 'js/shared-styles/Links';
 
+const handleTrack = () => {
+  trackEvent({
+    category: SavedListsEventCategories.LandingPage,
+    action: 'Log In / From alert',
+    label: 'alert banner',
+  });
+};
+
 function LocalStorageDescription() {
   const { isAuthenticated } = useAppContext();
 
@@ -19,11 +29,14 @@ function LocalStorageDescription() {
     <Description>
       <Stack spacing={1}>
         <Typography>
-          <InternalLink href="/login">Log in</InternalLink> to access and manage your saved lists. Any lists previously
-          stored locally will be linked to your profile once you <InternalLink href="/login">log in</InternalLink>.
+          <InternalLink href="/login" onClick={handleTrack}>
+            Log in
+          </InternalLink>{' '}
+          to access and manage your saved lists. Any lists previously stored locally will be linked to your profile once
+          you <InternalLink href="/login">log in</InternalLink>.
         </Typography>
         <Box>
-          <Button variant="contained" href="/login">
+          <Button variant="contained" href="/login" onClick={handleTrack}>
             Log In
           </Button>
         </Box>