Cleanup

mapping_provider/api/ui.py

@@ -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/styles.css

@@ -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

 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,33 +34,30 @@ 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
+//     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)
     let changes = []
     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

@@ -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}}