display highlighed nodes count

src/components/SearchInput/index.tsx

@@ -19,7 +19,7 @@ const StyledForm = styled.form`
   padding: 4px 6px;
 `;
 
-const StyledInput = styled.input`
+const StyledInput = styled.input<{ hasInput: boolean }>`
   background: none;
   color: ${({ theme }) => theme.TEXT_NORMAL};
   outline: none;
@@ -37,7 +37,7 @@ const StyledInput = styled.input`
   }
 
   &:focus {
-    width: 208px;
+    width: ${({ hasInput }) => hasInput && "165px"};
   }
 `;
 
@@ -53,8 +53,13 @@ const StyledSearchButton = styled.button`
   }
 `;
 
+const StyledCountInfo = styled.span`
+  font-size: 12px;
+  padding: 0 6px;
+`;
+
 export const SearchInput: React.FC = () => {
-  const [content, setContent, skip] = useFocusNode();
+  const [content, setContent, skip, nodeCount, currentNode] = useFocusNode();
 
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -74,7 +79,11 @@ export const SearchInput: React.FC = () => {
           value={content.value}
           onChange={e => setContent(val => ({ ...val, value: e.target.value }))}
           placeholder="Search Node"
+          hasInput={!!content.value.length}
         />
+        <StyledCountInfo>
+          {nodeCount}/{nodeCount > 0 ? currentNode + 1 : "0"}
+        </StyledCountInfo>
         <StyledSearchButton type="reset" aria-label="search" onClick={handleClear}>
           {content.value ? <IoCloseSharp size={18} /> : <AiOutlineSearch size={18} />}
         </StyledSearchButton>

src/hooks/useFocusNode.tsx

@@ -5,6 +5,7 @@ import { searchQuery, cleanupHighlight, highlightMatchedNodes } from "src/utils/
 export const useFocusNode = () => {
   const zoomPanPinch = useGraph(state => state.zoomPanPinch);
   const [selectedNode, setSelectedNode] = React.useState(0);
+  const [nodeCount, setNodeCount] = React.useState(0);
   const [content, setContent] = React.useState({
     value: "",
     debounced: "",
@@ -13,7 +14,6 @@ export const useFocusNode = () => {
   const skip = () => setSelectedNode(current => current + 1);
 
   React.useEffect(() => {
-
     const debouncer = setTimeout(() => {
       setContent(val => ({ ...val, debounced: content.value }));
     }, 800);
@@ -47,16 +47,21 @@ export const useFocusNode = () => {
         matchedNode.getBoundingClientRect().height / 10;
 
       highlightMatchedNodes(matchedNodes, selectedNode);
+      setNodeCount(matchedNodes.length);
 
       zoomPanPinch?.setTransform(newPositionX, newPositionY, newScale);
     } else {
       setSelectedNode(0);
+      setNodeCount(0);
     }
 
     return () => {
-      if (!content.value) setSelectedNode(0);
+      if (!content.value) {
+        setSelectedNode(0);
+        setNodeCount(0);
+      }
     };
   }, [content.debounced, content, selectedNode, zoomPanPinch]);
 
-  return [content, setContent, skip] as const;
+  return [content, setContent, skip, nodeCount, selectedNode] as const;
 };