Skip to content

Commit

Permalink
merge: dev to main
Browse files Browse the repository at this point in the history
  • Loading branch information
arildm committed Dec 3, 2024
2 parents 9da60af + b3e380c commit 474fa97
Show file tree
Hide file tree
Showing 43 changed files with 405 additions and 181 deletions.
15 changes: 14 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,18 @@ As this project is a user-facing application, the places in the semantic version

## [Unreleased]

## [1.7.1] (2024-12-03)

### Added

- Add geotagging to the NER option [#174](https://github.com/spraakbanken/mink-frontend/issues/174)
- Editable config file in browser [#178](https://github.com/spraakbanken/mink-frontend/issues/178)

### Fixed

- Accessibility improvements (contrast, alt attributes, keyboard navigation, etc)
- Use corpus name in breadcrumbs

## [1.7.0] (2024-09-30)

### Added
Expand Down Expand Up @@ -238,7 +250,8 @@ The frontend is now open to the general public! This version allows users to:

Code changes up until this point are not documented other than in the git commit log.

[unreleased]: https://github.com/spraakbanken/mink-frontend/compare/v1.7.0...HEAD
[unreleased]: https://github.com/spraakbanken/mink-frontend/compare/v1.7.1...HEAD
[1.7.1]: https://github.com/spraakbanken/mink-frontend/compare/v1.7.0...v1.7.1
[1.7.0]: https://github.com/spraakbanken/mink-frontend/compare/v1.6.1...v1.7.0
[1.6.1]: https://github.com/spraakbanken/mink-frontend/compare/v1.6.0...v1.6.1
[1.6.0]: https://github.com/spraakbanken/mink-frontend/compare/v1.5.0...v1.6.0
Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mink-frontend",
"version": "1.7.0",
"version": "1.7.1",
"license": "MIT",
"scripts": {
"dev": "vite",
Expand All @@ -16,6 +16,7 @@
},
"type": "module",
"dependencies": {
"@fontsource-variable/source-sans-3": "^5.1.0",
"@formkit/vue": "^1.0.0-beta.14",
"@highlightjs/vue-plugin": "^2.1.0",
"@modyfi/vite-plugin-yaml": "^1.0.4",
Expand Down Expand Up @@ -51,7 +52,7 @@
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-vue": "^9.0",
"happy-dom": "^12.10.3",
"happy-dom": "^15.10.2",
"prettier": "^3.2.4",
"vitest": "^1.2.2"
},
Expand Down
1 change: 1 addition & 0 deletions src/api/corpusConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ export function makeConfig(id: string, options: ConfigOptions): string {
"swener.ne:swener.ex",
"swener.ne:swener.type",
"swener.ne:swener.subtype",
"<sentence>:geo.geo_context as _geocontext",
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/FileUpload.vue
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function onProgress(progressEvent: AxiosProgressEvent) {
"
class="border-dashed border-4"
>
<span class="absolute uppercase opacity-70 text-sm font-bold p-1">
<span class="absolute uppercase opacity-70 text-sm font-semibold p-1">
{{
multiple ? $t("upload.label.multiple") : $t("upload.label.single")
}}
Expand Down
1 change: 1 addition & 0 deletions src/components/MaxHeight.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const [expanded, toggleExpanded] = useToggle();
<div>
<!-- Outer wrapper, whose height gets limited -->
<div
class="overflow-auto"
:class="{ mask: !expanded && height > maxHeight }"
:style="{
// Set max height to slightly less than requested, to avoid ridiculously small differences between closed and expanded heights.
Expand Down
2 changes: 1 addition & 1 deletion src/components/PadButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const clickable = computed(() => !!attrs.onClick);
<template>
<router-link
:to="to"
class="mink-button w-40 h-40 flex flex-col justify-center items-center text-center"
class="mink-button w-40 h-40 flex flex-col justify-center items-center text-center hyphens-auto"
:class="{ 'cursor-pointer': clickable }"
>
<slot />
Expand Down
10 changes: 7 additions & 3 deletions src/components/ProgressBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,17 @@ const percentStr = computed(() =>
</script>

<template>
<div class="inline-block bg-slate-500 rounded h-6 relative overflow-hidden">
<div
class="inline-block bg-slate-500 rounded h-6 relative text-center overflow-hidden"
>
<div
class="bg-sborange-600 h-6 absolute"
:style="{ width: percent + '%' }"
></div>
<div class="text-white text-center relative z-10">
{{ percentStr }}
<div class="font-semibold text-white relative z-10">
<span class="bg-zinc-700 bg-opacity-40 rounded px-1">
{{ percentStr }}
</span>
</div>
</div>
</template>
1 change: 1 addition & 0 deletions src/components/TerminalOutput.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<pre
tabindex="0"
class="bg-stone-800 text-lime-50 text-xs p-2 rounded whitespace-pre-wrap [overflow-wrap:anywhere]"
><slot /></pre>
</template>
9 changes: 5 additions & 4 deletions src/corpus/CorpusStateMessage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,15 @@ const {
<template>
<span
v-if="stateMessage"
class="text-white rounded px-2 py-0.5"
:class="[
isEmpty || isNeedingConfig || isNeedingMeta
? 'text-yellow-500'
? 'bg-yellow-700'
: isFailed
? 'text-red-500'
? 'bg-red-600'
: isReady
? 'text-lime-600'
: 'text-gray-400',
? 'bg-lime-700'
: '!text-inherit',
]"
>
{{ stateMessage }}
Expand Down
6 changes: 5 additions & 1 deletion src/corpus/CorpusView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,15 @@ requireAuthentication(async () => {
<template v-if="corpus">
<PageTitle subtitle="corpus">
<router-link
v-if="$route.path != `/library/corpus/${corpusId}`"
:to="`/library/corpus/${corpusId}`"
class="text-inherit hover:underline"
class="text-inherit no-underline hover:underline"
>
{{ corpusName || corpusId }}
</router-link>
<template v-else>
{{ corpusName || corpusId }}
</template>
</PageTitle>
<router-view />
</template>
Expand Down
47 changes: 24 additions & 23 deletions src/corpus/config/CorpusConfigCustom.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { AxiosError } from "axios";
import { PhWarning } from "@phosphor-icons/vue";
import { PhPencilSimple, PhWarning } from "@phosphor-icons/vue";
import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
import useConfig from "@/corpus/config/config.composable";
import { useAuth } from "@/auth/auth.composable";
Expand All @@ -11,6 +11,8 @@ import type { MinkResponse } from "@/api/api.types";
import useMessenger from "@/message/messenger.composable";
import SyntaxHighlight from "@/components/SyntaxHighlight.vue";
import PendingContent from "@/spin/PendingContent.vue";
import RouteButton from "@/components/RouteButton.vue";
import CorpusConfigCustomHelp from "./CorpusConfigCustomHelp.vue";
const corpusId = useCorpusIdParam();
const { config, uploadConfigRaw } = useConfig(corpusId);
Expand All @@ -31,40 +33,39 @@ async function upload(files: File[]) {
</script>

<template>
<HelpBox>
<i18n-t scope="global" keypath="config.custom.help">
<template #sparv>
<a :href="$t('sparv.url')">Sparv</a>
</template>
<template #topic>
<a
href="https://spraakbanken.gu.se/sparv/#/user-manual/corpus-configuration"
>
Corpus Configuration
</a>
</template>
</i18n-t>
</HelpBox>

<div class="flex flex-wrap gap-4">
<LayoutBox class="w-96 grow" :title="$t('show')">
<PendingContent :on="`corpus/${corpusId}/config`">
<SyntaxHighlight v-if="config" language="yaml" :code="config" />
</PendingContent>
</LayoutBox>
<CorpusConfigCustomHelp />

<div class="flex flex-wrap gap-4 items-start">
<LayoutBox class="w-96 grow" :title="$t('upload')">
<HelpBox important>
<PhWarning class="inline mb-1 mr-1" />
{{ $t("config.custom.upload.caution") }}
</HelpBox>

<HelpBox important>
<PhWarning class="inline mb-1 mr-1" />
{{ $t("config.custom.upload.overwrite") }}
</HelpBox>

<PendingContent :on="`corpus/${corpusId}/config`" blocking>
<FileUpload :file-handler="upload" accept=".yaml,.yml" />
<FileUpload :file-handler="upload" accept=".yaml,.yml" primary />
</PendingContent>
</LayoutBox>

<LayoutBox class="w-96 grow" :title="$t('show')">
<PendingContent :on="`corpus/${corpusId}/config`">
<SyntaxHighlight v-if="config" language="yaml" :code="config" />
</PendingContent>

<template #controls>
<RouteButton
:to="`/library/corpus/${corpusId}/config/custom/edit`"
class="button-primary"
>
<PhPencilSimple weight="bold" class="inline mb-1 mr-1" />
{{ $t("edit") }}
</RouteButton>
</template>
</LayoutBox>
</div>
</template>
97 changes: 97 additions & 0 deletions src/corpus/config/CorpusConfigCustomEdit.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<script setup lang="ts">
import Yaml from "js-yaml";
import { useAuth } from "@/auth/auth.composable";
import useConfig from "./config.composable";
import useCorpusIdParam from "../corpusIdParam.composable";
import { ref, watchEffect } from "vue";
import useMessenger from "@/message/messenger.composable";
import type { AxiosError } from "axios";
import type { MinkResponse } from "@/api/api.types";
import LayoutBox from "@/components/LayoutBox.vue";
import HelpBox from "@/components/HelpBox.vue";
import { PhFileX, PhWarning } from "@phosphor-icons/vue";
import PendingContent from "@/spin/PendingContent.vue";
import ActionButton from "@/components/ActionButton.vue";
import { getException } from "@/util";
import CorpusConfigCustomHelp from "./CorpusConfigCustomHelp.vue";
import RouteButton from "@/components/RouteButton.vue";
const corpusId = useCorpusIdParam();
const { requireAuthentication } = useAuth();
const { config, uploadConfigRaw } = useConfig(corpusId);
const { alertError } = useMessenger();
const input = ref(config.value || "");
const isValid = ref<boolean>();
requireAuthentication();
function validate() {
isValid.value = !getException(() => Yaml.load(input.value));
}
async function upload() {
if (input.value == config.value) return;
try {
await uploadConfigRaw(input.value);
} catch (error) {
alertError(error as AxiosError<MinkResponse>);
}
}
watchEffect(validate);
// Backend may modify input when saving, then make that visible
watchEffect(() => (input.value = config.value || ""));
</script>

<template>
<CorpusConfigCustomHelp />

<div class="flex">
<LayoutBox class="w-96 grow" :title="$t('edit')">
<template #controls>
<RouteButton
:to="`/library/corpus/${corpusId}/config/custom`"
:class="{ 'button-primary': input == config }"
>
{{ input == config ? $t("show") : $t("cancel") }}
</RouteButton>
</template>

<HelpBox important>
<PhWarning class="inline mb-1 mr-1" />
{{ $t("config.custom.upload.caution") }}
</HelpBox>
<HelpBox important>
<PhWarning class="inline mb-1 mr-1" />
{{ $t("config.custom.upload.overwrite") }}
</HelpBox>

<PendingContent :on="`corpus/${corpusId}/config`" blocking>
<div class="flex gap-2 items-baseline my-2">
<div class="flex-grow"></div>
<div v-if="!isValid" :title="$t('yaml.invalid')">
<PhFileX class="inline text-xl text-red-600" />
</div>
<ActionButton
@click="upload"
class="button-primary"
:disabled="input == config || !isValid"
:title="
input == config
? $t('save.no_changes')
: !isValid
? $t('yaml.invalid')
: undefined
"
>
{{ $t("save") }}
</ActionButton>
</div>

<textarea class="w-full h-96 font-mono text-sm" v-model="input" />
</PendingContent>
</LayoutBox>
</div>
</template>
20 changes: 20 additions & 0 deletions src/corpus/config/CorpusConfigCustomHelp.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script setup lang="ts">
import HelpBox from "@/components/HelpBox.vue";
</script>

<template>
<HelpBox>
<i18n-t scope="global" keypath="config.custom.help">
<template #sparv>
<a :href="$t('sparv.url')">Sparv</a>
</template>
<template #topic>
<a
href="https://spraakbanken.gu.se/sparv/#/user-manual/corpus-configuration"
>
Corpus Configuration
</a>
</template>
</i18n-t>
</HelpBox>
</template>
4 changes: 4 additions & 0 deletions src/corpus/config/CorpusConfiguration.vue
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,10 @@ async function submit(fields: Form) {
:value="corpusId"
:help="$t('metadata.identifier.help')"
>
<template #label>
<!-- Avoid orphaned <label> for better accessibility -->
<span class="formkit-label">{{ $t("identifier") }}</span>
</template>
<template #input>
<TerminalOutput class="inline leading-loose">
{{ corpusId }}
Expand Down
2 changes: 1 addition & 1 deletion src/corpus/explore/ToolPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ defineEmits<{
<template>
<div class="flex flex-col gap-2">
<div class="flex flex-wrap gap-2 justify-between items-baseline">
<h3 class="font-bold">{{ name }}</h3>
<h3 class="font-semibold">{{ name }}</h3>

<div class="flex gap-2 justify-end items-baseline">
<ActionButton
Expand Down
4 changes: 2 additions & 2 deletions src/corpus/exports/exports.composable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function useExports(corpusId: string) {
}

async function downloadResult() {
matomo?.trackEvent("Corpus result", "Download export archive", corpusId);
matomo?.trackEvent("Corpus", "Download", "Export archive");
const data = await mink.downloadExports(corpusId).catch(alertError);
if (!data) return;
downloadFile(data, getDownloadFilename());
Expand All @@ -38,7 +38,7 @@ export default function useExports(corpusId: string) {

async function downloadResultFile(path: string) {
const filename = path.split("/").pop()!;
matomo?.trackEvent("Corpus result", "Download export file", filename);
matomo?.trackEvent("Corpus", "Download", "Export file");
const data = await mink
.downloadExportFiles(corpusId, path)
.catch(alertError);
Expand Down
2 changes: 1 addition & 1 deletion src/corpus/job/JobStatus.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const hasStarted = computed(
<span v-if="jobStatus.current_process">
{{ $t(`job.process.${jobStatus.current_process}`) }}:
</span>
<JobStatusMessage :corpus-id="corpusId" class="font-bold" />
<JobStatusMessage :corpus-id="corpusId" />
</div>

<ActionButton
Expand Down
Loading

0 comments on commit 474fa97

Please sign in to comment.