feature(mermaid-plugin): adds focus highlighting

[sverweij]

Description

• adds focus highlighting to the mermaid reporter;

Also includes the mermaid reporter plugin along with the regular test coverage (it was already 100% covered to start with - and we don't want that to grow less ;-) )

Motivation and Context

@MH4GF has been working on a very nice GitHub action that can add a mermaid report to
your pull request that shows the modules the PR is about. It'd be awesome if they could expand a bit to not only show the modules touched by the PR, but also the immediate context. This is what dependency-cruiser's (existing) focus feature is for.

In the context of a PR it'd however be useful to see which modules are the ones touched by the PR and which are included in the model for context only. This PR adjusts that.

This feature might profit from an implementation for #564; it might be useful
to see even more context than the direct dependents and dependencies of the modules
at hand.

How Has This Been Tested?

• green ci
• additional unit test

Screenshots

Given a dependency-cruiser result which has a focus set to one or more modules the output will show these modules highlighted (in green) and the modules in its context in a slightly subdued gray:

After

Here a reviewer would see normalize.js has been updated - but interestingly enough not any of the test files that directly include it.

flowchart LR

subgraph src["src"]
  subgraph src_main["main"]
    subgraph src_main_rule_set["rule-set"]
      src_main_rule_set_normalize_js["normalize.js"]
    end
    src_main_index_js["index.js"]
    subgraph src_main_utl["utl"]
      src_main_utl_normalize_re_properties_js["normalize-re-properties.js"]
    end
  end
end
subgraph test["test"]
  subgraph test_enrich["enrich"]
    subgraph test_enrich_derive["derive"]
      subgraph test_enrich_derive_reachable["reachable"]
        test_enrich_derive_reachable_index_spec_mjs["index.spec.mjs"]
      end
    end
  end
  subgraph test_main["main"]
    subgraph test_main_rule_set["rule-set"]
      test_main_rule_set_normalize_spec_mjs["normalize.spec.mjs"]
    end
  end
  subgraph test_validate["validate"]
    test_validate_parse_ruleset_utl_mjs["parse-ruleset.utl.mjs"]
  end
end
subgraph node_modules["node_modules"]
  subgraph node_modules_lodash["lodash"]
    node_modules_lodash_has_js["has.js"]
    node_modules_lodash_cloneDeep_js["cloneDeep.js"]
  end
end
src_main_rule_set_normalize_js --> src_main_utl_normalize_re_properties_js
src_main_rule_set_normalize_js --> node_modules_lodash_cloneDeep_js
src_main_rule_set_normalize_js --> node_modules_lodash_has_js
src_main_index_js --> src_main_rule_set_normalize_js
test_enrich_derive_reachable_index_spec_mjs --> src_main_rule_set_normalize_js
test_main_rule_set_normalize_spec_mjs --> src_main_rule_set_normalize_js
test_validate_parse_ruleset_utl_mjs --> src_main_rule_set_normalize_js

style src_main_rule_set_normalize_js fill:lime,color:black

Loading

update 2022-06-08: replaced with diagram that only highlights, and doesn't subdue

Before

flowchart LR

subgraph src["src"]
  subgraph src_main["main"]
    subgraph src_main_rule_set["rule-set"]
      src_main_rule_set_normalize_js["normalize.js"]
    end
    src_main_index_js["index.js"]
    subgraph src_main_utl["utl"]
      src_main_utl_normalize_re_properties_js["normalize-re-properties.js"]
    end
  end
end
subgraph test["test"]
  subgraph test_enrich["enrich"]
    subgraph test_enrich_derive["derive"]
      subgraph test_enrich_derive_reachable["reachable"]
        test_enrich_derive_reachable_index_spec_mjs["index.spec.mjs"]
      end
    end
  end
  subgraph test_main["main"]
    subgraph test_main_rule_set["rule-set"]
      test_main_rule_set_normalize_spec_mjs["normalize.spec.mjs"]
    end
  end
  subgraph test_validate["validate"]
    test_validate_parse_ruleset_utl_mjs["parse-ruleset.utl.mjs"]
  end
end
subgraph node_modules["node_modules"]
  subgraph node_modules_lodash["lodash"]
    node_modules_lodash_has_js["has.js"]
    node_modules_lodash_cloneDeep_js["cloneDeep.js"]
  end
end
src_main_rule_set_normalize_js --> src_main_utl_normalize_re_properties_js
src_main_rule_set_normalize_js --> node_modules_lodash_cloneDeep_js
src_main_rule_set_normalize_js --> node_modules_lodash_has_js
src_main_index_js --> src_main_rule_set_normalize_js
test_enrich_derive_reachable_index_spec_mjs --> src_main_rule_set_normalize_js
test_main_rule_set_normalize_spec_mjs --> src_main_rule_set_normalize_js
test_validate_parse_ruleset_utl_mjs --> src_main_rule_set_normalize_js

Loading

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• Documentation only change
• Refactor (non-breaking change which fixes an issue without changing functionality)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• 📖

  • My change doesn't require a documentation update, or ...
  • it does and I have updated it

• ⚖️

  • The contribution will be subject to The MIT license, and I'm OK with that.
  • The contribution is my own original work.
  • I am ok with the stuff in CONTRIBUTING.md.

[MH4GF]

Thanks for a very useful addition 😄 The ability to focus on the relevant file will allow for a more context-aware discussion!

[MH4GF]

By splitting it into hashNodeName(), we no longer need to handle implicit text. Very helpful and easy to understand 👍🏻

[MH4GF]

Understanding that the color scheme is the same as that of the dot reporter, I think it would be better to add highlighting when matchedFocus is true and leave it as is otherwise. There are two reasons.

• mermaid.js and GitHub support dark mode. It seems better to have the background color change according to the user's environment instead of using lightgray as a uniform background color.
• The default value of mermaid.js and tools like GitHub and Notion seem to set the character limit at 50000, and it seems that you should reduce unnecessary characters as much as possible to avoid exceeding the maximum character limit.

[sverweij]

Agree, good point! I'll update it.