src/components/ProcessesViewer.css

@@ -178,203 +178,3 @@
   padding: 10px;
   text-align: center;
 }
-
-.update-button {
-  padding: 8px 16px;
-  background-color: #4CAF50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.update-button:hover {
-  background-color: #45a049;
-}
-
-.data-fields-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 1rem;
-  padding: 1rem;
-  background-color: rgba(255, 255, 255, 0.02);
-  border-radius: 8px;
-}
-
-.data-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background-color: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.data-field:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.data-field-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--text-color);
-}
-
-.data-type-icon,
-.data-value-icon {
-  font-size: 1.1rem;
-  opacity: 0.8;
-}
-
-.data-label {
-  font-weight: 500;
-  color: var(--text-color);
-}
-
-.data-field-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding-left: 2rem;
-  color: var(--text-color);
-}
-
-.hash-tooltip {
-  cursor: help;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-  color: var(--text-color);
-}
-
-.hash-tooltip:hover {
-  opacity: 1;
-}
-
-.download-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background-color: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  color: var(--text-color);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.download-button:hover {
-  background-color: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.loading-message,
-.no-access-message {
-  padding: 1rem;
-  text-align: center;
-  color: var(--text-color);
-  background-color: rgba(255, 255, 255, 0.04);
-  border-radius: 6px;
-  margin: 1rem 0;
-}
-
-.no-access-message {
-  color: #ff6b6b;
-  background-color: rgba(255, 107, 107, 0.1);
-}
-
-.field-update-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-color-muted);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  margin-left: auto;
-  font-size: 1rem;
-}
-
-.field-update-button:hover {
-  color: var(--primary-color);
-  background-color: rgba(var(--primary-color-rgb), 0.1);
-}
-
-.field-update-button:active {
-  transform: scale(0.95);
-}
-
-.edit-form {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.5rem;
-  background-color: rgba(255, 255, 255, 0.04);
-  border-radius: 4px;
-}
-
-.edit-form input[type="text"],
-.edit-form input[type="number"],
-.edit-form select,
-.edit-form textarea {
-  width: 100%;
-  padding: 0.5rem;
-  background-color: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  color: var(--text-color);
-  font-size: 0.9rem;
-}
-
-.edit-form input[type="file"] {
-  width: 100%;
-  padding: 0.5rem;
-  background-color: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  color: var(--text-color);
-  font-size: 0.9rem;
-}
-
-.edit-form textarea {
-  font-family: monospace;
-  min-height: 100px;
-  resize: vertical;
-}
-
-.edit-form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.edit-form-actions button {
-  padding: 0.25rem 0.75rem;
-  background-color: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  color: var(--text-color);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.edit-form-actions button:hover {
-  background-color: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.edit-form-actions button:active {
-  transform: scale(0.95);
-}

src/components/ProcessesViewer.tsx

@@ -30,13 +30,6 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
   const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
   const [isFiltered, setIsFiltered] = useState<boolean>(false);
   const [privateData, setPrivateData] = useState<Record<string, Record<string, any>>>({});
-  const [editingField, setEditingField] = useState<{
-    processId: string;
-    stateId: string;
-    key: string;
-    value: any;
-  } | null>(null);
-  const [tempValue, setTempValue] = useState<any>(null);
 
   const handleFilterClick = () => {
     setIsFiltered(prev => !prev);
@@ -69,11 +62,13 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
       await messageBus.isReady();
 
       const data = await messageBus.getData(processId, stateId);
+      console.log(data);
 
       setPrivateData(prev => ({
         ...prev,
         [stateId]: data
       }));
+      console.log(privateData);
     } catch (error) {
       console.error('Error fetching private data:', error);
     }
@@ -94,289 +89,39 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
   const formatValue = (key: string, value: string | number[] | FileBlob) => {
     if (isFileBlob(value)) {
       return (
-        <button 
-          className="download-button"
-          onClick={() => handleDownload(key, value)}
-          title="Télécharger le fichier"
-        >
-          📥 Télécharger
-        </button>
-      );
-    }
-    return JSON.stringify(value || '');
-  };
-
-  const getDataIcon = (value: any) => {
-    if (isFileBlob(value)) return '📄';
-    if (typeof value === 'string') return '📝';
-    if (typeof value === 'number') return '🔢';
-    if (Array.isArray(value)) return '📋';
-    if (typeof value === 'boolean') return '✅';
-    return '📦'; // object
-  };
-
-  const handleFieldUpdate = async (processId: string, stateId: string, key: string, value: any) => {
-    try {
-      const messageBus = MessageBus.getInstance(iframeUrl);
-      await messageBus.isReady();
-
-      const updateData = {
-        [key]: value
-      };
-
-      // First update the process
-      const updatedProcess = await messageBus.updateProcess(processId, stateId, updateData, [], null);
-      if (!updatedProcess) {
-        throw new Error('No updated process found');
-      }
-
-      const newStateId = updatedProcess.diffs[0]?.state_id;
-
-      if (!newStateId) {
-        throw new Error('No new state id found');
-      }
-      
-      // Then notify about the update
-      await messageBus.notifyProcessUpdate(processId, newStateId);
-      
-      // Finally validate the state
-      await messageBus.validateState(processId, newStateId);
-      
-      // Refresh the processes data
-      const updatedProcesses = await messageBus.getProcesses();
-      if (onProcessesUpdate) {
-        onProcessesUpdate(updatedProcesses);
-      }
-      console.log('Process updated successfully');
-    } catch (error) {
-      console.error('Error updating field:', error);
-      // You might want to show an error message to the user here
-    }
-  };
-
-  const renderEditForm = (key: string, value: any, onSave: (newValue: any) => void, onCancel: () => void) => {
-    // Initialize tempValue when editing starts
-    if (tempValue === null) {
-      setTempValue(value);
-    }
-
-    const handleFormClick = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-    };
-
-    if (isFileBlob(value)) {
-      return (
-        <div className="edit-form">
-          <input
-            type="file"
-            onChange={(e) => {
-              e.stopPropagation();
-              const file = e.target.files?.[0];
-              if (file) {
-                const reader = new FileReader();
-                reader.onload = (event) => {
-                  if (event.target?.result) {
-                    const arrayBuffer = event.target.result as ArrayBuffer;
-                    const uint8Array = new Uint8Array(arrayBuffer);
-                    setTempValue({
-                      type: file.type,
-                      data: uint8Array
-                    });
-                  }
-                };
-                reader.readAsArrayBuffer(file);
-              }
-            }}
-          />
-          <div className="edit-form-actions">
-            <button onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onSave(tempValue);
-              setTempValue(null);
-            }}>Sauvegarder</button>
-            <button onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onCancel();
-              setTempValue(null);
-            }}>Annuler</button>
-          </div>
-        </div>
-      );
-    }
-
-    if (typeof value === 'boolean') {
-      return (
-        <div className="edit-form" onClick={handleFormClick} onMouseDown={handleFormClick}>
-          <select
-            value={tempValue.toString()}
-            onChange={(e) => {
-              e.stopPropagation();
-              setTempValue(e.target.value === 'true');
-            }}
-          >
-            <option value="true">Vrai</option>
-            <option value="false">Faux</option>
-          </select>
-          <div className="edit-form-actions">
-            <button onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onSave(tempValue);
-            }}>Sauvegarder</button>
-            <button onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onCancel();
-            }}>Annuler</button>
-          </div>
-        </div>
-      );
-    }
-
-    if (Array.isArray(value)) {
-      return (
-        <div className="edit-form" onClick={handleFormClick} onMouseDown={handleFormClick}>
-          <textarea
-            value={JSON.stringify(tempValue, null, 2)}
-            onChange={(e) => {
-              e.stopPropagation();
-              try {
-                const newValue = JSON.parse(e.target.value);
-                if (Array.isArray(newValue)) {
-                  setTempValue(newValue);
-                }
-              } catch (error) {
-                // Invalid JSON, ignore
-              }
-            }}
-            onClick={handleFormClick}
-            onMouseDown={handleFormClick}
-            rows={4}
-          />
-          <div className="edit-form-actions">
-            <button onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onSave(tempValue);
-            }}>Sauvegarder</button>
-            <button onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onCancel();
-            }}>Annuler</button>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="edit-form" onClick={handleFormClick} onMouseDown={handleFormClick}>
-        <input
-          type={typeof value === 'number' ? 'number' : 'text'}
-          value={tempValue}
-          onChange={(e) => {
-            e.stopPropagation();
-            const newValue = typeof value === 'number' 
-              ? parseFloat(e.target.value)
-              : e.target.value;
-            setTempValue(newValue);
-          }}
-          onClick={handleFormClick}
-          onMouseDown={handleFormClick}
-          autoFocus
-        />
-        <div className="edit-form-actions">
-          <button onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            onSave(tempValue);
-          }}>Sauvegarder</button>
-          <button onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            onCancel();
-          }}>Annuler</button>
-        </div>
-      </div>
-    );
-  };
-
-  const renderDataField = (
-    key: string,
-    value: any,
-    hash: string | undefined,
-    isPrivate: boolean,
-    processId: string,
-    stateId: string
-  ) => {
-    const isEditing = editingField?.key === key && 
-                     editingField?.processId === processId && 
-                     editingField?.stateId === stateId;
-
-    return (
-      <div 
-        className="data-field" 
-        key={key}
-      >
-        <div className="data-field-header">
-          <span className="data-type-icon" title={isPrivate ? 'Donnée privée' : 'Donnée publique'}>
-            {isPrivate ? '🔒' : '🌐'}
-          </span>
-          <span className="data-value-icon">{getDataIcon(value)}</span>
-          <span className="data-label">{key}</span>
-          <button
-            className="field-update-button"
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              setEditingField({ processId, stateId, key, value });
-            }}
-            title="Mettre à jour cette valeur"
-          >
-            {isEditing ? '✕' : '🔄'}
-          </button>
-        </div>
-        <div 
-          className="data-field-content"
-        >
-          {isEditing ? (
         <div>
-              {renderEditForm(
+          <span>{key}</span>
-                key,
+          <button onClick={() => handleDownload(key, value)}>Download</button>
-                value,
-                async (newValue) => {
-                  await handleFieldUpdate(processId, stateId, key, newValue);
-                  setEditingField(null);
-                  setTempValue(null);
-                },
-                () => {
-                  setEditingField(null);
-                  setTempValue(null);
-                }
-              )}
-            </div>
-          ) : (
-            <>
-              {formatValue(key, value)}
-              {hash && (
-                <div className="hash-tooltip" title={`Hash: ${hash}`}>
-                  🔑
-                </div>
-              )}
-            </>
-          )}
-        </div>
         </div>
       );
+    }
+    return JSON.stringify(value || ''); // TODO handle most common cases
+  };
+
+  const formatName = (name: string | number[] | undefined): string => {
+    if (!name) return "Nom non disponible";
+
+    if (Array.isArray(name)) {
+      if (name.length === 1 && name[0] === 96) {
+        return "`"; // Caractère spécial
+      }
+      try {
+        const chars = name.map(code => String.fromCharCode(Number(code)));
+        return chars.join('');
+      } catch (e) {
+        return "Nom encodé (format non supporté)";
+      }
+    } else if (typeof name === 'string') {
+      return name;
+    }
+
+    return "Format de nom inconnu";
   };
 
   return (
     <div className="processes-viewer">
       <h2>Processus</h2>
-      <button onClick={handleFilterClick}>
+      <button onClick = {handleFilterClick}>
         {isFiltered ? 'Show All Processes' : 'Filter Processes'}
       </button>
       <p className="block-count">
@@ -387,8 +132,11 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
 
       <div className="block-list">
         {Object.entries(processes).map(([processId, process]) => {
-          if (isFiltered && !myProcesses.includes(processId)) {
+          if (isFiltered) {
-            return null;
+            // skip processes that are not in myProcesses
+            if (!myProcesses.includes(processId)) {
+              return;
+            }
           }
           const isExpanded = expandedBlocks.includes(processId);
           const stateCount = process.states.length - 1; // We just ignore the last state, which is always empty
@@ -413,18 +161,6 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
 
                   {process.states.map((state, index) => {
                     if (index === stateCount) return null;
-                    
-                    // Fetch private data if needed
-                    if (myProcesses.includes(processId) && !privateData[state.state_id]) {
-                      console.log('Fetching private data for state:', state.state_id);
-                      setTimeout(() => {
-                        fetchPrivateData(processId, state.state_id);
-                      }, 0);
-                    }
-
-                    const statePrivateData = privateData[state.state_id] || {};
-                    console.log(statePrivateData);
-
                     return (
                       <div key={`${processId}-state-${index}`} className="state-item">
                         <h4>État {index + 1}</h4>
@@ -434,29 +170,59 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
                         <div className="state-detail">
                           <strong>Empreinte totale de l'état:</strong> {state.state_id}
                         </div>
+                        <div className="state-detail">
+                          <strong>Empreinte par information:</strong>
+                          <ul>
+                            {Object.entries(state.pcd_commitment).map(([key, value]) => (
+                              <div key={key}>
+                                <strong>{key}:</strong> {value}
+                              </div>
+                            ))}
+                          </ul>
+                        </div>
 
-                        <div className="data-fields-container">
+                        <div className="state-private-data">
-                          {/* Public Data */}
+                          <h5>Données privées</h5>
-                          {Object.entries(state.public_data).map(([key, value]) => 
+                          <div className="private-data-item">
-                            renderDataField(key, value, state.pcd_commitment[key], false, processId, state.state_id)
+                            {!myProcesses.includes(processId) ? (
-                          )}
+                              <div className="no-data-message">
-
+                                Vous n'avez pas accès aux données privées de ce processus
-                          {/* Private Data */}
+                              </div>
-                          {myProcesses.includes(processId) ? (
+                            ) : !privateData[state.state_id] ? (
-                            Object.keys(statePrivateData).length > 0 ? (
+                              (() => {
-                              Object.entries(statePrivateData).map(([key, value]) =>
+                                fetchPrivateData(processId, state.state_id);
-                                renderDataField(key, value, state.pcd_commitment[key], true, processId, state.state_id)
+                                return <div>Chargement...</div>;
-                              )
+                              })()
+                            ) : Object.keys(privateData[state.state_id]).length > 0 ? (
+                              Object.entries(privateData[state.state_id]).map(([key, value]) => (
+                                <div key={key}>
+                                  <strong>{key}:</strong> {formatValue(key, value)}
+                                </div>
+                              ))
                             ) : (
-                              <div className="loading-message">Chargement des données privées...</div>
+                              <div className="no-data-message">
-                            )
+                                Aucune donnée privée disponible
-                          ) : (
-                            <div className="no-access-message">
-                              🔒 Vous n'avez pas accès aux données privées de ce processus
                               </div>
                             )}
                           </div>
                         </div>
+                        <div className="state-public-data">
+                          <h5>Données publiques</h5>
+                          <div className="public-data-item">
+                            {Object.keys(state.public_data).length > 0 ? (
+                              Object.entries(state.public_data).map(([key, value]) => (
+                                <div key={key}>
+                                  <strong>{key}:</strong> {formatValue(key, value)}
+                                </div>
+                              ))
+                            ) : (
+                              <div className="no-data-message">
+                                Aucune donnée publique disponible
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
                     );
                   })}
                 </div>
@@ -467,7 +233,7 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
       </div>
     </div>
   );
-}
+};
 
 ProcessesViewer.displayName = 'ProcessesViewer';
 export default memo(ProcessesViewer);