[#1929] Add dynamic positioning support for tooltips

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 { 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 @@
  cRamp,
  cStackedBarChart,
  },
- mixins: [brokenLinkDisabler],
+ mixins: [brokenLinkDisabler, tooltipPositioner],
  props: {
  checkedFileTypes: {
  type: Array<string>,
@@ -635,7 +692,7 @@
  getBaseTarget(target: HTMLElement | null): HTMLElement | null {
  if (!target) {
  // Should never reach here - function assumes that target is a child of the div with class 'summary-chart__ramp'
  console.error('Error: The getBaseTarget function in c-summary-charts.vue has been called on an element that is '
  + 'not a child of the div with class summary-chart__ramp. This might affect the drag view functionality.');
  return null;
  }

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/views/c-authorship.vue

@@ -148,18 +148,28 @@
  v-bind:class="!isBrokenLink(getHistoryLink(file)) ? '' : 'broken-link'",
  v-bind:href="getHistoryLink(file)", target="_blank"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`${file.path}-view-history-tooltip`)",
+ v-on:mouseout="resetTooltip(`${file.path}-view-history-tooltip`)"
+ )
  font-awesome-icon.button(icon="history")
- span.tooltip-text {{getLinkMessage(getHistoryLink(file), 'Click to view the history view of file')}}
+ span.tooltip-text(
+ v-bind:ref="`${file.path}-view-history-tooltip`"
+ ) {{getLinkMessage(getHistoryLink(file), 'Click to view the history view of file')}}
  a(
  v-if='!file.isBinary',
  v-bind:class="!isBrokenLink(getBlameLink(file)) ? '' : 'broken-link'",
  v-bind:href="getBlameLink(file)", target="_blank",
  title="click to view the blame view of file"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`${file.path}-view-blame-tooltip`)",
+ v-on:mouseout="resetTooltip(`${file.path}-view-blame-tooltip`)"
+ )
  font-awesome-icon.button(icon="user-edit")
- span.tooltip-text {{getLinkMessage(getBlameLink(file), 'Click to view the blame view of file')}}
+ span.tooltip-text(
+ v-bind:ref="`${file.path}-view-blame-tooltip`"
+ ) {{getLinkMessage(getBlameLink(file), 'Click to view the blame view of file')}}
  .author-breakdown(v-if="info.isMergeGroup")
  .author-breakdown__legend(
  v-for="author in getAuthors(file)",
@@ -186,6 +196,7 @@ import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import minimatch from 'minimatch';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cSegmentCollection from '../components/c-segment-collection.vue';
 import Segment from '../utils/segment';
 import getNonRepeatingColor from '../utils/random-color-generator';
@@ -229,7 +240,7 @@ export default defineComponent({
  components: {
  cSegmentCollection,
  },
- mixins: [brokenLinkDisabler],
+ mixins: [brokenLinkDisabler, tooltipPositioner],
  emits: [
  'deactivate-tab',
  ],
@@ -488,22 +499,6 @@ export default defineComponent({
  }
  },
 
- 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;
- },
-
  isUnknownAuthor(name: string): boolean {
  return name === '-';
  },

frontend/src/views/c-zoom.vue

@@ -126,9 +126,14 @@
  v-if="slice.messageBody !== ''",
  v-on:click="toggleSelectedCommitMessageBody(slice)"
  )
- .tooltip
+ .tooltip(
+ v-on:mouseover="onTooltipHover(`${slice.hash}-show-hide-message-body`)",
+ v-on:mouseout="resetTooltip(`${slice.hash}-show-hide-message-body`)"
+ )
  font-awesome-icon.commit-message--button(icon="ellipsis-h")
- span.tooltip-text Click to show/hide the commit message body
+ span.tooltip-text(
+ v-bind:ref="`${slice.hash}-show-hide-message-body`"
+ ) Click to show/hide the commit message body
  .body(v-if="slice.messageBody !== ''", v-show="slice.isOpen")
  pre {{ slice.messageBody }}
  .dashed-border
@@ -145,6 +150,7 @@ import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from '../components/c-ramp.vue';
 import cStackedBarChart from '../components/c-stacked-bar-chart.vue';
 import User from '../utils/user';
@@ -177,7 +183,7 @@ export default defineComponent({
  cRamp,
  cStackedBarChart,
  },
- mixins: [brokenLinkDisabler],
+ mixins: [brokenLinkDisabler, tooltipPositioner],
  data() {
  return {
  ...zoomInitialState(),