├── .gitignore
├── README.md
├── screenshots
    └── v1.jpg
├── package.json
├── main.js
├── renderer.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # DB Visualiser
2 | 
3 | ## v1
4 | ![Image](./screenshots/v1.jpg)


--------------------------------------------------------------------------------
/screenshots/v1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xditya/database-visualiser/main/screenshots/v1.jpg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "electron-test",
 3 |   "version": "1.0.0",
 4 |   "description": "MongoDB Visualizer",
 5 |   "main": "main.js",
 6 |   "scripts": {
 7 |     "start": "electron .",
 8 |     "dev": "electron . --debug"
 9 |   },
10 |   "author": "xditya",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "electron": "^35.1.4",
14 |     "mongodb": "^6.3.0",
15 |     "chart.js": "^4.4.1",
16 |     "bootstrap": "^5.3.2",
17 |     "jquery": "^3.7.1",
18 |     "popper.js": "^1.16.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | const { app, BrowserWindow, ipcMain } = require("electron");
  2 | const path = require("path");
  3 | const { MongoClient } = require("mongodb");
  4 | 
  5 | let mainWindow;
  6 | let mongoClient = null;
  7 | 
  8 | const createWindow = () => {
  9 |   mainWindow = new BrowserWindow({
 10 |     width: 1200,
 11 |     height: 800,
 12 |     webPreferences: {
 13 |       nodeIntegration: true,
 14 |       contextIsolation: false,
 15 |     },
 16 |     backgroundColor: "#1a1a1a",
 17 |   });
 18 | 
 19 |   mainWindow.loadFile("index.html");
 20 |   // mainWindow.webContents.openDevTools(); // Uncomment for debugging
 21 | 
 22 |   // Handle window controls
 23 |   ipcMain.on("minimize", () => {
 24 |     mainWindow.minimize();
 25 |   });
 26 | 
 27 |   ipcMain.on("maximize", () => {
 28 |     if (mainWindow.isMaximized()) {
 29 |       mainWindow.unmaximize();
 30 |     } else {
 31 |       mainWindow.maximize();
 32 |     }
 33 |   });
 34 | 
 35 |   ipcMain.on("close", () => {
 36 |     mainWindow.close();
 37 |   });
 38 | 
 39 |   ipcMain.on("startDrag", () => {
 40 |     mainWindow.webContents.send("maximizeChange", mainWindow.isMaximized());
 41 |   });
 42 | 
 43 |   // Send maximize state changes to renderer
 44 |   mainWindow.on("maximize", () => {
 45 |     mainWindow.webContents.send("maximizeChange", true);
 46 |   });
 47 | 
 48 |   mainWindow.on("unmaximize", () => {
 49 |     mainWindow.webContents.send("maximizeChange", false);
 50 |   });
 51 | };
 52 | 
 53 | app.whenReady().then(() => {
 54 |   createWindow();
 55 | 
 56 |   app.on("activate", () => {
 57 |     if (BrowserWindow.getAllWindows().length === 0) {
 58 |       createWindow();
 59 |     }
 60 |   });
 61 | });
 62 | 
 63 | app.on("window-all-closed", () => {
 64 |   if (process.platform !== "darwin") {
 65 |     app.quit();
 66 |   }
 67 | });
 68 | 
 69 | // MongoDB Connection Handlers
 70 | ipcMain.handle("connect-to-mongodb", async (event, url) => {
 71 |   try {
 72 |     if (mongoClient) {
 73 |       await mongoClient.close();
 74 |     }
 75 | 
 76 |     mongoClient = new MongoClient(url);
 77 |     await mongoClient.connect();
 78 | 
 79 |     const databases = await mongoClient.db().admin().listDatabases();
 80 |     return { success: true, databases: databases.databases };
 81 |   } catch (error) {
 82 |     return { success: false, error: error.message };
 83 |   }
 84 | });
 85 | 
 86 | ipcMain.handle("get-collections", async (event, dbName) => {
 87 |   try {
 88 |     const db = mongoClient.db(dbName);
 89 |     const collections = await db.listCollections().toArray();
 90 |     return { success: true, collections };
 91 |   } catch (error) {
 92 |     return { success: false, error: error.message };
 93 |   }
 94 | });
 95 | 
 96 | ipcMain.handle(
 97 |   "get-documents",
 98 |   async (event, { dbName, collectionName, limit = 100 }) => {
 99 |     try {
100 |       const db = mongoClient.db(dbName);
101 |       const collection = db.collection(collectionName);
102 |       const documents = await collection.find({}).limit(limit).toArray();
103 |       return { success: true, documents };
104 |     } catch (error) {
105 |       return { success: false, error: error.message };
106 |     }
107 |   }
108 | );
109 | 
110 | ipcMain.handle("disconnect-mongodb", async () => {
111 |   try {
112 |     if (mongoClient) {
113 |       await mongoClient.close();
114 |       mongoClient = null;
115 |     }
116 |     return { success: true };
117 |   } catch (error) {
118 |     return { success: false, error: error.message };
119 |   }
120 | });
121 | 


--------------------------------------------------------------------------------
/renderer.js:
--------------------------------------------------------------------------------
  1 | const { ipcRenderer } = require("electron");
  2 | 
  3 | // DOM Elements
  4 | const connectBtn = document.getElementById("connectBtn");
  5 | const connectionUrl = document.getElementById("connectionUrl");
  6 | const databaseList = document.getElementById("databaseList");
  7 | const documentViewer = document.getElementById("documentViewer");
  8 | const loadingSpinner = document.getElementById("loadingSpinner");
  9 | const connectionStatus = document.getElementById("connectionStatus");
 10 | const documentCount = document.getElementById("documentCount");
 11 | const sidebar = document.getElementById("sidebar");
 12 | const sidebarToggle = document.getElementById("sidebarToggle");
 13 | const mainContent = document.getElementById("mainContent");
 14 | const sidebarOverlay = document.getElementById("sidebarOverlay");
 15 | 
 16 | // State
 17 | let currentDb = null;
 18 | let currentCollection = null;
 19 | let isConnected = false;
 20 | let isSidebarCollapsed = false;
 21 | 
 22 | // Document Viewer State
 23 | let currentView = "table";
 24 | let currentPage = 1;
 25 | let documentsPerPage = 10;
 26 | let filteredDocuments = [];
 27 | 
 28 | // DOM Elements for Document Viewer
 29 | const searchInput = document.getElementById("searchInput");
 30 | const documentContent = document.getElementById("documentContent");
 31 | const viewOptionButtons = document.querySelectorAll(".view-option-btn");
 32 | 
 33 | // Title bar controls
 34 | const minimizeBtn = document.querySelector(".titlebar-button.minimize");
 35 | const maximizeBtn = document.querySelector(".titlebar-button.maximize");
 36 | const closeBtn = document.querySelector(".titlebar-button.close");
 37 | 
 38 | // Event Listeners
 39 | connectBtn.addEventListener("click", handleConnect);
 40 | connectionUrl.addEventListener("keypress", (e) => {
 41 |   if (e.key === "Enter") {
 42 |     handleConnect();
 43 |   }
 44 | });
 45 | 
 46 | // Sidebar Toggle
 47 | sidebarToggle.addEventListener("click", toggleSidebar);
 48 | 
 49 | // Click outside handler
 50 | document.addEventListener("click", (e) => {
 51 |   const isClickInsideSidebar = sidebar.contains(e.target);
 52 |   const isClickOnToggle = sidebarToggle.contains(e.target);
 53 | 
 54 |   if (!isClickInsideSidebar && !isClickOnToggle && !isSidebarCollapsed) {
 55 |     toggleSidebar();
 56 |   }
 57 | });
 58 | 
 59 | // Handle window resize
 60 | window.addEventListener("resize", () => {
 61 |   if (window.innerWidth >= 992) {
 62 |     sidebarOverlay.classList.remove("visible");
 63 |   }
 64 | });
 65 | 
 66 | // Event Listeners for Document Viewer
 67 | searchInput.addEventListener("input", handleSearch);
 68 | viewOptionButtons.forEach((btn) => {
 69 |   btn.addEventListener("click", () => {
 70 |     const view = btn.dataset.view;
 71 |     setViewMode(view);
 72 |   });
 73 | });
 74 | 
 75 | // Add title bar functionality
 76 | minimizeBtn.addEventListener("click", () => {
 77 |   window.electron.minimize();
 78 | });
 79 | 
 80 | maximizeBtn.addEventListener("click", () => {
 81 |   window.electron.maximize();
 82 | });
 83 | 
 84 | closeBtn.addEventListener("click", () => {
 85 |   window.electron.close();
 86 | });
 87 | 
 88 | // Update maximize button icon based on window state
 89 | window.electron.onMaximizeChange((isMaximized) => {
 90 |   maximizeBtn.innerHTML = isMaximized
 91 |     ? '<i class="bi bi-square"></i>'
 92 |     : '<i class="bi bi-fullscreen"></i>';
 93 | });
 94 | 
 95 | // Make title bar draggable
 96 | const titlebar = document.querySelector(".titlebar");
 97 | titlebar.addEventListener("mousedown", (e) => {
 98 |   if (e.target.closest(".titlebar-button")) return;
 99 |   window.electron.startDrag();
100 | });
101 | 
102 | function toggleSidebar() {
103 |   isSidebarCollapsed = !isSidebarCollapsed;
104 |   sidebar.classList.toggle("collapsed", isSidebarCollapsed);
105 |   mainContent.classList.toggle("expanded", isSidebarCollapsed);
106 | 
107 |   // Update toggle button icon
108 |   const icon = sidebarToggle.querySelector("i");
109 |   icon.classList.toggle("bi-chevron-left", !isSidebarCollapsed);
110 |   icon.classList.toggle("bi-chevron-right", isSidebarCollapsed);
111 | 
112 |   // Show/hide overlay on mobile
113 |   if (window.innerWidth < 992) {
114 |     sidebarOverlay.classList.toggle("visible", !isSidebarCollapsed);
115 |   }
116 | }
117 | 
118 | // Functions
119 | async function handleConnect() {
120 |   const url = connectionUrl.value.trim();
121 |   if (!url) {
122 |     showError("Please enter a MongoDB URL");
123 |     return;
124 |   }
125 | 
126 |   showLoading();
127 |   try {
128 |     const result = await ipcRenderer.invoke("connect-to-mongodb", url);
129 |     if (result.success) {
130 |       updateDatabaseList(result.databases);
131 |       updateConnectionStatus(true);
132 |       connectBtn.innerHTML = '<i class="bi bi-plug-fill me-2"></i>Connected';
133 |       connectBtn.classList.add("disabled");
134 |       connectionUrl.disabled = true;
135 |     } else {
136 |       showError(result.error);
137 |       updateConnectionStatus(false);
138 |     }
139 |   } catch (error) {
140 |     showError(error.message);
141 |     updateConnectionStatus(false);
142 |   } finally {
143 |     hideLoading();
144 |   }
145 | }
146 | 
147 | function updateConnectionStatus(connected) {
148 |   isConnected = connected;
149 |   connectionStatus.classList.toggle("disconnected", !connected);
150 |   const statusText = connectionStatus.nextElementSibling;
151 |   statusText.textContent = connected ? "Connected" : "Disconnected";
152 | }
153 | 
154 | function updateDatabaseList(databases) {
155 |   databaseList.innerHTML = "";
156 |   databases.forEach((db) => {
157 |     if (db.name !== "admin" && db.name !== "local") {
158 |       const dbElement = createDatabaseElement(db.name);
159 |       databaseList.appendChild(dbElement);
160 |     }
161 |   });
162 | }
163 | 
164 | function createDatabaseElement(dbName) {
165 |   const dbDiv = document.createElement("div");
166 |   dbDiv.className = "mb-3";
167 | 
168 |   const dbHeader = document.createElement("div");
169 |   dbHeader.className = "database-header d-flex align-items-center";
170 |   dbHeader.innerHTML = `
171 |     <i class="bi bi-database me-2"></i>
172 |     <span>${dbName}</span>
173 |     <i class="bi bi-chevron-down ms-auto"></i>
174 |   `;
175 | 
176 |   const collectionsDiv = document.createElement("div");
177 |   collectionsDiv.className = "ms-4 collections-container";
178 |   collectionsDiv.style.display = "none";
179 | 
180 |   dbHeader.addEventListener("click", async () => {
181 |     const isExpanded = collectionsDiv.style.display !== "none";
182 |     collectionsDiv.style.display = isExpanded ? "none" : "block";
183 |     const chevron = dbHeader.querySelector(".bi-chevron-down");
184 |     chevron.style.transform = isExpanded ? "rotate(0deg)" : "rotate(180deg)";
185 | 
186 |     if (!isExpanded && !collectionsDiv.hasChildNodes()) {
187 |       showLoading();
188 |       try {
189 |         const result = await ipcRenderer.invoke("get-collections", dbName);
190 |         if (result.success) {
191 |           result.collections.forEach((collection) => {
192 |             const collectionElement = createCollectionElement(
193 |               dbName,
194 |               collection.name
195 |             );
196 |             collectionsDiv.appendChild(collectionElement);
197 |           });
198 |         } else {
199 |           showError(result.error);
200 |         }
201 |       } catch (error) {
202 |         showError(error.message);
203 |       } finally {
204 |         hideLoading();
205 |       }
206 |     }
207 |   });
208 | 
209 |   dbDiv.appendChild(dbHeader);
210 |   dbDiv.appendChild(collectionsDiv);
211 |   return dbDiv;
212 | }
213 | 
214 | function createCollectionElement(dbName, collectionName) {
215 |   const collectionDiv = document.createElement("div");
216 |   collectionDiv.className = "collection-item";
217 |   collectionDiv.innerHTML = `<i class="bi bi-table me-2"></i>${collectionName}`;
218 | 
219 |   collectionDiv.addEventListener("click", async () => {
220 |     currentDb = dbName;
221 |     currentCollection = collectionName;
222 |     currentPage = 1;
223 |     showLoading();
224 |     try {
225 |       const result = await ipcRenderer.invoke("get-documents", {
226 |         dbName,
227 |         collectionName,
228 |         limit: 100,
229 |       });
230 | 
231 |       if (result.success) {
232 |         filteredDocuments = result.documents;
233 |         displayDocuments(filteredDocuments);
234 |         updateDocumentCount(result.documents.length);
235 |         searchInput.value = "";
236 |       } else {
237 |         showError(result.error);
238 |         updateDocumentCount(0);
239 |       }
240 |     } catch (error) {
241 |       showError(error.message);
242 |       updateDocumentCount(0);
243 |     } finally {
244 |       hideLoading();
245 |     }
246 |   });
247 | 
248 |   return collectionDiv;
249 | }
250 | 
251 | function displayDocuments(documents) {
252 |   if (!documents || documents.length === 0) {
253 |     documentContent.innerHTML = `
254 |       <div class="no-documents">
255 |         <i class="bi bi-database"></i>
256 |         <h4>No documents found</h4>
257 |         <p>No documents match your search criteria</p>
258 |       </div>
259 |     `;
260 |     return;
261 |   }
262 | 
263 |   const startIndex = (currentPage - 1) * documentsPerPage;
264 |   const endIndex = startIndex + documentsPerPage;
265 |   const paginatedDocuments = documents.slice(startIndex, endIndex);
266 |   const totalPages = Math.ceil(documents.length / documentsPerPage);
267 | 
268 |   if (currentView === "table") {
269 |     displayTable(paginatedDocuments, totalPages);
270 |   } else {
271 |     displayJSON(paginatedDocuments, totalPages);
272 |   }
273 | }
274 | 
275 | function displayTable(documents, totalPages) {
276 |   const headers = Object.keys(documents[0]);
277 |   documentContent.innerHTML = `
278 |     <div class="table-responsive">
279 |       <table class="document-table">
280 |         <thead>
281 |           <tr>
282 |             ${headers.map((header) => `<th>${header}</th>`).join("")}
283 |           </tr>
284 |         </thead>
285 |         <tbody>
286 |           ${documents
287 |             .map(
288 |               (doc) => `
289 |             <tr>
290 |               ${headers
291 |                 .map(
292 |                   (header) => `
293 |                 <td class="json-value">${formatValue(doc[header])}</td>
294 |               `
295 |                 )
296 |                 .join("")}
297 |             </tr>
298 |           `
299 |             )
300 |             .join("")}
301 |         </tbody>
302 |       </table>
303 |     </div>
304 |     ${createPagination(totalPages)}
305 |   `;
306 | 
307 |   // Add event listeners to pagination buttons
308 |   document.querySelectorAll(".page-btn").forEach((btn) => {
309 |     btn.addEventListener("click", () => {
310 |       if (btn.dataset.page) {
311 |         currentPage = parseInt(btn.dataset.page);
312 |         displayDocuments(filteredDocuments);
313 |       }
314 |     });
315 |   });
316 | }
317 | 
318 | function displayJSON(documents, totalPages) {
319 |   documentContent.innerHTML = `
320 |     <div class="json-view">
321 |       ${documents
322 |         .map(
323 |           (doc, index) => `
324 |         <div class="json-document">
325 |           <pre class="json-value">${JSON.stringify(doc, null, 2)}</pre>
326 |         </div>
327 |       `
328 |         )
329 |         .join("")}
330 |     </div>
331 |     ${createPagination(totalPages)}
332 |   `;
333 | 
334 |   // Add event listeners to pagination buttons
335 |   document.querySelectorAll(".page-btn").forEach((btn) => {
336 |     btn.addEventListener("click", () => {
337 |       if (btn.dataset.page) {
338 |         currentPage = parseInt(btn.dataset.page);
339 |         displayDocuments(filteredDocuments);
340 |       }
341 |     });
342 |   });
343 | }
344 | 
345 | function createPagination(totalPages) {
346 |   if (totalPages <= 1) return "";
347 | 
348 |   let paginationHTML = '<div class="pagination">';
349 | 
350 |   // Previous button
351 |   paginationHTML += `
352 |     <button class="page-btn" ${
353 |       currentPage === 1 ? "disabled" : ""
354 |     } data-page="${currentPage - 1}">
355 |       <i class="bi bi-chevron-left"></i>
356 |     </button>
357 |   `;
358 | 
359 |   // Page numbers
360 |   for (let i = 1; i <= totalPages; i++) {
361 |     if (
362 |       i === 1 ||
363 |       i === totalPages ||
364 |       (i >= currentPage - 2 && i <= currentPage + 2)
365 |     ) {
366 |       paginationHTML += `
367 |         <button class="page-btn ${
368 |           i === currentPage ? "active" : ""
369 |         }" data-page="${i}">
370 |           ${i}
371 |         </button>
372 |       `;
373 |     } else if (i === currentPage - 3 || i === currentPage + 3) {
374 |       paginationHTML += '<span class="page-btn">...</span>';
375 |     }
376 |   }
377 | 
378 |   // Next button
379 |   paginationHTML += `
380 |     <button class="page-btn" ${
381 |       currentPage === totalPages ? "disabled" : ""
382 |     } data-page="${currentPage + 1}">
383 |       <i class="bi bi-chevron-right"></i>
384 |     </button>
385 |   `;
386 | 
387 |   paginationHTML += "</div>";
388 |   return paginationHTML;
389 | }
390 | 
391 | function formatValue(value) {
392 |   if (value === null) return "<span class='text-muted'>null</span>";
393 |   if (value === undefined) return "<span class='text-muted'>undefined</span>";
394 |   if (typeof value === "object") {
395 |     return `<pre class='mb-0'>${JSON.stringify(value, null, 2)}</pre>`;
396 |   }
397 |   return value;
398 | }
399 | 
400 | function updateDocumentCount(count) {
401 |   documentCount.textContent =
402 |     count > 0
403 |       ? `${count} document${count === 1 ? "" : "s"} selected`
404 |       : "No documents selected";
405 | }
406 | 
407 | function showLoading() {
408 |   loadingSpinner.style.display = "block";
409 |   documentContent.style.display = "none";
410 | }
411 | 
412 | function hideLoading() {
413 |   loadingSpinner.style.display = "none";
414 |   documentContent.style.display = "block";
415 | }
416 | 
417 | function showError(message) {
418 |   const alertDiv = document.createElement("div");
419 |   alertDiv.className = "alert alert-danger";
420 |   alertDiv.innerHTML = `
421 |     <div class="d-flex align-items-center">
422 |       <i class="bi bi-exclamation-triangle-fill me-2"></i>
423 |       <span>${message}</span>
424 |     </div>
425 |   `;
426 |   documentContent.innerHTML = "";
427 |   documentContent.appendChild(alertDiv);
428 | }
429 | 
430 | function setViewMode(view) {
431 |   currentView = view;
432 |   viewOptionButtons.forEach((btn) => {
433 |     btn.classList.toggle("active", btn.dataset.view === view);
434 |   });
435 |   displayDocuments(filteredDocuments);
436 | }
437 | 
438 | function handleSearch(e) {
439 |   const searchTerm = e.target.value.toLowerCase();
440 |   if (!currentDb || !currentCollection) return;
441 | 
442 |   const filtered = filteredDocuments.filter((doc) => {
443 |     return Object.values(doc).some((value) => {
444 |       const stringValue =
445 |         typeof value === "object"
446 |           ? JSON.stringify(value).toLowerCase()
447 |           : String(value).toLowerCase();
448 |       return stringValue.includes(searchTerm);
449 |     });
450 |   });
451 | 
452 |   displayDocuments(filtered);
453 | }
454 | 
455 | // Handle window close
456 | window.addEventListener("beforeunload", async () => {
457 |   if (isConnected) {
458 |     try {
459 |       await ipcRenderer.invoke("disconnect-mongodb");
460 |     } catch (error) {
461 |       console.error("Error disconnecting from MongoDB:", error);
462 |     }
463 |   }
464 | });
465 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>MongoDB Visualizer</title>
  7 |     <link
  8 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  9 |       rel="stylesheet"
 10 |     />
 11 |     <link
 12 |       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
 13 |       rel="stylesheet"
 14 |     />
 15 |     <style>
 16 |       :root {
 17 |         --primary-color: #00fff5;
 18 |         --secondary-color: #ff00ff;
 19 |         --accent-color: #00ff9f;
 20 |         --dark-bg: #1a1a1a;
 21 |         --darker-bg: #0f0f0f;
 22 |         --card-bg: rgba(255, 255, 255, 0.05);
 23 |         --hover-bg: rgba(255, 255, 255, 0.1);
 24 |         --border-color: rgba(255, 255, 255, 0.1);
 25 |         --sidebar-width: 300px;
 26 |         --sidebar-collapsed-width: 60px;
 27 |       }
 28 | 
 29 |       body {
 30 |         background-color: var(--dark-bg);
 31 |         color: white;
 32 |         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 33 |         overflow: hidden;
 34 |         margin: 0;
 35 |         padding: 0;
 36 |       }
 37 | 
 38 |       /* Adjust main content without titlebar */
 39 |       .main-content {
 40 |         margin-left: var(--sidebar-width);
 41 |         transition: margin-left 0.3s ease;
 42 |         padding: 20px;
 43 |       }
 44 | 
 45 |       .sidebar {
 46 |         height: 100vh;
 47 |         background-color: var(--darker-bg);
 48 |         padding: 20px;
 49 |         border-right: 1px solid var(--border-color);
 50 |         box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
 51 |         width: var(--sidebar-width);
 52 |         position: fixed;
 53 |         left: 0;
 54 |         top: 0;
 55 |         transition: all 0.3s ease;
 56 |         z-index: 1000;
 57 |       }
 58 | 
 59 |       .sidebar.collapsed {
 60 |         width: var(--sidebar-collapsed-width);
 61 |         padding: 20px 10px;
 62 |       }
 63 | 
 64 |       .sidebar.collapsed .sidebar-content {
 65 |         opacity: 0;
 66 |         pointer-events: none;
 67 |       }
 68 | 
 69 |       .sidebar-toggle {
 70 |         position: absolute;
 71 |         right: -15px;
 72 |         top: 20px;
 73 |         background-color: var(--darker-bg);
 74 |         border: 1px solid var(--border-color);
 75 |         border-radius: 50%;
 76 |         width: 30px;
 77 |         height: 30px;
 78 |         display: flex;
 79 |         align-items: center;
 80 |         justify-content: center;
 81 |         cursor: pointer;
 82 |         transition: all 0.3s ease;
 83 |         z-index: 1001;
 84 |       }
 85 | 
 86 |       .sidebar-toggle:hover {
 87 |         background-color: var(--hover-bg);
 88 |         transform: scale(1.1);
 89 |       }
 90 | 
 91 |       .sidebar-toggle i {
 92 |         transition: transform 0.3s ease;
 93 |       }
 94 | 
 95 |       .sidebar.collapsed .sidebar-toggle i {
 96 |         transform: rotate(180deg);
 97 |       }
 98 | 
 99 |       .main-content {
100 |         margin-left: var(--sidebar-width);
101 |         transition: margin-left 0.3s ease;
102 |         padding-bottom: 40px;
103 |       }
104 | 
105 |       .main-content.expanded {
106 |         margin-left: var(--sidebar-collapsed-width);
107 |       }
108 | 
109 |       .connection-form {
110 |         padding: 20px;
111 |         background-color: var(--card-bg);
112 |         border-radius: 12px;
113 |         margin-bottom: 20px;
114 |         margin-top: 20px;
115 |         backdrop-filter: blur(10px);
116 |         border: 1px solid var(--border-color);
117 |       }
118 | 
119 |       .form-control {
120 |         background-color: var(--darker-bg);
121 |         border: 1px solid var(--border-color);
122 |         color: white;
123 |         border-radius: 8px;
124 |         padding: 10px 15px;
125 |       }
126 | 
127 |       .form-control:focus {
128 |         background-color: var(--darker-bg);
129 |         border-color: var(--accent-color);
130 |         color: white;
131 |         box-shadow: 0 0 0 0.25rem rgba(0, 255, 159, 0.25);
132 |       }
133 | 
134 |       .btn-neon {
135 |         background-color: var(--accent-color);
136 |         color: black;
137 |         border: none;
138 |         border-radius: 8px;
139 |         padding: 10px 20px;
140 |         font-weight: 600;
141 |         transition: all 0.3s ease;
142 |       }
143 | 
144 |       .btn-neon:hover {
145 |         background-color: #00cc7f;
146 |         transform: translateY(-1px);
147 |         box-shadow: 0 5px 15px rgba(0, 255, 159, 0.3);
148 |       }
149 | 
150 |       .btn-neon:active {
151 |         transform: translateY(0);
152 |       }
153 | 
154 |       .database-list {
155 |         max-height: calc(100vh - 200px);
156 |         overflow-y: auto;
157 |         padding-right: 10px;
158 |       }
159 | 
160 |       .database-list::-webkit-scrollbar {
161 |         width: 6px;
162 |       }
163 | 
164 |       .database-list::-webkit-scrollbar-track {
165 |         background: var(--darker-bg);
166 |       }
167 | 
168 |       .database-list::-webkit-scrollbar-thumb {
169 |         background: var(--accent-color);
170 |         border-radius: 3px;
171 |       }
172 | 
173 |       /* Custom Scrollbar Styles */
174 |       ::-webkit-scrollbar {
175 |         width: 8px;
176 |         height: 8px;
177 |       }
178 | 
179 |       ::-webkit-scrollbar-track {
180 |         background: var(--darker-bg);
181 |         border-radius: 4px;
182 |       }
183 | 
184 |       ::-webkit-scrollbar-thumb {
185 |         background: var(--accent-color);
186 |         border-radius: 4px;
187 |         transition: all 0.3s ease;
188 |       }
189 | 
190 |       ::-webkit-scrollbar-thumb:hover {
191 |         background: #00cc7f;
192 |       }
193 | 
194 |       /* Firefox Scrollbar */
195 |       * {
196 |         scrollbar-width: thin;
197 |         scrollbar-color: var(--accent-color) var(--darker-bg);
198 |       }
199 | 
200 |       .collection-item {
201 |         padding: 8px 12px;
202 |         margin: 4px 0;
203 |         border-radius: 8px;
204 |         cursor: pointer;
205 |         transition: all 0.2s ease;
206 |         background-color: var(--card-bg);
207 |         border: 1px solid var(--border-color);
208 |       }
209 | 
210 |       .collection-item:hover {
211 |         background-color: var(--hover-bg);
212 |         transform: translateX(5px);
213 |       }
214 | 
215 |       .document-viewer {
216 |         background-color: var(--card-bg);
217 |         padding: 20px;
218 |         border-radius: 12px;
219 |         height: calc(100vh - 140px);
220 |         overflow-y: auto;
221 |         backdrop-filter: blur(10px);
222 |         border: 1px solid var(--border-color);
223 |         margin-top: 20px;
224 |       }
225 | 
226 |       .document-header {
227 |         display: flex;
228 |         justify-content: space-between;
229 |         align-items: center;
230 |         margin-bottom: 20px;
231 |         padding-bottom: 15px;
232 |         border-bottom: 1px solid var(--border-color);
233 |       }
234 | 
235 |       .document-title {
236 |         display: flex;
237 |         align-items: center;
238 |         gap: 10px;
239 |       }
240 | 
241 |       .document-title h4 {
242 |         margin: 0;
243 |         color: var(--accent-color);
244 |       }
245 | 
246 |       .document-actions {
247 |         display: flex;
248 |         gap: 10px;
249 |       }
250 | 
251 |       .search-box {
252 |         position: relative;
253 |         width: 300px;
254 |       }
255 | 
256 |       .search-box input {
257 |         width: 100%;
258 |         padding: 8px 35px 8px 15px;
259 |         background-color: var(--darker-bg);
260 |         border: 1px solid var(--border-color);
261 |         border-radius: 8px;
262 |         color: white;
263 |       }
264 | 
265 |       .search-box i {
266 |         position: absolute;
267 |         right: 10px;
268 |         top: 50%;
269 |         transform: translateY(-50%);
270 |         color: var(--accent-color);
271 |       }
272 | 
273 |       .view-options {
274 |         display: flex;
275 |         gap: 10px;
276 |       }
277 | 
278 |       .view-option-btn {
279 |         background-color: var(--darker-bg);
280 |         border: 1px solid var(--border-color);
281 |         color: white;
282 |         padding: 8px 12px;
283 |         border-radius: 8px;
284 |         cursor: pointer;
285 |         transition: all 0.2s ease;
286 |       }
287 | 
288 |       .view-option-btn:hover {
289 |         background-color: var(--hover-bg);
290 |       }
291 | 
292 |       .view-option-btn.active {
293 |         background-color: var(--accent-color);
294 |         color: black;
295 |       }
296 | 
297 |       .document-table {
298 |         width: 100%;
299 |         border-collapse: separate;
300 |         border-spacing: 0;
301 |       }
302 | 
303 |       .document-table th {
304 |         background-color: var(--darker-bg);
305 |         padding: 12px;
306 |         font-weight: 600;
307 |         text-align: left;
308 |         border-bottom: 2px solid var(--border-color);
309 |         position: sticky;
310 |         top: 0;
311 |         z-index: 1;
312 |       }
313 | 
314 |       .document-table td {
315 |         padding: 12px;
316 |         border-bottom: 1px solid var(--border-color);
317 |         vertical-align: top;
318 |       }
319 | 
320 |       .document-table tr:hover td {
321 |         background-color: var(--hover-bg);
322 |       }
323 | 
324 |       .json-value {
325 |         font-family: "Consolas", monospace;
326 |         white-space: pre-wrap;
327 |         word-break: break-word;
328 |       }
329 | 
330 |       .pagination {
331 |         display: flex;
332 |         justify-content: center;
333 |         gap: 10px;
334 |         margin-top: 20px;
335 |       }
336 | 
337 |       .page-btn {
338 |         background-color: var(--darker-bg);
339 |         border: 1px solid var(--border-color);
340 |         color: white;
341 |         padding: 8px 12px;
342 |         border-radius: 8px;
343 |         cursor: pointer;
344 |         transition: all 0.2s ease;
345 |       }
346 | 
347 |       .page-btn:hover {
348 |         background-color: var(--hover-bg);
349 |       }
350 | 
351 |       .page-btn.active {
352 |         background-color: var(--accent-color);
353 |         color: black;
354 |       }
355 | 
356 |       .page-btn:disabled {
357 |         opacity: 0.5;
358 |         cursor: not-allowed;
359 |       }
360 | 
361 |       .no-documents {
362 |         text-align: center;
363 |         padding: 40px;
364 |         color: var(--accent-color);
365 |       }
366 | 
367 |       .no-documents i {
368 |         font-size: 48px;
369 |         margin-bottom: 20px;
370 |       }
371 | 
372 |       .loading-spinner {
373 |         display: none;
374 |         text-align: center;
375 |         padding: 20px;
376 |       }
377 | 
378 |       .spinner {
379 |         color: var(--accent-color);
380 |         font-size: 24px;
381 |         animation: spin 1s linear infinite;
382 |       }
383 | 
384 |       @keyframes spin {
385 |         0% {
386 |           transform: rotate(0deg);
387 |         }
388 |         100% {
389 |           transform: rotate(360deg);
390 |         }
391 |       }
392 | 
393 |       .table {
394 |         color: white;
395 |         border-collapse: separate;
396 |         border-spacing: 0;
397 |       }
398 | 
399 |       .table th {
400 |         background-color: var(--darker-bg);
401 |         border-bottom: 2px solid var(--border-color);
402 |         padding: 12px;
403 |         font-weight: 600;
404 |       }
405 | 
406 |       .table td {
407 |         padding: 12px;
408 |         border-bottom: 1px solid var(--border-color);
409 |       }
410 | 
411 |       .table tbody tr:hover {
412 |         background-color: var(--hover-bg);
413 |       }
414 | 
415 |       .database-header {
416 |         background-color: var(--card-bg);
417 |         padding: 10px 15px;
418 |         border-radius: 8px;
419 |         margin-bottom: 10px;
420 |         cursor: pointer;
421 |         transition: all 0.2s ease;
422 |         border: 1px solid var(--border-color);
423 |       }
424 | 
425 |       .database-header:hover {
426 |         background-color: var(--hover-bg);
427 |       }
428 | 
429 |       .database-header i {
430 |         transition: transform 0.3s ease;
431 |       }
432 | 
433 |       .collections-container {
434 |         margin-left: 20px;
435 |         padding-left: 10px;
436 |         border-left: 2px solid var(--border-color);
437 |       }
438 | 
439 |       .status-bar {
440 |         position: fixed;
441 |         bottom: 0;
442 |         left: 0;
443 |         right: 0;
444 |         background-color: var(--darker-bg);
445 |         padding: 8px 20px;
446 |         border-top: 1px solid var(--border-color);
447 |         display: flex;
448 |         justify-content: space-between;
449 |         align-items: center;
450 |       }
451 | 
452 |       .status-item {
453 |         display: flex;
454 |         align-items: center;
455 |         gap: 8px;
456 |       }
457 | 
458 |       .status-indicator {
459 |         width: 8px;
460 |         height: 8px;
461 |         border-radius: 50%;
462 |         background-color: var(--accent-color);
463 |       }
464 | 
465 |       .status-indicator.disconnected {
466 |         background-color: #ff4444;
467 |       }
468 | 
469 |       .sidebar-overlay {
470 |         position: fixed;
471 |         top: 0;
472 |         left: 0;
473 |         right: 0;
474 |         bottom: 0;
475 |         background-color: rgba(0, 0, 0, 0.5);
476 |         backdrop-filter: blur(2px);
477 |         z-index: 999;
478 |         opacity: 0;
479 |         pointer-events: none;
480 |         transition: opacity 0.3s ease;
481 |       }
482 | 
483 |       .sidebar-overlay.visible {
484 |         opacity: 1;
485 |         pointer-events: auto;
486 |       }
487 | 
488 |       @media (min-width: 992px) {
489 |         .sidebar-overlay {
490 |           display: none;
491 |         }
492 |       }
493 |     </style>
494 |   </head>
495 |   <body>
496 |     <div class="container-fluid">
497 |       <!-- Sidebar Overlay -->
498 |       <div class="sidebar-overlay" id="sidebarOverlay"></div>
499 | 
500 |       <!-- Sidebar -->
501 |       <div class="sidebar" id="sidebar">
502 |         <div class="sidebar-toggle" id="sidebarToggle">
503 |           <i class="bi bi-chevron-left"></i>
504 |         </div>
505 |         <div class="sidebar-content">
506 |           <h3 class="text-center mb-4" style="color: var(--accent-color)">
507 |             <i class="bi bi-database-fill me-2"></i>MongoDB Visualizer
508 |           </h3>
509 | 
510 |           <!-- Connection Form -->
511 |           <div class="connection-form">
512 |             <div class="mb-3">
513 |               <label for="connectionUrl" class="form-label">MongoDB URL</label>
514 |               <input
515 |                 type="text"
516 |                 class="form-control"
517 |                 id="connectionUrl"
518 |                 placeholder="mongodb://localhost:27017"
519 |               />
520 |             </div>
521 |             <button id="connectBtn" class="btn btn-neon w-100">
522 |               <i class="bi bi-plug me-2"></i>Connect
523 |             </button>
524 |           </div>
525 | 
526 |           <!-- Database List -->
527 |           <div class="database-list" id="databaseList">
528 |             <!-- Databases will be populated here -->
529 |           </div>
530 |         </div>
531 |       </div>
532 | 
533 |       <!-- Main Content -->
534 |       <div class="main-content" id="mainContent">
535 |         <div class="loading-spinner" id="loadingSpinner">
536 |           <div class="spinner">
537 |             <i class="bi bi-arrow-repeat"></i>
538 |           </div>
539 |         </div>
540 | 
541 |         <div class="document-viewer" id="documentViewer">
542 |           <div class="document-header">
543 |             <div class="document-title">
544 |               <i class="bi bi-table"></i>
545 |               <h4>Select a collection to view documents</h4>
546 |             </div>
547 |             <div class="document-actions">
548 |               <div class="search-box">
549 |                 <input
550 |                   type="text"
551 |                   id="searchInput"
552 |                   placeholder="Search documents..."
553 |                 />
554 |                 <i class="bi bi-search"></i>
555 |               </div>
556 |               <div class="view-options">
557 |                 <button class="view-option-btn active" data-view="table">
558 |                   <i class="bi bi-table"></i>
559 |                 </button>
560 |                 <button class="view-option-btn" data-view="json">
561 |                   <i class="bi bi-code-slash"></i>
562 |                 </button>
563 |               </div>
564 |             </div>
565 |           </div>
566 |           <div id="documentContent">
567 |             <div class="no-documents">
568 |               <i class="bi bi-database"></i>
569 |               <h4>No documents selected</h4>
570 |               <p>Select a collection from the sidebar to view its documents</p>
571 |             </div>
572 |           </div>
573 |         </div>
574 |       </div>
575 |     </div>
576 | 
577 |     <!-- Status Bar -->
578 |     <div class="status-bar">
579 |       <div class="status-item">
580 |         <div class="status-indicator disconnected" id="connectionStatus"></div>
581 |         <span>Disconnected</span>
582 |       </div>
583 |       <div class="status-item">
584 |         <span id="documentCount">No documents selected</span>
585 |       </div>
586 |     </div>
587 | 
588 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
589 |     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
590 |     <script src="renderer.js"></script>
591 |   </body>
592 | </html>
593 | 


--------------------------------------------------------------------------------