Skip to content

Commit 2d31922

Browse files
PrinsINTPrinsINT
committed
Added filters in entity view
1 parent 1a869b9 commit 2d31922

13 files changed

Lines changed: 255 additions & 86 deletions

File tree

‎client/package-lock.json‎

Lines changed: 55 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
{
22
"name": "galahad",
3-
"private": true,
43
"type": "module",
54
"scripts": {
65
"dev": "vite",
76
"build": "vite build",
87
"format": "biome format --write src/",
9-
"lint": "biome lint src/"
8+
"lint": "biome lint src/",
9+
"update": "npm-check-updates -u && npm install"
1010
},
1111
"dependencies": {
12-
"@primeuix/themes": "^1.1.1",
12+
"@primeuix/themes": "^1.1.2",
1313
"@vueuse/core": "^13.3.0",
1414
"@vueuse/router": "^13.3.0",
15-
"axios": "^1.9.0",
15+
"axios": "^1.10.0",
1616
"content-disposition": "^0.5.4",
1717
"pinia": "^3.0.3",
1818
"primevue": "^4.3.5",
@@ -25,15 +25,16 @@
2525
"@rollup/plugin-yaml": "^4.1.2",
2626
"@tsconfig/node24": "^24.0.1",
2727
"@types/content-disposition": "^0.5.9",
28-
"@types/node": "^24.0.0",
28+
"@types/node": "^24.0.3",
2929
"@vitejs/plugin-vue": "^5.2.4",
3030
"@vue/tsconfig": "^0.7.0",
31+
"npm-check-updates": "^18.0.1",
3132
"sass-embedded": "^1.89.2",
3233
"typescript": "~5.8.3",
3334
"unplugin-auto-import": "^19.3.0",
3435
"unplugin-vue-components": "^28.7.0",
3536
"vite": "^6.3.5",
3637
"vite-plugin-node-polyfills": "^0.23.0",
37-
"vite-plugin-vue-devtools": "^7.7.6"
38+
"vite-plugin-vue-devtools": "^7.7.7"
3839
}
3940
}

‎client/src/api/evaluation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const documentEntitiesPath = (
4949
): string => `/corpora/${corpus}/jobs/${job}/documents/${document}/entities`
5050
const jobEntitiesPath = (corpus: UUID, job: string): string =>
5151
`${evaluationPath(corpus, job)}/entities`
52-
const jobsEntitiesPath = (corpus: UUID): string =>
52+
export const jobsEntitiesPath = (corpus: UUID): string =>
5353
`/corpora/${corpus}/evaluation/entities`
5454
/**
5555
* Fetch term frequency distribution.

‎client/src/api/useAxios.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export function useAxios<T>(
1414
const errors = stores.useErrors()
1515
const data = ref<T | undefined>(initial)
1616
const loading = ref<boolean>(false)
17+
1718
watchEffect(() => {
1819
execute()
1920
})

‎client/src/components/GCard.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,8 @@ const expand = ref<boolean>()
4848
padding: 1rem;
4949
}
5050
51-
.view.g-card>.content,
52-
{
53-
flex: 1;
51+
.view.g-card>.content {
52+
flex: 1;
5453
}
5554
5655
.g-card {
@@ -89,7 +88,6 @@ flex: 1;
8988
align-items: safe center;
9089
gap: 1rem;
9190
max-width: 100%;
92-
overflow-x: auto;
9391
9492
&.article {
9593
max-width: 800px;

‎client/src/components/modals/GModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<slot></slot>
1111
</GCard>
1212
<form class="buttons" @submit.prevent>
13-
<GButton red @click="$emit('hide')">Close</GButton>
13+
<GButton red title="Close" @click="$emit('hide')">Close</GButton>
1414
<slot name="buttons"></slot>
1515
</form>
1616
</dialog>

‎client/src/components/tables/DocumentEntitiesTable.vue‎

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
<template>
2-
<GTable :items :columns sortColumn="count">
2+
<GTable :items="filteredItems" :columns sortColumn="count">
33
<template #title>Entities</template>
44
<template #help>
55
Here you can view all the entities in the selected document.
66
</template>
7+
<template #header>
8+
<form class="filter" @submit.prevent>
9+
<fieldset>
10+
<label for="entities-select">Entities</label>
11+
<MultiSelect id="entities-select" v-model="selectedEntities" :options="entityOptions"
12+
placeholder="Select entities" :maxSelectedLabels="3" />
13+
</fieldset>
14+
<fieldset>
15+
<label for="jobs-select">Jobs</label>
16+
<MultiSelect id="jobs-select" v-model="selectedJobs" :options="jobOptions" placeholder="Select jobs"
17+
:maxSelectedLabels="3" />
18+
</fieldset>
19+
</form>
20+
</template>
721
<template #table-empty>
8-
No entities found in this document.
22+
No entities found.
923
</template>
1024
</GTable>
1125
</template>
@@ -14,12 +28,22 @@
1428
<script setup lang="ts">
1529
import type { Entity } from "@/types/evaluation/entities"
1630
import type { Column } from "@/types/ui/table"
31+
import MultiSelect from "primevue/multiselect"
1732
18-
const { entities, filter } = defineProps<{
33+
const { entities } = defineProps<{
1934
entities: Entity[]
2035
filter?: string
2136
}>()
2237
38+
const jobOptions = computed<string[]>(() => Array.from(new Set(items.value.map(entity => entity.job))))
39+
const entityOptions = computed<string[]>(() => Array.from(new Set(items.value.map(entity => entity.label))))
40+
const selectedEntities = ref<string[]>([])
41+
const selectedJobs = ref<string[]>([])
42+
43+
const filteredItems = computed(() => {
44+
return items.value.filter(filter)
45+
})
46+
2347
const items = computed(() =>
2448
// entities is in the form: { job1: Entity[], job2: Entity[], ... }
2549
// We are going to expand it to a flat array of entities, with an extra property 'job'
@@ -33,4 +57,27 @@ const columns = ref<Column[]>([
3357
{ key: "count", sortOn: i => i.count },
3458
{ key: "job", sortOn: i => i.job }
3559
])
60+
61+
function filter(entity: Entity): boolean {
62+
if (selectedEntities.value.length === 0 && selectedJobs.value.length === 0) return true
63+
// only one active
64+
if (selectedEntities.value.length === 0) return selectedJobs.value.includes(entity.job)
65+
if (selectedJobs.value.length === 0) return selectedEntities.value.includes(entity.label)
66+
67+
return selectedEntities.value.includes(entity.label) && selectedJobs.value.includes(entity.job)
68+
}
3669
</script>
70+
71+
<style scoped lang="scss">
72+
.filter {
73+
display: flex;
74+
flex-wrap: wrap;
75+
gap: 1rem;
76+
77+
fieldset {
78+
display: flex;
79+
flex-direction: column;
80+
align-items: center;
81+
}
82+
}
83+
</style>

‎client/src/components/tables/GTable.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -144,12 +144,12 @@ watch(
144144
function compareAny(a: unknown, b: unknown): number {
145145
// // null and undefined are always smaller
146146
// if (nu(a) && nu(b)) return 0
147-
// if (nu(a)) return -1
148-
// if (nu(b)) return 1
147+
if (nu(a)) return -1
148+
if (nu(b)) return 1
149149
150150
// // Infinity is always bigger
151-
// if (a === Number.POSITIVE_INFINITY) return 1
152-
// if (b === Number.POSITIVE_INFINITY) return -1
151+
if (a === Number.POSITIVE_INFINITY) return 1
152+
if (b === Number.POSITIVE_INFINITY) return -1
153153
154154
if (typeof a === "number" && typeof b === "number") {
155155
return a - b
@@ -192,6 +192,10 @@ function sortBy(key: string, desc: boolean): void {
192192
<style scoped lang="scss">
193193
table {
194194
border-collapse: collapse;
195+
// scroll on overflow requires display: block
196+
display: block;
197+
width: 100%;
198+
overflow-x: auto;
195199
196200
&.loading {
197201
filter: blur(5px);

‎client/src/components/tables/GTablePaginator.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<i class="fa fa-arrow-right"></i>
1919
</GButton>
2020

21-
<GButton plain :disabled="page == numPages" @click="page = numPages">
21+
<GButton plain :disabled="page == numPages" title="Last" @click="page = numPages">
2222
{{ numPages }}
2323
</GButton>
2424
</form>

0 commit comments

Comments
 (0)
⚡