ui fixes

studio/src/components/analytics/constructAnalyticsTableQueryState.ts

@@ -17,7 +17,7 @@ export const createFilterState = ({
 }) => {
   const filterState = [];
 
-  if (operationName) {
+  if (operationName !== undefined) {
     filterState.push({
       id: "operationName",
       value:

studio/src/components/analytics/field-usage.tsx

@@ -10,6 +10,14 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import useWindowSize from "@/hooks/use-window-size";
 import { formatMetric } from "@/lib/format-metric";
 import { createDateRange, useChartData } from "@/lib/insights-helpers";
@@ -201,35 +209,48 @@ export const FieldUsage = ({
                 </AccordionTrigger>
                 <AccordionContent className="mt-2">
                   <div className="flex flex-col gap-y-2">
-                    {client.operations.map((op) => {
-                      return (
-                        <div className="flex items-center" key={op.latestHash}>
-                          <span className="text-muted-foreground">
-                            {op.latestHash.slice(0, 6)}
-                          </span>
-                          <Link
-                            href={{
-                              pathname: `/[organizationSlug]/graph/[slug]/analytics/traces`,
-                              query: {
-                                organizationSlug: router.query.organizationSlug,
-                                slug: router.query.slug,
-                                filterState: createFilterState({
-                                  operationName:
-                                    op.name === "" ? "unknown" : op.name,
-                                }),
-                                dateRange: createDateRange(Number(range)),
-                              },
-                            }}
-                            className="ml-2 text-primary"
-                          >
-                            {op.name}
-                          </Link>
-                          <Badge variant="secondary" className="ml-auto mr-8">
-                            {op.count}
-                          </Badge>
-                        </div>
-                      );
-                    })}
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead className="w-24">Hash</TableHead>
+                          <TableHead>Operation Name</TableHead>
+                          <TableHead className="w-24 text-center">
+                            Requests
+                          </TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {client.operations.map((op) => {
+                          return (
+                            <TableRow key={op.latestHash}>
+                              <TableCell>{op.latestHash.slice(0, 6)}</TableCell>
+                              <TableCell>
+                                <Link
+                                  href={{
+                                    pathname: `/[organizationSlug]/graph/[slug]/analytics/traces`,
+                                    query: {
+                                      organizationSlug:
+                                        router.query.organizationSlug,
+                                      slug: router.query.slug,
+                                      filterState: createFilterState({
+                                        operationName: op.name,
+                                      }),
+                                      dateRange: createDateRange(Number(range)),
+                                    },
+                                  }}
+                                  className="text-primary"
+                                >
+                                  {op.name || "-"}
+                                </Link>
+                              </TableCell>
+                              <TableCell className="text-center">
+                                {op.count}
+                              </TableCell>
+                            </TableRow>
+                          );
+                        })}
+                      </TableBody>
+                    </Table>
                   </div>
                 </AccordionContent>
               </AccordionItem>

studio/src/pages/[organizationSlug]/graph/[slug]/analytics/index.tsx

@@ -407,14 +407,14 @@ const TopList: React.FC<{
         data={items.map((row) => ({
           ...row,
           value: Number.parseFloat(row.value ?? "0"),
-          name: row.name === "" ? "unknown" : row.name,
+          name: row.name === "" ? "-" : row.name,
           href: {
             pathname: `${router.pathname}/traces`,
             query: {
               organizationSlug: router.query.organizationSlug,
               slug: router.query.slug,
               filterState: createFilterState({
-                operationName: row.name === "" ? "unknown" : row.name,
+                operationName: row.name,
               }),
               dateRange: createDateRange(range),
               ...queryParams,

studio/src/pages/[organizationSlug]/graph/[slug]/schema/index.tsx

@@ -113,7 +113,13 @@ const Fields = (props: {
             <TableCell className="align-top font-semibold">
               <p className="my-2 flex flex-wrap items-center gap-x-1">
                 {props.category !== "unions" ? (
-                  <span>{field.name}</span>
+                  <button
+                    disabled={!hasUsage}
+                    onClick={() => openUsage(field.name)}
+                    className={cn(hasUsage && "hover:underline")}
+                  >
+                    {field.name}
+                  </button>
                 ) : (
                   <TypeLink ast={props.ast} name={field.name} />
                 )}
@@ -304,6 +310,7 @@ const SearchType = ({
                       }}
                       key={t.name}
                       value={`${category}-${i}-${t}`}
+                      className="subpixel-antialiased"
                     >
                       {t.name}
                     </CommandItem>
@@ -337,12 +344,12 @@ const Type = (props: {
           )}
           {props.interfaces &&
             props.interfaces.map((t, index) => (
-              <>
-                <TypeLink key={index} ast={props.ast} name={t} isHeading />
+              <div key={index} className="flex items-center gap-x-2">
+                <TypeLink ast={props.ast} name={t} isHeading />
                 {index !== props.interfaces!.length - 1 && (
                   <p className="font-normal text-muted-foreground">&</p>
                 )}
-              </>
+              </div>
             ))}
         </div>
         <Badge className="w-max">{props.category}</Badge>
@@ -464,7 +471,7 @@ const SchemaExplorerPage: NextPageWithLayout = () => {
       >
         {isLoading && <Loader fullscreen />}
         {!isLoading &&
-          (error || data?.response?.code !== EnumStatusCode.OK) && (
+          (error || data?.response?.code !== EnumStatusCode.OK || !ast) && (
             <EmptyState
               icon={<ExclamationTriangleIcon />}
               title="Could not retrieve schema"
@@ -476,13 +483,6 @@ const SchemaExplorerPage: NextPageWithLayout = () => {
               actions={<Button onClick={() => refetch()}>Retry</Button>}
             />
           )}
-        {!isLoading && !ast && (
-          <EmptyState
-            icon={<ExclamationTriangleIcon />}
-            title="Could not retrieve schema"
-            description="The schema might be invalid or does not exist"
-          />
-        )}
         {ast && <TypeWrapper ast={ast} />}
         <FieldUsageSheet />
       </TitleLayout>
@@ -503,13 +503,14 @@ const Toolbar = ({ ast }: { ast: GraphQLSchema | null }) => {
 
   return (
     <SchemaToolbar tab="explorer">
+      <div className="hidden md:ml-auto md:block" />
       {ast && (
         <>
           <SearchType ast={ast} open={open} setOpen={setOpen} />
           <Button
             onClick={() => setOpen(true)}
             variant="outline"
-            className="gap-x-2 text-muted-foreground shadow-none md:ml-auto"
+            className="gap-x-2 text-muted-foreground shadow-none"
           >
             <MagnifyingGlassIcon />
             Search{" "}