From: demx8as6 <martin.skorupski@highstreet-technologies.com>
Date: Sun, 6 Mar 2022 16:02:22 +0000 (+0100)
Subject: Use inline css styles for SVG
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=16945b9b123d4cb4b0e78b193aa97cae85beec7d;p=oam.git

Use inline css styles for SVG

- read css from file
- insert <style/> as second position of <svg/>

Issue-Id: OAM-257
Change-Id: I8655f7ee5f77664dfb2d468a3502f3eaf265de99
Signed-off-by: demx8as6 <martin.skorupski@highstreet-technologies.com>
---

diff --git a/code/network-topology-instance-generator/view/network_viewer.py b/code/network-topology-instance-generator/view/network_viewer.py
index dc6037a..f68ee48 100644
--- a/code/network-topology-instance-generator/view/network_viewer.py
+++ b/code/network-topology-instance-generator/view/network_viewer.py
@@ -17,7 +17,6 @@
 Provides functions to convert the Network into different formats
 """
 
-import encodings
 import json
 from lxml import etree
 from model.python.tapi_common_context import TapiCommonContext
@@ -72,6 +71,15 @@ class NetworkViewer:
                       )
             print("File '" + filename + "' saved!")
 
+    def readStylesFromFile(self) -> str:
+        """
+        Method reading the css styles from known file
+        return: content of the file as string
+        """
+        with open('view/svg.style.css') as styles:
+            content = styles.read()
+            return content
+
     def svg(self, filename: str):
         """
         Method saving the class content to a file in xml/svg format.
@@ -80,10 +88,14 @@ class NetworkViewer:
         :type filename: string
         """
         root = self.__network.svg(0, 0)
-        root.addprevious(
-            etree.ProcessingInstruction("xml-stylesheet",
-                                        'href="svg.style.css" type="text/css"')
-        )
+        # not preferred see OAM-257
+        # root.addprevious(
+        #     etree.ProcessingInstruction("xml-stylesheet",
+        #                                 'href="svg.style.css" type="text/css"')
+        # )
+        style = etree.Element("style")
+        style.text = self.readStylesFromFile()
+        root.getchildren()[0].addnext(style)
         etree.ElementTree(root).write(filename,
                                       encoding="utf-8",
                                       xml_declaration=True,
diff --git a/code/network-topology-instance-generator/view/svg.style.css b/code/network-topology-instance-generator/view/svg.style.css
new file mode 100644
index 0000000..679ee5e
--- /dev/null
+++ b/code/network-topology-instance-generator/view/svg.style.css
@@ -0,0 +1,221 @@
+circle {
+  fill: red;
+  stroke: blue;
+  stroke-width: 2;
+}
+
+circle.dot {
+  fill: rgb(165, 163, 164);
+  stroke: blue;
+  stroke-width: 0;
+}
+
+ellipse {
+  fill: red;
+  stroke: blue;
+  stroke-width: 2;
+}
+
+ellipse.TapiConnectionEdgePoint {
+  fill: #dddddd;
+  stroke: #444444;
+  stroke-width: 1;
+}
+
+g.TapiConnectionEdgePoint>text {
+  fill: #444444;
+}
+
+g.TapiNodeFronthaulGateway>text {
+  fill: #444444;
+}
+
+g.node:hover>rect {
+  fill: #44aa44;
+  fill-opacity: .75;
+  stroke: #008800;
+  stroke-width: 4;
+}
+
+g.TapiNodeEdgePoint:hover>rect {
+  fill: #44aa44;
+  fill-opacity: .75;
+  stroke: #008800;
+  stroke-width: 4;
+}
+
+g.node:hover>text {
+  fill: #ffff88;
+  font-weight: bold;
+  cursor: default;
+}
+
+g.TapiNodeEdgePoint:hover>text {
+  fill: #ffff88;
+  font-weight: bold;
+  cursor: default;
+}
+
+g.TapiConnectionEdgePoint:hover>ellipse {
+  fill: #44aa44;
+  fill-opacity: .75;
+  stroke: #008800;
+  stroke-width: 4;
+}
+
+g.TapiConnectionEdgePoint:hover>text {
+  fill: #ffff88;
+  font-weight: bold;
+  cursor: default;
+}
+
+
+/* 3GPP defined interface links */
+
+g.e1>path {
+  fill: none;
+  stroke: #008800;
+  stroke-width: 1;
+}
+
+g.f1>path {
+  fill: none;
+  stroke: #008800;
+  stroke-width: 1;
+}
+
+g.n1>path {
+  fill: none;
+  stroke: #008800;
+  stroke-width: 1;
+}
+
+g.n2>path {
+  fill: none;
+  stroke: #008800;
+  stroke-width: 1;
+}
+
+g.n3>path {
+  fill: none;
+  stroke: #008800;
+  stroke-width: 1;
+}
+
+g.uu>path {
+  fill: none;
+  stroke: #008800;
+  stroke-width: 1;
+}
+
+g.link:hover>path {
+  fill: none;
+  stroke: #008800;
+  stroke-width: 6;
+}
+
+rect {
+  fill: red;
+  stroke: blue;
+  stroke-width: 2;
+}
+
+rect.node {
+  fill: lightcoral;
+  fill-opacity: .75;
+  stroke: darkred;
+}
+
+rect.TapiNodeEdgePoint {
+  fill: #888888;
+  stroke: #444444;
+  stroke-width: 1;
+}
+
+rect.smo {
+  fill: gold;
+  stroke: goldenrod;
+}
+
+rect.o2-controller {
+  fill: greenyellow;
+  stroke: green;
+}
+
+rect.o-cloud {
+  fill: greenyellow;
+  stroke: green;
+}
+
+rect.amf {
+  fill: green;
+  stroke: lightgreen;
+}
+
+rect.upf {
+  fill: green;
+  stroke: lightgreen;
+}
+
+rect.fhgw {
+  fill: #dddddd;
+  stroke: #444444;
+}
+
+rect.ue {
+  fill: skyblue;
+  stroke: lightskyblue;
+}
+
+path {
+  fill: red;
+  stroke: blue;
+  stroke-width: 2;
+}
+
+path.link {
+  fill: none;
+  stroke: #444444;
+}
+
+title {
+  background-color: #44aa44;
+  font-size: 100pt;
+}
+
+text {
+  fill: white;
+  stroke: none;
+  text-anchor: middle;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 10px;
+  font-weight: normal;
+}
+
+text.amf {
+  fill: lightgreen;
+}
+
+text.upf {
+  fill: lightgreen;
+}
+
+text.smo {
+  fill: #444444;
+}
+
+text.o2-controller {
+  fill: #444444;
+}
+
+g.TapiNodeOCloud>text {
+  fill: #444444;
+}
+
+text.fhgw {
+  fill: #444444;
+}
+
+text.ue {
+  fill: #444444;
+}
\ No newline at end of file