merge: hotfix-9.11.2 into master

Author: arildm

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## [9.11.2] – 2025-09-24
+
+### Fixed
+
+- Scroll KWIC container, not whole window, to match column
+- Glitchy buttons for trend, map and JSON
+- Hide sidebar when closing examples tab
+
 ## [9.11.1] – 2025-09-20
 
 ### Fixed
@@ -537,6 +545,7 @@
 - Lots of bug fixes for the sidebar
 
 [unreleased]: https://github.com/spraakbanken/korp-frontend/compare/master...dev
+[9.11.2]: https://github.com/spraakbanken/korp-frontend/releases/tag/v9.11.2
 [9.11.1]: https://github.com/spraakbanken/korp-frontend/releases/tag/v9.11.1
 [9.11.0]: https://github.com/spraakbanken/korp-frontend/releases/tag/v9.11.0
 [9.10.1]: https://github.com/spraakbanken/korp-frontend/releases/tag/v9.10.1

app/markup/about.html

@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h2>Korp version 9.11.1</h2>
+    <h2>Korp version 9.11.2</h2>
     <span ng-click="clickX()" class="close-x">×</span>
 </div>
 

app/scripts/components/kwic/kwic.ts

@@ -10,7 +10,7 @@ import { KwicWordScope } from "./kwic-word"
 import { SelectWordEvent } from "@/statemachine/types"
 import { ApiKwic, Token } from "@/backend/types"
 import { StoreService } from "@/services/store"
-import { QueryParamSort } from "@/backend/types/query"
+import { QueryParamSort, QueryResponse } from "@/backend/types/query"
 import { CorpusTransformed } from "@/settings/config-transformed.types"
 import { JQueryExtended, JQueryStaticExtended } from "@/jquery.types"
 import { loc } from "@/i18n"
@@ -30,6 +30,7 @@ type KwicController = IController & {
     pageEvent: (page: number) => void
     hitsPerPage: number
     params: any
+    response?: QueryResponse
     corpusOrder: string[]
     /** Current page of results. */
     kwicInput: ApiKwic[]
@@ -218,14 +219,16 @@ angular.module("korpApp").component("kwic", {
                     </p>
                 </div>
             </div>
+
             <kwic-pager
                 ng-if="$ctrl.hits"
                 total-hits="$ctrl.hits"
                 current-page="$ctrl.page"
                 page-change="$ctrl.pageEvent(page)"
                 hits-per-page="$ctrl.hitsPerPage"
             ></kwic-pager>
-            <div ng-if="!$ctrl.loading">
+
+            <div ng-if="!$ctrl.loading" class="flex gap-4 justify-end">
                 <select id="download-links" ng-if="$ctrl._settings['enable_backend_kwic_download']"></select>
                 <select
                     id="frontendDownloadLinks"
@@ -242,6 +245,7 @@ angular.module("korpApp").component("kwic", {
                     target="_self"
                     style="display: none;"
                 ></a>
+                <json-button ng-if="$ctrl.response" endpoint="query" data="$ctrl.response"></json-button>
             </div>
         </div>
     `,
@@ -260,6 +264,7 @@ angular.module("korpApp").component("kwic", {
         corpusOrder: "<",
         kwicInput: "<",
         corpusHits: "<",
+        response: "<",
         showSearchOptions: "<",
         onUpdateSearch: "&",
     },
@@ -342,6 +347,10 @@ angular.module("korpApp").component("kwic", {
                 if ("context" in changeObj) $scope.context = !!$ctrl.context
             }
 
+            $ctrl.$onDestroy = () => {
+                statemachine.send("DESELECT_WORD")
+            }
+
             $ctrl.onKwicClick = (event) => {
                 if (!event.target) return
                 const target = event.target as HTMLElement
@@ -541,8 +550,11 @@ angular.module("korpApp").component("kwic", {
                 $ctrl.parallelSelected = []
             }
 
+            /** Scroll KWIC container to center the match column. */
             function centerScrollbar() {
-                $element.find(".match").get(0)?.scrollIntoView({ inline: "center" })
+                // Type assertion needed because `container` is non-standard.
+                const options = { inline: "center", container: "nearest" } as ScrollIntoViewOptions
+                $element.find(".match").get(0)?.scrollIntoView(options)
             }
 
             /** Add offsets to align each linked sentence with its main one */

app/scripts/components/kwic/results-hits.ts

@@ -56,10 +56,10 @@ angular.module("korpApp").component("resultsHits", {
                 hits-per-page="hitsPerPage"
                 params="proxy.params"
                 corpus-order="corpusOrder"
+                response="proxy.response"
                 show-search-options="true"
                 on-update-search="onUpdateSearch()"
             ></kwic>
-            <json-button endpoint="query" data="proxy.response"></json-button>
         </div>
     `,
     bindings: {

app/scripts/components/statistics/results-statistics.ts

@@ -3,7 +3,6 @@ import settings from "@/settings"
 import statsProxyFactory, { StatsProxy } from "@/backend/proxy/stats-proxy"
 import { Dataset, SearchParams } from "@/statistics/statistics.types"
 import { html } from "@/util"
-import "@/components/util/json_button"
 import "@/components/util/korp-error"
 import "./statistics"
 import { processStatisticsResult } from "@/statistics/statistics"
@@ -43,12 +42,12 @@ angular.module("korpApp").component("resultsStatistics", {
             loading="$ctrl.loading"
             on-update-search="onUpdateSearch()"
             params="proxy.params"
+            response="proxy.response"
             row-count="rowCount"
             search-params="searchParams"
             warning="warning"
         ></statistics>
         <korp-error ng-if="error" message="{{error}}"></korp-error>
-        <json-button ng-if="data && !loading && !warning" endpoint="count" data="proxy.response"></json-button>
     `,
     bindings: {
         isActive: "<",
@@ -98,7 +97,6 @@ angular.module("korpApp").component("resultsStatistics", {
 
             s.resetView = () => {
                 $("myGrid").empty()
-                $("#exportStatsSection").show()
                 $("#exportButton").attr({
                     download: null,
                     href: null,

app/scripts/components/statistics/statistics.ts

@@ -6,10 +6,11 @@ import { locObj } from "@/i18n"
 import { expandCqp } from "@/cqp_parser/cqp"
 import "./corpus-distribution-chart"
 import "./reduce-select"
+import "@/components/util/json_button"
 import { RootScope } from "@/root-scope.types"
 import { JQueryExtended } from "@/jquery.types"
 import { AbsRelSeq, Dataset, isTotalRow, Row, SearchParams } from "@/statistics/statistics.types"
-import { CountParams } from "@/backend/types/count"
+import { CountParams, CountResponse } from "@/backend/types/count"
 import { corpusListing, corpusSelection } from "@/corpora/corpus_listing"
 import { AttributeOption } from "@/corpora/corpus-set"
 import { getTimeData } from "@/backend/timedata"
@@ -36,6 +37,7 @@ type StatisticsController = IController & {
     error: boolean
     loading: boolean
     params: CountParams
+    response: CountResponse
     rowCount: number
     searchParams: SearchParams
     warning?: string
@@ -84,37 +86,16 @@ angular.module("korpApp").component("statistics", {
             </div>
 
             <div ng-show="!$ctrl.warning && !$ctrl.aborted">
-                <div class="stats_header">
+                <div class="flex my-2 gap-4">
                     <button
-                        class="btn btn-sm btn-default show-graph-btn"
+                        class="btn btn-sm btn-default"
                         ng-click="$ctrl.onGraphClick()"
                         ng-disabled="$ctrl.loading || !$ctrl.graphEnabled"
                         uib-tooltip="{{'material_warn' | loc:$root.lang}}"
                         tooltip-placement="right"
                         tooltip-enable="!$ctrl.graphEnabled"
                     >
-                        <span class="graph_btn_icon">
-                            <svg
-                                height="24"
-                                version="1.1"
-                                width="33"
-                                xmlns="http://www.w3.org/2000/svg"
-                                style="overflow: hidden; position: relative"
-                            >
-                                <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)">
-                                    Created with Raphaël 2.1.0
-                                </desc>
-                                <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></defs>
-                                <path
-                                    fill="#666666"
-                                    stroke="none"
-                                    d="M3.625,25.062C3.086,24.947000000000003,2.74,24.416,2.855,23.875L2.855,23.875L6.51,6.584L8.777,15.843L10.7,10.655000000000001L14.280999999999999,14.396L18.163999999999998,1.293000000000001L21.098,13.027000000000001L23.058,11.518L28.329,23.258000000000003C28.555,23.762000000000004,28.329,24.353,27.824,24.579000000000004L27.824,24.579000000000004C27.319000000000003,24.806000000000004,26.728,24.579000000000004,26.502000000000002,24.075000000000003L26.502000000000002,24.075000000000003L22.272000000000002,14.647000000000002L19.898000000000003,16.473000000000003L18.002000000000002,8.877000000000002L15.219000000000003,18.270000000000003L11.465000000000003,14.346000000000004L8.386,22.66L6.654999999999999,15.577L4.811999999999999,24.288C4.710999999999999,24.76,4.297,25.082,3.8329999999999993,25.082L3.8329999999999993,25.082C3.765,25.083,3.695,25.076,3.625,25.062L3.625,25.062Z"
-                                    transform="matrix(0.6,0,0,0.6,6.2499,5.275)"
-                                    stroke-width="1.6666666666666667"
-                                    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"
-                                ></path>
-                            </svg>
-                        </span>
+                        <i class="fa-solid fa-chart-line mr-1"></i>
                         {{'show_diagram' | loc:$root.lang}}
                     </button>
                     <div
@@ -131,7 +112,9 @@ angular.module("korpApp").component("statistics", {
                             tooltip-placement="right"
                             tooltip-enable="!$ctrl.mapAttributes.length"
                         >
-                            {{'show_map' | loc:$root.lang}}<span class="caret"></span>
+                            <i class="fa-regular fa-map mr-1"></i>
+                            {{'show_map' | loc:$root.lang}}
+                            <span class="caret"></span>
                         </button>
                         <div uib-dropdown-menu>
                             <h3 class="map-settings-title">{{'select_attribute' | loc:$root.lang}}</h3>
@@ -173,7 +156,6 @@ angular.module("korpApp").component("statistics", {
                             {{'no_row_selected_map' | loc:$root.lang}}
                         </span>
                     </div>
-                    <div id="showBarPlot"></div>
                 </div>
                 <div ng-if="!$ctrl.loading" style="margin-bottom: 5px">
                     {{'total_rows' | loc:$root.lang}} {{$ctrl.data.length - 1 | prettyNumber:$root.lang}}
@@ -186,15 +168,17 @@ angular.module("korpApp").component("statistics", {
                     </span>
                 </div>
                 <div id="myGrid"></div>
-                <div id="exportStatsSection">
-                    <br /><br />
-                    <select id="kindOfFormat">
-                        <option value="csv">{{ 'statstable_exp_csv' | loc:$root.lang }}</option>
-                        <option value="tsv">{{ 'statstable_exp_tsv' | loc:$root.lang }}</option>
-                    </select>
-                    <a id="generateExportButton" ng-click="$ctrl.generateExport()">
-                        <button class="btn btn-sm btn-default">{{'statstable_gen_export' | loc:$root.lang}}</button>
-                    </a>
+                <div ng-show="$ctrl.data && !$ctrl.loading && !$ctrl.warning" class="mt-4 flex gap-4 justify-end">
+                    <div class="flex">
+                        <select id="kindOfFormat">
+                            <option value="csv">{{ 'statstable_exp_csv' | loc:$root.lang }}</option>
+                            <option value="tsv">{{ 'statstable_exp_tsv' | loc:$root.lang }}</option>
+                        </select>
+                        <a id="generateExportButton" ng-click="$ctrl.generateExport()">
+                            <button class="btn btn-sm btn-default">{{'statstable_gen_export' | loc:$root.lang}}</button>
+                        </a>
+                    </div>
+                    <json-button endpoint="count" data="$ctrl.response"></json-button>
                 </div>
             </div>
         </div>
@@ -206,6 +190,7 @@ angular.module("korpApp").component("statistics", {
         loading: "<",
         onUpdateSearch: "&",
         params: "<",
+        response: "<",
         rowCount: "<",
         searchParams: "<",
         warning: "<",

app/scripts/components/util/json_button.ts

@@ -12,7 +12,7 @@ type JsonButtonScope = IScope & {
 
 angular.module("korpApp").component("jsonButton", {
     template: html`
-        <button ng-click="openJson()" class="btn btn-default btn-sm float-right mx-2">
+        <button ng-click="openJson()" class="btn btn-default btn-sm">
             <i class="fa-solid fa-download mr-1"></i>
             JSON
         </button>

app/scripts/components/wordpicture/results-word-picture.ts

@@ -74,7 +74,13 @@ angular.module("korpApp").component("resultsWordPicture", {
             <p>{{'word_pic_result_description' | loc:$root.lang}}</p>
         </help-box>
 
-        <json-button ng-if="!warning && !error" endpoint="relations" data="proxy.response"></json-button>
+        <div class="mt-4 flex gap-4 justify-end">
+            <json-button
+                ng-if="!$ctrl.loading && data && !warning && !error"
+                endpoint="relations"
+                data="proxy.response"
+            ></json-button>
+        </div>
     `,
     bindings: {
         isActive: "<",

app/styles/styles.scss

@@ -682,14 +682,6 @@ table {
     background-color: #ffddd8;
 }
 
-#download-links {
-    float: right;
-}
-
-#frontendDownloadLinks {
-    float: right;
-}
-
 .download_link {
     img {
         border: 0px;
@@ -1204,10 +1196,6 @@ slider {
     }
 }
 
-#showBarPlot {
-    display: none;
-}
-
 .korp-warning {
     max-width: 500px;
     @extend .bs-callout;
@@ -1307,14 +1295,6 @@ slider {
     margin-left: 4px;
 }
 
-.graph_btn_icon {
-    svg {
-        margin-top: -6px;
-        margin-bottom: -6px;
-        margin-left: -8px;
-    }
-}
-
 .chart_container {
     position: relative;
     .preloader {
@@ -1346,14 +1326,6 @@ slider {
     min-height: 430px;
 }
 
-.stats_header {
-    margin-bottom: 1em;
-    > * {
-        display: inline-block;
-        vertical-align: top;
-    }
-}
-
 .rickshaw_graph {
     .empty_area {
         background-color: #999;
@@ -1450,9 +1422,6 @@ line.tick {
 #myGrid * {
     box-sizing: content-box;
 }
-.loading .exportStatsSection {
-    display: none;
-}
 
 #myGrid .parameter-column {
     background-color: #f1f7ff;
@@ -1804,10 +1773,6 @@ line.tick {
 }
 
 .map-settings-container {
-    margin-left: 20px;
-    .caret {
-        margin-left: 10px;
-    }
     ul {
         margin: 0;
         padding: 2px;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "korp-frontend",
-    "version": "9.11.1",
+    "version": "9.11.2",
     "dependencies": {
         "@fontsource/source-sans-pro": "^5.1.0",
         "@fortawesome/fontawesome-free": "6.2.1",