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

ui: support url in payload for heatmaps

Browse source
This commit is contained in:
nick-delirium 2024-10-24 15:24:13 +02:00
parent d7f4406fd5
commit 7f1686acdf
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 88 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,75 +1,96 @@
import React from 'react'
import { useStore } from 'App/mstore'
import { observer } from 'mobx-react-lite'
import ClickMapRenderer from 'App/components/Session/Player/ClickMapRenderer'
import { NoContent, Icon } from 'App/components/ui'
import React from 'react';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import ClickMapRenderer from 'App/components/Session/Player/ClickMapRenderer';
import { NoContent, Icon } from 'App/components/ui';
function ClickMapCard() {
const [customSession, setCustomSession] = React.useState<any>(null)
const { metricStore, dashboardStore, sessionStore } = useStore();
const fetchInsights = sessionStore.fetchInsights
const insights = sessionStore.insights
const onMarkerClick = (s: string, innerText: string) => {
metricStore.changeClickMapSearch(s, innerText)
const [customSession, setCustomSession] = React.useState<any>(null);
const { metricStore, dashboardStore, sessionStore } = useStore();
const fetchInsights = sessionStore.fetchInsights;
const insights = sessionStore.insights;
const onMarkerClick = (s: string, innerText: string) => {
metricStore.changeClickMapSearch(s, innerText);
};
const sessionId = metricStore.instance.data.sessionId;
const url = metricStore.instance.data.url;
React.useEffect(() => {
return () => setCustomSession(null);
}, []);
React.useEffect(() => {
if (
metricStore.instance.data.domURL &&
sessionId &&
sessionId !== customSession?.sessionId
) {
setCustomSession(null);
setTimeout(() => {
setCustomSession(metricStore.instance.data);
}, 100);
}
const mapUrl = metricStore.instance.series[0].filter.filters[0].value[0]
const sessionId = metricStore.instance.data.sessionId
}, [metricStore.instance, sessionId]);
React.useEffect(() => {
return () => setCustomSession(null)
}, [])
React.useEffect(() => {
if (!url || !sessionId) return;
const rangeValue = dashboardStore.drillDownPeriod.rangeValue;
const startDate = dashboardStore.drillDownPeriod.start;
const endDate = dashboardStore.drillDownPeriod.end;
void fetchInsights({
url: url || '/',
startDate,
endDate,
rangeValue,
clickRage: metricStore.clickMapFilter,
});
}, [
sessionId,
url,
dashboardStore.drillDownPeriod.start,
dashboardStore.drillDownPeriod.end,
dashboardStore.drillDownPeriod.rangeValue,
metricStore.clickMapFilter,
]);
React.useEffect(() => {
if (metricStore.instance.data.domURL && sessionId && sessionId !== customSession?.sessionId) {
setCustomSession(null)
setTimeout(() => {
setCustomSession(metricStore.instance.data)
}, 100)
}
}, [metricStore.instance, sessionId])
React.useEffect(() => {
const rangeValue = dashboardStore.drillDownPeriod.rangeValue
const startDate = dashboardStore.drillDownPeriod.start
const endDate = dashboardStore.drillDownPeriod.end
void fetchInsights({ url: mapUrl || '/', startDate, endDate, rangeValue, clickRage: metricStore.clickMapFilter })
}, [dashboardStore.drillDownPeriod.start, dashboardStore.drillDownPeriod.end, dashboardStore.drillDownPeriod.rangeValue, metricStore.clickMapFilter])
if (!metricStore.instance.data.domURL || insights.size === 0) {
return (
<NoContent
style={{ minHeight: 220 }}
title={
<div className="flex items-center relative">
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}
show={true}
/>
)
}
if (!metricStore.instance.data?.sessionId || !customSession) {
return <div className="py-2">Loading session</div>
}
const jumpToEvent = metricStore.instance.data.events.find((evt: Record<string, any>) => {
if (mapUrl) return evt.path.includes(mapUrl)
return evt
}) || { timestamp: metricStore.instance.data.startTs }
const ts = jumpToEvent.timestamp ?? metricStore.instance.data.startTs
const domTime = jumpToEvent.domBuildingTime ?? 0
const jumpTimestamp = (ts - metricStore.instance.data.startTs) + domTime + 99 // 99ms safety margin to give some time for the DOM to load
if (!metricStore.instance.data.domURL || insights.length === 0) {
return (
<div id="clickmap-render">
<ClickMapRenderer
session={customSession}
jumpTimestamp={jumpTimestamp}
onMarkerClick={onMarkerClick}
/>
</div>
)
<NoContent
style={{ minHeight: 220 }}
title={
<div className="flex items-center relative">
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}
show={true}
/>
);
}
if (!metricStore.instance.data?.sessionId || !customSession) {
return <div className="py-2">Loading session</div>;
}
const jumpToEvent = metricStore.instance.data.events.find(
(evt: Record<string, any>) => {
if (url) return evt.path.includes(url);
return evt;
}
) || { timestamp: metricStore.instance.data.startTs };
const ts = jumpToEvent.timestamp ?? metricStore.instance.data.startTs;
const domTime = jumpToEvent.domBuildingTime ?? 0;
const jumpTimestamp = ts - metricStore.instance.data.startTs + domTime + 99; // 99ms safety margin to give some time for the DOM to load
return (
<div id="clickmap-render">
<ClickMapRenderer
session={customSession}
jumpTimestamp={jumpTimestamp}
onMarkerClick={onMarkerClick}
/>
</div>
);
}
export default observer(ClickMapCard)
export default observer(ClickMapCard);