Handle URLs better

examples/documentation.py

@@ -45,7 +45,7 @@ def create():
             ltk.Span("⚠️ You need to run on "),
             ltk.Link("?runtime=py&tab=8", "Pyodide"),
             ltk.Span(" to see documentation for LTK.") \
-        ).css("color", "red")
+        ).css("color", "red").attr("name", "LTK Documentation")
     return (
         ltk.VBox(
             list(filter(None, [

ltk/jquery.py

@@ -80,6 +80,9 @@ def delete(route, handler):
 
 
 def post(route, data, handler):
+    if "?" in route:
+        index = route.index("?")
+        route = f"{route[:index]}?_=p&{route[index:]}"
     payload = window.encodeURIComponent(json.dumps(data))
     wrapper = proxy(lambda data, *rest: handler(window.JSON.stringify(data)))
     return jQuery.post(route, payload, wrapper, "json")

ltk/logger.py

@@ -146,8 +146,11 @@ def _check_pubsub(self, message):
     def _check_network(self, message):
         if message.startswith("[Network]"):
             kind, type, encodedSize, decodedSize, duration, name = json.loads(message[10:])
+            post = "POST:" if "?_=p&" in name else ""
+            sender = "Application" if post else "Network"
+            receiver = "Network" if post else "Application"
             if type == "Xmlhttprequest":
-                self.sequence_ui.log("Network", "Application", name, f"{decodedSize}")
+                self.sequence_ui.log(sender, receiver, name, f"{decodedSize}")
 
     def _check_events(self, message):
         print(message)
@@ -251,7 +254,7 @@ class _Dot(ltk.Div):
     def __init__(self, sender, receiver, topic, data, line, reverse):
         ltk.Div.__init__(
             self,
-            ltk.Div(f"{topic}: {data}").addClass("label")
+            ltk.Span(f"{topic[:18]}: {data}").addClass("label")
         )
         self.attr("title", f"{sender.text()} => {receiver.text()} - {topic}: {data}")
         self.reverse = reverse

ltk/ltk.css

@@ -307,8 +307,9 @@
     text-wrap: wrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    overflow-wrap: anywhere;
     top: 14px;
-    left: -79px;
+    left: -39px;
 }
 
 .ltk-vertical-dragger {

ltk/ltk.js

@@ -6,6 +6,9 @@
     const start = new Date().getTime();
     window.__ltk__ = start
 
+    const url_base = `${document.location.protocol}//${document.location.host}`
+    const url_prefix = new RegExp(`${url_base}|https:\\/\\/www.|https:\\/\\/`)
+
     window.get_time = () => {
         return (new Date().getTime() - start)
     }
@@ -92,6 +95,7 @@
                 kind = "Error";
                 log = console.error;
             }
+            url = entry.name.replace(url_prefix, "")
             log(
                 "[Network]",
                 JSON.stringify([
@@ -100,15 +104,12 @@
                     toHuman(entry.encodedBodySize),
                     toHuman(entry.decodedBodySize),
                     `${entry.duration.toFixed()}ms`,
-                    entry.name
+                    url,
                 ])
             )
         }
     }).observe({
         type: "resource",
         buffered: true,
     });
-
-    console.log("LTK: ltk.js loaded.")
-
 })()