Select segment

Author: arildm

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

@@ -65,7 +65,7 @@ angular.module("korpApp").component("wordPictureColumn", {
             const $ctrl = this as WordPictureColumnController
 
             $ctrl.$onChanges = (changes) => {
-                if (changes.limit?.currentValue || changes.items?.currentValue) {
+                if (changes.limit?.currentValue || changes.items?.currentValue || changes.segment?.currentValue) {
                     $ctrl.rows = $ctrl.items.filter((item) => item.stats[$ctrl.segment]).slice(0, Number($ctrl.limit))
                 }
             }

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

@@ -16,10 +16,32 @@ type WordPictureScope = IScope & {
     fromLemgram: (word: string) => string
     isLemgram: (word: string) => boolean
     lemgramToHtml: (word: string) => string
+    segmentIndex: number
 }
 
 angular.module("korpApp").component("wordPicture", {
     template: html`
+        <div ng-show="$ctrl.data.segments.length > 1" class="my-2">
+            {{'word_pic_segment' | loc:$root.lang}}: {{$ctrl.data.segments[segmentIndex]}}
+
+            <div class="w-full max-w-screen-sm">
+                <input
+                    type="range"
+                    max="{{$ctrl.data.segments.length - 1}}"
+                    list="wordpic-trend-markers"
+                    ng-model="segmentIndex"
+                    class="w-full"
+                />
+                <datalist id="wordpic-trend-markers">
+                    <option
+                        ng-repeat="segment in $ctrl.data.segments"
+                        value="{{$index}}"
+                        label="{{ segment }}"
+                    ></option>
+                </datalist>
+            </div>
+        </div>
+
         <div class="content_target flex flex-wrap gap-4 items-start">
             <section class="radialBkg p-2 border border-gray-400" ng-repeat="section in $ctrl.data.getData()">
                 <h2 class="text-xl mb-4">
@@ -47,7 +69,7 @@ angular.module("korpApp").component("wordPicture", {
                         css-class="column.config.css_class"
                         items="column.rows"
                         limit="$ctrl.limit"
-                        segment="$ctrl.data.segments[0]"
+                        segment="$ctrl.data.segments[segmentIndex]"
                         show-word-class="$ctrl.showWordClass"
                         sort="$ctrl.sort"
                     ></word-picture-column>
@@ -66,6 +88,13 @@ angular.module("korpApp").component("wordPicture", {
         function ($scope: WordPictureScope) {
             const $ctrl = this as WordPictureController
 
+            $ctrl.$onChanges = (changes) => {
+                if (changes.data?.currentValue) {
+                    // Set to most last segment (most recent timespan)
+                    $scope.segmentIndex = $ctrl.data.segments.length - 1
+                }
+            }
+
             $scope.fromLemgram = (word) => Lemgram.parse(word)?.form || word
             $scope.isLemgram = (id) => !!Lemgram.parse(id)
             $scope.lemgramToHtml = (id) => Lemgram.parse(id)!.toHtml()

app/translations/locale-eng.json

@@ -104,6 +104,7 @@
     "word_pic_description": "The Word picture shows words that tend to co-occur in syntactic relations with the search word.",
     "word_pic_result_description": "The part of speech of the search word determines what relations to show. Each list collects words that occur in the selected corpora and in the given relation to the search word.",
     "word_pic_split": "Show trends",
+    "word_pic_segment": "Segment",
     "word_pic_show_all": "Show all hits",
     "word_pic_show_some": "Show up to",
     "word_pic_hits": "hits",

app/translations/locale-swe.json

@@ -96,6 +96,7 @@
     "word_pic_description": "I ordbilden visas vilka ord som tenderar att förekomma i syntaktiska relationer med sökordet.",
     "word_pic_result_description": "Vilka relationer som visas beror på sökordets ordklass. Varje lista innehåller ord som i det valda korpusmaterialet står i den givna relationen med sökordet.",
     "word_pic_split": "Visa trender",
+    "word_pic_segment": "Segment",
     "word_pic_show_all": "Visa alla träffar",
     "word_pic_show_some": "Visa upp till",
     "word_pic_hits": "träffar",