Merge pull request #1360 from jplag/report-viewer/improve-comparison

jplag · Nov 30, 2023 · 8150fd3 · 8150fd3
2 parents 04b89d2 + d121057
commit 8150fd3
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 16 deletions.
diff --git a/report-viewer/src/components/CodePanel.vue → ...c/components/fileDisplaying/CodePanel.vue b/report-viewer/src/components/CodePanel.vue → ...c/components/fileDisplaying/CodePanel.vue
@@ -50,7 +50,7 @@
 <script setup lang="ts">
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
 import { ref, nextTick, type PropType, computed, type Ref } from 'vue'
-import Interactable from './InteractableComponent.vue'
+import Interactable from '../InteractableComponent.vue'
 import type { Match } from '@/model/Match'
 import type { SubmissionFile } from '@/stores/state'
 import { highlight } from '@/utils/CodeHighlighter'
@@ -112,8 +112,16 @@ function scrollTo(lineNumber: number) {
   })
 }
 
+/**
+ * Collapses the container.
+ */
+function collapse() {
+  collapsed.value = true
+}
+
 defineExpose({
-  scrollTo
+  scrollTo,
+  collapse
 })
 
 /**

diff --git a/...-viewer/src/components/FilesContainer.vue → ...ponents/fileDisplaying/FilesContainer.vue b/...-viewer/src/components/FilesContainer.vue → ...ponents/fileDisplaying/FilesContainer.vue
@@ -3,10 +3,17 @@
 -->
 <template>
   <Container class="flex flex-col">
-    <h3 class="text-left text-lg font-bold">
-      Files of
-      {{ fileOwnerDisplayName }}:
-    </h3>
+    <div class="mb-2 mr-2 flex space-x-2">
+      <h3 class="flex-grow text-left text-lg font-bold">
+        Files of
+        {{ fileOwnerDisplayName }}:
+      </h3>
+      <Button @click="collapseAll()" class="space-x-2"
+        ><FontAwesomeIcon :icon="['fas', 'compress-alt']" />
+        <p>Collapse All</p></Button
+      >
+    </div>
+
     <ScrollableComponent class="flex-grow">
       <VueDraggableNext>
         <CodePanel
@@ -19,7 +26,7 @@
           "
           :highlight-language="highlightLanguage"
           @line-selected="(match) => $emit('lineSelected', match)"
-          class="mt-1"
+          class="mt-1 first:mt-0"
         />
       </VueDraggableNext>
     </ScrollableComponent>
@@ -28,13 +35,19 @@
 
 <script setup lang="ts">
 import type { SubmissionFile } from '@/stores/state'
-import CodePanel from '@/components/CodePanel.vue'
-import Container from './ContainerComponent.vue'
-import ScrollableComponent from './ScrollableComponent.vue'
+import CodePanel from './CodePanel.vue'
+import Container from '../ContainerComponent.vue'
+import Button from '../ButtonComponent.vue'
+import ScrollableComponent from '../ScrollableComponent.vue'
 import { VueDraggableNext } from 'vue-draggable-next'
 import { ref, type PropType, type Ref } from 'vue'
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
 import type { HighlightLanguage } from '@/model/Language'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCompressAlt } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+library.add(faCompressAlt)
 
 const props = defineProps({
   /**
@@ -83,6 +96,13 @@ function scrollTo(file: string, line: number) {
   }
 }
 
+/**
+ * Collapses all of the code panels.
+ */
+function collapseAll() {
+  codePanels.value.forEach((panel) => panel.collapse())
+}
+
 defineExpose({
   scrollTo
 })

diff --git a/report-viewer/src/components/MatchList.vue → ...c/components/fileDisplaying/MatchList.vue b/report-viewer/src/components/MatchList.vue → ...c/components/fileDisplaying/MatchList.vue
@@ -28,8 +28,8 @@
 
 <script setup lang="ts">
 import type { Match } from '@/model/Match'
-import OptionComponent from './optionsSelectors/OptionComponent.vue'
-import ToolTipComponent from './ToolTipComponent.vue'
+import OptionComponent from '../optionsSelectors/OptionComponent.vue'
+import ToolTipComponent from '@/components/ToolTipComponent.vue'
 import { getMatchColor } from '@/utils/ColorUtils'
 
 defineProps({

diff --git a/report-viewer/src/views/ComparisonView.vue b/report-viewer/src/views/ComparisonView.vue
@@ -39,9 +39,9 @@
         :files="filesOfFirst"
         :matches="comparison.matchesInFirstSubmission"
         :file-owner-display-name="
-          isAnonymous(comparison.secondSubmissionId)
+          isAnonymous(comparison.firstSubmissionId)
             ? 'Submission 1'
-            : (store().submissionDisplayName(comparison.secondSubmissionId) as string)
+            : (store().submissionDisplayName(comparison.firstSubmissionId) as string)
         "
         :highlight-language="language"
         @line-selected="showMatchInSecond"
@@ -69,8 +69,8 @@ import type { Match } from '@/model/Match'
 
 import { onMounted, ref, watch, type Ref, computed, type PropType, onErrorCaptured } from 'vue'
 import TextInformation from '@/components/TextInformation.vue'
-import MatchList from '@/components/MatchList.vue'
-import FilesContainer from '@/components/FilesContainer.vue'
+import MatchList from '@/components/fileDisplaying/MatchList.vue'
+import FilesContainer from '@/components/fileDisplaying/FilesContainer.vue'
 import { store } from '@/stores/store'
 import Container from '@/components/ContainerComponent.vue'
 import { HighlightLanguage } from '@/model/Language'