infinite-agents-public/mapbox_test/test-data-generation.html

143 lines
5.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Generation Test</title>
<style>
body {
font-family: monospace;
padding: 20px;
background: #1a1a1a;
color: #00ff00;
}
pre {
background: #000;
padding: 15px;
border: 1px solid #333;
overflow-x: auto;
max-height: 500px;
overflow-y: auto;
}
h2 {
color: #00aaff;
border-bottom: 2px solid #00aaff;
padding-bottom: 5px;
}
.test-result {
margin: 20px 0;
padding: 10px;
background: #222;
border-left: 4px solid #00ff00;
}
.error {
border-left-color: #ff0000;
color: #ff6666;
}
</style>
</head>
<body>
<h1>🔬 Data Generation Diagnostic Test</h1>
<div id="output"></div>
<script type="module">
import { generateVaccineData } from './shared/data-generator.js';
const output = document.getElementById('output');
function addSection(title, content, isError = false) {
const div = document.createElement('div');
div.className = 'test-result' + (isError ? ' error' : '');
div.innerHTML = `<h2>${title}</h2><pre>${content}</pre>`;
output.appendChild(div);
}
// Test all vaccine types
const vaccineTypes = ['polio', 'measles', 'smallpox', 'dtp3', 'hpv'];
vaccineTypes.forEach(type => {
try {
const data = generateVaccineData(type);
// Check basic structure
addSection(`${type.toUpperCase()} - Basic Structure`,
`Type: ${data.type}
Feature Count: ${data.features.length}
First Feature:
${JSON.stringify(data.features[0], null, 2)}`);
// Check first feature properties
const firstFeature = data.features[0];
const props = firstFeature.properties;
addSection(`🔍 ${type.toUpperCase()} - Properties Available`,
Object.keys(props).sort().join('\n'));
// Check geometry
addSection(`📍 ${type.toUpperCase()} - Geometry Check`,
`Geometry Type: ${firstFeature.geometry.type}
Coordinates: ${JSON.stringify(firstFeature.geometry.coordinates)}`);
// Type-specific property checks
let specificCheck = '';
switch(type) {
case 'polio':
specificCheck = `coverage_1980: ${props.coverage_1980}
coverage_1990: ${props.coverage_1990}
coverage_2000: ${props.coverage_2000}
coverage_2010: ${props.coverage_2010}
coverage_2020: ${props.coverage_2020}
polio_free_year: ${props.polio_free_year}
endemic: ${props.endemic}`;
break;
case 'measles':
specificCheck = `coverage_dose1: ${props.coverage_dose1}
coverage_dose2: ${props.coverage_dose2}
cases_2023: ${props.cases_2023}
deaths_2023: ${props.deaths_2023}`;
break;
case 'smallpox':
specificCheck = `endemic_1950: ${props.endemic_1950}
endemic_1960: ${props.endemic_1960}
endemic_1970: ${props.endemic_1970}
eradication_year: ${props.eradication_year}
vaccination_intensity: ${props.vaccination_intensity}`;
break;
case 'dtp3':
specificCheck = `dtp3_coverage_2024: ${props.dtp3_coverage_2024}
zero_dose_children: ${props.zero_dose_children}
under5_mortality_rate: ${props.under5_mortality_rate}
infant_deaths_prevented: ${props.infant_deaths_prevented}`;
break;
case 'hpv':
specificCheck = `hpv_coverage_2024: ${props.hpv_coverage_2024}
cervical_cancer_incidence: ${props.cervical_cancer_incidence}
lives_saved_projected: ${props.lives_saved_projected}
annual_deaths: ${props.annual_deaths}`;
break;
}
addSection(`${type.toUpperCase()} - Type-Specific Properties`, specificCheck);
} catch (error) {
addSection(`${type.toUpperCase()} - ERROR`, error.toString(), true);
}
});
// Test a specific property expression scenario
addSection('🧪 Expression Test - Polio Coverage 1980',
`Testing if ['get', 'coverage_1980'] would work:
const polioData = generateVaccineData('polio');
const firstFeature = polioData.features[0];
const value = firstFeature.properties['coverage_1980'];
Result: ${generateVaccineData('polio').features[0].properties['coverage_1980']}
Type: ${typeof generateVaccineData('polio').features[0].properties['coverage_1980']}
Is undefined: ${generateVaccineData('polio').features[0].properties['coverage_1980'] === undefined}`);
</script>
</body>
</html>