feat(models): add sorting and filtering

web/src/components/table/use-cases/models.tsx

@@ -1,8 +1,12 @@
 import { DataTable } from "@/src/components/table/data-table";
+import { DataTableToolbar } from "@/src/components/table/data-table-toolbar";
 import { type LangfuseColumnDef } from "@/src/components/table/types";
 import { Button } from "@/src/components/ui/button";
 import useColumnVisibility from "@/src/features/column-visibility/hooks/useColumnVisibility";
+import { useQueryFilterState } from "@/src/features/filters/hooks/useFilterState";
+import { useOrderByState } from "@/src/features/orderBy/hooks/useOrderByState";
 import { useHasAccess } from "@/src/features/rbac/utils/checkAccess";
+import { modelsTableCols } from "@/src/server/api/definitions/modelsTable";
 import { api } from "@/src/utils/api";
 import { usdFormatter } from "@/src/utils/numbers";
 import { type Prisma, type Model } from "@langfuse/shared/src/db";
@@ -47,20 +51,26 @@ export default function ModelTable({ projectId }: { projectId: string }) {
     pageIndex: withDefault(NumberParam, 0),
     pageSize: withDefault(NumberParam, 50),
   });
-
+  const [filterState, setFilterState] = useQueryFilterState([], "models");
+  const [orderByState, setOrderByState] = useOrderByState({
+    column: "modelName",
+    order: "DESC",
+  });
   const models = api.models.all.useQuery({
     page: paginationState.pageIndex,
     limit: paginationState.pageSize,
     projectId,
+    filter: filterState,
+    orderBy: orderByState,
   });
   const totalCount = models.data?.totalCount ?? 0;
 
   const columns: LangfuseColumnDef<ModelTableRow>[] = [
     {
       accessorKey: "maintainer",
       id: "maintainer",
-      enableColumnFilter: true,
       header: "Maintainer",
+      enableSorting: true,
     },
     {
       accessorKey: "modelName",
@@ -69,6 +79,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
       headerTooltip: {
         description: modelConfigDescriptions.modelName,
       },
+      enableSorting: true,
     },
     {
       accessorKey: "startDate",
@@ -77,6 +88,8 @@ export default function ModelTable({ projectId }: { projectId: string }) {
       headerTooltip: {
         description: modelConfigDescriptions.startDate,
       },
+      enableHiding: true,
+      enableSorting: true,
       cell: ({ row }) => {
         const value: Date | undefined = row.getValue("startDate");
 
@@ -94,6 +107,8 @@ export default function ModelTable({ projectId }: { projectId: string }) {
         description: modelConfigDescriptions.matchPattern,
       },
       header: "Match Pattern",
+      enableHiding: true,
+      enableSorting: true,
       cell: ({ row }) => {
         const value: string = row.getValue("matchPattern");
 
@@ -118,6 +133,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
       headerTooltip: {
         description: modelConfigDescriptions.inputPrice,
       },
+      enableSorting: true,
       cell: ({ row }) => {
         const value: Decimal | undefined = row.getValue("inputPrice");
 
@@ -144,6 +160,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
           </>
         );
       },
+      enableSorting: true,
       cell: ({ row }) => {
         const value: Decimal | undefined = row.getValue("outputPrice");
 
@@ -170,6 +187,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
       headerTooltip: {
         description: modelConfigDescriptions.totalPrice,
       },
+      enableSorting: true,
       cell: ({ row }) => {
         const value: Decimal | undefined = row.getValue("totalPrice");
 
@@ -189,6 +207,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
       headerTooltip: {
         description: modelConfigDescriptions.unit,
       },
+      enableSorting: true,
       enableHiding: true,
     },
     {
@@ -198,6 +217,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
       headerTooltip: {
         description: modelConfigDescriptions.tokenizerId,
       },
+      enableSorting: true,
       enableHiding: true,
     },
     {
@@ -235,7 +255,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
   ];
 
   const [columnVisibility, setColumnVisibility] =
-    useColumnVisibility<ModelTableRow>("scoresColumnVisibility", columns);
+    useColumnVisibility<ModelTableRow>("modelsColumnVisibility", columns);
 
   const convertToTableRow = (model: Model): ModelTableRow => {
     return {
@@ -257,6 +277,14 @@ export default function ModelTable({ projectId }: { projectId: string }) {
 
   return (
     <div>
+      <DataTableToolbar
+        columns={columns}
+        filterColumnDefinition={modelsTableCols}
+        filterState={filterState}
+        setFilterState={setFilterState}
+        columnVisibility={columnVisibility}
+        setColumnVisibility={setColumnVisibility}
+      />
       <DataTable
         columns={columns}
         data={
@@ -279,6 +307,8 @@ export default function ModelTable({ projectId }: { projectId: string }) {
           onChange: setPaginationState,
           state: paginationState,
         }}
+        orderBy={orderByState}
+        setOrderBy={setOrderByState}
         columnVisibility={columnVisibility}
         onColumnVisibilityChange={setColumnVisibility}
       />

web/src/features/filters/components/filter-builder.tsx

@@ -368,11 +368,20 @@ function FilterBuilderForm({
                         <SelectValue placeholder="" />
                       </SelectTrigger>
                       <SelectContent>
-                        {["true", "false"].map((option) => (
-                          <SelectItem key={option} value={option}>
-                            {option}
-                          </SelectItem>
-                        ))}
+                        {filter.column === "Maintainer"
+                          ? ["User", "Langfuse"].map((option) => (
+                              <SelectItem
+                                key={option}
+                                value={option === "User" ? "true" : "false"}
+                              >
+                                {option}
+                              </SelectItem>
+                            ))
+                          : ["true", "false"].map((option) => (
+                              <SelectItem key={option} value={option}>
+                                {option}
+                              </SelectItem>
+                            ))}
                       </SelectContent>
                     </Select>
                   ) : (

web/src/features/filters/hooks/useFilterState.ts

@@ -1,4 +1,5 @@
 import { type FilterState, type TableName } from "@/src/features/filters/types";
+import { modelsTableCols } from "@/src/server/api/definitions/modelsTable";
 import { observationsTableCols } from "@/src/server/api/definitions/observationsTable";
 import { scoresTableCols } from "@/src/server/api/definitions/scoresTable";
 import { sessionsViewCols } from "@/src/server/api/definitions/sessionsView";
@@ -102,6 +103,7 @@ const tableCols = {
   traces: tracesTableCols,
   sessions: sessionsViewCols,
   scores: scoresTableCols,
+  models: modelsTableCols,
   dashboard: [{ id: "traceName", name: "traceName" }],
 };
 

web/src/features/filters/types.ts

@@ -29,4 +29,5 @@ export type TableName =
   | "generations"
   | "sessions"
   | "scores"
+  | "models"
   | "dashboard";

web/src/server/api/definitions/modelsTable.ts

@@ -0,0 +1,53 @@
+import { type ColumnDefinition } from "@/src/server/api/interfaces/tableDefinition";
+
+export const modelsTableCols: ColumnDefinition[] = [
+  {
+    name: "Maintainer",
+    id: "maintainer",
+    type: "boolean",
+    internal: '(m."project_id" IS NOT NULL)',
+  },
+  {
+    name: "Model Name",
+    id: "modelName",
+    type: "string",
+    internal: 'm."model_name"',
+  },
+  {
+    name: "Match Pattern",
+    id: "matchPattern",
+    type: "string",
+    internal: 'm."match_pattern"',
+  },
+  {
+    name: "Start Date",
+    id: "startDate",
+    type: "datetime",
+    internal: 'm."start_date"',
+  },
+  {
+    name: "Input Price",
+    id: "inputPrice",
+    type: "number",
+    internal: 'm."input_price"',
+  },
+  {
+    name: "Output Price",
+    id: "outputPrice",
+    type: "number",
+    internal: 'm."output_price"',
+  },
+  {
+    name: "Total Price",
+    id: "totalPrice",
+    type: "number",
+    internal: 'm."total_price"',
+  },
+  { name: "Unit", id: "unit", type: "string", internal: 'm."unit"' },
+  {
+    name: "Tokenizer",
+    id: "tokenizerId",
+    type: "string",
+    internal: 'm."tokenizer_id"',
+  },
+];

web/src/server/api/interfaces/tableDefinition.ts

@@ -41,6 +41,7 @@ export const tableNames = [
   "traces_metrics",
   "traces_parent_observation_scores",
   "sessions",
+  "models",
 ] as const;
 
 export type TableNames = (typeof tableNames)[number];

web/src/server/api/routers/models.ts

@@ -7,45 +7,73 @@ import {
   protectedProjectProcedure,
 } from "@/src/server/api/trpc";
 import { paginationZod } from "@/src/utils/zod";
+import { type Model, Prisma } from "@langfuse/shared/src/db";
 import { TRPCError } from "@trpc/server";
 import { auditLog } from "@/src/features/audit-logs/auditLog";
-import { Prisma } from "@langfuse/shared/src/db";
+import { singleFilter } from "@/src/server/api/interfaces/filters";
+import { tableColumnsToSqlFilterAndPrefix } from "@/src/features/filters/server/filterToPrisma";
+import { modelsTableCols } from "@/src/server/api/definitions/modelsTable";
+import { orderBy } from "@/src/server/api/interfaces/orderBy";
+import { orderByToPrismaSql } from "@/src/features/orderBy/server/orderByToPrisma";
 
 const ModelAllOptions = z.object({
   projectId: z.string(),
+  filter: z.array(singleFilter),
+  orderBy: orderBy,
   ...paginationZod,
 });
 
 export const modelRouter = createTRPCRouter({
   all: protectedProjectProcedure
     .input(ModelAllOptions)
     .query(async ({ input, ctx }) => {
-      const models = await ctx.prisma.model.findMany({
-        where: {
-          OR: [{ projectId: input.projectId }, { projectId: null }],
-        },
-        skip: input.page * input.limit,
-        orderBy: [
-          { modelName: "asc" },
-          { unit: "asc" },
-          {
-            startDate: {
-              sort: "desc",
-              nulls: "last",
-            },
-          },
-        ],
-        take: input.limit,
-      });
+      const filterCondition = tableColumnsToSqlFilterAndPrefix(
+        input.filter,
+        modelsTableCols,
+        "models",
+      );
 
-      const totalAmount = await ctx.prisma.model.count({
-        where: {
-          OR: [{ projectId: input.projectId }, { projectId: null }],
-        },
-      });
+      const orderByCondition = orderByToPrismaSql(
+        input.orderBy,
+        modelsTableCols,
+      );
+
+      const models = await ctx.prisma.$queryRaw<Array<Model>>(
+        generateModelsQuery(
+          Prisma.sql` 
+          m.id,
+          m.project_id as "projectId",
+          m.model_name as "modelName",
+          m.match_pattern as "matchPattern",
+          m.start_date as "startDate",
+          m.input_price as "inputPrice",
+          m.output_price as "outputPrice",
+          m.total_price as "totalPrice",
+          m.unit,
+          m.tokenizer_id as "tokenizerId"`,
+          input.projectId,
+          filterCondition,
+          orderByCondition,
+          input.limit,
+          input.page,
+        ),
+      );
+      const totalAmount = await ctx.prisma.$queryRaw<
+        Array<{ totalCount: bigint }>
+      >(
+        generateModelsQuery(
+          Prisma.sql` count(*) AS "totalCount"`,
+          input.projectId,
+          filterCondition,
+          Prisma.empty,
+          1, // limit
+          0, // page
+        ),
+      );
       return {
         models,
-        totalCount: totalAmount,
+        totalCount:
+          totalAmount.length > 0 ? Number(totalAmount[0]?.totalCount) : 0,
       };
     }),
   modelNames: protectedProjectProcedure
@@ -158,3 +186,23 @@ export const modelRouter = createTRPCRouter({
       return createdModel;
     }),
 });
+
+const generateModelsQuery = (
+  select: Prisma.Sql,
+  projectId: string,
+  filterCondition: Prisma.Sql,
+  orderCondition: Prisma.Sql,
+  limit: number,
+  page: number,
+) => {
+  return Prisma.sql`
+  SELECT
+   ${select}
+  FROM models m
+  WHERE (m.project_id = ${projectId} OR m.project_id IS NULL)
+  ${filterCondition}
+  ${orderCondition}
+  LIMIT ${limit}
+  OFFSET ${page * limit}
+`;
+};