From 1be9edd3a15c9dd96f6580ba6690769ed7209790 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nat=C3=A1lia=20Cond=C3=AA?= <natalia.csouza98@gmail.com>
Date: Thu, 2 Oct 2025 08:05:08 -0300
Subject: [PATCH 1/2] =?UTF-8?q?Database=20Profiler=20=E2=80=93=20Implement?=
 =?UTF-8?q?=20Design=20Updates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DatabaseProfiler.react.js                 |   6 +-
 .../DatabaseProfiler/DatabaseProfiler.scss    | 108 ++++---
 .../DatabaseProfilerDetail.react.js           | 298 +++++++++---------
 3 files changed, 213 insertions(+), 199 deletions(-)

diff --git a/src/dashboard/DatabaseProfiler/DatabaseProfiler.react.js b/src/dashboard/DatabaseProfiler/DatabaseProfiler.react.js
index 350e2b019..bbe96374a 100644
--- a/src/dashboard/DatabaseProfiler/DatabaseProfiler.react.js
+++ b/src/dashboard/DatabaseProfiler/DatabaseProfiler.react.js
@@ -113,16 +113,16 @@ class DatabaseProfile extends DashboardView {
 
   renderHeaders() {
     return [
-      <TableHeader key="Operation Type" width={25}>
+      <TableHeader key="OperationType" width={25}>
         Operation Type
       </TableHeader>,
       <TableHeader key="Class" width={25}>
         Class
       </TableHeader>,
-      <TableHeader key="Time" width={25}>
+      <TableHeader key="ExecutionTime" width={25}>
         Execution Time (ms)
       </TableHeader>,
-      <TableHeader key="Time" width={25}>
+      <TableHeader key="ExecutedAt" width={25}>
         Executed At (UTC)
       </TableHeader>
     ];
diff --git a/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss b/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
index e26ee17d0..0321e3eb3 100644
--- a/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
+++ b/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
@@ -2,13 +2,27 @@
   z-index: 1000 !important;
 }
 
+code[class*="language-"], pre[class*="language-"] {
+  background: #111214 !important;
+}
+
+.pre-wrap {
+  max-height: auto;
+}
+
 .pageContainer {
   position: relative;
   height: 100vh;
   display: flex;
   flex-direction: column;
-  padding-top: 64px; /* Account for header */
-  overflow: hidden; /* Prevent double scrollbars */
+  padding-top: 64px;
+  /* Account for header */
+  overflow: hidden;
+  /* Prevent double scrollbars */
+}
+
+.marginTopContent {
+  margin-top: 80px;
 }
 
 .mainContent {
@@ -21,18 +35,19 @@
   margin-left: 10px;
   cursor: pointer;
   color: #ffffff;
-  
+
   &:hover {
     opacity: 0.8;
   }
 
   svg {
-    fill: currentColor;  // Make SVG icon inherit the text color
+    fill: currentColor; // Make SVG icon inherit the text color
   }
 }
 
 .row {
   transition: all 0.3s ease;
+
   &:hover {
     cursor: pointer;
     box-shadow: 0px 1px 0px 0px rgba(193, 226, 255, 0.16);
@@ -43,7 +58,8 @@
 .detailView {
   padding: 20px;
   background: #0c1e35;
-  margin-top: 0px; /* Account for toolbar height */
+  margin-top: 0px;
+  /* Account for toolbar height */
   box-sizing: border-box;
 }
 
@@ -93,10 +109,14 @@
 
 .detailSection {
   margin-bottom: 24px;
+  border-radius: 7px;
+  border: 0.1px solid #ffffff29;
+  padding: 20px 20px 10px 20px;
+  background-color: #10203a;
 
   h3 {
     color: #ffffff;
-    font-size: 14px;
+    font-size: 17px;
     margin-bottom: 12px;
     font-weight: 600;
   }
@@ -105,7 +125,7 @@
 .detailGrid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 16px;
+  gap: 5px;
   margin-bottom: 12px;
 
   &.twoColumns {
@@ -121,12 +141,11 @@
 
 .detailRow {
   display: flex;
+  padding: 5px;
   align-items: center;
-  padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.05);
   border-radius: 6px;
+  font-size: 15px;
   transition: all 0.2s ease;
-  min-height: 48px;
   box-sizing: border-box;
 
   &:hover {
@@ -135,12 +154,13 @@
 }
 
 .detailLabel {
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 500;
-  margin-right: 24px;
-  width: 160px;
+  color: #ffffff9c;
+  margin-right: 10px;
   flex-shrink: 0;
-  font-size: 13px;
+
+  &::after {
+    content: ":";
+  }
 }
 
 .detailValue {
@@ -151,17 +171,17 @@
 }
 
 .queryContainer {
-  background: rgba(255, 255, 255, 0.05);
-  padding: 12px;
   border-radius: 6px;
   font-size: 13px;
   width: 100%;
   line-height: 1.5;
   box-sizing: border-box;
-  max-height: 200px;
+  min-height: 200px;
   display: flex;
   flex-direction: column;
-  
+  margin-bottom: 20px;
+  position: relative;
+
   h4 {
     margin: 0 0 8px 0;
     font-size: 13px;
@@ -171,54 +191,40 @@
   pre {
     width: 100%;
     flex: 1;
-    overflow: auto;
     margin: 0;
-    padding: 8px;
-    background: rgba(0, 0, 0, 0.2);
+    background: #111214 !important;
+    margin: 0 !important;
     border-radius: 4px;
     font-size: 12px;
     white-space: pre-wrap;
-    word-break: break-all;
-    max-height: 150px;
-
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 3px;
-      
-      &:hover {
-        background: rgba(255, 255, 255, 0.3);
-      }
-    }
+    min-height: 200px;
+    border-radius: 4px;
+    padding: 0rem 1.5rem 1.5rem 0 !important;
+    overflow-x: auto;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    font-family: 'Roboto Mono', monospace !important;
+    padding-left: 3.5em !important;
   }
 }
 
-.title {
+.contentTitle {
+  background: #345070;
   color: #ffffff;
   font-size: 14px;
   font-weight: 500;
-  margin-bottom: 12px;
-}
+  padding: 8px 30px;
+  border-radius: 5px 5px 0px 0px;
 
-.code {
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 4px;
-  padding: 12px;
+  button {
+    float: right;
+  }
 }
 
 .booleanTag {
   display: inline-flex;
   align-items: center;
-  padding: 4px 8px;
+  padding: 4px 12px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
diff --git a/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js b/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
index f98ac6271..4d68ac2df 100644
--- a/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
+++ b/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
@@ -5,9 +5,42 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import React from 'react';
+
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ReactMarkdown from 'react-markdown';
 import styles from './DatabaseProfiler.scss';
 
+import Prism from 'prismjs';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+import 'prismjs/components/prism-json';
+// eslint-disable-next-line no-unused-vars
+import 'stylesheets/b4a-prisma.css';
+
+const handleCopy = async (value) => {
+  try {
+    await navigator.clipboard.writeText(value.trim());
+  } catch (err) {
+    console.error('Failed to copy text: ', err);
+  }
+};
+
+const CodeBlock = ({ language, value }) => {
+  useEffect(() => {
+    if (typeof Prism !== 'undefined') {
+      Prism.highlightAll();
+    }
+  }, [value, language]);
+
+  return (
+    <div className={styles.codeBlockContainer}>
+      <pre className="line-numbers"><code className={`language-${language}`}>{value.trim()}</code></pre>
+    </div>
+  );
+};
+
+
 const DatabaseProfilerDetail = ({ data }) => {
   if (!data) {
     return <div className={styles.detailContent}>No data available</div>;
@@ -47,7 +80,7 @@ const DatabaseProfilerDetail = ({ data }) => {
   };
 
   const renderDetailRow = (label, value) => (
-    <div className={styles.detailRow}>
+    <div key={`detail-${label}`} className={styles.detailRow}>
       <span className={styles.detailLabel}>{label}</span>
       <span className={styles.detailValue}>{value}</span>
     </div>
@@ -59,199 +92,174 @@ const DatabaseProfilerDetail = ({ data }) => {
     </span>
   );
 
+  const JsonCodeBlock = React.memo(({ title, data }) => {
+    const memoizedJson = React.useMemo(() => JSON.stringify(data, null, 2), [data]);
+    return (
+    <div className={styles.queryContainer}>
+      {title && 
+        <> 
+          <div className={styles.contentTitle}>
+            <span>{title}</span>
+            <button
+              onClick={() => handleCopy(memoizedJson)}
+              className={styles.copyButton}
+              title="Copy to clipboard"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+              </svg>
+            </button>
+          </div>
+        </>
+      }
+      <div className={styles.code}>
+        <ReactMarkdown
+          renderers={{
+            code: CodeBlock
+          }}
+        >{`~~~json
+${JSON.stringify(data, null, 2)}
+~~~`}</ReactMarkdown>
+      </div>
+    </div>
+  );
+});
+
+JsonCodeBlock.propTypes = {
+  title: PropTypes.string,
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
+};
+
+const DetailSection = React.memo(({ title, children }) => (
+    <div className={styles.detailSection}>
+      <h3>{title}</h3>
+      <div className={styles.detailGrid}>
+        {children}
+      </div>
+    </div>
+  ));
+
+DetailSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
+};
+
   const renderOperationSpecificDetails = () => {
     if (!command || command === 'unknown') {
       return (
-        <div className={styles.detailSection}>
-          <h3>Operation Details</h3>
-          <div className={styles.queryContainer}>
-            <pre className="language-javascript">{JSON.stringify(data, null, 2)}</pre>
-          </div>
-        </div>
+        <DetailSection title="Operation Details">
+          <JsonCodeBlock data={data} />
+        </DetailSection>
       );
     }
 
     switch (command) {
       case 'aggregate':
         return (
-          <div className={styles.detailSection}>
-            <h3>Aggregation Pipeline</h3>
-            <div className={styles.queryContainer}>
-              <pre className="language-javascript">{JSON.stringify(pipeline, null, 2)}</pre>
-            </div>
-          </div>
+          <DetailSection title="Aggregation Pipeline">
+            <JsonCodeBlock data={pipeline} />
+          </DetailSection>
         );
 
       case 'count':
         return (
-          <div className={styles.detailSection}>
-            <h3>Count Query</h3>
-            <div className={styles.queryContainer}>
-              <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-            </div>
-          </div>
+          <DetailSection title="Count Query">
+            <JsonCodeBlock data={query} />
+          </DetailSection>
         );
 
       case 'delete':
         return (
-          <div className={styles.detailSection}>
-            <h3>Delete Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Documents Removed', nRemoved || 0)}
-              <div className={styles.queryContainer}>
-                <h4>Delete Query</h4>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-            </div>
-          </div>
+          <DetailSection title="Delete Operation">
+            {renderDetailRow('Documents Removed', nRemoved || 0)}
+            <JsonCodeBlock title="Delete Query" data={query} />
+          </DetailSection>
         );
 
       case 'distinct':
         return (
-          <div className={styles.detailSection}>
-            <h3>Distinct Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Distinct Key', distinct?.key || '')}
-              <div className={styles.queryContainer}>
-                <h4>Distinct Query</h4>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-            </div>
-          </div>
+          <DetailSection title="Distinct Operation">
+            {renderDetailRow('Distinct Key', distinct?.key || '')}
+            <JsonCodeBlock title="Distinct Query" data={query} />
+          </DetailSection>
         );
 
       case 'find':
       case 'query':
         return (
-          <div className={styles.detailSection}>
-            <h3>Query Details</h3>
-            <div style={{ display: Object.keys(sort).length > 0 ? 'flex' : 'flow', gap: '20px' }}>
-              <div className={styles.queryContainer}>
-                <div className={styles.title}>Find Query</div>
-                <div className={styles.code}>
-                  <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-                </div>
-              </div>
-
+          <DetailSection title="Query Details">
+            <div style={{ display: 'flow', gap: '20px' }}>
+              <JsonCodeBlock title="Find Query" data={query} />
               {Object.keys(sort).length > 0 && (
-                <div className={styles.queryContainer}>
-                  <div className={styles.title}>Sort Criteria</div>
-                  <div className={styles.code}>
-                    <pre className="language-javascript">{JSON.stringify(sort, null, 2)}</pre>
-                  </div>
-                </div>
+                <JsonCodeBlock title="Sort Criteria" data={sort} />
               )}
             </div>
-          </div>
+          </DetailSection>
         );
 
       case 'findAndModify':
         return (
-          <div className={styles.detailSection}>
-            <h3>Find and Modify Operation</h3>
-            <div className={styles.detailGrid}>
-              {limit > 0 && renderDetailRow('Limit', limit)}
-              <div className={styles.queryContainer}>
-                <h4>Query Document</h4>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-              {Object.keys(sort).length > 0 && (
-                <div className={styles.queryContainer}>
-                  <h4>Sort Criteria</h4>
-                  <pre className="language-javascript">{JSON.stringify(sort, null, 2)}</pre>
-                </div>
-              )}
-              {update && (
-                <div className={styles.queryContainer}>
-                  <h4>Update Operations</h4>
-                  <pre className="language-javascript">{JSON.stringify(update, null, 2)}</pre>
-                </div>
-              )}
-            </div>
-          </div>
+          <DetailSection title="Find and Modify Operation">
+            {limit > 0 && renderDetailRow('Limit', limit)}
+            <JsonCodeBlock title="Query Document" data={query} />
+            {Object.keys(sort).length > 0 && (
+              <JsonCodeBlock title="Sort Criteria" data={sort} />
+            )}
+            {update && (
+              <JsonCodeBlock title="Update Operations" data={update} />
+            )}
+          </DetailSection>
         );
 
       case 'getMore':
         return (
-          <div className={styles.detailSection}>
-            <h3>Get More Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Documents Returned', docsReturned)}
-            </div>
-          </div>
+          <DetailSection title="Get More Operation">
+            {renderDetailRow('Documents Returned', docsReturned)}
+          </DetailSection>
         );
 
       case 'insert':
         return (
-          <div className={styles.detailSection}>
-            <h3>Insert Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Documents Inserted', nInserted || 0)}
-            </div>
-          </div>
+          <DetailSection title="Insert Operation">
+            {renderDetailRow('Documents Inserted', nInserted || 0)}
+          </DetailSection>
         );
 
       case 'mapReduce':
         return (
-          <div className={styles.detailSection}>
-            <h3>Map-Reduce Operation</h3>
-            <div className={styles.detailGrid}>
-              {mapReduce && (
-                <>
-                  <div className={styles.queryContainer}>
-                    <h4>Map Function</h4>
-                    <pre className="language-javascript">{mapReduce.map}</pre>
-                  </div>
-                  <div className={styles.queryContainer}>
-                    <h4>Reduce Function</h4>
-                    <pre className="language-javascript">{mapReduce.reduce}</pre>
-                  </div>
-                  {mapReduce.finalize && (
-                    <div className={styles.queryContainer}>
-                      <h4>Finalize Function</h4>
-                      <pre className="language-javascript">{mapReduce.finalize}</pre>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          </div>
+          <DetailSection title="Map-Reduce Operation">
+            {mapReduce && (
+              <>
+                <JsonCodeBlock title="Map Function" data={mapReduce.map} />
+                <JsonCodeBlock title="Reduce Function" data={mapReduce.reduce} />
+                {mapReduce.finalize && (
+                  <JsonCodeBlock title="Finalize Function" data={mapReduce.finalize} />
+                )}
+              </>
+            )}
+          </DetailSection>
         );
 
       case 'update':
         return (
-          <div className={styles.detailSection}>
-            <h3>Update Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Documents Modified', nModified || 0)}
-              <div className={styles.queryContainer}>
-                <h4>Query</h4>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-              <div className={styles.queryContainer}>
-                <h4>Update</h4>
-                <pre className="language-javascript">{JSON.stringify(update, null, 2)}</pre>
-              </div>
-            </div>
-          </div>
+          <DetailSection title="Update Operation">
+            {renderDetailRow('Documents Modified', nModified || 0)}
+            <JsonCodeBlock title="Query" data={query} />
+            <JsonCodeBlock title="Update" data={update} />
+          </DetailSection>
         );
 
       case 'remove':
         return (
           <>
-            <div className={styles.detailSection}>
-              <h3>Remove Operation</h3>
-              <div className={styles.detailGrid}>
-                {renderDetailRow('Documents Removed', nRemoved || 0)}
-                {renderDetailRow('Limit', limit || 0)}
-              </div>
-            </div>
-            <div className={styles.detailSection}>
-              <h3>Query Details</h3>
-              <div className={styles.queryContainer}>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-            </div>
+            <DetailSection title="Remove Operation">
+              {renderDetailRow('Documents Removed', nRemoved || 0)}
+              {renderDetailRow('Limit', limit || 0)}
+            </DetailSection>
+            <DetailSection title="Query Details">
+              <JsonCodeBlock data={query} />
+            </DetailSection>
           </>
         );
       default:
@@ -266,20 +274,20 @@ const DatabaseProfilerDetail = ({ data }) => {
   };
 
   const renderOverview = () => (
-    <div className={styles.detailSection}>
+    <div key="overview-section" className={styles.detailSection}>
       <h3>Operation Overview</h3>
       <div className={styles.detailGrid}>
         {renderDetailRow('Command Type', command)}
         {renderDetailRow('Class', className)}
         {(command === 'find' || command === 'query') && renderDetailRow('Limit', limit || 0)}
-        {renderDetailRow('Total Execution Time', `${duration}ms`)}
-        {renderDetailRow('Last Execution Time', formatDate(ts))}
+        {renderDetailRow('Duration', `${duration}ms`)}
+        {renderDetailRow('Timestamp', formatDate(ts))}
       </div>
     </div>
   );
 
   return (
-    <div style={{ padding: '20px' }}>
+    <div style={{ paddingTop: '0px', paddingLeft: '80px', paddingRight: '80px' }}>
       {renderOverview()}
 
       {shouldShowPerformanceMetrics() && (

From 9ffb52b5039284e7843489981314786127e2af64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nat=C3=A1lia=20Cond=C3=AA?= <natalia.csouza98@gmail.com>
Date: Thu, 2 Oct 2025 20:22:50 -0300
Subject: [PATCH 2/2] publish structure changes

---
 .../DatabaseProfiler/DatabaseProfiler.scss    |  13 +-
 .../DatabaseProfilerDetail.react.js           | 206 ++++++++----------
 2 files changed, 92 insertions(+), 127 deletions(-)

diff --git a/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss b/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
index 0321e3eb3..ac3a8f745 100644
--- a/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
+++ b/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
@@ -117,7 +117,7 @@ code[class*="language-"], pre[class*="language-"] {
   h3 {
     color: #ffffff;
     font-size: 17px;
-    margin-bottom: 12px;
+    margin-bottom: 20px;
     font-weight: 600;
   }
 }
@@ -127,16 +127,6 @@ code[class*="language-"], pre[class*="language-"] {
   grid-template-columns: 1fr;
   gap: 5px;
   margin-bottom: 12px;
-
-  &.twoColumns {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (max-width: 1200px) {
-    &.twoColumns {
-      grid-template-columns: 1fr;
-    }
-  }
 }
 
 .detailRow {
@@ -171,6 +161,7 @@ code[class*="language-"], pre[class*="language-"] {
 }
 
 .queryContainer {
+  margin-top: 20px;
   border-radius: 6px;
   font-size: 13px;
   width: 100%;
diff --git a/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js b/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
index 4d68ac2df..687cc85f8 100644
--- a/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
+++ b/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
@@ -60,6 +60,7 @@ const DatabaseProfilerDetail = ({ data }) => {
     responseLength = 0,
     hasSort = false,
     hasIndex = false,
+    executionStats,
     command = op || 'unknown',  // Fallback to op if command is not present
     limit = 0,
     update,
@@ -146,125 +147,69 @@ DetailSection.propTypes = {
 };
 
   const renderOperationSpecificDetails = () => {
-    if (!command || command === 'unknown') {
-      return (
-        <DetailSection title="Operation Details">
-          <JsonCodeBlock data={data} />
-        </DetailSection>
-      );
-    }
+    let sectionTitle = 'Operation Details', subTitle = '', json, sortJson, updateJson;
 
     switch (command) {
+      case 'unknown':
+        subTitle = 'Command Details';
+        json = data;
+        break;
       case 'aggregate':
-        return (
-          <DetailSection title="Aggregation Pipeline">
-            <JsonCodeBlock data={pipeline} />
-          </DetailSection>
-        );
-
+        subTitle = 'Pipeline';
+        json = pipeline;
+        break;
       case 'count':
-        return (
-          <DetailSection title="Count Query">
-            <JsonCodeBlock data={query} />
-          </DetailSection>
-        );
-
+        subTitle = 'Query';
+        json = query;
+        sortJson = sort;
+        break;
       case 'delete':
-        return (
-          <DetailSection title="Delete Operation">
-            {renderDetailRow('Documents Removed', nRemoved || 0)}
-            <JsonCodeBlock title="Delete Query" data={query} />
-          </DetailSection>
-        );
-
+      case 'remove':
+        subTitle = 'Query';
+        json = query;
+        break;
       case 'distinct':
-        return (
-          <DetailSection title="Distinct Operation">
-            {renderDetailRow('Distinct Key', distinct?.key || '')}
-            <JsonCodeBlock title="Distinct Query" data={query} />
-          </DetailSection>
-        );
-
+        subTitle = 'Query';
+        json = query;
+        break;
       case 'find':
       case 'query':
-        return (
-          <DetailSection title="Query Details">
-            <div style={{ display: 'flow', gap: '20px' }}>
-              <JsonCodeBlock title="Find Query" data={query} />
-              {Object.keys(sort).length > 0 && (
-                <JsonCodeBlock title="Sort Criteria" data={sort} />
-              )}
-            </div>
-          </DetailSection>
-        );
-
+        subTitle = 'Query';
+        json = query;
+        sortJson = sort;
+        break;
       case 'findAndModify':
-        return (
-          <DetailSection title="Find and Modify Operation">
-            {limit > 0 && renderDetailRow('Limit', limit)}
-            <JsonCodeBlock title="Query Document" data={query} />
-            {Object.keys(sort).length > 0 && (
-              <JsonCodeBlock title="Sort Criteria" data={sort} />
-            )}
-            {update && (
-              <JsonCodeBlock title="Update Operations" data={update} />
-            )}
-          </DetailSection>
-        );
-
-      case 'getMore':
-        return (
-          <DetailSection title="Get More Operation">
-            {renderDetailRow('Documents Returned', docsReturned)}
-          </DetailSection>
-        );
-
-      case 'insert':
-        return (
-          <DetailSection title="Insert Operation">
-            {renderDetailRow('Documents Inserted', nInserted || 0)}
-          </DetailSection>
-        );
-
+        subTitle = 'Query';
+        json = query;
+        sortJson = sort;
+        updateJson = update;
+        break;
       case 'mapReduce':
-        return (
-          <DetailSection title="Map-Reduce Operation">
-            {mapReduce && (
-              <>
-                <JsonCodeBlock title="Map Function" data={mapReduce.map} />
-                <JsonCodeBlock title="Reduce Function" data={mapReduce.reduce} />
-                {mapReduce.finalize && (
-                  <JsonCodeBlock title="Finalize Function" data={mapReduce.finalize} />
-                )}
-              </>
-            )}
-          </DetailSection>
-        );
-
+        subTitle = 'Map-Reduce Operation';
+        json = {
+          map: mapReduce?.map,
+          reduce: mapReduce?.reduce,
+          finalize: mapReduce?.finalize
+        };
+        break;
       case 'update':
-        return (
-          <DetailSection title="Update Operation">
-            {renderDetailRow('Documents Modified', nModified || 0)}
-            <JsonCodeBlock title="Query" data={query} />
-            <JsonCodeBlock title="Update" data={update} />
-          </DetailSection>
-        );
-
-      case 'remove':
-        return (
-          <>
-            <DetailSection title="Remove Operation">
-              {renderDetailRow('Documents Removed', nRemoved || 0)}
-              {renderDetailRow('Limit', limit || 0)}
-            </DetailSection>
-            <DetailSection title="Query Details">
-              <JsonCodeBlock data={query} />
-            </DetailSection>
-          </>
-        );
+        subTitle = 'Query';
+        json = query;
+        sortJson = sort;
+        updateJson = update;
+        break;
       default:
         return null;
     }
+
+    return (
+      <DetailSection title={sectionTitle}>
+        {json && Object.keys(json).length > 0 && <JsonCodeBlock title={subTitle} data={json} />}
+        {sortJson && Object.keys(sortJson).length > 0 && <JsonCodeBlock title="Sort Criteria" data={sortJson} />}
+        {updateJson && Object.keys(updateJson).length > 0 && <JsonCodeBlock title="Update Operations" data={updateJson} />}
+        {distinct && Object.keys(distinct).length > 0 && <JsonCodeBlock title="Distinct" data={distinct} />}
+      </DetailSection>
+    );
   };
 
   const shouldShowPerformanceMetrics = () => {
@@ -273,18 +218,46 @@ DetailSection.propTypes = {
     return commandsWithMetrics.includes(command);
   };
 
-  const renderOverview = () => (
-    <div key="overview-section" className={styles.detailSection}>
-      <h3>Operation Overview</h3>
-      <div className={styles.detailGrid}>
-        {renderDetailRow('Command Type', command)}
-        {renderDetailRow('Class', className)}
-        {(command === 'find' || command === 'query') && renderDetailRow('Limit', limit || 0)}
-        {renderDetailRow('Duration', `${duration}ms`)}
-        {renderDetailRow('Timestamp', formatDate(ts))}
+  const getOperationDetails = () => {
+    switch (command) {
+      case 'find':
+      case 'query':
+        const queryTotal = executionStats?.nReturned || docsReturned;
+        return queryTotal !== undefined ? { title: 'Documents Returned', value: queryTotal } : null;
+      case 'count':
+        const countTotal = docsReturned || executionStats?.nReturned;
+        return countTotal !== undefined ? { title: 'Documents Counted', value: countTotal } : null;
+      case 'delete':
+      case 'remove':
+        return nRemoved ? { title: 'Documents Removed', value: nRemoved } : null;
+      case 'insert':
+        return nInserted ? { title: 'Documents Inserted', value: nInserted } : null;
+      case 'update':
+        return nModified ? { title: 'Documents Modified', value: nModified } : null;
+      case 'distinct':
+        return distinct?.key ? { title: 'Distinct Key', value: distinct.key } : null;
+      default:
+        return null;
+    }
+  };
+
+  const renderOverview = () => {
+
+    return (
+      <div key="overview-section" className={styles.detailSection}>
+        <h3>Operation Overview</h3>
+        <div className={styles.detailGrid}>
+          {renderDetailRow('Command Type', command)}
+          {renderDetailRow('Class', className)}
+          {(command === 'find' || command === 'query') && renderDetailRow('Limit', limit || 0)}
+          {renderDetailRow('Duration', `${duration}ms`)}
+          {renderDetailRow('Timestamp', formatDate(ts))}
+        </div>
       </div>
-    </div>
-  );
+    );
+  };
+
+  const operationDetails = getOperationDetails();
 
   return (
     <div style={{ paddingTop: '0px', paddingLeft: '80px', paddingRight: '80px' }}>
@@ -297,6 +270,7 @@ DetailSection.propTypes = {
             {renderDetailRow('Keys Examined', keysExamined)}
             {renderDetailRow('Docs Examined', docsExamined)}
             {renderDetailRow('Response Length', responseLength)}
+            {operationDetails && renderDetailRow(operationDetails.title, operationDetails.value)}
           </div>
         </div>
       )}