Render occurrence data in sidebar

When a node is selected, render any occurrence data in the sidebar.

Author: mtaylorgds

static/css/graph.css

@@ -35,7 +35,7 @@ main {
   font-size: 1rem;
 }
 
-.sidebar pre {
+.sidebar #node-details {
   white-space: pre-wrap;
   word-break: break-word;
   background: #ffffff;
@@ -44,8 +44,28 @@ main {
   border-radius: 0.375rem;
 }
 
+.sidebar #node-details section {
+  margin-bottom: 1rem;
+}
+
+.sidebar #node-details a {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.sidebar #node-details a:hover {
+  text-decoration: underline;
+}
+
 .status {
   margin-top: 0.5rem;
   font-size: 0.9rem;
   color: #374151;
 }
+
+.occurrence {
+    background-color: #ffeb3b;
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-weight: bold;
+}

templates/graph.html

@@ -14,19 +14,46 @@ <h1>Graph Viewer</h1>
     <main>
       <div id="graph"></div>
       <aside class="sidebar">
-        <h2></h2>
-        <pre id="node-details">No node selected.</pre>
+        <h2 id="sidebar-title">No node selected</h2>
+        <div id="node-details">Select a node to view details.</div>
       </aside>
     </main>
 
     <script src="https://unpkg.com/cytoscape@3.4.0/dist/cytoscape.min.js"></script>
     <script>
       const status = document.querySelector('.status');
+      const sidebarTitle = document.getElementById('sidebar-title');
       const details = document.getElementById('node-details');
 
-      function formatNodeData(node) {
+      function escapeHtml(value) {
+        return String(value || '')
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      function renderNodeDetails(node) {
         const data = node.data();
-        return JSON.stringify(data, null, 2);
+        sidebarTitle.textContent = data.label || 'Selected node';
+
+        const occurrences = Array.isArray(data.occurrences) ? data.occurrences : [];
+        if (!occurrences.length) {
+          details.innerHTML = '<p>No occurrences available.</p>';
+          return;
+        }
+
+        details.innerHTML = occurrences.map(item => {
+          const link = escapeHtml(item.link);
+          const context = item.context;
+          return `
+            <section>
+              <p><a href="${link}" target="_blank" rel="noopener noreferrer">View on GOV.UK</a></p>
+              <p>${context}</p>
+            </section>
+          `;
+        }).join('');
       }
 
       async function loadGraph() {
@@ -104,12 +131,13 @@ <h2></h2>
           });
 
           cy.on('tap', 'node', (event) => {
-            details.textContent = formatNodeData(event.target);
+            renderNodeDetails(event.target);
           });
 
           cy.on('tap', (event) => {
             if (event.target === cy) {
-              details.textContent = 'No node selected.';
+              sidebarTitle.textContent = 'No node selected';
+              details.innerHTML = '<p>Select a node to view details.</p>';
             }
           });
         } catch (error) {