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 ( return (
<> <>
<div> <div>
<h1>Cytoscape example</h1> <h3>Links to this notes</h3>
<div <div
style={{ style={{
border: "1px solid", 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 {nodes, edges} = constructBackLinks()
const newNodes = nodes.map(aNode => ( const newNodes = nodes.map(aNode => (
{data : { {
id: aNode.slug.toString(), data: {
id: aNode.slug.toString(),
label: aNode.slug.toString(), label: aNode.slug.toString(),
type: "ip" 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, const existingNodeIDs = newNodes.map(aNode => aNode.data.id)
edges: filteredEdges 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() { 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}/> <FolderTree tree={tree} flattenNodes={flattenNodes}/>
</nav> </nav>
<MDContainer post={content.data}/> <MDContainer post={content.data}/>
<DynamicGraph graph={graphData}/>
</div> </div>
<hr/>
<DynamicGraph graph={graphData}/>
</Layout> </Layout>
); );
@ -31,7 +32,7 @@ export function getStaticProps() {
const tree = convertObject(getDirectoryData()); const tree = convertObject(getDirectoryData());
const contentData = getSinglePost("index"); const contentData = getSinglePost("index");
const flattenNodes = getFlattenArray(tree) const flattenNodes = getFlattenArray(tree)
const graphData = getGraphData(); const graphData = getGraphData("index");
return { return {
props: { props: {
content: contentData, content: contentData,

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

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