From 8c31b0b4cf2673b97163ee7961b9213423851012 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?=
 <rasul.sahibjanli@gmail.com>
Date: Tue, 10 Dec 2024 13:50:03 +0300
Subject: [PATCH 1/2] feat: add normalized nodes, reduce rerenders, add
 particles

---
 src/components/App/index.tsx                  |   4 -
 .../Graph/Connections/LineComponent.tsx       |  33 +-
 .../Universe/Graph/Connections/index.tsx      |  11 +-
 .../Universe/Graph/Cubes/Text/index.tsx       | 292 ++++++++----------
 src/components/Universe/Graph/Cubes/index.tsx |  43 ++-
 src/components/Universe/Graph/index.tsx       |  13 +-
 src/components/Universe/Lights/index.tsx      |  11 +-
 src/components/Universe/index.tsx             |   5 +-
 .../PlayerContols/Controls/index.tsx          |   2 +-
 .../ProgressBar/Markers/Marker/index.tsx      |   2 +-
 .../ProgressBar/Markers/index.tsx             |   2 +-
 src/components/mindset/index.tsx              |  48 ++-
 src/stores/useDataStore/index.ts              | 217 +++++--------
 src/stores/useGraphStore/index.ts             |  24 +-
 src/types/index.ts                            |   3 +
 15 files changed, 359 insertions(+), 351 deletions(-)

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 4e0464179..4e99431c5 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -1,4 +1,3 @@
-import { Leva } from 'leva'
 import { lazy, Suspense, useCallback, useEffect, useRef } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useSearchParams } from 'react-router-dom'
@@ -8,7 +7,6 @@ import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { GlobalStyle } from '~/components/GlobalStyle'
 import { Overlay } from '~/components/Universe/Overlay' // Import Overlay directly
-import { isDevelopment } from '~/constants'
 import { useSocket } from '~/hooks/useSockets'
 import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
 import { useAppStore } from '~/stores/useAppStore'
@@ -341,8 +339,6 @@ export const App = () => {
 
       <DeviceCompatibilityNotice />
 
-      <Leva hidden={!isDevelopment || true} isRoot />
-
       <Suspense fallback={<div>Loading...</div>}>
         {!splashDataLoading ? (
           <Wrapper direction="row">
diff --git a/src/components/Universe/Graph/Connections/LineComponent.tsx b/src/components/Universe/Graph/Connections/LineComponent.tsx
index 25b0890ac..e36a6fe86 100644
--- a/src/components/Universe/Graph/Connections/LineComponent.tsx
+++ b/src/components/Universe/Graph/Connections/LineComponent.tsx
@@ -1,8 +1,10 @@
 import { Billboard, Line, Text } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
 import gsap from 'gsap'
 import { memo, useEffect, useRef } from 'react'
 import { Vector3 } from 'three'
 import { Line2 } from 'three-stdlib'
+import { useGraphStore } from '~/stores/useGraphStore'
 import { LinkPosition } from '..'
 import { LINE_WIDTH } from '../../constants'
 
@@ -10,10 +12,12 @@ type LineComponentProps = {
   isSelected: boolean
   position: LinkPosition
   label: string
+  target: string
+  source: string
 }
 
 // eslint-disable-next-line no-underscore-dangle
-const _LineComponent = ({ isSelected, position, label }: LineComponentProps) => {
+const _LineComponent = ({ isSelected, position, label, target, source }: LineComponentProps) => {
   const lineRef = useRef<Line2 | null>(null)
 
   useEffect(() => {
@@ -31,6 +35,33 @@ const _LineComponent = ({ isSelected, position, label }: LineComponentProps) =>
     }
   }, [isSelected, lineRef])
 
+  useFrame(() => {
+    const { selectedNode, hoveredNode } = useGraphStore.getState()
+
+    if (lineRef.current) {
+      const line = lineRef.current
+      const activeNode = selectedNode || hoveredNode
+
+      if (activeNode?.ref_id === source || activeNode?.ref_id === target) {
+        line.visible = true
+
+        // Increase line width
+        gsap.to(line.material, {
+          linewidth: 6, // Target line width
+          duration: 0.5, // Smooth increase
+          ease: 'power1.out',
+        })
+      } else {
+        // Decrease line width back to default
+        gsap.to(line.material, {
+          linewidth: 1, // Default line width
+          duration: 0.5, // Smooth decrease
+          ease: 'power1.out',
+        })
+      }
+    }
+  })
+
   return (
     <group>
       <Line
diff --git a/src/components/Universe/Graph/Connections/index.tsx b/src/components/Universe/Graph/Connections/index.tsx
index 4a04a3909..d1b68aaff 100644
--- a/src/components/Universe/Graph/Connections/index.tsx
+++ b/src/components/Universe/Graph/Connections/index.tsx
@@ -28,7 +28,16 @@ export const Connections = memo(({ linksPosition }: Props) => {
           tz: 0,
         }
 
-        return <LineComponent key={l.ref_id} isSelected={isSelected} label={l.edge_type} position={position} />
+        return (
+          <LineComponent
+            key={l.ref_id}
+            isSelected={isSelected}
+            label={l.edge_type}
+            position={position}
+            source={l.source}
+            target={l.target}
+          />
+        )
       })}
     </group>
   )
diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx
index 85b4faee1..b597d2d2b 100644
--- a/src/components/Universe/Graph/Cubes/Text/index.tsx
+++ b/src/components/Universe/Graph/Cubes/Text/index.tsx
@@ -4,48 +4,18 @@ import gsap from 'gsap'
 import { memo, useEffect, useRef } from 'react'
 import { Mesh, MeshBasicMaterial, Vector3 } from 'three'
 import { Icons } from '~/components/Icons'
-import { useNodeTypes } from '~/stores/useDataStore'
+import { useTraceUpdate } from '~/hooks/useTraceUpdate'
 import { useGraphStore } from '~/stores/useGraphStore'
 import { useSchemaStore } from '~/stores/useSchemaStore'
 import { NodeExtended } from '~/types'
-import { colors } from '~/utils/colors'
 import { removeEmojis } from '~/utils/removeEmojisFromText'
 import { truncateText } from '~/utils/truncateText'
 import { fontProps } from './constants'
 import { useTexture } from './hooks/useTexture'
 
-const COLORS_MAP = [
-  '#fff',
-  '#9747FF',
-  '#00887A',
-  '#0098A6',
-  '#0288D1',
-  '#33691E',
-  '#465A65',
-  '#512DA7',
-  '#5C6BC0',
-  '#5D4038',
-  '#662C00',
-  '#689F39',
-  '#6B1B00',
-  '#750000',
-  '#78909C',
-  '#7E57C2',
-  '#8C6E63',
-  '#AA47BC',
-  '#BF360C',
-  '#C2175B',
-  '#EC407A',
-  '#EF6C00',
-  '#F5511E',
-  '#FF9696',
-  '#FFC064',
-  '#FFCD29',
-  '#FFEA60',
-]
-
 type Props = {
   node: NodeExtended
+  color: string
   hide?: boolean
   ignoreDistance: boolean
 }
@@ -68,110 +38,113 @@ function splitStringIntoThreeParts(text: string): string {
   return `${firstPart}\n${secondPart}\n${thirdPart}`
 }
 
-export const TextNode = memo(({ node, hide, ignoreDistance }: Props) => {
-  const svgRef = useRef<Mesh | null>(null)
-  const ringRef = useRef<Mesh | null>(null)
-  const circleRef = useRef<Mesh | null>(null)
-
-  const nodePositionRef = useRef(new Vector3())
-
-  const { texture } = useTexture(node.properties?.image_url || '')
+export const TextNode = memo(
+  (props: Props) => {
+    const { node, hide, ignoreDistance, color } = props
 
-  const { normalizedSchemasByType, getNodeKeysByType } = useSchemaStore((s) => s)
+    const svgRef = useRef<Mesh | null>(null)
+    const ringRef = useRef<Mesh | null>(null)
+    const circleRef = useRef<Mesh | null>(null)
 
-  useFrame(({ camera, clock }) => {
-    const { selectedNode, hoveredNode, activeEdge } = useGraphStore.getState()
+    useTraceUpdate(props)
 
-    const checkDistance = () => {
-      const nodePosition = nodePositionRef.current.setFromMatrixPosition(ringRef.current!.matrixWorld)
+    const nodePositionRef = useRef(new Vector3())
 
-      if (ringRef.current) {
-        ringRef.current.visible = ignoreDistance ? true : nodePosition.distanceTo(camera.position) < 2500
-      }
+    const { texture } = useTexture(node.properties?.image_url || '')
 
-      // Set visibility based on distance
-    }
+    const { normalizedSchemasByType, getNodeKeysByType } = useSchemaStore((s) => s)
 
-    const isActive =
-      node.ref_id === selectedNode?.ref_id ||
-      node.ref_id === hoveredNode?.ref_id ||
-      activeEdge?.target === node.ref_id ||
-      activeEdge?.source === node.ref_id
+    useFrame(({ camera, clock }) => {
+      const { selectedNode, hoveredNode, activeEdge } = useGraphStore.getState()
 
-    if (isActive) {
-      if (ringRef.current) {
-        ringRef.current.visible = true
-      }
+      const checkDistance = () => {
+        const nodePosition = nodePositionRef.current.setFromMatrixPosition(ringRef.current!.matrixWorld)
 
-      const scale = 3 + 0.2 * Math.sin(clock.getElapsedTime() * 2) // Adjust frequency and amplitude
+        if (ringRef.current) {
+          ringRef.current.visible = ignoreDistance ? true : nodePosition.distanceTo(camera.position) < 1500
+        }
 
-      if (circleRef.current) {
-        circleRef.current.visible = true
-        circleRef.current.scale.set(scale, scale, scale)
+        // Set visibility based on distance
       }
 
-      return
-    }
-
-    if (circleRef.current) {
-      circleRef.current.visible = false
-    }
+      const isActive =
+        node.ref_id === selectedNode?.ref_id ||
+        node.ref_id === hoveredNode?.ref_id ||
+        activeEdge?.target === node.ref_id ||
+        activeEdge?.source === node.ref_id
 
-    checkDistance()
-  })
+      if (isActive) {
+        if (ringRef.current) {
+          ringRef.current.visible = true
+        }
 
-  useEffect(() => {
-    if (!ringRef.current) {
-      return
-    }
+        const scale = 3 + 0.2 * Math.sin(clock.getElapsedTime() * 2) // Adjust frequency and amplitude
 
-    gsap.fromTo(
-      ringRef.current.scale, // Target
-      { x: 1, y: 1, z: 1 }, // From values
-      {
-        x: 6,
-        y: 6,
-        z: 6, // To values
-        duration: 1.5, // Animation duration
-        yoyo: true,
-        repeat: 1,
-      },
-    )
-  }, [ringRef])
+        if (circleRef.current) {
+          circleRef.current.visible = true
+          circleRef.current.scale.set(scale, scale, scale)
+        }
 
-  const nodeTypes = useNodeTypes()
-
-  const primaryColor = normalizedSchemasByType[node.node_type]?.primary_color
-  const primaryIcon = normalizedSchemasByType[node.node_type]?.icon
-
-  const color = primaryColor ?? (COLORS_MAP[nodeTypes.indexOf(node.node_type)] || colors.white)
+        return
+      }
 
-  const Icon = primaryIcon ? Icons[primaryIcon] : null
-  const iconName = Icon ? primaryIcon : 'NodesIcon'
-  const keyProperty = getNodeKeysByType(node.node_type) || ''
+      if (circleRef.current) {
+        circleRef.current.visible = false
+      }
 
-  const sanitizedNodeName =
-    keyProperty && node?.properties ? removeEmojis(String(node?.properties[keyProperty] || '')) : ''
+      checkDistance()
+    })
 
-  const uniforms = {
-    u_texture: { value: texture },
-    u_radius: { value: 0.5 }, // Radius of the circular mask
-  }
+    useEffect(() => {
+      if (!ringRef.current) {
+        return
+      }
 
-  return (
-    <Billboard follow lockX={false} lockY={false} lockZ={false} name="billboard" userData={node}>
-      <mesh ref={ringRef} name={node.id} userData={node} visible={!hide}>
-        <mesh ref={circleRef} position={[0, 0, -2]} visible={false}>
-          <circleGeometry args={[30, 32]} />
-          <meshBasicMaterial color={color} opacity={0.5} transparent />
-        </mesh>
+      gsap.fromTo(
+        ringRef.current.scale, // Target
+        { x: 1, y: 1, z: 1 }, // From values
+        {
+          x: 2,
+          y: 2,
+          z: 2, // To values
+          duration: 1.5, // Animation duration
+          yoyo: true,
+          repeat: 1,
+        },
+      )
+    }, [ringRef])
+
+    const primaryColor = normalizedSchemasByType[node.node_type]?.primary_color
+    const primaryIcon = normalizedSchemasByType[node.node_type]?.icon
+
+    const nodeColor = primaryColor ?? color
+
+    const Icon = primaryIcon ? Icons[primaryIcon] : null
+    const iconName = Icon ? primaryIcon : 'NodesIcon'
+    const keyProperty = getNodeKeysByType(node.node_type) || ''
+
+    const sanitizedNodeName =
+      keyProperty && node?.properties ? removeEmojis(String(node?.properties[keyProperty] || '')) : ''
+
+    const uniforms = {
+      u_texture: { value: texture },
+      u_radius: { value: 0.5 }, // Radius of the circular mask
+    }
 
-        {node.properties?.image_url &&
-        ['Person', 'Episode', 'Guest', 'Host', 'Show'].includes(node.node_type) &&
-        texture ? (
-          <Plane args={[10 * 2, 10 * 2]} scale={2}>
-            <shaderMaterial
-              fragmentShader={`
+    return (
+      <Billboard follow lockX={false} lockY={false} lockZ={false} name="billboard" userData={node}>
+        <mesh ref={ringRef} name={node.ref_id} userData={node} visible={!hide}>
+          <mesh ref={circleRef} position={[0, 0, -2]} visible={false}>
+            <circleGeometry args={[30, 32]} />
+            <meshBasicMaterial color={nodeColor} opacity={0.5} transparent />
+          </mesh>
+
+          {node.properties?.image_url &&
+          ['Person', 'Episode', 'Guest', 'Host', 'Show'].includes(node.node_type) &&
+          texture ? (
+            <Plane args={[10 * 2, 10 * 2]} scale={2}>
+              <shaderMaterial
+                fragmentShader={`
           uniform sampler2D u_texture;
           uniform float u_radius;
           varying vec2 vUv;
@@ -186,53 +159,58 @@ export const TextNode = memo(({ node, hide, ignoreDistance }: Props) => {
             }
           }
         `}
-              uniforms={uniforms}
-              vertexShader={`
+                uniforms={uniforms}
+                vertexShader={`
           varying vec2 vUv;
           void main() {
             vUv = uv;
             gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
           }
         `}
+              />
+            </Plane>
+          ) : (
+            <Svg
+              ref={svgRef}
+              name="svg"
+              onUpdate={(svg) => {
+                svg.traverse((child) => {
+                  if (child instanceof Mesh) {
+                    // Apply dynamic color to meshes
+                    // eslint-disable-next-line no-param-reassign
+                    child.material = new MeshBasicMaterial({ color })
+                  }
+                })
+              }}
+              position={[-15, 15, 0]}
+              scale={2}
+              src={`svg-icons/${iconName}.svg`}
+              strokeMaterial={{ color: 'yellow' }}
+              userData={node}
             />
-          </Plane>
-        ) : (
-          <Svg
-            ref={svgRef}
-            name="svg"
-            onUpdate={(svg) => {
-              svg.traverse((child) => {
-                if (child instanceof Mesh) {
-                  // Apply dynamic color to meshes
-                  // eslint-disable-next-line no-param-reassign
-                  child.material = new MeshBasicMaterial({ color })
-                }
-              })
-            }}
-            position={[-15, 15, 0]}
-            scale={2}
-            src={`svg-icons/${iconName}.svg`}
-            strokeMaterial={{ color: 'yellow' }}
-            userData={node}
-          />
-        )}
-
-        {sanitizedNodeName && (
-          <Text
-            color={color}
-            fillOpacity={1}
-            name="text"
-            position={[0, -65, 0]}
-            scale={20}
-            userData={node}
-            {...fontProps}
-          >
-            {splitStringIntoThreeParts(sanitizedNodeName)}
-          </Text>
-        )}
-      </mesh>
-    </Billboard>
-  )
-})
+          )}
+
+          {sanitizedNodeName && (
+            <Text
+              color={color}
+              fillOpacity={1}
+              name="text"
+              position={[0, -65, 0]}
+              scale={20}
+              userData={node}
+              {...fontProps}
+            >
+              {splitStringIntoThreeParts(sanitizedNodeName)}
+            </Text>
+          )}
+        </mesh>
+      </Billboard>
+    )
+  },
+  (prevProps, nextProps) =>
+    prevProps.hide === nextProps.hide &&
+    prevProps.ignoreDistance === nextProps.ignoreDistance &&
+    prevProps.node.ref_id === nextProps.node.ref_id,
+)
 
 TextNode.displayName = 'TextNode'
diff --git a/src/components/Universe/Graph/Cubes/index.tsx b/src/components/Universe/Graph/Cubes/index.tsx
index c7517eccb..3c677261e 100644
--- a/src/components/Universe/Graph/Cubes/index.tsx
+++ b/src/components/Universe/Graph/Cubes/index.tsx
@@ -3,9 +3,10 @@ import { ThreeEvent } from '@react-three/fiber'
 import { memo, useCallback, useRef } from 'react'
 import { Object3D } from 'three'
 import { useAppStore } from '~/stores/useAppStore'
-import { useDataStore } from '~/stores/useDataStore'
+import { useDataStore, useNodeTypes } from '~/stores/useDataStore'
 import { useGraphStore, useHoveredNode, useSelectedNode, useSelectedNodeRelativeIds } from '~/stores/useGraphStore'
 import { NodeExtended } from '~/types'
+import { colors } from '~/utils'
 import { NodePoints } from './NodePoints'
 import { RelevanceBadges } from './RelevanceBadges'
 import { SelectionDataNodes } from './SelectionDataNodes'
@@ -13,12 +14,43 @@ import { TextNode } from './Text'
 
 const POINTER_IN_DELAY = 200
 
+const COLORS_MAP = [
+  '#fff',
+  '#9747FF',
+  '#00887A',
+  '#0098A6',
+  '#0288D1',
+  '#33691E',
+  '#465A65',
+  '#512DA7',
+  '#5C6BC0',
+  '#5D4038',
+  '#662C00',
+  '#689F39',
+  '#6B1B00',
+  '#750000',
+  '#78909C',
+  '#7E57C2',
+  '#8C6E63',
+  '#AA47BC',
+  '#BF360C',
+  '#C2175B',
+  '#EC407A',
+  '#EF6C00',
+  '#F5511E',
+  '#FF9696',
+  '#FFC064',
+  '#FFCD29',
+  '#FFEA60',
+]
+
 export const Cubes = memo(() => {
   const selectedNode = useSelectedNode()
   const hoveredNode = useHoveredNode()
 
   const relativeIds = useSelectedNodeRelativeIds()
   const { selectionGraphData, showSelectionGraph, setHoveredNode, setIsHovering } = useGraphStore((s) => s)
+  const nodeTypes = useNodeTypes()
 
   const data = useDataStore((s) => s.dataInitial)
   const setTranscriptOpen = useAppStore((s) => s.setTranscriptOpen)
@@ -112,12 +144,19 @@ export const Cubes = memo(() => {
       <group name="simulation-3d-group__nodes" visible={!hideUniverse}>
         {data?.nodes.map((node: NodeExtended) => {
           const hide = !!selectedNode && (relativeIds.includes(node.ref_id) || selectedNode.ref_id === node.ref_id)
+          const color = COLORS_MAP[nodeTypes.indexOf(node.node_type)] || colors.white
 
           return (
             <mesh key={node.ref_id} name="wr2" scale={node.scale || 1} userData={node}>
               <boxGeometry args={[40, 40, 40]} />
               <meshStandardMaterial opacity={0} transparent />
-              <TextNode key={node.ref_id || node.id} hide={hideUniverse || hide} ignoreDistance={false} node={node} />
+              <TextNode
+                key={node.ref_id}
+                color={color}
+                hide={hideUniverse || hide}
+                ignoreDistance={false}
+                node={node}
+              />
             </mesh>
           )
         })}
diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx
index d6262f506..c1c78840c 100644
--- a/src/components/Universe/Graph/index.tsx
+++ b/src/components/Universe/Graph/index.tsx
@@ -10,6 +10,7 @@ import { Connections } from './Connections'
 import { Cubes } from './Cubes'
 import { Earth } from './Earth'
 import { LoadingNodes } from './LoadingNodes'
+import { Particles } from './Particles/index'
 import { NodeDetailsPanel } from './UI'
 
 export type LinkPosition = {
@@ -176,7 +177,16 @@ export const Graph = () => {
     })
 
     simulation.on('end', () => {
-      const nodesVector = simulation.nodes().map((i: NodeExtended) => new Vector3(i.x, i.y, i.z))
+      const nodesVector = simulation.nodes().map((i: NodeExtended) => {
+        // eslint-disable-next-line no-param-reassign
+        i.fx = i.x
+        // eslint-disable-next-line no-param-reassign
+        i.fy = i.y
+        // eslint-disable-next-line no-param-reassign
+        i.fz = i.z
+
+        return new Vector3(i.x, i.y, i.z)
+      })
 
       const boundingBox = new Box3().setFromPoints(nodesVector)
 
@@ -200,6 +210,7 @@ export const Graph = () => {
     <group ref={groupRef}>
       <Cubes />
       {graphStyle === 'earth' && <Earth />}
+      <Particles />
 
       {(isLoadingNew || isFetching) && <LoadingNodes />}
 
diff --git a/src/components/Universe/Lights/index.tsx b/src/components/Universe/Lights/index.tsx
index 96bb3da9a..0da717496 100644
--- a/src/components/Universe/Lights/index.tsx
+++ b/src/components/Universe/Lights/index.tsx
@@ -1,19 +1,11 @@
 import { useFrame } from '@react-three/fiber'
-import { useControls } from 'leva'
 import { useRef } from 'react'
 import { DirectionalLight, PointLight } from 'three'
-import { GRAPH_FOG_COLOR, GRAPH_GROUND_COLOR, GRAPH_LIGHT_INTENSITY } from '~/constants'
-import { useGraphStore } from '~/stores/useGraphStore'
+import { GRAPH_GROUND_COLOR, GRAPH_LIGHT_INTENSITY } from '~/constants'
 import { colors } from '~/utils/colors'
 import { UNIVERSE_SCALE } from '../Graph/constant'
 
 export const Lights = () => {
-  const { fogColor } = useControls('universe', {
-    fogColor: GRAPH_FOG_COLOR,
-  })
-
-  const graphStyle = useGraphStore((s) => s.graphStyle)
-
   const pLightRefAmbient = useRef<PointLight | null>(null)
   const cameraLightRef = useRef<PointLight | null>(null)
   const dLightRef = useRef<DirectionalLight | null>(null)
@@ -46,7 +38,6 @@ export const Lights = () => {
     <>
       {/* static lights */}
       <hemisphereLight args={[colors.white, GRAPH_GROUND_COLOR, GRAPH_LIGHT_INTENSITY]} />
-      {graphStyle !== 'earth' && <fog args={[fogColor, 5, 18000]} attach="fog" />}
       <ambientLight color={colors.white} intensity={1} />
 
       {/* moving lights */}
diff --git a/src/components/Universe/index.tsx b/src/components/Universe/index.tsx
index 1b0e131a2..3a5ce713e 100644
--- a/src/components/Universe/index.tsx
+++ b/src/components/Universe/index.tsx
@@ -3,7 +3,7 @@
 import { AdaptiveDpr, AdaptiveEvents, Html, Loader, Preload } from '@react-three/drei'
 import { Canvas, RootState } from '@react-three/fiber'
 import { Bloom, EffectComposer, Outline, Selection, Vignette } from '@react-three/postprocessing'
-import { useControls } from 'leva'
+import { Leva, useControls } from 'leva'
 import { BlendFunction, Resolution } from 'postprocessing'
 import { Perf } from 'r3f-perf'
 import { Suspense, memo, useCallback, useMemo } from 'react'
@@ -18,13 +18,13 @@ import { colors } from '~/utils/colors'
 import { addToGlobalForE2e } from '~/utils/tests'
 import { UniverseQuestion } from '../App/UniverseQuestion'
 import { Flex } from '../common/Flex'
+import { outlineEffectColor } from './constants'
 import { Controls } from './Controls'
 import { initialCameraPosition } from './Controls/CameraAnimations/constants'
 import { Graph } from './Graph'
 import { Lights } from './Lights'
 import { Overlay } from './Overlay'
 import { Preloader } from './Preloader'
-import { outlineEffectColor } from './constants'
 
 const Fallback = () => (
   <Html>
@@ -131,6 +131,7 @@ const _Universe = () => {
   return (
     <Wrapper>
       <Suspense fallback={null}>
+        <Leva hidden isRoot />
         <Canvas camera={cameraProps} id="universe-canvas" onCreated={onCreatedHandler} onWheel={onWheelHandler}>
           {isDevelopment && <Perf position="top-right" style={{ top: '80px' }} />}
           <Suspense fallback={<Fallback />}>
diff --git a/src/components/mindset/components/PlayerContols/Controls/index.tsx b/src/components/mindset/components/PlayerContols/Controls/index.tsx
index 8abd7e388..33fbc6c8b 100644
--- a/src/components/mindset/components/PlayerContols/Controls/index.tsx
+++ b/src/components/mindset/components/PlayerContols/Controls/index.tsx
@@ -27,7 +27,7 @@ export const Controls = memo(() => {
   }
 
   const togglePlay = () => {
-    if (playerRef) {
+    if (playerRef?.getInternalPlayer()) {
       if (isPlaying) {
         playerRef.getInternalPlayer().pauseVideo()
 
diff --git a/src/components/mindset/components/PlayerContols/ProgressBar/Markers/Marker/index.tsx b/src/components/mindset/components/PlayerContols/ProgressBar/Markers/Marker/index.tsx
index 2925249b8..5dd385a7d 100644
--- a/src/components/mindset/components/PlayerContols/ProgressBar/Markers/Marker/index.tsx
+++ b/src/components/mindset/components/PlayerContols/ProgressBar/Markers/Marker/index.tsx
@@ -17,7 +17,7 @@ type BadgeProps = {
 }
 
 export const Marker = memo(({ type, left, img }: Props) => {
-  const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType])
+  const normalizedSchemasByType = useSchemaStore((s) => s.normalizedSchemasByType)
 
   const primaryColor = normalizedSchemasByType[type]?.primary_color
   const primaryIcon = normalizedSchemasByType[type]?.icon
diff --git a/src/components/mindset/components/PlayerContols/ProgressBar/Markers/index.tsx b/src/components/mindset/components/PlayerContols/ProgressBar/Markers/index.tsx
index 8f7e3f868..26272ebe0 100644
--- a/src/components/mindset/components/PlayerContols/ProgressBar/Markers/index.tsx
+++ b/src/components/mindset/components/PlayerContols/ProgressBar/Markers/index.tsx
@@ -10,7 +10,7 @@ type Props = {
 export const Markers = memo(({ markers, duration }: Props) => (
   <>
     {markers.map((node) => {
-      const position = ((node?.start || 0) / duration) * 100
+      const position = Math.floor(((node?.start || 0) / duration) * 100)
       const type = node?.node_type || ''
       const img = node?.properties?.image_url || ''
 
diff --git a/src/components/mindset/index.tsx b/src/components/mindset/index.tsx
index 2c1b24000..fec7fc864 100644
--- a/src/components/mindset/index.tsx
+++ b/src/components/mindset/index.tsx
@@ -8,7 +8,7 @@ import { getNode } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useMindsetStore } from '~/stores/useMindsetStore'
 import { usePlayerStore } from '~/stores/usePlayerStore'
-import { FetchDataResponse, Link, Node, NodeExtended } from '~/types'
+import { FetchDataResponse, Link, Node } from '~/types'
 import { Header } from './components/Header'
 import { LandingPage } from './components/LandingPage'
 import { PlayerControl } from './components/PlayerContols'
@@ -67,10 +67,6 @@ export const MindSet = () => {
     [addNewNode, isFetching],
   )
 
-  const handleNodeUpdated = useCallback((node: NodeExtended) => {
-    console.log(node, 'uuuuuupdate')
-  }, [])
-
   useEffect(() => {
     const init = async () => {
       try {
@@ -111,7 +107,7 @@ export const MindSet = () => {
           edges: remainingLinks || [],
         }
 
-        handleNewNodeCreated({ nodes: episodesAndClips, edges: matchingLinks })
+        addNewNode({ nodes: episodesAndClips, edges: matchingLinks })
       } catch (error) {
         console.error(error)
       }
@@ -120,7 +116,7 @@ export const MindSet = () => {
     if (selectedEpisodeId) {
       init()
     }
-  }, [selectedEpisodeId, handleNewNodeCreated])
+  }, [selectedEpisodeId, addNewNode])
 
   useEffect(() => {
     const init = async () => {
@@ -151,7 +147,6 @@ export const MindSet = () => {
 
       if (runningProjectId) {
         socket.on('new_node_created', handleNewNodeCreated)
-        socket.on('node_updated', handleNodeUpdated)
       }
     }
 
@@ -160,7 +155,7 @@ export const MindSet = () => {
         socket.off()
       }
     }
-  }, [socket, handleNodeUpdated, handleNewNodeCreated, runningProjectId])
+  }, [socket, handleNewNodeCreated, runningProjectId])
 
   useEffect(() => {
     const update = (time: number) => {
@@ -174,16 +169,39 @@ export const MindSet = () => {
             const { nodes, edges } = nodesAndEdgesRef.current
             const currentTime = playerRef?.getCurrentTime()
 
-            const edgesWithTimestamp = edges.filter(
-              (edge) => edge?.properties?.start !== undefined && (edge?.properties?.start as number) < currentTime,
+            const [matchingLinks, remainingLinks] = edges.reduce<[Link[], Link[]]>(
+              ([matches, remaining], link) => {
+                if (link?.properties?.start !== undefined && (link?.properties?.start as number) < currentTime) {
+                  matches.push(link)
+                } else {
+                  remaining.push(link)
+                }
+
+                return [matches, remaining]
+              },
+              [[], []],
             )
 
-            const newNodes = nodes.filter((node) =>
-              edgesWithTimestamp.some((edge) => edge.target === node.ref_id || edge.source === node.ref_id),
+            const [matchingNodes, remainingNodes] = nodes.reduce<[Node[], Node[]]>(
+              ([matches, remaining], node) => {
+                if (matchingLinks.some((edge) => edge.target === node.ref_id || edge.source === node.ref_id)) {
+                  matches.push(node)
+                } else {
+                  remaining.push(node)
+                }
+
+                return [matches, remaining]
+              },
+              [[], []],
             )
 
-            if (newNodes.length || edgesWithTimestamp.length) {
-              addNewNode({ nodes: newNodes, edges: edgesWithTimestamp })
+            nodesAndEdgesRef.current = {
+              nodes: remainingNodes,
+              edges: remainingLinks,
+            }
+
+            if (matchingNodes.length || matchingLinks.length) {
+              addNewNode({ nodes: matchingNodes, edges: matchingLinks })
             }
           }
 
diff --git a/src/stores/useDataStore/index.ts b/src/stores/useDataStore/index.ts
index 45f78bf88..aec5da799 100644
--- a/src/stores/useDataStore/index.ts
+++ b/src/stores/useDataStore/index.ts
@@ -2,25 +2,11 @@ import { isEqual } from 'lodash'
 import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
 import { fetchGraphData } from '~/network/fetchGraphData'
-import { FetchDataResponse, FilterParams, Link, NodeExtended, NodeType, Sources, Trending, TStats } from '~/types'
+import { FetchDataResponse, FilterParams, Link, Node, NodeExtended, NodeType, Sources, Trending, TStats } from '~/types'
 import { useAiSummaryStore } from '../useAiSummaryStore'
 import { useAppStore } from '../useAppStore'
 import { useUserStore } from '../useUserStore'
 
-const deduplicateByRefId = (items: Array<NodeExtended | Link>) => {
-  const uniqueMap = new Map()
-
-  items.forEach((item) => {
-    if (!uniqueMap.has(item.ref_id)) {
-      uniqueMap.set(item.ref_id, item)
-    }
-  })
-
-  return Array.from(uniqueMap.values())
-}
-
-export type GraphStyle = 'sphere' | 'force' | 'split' | 'earth'
-
 export type FetchNodeParams = {
   word?: string
   skip_cache?: string
@@ -55,6 +41,8 @@ export type DataStore = {
   seedQuestions: string[] | null
   runningProjectId: string
   runningProjectMessages: string[]
+  nodesNormalized: Map<string, Node>
+  linksNormalized: Map<string, Link>
 
   setTrendingTopics: (trendingTopics: Trending[]) => void
   resetDataNew: () => void
@@ -149,6 +137,8 @@ const defaultData: Omit<
   runningProjectId: '',
   hideNodeDetails: false,
   nodeTypes: [],
+  nodesNormalized: new Map<string, Node>(),
+  linksNormalized: new Map<string, Link>(),
 }
 
 let abortController: AbortController | null = null
@@ -158,23 +148,19 @@ export const useDataStore = create<DataStore>()(
     ...defaultData,
 
     fetchData: async (setBudget, setAbortRequests, AISearchQuery = '') => {
-      const { dataInitial: existingData, filters } = get()
+      const { filters, addNewNode } = get()
       const currentPage = filters.skip
       const itemsPerPage = filters.limit
       const { currentSearch } = useAppStore.getState()
       const { setAiSummaryAnswer, setNewLoading, aiRefId } = useAiSummaryStore.getState()
-      let ai = { ai_summary: String(!!AISearchQuery) }
+
+      const ai = { ai_summary: String(!!AISearchQuery) }
 
       if (!AISearchQuery) {
-        if (!currentPage) {
-          set({ isFetching: true })
-        } else {
-          set({ isLoadingNew: true })
-        }
+        set(currentPage === 0 ? { isFetching: true } : { isLoadingNew: true })
       }
 
       if (AISearchQuery) {
-        ai = { ...ai, ai_summary: String(true) }
         setNewLoading({ question: AISearchQuery, answerLoading: true })
       }
 
@@ -188,7 +174,6 @@ export const useDataStore = create<DataStore>()(
       abortController = controller
 
       const { node_type: filterNodeTypes, ...withoutNodeType } = filters
-
       const word = AISearchQuery || currentSearch
 
       const isLatest = isEqual(filters, defaultData.filters) && !word
@@ -206,17 +191,13 @@ export const useDataStore = create<DataStore>()(
       try {
         const data = await fetchGraphData(setBudget, updatedParams, isLatest, signal, setAbortRequests)
 
-        if (!data?.nodes) {
-          return
-        }
-
         if (data?.query_data?.ref_id) {
-          useAiSummaryStore.setState({ aiRefId: data?.query_data?.ref_id })
+          useAiSummaryStore.setState({ aiRefId: data.query_data.ref_id })
 
           const { aiSummaryAnswers } = useAiSummaryStore.getState()
-          const { answer } = aiSummaryAnswers[data?.query_data?.ref_id] || {}
+          const { answer } = aiSummaryAnswers[data.query_data.ref_id] || {}
 
-          setAiSummaryAnswer(data?.query_data?.ref_id, {
+          setAiSummaryAnswer(data.query_data.ref_id, {
             question: AISearchQuery,
             answer: answer || '',
             answerLoading: !answer,
@@ -227,69 +208,89 @@ export const useDataStore = create<DataStore>()(
           setNewLoading(null)
         }
 
-        const currentNodes = currentPage === 0 && !aiRefId ? [] : [...(existingData?.nodes || [])]
-        const currentLinks = currentPage === 0 && !aiRefId ? [] : [...(existingData?.links || [])]
+        if (data?.nodes) {
+          addNewNode(data)
+        }
 
-        const newNodes = (data?.nodes || []).filter((n) => !currentNodes.some((c) => c.ref_id === n.ref_id))
+        set({ isFetching: false, isLoadingNew: false, splashDataLoading: false })
+      } catch (error) {
+        console.error(error)
 
-        currentNodes.push(...newNodes)
+        if (error !== 'abort') {
+          set({ isFetching: false, isLoadingNew: false })
+        }
+      }
+    },
 
-        const newLinks = (data?.edges || [])
-          .filter((n) => !currentLinks.some((c) => c.ref_id === n.ref_id))
-          .filter((c) => {
-            const { target, source } = c
+    addNewNode: (data) => {
+      const { dataInitial: existingData, filters, nodesNormalized, linksNormalized } = get()
 
-            return currentNodes.some((n) => n.ref_id === target) && currentNodes.some((n) => n.ref_id === source)
-          })
+      if (!data?.nodes) {
+        return
+      }
 
-        currentLinks.push(...newLinks)
+      // Initialize maps if not already present
+      const normalizedNodesMap = nodesNormalized || new Map()
+      const normalizedLinksMap = linksNormalized || new Map()
 
-        const nodeTypes = [...new Set(currentNodes.map((i) => i.node_type))]
+      // Filter nodes based on filters.node_type
+      const nodesFilteredByFilters = filters.node_type.length
+        ? data.nodes.filter((node) => filters.node_type.includes(node.node_type))
+        : data.nodes
 
-        const sidebarFilters = ['all', ...nodeTypes.map((i) => i.toLowerCase())]
+      // Add new nodes directly to the Map
+      const newNodes: Node[] = []
 
-        const sidebarFilterCounts = sidebarFilters.map((filter) => ({
-          name: filter,
-          count: currentNodes.filter((node) => filter === 'all' || node.node_type?.toLowerCase() === filter).length,
-        }))
+      nodesFilteredByFilters.forEach((node) => {
+        if (!normalizedNodesMap.has(node.ref_id)) {
+          normalizedNodesMap.set(node.ref_id, node)
+          newNodes.push(node)
+        }
+      })
 
-        const minScale = 1
-        const maxScale = 4
+      // Get existing nodes and add new nodes
+      const currentNodes = existingData?.nodes || []
+      const updatedNodes = [...currentNodes, ...newNodes]
 
-        // Find min and max edgeCount values
-        const minEdgeCount = Math.min(...currentNodes.map((node) => node.edge_count))
-        const maxEdgeCount = Math.max(...currentNodes.map((node) => node.edge_count))
+      // Filter and add new links
+      const newLinks: Link[] = []
 
-        // Normalize and calculate scale for each node
-        const normalizedNodes = currentNodes.map((node) => {
-          const { edge_count: edgeCount } = node
-          const count = edgeCount || 1
+      const edges = data.edges || []
 
-          const scale = Math.round(
-            ((count - minEdgeCount) / (maxEdgeCount - minEdgeCount)) * (maxScale - minScale) + minScale,
-          )
+      edges.forEach((link: Link) => {
+        if (
+          !normalizedLinksMap.has(link.ref_id) && // Ensure link is unique
+          normalizedNodesMap.has(link.source) && // Ensure source node exists
+          normalizedNodesMap.has(link.target) // Ensure target node exists
+        ) {
+          normalizedLinksMap.set(link.ref_id, link)
+          newLinks.push(link)
+        }
+      })
 
-          // Return new object with calculated scale
-          return { ...node, scale }
-        })
+      // Get existing links and add new links
+      const currentLinks = existingData?.links || []
+      const updatedLinks = [...currentLinks, ...newLinks]
 
-        set({
-          dataInitial: { nodes: normalizedNodes, links: currentLinks },
-          dataNew: { nodes: newNodes, links: newLinks },
-          isFetching: false,
-          isLoadingNew: false,
-          splashDataLoading: false,
-          nodeTypes,
-          sidebarFilters,
-          sidebarFilterCounts,
-        })
-      } catch (error) {
-        console.error(error)
+      // Update node types and sidebar filters
+      const nodeTypes = [...new Set(updatedNodes.map((node) => node.node_type))]
+      const sidebarFilters = ['all', ...nodeTypes.map((type) => type.toLowerCase())]
 
-        if (error !== 'abort') {
-          set({ isLoadingNew: false, isFetching: false })
-        }
-      }
+      const sidebarFilterCounts = sidebarFilters.map((filter) => ({
+        name: filter,
+        count: updatedNodes.filter((node) => filter === 'all' || node.node_type?.toLowerCase() === filter).length,
+      }))
+
+      // Persist updates
+      set({
+        dataInitial: { nodes: updatedNodes, links: updatedLinks },
+        dataNew: { nodes: newNodes, links: newLinks },
+        nodeTypes,
+        sidebarFilters,
+        sidebarFilterCounts,
+        nodesNormalized: normalizedNodesMap,
+        linksNormalized: normalizedLinksMap,
+      })
     },
 
     abortFetchData: () => {
@@ -347,65 +348,7 @@ export const useDataStore = create<DataStore>()(
     updateNode: (updatedNode) => {
       console.info(updatedNode)
     },
-    addNewNode: (data) => {
-      const { dataInitial: existingData, filters } = get()
-
-      if (!data?.nodes) {
-        return
-      }
-
-      const nodesFilteredByFilters = filters.node_type.length
-        ? data.nodes.filter((node) => filters.node_type.some((t) => t === node.node_type))
-        : data.nodes
-
-      const uniqueIncomingNodes = deduplicateByRefId(nodesFilteredByFilters || [])
-      const uniqueIncomingEdges = deduplicateByRefId(data.edges || [])
-
-      // Step 2: Existing nodes and links from the current state
-      const currentNodes = existingData?.nodes ? [...existingData.nodes] : []
-      const currentLinks = existingData?.links ? [...existingData.links] : []
-
-      // Step 3: Use Sets to track unique ref_ids of existing data
-      const nodeRefIds = new Set(currentNodes.map((node) => node.ref_id))
-      const linkRefIds = new Set(currentLinks.map((link) => link.ref_id))
-
-      // Step 4: Filter new nodes and add only unique ones
-      const newNodes = uniqueIncomingNodes.filter((node) => !nodeRefIds.has(node.ref_id))
-      const updatedNodes = [...currentNodes, ...newNodes]
 
-      // Update `nodeRefIds` with the new nodes added
-      newNodes.forEach((node) => nodeRefIds.add(node.ref_id))
-
-      // Step 5: Filter new links based on unique ref_ids and node presence
-      const newLinks = uniqueIncomingEdges
-        .filter((link) => !linkRefIds.has(link.ref_id)) // Check for unique `ref_id`
-        .filter((link) => {
-          const { source, target } = link
-
-          return nodeRefIds.has(source) && nodeRefIds.has(target) // Ensure nodes exist
-        })
-
-      const updatedLinks = [...currentLinks, ...newLinks]
-
-      // Step 6: Extract unique node types and create sidebar filters
-      const nodeTypes = [...new Set(updatedNodes.map((node) => node.node_type))]
-      const sidebarFilters = ['all', ...nodeTypes.map((type) => type.toLowerCase())]
-
-      // Step 7: Calculate sidebar filter counts
-      const sidebarFilterCounts = sidebarFilters.map((filter) => ({
-        name: filter,
-        count: updatedNodes.filter((node) => filter === 'all' || node.node_type?.toLowerCase() === filter).length,
-      }))
-
-      // Step 8: Update the state with the new data
-      set({
-        dataInitial: { nodes: updatedNodes, links: updatedLinks },
-        dataNew: { nodes: newNodes, links: newLinks },
-        nodeTypes,
-        sidebarFilters,
-        sidebarFilterCounts,
-      })
-    },
     removeNode: (id) => {
       console.log(id)
     },
diff --git a/src/stores/useGraphStore/index.ts b/src/stores/useGraphStore/index.ts
index 8cb731d6b..b95b63083 100644
--- a/src/stores/useGraphStore/index.ts
+++ b/src/stores/useGraphStore/index.ts
@@ -176,14 +176,16 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
   setShowSelectionGraph: (showSelectionGraph) => set({ showSelectionGraph }),
   simulationHelpers: {
     addNodesAndLinks: (newNodes, newLinks, replace) => {
+      const { simulation, simulationHelpers } = get()
+
+      simulation.stop()
+
       const structuredNodes = structuredClone(newNodes)
       const structuredLinks = structuredClone(newLinks)
 
-      const { simulation, simulationHelpers } = get()
-
       simulation.stop()
 
-      const nodes = replace ? [] : simulation.nodes().map((n: NodeExtended) => ({ ...n, fx: n.x, fy: n.y, fz: n.z }))
+      const nodes = replace ? [] : simulation.nodes()
       const links = replace ? [] : simulation.force('link').links()
 
       nodes.push(...structuredNodes)
@@ -192,21 +194,7 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
       try {
         simulation.nodes(nodes)
 
-        const filteredLinks = links.filter((link: Link<NodeExtended | string>) => {
-          const { target, source } = link
-          const simulationNodes = simulation.nodes()
-
-          // Log the target and source ref_id for debugging
-          const targetRefId = (target as NodeExtended)?.ref_id || target
-          const sourceRefId = (source as NodeExtended)?.ref_id || source
-
-          return (
-            simulationNodes.some((n: NodeExtended) => n.ref_id === targetRefId) &&
-            simulationNodes.some((n: NodeExtended) => n.ref_id === sourceRefId)
-          )
-        })
-
-        simulation.force('link').links([]).links(filteredLinks)
+        simulation.force('link').links([]).links(links)
 
         simulationHelpers.simulationRestart()
       } catch (error) {
diff --git a/src/types/index.ts b/src/types/index.ts
index bf4941d8b..c25e1e4a5 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -143,6 +143,9 @@ export type NodeExtended = Node & {
   x?: number
   y?: number
   z?: number
+  fx?: number
+  fy?: number
+  fz?: number
   start?: number
   end?: number
   longitude?: number

From 23f5bf6ae3d04bdfffd6e225f099d74d4a519667 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?=
 <rasul.sahibjanli@gmail.com>
Date: Tue, 10 Dec 2024 13:54:45 +0300
Subject: [PATCH 2/2] feat: fix build

---
 .../Universe/Graph/Cubes/SelectionDataNodes/index.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx
index e392edd48..bac65beb7 100644
--- a/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx
+++ b/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx
@@ -118,7 +118,7 @@ export const SelectionDataNodes = memo(() => {
       <group ref={groupRef} name="simulation-2d-group">
         {selectionGraphData?.nodes.map((node) => (
           <mesh key={node.ref_id}>
-            <TextNode key={node.ref_id || node.id} hide ignoreDistance node={node} />
+            <TextNode key={node.ref_id || node.id} color="white" hide ignoreDistance node={node} />
           </mesh>
         ))}
       </group>