From be53a52f05588d7dd6dfe170005a12afda662f25 Mon Sep 17 00:00:00 2001
From: Oliver Gupte <ogupte@users.noreply.github.com>
Date: Thu, 11 Jun 2020 00:53:53 -0700
Subject: [PATCH] [APM] Service maps - adds new storybook stories to test out
 various data sets (#68727)

* - move cytoscape stories-related files to __stories__
- adds story to generate/render service map response data
- adds story that renders any service map response json
- adds story that renders opbeans test data

* added example data for 'Hipster store' and 'Todo app'

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../app/ServiceMap/Cytoscape.stories.tsx      | 354 ---------
 .../__stories__/Cytoscape.stories.tsx         | 327 +++++++++
 .../CytoscapeExampleData.stories.tsx          | 198 +++++
 .../example_response_hipster_store.json       | 355 +++++++++
 .../example_response_opbeans_beats.json}      | 688 ++++++++----------
 .../__stories__/example_response_todo.json    |  63 ++
 .../generate_service_map_elements.ts          | 222 ++++++
 7 files changed, 1475 insertions(+), 732 deletions(-)
 delete mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_hipster_store.json
 rename x-pack/plugins/apm/public/components/app/ServiceMap/{cytoscape-layout-test-response.json => __stories__/example_response_opbeans_beats.json} (57%)
 create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_todo.json
 create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/generate_service_map_elements.ts

diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx
deleted file mode 100644
index 30031a05304bba..00000000000000
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx
+++ /dev/null
@@ -1,354 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { EuiCard, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { storiesOf } from '@storybook/react';
-import cytoscape from 'cytoscape';
-import React from 'react';
-import { Cytoscape } from './Cytoscape';
-import serviceMapResponse from './cytoscape-layout-test-response.json';
-import { iconForNode } from './icons';
-
-const elementsFromResponses = serviceMapResponse.elements;
-
-storiesOf('app/ServiceMap/Cytoscape', module).add(
-  'example',
-  () => {
-    const elements: cytoscape.ElementDefinition[] = [
-      {
-        data: {
-          id: 'opbeans-python',
-          'service.name': 'opbeans-python',
-          'agent.name': 'python',
-        },
-      },
-      {
-        data: {
-          id: 'opbeans-node',
-          'service.name': 'opbeans-node',
-          'agent.name': 'nodejs',
-        },
-      },
-      {
-        data: {
-          id: 'opbeans-ruby',
-          'service.name': 'opbeans-ruby',
-          'agent.name': 'ruby',
-        },
-      },
-      { data: { source: 'opbeans-python', target: 'opbeans-node' } },
-      {
-        data: {
-          bidirectional: true,
-          source: 'opbeans-python',
-          target: 'opbeans-ruby',
-        },
-      },
-    ];
-    const height = 300;
-    const width = 1340;
-    const serviceName = 'opbeans-python';
-    return (
-      <Cytoscape
-        elements={elements}
-        height={height}
-        width={width}
-        serviceName={serviceName}
-      />
-    );
-  },
-  {
-    info: {
-      propTables: false,
-      source: false,
-    },
-  }
-);
-
-storiesOf('app/ServiceMap/Cytoscape', module)
-  .add(
-    'node icons',
-    () => {
-      const cy = cytoscape();
-      const elements = [
-        { data: { id: 'default' } },
-        {
-          data: {
-            id: 'aws',
-            'span.type': 'aws',
-            'span.subtype': 'servicename',
-          },
-        },
-        { data: { id: 'cache', 'span.type': 'cache' } },
-        { data: { id: 'database', 'span.type': 'db' } },
-        {
-          data: {
-            id: 'cassandra',
-            'span.type': 'db',
-            'span.subtype': 'cassandra',
-          },
-        },
-        {
-          data: {
-            id: 'elasticsearch',
-            'span.type': 'db',
-            'span.subtype': 'elasticsearch',
-          },
-        },
-        {
-          data: {
-            id: 'mongodb',
-            'span.type': 'db',
-            'span.subtype': 'mongodb',
-          },
-        },
-        {
-          data: {
-            id: 'mysql',
-            'span.type': 'db',
-            'span.subtype': 'mysql',
-          },
-        },
-        {
-          data: {
-            id: 'postgresql',
-            'span.type': 'db',
-            'span.subtype': 'postgresql',
-          },
-        },
-        {
-          data: {
-            id: 'redis',
-            'span.type': 'db',
-            'span.subtype': 'redis',
-          },
-        },
-        { data: { id: 'external', 'span.type': 'external' } },
-        { data: { id: 'ext', 'span.type': 'ext' } },
-        {
-          data: {
-            id: 'graphql',
-            'span.type': 'external',
-            'span.subtype': 'graphql',
-          },
-        },
-        {
-          data: {
-            id: 'grpc',
-            'span.type': 'external',
-            'span.subtype': 'grpc',
-          },
-        },
-        {
-          data: {
-            id: 'websocket',
-            'span.type': 'external',
-            'span.subtype': 'websocket',
-          },
-        },
-        { data: { id: 'messaging', 'span.type': 'messaging' } },
-        {
-          data: {
-            id: 'jms',
-            'span.type': 'messaging',
-            'span.subtype': 'jms',
-          },
-        },
-        {
-          data: {
-            id: 'kafka',
-            'span.type': 'messaging',
-            'span.subtype': 'kafka',
-          },
-        },
-        { data: { id: 'template', 'span.type': 'template' } },
-        {
-          data: {
-            id: 'handlebars',
-            'span.type': 'template',
-            'span.subtype': 'handlebars',
-          },
-        },
-        {
-          data: {
-            id: 'dark',
-            'service.name': 'dark service',
-            'agent.name': 'dark',
-          },
-        },
-        {
-          data: {
-            id: 'dotnet',
-            'service.name': 'dotnet service',
-            'agent.name': 'dotnet',
-          },
-        },
-        {
-          data: {
-            id: 'dotNet',
-            'service.name': 'dotNet service',
-            'agent.name': 'dotNet',
-          },
-        },
-        {
-          data: {
-            id: 'go',
-            'service.name': 'go service',
-            'agent.name': 'go',
-          },
-        },
-        {
-          data: {
-            id: 'java',
-            'service.name': 'java service',
-            'agent.name': 'java',
-          },
-        },
-        {
-          data: {
-            id: 'RUM (js-base)',
-            'service.name': 'RUM service',
-            'agent.name': 'js-base',
-          },
-        },
-        {
-          data: {
-            id: 'RUM (rum-js)',
-            'service.name': 'RUM service',
-            'agent.name': 'rum-js',
-          },
-        },
-        {
-          data: {
-            id: 'nodejs',
-            'service.name': 'nodejs service',
-            'agent.name': 'nodejs',
-          },
-        },
-        {
-          data: {
-            id: 'php',
-            'service.name': 'php service',
-            'agent.name': 'php',
-          },
-        },
-        {
-          data: {
-            id: 'python',
-            'service.name': 'python service',
-            'agent.name': 'python',
-          },
-        },
-        {
-          data: {
-            id: 'ruby',
-            'service.name': 'ruby service',
-            'agent.name': 'ruby',
-          },
-        },
-      ];
-      cy.add(elements);
-
-      return (
-        <EuiFlexGroup gutterSize="l" wrap={true}>
-          {cy.nodes().map((node) => (
-            <EuiFlexItem key={node.data('id')}>
-              <EuiCard
-                description={
-                  <code style={{ textAlign: 'left', whiteSpace: 'nowrap' }}>
-                    agent.name: {node.data('agent.name') || 'undefined'}
-                    <br />
-                    span.type: {node.data('span.type') || 'undefined'}
-                    <br />
-                    span.subtype: {node.data('span.subtype') || 'undefined'}
-                  </code>
-                }
-                icon={
-                  <img
-                    alt={node.data('label')}
-                    src={iconForNode(node)}
-                    height={80}
-                    width={80}
-                  />
-                }
-                title={node.data('id')}
-              />
-            </EuiFlexItem>
-          ))}
-        </EuiFlexGroup>
-      );
-    },
-    {
-      info: {
-        propTables: false,
-        source: false,
-      },
-    }
-  )
-  .add(
-    'layout',
-    () => {
-      const height = 640;
-      const width = 1340;
-      const serviceName = undefined; // global service map
-
-      return (
-        <Cytoscape
-          elements={elementsFromResponses}
-          height={height}
-          width={width}
-          serviceName={serviceName}
-        />
-      );
-    },
-    {
-      info: {
-        source: false,
-      },
-    }
-  )
-  .addParameters({ options: { showPanel: false } });
-
-storiesOf('app/ServiceMap/Cytoscape', module).add(
-  'node severity',
-  () => {
-    const elements = [
-      { data: { id: 'undefined', 'service.name': 'severity: undefined' } },
-      {
-        data: {
-          id: 'warning',
-          'service.name': 'severity: warning',
-          severity: 'warning',
-        },
-      },
-      {
-        data: {
-          id: 'minor',
-          'service.name': 'severity: minor',
-          severity: 'minor',
-        },
-      },
-      {
-        data: {
-          id: 'major',
-          'service.name': 'severity: major',
-          severity: 'major',
-        },
-      },
-      {
-        data: {
-          id: 'critical',
-          'service.name': 'severity: critical',
-          severity: 'critical',
-        },
-      },
-    ];
-    return <Cytoscape elements={elements} height={600} width={1340} />;
-  },
-  {
-    info: { propTables: false, source: false },
-  }
-);
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx
new file mode 100644
index 00000000000000..28cb7a6f9d291d
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx
@@ -0,0 +1,327 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiCard, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { storiesOf } from '@storybook/react';
+import cytoscape from 'cytoscape';
+import React from 'react';
+import { Cytoscape } from '../Cytoscape';
+import { iconForNode } from '../icons';
+
+storiesOf('app/ServiceMap/Cytoscape', module).add(
+  'example',
+  () => {
+    const elements: cytoscape.ElementDefinition[] = [
+      {
+        data: {
+          id: 'opbeans-python',
+          'service.name': 'opbeans-python',
+          'agent.name': 'python',
+        },
+      },
+      {
+        data: {
+          id: 'opbeans-node',
+          'service.name': 'opbeans-node',
+          'agent.name': 'nodejs',
+        },
+      },
+      {
+        data: {
+          id: 'opbeans-ruby',
+          'service.name': 'opbeans-ruby',
+          'agent.name': 'ruby',
+        },
+      },
+      { data: { source: 'opbeans-python', target: 'opbeans-node' } },
+      {
+        data: {
+          bidirectional: true,
+          source: 'opbeans-python',
+          target: 'opbeans-ruby',
+        },
+      },
+    ];
+    const height = 300;
+    const width = 1340;
+    const serviceName = 'opbeans-python';
+    return (
+      <Cytoscape
+        elements={elements}
+        height={height}
+        width={width}
+        serviceName={serviceName}
+      />
+    );
+  },
+  {
+    info: {
+      propTables: false,
+      source: false,
+    },
+  }
+);
+
+storiesOf('app/ServiceMap/Cytoscape', module).add(
+  'node icons',
+  () => {
+    const cy = cytoscape();
+    const elements = [
+      { data: { id: 'default' } },
+      {
+        data: {
+          id: 'aws',
+          'span.type': 'aws',
+          'span.subtype': 'servicename',
+        },
+      },
+      { data: { id: 'cache', 'span.type': 'cache' } },
+      { data: { id: 'database', 'span.type': 'db' } },
+      {
+        data: {
+          id: 'cassandra',
+          'span.type': 'db',
+          'span.subtype': 'cassandra',
+        },
+      },
+      {
+        data: {
+          id: 'elasticsearch',
+          'span.type': 'db',
+          'span.subtype': 'elasticsearch',
+        },
+      },
+      {
+        data: {
+          id: 'mongodb',
+          'span.type': 'db',
+          'span.subtype': 'mongodb',
+        },
+      },
+      {
+        data: {
+          id: 'mysql',
+          'span.type': 'db',
+          'span.subtype': 'mysql',
+        },
+      },
+      {
+        data: {
+          id: 'postgresql',
+          'span.type': 'db',
+          'span.subtype': 'postgresql',
+        },
+      },
+      {
+        data: {
+          id: 'redis',
+          'span.type': 'db',
+          'span.subtype': 'redis',
+        },
+      },
+      { data: { id: 'external', 'span.type': 'external' } },
+      { data: { id: 'ext', 'span.type': 'ext' } },
+      {
+        data: {
+          id: 'graphql',
+          'span.type': 'external',
+          'span.subtype': 'graphql',
+        },
+      },
+      {
+        data: {
+          id: 'grpc',
+          'span.type': 'external',
+          'span.subtype': 'grpc',
+        },
+      },
+      {
+        data: {
+          id: 'websocket',
+          'span.type': 'external',
+          'span.subtype': 'websocket',
+        },
+      },
+      { data: { id: 'messaging', 'span.type': 'messaging' } },
+      {
+        data: {
+          id: 'jms',
+          'span.type': 'messaging',
+          'span.subtype': 'jms',
+        },
+      },
+      {
+        data: {
+          id: 'kafka',
+          'span.type': 'messaging',
+          'span.subtype': 'kafka',
+        },
+      },
+      { data: { id: 'template', 'span.type': 'template' } },
+      {
+        data: {
+          id: 'handlebars',
+          'span.type': 'template',
+          'span.subtype': 'handlebars',
+        },
+      },
+      {
+        data: {
+          id: 'dark',
+          'service.name': 'dark service',
+          'agent.name': 'dark',
+        },
+      },
+      {
+        data: {
+          id: 'dotnet',
+          'service.name': 'dotnet service',
+          'agent.name': 'dotnet',
+        },
+      },
+      {
+        data: {
+          id: 'dotNet',
+          'service.name': 'dotNet service',
+          'agent.name': 'dotNet',
+        },
+      },
+      {
+        data: {
+          id: 'go',
+          'service.name': 'go service',
+          'agent.name': 'go',
+        },
+      },
+      {
+        data: {
+          id: 'java',
+          'service.name': 'java service',
+          'agent.name': 'java',
+        },
+      },
+      {
+        data: {
+          id: 'RUM (js-base)',
+          'service.name': 'RUM service',
+          'agent.name': 'js-base',
+        },
+      },
+      {
+        data: {
+          id: 'RUM (rum-js)',
+          'service.name': 'RUM service',
+          'agent.name': 'rum-js',
+        },
+      },
+      {
+        data: {
+          id: 'nodejs',
+          'service.name': 'nodejs service',
+          'agent.name': 'nodejs',
+        },
+      },
+      {
+        data: {
+          id: 'php',
+          'service.name': 'php service',
+          'agent.name': 'php',
+        },
+      },
+      {
+        data: {
+          id: 'python',
+          'service.name': 'python service',
+          'agent.name': 'python',
+        },
+      },
+      {
+        data: {
+          id: 'ruby',
+          'service.name': 'ruby service',
+          'agent.name': 'ruby',
+        },
+      },
+    ];
+    cy.add(elements);
+
+    return (
+      <EuiFlexGroup gutterSize="l" wrap={true}>
+        {cy.nodes().map((node) => (
+          <EuiFlexItem key={node.data('id')}>
+            <EuiCard
+              description={
+                <code style={{ textAlign: 'left', whiteSpace: 'nowrap' }}>
+                  agent.name: {node.data('agent.name') || 'undefined'}
+                  <br />
+                  span.type: {node.data('span.type') || 'undefined'}
+                  <br />
+                  span.subtype: {node.data('span.subtype') || 'undefined'}
+                </code>
+              }
+              icon={
+                <img
+                  alt={node.data('label')}
+                  src={iconForNode(node)}
+                  height={80}
+                  width={80}
+                />
+              }
+              title={node.data('id')}
+            />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    );
+  },
+  {
+    info: {
+      propTables: false,
+      source: false,
+    },
+  }
+);
+
+storiesOf('app/ServiceMap/Cytoscape', module).add(
+  'node severity',
+  () => {
+    const elements = [
+      { data: { id: 'undefined', 'service.name': 'severity: undefined' } },
+      {
+        data: {
+          id: 'warning',
+          'service.name': 'severity: warning',
+          severity: 'warning',
+        },
+      },
+      {
+        data: {
+          id: 'minor',
+          'service.name': 'severity: minor',
+          severity: 'minor',
+        },
+      },
+      {
+        data: {
+          id: 'major',
+          'service.name': 'severity: major',
+          severity: 'major',
+        },
+      },
+      {
+        data: {
+          id: 'critical',
+          'service.name': 'severity: critical',
+          severity: 'critical',
+        },
+      },
+    ];
+    return <Cytoscape elements={elements} height={600} width={1340} />;
+  },
+  {
+    info: { propTables: false, source: false },
+  }
+);
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx
new file mode 100644
index 00000000000000..33b3fab28f9ac8
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx
@@ -0,0 +1,198 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+/* eslint-disable no-console */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiFieldNumber,
+  EuiToolTip,
+  EuiCodeEditor,
+} from '@elastic/eui';
+import { storiesOf } from '@storybook/react';
+import React, { useState, useEffect } from 'react';
+import { Cytoscape } from '../Cytoscape';
+import { generateServiceMapElements } from './generate_service_map_elements';
+import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json';
+import exampleResponseHipsterStore from './example_response_hipster_store.json';
+import exampleResponseTodo from './example_response_todo.json';
+
+const STORYBOOK_PATH = 'app/ServiceMap/Cytoscape/Example data';
+
+const SESSION_STORAGE_KEY = `${STORYBOOK_PATH}/pre-loaded map`;
+function getSessionJson() {
+  return window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+}
+function setSessionJson(json: string) {
+  window.sessionStorage.setItem(SESSION_STORAGE_KEY, json);
+}
+
+storiesOf(STORYBOOK_PATH, module).add(
+  'Generate map',
+  () => {
+    const [size, setSize] = useState<number>(10);
+    const [json, setJson] = useState<string>('');
+    const [elements, setElements] = useState<any[]>(
+      generateServiceMapElements(size)
+    );
+
+    return (
+      <div>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiButton
+              onClick={() => {
+                setElements(generateServiceMapElements(size));
+                setJson('');
+              }}
+            >
+              Generate service map
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiToolTip position="right" content="Number of services">
+              <EuiFieldNumber
+                placeholder="Size"
+                value={size}
+                onChange={(e) => setSize(e.target.valueAsNumber)}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiButton
+              onClick={() => {
+                setJson(JSON.stringify({ elements }, null, 2));
+              }}
+            >
+              Get JSON
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <Cytoscape elements={elements} height={600} width={1340} />
+
+        {json && (
+          <EuiCodeEditor
+            mode="json"
+            theme="github"
+            width="100%"
+            value={json}
+            setOptions={{ fontSize: '12px' }}
+            isReadOnly
+          />
+        )}
+      </div>
+    );
+  },
+  {
+    info: { propTables: false, source: false },
+  }
+);
+
+storiesOf(STORYBOOK_PATH, module).add(
+  'Map from JSON',
+  () => {
+    const [json, setJson] = useState<string>(
+      getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2)
+    );
+    const [elements, setElements] = useState<any[]>([]);
+    useEffect(() => {
+      try {
+        setElements(JSON.parse(json).elements);
+      } catch (error) {
+        console.log(error);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+      <div>
+        <Cytoscape elements={elements} height={600} width={1340} />
+
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiButton
+              onClick={() => {
+                setElements(JSON.parse(json).elements);
+                setSessionJson(json);
+              }}
+            >
+              Render JSON
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiCodeEditor
+          mode="json"
+          theme="github"
+          width="100%"
+          value={json}
+          setOptions={{ fontSize: '12px' }}
+          onChange={(value) => {
+            setJson(value);
+          }}
+        />
+      </div>
+    );
+  },
+  {
+    info: { propTables: false, source: false },
+  }
+);
+
+storiesOf(STORYBOOK_PATH, module).add(
+  'Todo app',
+  () => {
+    return (
+      <div>
+        <Cytoscape
+          elements={exampleResponseTodo.elements}
+          height={600}
+          width={1340}
+        />
+      </div>
+    );
+  },
+  {
+    info: { propTables: false, source: false },
+  }
+);
+
+storiesOf(STORYBOOK_PATH, module).add(
+  'Opbeans + beats',
+  () => {
+    return (
+      <div>
+        <Cytoscape
+          elements={exampleResponseOpbeansBeats.elements}
+          height={600}
+          width={1340}
+        />
+      </div>
+    );
+  },
+  {
+    info: { propTables: false, source: false },
+  }
+);
+
+storiesOf(STORYBOOK_PATH, module).add(
+  'Hipster store',
+  () => {
+    return (
+      <div>
+        <Cytoscape
+          elements={exampleResponseHipsterStore.elements}
+          height={600}
+          width={1340}
+        />
+      </div>
+    );
+  },
+  {
+    info: { propTables: false, source: false },
+  }
+);
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_hipster_store.json b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_hipster_store.json
new file mode 100644
index 00000000000000..4a31d9d24548ca
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_hipster_store.json
@@ -0,0 +1,355 @@
+{
+  "elements": [
+    {
+      "data": {
+        "source": "advertService",
+        "target": ">elasticsearch",
+        "id": "advertService~>elasticsearch",
+        "sourceData": {
+          "id": "advertService",
+          "service.name": "advertService",
+          "agent.name": "java"
+        },
+        "targetData": {
+          "span.subtype": "elasticsearch",
+          "span.destination.service.resource": "elasticsearch",
+          "span.type": "db",
+          "id": ">elasticsearch",
+          "label": "elasticsearch"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "checkoutService",
+        "target": "cartService",
+        "id": "checkoutService~cartService",
+        "sourceData": {
+          "id": "checkoutService",
+          "service.name": "checkoutService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        },
+        "targetData": {
+          "id": "cartService",
+          "service.name": "cartService",
+          "agent.name": "dotnet"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "checkoutService",
+        "target": "currencyService",
+        "id": "checkoutService~currencyService",
+        "sourceData": {
+          "id": "checkoutService",
+          "service.name": "checkoutService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        },
+        "targetData": {
+          "id": "currencyService",
+          "service.name": "currencyService",
+          "agent.name": "nodejs"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "checkoutService",
+        "target": "emailService",
+        "id": "checkoutService~emailService",
+        "sourceData": {
+          "id": "checkoutService",
+          "service.name": "checkoutService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        },
+        "targetData": {
+          "id": "emailService",
+          "service.name": "emailService",
+          "agent.name": "python"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "checkoutService",
+        "target": "paymentService",
+        "id": "checkoutService~paymentService",
+        "sourceData": {
+          "id": "checkoutService",
+          "service.name": "checkoutService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        },
+        "targetData": {
+          "id": "paymentService",
+          "service.name": "paymentService",
+          "agent.name": "nodejs"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "checkoutService",
+        "target": "productCatalogService",
+        "id": "checkoutService~productCatalogService",
+        "sourceData": {
+          "id": "checkoutService",
+          "service.name": "checkoutService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        },
+        "targetData": {
+          "id": "productCatalogService",
+          "service.name": "productCatalogService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "checkoutService",
+        "target": "shippingService",
+        "id": "checkoutService~shippingService",
+        "sourceData": {
+          "id": "checkoutService",
+          "service.name": "checkoutService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        },
+        "targetData": {
+          "id": "shippingService",
+          "service.name": "shippingService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "frontend",
+        "target": "advertService",
+        "id": "frontend~advertService",
+        "sourceData": {
+          "id": "frontend",
+          "service.name": "frontend",
+          "agent.name": "go"
+        },
+        "targetData": {
+          "id": "advertService",
+          "service.name": "advertService",
+          "agent.name": "java"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "frontend",
+        "target": "cartService",
+        "id": "frontend~cartService",
+        "sourceData": {
+          "id": "frontend",
+          "service.name": "frontend",
+          "agent.name": "go"
+        },
+        "targetData": {
+          "id": "cartService",
+          "service.name": "cartService",
+          "agent.name": "dotnet"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "frontend",
+        "target": "checkoutService",
+        "id": "frontend~checkoutService",
+        "sourceData": {
+          "id": "frontend",
+          "service.name": "frontend",
+          "agent.name": "go"
+        },
+        "targetData": {
+          "id": "checkoutService",
+          "service.name": "checkoutService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "frontend",
+        "target": "currencyService",
+        "id": "frontend~currencyService",
+        "sourceData": {
+          "id": "frontend",
+          "service.name": "frontend",
+          "agent.name": "go"
+        },
+        "targetData": {
+          "id": "currencyService",
+          "service.name": "currencyService",
+          "agent.name": "nodejs"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "frontend",
+        "target": "productCatalogService",
+        "id": "frontend~productCatalogService",
+        "sourceData": {
+          "id": "frontend",
+          "service.name": "frontend",
+          "agent.name": "go"
+        },
+        "targetData": {
+          "id": "productCatalogService",
+          "service.name": "productCatalogService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "frontend",
+        "target": "recommendationService",
+        "id": "frontend~recommendationService",
+        "sourceData": {
+          "id": "frontend",
+          "service.name": "frontend",
+          "agent.name": "go"
+        },
+        "targetData": {
+          "id": "recommendationService",
+          "service.name": "recommendationService",
+          "agent.name": "python"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "frontend",
+        "target": "shippingService",
+        "id": "frontend~shippingService",
+        "sourceData": {
+          "id": "frontend",
+          "service.name": "frontend",
+          "agent.name": "go"
+        },
+        "targetData": {
+          "id": "shippingService",
+          "service.name": "shippingService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "recommendationService",
+        "target": "productCatalogService",
+        "id": "recommendationService~productCatalogService",
+        "sourceData": {
+          "id": "recommendationService",
+          "service.name": "recommendationService",
+          "agent.name": "python"
+        },
+        "targetData": {
+          "id": "productCatalogService",
+          "service.name": "productCatalogService",
+          "agent.name": "go",
+          "service.framework.name": "grpc"
+        }
+      }
+    },
+    {
+      "data": {
+        "id": "frontend",
+        "service.name": "frontend",
+        "agent.name": "go"
+      }
+    },
+    {
+      "data": {
+        "id": "checkoutService",
+        "service.name": "checkoutService",
+        "agent.name": "go",
+        "service.framework.name": "grpc"
+      }
+    },
+    {
+      "data": {
+        "id": "cartService",
+        "service.name": "cartService",
+        "agent.name": "dotnet"
+      }
+    },
+    {
+      "data": {
+        "id": "currencyService",
+        "service.name": "currencyService",
+        "agent.name": "nodejs"
+      }
+    },
+    {
+      "data": {
+        "id": "productCatalogService",
+        "service.name": "productCatalogService",
+        "agent.name": "go",
+        "service.framework.name": "grpc"
+      }
+    },
+    {
+      "data": {
+        "id": "advertService",
+        "service.name": "advertService",
+        "agent.name": "java"
+      }
+    },
+    {
+      "data": {
+        "span.subtype": "elasticsearch",
+        "span.destination.service.resource": "elasticsearch",
+        "span.type": "db",
+        "id": ">elasticsearch",
+        "label": "elasticsearch"
+      }
+    },
+    {
+      "data": {
+        "id": "paymentService",
+        "service.name": "paymentService",
+        "agent.name": "nodejs"
+      }
+    },
+    {
+      "data": {
+        "id": "shippingService",
+        "service.name": "shippingService",
+        "agent.name": "go",
+        "service.framework.name": "grpc"
+      }
+    },
+    {
+      "data": {
+        "id": "emailService",
+        "service.name": "emailService",
+        "agent.name": "python"
+      }
+    },
+    {
+      "data": {
+        "id": "recommendationService",
+        "service.name": "recommendationService",
+        "agent.name": "python"
+      }
+    }
+  ]
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape-layout-test-response.json b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_opbeans_beats.json
similarity index 57%
rename from x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape-layout-test-response.json
rename to x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_opbeans_beats.json
index e55ba65bcbcb91..153fa57bb05e70 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape-layout-test-response.json
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_opbeans_beats.json
@@ -2,12 +2,12 @@
   "elements": [
     {
       "data": {
-        "source": "apm-server",
+        "source": "auditbeat",
         "target": ">elasticsearch",
-        "id": "apm-server~>elasticsearch",
+        "id": "auditbeat~>elasticsearch",
         "sourceData": {
-          "id": "apm-server",
-          "service.name": "apm-server",
+          "id": "auditbeat",
+          "service.name": "auditbeat",
           "agent.name": "go"
         },
         "targetData": {
@@ -21,67 +21,78 @@
     },
     {
       "data": {
-        "source": "client",
-        "target": "opbeans-node",
-        "id": "client~opbeans-node",
+        "source": "filebeat",
+        "target": ">elasticsearch",
+        "id": "filebeat~>elasticsearch",
         "sourceData": {
-          "id": "client",
-          "service.name": "client",
-          "agent.name": "rum-js"
+          "id": "filebeat",
+          "service.name": "filebeat",
+          "agent.name": "go"
         },
         "targetData": {
-          "id": "opbeans-node",
-          "service.environment": "production",
-          "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
+          "span.subtype": "elasticsearch",
+          "span.destination.service.resource": "elasticsearch",
+          "span.type": "db",
+          "id": ">elasticsearch",
+          "label": "elasticsearch"
         }
       }
     },
     {
       "data": {
-        "source": "opbeans-go",
-        "target": ">postgresql",
-        "id": "opbeans-go~>postgresql",
+        "source": "heartbeat",
+        "target": ">elasticsearch",
+        "id": "heartbeat~>elasticsearch",
         "sourceData": {
-          "id": "opbeans-go",
-          "service.environment": "production",
-          "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
+          "id": "heartbeat",
+          "service.name": "heartbeat",
+          "agent.name": "go"
         },
         "targetData": {
-          "span.subtype": "postgresql",
-          "span.destination.service.resource": "postgresql",
+          "span.subtype": "elasticsearch",
+          "span.destination.service.resource": "elasticsearch",
           "span.type": "db",
-          "id": ">postgresql",
-          "label": "postgresql"
+          "id": ">elasticsearch",
+          "label": "elasticsearch"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "metricbeat",
+        "target": ">elasticsearch",
+        "id": "metricbeat~>elasticsearch",
+        "sourceData": {
+          "id": "metricbeat",
+          "service.name": "metricbeat",
+          "agent.name": "go"
+        },
+        "targetData": {
+          "span.subtype": "elasticsearch",
+          "span.destination.service.resource": "elasticsearch",
+          "span.type": "db",
+          "id": ">elasticsearch",
+          "label": "elasticsearch"
         }
       }
     },
     {
       "data": {
         "source": "opbeans-go",
-        "target": "opbeans-dotnet",
-        "id": "opbeans-go~opbeans-dotnet",
+        "target": ">postgresql",
+        "id": "opbeans-go~>postgresql",
         "sourceData": {
           "id": "opbeans-go",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
-        },
-        "targetData": {
-          "id": "opbeans-dotnet",
-          "service.name": "opbeans-dotnet",
-          "agent.name": "dotnet",
-          "service.framework.name": "ASP.NET Core",
-          "max_score": 43.63972429875661,
-          "severity": "minor"
+          "agent.name": "go"
+        },
+        "targetData": {
+          "span.subtype": "postgresql",
+          "span.destination.service.resource": "postgresql",
+          "span.type": "db",
+          "id": ">postgresql",
+          "label": "postgresql"
         }
       }
     },
@@ -92,20 +103,15 @@
         "id": "opbeans-go~opbeans-java",
         "sourceData": {
           "id": "opbeans-go",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
+          "agent.name": "go"
         },
         "targetData": {
           "id": "opbeans-java",
           "service.environment": "production",
           "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
+          "agent.name": "java"
         },
         "bidirectional": true
       }
@@ -117,45 +123,15 @@
         "id": "opbeans-go~opbeans-node",
         "sourceData": {
           "id": "opbeans-go",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
+          "agent.name": "go"
         },
         "targetData": {
           "id": "opbeans-node",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "bidirectional": true
-      }
-    },
-    {
-      "data": {
-        "source": "opbeans-go",
-        "target": "opbeans-python",
-        "id": "opbeans-go~opbeans-python",
-        "sourceData": {
-          "id": "opbeans-go",
-          "service.environment": "production",
-          "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
-        },
-        "targetData": {
-          "id": "opbeans-python",
-          "service.environment": "production",
-          "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "nodejs"
         },
         "bidirectional": true
       }
@@ -167,19 +143,15 @@
         "id": "opbeans-go~opbeans-ruby",
         "sourceData": {
           "id": "opbeans-go",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
+          "agent.name": "go"
         },
         "targetData": {
           "id": "opbeans-ruby",
           "service.environment": "production",
           "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
+          "agent.name": "ruby"
         },
         "bidirectional": true
       }
@@ -193,9 +165,7 @@
           "id": "opbeans-java",
           "service.environment": "production",
           "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
+          "agent.name": "java"
         },
         "targetData": {
           "span.subtype": "postgresql",
@@ -206,29 +176,6 @@
         }
       }
     },
-    {
-      "data": {
-        "source": "opbeans-java",
-        "target": "opbeans-dotnet",
-        "id": "opbeans-java~opbeans-dotnet",
-        "sourceData": {
-          "id": "opbeans-java",
-          "service.environment": "production",
-          "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
-        },
-        "targetData": {
-          "id": "opbeans-dotnet",
-          "service.name": "opbeans-dotnet",
-          "agent.name": "dotnet",
-          "service.framework.name": "ASP.NET Core",
-          "max_score": 43.63972429875661,
-          "severity": "minor"
-        }
-      }
-    },
     {
       "data": {
         "source": "opbeans-java",
@@ -238,18 +185,13 @@
           "id": "opbeans-java",
           "service.environment": "production",
           "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
+          "agent.name": "java"
         },
         "targetData": {
           "id": "opbeans-go",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
+          "agent.name": "go"
         },
         "isInverseEdge": true
       }
@@ -263,111 +205,92 @@
           "id": "opbeans-java",
           "service.environment": "production",
           "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
+          "agent.name": "java"
         },
         "targetData": {
           "id": "opbeans-node",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "bidirectional": true
+          "agent.name": "nodejs"
+        }
       }
     },
     {
       "data": {
         "source": "opbeans-java",
-        "target": "opbeans-python",
-        "id": "opbeans-java~opbeans-python",
+        "target": "opbeans-ruby",
+        "id": "opbeans-java~opbeans-ruby",
         "sourceData": {
           "id": "opbeans-java",
           "service.environment": "production",
           "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
+          "agent.name": "java"
         },
         "targetData": {
-          "id": "opbeans-python",
+          "id": "opbeans-ruby",
           "service.environment": "production",
-          "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "service.name": "opbeans-ruby",
+          "agent.name": "ruby"
         },
         "bidirectional": true
       }
     },
     {
       "data": {
-        "source": "opbeans-java",
-        "target": "opbeans-ruby",
-        "id": "opbeans-java~opbeans-ruby",
+        "source": "opbeans-node",
+        "target": ">postgresql",
+        "id": "opbeans-node~>postgresql",
         "sourceData": {
-          "id": "opbeans-java",
-          "service.environment": "production",
-          "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
+          "id": "opbeans-node",
+          "service.environment": "testing",
+          "service.name": "opbeans-node",
+          "agent.name": "nodejs"
         },
         "targetData": {
-          "id": "opbeans-ruby",
-          "service.environment": "production",
-          "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
-        },
-        "bidirectional": true
+          "span.subtype": "postgresql",
+          "span.destination.service.resource": "postgresql",
+          "span.type": "db",
+          "id": ">postgresql",
+          "label": "postgresql"
+        }
       }
     },
     {
       "data": {
         "source": "opbeans-node",
-        "target": "opbeans-go",
-        "id": "opbeans-node~opbeans-go",
+        "target": ">redis",
+        "id": "opbeans-node~>redis",
         "sourceData": {
           "id": "opbeans-node",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
+          "agent.name": "nodejs"
         },
         "targetData": {
-          "id": "opbeans-go",
-          "service.environment": "production",
-          "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
-        },
-        "isInverseEdge": true
+          "span.subtype": "redis",
+          "span.destination.service.resource": "redis",
+          "span.type": "cache",
+          "id": ">redis",
+          "label": "redis"
+        }
       }
     },
     {
       "data": {
         "source": "opbeans-node",
-        "target": "opbeans-java",
-        "id": "opbeans-node~opbeans-java",
+        "target": "opbeans-go",
+        "id": "opbeans-node~opbeans-go",
         "sourceData": {
           "id": "opbeans-node",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
+          "agent.name": "nodejs"
         },
         "targetData": {
-          "id": "opbeans-java",
-          "service.environment": "production",
-          "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
+          "id": "opbeans-go",
+          "service.environment": "testing",
+          "service.name": "opbeans-go",
+          "agent.name": "go"
         },
         "isInverseEdge": true
       }
@@ -379,19 +302,15 @@
         "id": "opbeans-node~opbeans-python",
         "sourceData": {
           "id": "opbeans-node",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
+          "agent.name": "nodejs"
         },
         "targetData": {
           "id": "opbeans-python",
           "service.environment": "production",
           "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "python"
         },
         "bidirectional": true
       }
@@ -403,17 +322,15 @@
         "id": "opbeans-node~opbeans-ruby",
         "sourceData": {
           "id": "opbeans-node",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
+          "agent.name": "nodejs"
         },
         "targetData": {
           "id": "opbeans-ruby",
           "service.environment": "production",
           "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
+          "agent.name": "ruby"
         },
         "bidirectional": true
       }
@@ -427,10 +344,7 @@
           "id": "opbeans-python",
           "service.environment": "production",
           "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "python"
         },
         "targetData": {
           "span.subtype": "elasticsearch",
@@ -450,10 +364,7 @@
           "id": "opbeans-python",
           "service.environment": "production",
           "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "python"
         },
         "targetData": {
           "span.subtype": "postgresql",
@@ -473,44 +384,17 @@
           "id": "opbeans-python",
           "service.environment": "production",
           "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "python"
         },
         "targetData": {
           "span.subtype": "redis",
           "span.destination.service.resource": "redis",
-          "span.type": "db",
+          "span.type": "cache",
           "id": ">redis",
           "label": "redis"
         }
       }
     },
-    {
-      "data": {
-        "source": "opbeans-python",
-        "target": "opbeans-dotnet",
-        "id": "opbeans-python~opbeans-dotnet",
-        "sourceData": {
-          "id": "opbeans-python",
-          "service.environment": "production",
-          "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
-        },
-        "targetData": {
-          "id": "opbeans-dotnet",
-          "service.name": "opbeans-dotnet",
-          "agent.name": "dotnet",
-          "service.framework.name": "ASP.NET Core",
-          "max_score": 43.63972429875661,
-          "severity": "minor"
-        }
-      }
-    },
     {
       "data": {
         "source": "opbeans-python",
@@ -520,46 +404,14 @@
           "id": "opbeans-python",
           "service.environment": "production",
           "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "python"
         },
         "targetData": {
           "id": "opbeans-go",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
-        },
-        "isInverseEdge": true
-      }
-    },
-    {
-      "data": {
-        "source": "opbeans-python",
-        "target": "opbeans-java",
-        "id": "opbeans-python~opbeans-java",
-        "sourceData": {
-          "id": "opbeans-python",
-          "service.environment": "production",
-          "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
-        },
-        "targetData": {
-          "id": "opbeans-java",
-          "service.environment": "production",
-          "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
-        },
-        "isInverseEdge": true
+          "agent.name": "go"
+        }
       }
     },
     {
@@ -571,17 +423,13 @@
           "id": "opbeans-python",
           "service.environment": "production",
           "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "python"
         },
         "targetData": {
           "id": "opbeans-node",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
+          "agent.name": "nodejs"
         },
         "isInverseEdge": true
       }
@@ -595,17 +443,13 @@
           "id": "opbeans-python",
           "service.environment": "production",
           "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "python"
         },
         "targetData": {
           "id": "opbeans-ruby",
           "service.environment": "production",
           "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
+          "agent.name": "ruby"
         },
         "bidirectional": true
       }
@@ -619,8 +463,7 @@
           "id": "opbeans-ruby",
           "service.environment": "production",
           "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
+          "agent.name": "ruby"
         },
         "targetData": {
           "span.subtype": "postgresql",
@@ -631,28 +474,6 @@
         }
       }
     },
-    {
-      "data": {
-        "source": "opbeans-ruby",
-        "target": "opbeans-dotnet",
-        "id": "opbeans-ruby~opbeans-dotnet",
-        "sourceData": {
-          "id": "opbeans-ruby",
-          "service.environment": "production",
-          "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
-        },
-        "targetData": {
-          "id": "opbeans-dotnet",
-          "service.name": "opbeans-dotnet",
-          "agent.name": "dotnet",
-          "service.framework.name": "ASP.NET Core",
-          "max_score": 43.63972429875661,
-          "severity": "minor"
-        }
-      }
-    },
     {
       "data": {
         "source": "opbeans-ruby",
@@ -662,17 +483,13 @@
           "id": "opbeans-ruby",
           "service.environment": "production",
           "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
+          "agent.name": "ruby"
         },
         "targetData": {
           "id": "opbeans-go",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-go",
-          "agent.name": "go",
-          "service.framework.name": "gin",
-          "max_score": 92.40731,
-          "severity": "critical"
+          "agent.name": "go"
         },
         "isInverseEdge": true
       }
@@ -686,16 +503,13 @@
           "id": "opbeans-ruby",
           "service.environment": "production",
           "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
+          "agent.name": "ruby"
         },
         "targetData": {
           "id": "opbeans-java",
           "service.environment": "production",
           "service.name": "opbeans-java",
-          "agent.name": "java",
-          "max_score": 31.374423806075157,
-          "severity": "minor"
+          "agent.name": "java"
         },
         "isInverseEdge": true
       }
@@ -709,15 +523,13 @@
           "id": "opbeans-ruby",
           "service.environment": "production",
           "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
+          "agent.name": "ruby"
         },
         "targetData": {
           "id": "opbeans-node",
-          "service.environment": "production",
+          "service.environment": "testing",
           "service.name": "opbeans-node",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
+          "agent.name": "nodejs"
         },
         "isInverseEdge": true
       }
@@ -731,29 +543,118 @@
           "id": "opbeans-ruby",
           "service.environment": "production",
           "service.name": "opbeans-ruby",
-          "agent.name": "ruby",
-          "service.framework.name": "Ruby on Rails"
+          "agent.name": "ruby"
         },
         "targetData": {
           "id": "opbeans-python",
           "service.environment": "production",
           "service.name": "opbeans-python",
-          "agent.name": "python",
-          "service.framework.name": "django",
-          "max_score": 92.48735,
-          "severity": "critical"
+          "agent.name": "python"
         },
         "isInverseEdge": true
       }
     },
     {
       "data": {
-        "id": "opbeans-java",
+        "source": "opbeans-rum",
+        "target": "opbeans-go",
+        "id": "opbeans-rum~opbeans-go",
+        "sourceData": {
+          "id": "opbeans-rum",
+          "service.name": "opbeans-rum",
+          "agent.name": "rum-js"
+        },
+        "targetData": {
+          "id": "opbeans-go",
+          "service.environment": "testing",
+          "service.name": "opbeans-go",
+          "agent.name": "go"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "opbeans-rum",
+        "target": "opbeans-java",
+        "id": "opbeans-rum~opbeans-java",
+        "sourceData": {
+          "id": "opbeans-rum",
+          "service.name": "opbeans-rum",
+          "agent.name": "rum-js"
+        },
+        "targetData": {
+          "id": "opbeans-java",
+          "service.environment": "production",
+          "service.name": "opbeans-java",
+          "agent.name": "java"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "opbeans-rum",
+        "target": "opbeans-node",
+        "id": "opbeans-rum~opbeans-node",
+        "sourceData": {
+          "id": "opbeans-rum",
+          "service.name": "opbeans-rum",
+          "agent.name": "rum-js"
+        },
+        "targetData": {
+          "id": "opbeans-node",
+          "service.environment": "testing",
+          "service.name": "opbeans-node",
+          "agent.name": "nodejs"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "opbeans-rum",
+        "target": "opbeans-python",
+        "id": "opbeans-rum~opbeans-python",
+        "sourceData": {
+          "id": "opbeans-rum",
+          "service.name": "opbeans-rum",
+          "agent.name": "rum-js"
+        },
+        "targetData": {
+          "id": "opbeans-python",
+          "service.environment": "production",
+          "service.name": "opbeans-python",
+          "agent.name": "python"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "opbeans-rum",
+        "target": "opbeans-ruby",
+        "id": "opbeans-rum~opbeans-ruby",
+        "sourceData": {
+          "id": "opbeans-rum",
+          "service.name": "opbeans-rum",
+          "agent.name": "rum-js"
+        },
+        "targetData": {
+          "id": "opbeans-ruby",
+          "service.environment": "production",
+          "service.name": "opbeans-ruby",
+          "agent.name": "ruby"
+        }
+      }
+    },
+    {
+      "data": {
+        "id": "opbeans-ruby",
         "service.environment": "production",
-        "service.name": "opbeans-java",
-        "agent.name": "java",
-        "max_score": 31.374423806075157,
-        "severity": "minor"
+        "service.name": "opbeans-ruby",
+        "agent.name": "ruby",
+        "anomaly_score": 0.9451165434428855,
+        "anomaly_severity": "warning",
+        "actual_value": 600594.456140351,
+        "typical_value": 98407.17630621382,
+        "ml_job_id": "opbeans-ruby-request-high_mean_response_time"
       }
     },
     {
@@ -762,45 +663,53 @@
         "service.environment": "production",
         "service.name": "opbeans-python",
         "agent.name": "python",
-        "service.framework.name": "django",
-        "max_score": 92.48735,
-        "severity": "critical"
+        "anomaly_score": 92.10488496975145,
+        "anomaly_severity": "critical",
+        "actual_value": 1596444.9295154181,
+        "typical_value": 1555919.4721130468,
+        "ml_job_id": "opbeans-python-celery-high_mean_response_time"
       }
     },
     {
       "data": {
-        "span.subtype": "postgresql",
-        "span.destination.service.resource": "postgresql",
-        "span.type": "db",
-        "id": ">postgresql",
-        "label": "postgresql"
+        "id": "opbeans-node",
+        "service.environment": "testing",
+        "service.name": "opbeans-node",
+        "agent.name": "nodejs",
+        "anomaly_score": 41.31593099784474,
+        "anomaly_severity": "minor",
+        "actual_value": 1187598.8214285707,
+        "typical_value": 1010742.0877798817,
+        "ml_job_id": "opbeans-node-worker-high_mean_response_time"
       }
     },
     {
       "data": {
-        "id": "opbeans-ruby",
+        "id": "opbeans-java",
         "service.environment": "production",
-        "service.name": "opbeans-ruby",
-        "agent.name": "ruby",
-        "service.framework.name": "Ruby on Rails"
+        "service.name": "opbeans-java",
+        "agent.name": "java",
+        "anomaly_score": 0.36530918260427264,
+        "anomaly_severity": "warning",
+        "actual_value": 2151205.742857142,
+        "typical_value": 55528.3821951346,
+        "ml_job_id": "opbeans-java-request-high_mean_response_time"
       }
     },
     {
       "data": {
-        "id": "opbeans-go",
-        "service.environment": "production",
-        "service.name": "opbeans-go",
-        "agent.name": "go",
-        "service.framework.name": "gin",
-        "max_score": 92.40731,
-        "severity": "critical"
+        "span.subtype": "postgresql",
+        "span.destination.service.resource": "postgresql",
+        "span.type": "db",
+        "id": ">postgresql",
+        "label": "postgresql"
       }
     },
     {
       "data": {
-        "id": "apm-server",
-        "service.name": "apm-server",
-        "agent.name": "go"
+        "id": "opbeans-rum",
+        "service.name": "opbeans-rum",
+        "agent.name": "rum-js"
       }
     },
     {
@@ -814,37 +723,60 @@
     },
     {
       "data": {
-        "id": "opbeans-node",
-        "service.environment": "production",
-        "service.name": "opbeans-node",
-        "agent.name": "nodejs",
-        "service.framework.name": "express"
+        "span.subtype": "redis",
+        "span.destination.service.resource": "redis",
+        "span.type": "cache",
+        "id": ">redis",
+        "label": "redis"
       }
     },
     {
       "data": {
-        "id": "opbeans-dotnet",
-        "service.name": "opbeans-dotnet",
-        "agent.name": "dotnet",
-        "service.framework.name": "ASP.NET Core",
-        "max_score": 43.63972429875661,
-        "severity": "minor"
+        "id": "opbeans-go",
+        "service.environment": "testing",
+        "service.name": "opbeans-go",
+        "agent.name": "go",
+        "anomaly_score": 0.2633884161762746,
+        "anomaly_severity": "warning",
+        "actual_value": 9247010.450000009,
+        "typical_value": 94426.04179433428,
+        "ml_job_id": "opbeans-go-request-high_mean_response_time"
       }
     },
     {
       "data": {
-        "span.subtype": "redis",
-        "span.destination.service.resource": "redis",
-        "span.type": "db",
-        "id": ">redis",
-        "label": "redis"
+        "id": "heartbeat",
+        "service.name": "heartbeat",
+        "agent.name": "go"
       }
     },
     {
       "data": {
-        "id": "client",
-        "service.name": "client",
-        "agent.name": "rum-js"
+        "id": "filebeat",
+        "service.name": "filebeat",
+        "agent.name": "go"
+      }
+    },
+    {
+      "data": {
+        "id": "metricbeat",
+        "service.name": "metricbeat",
+        "agent.name": "go"
+      }
+    },
+    {
+      "data": {
+        "id": "auditbeat",
+        "service.name": "auditbeat",
+        "agent.name": "go"
+      }
+    },
+    {
+      "data": {
+        "service.name": "opbeans-dotnet",
+        "agent.name": "dotNet",
+        "service.environment": null,
+        "id": "opbeans-dotnet"
       }
     }
   ]
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_todo.json b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_todo.json
new file mode 100644
index 00000000000000..c848cd92dd3666
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_todo.json
@@ -0,0 +1,63 @@
+{
+  "elements": [
+    {
+      "data": {
+        "source": "todo-app",
+        "target": "task-service",
+        "id": "todo-app~task-service",
+        "sourceData": {
+          "id": "todo-app",
+          "service.name": "todo-app",
+          "agent.name": "rum-js"
+        },
+        "targetData": {
+          "id": "task-service",
+          "service.name": "task-service",
+          "agent.name": "nodejs"
+        }
+      }
+    },
+    {
+      "data": {
+        "source": "task-service",
+        "target": ">elasticsearch",
+        "id": "task-service~>elasticsearch",
+        "sourceData": {
+          "id": "task-service",
+          "service.name": "task-service",
+          "agent.name": "nodejs"
+        },
+        "targetData": {
+          "span.subtype": "elasticsearch",
+          "span.destination.service.resource": "elasticsearch",
+          "span.type": "db",
+          "id": ">elasticsearch",
+          "label": "elasticsearch"
+        }
+      }
+    },
+    {
+      "data": {
+        "id": "todo-app",
+        "service.name": "todo-app",
+        "agent.name": "rum-js"
+      }
+    },
+    {
+      "data": {
+        "id": "task-service",
+        "service.name": "task-service",
+        "agent.name": "nodejs"
+      }
+    },
+    {
+      "data": {
+        "span.subtype": "elasticsearch",
+        "span.destination.service.resource": "elasticsearch",
+        "span.type": "db",
+        "id": ">elasticsearch",
+        "label": "elasticsearch"
+      }
+    }
+  ]
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/generate_service_map_elements.ts b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/generate_service_map_elements.ts
new file mode 100644
index 00000000000000..e7d55cd5707101
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/generate_service_map_elements.ts
@@ -0,0 +1,222 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { getSeverity } from '../../../../../common/ml_job_constants';
+
+export function generateServiceMapElements(size: number): any[] {
+  const services = range(size).map((i) => {
+    const name = getName();
+    const anomalyScore = randn(101);
+    return {
+      id: name,
+      'service.environment': 'production',
+      'service.name': name,
+      'agent.name': getAgentName(),
+      anomaly_score: anomalyScore,
+      anomaly_severity: getSeverity(anomalyScore),
+      actual_value: Math.random() * 2000000,
+      typical_value: Math.random() * 1000000,
+      ml_job_id: `${name}-request-high_mean_response_time`,
+    };
+  });
+
+  const connections = range(Math.round(size * 1.5))
+    .map((i) => {
+      const sourceNode = services[randn(size)];
+      const targetNode = services[randn(size)];
+      return {
+        id: `${sourceNode.id}~${targetNode.id}`,
+        source: sourceNode.id,
+        target: targetNode.id,
+        ...(probability(0.3)
+          ? {
+              bidirectional: true,
+            }
+          : null),
+      };
+    })
+    .filter(({ source, target }) => source !== target);
+
+  return [
+    ...services.map((serviceData) => ({ data: serviceData })),
+    ...connections.map((connectionData) => ({ data: connectionData })),
+  ];
+}
+
+function range(n: number) {
+  return Array(n)
+    .fill(0)
+    .map((e, i) => i);
+}
+
+function randn(n: number) {
+  return Math.floor(Math.random() * n);
+}
+
+function probability(p: number) {
+  return Math.random() < p;
+}
+
+function getAgentName() {
+  return AGENT_NAMES[Math.floor(Math.random() * AGENT_NAMES.length)];
+}
+
+function getName() {
+  return NAMES[Math.floor(Math.random() * NAMES.length)];
+}
+
+const AGENT_NAMES = [
+  'dotnet',
+  'go',
+  'java',
+  'rum-js',
+  'nodejs',
+  'php',
+  'python',
+  'ruby',
+];
+
+const NAMES = [
+  'abomination',
+  'anaconda',
+  'apocalypse',
+  'arcade',
+  'angel',
+  'asp',
+  'beast',
+  'beetle',
+  'bishop',
+  'black-knight',
+  'black-mamba',
+  'black-widow',
+  'blade',
+  'blob',
+  'boomerang',
+  'bullseye',
+  'black-panther',
+  'cable',
+  'cannonball',
+  'carnage',
+  'callisto',
+  'colossus',
+  'crimson-dynamo',
+  'cyclops',
+  'cypher',
+  'daredevil',
+  'dazzler',
+  'deadpool',
+  'deathbringer',
+  'death',
+  'deathlok',
+  'deathstrike',
+  'destiny',
+  'detonator',
+  'diablo',
+  'doctor-doom',
+  'doctor-octopus',
+  'doctor-strange',
+  'domino',
+  'dragonhart,',
+  'electro',
+  'elektra',
+  'falcon',
+  'forge',
+  'fury',
+  'gambit',
+  'gladiator',
+  'green',
+  'grizzly',
+  'hammerhead',
+  'havok',
+  'hawk-owl',
+  'hawkeye',
+  'hobgoblin',
+  'hulk',
+  'human-torch',
+  'hurricane',
+  'iceman',
+  'iron-man',
+  'invisible-woman',
+  'juggernaut',
+  'kingpin',
+  'ka-zar',
+  'leech',
+  'loki',
+  'longshot',
+  'lumpkin,',
+  'madame-web',
+  'magician',
+  'magneto',
+  'man-thing',
+  'mastermind',
+  'mister-fantastic',
+  'mister-sinister',
+  'mister-nix',
+  'modok',
+  'mojo',
+  'mole-man',
+  'morbius',
+  'morlocks',
+  'moondragon',
+  'moon',
+  'madrox',
+  'mystique',
+  'namor',
+  'nightmare',
+  'nightcrawler',
+  'nighthawk',
+  'nihil',
+  'northstar',
+  'omega-red',
+  'orb-weaver',
+  'ox',
+  'polaris',
+  'power-man',
+  'princess-python',
+  'proteus',
+  'punisher',
+  'pyro',
+  'quicksilver',
+  'rhino',
+  'rogue',
+  'ronin',
+  'sabretooth',
+  'sandman',
+  'scorpion',
+  'sentinel',
+  'shadowcat',
+  'shocker',
+  'silvermane',
+  'silver-surfer',
+  'spider-man',
+  'spider-woman',
+  'spiral',
+  'storm',
+  'stryfe',
+  'sub-zero',
+  'sunder',
+  'super-skrull',
+  'swarm',
+  'tarantula',
+  'thanos',
+  'thor',
+  'tinkerer',
+  'toad',
+  'unus',
+  'valkyrie',
+  'vanisher',
+  'venom',
+  'vision',
+  'vulture',
+  'wasp',
+  'whiz-kid',
+  'wildpack',
+  'wolfsbane',
+  'wolverine',
+  'wraith',
+  'yellowjacket',
+  'zero',
+];