Skip to content

Commit

Permalink
refactor: implement table for fanout
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhudotexe
zhudotexe committed Feb 19, 2024
1 parent 795fcf1 commit ea00223
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 221 deletions.
181 changes: 77 additions & 104 deletions leaderboard/src/Table.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
<script setup lang="ts">
import FilterIcon from '@/FilterIcon.vue'
import { filters } from '@/filters'
import { sorters, SortOrder } from '@/sorters'
import {filters} from '@/filters'
import {defaultSorter, sorters, SortOrder} from '@/sorters'
import SortIcon from '@/SortIcon.vue'
import { isArray } from 'lodash'
import { computed, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {isArray} from 'lodash'
import {computed, onMounted, reactive} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import type {Datum} from "@/scores";
// setup
const router = useRouter()
const route = useRoute()
const props = defineProps<{
data: Datum[];
}>();
// state
const pagination = reactive({
currentPage: 0,
numPerPage: 50
})
const filterSelections = reactive(new Map<string, Set<number>>())
const filterSelections = reactive(new Map<string, Set<any>>())
const sortOrders = reactive(new Map<string, SortOrder>())
// computed
const filteredSortedData = computed(() => {
let data = [...worldPlots.value]
let tempData = [...props.data]
// filter
for (const [filterKey, selected] of filterSelections) {
const filterImpl = filters[filterKey]
if (!filterImpl) continue
data = data.filter(filterImpl.strategy(Array.from(selected)))
tempData = tempData.filter(filterImpl.strategy(Array.from(selected)))
}
// sort: return first non-zero sort
return data.sort((a, b) => {
return tempData.sort((a, b) => {
for (const [sorterKey, direction] of sortOrders) {
const sorterImpl = sorters[sorterKey]
if (!sorterImpl) continue
Expand All @@ -46,8 +50,8 @@ const filteredSortedData = computed(() => {
})
const currentPageData = computed(() => {
return filteredSortedData.value.slice(
pagination.currentPage * pagination.numPerPage,
(pagination.currentPage + 1) * pagination.numPerPage
pagination.currentPage * pagination.numPerPage,
(pagination.currentPage + 1) * pagination.numPerPage
)
})
const numPages = computed(() => {
Expand All @@ -68,7 +72,7 @@ function onFilterSelectionChange(filterKey: string, selected: number[]) {
if (!selected.length) {
filterSelections.delete(filterKey)
} else {
filterSelections.set(filterKey, new Set<number>(selected))
filterSelections.set(filterKey, new Set(selected))
}
updateQueryParams()
}
Expand Down Expand Up @@ -106,7 +110,7 @@ function updateQueryParams() {
queryParams[filterKey] = undefined
}
}
router.replace({ query: queryParams })
router.replace({query: queryParams})
}
function loadFilterQueryParams() {
Expand All @@ -128,7 +132,7 @@ function loadFilterQueryParams() {
}
// and init the filter
if (validOptions.length) {
filterSelections.set(filterKey, new Set<number>(validOptions))
filterSelections.set(filterKey, new Set(validOptions))
}
}
}
Expand Down Expand Up @@ -201,148 +205,117 @@ onMounted(() => {
<tr>
<th>
<span class="icon-text">
<span>District</span>
<span>Model</span>
<FilterIcon
class="ml-1"
:options="filters.districts.options"
:selected="getSelectedFilterOptions('districts')"
@selectionChanged="onFilterSelectionChange('districts', $event)"
class="ml-1"
:options="filters.modelType.options"
:selected="getSelectedFilterOptions('modelType')"
@selectionChanged="onFilterSelectionChange('modelType', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>Ward</span>
<FilterIconGrid
class="ml-1"
:options="filters.wards.options"
:selected="getSelectedFilterOptions('wards')"
@selectionChanged="onFilterSelectionChange('wards', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>Plot</span>
<FilterIconGrid
class="ml-1"
:options="filters.plots.options"
:selected="getSelectedFilterOptions('plots')"
@selectionChanged="onFilterSelectionChange('plots', $event)"
<span>Context Size</span>
<SortIcon
class="ml-1"
:index="getSortIndex('context')"
:direction="getSortDirection('context')"
@directionChanged="onSortDirectionChange('context', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>Size</span>
<span>Loose</span>
<SortIcon
class="ml-1"
:index="getSortIndex('size')"
:direction="getSortDirection('size')"
@directionChanged="onSortDirectionChange('size', $event)"
/>
<FilterIcon
:options="filters.sizes.options"
:selected="getSelectedFilterOptions('sizes')"
@selectionChanged="onFilterSelectionChange('sizes', $event)"
class="ml-1"
:index="getSortIndex('loose')"
:direction="getSortDirection('loose')"
@directionChanged="onSortDirectionChange('loose', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>Price</span>
<span>Strict</span>
<SortIcon
class="ml-1"
:index="getSortIndex('price')"
:direction="getSortDirection('price')"
@directionChanged="onSortDirectionChange('price', $event)"
class="ml-1"
:index="getSortIndex('strict')"
:direction="getSortDirection('strict')"
@directionChanged="onSortDirectionChange('strict', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>Entries</span>
<span>ROUGE-1</span>
<SortIcon
class="ml-1"
:index="getSortIndex('entries')"
:direction="getSortDirection('entries')"
@directionChanged="onSortDirectionChange('entries', $event)"
class="ml-1"
:index="getSortIndex('rouge1')"
:direction="getSortDirection('rouge1')"
@directionChanged="onSortDirectionChange('rouge1', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>Lottery Phase</span>
<span>ROUGE-2</span>
<SortIcon
class="ml-1"
:index="getSortIndex('phase')"
:direction="getSortDirection('phase')"
@directionChanged="onSortDirectionChange('phase', $event)"
/>
<FilterIcon
:options="filters.phases.options"
:selected="getSelectedFilterOptions('phases')"
@selectionChanged="onFilterSelectionChange('phases', $event)"
class="ml-1"
:index="getSortIndex('rouge2')"
:direction="getSortDirection('rouge2')"
@directionChanged="onSortDirectionChange('rouge2', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>Allowed Tenants</span>
<FilterIcon
class="ml-1"
:options="filters.tenants.options"
:selected="getSelectedFilterOptions('tenants')"
@selectionChanged="onFilterSelectionChange('tenants', $event)"
<span>ROUGE-L</span>
<SortIcon
class="ml-1"
:index="getSortIndex('rougeL')"
:direction="getSortDirection('rougeL')"
@directionChanged="onSortDirectionChange('rougeL', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>Last Updated</span>
<span>BLEURT</span>
<SortIcon
class="ml-1"
:index="getSortIndex('updateTime')"
:direction="getSortDirection('updateTime')"
@directionChanged="onSortDirectionChange('updateTime', $event)"
class="ml-1"
:index="getSortIndex('bleurt')"
:direction="getSortDirection('bleurt')"
@directionChanged="onSortDirectionChange('bleurt', $event)"
/>
</span>
</th>
<th>
<span class="icon-text">
<span>First Seen</span>
<span>GPT Judge</span>
<SortIcon
class="ml-1"
:index="getSortIndex('firstSeen')"
:direction="getSortDirection('firstSeen')"
@directionChanged="onSortDirectionChange('firstSeen', $event)"
class="ml-1"
:index="getSortIndex('gptscore')"
:direction="getSortDirection('gptscore')"
@directionChanged="onSortDirectionChange('gptscore', $event)"
/>
</span>
</th>
</tr>
</thead>

<tbody>
<tr
v-for="plot in currentPageData"
:key="[plot.world_id, plot.district_id, plot.ward_number, plot.plot_number].toString()"
>
<td>{{ client.districtName(plot.district_id) }}</td>
<td>Ward {{ plot.ward_number + 1 }}</td>
<td>Plot {{ plot.plot_number + 1 }}</td>
<td>{{ utils.sizeStr(plot.size) }}</td>
<td>{{ plot.price.toLocaleString() }}</td>
<td>
<FlashOnChange :value="utils.lotteryEntryCountStr(plot)" :class="{'is-italic': utils.shouldEm(plot)}" />
</td>
<td>
<FlashOnChange :value="utils.lotteryPhaseStr(plot)" :class="{'is-italic': utils.shouldEm(plot)}" />
</td>
<td>{{ utils.tenantStr(plot.purchase_system) }}</td>
<td>
<FlashOnChange :value="utils.updatedStr(plot.last_updated_time)" />
</td>
<td>{{ utils.updatedStr(plot.first_seen_time) }}</td>
<tr v-for="datum in currentPageData">
<td>{{ datum.name }} ({{ datum.citation }})</td>
<td>{{ datum.context }}</td>
<td>{{ datum.acc.loose }}</td>
<td>{{ datum.acc.strict }}</td>
<td>{{ datum.rouge.rouge1.fscore }}</td>
<td>{{ datum.rouge.rouge2.fscore }}</td>
<td>{{ datum.rouge.rougeL.fscore }}</td>
<td>{{ datum.bleurt }}</td>
<td>{{ datum.gpt }}</td>
</tr>
</tbody>
</table>
Expand All @@ -351,13 +324,13 @@ onMounted(() => {
<p class="level-item">
<button class="button mr-2" v-if="pagination.currentPage > 0" @click="pagination.currentPage--">
<span class="icon is-small">
<font-awesome-icon :icon="['fas', 'angle-left']" />
<font-awesome-icon :icon="['fas', 'angle-left']"/>
</span>
</button>
<span>Page {{ pagination.currentPage + 1 }} / {{ numPages }}</span>
<button class="button ml-2" v-if="pagination.currentPage < numPages - 1" @click="pagination.currentPage++">
<span class="icon is-small">
<font-awesome-icon :icon="['fas', 'angle-right']" />
<font-awesome-icon :icon="['fas', 'angle-right']"/>
</span>
</button>
</p>
Expand Down
1 change: 1 addition & 0 deletions leaderboard/src/data/web-closedbook.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[{"acc": {"acc": 0.3549958003169331, "perfect": 0.06629834254143646}, "rouge": {"rouge1": {"precision": 0.3081323409240976, "recall": 0.4026625098759217, "fscore": 0.313123968945042}, "rouge2": {"precision": 0.1696203592964782, "recall": 0.22556614456096988, "fscore": 0.1769179306107922}, "rougeL": {"precision": 0.2618982426700318, "recall": 0.3437078118709097, "fscore": 0.26676820286543684}}, "bleurt": 0.4191427961588729, "gpt": 0.14917127071823205, "name": "GPT-4", "authors": "OpenAI", "url": "https://platform.openai.com/docs/models/gpt-4-and-gpt-4-turbo", "citation": "OpenAI, 2023", "type": "FOUNDATION", "context": 8192}, {"acc": {"acc": 0.4597296177579326, "perfect": 0.10082872928176796}, "rouge": {"rouge1": {"precision": 0.5061057938990791, "recall": 0.5171893148007345, "fscore": 0.48194841967428786}, "rouge2": {"precision": 0.29559659009870354, "recall": 0.30901380162874503, "fscore": 0.290250346638784}, "rougeL": {"precision": 0.43012909178526687, "recall": 0.440115792132854, "fscore": 0.4091321043635482}}, "bleurt": 0.49333308180228125, "gpt": 0.19889502762430938, "name": "GPT-4-turbo", "authors": "OpenAI", "url": "https://platform.openai.com/docs/models/gpt-4-and-gpt-4-turbo", "citation": "OpenAI, 2023", "type": "FOUNDATION", "context": 128000}, {"acc": {"acc": 0.3979994873440785, "perfect": 0.058011049723756904}, "rouge": {"rouge1": {"precision": 0.40734904473273553, "recall": 0.45162239056919035, "fscore": 0.4012819044350075}, "rouge2": {"precision": 0.22803347570177684, "recall": 0.2518584000616542, "fscore": 0.2271839790263482}, "rougeL": {"precision": 0.34711466296455995, "recall": 0.38661536042587596, "fscore": 0.34195490807715956}}, "bleurt": 0.4551408462926169, "gpt": 0.14502762430939226, "name": "GPT-3.5-turbo", "authors": "OpenAI", "url": "https://platform.openai.com/docs/models/gpt-3-5-turbo", "citation": "OpenAI, 2023", "type": "FOUNDATION", "context": 16384}, {"acc": {"acc": 0.4403229470249054, "perfect": 0.058011049723756904}, "rouge": {"rouge1": {"precision": 0.21079994013879805, "recall": 0.5309704790876308, "fscore": 0.2847323680812482}, "rouge2": {"precision": 0.11206570754887477, "recall": 0.26618658655979804, "fscore": 0.14873440544450633}, "rougeL": {"precision": 0.17624114336611502, "recall": 0.44614569152308986, "fscore": 0.23787236888912539}}, "bleurt": 0.44125290332331185, "gpt": 0.12016574585635359, "name": "LLaMA 2 70B", "authors": "Meta", "url": "https://ai.meta.com/research/publications/llama-2-open-foundation-and-fine-tuned-chat-models/", "citation": "Touvron et al., 2023", "type": "FOUNDATION", "context": 4096}, {"acc": {"acc": 0.4271172854502475, "perfect": 0.055248618784530384}, "rouge": {"rouge1": {"precision": 0.19504405031464528, "recall": 0.5205896670595586, "fscore": 0.2603643670617223}, "rouge2": {"precision": 0.09285001789519015, "recall": 0.23254410979936643, "fscore": 0.12283050286793348}, "rougeL": {"precision": 0.15867921904916787, "recall": 0.42898549246034995, "fscore": 0.21227960835014928}}, "bleurt": 0.4494648841801434, "gpt": 0.10220994475138122, "name": "Mistral-7B", "authors": "Mistral AI", "url": "https://mistral.ai/news/announcing-mistral-7b/", "citation": "Jiang et al., 2023", "type": "FOUNDATION", "context": 32000}, {"acc": {"acc": 0.4695900993561285, "perfect": 0.08149171270718232}, "rouge": {"rouge1": {"precision": 0.2402434133434171, "recall": 0.5465023664516744, "fscore": 0.3023042602650845}, "rouge2": {"precision": 0.1278099874524417, "recall": 0.26409680478109976, "fscore": 0.15751696515253602}, "rougeL": {"precision": 0.20205125579019406, "recall": 0.46086662623646035, "fscore": 0.2538329572357096}}, "bleurt": 0.46641780631565255, "gpt": 0.18646408839779005, "name": "Mixtral-8x7B", "authors": "Mistral AI", "url": "https://mistral.ai/news/mixtral-of-experts/", "citation": "Jiang et al., 2024", "type": "FOUNDATION", "context": 32000}, {"acc": {"acc": 0.34087118650894077, "perfect": 0.04143646408839779}, "rouge": {"rouge1": {"precision": 0.5180287739482223, "recall": 0.3878211545435264, "fscore": 0.41162891337334295}, "rouge2": {"precision": 0.25046659737457144, "recall": 0.19938401442157735, "fscore": 0.20843439451844803}, "rougeL": {"precision": 0.4368122438044132, "recall": 0.3228172228944878, "fscore": 0.34362967985991916}}, "bleurt": 0.42636404607383255, "gpt": 0.11049723756906077, "name": "Claude 2.1", "authors": "Anthropic", "url": "https://www.anthropic.com/news/claude-2-1", "citation": "Anthropic, 2023", "type": "FOUNDATION", "context": 200000}]
Loading

0 comments on commit ea00223

Please sign in to comment.