From b0c7a688f49d7b084cca72e7ebd9955146954206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Fri, 6 Dec 2024 18:52:33 +0300 Subject: [PATCH 1/2] feat: added link --- .../ActionsToolbar/GraphViewControl/index.tsx | 16 +++-- .../Graph/Connections/LineComponent.tsx | 28 +++++--- .../Universe/Graph/Connections/index.tsx | 2 +- .../Universe/Graph/Cubes/Text/index.tsx | 4 +- src/components/Universe/Graph/index.tsx | 66 ++++++++++++------- src/components/Universe/Overlay/index.tsx | 1 + src/components/common/Avatar/index.tsx | 6 +- .../common/GraphViewControl/index.tsx | 16 +++-- .../components/Sidebar/Transcript/index.tsx | 8 ++- .../mindset/components/Sidebar/index.tsx | 29 +------- .../mindset/components/VideoCard/index.tsx | 9 +-- src/stores/useDataStore/index.ts | 2 - src/stores/useGraphStore/index.ts | 4 +- src/stores/useSchemaStore/index.ts | 2 +- 14 files changed, 104 insertions(+), 89 deletions(-) diff --git a/src/components/App/ActionsToolbar/GraphViewControl/index.tsx b/src/components/App/ActionsToolbar/GraphViewControl/index.tsx index 6b0a5fe70..6b5d42e73 100644 --- a/src/components/App/ActionsToolbar/GraphViewControl/index.tsx +++ b/src/components/App/ActionsToolbar/GraphViewControl/index.tsx @@ -32,13 +32,15 @@ export const GraphViewControl = () => { } return ( - - {graphStyles.map((i) => ( - changeGraphType(i)}> - {IconsMapper[i]} - - ))} - + false && ( + + {graphStyles.map((i) => ( + changeGraphType(i)}> + {IconsMapper[i]} + + ))} + + ) ) } 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..575af967f 100644 --- a/src/components/common/GraphViewControl/index.tsx +++ b/src/components/common/GraphViewControl/index.tsx @@ -32,13 +32,15 @@ export const GraphViewControl = () => { } return ( - - {graphStyles.map((i) => ( - changeGraphType(i)}> - {IconsMapper[i]} - - ))} - + false && ( + + {graphStyles.map((i) => ( + changeGraphType(i)}> + {IconsMapper[i]} + + ))} + + ) ) } 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], })), From 21085c81aa93734854ed3930118f6c44cc0403f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Fri, 6 Dec 2024 18:56:54 +0300 Subject: [PATCH 2/2] feat: fixed build --- .../ActionsToolbar/GraphViewControl/index.tsx | 20 +++++++++---------- .../common/GraphViewControl/index.tsx | 20 +++++++++---------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/App/ActionsToolbar/GraphViewControl/index.tsx b/src/components/App/ActionsToolbar/GraphViewControl/index.tsx index 6b5d42e73..78f7025c3 100644 --- a/src/components/App/ActionsToolbar/GraphViewControl/index.tsx +++ b/src/components/App/ActionsToolbar/GraphViewControl/index.tsx @@ -31,17 +31,15 @@ export const GraphViewControl = () => { setGraphStyle(val) } - return ( - false && ( - - {graphStyles.map((i) => ( - changeGraphType(i)}> - {IconsMapper[i]} - - ))} - - ) - ) + return false ? ( + + {graphStyles.map((i) => ( + changeGraphType(i)}> + {IconsMapper[i]} + + ))} + + ) : null } const Wrapper = styled(Flex).attrs({ diff --git a/src/components/common/GraphViewControl/index.tsx b/src/components/common/GraphViewControl/index.tsx index 575af967f..28721f3d4 100644 --- a/src/components/common/GraphViewControl/index.tsx +++ b/src/components/common/GraphViewControl/index.tsx @@ -31,17 +31,15 @@ export const GraphViewControl = () => { setGraphStyle(val) } - return ( - false && ( - - {graphStyles.map((i) => ( - changeGraphType(i)}> - {IconsMapper[i]} - - ))} - - ) - ) + return false ? ( + + {graphStyles.map((i) => ( + changeGraphType(i)}> + {IconsMapper[i]} + + ))} + + ) : null } const Wrapper = styled(Flex).attrs({