fix node collapse on shrink

src/components/CustomNode/TextNode.tsx

@@ -37,24 +37,17 @@ const TextNode: React.FC<CustomNodeProps<string> & { node: NodeData }> = ({
 }) => {
   const performanceMode = useConfig((state) => state.performanceMode);
   const hideCollapse = useStored((state) => state.hideCollapse);
-  const expand = useConfig((state) => state.expand);
   const expandNodes = useGraph((state) => state.expandNodes);
   const collapseNodes = useGraph((state) => state.collapseNodes);
-  const [isExpanded, setIsExpanded] = React.useState(!expand);
+  const [isExpanded, setIsExpanded] = React.useState(true);
 
   const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     setIsExpanded(!isExpanded);
-  };
-
-  React.useEffect(() => {
-    setIsExpanded(!expand);
-  }, [expand]);
 
-  React.useEffect(() => {
     if (isExpanded) collapseNodes(node.id);
     else expandNodes(node.id);
-  }, [collapseNodes, expand, expandNodes, isExpanded, node.id]);
+  };
 
   return (
     <Styled.StyledForeignObject

src/components/Graph/index.tsx

@@ -136,11 +136,8 @@ export const Graph = ({ isWidget = false }: { isWidget?: boolean }) => {
     const nodeList = collapsedNodes.map((id) => `[id*="node-${id}"]`);
     const edgeList = collapsedEdges.map((id) => `[class*="edge-${id}"]`);
 
-    const nodes = document.querySelectorAll('[id*="node-"]');
-    const edges = document.querySelectorAll('[class*="edge-"]');
-
-    nodes.forEach((node) => node.classList.remove("hide"));
-    edges.forEach((edges) => edges.classList.remove("hide"));
+    const hiddenItems = document.querySelectorAll("hide");
+    hiddenItems.forEach((item) => item.classList.remove("hide"));
 
     if (nodeList.length) {
       const selectedNodes = document.querySelectorAll(nodeList.join(","));

src/components/Sidebar/index.tsx

@@ -4,11 +4,7 @@ import Link from "next/link";
 import styled from "styled-components";
 import { CanvasDirection } from "reaflow";
 import { TiFlowMerge } from "react-icons/ti";
-import {
-  CgArrowsMergeAltH,
-  CgArrowsShrinkH,
-  CgPerformance,
-} from "react-icons/cg";
+import { CgArrowsMergeAltH, CgArrowsShrinkH } from "react-icons/cg";
 import {
   AiOutlineDelete,
   AiFillGithub,
@@ -51,28 +47,6 @@ const StyledElement = styled.div<{ beta?: boolean }>`
   color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
   cursor: pointer;
 
-  ${({ theme, beta }) =>
-    beta &&
-    `
-    &::after {
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      bottom: 0;
-      right: 0;
-      content: 'Beta';
-      font-size: 10px;
-      font-weight: 500;
-      background: ${theme.BLURPLE};
-      border-radius: 4px;
-      color: ${theme.FULL_WHITE};
-      padding: 2px;
-      height: 14px;
-      z-index: 0;
-    }
-  `};
-
   svg {
     padding: 8px;
     vertical-align: middle;
@@ -132,10 +106,6 @@ function rotateLayout(layout: CanvasDirection) {
   return 360;
 }
 
-const StyledAlertIcon = styled(IoAlertCircleSharp)`
-  color: ${({ theme }) => theme.ORANGE};
-`;
-
 export const Sidebar: React.FC = () => {
   const getJson = useConfig((state) => state.getJson);
   const setConfig = useConfig((state) => state.setConfig);