autocomplete

designer/client/src/components/sidePanels/SearchLabeledAutocomplete.tsx

@@ -0,0 +1,22 @@
+import { Autocomplete, FormControl } from "@mui/material";
+import { nodeInput } from "../graph/node-modal/NodeDetailsContent/NodeTableStyled";
+import React from "react";
+
+export const SearchLabeledAutocomplete = ({ children, name, values }) => {
+    return (
+        <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1, width: "100%" }}>
+            {children}
+            <Autocomplete
+                options={values}
+                className={nodeInput}
+                renderInput={(params) => (
+                    <div ref={params.InputProps.ref}>
+                        <input name={name} {...params.inputProps} placeholder="Type to search..." className={nodeInput} />
+                    </div>
+                )}
+            />
+        </FormControl>
+    );
+};
+
+SearchLabeledAutocomplete.displayName = "SearchLabeledAutocomplete";

designer/client/src/components/sidePanels/SearchLabeledInput.tsx

@@ -1,19 +1,14 @@
-import { forwardRef, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 import { FormControl } from "@mui/material";
 import { nodeInput } from "../graph/node-modal/NodeDetailsContent/NodeTableStyled";
-import React from "react";
 
-export type SearchLabeledInputProps = PropsWithChildren<{
-    name: string;
-}>;
-
-export const SearchLabeledInput = forwardRef<HTMLInputElement, SearchLabeledInputProps>(({ children, ...props }, ref) => {
+export const SearchLabeledInput = ({ children, ...props }) => {
     return (
         <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1, width: "100%" }}>
             {children}
-            <input ref={ref} {...props} className={nodeInput} />
+            <input {...props} className={nodeInput} />
         </FormControl>
     );
-});
+};
 
 SearchLabeledInput.displayName = "SearchLabeledInput";

designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx

@@ -3,7 +3,8 @@ import { Button, Box, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { SearchLabeledInput } from "../../sidePanels/SearchLabeledInput";
 import { SearchLabel } from "../../sidePanels/SearchLabel";
-import { resolveSearchQuery } from "./utils";
+import { useNodeTypes, resolveSearchQuery } from "./utils";
+import { SearchLabeledAutocomplete } from "../../sidePanels/SearchLabeledAutocomplete";
 
 const transformInput = (input: string, fieldName: string) => {
     return input === "" ? "" : `${fieldName}:(${input})`;
@@ -111,12 +112,12 @@ export function AdvancedSearchFilters({
             <SearchLabeledInput name="paramValue">
                 <SearchLabel label={displayNames["paramValue"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput name="componentGroup">
+            <SearchLabeledAutocomplete name="componentGroup" values={useNodeTypes("componentGroup")}>
                 <SearchLabel label={displayNames["componentGroup"]} />
-            </SearchLabeledInput>
-            <SearchLabeledInput name="type">
+            </SearchLabeledAutocomplete>
+            <SearchLabeledAutocomplete name="type" values={useNodeTypes("type")}>
                 <SearchLabel label={displayNames["type"]} />
-            </SearchLabeledInput>
+            </SearchLabeledAutocomplete>
             <SearchLabeledInput name="paramName">
                 <SearchLabel label={displayNames["paramName"]} />
             </SearchLabeledInput>

designer/client/src/components/toolbars/search/utils.ts

@@ -1,7 +1,6 @@
 import { Edge, NodeType } from "../../../types";
-import { uniq } from "lodash";
+import { isEqual, uniq } from "lodash";
 import { useSelector } from "react-redux";
-import { isEqual } from "lodash";
 import { getScenario } from "../../../reducers/selectors/graph";
 import NodeUtils from "../../graph/NodeUtils";
 import { useMemo } from "react";
@@ -29,7 +28,7 @@ const fieldsSelectors: FilterSelector = [
     },
     {
         name: "type",
-        selector: (node) => [node.nodeType, node.type, node.ref?.typ],
+        selector: (node) => [node.nodeType, node.ref?.typ, node.ref?.id],
     },
     {
         name: "paramValue",
@@ -84,6 +83,20 @@ const findFieldsUsingSelectorWithName = (selectorName: string, filterValues: str
     );
 };
 
+export function useNodeTypes(selectorName: string): string[] {
+    const { scenarioGraph } = useSelector(getScenario);
+    const allNodes = NodeUtils.nodesFromScenarioGraph(scenarioGraph);
+
+    return useMemo(() => {
+        const nodeSelector = fieldsSelectors.find((selector) => selector.name == selectorName)?.selector;
+        const partial = allNodes
+            .flatMap((node) => ensureArray(nodeSelector(node)).filter((item) => item !== undefined))
+            .map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression));
+
+        return uniq(partial);
+    }, [allNodes]);
+}
+
 export function useFilteredNodes(searchQuery: SearchQuery): {
     groups: string[];
     node: NodeType;