Skip to content

Commit bbd7255

Browse files
SaraVieiraskeptrunedev
SaraVieira
authored and
skeptrunedev
committed
feat: redo tables in search analytics
1 parent 2eca588 commit bbd7255

File tree

7 files changed

+261
-236
lines changed

7 files changed

+261
-236
lines changed

‎frontends/analytics/src/components/charts/HeadQueries.tsx‎

Lines changed: 32 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,52 @@
1-
import { AnalyticsFilter } from "shared/types";
2-
import { createQuery, useQueryClient } from "@tanstack/solid-query";
3-
import { createEffect, Show, useContext } from "solid-js";
4-
import { getHeadQueries } from "../../api/analytics";
5-
import { DatasetContext } from "../../layouts/TopBarLayout";
6-
import { usePagination } from "../../hooks/usePagination";
7-
import { PaginationButtons } from "../PaginationButtons";
8-
import { Table, Td, Th, Tr } from "shared/ui";
9-
import { QueryStringDisplay } from "../QueryStringDisplay";
1+
import { AnalyticsFilter, HeadQuery } from "shared/types";
2+
import { Show } from "solid-js";
3+
import { SortableColumnDef, TanStackTable } from "shared/ui";
4+
import { useHeadQueries } from "../../hooks/data/useHeadQueries";
5+
import { createSolidTable, getCoreRowModel } from "@tanstack/solid-table";
106

117
interface HeadQueriesProps {
128
params: { filter: AnalyticsFilter };
139
}
1410

15-
export const HeadQueries = (props: HeadQueriesProps) => {
16-
const dataset = useContext(DatasetContext);
17-
const pages = usePagination();
18-
const queryClient = useQueryClient();
19-
20-
createEffect((prevDatasetId) => {
21-
const datasetId = dataset().dataset.id;
22-
if (prevDatasetId !== undefined && prevDatasetId !== datasetId) {
23-
void queryClient.invalidateQueries();
24-
}
11+
const columns: SortableColumnDef<HeadQuery>[] = [
12+
{
13+
accessorKey: "query",
14+
header: "Query",
15+
},
16+
{
17+
accessorKey: "count",
18+
header: "Frequency",
19+
},
20+
];
2521

26-
return datasetId;
27-
}, dataset().dataset.id);
28-
29-
createEffect(() => {
30-
// Preload the next page
31-
const params = props.params;
32-
const datasetId = dataset().dataset.id;
33-
const curPage = pages.page();
34-
void queryClient.prefetchQuery({
35-
queryKey: [
36-
"head-queries",
37-
{ filter: params.filter, page: curPage + 1, dataset: datasetId },
38-
],
39-
queryFn: async () => {
40-
const results = await getHeadQueries(
41-
params.filter,
42-
datasetId,
43-
curPage + 1,
44-
);
45-
if (results.length === 0) {
46-
pages.setMaxPageDiscovered(curPage);
47-
}
48-
return results;
49-
},
50-
});
22+
export const HeadQueries = (props: HeadQueriesProps) => {
23+
const { headQueriesQuery, pages } = useHeadQueries({
24+
params: props.params,
5125
});
5226

53-
const headQueriesQuery = createQuery(() => ({
54-
queryKey: ["head-queries", { filters: props.params, page: pages.page() }],
55-
queryFn: () => {
56-
return getHeadQueries(
57-
props.params.filter,
58-
dataset().dataset.id,
59-
pages.page(),
60-
);
27+
const table = createSolidTable({
28+
get data() {
29+
return headQueriesQuery.data || [];
30+
},
31+
state: {
32+
pagination: {
33+
pageIndex: pages.page(),
34+
pageSize: 10,
35+
},
6136
},
62-
}));
37+
columns,
38+
getCoreRowModel: getCoreRowModel(),
39+
manualPagination: true,
40+
});
6341

6442
return (
6543
<>
6644
<Show
6745
fallback={<div class="py-8">Loading...</div>}
6846
when={headQueriesQuery.data}
6947
>
70-
{(data) => (
71-
<Table
72-
fallback={<div class="py-8 text-center">No Data</div>}
73-
data={data()}
74-
headers={
75-
<Tr>
76-
<Th>Query</Th>
77-
<Th class="text-right">Frequency</Th>
78-
</Tr>
79-
}
80-
// headerz={["Query", "Count"]}
81-
class="my-2"
82-
>
83-
{(row) => (
84-
<Tr>
85-
<Td>
86-
<QueryStringDisplay>{row.query}</QueryStringDisplay>
87-
</Td>
88-
<Td class="text-right">{row.count}</Td>
89-
</Tr>
90-
)}
91-
</Table>
92-
)}
48+
<TanStackTable small pages={pages} perPage={10} table={table} />
9349
</Show>
94-
<div class="flex justify-end">
95-
<PaginationButtons size={18} pages={pages} />
96-
</div>
9750
</>
9851
);
9952
};

‎frontends/analytics/src/components/charts/LowConfidenceQueries.tsx‎

Lines changed: 68 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,55 @@
1-
import {
2-
AnalyticsParams,
3-
AnalyticsFilter,
4-
SearchQueryEvent,
5-
} from "shared/types";
6-
import { createQuery, useQueryClient } from "@tanstack/solid-query";
7-
import { createEffect, createSignal, on, Show, useContext } from "solid-js";
8-
import { getLowConfidenceQueries } from "../../api/analytics";
9-
import { DatasetContext } from "../../layouts/TopBarLayout";
10-
import { usePagination } from "../../hooks/usePagination";
11-
import { PaginationButtons } from "../PaginationButtons";
12-
import { FullScreenModal, Table, Td, Th, Tr } from "shared/ui";
1+
import { AnalyticsParams, SearchQueryEvent } from "shared/types";
2+
import { createSignal, Show } from "solid-js";
3+
import { FullScreenModal, SortableColumnDef, TanStackTable } from "shared/ui";
134
import { SearchQueryEventModal } from "../../pages/TrendExplorer";
145
import { IoOpenOutline } from "solid-icons/io";
156
import { Card } from "./Card";
16-
import { BiRegularExpand } from "solid-icons/bi";
177
import { useBetterNav } from "../../utils/useBetterNav";
18-
import { QueryStringDisplay } from "../QueryStringDisplay";
8+
import { useLowConfidenceQueries } from "../../hooks/data/useLowConfidenceQueries";
9+
import { createSolidTable, getCoreRowModel } from "@tanstack/solid-table";
1910

2011
interface LowConfidenceQueriesProps {
2112
params: AnalyticsParams;
2213
}
2314

24-
const parseThreshold = (text: string): number | undefined => {
25-
const num = parseFloat(text);
26-
if (isNaN(num)) {
27-
return undefined;
28-
}
29-
return num;
30-
};
15+
const columns: SortableColumnDef<SearchQueryEvent>[] = [
16+
{
17+
accessorKey: "query",
18+
header: "Query",
19+
},
20+
{
21+
accessorKey: "top_score",
22+
header: "Score",
23+
cell(props) {
24+
return props.getValue<number>().toFixed(5);
25+
},
26+
},
27+
];
3128

3229
export const LowConfidenceQueries = (props: LowConfidenceQueriesProps) => {
33-
const dataset = useContext(DatasetContext);
34-
35-
const pages = usePagination();
36-
const queryClient = useQueryClient();
37-
3830
const [thresholdText, setThresholdText] = createSignal("");
39-
40-
createEffect(
41-
on(
42-
() => [props.params, dataset().dataset.id, thresholdText()],
43-
() => {
44-
pages.resetMaxPageDiscovered();
45-
},
46-
),
47-
);
48-
49-
createEffect(() => {
50-
// Preload the next page
51-
const params = props.params;
52-
const datasetId = dataset().dataset.id;
53-
const curPage = pages.page();
54-
void queryClient.prefetchQuery({
55-
queryKey: [
56-
"low-confidence-queries",
57-
{
58-
params: params,
59-
page: curPage + 1,
60-
threshold: parseThreshold(thresholdText()) || 0,
61-
},
62-
],
63-
queryFn: async () => {
64-
const results = await getLowConfidenceQueries(
65-
params.filter,
66-
datasetId,
67-
curPage + 1,
68-
parseThreshold(thresholdText()),
69-
);
70-
if (results.length === 0) {
71-
pages.setMaxPageDiscovered(curPage);
72-
}
73-
return results;
74-
},
75-
});
31+
const [open, setOpen] = createSignal(false);
32+
const [current, setCurrent] = createSignal<SearchQueryEvent | null>(null);
33+
const navigate = useBetterNav();
34+
const { pages, lowConfidenceQueriesQuery } = useLowConfidenceQueries({
35+
params: props.params,
36+
thresholdText: thresholdText,
7637
});
7738

78-
const lowConfidenceQueriesQuery = createQuery(() => ({
79-
queryKey: [
80-
"low-confidence-queries",
81-
{
82-
params: props.params,
83-
page: pages.page(),
84-
threshold: parseThreshold(thresholdText()) || 0,
39+
const table = createSolidTable({
40+
get data() {
41+
return lowConfidenceQueriesQuery.data || [];
42+
},
43+
state: {
44+
pagination: {
45+
pageIndex: pages.page(),
46+
pageSize: 10,
8547
},
86-
],
87-
queryFn: () => {
88-
return getLowConfidenceQueries(
89-
props.params.filter,
90-
dataset().dataset.id,
91-
pages.page(),
92-
parseThreshold(thresholdText()),
93-
);
9448
},
95-
}));
49+
columns,
50+
getCoreRowModel: getCoreRowModel(),
51+
manualPagination: true,
52+
});
9653

9754
return (
9855
<Card
@@ -114,77 +71,39 @@ export const LowConfidenceQueries = (props: LowConfidenceQueriesProps) => {
11471
fallback={<div class="py-8">Loading...</div>}
11572
when={lowConfidenceQueriesQuery.data}
11673
>
117-
{(data) => (
118-
<Table
119-
fallback={<div class="py-8 text-center">No Data</div>}
120-
class="my-4"
121-
data={data()}
122-
headers={
123-
<Tr>
124-
<Th>Query</Th>
125-
<Th class="text-right">Score</Th>
126-
<Th class="text-right" />
127-
</Tr>
128-
}
129-
>
130-
{(row) => <QueryCard query={row} />}
131-
</Table>
132-
)}
74+
<Show when={current()}>
75+
{(data) => (
76+
<FullScreenModal
77+
title={data().query}
78+
show={open}
79+
setShow={setOpen}
80+
icon={
81+
<button
82+
type="button"
83+
class="hover:text-fuchsia-500"
84+
onClick={() => {
85+
navigate("/query/" + data().id);
86+
}}
87+
>
88+
<IoOpenOutline />
89+
</button>
90+
}
91+
>
92+
<SearchQueryEventModal searchEvent={data()} />
93+
</FullScreenModal>
94+
)}
95+
</Show>
96+
<TanStackTable
97+
small
98+
pages={pages}
99+
perPage={10}
100+
table={table}
101+
onRowClick={(row) => {
102+
setCurrent(row);
103+
setOpen(true);
104+
}}
105+
/>
133106
</Show>
134-
<div class="flex justify-end pt-2">
135-
<PaginationButtons size={18} pages={pages} />
136-
</div>
137107
</Card>
138108
);
139109
};
140-
141-
export interface QueryCardProps {
142-
query: SearchQueryEvent;
143-
filters?: AnalyticsFilter;
144-
}
145-
export const QueryCard = (props: QueryCardProps) => {
146-
const [open, setOpen] = createSignal(false);
147-
const navigate = useBetterNav();
148-
149-
return (
150-
<>
151-
<Tr
152-
onClick={() => {
153-
setOpen(true);
154-
}}
155-
style={{
156-
cursor: "pointer",
157-
}}
158-
class="cursor-pointer odd:bg-white even:bg-neutral-100 hover:underline hover:odd:bg-neutral-100/80 hover:even:bg-neutral-200/80"
159-
>
160-
<Td class="truncate">
161-
<QueryStringDisplay>{props.query.query}</QueryStringDisplay>
162-
</Td>
163-
<Td class="truncate text-right">{props.query.top_score.toFixed(5)}</Td>
164-
<Td>
165-
<span class="hover:text-fuchsia-500">
166-
<BiRegularExpand />
167-
</span>
168-
</Td>
169-
</Tr>
170-
<FullScreenModal
171-
title={props.query.query}
172-
show={open}
173-
setShow={setOpen}
174-
icon={
175-
<button
176-
type="button"
177-
class="hover:text-fuchsia-500"
178-
onClick={() => {
179-
navigate("/query/" + props.query.id);
180-
}}
181-
>
182-
<IoOpenOutline />
183-
</button>
184-
}
185-
>
186-
<SearchQueryEventModal searchEvent={props.query} />
187-
</FullScreenModal>
188-
</>
189-
);
190-
};

0 commit comments

Comments
 (0)