summaryrefslogtreecommitdiff
path: root/pages/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'pages/index.tsx')
-rw-r--r--pages/index.tsx210
1 files changed, 153 insertions, 57 deletions
diff --git a/pages/index.tsx b/pages/index.tsx
index db1103e..5bcbe94 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -48,6 +48,7 @@ import {
MenuItemOption,
Flex,
useTheme,
+ Select,
} from '@chakra-ui/react'
import { InfoOutlineIcon, RepeatClockIcon, ChevronDownIcon, SettingsIcon } from '@chakra-ui/icons'
@@ -68,6 +69,19 @@ export type Scope = {
nodeIds: string[]
}
+const options: string[] = []
+const algorithms: { [name: string]: (percent: number) => number } = {}
+
+for (let type in Easing) {
+ for (let mode in (Easing as any)[type]) {
+ let name = type + mode
+ if (name === 'LinearNone') {
+ name = 'Linear'
+ }
+ options.push(name)
+ algorithms[name] = (Easing as any)[type][mode]
+ }
+}
const initialPhysics = {
enabled: true,
charge: -350,
@@ -100,6 +114,10 @@ const initialPhysics = {
highlightNodeSize: 2,
highlightLinkSize: 2,
highlightAnim: false,
+ animationSpeed: 250,
+ algorithms: algorithms,
+ algorithmOptions: options,
+ algorithmName: 'CubicOut',
orphans: false,
}
@@ -151,12 +169,10 @@ export function GraphPage() {
useEffect(() => {
const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id')
-
trackEmacs.addEventListener('message', (e) => {
const emacsNodeId = e.data
setEmacsNodeId(emacsNodeId)
})
-
updateGraphData()
}, [])
@@ -289,6 +305,27 @@ export const EnableSection = (props: EnableSectionProps) => {
)
}
+export interface DropDownMenuProps {
+ textArray: string[]
+ onClickArray: any
+ displayValue: string
+}
+
+export const DropDownMenu = (props: DropDownMenuProps) => {
+ const { textArray, onClickArray, displayValue } = props
+ return (
+ <Menu>
+ <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+ {displayValue}
+ </MenuButton>
+ <MenuList>
+ {textArray.map((option, i) => {
+ ;<MenuItem onClick={onClickArray[i]}> {option} </MenuItem>
+ })}
+ </MenuList>
+ </Menu>
+ )
+}
/* style={{
* position: "absolute",
* zIndex: 2000,
@@ -304,7 +341,7 @@ export interface TweakProps {
threeDim: boolean
onClose: () => void
}
-export const Tweaks = function (props: TweakProps) {
+export const Tweaks = (props: TweakProps) => {
const { physics, setPhysics, threeDim, onClose } = props
return (
<Box
@@ -511,16 +548,41 @@ export const Tweaks = function (props: TweakProps) {
onChange={(value) => setPhysics({ ...physics, particlesWidth: value })}
/>
</EnableSection>
- <Box>
- <Text>Kill orphans</Text>
- <Switch
- colorScheme="purple"
- onChange={() => {
- setPhysics({ ...physics, highlightAnim: !physics.highlightAnim })
- }}
- isChecked={physics.highlightAnim}
- ></Switch>
- </Box>
+ <EnableSection
+ label="Highlight Animation"
+ onChange={() => {
+ setPhysics({ ...physics, highlightAnim: !physics.highlightAnim })
+ }}
+ value={physics.highlightAnim}
+ >
+ <SliderWithInfo
+ label="Animation speed"
+ onChange={(v) => setPhysics({ ...physics, animationSpeed: v })}
+ value={physics.animationSpeed}
+ infoText="Slower speed has a chance of being buggy"
+ min={50}
+ max={1000}
+ step={10}
+ />
+ <Select
+ placeholder={physics.algorithmName}
+ onChange={(v) => setPhysics({ ...physics, algorithmName: v.target.value })}
+ >
+ {physics.algorithmOptions.map((opt, i) => (
+ <option key={i} value={physics.algorithmOptions[i]}>
+ {' '}
+ {physics.algorithmOptions[i]}
+ </option>
+ ))}
+ </Select>
+ {/* <DropDownMenu
+ displayValue={physics.algorithmName}
+ textArray={physics.algorithmOptions}
+ onClickArray={physics.algorithmOptions.map((option) =>
+ setPhysics({ ...physics, algorithmName: { option } }),
+ )}
+ /> */}
+ </EnableSection>
<EnableSection
label="Highlight"
onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })}
@@ -736,24 +798,39 @@ export const Graph = function (props: GraphProps) {
}))
return
}
+ // easing algorithms
const [opacity, setOpacity] = useState<number>(1)
const [fadeIn, cancel] = useAnimation((x) => setOpacity(x), {
- duration: 300,
- algorithm: Easing.Quadratic.Out,
- })
- const [fadeOut, fadeOutCancel] = useAnimation((x) => setOpacity(-1 * (x - 1)), {
- duration: 300,
- algorithm: Easing.Quadratic.Out,
+ duration: physics.animationSpeed,
+ algorithm: physics.algorithms[physics.algorithmName],
})
+ const [fadeOut, fadeOutCancel] = useAnimation(
+ (x) => setOpacity(Math.min(opacity, -1 * (x - 1))),
+ {
+ duration: physics.animationSpeed,
+ algorithm: physics.algorithms[physics.algorithmName],
+ },
+ )
const lastHoverNode = useRef()
useEffect(() => {
+ console.log(physics.algorithms[physics.algorithmName])
hoverNode && (lastHoverNode.current = hoverNode)
if (!physics.highlightAnim) {
return
}
- hoverNode ? fadeIn() : fadeOut()
+ if (hoverNode) {
+ fadeIn()
+ } else {
+ // if (opacity > 0.7) {
+ cancel()
+ opacity > 0.5 ? fadeOut() : setOpacity(0)
+ // } else {
+ // cancel()
+ // setOpacity(0)
+ // }
+ }
}, [hoverNode])
const theme = useTheme()
//this was just easier than getting an actual package
@@ -793,18 +870,23 @@ export const Graph = function (props: GraphProps) {
nodeRelSize: physics.nodeRel,
nodeVal: (node) => {
const links = linksByNodeId[node.id!] ?? []
- const wasNeighbor = (link) =>
- link.source === lastHoverNode.current?.id! || link.target === lastHoverNode.current?.id!
- const wasHighlightedNode = links.some(wasNeighbor)
const basicSize = 3 + links.length
- const highlightSize = highlightedNodes[node.id!]
- ? 1 + opacity * (physics.highlightNodeSize - 1)
- : lastHoverNode.current?.id! === node.id!
- ? 1 + opacity * (physics.highlightNodeSize - 1)
- : wasHighlightedNode
- ? 1 + opacity * (physics.highlightNodeSize - 1)
- : 1
- return basicSize * highlightSize
+ if (physics.highlightAnim) {
+ const wasNeighbor = (link) =>
+ link.source === lastHoverNode.current?.id! || link.target === lastHoverNode.current?.id!
+ const wasHighlightedNode = links.some(wasNeighbor)
+ const highlightSize = highlightedNodes[node.id!]
+ ? 1 + opacity * (physics.highlightNodeSize - 1)
+ : lastHoverNode.current?.id! === node.id!
+ ? 1 + opacity * (physics.highlightNodeSize - 1)
+ : wasHighlightedNode
+ ? 1 + opacity * (physics.highlightNodeSize - 1)
+ : 1
+ return basicSize * highlightSize
+ } else {
+ const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1
+ return basicSize * highlightSize
+ }
},
nodeCanvasObject: (node, ctx, globalScale) => {
if (!physics.labels) {
@@ -814,7 +896,8 @@ export const Graph = function (props: GraphProps) {
return
}
- const wasHighlightedNode = linksByNodeId[node.id!].some(
+ const links = linksByNodeId[node.id!] ?? []
+ const wasHighlightedNode = links.some(
(link) =>
link.source === lastHoverNode.current?.id! || link.target === lastHoverNode.current?.id!,
)
@@ -831,15 +914,24 @@ export const Graph = function (props: GraphProps) {
const fadeFactor = Math.min((3 * (globalScale - physics.labelScale)) / physics.labelScale, 1)
// draw label background
- const backgroundOpacity =
- Object.keys(highlightedNodes).length === 0
- ? lastHoverNode.current?.id! === node.id
- ? 0.5
- : 0.5 * fadeFactor * (-1 * (0.5 * opacity - 1))
- : highlightedNodes[node.id!] || wasHighlightedNode
- ? 0.5
- : 0.5 * fadeFactor * (-1 * (0.5 * opacity - 1))
-
+ const getLabelOpacity = () => {
+ if (physics.highlightAnim) {
+ return Object.keys(highlightedNodes).length === 0
+ ? lastHoverNode.current?.id! === node.id
+ ? 1
+ : 1 * fadeFactor * (-1 * (0.5 * opacity - 1))
+ : highlightedNodes[node.id!] || wasHighlightedNode
+ ? 1
+ : 1 * fadeFactor * (-1 * (0.5 * opacity - 1))
+ } else {
+ return Object.keys(highlightedNodes).length === 0
+ ? 1 * fadeFactor
+ : highlightedNodes[node.id!]
+ ? 1
+ : 1 * fadeFactor
+ }
+ }
+ const backgroundOpacity = 0.5 * getLabelOpacity()
ctx.fillStyle = `rgba(20, 20, 20, ${backgroundOpacity})`
ctx.fillRect(
node.x! - bckgDimensions[0] / 2,
@@ -848,12 +940,7 @@ export const Graph = function (props: GraphProps) {
)
// draw label text
- const textOpacity =
- Object.keys(highlightedNodes).length === 0
- ? fadeFactor
- : highlightedNodes[node.id!] || wasHighlightedNode
- ? 1
- : 0.5 * fadeFactor * -1 * (0.5 * opacity - 1)
+ const textOpacity = 2 * backgroundOpacity
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillStyle = `rgb(255, 255, 255, ${textOpacity})`
@@ -867,23 +954,29 @@ export const Graph = function (props: GraphProps) {
const linkIsHighlighted =
(link.source as NodeObject).id! === centralHighlightedNode?.id! ||
(link.target as NodeObject).id! === centralHighlightedNode?.id!
- const linkWasHighlighted =
- (link.source as NodeObject).id! === lastHoverNode.current?.id! ||
- (link.target as NodeObject).id! === lastHoverNode.current?.id!
- return linkIsHighlighted
- ? theme.colors.purple['inter'](opacity) /*the.colors.purple[500]*/
- : linkWasHighlighted
- ? theme.colors.purple['inter'](opacity) /*the.colors.purple[500]*/
- : theme.colors.gray[500]
+ if (physics.highlightAnim) {
+ const linkWasHighlighted =
+ (link.source as NodeObject).id! === lastHoverNode.current?.id! ||
+ (link.target as NodeObject).id! === lastHoverNode.current?.id!
+ return linkIsHighlighted
+ ? theme.colors.purple['inter'](opacity) /*the.colors.purple[500]*/
+ : linkWasHighlighted
+ ? theme.colors.purple['inter'](opacity) /*the.colors.purple[500]*/
+ : theme.colors.gray[500]
+ } else {
+ return linkIsHighlighted ? theme.colors.purple[500] : theme.colors.gray[500]
+ }
},
linkWidth: (link) => {
const linkIsHighlighted =
(link.source as NodeObject).id! === centralHighlightedNode?.id! ||
(link.target as NodeObject).id! === centralHighlightedNode?.id!
+ if (!physics.highlightAnim) {
+ return linkIsHighlighted ? physics.linkWidth * physics.highlightLinkSize : physics.linkWidth
+ }
const linkWasHighlighted =
(link.source as NodeObject).id! === lastHoverNode.current?.id! ||
(link.target as NodeObject).id! === lastHoverNode.current?.id!
-
return linkIsHighlighted
? physics.linkWidth * (1 + opacity * (physics.highlightLinkSize - 1))
: linkWasHighlighted
@@ -907,7 +1000,10 @@ export const Graph = function (props: GraphProps) {
if (!physics.hover) {
return
}
- setHoverNode(node)
+ const timer = setTimeout(() => {
+ setHoverNode(node)
+ }, 30)
+ return () => clearTimeout(timer)
},
}