diff --git a/src/components/AppContainer/index.tsx b/src/components/AppContainer/index.tsx
index c9f8ea3d9..d6004c2da 100644
--- a/src/components/AppContainer/index.tsx
+++ b/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 =
- const MindSet =
-
- const path = window.location?.hostname === 'graphmindset.sphinx.chat' ? '/' : '/mindset'
+ const isMindSetHost =
+ window.location?.hostname === 'graphmindset.sphinx.chat' || window.location.hostname === 'localhost'
return (
Loading...}>
-
- {App}} path="/" />
- {App}} path="/search" />
- {App}} path="*" />
+ {isMindSetHost && } path="/" />}
+
+
+
+ }
+ path="/"
+ />
+
+
+
+ }
+ path="/search"
+ />
+
+
+
+ }
+ path="*"
+ />
diff --git a/src/components/Universe/Graph/Connections/LineComponent.tsx b/src/components/Universe/Graph/Connections/LineComponent.tsx
index a26270268..719e997d9 100644
--- a/src/components/Universe/Graph/Connections/LineComponent.tsx
+++ b/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(({ isSelected, position }, ref) => {
+const _LineComponent = ({ isSelected, position }: LineComponentProps) => {
+ const lineRef = useRef(null)
+
useEffect(() => {
- if (ref && (ref as React.MutableRefObject).current) {
- const line = (ref as React.MutableRefObject).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 (
)
-})
+}
_LineComponent.displayName = 'LineComponent'
diff --git a/src/components/Universe/Graph/Connections/index.tsx b/src/components/Universe/Graph/Connections/index.tsx
index a0553e3f6..5c80ff828 100644
--- a/src/components/Universe/Graph/Connections/index.tsx
+++ b/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
}
-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())
-
- 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 (
@@ -64,20 +28,7 @@ export const Connections = memo(({ linksPosition }: Props) => {
tz: 0,
}
- return (
- {
- if (el) {
- lineRefs.current.set(l.ref_id, el as Line2)
- } else {
- lineRefs.current.delete(l.ref_id)
- }
- }}
- isSelected={isSelected}
- position={position}
- />
- )
+ return
})}
)
diff --git a/src/components/Universe/Graph/Cubes/Text/hooks/useTexture/index.ts b/src/components/Universe/Graph/Cubes/Text/hooks/useTexture/index.ts
index 896732e3d..26dfffe87 100644
--- a/src/components/Universe/Graph/Cubes/Text/hooks/useTexture/index.ts
+++ b/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 = {}
+const cachedMaterials: Record = {}
export const useTexture = (url: string) => {
- const [texture, setTexture] = useState(null)
+ const [texture, setTexture] = useState(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],
)
diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx
index 31518e065..ce5743a77 100644
--- a/src/components/Universe/Graph/Cubes/Text/index.tsx
+++ b/src/components/Universe/Graph/Cubes/Text/index.tsx
@@ -166,7 +166,7 @@ export const TextNode = memo(({ node, hide, ignoreDistance }: Props) => {
- {node.properties?.image_url && ['Person', 'Episode'].includes(node.node_type) && texture ? (
+ {node.properties?.image_url && ['Person', 'Episode', 'Guest', 'Host'].includes(node.node_type) && texture ? (
{
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)