From e686039b242c4ed2a5f419a23334b5c8b515e3b6 Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 30 Mar 2020 16:58:47 -0400
Subject: [PATCH] Prevent SymbolDefinitions from effecting the layout of the
 resolver graph

---
 .../public/embeddables/resolver/view/defs.tsx | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx
index 3295ef028923588..911cda1be651701 100644
--- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx
+++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx
@@ -13,6 +13,7 @@ import {
   euiPaletteForStatus,
   colorPalette,
 } from '@elastic/eui';
+import styled from 'styled-components';
 
 /**
  * Generating from `colorPalette` function: This could potentially
@@ -396,17 +397,25 @@ const SymbolsAndShapes = memo(() => (
 ));
 
 /**
- * This <defs> element is used to define the reusable assets for the Resolver
- * It confers sevral advantages, including but not limited to:
- * 1) Freedom of form for creative assets (beyond box-model constraints)
- * 2) Separation of concerns between creative assets and more functional areas of the app
- * 3) <use> elements can be handled by compositor (faster)
+ * This `<defs>` element is used to define the reusable assets for the Resolver
+ * It confers several advantages, including but not limited to:
+ *  1. Freedom of form for creative assets (beyond box-model constraints)
+ *  2. Separation of concerns between creative assets and more functional areas of the app
+ *  3. `<use>` elements can be handled by compositor (faster)
  */
-export const SymbolDefinitions = memo(() => (
-  <svg>
-    <defs>
-      <PaintServers />
-      <SymbolsAndShapes />
-    </defs>
-  </svg>
-));
+export const SymbolDefinitions = styled(
+  memo(({ className }: { className?: string }) => (
+    <svg className={className}>
+      <defs>
+        <PaintServers />
+        <SymbolsAndShapes />
+      </defs>
+    </svg>
+  ))
+)`
+  position: absolute;
+  left: 100%;
+  top: 100%;
+  width: 0;
+  height: 0;
+`;