From f888e373bdb7ba2b0d31d1d8f59d3a8ef06d8d87 Mon Sep 17 00:00:00 2001
From: JBBianchi <jb.bianchi@neuroglia.io>
Date: Mon, 8 Jul 2024 12:38:21 +0200
Subject: [PATCH] style(Blazor.Dagre): added missing svg-definition style

Signed-off-by: Jean-Baptiste Bianchi <jb.bianchi@neuroglia.io>
---
 src/Neuroglia.Blazor.Dagre/DagreGraph.razor          |  2 +-
 .../wwwroot/neuroglia-blazor-dagre.css               | 12 +++++++++++-
 .../wwwroot/neuroglia-blazor-dagre.min.css           |  2 +-
 .../wwwroot/neuroglia-blazor-dagre.scss              | 12 +++++++++++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/Neuroglia.Blazor.Dagre/DagreGraph.razor b/src/Neuroglia.Blazor.Dagre/DagreGraph.razor
index 23172a03..59ac8f1e 100644
--- a/src/Neuroglia.Blazor.Dagre/DagreGraph.razor
+++ b/src/Neuroglia.Blazor.Dagre/DagreGraph.razor
@@ -4,7 +4,7 @@
 @implements IDisposable
 
 @if (graph != null) {
-    <svg id="svg-definitions"
+    <svg class="svg-definitions"
          version="1.2"
          baseProfile="tiny"
          xmlns="http://www.w3.org/2000/svg"
diff --git a/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.css b/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.css
index 54175957..3956b8e1 100644
--- a/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.css
+++ b/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.css
@@ -1,4 +1,14 @@
-.graph-container {
+.svg-definitions {
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  position: absolute;
+  top: -100px;
+  left: -100px;
+}
+
+.graph-container {
   width: 100%;
   height: 100%;
 }
diff --git a/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.min.css b/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.min.css
index 22e73e09..28699ad1 100644
--- a/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.min.css
+++ b/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.min.css
@@ -1 +1 @@
-.graph-container{width:100%;height:100%;}.node rect,.node circle,.node ellipse{stroke:#333;fill:#fff;stroke-width:1px;}.edge-path path{fill:none;stroke:#333;stroke-width:1.5px;}.cluster rect{fill:rgba(0,0,0,.2);}.label div{text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}#end-arrow{fill:#333;}.graph-controls .btn{border:1px solid transparent;padding:.25rem .25rem;line-height:.5;border-radius:.25rem;vertical-align:middle;color:#333;fill:#333;border-color:#333;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}.graph-controls .btn svg{width:18px;height:18px;}.graph-controls .btn:hover{color:#fff;fill:#fff;background-color:#333;border-color:#333;}
\ No newline at end of file
+.svg-definitions{width:0!important;height:0!important;margin:0!important;padding:0!important;position:absolute;top:-100px;left:-100px;}.graph-container{width:100%;height:100%;}.node rect,.node circle,.node ellipse{stroke:#333;fill:#fff;stroke-width:1px;}.edge-path path{fill:none;stroke:#333;stroke-width:1.5px;}.cluster rect{fill:rgba(0,0,0,.2);}.label div{text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}#end-arrow{fill:#333;}.graph-controls .btn{border:1px solid transparent;padding:.25rem .25rem;line-height:.5;border-radius:.25rem;vertical-align:middle;color:#333;fill:#333;border-color:#333;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}.graph-controls .btn svg{width:18px;height:18px;}.graph-controls .btn:hover{color:#fff;fill:#fff;background-color:#333;border-color:#333;}
\ No newline at end of file
diff --git a/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.scss b/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.scss
index 07ad9268..fa755b79 100644
--- a/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.scss
+++ b/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.scss
@@ -1,4 +1,14 @@
-.graph-container {
+.svg-definitions {
+    width: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    position: absolute;
+    top: -100px;
+    left: -100px;
+}
+
+.graph-container {
     width: 100%;
     height: 100%;
 }