Skip to content

Commit 40333f6

Browse files
PrinsINTPrinsINT
committed
More client
1 parent e764c9d commit 40333f6

68 files changed

Lines changed: 558 additions & 984 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎client/src/api/evaluation.ts‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,19 @@ type DocumentEntitiesResponse = AxiosResponse<DocumentEntities>
2424
type JobEntitiesResponse = AxiosResponse<JobEntities>
2525
type JobsEntitiesResponse = AxiosResponse<JobsEntities>
2626

27-
const evaluationPath = (corpus: UUID, hypothesis: string): string =>
28-
`/corpora/${corpus}/jobs/${hypothesis}/evaluation`
29-
const confusionPath = (corpus: UUID, hypothesis: string): string =>
30-
`${evaluationPath(corpus, hypothesis)}/confusion`
31-
const confusionSamplesPath = (corpus: UUID, hypo: string): string =>
32-
`${confusionPath(corpus, hypo)}/download`
33-
const distributionPath = (corpus: UUID, hypothesis: string): string =>
34-
`${evaluationPath(corpus, hypothesis)}/distribution`
35-
const metricsPath = (corpus: UUID, hypothesis: string): string =>
36-
`${evaluationPath(corpus, hypothesis)}/metrics`
37-
const metricsSamplesPath = (corpus: UUID, hypo: string): string =>
38-
`${metricsPath(corpus, hypo)}/download`
39-
const downloadPath = (corpus: UUID, hypothesis: string): string =>
40-
`${evaluationPath(corpus, hypothesis)}/download`
27+
const evaluationPath = (corpus: UUID): string => `/corpora/${corpus}/evaluation`
28+
export const confusionPath = (corpus: UUID): string =>
29+
`${evaluationPath(corpus)}/confusion`
30+
const confusionSamplesPath = (corpus: UUID): string =>
31+
`${confusionPath(corpus)}/download`
32+
export const distributionPath = (corpus: UUID): string =>
33+
`${evaluationPath(corpus)}/distribution`
34+
const metricsPath = (corpus: UUID): string =>
35+
`${evaluationPath(corpus)}/metrics`
36+
const metricsSamplesPath = (corpus: UUID): string =>
37+
`${metricsPath(corpus)}/download`
38+
const downloadPath = (corpus: UUID): string =>
39+
`${evaluationPath(corpus)}/download`
4140
const documentLayerComparisonPath = (
4241
corpus: UUID,
4342
job: string,
@@ -61,7 +60,7 @@ export function getDistribution(
6160
corpus: UUID,
6261
hypothesis: string
6362
): Promise<DistributionResponse> {
64-
return axios.get(distributionPath(corpus, hypothesis))
63+
return axios.get(distributionPath(corpus), { params: { hypothesis } })
6564
}
6665

6766
/**

‎client/src/api/useAxios.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function useAxios<T>(
2424

2525
loading.value = true
2626
axios
27-
.get(url, toValue(params))
27+
.get(url, { params: toValue(params) })
2828
.then(res => {
2929
data.value = res.data
3030
})

‎client/src/components/AnnotateTab.vue‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,7 @@
99
<GCard v-else-if="!corporaStore.activeCorpus && !hideCorpusError" title="No corpus selected">
1010
<GInfo error>
1111
<p>No corpus has been selected.</p>
12-
<GNav :route="{ path: '/annotate/corpora' }">Select a corpus</GNav>
13-
</GInfo>
14-
</GCard>
15-
<!-- No write permissions on selected corpus -->
16-
<GCard v-else-if="!userStore.canWrite && !hidePermissionsError" title="Insufficient permissions">
17-
<GInfo error>
18-
<p>You have insufficient permissions to perform this action.</p>
19-
<GNav :route="{ path: '/annotate/corpora' }">Select a different corpus</GNav>
12+
<router-link to="/annotate/corpora">Select a corpus</router-link>
2013
</GInfo>
2114
</GCard>
2215
<!-- Loading documents -->
@@ -27,7 +20,7 @@
2720
<GCard v-else-if="!corporaStore.hasDocs && !hideDocsError" title="Empty corpus">
2821
<GInfo error>
2922
<p>This corpus has no documents.</p>
30-
<GNav :route="{ path: '/annotate/documents' }">Upload documents to this corpus</GNav>
23+
<router-link to="/annotate/documents">Upload documents to this corpus</router-link>
3124
</GInfo>
3225
</GCard>
3326
<!-- Loading jobs -->
@@ -40,11 +33,11 @@
4033
<p>None of the documents have annotations. Either:</p>
4134
<ul>
4235
<li>
43-
<GNav :route="{ path: '/annotate/documents' }">Upload documents</GNav> to this corpus that
36+
<router-link to="/annotate/documents">Upload documents</router-link> to this corpus that
4437
contain source annotations
4538
</li>
4639
<li>
47-
<GNav :route="{ path: '/annotate/jobs' }">Start a tagger job</GNav> to create annotations
40+
<router-link to="/annotate/jobs">Start a tagger job</router-link> to create annotations
4841
</li>
4942
<li>Or wait for an existing job to finish</li>
5043
</ul>
@@ -64,33 +57,16 @@
6457
</template>
6558

6659
<script setup lang="ts">
67-
// Libraries & stores
6860
import stores from "@/stores"
6961
70-
// Stores
7162
const corporaStore = stores.useCorpora()
7263
const documentsStore = stores.useDocuments()
7364
const jobsStore = stores.useJobs()
7465
const jobSelectionStore = stores.useJobSelection()
75-
const userStore = stores.useUser()
7666
77-
// Props
78-
const props = defineProps({
79-
hideDocsError: {
80-
type: Boolean,
81-
default: false
82-
},
83-
hideCorpusError: {
84-
type: Boolean,
85-
default: false
86-
},
87-
hideAnnotationsError: {
88-
type: Boolean,
89-
default: false
90-
},
91-
hidePermissionsError: {
92-
type: Boolean,
93-
default: true
94-
}
95-
})
67+
const { hideDocsError, hideCorpusError, hideAnnotationsError } = defineProps<{
68+
hideDocsError?: boolean
69+
hideCorpusError?: boolean
70+
hideAnnotationsError?: boolean
71+
}>()
9672
</script>

‎client/src/components/AppBanner.vue‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
<template>
22
<hgroup class="banner" role="banner">
33
<div class="logo">
4-
<GNav :route="{ path: '/' }">
4+
<router-link to="/">
55
<img class="painting" src="@/assets/galahad-graal-klein.png" />
6-
</GNav>
6+
</router-link>
77
</div>
88

99
<div class="title">
1010
<a href="https://ivdnt.org/" target="_blank" tabindex="-1" rel="noopener noreferrer">
1111
/ instituut voor de Nederlandse&nbsp;taal&nbsp;/
1212
</a>
13-
<GNav :route="{ path: '/' }">galahad</GNav>
13+
<router-link to="/">galahad</router-link>
1414
</div>
1515

1616
<nav class="nav">
17-
<!-- If we ever decide to make these links open in the same tab, this is how:
18-
<GNav :route="{ path: '/help' }">Help</GNav>
19-
-->
2017
<a href="/galahad/help" target="_blank">help</a>
2118
<a href="/galahad/application" target="_blank">about</a>
2219
<a href="/galahad/contribute" target="_blank">contribute</a>

‎client/src/components/GTabs.vue‎

Lines changed: 13 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,23 @@
22
<section class="tabs">
33

44
<header class="header">
5+
56
<template v-if="$slots.banner">
67
<slot name="banner"></slot>
78
</template>
9+
810
<nav class="nav">
9-
<template v-for="tab in tabs" :key="tab.id">
10-
<a v-if="!tab.disabled && !tab.stub" :href="urlForTab(tab.id)"
11-
:class="'textcolor ' + navLinkClass(tab.id)" @click.prevent="navigateTo(tab.id)">
12-
<slot :name="`${tab.id}-title`" :isActive="currentTab == tab.id">{{ tab.title || tab.id }}
13-
</slot>
14-
</a>
15-
<span :class="`nav-link ${tab.disabled ? 'disabled' : ''}`" v-else>
16-
<slot :name="`${tab.id}-title`">{{ tab.title || tab.id }}</slot>
17-
</span>
18-
</template>
11+
<slot v-for="tab in tabs" :key="tab.id" :name="`${tab.id}-title`">
12+
<a v-if="tab.disabled" class="nav-link disabled">{{ tab.title || tab.id }}</a>
13+
<router-link v-else class="nav-link" :to="{ path: `${basePath}/${tab.id}`, query: route.query }">
14+
{{ tab.title || tab.id }}
15+
</router-link>
16+
</slot>
1917
</nav>
18+
2019
</header>
2120

22-
<RouterView class="view" @navigate="router.push" />
21+
<RouterView class="view" />
2322
</section>
2423
</template>
2524

@@ -36,67 +35,7 @@ const { basePath, tabs } = defineProps<{
3635
tabs: Tab[]
3736
}>()
3837
39-
const currentTab = ref<string>()
4038
const route = useRoute()
41-
const router = useRouter()
42-
43-
onMounted(() => {
44-
if (route.path.split("/").length > basePath.split("/").length) {
45-
// respect the url
46-
induceCurrentTab()
47-
return
48-
}
49-
const state = localStorage.getItem(`galahad:${basePath}`)
50-
if (state !== null && state !== undefined) {
51-
// load state from local storage
52-
navigateTo(state, true)
53-
} else {
54-
// default
55-
navigateTo(tabs[0].id, true)
56-
}
57-
})
58-
59-
watch(
60-
() => route,
61-
() => {
62-
induceCurrentTab()
63-
}
64-
)
65-
66-
// --- methods ---
67-
function induceCurrentTab() {
68-
const last = route.path.split("/").pop() as string
69-
setCurrentTab(last)
70-
}
71-
function navigateTo(tabId: string, replace = false) {
72-
const path = `${basePath}/${tabId}`
73-
if (!route.path.startsWith(path)) {
74-
if (replace) {
75-
router.replace({ path: path, query: route.query })
76-
} else {
77-
router.push({ path: path, query: route.query })
78-
}
79-
}
80-
setCurrentTab(tabId)
81-
}
82-
function navLinkClass(tabId: string) {
83-
return `nav-link${currentTab.value === tabId ? " active" : ""}`
84-
}
85-
function setCurrentTab(tabId: string) {
86-
// Since the route is not reactive, we have to update the value like this
87-
currentTab.value = tabId
88-
if (tabId !== null && tabId !== undefined)
89-
localStorage.setItem(`galahad:${basePath}`, tabId)
90-
}
91-
function urlForTab(tabId: string) {
92-
const qs = Object.entries(route.query)
93-
.map(
94-
([k, v]) =>
95-
`${k}=${encodeURIComponent(typeof v === "object" ? JSON.stringify(v) : v)}`
96-
)
97-
.join("&")
98-
return `/galahad${basePath}/${tabId}?${qs}`
99-
}
10039
</script>
10140

10241
<style scoped lang="scss">
@@ -124,7 +63,7 @@ function urlForTab(tabId: string) {
12463
color: black;
12564
user-select: none;
12665
127-
&:hover:not(.disabled):not(.active) {
66+
&:hover:not(.disabled):not(.router-link-active) {
12867
cursor: pointer;
12968
background-color: var(--int-theme-hover);
13069
}
@@ -137,11 +76,11 @@ function urlForTab(tabId: string) {
13776
cursor: not-allowed;
13877
}
13978
140-
&.active {
79+
&.router-link-active {
14180
background-color: var(--int-theme-outline);
14281
}
14382
144-
&:active:not(.disabled):not(.active) {
83+
&:active:not(.disabled):not(.router-link-active) {
14584
background-color: var(--int-theme-active);
14685
}
14786
}

‎client/src/components/help/JobsHelp.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<p>
44
You can use some or all of the available taggers to tag your documents. Each tagger will create a linguistic
55
annotation layer. Use the filters to find a tagger that works well for you or take a look at the
6-
<GNav :route="{ path: '/overview/benchmarks' }">benchmark results</GNav>.
6+
<router-link to="/overview/benchmarks">benchmark results</router-link>.
77
</p>
88
<p>
99
To start a tagging job, select one of the taggers and click on

‎client/src/components/input/JobSelect.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
<GInfo v-if="untaggedDocsExist">
77
<p>
88
Not all documents have been tagged yet. It is still possible to select this layer, but it will be
9-
incomplete. Alternatively, <GNav :route="{ path: '/annotate/jobs' }">start a new tagger job</GNav> or wait
9+
incomplete. Alternatively, <router-link to="/annotate/jobs">start a new tagger job</router-link> or wait
1010
for the current job to finish.
1111
</p>
1212
</GInfo>
1313
<GInfo v-if="sourceLayerHasMissingAnnotations">
1414
<p>
1515
Some documents in this corpus have no source annotations. It is still possible to select this layer, but it
16-
will be incomplete. Alternatively, <GNav :route="{ path: '/annotate/documents' }">go to documents</GNav> and
16+
will be incomplete. Alternatively, <router-link to="/annotate/documents">go to documents</router-link> and
1717
add or remove documents.
1818
</p>
1919
</GInfo>
@@ -37,14 +37,14 @@ const label = computed<string>(
3737
const selectedJob = computed<string>({
3838
get(): string {
3939
return isReference
40-
? jobSelectionStore.referenceJobId
41-
: jobSelectionStore.hypothesisJobId
40+
? jobSelectionStore.referenceId
41+
: jobSelectionStore.hypothesisId
4242
},
4343
set(newValue: string): void {
4444
if (isReference) {
45-
jobSelectionStore.referenceJobId = newValue
45+
jobSelectionStore.referenceId = newValue
4646
} else {
47-
jobSelectionStore.hypothesisJobId = newValue
47+
jobSelectionStore.hypothesisId = newValue
4848
}
4949
}
5050
})

‎client/src/components/links/ExternalLink.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</template>
66

77
<script setup lang="ts">
8-
defineProps<{
8+
const { href } = defineProps<{
99
href: string
1010
}>()
1111
</script>

‎client/src/components/links/GNav.vue‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,7 @@
1515
</GCheckBox>
1616
</form>
1717

18-
<GTable :columns="filteredColumns" :items headless>
19-
<template #head="data">{{ data.field.label || data.field.key }}</template>
20-
<template #cell="data">{{ data.value }}</template>
21-
</GTable>
18+
<GTable :columns="filteredColumns" :items />
2219
<!--Download-->
2320
<p>Download all samples for this category.</p>
2421
<DownloadButton wide :loading="downloading" @click="$emit('download')" />
@@ -40,7 +37,6 @@ const corporaStore = stores.useCorpora()
4037
4138
// Props
4239
const props = defineProps({
43-
show: { type: Boolean },
4440
samples: { type: Object },
4541
referenceJob: { type: String },
4642
hypothesisJob: { type: String },

0 commit comments

Comments
 (0)
⚡