Disable hover effects by default to improve performance

Author: malte-hansen

src/components/visualization/rendering/popups/popup-coordinator.tsx

@@ -240,7 +240,7 @@ export default function PopupCoordinator({
       onPointerOut={onPointerOut}
       ref={element}
     >
-      {popupData.wasMoved ? (
+      {popupData.wasMoved || popupData.isPinned ? (
         <>
           <OverlayTrigger
             placement="top"

src/hooks/interaction-modifier.ts

@@ -3,6 +3,7 @@ import { MutableRefObject, useEffect, useRef } from 'react';
 import { useCollaborationSessionStore } from 'explorviz-frontend/src/stores/collaboration/collaboration-session';
 import { useLocalUserStore } from 'explorviz-frontend/src/stores/collaboration/local-user';
 import { useMinimapStore } from 'explorviz-frontend/src/stores/minimap-service';
+import { useUserSettingsStore } from 'explorviz-frontend/src/stores/user-settings';
 import RemoteUser from 'explorviz-frontend/src/utils/collaboration/remote-user';
 import Raycaster from 'explorviz-frontend/src/utils/raycaster';
 import * as THREE from 'three';
@@ -70,6 +71,10 @@ export default function useInteractionModifier(
     }))
   );
 
+  const enableHoverEffects = useUserSettingsStore(
+    (state) => state.visualizationSettings.enableHoverEffects.value
+  );
+
   // MARK: Refs
 
   const raycaster = useRef<Raycaster>(new Raycaster(minimapCamera));
@@ -185,15 +190,25 @@ export default function useInteractionModifier(
       } else if (pointers.current.length === 1) {
         handleMouseMovePan(event);
       } else if (makeFullsizeMinimap) {
-        const intersectedViewObj = minimapActions.raycastForObjects(
-          event,
-          minimapCamera,
-          raycastObjects
-        );
-        eventCallbacks?.onMouseMove?.(intersectedViewObj, event);
+        // Skip raycasting for hover when hover effects are disabled
+        if (enableHoverEffects) {
+          const intersectedViewObj = minimapActions.raycastForObjects(
+            event,
+            minimapCamera,
+            raycastObjects
+          );
+          eventCallbacks?.onMouseMove?.(intersectedViewObj, event);
+        } else {
+          eventCallbacks?.onMouseMove?.(null, event);
+        }
       } else {
-        const intersectedViewObj = raycast(event);
-        eventCallbacks?.onMouseMove?.(intersectedViewObj, event);
+        // Skip raycasting for hover when hover effects are disabled
+        if (enableHoverEffects) {
+          const intersectedViewObj = raycast(event);
+          eventCallbacks?.onMouseMove?.(intersectedViewObj, event);
+        } else {
+          eventCallbacks?.onMouseMove?.(null, event);
+        }
       }
     };
 
@@ -207,6 +222,10 @@ export default function useInteractionModifier(
       if (pointers.current.length > 0) {
         return;
       }
+      // Skip raycasting for hover when hover effects are disabled
+      if (!enableHoverEffects) {
+        return;
+      }
       const event = customEvent.detail.srcEvent;
 
       const intersectedViewObj = raycast(event);
@@ -636,7 +655,13 @@ export default function useInteractionModifier(
       document.removeEventListener('keydown', keyDown);
       document.removeEventListener('keyup', keyUp);
     };
-  }, [camera, objectsToRaycast, minimapCamera, makeFullsizeMinimap]);
+  }, [
+    camera,
+    objectsToRaycast,
+    minimapCamera,
+    makeFullsizeMinimap,
+    enableHoverEffects,
+  ]);
 }
 
 // MARK: Types

src/utils/settings/default-settings.ts

@@ -342,7 +342,7 @@ export const defaultVizSettings: VisualizationSettings = {
   },
   enableHoverEffects: {
     level: SettingLevel.DEFAULT,
-    value: true,
+    value: false,
     group: 'Effects',
     displayName: 'Enable Hover Effect',
     description: 'Hover effect (flashing entities) for mouse cursor',

src/view-objects/3d/application/city-districts.tsx

@@ -514,8 +514,10 @@ const CityDistricts = forwardRef<InstancedMesh2, Args>(
         castShadow={castShadows}
         args={[geometry, material]}
         onClick={handleClickWithPrevent}
-        onPointerOver={handleOnPointerOver}
-        onPointerOut={handleOnPointerOut}
+        {...(enableHoverEffects && {
+          onPointerOver: handleOnPointerOver,
+          onPointerOut: handleOnPointerOut,
+        })}
         onDoubleClick={handleDoubleClickWithPrevent}
         {...pointerStopHandlers}
         frustumCulled={false}

src/view-objects/3d/application/city-foundation.tsx

@@ -116,14 +116,12 @@ export default function CityFoundation({
 
   const handleOnPointerOver = (event: any) => {
     event.stopPropagation();
-    if (enableHoverEffects) {
       setHoveredEntityId(application.id);
-    }
   };
 
   const handleOnPointerOut = (event: any) => {
     event.stopPropagation();
-    setHoveredEntityId(null);
+      setHoveredEntityId(null);
   };
 
   const handleClick = (/*event: any*/) => {
@@ -173,8 +171,10 @@ export default function CityFoundation({
       position={foundationPosition} // Center around application's position
       onClick={handleClickWithPrevent}
       onDoubleClick={handleDoubleClickWithPrevent}
-      onPointerOver={handleOnPointerOver}
-      onPointerOut={handleOnPointerOut}
+      {...(enableHoverEffects && {
+        onPointerOver: handleOnPointerOver,
+        onPointerOut: handleOnPointerOut,
+      })}
       {...pointerStopHandlers}
     >
       <meshLambertMaterial color={computeColor()} />

src/view-objects/3d/application/code-buildings.tsx

@@ -479,8 +479,10 @@ const CodeBuildings = forwardRef<InstancedMesh2, Args>(
         ref={meshRef}
         args={[geometry, material]}
         onClick={handleClickWithPrevent}
-        onPointerOver={handleOnPointerOver}
-        onPointerOut={handleOnPointerOut}
+        {...(enableHoverEffects && {
+          onPointerOver: handleOnPointerOver,
+          onPointerOut: handleOnPointerOut,
+        })}
         onDoubleClick={handleDoubleClickWithPrevent}
         {...pointerStopHandlers}
         frustumCulled={false}

src/view-objects/3d/application/communication-r3f.tsx

@@ -674,8 +674,10 @@ export default function CommunicationR3F({
     <clazzCommunicationMesh
       key={`${enableEdgeBundling}-${use3DHAPAlgorithm}`}
       {...pointerStopHandlers}
-      onPointerOver={handleOnPointerOver}
-      onPointerOut={handleOnPointerOut}
+      {...(enableHoverEffects && {
+        onPointerOver: handleOnPointerOver,
+        onPointerOut: handleOnPointerOut,
+      })}
       onClick={handleClickWithPrevent}
       onDoubleClick={handleDoubleClickWithPrevent}
       args={constructorArgs}

src/view-objects/3d/application/html-dom-box.tsx

@@ -3,6 +3,7 @@ import { ThreeEvent } from '@react-three/fiber';
 import { usePointerStop } from 'explorviz-frontend/src/hooks/pointer-stop';
 import useClickPreventionOnDoubleClick from 'explorviz-frontend/src/hooks/useClickPreventionOnDoubleClick';
 import { usePopupHandlerStore } from 'explorviz-frontend/src/stores/popup-handler';
+import { useUserSettingsStore } from 'explorviz-frontend/src/stores/user-settings';
 import { BoxData } from 'explorviz-frontend/src/view-objects/3d/application/html-visualizer';
 import { useRef, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
@@ -35,6 +36,10 @@ export default function HtmlDomBox({
     }))
   );
 
+  const enableHoverEffects = useUserSettingsStore(
+    (state) => state.visualizationSettings.enableHoverEffects.value
+  );
+
   const handlePointerStop = (event: ThreeEvent<PointerEvent>) => {
     addPopup({
       mesh: meshRef.current,
@@ -68,18 +73,20 @@ export default function HtmlDomBox({
       position={[300, 218, 0]}
       intersectChildren={false}
       visible={visible}
-      onPointerOver={(event) => {
-        if (visible) {
-          event.stopPropagation();
-          setHovered(true);
-        }
-      }}
-      onPointerOut={(event) => {
-        if (visible) {
-          event.stopPropagation();
-        }
-        setHovered(false);
-      }}
+      {...(enableHoverEffects && {
+        onPointerOver: (event) => {
+          if (visible) {
+            event.stopPropagation();
+            setHovered(true);
+          }
+        },
+        onPointerOut: (event) => {
+          if (visible) {
+            event.stopPropagation();
+          }
+          setHovered(false);
+        },
+      })}
       onClick={handleClickWithPrevent}
       onDoubleClick={handleDoubleClickWithPrevent}
       ref={meshRef}