From f2be3afa54b3e25207a0d57c9be0dc879d5f2dec Mon Sep 17 00:00:00 2001
From: Manan Vaghasiya <manan@ironmanan.com>
Date: Thu, 2 Nov 2023 13:39:00 +0000
Subject: [PATCH] show expand collapse state for graph nodes

---
 .../components/icons/common/ResizeDown.tsx    | 21 +++++++++++++++++++
 .../topology/components/TopologyGraph.tsx     | 21 ++++++++++++++++---
 2 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 deepfence_frontend/apps/dashboard/src/components/icons/common/ResizeDown.tsx

diff --git a/deepfence_frontend/apps/dashboard/src/components/icons/common/ResizeDown.tsx b/deepfence_frontend/apps/dashboard/src/components/icons/common/ResizeDown.tsx
new file mode 100644
index 0000000000..ecff78aa87
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/components/icons/common/ResizeDown.tsx
@@ -0,0 +1,21 @@
+export const ResizeDownIcon = () => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 37 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="resize-down">
+        <path
+          id="icon"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M22.4754 15H32.0654C32.6177 15 33.0654 15.4477 33.0654 16C33.0654 16.5523 32.6177 17 32.0654 17H19.0654V4C19.0654 3.44772 19.5131 3 20.0654 3C20.6177 3 21.0654 3.44772 21.0654 4V13.59L30.3154 4.34C30.7122 4.00022 31.3036 4.02307 31.673 4.39244C32.0424 4.76181 32.0652 5.35324 31.7254 5.75L22.4754 15ZM3.06543 20C3.06543 19.4477 3.51314 19 4.06543 19H17.0654V32C17.0654 32.5523 16.6177 33 16.0654 33C15.5131 33 15.0654 32.5523 15.0654 32V22.41L5.80543 31.66C5.56104 31.9454 5.17731 32.0697 4.81201 31.9818C4.44671 31.8939 4.16149 31.6087 4.07362 31.2434C3.98575 30.8781 4.11005 30.4944 4.39543 30.25L13.6554 21H4.06543C3.51314 21 3.06543 20.5523 3.06543 20Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/topology/components/TopologyGraph.tsx b/deepfence_frontend/apps/dashboard/src/features/topology/components/TopologyGraph.tsx
index a50780ff88..05d81a5219 100644
--- a/deepfence_frontend/apps/dashboard/src/features/topology/components/TopologyGraph.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/topology/components/TopologyGraph.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useFetcher, useParams } from 'react-router-dom';
 import { useDebounce, useEffectOnce, useHoverDirty, useMeasure } from 'react-use';
 import { cn } from 'tailwind-preset';
@@ -7,6 +7,7 @@ import { CircleSpinner } from 'ui-components';
 import { DFLink } from '@/components/DFLink';
 import { DetailsLineIcon } from '@/components/icons/common/DetailsLine';
 import { ErrorStandardSolidIcon } from '@/components/icons/common/ErrorStandardSolid';
+import { ResizeDownIcon } from '@/components/icons/common/ResizeDown';
 import { ResizeUpIcon } from '@/components/icons/common/ResizeUp';
 import { NodeDetailsStackedModal } from '@/features/topology/components/NodeDetailsStackedModal';
 import {
@@ -208,7 +209,9 @@ export const TopologyGraph = () => {
           ref={tooltipRef}
         >
           <GraphTooltip
+            visible={debouncedTooltipLoc.show}
             item={debouncedTooltipLoc.item}
+            isNodeExpanded={graphDataManagerFunctions.isNodeExpanded}
             onExpandCollapseClick={(model) => {
               setDebouncedTooltipLoc((prev) => {
                 return { ...prev, show: false };
@@ -282,15 +285,27 @@ const GraphTooltip = ({
   item,
   onExpandCollapseClick,
   onViewDetailsClick,
+  isNodeExpanded,
+  visible,
 }: {
   item: G6Node | null;
   onExpandCollapseClick: (model: NodeModel) => void;
   onViewDetailsClick: (model: NodeModel) => void;
+  isNodeExpanded: ({ nodeId, nodeType }: { nodeId: string; nodeType: string }) => boolean;
+  visible: boolean;
 }) => {
   const model = item?.getModel() as NodeModel | undefined;
   if (!model) return null;
   const expands = itemExpands(model.df_data);
   const hasDetails = itemHasDetails(model.df_data);
+
+  const expanded = useMemo(() => {
+    if (model.df_data?.id && model.df_data.type) {
+      return isNodeExpanded({ nodeId: model.df_data.id, nodeType: model.df_data.type });
+    }
+    return false;
+  }, [model.df_data, isNodeExpanded, visible]);
+
   return (
     <div
       role="tooltip"
@@ -317,9 +332,9 @@ const GraphTooltip = ({
                 className="px-2.5 text-p6 py-1 hover:dark:bg-[#A1AFB9] flex items-center gap-2 w-full"
               >
                 <div className="h-4 w-4 shrink-0">
-                  <ResizeUpIcon />
+                  {expanded ? <ResizeDownIcon /> : <ResizeUpIcon />}
                 </div>
-                <div>Expand / Collapse</div>
+                <div>{expanded ? 'Collapse' : 'Expand'}</div>
               </button>
             </div>
           )}