From 8dd9cb29b5c8a1afd20f5195f5ff1db5cea5d326 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 18 Sep 2023 19:25:52 -0300 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20a?= =?UTF-8?q?dd=20missing=20import=20for=20Button=20component=20=E2=9C=A8=20?= =?UTF-8?q?feat(parameterComponent):=20add=20functionality=20to=20set=20fi?= =?UTF-8?q?lter=20edge=20when=20handle=20is=20clicked=20=F0=9F=90=9B=20fix?= =?UTF-8?q?(parameterComponent):=20fix=20type=20error=20in=20renderTooltip?= =?UTF-8?q?s=20function=20=F0=9F=90=9B=20fix(GenericNode):=20add=20missing?= =?UTF-8?q?=20import=20for=20Button=20component=20=E2=9C=A8=20feat(Generic?= =?UTF-8?q?Node):=20add=20functionality=20to=20reset=20filter=20edge=20whe?= =?UTF-8?q?n=20node=20title=20is=20clicked=20=F0=9F=90=9B=20fix(typesConte?= =?UTF-8?q?xt):=20add=20missing=20setFilterEdge=20and=20getFilterEdge=20to?= =?UTF-8?q?=20initial=20value=20=F0=9F=90=9B=20fix(ExtraSidebar):=20add=20?= =?UTF-8?q?missing=20import=20for=20cloneDeep=20function=20=E2=9C=A8=20fea?= =?UTF-8?q?t(ExtraSidebar):=20add=20functionality=20to=20reset=20filter=20?= =?UTF-8?q?edge=20and=20search=20input=20when=20blur=20event=20occurs=20?= =?UTF-8?q?=E2=9C=A8=20feat(ExtraSidebar):=20add=20functionality=20to=20fi?= =?UTF-8?q?lter=20data=20based=20on=20filter=20edge=20=F0=9F=90=9B=20fix(E?= =?UTF-8?q?xtraSidebar):=20fix=20handleSearchInput=20function=20to=20reset?= =?UTF-8?q?=20filter=20data=20when=20search=20input=20is=20empty=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(ExtraSidebar):=20fix=20handleBlur=20function?= =?UTF-8?q?=20to=20reset=20filter=20data,=20filter=20edge,=20and=20search?= =?UTF-8?q?=20input=20when=20filter=20edge=20is=20empty=20=F0=9F=90=9B=20f?= =?UTF-8?q?ix(ExtraSidebar):=20fix=20useEffect=20to=20reset=20filter=20dat?= =?UTF-8?q?a,=20filter=20edge,=20and=20search=20input=20when=20filter=20ed?= =?UTF-8?q?ge=20is=20empty=20=F0=9F=90=9B=20fix(ExtraSidebar):=20fix=20use?= =?UTF-8?q?Effect=20to=20filter=20data=20based=20on=20filter=20edge=20when?= =?UTF-8?q?=20filter=20edge=20is=20not=20empty?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/parameterComponent/index.tsx | 62 +++++++++++-------- .../src/CustomNodes/GenericNode/index.tsx | 10 ++- src/frontend/src/contexts/typesContext.tsx | 5 ++ .../extraSidebarComponent/index.tsx | 62 ++++++++++++++++++- src/frontend/src/types/typesContext/index.ts | 2 + 5 files changed, 113 insertions(+), 28 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index d71a18ebb..10925cd99 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -19,6 +19,7 @@ import IntComponent from "../../../../components/intComponent"; import PromptAreaComponent from "../../../../components/promptComponent"; import TextAreaComponent from "../../../../components/textAreaComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent"; +import { Button } from "../../../../components/ui/button"; import { TOOLTIP_EMPTY } from "../../../../constants/constants"; import { TabsContext } from "../../../../contexts/tabsContext"; import { typesContext } from "../../../../contexts/typesContext"; @@ -67,7 +68,9 @@ export default function ParameterComponent({ updateNodeInternals(data.id); }, [data.id, position, updateNodeInternals]); - const { reactFlowInstance } = useContext(typesContext); + const groupedEdge = useRef(null); + + const { reactFlowInstance, setFilterEdge } = useContext(typesContext); let disabled = reactFlowInstance?.getEdges().some((edge) => edge.targetHandle === id) ?? false; @@ -108,7 +111,8 @@ export default function ParameterComponent({ }, [info]); function renderTooltips() { - let groupedObj = groupByFamily(myData, tooltipTitle!, left, flow!); + let groupedObj: any = groupByFamily(myData, tooltipTitle!, left, flow!); + groupedEdge.current = groupedObj; if (groupedObj && groupedObj.length > 0) { //@ts-ignore @@ -218,29 +222,37 @@ export default function ParameterComponent({ !optionalHandle ? ( <> ) : ( - - - isValidConnection(connection, reactFlowInstance!) - } - className={classNames( - left ? "-ml-0.5 " : "-mr-0.5 ", - "h-3 w-3 rounded-full border-2 bg-background" - )} - style={{ - borderColor: color, - top: position, - }} - > - + )} {left === true && diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index c762b3a67..1558c0731 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -25,7 +25,8 @@ export default function GenericNode({ const [data, setData] = useState(olddata); const { updateFlow, flows, tabId } = useContext(TabsContext); const updateNodeInternals = useUpdateNodeInternals(); - const { types, deleteNode, reactFlowInstance } = useContext(typesContext); + const { types, deleteNode, reactFlowInstance, setFilterEdge, getFilterEdge } = + useContext(typesContext); const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const [validationStatus, setValidationStatus] = useState(null); @@ -84,7 +85,12 @@ export default function GenericNode({
BETA
)} -
+
{ + setFilterEdge([]); + }} + >
{}, setFetchError: () => {}, fetchError: false, + setFilterEdge: (filter) => {}, + getFilterEdge: [], }; export const typesContext = createContext(initialValue); @@ -39,6 +41,7 @@ export function TypesProvider({ children }: { children: ReactNode }) { const [fetchError, setFetchError] = useState(false); const { setLoading } = useContext(alertContext); const { getAuthentication } = useContext(AuthContext); + const [getFilterEdge, setFilterEdge] = useState([]); useEffect(() => { // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks. @@ -113,6 +116,8 @@ export function TypesProvider({ children }: { children: ReactNode }) { setData, fetchError, setFetchError, + setFilterEdge, + getFilterEdge, }} > {children} diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index b1853bd4c..413fa4c3b 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -1,3 +1,4 @@ +import { cloneDeep } from "lodash"; import { useContext, useEffect, useState } from "react"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; import IconComponent from "../../../../components/genericIconComponent"; @@ -18,7 +19,8 @@ import { classNames } from "../../../../utils/utils"; import DisclosureComponent from "../DisclosureComponent"; export default function ExtraSidebar(): JSX.Element { - const { data, templates } = useContext(typesContext); + const { data, templates, getFilterEdge, setFilterEdge } = + useContext(typesContext); const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } = useContext(TabsContext); const { setSuccessData, setErrorData } = useContext(alertContext); @@ -42,6 +44,10 @@ export default function ExtraSidebar(): JSX.Element { // Handle showing components after use search input function handleSearchInput(e: string) { + if (e === "") { + setFilterData(data); + return; + } setFilterData((_) => { let ret = {}; Object.keys(data).forEach((d: keyof APIObjectType, i) => { @@ -69,6 +75,59 @@ export default function ExtraSidebar(): JSX.Element { setErrorData({ title: " Components with errors: ", list: errors }); }, []); + function handleBlur() { + if (getFilterEdge.length > 0) { + setFilterData(data); + setFilterEdge([]); + setSearch(""); + } + } + + useEffect(() => { + if (getFilterEdge.length === 0) { + setFilterData(data); + setFilterEdge([]); + setSearch(""); + } + }, [getFilterEdge]); + + useEffect(() => { + if (getFilterEdge?.length > 0) { + setFilterData((_) => { + let dataClone = cloneDeep(data); + let ret = {}; + Object.keys(dataClone).forEach((d: keyof APIObjectType, i) => { + ret[d] = {}; + if (getFilterEdge.some((x) => x.family === d)) { + ret[d] = dataClone[d]; + + const filtered = getFilterEdge + .filter((x) => x.family === d) + .pop() + .type.split(","); + + for (let i = 0; i < filtered.length; i++) { + filtered[i] = filtered[i].trimStart(); + } + + if (filtered.some((x) => x !== "")) { + let keys = Object.keys(dataClone[d]).filter((nd) => + filtered.includes(nd) + ); + Object.keys(dataClone[d]).forEach((element) => { + if (!keys.includes(element)) { + delete ret[d][element]; + } + }); + } + } + }); + setSearch("search"); + return ret; + }); + } + }, [getFilterEdge]); + return (
@@ -141,6 +200,7 @@ export default function ExtraSidebar(): JSX.Element {
handleBlur()} type="text" name="search" id="search" diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts index 40f5b21ab..ff877b9d4 100644 --- a/src/frontend/src/types/typesContext/index.ts +++ b/src/frontend/src/types/typesContext/index.ts @@ -18,6 +18,8 @@ export type typesContextType = { setData: (newState: {}) => void; fetchError: boolean; setFetchError: (newState: boolean) => void; + setFilterEdge: (newState) => void; + getFilterEdge: any[]; }; export type alertContextType = { From 08c83fa555ec1a326911c71f48882d27621976a7 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 18 Sep 2023 23:34:12 -0300 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=94=A7=20fix(parameterComponent):=20r?= =?UTF-8?q?emove=20unnecessary=20span=20element=20to=20improve=20code=20re?= =?UTF-8?q?adability=20=F0=9F=94=A7=20fix(GenericNode):=20remove=20onClick?= =?UTF-8?q?=20event=20handler=20that=20resets=20filterEdge=20state=20to=20?= =?UTF-8?q?improve=20code=20simplicity=20=F0=9F=94=A7=20fix(PageComponent)?= =?UTF-8?q?:=20add=20onPaneClick=20callback=20function=20to=20reset=20filt?= =?UTF-8?q?erEdge=20state=20when=20clicking=20on=20the=20pane?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/parameterComponent/index.tsx | 1 - src/frontend/src/CustomNodes/GenericNode/index.tsx | 7 +------ .../FlowPage/components/PageComponent/index.tsx | 14 ++++++++++++-- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 10925cd99..0f31c7f42 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -251,7 +251,6 @@ export default function ParameterComponent({ >
- {required ? " *" : ""} )} diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 1558c0731..0cee9557c 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -85,12 +85,7 @@ export default function GenericNode({
BETA
)} -
{ - setFilterEdge([]); - }} - > +
(null); const { takeSnapshot } = useContext(undoRedoContext); @@ -382,6 +387,10 @@ export default function Page({ [] ); + const onPaneClick = useCallback((flow) => { + setFilterEdge([]); + }, []); + return (
{!view && } @@ -429,6 +438,7 @@ export default function Page({ zoomOnPinch={!view} panOnDrag={!view} proOptions={{ hideAttribution: true }} + onPaneClick={onPaneClick} > {!view && ( From e8524ea090df2f3139f32a1c2e274a4cdc83dc1e Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 19 Sep 2023 16:27:50 -0300 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=90=9B=20fix(extraSidebarComponent):?= =?UTF-8?q?=20update=20condition=20in=20useEffect=20to=20include=20search?= =?UTF-8?q?=20variable=20to=20properly=20reset=20filter=20data=20and=20edg?= =?UTF-8?q?e=20when=20search=20is=20empty?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/FlowPage/components/extraSidebarComponent/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 413fa4c3b..d9d47b71f 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -84,7 +84,7 @@ export default function ExtraSidebar(): JSX.Element { } useEffect(() => { - if (getFilterEdge.length === 0) { + if (getFilterEdge.length === 0 && search === "") { setFilterData(data); setFilterEdge([]); setSearch(""); From 8275a9c2c18b144164640d4b3de0e69a05f1b465 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 21 Sep 2023 21:00:17 -0300 Subject: [PATCH 4/4] chore(parameterComponent): remove unnecessary ts-ignore comments fix(extraSidebarComponent): remove unnecessary if condition in handleBlur function --- .../GenericNode/components/parameterComponent/index.tsx | 1 - .../FlowPage/components/extraSidebarComponent/index.tsx | 8 +++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 0f31c7f42..acd46c7f5 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -115,7 +115,6 @@ export default function ParameterComponent({ groupedEdge.current = groupedObj; if (groupedObj && groupedObj.length > 0) { - //@ts-ignore //@ts-ignore refHtml.current = groupedObj.map((item, index) => { const Icon: any = diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index d9d47b71f..d831716dc 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -76,11 +76,9 @@ export default function ExtraSidebar(): JSX.Element { }, []); function handleBlur() { - if (getFilterEdge.length > 0) { - setFilterData(data); - setFilterEdge([]); - setSearch(""); - } + setFilterData(data); + setFilterEdge([]); + setSearch(""); } useEffect(() => {