feat: add column visibility and sizing

.changeset/tame-dryers-scream.md

@@ -0,0 +1,7 @@
+---
+"pinorama-studio": minor
+"pinorama-presets": patch
+"pinorama-types": patch
+---
+
+add column visibility and sizing

packages/pinorama-presets/src/presets/fastify.mts

@@ -34,19 +34,19 @@ export const fastify = createPreset(
       hostname: "string"
     },
     columns: {
-      time: true, // pino
-      level: true, // pino
-      msg: true, // pino
-      reqId: true,
-      "req.method": true,
-      "req.url": true,
-      "res.statusCode": true,
-      "req.hostname": false,
-      "req.remoteAddress": false,
-      "req.remotePort": false,
-      responseTime: false,
-      pid: false, // pino
-      hostname: false // pino
+      time: { visible: true, size: 150 }, // pino
+      level: { visible: true, size: 70 }, // pino
+      msg: { visible: true, size: 380 }, // pino
+      reqId: { visible: true, size: 80 },
+      "req.method": { visible: true, size: 80 },
+      "req.url": { visible: true, size: 100 },
+      "res.statusCode": { visible: true, size: 70 },
+      "req.hostname": { visible: false, size: 150 },
+      "req.remoteAddress": { visible: false, size: 100 },
+      "req.remotePort": { visible: false, size: 80 },
+      responseTime: { visible: false, size: 150 },
+      pid: { visible: false, size: 70 }, // pino
+      hostname: { visible: false, size: 150 } // pino
     },
     labels: {
       level: [
@@ -101,6 +101,18 @@ export const fastify = createPreset(
           50: { color: "var(--color-red-500)" },
           60: { color: "var(--color-red-500)" }
         }
+      ],
+      "req.method": [
+        {},
+        {
+          GET: { color: "var(--color-blue-500)" },
+          POST: { color: "var(--color-green-500)" },
+          PUT: { color: "var(--color-yellow-500)" },
+          PATCH: { color: "var(--color-orange-500)" },
+          DELETE: { color: "var(--color-red-500)" },
+          HEAD: { color: "var(--color-purple-500)" },
+          OPTIONS: { color: "var(--color-cyan-500)" }
+        }
       ]
     }
   }

packages/pinorama-presets/src/presets/pino.mts

@@ -16,11 +16,11 @@ export const pino = createPreset(
       hostname: "string"
     },
     columns: {
-      time: true,
-      level: true,
-      msg: true,
-      pid: false,
-      hostname: false
+      time: { visible: true, size: 150 },
+      level: { visible: true, size: 70 },
+      msg: { visible: true, size: 400 },
+      pid: { visible: false, size: 70 },
+      hostname: { visible: false, size: 150 }
     },
     labels: {
       time: "Time",

packages/pinorama-studio/src/features/log-explorer/components/log-viewer/index.tsx

@@ -32,6 +32,8 @@ type LogViewerProps = {
   onToggleLiveButtonClick: (live: boolean) => void
 }
 
+const DEFAULT_COLUMN_SIZE = 150
+
 export function LogViewer(props: LogViewerProps) {
   const intl = useIntl()
 
@@ -53,18 +55,23 @@ export function LogViewer(props: LogViewerProps) {
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
 
-  const columns = useMemo<ColumnDef<unknown>[]>(() => {
+  const columnsDefinition = useMemo<ColumnDef<unknown>[]>(() => {
     const columns = introspection?.columns
     if (!columns) return []
 
     return Object.keys(columns).map((columnName) => {
       const field = createField(columnName, introspection)
       return {
         id: columnName,
-        accessorKey: columnName.split(".")[0] || columnName,
+        // accessorKey: columnName.split(".")[0] || columnName,
+        accessorKey: columnName,
         header: () => field.getDisplayLabel(),
         cell: (info) => {
           const value = info.getValue() as string | number
+          if (!value) {
+            return <div className="text-muted-foreground/60">—</div>
+          }
+
           const formattedValue = field.format(value)
           const className = field.getClassName(value)
           return (
@@ -81,7 +88,7 @@ export function LogViewer(props: LogViewerProps) {
 
   const table = useReactTable({
     data: logs,
-    columns,
+    columns: columnsDefinition,
     enableColumnResizing: true,
     columnResizeMode: "onChange",
     getCoreRowModel: getCoreRowModel(),
@@ -91,6 +98,22 @@ export function LogViewer(props: LogViewerProps) {
     enableRowSelection: true
   })
 
+  useEffect(() => {
+    const columns = introspection?.columns
+    if (!columns) return
+
+    const visibility: Record<string, boolean> = {}
+    const sizing: Record<string, number> = {}
+
+    for (const [name, config] of Object.entries(columns)) {
+      visibility[name] = config?.visible ?? false
+      sizing[name] = config?.size ?? DEFAULT_COLUMN_SIZE
+    }
+
+    table.setColumnVisibility(visibility)
+    table.setColumnSizing(sizing)
+  }, [introspection, table.setColumnVisibility, table.setColumnSizing])
+
   const hasFilters =
     props.searchText.length > 0 && Object.keys(props.filters).length > 0
 

packages/pinorama-studio/src/lib/introspection.ts

@@ -1,4 +1,5 @@
 import type { AnySchema } from "@orama/orama"
+import { kebabCase } from "change-case"
 import { format } from "date-fns"
 import type { PinoramaIntrospection } from "pinorama-types"
 
@@ -31,15 +32,15 @@ export function createField(
 
       if (!style) return css
 
-      const className = `pinorama-${fieldName}`
+      const className = `pinorama-${kebabCase(fieldName)}`
       css.push(className)
 
       if (this.hasValueStyle()) {
         const [, valueStyles] = style as any
 
         const valueStyle = valueStyles[value]
         if (valueStyle) {
-          css.push(`${className}-${value}`)
+          css.push(`${className}-${value.toString().toLowerCase()}`)
         }
       }
 

packages/pinorama-types/src/index.ts

@@ -17,7 +17,7 @@ export type PinoramaIntrospection<T extends AnySchema> = {
     [K in FlattenedKeys<SafeFlatten<T>>]: IntrospectionFacet
   }>
   columns: Partial<{
-    [K in FlattenedKeys<SafeFlatten<T>>]: boolean
+    [K in FlattenedKeys<SafeFlatten<T>>]: IntrospectionColumn
   }>
   labels?: Partial<{
     [K in FlattenedKeys<SafeFlatten<T>>]: IntrospectionLabel
@@ -32,6 +32,11 @@ export type PinoramaIntrospection<T extends AnySchema> = {
 
 export type IntrospectionFacet = "enum" | "string"
 
+export type IntrospectionColumn = {
+  visible: boolean
+  size?: number
+}
+
 export type IntrospectionLabel =
   | string
   | [string, Record<number | string, string>]