datajunction-ui 0.0.126 → 0.0.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.126",
+  "version": "0.0.127",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {
@@ -54,7 +54,6 @@
     "file-loader": "6.2.0",
     "fontfaceobserver": "2.3.0",
     "formik": "2.4.3",
-    "fuse.js": "6.6.2",
     "husky": "8.0.1",
     "i18next": "21.9.2",
     "i18next-browser-languagedetector": "6.1.5",

package/src/app/components/Search.jsx

@@ -1,101 +1,168 @@
-import { useState, useCallback, useContext, useRef } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import DJClientContext from '../providers/djclient';
-import Fuse from 'fuse.js';
 
 import './search.css';
 
+const DEBOUNCE_MS = 120;
+const MIN_QUERY_LENGTH = 1;
+const CACHE_MAX_ENTRIES = 50;
+const CACHE_TTL_MS = 60 * 1000;
+
+const truncate = str => {
+  if (!str) return '';
+  return str.length > 100 ? str.substring(0, 90) + '...' : str;
+};
+
 export default function Search() {
-  const [fuse, setFuse] = useState();
   const [searchValue, setSearchValue] = useState('');
-  const [searchResults, setSearchResults] = useState([]);
+  const [nodes, setNodes] = useState([]);
+  const [tags, setTags] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
-  const hasLoadedRef = useRef(false);
+  const abortRef = useRef(null);
+  const debounceRef = useRef(null);
   const inputRef = useRef(null);
+  // LRU cache keyed on normalized query; Map preserves insertion order so the
+  // oldest entry is always the first key.
+  const cacheRef = useRef(new Map());
 
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
-  const truncate = str => {
-    if (str === null) {
-      return '';
+  const readCache = useCallback(key => {
+    const entry = cacheRef.current.get(key);
+    if (!entry) return null;
+    if (Date.now() - entry.at > CACHE_TTL_MS) {
+      cacheRef.current.delete(key);
+      return null;
     }
-    return str.length > 100 ? str.substring(0, 90) + '...' : str;
-  };
-
-  // Lazy load search data only when user focuses on search input
-  const loadSearchData = useCallback(async () => {
-    if (hasLoadedRef.current || isLoading) return;
-    hasLoadedRef.current = true;
-    setIsLoading(true);
+    // Touch for LRU ordering.
+    cacheRef.current.delete(key);
+    cacheRef.current.set(key, entry);
+    return entry.value;
+  }, []);
 
-    try {
-      const [data, tags] = await Promise.all([
-        djClient.nodeDetails(),
-        djClient.listTags(),
-      ]);
-      const allEntities = data.concat(
-        (tags || []).map(tag => {
-          tag.type = 'tag';
-          return tag;
-        }),
-      );
-      const fuseInstance = new Fuse(allEntities || [], {
-        keys: [
-          'name', // will be assigned a `weight` of 1
-          { name: 'description', weight: 2 },
-          { name: 'display_name', weight: 3 },
-          { name: 'type', weight: 4 },
-          { name: 'tag_type', weight: 5 },
-        ],
-      });
-      setFuse(fuseInstance);
-    } catch (error) {
-      console.error('Error fetching nodes or tags:', error);
-      hasLoadedRef.current = false; // Allow retry on error
-    } finally {
-      setIsLoading(false);
+  const writeCache = useCallback((key, value) => {
+    const cache = cacheRef.current;
+    cache.set(key, { value, at: Date.now() });
+    while (cache.size > CACHE_MAX_ENTRIES) {
+      const oldest = cache.keys().next().value;
+      cache.delete(oldest);
     }
-  }, [djClient, isLoading]);
+  }, []);
+
+  const runSearch = useCallback(
+    async query => {
+      const cached = readCache(query);
+      if (cached) {
+        if (abortRef.current) abortRef.current.abort();
+        setNodes(cached.nodes);
+        setTags(cached.tags);
+        setIsLoading(false);
+        return;
+      }
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setIsLoading(true);
+      try {
+        const results = await djClient.globalSearch(query, {
+          signal: controller.signal,
+        });
+        if (!controller.signal.aborted) {
+          setNodes(results.nodes);
+          setTags(results.tags);
+          writeCache(query, results);
+        }
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          console.error('Search failed:', err);
+          setNodes([]);
+          setTags([]);
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [djClient, readCache, writeCache],
+  );
 
   const handleChange = e => {
-    setSearchValue(e.target.value);
-    if (fuse) {
-      setSearchResults(fuse.search(e.target.value).map(result => result.item));
+    const value = e.target.value;
+    setSearchValue(value);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
     }
+    const trimmed = value.trim();
+    if (trimmed.length < MIN_QUERY_LENGTH) {
+      if (abortRef.current) abortRef.current.abort();
+      setNodes([]);
+      setTags([]);
+      setIsLoading(false);
+      return;
+    }
+    // Synchronous cache hit: render instantly without waiting for debounce.
+    const cached = readCache(trimmed);
+    if (cached) {
+      if (abortRef.current) abortRef.current.abort();
+      setNodes(cached.nodes);
+      setTags(cached.tags);
+      setIsLoading(false);
+      return;
+    }
+    debounceRef.current = setTimeout(() => runSearch(trimmed), DEBOUNCE_MS);
   };
 
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (abortRef.current) abortRef.current.abort();
+    };
+  }, []);
+
+  const hasResults = nodes.length > 0 || tags.length > 0;
+
   return (
     <div>
       <div className="nav-search-box" onClick={() => inputRef.current?.focus()}>
         <input
           ref={inputRef}
           type="text"
-          placeholder={isLoading ? 'Loading...' : 'Search nodes...'}
+          placeholder={isLoading ? 'Searching...' : 'Search nodes and tags...'}
           name="search"
           value={searchValue}
           onChange={handleChange}
-          onFocus={loadSearchData}
         />
       </div>
-      {searchResults.length > 0 && (
-        <div className="search-results">
-          {searchResults.slice(0, 20).map(item => {
-            const itemUrl =
-              item.type !== 'tag'
-                ? `/nodes/${item.name}`
-                : `/tags/${item.name}`;
-            return (
-              <a key={item.name} href={itemUrl}>
-                <div className="search-result-item">
-                  <span className={`node_type__${item.type} badge node_type`}>
-                    {item.type}
-                  </span>
-                  {item.display_name} (<b>{item.name}</b>){' '}
-                  {item.description ? '- ' : ' '}
-                  {truncate(item.description || '')}
-                </div>
-              </a>
-            );
-          })}
+      {hasResults && (
+        <div
+          className="search-results"
+          style={isLoading ? { opacity: 0.6 } : undefined}
+        >
+          {nodes.map(item => (
+            <a key={`node-${item.name}`} href={`/nodes/${item.name}`}>
+              <div className="search-result-item">
+                <span className={`node_type__${item.type} badge node_type`}>
+                  {item.type}
+                </span>
+                {item.display_name} (<b>{item.name}</b>){' '}
+                {item.description ? '- ' : ' '}
+                {truncate(item.description)}
+              </div>
+            </a>
+          ))}
+          {tags.map(item => (
+            <a key={`tag-${item.name}`} href={`/tags/${item.name}`}>
+              <div className="search-result-item">
+                <span className="node_type__tag badge node_type">tag</span>
+                {item.display_name} (<b>{item.name}</b>){' '}
+                {item.description ? '- ' : ' '}
+                {truncate(item.description)}
+              </div>
+            </a>
+          ))}
         </div>
       )}
     </div>

package/src/app/components/__tests__/Search.test.jsx

@@ -1,334 +1,250 @@
 import React from 'react';
-import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
 import Search from '../Search';
 import DJClientContext from '../../providers/djclient';
 
-const mockDjClient = {
+const mockNodes = [
+  {
+    name: 'default.test_node',
+    display_name: 'Test Node',
+    description: 'A test node for testing',
+    type: 'transform',
+    kind: 'node',
+  },
+  {
+    name: 'default.another_node',
+    display_name: 'Another Node',
+    description: '',
+    type: 'metric',
+    kind: 'node',
+  },
+  {
+    name: 'default.long_description_node',
+    display_name: 'Long Description',
+    description:
+      'This is a very long description that exceeds 100 characters and should be truncated to prevent display issues in the search results interface',
+    type: 'dimension',
+    kind: 'node',
+  },
+];
+
+const mockTags = [
+  {
+    name: 'test_tag',
+    display_name: 'Test Tag',
+    description: 'A test tag',
+    type: 'tag',
+    tag_type: 'business',
+    kind: 'tag',
+  },
+];
+
+const makeClient = overrides => ({
   DataJunctionAPI: {
-    nodeDetails: jest.fn(),
-    listTags: jest.fn(),
+    globalSearch: jest
+      .fn()
+      .mockResolvedValue({ nodes: mockNodes, tags: mockTags }),
+    ...(overrides || {}),
   },
+});
+
+const flushDebounce = async () => {
+  await act(async () => {
+    jest.advanceTimersByTime(200);
+  });
 };
 
 describe('<Search />', () => {
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
-  const mockNodes = [
-    {
-      name: 'default.test_node',
-      display_name: 'Test Node',
-      description: 'A test node for testing',
-      type: 'transform',
-    },
-    {
-      name: 'default.another_node',
-      display_name: 'Another Node',
-      description: null, // Test null description
-      type: 'metric',
-    },
-    {
-      name: 'default.long_description_node',
-      display_name: 'Long Description',
-      description:
-        'This is a very long description that exceeds 100 characters and should be truncated to prevent display issues in the search results interface',
-      type: 'dimension',
-    },
-  ];
-
-  const mockTags = [
-    {
-      name: 'test_tag',
-      display_name: 'Test Tag',
-      description: 'A test tag',
-      tag_type: 'business',
-    },
-  ];
-
-  it('renders search input', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+  afterEach(() => {
+    jest.useRealTimers();
+  });
 
+  it('renders the search input with the idle placeholder', () => {
+    const client = makeClient();
     const { getByPlaceholderText } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    expect(getByPlaceholderText('Search nodes...')).toBeInTheDocument();
+    expect(
+      getByPlaceholderText('Search nodes and tags...'),
+    ).toBeInTheDocument();
   });
 
-  it('fetches and initializes search data on focus (lazy loading)', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
-
+  it('does not query the API for an empty string', async () => {
+    const client = makeClient();
     const { getByPlaceholderText } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    // Data should NOT be fetched on mount
-    expect(mockDjClient.DataJunctionAPI.nodeDetails).not.toHaveBeenCalled();
-
-    // Focus on search input to trigger lazy loading
-    const searchInput = getByPlaceholderText('Search nodes...');
-    fireEvent.focus(searchInput);
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
-      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
+    fireEvent.change(getByPlaceholderText('Search nodes and tags...'), {
+      target: { value: '   ' },
     });
+    await flushDebounce();
+    expect(client.DataJunctionAPI.globalSearch).not.toHaveBeenCalled();
   });
 
-  it('displays search results when typing', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
-
-    const { getByPlaceholderText, getByText } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+  it('queries the API for single-character input (server handles prefix)', async () => {
+    const client = makeClient();
+    const { getByPlaceholderText } = render(
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    const searchInput = getByPlaceholderText('Search nodes...');
-    // Focus to trigger lazy loading
-    fireEvent.focus(searchInput);
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
-    });
-
-    fireEvent.change(searchInput, { target: { value: 'test' } });
-
-    await waitFor(() => {
-      expect(getByText(/Test Node/)).toBeInTheDocument();
+    fireEvent.change(getByPlaceholderText('Search nodes and tags...'), {
+      target: { value: 'h' },
     });
-  });
-
-  it('displays nodes with correct URLs', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
-
-    const { getByPlaceholderText, container } = render(
-      <DJClientContext.Provider value={mockDjClient}>
-        <Search />
-      </DJClientContext.Provider>,
+    await flushDebounce();
+    expect(client.DataJunctionAPI.globalSearch).toHaveBeenCalledWith(
+      'h',
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
     );
-
-    const searchInput = getByPlaceholderText('Search nodes...');
-    // Focus to trigger lazy loading
-    fireEvent.focus(searchInput);
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
-    });
-
-    fireEvent.change(searchInput, { target: { value: 'node' } });
-
-    await waitFor(() => {
-      const links = container.querySelectorAll('a[href^="/nodes/"]');
-      expect(links.length).toBeGreaterThan(0);
-    });
   });
 
-  it('displays tags with correct URLs', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue([]);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
-
-    const { getByPlaceholderText, container } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+  it('calls globalSearch after the debounce interval for a non-trivial query', async () => {
+    const client = makeClient();
+    const { getByPlaceholderText } = render(
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    const searchInput = getByPlaceholderText('Search nodes...');
-    // Focus to trigger lazy loading
-    fireEvent.focus(searchInput);
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
-    });
-
-    fireEvent.change(searchInput, { target: { value: 'tag' } });
-
-    await waitFor(() => {
-      const links = container.querySelectorAll('a[href^="/tags/"]');
-      expect(links.length).toBeGreaterThan(0);
+    fireEvent.change(getByPlaceholderText('Search nodes and tags...'), {
+      target: { value: 'test' },
     });
+    await flushDebounce();
+    expect(client.DataJunctionAPI.globalSearch).toHaveBeenCalledWith(
+      'test',
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
   });
 
-  it('truncates long descriptions', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
-
-    const { getByPlaceholderText, getByText } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+  it('renders both node and tag results returned by the server', async () => {
+    const client = makeClient();
+    const { getByPlaceholderText, container, findByText } = render(
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    const searchInput = getByPlaceholderText('Search nodes...');
-    // Focus to trigger lazy loading
-    fireEvent.focus(searchInput);
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
-    });
-
-    fireEvent.change(searchInput, { target: { value: 'long' } });
-
-    await waitFor(() => {
-      expect(getByText(/\.\.\./)).toBeInTheDocument();
-    });
+    fireEvent.change(getByPlaceholderText('Search nodes and tags...'), {
+      target: { value: 'test' },
+    });
+    await flushDebounce();
+    await findByText(/Test Node/);
+    expect(
+      container.querySelector('a[href="/nodes/default.test_node"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('a[href="/tags/test_tag"]'),
+    ).toBeInTheDocument();
   });
 
-  it('handles null descriptions', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
-
-    const { getByPlaceholderText, getByText } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+  it('truncates descriptions longer than 100 characters', async () => {
+    const client = makeClient({
+      globalSearch: jest
+        .fn()
+        .mockResolvedValue({ nodes: [mockNodes[2]], tags: [] }),
+    });
+    const { getByPlaceholderText, findByText } = render(
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    const searchInput = getByPlaceholderText('Search nodes...');
-    // Focus to trigger lazy loading
-    fireEvent.focus(searchInput);
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
-    });
-
-    fireEvent.change(searchInput, { target: { value: 'another' } });
-
-    await waitFor(() => {
-      expect(getByText(/Another Node/)).toBeInTheDocument();
+    fireEvent.change(getByPlaceholderText('Search nodes and tags...'), {
+      target: { value: 'long' },
     });
+    await flushDebounce();
+    await findByText(/\.\.\./);
   });
 
-  it('limits search results to 20 items', async () => {
-    const manyNodes = Array.from({ length: 30 }, (_, i) => ({
-      name: `default.node${i}`,
-      display_name: `Node ${i}`,
-      description: `Description ${i}`,
-      type: 'transform',
-    }));
-
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(manyNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
-
-    const { getByPlaceholderText, container } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+  it('clears results when the input is cleared', async () => {
+    const client = makeClient();
+    const { getByPlaceholderText, container, findByText } = render(
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    const searchInput = getByPlaceholderText('Search nodes...');
-    // Focus to trigger lazy loading
-    fireEvent.focus(searchInput);
-
+    const input = getByPlaceholderText('Search nodes and tags...');
+    fireEvent.change(input, { target: { value: 'test' } });
+    await flushDebounce();
+    await findByText(/Test Node/);
+    fireEvent.change(input, { target: { value: '' } });
     await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
-    });
-
-    fireEvent.change(searchInput, { target: { value: 'node' } });
-
-    await waitFor(() => {
-      const results = container.querySelectorAll('.search-result-item');
-      expect(results.length).toBeLessThanOrEqual(20);
+      expect(container.querySelector('.search-result-item')).toBeNull();
     });
   });
 
-  it('handles error when fetching nodes', async () => {
+  it('logs an error but does not throw when the request fails', async () => {
     const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
-    mockDjClient.DataJunctionAPI.nodeDetails.mockRejectedValue(
-      new Error('Network error'),
-    );
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
-
+    const client = makeClient({
+      globalSearch: jest.fn().mockRejectedValue(new Error('boom')),
+    });
     const { getByPlaceholderText } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    // Focus to trigger lazy loading
-    const searchInput = getByPlaceholderText('Search nodes...');
-    fireEvent.focus(searchInput);
-
+    fireEvent.change(getByPlaceholderText('Search nodes and tags...'), {
+      target: { value: 'test' },
+    });
+    await flushDebounce();
     await waitFor(() => {
       expect(consoleErrorSpy).toHaveBeenCalledWith(
-        'Error fetching nodes or tags:',
+        'Search failed:',
         expect.any(Error),
       );
     });
-
     consoleErrorSpy.mockRestore();
   });
 
-  it('renders search input inside nav-search-box container', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue([]);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
-
-    const { container } = render(
-      <DJClientContext.Provider value={mockDjClient}>
-        <Search />
-      </DJClientContext.Provider>,
-    );
-
-    const searchBox = container.querySelector('.nav-search-box');
-    expect(searchBox).toBeInTheDocument();
-    expect(searchBox.querySelector('input')).toBeInTheDocument();
-  });
-
-  it('handles empty tags array', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(null);
-
+  it('serves a repeated query from cache without calling the server again', async () => {
+    const client = makeClient();
     const { getByPlaceholderText } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    const searchInput = getByPlaceholderText('Search nodes...');
-    // Focus to trigger lazy loading
-    fireEvent.focus(searchInput);
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
-    });
-
-    // Should not throw an error
-    expect(searchInput).toBeInTheDocument();
+    const input = getByPlaceholderText('Search nodes and tags...');
+    fireEvent.change(input, { target: { value: 'test' } });
+    await flushDebounce();
+    expect(client.DataJunctionAPI.globalSearch).toHaveBeenCalledTimes(1);
+    fireEvent.change(input, { target: { value: 'other' } });
+    await flushDebounce();
+    fireEvent.change(input, { target: { value: 'test' } });
+    await flushDebounce();
+    expect(client.DataJunctionAPI.globalSearch).toHaveBeenCalledTimes(2);
   });
 
-  it('shows description separator correctly', async () => {
-    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
-    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
-
-    const { getByPlaceholderText, container } = render(
-      <DJClientContext.Provider value={mockDjClient}>
+  it('aborts the in-flight request when a new query is typed', async () => {
+    const aborts = [];
+    const client = makeClient({
+      globalSearch: jest.fn((q, { signal }) => {
+        return new Promise((resolve, reject) => {
+          signal.addEventListener('abort', () => {
+            const err = new Error('aborted');
+            err.name = 'AbortError';
+            aborts.push(q);
+            reject(err);
+          });
+        });
+      }),
+    });
+    const { getByPlaceholderText } = render(
+      <DJClientContext.Provider value={client}>
         <Search />
       </DJClientContext.Provider>,
     );
-
-    const searchInput = getByPlaceholderText('Search nodes...');
-    // Focus to trigger lazy loading
-    fireEvent.focus(searchInput);
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
-    });
-
-    fireEvent.change(searchInput, { target: { value: 'test' } });
-
-    await waitFor(() => {
-      const results = container.querySelector('.search-result-item');
-      expect(results).toBeInTheDocument();
-    });
+    const input = getByPlaceholderText('Search nodes and tags...');
+    fireEvent.change(input, { target: { value: 'aaa' } });
+    await flushDebounce();
+    fireEvent.change(input, { target: { value: 'bbb' } });
+    await flushDebounce();
+    await waitFor(() => expect(aborts).toContain('aaa'));
+    expect(client.DataJunctionAPI.globalSearch).toHaveBeenCalledTimes(2);
   });
 });

package/src/app/services/DJService.js

@@ -1774,6 +1774,57 @@ export const DataJunctionAPI = {
     });
     return await response.json();
   },
+
+  globalSearch: async function (
+    query,
+    { signal, nodeLimit = 10, tagLimit = 5 } = {},
+  ) {
+    const gqlQuery = `
+      query GlobalSearch($q: String!, $nodeLimit: Int!, $tagLimit: Int!) {
+        findNodes(search: $q, limit: $nodeLimit) {
+          name
+          type
+          current {
+            displayName
+            description
+          }
+        }
+        searchTags(search: $q, limit: $tagLimit) {
+          name
+          displayName
+          description
+          tagType
+        }
+      }
+    `;
+    const response = await fetch(DJ_GQL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      signal,
+      body: JSON.stringify({
+        query: gqlQuery,
+        variables: { q: query, nodeLimit, tagLimit },
+      }),
+    });
+    const result = await response.json();
+    const nodes = (result?.data?.findNodes || []).map(node => ({
+      name: node.name,
+      display_name: node.current?.displayName || node.name,
+      description: node.current?.description || '',
+      type: node.type?.toLowerCase() || '',
+      kind: 'node',
+    }));
+    const tags = (result?.data?.searchTags || []).map(tag => ({
+      name: tag.name,
+      display_name: tag.displayName || tag.name,
+      description: tag.description || '',
+      type: 'tag',
+      tag_type: tag.tagType,
+      kind: 'tag',
+    }));
+    return { nodes, tags };
+  },
   users: async function () {
     return await (
       await fetch(`${DJ_URL}/users?with_activity=true`, {