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)