From 2457ebbeaa69befc824fa609a4e12f4c55bb4c88 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Tue, 7 May 2024 03:23:44 +0800
Subject: [PATCH] Add optimise timeline feature (#2180)

Add optimise timeline feature

Currently, the ramps have a lot of empty space if the since and until
dates are specified far apart.

Let's add a checkbox that can eliminate this empty space for each ramp.
This is especially useful if RepoSense is to be used to set up a report
of an individual's past OSS contributions.
---
 docs/ug/usingReports.md                       |   1 +
 .../chartView_optimiseTimeline.cy.js          | 151 ++++++++++++++++++
 .../codeView/codeView_renderFilterHash.cy.js  |  14 ++
 frontend/src/components/c-ramp.vue            |  83 +++++++---
 frontend/src/components/c-summary-charts.vue  |  54 ++++++-
 frontend/src/views/c-summary.vue              |  20 ++-
 6 files changed, 293 insertions(+), 30 deletions(-)
 create mode 100644 frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js

diff --git a/docs/ug/usingReports.md b/docs/ug/usingReports.md
index 6aa5ebae6c..d0ebbd13c6 100644
--- a/docs/ug/usingReports.md
+++ b/docs/ug/usingReports.md
@@ -119,6 +119,7 @@ The `Tool Bar` at the top of the Chart panel provides a set of configuration opt
 * `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`.
 * `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
new file mode 100644
index 0000000000..43e64806fe
--- /dev/null
+++ b/frontend/cypress/tests/chartView/chartView_optimiseTimeline.cy.js
@@ -0,0 +1,151 @@
+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', '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')
+      .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');
+  });
+
+  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');
+
+    // verifies the ramp chart is not optimised and has empty space on the right
+    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');
+
+    // verifies the date range is correctly optimised
+    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')
+      .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 ');
+      });
+  });
+});
diff --git a/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
index 1cc456e0e4..fbe6d467aa 100644
--- a/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
+++ b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
@@ -316,6 +316,20 @@ describe('render filter hash', () => {
       .should('contain', 'viewRepoTags=true');
   });
 
+  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/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 65e1fe780c..40f02b05cb 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(v-if="optimiseTimeline")
+  span {{optimisedMinimumDate}}
+  span {{optimisedMaximumDate}}
 </template>
 
 <script lang='ts'>
@@ -83,10 +89,26 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    optimiseTimeline: {
+      type: Boolean,
+      default: false,
+    },
+    optimisedMinimumDate: {
+      type: String,
+      default: '',
+    },
+    optimisedMaximumDate: {
+      type: String,
+      default: '',
+    },
   },
-  data(): {rampSize: number} {
+  data(): {
+    rampSize: number,
+    optimisedPadding: number,
+  } {
     return {
       rampSize: 0.01 as number,
+      optimisedPadding: 3, // as % of total timeline,
     };
   },
 
@@ -172,13 +194,20 @@ export default defineComponent({
 
     // position for commit granularity
     getCommitPos(i: number, total: number): number {
+      const totalTime = this.optimiseTimeline
+        ? this.getTotalForPos(this.optimisedMinimumDate, this.optimisedMaximumDate)
+        : 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 {
-      const total = this.getTotalForPos(this.sdate, this.udate);
-      return (new Date(this.udate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
+      const toDate = this.optimiseTimeline ? this.optimisedMaximumDate : this.udate;
+      const total = this.optimiseTimeline
+        ? 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);
     },
 
     // get duration in miliseconds between 2 date
@@ -267,4 +296,16 @@ export default defineComponent({
     }
   }
 }
+
+.ramp-padding {
+  height: 100%;
+  position: relative;
+}
+
+.date-indicators {
+  color: mui-color('grey', '700');
+  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 e705e57240..c4a7f78307 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`)",
@@ -230,7 +235,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`)",
@@ -296,7 +306,11 @@
           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="getIsOptimising(user)",
+          v-bind:optimised-minimum-date="getOptimisedMinimumDate(user)",
+          v-bind:optimised-maximum-date="getOptimisedMaximumDate(user)"
+        )
         .overlay
 
       .summary-chart__contribution
@@ -400,6 +414,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    optimiseTimeline: {
+      type: Boolean,
+      default: false,
+    },
   },
   data(): {
     drags: Array<number>,
@@ -609,6 +627,21 @@ export default defineComponent({
         return ['fas', 'database'];
       }
     },
+    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))
+          .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))
+          .date;
+    },
+    getIsOptimising(user: User): boolean {
+      return user.commits.length !== 0 && this.optimiseTimeline;
+    },
 
     getTagLink(repo: User, tag: string): string | undefined {
       return window.filterUnsupported(`${window.getRepoLinkUnfiltered(repo.repoId)}releases/tag/${tag}`);
@@ -648,12 +681,17 @@ 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 fromDate = (new Date(this.getIsOptimising(user)
+          ? this.getOptimisedMinimumDate(user)
+          : this.filterSinceDate)).valueOf();
+        const toDate = (new Date(this.getIsOptimising(user)
+          ? this.getOptimisedMaximumDate(user)
+          : this.filterUntilDate)).valueOf();
+
+        const tdiff = toDate - fromDate + 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]);
+        const tsince = window.getDateStr(fromDate + idxs[0]);
+        const tuntil = window.getDateStr(fromDate + idxs[1]);
         this.drags = [];
         this.openTabZoom(user, tsince, tuntil, isMerged);
       }
diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index 62d9407ec9..ad39692dc3 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -80,6 +80,13 @@
             v-on:change="getFiltered"
           )
           span show tags
+        label.optimise-timeline
+          input.mui-checkbox(
+            type="checkbox",
+            v-model="optimiseTimeline",
+            v-on:change="getFiltered"
+          )
+          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:
@@ -131,7 +138,8 @@
     v-bind:sort-group-selection="sortGroupSelection",
     v-bind:chart-group-index="chartGroupIndex",
     v-bind:chart-index="chartIndex",
-    v-bind:view-repo-tags="viewRepoTags"
+    v-bind:view-repo-tags="viewRepoTags",
+    v-bind:optimise-timeline="optimiseTimeline"
   )
 </template>
 
@@ -215,6 +223,7 @@ export default defineComponent({
     errorIsShowingMore: boolean,
     numberOfErrorMessagesToShow: number,
     viewRepoTags: boolean,
+    optimiseTimeline: boolean,
   } {
     return {
       checkedFileTypes: [] as Array<string>,
@@ -245,6 +254,7 @@ export default defineComponent({
       errorIsShowingMore: false,
       numberOfErrorMessagesToShow: 4,
       viewRepoTags: false,
+      optimiseTimeline: false,
     };
   },
   computed: {
@@ -437,6 +447,11 @@ export default defineComponent({
       } else {
         removeHash('viewRepoTags');
       }
+      if (this.optimiseTimeline) {
+        addHash('optimiseTimeline', 'true');
+      } else {
+        removeHash('optimiseTimeline');
+      }
 
       encodeHash();
     },
@@ -489,6 +504,9 @@ export default defineComponent({
       if (hash.viewRepoTags) {
         this.viewRepoTags = convertBool(hash.viewRepoTags);
       }
+      if (hash.optimiseTimeline) {
+        this.optimiseTimeline = convertBool(hash.optimiseTimeline);
+      }
     },
 
     getGroupName(group: Array<User>): string {