{/* Mobile overlay when sidebar is open */} {isMobile && sidebarOpen && (

setSidebarOpen(false)} aria-hidden="true" /> )} {/* Sidebar Collapse Toggle (when collapsed) */} {!sidebarOpen && ( )} {/* Sidebar */}

{/* Header */}

{t('schemaVisualization')}

{t('heritageOntology')}

{/* Header Toggle Button */} {/* Load Data Section */}

{loadSectionExpanded && (

{t('uploadFile')}

{t('fileHint')}

{t('orPasteDirectly')}

setCustomInput(e.target.value)}
                rows={6}
              />
              
              <button 
                className="load-button"
                onClick={handleLoadCustomInput}
                disabled={!customInput.trim() || isLoading}
              >
                {t('visualize')}
              </button>
            </div>
          )}
        </div>

{/* Generate Section */}
        <div className="generate-section">
          {/* View Switcher - Toggle between UML and RDF */}
          <div className="view-switcher">
            <button 
              className={`view-switch-button ${currentCategory === 'uml' ? 'view-switch-button--active' : ''}`}
              onClick={handleSwitchToUml}
              disabled={generatingUml}
              title={t('switchToUml')}
            >
              <LayoutGrid size={16} />
              <span>UML</span>
              {hasUmlCache && <span className="cache-indicator">●</span>}
            </button>
            <button 
              className={`view-switch-button ${currentCategory === 'rdf' ? 'view-switch-button--active' : ''}`}
              onClick={handleSwitchToRdf}
              disabled={_generatingRdf}
              title={t('switchToRdf')}
            >
              <Database size={16} />
              <span>RDF</span>
              {hasRdfCache && <span className="cache-indicator">●</span>}
              {hasRdfCache && rdfNodeCount > 0 && <span className="node-count">{rdfNodeCount}</span>}
            </button>
          </div>
          
          {/* Generate Button - simple button based on current view */}
          <button 
            className="generate-button-simple"
            onClick={currentCategory === 'uml' ? handleGenerateUml : handleGenerateRdf}
            disabled={generatingUml || _generatingRdf}
            title={currentCategory === 'uml' ? t('refreshUml') : t('refreshRdf')}
          >
            {(generatingUml || _generatingRdf) ? (
              <>
                <RefreshCw size={16} className="spinning" />
                {t('generating')}
              </>
            ) : (
              <>
                <RefreshCw size={16} />
                {currentCategory === 'uml' ? t('refreshUml') : t('refreshRdf')}
              </>
            )}
          </button>
        </div>

{/* Current File */}
        {fileName && (
          <div className="current-file-section">
            <h3>{t('loaded')}</h3>
            <p className="current-file-name">{fileName}</p>
            <span className="current-file-type">
              {currentCategory === 'rdf' ? t('rdfGraph') : t('umlDiagram')}
            </span>
          </div>
        )}

{/* Database Status (RDF only) */}
        {isInitialized && storageInfo && currentCategory === 'rdf' && (
          <div className="status-section">
            <h3>{t('storageInfo')}</h3>
            <p><strong>{t('used')}:</strong> {storageInfo.usageInMB}</p>
            <p><strong>{t('available')}:</strong> {storageInfo.quotaInMB}</p>
            <p><strong>{t('usage')}:</strong> {storageInfo.percentUsed}</p>
          </div>
        )}

{/* RDF Query Limit Control */}
        {currentCategory === 'rdf' && (
          <div className="query-limit-section">
            <h3>{t('queryLimit')}</h3>
            <p className="query-limit-desc">{t('queryLimitDesc')}</p>
            <select 
              className="query-limit-select"
              value={rdfLimit}
              onChange={(e) => {
                const newLimit = parseInt(e.target.value, 10);
                setRdfLimit(newLimit);
                localStorage.setItem('visualize-rdf-limit', String(newLimit));
                // Invalidate cache so next view switch triggers refresh
                // User will need to click "Refresh RDF" or switch away and back
              }}
            >
              <option value="100">100</option>
              <option value="250">250</option>
              <option value="500">500</option>
              <option value="1000">1,000</option>
              <option value="2000">2,000</option>
              <option value="5000">5,000</option>
              <option value="10000">10,000</option>
              <option value="50000">All (50,000+)</option>
            </select>
            {/* Show refresh prompt if limit changed from cached value */}
            {hasRdfCache && cachedRdfLimitRef.current !== null && cachedRdfLimitRef.current !== rdfLimit && (
              <button 
                className="query-limit-refresh-button"
                onClick={handleGenerateRdf}
                disabled={_generatingRdf}
              >
                <RefreshCw size={14} />
                {language === 'nl' ? 'Toepassen' : 'Apply'}
              </button>
            )}
            {totalCustodiansAvailable && (
              <p className="query-limit-info">
                {rdfNodeCount > 0 ? rdfNodeCount : rdfLimit} {t('showingOf')} {totalCustodiansAvailable.toLocaleString()} {t('custodiansAvailable')}
              </p>
            )}
            {rdfLimit > 1000 && (
              <p className="query-limit-warning">{t('performanceWarning')}</p>
            )}
            
            {/* Query Mode Selector */}
            <div className="query-mode-subsection">
              <h4>{t('queryMode')}</h4>
              <p className="query-mode-desc">{t('queryModeDesc')}</p>
              <div className="query-mode-options">
                <label className={`query-mode-option ${rdfQueryMode === 'detailed' ? 'active' : ''}`}>
                  <input
                    type="radio"
                    name="queryMode"
                    value="detailed"
                    checked={rdfQueryMode === 'detailed'}
                    onChange={() => {
                      setRdfQueryMode('detailed');
                      localStorage.setItem('visualize-rdf-query-mode', 'detailed');
                    }}
                  />
                  <div className="query-mode-content">
                    <span className="query-mode-label">{t('queryModeDetailed')}</span>
                    <span className="query-mode-hint">{t('queryModeDetailedHint')}</span>
                  </div>
                </label>
                <label className={`query-mode-option ${rdfQueryMode === 'generic' ? 'active' : ''}`}>
                  <input
                    type="radio"
                    name="queryMode"
                    value="generic"
                    checked={rdfQueryMode === 'generic'}
                    onChange={() => {
                      setRdfQueryMode('generic');
                      localStorage.setItem('visualize-rdf-query-mode', 'generic');
                    }}
                  />
                  <div className="query-mode-content">
                    <span className="query-mode-label">{t('queryModeGeneric')}</span>
                    <span className="query-mode-hint">{t('queryModeGenericHint')}</span>
                  </div>
                </label>
                <label 
                  className="query-mode-option query-mode-custom"
                  onClick={(e) => {
                    e.preventDefault();
                    window.open('/query-builder', '_blank');
                  }}
                >
                  <div className="query-mode-content">
                    <span className="query-mode-label">{t('queryModeCustom')}</span>
                    <span className="query-mode-hint">{t('queryModeCustomHint')}</span>
                  </div>
                  <span className="query-mode-external-icon">↗</span>
                </label>
              </div>
              {/* Show Apply button if mode changed from cached value */}
              {hasRdfCache && cachedRdfQueryModeRef.current !== null && cachedRdfQueryModeRef.current !== rdfQueryMode && (
                <button 
                  className="query-mode-refresh-button"
                  onClick={handleGenerateRdf}
                  disabled={_generatingRdf}
                >
                  <RefreshCw size={14} />
                  {language === 'nl' ? 'Toepassen' : 'Apply'}
                </button>
              )}
            </div>
          </div>
        )}

{hasUmlContent && currentCategory === 'uml' && (
          <div className="uml-density-section">
            <h3>{t('umlDensity')}</h3>
            <p className="uml-density-desc">{t('umlDensityDesc')}</p>
            <div className="uml-density-options">
              <button
                className={`uml-density-option ${umlDensityMode === 'full' ? 'active' : ''}`}
                onClick={() => {
                  setUmlDensityMode('full');
                  localStorage.setItem('visualize-uml-density-mode', 'full');
                }}
              >
                <span className="uml-density-label">{t('umlModeFull')}</span>
                <span className="uml-density-hint">{t('umlModeFullHint')}</span>
              </button>
              <button
                className={`uml-density-option ${umlDensityMode === 'streamlined' ? 'active' : ''}`}
                onClick={() => {
                  setUmlDensityMode('streamlined');
                  localStorage.setItem('visualize-uml-density-mode', 'streamlined');
                }}
              >
                <span className="uml-density-label">{t('umlModeStreamlined')}</span>
                <span className="uml-density-hint">{t('umlModeStreamlinedHint')}</span>
              </button>
              <button
                className={`uml-density-option ${umlDensityMode === 'module' ? 'active' : ''}`}
                onClick={() => {
                  setUmlDensityMode('module');
                  localStorage.setItem('visualize-uml-density-mode', 'module');
                }}
              >
                <span className="uml-density-label">{t('umlModeModule')}</span>
                <span className="uml-density-hint">{t('umlModeModuleHint')}</span>
              </button>
            </div>
            {umlDensityMode === 'module' && umlModuleOptions.length > 0 && (
              <div className="uml-module-picker">
                <label htmlFor="uml-module-select" className="uml-module-label">{t('umlModuleSelect')}</label>
                <select
                  id="uml-module-select"
                  className="uml-module-select"
                  value={selectedUmlModule}
                  onChange={(e) => {
                    const next = e.target.value;
                    setSelectedUmlModule(next);
                    localStorage.setItem('visualize-uml-module', next);
                  }}
                >
                  {umlModuleOptions.map((option) => (
                    <option key={option.id} value={option.id}>
                      {option.label} ({option.count.toLocaleString()})
                    </option>
                  ))}
                </select>
              </div>
            )}
            {displayUmlDiagram && umlDiagram && (
              <p className="uml-density-info">
                {displayUmlDiagram.nodes.length.toLocaleString()} / {umlDiagram.nodes.length.toLocaleString()} {t('umlShowingClasses')}
              </p>
            )}
          </div>
        )}

{/* Graph Controls (RDF only) */}
        {hasRdfContent && currentCategory === 'rdf' && (
          <GraphControls
            nodeTypes={nodeTypes}
            predicates={predicates}
            allNodes={nodes}
            filters={filters}
            onFiltersChange={setFilters}
            onReset={resetFilters}
            onNodeSelect={setSelectedNode}
            stats={stats}
            language={language}
          />
        )}

{/* Hovered Node Info (RDF) - Brief hint in sidebar */}
        {hoveredNode && !selectedNode && currentCategory === 'rdf' && (
          <div className="hover-info-section">
            <h3>{t('hoverInfo')}</h3>
            <p><strong>{t('type')}:</strong> {hoveredNode.type}</p>
            {hoveredNode.label && (
              <p><strong>{t('label')}:</strong> {hoveredNode.label}</p>
            )}
            {hoveredNode.properties && Object.keys(hoveredNode.properties).length > 0 && (
              <p className="hover-properties-hint">
                <strong>{t('properties')}:</strong> {Object.keys(hoveredNode.properties).length} {language === 'nl' ? 'velden' : 'fields'}
              </p>
            )}
          </div>
        )}

{/* Source Code View (UML) - in sidebar */}
        {hasUmlContent && umlFileContent && !isLoading && currentCategory === 'uml' && (
          <div className="source-section">
            <details>
              <summary>{t('viewSourceCode')}</summary>
              <div className="source-code-container">
                <pre><code>{umlFileContent}</code></pre>
              </div>
            </details>
          </div>
        )}

</aside>

{/* Main Visualization */}
      <main className={`main-content ${isFullscreen ? 'main-content--fullscreen' : ''}`} ref={mainContentRef}>
        {/* Toolbar (when content loaded) */}
        {hasContent && !isLoading && (
          <div className="toolbar">
            <div className="toolbar-left">
              {/* Zoom Controls */}
              <button 
                className="toolbar-button"
                title={t('fitToScreen')}
                onClick={() => {
                  if (currentCategory === 'uml') {
                    window.dispatchEvent(new CustomEvent('uml-fit-to-screen'));
                  } else if (currentCategory === 'rdf') {
                    window.dispatchEvent(new CustomEvent('rdf-fit-to-screen'));
                  }
                }}
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
                  <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
                </svg>
                {t('fit')}
              </button>
              <button 
                className="toolbar-button"
                title={t('zoomIn')}
                onClick={() => {
                  if (currentCategory === 'uml') {
                    window.dispatchEvent(new CustomEvent('uml-zoom-in'));
                  } else if (currentCategory === 'rdf') {
                    window.dispatchEvent(new CustomEvent('rdf-zoom-in'));
                  }
                }}
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
                  <circle cx="11" cy="11" r="8" />
                  <path d="m21 21-4.35-4.35" />
                  <line x1="11" y1="8" x2="11" y2="14" />
                  <line x1="8" y1="11" x2="14" y2="11" />
                </svg>
              </button>
              <button 
                className="toolbar-button"
                title={t('zoomOut')}
                onClick={() => {
                  if (currentCategory === 'uml') {
                    window.dispatchEvent(new CustomEvent('uml-zoom-out'));
                  } else if (currentCategory === 'rdf') {
                    window.dispatchEvent(new CustomEvent('rdf-zoom-out'));
                  }
                }}
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
                  <circle cx="11" cy="11" r="8" />
                  <path d="m21 21-4.35-4.35" />
                  <line x1="8" y1="11" x2="14" y2="11" />
                </svg>
              </button>
              <button 
                className="toolbar-button"
                title={t('resetView')}
                onClick={() => {
                  if (currentCategory === 'uml') {
                    window.dispatchEvent(new CustomEvent('uml-reset-view'));
                  } else if (currentCategory === 'rdf') {
                    window.dispatchEvent(new CustomEvent('rdf-reset-view'));
                  }
                }}
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
                  <polyline points="1 4 1 10 7 10" />
                  <polyline points="23 20 23 14 17 14" />
                  <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
                </svg>
              </button>
              
              {/* Fullscreen Toggle */}
              <button 
                className={`toolbar-button ${isFullscreen ? 'toolbar-button--active' : ''}`}
                title={isFullscreen ? (language === 'nl' ? 'Volledig scherm afsluiten' : 'Exit fullscreen') : (language === 'nl' ? 'Volledig scherm' : 'Fullscreen')}
                onClick={toggleFullscreen}
              >
                {isFullscreen ? <Minimize size={18} /> : <Maximize size={18} />}
              </button>
              
              {/* Layout Dropdown */}
              <div className="dropdown" ref={layoutDropdownRef}>
                <button 
                  className="toolbar-button"
                  onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}
                  title={`${language === 'nl' ? 'Huidig' : 'Current'}: ${rdfAdvancedLayout || (layoutType === 'force' ? 'Force' : 'Grid')}`}
                >
                  {rdfAdvancedLayout ? (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
                      <circle cx="12" cy="12" r="10" />
                      <path d="M12 2a10 10 0 0 1 0 20" />
                      <line x1="12" y1="12" x2="12" y2="6" />
                    </svg>
                  ) : layoutType === 'force' ? (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
                      <circle cx="6" cy="6" r="3" />
                      <circle cx="18" cy="6" r="3" />
                      <circle cx="18" cy="18" r="3" />
                      <circle cx="6" cy="18" r="3" />
                    </svg>
                  ) : (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
                      <rect x="3" y="3" width="7" height="7" />
                      <rect x="14" y="3" width="7" height="7" />
                      <rect x="14" y="14" width="7" height="7" />
                      <rect x="3" y="14" width="7" height="7" />
                    </svg>
                  )}
                  {t('layout')}
                  <ChevronDown size={14} />
                </button>
                
                {layoutDropdownOpen && (
                  <div className="dropdown-menu dropdown-menu--layout">
                    {/* Basic layouts - shown for both UML and RDF */}
                    <button 
                      className={`dropdown-item ${!rdfAdvancedLayout && layoutType === 'force' ? 'dropdown-item--active' : ''}`}
                      onClick={() => selectLayout('force')}
                    >
                      <span className="dropdown-item-title">{t('forceLayout')}</span>
                      <span className="dropdown-item-desc">{t('forceDesc')}</span>
                    </button>
                    
                    <div className="dropdown-divider"></div>
                    <div className="dropdown-header">{t('gridLayoutOptions')}</div>
                    
                    <button 
                      className={`dropdown-item ${!rdfAdvancedLayout && layoutType === 'dagre' && dagreDirection === 'TB' && dagreRanker === 'network-simplex' ? 'dropdown-item--active' : ''}`}
                      onClick={() => selectLayout('dagre', 'TB', 'network-simplex')}
                    >
                      <span className="dropdown-item-title">{t('hierarchicalTB')}</span>
                      <span className="dropdown-item-desc">{t('hierarchicalTBDesc')}</span>
                    </button>
                    
                    <button 
                      className={`dropdown-item ${!rdfAdvancedLayout && layoutType === 'dagre' && dagreDirection === 'LR' && dagreRanker === 'network-simplex' ? 'dropdown-item--active' : ''}`}
                      onClick={() => selectLayout('dagre', 'LR', 'network-simplex')}
                    >
                      <span className="dropdown-item-title">{t('hierarchicalLR')}</span>
                      <span className="dropdown-item-desc">{t('hierarchicalLRDesc')}</span>
                    </button>
                    
                    <button 
                      className={`dropdown-item ${!rdfAdvancedLayout && layoutType === 'dagre' && dagreRanker === 'tight-tree' ? 'dropdown-item--active' : ''}`}
                      onClick={() => selectLayout('dagre', 'TB', 'tight-tree')}
                    >
                      <span className="dropdown-item-title">{t('adaptiveTightTree')}</span>
                      <span className="dropdown-item-desc">{t('adaptiveTightTreeDesc')}</span>
                    </button>
                    
                    <button 
                      className={`dropdown-item ${!rdfAdvancedLayout && layoutType === 'dagre' && dagreRanker === 'longest-path' ? 'dropdown-item--active' : ''}`}
                      onClick={() => selectLayout('dagre', 'TB', 'longest-path')}
                    >
                      <span className="dropdown-item-title">{t('adaptiveLongestPath')}</span>
                      <span className="dropdown-item-desc">{t('adaptiveLongestPathDesc')}</span>
                    </button>
                    
                    {/* Show UML-specific advanced layouts only for UML mode */}
                    {currentCategory === 'uml' && (
                      <>
                        <div className="dropdown-divider"></div>
                        <div className="dropdown-header">{t('advancedLayoutOptions')}</div>
                        
                        <button 
                          className={`dropdown-item ${layoutType === 'elk' && elkAlgorithm === 'layered' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectLayout('elk', undefined, undefined, 'layered')}
                        >
                          <span className="dropdown-item-title">{t('elkLayered')}</span>
                          <span className="dropdown-item-desc">{t('elkLayeredDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${layoutType === 'elk' && elkAlgorithm === 'mrtree' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectLayout('elk', undefined, undefined, 'mrtree')}
                        >
                          <span className="dropdown-item-title">{t('elkTree')}</span>
                          <span className="dropdown-item-desc">{t('elkTreeDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${layoutType === 'circular' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectLayout('circular')}
                        >
                          <span className="dropdown-item-title">{t('circular')}</span>
                          <span className="dropdown-item-desc">{t('circularDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${layoutType === 'radial' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectLayout('radial')}
                        >
                          <span className="dropdown-item-title">{t('radial')}</span>
                          <span className="dropdown-item-desc">{t('radialDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${layoutType === 'clustered' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectLayout('clustered')}
                        >
                          <span className="dropdown-item-title">{t('clustered')}</span>
                          <span className="dropdown-item-desc">{t('clusteredDesc')}</span>
                        </button>
                      </>
                    )}
                    
                    {/* Show RDF-specific advanced layouts only for RDF mode */}
                    {currentCategory === 'rdf' && (
                      <>
                        <div className="dropdown-divider"></div>
                        <div className="dropdown-header">{t('rdfAdvancedLayouts')}</div>
                        
                        <button 
                          className={`dropdown-item ${rdfAdvancedLayout === 'chord' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectRdfAdvancedLayout('chord')}
                        >
                          <span className="dropdown-item-title">{t('chordDiagram')}</span>
                          <span className="dropdown-item-desc">{t('chordDiagramDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${rdfAdvancedLayout === 'radial-tree' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectRdfAdvancedLayout('radial-tree')}
                        >
                          <span className="dropdown-item-title">{t('radialTreeLayout')}</span>
                          <span className="dropdown-item-desc">{t('radialTreeLayoutDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${rdfAdvancedLayout === 'edge-bundling' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectRdfAdvancedLayout('edge-bundling')}
                        >
                          <span className="dropdown-item-title">{t('edgeBundling')}</span>
                          <span className="dropdown-item-desc">{t('edgeBundlingDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${rdfAdvancedLayout === 'pack' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectRdfAdvancedLayout('pack')}
                        >
                          <span className="dropdown-item-title">{t('packLayout')}</span>
                          <span className="dropdown-item-desc">{t('packLayoutDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${rdfAdvancedLayout === 'sunburst' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectRdfAdvancedLayout('sunburst')}
                        >
                          <span className="dropdown-item-title">{t('sunburstLayout')}</span>
                          <span className="dropdown-item-desc">{t('sunburstLayoutDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${!rdfAdvancedLayout && layoutType === 'circular' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectLayout('circular')}
                        >
                          <span className="dropdown-item-title">{t('circular')}</span>
                          <span className="dropdown-item-desc">{t('circularDesc')}</span>
                        </button>
                        
                        <button 
                          className={`dropdown-item ${!rdfAdvancedLayout && layoutType === 'radial' ? 'dropdown-item--active' : ''}`}
                          onClick={() => selectLayout('radial')}
                        >
                          <span className="dropdown-item-title">{t('radial')}</span>
                          <span className="dropdown-item-desc">{t('radialDesc')}</span>
                        </button>
                      </>
                    )}
                    
                    <div className="dropdown-divider"></div>
                    <a 
                      href="/docs/UML_LAYOUT_OPTIONS.md" 
                      target="_blank"
                      rel="noopener noreferrer"
                      className="dropdown-item dropdown-item--link"
                      onClick={() => setLayoutDropdownOpen(false)}
                    >
                      <HelpCircle size={16} />
                      <span className="dropdown-item-title">{t('layoutHelp')}</span>
                    </a>
                  </div>
                )}
              </div>
            </div>
            
            <div className="toolbar-right">
              <span className="toolbar-title">{fileName}</span>
              
              {/* Export Dropdown */}
              <div className="dropdown" ref={exportDropdownRef}>
                <button 
                  className="toolbar-button toolbar-button--primary"
                  onClick={() => setExportDropdownOpen(!exportDropdownOpen)}
                >
                  <Download size={18} />
                  {t('export')}
                  <ChevronDown size={14} />
                </button>
                
                {exportDropdownOpen && (
                  <div className="dropdown-menu">
                    <button className="dropdown-item" onClick={handleExportPNG}>
                      <Image size={16} />
                      <span className="dropdown-item-title">{t('exportAsPng')}</span>
                    </button>
                    <button className="dropdown-item" onClick={handleExportSVG}>
                      <FileCode size={16} />
                      <span className="dropdown-item-title">{t('exportAsSvg')}</span>
                    </button>
                    <div className="dropdown-divider"></div>
                    <button className="dropdown-item" onClick={handleDownloadSource}>
                      <Code size={16} />
                      <span className="dropdown-item-title">{t('downloadSource')}</span>
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

{/* Loading State */}
        {isLoading && (
          <div className="loading-overlay">
            <div className="spinner" />
            <p>{t('loading')}</p>
          </div>
        )}

{/* Error State */}
        {(parserError || umlError) && (
          <div className="error-message">
            <h2>{t('error')}</h2>
            <div className="error-details">
              {(parserError?.message || umlError || '').split('\n').map((line, i) => (
                <p key={i}>{line}</p>
              ))}
            </div>
          </div>
        )}

{/* Welcome State (no content) */}
        {!isLoading && !parserError && !umlError && !hasContent && (
          <div className="welcome-message">
            <h2>{t('readyToVisualize')}</h2>
            <p>{t('welcomeDesc')}</p>
            <div className="features">
              <h3>{t('supportedFormats')}</h3>
              <ul>
                <li><strong>RDF:</strong> Turtle (.ttl), N-Triples (.nt), JSON-LD (.jsonld)</li>
                <li><strong>UML:</strong> Mermaid (.mmd), PlantUML (.puml), GraphViz (.dot)</li>
              </ul>
              <h3>{t('features')}</h3>
              <ul>
                <li>{t('featureInteractive')}</li>
                <li>{t('featureLayouts')}</li>
                <li>{t('featureFilter')}</li>
                <li>{t('featureExport')}</li>
                <li>{t('featureDrag')}</li>
                <li>{t('featureClick')}</li>
              </ul>
            </div>
          </div>
        )}

{/* RDF Visualization */}
        {!isLoading && !parserError && hasRdfContent && currentCategory === 'rdf' && (
          rdfAdvancedLayout ? (
            // Advanced RDF layouts (chord, radial-tree, edge-bundling, pack, sunburst)
            <RdfAdvancedLayout
              nodes={filteredNodes}
              links={filteredLinks}
              layoutType={rdfAdvancedLayout}
              width={1200}
              height={800}
              onNodeClick={handleNodeClick}
              onNodeHover={setHoveredNode}
              selectedNode={selectedNode}
              language={language}
            />
          ) : (
            // Basic RDF layouts (force, hierarchical, circular, radial)
            <ForceDirectedGraph
              nodes={filteredNodes}
              links={filteredLinks}
              width={1200}
              height={800}
              layoutType={mapToRdfLayout(layoutType, dagreDirection)}
              selectedNode={selectedNode}
              onNodeClick={handleNodeClick}
              onLinkClick={handleLinkClick}
              onNodeHover={setHoveredNode}
              className="graph-visualization"
            />
          )
        )}

{/* RDF Node Details Popup */}
        {selectedNode && currentCategory === 'rdf' && (
          <RdfNodeDetailsPanel
            node={selectedNode}
            links={links}
            nodes={nodes}
            onClose={() => setSelectedNode(null)}
            onNodeClick={(node) => setSelectedNode(node)}
            language={language}
          />
        )}

{/* UML Visualization */}
        {!isLoading && !umlError && hasUmlContent && currentCategory === 'uml' && (
          <div className="uml-canvas">
            <UMLVisualization 
              diagram={displayUmlDiagram || umlDiagram!} 
              width={1400} 
              height={900}
              layoutType={layoutType}
              dagreDirection={dagreDirection}
              dagreRanker={dagreRanker}
              elkAlgorithm={elkAlgorithm}
            />
          </div>
        )}

</main>
    </div>
  );
}