chore: remove mermaid in favor of react archer (#6320)

https://linear.app/unleash/issue/2-1968/use-react-archer-instead-of-mermaid-in-the-network-overview

This PR removes [mermaid](https://github.com/mermaid-js/mermaid) in
favor of [react-archer](https://github.com/pierpo/react-archer), which
meant adapting `NetworkOverview` to use `react-archer` instead, since
that was the only remaining feature using `mermaid`.

Opted not to use RPS labels in the lines since it was very noisy
visually. Took the liberty to make some visual changes, but we can align
afterwards with @nicolaesocaciu if needed.

### Example with 1 app


![image](https://github.com/Unleash/unleash/assets/14320932/83bf3d52-8bb7-49cc-8fef-1d8f758090b7)

### Example with 3 apps


![image](https://github.com/Unleash/unleash/assets/14320932/c01b820e-92e1-495a-a360-0f8ff5fafe50)

### Example with 30 apps


![image](https://github.com/Unleash/unleash/assets/14320932/49314ee0-ad30-4c67-873e-7b91ca39d009)

### Example in light theme


![image](https://github.com/Unleash/unleash/assets/14320932/1ce7055f-df8f-4b4e-b731-bf0f951bbb0c)

frontend/package.json

@@ -88,7 +88,6 @@
     "lodash.isequal": "^4.5.0",
     "lodash.mapvalues": "^4.6.0",
     "lodash.omit": "4.5.0",
-    "mermaid": "^9.3.0",
     "millify": "^6.0.0",
     "msw": "2.1.7",
     "pkginfo": "0.4.1",

frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx

@@ -1,29 +1,60 @@
 import { usePageTitle } from 'hooks/usePageTitle';
-import { Mermaid } from 'component/common/Mermaid/Mermaid';
+import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useInstanceMetrics } from 'hooks/api/getters/useInstanceMetrics/useInstanceMetrics';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert, styled } from '@mui/material';
+import { Alert, Typography, styled, useTheme } from '@mui/material';
 import { unknownify } from 'utils/unknownify';
 import { useMemo } from 'react';
 import {
     RequestsPerSecondSchema,
     RequestsPerSecondSchemaDataResultItem,
 } from 'openapi';
-import logoIcon from 'assets/icons/logoBg.svg';
-import logoWhiteIcon from 'assets/icons/logoWhiteBg.svg';
-import { formatAssetPath } from 'utils/formatPath';
-import { useThemeMode } from 'hooks/useThemeMode';
-
-const StyledMermaid = styled(Mermaid)(({ theme }) => ({
-    '#mermaid .node rect': {
-        fill: theme.palette.secondary.light,
-        stroke: theme.palette.secondary.border,
-    },
-    '#mermaid .unleash-logo': {
-        padding: theme.spacing(1),
+import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
+import { ReactComponent as LogoIconWhite } from 'assets/icons/logoWhiteBg.svg';
+import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
+
+const StyleUnleashContainer = styled('div')(({ theme }) => ({
+    marginBottom: theme.spacing(18),
+    display: 'flex',
+    justifyContent: 'center',
+}));
+
+const StyledAppsContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    gap: theme.spacing(4),
+    flexWrap: 'wrap',
+}));
+
+const StyledElementBox = styled('div')(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: '1px solid',
+    borderColor: theme.palette.secondary.border,
+    backgroundColor: theme.palette.secondary.light,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: theme.spacing(2),
+    zIndex: 1,
+    '& > svg': {
+        width: theme.spacing(9),
+        height: theme.spacing(9),
     },
 }));
 
+const StyledElementHeader = styled(Typography)(({ theme }) => ({
+    fontWeight: theme.fontWeight.bold,
+}));
+
+const StyledElementRPS = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+    color: theme.palette.text.secondary,
+}));
+
+const StyledElementDescription = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+    color: theme.palette.text.secondary,
+}));
+
 const isRecent = (value: ResultValue) => {
     const threshold = 600000; // ten minutes
     return value[0] * 1000 > new Date().getTime() - threshold;
@@ -84,37 +115,58 @@ const toGraphData = (metrics?: RequestsPerSecondSchema) => {
 
 export const NetworkOverview = () => {
     usePageTitle('Network - Overview');
-    const { themeMode } = useThemeMode();
+    const theme = useTheme();
     const { metrics } = useInstanceMetrics();
     const apps = useMemo(() => {
         return toGraphData(metrics);
     }, [metrics]);
 
-    const graph = `
-    graph TD
-        subgraph _[ ]
-        direction BT
-            Unleash(<img src='${formatAssetPath(
-                themeMode === 'dark' ? logoWhiteIcon : logoIcon,
-            )}' width='72' height='72' class='unleash-logo'/><br/>Unleash)
-            ${apps
-                .map(
-                    ({ label, reqs, type }, i) =>
-                        `app-${i}("${label.replaceAll(
-                            '"',
-                            '&quot;',
-                        )}") -- ${reqs} req/s<br>${type} --> Unleash`,
-                )
-                .join('\n')}
-        end
-    `;
+    if (apps.length === 0) {
+        return <Alert severity='warning'>No data available.</Alert>;
+    }
 
     return (
-        <ConditionallyRender
-            condition={apps.length === 0}
-            show={<Alert severity='warning'>No data available.</Alert>}
-            elseShow={<StyledMermaid>{graph}</StyledMermaid>}
-        />
+        <ArcherContainer strokeColor={theme.palette.text.primary}>
+            <StyleUnleashContainer>
+                <ArcherElement id='unleash'>
+                    <StyledElementBox>
+                        <ThemeMode
+                            darkmode={<LogoIconWhite />}
+                            lightmode={<LogoIcon />}
+                        />
+                        <Typography sx={{ marginTop: theme.spacing(1) }}>
+                            Unleash
+                        </Typography>
+                    </StyledElementBox>
+                </ArcherElement>
+            </StyleUnleashContainer>
+
+            <StyledAppsContainer>
+                {apps.map(({ label, reqs, type }, i) => (
+                    <ArcherElement
+                        id={`${i}`}
+                        relations={[
+                            {
+                                targetId: 'unleash',
+                                targetAnchor: 'bottom',
+                                sourceAnchor: 'top',
+                                style: {
+                                    strokeColor: theme.palette.secondary.border,
+                                },
+                            },
+                        ]}
+                    >
+                        <StyledElementBox>
+                            <StyledElementHeader>{label}</StyledElementHeader>
+                            <StyledElementRPS>{reqs} req/s</StyledElementRPS>
+                            <StyledElementDescription>
+                                {type} app
+                            </StyledElementDescription>
+                        </StyledElementBox>
+                    </ArcherElement>
+                ))}
+            </StyledAppsContainer>
+        </ArcherContainer>
     );
 };