fix(ui): fix priority for smaller click marks, add icon for clarity

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

@@ -46,9 +46,12 @@ function ClickMapCard({
             <NoContent
                 style={{ minHeight: 220 }}
                 title={
-                    <div className="flex items-center">
+                    <div className="flex items-center relative">
                         <Icon name="info-circle" className="mr-2" size="18" />
                         No data for selected period or URL.
+                        <div style={{ position: 'absolute', right: -240, top: -110 }}>
+                            <Icon name="pointer-sessions-search" size={250} width={240} />
+                        </div>
                     </div>
                 }
                 show={true}

frontend/app/player/web/WebPlayer.ts

@@ -114,7 +114,6 @@ export default class WebPlayer extends Player {
 
   showClickmap = (...args: Parameters<TargetMarker['injectTargets']>) => {
     this.screen.overlay.remove() // hack. TODO: 1.split Screen functionalities (overlay, mounter) 2. separate ClickMapPlayer class that does not create overlay
-    this.targetMarker.injectTargets(...args)
     this.freeze().then(() => {
       this.targetMarker.injectTargets(...args)
     })

frontend/app/player/web/addons/TargetMarker.ts

@@ -3,6 +3,16 @@ import type { Point } from '../Screen/types'
 import type { Store } from '../../common/types'
 import { clickmapStyles } from './clickmapStyles'
 
+const zIndexMap = {
+  400: 3,
+  200: 4,
+  100: 5,
+  50: 6
+}
+const widths = Object.keys(zIndexMap)
+  .map(s => parseInt(s, 10))
+  .sort((a,b) => b - a) as [400, 200, 100, 50]
+
 function getOffset(el: Element, innerWindow: Window) {
 	const rect = el.getBoundingClientRect();
 	return {
@@ -151,6 +161,7 @@ export default class TargetMarker {
       const scaleRatio = this.screen.getScale()
       Object.assign(overlay.style, clickmapStyles.overlayStyle({ height: iframeSize.height, width: iframeSize.width, scale: scaleRatio }))
 
+      console.log(selections)
       this.clickMapOverlay = overlay
       selections.forEach((s, i) => {
         const el = this.screen.getElementBySelector(s.selector);
@@ -171,10 +182,28 @@ export default class TargetMarker {
         const containerId = `clickmap-bubble-${i}`
         bubbleContainer.id = containerId
         this.clickContainers.push(bubbleContainer)
-        Object.assign(bubbleContainer.style, clickmapStyles.bubbleContainer({ top, left, height }))
+        const frameWidth = iframeSize.width.replace('px', '')
+
+        // @ts-ignore
+        Object.assign(bubbleContainer.style, clickmapStyles.bubbleContainer({ top, left: Math.max(100, frameWidth - left > 250 ? left : frameWidth - 220), height }))
 
         const border = document.createElement("div")
-        Object.assign(border.style, clickmapStyles.highlight({ width, height, top, left }))
+
+
+        let key = 0
+
+        if (width > 50) {
+          let diff = widths[key] - width
+          while (diff > 0) {
+            key++
+            diff = widths[key] - width
+          }
+        } else {
+          key = 3
+        }
+        const borderZindex = zIndexMap[widths[key]]
+
+        Object.assign(border.style, clickmapStyles.highlight({ width, height, top, left, zIndex: borderZindex }))
 
         const smallClicksBubble = document.createElement("div")
         smallClicksBubble.innerHTML = `${s.count}`

frontend/app/player/web/addons/clickmapStyles.ts

@@ -17,6 +17,7 @@ export const clickmapStyles = {
   bubbleContainer: ({ top, left, height }: { top: number; left: number, height: number }) => ({
     position: 'absolute',
     top: top > 20 ? top + 'px' : height + 2 + 'px',
+    width: '250px',
     left: `${left}px`,
     padding: '10px',
     borderRadius: '6px',
@@ -26,18 +27,20 @@ export const clickmapStyles = {
     transform:  top > 20 ? 'translate(-25%, -110%)' : 'translate(-25%, 0%)',
     textAlign: 'center',
     visibility: 'hidden',
-    zIndex: 2,
+    zIndex: 10,
   }),
   highlight: ({
     width,
     height,
     top,
     left,
+    zIndex,
   }: {
     width: number;
     height: number;
     top: number;
     left: number;
+    zIndex: number;
   }) => ({
     width: `${width}px`,
     height: `${height}px`,
@@ -46,6 +49,7 @@ export const clickmapStyles = {
     top: `${top}px`,
     left: `${left}px`,
     position: 'absolute',
+    zIndex,
   }),
   clicks: ({ top, height, isRage }: { top: number; height: number, isRage?: boolean }) => ({
     top: top > 20 ? 0 : `${height}px`,