From 10c9cea0cca386ac7fac7da1219a0eb9bde6f01a Mon Sep 17 00:00:00 2001
From: yvonneyx <zhuyuxin0627@gmail.com>
Date: Fri, 27 Sep 2024 10:38:07 +0800
Subject: [PATCH] fix: adjust node styles

---
 .../core/base/node/organization-chart-node.tsx  | 17 +++++++++++------
 .../graphs/tests/demos/organization-chart2.tsx  |  1 +
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/graphs/src/core/base/node/organization-chart-node.tsx b/packages/graphs/src/core/base/node/organization-chart-node.tsx
index db109824ae..1886ea0131 100644
--- a/packages/graphs/src/core/base/node/organization-chart-node.tsx
+++ b/packages/graphs/src/core/base/node/organization-chart-node.tsx
@@ -13,7 +13,7 @@ export interface OrganizationChartNodeProps extends Pick<React.HTMLAttributes<HT
   /**
    * Working status of the person
    */
-  status: string;
+  status?: string;
   /**
    * Whether the node is hovered
    */
@@ -33,8 +33,7 @@ const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
   ${(props) =>
     props.$isActive &&
     css`
-      height: calc(100% - 6px);
-      width: calc(100% - 6px);
+      transform: translate(-3px, -3px);
       border: 3px solid #1783ff;
     `}
 
@@ -65,7 +64,7 @@ const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
     }
 
     &-detail {
-      flex: 1;
+      width: calc(100% - 56px);
     }
 
     &-name {
@@ -73,17 +72,23 @@ const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
       font-weight: 600;
       font-size: 18px;
       margin-bottom: 5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     &-post {
       color: #616161;
       font-size: 14px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 `;
 
 export const OrganizationChartNode: React.FC<OrganizationChartNodeProps> = (props) => {
-  const { name, position, status, isActive, className, style } = props;
+  const { name, position, status = 'online', isActive, className, style } = props;
 
   const colorMap = {
     online: '#1783FF',
@@ -98,7 +103,7 @@ export const OrganizationChartNode: React.FC<OrganizationChartNodeProps> = (prop
         <div className="org-chart-node-content-avatar">{name.slice(0, 1)}</div>
         <div className="org-chart-node-content-detail">
           <div className="org-chart-node-content-name">{name}</div>
-          <div className="org-chart-node-content-post">{position}</div>
+          {position && <div className="org-chart-node-content-post">{position}</div>}
         </div>
       </div>
     </StyledWrapper>
diff --git a/packages/graphs/tests/demos/organization-chart2.tsx b/packages/graphs/tests/demos/organization-chart2.tsx
index 0fb7fe76f5..bf5d135f62 100644
--- a/packages/graphs/tests/demos/organization-chart2.tsx
+++ b/packages/graphs/tests/demos/organization-chart2.tsx
@@ -42,6 +42,7 @@ export const OrganizationChart2 = () => {
         endArrow: true,
       },
     },
+    behaviors: (prev) => [...prev, 'hover-activate-neighbors'],
     transforms: (prev) => [
       ...prev.filter((t) => (t as any).type !== 'collapse-expand-react-node'),
       {