✨ [RUM-4908] Add only Link to Facet List in Developer Extension

[cy-moi]

Motivation

Add only link to facet list in developer extension, so we don't need to click on every element to exclude everything.

Changes

Screen.Recording.2024-08-06.at.11.12.43.mov

Testing

• Local
• Staging
• Unit
• End to end

---

I have gone over the contributing documentation.

[cit-pr-commenter]

Bundles Sizes Evolution

📦 Bundle Name	Base Size	Local Size	𝚫	𝚫%	Status
Rum	147.04 KiB	147.04 KiB	0 B	0.00%	✅
Logs	51.33 KiB	51.33 KiB	0 B	0.00%	✅
Rum Slim	105.77 KiB	105.77 KiB	0 B	0.00%	✅
Worker	24.50 KiB	24.50 KiB	0 B	0.00%	✅

🚀 CPU Performance

Action Name	Base Average Cpu Time (ms)	Local Average Cpu Time (ms)	𝚫
addglobalcontext	0.002	0.002	0.000
addaction	0.037	0.036	-0.000
addtiming	0.001	0.001	0.000
adderror	0.045	0.049	0.004
startstopsessionreplayrecording	0.008	0.009	0.001
startview	0.376	0.379	0.003
logmessage	0.026	0.021	-0.006

🧠 Memory Performance

Action Name	Base Consumption Memory (bytes)	Local Consumption Memory (bytes)	𝚫 (bytes)
addglobalcontext	30.06 KiB	27.49 KiB	-2626 B
addaction	60.18 KiB	56.18 KiB	-4098 B
addtiming	28.63 KiB	26.40 KiB	-2284 B
adderror	62.42 KiB	61.58 KiB	-859 B
startstopsessionreplayrecording	28.18 KiB	25.11 KiB	-3137 B
startview	414.92 KiB	420.28 KiB	5.36 KiB
logmessage	57.41 KiB	56.03 KiB	-1410 B

🔗 RealWorld

[nulrich]

There's a small bug when you click "only" on a children and then "only" to the parent. The selection is good but not the "only"/"all" labels.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 88.63636% with 5 lines in your changes missing coverage. Please review.

Project coverage is 92.95%. Comparing base (8a7de5a) to head (f7782df).
Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...nel/components/tabs/eventsTab/computeFacetState.ts	93.33%	2 Missing ⚠️
...xtension/src/panel/hooks/useEvents/eventFilters.ts	77.77%	2 Missing ⚠️
...tension/src/panel/hooks/useEvents/facetRegistry.ts	80.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2830      +/-   ##
==========================================
- Coverage   93.50%   92.95%   -0.55%     
==========================================
  Files         290      297       +7     
  Lines        7703     7840     +137     
  Branches     1754     1785      +31     
==========================================
+ Hits         7203     7288      +85     
- Misses        500      552      +52     

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

[nulrich]

Not directly related to the only feature but I would decorrelate collapse state from the filtering state and add icons to control collapsing manually.

For example, if I want to only select css and image I would start by unselecting resource and then clicking on both. But right now it will unselect and collapse resource.

[cy-moi]

🤔 I actually do the opposite, I never unselect the parent first. Right now, I aim to mimick the web-ui facets, when selecting a child, we expand the parent and find the child to select. But I agree the collapsing is limited here as we are using a third party. Maybe we implement our own collapse component separately, because I worry this PR is growing a bit much.

[nulrich]

💬 suggestion: ‏I would keep the filter approach which is maybe more clear.

Suggested change

	const filteredEvents: SdkEvent[] = []
	export function filterFacets(
	events: SdkEvent[],
	facetValuesFilter: FacetValuesFilter,
	facetRegistry: FacetRegistry
	): SdkEvent[] {
	const filteredFacetValueEntries = Object.entries(facetValuesFilter.facetValues)
	if (filteredFacetValueEntries.length === 0) {
	return events
	}
	const isIncludeType = facetValuesFilter.type === 'include'
	return events.filter((event) =>
	filteredFacetValueEntries.some(([facetPath, filteredValues]) => {
	const eventValue = facetRegistry.getFieldValueForEvent(event, facetPath)
	return isIncludeType == filteredValues.includes(eventValue as string)
	})
	)
	}

[cy-moi]

Yes, this is way more clear!

[cy-moi]

Notes: Some commits were not signed before multiple times of merging from main, hence rebase and cherry-pick were necessary.