feat(352 | typesync.v2): add type and property search functionality for browser

Author: cmwhited

apps/events/src/schema.ts

@@ -2,13 +2,13 @@ import { Entity, Type } from '@graphprotocol/hypergraph';
 
 export class User extends Entity.Class<User>('User')({
   name: Type.String,
-  created: Type.Date
+  created: Type.Date,
 }) {}
 
 export class Todo extends Entity.Class<Todo>('Todo')({
   name: Type.String,
   completed: Type.Boolean,
-  assignees: Type.Relation(User)
+  assignees: Type.Relation(User),
 }) {}
 
 export class Todo2 extends Entity.Class<Todo2>('Todo2')({
@@ -18,21 +18,21 @@ export class Todo2 extends Entity.Class<Todo2>('Todo2')({
   due: Type.Date,
   amount: Type.Number,
   point: Type.Point,
-  website: Type.String
+  website: Type.String,
 }) {}
 
 export class JobOffer extends Entity.Class<JobOffer>('JobOffer')({
   name: Type.String,
-  salary: Type.Number
+  salary: Type.Number,
 }) {}
 
 export class Company extends Entity.Class<Company>('Company')({
   name: Type.String,
-  jobOffers: Type.Relation(JobOffer)
+  jobOffers: Type.Relation(JobOffer),
 }) {}
 
 export class Event extends Entity.Class<Event>('Event')({
   name: Type.String,
   description: Type.optional(Type.String),
-  sponsors: Type.Relation(Company)
-}) {}
+  sponsors: Type.Relation(Company),
+}) {}

biome.jsonc

@@ -17,7 +17,8 @@
       "!**/tsconfig.*.json",
       "!**/variant-schema.ts",
       "!**/apps/create-hypergraph/template-*/**",
-      "!**/*.css"
+      "!**/*.css",
+      "!packages/hypergraph/typesync-studio/src/generated/**/*.ts"
     ]
   },
   "formatter": {

packages/hypergraph/typesync-studio/graphql.codegen.ts

@@ -32,9 +32,6 @@ const config = {
       },
     },
   },
-  hooks: {
-    afterAllFileWrite: 'pnpm run lint:fix',
-  },
 } as const satisfies CodegenConfig;
 
 export default config;

packages/hypergraph/typesync-studio/package.json

@@ -29,6 +29,7 @@
     "effect": "^3.17.4",
     "graphql": "^16.11.0",
     "graphql-request": "^7.2.0",
+    "lodash.debounce": "^4.0.8",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwindcss": "^4.1.11",
@@ -42,6 +43,7 @@
     "@tailwindcss/vite": "^4.1.11",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^24.1.0",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",

packages/hypergraph/typesync-studio/src/Components/Schema/KnowledgeGraphBrowser.tsx

@@ -1,35 +1,52 @@
 'use client';
 
-import { Disclosure, DisclosureButton, DisclosurePanel, Input } from '@headlessui/react';
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import { CaretDownIcon, CaretRightIcon, PlusIcon } from '@phosphor-icons/react';
-import { Array as EffectArray, pipe } from 'effect';
+import { createFormHook } from '@tanstack/react-form';
+import { Array as EffectArray, String as EffectString } from 'effect';
 import { useState } from 'react';
 
+import { fieldContext, formContext } from '@/Components/Form/form.ts';
+import { TextField } from '@/Components/Form/TextField.tsx';
 import { type ExtendedSchemaBrowserType, useSchemaBrowserQuery } from '@/hooks/useKnowledgeGraph.tsx';
 import { mapKGDataTypeToPrimitiveType } from '@/utils/type-mapper.ts';
 import { InlineCode } from '../InlineCode.tsx';
 import { Loading } from '../Loading.tsx';
 
+const { useAppForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+  fieldContext,
+  formContext,
+});
+
 export type KnowledgeGraphBrowserProps = Readonly<{
   typeSelected(type: ExtendedSchemaBrowserType): void;
 }>;
 export function KnowledgeGraphBrowser({ typeSelected }: KnowledgeGraphBrowserProps) {
   const [typeSearch, setTypeSearch] = useState('');
-
-  const { data: types, isLoading } = useSchemaBrowserQuery({
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    select(data) {
-      if (!typeSearch) {
-        return data;
-      }
-      return pipe(
-        data,
-        EffectArray.filter((type) => type.slug.includes(typeSearch.toLowerCase())),
-      );
+  const schemaBrowserForm = useAppForm({
+    defaultValues: {
+      search: '',
+    } as {
+      search: string;
     },
+    asyncDebounceMs: 300,
   });
 
+  const { data: types, isLoading } = useSchemaBrowserQuery(
+    {
+      query: EffectString.isNonEmpty(typeSearch) ? EffectString.toLowerCase(typeSearch) : null,
+      first: 100,
+    },
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  );
+
   return (
     <div className="flex flex-col gap-y-6">
       <div className="border-b border-gray-200 dark:border-white/20 pb-5 h-20">
@@ -43,15 +60,21 @@ export function KnowledgeGraphBrowser({ typeSelected }: KnowledgeGraphBrowserPro
       </div>
       <div className="bg-gray-100 dark:bg-slate-900 rounded-lg flex flex-col gap-y-3 pt-2">
         <div className="px-3 mt-2">
-          <Input
-            id="SchemaBrowserSearch"
-            name="SchemaBrowserSearch"
-            value={typeSearch}
-            onChange={(e) => setTypeSearch(e.target.value || '')}
-            type="search"
-            placeholder="Search types..."
-            className="block min-w-0 grow py-1.5 pl-2 pr-3 rounded-md bg-white dark:bg-slate-700 data-[state=invalid]:pr-10 text-base text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline sm:text-sm/6 focus-visible:outline-none w-full"
-          />
+          <schemaBrowserForm.AppField
+            name="search"
+            listeners={{
+              // wait 300ms before setting the TypeSearch state value.
+              // an update on that value will update the useSchemaBrowserQuery vars, sending a search query to the Knowledge Graph
+              onChangeDebounceMs: 300,
+              onChange({ value }) {
+                setTypeSearch(value);
+              },
+            }}
+          >
+            {(field) => (
+              <field.TextField id="search" name="search" type="search" placeholder="Search Knowledge Graph types..." />
+            )}
+          </schemaBrowserForm.AppField>
         </div>
         <ul className="px-4 divide-y divide-gray-100 dark:divide-gray-700 overflow-y-auto h-[500px] 2xl:h-[850px]">
           {(types ?? []).map((_type) => {

packages/hypergraph/typesync-studio/src/Components/Schema/PropertyCombobox.tsx

@@ -11,7 +11,8 @@ import {
 } from '@headlessui/react';
 import { CaretUpDownIcon, CheckIcon } from '@phosphor-icons/react';
 import { useStore } from '@tanstack/react-form';
-import { Array as EffectArray, String as EffectString } from 'effect';
+import { String as EffectString } from 'effect';
+import debounce from 'lodash.debounce';
 import { useState } from 'react';
 
 import { type ExtendedProperty, usePropertiesQuery } from '@/hooks/useKnowledgeGraph.tsx';
@@ -34,17 +35,20 @@ export function PropertyCombobox({ id, label, propertySelected, ...rest }: Reado
   const hasErrors = errors.length > 0 && touched;
 
   const [propsFilter, setPropsFilter] = useState('');
+  const debounceSearch = debounce<(val: string) => void>((val: string) => {
+    setPropsFilter(val);
+  }, 300);
 
-  const { data } = usePropertiesQuery({
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    select(data) {
-      if (EffectString.isEmpty(propsFilter)) {
-        return data;
-      }
-      return EffectArray.filter(data, (prop) => prop.slug.includes(propsFilter.toLowerCase()));
+  const { data } = usePropertiesQuery(
+    {
+      query: EffectString.isNonEmpty(propsFilter) ? EffectString.toLowerCase(propsFilter) : null,
+      first: 50,
     },
-  });
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  );
   const props = data ?? [];
 
   return (
@@ -62,7 +66,7 @@ export function PropertyCombobox({ id, label, propertySelected, ...rest }: Reado
         field.handleChange(val.name || val.id);
         propertySelected(val);
       }}
-      onClose={() => setPropsFilter('')}
+      onClose={() => debounceSearch('')}
       immediate
     >
       {label != null ? (
@@ -76,7 +80,7 @@ export function PropertyCombobox({ id, label, propertySelected, ...rest }: Reado
           className="block min-w-0 grow py-1.5 pr-12 data-[state=invalid]:pr-10 text-base bg-white dark:bg-white/5 pl-3 outline -outline-offset-1 outline-gray-300 dark:outline-white/10 rounded-md text-gray-900 dark:text-white data-[state=invalid]:text-red-900 dark:data-[state=invalid]:text-red-700 placeholder:text-gray-400 dark:placeholder:text-gray-500 data-[state=invalid]:placeholder:text-red-700 dark:data-[state=invalid]:placeholder:text-red-400 focus:outline sm:text-sm/6 focus-visible:outline-none"
           onChange={(event) => {
             const value = event.target.value;
-            setPropsFilter(value);
+            debounceSearch(value);
             field.handleChange(value);
           }}
           onBlur={() => setPropsFilter('')}

packages/hypergraph/typesync-studio/src/Components/Schema/TypeCombobox.tsx

@@ -11,7 +11,8 @@ import {
 } from '@headlessui/react';
 import { CaretUpDownIcon, CheckIcon } from '@phosphor-icons/react';
 import { useStore } from '@tanstack/react-form';
-import { Array as EffectArray, String as EffectString } from 'effect';
+import { String as EffectString } from 'effect';
+import debounce from 'lodash.debounce';
 import { useState } from 'react';
 
 import { type ExtendedSchemaBrowserType, useSchemaBrowserQuery } from '@/hooks/useKnowledgeGraph.tsx';
@@ -33,16 +34,20 @@ export function TypeCombobox({ id, label, typeSelected, ...rest }: Readonly<Type
   const hasErrors = errors.length > 0 && touched;
 
   const [typesFilter, setTypesFilter] = useState('');
+  const debounceSearch = debounce<(val: string) => void>((val: string) => {
+    setTypesFilter(val);
+  }, 300);
 
-  const { data } = useSchemaBrowserQuery({
-    refetchOnMount: false,
-    select(data) {
-      if (EffectString.isEmpty(typesFilter)) {
-        return data;
-      }
-      return EffectArray.filter(data, (type) => type.slug.includes(typesFilter.toLowerCase()));
+  const { data } = useSchemaBrowserQuery(
+    {
+      query: EffectString.isNonEmpty(typesFilter) ? EffectString.toLowerCase(typesFilter) : null,
+      first: 50,
     },
-  });
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  );
   const types = data ?? [];
 
   return (
@@ -61,7 +66,9 @@ export function TypeCombobox({ id, label, typeSelected, ...rest }: Readonly<Type
         // emit the change
         typeSelected(val);
       }}
-      onClose={() => setTypesFilter('')}
+      onClose={() => {
+        debounceSearch('');
+      }}
       immediate
     >
       {label != null ? (
@@ -75,11 +82,12 @@ export function TypeCombobox({ id, label, typeSelected, ...rest }: Readonly<Type
           className="block min-w-0 grow py-1.5 pr-12 data-[state=invalid]:pr-10 text-base bg-white dark:bg-white/5 pl-3 outline -outline-offset-1 outline-gray-300 dark:outline-white/10 rounded-md text-gray-900 dark:text-white data-[state=invalid]:text-red-900 dark:data-[state=invalid]:text-red-700 placeholder:text-gray-400 dark:placeholder:text-gray-500 data-[state=invalid]:placeholder:text-red-700 dark:data-[state=invalid]:placeholder:text-red-400 focus:outline sm:text-sm/6 focus-visible:outline-none"
           onChange={(event) => {
             const value = event.target.value;
-            setTypesFilter(value);
+            debounceSearch(value);
             field.handleChange(value);
           }}
           onBlur={() => setTypesFilter('')}
           displayValue={(selectedType: string) => selectedType}
+          type="search"
         />
         <ComboboxButton className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-hidden cursor-pointer">
           <CaretUpDownIcon className="size-5 text-gray-400 dark:text-gray-50" aria-hidden="true" />