{
onClick={(event) => {
event.stopPropagation();
setShowMenu((prev) => !prev);
- setActionClicked((prev) => !prev);
}}
className="node-action-icon"
style={{
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx
index a47d9fa060..b45d0bfc20 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/JSONTreeViewerV2.jsx
@@ -4,7 +4,6 @@ import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
import Fuse from 'fuse.js';
import JSONViewer from './JSONViewer';
-import { SearchBox } from '@/_components';
import { Node } from './Node';
import { v4 as uuidv4 } from 'uuid';
import InputComponent from '@/components/ui/Input/Index';
@@ -16,12 +15,21 @@ const JSONTreeViewerV2 = ({ data = {}, iconsList = [], darkMode, searchablePaths
const getComponentDefinition = useStore((state) => state.getComponentDefinition, shallow);
const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
const setSearchValue = useStore((state) => state.setInspectorSearchValue, shallow);
- const [selectedNodePath, setSelectedNodePath] = React.useState(null);
+ const selectedNodePath = useStore((state) => state.selectedNodePath, shallow);
+ const setSelectedNodePath = useStore((state) => state.setSelectedNodePath, shallow);
+
const selectedNodes = useStore((state) => state.selectedNodes, shallow);
function fuzzySearch(query, searchablePaths) {
const list = Array.from(searchablePaths);
- const fuse = new Fuse(list, { threshold: 0.3 });
+ const fuse = new Fuse(list, {
+ threshold: 0.2,
+ minMatchCharLength: 2,
+ includeScore: true,
+ distance: 1000,
+ tokenize: true,
+ matchAllTokens: true,
+ });
return fuse.search(query).map((result) => result.item);
}
@@ -106,8 +114,8 @@ const JSONTreeViewerV2 = ({ data = {}, iconsList = [], darkMode, searchablePaths
const expandedIdsSet = new Set(expandedIds);
const filtered = flattendedData.filter((item) => {
const { metadata } = item || {};
- const { path } = metadata || {};
- return expandedIdsSet.has(path);
+ const { actualPath, path } = metadata || {};
+ return expandedIdsSet.has(actualPath || path);
});
return filtered
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
index bd7143ee9d..9f33c0c8d9 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
@@ -65,8 +65,8 @@ export const Node = (props) => {
const onExpand = (node) => {
const { element } = node || {};
const { metadata } = element || {};
- const { path } = metadata || {};
- setSelectedNodes(path);
+ const { path, actualPath } = metadata || {};
+ setSelectedNodes(actualPath || path);
};
const onSelect = (node) => {
diff --git a/frontend/src/AppBuilder/_stores/slices/inspectorSlice.js b/frontend/src/AppBuilder/_stores/slices/inspectorSlice.js
index 521fff3b1b..c20768a257 100644
--- a/frontend/src/AppBuilder/_stores/slices/inspectorSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/inspectorSlice.js
@@ -3,6 +3,7 @@ const initialState = {
searchedNodes: new Set(),
inspectorSearchValue: '',
inspectorSearchResults: new Set(),
+ selectedNodePath: null,
};
export const createInspectorSlice = (set, get) => ({
@@ -31,6 +32,9 @@ export const createInspectorSlice = (set, get) => ({
setInspectorSearchResults: (results) => {
set({ inspectorSearchResults: results });
},
+ setSelectedNodePath: (path) => {
+ set({ selectedNodePath: path });
+ },
getAllComponentChildrenById: (id) => {
const { getComponentDefinition, getResolvedComponent } = get();
const component = getComponentDefinition(id);
@@ -97,7 +101,8 @@ export const createInspectorSlice = (set, get) => ({
.filter((item) => item.name)
.reduce((acc, { key, name, parentType }) => {
const currentPath = `components.${name}`;
- searchablePaths.add(currentPath);
+ const actualPath = `${path}.${name}`;
+ searchablePaths.add(actualPath);
const children = getAllComponentChildrenById(key).map((childKey) => {
const childComponent = getComponentDefinition(childKey);
let parentComponentType = null;
@@ -115,13 +120,14 @@ export const createInspectorSlice = (set, get) => ({
return [
...acc,
{
- id: currentPath,
+ id: actualPath,
name,
- children: reduceData(children, currentPath, level + 1),
+ children: reduceData(children, actualPath, level + 1),
metadata: {
type: 'components',
path: currentPath,
parentType: parentType,
+ actualPath,
},
},
];
diff --git a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
index 367ca4cf0c..bdb02022dd 100644
--- a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
@@ -30,8 +30,15 @@ export const createLeftSideBarSlice = (set, get) => ({
),
setPathToBeInspected: (pathToBeInspected) => set(() => ({ pathToBeInspected }), false, 'setPathToBeInspected'),
setComponentToInspect: (componentToInspect) => {
- const { setPathToBeInspected, setSelectedSidebarItem, toggleLeftSidebar, selectedSidebarItem } = get();
- setPathToBeInspected(['components', componentToInspect]);
+ const {
+ setPathToBeInspected,
+ setSelectedSidebarItem,
+ toggleLeftSidebar,
+ selectedSidebarItem,
+ setSelectedNodePath,
+ } = get();
+ // setPathToBeInspected(['components', componentToInspect]);
+ setSelectedNodePath(`components.${componentToInspect}`);
if (selectedSidebarItem !== 'inspect') {
setSelectedSidebarItem('inspect');
toggleLeftSidebar(true);
diff --git a/frontend/src/_components/OverflowTooltip.jsx b/frontend/src/_components/OverflowTooltip.jsx
index 1523ae449a..f5c4dd1cfd 100644
--- a/frontend/src/_components/OverflowTooltip.jsx
+++ b/frontend/src/_components/OverflowTooltip.jsx
@@ -1,7 +1,14 @@
import React, { useEffect, useRef, useState } from 'react';
import { ToolTip } from '@/_components';
-export default function OverflowTooltip({ children, className, whiteSpace = 'nowrap', placement = 'bottom', ...rest }) {
+export default function OverflowTooltip({
+ children,
+ className,
+ whiteSpace = 'nowrap',
+ placement = 'bottom',
+ maxLetters,
+ ...rest
+}) {
const [isOverflowed, setIsOverflow] = useState(false);
const textElementRef = useRef();
@@ -12,6 +19,11 @@ export default function OverflowTooltip({ children, className, whiteSpace = 'now
);
}, [children]);
+ const displayText =
+ maxLetters && typeof children === 'string' && children.length > maxLetters
+ ? `${children.substring(0, maxLetters)}...`
+ : children;
+
return (