diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
index a4d42bcf51d0..e1b5ffcd0e0f 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
@@ -40,7 +40,6 @@ const Container = styled.div<IContainerStyleProps>`
   padding-bottom: ${px(units.plus)};
   margin-right: ${(props) => px(props.timelineMargins.right)};
   margin-left: ${(props) => px(props.timelineMargins.left)};
-  border-top: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
   background-color: ${({ isSelected, theme }) =>
     isSelected ? theme.eui.euiColorLightestShade : 'initial'};
   cursor: pointer;
@@ -191,7 +190,10 @@ export function WaterfallItem({
       type={item.docType}
       timelineMargins={timelineMargins}
       isSelected={isSelected}
-      onClick={onClick}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation();
+        onClick();
+      }}
     >
       <ItemBar // using inline styles instead of props to avoid generating a css class for each item
         style={{ left: `${left}%`, width: `${width}%` }}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
new file mode 100644
index 000000000000..833937835f87
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
@@ -0,0 +1,170 @@
+/*
+ * 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 { EuiAccordion, EuiAccordionProps } from '@elastic/eui';
+import { Location } from 'history';
+import { isEmpty } from 'lodash';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Margins } from '../../../../../shared/charts/Timeline';
+import { WaterfallItem } from './WaterfallItem';
+import {
+  IWaterfall,
+  IWaterfallItem,
+} from './waterfall_helpers/waterfall_helpers';
+
+interface AccordionWaterfallProps {
+  isOpen: boolean;
+  item: IWaterfallItem;
+  level: number;
+  serviceColors: IWaterfall['serviceColors'];
+  duration: IWaterfall['duration'];
+  waterfallItemId?: string;
+  location: Location;
+  errorsPerTransaction: IWaterfall['errorsPerTransaction'];
+  childrenByParentId: Record<string, IWaterfallItem[]>;
+  onToggleEntryTransaction?: (
+    nextState: EuiAccordionProps['forceState']
+  ) => void;
+  timelineMargins: Margins;
+  onClickWaterfallItem: (item: IWaterfallItem) => void;
+}
+
+const StyledAccordion = styled(EuiAccordion).withConfig({
+  shouldForwardProp: (prop) =>
+    !['childrenCount', 'marginLeftLevel', 'hasError'].includes(prop),
+})<
+  EuiAccordionProps & {
+    childrenCount: number;
+    marginLeftLevel: number;
+    hasError: boolean;
+  }
+>`
+  .euiAccordion {
+    border-top: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
+  }
+  .euiIEFlexWrapFix {
+    width: 100%;
+    height: 48px;
+  }
+  .euiAccordion__childWrapper {
+    transition: none;
+  }
+
+  .euiAccordion__padding--l {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .euiAccordion__iconWrapper {
+    display: flex;
+    position: relative;
+    &:after {
+      content: ${(props) => `'${props.childrenCount}'`};
+      position: absolute;
+      left: 20px;
+      top: -1px;
+      z-index: 1;
+      font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
+    }
+  }
+
+  ${(props) => {
+    const borderLeft = props.hasError
+      ? `2px solid ${props.theme.eui.euiColorDanger};`
+      : `1px solid ${props.theme.eui.euiColorLightShade};`;
+    return `.button_${props.id} {
+      margin-left: ${props.marginLeftLevel}px;
+      border-left: ${borderLeft}
+      &:hover {
+        background-color: ${props.theme.eui.euiColorLightestShade};
+      }
+    }`;
+    //
+  }}
+`;
+
+const WaterfallItemContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  left: 0;
+`;
+
+export function AccordionWaterfall(props: AccordionWaterfallProps) {
+  const [isOpen, setIsOpen] = useState(props.isOpen);
+
+  const {
+    item,
+    level,
+    serviceColors,
+    duration,
+    childrenByParentId,
+    waterfallItemId,
+    location,
+    errorsPerTransaction,
+    timelineMargins,
+    onClickWaterfallItem,
+  } = props;
+
+  const nextLevel = level + 1;
+
+  const errorCount =
+    item.docType === 'transaction'
+      ? errorsPerTransaction[item.doc.transaction.id]
+      : 0;
+
+  const children = childrenByParentId[item.id] || [];
+
+  // To indent the items creating the parent/child tree
+  const marginLeftLevel = 8 * level;
+
+  return (
+    <StyledAccordion
+      buttonClassName={`button_${item.id}`}
+      key={item.id}
+      id={item.id}
+      hasError={errorCount > 0}
+      marginLeftLevel={marginLeftLevel}
+      childrenCount={children.length}
+      buttonContent={
+        <WaterfallItemContainer>
+          <WaterfallItem
+            key={item.id}
+            timelineMargins={timelineMargins}
+            color={serviceColors[item.doc.service.name]}
+            item={item}
+            totalDuration={duration}
+            isSelected={item.id === waterfallItemId}
+            errorCount={errorCount}
+            onClick={() => {
+              onClickWaterfallItem(item);
+            }}
+          />
+        </WaterfallItemContainer>
+      }
+      arrowDisplay={isEmpty(children) ? 'none' : 'left'}
+      initialIsOpen={true}
+      forceState={isOpen ? 'open' : 'closed'}
+      onToggle={() => setIsOpen((isCurrentOpen) => !isCurrentOpen)}
+    >
+      {children.map((child) => (
+        <AccordionWaterfall
+          key={child.id}
+          isOpen={isOpen}
+          item={child}
+          level={nextLevel}
+          serviceColors={serviceColors}
+          waterfallItemId={waterfallItemId}
+          location={location}
+          errorsPerTransaction={errorsPerTransaction}
+          duration={duration}
+          childrenByParentId={childrenByParentId}
+          timelineMargins={timelineMargins}
+          onClickWaterfallItem={onClickWaterfallItem}
+        />
+      ))}
+    </StyledAccordion>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
index 1fd0ec761b1a..7daf1b798749 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
@@ -4,21 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiCallOut } from '@elastic/eui';
+import { EuiButtonEmpty, EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
-import React from 'react';
+import React, { useState } from 'react';
 // @ts-ignore
 import { StickyContainer } from 'react-sticky';
 import styled from 'styled-components';
 import { px } from '../../../../../../style/variables';
 import { history } from '../../../../../../utils/history';
 import { Timeline } from '../../../../../shared/charts/Timeline';
+import { HeightRetainer } from '../../../../../shared/HeightRetainer';
 import { fromQuery, toQuery } from '../../../../../shared/Links/url_helpers';
 import { getAgentMarks } from '../Marks/get_agent_marks';
 import { getErrorMarks } from '../Marks/get_error_marks';
+import { AccordionWaterfall } from './accordion_waterfall';
 import { WaterfallFlyout } from './WaterfallFlyout';
-import { WaterfallItem } from './WaterfallItem';
 import {
   IWaterfall,
   IWaterfallItem,
@@ -32,7 +33,7 @@ const Container = styled.div`
 
 const TIMELINE_MARGINS = {
   top: 40,
-  left: 50,
+  left: 100,
   right: 50,
   bottom: 0,
 };
@@ -58,6 +59,7 @@ const WaterfallItemsContainer = styled.div<{
   paddingTop: number;
 }>`
   padding-top: ${(props) => px(props.paddingTop)};
+  border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade};
 `;
 
 interface Props {
@@ -66,72 +68,91 @@ interface Props {
   location: Location;
   exceedsMax: boolean;
 }
-
 export function Waterfall({
   waterfall,
   exceedsMax,
   waterfallItemId,
   location,
 }: Props) {
+  const [isAccordionOpen, setIsAccordionOpen] = useState(true);
   const itemContainerHeight = 58; // TODO: This is a nasty way to calculate the height of the svg element. A better approach should be found
   const waterfallHeight = itemContainerHeight * waterfall.items.length;
 
   const { serviceColors, duration } = waterfall;
 
-  const agentMarks = getAgentMarks(waterfall.entryTransaction);
+  const agentMarks = getAgentMarks(waterfall.entryWaterfallTransaction?.doc);
   const errorMarks = getErrorMarks(waterfall.errorItems, serviceColors);
 
-  function renderWaterfallItem(item: IWaterfallItem) {
-    const errorCount =
-      item.docType === 'transaction'
-        ? waterfall.errorsPerTransaction[item.doc.transaction.id]
-        : 0;
-
+  function renderItems(
+    childrenByParentId: Record<string | number, IWaterfallItem[]>
+  ) {
+    const { entryWaterfallTransaction } = waterfall;
+    if (!entryWaterfallTransaction) {
+      return null;
+    }
     return (
-      <WaterfallItem
-        key={item.id}
+      <AccordionWaterfall
+        // used to recreate the entire tree when `isAccordionOpen` changes, collapsing or expanding all elements.
+        key={`accordion_state_${isAccordionOpen}`}
+        isOpen={isAccordionOpen}
+        item={entryWaterfallTransaction}
+        level={0}
+        serviceColors={serviceColors}
+        waterfallItemId={waterfallItemId}
+        location={location}
+        errorsPerTransaction={waterfall.errorsPerTransaction}
+        duration={duration}
+        childrenByParentId={childrenByParentId}
         timelineMargins={TIMELINE_MARGINS}
-        color={serviceColors[item.doc.service.name]}
-        item={item}
-        totalDuration={duration}
-        isSelected={item.id === waterfallItemId}
-        errorCount={errorCount}
-        onClick={() => toggleFlyout({ item, location })}
+        onClickWaterfallItem={(item: IWaterfallItem) =>
+          toggleFlyout({ item, location })
+        }
       />
     );
   }
 
   return (
-    <Container>
-      {exceedsMax && (
-        <EuiCallOut
-          color="warning"
-          size="s"
-          iconType="alert"
-          title={i18n.translate('xpack.apm.waterfall.exceedsMax', {
-            defaultMessage:
-              'Number of items in this trace exceed what is displayed',
-          })}
-        />
-      )}
-      <StickyContainer>
-        <Timeline
-          marks={[...agentMarks, ...errorMarks]}
-          xMax={duration}
-          height={waterfallHeight}
-          margins={TIMELINE_MARGINS}
-        />
-        <WaterfallItemsContainer paddingTop={TIMELINE_MARGINS.top}>
-          {waterfall.items.map(renderWaterfallItem)}
-        </WaterfallItemsContainer>
-      </StickyContainer>
+    <HeightRetainer>
+      <Container>
+        {exceedsMax && (
+          <EuiCallOut
+            color="warning"
+            size="s"
+            iconType="alert"
+            title={i18n.translate('xpack.apm.waterfall.exceedsMax', {
+              defaultMessage:
+                'Number of items in this trace exceed what is displayed',
+            })}
+          />
+        )}
+        <StickyContainer>
+          <div style={{ display: 'flex' }}>
+            <EuiButtonEmpty
+              style={{ zIndex: 3, position: 'absolute' }}
+              iconType={isAccordionOpen ? 'arrowDown' : 'arrowRight'}
+              onClick={() => {
+                setIsAccordionOpen((isOpen) => !isOpen);
+              }}
+            />
+            <Timeline
+              marks={[...agentMarks, ...errorMarks]}
+              xMax={duration}
+              height={waterfallHeight}
+              margins={TIMELINE_MARGINS}
+            />
+          </div>
+          <WaterfallItemsContainer paddingTop={TIMELINE_MARGINS.top}>
+            {renderItems(waterfall.childrenByParentId)}
+          </WaterfallItemsContainer>
+        </StickyContainer>
 
-      <WaterfallFlyout
-        waterfallItemId={waterfallItemId}
-        waterfall={waterfall}
-        location={location}
-        toggleFlyout={toggleFlyout}
-      />
-    </Container>
+        <WaterfallFlyout
+          waterfallItemId={waterfallItemId}
+          waterfall={waterfall}
+          location={location}
+          toggleFlyout={toggleFlyout}
+        />
+      </Container>
+    </HeightRetainer>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
index c9b29e8692f4..204c5e9ae6da 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
@@ -2,27 +2,734 @@
 
 exports[`waterfall_helpers getWaterfall should return full waterfall 1`] = `
 Object {
-  "duration": 49660,
-  "entryTransaction": Object {
-    "processor": Object {
-      "event": "transaction",
-    },
-    "service": Object {
-      "name": "opbeans-node",
-    },
-    "timestamp": Object {
-      "us": 1549324795784006,
-    },
-    "trace": Object {
-      "id": "myTraceId",
-    },
-    "transaction": Object {
-      "duration": Object {
-        "us": 49660,
+  "childrenByParentId": Object {
+    "mySpanIdA": Array [
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "mySpanIdA",
+          },
+          "processor": Object {
+            "event": "span",
+          },
+          "service": Object {
+            "name": "opbeans-ruby",
+          },
+          "span": Object {
+            "duration": Object {
+              "us": 481,
+            },
+            "id": "mySpanIdB",
+            "name": "SELECT FROM products",
+          },
+          "timestamp": Object {
+            "us": 1549324795825633,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "id": "myTransactionId2",
+          },
+        },
+        "docType": "span",
+        "duration": 481,
+        "id": "mySpanIdB",
+        "offset": 41627,
+        "parent": Object {
+          "doc": Object {
+            "parent": Object {
+              "id": "myTransactionId2",
+            },
+            "processor": Object {
+              "event": "span",
+            },
+            "service": Object {
+              "name": "opbeans-ruby",
+            },
+            "span": Object {
+              "duration": Object {
+                "us": 6161,
+              },
+              "id": "mySpanIdA",
+              "name": "Api::ProductsController#index",
+            },
+            "timestamp": Object {
+              "us": 1549324795824504,
+            },
+            "trace": Object {
+              "id": "myTraceId",
+            },
+            "transaction": Object {
+              "id": "myTransactionId2",
+            },
+          },
+          "docType": "span",
+          "duration": 6161,
+          "id": "mySpanIdA",
+          "offset": 40498,
+          "parent": Object {
+            "doc": Object {
+              "parent": Object {
+                "id": "mySpanIdD",
+              },
+              "processor": Object {
+                "event": "transaction",
+              },
+              "service": Object {
+                "name": "opbeans-ruby",
+              },
+              "timestamp": Object {
+                "us": 1549324795823304,
+              },
+              "trace": Object {
+                "id": "myTraceId",
+              },
+              "transaction": Object {
+                "duration": Object {
+                  "us": 8634,
+                },
+                "id": "myTransactionId2",
+                "marks": Object {
+                  "agent": Object {
+                    "domComplete": 383,
+                    "domInteractive": 382,
+                    "timeToFirstByte": 14,
+                  },
+                },
+                "name": "Api::ProductsController#index",
+              },
+            },
+            "docType": "transaction",
+            "duration": 8634,
+            "id": "myTransactionId2",
+            "offset": 39298,
+            "parent": Object {
+              "doc": Object {
+                "parent": Object {
+                  "id": "myTransactionId1",
+                },
+                "processor": Object {
+                  "event": "span",
+                },
+                "service": Object {
+                  "name": "opbeans-node",
+                },
+                "span": Object {
+                  "duration": Object {
+                    "us": 47557,
+                  },
+                  "id": "mySpanIdD",
+                  "name": "GET opbeans-ruby:3000/api/products",
+                },
+                "timestamp": Object {
+                  "us": 1549324795785760,
+                },
+                "trace": Object {
+                  "id": "myTraceId",
+                },
+                "transaction": Object {
+                  "id": "myTransactionId1",
+                },
+              },
+              "docType": "span",
+              "duration": 47557,
+              "id": "mySpanIdD",
+              "offset": 1754,
+              "parent": Object {
+                "doc": Object {
+                  "processor": Object {
+                    "event": "transaction",
+                  },
+                  "service": Object {
+                    "name": "opbeans-node",
+                  },
+                  "timestamp": Object {
+                    "us": 1549324795784006,
+                  },
+                  "trace": Object {
+                    "id": "myTraceId",
+                  },
+                  "transaction": Object {
+                    "duration": Object {
+                      "us": 49660,
+                    },
+                    "id": "myTransactionId1",
+                    "name": "GET /api",
+                  },
+                },
+                "docType": "transaction",
+                "duration": 49660,
+                "id": "myTransactionId1",
+                "offset": 0,
+                "parent": undefined,
+                "parentId": undefined,
+                "skew": 0,
+              },
+              "parentId": "myTransactionId1",
+              "skew": 0,
+            },
+            "parentId": "mySpanIdD",
+            "skew": 0,
+          },
+          "parentId": "myTransactionId2",
+          "skew": 0,
+        },
+        "parentId": "mySpanIdA",
+        "skew": 0,
+      },
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "mySpanIdA",
+          },
+          "processor": Object {
+            "event": "span",
+          },
+          "service": Object {
+            "name": "opbeans-ruby",
+          },
+          "span": Object {
+            "duration": Object {
+              "us": 532,
+            },
+            "id": "mySpanIdC",
+            "name": "SELECT FROM product",
+          },
+          "timestamp": Object {
+            "us": 1549324795827905,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "id": "myTransactionId2",
+          },
+        },
+        "docType": "span",
+        "duration": 532,
+        "id": "mySpanIdC",
+        "offset": 43899,
+        "parent": Object {
+          "doc": Object {
+            "parent": Object {
+              "id": "myTransactionId2",
+            },
+            "processor": Object {
+              "event": "span",
+            },
+            "service": Object {
+              "name": "opbeans-ruby",
+            },
+            "span": Object {
+              "duration": Object {
+                "us": 6161,
+              },
+              "id": "mySpanIdA",
+              "name": "Api::ProductsController#index",
+            },
+            "timestamp": Object {
+              "us": 1549324795824504,
+            },
+            "trace": Object {
+              "id": "myTraceId",
+            },
+            "transaction": Object {
+              "id": "myTransactionId2",
+            },
+          },
+          "docType": "span",
+          "duration": 6161,
+          "id": "mySpanIdA",
+          "offset": 40498,
+          "parent": Object {
+            "doc": Object {
+              "parent": Object {
+                "id": "mySpanIdD",
+              },
+              "processor": Object {
+                "event": "transaction",
+              },
+              "service": Object {
+                "name": "opbeans-ruby",
+              },
+              "timestamp": Object {
+                "us": 1549324795823304,
+              },
+              "trace": Object {
+                "id": "myTraceId",
+              },
+              "transaction": Object {
+                "duration": Object {
+                  "us": 8634,
+                },
+                "id": "myTransactionId2",
+                "marks": Object {
+                  "agent": Object {
+                    "domComplete": 383,
+                    "domInteractive": 382,
+                    "timeToFirstByte": 14,
+                  },
+                },
+                "name": "Api::ProductsController#index",
+              },
+            },
+            "docType": "transaction",
+            "duration": 8634,
+            "id": "myTransactionId2",
+            "offset": 39298,
+            "parent": Object {
+              "doc": Object {
+                "parent": Object {
+                  "id": "myTransactionId1",
+                },
+                "processor": Object {
+                  "event": "span",
+                },
+                "service": Object {
+                  "name": "opbeans-node",
+                },
+                "span": Object {
+                  "duration": Object {
+                    "us": 47557,
+                  },
+                  "id": "mySpanIdD",
+                  "name": "GET opbeans-ruby:3000/api/products",
+                },
+                "timestamp": Object {
+                  "us": 1549324795785760,
+                },
+                "trace": Object {
+                  "id": "myTraceId",
+                },
+                "transaction": Object {
+                  "id": "myTransactionId1",
+                },
+              },
+              "docType": "span",
+              "duration": 47557,
+              "id": "mySpanIdD",
+              "offset": 1754,
+              "parent": Object {
+                "doc": Object {
+                  "processor": Object {
+                    "event": "transaction",
+                  },
+                  "service": Object {
+                    "name": "opbeans-node",
+                  },
+                  "timestamp": Object {
+                    "us": 1549324795784006,
+                  },
+                  "trace": Object {
+                    "id": "myTraceId",
+                  },
+                  "transaction": Object {
+                    "duration": Object {
+                      "us": 49660,
+                    },
+                    "id": "myTransactionId1",
+                    "name": "GET /api",
+                  },
+                },
+                "docType": "transaction",
+                "duration": 49660,
+                "id": "myTransactionId1",
+                "offset": 0,
+                "parent": undefined,
+                "parentId": undefined,
+                "skew": 0,
+              },
+              "parentId": "myTransactionId1",
+              "skew": 0,
+            },
+            "parentId": "mySpanIdD",
+            "skew": 0,
+          },
+          "parentId": "myTransactionId2",
+          "skew": 0,
+        },
+        "parentId": "mySpanIdA",
+        "skew": 0,
+      },
+    ],
+    "mySpanIdD": Array [
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "mySpanIdD",
+          },
+          "processor": Object {
+            "event": "transaction",
+          },
+          "service": Object {
+            "name": "opbeans-ruby",
+          },
+          "timestamp": Object {
+            "us": 1549324795823304,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "duration": Object {
+              "us": 8634,
+            },
+            "id": "myTransactionId2",
+            "marks": Object {
+              "agent": Object {
+                "domComplete": 383,
+                "domInteractive": 382,
+                "timeToFirstByte": 14,
+              },
+            },
+            "name": "Api::ProductsController#index",
+          },
+        },
+        "docType": "transaction",
+        "duration": 8634,
+        "id": "myTransactionId2",
+        "offset": 39298,
+        "parent": Object {
+          "doc": Object {
+            "parent": Object {
+              "id": "myTransactionId1",
+            },
+            "processor": Object {
+              "event": "span",
+            },
+            "service": Object {
+              "name": "opbeans-node",
+            },
+            "span": Object {
+              "duration": Object {
+                "us": 47557,
+              },
+              "id": "mySpanIdD",
+              "name": "GET opbeans-ruby:3000/api/products",
+            },
+            "timestamp": Object {
+              "us": 1549324795785760,
+            },
+            "trace": Object {
+              "id": "myTraceId",
+            },
+            "transaction": Object {
+              "id": "myTransactionId1",
+            },
+          },
+          "docType": "span",
+          "duration": 47557,
+          "id": "mySpanIdD",
+          "offset": 1754,
+          "parent": Object {
+            "doc": Object {
+              "processor": Object {
+                "event": "transaction",
+              },
+              "service": Object {
+                "name": "opbeans-node",
+              },
+              "timestamp": Object {
+                "us": 1549324795784006,
+              },
+              "trace": Object {
+                "id": "myTraceId",
+              },
+              "transaction": Object {
+                "duration": Object {
+                  "us": 49660,
+                },
+                "id": "myTransactionId1",
+                "name": "GET /api",
+              },
+            },
+            "docType": "transaction",
+            "duration": 49660,
+            "id": "myTransactionId1",
+            "offset": 0,
+            "parent": undefined,
+            "parentId": undefined,
+            "skew": 0,
+          },
+          "parentId": "myTransactionId1",
+          "skew": 0,
+        },
+        "parentId": "mySpanIdD",
+        "skew": 0,
+      },
+    ],
+    "myTransactionId1": Array [
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "myTransactionId1",
+          },
+          "processor": Object {
+            "event": "span",
+          },
+          "service": Object {
+            "name": "opbeans-node",
+          },
+          "span": Object {
+            "duration": Object {
+              "us": 47557,
+            },
+            "id": "mySpanIdD",
+            "name": "GET opbeans-ruby:3000/api/products",
+          },
+          "timestamp": Object {
+            "us": 1549324795785760,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "id": "myTransactionId1",
+          },
+        },
+        "docType": "span",
+        "duration": 47557,
+        "id": "mySpanIdD",
+        "offset": 1754,
+        "parent": Object {
+          "doc": Object {
+            "processor": Object {
+              "event": "transaction",
+            },
+            "service": Object {
+              "name": "opbeans-node",
+            },
+            "timestamp": Object {
+              "us": 1549324795784006,
+            },
+            "trace": Object {
+              "id": "myTraceId",
+            },
+            "transaction": Object {
+              "duration": Object {
+                "us": 49660,
+              },
+              "id": "myTransactionId1",
+              "name": "GET /api",
+            },
+          },
+          "docType": "transaction",
+          "duration": 49660,
+          "id": "myTransactionId1",
+          "offset": 0,
+          "parent": undefined,
+          "parentId": undefined,
+          "skew": 0,
+        },
+        "parentId": "myTransactionId1",
+        "skew": 0,
+      },
+    ],
+    "myTransactionId2": Array [
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "myTransactionId2",
+          },
+          "processor": Object {
+            "event": "span",
+          },
+          "service": Object {
+            "name": "opbeans-ruby",
+          },
+          "span": Object {
+            "duration": Object {
+              "us": 6161,
+            },
+            "id": "mySpanIdA",
+            "name": "Api::ProductsController#index",
+          },
+          "timestamp": Object {
+            "us": 1549324795824504,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "id": "myTransactionId2",
+          },
+        },
+        "docType": "span",
+        "duration": 6161,
+        "id": "mySpanIdA",
+        "offset": 40498,
+        "parent": Object {
+          "doc": Object {
+            "parent": Object {
+              "id": "mySpanIdD",
+            },
+            "processor": Object {
+              "event": "transaction",
+            },
+            "service": Object {
+              "name": "opbeans-ruby",
+            },
+            "timestamp": Object {
+              "us": 1549324795823304,
+            },
+            "trace": Object {
+              "id": "myTraceId",
+            },
+            "transaction": Object {
+              "duration": Object {
+                "us": 8634,
+              },
+              "id": "myTransactionId2",
+              "marks": Object {
+                "agent": Object {
+                  "domComplete": 383,
+                  "domInteractive": 382,
+                  "timeToFirstByte": 14,
+                },
+              },
+              "name": "Api::ProductsController#index",
+            },
+          },
+          "docType": "transaction",
+          "duration": 8634,
+          "id": "myTransactionId2",
+          "offset": 39298,
+          "parent": Object {
+            "doc": Object {
+              "parent": Object {
+                "id": "myTransactionId1",
+              },
+              "processor": Object {
+                "event": "span",
+              },
+              "service": Object {
+                "name": "opbeans-node",
+              },
+              "span": Object {
+                "duration": Object {
+                  "us": 47557,
+                },
+                "id": "mySpanIdD",
+                "name": "GET opbeans-ruby:3000/api/products",
+              },
+              "timestamp": Object {
+                "us": 1549324795785760,
+              },
+              "trace": Object {
+                "id": "myTraceId",
+              },
+              "transaction": Object {
+                "id": "myTransactionId1",
+              },
+            },
+            "docType": "span",
+            "duration": 47557,
+            "id": "mySpanIdD",
+            "offset": 1754,
+            "parent": Object {
+              "doc": Object {
+                "processor": Object {
+                  "event": "transaction",
+                },
+                "service": Object {
+                  "name": "opbeans-node",
+                },
+                "timestamp": Object {
+                  "us": 1549324795784006,
+                },
+                "trace": Object {
+                  "id": "myTraceId",
+                },
+                "transaction": Object {
+                  "duration": Object {
+                    "us": 49660,
+                  },
+                  "id": "myTransactionId1",
+                  "name": "GET /api",
+                },
+              },
+              "docType": "transaction",
+              "duration": 49660,
+              "id": "myTransactionId1",
+              "offset": 0,
+              "parent": undefined,
+              "parentId": undefined,
+              "skew": 0,
+            },
+            "parentId": "myTransactionId1",
+            "skew": 0,
+          },
+          "parentId": "mySpanIdD",
+          "skew": 0,
+        },
+        "parentId": "myTransactionId2",
+        "skew": 0,
+      },
+    ],
+    "root": Array [
+      Object {
+        "doc": Object {
+          "processor": Object {
+            "event": "transaction",
+          },
+          "service": Object {
+            "name": "opbeans-node",
+          },
+          "timestamp": Object {
+            "us": 1549324795784006,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "duration": Object {
+              "us": 49660,
+            },
+            "id": "myTransactionId1",
+            "name": "GET /api",
+          },
+        },
+        "docType": "transaction",
+        "duration": 49660,
+        "id": "myTransactionId1",
+        "offset": 0,
+        "parent": undefined,
+        "parentId": undefined,
+        "skew": 0,
+      },
+    ],
+  },
+  "duration": 49660,
+  "entryWaterfallTransaction": Object {
+    "doc": Object {
+      "processor": Object {
+        "event": "transaction",
+      },
+      "service": Object {
+        "name": "opbeans-node",
+      },
+      "timestamp": Object {
+        "us": 1549324795784006,
+      },
+      "trace": Object {
+        "id": "myTraceId",
+      },
+      "transaction": Object {
+        "duration": Object {
+          "us": 49660,
+        },
+        "id": "myTransactionId1",
+        "name": "GET /api",
       },
-      "id": "myTransactionId1",
-      "name": "GET /api",
     },
+    "docType": "transaction",
+    "duration": 49660,
+    "id": "myTransactionId1",
+    "offset": 0,
+    "parent": undefined,
+    "parentId": undefined,
+    "skew": 0,
   },
   "errorItems": Array [
     Object {
@@ -818,37 +1525,389 @@ Object {
 
 exports[`waterfall_helpers getWaterfall should return partial waterfall 1`] = `
 Object {
-  "duration": 8634,
-  "entryTransaction": Object {
-    "parent": Object {
-      "id": "mySpanIdD",
-    },
-    "processor": Object {
-      "event": "transaction",
-    },
-    "service": Object {
-      "name": "opbeans-ruby",
-    },
-    "timestamp": Object {
-      "us": 1549324795823304,
-    },
-    "trace": Object {
-      "id": "myTraceId",
-    },
-    "transaction": Object {
-      "duration": Object {
-        "us": 8634,
-      },
-      "id": "myTransactionId2",
-      "marks": Object {
-        "agent": Object {
-          "domComplete": 383,
-          "domInteractive": 382,
-          "timeToFirstByte": 14,
+  "childrenByParentId": Object {
+    "mySpanIdA": Array [
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "mySpanIdA",
+          },
+          "processor": Object {
+            "event": "span",
+          },
+          "service": Object {
+            "name": "opbeans-ruby",
+          },
+          "span": Object {
+            "duration": Object {
+              "us": 481,
+            },
+            "id": "mySpanIdB",
+            "name": "SELECT FROM products",
+          },
+          "timestamp": Object {
+            "us": 1549324795825633,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "id": "myTransactionId2",
+          },
         },
+        "docType": "span",
+        "duration": 481,
+        "id": "mySpanIdB",
+        "offset": 2329,
+        "parent": Object {
+          "doc": Object {
+            "parent": Object {
+              "id": "myTransactionId2",
+            },
+            "processor": Object {
+              "event": "span",
+            },
+            "service": Object {
+              "name": "opbeans-ruby",
+            },
+            "span": Object {
+              "duration": Object {
+                "us": 6161,
+              },
+              "id": "mySpanIdA",
+              "name": "Api::ProductsController#index",
+            },
+            "timestamp": Object {
+              "us": 1549324795824504,
+            },
+            "trace": Object {
+              "id": "myTraceId",
+            },
+            "transaction": Object {
+              "id": "myTransactionId2",
+            },
+          },
+          "docType": "span",
+          "duration": 6161,
+          "id": "mySpanIdA",
+          "offset": 1200,
+          "parent": Object {
+            "doc": Object {
+              "parent": Object {
+                "id": "mySpanIdD",
+              },
+              "processor": Object {
+                "event": "transaction",
+              },
+              "service": Object {
+                "name": "opbeans-ruby",
+              },
+              "timestamp": Object {
+                "us": 1549324795823304,
+              },
+              "trace": Object {
+                "id": "myTraceId",
+              },
+              "transaction": Object {
+                "duration": Object {
+                  "us": 8634,
+                },
+                "id": "myTransactionId2",
+                "marks": Object {
+                  "agent": Object {
+                    "domComplete": 383,
+                    "domInteractive": 382,
+                    "timeToFirstByte": 14,
+                  },
+                },
+                "name": "Api::ProductsController#index",
+              },
+            },
+            "docType": "transaction",
+            "duration": 8634,
+            "id": "myTransactionId2",
+            "offset": 0,
+            "parent": undefined,
+            "parentId": "mySpanIdD",
+            "skew": 0,
+          },
+          "parentId": "myTransactionId2",
+          "skew": 0,
+        },
+        "parentId": "mySpanIdA",
+        "skew": 0,
+      },
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "mySpanIdA",
+          },
+          "processor": Object {
+            "event": "span",
+          },
+          "service": Object {
+            "name": "opbeans-ruby",
+          },
+          "span": Object {
+            "duration": Object {
+              "us": 532,
+            },
+            "id": "mySpanIdC",
+            "name": "SELECT FROM product",
+          },
+          "timestamp": Object {
+            "us": 1549324795827905,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "id": "myTransactionId2",
+          },
+        },
+        "docType": "span",
+        "duration": 532,
+        "id": "mySpanIdC",
+        "offset": 4601,
+        "parent": Object {
+          "doc": Object {
+            "parent": Object {
+              "id": "myTransactionId2",
+            },
+            "processor": Object {
+              "event": "span",
+            },
+            "service": Object {
+              "name": "opbeans-ruby",
+            },
+            "span": Object {
+              "duration": Object {
+                "us": 6161,
+              },
+              "id": "mySpanIdA",
+              "name": "Api::ProductsController#index",
+            },
+            "timestamp": Object {
+              "us": 1549324795824504,
+            },
+            "trace": Object {
+              "id": "myTraceId",
+            },
+            "transaction": Object {
+              "id": "myTransactionId2",
+            },
+          },
+          "docType": "span",
+          "duration": 6161,
+          "id": "mySpanIdA",
+          "offset": 1200,
+          "parent": Object {
+            "doc": Object {
+              "parent": Object {
+                "id": "mySpanIdD",
+              },
+              "processor": Object {
+                "event": "transaction",
+              },
+              "service": Object {
+                "name": "opbeans-ruby",
+              },
+              "timestamp": Object {
+                "us": 1549324795823304,
+              },
+              "trace": Object {
+                "id": "myTraceId",
+              },
+              "transaction": Object {
+                "duration": Object {
+                  "us": 8634,
+                },
+                "id": "myTransactionId2",
+                "marks": Object {
+                  "agent": Object {
+                    "domComplete": 383,
+                    "domInteractive": 382,
+                    "timeToFirstByte": 14,
+                  },
+                },
+                "name": "Api::ProductsController#index",
+              },
+            },
+            "docType": "transaction",
+            "duration": 8634,
+            "id": "myTransactionId2",
+            "offset": 0,
+            "parent": undefined,
+            "parentId": "mySpanIdD",
+            "skew": 0,
+          },
+          "parentId": "myTransactionId2",
+          "skew": 0,
+        },
+        "parentId": "mySpanIdA",
+        "skew": 0,
+      },
+    ],
+    "mySpanIdD": Array [
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "mySpanIdD",
+          },
+          "processor": Object {
+            "event": "transaction",
+          },
+          "service": Object {
+            "name": "opbeans-ruby",
+          },
+          "timestamp": Object {
+            "us": 1549324795823304,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "duration": Object {
+              "us": 8634,
+            },
+            "id": "myTransactionId2",
+            "marks": Object {
+              "agent": Object {
+                "domComplete": 383,
+                "domInteractive": 382,
+                "timeToFirstByte": 14,
+              },
+            },
+            "name": "Api::ProductsController#index",
+          },
+        },
+        "docType": "transaction",
+        "duration": 8634,
+        "id": "myTransactionId2",
+        "offset": 0,
+        "parent": undefined,
+        "parentId": "mySpanIdD",
+        "skew": 0,
+      },
+    ],
+    "myTransactionId2": Array [
+      Object {
+        "doc": Object {
+          "parent": Object {
+            "id": "myTransactionId2",
+          },
+          "processor": Object {
+            "event": "span",
+          },
+          "service": Object {
+            "name": "opbeans-ruby",
+          },
+          "span": Object {
+            "duration": Object {
+              "us": 6161,
+            },
+            "id": "mySpanIdA",
+            "name": "Api::ProductsController#index",
+          },
+          "timestamp": Object {
+            "us": 1549324795824504,
+          },
+          "trace": Object {
+            "id": "myTraceId",
+          },
+          "transaction": Object {
+            "id": "myTransactionId2",
+          },
+        },
+        "docType": "span",
+        "duration": 6161,
+        "id": "mySpanIdA",
+        "offset": 1200,
+        "parent": Object {
+          "doc": Object {
+            "parent": Object {
+              "id": "mySpanIdD",
+            },
+            "processor": Object {
+              "event": "transaction",
+            },
+            "service": Object {
+              "name": "opbeans-ruby",
+            },
+            "timestamp": Object {
+              "us": 1549324795823304,
+            },
+            "trace": Object {
+              "id": "myTraceId",
+            },
+            "transaction": Object {
+              "duration": Object {
+                "us": 8634,
+              },
+              "id": "myTransactionId2",
+              "marks": Object {
+                "agent": Object {
+                  "domComplete": 383,
+                  "domInteractive": 382,
+                  "timeToFirstByte": 14,
+                },
+              },
+              "name": "Api::ProductsController#index",
+            },
+          },
+          "docType": "transaction",
+          "duration": 8634,
+          "id": "myTransactionId2",
+          "offset": 0,
+          "parent": undefined,
+          "parentId": "mySpanIdD",
+          "skew": 0,
+        },
+        "parentId": "myTransactionId2",
+        "skew": 0,
+      },
+    ],
+  },
+  "duration": 8634,
+  "entryWaterfallTransaction": Object {
+    "doc": Object {
+      "parent": Object {
+        "id": "mySpanIdD",
+      },
+      "processor": Object {
+        "event": "transaction",
+      },
+      "service": Object {
+        "name": "opbeans-ruby",
+      },
+      "timestamp": Object {
+        "us": 1549324795823304,
+      },
+      "trace": Object {
+        "id": "myTraceId",
+      },
+      "transaction": Object {
+        "duration": Object {
+          "us": 8634,
+        },
+        "id": "myTransactionId2",
+        "marks": Object {
+          "agent": Object {
+            "domComplete": 383,
+            "domInteractive": 382,
+            "timeToFirstByte": 14,
+          },
+        },
+        "name": "Api::ProductsController#index",
       },
-      "name": "Api::ProductsController#index",
     },
+    "docType": "transaction",
+    "duration": 8634,
+    "id": "myTransactionId2",
+    "offset": 0,
+    "parent": undefined,
+    "parentId": "mySpanIdD",
+    "skew": 0,
   },
   "errorItems": Array [],
   "errorsCount": 0,
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
index 441a51bcba64..44e5e09e506a 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
@@ -28,7 +28,7 @@ interface IWaterfallGroup {
 const ROOT_ID = 'root';
 
 export interface IWaterfall {
-  entryTransaction?: Transaction;
+  entryWaterfallTransaction?: IWaterfallTransaction;
   rootTransaction?: Transaction;
 
   /**
@@ -36,6 +36,7 @@ export interface IWaterfall {
    */
   duration: number;
   items: IWaterfallItem[];
+  childrenByParentId: Record<string | number, IWaterfallItem[]>;
   errorsPerTransaction: TraceAPIResponse['errorsPerTransaction'];
   errorsCount: number;
   serviceColors: IServiceColors;
@@ -329,6 +330,7 @@ export function getWaterfall(
       errorsCount: sum(Object.values(errorsPerTransaction)),
       serviceColors: {},
       errorItems: [],
+      childrenByParentId: {},
     };
   }
 
@@ -357,10 +359,8 @@ export function getWaterfall(
   const duration = getWaterfallDuration(items);
   const serviceColors = getServiceColors(items);
 
-  const entryTransaction = entryWaterfallTransaction?.doc;
-
   return {
-    entryTransaction,
+    entryWaterfallTransaction,
     rootTransaction,
     duration,
     items,
@@ -368,5 +368,6 @@ export function getWaterfall(
     errorsCount: errorItems.length,
     serviceColors,
     errorItems,
+    childrenByParentId: getChildrenGroupedByParentId(items),
   };
 }
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/index.tsx
index 6fd139b470ce..501ca6d33d5a 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/index.tsx
@@ -8,8 +8,8 @@ import { Location } from 'history';
 import React from 'react';
 import { IUrlParams } from '../../../../../context/UrlParamsContext/types';
 import { ServiceLegends } from './ServiceLegends';
-import { Waterfall } from './Waterfall';
 import { IWaterfall } from './Waterfall/waterfall_helpers/waterfall_helpers';
+import { Waterfall } from './Waterfall';
 
 interface Props {
   urlParams: IUrlParams;
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
index 12676b7c15f1..392bd90ffbab 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
@@ -64,8 +64,8 @@ export function WaterfallWithSummmary({
     });
   };
 
-  const { entryTransaction } = waterfall;
-  if (!entryTransaction) {
+  const { entryWaterfallTransaction } = waterfall;
+  if (!entryWaterfallTransaction) {
     const content = isLoading ? (
       <LoadingStatePrompt />
     ) : (
@@ -84,6 +84,8 @@ export function WaterfallWithSummmary({
     return <EuiPanel paddingSize="m">{content}</EuiPanel>;
   }
 
+  const entryTransaction = entryWaterfallTransaction.doc;
+
   return (
     <EuiPanel paddingSize="m">
       <EuiFlexGroup>