Skip to content

UI Guide

Sevhena Walker edited this page Apr 4, 2025 · 4 revisions

Sidebar Panel Organization

The left sidebar hosts four distinct views that form the core of the EcoOptimizers interface:

VS Code window with python file open and ecooptimizer sidebar open on the left.
Vscode window with ecooptimizer sidebar open
  1. Refactoring Details Panel:
    This view remains empty during normal operation but springs to life when you initiate a refactoring. It provides a comprehensive overview of the ongoing refactoring operation, including detailed information about the specific code smell being addressed, the estimated energy savings from the change, and a tree view of all affected files in your workspace.

  2. Code Smells Panel:
    The workhorse of the interface, this panel displays a hierarchical view of all detected code inefficiencies organized by file and line number. The tree structure mirrors your project's actual file organization, making it easy to navigate to problematic areas of your codebase.

  3. Carbon Metrics Panel:
    Here you'll find quantifiable evidence of your sustainability improvements. The panel displays CO₂ savings in kilograms, broken down by file, directory, and specific smell type. This visualization helps you understand which refactorings are making the most significant environmental impact.

  4. Filter Smells Panel:
    This configuration center lets you customize which types of code smells are detected and under what conditions. Beyond simple toggles for each smell type, five specific smells offer adjustable thresholds to fine-tune detection sensitivity.

Understanding Status Indicators

EcoOptimizers uses a system of icons and visual indicators to communicate the state of your code analysis:

  • File Status Icons:
    The circular icon preceding each file name in the Code Smells panel tells you at a glance the analysis status:
    • Gray circle: The file hasn't been analyzed yet
    • Blue checkmark: Analysis complete, no smells found
    • Green checkmark: Analysis complete, smells detected
    • Yellow warning triangle: File modified since last analysis

view of ecooptimizer status icons

  • Action Icons:
    Each file and folder entry includes interactive icons on the right side:
    • 🔍 Magnifying glass: Initiate smell detection
    • 🛠️ Wrench: Refactor all detected smells of a particular type Individual smell entries also feature the wrench icon for targeted refactoring of specific instances.

view of ecooptimizer command icons

Detection

Clone this wiki locally