From c40130eab8703411a3ec2e4d5dd25a1d33da6abb Mon Sep 17 00:00:00 2001
From: niclas <nicjan01@gmail.com>
Date: Fri, 15 Mar 2024 09:41:36 +0100
Subject: [PATCH] Add [graph + table] scaling based on window

---
 tools/mkdocs/modules/galaxy.py                     |  3 +++
 .../site/docs/01_attachements/javascripts/graph.js | 14 +++-----------
 .../docs/01_attachements/stylesheets/graph.css     |  4 ++++
 tools/mkdocs/utils/helper.py                       |  6 +++++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/tools/mkdocs/modules/galaxy.py b/tools/mkdocs/modules/galaxy.py
index e056a03..bd4b402 100644
--- a/tools/mkdocs/modules/galaxy.py
+++ b/tools/mkdocs/modules/galaxy.py
@@ -51,6 +51,9 @@ class Galaxy:
 
     def _create_title_entry(self):
         entry = ""
+        entry += f"[Hide Navigation](#){{ .md-button #toggle-navigation }}\n"
+        entry += f"[Hide TOC](#){{ .md-button #toggle-toc }}\n"
+        entry += f"<div class=\"clearfix\"></div>\n"
         entry += f"[Edit :material-pencil:](https://github.com/MISP/misp-galaxy/edit/main/clusters/{self.json_file_name}){{ .md-button }}\n"
         entry += f"# {self.galaxy_name}\n"
         return entry
diff --git a/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js b/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
index a5800d6..ba7b937 100644
--- a/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
+++ b/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js
@@ -290,18 +290,13 @@ document$.subscribe(function () {
             .style("opacity", 0);
 
         // Set up the dimensions of the graph
-        var height = 1000;
         var width = document.querySelector('.md-content__inner').offsetWidth;
-
-
-        // var svg = d3.select(elementId).append("svg")
-        //     .attr("width", width)
-        //     .attr("height", height)
+        var height = width;
 
         var svg = d3.select("div#container")
             .append("svg")
             .attr("preserveAspectRatio", "xMinYMin meet")
-            .attr("viewBox", "0 0 825 1000")
+            .attr("viewBox", "0 0 " + width + " " + height)
             .classed("svg-content", true);
 
         // Create a force simulation
@@ -337,10 +332,8 @@ document$.subscribe(function () {
             .attr("class", d => "node galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-'));
 
         initializeNodeInteractions(node, link, tooltip, simulation, links, Parent_Node, NODE_RADIUS);
-
         createGalaxyColorLegend(svg, width, galaxies, colorScale, node, link, tooltip);
 
-
         // Update positions on each simulation 'tick'
         simulation.on("tick", () => {
             nodes.forEach(d => {
@@ -414,10 +407,9 @@ document$.subscribe(function () {
                 col_1: "checklist",
                 col_3: "checklist",
                 col_4: "checklist",
-                col_widths: ["180px", "180px", "180px", "180px", "100px"],
                 col_types: ["string", "string", "string", "string", "number"],
                 grid_layout: false,
-                responsive: false,
+                responsive: true,
                 watermark: ["Filter table ...", "Filter table ...", "Filter table ...", "Filter table ..."],
                 auto_filter: {
                     delay: 100 //milliseconds
diff --git a/tools/mkdocs/site/docs/01_attachements/stylesheets/graph.css b/tools/mkdocs/site/docs/01_attachements/stylesheets/graph.css
index 0bad6a2..ebee7d7 100644
--- a/tools/mkdocs/site/docs/01_attachements/stylesheets/graph.css
+++ b/tools/mkdocs/site/docs/01_attachements/stylesheets/graph.css
@@ -23,4 +23,8 @@
     position: absolute;
     top: 0;
     left: 0;
+}
+
+.md-typeset__table {
+    width: 100%;
 }
\ No newline at end of file
diff --git a/tools/mkdocs/utils/helper.py b/tools/mkdocs/utils/helper.py
index 498bd4b..d1af099 100644
--- a/tools/mkdocs/utils/helper.py
+++ b/tools/mkdocs/utils/helper.py
@@ -69,7 +69,11 @@ def galaxy_transform_to_link(galaxy):
 
 def generate_relations_table(cluster):
     relationships = cluster.relationships
-    markdown = f"# {cluster.value} ({cluster.uuid}) \n\n"
+    markdown = ""
+    markdown += f"[Hide Navigation](#){{ .md-button #toggle-navigation }}\n"
+    markdown += f"[Hide TOC](#){{ .md-button #toggle-toc }}\n"
+    markdown += f"<div class=\"clearfix\"></div>\n"
+    markdown += f"# {cluster.value} ({cluster.uuid}) \n\n"
     markdown += f"{cluster.description} \n\n"
     markdown += "|Cluster A | Galaxy A | Cluster B | Galaxy B | Level { .graph } |\n"
     markdown += "| --- | --- | --- | --- | --- |\n"