solve attribute order issues

report-viewer/src/components/ClusterGraph.vue

@@ -7,7 +7,7 @@
       ></canvas>
       <div class="mt-5 text-xs font-bold text-gray-500 dark:text-gray-400 print:hidden">
         <p>Hover over an edge to highlight it in the table.</p>
-        <p class="mt-2" v-if="!allComparisonsPresent">
+        <p v-if="!allComparisonsPresent" class="mt-2">
           Not all comparisons of this cluster are present. These comparisons are indicated by the
           dashed lines. <br />
           To include more comparisons, increase the number of increased comparisons in the CLI.
@@ -306,13 +306,13 @@ const graphOptions = computed(() => {
         })
       }
     },
-    animation: false as false,
+    animation: false as const,
     plugins: {
       legend: { display: false },
       datalabels: {
         display: true,
         font: {
-          weight: 'bold' as 'bold',
+          weight: 'bold' as const,
           size: 12
         },
         formatter: (value: any, ctx: any) => {

report-viewer/src/components/ClusterRadarChart.vue

@@ -10,7 +10,7 @@
     >
       <DropDownSelector
         :options="selectedOptions"
-        @selectionChanged="(value) => (idOfShownSubmission = value)"
+        @selection-changed="(value) => (idOfShownSubmission = value)"
       />
       <div class="flex min-h-0 flex-grow justify-center">
         <Radar :data="chartData" :options="radarChartOptions" />

report-viewer/src/components/ComparisonTableFilter.vue

@@ -4,7 +4,7 @@
       <h2>{{ header }}</h2>
       <ToolTipComponent direction="left" class="min-w-[50%] flex-grow">
         <template #default>
-          <SearchBarComponent placeholder="Filter/Unhide Comparisons" v-model="searchStringValue" />
+          <SearchBarComponent v-model="searchStringValue" placeholder="Filter/Unhide Comparisons" />
         </template>
         <template #tooltip>
           <p class="whitespace-pre text-sm">
@@ -31,7 +31,7 @@
     </div>
     <OptionsSelector
       title="Sort By:"
-      :defaultSelected="getSortingMetric()"
+      :default-selected="getSortingMetric()"
       :labels="tableSortingOptions"
       @selection-changed="(index: number) => changeSortingMetric(index)"
     />

report-viewer/src/components/ComparisonsTable.vue

@@ -45,17 +45,17 @@
               </ToolTipComponent>
             </div>
           </div>
-          <div class="tableCellCluster items-center" v-if="displayClusters">Cluster</div>
+          <div v-if="displayClusters" class="tableCellCluster items-center">Cluster</div>
         </div>
       </div>
 
       <!-- Body -->
       <div class="flex flex-grow flex-col overflow-hidden">
         <DynamicScroller
           v-if="topComparisons.length > 0"
+          ref="dynamicScroller"
           :items="displayedComparisons"
           :min-item-size="48"
-          ref="dynamicScroller"
           ><template #default="{ item, index, active }">
             <DynamicScrollerItem
               :item="item"
@@ -111,7 +111,7 @@
                 </RouterLink>
 
                 <!-- Clusters -->
-                <div class="tableCellCluster flex !flex-col items-center" v-if="displayClusters">
+                <div v-if="displayClusters" class="tableCellCluster flex !flex-col items-center">
                   <RouterLink
                     v-if="item.clusterIndex >= 0"
                     :to="{

report-viewer/src/components/DropDownSelector.vue

@@ -5,8 +5,8 @@
   <Interactable class="!cursor-default p-0">
     <select
       v-model="selectedOption"
-      @change="$emit('selectionChanged', selectedOption)"
       class="m-0 w-full cursor-pointer bg-interactable-light dark:bg-interactable-dark"
+      @change="$emit('selectionChanged', selectedOption)"
     >
       <option v-for="option in options" :key="option" :value="option">
         {{ store().getDisplayName(option) }}

report-viewer/src/components/ScrollableComponent.vue

@@ -2,7 +2,7 @@
   Offers a un-styled scrollable container
 -->
 <template>
-  <div class="overflow-y-auto print:overflow-y-visible" ref="root">
+  <div ref="root" class="overflow-y-auto print:overflow-y-visible">
     <div class="max-h-0 min-h-full print:max-h-none">
       <slot></slot>
     </div>

report-viewer/src/components/SearchBarComponent.vue

@@ -9,10 +9,10 @@
       @click="emit('searchClicked', inputText)"
     />
     <input
+      v-model="inputText"
       type="text"
       class="flex-auto border-0 bg-transparent outline-none placeholder:text-gray-500"
       :placeholder="placeholder"
-      v-model="inputText"
     />
   </Interactable>
 </template>

report-viewer/src/components/TabbedContainer.vue

@@ -3,14 +3,14 @@
     <div class="flex w-full bg-container-secondary-light dark:bg-container-secondary-dark">
       <div
         v-for="index in Array(props.tabs.length).keys()"
-        class="cursor-pointer border-r border-container-border-light dark:border-container-border-dark"
-        @click="selectedTab = tabNames[index]"
         :key="index"
+        class="cursor-pointer border-r border-container-border-light dark:border-container-border-dark"
         :class="
           tabNames[index] == selectedTab
             ? 'border-b-0 bg-container-light dark:bg-container-dark'
             : 'border-b bg-container-secondary-light dark:bg-container-secondary-dark'
         "
+        @click="selectedTab = tabNames[index]"
       >
         <ToolTipComponent
           v-if="toolTips[index]"

report-viewer/src/components/TextInformation.vue

@@ -8,7 +8,7 @@
         {{ label }}:
         <i><slot name="default"></slot></i>
       </template>
-      <template #tooltip v-if="$slots.tooltip">
+      <template v-if="$slots.tooltip" #tooltip>
         <slot name="tooltip"></slot>
       </template>
     </ToolTipComponent>

report-viewer/src/components/ToastComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="absolute bottom-5 left-5 max-w-96 rounded-md border-2 border-accent-dark bg-container-light dark:bg-container-dark"
     v-if="timePassed < timeToLive && visible"
+    class="absolute bottom-5 left-5 max-w-96 rounded-md border-2 border-accent-dark bg-container-light dark:bg-container-dark"
   >
     <div class="flex">
       <div class="flex-grow p-2">

report-viewer/src/components/ToolTipComponent.vue

@@ -2,9 +2,9 @@
   <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"
+      ref="tooltipRef"
+      class="invisible absolute box-border delay-0 group-hover:visible group-hover:delay-200"
     >
       <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"

report-viewer/src/components/distributionDiagram/DistributionDiagram.vue

@@ -79,7 +79,7 @@ const options = computed(() => {
   return {
     responsive: true,
     maintainAspectRatio: false,
-    indexAxis: 'y' as 'y',
+    indexAxis: 'y' as const,
     scales: {
       x: {
         //Highest count of submissions in a percentage range. We set the diagrams maximum shown value to maxVal + 5,
@@ -95,7 +95,7 @@ const options = computed(() => {
           autoSkipPadding: 10,
           color: graphColors.ticksAndFont.value,
           // ensures that in log mode ticks are placed evenly apart
-          callback: function (value: any) {
+          callback: function (value: unknown) {
             if (graphOptions.value.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) {
               return value
             }
@@ -133,23 +133,23 @@ const options = computed(() => {
         }
       }
     },
-    animation: false as false,
+    animation: false as const,
     plugins: {
       datalabels: {
         color: graphColors.ticksAndFont.value,
         font: {
-          weight: 'bold' as 'bold',
+          weight: 'bold' as const,
           size: getDataLabelFontSize()
         },
-        anchor: 'end' as 'end',
-        align: 'end' as 'end',
+        anchor: 'end' as const,
+        align: 'end' as const,
         clamp: true,
         text: 'test'
       },
       legend: {
         display: true,
-        position: 'bottom' as 'bottom',
-        align: 'end' as 'end',
+        position: 'bottom' as const,
+        align: 'end' as const,
         onClick: () => {}
       }
     }

report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue

@@ -5,7 +5,7 @@
       <MetricSelector
         class="mt-2"
         title="Metric:"
-        :defaultSelected="store().uiState.distributionChartConfig.metric"
+        :default-selected="store().uiState.distributionChartConfig.metric"
         @selection-changed="
           (metric: MetricType) => (store().uiState.distributionChartConfig.metric = metric)
         "
@@ -14,7 +14,7 @@
         class="mt-2"
         title="Scale x-Axis:"
         :labels="['Linear', 'Logarithmic']"
-        :defaultSelected="store().uiState.distributionChartConfig.xScale == 'linear' ? 0 : 1"
+        :default-selected="store().uiState.distributionChartConfig.xScale == 'linear' ? 0 : 1"
         @selection-changed="
           (i: number) =>
             (store().uiState.distributionChartConfig.xScale = i == 0 ? 'linear' : 'logarithmic')
@@ -24,7 +24,7 @@
         class="mt-2"
         title="Bucket Count:"
         :labels="resolutionOptions.map((div) => div.toString())"
-        :defaultSelected="
+        :default-selected="
           resolutionOptions.indexOf(store().uiState.distributionChartConfig.bucketCount)
         "
         @selection-changed="

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

@@ -1,27 +1,27 @@
 <template>
   <div
+    ref="lineRef"
     class="col-span-1 col-start-2 row-span-1 flex w-full cursor-default"
     :class="{ 'cursor-pointer': matches.length > 0 }"
     :style="{
       gridRowStart: lineNumber
     }"
-    ref="lineRef"
   >
     <div
       v-for="(part, index) in textParts"
       :key="index"
       class="print-exact h-full last:flex-1"
-      @click="matchSelected(part.match)"
       :style="{
         background:
           part.match != undefined
             ? getMatchColor(0.3, part.match.match.colorIndex)
             : 'hsla(0, 0%, 0%, 0)'
       }"
+      @click="matchSelected(part.match)"
     >
       <pre
-        v-html="part.line"
         class="code-font print-exact break-child !bg-transparent print:whitespace-pre-wrap"
+        v-html="part.line"
       ></pre>
     </div>
   </div>

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

@@ -3,8 +3,8 @@
 -->
 <template>
   <Interactable class="mx-2 !shadow print:!mx-0 print:!border-0 print:!p-0">
-    <div @click="collapsed = !collapsed" class="flex px-2 font-bold print:whitespace-pre-wrap">
-      <ToolTipComponent direction="right" v-if="getFileDisplayName(file) != file.fileName">
+    <div class="flex px-2 font-bold print:whitespace-pre-wrap" @click="collapsed = !collapsed">
+      <ToolTipComponent v-if="getFileDisplayName(file) != file.fileName" direction="right">
         <template #default
           ><span>{{ getFileDisplayName(file) }}</span></template
         >
@@ -42,8 +42,8 @@
           <div
             v-for="(_, index) in codeLines"
             :key="index"
-            class="col-span-1 col-start-1 row-span-1 text-right"
             ref="lineRefs"
+            class="col-span-1 col-start-1 row-span-1 text-right"
             :style="{
               gridRowStart: index + 1
             }"
@@ -55,9 +55,9 @@
             v-for="(line, index) in codeLines"
             :key="index"
             :line="line.line"
-            :lineNumber="index + 1"
+            :line-number="index + 1"
             :matches="line.matches"
-            @matchSelected="(match: Match) => matchSelected(match)"
+            @match-selected="(match: Match) => matchSelected(match)"
           />
         </div>
 

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

@@ -9,13 +9,13 @@
         {{ fileOwnerDisplayName }}:
       </h3>
       <div class="text-gray-600 dark:text-gray-300">{{ tokenCount }} total tokens</div>
-      <Button @click="collapseAll()" class="space-x-2 print:hidden"
+      <Button class="space-x-2 print:hidden" @click="collapseAll()"
         ><FontAwesomeIcon :icon="['fas', 'compress-alt']" />
         <p>Collapse All</p></Button
       >
     </div>
 
-    <ScrollableComponent class="flex-grow" ref="scrollContainer">
+    <ScrollableComponent ref="scrollContainer" class="flex-grow">
       <VueDraggableNext @update="emitFileMoving()">
         <CodePanel
           v-for="file in sortedFiles"
@@ -24,9 +24,9 @@
           :file="file"
           :matches="matchesPerFile[file.fileName]"
           :highlight-language="highlightLanguage"
-          @match-selected="(match: Match) => $emit('matchSelected', match)"
           class="mt-1 first:mt-0"
           :base-code-matches="baseCodeMatches"
+          @match-selected="(match: Match) => $emit('matchSelected', match)"
         />
       </VueDraggableNext>
     </ScrollableComponent>

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

@@ -5,7 +5,7 @@
   <div
     class="flex h-fit min-w-0 max-w-full flex-row space-x-1 overflow-x-hidden text-xs print:hidden"
   >
-    <ToolTipComponent direction="right" v-if="hasBaseCode" class="pr-3">
+    <ToolTipComponent v-if="hasBaseCode" direction="right" class="pr-3">
       <template #default>
         <OptionComponent label="Base Code" :style="{ background: getMatchColor(0.3, 'base') }" />
       </template>
@@ -45,27 +45,27 @@
     </ToolTipComponent>
 
     <div
-      class="print-exact flex w-full flex-row space-x-1 overflow-x-auto print:flex-wrap print:space-y-1 print:overflow-x-hidden"
       ref="scrollableList"
+      class="print-exact flex w-full flex-row space-x-1 overflow-x-auto print:flex-wrap print:space-y-1 print:overflow-x-hidden"
       @scroll="updateScrollOffset()"
     >
       <ToolTipComponent
-        :direction="getTooltipDirection(index)"
         v-for="[index, match] in matches?.entries()"
         :key="index"
-        :scrollOffsetX="scrollOffsetX"
+        :direction="getTooltipDirection(index)"
+        :scroll-offset-x="scrollOffsetX"
       >
         <template #default>
           <OptionComponent
             :style="{ background: getMatchColor(0.3, match.colorIndex) }"
-            @click="$emit('matchSelected', match)"
             :label="
               getFileName(match.firstFile) +
               ' - ' +
               getFileName(match.secondFile) +
               ': ' +
               match.tokens
             "
+            @click="$emit('matchSelected', match)"
           />
         </template>
         <template #tooltip>
@@ -102,7 +102,7 @@
       </tr>
       <tr
         v-for="[index, match] in matches?.entries()"
-        v-bind:key="index"
+        :key="index"
         :style="{ background: getMatchColor(0.3, match.colorIndex) }"
         class="print-exact"
       >