Node focus

[iurysza]

🚀 Description

Adds a new property: focusedNodesPattern that enables users to provide a pattern (Regex) to match nodes in the graph that should be highlighted and focused. When set:

• the nodes that match the pattern will be highlighted.
• Only nodes that have a direct relation to the focused nodes will be shown in the graph

• The color can be customised via the focusColor property from Theme.BASE

  What it looks like:

  moduleGraphConfig {
  // ...
  focusedNodesPattern.set(".*(reddit|match-day).*")
  theme.set(
      Theme.BASE(
          mapOf(...),
          focusColor = "#FA8140"
      ),
  )
  }

%%{
  init: {
    'theme': 'base',
    'themeVariables': {"primaryTextColor":"#fff","primaryColor":"#5a4f7c","primaryBorderColor":"#5a4f7c","lineColor":"#f5a623","tertiaryColor":"#40375c","fontSize":"12px"}
  }
}%%

graph LR
subgraph app
main
playground
end
subgraph core
common
design-system
footballinfo
reddit
end
subgraph features
match-day
match-thread
end
match-day --> common
match-day --> footballinfo
match-day --> design-system
match-day --> reddit
match-thread --> reddit
playground --> match-day
reddit --> common
main --> match-day

classDef focus fill:#E04380,stroke:#fff,stroke-width:2px,color:#fff;
class match-day focus
class reddit focus

📄 Motivation and Context

Implements #27

🧪 How Has This Been Tested?

• Added Gradle functional tests
• Sample App
• Manually ran some interesting regex combinations while applying the plugin on iurysza/livematch.

📦 Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

✅ Checklist

• [x] My code follows the code style of this project.
• [x] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.

[iurysza]