From a64a09ce0f8c283cf3fa40fbf8ee6e2200a3b95a Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Fri, 4 Oct 2024 00:18:26 +0200
Subject: [PATCH 01/15] Added shortcut crtl+k to focus the "find label" input
 field

- override the default feature
---
 .../assets/js/label-trees/components/labelTrees.vue  | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index ce0724502..6090ced0f 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -2,7 +2,7 @@
     <div class="label-trees">
         <div v-if="typeahead || clearable" class="label-trees__head">
             <button v-if="clearable" @click="clear" class="btn btn-default" title="Clear selected labels" type="button"><span class="fa fa-times fa-fw" aria-hidden="true"></span></button>
-            <typeahead v-if="typeahead" :items="labels" more-info="tree.versionedName" @select="handleSelect" placeholder="Find label"></typeahead>
+            <typeahead ref="typeaheadInput" v-if="typeahead" :items="labels" more-info="tree.versionedName" @select="handleSelect" placeholder="Find label"></typeahead>
         </div>
         <div class="label-trees__body">
             <label-tree v-if="hasFavourites" name="Favourites" :labels="favourites" :show-favourites="showFavourites" :flat="true" :showFavouriteShortcuts="true" :collapsible="collapsible" @select="handleSelect" @deselect="handleDeselect" @remove-favourite="handleRemoveFavourite"></label-tree>
@@ -174,6 +174,9 @@ export default {
                 this.handleSelect(this.favourites[index]);
             }
         },
+        focusTypeahead() {
+            this.$refs.typeaheadInput.$el.querySelector('input').focus();
+        },
     },
     watch: {
         trees: {
@@ -222,6 +225,13 @@ export default {
             }
             bindFavouriteKey('0', 9);
         }
+
+        window.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.key === 'k') {
+                e.preventDefault();
+                this.focusTypeahead();
+            }
+        });
     },
 };
 </script>

From 5ad4c802b20189c85621ceca1581500d3301b905 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Thu, 17 Oct 2024 14:33:45 +0200
Subject: [PATCH 02/15] used Keyboard.on for ShortCut

---
 .../js/label-trees/components/labelTrees.vue  | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index 6090ced0f..16870ec1d 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -174,9 +174,30 @@ export default {
                 this.handleSelect(this.favourites[index]);
             }
         },
+        /*
+            // Add the new method to focus the typeahead field
+    focusFindLabel() {
+        // Assuming your Typeahead component has a method or input field that can be focused
+       // if (this.$refs.typeaheadInput) {
+       if(this.showFavourites){
+            console.log("infocusFindLabel");
+            this.$refs.typeaheadInput.$el.querySelector('input').focus();
+            // This is an example, adjust if Typeahead has a different way to focus
+            //this.$refs.typeahead.focus();
+        }
+    },
+        
+*/
+
+
+         //   <typeahead ref="typeaheadInput" v-if="typeahead" :items="labels" more-info="tree.versionedName" @select="handleSelect" placeholder="Find label"></typeahead>
+
+
         focusTypeahead() {
             this.$refs.typeaheadInput.$el.querySelector('input').focus();
+            console.log("focusTypeahead");
         },
+
     },
     watch: {
         trees: {
@@ -196,6 +217,13 @@ export default {
             },
         },
     },
+    created(){
+        Keyboard.on('control+k', (e) => {
+            e.preventDefault(); // Prevent the default browser action (Print)
+            this.focusTypeahead();
+            console.log("labelTrees");
+        });
+    },
     mounted() {
         if (this.showFavourites) {
             let favouriteIds = JSON.parse(localStorage.getItem(this.favouriteStorageKey));
@@ -225,13 +253,16 @@ export default {
             }
             bindFavouriteKey('0', 9);
         }
-
+/*
         window.addEventListener('keydown', (e) => {
             if (e.ctrlKey && e.key === 'k') {
                 e.preventDefault();
                 this.focusTypeahead();
+                //this.focusFindLabel();
+                console.log("aktiv");
             }
-        });
+        });    
+  */         
     },
 };
 </script>

From 1cd1e73e9eaa746fddfd4219305f47ce14804ecb Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Wed, 6 Nov 2024 13:39:45 +0100
Subject: [PATCH 03/15] Add event listener for 'callFunctionFocustypeahead' to
 trigger focus on typeahead input

---
 .../js/label-trees/components/labelTrees.vue  | 41 +++----------------
 1 file changed, 5 insertions(+), 36 deletions(-)

diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index 16870ec1d..403c6c774 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -174,28 +174,9 @@ export default {
                 this.handleSelect(this.favourites[index]);
             }
         },
-        /*
-            // Add the new method to focus the typeahead field
-    focusFindLabel() {
-        // Assuming your Typeahead component has a method or input field that can be focused
-       // if (this.$refs.typeaheadInput) {
-       if(this.showFavourites){
-            console.log("infocusFindLabel");
-            this.$refs.typeaheadInput.$el.querySelector('input').focus();
-            // This is an example, adjust if Typeahead has a different way to focus
-            //this.$refs.typeahead.focus();
-        }
-    },
-        
-*/
-
-
-         //   <typeahead ref="typeaheadInput" v-if="typeahead" :items="labels" more-info="tree.versionedName" @select="handleSelect" placeholder="Find label"></typeahead>
-
 
         focusTypeahead() {
             this.$refs.typeaheadInput.$el.querySelector('input').focus();
-            console.log("focusTypeahead");
         },
 
     },
@@ -217,13 +198,7 @@ export default {
             },
         },
     },
-    created(){
-        Keyboard.on('control+k', (e) => {
-            e.preventDefault(); // Prevent the default browser action (Print)
-            this.focusTypeahead();
-            console.log("labelTrees");
-        });
-    },
+
     mounted() {
         if (this.showFavourites) {
             let favouriteIds = JSON.parse(localStorage.getItem(this.favouriteStorageKey));
@@ -253,16 +228,10 @@ export default {
             }
             bindFavouriteKey('0', 9);
         }
-/*
-        window.addEventListener('keydown', (e) => {
-            if (e.ctrlKey && e.key === 'k') {
-                e.preventDefault();
-                this.focusTypeahead();
-                //this.focusFindLabel();
-                console.log("aktiv");
-            }
-        });    
-  */         
+        // call global for  focustypeahead TODO need other way!
+        this.$root.$on('callFunctionFocustypeahead', () => {
+            this.focusTypeahead();
+        });        
     },
 };
 </script>

From 820c204fd73d1fa83fd430ec6e76e04ff652a58a Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Wed, 6 Nov 2024 13:46:48 +0100
Subject: [PATCH 04/15] Add description for 'Crt + k' shortcut in video and
 image annotation tool shortcuts list

---
 .../views/manual/tutorials/annotations/shortcuts.blade.php  | 6 +++++-
 resources/views/manual/tutorials/videos/shortcuts.blade.php | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/resources/views/manual/tutorials/annotations/shortcuts.blade.php b/resources/views/manual/tutorials/annotations/shortcuts.blade.php
index 881868cfb..318726c4c 100644
--- a/resources/views/manual/tutorials/annotations/shortcuts.blade.php
+++ b/resources/views/manual/tutorials/annotations/shortcuts.blade.php
@@ -5,7 +5,7 @@
 @section('manual-content')
     <div class="row">
         <p class="lead">
-            A list of all available shortcut keys in the image annotation tool.
+            A list of all available shortcut keys in the image annotation tool. BIN RICHTIG
         </p>
 
         <table class="table">
@@ -123,6 +123,10 @@
                     <td><kbd>p</kbd></td>
                     <td>Capture a screenshot</td>
                 </tr>
+                <tr>
+                    <td><kbd>Ctrl</kbd>+<kbd>k</kbd></td>
+                    <td>Open label trees sidebar and focus the find label input field</td>
+                </tr>
             </tbody>
         </table>
 
diff --git a/resources/views/manual/tutorials/videos/shortcuts.blade.php b/resources/views/manual/tutorials/videos/shortcuts.blade.php
index 770d627b1..69ebec557 100644
--- a/resources/views/manual/tutorials/videos/shortcuts.blade.php
+++ b/resources/views/manual/tutorials/videos/shortcuts.blade.php
@@ -115,6 +115,10 @@
                     <td><kbd>Esc</kbd></td>
                     <td>Cancel current action<br><small>e.g. drawing or moving an annotation</small></td>
                 </tr>
+                <tr>
+                    <td><kbd>Ctrl</kbd>+<kbd>k</kbd></td>
+                    <td>Open label trees sidebar and focus the find label input field</td>
+                </tr>
             </tbody>
         </table>
 

From 12ca1db4cae4596157ef53bddc4bf104fce0f194 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Wed, 6 Nov 2024 14:28:03 +0100
Subject: [PATCH 05/15] Add 'Ctrl + K' shortcut to open sidebar labels and
 focus typeahead

- Add openSidebarLabels() method to trigger sidebar label view and focus
  typeahead
- Register 'focusTypeaheadEvent' and 'callFunctionFocustypeahead' events
  to manage typeahead focus
- Bind 'Ctrl + K' shortcut to openSidebarLabels()
---
 .../js/annotations/annotatorContainer.vue     | 20 +++++++++++++++++++
 resources/assets/js/videos/videoContainer.vue | 19 ++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index a19df869b..ed6ed26b5 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -24,6 +24,7 @@ import {CrossOriginError} from './stores/images';
 import {debounce} from './../core/utils';
 import {handleErrorResponse} from '../core/messages/store';
 import {urlParams as UrlParams} from '../core/utils';
+import Keyboard from '../core/keyboard';
 
 /**
  * View model for the annotator container
@@ -592,6 +593,13 @@ export default {
             }
             Messages.danger(`Invalid shape. ${shape} needs ${count} different points.`);
         },
+
+        openSidebarLabels(){ 
+            // opens sidebar labels
+            this.$refs.sidebar.$emit('open', 'labels');
+            Events.$emit('focusTypeaheadEvent');
+        },
+
     },
     watch: {
         async imageId(id) {
@@ -742,6 +750,18 @@ export default {
                 this.openTab = openTab;
             }
         }
+
+        Events.$on('focusTypeaheadEvent', () => {
+            this.$nextTick(() => {
+                // call global for  focustypeahead TODO need other way!
+                this.$root.$emit('callFunctionFocustypeahead')
+            });
+        });
+        
+        Keyboard.on('control+k', () => {
+            this.openSidebarLabels()
+        });
+        
     },
     mounted() {
         Events.$emit('annotations.map.init', this.$refs.canvas.map);
diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
index b45c7cc44..2926d0d27 100644
--- a/resources/assets/js/videos/videoContainer.vue
+++ b/resources/assets/js/videos/videoContainer.vue
@@ -20,6 +20,7 @@ import VideoScreen from './components/videoScreen';
 import VideoTimeline from './components/videoTimeline';
 import {handleErrorResponse} from '../core/messages/store';
 import {urlParams as UrlParams} from '../core/utils';
+import Keyboard from '../core/keyboard';
 
 class VideoError extends Error {}
 class VideoNotProcessedError extends VideoError {}
@@ -673,6 +674,11 @@ export default {
             }
             Messages.danger(`Invalid shape. ${shape} needs ${count} different points.`);
         },
+
+        openSidebarLabels(){ 
+            this.$refs.sidebar.$emit('open', 'labels');
+            Events.$emit('focusTypeaheadEvent');
+        },
     },
     watch: {
         'settings.playbackRate'(rate) {
@@ -735,6 +741,19 @@ export default {
         if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
             this.supportsJumpByFrame = true;
         }
+
+        // Focus findbar in labelTrees
+        Events.$on('focusTypeaheadEvent', () => {
+            this.$nextTick(() => {
+                // call global for  focustypeahead TODO need other way!
+                this.$root.$emit('callFunctionFocustypeahead')
+            });
+        });
+        
+        // on control + k openSidebar labels and after focus find
+        Keyboard.on('control+k', () => {
+            this.openSidebarLabels()
+        });
     },
     mounted() {
         // Wait for the sub-components to register their event listeners before

From 468abc4e14f42344e161b2b347bdb49563d95fe8 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Wed, 13 Nov 2024 15:51:41 +0100
Subject: [PATCH 06/15]  Replaced usage of root with Events

---
 resources/assets/js/annotations/annotatorContainer.vue    | 2 +-
 resources/assets/js/label-trees/components/labelTrees.vue | 3 ++-
 resources/assets/js/videos/videoContainer.vue             | 3 +--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index cbcf2dddf..55da98eb7 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -760,7 +760,7 @@ export default {
         Events.$on('focusTypeaheadEvent', () => {
             this.$nextTick(() => {
                 // call global for  focustypeahead TODO need other way!
-                this.$root.$emit('callFunctionFocustypeahead')
+                Events.$emit('callFunctionFocustypeahead')
             });
         });
         
diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index 403c6c774..d90bbbf35 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -15,6 +15,7 @@
 import Keyboard from '../../core/keyboard';
 import LabelTree from './labelTree';
 import Typeahead from './labelTypeahead';
+import Events from '../../core/events';
 
 /**
  * A component that displays a list of label trees.
@@ -229,7 +230,7 @@ export default {
             bindFavouriteKey('0', 9);
         }
         // call global for  focustypeahead TODO need other way!
-        this.$root.$on('callFunctionFocustypeahead', () => {
+        Events.$on('callFunctionFocustypeahead', () => {
             this.focusTypeahead();
         });        
     },
diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
index 8f833d1fb..32c47e2a6 100644
--- a/resources/assets/js/videos/videoContainer.vue
+++ b/resources/assets/js/videos/videoContainer.vue
@@ -750,8 +750,7 @@ export default {
         // Focus findbar in labelTrees
         Events.$on('focusTypeaheadEvent', () => {
             this.$nextTick(() => {
-                // call global for  focustypeahead TODO need other way!
-                this.$root.$emit('callFunctionFocustypeahead')
+                Events.$emit('callFunctionFocustypeahead')
             });
         });
         

From b82d43396dfbc00708b00c2435c00c443228506b Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Wed, 13 Nov 2024 18:55:12 +0100
Subject: [PATCH 07/15] Add focusInput prop to annotatorContainer for calling
 typeaheadInput function

---
 .../assets/js/annotations/annotatorContainer.vue   |  7 ++++++-
 .../assets/js/annotations/components/labelsTab.vue | 11 +++++++++++
 .../js/label-trees/components/labelTrees.vue       | 14 ++++++++++++--
 resources/views/annotations/show.blade.php         |  1 +
 .../views/annotations/show/tabs/labels.blade.php   |  6 +++---
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index 55da98eb7..46d541a24 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -87,6 +87,7 @@ export default {
             userUpdatedVolareResolution: false,
             userId: null,
             crossOriginError: false,
+            focusInputFindlabel: false,
         };
     },
     computed: {
@@ -760,8 +761,12 @@ export default {
         Events.$on('focusTypeaheadEvent', () => {
             this.$nextTick(() => {
                 // call global for  focustypeahead TODO need other way!
-                Events.$emit('callFunctionFocustypeahead')
+                this.focusInputFindlabel = true;
+               // Events.$emit('callFunctionFocustypeahead')
             });
+            
+           this.focusInputFindlabel = false;
+            
         });
         
         Keyboard.on('control+k', () => {
diff --git a/resources/assets/js/annotations/components/labelsTab.vue b/resources/assets/js/annotations/components/labelsTab.vue
index 4fc838c42..3fad17c9e 100644
--- a/resources/assets/js/annotations/components/labelsTab.vue
+++ b/resources/assets/js/annotations/components/labelsTab.vue
@@ -25,11 +25,22 @@ export default {
             selectedLabel: null,
         };
     },
+    props: {
+        focusInput:{
+            type: Boolean,
+            default: false,
+        }
+    },
     computed: {
         plugins() {
             return plugins;
         },
     },
+    watch: {
+        focusInput(){
+           //  console.log("n ", this.focusInput);
+        }
+    },
     methods: {
         handleSelectedLabel(label) {
             this.selectedLabel = label;
diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index d90bbbf35..0b484403f 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -74,6 +74,10 @@ export default {
             type: String,
             default: 'default',
         },
+        focusInput:{
+            type: Boolean,
+            default: false,
+        }
     },
     computed: {
         localeCompareSupportsLocales() {
@@ -175,11 +179,11 @@ export default {
                 this.handleSelect(this.favourites[index]);
             }
         },
-
+/*
         focusTypeahead() {
             this.$refs.typeaheadInput.$el.querySelector('input').focus();
         },
-
+*/
     },
     watch: {
         trees: {
@@ -198,6 +202,12 @@ export default {
                 });
             },
         },
+        focusInput(){
+            if(this.focusInput){
+                this.$refs.typeaheadInput.$el.querySelector('input').focus();
+            }
+        }
+        
     },
 
     mounted() {
diff --git a/resources/views/annotations/show.blade.php b/resources/views/annotations/show.blade.php
index cca57c664..d7cb577ff 100644
--- a/resources/views/annotations/show.blade.php
+++ b/resources/views/annotations/show.blade.php
@@ -105,6 +105,7 @@
         ref="sidebar"
         :open-tab="openTab"
         :toggle-on-keyboard="true"
+        :focus-input="focusInputFindlabel"
         v-on:open="handleOpenedTab"
         v-on:close="handleClosedTab"
         v-cloak>
diff --git a/resources/views/annotations/show/tabs/labels.blade.php b/resources/views/annotations/show/tabs/labels.blade.php
index f26c61321..07a9876f7 100644
--- a/resources/views/annotations/show/tabs/labels.blade.php
+++ b/resources/views/annotations/show/tabs/labels.blade.php
@@ -1,8 +1,8 @@
-<sidebar-tab name="labels" icon="tags" title="Label trees">
-    <labels-tab v-on:select="handleSelectedLabel" v-cloak inline-template>
+<sidebar-tab name="labels" icon="tags" title="Label trees" >
+    <labels-tab v-on:select="handleSelectedLabel" :focus-input="focusInputFindlabel" v-cloak inline-template>
         <div class="labels-tab">
             <div class="labels-tab__trees">
-                <label-trees :trees="labelTrees" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
+                <label-trees :trees="labelTrees" :show-favourites="true" :focus-input="focusInput" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
             </div>
             <div class="labels-tab__plugins">
                 @mixin('annotationsLabelsTab')

From 8d44236d2821dbd002f5372ceb2f405188e5a742 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Thu, 14 Nov 2024 12:21:56 +0100
Subject: [PATCH 08/15] Clean up for better code clarity

---
 resources/assets/js/annotations/annotatorContainer.vue    | 8 +-------
 resources/assets/js/annotations/components/labelsTab.vue  | 1 -
 resources/assets/js/label-trees/components/labelTrees.vue | 5 -----
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index 46d541a24..63da3015f 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -601,12 +601,10 @@ export default {
         },
         
         openSidebarLabels(){ 
-            // opens sidebar labels
             this.$refs.sidebar.$emit('open', 'labels');
             Events.$emit('focusTypeaheadEvent');
         },
 
-
     },
     watch: {
         async imageId(id) {
@@ -758,15 +756,11 @@ export default {
             }
         }
 
-        Events.$on('focusTypeaheadEvent', () => {
+        Events.$on('focusTypeaheadEvent', () => { 
             this.$nextTick(() => {
-                // call global for  focustypeahead TODO need other way!
                 this.focusInputFindlabel = true;
-               // Events.$emit('callFunctionFocustypeahead')
             });
-            
            this.focusInputFindlabel = false;
-            
         });
         
         Keyboard.on('control+k', () => {
diff --git a/resources/assets/js/annotations/components/labelsTab.vue b/resources/assets/js/annotations/components/labelsTab.vue
index 3fad17c9e..faefea75a 100644
--- a/resources/assets/js/annotations/components/labelsTab.vue
+++ b/resources/assets/js/annotations/components/labelsTab.vue
@@ -38,7 +38,6 @@ export default {
     },
     watch: {
         focusInput(){
-           //  console.log("n ", this.focusInput);
         }
     },
     methods: {
diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index 0b484403f..6ed989224 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -179,11 +179,6 @@ export default {
                 this.handleSelect(this.favourites[index]);
             }
         },
-/*
-        focusTypeahead() {
-            this.$refs.typeaheadInput.$el.querySelector('input').focus();
-        },
-*/
     },
     watch: {
         trees: {

From 2b8c5c491561421c5d1b7d56ea8413d756e7cff9 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Thu, 14 Nov 2024 12:22:38 +0100
Subject: [PATCH 09/15] Add focusInputFindLabel prop to label-trees component
 in video labels tab to focus Input

---
 resources/assets/js/videos/videoContainer.vue        | 6 +++---
 resources/views/videos/show/sidebar-labels.blade.php | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
index 32c47e2a6..29b975bfc 100644
--- a/resources/assets/js/videos/videoContainer.vue
+++ b/resources/assets/js/videos/videoContainer.vue
@@ -99,6 +99,7 @@ export default {
             swappingLabel: false,
             disableJobTracking: false,
             supportsJumpByFrame: false,
+            focusInputFindlabel: false,
         };
     },
     computed: {
@@ -747,14 +748,13 @@ export default {
             this.supportsJumpByFrame = true;
         }
         
-        // Focus findbar in labelTrees
         Events.$on('focusTypeaheadEvent', () => {
             this.$nextTick(() => {
-                Events.$emit('callFunctionFocustypeahead')
+                this.focusInputFindlabel = true;
             });
+            this.focusInputFindlabel = false;
         });
         
-        // on control + k openSidebar labels and after focus find
         Keyboard.on('control+k', () => {
             this.openSidebarLabels()
         });
diff --git a/resources/views/videos/show/sidebar-labels.blade.php b/resources/views/videos/show/sidebar-labels.blade.php
index aeb10727f..c9f55c6c7 100644
--- a/resources/views/videos/show/sidebar-labels.blade.php
+++ b/resources/views/videos/show/sidebar-labels.blade.php
@@ -1,7 +1,7 @@
 <sidebar-tab name="labels" icon="tags" title="Label trees">
     <div class="labels-tab">
         <div class="labels-tab__trees">
-            <label-trees :trees="labelTrees" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
+            <label-trees :trees="labelTrees" :focus-input="focusInputFindlabel" :show-favourites="true" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
         </div>
     </div>
 </sidebar-tab>

From 9b9f1c3d06cd3490b70634bc6afc4a78ab199ead Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Thu, 14 Nov 2024 16:19:44 +0100
Subject: [PATCH 10/15] Correct focus behavior when remaining in 'labels'
 sidebar after activation

---
 resources/assets/js/annotations/annotatorContainer.vue | 1 +
 resources/assets/js/videos/videoContainer.vue          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index 63da3015f..bf2e59f73 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -757,6 +757,7 @@ export default {
         }
 
         Events.$on('focusTypeaheadEvent', () => { 
+            this.focusInputFindlabel = false;
             this.$nextTick(() => {
                 this.focusInputFindlabel = true;
             });
diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
index 29b975bfc..131a73d95 100644
--- a/resources/assets/js/videos/videoContainer.vue
+++ b/resources/assets/js/videos/videoContainer.vue
@@ -749,6 +749,7 @@ export default {
         }
         
         Events.$on('focusTypeaheadEvent', () => {
+            this.focusInputFindlabel = false;
             this.$nextTick(() => {
                 this.focusInputFindlabel = true;
             });

From 577e64af2585c136c3ac2a4ce775d38070f43b07 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Mon, 18 Nov 2024 14:05:44 +0100
Subject: [PATCH 11/15] Apply suggested changes from review

---
 .../js/annotations/annotatorContainer.vue     | 24 +++++++------------
 .../js/annotations/components/labelsTab.vue   |  4 ----
 .../js/label-trees/components/labelTrees.vue  |  1 -
 resources/assets/js/videos/videoContainer.vue | 14 +++++++----
 .../annotations/show/tabs/labels.blade.php    |  2 +-
 .../tutorials/annotations/shortcuts.blade.php |  3 +--
 6 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index bf2e59f73..1f3c603a6 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -594,16 +594,20 @@ export default {
             }
             Messages.danger(`Invalid shape. ${shape} needs ${count} different points.`);
         },
-
         selectLastAnnotation() {
             let lastAnnotation = this.annotations.reduce((lastAnnotated, a) => a.id > lastAnnotated.id ? a : lastAnnotated, { id: 0 });
             this.handleSelectAnnotation(lastAnnotation);
         },
-        
-        openSidebarLabels(){ 
+        openSidebarLabels() { 
             this.$refs.sidebar.$emit('open', 'labels');
-            Events.$emit('focusTypeaheadEvent');
+           this.setFocusInputFindLabel()
         },
+        setFocusInputFindLabel(){
+            this.focusInputFindlabel = false;
+            this.$nextTick(() => {
+                this.focusInputFindlabel = true;
+            });
+        }
 
     },
     watch: {
@@ -755,18 +759,8 @@ export default {
                 this.openTab = openTab;
             }
         }
-
-        Events.$on('focusTypeaheadEvent', () => { 
-            this.focusInputFindlabel = false;
-            this.$nextTick(() => {
-                this.focusInputFindlabel = true;
-            });
-           this.focusInputFindlabel = false;
-        });
         
-        Keyboard.on('control+k', () => {
-            this.openSidebarLabels()
-        });
+        Keyboard.on('control+k', this.openSidebarLabels, 0, this.listenerSet);
 
         Keyboard.on('C', this.selectLastAnnotation, 0, this.listenerSet);
     },
diff --git a/resources/assets/js/annotations/components/labelsTab.vue b/resources/assets/js/annotations/components/labelsTab.vue
index faefea75a..421d4231b 100644
--- a/resources/assets/js/annotations/components/labelsTab.vue
+++ b/resources/assets/js/annotations/components/labelsTab.vue
@@ -36,10 +36,6 @@ export default {
             return plugins;
         },
     },
-    watch: {
-        focusInput(){
-        }
-    },
     methods: {
         handleSelectedLabel(label) {
             this.selectedLabel = label;
diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index 6ed989224..3ea7a63c1 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -234,7 +234,6 @@ export default {
             }
             bindFavouriteKey('0', 9);
         }
-        // call global for  focustypeahead TODO need other way!
         Events.$on('callFunctionFocustypeahead', () => {
             this.focusTypeahead();
         });        
diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
index 131a73d95..a4e33d889 100644
--- a/resources/assets/js/videos/videoContainer.vue
+++ b/resources/assets/js/videos/videoContainer.vue
@@ -679,10 +679,16 @@ export default {
             let lastAnnotation = this.annotations.reduce((lastAnnotated, a) => a.id > lastAnnotated.id ? a : lastAnnotated, { id: 0 });
             this.selectAnnotations([lastAnnotation], this.selectedAnnotations, lastAnnotation.startFrame);
         },
-        openSidebarLabels(){ 
+        openSidebarLabels() {
             this.$refs.sidebar.$emit('open', 'labels');
-            Events.$emit('focusTypeaheadEvent');
+            this.setFocusInputFindLabel()
         },
+        setFocusInputFindLabel(){
+            this.focusInputFindlabel = false;
+            this.$nextTick(() => {
+                this.focusInputFindlabel = true;
+            });
+        }
     },
     watch: {
         'settings.playbackRate'(rate) {
@@ -756,9 +762,7 @@ export default {
             this.focusInputFindlabel = false;
         });
         
-        Keyboard.on('control+k', () => {
-            this.openSidebarLabels()
-        });
+        Keyboard.on('control+k', this.openSidebarLabels, 0, this.listenerSet);
     
     },
     mounted() {
diff --git a/resources/views/annotations/show/tabs/labels.blade.php b/resources/views/annotations/show/tabs/labels.blade.php
index 07a9876f7..1f21d677e 100644
--- a/resources/views/annotations/show/tabs/labels.blade.php
+++ b/resources/views/annotations/show/tabs/labels.blade.php
@@ -1,4 +1,4 @@
-<sidebar-tab name="labels" icon="tags" title="Label trees" >
+<sidebar-tab name="labels" icon="tags" title="Label trees">
     <labels-tab v-on:select="handleSelectedLabel" :focus-input="focusInputFindlabel" v-cloak inline-template>
         <div class="labels-tab">
             <div class="labels-tab__trees">
diff --git a/resources/views/manual/tutorials/annotations/shortcuts.blade.php b/resources/views/manual/tutorials/annotations/shortcuts.blade.php
index 42770cb8b..887a4f4e8 100644
--- a/resources/views/manual/tutorials/annotations/shortcuts.blade.php
+++ b/resources/views/manual/tutorials/annotations/shortcuts.blade.php
@@ -5,7 +5,7 @@
 @section('manual-content')
     <div class="row">
         <p class="lead">
-            A list of all available shortcut keys in the image annotation tool. BIN RICHTIG
+            A list of all available shortcut keys in the image annotation tool.
         </p>
 
         <table class="table">
@@ -131,7 +131,6 @@
                     <td><kbd>Ctrl</kbd>+<kbd>k</kbd></td>
                     <td>Open label trees sidebar and focus the find label input field</td>
                 </tr>
-
             </tbody>
         </table>
 

From e03980632dfa6e80b79152994a63b05afb574489 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Thu, 21 Nov 2024 09:58:18 +0100
Subject: [PATCH 12/15] Move methods to focus the input from annotatorContainer
 into labelsTab component

- did not do so for video annotation, because of different structure
---
 .../assets/js/annotations/annotatorContainer.vue    | 13 +------------
 .../assets/js/annotations/components/labelsTab.vue  | 11 +++++++++++
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index 1f3c603a6..1e44a9c8e 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -87,7 +87,6 @@ export default {
             userUpdatedVolareResolution: false,
             userId: null,
             crossOriginError: false,
-            focusInputFindlabel: false,
         };
     },
     computed: {
@@ -598,17 +597,9 @@ export default {
             let lastAnnotation = this.annotations.reduce((lastAnnotated, a) => a.id > lastAnnotated.id ? a : lastAnnotated, { id: 0 });
             this.handleSelectAnnotation(lastAnnotation);
         },
-        openSidebarLabels() { 
+        openSidebarLabels() {
             this.$refs.sidebar.$emit('open', 'labels');
-           this.setFocusInputFindLabel()
         },
-        setFocusInputFindLabel(){
-            this.focusInputFindlabel = false;
-            this.$nextTick(() => {
-                this.focusInputFindlabel = true;
-            });
-        }
-
     },
     watch: {
         async imageId(id) {
@@ -759,8 +750,6 @@ export default {
                 this.openTab = openTab;
             }
         }
-        
-        Keyboard.on('control+k', this.openSidebarLabels, 0, this.listenerSet);
 
         Keyboard.on('C', this.selectLastAnnotation, 0, this.listenerSet);
     },
diff --git a/resources/assets/js/annotations/components/labelsTab.vue b/resources/assets/js/annotations/components/labelsTab.vue
index 421d4231b..6fb78f252 100644
--- a/resources/assets/js/annotations/components/labelsTab.vue
+++ b/resources/assets/js/annotations/components/labelsTab.vue
@@ -1,5 +1,6 @@
 <script>
 import LabelTrees from '../../label-trees/components/labelTrees';
+import Keyboard from '../../core/keyboard';
 
 /**
  * Additional components that can be dynamically added by other Biigle modules via
@@ -23,6 +24,7 @@ export default {
         return {
             labelTrees: [],
             selectedLabel: null,
+            focusInputFindlabel: false,
         };
     },
     props: {
@@ -45,9 +47,18 @@ export default {
             this.selectedLabel = null;
             this.$emit('select', null);
         },
+        setFocusInputFindLabel() {
+            this.$emit('open', 'labels');
+            this.focusInputFindlabel = false;
+            this.$nextTick(() => {
+                this.focusInputFindlabel = true;
+            });
+        },
     },
     created() {
         this.labelTrees = biigle.$require('annotations.labelTrees');
+
+        Keyboard.on('control+k', this.setFocusInputFindLabel, 0, this.listenerSet);
     },
 };
 </script>

From f2364e75017064ea14740bbbe1ac0876e1a74b11 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Thu, 21 Nov 2024 10:24:45 +0100
Subject: [PATCH 13/15] Apply suggested changes from review

---
 resources/assets/js/label-trees/components/labelTrees.vue | 7 ++-----
 resources/views/annotations/show.blade.php                | 1 -
 resources/views/annotations/show/tabs/labels.blade.php    | 4 ++--
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index 3ea7a63c1..bb8da18c6 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -197,8 +197,8 @@ export default {
                 });
             },
         },
-        focusInput(){
-            if(this.focusInput){
+        focusInput() {
+            if (this.focusInput) {
                 this.$refs.typeaheadInput.$el.querySelector('input').focus();
             }
         }
@@ -234,9 +234,6 @@ export default {
             }
             bindFavouriteKey('0', 9);
         }
-        Events.$on('callFunctionFocustypeahead', () => {
-            this.focusTypeahead();
-        });        
     },
 };
 </script>
diff --git a/resources/views/annotations/show.blade.php b/resources/views/annotations/show.blade.php
index d7cb577ff..cca57c664 100644
--- a/resources/views/annotations/show.blade.php
+++ b/resources/views/annotations/show.blade.php
@@ -105,7 +105,6 @@
         ref="sidebar"
         :open-tab="openTab"
         :toggle-on-keyboard="true"
-        :focus-input="focusInputFindlabel"
         v-on:open="handleOpenedTab"
         v-on:close="handleClosedTab"
         v-cloak>
diff --git a/resources/views/annotations/show/tabs/labels.blade.php b/resources/views/annotations/show/tabs/labels.blade.php
index 1f21d677e..6ab2d5261 100644
--- a/resources/views/annotations/show/tabs/labels.blade.php
+++ b/resources/views/annotations/show/tabs/labels.blade.php
@@ -1,8 +1,8 @@
 <sidebar-tab name="labels" icon="tags" title="Label trees">
-    <labels-tab v-on:select="handleSelectedLabel" :focus-input="focusInputFindlabel" v-cloak inline-template>
+    <labels-tab v-on:select="handleSelectedLabel" v-on:open="openSidebarLabels" v-cloak inline-template>
         <div class="labels-tab">
             <div class="labels-tab__trees">
-                <label-trees :trees="labelTrees" :show-favourites="true" :focus-input="focusInput" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
+                <label-trees :trees="labelTrees" :show-favourites="true" :focus-input="focusInputFindlabel" v-on:select="handleSelectedLabel" v-on:deselect="handleDeselectedLabel" v-on:clear="handleDeselectedLabel"></label-trees>
             </div>
             <div class="labels-tab__plugins">
                 @mixin('annotationsLabelsTab')

From 5015c9ef4f2e3fc801ffc580ad18b74b7ef08d96 Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Thu, 21 Nov 2024 10:32:02 +0100
Subject: [PATCH 14/15] Remove unused import

---
 resources/assets/js/label-trees/components/labelTrees.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
index bb8da18c6..380c4ee9a 100644
--- a/resources/assets/js/label-trees/components/labelTrees.vue
+++ b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -15,7 +15,6 @@
 import Keyboard from '../../core/keyboard';
 import LabelTree from './labelTree';
 import Typeahead from './labelTypeahead';
-import Events from '../../core/events';
 
 /**
  * A component that displays a list of label trees.

From 97aea8bb77c5b68f1579634c89d532f753ed7d4e Mon Sep 17 00:00:00 2001
From: aneust <aneustaedter@techfak.uni-bielefeld.de>
Date: Mon, 25 Nov 2024 12:18:43 +0100
Subject: [PATCH 15/15] Remove unused code

---
 resources/assets/js/videos/videoContainer.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
index a4e33d889..f66e036a3 100644
--- a/resources/assets/js/videos/videoContainer.vue
+++ b/resources/assets/js/videos/videoContainer.vue
@@ -683,7 +683,7 @@ export default {
             this.$refs.sidebar.$emit('open', 'labels');
             this.setFocusInputFindLabel()
         },
-        setFocusInputFindLabel(){
+        setFocusInputFindLabel() {
             this.focusInputFindlabel = false;
             this.$nextTick(() => {
                 this.focusInputFindlabel = true;
@@ -753,17 +753,9 @@ export default {
         if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
             this.supportsJumpByFrame = true;
         }
-        
-        Events.$on('focusTypeaheadEvent', () => {
-            this.focusInputFindlabel = false;
-            this.$nextTick(() => {
-                this.focusInputFindlabel = true;
-            });
-            this.focusInputFindlabel = false;
-        });
-        
+
         Keyboard.on('control+k', this.openSidebarLabels, 0, this.listenerSet);
-    
+
     },
     mounted() {
         // Wait for the sub-components to register their event listeners before