diff --git a/src/components/App/ActionsToolbar/GraphViewControl/index.tsx b/src/components/App/ActionsToolbar/GraphViewControl/index.tsx
index 6b0a5fe70..78f7025c3 100644
--- a/src/components/App/ActionsToolbar/GraphViewControl/index.tsx
+++ b/src/components/App/ActionsToolbar/GraphViewControl/index.tsx
@@ -31,7 +31,7 @@ export const GraphViewControl = () => {
setGraphStyle(val)
}
- return (
+ return false ? (
{graphStyles.map((i) => (
changeGraphType(i)}>
@@ -39,7 +39,7 @@ export const GraphViewControl = () => {
))}
- )
+ ) : null
}
const Wrapper = styled(Flex).attrs({
diff --git a/src/components/Universe/Graph/Connections/LineComponent.tsx b/src/components/Universe/Graph/Connections/LineComponent.tsx
index 719e997d9..25b0890ac 100644
--- a/src/components/Universe/Graph/Connections/LineComponent.tsx
+++ b/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(null)
useEffect(() => {
@@ -31,12 +32,23 @@ const _LineComponent = ({ isSelected, position }: LineComponentProps) => {
}, [isSelected, lineRef])
return (
-
+
+
+
+
+ {label}
+
+
+
)
}
diff --git a/src/components/Universe/Graph/Connections/index.tsx b/src/components/Universe/Graph/Connections/index.tsx
index 5c80ff828..4a04a3909 100644
--- a/src/components/Universe/Graph/Connections/index.tsx
+++ b/src/components/Universe/Graph/Connections/index.tsx
@@ -28,7 +28,7 @@ export const Connections = memo(({ linksPosition }: Props) => {
tz: 0,
}
- return
+ return
})}
)
diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx
index ce5743a77..85b4faee1 100644
--- a/src/components/Universe/Graph/Cubes/Text/index.tsx
+++ b/src/components/Universe/Graph/Cubes/Text/index.tsx
@@ -166,7 +166,9 @@ export const TextNode = memo(({ node, hide, ignoreDistance }: Props) => {
- {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 ? (
{
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
})
diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index 872d6b252..229740c02 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/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,
diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx
index e3fca6f17..da1986c03 100644
--- a/src/components/common/Avatar/index.tsx
+++ b/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`
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')};
`
diff --git a/src/components/common/GraphViewControl/index.tsx b/src/components/common/GraphViewControl/index.tsx
index 16eacaf5a..28721f3d4 100644
--- a/src/components/common/GraphViewControl/index.tsx
+++ b/src/components/common/GraphViewControl/index.tsx
@@ -31,7 +31,7 @@ export const GraphViewControl = () => {
setGraphStyle(val)
}
- return (
+ return false ? (
{graphStyles.map((i) => (
changeGraphType(i)}>
@@ -39,7 +39,7 @@ export const GraphViewControl = () => {
))}
- )
+ ) : null
}
const Wrapper = styled(Flex).attrs({
diff --git a/src/components/mindset/components/Sidebar/Transcript/index.tsx b/src/components/mindset/components/Sidebar/Transcript/index.tsx
index a3df138f5..86e8ccba8 100644
--- a/src/components/mindset/components/Sidebar/Transcript/index.tsx
+++ b/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 (
- Transcript
+ {name}
{clips.map((clip) => {
const timestamp: string | undefined = clip?.properties?.timestamp
diff --git a/src/components/mindset/components/Sidebar/index.tsx b/src/components/mindset/components/Sidebar/index.tsx
index 60af49b0b..22abdce2d 100644
--- a/src/components/mindset/components/Sidebar/index.tsx
+++ b/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,12 +10,8 @@ export const SideBar = () => {
return (
-
- {selectedEpisode?.name && {selectedEpisode?.name}}
- {selectedEpisode?.properties?.text && {selectedEpisode?.properties?.text}}
- {selectedEpisodeLink && }
-
-
+ {selectedEpisodeLink && }
+
)
}
@@ -24,7 +19,7 @@ export const SideBar = () => {
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',
diff --git a/src/components/mindset/components/VideoCard/index.tsx b/src/components/mindset/components/VideoCard/index.tsx
index 69c4f4378..f9a359ee6 100644
--- a/src/components/mindset/components/VideoCard/index.tsx
+++ b/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 (
-
+
{truncatedTitle}
@@ -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;
diff --git a/src/stores/useDataStore/index.ts b/src/stores/useDataStore/index.ts
index 866291d1c..45f78bf88 100644
--- a/src/stores/useDataStore/index.ts
+++ b/src/stores/useDataStore/index.ts
@@ -21,8 +21,6 @@ const deduplicateByRefId = (items: Array) => {
export type GraphStyle = 'sphere' | 'force' | 'split' | 'earth'
-export const graphStyles: GraphStyle[] = ['sphere', 'force', 'split', 'earth']
-
export type FetchNodeParams = {
word?: string
skip_cache?: string
diff --git a/src/stores/useGraphStore/index.ts b/src/stores/useGraphStore/index.ts
index 67dae899e..8cb731d6b 100644
--- a/src/stores/useGraphStore/index.ts
+++ b/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()((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 })
},
diff --git a/src/stores/useSchemaStore/index.ts b/src/stores/useSchemaStore/index.ts
index 5bd29af73..62bea1aef 100644
--- a/src/stores/useSchemaStore/index.ts
+++ b/src/stores/useSchemaStore/index.ts
@@ -52,7 +52,7 @@ export const useSchemaStore = create()(
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],
})),