From e2593fe93b9e5ffacb83820b34fe704bffffbe41 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 27 Jun 2024 18:02:41 +0200
Subject: [PATCH] feat ui: map of clicks for session

---
 .../Session_/PageInsightsPanel/PageInsightsPanel.tsx   | 10 +++++-----
 frontend/app/duck/sessions.ts                          | 10 ++++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
index 704d23bbb..5177aa2fc 100644
--- a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
+++ b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Loader, Icon } from 'UI';
 import { connect } from 'react-redux';
-import { fetchInsights } from 'Duck/sessions';
+import { fetchSessionClickmap } from 'Duck/sessions';
 import SelectorsList from './components/SelectorsList/SelectorsList';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { compareJsonObjects } from 'App/utils';
@@ -13,7 +13,7 @@ import Period from 'Types/app/period';
 const JUMP_OFFSET = 1000;
 interface Props {
     filters: any;
-    fetchInsights: (filters: Record<string, any>) => void;
+    fetchSessionClickmap: (sessionId: string, filters: Record<string, any>) => void;
     insights: any;
     events: Array<any>;
     urlOptions: Array<any>;
@@ -23,7 +23,7 @@ interface Props {
     sessionId: string;
 }
 
-function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlOptions, host, loading = true, setActiveTab, sessionId }: Props) {
+function PageInsightsPanel({ filters, fetchSessionClickmap, events = [], insights, urlOptions, host, loading = true, setActiveTab, sessionId }: Props) {
     const { player: Player } = React.useContext(PlayerContext)
     const markTargets = (t: any) => Player.markTargets(t)
     const defaultValue = urlOptions && urlOptions[0] ? urlOptions[0].value : '';
@@ -55,7 +55,7 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
         if (urlOptions && urlOptions[0]) {
             const url = insightsFilters.url ? insightsFilters.url : host + urlOptions[0].value;
             Player.pause();
-            fetchInsights({ ...insightsFilters, sessionId, url });
+            fetchSessionClickmap(sessionId, { ...insightsFilters, sessionId, url });
             markTargets([]);
         }
         prevInsights.current = insightsFilters;
@@ -118,5 +118,5 @@ export default connect(
             sessionId: state.getIn(['sessions', 'current']).sessionId,
         };
     },
-    { fetchInsights }
+    { fetchSessionClickmap }
 )(PageInsightsPanel);
diff --git a/frontend/app/duck/sessions.ts b/frontend/app/duck/sessions.ts
index 3c698d1c3..960c072aa 100644
--- a/frontend/app/duck/sessions.ts
+++ b/frontend/app/duck/sessions.ts
@@ -34,6 +34,7 @@ const FETCH_LIVE_LIST = new RequestTypes('sessions/FETCH_LIVE_LIST');
 const TOGGLE_FAVORITE = new RequestTypes('sessions/TOGGLE_FAVORITE');
 const FETCH_ERROR_STACK = new RequestTypes('sessions/FETCH_ERROR_STACK');
 const FETCH_INSIGHTS = new RequestTypes('sessions/FETCH_INSIGHTS');
+const FETCH_SESSION_CLICKMAP = new RequestTypes('sessions/FETCH_SESSION_CLICKMAP');
 const SORT = 'sessions/SORT';
 const REDEFINE_TARGET = 'sessions/REDEFINE_TARGET';
 const SET_TIMEZONE = 'sessions/SET_TIMEZONE';
@@ -374,6 +375,7 @@ const reducer = (state = initialState, action: IAction) => {
       return state.set('timezone', action.timezone);
     case TOGGLE_CHAT_WINDOW:
       return state.set('showChatWindow', action.state);
+    case FETCH_SESSION_CLICKMAP.SUCCESS:
     case FETCH_INSIGHTS.SUCCESS:
       return state.set(
         'insights',
@@ -587,6 +589,14 @@ export function fetchInsights(params) {
   };
 }
 
+export function fetchSessionClickmap(sessionId, params) {
+  return {
+    types: FETCH_SESSION_CLICKMAP.toArray(),
+    call: (client) => client.post(`/sessions/${sessionId}/clickmaps`, params),
+  };
+
+}
+
 export function fetchLiveList(params = {}) {
   return {
     types: FETCH_LIVE_LIST.toArray(),