Merge pull request #2468 from stakwork/feature/graph-mindset

Feature/graph mindset

src/components/AddItemModal/index.tsx

@@ -145,7 +145,7 @@ export const AddItemModal = () => {
       },
     }
 
-    addNewNode({ nodes: [node], links: [] })
+    addNewNode({ nodes: [node], edges: [] })
 
     setSelectedNode(node)
   }

src/components/App/index.tsx

@@ -161,10 +161,14 @@ export const App = () => {
 
       timerRef.current = setTimeout(() => {
         // Combine all queued data into a single update
-        const batchedData = { ...queueRef.current }
+        if (queueRef.current) {
+          const { nodes: newNodes, edges: newEdges } = queueRef.current
+          const batchedData = { nodes: newNodes, edges: newEdges }
 
-        queueRef.current = { nodes: [], edges: [] } // Reset the queue
-        addNewNode(batchedData) // Call the original addNewNode function with batched data
+          queueRef.current = { nodes: [], edges: [] }
+
+          addNewNode(batchedData)
+        }
       }, 3000) // Adjust delay as necessary
     },
     [addNewNode, isFetching],
@@ -293,8 +297,6 @@ export const App = () => {
     }
 
     ws.onmessage = (event) => {
-      console.log('Message from server:', event.data)
-
       const data = JSON.parse(event.data)
 
       if (data.type === 'ping') {
@@ -313,10 +315,6 @@ export const App = () => {
     ws.onerror = (error) => {
       console.error('WebSocket error:', error)
     }
-
-    ws.onclose = () => {
-      console.log('WebSocket connection closed')
-    }
   }, [runningProjectId, setRunningProjectMessages])
 
   useEffect(() => {

src/components/AppContainer/index.tsx

@@ -5,20 +5,23 @@ import { AppProviders } from '../App/Providers'
 import { AuthGuard } from '../Auth'
 
 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'
 
   return (
     <AppProviders>
       <Suspense fallback={<div>Loading...</div>}>
-        <AuthGuard>
-          <Routes>
-            <Route element={App} path="/" />
-            <Route element={App} path="/search" />
-            <Route element={App} path="*" />
-          </Routes>
-        </AuthGuard>
+        <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="*" />
+        </Routes>
       </Suspense>
       <E2ETests />
     </AppProviders>

src/components/Auth/index.tsx

@@ -113,7 +113,7 @@ export const AuthGuard = ({ children }: PropsWithChildren) => {
 
           await handleAuth()
         } catch (error) {
-          console.log(error)
+          console.error(error)
         }
       }
 

src/components/ModalsContainer/AddNodeEdgeModal/Body/index.tsx

@@ -76,11 +76,6 @@ export const Body = () => {
           : { to: nodeFrom.ref_id, from: selectedToNode?.ref_id }),
       })
 
-      const { ref_id: id } = nodeFrom
-      const { ref_id: selectedId } = selectedToNode
-
-      console.log(id, selectedId)
-
       closeHandler()
     } catch (error) {
       console.warn(error)

src/components/ModalsContainer/CreateBountyModal/CreateBounty/index.tsx

@@ -52,7 +52,7 @@ export const CreateBounty: FC<Props> = ({ errMessage, handleClose }) => {
           setOptions(newOptions)
         }
       } catch (error) {
-        console.log('Error from get user details: ', error)
+        console.error('Error from get user details: ', error)
       }
     }
 

src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Skeleton } from '@mui/material'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
@@ -61,7 +61,7 @@ export const Body = () => {
 
         setActualTopicNode(node)
       } catch (error) {
-        console.log(error)
+        console.error(error)
       } finally {
         setTopicIsLoading(false)
       }

src/components/ModalsContainer/RemoveNodeModal/Body/index.tsx

@@ -53,7 +53,7 @@ export const Body = () => {
           setActualNode(selectedNode)
         }
       } catch (error) {
-        console.log(error)
+        console.error(error)
       } finally {
         setTopicIsLoading(false)
       }

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 isHovered={false} node={node} />
+            <TextNode key={node.ref_id || node.id} hide ignoreDistance node={node} />
           </mesh>
         ))}
       </group>

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

@@ -1,10 +1,10 @@
 import { Billboard, Plane, Svg, Text } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
-import { memo, useMemo, useRef } from 'react'
+import { memo, useRef } from 'react'
 import { Mesh, MeshBasicMaterial, Vector3 } from 'three'
 import { Icons } from '~/components/Icons'
 import { useNodeTypes } from '~/stores/useDataStore'
-import { useGraphStore, useSelectedNode, useSelectedNodeRelativeIds } from '~/stores/useGraphStore'
+import { useGraphStore } from '~/stores/useGraphStore'
 import { useSchemaStore } from '~/stores/useSchemaStore'
 import { NodeExtended } from '~/types'
 import { colors } from '~/utils/colors'
@@ -46,7 +46,6 @@ const COLORS_MAP = [
 type Props = {
   node: NodeExtended
   hide?: boolean
-  isHovered: boolean
   ignoreDistance: boolean
 }
 
@@ -68,23 +67,20 @@ function splitStringIntoThreeParts(text: string): string {
   return `${firstPart}\n${secondPart}\n${thirdPart}`
 }
 
-export const TextNode = memo(({ node, hide, isHovered, ignoreDistance }: Props) => {
+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 selectedNode = useSelectedNode()
 
   const nodePositionRef = useRef(new Vector3())
 
   const { texture } = useTexture(node.properties?.image_url || '')
 
-  const selectedNodeRelativeIds = useSelectedNodeRelativeIds()
-  const isRelative = selectedNodeRelativeIds.includes(node?.ref_id || '')
-  const isSelected = !!selectedNode && selectedNode?.ref_id === node.ref_id
-  const showSelectionGraph = useGraphStore((s) => s.showSelectionGraph)
   const { normalizedSchemasByType } = useSchemaStore((s) => s)
 
   useFrame(({ camera, clock }) => {
+    const { selectedNode, hoveredNode, activeEdge } = useGraphStore.getState()
+
     const checkDistance = () => {
       const nodePosition = nodePositionRef.current.setFromMatrixPosition(ringRef.current!.matrixWorld)
 
@@ -95,55 +91,36 @@ export const TextNode = memo(({ node, hide, isHovered, ignoreDistance }: Props)
       // Set visibility based on distance
     }
 
-    if (isHovered) {
+    const isActive =
+      node.ref_id === selectedNode?.ref_id ||
+      node.ref_id === hoveredNode?.ref_id ||
+      activeEdge?.target === node.ref_id ||
+      activeEdge?.source === node.ref_id
+
+    if (isActive) {
       if (ringRef.current) {
         ringRef.current.visible = true
       }
 
-      const scale = 1 + 0.2 * Math.sin(clock.getElapsedTime() * 2) // Adjust frequency and amplitude
+      const scale = 3 + 0.2 * Math.sin(clock.getElapsedTime() * 2) // Adjust frequency and amplitude
 
       if (circleRef.current) {
+        circleRef.current.visible = true
         circleRef.current.scale.set(scale, scale, scale)
       }
 
       return
     }
 
+    if (circleRef.current) {
+      circleRef.current.visible = false
+    }
+
     checkDistance()
   })
 
   const nodeTypes = useNodeTypes()
 
-  const textScale = useMemo(() => {
-    if (!node.name) {
-      return 0
-    }
-
-    let scale = (node.edge_count || 1) * 20
-
-    if (showSelectionGraph && isSelected) {
-      scale = 40
-    } else if (!isSelected && isRelative) {
-      scale = 0
-    }
-
-    const nodeScale = scale / Math.sqrt(node.name.length)
-
-    return Math.min(Math.max(nodeScale, 20), 30)
-  }, [node.edge_count, node.name, isSelected, isRelative, showSelectionGraph])
-
-  const fillOpacity = useMemo(() => {
-    if (selectedNode && !isSelected) {
-      return 0.2
-    }
-
-    if (!isHovered) {
-      return 0.2
-    }
-
-    return 1
-  }, [isSelected, selectedNode, isHovered])
-
   const primaryColor = normalizedSchemasByType[node.node_type]?.primary_color
   const primaryIcon = normalizedSchemasByType[node.node_type]?.icon
 
@@ -161,12 +138,11 @@ export const TextNode = memo(({ node, hide, isHovered, ignoreDistance }: Props)
   return (
     <Billboard follow lockX={false} lockY={false} lockZ={false} name="billboard" userData={node}>
       <mesh ref={ringRef} name={node.id} userData={node} visible={!hide}>
-        {isHovered ? (
-          <mesh ref={circleRef} position={[0, 0, -2]}>
-            <circleGeometry args={[30, 32]} />
-            <meshBasicMaterial color={color} opacity={0.5} transparent />
-          </mesh>
-        ) : null}
+        <mesh ref={circleRef} position={[0, 0, -2]} visible={false}>
+          <circleGeometry args={[30, 32]} />
+          <meshBasicMaterial color={color} opacity={0.5} transparent />
+        </mesh>
+
         {node.properties?.image_url && node.node_type === 'Person' && texture ? (
           <Plane args={[10 * 2, 10 * 2]} scale={2}>
             <shaderMaterial
@@ -219,10 +195,10 @@ export const TextNode = memo(({ node, hide, isHovered, ignoreDistance }: Props)
         {node.name && (
           <Text
             color={color}
-            fillOpacity={1 || fillOpacity}
+            fillOpacity={1}
             name="text"
             position={[0, -65, 0]}
-            scale={textScale}
+            scale={20}
             userData={node}
             {...fontProps}
           >

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

@@ -117,13 +117,7 @@ export const Cubes = memo(() => {
             <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}
-                isHovered={!!hoveredNode && hoveredNode.ref_id === node.ref_id}
-                node={node}
-              />
+              <TextNode key={node.ref_id || node.id} hide={hideUniverse || hide} ignoreDistance={false} node={node} />
             </mesh>
           )
         })}

src/components/Universe/Graph/UI/NodeControls/index.tsx

@@ -56,7 +56,7 @@ export const NodeControls = memo(() => {
         }
       }
     } catch (error) {
-      console.log(error)
+      console.error(error)
     }
   }, [addNewNode, selectedNode?.ref_id, selectionGraphData.nodes.length])
 

src/components/mindset/components/Header/index.tsx

@@ -0,0 +1,61 @@
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { colors } from '~/utils/colors'
+import { Logo } from '../Icon/Logo'
+
+export const Header = () => (
+  <Head>
+    <LogoButton>
+      <IconWrapper>
+        <Logo />
+      </IconWrapper>
+    </LogoButton>
+    <StyledText>Graph Mindset</StyledText>
+  </Head>
+)
+
+const Head = styled(Flex).attrs({
+  align: 'center',
+  direction: 'row',
+  grow: 1,
+  justify: 'flex-start',
+})`
+  height: 64px;
+  padding: 20px 23px;
+  gap: 0px;
+  z-index: 50;
+  position: relative;
+`
+
+const LogoButton = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 30px;
+    height: 27px;
+    color: ${colors.white};
+  }
+`
+
+const StyledText = styled(Text)`
+  width: 127px;
+  height: 24px;
+  color: ${colors.white};
+  font-family: Barlow;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0.22px;
+  margin-left: 16px;
+  white-space: nowrap;
+`

src/components/mindset/components/Icon/ChevronRight.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react'
+
+export const ChevronRight: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 7 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4.77978 6.00243L0.706705 1.92933C0.568239 1.79088 0.497405 1.61684 0.494205 1.40723C0.490989 1.19763 0.561822 1.02039 0.706705 0.875528C0.851572 0.730645 1.02721 0.658203 1.23361 0.658203C1.44001 0.658203 1.61564 0.730645 1.7605 0.875528L6.25473 5.36975C6.34833 5.46334 6.41436 5.56205 6.45281 5.6659C6.49127 5.76974 6.51051 5.88191 6.51051 6.00243C6.51051 6.12294 6.49127 6.23512 6.45281 6.33895C6.41436 6.4428 6.34833 6.54152 6.25473 6.6351L1.7605 11.1293C1.62205 11.2678 1.44802 11.3386 1.2384 11.3418C1.0288 11.345 0.851572 11.2742 0.706705 11.1293C0.561822 10.9845 0.48938 10.8088 0.48938 10.6024C0.48938 10.396 0.561822 10.2204 0.706705 10.0755L4.77978 6.00243Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default ChevronRight