feat: add ui for new table system

Author: drew-harris

clients/trieve-shopify-extension/app/components/analytics/AdvancedTableComponent.tsx

@@ -13,17 +13,16 @@ import {
   Page,
   InlineStack,
 } from "@shopify/polaris";
-import {
-  Link
-} from "@remix-run/react";
+import { Link } from "@remix-run/react";
 import { IndexTableHeading } from "@shopify/polaris/build/ts/src/components/IndexTable";
 import { NonEmptyArray } from "@shopify/polaris/build/ts/src/types";
 import {
   ChevronUpIcon,
   ChevronDownIcon,
   ViewIcon,
-} from '@shopify/polaris-icons';
-
+} from "@shopify/polaris-icons";
+import { ReactNode } from "react";
+import { add } from "date-fns";
 
 export interface Filter {
   key: string;
@@ -43,14 +42,14 @@ export interface AdvancedTableComponentProps {
   setPage: (page: (page: number) => number) => void;
   tabs: string[];
   label: string;
-  tableHeadings: { heading: string, tooltip: string, sortCol?: string }[];
-  sortOptions: IndexFiltersProps['sortOptions'];
+  tableHeadings: { heading: string; tooltip: string; sortCol?: string }[];
+  sortOptions: IndexFiltersProps["sortOptions"];
   sortSelected: string[];
   setSortSelected: (sortSelected: string[]) => void;
   tooltipContent: string;
   hasNext: boolean;
   loading: boolean;
-  appliedFilters: IndexFiltersProps['appliedFilters'];
+  appliedFilters: IndexFiltersProps["appliedFilters"];
   filters: Filter[];
   query: string;
   setQuery: (query: string) => void;
@@ -60,6 +59,7 @@ export interface AdvancedTableComponentProps {
   sortableColumns?: boolean[];
   onSort?: (index: number, direction: "ascending" | "descending") => void;
   disableSearch?: boolean;
+  additionalControls?: ReactNode;
 }
 
 export const AdvancedTableComponent = ({
@@ -85,6 +85,7 @@ export const AdvancedTableComponent = ({
   sortSelected,
   setSortSelected,
   disableSearch,
+  additionalControls,
 }: AdvancedTableComponentProps) => {
   const { mode, setMode } = useSetIndexFiltersMode();
 
@@ -96,37 +97,44 @@ export const AdvancedTableComponent = ({
   }));
 
   return (
-    <Page
-      title={label}
-      fullWidth={true}
-    >
+    <Page title={label} fullWidth={true}>
       <Card>
         <Box minHeight="14px">
-          <IndexFilters
-            sortOptions={sortOptions}
-            sortSelected={sortSelected}
-            onSort={setSortSelected}
-            mode={mode}
-            setMode={setMode}
-            tabs={indexTabs}
-            filters={filters.map((filter) => ({ ...filter, shortcut: true }))}
-            queryValue={query}
-            cancelAction={{
-              onAction: () => { },
-              disabled: false,
-              loading: false,
-            }}
-            borderlessQueryField={false}
-            appliedFilters={appliedFilters}
-            onQueryChange={setQuery}
-            onQueryClear={() => setQuery('')}
-            onClearAll={handleClearAll}
-            selected={selected}
-            onSelect={setSelected}
-            loading={loading}
-            canCreateNewView={false}
-            hideQueryField={disableSearch}
-          />
+          <div className="flex justify-end">
+            <div className="grow border-b border-b-neutral-200 flex items-end pb-1">
+              {additionalControls}
+            </div>
+            <div className="shrink-0">
+              <IndexFilters
+                sortOptions={sortOptions}
+                sortSelected={sortSelected}
+                onSort={setSortSelected}
+                mode={mode}
+                setMode={setMode}
+                tabs={[]}
+                filters={filters.map((filter) => ({
+                  ...filter,
+                  shortcut: true,
+                }))}
+                queryValue={query}
+                cancelAction={{
+                  onAction: () => {},
+                  disabled: false,
+                  loading: false,
+                }}
+                borderlessQueryField={false}
+                appliedFilters={appliedFilters}
+                onQueryChange={setQuery}
+                onQueryClear={() => setQuery("")}
+                onClearAll={handleClearAll}
+                selected={selected}
+                onSelect={setSelected}
+                loading={loading}
+                canCreateNewView={false}
+                hideQueryField={disableSearch}
+              />
+            </div>
+          </div>
           <IndexTable
             hasZebraStriping
             condensed={useBreakpoints().smDown}
@@ -138,25 +146,34 @@ export const AdvancedTableComponent = ({
               tableHeadings.map((heading, index) => {
                 return {
                   title: (
-                    <div onClick={() => {
-                      if (heading.sortCol) {
-                        setSortSelected([`${heading.sortCol} ${sortSelected[0].split(" ")[0] === heading.sortCol ? (sortSelected[0].split(" ")[1] === "asc" ? "desc" : "asc") : "asc"}`]);
-                      }
-                    }} className={`${heading.sortCol ? "cursor-pointer" : ""}`}>
+                    <div
+                      onClick={() => {
+                        if (heading.sortCol) {
+                          setSortSelected([
+                            `${heading.sortCol} ${sortSelected[0].split(" ")[0] === heading.sortCol ? (sortSelected[0].split(" ")[1] === "asc" ? "desc" : "asc") : "asc"}`,
+                          ]);
+                        }
+                      }}
+                      className={`${heading.sortCol ? "cursor-pointer" : ""}`}
+                    >
                       <div className="flex flex-row items-center">
                         <Tooltip content={heading.tooltip} hasUnderline>
                           <Text as="span" variant="bodyMd" fontWeight="bold">
                             {heading.heading}
                           </Text>
                         </Tooltip>
                         {heading.sortCol && (
-                          <span className="ml-1">{sortSelected[0].split(" ")[0] === heading.sortCol ? (sortSelected[0].split(" ")[1] === "asc" ? <Icon
-                            source={ChevronUpIcon}
-                            tone="base"
-                          /> : <Icon
-                            source={ChevronDownIcon}
-                            tone="base"
-                          />) : ""}
+                          <span className="ml-1">
+                            {sortSelected[0].split(" ")[0] ===
+                            heading.sortCol ? (
+                              sortSelected[0].split(" ")[1] === "asc" ? (
+                                <Icon source={ChevronUpIcon} tone="base" />
+                              ) : (
+                                <Icon source={ChevronDownIcon} tone="base" />
+                              )
+                            ) : (
+                              ""
+                            )}
                           </span>
                         )}
                       </div>
@@ -166,36 +183,41 @@ export const AdvancedTableComponent = ({
                 };
               }) as NonEmptyArray<IndexTableHeading>
             }
-            pagination={
-              {
-                hasNext, hasPrevious: page > 1, onNext: () => {
-                  setPage((prevPage) => prevPage + 1);
-                }, onPrevious: () => {
-                  setPage((prevPage) => prevPage - 1);
-                }
-              }
-            }
+            pagination={{
+              hasNext,
+              hasPrevious: page > 1,
+              onNext: () => {
+                setPage((prevPage) => prevPage + 1);
+              },
+              onPrevious: () => {
+                setPage((prevPage) => prevPage - 1);
+              },
+            }}
           >
             {data.map((row, index) => {
               return (
-                <IndexTable.Row key={index} id={index.toString()} position={index}>
+                <IndexTable.Row
+                  key={index}
+                  id={index.toString()}
+                  position={index}
+                >
                   {row.map((cell, innerIndex) => (
                     <IndexTable.Cell
                       key={innerIndex}
                       className="max-w-[200px] truncate"
                     >
                       {cell.url ? (
-                        <Link
-                          to={cell.url}
-                        >
+                        <Link to={cell.url}>
                           <InlineStack wrap={false}>
                             <ViewIcon width={20} />
                             <Text as="span" variant="bodyMd" truncate={true}>
                               {cell.content}
                             </Text>
                           </InlineStack>
                         </Link>
-                      ) : cell.content}
+                      ) : (
+                        cell.content
+                      )}
                     </IndexTable.Cell>
                   ))}
                 </IndexTable.Row>

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

@@ -0,0 +1,70 @@
+import { Select } from "@shopify/polaris";
+import { TopicEventFilter } from "trieve-ts-sdk";
+import { Dispatch, SetStateAction } from "react";
+import { KnownEventNames } from "app/utils/formatting";
+
+interface EventFiltersProps {
+  eventsFilters: TopicEventFilter;
+  setEventsFilter: Dispatch<SetStateAction<TopicEventFilter>>;
+}
+
+const AVAILABLE_EVENT_TYPES: { label: string; value: KnownEventNames }[] = [
+  { label: "Checkout", value: "site-checkout" },
+  { label: "Add to Cart", value: "site-add_to_cart" },
+];
+
+const eventTypeSelectOptions = [
+  { label: "Any Event Type", value: "" },
+  ...AVAILABLE_EVENT_TYPES,
+];
+
+const inclusionSelectOptions = [
+  { label: "Includes", value: "includes" },
+  { label: "Does not include", value: "excludes" },
+];
+
+export function EventFilters({
+  eventsFilters,
+  setEventsFilter,
+}: EventFiltersProps) {
+  const handleInvertedChange = (selectedValue: string) => {
+    const isInverted = selectedValue === "excludes";
+    setEventsFilter((prev) => ({
+      ...prev,
+      inverted: isInverted,
+    }));
+  };
+
+  const handleEventTypeChange = (selectedValue: string) => {
+    setEventsFilter((prev) => ({
+      ...prev,
+      event_types: selectedValue ? [selectedValue as any] : [],
+    }));
+  };
+
+  const selectedInclusionValue = eventsFilters.inverted
+    ? "excludes"
+    : "includes";
+
+  const selectedEventTypeValue = eventsFilters.event_types?.[0] || "";
+
+  return (
+    <div className="flex items-center gap-2">
+      <div>Chat</div>
+      <Select
+        labelHidden
+        label="Includes"
+        options={inclusionSelectOptions}
+        onChange={handleInvertedChange}
+        value={selectedInclusionValue}
+      />
+      <Select
+        labelHidden
+        label="Event Type"
+        options={eventTypeSelectOptions}
+        onChange={handleEventTypeChange}
+        value={selectedEventTypeValue}
+      />
+    </div>
+  );
+}

clients/trieve-shopify-extension/app/queries/analytics/chat.ts

@@ -16,6 +16,7 @@ import {
   TopicAnalyticsFilter,
   PopularChatsResponse,
   FollowupQueriesResponse,
+  TopicEventFilter,
 } from "trieve-ts-sdk";
 
 export const topicsUsageQuery = (
@@ -79,22 +80,35 @@ export const allChatsQuery = (
   trieve: TrieveSDK,
   filters: RAGAnalyticsFilter,
   page: number,
-  has_clicks?: boolean,
+  topic_event_filter: TopicEventFilter,
   sort_by?: RAGSortBy,
   sort_order?: SortOrder,
 ) => {
   return {
-    queryKey: ["all_chats", filters, page, has_clicks, sort_by, sort_order],
+    queryKey: [
+      "all_chats",
+      filters,
+      page,
+      topic_event_filter,
+      sort_by,
+      sort_order,
+    ],
     queryFn: async () => {
-      const result = await trieve.getRagAnalytics({
+      const result = (await trieve.getRagAnalytics({
         filter: filters,
         type: "topic_queries",
         page: page,
-        has_clicks,
+        topic_events_filter:
+          topic_event_filter.event_types.length > 0
+            ? topic_event_filter
+            : undefined,
         sort_by,
         sort_order,
-      });
-      return { topics: [] } as TopicQueriesResponse;
+      })) as TopicQueriesResponse;
+      return {
+        topics: result.topics,
+        events: result.events,
+      } satisfies TopicQueriesResponse;
     },
   } satisfies QueryOptions;
 };