From 9ef026ec97929063ef510bdc755a9b4dd574033e Mon Sep 17 00:00:00 2001
From: Clovis Gladstone <clovisgladstone@gmail.com>
Date: Tue, 9 Apr 2024 16:43:27 -0500
Subject: [PATCH] fixes, add new progress spinner component

---
 www/app/src/App.vue                           |  5 --
 www/app/src/components/Collocation.vue        | 57 ++++++++-----
 www/app/src/components/ProgressSpinner.vue    | 56 +++++++++++++
 www/app/src/components/ResultsSummary.vue     | 81 +++++++++----------
 www/app/src/locales/en.json                   |  2 +-
 www/app/src/locales/fr.json                   |  2 +-
 .../get_similar_collocate_distributions.py    |  6 +-
 7 files changed, 137 insertions(+), 72 deletions(-)
 create mode 100644 www/app/src/components/ProgressSpinner.vue

diff --git a/www/app/src/App.vue b/www/app/src/App.vue
index 1060acd6..24f33872 100644
--- a/www/app/src/App.vue
+++ b/www/app/src/App.vue
@@ -380,11 +380,6 @@ span.note {
     content: "*";
 }
 
-.xml-hi {
-    font-style: italic;
-    font-variant: small-caps;
-}
-
 .xml-w::before {
     margin: 0;
     padding: 0;
diff --git a/www/app/src/components/Collocation.vue b/www/app/src/components/Collocation.vue
index 8b7e9c9e..2c0d1b2f 100644
--- a/www/app/src/components/Collocation.vue
+++ b/www/app/src/components/Collocation.vue
@@ -239,10 +239,7 @@
                             </div>
                             <div class="col-6" style="border-left: solid 1px rgba(0, 0, 0, 0.176)">
                                 <div class="d-flex justify-content-center position-relative" v-if="compareSearching">
-                                    <div class="spinner-border text-secondary" role="status"
-                                        style="width: 4rem; height: 4rem; position: absolute; z-index: 50; top: 10px">
-                                        <span class="visually-hidden">{{ $t("common.loading") }}...</span>
-                                    </div>
+                                    <progress-spinner :progress="progressPercent" :lg="true" />
                                 </div>
                                 <word-cloud v-if="otherCollocates.length > 0" :word-weights="otherCollocates" label=""
                                     :click-handler="otherCollocateClick"></word-cloud>
@@ -257,10 +254,7 @@
                             </div>
                             <div class="col-6" style="border-left: solid 1px rgba(0, 0, 0, 0.176)">
                                 <div class="d-flex justify-content-center position-relative" v-if="compareSearching">
-                                    <div class="spinner-border text-secondary" role="status"
-                                        style="width: 4rem; height: 4rem; position: absolute; z-index: 50; top: 10px">
-                                        <span class="visually-hidden">{{ $t("common.loading") }}...</span>
-                                    </div>
+                                    <progress-spinner :progress="progressPercent" :lg="true" />
                                 </div>
                                 <word-cloud v-if="underRepresented.length > 0" :word-weights="underRepresented"
                                     :click-handler="otherCollocateClick"></word-cloud>
@@ -271,14 +265,12 @@
             </div>
         </div>
         <div v-if="collocMethod == 'similar'" class="mx-2 my-3" style="margin-bottom: 6rem">
-            <div class="alert alert-info mt-2 p-1" style="width: fit-content" role="alert" v-if="similarSearching">
-                {{ similarSearchProgress }}...
-                <div class="spinner-border text-secondary spinner-border-sm" role="status"><span
-                        class="visually-hidden">{{
-                            $t("common.loading") }}...</span>
+            <div style="display: flex; align-items: center;" v-if="similarSearching">
+                <div class="alert alert-info p-1 mb-0 d-inline-block" style="width: fit-content" role="alert">
+                    {{ similarSearchProgress }}...
                 </div>
+                <progress-spinner class="px-2" :progress="progressPercent" />
             </div>
-
             <div class="card mt-3" v-if="mostSimilarDistributions.length > 0">
                 <div class="row">
                     <div class="col-6 pe-0">
@@ -333,12 +325,13 @@ import { mapFields } from "vuex-map-fields";
 import ResultsSummary from "./ResultsSummary";
 import WordCloud from "./WordCloud.vue";
 import BibliographyCriteria from "./BibliographyCriteria";
+import ProgressSpinner from "./ProgressSpinner";
 import { Collapse, Tab } from "bootstrap";
 
 export default {
     name: "collocation-report",
     components: {
-        ResultsSummary, WordCloud, BibliographyCriteria
+        ResultsSummary, WordCloud, BibliographyCriteria, ProgressSpinner
     },
     computed: {
         ...mapFields([
@@ -414,7 +407,8 @@ export default {
             similarSearchProgress: "",
             similarSearching: false,
             timeSeriesInterval: 10,
-            collocationTimePeriods: []
+            collocationTimePeriods: [],
+            progressPercent: 0
         };
     },
     created() {
@@ -583,6 +577,9 @@ export default {
             } else {
                 this.wholeCorpus = false
             }
+            if (Object.keys(fullResults).length === 0) {
+                this.progressPercent = 0
+            }
             this.collocMethod = 'compare';
             this.comparedMetadataValues = this.dateRangeHandler(this.metadataInputStyle, this.dateRange, this.dateType, this.comparedMetadataValues)
             let params = {
@@ -590,8 +587,8 @@ export default {
                 colloc_filter_choice: this.colloc_filter_choice,
                 colloc_within: this.colloc_within,
                 filter_frequency: this.filter_frequency,
-                q_attribute: this.q_attribute,
-                q_attribute_value: this.q_attribute_value,
+                q_attribute: this.q_attribute || "",
+                q_attribute_value: this.q_attribute_value || "",
                 ...this.comparedMetadataValues,
                 start: start.toString(),
             };
@@ -611,7 +608,9 @@ export default {
                     let start = response.data.hits_done;
                     if (resultsLength) {
                         if (moreResults) {
+                            this.progressPercent = Math.trunc((start / resultsLength) * 100)
                             this.getOtherCollocates(response.data.collocates, start);
+                            console.log(this.progressPercent)
                         }
                         else {
                             this.compareSearching = false;
@@ -661,12 +660,13 @@ export default {
             this.mostSimilarDistributions = []
             if (typeof first === 'undefined') {
                 first = true
+                this.progressPercent = 0
             }
             else {
                 first = false
             }
             this.$http
-                .get(`${this.$dbUrl}/reports/collocation.py`, {
+                .post(`${this.$dbUrl}/reports/collocation.py`, {
                     current_collocates: [],
                 }, {
                     params: {
@@ -675,13 +675,14 @@ export default {
                         colloc_within: this.colloc_within,
                         filter_frequency: this.filter_frequency,
                         map_field: field.value,
-                        q_attribute: this.q_attribute,
-                        q_attribute_value: this.q_attribute_value,
+                        q_attribute: this.q_attribute || "",
+                        q_attribute_value: this.q_attribute_value || "",
                         first: first,
                         max_time: 2
                     }
                 }).then((response) => {
                     if (response.data.more_results) {
+                        this.progressPercent = Math.trunc((response.data.hits_done / response.data.results_length) * 100)
                         this.similarCollocDistributions(field, response.data.hits_done, first);
                     } else {
                         this.getMostSimilarCollocDistribution(response.data.file_path);
@@ -692,6 +693,7 @@ export default {
 
         },
         getMostSimilarCollocDistribution(filePath) {
+            this.progressPercent = 0
             this.similarSearchProgress = this.$t("collocation.similarCollocCompareMessage")
             this.$http.post(`${this.$dbUrl}/scripts/get_similar_collocate_distributions.py`, {
                 collocates: this.collocateCounts,
@@ -894,6 +896,19 @@ input:focus::placeholder {
     background: $link-color;
     color: #fff;
 }
+
+.spinner-container {
+    position: relative;
+}
+
+.spinner-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: .75rem;
+    color: $link-color;
+}
 </style>
 <!-- Not scoped to apply to child -->
 <style>
diff --git a/www/app/src/components/ProgressSpinner.vue b/www/app/src/components/ProgressSpinner.vue
new file mode 100644
index 00000000..1e2afa44
--- /dev/null
+++ b/www/app/src/components/ProgressSpinner.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="spinner-container d-inline-block px-1">
+        <div class="spinner-border text-secondary" role="status"
+            :class="{ 'spinner-border-sm': sm, 'spinner-large': lg }"><span class="visually-hidden">{{
+                $t("common.loading") }}...</span>
+        </div>
+        <div class="spinner-text" v-if="progress > 0" :class="{ 'spinner-text-large': lg }">
+            {{ progress }}%
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'ProgressSpinner',
+    props: {
+        progress: {
+            default: 0
+        },
+        sm: {
+            type: Boolean,
+            default: false
+        },
+        lg: {
+            type: Boolean,
+            default: false
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/styles/theme.module.scss";
+
+.spinner-container {
+    position: relative;
+}
+
+.spinner-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: .75rem;
+    color: $link-color;
+}
+
+.spinner-text-large {
+    font-size: 1.25rem;
+}
+
+.spinner-large {
+    width: 4rem;
+    height: 4rem;
+    border-width: .25em;
+}
+</style>
\ No newline at end of file
diff --git a/www/app/src/components/ResultsSummary.vue b/www/app/src/components/ResultsSummary.vue
index 8d351828..7adf9ca4 100644
--- a/www/app/src/components/ResultsSummary.vue
+++ b/www/app/src/components/ResultsSummary.vue
@@ -3,8 +3,9 @@
         <div class="card shadow-sm px-3 py-2">
             <div id="initial_report">
                 <div id="description">
-                    <button type="button" class="btn btn-secondary btn-sm" style="margin-top: -0.5rem; margin-right: -1rem"
-                        id="export-results" data-bs-toggle="modal" data-bs-target="#export-modal">
+                    <button type="button" class="btn btn-secondary btn-sm"
+                        style="margin-top: -0.5rem; margin-right: -1rem" id="export-results" data-bs-toggle="modal"
+                        data-bs-target="#export-modal">
                         {{ $t("resultsSummary.exportResults") }}
                     </button>
                     <div class="modal fade" tabindex="-1" id="export-modal" title="Export Results">
@@ -14,42 +15,35 @@
                     <div v-if="['concordance', 'kwic', 'bibliography'].includes(report)">
                         <div id="result-stats" class="pb-2">
                             {{ $t("resultsSummary.totalOccurrences", { n: resultsLength }) }}
-                            <span v-if="fieldSummary.length > 0">
-                                {{ $t("resultsSummary.spreadAcross") }}
-                                <div class="d-inline-block" style="position: relative" v-if="!hitlistStatsDone">
-                                    <div class="spinner-border text-secondary" role="status" style="
-                                            position: absolute;
-                                            width: 2rem;
-                                            height: 2rem;
-                                            z-index: 50;
-                                            bottom: -0.75rem;
-                                        ">
-                                        <span class="visually-hidden">{{ $t("common.loading") }}...</span>
-                                    </div>
-                                </div>
-                                <span v-if="hitlistStatsDone">
-                                    <span v-for="(stat, statIndex) in statsDescription" :key="stat.field">
+                            <span class="d-inline-flex" style=" align-items: center;" v-if="fieldSummary.length > 0">
+                                <span>{{ $t("resultsSummary.spreadAcross") }}&nbsp;</span>
+                                <progress-spinner progress="0" :sm="true" v-if="!hitlistStatsDone" />
+                                <span v-else>
+                                    <span v-for="( stat, statIndex ) in  statsDescription " :key="stat.field">
                                         <router-link :to="`/aggregation?${stat.link}&group_by=${stat.field}`"
-                                            class="stat-link" v-if="stat.link.length > 0">{{ stat.count }} {{ stat.label
-                                            }}(s)</router-link>
+                                            class="stat-link" v-if="stat.link.length > 0">{{ stat.count }} {{
+                            stat.label
+                        }}(s)</router-link>
                                         <span v-else>{{ stat.count }} {{ stat.label }}(s)</span>
-                                        <span v-if="statIndex != statsDescription.length - 1">&nbsp;{{ $t("common.and")
-                                        }}&nbsp;</span>
+                                        <span v-if="statIndex != statsDescription.length - 1">&nbsp;{{
+                            $t("common.and")
+                        }}&nbsp;</span>
                                     </span>
                                 </span>
                             </span>
                         </div>
                         <div id="search-hits">
                             <b v-if="resultsLength > 0">{{
-                                $t("resultsSummary.displayingHits", {
-                                    start: descriptionStart,
-                                    end: descriptionEnd,
-                                    total: resultsLength,
-                                })
-                            }}</b>
+                            $t("resultsSummary.displayingHits", {
+                                start: descriptionStart,
+                                end: descriptionEnd,
+                                total: resultsLength,
+                            })
+                        }}</b>
                             <b v-else>{{ $t("resultsSummary.noResults") }}</b>
                             <button type="button" class="btn rounded-pill btn-outline-secondary btn-sm ms-1"
-                                style="margin-top: -0.05rem" data-bs-toggle="modal" data-bs-target="#results-bibliography">
+                                style="margin-top: -0.05rem" data-bs-toggle="modal"
+                                data-bs-target="#results-bibliography">
                                 {{ $t("resultsSummary.fromTheseTitles") }}
                             </button>
                         </div>
@@ -60,12 +54,12 @@
                     <div v-if="report == 'aggregation' && groupByLabel">
                         <div id="result-stats" class="pb-2" v-if="resultsLength > 0">
                             {{
-                                $t("resultsSummary.groupByOccurrences", {
-                                    total: resultsLength,
-                                    n: groupLength,
-                                    label: groupByLabel.toLowerCase(),
-                                })
-                            }}
+                            $t("resultsSummary.groupByOccurrences", {
+                                total: resultsLength,
+                                n: groupLength,
+                                label: groupByLabel.toLowerCase(),
+                            })
+                        }}
                         </div>
                         <div id="result-stats" class="pb-2" v-else>
                             <b>{{ $t("resultsSummary.noResults") }}</b>
@@ -82,10 +76,12 @@
                         <div v-if="report == 'collocation'">
                             <span>
                                 <span tooltip tooltip-title="Click to display filtered words">
-                                    <a href @click="toggleFilterList($event)" v-if="colloc_filter_choice === 'frequency'">{{
-                                        $t("resultsSummary.commonWords", { n: filter_frequency }) }}</a>
-                                    <a href @click="toggleFilterList($event)" v-if="colloc_filter_choice === 'stopwords'">{{
-                                        $t("resultsSummary.commonStopwords") }}</a>
+                                    <a href @click="toggleFilterList($event)"
+                                        v-if="colloc_filter_choice === 'frequency'">{{
+                            $t("resultsSummary.commonWords", { n: filter_frequency }) }}</a>
+                                    <a href @click="toggleFilterList($event)"
+                                        v-if="colloc_filter_choice === 'stopwords'">{{
+                            $t("resultsSummary.commonStopwords") }}</a>
                                     {{ $t("resultsSummary.filtered") }}.
                                 </span>
                             </span>
@@ -95,9 +91,9 @@
                                     &times;
                                 </button>
                                 <div class="row mt-4">
-                                    <div class="col" v-for="wordGroup in splitFilterList" :key="wordGroup[0]">
+                                    <div class="col" v-for=" wordGroup  in  splitFilterList " :key="wordGroup[0]">
                                         <div class="list-group list-group-flush">
-                                            <div class="list-group-item" v-for="word in wordGroup" :key="word">
+                                            <div class="list-group-item" v-for=" word  in  wordGroup " :key="word">
                                                 {{ word }}
                                             </div>
                                         </div>
@@ -109,7 +105,8 @@
                 </div>
             </div>
         </div>
-        <div class="row d-none d-sm-block mt-4 mb-3" id="act-on-report" v-if="report == 'concordance' || report == 'kwic'">
+        <div class="row d-none d-sm-block mt-4 mb-3" id="act-on-report"
+            v-if="report == 'concordance' || report == 'kwic'">
             <div class="col col-sm-7 col-lg-8" v-if="['concordance', 'kwic'].includes(report)">
                 <div class="btn-group" role="group" id="report_switch">
                     <button type="button" class="btn btn-secondary" :class="{ active: report === 'concordance' }"
@@ -132,6 +129,7 @@
 import searchArguments from "./SearchArguments";
 import ResultsBibliography from "./ResultsBibliography";
 import ExportResults from "./ExportResults";
+import ProgressSpinner from "./ProgressSpinner";
 import { Modal } from "bootstrap";
 
 import { mapFields } from "vuex-map-fields";
@@ -142,6 +140,7 @@ export default {
         searchArguments,
         ResultsBibliography,
         ExportResults,
+        ProgressSpinner
     },
     props: ["description", "runningTotal", "filterList", "groupLength"],
     computed: {
diff --git a/www/app/src/locales/en.json b/www/app/src/locales/en.json
index 09160e2c..08453658 100644
--- a/www/app/src/locales/en.json
+++ b/www/app/src/locales/en.json
@@ -117,7 +117,7 @@
         "topSimilarUses": "Most similar uses",
         "topDissimilarUses": "Most dissimilar uses",
         "similarToField": "Find most similar/dissimilar usages from the following field",
-        "timeSeries": "Magnitude of change over time",
+        "timeSeries": "Change over time",
         "searchEvolution": "Search evolution"
     },
     "concordance": {
diff --git a/www/app/src/locales/fr.json b/www/app/src/locales/fr.json
index 8e0a98b0..77ba363d 100644
--- a/www/app/src/locales/fr.json
+++ b/www/app/src/locales/fr.json
@@ -116,7 +116,7 @@
         "topSimilarUses": "Utilisations les plus similaires",
         "topDissimilarUses": "Utilisations les plus dissimilaires",
         "similarTo": "Trouver l'usage le plus similaire ou différent dans le champ suivant",
-        "timeSeries": "Amplitude du changement dans le temps",
+        "timeSeries": "Changement au fil du temps",
         "searchEvolution": "Recherche l'évolution"
     },
     "concordance": {
diff --git a/www/scripts/get_similar_collocate_distributions.py b/www/scripts/get_similar_collocate_distributions.py
index 74a44746..faf0e1e6 100755
--- a/www/scripts/get_similar_collocate_distributions.py
+++ b/www/scripts/get_similar_collocate_distributions.py
@@ -58,10 +58,10 @@ def get_similar_collocate_distributions(environ, start_response):
 
     first_row = author_word_matrix[0].reshape(1, -1)
     similarities = cosine_similarity(first_row, author_word_matrix[1:])[0]
-    similarity_series = pd.Series(similarities, index=collocations_per_field.keys()).astype(float)
+    similarity_series = pd.Series(similarities, index=collocations_per_field.keys()).astype(float).round(3)
     similarity_series.sort_values(ascending=False, inplace=True)
-    most_similar_distributions = [(k, round(v, 3)) for k, v in similarity_series.items() if v < 1.0][:50]
-    most_dissimilar_distributions = [(k, round(v, 3)) for k, v in similarity_series.iloc[::-1].items() if v < 1.0][:50]
+    most_similar_distributions = [(k, v) for k, v in similarity_series.items() if v < 1.0][:50]
+    most_dissimilar_distributions = [(k, v) for k, v in similarity_series.iloc[::-1].items() if v < 1.0][:50]
     yield orjson.dumps(
         {
             "most_similar_distributions": most_similar_distributions,