-
-
+ ()
- props.cluster.members
- .get(member)
- ?.forEach((m) => data.push(roundToTwoDecimals(m.percentage * 100)))
+ props.cluster.members.get(member)?.forEach((m) => data.push(+(m.similarity * 100).toFixed(2)))
return data
}
-/**
- * @param num The number to round.
- * @returns The rounded number.
- */
-function roundToTwoDecimals(num: number): number {
- return Math.round((num + Number.EPSILON) * 100) / 100
+const radarChartStyle = {
+ fill: true,
+ backgroundColor: graphColors.contentFill,
+ borderColor: graphColors.contentBorder,
+ pointBackgroundColor: graphColors.pointFill,
+ pointBorderColor: graphColors.contentBorder,
+ borderWidth: 1
}
-
-const selectedMember = ref(getIdOfFirstSubmission())
+const radarChartOptions = computed(() => {
+ return {
+ legend: {
+ display: false
+ },
+ scales: {
+ r: {
+ suggestedMin: 50,
+ suggestedMax: 100,
+ ticks: {
+ color: graphColors.ticksAndFont.value,
+ backdropColor: 'rgba(0,0,0,0)'
+ },
+ grid: {
+ color: graphColors.gridLines.value
+ },
+ angleLines: {
+ color: graphColors.gridLines.value
+ }
+ }
+ },
+ plugins: {
+ datalabels: {
+ color: graphColors.ticksAndFont.value
+ }
+ }
+ }
+})
const chartData: Ref> = ref({
- labels: createLabelsFor(getIdOfFirstSubmission()),
+ labels: createLabelsFor(idOfFirstSubmission),
datasets: [
{
...radarChartStyle,
- label: getIdOfFirstSubmission(),
- data: createDataSetFor(getIdOfFirstSubmission())
+ label: idOfFirstSubmission,
+ data: createDataSetFor(idOfFirstSubmission)
}
]
})
const options = ref(radarChartOptions)
-watch(
- () => selectedMember.value,
- (val) => {
- chartData.value = {
- labels: createLabelsFor(val),
- datasets: [
- {
- ...radarChartStyle,
- label: val,
- data: createDataSetFor(val)
- }
- ]
- }
- }
-)
-
-
-
+
diff --git a/report-viewer/src/components/ClustersList.vue b/report-viewer/src/components/ClustersList.vue
deleted file mode 100644
index 689d0660b..000000000
--- a/report-viewer/src/components/ClustersList.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-
-
-
+
+
+
+
+
diff --git a/report-viewer/src/components/ErrorMessage.vue b/report-viewer/src/components/ErrorMessage.vue
deleted file mode 100644
index fc680ac33..000000000
--- a/report-viewer/src/components/ErrorMessage.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index 0508f1254..0af77119b 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -2,24 +2,29 @@
Container containing CodePanels for all of the files in a submission.
-->
-
+
+
+
+
+
-
-
diff --git a/report-viewer/src/components/InteractableComponent.vue b/report-viewer/src/components/InteractableComponent.vue
new file mode 100644
index 000000000..d3e1d2422
--- /dev/null
+++ b/report-viewer/src/components/InteractableComponent.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/report-viewer/src/components/LineOfCode.vue b/report-viewer/src/components/LineOfCode.vue
index f88e5c446..67f210042 100644
--- a/report-viewer/src/components/LineOfCode.vue
+++ b/report-viewer/src/components/LineOfCode.vue
@@ -2,14 +2,8 @@
Container which display a single line of code of a file.
-->
-
+
-
+
@@ -23,11 +22,12 @@ import type { PropType, Ref } from 'vue'
import type { ChartData } from 'chart.js'
import type { ClusterListElement } from '@/model/ClusterListElement'
-import { ref, watch } from 'vue'
+import { computed, ref } from 'vue'
import { RadarChart } from 'vue-chart-3'
import { Chart, registerables } from 'chart.js'
import ChartDataLabels from 'chartjs-plugin-datalabels'
-import { radarChartStyle, radarChartOptions } from '@/assets/radar-chart-configuration'
+import DropDownSelector from './DropDownSelector.vue'
+import { graphColors } from '@/utils/ColorUtils'
Chart.register(...registerables)
Chart.register(ChartDataLabels)
@@ -39,16 +39,11 @@ const props = defineProps({
}
})
-let hasNoMember = false
+let hasNoMember = props.cluster.members.size == 0
-/**
- * @returns The id of the first member of the cluster.
- */
-function getIdOfFirstSubmission() {
- const firstMember = props.cluster.members.keys().next().value
- hasNoMember = !firstMember
- return firstMember
-}
+const selectedOptions = Array.from(props.cluster.members.keys())
+
+const idOfFirstSubmission = selectedOptions.length > 0 ? selectedOptions[0] : ''
/**
* @param member The member to create the labels for.
@@ -66,64 +61,63 @@ function createLabelsFor(member: string) {
*/
function createDataSetFor(member: string) {
let data = new Array
This cluster has no members.
-
-
-
-
-
-
diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index 5b7dbc079..311e6ee48 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -2,70 +2,62 @@
Panel which displays a submission files with its line of code.
-->
- - Clusters for comparison {{ comparison.firstSubmissionId }} > - {{ comparison.secondSubmissionId }} -
-
- {{ index + 1 }}. Members: {{ getMemberNames(cluster) }} - Average
- similarity: {{ cluster.averageSimilarity * 100 }}%
-
-
-
-
-
-
diff --git a/report-viewer/src/components/ContainerComponent.vue b/report-viewer/src/components/ContainerComponent.vue
new file mode 100644
index 000000000..0a5d57a64
--- /dev/null
+++ b/report-viewer/src/components/ContainerComponent.vue
@@ -0,0 +1,12 @@
+
+
+
-
+ - {{ title }} -
- +
+ {{ title }}
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
+
-
-
diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 4719c4d49..400b67943 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -2,108 +2,139 @@
Table which display all of the comparisons with their participating ids and similarity percentage for the selected metric.
-->
- Empty File
+
+
-
+
+
+
+
+
+
Empty File
+| No. | -Submission 1 | -- | Submission 2 | -Match % | -
|---|
| - {{ item.id }}. - | -- {{ - isAnonymous(item.firstSubmissionId) ? 'Hidden' : displayName(item.firstSubmissionId) - }} - | -
- 
- |
-
+
+
+
+
+
+
+
+
+ Submissions in Comparison
+
+
+ Similarity
+
+
+ Average
+ Maximum
+ Cluster
+
+
- {{
- isAnonymous(item.secondSubmissionId)
- ? 'Hidden'
- : displayName(item.secondSubmissionId)
- }}
- |
- - {{ formattedMatchPercentage(item.similarity) }} - | -
- 
- |
-
+
+
+
+ {{ item.sortingPlace + 1 }}
+
+
+
+
+
+ {{
+ isAnonymous(item.firstSubmissionId)
+ ? 'Hidden'
+ : displayName(item.firstSubmissionId)
+ }}
+
+
+ {{
+ isAnonymous(item.secondSubmissionId)
+ ? 'Hidden'
+ : displayName(item.secondSubmissionId)
+ }}
+
+
+
+ {{ (item.averageSimilarity * 100).toFixed(2) }}%
+ {{ (item.maximumSimilarity * 100).toFixed(2) }}%
+
+
+
+
+
+ {{ clusters?.[index].members?.length }}
+
+
+ {{ clusters?.[index].members?.length }} submissions in cluster with average
+ similarity of
+ {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
+
+
+
+
+
+
diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index 974d37202..e161b860a 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -2,29 +2,28 @@
Bar diagram, displaying the distribution for the selected metric.
-->
-
-
+ {{ message }}
- - - - - diff --git a/report-viewer/src/components/ErrorRouter.vue b/report-viewer/src/components/ErrorRouter.vue deleted file mode 100644 index b5de74498..000000000 --- a/report-viewer/src/components/ErrorRouter.vue +++ /dev/null @@ -1,38 +0,0 @@ - -
- {{ routerInfo }}
-
-
-
-
-
-
diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index 0508f1254..0af77119b 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -2,24 +2,29 @@
Container containing CodePanels for all of the files in a submission.
-->
-
-
-
-
+ Files of {{ anonymous ? filesOwnerDefault : filesOwner }}
-+ Files of {{ anonymous ? filesOwnerDefault : filesOwner }}: +
+
-
+
+
+
+
diff --git a/report-viewer/src/components/TextInformation.vue b/report-viewer/src/components/TextInformation.vue
index b91609039..e9e54640c 100644
--- a/report-viewer/src/components/TextInformation.vue
+++ b/report-viewer/src/components/TextInformation.vue
@@ -1,149 +1,32 @@
-
{{ lineNumber }} {{ text }}
+
+
@@ -39,12 +33,6 @@ const props = defineProps({
},
fileIndex: {
type: Number
- },
- isFirst: {
- type: Boolean
- },
- isLast: {
- type: Boolean
}
})
@@ -61,14 +49,6 @@ onUpdated(() => {
diff --git a/report-viewer/src/components/MatchList.vue b/report-viewer/src/components/MatchList.vue
new file mode 100644
index 000000000..bb9c2f1b2
--- /dev/null
+++ b/report-viewer/src/components/MatchList.vue
@@ -0,0 +1,54 @@
+
+
+ {{ lineNumber }} {{ text }}
+
+ Match Files: TokenCount
+
+
+
+
+
diff --git a/report-viewer/src/components/MatchTable.vue b/report-viewer/src/components/MatchTable.vue
deleted file mode 100644
index df28192eb..000000000
--- a/report-viewer/src/components/MatchTable.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-
-
-
+
+ {{ getFileName(match.firstFile) }} - {{ getFileName(match.secondFile) }}: {{ match.tokens }}
+
+
+
-
-
-
-
-
-
-
-
diff --git a/report-viewer/src/components/MetricButton.vue b/report-viewer/src/components/MetricButton.vue
deleted file mode 100644
index d4b675c46..000000000
--- a/report-viewer/src/components/MetricButton.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-
-
- | Submission 1 | -Submission 2 | -|
|---|---|---|
| File 1 | -File 2 | -Tokens | -
|
-
-
- {{ convertSubmissionIdToName(match.firstFile, id1 || '') }} -({{ match.startInFirst }} - {{ match.endInFirst }}) - |
-
-
-
- {{ convertSubmissionIdToName(match.secondFile, id2 || '') }} -({{ match.startInSecond }} - {{ match.endInSecond }}) - |
- {{ match.tokens }} | -
-
-
-
-
-
-
diff --git a/report-viewer/src/components/OptionsSelectorComponent.vue b/report-viewer/src/components/OptionsSelectorComponent.vue
new file mode 100644
index 000000000..1227422dc
--- /dev/null
+++ b/report-viewer/src/components/OptionsSelectorComponent.vue
@@ -0,0 +1,49 @@
+
+
+
-
- {{ metric.metricName }}
-
- 
- {{ metric.description }}
-
-
- {{ metric.description }}
-
+
+ {{ label }}
+
+
+
+
+
diff --git a/report-viewer/src/components/ScrollableComponent.vue b/report-viewer/src/components/ScrollableComponent.vue
new file mode 100644
index 000000000..69ae30b86
--- /dev/null
+++ b/report-viewer/src/components/ScrollableComponent.vue
@@ -0,0 +1,10 @@
+
+
+
+ {{ name }}
+
+
+
+
diff --git a/report-viewer/src/components/SearchBarComponent.vue b/report-viewer/src/components/SearchBarComponent.vue
new file mode 100644
index 000000000..23487e8d0
--- /dev/null
+++ b/report-viewer/src/components/SearchBarComponent.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
-
- - diff --git a/report-viewer/src/main.ts b/report-viewer/src/main.ts index 878da2a5a..b8647a664 100644 --- a/report-viewer/src/main.ts +++ b/report-viewer/src/main.ts @@ -6,10 +6,10 @@ import router from './router' import VueVirtualScroller from 'vue-virtual-scroller' import 'highlight.js/lib/common' -import 'highlight.js/styles/vs.css' -import 'gitart-vue-dialog/dist/style.css' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' +import './style.css' + const app = createApp(App) app.use(createPinia()) diff --git a/report-viewer/src/model/ClusterListElement.ts b/report-viewer/src/model/ClusterListElement.ts index 2a52c43c3..8a4339430 100644 --- a/report-viewer/src/model/ClusterListElement.ts +++ b/report-viewer/src/model/ClusterListElement.ts @@ -12,5 +12,5 @@ type ClusterListElement = { /** * The ids of the submissions in the cluster, and the matches between them */ -type ClusterListElementMember = Map>
+type ClusterListElementMember = Map>
export type { ClusterListElement, ClusterListElementMember }
diff --git a/report-viewer/src/model/ComparisonListElement.ts b/report-viewer/src/model/ComparisonListElement.ts
index 1c6f37c95..815e6c9c1 100644
--- a/report-viewer/src/model/ComparisonListElement.ts
+++ b/report-viewer/src/model/ComparisonListElement.ts
@@ -2,14 +2,17 @@
* Comparison model used by the Comparison Table in Overview. Only the needed attributes to display are included.
* For full comparison model see Comparison.ts
* @see Comparison
- * @property id - Id of the comparison
+ * @property sortingPlace - Where the comparison is placed in the list sorted by the current metric
+ * @property id - Index of the comparison in the sorted and filtered list
* @property firstSubmissionId - Id of the first submission
* @property secondSubmissionId - Id of the second submission
* @property similarity - Similarity of the two submissions
*/
export type ComparisonListElement = {
+ sortingPlace: number
id: number
firstSubmissionId: string
secondSubmissionId: string
- similarity: number
+ averageSimilarity: number
+ maximumSimilarity: number
}
diff --git a/report-viewer/src/model/Distribution.ts b/report-viewer/src/model/Distribution.ts
new file mode 100644
index 000000000..d05544b53
--- /dev/null
+++ b/report-viewer/src/model/Distribution.ts
@@ -0,0 +1,11 @@
+export default class Distribution {
+ private readonly _distribution: Array
+
+ constructor(distribution: Array) {
+ this._distribution = distribution
+ }
+
+ get distribution(): Array {
+ return this._distribution
+ }
+}
diff --git a/report-viewer/src/model/MetricType.ts b/report-viewer/src/model/MetricType.ts
new file mode 100644
index 000000000..dfb93c9f0
--- /dev/null
+++ b/report-viewer/src/model/MetricType.ts
@@ -0,0 +1,9 @@
+/**
+ * This enum maps the metric type to the index they have in the generated JSON and respectivly in the store.
+ */
+enum MetricType {
+ AVERAGE = 0,
+ MAXIMUM = 1
+}
+
+export default MetricType
diff --git a/report-viewer/src/model/Overview.ts b/report-viewer/src/model/Overview.ts
index 1e574b562..a59e2ccd0 100644
--- a/report-viewer/src/model/Overview.ts
+++ b/report-viewer/src/model/Overview.ts
@@ -1,5 +1,6 @@
-import type { Metric } from './Metric'
+import type Distribution from './Distribution'
import type { Cluster } from '@/model/Cluster'
+import type { ComparisonListElement } from './ComparisonListElement'
/**
* Model of the Overview file generated by JPlag
@@ -13,7 +14,8 @@ export class Overview {
private readonly _submissionIdsToComparisonFileName: Map>
private readonly _dateOfExecution: string
private readonly _durationOfExecution: number
- private readonly _metrics: Array
+ private readonly _topComparisons: Array
+ private readonly _distributions: Array
private readonly _clusters: Array
private readonly _totalComparisons: number
@@ -25,7 +27,8 @@ export class Overview {
matchSensitivity: number,
dateOfExecution: string,
durationOfExecution: number,
- metrics: Array,
+ topComparisons: Array,
+ distributions: Array,
clusters: Array,
totalComparisons: number,
submissionIdsToComparisonFileName: Map>
@@ -37,7 +40,8 @@ export class Overview {
this._matchSensitivity = matchSensitivity
this._dateOfExecution = dateOfExecution
this._durationOfExecution = durationOfExecution
- this._metrics = metrics
+ this._topComparisons = topComparisons
+ this._distributions = distributions
this._clusters = clusters
this._submissionIdsToComparisonFileName = submissionIdsToComparisonFileName
this._totalComparisons = totalComparisons
@@ -99,11 +103,15 @@ export class Overview {
return this._durationOfExecution
}
+ get topComparisons() {
+ return this._topComparisons
+ }
+
/**
- * @return Metrics used in the JPlag Comparison
+ * @return Distributions used in the JPlag Comparison
*/
- get metrics() {
- return this._metrics
+ get distribution() {
+ return this._distributions
}
/**
diff --git a/report-viewer/src/model/factories/ComparisonFactory.ts b/report-viewer/src/model/factories/ComparisonFactory.ts
index a0993a66d..a4eac9e5d 100644
--- a/report-viewer/src/model/factories/ComparisonFactory.ts
+++ b/report-viewer/src/model/factories/ComparisonFactory.ts
@@ -3,16 +3,59 @@ import type { Match } from '../Match'
import type { SubmissionFile } from '../SubmissionFile'
import type { MatchInSingleFile } from '../MatchInSingleFile'
import store from '@/stores/store'
+import { generateColors } from '@/utils/ColorUtils'
+import slash from 'slash'
/**
* Factory class for creating Comparison objects
*/
export class ComparisonFactory {
+ public static getComparison(id1: string, id2: string) {
+ console.log('Generating comparison {%s} - {%s}...', id1, id2)
+ let comparison = new Comparison('', '', 0)
+
+ //getting the comparison file based on the used mode (zip, local, single)
+ if (store().state.localModeUsed) {
+ const request = new XMLHttpRequest()
+ request.open('GET', `/files/${store().getComparisonFileName(id1, id2)}`, false)
+ request.send()
+
+ if (request.status == 200) {
+ ComparisonFactory.loadSubmissionFilesFromLocal(id1)
+ ComparisonFactory.loadSubmissionFilesFromLocal(id2)
+ try {
+ comparison = ComparisonFactory.extractComparison(JSON.parse(request.response))
+ } catch (e) {
+ throw new Error('Comparison file not found')
+ }
+ } else {
+ throw new Error('Comparison file not found')
+ }
+ } else if (store().state.zipModeUsed) {
+ const comparisonFile = store().getComparisonFileForSubmissions(id1, id2)
+ if (comparisonFile) {
+ comparison = ComparisonFactory.extractComparison(JSON.parse(comparisonFile))
+ } else {
+ throw new Error('Comparison file not found')
+ }
+ } else if (store().state.singleModeUsed) {
+ try {
+ comparison = ComparisonFactory.extractComparison(
+ JSON.parse(store().state.singleFillRawContent)
+ )
+ } catch (e) {
+ store().clearStore()
+ throw new Error('No Comparison files given!')
+ }
+ }
+ return comparison
+ }
+
/**
* Creates a comparison object from a json object created by by JPlag
* @param json the json object
*/
- static getComparison(json: Record): Comparison {
+ private static extractComparison(json: Record): Comparison {
const filesOfFirstSubmission = store().filesOfSubmission(json.id1 as string)
const filesOfSecondSubmission = store().filesOfSubmission(json.id2 as string)
@@ -21,7 +64,10 @@ export class ComparisonFactory {
const matches = json.matches as Array>
- const colors = this.generateColorsForMatches(matches.length)
+ const matchSaturation = 0.8
+ const matchLightness = 0.5
+ const matchAlpha = 0.3
+ const colors = generateColors(matches.length, matchSaturation, matchLightness, matchAlpha)
const coloredMatches = matches.map((match, index) => this.mapMatch(match, colors[index]))
const matchesInFirst = this.groupMatchesByFileName(coloredMatches, 1)
@@ -98,33 +144,44 @@ export class ComparisonFactory {
return acc
}
- private static generateColorsForMatches(num: number): Array {
- const colors: Array = []
- const numberOfColorsInFirstInterval = Math.round(((80 - 20) / (80 - 20 + (340 - 160))) * num) // number of colors from the first interval
- const numberOfColorsInSecondInterval = num - numberOfColorsInFirstInterval // number of colors from the second interval
- ComparisonFactory.generateColorsForInterval(20, 80, numberOfColorsInFirstInterval, colors)
- ComparisonFactory.generateColorsForInterval(160, 340, numberOfColorsInSecondInterval, colors)
- return colors
+ private static getSubmissionFileListFromLocal(submissionId: string): string[] {
+ const request = new XMLHttpRequest()
+ request.open('GET', `/files/submissionFileIndex.json`, false)
+ request.send()
+ if (request.status == 200) {
+ return JSON.parse(request.response).submission_file_indexes[submissionId].map(
+ (file: string) => slash(file)
+ )
+ } else {
+ return []
+ }
}
- private static generateColorsForInterval(
- intervalStart: number,
- intervalEnd: number,
- numberOfColorsInInterval: number,
- colors: Array
- ) {
- const interval = intervalEnd - intervalStart
- const hueDelta = Math.trunc(interval / numberOfColorsInInterval)
- for (let i = 0; i < numberOfColorsInInterval; i++) {
- const hue = intervalStart + i * hueDelta
- colors.push(`hsla(${hue}, 80%, 50%, 0.3)`)
+ private static loadSubmissionFilesFromLocal(submissionId: string) {
+ const request = new XMLHttpRequest()
+ const fileList = ComparisonFactory.getSubmissionFileListFromLocal(submissionId)
+ for (const file of fileList) {
+ request.open('GET', `/files/files/${file}`, false)
+ request.overrideMimeType('text/plain')
+ request.send()
+ if (request.status == 200) {
+ store().saveSubmissionFile({
+ name: submissionId,
+ file: {
+ fileName: slash(file),
+ data: request.response
+ }
+ })
+ } else {
+ console.log('Error loading file: ' + file)
+ }
}
}
private static mapMatch(match: Record, color: string): Match {
return {
- firstFile: match.file1 as string,
- secondFile: match.file2 as string,
+ firstFile: slash(match.file1 as string),
+ secondFile: slash(match.file2 as string),
startInFirst: match.start1 as number,
endInFirst: match.end1 as number,
startInSecond: match.start2 as number,
diff --git a/report-viewer/src/model/factories/OverviewFactory.ts b/report-viewer/src/model/factories/OverviewFactory.ts
index b63af96ba..849aa4957 100644
--- a/report-viewer/src/model/factories/OverviewFactory.ts
+++ b/report-viewer/src/model/factories/OverviewFactory.ts
@@ -1,10 +1,10 @@
import { Overview } from '../Overview'
-import type { Metric } from '../Metric'
import type { ComparisonListElement } from '../ComparisonListElement'
import type { Cluster } from '@/model/Cluster'
import store from '@/stores/store'
import type { Version } from '../Version'
import versionJson from '@/version.json'
+import Distribution from '../Distribution'
export class OverviewFactory {
static reportViewerVersion: Version =
@@ -16,7 +16,7 @@ export class OverviewFactory {
* Creates an overview object from a json object created by by JPlag
* @param json the json object
*/
- static getOverview(json: Record): Overview {
+ private static extractOverview(json: Record): Overview {
const versionField = json.jplag_version as Record
const jplagVersion: Version = {
major: versionField.major,
@@ -35,33 +35,42 @@ export class OverviewFactory {
const map = new Map(Object.entries(jsonSubmissions))
const dateOfExecution = json.date_of_execution as string
const duration = json.execution_time as number as number
- const metrics = [] as Array
const clusters = [] as Array
const totalComparisons = json.total_comparisons as number
- ;(json.metrics as Array).forEach((jsonMetric) => {
- const metric = jsonMetric as Record
- const comparisons = [] as Array
-
- ;(metric.topComparisons as Array>).forEach(
- (jsonComparison, index) => {
- const comparison: ComparisonListElement = {
- id: (index + 1) as number,
- firstSubmissionId: jsonComparison.first_submission as string,
- secondSubmissionId: jsonComparison.second_submission as string,
- similarity: jsonComparison.similarity as number
- }
- comparisons.push(comparison)
- }
+
+ const distributions = [] as Array
+ const averageSimilarities: Map = new Map()
+ const comparisons = [] as Array
+
+ const metrics = json.metrics as Array as Array>
+ // Average
+ distributions.push(new Distribution(metrics[0].distribution as Array))
+ for (const comparison of metrics[0].topComparisons as Array>) {
+ averageSimilarities.set(
+ (comparison.first_submission as string) + '-' + (comparison.second_submission as string),
+ comparison.similarity as number
)
- metrics.push({
- metricName: metric.name as string,
- metricThreshold: metric.threshold as number,
- distribution: metric.distribution as Array,
- comparisons: comparisons,
- description: metric.description as string
+ }
+
+ // Max
+ distributions.push(new Distribution(metrics[1].distribution as Array))
+ let counter = 0
+ for (const comparison of metrics[1].topComparisons as Array>) {
+ const avg = averageSimilarities.get(
+ (comparison.first_submission as string) + '-' + (comparison.second_submission as string)
+ )
+ comparisons.push({
+ sortingPlace: counter++,
+ id: counter,
+ firstSubmissionId: comparison.first_submission as string,
+ secondSubmissionId: comparison.second_submission as string,
+ averageSimilarity: avg as number,
+ maximumSimilarity: comparison.similarity as number
})
- })
+ }
+
store().saveSubmissionNames(map)
+
if (json.clusters) {
;(json.clusters as Array).forEach((jsonCluster) => {
const cluster = jsonCluster as Record
@@ -83,13 +92,64 @@ export class OverviewFactory {
matchSensitivity,
dateOfExecution,
duration,
- metrics,
+ comparisons,
+ distributions,
clusters,
totalComparisons,
new Map()
)
}
+ /**
+ * Gets the overview file based on the used mode (zip, local, single).
+ */
+ public static getOverview(): Overview {
+ console.log('Generating overview...')
+ let temp!: Overview
+ //Gets the overview file based on the used mode (zip, local, single).
+ if (store().state.localModeUsed) {
+ const request = new XMLHttpRequest()
+ request.open('GET', '/files/overview.json', false)
+ request.send()
+
+ if (request.status == 200) {
+ temp = OverviewFactory.extractOverview(JSON.parse(request.response))
+ } else {
+ throw new Error('Could not find overview.json in folder.')
+ }
+ } else if (store().state.zipModeUsed) {
+ console.log('Start finding overview.json in state...')
+ const index = Object.keys(store().state.files).find((name) => name.endsWith('overview.json'))
+ const overviewFile =
+ index != undefined
+ ? store().state.files[index]
+ : console.log('Could not find overview.json')
+
+ if (overviewFile === undefined) {
+ console.log('Could not find overview.json')
+ return new Overview(
+ [],
+ '',
+ '',
+ [],
+ 0,
+ '',
+ 0,
+ [],
+ [],
+ [],
+ 0,
+ new Map>()
+ )
+ }
+ const overviewJson = JSON.parse(overviewFile)
+ temp = OverviewFactory.extractOverview(overviewJson)
+ } else if (store().state.singleModeUsed) {
+ temp = OverviewFactory.extractOverview(JSON.parse(store().state.singleFillRawContent))
+ }
+ return temp
+ }
+
/**
* Compares the two versions and shows an alert if they are not equal and puts out a warning if they are not
* @param jsonVersion the version of the json file
diff --git a/report-viewer/src/router/index.ts b/report-viewer/src/router/index.ts
index 0615990be..4d4212d82 100644
--- a/report-viewer/src/router/index.ts
+++ b/report-viewer/src/router/index.ts
@@ -3,6 +3,8 @@ import FileUploadView from '@/views/FileUploadView.vue'
import OverviewView from '@/views/OverviewView.vue'
import ComparisonView from '@/views/ComparisonView.vue'
import ErrorView from '@/views/ErrorView.vue'
+import ClusterView from '@/views/ClusterView.vue'
+import InformationView from '@/views/InformationView.vue'
/**
* The router is used to navigate between the different views of the application.
@@ -30,6 +32,17 @@ const router = createRouter({
path: '/error',
name: 'ErrorView',
component: ErrorView
+ },
+ {
+ path: '/cluster/:clusterIndex',
+ name: 'ClusterView',
+ component: ClusterView,
+ props: true
+ },
+ {
+ path: '/info',
+ name: 'InfoView',
+ component: InformationView
}
]
})
diff --git a/report-viewer/src/stores/state.ts b/report-viewer/src/stores/state.ts
index 2d0e0b721..3aefba738 100644
--- a/report-viewer/src/stores/state.ts
+++ b/report-viewer/src/stores/state.ts
@@ -14,19 +14,19 @@ export interface State {
/**
* Indicates whether local mode is used.
*/
- local: boolean
+ localModeUsed: boolean
/**
* Indicates whether zip mode is used.
*/
- zip: boolean
+ zipModeUsed: boolean
/**
* Indicates whether single file mode is used.
*/
- single: boolean
+ singleModeUsed: boolean
/**
* Files string if single mode is used.
*/
- fileString: string
+ singleFillRawContent: string
fileIdToDisplayName: Map
submissionIdsToComparisonFileName: Map>
@@ -61,3 +61,7 @@ export interface LoadConfiguration {
single: boolean
fileString: string
}
+
+export interface UIState {
+ useDarkMode: boolean
+}
diff --git a/report-viewer/src/stores/store.ts b/report-viewer/src/stores/store.ts
index 925e5e237..fd8917baa 100644
--- a/report-viewer/src/stores/store.ts
+++ b/report-viewer/src/stores/store.ts
@@ -1,20 +1,27 @@
import { defineStore } from 'pinia'
-import type { State, SubmissionFile, File, LoadConfiguration } from './state'
+import type { State, SubmissionFile, File, LoadConfiguration, UIState } from './state'
/**
* The store is a global state management system. It is used to store the state of the application.
*/
const store = defineStore('store', {
- state: (): State => ({
- submissionIdsToComparisonFileName: new Map>(),
- anonymous: new Set(),
- files: {},
- submissions: {},
- local: false,
- zip: false,
- single: false,
- fileString: '',
- fileIdToDisplayName: new Map()
+ state: (): { state: State; uiState: UIState } => ({
+ state: {
+ submissionIdsToComparisonFileName: new Map>(),
+ anonymous: new Set(),
+ files: {},
+ submissions: {},
+ // Mode that was used to load the files
+ localModeUsed: false,
+ zipModeUsed: false,
+ singleModeUsed: false,
+ // only used in single mode
+ singleFillRawContent: '',
+ fileIdToDisplayName: new Map()
+ },
+ uiState: {
+ useDarkMode: false
+ }
}),
getters: {
/**
@@ -22,7 +29,7 @@ const store = defineStore('store', {
* @returns files in the submission of the given name
*/
filesOfSubmission: (state) => (name: string) => {
- return Array.from(state.submissions[name], ([name, value]) => ({
+ return Array.from(state.state.submissions[name], ([name, value]) => ({
name,
value
}))
@@ -32,13 +39,13 @@ const store = defineStore('store', {
* @returns the display name of the submission
*/
submissionDisplayName: (state) => (id: string) => {
- return state.fileIdToDisplayName.get(id)
+ return state.state.fileIdToDisplayName.get(id)
},
/**
* @returns the Ids of all submissions
*/
getSubmissionIds(state): Array {
- return Array.from(state.fileIdToDisplayName.keys())
+ return Array.from(state.state.fileIdToDisplayName.keys())
},
/**
* @param submissionId1 the id of the first submission
@@ -46,7 +53,7 @@ const store = defineStore('store', {
* @returns the name of the comparison file between the two submissions
*/
getComparisonFileName: (state) => (submissionId1: string, submissionId2: string) => {
- return state.submissionIdsToComparisonFileName.get(submissionId1)?.get(submissionId2)
+ return state.state.submissionIdsToComparisonFileName.get(submissionId1)?.get(submissionId2)
},
/**
* @param submissionId1 the id of the first submission
@@ -57,9 +64,9 @@ const store = defineStore('store', {
return (submissionId1: string, submissionId2: string) => {
const expectedFileName = this.getComparisonFileName(submissionId1, submissionId2)
const index = expectedFileName
- ? Object.keys(this.files).find((name) => name.endsWith(expectedFileName))
+ ? Object.keys(this.state.files).find((name) => name.endsWith(expectedFileName))
: undefined
- return index != undefined ? this.files[index] : undefined
+ return index != undefined ? this.state.files[index] : undefined
}
}
},
@@ -68,7 +75,17 @@ const store = defineStore('store', {
* Clears the store
*/
clearStore() {
- this.$reset()
+ this.state = {
+ submissionIdsToComparisonFileName: new Map>(),
+ anonymous: new Set(),
+ files: {},
+ submissions: {},
+ localModeUsed: false,
+ zipModeUsed: false,
+ singleModeUsed: false,
+ singleFillRawContent: '',
+ fileIdToDisplayName: new Map()
+ }
},
/**
* Adds the given ids to the set of anonymous submissions
@@ -76,7 +93,7 @@ const store = defineStore('store', {
*/
addAnonymous(id: string[]) {
for (let i = 0; i < id.length; i++) {
- this.anonymous.add(id[i])
+ this.state.anonymous.add(id[i])
}
},
/**
@@ -85,45 +102,45 @@ const store = defineStore('store', {
*/
removeAnonymous(id: string[]) {
for (let i = 0; i < id.length; i++) {
- this.anonymous.delete(id[i])
+ this.state.anonymous.delete(id[i])
}
},
/**
* Clears the set of anonymous submissions
*/
resetAnonymous() {
- this.anonymous = new Set()
+ this.state.anonymous = new Set()
},
/**
* Sets the map of submission ids to comparison file names
* @param map the map to set
*/
saveComparisonFileLookup(map: Map>) {
- this.submissionIdsToComparisonFileName = map
+ this.state.submissionIdsToComparisonFileName = map
},
/**
* Saves the given file
* @param file the file to save
*/
saveFile(file: File) {
- this.files[file.fileName] = file.data
+ this.state.files[file.fileName] = file.data
},
/**
* Saves the given submission names
* @param names the names to save
*/
saveSubmissionNames(names: Map) {
- this.fileIdToDisplayName = names
+ this.state.fileIdToDisplayName = names
},
/**
* Saves the given submission file
* @param submissionFile the submission file to save
*/
saveSubmissionFile(submissionFile: SubmissionFile) {
- if (!this.submissions[submissionFile.name]) {
- this.submissions[submissionFile.name] = new Map()
+ if (!this.state.submissions[submissionFile.name]) {
+ this.state.submissions[submissionFile.name] = new Map()
}
- this.submissions[submissionFile.name].set(
+ this.state.submissions[submissionFile.name].set(
submissionFile.file.fileName,
submissionFile.file.data
)
@@ -133,10 +150,16 @@ const store = defineStore('store', {
* @param payload Type used to input JPlag results
*/
setLoadingType(payload: LoadConfiguration) {
- this.local = payload.local
- this.zip = payload.zip
- this.single = payload.single
- this.fileString = payload.fileString
+ this.state.localModeUsed = payload.local
+ this.state.zipModeUsed = payload.zip
+ this.state.singleModeUsed = payload.single
+ this.state.singleFillRawContent = payload.fileString
+ },
+ /**
+ * Switches whether darkMode is being used for the UI
+ */
+ changeUseDarkMode() {
+ this.uiState.useDarkMode = !this.uiState.useDarkMode
}
}
})
diff --git a/report-viewer/src/style.css b/report-viewer/src/style.css
new file mode 100644
index 000000000..75f40c4f7
--- /dev/null
+++ b/report-viewer/src/style.css
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ #app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ h2 {
+ @apply text-3xl;
+ }
+
+ *::-webkit-scrollbar {
+ @apply w-[6px] h-[6px] cursor-pointer;
+ }
+ *::-webkit-scrollbar-track {
+ @apply bg-scrollbar-backgorund-light dark:bg-scrollbar-backgorund-dark rounded-full border-2;
+ }
+ *::-webkit-scrollbar-thumb {
+ @apply bg-scrollbar-thumb-light dark:bg-scrollbar-thumb-dark rounded-full border-2;
+ }
+}
+
+@layer components {
+ .break-anywhere {
+ overflow-wrap: anywhere;
+ }
+}
\ No newline at end of file
diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
new file mode 100644
index 000000000..1bc60d603
--- /dev/null
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -0,0 +1,74 @@
+import store from '@/stores/store'
+import { computed } from 'vue'
+
+/**
+ * Generates an array of HSL-Colors
+ * @param numberOfColors Number of colors to generate
+ * @param saturation Saturation of the colors [0,1]
+ * @param lightness Lightness of the colors [0,1]
+ * @param alpha Alpha value of the colors [0,1]
+ */
+function generateColors(
+ numberOfColors: number,
+ saturation: number,
+ lightness: number,
+ alpha: number
+) {
+ const numberOfColorsInFirstInterval = Math.round(
+ ((80 - 20) / (80 - 20 + (340 - 160))) * numberOfColors
+ ) // number of colors from the first interval
+ const numberOfColorsInSecondInterval = numberOfColors - numberOfColorsInFirstInterval // number of colors from the second interval
+
+ const colors: Array = generateColorsForInterval(
+ 20,
+ 80,
+ numberOfColorsInFirstInterval,
+ saturation,
+ lightness,
+ alpha
+ )
+ colors.push(...generateColorsForInterval(160, 340, numberOfColorsInSecondInterval, 0.8, 0.5, 0.3))
+ return colors
+}
+
+/**
+ * Genertes an array of HSL-Colors for a given interval
+ * @param intervalStart start of the interval [0,360]
+ * @param intervalEnd end of the interval [0,360] and > intervalStart
+ * @param numberOfColorsInInterval Number of colors to generate in the interval
+ * @param saturation [0,1]
+ * @param lightness [0,1]
+ * @param alpha [0,1]
+ * @returns Array of strings in format 'hsla(hue, saturation, lightness, alpha)'
+ */
+function generateColorsForInterval(
+ intervalStart: number,
+ intervalEnd: number,
+ numberOfColorsInInterval: number,
+ saturation: number,
+ lightness: number,
+ alpha: number
+) {
+ const colors: Array = []
+ const interval = intervalEnd - intervalStart
+ const hueDelta = Math.trunc(interval / numberOfColorsInInterval)
+ for (let i = 0; i < numberOfColorsInInterval; i++) {
+ const hue = intervalStart + i * hueDelta
+ colors.push(`hsla(${hue}, ${saturation * 100}%, ${lightness * 100}%, ${alpha})`)
+ }
+ return colors
+}
+
+const graphColors = {
+ ticksAndFont: computed(() => {
+ return store().uiState.useDarkMode ? '#ffffff' : '#000000'
+ }),
+ gridLines: computed(() => {
+ return store().uiState.useDarkMode ? 'rgba(256, 256, 256, 0.2)' : 'rgba(0, 0, 0, 0.2)'
+ }),
+ contentFill: 'rgba(190, 22, 34, 0.5)',
+ contentBorder: 'rgb(127, 15, 24)',
+ pointFill: 'rgba(190, 22, 34, 1)'
+}
+
+export { generateColors, graphColors }
diff --git a/report-viewer/src/utils/Utils.ts b/report-viewer/src/utils/ComparisonUtils.ts
similarity index 100%
rename from report-viewer/src/utils/Utils.ts
rename to report-viewer/src/utils/ComparisonUtils.ts
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
new file mode 100644
index 000000000..b0faca718
--- /dev/null
+++ b/report-viewer/src/views/ClusterView.vue
@@ -0,0 +1,89 @@
+
+
-
-
+ {{ label }}
-- {{ anonymous ? 'Hidden' : value }} -
-
+ {{ anonymousLabel ? 'Hidden' : label }}:
+
-
-
- {{ additionalInfoTitle }}
-- - diff --git a/report-viewer/src/main.ts b/report-viewer/src/main.ts index 878da2a5a..b8647a664 100644 --- a/report-viewer/src/main.ts +++ b/report-viewer/src/main.ts @@ -6,10 +6,10 @@ import router from './router' import VueVirtualScroller from 'vue-virtual-scroller' import 'highlight.js/lib/common' -import 'highlight.js/styles/vs.css' -import 'gitart-vue-dialog/dist/style.css' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' +import './style.css' + const app = createApp(App) app.use(createPinia()) diff --git a/report-viewer/src/model/ClusterListElement.ts b/report-viewer/src/model/ClusterListElement.ts index 2a52c43c3..8a4339430 100644 --- a/report-viewer/src/model/ClusterListElement.ts +++ b/report-viewer/src/model/ClusterListElement.ts @@ -12,5 +12,5 @@ type ClusterListElement = { /** * The ids of the submissions in the cluster, and the matches between them */ -type ClusterListElementMember = Map
+
+
+
+
diff --git a/report-viewer/src/views/ComparisonView.vue b/report-viewer/src/views/ComparisonView.vue
index a6f70fef0..2f046364a 100644
--- a/report-viewer/src/views/ComparisonView.vue
+++ b/report-viewer/src/views/ComparisonView.vue
@@ -2,85 +2,81 @@
A view displaying the .json file of a comparison from a JPlag report.
-->
-
+
+
+
+
+ Cluster
+
+ {{ (cluster.averageSimilarity * 100).toFixed(2) }}%
+
+
+
+
+
+
+
+ Comparisons of Cluster Members:
+
-
-
-
-
-
-
-
+onErrorCaptured((e) => {
+ console.log(e)
+ router.push({
+ name: 'ErrorView',
+ state: {
+ message: 'Overview.json could not be found!',
+ to: '/',
+ routerInfo: 'back to FileUpload page'
+ }
+ })
+ store().clearStore()
+ return false
+})
+
diff --git a/report-viewer/src/views/ErrorView.vue b/report-viewer/src/views/ErrorView.vue
index 94a1da5d0..e36a35a11 100644
--- a/report-viewer/src/views/ErrorView.vue
+++ b/report-viewer/src/views/ErrorView.vue
@@ -1,28 +1,39 @@
-
- 
-
-
+
-
-
diff --git a/report-viewer/src/views/FileUploadView.vue b/report-viewer/src/views/FileUploadView.vue
index 6c91a6abe..c3686c7e5 100644
--- a/report-viewer/src/views/FileUploadView.vue
+++ b/report-viewer/src/views/FileUploadView.vue
@@ -2,23 +2,47 @@
Starting view of the application. Presents the options for loading a JPlag report.
-->
-
+
+
+ {{ routerInfo }}
+
+
+
+ 
+ 
+
+
+
+
+
+ There was an Error!
+{{ message }}
+
-
-
- JPlag Report Viewer
-
-
Select an overview or comparison file or a zip to display.
-(No files get uploaded anywhere)
-
-
Drop a .json or .zip on this page
+
+
+
@@ -29,6 +53,7 @@ import jszip from 'jszip'
import router from '@/router'
import store from '@/stores/store'
import slash from 'slash'
+import Button from '@/components/ButtonComponent.vue'
class LoadError extends Error {}
@@ -37,6 +62,8 @@ const hasLocalFile = ref(false)
// Checks whether local files exist
fetch('/files/overview.json').then((response) => (hasLocalFile.value = response.status == 200))
+const loadingFiles = ref(false)
+
// Loads file passed in query param, if any.
const queryParams = useRoute().query
let queryFileURL: URL | null = null
@@ -161,8 +188,8 @@ async function handleZipFile(file: Blob) {
)
await zip.files[originalFileName].async('string').then((data) => {
store().saveSubmissionFile({
- name: submissionFileName,
- file: { fileName: fullPathFileName, data: data }
+ name: slash(submissionFileName),
+ file: { fileName: slash(fullPathFileName), data: data }
})
})
} else {
@@ -213,6 +240,7 @@ function handleJsonFile(str: string) {
* @param file File to handle
*/
async function handleFile(file: Blob) {
+ loadingFiles.value = true
switch (file.type) {
case 'application/zip':
case 'application/zip-compressed':
@@ -230,7 +258,7 @@ async function handleFile(file: Blob) {
* Handles file drop.
* @param e Drag event of file drop
*/
-async function uploadFile(e: DragEvent) {
+async function uploadFileOnDrag(e: DragEvent) {
let dropped = e.dataTransfer?.files
try {
if (dropped?.length === 1) {
@@ -248,6 +276,25 @@ async function uploadFile(e: DragEvent) {
}
}
+async function uploadFileThroughWindow() {
+ let input = document.createElement('input')
+ input.type = 'file'
+ input.accept = '.zip,.json'
+ input.multiple = false
+ input.onchange = () => {
+ const files = input.files
+ if (!files) {
+ return
+ }
+ const file = files.item(0)
+ if (!file) {
+ return
+ }
+ handleFile(file)
+ }
+ input.click()
+}
+
/**
* Handles click on Continue with query file.
*/
diff --git a/report-viewer/src/views/InformationView.vue b/report-viewer/src/views/InformationView.vue
new file mode 100644
index 000000000..93819cfe0
--- /dev/null
+++ b/report-viewer/src/views/InformationView.vue
@@ -0,0 +1,62 @@
+
+
+
+
-
+
-
- Detected local files!
-Loading file…
+
+
+ {{
+ overview.submissionFolderPath.join(', ')
+ }}
+ {{
+ overview.baseCodeFolderPath
+ }}
+ {{ overview.language }}
+ {{
+ overview.fileExtensions.join(', ')
+ }}
+ {{
+ overview.matchSensitivity
+ }}
+
+
+
+
+
+ {{
+ overview.dateOfExecution
+ }}
+ {{ overview.durationOfExecution }} ms
+ {{
+ store().getSubmissionIds.length
+ }}
+ {{
+ totalComparisons
+ }}
+ {{
+ shownComparisons
+ }}
+ {{
+ missingComparisons
+ }}
+
+
+
+
+
+
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 0acec8861..5b0334fc8 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -2,216 +2,195 @@
A view displaying the overview file of a JPlag report.
-->
- Run Options:
+ +Run Data:
+ +
-
-
-
JPlag Report
-Main Info:
-
-
-
-
-
-
-
-
- - {{ path }} -
-{{ info }}
-
-
-
+
-
+
+
+
-
- JPlag Report
+
+ {{ submissionPathValue }}
+ {{
+ store().getSubmissionIds.length
+ }}
+ {{
+ overview.totalComparisons
+ }}
+ {{
+ overview.matchSensitivity
+ }}
+
+
+
-
-
-
diff --git a/report-viewer/tailwind.config.js b/report-viewer/tailwind.config.js
new file mode 100644
index 000000000..a5299e1ab
--- /dev/null
+++ b/report-viewer/tailwind.config.js
@@ -0,0 +1,64 @@
+import colors from 'tailwindcss/colors'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+ darkMode: 'class',
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,vue}"
+ ],
+ theme: {
+ extend: {
+ colors: {
+ font: {
+ light: '#000000',
+ dark: '#ffffff'
+ },
+ backgorund: {
+ light: 'hsl(0, 0%, 97%)',
+ dark: 'hsl(180, 80%, 3%)'
+ },
+ container: {
+ light: 'hsl(0, 0%, 98%)',
+ dark: 'hsl(200, 20%, 13%)',
+ border: {
+ light: 'hsl(0, 0%, 80%)',
+ dark: 'hsl(0, 0%, 25%)'
+ },
+ secondary: {
+ light: 'hsl(0, 0%, 95%)',
+ dark: 'hsl(200, 20%, 18%)'
+ }
+ },
+ interactable: {
+ light: 'hsl(0, 0%, 100%)',
+ dark: 'hsl(180, 30%, 18%)',
+ border: {
+ light: 'hsl(0, 0%, 75%)',
+ dark: 'hsl(0, 0%, 30%)'
+ }
+ },
+ scrollbar: {
+ backgorund: {
+ light: colors.slate[100],
+ dark: '#30363D'
+ },
+ thumb: {
+ light: colors.slate[400],
+ dark: '#505A66'
+ }
+ },
+ accent: {
+ DEFAULT: '#be1622',
+ dark: '#7F0F18'
+ },
+
+ },
+ borderWidth: {
+ 1: '1px',
+ }
+ },
+ },
+ plugins: [],
+}
+
-
-
-
- Metric:
-
-
+
+
+
+
+
- Distribution of Comparisons:
+
+
+
+
+ Options:
+
+
- Top Comparisons:
+Distribution:
-
-
Top Comparisons:
-
+
-
-
+