{!view &&
}
@@ -429,6 +438,7 @@ export default function Page({
zoomOnPinch={!view}
panOnDrag={!view}
proOptions={{ hideAttribution: true }}
+ onPaneClick={onPaneClick}
>
{!view && (
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index b1853bd4c..d831716dc 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,57 @@ export default function ExtraSidebar(): JSX.Element {
setErrorData({ title: " Components with errors: ", list: errors });
}, []);
+ function handleBlur() {
+ setFilterData(data);
+ setFilterEdge([]);
+ setSearch("");
+ }
+
+ useEffect(() => {
+ if (getFilterEdge.length === 0 && search === "") {
+ 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 (