mwinter/compact_sets
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 1 Wiki Activity

Normalize edge ratios, center/horizontal labels, add dynamic opacity and width based on harmonic distance

Browse source
This commit is contained in:
Michael Winter 2026-04-24 17:43:56 +02:00
parent 8fc949e828
commit 5a91c3acfb
1 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
webapp/path_navigator.html
View file

@ -419,6 +419,33 @@
return label;
}
// Calculate edge opacity based on harmonic distance: normalized 0→0.5, 1→1
function calcEdgeOpacity(ratio) {
const parts = ratio.split('/');
if (parts.length === 2) {
const n = parseInt(parts[0]);
const d = parseInt(parts[1]);
const product = n * d;
if (product <= 1) return 1; // handle 1/1 edge case
const rawOpacity = 1 / Math.log2(product);
return 0.5 + (rawOpacity / 2); // normalize: 0→0.5, 1→1
}
return 1;
}
// Calculate edge width: inverse of harmonic distance (2-5px range)
function calcEdgeWidth(ratio) {
const parts = ratio.split('/');
if (parts.length === 2) {
const n = parseInt(parts[0]);
const d = parseInt(parts[1]);
const product = n * d;
if (product <= 1) return 5; // handle 1/1 edge case
return (1 / Math.log2(product) * 3) + 2;
}
return 3.5;
}
// Multiply two fractions and return as string
function multiplyFractions(frac1, frac2) {
const f1 = parseFraction(frac1);
@ -659,15 +686,17 @@
{
selector: 'edge',
style: {
'width': 2.5,
'width': function(ele) { return calcEdgeWidth(ele.data('ratio')); },
'line-color': '#ffffff',
'curve-style': 'straight',
'target-arrow-shape': 'none',
'line-opacity': function(ele) { return calcEdgeOpacity(ele.data('ratio')); },
'label': 'data(ratio)',
'font-size': '12px',
'color': '#ffffff',
'text-rotation': '0deg',
'text-margin-y': 0,
'text-opacity': 1,
'text-background-color': '#000000',
'text-background-opacity': 0.8,
'text-background-padding': '2px',
@ -681,6 +710,7 @@
'line-style': 'dashed',
'curve-style': 'straight',
'target-arrow-shape': 'none',
'line-opacity': 1,
'label': '',
}
},