Merge branch 'dev'

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v3
@@ -18,3 +18,4 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: yarn install
       - run: yarn test
+      - run: yarn build

CHANGELOG.md

@@ -13,6 +13,30 @@ As this project is a user-facing application, the places in the semantic version
 
 ## [Unreleased]
 
+## [1.2.0] (2024-01-17)
+
+### Added
+
+- Option to enable named entity recognition
+- Check if admin mode is enabled on load
+
+### Changed
+
+- Dependencies upgraded
+  - Node 18 is now required, due to @vitejs/plugin-vue@5
+- Request `resource-info` once for all resources
+- `UrlButton` component replaces `a > ActionButton`
+- `RouteButton` component replaces `router-link > ActionButton`
+- `ActionButton` uses `<button>` and is tabbable
+
+### Fixed
+
+- Error handling when deleting corpus
+
+### Removed
+
+- `useVariant`
+
 ## [1.1.0] (2024-01-02)
 
 ### Added
@@ -99,7 +123,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.1.0...HEAD
+[unreleased]: https://github.com/spraakbanken/mink-frontend/compare/v1.2.0...HEAD
+[1.2.0]: https://github.com/spraakbanken/mink-frontend/compare/v1.1.0...v1.2.0
 [1.1.0]: https://github.com/spraakbanken/mink-frontend/compare/v1.0.5...v1.1.0
 [1.0.5]: https://github.com/spraakbanken/mink-frontend/compare/v1.0.4...v1.0.5
 [1.0.4]: https://github.com/spraakbanken/mink-frontend/compare/v1.0.3...v1.0.4

README.md

@@ -1,5 +1,7 @@
 # Mink frontend
 
+<img src="https://spraakbanken.gu.se/themes/sb/images/mink.svg" width="200" alt="Mink logo" />
+
 With Mink, we are putting Språkbanken's research infrastructure into the hands of the researchers.
 You can use Mink to apply our language technology methods on texts that you have collected yourself.
 The resulting data can be downloaded or made available through our research tools.
@@ -8,8 +10,6 @@ The resulting data can be downloaded or made available through our research tool
 – [Language data](https://spraakbanken.gu.se/en/resources)
 – [Tools](https://spraakbanken.gu.se/en/tools)
 
-<img src="src/assets/mink-screen.png" width="600" alt="Screenshot of Mink" />
-
 ## Code
 
 This repo makes up the frontend at [spraakbanken.gu.se/mink](https://spraakbanken.gu.se/mink/).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mink-frontend",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
@@ -11,14 +11,17 @@
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
     "@formkit/vue": "^1.0.0-beta.14",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^5",
     "@vueuse/core": "^9.6.0",
     "autoprefixer": "^10.4.7",
     "axios": "^0.21.4",
@@ -30,8 +33,8 @@
     "rollup-plugin-visualizer": "^5.6.0",
     "tailwindcss": "^3.1.4",
     "vite": "^4.0.5",
-    "vite-plugin-rewrite-all": "^1.0.1",
-    "vue": "^3.2.6",
+    "vite-plugin-rewrite-all": "1.0.1 || ^1.0.3",
+    "vue": "^3.4",
     "vue-i18n": "9",
     "vue-matomo": "^4.2.0",
     "vue-router": "4"

src/App.vue

@@ -19,10 +19,11 @@ import { computed } from "vue";
 import { useRoute } from "vue-router";
 import { useTitle } from "@vueuse/core";
 import { api } from "@/api/api";
+import * as util from "@/util";
 import { useAuth } from "@/auth/auth.composable";
 import useLocale from "@/i18n/locale.composable";
+import { useCorpusStore } from "@/store/corpus.store";
 import MessageToasts from "@/message/MessageToasts.vue";
-// Asset path transformation doesn't work in <source srcset> like in <img src>
 import usePageTitle from "@/page/title.composable";
 import Breadcrumb from "@/page/Breadcrumb.vue";
 import AppHeader from "./page/AppHeader.vue";
@@ -34,6 +35,7 @@ const { title } = usePageTitle();
 // Activate automatic updates of the HTML page title.
 useTitle(title, { titleTemplate: "%s | Mink" });
 const route = useRoute();
+const corpusStore = useCorpusStore();
 
 const isHome = computed(() => route.path == "/");
 
@@ -42,10 +44,8 @@ refreshJwt();
 
 if (import.meta.env.DEV) {
   window.api = api;
-  import("@/store/corpus.store").then(
-    (m) => (window.corpusStore = m.useCorpusStore())
-  );
-  import("@/util").then((m) => (window.util = m));
+  window.corpusStore = corpusStore;
+  window.util = util;
 }
 </script>
 

src/api/api.js

@@ -95,7 +95,14 @@ class MinkApi {
     return response.data;
   }
 
-  /** @see https://ws.spraakbanken.gu.se/ws/mink/api-doc#tag/Process-Corpus/operation/resourceinfo */
+  /**
+   * @see https://ws.spraakbanken.gu.se/ws/mink/api-doc#tag/Process-Corpus/operation/resourceinfo
+   *
+   * An info record has {resource: ..., job: ...}.
+   *
+   * If corpus_id is given, the response is an info record. If not, it contains
+   * `resources` which is a list of info records.
+   */
   async resourceInfo(corpusId) {
     const response = await this.axios.get("resource-info", {
       params: { corpus_id: corpusId },
@@ -159,6 +166,11 @@ class MinkApi {
     return response.data;
   }
 
+  async adminModeStatus() {
+    const response = await this.axios.get("admin-mode-status");
+    return response.data.admin_mode_status;
+  }
+
   async adminModeOn() {
     const response = await this.axios.post("admin-mode-on");
     return response.data;

src/api/backend.composable.js

@@ -11,7 +11,7 @@ export default function useMinkBackend() {
   const { spin } = useSpin();
   const { t } = useI18n();
 
-  const loadCorpora = () =>
+  const loadCorpusIds = () =>
     spin(api.listCorpora(), t("corpus.list.loading"), "corpora");
 
   const createCorpus = () =>
@@ -71,7 +71,7 @@ export default function useMinkBackend() {
     spin(
       api.resourceInfo(corpusId),
       t("resource.loading"),
-      `corpus/${corpusId}/job`
+      corpusId ? `corpus/${corpusId}/job` : "corpora"
     );
 
   const runJob = (corpusId) =>
@@ -115,6 +115,8 @@ export default function useMinkBackend() {
       `corpus/${corpusId}/exports`
     );
 
+  const checkAdminMode = () => spin(api.adminModeStatus(), null, "admin-mode");
+
   const enableAdminMode = () =>
     spin(api.adminModeOn(), "Enabling admin mode", "admin-mode");
 
@@ -123,7 +125,7 @@ export default function useMinkBackend() {
 
   return {
     info,
-    loadCorpora,
+    loadCorpusIds,
     createCorpus,
     deleteCorpus,
     loadConfig,
@@ -140,6 +142,7 @@ export default function useMinkBackend() {
     loadExports,
     downloadExports,
     downloadExportFiles,
+    checkAdminMode,
     enableAdminMode,
     disableAdminMode,
   };

src/api/corpusConfig.js

@@ -21,6 +21,7 @@ export async function makeConfig(id, options) {
     sentenceSegmenter,
     datetimeFrom,
     datetimeTo,
+    enableNer,
   } = options;
   const config = {
     metadata: {
@@ -113,6 +114,17 @@ export async function makeConfig(id, options) {
     );
   }
 
+  // Enable named entity recognition.
+  if (enableNer) {
+    config.export.annotations.push(
+      "swener.ne",
+      "swener.ne:swener.name",
+      "swener.ne:swener.ex",
+      "swener.ne:swener.type",
+      "swener.ne:swener.subtype"
+    );
+  }
+
   return (await yaml).dump(config);
 }
 
@@ -139,6 +151,7 @@ export async function parseConfig(configYaml) {
     datetimeTo: config.custom_annotations?.find(
       (a) => a.params.out == "<text>:misc.dateto"
     ).params.value,
+    enableNer: config.export?.annotations?.includes("swener.ne"),
   };
 }
 

src/auth/LoginButton.vue

@@ -1,16 +1,17 @@
 <template>
-  <a :href="getLoginUrl(route.query.destination || '/corpus')">
-    <ActionButton variant="primary">
-      <icon :icon="['fas', 'right-to-bracket']" />
-      {{ $t("login") }}
-    </ActionButton>
-  </a>
+  <UrlButton
+    class="button-primary"
+    :href="getLoginUrl(route.query.destination || '/corpus')"
+  >
+    <icon :icon="['fas', 'right-to-bracket']" />
+    {{ $t("login") }}
+  </UrlButton>
 </template>
 
 <script setup>
 import { useRoute } from "vue-router";
 import { getLoginUrl } from "./auth";
-import ActionButton from "@/components/ActionButton.vue";
+import UrlButton from "@/components/UrlButton.vue";
 
 const route = useRoute();
 </script>

src/components/ActionButton.vue

@@ -1,29 +1,9 @@
 <template>
-  <div
-    class="inline-block mink-button"
-    :class="{ [variantClass]: true, disabled }"
-  >
+  <button class="inline-block mink-button" :disabled="disabled">
     <slot />
-  </div>
+  </button>
 </template>
 
 <script setup>
-import { useVariant, variantProps } from "@/variant.composable";
-
-const props = defineProps({ ...variantProps, disabled: Boolean });
-
-const { variantClass } = useVariant(() => props.variant);
+defineProps({ disabled: Boolean });
 </script>
-
-<style scoped>
-.mute {
-  @apply text-inherit border-0 shadow-none;
-}
-.mute:not(:hover) {
-  @apply bg-transparent text-inherit;
-}
-
-.slim {
-  @apply p-0 px-1;
-}
-</style>

src/components/PadButton.vue

@@ -2,7 +2,7 @@
   <router-link
     :to="to"
     class="mink-button m-2 w-40 h-40 flex flex-col justify-center items-center text-center"
-    :class="{ [variantClass]: true, 'cursor-pointer': clickable }"
+    :class="{ 'cursor-pointer': clickable }"
   >
     <slot />
   </router-link>
@@ -11,18 +11,15 @@
 <script setup>
 import { computed } from "@vue/reactivity";
 import { useAttrs } from "@vue/runtime-core";
-import { useVariant, variantProps } from "@/variant.composable";
 
-const props = defineProps({
+defineProps({
   to: {
     type: [String, Object],
     required: true,
   },
-  ...variantProps,
 });
 
 const attrs = useAttrs();
-const { variantClass } = useVariant(() => props.variant);
 
 const clickable = computed(() => !!attrs.onClick);
 </script>

src/components/RouteButton.vue

@@ -0,0 +1,16 @@
+<script setup>
+import ActionButton from "./ActionButton.vue";
+
+defineProps({
+  to: { type: [String, Object], required: true },
+  disabled: Boolean,
+});
+</script>
+
+<template>
+  <router-link v-slot="{ navigate }" :to="to" custom>
+    <ActionButton :disabled="disabled" v-bind="$attrs" @click="navigate">
+      <slot />
+    </ActionButton>
+  </router-link>
+</template>

src/components/UrlButton.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  href: { type: String, required: true },
+  target: { type: String, default: undefined },
+  disabled: Boolean,
+});
+</script>
+
+<template>
+  <a
+    :href="disabled ? undefined : href"
+    :target="target"
+    class="inline-block mink-button"
+    :class="{ disabled }"
+  >
+    <slot />
+  </a>
+</template>

src/corpora/CreateCorpus.vue

@@ -10,7 +10,7 @@
         type="form"
         :submit-label="$t('create')"
         :submit-attrs="{
-          inputClass: 'mink-button mink-primary',
+          inputClass: 'mink-button button-primary',
         }"
         @submit="submit"
       >

src/corpora/Library.vue

@@ -28,7 +28,7 @@
     <PendingContent on="create" blocking>
       <SourceUpload
         :file-handler="createCorpusFromFiles"
-        :variant="corpusStore.hasCorpora ? null : 'primary'"
+        :primary="!corpusStore.hasCorpora"
       />
     </PendingContent>
   </Section>