Skip to content

Commit

Permalink
options in autoComplete based on const
Browse files Browse the repository at this point in the history
  • Loading branch information
@vder
Piotr Fałdrowicz authored and vder committed Jan 7, 2025
1 parent 06d75a2 commit e9e2cf5
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 45 deletions.
49 changes: 40 additions & 9 deletions designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import React, { useEffect, useMemo } from "react";
import { Button, Box, Typography } from "@mui/material";
import { Box, Button, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import { SearchLabeledInput } from "../../sidePanels/SearchLabeledInput";
import { SearchLabel } from "../../sidePanels/SearchLabel";
import { resolveSearchQuery, searchQueryToString, useNodeTypes } from "./utils";
import { resolveSearchQuery, searchQueryToString, selectorByName } from "./utils";
import { SearchQuery } from "./SearchResults";
import { SearchLabeledAutocomplete } from "../../sidePanels/SearchLabeledAutocomplete";
import { useSelector } from "react-redux";
import { getScenario } from "../../../reducers/selectors/graph";
import NodeUtils from "../../graph/NodeUtils";
import { uniq } from "lodash";
import { getComponentGroups } from "../../../reducers/selectors/settings";

export function AdvancedSearchFilters({
filterFields,
Expand All @@ -21,6 +26,9 @@ export function AdvancedSearchFilters({
setCollapsedHandler: React.Dispatch<React.SetStateAction<boolean>>;
}) {
const { t } = useTranslation();
const componentsGroups = useSelector(getComponentGroups);
const { scenarioGraph } = useSelector(getScenario);
const allNodes = NodeUtils.nodesFromScenarioGraph(scenarioGraph);

const displayNames = useMemo(
() => ({
Expand All @@ -35,6 +43,25 @@ export function AdvancedSearchFilters({
[t],
);

const componentLabels = useMemo(() => {
return new Set(
componentsGroups.flatMap((componentGroup) => componentGroup.components).map((component) => component.label.toLowerCase()),
);
}, []);

const nodeTypes = useMemo(() => {
const availableTypes = allNodes
.flatMap((node) =>
selectorByName("type")
.flatMap((s) => s.selector(node))
.filter((item) => item !== undefined),
)
.map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression))
.filter((type) => componentLabels.has(type.toLowerCase()));

return uniq(availableTypes);
}, [allNodes]);

useEffect(() => {
const searchQuery = resolveSearchQuery(filter);
setFilterFields(searchQuery);
Expand Down Expand Up @@ -70,12 +97,7 @@ export function AdvancedSearchFilters({
<SearchLabeledInput name="value" value={filterFields?.value || []} setFilterFields={setFilterFields}>
<SearchLabel label={displayNames["value"]} />
</SearchLabeledInput>
<SearchLabeledAutocomplete
name="type"
options={useNodeTypes()}
value={filterFields?.type || []}
setFilterFields={setFilterFields}
>
<SearchLabeledAutocomplete name="type" options={nodeTypes} value={filterFields?.type || []} setFilterFields={setFilterFields}>
<SearchLabel label={displayNames["type"]} />
</SearchLabeledAutocomplete>
<SearchLabeledInput name="label" value={filterFields?.label || []} setFilterFields={setFilterFields}>
Expand All @@ -90,7 +112,16 @@ export function AdvancedSearchFilters({
<SearchLabeledInput name="edge" value={filterFields?.edge || []} setFilterFields={setFilterFields}>
<SearchLabel label={displayNames["edge"]} />
</SearchLabeledInput>
<Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "100%", mt: 2, mb: 1 }}>
<Box
sx={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
mt: 2,
mb: 1,
}}
>
<Button sx={{ width: "45%" }} size="small" variant="outlined" onClick={handleClear}>
{t("search.panel.advancedFilters.clearButton.label", "Clear")}
</Button>
Expand Down
46 changes: 10 additions & 36 deletions designer/client/src/components/toolbars/search/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { ensureArray } from "../../../common/arrayUtils";
import { SearchQuery } from "./SearchResults";
import { getComponentGroups } from "../../../reducers/selectors/settings";

type SelectorResult = { expression: string } | string;
type Selector = (node: NodeType) => SelectorResult | SelectorResult[];
Expand All @@ -16,7 +15,6 @@ type FilterSelector = { name: string; selector: Selector }[];
const fieldsSelectors: FilterSelector = [
{
name: "name",

selector: (node) => node.id,
},
{
Expand Down Expand Up @@ -58,7 +56,7 @@ function matchFilters(value: SelectorResult, filterValues: string[]): boolean {
return filterValues.length && filterValues.some((filter) => filter != "" && resolved?.toLowerCase().includes(filter.toLowerCase()));
}

export const findFields = (filterValues: string[], node: NodeType) => {
const findFields = (filterValues: string[], node: NodeType) => {
return uniq(
fieldsSelectors.flatMap(({ name, selector }) =>
ensureArray(selector(node))
Expand All @@ -70,41 +68,17 @@ export const findFields = (filterValues: string[], node: NodeType) => {

const findFieldsUsingSelectorWithName = (selectorName: string, filterValues: string[], node: NodeType) => {
return uniq(
fieldsSelectors
.filter((selector) => selector.name == selectorName)
.flatMap(({ name, selector }) =>
ensureArray(selector(node))
.filter((v) => matchFilters(v, filterValues))
.map(() => name),
),
selectorByName(selectorName).flatMap(({ name, selector }) =>
ensureArray(selector(node))
.filter((v) => matchFilters(v, filterValues))
.map(() => name),
),
);
};

function useComponentTypes(): Set<string> {
const componentsGroups = useSelector(getComponentGroups);

return useMemo(() => {
return new Set(
componentsGroups.flatMap((componentGroup) => componentGroup.components).map((component) => component.label.toLowerCase()),
);
}, []);
}

export function useNodeTypes(): string[] {
const { scenarioGraph } = useSelector(getScenario);
const allNodes = NodeUtils.nodesFromScenarioGraph(scenarioGraph);
const componentsSet = useComponentTypes();

return useMemo(() => {
const nodeSelector = fieldsSelectors.find((selector) => selector.name == "type")?.selector;
const availableTypes = allNodes
.flatMap((node) => ensureArray(nodeSelector(node)).filter((item) => item !== undefined))
.map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression))
.filter((type) => componentsSet.has(type.toLowerCase()));

return uniq(availableTypes);
}, [allNodes]);
}
export const selectorByName = (selectorName: string): FilterSelector => {
return fieldsSelectors.filter((selector) => selector.name == selectorName);
};

export function useFilteredNodes(searchQuery: SearchQuery): {
groups: string[];
Expand All @@ -121,7 +95,7 @@ export function useFilteredNodes(searchQuery: SearchQuery): {

const displayNames = useMemo(
() => ({
name: t("panels.search.field.id", "Name"),
name: t("panels.search.field.name", "Name"),
description: t("panels.search.field.description", "Description"),
label: t("panels.search.field.label", "Label"),
value: t("panels.search.field.value", "Value"),
Expand Down

0 comments on commit e9e2cf5

Please sign in to comment.