reduce nodes element count for performance

src/components/CustomNode/ObjectNode.tsx

@@ -24,30 +24,25 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
       x={0}
       y={0}
       ref={ref}
+      isObject
     >
-      {(!performanceMode || inViewport) && (
-        <Styled.StyledTextWrapper>
-          <Styled.StyledText width={width} height={height}>
-            {value.map((val, idx) => (
-              <Styled.StyledRow
-                data-key={JSON.stringify(val[1])}
-                data-x={x}
-                data-y={y}
-                key={idx}
-                width={`${width - 20}px`}
-                value={JSON.stringify(val[1])}
-              >
-                <Styled.StyledKey objectKey>
-                  {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
-                </Styled.StyledKey>
-                <Styled.StyledLinkItUrl>
-                  {JSON.stringify(val[1])}
-                </Styled.StyledLinkItUrl>
-              </Styled.StyledRow>
-            ))}
-          </Styled.StyledText>
-        </Styled.StyledTextWrapper>
-      )}
+      {(!performanceMode || inViewport) &&
+        value.map((val, idx) => (
+          <Styled.StyledRow
+            data-key={JSON.stringify(val[1])}
+            data-x={x}
+            data-y={y}
+            key={idx}
+            value={JSON.stringify(val[1])}
+          >
+            <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

@@ -65,27 +65,21 @@ const TextNode: React.FC<
       y={0}
       data-nodeid={node.id}
       ref={ref}
+      hideCollapse={hideCollapse}
+      hasCollapse={isParent && hasCollapse}
     >
       {(!performanceMode || inViewport) && (
-        <Styled.StyledTextWrapper>
-          <Styled.StyledText
-            hideCollapse={hideCollapse}
-            hasCollapse={isParent && hasCollapse}
-            width={width}
-            height={height}
-          >
-            <Styled.StyledKey
-              data-x={x}
-              data-y={y}
-              data-key={JSON.stringify(value)}
-              parent={isParent}
-            >
-              <Styled.StyledLinkItUrl>
-                {JSON.stringify(value).replaceAll('"', "")}
-              </Styled.StyledLinkItUrl>
-            </Styled.StyledKey>
-          </Styled.StyledText>
-        </Styled.StyledTextWrapper>
+        <Styled.StyledKey
+          data-x={x}
+          data-y={y}
+          data-key={JSON.stringify(value)}
+          parent={isParent}
+          hasToggle={hasCollapse}
+        >
+          <Styled.StyledLinkItUrl>
+            {JSON.stringify(value).replaceAll('"', "")}
+          </Styled.StyledLinkItUrl>
+        </Styled.StyledKey>
       )}
 
       {inViewport && isParent && hasCollapse && !hideCollapse && (

src/components/CustomNode/styles.tsx

@@ -12,35 +12,21 @@ export const StyledLinkItUrl = styled(LinkItUrl)`
   pointer-events: all;
 `;
 
-export const StyledTextWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  cursor: pointer;
-`;
-
-export const StyledText = styled.div<{
-  width: number;
-  height: number;
+export const StyledForeignObject = styled.foreignObject<{
   hasCollapse?: boolean;
   hideCollapse?: boolean;
+  isObject?: boolean;
 }>`
   display: flex;
+  text-align: ${({ isObject }) => !isObject && "center"};
+  align-items: center;
   justify-content: center;
+  font-size: 12px;
   flex-direction: column;
-  width: ${({ width }) => width};
-  height: ${({ height }) => height};
-  min-height: 50;
+  overflow: hidden;
+  padding: 10px;
   color: ${({ theme }) => theme.TEXT_NORMAL};
-  padding-right: ${({ hasCollapse, hideCollapse }) =>
-    hasCollapse && !hideCollapse && "20px"};
-`;
-
-export const StyledForeignObject = styled.foreignObject`
+  cursor: pointer;
   pointer-events: none;
 
   * {
@@ -72,6 +58,7 @@ export const StyledForeignObject = styled.foreignObject`
 export const StyledKey = styled.span<{
   objectKey?: boolean;
   parent?: boolean;
+  hasToggle?: boolean;
 }>`
   font-weight: 500;
   color: ${({ theme, objectKey, parent }) =>
@@ -81,18 +68,19 @@ export const StyledKey = styled.span<{
       ? theme.OBJECT_KEY
       : theme.TEXT_POSITIVE};
   font-size: ${({ parent }) => parent && "14px"};
+  padding-right: ${({ hasToggle }) => hasToggle && "30px"};
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export const StyledRow = styled.span.attrs<{
-  width: string;
   value: string;
   theme: DefaultTheme;
 }>((props) => ({
   style: {
-    width: props.width,
     color: getTypeColor(props.value, props.theme),
   },
-}))<{ width: string; value: string; theme: DefaultTheme }>`
+}))<{ value: string; theme: DefaultTheme }>`
   height: 18px;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/Graph/index.tsx

@@ -26,7 +26,7 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
   background-image: ${({ theme }) =>
     `radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`};
-  background-size: 10px 10px;
+  background-size: 15px 15px;
 
   :active {
     cursor: move;