refactor: don't use router, basic tables

docs/Makefile

@@ -16,7 +16,7 @@ help:
 
 # make html and then open it in the browser
 preview: html
-	open "$(BUILDDIR)/html/index.html"
+	echo http://127.0.0.1:8000 && python -m http.server -d _build/html
 
 clean:
 	rm -rf "$(BUILDDIR)"

leaderboard/package.json

@@ -17,16 +17,12 @@
     "@fortawesome/free-brands-svg-icons": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/vue-fontawesome": "^3.0.1",
-    "axios": "^1.6.7",
     "click-outside-vue3": "^4.0.1",
-    "lodash": "^4.17.21",
-    "vue": "^3.4.15",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.15"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
-    "@types/lodash": "^4.14.182",
     "@types/node": "^20.11.10",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-prettier": "^8.0.0",

leaderboard/src/App.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-
+import Table from '@/Table.vue'
+import closedBookData from '@/data/web-closedbook.json'
+import openBookData from '@/data/web-openbook.json'
+import evidenceProvidedData from '@/data/web-wiki-provided.json'
 </script>
 
 <template>
-  hello world
+  <Table :data="closedBookData" />
+  <Table :data="openBookData" />
+  <Table :data="evidenceProvidedData" />
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

leaderboard/src/Table.vue

@@ -9,8 +9,6 @@ import {useRoute, useRouter} from 'vue-router'
 import type {Datum} from "@/scores";
 
 // setup
-const router = useRouter()
-const route = useRoute()
 const props = defineProps<{
   data: Datum[];
 }>();
@@ -98,30 +96,33 @@ function onSortDirectionChange(sorterKey: string, direction: SortOrder) {
 
 // query param helpers
 function updateQueryParams() {
-  const queryParams: { [key: string]: any } = {
-    ...route.query,
-    sort: buildSortQueryParam()
+  const searchParams = new URLSearchParams(window.location.search)
+
+  // build sort query param
+  searchParams.delete('sort')
+  for (const [sorterKey, direction] of sortOrders) {
+    searchParams.append('sort', `${sorterKey}:${direction}`)
   }
+
+  // build filter query params
   for (const filterKey of Object.keys(filters)) {
+    searchParams.delete(filterKey)
     const oneFilterSelections = filterSelections.get(filterKey)
     if (oneFilterSelections) {
-      queryParams[filterKey] = Array.from(oneFilterSelections)
-    } else {
-      queryParams[filterKey] = undefined
+      oneFilterSelections.forEach((v) => searchParams.append(filterKey, v))
     }
   }
-  router.replace({query: queryParams})
+
+  // set query string without reloading
+  const newRelativePathQuery = window.location.pathname + '?' + searchParams.toString()
+  history.pushState(null, '', newRelativePathQuery)
 }
 
 function loadFilterQueryParams() {
+  const searchParams = new URLSearchParams(window.location.search)
   for (const [filterKey, filterDef] of Object.entries(filters)) {
     // if the filter is in the query param and valid, set it up
-    // ensure query params are array
-    let filterQuery = route.query[filterKey]
-    if (!filterQuery) continue
-    if (!isArray(filterQuery)) {
-      filterQuery = [filterQuery]
-    }
+    const filterQuery = searchParams.getAll(filterKey)
     // find the valid options
     let validOptions = []
     for (const queryElem of filterQuery) {
@@ -139,12 +140,8 @@ function loadFilterQueryParams() {
 
 function loadSortQueryParams() {
   // if the sorter is in the query param and valid, set it up
-  // ensure query params are array
-  let sortQuery = route.query.sort
-  if (!sortQuery) return
-  if (!isArray(sortQuery)) {
-    sortQuery = [sortQuery]
-  }
+  const searchParams = new URLSearchParams(window.location.search)
+  const sortQuery = searchParams.getAll('sort')
   for (const sortElem of sortQuery) {
     // ensure key and direction are valid
     if (!sortElem) continue
@@ -155,14 +152,6 @@ function loadSortQueryParams() {
   }
 }
 
-function buildSortQueryParam(): string {
-  const result = []
-  for (const [sorterKey, direction] of sortOrders) {
-    result.push(`${sorterKey}:${direction}`)
-  }
-  return result.join(',')
-}
-
 // other
 function clearFilters() {
   filterSelections.clear()