jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(player): fix clickmap url filtering, fix clickmap highliter

Browse source
This commit is contained in:
nick-delirium 2023-03-08 15:30:22 +01:00 • committed by Shekar Siri
parent d047570eb9
commit 022928d082
3 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
View file

@ -20,6 +20,7 @@ function ClickMapCard({
const onMarkerClick = (s: string, innerText: string) => {
metricStore.changeClickMapSearch(s, innerText)
}
const mapUrl = metricStore.instance.series[0].filter.filters[0].value[0]
React.useEffect(() => {
return () => clearCurrentSession()
@ -32,12 +33,10 @@ function ClickMapCard({
React.useEffect(() => {
if (visitedEvents.length) {
const urlOptions = visitedEvents.map(({ url, host }: any) => ({ label: url, value: url, host }))
const url = insightsFilters.url ? insightsFilters.url : host + urlOptions[0].value;
const rangeValue = dashboardStore.drillDownPeriod.rangeValue
const startDate = dashboardStore.drillDownPeriod.start
const endDate = dashboardStore.drillDownPeriod.end
fetchInsights({ ...insightsFilters, url, startDate, endDate, rangeValue, clickRage: metricStore.clickMapFilter })
fetchInsights({ ...insightsFilters, url: mapUrl || '/', startDate, endDate, rangeValue, clickRage: metricStore.clickMapFilter })
}
}, [visitedEvents, metricStore.clickMapFilter])
@ -62,9 +61,8 @@ function ClickMapCard({
return <div className="py-2">Loading session</div>
}
const searchUrl = metricStore.instance.series[0].filter.filters[0].value[0]
const jumpToEvent = metricStore.instance.data.events.find((evt: Record<string, any>) => {
if (searchUrl) return evt.path.includes(searchUrl)
if (mapUrl) return evt.path.includes(mapUrl)
return evt
}) || { timestamp: metricStore.instance.data.startTs }

2
frontend/app/player/web/addons/TargetMarker.ts
View file

@ -240,7 +240,7 @@ export default class TargetMarker {
})
}
Object.assign(smallClicksBubble.style, clickmapStyles.clicks({ top, height, isRage: s.clickRage }))
Object.assign(smallClicksBubble.style, clickmapStyles.clicks({ top, height, isRage: s.clickRage, left }))
border.appendChild(smallClicksBubble)
overlay.appendChild(bubbleContainer)

6
frontend/app/player/web/addons/clickmapStyles.ts
View file

@ -16,7 +16,7 @@ export const clickmapStyles = {
},
bubbleContainer: ({ top, left, height }: { top: number; left: number, height: number }) => ({
position: 'absolute',
top: top > 20 ? top + 'px' : height + 2 + 'px',
top: top > 75 ? top + 'px' : height+75 + 'px',
width: '250px',
left: `${left}px`,
padding: '10px',
@ -51,9 +51,9 @@ export const clickmapStyles = {
position: 'absolute',
zIndex,
}),
clicks: ({ top, height, isRage }: { top: number; height: number, isRage?: boolean }) => ({
clicks: ({ top, height, isRage, left }: { top: number; height: number, isRage?: boolean, left: number }) => ({
top: top > 20 ? 0 : `${height}px`,
left: 0,
left: left < 5 ? '100%' : 0,
position: 'absolute',
borderRadius: '999px',
padding: '6px',