Include visualizer in docs site

Author: SupernaviX

.github/workflows/docs.yaml

@@ -72,9 +72,47 @@ jobs:
           git commit -m "Auto-generate diagram PNGs [skip ci]"
           git push origin HEAD:${{ github.head_ref || github.ref_name }}
 
+  viz-build:
+    name: "Build Visualizer"
+    runs-on: ubuntu-22.04
+    steps:
+      - name: 📥 Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+      
+      - name: 🛠️ Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "yarn"
+          cache-dependency-path: ./ui/yarn.lock 
+
+      - name: 📦 Install dependencies
+        working-directory: ui
+        run: yarn install
+  
+      - name: 🏗️ Build visualizer
+        working-directory: ui
+        run: |
+          yarn build
+
+      - name: 🚢 Upload visualizer static site
+        id: upload_viz
+        uses: actions/upload-artifact@v4
+        with:
+          name: visualizer
+          path: |
+            dist/assets
+            dist/topologies
+            dist/traces
+            dist/scenarios\.json
+
+
   docs-build:
     name: "Build"
     runs-on: ubuntu-22.04
+    needs: viz-build
     outputs:
       has_changes: ${{ steps.check_changes.outputs.has_changes }}
     steps:
@@ -83,11 +121,12 @@ jobs:
         with:
           fetch-depth: 2
 
-      - name: Check for site changes
+      - name: Check for site or visualizer changes
         id: check_changes
         run: |
           SITE_CHANGES=$(git diff --name-only HEAD^ HEAD -- site/ || true)
-          if [ -z "$SITE_CHANGES" ]; then
+          VIZ_CHANGES=$(git diff --name-only HEAD^ HEAD -- ui/ || true)
+          if [ -z "$SITE_CHANGES" ] && [ -z "$VIZ_CHANGES" ]; then
             echo "No changes in site directory"
             echo "has_changes=false" >> $GITHUB_OUTPUT
           else
@@ -110,6 +149,13 @@ jobs:
         working-directory: site
         run: yarn install
 
+      - name: 👁️ Unpack visualizer
+        if: steps.check_changes.outputs.has_changes == 'true'
+        uses: actions/download-artifact@v4
+        with:
+          name: visualizer
+          path: site/static/visualizer
+
       - name: 🏗️ Build Docusaurus site
         if: steps.check_changes.outputs.has_changes == 'true'
         working-directory: site

site/sidebars.ts

@@ -34,6 +34,11 @@ const sidebars: SidebarsConfig = {
         "development/throughput-simulation",
         "development/simulation-demonstration",
         "development/cost-estimator",
+        {
+          type: "link",
+          href: "/visualizer",
+          label: "Visualizer",
+        },
       ],
     },
   ],