feat: add shift-to-interact hint and refresh clickmap on shift release (#42304)

Author: luke-belton

frontend/src/lib/components/heatmaps/useShiftKeyPressed.ts

@@ -1,9 +1,11 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
 import { useOnMountEffect } from 'lib/hooks/useOnMountEffect'
 
-export function useShiftKeyPressed(): boolean {
+export function useShiftKeyPressed(onShiftReleased?: () => void): boolean {
     const [isShiftPressed, setIsShiftPressed] = useState(false)
+    const onShiftReleasedRef = useRef(onShiftReleased)
+    onShiftReleasedRef.current = onShiftReleased
 
     useOnMountEffect(() => {
         const handleKeyDown = (event: KeyboardEvent): void => {
@@ -15,6 +17,7 @@ export function useShiftKeyPressed(): boolean {
         const handleKeyUp = (event: KeyboardEvent): void => {
             if (event.key === 'Shift') {
                 setIsShiftPressed(false)
+                onShiftReleasedRef.current?.()
             }
         }
 

frontend/src/toolbar/elements/Elements.tsx

@@ -30,8 +30,9 @@ export function Elements(): JSX.Element {
     } = useValues(elementsLogic)
     const { setHoverElement, selectElement } = useActions(elementsLogic)
     const { highestClickCount } = useValues(heatmapToolbarMenuLogic)
+    const { refreshClickmap } = useActions(heatmapToolbarMenuLogic)
 
-    const shiftPressed = useShiftKeyPressed()
+    const shiftPressed = useShiftKeyPressed(refreshClickmap)
     const heatmapPointerEvents = shiftPressed ? 'none' : 'all'
 
     const { theme } = useValues(toolbarLogic)

frontend/src/toolbar/elements/heatmapToolbarMenuLogic.ts

@@ -131,6 +131,7 @@ export const heatmapToolbarMenuLogic = kea<heatmapToolbarMenuLogicType>([
         startElementObservation: true,
         stopElementObservation: true,
         processElements: true,
+        refreshClickmap: true,
         setProcessedElements: (elements: CountedHTMLElement[]) => ({ elements }),
         setElementsLoading: (loading: boolean) => ({ loading }),
         setProcessingProgress: (processed: number, total: number) => ({ processed, total }),
@@ -521,6 +522,14 @@ export const heatmapToolbarMenuLogic = kea<heatmapToolbarMenuLogicType>([
             actions.processElements()
         },
 
+        refreshClickmap: () => {
+            if (!values.clickmapsEnabled) {
+                return
+            }
+            invalidatePageElementsCache(cache as ElementProcessingCache)
+            actions.processElements()
+        },
+
         patchHeatmapFilters: ({ filters }) => {
             if (filters.type) {
                 actions.resetHeatmapData()

frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx

@@ -191,6 +191,10 @@ export const HeatmapToolbarMenu = (): JSX.Element => {
                                 the event can be mapped to a specific element found on the page you are viewing but less
                                 data is usually captured.
                             </p>
+                            <p className="text-xs italic">
+                                Tip: Hold <kbd className="border rounded px-1 py-0.5 bg-surface-tertiary">shift</kbd> to
+                                interact with the page beneath the clickmap.
+                            </p>
                             <div className="flex items-center justify-between pb-2">
                                 <div className="flex items-center gap-1">
                                     <LemonLabel