Continuous Measure: Resolve element at screen point

[bastianilso]

Since certain elements might not respond well to onmousehover and mouse enter and mouse leave attributes, we may want a second way to determine elements' position.

In the continuous measurement what we can do, is we can use API to resolve which element is available on the mouse coordinate using the document.elementsFromPoint function. This might allow us to e.g. resolve

More info: https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint

[bilal-62210]

@bastianilso Do you think i have to do the API in R language or in JS ?

[bastianilso]

Use the function in javascript to create a column in ContinuousMeasurement.csv which logs what IDs are available from the current screenX and screenY position.

The other way is to do it in the Event.csv - whenever you have MouseIn or MouseOut, you resolve the screenX and screenY position to log which IDs are available at that point.

Maybe it could make sense to do both.

[bastianilso]

@bilal-62210 let me know how it went for you, regarding making the elementFromPoint. feel free to share a CSV file here or an animation of your results and I can provide feedback.

[bilal-62210]

@bastianilso For the moment, i have note included this in the csv. I just display the result in a textarea to see if that's what we want. the problem i identified is that i don't know what the elements represent. Indeed, for example, I don't know what htmldiv corresponds to, given that I haven't called any div like this.

[bastianilso]

@bilal-62210 you will need to modify the code so that it appends the element.id rather than the localName.

[bilal-62210]

@bastianilso This is the csv file that i get when i use elemeny.id rather than the localName: log2022-10-26 13-12-30.396Event.csv I think that's what we want. Give me your feedback. If that's xhat we want i will do the same for the continuousMeasurement.csv file

[bastianilso]

Nice, yes that's it. Now we can see the Plotly plots from elementsFromPoint. We can try to use this in continuous measurement too now.

What does the column Element do?

Maybe we can make a column named "LastElementWithIdentity" which show the most inner element's ID. If the most inner element doesn't have an ID, then it uses the next-most inner element. and so on. Judging from your CSV file, most likely this column would then show IDs of all plots when they are hovered.

[bilal-62210]

@bastianilso Ok i will do it for the continuous measurement. the element column contains the elements on which the events take place. For example if there is a mouseout on the btn_download, the element to collect will be "btn_download". So for me this column is important but if you wish I can create the column "LastElementWithIdentity" in addition.

[bastianilso]

var innerElement = "" if (innerElement == "" && elf.id != NULL || elf.id != undefined) { innerElement = elf.id }

if (elf == NULL || elf == undefined) { innerElement = "" } else if (innerElement == "") { innerElement = elf }

[bilal-62210]

@bastianilso It's ok for this issue!

This is the event.csv and the ContinuousMeasurement.csv: log2022-10-28 10-29-38.795ContinuousMeasurement.csv log2022-10-28 10-29-38.795Event.csv Take a look, and give me your feedback

[bastianilso]

nice @bilal-62210! I just have 3 more requests for this issue:

• Rename elementsFromPoint column to elementsFromPointID in the csv files.
• Make a new column called elementsFromPointName which instead of logging element.id, logs the element.localName. This way we have both information available to us.
• Make a new column called LastElementWithName which logs the last element with a defined localName (similar to LastElementWithID but just localName instead of ID).

[bilal-62210]

@bastianilso Take a look at this please : log2022-10-28 13-1-2.749ContinuousMeasurement.csv log2022-10-28 13-1-2.749Event.csv Is it ok?