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.

[AurelienCURTI]

Instead of cleaning the wrapper element you can only remove the wrapper from the DOM so that it won't stay even if you stop the highlight.

[AurelienCURTI]

You can also add a logic to change the line style and play with the shadows based on odd/even depths to help to distinguish layers

Here we don't understand that ngb3 and ngb4 are included into ngb2

Also to help to understand that ngb4 overlap ngb3 you can differentiate the chip font (like using italic style for overlapping element) to help to understand that ngb3 and ngb4 are both one on the other

[AurelienCURTI]

I think there is some issue with the refresh