summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--org-roam-ui.el4
-rw-r--r--package.json3
-rw-r--r--pages/_app.tsx98
-rw-r--r--pages/index.tsx498
-rw-r--r--yarn.lock168
5 files changed, 511 insertions, 260 deletions
diff --git a/org-roam-ui.el b/org-roam-ui.el
index 9988899..f0452a6 100644
--- a/org-roam-ui.el
+++ b/org-roam-ui.el
@@ -94,7 +94,7 @@ ROWS is the sql result, while COLUMN-NAMES is the columns to use."
(push (cons (pop column-names) (pop rows)) res))
res))
-(defservlet* theme application/json ()
+(defservlet* theme text/stream ()
(progn
(when (boundp 'doom-themes--colors)
(let*
@@ -102,7 +102,7 @@ ROWS is the sql result, while COLUMN-NAMES is the columns to use."
(progn
(dolist (color colors) (push (cons (car color) (car (cdr color))) ui-theme))
(insert (json-encode ui-theme)))))
- (httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*")))
+ (httpd-send-header t "text/event-stream" 200 :Access-Control-Allow-Origin "*")))
(defservlet* id/:id text/html ()
diff --git a/package.json b/package.json
index 4395167..3cdf0f0 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,13 @@
"@react-hook/window-size": "^3.0.7",
"d3-force-3d": "^3.0.2",
"framer-motion": "^4",
+ "hex-rgb": "^5.0.0",
"next": "11.0.1",
"react": "17.0.2",
+ "react-custom-scrollbars-2": "^4.4.0",
"react-dom": "17.0.2",
"react-force-graph": "^1.41.7",
+ "react-spring": "^9.2.4",
"three-spritetext": "^1.6.2",
"use-constant": "^1.1.0"
},
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1801159..262ac69 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,10 +1,106 @@
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
+import { useEffect, useState, useMemo } from 'react'
+import { extendTheme } from '@chakra-ui/react'
+//import hexRgb from 'hex-rgb'
function MyApp({ Component, pageProps }: AppProps) {
+ const initialTheme = {
+ base1: '#1c1f24',
+ base2: '#21272d',
+ base3: '#23272e',
+ base4: '#484854',
+ base5: '#62686E',
+ base6: '#757B80',
+ base7: '#9ca0a4',
+ base8: '#DFDFDF',
+ bg: '#242730',
+ 'bg-alt': '#2a2e38',
+ blue: '#51afef',
+ cyan: '#5cEfFF',
+ 'dark-blue': '#1f5582',
+ 'dark-cyan': '#6A8FBF',
+ fg: '#bbc2cf',
+ 'fg-alt': '#5D656B',
+ green: '#7bc275',
+ grey: '#484854',
+ magenta: '#C57BDB',
+ orange: '#e69055',
+ red: '#ff665c',
+ teal: '#4db5bd',
+ violet: '#a991f1',
+ yellow: '#FCCE7B',
+ }
+ const [emacsTheme, setEmacsTheme] = useState(initialTheme)
+ useEffect(() => {
+ const trackTheme = new EventSource('http://127.0.0.1:35901/theme')
+ trackTheme.addEventListener('message', (e) => {
+ const themeData = JSON.parse(e.data)
+ setEmacsTheme(themeData)
+ console.log(themeData)
+ console.log(themeData['fg-alt'])
+ })
+ }, [])
+
+ const borderColor = emacsTheme.violet + 'aa'
+ const theme =
+ //useMemo(() => {
+ //console.log("theme change")
+ extendTheme({
+ colors: {
+ white: emacsTheme.bg,
+ black: emacsTheme.fg,
+ gray: {
+ 200: emacsTheme.base1,
+ 300: emacsTheme.base2,
+ 400: emacsTheme.base3,
+ 500: emacsTheme.base4,
+ 600: emacsTheme.base5,
+ 700: emacsTheme.base6,
+ 800: emacsTheme.base7,
+ 900: emacsTheme.base8,
+ },
+ blue: {
+ 500: emacsTheme.blue,
+ },
+ teal: {
+ 500: emacsTheme.blue,
+ },
+ yellow: {
+ 500: emacsTheme.yellow,
+ },
+ orange: {
+ 500: emacsTheme.orange,
+ },
+ red: {
+ 500: emacsTheme.red,
+ },
+ green: {
+ 500: emacsTheme.green,
+ },
+ purple: {
+ 500: emacsTheme.violet,
+ },
+ pink: {
+ 500: emacsTheme.magenta,
+ },
+ cyan: {
+ 500: emacsTheme.cyan,
+ },
+ alt: {
+ 100: emacsTheme['bg-alt'],
+ 900: emacsTheme['fg-alt'],
+ },
+ },
+ shadows: {
+ outline: '0 0 0 3px ' + borderColor,
+ },
+ })
+ // }, [emacsTheme.base1])
+
return (
- <ChakraProvider>
+ <ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
)
diff --git a/pages/index.tsx b/pages/index.tsx
index 3200bb9..5dfce8d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,7 @@ import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
import { GraphData, NodeObject } from 'force-graph'
import { useWindowSize } from '@react-hook/window-size'
+import { Scrollbars } from 'react-custom-scrollbars-2'
import {
Accordion,
@@ -44,6 +45,7 @@ import {
MenuOptionGroup,
MenuItemOption,
Flex,
+ useTheme,
} from '@chakra-ui/react'
import { InfoOutlineIcon, RepeatClockIcon, ChevronDownIcon, SettingsIcon } from '@chakra-ui/icons'
@@ -97,33 +99,6 @@ const initialPhysics = {
highlightLinkSize: 2,
}
-const initialTheme = {
- base1: '#1c1f24',
- base2: '#21272d',
- base3: '#23272e',
- base4: '#484854',
- base5: '#62686E',
- base6: '#757B80',
- base7: '#9ca0a4',
- base8: '#DFDFDF',
- bg: '#242730',
- 'bg-alt': '#2a2e38',
- blue: '#51afef',
- cyan: '#5cEfFF',
- 'dark-blue': '#1f5582',
- 'dark-cyan': '#6A8FBF',
- fg: '#bbc2cf',
- 'fg-alt': '#5D656B',
- green: '#7bc275',
- grey: '#484854',
- magenta: '#C57BDB',
- orange: '#e69055',
- red: '#ff665c',
- teal: '#4db5bd',
- violet: '#a991f1',
- yellow: '#FCCE7B',
-}
-
export default function Home() {
// only render on the client
const [showPage, setShowPage] = useState(false)
@@ -140,7 +115,7 @@ export default function Home() {
export function GraphPage() {
const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
- const [theme, setTheme] = useState(initialTheme)
+ // const [theme, setTheme] = useState(initialTheme)
const [graphData, setGraphData] = useState<GraphData | null>(null)
const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
@@ -154,11 +129,11 @@ export function GraphPage() {
const emacsNodeId = e.data
setEmacsNodeId(emacsNodeId)
})
- fetch('http://localhost:35901/theme')
- .then((res) => res.json())
- .then((emacsTheme) => {
- setTheme(emacsTheme)
- })
+ /* fetch('http://localhost:35901/theme')
+ * .then((res) => res.json())
+ * .then((emacsTheme) => {
+ * setTheme(emacsTheme)
+ * }) */
fetch('http://localhost:35901/graph')
.then((res) => res.json())
.then((orgRoamGraphData: OrgRoamGraphReponse) => {
@@ -256,7 +231,14 @@ export const SliderWithInfo = ({
<Text>{label}</Text>
{infoText && <InfoTooltip infoText={infoText} />}
</Box>
- <Slider value={value} onChange={onChange} min={min} max={max} step={step}>
+ <Slider
+ value={value}
+ onChange={onChange}
+ min={min}
+ max={max}
+ step={step}
+ colorScheme="purple"
+ >
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
@@ -285,13 +267,22 @@ export const EnableSection = (props: EnableSectionProps) => {
<Text>{label}</Text>
{infoText && <InfoTooltip infoText={infoText} />}
</Box>
- <Switch isChecked={!!value} onChange={onChange} />
+ <Switch isChecked={!!value} onChange={onChange} colorScheme="purple" />
</Box>
{value && children}
</Box>
)
}
+/* style={{
+ * position: "absolute",
+ * zIndex: 2000,
+ * width: 400,
+ * maxHeight: "70%",
+ * background: "alt.100",
+ * marginTop: "2%",
+ * marginLeft: "2%"
+ * }} */
export interface TweakProps {
physics: typeof initialPhysics
setPhysics: any
@@ -304,13 +295,14 @@ export const Tweaks = function (props: TweakProps) {
<Box
zIndex="overlay"
position="absolute"
- bg="white"
+ bg="alt.100"
w="xs"
marginTop="2%"
marginLeft="2%"
borderRadius="md"
- maxH="80%"
- overflowY="scroll"
+ maxH={650}
+ paddingBottom={5}
+ //overflowY="scroll"
>
<Box display="flex" justifyContent="flex-end">
<Tooltip label="Reset settings to defaults">
@@ -318,224 +310,228 @@ export const Tweaks = function (props: TweakProps) {
aria-label="Reset Defaults"
icon={<RepeatClockIcon />}
onClick={() => setPhysics(initialPhysics)}
+ colorScheme="purple"
/>
</Tooltip>
<CloseButton onClick={onClose} />
</Box>
- <Accordion allowMultiple allowToggle>
- <AccordionItem>
- <AccordionButton display="flex" justifyContent="space-between">
- <Box display="flex">
- <AccordionIcon />
- <Text>Physics</Text>
- </Box>
- <Switch
- id="physicsOn"
- onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
- isChecked={physics.enabled}
- />
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.200" />}
- align="stretch"
- >
- <EnableSection
- label="Gravity"
- value={physics.gravityOn}
- onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
- >
- <SliderWithInfo
- label="Strength"
- value={physics.gravity * 10}
- onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })}
- />
- </EnableSection>
- <SliderWithInfo
- value={-physics.charge / 100}
- onChange={(value) => setPhysics({ ...physics, charge: -100 * value })}
- label="Repulsive Force"
+ <Scrollbars autoHeight autoHeightMax={600}>
+ <Accordion allowMultiple allowToggle colorScheme="purple">
+ <AccordionItem>
+ <AccordionButton display="flex" justifyContent="space-between" colorScheme="purple">
+ <Box display="flex">
+ <AccordionIcon />
+ <Text>Physics</Text>
+ </Box>
+ <Switch
+ id="physicsOn"
+ onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
+ isChecked={physics.enabled}
+ colorScheme="purple"
/>
- <EnableSection
- label="Collision"
- infoText="Perfomance sap, disable if slow"
- value={physics.collision}
- onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
+ </AccordionButton>
+ <AccordionPanel>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.200" />}
+ align="stretch"
>
+ <EnableSection
+ label="Gravity"
+ value={physics.gravityOn}
+ onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
+ >
+ <SliderWithInfo
+ label="Strength"
+ value={physics.gravity * 10}
+ onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })}
+ />
+ </EnableSection>
<SliderWithInfo
- value={physics.collisionStrength * 10}
- onChange={(value) => setPhysics({ ...physics, collisionStrength: value / 10 })}
- label="Strength"
+ value={-physics.charge / 100}
+ onChange={(value) => setPhysics({ ...physics, charge: -100 * value })}
+ label="Repulsive Force"
/>
- </EnableSection>
- <SliderWithInfo
- value={physics.linkStrength * 5}
- onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })}
- label="Link Force"
- />
- <SliderWithInfo
- label="Link Iterations"
- value={physics.linkIts}
- onChange={(value) => setPhysics({ ...physics, linkIts: value })}
- min={0}
- max={6}
- step={1}
- infoText="How many links down the line the physics of a single node affects (Slow)"
- />
- <SliderWithInfo
- label="Viscosity"
- value={physics.velocityDecay * 10}
- onChange={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })}
- />
- </VStack>
- <Box>
- <Accordion allowToggle>
- <AccordionItem>
- <AccordionButton>
- <Text>Advanced</Text>
- <AccordionIcon />
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.200" />}
- align="stretch"
- >
- <SliderWithInfo
- label="Iterations per tick"
- min={1}
- max={10}
- step={1}
- value={physics.iterations}
- onChange={(v) => setPhysics({ ...physics, iterations: v })}
- infoText="Number of times the physics simulation iterates per simulation step"
- />
- <SliderWithInfo
- label="Stabilization rate"
- value={physics.alphaDecay * 50}
- onChange={(value) => setPhysics({ ...physics, alphaDecay: value / 50 })}
- />
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
- </Box>
- {/* </VStack> */}
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <AccordionIcon />
- Visual
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.200" />}
- align="stretch"
- >
- <SliderWithInfo
- label="Node size"
- value={physics.nodeRel}
- onChange={(value) => setPhysics({ ...physics, nodeRel: value })}
- />
- <SliderWithInfo
- label="Link width"
- value={physics.linkWidth}
- onChange={(value) => setPhysics({ ...physics, linkWidth: value })}
- />
- <EnableSection
- label="Labels"
- value={physics.labels}
- onChange={() => setPhysics({ ...physics, labels: !physics.labels })}
- >
+ <EnableSection
+ label="Collision"
+ infoText="Perfomance sap, disable if slow"
+ value={physics.collision}
+ onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
+ >
+ <SliderWithInfo
+ value={physics.collisionStrength * 10}
+ onChange={(value) => setPhysics({ ...physics, collisionStrength: value / 10 })}
+ label="Strength"
+ />
+ </EnableSection>
<SliderWithInfo
- label="Label Appearance Scale"
- value={physics.labelScale * 5}
- onChange={(value) => setPhysics({ ...physics, labelScale: value / 5 })}
+ value={physics.linkStrength * 5}
+ onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })}
+ label="Link Force"
/>
- </EnableSection>
- <EnableSection
- label="Directional Particles"
- value={physics.particles}
- onChange={() => setPhysics({ ...physics, particles: !physics.particles })}
- >
<SliderWithInfo
- label="Particle Number"
- value={physics.particlesNumber}
- max={5}
+ label="Link Iterations"
+ value={physics.linkIts}
+ onChange={(value) => setPhysics({ ...physics, linkIts: value })}
+ min={0}
+ max={6}
step={1}
- onChange={(value) => setPhysics({ ...physics, particlesNumber: value })}
+ infoText="How many links down the line the physics of a single node affects (Slow)"
/>
<SliderWithInfo
- label="Particle Size"
- value={physics.particlesWidth}
- onChange={(value) => setPhysics({ ...physics, particleWidth: value })}
+ label="Viscosity"
+ value={physics.velocityDecay * 10}
+ onChange={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })}
/>
- </EnableSection>
- <EnableSection
- label="Highlight"
- onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })}
- value={physics.highlight}
+ </VStack>
+ <Box>
+ <Accordion allowToggle>
+ <AccordionItem>
+ <AccordionButton>
+ <Text>Advanced</Text>
+ <AccordionIcon />
+ </AccordionButton>
+ <AccordionPanel>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.200" />}
+ align="stretch"
+ >
+ <SliderWithInfo
+ label="Iterations per tick"
+ min={1}
+ max={10}
+ step={1}
+ value={physics.iterations}
+ onChange={(v) => setPhysics({ ...physics, iterations: v })}
+ infoText="Number of times the physics simulation iterates per simulation step"
+ />
+ <SliderWithInfo
+ label="Stabilization rate"
+ value={physics.alphaDecay * 50}
+ onChange={(value) => setPhysics({ ...physics, alphaDecay: value / 50 })}
+ />
+ </VStack>
+ </AccordionPanel>
+ </AccordionItem>
+ </Accordion>
+ </Box>
+ {/* </VStack> */}
+ </AccordionPanel>
+ </AccordionItem>
+ <AccordionItem>
+ <AccordionButton>
+ <AccordionIcon />
+ Visual
+ </AccordionButton>
+ <AccordionPanel>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.200" />}
+ align="stretch"
>
<SliderWithInfo
- label="Highlight Link Thickness Multiplier"
- value={physics.highlightLinkSize}
- onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })}
+ label="Node size"
+ value={physics.nodeRel}
+ onChange={(value) => setPhysics({ ...physics, nodeRel: value })}
/>
<SliderWithInfo
- label="Highlight Node Size Multiplier"
- value={physics.highlightNodeSize}
- onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })}
+ label="Link width"
+ value={physics.linkWidth}
+ onChange={(value) => setPhysics({ ...physics, linkWidth: value })}
/>
- <Flex justifyContent="space-between">
- <Text> Highlight node color </Text>
- </Flex>
- <Flex justifyContent="space-between">
- <Text> Highlight link color </Text>
- </Flex>
- </EnableSection>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <AccordionIcon />
- Behavior
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.200" />}
- align="stretch"
- >
- <Box display="flex" justifyContent="space-between" alignItems="center">
- <Text>Hover Higlight</Text>
- <Menu>
- <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
- {physics.hover}
- </MenuButton>
- <MenuList>
- <MenuItem>Off</MenuItem>
- <MenuItem>On</MenuItem>
- </MenuList>
- </Menu>
- </Box>
- <Box display="flex" justifyContent="space-between">
- <Text>Click</Text>
- </Box>
- <Box display="flex" justifyContent="space-between">
- <Text>Double-click</Text>
- </Box>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
+ <EnableSection
+ label="Labels"
+ value={physics.labels}
+ onChange={() => setPhysics({ ...physics, labels: !physics.labels })}
+ >
+ <SliderWithInfo
+ label="Label Appearance Scale"
+ value={physics.labelScale * 5}
+ onChange={(value) => setPhysics({ ...physics, labelScale: value / 5 })}
+ />
+ </EnableSection>
+ <EnableSection
+ label="Directional Particles"
+ value={physics.particles}
+ onChange={() => setPhysics({ ...physics, particles: !physics.particles })}
+ >
+ <SliderWithInfo
+ label="Particle Number"
+ value={physics.particlesNumber}
+ max={5}
+ step={1}
+ onChange={(value) => setPhysics({ ...physics, particlesNumber: value })}
+ />
+ <SliderWithInfo
+ label="Particle Size"
+ value={physics.particlesWidth}
+ onChange={(value) => setPhysics({ ...physics, particleWidth: value })}
+ />
+ </EnableSection>
+ <EnableSection
+ label="Highlight"
+ onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })}
+ value={physics.highlight}
+ >
+ <SliderWithInfo
+ label="Highlight Link Thickness Multiplier"
+ value={physics.highlightLinkSize}
+ onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })}
+ />
+ <SliderWithInfo
+ label="Highlight Node Size Multiplier"
+ value={physics.highlightNodeSize}
+ onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })}
+ />
+ <Flex justifyContent="space-between">
+ <Text> Highlight node color </Text>
+ </Flex>
+ <Flex justifyContent="space-between">
+ <Text> Highlight link color </Text>
+ </Flex>
+ </EnableSection>
+ </VStack>
+ </AccordionPanel>
+ </AccordionItem>
+ <AccordionItem>
+ <AccordionButton>
+ <AccordionIcon />
+ Behavior
+ </AccordionButton>
+ <AccordionPanel>
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.200" />}
+ align="stretch"
+ >
+ <Box display="flex" justifyContent="space-between" alignItems="center">
+ <Text>Hover Higlight</Text>
+ <Menu>
+ <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+ {physics.hover}
+ </MenuButton>
+ <MenuList>
+ <MenuItem>Off</MenuItem>
+ <MenuItem>On</MenuItem>
+ </MenuList>
+ </Menu>
+ </Box>
+ <Box display="flex" justifyContent="space-between">
+ <Text>Click</Text>
+ </Box>
+ <Box display="flex" justifyContent="space-between">
+ <Text>Double-click</Text>
+ </Box>
+ </VStack>
+ </AccordionPanel>
+ </AccordionItem>
+ </Accordion>
+ </Scrollbars>
</Box>
)
}
@@ -681,37 +677,27 @@ export const Graph = function (props: GraphProps) {
return
}
+ const theme = useTheme()
+ console.log(theme)
const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = {
graphData: scopedGraphData,
width: windowWidth,
height: windowHeight,
- backgroundColor: '#242730',
+ backgroundColor: theme.white,
nodeLabel: (node) => (node as OrgRoamNode).title,
nodeColor: (node) => {
if (!physics.colorful) {
if (Object.keys(highlightedNodes).length === 0) {
return 'rgb(100, 100, 100)'
}
- return highlightedNodes[node.id!] ? '#a991f1' : 'rgb(50, 50, 50)'
+ return highlightedNodes[node.id!] ? theme.blue['500'] : 'rgb(50, 50, 50)'
}
- const palette = [
- '#ff665c',
- '#e69055',
- '#7bc275',
- '#4db5bd',
- '#FCCE7B',
- '#51afef',
- '#1f5582',
- '#C57BDB',
- '#a991f1',
- '#5cEfFF',
- '#6A8FBF',
- ]
-
- return palette[
- numbereWithinRange(linksByNodeId[node.id!]?.length ?? 0, 0, palette.length - 1)
- ]
+ const palette = ['pink', 'purple', 'blue', 'cyan', 'teal', 'green', 'yellow', 'orange', 'red']
+
+ return theme.colors[
+ palette[numbereWithinRange(linksByNodeId[node.id!]?.length ?? 0, 0, palette.length - 1)]
+ ][500]
},
nodeRelSize: physics.nodeRel,
nodeVal: (node) => {
@@ -778,7 +764,7 @@ export const Graph = function (props: GraphProps) {
(link.source as NodeObject).id! === centralHighlightedNode?.id! ||
(link.target as NodeObject).id! === centralHighlightedNode?.id!
- return linkIsHighlighted ? '#a991f1' : '#666666'
+ return linkIsHighlighted ? theme.colors.purple[500] : theme.colors.gray[400]
},
linkWidth: (link) => {
return physics.linkWidth
diff --git a/yarn.lock b/yarn.lock
index e3efd15..db77246 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -945,6 +945,91 @@
"@react-hook/event" "^1.2.1"
"@react-hook/throttle" "^2.2.0"
+"@react-spring/animated@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.2.4.tgz#062ecc0fdfef89f2541a42d8500428b70035f879"
+ integrity sha512-AfV6ZM8pCCAT29GY5C8/1bOPjZrv/7kD0vedjiE/tEYvNDwg9GlscrvsTViWR2XykJoYrDfdkYArrldWpsCJ5g==
+ dependencies:
+ "@react-spring/shared" "~9.2.0"
+ "@react-spring/types" "~9.2.0"
+
+"@react-spring/core@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.2.4.tgz#275a4a065e3a315a4f5fb28c9a6f62ce718c25d6"
+ integrity sha512-R+PwyfsjiuYCWqaTTfCpYpRmsP0h87RNm7uxC1Uxy7QAHUfHEm2sAHn+AdHPwq/MbVwDssVT8C5yf2WGcqiXGg==
+ dependencies:
+ "@react-spring/animated" "~9.2.0"
+ "@react-spring/shared" "~9.2.0"
+ "@react-spring/types" "~9.2.0"
+
+"@react-spring/konva@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.4.tgz#e467b24b3b110ba496526c9001439ce561641e0d"
+ integrity sha512-19anDOIkfjcydDTfGgVIuZ3lruZxKubYGs9oHCswaP8SRLj7c1kkopJHUr/S4LXGxiIdqdF0XucWm0iTEPEq4w==
+ dependencies:
+ "@react-spring/animated" "~9.2.0"
+ "@react-spring/core" "~9.2.0"
+ "@react-spring/shared" "~9.2.0"
+ "@react-spring/types" "~9.2.0"
+
+"@react-spring/native@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.4.tgz#0fd335a44c05023f5428df444d8f1aa3da7abfc9"
+ integrity sha512-xKJWKh5qOhSclpL3iuGwJRLoZzTNvlBEnIrMs8yh8xvX6z9Lmnu4uGu5DpfrnM1GzBvRoktoCoLEx/VcEYFSng==
+ dependencies:
+ "@react-spring/animated" "~9.2.0"
+ "@react-spring/core" "~9.2.0"
+ "@react-spring/shared" "~9.2.0"
+ "@react-spring/types" "~9.2.0"
+
+"@react-spring/rafz@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.2.4.tgz#44793e9adc14dd0dcd1573d094368af11a89d73a"
+ integrity sha512-SOKf9eue+vAX+DGo7kWYNl9i9J3gPUlQjifIcV9Bzw9h3i30wPOOP0TjS7iMG/kLp2cdHQYDNFte6nt23VAZkQ==
+
+"@react-spring/shared@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.4.tgz#f9cc66ac5308a77293330a18518e34121f4008c1"
+ integrity sha512-ZEr4l2BxmyFRUvRA2VCkPfCJii4E7cGkwbjmTBx1EmcGrOnde/V2eF5dxqCTY3k35QuCegkrWe0coRJVkh8q2Q==
+ dependencies:
+ "@react-spring/rafz" "~9.2.0"
+ "@react-spring/types" "~9.2.0"
+
+"@react-spring/three@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.4.tgz#849c97658a6e1410b6f823ad21e2ee33feada820"
+ integrity sha512-ljFig7XW099VWwRPKPUf+4yYLivp/sSWXN3oO5SJOF/9BSoV1quS/9chZ5Myl5J14od3CsHf89Tv4FdlX5kHlA==
+ dependencies:
+ "@react-spring/animated" "~9.2.0"
+ "@react-spring/core" "~9.2.0"
+ "@react-spring/shared" "~9.2.0"
+ "@react-spring/types" "~9.2.0"
+
+"@react-spring/types@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.4.tgz#2365ce9d761f548a9adcb2cd68714bf26765a5de"
+ integrity sha512-zHUXrWO8nweUN/ISjrjqU7GgXXvoEbFca1CgiE0TY0H/dqJb3l+Rhx8ecPVNYimzFg3ZZ1/T0egpLop8SOv4aA==
+
+"@react-spring/web@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.4.tgz#c6d5464a954bfd0d7bc90117050f796a95ebfa08"
+ integrity sha512-vtPvOalLFvuju/MDBtoSnCyt0xXSL6Amyv82fljOuWPl1yGd4M1WteijnYL9Zlriljl0a3oXcPunAVYTD9dbDQ==
+ dependencies:
+ "@react-spring/animated" "~9.2.0"
+ "@react-spring/core" "~9.2.0"
+ "@react-spring/shared" "~9.2.0"
+ "@react-spring/types" "~9.2.0"
+
+"@react-spring/zdog@~9.2.0":
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.4.tgz#db1d1924fe9920e917d889c4d3bb138bd0885cf1"
+ integrity sha512-rv7ptedS37SHr6yuCbRkUErAzAhebdgt8f4KUtZWzseC+7qLNkaZWf+uujgsb881qAuX9b9yz8rre9UKeYepgw==
+ dependencies:
+ "@react-spring/animated" "~9.2.0"
+ "@react-spring/core" "~9.2.0"
+ "@react-spring/shared" "~9.2.0"
+ "@react-spring/types" "~9.2.0"
+
"@rushstack/eslint-patch@^1.0.6":
version "1.0.6"
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz#023d72a5c4531b4ce204528971700a78a85a0c50"
@@ -1065,6 +1150,11 @@ acorn@^7.4.0:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
[email protected]:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
+ integrity sha1-0ME1RB+oAUqBN5BFMQlvZ/KPJjo=
+
aframe-extras@^6.1:
version "6.1.1"
resolved "https://registry.yarnpkg.com/aframe-extras/-/aframe-extras-6.1.1.tgz#6f158b6c4da12e77d00fd0b97dfe1c72245327df"
@@ -2007,6 +2097,15 @@ document-register-element@dmarcos/document-register-element#8ccc532b7f3744be9545
version "0.5.4"
resolved "https://codeload.github.com/dmarcos/document-register-element/tar.gz/8ccc532b7f3744be954574caf3072a5fd260ca90"
+dom-css@^2.0.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
+ integrity sha1-/bwtWgFdCj4YcuEUcrvQ57nmogI=
+ dependencies:
+ add-px-to-style "1.0.0"
+ prefix-style "2.0.1"
+ to-camel-case "1.0.0"
+
dom-walk@^0.1.0:
version "0.1.2"
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
@@ -2679,6 +2778,11 @@ [email protected]:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+hex-rgb@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-5.0.0.tgz#e2c9eb6a37498d66c5a350a221ed4c2c7d1a92d6"
+ integrity sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==
+
hey-listen@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
@@ -3740,6 +3844,11 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
+performance-now@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+ integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
phin@^2.9.1:
version "2.9.3"
resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
@@ -3814,6 +3923,11 @@ [email protected]:
nanoid "^3.1.22"
source-map "^0.6.1"
[email protected]:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
+ integrity sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY=
+
prelude-ls@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -3849,7 +3963,7 @@ promise-polyfill@^3.1.0:
resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-3.1.0.tgz#62952b01d059b115b432763b7ef461b80f6df47d"
integrity sha1-YpUrAdBZsRW0MnY7fvRhuA9t9H0=
[email protected], prop-types@^15.6.2, prop-types@^15.7, prop-types@^15.7.2:
[email protected], prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -3930,6 +4044,13 @@ [email protected]:
dependencies:
inherits "~2.0.3"
+raf@^3.1.0:
+ version "3.4.1"
+ resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+ integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+ dependencies:
+ performance-now "^2.1.0"
+
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -3962,6 +4083,15 @@ react-clientside-effect@^1.2.2:
dependencies:
"@babel/runtime" "^7.12.13"
+react-custom-scrollbars-2@^4.4.0:
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/react-custom-scrollbars-2/-/react-custom-scrollbars-2-4.4.0.tgz#6cc237abc18f5ab32b5392b336e6f072c2b4cfc1"
+ integrity sha512-I+oxZ9rfHfvYm85jdH2lQqpzwNr/ZAdYB8htm6R/hwRGoIEK31jq+YE6MmFwBzuO7C5zcAtH5HN9vwZxnW61NQ==
+ dependencies:
+ dom-css "^2.0.0"
+ prop-types "^15.5.10"
+ raf "^3.1.0"
+
[email protected]:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -4042,6 +4172,18 @@ [email protected]:
use-callback-ref "^1.2.3"
use-sidecar "^1.0.1"
+react-spring@^9.2.4:
+ version "9.2.4"
+ resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.4.tgz#9d89b0321664d594f957dca9459b13d94b3dfa39"
+ integrity sha512-bMjbyTW0ZGd+/h9cjtohLqCwOGqX2OuaTvalOVfLCGmhzEg/u3GgopI3LAm4UD2Br3MNdVdGgNVoESg4MGqKFQ==
+ dependencies:
+ "@react-spring/core" "~9.2.0"
+ "@react-spring/konva" "~9.2.0"
+ "@react-spring/native" "~9.2.0"
+ "@react-spring/three" "~9.2.0"
+ "@react-spring/web" "~9.2.0"
+ "@react-spring/zdog" "~9.2.0"
+
react-style-singleton@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -4658,11 +4800,23 @@ to-arraybuffer@^1.0.0:
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
[email protected]:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
+ integrity sha1-GlYFSy+daWKYzmamCJcyK29CPkY=
+ dependencies:
+ to-space-case "^1.0.0"
+
to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+to-no-case@^1.0.0:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
+ integrity sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo=
+
to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -4670,6 +4824,13 @@ to-regex-range@^5.0.1:
dependencies:
is-number "^7.0.0"
+to-space-case@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
+ integrity sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=
+ dependencies:
+ to-no-case "^1.0.0"
+
toggle-selection@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
@@ -4790,6 +4951,11 @@ use-callback-ref@^1.2.1, use-callback-ref@^1.2.3:
resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
+use-constant@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/use-constant/-/use-constant-1.1.0.tgz#76d36a0edf16d4cc8565361f522b55da5f8f3f22"
+ integrity sha512-yrflEfv7Xv/W8WlYV6nwRH01K+2BpR4cWxuzY03yPRjYZuHixhGlvnJN5O2bRYrXGpJ4zy8QjFABGIQ2QXeBOA==
+
use-sidecar@^1.0.1:
version "1.0.5"
resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 15:58:36 +0000