From 2614563549d005f0ff82dcd765f3b6ba96cdaa7e Mon Sep 17 00:00:00 2001
From: unknown <harsh0604@gmail.com>
Date: Thu, 24 Oct 2024 03:26:14 +0530
Subject: [PATCH 1/6] added changes

---
 .../AggregationPanel/AggregationPanel.js      |   3 +
 .../AggregationPanel/AggregationPanel.scss    |  81 +++++++++++-
 .../AggregationPanelComponents.js             | 121 +++++++++++++++++-
 .../Data/Browser/DataBrowser.react.js         |   4 +-
 4 files changed, 204 insertions(+), 5 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index 5cd5a0440..4e5715407 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -9,6 +9,7 @@ import {
   TableElement,
   TextElement,
   VideoElement,
+  PanelElement
 } from './AggregationPanelComponents';
 
 const AggregationPanel = ({
@@ -65,6 +66,8 @@ const AggregationPanel = ({
                     return <AudioElement key={idx} url={item.url} />;
                   case 'button':
                     return <ButtonElement key={idx} item={item} showNote={showNote} />;
+                  case 'panel':
+                    return <PanelElement key={idx} item={item} objectId={selectedObjectId} showNote={showNote} />;
                   default:
                     return null;
                 }
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 2bfda1414..89f735427 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -76,13 +76,14 @@
     text-align: center;
     border-radius: 5px;
     font-size: 14px;
+
     &:hover,
     &:focus {
         background-color: $darkBlue;
     }
 }
 
-.loading{
+.loading {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -96,4 +97,80 @@
     top: 50%;
     left: 50%;
     @include transform(translate(-50%, -50%));
-  }
\ No newline at end of file
+}
+
+.panelElement {
+
+    margin: 8px 0;
+    transition: all 0.3s ease;
+}
+
+.panelHeader {
+    display: flex;
+    border-left: 1px solid #e3e3ea;
+    align-items: center;
+    gap: 8px;
+}
+
+.expandButton {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    font-weight: 500;
+    color: #333;
+
+    &:hover {
+        background-color: #f5f5f5;
+    }
+
+    &.expanded {
+        font-weight: 600;
+    }
+}
+
+.refreshButton {
+    background: none;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    color: #666;
+    font-size: 16px;
+
+    &:hover {
+        color: #333;
+    }
+
+    &:disabled {
+        color: #ccc;
+        cursor: not-allowed;
+    }
+}
+
+.panelContent {
+    padding: 8px 0;
+}
+
+.error {
+    color: #d32f2f;
+    padding: 8px;
+    margin: 8px 0;
+    background-color: #ffebee;
+    border-radius: 4px;
+}
+
+.subheading {
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    margin: 16px 0 8px;
+}
+
+.loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index 2f876c17d..24402e092 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
+import LoaderDots from 'components/LoaderDots/LoaderDots.react';
 import styles from './AggregationPanel.scss';
+import Parse from 'parse';
 
 // Text Element Component
 export const TextElement = ({ text }) => (
@@ -95,3 +97,120 @@ export const ButtonElement = ({ item, showNote }) => {
     </div>
   );
 };
+
+export const PanelElement = ({ item, showNote, objectId, depth = 0 }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [panelData, setPanelData] = useState(null);
+  const [error, setError] = useState(null);
+
+  const fetchPanelData = async () => {
+    setIsLoading(true);
+    try {
+      const params = { objectId };
+      const result = await Parse.Cloud.run(item.cloudCodeFunction, params);
+      if (result?.panel?.segments) {
+        setPanelData(result);
+        setError(null);
+      } else {
+        const errorMsg = 'Improper JSON format';
+        setError(errorMsg);
+        showNote(errorMsg, true);
+      }
+    } catch (error) {
+      const errorMsg = error.message;
+      setError(errorMsg);
+      showNote(errorMsg, true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleToggle = async () => {
+    if ((!isExpanded && !panelData)) {
+      fetchPanelData();
+    }
+    setIsExpanded(prev => !prev);
+  };
+
+  const handleRefresh = () => {
+    setPanelData(null);
+    fetchPanelData();
+  };
+
+  const indentStyle = {
+    marginLeft: `${depth * 20}px`
+  };
+
+  return (
+    <div className={styles.panelElement} style={indentStyle}>
+      <div className={styles.panelHeader}>
+        <button
+          onClick={handleToggle}
+          className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}
+        >
+          {isExpanded ? '▼' : '▶'}
+          {item.title}
+        </button>
+        {isExpanded && (
+          <button
+            onClick={handleRefresh}
+            className={styles.refreshButton}
+            disabled={isLoading}
+          >
+            ↻
+          </button>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div className={styles.panelContent}>
+          {isLoading ? (
+            <div className={styles.loader}>
+              <LoaderDots />
+            </div>
+          ) : panelData && (
+            <div className={styles.nestedPanel}>
+              {panelData.panel.segments.map((segment, index) => (
+                <div key={index}>
+                  <h3 className={styles.heading}>{segment.title}</h3>
+                  <div className={styles.segmentItems}>
+                    {segment.items.map((nestedItem, idx) => {
+                      switch (nestedItem.type) {
+                        case 'panel':
+                          return (
+                            <PanelElement
+                              key={idx}
+                              item={nestedItem}
+                              showNote={showNote}
+                              depth={depth + 1}
+                            />
+                          );
+                        case 'text':
+                          return <TextElement key={idx} text={nestedItem.text} />;
+                        case 'keyValue':
+                          return <KeyValueElement key={idx} item={nestedItem} />;
+                        case 'table':
+                          return <TableElement key={idx} columns={nestedItem.columns} rows={nestedItem.rows} />;
+                        case 'image':
+                          return <ImageElement key={idx} url={nestedItem.url} />;
+                        case 'video':
+                          return <VideoElement key={idx} url={nestedItem.url} />;
+                        case 'audio':
+                          return <AudioElement key={idx} url={nestedItem.url} />;
+                        case 'button':
+                          return <ButtonElement key={idx} item={nestedItem} showNote={showNote} />;
+                        default:
+                          return null;
+                      }
+                    })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 90a5dd834..2deb8e09c 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -45,7 +45,7 @@ export default class DataBrowser extends React.Component {
       firstSelectedCell: null,
       selectedData: [],
       prevClassName: props.className,
-      panelWidth: 300,
+      panelWidth: 400,
       isResizing: false,
       maxWidth: window.innerWidth - 300,
       showAggregatedData: true,
@@ -591,7 +591,7 @@ export default class DataBrowser extends React.Component {
             <ResizableBox
               width={this.state.panelWidth}
               height={Infinity}
-              minConstraints={[100, Infinity]}
+              minConstraints={[400, Infinity]}
               maxConstraints={[this.state.maxWidth, Infinity]}
               onResizeStart={this.handleResizeStart} // Handle start of resizing
               onResizeStop={this.handleResizeStop} // Handle end of resizing

From f75b108e6a324f50b6d5929cf06f5c62ccd9c4fd Mon Sep 17 00:00:00 2001
From: unknown <harsh0604@gmail.com>
Date: Thu, 24 Oct 2024 03:37:28 +0530
Subject: [PATCH 2/6] fix lint

---
 src/components/AggregationPanel/AggregationPanelComponents.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index 24402e092..7dff02ee0 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -102,7 +102,6 @@ export const PanelElement = ({ item, showNote, objectId, depth = 0 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [panelData, setPanelData] = useState(null);
-  const [error, setError] = useState(null);
 
   const fetchPanelData = async () => {
     setIsLoading(true);
@@ -111,15 +110,12 @@ export const PanelElement = ({ item, showNote, objectId, depth = 0 }) => {
       const result = await Parse.Cloud.run(item.cloudCodeFunction, params);
       if (result?.panel?.segments) {
         setPanelData(result);
-        setError(null);
       } else {
         const errorMsg = 'Improper JSON format';
-        setError(errorMsg);
         showNote(errorMsg, true);
       }
     } catch (error) {
       const errorMsg = error.message;
-      setError(errorMsg);
       showNote(errorMsg, true);
     } finally {
       setIsLoading(false);

From d029823c2dc75a8eb04bd3e6a9113ffb45be6b94 Mon Sep 17 00:00:00 2001
From: unknown <harsh0604@gmail.com>
Date: Thu, 24 Oct 2024 16:38:15 +0530
Subject: [PATCH 3/6] update

---
 .../AggregationPanel/AggregationPanel.js      | 178 ++++++++++++++----
 .../AggregationPanel/AggregationPanel.scss    |  22 +--
 .../AggregationPanelComponents.js             | 113 -----------
 3 files changed, 142 insertions(+), 171 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index 4e5715407..473948032 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -1,6 +1,7 @@
 import LoaderDots from 'components/LoaderDots/LoaderDots.react';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styles from './AggregationPanel.scss';
+import Parse from 'parse';
 import {
   AudioElement,
   ButtonElement,
@@ -9,7 +10,6 @@ import {
   TableElement,
   TextElement,
   VideoElement,
-  PanelElement
 } from './AggregationPanelComponents';
 
 const AggregationPanel = ({
@@ -20,8 +20,14 @@ const AggregationPanel = ({
   errorAggregatedData,
   showNote,
   setSelectedObjectId,
-  selectedObjectId
+  selectedObjectId,
+  depth = 0,
+  cloudCodeFunction = null,
+  panelTitle = null,
 }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [nestedData, setNestedData] = useState(null);
+  const [isLoadingNested, setIsLoadingNested] = useState(false);
 
   useEffect(() => {
     if (Object.keys(errorAggregatedData).length !== 0) {
@@ -31,56 +37,150 @@ const AggregationPanel = ({
   }, [errorAggregatedData, setSelectedObjectId, setErrorAggregatedData]);
 
   const isLoading = useMemo(() =>
-    selectedObjectId && isLoadingCloudFunction && showAggregatedData,
-  [selectedObjectId, isLoadingCloudFunction, showAggregatedData]
+    depth === 0 && selectedObjectId && isLoadingCloudFunction && showAggregatedData,
+  [depth, selectedObjectId, isLoadingCloudFunction, showAggregatedData]
   );
 
   const shouldShowAggregatedData = useMemo(() =>
-    selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0, [selectedObjectId, showAggregatedData, data, errorAggregatedData]
+    depth === 0
+      ? (selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0)
+      : true,
+  [depth, selectedObjectId, showAggregatedData, data, errorAggregatedData]
   );
 
+  const fetchNestedData = useCallback(async () => {
+    setIsLoadingNested(true);
+    try {
+      const params = { objectId: selectedObjectId };
+      const result = await Parse.Cloud.run(cloudCodeFunction, params);
+      if (result?.panel?.segments) {
+        setNestedData(result);
+      } else {
+        const errorMsg = 'Improper JSON format';
+        showNote(errorMsg, true);
+      }
+    } catch (error) {
+      const errorMsg = error.message;
+      showNote(errorMsg, true);
+    } finally {
+      setIsLoadingNested(false);
+    }
+  }, [cloudCodeFunction, selectedObjectId, showNote]);
+
+  const handleToggle = useCallback(async () => {
+    if (!isExpanded && !nestedData && cloudCodeFunction) {
+      fetchNestedData();
+    }
+    setIsExpanded(prev => !prev);
+  }, [isExpanded, nestedData, cloudCodeFunction, fetchNestedData]);
+
+  const handleRefresh = useCallback(() => {
+    setNestedData(null);
+    fetchNestedData();
+  }, [fetchNestedData]);
+
+  const renderSegmentContent = (segment, index) => (
+    <div key={index} className={styles.segmentContainer}>
+      <h2 className={styles.heading}>{segment.title}</h2>
+      <div className={styles.segmentItems}>
+        {segment.items.map((item, idx) => {
+          switch (item.type) {
+            case 'text':
+              return <TextElement key={idx} text={item.text} />;
+            case 'keyValue':
+              return <KeyValueElement key={idx} item={item} />;
+            case 'table':
+              return <TableElement key={idx} columns={item.columns} rows={item.rows} />;
+            case 'image':
+              return <ImageElement key={idx} url={item.url} />;
+            case 'video':
+              return <VideoElement key={idx} url={item.url} />;
+            case 'audio':
+              return <AudioElement key={idx} url={item.url} />;
+            case 'button':
+              return <ButtonElement key={idx} item={item} showNote={showNote} />;
+            case 'panel':
+              return (
+                <div key={idx} className={styles.nestedPanelContainer}>
+                  <AggregationPanel
+                    data={{}}
+                    isLoadingCloudFunction={false}
+                    showAggregatedData={true}
+                    setErrorAggregatedData={setErrorAggregatedData}
+                    errorAggregatedData={errorAggregatedData}
+                    showNote={showNote}
+                    setSelectedObjectId={setSelectedObjectId}
+                    selectedObjectId={selectedObjectId}
+                    depth={depth + 1}
+                    cloudCodeFunction={item.cloudCodeFunction}
+                    panelTitle={item.title}
+                  />
+                </div>
+              );
+            default:
+              return null;
+          }
+        })}
+      </div>
+    </div>
+  );
+
+  if (depth > 0) {
+    return (
+      <div className={styles.nestedPanel} style={{ marginLeft: `${depth * 20}px` }}>
+        <div className={styles.nestedPanelHeader}>
+          <button
+            onClick={handleToggle}
+            className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}
+          >
+            <span>{isExpanded ? '▼' : '▶'}</span>
+            <span>{panelTitle}</span>
+          </button>
+          {isExpanded && (
+            <button
+              onClick={handleRefresh}
+              className={styles.refreshButton}
+              disabled={isLoadingNested}
+            >
+              <span className={styles.refreshIcon}>↻</span>
+            </button>
+          )}
+        </div>
+        {isExpanded && (
+          <div className={styles.nestedPanelContent}>
+            {isLoadingNested ? (
+              <div className={styles.loader}>
+                <LoaderDots />
+              </div>
+            ) : (
+              nestedData && nestedData.panel.segments.map((segment, index) =>
+                renderSegmentContent(segment, index)
+              )
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
-    <>
+    <div className={styles.aggregationPanel}>
       {isLoading ? (
         <div className={styles.center}>
           <LoaderDots />
         </div>
       ) : shouldShowAggregatedData ? (
-        data.panel.segments.map((segment, index) => (
-          <div key={index}>
-            <h2 className={styles.heading}>{segment.title}</h2>
-            <div className={styles.segmentItems}>
-              {segment.items.map((item, idx) => {
-                switch (item.type) {
-                  case 'text':
-                    return <TextElement key={idx} text={item.text} />;
-                  case 'keyValue':
-                    return <KeyValueElement key={idx} item={item} />;
-                  case 'table':
-                    return <TableElement key={idx} columns={item.columns} rows={item.rows} />;
-                  case 'image':
-                    return <ImageElement key={idx} url={item.url} />;
-                  case 'video':
-                    return <VideoElement key={idx} url={item.url} />;
-                  case 'audio':
-                    return <AudioElement key={idx} url={item.url} />;
-                  case 'button':
-                    return <ButtonElement key={idx} item={item} showNote={showNote} />;
-                  case 'panel':
-                    return <PanelElement key={idx} item={item} objectId={selectedObjectId} showNote={showNote} />;
-                  default:
-                    return null;
-                }
-              })}
-            </div>
-          </div>
-        ))
+        <div className={styles.mainContent}>
+          {data.panel.segments.map((segment, index) =>
+            renderSegmentContent(segment, index)
+          )}
+        </div>
       ) : (
-        <div className={styles.loading}>
-            No object selected.
+        <div className={styles.center}>
+          No object selected.
         </div>
       )}
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 89f735427..858a99db6 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -99,13 +99,12 @@
     @include transform(translate(-50%, -50%));
 }
 
-.panelElement {
-
+.nestedPanel {
     margin: 8px 0;
     transition: all 0.3s ease;
 }
 
-.panelHeader {
+.nestedPanelHeader {
     display: flex;
     border-left: 1px solid #e3e3ea;
     align-items: center;
@@ -150,25 +149,10 @@
     }
 }
 
-.panelContent {
+.nestedPanelContent {
     padding: 8px 0;
 }
 
-.error {
-    color: #d32f2f;
-    padding: 8px;
-    margin: 8px 0;
-    background-color: #ffebee;
-    border-radius: 4px;
-}
-
-.subheading {
-    font-size: 14px;
-    font-weight: 600;
-    color: #666;
-    margin: 16px 0 8px;
-}
-
 .loader {
     display: flex;
     align-items: center;
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index 7dff02ee0..e1a6ad1ba 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -97,116 +97,3 @@ export const ButtonElement = ({ item, showNote }) => {
     </div>
   );
 };
-
-export const PanelElement = ({ item, showNote, objectId, depth = 0 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [panelData, setPanelData] = useState(null);
-
-  const fetchPanelData = async () => {
-    setIsLoading(true);
-    try {
-      const params = { objectId };
-      const result = await Parse.Cloud.run(item.cloudCodeFunction, params);
-      if (result?.panel?.segments) {
-        setPanelData(result);
-      } else {
-        const errorMsg = 'Improper JSON format';
-        showNote(errorMsg, true);
-      }
-    } catch (error) {
-      const errorMsg = error.message;
-      showNote(errorMsg, true);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleToggle = async () => {
-    if ((!isExpanded && !panelData)) {
-      fetchPanelData();
-    }
-    setIsExpanded(prev => !prev);
-  };
-
-  const handleRefresh = () => {
-    setPanelData(null);
-    fetchPanelData();
-  };
-
-  const indentStyle = {
-    marginLeft: `${depth * 20}px`
-  };
-
-  return (
-    <div className={styles.panelElement} style={indentStyle}>
-      <div className={styles.panelHeader}>
-        <button
-          onClick={handleToggle}
-          className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}
-        >
-          {isExpanded ? '▼' : '▶'}
-          {item.title}
-        </button>
-        {isExpanded && (
-          <button
-            onClick={handleRefresh}
-            className={styles.refreshButton}
-            disabled={isLoading}
-          >
-            ↻
-          </button>
-        )}
-      </div>
-
-      {isExpanded && (
-        <div className={styles.panelContent}>
-          {isLoading ? (
-            <div className={styles.loader}>
-              <LoaderDots />
-            </div>
-          ) : panelData && (
-            <div className={styles.nestedPanel}>
-              {panelData.panel.segments.map((segment, index) => (
-                <div key={index}>
-                  <h3 className={styles.heading}>{segment.title}</h3>
-                  <div className={styles.segmentItems}>
-                    {segment.items.map((nestedItem, idx) => {
-                      switch (nestedItem.type) {
-                        case 'panel':
-                          return (
-                            <PanelElement
-                              key={idx}
-                              item={nestedItem}
-                              showNote={showNote}
-                              depth={depth + 1}
-                            />
-                          );
-                        case 'text':
-                          return <TextElement key={idx} text={nestedItem.text} />;
-                        case 'keyValue':
-                          return <KeyValueElement key={idx} item={nestedItem} />;
-                        case 'table':
-                          return <TableElement key={idx} columns={nestedItem.columns} rows={nestedItem.rows} />;
-                        case 'image':
-                          return <ImageElement key={idx} url={nestedItem.url} />;
-                        case 'video':
-                          return <VideoElement key={idx} url={nestedItem.url} />;
-                        case 'audio':
-                          return <AudioElement key={idx} url={nestedItem.url} />;
-                        case 'button':
-                          return <ButtonElement key={idx} item={nestedItem} showNote={showNote} />;
-                        default:
-                          return null;
-                      }
-                    })}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

From f9a39db85ddfdab3fb4ed8610664da8e13f911b9 Mon Sep 17 00:00:00 2001
From: unknown <harsh0604@gmail.com>
Date: Thu, 24 Oct 2024 16:41:13 +0530
Subject: [PATCH 4/6] fix lint

---
 src/components/AggregationPanel/AggregationPanelComponents.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index e1a6ad1ba..2f876c17d 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -1,7 +1,5 @@
-import React, { useState } from 'react';
-import LoaderDots from 'components/LoaderDots/LoaderDots.react';
+import React from 'react';
 import styles from './AggregationPanel.scss';
-import Parse from 'parse';
 
 // Text Element Component
 export const TextElement = ({ text }) => (

From aa72edef2b9c449021da78c6b87140b0ee038933 Mon Sep 17 00:00:00 2001
From: unknown <harsh0604@gmail.com>
Date: Mon, 4 Nov 2024 02:49:58 +0530
Subject: [PATCH 5/6] added changes

---
 .../AggregationPanel/AggregationPanel.js      | 33 +++++++-------
 .../AggregationPanel/AggregationPanel.scss    | 44 ++++++++++---------
 2 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index 473948032..3fbca8882 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -76,6 +76,7 @@ const AggregationPanel = ({
 
   const handleRefresh = useCallback(() => {
     setNestedData(null);
+    setIsExpanded(false);
     fetchNestedData();
   }, [fetchNestedData]);
 
@@ -128,23 +129,21 @@ const AggregationPanel = ({
   if (depth > 0) {
     return (
       <div className={styles.nestedPanel} style={{ marginLeft: `${depth * 20}px` }}>
-        <div className={styles.nestedPanelHeader}>
-          <button
-            onClick={handleToggle}
-            className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}
-          >
-            <span>{isExpanded ? '▼' : '▶'}</span>
-            <span>{panelTitle}</span>
-          </button>
-          {isExpanded && (
-            <button
-              onClick={handleRefresh}
-              className={styles.refreshButton}
-              disabled={isLoadingNested}
-            >
-              <span className={styles.refreshIcon}>↻</span>
-            </button>
-          )}
+        <div className={`${styles.nestedPanelHeader} ${isExpanded ? styles.expanded : ''}`} onClick={handleToggle}>
+          <span className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}>{panelTitle}</span>
+          <div>
+            {isExpanded && (
+              <button
+                onClick={handleRefresh}
+                className={styles.refreshButton}
+                disabled={isLoadingNested}
+              >
+                <span className={styles.refreshIcon}>↻</span>
+              </button>
+
+            )}
+            <span style={{ color: '#fff' }} >{isExpanded ? '▼' : '▲'}</span>
+          </div>
         </div>
         {isExpanded && (
           <div className={styles.nestedPanelContent}>
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 858a99db6..58edd2a41 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -11,14 +11,11 @@
 
 .segmentItems {
     font-size: 14px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 6px;
+    padding: 10px;
     display: flex;
     flex-direction: column;
-    border-left: 1px solid #e3e3ea;
     gap: 10px;
-}
+  }
 
 .keyValue {
     font-size: 14px;
@@ -100,31 +97,30 @@
 }
 
 .nestedPanel {
-    margin: 8px 0;
+    margin-right: -10px;
     transition: all 0.3s ease;
 }
 
 .nestedPanelHeader {
     display: flex;
-    border-left: 1px solid #e3e3ea;
     align-items: center;
+    justify-content: space-between;
     gap: 8px;
-}
+    border-left: 1px solid transparent; 
+    background-color: $blue;
+    color: $white;
+    cursor: pointer;
+    padding-right: 4px;
+    
+    &.expanded {                         
+      border-left-color: #e3e3ea;
+    }
+  }
 
 .expandButton {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background: none;
-    border: none;
+    display: inline;
     padding: 8px;
-    cursor: pointer;
     font-weight: 500;
-    color: #333;
-
-    &:hover {
-        background-color: #f5f5f5;
-    }
 
     &.expanded {
         font-weight: 600;
@@ -150,11 +146,17 @@
 }
 
 .nestedPanelContent {
-    padding: 8px 0;
+    padding: 0  0 8px 0;
 }
 
 .loader {
     display: flex;
     align-items: center;
     justify-content: center;
-}
\ No newline at end of file
+}
+
+.segmentContainer {
+    border-left: 1px solid #e3e3ea;    
+    border-bottom: 1px solid #e3e3ea;
+    margin-bottom: 16px;
+  }
\ No newline at end of file

From c3950d19c12435e5af996785bb48e43b96ad73f7 Mon Sep 17 00:00:00 2001
From: unknown <harsh0604@gmail.com>
Date: Mon, 4 Nov 2024 03:18:58 +0530
Subject: [PATCH 6/6] undo panel width size changess

---
 src/dashboard/Data/Browser/DataBrowser.react.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 2deb8e09c..90a5dd834 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -45,7 +45,7 @@ export default class DataBrowser extends React.Component {
       firstSelectedCell: null,
       selectedData: [],
       prevClassName: props.className,
-      panelWidth: 400,
+      panelWidth: 300,
       isResizing: false,
       maxWidth: window.innerWidth - 300,
       showAggregatedData: true,
@@ -591,7 +591,7 @@ export default class DataBrowser extends React.Component {
             <ResizableBox
               width={this.state.panelWidth}
               height={Infinity}
-              minConstraints={[400, Infinity]}
+              minConstraints={[100, Infinity]}
               maxConstraints={[this.state.maxWidth, Infinity]}
               onResizeStart={this.handleResizeStart} // Handle start of resizing
               onResizeStop={this.handleResizeStop} // Handle end of resizing