Skip to content

Restructuring ground truth data to latest version, syncing style between pages #110

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

Merged
Anas-Elhounsri merged 1 commit into from
Jul 23, 2026
Merged

Restructuring ground truth data to latest version, syncing style between pages #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
174 changes: 150 additions & 24 deletions docs/catalog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RsMetaCheck Catalog</title>

<!-- DataTables CSS -->
Expand All @@ -15,51 +16,173 @@

<style>
body {
font-family: Arial, sans-serif;
padding: 2em;
background: #f9f9f9;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #ffffff;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 1em;
color: #2c3e50;
margin-bottom: 30px;
}
.nav {
text-align: center;
margin-bottom: 30px;
}
.nav a {
color: #3498db;
text-decoration: none;
font-size: 0.95em;
padding: 6px 14px;
border: 1px solid #3498db;
border-radius: 4px;
margin: 0 6px;
}
.nav a:hover {
background-color: #3498db;
color: #fff;
}
.intro {
text-align: center;
margin-bottom: 2em;
color: #555;
font-size: 1.3em;
line-height: 1.2;
max-width: 1400px;
font-size: 0.95em;
line-height: 1.5;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.table-container {
background: white;
padding: 20px;
max-width: 95%;
margin: 0 auto;
overflow-x: auto;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#myTable {
table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
}
th, td {
padding: 6px 10px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
word-wrap: break-word;
word-break: break-word;
max-width: 350px;
}
th {
background-color: #f8f9fa;
font-weight: 600;
color: #2c3e50;
position: sticky;
top: 0;
z-index: 10;
white-space: nowrap;
}
tbody tr:hover {
background-color: #f5f5f5;
}
.code-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.85em;
font-weight: bold;
}
.code-p {
background-color: #ffebee;
color: #c0392b;
border: 1px solid #ffcdd2;
}
.code-w {
background-color: #fff8e1;
color: #e67e22;
border: 1px solid #ffecb3;
}
.dataTables_wrapper {
margin-top: 20px;
padding: 20px;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 8px;
outline: none;
}
.dataTables_wrapper .dataTables_info {
color: #666;
padding-top: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: #3498db !important;
background: #fff;
border: 1px solid #3498db !important;
border-radius: 4px;
padding: 4px 10px;
margin: 0 2px;
cursor: pointer;
text-decoration: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #3498db !important;
color: #fff !important;
border: 1px solid #3498db !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: #3498db !important;
color: #fff !important;
border: 1px solid #3498db !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: #999 !important;
border-color: #ccc !important;
background: #fff !important;
cursor: default;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
color: #2c3e50;
background-color: #f8f9fa;
}
table.dataTable.no-footer {
border-bottom: none;
}
</style>
</head>
<body>

<h1>Metadata Pitfalls & Warnings Catalog</h1>
<div class="nav">
<a href="index.html">&larr; Home</a>
<a href="ground_truth/index.html">Ground Truth Report</a>
<a href="ground_truth/comparison.html">Version Comparison</a>
<a href="ground_truth/charts.html">Charts</a>
</div>

<div class="intro">
<p>
This is a catalog of the pitfalls and warnings we have come across during our research on software metadata quality.
Based on these findings, we at <a href="https://oeg.fi.upm.es/" target="_blank">Ontology Engineering Group (OEG)</a>
have developed our tool <strong><a href="https://github.com/SoftwareUnderstanding/RsMetaCheck" target="_blank">RSMetaCheck</a></strong> to automatically diagnose and identify these common issues in software metadata files.
Warnings do not have a severity level because originally they were opted due to their low severity and classified as "Warnings" instead of "Pitfalls"
</p>
</div>
<h1>Metadata Pitfalls &amp; Warnings Catalog</h1>

<div class="intro">
<p>
This is a catalog of the pitfalls and warnings we have come across during our research on software metadata quality.
Based on these findings, we at <a href="https://oeg.fi.upm.es/" target="_blank">Ontology Engineering Group (OEG)</a>
have developed our tool <strong><a href="https://github.com/SoftwareUnderstanding/RsMetaCheck" target="_blank">RSMetaCheck</a></strong> to automatically diagnose and identify these common issues in software metadata files.
Warnings do not have a severity level because originally they were opted due to their low severity and classified as "Warnings" instead of "Pitfalls"
</p>
</div>

<!-- TABLE -->
<div class="table-container">
Expand Down Expand Up @@ -102,8 +225,11 @@ <h1>Metadata Pitfalls & Warnings Catalog</h1>
exampleCell = `<a href="${examples}" target="_blank">${examples}</a>`;
}

const badgeClass = identifier.trim().toUpperCase().startsWith('W') ? 'code-w' : 'code-p';
const idBadge = `<span class="code-badge ${badgeClass}">${identifier}</span>`;

const row = `<tr id="${identifier}">
<td><a href="https://w3id.org/rsmetacheck/catalog/#${identifier}" target="_blank">${identifier}</a></td>
<td><a href="https://w3id.org/rsmetacheck/catalog/#${identifier}" target="_blank">${idBadge}</a></td>
<td>${source}</td>
<td>${pitfall}</td>
<td>${description}</td>
Expand Down Expand Up @@ -152,4 +278,4 @@ <h1>Metadata Pitfalls & Warnings Catalog</h1>
});
</script>
</body>
</html>
</html>
17 changes: 9 additions & 8 deletions docs/ground_truth/charts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RsMetaCheck &mdash; 0.3.0 vs 0.3.3 Charts</title>
<title>RsMetaCheck &mdash; 0.3.0 vs 0.3.5 Charts</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
Expand Down Expand Up @@ -71,15 +71,16 @@

<div class="nav">
<a href="../index.html">&larr; Home</a>
<a href="../catalog.html">Catalog</a>
<a href="index.html">Ground Truth Report</a>
<a href="comparison.html">Version Comparison</a>
</div>

<h1>0.3.0 vs 0.3.3 &mdash; Charts</h1>
<h1>0.3.0 vs 0.3.5 &mdash; Charts</h1>

<p style="text-align: center; color: #555; font-size: 0.95em; line-height: 1.5; max-width: 800px; margin: 0 auto 20px auto;">
Pitfall and warning detection distributions across 150 repositories evaluated by
RsMetaCheck versions 0.3.0 and 0.3.3.
RsMetaCheck versions 0.3.0 and 0.3.5.
</p>

<hr class="section-divider">
Expand All @@ -97,7 +98,7 @@ <h3>Warnings (W001&ndash;W010)</h3>
</div>

<hr class="section-divider">
<h2>0.3.3 Pitfall &amp; Warning Distribution</h2>
<h2>0.3.5 Pitfall &amp; Warning Distribution</h2>

<div class="charts-row">
<div class="chart-box">
Expand All @@ -111,7 +112,7 @@ <h3>Warnings (W001&ndash;W010)</h3>
</div>

<hr class="section-divider">
<h2>0.3.0 vs 0.3.3 &mdash; Side-by-Side</h2>
<h2>0.3.0 vs 0.3.5 &mdash; Side-by-Side</h2>

<div class="charts-row">
<div class="chart-box">
Expand All @@ -129,7 +130,7 @@ <h3>Warnings</h3>
document.addEventListener("DOMContentLoaded", () => {
Promise.all([
fetch('summary_0_3_0.json').then(r => r.json()),
fetch('summary_0_3_1.json').then(r => r.json())
fetch('summary_0_3_5.json').then(r => r.json())
])
.then(([data030, data033]) => {
buildDistribution(data030, '030', {
Expand Down Expand Up @@ -253,7 +254,7 @@ <h3>Warnings</h3>
borderWidth: 1
},
{
label: '0.3.3',
label: '0.3.5',
data: sortedPitfalls.map(c => p033[c] || 0),
backgroundColor: 'rgba(142, 68, 173, 0.75)',
borderColor: '#8e44ad',
Expand Down Expand Up @@ -284,7 +285,7 @@ <h3>Warnings</h3>
borderWidth: 1
},
{
label: '0.3.3',
label: '0.3.5',
data: sortedWarnings.map(c => w033[c] || 0),
backgroundColor: 'rgba(41, 128, 185, 0.75)',
borderColor: '#2980b9',
Expand Down
23 changes: 12 additions & 11 deletions docs/ground_truth/comparison.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RsMetaCheck &mdash; 0.3.0 vs 0.3.3 Comparison</title>
<title>RsMetaCheck &mdash; 0.3.0 vs 0.3.5 Comparison</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
Expand Down Expand Up @@ -117,15 +117,16 @@

<div class="nav">
<a href="../index.html">&larr; Home</a>
<a href="../catalog.html">Catalog</a>
<a href="index.html">Ground Truth Report</a>
<a href="charts.html">Charts</a>
</div>

<h1>0.3.0 vs 0.3.3 &mdash; Comparison</h1>
<h1>0.3.0 vs 0.3.5 &mdash; Comparison</h1>

<p style="text-align: center; color: #555; font-size: 0.95em; line-height: 1.5; max-width: 800px; margin: 0 auto 20px auto;">
This page compares the detection results of RsMetaCheck version 0.3.0 and
version 0.3.3 across 150 repositories. What is highlighed in red is what was previously falsly flagged and fixed in the latest
version 0.3.5 across 150 repositories. What is highlighed in red is what was previously falsly flagged and fixed in the latest
release, and what is highlighted in green is what was not being detected in the ealier version of RSMetaCheck and fixed in the latest
release.
</p>
Expand All @@ -143,8 +144,8 @@ <h2>Repository-Level Comparison</h2>
<th>Code</th>
<th>0.3.0 Source</th>
<th>0.3.0 Description</th>
<th>0.3.3 Source</th>
<th>0.3.3 Description</th>
<th>0.3.5 Source</th>
<th>0.3.5 Description</th>
</tr>
</thead>
</table>
Expand All @@ -156,7 +157,7 @@ <h2>Repository-Level Comparison</h2>

Promise.all([
fetch('summary_0_3_0.json').then(r => r.json()),
fetch('summary_0_3_1.json').then(r => r.json()),
fetch('summary_0_3_5.json').then(r => r.json()),
fetch('summary_pitfalls_warnings.json').then(r => r.json())
])
.then(([data030, data033, gtData]) => {
Expand All @@ -169,25 +170,25 @@ <h2>Repository-Level Comparison</h2>
});

function buildComparisonTable(table, data030, data033, gtData) {
const gtRepoOrder = [];
const gtCommitMap = {};
for (const entry of Object.values(gtData)) {
const url = (entry.url || '').replace(/\/$/, "").split("/");
if (url.length >= 2) {
const name = url.slice(-2).join("/");
gtRepoOrder.push(name);
gtCommitMap[name] = entry['commit ID'] || '';
}
}

const gtNames = new Set(Object.keys(gtCommitMap));
const commonRepos = new Set(
[...Object.keys(data030)].filter(r => data033[r] && gtNames.has(r))
[...Object.keys(data030)].filter(r => data033[r] && gtCommitMap[r])
);

for (const repoName of Object.keys(data030).sort()) {
for (const repoName of gtRepoOrder) {
if (!commonRepos.has(repoName)) continue;
const r030 = data030[repoName];
const r033 = data033[repoName];
if (!r033) continue;
if (!commonRepos.has(repoName)) continue;

const codes030 = Object.assign({}, r030.pitfalls || {}, r030.warnings || {});
const codes033 = Object.assign({}, r033.pitfalls || {}, r033.warnings || {});
Expand Down
Loading
Loading