Merge pull request #2565 from stakwork/feature/selection-graph

feat: update selection view

src/components/Universe/Controls/CameraAnimations/constants.ts

@@ -9,7 +9,7 @@ export const topicArriveDistance = 600
 export const selectionGraphDistance = 2000
 
 export const selectionGraphCameraPosition = {
-  x: 172.7392402058252,
-  y: -239.04675366094037,
-  z: -2000,
+  x: 0,
+  y: 0,
+  z: 200,
 }

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

@@ -2,24 +2,28 @@ 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'
 
 type LineComponentProps = {
-  isSelected: boolean
-  position: LinkPosition
   label: string
   target: string
   source: string
+  sourceX: number
+  sourceY: number
+  sourceZ: number
+  targetX: number
+  targetY: number
+  targetZ: number
 }
 
 // eslint-disable-next-line no-underscore-dangle
-const _LineComponent = ({ isSelected, position, label, target, source }: LineComponentProps) => {
+const _LineComponent = (props: LineComponentProps) => {
   const lineRef = useRef<Line2 | null>(null)
 
+  const { label, source, target, sourceX, sourceY, sourceZ, targetX, targetY, targetZ } = props
+
   useEffect(() => {
     if (lineRef.current) {
       const line = lineRef.current
@@ -33,7 +37,7 @@ const _LineComponent = ({ isSelected, position, label, target, source }: LineCom
         },
       )
     }
-  }, [isSelected, lineRef])
+  }, [lineRef])
 
   useFrame(() => {
     const { selectedNode, hoveredNode } = useGraphStore.getState()
@@ -69,16 +73,13 @@ const _LineComponent = ({ isSelected, position, label, target, source }: LineCom
       <Line
         ref={lineRef}
         isLine2
+        lineWidth={2}
         name="line"
-        opacity={0.5}
-        points={[
-          new Vector3(position.sx, position.sy, position.sz),
-          new Vector3(position.tx, position.ty, position.tz),
-        ]}
+        points={[sourceX, sourceY, sourceZ, targetX, targetY, targetZ]}
       />
       <Billboard>
         <Text anchorX="center" anchorY="middle" color="white" fontSize={10}>
-          {label}
+          {label}1
         </Text>
       </Billboard>
     </group>

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

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { useDataStore } from '~/stores/useDataStore'
-import { useGraphStore, useSelectedNode } from '~/stores/useGraphStore'
+import { useGraphStore } from '~/stores/useGraphStore'
 import { Link } from '~/types'
 import { LinkPosition } from '..'
 import { LineComponent } from './LineComponent'
@@ -12,13 +12,10 @@ type Props = {
 export const Connections = memo(({ linksPosition }: Props) => {
   const data = useDataStore((s) => s.dataInitial)
   const { showSelectionGraph } = useGraphStore((s) => s)
-  const selectedNode = useSelectedNode()
 
   return (
-    <group name="simulation-3d-group__connections" visible={!showSelectionGraph || true}>
+    <group name="simulation-3d-group__connections" visible={!showSelectionGraph}>
       {data?.links.map((l: Link) => {
-        const isSelected = selectedNode?.ref_id === l.source || selectedNode?.ref_id === l.target // Adjust to match link with its position
-
         const position = linksPosition.get(l.ref_id) || {
           sx: 0,
           sy: 0,
@@ -31,11 +28,15 @@ export const Connections = memo(({ linksPosition }: Props) => {
         return (
           <LineComponent
             key={l.ref_id}
-            isSelected={isSelected}
             label={l.edge_type}
-            position={position}
             source={l.source}
+            sourceX={position.sx}
+            sourceY={position.sy}
+            sourceZ={position.sz}
             target={l.target}
+            targetX={position.tx}
+            targetY={position.ty}
+            targetZ={position.tz}
           />
         )
       })}

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

@@ -52,7 +52,7 @@ const _NodePoints = () => {
         geometry={ringGeometry as BufferGeometry}
         limit={1000} // Optional: max amount of items (for calculating buffer size)
         range={1000}
-        visible={!selectedNode}
+        visible={!selectedNode || true}
       >
         <meshBasicMaterial />
         {data?.nodes.map((node: NodeExtended) => {

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

@@ -11,20 +11,25 @@ type Props = {
   color: string
   scale: number
   index: number
+  stopFrames: boolean
 }
 
 const offset = { x: 20, y: 20 }
 
 export const NodeWrapper = memo(
   (props: Props) => {
-    const { node, color, index } = props
+    const { node, color, index, stopFrames } = props
     const simulation = useGraphStore((s) => s.simulation)
 
     const finishedSimulationCircle = useRef<boolean>(false)
 
     const wrapperRef = useRef<Mesh | null>(null)
 
     useFrame(({ camera, size }) => {
+      if (stopFrames) {
+        return
+      }
+
       if (wrapperRef.current && simulation) {
         const simulationNode = simulation.nodes()[index]
 

src/components/Universe/Graph/Cubes/SelectionDataNodes/Connections/Connection/index.tsx

@@ -0,0 +1,42 @@
+import { Line, Text } from '@react-three/drei'
+import { memo, useRef } from 'react'
+import { Line2 } from 'three-stdlib'
+
+type LineComponentProps = {
+  label: string
+  sourceX: number
+  sourceY: number
+  sourceZ: number
+  targetX: number
+  targetY: number
+  targetZ: number
+}
+
+// eslint-disable-next-line no-underscore-dangle
+const _Connection = (props: LineComponentProps) => {
+  const lineRef = useRef<Line2 | null>(null)
+
+  const { label, sourceX, sourceY, sourceZ, targetX, targetY, targetZ } = props
+
+  return (
+    <group>
+      <Line
+        ref={lineRef}
+        color="blue"
+        isLine2
+        lineWidth={2}
+        name="line"
+        points={[sourceX, sourceY, sourceZ, targetX, targetY, targetZ]}
+      />
+      <mesh>
+        <Text anchorX="center" anchorY="middle" color="white" fontSize={10}>
+          {label}
+        </Text>
+      </mesh>
+    </group>
+  )
+}
+
+_Connection.displayName = 'Connection'
+
+export const Connection = memo(_Connection)

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

@@ -0,0 +1,43 @@
+import { memo } from 'react'
+import { useGraphStore } from '~/stores/useGraphStore'
+import { Link } from '~/types'
+import { LinkPosition } from '../../..'
+import { Connection } from './Connection'
+
+type Props = {
+  linksPosition: Map<string, LinkPosition>
+}
+
+export const Connections = memo(({ linksPosition }: Props) => {
+  const { selectionGraphData } = useGraphStore((s) => s)
+
+  return (
+    <group name="simulation-3d-group__connections">
+      {selectionGraphData?.links.map((l: Link) => {
+        const position = linksPosition.get(l.ref_id) || {
+          sx: 0,
+          sy: 0,
+          sz: 0,
+          tx: 0,
+          ty: 0,
+          tz: 0,
+        }
+
+        return (
+          <Connection
+            key={l.ref_id}
+            label={l.edge_type}
+            sourceX={position.sx}
+            sourceY={position.sy}
+            sourceZ={position.sz}
+            targetX={position.tx}
+            targetY={position.ty}
+            targetZ={position.tz}
+          />
+        )
+      })}
+    </group>
+  )
+})
+
+Connections.displayName = 'Connections'

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

@@ -0,0 +1,115 @@
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Icons } from '~/components/Icons'
+import CloseIcon from '~/components/Icons/CloseIcon'
+import NodesIcon from '~/components/Icons/NodesIcon'
+import { useGraphStore } from '~/stores/useGraphStore'
+import { useSchemaStore } from '~/stores/useSchemaStore'
+import { NodeExtended } from '~/types'
+import { colors } from '~/utils'
+import { truncateText } from '~/utils/truncateText'
+
+type TagProps = {
+  rounded: boolean
+}
+
+type Props = {
+  node: NodeExtended
+  rounded?: boolean
+  selected: boolean
+  onClick: () => void
+}
+
+export const Node = ({ onClick, node, selected, rounded = true }: Props) => {
+  const { normalizedSchemasByType, getNodeKeysByType } = useSchemaStore((s) => s)
+  const setSelectedNode = useGraphStore((s) => s.setSelectedNode)
+
+  const primaryIcon = normalizedSchemasByType[node.node_type]?.icon
+
+  const Icon = primaryIcon ? Icons[primaryIcon] : null
+  // const iconName = Icon ? primaryIcon : 'NodesIcon'
+  const keyProperty = getNodeKeysByType(node.node_type) || ''
+
+  const title = node?.properties ? node?.properties[keyProperty] : ''
+  const titleShortened = title ? truncateText(title, 30) : ''
+
+  return (
+    <Wrapper align="center" direction="row" justify="flex-start">
+      <>
+        {selected ? (
+          <Selected rounded={false}>
+            <IconButton onClick={() => setSelectedNode(null)}>
+              <CloseIcon />
+            </IconButton>
+            <div>{Icon ? <Icon /> : <NodesIcon />}</div>
+            <Text>{titleShortened}</Text>
+          </Selected>
+        ) : (
+          <>
+            <Tag onClick={onClick} rounded={rounded}>
+              <div>{Icon ? <Icon /> : <NodesIcon />}</div>
+            </Tag>
+            <Text>{titleShortened}</Text>
+          </>
+        )}
+      </>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled(Flex)``
+
+const Text = styled(Flex)`
+  color: ${colors.white};
+  margin-left: 16px;
+  font-weight: 700;
+`
+
+const Tag = styled(Flex)<TagProps>`
+  text-align: center;
+  width: 48px;
+  height: 48px;
+  outline: 1px solid ${colors.white};
+  outline-offset: 0px;
+  background: ${colors.BG1};
+  color: ${colors.white};
+  border-radius: ${(p: TagProps) => `${p.rounded ? '50%' : '6px'}`};
+  cursor: pointer;
+  transition: font-size 0.4s, outline 0.4s;
+  align-items: center;
+  justify-content: center;
+  font-family: Barlow;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+
+  &:hover {
+    outline-offset: 4px;
+  }
+`
+
+const Selected = styled(Tag)`
+  width: 300px;
+  height: 150px;
+`
+
+const IconButton = styled(Flex)`
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  width: 24px;
+  height: 24px;
+
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: black;
+  color: #ffffff;
+  border-radius: 100%;
+  font-size: 16px;
+  cursor: pointer;
+  transition: opacity 0.4s;
+  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
+`