Setting up DevContainers to QA Kedro-Viz on Codespaces

.devcontainer/devcontainer.json

@@ -0,0 +1,44 @@
+{
+	"name": "Kedro Viz Dev Container",
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
+
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {
+			"version": "18",
+			"nodeGypDependencies": true
+		}
+	},
+
+	"forwardPorts": [8000],
+
+	"portsAttributes": {
+		"8000": {
+			"label": "Kedro Viz",
+			"onAutoForward": "openBrowser"
+		}
+	},
+
+	"containerEnv": {
+		"DISPLAY": "dummy",
+		"PYTHONUNBUFFERED": "True",
+		"UV_LINK_MODE": "copy",
+		"VIRTUAL_ENV": "/home/vscode/venv"
+	},
+
+	"mounts": [
+		{"source": "${localWorkspaceFolderBasename}-node_modules", "target": "${containerWorkspaceFolder}/node_modules", "type": "volume"},
+		{"source": "${localWorkspaceFolderBasename}-venv", "target": "${containerWorkspaceFolder}/.venv", "type": "volume"}
+	],
+
+	"onCreateCommand": "./.devcontainer/onCreateCommand.sh",
+
+	"postStartCommand": "nohup bash -c 'python -m http.server --directory demo-project/build 8000 &' > server.out 2> server.err < /dev/null",
+
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"ms-python.python"
+			]
+		}
+	}
+}

.devcontainer/onCreateCommand.sh

@@ -0,0 +1,61 @@
+#! /usr/bin/env bash
+
+set -euo pipefail
+IFS=$'\n\t'
+
+# Install system dependencies
+sudo apt-get update && \
+sudo apt-get install -y --no-install-recommends \
+    build-essential \
+    python3 \
+    make \
+    g++ \
+    libpixman-1-dev \
+    libcairo2-dev \
+    libjpeg-dev \
+    libgif-dev \
+    pkg-config \
+    libcairo2-dev \
+    libpango1.0-dev \
+    libpangocairo-1.0-0 && \
+sudo apt-get clean && sudo rm -rf /var/lib/apt/lists/*
+
+# Install uv
+curl -LsSf https://astral.sh/uv/install.sh | sh
+
+# Ensure the virtual environment path is set
+export VIRTUAL_ENV="/home/vscode/venv"  # Adjust this if needed
+uv venv $VIRTUAL_ENV
+
+# Activate virtual environment explicitly
+source $VIRTUAL_ENV/bin/activate
+
+# Install Python dependencies
+uv pip install kedro
+uv pip install -r package/test_requirements.txt -r demo-project/src/docker_requirements.txt
+
+# Install Node.js dependencies
+sudo chown vscode:vscode node_modules
+npm install
+
+# Build the frontend and pip install editable kedro-viz
+make build
+uv pip install -e package/
+
+# Ensure Kedro is installed and available
+if ! command -v kedro &> /dev/null
+then
+    echo "Error: Kedro command not found. Exiting."
+    exit 1
+fi
+
+# Generate the Kedro-Viz static build inside demo-project
+cd demo-project
+source $VIRTUAL_ENV/bin/activate  # Ensure virtual environment is active
+kedro viz build
+
+# Serve the generated files
+cd build
+python3 -m http.server 8000 &
+
+echo "Setup complete! The website is available at http://localhost:8000"

.dockerignore

@@ -0,0 +1 @@
+.venv

src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js

@@ -62,7 +62,7 @@ export const FlowchartPrimaryToolbar = ({
           className={'pipeline-menu-button--labels'}
           dataTest={`sidebar-flowchart-labels-btn-${textLabels}`}
           icon={LabelIcon}
-          labelText={`${textLabels ? 'Hide' : 'Show'} text labels`}
+          labelText={`${textLabels ? 'Hide' : 'Show'} text labelssss`}
           onClick={() => onToggleTextLabels(!textLabels)}
           visible={display.labelBtn}
         />