From 5ffd69f2496411a8ca5cdf4b9cd0451fef96559e Mon Sep 17 00:00:00 2001 From: niclas Date: Thu, 14 Mar 2024 10:51:22 +0100 Subject: [PATCH 1/4] Add [website] edit button --- tools/mkdocs/modules/galaxy.py | 1 + .../site/docs/01_attachements/stylesheets/buttons.css | 6 ++++++ tools/mkdocs/site/mkdocs.yml | 1 + 3 files changed, 8 insertions(+) create mode 100644 tools/mkdocs/site/docs/01_attachements/stylesheets/buttons.css diff --git a/tools/mkdocs/modules/galaxy.py b/tools/mkdocs/modules/galaxy.py index 2de8ae4..e056a03 100644 --- a/tools/mkdocs/modules/galaxy.py +++ b/tools/mkdocs/modules/galaxy.py @@ -51,6 +51,7 @@ class Galaxy: def _create_title_entry(self): entry = "" + 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/stylesheets/buttons.css b/tools/mkdocs/site/docs/01_attachements/stylesheets/buttons.css new file mode 100644 index 0000000..83467f6 --- /dev/null +++ b/tools/mkdocs/site/docs/01_attachements/stylesheets/buttons.css @@ -0,0 +1,6 @@ +.md-button { + font-size: 16px; + position: relative; + padding: 10px 20px; + float: right; +} \ No newline at end of file diff --git a/tools/mkdocs/site/mkdocs.yml b/tools/mkdocs/site/mkdocs.yml index 3c204e4..bc13fef 100644 --- a/tools/mkdocs/site/mkdocs.yml +++ b/tools/mkdocs/site/mkdocs.yml @@ -78,6 +78,7 @@ extra_javascript: extra_css: - 01_attachements/stylesheets/graph.css + - 01_attachements/stylesheets/buttons.css plugins: - search From 53f1c2c31199720f5bc74c85981714a15a9798a9 Mon Sep 17 00:00:00 2001 From: niclas Date: Thu, 14 Mar 2024 17:00:19 +0100 Subject: [PATCH 2/4] Add [toc] optional hiding --- .../docs/01_attachements/javascripts/graph.js | 421 ++++++++---------- .../01_attachements/javascripts/navigation.js | 22 + .../01_attachements/stylesheets/graph.css | 16 + .../stylesheets/navigation.css | 49 ++ tools/mkdocs/site/mkdocs.yml | 9 +- 5 files changed, 283 insertions(+), 234 deletions(-) create mode 100644 tools/mkdocs/site/docs/01_attachements/javascripts/navigation.js create mode 100644 tools/mkdocs/site/docs/01_attachements/stylesheets/navigation.css diff --git a/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js b/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js index 9e33ba6..a5800d6 100644 --- a/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js +++ b/tools/mkdocs/site/docs/01_attachements/javascripts/graph.js @@ -76,16 +76,15 @@ document$.subscribe(function () { simulation.update({ newNodes: newNodes, newLinks: newLinks }); } - function createForceDirectedGraph(data, elementId) { - var nodePaths = {}; - data.forEach(d => { - nodePaths[d.source] = d.sourcePath || null; - nodePaths[d.target] = d.targetPath || null; - }); - - // Extract unique galaxy names from data - const galaxies = Array.from(new Set(data.flatMap(d => [d.sourceGalaxy, d.targetGalaxy]))); + function extractNodePaths(data) { + return data.reduce((acc, d) => ({ + ...acc, + [d.source]: d.sourcePath || null, + [d.target]: d.targetPath || null, + }), {}); + } + function defineColorScale(galaxies) { const colorScheme = [ '#E63946', // Red '#F1FAEE', // Off White @@ -108,8 +107,171 @@ document$.subscribe(function () { '#FFBA08', // Selective Yellow '#FFD60A' // Naples Yellow ]; - const colorScale = d3.scaleOrdinal(colorScheme) + return d3.scaleOrdinal(colorScheme) .domain(galaxies); + } + + function initializeNodeInteractions(node, link, tooltip, simulation, links, Parent_Node, NODE_RADIUS) { + // Mouseover event handler + node.on("mouseover", function (event, d) { + tooltip.transition() + .duration(200) + .style("opacity", .9); + tooltip.html(d.id) + .style("left", (event.pageX) + "px") + .style("top", (event.pageY - 28) + "px"); + node.style("opacity", 0.1); + link.style("opacity", 0.1); + d3.select(this) + .attr("r", parseFloat(d3.select(this).attr("r")) + 5) + .style("opacity", 1); + d3.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) + .style("font-weight", "bold") + .style("font-size", "14px"); + link.filter(l => l.source.id === d.id || l.target.id === d.id) + .attr("stroke-width", 3) + .style("opacity", 1); + node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id))) + .style("opacity", 1); + }) + .on("mousemove", function (event) { + tooltip.style("left", (event.pageX) + "px") + .style("top", (event.pageY - 28) + "px"); + }) + .on("mouseout", function (event, d) { + tooltip.transition() + .duration(500) + .style("opacity", 0); + node.style("opacity", 1); + link.style("opacity", 1); + d3.select(this).attr("r", d => d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS); + d3.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) + .style("font-weight", "normal") + .style("font-size", "12px"); + link.filter(l => l.source.id === d.id || l.target.id === d.id) + .attr("stroke-width", 1); + node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id))); + }) + .on("dblclick", function (event, d) { + location.href = d.path; + }); + + // Define drag behavior + var drag = d3.drag() + .on("start", dragstarted) + .on("drag", dragged) + .on("end", dragended); + + // Apply drag behavior to nodes + node.call(drag); + + function dragstarted(event, d) { + if (!event.active) simulation.alphaTarget(0.3).restart(); + d.fx = d.x; + d.fy = d.y; + } + + function dragged(event, d) { + d.fx = event.x; + d.fy = event.y; + } + + function dragended(event, d) { + if (!event.active) simulation.alphaTarget(0); + } + } + + + + function createGalaxyColorLegend(svg, width, galaxies, colorScale, node, link, tooltip) { + // Prepare legend data + const legendData = galaxies.map(galaxy => ({ + name: galaxy, + color: colorScale(galaxy) + })); + + const maxCharLength = 10; // Maximum number of characters to display in legend + + // Create legend + const legend = svg.append("g") + .attr("class", "legend") + .attr("transform", "translate(" + (width - 100) + ",20)"); // Adjust position as needed + + // Add legend title + legend.append("text") + .attr("x", 0) + .attr("y", -10) + .style("font-size", "13px") + .style("text-anchor", "start") + .style("fill", "grey") + .text("Galaxy Colors"); + + // Add colored rectangles and text labels for each galaxy + const legendItem = legend.selectAll(".legend-item") + .data(legendData) + .enter().append("g") + .attr("class", "legend-item") + .attr("transform", (d, i) => `translate(0, ${i * 20})`); + + legendItem.append("rect") + .attr("width", 12) + .attr("height", 12) + .style("fill", d => d.color) + .on("mouseover", mouseoverEffect) + .on("mouseout", mouseoutEffect); + + legendItem.append("text") + .attr("x", 24) + .attr("y", 9) + .attr("dy", "0.35em") + .style("text-anchor", "start") + .style("fill", "grey") + .style("font-size", "12px") + .attr("class", d => "legend-text galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) + .text(d => d.name.length > maxCharLength ? d.name.substring(0, maxCharLength) + "..." : d.name) + .on("mouseover", mouseoverEffect) + .on("mouseout", mouseoutEffect); + + function mouseoverEffect(event, d) { + // Dim the opacity of all nodes and links + node.style("opacity", 0.1); + link.style("opacity", 0.1); + + // Highlight elements associated with the hovered galaxy + svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) + .each(function () { + d3.select(this).style("opacity", 1); // Increase opacity for related elements + }); + + // Show tooltip + tooltip.transition() + .duration(200) + .style("opacity", .9); + tooltip.html(d.name) + .style("left", (event.pageX) + "px") + .style("top", (event.pageY - 28) + "px"); + } + + function mouseoutEffect(event, d) { + // Restore the opacity of nodes and links + node.style("opacity", 1); + link.style("opacity", 1); + + // Hide tooltip + tooltip.transition() + .duration(500) + .style("opacity", 0); + } + + } + + + function createForceDirectedGraph(data, elementId) { + const nodePaths = extractNodePaths(data); + + // // Extract unique galaxy names from data + const galaxies = Array.from(new Set(data.flatMap(d => [d.sourceGalaxy, d.targetGalaxy]))); + const colorScale = defineColorScale(data); var nodes = Array.from(new Set(data.flatMap(d => [d.source, d.target]))) .map(id => ({ @@ -119,8 +281,6 @@ document$.subscribe(function () { })); let header = document.querySelector('h1').textContent; - // const parentUUID = header.replace(/\s+/g, '-').charAt(0).toLowerCase() + header.replace(/\s+/g, '-').slice(1); - // console.log("Parent UUID: " + parentUUID); const Parent_Node = nodes.find(node => node.id.includes(header)); var links = data.map(d => ({ source: d.source, target: d.target })); @@ -130,15 +290,22 @@ document$.subscribe(function () { .style("opacity", 0); // Set up the dimensions of the graph - var width = 800, height = 1000; + 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 svg = d3.select(elementId).append("svg") + // .attr("width", width) + // .attr("height", height) + + var svg = d3.select("div#container") + .append("svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 825 1000") + .classed("svg-content", true); // Create a force simulation linkDistance = Math.sqrt((width * height) / nodes.length); - var simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(linkDistance)) .force("charge", d3.forceManyBody().strength(-70)) @@ -169,165 +336,9 @@ document$.subscribe(function () { }) .attr("class", d => "node galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')); - // Apply tooltip on nodes - node.on("mouseover", function (event, d) { - tooltip.transition() - .duration(200) - .style("opacity", .9); - tooltip.html(d.id) - .style("left", (event.pageX) + "px") - .style("top", (event.pageY - 28) + "px"); - node.style("opacity", 0.1); - link.style("opacity", 0.1); - d3.select(this) - .attr("r", parseFloat(d3.select(this).attr("r")) + 5) - .style("opacity", 1); - svg.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) - .style("font-weight", "bold") - .style("font-size", "14px"); - link.filter(l => l.source.id === d.id || l.target.id === d.id) - .attr("stroke-width", 3) - .style("opacity", 1); - node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id))) - .style("opacity", 1); - }) - .on("mousemove", function (event) { - tooltip.style("left", (event.pageX) + "px") - .style("top", (event.pageY - 28) + "px"); - }) - .on("mouseout", function (event, d) { - tooltip.transition() - .duration(500) - .style("opacity", 0); - node.style("opacity", 1); - link.style("opacity", 1); - d3.select(this).attr("r", function (d, i) { - return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS; - }); - svg.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) - .style("font-weight", "normal") - .style("font-size", "12px"); - link.filter(l => l.source.id === d.id || l.target.id === d.id) - .attr("stroke-width", 1); - node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id))) - }); + initializeNodeInteractions(node, link, tooltip, simulation, links, Parent_Node, NODE_RADIUS); - - // Apply links on nodes - node.on("dblclick", function (event, d) { - location.href = d.path; - }); - - // Define drag behavior - var drag = d3.drag() - .on("start", dragstarted) - .on("drag", dragged) - .on("end", dragended); - - // Apply drag behavior to nodes - node.call(drag); - - function dragstarted(event, d) { - if (!event.active) simulation.alphaTarget(0.3).restart(); - d.fx = d.x; - d.fy = d.y; - } - - function dragged(event, d) { - d.fx = event.x; - d.fy = event.y; - } - - function dragended(event, d) { - // Do not reset the fixed positions - if (!event.active) simulation.alphaTarget(0); - } - - // Prepare legend data - const legendData = galaxies.map(galaxy => ({ - name: galaxy, - color: colorScale(galaxy) - })); - - const maxCharLength = 10; // Maximum number of characters to display in legend - // Create legend - const legend = svg.append("g") - .attr("class", "legend") - .attr("transform", "translate(" + (width - 100) + ",20)"); // Adjust position as needed - - // Add legend title - legend.append("text") - .attr("x", 0) - .attr("y", -10) - .style("font-size", "13px") - .style("text-anchor", "start") - .style("fill", "grey") - .text("Galaxy Colors"); - - // Add colored rectangles and text labels for each galaxy - const legendItem = legend.selectAll(".legend-item") - .data(legendData) - .enter().append("g") - .attr("class", "legend-item") - .attr("transform", (d, i) => `translate(0, ${i * 20})`); - - legendItem.append("rect") - .attr("width", 12) - .attr("height", 12) - .style("fill", d => d.color) - .on("mouseover", function (event, d) { - node.style("opacity", 0.1); - link.style("opacity", 0.1); - svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) - .each(function () { - var currentRadius = d3.select(this).attr("r"); - d3.select(this).style("opacity", 1); - }); - tooltip.transition() - .duration(200) - .style("opacity", .9); - tooltip.html(d.name) - .style("left", (event.pageX) + "px") - .style("top", (event.pageY - 28) + "px"); - }) - .on("mouseout", function (event, d) { - node.style("opacity", 1); - link.style("opacity", 1); - tooltip.transition() - .duration(500) - .style("opacity", 0); - }); - - legendItem.append("text") - .attr("x", 24) - .attr("y", 9) - .attr("dy", "0.35em") - .style("text-anchor", "start") - .style("fill", "grey") - .style("font-size", "12px") - .attr("class", d => "legend-text galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) - .text(d => d.name.length > maxCharLength ? d.name.substring(0, maxCharLength) + "..." : d.name) - .on("mouseover", function (event, d) { - node.style("opacity", 0.1); - link.style("opacity", 0.1); - svg.selectAll(".galaxy-" + d.name.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) - .each(function () { - d3.select(this).style("opacity", 1); - }); - tooltip.transition() - .duration(200) - .style("opacity", .9); - tooltip.html(d.name) - .style("left", (event.pageX) + "px") - .style("top", (event.pageY - 28) + "px"); - }) - .on("mouseout", function (event, d) { - node.style("opacity", 1); - link.style("opacity", 1); - tooltip.transition() - .duration(500) - .style("opacity", 0); - }); + createGalaxyColorLegend(svg, width, galaxies, colorScale, node, link, tooltip); // Update positions on each simulation 'tick' @@ -367,59 +378,6 @@ document$.subscribe(function () { exit => exit.remove() ); - node.call(drag); - - // Apply tooltip on nodes - node.on("mouseover", function (event, d) { - tooltip.transition() - .duration(200) - .style("opacity", .9); - tooltip.html(d.id) - .style("left", (event.pageX) + "px") - .style("top", (event.pageY - 28) + "px"); - node.style("opacity", 0.1); - link.style("opacity", 0.1); - d3.select(this) - .attr("r", parseFloat(d3.select(this).attr("r")) + 5) - .style("opacity", 1); - svg.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) - .style("font-weight", "bold") - .style("font-size", "14px"); - link.filter(l => l.source.id === d.id || l.target.id === d.id) - .attr("stroke-width", 3) - .style("opacity", 1); - node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id))) - .style("opacity", 1); - }) - .on("mousemove", function (event) { - tooltip.style("left", (event.pageX) + "px") - .style("top", (event.pageY - 28) + "px"); - }) - .on("mouseout", function (event, d) { - tooltip.transition() - .duration(500) - .style("opacity", 0); - node.style("opacity", 1); - link.style("opacity", 1); - d3.select(this).attr("r", function (d, i) { - return d.id === Parent_Node.id ? NODE_RADIUS + 5 : NODE_RADIUS; - }); - svg.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-')) - .style("font-weight", "normal") - .style("font-size", "12px"); - link.filter(l => l.source.id === d.id || l.target.id === d.id) - .attr("stroke-width", 1); - node.filter(n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id))) - }); - - // Apply links on nodes - node.on("dblclick", function (event, d) { - console.log("Node: " + d.id); - console.log(d); - console.log("Source Path: " + d.sourcePath); - location.href = d.path; - }); - // Process new links const oldLinksMap = new Map(link.data().map(d => [`${d.source.id},${d.target.id}`, d])); links = newLinks.map(d => Object.assign(oldLinksMap.get(`${d.source.id},${d.target.id}`) || {}, d)); @@ -433,6 +391,9 @@ document$.subscribe(function () { exit => exit.remove() ); + initializeNodeInteractions(node, link, tooltip, simulation, links, Parent_Node, NODE_RADIUS); + createGalaxyColorLegend(svg, width, galaxies, colorScale, node, link, tooltip); + // Restart the simulation with new data simulation.nodes(nodes); simulation.force("link").links(links); @@ -491,9 +452,11 @@ document$.subscribe(function () { } else { data = allData; } - var graphId = "graph" + index; + var graphId = "container"; var div = document.createElement("div"); + // div.id = graphId; div.id = graphId; + div.className = "svg-container"; table.parentNode.insertBefore(div, table); var simulation = createForceDirectedGraph(data, "#" + graphId); diff --git a/tools/mkdocs/site/docs/01_attachements/javascripts/navigation.js b/tools/mkdocs/site/docs/01_attachements/javascripts/navigation.js new file mode 100644 index 0000000..0a3b501 --- /dev/null +++ b/tools/mkdocs/site/docs/01_attachements/javascripts/navigation.js @@ -0,0 +1,22 @@ +document.addEventListener('DOMContentLoaded', function () { + const body = document.body; + const toggleNavigationBtn = document.getElementById('toggle-navigation'); + const toggleTocBtn = document.getElementById('toggle-toc'); + + function updateButtonText() { + toggleNavigationBtn.textContent = body.classList.contains('hide-navigation') ? '>>> Show Navigation' : '<<< Hide Navigation'; + toggleTocBtn.textContent = body.classList.contains('hide-toc') ? 'Show TOC <<<' : 'Hide TOC >>>'; + } + + toggleNavigationBtn.addEventListener('click', function () { + body.classList.toggle('hide-navigation'); + updateButtonText(); + }); + + toggleTocBtn.addEventListener('click', function () { + body.classList.toggle('hide-toc'); + updateButtonText(); + }); + + updateButtonText(); // Initialize button text based on current state +}); diff --git a/tools/mkdocs/site/docs/01_attachements/stylesheets/graph.css b/tools/mkdocs/site/docs/01_attachements/stylesheets/graph.css index 4955ea1..0bad6a2 100644 --- a/tools/mkdocs/site/docs/01_attachements/stylesheets/graph.css +++ b/tools/mkdocs/site/docs/01_attachements/stylesheets/graph.css @@ -7,4 +7,20 @@ border-radius: 4px; pointer-events: none; color: black; +} + +.svg-container { + display: inline-block; + position: relative; + width: 100%; + padding-bottom: 100%; + vertical-align: top; + overflow: hidden; +} + +.svg-content { + display: inline-block; + position: absolute; + top: 0; + left: 0; } \ No newline at end of file diff --git a/tools/mkdocs/site/docs/01_attachements/stylesheets/navigation.css b/tools/mkdocs/site/docs/01_attachements/stylesheets/navigation.css new file mode 100644 index 0000000..1fd8590 --- /dev/null +++ b/tools/mkdocs/site/docs/01_attachements/stylesheets/navigation.css @@ -0,0 +1,49 @@ +.hide-navigation .md-sidebar--primary { + display: none; +} + +.hide-toc .md-sidebar--secondary { + display: none; +} + +#toggle-toc { + margin: 10px 5px; + padding: 5px 10px; + color: grey; + outline: none; + background-color: initial; + border-color: grey; + /* border: none; */ + cursor: pointer; + float: right; +} + +#toggle-toc:hover { + color: #5C6BC0; + border-color: #5C6BC0; +} + + +/* Additional styling for positioning the buttons next to each other */ +#toggle-navigation { + margin: 10px 5px; + padding: 5px 10px; + color: grey; + outline: none; + background-color: initial; + border-color: grey; + /* border: none; */ + cursor: pointer; + float: left; +} + +#toggle-navigation:hover { + color: #5C6BC0; + border-color: #5C6BC0; +} + +.clearfix::after { + content: ""; + display: table; + clear: both; +} \ No newline at end of file diff --git a/tools/mkdocs/site/mkdocs.yml b/tools/mkdocs/site/mkdocs.yml index bc13fef..b366a99 100644 --- a/tools/mkdocs/site/mkdocs.yml +++ b/tools/mkdocs/site/mkdocs.yml @@ -24,6 +24,8 @@ theme: - search.highlight - search.share - navigation.instant.preview + - navigation.instant.prefetch + - navigation.top palette: # Palette toggle for automatic mode @@ -66,19 +68,16 @@ extra: generator: false extra_javascript: - # - javascripts/tablefilter.js - # - "https://unpkg.com/tablefilter@0.7.3/dist/tablefilter/tablefilter.js" - # - "https://d3js.org/d3.v6.min.js" - 01_attachements/javascripts/graph.js - 01_attachements/javascripts/statistics.js - # - node_modules/tablefilter/dist/tablefilter/tablefilter.js - # - node_modules/d3/dist/d3.min.js - 01_attachements/modules/d3.min.js - 01_attachements/modules/tablefilter/tablefilter.js + - 01_attachements/javascripts/navigation.js extra_css: - 01_attachements/stylesheets/graph.css - 01_attachements/stylesheets/buttons.css + - 01_attachements/stylesheets/navigation.css plugins: - search From c40130eab8703411a3ec2e4d5dd25a1d33da6abb Mon Sep 17 00:00:00 2001 From: niclas Date: Fri, 15 Mar 2024 09:41:36 +0100 Subject: [PATCH 3/4] 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"
\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"
\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" From 48d19c9a24bf732aa8bee433e729c1b1cbbc96d8 Mon Sep 17 00:00:00 2001 From: niclas Date: Fri, 15 Mar 2024 10:36:00 +0100 Subject: [PATCH 4/4] Add [index] navigation buttons --- tools/mkdocs/modules/site.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/mkdocs/modules/site.py b/tools/mkdocs/modules/site.py index 5306b21..5c5e58b 100644 --- a/tools/mkdocs/modules/site.py +++ b/tools/mkdocs/modules/site.py @@ -7,7 +7,7 @@ class Site: def __init__(self, path, name) -> None: self.path = path self.name = name - self.content = "" + self.content = '[Hide Navigation](#){ .md-button #toggle-navigation }\n[Hide TOC](#){ .md-button #toggle-toc }\n
\n\n' def add_content(self, content): self.content += content