UI performance fix

* Move ws entry listener to entriesList component

* unused code

agent/pkg/api/main.go

@@ -168,6 +168,7 @@ func resolveIP(connectionInfo *tapApi.ConnectionInfo) (resolvedSource string, re
 			}
 		} else {
 			resolvedSource = resolvedSourceObject.FullAddress
+			namespace = resolvedSourceObject.Namespace
 		}
 
 		unresolvedDestination := fmt.Sprintf("%s:%s", connectionInfo.ServerIP, connectionInfo.ServerPort)
@@ -179,7 +180,11 @@ func resolveIP(connectionInfo *tapApi.ConnectionInfo) (resolvedSource string, re
 			}
 		} else {
 			resolvedDestination = resolvedDestinationObject.FullAddress
-			namespace = resolvedDestinationObject.Namespace
+			// Overwrite namespace (if it was set according to the source)
+			// Only overwrite if non-empty
+			if resolvedDestinationObject.Namespace != "" {
+				namespace = resolvedDestinationObject.Namespace
+			}
 		}
 	}
 	return resolvedSource, resolvedDestination, namespace

agent/pkg/controllers/service_map_controller_test.go

@@ -101,16 +101,18 @@ func (s *ServiceMapControllerSuite) TestGet() {
 
 	// response nodes
 	aNode := servicemap.ServiceMapNode{
-		Id:    1,
-		Name:  TCPEntryA.Name,
-		Entry: TCPEntryA,
-		Count: 1,
+		Id:       1,
+		Name:     TCPEntryA.Name,
+		Entry:    TCPEntryA,
+		Resolved: true,
+		Count:    1,
 	}
 	bNode := servicemap.ServiceMapNode{
-		Id:    2,
-		Name:  TCPEntryB.Name,
-		Entry: TCPEntryB,
-		Count: 1,
+		Id:       2,
+		Name:     TCPEntryB.Name,
+		Entry:    TCPEntryB,
+		Resolved: true,
+		Count:    1,
 	}
 	assert.Contains(response.Nodes, aNode)
 	assert.Contains(response.Nodes, bNode)

agent/pkg/servicemap/models.go

@@ -18,10 +18,11 @@ type ServiceMapResponse struct {
 }
 
 type ServiceMapNode struct {
-	Id    int         `json:"id"`
-	Name  string      `json:"name"`
-	Entry *tapApi.TCP `json:"entry"`
-	Count int         `json:"count"`
+	Id       int         `json:"id"`
+	Name     string      `json:"name"`
+	Entry    *tapApi.TCP `json:"entry"`
+	Count    int         `json:"count"`
+	Resolved bool        `json:"resolved"`
 }
 
 type ServiceMapEdge struct {

agent/pkg/servicemap/servicemap.go

@@ -227,10 +227,11 @@ func (s *defaultServiceMap) GetNodes() []ServiceMapNode {
 	var nodes []ServiceMapNode
 	for i, n := range s.graph.Nodes {
 		nodes = append(nodes, ServiceMapNode{
-			Id:    n.id,
-			Name:  string(i),
-			Entry: n.entry,
-			Count: n.count,
+			Id:       n.id,
+			Name:     string(i),
+			Resolved: n.entry.Name != UnresolvedNodeName,
+			Entry:    n.entry,
+			Count:    n.count,
 		})
 	}
 	return nodes
@@ -243,16 +244,18 @@ func (s *defaultServiceMap) GetEdges() []ServiceMapEdge {
 			for _, p := range s.graph.Edges[u][v].data {
 				edges = append(edges, ServiceMapEdge{
 					Source: ServiceMapNode{
-						Id:    s.graph.Nodes[u].id,
-						Name:  string(u),
-						Entry: s.graph.Nodes[u].entry,
-						Count: s.graph.Nodes[u].count,
+						Id:       s.graph.Nodes[u].id,
+						Name:     string(u),
+						Entry:    s.graph.Nodes[u].entry,
+						Resolved: s.graph.Nodes[u].entry.Name != UnresolvedNodeName,
+						Count:    s.graph.Nodes[u].count,
 					},
 					Destination: ServiceMapNode{
-						Id:    s.graph.Nodes[v].id,
-						Name:  string(v),
-						Entry: s.graph.Nodes[v].entry,
-						Count: s.graph.Nodes[v].count,
+						Id:       s.graph.Nodes[v].id,
+						Name:     string(v),
+						Entry:    s.graph.Nodes[v].entry,
+						Resolved: s.graph.Nodes[v].entry.Name != UnresolvedNodeName,
+						Count:    s.graph.Nodes[v].count,
 					},
 					Count:    p.count,
 					Protocol: p.protocol,

tap/passive_tapper.go

@@ -112,7 +112,7 @@ func UpdateTapTargets(newTapTargets []v1.Pod) {
 
 	tapTargets = newTapTargets
 
-	packetSourceManager.UpdatePods(tapTargets)
+	packetSourceManager.UpdatePods(tapTargets, !*nodefrag, mainPacketInputChan)
 
 	if tlsTapperInstance != nil {
 		if err := tlstapper.UpdateTapTargets(tlsTapperInstance, &tapTargets, *procfs); err != nil {
@@ -198,12 +198,8 @@ func initializePacketSources() error {
 	}
 
 	var err error
-	if packetSourceManager, err = source.NewPacketSourceManager(*procfs, *fname, *iface, *servicemesh, tapTargets, behaviour); err != nil {
-		return err
-	} else {
-		packetSourceManager.ReadPackets(!*nodefrag, mainPacketInputChan)
-		return nil
-	}
+	packetSourceManager, err = source.NewPacketSourceManager(*procfs, *fname, *iface, *servicemesh, tapTargets, behaviour, !*nodefrag, mainPacketInputChan)
+	return err
 }
 
 func initializePassiveTapper(opts *TapOpts, outputItems chan *api.OutputChannelItem) (*tcpStreamMap, *tcpAssembler) {

tap/source/packet_source_manager.go

@@ -24,7 +24,7 @@ type PacketSourceManager struct {
 }
 
 func NewPacketSourceManager(procfs string, filename string, interfaceName string,
-	mtls bool, pods []v1.Pod, behaviour TcpPacketSourceBehaviour) (*PacketSourceManager, error) {
+	mtls bool, pods []v1.Pod, behaviour TcpPacketSourceBehaviour, ipdefrag bool, packets chan<- TcpPacketInfo) (*PacketSourceManager, error) {
 	hostSource, err := newHostPacketSource(filename, interfaceName, behaviour)
 	if err != nil {
 		return nil, err
@@ -43,7 +43,7 @@ func NewPacketSourceManager(procfs string, filename string, interfaceName string
 		behaviour: behaviour,
 	}
 
-	sourceManager.UpdatePods(pods)
+	go hostSource.readPackets(ipdefrag, packets)
 	return sourceManager, nil
 }
 
@@ -64,16 +64,16 @@ func newHostPacketSource(filename string, interfaceName string,
 	return source, nil
 }
 
-func (m *PacketSourceManager) UpdatePods(pods []v1.Pod) {
+func (m *PacketSourceManager) UpdatePods(pods []v1.Pod, ipdefrag bool, packets chan<- TcpPacketInfo) {
 	if m.config.mtls {
-		m.updateMtlsPods(m.config.procfs, pods, m.config.interfaceName, m.config.behaviour)
+		m.updateMtlsPods(m.config.procfs, pods, m.config.interfaceName, m.config.behaviour, ipdefrag, packets)
 	}
 
 	m.setBPFFilter(pods)
 }
 
 func (m *PacketSourceManager) updateMtlsPods(procfs string, pods []v1.Pod,
-	interfaceName string, behaviour TcpPacketSourceBehaviour) {
+	interfaceName string, behaviour TcpPacketSourceBehaviour, ipdefrag bool, packets chan<- TcpPacketInfo) {
 
 	relevantPids := m.getRelevantPids(procfs, pods)
 	logger.Log.Infof("Updating mtls pods (new: %v) (current: %v)", relevantPids, m.sources)
@@ -90,6 +90,7 @@ func (m *PacketSourceManager) updateMtlsPods(procfs string, pods []v1.Pod,
 			source, err := newNetnsPacketSource(procfs, pid, interfaceName, behaviour)
 
 			if err == nil {
+				go source.readPackets(ipdefrag, packets)
 				m.sources[pid] = source
 			}
 		}
@@ -153,12 +154,6 @@ func (m *PacketSourceManager) setBPFFilter(pods []v1.Pod) {
 	}
 }
 
-func (m *PacketSourceManager) ReadPackets(ipdefrag bool, packets chan<- TcpPacketInfo) {
-	for _, src := range m.sources {
-		go src.readPackets(ipdefrag, packets)
-	}
-}
-
 func (m *PacketSourceManager) Close() {
 	for _, src := range m.sources {
 		src.close()

ui-common/src/components/TrafficViewer/EntriesList.tsx

@@ -10,6 +10,7 @@ import entriesAtom from "../../recoil/entries";
 import queryAtom from "../../recoil/query";
 import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi";
 import TrafficViewerApi from "./TrafficViewerApi";
+import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 
 interface EntriesListProps {
     listEntryREF: any;
@@ -18,8 +19,6 @@ interface EntriesListProps {
     setIsSnappedToBottom: any;
     queriedCurrent: number;
     setQueriedCurrent: any;
-    queriedTotal: number;
-    setQueriedTotal: any;
     startTime: number;
     noMoreDataTop: boolean;
     setNoMoreDataTop: (flag: boolean) => void;
@@ -33,16 +32,18 @@ interface EntriesListProps {
     ws: any;
 }
 
-export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, setQueriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, leftOffTop, setLeftOffTop, openWebSocket, leftOffBottom, truncatedTimestamp, setTruncatedTimestamp, scrollableRef, ws}) => {
+export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, startTime, noMoreDataTop, setNoMoreDataTop, leftOffTop, setLeftOffTop, openWebSocket, leftOffBottom, truncatedTimestamp, setTruncatedTimestamp, scrollableRef, ws}) => {
 
     const [entries, setEntries] = useRecoilState(entriesAtom);
     const query = useRecoilValue(queryAtom);
     const isWsConnectionClosed = ws?.current?.readyState !== WebSocket.OPEN;
+    const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
 
     const trafficViewerApi = useRecoilValue(TrafficViewerApiAtom as RecoilState<TrafficViewerApi>)
 
     const [loadMoreTop, setLoadMoreTop] = useState(false);
     const [isLoadingTop, setIsLoadingTop] = useState(false);
+    const [queriedTotal, setQueriedTotal] = useState(0);
 
     useEffect(() => {
         const list = document.getElementById('list').firstElementChild;
@@ -103,6 +104,29 @@ export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBro
 
     const scrollbarVisible = scrollableRef.current?.childWrapperRef.current.clientHeight > scrollableRef.current?.wrapperRef.current.clientHeight;
 
+  if (ws.current) {
+    ws.current.addEventListener("message", (e) => {
+      if (!e?.data) return;
+      const message = JSON.parse(e.data);
+      switch (message.messageType) {
+        case "entry":
+          const entry = message.data;
+          if (!focusedEntryId) setFocusedEntryId(entry.id.toString());
+          const newEntries = [...entries, entry];
+          if (newEntries.length === 10001) {
+            setLeftOffTop(newEntries[0].entry.id);
+            newEntries.shift();
+            setNoMoreDataTop(false);
+          }
+          setEntries(newEntries);
+          break;
+        case "queryMetadata":
+          setQueriedTotal(message.data.total);
+          break;
+      };
+    });
+  }
+
     return <React.Fragment>
             <div className={styles.list}>
                 <div id="list" ref={listEntryREF} className={styles.list}>

ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass

@@ -66,8 +66,10 @@
   margin-top: -60px
 
 .capture img
-  height: 20px
+  height: 14px
   z-index: 1000
+  margin-top: 12px
+  margin-left: -2px
 
 .endpointServiceContainer
   display: flex
@@ -76,6 +78,7 @@
   padding-right: 10px
   padding-top: 4px
   flex-grow: 1
+  padding-left: 10px
 
 .separatorRight
   display: flex

ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx

@@ -140,8 +140,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
 
 
     const isStatusCodeEnabled = ((entry.proto.name === "http" && "status" in entry) || entry.status !== 0);
-    let endpointServiceContainer = "10px";
-    if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
 
     return <React.Fragment>
         <div
@@ -178,7 +176,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
             {isStatusCodeEnabled && <div>
                 <StatusCode statusCode={entry.status} statusQuery={entry.statusQuery}/>
             </div>}
-            <div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
+            <div className={styles.endpointServiceContainer}>
                 <Summary method={entry.method} methodQuery={entry.methodQuery} summary={entry.summary} summaryQuery={entry.summaryQuery}/>
                 <div className={styles.resolvedName}>
                     <Queryable

ui-common/src/components/TrafficViewer/TrafficViewer.tsx

@@ -58,19 +58,18 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
 
   const classes = useLayoutStyles();
 
-  const [entries, setEntries] = useRecoilState(entriesAtom);
+  const setEntries = useSetRecoilState(entriesAtom);
   const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
   const query = useRecoilValue(queryAtom);
   const setTrafficViewerApiState = useSetRecoilState(trafficViewerApiAtom as RecoilState<TrafficViewerApi>)
   const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom);
   const [noMoreDataTop, setNoMoreDataTop] = useState(false);
   const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
-  const [forceRender, setForceRender] = useState(0);
+  const [wsReadyState, setWsReadyState] = useState(0);
 
   const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
 
   const [queriedCurrent, setQueriedCurrent] = useState(0);
-  const [queriedTotal, setQueriedTotal] = useState(0);
   const [leftOffBottom, setLeftOffBottom] = useState(0);
   const [leftOffTop, setLeftOffTop] = useState(null);
   const [truncatedTimestamp, setTruncatedTimestamp] = useState(0);
@@ -144,9 +143,12 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
       ws.current = new WebSocket(webSocketUrl);
       sendQueryWhenWsOpen(query);
 
+      ws.current.onopen = () => {
+        setWsReadyState(ws?.current?.readyState);
+      }
+
       ws.current.onclose = () => {
-        if (window.location.pathname === "/")
-          setForceRender(forceRender + 1);
+        setWsReadyState(ws?.current?.readyState);
       }
       ws.current.onerror = (event) => {
         console.error("WebSocket error:", event);
@@ -173,21 +175,10 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
   }
 
   if (ws.current) {
-    ws.current.onmessage = (e) => {
+    ws.current.addEventListener("message", (e) => {
       if (!e?.data) return;
       const message = JSON.parse(e.data);
       switch (message.messageType) {
-        case "entry":
-          const entry = message.data;
-          if (!focusedEntryId) setFocusedEntryId(entry.id.toString());
-          const newEntries = [...entries, entry];
-          if (newEntries.length === 10001) {
-            setLeftOffTop(newEntries[0].entry.id);
-            newEntries.shift();
-            setNoMoreDataTop(false);
-          }
-          setEntries(newEntries);
-          break;
         case "status":
           setTappingStatus(message.tappingStatus);
           break;
@@ -208,7 +199,6 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
           break;
         case "queryMetadata":
           setQueriedCurrent(queriedCurrent + message.data.current);
-          setQueriedTotal(message.data.total);
           setLeftOffBottom(message.data.leftOff);
           setTruncatedTimestamp(message.data.truncatedTimestamp);
           if (leftOffTop === null) {
@@ -218,12 +208,8 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
         case "startTime":
           setStartTime(message.data);
           break;
-        default:
-          console.error(
-            `unsupported websocket message type, Got: ${message.messageType}`
-          );
       }
-    };
+    })
   }
 
   useEffect(() => {
@@ -272,7 +258,7 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
   };
 
   const getConnectionIndicator = () => {
-    switch (ws?.current?.readyState) {
+    switch (wsReadyState) {
       case WebSocket.OPEN:
         return <div className={`${TrafficViewerStyles.indicatorContainer} ${TrafficViewerStyles.greenIndicatorContainer}`}>
           <div className={`${TrafficViewerStyles.indicator} ${TrafficViewerStyles.greenIndicator}`} />
@@ -285,7 +271,7 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
   }
 
   const getConnectionTitle = () => {
-    switch (ws?.current?.readyState) {
+    switch (wsReadyState) {
       case WebSocket.OPEN:
         return "streaming live traffic"
       default:
@@ -305,9 +291,9 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
       {tappingStatus && isShowStatusBar && <StatusBar isDemoBannerView={isDemoBannerView} />}
       <div className={TrafficViewerStyles.TrafficPageHeader}>
         <div className={TrafficViewerStyles.TrafficPageStreamStatus}>
-          <img className={TrafficViewerStyles.playPauseIcon} style={{ visibility: ws?.current?.readyState === WebSocket.OPEN ? "visible" : "hidden" }} alt="pause"
+          <img className={TrafficViewerStyles.playPauseIcon} style={{ visibility: wsReadyState === WebSocket.OPEN ? "visible" : "hidden" }} alt="pause"
             src={pauseIcon} onClick={toggleConnection} />
-          <img className={TrafficViewerStyles.playPauseIcon} style={{ position: "absolute", visibility: ws?.current?.readyState === WebSocket.OPEN ? "hidden" : "visible" }} alt="play"
+          <img className={TrafficViewerStyles.playPauseIcon} style={{ position: "absolute", visibility: wsReadyState === WebSocket.OPEN ? "hidden" : "visible" }} alt="play"
             src={playIcon} onClick={toggleConnection} />
           <div className={TrafficViewerStyles.connectionText}>
             {getConnectionTitle()}
@@ -331,8 +317,6 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
               setIsSnappedToBottom={setIsSnappedToBottom}
               queriedCurrent={queriedCurrent}
               setQueriedCurrent={setQueriedCurrent}
-              queriedTotal={queriedTotal}
-              setQueriedTotal={setQueriedTotal}
               startTime={startTime}
               noMoreDataTop={noMoreDataTop}
               setNoMoreDataTop={setNoMoreDataTop}

ui-common/src/components/UI/Protocol.tsx

@@ -54,7 +54,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal}) => {
                     backgroundColor: protocol.backgroundColor,
                     color: protocol.foregroundColor,
                     fontSize: protocol.fontSize,
-                    marginRight: "-20px",
+                    marginRight: "-6px",
                 }}
                 title={protocol.longName}
             >

ui-common/src/components/UI/style/StatusCode.module.sass

@@ -9,7 +9,7 @@
     text-align: center
     line-height: 22px
     font-weight: 600
-    margin-left: 8px
+    margin-left: 3px
 
 .neutral
     background: gray

ui/package.json

@@ -48,7 +48,8 @@
     "npm-link-shared": "^0.5.6",
     "react-app-rewire-alias": "^1.1.7",
     "react-dev-utils": "^12.0.0",
-    "recoil": "^0.5.2"
+    "recoil": "^0.5.2",
+    "react-error-overlay": "6.0.9"
   },
   "scripts": {
     "start": "craco start",

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>
     );
 
-}
+}

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
+export default ServiceMapOptions