cache distribution to json (and functional approach)

Author: PrinsINT

client/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24.3.0-bookworm-slim AS build
+FROM node:24.4.1-bookworm-slim AS build
 COPY . .
 RUN npm ci && npm run build
 

client/components.d.ts

@@ -32,11 +32,9 @@ declare module 'vue' {
     GCard: typeof import('./src/components/GCard.vue')['default']
     GCheckBox: typeof import('./src/components/input/GCheckBox.vue')['default']
     GForm: typeof import('./src/components/input/GForm.vue')['default']
-    GFormHorizontal: typeof import('./src/components/input/GFormHorizontal.vue')['default']
     GInfo: typeof import('./src/components/GInfo.vue')['default']
     GInput: typeof import('./src/components/input/GInput.vue')['default']
     GModal: typeof import('./src/components/modals/GModal.vue')['default']
-    GNav: typeof import('./src/components/links/GNav.vue')['default']
     GNumber: typeof import('./src/components/input/GNumber.vue')['default']
     GSelect: typeof import('./src/components/input/GSelect.vue')['default']
     GSpinner: typeof import('./src/components/GSpinner.vue')['default']
@@ -62,8 +60,8 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SingleTermComparisonTable: typeof import('./src/components/tables/SingleTermComparisonTable.vue')['default']
     TagsetSelect: typeof import('./src/components/input/TagsetSelect.vue')['default']
+    TypeTokenModal: typeof import('./src/components/modals/TypeTokenModal.vue')['default']
     UploadDocuments: typeof import('./src/components/input/UploadDocuments.vue')['default']
     UserList: typeof import('./src/components/modals/corpus/UserList.vue')['default']
-    VariantsModal: typeof import('./src/components/modals/VariantsModal.vue')['default']
   }
 }

client/package-lock.json

@@ -9,37 +9,37 @@
         "update": "npm-check-updates -u && npm install"
     },
     "dependencies": {
-        "@primeuix/themes": "^1.2.1",
-        "@vueuse/core": "^13.5.0",
-        "@vueuse/router": "^13.5.0",
-        "axios": "^1.10.0",
+        "@primeuix/themes": "^1.2.2",
+        "@vueuse/core": "^13.6.0",
+        "@vueuse/router": "^13.6.0",
+        "axios": "^1.11.0",
         "content-disposition": "^0.5.4",
         "pinia": "^3.0.3",
         "primevue": "^4.3.6",
         "safe-buffer": "^5.2.1",
-        "vue": "^3.5.17",
+        "vue": "^3.5.18",
         "vue-router": "^4.5.1"
     },
     "devDependencies": {
         "@rollup/plugin-yaml": "^4.1.2",
         "@tsconfig/node24": "^24.0.1",
         "@types/content-disposition": "^0.5.9",
-        "@types/node": "^24.0.12",
-        "@vitejs/plugin-vue": "^6.0.0",
+        "@types/node": "^24.1.0",
+        "@vitejs/plugin-vue": "^6.0.1",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.6.0",
         "@vue/tsconfig": "^0.7.0",
-        "eslint": "^9.30.1",
+        "eslint": "^9.32.0",
         "eslint-plugin-vue": "^10.3.0",
-        "jiti": "^2.4.2",
-        "npm-check-updates": "^18.0.1",
+        "jiti": "^2.5.1",
+        "npm-check-updates": "^18.0.2",
         "prettier": "^3.6.2",
         "sass-embedded": "^1.89.2",
         "typescript": "~5.8.3",
         "unplugin-auto-import": "^19.3.0",
         "unplugin-vue-components": "^28.8.0",
-        "vite": "^7.0.3",
+        "vite": "^7.0.6",
         "vite-plugin-node-polyfills": "^0.24.0",
-        "vite-plugin-vue-devtools": "^7.7.7"
+        "vite-plugin-vue-devtools": "^8.0.0"
     }
 }

client/package.json

@@ -0,0 +1,23 @@
+<template>
+    <GModal @hide="$emit('hide')">
+        <GTable :columns :items sortColumn="count">
+            <template #title>
+                Types of lemma <i>{{ typeToken?.lemma }}</i> and group <i>{{ typeToken?.group }}</i>
+            </template>
+
+            <template #help>
+                This is an overview of all types belonging to the chosen lemma &mdash; grouped annotation pair.
+            </template>
+        </GTable>
+    </GModal>
+</template>
+
+<script setup lang="ts">
+import type { TypeToken } from "@/types/evaluation/distribution"
+import type { Column } from "@/types/ui/table"
+
+const { typeToken } = defineProps<{ typeToken: TypeToken }>()
+
+const columns: Column<TypeToken>[] = [{ key: "type" }, { key: "count" }]
+const items = computed(() => Object.entries(typeToken.tokens).map(([type, count]) => ({ type, count })))
+</script>

client/src/components/modals/TypeTokenModal.vue

@@ -1,22 +1,10 @@
-// Libraries & stores
-
-import * as API from "@/api/evaluation"
 import { distributionPath } from "@/api/evaluation"
 import { useAxios } from "@/api/useAxios"
 import stores from "@/stores"
-import * as Utils from "@/stores/evaluation/utils"
-// API & types
-// API & types
-import type { UUID } from "@/types/corpora"
-import type { DistributionWrapper } from "@/types/evaluation"
+import type { TypeToken, Distribution } from "@/types/evaluation/distribution"
 import type { SelectOption } from "@/types/ui/select"
 
-// Allows for Object.keys(distribution.table), which dislikes null.
-const defaultDistribution = () => ({ distribution: {} }) as DistributionWrapper
-
-/**
- * Stores and fetches the term frequency distribution.
- */
+/** Stores and fetches the term frequency distribution. */
 const useDistribution = defineStore("distribution", () => {
     // Fields
     const { hypothesisId } = storeToRefs(stores.useJobSelection())
@@ -26,30 +14,14 @@ const useDistribution = defineStore("distribution", () => {
         return distributionPath(corpusId.value)
     })
 
-    const { loading, data: distributions } = useAxios<Record<string, DistributionWrapper>>(
-        url,
-        {},
-        { hypothesis: hypothesisId.value },
-    )
+    const { loading, data: distributions } = useAxios<Record<string, Distribution>>(url, undefined, {
+        hypothesis: hypothesisId.value,
+    })
 
-    const distribution = computed(() => distributions.value?.[selectedDistribution.value] ?? defaultDistribution())
+    const distribution = computed<TypeToken[]>(() => distributions.value?.[selectedDistribution.value])
     const selectedDistribution = ref<string>()
-    const distributionOptions = computed<SelectOption[]>(
-        () => {
-            if (!distributions.value) {
-                return []
-            }
-            return Object.keys(distributions.value).map((x) => ({ value: x, text: x }))
-        },
-        { immediate: true },
-    )
-    const posses = computed(() => {
-        // A bit hacky using Object.entries, but .map throws on undefined.
-        return Object.entries(distribution.value?.distribution)
-            ?.map((x) => x[1].pos)
-            .filter((val, ind, arr) => arr.indexOf(val) === ind) // unique values
-            .sort()
-    })
+    const distributionOptions = computed<SelectOption[]>(() => Object.keys(distributions.value || {}).map((x) => ({ value: x, text: x })))
+    const posses = computed<string[]>(() => [...new Set(Object.values(distribution.value || {}).map((t: TypeToken) => t.group))].sort())
     // Exports
     return {
         // Fields

client/src/components/modals/VariantsModal.vue

@@ -7,22 +7,6 @@ export type ConfusionWrapper = {
     referenceLastModified: number
 }
 
-// Distribution
-export type DistributionWrapper = {
-    corpus_uuid: string
-    coveredAlphabeticChars: number
-    coveredChars: number
-    distribution: Distribution[]
-    generated: number
-    hypothesis: string
-    modified: number
-    totalAlphabeticChars: number
-    totalChars: number
-    trimmed: boolean
-}
-
-export type Distribution = { lemma: string; pos: string; count: number; literals: { [literal: string]: number } }
-
 // Metrics
 export type Metrics = {
     global: MetricsRow

client/src/stores/evaluation/distribution.ts

@@ -0,0 +1,2 @@
+export type Distribution = Record<string, TypeToken[]>
+export type TypeToken = { lemma: string; group: string; count: number; tokens: Record<string, number> }