Skip to content

Commit a80da65

Browse files
PrinsINTPrinsINT
committed
client: new taggers view
1 parent 6f056ef commit a80da65

5 files changed

Lines changed: 119 additions & 60 deletions

File tree

‎client/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ export {}
99
declare module 'vue' {
1010
export interface GlobalComponents {
1111
AnnotateTab: typeof import('./src/components/AnnotateTab.vue')['default']
12+
AnnotationItemsViewer: typeof import('./src/components/modals/metadata/AnnotationItemsViewer.vue')['default']
1213
AnnotationSelect: typeof import('./src/components/input/AnnotationSelect.vue')['default']
1314
AppBanner: typeof import('./src/components/AppBanner.vue')['default']
15+
AttributionsViewer: typeof import('./src/components/modals/metadata/AttributionsViewer.vue')['default']
1416
BenchmarkSetsHelp: typeof import('./src/components/help/BenchmarkSetsHelp.vue')['default']
1517
ComparisonModal: typeof import('./src/components/modals/ComparisonModal.vue')['default']
1618
CorpusForm: typeof import('./src/components/modals/corpus/CorpusForm.vue')['default']

‎client/src/components/modals/metadata/AnnotationItemsViewer.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div>
3+
<span>
4+
{{ items.map((a) => a.annotation).join(", ") }}
5+
</span>
6+
<InspectButton @click="showModal = true" />
7+
<GModal v-if="showModal" @hide="showModal = false">
8+
<template #title><slot name="title"></slot></template>
9+
<ul>
10+
<li v-for="item in items" :key="item.annotation">
11+
{{ item.annotation }}
12+
<dl>
13+
<template v-for="principle in item.principles" :key="principle.name">
14+
<dt>
15+
<b>{{ principle.name }}:</b>
16+
</dt>
17+
<dd>
18+
<ExternalLink :href="principle.href">
19+
{{ principle.details ?? principle.href }}
20+
</ExternalLink>
21+
</dd>
22+
</template>
23+
</dl>
24+
</li>
25+
</ul>
26+
</GModal>
27+
</div>
28+
</template>
29+
30+
<script setup lang="ts">
31+
import type { AnnotationItem } from "@/types/taggers"
32+
33+
const { items } = defineProps<{ items: AnnotationItem[] }>()
34+
const showModal = ref<boolean>()
35+
</script>
36+
37+
<style scoped lang="scss">
38+
div {
39+
display: flex;
40+
gap: 0.5rem;
41+
align-items: center;
42+
justify-content: end;
43+
ul {
44+
padding: 0 1rem;
45+
li {
46+
padding: 0.25rem 0;
47+
dl {
48+
padding: 0 1rem;
49+
}
50+
}
51+
}
52+
}
53+
</style>

‎client/src/components/modals/metadata/AttributionsViewer.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<InspectButton @click="showModal = true" />
3+
<GModal v-if="showModal" @hide="showModal = false">
4+
<template #title><slot name="title"></slot></template>
5+
<ul>
6+
<li v-for="item in items" :key="item.name">
7+
<dl>
8+
<dt>
9+
<b>{{ item.name }}:</b>
10+
</dt>
11+
<dd>
12+
<ExternalLink :href="item.href">
13+
{{ item.details ?? item.href }}
14+
</ExternalLink>
15+
</dd>
16+
</dl>
17+
</li>
18+
<!-- always add version last -->
19+
<li>
20+
<dl>
21+
<dt>
22+
<b>Version:</b>
23+
</dt>
24+
<dd>
25+
{{ version }}
26+
</dd>
27+
</dl>
28+
</li>
29+
</ul>
30+
</GModal>
31+
</template>
32+
33+
<script setup lang="ts">
34+
import type { LinkItem } from "@/types/taggers"
35+
36+
const { items, version } = defineProps<{ items: LinkItem[]; version: string }>()
37+
const showModal = ref<boolean>()
38+
</script>
39+
40+
<style scoped lang="scss">
41+
ul {
42+
padding: 0 1rem;
43+
li {
44+
padding: 0.25rem 0;
45+
}
46+
}
47+
</style>

‎client/src/views/annotate/subviews/JobsView.vue‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,6 @@
1212
<GInput id="tagger-name" type="text" v-model="taggerFilter" placeholder="Tagger name"></GInput>
1313
</fieldset>
1414

15-
<fieldset>
16-
<label for="tagset-select">Select tagset</label>
17-
<MultiSelect
18-
id="tagset-select"
19-
v-model="tagsetFilter"
20-
:options="tagsets"
21-
placeholder="Tagset"
22-
/>
23-
</fieldset>
24-
2515
<fieldset>
2616
<label for="annotation-select">Select annotation</label>
2717
<MultiSelect
@@ -58,6 +48,13 @@
5848
<template v-slot:cell-actions="d: TableData<Job>">
5949
<GButton plain @click="jobId = d.item.tagger.id">View &amp; Tag</GButton>
6050
</template>
51+
52+
<!-- annotations cell -->
53+
<template #cell-annotations="d: TableData<Job>">
54+
<AnnotationItemsViewer :items="d.item.tagger.annotations">
55+
<template #title>Annotations and principles of {{ d.item.tagger.id }}</template>
56+
</AnnotationItemsViewer>
57+
</template>
6158
</GTable>
6259

6360
<!-- job modal -->
@@ -71,6 +68,7 @@ import type { Job, Progress } from "@/types/jobs"
7168
import type { Column, TableData } from "@/types/ui/table"
7269
import { formatDate } from "@/ts/utils"
7370
import MultiSelect from "primevue/multiselect"
71+
import AnnotationItemsViewer from "@/components/modals/metadata/AnnotationItemsViewer.vue"
7472
7573
// #stores
7674
const { canWrite } = storeToRefs(stores.useUser())
@@ -89,8 +87,9 @@ const annotationFilter = ref<string[]>([])
8987
9088
// #computed
9189
// select options
92-
const tagsets = computed<string[]>(() => [...new Set(taggerJobs.value.flatMap((j: Job) => j.tagger.tagset))])
93-
const annotations = computed<string[]>(() => [...new Set(taggerJobs.value.flatMap((j: Job) => j.tagger.annotations))])
90+
const annotations = computed<string[]>(() => [
91+
...new Set(taggerJobs.value.flatMap((j: Job) => j.tagger.annotations.flatMap((a) => a.annotation))),
92+
])
9493
// table data
9594
const items = computed(() =>
9695
taggerJobs.value
@@ -107,18 +106,13 @@ const items = computed(() =>
107106
)
108107
const columns = computed<Column<Job>[]>((): Column<Job>[] => [
109108
{ key: "id", label: "tagger", sortOn: (j: Job): string => j.tagger.id, align: "left" },
110-
{ key: "tagset", sortOn: (j: Job): string => j.tagger.tagset, format: (j: Job): string => j.tagger.tagset },
111109
{ key: "language", sortOn: (j: Job): string => j.tagger.language, format: (j: Job): string => j.tagger.language },
112110
{
113111
key: "period",
114-
sortOn: (j: Job): string => `${j.tagger.eraFrom} ${j.tagger.eraTo}`,
115-
format: (j: Job): string => `${j.tagger.eraFrom} – ${j.tagger.eraTo}`,
116-
},
117-
{
118-
key: "annotations",
119-
format: (j: Job): string => j.tagger.annotations.join(", "),
120-
sortOn: (j: Job): string => j.tagger.annotations.join(),
112+
sortOn: (j: Job): string => `${j.tagger.period.from} ${j.tagger.period.to}`,
113+
format: (j: Job): string => `${j.tagger.period.from} – ${j.tagger.period.to}`,
121114
},
115+
{ key: "annotations", sortOn: (j: Job): string => j.tagger.annotations.map((a) => a.annotation).join() },
122116
{
123117
key: "summary",
124118
label: "tokens",

‎client/src/views/overview/subviews/TaggersView.vue‎

Lines changed: 3 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</p>
1111
</template>
1212

13-
<GTable :loading :columns :items sortColumn="id">
13+
<GTable :loading :columns :items sortColumn="period">
1414
<template #table-empty>
1515
No taggers appeared? That is not right! Please contact the INT at
1616
<MailAddress />.
@@ -21,43 +21,16 @@
2121
</template>
2222

2323
<template #cell-annotations="d: TableData<Tagger>">
24-
{{ d.item.annotations.map((a) => a.annotation).join(", ") }}
2524
<AnnotationItemsViewer :items="d.item.annotations">
2625
<template #title>Annotations and principles of {{ d.item.id }}</template>
2726
</AnnotationItemsViewer>
2827
</template>
2928

3029
<template #cell-attributions="d: TableData<Tagger>">
3130
{{ Object.keys(d.item.attributions).length }} attributions
32-
<InspectButton @click="showAttributions = true" />
33-
<GModal v-if="showAttributions" @hide="showAttributions = false">
31+
<AttributionsViewer :items="d.item.attributions" :version="d.item.version">
3432
<template #title>Attributions of {{ d.item.id }}</template>
35-
<ul>
36-
<li v-for="attribution in d.item.attributions" :key="attribution.name">
37-
<dl>
38-
<dt>
39-
<b>{{ attribution.name }}:</b>
40-
</dt>
41-
<dd>
42-
<ExternalLink :href="attribution.href">
43-
{{ attribution.details ?? attribution.href }}
44-
</ExternalLink>
45-
</dd>
46-
</dl>
47-
</li>
48-
<!-- always add version last -->
49-
<li>
50-
<dl>
51-
<dt>
52-
<b>Version:</b>
53-
</dt>
54-
<dd>
55-
{{ d.item.version }}
56-
</dd>
57-
</dl>
58-
</li>
59-
</ul>
60-
</GModal>
33+
</AttributionsViewer>
6134
</template>
6235
</GTable>
6336
</GCard>
@@ -70,9 +43,6 @@ import type { Column, TableData } from "@/types/ui/table"
7043
7144
const { taggers: items, loading } = storeToRefs(stores.useTaggers())
7245
73-
const showAnnotations = ref<boolean>()
74-
const showAttributions = ref<boolean>()
75-
7646
const columns: Column<Tagger>[] = [
7747
{ key: "id", label: "name" },
7848
{ key: "description" },
@@ -97,11 +67,4 @@ function markActive(id: string): string {
9767
:deep(tr):has(> td > span.active) {
9868
background-color: var(--int-theme-lighter);
9969
}
100-
101-
ul {
102-
padding: 0 1rem;
103-
.annotation-principles {
104-
padding: 0 1rem;
105-
}
106-
}
10770
</style>

0 commit comments

Comments
 (0)
⚡