Merge branch 'master' into 1726-update-github-references

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

@@ -281,7 +281,7 @@ describe('range changes in chartview should reflect in zoom', () => {
  .get('#summary-charts .summary-chart__ramp .ramp')
  .first()
  .click(120, 20)
- .click(185, 20);
+ .click(170, 20);
 
  cy.get('#tab-zoom')
  .should('be.visible');
@@ -306,7 +306,7 @@ describe('range changes in chartview should reflect in zoom', () => {
  cy.get('body').type(zoomKey, { release: false })
  .get('#summary-charts .summary-chart__ramp .ramp')
  .first()
- .click(185, 20)
+ .click(170, 20)
  .click(250, 20);
 
  cy.get('#tab-zoom')
@@ -333,7 +333,7 @@ describe('range changes in chartview should reflect in zoom', () => {
  cy.get('body').type(zoomKey, { release: false })
  .get('#summary-charts .summary-chart__ramp .ramp')
  .first()
- .click(185, 20)
+ .click(170, 20)
  .click(225, 20);
 
  cy.get('#tab-zoom')

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

@@ -21,89 +21,119 @@
  v-bind:class=" { warn: repo[0].name === '-' }"
  ) {{ getAuthorDisplayName(repo) }} ({{ repo[0].name }})
  .summary-charts__title--contribution
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-total-contribution`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-total-contribution`)"
+ )
  | [{{ getGroupTotalContribution(repo) }} lines]
  span.tooltip-text(
  v-if="filterGroupSelection === 'groupByRepos' && !isChartGroupWidgetMode"
- ) Total contribution of group
+ )(v-bind:ref="`summary-charts-${i}-total-contribution`") Total contribution of group
  span.tooltip-text(
  v-else-if="filterGroupSelection === 'groupByAuthors' && !isChartGroupWidgetMode"
- ) Total contribution of author
+ )(v-bind:ref="`summary-charts-${i}-total-contribution`") Total contribution of author
  a(
  v-if="!isGroupMerged(getGroupName(repo)) && !isChartGroupWidgetMode",
  v-on:click="handleMergeGroup(getGroupName(repo))"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-merge-group`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-merge-group`)"
+ )
  font-awesome-icon.icon-button(:icon="['fas', 'chevron-up']")
- span.tooltip-text Click to merge group
+ span.tooltip-text(v-bind:ref="`summary-charts-${i}-merge-group`") Click to merge group
  a(
  v-if="isGroupMerged(getGroupName(repo)) && !isChartGroupWidgetMode",
  v-on:click="handleExpandGroup(getGroupName(repo))"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-expand-group`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-expand-group`)"
+ )
  font-awesome-icon.icon-button(:icon="['fas', 'chevron-down']")
- span.tooltip-text Click to expand group
+ span.tooltip-text(v-bind:ref="`summary-charts-${i}-expand-group`") Click to expand group
  a(
  v-if="filterGroupSelection === 'groupByRepos'",
  v-bind:class="!isBrokenLink(getRepoLink(repo[0])) ? '' : 'broken-link'",
  v-bind:href="getRepoLink(repo[0])", target="_blank"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-repo-link`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-repo-link`)"
+ )
  font-awesome-icon.icon-button(:icon="getRepoIcon(repo[0])")
  span.tooltip-text(
  v-if="!isChartGroupWidgetMode",
+ v-bind:ref="`summary-charts-${i}-repo-link`"
  ) {{getGroupRepoLinkMessage(repo[0])}}
  a(
  v-else-if="filterGroupSelection === 'groupByAuthors'",
  v-bind:class="!isBrokenLink(getAuthorProfileLink(repo[0], repo[0].name)) ? '' : 'broken-link'",
  v-bind:href="getAuthorProfileLink(repo[0], repo[0].name)", target="_blank"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-author-link`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-author-link`)"
+ )
  font-awesome-icon.icon-button(icon="user")
  span.tooltip-text(
  v-if="!isChartGroupWidgetMode",
+ v-bind:ref="`summary-charts-${i}-author-link`"
  ) {{getAuthorProfileLinkMessage(repo[0])}}
  template(v-if="isGroupMerged(getGroupName(repo))")
  a(
  v-if="filterGroupSelection !== 'groupByAuthors' && !isChartGroupWidgetMode",
  onclick="deactivateAllOverlays()",
  v-on:click="openTabAuthorship(repo[0], repo, 0, isGroupMerged(getGroupName(repo)))"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-group-code`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-group-code`)"
+ )
  font-awesome-icon.icon-button(
  icon="code",
  v-bind:class="{ 'active-icon': isSelectedTab(repo[0].name, repo[0].repoName, 'authorship', true) }"
  )
- span.tooltip-text Click to view group's code
+ span.tooltip-text(v-bind:ref="`summary-charts-${i}-group-code`") Click to view group's code
  a(
  v-if="!isChartGroupWidgetMode",
  onclick="deactivateAllOverlays()",
  v-on:click="openTabZoom(repo[0], filterSinceDate, filterUntilDate, isGroupMerged(getGroupName(repo)))"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-commit-breakdown`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-commit-breakdown`)"
+ )
  font-awesome-icon.icon-button(
  icon="list-ul",
  v-bind:class="{ 'active-icon': isSelectedTab(repo[0].name, repo[0].repoName, 'zoom', true) }"
  )
- span.tooltip-text Click to view breakdown of commits
+ span.tooltip-text(v-bind:ref="`summary-charts-${i}-commit-breakdown`") Click to view breakdown of commits
  a(
  v-if="isChartGroupWidgetMode && !isChartWidgetMode",
  v-bind:href="getReportLink()", target="_blank"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-commit-breakdown-group-widget`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-commit-breakdown-group-widget`)"
+ )
  font-awesome-icon.icon-button(
  icon="arrow-up-right-from-square",
  )
  span.tooltip-text(
  v-if="!isChartGroupWidgetMode",
+ v-bind:ref="`summary-charts-${i}-commit-breakdown-group-widget`"
  ) Click to view breakdown of commits on RepoSense
  a(
  v-if="!isChartGroupWidgetMode",
  v-on:click="getEmbeddedIframe(i)"
  )
- .tooltip(v-bind:id="'tooltip-' + i")
+ .tooltip(v-bind:id="'tooltip-' + i",
+ v-on:mouseover="onTooltipHover(`summary-charts-${i}-copy-iframe`)",
+ v-on:mouseout="resetTooltip(`summary-charts-${i}-copy-iframe`)"
+ )
  font-awesome-icon.icon-button(icon="clipboard")
- span.tooltip-text Click to copy iframe link for group
+ span.tooltip-text(v-bind:ref="`summary-charts-${i}-copy-iframe`") Click to copy iframe link for group
 
  .tooltip.summary-chart__title--percentile(
  v-if="sortGroupSelection.includes('totalCommits')"
@@ -143,61 +173,87 @@
  v-bind:class="!isBrokenLink(getRepoLink(user)) ? '' : 'broken-link'",
  v-bind:href="getRepoLink(user)", target="_blank"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-repo-link`)",
+ v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-repo-link`)"
+ )
  font-awesome-icon.icon-button(:icon="getRepoIcon(repo[0])")
  span.tooltip-text(
  v-if="!isChartGroupWidgetMode",
+ v-bind:ref="`repo-${i}-author-${j}-repo-link`"
  ) {{getRepoLinkMessage(user)}}
  a(
  v-if="filterGroupSelection !== 'groupByAuthors'",
  v-bind:class="!isBrokenLink(getAuthorProfileLink(user, user.name)) ? '' : 'broken-link'",
  v-bind:href="getAuthorProfileLink(user, user.name)", target="_blank"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-author-link`)",
+ v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-author-link`)"
+ )
  font-awesome-icon.icon-button(icon="user")
  span.tooltip-text(
  v-if="!isChartGroupWidgetMode",
+ v-bind:ref="`repo-${i}-author-${j}-author-link`"
  ) {{getAuthorProfileLinkMessage(user)}}
  a(
  v-if="!isChartGroupWidgetMode",
  onclick="deactivateAllOverlays()",
  v-on:click="openTabAuthorship(user, repo, j, isGroupMerged(getGroupName(repo)))"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-author-contribution`)",
+ v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-author-contribution`)"
+ )
  font-awesome-icon.icon-button(
  icon="code",
  v-bind:class="{ 'active-icon': isSelectedTab(user.name, user.repoName, 'authorship', false) }"
  )
- span.tooltip-text Click to view author's contribution.
+ span.tooltip-text(
+ v-bind:ref="`repo-${i}-author-${j}-author-contribution`"
+ ) Click to view author's contribution.
  a(
  v-if="!isChartGroupWidgetMode",
  onclick="deactivateAllOverlays()",
  v-on:click="openTabZoom(user, filterSinceDate, filterUntilDate, isGroupMerged(getGroupName(repo)))"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-commit-breakdown`)",
+ v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-commit-breakdown`)"
+ )
  font-awesome-icon.icon-button(
  icon="list-ul",
  v-bind:class="{ 'active-icon': isSelectedTab(user.name, user.repoName, 'zoom', false) }"
  )
- span.tooltip-text Click to view breakdown of commits
+ span.tooltip-text(
+ v-bind:ref="`repo-${i}-author-${j}-commit-breakdown`"
+ ) Click to view breakdown of commits
  a(
  v-if="isChartGroupWidgetMode",
  v-bind:href="getReportLink()", target="_blank"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-commit-breakdown-group-widget`)",
+ v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-commit-breakdown-group-widget`)"
+ )
  font-awesome-icon.icon-button(
  icon="arrow-up-right-from-square",
  )
  span.tooltip-text(
  v-if="!isChartGroupWidgetMode",
+ v-bind:ref="`repo-${i}-author-${j}-commit-breakdown-group-widget`"
  ) Click to view breakdown of commits on RepoSense
  a(
  v-if="!isChartGroupWidgetMode",
  v-on:click="getEmbeddedIframe(i , j)"
  )
- .tooltip(v-bind:id="'tooltip-' + i + '-' + j")
+ .tooltip(
+ v-bind:id="'tooltip-' + i + '-' + j",
+ v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-iframe-link`)",
+ v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-iframe-link`)"
+ )
  font-awesome-icon.icon-button(icon="clipboard")
- span.tooltip-text Click to copy iframe link
+ span.tooltip-text(v-bind:ref="`repo-${i}-author-${j}-iframe-link`") Click to copy iframe link
  .tooltip.summary-chart__title--percentile(
  v-if="filterGroupSelection === 'groupByNone' && sortGroupSelection.includes('totalCommits')"
  ) {{ getPercentile(j) }} %&nbsp
@@ -239,6 +295,7 @@ import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from './c-ramp.vue';
 import cStackedBarChart from './c-stacked-bar-chart.vue';
 import { Bar, Repo, User } from '../types/types';
@@ -252,7 +309,7 @@ export default defineComponent({
  cRamp,
  cStackedBarChart,
  },
- mixins: [brokenLinkDisabler],
+ mixins: [brokenLinkDisabler, tooltipPositioner],
  props: {
  checkedFileTypes: {
  type: Array<string>,

frontend/src/mixin/dynamicTooltipMixin.ts

@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ methods: {
+ onTooltipHover(refName: string): void {
+ const tooltipTextElement = (this.$refs[refName] as HTMLElement[])[0];
+ if (this.isElementAboveViewport(tooltipTextElement)) {
+ tooltipTextElement.classList.add('bottom-aligned');
+ }
+ },
+ resetTooltip(refName: string): void {
+ const tooltipTextElement = (this.$refs[refName] as HTMLElement[])[0];
+ tooltipTextElement.classList.remove('bottom-aligned');
+ },
+ isElementAboveViewport(el: Element): boolean {
+ return el.getBoundingClientRect().top <= 0;
+ },
+ },
+});

frontend/src/styles/_z-indices.scss

@@ -16,4 +16,5 @@ $z-indices: (
  'header': 100,
  'loader': 10,
  'tooltip': 100,
+ 'max-value': 250,
 );

frontend/src/styles/style.scss

@@ -107,7 +107,6 @@ a.broken-link {
  }
 
  &.bottom-aligned {
- @include medium-font;
  bottom: auto;
  top: 125%;
  }