Merge pull request #1871 from jplag/report-viwer/fix-scroll

Fix overscroll when clicking match

report-viewer/src/components/ScrollableComponent.vue

@@ -2,9 +2,26 @@
   Offers a un-styled scrollable container
 -->
 <template>
-  <div class="overflow-y-auto print:overflow-y-visible">
+  <div class="overflow-y-auto print:overflow-y-visible" ref="root">
     <div class="max-h-0 min-h-full print:max-h-none">
       <slot></slot>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { ref, type Ref } from 'vue'
+
+const root: Ref<HTMLElement | null> = ref(null)
+
+function getRoot() {
+  if (!root.value) {
+    throw new Error('Root element is not available')
+  }
+  return root.value
+}
+
+defineExpose({
+  getRoot
+})
+</script>

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

@@ -57,14 +57,6 @@ function matchSelected(match?: MatchInSingleFile) {
 
 const lineRef = ref<HTMLElement | null>(null)
 
-function scrollTo() {
-  if (lineRef.value) {
-    lineRef.value.scrollIntoView({ block: 'center' })
-  }
-}
-
-defineExpose({ scrollTo })
-
 interface TextPart {
   line: string
   match?: MatchInSingleFile

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

@@ -30,6 +30,7 @@
             v-for="(_, index) in codeLines"
             :key="index"
             class="col-span-1 col-start-1 row-span-1 text-right"
+            ref="lineRefs"
             :style="{
               gridRowStart: index + 1
             }"
@@ -40,7 +41,6 @@
           <CodeLine
             v-for="(line, index) in codeLines"
             :key="index"
-            ref="lineRefs"
             :line="line.line"
             :lineNumber="index + 1"
             :matches="line.matches"
@@ -58,7 +58,7 @@
 
 <script setup lang="ts">
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
-import { ref, nextTick, type PropType, computed, type Ref } from 'vue'
+import { ref, type PropType, computed, type Ref } from 'vue'
 import Interactable from '../InteractableComponent.vue'
 import type { SubmissionFile } from '@/model/File'
 import { highlight } from '@/utils/CodeHighlighter'
@@ -99,7 +99,7 @@ const props = defineProps({
 const emit = defineEmits(['matchSelected'])
 
 const collapsed = ref(true)
-const lineRefs = ref<(typeof CodeLine)[]>([])
+const lineRefs = ref<HTMLElement[]>([])
 
 const codeLines: Ref<{ line: string; matches: MatchInSingleFile[] }[]> = computed(() =>
   highlight(props.file.data, props.highlightLanguage).map((line, index) => {
@@ -116,27 +116,26 @@ function matchSelected(match: Match) {
   emit('matchSelected', match)
 }
 
-/**
- * Scrolls to the line number in the file.
- * @param lineNumber line number in the file
- */
-function scrollTo(lineNumber: number) {
-  collapsed.value = false
-  nextTick(function () {
-    lineRefs.value[lineNumber - 1].scrollTo()
-  })
-}
-
 /**
  * Collapses the container.
  */
 function collapse() {
   collapsed.value = true
 }
 
+function expand() {
+  console.log('expand')
+  collapsed.value = false
+}
+
+function getLineRect(lineNumber: number): DOMRect {
+  return lineRefs.value[lineNumber - 1].getBoundingClientRect()
+}
+
 defineExpose({
-  scrollTo,
-  collapse
+  collapse,
+  expand,
+  getLineRect
 })
 
 /**

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

@@ -15,7 +15,7 @@
       >
     </div>
 
-    <ScrollableComponent class="flex-grow">
+    <ScrollableComponent class="flex-grow" ref="scrollContainer">
       <VueDraggableNext>
         <CodePanel
           v-for="(file, index) in files"
@@ -42,7 +42,7 @@ import Container from '../ContainerComponent.vue'
 import Button from '../ButtonComponent.vue'
 import ScrollableComponent from '../ScrollableComponent.vue'
 import { VueDraggableNext } from 'vue-draggable-next'
-import { computed, ref, type PropType, type Ref } from 'vue'
+import { computed, nextTick, ref, type PropType, type Ref } from 'vue'
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCompressAlt } from '@fortawesome/free-solid-svg-icons'
@@ -94,6 +94,7 @@ const props = defineProps({
 defineEmits(['matchSelected'])
 
 const codePanels: Ref<(typeof CodePanel)[]> = ref([])
+const scrollContainer: Ref<typeof ScrollableComponent | null> = ref(null)
 
 const tokenCount = computed(() => {
   return props.files.reduce((acc, file) => (file.tokenCount ?? 0) + acc - 1, 0)
@@ -107,7 +108,19 @@ const tokenCount = computed(() => {
 function scrollTo(file: string, line: number) {
   const fileIndex = Array.from(props.files).findIndex((f) => f.fileName === file)
   if (fileIndex !== -1) {
-    codePanels.value[fileIndex].scrollTo(line)
+    console.log(fileIndex)
+    codePanels.value[fileIndex].expand()
+    nextTick(() => {
+      if (!scrollContainer.value) {
+        console.log('null')
+        return
+      }
+      const childToScrollTo = codePanels.value[fileIndex].getLineRect(line) as DOMRect
+      const scrollBox = scrollContainer.value.getRoot() as HTMLElement
+      scrollBox.scrollTo({
+        top: childToScrollTo.top + scrollBox.scrollTop - (scrollBox.clientHeight * 2) / 3
+      })
+    })
   }
 }