From ec2aabf8779fa0efe6f19ad46c676ac090fab3c1 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 23 Dec 2022 11:22:18 +0100
Subject: [PATCH] change(ui): some more changes to chec clickmap, clickrage
 subtype

---
 .../ClickMapCard/ClickMapCard.tsx             | 45 ++++++++++++++++---
 .../components/WidgetChart/WidgetChart.tsx    |  2 +-
 .../components/WidgetForm/WidgetForm.tsx      | 21 ++++++++-
 frontend/app/components/Session/WebPlayer.tsx | 18 +-------
 .../shared/Filters/FilterList/FilterList.tsx  |  2 +-
 frontend/app/player/web/Screen/Screen.ts      | 20 +++++----
 frontend/app/types/filter/filterType.ts       |  2 +-
 7 files changed, 75 insertions(+), 35 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
index 8c187e10c..1e3f4b078 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@@ -4,9 +4,18 @@ import { observer } from 'mobx-react-lite'
 import WebPlayer from 'App/components/Session/WebPlayer'
 import { connect } from 'react-redux'
 import { setCustomSession } from 'App/duck/sessions'
+import Period, { LAST_30_DAYS } from "Types/app/period";
+import { fetchInsights } from 'Duck/sessions';
 
-function ClickMapCard({ setCustomSession, visitedEvents }: any) {
-    const { metricStore } = useStore();
+function ClickMapCard({
+    setCustomSession,
+    visitedEvents,
+    insights,
+    fetchInsights,
+    insightsFilters,
+    host,
+}: any) {
+    const { metricStore, dashboardStore } = useStore();
     const onMarkerClick = (s: string, innerText: string) => {
         metricStore.changeClickMapSearch(s, innerText)
     }
@@ -15,9 +24,26 @@ function ClickMapCard({ setCustomSession, visitedEvents }: any) {
         if (metricStore.instance.data.mobsUrl) {
             setCustomSession(metricStore.instance.data)
         }
-    }, [metricStore.instance.data.mobsUrl])
+    }, [metricStore.instance])
 
-    if (!metricStore.instance.data?.mobsUrl) return <div className="py-2">No Data for selected period or URL.</div>
+    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;
+            // @ts-ignore
+            // const { startDate, endDate, rangeValue } = Period({ rangeName: LAST_30_DAYS }).toJSON()
+            const rangeValue = dashboardStore.drillDownPeriod.rangeValue
+            const startDate = dashboardStore.drillDownPeriod.start
+            const endDate = dashboardStore.drillDownPeriod.end
+            fetchInsights({ ...insightsFilters, url, startDate, endDate, rangeValue })
+        }
+    }, [visitedEvents])
+
+    if (!metricStore.instance.data.mobsUrl || insights.size === 0) {
+        return (
+            <div className="py-2">No Data for selected period or URL.</div>
+        )
+    }
     if (!visitedEvents || !visitedEvents.length) {
         return <div className="py-2">Loading session</div>
     }
@@ -28,6 +54,7 @@ function ClickMapCard({ setCustomSession, visitedEvents }: any) {
         return evt
     })
     const jumpTimestamp = (jumpToEvent.timestamp - metricStore.instance.data.startTs) + jumpToEvent.domBuildingTime
+
     return (
         <div id="clickmap-render">
             <WebPlayer
@@ -41,6 +68,12 @@ function ClickMapCard({ setCustomSession, visitedEvents }: any) {
 }
 
 export default connect(
-    (state: any) => ({ visitedEvents: state.getIn(['sessions', 'visitedEvents']) }),
-    { setCustomSession })
+    (state: any) => ({
+        insightsFilters: state.getIn(['sessions', 'insightFilters']),
+        visitedEvents: state.getIn(['sessions', 'visitedEvents']),
+        insights: state.getIn(['sessions', 'insights']),
+        host: state.getIn(['sessions', 'host']),
+    }),
+    { setCustomSession, fetchInsights }
+)
 (observer(ClickMapCard))
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 01faed546..ab6a34042 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -90,7 +90,7 @@ function WidgetChart(props: Props) {
         const timestmaps = drillDownPeriod.toTimestamps();
         const payload = isWidget ? { ...params } : { ...metricParams, ...timestmaps, ...metric.toJson() };
         debounceRequest(metric, payload, isWidget, !isWidget ? drillDownPeriod : period);
-    }, [drillDownPeriod, period, depsString, _metric.page, metric.metricType, metric.metricOf, metric.viewType]);
+    }, [drillDownPeriod, period, depsString, _metric.page, metric.metricType, metric.metricOf, metric.viewType, metric.metricValue]);
 
 
     const renderChart = () => {
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index 4460f69a2..11aacfc73 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -41,6 +41,7 @@ function WidgetForm(props: Props) {
   const cannotSaveFunnel = isFunnel && (!metric.series[0] || eventsLength <= 1);
 
   const writeOption = ({ value, name }: any) => {
+    console.log(name, value)
     value = Array.isArray(value) ? value : value.value;
     const obj: any = { [name]: value };
 
@@ -67,9 +68,12 @@ function WidgetForm(props: Props) {
         obj['metricOf'] = tableOptions[0].value;
         obj['viewType'] = 'table';
       }
+      if (metric.metricType === CLICKMAP && value !== CLICKMAP) {
+        metric.series[0].filter.removeFilter(0)
+      }
       if (value === CLICKMAP) {
         obj['viewType'] = 'chart';
-
+        obj['metricValue'] = 'clicks'
         if (metric.series[0].filter.filters.length < 1) {
             metric.series[0].filter.addFilter({
                 ...clickmapFilter,
@@ -90,7 +94,7 @@ function WidgetForm(props: Props) {
         console.error(e)
       }
     }
-    metricStore.save(metric, dashboardId).then((metric: any) => {
+    metricStore.save(metric).then((metric: any) => {
       if (wasCreating) {
         if (parseInt(dashboardId) > 0) {
           history.replace(withSiteId(dashboardMetricDetails(dashboardId, metric.metricId), siteId));
@@ -173,6 +177,19 @@ function WidgetForm(props: Props) {
                 />
               </>
             )}
+
+          {metric.metricType === CLICKMAP && (
+              <>
+                <span className="mx-3">showing</span>
+                <Select
+                    name="metricValue"
+                    options={[{ value: 'clicks', label: 'Clicks' }, { value: 'rage_clicks', label: 'Click Rages' }]}
+                    defaultValue={metric.metricValue}
+                    onChange={writeOption}
+                />
+              </>
+          )}
+
         </div>
       </div>
 
diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index b380803d3..5a61b747b 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -12,8 +12,6 @@ import ReadNote from '../Session_/Player/Controls/components/ReadNote';
 import { fetchList as fetchMembers } from 'Duck/member';
 import PlayerContent from './PlayerContent';
 import { IPlayerContext, PlayerContext, defaultContextValue } from './playerContext';
-import { fetchInsights } from 'Duck/sessions';
-import Period, { LAST_30_DAYS } from 'Types/app/period';
 import { observer } from 'mobx-react-lite';
 
 const TABS = {
@@ -31,10 +29,6 @@ function WebPlayer(props: any) {
     fetchList,
     customSession,
     isClickmap,
-    fetchInsights,
-    host,
-    visitedEvents,
-    insightsFilters,
     insights,
     jumpTimestamp,
     onMarkerClick,
@@ -46,13 +40,7 @@ function WebPlayer(props: any) {
   const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
 
   useEffect(() => {
-    if (isClickmap) {
-      const urlOptions = visitedEvents.map(({ url, host }: any) => ({ label: url, value: url, host }))
-      const url = insightsFilters.url ? insightsFilters.url : host + urlOptions[0].value;
-      // @ts-ignore
-      const { startDate, endDate, rangeValue } = new Period({ rangeName: LAST_30_DAYS })
-      fetchInsights({ ...insightsFilters, url, startDate, endDate, rangeValue })
-    } else {
+    if (!isClickmap) {
       fetchList('issues');
     }
     const usedSession = isClickmap && customSession ? customSession : session;
@@ -94,6 +82,7 @@ function WebPlayer(props: any) {
         contextValue.player.jump(jumpTimestamp)
         contextValue.player.pause()
         contextValue.player.scaleFullPage()
+        console.log(jumpTimestamp, insights)
         setTimeout(() => { contextValue.player.showClickmap(insights) }, 250)
       }, 500)
     }
@@ -160,8 +149,6 @@ function WebPlayer(props: any) {
 export default connect(
   (state: any) => ({
     session: state.getIn(['sessions', 'current']),
-    insightsFilters: state.getIn(['sessions', 'insightFilters']),
-    host: state.getIn(['sessions', 'host']),
     insights: state.getIn(['sessions', 'insights']),
     visitedEvents: state.getIn(['sessions', 'visitedEvents']),
     fullscreen: state.getIn(['components', 'player', 'fullscreen']),
@@ -173,6 +160,5 @@ export default connect(
     closeBottomBlock,
     fetchList,
     fetchMembers,
-    fetchInsights,
   }
 )(withLocationHandlers()(observer(WebPlayer)));
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index ab53a4214..b541e320f 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import FilterItem from '../FilterItem';
 import { SegmentSelection, Tooltip } from 'UI';
 import { List } from 'immutable';
diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts
index ed1cb540a..0eb1d7245 100644
--- a/frontend/app/player/web/Screen/Screen.ts
+++ b/frontend/app/player/web/Screen/Screen.ts
@@ -221,7 +221,7 @@ export default class Screen {
 
   scaleFullPage() {
     if (!this.parentElement) return;
-    const { height: boxHeight, width: boxWidth } = this.parentElement.getBoundingClientRect();
+    const { width: boxWidth } = this.parentElement.getBoundingClientRect();
     const { height, width } = this.document.body.getBoundingClientRect();
     this.overlay.remove()
 
@@ -232,13 +232,17 @@ export default class Screen {
       this.scaleRatio = Math.round(this.scaleRatio * 1e3) / 1e3;
     }
 
-    this.screen.style.transform =  `scale(${this.scaleRatio})`;
-    this.screen.style.width = width + 'px';
-    this.screen.style.height =  height + 'px';
-    this.screen.style.top = '0';
-    this.screen.style.left = '0';
-    this.iframe.style.width = width + 'px';
-    this.iframe.style.height = height + 'px';
+    Object.assign(this.screen.style, {
+      top: '0',
+      left: '0',
+      height: height + 'px',
+      width: width + 'px',
+      transform: `scale(${this.scaleRatio})`,
+    })
+    Object.assign(this.iframe.style, {
+      width: width + 'px',
+      height: height + 'px',
+    })
   }
 
 }
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
index 333ecc23e..b696a0d22 100644
--- a/frontend/app/types/filter/filterType.ts
+++ b/frontend/app/types/filter/filterType.ts
@@ -275,5 +275,5 @@ export enum FilterKey {
   RESOURCE_FETCH_TIME = 'resourceFetchTime',
   SLOWEST_RESOURCES = 'slowestResources',
 
-  CLICKMAP_URL = 'clickMapUrl'
+  CLICKMAP_URL = 'clickMapUrl',
 }