feat: download Word Picture results as CSV

Author: arildm

CHANGELOG.md

@@ -2,7 +2,11 @@
 
 ## [Unreleased]
 
-## Fixed
+### Added
+
+- Download Word Picture results as CSV [#200](https://github.com/spraakbanken/korp-frontend/issues/200)
+
+### Fixed
 
 - KWIC download sometimes fails because row.structs is optional [#492](https://github.com/spraakbanken/korp-frontend/issues/492)
 

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

@@ -9,6 +9,7 @@ import "@/components/util/json_button"
 import "@/components/util/korp-error"
 import "@/components/wordpicture/word-picture"
 import { StoreService } from "@/services/store"
+import { CsvType, downloadCsvFile } from "@/csv"
 
 type ResultsWordPictureController = IController & {
     isActive: boolean
@@ -19,6 +20,7 @@ type ResultsWordPictureController = IController & {
 type ResultsWordPictureScope = IScope & {
     activated: boolean
     data?: WordPicture
+    downloadOption: CsvType | ""
     error?: string
     limit: string // Number as string to work with <select ng-model>
     limitOptions: number[]
@@ -75,6 +77,12 @@ angular.module("korpApp").component("resultsWordPicture", {
         </help-box>
 
         <div class="mt-4 flex gap-4 justify-end">
+            <select ng-show="!$ctrl.loading && data && !warning && !error" ng-model="downloadOption">
+                <option value="">{{ "download" | loc:$root.lang }}</option>
+                <option value="comma">{{ "csv_comma" | loc:$root.lang }}</option>
+                <option value="tab">{{ "csv_tab" | loc:$root.lang }}</option>
+            </select>
+
             <json-button
                 ng-if="!$ctrl.loading && data && !warning && !error"
                 endpoint="relations"
@@ -94,6 +102,7 @@ angular.module("korpApp").component("resultsWordPicture", {
         function ($scope: ResultsWordPictureScope, $timeout: ITimeoutService, store: StoreService) {
             const $ctrl = this as ResultsWordPictureController
             $scope.activated = false
+            $scope.downloadOption = ""
             $scope.limit = String(LIMITS[0])
             $scope.limitOptions = [...LIMITS]
             $scope.proxy = new RelationsProxy()
@@ -185,6 +194,19 @@ angular.module("korpApp").component("resultsWordPicture", {
                     })
                     .finally(() => $timeout(() => $ctrl.setProgress(false, 0)))
             }
+
+            // Create and download CSV file when the download selector is used
+            $scope.$watch("downloadOption", () => {
+                // Skip if empty (at init or if the label option is selected)
+                if (!$scope.downloadOption) return
+
+                if (!$scope.data) throw new Error("Word picture data missing")
+                const rows = $scope.data.generateCsv()
+                downloadCsvFile("word-picture", rows, $scope.downloadOption)
+
+                // Reset to the label option
+                $scope.downloadOption = ""
+            })
         },
     ],
 })

app/scripts/csv.ts

@@ -0,0 +1,17 @@
+import CSV from "comma-separated-values/csv"
+import { downloadFile } from "./util"
+
+export type CsvType = keyof typeof CSV_TYPES
+
+export const CSV_TYPES = {
+    comma: { delimiter: ",", ext: "csv", mime: "text/csv" },
+    semi: { delimiter: ";", ext: "csv", mime: "text/csv" },
+    tab: { delimiter: "\t", ext: "tsv", mime: "text/tab-separated-values" },
+}
+
+/** Create a CSV file and trigger a download */
+export function downloadCsvFile(name: string, rows: Iterable<string[]>, type: CsvType) {
+    const { delimiter, ext, mime } = CSV_TYPES[type]
+    const csv = CSV.encode([...rows], { delimiter })
+    downloadFile(csv, `korp-${name}.${ext}`, mime)
+}

app/scripts/word-picture.ts

@@ -117,5 +117,19 @@ export class WordPicture {
     }
 
     /** Get a string for the params that identify a word picture column */
-    getColumnId = (pos: string, rel: string, reverse: boolean) => `${pos}${reverse ? "+" : "-"}${rel}`
+    getColumnId = (pos: string, rel: string, reverse: boolean) => `${pos}${reverse ? "+" : "-"}${rel}`;
+
+    /** Create listing of full data, suitable for CSV export. */
+    *generateCsv(): Generator<string[]> {
+        const fields: (keyof MatchedRelation)[] = ["head", "headpos", "dep", "deppos", "rel", "depextra", "freq", "mi"]
+        // Header row
+        yield fields
+
+        // Data rows
+        for (const key of Object.keys(this.items)) {
+            for (const relation of this.items[key]) {
+                yield fields.map((field) => String(relation[field] || ""))
+            }
+        }
+    }
 }

app/translations/locale-eng.json

@@ -341,6 +341,10 @@
     "statstable_gen_export": "Generate export",
     "statstable_download": "Download",
 
+    "csv_comma": "Comma-separated values (CSV)",
+    "csv_semi": "Semicolon-separated values (CSV)",
+    "csv_tab": "Tab-separated values (TSV)",
+
     "util_decimalseparator": ".",
     "util_numbergroupseparator": ",",
 

app/translations/locale-swe.json

@@ -342,6 +342,10 @@
     "statstable_gen_export": "Generera export",
     "statstable_download": "Ladda ner",
 
+    "csv_comma": "Kommaseparerade värden (CSV)",
+    "csv_semi": "Semikolonseparerade värden (CSV)",
+    "csv_tab": "Tabbseparerade värden (TSV)",
+
     "util_decimalseparator": ",",
     "util_numbergroupseparator": " ",