@@ -85,7 +85,7 @@ export const ListItems = ({
setSelectedListItem({ key })
}}
className={cn(
- "h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
+ "h-9 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
)}
>
{
+ const { data, isLoading } = useFetchSearchIndex(dataKey)
+
+ const content = data ? JSON.stringify(data, null, 2) : undefined
+
+ return (
+
+
+
+
+ {isLoading ? (
+
+ ) : data === null || data === undefined ? (
+
+ No data found
+
+ ) : (
+
+
+ {JSON.stringify(data, null, 2)}
+
+
+ )}
+
+
- {label}
+
+ {label}
{children}
)
diff --git a/src/components/databrowser/components/display/index.tsx b/src/components/databrowser/components/display/index.tsx
index 8a2890e..1a24436 100644
--- a/src/components/databrowser/components/display/index.tsx
+++ b/src/components/databrowser/components/display/index.tsx
@@ -1,9 +1,11 @@
/* eslint-disable unicorn/no-negated-condition */
+import { useTab } from "@/tab-provider"
+
import { useKeys, useKeyType } from "../../hooks/use-keys"
import { ListDisplay } from "./display-list"
+import { SearchDisplay } from "./display-search"
import { EditorDisplay } from "./display-simple"
-import { useTab } from "@/tab-provider"
export const DataDisplay = () => {
const { selectedKey } = useTab()
@@ -12,7 +14,7 @@ export const DataDisplay = () => {
const type = useKeyType(selectedKey)
return (
-
+
{!selectedKey ? (
) : !type ? (
@@ -27,6 +29,8 @@ export const DataDisplay = () => {
<>
{type === "string" || type === "json" ? (
+ ) : type === "search" ? (
+
) : (
)}
diff --git a/src/components/databrowser/components/display/input/generateTypeDefinitions.tsx b/src/components/databrowser/components/display/input/generateTypeDefinitions.tsx
new file mode 100644
index 0000000..8d12dc6
--- /dev/null
+++ b/src/components/databrowser/components/display/input/generateTypeDefinitions.tsx
@@ -0,0 +1,324 @@
+import type { IndexSchema } from "./query-editor"
+
+// Generate TypeScript type definitions based on the actual schema
+export const generateTypeDefinitions = (schema?: IndexSchema): string => {
+ // Generate schema-specific field types
+ let schemaFieldsInterface = ""
+
+ if (schema && Object.keys(schema).length > 0) {
+ const fieldLines = Object.entries(schema)
+ .map(([fieldName, fieldDef]) => {
+ const fieldType = fieldDef.type
+ let operationType: string
+
+ switch (fieldType) {
+ case "TEXT": {
+ operationType = "StringOperations"
+ break
+ }
+ case "U64":
+ case "I64":
+ case "F64": {
+ operationType = "NumberOperations"
+ break
+ }
+ case "BOOL": {
+ operationType = "BooleanOperations"
+ break
+ }
+ case "DATE": {
+ operationType = "DateOperations"
+ break
+ }
+ default: {
+ operationType = "StringOperations"
+ }
+ }
+
+ // Escape field names with dots by using quotes
+ const escapedFieldName = fieldName.includes(".") ? `"${fieldName}"` : fieldName
+ return ` ${escapedFieldName}?: ${operationType};`
+ })
+ .join("\n")
+
+ schemaFieldsInterface = `
+/** Schema fields for the current index */
+interface SchemaFields {
+${fieldLines}
+}`
+ } else {
+ // Fallback for when no schema is available
+ schemaFieldsInterface = `
+/** Schema fields - no schema available, using dynamic fields */
+interface SchemaFields {
+ [fieldName: string]: StringOperations | NumberOperations | BooleanOperations | DateOperations;
+}`
+ }
+
+ return `
+// String operations for TEXT fields
+type StringOperationMap = {
+ /** Exact match */
+ $eq: string;
+ /** Not equal */
+ $ne: string;
+ /** Match any value in array */
+ $in: string[];
+ /** Fuzzy match with optional distance */
+ $fuzzy: string | { value: string; distance?: number; transpositionCostOne?: boolean };
+ /** Phrase match */
+ $phrase: string;
+ /** Regular expression match */
+ $regex: string;
+};
+
+// Number operations for U64, I64, F64 fields
+type NumberOperationMap = {
+ /** Exact match */
+ $eq: number;
+ /** Not equal */
+ $ne: number;
+ /** Match any value in array */
+ $in: number[];
+ /** Greater than */
+ $gt: number;
+ /** Greater than or equal */
+ $gte: number;
+ /** Less than */
+ $lt: number;
+ /** Less than or equal */
+ $lte: number;
+};
+
+// Boolean operations for BOOL fields
+type BooleanOperationMap = {
+ /** Exact match */
+ $eq: boolean;
+ /** Not equal */
+ $ne: boolean;
+ /** Match any value in array */
+ $in: boolean[];
+};
+
+// Date operations for DATE fields
+type DateOperationMap = {
+ /** Exact match */
+ $eq: string | Date;
+ /** Not equal */
+ $ne: string | Date;
+ /** Match any value in array */
+ $in: (string | Date)[];
+};
+
+// String field operations with optional boost
+type StringOperations =
+ | { $eq: string; $boost?: number }
+ | { $ne: string; $boost?: number }
+ | { $in: string[]; $boost?: number }
+ | { $fuzzy: string | { value: string; distance?: number; transpositionCostOne?: boolean }; $boost?: number }
+ | { $phrase: string; $boost?: number }
+ | { $regex: string; $boost?: number }
+ | string;
+
+// Number field operations with optional boost
+type NumberOperations =
+ | { $eq: number; $boost?: number }
+ | { $ne: number; $boost?: number }
+ | { $in: number[]; $boost?: number }
+ | { $gt: number; $boost?: number }
+ | { $gte: number; $boost?: number }
+ | { $lt: number; $boost?: number }
+ | { $lte: number; $boost?: number }
+ | number;
+
+// Boolean field operations with optional boost
+type BooleanOperations =
+ | { $eq: boolean; $boost?: number }
+ | { $ne: boolean; $boost?: number }
+ | { $in: boolean[]; $boost?: number }
+ | boolean;
+
+// Date field operations with optional boost
+type DateOperations =
+ | { $eq: string | Date; $boost?: number }
+ | { $ne: string | Date; $boost?: number }
+ | { $in: (string | Date)[]; $boost?: number }
+ | string
+ | Date;
+
+${schemaFieldsInterface}
+
+// Query leaf - field conditions without logical operators
+type QueryLeaf = SchemaFields & {
+ $and?: never;
+ $or?: never;
+ $must?: never;
+ $should?: never;
+ $mustNot?: never;
+ $boost?: never;
+};
+
+// Base type for boolean nodes - allows field conditions
+type BoolBase = SchemaFields;
+
+// $and: all conditions must match
+type AndNode = BoolBase & {
+ /** All conditions in this array must match */
+ $and: QueryFilter[];
+ /** Boost score for this node */
+ $boost?: number;
+ $or?: never;
+ $must?: never;
+ $should?: never;
+ $mustNot?: never;
+};
+
+// $or: at least one condition must match
+type OrNode = BoolBase & {
+ /** At least one condition must match */
+ $or: QueryFilter[];
+ /** Boost score for this node */
+ $boost?: number;
+ $and?: never;
+ $must?: never;
+ $should?: never;
+ $mustNot?: never;
+};
+
+// $must only (Elasticsearch-style)
+type MustNode = BoolBase & {
+ /** All conditions must match (similar to $and) */
+ $must: QueryFilter[];
+ /** Boost score for this node */
+ $boost?: number;
+ $and?: never;
+ $or?: never;
+ $should?: never;
+ $mustNot?: never;
+};
+
+// $should only (Elasticsearch-style)
+type ShouldNode = BoolBase & {
+ /** At least one should match (affects scoring) */
+ $should: QueryFilter[];
+ /** Boost score for this node */
+ $boost?: number;
+ $and?: never;
+ $or?: never;
+ $must?: never;
+ $mustNot?: never;
+};
+
+// $must + $should combined
+type MustShouldNode = BoolBase & {
+ /** All these must match */
+ $must: QueryFilter[];
+ /** At least one should match for higher score */
+ $should: QueryFilter[];
+ $and?: never;
+ $or?: never;
+ $mustNot?: never;
+};
+
+// $mustNot only
+type NotNode = BoolBase & {
+ /** None of these conditions should match */
+ $mustNot: QueryFilter[];
+ /** Boost score for this node */
+ $boost?: number;
+ $and?: never;
+ $or?: never;
+ $must?: never;
+ $should?: never;
+};
+
+// $and + $mustNot combined
+type AndNotNode = BoolBase & {
+ $and: QueryFilter[];
+ $mustNot: QueryFilter[];
+ $boost?: number;
+ $or?: never;
+ $must?: never;
+ $should?: never;
+};
+
+// $or + $mustNot combined
+type OrNotNode = BoolBase & {
+ $or: QueryFilter[];
+ $mustNot: QueryFilter[];
+ $boost?: number;
+ $and?: never;
+ $must?: never;
+ $should?: never;
+};
+
+// $should + $mustNot combined
+type ShouldNotNode = BoolBase & {
+ $should: QueryFilter[];
+ $mustNot: QueryFilter[];
+ $boost?: number;
+ $and?: never;
+ $or?: never;
+ $must?: never;
+};
+
+// $must + $mustNot combined
+type MustNotNode = BoolBase & {
+ $must: QueryFilter[];
+ $mustNot: QueryFilter[];
+ $boost?: number;
+ $and?: never;
+ $or?: never;
+ $should?: never;
+};
+
+// Full boolean node: $must + $should + $mustNot
+type BoolNode = BoolBase & {
+ $must: QueryFilter[];
+ $should: QueryFilter[];
+ $mustNot: QueryFilter[];
+ $boost?: number;
+ $and?: never;
+ $or?: never;
+};
+
+// Query filter - union of all node types
+type QueryFilter =
+ | QueryLeaf
+ | AndNode
+ | OrNode
+ | MustNode
+ | ShouldNode
+ | MustShouldNode
+ | NotNode
+ | AndNotNode
+ | OrNotNode
+ | ShouldNotNode
+ | MustNotNode
+ | BoolNode;
+
+// Root-level $or restriction (no field conditions at root with $or)
+type RootOrNode = {
+ $or: QueryFilter[];
+ $boost?: number;
+ $and?: never;
+ $must?: never;
+ $should?: never;
+ $mustNot?: never;
+};
+
+// Root query filter - restricts $or from mixing with fields at root level
+type Query =
+ | QueryLeaf
+ | AndNode
+ | RootOrNode
+ | MustNode
+ | ShouldNode
+ | MustShouldNode
+ | NotNode
+ | AndNotNode
+ | ShouldNotNode
+ | MustNotNode
+ | BoolNode;
+`
+}
diff --git a/src/components/databrowser/components/display/input/query-editor.tsx b/src/components/databrowser/components/display/input/query-editor.tsx
new file mode 100644
index 0000000..db23268
--- /dev/null
+++ b/src/components/databrowser/components/display/input/query-editor.tsx
@@ -0,0 +1,208 @@
+import { useEffect, useMemo, useRef } from "react"
+import { useTheme } from "@/dark-mode-context"
+import { Editor, useMonaco, type BeforeMount, type Monaco } from "@monaco-editor/react"
+
+import { cn, isTest } from "@/lib/utils"
+
+import { generateTypeDefinitions } from "./generateTypeDefinitions"
+
+// Schema field types as returned by index.describe()
+type SchemaFieldType = "TEXT" | "U64" | "I64" | "F64" | "BOOL" | "DATE"
+
+type SchemaField = {
+ type: SchemaFieldType | string
+ fast?: boolean
+}
+
+// Flexible type that accepts any schema structure from the SDK
+export type IndexSchema = Record
+
+type QueryEditorProps = {
+ value: string
+ onChange: (value: string) => void
+ height?: number
+ schema?: IndexSchema
+}
+
+export const QueryEditor = (props: QueryEditorProps) => {
+ // Avoid mounting Monaco at all during Playwright runs
+ if (isTest) {
+ return
+ }
+
+ return
+}
+
+const MonacoQueryEditor = ({ value, onChange, height, schema }: QueryEditorProps) => {
+ const monaco = useMonaco()
+ const editorRef = useRef(null)
+ const theme = useTheme()
+ const libDisposableRef = useRef<{ dispose: () => void } | null>(null)
+
+ // Generate type definitions based on schema
+ const typeDefinitions = useMemo(() => generateTypeDefinitions(schema), [schema])
+
+ // Update type definitions when schema changes
+ useEffect(() => {
+ if (!monaco) return
+
+ // Dispose previous lib if exists
+ if (libDisposableRef.current) {
+ libDisposableRef.current.dispose()
+ }
+
+ // Add new type definitions
+ libDisposableRef.current = monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ typeDefinitions,
+ "file:///query-types.d.ts"
+ )
+
+ return () => {
+ if (libDisposableRef.current) {
+ libDisposableRef.current.dispose()
+ }
+ }
+ }, [monaco, typeDefinitions])
+
+ const handleBeforeMount: BeforeMount = (monaco: Monaco) => {
+ // Configure TypeScript compiler options
+ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+ target: monaco.languages.typescript.ScriptTarget.ES2020,
+ allowNonTsExtensions: true,
+ moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: monaco.languages.typescript.ModuleKind.CommonJS,
+ noEmit: true,
+ esModuleInterop: true,
+ strict: true,
+ allowJs: true,
+ })
+
+ // Add initial type definitions
+ libDisposableRef.current = monaco.languages.typescript.typescriptDefaults.addExtraLib(
+ typeDefinitions,
+ "file:///query-types.d.ts"
+ )
+
+ // Configure diagnostics
+ monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+ noSemanticValidation: false,
+ noSyntaxValidation: false,
+ })
+
+ // Enable eager model sync for better performance
+ monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
+ }
+
+ useEffect(() => {
+ const match = value.startsWith("const query: Query = {")
+ const ending = value.endsWith("}")
+ if (!match || !ending) {
+ onChange("const query: Query = {}")
+ }
+ }, [value, editorRef.current, onChange])
+
+ // Wrap the value to make it a valid TypeScript expression
+ const handleChange = (newValue: string | undefined) => {
+ if (!newValue) {
+ onChange("")
+ return
+ }
+
+ // Check if the value contains the required prefix
+ const match = newValue.startsWith("const query: Query = {")
+ if (match) {
+ onChange(newValue)
+ } else {
+ // Revert the editor content to prevent removing the required prefix
+ const editor = editorRef.current
+ if (editor) {
+ // Use setValue to restore the previous valid value
+ // @ts-expect-error not typing the editor type
+ editor.setValue(value)
+ }
+ }
+ }
+
+ return (
+
+ {
+ editorRef.current = editor
+ }}
+ value={value}
+ onChange={handleChange}
+ defaultLanguage="typescript"
+ path="query.ts"
+ options={{
+ wordWrap: "on",
+ overviewRulerBorder: false,
+ overviewRulerLanes: 0,
+ formatOnPaste: true,
+ formatOnType: true,
+ renderWhitespace: "none",
+ smoothScrolling: true,
+ scrollbar: {
+ verticalScrollbarSize: 12,
+ },
+ autoIndent: "full",
+ guides: { indentation: false },
+ fontSize: 13,
+ cursorBlinking: "smooth",
+ minimap: { enabled: false },
+ folding: true,
+ glyphMargin: false,
+ lineNumbers: "on",
+ parameterHints: { enabled: true },
+ lineDecorationsWidth: 0,
+ automaticLayout: true,
+ scrollBeyondLastLine: false,
+ renderLineHighlight: "line",
+ unusualLineTerminators: "auto",
+ padding: { top: 8, bottom: 8 },
+ quickSuggestions: true,
+ suggest: {
+ showVariables: false,
+ showConstants: false,
+ showFunctions: false,
+ showClasses: false,
+ showInterfaces: false,
+ showModules: false,
+ showKeywords: false,
+ },
+ suggestOnTriggerCharacters: true,
+ acceptSuggestionOnEnter: "on",
+ tabCompletion: "on",
+ wordBasedSuggestions: "off",
+ // Disable navigation features
+ gotoLocation: {
+ multiple: "goto",
+ multipleDefinitions: "goto",
+ multipleTypeDefinitions: "goto",
+ multipleDeclarations: "goto",
+ multipleImplementations: "goto",
+ multipleReferences: "goto",
+ },
+ definitionLinkOpensInPeek: false,
+ contextmenu: false,
+ }}
+ className="[&_.current-line]:!border-none [&_.current-line]:!bg-emerald-50 [&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent [&_[role='presentation']]:!bg-transparent"
+ />
+
+ )
+}
+
+const TestQueryEditor = ({ value, onChange, height }: QueryEditorProps) => {
+ return (
+
+ |