feat(devexp): highlight components by group

[matthieu-crouzet]

Related issues

🚀 Feature #2532

How to test

• Fetch and checkout feat/highlight-components

•  yarn && yarn nx serve showcase

• Go to http://localhost:4200/#/rules-engine (more things to see compare to home page)

With postMessage (chrome extension part is not done yet)

• Set up groups (same message for the following configurations elementMinWidth, elementMinHeight, throttleInterval and maxDepth)

window.postMessage({
  type: 'otter',
  to: 'app',
  content: {
    dataType: 'changeHighlightConfiguration',
    groupsInfo: {
      otter: {
        backgroundColor: '#f4dac6',
        color: 'black',
        regexp: '^o3r',
        displayName: 'o3r'
      },
      designFactory: {
        backgroundColor: '#000835',
        regexp: '^df',
        displayName: 'df'
      },
      ngBootstrap: {
        backgroundColor: '#0d6efd',
        regexp: '^ngb',
        displayName: 'ngb'
      }
    }
  }
});

• Activate highlight

window.postMessage({
  type: 'otter',
  to: 'app',
  content: {
    dataType: 'toggleHighlight',
    isRunning: true
  }
});

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 29dfdcc.

Command	Status	Duration	Result
nx run-many --target=test-int	✅ Succeeded	10m 2s	View ↗
nx run-many --target=build --projects=eslint-pl...	✅ Succeeded	<1s	View ↗
nx run-many --target=test-e2e	✅ Succeeded	1m 54s	View ↗
nx run-many --target=publish --nx-bail --userco...	✅ Succeeded	35s	View ↗
nx run-many --target=build	✅ Succeeded	3m 12s	View ↗
nx affected --target=test --cacheDirectory=D:\a...	✅ Succeeded	31s	View ↗
nx run-many --target=documentation	✅ Succeeded	1m 15s	View ↗
nx run ama-sdk-schematics:build-swagger	✅ Succeeded	<1s	View ↗
Additional runs (4)	✅ Succeeded	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-03 08:09:09 UTC

[codecov]

Codecov Report

Attention: Patch coverage is 16.85393% with 148 lines in your changes missing coverage. Please review.

Project coverage is 65.63%. Comparing base (f4e354c) to head (29dfdcc).

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...mponents/src/devkit/highlight/highlight.service.ts	5.43%	87 Missing ⚠️
...es/@o3r/components/src/devkit/highlight/helpers.ts	28.33%	43 Missing ⚠️
.../src/devkit/components-devtools.message.service.ts	5.26%	18 Missing ⚠️

Additional details and impacted files

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.