devflowinc · skeptrunedev · Aug 26, 2024 · Aug 19, 2024
diff --git a/frontends/analytics/src/components/QueryStringDisplay.tsx b/frontends/analytics/src/components/QueryStringDisplay.tsx
@@ -0,0 +1,116 @@
+import { BsArrowsCollapse } from "solid-icons/bs";
+import { cva, VariantProps } from "cva";
+import { createMemo, createSignal, For, Show, splitProps } from "solid-js";
+import { z } from "zod";
+import { cn } from "shared/utils";
+
+interface QueryStringDisplayProps extends VariantProps<typeof queryStyles> {
+  children: string;
+}
+
+const queryStyles = cva([""], {
+  variants: {
+    size: {
+      default: "",
+      large: "text-xl",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+const weight = cva([""], {
+  variants: {
+    size: {
+      default: "",
+      large: "",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+const multiQuerySchema = z.array(
+  z.object({
+    query: z.string(),
+    weight: z.number(),
+  }),
+);
+
+export const QueryStringDisplay = (props: QueryStringDisplayProps) => {
+  const [children, others] = splitProps(props, ["children"]);
+
+  const [isOpen, setIsOpen] = createSignal(false);
+  const element = createMemo(() => {
+    const query = children.children;
+    if (query.startsWith("[{")) {
+      // Attempt to parse as JSON array
+      try {
+        const object = JSON.parse(query) as unknown;
+        const parseResult = multiQuerySchema.safeParse(object);
+        if (parseResult.success) {
+          if (parseResult.data.length === 1) {
+            return parseResult?.data?.at(0)?.query;
+          }
+          return (
+            <Show
+              fallback={
+                <div class="flex items-baseline gap-2">
+                  <div class={queryStyles(others)}>
+                    {parseResult.data.at(0)?.query}
+                  </div>
+                  <button
+                    onClick={() => setIsOpen(true)}
+                    class={cn(
+                      "text-sm opacity-70 hover:underline",
+                      weight(others),
+                    )}
+                  >
+                    +{parseResult.data.length - 1} more..
+                  </button>
+                </div>
+              }
+              when={isOpen()}
+            >
+              <div class="flex items-center gap-2">
+                <div>
+                  <For each={parseResult.data}>
+                    {(query, index) => (
+                      <div class="flex items-baseline gap-2">
+                        <div>{query.query}</div>
+                        <div class="text-sm text-neutral-500">
+                          {query.weight.toFixed(2)}
+                        </div>
+                        <Show when={index() === 0}>
+                          <button
+                            onClick={() => setIsOpen(false)}
+                            class="relative top-[3px] cursor-pointer px-1 opacity-70"
+                          >
+                            <BsArrowsCollapse />
+                          </button>
+                        </Show>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </div>
+            </Show>
+          );
+        } else {
+          return query;
+        }
+      } catch {
+        return query;
+      }
+    }
+    return query;
+  });
+
+  return (
+    <div>
+      <div>{element()}</div>
+    </div>
+  );
+};
diff --git a/frontends/analytics/src/components/SingleQueryInfo.tsx b/frontends/analytics/src/components/SingleQueryInfo.tsx
@@ -9,6 +9,7 @@ import { OrgContext } from "../contexts/OrgContext";
 import { DatasetAndUsage, SearchQueryEvent } from "shared/types";
 import { z } from "zod";
 import { VsJson } from "solid-icons/vs";
+import { QueryStringDisplay } from "./QueryStringDisplay";
 
 interface SingleQueryProps {
   queryId: string;
@@ -40,7 +41,11 @@ export const SingleQuery = (props: SingleQueryProps) => {
 
     return (
       <div>
-        <div class="text-xl">"{props.data.query}"</div>
+        <div class="text-xl">
+          <QueryStringDisplay size="large">
+            {props.data.query}
+          </QueryStringDisplay>
+        </div>
         <div class="opacity-80">
           Searched on{" "}
           {format(

diff --git a/frontends/analytics/src/components/charts/HeadQueries.tsx b/frontends/analytics/src/components/charts/HeadQueries.tsx
@@ -6,6 +6,7 @@ import { DatasetContext } from "../../layouts/TopBarLayout";
 import { usePagination } from "../../hooks/usePagination";
 import { PaginationButtons } from "../PaginationButtons";
 import { Table, Td, Th, Tr } from "shared/ui";
+import { QueryStringDisplay } from "../QueryStringDisplay";
 
 interface HeadQueriesProps {
   params: { filter: AnalyticsFilter };
@@ -31,7 +32,10 @@ export const HeadQueries = (props: HeadQueriesProps) => {
     const datasetId = dataset().dataset.id;
     const curPage = pages.page();
     void queryClient.prefetchQuery({
-      queryKey: ["head-queries", { filter: params.filter, page: curPage + 1 }],
+      queryKey: [
+        "head-queries",
+        { filter: params.filter, page: curPage + 1, dataset: datasetId },
+      ],
       queryFn: async () => {
         const results = await getHeadQueries(
           params.filter,
@@ -78,7 +82,9 @@ export const HeadQueries = (props: HeadQueriesProps) => {
           >
             {(row) => (
               <Tr>
-                <Td>{row.query}</Td>
+                <Td>
+                  <QueryStringDisplay>{row.query}</QueryStringDisplay>
+                </Td>
                 <Td class="text-right">{row.count}</Td>
               </Tr>
             )}

diff --git a/frontends/analytics/src/components/charts/LowConfidenceQueries.tsx b/frontends/analytics/src/components/charts/LowConfidenceQueries.tsx
@@ -12,9 +12,10 @@ import { PaginationButtons } from "../PaginationButtons";
 import { FullScreenModal, Table, Td, Th, Tr } from "shared/ui";
 import { SearchQueryEventModal } from "../../pages/TrendExplorer";
 import { IoOpenOutline } from "solid-icons/io";
-import { OrgContext } from "../../contexts/OrgContext";
 import { ChartCard } from "./ChartCard";
 import { BiRegularExpand } from "solid-icons/bi";
+import { useBetterNav } from "../../utils/useBetterNav";
+import { QueryStringDisplay } from "../QueryStringDisplay";
 
 interface LowConfidenceQueriesProps {
   params: AnalyticsParams;
@@ -143,22 +144,7 @@ export interface QueryCardProps {
 }
 export const QueryCard = (props: QueryCardProps) => {
   const [open, setOpen] = createSignal(false);
-
-  const searchUiURL = import.meta.env.VITE_SEARCH_UI_URL as string;
-
-  const dataset = useContext(DatasetContext);
-  const organization = useContext(OrgContext);
-
-  const openSearchPlayground = (query: string) => {
-    const orgId = organization.selectedOrg().id;
-    const datasetId = dataset().dataset?.id;
-    let params = orgId ? `?organization=${orgId}` : "";
-    if (datasetId) params += `&dataset=${datasetId}`;
-    if (query) params += `&query=${query}`;
-    if (props.filters?.search_method)
-      params += `&searchType=${props.filters.search_method}`;
-    return params;
-  };
+  const navigate = useBetterNav();
 
   return (
     <>
@@ -171,7 +157,9 @@ export const QueryCard = (props: QueryCardProps) => {
         }}
         class="cursor-pointer odd:bg-white even:bg-neutral-100 hover:underline hover:odd:bg-neutral-100/80 hover:even:bg-neutral-200/80"
       >
-        <Td class="truncate">{props.query.query}</Td>
+        <Td class="truncate">
+          <QueryStringDisplay>{props.query.query}</QueryStringDisplay>
+        </Td>
         <Td class="truncate text-right">{props.query.top_score.toFixed(5)}</Td>
         <Td>
           <span class="hover:text-fuchsia-500">
@@ -184,14 +172,15 @@ export const QueryCard = (props: QueryCardProps) => {
         show={open}
         setShow={setOpen}
         icon={
-          <a
+          <button
             type="button"
             class="hover:text-fuchsia-500"
-            href={`${searchUiURL}${openSearchPlayground(props.query.query)}`}
-            target="_blank"
+            onClick={() => {
+              navigate("/query/" + props.query.id);
+            }}
           >
             <IoOpenOutline />
-          </a>
+          </button>
         }
       >
         <SearchQueryEventModal searchEvent={props.query} />

diff --git a/frontends/analytics/src/components/charts/NoResultQueries.tsx b/frontends/analytics/src/components/charts/NoResultQueries.tsx
@@ -8,6 +8,7 @@ import { FullScreenModal, Table, Td, Th, Tr } from "shared/ui";
 import { SearchQueryEventModal } from "../../pages/TrendExplorer";
 import { getNoResultQueries } from "../../api/analytics";
 import { BiRegularExpand } from "solid-icons/bi";
+import { QueryStringDisplay } from "../QueryStringDisplay";
 
 interface NoResultQueriesProps {
   params: {
@@ -123,7 +124,9 @@ const QueryCard = (props: QueryCardProps) => {
         }}
         class="cursor-pointer odd:bg-white even:bg-neutral-100 hover:underline hover:odd:bg-neutral-100/80 hover:even:bg-neutral-200/80"
       >
-        <Td class="truncate">{props.query.query}</Td>
+        <Td class="truncate">
+          <QueryStringDisplay>{props.query.query}</QueryStringDisplay>
+        </Td>
         <Td class="w-4 truncate text-right">
           <span class="hover:text-fuchsia-500">
             <BiRegularExpand />

diff --git a/frontends/analytics/src/pages/TrendExplorer.tsx b/frontends/analytics/src/pages/TrendExplorer.tsx
@@ -6,6 +6,7 @@ import { SearchClusterTopics, SearchQueryEvent } from "shared/types";
 import { toTitleCase } from "../utils/titleCase";
 import { FullScreenModal, Table, Tr } from "shared/ui";
 import { parseCustomDateString } from "../utils/formatDate";
+import { QueryStringDisplay } from "../components/QueryStringDisplay";
 
 const WIPWarning = () => {
   return (
@@ -101,7 +102,13 @@ const TopicRow = (props: TopicRowProps) => {
         <div>Searches</div>
         <Show when={selectedTopicQuery.data}>
           {(searches) => (
-            <For each={searches()}>{(search) => <div>{search.query}</div>}</For>
+            <For each={searches()}>
+              {(search) => (
+                <div>
+                  <QueryStringDisplay>{search.query}</QueryStringDisplay>
+                </div>
+              )}
+            </For>
           )}
         </Show>
       </FullScreenModal>

diff --git a/frontends/analytics/src/pages/tablePages/SearchTablePage.tsx b/frontends/analytics/src/pages/tablePages/SearchTablePage.tsx
@@ -21,6 +21,7 @@ import { PaginationButtons } from "../../components/PaginationButtons";
 import { parseCustomDateString } from "../../utils/formatDate";
 import { AiFillCaretDown } from "solid-icons/ai";
 import { useBetterNav } from "../../utils/useBetterNav";
+import { QueryStringDisplay } from "../../components/QueryStringDisplay";
 
 export const SearchTablePage = () => {
   const queryClient = useQueryClient();
@@ -200,7 +201,9 @@ const SearchRow = (props: SearchRowProps) => {
         navigate(`/query/${props.event.id}`);
       }}
     >
-      <Td class="truncate">{props.event.query}</Td>
+      <Td class="truncate">
+        <QueryStringDisplay>{props.event.query}</QueryStringDisplay>
+      </Td>
       <Td>
         {format(parseCustomDateString(props.event.created_at), "M/d/yy h:mm a")}
       </Td>