templates/results_partial.html

<div id="results-table">
    <h2 class="text-2xl font-bold text-blue-400 mb-4">Parsed Results: {{ filename }}</h2>
    <div class="table-container">
        <table class="w-full border-collapse text-sm">
            <thead>
                <tr class="bg-gray-700 text-blue-300">
                    <th class="p-4 text-left font-semibold">Part</th>
                    <th class="p-4 text-left font-semibold">Category</th>
                    <th class="p-4 text-left font-semibold">Node ID</th>
                    <th class="p-4 text-left font-semibold">Parent Path</th>
                    <th class="p-4 text-left font-semibold">Level</th>
                    <th class="p-4 text-left font-semibold">Location</th>
                    <th class="p-4 text-left font-semibold">Variable Role</th>
                    <th class="p-4 text-left font-semibold">Vector</th>
                    <th class="p-4 text-left font-semibold">Source</th>
                </tr>
            </thead>
            <tbody>
                {% for part in parts %}
                <tr class="border-b border-gray-700 hover:bg-gray-600 transition-colors">
                    <td class="p-4">{{ part.index }}</td>
                    <td class="p-4">{{ part.category }}</td>
                    <td class="p-4">{{ part.node_id }}</td>
                    <td class="p-4">{{ part.parent_path }}</td>
                    <td class="p-4">{{ part.level }}</td>
                    <td class="p-4">Lines {{ part.location[0] }} to {{ part.location[1] }}</td>
                    <td class="p-4">
                        {% if part.category in ['input_variable', 'assigned_variable', 'returned_variable'] %}
                            {{ part.category.replace('_variable', '') | capitalize }}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td class="p-4">[{{ part.vector|join(', ') }}]</td>
                    <td class="p-4">
                        <pre class="text-xs text-gray-300" style="margin-left: {{ part.level * 1.5 }}rem;">{{ part.source }}</pre>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-bold text-blue-400 mb-2">Reconstructed Code</h3>
        <pre class="bg-gray-900 p-4 rounded-lg text-gray-300 text-sm">{{ reconstructed_code }}</pre>
    </div>
    <div class="mt-4 space-x-4">
        <button onclick="togglePointCloud()" class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition">Toggle 3D Point Cloud</button>
        <button hx-post="/export_json" hx-headers='{"Content-Type": "application/json"}' hx-swap="none" hx-vals='{"parts": {{ parts|tojson|safe }}}' class="bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition">Export to JSON</button>
    </div>
</div>
<canvas id="point-cloud"></canvas>
<div id="point-details" class="mt-4">
    <p class="text-gray-400">Hover over a point to see details</p>
</div>
<script>
    window.parts = {{ parts|tojson }};
</script>