change(ui): load session inside custom player

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx

@@ -1,17 +1,31 @@
 import React from 'react'
 import { useStore } from 'App/mstore'
 import { observer } from 'mobx-react-lite'
-import { toJS } from 'mobx'
-// import WebPlayer from "Player/web/WebPlayer";
+import WebPlayer from 'App/components/Session/WebPlayer'
 // inject mob file from chalice
+import { connect } from 'react-redux'
+import { setCustomSession } from 'App/duck/sessions'
 
-function ClickMapCard() {
+function ClickMapCard({ setCustomSession, visitedEvents }) {
   const { metricStore } = useStore()
+  React.useEffect(() => {
+    if (metricStore.instance.data.mobsUrl) {
+      setCustomSession(metricStore.instance.data)
+    }
+  }, [metricStore.instance.data.mobsUrl])
 
-  // console.log(toJS(metricStore.instance))
+  if (!metricStore.instance.data.mobsUrl) return <div>looking for session</div>
+  console.log(visitedEvents, metricStore.instance.data.events)
+  if (!visitedEvents || !visitedEvents.length) {
+    return <div>loading</div>
+  }
   return (
-    <div>this is a card</div>
+    <div>
+        <WebPlayer isClickmap customSession={metricStore.instance.data}/>
+    </div>
   )
 }
 
-export default observer(ClickMapCard)
+export default connect((state: any) => ({ visitedEvents: state.getIn(['sessions', 'visitedEvents']) }), {setCustomSession})(
+  observer(ClickMapCard)
+)

frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx

@@ -5,17 +5,15 @@ import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { Button, Icon } from 'UI';
 import FilterSeries from '../FilterSeries';
-import { confirm, Tooltip, Input } from 'UI';
+import { confirm, Tooltip } from 'UI';
 import Select from 'Shared/Select';
 import { withSiteId, dashboardMetricDetails, metricDetails } from 'App/routes';
 import MetricTypeDropdown from './components/MetricTypeDropdown';
 import MetricSubtypeDropdown from './components/MetricSubtypeDropdown';
 import { TIMESERIES, TABLE, CLICKMAP } from 'App/constants/card';
-import { pageUrlOperators } from 'App/constants/filterOptions';
-import FilterAutoComplete from 'Shared/Filters/FilterAutoComplete';
 import { clickmapFilter } from 'App/types/filter/newFilter';
 import { toJS } from 'mobx';
-import { List } from 'immutable';
+import Period, { LAST_30_DAYS } from 'Types/app/period';
 
 interface Props {
   history: any;
@@ -43,6 +41,7 @@ function WidgetForm(props: Props) {
   const timeseriesOptions = metricOf.filter((i) => i.type === 'timeseries');
   const tableOptions = metricOf.filter((i) => i.type === 'table');
   const isTable = metric.metricType === 'table';
+  const isClickmap = metric.metricType === CLICKMAP
   const isFunnel = metric.metricType === 'funnel';
   const canAddSeries = metric.series.length < 3;
   const eventsLength = metric.series[0].filter.filters.filter((i: any) => i.isEvent).length;
@@ -77,11 +76,16 @@ function WidgetForm(props: Props) {
       }
       if (value === CLICKMAP) {
         obj['viewType'] = 'chart';
+        // @ts-ignore
+        const { start, end } = Period({ rangeName: LAST_30_DAYS })
+        obj["startTimestamp"] = start;
+        obj["endTimestamp"] = end;
+
         if (metric.series[0].filter.filters.length < 1) {
             metric.series[0].filter.addFilter({
                 ...clickmapFilter,
                 value: [''],
-            },)
+            })
         }
       }
     }
@@ -179,8 +183,8 @@ function WidgetForm(props: Props) {
 
       <div className="form-group">
         <div className="flex items-center font-medium py-2">
-          {`${isTable || isFunnel ? 'Filter by' : 'Chart Series'}`}
-          {!isTable && !isFunnel && (
+          {`${isTable || isFunnel || isClickmap ? 'Filter by' : 'Chart Series'}`}
+          {!isTable && !isFunnel && !isClickmap && (
             <Button
               className="ml-2"
               variant="text-primary"
@@ -194,12 +198,12 @@ function WidgetForm(props: Props) {
 
         {metric.series.length > 0 &&
           metric.series
-            .slice(0, isTable || isFunnel ? 1 : metric.series.length)
+            .slice(0, isTable || isFunnel  || isClickmap? 1 : metric.series.length)
             .map((series: any, index: number) => (
               <div className="mb-2" key={series.name}>
                 <FilterSeries
                   observeChanges={() => metric.updateKey('hasChanged', true)}
-                  hideHeader={isTable}
+                  hideHeader={isTable || isClickmap}
                   seriesIndex={index}
                   series={series}
                   onRemoveSeries={() => metric.removeSeries(index)}

frontend/app/duck/sessions.ts

@@ -318,6 +318,12 @@ export const fetch =
             filter: getState().getIn(['filters', 'appliedFilter']),
         });
     };
+export const setCustomSession = (session, filter) =>
+    (dispatch, getState) => { dispatch({
+    type: FETCH.SUCCESS,
+    filter: getState().getIn(['filters', 'appliedFilter']),
+    data: session,
+})}
 
 export function toggleFavorite(sessionId) {
     return {

frontend/app/mstore/types/widget.ts

@@ -32,6 +32,7 @@ export default class Widget {
     limit: number = 5
     params: any = { density: 70 }
 
+
     period: Record<string, any> = Period({ rangeName: LAST_24_HOURS }) // temp value in detail view
     hasChanged: boolean = false
 

frontend/app/types/filter/newFilter.js

@@ -57,7 +57,7 @@ export const clickmapFilter = {
   key: FilterKey.LOCATION,
   type: FilterType.MULTIPLE,
   category: FilterCategory.INTERACTIONS,
-  label: 'Visited URL', placeholder: 'Enter URL or path to select', operator: filterOptions.pageUrlOperators[0].value, operatorOptions: filterOptions.pageUrlOperators, icon: 'filters/location', isEvent: true }
+  label: 'Visited URL', placeholder: 'Enter URL or path', operator: filterOptions.pageUrlOperators[0].value, operatorOptions: filterOptions.pageUrlOperators, icon: 'filters/location', isEvent: true }
 
 const mapFilters = (list) => {
   return list.reduce((acc, filter) => {