feat: Example supporting Versions now

vega · Jan 16, 2024 · 7dccc41 · 7dccc41
1 parent 862efce
commit 7dccc41
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 35 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+	"editor.detectIndentation": false,
+	"editor.tabSize": 2,
+	"editor.insertSpaces": true
+  }
+
diff --git a/releases/index.html b/releases/index.html
@@ -2,35 +2,35 @@
 <html lang="en">
 
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="./index.css" />
-	<title>Release Notes</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./index.css" />
+  <title>Release Notes</title>
 </head>
 
 <body>
-	<table>
-		<thead>
-			<tr>
-				<th>Version</th>
-				<th>Changes</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr>
-				<td><a href="./1_1_0/vega-webgpu-renderer.js">1.1.0</a></td>
-				<td>Using Render Bundles for Performance</td>
-			</tr>
-			<tr>
-				<td><a href="./1_0_0/vega-webgpu-renderer.js">1.0.0</a></td>
-				<td>First WebGPU Implementation</td>
-			</tr>
-		</tbody>
-	</table>
-	<script>
-	  // Readable versions variable
-	  const readableVersions = ["1.0.0", "1.1.0"];
-	</script>
+  <table>
+    <thead>
+      <tr>
+        <th>Version</th>
+        <th>Changes</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="./1_1_0/vega-webgpu-renderer.js">1.1.0</a></td>
+        <td>Using Render Bundles for Performance</td>
+      </tr>
+      <tr>
+        <td><a href="./1_0_0/vega-webgpu-renderer.js">1.0.0</a></td>
+        <td>First WebGPU Implementation</td>
+      </tr>
+    </tbody>
+  </table>
+  <script>
+    // Readable versions variable
+    const readableVersions = ["1.0.0", "1.1.0"];
+  </script>
 </body>
 
 </html>
diff --git a/test/index.html b/test/index.html
@@ -35,7 +35,9 @@
 
 		// Load Vega and the selected version of Vega WebGPU Renderer
 		loadScript('https://cdn.jsdelivr.net/npm/vega@5.19.1/build/vega.js', function () {
-			loadScript(vegaWebGPURendererUrl);
+			loadScript(vegaWebGPURendererUrl, function() {
+        loadScript('./index.js');
+      });
 		});
 	</script>
 </head>
@@ -52,13 +54,16 @@
 			<option value="canvas">canvas</option>
 			<option value="webgpu" selected>webgpu</option>
 		</select>
+		&nbsp; Version:
+		<select id="versions">
+			<option value="dev">dev</option>
+		</select>
 		&nbsp;
 	</div>
 	<div>
 		<div id="vis"></div>
 	</div>
 	<div id="external"></div>
-	<script src="./index.js"></script>
 </body>
 
 </html>
diff --git a/test/index.js b/test/index.js
@@ -2,8 +2,9 @@
 const urlParams = new URLSearchParams(window.location.search);
 const urlSpec = urlParams.get('spec');
 const urlRenderer = urlParams.get('renderer') ?? 'webgpu';
+const urlVersion = urlParams.get('version') ?? 'dev';
 
-let runtime, view, selectedSpec, selectedRenderer;
+let runtime, view, selectedSpec, selectedRenderer, selectedVersion;
 
 const selectSpec = document.querySelector('#specs');
 selectSpec.addEventListener('change', function () {
@@ -22,12 +23,34 @@ selectRenderer.addEventListener('change', function () {
     view._renderer.simpleLine = true;
   }
 });
+const selectVersion = document.querySelector('#versions');
+selectVersion.addEventListener('change', function () {
+  selectedVersion = selectVersion.options[selectVersion.selectedIndex].value;
+  updateUrl();
+  window.location.reload(true);
+});
 
 
 function updateUrl() {
-  if (!selectedSpec)
+  // Assuming selectedSpec and selectedRenderer are defined elsewhere
+  if (!selectedSpec) {
     selectedSpec = undefined;
-  window.history.replaceState({}, '', `?spec=${selectedSpec}&renderer=${selectedRenderer}`);
+  }
+
+  const urlSearchParams = new URLSearchParams(window.location.search);
+
+  if (selectedVersion) {
+    // If version parameter exists, set it as the first tag
+    urlSearchParams.set('spec', selectedSpec);
+    urlSearchParams.set('renderer', selectedRenderer);
+    urlSearchParams.set('version', selectedVersion);
+  } else {
+    urlSearchParams.set('spec', selectedSpec);
+    urlSearchParams.set('renderer', selectedRenderer);
+    urlSearchParams.set('version', vegaWevGPURendererVersions[vegaWevGPURendererVersions.length - 1]);
+  }
+
+  window.history.replaceState({}, '', `?${urlSearchParams.toString()}`);
 }
 
 async function init() {
@@ -42,11 +65,21 @@ async function init() {
       selectSpec.appendChild(opt);
     });
 
+    vegaWevGPURendererVersions?.forEach(function (name) {
+      const opt = document.createElement('option');
+      opt.setAttribute('value', name);
+      opt.textContent = name;
+      selectVersion.appendChild(opt);
+    });
+
+    if (urlSpec) {
+      selectedSpec = urlSpec;
+    }
     if (urlRenderer) {
       selectedRenderer = urlRenderer;
     }
-    if (urlSpec) {
-      selectedSpec = urlSpec;
+    if (urlVersion) {
+      selectedVersion = urlVersion;
     }
   } catch (err) {
     console.error(err, err.stack);
@@ -75,8 +108,12 @@ async function load(name) {
       selectRenderer.selectedIndex = i;
       break;
     }
-    if (i + 1 == n) {
-      selectRenderer.selectedIndex = undefined;
+  }
+  selectVersion.selectedIndex = 0;
+  for (let i = 0, n = selectVersion.options.length; i < n; ++i) {
+    if (selectVersion.options[i].value === selectedVersion) {
+      selectVersion.selectedIndex = i;
+      break;
     }
   }
 
@@ -105,5 +142,6 @@ async function load(name) {
 
 (async () => {
   await init();
+  updateUrl();
   await load(selectedSpec);
 })();