make nodes clickable

site/layout/tags.html

@@ -15,8 +15,7 @@
         </article>
     </div>
 
-    <div id="chart">
-    </div>
+    <div id="chart"></div>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <script src="/static/scripts/graph.js"></script>
 

site/static/index.json

@@ -1 +1 @@
-{"building_anna.md":{"CompleteURL":"posts/building_anna.html","FilenameWithoutExtension":"building_anna","Frontmatter":{"Title":"Building anna","Date":"2024-04-04","Draft":false,"JSFiles":null,"Type":"post","Description":"This page contains a post about anna, a static site generator written in Go. This team project was built as part of AIEP 2024","PreviewImage":"","Tags":["acm","hsp","go","tech","talk","aiep"],"Authors":["Adhesh","Aditya","Nathan","Anirudh"]},"Tags":["acm","hsp","go","tech","talk","aiep"]},"docs.md":{"CompleteURL":"docs.html","FilenameWithoutExtension":"docs","Frontmatter":{"Title":"Anna Documentation","Date":"","Draft":false,"JSFiles":null,"Type":"","Description":"","PreviewImage":"","Tags":null,"Authors":null},"Tags":null},"index.md":{"CompleteURL":"index.html","FilenameWithoutExtension":"index","Frontmatter":{"Title":"Home","Date":"2024-02-24","Draft":false,"JSFiles":null,"Type":"","Description":"homepage for our ssg","PreviewImage":"/static/plane.jpg","Tags":null,"Authors":null},"Tags":null},"lang_test.md":{"CompleteURL":"posts/lang_test.html","FilenameWithoutExtension":"lang_test","Frontmatter":{"Title":"Language Codeblock Test","Date":"2024-02-23","Draft":true,"JSFiles":null,"Type":"post","Description":"","PreviewImage":"","Tags":["rust","C"],"Authors":null},"Tags":["rust","C"]},"markdown_test.md":{"CompleteURL":"posts/markdown_test.html","FilenameWithoutExtension":"markdown_test","Frontmatter":{"Title":"Sample Post","Date":"2024-02-23","Draft":true,"JSFiles":null,"Type":"post","Description":"","PreviewImage":"","Tags":["test-post"],"Authors":null},"Tags":["test-post"]},"week-1.md":{"CompleteURL":"posts/week-1.html","FilenameWithoutExtension":"week-1","Frontmatter":{"Title":"Week-1 Progress","Date":"2024-03-18","Draft":false,"JSFiles":null,"Type":"post","Description":"","PreviewImage":"","Tags":["progress"],"Authors":["Adhesh","Aditya","Anirudh","Nathan"]},"Tags":["progress"]},"week-2.md":{"CompleteURL":"posts/week-2.html","FilenameWithoutExtension":"week-2","Frontmatter":{"Title":"Week-2 Progress","Date":"2024-03-25","Draft":false,"JSFiles":null,"Type":"post","Description":"","PreviewImage":"","Tags":["progress"],"Authors":["Adhesh","Aditya","Anirudh","Nathan"]},"Tags":["progress"]},"week-3.md":{"CompleteURL":"posts/week-3.html","FilenameWithoutExtension":"week-3","Frontmatter":{"Title":"Week-3 Progress","Date":"2024-04-01","Draft":false,"JSFiles":null,"Type":"post","Description":"","PreviewImage":"","Tags":["progress"],"Authors":["Adhesh","Aditya","Anirudh","Nathan"]},"Tags":["progress"]}}
+{"building_anna.md":{"CompleteURL":"posts/building_anna.html","FilenameWithoutExtension":"building_anna","Frontmatter":{"Title":"Building anna","Date":"2024-04-04","Draft":false,"JSFiles":null,"Type":"post","Description":"This page contains a post about anna, a static site generator written in Go. This team project was built as part of AIEP 2024","PreviewImage":"","Tags":["acm","hsp","go","tech","talk","aiep"],"Authors":["Adhesh","Aditya","Nathan","Anirudh"]},"Tags":["acm","hsp","go","tech","talk","aiep"]},"docs.md":{"CompleteURL":"docs.html","FilenameWithoutExtension":"docs","Frontmatter":{"Title":"Anna Documentation","Date":"","Draft":false,"JSFiles":null,"Type":"","Description":"","PreviewImage":"","Tags":null,"Authors":null},"Tags":null},"index.md":{"CompleteURL":"index.html","FilenameWithoutExtension":"index","Frontmatter":{"Title":"Home","Date":"2024-02-24","Draft":false,"JSFiles":null,"Type":"","Description":"homepage for our ssg","PreviewImage":"/static/plane.jpg","Tags":null,"Authors":null},"Tags":null},"week-1.md":{"CompleteURL":"posts/week-1.html","FilenameWithoutExtension":"week-1","Frontmatter":{"Title":"Week-1 Progress","Date":"2024-03-18","Draft":false,"JSFiles":null,"Type":"post","Description":"","PreviewImage":"","Tags":["progress"],"Authors":["Adhesh","Aditya","Anirudh","Nathan"]},"Tags":["progress"]},"week-2.md":{"CompleteURL":"posts/week-2.html","FilenameWithoutExtension":"week-2","Frontmatter":{"Title":"Week-2 Progress","Date":"2024-03-25","Draft":false,"JSFiles":null,"Type":"post","Description":"","PreviewImage":"","Tags":["progress"],"Authors":["Adhesh","Aditya","Anirudh","Nathan"]},"Tags":["progress"]},"week-3.md":{"CompleteURL":"posts/week-3.html","FilenameWithoutExtension":"week-3","Frontmatter":{"Title":"Week-3 Progress","Date":"2024-04-01","Draft":false,"JSFiles":null,"Type":"post","Description":"","PreviewImage":"","Tags":["progress"],"Authors":["Adhesh","Aditya","Anirudh","Nathan"]},"Tags":["progress"]}}

site/static/scripts/graph.js

@@ -1,71 +1,46 @@
-let graphData;
+let width;
+let height;
+let color;
+let svg;
+let simulation;
 
-// fetch data from index.js
 async function fetchData() {
     try {
         const response = await fetch('/static/index.json');
-        if (!response.ok) {
-            throw new Error('Failed to fetch data');
-        }
-        graphData = await response.json();
+        if (!response.ok) { throw new Error('Failed to fetch data'); }
+        return await response.json();
     } catch (error) {
         console.error('Error:', error);
+        return null;
     }
 }
 
-async function filterDataByTag(tag) {
-    return Object.fromEntries(
-        Object.entries(graphData).filter(([key, post]) => post.Tags && post.Tags.includes(tag))
-    );
-}
-
-async function drawGraph(data, str) {
+function setupGraph() {
     d3.select("#chart").html("");
-    const width = 400;
-    const height = 400;
-    const color = d3.scaleOrdinal(d3.schemeCategory10);
-    const links = [];
-    const nodesMap = {};
-
-    // Iterate through each post to create nodes and links
-    Object.keys(data).forEach(key => {
-        const post = data[key];
-        const tags = post.Tags;
-        if (tags) {
-            tags.forEach(tag => {
-                nodesMap[tag] = { id: tag, group: 1 };
-                const linkId = `Center-${tag}`;
-                const existingLink = links.find(d => d.id === linkId);
-                if (!existingLink) {
-                    links.push({ source: str, target: tag, id: linkId, value: 1 });
-                } else {
-                    existingLink.value++;
-                }
-            });
-        }
-    });
-
-    nodesMap[str] = { id: str, group: 0 };
-    const nodes = Object.values(nodesMap);
+    width = 400;
+    height = 400;
+    color = d3.scaleOrdinal(d3.schemeCategory10);
+}
 
-    const simulation = d3.forceSimulation(nodes)
+function setupSimulation(nodes, links) {
+    simulation = d3.forceSimulation(nodes)
         .force("link", d3.forceLink(links).id(d => d.id).distance(50))
         .force("charge", d3.forceManyBody().strength(-300))
         .force("center", d3.forceCenter(width / 2, height / 2))
         .on("tick", ticked);
+}
 
-    const svg = d3.select("#chart").append("svg")
-        .attr("width", width)
-        .attr("height", height);
-
-    const link = svg.append("g")
+function drawLinks(links) {
+    svg.append("g")
         .selectAll("line")
         .data(links)
         .enter().append("line")
         .attr("stroke", "#999")
         .attr("stroke-opacity", 1)
         .attr("stroke-width", d => Math.sqrt(d.value));
+}
 
+function drawNodes(nodes) {
     const node = svg.append("g")
         .selectAll("circle")
         .data(nodes)
@@ -81,6 +56,11 @@ async function drawGraph(data, str) {
         )
         .on("click", onClick);
 
+    node.append("title")
+        .text(d => d.id);
+}
+
+function drawLabels(nodes) {
     const label = svg.append("g")
         .selectAll("text")
         .data(nodes)
@@ -91,52 +71,90 @@ async function drawGraph(data, str) {
         .attr("dy", ".35em")
         .attr("fill", "white");
 
-    node.append("title")
+    label.append("title")
         .text(d => d.id);
+}
 
-    function ticked() {
-        link.attr("x1", d => d.source.x)
-            .attr("y1", d => d.source.y)
-            .attr("x2", d => d.target.x)
-            .attr("y2", d => d.target.y);
+function ticked() {
+    svg.selectAll("line")
+        .attr("x1", d => d.source.x)
+        .attr("y1", d => d.source.y)
+        .attr("x2", d => d.target.x)
+        .attr("y2", d => d.target.y);
 
-        node.attr("cx", d => d.x)
-            .attr("cy", d => d.y);
+    svg.selectAll("circle")
+        .attr("cx", d => d.x)
+        .attr("cy", d => d.y);
 
-        label.attr("x", d => d.x)
-            .attr("y", d => d.y);
-    }
+    svg.selectAll("text")
+        .attr("x", d => d.x)
+        .attr("y", d => d.y);
+}
 
-    function dragstarted(event) {
-        if (!event.active) simulation.alphaTarget(0.3).restart();
-        event.subject.fx = event.subject.x;
-        event.subject.fy = event.subject.y;
-    }
+function dragstarted(event) {
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    event.subject.fx = event.subject.x;
+    event.subject.fy = event.subject.y;
+}
 
-    function dragged(event) {
-        event.subject.fx = event.x;
-        event.subject.fy = event.y;
-    }
+function dragged(event) {
+    event.subject.fx = event.x;
+    event.subject.fy = event.y;
+}
 
-    function dragended(event) {
-        if (!event.active) simulation.alphaTarget(0);
-        event.subject.fx = null;
-        event.subject.fy = null;
-    }
+function dragended(event) {
+    if (!event.active) simulation.alphaTarget(0);
+    event.subject.fx = null;
+    event.subject.fy = null;
+}
 
-    async function onClick(event, d) {
-        // Clear graph
-        svg.selectAll("*").remove();
-        // console.log(filterDataByTag(d.id));
-        drawGraph(data, d.id);
-    }
+async function onClick(event, d) {
+    svg.selectAll("*").remove();
+    const url = `/tags/${d.id}.html`;
+    window.location.href = url;
 }
 
-// show homepage by default
 async function init() {
-    await fetchData();
-    const data = graphData;
-    drawGraph(data, "home");
+    const data = await fetchData();
+    if (data) {
+        setupGraph();
+        drawGraph(data, "index");
+    }
+}
+
+async function drawGraph(data, str) {
+    const links = [];
+    const nodesMap = {};
+
+    // Iterate through each post to create nodes and links
+    Object.keys(data).forEach(key => {
+        const post = data[key];
+        const tags = post.Tags;
+        if (tags) {
+            tags.forEach(tag => {
+                nodesMap[tag] = { id: tag, group: 1 };
+                const linkId = `Center-${tag}`;
+                const existingLink = links.find(d => d.id === linkId);
+                if (!existingLink) {
+                    links.push({ source: str, target: tag, id: linkId, value: 1 });
+                } else {
+                    existingLink.value++;
+                }
+            });
+        }
+    });
+
+    nodesMap[str] = { id: str, group: 0 };
+    const nodes = Object.values(nodesMap);
+
+    svg = d3.select("#chart").append("svg")
+        .attr("width", width)
+        .attr("height", height);
+
+    setupSimulation(nodes, links);
+    drawLinks(links);
+    drawNodes(nodes);
+    drawLabels(nodes);
 }
 
 init();

site/static/styles/default.css

@@ -339,6 +339,13 @@ iframe {
     /* ie8 */
 }
 
+#chart {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 /* Code styling */
 /* pre code {
       font-family: agave, monospace;

test/engine/render_tags/tags_subpage_template.html

@@ -1,12 +1,19 @@
 {{ define "tag-subpage"}}
+{{ template "head" .}}
+
 <body>
-<div class="body">
-<div class="tagged-posts">
-{{ range .SpecificTagTemplates }}
-<a href="/{{.CompleteURL}}">{{ .Frontmatter.Title }}</a>
-{{ end }}
-</div>
-</div>
+    <div class="body">
+        <div class="tagged-posts">
+            {{ range .SpecificTagTemplates }}
+            <a href="/{{.CompleteURL}}">{{ .Frontmatter.Title }}</a>
+            {{ end }}
+        </div>
+
+        <script src="https://d3js.org/d3.v7.min.js"></script>
+        <script src="/static/scripts/graph.js"></script>
+        <div id="chart"></div>
 </body>
+
 </html>
-{{ end }}
+
+{{ end}}