From ec605705fe6e14ff60df3a77e396fd071afb01f6 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 1 Apr 2024 15:22:09 +0800
Subject: [PATCH 01/40] add optimise timeline feature

---
 frontend/src/components/c-ramp.vue           | 72 ++++++++++++++------
 frontend/src/components/c-summary-charts.vue |  8 ++-
 frontend/src/views/c-summary.vue             | 10 ++-
 3 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 55e130d7ec..6693bcff32 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -1,22 +1,25 @@
 <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="getContributionMessageByCommit(slice, commit)",
-          v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
-            !isBrokenLink(getLink(commit)) ? '' : 'broken-link'",
-          v-bind:style="{\
-            zIndex: user.commits.length - j,\
-            borderLeftWidth: `${getWidth(commit)}em`,\
-            right: `${((getSlicePos(slice.date)\
-              + (getCommitPos(k, slice.commitResults.length))) * 100)}%`\
-            }"
-        )
+    .ramp-padding(
+        v-bind:style="optimiseTimeline ? {width: `${100 - optimisedPadding * 2}%`, left: `${optimisedPadding}%`} : ''"
+      )
+      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="getContributionMessageByCommit(slice, commit)",
+            v-bind:class="`ramp__slice--color${getRampColor(commit, slice)}`,\
+              !isBrokenLink(getLink(commit)) ? '' : 'broken-link'",
+            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")
@@ -30,8 +33,11 @@
           zIndex: user.commits.length - j,\
           borderLeftWidth: `${getWidth(slice)}em`,\
           right: `${(getSlicePos(tframe === 'day' ? slice.date : slice.endDate) * 100)}%` \
-          }"
+        }"
       )
+.date-indicators
+  span(v-if="optimiseTimeline") {{new Date(optimisedMinimumDate).toLocaleDateString()}}
+  span(v-if="optimiseTimeline") {{new Date(optimisedMaximumDate).toLocaleDateString()}}
 </template>
 
 <script lang='ts'>
@@ -83,10 +89,15 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    optimiseTimeline: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       rampSize: 0.01 as number,
+      optimisedPadding: 3, // as % of total timeline,
     };
   },
 
@@ -97,6 +108,12 @@ export default defineComponent({
     deletesContributionRampSize(): number {
       return this.rampSize * 20;
     },
+    optimisedMinimumDate(): number {
+      return Math.min(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
+    },
+    optimisedMaximumDate(): number {
+      return Math.max(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
+    },
   },
 
   methods: {
@@ -177,13 +194,18 @@ export default defineComponent({
     },
     // position for day granularity
     getSlicePos(date: string) {
+      if (this.optimiseTimeline) {
+        const total = this.getTotalForPos(this.optimisedMinimumDate, this.optimisedMaximumDate);
+        return (new Date(this.optimisedMaximumDate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
+      }
       const total = this.getTotalForPos(this.sdate, this.udate);
       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).valueOf() - new Date(sinceDate).valueOf();
+    getTotalForPos(sinceDate: string | number, untilDate: string | number) {
+      return (typeof untilDate === 'string' ? new Date(untilDate).valueOf() : untilDate)
+      - (typeof sinceDate === 'string' ? new Date(sinceDate).valueOf() : sinceDate);
     },
     getRampColor(commit: CommitResult, slice: Commit) {
       if (this.isDeletesContribution(commit)) {
@@ -267,4 +289,16 @@ export default defineComponent({
     }
   }
 }
+
+.ramp-padding {
+  height: 100%;
+  position: relative;
+}
+
+.date-indicators {
+  @include mono-font;
+  display: flex;
+  justify-content: space-between;
+  padding-top: 1px;
+}
 </style>
diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index c97410880a..9980801d42 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -271,7 +271,9 @@
           v-bind:avgsize="avgCommitSize",
           v-bind:mergegroup="isGroupMerged(getGroupName(repo))",
           v-bind:filtersearch="filterSearch",
-          v-bind:is-widget-mode="isChartGroupWidgetMode")
+          v-bind:is-widget-mode="isChartGroupWidgetMode",
+          v-bind:optimise-timeline="optimiseTimeline"
+        )
         .overlay
 
       .summary-chart__contribution
@@ -371,6 +373,10 @@ export default defineComponent({
       type: Number,
       default: undefined,
     },
+    optimiseTimeline: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index b6149b702a..ec57ec8af3 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -73,6 +73,12 @@
             v-bind:disabled="filterGroupSelection === 'groupByNone'"
           )
           span merge all groups
+        label.trim-timeline
+          input.mui-checkbox(
+            type="checkbox",
+            v-model="optimiseTimeline"
+          )
+          span optimise timeline
   .error-message-box(v-if="Object.entries(errorMessages).length && !isWidgetMode")
     .error-message-box__close-button(v-on:click="dismissTab($event)") &times;
     .error-message-box__message The following issues occurred when analyzing the following repositories:
@@ -133,7 +139,8 @@
     v-bind:max-date="maxDate",
     v-bind:sort-group-selection="sortGroupSelection",
     v-bind:chart-group-index="chartGroupIndex",
-    v-bind:chart-index="chartIndex"
+    v-bind:chart-index="chartIndex",
+    v-bind:optimise-timeline="optimiseTimeline"
   )
 </template>
 
@@ -211,6 +218,7 @@ export default defineComponent({
       chartIndex: undefined as number | undefined,
       errorIsShowingMore: false,
       numberOfErrorMessagesToShow: 4,
+      optimiseTimeline: false,
     };
   },
   computed: {

From b81431780e13593b3f9f30fbc3cd02b8a999e580 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 1 Apr 2024 15:30:54 +0800
Subject: [PATCH 02/40] change v if for date-indicators

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 6693bcff32..86a07ae9ec 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -35,9 +35,9 @@
           right: `${(getSlicePos(tframe === 'day' ? slice.date : slice.endDate) * 100)}%` \
         }"
       )
-.date-indicators
-  span(v-if="optimiseTimeline") {{new Date(optimisedMinimumDate).toLocaleDateString()}}
-  span(v-if="optimiseTimeline") {{new Date(optimisedMaximumDate).toLocaleDateString()}}
+.date-indicators(v-if="optimiseTimeline")
+  span {{new Date(optimisedMinimumDate).toLocaleDateString()}}
+  span {{new Date(optimisedMaximumDate).toLocaleDateString()}}
 </template>
 
 <script lang='ts'>

From 8e943b7723b2ae16191a705001a0f6fd64f7d83b Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 1 Apr 2024 15:35:54 +0800
Subject: [PATCH 03/40] add null checks for optimised date

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 86a07ae9ec..dbe331c11a 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -35,7 +35,7 @@
           right: `${(getSlicePos(tframe === 'day' ? slice.date : slice.endDate) * 100)}%` \
         }"
       )
-.date-indicators(v-if="optimiseTimeline")
+.date-indicators(v-if="optimiseTimeline && optimisedMinimumDate != null && optimisedMaximumDate != null")
   span {{new Date(optimisedMinimumDate).toLocaleDateString()}}
   span {{new Date(optimisedMaximumDate).toLocaleDateString()}}
 </template>
@@ -108,11 +108,15 @@ export default defineComponent({
     deletesContributionRampSize(): number {
       return this.rampSize * 20;
     },
-    optimisedMinimumDate(): number {
-      return Math.min(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
+    optimisedMinimumDate(): number | null {
+      return this.user.commits.length === 0
+        ? null
+        : Math.min(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
     },
-    optimisedMaximumDate(): number {
-      return Math.max(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
+    optimisedMaximumDate(): number | null {
+      return this.user.commits.length === 0
+        ? null
+        : Math.max(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
     },
   },
 
@@ -195,6 +199,9 @@ export default defineComponent({
     // position for day granularity
     getSlicePos(date: string) {
       if (this.optimiseTimeline) {
+        if (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null) {
+          return 0;
+        }
         const total = this.getTotalForPos(this.optimisedMinimumDate, this.optimisedMaximumDate);
         return (new Date(this.optimisedMaximumDate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
       }

From 7c6ed9932e63daa563ff99aa44d94576246d67f4 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Sat, 6 Apr 2024 20:08:53 +0800
Subject: [PATCH 04/40] add tests for optimise timeline feature

---
 .../chartView_optimiseTimeline.cy.js          | 81 +++++++++++++++++++
 frontend/src/views/c-summary.vue              |  2 +-
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js

diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
new file mode 100644
index 0000000000..d29105f52e
--- /dev/null
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -0,0 +1,81 @@
+describe('optimise timeline', () => {
+  it('ramp padding should only exist when optimise timeline is checked', () => {
+    cy.get('#summary label.optimise-timeline > input:visible')
+      .should('be.visible')
+      .uncheck()
+      .should('be.not.checked');
+
+    cy.get('#summary-charts .summary-chart')
+      .first()
+      .find('.summary-chart__ramp .ramp .ramp-padding')
+      .should('have.css', 'left', '0px');
+
+    cy.get('#summary label.optimise-timeline > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('#summary-charts .summary-chart')
+      .first()
+      .find('.summary-chart__ramp .ramp .ramp-padding')
+      .should('have.not.css', 'left', '0px');
+  });
+
+  it('should retain the same number of ramp slices', () => {
+    cy.get('#summary-charts .summary-chart')
+      .first()
+      .find('.summary-chart__ramp .ramp .ramp-padding a')
+      .then(($el) => {
+        const rampSlices = $el.length;
+
+        cy.get('#summary label.optimise-timeline > input:visible')
+          .should('be.visible')
+          .check()
+          .should('be.checked');
+
+        cy.get('#summary-charts .summary-chart')
+          .first()
+          .find('.summary-chart__ramp .ramp .ramp-padding a')
+          .should('have.length', rampSlices);
+      });
+  });
+
+  it('start and end date indicators should exist', () => {
+    cy.get('#summary label.optimise-timeline > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('#summary-charts .summary-chart')
+      .first()
+      .find('.summary-chart__ramp .date-indicators span')
+      .first()
+      .should('have.text', '5/3/2018');
+
+    cy.get('#summary-charts .summary-chart')
+      .first()
+      .find('.summary-chart__ramp .date-indicators span')
+      .last()
+      .should('have.text', '3/4/2023');
+  });
+
+  it('no commits in range should not have date indicators', () => {
+    cy.get('#summary label.optimise-timeline > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    // change since date
+    cy.get('input[name="since"]')
+      .type('2018-12-31');
+
+    // change until date
+    cy.get('input[name="until"]')
+      .type('2019-01-01');
+
+    cy.get('#summary-charts .summary-chart')
+      .first()
+      .find('.summary-chart__ramp .date-indicators')
+      .should('not.exist');
+  });
+});
diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index ec57ec8af3..8d8929d213 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -73,7 +73,7 @@
             v-bind:disabled="filterGroupSelection === 'groupByNone'"
           )
           span merge all groups
-        label.trim-timeline
+        label.optimise-timeline
           input.mui-checkbox(
             type="checkbox",
             v-model="optimiseTimeline"

From f6d754cf27b4c7a871d654e326d2b4cf1a247f20 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 8 Apr 2024 12:35:03 +0800
Subject: [PATCH 05/40] fix test failing on github

---
 .../cypress/tests/chartView/chartView_optimiseTimeline.cy.js  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
index d29105f52e..93fb770bb3 100644
--- a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -56,7 +56,9 @@ describe('optimise timeline', () => {
       .first()
       .find('.summary-chart__ramp .date-indicators span')
       .last()
-      .should('have.text', '3/4/2023');
+
+      // 3/3 on GitHub CI, 3/4 on local
+      .should('have.text', '3/3/2023');
   });
 
   it('no commits in range should not have date indicators', () => {

From e1d9a06edcbb8e470814fbf868480cd7d99f32bb Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 8 Apr 2024 12:36:16 +0800
Subject: [PATCH 06/40] make date indicators grey

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index dbe331c11a..320fefeeab 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -304,6 +304,7 @@ export default defineComponent({
 
 .date-indicators {
   @include mono-font;
+  color: mui-color('grey', '700');
   display: flex;
   justify-content: space-between;
   padding-top: 1px;

From 755fde6526d4e3e4462898eba23059d87634134a Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 8 Apr 2024 12:44:28 +0800
Subject: [PATCH 07/40] reduce complexity of total calculation for optimise
 timeline

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 320fefeeab..d1e1a721aa 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -202,7 +202,7 @@ export default defineComponent({
         if (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null) {
           return 0;
         }
-        const total = this.getTotalForPos(this.optimisedMinimumDate, this.optimisedMaximumDate);
+        const total = this.optimisedMaximumDate - this.optimisedMinimumDate;
         return (new Date(this.optimisedMaximumDate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
       }
       const total = this.getTotalForPos(this.sdate, this.udate);
@@ -210,9 +210,8 @@ export default defineComponent({
     },
 
     // get duration in miliseconds between 2 date
-    getTotalForPos(sinceDate: string | number, untilDate: string | number) {
-      return (typeof untilDate === 'string' ? new Date(untilDate).valueOf() : untilDate)
-      - (typeof sinceDate === 'string' ? new Date(sinceDate).valueOf() : sinceDate);
+    getTotalForPos(sinceDate: string, untilDate: string) {
+      return new Date(untilDate).valueOf() - new Date(sinceDate).valueOf();
     },
     getRampColor(commit: CommitResult, slice: Commit) {
       if (this.isDeletesContribution(commit)) {

From b1b64ff118b6c481e76c0703e11fa0a8050e9ee7 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 15 Apr 2024 12:37:36 +0800
Subject: [PATCH 08/40] add change url when optimise timeline is checked

---
 .../tests/codeView/codeView_renderFilterHash.cy.js | 14 ++++++++++++++
 frontend/src/views/c-summary.vue                   | 12 +++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
index c42998b856..b940de2d75 100644
--- a/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
+++ b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
@@ -302,6 +302,20 @@ describe('render filter hash', () => {
       .should('contain', 'mergegroup=reposense%2FRepoSense%5Bcypress%5D');
   });
 
+  it('optimise timeline: url params should persist after change and reload', () => {
+    cy.get('#summary label.optimise-timeline input:visible')
+      .should('be.visible')
+      .check();
+
+    cy.url()
+      .should('contain', 'optimiseTimeline=true');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'optimiseTimeline=true');
+  });
+
   it('checked file types: url params should persist after change and reload', () => {
     cy.get('#summary label.filter-breakdown input:visible')
       .should('not.be.checked');
diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index b429e9ac67..52867bf1e4 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -77,6 +77,7 @@
           input.mui-checkbox(
             type="checkbox",
             v-model="optimiseTimeline"
+            v-on:change="getFiltered"
           )
           span optimise timeline
   .error-message-box(v-if="Object.entries(errorMessages).length && !isWidgetMode")
@@ -390,7 +391,7 @@ export default defineComponent({
     },
 
     setSummaryHash() {
-      const { addHash, encodeHash } = window;
+      const { addHash, encodeHash, removeHash } = window;
 
       addHash('search', this.filterSearch);
       addHash('sort', this.sortGroupSelection);
@@ -424,6 +425,12 @@ export default defineComponent({
         window.removeHash('checkedFileTypes');
       }
 
+      if (this.optimiseTimeline) {
+        addHash('optimiseTimeline', 'true');
+      } else {
+        removeHash('optimiseTimeline');
+      }
+
       encodeHash();
     },
 
@@ -472,6 +479,9 @@ export default defineComponent({
       if (hash.chartIndex) {
         this.chartIndex = parseInt(hash.chartIndex, 10);
       }
+      if (hash.optimiseTimeline) {
+        this.optimiseTimeline = convertBool(hash.optimiseTimeline);
+      }
     },
 
     getGroupName(group: Array<User>) {

From 50a0ce91a96247aa22c8c67a09c92c57f80f19bd Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 15 Apr 2024 12:40:23 +0800
Subject: [PATCH 09/40] fix lint

---
 frontend/src/views/c-summary.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index 52867bf1e4..3826f9184d 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -76,7 +76,7 @@
         label.optimise-timeline
           input.mui-checkbox(
             type="checkbox",
-            v-model="optimiseTimeline"
+            v-model="optimiseTimeline",
             v-on:change="getFiltered"
           )
           span optimise timeline

From 30dbef1edf1abb56f44ac47c09a29b6024f0ab00 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 15 Apr 2024 12:42:28 +0800
Subject: [PATCH 10/40] add optimiseTimeline to data return type

---
 frontend/src/views/c-summary.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index 9f94f6235a..b6d5a853a8 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -221,7 +221,8 @@ export default defineComponent({
     chartGroupIndex: number | undefined,
     chartIndex: number | undefined,
     errorIsShowingMore: boolean,
-    numberOfErrorMessagesToShow: number
+    numberOfErrorMessagesToShow: number,
+    optimiseTimeline: boolean,
     } {
     return {
       checkedFileTypes: [] as Array<string>,

From b7cdf85f9a3eb69154c4f27603a96f14aefe54da Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Mon, 15 Apr 2024 13:38:43 +0800
Subject: [PATCH 11/40] fix data return type for c-ramp

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index f75d734eb1..41113089c8 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -94,7 +94,10 @@ export default defineComponent({
       default: false,
     },
   },
-  data(): {rampSize: number} {
+  data(): {
+    rampSize: number,
+    optimisedPadding: number,
+    } {
     return {
       rampSize: 0.01 as number,
       optimisedPadding: 3, // as % of total timeline,

From 15c6bfab18fb7e701bf9cdb0b827ef2bf5278076 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:02:01 +0000
Subject: [PATCH 12/40] fix optimise timeline when zoom subrange

---
 frontend/src/components/c-ramp.vue           | 20 +++++-----
 frontend/src/components/c-summary-charts.vue | 41 +++++++++++++++-----
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 41113089c8..1c01a7ecb2 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -93,6 +93,16 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    optimisedMinimumDate: {
+      type: Number,
+      default: null,
+      validator: (prop) => typeof prop === 'number' || prop === null,
+    },
+    optimisedMaximumDate: {
+      type: Number,
+      default: null,
+      validator: (prop) => typeof prop === 'number' || prop === null,
+    },
   },
   data(): {
     rampSize: number,
@@ -111,16 +121,6 @@ export default defineComponent({
     deletesContributionRampSize(): number {
       return this.rampSize * 20;
     },
-    optimisedMinimumDate(): number | null {
-      return this.user.commits.length === 0
-        ? null
-        : Math.min(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
-    },
-    optimisedMaximumDate(): number | null {
-      return this.user.commits.length === 0
-        ? null
-        : Math.max(...this.user.commits.map((commit) => new Date(commit.date).valueOf()));
-    },
   },
 
   methods: {
diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index e505f5b580..f0dfd19976 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -275,7 +275,9 @@
           v-bind:mergegroup="isGroupMerged(getGroupName(repo))",
           v-bind:filtersearch="filterSearch",
           v-bind:is-widget-mode="isChartGroupWidgetMode",
-          v-bind:optimise-timeline="optimiseTimeline"
+          v-bind:optimise-timeline="optimiseTimeline",
+          v-bind:optimised-minimum-date="optimisedMinimumDate(user)",
+          v-bind:optimised-maximum-date="optimisedMaximumDate(user)"
         )
         .overlay
 
@@ -581,6 +583,16 @@ export default defineComponent({
         return ['fas', 'database'];
       }
     },
+    getOptimisedMinimumDate(user: User): number | null {
+      return user.commits.length === 0
+        ? null
+        : Math.min(...user.commits.map((commit) => new Date(commit.date).valueOf()));
+    },
+    getOptimisedMaximumDate(user: User): number | null {
+      return user.commits.length === 0
+        ? null
+        : Math.max(...user.commits.map((commit) => new Date(commit.date).valueOf()));
+    },
 
     // triggering opening of tabs //
     openTabAuthorship(user: User, repo: Array<User>, index: number, isMerged: boolean): void {
@@ -616,14 +628,25 @@ export default defineComponent({
 
       // skip if accidentally clicked on ramp chart
       if (this.drags.length === 2 && this.drags[1] - this.drags[0]) {
-        // additional day was added to include the date represented by filterUntilDate
-        const tdiff = (new Date(this.filterUntilDate)).valueOf() - (new Date(this.filterSinceDate)).valueOf()
-            + window.DAY_IN_MS;
-        const idxs = this.drags.map((x) => (x * tdiff) / 100);
-        const tsince = window.getDateStr(new Date(this.filterSinceDate).getTime() + idxs[0]);
-        const tuntil = window.getDateStr(new Date(this.filterSinceDate).getTime() + idxs[1]);
-        this.drags = [];
-        this.openTabZoom(user, tsince, tuntil, isMerged);
+        const optimisedMinimumDate = this.getOptimisedMinimumDate(user);
+        const optimisedMaximumDate = this.getOptimisedMaximumDate(user);
+        if (this.optimiseTimeline && optimisedMinimumDate != null && optimisedMaximumDate != null) {
+          const tdiff = optimisedMaximumDate - optimisedMinimumDate + window.DAY_IN_MS;
+          const idxs = this.drags.map((x) => (x * tdiff) / 100);
+          const tsince = window.getDateStr(optimisedMinimumDate + idxs[0]);
+          const tuntil = window.getDateStr(optimisedMinimumDate + idxs[1]);
+          this.drags = [];
+          this.openTabZoom(user, tsince, tuntil, isMerged);
+        } else {
+          // additional day was added to include the date represented by filterUntilDate
+          const tdiff = (new Date(this.filterUntilDate)).valueOf() - (new Date(this.filterSinceDate)).valueOf()
+              + window.DAY_IN_MS;
+          const idxs = this.drags.map((x) => (x * tdiff) / 100);
+          const tsince = window.getDateStr(new Date(this.filterSinceDate).getTime() + idxs[0]);
+          const tuntil = window.getDateStr(new Date(this.filterSinceDate).getTime() + idxs[1]);
+          this.drags = [];
+          this.openTabZoom(user, tsince, tuntil, isMerged);
+        }
       }
     },
 

From cb7faef4a9a2343728cb36bcc47f1315b5bfbbba Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:11:46 +0000
Subject: [PATCH 13/40] fix typo

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

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index f0dfd19976..00c4cba638 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -276,8 +276,8 @@
           v-bind:filtersearch="filterSearch",
           v-bind:is-widget-mode="isChartGroupWidgetMode",
           v-bind:optimise-timeline="optimiseTimeline",
-          v-bind:optimised-minimum-date="optimisedMinimumDate(user)",
-          v-bind:optimised-maximum-date="optimisedMaximumDate(user)"
+          v-bind:optimised-minimum-date="getOptimisedMinimumDate(user)",
+          v-bind:optimised-maximum-date="getOptimisedMaximumDate(user)"
         )
         .overlay
 

From 67acd879e3794ae58c98f55c93e2d58059d43c62 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:47:48 +0000
Subject: [PATCH 14/40] fix optimised timeline not showing on zoom panel

---
 frontend/src/components/c-ramp.vue           | 1 -
 frontend/src/components/c-summary-charts.vue | 7 +++++++
 frontend/src/views/c-summary.vue             | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 1c01a7ecb2..186f414813 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -305,7 +305,6 @@ export default defineComponent({
 }
 
 .date-indicators {
-  @include mono-font;
   color: mui-color('grey', '700');
   display: flex;
   justify-content: space-between;
diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 00c4cba638..8ca9b83065 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -656,6 +656,13 @@ export default defineComponent({
       } = this;
       // Deep copy to ensure changes in zoom (e.g. toggle state) won't affect summary, and vice versa
       const clonedUser = JSON.parse(JSON.stringify(user));
+
+      if (this.optimiseTimeline) {
+        const optimisedMinimumDate = this.getOptimisedMinimumDate(user);
+        const optimisedMaximumDate = this.getOptimisedMaximumDate(user);
+
+        since = optimisedMinimumDate == null ? since : window.getDateStr(optimisedMinimumDate);
+        until = optimisedMaximumDate == null ? until : window.getDateStr(optimisedMaximumDate);
       const info: ZoomInfo = {
         zRepo: user.repoName,
         zAuthor: user.name,
diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index b6d5a853a8..4108516f60 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -79,7 +79,7 @@
             v-model="optimiseTimeline",
             v-on:change="getFiltered"
           )
-          span optimise timeline
+          span trim timeline
   .error-message-box(v-if="Object.entries(errorMessages).length && !isWidgetMode")
     .error-message-box__close-button(v-on:click="dismissTab($event)") &times;
     .error-message-box__message The following issues occurred when analyzing the following repositories:

From 0fa20432982e770acc1403982951c27506b0c5af Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:52:36 +0000
Subject: [PATCH 15/40] simplify logic

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

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 8ca9b83065..3801d97039 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -661,8 +661,10 @@ export default defineComponent({
         const optimisedMinimumDate = this.getOptimisedMinimumDate(user);
         const optimisedMaximumDate = this.getOptimisedMaximumDate(user);
 
-        since = optimisedMinimumDate == null ? since : window.getDateStr(optimisedMinimumDate);
-        until = optimisedMaximumDate == null ? until : window.getDateStr(optimisedMaximumDate);
+        if (optimisedMinimumDate != null) since = window.getDateStr(optimisedMinimumDate);
+        if (optimisedMaximumDate != null) until = window.getDateStr(optimisedMaximumDate);
+      }
+      
       const info: ZoomInfo = {
         zRepo: user.repoName,
         zAuthor: user.name,

From 14adcad02b15138cb210dd5105791b8c949f5318 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:54:27 +0000
Subject: [PATCH 16/40] remove whitespace

---
 frontend/src/components/c-summary-charts.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 3801d97039..c5abd42acf 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -664,7 +664,7 @@ export default defineComponent({
         if (optimisedMinimumDate != null) since = window.getDateStr(optimisedMinimumDate);
         if (optimisedMaximumDate != null) until = window.getDateStr(optimisedMaximumDate);
       }
-      
+
       const info: ZoomInfo = {
         zRepo: user.repoName,
         zAuthor: user.name,

From c96ea519bfc662b9373c136d6e54efed84d41e9f Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:34:48 +0000
Subject: [PATCH 17/40] fix zoom chart not working with optimise timeline

---
 frontend/src/components/c-summary-charts.vue | 1 +
 frontend/src/types/vuex.d.ts                 | 1 +
 frontend/src/views/c-zoom.vue                | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index c5abd42acf..3c530b1a7e 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -680,6 +680,7 @@ export default defineComponent({
         zFromRamp: false,
         zFilterSearch: filterSearch,
         zAvgContributionSize: this.getAvgContributionSize(),
+        zOptimiseTimeline: this.optimiseTimeline,
       };
       this.addSelectedTab(user.name, user.repoName, 'zoom', isMerged);
       this.$store.commit('updateTabZoomInfo', info);
diff --git a/frontend/src/types/vuex.d.ts b/frontend/src/types/vuex.d.ts
index cedee8c21d..adb0fc73cc 100644
--- a/frontend/src/types/vuex.d.ts
+++ b/frontend/src/types/vuex.d.ts
@@ -30,6 +30,7 @@ interface ZoomInfo {
   zUntil: string;
   zUser?: User;
   zAvgContributionSize?: number;
+  zOptimiseTimeline?: boolean;
 }
 
 interface SummaryDates {
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index 5552b02feb..81283ac7bc 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -52,7 +52,8 @@
     v-bind:avgsize="info.zAvgCommitSize",
     v-bind:mergegroup="info.zIsMerge",
     v-bind:fromramp="info.zFromRamp",
-    v-bind:filtersearch="info.zFilterSearch")
+    v-bind:filtersearch="info.zFilterSearch",
+    v-bind:optimiseTimeline="info.zOptimiseTimeline")
 
   .sorting.mui-form--inline
     .mui-select.sort-by

From 500d8c90d41e7432d477e0055c4ccf59827d1969 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:41:13 +0000
Subject: [PATCH 18/40] refactor getSlicePos function

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 186f414813..b825479223 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -201,15 +201,15 @@ export default defineComponent({
     },
     // position for day granularity
     getSlicePos(date: string): number {
-      if (this.optimiseTimeline) {
-        if (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null) {
-          return 0;
-        }
-        const total = this.optimisedMaximumDate - this.optimisedMinimumDate;
-        return (new Date(this.optimisedMaximumDate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
-      }
-      const total = this.getTotalForPos(this.sdate, this.udate);
-      return (new Date(this.udate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
+      if (this.optimiseTimeline && (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null))
+        return 0;
+
+      const toDate = this.optimiseTimeline ? this.optimisedMaximumDate : this.udate;
+      const total = this.optimiseTimeline
+        ? this.optimisedMaximumDate - this.optimisedMinimumDate
+        : this.getTotalForPos(this.sdate, this.udate);
+
+      return (new Date(toDate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
     },
 
     // get duration in miliseconds between 2 date

From 6f429c9b25e74f04b4e9f8da19f5e36745e7d2a1 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:44:31 +0000
Subject: [PATCH 19/40] fix getCommitPos for optimise timeline

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index b825479223..0265cce460 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -196,8 +196,14 @@ export default defineComponent({
 
     // position for commit granularity
     getCommitPos(i: number, total: number): number {
+      if (this.optimiseTimeline && (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null))
+        return 0;
+
+      const totalTime = this.optimiseTimeline
+        ? this.optimisedMaximumDate - this.optimisedMinimumDate
+        : this.getTotalForPos(this.sdate, this.udate);
       return (((total - i - 1) * window.DAY_IN_MS) / total)
-          / (this.getTotalForPos(this.sdate, this.udate) + window.DAY_IN_MS);
+          / (totalTime + window.DAY_IN_MS);
     },
     // position for day granularity
     getSlicePos(date: string): number {

From 850a4d986d89a256d5007c6003e2d47296e1cbfc Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:45:31 +0000
Subject: [PATCH 20/40] fix lint

---
 frontend/src/views/c-zoom.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index 9a8db81991..d77e8ff317 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -53,7 +53,7 @@
     v-bind:mergegroup="info.zIsMerge",
     v-bind:fromramp="info.zFromRamp",
     v-bind:filtersearch="info.zFilterSearch",
-    v-bind:optimiseTimeline="info.zOptimiseTimeline")
+    v-bind:optimisetimeline="info.zOptimiseTimeline")
 
   .sorting.mui-form--inline
     .mui-select.sort-by

From 2f39383c4e6882e3fde48ee7e6fee7e0ccd4a317 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:48:29 +0000
Subject: [PATCH 21/40] fix lint again

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

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 0265cce460..80f278a2ce 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -196,8 +196,9 @@ export default defineComponent({
 
     // position for commit granularity
     getCommitPos(i: number, total: number): number {
-      if (this.optimiseTimeline && (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null))
+      if (this.optimiseTimeline && (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null)) {
         return 0;
+      }
 
       const totalTime = this.optimiseTimeline
         ? this.optimisedMaximumDate - this.optimisedMinimumDate
@@ -207,8 +208,9 @@ export default defineComponent({
     },
     // position for day granularity
     getSlicePos(date: string): number {
-      if (this.optimiseTimeline && (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null))
+      if (this.optimiseTimeline && (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null)) {
         return 0;
+      }
 
       const toDate = this.optimiseTimeline ? this.optimisedMaximumDate : this.udate;
       const total = this.optimiseTimeline

From c080688d7147c2d0fbfff67298b9b27d5b654cb6 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:54:27 +0000
Subject: [PATCH 22/40] reduce code dupe in openTabZoomSubrange

---
 frontend/src/components/c-summary-charts.vue | 28 ++++++++------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 3c530b1a7e..b2e04176f3 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -630,23 +630,17 @@ export default defineComponent({
       if (this.drags.length === 2 && this.drags[1] - this.drags[0]) {
         const optimisedMinimumDate = this.getOptimisedMinimumDate(user);
         const optimisedMaximumDate = this.getOptimisedMaximumDate(user);
-        if (this.optimiseTimeline && optimisedMinimumDate != null && optimisedMaximumDate != null) {
-          const tdiff = optimisedMaximumDate - optimisedMinimumDate + window.DAY_IN_MS;
-          const idxs = this.drags.map((x) => (x * tdiff) / 100);
-          const tsince = window.getDateStr(optimisedMinimumDate + idxs[0]);
-          const tuntil = window.getDateStr(optimisedMinimumDate + idxs[1]);
-          this.drags = [];
-          this.openTabZoom(user, tsince, tuntil, isMerged);
-        } else {
-          // additional day was added to include the date represented by filterUntilDate
-          const tdiff = (new Date(this.filterUntilDate)).valueOf() - (new Date(this.filterSinceDate)).valueOf()
-              + window.DAY_IN_MS;
-          const idxs = this.drags.map((x) => (x * tdiff) / 100);
-          const tsince = window.getDateStr(new Date(this.filterSinceDate).getTime() + idxs[0]);
-          const tuntil = window.getDateStr(new Date(this.filterSinceDate).getTime() + idxs[1]);
-          this.drags = [];
-          this.openTabZoom(user, tsince, tuntil, isMerged);
-        }
+        const isOptimising = this.optimiseTimeline && optimisedMinimumDate != null && optimisedMaximumDate != null;
+
+        const fromDate = isOptimising ? optimisedMinimumDate : (new Date(this.filterSinceDate)).valueOf();
+        const toDate = isOptimising ? optimisedMaximumDate : (new Date(this.filterUntilDate)).valueOf();
+
+        const tdiff = toDate - fromDate + window.DAY_IN_MS;
+        const idxs = this.drags.map((x) => (x * tdiff) / 100);
+        const tsince = window.getDateStr(fromDate + idxs[0]);
+        const tuntil = window.getDateStr(fromDate + idxs[1]);
+        this.drags = [];
+        this.openTabZoom(user, tsince, tuntil, isMerged);
       }
     },
 

From 595883fc754fc04b509c5efe2c5de10cf0ce1ee7 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 18:58:14 +0000
Subject: [PATCH 23/40] update ug for trim timeline

---
 docs/ug/usingReports.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/ug/usingReports.md b/docs/ug/usingReports.md
index ebe587bd2c..b1f6fdc062 100644
--- a/docs/ug/usingReports.md
+++ b/docs/ug/usingReports.md
@@ -118,6 +118,7 @@ The `Tool Bar` at the top of the Chart panel provides a set of configuration opt
     * a breakdown of the number of lines of codes added to each file type (if the checkbox is checked). More info on note [3] below.
 * `Merge group`: merges all the ramp charts of each group into a single ramp chart; aggregates the contribution of each group.
     * viewing of authored code of the group as a whole is available when `group by repos`.
+* `Trim timeline`: trims the starting and ending portion of each ramp where no commits were made; only the part of each ramp where commits were made will be shown.
 
 Notes:<br>
 [1] **`Sort groups by`**: each main group has its own index and percentile according to its ranking position after sorting (e.g., if the groups are sorted by contribution in descending order, a 25% percentile indicates that the group is in the top 25% of the whole cohort in terms of contribution)<br>.

From 4f8de1fec4653b7ded03c90073a7139aa4b35e4d Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 19:23:57 +0000
Subject: [PATCH 24/40] fix zoom subrange optimise timeline

---
 frontend/src/components/c-summary-charts.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index b2e04176f3..b5ffe28539 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -650,15 +650,6 @@ export default defineComponent({
       } = this;
       // Deep copy to ensure changes in zoom (e.g. toggle state) won't affect summary, and vice versa
       const clonedUser = JSON.parse(JSON.stringify(user));
-
-      if (this.optimiseTimeline) {
-        const optimisedMinimumDate = this.getOptimisedMinimumDate(user);
-        const optimisedMaximumDate = this.getOptimisedMaximumDate(user);
-
-        if (optimisedMinimumDate != null) since = window.getDateStr(optimisedMinimumDate);
-        if (optimisedMaximumDate != null) until = window.getDateStr(optimisedMaximumDate);
-      }
-
       const info: ZoomInfo = {
         zRepo: user.repoName,
         zAuthor: user.name,

From 3b65d51fa292837458436a2ab9a797fbd3d14a4a Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 19:24:49 +0000
Subject: [PATCH 25/40] fix failing cypress

---
 .../cypress/tests/chartView/chartView_zoomFeature.cy.js   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
index e3abafacb2..575a06abe9 100644
--- a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
@@ -242,7 +242,7 @@ describe('date changes in chart view should reflect in zoom', () => {
 });
 
 describe('range changes in chartview should reflect in zoom', () => {
-  const zoomKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
+  const zoomKeyOption = Cypress.platform === 'darwin' ? { metaKey: true } : { ctrlKey: true };
 
   // Assumptions: Contributer 'jamessspanggg' is the first result,
   // he does not add more commits in the future,
@@ -254,11 +254,11 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('input[name="until"]:visible')
       .type('2023-12-31');
 
-    cy.get('body').type(zoomKey, { release: false })
+    cy.get('body')
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
-      .click(120, 20)
-      .click(250, 20);
+      .click(120, 20, zoomKeyOption)
+      .click(250, 20, zoomKeyOption);
 
     cy.get('#tab-zoom')
       .should('be.visible');

From 5c8411c8bd2494c1109c374eac0e128ad805dde2 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 19:28:38 +0000
Subject: [PATCH 26/40] fix cypress

---
 .../chartView/chartView_zoomFeature.cy.js      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
index 575a06abe9..5fb72ddede 100644
--- a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
@@ -283,11 +283,11 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('input[name="until"]:visible')
       .type('2023-12-31');
 
-    cy.get('body').type(zoomKey, { release: false })
+    cy.get('body')
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
-      .click(120, 20)
-      .click(170, 20);
+      .click(120, 20, zoomKeyOption)
+      .click(170, 20, zoomKeyOption);
 
     cy.get('#tab-zoom')
       .should('be.visible');
@@ -312,11 +312,11 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('input[name="until"]:visible')
       .type('2023-12-31');
 
-    cy.get('body').type(zoomKey, { release: false })
+    cy.get('body')
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
-      .click(170, 20)
-      .click(250, 20);
+      .click(170, 20, zoomKeyOption)
+      .click(250, 20, zoomKeyOption);
 
     cy.get('#tab-zoom')
       .should('be.visible');
@@ -341,11 +341,11 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('input[name="until"]:visible')
       .type('2023-12-31');
 
-    cy.get('body').type(zoomKey, { release: false })
+    cy.get('body')
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
-      .click(170, 20)
-      .click(225, 20);
+      .click(170, 20, zoomKeyOption)
+      .click(225, 20, zoomKeyOption);
 
     cy.get('#tab-zoom')
       .should('be.visible');

From 27d62aefb78bc640a0a3b042574f99caa6cd5af5 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Thu, 25 Apr 2024 20:21:30 +0000
Subject: [PATCH 27/40] remove unnecessary prop passing

---
 frontend/src/components/c-summary-charts.vue | 1 -
 frontend/src/types/vuex.d.ts                 | 1 -
 frontend/src/views/c-zoom.vue                | 3 +--
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index b5ffe28539..c9f92188a9 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -665,7 +665,6 @@ export default defineComponent({
         zFromRamp: false,
         zFilterSearch: filterSearch,
         zAvgContributionSize: this.getAvgContributionSize(),
-        zOptimiseTimeline: this.optimiseTimeline,
       };
       this.addSelectedTab(user.name, user.repoName, 'zoom', isMerged);
       this.$store.commit('updateTabZoomInfo', info);
diff --git a/frontend/src/types/vuex.d.ts b/frontend/src/types/vuex.d.ts
index adb0fc73cc..cedee8c21d 100644
--- a/frontend/src/types/vuex.d.ts
+++ b/frontend/src/types/vuex.d.ts
@@ -30,7 +30,6 @@ interface ZoomInfo {
   zUntil: string;
   zUser?: User;
   zAvgContributionSize?: number;
-  zOptimiseTimeline?: boolean;
 }
 
 interface SummaryDates {
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index d77e8ff317..af521cbfa5 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -52,8 +52,7 @@
     v-bind:avgsize="info.zAvgCommitSize",
     v-bind:mergegroup="info.zIsMerge",
     v-bind:fromramp="info.zFromRamp",
-    v-bind:filtersearch="info.zFilterSearch",
-    v-bind:optimisetimeline="info.zOptimiseTimeline")
+    v-bind:filtersearch="info.zFilterSearch")
 
   .sorting.mui-form--inline
     .mui-select.sort-by

From 6ab47140867d9a22e85f9caab2a45d518aa454f2 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Fri, 26 Apr 2024 18:23:40 +0000
Subject: [PATCH 28/40] fix tab zoom for optimise timeline

---
 frontend/src/components/c-ramp.vue           | 16 ++------
 frontend/src/components/c-summary-charts.vue | 39 +++++++++++++-------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 80f278a2ce..55e7e1e50b 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -35,7 +35,7 @@
           right: `${(getSlicePos(tframe === 'day' ? slice.date : slice.endDate) * 100)}%` \
         }"
       )
-.date-indicators(v-if="optimiseTimeline && optimisedMinimumDate != null && optimisedMaximumDate != null")
+.date-indicators(v-if="optimiseTimeline")
   span {{new Date(optimisedMinimumDate).toLocaleDateString()}}
   span {{new Date(optimisedMaximumDate).toLocaleDateString()}}
 </template>
@@ -95,13 +95,11 @@ export default defineComponent({
     },
     optimisedMinimumDate: {
       type: Number,
-      default: null,
-      validator: (prop) => typeof prop === 'number' || prop === null,
+      default: 0,
     },
     optimisedMaximumDate: {
       type: Number,
-      default: null,
-      validator: (prop) => typeof prop === 'number' || prop === null,
+      default: 0,
     },
   },
   data(): {
@@ -196,10 +194,6 @@ export default defineComponent({
 
     // position for commit granularity
     getCommitPos(i: number, total: number): number {
-      if (this.optimiseTimeline && (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null)) {
-        return 0;
-      }
-
       const totalTime = this.optimiseTimeline
         ? this.optimisedMaximumDate - this.optimisedMinimumDate
         : this.getTotalForPos(this.sdate, this.udate);
@@ -208,10 +202,6 @@ export default defineComponent({
     },
     // position for day granularity
     getSlicePos(date: string): number {
-      if (this.optimiseTimeline && (this.optimisedMinimumDate === null || this.optimisedMaximumDate === null)) {
-        return 0;
-      }
-
       const toDate = this.optimiseTimeline ? this.optimisedMaximumDate : this.udate;
       const total = this.optimiseTimeline
         ? this.optimisedMaximumDate - this.optimisedMinimumDate
diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index c9f92188a9..6a41d9f4e0 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -100,7 +100,12 @@
         a(
           v-if="!isChartGroupWidgetMode",
           onclick="deactivateAllOverlays()",
-          v-on:click="openTabZoom(repo[0], filterSinceDate, filterUntilDate, isGroupMerged(getGroupName(repo)))"
+          v-on:click="openTabZoom(\
+            repo[0],\
+            getIsOptimising(repo[0]) ? getOptimisedMinimumDate(repo[0]) : filterSinceDate,\
+            getIsOptimising(repo[0]) ? getOptimisedMaximumDate(repo[0]) : filterUntilDate,\
+            isGroupMerged(getGroupName(repo))\
+          )"
         )
           .tooltip(
             v-on:mouseover="onTooltipHover(`summary-charts-${i}-commit-breakdown`)",
@@ -218,7 +223,12 @@
         a(
           v-if="!isChartGroupWidgetMode",
           onclick="deactivateAllOverlays()",
-          v-on:click="openTabZoom(user, filterSinceDate, filterUntilDate, isGroupMerged(getGroupName(repo)))"
+          v-on:click="openTabZoom(\
+            user,\
+            getIsOptimising(user) ? getOptimisedMinimumDate(user) : filterSinceDate,\
+            getIsOptimising(user) ? getOptimisedMaximumDate(user) : filterUntilDate,\
+            isGroupMerged(getGroupName(repo))\
+          )"
         )
           .tooltip(
             v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-commit-breakdown`)",
@@ -275,7 +285,7 @@
           v-bind:mergegroup="isGroupMerged(getGroupName(repo))",
           v-bind:filtersearch="filterSearch",
           v-bind:is-widget-mode="isChartGroupWidgetMode",
-          v-bind:optimise-timeline="optimiseTimeline",
+          v-bind:optimise-timeline="getIsOptimising(user)",
           v-bind:optimised-minimum-date="getOptimisedMinimumDate(user)",
           v-bind:optimised-maximum-date="getOptimisedMaximumDate(user)"
         )
@@ -583,16 +593,19 @@ export default defineComponent({
         return ['fas', 'database'];
       }
     },
-    getOptimisedMinimumDate(user: User): number | null {
+    getOptimisedMinimumDate(user: User): number {
       return user.commits.length === 0
-        ? null
+        ? (new Date(this.filterSinceDate)).valueOf()
         : Math.min(...user.commits.map((commit) => new Date(commit.date).valueOf()));
     },
-    getOptimisedMaximumDate(user: User): number | null {
+    getOptimisedMaximumDate(user: User): number {
       return user.commits.length === 0
-        ? null
+        ? (new Date(this.filterUntilDate)).valueOf()
         : Math.max(...user.commits.map((commit) => new Date(commit.date).valueOf()));
     },
+    getIsOptimising(user: User): boolean {
+      return user.commits.length !== 0 && this.optimiseTimeline;
+    },
 
     // triggering opening of tabs //
     openTabAuthorship(user: User, repo: Array<User>, index: number, isMerged: boolean): void {
@@ -628,12 +641,12 @@ export default defineComponent({
 
       // skip if accidentally clicked on ramp chart
       if (this.drags.length === 2 && this.drags[1] - this.drags[0]) {
-        const optimisedMinimumDate = this.getOptimisedMinimumDate(user);
-        const optimisedMaximumDate = this.getOptimisedMaximumDate(user);
-        const isOptimising = this.optimiseTimeline && optimisedMinimumDate != null && optimisedMaximumDate != null;
-
-        const fromDate = isOptimising ? optimisedMinimumDate : (new Date(this.filterSinceDate)).valueOf();
-        const toDate = isOptimising ? optimisedMaximumDate : (new Date(this.filterUntilDate)).valueOf();
+        const fromDate = this.getIsOptimising(user)
+          ? this.getOptimisedMinimumDate(user)
+          : (new Date(this.filterSinceDate)).valueOf();
+        const toDate = this.getIsOptimising(user)
+          ? this.getOptimisedMaximumDate(user)
+          : (new Date(this.filterUntilDate)).valueOf();
 
         const tdiff = toDate - fromDate + window.DAY_IN_MS;
         const idxs = this.drags.map((x) => (x * tdiff) / 100);

From 4fe75759239d042958011719a7daaf105e261b31 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Fri, 26 Apr 2024 18:51:06 +0000
Subject: [PATCH 29/40] refactor optimise min max date type

---
 frontend/src/components/c-ramp.vue           | 16 +++++++-------
 frontend/src/components/c-summary-charts.vue | 22 +++++++++++---------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 55e7e1e50b..e6d1e39524 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -36,8 +36,8 @@
         }"
       )
 .date-indicators(v-if="optimiseTimeline")
-  span {{new Date(optimisedMinimumDate).toLocaleDateString()}}
-  span {{new Date(optimisedMaximumDate).toLocaleDateString()}}
+  span {optimisedMinimumDate}
+  span {optimisedMaximumDate}
 </template>
 
 <script lang='ts'>
@@ -94,12 +94,12 @@ export default defineComponent({
       default: false,
     },
     optimisedMinimumDate: {
-      type: Number,
-      default: 0,
+      type: String,
+      default: '',
     },
     optimisedMaximumDate: {
-      type: Number,
-      default: 0,
+      type: String,
+      default: '',
     },
   },
   data(): {
@@ -195,7 +195,7 @@ export default defineComponent({
     // position for commit granularity
     getCommitPos(i: number, total: number): number {
       const totalTime = this.optimiseTimeline
-        ? this.optimisedMaximumDate - this.optimisedMinimumDate
+        ? this.getTotalForPos(this.optimisedMinimumDate, this.optimisedMaximumDate)
         : this.getTotalForPos(this.sdate, this.udate);
       return (((total - i - 1) * window.DAY_IN_MS) / total)
           / (totalTime + window.DAY_IN_MS);
@@ -204,7 +204,7 @@ export default defineComponent({
     getSlicePos(date: string): number {
       const toDate = this.optimiseTimeline ? this.optimisedMaximumDate : this.udate;
       const total = this.optimiseTimeline
-        ? this.optimisedMaximumDate - this.optimisedMinimumDate
+        ? this.getTotalForPos(this.optimisedMinimumDate, this.optimisedMaximumDate)
         : this.getTotalForPos(this.sdate, this.udate);
 
       return (new Date(toDate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 6a41d9f4e0..12b442613e 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -593,15 +593,17 @@ export default defineComponent({
         return ['fas', 'database'];
       }
     },
-    getOptimisedMinimumDate(user: User): number {
+    getOptimisedMinimumDate(user: User): string {
       return user.commits.length === 0
-        ? (new Date(this.filterSinceDate)).valueOf()
-        : Math.min(...user.commits.map((commit) => new Date(commit.date).valueOf()));
+        ? this.filterSinceDate
+        : user.commits.reduce((prev, curr) => new Date(prev.date) < new Date(curr.date) ? prev : curr)
+          .date;
     },
-    getOptimisedMaximumDate(user: User): number {
+    getOptimisedMaximumDate(user: User): string {
       return user.commits.length === 0
-        ? (new Date(this.filterUntilDate)).valueOf()
-        : Math.max(...user.commits.map((commit) => new Date(commit.date).valueOf()));
+        ? this.filterUntilDate
+        : user.commits.reduce((prev, curr) => new Date(prev.date) > new Date(curr.date) ? prev : curr)
+          .date;
     },
     getIsOptimising(user: User): boolean {
       return user.commits.length !== 0 && this.optimiseTimeline;
@@ -641,12 +643,12 @@ export default defineComponent({
 
       // skip if accidentally clicked on ramp chart
       if (this.drags.length === 2 && this.drags[1] - this.drags[0]) {
-        const fromDate = this.getIsOptimising(user)
+        const fromDate = (new Date(this.getIsOptimising(user)
           ? this.getOptimisedMinimumDate(user)
-          : (new Date(this.filterSinceDate)).valueOf();
-        const toDate = this.getIsOptimising(user)
+          : this.filterSinceDate)).valueOf();
+        const toDate = (new Date(this.getIsOptimising(user)
           ? this.getOptimisedMaximumDate(user)
-          : (new Date(this.filterUntilDate)).valueOf();
+          : this.filterUntilDate)).valueOf();
 
         const tdiff = toDate - fromDate + window.DAY_IN_MS;
         const idxs = this.drags.map((x) => (x * tdiff) / 100);

From 45a2a6db339aa1aaf87a19573141a17cbc043681 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Fri, 26 Apr 2024 19:53:42 +0000
Subject: [PATCH 30/40] fix lint

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

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 12b442613e..69da9a48f1 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -596,13 +596,13 @@ export default defineComponent({
     getOptimisedMinimumDate(user: User): string {
       return user.commits.length === 0
         ? this.filterSinceDate
-        : user.commits.reduce((prev, curr) => new Date(prev.date) < new Date(curr.date) ? prev : curr)
+        : user.commits.reduce((prev, curr) => (new Date(prev.date) < new Date(curr.date) ? prev : curr))
           .date;
     },
     getOptimisedMaximumDate(user: User): string {
       return user.commits.length === 0
         ? this.filterUntilDate
-        : user.commits.reduce((prev, curr) => new Date(prev.date) > new Date(curr.date) ? prev : curr)
+        : user.commits.reduce((prev, curr) => (new Date(prev.date) > new Date(curr.date) ? prev : curr))
           .date;
     },
     getIsOptimising(user: User): boolean {

From dacab6a38bddf31b68c9020a682cc0b8c195d15c Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Sat, 27 Apr 2024 17:12:32 +0000
Subject: [PATCH 31/40] fix double braces

---
 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 e6d1e39524..cbc7a392bb 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -36,8 +36,8 @@
         }"
       )
 .date-indicators(v-if="optimiseTimeline")
-  span {optimisedMinimumDate}
-  span {optimisedMaximumDate}
+  span {{optimisedMinimumDate}}
+  span {{optimisedMaximumDate}}
 </template>
 
 <script lang='ts'>

From 819ab1ddd14378c1ba6abb4db5cde76311183143 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Sat, 27 Apr 2024 19:04:21 +0000
Subject: [PATCH 32/40] fix optimisetimeline cypress test

---
 .../cypress/tests/chartView/chartView_optimiseTimeline.cy.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
index 93fb770bb3..2e3e7f3ace 100644
--- a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -50,7 +50,7 @@ describe('optimise timeline', () => {
       .first()
       .find('.summary-chart__ramp .date-indicators span')
       .first()
-      .should('have.text', '5/3/2018');
+      .should('have.text', '2018-05-03');
 
     cy.get('#summary-charts .summary-chart')
       .first()
@@ -58,7 +58,7 @@ describe('optimise timeline', () => {
       .last()
 
       // 3/3 on GitHub CI, 3/4 on local
-      .should('have.text', '3/3/2023');
+      .should('have.text', '2023-03-03');
   });
 
   it('no commits in range should not have date indicators', () => {

From cc52381cbe589669d41e9324e57dbea6debc9502 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Tue, 30 Apr 2024 15:17:53 +0800
Subject: [PATCH 33/40] fix lint

---
 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 cbc7a392bb..40f02b05cb 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -105,7 +105,7 @@ export default defineComponent({
   data(): {
     rampSize: number,
     optimisedPadding: number,
-    } {
+  } {
     return {
       rampSize: 0.01 as number,
       optimisedPadding: 3, // as % of total timeline,

From 4fe8177d8210a7aa5867358df817f2afb8a7ff94 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Tue, 30 Apr 2024 15:19:44 +0800
Subject: [PATCH 34/40] remove whitespace

---
 frontend/src/views/c-summary.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index e55f661e66..ad39692dc3 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -441,7 +441,7 @@ export default defineComponent({
       } else {
         removeHash('checkedFileTypes');
       }
-      
+
       if (this.viewRepoTags) {
         addHash('viewRepoTags', 'true');
       } else {

From 62a78544f1178a053750810a110fdf5cb7d7f781 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Tue, 30 Apr 2024 16:05:45 +0800
Subject: [PATCH 35/40] add cypress for zoom and optimise timeline

---
 .../chartView_optimiseTimeline.cy.js          | 99 +++++++++++++++----
 1 file changed, 82 insertions(+), 17 deletions(-)

diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
index 2e3e7f3ace..f56199577d 100644
--- a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -40,26 +40,26 @@ describe('optimise timeline', () => {
       });
   });
 
-  it('start and end date indicators should exist', () => {
-    cy.get('#summary label.optimise-timeline > input:visible')
-      .should('be.visible')
-      .check()
-      .should('be.checked');
+  // it('start and end date indicators should exist', () => {
+  //   cy.get('#summary label.optimise-timeline > input:visible')
+  //     .should('be.visible')
+  //     .check()
+  //     .should('be.checked');
 
-    cy.get('#summary-charts .summary-chart')
-      .first()
-      .find('.summary-chart__ramp .date-indicators span')
-      .first()
-      .should('have.text', '2018-05-03');
+  //   cy.get('#summary-charts .summary-chart')
+  //     .first()
+  //     .find('.summary-chart__ramp .date-indicators span')
+  //     .first()
+  //     .should('have.text', '2018-05-03');
 
-    cy.get('#summary-charts .summary-chart')
-      .first()
-      .find('.summary-chart__ramp .date-indicators span')
-      .last()
+  //   cy.get('#summary-charts .summary-chart')
+  //     .first()
+  //     .find('.summary-chart__ramp .date-indicators span')
+  //     .last()
 
-      // 3/3 on GitHub CI, 3/4 on local
-      .should('have.text', '2023-03-03');
-  });
+  //     // 3/3 on GitHub CI, 3/4 on local
+  //     .should('have.text', '2023-03-03');
+  // });
 
   it('no commits in range should not have date indicators', () => {
     cy.get('#summary label.optimise-timeline > input:visible')
@@ -80,4 +80,69 @@ describe('optimise timeline', () => {
       .find('.summary-chart__ramp .date-indicators')
       .should('not.exist');
   });
+  
+  it('zoom panel range should work correctly when timeline is optimised', () => {
+    cy.get('.icon-button.fa-list-ul')
+      .should('exist')
+      .first()
+      .click();
+
+    cy.get('#tab-zoom')
+      .should('be.visible');
+      
+    cy.get('#tab-zoom .ramp a')
+      .first()
+      .invoke('css', 'right')
+      .then((val) => parseFloat(val))
+      .should('gt', 0);
+
+    cy.get('#summary label.optimise-timeline > input')
+      .check()
+      .should('be.checked');
+
+    cy.get('.icon-button.fa-list-ul')
+      .should('exist')
+      .first()
+      .click();
+
+    cy.get('#tab-zoom')
+      .should('be.visible');
+
+    cy.get('#tab-zoom .period')
+      .should('contain', '2018-05-03 to 2023-03-04');
+
+    cy.get('#tab-zoom .ramp a')
+      .first()
+      .invoke('css', 'right')
+      .then((val) => parseFloat(val))
+      .should('lt', 1);
+  });
+
+  it('subzoom panel range should work correctly when timeline is optimised', () => {
+    const zoomKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
+
+    cy.get('#summary label.optimise-timeline > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    // clicking from the 10th px to the 50th px in the ramp
+    cy.get('body').type(zoomKey, { release: false })
+      .get('#summary-charts .summary-chart__ramp .ramp')
+      .first()
+      .click(110, 20)
+      .click(120, 20);
+
+    cy.get('#tab-zoom')
+      .should('be.visible');
+      
+    cy.get('#tab-zoom .ramp .ramp__slice')
+      .should('have.length', 1);
+
+    cy.get('#tab-zoom .ramp .ramp__slice')
+      .invoke('attr', 'title')
+      .then((title) => {
+        cy.wrap(title).should('eq', '[2019-08-18] AboutUs: update team members (#867): +94 -12 lines ');
+      });
+  });
 });

From 6324e9cfce2bd729ab5a306cfba241e2251bc32a Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Tue, 30 Apr 2024 16:06:02 +0800
Subject: [PATCH 36/40] fix cypress

---
 .../cypress/tests/chartView/chartView_optimiseTimeline.cy.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
index f56199577d..31a927b6b0 100644
--- a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -109,7 +109,7 @@ describe('optimise timeline', () => {
       .should('be.visible');
 
     cy.get('#tab-zoom .period')
-      .should('contain', '2018-05-03 to 2023-03-04');
+      .should('contain', '2018-05-03 to 2023-03-03');
 
     cy.get('#tab-zoom .ramp a')
       .first()

From d5125c362fe3ec4a89187b60759e38eb57c672ba Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Tue, 30 Apr 2024 16:07:35 +0800
Subject: [PATCH 37/40] fix lint

---
 .../tests/chartView/chartView_optimiseTimeline.cy.js        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
index 31a927b6b0..e0064c9f84 100644
--- a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -80,7 +80,7 @@ describe('optimise timeline', () => {
       .find('.summary-chart__ramp .date-indicators')
       .should('not.exist');
   });
-  
+
   it('zoom panel range should work correctly when timeline is optimised', () => {
     cy.get('.icon-button.fa-list-ul')
       .should('exist')
@@ -89,7 +89,7 @@ describe('optimise timeline', () => {
 
     cy.get('#tab-zoom')
       .should('be.visible');
-      
+
     cy.get('#tab-zoom .ramp a')
       .first()
       .invoke('css', 'right')
@@ -135,7 +135,7 @@ describe('optimise timeline', () => {
 
     cy.get('#tab-zoom')
       .should('be.visible');
-      
+
     cy.get('#tab-zoom .ramp .ramp__slice')
       .should('have.length', 1);
 

From 77a379284b57928b66530c383758d25edeab410d Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Tue, 30 Apr 2024 18:41:04 +0800
Subject: [PATCH 38/40] uncomment cypress test

---
 docs/ug/usingReports.md                       |  2 +-
 .../chartView_optimiseTimeline.cy.js          | 40 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/docs/ug/usingReports.md b/docs/ug/usingReports.md
index 713300ddda..d0ebbd13c6 100644
--- a/docs/ug/usingReports.md
+++ b/docs/ug/usingReports.md
@@ -118,8 +118,8 @@ The `Tool Bar` at the top of the Chart panel provides a set of configuration opt
     * a breakdown of the number of lines of codes added to each file type (if the checkbox is checked). More info on note [3] below.
 * `Merge group`: merges all the ramp charts of each group into a single ramp chart; aggregates the contribution of each group.
     * viewing of authored code of the group as a whole is available when `group by repos`.
-* `Trim timeline`: trims the starting and ending portion of each ramp where no commits were made; only the part of each ramp where commits were made will be shown.
 * `Show tags`: shows the tags of all the repos under a group
+* `Trim timeline`: trims the starting and ending portion of each ramp where no commits were made; only the part of each ramp where commits were made will be shown.
 
 Notes:<br>
 [1] **`Sort groups by`**: each main group has its own index and percentile according to its ranking position after sorting (e.g., if the groups are sorted by contribution in descending order, a 25% percentile indicates that the group is in the top 25% of the whole cohort in terms of contribution)<br>.
diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
index e0064c9f84..c659e8f445 100644
--- a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -40,26 +40,26 @@ describe('optimise timeline', () => {
       });
   });
 
-  // it('start and end date indicators should exist', () => {
-  //   cy.get('#summary label.optimise-timeline > input:visible')
-  //     .should('be.visible')
-  //     .check()
-  //     .should('be.checked');
-
-  //   cy.get('#summary-charts .summary-chart')
-  //     .first()
-  //     .find('.summary-chart__ramp .date-indicators span')
-  //     .first()
-  //     .should('have.text', '2018-05-03');
-
-  //   cy.get('#summary-charts .summary-chart')
-  //     .first()
-  //     .find('.summary-chart__ramp .date-indicators span')
-  //     .last()
-
-  //     // 3/3 on GitHub CI, 3/4 on local
-  //     .should('have.text', '2023-03-03');
-  // });
+  it('start and end date indicators should exist', () => {
+    cy.get('#summary label.optimise-timeline > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('#summary-charts .summary-chart')
+      .first()
+      .find('.summary-chart__ramp .date-indicators span')
+      .first()
+      .should('have.text', '2018-05-03');
+
+    cy.get('#summary-charts .summary-chart')
+      .first()
+      .find('.summary-chart__ramp .date-indicators span')
+      .last()
+
+      // 3/3 on GitHub CI, 3/4 on local
+      .should('have.text', '2023-03-03');
+  });
 
   it('no commits in range should not have date indicators', () => {
     cy.get('#summary label.optimise-timeline > input:visible')

From a97aa605c3d8ab80c6d92a480934e610a226f540 Mon Sep 17 00:00:00 2001
From: jonasongg <jonasong2@gmail.com>
Date: Wed, 1 May 2024 20:10:34 +0800
Subject: [PATCH 39/40] add comments

---
 .../cypress/tests/chartView/chartView_optimiseTimeline.cy.js    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
index c659e8f445..03974c9cae 100644
--- a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -90,6 +90,7 @@ describe('optimise timeline', () => {
     cy.get('#tab-zoom')
       .should('be.visible');
 
+    // verifies the ramp chart is not optimised and has empty space on the right
     cy.get('#tab-zoom .ramp a')
       .first()
       .invoke('css', 'right')
@@ -111,6 +112,7 @@ describe('optimise timeline', () => {
     cy.get('#tab-zoom .period')
       .should('contain', '2018-05-03 to 2023-03-03');
 
+    // verifies the ramp chart is optimised and has no empty space on the right
     cy.get('#tab-zoom .ramp a')
       .first()
       .invoke('css', 'right')

From faad1cca7c9e8a836a2673e263f9ab8b983423d7 Mon Sep 17 00:00:00 2001
From: Charisma Kausar <charisma.kausar@gmail.com>
Date: Tue, 7 May 2024 01:44:39 +0800
Subject: [PATCH 40/40] add comments

---
 .../cypress/tests/chartView/chartView_optimiseTimeline.cy.js     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
index 03974c9cae..43e64806fe 100644
--- a/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -109,6 +109,7 @@ describe('optimise timeline', () => {
     cy.get('#tab-zoom')
       .should('be.visible');
 
+    // verifies the date range is correctly optimised
     cy.get('#tab-zoom .period')
       .should('contain', '2018-05-03 to 2023-03-03');