// We maken alleen links als beide kanten in het huidige model zitten (licht + consistent met filter)
for (const [ctrId, cm] of Object.entries(byContainerMeta)) {
const rawKey = String(ctrId);
const mode = String(cm?.networkMode || '');
if (!mode.startsWith('container:')) continue;
const ownerId = mode.split(':', 2)[1] || '';
if (!ownerId) continue;
// byContainerMeta kan keys hebben als NAME of ID → normaliseer naar ID als we kunnen
const childId = idByName.get(rawKey) || rawKey;
const ownerKey = `ctr:${ownerId}`;
const childKey = `ctr:${childId}`;
if (nodeIndex.has(ownerKey) && nodeIndex.has(childKey)) {
links.push({
type: 'shared',
source: ownerKey,
target: childKey,
ownerName: cm?.networkOwnerName || '',
ownerId: cm?.networkOwnerId || ''
});
}
}
// Kleine meta voor debug / later
const meta = {
view: 'global',
networksSelected: rows.length,
nodes: nodes.length,
links: links.length
};
return { nodes, links, meta };
}
let graphCtx = null;
function renderGraph(model) {
const host = document.getElementById('networksMapHost');
if (!host) return;
// leeg host (placeholder weg)
host.innerHTML = '';
const w = Math.max(600, host.clientWidth || 600);
const h = Math.max(420, host.clientHeight || 420);
const svg = d3.select(host).append('svg')
.attr('viewBox', `0 0 ${w} ${h}`);
const g = svg.append('g');
// zoom/pan
svg.call(
d3.zoom()
.scaleExtent([0.2, 2.5])
.on('zoom', (ev) => g.attr('transform', ev.transform))
);
// links
const link = g.append('g')
.selectAll('line')
.data(model.links)
.enter()
.append('line')
.attr('class', d => d.type === 'shared' ? 'graphLink shared' : 'graphLink');
// nodes
const node = g.append('g')
.selectAll('g')
.data(model.nodes)
.enter()
.append('g')
.attr('class', d => `graphNode ${d.type}`);
node.append('circle')
.attr('r', d => d.type === 'network' ? 10 : 8);
node.append('text')
.attr('class', 'graphLabel')
.attr('x', 12)
.attr('y', 4)
.text(d => d.label || d.key);
// drag
const drag = d3.drag()
.on('start', (ev, d) => {
if (!ev.active) graphCtx.sim.alphaTarget(0.2).restart();
d.fx = d.x; d.fy = d.y;
})
.on('drag', (ev, d) => {
d.fx = ev.x; d.fy = ev.y;
})
.on('end', (ev, d) => {
if (!ev.active) graphCtx.sim.alphaTarget(0);
d.fx = null; d.fy = null;
});
node.call(drag);
// hover highlight (connected)
node.on('mouseenter', (ev, d) => {
node.classed('graphDim', true);
link.classed('graphDim', true);
d3.select(ev.currentTarget).classed('graphDim', false);
link.each(function(l) {
const sid = l.source?.id || l.source;
const tid = l.target?.id || l.target;
const hit = (sid === d.id || tid === d.id);
if (hit) {
d3.select(this).classed('graphDim', false).classed('graphActive', true);
} else {
d3.select(this).classed('graphActive', false);
}
});
});
node.on('mouseleave', () => {
node.classed('graphDim', false);
link.classed('graphDim', false).classed('graphActive', false);
});
node.on('click', (ev, d) => {
const s = document.getElementById('networksMapStatus');
if (s) s.textContent = `Geselecteerd: ${d.type} ${d.key}`;
});
// simulation
const sim = d3.forceSimulation(model.nodes)
.force('link', d3.forceLink(model.links).id(d => d.id).distance(80))
.force('charge', d3.forceManyBody().strength(-220))
.force('center', d3.forceCenter(w / 2, h / 2))
.force('collide', d3.forceCollide().radius(d => d.type === 'network' ? 18 : 16))
.on('tick', () => {
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);
node.attr('transform', d => `translate(${d.x},${d.y})`);
});
graphCtx = { svg, g, sim, model };
}
function renderNetworks() {
const tbody = document.getElementById('networksTbody');
const rel = document.getElementById('networksRelations');
if (!tbody || !rel) return;
tbody.innerHTML = '';
rel.innerHTML = '';
const usage = state.usage;
if (!usage || !usage.byNetwork) {
tbody.innerHTML = `| Geen data. Klik op Vernieuwen. |
`;
rel.innerHTML = `Geen data.
`;
return;
}
const vmAll = buildNetworksViewModel();
const vm = applyFiltersAndSort(vmAll);
for (const row of vm) {
const netName = row.name;
const containers = row.containers;
const meta = row.meta;
const isOpen = state.expanded.has(netName);
const arrow = isOpen ? '▾' : '▸';
const driver = meta?.driver || meta?.Driver || '';
const subnets = fmtSubnets(meta);
const subnetsHtml = subnets.length
? `${subnets.slice(0, 2).map(s => `${esc(s)}`).join('')}${subnets.length > 2 ? `+${subnets.length - 2}` : ''}
`
: (
(meta?.driver === 'mode')
? `network mode`
: `—`
);
// 1. Controleer of dit een shared netwerk is
const isShared = containers.some(c => typeof c?.networkMode === 'string' && c.networkMode.startsWith('container:'));
const tr = document.createElement('tr');
tr.innerHTML = `
|
${esc(netName)}
${isDefaultNetworkName(netName) ? `default` : ``}
|
${driver
? (String(driver) === 'mode' ? `MODE` : esc(driver))
: `—`}
|
${subnetsHtml} |
${containers.length}
|
${isShared ? `shared` : ``}
${flagsHTML(netName, meta)}
|
`;
tr.querySelector('button').addEventListener('click', () => toggleNetworkRow(netName));
tbody.appendChild(tr);
if (isOpen) {
const tr2 = document.createElement('tr');
tr2.innerHTML = `
|
${renderNetworkUsersListHTML(netName, containers)}
|
`;
tbody.appendChild(tr2);
const btn = tr2.querySelector('button[data-inspect]');
btn.addEventListener('click', async () => {
await onInspectNetwork(netName);
});
}
}
rel.innerHTML = renderNetworksRelationsHTML(usage);
}
function bindUiOnce() {
const btn = document.getElementById('networksRefreshBtn');
if (btn && !btn.dataset.bound) {
btn.dataset.bound = '1';
resetBtn.addEventListener('click', () => {
if (!graphCtx) return;
// reset zoom
graphCtx.svg
.transition()
.duration(400)
.call(
d3.zoom().transform,
d3.zoomIdentity
);
// restart simulation
graphCtx.sim.alpha(0.6).restart();
});
}
// View toggle (Tabel/Kaart)
const viewToggle = document.getElementById('networksViewToggle');
if (viewToggle && !viewToggle.dataset.bound) {
viewToggle.dataset.bound = '1';
viewToggle.addEventListener('click', (ev) => {
const t = ev.target;
if (!(t instanceof HTMLElement)) return;
const b = t.closest('button[data-view]');
if (!b) return;
setNetworksView(b.getAttribute('data-view'));
});
}
// Map toolbar placeholders (no-op for now)
const legendBtn = document.getElementById('networksMapLegendBtn');
const legend = document.getElementById('networksMapLegend');
if (legendBtn && !legendBtn.dataset.bound) {
legendBtn.dataset.bound = '1';
legendBtn.addEventListener('click', () => {
if (!legend) return;
legend.style.display = (legend.style.display === 'none' || !legend.style.display) ? '' : 'none';
});
}
const resetBtn = document.getElementById('networksMapResetBtn');
if (resetBtn && !resetBtn.dataset.bound) {
resetBtn.dataset.bound = '1';
resetBtn.addEventListener('click', () => {
if (!graphCtx) return;
// reset zoom
graphCtx.svg
.transition()
.duration(400)
.call(
d3.zoom().transform,
d3.zoomIdentity
);
// restart simulation
graphCtx.sim.alpha(0.6).restart();
});
}
const layoutBtn = document.getElementById('networksMapLayoutBtn');
if (layoutBtn && !layoutBtn.dataset.bound) {
layoutBtn.dataset.bound = '1';
layoutBtn.addEventListener('click', () => {
if (!graphCtx) return;
graphCtx.sim.alpha(1).restart();
});
}
const search = document.getElementById('networksSearch');
const fConnected = document.getElementById('networksFilterConnected');
const fHideDefaults = document.getElementById('networksFilterHideDefaults');
const fShared = document.getElementById('networksFilterShared');
const sort = document.getElementById('networksSort');
function rerender() {
renderNetworks();
if (state.view === 'map') {
const model = buildGlobalGraphModel();
const s = document.getElementById('networksMapStatus');
if (s) s.textContent = `Kaart: ${model.meta.nodes} nodes, ${model.meta.links} links`;
renderGraph(model);
}
}
if (search && !search.dataset.bound) {
search.dataset.bound = '1';
search.addEventListener('input', () => {
state.filters.q = search.value || '';
rerender();
});
}
if (fConnected && !fConnected.dataset.bound) {
fConnected.dataset.bound = '1';
fConnected.addEventListener('change', () => {
state.filters.connectedOnly = !!fConnected.checked;
rerender();
});
}
if (fHideDefaults && !fHideDefaults.dataset.bound) {
fHideDefaults.dataset.bound = '1';
state.filters.hideDefaults = !!fHideDefaults.checked;
fHideDefaults.addEventListener('change', () => {
state.filters.hideDefaults = !!fHideDefaults.checked;
rerender();
});
}
if (fShared && !fShared.dataset.bound) {
fShared.dataset.bound = '1';
fShared.addEventListener('change', () => {
state.filters.sharedOnly = !!fShared.checked;
rerender();
});
}
if (sort && !sort.dataset.bound) {
sort.dataset.bound = '1';
sort.addEventListener('change', () => {
state.filters.sort = sort.value || 'name_asc';
rerender();
});
}
renderNetworksSummary();
setNetworksView(state.view);
}
// Expose minimal API
window.mvpNetworks = {
refresh,
state,
bindUiOnce,
debugGraph: () => {
const model = buildGlobalGraphModel();
console.log('[networks] graph meta', model.meta);
console.table(model.nodes.slice(0, 12));
console.table(model.links.slice(0, 12));
return model;
},
};
// Bind when script loads (DOM is already mostly there because script is at end of body)
bindUiOnce();
})();