[#2148] Show tags on the ramp chart

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`.
+* `Show tags`: shows the tags of all the repos under a group
 
 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>.

frontend/cypress/tests/chartView/chartView_showTags.cy.js

@@ -0,0 +1,67 @@
+describe('show tags', () => {
+  it('unchecked should not display any tags for a group', () => {
+    cy.get('#summary label.show-tags > input:visible')
+      .should('be.visible')
+      .uncheck()
+      .should('not.be.checked');
+
+    cy.get('.summary-charts__title--tags')
+      .should('not.exist');
+  });
+
+  it('checked should display all tags for a group', () => {
+    cy.get('#summary label.show-tags > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('#summary label.merge-group > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('.icon-button.fa-list-ul')
+      .should('exist')
+      .first()
+      .click();
+
+    const correctTags = [];
+
+    cy.get('.zoom__title--tags')
+      .find('.tag')
+      .each(($tag) => correctTags.push($tag.text().trim()))
+      .then(() => {
+        cy.get('.summary-charts')
+          .first()
+          .find('.summary-charts__title--tags')
+          .find('.tag')
+          .each(($tag) => {
+            expect(correctTags).to.include($tag.text().trim());
+          });
+
+        cy.get('.summary-charts')
+          .first()
+          .find('.summary-charts__title--tags')
+          .find('.tag')
+          .should('have.length', correctTags.length);
+      });
+  });
+
+  it('clicked should redirect to the correct tag page', () => {
+    cy.get('#summary label.show-tags > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('.summary-charts__title--tags')
+      .find('.tag')
+      .first()
+      .invoke('removeAttr', 'target') // to open in the same window
+      .click();
+
+    cy.origin('https://github.com', () => {
+      cy.url()
+        .should('equal', 'https://github.com/reposense/RepoSense/releases/tag/v1.0');
+    });
+  });
+});

frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js

@@ -302,6 +302,20 @@ describe('render filter hash', () => {
       .should('contain', 'mergegroup=reposense%2FRepoSense%5Bcypress%5D');
   });
 
+  it('show tags: url params should persist after change and reload', () => {
+    cy.get('#summary label.show-tags input:visible')
+      .should('be.visible')
+      .check();
+
+    cy.url()
+      .should('contain', 'viewRepoTags=true');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'viewRepoTags=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');

frontend/src/components/c-summary-charts.vue

@@ -141,6 +141,18 @@
           v-if="sortGroupSelection.includes('totalCommits')"
         ) {{ getPercentile(i) }} %&nbsp
         span.tooltip-text.right-aligned {{ getPercentileExplanation(i) }}
+      .summary-charts__title--tags(
+        v-if="isViewingTagsByRepo"
+      )
+        a.tag(
+          v-for="tag in getTags(repo)",
+          v-bind:href="getTagLink(repo[0], tag)",
+          target="_blank",
+          vbind:key="tag",
+          tabindex="-1"
+        )
+          font-awesome-icon(icon="tags")
+          span  {{ tag }}
     .summary-charts__fileType--breakdown(v-if="filterBreakdown")
       template(v-if="filterGroupSelection !== 'groupByNone'")
         .summary-charts__fileType--breakdown__legend(
@@ -261,6 +273,16 @@
           v-if="filterGroupSelection === 'groupByNone' && sortGroupSelection.includes('totalCommits')"
         ) {{ getPercentile(j) }} %&nbsp
           span.tooltip-text.right-aligned {{ getPercentileExplanation(j) }}
+        .summary-chart__title--tags(v-if="isViewingTagsByAuthor")
+          a.tag(
+            v-for="tag in getTags(repo, user)",
+            v-bind:href="getTagLink(user, tag)",
+            target="_blank",
+            vbind:key="tag",
+            tabindex="-1"
+          )
+            font-awesome-icon(icon="tags")
+            span  {{ tag }}
 
       .summary-chart__ramp(
         v-on:click="openTabZoomSubrange(user, $event, isGroupMerged(getGroupName(repo)))"
@@ -374,6 +396,10 @@ export default defineComponent({
       type: Number,
       default: undefined,
     },
+    viewRepoTags: {
+      type: Boolean,
+      default: false,
+    },
   },
   data(): {
       drags: Array<number>,
@@ -420,6 +446,14 @@ export default defineComponent({
     isChartWidgetMode(): boolean {
       return this.chartIndex !== undefined && this.chartIndex >= 0 && this.isChartGroupWidgetMode;
     },
+    isViewingTagsByRepo() {
+      return this.filterGroupSelection === FilterGroupSelection.GroupByRepos && this.viewRepoTags;
+    },
+    isViewingTagsByAuthor() {
+      return (this.filterGroupSelection === FilterGroupSelection.GroupByAuthors
+        || this.filterGroupSelection === FilterGroupSelection.GroupByNone)
+      && this.viewRepoTags;
+    },
     ...mapState({
       mergedGroups: (state: unknown) => (state as StoreState).mergedGroups,
       fileTypeColors: (state: unknown) => (state as StoreState).fileTypeColors,
@@ -576,6 +610,10 @@ export default defineComponent({
       }
     },
 
+    getTagLink(repo: User, tag: string): string | undefined {
+      return window.filterUnsupported(`${window.getRepoLinkUnfiltered(repo.repoId)}releases/tag/${tag}`);
+    },
+
     // triggering opening of tabs //
     openTabAuthorship(user: User, repo: Array<User>, index: number, isMerged: boolean): void {
       const {
@@ -902,6 +940,16 @@ export default defineComponent({
         chart.scrollIntoView({ block: 'nearest' });
       }
     },
+
+    getTags(repo: Array<User>, user?: User): Array<string> {
+      if (user) repo = repo.filter((r) => r.name === user.name);
+      return [...new Set(repo.flatMap((r) => r.commits).flatMap((c) => c.commitResults).flatMap((r) => r.tags))]
+        .filter(Boolean) as Array<string>;
+    },
   },
 });
 </script>
+
+<style lang="scss" scoped>
+@import '../styles/tags.scss';
+</style>

frontend/src/styles/summary-chart.scss

@@ -97,6 +97,7 @@
     &__title {
       align-items: center;
       display: flex;
+      flex-wrap: wrap;
       font-weight: bold;
       text-align: left;
 
@@ -128,6 +129,10 @@
         @include mini-font;
         display: inline;
       }
+
+      &--tags {
+        margin: .25rem 0;
+      }
     }
 
     &__fileType--breakdown {

frontend/src/styles/tags.scss

@@ -0,0 +1,16 @@
+@import 'colors';
+
+/* Tags in commits */
+.tag {
+  @include mini-font;
+  background: mui-color('grey', '600');
+  border-radius: 5px;
+  color: mui-color('white');
+  display: inline-block;
+  margin: .2rem .2rem .2rem 0;
+  padding: 0 3px 0 3px;
+
+  .fa-tags {
+    width: .65rem;
+  }
+}

frontend/src/views/c-summary.vue

@@ -73,6 +73,13 @@
             v-bind:disabled="filterGroupSelection === 'groupByNone'"
           )
           span merge all groups
+        label.show-tags
+          input.mui-checkbox(
+            type="checkbox",
+            v-model="viewRepoTags",
+            v-on:change="getFiltered"
+          )
+          span show tags
   .error-message-box(v-if="Object.entries(errorMessages).length && !isWidgetMode")
     .error-message-box__close-button(v-on:click="dismissTab($event)") ×
     .error-message-box__message The following issues occurred when analyzing the following repositories:
@@ -123,7 +130,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:view-repo-tags="viewRepoTags"
   )
 </template>
 
@@ -205,7 +213,8 @@ export default defineComponent({
     chartGroupIndex: number | undefined,
     chartIndex: number | undefined,
     errorIsShowingMore: boolean,
-    numberOfErrorMessagesToShow: number
+    numberOfErrorMessagesToShow: number,
+    viewRepoTags: boolean,
     } {
     return {
       checkedFileTypes: [] as Array<string>,
@@ -235,6 +244,7 @@ export default defineComponent({
       chartIndex: undefined as number | undefined,
       errorIsShowingMore: false,
       numberOfErrorMessagesToShow: 4,
+      viewRepoTags: false,
     };
   },
   computed: {
@@ -388,7 +398,7 @@ export default defineComponent({
     },
 
     setSummaryHash(): void {
-      const { addHash, encodeHash } = window;
+      const { addHash, encodeHash, removeHash } = window;
 
       addHash('search', this.filterSearch);
       addHash('sort', this.sortGroupSelection);
@@ -419,7 +429,13 @@ export default defineComponent({
           : '';
         addHash('checkedFileTypes', checkedFileTypesHash);
       } else {
-        window.removeHash('checkedFileTypes');
+        removeHash('checkedFileTypes');
+      }
+
+      if (this.viewRepoTags) {
+        addHash('viewRepoTags', 'true');
+      } else {
+        removeHash('viewRepoTags');
       }
 
       encodeHash();
@@ -470,6 +486,9 @@ export default defineComponent({
       if (hash.chartIndex) {
         this.chartIndex = parseInt(hash.chartIndex, 10);
       }
+      if (hash.viewRepoTags) {
+        this.viewRepoTags = convertBool(hash.viewRepoTags);
+      }
     },
 
     getGroupName(group: Array<User>): string {

frontend/src/views/c-zoom.vue

@@ -385,6 +385,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../styles/_colors.scss';
+@import '../styles/tags.scss';
 
 #tab-zoom {
   .zoom {
@@ -414,21 +415,6 @@ export default defineComponent({
       h3 {
         @include large-font;
       }
-
-      /* Tags in commits */
-      .tag {
-        @include mini-font;
-        background: mui-color('grey', '600');
-        border-radius: 5px;
-        color: mui-color('white');
-        display: inline-block;
-        margin: .2rem .2rem .2rem 0;
-        padding: 0 3px 0 3px;
-
-        .fa-tags {
-          width: .65rem;
-        }
-      }
     }
   }
 }