Skip to content

Commit 8eb62dc

Browse files
drew-harrisskeptrunedev
drew-harris
authored and
skeptrunedev
committed
feat: add back funnel select
Back out "feat: remove checkboxes" This backs out commit 554c5a4.
1 parent a69bc01 commit 8eb62dc

4 files changed

Lines changed: 92 additions & 30 deletions

File tree

‎clients/trieve-shopify-extension/app/components/analytics/EventPathSelector.tsx‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { KnownEventNames } from "app/utils/formatting";
1+
import { Checkbox } from "@shopify/polaris";
2+
import { formatEventName, KnownEventNames } from "app/utils/formatting";
3+
import { useMemo } from "react";
4+
5+
interface EventPathSelectorProps {
6+
mode: "chat" | "search" | "recommendations";
7+
events: KnownEventNames[];
8+
setEvents: (events: KnownEventNames[]) => void;
9+
}
210

311
export const chatEvents: KnownEventNames[] = [
412
"component_load",
@@ -22,4 +30,47 @@ export const recommendationEvents: KnownEventNames[] = [
2230
"recommendation_created",
2331
"site-add_to_cart",
2432
"site-checkout",
25-
];
33+
];
34+
35+
export const EventPathSelector = (props: EventPathSelectorProps) => {
36+
const availableOptions = useMemo(() => {
37+
if (props.mode === "chat") {
38+
return chatEvents;
39+
} else if (props.mode === "search") {
40+
return searchEvents;
41+
} else {
42+
return recommendationEvents;
43+
}
44+
}, [props.mode]);
45+
46+
return (
47+
<div className="flex gap-2">
48+
{availableOptions.map((eventName) => {
49+
return (
50+
<div className="flex" key={eventName}>
51+
<Checkbox
52+
label={formatEventName(eventName)}
53+
checked={props.events.includes(eventName)}
54+
onChange={() => {
55+
if (props.events.includes(eventName)) {
56+
// Remove the event while maintaining order
57+
props.setEvents(
58+
props.events.filter((event) => event !== eventName),
59+
);
60+
} else {
61+
// Add the event while maintaining the original order
62+
// by filtering the available options to only include selected events
63+
const newEvents = availableOptions.filter(
64+
(event) =>
65+
props.events.includes(event) || event === eventName,
66+
);
67+
props.setEvents(newEvents);
68+
}
69+
}}
70+
/>
71+
</div>
72+
);
73+
})}
74+
</div>
75+
);
76+
};

‎clients/trieve-shopify-extension/app/components/analytics/chat/ChatUserJourneyFunnel.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import { useTrieve } from "app/context/trieveContext";
1212
import { formatEventName, KnownEventNames } from "app/utils/formatting";
1313
import { Chart, ChartConfiguration } from "chart.js";
1414
import ChartDataLabels from "chartjs-plugin-datalabels";
15-
import { useEffect, useMemo, useRef } from "react";
15+
import { useEffect, useMemo, useRef, useState } from "react";
1616
import { ComponentAnalyticsFilter, EventNameAndCounts } from "trieve-ts-sdk";
1717
import { BasicTableComponent } from "../BasicTableComponent";
18-
import { chatEvents } from "../EventPathSelector";
18+
import { chatEvents, EventPathSelector } from "../EventPathSelector";
1919
import { chatEventFunnelQuery } from "app/queries/analytics/chat";
2020

2121
export const ChatUserJourneyFunnel = ({
@@ -24,19 +24,20 @@ export const ChatUserJourneyFunnel = ({
2424
filters: ComponentAnalyticsFilter;
2525
}) => {
2626
const { trieve } = useTrieve();
27-
const events = chatEvents;
27+
const [events, setEvents] = useState<KnownEventNames[]>(chatEvents);
2828

2929
const { data, status } = useQuery(chatEventFunnelQuery(trieve, filters));
3030

3131
const canvasRef = useRef<HTMLCanvasElement>(null);
3232
const chartInstanceRef = useRef<Chart | null>(null);
3333

34-
3534
const filteredData = useMemo(() => {
3635
if (!data) return [];
3736
const selected = events.map((event) => {
3837
return (
39-
data.event_names.find((e: EventNameAndCounts) => e.event_name === event) || {
38+
data.event_names.find(
39+
(e: EventNameAndCounts) => e.event_name === event,
40+
) || {
4041
event_name: event,
4142
event_count: 0,
4243
}
@@ -164,9 +165,9 @@ export const ChatUserJourneyFunnel = ({
164165

165166
const tableData = filteredData
166167
? filteredData.map((item) => [
167-
formatEventName(item.event_name),
168-
item.event_count.toString(),
169-
])
168+
formatEventName(item.event_name),
169+
item.event_count.toString(),
170+
])
170171
: [];
171172
const tableHeadings = ["Event Name", "Unique Users"];
172173
const tableContentTypes: ColumnContentType[] = ["text", "numeric"];
@@ -186,6 +187,7 @@ export const ChatUserJourneyFunnel = ({
186187
</Tooltip>
187188
</div>
188189
</div>
190+
<EventPathSelector events={events} mode="chat" setEvents={setEvents} />
189191
{events.length > 0 ? (
190192
<>
191193
<Box paddingBlockStart="800" minHeight="150px">
@@ -203,7 +205,7 @@ export const ChatUserJourneyFunnel = ({
203205
hidePagination
204206
data={tableData}
205207
page={1}
206-
setPage={() => { }}
208+
setPage={() => {}}
207209
tableContentTypes={tableContentTypes}
208210
tableHeadings={tableHeadings}
209211
hasNext={hasNext}

‎clients/trieve-shopify-extension/app/components/analytics/recommendations/RecommendationUserJourneyFunnel.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@ import {
55
Tooltip,
66
Text,
77
ColumnContentType,
8-
Select,
98
} from "@shopify/polaris";
109
import { useQuery } from "@tanstack/react-query";
1110
import { useTrieve } from "app/context/trieveContext";
1211
import { formatEventName, KnownEventNames } from "app/utils/formatting";
1312
import { Chart, ChartConfiguration } from "chart.js";
1413
import ChartDataLabels from "chartjs-plugin-datalabels";
15-
import { useEffect, useMemo, useRef } from "react";
14+
import { useEffect, useMemo, useRef, useState } from "react";
1615
import { ComponentAnalyticsFilter, EventNameAndCounts } from "trieve-ts-sdk";
1716
import { BasicTableComponent } from "../BasicTableComponent";
18-
import { recommendationEvents } from "../EventPathSelector";
17+
import { EventPathSelector, recommendationEvents } from "../EventPathSelector";
1918
import { recommendationEventFunnelQuery } from "app/queries/analytics/recommendation";
2019

2120
export const RecommendationUserJourneyFunnel = ({
@@ -24,19 +23,22 @@ export const RecommendationUserJourneyFunnel = ({
2423
filters: ComponentAnalyticsFilter;
2524
}) => {
2625
const { trieve } = useTrieve();
27-
const events = recommendationEvents;
26+
const [events, setEvents] = useState<KnownEventNames[]>(recommendationEvents);
2827

29-
const { data, status } = useQuery(recommendationEventFunnelQuery(trieve, filters));
28+
const { data, status } = useQuery(
29+
recommendationEventFunnelQuery(trieve, filters),
30+
);
3031

3132
const canvasRef = useRef<HTMLCanvasElement>(null);
3233
const chartInstanceRef = useRef<Chart | null>(null);
3334

34-
3535
const filteredData = useMemo(() => {
3636
if (!data) return [];
3737
const selected = events.map((event) => {
3838
return (
39-
data.event_names.find((e: EventNameAndCounts) => e.event_name === event) || {
39+
data.event_names.find(
40+
(e: EventNameAndCounts) => e.event_name === event,
41+
) || {
4042
event_name: event,
4143
event_count: 0,
4244
}
@@ -164,9 +166,9 @@ export const RecommendationUserJourneyFunnel = ({
164166

165167
const tableData = filteredData
166168
? filteredData.map((item) => [
167-
formatEventName(item.event_name),
168-
item.event_count.toString(),
169-
])
169+
formatEventName(item.event_name),
170+
item.event_count.toString(),
171+
])
170172
: [];
171173
const tableHeadings = ["Event Name", "Unique Users"];
172174
const tableContentTypes: ColumnContentType[] = ["text", "numeric"];
@@ -186,6 +188,11 @@ export const RecommendationUserJourneyFunnel = ({
186188
</Tooltip>
187189
</div>
188190
</div>
191+
<EventPathSelector
192+
events={events}
193+
mode="recommendations"
194+
setEvents={setEvents}
195+
/>
189196
{events.length > 0 ? (
190197
<>
191198
<Box paddingBlockStart="800" minHeight="150px">
@@ -203,7 +210,7 @@ export const RecommendationUserJourneyFunnel = ({
203210
hidePagination
204211
data={tableData}
205212
page={1}
206-
setPage={() => { }}
213+
setPage={() => {}}
207214
tableContentTypes={tableContentTypes}
208215
tableHeadings={tableHeadings}
209216
hasNext={hasNext}

‎clients/trieve-shopify-extension/app/components/analytics/search/SearchUserJourneyFunnel.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,28 @@ import ChartDataLabels from "chartjs-plugin-datalabels";
1515
import { useEffect, useMemo, useRef, useState } from "react";
1616
import { ComponentAnalyticsFilter, EventNameAndCounts } from "trieve-ts-sdk";
1717
import { BasicTableComponent } from "../BasicTableComponent";
18-
import { searchEvents } from "../EventPathSelector";
18+
import { EventPathSelector, searchEvents } from "../EventPathSelector";
1919
import { searchEventFunnelQuery } from "app/queries/analytics/search";
2020
export const SearchUserJourneyFunnel = ({
2121
filters,
2222
}: {
2323
filters: ComponentAnalyticsFilter;
2424
}) => {
2525
const { trieve } = useTrieve();
26-
const events = searchEvents;
26+
const [events, setEvents] = useState<KnownEventNames[]>(searchEvents);
2727

2828
const { data, status } = useQuery(searchEventFunnelQuery(trieve, filters));
2929

3030
const canvasRef = useRef<HTMLCanvasElement>(null);
3131
const chartInstanceRef = useRef<Chart | null>(null);
3232

33-
3433
const filteredData = useMemo(() => {
3534
if (!data) return [];
3635
const selected = events.map((event) => {
3736
return (
38-
data.event_names.find((e: EventNameAndCounts) => e.event_name === event) || {
37+
data.event_names.find(
38+
(e: EventNameAndCounts) => e.event_name === event,
39+
) || {
3940
event_name: event,
4041
event_count: 0,
4142
}
@@ -163,9 +164,9 @@ export const SearchUserJourneyFunnel = ({
163164

164165
const tableData = filteredData
165166
? filteredData.map((item) => [
166-
formatEventName(item.event_name),
167-
item.event_count.toString(),
168-
])
167+
formatEventName(item.event_name),
168+
item.event_count.toString(),
169+
])
169170
: [];
170171
const tableHeadings = ["Event Name", "Unique Users"];
171172
const tableContentTypes: ColumnContentType[] = ["text", "numeric"];
@@ -185,6 +186,7 @@ export const SearchUserJourneyFunnel = ({
185186
</Tooltip>
186187
</div>
187188
</div>
189+
<EventPathSelector events={events} mode="search" setEvents={setEvents} />
188190
{events.length > 0 ? (
189191
<>
190192
<Box paddingBlockStart="800" minHeight="150px">
@@ -202,7 +204,7 @@ export const SearchUserJourneyFunnel = ({
202204
hidePagination
203205
data={tableData}
204206
page={1}
205-
setPage={() => { }}
207+
setPage={() => {}}
206208
tableContentTypes={tableContentTypes}
207209
tableHeadings={tableHeadings}
208210
hasNext={hasNext}

0 commit comments

Comments
 (0)