@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/data-explorer/data-explorer.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { LoadingIndicator } from '../../components/loading-indicator';
-import { registerInternalPeersUI } from '../../ui-router/ui-loader';
-import { isDesktop } from '../../globals';
+import { useCallback, useEffect, useState } from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { isDesktop } from "../../globals";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
 interface ITableInfo {
   tableName: string;
@@ -13,39 +13,54 @@ interface ITableInfo {
   bytes?: number;
 }
 
+type DataExplorerElectronApi = {
+  getCurrentContext: () => Promise<{ contextName: string }>;
+  getAllTables: () => Promise<ITableInfo[]>;
+  compactDatabase: (beforeTimestamp?: number) => Promise<void>;
+  resetChangeTracking: () => Promise<void>;
+};
+
+type WindowWithDataExplorer = Window & {
+  electronAPI?: { dataExplorer?: DataExplorerElectronApi };
+};
+
+function getDataExplorerApi(): DataExplorerElectronApi | undefined {
+  return (window as WindowWithDataExplorer).electronAPI?.dataExplorer;
+}
+
 export function DataExplorerList() {
   const [tables, setTables] = useState<ITableInfo[]>([]);
   const [loading, setLoading] = useState(true);
-  const [currentContext, setCurrentContext] = useState<string>('');
+  const [currentContext, setCurrentContext] = useState<string>("");
   const [compacting, setCompacting] = useState(false);
 
   const formatBytes = (bytes: number | undefined) => {
-    if (bytes === undefined) return '-';
-    if (bytes === 0) return '0 B';
+    if (bytes === undefined) return "-";
+    if (bytes === 0) return "0 B";
     const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const sizes = ["B", "KB", "MB", "GB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round(bytes / Math.pow(k, i)) + ' ' + sizes[i];
+    return `${Math.round(bytes / k ** i)} ${sizes[i]}`;
   };
 
   const getBytesColorClass = (bytes: number | undefined): string => {
-    if (bytes === undefined) return 'text-secondary';
+    if (bytes === undefined) return "text-secondary";
     const kb = 1024;
     const mb = kb * 1024;
 
-    if (bytes < 10 * kb) return 'text-secondary';      // 0 to 10KB: secondary (gray)
-    if (bytes < 10 * mb) return 'text-primary';        // 10KB to 10MB: primary (blue)
-    if (bytes < 100 * mb) return 'text-warning';       // 10MB to 100MB: warning (orange)
-    return 'text-danger';                               // >100MB: danger (red)
+    if (bytes < 10 * kb) return "text-secondary"; // 0 to 10KB: secondary (gray)
+    if (bytes < 10 * mb) return "text-primary"; // 10KB to 10MB: primary (blue)
+    if (bytes < 100 * mb) return "text-warning"; // 10MB to 100MB: warning (orange)
+    return "text-danger"; // >100MB: danger (red)
   };
 
-  const loadTables = async () => {
+  const loadTables = useCallback(async () => {
     try {
       if (!isDesktop()) return;
 
-      const api = (window as any).electronAPI?.dataExplorer;
+      const api = getDataExplorerApi();
       if (!api) {
-        console.warn('Data Explorer API not available');
+        console.warn("Data Explorer API not available");
         return;
       }
 
@@ -66,25 +81,25 @@ export function DataExplorerList() {
 
       setTables(allTablesInfo);
     } catch (error) {
-      console.error('Error loading tables:', error);
+      console.error("Error loading tables:", error);
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   const compactDatabase = async (beforeTimestamp?: number) => {
     try {
       setCompacting(true);
-      const api = (window as any).electronAPI?.dataExplorer;
+      const api = getDataExplorerApi();
       if (!api) {
-        alert('Data Explorer API not available');
+        alert("Data Explorer API not available");
         return;
       }
 
       const isExtreme = beforeTimestamp !== undefined;
       if (isExtreme) {
         const confirmed = window.confirm(
-          'Extreme Compaction will remove ALL change history. This cannot be undone. Continue?'
+          "Extreme Compaction will remove ALL change history. This cannot be undone. Continue?",
         );
         if (!confirmed) {
           setCompacting(false);
@@ -93,14 +108,14 @@ export function DataExplorerList() {
       }
 
       await api.compactDatabase(beforeTimestamp);
-      alert(`Database compacted successfully!${isExtreme ? ' (Extreme mode)' : ''}`);
+      alert(`Database compacted successfully!${isExtreme ? " (Extreme mode)" : ""}`);
 
       // Reload tables to show updated sizes
       setLoading(true);
       await loadTables();
-    } catch (error: any) {
-      console.error('Error compacting database:', error);
-      alert(`Error compacting database: ${error.message || 'Unknown error'}`);
+    } catch (error: unknown) {
+      console.error("Error compacting database:", error);
+      alert(`Error compacting database: ${error instanceof Error ? error.message : String(error)}`);
     } finally {
       setCompacting(false);
     }
@@ -109,14 +124,14 @@ export function DataExplorerList() {
   const resetChangeTracking = async () => {
     try {
       setCompacting(true);
-      const api = (window as any).electronAPI?.dataExplorer;
+      const api = getDataExplorerApi();
       if (!api) {
-        alert('Data Explorer API not available');
+        alert("Data Explorer API not available");
         return;
       }
 
       const confirmed = window.confirm(
-        'Reset Change Tracking will clear all change history and rebuild it from scratch. This may take a while. Continue?'
+        "Reset Change Tracking will clear all change history and rebuild it from scratch. This may take a while. Continue?",
       );
       if (!confirmed) {
         setCompacting(false);
@@ -124,14 +139,16 @@ export function DataExplorerList() {
       }
 
       await api.resetChangeTracking();
-      alert('Change tracking reset successfully!');
+      alert("Change tracking reset successfully!");
 
       // Reload tables to show updated sizes
       setLoading(true);
       await loadTables();
-    } catch (error: any) {
-      console.error('Error resetting change tracking:', error);
-      alert(`Error resetting change tracking: ${error.message || 'Unknown error'}`);
+    } catch (error: unknown) {
+      console.error("Error resetting change tracking:", error);
+      alert(
+        `Error resetting change tracking: ${error instanceof Error ? error.message : String(error)}`,
+      );
     } finally {
       setCompacting(false);
     }
@@ -139,7 +156,7 @@ export function DataExplorerList() {
 
   useEffect(() => {
     loadTables();
-  }, []);
+  }, [loadTables]);
 
   if (loading) {
     return <LoadingIndicator />;
@@ -158,9 +175,7 @@ export function DataExplorerList() {
   if (!currentContext && tables.length === 0) {
     return (
       <div className="container-fluid p-4">
-        <div className="alert alert-warning">
-          Unable to load database information.
-        </div>
+        <div className="alert alert-warning">Unable to load database information.</div>
       </div>
     );
   }
@@ -195,7 +210,11 @@ export function DataExplorerList() {
             >
               {compacting ? (
                 <>
-                  <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+                  <span
+                    className="spinner-border spinner-border-sm me-1"
+                    role="status"
+                    aria-hidden="true"
+                  ></span>
                   Compacting...
                 </>
               ) : (
@@ -229,7 +248,9 @@ export function DataExplorerList() {
                   <div className="small text-muted">Remove ALL change history</div>
                 </a>
               </li>
-              <li><hr className="dropdown-divider" /></li>
+              <li>
+                <hr className="dropdown-divider" />
+              </li>
               <li>
                 <a
                   className="dropdown-item"
@@ -282,13 +303,14 @@ export function DataExplorerList() {
       <div className="card mb-4">
         <div className="card-body">
           <h5 className="card-title">
-            Registered Tables ({tables.filter(t => t.isRegistered).length})
+            Registered Tables ({tables.filter((t) => t.isRegistered).length})
             <span className="badge bg-success ms-2">Active</span>
           </h5>
           <p className="text-muted small">
-            These tables are registered with the TableContainer and actively used by the application.
+            These tables are registered with the TableContainer and actively used by the
+            application.
           </p>
-          {tables.filter(t => t.isRegistered).length === 0 ? (
+          {tables.filter((t) => t.isRegistered).length === 0 ? (
             <p className="text-muted">No registered tables found</p>
           ) : (
             <div className="table-responsive">
@@ -302,22 +324,24 @@ export function DataExplorerList() {
                   </tr>
                 </thead>
                 <tbody>
-                  {tables.filter(t => t.isRegistered).map(table => (
-                    <tr key={table.tableName}>
-                      <td>
-                        <strong>{table.tableName}</strong>
-                      </td>
-                      <td>
-                        <code className="text-muted small">{table.tableId || 'system'}</code>
-                      </td>
-                      <td className="text-end">
-                        {table.rowCount !== undefined ? table.rowCount.toLocaleString() : '-'}
-                      </td>
-                      <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
-                        {formatBytes(table.bytes)}
-                      </td>
-                    </tr>
-                  ))}
+                  {tables
+                    .filter((t) => t.isRegistered)
+                    .map((table) => (
+                      <tr key={table.tableName}>
+                        <td>
+                          <strong>{table.tableName}</strong>
+                        </td>
+                        <td>
+                          <code className="text-muted small">{table.tableId || "system"}</code>
+                        </td>
+                        <td className="text-end">
+                          {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
+                        </td>
+                        <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
+                          {formatBytes(table.bytes)}
+                        </td>
+                      </tr>
+                    ))}
                 </tbody>
               </table>
             </div>
@@ -326,16 +350,16 @@ export function DataExplorerList() {
       </div>
 
       {/* Unregistered Tables (Raw SQLite) */}
-      {tables.some(t => !t.isRegistered) && (
+      {tables.some((t) => !t.isRegistered) && (
         <div className="card">
           <div className="card-body">
             <h5 className="card-title">
-              Unregistered Tables ({tables.filter(t => !t.isRegistered).length})
+              Unregistered Tables ({tables.filter((t) => !t.isRegistered).length})
               <span className="badge bg-warning text-dark ms-2">Raw SQLite</span>
             </h5>
             <p className="text-muted small">
-              These tables exist in the SQLite database but are not registered with the TableContainer.
-              They may be system tables, change tracking tables, or legacy tables.
+              These tables exist in the SQLite database but are not registered with the
+              TableContainer. They may be system tables, change tracking tables, or legacy tables.
             </p>
             <div className="table-responsive">
               <table className="table table-hover table-sm">
@@ -349,36 +373,48 @@ export function DataExplorerList() {
                   </tr>
                 </thead>
                 <tbody>
-                  {tables.filter(t => !t.isRegistered).map(table => (
-                    <tr key={table.tableName}>
-                      <td>
-                        <strong>{table.tableName}</strong>
-                      </td>
-                      <td>
-                        <span className="badge bg-secondary">{table.type || 'table'}</span>
-                      </td>
-                      <td className="text-end">
-                        {table.rowCount !== undefined ? table.rowCount.toLocaleString() : '-'}
-                      </td>
-                      <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
-                        {formatBytes(table.bytes)}
-                      </td>
-                      <td>
-                        {table.sql ? (
-                          <details>
-                            <summary className="cursor-pointer text-primary" style={{ cursor: 'pointer' }}>
-                              <small>View SQL</small>
-                            </summary>
-                            <pre className="mt-2 p-2 bg-body-secondary border rounded" style={{ fontSize: '0.75rem', maxHeight: '300px', overflow: 'auto' }}>
-                              <code className="text-body">{table.sql}</code>
-                            </pre>
-                          </details>
-                        ) : (
-                          <span className="text-muted small">-</span>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
+                  {tables
+                    .filter((t) => !t.isRegistered)
+                    .map((table) => (
+                      <tr key={table.tableName}>
+                        <td>
+                          <strong>{table.tableName}</strong>
+                        </td>
+                        <td>
+                          <span className="badge bg-secondary">{table.type || "table"}</span>
+                        </td>
+                        <td className="text-end">
+                          {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
+                        </td>
+                        <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
+                          {formatBytes(table.bytes)}
+                        </td>
+                        <td>
+                          {table.sql ? (
+                            <details>
+                              <summary
+                                className="cursor-pointer text-primary"
+                                style={{ cursor: "pointer" }}
+                              >
+                                <small>View SQL</small>
+                              </summary>
+                              <pre
+                                className="mt-2 p-2 bg-body-secondary border rounded"
+                                style={{
+                                  fontSize: "0.75rem",
+                                  maxHeight: "300px",
+                                  overflow: "auto",
+                                }}
+                              >
+                                <code className="text-body">{table.sql}</code>
+                              </pre>
+                            </details>
+                          ) : (
+                            <span className="text-muted small">-</span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
                 </tbody>
               </table>
             </div>
@@ -390,13 +426,13 @@ export function DataExplorerList() {
 }
 
 registerInternalPeersUI({
-  peersUIId: 'data-explorer-list-ui',
+  peersUIId: "data-explorer-list-ui",
   component: DataExplorerList,
   routes: [
     {
-      isMatch: (_props, context) => context.path === 'data-explorer',
-      uiCategory: 'screen',
-      priority: 2
-    }
-  ]
+      isMatch: (_props, context) => context.path === "data-explorer",
+      uiCategory: "screen",
+      priority: 2,
+    },
+  ],
 });

package/src/screens/data-explorer/index.ts

@@ -1,7 +1,6 @@
-
 // Import all data explorer screen components to ensure they register their routes
-import './data-explorer';
-import './query-executor';
+import "./data-explorer";
+import "./query-executor";
 
 export * from "./data-explorer";
 export * from "./query-executor";