✨⚗ [RUMF-1355] add selector with stable attributes #1684
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BenoitZugmeyer
force-pushed
the
benoit/heatmap--stable-attributes-selector
branch
from
8bb7293 to
2714cd9
Compare
BenoitZugmeyer
force-pushed
the
benoit/heatmap--stable-attributes-selector
branch
from
2714cd9 to
a47d95b
Compare
Codecov Report
@@ Coverage Diff @@
## main #1684 +/- ##
==========================================
+ Coverage 90.76% 90.77% +0.01%
==========================================
Files 127 127
Lines 4709 4727 +18
Branches 1052 1054 +2
==========================================
+ Hits 4274 4291 +17
- Misses 435 436 +1
📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more |
bcaudan
approved these changes
Aug 10, 2022
packages/rum-core/src/domain/rumEventsCollection/action/getSelectorsFromElement.ts
Outdated
Show resolved
Hide resolved
packages/rum-core/src/domain/rumEventsCollection/action/getSelectorsFromElement.ts
Outdated
Show resolved
Hide resolved
| ] | ||
|
|
||
| export function getSelectorsFromElement(element: Element, actionNameAttribute: string | undefined) { | ||
| const attributeSelectors = STABLE_ATTRIBUTES.map((attribute) => getAttributeSelector.bind(null, attribute)) |
There was a problem hiding this comment.
🥜 nitpick: we could compute stable attribute selectors once instead of doing it at each call
There was a problem hiding this comment.
❓ question: why is getAttributeSelector called using bind? also doesn't getAttributeSelector need an arg of type element?
There was a problem hiding this comment.
bind does not call the function. bind returns a new function with some arguments defined (cf doc). Basically,
STABLE_ATTRIBUTES.map((attribute) => getAttributeSelector.bind(null, attribute))
is the same as
STABLE_ATTRIBUTES.map((attribute) => (element: Element) => getAttributeSelector(attribute, element))
Would it be clearer?
There was a problem hiding this comment.
Ah so we are using it as a form of currying? Thanks for the clarification
I personally wouldn't use bind unless we care about this; but that is more personal preference.
packages/rum-core/src/domain/rumEventsCollection/action/getSelectorsFromElement.ts
Outdated
Show resolved
Hide resolved
liywjl
approved these changes
Aug 10, 2022
| ] | ||
|
|
||
| export function getSelectorsFromElement(element: Element, actionNameAttribute: string | undefined) { | ||
| const attributeSelectors = STABLE_ATTRIBUTES.map((attribute) => getAttributeSelector.bind(null, attribute)) |
There was a problem hiding this comment.
❓ question: why is getAttributeSelector called using bind? also doesn't getAttributeSelector need an arg of type element?
Comment on lines
+124
to
+136
| function isSelectorUniqueGlobally(element: Element, selector: string): boolean { | ||
| return element.ownerDocument.body.querySelectorAll(selector).length === 1 | ||
| } | ||
|
|
||
| function isSelectorUniqueAmongChildren(element: Element, selector: string): boolean { | ||
| for (let i = 0; i < element.parentElement!.children.length; i++) { | ||
| const sibling = element.parentElement!.children[i] | ||
| if (sibling !== element && elementMatches(sibling, selector)) { | ||
| return false | ||
| } | ||
| } | ||
| return true | ||
| } |
Comment on lines
+170
to
+198
| function computeClickActionBase(event: MouseEvent & { target: Element }, actionNameAttribute?: string) { | ||
| let target: ClickAction['target'] | ||
| let position: ClickAction['position'] | ||
|
|
||
| if (isExperimentalFeatureEnabled('clickmap')) { | ||
| const rect = event.target.getBoundingClientRect() | ||
| target = assign( | ||
| { | ||
| width: Math.round(rect.width), | ||
| height: Math.round(rect.height), | ||
| }, | ||
| getSelectorsFromElement(event.target, actionNameAttribute) | ||
| ) | ||
| position = { | ||
| // Use clientX and Y because for SVG element offsetX and Y are relatives to the <svg> element | ||
| x: Math.round(event.clientX - rect.left), | ||
| y: Math.round(event.clientY - rect.top), | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| type: 'click', | ||
| target, | ||
| position, | ||
| name: getActionNameFromElement(event.target, actionNameAttribute), | ||
| event, | ||
| startClocks: clocksNow(), | ||
| } | ||
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Use common "stable" attributes to improve CSS selector generation for heatmaps.
Changes
actionNameAttributeoption to the function used to compute selectorsTesting
I have gone over the contributing documentation.