Add Tool Tip for Bread Crumbs in Comparison View

core/src/main/java/de/jplag/reporting/jsonfactory/ComparisonReportWriter.java

@@ -112,16 +112,20 @@ private Match convertMatchToReportMatch(JPlagComparison comparison, de.jplag.Mat
 
         int startLineFirst = startOfFirst.getLine();
         int startColumnFirst = startOfFirst.getColumn();
+        int startTokenFirst = match.startOfFirst();
         int endLineFirst = endOfFirst.getLine();
         int endColumnFirst = endOfFirst.getColumn() + endOfFirst.getLength() - 1;
+        int endTokenFirst = match.endOfFirst();
 
         int startLineSecond = startOfSecond.getLine();
         int startColumnSecond = startOfSecond.getColumn();
+        int startTokenSecond = match.startOfSecond();
         int endLineSecond = endOfSecond.getLine();
         int endColumnSecond = endOfSecond.getColumn() + endOfSecond.getLength() - 1;
+        int endTokenSecond = match.endOfSecond();
 
-        return new Match(firstFileName, secondFileName, startLineFirst, startColumnFirst, endLineFirst, endColumnFirst, startLineSecond,
-                startColumnSecond, endLineSecond, endColumnSecond, match.length());
+        return new Match(firstFileName, secondFileName, startLineFirst, startColumnFirst, startTokenFirst, endLineFirst, endColumnFirst,
+                endTokenFirst, startLineSecond, startColumnSecond, startTokenSecond, endLineSecond, endColumnSecond, endTokenSecond, match.length());
     }
 
 }

core/src/main/java/de/jplag/reporting/reportobject/model/Match.java

@@ -3,8 +3,10 @@
 import com.fasterxml.jackson.annotation.JsonProperty;
 
 public record Match(@JsonProperty("file1") String firstFileName, @JsonProperty("file2") String secondFileName,
-        @JsonProperty("start1") int startInFirst, @JsonProperty("start1_col") int startColumnInFirst, @JsonProperty("end1") int endInFirst,
-        @JsonProperty("end1_col") int endColumnInFirst, @JsonProperty("start2") int startInSecond,
-        @JsonProperty("start2_col") int startColumnInSecond, @JsonProperty("end2") int endInSecond, @JsonProperty("end2_col") int endColumnInSecond,
+        @JsonProperty("start1") int startInFirst, @JsonProperty("start1_col") int startColumnInFirst,
+        @JsonProperty("startToken1") int startTokenInFirst, @JsonProperty("end1") int endInFirst, @JsonProperty("end1_col") int endColumnInFirst,
+        @JsonProperty("endToken1") int endTokenInFirst, @JsonProperty("start2") int startInSecond,
+        @JsonProperty("start2_col") int startColumnInSecond, @JsonProperty("startToken2") int startTokenInSecond,
+        @JsonProperty("end2") int endInSecond, @JsonProperty("endToken2") int endTokenInSecond, @JsonProperty("end2_col") int endColumnInSecond,
         @JsonProperty("tokens") int tokens) {
 }

report-viewer/src/components/ComparisonsTable.vue

@@ -120,7 +120,11 @@
                     }"
                     class="flex w-full justify-center text-center"
                   >
-                    <ToolTipComponent class="w-fit" direction="left">
+                    <ToolTipComponent
+                      class="w-fit"
+                      direction="left"
+                      :tool-tip-container-will-be-centered="true"
+                    >
                       <template #default>
                         {{ clusters?.[item.clusterIndex].members?.length }}
                         <FontAwesomeIcon

report-viewer/src/components/ToolTipComponent.vue

@@ -1,76 +1,85 @@
 <template>
-  <div class="group relative inline-block">
-    <slot></slot>
-    <div
-      class="invisible absolute z-10 rounded-md px-1 text-center text-white delay-0 group-hover:visible group-hover:delay-200"
-      :style="tooltipPosition"
+  <div class="group pointer-events-none inline">
+    <div ref="contentRef" class="pointer-events-auto"><slot></slot></div>
+    <span
+      class="invisible absolute box-border delay-0 group-hover:visible group-hover:delay-200"
+      ref="tooltipRef"
+      v-if="$slots.tooltip"
     >
-      <slot name="tooltip"></slot>
-      <div class="absolute border-4 border-solid" :style="arrowStyle" v-if="$slots.tooltip">
-        <!-- Arrow -->
-      </div>
-    </div>
+      <span
+        class="arrowBase pointer-events-auto relative z-10 block rounded-md bg-tooltip px-1 text-center text-white after:absolute after:border-4 after:border-solid after:border-transparent"
+        :style="tooltipPosition"
+        :class="{
+          'after:top-1/2 after:-mt-1': props.direction == 'left' || props.direction == 'right',
+          'after:!left-1/2 after:-ml-1': props.direction == 'top' || props.direction == 'bottom',
+          'after:top-full after:!border-t-tooltip': props.direction == 'top',
+          'after:bottom-full after:!border-b-tooltip': props.direction == 'bottom',
+          'after:left-full after:!border-l-tooltip': props.direction == 'left',
+          'after:right-full after:!border-r-tooltip': props.direction == 'right'
+        }"
+      >
+        <slot name="tooltip"></slot>
+      </span>
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { ToolTipDirection } from '@/model/ui/ToolTip'
-import { computed, type PropType, type StyleValue } from 'vue'
+import { computed, ref, type PropType, type Ref, type StyleValue } from 'vue'
 
 const props = defineProps({
   direction: {
     type: String as PropType<ToolTipDirection>,
     required: false,
     default: 'top'
+  },
+  /** Sometimes the absolute div is centered horizontally on the content. Set this to true if that is the case. */
+  toolTipContainerWillBeCentered: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 })
 
-const opacity = 0.8
+const contentRef: Ref<HTMLElement | null> = ref(null)
+const tooltipRef: Ref<HTMLElement | null> = ref(null)
+const arrowOffset = 4
 
 const tooltipPosition = computed(() => {
   const style: StyleValue = {}
-
-  if (props.direction == 'left' || props.direction == 'right') {
-    style.top = '50%'
-    style.transform = 'translateY(-50%)'
-    if (props.direction == 'left') {
-      style.right = '105%'
-    } else {
-      style.left = '105%'
-    }
-  } else {
-    style.left = '50%'
-    style.transform = 'translateX(-50%)'
-    if (props.direction == 'top') {
-      style.bottom = '105%'
-    } else {
-      style.top = '105%'
-    }
+  const contentDiv = contentRef.value
+  const tooltipDiv = tooltipRef.value
+  if (!contentDiv || !tooltipDiv) {
+    return style
   }
-  style.backgroundColor = `rgba(0,0,0,${opacity})`
-
-  return style
-})
-
-const arrowStyle = computed(() => {
-  const style: StyleValue = {}
-  style.content = ' '
-
-  style.borderColor = ''
-  for (const dir of ['top', 'right', 'bottom', 'left']) {
-    style.borderColor += dir == props.direction ? `rgba(0,0,0,${opacity}) ` : 'transparent '
+  // zeros the tooltip on the topleft of the content
+  let top = -contentDiv.offsetHeight
+  let left = props.toolTipContainerWillBeCentered ? -contentDiv.offsetWidth / 2 : 0
+  if (props.direction == 'right' || props.direction == 'left') {
+    top += (contentDiv.offsetHeight - tooltipDiv.offsetHeight) / 2
+  } else {
+    left -= (tooltipDiv.offsetWidth - contentDiv.offsetWidth) / 2
   }
 
-  if (props.direction == 'left' || props.direction == 'right') {
-    style.top = '50%'
-    style.marginTop = '-4px'
+  if (props.direction == 'right') {
+    left += contentDiv.offsetWidth + arrowOffset
+  } else if (props.direction == 'left') {
+    left -= tooltipDiv.offsetWidth + arrowOffset
+  } else if (props.direction == 'bottom') {
+    top += contentDiv.offsetHeight + arrowOffset
   } else {
-    style.left = '50%'
-    style.marginLeft = '-4px'
+    top -= tooltipDiv.offsetHeight + arrowOffset
   }
 
-  style[props.direction] = '100%'
-
+  style.top = top + 'px'
+  style.left = left + 'px'
   return style
 })
 </script>
+
+<style scoped>
+.arrowBase::after {
+  content: ' ';
+}
+</style>

report-viewer/src/components/fileDisplaying/MatchList.vue

@@ -17,15 +17,44 @@
     <div
       class="print-excact flex w-full flex-row space-x-1 overflow-x-auto print:flex-wrap print:space-y-1 print:overflow-x-hidden"
     >
-      <OptionComponent
+      <ToolTipComponent
+        :direction="getTooltipDirection(index)"
         v-for="[index, match] in matches?.entries()"
-        :style="{ background: getMatchColor(0.3, match.colorIndex) }"
-        v-bind:key="index"
-        @click="$emit('matchSelected', match)"
-        :label="
-          getFileName(match.firstFile) + ' - ' + getFileName(match.secondFile) + ': ' + match.tokens
-        "
-      />
+        :key="index"
+      >
+        <template #default>
+          <OptionComponent
+            :style="{ background: getMatchColor(0.3, match.colorIndex) }"
+            @click="$emit('matchSelected', match)"
+            :label="
+              getFileName(match.firstFile) +
+              ' - ' +
+              getFileName(match.secondFile) +
+              ': ' +
+              match.tokens
+            "
+          />
+        </template>
+        <template #tooltip>
+          <p class="whitespace-pre text-sm">
+            Match between {{ getFileName(match.firstFile) }} (Line {{ match.startInFirst.line }}-{{
+              match.endInFirst.line
+            }}) and {{ getFileName(match.secondFile) }} (Line {{ match.startInSecond.line }}-{{
+              match.endInSecond.line
+            }}) <br />
+            Match is {{ match.tokens }} tokens long. <br />
+            <span v-if="showTokenRanges(match)">
+              Token ranges: {{ match.startInFirst.tokenListIndex }}-{{
+                match.endInFirst.tokenListIndex
+              }}
+              and {{ match.startInSecond.tokenListIndex }}-{{ match.endInSecond.tokenListIndex }}.
+              <br />
+            </span>
+
+            Click to show in code view.
+          </p>
+        </template>
+      </ToolTipComponent>
     </div>
   </div>
 
@@ -59,8 +88,9 @@ import type { Match } from '@/model/Match'
 import OptionComponent from '../optionsSelectors/OptionComponent.vue'
 import ToolTipComponent from '@/components/ToolTipComponent.vue'
 import { getMatchColor } from '@/utils/ColorUtils'
+import type { ToolTipDirection } from '@/model/ui/ToolTip'
 
-defineProps({
+const props = defineProps({
   /**
    * Matches of the comparison.
    * type: Array<Match>
@@ -87,4 +117,21 @@ defineEmits(['matchSelected'])
 function getFileName(fullPath: string) {
   return fullPath.split(/[/\\]/g).pop() || ''
 }
+
+function getTooltipDirection(index: number): ToolTipDirection {
+  if (index == 0) return 'right'
+  if (index >= 2 && index + 2 >= (props.matches?.length ?? Infinity)) {
+    return 'left'
+  }
+  return 'bottom'
+}
+
+function showTokenRanges(match: Match) {
+  return (
+    !isNaN(match.startInFirst.tokenListIndex) &&
+    !isNaN(match.startInSecond.tokenListIndex) &&
+    !isNaN(match.endInFirst.tokenListIndex) &&
+    !isNaN(match.endInSecond.tokenListIndex)
+  )
+}
 </script>

report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue

@@ -7,7 +7,11 @@
       {{ title }}
     </div>
     <div v-for="[index, label] in labels.entries()" :key="index">
-      <ToolTipComponent v-if="(label as ToolTipLabel).displayValue !== undefined" direction="right">
+      <ToolTipComponent
+        v-if="(label as ToolTipLabel).displayValue !== undefined"
+        direction="right"
+        :tool-tip-container-will-be-centered="true"
+      >
         <template #default>
           <OptionComponent
             :label="(label as ToolTipLabel).displayValue"

report-viewer/src/model/Match.ts

@@ -12,14 +12,16 @@
 export interface Match {
   firstFile: string
   secondFile: string
-  startInFirst: number
-  startColumnInFirst: number
-  endInFirst: number
-  endColumnInFirst: number
-  startInSecond: number
-  startColumnInSecond: number
-  endInSecond: number
-  endColumnInSecond: number
+  startInFirst: CodePosition
+  endInFirst: CodePosition
+  startInSecond: CodePosition
+  endInSecond: CodePosition
   tokens: number
   colorIndex?: number
 }
+
+export interface CodePosition {
+  line: number
+  column: number
+  tokenListIndex: number
+}

report-viewer/src/model/MatchInSingleFile.ts

@@ -24,9 +24,9 @@ export class MatchInSingleFile {
    */
   get start(): number {
     if (this._index === 1) {
-      return this._match.startInFirst
+      return this._match.startInFirst.line
     } else {
-      return this._match.startInSecond
+      return this._match.startInSecond.line
     }
   }
 
@@ -35,25 +35,25 @@ export class MatchInSingleFile {
    */
   get end(): number {
     if (this._index === 1) {
-      return this._match.endInFirst
+      return this._match.endInFirst.line
     } else {
-      return this._match.endInSecond
+      return this._match.endInSecond.line
     }
   }
 
   get startColumn(): number {
     if (this._index === 1) {
-      return this._match.startColumnInFirst
+      return this._match.startInFirst.column
     } else {
-      return this._match.startColumnInSecond
+      return this._match.startInSecond.column
     }
   }
 
   get endColumn(): number {
     if (this._index === 1) {
-      return this._match.endColumnInFirst
+      return this._match.endInFirst.column
     } else {
-      return this._match.endColumnInSecond
+      return this._match.endInSecond.column
     }
   }
 }

report-viewer/src/model/factories/ComparisonFactory.ts

@@ -122,14 +122,26 @@ export class ComparisonFactory extends BaseFactory {
     return {
       firstFile: slash(match.file1 as string),
       secondFile: slash(match.file2 as string),
-      startInFirst: match.start1 as number,
-      startColumnInFirst: ((match['start1_col'] as number) || 1) - 1,
-      endInFirst: match.end1 as number,
-      endColumnInFirst: ((match['end1_col'] as number) || Infinity) - 1,
-      startInSecond: match.start2 as number,
-      startColumnInSecond: ((match['start2_col'] as number) || 1) - 1,
-      endInSecond: match.end2 as number,
-      endColumnInSecond: ((match['end2_col'] as number) || Infinity) - 1,
+      startInFirst: {
+        line: match.start1 as number,
+        column: ((match['start1_col'] as number) || 1) - 1,
+        tokenListIndex: (match.startToken1 as number) ?? NaN
+      },
+      endInFirst: {
+        line: match.end1 as number,
+        column: ((match['end1_col'] as number) || Infinity) - 1,
+        tokenListIndex: (match.endToken1 as number) ?? NaN
+      },
+      startInSecond: {
+        line: match.start2 as number,
+        column: ((match['start2_col'] as number) || 1) - 1,
+        tokenListIndex: (match.startToken2 as number) ?? NaN
+      },
+      endInSecond: {
+        line: match.end2 as number,
+        column: ((match['end2_col'] as number) || Infinity) - 1,
+        tokenListIndex: (match.endToken2 as number) ?? NaN
+      },
       tokens: match.tokens as number
     }
   }
@@ -138,10 +150,10 @@ export class ComparisonFactory extends BaseFactory {
     const maxColorCount = getMatchColorCount()
     let currentColorIndex = 0
     const matchesFirst = Array.from(matches)
-      .sort((a, b) => a.startInFirst - b.startInFirst)
+      .sort((a, b) => a.startInFirst.line - b.startInFirst.line)
       .sort((a, b) => (a.firstFile > b.firstFile ? 1 : -1))
     const matchesSecond = Array.from(matches)
-      .sort((a, b) => a.startInSecond - b.startInSecond)
+      .sort((a, b) => a.startInSecond.line - b.startInSecond.line)
       .sort((a, b) => (a.secondFile > b.secondFile ? 1 : -1))
     const sortedSize = Array.from(matches).sort((a, b) => b.tokens - a.tokens)