Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve information on overview #1339

Merged
merged 2 commits into from
Nov 10, 2023
Merged

improve information on overview #1339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c6ba3f
improve information on overview
Kr0nox Oct 12, 2023
dfca874
fix inconsistent names
Kr0nox Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 11 additions & 16 deletions report-viewer/src/components/TextInformation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,25 @@
-->
<template>
<div class="flex-auto">
{{ anonymousLabel ? 'Hidden' : label }}:
<i v-if="!anonymousSlot"><slot></slot></i>
<i v-else>Hidden</i>
<ToolTipComponent direction="bottom">
<template #default>
{{ label }}:
<i><slot name="default"></slot></i>
</template>
<template #tooltip v-if="$slots.tooltip">
<slot name="tooltip"></slot>
</template>
</ToolTipComponent>
</div>
</template>

<script setup lang="ts">
import ToolTipComponent from './ToolTipComponent.vue'

defineProps({
label: {
type: String,
required: true
},
/**
* Indicates whether the value should be hidden.
*/
anonymousSlot: {
type: Boolean,
required: false,
default: false
},
anonymousLabel: {
type: Boolean,
required: false,
default: false
}
})
</script>
4 changes: 3 additions & 1 deletion report-viewer/src/components/ToolTipComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
:style="tooltipPosition"
>
<slot name="tooltip"></slot>
<div class="absolute border-4 border-solid" :style="arrowStyle"><!-- Arrow --></div>
<div class="absolute border-4 border-solid" :style="arrowStyle" v-if="$slots.tooltip">
<!-- Arrow -->
</div>
</div>
</div>
</template>
Expand Down
8 changes: 8 additions & 0 deletions report-viewer/src/model/Overview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,4 +119,12 @@ export class Overview {
get totalComparisons() {
return this._totalComparisons
}

get shownComparisons() {
return this.topComparisons.length
}

get missingComparisons() {
return this.totalComparisons - this.shownComparisons
}
}
22 changes: 9 additions & 13 deletions report-viewer/src/views/InformationView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
<h2>Run Options:</h2>

<ScrollableComponent class="flex-grow px-4 pt-2">
<TextInformation label="Submission Folder" class="pb-1">{{
<TextInformation label="Submission Directory" class="pb-1">{{
overview.submissionFolderPath.join(', ')
}}</TextInformation>
<TextInformation label="Basecode Folder" class="pb-1">{{
<TextInformation label="Basecode Directory" class="pb-1">{{
overview.baseCodeFolderPath
}}</TextInformation>
<TextInformation label="Language" class="pb-1">{{ overview.language }}</TextInformation>
<TextInformation label="File Extentions" class="pb-1">{{
overview.fileExtensions.join(', ')
}}</TextInformation>
<TextInformation label="Minimum Token Match:" class="pb-1">{{
<TextInformation label="Min Token Match" class="pb-1">{{
overview.matchSensitivity
}}</TextInformation>
</ScrollableComponent>
Expand All @@ -30,17 +30,17 @@
<TextInformation label="Execution Duration" class="pb-1"
>{{ overview.durationOfExecution }} ms</TextInformation
>
<TextInformation label="Submission Count" class="pb-1">{{
<TextInformation label="Total Submissions" class="pb-1">{{
store().getSubmissionIds.length
}}</TextInformation>
<TextInformation label="Total Comparisons" class="pb-1">{{
totalComparisons
overview.totalComparisons
}}</TextInformation>
<TextInformation label="Shown Comparisons" class="pb-1">{{
shownComparisons
overview.shownComparisons
}}</TextInformation>
<TextInformation label="Missing Comparisons" class="pb-1">{{
missingComparisons
overview.missingComparisons
}}</TextInformation>
</ScrollableComponent>
</Container>
Expand All @@ -53,16 +53,12 @@ import TextInformation from '@/components/TextInformation.vue'
import ScrollableComponent from '@/components/ScrollableComponent.vue'
import { store } from '@/stores/store'
import { Overview } from '@/model/Overview'
import { computed, type PropType } from 'vue'
import { type PropType } from 'vue'

const props = defineProps({
defineProps({
overview: {
type: Object as PropType<Overview>,
required: true
}
})

const totalComparisons = computed(() => props.overview.totalComparisons)
const shownComparisons = computed(() => props.overview.topComparisons.length)
const missingComparisons = computed(() => totalComparisons.value - shownComparisons.value)
</script>
48 changes: 41 additions & 7 deletions report-viewer/src/views/OverviewView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,50 @@
<Container class="flex-grow">
<h2>JPlag Report</h2>
<div class="flex flex-row items-center space-x-5">
<TextInformation label="Directory">{{ submissionPathValue }}</TextInformation>
<TextInformation label="Submission Directory">{{ submissionPathValue }}</TextInformation>
<TextInformation label="Total Submissions">{{
store().getSubmissionIds.length
}}</TextInformation>
<TextInformation label="Total Comparisons">{{
overview.totalComparisons
}}</TextInformation>
<TextInformation label="Min Match Length">{{
overview.matchSensitivity
}}</TextInformation>

<TextInformation label="Shown/Total Comparisons">
<template #default
>{{ overview.shownComparisons }} / {{ overview.totalComparisons }}</template
>
<template #tooltip>
<div class="whitespace-pre text-sm">
<TextInformation label="Shown Comparisons">{{
overview.shownComparisons
}}</TextInformation>
<TextInformation label="Total Comparisons">{{
overview.totalComparisons
}}</TextInformation>
<div v-if="overview.missingComparisons > 0">
<TextInformation label="Missing Comparisons">{{
overview.missingComparisons
}}</TextInformation>
<p>
To include more comparisons in the report modify the number of shown comparisons
in the CLI.
</p>
</div>
</div>
</template>
</TextInformation>

<TextInformation label="Min Token Match">
<template #default>
{{ overview.matchSensitivity }}
</template>
<template #tooltip>
<div class="whitespace-pre text-sm">
<p>
Tunes the comparison sensitivity by adjusting the minimum token required to be
counted as a matching section.
</p>
<p>It can be adjusted in the CLI.</p>
</div>
</template>
</TextInformation>

<ToolTipComponent direction="left">
<template #default>
Expand Down