From 57de7d2d6140aefb61c0c6a84661f1de9dd53e44 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Sat, 23 Sep 2023 14:20:24 +0800
Subject: [PATCH 01/10] Migrate c-ramp.vue to typescript

---
 frontend/src/components/c-ramp.vue | 65 +++++++++++++++++-------------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 4c6987b1e6..23721fb637 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -23,7 +23,7 @@
       .ramp__slice(
         draggable="false",
         v-for="(slice, j) in user.commits",
-        v-bind:title="getContributionMessage(slice)",
+        v-bind:title="getContributionMessage(slice, null)",
         v-on:click="openTabZoom(user, slice, $event)",
         v-bind:class="`ramp__slice--color${getSliceColor(slice)}`",
         v-bind:style="{\
@@ -34,11 +34,13 @@
       )
 </template>
 
-<script>
+<script lang='ts'>
+import { defineComponent } from 'vue';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import User from '../utils/user';
+import { Commit, CommitResult } from '../types/types';
 
-export default {
+export default defineComponent({
   name: 'c-ramp',
   mixins: [brokenLinkDisabler],
   props: {
@@ -85,24 +87,32 @@ export default {
   },
   data() {
     return {
-      rampSize: 0.01,
-      mergeCommitRampSize: this.rampSize * 20,
-      deletesContributionRampSize: this.rampSize * 20,
+      rampSize: 0.01 as number,
     };
   },
 
+  computed: {
+    mergeCommitRampSize(): number {
+      return this.rampSize * 20;
+    },
+    deletesContributionRampSize(): number {
+      return this.rampSize * 20;
+    },
+  },
+
   methods: {
-    getLink(commit) {
+    getLink(commit: CommitResult) {
       return window.getCommitLink(commit.repoId, commit.hash);
     },
-    getContributions(commit) {
+    getContributions(commit: CommitResult | Commit) {
       return commit.insertions + commit.deletions;
     },
-    isDeletesContribution(commit) {
+    isDeletesContribution(commit: CommitResult | Commit) {
       return commit.insertions === 0 && commit.deletions > 0;
     },
-    getWidth(slice) {
-      if (slice.isMergeCommit) {
+    getWidth(slice: CommitResult | Commit) {
+      // Check if slice contains 'isMergeCommit' attribute
+      if ('isMergeCommit' in slice && slice.isMergeCommit) {
         return this.mergeCommitRampSize;
       }
       if (this.getContributions(slice) === 0) {
@@ -111,22 +121,23 @@ export default {
       if (this.isDeletesContribution(slice)) {
         return this.deletesContributionRampSize;
       }
-      const newSize = 100 * (slice.insertions / this.avgsize);
+      // '+' unary operator here attempts to convert this.avgsize to number, if it is not already one
+      const newSize = 100 * (slice.insertions / +this.avgsize);
       return Math.max(newSize * this.rampSize, 0.5);
     },
-    getContributionMessage(slice, commit) {
-      let title = '';
+    getContributionMessage(slice: Commit, commit: CommitResult) {
       if (this.tframe === 'commit') {
         return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
       }
 
-      title = this.tframe === 'day'
-            ? `[${slice.date}] Daily `
-            : `[${slice.date} till ${slice.endDate}] Weekly `;
+      let title = this.tframe === 'day'
+                ? `[${slice.date}] Daily `
+                : `[${slice.date} till ${slice.endDate}] Weekly `;
       title += `contribution: +${slice.insertions} -${slice.deletions} lines`;
       return title;
     },
-    openTabZoom(user, slice, evt) {
+    // Only to be used when this.tframe !== 'Commit'
+    openTabZoom(user: User, slice: Commit, evt: MouseEvent) {
       // prevent opening of zoom tab when cmd/ctrl click
       if (window.isMacintosh ? evt.metaKey : evt.ctrlKey) {
         return;
@@ -155,27 +166,27 @@ export default {
     },
 
     // position for commit granularity
-    getCommitPos(i, total) {
+    getCommitPos(i: number, total: number) {
       return (((total - i - 1) * window.DAY_IN_MS) / total)
           / (this.getTotalForPos(this.sdate, this.udate) + window.DAY_IN_MS);
     },
     // position for day granularity
-    getSlicePos(date) {
+    getSlicePos(date: string) {
       const total = this.getTotalForPos(this.sdate, this.udate);
-      return (new Date(this.udate) - new Date(date)) / (total + window.DAY_IN_MS);
+      return (new Date(this.udate).getMilliseconds() - new Date(date).getMilliseconds()) / (total + window.DAY_IN_MS);
     },
 
     // get duration in miliseconds between 2 date
-    getTotalForPos(sinceDate, untilDate) {
-      return new Date(untilDate) - new Date(sinceDate);
+    getTotalForPos(sinceDate: string, untilDate: string) {
+      return new Date(untilDate).getMilliseconds() - new Date(sinceDate).getMilliseconds();
     },
-    getRampColor(commit, slice) {
+    getRampColor(commit: CommitResult, slice: Commit) {
       if (this.isDeletesContribution(commit)) {
         return '-deletes';
       }
       return this.getSliceColor(slice);
     },
-    getSliceColor(slice) {
+    getSliceColor(slice: Commit) {
       if (this.isDeletesContribution(slice)) {
         return '-deletes';
       }
@@ -187,7 +198,7 @@ export default {
     },
 
     // Prevent browser from switching to new tab when clicking ramp
-    rampClick(evt) {
+    rampClick(evt: MouseEvent) {
       const isKeyPressed = window.isMacintosh ? evt.metaKey : evt.ctrlKey;
       if (isKeyPressed) {
         evt.preventDefault();
@@ -202,7 +213,7 @@ export default {
       return undefined;
     },
   },
-};
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

From b12873c6d124e6a836fd59450143e6cb46e3a1fc Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Sat, 23 Sep 2023 14:40:20 +0800
Subject: [PATCH 02/10] Fix ramp slice position bug

---
 frontend/src/components/c-ramp.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 23721fb637..1724b8bde0 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -173,12 +173,12 @@ export default defineComponent({
     // position for day granularity
     getSlicePos(date: string) {
       const total = this.getTotalForPos(this.sdate, this.udate);
-      return (new Date(this.udate).getMilliseconds() - new Date(date).getMilliseconds()) / (total + window.DAY_IN_MS);
+      return (new Date(this.udate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
     },
 
     // get duration in miliseconds between 2 date
     getTotalForPos(sinceDate: string, untilDate: string) {
-      return new Date(untilDate).getMilliseconds() - new Date(sinceDate).getMilliseconds();
+      return new Date(untilDate).valueOf() - new Date(sinceDate).valueOf();
     },
     getRampColor(commit: CommitResult, slice: Commit) {
       if (this.isDeletesContribution(commit)) {

From 06935b05a736ee58e21197e6e13eb497e87dab26 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Sat, 23 Sep 2023 15:13:45 +0800
Subject: [PATCH 03/10] Add null to signature of getContributionMessage

---
 frontend/src/components/c-ramp.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 1724b8bde0..a424313b0e 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -125,8 +125,9 @@ export default defineComponent({
       const newSize = 100 * (slice.insertions / +this.avgsize);
       return Math.max(newSize * this.rampSize, 0.5);
     },
-    getContributionMessage(slice: Commit, commit: CommitResult) {
-      if (this.tframe === 'commit') {
+    // commit of type CommitResult must be provided if tframe === 'commit', only pass null if tframe !== 'commit
+    getContributionMessage(slice: Commit, commit: CommitResult | null) {
+      if (this.tframe === 'commit' && commit !== null) {
         return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
       }
 

From 844bf8ebae56a90a62fa16acdb509285cb3d2f0f Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Sat, 23 Sep 2023 18:06:59 +0800
Subject: [PATCH 04/10] Typecast daily commits

---
 frontend/src/components/c-ramp.vue | 48 +++++++++++++++---------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index a424313b0e..40cf7cb185 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -1,37 +1,37 @@
 <template lang="pug">
 .ramp
-  template(v-if="tframe === 'commit'")
-    template(v-for="(slice, j) in user.commits")
-      template(v-for="(commit, k) in slice.commitResults")
-        a.ramp__slice(
-          draggable="false",
-          v-on:click="rampClick",
-          v-bind:href="getLink(commit)", target="_blank",
-          v-bind:title="getContributionMessage(slice, commit)",
-          v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
+    template(v-if="tframe === 'commit'")
+      template(v-for="(slice, j) in user.commits")
+        template(v-for="(commit, k) in slice.commitResults")
+          a.ramp__slice(
+            draggable="false",
+            v-on:click="rampClick",
+            v-bind:href="getLink(commit)", target="_blank",
+            v-bind:title="getContributionMessage(slice, commit)",
+            v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
             !isBrokenLink(getLink(commit)) ? '' : 'broken-link'",
-          v-bind:style="{\
+            v-bind:style="{\
             zIndex: user.commits.length - j,\
             borderLeftWidth: `${getWidth(commit)}em`,\
             right: `${((getSlicePos(slice.date)\
               + (getCommitPos(k, slice.commitResults.length))) * 100)}%`\
             }"
-        )
+          )
 
-  template(v-else)
-    a(v-bind:href="getReportLink()", target="_blank")
-      .ramp__slice(
-        draggable="false",
-        v-for="(slice, j) in user.commits",
-        v-bind:title="getContributionMessage(slice, null)",
-        v-on:click="openTabZoom(user, slice, $event)",
-        v-bind:class="`ramp__slice--color${getSliceColor(slice)}`",
-        v-bind:style="{\
+    template(v-else)
+      a(v-bind:href="getReportLink()", target="_blank")
+        .ramp__slice(
+          draggable="false",
+          v-for="(slice, j) in user.commits",
+          v-bind:title="getContributionMessage(slice, null)",
+          v-on:click="openTabZoom(user, slice, $event)",
+          v-bind:class="`ramp__slice--color${getSliceColor(slice)}`",
+          v-bind:style="{\
           zIndex: user.commits.length - j,\
           borderLeftWidth: `${getWidth(slice)}em`,\
           right: `${(getSlicePos(tframe === 'day' ? slice.date : slice.endDate) * 100)}%` \
           }"
-      )
+        )
 </template>
 
 <script lang='ts'>
@@ -132,8 +132,8 @@ export default defineComponent({
       }
 
       let title = this.tframe === 'day'
-                ? `[${slice.date}] Daily `
-                : `[${slice.date} till ${slice.endDate}] Weekly `;
+          ? `[${slice.date}] Daily `
+          : `[${slice.date} till ${slice.endDate}] Weekly `;
       title += `contribution: +${slice.insertions} -${slice.deletions} lines`;
       return title;
     },
@@ -145,7 +145,7 @@ export default defineComponent({
       }
 
       const zoomUser = { ...user };
-      zoomUser.commits = user.dailyCommits;
+      zoomUser.commits = user.dailyCommits as Commit[];
 
       const info = {
         zRepo: user.repoName,

From afb844c2e3f86b96648e7587be3e4328733e013d Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Sat, 23 Sep 2023 23:01:49 +0800
Subject: [PATCH 05/10] Remove added whitespace

---
 frontend/src/components/c-ramp.vue | 42 +++++++++++++++---------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 40cf7cb185..f602a078a9 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -1,37 +1,37 @@
 <template lang="pug">
 .ramp
-    template(v-if="tframe === 'commit'")
-      template(v-for="(slice, j) in user.commits")
-        template(v-for="(commit, k) in slice.commitResults")
-          a.ramp__slice(
-            draggable="false",
-            v-on:click="rampClick",
-            v-bind:href="getLink(commit)", target="_blank",
-            v-bind:title="getContributionMessage(slice, commit)",
-            v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
+  template(v-if="tframe === 'commit'")
+    template(v-for="(slice, j) in user.commits")
+      template(v-for="(commit, k) in slice.commitResults")
+        a.ramp__slice(
+          draggable="false",
+          v-on:click="rampClick",
+          v-bind:href="getLink(commit)", target="_blank",
+          v-bind:title="getContributionMessage(slice, commit)",
+          v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
             !isBrokenLink(getLink(commit)) ? '' : 'broken-link'",
-            v-bind:style="{\
+          v-bind:style="{\
             zIndex: user.commits.length - j,\
             borderLeftWidth: `${getWidth(commit)}em`,\
             right: `${((getSlicePos(slice.date)\
               + (getCommitPos(k, slice.commitResults.length))) * 100)}%`\
             }"
-          )
+        )
 
-    template(v-else)
-      a(v-bind:href="getReportLink()", target="_blank")
-        .ramp__slice(
-          draggable="false",
-          v-for="(slice, j) in user.commits",
-          v-bind:title="getContributionMessage(slice, null)",
-          v-on:click="openTabZoom(user, slice, $event)",
-          v-bind:class="`ramp__slice--color${getSliceColor(slice)}`",
-          v-bind:style="{\
+  template(v-else)
+    a(v-bind:href="getReportLink()", target="_blank")
+      .ramp__slice(
+        draggable="false",
+        v-for="(slice, j) in user.commits",
+        v-bind:title="getContributionMessage(slice, null)",
+        v-on:click="openTabZoom(user, slice, $event)",
+        v-bind:class="`ramp__slice--color${getSliceColor(slice)}`",
+        v-bind:style="{\
           zIndex: user.commits.length - j,\
           borderLeftWidth: `${getWidth(slice)}em`,\
           right: `${(getSlicePos(tframe === 'day' ? slice.date : slice.endDate) * 100)}%` \
           }"
-        )
+      )
 </template>
 
 <script lang='ts'>

From e3f02b07e0735f2cce16183591f89e170387adcb Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Mon, 25 Sep 2023 22:50:32 +0800
Subject: [PATCH 06/10] Fix comment

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index f602a078a9..20883d9193 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -125,7 +125,7 @@ export default defineComponent({
       const newSize = 100 * (slice.insertions / +this.avgsize);
       return Math.max(newSize * this.rampSize, 0.5);
     },
-    // commit of type CommitResult must be provided if tframe === 'commit', only pass null if tframe !== 'commit
+    // commit of type CommitResult must be provided if tframe === 'commit', only pass null if tframe !== 'commit'
     getContributionMessage(slice: Commit, commit: CommitResult | null) {
       if (this.tframe === 'commit' && commit !== null) {
         return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;

From 9856feae40235758469688bedf71037e0c2d2490 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Mon, 25 Sep 2023 23:15:36 +0800
Subject: [PATCH 07/10] Split getContributionMessage method

---
 frontend/src/components/c-ramp.vue | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index f602a078a9..b3d997f174 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -7,7 +7,7 @@
           draggable="false",
           v-on:click="rampClick",
           v-bind:href="getLink(commit)", target="_blank",
-          v-bind:title="getContributionMessage(slice, commit)",
+          v-bind:title="getContributionMessageByCommit(slice, commit)",
           v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
             !isBrokenLink(getLink(commit)) ? '' : 'broken-link'",
           v-bind:style="{\
@@ -23,7 +23,7 @@
       .ramp__slice(
         draggable="false",
         v-for="(slice, j) in user.commits",
-        v-bind:title="getContributionMessage(slice, null)",
+        v-bind:title="getContributionMessage(slice)",
         v-on:click="openTabZoom(user, slice, $event)",
         v-bind:class="`ramp__slice--color${getSliceColor(slice)}`",
         v-bind:style="{\
@@ -125,12 +125,10 @@ export default defineComponent({
       const newSize = 100 * (slice.insertions / +this.avgsize);
       return Math.max(newSize * this.rampSize, 0.5);
     },
-    // commit of type CommitResult must be provided if tframe === 'commit', only pass null if tframe !== 'commit
-    getContributionMessage(slice: Commit, commit: CommitResult | null) {
-      if (this.tframe === 'commit' && commit !== null) {
-        return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
-      }
-
+    getContributionMessageByCommit(slice: Commit, commit: CommitResult) {
+      return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
+    },
+    getContributionMessage(slice: Commit) {
       let title = this.tframe === 'day'
           ? `[${slice.date}] Daily `
           : `[${slice.date} till ${slice.endDate}] Weekly `;

From a5a09981f3aa620e8117fcc6faab5ba5e6f16bc7 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Tue, 26 Sep 2023 00:44:13 +0800
Subject: [PATCH 08/10] Remove misleading comment

---
 frontend/src/components/c-ramp.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index b3d997f174..2f566147f5 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -135,7 +135,6 @@ export default defineComponent({
       title += `contribution: +${slice.insertions} -${slice.deletions} lines`;
       return title;
     },
-    // Only to be used when this.tframe !== 'Commit'
     openTabZoom(user: User, slice: Commit, evt: MouseEvent) {
       // prevent opening of zoom tab when cmd/ctrl click
       if (window.isMacintosh ? evt.metaKey : evt.ctrlKey) {

From 3333b884331ebb327b558fc28611628101654c2d Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Sat, 30 Sep 2023 19:03:27 +0800
Subject: [PATCH 09/10] Make cast safe

---
 frontend/src/components/c-ramp.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 2f566147f5..3dbe488e82 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -142,7 +142,14 @@ export default defineComponent({
       }
 
       const zoomUser = { ...user };
-      zoomUser.commits = user.dailyCommits as Commit[];
+      // Calculate total commit result insertion and deletion for the daily/weekly commit selected
+      zoomUser.commits = user.dailyCommits.map(
+        (dailyCommit) => ({
+          insertions: dailyCommit.commitResults.reduce((acc, currCommitResult) => acc + currCommitResult.insertions, 0),
+          deletions: dailyCommit.commitResults.reduce((acc, currCommitResult) => acc + currCommitResult.deletions, 0),
+          ...dailyCommit,
+        }),
+      ) as Commit[];
 
       const info = {
         zRepo: user.repoName,

From 03f7d90520da4a25ce9b4959c2285f7da3b13c95 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Sun, 8 Oct 2023 18:48:26 +0800
Subject: [PATCH 10/10] Revert back to unsafe type cast

---
 frontend/src/components/c-ramp.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 3dbe488e82..5ca70a7b81 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -142,14 +142,8 @@ export default defineComponent({
       }
 
       const zoomUser = { ...user };
-      // Calculate total commit result insertion and deletion for the daily/weekly commit selected
-      zoomUser.commits = user.dailyCommits.map(
-        (dailyCommit) => ({
-          insertions: dailyCommit.commitResults.reduce((acc, currCommitResult) => acc + currCommitResult.insertions, 0),
-          deletions: dailyCommit.commitResults.reduce((acc, currCommitResult) => acc + currCommitResult.deletions, 0),
-          ...dailyCommit,
-        }),
-      ) as Commit[];
+      // Type cast here is unsafe
+      zoomUser.commits = user.dailyCommits as Commit[];
 
       const info = {
         zRepo: user.repoName,