hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-10 18:03:14 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions

Stop auto-creating maps on new regions; keep aggregate edges single-width by default.

Browse source
This commit is contained in:
oliver 2026-08-04 19:09:32 +08:00
parent 4abb037dce
commit af29977878
10 changed files with 58 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web/src/pages/TopologyPage.tsx
View file

@ -450,6 +450,7 @@ const EDGE_DEFAULTS_KEY = "netx.topology.edgeDefaults";
const AUTO_LAYOUT_DISCOVER_KEY = "netx.topology.autoLayoutAfterDiscover";
const DISCOVER_AUTO_ADD_KEY = "netx.topology.discoverAutoAddUnmatched";
const DISCOVER_PROJECT_NEIGHBORS_KEY = "netx.topology.discoverProjectNeighbors";
const SCALE_BUNDLE_WIDTH_KEY = "netx.topology.scaleBundleWidth";
function loadBoolFlag(key: string, defaultValue: boolean): boolean {
try {
@ -696,6 +697,10 @@ export function TopologyPage() {
const [hidePorts, setHidePorts] = useState(true);
/** Default: logical aggregate of parallel links; expand to see each physical edge. */
const [expandPhysicalLinks, setExpandPhysicalLinks] = useState(false);
/** When aggregating, optionally thicken the line by member count (off = single-line width). */
const [scaleBundleWidth, setScaleBundleWidth] = useState(() =>
loadBoolFlag(SCALE_BUNDLE_WIDTH_KEY, false),
);
const [edgeFlow, setEdgeFlow] = useState(false);
const [edgeDefaults, setEdgeDefaults] = useState<EdgeDefaults>(() => loadEdgeDefaults());
const [toolMode, setToolMode] = useState<ToolMode>("select");
@ -802,7 +807,7 @@ export function TopologyPage() {
[hideIp, hideVendor, hidePorts, toolMode],
);
const displayEdges = useMemo(() => {
const built = buildLinkDisplayEdges(edges, expandPhysicalLinks, hidePorts).map((e) =>
const built = buildLinkDisplayEdges(edges, expandPhysicalLinks, hidePorts, scaleBundleWidth).map((e) =>
withEdgeVisual(e, edgeDefaults),
);
return built.map((e) => {
@ -818,7 +823,7 @@ export function TopologyPage() {
animated: edgeFlow,
};
});
}, [edges, expandPhysicalLinks, hidePorts, edgeFlow, edgeDefaults, selectedEdgeId]);
}, [edges, expandPhysicalLinks, hidePorts, scaleBundleWidth, edgeFlow, edgeDefaults, selectedEdgeId]);
const treeQuery = useQuery({
queryKey: queryKeys.topologyTree,
@ -2757,6 +2762,19 @@ export function TopologyPage() {
/>
{t("topology.expandPhysicalLinks")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"
checked={scaleBundleWidth}
disabled={expandPhysicalLinks}
onChange={(e) => {
const next = e.target.checked;
setScaleBundleWidth(next);
persistBoolFlag(SCALE_BUNDLE_WIDTH_KEY, next);
}}
/>
{t("topology.scaleBundleWidth")}
</label>
<label className="topo-display-toggles__item">
<input
type="checkbox"

7
web/src/pages/topology/linkDisplay.ts
View file

@ -89,6 +89,7 @@ export function buildLinkDisplayEdges(
edges: Edge[],
expandPhysical: boolean,
hidePorts = false,
scaleBundleWidth = false,
): Edge[] {
const groups = new Map<string, Edge[]>();
for (const e of edges) {
@ -153,9 +154,11 @@ export function buildLinkDisplayEdges(
aggregated: true,
member_count: list.length,
members,
// Slightly thicker logical bundle.
stroke_width: Math.max(Number(prev.stroke_width || 0), Math.min(8, 2 + list.length)),
};
// Optional: thicken logical bundles by member count (default keeps single-line width).
if (scaleBundleWidth) {
data.stroke_width = Math.max(Number(prev.stroke_width || 0), Math.min(8, 2 + list.length));
}
out.push({
...primary,
id: aggregateIdForPair(primary.source, primary.target),