Implement Enhanced State Explorer with Spyder-like multi-window data structure exploration

[Copilot]

This PR implements a comprehensive Enhanced State Explorer for BlockPy that provides Spyder-like functionality for exploring complex data structures through multiple interactive windows.

Problem

The existing State Explorer had limited functionality:

• Only Lists had explore buttons (referenced a non-existent viewExactValue method)
• No support for exploring Dictionaries or Tuples
• Limited data structure viewing capabilities
• Outdated UI with old glyphicon icons

Solution

Added comprehensive multi-window data exploration capabilities:

Core Features

• Multi-data type support - Lists, Dictionaries, and Tuples now have explore buttons
• Interactive data exploration - Click to open detailed views in new dialogs
• Nested exploration - Drill down into complex nested structures
• Multiple simultaneous windows - Open several exploration dialogs like Spyder
• Modern UI - FontAwesome icons, responsive Bootstrap tables, draggable dialogs

Technical Implementation

1. Added missing viewExactValue method to BlockPy model:

// Added to src/blockpy.js in model.ui
viewExactValue: function(variableName, type, exactValue) {
    self.components.dialog.DATA_EXPLORER(variableName, type, exactValue);
}

2. Enhanced trace template to support multiple data types:

<!-- ko if: type == "List" || type == "Dictionary" || type == "Tuple" -->
<a href="" data-bind="click: function() { $root.viewExactValue(name, type, exact_value); }">
    <span class='fas fa-external-link-alt' title='Explore in new window'></span>
</a>
<!-- /ko -->

3. Comprehensive dialog system with specialized explorers:

• DATA_EXPLORER() - Main entry point for data exploration
• buildListExplorer() - Tabular view for list contents
• buildDictExplorer() - Key-value table view for dictionaries
• buildTupleExplorer() - Indexed view for tuple contents
• buildSimpleValueExplorer() - Detailed view for primitives
• Nested exploration with click handlers for drilling down

4. Enhanced data parsing to include exact_value for Dictionaries and Tuples:

case Sk.builtin.dict:
    return {"name": property, "type": "Dictionary", 
            "value": value.$r().v, "exact_value": value};

Usage Example

When students run code creating complex structures:

data = {
    'users': [
        {'name': 'Alice', 'scores': [95, 87, 92]},
        {'name': 'Bob', 'scores': [78, 85, 90]}
    ],
    'metadata': {'version': 1.0, 'created': '2024-01-01'}
}

The Enhanced State Explorer now provides:

1. 🔍 Explore button next to the 'data' Dictionary variable
2. 📊 Table view showing all keys and their types
3. 🔗 Click to explore nested Lists and Objects
4. 🪟 Multiple exploration windows open simultaneously
5. 📋 Detailed inspection of individual items

Quality Assurance

• ✅ Webpack builds successfully without errors
• ✅ All code passes ESLint validation
• ✅ No breaking changes to existing functionality
• ✅ Proper error handling and edge case management
• ✅ Performance optimized (limits display to 100 items for large datasets)

This enhancement transforms BlockPy's debugging capabilities, providing students and educators with professional-grade data structure exploration comparable to Spyder's variable explorer.

Fixes #2.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.