hlsv 1.0.0 → 2.0.0

data/public/js/results.js

@@ -0,0 +1,240 @@
+/*
+  Copyright (c) 2026 AdClin
+  Licensed under the GNU Affero General Public License v3.0 or later.
+  See the LICENSE file for details.
+*/
+
+import { escapeHtml } from './utils.js';
+
+export async function loadResults() {
+  const btnLoad = document.getElementById('btn-load-results');
+  const btnRefresh = document.getElementById('btn-refresh-results');
+  const resultsList = document.getElementById('results-list');
+
+  // Hide Load button and show Refresh button
+  btnLoad.style.display = 'none';
+  btnRefresh.style.display = 'inline-block';
+  resultsList.style.display = 'block';
+
+  await refreshResults();
+}
+
+// Refresh results list
+let isRefreshing = false;
+
+export async function refreshResults() {
+  if (isRefreshing) return;
+  isRefreshing = true;
+
+  const resultsList = document.getElementById('results-list');
+  resultsList.innerHTML = '<p style="color: #666;">⏳ Loading files...</p>';
+
+  try {
+    const response = await fetch('/results');
+    const data = await response.json();
+
+    if (!data.success) {
+      resultsList.innerHTML = '<p style="color: #dc3545;">❌ Error loading results</p>';
+      return;
+    }
+
+    const tree = data.tree;
+
+    // Check if there are files or folders
+    const hasFiles = tree.files && tree.files.length > 0;
+    const hasFolders = tree.folders && Object.keys(tree.folders).length > 0;
+
+    if (hasFiles || hasFolders) {
+      let html = '<div class="file-tree">';
+      html += buildTree(tree, '', true);
+      html += '</div>';
+
+      resultsList.innerHTML = html;
+    } else {
+      resultsList.innerHTML = '<p style="color: #666;">No result files yet. Run an analysis to generate files.</p>';
+    }
+  } catch (error) {
+    console.error('Error:', error);
+    resultsList.innerHTML = '<p style="color: #dc3545;">❌ Error loading files: ' + error.message + '</p>';
+  } finally {
+    isRefreshing = false;
+  }
+}
+
+// Build HTML tree recursively
+
+export function buildTree(node, parentPath, isRoot = false) {
+  let html = '';
+
+  // Display folders
+  if (node.folders) {
+    const folders = Object.keys(node.folders).sort();
+    folders.forEach(folderName => {
+      const dirPath = parentPath ? `${parentPath}/${folderName}` : folderName;
+      const subFolder = node.folders[folderName];
+      const id = 'folder-' + dirPath.replace(/[\/\s]/g, '-');
+
+      const fileCount = subFolder.files ? subFolder.files.length : 0;
+      const folderCount = subFolder.folders ? Object.keys(subFolder.folders).length : 0;
+
+      // Check if folder contains CSV files
+      const hasCsvFiles = subFolder.files && subFolder.files.some(f => f.extension === '.csv');
+
+      // Check if this is a first-level folder (isRoot is true and no parent path)
+      const isFirstLevel = isRoot && !parentPath;
+
+      // The study is always the first path segment, regardless of how deep
+      // this folder is (e.g. "essai/duplicates" -> "essai") - the Excel
+      // export is generated per-study (all datasets with duplicates in one
+      // workbook), not per-folder.
+      const study = dirPath.split('/')[0];
+
+      html += `
+        <div class="folder-item">
+          <div class="folder-header" onclick="toggleFolder('${id}')" role="button" tabindex="0" aria-expanded="false" aria-controls="${id}">
+            <span class="folder-icon" id="${id}-icon" aria-hidden="true">📁</span>
+            <strong>${escapeHtml(folderName)}</strong>
+            <span style="color: #666; font-size: 0.9em; margin-left: 10px;">
+              (${fileCount} file${fileCount !== 1 ? 's' : ''}, ${folderCount} folder${folderCount !== 1 ? 's' : ''})
+            </span>
+            <div class="folder-actions">
+              ${isFirstLevel ? `
+                <button onclick="event.stopPropagation(); viewHtmlReport('${escapeHtml(folderName)}')"
+                        class="btn-secondary"
+                        aria-label="View HTML report">
+                  👁️ View HTML Report
+                </button>
+                <button onclick="event.stopPropagation(); downloadFolderAsZip('${escapeHtml(dirPath)}')"
+                        class="btn-primary"
+                        aria-label="Download folder as ZIP">
+                  📦 Download as ZIP
+                </button>
+              ` : ''}
+              ${hasCsvFiles ? `
+                <button onclick="event.stopPropagation(); downloadExcelStudy('${escapeHtml(study)}')"
+                        class="btn-primary"
+                        aria-label="Download all datasets with duplicates as Excel">
+                  📊 Download as Excel
+                </button>
+              ` : ''}
+            </div>
+          </div>
+          <div class="folder-content" id="${id}" style="display: none; margin-left: 20px;" role="region">
+            ${buildTree(subFolder, dirPath, false)}
+          </div>
+        </div>
+      `;
+    });
+  }
+
+  // Display files
+  if (node.files && node.files.length > 0) {
+    node.files.forEach(file => {
+      const icon = getIconForExtension(file.extension);
+      const sizeKb = (file.size / 1024).toFixed(2);
+
+      html += `
+        <div class="file-item">
+          <div class="file-info">
+            <div class="file-name">${icon} ${escapeHtml(file.name)}</div>
+            <div class="file-meta">
+              ${sizeKb} KB • ${file.date}
+            </div>
+          </div>
+          <div>
+            ${file.extension === '.html' ?
+              `<button onclick="openFile('${escapeHtml(file.path)}')" class="btn-secondary" style="margin-right: 5px;" aria-label="Open ${escapeHtml(file.name)}">👁️ Open</button>
+               <button onclick="downloadHtmlAsWord('${escapeHtml(file.path)}')" class="btn-secondary" aria-label="Download as Word">📄 Word</button>` :
+              `<button onclick="download('${escapeHtml(file.path)}')" class="btn-primary" aria-label="Download ${escapeHtml(file.name)}">⬇️ Download</button>`}
+          </div>
+        </div>
+      `;
+    });
+  }
+
+  return html;
+}
+
+// Toggle folder display
+
+export function toggleFolder(id) {
+  const folder = document.getElementById(id);
+  const icon = document.getElementById(id + '-icon');
+  const header = folder.previousElementSibling;
+
+  if (folder && icon) {
+    const isExpanded = folder.style.display !== 'none';
+    folder.style.display = isExpanded ? 'none' : 'block';
+    icon.textContent = isExpanded ? '📁' : '📂';
+    if (header) {
+      header.setAttribute('aria-expanded', !isExpanded);
+    }
+  }
+}
+
+// Get icon based on extension
+
+export function getIconForExtension(ext) {
+  const icons = {
+    '.html': '🌐',
+    '.csv': '📊',
+    '.xlsx': '📗',
+    '.xls': '📗',
+    '.pdf': '📕',
+    '.txt': '📄',
+    '.md': '📄',
+    '.yaml': '⚙️',
+    '.yml': '⚙️'
+  };
+  return icons[ext.toLowerCase()] || '📄';
+}
+
+// Download a file (forces the browser to save it, even for types normally shown inline like .html/.pdf)
+
+export function download(filePath) {
+  window.location.href = '/download/' + encodeURIComponent(filePath) + '?download=1';
+}
+
+// Open HTML file in new tab (viewed inline, not downloaded)
+
+export function openFile(filePath) {
+  window.open('/download/' + encodeURIComponent(filePath), '_blank', 'noopener,noreferrer');
+}
+
+// View the HTML report for a study, generating it on demand if needed.
+// `study` is the top-level folder name in hlsv_results/, which matches the
+// key used by AnalysisRegistry - this works as soon as the study folder
+// exists, even before the html file itself has ever been generated.
+
+export function viewHtmlReport(study) {
+  window.open('/report/' + encodeURIComponent(study) + '/html', '_blank', 'noopener,noreferrer');
+}
+
+// Utility Functions
+
+// Duration in milliseconds
+
+export function downloadFolderAsZip(dirPath) {
+  window.location.href = '/download_zip_dir/' + encodeURIComponent(dirPath);
+}
+
+// Download all datasets with duplicates for a study as one Excel workbook.
+// This is per-study, not per-folder - sv.report.excel aggregates every
+// dataset that has duplicates into a single workbook, wherever in the
+// study's tree the button was clicked.
+
+export function downloadExcelStudy(study) {
+  window.location.href = '/report/' + encodeURIComponent(study) + '/excel';
+}
+
+// Download HTML report as Word document.
+// `filePath` is relative to hlsv_results/, e.g. "MyStudy/myStudy_high_level_check.html" -
+// its first segment is the study name, which is the key used by AnalysisRegistry.
+
+export function downloadHtmlAsWord(filePath) {
+  const study = filePath.split('/')[0];
+  window.location.href = '/report/' + encodeURIComponent(study) + '/docx';
+  setTimeout(refreshResults, 1500); // let the file appear before refreshing the tree
+}
+
+// Download HTML file as PDF

data/public/js/utils.js

@@ -0,0 +1,57 @@
+/*
+  Copyright (c) 2026 AdClin
+  Licensed under the GNU Affero General Public License v3.0 or later.
+  See the LICENSE file for details.
+*/
+
+export function formatDuration(milliseconds) {
+  if (milliseconds < 1000) {
+    return `${Math.round(milliseconds)} ms`;
+  }
+
+  const totalSeconds = milliseconds / 1000;
+
+  if (totalSeconds < 60) {
+    return `${totalSeconds.toFixed(2)} s`;
+  }
+
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${minutes} min ${seconds.toFixed(2)} s`;
+}
+
+// Show message with auto-dismiss
+// Broadcasts to every element sharing the given data-message-group (not a
+// single id) so the same status can be shown in more than one place at
+// once - e.g. config-issue now appears both next to the top quick actions
+// and next to the bottom button group, since with two button rows the
+// user might be looking at either one.
+export function showMessage(groupName, type, message, duration = 3000) {
+  const targets = document.querySelectorAll(`[data-message-group="${groupName}"]`);
+  targets.forEach(msgDiv => {
+    msgDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
+  });
+
+  if (duration > 0) {
+    setTimeout(() => targets.forEach(msgDiv => msgDiv.innerHTML = ''), duration);
+  }
+}
+
+// Escape HTML to prevent XSS
+
+export function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// Keyboard accessibility for folder toggles
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    if (e.target.classList.contains('folder-header')) {
+      e.preventDefault();
+      e.target.click();
+    }
+  }
+});

data/views/csv_view.erb

@@ -13,12 +13,12 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><%= @ds_name %>: Duplicate Analysis</title>
-  <link rel="stylesheet" href="/styles_csv.css">
+  <link rel="stylesheet" href="/css/styles_csv.css">
 </head>
 <body>
 
 <!-- Header with title and logo -->
-<header class="csv-header">
+<header class="app-header">
   <h1>Duplicates in <%= @ds_name %> for <%= @type %></h1>
   <div class="company-branding">
       <a href="https://adclin.com" target="_blank" rel="noopener noreferrer" class="company-link">
@@ -27,15 +27,7 @@
   </div>
 </header>
 
-<nav class="actions" role="navigation" aria-label="File actions">
-  <a class="btn-export"
-     href="/excel_export?file=<%= URI.encode_www_form_component(params[:file]) %>&last_valid_key=<%= URI.encode_www_form_component(@last_valid_key.join(',')) %>"
-     aria-label="Export to Excel">
-    ⬇️ Export to Excel
-  </a>
-</nav>
-
-<section class="info-section" role="region" aria-label="Information">
+<section class="info" role="region" aria-label="Information">
   <p>This table displays the detected duplicates, grouped according to the last key tested. 
      The duplicate groups are represented by a number in the "No" column. 
      Alternating colors are used to distinguish them visually.</p>
@@ -44,6 +36,13 @@
   <% unless @last_valid_key.empty? %>
     <p>Last key tested: <strong><%= @last_valid_key.join(', ') %></strong></p>
   <% end %>
+  <% if @study %>
+    <a class="btn-quick-action btn-quick-primary"
+       href="<%= export_csv_excel_url(file: @file, study: @study, dataset: @ds_name, last_valid_key: @last_valid_key) %>"
+       aria-label="Export as Excel">
+      📊 Export as Excel
+    </a>
+  <% end %>
 </section>
 
 <div class="table-container" role="region" aria-label="Duplicates table" tabindex="0">
@@ -72,7 +71,7 @@
 </div>
 
 <!-- Footer with copyright and license on same line -->
-<footer class="csv-footer">
+<footer class="app-footer">
   <div class="footer-content">
       <span class="copyright">© 1999-2026 AdClin. All rights reserved.</span>
     <span class="separator">•</span>

data/views/index.erb

@@ -13,7 +13,8 @@
   <title>High Level Check on SDTM Packages</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="/styles.css">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/css/styles.css">
 </head>
 <body>
   <!-- Header with title and logo -->
@@ -32,7 +33,29 @@
 
   <!-- Configuration -->
   <div class="container">
-    <h2>⚙️ Configuration</h2>
+    <div class="config-header-row">
+      <h2>⚙️ Configuration</h2>
+      <div class="quick-actions">
+        <button type="button" class="btn-quick-action btn-quick-primary" onclick="configSave()" aria-label="Save current configuration">
+          💾 Save
+        </button>
+        <button type="button" class="btn-quick-action" onclick="fullConfigViewer()" aria-label="View current configuration">
+          📄 View Current
+        </button>
+        <button type="button" class="btn-quick-action btn-quick-danger" onclick="clearFields()" aria-label="Clear all fields">
+          🗑️ Clear
+        </button>
+        <button type="button" class="btn-quick-action" onclick="loadDefaultConfig()" aria-label="Load default configuration">
+          📋 Load Default
+        </button>
+        <button type="button" class="btn-quick-action" onclick="loadExistingConfig()" aria-label="Load an existing configuration file">
+          📂 Load Existing
+        </button>
+      </div>
+    </div>
+
+    <div data-message-group="config-issue" role="status" aria-live="polite"></div>
+
     <h3>General Information</h3>
 
     <div class="config-grid">
@@ -50,13 +73,19 @@
     </div>
     
     <div class="form-group">
-      <label for="data_directory">Datasets Directory <span class="required">*</span></label>
+      <div class="form-label-row">
+        <label for="data_directory">Datasets Directory <span class="required">*</span></label>
+        <button type="button" class="btn-browse-link" onclick="openBrowser('data_directory', 'directory')" aria-label="Browse for datasets directory">📁 Browse</button>
+      </div>
       <input type="text" id="data_directory" value="<%= @config['data_directory'] %>" required aria-required="true">
       <small>Path to the directory containing the <strong>xpt</strong> datasets to analyze</small>
     </div>
     
     <div class="form-group">
-      <label for="define_path">Path to define.xml <span class="required">*</span></label>
+      <div class="form-label-row">
+        <label for="define_path">Path to define.xml <span class="required">*</span></label>
+        <button type="button" class="btn-browse-link" onclick="openBrowser('define_path', 'file', '.xml')" aria-label="Browse for define.xml file">📁 Browse</button>
+      </div>
       <input type="text" id="define_path" value="<%= @config['define_path'] %>" required aria-required="true">
       <small>Enter "-" to skip the define.xml validation part of the analysis</small>
     </div>
@@ -164,24 +193,27 @@
         <input type="text" id="TV_key" value="<%= @config['TV_key'] %>" required aria-required="true">
       </div>
     </div>
-    
+
     <!-- Configuration Management Buttons -->
-    <div class="button-group">
-      <button onclick="sauvegarderConfig()" class="btn-primary" aria-label="Save current configuration">
-        💾 Save Current Configuration
+    <div class="button-group button-group-compact">
+      <button onclick="configSave()" class="btn-primary" aria-label="Save current configuration">
+        💾 Save Configuration
       </button>
-      <button class="btn-secondary" onclick="afficherConfigComplete()" aria-label="View current configuration">
-        📄 View Current Configuration
+      <button class="btn-secondary" onclick="fullConfigViewer()" aria-label="View current configuration">
+        📄 View Configuration
       </button>
-      <button class="btn-danger" onclick="effacerChamps()" aria-label="Clear all fields">
+      <button class="btn-danger" onclick="clearFields()" aria-label="Clear all fields">
         🗑️ Clear All Fields
       </button>
-      <button class="btn-secondary" onclick="chargerDefaut()" aria-label="Load default configuration">
+      <button class="btn-secondary" onclick="loadDefaultConfig()" aria-label="Load default configuration">
         📋 Load Default Configuration
       </button>
+      <button class="btn-secondary" onclick="loadExistingConfig()" aria-label="Load an existing configuration file">
+        📂 Load Existing Configuration
+      </button>
     </div>
 
-    <div id="message-config" role="status" aria-live="polite"></div>
+    <div data-message-group="config-issue" role="status" aria-live="polite"></div>
   </div>
 
   <!-- Processing -->
@@ -195,11 +227,11 @@
       <li>Ad hoc search for a natural key for all datasets</li>
     </ul>
     
-    <button class="btn-success" onclick="lancerTraitement()" id="btn-traiter" aria-label="Start analysis">
+    <button class="btn-success" onclick="startAnalysis()" id="btn-process" aria-label="Start analysis">
       🚀 Start Analysis
     </button>
     
-    <div id="status-traitement" role="status" aria-live="polite"></div>
+    <div id="analysis-status" role="status" aria-live="polite"></div>
   </div>
 
   <!-- Results -->
@@ -207,16 +239,16 @@
     <h2>📁 Result Files</h2>
 
     <div class="button-group">
-      <button class="btn-secondary" onclick="chargerResultats()" id="btn-load-results" aria-label="Load results">
+      <button class="btn-secondary" onclick="loadResults()" id="btn-load-results" aria-label="Load results">
         📂 Load Results
       </button>
-      <button class="btn-secondary" onclick="rafraichirResultats()" id="btn-refresh-results" style="display: none;" aria-label="Refresh results">
+      <button class="btn-secondary" onclick="refreshResults()" id="btn-refresh-results" style="display: none;" aria-label="Refresh results">
         🔄 Refresh
       </button>
       <p>Browse files generated in the <code>hlsv_results/</code> directory</p>
     </div>
 
-    <div id="liste-resultats" style="display: none;" role="region" aria-label="Results list"></div>
+    <div id="results-list" style="display: none;" role="region" aria-label="Results list"></div>
   </div>
 
   <!-- Footer with copyright and license on same line -->
@@ -228,6 +260,25 @@
     </div>
   </footer>
 
-  <script src="/app.js"></script>
+  <!-- File/Directory Browser Modal -->
+  <div id="browse-modal" class="modal-overlay" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="browse-modal-title">
+    <div class="modal-box">
+      <div class="modal-header">
+        <h3 id="browse-modal-title">📁 Select a directory</h3>
+        <button type="button" class="modal-close" onclick="closeBrowser()" aria-label="Close">✖</button>
+      </div>
+      <div class="modal-path-bar">
+        <button type="button" id="browse-up" onclick="browseUp()" aria-label="Go to parent directory">⬆️</button>
+        <input type="text" id="browse-current-path" readonly aria-label="Current directory">
+      </div>
+      <div id="browse-list" class="modal-list" role="listbox" aria-label="Directory contents"></div>
+      <div class="modal-footer">
+        <button type="button" class="btn-secondary" onclick="closeBrowser()">Cancel</button>
+        <button type="button" class="btn-primary" id="browse-select-btn" onclick="confirmBrowseSelection()">Select this folder</button>
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="/js/app.js"></script>
 </body>
 </html>