From 2427955aa48cf1a92d230ac04d9633c3ee4e15f5 Mon Sep 17 00:00:00 2001
From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>
Date: Wed, 30 Mar 2022 15:30:09 +0300
Subject: [PATCH] Avoid overlap only for service map including under 10
services
---
.../ServiceMapModal/ServiceMapModal.tsx | 29 ++++++++++++-------
.../ServiceMapModal/ServiceMapOptions.ts | 4 +--
2 files changed, 21 insertions(+), 12 deletions(-)
diff --git a/ui/src/components/ServiceMapModal/ServiceMapModal.tsx b/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
index ca1406fe7..f120ce5b5 100644
--- a/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
@@ -100,6 +100,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
const commonClasses = useCommonStyles();
const [isLoading, setIsLoading] = useState<boolean>(true);
const [graphData, setGraphData] = useState<GraphData>({ nodes: [], edges: [] });
+ const [graphOptions, setGraphOptions] = useState(ServiceMapOptions);
const getServiceMapData = useCallback(async () => {
try {
@@ -149,6 +150,14 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
// eslint-disable-next-line
}, [isOpen])
+ useEffect(() => {
+ if(graphData?.nodes?.length === 0) return;
+ let options = {...graphOptions};
+ options.physics.barnesHut.avoidOverlap = graphData?.nodes?.length > 10 ? 0 : 1;
+ setGraphOptions(options);
+ // eslint-disable-next-line
+ },[graphData?.nodes?.length])
+
useEffect(() => {
getServiceMapData();
return () => setGraphData({ nodes: [], edges: [] })
@@ -180,7 +189,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div>
<Button
- startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}></img>}
+ startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}/>}
size="medium"
variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
@@ -189,20 +198,20 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
Refresh
</Button>
</div>
- <img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}></img>
+ <img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}/>
</div>
<Graph
graph={graphData}
- options={ServiceMapOptions}
+ options={graphOptions}
/>
<div className='legend-scale'>
<ul className='legend-labels'>
- <li><span style={{ background: '#205cf5' }}></span>HTTP</li>
- <li><span style={{ background: '#244c5a' }}></span>HTTP/2</li>
- <li><span style={{ background: '#244c5a' }}></span>gRPC</li>
- <li><span style={{ background: '#ff6600' }}></span>AMQP</li>
- <li><span style={{ background: '#000000' }}></span>KAFKA</li>
- <li><span style={{ background: '#a41e11' }}></span>REDIS</li>
+ <li><span style={{ background: '#205cf5' }}/>HTTP</li>
+ <li><span style={{ background: '#244c5a' }}/>HTTP/2</li>
+ <li><span style={{ background: '#244c5a' }}/>gRPC</li>
+ <li><span style={{ background: '#ff6600' }}/>AMQP</li>
+ <li><span style={{ background: '#000000' }}/>KAFKA</li>
+ <li><span style={{ background: '#a41e11' }}/>REDIS</li>
</ul>
</div>
</div>}
@@ -211,4 +220,4 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
</Modal>
);
-}
\ No newline at end of file
+}
diff --git a/ui/src/components/ServiceMapModal/ServiceMapOptions.ts b/ui/src/components/ServiceMapModal/ServiceMapOptions.ts
index 057ed7101..b525f66dc 100644
--- a/ui/src/components/ServiceMapModal/ServiceMapOptions.ts
+++ b/ui/src/components/ServiceMapModal/ServiceMapOptions.ts
@@ -148,7 +148,7 @@ const ServiceMapOptions = {
springLength: 180,
springConstant: 0.04,
damping: 0.2,
- avoidOverlap: 1
+ avoidOverlap: 0
},
},
layout: {
@@ -171,4 +171,4 @@ const ServiceMapOptions = {
},
};
-export default ServiceMapOptions
\ No newline at end of file
+export default ServiceMapOptions
--
GitLab