Merge pull request #2509 from stakwork/feat/graph-links

feat: added link

src/components/App/ActionsToolbar/GraphViewControl/index.tsx

@@ -31,15 +31,15 @@ export const GraphViewControl = () => {
     setGraphStyle(val)
   }
 
-  return (
+  return false ? (
     <Wrapper direction="column">
       {graphStyles.map((i) => (
         <Flex key={i} className={clsx('icon', { active: graphStyle === i })} onClick={() => changeGraphType(i)}>
           {IconsMapper[i]}
         </Flex>
       ))}
     </Wrapper>
-  )
+  ) : null
 }
 
 const Wrapper = styled(Flex).attrs({

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

@@ -1,4 +1,4 @@
-import { Line } from '@react-three/drei'
+import { Billboard, Line, Text } from '@react-three/drei'
 import gsap from 'gsap'
 import { memo, useEffect, useRef } from 'react'
 import { Vector3 } from 'three'
@@ -9,10 +9,11 @@ import { LINE_WIDTH } from '../../constants'
 type LineComponentProps = {
   isSelected: boolean
   position: LinkPosition
+  label: string
 }
 
 // eslint-disable-next-line no-underscore-dangle
-const _LineComponent = ({ isSelected, position }: LineComponentProps) => {
+const _LineComponent = ({ isSelected, position, label }: LineComponentProps) => {
   const lineRef = useRef<Line2 | null>(null)
 
   useEffect(() => {
@@ -31,12 +32,23 @@ const _LineComponent = ({ isSelected, position }: LineComponentProps) => {
   }, [isSelected, lineRef])
 
   return (
-    <Line
-      ref={lineRef}
-      isLine2
-      opacity={0.5}
-      points={[new Vector3(position.sx, position.sy, position.sz), new Vector3(position.tx, position.ty, position.tz)]}
-    />
+    <group>
+      <Line
+        ref={lineRef}
+        isLine2
+        name="line"
+        opacity={0.5}
+        points={[
+          new Vector3(position.sx, position.sy, position.sz),
+          new Vector3(position.tx, position.ty, position.tz),
+        ]}
+      />
+      <Billboard>
+        <Text anchorX="center" anchorY="middle" color="white" fontSize={10}>
+          {label}
+        </Text>
+      </Billboard>
+    </group>
   )
 }
 

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

@@ -28,7 +28,7 @@ export const Connections = memo(({ linksPosition }: Props) => {
           tz: 0,
         }
 
-        return <LineComponent key={l.ref_id} isSelected={isSelected} position={position} />
+        return <LineComponent key={l.ref_id} isSelected={isSelected} label={l.edge_type} position={position} />
       })}
     </group>
   )

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

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

src/components/Universe/Graph/index.tsx

@@ -120,35 +120,55 @@ export const Graph = () => {
         if (grConnections) {
           linksPositionRef.current.clear()
 
-          grConnections.children.forEach((r, i) => {
-            const link = dataInitial?.links[i]
-            const Line = r as Line2
+          grConnections.children.forEach((g, i) => {
+            const r = g.children[0] // Assuming Line is the first child
+            const text = g.children[1] // Assuming Text is the second child
 
-            if (link) {
-              const sourceNode = simulation.nodes().find((n: NodeExtended) => n.ref_id === link.source)
-              const targetNode = simulation.nodes().find((n: NodeExtended) => n.ref_id === link.target)
+            if (r instanceof Line2) {
+              // Ensure you have both Line and Text
+              const Line = r as Line2
+              const link = dataInitial?.links[i]
 
-              const { x: sx, y: sy, z: sz } = sourceNode
-              const { x: tx, y: ty, z: tz } = targetNode
+              if (link) {
+                const sourceNode = simulation.nodes().find((n: NodeExtended) => n.ref_id === link.source)
+                const targetNode = simulation.nodes().find((n: NodeExtended) => n.ref_id === link.target)
 
-              linksPositionRef.current.set(link.ref_id, {
-                sx,
-                sy,
-                sz,
-                tx,
-                ty,
-                tz,
-              })
+                if (!sourceNode || !targetNode) {
+                  console.warn(`Missing source or target node for link: ${link?.ref_id}`)
 
-              const lineColor = normalizedSchemasByType[sourceNode.node_type]?.primary_color || 'white'
+                  return
+                }
 
-              Line.geometry.setPositions([sx, sy, sz, tx, ty, tz])
+                const { x: sx, y: sy, z: sz } = sourceNode
+                const { x: tx, y: ty, z: tz } = targetNode
 
-              const { material } = Line
+                // Set positions for the link
+                linksPositionRef.current.set(link.ref_id, {
+                  sx,
+                  sy,
+                  sz,
+                  tx,
+                  ty,
+                  tz,
+                })
 
-              material.color = new Color(lineColor)
-              material.transparent = true
-              material.opacity = 0.3
+                // Calculate midpoint for the text position
+                const midPoint = new Vector3((sx + tx) / 2, (sy + ty) / 2, (sz + tz) / 2)
+
+                // Set text position and rotation
+                text.position.set(midPoint.x, midPoint.y, midPoint.z)
+
+                // Set line color and properties
+                const lineColor = normalizedSchemasByType[sourceNode.node_type]?.primary_color || 'white'
+
+                Line.geometry.setPositions([sx, sy, sz, tx, ty, tz])
+
+                const { material } = Line
+
+                material.color = new Color(lineColor)
+                material.transparent = true
+                material.opacity = 0.3
+              }
             }
           })
         }
@@ -166,7 +186,7 @@ export const Graph = () => {
 
       const sphereRadius = boundingSphere.radius
 
-      setGraphRadius(sphereRadius)
+      setGraphRadius(sphereRadius * 1.5)
 
       cameraSettled.current = false
     })

src/components/Universe/Overlay/index.tsx

@@ -59,6 +59,7 @@ const OverlayWrap = styled('div')(({ theme }) => ({
   height: '100%',
   width: '100%',
   padding: '16px',
+  paddingRight: '0',
   overflow: 'hidden',
   [theme.breakpoints.down('sm')]: {
     top: 50,

src/components/common/Avatar/index.tsx

@@ -2,6 +2,8 @@ import styled from 'styled-components'
 
 type Props = {
   size?: number
+  height?: number
+  width?: number
   src: string
   type: string
   rounded?: boolean
@@ -30,7 +32,7 @@ export const Avatar = styled.div<Props>`
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  width: ${({ size = 45 }) => size}px;
-  height: ${({ size = 45 }) => size}px;
+  width: ${({ size = 45, width }) => width || size}px;
+  height: ${({ size = 45, height }) => height || size}px;
   border-radius: ${({ rounded }) => (rounded ? '50%' : '2px')};
 `

src/components/common/GraphViewControl/index.tsx

@@ -31,15 +31,15 @@ export const GraphViewControl = () => {
     setGraphStyle(val)
   }
 
-  return (
+  return false ? (
     <Wrapper direction="column">
       {graphStyles.map((i) => (
         <Flex key={i} className={clsx('icon', { active: graphStyle === i })} onClick={() => changeGraphType(i)}>
           {IconsMapper[i]}
         </Flex>
       ))}
     </Wrapper>
-  )
+  ) : null
 }
 
 const Wrapper = styled(Flex).attrs({

src/components/mindset/components/Sidebar/Transcript/index.tsx

@@ -8,7 +8,11 @@ import { NodeExtended } from '~/types'
 import { colors } from '~/utils'
 import { Viewer } from './Viewer'
 
-export const Transcript = () => {
+type Props = {
+  name: string
+}
+
+export const Transcript = ({ name }: Props) => {
   const { selectedEpisodeId } = useMindsetStore((s) => s)
   const { playerRef } = usePlayerStore((s) => s)
   const [currentTime, setCurrentTime] = useState(0)
@@ -47,7 +51,7 @@ export const Transcript = () => {
 
   return (
     <Wrapper>
-      <Flex className="heading">Transcript</Flex>
+      <Flex className="heading">{name}</Flex>
       {clips.map((clip) => {
         const timestamp: string | undefined = clip?.properties?.timestamp
 

src/components/mindset/components/Sidebar/index.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 import { MENU_WIDTH } from '~/components/App/SideBar'
 import { Flex } from '~/components/common/Flex'
-import { Text } from '~/components/common/Text'
 import { MediaPlayer } from '~/components/mindset/components/MediaPlayer'
 import { useMindsetStore } from '~/stores/useMindsetStore'
 import { Transcript } from './Transcript'
@@ -11,20 +10,16 @@ export const SideBar = () => {
 
   return (
     <Wrapper align="stretch" basis="100%" grow={1} shrink={1}>
-      <MediaWrapper>
-        {selectedEpisode?.name && <EpisodeTitle>{selectedEpisode?.name}</EpisodeTitle>}
-        {selectedEpisode?.properties?.text && <Summary>{selectedEpisode?.properties?.text}</Summary>}
-        {selectedEpisodeLink && <MediaPlayer mediaUrl={selectedEpisodeLink} />}
-      </MediaWrapper>
-      <Transcript />
+      <MediaWrapper>{selectedEpisodeLink && <MediaPlayer mediaUrl={selectedEpisodeLink} />}</MediaWrapper>
+      <Transcript name={selectedEpisode?.name || ''} />
     </Wrapper>
   )
 }
 
 const Wrapper = styled(Flex)(({ theme }) => ({
   position: 'relative',
   display: 'flex',
-  padding: '33px 20px 20px 20px',
+  padding: '0 20px 20px 20px',
   background: 'transparent',
   width: '100%',
 
@@ -33,24 +28,6 @@ const Wrapper = styled(Flex)(({ theme }) => ({
   },
 }))
 
-const Summary = styled(Text)`
-  font-size: 20px;
-  font-weight: Bold;
-  line-height: 24.2px;
-  overflow-wrap: break-word;
-  white-space: normal;
-  word-break: break-word;
-  margin-right: 10px;
-  font-weight: 500;
-`
-
-const EpisodeTitle = styled(Text)`
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 16.94px;
-  margin-bottom: 12px;
-`
-
 const MediaWrapper = styled(Flex)(({ theme }) => ({
   width: '100%',
   margin: '0 auto 16px',

src/components/mindset/components/VideoCard/index.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { Avatar } from '~/components/common/Avatar'
 import { Flex } from '~/components/common/Flex'
 import { colors } from '~/utils/colors'
 
@@ -16,7 +17,7 @@ export const VideoCard = ({ imageUrl, title, subtitle, onClick }: VideoCardProps
   return (
     <CardWrapper onClick={onClick}>
       <ImageWrapper>
-        <CardImage alt={title} src={imageUrl} />
+        <Avatar height={140} src={imageUrl} type="Episode" width={170} />
       </ImageWrapper>
       <TextWrapper>
         <CardTitle>{truncatedTitle}</CardTitle>
@@ -56,12 +57,6 @@ const ImageWrapper = styled.div`
   align-items: center;
 `
 
-const CardImage = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`
-
 const TextWrapper = styled(Flex)`
   flex-direction: column;
   justify-content: flex-start;

src/stores/useDataStore/index.ts

@@ -21,8 +21,6 @@ const deduplicateByRefId = (items: Array<NodeExtended | Link>) => {
 
 export type GraphStyle = 'sphere' | 'force' | 'split' | 'earth'
 
-export const graphStyles: GraphStyle[] = ['sphere', 'force', 'split', 'earth']
-
 export type FetchNodeParams = {
   word?: string
   skip_cache?: string

src/stores/useGraphStore/index.ts

@@ -123,7 +123,7 @@ const defaultData: Omit<
   disableCameraRotation: false,
   scrollEventsDisabled: false,
   graphRadius: 1500, // calculated from initial load
-  graphStyle: (localStorage.getItem('graphStyle') as GraphStyle) || 'sphere',
+  graphStyle: 'sphere',
   hoveredNode: null,
   selectedNode: null,
   activeEdge: null,
@@ -144,7 +144,7 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
   setDisableCameraRotation: (rotation) => set({ disableCameraRotation: rotation }),
   setIsHovering: (isHovering) => set({ isHovering }),
   setGraphRadius: (graphRadius) => set({ graphRadius }),
-  setGraphStyle: (graphStyle) => set({ graphStyle }),
+  setGraphStyle: (graphStyle) => set({ graphStyle: 'sphere' || graphStyle }),
   setHoveredNode: (hoveredNode) => {
     set({ hoveredNode })
   },

src/stores/useSchemaStore/index.ts

@@ -52,7 +52,7 @@ export const useSchemaStore = create<SchemasStore>()(
     getNodeKeysByType: (type: string) => {
       const schema = get().normalizedSchemasByType[type]
 
-      return schema ? schema.node_key : undefined
+      return schema ? schema.index || schema.node_key : undefined
     },
     getSchemaByType: (type: string) => get().normalizedSchemasByType[type],
   })),