fix search node

package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.5.0",
+  "version": "v2.5.1",
   "author": "https://github.com/AykutSarac",
   "homepage": "https://jsoncrack.com",
   "scripts": {

src/components/CustomNode/ObjectNode.tsx

@@ -1,30 +1,25 @@
 import React from "react";
-// import { useInViewport } from "react-in-viewport";
 import { CustomNodeProps } from "src/components/CustomNode";
-import useGraph from "src/store/useGraph";
 import * as Styled from "./styles";
 
-const inViewport = true;
-
 const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
   const { text, width, height, data } = node;
   const ref = React.useRef(null);
-  const performanceMode = useGraph(state => state.performanceMode);
-  // const { inViewport } = useInViewport(ref);
 
   if (data.isEmpty) return null;
 
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0} ref={ref} isObject>
-      {(!performanceMode || inViewport) &&
-        text.map((val, idx) => (
-          <Styled.StyledRow data-key={JSON.stringify(val[1])} data-x={x} data-y={y} key={idx}>
+      {text.map((val, idx) => {
+        return (
+          <Styled.StyledRow data-key={JSON.stringify(val)} data-x={x} data-y={y + idx * 17.8} key={idx}>
             <Styled.StyledKey objectKey>
               {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
             </Styled.StyledKey>
             <Styled.StyledLinkItUrl>{JSON.stringify(val[1])}</Styled.StyledLinkItUrl>
           </Styled.StyledRow>
-        ))}
+        )
+      })}
     </Styled.StyledForeignObject>
   );
 };

src/components/CustomNode/TextNode.tsx

@@ -1,14 +1,11 @@
 import React from "react";
 import { MdLink, MdLinkOff } from "react-icons/md";
-// import { useInViewport } from "react-in-viewport";
 import { CustomNodeProps } from "src/components/CustomNode";
 import useGraph from "src/store/useGraph";
 import useStored from "src/store/useStored";
 import styled from "styled-components";
 import * as Styled from "./styles";
 
-const inViewport = true;
-
 const StyledExpand = styled.button`
   pointer-events: all;
   display: inline-flex;
@@ -52,7 +49,6 @@ const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }
   const expandNodes = useGraph(state => state.expandNodes);
   const collapseNodes = useGraph(state => state.collapseNodes);
   const isExpanded = useGraph(state => state.collapsedParents.includes(id));
-  const performanceMode = useGraph(state => state.performanceMode);
   const isImage =
     !Array.isArray(text) && /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(text) && imagePreview;
   // const { inViewport } = useInViewport(ref);
@@ -79,23 +75,21 @@ const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }
         </StyledImageWrapper>
       ) : (
         <StyledTextNodeWrapper hasCollapse={data.parent && hideCollapse}>
-          {(!performanceMode || inViewport) && (
-            <Styled.StyledKey
-              data-x={x}
-              data-y={y}
-              data-key={JSON.stringify(text)}
-              parent={data.parent}
-            >
-              <Styled.StyledLinkItUrl>
-                {JSON.stringify(text).replaceAll('"', "")}
-              </Styled.StyledLinkItUrl>
-            </Styled.StyledKey>
-          )}
+          <Styled.StyledKey
+            data-x={x}
+            data-y={y}
+            data-key={JSON.stringify(text)}
+            parent={data.parent}
+          >
+            <Styled.StyledLinkItUrl>
+              {JSON.stringify(text).replaceAll('"', "")}
+            </Styled.StyledLinkItUrl>
+          </Styled.StyledKey>
           {data.parent && data.childrenCount > 0 && childrenCount && (
             <Styled.StyledChildrenCount>({data.childrenCount})</Styled.StyledChildrenCount>
           )}
 
-          {inViewport && data.parent && hasCollapse && hideCollapse && (
+          {data.parent && hasCollapse && hideCollapse && (
             <StyledExpand onClick={handleExpand}>
               {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
             </StyledExpand>

src/components/SearchInput/index.tsx

@@ -56,6 +56,8 @@ const StyledSearchButton = styled.button`
 export const SearchInput: React.FC = () => {
   const [content, setContent, skip] = useFocusNode();
 
+  console.log(content);
+
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     skip();

src/containers/Home/index.tsx

@@ -133,7 +133,7 @@ const PreviewSection = () => {
       <Styles.StyledPreviewFrame
         id="jcPreview"
         src={`${baseURL}/widget?json=63b73305c358219fbc421adf`}
-        loading="lazy"
+        loading="eager"
       />
     </Styles.StyledPreviewSection>
   );

src/hooks/useFocusNode.tsx

@@ -3,7 +3,6 @@ import useGraph from "src/store/useGraph";
 import { searchQuery, cleanupHighlight, highlightMatchedNodes } from "src/utils/search";
 
 export const useFocusNode = () => {
-  const togglePerfMode = useGraph(state => state.togglePerfMode);
   const zoomPanPinch = useGraph(state => state.zoomPanPinch);
   const [selectedNode, setSelectedNode] = React.useState(0);
   const [content, setContent] = React.useState({
@@ -14,14 +13,13 @@ export const useFocusNode = () => {
   const skip = () => setSelectedNode(current => current + 1);
 
   React.useEffect(() => {
-    togglePerfMode(!content.value.length);
 
     const debouncer = setTimeout(() => {
       setContent(val => ({ ...val, debounced: content.value }));
     }, 800);
 
     return () => clearTimeout(debouncer);
-  }, [content.value, togglePerfMode]);
+  }, [content.value]);
 
   React.useEffect(() => {
     if (!zoomPanPinch) return;
@@ -35,7 +33,7 @@ export const useFocusNode = () => {
     cleanupHighlight();
 
     if (ref && matchedNode && matchedNode.parentElement) {
-      const newScale = 0.4;
+      const newScale = 0.8;
       const x = Number(matchedNode.getAttribute("data-x"));
       const y = Number(matchedNode.getAttribute("data-y"));
 
@@ -58,7 +56,7 @@ export const useFocusNode = () => {
     return () => {
       if (!content.value) setSelectedNode(0);
     };
-  }, [content.debounced, content.value, selectedNode, zoomPanPinch]);
+  }, [content.debounced, content, selectedNode, zoomPanPinch]);
 
   return [content, setContent, skip] as const;
 };

src/store/useGraph.tsx

@@ -14,7 +14,6 @@ const initialStates = {
   graphCollapsed: false,
   foldNodes: false,
   fullscreen: false,
-  performanceMode: true,
   nodes: [] as NodeData[],
   edges: [] as EdgeData[],
   collapsedNodes: [] as string[],
@@ -35,7 +34,6 @@ interface GraphActions {
   expandGraph: () => void;
   toggleFold: (value: boolean) => void;
   toggleFullscreen: (value: boolean) => void;
-  togglePerfMode: (value: boolean) => void;
   zoomIn: () => void;
   zoomOut: () => void;
   centerView: () => void;
@@ -170,7 +168,6 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
     set({ foldNodes });
     get().setGraph();
   },
-  togglePerfMode: performanceMode => set({ performanceMode }),
   toggleFullscreen: fullscreen => set({ fullscreen }),
   setZoomPanPinch: zoomPanPinch => set({ zoomPanPinch }),
 }));