tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add support for Local Nodes

Browse Source 
Render Graph in [id] posts
This commit is contained in:
Tuan Cao 2022-04-15 11:00:45 +07:00
parent b43dfd77b0
commit 5195f9bdcc
4 changed files with 54 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Graph.js
View File

@ -84,7 +84,7 @@ function Graph({graph}) {
return (
<>
<div>
<h1>Cytoscape example</h1>
<h3>Links to this notes</h3>
<div
style={{
border: "1px solid",

42
lib/utils.js
View File

@ -109,16 +109,17 @@ export function constructBackLinks() {
}
export function getGraphData() {
export function getGraphData(currentNodeId) {
const {nodes, edges} = constructBackLinks()
const newNodes = nodes.map(aNode => (
{data : {
id: aNode.slug.toString(),
{
data: {
id: aNode.slug.toString(),
label: aNode.slug.toString(),
type: "ip"
}
}
}
))
@ -130,14 +131,35 @@ export function getGraphData() {
}
}))
// Remove edges that don't have any connections
const existingNodeID = newNodes.map(aNode => aNode.data.id)
const filteredEdges = newEdges.filter(edge => existingNodeID.includes(edge.data.source)).filter(edge => existingNodeID.includes(edge.data.target))
return {
nodes: newNodes,
edges: filteredEdges
const existingNodeIDs = newNodes.map(aNode => aNode.data.id)
if (currentNodeId != null && existingNodeIDs.includes(currentNodeId)) {
const localNodeIDs = newEdges
.filter(anEdge => anEdge.data.source === currentNodeId)
.map(anEdge => anEdge.data.target)
localNodeIDs.push(currentNodeId)
const localNodes = newNodes.filter(aNode => localNodeIDs.includes(aNode.data.id))
const localEdges = newEdges.filter(edge => localNodeIDs.includes(edge.data.source)).filter(edge => localNodeIDs.includes(edge.data.target))
return {
nodes: localNodes,
edges: localEdges
}
} else {
const filteredEdges = newEdges
.filter(edge => existingNodeIDs.includes(edge.data.source))
.filter(edge => existingNodeIDs.includes(edge.data.target))
return {
nodes: newNodes,
edges: filteredEdges
}
}
}
export function getContentPaths() {

7
pages/index.js
View File

@ -19,9 +19,10 @@ export default function Home({graphData, content, tree, flattenNodes}) {
<FolderTree tree={tree} flattenNodes={flattenNodes}/>
</nav>
<MDContainer post={content.data}/>
<DynamicGraph graph={graphData}/>
</div>
<hr/>
<DynamicGraph graph={graphData}/>
</Layout>
);
@ -31,7 +32,7 @@ export function getStaticProps() {
const tree = convertObject(getDirectoryData());
const contentData = getSinglePost("index");
const flattenNodes = getFlattenArray(tree)
const graphData = getGraphData();
const graphData = getGraphData("index");
return {
props: {
content: contentData,

20
pages/note/[id].js
View File

@ -5,13 +5,22 @@ import {
getSinglePost,
convertObject,
getDirectoryData,
constructBackLinks, getFileNames
constructBackLinks, getFileNames, getGraphData
} from "../../lib/utils";
import FolderTree from "../../components/FolderTree";
import {getFlattenArray} from "../../lib/utils";
import MDContent from "../../components/MDContent";
export default function Home({note, backLinks, fileNames, tree, flattenNodes}) {
import dynamic from 'next/dynamic'
const DynamicGraph = dynamic(
() => import('../../components/Graph'),
{ loading: () => <p>Loading ...</p>, ssr: false }
)
export default function Home({note, backLinks, fileNames, tree, flattenNodes, graphData}) {
return (
<Layout>
<Head>
@ -22,7 +31,9 @@ export default function Home({note, backLinks, fileNames, tree, flattenNodes}) {
<FolderTree tree={tree} flattenNodes={flattenNodes}/>
</nav>
<MDContent content={note.data} fileNames={fileNames} handleOpenNewContent={null} backLinks={backLinks}/>
<DynamicGraph graph={graphData}/>
</div>
</Layout>
);
}
@ -30,6 +41,7 @@ export default function Home({note, backLinks, fileNames, tree, flattenNodes}) {
export async function getStaticPaths() {
const allPostsData = getContentPaths();
const paths = allPostsData.map(p => ({params: {id: p}}))
return {
paths,
fallback: false
@ -48,13 +60,15 @@ export function getStaticProps({params}) {
const listOfEdges = edges.filter(anEdge => anEdge.target === params.id)
const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
const graphData = getGraphData(params.id)
return {
props: {
note,
tree: tree,
flattenNodes: flattenNodes,
fileNames: fileNames,
backLinks: internalLinks
backLinks: internalLinks,
graphData: graphData
},
};
}