Initial commit of AthonetTools

static/js/graph/initGraph.js

@@ -0,0 +1,18 @@
+import { baseStyles } from '/static/js/graph/style.js';
+
+export function mountCy(container, graphJson) {
+  const styles = Array.isArray(graphJson.styles)
+    ? [...baseStyles, ...graphJson.styles]
+    : baseStyles;
+
+  const cy = cytoscape({
+    container,
+    style: styles,
+    elements: graphJson.elements,
+    layout: graphJson.layout || { name: 'preset' }
+  });
+
+  cy.once('render', () => cy.fit(undefined, 40));
+  window.addEventListener('resize', () => cy && cy.fit(undefined, 40));
+  return cy;
+}

static/js/graph/style.js

@@ -0,0 +1,68 @@
+// /static/js/graph/style.js
+export const baseStyles = [
+  {
+    selector: 'node',
+    style: {
+      'shape': 'round-rectangle',
+      'background-color': '#e8f0ff',
+      'border-color': '#0ea5e9',
+      'border-width': 2,
+      'label': 'data(label)',
+      'color': '#0f172a',
+      'text-valign': 'center',
+      'text-halign': 'center',
+      'font-size': 12,
+      'text-wrap': 'wrap',
+      'text-max-width': 140,
+      'padding': '8px',
+      'width': 100,
+      'height': 50
+    }
+  },
+  {
+    selector: 'edge',
+    style: {
+      'line-color': '#64748b',
+      'width': 2,
+      'curve-style': 'straight',
+
+      // NEW: static “middle of edge” label
+      'label': 'data(midLabel)',
+      'text-rotation': 'autorotate',
+      'text-margin-y': -8,             // nudge mid-label off the line a bit
+
+      // keep your side labels for “where the IP sits”
+      'source-label': 'data(sourceLabel)',
+      'target-label': 'data(targetLabel)',
+      'source-text-offset': 50,
+      'target-text-offset': 50,
+
+      'font-size': 11,
+      'color': '#334155',
+      'text-background-color': '#ffffff',
+      'text-background-opacity': 0.9,
+      'text-background-shape': 'round-rectangle',
+      'text-background-padding': 2,
+      'text-outline-color': '#ffffff',
+      'text-outline-width': 1
+    }
+  },
+  {
+    selector: ':selected',
+    style: { 'border-width': 3, 'border-color': '#22d3ee', 'line-color': '#22d3ee' }
+  },
+
+  // Optional: make compound parents (like Proxmox) look like containers
+  {
+    selector: ':parent',
+    style: {
+      'background-color': '#f8fafc',
+      'border-color': '#94a3b8',
+      'border-width': 2,
+      'padding': '12px',
+      'text-valign': 'top',
+      'text-halign': 'center',
+      'font-weight': '600'
+    }
+  }
+];