ai_upgrade_assistant-0.2.0-alpha2/templates/upgrade-path-interactive.html.twig

{#
/**
 * @file
 * Default theme implementation to display an interactive upgrade path visualization.
 *
 * Available variables:
 * - module: The module name.
 * - path: The upgrade path data.
 */
#}
<div class="upgrade-path-interactive-wrapper">
  <div class="visualization-header">
    <h2>{{ 'Interactive Upgrade Path for @module'|t({'@module': module}) }}</h2>
    <div class="visualization-controls">
      <div class="zoom-controls">
        <button class="button zoom-in" title="{{ 'Zoom In'|t }}">+</button>
        <button class="button zoom-out" title="{{ 'Zoom Out'|t }}">-</button>
        <button class="button zoom-fit" title="{{ 'Fit to View'|t }}">
          <i class="fas fa-expand"></i>
        </button>
      </div>
      <div class="view-controls">
        <button class="button view-toggle" data-view="tree" title="{{ 'Tree View'|t }}">
          <i class="fas fa-sitemap"></i>
        </button>
        <button class="button view-toggle" data-view="timeline" title="{{ 'Timeline View'|t }}">
          <i class="fas fa-stream"></i>
        </button>
        <button class="button view-toggle" data-view="dependency" title="{{ 'Dependency View'|t }}">
          <i class="fas fa-project-diagram"></i>
        </button>
      </div>
    </div>
  </div>

  <div class="visualization-container">
    <div id="upgrade-path-viz"></div>
    <div class="visualization-sidebar">
      <div class="sidebar-section">
        <h3>{{ 'Legend'|t }}</h3>
        <div class="legend-items">
          <div class="legend-item">
            <span class="color-dot breaking-change"></span>
            <span>{{ 'Breaking Changes'|t }}</span>
          </div>
          <div class="legend-item">
            <span class="color-dot api-update"></span>
            <span>{{ 'API Updates'|t }}</span>
          </div>
          <div class="legend-item">
            <span class="color-dot deprecation"></span>
            <span>{{ 'Deprecations'|t }}</span>
          </div>
          <div class="legend-item">
            <span class="color-dot pattern-transformation"></span>
            <span>{{ 'Pattern Transformations'|t }}</span>
          </div>
        </div>
      </div>

      <div class="sidebar-section">
        <h3>{{ 'Filters'|t }}</h3>
        <div class="filter-controls">
          <label>
            <input type="checkbox" class="filter-type" value="breaking-change" checked>
            {{ 'Breaking Changes'|t }}
          </label>
          <label>
            <input type="checkbox" class="filter-type" value="api-update" checked>
            {{ 'API Updates'|t }}
          </label>
          <label>
            <input type="checkbox" class="filter-type" value="deprecation" checked>
            {{ 'Deprecations'|t }}
          </label>
          <label>
            <input type="checkbox" class="filter-type" value="pattern-transformation" checked>
            {{ 'Pattern Transformations'|t }}
          </label>
          <label>
            <input type="checkbox" class="filter-automated" checked>
            {{ 'Show Automated Steps'|t }}
          </label>
        </div>
      </div>

      <div class="sidebar-section">
        <h3>{{ 'Selected Step'|t }}</h3>
        <div id="selected-step-details">
          <p class="no-selection">{{ 'Click a step to view details'|t }}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="visualization-footer">
    <div class="progress-indicator">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
      </div>
      <div class="progress-stats">
        <span class="completed-steps">0</span> / <span class="total-steps">{{ path.steps|length }}</span>
        {{ 'steps completed'|t }}
      </div>
    </div>
    <div class="footer-actions">
      <button class="button button--primary start-upgrade">{{ 'Start Upgrade'|t }}</button>
      <button class="button export-progress">{{ 'Export Progress'|t }}</button>
    </div>
  </div>
</div>

<div id="step-details-template" style="display: none;">
  <div class="step-details-content">
    <h4 class="step-title"></h4>
    <div class="step-info">
      <div class="step-type"></div>
      <div class="step-confidence"></div>
      <div class="step-automation"></div>
    </div>
    <div class="step-description"></div>
    <div class="step-risks"></div>
    <div class="step-actions">
      <button class="button apply-step">{{ 'Apply Step'|t }}</button>
      <button class="button skip-step">{{ 'Skip'|t }}</button>
      <a href="#" class="view-details">{{ 'Full Details'|t }}</a>
    </div>
  </div>
</div>