From cc8c0950aa8162f15e017c3afc9c405ec411b11a Mon Sep 17 00:00:00 2001
From: sopa301 <96387349+sopa301@users.noreply.github.com>
Date: Mon, 19 Feb 2024 12:22:15 +0800
Subject: [PATCH 1/7] Create component file

---
 .../src/components/c-zoom-commit-message.vue  | 190 ++++++++++++++++++
 frontend/src/views/c-zoom.vue                 |  18 +-
 2 files changed, 202 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/c-zoom-commit-message.vue

diff --git a/frontend/src/components/c-zoom-commit-message.vue b/frontend/src/components/c-zoom-commit-message.vue
new file mode 100644
index 0000000000..140b9fb03e
--- /dev/null
+++ b/frontend/src/components/c-zoom-commit-message.vue
@@ -0,0 +1,190 @@
+<template lang="pug">
+//- use tabindex to enable focus property on div
+.commit-message(
+  tabindex="-1",
+  v-bind:key="slice.hash",
+  v-bind:class="{ 'message-body active': slice.messageBody !== '' }"
+)
+  span.code-merge-icon(v-if="slice.isMergeCommit")
+    font-awesome-icon(icon="code-merge")
+    span &nbsp;
+  a.message-title(v-bind:href="getSliceLink(slice)",
+    v-bind:class="!isBrokenLink(getSliceLink(slice)) ? '' : 'broken-link'", target="_blank")
+    .within-border {{ slice.messageTitle.substr(0, 50) }}
+    .not-within-border(v-if="slice.messageTitle.length > 50")
+      |{{ slice.messageTitle.substr(50) }}
+  span(data-cy="changes") &nbsp; (+{{ slice.insertions }} -{{ slice.deletions }} lines) &nbsp;
+  .hash
+    span {{ slice.hash.substr(0, 7) }}
+  span.fileTypeLabel(
+    v-if="containsAtLeastOneSelected(Object.keys(slice.fileTypesAndContributionMap))",
+    v-for="fileType in\
+      Object.keys(slice.fileTypesAndContributionMap)",
+    vbind:key="fileType",
+    v-bind:style="{\
+      'background-color': fileTypeColors[fileType],\
+      'color': getFontColor(fileTypeColors[fileType])\
+      }"
+  ) {{ fileType }}
+  template(v-if="slice.tags")
+    .tag(
+      v-for="tag in slice.tags",
+      vbind:key="tag",
+      tabindex="-1", v-bind:class="[`${slice.hash}`, tag]"
+    )
+      font-awesome-icon(icon="tags")
+      span &nbsp;{{ tag }}
+  a(
+    v-if="slice.messageBody !== ''",
+    v-on:click="toggleSelectedCommitMessageBody(slice)"
+  )
+    .tooltip(
+      v-on:mouseover="onTooltipHover(`${slice.hash}-show-hide-message-body`)",
+      v-on:mouseout="resetTooltip(`${slice.hash}-show-hide-message-body`)"
+    )
+      font-awesome-icon.commit-message--button(icon="ellipsis-h")
+      span.tooltip-text(
+        v-bind:ref="`${slice.hash}-show-hide-message-body`"
+        ) Click to show/hide the commit message body
+  .body(v-if="slice.messageBody !== ''", v-show="slice.isOpen")
+    pre {{ slice.messageBody }}
+      .dashed-border
+  template(
+    v-if="showDiffstat"
+  )
+    c-stacked-bar-chart(
+      v-bind:bars="getContributionBars(slice)"
+    )
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapState } from 'vuex';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
+import cRamp from './c-ramp.vue';
+import cStackedBarChart from './c-stacked-bar-chart.vue';
+
+import {
+  Bar,
+  CommitResult,
+} from '../types/types';
+import { StoreState } from '../types/vuex.d';
+
+export default defineComponent({
+  name: 'c-zoom-commit-message',
+  components: {
+    FontAwesomeIcon,
+    cRamp,
+    cStackedBarChart,
+  },
+  mixins: [brokenLinkDisabler, tooltipPositioner],
+  props: {
+    day: {
+      type: Object,
+      required: true,
+    },
+    showDiffstat: {
+      type: Boolean,
+      required: true,
+    },
+    selectedFileTypes: {
+      type: Array,
+      required: true,
+    },
+    fileTypeColors: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState({
+      fileTypeColors: (state: unknown) => (state as StoreState).fileTypeColors,
+      info: (state: unknown) => (state as StoreState).tabZoomInfo,
+    }),
+  },
+
+  methods: {
+    getContributionBars(slice: CommitResult): Array<Bar> {
+      let currentBarWidth = 0;
+      const fullBarWidth = 100;
+
+      let avgContributionSize = this.info.zAvgContributionSize;
+      if (avgContributionSize === undefined || avgContributionSize > 1000) {
+        avgContributionSize = 1000;
+      }
+
+      const contributionPerFullBar = avgContributionSize;
+
+      const diffstatMappings: { [key: string]: number } = { limegreen: slice.insertions, red: slice.deletions };
+      const allContributionBars: Array<Bar> = [];
+
+      if (contributionPerFullBar === 0) {
+        return allContributionBars;
+      }
+
+      Object.keys(diffstatMappings)
+        .forEach((color) => {
+          const contribution = diffstatMappings[color];
+          let barWidth = (contribution / contributionPerFullBar) * fullBarWidth;
+          const contributionBars = [];
+
+          // if contribution bar for file type is able to fit on the current line
+          if (currentBarWidth + barWidth < fullBarWidth) {
+            contributionBars.push(barWidth);
+            currentBarWidth += barWidth;
+          } else {
+            // take up all the space left on the current line
+            contributionBars.push(fullBarWidth - currentBarWidth);
+            barWidth -= fullBarWidth - currentBarWidth;
+            // additional bar width will start on a new line
+            const numOfFullBars = Math.floor(barWidth / fullBarWidth);
+            for (let i = 0; i < numOfFullBars; i += 1) {
+              contributionBars.push(fullBarWidth);
+            }
+            const remainingBarWidth = barWidth % fullBarWidth;
+            if (remainingBarWidth > 0) {
+              contributionBars.push(remainingBarWidth);
+            }
+            currentBarWidth = remainingBarWidth;
+          }
+
+          contributionBars.forEach((width) => {
+            const bar = {
+              color,
+              width,
+            };
+            allContributionBars.push(bar);
+          });
+        });
+
+      return allContributionBars;
+    },
+
+    getSliceLink(slice: CommitResult): string | undefined {
+      if (this.info.zIsMerged) {
+        return window.getCommitLink(slice.repoId, slice.hash);
+      }
+      return window.getCommitLink(this.info.zUser!.repoId, slice.hash);
+    },
+
+    toggleSelectedCommitMessageBody(slice: CommitResult) {
+      this.$store.commit('toggleZoomCommitMessageBody', slice);
+    },
+    containsAtLeastOneSelected(fileTypes: Array<string>): boolean {
+      for (let i = 0; i < fileTypes.length; i += 1) {
+        if (this.selectedFileTypes.includes(fileTypes[i])) {
+          return true;
+        }
+      }
+      return false;
+    },
+
+    getFontColor(color: string) {
+      return window.getFontColor(color);
+    },
+  },
+});
+</script>
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index 51494f0b92..f402fd4066 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -75,9 +75,9 @@
         v-for="fileType in fileTypes",
         v-bind:key="fileType",
         v-bind:style="{\
-                'background-color': fileTypeColors[fileType],\
-                'color': getFontColor(fileTypeColors[fileType])\
-                }"
+          'background-color': fileTypeColors[fileType],\
+          'color': getFontColor(fileTypeColors[fileType])\
+          }"
       )
         input.mui-checkbox--fileType(type="checkbox", v-bind:value="fileType",
           v-on:change="updateSelectedFileTypesHash", v-model="selectedFileTypes")
@@ -86,6 +86,11 @@
   .zoom__day(v-for="day in selectedCommits", v-bind:key="day.date")
     h3(v-if="info.zTimeFrame === 'week'") Week of {{ day.date }}
     h3(v-else) {{ day.date }}
+    .c-zoom-commit-message(v-for="slice in day.commitResults", tabindex="-1",
+      v-bind:key="slice.hash", v-bind:day="day", v-bind:slice="slice",
+      v-bind:selectedFileTypes="selectedFileTypes", v-bind:fileTypeColors="fileTypeColors",
+      v-bind:class="{ 'message-body active': slice.messageBody !== '' }")
+
     //- use tabindex to enable focus property on div
     .commit-message(
       tabindex="-1",
@@ -153,6 +158,7 @@ import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from '../components/c-ramp.vue';
 import cStackedBarChart from '../components/c-stacked-bar-chart.vue';
+import cZoomCommitMessage from '../components/c-zoom-commit-message.vue';
 import {
   Bar,
   Commit,
@@ -182,6 +188,7 @@ export default defineComponent({
     FontAwesomeIcon,
     cRamp,
     cStackedBarChart,
+    cZoomCommitMessage,
   },
   mixins: [brokenLinkDisabler, tooltipPositioner],
   data() {
@@ -444,8 +451,8 @@ export default defineComponent({
 
     updateSelectedFileTypesHash() {
       const fileTypeHash = this.selectedFileTypes.length > 0
-          ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
-          : '';
+        ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
+        : '';
 
       window.addHash('zFT', fileTypeHash);
       window.encodeHash();
@@ -657,5 +664,4 @@ export default defineComponent({
     }
   }
 }
-
 </style>

From d21d8f86c767bcebe877ed4f8cde2196ede1418e Mon Sep 17 00:00:00 2001
From: sopa301 <96387349+sopa301@users.noreply.github.com>
Date: Mon, 19 Feb 2024 13:23:05 +0800
Subject: [PATCH 2/7] Some stuff

---
 .../src/components/c-zoom-commit-message.vue  |  92 +++++++++++
 frontend/src/views/c-zoom.vue                 | 149 +-----------------
 2 files changed, 93 insertions(+), 148 deletions(-)

diff --git a/frontend/src/components/c-zoom-commit-message.vue b/frontend/src/components/c-zoom-commit-message.vue
index 140b9fb03e..599c57cc70 100644
--- a/frontend/src/components/c-zoom-commit-message.vue
+++ b/frontend/src/components/c-zoom-commit-message.vue
@@ -188,3 +188,95 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+@import '../styles/_colors.scss';
+
+.commit-message {
+  border: 1px solid transparent;
+  padding: 5px;
+
+  &:focus,
+  &:focus-within {
+    border: 1px solid mui-color('blue', '500');
+  }
+
+  &.active {
+    .body {
+      background-color: mui-color('white');
+      border: 1px solid mui-color('grey', '700');
+      display: grid;
+      margin: .25rem 0 .25rem 0;
+      overflow-x: auto;
+      padding: .4rem;
+      resize: none;
+
+      pre {
+        @include mono-font;
+        position: relative;
+
+        .dashed-border {
+          border-right: 1px dashed mui-color('grey', '500'); // 72nd character line
+          height: 100%;
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+          width: 72ch;
+        }
+      }
+    }
+  }
+
+  .code-merge-icon {
+    color: mui-color('grey');
+
+    .fa-code-merge {
+      width: .65rem;
+    }
+  }
+
+  .body {
+    display: none;
+  }
+
+  .tag {
+    cursor: pointer;
+
+    &:focus {
+      border: 1px solid mui-color('blue', '500');
+      outline: none;
+    }
+  }
+
+  &--button {
+    color: mui-color('grey');
+    padding-left: .5rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  pre {
+    margin: 0;
+  }
+
+  span.loc {
+    color: mui-color('grey');
+  }
+
+  .message-title {
+    @include mono-font;
+    display: inline;
+
+    .within-border {
+      display: inline;
+    }
+
+    .not-within-border {
+      border-left: 1px dashed mui-color('grey', '500'); // 50th character line
+      display: inline;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index f402fd4066..e5c4b05ab2 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -86,68 +86,10 @@
   .zoom__day(v-for="day in selectedCommits", v-bind:key="day.date")
     h3(v-if="info.zTimeFrame === 'week'") Week of {{ day.date }}
     h3(v-else) {{ day.date }}
-    .c-zoom-commit-message(v-for="slice in day.commitResults", tabindex="-1",
+    .c-zoom-commit-message(v-for="slice in day.commitResults",
       v-bind:key="slice.hash", v-bind:day="day", v-bind:slice="slice",
       v-bind:selectedFileTypes="selectedFileTypes", v-bind:fileTypeColors="fileTypeColors",
       v-bind:class="{ 'message-body active': slice.messageBody !== '' }")
-
-    //- use tabindex to enable focus property on div
-    .commit-message(
-      tabindex="-1",
-      v-for="slice in day.commitResults",
-      v-bind:key="slice.hash",
-      v-bind:class="{ 'message-body active': slice.messageBody !== '' }"
-    )
-      span.code-merge-icon(v-if="slice.isMergeCommit")
-        font-awesome-icon(icon="code-merge")
-        span &nbsp;
-      a.message-title(v-bind:href="getSliceLink(slice)",
-        v-bind:class="!isBrokenLink(getSliceLink(slice)) ? '' : 'broken-link'", target="_blank")
-        .within-border {{ slice.messageTitle.substr(0, 50) }}
-        .not-within-border(v-if="slice.messageTitle.length > 50")
-          |{{ slice.messageTitle.substr(50) }}
-      span(data-cy="changes") &nbsp; (+{{ slice.insertions }} -{{ slice.deletions }} lines) &nbsp;
-      .hash
-        span {{ slice.hash.substr(0, 7) }}
-      span.fileTypeLabel(
-        v-if="containsAtLeastOneSelected(Object.keys(slice.fileTypesAndContributionMap))",
-        v-for="fileType in\
-          Object.keys(slice.fileTypesAndContributionMap)",
-        vbind:key="fileType",
-        v-bind:style="{\
-          'background-color': fileTypeColors[fileType],\
-          'color': getFontColor(fileTypeColors[fileType])\
-          }"
-      ) {{ fileType }}
-      template(v-if="slice.tags")
-        .tag(
-          v-for="tag in slice.tags",
-          vbind:key="tag",
-          tabindex="-1", v-bind:class="[`${slice.hash}`, tag]"
-        )
-          font-awesome-icon(icon="tags")
-          span &nbsp;{{ tag }}
-      a(
-        v-if="slice.messageBody !== ''",
-        v-on:click="toggleSelectedCommitMessageBody(slice)"
-      )
-        .tooltip(
-          v-on:mouseover="onTooltipHover(`${slice.hash}-show-hide-message-body`)",
-          v-on:mouseout="resetTooltip(`${slice.hash}-show-hide-message-body`)"
-        )
-          font-awesome-icon.commit-message--button(icon="ellipsis-h")
-          span.tooltip-text(
-            v-bind:ref="`${slice.hash}-show-hide-message-body`"
-            ) Click to show/hide the commit message body
-      .body(v-if="slice.messageBody !== ''", v-show="slice.isOpen")
-        pre {{ slice.messageBody }}
-          .dashed-border
-      template(
-        v-if="showDiffstat"
-      )
-        c-stacked-bar-chart(
-          v-bind:bars="getContributionBars(slice)"
-        )
 </template>
 
 <script lang="ts">
@@ -574,94 +516,5 @@ export default defineComponent({
       }
     }
   }
-
-  /* Commit Message Body in Zoom Tab */
-  .commit-message {
-    border: 1px solid transparent;
-    padding: 5px;
-
-    &:focus,
-    &:focus-within {
-      border: 1px solid mui-color('blue', '500');
-    }
-
-    &.active {
-      .body {
-        background-color: mui-color('white');
-        border: 1px solid mui-color('grey', '700');
-        display: grid;
-        margin: .25rem 0 .25rem 0;
-        overflow-x: auto;
-        padding: .4rem;
-        resize: none;
-
-        pre {
-          @include mono-font;
-          position: relative;
-
-          .dashed-border {
-            border-right: 1px dashed mui-color('grey', '500'); // 72nd character line
-            height: 100%;
-            pointer-events: none;
-            position: absolute;
-            top: 0;
-            width: 72ch;
-          }
-        }
-      }
-    }
-
-    .code-merge-icon {
-      color: mui-color('grey');
-
-      .fa-code-merge {
-        width: .65rem;
-      }
-    }
-
-    .body {
-      display: none;
-    }
-
-    .tag {
-      cursor: pointer;
-
-      &:focus {
-        border: 1px solid mui-color('blue', '500');
-        outline: none;
-      }
-    }
-
-    &--button {
-      color: mui-color('grey');
-      padding-left: .5rem;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    pre {
-      margin: 0;
-    }
-
-    span.loc {
-      color: mui-color('grey');
-    }
-
-    .message-title {
-      @include mono-font;
-      display: inline;
-
-      .within-border {
-        display: inline;
-      }
-
-      .not-within-border {
-        border-left: 1px dashed mui-color('grey', '500'); // 50th character line
-        display: inline;
-      }
-    }
-  }
 }
 </style>

From 976a6c9849714f4fd4136c91d002871e006b0cb4 Mon Sep 17 00:00:00 2001
From: sopa301 <96387349+sopa301@users.noreply.github.com>
Date: Tue, 20 Feb 2024 23:41:00 +0800
Subject: [PATCH 3/7] Extract commit message

---
 .../src/components/c-zoom-commit-message.vue  | 29 +++----
 frontend/src/views/c-zoom.vue                 | 87 +------------------
 2 files changed, 18 insertions(+), 98 deletions(-)

diff --git a/frontend/src/components/c-zoom-commit-message.vue b/frontend/src/components/c-zoom-commit-message.vue
index 599c57cc70..21908413a4 100644
--- a/frontend/src/components/c-zoom-commit-message.vue
+++ b/frontend/src/components/c-zoom-commit-message.vue
@@ -55,23 +55,21 @@
     c-stacked-bar-chart(
       v-bind:bars="getContributionBars(slice)"
     )
-
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { mapState } from 'vuex';
+import { defineComponent, PropType } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from './c-ramp.vue';
 import cStackedBarChart from './c-stacked-bar-chart.vue';
-
 import {
   Bar,
+  Commit,
   CommitResult,
+  User,
 } from '../types/types';
-import { StoreState } from '../types/vuex.d';
 
 export default defineComponent({
   name: 'c-zoom-commit-message',
@@ -82,8 +80,16 @@ export default defineComponent({
   },
   mixins: [brokenLinkDisabler, tooltipPositioner],
   props: {
+    slice: {
+      type: Object as PropType<CommitResult>,
+      required: true,
+    },
+    info: {
+      type: Object as PropType<{ zUser: User | undefined, zAvgContributionSize: number, zIsMerged: Boolean }>,
+      required: true,
+    },
     day: {
-      type: Object,
+      type: Object as PropType<Commit>,
       required: true,
     },
     showDiffstat: {
@@ -91,21 +97,14 @@ export default defineComponent({
       required: true,
     },
     selectedFileTypes: {
-      type: Array,
+      type: Array<String>,
       required: true,
     },
     fileTypeColors: {
-      type: Object,
+      type: Object as PropType<{ [key: string]: string }>,
       required: true,
     },
   },
-  computed: {
-    ...mapState({
-      fileTypeColors: (state: unknown) => (state as StoreState).fileTypeColors,
-      info: (state: unknown) => (state as StoreState).tabZoomInfo,
-    }),
-  },
-
   methods: {
     getContributionBars(slice: CommitResult): Array<Bar> {
       let currentBarWidth = 0;
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index e5c4b05ab2..8d94cdefa8 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -86,10 +86,10 @@
   .zoom__day(v-for="day in selectedCommits", v-bind:key="day.date")
     h3(v-if="info.zTimeFrame === 'week'") Week of {{ day.date }}
     h3(v-else) {{ day.date }}
-    .c-zoom-commit-message(v-for="slice in day.commitResults",
-      v-bind:key="slice.hash", v-bind:day="day", v-bind:slice="slice",
-      v-bind:selectedFileTypes="selectedFileTypes", v-bind:fileTypeColors="fileTypeColors",
-      v-bind:class="{ 'message-body active': slice.messageBody !== '' }")
+    template(v-for="slice in day.commitResults", v-bind:key="slice.hash")
+      c-zoom-commit-message(v-bind:day="day", v-bind:slice="slice",
+        v-bind:selectedFileTypes="selectedFileTypes", v-bind:fileTypeColors="fileTypeColors",
+        v-bind:info="info", v-bind:showDiffstat="showDiffstat")
 </template>
 
 <script lang="ts">
@@ -99,10 +99,8 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from '../components/c-ramp.vue';
-import cStackedBarChart from '../components/c-stacked-bar-chart.vue';
 import cZoomCommitMessage from '../components/c-zoom-commit-message.vue';
 import {
-  Bar,
   Commit,
   CommitResult,
   DailyCommit,
@@ -129,7 +127,6 @@ export default defineComponent({
   components: {
     FontAwesomeIcon,
     cRamp,
-    cStackedBarChart,
     cZoomCommitMessage,
   },
   mixins: [brokenLinkDisabler, tooltipPositioner],
@@ -282,69 +279,6 @@ export default defineComponent({
       this.selectedFileTypes = this.fileTypes.slice();
     },
 
-    getContributionBars(slice: CommitResult): Array<Bar> {
-      let currentBarWidth = 0;
-      const fullBarWidth = 100;
-
-      let avgContributionSize = this.info.zAvgContributionSize;
-      if (avgContributionSize === undefined || avgContributionSize > 1000) {
-        avgContributionSize = 1000;
-      }
-
-      const contributionPerFullBar = avgContributionSize;
-
-      const diffstatMappings: { [key: string]: number } = { limegreen: slice.insertions, red: slice.deletions };
-      const allContributionBars: Array<Bar> = [];
-
-      if (contributionPerFullBar === 0) {
-        return allContributionBars;
-      }
-
-      Object.keys(diffstatMappings)
-        .forEach((color) => {
-          const contribution = diffstatMappings[color];
-          let barWidth = (contribution / contributionPerFullBar) * fullBarWidth;
-          const contributionBars = [];
-
-          // if contribution bar for file type is able to fit on the current line
-          if (currentBarWidth + barWidth < fullBarWidth) {
-            contributionBars.push(barWidth);
-            currentBarWidth += barWidth;
-          } else {
-            // take up all the space left on the current line
-            contributionBars.push(fullBarWidth - currentBarWidth);
-            barWidth -= fullBarWidth - currentBarWidth;
-            // additional bar width will start on a new line
-            const numOfFullBars = Math.floor(barWidth / fullBarWidth);
-            for (let i = 0; i < numOfFullBars; i += 1) {
-              contributionBars.push(fullBarWidth);
-            }
-            const remainingBarWidth = barWidth % fullBarWidth;
-            if (remainingBarWidth > 0) {
-              contributionBars.push(remainingBarWidth);
-            }
-            currentBarWidth = remainingBarWidth;
-          }
-
-          contributionBars.forEach((width) => {
-            const bar = {
-              color,
-              width,
-            };
-            allContributionBars.push(bar);
-          });
-        });
-
-      return allContributionBars;
-    },
-
-    getSliceLink(slice: CommitResult): string | undefined {
-      if (this.info.zIsMerged) {
-        return window.getCommitLink(slice.repoId, slice.hash);
-      }
-      return window.getCommitLink(this.info.zUser!.repoId, slice.hash);
-    },
-
     scrollToCommit(tag: string, commit: string) {
       const el = this.$el.getElementsByClassName(`${commit} ${tag}`)[0];
       if (el) {
@@ -419,10 +353,6 @@ export default defineComponent({
       encodeHash();
     },
 
-    toggleSelectedCommitMessageBody(slice: CommitResult) {
-      this.$store.commit('toggleZoomCommitMessageBody', slice);
-    },
-
     toggleAllCommitMessagesBody(isOpen: boolean) {
       this.showAllCommitMessageBody = isOpen;
       this.$store.commit('setAllZoomCommitMessageBody', {
@@ -451,15 +381,6 @@ export default defineComponent({
       window.encodeHash();
     },
 
-    containsAtLeastOneSelected(fileTypes: Array<string>): boolean {
-      for (let i = 0; i < fileTypes.length; i += 1) {
-        if (this.selectedFileTypes.includes(fileTypes[i])) {
-          return true;
-        }
-      }
-      return false;
-    },
-
     getFontColor(color: string) {
       return window.getFontColor(color);
     },

From 3d2f1b818eeb6863310214972a436ca5d1669e29 Mon Sep 17 00:00:00 2001
From: sopa301 <96387349+sopa301@users.noreply.github.com>
Date: Tue, 20 Feb 2024 23:50:30 +0800
Subject: [PATCH 4/7] Fix style

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

diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index 8d94cdefa8..2772944964 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -88,8 +88,8 @@
     h3(v-else) {{ day.date }}
     template(v-for="slice in day.commitResults", v-bind:key="slice.hash")
       c-zoom-commit-message(v-bind:day="day", v-bind:slice="slice",
-        v-bind:selectedFileTypes="selectedFileTypes", v-bind:fileTypeColors="fileTypeColors",
-        v-bind:info="info", v-bind:showDiffstat="showDiffstat")
+        v-bind:selected-file-types="selectedFileTypes", v-bind:file-type-colors="fileTypeColors",
+        v-bind:info="info", v-bind:show-diffstat="showDiffstat")
 </template>
 
 <script lang="ts">

From a453a4614f30faabc991bef1136c0e841509243e Mon Sep 17 00:00:00 2001
From: sopa301 <96387349+sopa301@users.noreply.github.com>
Date: Tue, 20 Feb 2024 23:56:46 +0800
Subject: [PATCH 5/7] Fix indentation

---
 frontend/src/views/c-zoom.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index 2772944964..eef7dc2c1b 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -75,9 +75,9 @@
         v-for="fileType in fileTypes",
         v-bind:key="fileType",
         v-bind:style="{\
-          'background-color': fileTypeColors[fileType],\
-          'color': getFontColor(fileTypeColors[fileType])\
-          }"
+                'background-color': fileTypeColors[fileType],\
+                'color': getFontColor(fileTypeColors[fileType])\
+                }"
       )
         input.mui-checkbox--fileType(type="checkbox", v-bind:value="fileType",
           v-on:change="updateSelectedFileTypesHash", v-model="selectedFileTypes")
@@ -327,8 +327,8 @@ export default defineComponent({
 
     updateSelectedFileTypesHash() {
       const fileTypeHash = this.selectedFileTypes.length > 0
-        ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
-        : '';
+          ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
+          : '';
 
       window.addHash('zFT', fileTypeHash);
       window.encodeHash();

From 47dff4ffcac36cc98a0ee3b3a7f15c6f3f4ad2b3 Mon Sep 17 00:00:00 2001
From: sopa301 <96387349+sopa301@users.noreply.github.com>
Date: Sat, 16 Mar 2024 17:39:22 +0800
Subject: [PATCH 6/7] Remove unnecessary prop

---
 frontend/src/components/c-zoom-commit-message.vue |  5 -----
 frontend/src/views/c-zoom.vue                     | 12 ++++++------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/c-zoom-commit-message.vue b/frontend/src/components/c-zoom-commit-message.vue
index 21908413a4..7a0a11df9a 100644
--- a/frontend/src/components/c-zoom-commit-message.vue
+++ b/frontend/src/components/c-zoom-commit-message.vue
@@ -66,7 +66,6 @@ import cRamp from './c-ramp.vue';
 import cStackedBarChart from './c-stacked-bar-chart.vue';
 import {
   Bar,
-  Commit,
   CommitResult,
   User,
 } from '../types/types';
@@ -88,10 +87,6 @@ export default defineComponent({
       type: Object as PropType<{ zUser: User | undefined, zAvgContributionSize: number, zIsMerged: Boolean }>,
       required: true,
     },
-    day: {
-      type: Object as PropType<Commit>,
-      required: true,
-    },
     showDiffstat: {
       type: Boolean,
       required: true,
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index c10dc63f31..3f3bbc48ec 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -75,9 +75,9 @@
         v-for="fileType in fileTypes",
         v-bind:key="fileType",
         v-bind:style="{\
-                'background-color': fileTypeColors[fileType],\
-                'color': getFontColor(fileTypeColors[fileType])\
-                }"
+          'background-color': fileTypeColors[fileType],\
+          'color': getFontColor(fileTypeColors[fileType])\
+          }"
       )
         input.mui-checkbox--fileType(type="checkbox", v-bind:value="fileType",
           v-on:change="updateSelectedFileTypesHash", v-model="selectedFileTypes")
@@ -87,7 +87,7 @@
     h3(v-if="info.zTimeFrame === 'week'") Week of {{ day.date }}
     h3(v-else) {{ day.date }}
     template(v-for="slice in day.commitResults", v-bind:key="slice.hash")
-      c-zoom-commit-message(v-bind:day="day", v-bind:slice="slice",
+      c-zoom-commit-message(v-bind:slice="slice",
         v-bind:selected-file-types="selectedFileTypes", v-bind:file-type-colors="fileTypeColors",
         v-bind:info="info", v-bind:show-diffstat="showDiffstat")
 </template>
@@ -334,8 +334,8 @@ export default defineComponent({
 
     updateSelectedFileTypesHash() {
       const fileTypeHash = this.selectedFileTypes.length > 0
-          ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
-          : '';
+        ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
+        : '';
 
       window.addHash('zFT', fileTypeHash);
       window.encodeHash();

From 51338c40e4c0853500af828358e795d562764337 Mon Sep 17 00:00:00 2001
From: sopa301 <96387349+sopa301@users.noreply.github.com>
Date: Wed, 20 Mar 2024 20:54:05 +0800
Subject: [PATCH 7/7] Remove empty lines between methods

---
 frontend/src/components/c-zoom-commit-message.vue |  3 ---
 frontend/src/views/c-zoom.vue                     | 11 -----------
 2 files changed, 14 deletions(-)

diff --git a/frontend/src/components/c-zoom-commit-message.vue b/frontend/src/components/c-zoom-commit-message.vue
index 7a0a11df9a..20ee4f78ff 100644
--- a/frontend/src/components/c-zoom-commit-message.vue
+++ b/frontend/src/components/c-zoom-commit-message.vue
@@ -156,14 +156,12 @@ export default defineComponent({
 
       return allContributionBars;
     },
-
     getSliceLink(slice: CommitResult): string | undefined {
       if (this.info.zIsMerged) {
         return window.getCommitLink(slice.repoId, slice.hash);
       }
       return window.getCommitLink(this.info.zUser!.repoId, slice.hash);
     },
-
     toggleSelectedCommitMessageBody(slice: CommitResult) {
       this.$store.commit('toggleZoomCommitMessageBody', slice);
     },
@@ -175,7 +173,6 @@ export default defineComponent({
       }
       return false;
     },
-
     getFontColor(color: string) {
       return window.getFontColor(color);
     },
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index 3f3bbc48ec..74fd0afd72 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -283,14 +283,12 @@ export default defineComponent({
       this.updateFileTypes();
       this.selectedFileTypes = this.fileTypes.slice();
     },
-
     scrollToCommit(tag: string, commit: string) {
       const el = this.$el.getElementsByClassName(`${commit} ${tag}`)[0];
       if (el) {
         el.focus();
       }
     },
-
     updateFileTypes() {
       if (!this.filteredUser) return;
 
@@ -306,12 +304,10 @@ export default defineComponent({
         (fileType) => commitsFileTypes.has(fileType),
       );
     },
-
     retrieveHashes() {
       this.retrieveSortHash();
       this.retrieveSelectedFileTypesHash();
     },
-
     retrieveSortHash() {
       const hash = window.hashParams;
       if (hash.zCST && Object.values(CommitsSortType).includes(hash.zCST as CommitsSortType)) {
@@ -321,7 +317,6 @@ export default defineComponent({
         this.toReverseSortedCommits = (hash.zRSC === 'true');
       }
     },
-
     retrieveSelectedFileTypesHash() {
       const hash = window.hashParams;
 
@@ -331,7 +326,6 @@ export default defineComponent({
           .filter((fileType) => this.fileTypes.includes(fileType));
       }
     },
-
     updateSelectedFileTypesHash() {
       const fileTypeHash = this.selectedFileTypes.length > 0
         ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
@@ -340,7 +334,6 @@ export default defineComponent({
       window.addHash('zFT', fileTypeHash);
       window.encodeHash();
     },
-
     setInfoHash() {
       const { addHash, encodeHash } = window;
       const {
@@ -359,7 +352,6 @@ export default defineComponent({
       addHash('zFR', zFromRamp.toString());
       encodeHash();
     },
-
     toggleAllCommitMessagesBody(isOpen: boolean) {
       this.showAllCommitMessageBody = isOpen;
       this.$store.commit('setAllZoomCommitMessageBody', {
@@ -367,11 +359,9 @@ export default defineComponent({
         commits: this.selectedCommits,
       });
     },
-
     toggleDiffstatView(isVisible: boolean) {
       this.showDiffstat = isVisible;
     },
-
     removeZoomHashes() {
       window.removeHash('zA');
       window.removeHash('zR');
@@ -388,7 +378,6 @@ export default defineComponent({
       window.removeHash('zFR');
       window.encodeHash();
     },
-
     getFontColor(color: string) {
       return window.getFontColor(color);
     },