From 68f3643a5f1af83366fdedf1f0bb09dc3ea0e5c1 Mon Sep 17 00:00:00 2001 From: Triston Armstrong Date: Sat, 23 Dec 2023 22:26:19 -0600 Subject: [PATCH] remove graph visualization --- components/Graph.js | 115 -------------------------------------------- pages/index.js | 74 +++++++++++++--------------- pages/note/[id].js | 94 +++++++++++++++++------------------- 3 files changed, 78 insertions(+), 205 deletions(-) delete mode 100644 components/Graph.js diff --git a/components/Graph.js b/components/Graph.js deleted file mode 100644 index 74b8fc8..0000000 --- a/components/Graph.js +++ /dev/null @@ -1,115 +0,0 @@ -import React, {useState} from 'react'; -// import cytoscape from 'cytoscape'; -// import cola from 'cytoscape-cola'; -import {useRouter} from 'next/router' - -import CytoscapeComponent from "react-cytoscapejs"; - - -const layout = { - name: 'circle', - fit: true, // whether to fit the viewport to the graph - padding: 32, // the padding on fit - boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h } - avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space - nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm - spacingFactor: 0.9, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up - radius: 150, // the radius of the circle - startAngle: -2 / 4 * Math.PI, // where nodes start in radians - //sweep: undefined, // how many radians should be between the first and last node (defaults to full circle) - clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false) - sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') } - animate: false, // whether to transition the node positions - animationDuration: 500, // duration of animation in ms if enabled - animationEasing: undefined, // easing of animation if enabled - //animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts - ready: undefined, // callback on layoutready - stop: undefined, // callback on layoutstop - transform: function (node, position) { - return position; - } // transform a given node position. Useful for changing flow direction in discrete layouts -}; - -const styleSheet = [{ - selector: "node", - style: { - "background-color": "#666", - "font-size": "12px", - "width": "20px", - "height": "20px", - "label":"data(label)" - } -}, { - selector: "label", - style: {"font-size": "12px"}, -}, - { - selector: 'edge', - style: { - 'width': 2, - "height": 200, - 'line-color': '#b2b2b2', - 'target-arrow-color': '#ccc', - // 'target-arrow-shape': 'triangle', - 'curve-style': 'straight' - } - }]; - -function Graph({graph}) { - - const [width, setWidth] = useState("300px"); - const [height, setHeight] = useState("300px"); - const [graphData, setGraphData] = useState({ - nodes: graph.nodes, - edges: graph.edges - }); - - let myCyRef; - const router = useRouter() - //TODO: Listen to query change/ graphdata change to update state of this component - // Can use this: https://github.com/vercel/next.js/discussions/12661 - - return ( - <> -
-

Interactive Graph

-
- { - myCyRef = cy; - - console.log("EVT", cy); - - cy.on("tap", "node", evt => { - var node = evt.target; - let nodeData = node.data(); - if (typeof nodeData.id === 'string') { - const path = '/note/' + node.data().id - router.push(path) - } - }); - }} - /> -
-
- - ); -} - -export default Graph; \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index 2aee291..5b66f0d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,11 +1,11 @@ import Layout from "../components/Layout"; import { - getSinglePost, - getDirectoryData, - convertObject, - getFlattenArray, - getLocalGraphData, - constructGraphData + getSinglePost, + getDirectoryData, + convertObject, + getFlattenArray, + getLocalGraphData, + constructGraphData } from "../lib/utils"; import FolderTree from "../components/FolderTree"; import dynamic from 'next/dynamic' @@ -13,43 +13,37 @@ import MDContent from "../components/MDContent"; // This trick is to dynamically load component that interact with window object (browser only) -const DynamicGraph = dynamic( - () => import('../components/Graph'), - { loading: () =>

Loading ...

, ssr: false } -) - -export default function Home({graphData, content, tree, flattenNodes, backLinks}) { - return ( - -
- - - -
- - ); +export default function Home({ graphData, content, tree, flattenNodes, backLinks }) { + return ( + +
+ + +
+ + ); } -const {nodes, edges} = constructGraphData() +const { nodes, edges } = constructGraphData() export function getStaticProps() { - const tree = convertObject(getDirectoryData()); - const contentData = getSinglePost("index"); - const flattenNodes = getFlattenArray(tree) - const listOfEdges = edges.filter(anEdge => anEdge.target === "index") - const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined) - const backLinks = [...new Set(internalLinks)] + const tree = convertObject(getDirectoryData()); + const contentData = getSinglePost("index"); + const flattenNodes = getFlattenArray(tree) + const listOfEdges = edges.filter(anEdge => anEdge.target === "index") + const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined) + const backLinks = [...new Set(internalLinks)] - const graphData = getLocalGraphData("index"); - return { - props: { - content: contentData.data, - tree: tree, - flattenNodes: flattenNodes, - graphData:graphData, - backLinks: backLinks - }, - }; + const graphData = getLocalGraphData("index"); + return { + props: { + content: contentData.data, + tree: tree, + flattenNodes: flattenNodes, + graphData: graphData, + backLinks: backLinks + }, + }; } diff --git a/pages/note/[id].js b/pages/note/[id].js index 73c4330..c91b125 100644 --- a/pages/note/[id].js +++ b/pages/note/[id].js @@ -1,69 +1,63 @@ import Head from "next/head"; import Layout from "../../components/Layout"; import { - getAllSlugs, - getSinglePost, - convertObject, - getDirectoryData, - constructGraphData, getLocalGraphData + getAllSlugs, + getSinglePost, + convertObject, + getDirectoryData, + constructGraphData, getLocalGraphData } from "../../lib/utils"; import FolderTree from "../../components/FolderTree"; -import {getFlattenArray} from "../../lib/utils"; +import { getFlattenArray } from "../../lib/utils"; import MDContent from "../../components/MDContent"; -import dynamic from 'next/dynamic' -const DynamicGraph = dynamic( - () => import('../../components/Graph'), - { loading: () =>

Loading ...

, ssr: false } -) -export default function Home({note, backLinks, fileNames, tree, flattenNodes, graphData}) { +export default function Home({ note, backLinks, fileNames, tree, flattenNodes, graphData }) { - return ( - - - {note.title && } - -
- - - -
+ return ( + + + {note.title && } + +
+ + +
- - ); + + ); } export async function getStaticPaths() { - const allPostsData = getAllSlugs(); - const paths = allPostsData.map(p => ({params: {id: p}})) + const allPostsData = getAllSlugs(); + const paths = allPostsData.map(p => ({ params: { id: p } })) - return { - paths, - fallback: false - }; + return { + paths, + fallback: false + }; } -const {nodes, edges} = constructGraphData() +const { nodes, edges } = constructGraphData() -export function getStaticProps({params}) { - const note = getSinglePost(params.id); - const tree = convertObject(getDirectoryData()); - const flattenNodes = getFlattenArray(tree) +export function getStaticProps({ params }) { + const note = getSinglePost(params.id); + const tree = convertObject(getDirectoryData()); + const flattenNodes = getFlattenArray(tree) - 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 backLinks = [...new Set(internalLinks)] - const graphData = getLocalGraphData(params.id) - return { - props: { - note, - tree: tree, - flattenNodes: flattenNodes, - backLinks: backLinks.filter(link => link.slug !== params.id), - graphData: graphData - }, - }; + 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 backLinks = [...new Set(internalLinks)] + const graphData = getLocalGraphData(params.id) + return { + props: { + note, + tree: tree, + flattenNodes: flattenNodes, + backLinks: backLinks.filter(link => link.slug !== params.id), + graphData: graphData + }, + }; }