def generate_html(plan1_lines, plan2_lines, output_path="compare_plan.html"):
max_len = max(len(plan1_lines), len(plan2_lines))
plan1_lines += [''] * (max_len - len(plan1_lines))
plan2_lines += [''] * (max_len - len(plan2_lines))
table1_rows = []
table2_rows = []
for idx, (l1, l2) in enumerate(zip(plan1_lines, plan2_lines), start=1):
is_diff = l1 != l2
class_name = "diff" if is_diff else ""
row1 = f'<tr class="{class_name}"><td>{idx}</td><td>{l1}</td></tr>'
row2 = f'<tr class="{class_name}"><td>{idx}</td><td>{l2}</td></tr>'
table1_rows.append(row1)
table2_rows.append(row2)
html_template = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Oracle SQL Plan Comparison</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<style>
body {{
font-family: Arial, sans-serif;
}}
table {{
width: 100%;
white-space: pre;
font-family: monospace;
}}
td {{
white-space: pre;
}}
.container {{
display: flex;
justify-content: space-around;
gap: 20px;
}}
.table-wrapper {{
flex: 1;
}}
.diff td {{
background-color: #fff3cd;
}}
.button-wrapper {{
margin: 10px 0;
text-align: center;
}}
</style>
</head>
<body>
<h2>Oracle SQL Plan Comparison</h2>
<div class="button-wrapper">
<button onclick="toggleDiffs()">다른 부분만 보기 / 전체 보기</button>
</div>
<div class="container">
<div class="table-wrapper">
<h3>DB1 Plan</h3>
<table id="table1" class="display">
<thead><tr><th>#</th><th>Plan Line</th></tr></thead>
<tbody>
{''.join(table1_rows)}
</tbody>
</table>
</div>
<div class="table-wrapper">
<h3>DB2 Plan</h3>
<table id="table2" class="display">
<thead><tr><th>#</th><th>Plan Line</th></tr></thead>
<tbody>
{''.join(table2_rows)}
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
let table1, table2;
let showingDiffsOnly = false;
$(document).ready(function() {{
table1 = $('#table1').DataTable({{ paging: false, searching: false, info: false }});
table2 = $('#table2').DataTable({{ paging: false, searching: false, info: false }});
}});
function toggleDiffs() {{
showingDiffsOnly = !showingDiffsOnly;
const table1Rows = document.querySelectorAll('#table1 tbody tr');
const table2Rows = document.querySelectorAll('#table2 tbody tr');
table1Rows.forEach((row, i) => {{
const isDiff = row.classList.contains('diff');
row.style.display = showingDiffsOnly && !isDiff ? 'none' : '';
}});
table2Rows.forEach((row, i) => {{
const isDiff = row.classList.contains('diff');
row.style.display = showingDiffsOnly && !isDiff ? 'none' : '';
}});
}}
</script>
</body>
</html>
"""
with open(output_path, "w", encoding="utf-8") as f:
f.write(html_template)
print(f"\n[완료] 실행 계획 비교 결과가 '{output_path}'에 저장되었습니다.")