show each node id in the tinychat topology viz

d7ca9b7732e61a703edee4642487ed940c0b0350 · 2025-01-27 02:20:22 +0000 · Alex Cheema

Files touched

M exo/tinychat/index.css
M exo/tinychat/index.js

Diff

commit d7ca9b7732e61a703edee4642487ed940c0b0350
Author: Alex Cheema <alexcheema123@gmail.com>
Date:   Mon Jan 27 02:20:22 2025 +0000

    show each node id in the tinychat topology viz
---
 exo/tinychat/index.css | 2 +-
 exo/tinychat/index.js  | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/exo/tinychat/index.css b/exo/tinychat/index.css
index d94a5a23..1971795a 100644
--- a/exo/tinychat/index.css
+++ b/exo/tinychat/index.css
@@ -843,4 +843,4 @@ main {
   font-size: 0.8em;
   color: var(--secondary-color-transparent);
   font-family: monospace;
-}
\ No newline at end of file
+}
diff --git a/exo/tinychat/index.js b/exo/tinychat/index.js
index b0eea917..c3887667 100644
--- a/exo/tinychat/index.js
+++ b/exo/tinychat/index.js
@@ -637,6 +637,9 @@ document.addEventListener("alpine:init", () => {
       const vizElement = this.$refs.topologyViz;
       vizElement.innerHTML = ''; // Clear existing visualization
 
+      // Helper function to truncate node ID
+      const truncateNodeId = (id) => id.substring(0, 8);
+
       // Create nodes from object
       Object.entries(topologyData.nodes).forEach(([nodeId, node]) => {
         const nodeElement = document.createElement('div');
@@ -647,14 +650,14 @@ document.addEventListener("alpine:init", () => {
         const peerConnectionsHtml = peerConnections.map(peer => `
           <div class="peer-connection">
             <i class="fas fa-arrow-right"></i>
-            <span>To ${peer.to_id}: ${peer.description}</span>
+            <span>To ${truncateNodeId(peer.to_id)}: ${peer.description}</span>
           </div>
         `).join('');
 
         nodeElement.innerHTML = `
           <div class="node-info">
             <span class="status ${nodeId === topologyData.active_node_id ? 'active' : 'inactive'}"></span>
-            <span>${node.model}</span>
+            <span>${node.model} [${truncateNodeId(nodeId)}]</span>
           </div>
           <div class="node-details">
             <span>${node.chip}</span>

← b349e48b fix visual bug where frontend would show the full hf repo si · back to Exo · HF_HOME -> EXO_HOME 19a27c5b →