refactor(studio): code improvements

packages/pinorama-client/package.json

@@ -21,9 +21,7 @@
     }
   },
   "types": "./dist/types/pinorama-client.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "clean": "rimraf dist node_modules",
     "build": "rollup --config"

packages/pinorama-presets/package.json

@@ -4,9 +4,7 @@
   "type": "module",
   "types": "./dist/presets/index.d.mts",
   "exports": "./dist/presets/index.mjs",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "clean": "rimraf dist node_modules",
     "build": "tsc"

packages/pinorama-server/package.json

@@ -5,9 +5,7 @@
   "type": "module",
   "types": "./dist/index.d.mts",
   "exports": "./dist/index.mjs",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "clean": "rimraf dist node_modules",
     "build": "tsc"

packages/pinorama-server/src/index.mts

@@ -4,7 +4,7 @@ import { restoreFromFile } from "@orama/plugin-data-persistence/server"
 import Fastify from "fastify"
 import fp from "fastify-plugin"
 
-import { fastify as defaultPreset } from "pinorama-presets"
+import { pino as defaultPreset } from "pinorama-presets"
 import * as plugins from "./plugins/index.mjs"
 import * as routes from "./routes/index.mjs"
 import { withPinoramaMetadataSchema } from "./utils/metadata.mjs"

packages/pinorama-studio/package.json

@@ -6,10 +6,7 @@
   "bin": {
     "pinorama": "./cli.mjs"
   },
-  "files": [
-    "dist",
-    "cli.mjs"
-  ],
+  "files": ["dist", "cli.mjs"],
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

packages/pinorama-studio/src/components/search-input/search-input.tsx

@@ -1,4 +1,5 @@
 import { SearchIcon, XIcon } from "lucide-react"
+import { forwardRef } from "react"
 import { Button } from "../ui/button"
 import { Input } from "../ui/input"
 
@@ -8,11 +9,15 @@ type SearchInputProps = {
   placeholder: string
 }
 
-export function SearchInput(props: SearchInputProps) {
+export const SearchInput = forwardRef(function SearchInput(
+  props: SearchInputProps,
+  ref: React.Ref<HTMLInputElement>
+) {
   return (
     <div className="relative flex items-center w-full">
       <SearchIcon className="h-4 w-4 absolute left-3 text-muted-foreground" />
       <Input
+        ref={ref}
         type="text"
         placeholder={props.placeholder}
         className="pl-9"
@@ -32,4 +37,4 @@ export function SearchInput(props: SearchInputProps) {
       ) : null}
     </div>
   )
-}
+})

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

@@ -27,12 +27,13 @@ export function LogExplorer() {
   const intl = useIntl()
   const appConfig = useAppConfig()
 
-  const { isConnected, toggleConnection } = usePinoramaConnection()
+  const { isConnected, toggleConnection, introspection } =
+    usePinoramaConnection()
 
   const [liveMode, setLiveMode] = useState<boolean | null>(null)
   const [filters, setFilters] = useState<SearchFilters>({})
   const [searchText, setSearchText] = useState<string>("")
-  const [rowSelection, setRowSelection] = useState()
+  const [selectedRow, setSelectedRow] = useState(null)
 
   const [detailsPanelCollapsed, setDetailsPanelCollapsed] = useState(true)
   const [filtersPanelCollapsed, setFiltersPanelCollapsed] = useState(true)
@@ -59,8 +60,8 @@ export function LogExplorer() {
 
   useEffect(() => {
     const panel = detailsPanelRef.current
-    rowSelection ? panel?.expand(PANEL_SIZES.details.base) : panel?.collapse()
-  }, [rowSelection])
+    selectedRow ? panel?.expand(PANEL_SIZES.details.base) : panel?.collapse()
+  }, [selectedRow])
 
   if (!isConnected) {
     return (
@@ -80,6 +81,10 @@ export function LogExplorer() {
     )
   }
 
+  if (!introspection) {
+    return null
+  }
+
   return (
     <ResizablePanelGroup direction="horizontal">
       {/* Filters */}
@@ -93,6 +98,7 @@ export function LogExplorer() {
         onExpand={() => setFiltersPanelCollapsed(false)}
       >
         <LogFilters
+          introspection={introspection}
           searchText={searchText}
           filters={filters}
           liveMode={isLiveModeEnabled}
@@ -107,11 +113,12 @@ export function LogExplorer() {
       {/* Viewer */}
       <ResizablePanel order={2} className="bg-muted/20">
         <LogViewer
+          introspection={introspection}
           searchText={searchText}
           filters={filters}
           liveMode={isLiveModeEnabled}
           onSearchTextChange={setSearchText}
-          onRowSelectionChange={setRowSelection}
+          onSelectedRowChange={setSelectedRow}
           onToggleFiltersButtonClick={toggleFiltersPanel}
           onClearFiltersButtonClick={clearFilters}
           onToggleLiveButtonClick={setLiveMode}
@@ -132,7 +139,7 @@ export function LogExplorer() {
         onCollapse={() => setDetailsPanelCollapsed(true)}
         onExpand={() => setDetailsPanelCollapsed(false)}
       >
-        <LogDetails data={rowSelection} />
+        <LogDetails data={selectedRow} />
       </ResizablePanel>
     </ResizablePanelGroup>
   )

packages/pinorama-studio/src/features/log-explorer/components/log-filters/components/facet-body.tsx

@@ -1,9 +1,11 @@
 import { FacetItem } from "./facet-item"
 
-import type { IntrospectionFacet } from "pinorama-types"
+import type { AnySchema } from "@orama/orama"
+import type { IntrospectionFacet, PinoramaIntrospection } from "pinorama-types"
 import type { FacetValue, SearchFilters } from "../types"
 
 type FacetBodyProps = {
+  introspection: PinoramaIntrospection<AnySchema>
   name: string
   type: IntrospectionFacet
   values: FacetValue[]
@@ -18,6 +20,7 @@ export function FacetBody(props: FacetBodyProps) {
         return (
           <FacetItem
             key={value}
+            introspection={props.introspection}
             name={props.name}
             type={props.type}
             value={value}

packages/pinorama-studio/src/features/log-explorer/components/log-filters/components/facet-header.tsx

@@ -1,10 +1,12 @@
 import { Button } from "@/components/ui/button"
-import { usePinoramaConnection } from "@/hooks"
 import { createField } from "@/lib/introspection"
+import type { AnySchema } from "@orama/orama"
 import { ChevronDown, ChevronRight, CircleX, LoaderIcon } from "lucide-react"
+import type { PinoramaIntrospection } from "pinorama-types"
 import type React from "react"
 
 type FacetHeaderProps = {
+  introspection: PinoramaIntrospection<AnySchema>
   name: string
   loading: boolean
   count: number
@@ -14,13 +16,7 @@ type FacetHeaderProps = {
 }
 
 export function FacetHeader(props: FacetHeaderProps) {
-  const { introspection } = usePinoramaConnection()
-
-  if (!introspection) {
-    return null
-  }
-
-  const field = createField(props.name, introspection)
+  const field = createField(props.name, props.introspection)
   const ChevronIcon = props.open ? ChevronDown : ChevronRight
 
   return (

packages/pinorama-studio/src/features/log-explorer/components/log-filters/components/facet-item.tsx

@@ -1,13 +1,14 @@
 import { Badge } from "@/components/ui/badge"
 import { Label } from "@/components/ui/label"
-import { usePinoramaConnection } from "@/hooks"
 import { createField } from "@/lib/introspection"
 import { FacetFactoryInput } from "./facet-factory-input"
 
-import type { IntrospectionFacet } from "pinorama-types"
+import type { AnySchema } from "@orama/orama"
+import type { IntrospectionFacet, PinoramaIntrospection } from "pinorama-types"
 import type { SearchFilters } from "../types"
 
 type FacetItemProps = {
+  introspection: PinoramaIntrospection<AnySchema>
   name: string
   type: IntrospectionFacet
   value: string | number
@@ -17,13 +18,7 @@ type FacetItemProps = {
 }
 
 export function FacetItem(props: FacetItemProps) {
-  const { introspection } = usePinoramaConnection()
-
-  if (!introspection) {
-    return null
-  }
-
-  const field = createField(props.name, introspection)
+  const field = createField(props.name, props.introspection)
 
   return (
     <div className="flex items-center space-x-3 h-[38px] px-3 border-b last:border-b-0 bg-muted/20">

packages/pinorama-studio/src/features/log-explorer/components/log-filters/components/facet.tsx

@@ -7,10 +7,12 @@ import { facetFilterOperationsFactory } from "../lib/operations"
 import { FacetBody } from "./facet-body"
 import { FacetHeader } from "./facet-header"
 
-import type { IntrospectionFacet } from "pinorama-types"
+import type { AnySchema } from "@orama/orama"
+import type { IntrospectionFacet, PinoramaIntrospection } from "pinorama-types"
 import type { FacetFilter, FacetValue, SearchFilters } from "../types"
 
 type FacetProps = {
+  introspection: PinoramaIntrospection<AnySchema>
   name: string
   type: IntrospectionFacet
   searchText: string
@@ -82,6 +84,7 @@ export function Facet(props: FacetProps) {
   return (
     <div>
       <FacetHeader
+        introspection={props.introspection}
         name={props.name}
         loading={fetchStatus === "fetching"}
         count={selelectedOptionCount}
@@ -99,6 +102,7 @@ export function Facet(props: FacetProps) {
           />
         ) : (
           <FacetBody
+            introspection={props.introspection}
             name={props.name}
             type={props.type}
             values={allValues}

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

@@ -1,43 +1,32 @@
 import { useMemo } from "react"
 
-import { usePinoramaConnection } from "@/hooks"
 import { Facet } from "./components/facet"
 
-import type { IntrospectionFacet } from "pinorama-types"
+import type { AnySchema } from "@orama/orama"
+import type { PinoramaIntrospection } from "pinorama-types"
+import { getFacetsConfig } from "./lib/utils"
 import type { SearchFilters } from "./types"
 
 type PinoramaFacetsProps = {
+  introspection: PinoramaIntrospection<AnySchema>
   searchText: string
   filters: SearchFilters
   liveMode: boolean
   onFiltersChange: (filters: SearchFilters) => void
 }
 
 export function LogFilters(props: PinoramaFacetsProps) {
-  const { introspection } = usePinoramaConnection()
-
-  const facets = useMemo(() => {
-    const facets = introspection?.facets
-    if (!facets) return []
-
-    return Object.keys(facets).map((fieldName) => {
-      return {
-        name: fieldName,
-        type: facets[fieldName] as IntrospectionFacet
-      }
-    })
-  }, [introspection])
-
-  if (!introspection) {
-    return null
-  }
+  const facetsConfig = useMemo(() => {
+    return getFacetsConfig(props.introspection)
+  }, [props.introspection])
 
   return (
     <div className="flex flex-col h-full p-3 overflow-auto">
-      {facets.map((facet) => {
+      {facetsConfig.definition.map((facet) => {
         return (
           <Facet
             key={facet.name}
+            introspection={props.introspection}
             name={facet.name}
             type={facet.type}
             searchText={props.searchText}

packages/pinorama-studio/src/features/log-explorer/components/log-filters/lib/utils.tsx

@@ -0,0 +1,20 @@
+import type { AnySchema } from "@orama/orama"
+import type { IntrospectionFacet, PinoramaIntrospection } from "pinorama-types"
+
+export const getFacetsConfig = (
+  introspection: PinoramaIntrospection<AnySchema>
+) => {
+  const definition: { name: string; type: IntrospectionFacet }[] = []
+
+  const facets = introspection.facets
+  if (!facets) return { definition }
+
+  for (const [name, config] of Object.entries(facets)) {
+    definition.push({
+      name,
+      type: config as IntrospectionFacet
+    })
+  }
+
+  return { definition }
+}

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

@@ -5,10 +5,13 @@ import { ToggleColumnsButton } from "./toggle-columns-button"
 import { ToggleFiltersButton } from "./toggle-filters-button"
 import { ToggleLiveButton } from "./toggle-live-button"
 
+import type { AnySchema } from "@orama/orama"
 import type { Table } from "@tanstack/react-table"
+import type { PinoramaIntrospection } from "pinorama-types"
 import { RefreshDataButton } from "./refresh-data-button"
 
 type LogViewerHeaderProps = {
+  introspection: PinoramaIntrospection<AnySchema>
   table: Table<unknown>
   searchText: string
   showClearFiltersButton: boolean
@@ -45,7 +48,10 @@ export function LogViewerHeader(props: LogViewerHeaderProps) {
       {props.showClearFiltersButton ? (
         <ClearFiltersButton onClick={props.onClearFiltersButtonClick} />
       ) : null}
-      <ToggleColumnsButton table={props.table} />
+      <ToggleColumnsButton
+        table={props.table}
+        introspection={props.introspection}
+      />
     </div>
   )
 }

packages/pinorama-studio/src/features/log-explorer/components/log-viewer/components/header/toggle-columns-button.tsx

@@ -8,7 +8,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu"
-import { usePinoramaConnection } from "@/hooks"
 import { createField } from "@/lib/introspection"
 import type { AnySchema } from "@orama/orama"
 import type { Table } from "@tanstack/react-table"
@@ -17,12 +16,11 @@ import type { PinoramaIntrospection } from "pinorama-types"
 import { FormattedMessage, useIntl } from "react-intl"
 
 type ColumnsVisibilityButtonProps = {
+  introspection: PinoramaIntrospection<AnySchema>
   table: Table<unknown>
 }
 
 export function ToggleColumnsButton(props: ColumnsVisibilityButtonProps) {
-  const { introspection } = usePinoramaConnection()
-
   const intl = useIntl()
   const label = intl.formatMessage({ id: "logExplorer.columnsVisibility" })
   return (
@@ -44,10 +42,7 @@ export function ToggleColumnsButton(props: ColumnsVisibilityButtonProps) {
               typeof column.accessorFn !== "undefined" && column.getCanHide()
           )
           .map((column) => {
-            const field = createField(
-              column.id,
-              introspection as PinoramaIntrospection<AnySchema>
-            )
+            const field = createField(column.id, props.introspection)
             return (
               <DropdownMenuCheckboxItem
                 key={column.id}