Deployed 8b48156 with MkDocs version: 1.5.3

Author: Crashedmind

assets/js/cwe_sunburst.js

@@ -38,23 +38,51 @@ async function loadData() {
           .sum(d=>(!d.children||!d.children.length)?1:0)
           .sort((a,b)=>b.value-a.value)
       );
+    
+    // Ensure minimum segment size for visibility
+    root.descendants().forEach(d => {
+      // Ensure each segment has a minimum angular width
+      if (d.x1 - d.x0 < 0.01 && d !== root) {
+        // If segment is too small, set a minimum size of 0.01 radians
+        // This may slightly distort the proportions but improves visibility
+        const midpoint = (d.x0 + d.x1) / 2;
+        d.x0 = midpoint - 0.005;
+        d.x1 = midpoint + 0.005;
+      }
+    });
 
+    // Increase minimum padding between segments
     const arc = d3.arc()
       .startAngle(d=>d.x0).endAngle(d=>d.x1)
-      .padAngle(d=>Math.min((d.x1-d.x0)/2,0.005)).padRadius(radius/2)
+      .padAngle(d=>Math.min((d.x1-d.x0)/2,0.003)).padRadius(radius/2)
       .innerRadius(d=>Math.max(innerRadius,d.y0*radius))
       .outerRadius(d=>Math.max(d.y0*radius,d.y1*radius-1));
 
-    // draw slices
+    // draw slices with improved visibility
     g.selectAll("path")
     .data(root.descendants().slice(1))
     .join("path")
       .attr("fill", color)
       .attr("d", arc)
       .style("cursor", "pointer")
-      .on("mouseover", showInfo)
+      .style("opacity", 1) // Full opacity for better visibility
+      .style("stroke", "#fff")
+      .style("stroke-width", "0.5px") // Slightly thicker borders
+      .on("mouseover", (event, d) => {
+        // Highlight on hover
+        d3.select(event.currentTarget)
+          .style("opacity", 0.8)
+          .style("stroke-width", "1px");
+        showInfo(event, d);
+      })
+      .on("mouseout", (event) => {
+        // Restore normal appearance
+        d3.select(event.currentTarget)
+          .style("opacity", 1)
+          .style("stroke-width", "0.5px");
+      })
       .on("click", (event, d) => {
-        // build the URL you want—here we’ll link to the MITRE CWE page:
+        // build the URL you want—here we'll link to the MITRE CWE page:
         const idNum = d.data.id?.split("CWE-")[1];
         if (idNum) {
           window.open(
@@ -64,45 +92,120 @@ async function loadData() {
         }
       });
 
-    // draw labels
+    // Add clickable center label for CWE-1000
+    g.append("a")
+      .attr("href", "https://cwe.mitre.org/data/definitions/1000.html")
+      .attr("target", "_blank") // Open in new tab
+      .append("text")
+        .attr("text-anchor", "middle")
+        .attr("font-size", "12px")
+        .attr("font-weight", "bold")
+        .attr("fill", "#0066cc") // Use link color
+        .attr("cursor", "pointer") // Show pointer cursor on hover
+        .text("CWE-1000")
+        .append("title")
+          .text("Click to open CWE-1000: Research Concepts");
+      
+    // draw labels with more intelligent spacing
     g.append("g")
       .attr("pointer-events","none")
       .attr("text-anchor","middle")
       .selectAll("text")
       .data(root.descendants().slice(1))
       .join("text")
-        .attr("transform", d => {
+        .attr("transform", (d, i) => {
+          // Calculate arc width to determine space available
+          const arcWidth = (d.x1 - d.x0);
+          const arcLength = arcWidth * ((d.y0 + d.y1)/2 * radius);
+          
+          // For very small segments, position text at different radius points
+          // For segments with siblings, stagger the radius
+          let radiusFactor = 1.0;
+          
+          // If segment is larger, position text in the middle
+          if (arcLength > 30) {
+            // Plenty of room, use middle position
+            radiusFactor = 1.0;
+          } else if (d.parent && d.parent.children.length > 4) {
+            // For crowded areas with many siblings, stagger by position within parent
+            const siblingIndex = d.parent.children.indexOf(d);
+            // Use modulo 3 to create three different radius positions
+            if (siblingIndex % 3 === 0) radiusFactor = 0.85;      // Inner position
+            else if (siblingIndex % 3 === 1) radiusFactor = 1.0;  // Middle position
+            else radiusFactor = 1.15;                            // Outer position
+          }
+          
           const angle = (d.x0 + d.x1)/2 * 180/Math.PI;
-          const radiusFactor = 1.12;
           const y = (d.y0 + d.y1)/2 * radius * radiusFactor;
+          
           return `rotate(${angle-90}) translate(${y},0) rotate(${angle<180?0:180})`;
         })
-        .attr("font-size", "3px")
+        // Fixed modest font size
+        .attr("font-size", "5px")
+        // Improve text readability with stronger outline
+        .attr("stroke", "#fff")
+        .attr("stroke-width", "0.3px")
+        .attr("font-weight", "bold")
+        // Only show CWE IDs, not names
         .text(d => d.data.id 
           ? d.data.id.split(':')[0] 
-          : (d.data.name||"").substring(0,30)
+          : ""
         )
-        .on("mouseover click", showInfo);
+        // Always display text, regardless of segment size
+        .style("display", "inline")
+        .append("title") // Add tooltip with full name on hover
+        .text(d => d.data.id && d.data.name ? `${d.data.id}: ${d.data.name}` : (d.data.name || ""));
 
-    // info‐panel
-    function showInfo(_,d) {
+    // info‐panel with children list
+    function showInfo(event, d) {
       const bc = d.ancestors().reverse()
-        .map(a=>a.data.id||a.data.name||"Root").join(" > ");
+        .map(a => a.data.id || a.data.name || "Root").join(" > ");
+        
       let html = `<div class="breadcrumb">${bc}</div>`;
-      if(d.data.id) html += `
+      if (d.data.id) html += `
       <div class="cwe-id">
         <a href="https://cwe.mitre.org/data/definitions/${d.data.id.split('-')[1]}.html" target="_blank">
           ${d.data.id}
         </a>
       </div>`;
-      if(d.data.name)     html += `<div class="cwe-name">${d.data.name}</div>`;
-      if(d.data.abstraction)
+      if (d.data.name) html += `<div class="cwe-name">${d.data.name}</div>`;
+      if (d.data.abstraction)
                           html += `<div class="cwe-abstraction">Abstraction: ${d.data.abstraction}</div>`;
+      
+      // Add children count
       html += `<div class="children-count">${
                 d.children 
                   ? `Children: ${d.children.length}`
                   : 'Leaf node'
               }</div>`;
+              
+      // Always add the complete children list if there are any children
+      if (d.children && d.children.length > 0) {
+        html += `<div class="children-list"><h4>Child nodes:</h4><ul>`;
+        
+        // Sort children alphabetically by ID
+        const sortedChildren = [...d.children].sort((a, b) => {
+          const aId = a.data.id || "";
+          const bId = b.data.id || "";
+          return aId.localeCompare(bId);
+        });
+        
+        // Add each child to the list with its ID and name
+        sortedChildren.forEach(child => {
+          if (child.data.id) {
+            const idNum = child.data.id.split('-')[1];
+            html += `<li>
+              <a href="https://cwe.mitre.org/data/definitions/${idNum}.html" target="_blank">${child.data.id}</a>: 
+              ${child.data.name || ""}
+            </li>`;
+          } else {
+            html += `<li>${child.data.name || ""}</li>`;
+          }
+        });
+        
+        html += `</ul></div>`;
+      }
+      
       d3.select(".node-info").html(html);
     }
 
@@ -116,7 +219,40 @@ async function loadData() {
 
     // initial
     showInfo(null, root);
+    
+    // Add CSS without scrollbars
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `
+      .children-list {
+        margin-top: 15px;
+        border: 1px solid #eee;
+        padding: 15px;
+        background: #f9f9f9;
+        border-radius: 4px;
+      }
+      .children-list h4 {
+        margin-top: 0;
+        margin-bottom: 10px;
+        color: #333;
+      }
+      .children-list ul {
+        margin: 0;
+        padding-left: 20px;
+      }
+      .children-list li {
+        margin-bottom: 5px;
+        font-size: 14px;
+        line-height: 1.4;
+      }
+      .children-list a {
+        color: #0066cc;
+        text-decoration: none;
+      }
+      .children-list a:hover {
+        text-decoration: underline;
+      }
+    `;
+    document.head.appendChild(styleElement);
   }
 
-  loadData();
-  
+  loadData();