diff options
Diffstat (limited to 'pages/index.tsx')
| -rw-r--r-- | pages/index.tsx | 386 |
1 files changed, 300 insertions, 86 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index e298695..75efbfa 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -21,7 +21,7 @@ import { GraphData, NodeObject, LinkObject } from 'force-graph' import { useWindowSize } from '@react-hook/window-size' import { useAnimation } from '@lilib/hooks' -import { Box, useTheme } from '@chakra-ui/react' +import { Box, useDisclosure, useTheme } from '@chakra-ui/react' import { initialPhysics, @@ -31,13 +31,16 @@ import { initialMouse, algos, TagColors, + colorList, } from '../components/config' import { Tweaks } from '../components/tweaks' +import { ContextMenu } from '../components/contextmenu' import { ThemeContext, ThemeContextProps } from '../util/themecontext' import SpriteText from 'three-spritetext' import ReconnectingWebSocket from 'reconnecting-websocket' +import { sendJson } from 'next/dist/next-server/server/api-utils' // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 @@ -92,8 +95,14 @@ export function GraphPage() { const nodeByIdRef = useRef<NodeById>({}) const linksByNodeIdRef = useRef<LinksByNodeId>({}) const tagsRef = useRef<Tags>([]) + const graphRef = useRef<any>(null) + + const currentGraphDataRef = useRef<GraphData>({ nodes: [], links: [] }) const updateGraphData = (orgRoamGraphData: OrgRoamGraphReponse) => { + const currentGraphData = currentGraphDataRef.current + const oldNodeById = nodeByIdRef.current + const oldLinksByNodeId = linksByNodeIdRef.current tagsRef.current = orgRoamGraphData.tags ?? [] const nodesByFile = orgRoamGraphData.nodes.reduce<NodesByFile>((acc, node) => { return { @@ -122,12 +131,40 @@ export function GraphPage() { nodeByIdRef.current = Object.fromEntries(orgRoamGraphData.nodes.map((node) => [node.id, node])) const dirtyLinks = [...orgRoamGraphData.links, ...fileLinks] - const links = dirtyLinks.filter((link) => { + const nonExistantNodes: OrgRoamNode[] = [] + const links = dirtyLinks.map((link) => { const sourceId = link.source as string const targetId = link.target as string - return nodeByIdRef.current[sourceId] && nodeByIdRef.current[targetId] + if (!nodeByIdRef.current[sourceId]) { + nonExistantNodes.push({ + id: sourceId, + tags: ['bad'], + properties: { FILELESS: 'yes', bad: 'yes' }, + file: '', + title: sourceId, + level: 0, + }) + return { ...link, type: 'bad' } + } + if (!nodeByIdRef.current[targetId]) { + nonExistantNodes.push({ + id: targetId, + tags: ['bad'], + properties: { FILELESS: 'yes', bad: 'yes' }, + file: '', + title: targetId, + level: 0, + }) + return { ...link, type: 'bad' } + } + return link }) + nodeByIdRef.current = { + ...nodeByIdRef.current, + ...Object.fromEntries(nonExistantNodes.map((node) => [node.id, node])), + } + linksByNodeIdRef.current = links.reduce<LinksByNodeId>((acc, link) => { return { ...acc, @@ -136,17 +173,108 @@ export function GraphPage() { } }, {}) - const orgRoamGraphDataWithFileLinks = { - ...orgRoamGraphData, + const nodes = [...orgRoamGraphData.nodes, ...nonExistantNodes] + const orgRoamGraphDataWithFileLinksAndBadNdes = { + nodes, links, } - // react-force-graph modifies the graph data implicitly, - // so we make sure there's no overlap between the objects we pass it and - // nodeByIdRef, linksByNodeIdRef - const orgRoamGraphDataClone = JSON.parse(JSON.stringify(orgRoamGraphDataWithFileLinks)) - setGraphData(orgRoamGraphDataClone) + if (!currentGraphData.nodes.length) { + // react-force-graph modifies the graph data implicitly, + // so we make sure there's no overlap between the objects we pass it and + // nodeByIdRef, linksByNodeIdRef + const orgRoamGraphDataClone = JSON.parse( + JSON.stringify(orgRoamGraphDataWithFileLinksAndBadNdes), + ) + console.log(orgRoamGraphDataClone) + currentGraphDataRef.current = orgRoamGraphDataClone + setGraphData(orgRoamGraphDataClone) + return + } + + const newNodes = [ + ...currentGraphData.nodes.map((node: NodeObject) => { + const newNode = nodeByIdRef.current[node?.id!] ?? false + if (!newNode) { + return + } + return { ...node, ...newNode } + }), + ...Object.keys(nodeByIdRef.current) + .filter((id) => !oldNodeById[id]) + .map((id) => { + console.log(id) + return nodeByIdRef.current[id] as NodeObject + }), + ] + + const nodeIndex = newNodes.reduce<{ [id: string]: number }>((acc, node, index) => { + const id = node?.id as string + return { + ...acc, + [id]: index, + } + }, {}) + console.log(newNodes) + console.log(nodeIndex) + /* const currentGraphIndexByLink = currentGraphData.links.reduce<{[key: string]: number}>((acc, link, index) => { +* const [source, target] = normalizeLinkEnds(link) +* const sourceTarget=source+target +* return { +* ...acc, +* [sourceTarget]: index +* } +},{}) */ + /* const newLinks = [ + * ...currentGraphData!.links.filter((link) => { + * const [source, target] = normalizeLinkEnds(link) + * if (!nodeByIdRef.current[source] || !nodeByIdRef.current[target]) { + * return false + * } + * if ( + * !linksByNodeIdRef.current[source]!.some( + * (link) => link.target === target || link.source === target, + * ) && + * !linksByNodeIdRef.current[target]!.some( + * (link) => link.target === source || link.source === source, + * ) + * ) { + * return false + * } + * return true + * }), + * ...Object.keys(linksByNodeIdRef.current).flatMap((id) => { + * if (!oldLinksByNodeId[id]!) { + * return linksByNodeIdRef.current![id!]! + * } + * return ( + * linksByNodeIdRef.current![id]!.filter((link) => { + * const [source, target] = normalizeLinkEnds(link) + * return !oldLinksByNodeId[id]!.some( + * (oldLink) => oldLink.source === source && oldLink.target === target, + * )! + * }) ?? [] + * ) + * }), + * ] + */ + const newerLinks = links.map((link) => { + const [source, target] = normalizeLinkEnds(link) + return { + ...link, + source: newNodes[nodeIndex![source]], + target: newNodes[nodeIndex![target]], + } + }) + const fg = graphRef.current + setGraphData({ nodes: newNodes as NodeObject[], links: newerLinks }) } + useEffect(() => { + if (!graphData) { + return + } + currentGraphDataRef.current = graphData + }, [graphData]) const { setEmacsTheme } = useContext(ThemeContext) @@ -156,7 +284,6 @@ export function GraphPage() { const scopeRef = useRef<Scope>({ nodeIds: [] }) const behaviorRef = useRef(initialBehavior) behaviorRef.current = behavior - const graphRef = useRef<any>(null) const WebSocketRef = useRef<any>(null) scopeRef.current = scope @@ -166,6 +293,9 @@ export function GraphPage() { speed: number = 2000, padding: number = 200, ) => { + if (command === 'color') { + return + } const fg = graphRef.current const sr = scopeRef.current const bh = behaviorRef.current @@ -269,7 +399,7 @@ export function GraphPage() { } return ( - <Box display="flex" alignItems="flex-start" flexDirection="row" height="100%"> + <Box display="flex" alignItems="flex-start" flexDirection="row" height="100%" overflow="hidden"> <Tweaks {...{ physics, @@ -289,7 +419,7 @@ export function GraphPage() { }} tags={tagsRef.current} /> - <Box position="absolute" alignItems="top"> + <Box position="absolute" alignItems="top" overflow="hidden"> <Graph ref={graphRef} nodeById={nodeByIdRef.current!} @@ -360,21 +490,48 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const { emacsTheme } = useContext<ThemeContextProps>(ThemeContext) - const handleClick = (click: string, node: NodeObject) => { + const handleLocal = (node: OrgRoamNode, add: string) => { + if (scope.nodeIds.includes(node.id as string)) { + return + } + if (add === 'replace') { + setScope({ nodeIds: [node.id] }) + return + } + setScope((currentScope: Scope) => ({ + ...currentScope, + nodeIds: [...currentScope.nodeIds, node.id as string], + })) + return + } + + const sendMessageToEmacs = (command: string, data: {}) => { + webSocket.send(JSON.stringify({ command: command, data: data })) + } + const openNodeInEmacs = (node: OrgRoamNode) => { + sendMessageToEmacs('open', { id: node.id }) + } + + const deleteNodeInEmacs = (node: OrgRoamNode) => { + if (node.level !== 0) { + return + } + sendMessageToEmacs('delete', { id: node.id, file: node.file }) + } + + const createNodeInEmacs = (node: OrgRoamNode) => { + sendMessageToEmacs('create', { id: node.id, title: node.title, ref: node.properties.ROAM_REFS }) + } + + const handleClick = (click: string, node: OrgRoamNode) => { switch (click) { //mouse.highlight: case mouse.local: { - if (scope.nodeIds.includes(node.id as string)) { - break - } - setScope((currentScope: Scope) => ({ - ...currentScope, - nodeIds: [...currentScope.nodeIds, node.id as string], - })) + handleLocal(node, behavior.localSame) break } case mouse.follow: { - webSocket.send(node.id) + openNodeInEmacs(node) break } default: @@ -423,8 +580,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const filteredLinksByNodeId = useRef<LinksByNodeId>({}) const filteredGraphData = useMemo(() => { hiddenNodeIdsRef.current = {} - const filteredNodes = graphData.nodes - .filter((nodeArg) => { + const filteredNodes = graphData?.nodes + ?.filter((nodeArg) => { + //sometimes there will be some undefined nodes in the mix + // should probably fix the actual issue, but this is a fix + if (!nodeArg) { + return + } const node = nodeArg as OrgRoamNode if ( filter.tagsBlacklist.length && @@ -440,15 +602,18 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node } return false } - if (filter.fileless_cites && node.properties.FILELESS) { + if (filter.filelessCites && node.properties.FILELESS) { + hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node } + return false + } + if (filter.bad && node.properties.bad) { hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node } return false } return true }) - .filter((nodeArg) => { - const node = nodeArg as OrgRoamNode - const links = linksByNodeId[node.id as string] ?? [] + .filter((node) => { + const links = linksByNodeId[node?.id as string] ?? [] const unhiddenLinks = links.filter( (link) => !hiddenNodeIdsRef.current[link.source] && !hiddenNodeIdsRef.current[link.target], @@ -472,7 +637,12 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const filteredNodeIds = filteredNodes.map((node) => node.id as string) const filteredLinks = graphData.links.filter((link) => { const [sourceId, targetId] = normalizeLinkEnds(link) - if (filter.tagsBlacklist.length || filter.tagsWhitelist.length || filter.fileless_cites) { + if ( + filter.bad || + filter.tagsBlacklist.length || + filter.tagsWhitelist.length || + filter.filelessCites + ) { return ( filteredNodeIds.includes(sourceId as string) && filteredNodeIds.includes(targetId as string) @@ -538,7 +708,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { physics.collision ? d3.forceCollide().radius(physics.collisionStrength) : null, ) })() - }) + }, [physics]) // Normally the graph doesn't update when you just change the physics parameters // This forces the graph to make a small update when you do @@ -588,41 +758,17 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { } const highlightColors = useMemo(() => { - const allColors = visuals.nodeColorScheme.concat( - visuals.linkColorScheme || [], - visuals.linkHighlight || [], - visuals.nodeHighlight || [], - visuals.citeNodeColor || [], - visuals.citeLinkColor || [], - visuals.citeLinkHighlightColor || [], - visuals.refNodeColor || [], - visuals.refLinkColor || [], - visuals.refLinkHighlightColor || [], - ) - return Object.fromEntries( - allColors.map((color) => { + colorList.map((color) => { const color1 = getThemeColor(color) - const crisscross = allColors.map((color2) => [ + const crisscross = colorList.map((color2) => [ color2, d3int.interpolate(color1, getThemeColor(color2)), ]) return [color, Object.fromEntries(crisscross)] }), ) - }, [ - visuals.nodeColorScheme, - visuals.linkHighlight, - visuals.nodeHighlight, - visuals.linkColorScheme, - visuals.refLinkColor, - visuals.refNodeColor, - visuals.citeNodeColor, - visuals.refLinkHighlightColor, - visuals.citeLinkHighlightColor, - visuals.citeLinkColor, - emacsTheme, - ]) + }, [emacsTheme]) const previouslyHighlightedNodes = useMemo(() => { const previouslyHighlightedLinks = linksByNodeId[lastHoverNode.current?.id!] ?? [] @@ -662,11 +808,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { if (!needsHighlighting && !visuals.linkColorScheme) { const nodeColor = getLinkNodeColor(sourceId, targetId) - return getThemeColor(nodeColor) + return highlightColors[nodeColor][visuals.backgroundColor](visuals.highlightFade * opacity) } if (!needsHighlighting) { - return getThemeColor(visuals.linkColorScheme) + return highlightColors[visuals.linkColorScheme][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) } if (!visuals.linkHighlight && !visuals.linkColorScheme) { @@ -686,6 +834,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { } const getNodeColor = (node: OrgRoamNode) => { + const isHighlightingHappening = !!highlightedNodes.length const needsHighlighting = highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] // if we are matching the node color and don't have a highlight color // or we don't have our own scheme and we're not being highlighted @@ -694,16 +843,26 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { } if (tagColors && node.tags.some((tag) => tagColors[tag])) { const tagColor = tagColors[node.tags.filter((tag) => tagColors[tag])[0]] - return getThemeColor(tagColor) + return highlightColors[tagColor][visuals.backgroundColor](visuals.highlightFade * opacity) } if (visuals.citeNodeColor && node.properties.ROAM_REFS && node.properties.FILELESS) { - return getThemeColor(visuals.citeNodeColor) + return needsHighlighting + ? getThemeColor(visuals.citeNodeColor) + : highlightColors[visuals.citeNodeColor][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) } if (visuals.refNodeColor && node.properties.ROAM_REFS) { - return getThemeColor(visuals.refNodeColor) + return needsHighlighting + ? getThemeColor(visuals.refNodeColor) + : highlightColors[visuals.refNodeColor][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) } if (!needsHighlighting) { - return getThemeColor(getNodeColorById(node.id as string)) + return highlightColors[getNodeColorById(node.id as string)][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) } if (!visuals.nodeHighlight) { return getThemeColor(getNodeColorById(node.id as string)) @@ -731,6 +890,31 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { [visuals.labelBackgroundColor, emacsTheme], ) + const nodeSize = (node: NodeObject) => { + const links = linksByNodeId[node.id!] ?? [] + const parentNeighbors = links.length ? links.filter((link) => link.type === 'parent').length : 0 + const basicSize = + 3 + links.length * visuals.nodeSizeLinks - (!filter.parents ? parentNeighbors : 0) + if (visuals.highlightNodeSize === 1) { + return basicSize + } + const highlightSize = + highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] + ? 1 + opacity * (visuals.highlightNodeSize - 1) + : 1 + return basicSize * highlightSize + } + + const [dragging, setDragging] = useState(false) + const { isOpen, onOpen, onClose } = useDisclosure() + const [rightClickedNode, setRightClickedNode] = useState<OrgRoamNode | null>(null) + const [contextPos, setContextPos] = useState([0, 0]) + const openContextMenu = (node: OrgRoamNode, event: any) => { + setContextPos([event.pageX, event.pageY]) + setRightClickedNode(node) + onOpen() + } + const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = { graphData: scopedGraphData, width: windowWidth, @@ -742,21 +926,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { }, nodeRelSize: visuals.nodeRel, nodeVal: (node) => { - const links = linksByNodeId[node.id!] ?? [] - const parentNeighbors = links.length - ? links.filter((link) => link.type === 'parent').length - : 0 - const basicSize = 3 + links.length - (!filter.parents ? parentNeighbors : 0) - const highlightSize = - highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] - ? 1 + opacity * (visuals.highlightNodeSize - 1) - : 1 - return basicSize * highlightSize + return nodeSize(node) }, nodeCanvasObject: (node, ctx, globalScale) => { if (!node) { return } + if (dragging) { + return + } if (!visuals.labels) { return @@ -774,7 +952,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const nodeTitle = (node as OrgRoamNode).title! const label = nodeTitle.substring(0, Math.min(nodeTitle.length, 40)) // const label = 'label' - const fontSize = 12 / globalScale + const fontSize = 14 / (0.75 * Math.min(Math.max(0.5, globalScale), 3)) const textWidth = ctx.measureText(label).width const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) as [ number, @@ -793,16 +971,16 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { } return highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] ? Math.max(fadeFactor, opacity) - : 1 * fadeFactor * (-1 * (0.5 * opacity - 1)) + : 1 * fadeFactor * (-1 * (visuals.highlightFade * opacity - 1)) } - + const nodeS = 8 * Math.cbrt(nodeSize(node) * visuals.nodeRel) if (visuals.labelBackgroundColor && visuals.labelBackgroundOpacity) { const backgroundOpacity = getLabelOpacity() * visuals.labelBackgroundOpacity const labelBackground = hexToRGBA(labelBackgroundColor, backgroundOpacity) ctx.fillStyle = labelBackground ctx.fillRect( node.x! - bckgDimensions[0] / 2, - node.y! - bckgDimensions[1] / 2, + node.y! - bckgDimensions[1] / 2 + nodeS, ...bckgDimensions, ) } @@ -814,7 +992,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const labelText = hexToRGBA(labelTextColor, textOpacity) ctx.fillStyle = labelText ctx.font = `${fontSize}px Sans-Serif` - ctx.fillText(label, node.x!, node.y!) + ctx.fillText(label, node.x!, node.y! + nodeS) }, nodeCanvasObjectMode: () => 'after', @@ -837,19 +1015,26 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { ? highlightColors[visuals.refLinkColor][ visuals.refLinkHighlightColor || visuals.linkHighlight ](opacity) - : getThemeColor(visuals.refLinkColor) + : highlightColors[visuals.refLinkColor][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) } if (visuals.citeLinkColor && roamLink.type === 'cite') { return needsHighlighting && (visuals.citeLinkHighlightColor || visuals.linkHighlight) ? highlightColors[visuals.citeLinkColor][ visuals.citeLinkHighlightColor || visuals.linkHighlight ](opacity) - : getThemeColor(visuals.citeLinkColor) + : highlightColors[visuals.citeLinkColor][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) } return getLinkColor(sourceId as string, targetId as string, needsHighlighting) }, linkWidth: (link) => { + if (visuals.highlightLinkSize === 1) { + return visuals.linkWidth + } const linkIsHighlighted = isLinkRelatedToNode(link, centralHighlightedNode.current) const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current) @@ -863,7 +1048,9 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { d3AlphaMin: physics.alphaMin, d3VelocityDecay: physics.velocityDecay, - onNodeClick: (node: NodeObject, event: any) => { + onNodeClick: (nodeArg: NodeObject, event: any) => { + const node = nodeArg as OrgRoamNode + onClose() const isDoubleClick = event.timeStamp - lastNodeClickRef.current < 400 lastNodeClickRef.current = event.timeStamp if (isDoubleClick) { @@ -872,6 +1059,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { return handleClick('click', node) }, onBackgroundClick: () => { + onClose() setHoverNode(null) if (scope.nodeIds.length === 0) { return @@ -892,13 +1080,39 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { } setHoverNode(node) }, - onNodeRightClick: (node) => { - handleClick('right', node) + onNodeRightClick: (nodeArg, event) => { + const node = nodeArg as OrgRoamNode + openContextMenu(node, event) + + //handleClick('right', node) + }, + onNodeDrag: (node) => { + onClose() + setHoverNode(node) + setDragging(true) + }, + onNodeDragEnd: (node) => { + setHoverNode(null) + setDragging(false) }, } return ( - <div> + <Box overflow="hidden"> + {isOpen && ( + <ContextMenu + scope={scope} + node={rightClickedNode!} + nodeType={rightClickedNode?.id} + background={false} + coordinates={contextPos} + handleLocal={handleLocal} + menuClose={onClose} + openNodeInEmacs={openNodeInEmacs} + deleteNodeInEmacs={deleteNodeInEmacs} + createNodeInEmacs={createNodeInEmacs} + /> + )} {threeDim ? ( <ForceGraph3D ref={graphRef} @@ -940,13 +1154,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { }} /> )} - </div> + </Box> ) }) function isLinkRelatedToNode(link: LinkObject, node: NodeObject | null) { return ( - (link.source as NodeObject).id! === node?.id! || (link.target as NodeObject).id! === node?.id! + (link.source as NodeObject)?.id! === node?.id! || (link.target as NodeObject)?.id! === node?.id! ) } |