[high] fix: graph.js mouseover throws for all MITRE ATT&CK galaxies (invalid CSS selector)

[elhoim]

BLUF — graph.js mouseover throws for every MITRE ATT&CK galaxy because the CSS selector is invalid

• Problem — graph.js builds a CSS class from a galaxy name with an expression that only strips whitespace and dots, then queries with the same expression, so any other character goes into the selector raw and document.querySelectorAll throws a DOMException that aborts the mouseover handler. 17 of the 131 galaxy names hit this, including every MITRE ATT&CK galaxy (the ampersand), plus names containing parentheses and a slash.
• Fix — Introduce one galaxyClass() helper replacing every character outside [A-Za-z0-9_-], used at all six assign and select sites so the two cannot drift.
• Effect — Node highlight, legend emphasis and link highlighting work again on the galaxies people browse most.

Problem

graph.js builds a CSS class from a galaxy name and later looks it up with a selector built the same way — six sites, all carrying a copy of the same expression:

d3.selectAll(".legend-text.galaxy-" + d.galaxy.replace(/\s+/g, '-').replace(/[\s.]/g, '-'))

Only whitespace and . are replaced. Everything else goes into the selector untouched, and a class selector may only contain [A-Za-z0-9_-] (plus non-ASCII and escapes). document.querySelectorAll throws a DOMException on anything else, which aborts the handler that called it.

17 of the 131 galaxy names produce an invalid selector — including every MITRE ATT&CK * galaxy:

"MITRE ATT&CK Techniques"     -> .galaxy-MITRE-ATT&CK-Techniques      (&)
"MITRE ATT&CK Groups"         -> .galaxy-MITRE-ATT&CK-Groups          (&)
"Concealment Layers ... (CLOAK)" -> .galaxy-...-Knowledge-(CLOAK)     ( and )
"UAVs/UCAVs"                  -> .galaxy-UAVs/UCAVs                   (/)

15 names contain &, one contains (), one contains /. Hovering a node in any of those galaxies throws, so the mouseover highlight, the legend emphasis and the link highlighting all stop working for exactly the galaxies people use most.

Fix

One galaxyClass() helper that replaces every character outside [A-Za-z0-9_-], used at all six sites — the three that assign the class and the three that select on it — so the two can no longer drift apart.

All 131 galaxy names are ASCII (checked), so no non-ASCII identifiers are being flattened, and no stylesheet hardcodes these class names (grep -rn "galaxy-" stylesheets/ is empty), so renaming them affects nothing else.

Verification

galaxies: 131
invalid class selectors -- committed expression: 17
invalid class selectors -- galaxyClass()       : 0

  "MITRE ATT&CK Analytics"
      before: .galaxy-MITRE-ATT&CK-Analytics
      after : .galaxy-MITRE-ATT-CK-Analytics
  "UAVs/UCAVs"
      before: .galaxy-UAVs/UCAVs
      after : .galaxy-UAVs-UCAVs

node --check graph.js passes, and no hand-rolled copy of the expression remains in the file.

🤖 Generated with Claude Code