diff --git a/docs/source/default/static/Network_Graph_utopia_1990.html b/docs/source/default/static/Network_Graph_utopia_1990.html
index 24303675..f4089ae4 100644
--- a/docs/source/default/static/Network_Graph_utopia_1990.html
+++ b/docs/source/default/static/Network_Graph_utopia_1990.html
@@ -17,6 +17,13 @@ Configuration & Legend
aria-controls="config-container-content">
+
+
Visual Settings
+
+
+
+
+
Style Legend
@@ -47,7 +54,7 @@
Sector Legend
diff --git a/temoa/utilities/graph_utils.py b/temoa/utilities/graph_utils.py
index a1541f0a..4ee5ba5f 100644
--- a/temoa/utilities/graph_utils.py
+++ b/temoa/utilities/graph_utils.py
@@ -175,10 +175,15 @@ def calculate_initial_positions(
return positions
# Arrange sector "anchors" in a large circle
- layout_radius = 2000 # The radius of the main circle for sectors
- jitter_radius = 1000 # How far nodes can be from their sector anchor
- sector_anchors = {}
+ # Scale radius based on the number of sectors and nodes to handle small models better
num_sectors = len(sectors_to_place)
+ num_nodes = len(nodes_to_place)
+
+ # Base radius + incremental scaling
+ layout_radius = max(800, min(2000, 400 + 200 * num_sectors + 2 * num_nodes))
+ jitter_radius = layout_radius // 2
+
+ sector_anchors = {}
for i, sector in enumerate(sectors_to_place):
angle = (i / num_sectors) * 2 * math.pi
@@ -218,18 +223,31 @@ def calculate_tech_graph_positions(
"""
positions = {}
+ # Materialize the iterable to avoid consumption issues
+ all_edges_list = list(all_edges)
+
# 1. Identify all unique sectors present in the technology list
- sectors_to_place = sorted({tech.sector for tech in all_edges if tech.sector})
+ sectors_to_place = sorted({edge.sector for edge in all_edges_list if edge.sector})
if not sectors_to_place:
# If no sectors, just return empty positions and let physics handle it
return {}
# 2. Arrange sector "anchors" in a large circle
- layout_radius = 2500 # Use a large radius to ensure initial separation
- jitter_radius = 600 # Controls the size of the initial clusters
- sector_anchors = {}
+ # Scale radius based on the number of sectors and unique technologies
+ unique_techs_to_place = sorted(
+ {edge.tech for edge in all_edges_list if edge.tech}, key=lambda t: str(t)
+ )
num_sectors = len(sectors_to_place)
+ num_nodes = len(unique_techs_to_place)
+
+ if not unique_techs_to_place:
+ return {}
+
+ layout_radius = max(1000, min(2500, 500 + 300 * num_sectors + 5 * num_nodes))
+ jitter_radius = layout_radius // 4
+
+ sector_anchors = {}
for i, sector in enumerate(sectors_to_place):
angle = (i / num_sectors) * 2 * math.pi
@@ -237,9 +255,12 @@ def calculate_tech_graph_positions(
cy = layout_radius * math.sin(angle)
sector_anchors[sector] = (cx, cy)
- # 3. Place each technology node near its sector's anchor point with jitter
- for edge_tuple in all_edges:
- primary_sector = edge_tuple.sector
+ # 3. Place each unique technology node near its sector's anchor point with jitter
+ # Create a mapping of tech to its primary sector from the edges
+ tech_to_sector = {edge.tech: edge.sector for edge in all_edges_list if edge.tech}
+
+ for tech in unique_techs_to_place:
+ primary_sector = tech_to_sector.get(tech)
if not primary_sector or primary_sector not in sector_anchors:
# Place nodes without a defined sector at the center
cx, cy = 0, 0
@@ -247,13 +268,13 @@ def calculate_tech_graph_positions(
cx, cy = sector_anchors[primary_sector]
# Apply deterministic "jitter" to prevent stacking (stable per-tech)
- seed = uuid.uuid5(uuid.NAMESPACE_DNS, str(edge_tuple.tech)).int
+ seed = uuid.uuid5(uuid.NAMESPACE_DNS, str(tech)).int
rng = random.Random(seed)
rand_angle = rng.uniform(0, 2 * math.pi)
rand_radius = rng.uniform(0, jitter_radius)
x = cx + rand_radius * math.cos(rand_angle)
y = cy + rand_radius * math.sin(rand_angle)
- positions[edge_tuple.tech] = {'x': x, 'y': y}
+ positions[tech] = {'x': x, 'y': y}
return positions
diff --git a/temoa/utilities/network_vis_templates/graph_script.js b/temoa/utilities/network_vis_templates/graph_script.js
index 78e77b91..f0bf39a9 100644
--- a/temoa/utilities/network_vis_templates/graph_script.js
+++ b/temoa/utilities/network_vis_templates/graph_script.js
@@ -28,26 +28,59 @@ document.addEventListener('DOMContentLoaded', function () {
primary_view_name: primaryViewName,
secondary_view_name: secondaryViewName,
} = data;
- const optionsObject = (typeof optionsRaw === 'string') ? JSON.parse(optionsRaw) : optionsRaw;
- // --- State ---
- let currentView = 'primary';
- let primaryViewPositions = null;
- let secondaryViewPositions = null;
+ let optionsObject = {};
+ if (typeof optionsRaw === "string") {
+ try {
+ optionsObject = JSON.parse(optionsRaw);
+ } catch (e) {
+ console.error('Failed to parse graph options JSON:', e);
+ optionsObject = {};
+ }
+ } else {
+ optionsObject = optionsRaw || {};
+ }
+
+ // Expose for debugging only — enable in production.
+ const isDebug = (typeof window !== 'undefined' && window.DEBUG_GRAPH) ||
+ (typeof URLSearchParams !== 'undefined' && new URLSearchParams(window.location.search).has('debugGraph'));
+ if (isDebug) {
+ window.__graph = {
+ data,
+ allNodesPrimary,
+ allEdgesPrimary,
+ allNodesSecondary,
+ allEdgesSecondary,
+ optionsObject,
+ };
+ }
// --- DOM Elements ---
+ const fontSizeSlider = document.getElementById('font-size-slider');
const configWrapper = document.getElementById('config-panel-wrapper');
const configHeader = document.querySelector('.config-panel-header');
const configToggleButton = document.querySelector('.config-toggle-btn');
const advancedControlsToggle = document.getElementById('advanced-controls-toggle');
const visConfigContainer = document.getElementById('vis-config-container');
const searchInput = document.getElementById('search-input');
+
+ // --- Visual State ---
+ let currentView = 'primary';
+ let primaryViewPositions = null;
+ let secondaryViewPositions = null;
+ let visualState = {
+ fontSize: (optionsObject?.nodes?.font?.size) || 14
+ };
+
+ if (fontSizeSlider) {
+ fontSizeSlider.value = String(visualState.fontSize);
+ }
const resetButton = document.getElementById('reset-view-btn');
const sectorTogglesContainer = document.getElementById('sector-toggles');
const viewToggleButton = document.getElementById('view-toggle-btn');
const graphContainer = document.getElementById('mynetwork');
// --- Config Panel Toggle ---
- if (optionsObject.configure && optionsObject.configure.enabled) {
+ if (optionsObject?.configure?.enabled) {
optionsObject.configure.container = visConfigContainer;
configHeader.addEventListener('click', () => {
const isCollapsed = configWrapper.classList.toggle('collapsed');
@@ -61,9 +94,41 @@ document.addEventListener('DOMContentLoaded', function () {
});
}
+ // --- Visual Settings Sliders ---
+ let pendingRaf = null;
+ function updateVisualSettings() {
+ if (fontSizeSlider) visualState.fontSize = parseInt(fontSizeSlider.value, 10);
+
+ if (pendingRaf) return;
+
+ pendingRaf = requestAnimationFrame(() => {
+ pendingRaf = null;
+
+ // Use setOptions for global font size - works for edges with smooth enabled
+ // Note: Don't set per-edge font as it breaks rendering with smooth edges
+ network.setOptions({
+ nodes: { font: { size: visualState.fontSize } },
+ edges: { font: { size: visualState.fontSize, align: 'top' } }
+ });
+
+ // Also update nodes individually since they have per-node font from addWithCurrentFontSize
+ // Note: Per-node font properties must be overwritten because they would otherwise take precedence over the global setting
+ const nodeUpdates = nodes.get().map(n => ({
+ id: n.id,
+ font: { ...(n.font ?? {}), size: visualState.fontSize }
+ }));
+ nodes.update(nodeUpdates);
+
+ network.redraw();
+ });
+ }
+
+ if (fontSizeSlider) fontSizeSlider.addEventListener('input', updateVisualSettings);
+
+
// --- Vis.js Network Initialization ---
- const nodes = new vis.DataSet(allNodesPrimary);
- const edges = new vis.DataSet(allEdgesPrimary);
+ const nodes = new vis.DataSet();
+ const edges = new vis.DataSet();
const network = new vis.Network(graphContainer, { nodes, edges }, optionsObject);
// --- Core Functions ---
@@ -84,13 +149,13 @@ document.addEventListener('DOMContentLoaded', function () {
nodes.clear(); edges.clear();
if (currentView === 'primary') {
- nodes.add(allNodesSecondary); edges.add(allEdgesSecondary);
+ addWithCurrentFontSize(allNodesSecondary, allEdgesSecondary);
currentView = 'secondary';
viewToggleButton.textContent = `Switch to ${primaryViewName}`;
viewToggleButton.setAttribute('aria-pressed', 'true');
applyPositions(secondaryViewPositions);
} else {
- nodes.add(allNodesPrimary); edges.add(allEdgesPrimary);
+ addWithCurrentFontSize(allNodesPrimary, allEdgesPrimary);
currentView = 'primary';
viewToggleButton.textContent = `Switch to ${secondaryViewName}`;
viewToggleButton.setAttribute('aria-pressed', 'false');
@@ -134,8 +199,8 @@ document.addEventListener('DOMContentLoaded', function () {
const visibleNodeIds = new Set(visibleNodes.map(n => n.id));
visibleEdges = activeEdgesData.filter(edge => visibleNodeIds.has(edge.from) && visibleNodeIds.has(edge.to));
}
- nodes.clear(); edges.clear();
- nodes.add(visibleNodes); edges.add(visibleEdges);
+
+ addWithCurrentFontSize(visibleNodes, visibleEdges);
applyPositions(currentPositions);
}
@@ -205,6 +270,20 @@ document.addEventListener('DOMContentLoaded', function () {
});
}
+ function addWithCurrentFontSize(newNodes, newEdges) {
+ nodes.clear();
+ edges.clear();
+ nodes.add(
+ newNodes.map(n => ({
+ ...n,
+ font: { ...(n.font ?? {}), size: visualState.fontSize },
+ })),
+ );
+ // Don't set per-edge font - let network.setOptions() handle it
+ // vis.js ignores global font options when edges have per-item font set
+ edges.add(newEdges);
+ }
+
function resetView() {
searchInput.value = "";
primaryViewPositions = null;
@@ -213,8 +292,7 @@ document.addEventListener('DOMContentLoaded', function () {
switchView(); // This will switch back to primary and apply null positions
} else {
// If already on primary, just reload the original data
- nodes.clear(); edges.clear();
- nodes.add(allNodesPrimary); edges.add(allEdgesPrimary);
+ addWithCurrentFontSize(allNodesPrimary, allEdgesPrimary);
applyPositions(primaryViewPositions); // Apply null to reset
network.fit();
}
@@ -233,9 +311,7 @@ document.addEventListener('DOMContentLoaded', function () {
});
const filteredNodes = activeNodes.filter(node => nodesToShow.has(node.id));
const filteredEdges = activeEdges.filter(edge => nodesToShow.has(edge.from) && nodesToShow.has(edge.to));
- nodes.clear(); edges.clear();
- nodes.add(filteredNodes);
- edges.add(filteredEdges);
+ addWithCurrentFontSize(filteredNodes, filteredEdges);
network.fit();
}
@@ -257,4 +333,6 @@ document.addEventListener('DOMContentLoaded', function () {
createStyleLegend();
createSectorLegend();
createSectorToggles();
+ // Initial data load with consistent font handling
+ addWithCurrentFontSize(allNodesPrimary, allEdgesPrimary);
});
diff --git a/temoa/utilities/network_vis_templates/graph_styles.css b/temoa/utilities/network_vis_templates/graph_styles.css
index 0402c090..41e36997 100644
--- a/temoa/utilities/network_vis_templates/graph_styles.css
+++ b/temoa/utilities/network_vis_templates/graph_styles.css
@@ -24,6 +24,9 @@ body, html {
.legend-item { display: flex; align-items: center; margin-bottom: 6px; }
.legend-color-swatch { width: 18px; height: 18px; margin-right: 8px; flex-shrink: 0; border: 1px solid #ccc; background-color: #f0f0f0; box-sizing: border-box; }
.legend-label { font-size: 13px; }
+.control-group { display: flex; align-items: center; gap: 15px; margin-bottom: 8px; }
+.control-group label { min-width: 120px; font-size: 13px; font-weight: 500; }
+.control-group input[type=range] { flex-grow: 1; max-width: 250px; }
#advanced-controls-toggle { font-size: 12px; color: #007bff; cursor: pointer; text-decoration: none; margin-top: 15px; display: block; }
.view-toggle-panel { padding: 8px 15px; background-color: #343a40; color: white; display: flex; justify-content: center; align-items: center; }
.view-toggle-panel button { font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 5px; border: 1px solid #6c757d; background-color: #495057; color: white; cursor: pointer; }
diff --git a/temoa/utilities/network_vis_templates/graph_template.html b/temoa/utilities/network_vis_templates/graph_template.html
index 8ec0a1f0..e54218ed 100644
--- a/temoa/utilities/network_vis_templates/graph_template.html
+++ b/temoa/utilities/network_vis_templates/graph_template.html
@@ -17,6 +17,13 @@