feat: smooth progress bars

spraakbanken · Jan 21, 2025 · e3f01ad · e3f01ad
1 parent f836850
commit e3f01ad
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Removed `$rootScope.searchtabs()`, use `$location.search()` to get/set `search_tab` instead
 - Removed `$rootScope._settings`, use `import settings from "@/settings"` instead
 - Removed `$rootScope.openErrorModal()`, use `$uibModal` directly instead
+- Result tab progress bars grow smoothly and are shown even when only one corpus is selected
 
 ### Fixed
 

diff --git a/app/scripts/components/results.ts b/app/scripts/components/results.ts
@@ -43,10 +43,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab kwic-ctrl index="0" select="onentry()" deselect="onexit()">
                         <uib-tab-heading class="flex gap-2 items-center" ng-class="{loading: loading}">
                             KWIC
-                            <tab-preloader
-                                ng-if="loading"
-                                progress="countCorpora() > 1 ? progress : undefined"
-                            ></tab-preloader>
+                            <tab-preloader ng-if="loading" progress="progress"></tab-preloader>
                         </uib-tab-heading>
                         <div class="results-kwic" ng-class="{reading_mode : reading_mode, loading: loading}">
                             <korp-error ng-if="error" message="{{error}}"></korp-error>
@@ -75,10 +72,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab stats-result-ctrl ng-if="showStatisticsTab" select="onentry()" index="2">
                         <uib-tab-heading class="flex gap-2 items-center" ng-class="{loading: loading}">
                             {{'statistics' | loc:$root.lang}}
-                            <tab-preloader
-                                ng-if="loading"
-                                progress="countCorpora() > 1 ? progress : undefined"
-                            ></tab-preloader>
+                            <tab-preloader ng-if="loading" progress="progress"></tab-preloader>
                         </uib-tab-heading>
                         <korp-error ng-if="error" message="{{error}}"></korp-error>
                         <statistics
@@ -105,10 +99,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab ng-if="showWordpicTab" wordpic-ctrl index="3">
                         <uib-tab-heading class="flex gap-2 items-center" ng-class="{loading: loading}">
                             {{'word_picture' | loc:$root.lang}}
-                            <tab-preloader
-                                ng-if="loading"
-                                progress="countCorpora() > 1 ? progress : undefined"
-                            ></tab-preloader>
+                            <tab-preloader ng-if="loading" progress="progress"></tab-preloader>
                         </uib-tab-heading>
                         <div ng-if="!error">
                             <word-picture

diff --git a/app/scripts/components/tab-preloader.ts b/app/scripts/components/tab-preloader.ts
@@ -6,8 +6,8 @@ import { html } from "@/util"
 angular.module("korpApp").component("tabPreloader", {
     template: html`<div>
         <div
-            ng-if="$ctrl.progress != null"
-            class="h-0.5 bg-current absolute bottom-0 left-0"
+            ng-if="$ctrl.progress !== null"
+            class="h-0.5 bg-current absolute bottom-0 left-0 transition-all"
             style="width: {{$ctrl.progress || 0}}%"
         ></div>
         <i class="fa-solid fa-spinner motion-safe:animate-spin-slow"></i>

diff --git a/app/scripts/controllers/kwic_controller.ts b/app/scripts/controllers/kwic_controller.ts
@@ -18,7 +18,6 @@ export type KwicCtrlScope = TabHashScope & {
     aborted?: boolean
     buildQueryOptions: (isPaging: boolean) => QueryParams
     corpusHits?: Record<string, number>
-    countCorpora?: () => number | null
     corpusOrder?: string[]
     cqp?: string
     error?: string
@@ -262,10 +261,6 @@ export class KwicCtrl implements IController {
         s.onexit = () => {
             s.active = false
         }
-
-        s.countCorpora = () => {
-            return s.proxy.prevParams?.corpus ? s.proxy.prevParams.corpus.split(",").length : null
-        }
     }
 }
 KwicCtrl.initClass()
diff --git a/app/scripts/controllers/statistics_controller.ts b/app/scripts/controllers/statistics_controller.ts
@@ -5,7 +5,6 @@ import settings from "@/settings"
 import statsProxyFactory, { StatsProxy } from "@/backend/stats-proxy"
 import { LocationService } from "@/urlparams"
 import { RootScope } from "@/root-scope.types"
-import { ProgressReport } from "@/backend/types"
 import { Dataset, SearchParams, SlickgridColumn } from "@/statistics.types"
 import { SearchesService } from "@/services/searches"
 import "@/services/searches"
@@ -16,7 +15,6 @@ type StatsResultCtrlScope = TabHashScope & {
     aborted: boolean
     activate: () => void
     columns: SlickgridColumn[]
-    countCorpora: () => number | null
     data: Dataset
     error?: string
     hasResult: boolean
@@ -29,7 +27,6 @@ type StatsResultCtrlScope = TabHashScope & {
     showStatistics: boolean
     makeRequest: (cqp: string) => void
     onentry: () => void
-    onProgress: (progressObj: ProgressReport<"count">, isPaging?: boolean) => void
     renderResult: (columns: SlickgridColumn[], data: Dataset) => void
     resetView: () => void
     resultError: (err: any) => void
@@ -87,8 +84,6 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({
                 s.progress = 0
             }
 
-            s.onProgress = (progressObj) => (s.progress = Math.round(progressObj["percent"]))
-
             s.makeRequest = (cqp) => {
                 s.error = undefined
                 const grid = document.getElementById("myGrid")
@@ -112,7 +107,7 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({
 
                 s.loading = true
                 s.proxy
-                    .makeRequest(cqp, (progressObj) => $timeout(() => s.onProgress(progressObj)))
+                    .makeRequest(cqp, (progressObj) => $timeout(() => (s.progress = progressObj.percent)))
                     .then((result) =>
                         $timeout(() => {
                             const [data, columns, searchParams] = result
@@ -175,10 +170,6 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({
                 s.showStatistics = true
                 s.makeRequest(cqp)
             }
-
-            s.countCorpora = () => {
-                return s.proxy.prevParams && s.proxy.prevParams.corpus.split(",").length
-            }
         },
     ],
 }))
diff --git a/app/scripts/controllers/word_picture_controller.ts b/app/scripts/controllers/word_picture_controller.ts
@@ -6,7 +6,6 @@ import lemgramProxyFactory, { LemgramProxy } from "@/backend/lemgram-proxy"
 import { isLemgram, lemgramToString, unregescape } from "@/util"
 import { RootScope } from "@/root-scope.types"
 import { LocationService } from "@/urlparams"
-import { ProgressReport } from "@/backend/types"
 import { WordPictureDefItem } from "@/settings/app-settings.types"
 import { TabHashScope } from "@/directives/tab-hash"
 import { ApiRelation, RelationsResponse } from "@/backend/types/relations"
@@ -15,7 +14,6 @@ type WordpicCtrlScope = TabHashScope & {
     $root: RootScope
     aborted: boolean
     activate: () => void
-    countCorpora: () => number | null
     data?: TableDrawData[]
     drawTables: (tables: [string, string][], data: ApiRelation[]) => void
     error?: string
@@ -24,7 +22,6 @@ type WordpicCtrlScope = TabHashScope & {
     loading: boolean
     makeRequest: () => void
     noHits: boolean
-    onProgress: (progressObj: ProgressReport<"relations">) => void
     progress: number
     proxy: LemgramProxy
     renderResult: (data: RelationsResponse, word: string) => void
@@ -101,8 +98,6 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({
                 s.error = undefined
             }
 
-            s.onProgress = (progressObj) => (s.progress = Math.round(progressObj["percent"]))
-
             s.makeRequest = () => {
                 const search = $rootScope.activeSearch
                 if (!s.wordPic || !search || (search.type !== "lemgram" && search.val.includes(" "))) {
@@ -124,7 +119,7 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({
                 s.progress = 0
                 s.loading = true
                 s.proxy
-                    .makeRequest(word, type, (progressObj) => $timeout(() => s.onProgress(progressObj)))
+                    .makeRequest(word, type, (progressObj) => $timeout(() => (s.progress = progressObj.percent)))
                     .then((data) =>
                         $timeout(() => {
                             s.loading = false
@@ -294,10 +289,6 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({
                 prepareScope(res)
             }
 
-            s.countCorpora = () => {
-                return s.proxy.prevParams ? s.proxy.prevParams.corpus.split(",").length : null
-            }
-
             s.hitSettings = ["15"]
             s.settings = { showNumberOfHits: "15" }