summaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorKirill Rogovoy <[email protected]>2021-07-23 11:02:26 +0300
committerKirill Rogovoy <[email protected]>2021-07-23 11:02:26 +0300
commit73308af061af5e17ac7d4a73fa027a2f303c70dd (patch)
tree816fb8231e13f58f7afe822742513b3150cdc871 /pages
parentb8c58914cc1e251ce161905340647b6824d0a7c4 (diff)
Update graph data when Emacs node changes + minor improvements
Diffstat (limited to 'pages')
-rw-r--r--pages/index.tsx98
1 files changed, 43 insertions, 55 deletions
diff --git a/pages/index.tsx b/pages/index.tsx
index c278394..a020545 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -147,19 +147,8 @@ export function GraphPage() {
const nodeByIdRef = useRef<NodeById>({})
const linksByNodeIdRef = useRef<LinksByNodeId>({})
- useEffect(() => {
- const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id')
-
- trackEmacs.addEventListener('message', (e) => {
- const emacsNodeId = e.data
- setEmacsNodeId(emacsNodeId)
- })
- fetch('http://localhost:35901/theme')
- .then((res) => res.json())
- .then((emacsTheme) => {
- setTheme(emacsTheme)
- })
- fetch('http://localhost:35901/graph')
+ const updateGraphData = () => {
+ return fetch('http://localhost:35901/graph')
.then((res) => res.json())
.then((orgRoamGraphData: OrgRoamGraphReponse) => {
nodeByIdRef.current = Object.fromEntries(
@@ -179,8 +168,32 @@ export function GraphPage() {
const orgRoamGraphDataClone = JSON.parse(JSON.stringify(orgRoamGraphData))
setGraphData(orgRoamGraphDataClone)
})
+ }
+
+ useEffect(() => {
+ const trackEmacs = new EventSource('http://127.0.0.1:35901/current-node-id')
+
+ trackEmacs.addEventListener('message', (e) => {
+ const emacsNodeId = e.data
+ setEmacsNodeId(emacsNodeId)
+ })
+
+ fetch('http://localhost:35901/theme')
+ .then((res) => res.json())
+ .then((emacsTheme) => {
+ setTheme(emacsTheme)
+ })
+
+ updateGraphData()
}, [])
+ useEffect(() => {
+ if (!emacsNodeId) {
+ return
+ }
+ updateGraphData()
+ }, [emacsNodeId])
+
const [threeDim, setThreeDim] = useState(false)
const [showTweaks, setShowTweaks] = useState(true)
@@ -554,7 +567,7 @@ export interface GraphProps {
}
export const Graph = function (props: GraphProps) {
- const { physics, graphData, threeDim, linksByNodeId, emacsNodeId } = props
+ const { physics, graphData, threeDim, linksByNodeId, emacsNodeId, nodeById } = props
const graph2dRef = useRef<any>(null)
const graph3dRef = useRef<any>(null)
@@ -625,7 +638,7 @@ export const Graph = function (props: GraphProps) {
nodes: scopedNodes,
links: scopedLinks,
},
- [scope],
+ [scope, JSON.stringify(Object.keys(nodeById))],
)
// make sure the camera position and zoom or fine when the list of nodes to render is changed
@@ -642,31 +655,10 @@ export const Graph = function (props: GraphProps) {
;(async () => {
const fg = threeDim ? graph3dRef.current : graph2dRef.current
const d3 = await d3promise
- if (physics.gravityOn) {
- fg.d3Force('x', d3.forceX().strength(physics.gravity))
- fg.d3Force('y', d3.forceY().strength(physics.gravity))
- if (threeDim) {
- if (physics.galaxy) {
- fg.d3Force('x', d3.forceX().strength(physics.gravity / 5))
- fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5))
- } else {
- fg.d3Force('x', d3.forceX().strength(physics.gravity))
- fg.d3Force('z', d3.forceZ().strength(physics.gravity))
- }
- } else {
- fg.d3Force('z', null)
- }
- } else {
- fg.d3Force('x', null)
- fg.d3Force('y', null)
- threeDim ? fg.d3Force('z', null) : null
- }
- fg.d3Force('link').strength(physics.linkStrength)
- fg.d3Force('link').iterations(physics.linkIts)
- physics.collision
- ? fg.d3Force('collide', d3.forceCollide().radius(20))
- : fg.d3Force('collide', null)
- fg.d3Force('charge').strength(physics.charge)
+ // fg.d3Force('x', null)
+ // fg.d3Force('y', null)
+ fg.d3Force('collide', d3.forceCollide().radius(10))
+ // fg.d3Force('charge').strength(1)
})()
})
@@ -730,9 +722,7 @@ export const Graph = function (props: GraphProps) {
nodeRelSize: physics.nodeRel,
nodeVal: (node) => {
const links = linksByNodeId[node.id!] ?? []
- const basicSize = 3 + links.length
- const highlightSize = highlightedNodes[node.id!] ? physics.highlightNodeSize : 1
- return basicSize * highlightSize
+ return links.length
},
nodeCanvasObject: (node, ctx, globalScale) => {
if (!physics.labels) {
@@ -771,15 +761,15 @@ export const Graph = function (props: GraphProps) {
)
// draw label text
- const textOpacity = (Object.keys(highlightedNodes).length === 0
- ? fadeFactor
- : highlightedNodes[node.id!]
+ const textOpacity =
+ Object.keys(highlightedNodes).length === 0
+ ? fadeFactor
+ : highlightedNodes[node.id!]
? 1
- : 0.3 * fadeFactor)
+ : 0.3 * fadeFactor
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
- ctx.fillStyle =
- `rgb(255, 255, 255, ${textOpacity})`
+ ctx.fillStyle = `rgb(255, 255, 255, ${textOpacity})`
ctx.font = `${fontSize}px Sans-Serif`
ctx.fillText(label, node.x!, node.y!)
},
@@ -793,14 +783,12 @@ export const Graph = function (props: GraphProps) {
return linkIsHighlighted ? '#a991f1' : '#666666'
},
- linkWidth: () => {
- return physics.linkWidth
- },
+ linkWidth: physics.linkWidth,
linkDirectionalParticleWidth: physics.particlesWidth,
- d3AlphaDecay: physics.alphaDecay,
- d3AlphaMin: physics.alphaMin,
- d3VelocityDecay: physics.velocityDecay,
+ // d3AlphaDecay: physics.alphaDecay,
+ // d3AlphaMin: physics.alphaMin,
+ // d3VelocityDecay: physics.velocityDecay,
onNodeClick: onNodeClick,
onBackgroundClick: () => {