Semantic Search

import { SemanticSearch } from "@gooddata/sdk-ui-semantic-search";
import { isSemanticSearchResultItem } from "@gooddata/sdk-model";

// Import required styles
import "@gooddata/sdk-ui-semantic-search/styles/css/main.css";

const App = () => {
    return (
        <div style={{ width: 300 }}>
            {/* Wrap the search UI in a container of desired size */}
            <SemanticSearch
                // Handle item selection. With deep search enabled, the user can also
                // select a nested relationship (for example, a visualization inside a dashboard).
                onSelect={(item) => {
                    const title = isSemanticSearchResultItem(item) ? item.title : item.targetObjectTitle;
                    console.log(`Selected item: ${title}`);
                    // Handle the selected item, for example navigate to the dashboard
                }}
                // Optional: Handle search errors
                onError={(errorMessage, detail) => {
                    console.error(`Search error: ${errorMessage}`, detail?.reason);
                }}
                // Optional: Filter by object types
                objectTypes={["dashboard", "metric"]}
                // Optional: Enable deep search
                deepSearch={true}
                // Optional: Set results limit
                limit={10}
                // Optional: Custom placeholder
                placeholder="Search for dashboards, metrics..."
                // Optional: Exclude objects with specific tags
                excludeTags={["hidden"]}
                // Optional: Custom footer in search results
                renderFooter={(props, { closeSearch }) => {
                    return null;
                }}
            />
        </div>
    );
};

import { useState } from "react";
import { useSemanticSearch } from "@gooddata/sdk-ui-semantic-search";

const MyCustomSearchComponent = () => {
    const [searchTerm, setSearchTerm] = useState("");

    const { searchStatus, searchResults, searchError, relationships } = useSemanticSearch({
        searchTerm,
        objectTypes: ["dashboard", "metric"],
        deepSearch: true,
        limit: 10,
        excludeTags: ["hidden"],
        // backend and workspace are optional if provided via context
    });

    return (
        <div>
            <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search..."
            />

            {searchStatus === "loading" && <div>Loading...</div>}
            {searchStatus === "error" && <div>Error: {searchError?.message}</div>}

            {searchStatus === "success" && (
                <ul>
                    {searchResults.map((item) => (
                        <li key={item.id} onClick={() => console.log(`Selected item: ${item.title}`)}>
                            {item.title}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
};

interface ISemanticSearchResultItem {
    /** The type of the found object (for example "dashboard", "metric", or "visualization"). */
    type: GenAIObjectType;
    /** The identifier of the found object. */
    id: string;
    /** The identifier of the workspace where the object is located. */
    workspaceId: string;
    /** The title of the found object. */
    title: string;
    /** The description of the found object. */
    description?: string;
    /** The tags of the found object. */
    tags?: string[];
    /** The creation date of the found object. */
    createdAt?: string;
    /** The last modification date of the found object. */
    modifiedAt?: string;
    /** The chart type of visualization objects. */
    visualizationUrl?: string;
    /** Overall similarity score; larger is more similar. */
    score?: number;
    /** Title score of the found item. */
    scoreTitle?: number;
    /** Description score of the found item. */
    scoreDescriptor?: number;
    /** 1000 if the found item is an exact match, 0 otherwise. */
    scoreExactMatch?: number;
    /** Certification status and optional message for the found object. */
    certification?: ISemanticSearchCertification;
}

interface ISemanticSearchRelationship {
    /** Workspace id of the source object. */
    sourceWorkspaceId: string;
    /** Object id of the source. */
    sourceObjectId: string;
    /** Type of the source object. */
    sourceObjectType: GenAIObjectType;
    /** Title of the source object. */
    sourceObjectTitle: string;
    /** Workspace id of the target object. */
    targetWorkspaceId: string;
    /** Object id of the target. */
    targetObjectId: string;
    /** Type of the target object. */
    targetObjectType: GenAIObjectType;
    /** Title of the target object. */
    targetObjectTitle: string;
}