Skip to content
Snippets Groups Projects
Commit 87bee17b authored by satwikShresth's avatar satwikShresth
Browse files

adding nice legend button and other things

parent 4ca788da
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
frontend/src/components/Result/Graph.tsx
+ 65
− 65
View file @ 87bee17b
......@@ -11,10 +11,11 @@ import {
Heading,
Text,
VStack,
HStack,
Separator,
Switch,
Icon,
HoverCard,
Button,
Portal,
} from '@chakra-ui/react';
import SpriteText from 'three-spritetext';
import { useColorModeValue } from '../ui/color-mode';
......@@ -212,6 +213,52 @@ export const Graph = () => {
return (
<Container maxW="container.xl" p={4}>
<VStack align="stretch" >
<Flex justify={"space-between"} align="center">
<HoverCard.Root>
<HoverCard.Trigger asChild>
<Button variant="outline" size="sm">
Legends
</Button>
</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow />
<CardRoot
width="280px"
bg={cardBgColor}
borderRadius="lg"
boxShadow="md"
borderWidth="1px"
borderColor={borderColor}
>
<CardHeader pb={0}>
<Heading as="h3" size="md" color={headingColor}>
Network Information
</Heading>
</CardHeader>
<CardBody>
<VStack align="stretch">
<Text fontSize="sm" color={textColor}>
Total Students: {nodes.length}
</Text>
<Text fontSize="sm" color={textColor}>
Visible Students: {visibleNodesCount}
</Text>
<Text fontSize="sm" color={textColor}>
Total Connections: {links.length}
</Text>
<Text fontSize="sm" color={textColor}>
Visible Connections: {visibleLinksCount}
</Text>
</VStack>
</CardBody>
</CardRoot>
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
<Switch.Root
size="lg"
checked={checked}
......@@ -226,6 +273,7 @@ export const Graph = () => {
</Switch.Control>
<Switch.Label>2D / 3D Toggle</Switch.Label>
</Switch.Root>
</Flex>
<Flex direction={{ base: 'column', md: 'row' }} gap={4}>
<Box
ref={containerRef}
......@@ -275,54 +323,6 @@ export const Graph = () => {
cooldownTime={10000}
/>
</Box>
<CardRoot
width={{ base: '100%', md: '280px' }}
bg={cardBgColor}
borderRadius="lg"
boxShadow="md"
borderWidth="1px"
borderColor={borderColor}
>
<CardHeader pb={0}>
<Heading as="h3" size="md" color={headingColor}>
Network Information
</Heading>
</CardHeader>
<CardBody>
<VStack align="stretch">
<Text fontSize="sm" color={textColor}>
Total Students: {nodes.length}
</Text>
<Text fontSize="sm" color={textColor}>
Visible Students: {visibleNodesCount}
</Text>
<Text fontSize="sm" color={textColor}>
Total Connections: {links.length}
</Text>
<Text fontSize="sm" color={textColor}>
Visible Connections: {visibleLinksCount}
</Text>
<Separator my={2} />
<Heading as="h4" size="sm" mb={1}>
Node Colors:
</Heading>
<HStack>
<Box w="16px" h="16px" bg="blue.600" borderRadius="sm" />
<Text fontSize="sm">Regular</Text>
</HStack>
<HStack>
<Box w="16px" h="16px" bg="orange.400" borderRadius="sm" />
<Text fontSize="sm">Connected</Text>
</HStack>
<HStack>
<Box w="16px" h="16px" bg="#ff5500" borderRadius="sm" />
<Text fontSize="sm">Selected</Text>
</HStack>
</VStack>
</CardBody>
</CardRoot>
</Flex>
</VStack>
</Container>
......
......
frontend/src/components/Result/Viewer/ViewerSidebar.tsx
+ 2
− 2
View file @ 87bee17b
......@@ -80,8 +80,8 @@ const Sidebar = () => {
<Image
src={Logo}
alt="Logo"
maxH={isCollapsed ? "40px" : "80px"}
maxW={isCollapsed ? "40px" : "220px"}
maxH={isCollapsed ? "40px" : "3xs"}
maxW={isCollapsed ? "40px" : "3xs"}
transition="all 0.2s ease"
mx={isCollapsed ? "auto" : "0"}
/>
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment