Skip to content

Commit

Permalink
chore: format
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhudotexe
zhudotexe committed Feb 20, 2024
1 parent c3ffa3f commit e7825b2
Show file tree
Hide file tree
Showing 11 changed files with 768 additions and 152 deletions.
13 changes: 9 additions & 4 deletions leaderboard/src/FilterIcon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import { defineProps, ref } from 'vue'
// setup
const props = defineProps<{
options: FilterOption<number>[];
selected: number[];
options: FilterOption<number>[]
selected: number[]
}>()
const emit = defineEmits<{
(e: 'selectionChanged', selectedOptions: number[]): void;
(e: 'selectionChanged', selectedOptions: number[]): void
}>()
const vClickOutside = clickOutside.directive
Expand Down Expand Up @@ -37,7 +37,12 @@ function onClickOutside() {
</script>

<template>
<div class="dropdown" :class="{'is-active': isExpanded}" @click="onClick" v-click-outside="onClickOutside">
<div
class="dropdown"
:class="{ 'is-active': isExpanded }"
@click="onClick"
v-click-outside="onClickOutside"
>
<div class="dropdown-trigger">
<!-- dropdown controller = filter button -->
<span class="icon m-0 is-clickable" aria-haspopup="true" aria-controls="dropdown-menu">
Expand Down
8 changes: 4 additions & 4 deletions leaderboard/src/SortIcon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { SortOrder } from '@/sorters'
// setup
const props = defineProps<{
index: number | null;
direction: SortOrder;
disallowSortDesc?: boolean;
index: number | null
direction: SortOrder
disallowSortDesc?: boolean
}>()
const emit = defineEmits<{
(e: 'directionChanged', direction: SortOrder): void;
(e: 'directionChanged', direction: SortOrder): void
}>()
// methods
Expand Down
172 changes: 88 additions & 84 deletions leaderboard/src/Table.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
<script setup lang="ts">
import FilterIcon from '@/FilterIcon.vue'
import {filters} from '@/filters'
import {defaultSorter, 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 type {Datum} from "@/scores";
import { computed, onMounted, reactive } from 'vue'
import type { Datum } from '@/scores'
// setup
const props = defineProps<{
data: Datum[];
}>();
data: Datum[]
}>()
// state
const pagination = reactive({
Expand Down Expand Up @@ -48,8 +46,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 Down Expand Up @@ -168,9 +166,7 @@ onMounted(() => {

<template>
<!-- # info -->
<p>
look, this is the loeaderboard waow
</p>
<p>look, this is the loeaderboard waow</p>
<!-- /# info -->

<!-- filter info -->
Expand All @@ -191,135 +187,143 @@ onMounted(() => {
<div class="table-container mt-4">
<table class="table is-striped is-fullwidth is-hoverable">
<thead>
<tr>
<th>
<tr>
<th>
<span class="icon-text">
<span>Model</span>
<FilterIcon
class="ml-1"
:options="filters.modelType.options"
:selected="getSelectedFilterOptions('modelType')"
@selectionChanged="onFilterSelectionChange('modelType', $event)"
class="ml-1"
:options="filters.modelType.options"
:selected="getSelectedFilterOptions('modelType')"
@selectionChanged="onFilterSelectionChange('modelType', $event)"
/>
</span>
</th>
<th>
</th>
<th>
<span class="icon-text">
<span>Context Size</span>
<SortIcon
class="ml-1"
:index="getSortIndex('context')"
:direction="getSortDirection('context')"
@directionChanged="onSortDirectionChange('context', $event)"
class="ml-1"
:index="getSortIndex('context')"
:direction="getSortDirection('context')"
@directionChanged="onSortDirectionChange('context', $event)"
/>
</span>
</th>
<th>
</th>
<th>
<span class="icon-text">
<span>Loose</span>
<SortIcon
class="ml-1"
:index="getSortIndex('loose')"
:direction="getSortDirection('loose')"
@directionChanged="onSortDirectionChange('loose', $event)"
class="ml-1"
:index="getSortIndex('loose')"
:direction="getSortDirection('loose')"
@directionChanged="onSortDirectionChange('loose', $event)"
/>
</span>
</th>
<th>
</th>
<th>
<span class="icon-text">
<span>Strict</span>
<SortIcon
class="ml-1"
:index="getSortIndex('strict')"
:direction="getSortDirection('strict')"
@directionChanged="onSortDirectionChange('strict', $event)"
class="ml-1"
:index="getSortIndex('strict')"
:direction="getSortDirection('strict')"
@directionChanged="onSortDirectionChange('strict', $event)"
/>
</span>
</th>
<th>
</th>
<th>
<span class="icon-text">
<span>ROUGE-1</span>
<SortIcon
class="ml-1"
:index="getSortIndex('rouge1')"
:direction="getSortDirection('rouge1')"
@directionChanged="onSortDirectionChange('rouge1', $event)"
class="ml-1"
:index="getSortIndex('rouge1')"
:direction="getSortDirection('rouge1')"
@directionChanged="onSortDirectionChange('rouge1', $event)"
/>
</span>
</th>
<th>
</th>
<th>
<span class="icon-text">
<span>ROUGE-2</span>
<SortIcon
class="ml-1"
:index="getSortIndex('rouge2')"
:direction="getSortDirection('rouge2')"
@directionChanged="onSortDirectionChange('rouge2', $event)"
class="ml-1"
:index="getSortIndex('rouge2')"
:direction="getSortDirection('rouge2')"
@directionChanged="onSortDirectionChange('rouge2', $event)"
/>
</span>
</th>
<th>
</th>
<th>
<span class="icon-text">
<span>ROUGE-L</span>
<SortIcon
class="ml-1"
:index="getSortIndex('rougeL')"
:direction="getSortDirection('rougeL')"
@directionChanged="onSortDirectionChange('rougeL', $event)"
class="ml-1"
:index="getSortIndex('rougeL')"
:direction="getSortDirection('rougeL')"
@directionChanged="onSortDirectionChange('rougeL', $event)"
/>
</span>
</th>
<th>
</th>
<th>
<span class="icon-text">
<span>BLEURT</span>
<SortIcon
class="ml-1"
:index="getSortIndex('bleurt')"
:direction="getSortDirection('bleurt')"
@directionChanged="onSortDirectionChange('bleurt', $event)"
class="ml-1"
:index="getSortIndex('bleurt')"
:direction="getSortDirection('bleurt')"
@directionChanged="onSortDirectionChange('bleurt', $event)"
/>
</span>
</th>
<th>
</th>
<th>
<span class="icon-text">
<span>GPT Judge</span>
<SortIcon
class="ml-1"
:index="getSortIndex('gptscore')"
:direction="getSortDirection('gptscore')"
@directionChanged="onSortDirectionChange('gptscore', $event)"
class="ml-1"
:index="getSortIndex('gptscore')"
:direction="getSortDirection('gptscore')"
@directionChanged="onSortDirectionChange('gptscore', $event)"
/>
</span>
</th>
</tr>
</th>
</tr>
</thead>

<tbody>
<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>
<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>

<div class="level" v-if="numPages > 1">
<p class="level-item">
<button class="button mr-2" v-if="pagination.currentPage > 0" @click="pagination.currentPage--">
<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++">
<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
Loading

0 comments on commit e7825b2

Please sign in to comment.