From 9974ca1f3d094a2807b12bba22dacad1f921ce5e Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Sun, 24 Sep 2023 01:31:35 +0800
Subject: [PATCH 1/3] Migrate c-resizer to typescript

---
 frontend/src/components/c-resizer.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/c-resizer.vue b/frontend/src/components/c-resizer.vue
index 4b510029c3..cf9d92721d 100644
--- a/frontend/src/components/c-resizer.vue
+++ b/frontend/src/components/c-resizer.vue
@@ -21,24 +21,25 @@
     slot(name="right")
 </template>
 
-<script>
+<script lang='ts'>
 import { mapState } from 'vuex';
+import { defineComponent } from 'vue';
 
 const DRAG_BAR_WIDTH = 13.25;
 const SCROLL_BAR_WIDTH = 17;
 const GUIDE_BAR_WIDTH = 2;
 
-const throttledEvent = (delay, handler) => {
+const throttledEvent = (delay: number, handler: Function) => {
   let lastCalled = 0;
-  return (...args) => {
+  return (event: MouseEvent) => {
     if (Date.now() - lastCalled > delay) {
       lastCalled = Date.now();
-      handler(...args);
+      handler(event);
     }
   };
 };
 
-export default {
+export default defineComponent({
   name: 'c-resizer',
 
   data() {
@@ -68,7 +69,7 @@ export default {
 
     mouseMove() {
       if (this.isResizing) {
-        return throttledEvent(25, (event) => {
+        return throttledEvent(25, (event: MouseEvent) => {
           this.guideWidth = (
             Math.min(
               Math.max(
@@ -102,5 +103,5 @@ export default {
       this.$store.commit('updateTabState', false);
     },
   },
-};
+});
 </script>

From 97733ca6d1e172113cde05c3fd75416963f356c9 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Mon, 25 Sep 2023 23:05:24 +0800
Subject: [PATCH 2/3] Tighten function type in throttledEvent

Co-authored-by: David Ong <45852430+vvidday@users.noreply.github.com>
---
 frontend/src/components/c-resizer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/c-resizer.vue b/frontend/src/components/c-resizer.vue
index cf9d92721d..1e2f9e6447 100644
--- a/frontend/src/components/c-resizer.vue
+++ b/frontend/src/components/c-resizer.vue
@@ -29,7 +29,7 @@ const DRAG_BAR_WIDTH = 13.25;
 const SCROLL_BAR_WIDTH = 17;
 const GUIDE_BAR_WIDTH = 2;
 
-const throttledEvent = (delay: number, handler: Function) => {
+const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown) => {
   let lastCalled = 0;
   return (event: MouseEvent) => {
     if (Date.now() - lastCalled > delay) {

From b0e9a32678e5812c9937803684a889f459facfcd Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Tue, 26 Sep 2023 00:00:50 +0800
Subject: [PATCH 3/3] Suppress eslint false positive case

---
 frontend/src/components/c-resizer.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/c-resizer.vue b/frontend/src/components/c-resizer.vue
index 1e2f9e6447..a315140e78 100644
--- a/frontend/src/components/c-resizer.vue
+++ b/frontend/src/components/c-resizer.vue
@@ -29,6 +29,11 @@ const DRAG_BAR_WIDTH = 13.25;
 const SCROLL_BAR_WIDTH = 17;
 const GUIDE_BAR_WIDTH = 2;
 
+/** The following eslint suppression suppresses a rare false positive case where event cannot be accessed due to
+ *  handler being a lambda function parameter. The explicit lambda function here allows us to easily discern handler's
+ *  parameters, i.e. an event of type MouseEvent.
+ */
+// eslint-disable-next-line no-unused-vars
 const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown) => {
   let lastCalled = 0;
   return (event: MouseEvent) => {