From 76d78a46e90aa94277b5d99af5d51936d87023ba Mon Sep 17 00:00:00 2001 From: Arild Matsson Date: Wed, 15 Jan 2025 15:08:19 +0100 Subject: [PATCH] feat: show backend error message fixes #97 --- CHANGELOG.md | 1 + app/scripts/components/korp-error.ts | 15 +++++++++++--- app/scripts/components/results.ts | 14 ++++++------- app/scripts/components/trend-diagram.ts | 20 +++++++------------ .../controllers/comparison_controller.ts | 7 ++++--- app/scripts/controllers/example_controller.ts | 4 ++-- app/scripts/controllers/kwic_controller.ts | 6 +++--- app/scripts/controllers/map_controller.ts | 8 ++++---- .../controllers/statistics_controller.ts | 7 +++---- .../controllers/word_picture_controller.ts | 9 ++++----- app/styles/styles.scss | 12 ----------- app/translations/locale-eng.json | 1 + app/translations/locale-swe.json | 3 ++- 13 files changed, 50 insertions(+), 57 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77236853..9a5bf4de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Added - Sidebar: Collapse and expand attribute sections [#199](https://github.com/spraakbanken/korp-frontend/issues/199) +- Error messages from backend show up in the GUI [#97](https://github.com/spraakbanken/korp-frontend/issues/97) ### Changed diff --git a/app/scripts/components/korp-error.ts b/app/scripts/components/korp-error.ts index 1f31536a..5ee05e88 100644 --- a/app/scripts/components/korp-error.ts +++ b/app/scripts/components/korp-error.ts @@ -5,9 +5,18 @@ import korpFailImg from "../../img/korp_fail.svg" angular.module("korpApp").component("korpError", { template: html` -
- {{'fail_alt' | loc:$root.lang}} -
{{'fail_text' | loc:$root.lang}}
+
+ {{'fail_alt' | loc:$root.lang}} +
+
{{'fail_text' | loc:$root.lang}}
+ 
+{{$ctrl.message}}
+
{{'fail_contact' | loc:$root.lang}}
+
`, + bindings: { + message: "@", + }, }) diff --git a/app/scripts/components/results.ts b/app/scripts/components/results.ts index 8ed0b2c7..07bce9bd 100644 --- a/app/scripts/components/results.ts +++ b/app/scripts/components/results.ts @@ -45,7 +45,7 @@ angular.module("korpApp").component("results", { >
- + - +
- + - +
- +

{{'compare_distinctive' | loc:$root.lang}} {{cmp1.label}}

    @@ -222,7 +222,7 @@ angular.module("korpApp").component("results", {
    - +
    - +
    diff --git a/app/scripts/components/trend-diagram.ts b/app/scripts/components/trend-diagram.ts index 36f0951e..d826300b 100644 --- a/app/scripts/components/trend-diagram.ts +++ b/app/scripts/components/trend-diagram.ts @@ -27,7 +27,7 @@ type TrendDiagramController = IController & { proxy: GraphProxy $result: JQLite mode: "line" | "bar" | "table" - error: boolean + error?: string } type Series = { @@ -75,7 +75,7 @@ const PALETTE = [ angular.module("korpApp").component("trendDiagram", { template: html` - +
    @@ -142,7 +142,6 @@ angular.module("korpApp").component("trendDiagram", { $ctrl.proxy = graphProxyFactory.create() $ctrl.$result = $element.find(".graph_tab") $ctrl.mode = "line" - $ctrl.error = false $ctrl.$onInit = () => { const interval = $ctrl.data.corpusListing.getMomentInterval() @@ -566,7 +565,7 @@ angular.module("korpApp").component("trendDiagram", { function renderGraph( Rickshaw: any, - data: Response, + data: CountTimeResponse, cqp: string, currentZoom: Level, showTotal?: boolean @@ -578,11 +577,6 @@ angular.module("korpApp").component("trendDiagram", { $(window).trigger("resize") } - if ("ERROR" in data) { - $ctrl.error = true - return - } - if ($ctrl.graph) { series = makeSeries(Rickshaw, data, cqp, currentZoom) spliceData(series) @@ -785,7 +779,7 @@ angular.module("korpApp").component("trendDiagram", { ) { const rickshawPromise = import(/* webpackChunkName: "rickshaw" */ "rickshaw") $ctrl.localUpdateLoading(true) - $ctrl.error = false + $ctrl.error = undefined const currentZoom = $ctrl.zoom const reqPromise = $ctrl.proxy.makeRequest( cqp, @@ -799,11 +793,11 @@ angular.module("korpApp").component("trendDiagram", { try { const [Rickshaw, graphData] = await Promise.all([rickshawPromise, reqPromise]) $timeout(() => renderGraph(Rickshaw, graphData, cqp, currentZoom, showTotal)) - } catch (e) { + } catch (error) { $timeout(() => { - console.error("graph crash", e) + console.error(error) + $ctrl.error = error $ctrl.localUpdateLoading(false) - $ctrl.error = true }) } } diff --git a/app/scripts/controllers/comparison_controller.ts b/app/scripts/controllers/comparison_controller.ts index b43a6f0c..97ca4a8e 100644 --- a/app/scripts/controllers/comparison_controller.ts +++ b/app/scripts/controllers/comparison_controller.ts @@ -13,7 +13,7 @@ type CompareCtrlScope = TabHashScope & { closeTab: (index: number, e: Event) => void cmp1: SavedSearch cmp2: SavedSearch - error: boolean + error?: string loading: boolean max: number promise: CompareTab @@ -160,9 +160,10 @@ angular.module("korpApp").directive("compareCtrl", () => ({ return $rootScope.kwicTabs.push({ queryParams: opts }) } }, - function () { + function (error) { s.loading = false - s.error = true + s.error = error + s.$digest() } ) }, diff --git a/app/scripts/controllers/example_controller.ts b/app/scripts/controllers/example_controller.ts index 897f114f..f796fddb 100644 --- a/app/scripts/controllers/example_controller.ts +++ b/app/scripts/controllers/example_controller.ts @@ -46,7 +46,7 @@ class ExampleCtrl extends KwicCtrl { s.hits = undefined s.hitsInProgress = undefined s.page = 0 - s.error = false + s.error = undefined s.hitsPictureData = null s.kwic = undefined s.corpusHits = undefined @@ -136,7 +136,7 @@ class ExampleCtrl extends KwicCtrl { if (error.name == "AbortError") return console.error(error) // TODO Show error - $timeout(() => (s.error = true)) + $timeout(() => (s.error = error)) }) .finally(() => $timeout(() => (s.loading = false))) } diff --git a/app/scripts/controllers/kwic_controller.ts b/app/scripts/controllers/kwic_controller.ts index 4aac14d1..1c1505d4 100644 --- a/app/scripts/controllers/kwic_controller.ts +++ b/app/scripts/controllers/kwic_controller.ts @@ -21,7 +21,7 @@ export type KwicCtrlScope = TabHashScope & { countCorpora?: () => number | null corpusOrder?: string[] cqp?: string - error?: boolean + error?: string getProxy: () => KwicProxy /** Number of total search hits, updated when a search is completed. */ hits?: number @@ -200,7 +200,7 @@ export class KwicCtrl implements IController { s.progress = 0 s.loading = true s.aborted = false - s.error = false + s.error = undefined const ajaxParams = s.buildQueryOptions(isPaging) @@ -222,7 +222,7 @@ export class KwicCtrl implements IController { console.error(error) // TODO Show error $timeout(() => { - s.error = true + s.error = error s.loading = false }) }) diff --git a/app/scripts/controllers/map_controller.ts b/app/scripts/controllers/map_controller.ts index 9f487fab..aac99035 100644 --- a/app/scripts/controllers/map_controller.ts +++ b/app/scripts/controllers/map_controller.ts @@ -12,7 +12,7 @@ import { TabHashScope } from "@/directives/tab-hash" type MapControllerScope = TabHashScope & { center: AppSettings["map_center"] - error: boolean + error?: string selectedGroups: string[] markerGroups?: Record loading: boolean @@ -81,11 +81,11 @@ angular.module("korpApp").directive("mapCtrl", [ $scope.selectedGroups = _.keys($scope.markerGroups) }) }, - (err) => { - console.error("Map data parsing failed:", err) + (error) => { + console.error("Map data parsing failed:", error) $scope.$apply(($scope: MapControllerScope) => { $scope.loading = false - $scope.error = true + $scope.error = error }) } ) diff --git a/app/scripts/controllers/statistics_controller.ts b/app/scripts/controllers/statistics_controller.ts index b09aead6..9aa3aeda 100644 --- a/app/scripts/controllers/statistics_controller.ts +++ b/app/scripts/controllers/statistics_controller.ts @@ -18,7 +18,7 @@ type StatsResultCtrlScope = TabHashScope & { columns: SlickgridColumn[] countCorpora: () => number | null data: Dataset - error: boolean + error?: string hasResult: boolean inOrder: boolean loading: boolean @@ -52,7 +52,6 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({ ) => { const s = $scope s.loading = false - s.error = false s.progress = 0 s.proxy = statsProxyFactory.create() @@ -91,7 +90,7 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({ s.onProgress = (progressObj) => (s.progress = Math.round(progressObj["percent"])) s.makeRequest = (cqp) => { - s.error = false + s.error = undefined const grid = document.getElementById("myGrid") if (!grid) throw new Error("myGrid element not found") grid.innerHTML = "" @@ -130,7 +129,7 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({ // TODO Show error $timeout(() => { s.resetView() - s.error = true + s.error = error s.loading = false }) }) diff --git a/app/scripts/controllers/word_picture_controller.ts b/app/scripts/controllers/word_picture_controller.ts index 3841723e..6d81a93a 100644 --- a/app/scripts/controllers/word_picture_controller.ts +++ b/app/scripts/controllers/word_picture_controller.ts @@ -6,7 +6,7 @@ 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, Response } from "@/backend/types" +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" @@ -18,7 +18,7 @@ type WordpicCtrlScope = TabHashScope & { countCorpora: () => number | null data?: TableDrawData[] drawTables: (tables: [string, string][], data: ApiRelation[]) => void - error: boolean + error?: string hasData: boolean hitSettings: `${number}`[] loading: boolean @@ -67,7 +67,6 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({ const s = $scope s.proxy = lemgramProxyFactory.create() - s.error = false s.loading = false s.progress = 0 s.wordPic = $location.search().word_pic != null @@ -99,7 +98,7 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({ s.data = undefined s.aborted = false s.noHits = false - s.error = false + s.error = undefined } s.onProgress = (progressObj) => (s.progress = Math.round(progressObj["percent"])) @@ -138,7 +137,7 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({ console.error(error) // TODO Show error $timeout(() => { - s.error = true + s.error = error s.loading = false }) }) diff --git a/app/styles/styles.scss b/app/styles/styles.scss index ab19a6ae..6493dc5e 100644 --- a/app/styles/styles.scss +++ b/app/styles/styles.scss @@ -1045,18 +1045,6 @@ a { z-index: 999; } -.korp_fail { - height: 146px; - width: 290px; -} - -.fail_text { - margin: 1em 0 0 1em; - vertical-align: top; - font-family: Garamond,Cochin,Serif; - font-size: 1.3em; -} - .arg_selects.word { color: #222222; } diff --git a/app/translations/locale-eng.json b/app/translations/locale-eng.json index b7dfdab2..c7d4010b 100644 --- a/app/translations/locale-eng.json +++ b/app/translations/locale-eng.json @@ -49,6 +49,7 @@ "warning_body": "The dependency relations illustrated herein are the result of automated parsing.", "fail_text": "An error has occurred.", "fail_alt": "Silhouette of a knocked-out raven", + "fail_contact": "If you have questions, or you want to report a bug, please contact sb-info@svenska.gu.se.", "corpus": "Corpus", "search_for": "Search for ", "show_more": "Show more", diff --git a/app/translations/locale-swe.json b/app/translations/locale-swe.json index 1e3ab0c2..910c8fa4 100644 --- a/app/translations/locale-swe.json +++ b/app/translations/locale-swe.json @@ -47,8 +47,9 @@ "about_contributors": "Med bidrag från", "warning_header": "Vänligen uppmärksamma", "warning_body": "Relationerna mellan orden är ett resultat av automatisk parsning. ", - "fail_text": "Ett fel har uppstått. ", + "fail_text": "Ett fel har uppstått.", "fail_alt": "Silhuett av en kollapsad korp", + "fail_contact": "Om du har frågor eller vill rapportera en bugg, kontakta gärna sb-info@svenska.gu.se.", "corpus": "Korpus", "search_for": "Sök efter ", "show_more": "Visa fler",