Skip to content
Snippets Groups Projects
Commit d32664e2 authored by James Constantinos Ladd's avatar James Constantinos Ladd
Browse files

Cleanup

parent 98314c1c
Branches svg-test
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
mapping_provider/api/ui.py
+ 3
− 3
View file @ d32664e2
......@@ -11,12 +11,12 @@ router = APIRouter()
templates = Jinja2Templates(directory="templates")
@router.get("/test/{id}", response_class=HTMLResponse)
def svg_test(request: Request, id: str):
@router.get("/test", response_class=HTMLResponse)
def svg_test(request: Request):
# app_params = config.load()
with open("./static/map.svg", 'r') as file:
svg = file.read()
return templates.TemplateResponse(
request=request, name="item.html", context={"id":id, "svg":svg}
request=request, name="item.html", context={"svg":svg}
)
\ No newline at end of file
static/map.svg
+ 178
− 176
View file @ d32664e2
......@@ -46,7 +46,7 @@
</linearGradient>
</defs>
<g
id="layer1">
id="edges">
<g
id="g17"
class="LONDON AMSTERDAM">
......@@ -64,22 +64,23 @@
y="112.72857"
rx="2"
ry="2" />
<text
xml:space="preserve"
style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="23.19224"
y="114.17885"
id="text12-30-3"
transform="scale(0.95248429,1.0498861)"
class="max-speed"><tspan
id="tspan12-0-2"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="23.19224"
y="114.17885">speed</tspan><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="23.19224"
y="122.65704"
id="tspan17" /></text>
<g
id="g27"
style="fill:#70ff01;fill-opacity:1;stroke:none"
transform="translate(3.2835643,-58.513308)">
<path
style="fill:#70ff01;fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
id="path24"
d="m 21.053166,182.85027 c 0.667585,1.79664 1.631237,3.4544 2.676491,5.05309 1.096069,1.61477 2.34297,3.1183 3.781974,4.43656 2.109243,1.72775 4.508633,3.10327 6.992006,4.2225 1.246124,0.58688 2.618981,0.70528 3.970523,0.84157 2.451761,0.20079 4.913228,0.22877 7.371715,0.25345 2.007769,0.0378 4.023886,-0.0808 6.007973,-0.39533 0.894154,-0.19643 1.758963,-0.48702 2.532044,-0.98196 0.479126,-0.36212 0.862142,-0.83372 1.188204,-1.33411 0.282414,-0.46908 0.644702,-0.88191 0.970833,-1.31973 0.234357,-0.36546 0.5143,-0.69525 0.742765,-1.06477 0.166264,-0.19952 0.245898,-0.43557 0.319098,-0.68015 0.11208,-0.35824 0.161049,-0.73201 0.206385,-1.10344 0.03082,-0.30876 0.01611,-0.61662 0.06843,-0.92308 0.03921,-0.17976 0.0749,-0.36024 0.110225,-0.54079 0,0 -3.520813,-1.87234 -3.520813,-1.87234 v 0 c -0.02865,0.18121 -0.05862,0.36238 -0.10074,0.54105 -0.06446,0.31647 -0.09084,0.62766 -0.0883,0.95086 -0.02755,0.34598 -0.06226,0.69544 -0.165417,1.02827 -0.07555,0.21478 -0.119965,0.42581 -0.277591,0.60218 -0.208653,0.36505 -0.479858,0.68546 -0.707387,1.03842 -0.330303,0.44484 -0.700595,0.86124 -0.981675,1.34131 -0.29612,0.45191 -0.647888,0.88059 -1.098151,1.18649 -0.740188,0.44499 -1.557793,0.71441 -2.405062,0.87729 -1.95438,0.30531 -3.933407,0.42913 -5.911459,0.38461 -2.461612,-0.0292 -4.928253,-0.0637 -7.379745,-0.30808 -1.346115,-0.16802 -2.697414,-0.34728 -3.924747,-0.96569 -0.191032,-0.0918 -0.383799,-0.18008 -0.573093,-0.27541 -0.878395,-0.44239 -3.829902,-2.14323 2.202921,1.31503 0.225385,0.1292 -0.447109,-0.26508 -0.663863,-0.40829 -0.225089,-0.14871 -0.443868,-0.30691 -0.660998,-0.46702 -0.20664,-0.15237 -0.406694,-0.31348 -0.610042,-0.47022 -1.472554,-1.27503 -2.741652,-2.75512 -3.849756,-4.35709 -1.044367,-1.54405 -1.985139,-3.15663 -2.645928,-4.90637 z" />
<path
style="fill:#70ff01;fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
id="path26"
d="m 37.338468,186.46669 c -0.44,-0.63362 -0.862574,-1.27957 -1.230265,-1.95811 -0.150648,-0.28365 -0.287877,-0.57257 -0.371435,-0.88318 -0.03632,-0.16684 -0.04357,-0.33711 -0.04409,-0.5072 0.0026,-0.1362 0.0029,-0.27242 0.0039,-0.40863 -1.4e-4,-0.14707 0.0011,-0.29412 0.0016,-0.44119 0.01019,-0.1587 0.0108,-0.28991 -0.05385,-0.43683 -0.06411,-0.11298 -0.111691,-0.22852 -0.131366,-0.35794 -0.01585,-0.12783 -0.01595,-0.25681 -0.01598,-0.38542 -7.94e-4,-0.15856 0.0011,-0.31711 1.9e-4,-0.47568 -0.01453,-0.1743 0.03545,-0.35847 -0.02005,-0.52483 -0.08905,-0.1579 -0.124357,-0.33484 -0.156959,-0.51084 -0.05274,-0.34766 -0.0051,-0.69544 0.04602,-1.03992 0.02593,-0.17802 0.05253,-0.35595 0.07924,-0.53386 0,0 -3.524845,-1.85549 -3.524845,-1.85549 v 0 c -0.02095,0.17807 -0.04238,0.35609 -0.06794,0.53357 -0.05505,0.37254 -0.131585,0.74383 -0.106048,1.12213 0.0089,0.21066 0.04643,0.41922 0.102669,0.62219 0.01244,0.0211 0.02484,0.0423 0.03727,0.0634 0.01847,1.4e-4 0.0445,-0.0145 0.05538,5.3e-4 0.04839,0.0663 -0.03303,0.23465 5.29e-4,0.31148 -0.0013,0.15816 -1.85e-4,0.31633 -0.0021,0.47449 -5.29e-4,0.13933 -0.0038,0.27876 -2.12e-4,0.41802 0.0062,0.16035 0.0069,0.33352 0.07382,0.48113 0.02246,0.047 0.02299,0.11445 0.06802,0.14063 0.06266,0.0364 0.06144,-0.0971 0.05886,0.14073 5.29e-4,0.1467 0.0016,0.29341 2.65e-4,0.44012 -2.62e-4,0.13656 -0.0027,0.2731 -0.0033,0.40967 -0.0019,0.19185 -0.01,0.38431 0.01564,0.57513 0.04046,0.35136 0.161287,0.68389 0.335664,0.99154 0.332142,0.71041 0.800965,1.34793 1.221131,2.0071 z" />
<path
style="fill:#70ff01;fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
id="path27"
d="m 46.586571,186.27514 c -0.237308,-0.79498 -0.458484,-1.5961 -0.742855,-2.376 -0.102894,-0.27364 -0.256286,-0.52804 -0.333216,-0.81111 -0.03838,-0.14734 -0.0026,-0.3144 -0.123431,-0.42666 -0.10364,-0.16495 -0.102627,-0.37831 -0.110352,-0.56751 -0.0076,-0.39309 -0.01294,-0.78624 -0.01421,-1.17942 1.51e-4,-0.35883 0.0089,-0.71757 0.01008,-1.07638 0.0029,-0.19101 0.0019,-0.38205 7.94e-4,-0.57307 0.0011,-0.15596 0.0026,-0.31189 0.0013,-0.46784 -9.8e-5,-0.1437 0.0016,-0.28742 2.64e-4,-0.43111 2.2e-4,-0.0901 -3.1e-5,-0.0468 7.94e-4,-0.13008 0,0 -3.557791,-1.81278 -3.557791,-1.81278 v 0 c 7.94e-4,0.0839 5.29e-4,0.0403 7.94e-4,0.13077 -0.0011,0.14383 5.29e-4,0.28767 2.64e-4,0.4315 -0.0013,0.1564 2.46e-4,0.31278 0.0013,0.46918 -0.0011,0.1912 -0.0019,0.3824 5.29e-4,0.57358 7.94e-4,0.36188 0.0086,0.72371 0.0082,1.0856 -0.0019,0.39364 -0.01228,0.78714 -0.008,1.18077 0.0035,0.23606 0.0049,0.47169 0.03591,0.70619 0.03391,0.18484 0.186291,0.15038 0.164801,0.34671 0.04511,0.32073 0.158345,0.61026 0.316781,0.89381 0.361624,0.73471 0.535143,1.555 0.770953,2.33503 z" />
</g>
<text
xml:space="preserve"
style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
......@@ -92,6 +93,17 @@
x="23.371271"
y="122.86956"
id="tspan18">average speed</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="23.030624"
y="115.17667"
id="text12-30-3-1-64"
transform="scale(0.95248428,1.0498861)"
class="max-speed"><tspan
id="tspan19"
x="23.030624"
y="115.17667">speed</tspan></text>
</g>
<rect
style="fill:#dcdcdc;fill-opacity:1;stroke:#000000;stroke-width:0.566612;stroke-dasharray:none;stroke-opacity:1"
......@@ -119,22 +131,6 @@
y="112.72857"
rx="2"
ry="2" />
<text
xml:space="preserve"
style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="23.19224"
y="114.17885"
id="text12-30-3-8"
transform="scale(0.95248429,1.0498861)"
class="max-speed"><tspan
id="tspan12-0-2-4"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="23.19224"
y="114.17885">speed</tspan><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="23.19224"
y="122.65704"
id="tspan17-0" /></text>
<text
xml:space="preserve"
style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
......@@ -147,6 +143,17 @@
x="23.371271"
y="122.86956"
id="tspan18-3">average speed</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="99.371979"
y="188.90344"
id="text12-30-3-1-64-2"
transform="matrix(0.95248428,0,0,1.0498861,-72.912976,-77.777055)"
class="max-speed"><tspan
id="tspan19-3"
x="99.371979"
y="188.90344">speed</tspan></text>
</g>
<rect
style="fill:#dcdcdc;fill-opacity:1;stroke:#000000;stroke-width:0.566612;stroke-dasharray:none;stroke-opacity:1"
......@@ -161,14 +168,10 @@
</g>
</g>
<g
id="layer2">
<g
id="g11">
id="nodes">
<g
id="g14"
id="LONDON"
style="display:inline">
<g
id="LONDON">
<circle
style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
id="rand1"
......@@ -214,7 +217,8 @@
</g>
</g>
<g
id="AMSTERDAM">
id="AMSTERDAM"
style="display:inline">
<circle
style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
id="rand2"
......@@ -232,7 +236,7 @@
id="tspan12-1"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="133.78204"
y="87.050667">name</tspan></text>
y="87.050667">placeholder doesnt matter</tspan></text>
<g
id="g13-3"
transform="translate(118.24697,-21.786738)"
......@@ -261,7 +265,8 @@
</g>
</g>
<g
id="FRANKFURT">
id="FRANKFURT"
style="display:inline">
<circle
style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
id="rand3"
......@@ -270,15 +275,14 @@
r="5" />
<text
xml:space="preserve"
style="font-size:7.05556px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
x="136.65907"
y="179.83073"
id="text12-3"
class=" node-text"><tspan
id="tspan12-8"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
id="tspan21"
x="136.65907"
y="179.83073">name</tspan></text>
y="179.83073"></tspan></text>
<g
id="g13-1"
transform="translate(85.832571,81.404649)"
......@@ -307,6 +311,4 @@
</g>
</g>
</g>
</g>
</g>
</svg>
static/styles.css
+ 12
− 7
View file @ d32664e2
......@@ -3,7 +3,7 @@
}
.node-text {
fill: none;
fill: green;
}
.node-text tspan:hover {
......@@ -11,17 +11,22 @@
}
.show_on_hover {
display: none !important;
/*display: none !important;*/
opacity: 0;
visibility: hidden;
transition: opacity 0s, visibility 0s;
transition-delay: 0.5s ;
}
circle:hover ~.show_on_hover,
.show_on_hover:has(~ circle:hover),
rect:hover ~.show_on_hover,
.show_on_hover:has(~ rect:hover) {
display: block !important;
.show_on_hover:has(~ rect:hover),
.show_on_hover:hover {
/*display: block !important;*/
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.AMSTERDAM.FRANKFURT {
fill: orange;
}
static/svg_replace.js
+ 25
− 23
View file @ d32664e2
function set_text(replacement_list) {
for (const [selector, text] of replacement_list) {
console.log(`replacing: ${selector} with: ${text}`);
// console.log(`replacing: ${selector} with: ${text}`);
const elements = document.querySelectorAll(selector);
console.log(`found ${elements.length} elements`);
// console.log(`found ${elements.length} elements`);
for (const element of elements) {
element.innerHTML = text;
}
......@@ -13,9 +13,9 @@ function set_text(replacement_list) {
function set_style(style_list) {
for (const [selector, style, style_value] of style_list) {
console.log(`replacing: ${selector} with: ${style}: ${style_value}`);
// console.log(`replacing: ${selector} with: ${style}: ${style_value}`);
const elements = document.querySelectorAll(selector);
console.log(`found ${elements.length} elements`);
// console.log(`found ${elements.length} elements`);
for (const element of elements) {
element.style[style] = style_value;
}
......@@ -26,7 +26,7 @@ function set_style(style_list) {
function clean(string) {
// removes spaces and special characters to make a string a valid CSS class or id name
// also leading numbers or underscore + number
// also if there is a number or underscore + number append an 'n' to the front
let result = string.replace(/ /g,"_");
if (/^_*[0-9]/.test(result)) {
result = "n" + result;
......@@ -34,25 +34,21 @@ function clean(string) {
return result.replace(/[^a-zA-Z0-9_]/g, "");
}
function pretty_speed(speed) {
// Converts a link speed in bps to a rounded string with units
}
function update_pops(pops) {
// for every item in the json return appropriate pairs of css selectors and text to replace
// returns the list, this function will have no side effects
console.log(pops)
let pop_country = pops.pops.map((pop) => {
return [`#${clean(pop['name'])} .node-info tspan`, `Country: ${pop['country']}`];
})
let changes = []
for (const pop of pops.pops) {
let base_selector = `#${clean(pop['name'])}`
return pop_country;
changes.push([`${base_selector} .node-info tspan`, `Country: ${pop['country']}`])
changes.push([`${base_selector} .node-text tspan`, `${pop['name']}`])
}
return changes;
}
function update_trunks(services) {
// for every item in the json return appropriate pairs of css selectors and text to replace
// returns the list, this function will have no side effects
// filter to include only items with two pops, no idea what it means if there is just one
let filtered_services = services.services.filter((service) => service['pops'].length === 2)
console.log(filtered_services)
......@@ -60,7 +56,8 @@ function update_trunks(services) {
for (const service of filtered_services) {
let base_selector = `.${clean(service['pops'][0])}.${clean(service['pops'][1])}`
changes.push([`${base_selector} .max-speed tspan`, `${service['overlays']['speed']}`])
changes.push([`${base_selector} .max-speed tspan`, `Speed: ${service['overlays']['speed']}`])
changes.push([`${base_selector} .avg-speed tspan`, `Mean egress: ${service['overlays']['mean']['egress']}`])
}
return changes;
}
......@@ -104,11 +101,16 @@ function set_text_from_api() {
update_trunks_from_api();
}
let css_list = [
['.AMSTERDAM.FRANKFURT', 'fill', 'blue'],
['.AMSTERDAM.LONDON', 'fill', 'green'],
]
let text_list = [
function set_css_from_api() {
// dont exactly get where did data should come from right now, probably would be boring anyways
let fake_data = [
['.AMSTERDAM.FRANKFURT > rect', 'fill', 'red'],
['.AMSTERDAM.LONDON > rect', 'fill', 'green'],
];
set_style(fake_data);
}
let text_list_test = [
['tspan', 'REPLACED ALL 1'],
['#LONDON .node-text tspan', 'LONDON'],
['#LONDON .node-info tspan', 'LONDON INFO'],
......
......
templates/item.html
+ 6
− 9
View file @ d32664e2
......@@ -7,16 +7,13 @@
<script src="{{ url_for('static', path='/svg_replace.js') }}" defer></script>
</head>
<body>
HELLO?
ITEM ID: {{id}}
<div class="test">
hiiii
<h1>hiiiiii</h1>
does this work? {{2+2 *3}}
</div>
<h1>
SVG data replacement test
</h1>
<div>
<button type="button" onclick="set_text_from_api()">Set Text With API Data</button>
<button type="button">Set CSS With API Data</button>
<button type="button" onclick="set_text_from_api()">Set Text With (real) API Data</button>
<button type="button" onclick="set_css_from_api()">Set CSS With (fake) API Data</button>
</div>
<div>
{{svg|safe}}
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment