summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/config.ts27
-rw-r--r--components/tweaks.tsx481
-rw-r--r--pages/_app.tsx55
-rw-r--r--pages/index.tsx46
4 files changed, 300 insertions, 309 deletions
diff --git a/components/config.ts b/components/config.ts
index b5353aa..2cc4b54 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -21,39 +21,12 @@ export const initialPhysics = {
centeringStrength: 0.05,
linkStrength: 0.1,
linkIts: 1,
- particles: false,
- particlesNumber: 0,
- particlesWidth: 4,
- linkOpacity: 0.7,
- linkWidth: 1,
- nodeRel: 4,
- nodeOpacity: 0.9,
- nodeResolution: 8,
- labels: 2,
- labelScale: 1.5,
alphaDecay: 0.02,
alphaTarget: 0,
alphaMin: 0,
velocityDecay: 0.25,
gravity: 0.5,
gravityOn: true,
- colorful: true,
- galaxy: true,
- ticks: 1,
- hover: 'highlight',
- click: 'select',
- doubleClick: 'local',
- iterations: 0,
- highlight: true,
- highlightNodeSize: 2,
- highlightLinkSize: 2,
- highlightAnim: false,
- animationSpeed: 250,
- algorithms: algorithms,
- algorithmOptions: options,
- algorithmName: 'CubicOut',
- orphans: false,
- follow: 'Local',
}
export const initialFilter = {
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index 82c89c1..393a0fe 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -118,7 +118,7 @@ export const Tweaks = (props: TweakProps) => {
<Collapse in={showTweaks} animateOpacity>
<Box
bg="alt.100"
- w={300}
+ w="xs"
marginTop={10}
marginLeft={10}
borderRadius="xl"
@@ -164,11 +164,11 @@ export const Tweaks = (props: TweakProps) => {
...style,
borderRadius: 10,
}}
- bg={highlightColor + '.500'}
+ bg={highlightColor}
/>
)}
>
- <Accordion allowMultiple allowToggle color="black" paddingRight={2}>
+ <Accordion allowMultiple allowToggle color="black">
<AccordionItem>
<AccordionButton>
<AccordionIcon marginRight={2} />
@@ -210,11 +210,11 @@ export const Tweaks = (props: TweakProps) => {
<AccordionIcon marginRight={2} />
<Heading size="sm">Physics</Heading>
</Box>
- <Switch
- id="physicsOn"
- onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
- isChecked={physics.enabled}
- />
+ {/* <Switch
+ id="physicsOn"
+ onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
+ isChecked={physics.enabled}
+ /> */}
</AccordionButton>
<AccordionPanel>
<VStack
@@ -277,7 +277,7 @@ export const Tweaks = (props: TweakProps) => {
/>
</VStack>
<Box>
- <Accordion allowToggle>
+ <Accordion paddingLeft={3} allowToggle>
<AccordionItem>
<AccordionButton>
<Text>Advanced</Text>
@@ -320,7 +320,6 @@ export const Tweaks = (props: TweakProps) => {
</AccordionItem>
</Accordion>
</Box>
- {/* </VStack> */}
</AccordionPanel>
</AccordionItem>
<AccordionItem>
@@ -329,8 +328,8 @@ export const Tweaks = (props: TweakProps) => {
<Heading size="sm">Visual</Heading>
</AccordionButton>
<AccordionPanel>
- <VStack>
- <Accordion allowToggle defaultIndex={[0]} width={250} marginLeft={10}>
+ <VStack justifyContent="flex-start" align="stretch">
+ <Accordion allowToggle defaultIndex={[0]} paddingLeft={3}>
<AccordionItem>
<AccordionButton>
<Flex justifyContent="space-between" w="100%">
@@ -384,7 +383,7 @@ export const Tweaks = (props: TweakProps) => {
}}
/>
</Tooltip>
- <Menu closeOnSelect={false}>
+ <Menu placement="right" closeOnSelect={false} matchWidth>
<MenuButton
width={20}
as={Button}
@@ -410,8 +409,9 @@ export const Tweaks = (props: TweakProps) => {
</MenuButton>
<Portal>
{' '}
- <MenuList zIndex="popover" bgColor="gray.200" width={50}>
+ <MenuList minW={10} zIndex="popover" bgColor="gray.200">
<MenuOptionGroup
+ width={500}
type="checkbox"
defaultValue={visuals.nodeColorScheme}
onChange={(colors) => {
@@ -438,9 +438,6 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>
- {color[0]!.toUpperCase() + color!.slice(1)}
- </Text>
<Box
bgColor={color}
borderRadius="sm"
@@ -457,7 +454,7 @@ export const Tweaks = (props: TweakProps) => {
</Flex>
<Flex alignItems="center" justifyContent="space-between">
<Text>Links</Text>
- <Menu>
+ <Menu placement="right">
<MenuButton
as={Button}
colorScheme=""
@@ -467,7 +464,7 @@ export const Tweaks = (props: TweakProps) => {
<Box>
{visuals.linkColorScheme ? (
<Box
- bgColor={'gray.' + visuals.linkColorScheme}
+ bgColor={visuals.linkColorScheme}
borderRadius="sm"
height={6}
width={6}
@@ -493,7 +490,7 @@ export const Tweaks = (props: TweakProps) => {
</MenuButton>
<Portal>
{' '}
- <MenuList zIndex="popover" bgColor="gray.200" width={50}>
+ <MenuList minW={10} zIndex="popover" bgColor="gray.200">
<MenuItem
onClick={() =>
setVisuals({ ...visuals, linkColorScheme: '' })
@@ -511,7 +508,7 @@ export const Tweaks = (props: TweakProps) => {
{visuals.nodeColorScheme.map((color) => (
<Box
key={color}
- bgColor={color + '.500'}
+ bgColor={color}
flex="1 1 8px"
borderRadius="2xl"
></Box>
@@ -545,7 +542,7 @@ export const Tweaks = (props: TweakProps) => {
</Flex>
<Flex alignItems="center" justifyContent="space-between">
<Text>Accent</Text>
- <Menu>
+ <Menu placement="right">
<MenuButton
as={Button}
colorScheme=""
@@ -554,7 +551,7 @@ export const Tweaks = (props: TweakProps) => {
>
{
<Box
- bgColor={highlightColor + '.500'}
+ bgColor={highlightColor}
borderRadius="sm"
height={6}
width={6}
@@ -563,7 +560,7 @@ export const Tweaks = (props: TweakProps) => {
</MenuButton>
<Portal>
{' '}
- <MenuList zIndex="popover" bgColor="gray.200" width={50}>
+ <MenuList minW={10} zIndex="popover" bgColor="gray.200">
{colorList.map((color) => (
<MenuItem
key={color}
@@ -572,9 +569,8 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
<Box
- bgColor={color + '.500'}
+ bgColor={color}
borderRadius="sm"
height={6}
width={6}
@@ -587,7 +583,7 @@ export const Tweaks = (props: TweakProps) => {
</Flex>
<Flex alignItems="center" justifyContent="space-between">
<Text>Link Highlight</Text>
- <Menu>
+ <Menu placement="right">
<MenuButton
as={Button}
colorScheme=""
@@ -596,7 +592,7 @@ export const Tweaks = (props: TweakProps) => {
>
{
<Box
- bgColor={visuals.linkHighlight + '.500'}
+ bgColor={visuals.linkHighlight}
borderRadius="sm"
height={6}
width={6}
@@ -605,7 +601,7 @@ export const Tweaks = (props: TweakProps) => {
</MenuButton>
<Portal>
{' '}
- <MenuList zIndex="popover" bgColor="gray.200" width={50}>
+ <MenuList minW={10} zIndex="popover" bgColor="gray.200">
<MenuItem
key={'none'}
onClick={() =>
@@ -615,7 +611,7 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>Match current color</Text>
+ <Box borderRadius="sm" height={6} width={6}></Box>
</MenuItem>
{colorList.map((color) => (
<MenuItem
@@ -627,9 +623,8 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
<Box
- bgColor={color + '.500'}
+ bgColor={color}
borderRadius="sm"
height={6}
width={6}
@@ -642,7 +637,7 @@ export const Tweaks = (props: TweakProps) => {
</Flex>
<Flex alignItems="center" justifyContent="space-between">
<Text>Node Highlight</Text>
- <Menu>
+ <Menu placement="right">
<MenuButton
as={Button}
colorScheme=""
@@ -651,7 +646,7 @@ export const Tweaks = (props: TweakProps) => {
>
{
<Box
- bgColor={visuals.nodeHighlight + '.500'}
+ bgColor={visuals.nodeHighlight}
borderRadius="sm"
height={6}
width={6}
@@ -660,7 +655,7 @@ export const Tweaks = (props: TweakProps) => {
</MenuButton>
<Portal>
{' '}
- <MenuList zIndex="popover" bgColor="gray.200" width={50}>
+ <MenuList minW={10} zIndex="popover" bgColor="gray.200">
<MenuItem
key={'none'}
onClick={() =>
@@ -670,7 +665,7 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>Match current color</Text>
+ <Box borderRadius="sm" height={6} width={6}></Box>
</MenuItem>
{colorList.map((color) => (
<MenuItem
@@ -682,9 +677,8 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
<Box
- bgColor={color + '.500'}
+ bgColor={color}
borderRadius="sm"
height={6}
width={6}
@@ -697,7 +691,7 @@ export const Tweaks = (props: TweakProps) => {
</Flex>
<Flex alignItems="center" justifyContent="space-between">
<Text>Background</Text>
- <Menu>
+ <Menu placement="right">
<MenuButton
as={Button}
colorScheme=""
@@ -706,7 +700,7 @@ export const Tweaks = (props: TweakProps) => {
>
{
<Box
- bgColor={'gray.' + visuals.backgroundColor}
+ bgColor={visuals.backgroundColor}
borderRadius="sm"
height={6}
width={6}
@@ -715,7 +709,7 @@ export const Tweaks = (props: TweakProps) => {
</MenuButton>
<Portal>
{' '}
- <MenuList zIndex="popover" bgColor="gray.200" width={50}>
+ <MenuList minWidth={10} zIndex="popover" bgColor="gray.200">
{grays.map((color) => (
<MenuItem
key={color}
@@ -726,9 +720,8 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
<Box
- bgColor={'gray.' + color}
+ bgColor={color}
borderRadius="sm"
height={6}
width={6}
@@ -741,7 +734,7 @@ export const Tweaks = (props: TweakProps) => {
</Flex>
<Flex alignItems="center" justifyContent="space-between">
<Text>Emacs Node</Text>
- <Menu>
+ <Menu placement="right">
<MenuButton
as={Button}
colorScheme=""
@@ -750,7 +743,7 @@ export const Tweaks = (props: TweakProps) => {
>
{
<Box
- bgColor={visuals.emacsNodeColor + '.500'}
+ bgColor={visuals.emacsNodeColor}
borderRadius="sm"
height={6}
width={6}
@@ -759,7 +752,7 @@ export const Tweaks = (props: TweakProps) => {
</MenuButton>
<Portal>
{' '}
- <MenuList zIndex="popover" bgColor="gray.200" width={50}>
+ <MenuList minWidth={10} zIndex="popover" bgColor="gray.200">
<MenuItem
key={'none'}
onClick={() =>
@@ -769,7 +762,6 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>No change</Text>
<Box borderRadius="sm" height={6} width={6}></Box>
</MenuItem>
{colorList.map((color) => (
@@ -782,9 +774,8 @@ export const Tweaks = (props: TweakProps) => {
alignItems="center"
display="flex"
>
- <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
<Box
- bgColor={color + '.500'}
+ bgColor={color}
borderRadius="sm"
height={6}
width={6}
@@ -810,237 +801,239 @@ export const Tweaks = (props: TweakProps) => {
>
<SliderWithInfo
label="Node size"
- value={physics.nodeRel}
- onChange={(value) => setPhysics({ ...physics, nodeRel: value })}
+ value={visuals.nodeRel}
+ onChange={(value) => setVisuals({ ...visuals, nodeRel: value })}
/>
{threeDim && (
<>
<SliderWithInfo
label="Node opacity"
- value={physics.nodeOpacity}
+ value={visuals.nodeOpacity}
min={0}
max={1}
- onChange={(value) => setPhysics({ ...physics, nodeOpacity: value })}
+ onChange={(value) => setVisuals({ ...visuals, nodeOpacity: value })}
/>
<SliderWithInfo
label="Node resolution"
- value={physics.nodeResolution}
+ value={visuals.nodeResolution}
min={5}
max={32}
step={1}
- onChange={(value) => setPhysics({ ...physics, nodeResolution: value })}
+ onChange={(value) => setVisuals({ ...visuals, nodeResolution: value })}
/>
</>
)}
<SliderWithInfo
label="Link width"
- value={physics.linkWidth}
- onChange={(value) => setPhysics({ ...physics, linkWidth: value })}
+ value={visuals.linkWidth}
+ onChange={(value) => setVisuals({ ...visuals, linkWidth: value })}
/>
{threeDim && (
<SliderWithInfo
label="Link opacity"
min={0}
max={1}
- value={physics.linkOpacity}
- onChange={(value) => setPhysics({ ...physics, linkOpacity: value })}
+ value={visuals.linkOpacity}
+ onChange={(value) => setVisuals({ ...visuals, linkOpacity: value })}
/>
)}
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Labels</Text>
- <Menu>
- <MenuButton
- as={Button}
- colorScheme=""
- color="black"
- rightIcon={<ChevronDownIcon />}
+ <Box>
+ <Flex alignItems="center" justifyContent="space-between">
+ <Text>Labels</Text>
+ <Menu placement="right">
+ <MenuButton
+ as={Button}
+ colorScheme=""
+ color="black"
+ rightIcon={<ChevronDownIcon />}
+ >
+ {!visuals.labels
+ ? 'Never'
+ : visuals.labels < 2
+ ? 'On Highlight'
+ : 'Always'}
+ </MenuButton>
+ <Portal>
+ {' '}
+ <MenuList zIndex="popover" bgColor="gray.200">
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 0 })}>
+ Never
+ </MenuItem>
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 1 })}>
+ On Highlight
+ </MenuItem>
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 2 })}>
+ Always
+ </MenuItem>
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 3 })}>
+ Always (even in 3D)
+ </MenuItem>
+ </MenuList>
+ </Portal>
+ </Menu>
+ </Flex>
+ <Collapse in={visuals.labels > 0} animateOpacity>
+ <VStack
+ spacing={1}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.400" />}
+ align="stretch"
+ paddingLeft={2}
+ color="gray.800"
>
- {!physics.labels
- ? 'Never'
- : physics.labels < 2
- ? 'On Highlight'
- : 'Always'}
- </MenuButton>
- <Portal>
- {' '}
- <MenuList zIndex="popover" bgColor="gray.200">
- <MenuItem onClick={() => setPhysics({ ...physics, labels: 0 })}>
- Never
- </MenuItem>
- <MenuItem onClick={() => setPhysics({ ...physics, labels: 1 })}>
- On Highlight
- </MenuItem>
- <MenuItem onClick={() => setPhysics({ ...physics, labels: 2 })}>
- Always
- </MenuItem>
- <MenuItem onClick={() => setPhysics({ ...physics, labels: 3 })}>
- Always (even in 3D)
- </MenuItem>
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <Collapse in={physics.labels > 0} animateOpacity>
- <VStack
- spacing={1}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.400" />}
- align="stretch"
- paddingLeft={2}
- color="gray.800"
- >
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Text</Text>
- <Menu matchWidth>
- <MenuButton
- as={Button}
- rightIcon={<ChevronDownIcon />}
- color="black"
- colorScheme=""
- >
- {
- <Box
- bgColor={visuals.labelTextColor}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
- }
- </MenuButton>
- <Portal>
- {' '}
- <MenuList zIndex="popover" bg="gray.200">
- {grays.map((color) => (
- <MenuItem
- key={color}
- onClick={() =>
- setVisuals({
- ...visuals,
- labelTextColor: color,
- })
- }
- >
- <Box
- bgColor={color}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
- </MenuItem>
- ))}
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Background</Text>
- <Menu>
- <MenuButton
- as={Button}
- rightIcon={<ChevronDownIcon />}
- color="black"
- colorScheme=""
- >
- {
- <Box
- bgColor={visuals.labelBackgroundColor}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
- }
- </MenuButton>
- <Portal>
- {' '}
- <MenuList zIndex="popover" bg="gray.200">
- <MenuItem
- onClick={() =>
- setVisuals({
- ...visuals,
- labelBackgroundColor: '',
- })
- }
- justifyContent="space-between"
- alignItems="center"
- display="flex"
- >
- None
- </MenuItem>
- {grays.map((color) => (
+ <Flex alignItems="center" justifyContent="space-between">
+ <Text>Text</Text>
+ <Menu matchWidth>
+ <MenuButton
+ as={Button}
+ rightIcon={<ChevronDownIcon />}
+ color="black"
+ colorScheme=""
+ >
+ {
+ <Box
+ bgColor={visuals.labelTextColor}
+ borderRadius="sm"
+ height={6}
+ width={6}
+ ></Box>
+ }
+ </MenuButton>
+ <Portal>
+ {' '}
+ <MenuList minW={10} zIndex="popover" bg="gray.200">
+ {grays.map((color) => (
+ <MenuItem
+ key={color}
+ onClick={() =>
+ setVisuals({
+ ...visuals,
+ labelTextColor: color,
+ })
+ }
+ >
+ <Box
+ bgColor={color}
+ borderRadius="sm"
+ height={6}
+ width={6}
+ ></Box>
+ </MenuItem>
+ ))}
+ </MenuList>
+ </Portal>
+ </Menu>
+ </Flex>
+ <Flex alignItems="center" justifyContent="space-between">
+ <Text>Background</Text>
+ <Menu placement="right">
+ <MenuButton
+ as={Button}
+ rightIcon={<ChevronDownIcon />}
+ color="black"
+ colorScheme=""
+ >
+ {
+ <Box
+ bgColor={visuals.labelBackgroundColor}
+ borderRadius="sm"
+ height={6}
+ width={6}
+ ></Box>
+ }
+ </MenuButton>
+ <Portal>
+ {' '}
+ <MenuList minW={10} zIndex="popover" bg="gray.200">
<MenuItem
- key={color}
onClick={() =>
setVisuals({
...visuals,
- labelBackgroundColor: color,
+ labelBackgroundColor: '',
})
}
justifyContent="space-between"
alignItems="center"
display="flex"
>
- <Box
- bgColor={color}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
+ None
</MenuItem>
- ))}
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <Collapse in={!!visuals.labelBackgroundColor} animateOpacity>
- <Box paddingTop={2}>
- <SliderWithInfo
- label="Background opacity"
- value={visuals.labelBackgroundOpacity}
- onChange={(value) => {
- console.log(visuals.labelBackgroundOpacity)
- setVisuals({ ...visuals, labelBackgroundOpacity: value })
- }}
- min={0}
- max={1}
- step={0.01}
- />
- </Box>
- </Collapse>
- <Collapse in={physics.labels > 1} animateOpacity>
- <Box paddingTop={2}>
- <SliderWithInfo
- label="Label Appearance Scale"
- value={physics.labelScale * 5}
- onChange={(value) =>
- setPhysics({ ...physics, labelScale: value / 5 })
- }
- />
- </Box>
- </Collapse>
- </VStack>
- </Collapse>
+ {grays.map((color) => (
+ <MenuItem
+ key={color}
+ onClick={() =>
+ setVisuals({
+ ...visuals,
+ labelBackgroundColor: color,
+ })
+ }
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
+ >
+ <Box
+ bgColor={color}
+ borderRadius="sm"
+ height={6}
+ width={6}
+ ></Box>
+ </MenuItem>
+ ))}
+ </MenuList>
+ </Portal>
+ </Menu>
+ </Flex>
+ <Collapse in={!!visuals.labelBackgroundColor} animateOpacity>
+ <Box paddingTop={2}>
+ <SliderWithInfo
+ label="Background opacity"
+ value={visuals.labelBackgroundOpacity}
+ onChange={(value) => {
+ console.log(visuals.labelBackgroundOpacity)
+ setVisuals({ ...visuals, labelBackgroundOpacity: value })
+ }}
+ min={0}
+ max={1}
+ step={0.01}
+ />
+ </Box>
+ </Collapse>
+ <Collapse in={visuals.labels > 1} animateOpacity>
+ <Box paddingTop={2}>
+ <SliderWithInfo
+ label="Label Appearance Scale"
+ value={visuals.labelScale * 5}
+ onChange={(value) =>
+ setVisuals({ ...visuals, labelScale: value / 5 })
+ }
+ />
+ </Box>
+ </Collapse>
+ </VStack>
+ </Collapse>
+ </Box>
<EnableSection
label="Directional Particles"
- value={physics.particles}
- onChange={() => setPhysics({ ...physics, particles: !physics.particles })}
+ value={visuals.particles}
+ onChange={() => setVisuals({ ...visuals, particles: !visuals.particles })}
>
<SliderWithInfo
label="Particle Number"
- value={physics.particlesNumber}
+ value={visuals.particlesNumber}
max={5}
step={1}
- onChange={(value) => setPhysics({ ...physics, particlesNumber: value })}
+ onChange={(value) => setVisuals({ ...visuals, particlesNumber: value })}
/>
<SliderWithInfo
label="Particle Size"
- value={physics.particlesWidth}
- onChange={(value) => setPhysics({ ...physics, particlesWidth: value })}
+ value={visuals.particlesWidth}
+ onChange={(value) => setVisuals({ ...visuals, particlesWidth: value })}
/>
</EnableSection>
<EnableSection
label="Highlight"
- onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })}
- value={physics.highlight}
+ onChange={() => setVisuals({ ...visuals, highlight: !visuals.highlight })}
+ value={visuals.highlight}
>
<VStack
spacing={1}
@@ -1051,16 +1044,16 @@ export const Tweaks = (props: TweakProps) => {
>
<SliderWithInfo
label="Highlight Link Thickness"
- value={physics.highlightLinkSize}
+ value={visuals.highlightLinkSize}
onChange={(value) =>
- setPhysics({ ...physics, highlightLinkSize: value })
+ setVisuals({ ...visuals, highlightLinkSize: value })
}
/>
<SliderWithInfo
label="Highlight Node Size"
- value={physics.highlightNodeSize}
+ value={visuals.highlightNodeSize}
onChange={(value) =>
- setPhysics({ ...physics, highlightNodeSize: value })
+ setVisuals({ ...visuals, highlightNodeSize: value })
}
/>
{/*<Flex justifyContent="space-between">
@@ -1072,13 +1065,13 @@ export const Tweaks = (props: TweakProps) => {
<EnableSection
label="Highlight Animation"
onChange={() => {
- setPhysics({ ...physics, highlightAnim: !physics.highlightAnim })
+ setVisuals({ ...visuals, highlightAnim: !visuals.highlightAnim })
}}
- value={physics.highlightAnim}
+ value={visuals.highlightAnim}
>
<SliderWithInfo
label="Animation speed"
- onChange={(v) => setPhysics({ ...physics, animationSpeed: v })}
+ onChange={(v) => setVisuals({ ...visuals, animationSpeed: v })}
value={physics.animationSpeed}
infoText="Slower speed has a chance of being buggy"
min={50}
@@ -1088,7 +1081,7 @@ export const Tweaks = (props: TweakProps) => {
<Select
placeholder={physics.algorithmName}
onChange={(v) => {
- setPhysics({ ...physics, algorithmName: v.target.value })
+ setVisuals({ ...visuals, algorithmName: v.target.value })
}}
>
{physics.algorithmOptions.map((opt: string) => (
@@ -1101,7 +1094,7 @@ export const Tweaks = (props: TweakProps) => {
displayValue={physics.algorithmName}
textArray={physics.algorithmOptions}
onClickArray={physics.algorithmOptions.map((option) =>
- setPhysics({ ...physics, algorithmName: { option } }),
+ setVisuals({ ...visuals, algorithmName: { option } }),
)}
/> */}
</EnableSection>
@@ -1130,7 +1123,7 @@ export const Tweaks = (props: TweakProps) => {
<Text>Expand Node</Text>
<InfoTooltip infoText="View only the node and its direct neighbors" />
</Flex>
- <Menu>
+ <Menu placement="right">
<MenuButton
as={Button}
rightIcon={<ChevronDownIcon />}
@@ -1160,7 +1153,7 @@ export const Tweaks = (props: TweakProps) => {
</Flex>
<Flex alignItems="center" justifyContent="space-between">
<Text>Open in Emacs</Text>
- <Menu>
+ <Menu placement="right">
<MenuButton
as={Button}
rightIcon={<ChevronDownIcon />}
@@ -1240,7 +1233,7 @@ export const SliderWithInfo = ({
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
- <Tooltip bg={highlightColor + '.500'} label={value.toFixed(1)}>
+ <Tooltip bg={highlightColor} label={value.toFixed(1)}>
<SliderThumb bg="white" />
</Tooltip>
</Slider>
@@ -1259,8 +1252,8 @@ export interface EnableSectionProps {
export const EnableSection = (props: EnableSectionProps) => {
const { value, onChange, label, infoText, children } = props
return (
- <Box>
- <Box display="flex" justifyContent="space-between">
+ <Box paddingTop={2}>
+ <Box display="flex" justifyContent="space-between" paddingBottom={2}>
<Box display="flex" alignItems="center">
<Text>{label}</Text>
{infoText && <InfoTooltip infoText={infoText} />}
@@ -1268,7 +1261,7 @@ export const EnableSection = (props: EnableSectionProps) => {
<Switch isChecked={!!value} onChange={onChange} />
</Box>
<Collapse in={!!value} animateOpacity>
- <Box paddingLeft={4} paddingTop={2}>
+ <Box paddingLeft={4} paddingTop={2} paddingBottom={2}>
{children}
</Box>
</Collapse>
@@ -1285,7 +1278,7 @@ export interface DropDownMenuProps {
export const DropDownMenu = (props: DropDownMenuProps) => {
const { textArray, onClickArray, displayValue } = props
return (
- <Menu>
+ <Menu placement="right">
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
{displayValue}
</MenuButton>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f8ff942..5b96bd0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -37,7 +37,7 @@ function MyApp({ Component, pageProps }: AppProps) {
const [isInitialized, setIsInitialized] = useState(false)
const [emacsTheme, setEmacsTheme] = useState(initialTheme)
- const [highlightColor, setHighlightColor] = useState('purple')
+ const [highlightColor, setHighlightColor] = useState('purple.500')
useEffect(() => {
if (isInitialized) {
@@ -82,28 +82,28 @@ function SubApp(props: any) {
const { highlightColor, emacsTheme } = useContext(ThemeContext)
// yeah it's annoying, should put this someplace more sensible
const getBorderColor = () => {
- if (highlightColor === 'purple') {
+ if (highlightColor === 'purple.500') {
return emacsTheme.violet + 'aa'
}
- if (highlightColor === 'pink') {
+ if (highlightColor === 'pink.500') {
return emacsTheme.magenta + 'aa'
}
- if (highlightColor === 'blue') {
+ if (highlightColor === 'blue.500') {
return emacsTheme.blue + 'aa'
}
- if (highlightColor === 'cyan') {
+ if (highlightColor === 'cyan.500') {
return emacsTheme.cyan + 'aa'
}
- if (highlightColor === 'green') {
+ if (highlightColor === 'green.500') {
return emacsTheme.green + 'aa'
}
- if (highlightColor === 'yellow') {
+ if (highlightColor === 'yellow.500') {
return emacsTheme.yellow + 'aa'
}
- if (highlightColor === 'orange') {
+ if (highlightColor === 'orange.500') {
return emacsTheme.orange + 'aa'
}
- if (highlightColor === 'red') {
+ if (highlightColor === 'red.500') {
return emacsTheme.red + 'aa'
}
}
@@ -165,21 +165,46 @@ function SubApp(props: any) {
variants: {
outline: {
border: '2px solid',
- borderColor: highlightColor + '.500',
- color: highlightColor + '.500',
+ borderColor: highlightColor,
+ color: highlightColor,
},
ghost: {
- color: highlightColor + '.500',
- _hover: { bg: `inherit`, border: '1px solid', borderColor: highlightColor + '.500' },
- _active: { color: `inherit`, bg: highlightColor + '.500' },
+ color: highlightColor,
+ _hover: { bg: `inherit`, border: '1px solid', borderColor: highlightColor },
+ _active: { color: `inherit`, bg: highlightColor },
},
},
},
+ Accordion: {
+ baseStyle: {
+ container: {
+ marginTop: '10px',
+ borderWidth: '0px',
+ paddingRight: '10px',
+ _last: {
+ borderWidth: '0px',
+ },
+ },
+ },
+ },
+ Slider: {
+ baseStyle: (props: any) => ({
+ thumb: {
+ backgroundColor: highlightColor,
+ },
+ filledTrack: {
+ backgroundColor: 'gray.200',
+ },
+ }),
+ },
},
}
}, [highlightColor, JSON.stringify(emacsTheme)])
- const extendedTheme = extendTheme(theme, withDefaultColorScheme({ colorScheme: highlightColor }))
+ const extendedTheme = extendTheme(
+ theme,
+ withDefaultColorScheme({ colorScheme: highlightColor.split('.')[0] }),
+ )
return <ChakraProvider theme={extendedTheme}>{children}</ChakraProvider>
}
export default MyApp
diff --git a/pages/index.tsx b/pages/index.tsx
index 3ecda92..4ff3aee 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -395,12 +395,12 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
const [opacity, setOpacity] = useState<number>(1)
const [fadeIn, cancel] = useAnimation((x) => setOpacity(x), {
- duration: physics.animationSpeed,
- algorithm: physics.algorithms[physics.algorithmName],
+ duration: visuals.animationSpeed,
+ algorithm: visuals.algorithms[visuals.algorithmName],
})
const [fadeOut] = useAnimation((x) => setOpacity(Math.min(opacity, -1 * (x - 1))), {
- duration: physics.animationSpeed,
- algorithm: physics.algorithms[physics.algorithmName],
+ duration: visuals.animationSpeed,
+ algorithm: visuals.algorithms[visuals.algorithmName],
})
const lastHoverNode = useRef<OrgRoamNode | null>(null)
@@ -408,7 +408,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
if (hoverNode) {
lastHoverNode.current = hoverNode as OrgRoamNode
}
- if (!physics.highlightAnim) {
+ if (!visuals.highlightAnim) {
return hoverNode ? setOpacity(1) : setOpacity(0)
}
if (hoverNode) {
@@ -557,7 +557,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
nodeColor: (node) => {
return getNodeColor(node as OrgRoamNode)
},
- nodeRelSize: physics.nodeRel,
+ nodeRelSize: visuals.nodeRel,
nodeVal: (node) => {
const links = linksByNodeId[node.id!] ?? []
const parentNeighbors = links.length
@@ -566,7 +566,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
const basicSize = 3 + links.length - (!filter.parents ? parentNeighbors : 0)
const highlightSize =
highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!]
- ? 1 + opacity * (physics.highlightNodeSize - 1)
+ ? 1 + opacity * (visuals.highlightNodeSize - 1)
: 1
return basicSize * highlightSize
},
@@ -575,13 +575,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
return
}
- if (!physics.labels) {
+ if (!visuals.labels) {
return
}
const wasHighlightedNode = previouslyHighlightedNodes[node.id!]
if (
- (globalScale <= physics.labelScale || physics.labels === 1) &&
+ (globalScale <= visuals.labelScale || visuals.labels === 1) &&
!highlightedNodes[node.id!] &&
!wasHighlightedNode
) {
@@ -598,14 +598,14 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
number,
] // some padding
- const fadeFactor = Math.min((3 * (globalScale - physics.labelScale)) / physics.labelScale, 1)
+ const fadeFactor = Math.min((3 * (globalScale - visuals.labelScale)) / visuals.labelScale, 1)
// draw label background
const getLabelOpacity = () => {
- if (physics.labels === 1) {
+ if (visuals.labels === 1) {
return opacity
}
- if (globalScale <= physics.labelScale) {
+ if (globalScale <= visuals.labelScale) {
return opacity
}
return highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!]
@@ -635,7 +635,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
},
nodeCanvasObjectMode: () => 'after',
- linkDirectionalParticles: physics.particles ? physics.particlesNumber : undefined,
+ linkDirectionalParticles: visuals.particles ? visuals.particlesNumber : undefined,
linkColor: (link) => {
const sourceId = typeof link.source === 'object' ? link.source.id! : (link.source as string)
const targetId = typeof link.target === 'object' ? link.target.id! : (link.target as string)
@@ -649,10 +649,10 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current)
return linkIsHighlighted || linkWasHighlighted
- ? physics.linkWidth * (1 + opacity * (physics.highlightLinkSize - 1))
- : physics.linkWidth
+ ? visuals.linkWidth * (1 + opacity * (visuals.highlightLinkSize - 1))
+ : visuals.linkWidth
},
- linkDirectionalParticleWidth: physics.particlesWidth,
+ linkDirectionalParticleWidth: visuals.particlesWidth,
d3AlphaDecay: physics.alphaDecay,
d3AlphaMin: physics.alphaMin,
@@ -686,7 +686,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
}))
},
onNodeHover: (node) => {
- if (!physics.highlight) {
+ if (!visuals.highlight) {
return
}
setHoverNode(node)
@@ -701,17 +701,17 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
{...graphCommonProps}
nodeThreeObjectExtend={true}
backgroundColor={theme.colors.white}
- nodeOpacity={physics.nodeOpacity}
- nodeResolution={physics.nodeResolution}
- linkOpacity={physics.linkOpacity}
+ nodeOpacity={visuals.nodeOpacity}
+ nodeResolution={visuals.nodeResolution}
+ linkOpacity={visuals.linkOpacity}
nodeThreeObject={(node: OrgRoamNode) => {
- if (!physics.labels) {
+ if (!visuals.labels) {
return
}
- if (physics.labels === 2) {
+ if (visuals.labels === 2) {
return
}
- if (physics.labels === 1 && !highlightedNodes[node.id!]) {
+ if (visuals.labels === 1 && !highlightedNodes[node.id!]) {
return
}
const sprite = new SpriteText(node.title.substring(0, 30))
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 11:53:17 +0000