Hide labels based off distance from camera

src/CameraControls/useCenterGraph.ts

@@ -41,6 +41,8 @@ export const useCenterGraph = ({
   disabled
 }: CenterGraphInput): CenterGraphOutput => {
   const nodes = useStore(state => state.nodes);
+  const isCentered = useStore(state => state.isCentered);
+  const setIsCentered = useStore(state => state.setIsCentered);
   const invalidate = useThree(state => state.invalidate);
   const { controls } = useCameraControls();
   const camera = useThree(state => state.camera) as PerspectiveCamera;
@@ -72,6 +74,10 @@ export const useCenterGraph = ({
         );
         await controls.setTarget(x, y, z, animated);
 
+        if (!isCentered) {
+          setIsCentered(true);
+        }
+
         invalidate();
       }
     },

src/GraphScene.tsx

@@ -296,6 +296,7 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
       const nodes = useStore(state => state.nodes);
       const edges = useStore(state => state.edges);
       const clusters = useStore(state => [...state.clusters.values()]);
+      const isCentered = useStore(state => state.isCentered);
 
       // Center the graph on the nodes
       const { centerNodesById } = useCenterGraph({
@@ -429,11 +430,13 @@ export const GraphScene: FC<GraphSceneProps & { ref?: Ref<GraphSceneRef> }> =
       );
 
       return (
-        <Fragment>
-          {nodeComponents}
-          {edgeComponents}
-          {clusterComponents}
-        </Fragment>
+        isCentered && (
+          <Fragment>
+            {nodeComponents}
+            {edgeComponents}
+            {clusterComponents}
+          </Fragment>
+        )
       );
     }
   );

src/store.ts

@@ -37,6 +37,7 @@ export interface GraphState {
   drags?: DragReferences;
   panning?: boolean;
   theme: Theme;
+  isCentered: boolean;
   setTheme: (theme: Theme) => void;
   setClusters: (clusters: Map<string, ClusterGroup>) => void;
   setPanning: (panning: boolean) => void;
@@ -48,6 +49,7 @@ export interface GraphState {
   setEdges: (edges: InternalGraphEdge[]) => void;
   setNodePosition: (id: string, position: InternalGraphPosition) => void;
   setCollapsedNodeIds: (nodeIds: string[]) => void;
+  setIsCentered: (isCentered: boolean) => void;
 }
 
 export const { Provider, useStore } = createContext<StoreApi<GraphState>>();
@@ -81,6 +83,7 @@ export const createStore = ({
     selections,
     drags: {},
     graph: new Graph({ multi: true }),
+    isCentered: false,
     setTheme: theme => set(state => ({ ...state, theme })),
     setClusters: clusters => set(state => ({ ...state, clusters })),
     setEdgeContextMenus: edgeContextMenus =>
@@ -133,5 +136,7 @@ export const createStore = ({
         };
       }),
     setCollapsedNodeIds: (nodeIds = []) =>
-      set(state => ({ ...state, collapsedNodeIds: nodeIds }))
+      set(state => ({ ...state, collapsedNodeIds: nodeIds })),
+    setIsCentered: (isCentered: boolean) =>
+      set(state => ({ ...state, isCentered }))
   }));

src/useGraph.ts

@@ -1,12 +1,14 @@
 import { useRef, useCallback, useEffect, useMemo } from 'react';
+import { useThree } from '@react-three/fiber';
+import { PerspectiveCamera } from 'three';
 import { SizingType } from './sizing';
 import {
   LayoutTypes,
   layoutProvider,
   LayoutStrategy,
   LayoutOverrides
 } from './layout';
-import { LabelVisibilityType } from './utils/visibility';
+import { LabelVisibilityType, calcLabelVisibility } from './utils/visibility';
 import { tick } from './layout/layoutUtils';
 import { GraphEdge, GraphNode } from './types';
 import { buildGraph, transformGraph } from './utils/graph';
@@ -51,6 +53,7 @@ export const useGraph = ({
   const setClusters = useStore(state => state.setClusters);
   const stateCollapsedNodeIds = useStore(state => state.collapsedNodeIds);
   const setEdges = useStore(state => state.setEdges);
+  const stateNodes = useStore(state => state.nodes);
   const setNodes = useStore(state => state.setNodes);
   const setSelections = useStore(state => state.setSelections);
   const setActives = useStore(state => state.setActives);
@@ -59,6 +62,7 @@ export const useGraph = ({
   const setCollapsedNodeIds = useStore(state => state.setCollapsedNodeIds);
   const layoutMounted = useRef<boolean>(false);
   const layout = useRef<LayoutStrategy | null>(null);
+  const camera = useThree(state => state.camera) as PerspectiveCamera;
 
   const { visibleEdges, visibleNodes } = useMemo(
     () =>
@@ -132,6 +136,26 @@ export const useGraph = ({
     ]
   );
 
+  useEffect(() => {
+    const nodes = stateNodes.map(node => ({
+      ...node,
+      labelVisible: calcLabelVisibility({
+        nodeCount: stateNodes?.length,
+        labelType,
+        camera,
+        nodePosition: node?.position
+      })('node', node?.size)
+    }));
+
+    const isVisibilityUpdated = nodes.some(
+      (node, i) => node.labelVisible !== stateNodes[i].labelVisible
+    );
+
+    if (isVisibilityUpdated) {
+      setNodes(nodes);
+    }
+  }, [camera, camera.zoom, camera.position.z, setNodes, stateNodes, labelType]);
+
   useEffect(() => {
     // Let's set the store selections so its easier to access
     if (layoutMounted.current) {

src/utils/graph.ts

@@ -78,7 +78,7 @@ export function transformGraph({
   });
 
   const nodeCount = graph.nodes.length;
-  const checkVisibility = calcLabelVisibility(nodeCount, labelType);
+  const checkVisibility = calcLabelVisibility({ nodeCount, labelType });
 
   graph.forEachNode((id, node) => {
     const position = layout.getNodePosition(id);

src/utils/visibility.ts

@@ -1,21 +1,39 @@
+import { PerspectiveCamera } from 'three';
 import { EdgeLabelPosition } from '../symbols';
 
 const NODE_THRESHOLD = 20;
 
 export type LabelVisibilityType = 'all' | 'auto' | 'none' | 'nodes' | 'edges';
 
-export function calcLabelVisibility(
-  nodeCount: number,
-  type: LabelVisibilityType
-) {
+interface CalcLabelVisibilityArgs {
+  nodeCount: number;
+  nodePosition?: { x: number; y: number; z: number };
+  labelType: LabelVisibilityType;
+  camera?: PerspectiveCamera;
+}
+
+export function calcLabelVisibility({
+  nodeCount,
+  nodePosition,
+  labelType,
+  camera
+}: CalcLabelVisibilityArgs) {
   return (shape: 'node' | 'edge', size: number) => {
-    if (type === 'all') {
+    if (
+      camera &&
+      nodePosition &&
+      camera?.position?.z / camera?.zoom - nodePosition?.z > 6000
+    ) {
+      return false;
+    }
+
+    if (labelType === 'all') {
       return true;
-    } else if (type === 'nodes' && shape === 'node') {
+    } else if (labelType === 'nodes' && shape === 'node') {
       return true;
-    } else if (type === 'edges' && shape === 'edge') {
+    } else if (labelType === 'edges' && shape === 'edge') {
       return true;
-    } else if (type === 'auto' && shape === 'node') {
+    } else if (labelType === 'auto' && shape === 'node') {
       if (nodeCount <= NODE_THRESHOLD) {
         return true;
       } else {