From 39e78fcc2ec35659f2a54cf0674185de5b3f0bf8 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 6 Mar 2024 12:45:52 +0100
Subject: [PATCH] Defer loading large source text, fix #29

---
 CHANGELOG.md                      |  1 +
 src/api/backend.composable.ts     |  2 +-
 src/corpus/sources/SourceText.vue | 29 ++++++++++++++++++++++++-----
 src/corpus/sources/SourceView.vue |  6 +++++-
 src/fontawesome.ts                |  2 ++
 src/i18n/locales/en.yaml          |  1 +
 src/i18n/locales/sv.yaml          |  1 +
 7 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 231f3db..11eb76b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ As this project is a user-facing application, the places in the semantic version
 ### Changed
 
 - Extracted the concept of a Resource as a supertype of Corpus, in preparation for adding the Metadata resource type [#145](https://github.com/spraakbanken/mink-frontend/issues/145)
+- Defer loading source text if file is large [#29](https://github.com/spraakbanken/mink-frontend/issues/29)
 - Source text file content now look the same as log output
 
 ### Fixed
diff --git a/src/api/backend.composable.ts b/src/api/backend.composable.ts
index 4011f0f..8ac9de5 100644
--- a/src/api/backend.composable.ts
+++ b/src/api/backend.composable.ts
@@ -52,7 +52,7 @@ export default function useMinkBackend() {
     spin(
       api.downloadSourceText(corpusId, filename),
       t("source.downloading_plain"),
-      `corpus/${corpusId}/sources/${filename}`,
+      `corpus/${corpusId}/sources/${filename}/plain`,
     );
 
   const uploadSources = (
diff --git a/src/corpus/sources/SourceText.vue b/src/corpus/sources/SourceText.vue
index 778a210..91b7f62 100644
--- a/src/corpus/sources/SourceText.vue
+++ b/src/corpus/sources/SourceText.vue
@@ -1,24 +1,38 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
+import once from "lodash/once";
 import { downloadFile } from "@/util";
 import ActionButton from "@/components/ActionButton.vue";
 import TextData from "@/components/TextData.vue";
 
+/** Defer loading if file is large. */
+const AUTOLOAD_LIMIT = 500_000;
+
 const props = defineProps<{
   load: () => Promise<string | undefined>;
   filename: string;
+  size?: number;
   noLoad?: boolean;
 }>();
 
 const text = ref();
-const loadPromise = props.load();
+const shouldDeferLoading = computed(() => (props.size || 0) > AUTOLOAD_LIMIT);
+
+/** Wraps the load call to ensure it's only called once (or not at all). */
+const load = once(() => props.load());
+
+/** Load text and store it for showing. */
+async function show() {
+  text.value = await load();
+}
 
+// Load the text unless it is disabled or only manual.
 onMounted(async () => {
-  if (!props.noLoad) text.value = await loadPromise;
+  if (!props.noLoad && !shouldDeferLoading.value) await show();
 });
 
 async function download() {
-  const text = await loadPromise;
+  const text = await load();
   downloadFile(text!, props.filename || "mink-source");
 }
 </script>
@@ -26,7 +40,12 @@ async function download() {
 <template>
   <TextData v-if="text" :text="text" />
 
-  <div class="my-2">
+  <div class="my-2 flex gap-2">
+    <ActionButton v-if="!noLoad && text === undefined" @click="show()">
+      <icon :icon="['fas', 'rotate']" class="mr-1" />
+      {{ $t("load") }}
+    </ActionButton>
+
     <ActionButton @click="download">
       <icon :icon="['far', 'file']" class="mr-1" />
       {{ $t("download") }}
diff --git a/src/corpus/sources/SourceView.vue b/src/corpus/sources/SourceView.vue
index b0ec44a..0515fba 100644
--- a/src/corpus/sources/SourceView.vue
+++ b/src/corpus/sources/SourceView.vue
@@ -66,6 +66,7 @@ async function loadPlain() {
                 :load="loadRaw"
                 :filename="metadata.name"
                 :no-load="isBinary"
+                :size="metadata.size"
               />
             </PendingContent>
           </td>
@@ -73,11 +74,14 @@ async function loadPlain() {
         <tr v-if="!isPlaintext">
           <th>{{ $t("txt") }}</th>
           <td>
-            <PendingContent :on="`corpus/${corpusId}/sources/${filename}`">
+            <PendingContent
+              :on="`corpus/${corpusId}/sources/${filename}/plain`"
+            >
               <SourceText
                 v-if="isJobDone"
                 :load="loadPlain"
                 :filename="ensureExtension(metadata.name, 'txt')"
+                :size="metadata.size"
               />
               <div class="text-sm py-1">
                 {{ $t("source_text_help") }}
diff --git a/src/fontawesome.ts b/src/fontawesome.ts
index 9343474..11faa65 100644
--- a/src/fontawesome.ts
+++ b/src/fontawesome.ts
@@ -16,6 +16,7 @@ import {
   faPen,
   faPersonRunning,
   faRightToBracket,
+  faRotate,
   faTriangleExclamation,
   faUserPlus,
   faXmark,
@@ -30,6 +31,7 @@ library.add(
   faPen,
   faPersonRunning,
   faRightToBracket,
+  faRotate,
   faSquareMinus,
   faSquarePlus,
   faTrashCan,
diff --git a/src/i18n/locales/en.yaml b/src/i18n/locales/en.yaml
index eb8236d..4891f56 100644
--- a/src/i18n/locales/en.yaml
+++ b/src/i18n/locales/en.yaml
@@ -173,6 +173,7 @@ txt: Plain text
 docx: Microsoft Word
 odt: OpenDocument Text
 pdf: PDF
+load: Load
 file.archive: Archive
 file.singles: Single files
 name: Name
diff --git a/src/i18n/locales/sv.yaml b/src/i18n/locales/sv.yaml
index 43c7b36..0756a17 100644
--- a/src/i18n/locales/sv.yaml
+++ b/src/i18n/locales/sv.yaml
@@ -168,6 +168,7 @@ txt: Ren text
 docx: Microsoft Word
 odt: OpenDocument Text
 pdf: PDF
+load: Ladda in
 file.archive: Arkivfil
 file.singles: Enskilda filer
 name: Namn