Skip to content

Commit

Permalink
Feature/zoom node view (#487)
Browse files Browse the repository at this point in the history 
* feat: add 2d widget view

* feat: fix collapse button appearence

---------

Co-authored-by: Расул <[email protected]>
  • Loading branch information
@Rassl
Rassl and Расул authored Oct 12, 2023
1 parent 7bc1802 commit eaaaa92
Show file tree
Hide file tree
Showing 18 changed files with 137 additions and 8,266 deletions.
8,145 changes: 0 additions & 8,145 deletions build/assets/index-ad4e6388.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion build/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Second Brain</title>
<script type="module" crossorigin src="/assets/index-ad4e6388.js"></script>
<script type="module" crossorigin src="/assets/index-3e04d56f.js"></script>
<link rel="stylesheet" href="/assets/index-381991a0.css">
</head>
<body style="background: #000">
Expand Down
Binary file added public/audio_placeholder_img.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/person_placeholder_img.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/twitter_placeholder_img.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/video_placeholder_img.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 12 additions & 11 deletions src/components/App/SideBar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import { Slide } from '@mui/material'
import clsx from 'clsx'
import { forwardRef, useEffect, useRef, useState } from 'react'
import { useFormContext } from 'react-hook-form'
import styled from 'styled-components'
import { Flex } from '~/components/common/Flex'
import { SearchBar } from '~/components/SearchBar'
import { useAppStore } from '~/stores/useAppStore'
import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
import { colors } from '~/utils/colors'
import clsx from 'clsx'
import { ClipLoader } from 'react-spinners'
import { FetchLoaderText } from '~/components/common/Loader'
import styled from 'styled-components'
import { useGraphData } from '~/components/DataRetriever'
import ChevronLeftIcon from '~/components/Icons/ChevronLeftIcon'
import ClearIcon from '~/components/Icons/ClearIcon'
import SearchIcon from '~/components/Icons/SearchIcon'
import { SearchBar } from '~/components/SearchBar'
import { Flex } from '~/components/common/Flex'
import { FetchLoaderText } from '~/components/common/Loader'
import { useAppStore } from '~/stores/useAppStore'
import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
import { colors } from '~/utils/colors'
import { TeachMe } from '../Helper/TeachMe'
import { LatestView } from './Latest'
import { EpisodeSkeleton } from './Relevance/EpisodeSkeleton'
import { SideBarSubView } from './SidebarSubView'
import { Tab } from './Tab'
import { Trending } from './Trending'
import { TeachMe } from '../Helper/TeachMe'

export const MENU_WIDTH = 390

Expand Down Expand Up @@ -130,14 +130,15 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen
export const SideBar = ({ onSubmit }: Props) => {
const sidebarIsOpen = useAppStore((s) => s.sidebarIsOpen)
const selectedNode = useSelectedNode()
const subViewIsOpen = !!selectedNode && selectedNode.node_type !== 'topic' && sidebarIsOpen
const [showTeachMe] = useDataStore((s) => [s.showTeachMe])

return (
<>
<Slide direction="right" in={sidebarIsOpen} mountOnEnter unmountOnExit>
<Content onSubmit={onSubmit} subViewOpen={!!selectedNode} />
<Content onSubmit={onSubmit} subViewOpen={subViewIsOpen} />
</Slide>
<SideBarSubView open={(!!selectedNode && sidebarIsOpen) || !!showTeachMe} />
<SideBarSubView open={subViewIsOpen || !!showTeachMe} />
{!sidebarIsOpen && <Tab />}
</>
)
Expand Down
50 changes: 29 additions & 21 deletions src/components/Universe/Graph/Cubes/RelevanceBadges/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
import { Html } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import clsx from 'clsx'
import { Fragment, memo, useEffect, useMemo, useRef } from 'react'
import { MdHub } from 'react-icons/md'
import { Group, Vector3 } from 'three'
import { nodesAreRelatives } from '~/components/Universe/constants'
import { getNodeColorByType } from '~/components/Universe/Graph/constant'
import { nodesAreRelatives } from '~/components/Universe/constants'
import { Avatar } from '~/components/common/Avatar'
import { TypeBadge } from '~/components/common/TypeBadge'
import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
import { colors } from '~/utils/colors'
import { getPercentageFromWeight } from './PathwayBadge'
import { BadgeIconWrapper, Counter, Image, Percentage, Tag } from './styles'
import { Tag } from './styles'
import { BadgeProps } from './types'

const variableVector3 = new Vector3()

const NodeBadge = ({ position, userData, color, relativeIds }: BadgeProps) => {
const NodeBadge = ({ position, userData, color }: BadgeProps) => {
const ref = useRef<Group | null>(null)
const setSelectedNode = useDataStore((s) => s.setSelectedNode)
const [selectedNode, setSelectedNode] = useDataStore((s) => [s.selectedNode, s.setSelectedNode])
const setHoveredNode = useDataStore((s) => s.setHoveredNode)
const hoveredNode = useDataStore((s) => s.hoveredNode)
const showSelectionGraph = useDataStore((s) => s.showSelectionGraph)

const isTopic = (userData?.node_type || '') === 'topic'
const isPerson = (userData?.node_type || '') === 'guest' || (userData?.node_type || '') === 'person'

useFrame(() => {
if (showSelectionGraph && ref.current) {
Expand All @@ -41,17 +43,16 @@ const NodeBadge = ({ position, userData, color, relativeIds }: BadgeProps) => {
)

const isHovered = useMemo(() => hoveredNode?.ref_id === userData?.ref_id, [hoveredNode?.ref_id, userData?.ref_id])
const isSelected = selectedNode?.ref_id === userData?.ref_id

const score = getPercentageFromWeight(userData.weight)

return (
return (isSelected && showSelectionGraph) || !isSelected ? (
<group ref={ref} position={position}>
<Html center sprite>
<Tag
className={clsx(userData?.node_type, { selected: isSelected })}
color={color}
fontColor={colors.white}
fontSize={isTopic ? 14 : 20}
justify="center"
onClick={(e) => {
e.stopPropagation()

Expand All @@ -69,21 +70,28 @@ const NodeBadge = ({ position, userData, color, relativeIds }: BadgeProps) => {
}}
scale={isHovered ? 1.05 : 1}
selected={false}
size={isTopic ? 100 : 52}
size={isSelected ? 100 : 68}
type={userData?.node_type || ''}
>
{isTopic ? userData?.label : <Image size={46} src={userData?.image_url || 'noimage.jpeg'} />}

<BadgeIconWrapper>
<Counter color={color}>
<MdHub style={{ marginRight: 4 }} />
{relativeIds.length}
</Counter>
<Percentage color={color}>{score}%</Percentage>
</BadgeIconWrapper>
{!isPerson && !isTopic ? (
<div className="badge-wrapper">
<TypeBadge type={userData?.node_type || ''} />
</div>
) : null}
{isTopic ? (
userData?.label
) : (
<Avatar
rounded={isPerson}
size={isSelected ? 60 : 52}
src={userData?.image_url || 'audio_default.svg'}
type={userData?.node_type}
/>
)}
</Tag>
</Html>
</group>
)
) : null
}

export const RelevanceBadges = memo(() => {
Expand Down
59 changes: 51 additions & 8 deletions src/components/Universe/Graph/Cubes/RelevanceBadges/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,69 @@ type TagProps = {
size: number
fontSize: number
scale: number
type?: string
}

export const Tag = styled(Flex)<TagProps>`
opacity: 0.9;
text-align: center;
width: ${(p: TagProps) => `${p.size}px`};
height: ${(p: TagProps) => `${p.size}px`};
background: ${colors.transparentBlack};
border: 3px solid ${(p: TagProps) => p.color};
width: ${(p: TagProps) => (p.type === 'topic' ? 'auto' : `${p.size}px`)};
height: ${(p: TagProps) => (p.type === 'topic' ? 'auto' : `${p.size}px`)};
outline: 1px solid ${(p: TagProps) => colors.white || p.color};
outline-offset: 0px;
background: rgba(0, 0, 0, 0.75);
color: ${(p: TagProps) => p.fontColor};
border-radius: 100%;
border-radius: ${(p: TagProps) => `${p.type === 'guest' ? '100%' : '6px'}`};
font-size: ${(p: TagProps) => `${p.fontSize}px`};
cursor: pointer;
transition: opacity 0.4s;
transition: font-size 0.4s, outline 0.4s;
transform: scale(${(p: TagProps) => p.scale});
align-items: center;
justify-content: center;
font-family: Barlow;
font-size: 26px;
font-style: normal;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
&:hover {
outline-offset: 4px;
}
&.selected {
.badge-wrapper {
top: 0;
}
font-size: 36px;
&:hover {
outline-offset: 0px;
}
}
&.topic {
outline: none;
background: none;
&:hover {
font-size: 36px;
}
white-space: nowrap;
.badge-wrapper {
display: none;
}
}
.badge-wrapper {
position: absolute;
top: -7px;
left: -14px;
}
`

type ImageProps = {
src?: string
size: number
borderRadius?: string
}

export const Image = styled.img<ImageProps>`
Expand All @@ -37,7 +80,7 @@ export const Image = styled.img<ImageProps>`
background-repeat: no-repeat;
width: ${(p) => p.size}px;
height: ${(p) => p.size}px;
border-radius: 100%;
border-radius: ${(p) => p.borderRadius};
`

type CounterProps = {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ export const SelectionDataNodes = memo(() => {
<>
{selectionGraphData?.nodes.map((node) => {
if (node.node_type === 'topic') {
return <TextNode key={`${node.ref_id || node.id}-compact`} node={node} />
return <TextNode key={`${node.ref_id || node.id}-compact`} hide node={node} />
}

return <Cube key={`${node.ref_id || node.id}-compact`} animated node={node} />
return <Cube key={`${node.ref_id || node.id}-compact`} animated hide node={node} />
})}

<Segments
Expand Down
2 changes: 1 addition & 1 deletion src/components/Universe/Graph/Segment/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,5 +52,5 @@ export const Segment = ({ link, animated }: Props) => {
}
})

return <DreiSegment ref={ref} color={color} end={end} start={start} />
return <DreiSegment ref={ref} color={'0xFFFFFF' || color} end={end} start={start} />
}
8 changes: 4 additions & 4 deletions src/components/Universe/Graph/UI/NodeControls/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
export const buttonColors = (active: boolean) => ({
close: {
backgroundColor: '#00000066',
backgroundColor: 'rgba(48, 51, 66, 1)',
borderColor: '#fff',
fontColor: '#fff',
fontColor: 'rgba(255, 255, 255, 1)',
},
focus: {
backgroundColor: active ? '#FFDB58bb' : '#fff',
backgroundColor: active ? 'rgba(255, 255, 255, 0.90);' : 'rgba(255, 255, 255, 0.90)',
borderColor: active ? '#FFDB58bb' : '#fff',
fontColor: active ? '#fff' : '#000',
fontColor: active ? 'rgba(48, 51, 66, 1)' : 'rgba(48, 51, 66, 1)',
},
menu: {
backgroundColor: '#00000066',
Expand Down
Loading

0 comments on commit eaaaa92

Please sign in to comment.