Merge pull request #2506 from stakwork/feature/mindset-v3-layout

feat: updated links

src/components/AppContainer/index.tsx

@@ -4,23 +4,43 @@ import { E2ETests } from '~/utils'
 import { AppProviders } from '../App/Providers'
 import { AuthGuard } from '../Auth'
 
+// Lazy-loaded components
 const LazyApp = lazy(() => import('../App').then(({ App }) => ({ default: App })))
 const LazyMindSet = lazy(() => import('../mindset').then(({ MindSet }) => ({ default: MindSet })))
 
 export const AppContainer = () => {
-  const App = <LazyApp />
-  const MindSet = <LazyMindSet />
-
-  const path = window.location?.hostname === 'graphmindset.sphinx.chat' ? '/' : '/mindset'
+  const isMindSetHost =
+    window.location?.hostname === 'graphmindset.sphinx.chat' || window.location.hostname === 'localhost'
 
   return (
     <AppProviders>
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
-          <Route element={MindSet} path={path} />
-          <Route element={<AuthGuard>{App}</AuthGuard>} path="/" />
-          <Route element={<AuthGuard>{App}</AuthGuard>} path="/search" />
-          <Route element={<AuthGuard>{App}</AuthGuard>} path="*" />
+          {isMindSetHost && <Route element={<LazyMindSet />} path="/" />}
+          <Route
+            element={
+              <AuthGuard>
+                <LazyApp />
+              </AuthGuard>
+            }
+            path="/"
+          />
+          <Route
+            element={
+              <AuthGuard>
+                <LazyApp />
+              </AuthGuard>
+            }
+            path="/search"
+          />
+          <Route
+            element={
+              <AuthGuard>
+                <LazyApp />
+              </AuthGuard>
+            }
+            path="*"
+          />
         </Routes>
       </Suspense>
       <E2ETests />

src/components/Universe/Graph/Connections/LineComponent.tsx

@@ -1,6 +1,6 @@
 import { Line } from '@react-three/drei'
 import gsap from 'gsap'
-import { forwardRef, memo, useEffect } from 'react'
+import { memo, useEffect, useRef } from 'react'
 import { Vector3 } from 'three'
 import { Line2 } from 'three-stdlib'
 import { LinkPosition } from '..'
@@ -12,31 +12,33 @@ type LineComponentProps = {
 }
 
 // eslint-disable-next-line no-underscore-dangle
-const _LineComponent = forwardRef<Line2, LineComponentProps>(({ isSelected, position }, ref) => {
+const _LineComponent = ({ isSelected, position }: LineComponentProps) => {
+  const lineRef = useRef<Line2 | null>(null)
+
   useEffect(() => {
-    if (ref && (ref as React.MutableRefObject<Line2 | null>).current) {
-      const line = (ref as React.MutableRefObject<Line2>).current
+    if (lineRef.current) {
+      const line = lineRef.current
 
       gsap.fromTo(
         line.material,
-        { linewidth: LINE_WIDTH * 5 },
+        { linewidth: LINE_WIDTH * 15 },
         {
           linewidth: LINE_WIDTH,
           duration: 1,
         },
       )
     }
-  }, [isSelected, ref])
+  }, [isSelected, lineRef])
 
   return (
     <Line
-      ref={ref}
+      ref={lineRef}
       isLine2
       opacity={0.5}
       points={[new Vector3(position.sx, position.sy, position.sz), new Vector3(position.tx, position.ty, position.tz)]}
     />
   )
-})
+}
 
 _LineComponent.displayName = 'LineComponent'
 

src/components/Universe/Graph/Connections/index.tsx

@@ -1,54 +1,18 @@
-import gsap from 'gsap'
-import { memo, useEffect, useRef } from 'react'
-import { Line2 } from 'three-stdlib'
+import { memo } from 'react'
 import { useDataStore } from '~/stores/useDataStore'
-import { useGraphStore, useHoveredNode, useSelectedNode } from '~/stores/useGraphStore'
+import { useGraphStore, useSelectedNode } from '~/stores/useGraphStore'
 import { Link } from '~/types'
 import { LinkPosition } from '..'
-import { LINE_WIDTH } from '../../constants'
 import { LineComponent } from './LineComponent'
 
 type Props = {
   linksPosition: Map<string, LinkPosition>
 }
 
-const LINE_TRANSFORM_DURATION = 0.5
-
 export const Connections = memo(({ linksPosition }: Props) => {
   const data = useDataStore((s) => s.dataInitial)
   const { showSelectionGraph } = useGraphStore((s) => s)
   const selectedNode = useSelectedNode()
-  const hoveredNode = useHoveredNode()
-  const lineRefs = useRef(new Map<string, Line2 | null>())
-
-  useEffect(() => {
-    const activeNode = hoveredNode || selectedNode
-
-    if (!activeNode) {
-      lineRefs.current.forEach((line) => {
-        if (line) {
-          gsap.to(line.material, {
-            linewidth: LINE_WIDTH,
-            duration: LINE_TRANSFORM_DURATION,
-          })
-        }
-      })
-
-      return
-    }
-
-    lineRefs.current.forEach((line, refId) => {
-      if (line) {
-        const link = data?.links.find((l) => l.ref_id === refId)
-        const isActive = link && (link.source === activeNode.ref_id || link.target === activeNode.ref_id)
-
-        gsap.to(line.material, {
-          linewidth: isActive ? LINE_WIDTH * 2 : 0,
-          duration: LINE_TRANSFORM_DURATION,
-        })
-      }
-    })
-  }, [data?.links, hoveredNode, selectedNode])
 
   return (
     <group name="simulation-3d-group__connections" visible={!showSelectionGraph || true}>
@@ -64,20 +28,7 @@ export const Connections = memo(({ linksPosition }: Props) => {
           tz: 0,
         }
 
-        return (
-          <LineComponent
-            key={l.ref_id}
-            ref={(el) => {
-              if (el) {
-                lineRefs.current.set(l.ref_id, el as Line2)
-              } else {
-                lineRefs.current.delete(l.ref_id)
-              }
-            }}
-            isSelected={isSelected}
-            position={position}
-          />
-        )
+        return <LineComponent key={l.ref_id} isSelected={isSelected} position={position} />
       })}
     </group>
   )

src/components/Universe/Graph/Cubes/Text/hooks/useTexture/index.ts

@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react'
-import { Texture } from 'three'
+import * as THREE from 'three' // Use * as THREE for consistency
 import { loader } from './constants'
 
-type materialRecord = {
+type MaterialRecord = {
   texture: THREE.Texture
   material: THREE.MeshStandardMaterial
 }
 
-const cachedMaterials: Record<string, materialRecord> = {}
+const cachedMaterials: Record<string, MaterialRecord> = {}
 
 export const useTexture = (url: string) => {
-  const [texture, setTexture] = useState<Texture | null>(null)
+  const [texture, setTexture] = useState<THREE.Texture | null>(null)
 
   useEffect(() => {
     if (!url) {
@@ -19,33 +19,44 @@ export const useTexture = (url: string) => {
       return
     }
 
-    const cashPath = url
+    const cachePath = url
 
-    if (cachedMaterials[cashPath]) {
-      setTexture(cachedMaterials[cashPath].texture)
+    // Check if texture is already cached
+    if (cachedMaterials[cachePath]?.texture) {
+      setTexture(cachedMaterials[cachePath].texture)
 
       return
     }
 
+    // Load texture and cache it
     loader.load(
       url,
       (loadedTexture) => {
+        cachedMaterials[cachePath] = {
+          texture: loadedTexture,
+          material: new THREE.MeshStandardMaterial({ map: loadedTexture }),
+        }
+
         setTexture(loadedTexture)
       },
       undefined,
       () => {
-        setTexture(null)
+        setTexture(null) // Handle loading error
       },
     )
   }, [url])
 
   useEffect(
-    () =>
-      function cleanup() {
-        if (texture) {
+    () => () => {
+      if (texture) {
+        // Avoid disposing of cached textures
+        const isCached = Object.values(cachedMaterials).some((entry) => entry.texture === texture)
+
+        if (!isCached) {
           texture.dispose()
         }
-      },
+      }
+    },
     [texture],
   )
 

src/components/Universe/Graph/Cubes/Text/index.tsx

@@ -166,7 +166,7 @@ export const TextNode = memo(({ node, hide, ignoreDistance }: Props) => {
           <meshBasicMaterial color={color} opacity={0.5} transparent />
         </mesh>
 
-        {node.properties?.image_url && ['Person', 'Episode'].includes(node.node_type) && texture ? (
+        {node.properties?.image_url && ['Person', 'Episode', 'Guest', 'Host'].includes(node.node_type) && texture ? (
           <Plane args={[10 * 2, 10 * 2]} scale={2}>
             <shaderMaterial
               fragmentShader={`

src/components/Universe/constants.ts

@@ -3,7 +3,7 @@ import { Guests, NodeExtended } from '~/types'
 
 export const variableVector3 = new Vector3(0, 0, 0)
 
-export const LINE_WIDTH = 0.5
+export const LINE_WIDTH = 1
 
 export const outlineEffectColor = 0xffffff
 

src/components/mindset/index.tsx

@@ -80,7 +80,7 @@ export const MindSet = () => {
 
         const [episodesAndClips, remainingNodes] = (data?.nodes || []).reduce<[Node[], Node[]]>(
           ([matches, remaining], node) => {
-            if (['Episode', 'Show'].includes(node.node_type)) {
+            if (['Episode', 'Show', 'Host', 'Guest'].includes(node.node_type)) {
               matches.push(node)
             } else {
               remaining.push(node)