Ajout tableau interactif 'Où faire quoi' avec recherche et tri

docs/acces/courses.md

@@ -1,3 +1,8 @@
+---
+title: "Pour les formations"
+sidebar_position: 2
+---
+
 # Pour les formations
 
 (page en cours de création)

docs/acces/ou-faire-quoi.mdx

@@ -0,0 +1,50 @@
+---
+title: "Où faire quoi"
+sidebar_position: 3
+---
+
+import SearchableSortableTable from '@site/src/components/SearchableSortableTable';
+
+# Où faire quoi
+
+Ce tableau vous permet de trouver la machine MesoNET la plus adaptée à vos besoins.
+
+<SearchableSortableTable
+  title="Ressources MesoNET par cas d'usage"
+  columns={[
+    { key: 'usage', label: 'Cas d\'usage typique' },
+    { key: 'besoin', label: 'Besoin' },
+    { key: 'ressource', label: 'Ressource MesoNET à envisager' }
+  ]}
+  data={[
+    { usage: 'IA générative, entraînement de réseaux de neurones, dynamique moléculaire GPU, chimie quantique accélérée, codes CUDA multi-GPU', besoin: 'GPU NVIDIA H100', ressource: 'Hedy – Marseille' },
+    { usage: 'Grands modèles IA, calculs nécessitant plus de 80 Go de mémoire par GPU, simulations scientifiques GPU de grande taille', besoin: 'GPU NVIDIA H200 / très grande mémoire GPU', ressource: 'Arctic – Rouen' },
+    { usage: 'Deep learning, calcul CUDA, simulation moléculaire, traitement d\'images, prototypage GPU', besoin: 'GPU NVIDIA A100', ressource: 'Juliet – Reims, Arctic – Rouen, Turpan – Toulouse' },
+    { usage: 'Portage CUDA→HIP/ROCm, validation de portabilité GPU, développement de codes indépendants de NVIDIA', besoin: 'GPU AMD MI210 / ROCm', ressource: 'Vesta – Strasbourg ou Arctic – Rouen' },
+    { usage: 'CFD, mécanique, climat, chimie quantique CPU, dynamique moléculaire, codes MPI/OpenMP massivement parallèles', besoin: 'Gros calcul CPU AMD x86', ressource: 'Zen – Lille ou Arctic – Rouen' },
+    { usage: 'Applications HPC CPU classiques, validation et optimisation sur architecture Intel', besoin: 'CPU Intel x86', ressource: 'Phileas – Nantes' },
+    { usage: 'Assemblage de très grandes matrices, traitement de gros jeux de données en mémoire, calculs nécessitant plusieurs To de RAM', besoin: 'Très grosse mémoire RAM', ressource: 'Zen – Lille, Phileas – Nantes, éventuellement Arctic' },
+    { usage: 'PyTorch, TensorFlow, vision par ordinateur, réseaux de neurones, modèles génératifs, entraînement multi-GPU', besoin: 'IA / Deep Learning', ressource: 'Hedy, Juliet, Arctic, Turpan' },
+    { usage: 'LLM, modèles multimodaux, modèles avec très grands tenseurs ou gros batches', besoin: 'Très gros modèles IA', ressource: 'Arctic H200 – Rouen' },
+    { usage: 'OpenFOAM, aérodynamique, écoulements, thermique, mécanique numérique', besoin: 'CFD / mécanique des fluides', ressource: 'Arctic – Rouen' },
+    { usage: 'GROMACS, LAMMPS, AMBER, biomolécules, matériaux, liquides, surfaces', besoin: 'Dynamique moléculaire / simulation atomistique', ressource: 'Arctic – Rouen, Turpan – Toulouse' },
+    { usage: 'WRF, simulations atmosphériques, climat régional', besoin: 'Modélisation climat / météo', ressource: 'Arctic – Rouen' },
+    { usage: 'Développement HIP, OpenACC, OpenMP target, SYCL/OpenCL et comparaison de performances GPU', besoin: 'Développement multi-architecture NVIDIA + AMD', ressource: 'Arctic – Rouen' },
+    { usage: 'Tester la portabilité d\'un code x86 vers ARM, compiler et optimiser un code HPC pour ARM', besoin: 'Développement / portage vers CPU ARM', ressource: 'Turpan – Toulouse' },
+    { usage: 'Codes couplant calcul CPU ARM et accélération GPU, benchmarks d\'architectures alternatives', besoin: 'Calcul hybride ARM + NVIDIA A100', ressource: 'Turpan – Toulouse' },
+    { usage: 'Profilage, étude du scaling MPI/OpenMP, optimisation mémoire et vectorisation', besoin: 'Optimisation / benchmark de code HPC', ressource: 'Turpan – Toulouse' },
+    { usage: 'Codes avec grandes boucles numériques régulières, stencil, algèbre linéaire, calcul scientifique fortement vectorisable', besoin: 'Calcul vectoriel', ressource: 'Boréale' },
+    { usage: 'CFD, méthodes numériques sur maillages, solveurs itératifs, applications manipulant beaucoup de données par opération', besoin: 'Code limité par la bande passante mémoire', ressource: 'Boréale' },
+    { usage: 'Portage de codes Fortran/C/C++ HPC vers NEC SX-Aurora, étude de stratégies de vectorisation', besoin: 'MPI/OpenMP sur accélérateur vectoriel', ressource: 'Boréale' },
+    { usage: 'DFT, matériaux, structure électronique lorsque le code bénéficie de la vectorisation', besoin: 'Quantum ESPRESSO / calcul matériaux vectorisé', ressource: 'Boréale' },
+    { usage: 'Développement et simulation de circuits quantiques, algorithmes variationnels, hybridation calcul classique/quantique', besoin: 'Calcul quantique / simulation quantique', ressource: 'QLM MesoNET' },
+    { usage: 'Créer son propre environnement Ubuntu/Debian, installer un logiciel non disponible sur les clusters, conserver un environnement persistant', besoin: 'Machines virtuelles CPU/GPU personnalisées', ressource: 'Nova-Cloud – Grenoble' },
+    { usage: 'Pipelines de données, analyses nécessitant des services persistants, traitements CPU ou GPU personnalisés', besoin: 'Traitement de données', ressource: 'Nova-Cloud – Grenoble' },
+    { usage: 'Héberger une interface web scientifique, une API, un portail de résultats ou un service associé à un projet', besoin: 'Serveur web / service scientifique', ressource: 'Nova-Cloud – Grenoble' },
+    { usage: 'GitLab Runner, compilation et tests automatiques, validation multi-environnements', besoin: 'CI/CD / développement logiciel scientifique', ressource: 'Nova-Cloud – Grenoble' },
+    { usage: 'Calcul paramétrique, campagnes de nombreux petits jobs, environnement reproductible', besoin: 'HPC/HTC dans une VM', ressource: 'Nova-Cloud – Grenoble' },
+    { usage: 'Visualisation de volumes, résultats CFD, molécules, matériaux, post-traitement graphique distant', besoin: 'Visualisation scientifique', ressource: 'Hedy, Phileas, Juliet' },
+    { usage: 'Initiation à Slurm, MPI, OpenMP, programmation parallèle, TP numériques', besoin: 'TP / formation HPC CPU', ressource: 'Zen, Phileas, Arctic' },
+    { usage: 'CUDA, PyTorch/TensorFlow, initiation GPU, TP IA', besoin: 'TP / formation GPU / IA', ressource: 'Arctic, Juliet, Turpan' }
+  ]}
+/>

docs/acces/projets.md

@@ -1,6 +1,6 @@
 ---
 title: "Créer et gérer des projets"
-sidebar_position: 3
+sidebar_position: 5
 ---
 
 :::info

docs/acces/ssh.md

@@ -1,6 +1,6 @@
 ---
 title: "Gérer ses clés SSH"
-sidebar_position: 2
+sidebar_position: 4
 ---
 
 # Gérer ses clés SSH

src/components/SearchableSortableTable.jsx

@@ -0,0 +1,157 @@
+import React, { useState, useMemo } from 'react';
+
+/**
+ * Composant de tableau avec recherche et tri
+ * @param {Object} props
+ * @param {Array} props.data - Tableau d'objets représentant les lignes
+ * @param {Array} props.columns - Tableau d'objets { key, label } pour les colonnes
+ * @param {string} props.title - Titre du tableau (optionnel)
+ */
+const SearchableSortableTable = ({ data, columns, title }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+
+  // Filtrer les données en fonction du terme de recherche
+  const filteredData = useMemo(() => {
+    if (!searchTerm) return data;
+
+    const lowerSearchTerm = searchTerm.toLowerCase();
+    return data.filter(row => 
+      columns.some(col => {
+        const value = row[col.key];
+        return value && value.toString().toLowerCase().includes(lowerSearchTerm);
+      })
+    );
+  }, [data, searchTerm, columns]);
+
+  // Trier les données
+  const sortedData = useMemo(() => {
+    if (!sortConfig.key) return filteredData;
+
+    return [...filteredData].sort((a, b) => {
+      const aValue = a[sortConfig.key] || '';
+      const bValue = b[sortConfig.key] || '';
+
+      if (aValue < bValue) {
+        return sortConfig.direction === 'asc' ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return sortConfig.direction === 'asc' ? 1 : -1;
+      }
+      return 0;
+    });
+  }, [filteredData, sortConfig]);
+
+  // Gérer le clic sur l'en-tête de colonne pour le tri
+  const requestSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // Obtenir l'icône de tri pour une colonne
+  const getSortIcon = (key) => {
+    if (sortConfig.key !== key) return '↕';
+    return sortConfig.direction === 'asc' ? '↑' : '↓';
+  };
+
+  return (
+    <div style={{ margin: '20px 0' }}>
+      {title && (
+        <h3 style={{ marginBottom: '15px' }}>{title}</h3>
+      )}
+
+      {/* Barre de recherche */}
+      <div style={{ marginBottom: '15px' }}>
+        <input
+          type="text"
+          placeholder="🔍 Rechercher..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          style={{
+            padding: '8px 12px',
+            border: '1px solid #e0e0e0',
+            borderRadius: '4px',
+            width: '100%',
+            maxWidth: '400px',
+            fontSize: '14px',
+          }}
+        />
+      </div>
+
+      {/* Tableau */}
+      <div style={{ overflowX: 'auto' }}>
+        <table style={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          fontSize: '14px',
+        }}>
+          <thead>
+            <tr style={{ backgroundColor: '#f6f8fa' }}>
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  onClick={() => requestSort(col.key)}
+                  style={{
+                    padding: '12px',
+                    textAlign: 'left',
+                    borderBottom: '2px solid #e0e0e0',
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <span>{col.label}</span>
+                    <span style={{ opacity: 0.6 }}>{getSortIcon(col.key)}</span>
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedData.length > 0 ? (
+              sortedData.map((row, index) => (
+                <tr
+                  key={index}
+                  style={{
+                    borderBottom: '1px solid #e0e0e0',
+                    backgroundColor: index % 2 === 0 ? '#ffffff' : '#fafafa',
+                  }}
+                >
+                  {columns.map((col) => (
+                    <td
+                      key={col.key}
+                      style={{
+                        padding: '12px',
+                        textAlign: 'left',
+                      }}
+                      // Permet de trier en cliquant sur une cellule (optionnel)
+                      onClick={() => requestSort(col.key)}
+                    >
+                      {row[col.key]}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={columns.length} style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
+                  Aucun résultat trouvé
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Afficher le nombre de résultats */}
+      <div style={{ marginTop: '10px', color: '#666', fontSize: '13px' }}>
+        {sortedData.length} résultat(s) sur {data.length} au total
+      </div>
+    </div>
+  );
+};
+
+export default SearchableSortableTable;