From 0c4acabef504a7f37134e864accf330d0ae19c1b Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Sun, 21 Jul 2024 00:36:44 +0530
Subject: [PATCH 01/31] initial commit for aggreation side panel

---
 package-lock.json                             |  38 ++++++
 package.json                                  |   2 +
 .../BrowserCell/BrowserCell.react.js          |   4 +
 src/components/BrowserRow/BrowserRow.react.js |   4 +
 src/components/Toolbar/Toolbar.react.js       |  12 ++
 src/dashboard/Dashboard.js                    |  23 ++--
 src/dashboard/Data/Browser/Browser.scss       |  13 ++-
 .../Data/Browser/BrowserTable.react.js        | 109 ++++++++++++++----
 .../Data/Browser/BrowserToolbar.react.js      |   5 +
 .../Data/Browser/DataBrowser.react.js         |  25 +++-
 10 files changed, 203 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 532bee97b4..8e0df610af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,9 +39,11 @@
         "react-dnd": "10.0.2",
         "react-dnd-html5-backend": "10.0.2",
         "react-dom": "16.14.0",
+        "react-draggable": "^4.4.6",
         "react-helmet": "6.1.0",
         "react-json-view": "1.21.3",
         "react-popper-tooltip": "4.4.2",
+        "react-resizable": "^3.0.5",
         "react-router-dom": "6.4.1",
         "regenerator-runtime": "0.13.11"
       },
@@ -7802,6 +7804,15 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -20468,6 +20479,20 @@
         "react": "^16.14.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz",
+      "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
@@ -20622,6 +20647,19 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "node_modules/react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.1.tgz",
diff --git a/package.json b/package.json
index 75b2497476..81edda0845 100644
--- a/package.json
+++ b/package.json
@@ -65,9 +65,11 @@
     "react-dnd": "10.0.2",
     "react-dnd-html5-backend": "10.0.2",
     "react-dom": "16.14.0",
+    "react-draggable": "^4.4.6",
     "react-helmet": "6.1.0",
     "react-json-view": "1.21.3",
     "react-popper-tooltip": "4.4.2",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "6.4.1",
     "regenerator-runtime": "0.13.11"
   },
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index 52cccf903b..6d59c0fda4 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -556,6 +556,8 @@ export default class BrowserCell extends Component {
       current,
       onEditChange,
       setCopyableValue,
+      setSelectedObjectId,
+      callCloudFunction,
       onPointerCmdClick,
       row,
       col,
@@ -628,6 +630,8 @@ export default class BrowserCell extends Component {
             onPointerCmdClick(value);
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
+            setSelectedObjectId(this.props.objectId);
+            callCloudFunction(this.props.objectId, this.props.className);
             handleCellClick(e, row, col);
           }
         }}
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index c2054942b2..c1e5dea02a 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -36,6 +36,8 @@ export default class BrowserRow extends Component {
       selection,
       selectRow,
       setCopyableValue,
+      setSelectedObjectId,
+      callCloudFunction,
       setCurrent,
       setEditing,
       setRelation,
@@ -141,6 +143,8 @@ export default class BrowserRow extends Component {
               isRequired={isRequired}
               markRequiredFieldRow={markRequiredFieldRow}
               setCopyableValue={setCopyableValue}
+              setSelectedObjectId={setSelectedObjectId}
+              callCloudFunction={callCloudFunction}
               setContextMenu={setContextMenu}
               onEditSelectedRow={onEditSelectedRow}
               showNote={this.props.showNote}
diff --git a/src/components/Toolbar/Toolbar.react.js b/src/components/Toolbar/Toolbar.react.js
index 5be4513fac..04be655dd8 100644
--- a/src/components/Toolbar/Toolbar.react.js
+++ b/src/components/Toolbar/Toolbar.react.js
@@ -135,6 +135,18 @@ const Toolbar = props => {
       </div>
       {props?.selectedData?.length ? <Stats data={props.selectedData} /> : null}
       <div className={styles.actions}>{props.children}</div>
+      <button
+        onClick={props.togglePanel}
+        style={{
+          position: 'absolute',
+          right: '5px',
+          bottom: '5px',
+          border: 'none',
+          padding: '4px 3px',
+        }}
+      >
+        {props.isPanelVisible ? 'Hide Panel' : 'Show Panel'}
+      </button>
     </div>
   );
 };
diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index e30a1824f8..821c16d5c4 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -52,7 +52,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import Playground from './Data/Playground/Playground.react';
 import DashboardSettings from './Settings/DashboardSettings/DashboardSettings.react';
-import Security           from './Settings/Security/Security.react';
+import Security from './Settings/Security/Security.react';
 
 const ShowSchemaOverview = false; //In progress features. Change false to true to work on this feature.
 
@@ -121,6 +121,7 @@ export default class Dashboard extends React.Component {
     get('/parse-dashboard-config.json')
       .then(({ apps, newFeaturesInLatestVersion = [] }) => {
         this.setState({ newFeaturesInLatestVersion });
+
         const appInfoPromises = apps.map(app => {
           if (app.serverURL.startsWith('https://api.parse.com/1')) {
             //api.parse.com doesn't have feature availability endpoint, fortunately we know which features
@@ -179,6 +180,10 @@ export default class Dashboard extends React.Component {
           configLoadingState: AsyncStatus.FAILED,
         });
       });
+
+    get('/parse-dashboard-config.json').then(data => {
+      console.log('in get /parse-dashboard-config.json',data);
+    });
   }
 
   render() {
@@ -214,14 +219,14 @@ export default class Dashboard extends React.Component {
 
     const SettingsRoute = (
       <Route element={<SettingsData />}>
-        <Route path='dashboard' element={<DashboardSettings />} />
-        <Route path='security' element={<Security />} />
-        <Route path='general' element={<GeneralSettings />} />
-        <Route path='keys' element={<SecuritySettings />} />
-        <Route path='users' element={<UsersSettings />} />
-        <Route path='push' element={<PushSettings />} />
-        <Route path='hosting' element={<HostingSettings />} />
-        <Route index element={<Navigate replace to='dashboard' />} />
+        <Route path="dashboard" element={<DashboardSettings />} />
+        <Route path="security" element={<Security />} />
+        <Route path="general" element={<GeneralSettings />} />
+        <Route path="keys" element={<SecuritySettings />} />
+        <Route path="users" element={<UsersSettings />} />
+        <Route path="push" element={<PushSettings />} />
+        <Route path="hosting" element={<HostingSettings />} />
+        <Route index element={<Navigate replace to="dashboard" />} />
       </Route>
     );
 
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index ba6b92c463..e7496961fe 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -264,4 +264,15 @@ body:global(.expanded) {
       position: relative;
     }
   }
-} 
\ No newline at end of file
+} 
+
+.resizablePanel {
+  :global(.react-resizable-handle) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    cursor: col-resize;
+  }
+}
\ No newline at end of file
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 6bf22627fc..41dba7f932 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -15,6 +15,7 @@ import encode from 'parse/lib/browser/encode';
 import React from 'react';
 import styles from 'dashboard/Data/Browser/Browser.scss';
 import Button from 'components/Button/Button.react';
+import { ResizableBox } from 'react-resizable';
 import { CurrentApp } from 'context/currentApp';
 
 const MAX_ROWS = 200; // Number of rows to render at any time
@@ -30,9 +31,12 @@ export default class BrowserTable extends React.Component {
 
     this.state = {
       offset: 0,
+      panelWidth: 300,
+      isResizing: false,
     };
     this.handleScroll = this.handleScroll.bind(this);
     this.tableRef = React.createRef();
+    this.handleResize = this.handleResize.bind(this);
   }
 
   componentWillReceiveProps(props) {
@@ -56,10 +60,43 @@ export default class BrowserTable extends React.Component {
 
   componentDidMount() {
     this.tableRef.current.addEventListener('scroll', this.handleScroll);
+    // window.addEventListener('mousedown', this.handleMouseDown);
+    // window.addEventListener('mousemove', this.handleMouseMove);
+    // window.addEventListener('mouseup', this.handleMouseUp);
   }
 
   componentWillUnmount() {
     this.tableRef.current.removeEventListener('scroll', this.handleScroll);
+    // window.removeEventListener('mousedown', this.handleMouseDown);
+    // window.removeEventListener('mousemove', this.handleMouseMove);
+    // window.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  handleResize(event, { size }) {
+    this.setState({ panelWidth: size.width });
+  }
+
+  handleMouseDown() {
+    this.setState({ isResizing: true });
+    console.log('handleMouseDown');
+    document.body.style.cursor = 'ew-resize';
+  }
+
+  handleMouseMove(e) {
+    console.log('handleMouseMove', this.state.isResizing);
+    if (!this.state.isResizing) {
+      return;
+    }
+    this.setState({ panelWidth: e.clientX });
+  }
+
+  handleMouseUp() {
+    console.log('handleMouseUp', this.state.isResizing);
+    if (!this.state.isResizing) {
+      return;
+    }
+    this.setState({ isResizing: false });
+    document.body.style.cursor = 'default';
   }
 
   handleScroll() {
@@ -163,6 +200,8 @@ export default class BrowserTable extends React.Component {
                     setEditing={this.props.setEditing}
                     setRelation={this.props.setRelation}
                     setCopyableValue={this.props.setCopyableValue}
+                    setSelectedObjectId={this.props.setSelectedObjectId}
+                    callCloudFunction={this.props.callCloudFunction}
                     setContextMenu={this.props.setContextMenu}
                     onEditSelectedRow={this.props.onEditSelectedRow}
                     markRequiredFieldRow={this.props.markRequiredFieldRow}
@@ -236,6 +275,8 @@ export default class BrowserTable extends React.Component {
               setEditing={this.props.setEditing}
               setRelation={this.props.setRelation}
               setCopyableValue={this.props.setCopyableValue}
+              setSelectedObjectId={this.props.setSelectedObjectId}
+              callCloudFunction={this.props.callCloudFunction}
               setContextMenu={this.props.setContextMenu}
               onEditSelectedRow={this.props.onEditSelectedRow}
               markRequiredFieldRow={this.props.markRequiredFieldRow}
@@ -308,6 +349,7 @@ export default class BrowserTable extends React.Component {
             onPointerClick={this.props.onPointerClick}
             onPointerCmdClick={this.props.onPointerCmdClick}
             onFilterChange={this.props.onFilterChange}
+            callCloudFunction={this.props.callCloudFunction}
             order={this.props.order}
             readOnlyFields={READ_ONLY}
             row={i}
@@ -319,6 +361,8 @@ export default class BrowserTable extends React.Component {
             setEditing={this.props.setEditing}
             setRelation={this.props.setRelation}
             setCopyableValue={this.props.setCopyableValue}
+            setSelectedObjectId={this.props.setSelectedObjectId}
+            callCloudFunction={this.props.callCloudFunction}
             setContextMenu={this.props.setContextMenu}
             onEditSelectedRow={this.props.onEditSelectedRow}
             showNote={this.props.showNote}
@@ -508,26 +552,51 @@ export default class BrowserTable extends React.Component {
 
     return (
       <div className={styles.browser}>
-        {table}
-        <DataBrowserHeaderBar
-          selected={
-            !!this.props.selection &&
-            !!this.props.data &&
-            Object.values(this.props.selection).filter(checked => checked).length ===
-              this.props.data.length
-          }
-          selectAll={checked =>
-            this.props.data.forEach(({ id }) => this.props.selectRow(id, checked))
-          }
-          headers={headers}
-          updateOrdering={this.props.updateOrdering}
-          readonly={!!this.props.relation || !!this.props.isUnique}
-          handleDragDrop={this.props.handleHeaderDragDrop}
-          onResize={this.props.handleResize}
-          onAddColumn={this.props.onAddColumn}
-          preventSchemaEdits={this.context.preventSchemaEdits}
-          isDataLoaded={!!this.props.data}
-        />
+        <div>
+          <DataBrowserHeaderBar
+            selected={
+              !!this.props.selection &&
+              !!this.props.data &&
+              Object.values(this.props.selection).filter(checked => checked).length ===
+                this.props.data.length
+            }
+            selectAll={checked =>
+              this.props.data.forEach(({ id }) => this.props.selectRow(id, checked))
+            }
+            headers={headers}
+            updateOrdering={this.props.updateOrdering}
+            readonly={!!this.props.relation || !!this.props.isUnique}
+            handleDragDrop={this.props.handleHeaderDragDrop}
+            onResize={this.props.handleResize}
+            onAddColumn={this.props.onAddColumn}
+            preventSchemaEdits={this.context.preventSchemaEdits}
+            isDataLoaded={!!this.props.data}
+          />
+
+          {table}
+        </div>
+        {this.props.isPanelVisible && (
+          <ResizableBox
+            width={this.state.panelWidth}
+            height={Infinity}
+            minConstraints={[200, Infinity]}
+            maxConstraints={[600, Infinity]}
+            onResize={this.handleResize}
+            resizeHandles={['w']}
+            className={styles.resizablePanel}
+            style={{
+              position: 'fixed',
+              top: '96px',
+              right: '0',
+              bottom: '16px',
+              overflow: 'auto',
+              backgroundColor: 'rgb(244, 244, 244)',
+              zIndex: 100,
+            }}
+          >
+            <div> HEADING </div>
+          </ResizableBox>
+        )}
       </div>
     );
   }
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
index d2f08c837b..a344c40cf0 100644
--- a/src/dashboard/Data/Browser/BrowserToolbar.react.js
+++ b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -76,6 +76,9 @@ const BrowserToolbar = ({
   selectedData,
   allClasses,
   allClassesSchema,
+
+  togglePanel,
+  isPanelVisible
 }) => {
   const selectionLength = Object.keys(selection).length;
   const isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
@@ -268,6 +271,8 @@ const BrowserToolbar = ({
       subsection={subsection}
       details={details.join(' \u2022 ')}
       selectedData={selectedData}
+      togglePanel={togglePanel}
+      isPanelVisible={isPanelVisible}
     >
       {onAddRow && (
         <a className={classes.join(' ')} onClick={onClick}>
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 1df0b97607..280315a8a7 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -33,9 +33,10 @@ export default class DataBrowser extends React.Component {
       current: null,
       editing: false,
       copyableValue: undefined,
+      selectedObjectId: undefined,
       simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className),
       allClassesSchema: this.getAllClassesSchema(props.schema,props.classes),
-
+      isPanelVisible: false,
       selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
       firstSelectedCell: null,
       selectedData: [],
@@ -44,13 +45,15 @@ export default class DataBrowser extends React.Component {
     this.handleKey = this.handleKey.bind(this);
     this.handleHeaderDragDrop = this.handleHeaderDragDrop.bind(this);
     this.handleResize = this.handleResize.bind(this);
+    this.togglePanelVisibility = this.togglePanelVisibility.bind(this);
     this.setCurrent = this.setCurrent.bind(this);
     this.setEditing = this.setEditing.bind(this);
     this.handleColumnsOrder = this.handleColumnsOrder.bind(this);
     this.setCopyableValue = this.setCopyableValue.bind(this);
+    this.setSelectedObjectId = this.setSelectedObjectId.bind(this);
+    this.callCloudFunction = this.callCloudFunction.bind(this);
     this.setContextMenu = this.setContextMenu.bind(this);
     this.handleCellClick = this.handleCellClick.bind(this);
-
     this.saveOrderTimeout = null;
   }
 
@@ -110,6 +113,10 @@ export default class DataBrowser extends React.Component {
     }, 1000);
   }
 
+  togglePanelVisibility() {
+    this.setState(prevState => ({ isPanelVisible: !prevState.isPanelVisible }));
+  }
+
   getAllClassesSchema(schema) {
     const allClasses = Object.keys(schema.data.get('classes').toObject());
     const schemaSimplifiedData = {};
@@ -338,6 +345,15 @@ export default class DataBrowser extends React.Component {
     }
   }
 
+  setSelectedObjectId(selectedObjectId) {
+    if(this.state.selectedObjectId !== selectedObjectId) {
+      this.setState({ selectedObjectId });
+    }
+  }
+
+  callCloudFunction(objectId, className){
+    console.log('Calling cloud function', objectId, className);
+  }
   setContextMenu(contextMenuX, contextMenuY, contextMenuItems) {
     this.setState({ contextMenuX, contextMenuY, contextMenuItems });
   }
@@ -439,11 +455,14 @@ export default class DataBrowser extends React.Component {
           setEditing={this.setEditing}
           setCurrent={this.setCurrent}
           setCopyableValue={this.setCopyableValue}
+          setSelectedObjectId={this.setSelectedObjectId}
+          callCloudFunction={this.callCloudFunction}
           setContextMenu={this.setContextMenu}
           onFilterChange={this.props.onFilterChange}
           onFilterSave={this.props.onFilterSave}
           selectedCells={this.state.selectedCells}
           handleCellClick={this.handleCellClick}
+          isPanelVisible={this.state.isPanelVisible}
           {...other}
         />
         <BrowserToolbar
@@ -471,6 +490,8 @@ export default class DataBrowser extends React.Component {
           selectedData={this.state.selectedData}
           allClasses={Object.keys(this.props.schema.data.get('classes').toObject())}
           allClassesSchema={this.state.allClassesSchema}
+          togglePanel={this.togglePanelVisibility}
+          isPanelVisible={this.state.isPanelVisible}
           {...other}
         />
 

From 16b8519628ffa898afa9b055478f9f19bcd80910 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Sun, 28 Jul 2024 18:42:02 +0530
Subject: [PATCH 02/31] updates

---
 .../AggregationPanel/AggregationPanel.js      | 51 ++++++++++
 .../AggregationPanel/AggregationPanel.scss    | 56 +++++++++++
 .../AggregationPanelComponents.js             | 87 ++++++++++++++++
 .../BrowserCell/BrowserCell.react.js          | 10 +-
 src/components/BrowserRow/BrowserRow.react.js |  4 +
 .../DataBrowserHeaderBar.react.js             |  4 +-
 .../DataBrowserHeaderBar.scss                 |  5 +-
 src/components/Toolbar/Toolbar.react.js       |  7 +-
 src/dashboard/Dashboard.js                    |  3 -
 src/dashboard/Data/Browser/Browser.react.js   | 99 ++++++++++++++++---
 .../Data/Browser/BrowserTable.react.js        | 24 ++---
 .../Data/Browser/BrowserToolbar.react.js      |  5 +-
 .../Data/Browser/DataBrowser.react.js         | 60 +++++++----
 13 files changed, 360 insertions(+), 55 deletions(-)
 create mode 100644 src/components/AggregationPanel/AggregationPanel.js
 create mode 100644 src/components/AggregationPanel/AggregationPanel.scss
 create mode 100644 src/components/AggregationPanel/AggregationPanelComponents.js

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
new file mode 100644
index 0000000000..cdafe3b466
--- /dev/null
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  TextElement,
+  KeyValueElement,
+  TableElement,
+  ImageElement,
+  VideoElement,
+  AudioElement,
+  ButtonElement,
+} from './AggregationPanelComponents';
+import styles from './AggregationPanel.scss';
+const AggregationPanel = ({ data }) => {
+  console.log('data aggregation panel', data);
+  return (
+    <>
+      {Object.keys(data).length !== 0 ? (
+        data.panel.segments.map((segment, index) => (
+          <div key={index}>
+            <h2 className={styles.sdsdsdsdheading}>{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} />;
+                  default:
+                    return null;
+                }
+              })}
+            </div>
+          </div>
+        ))
+      ) : (
+        <div>'loading...'</div>
+      )}
+    </>
+  );
+};
+
+export default AggregationPanel;
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
new file mode 100644
index 0000000000..7046f035dc
--- /dev/null
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -0,0 +1,56 @@
+@import 'stylesheets/globals.scss';
+
+.sdsdsdsdheading{
+    font-size: 18px;
+    margin-bottom: 15px;
+    margin-top: 0;
+    padding: 6px;
+    padding-left: 10px;
+    background-color: $blue;
+    color: $white;
+}
+
+.segmentItems{
+    padding-left: 10px;
+    padding-right: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.keyValue{
+    display: flex;
+    gap: 36px;
+}
+
+.video{
+    width: 100%;
+    height: 100%;
+}
+.image{
+    width: 100%;
+    height: 100%;
+}
+
+.audio{
+    width: 100%;
+}
+
+.segmentItems table, .segmentItems th, .segmentItems td {
+    border: 1px solid #ddd;
+}
+.segmentItems th, .segmentItems td {
+    padding: 8px;
+    text-align: left;
+}
+
+.button{
+    display: block;
+        width: 100%;
+        padding: 10px;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        margin-bottom: 15px;
+}
\ No newline at end of file
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
new file mode 100644
index 0000000000..d36852ce00
--- /dev/null
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import styles from './AggregationPanel.scss';
+// Text Element Component
+export const TextElement = ({ text }) => (
+  <div className="text-element">
+    <p>{text}</p>
+  </div>
+);
+
+// Key-Value Element Component
+export const KeyValueElement = ({ item }) => (
+  <div className={styles.keyValue}>
+    <strong>{item.key}:</strong>
+    {item.url ? <a href={item.url}>{item.value}</a> : <span>{item.value}</span>}
+  </div>
+);
+
+// Table Element Component
+export const TableElement = ({ columns, rows }) => (
+  <div className="table-element">
+    <table>
+      <thead>
+        <tr>
+          {columns.map((column, idx) => (
+            <th key={idx}>{column.name}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, idx) => (
+          <tr key={idx}>
+            {columns.map((column, colIdx) => (
+              <td key={colIdx}>{row[column.name]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+// Image Element Component
+export const ImageElement = ({ url }) => (
+  <div className="image-element">
+    <img src={url} alt="Image" className={styles.image}/>
+  </div>
+);
+
+// Video Element Component
+export const VideoElement = ({ url }) => (
+  <div className="video-element">
+    <video controls className={styles.video}>
+      <source src={url} type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  </div>
+);
+
+// Audio Element Component
+export const AudioElement = ({ url }) => (
+  <div className="audio-element">
+    <audio controls className={styles.audio}>
+      <source src={url} type="audio/mpeg" />
+      Your browser does not support the audio element.
+    </audio>
+  </div>
+);
+
+// Button Element Component
+export const ButtonElement = ({ item }) => {
+  const handleClick = () => {
+    fetch(item.action.url, {
+      method: item.action.method,
+      headers: item.action.headers,
+      body: JSON.stringify(item.action.body),
+    })
+      .then(response => response.json())
+      .then(data => console.log(data))
+      .catch(error => console.error('Error:', error));
+  };
+
+  return (
+    <div className="button-element">
+      <button onClick={handleClick} className={styles.button}>{item.text}</button>
+    </div>
+  );
+};
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index 6d59c0fda4..b351dfffd7 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -556,8 +556,10 @@ export default class BrowserCell extends Component {
       current,
       onEditChange,
       setCopyableValue,
+      selectedObjectId,
       setSelectedObjectId,
       callCloudFunction,
+      isPanelVisible,
       onPointerCmdClick,
       row,
       col,
@@ -630,8 +632,12 @@ export default class BrowserCell extends Component {
             onPointerCmdClick(value);
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
-            setSelectedObjectId(this.props.objectId);
-            callCloudFunction(this.props.objectId, this.props.className);
+            if(selectedObjectId !== this.props.objectId){
+              if(isPanelVisible){
+                setSelectedObjectId(this.props.objectId);
+                callCloudFunction(this.props.objectId, this.props.className);
+              }
+            }
             handleCellClick(e, row, col);
           }
         }}
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index c1e5dea02a..cca3caa103 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -36,8 +36,10 @@ export default class BrowserRow extends Component {
       selection,
       selectRow,
       setCopyableValue,
+      selectedObjectId,
       setSelectedObjectId,
       callCloudFunction,
+      isPanelVisible,
       setCurrent,
       setEditing,
       setRelation,
@@ -143,7 +145,9 @@ export default class BrowserRow extends Component {
               isRequired={isRequired}
               markRequiredFieldRow={markRequiredFieldRow}
               setCopyableValue={setCopyableValue}
+              selectedObjectId={selectedObjectId}
               setSelectedObjectId={setSelectedObjectId}
+              isPanelVisible={isPanelVisible}
               callCloudFunction={callCloudFunction}
               setContextMenu={setContextMenu}
               onEditSelectedRow={onEditSelectedRow}
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index e714759376..f70ee227a7 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -76,7 +76,9 @@ export default class DataBrowserHeaderBar extends React.Component {
     if (onAddColumn) {
       const finalStyle = {};
       if (headers.length % 2) {
-        finalStyle.background = 'rgba(224,224,234,0.10)';
+        finalStyle.background = '#726F85';
+      }else {
+        finalStyle.background = '#66637A';
       }
 
       elements.push(
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
index df45061d13..3fe4cfc4f7 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -11,7 +11,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  height: 30px;
+  height: 0;
   background: #66637a;
   white-space: nowrap;
   display: inline-block;
@@ -52,7 +52,8 @@
   vertical-align: top;
   text-align: center;
   width: 30px;
-  background: rgba(224,224,234,0.10);
+  // background: rgba(224,224,234,0.10);
+  background: rgb(114, 111, 133)
 }
 
 .handle {
diff --git a/src/components/Toolbar/Toolbar.react.js b/src/components/Toolbar/Toolbar.react.js
index 04be655dd8..ea1ca8c34d 100644
--- a/src/components/Toolbar/Toolbar.react.js
+++ b/src/components/Toolbar/Toolbar.react.js
@@ -135,7 +135,7 @@ const Toolbar = props => {
       </div>
       {props?.selectedData?.length ? <Stats data={props.selectedData} /> : null}
       <div className={styles.actions}>{props.children}</div>
-      <button
+      {props.classwiseCloudFunctions && props.classwiseCloudFunctions[props.className] && <button
         onClick={props.togglePanel}
         style={{
           position: 'absolute',
@@ -143,10 +143,13 @@ const Toolbar = props => {
           bottom: '5px',
           border: 'none',
           padding: '4px 3px',
+          width:' 100px',
+          background: 'rgb(114, 111, 133)',
+          color: 'white'
         }}
       >
         {props.isPanelVisible ? 'Hide Panel' : 'Show Panel'}
-      </button>
+      </button>}
     </div>
   );
 };
diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index 821c16d5c4..abf0f2a6cf 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -181,9 +181,6 @@ export default class Dashboard extends React.Component {
         });
       });
 
-    get('/parse-dashboard-config.json').then(data => {
-      console.log('in get /parse-dashboard-config.json',data);
-    });
   }
 
   render() {
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 88f07a5998..82826c16b4 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -40,6 +40,9 @@ import * as ClassPreferences from 'lib/ClassPreferences';
 import { Helmet } from 'react-helmet';
 import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
+import { get } from 'lib/AJAX';
+import { setBasePath } from 'lib/AJAX';
+import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
 
 // The initial and max amount of rows fetched by lazy loading
 const MAX_ROWS_FETCHED = 200;
@@ -103,7 +106,12 @@ class Browser extends DashboardView {
       draggedRowSelection: false,
 
       classes: {},
-      allClassesSchema: {}
+      allClassesSchema: {},
+
+      configData: {},
+      classwiseCloudFunctions: {},
+
+      AggregationPanelData: {},
     };
 
     this.addLocation = this.addLocation.bind(this);
@@ -173,6 +181,9 @@ class Browser extends DashboardView {
     this.onMouseDownRowCheckBox = this.onMouseDownRowCheckBox.bind(this);
     this.onMouseUpRowCheckBox = this.onMouseUpRowCheckBox.bind(this);
     this.onMouseOverRowCheckBox = this.onMouseOverRowCheckBox.bind(this);
+    this.classAndCloudFuntionMap = this.classAndCloudFuntionMap.bind(this);
+    this.fetchAggregationPanelData = this.fetchAggregationPanelData.bind(this);
+    this.setAggregationPanelData = this.setAggregationPanelData.bind(this);
 
     this.dataBrowserRef = React.createRef();
 
@@ -200,6 +211,11 @@ class Browser extends DashboardView {
   componentDidMount() {
     this.addLocation(this.props.params.appId);
     window.addEventListener('mouseup', this.onMouseUpRowCheckBox);
+    setBasePath('/');
+    get('/parse-dashboard-config.json').then(data => {
+      this.setState({ configData: data });
+      this.classAndCloudFuntionMap(this.state.configData);
+    });
   }
 
   componentWillUnmount() {
@@ -229,11 +245,33 @@ class Browser extends DashboardView {
     if (!nextProps.params.className && nextProps.schema.data.get('classes')) {
       const t = nextProps.schema.data.get('classes');
       this.classes = Object.keys(t.toObject());
-      this.allClassesSchema = this.getAllClassesSchema(this.classes ,nextProps.schema.data.get('classes'));
+      this.allClassesSchema = this.getAllClassesSchema(
+        this.classes,
+        nextProps.schema.data.get('classes')
+      );
       this.redirectToFirstClass(nextProps.schema.data.get('classes'), nextContext);
     }
   }
 
+  fetchAggregationPanelData(objectId, className) {
+    const params = {
+      objectId: objectId,
+    };
+    const cloudCodeFunction = this.state.classwiseCloudFunctions[className][0].cloudCodeFunction;
+
+    Parse.Cloud.run(cloudCodeFunction, params).then(
+      result => {
+        this.setState({ AggregationPanelData: result });
+      },
+      error => {
+        console.log('error', error);
+      }
+    );
+  }
+
+  setAggregationPanelData(data) {
+    this.setState({ AggregationPanelData: data });
+  }
   addLocation(appId) {
     if (window.localStorage) {
       let pathname = null;
@@ -259,6 +297,27 @@ class Browser extends DashboardView {
     }
   }
 
+  classAndCloudFuntionMap(data) {
+    const classMap = {};
+
+    data.apps.forEach(app => {
+      app.infoPanel.forEach(panel => {
+        panel.classes.forEach(className => {
+          if (!classMap[className]) {
+            classMap[className] = [];
+          }
+          classMap[className].push({
+            title: panel.title,
+            cloudCodeFunction: panel.cloudCodeFunction,
+            classes: panel.classes,
+          });
+        });
+      });
+    });
+
+    this.setState({ classwiseCloudFunctions: classMap });
+  }
+
   removeLocation() {
     if (window.localStorage) {
       const lastLocation = {
@@ -563,7 +622,7 @@ class Browser extends DashboardView {
     }
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
-        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' created';
+        const msg = objectSaved.className + " with id '" + objectSaved.id + "' created";
         this.showNote(msg, false);
 
         const state = { data: this.state.data };
@@ -666,7 +725,7 @@ class Browser extends DashboardView {
 
     obj.save(null, { useMasterKey: true }).then(
       objectSaved => {
-        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' ' + 'created';
+        const msg = objectSaved.className + " with id '" + objectSaved.id + "' " + 'created';
         this.showNote(msg, false);
 
         const state = {
@@ -763,9 +822,9 @@ class Browser extends DashboardView {
     }
   }
 
-  getAllClassesSchema(allClasses , allClassesData) {
+  getAllClassesSchema(allClasses, allClassesData) {
     const schemaSimplifiedData = {};
-    allClasses.forEach((className) => {
+    allClasses.forEach(className => {
       const classSchema = allClassesData.get(className);
       if (classSchema) {
         schemaSimplifiedData[className] = {};
@@ -1068,7 +1127,11 @@ class Browser extends DashboardView {
       },
     ]);
     window.open(
-      generatePath(this.context, `browser/${className}?filters=${encodeURIComponent(filters)}`, true),
+      generatePath(
+        this.context,
+        `browser/${className}?filters=${encodeURIComponent(filters)}`,
+        true
+      ),
       '_blank'
     );
   }
@@ -1121,7 +1184,7 @@ class Browser extends DashboardView {
     const { useMasterKey } = this.state;
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
-        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' updated';
+        const msg = objectSaved.className + " with id '" + objectSaved.id + "' updated";
         this.showNote(msg, false);
 
         const state = {
@@ -1249,7 +1312,7 @@ class Browser extends DashboardView {
             let deletedNote;
 
             if (toDeleteObjectIds.length == 1) {
-              deletedNote = className + ' with id \'' + toDeleteObjectIds[0] + '\' deleted';
+              deletedNote = className + " with id '" + toDeleteObjectIds[0] + "' deleted";
             } else {
               deletedNote = toDeleteObjectIds.length + ' ' + className + ' objects deleted';
             }
@@ -1277,7 +1340,7 @@ class Browser extends DashboardView {
             if (error.code === Parse.Error.AGGREGATE_ERROR) {
               if (error.errors.length == 1) {
                 errorDeletingNote =
-                  'Error deleting ' + className + ' with id \'' + error.errors[0].object.id + '\'';
+                  'Error deleting ' + className + " with id '" + error.errors[0].object.id + "'";
               } else if (error.errors.length < toDeleteObjectIds.length) {
                 errorDeletingNote =
                   'Error deleting ' +
@@ -1294,7 +1357,7 @@ class Browser extends DashboardView {
             } else {
               if (toDeleteObjectIds.length == 1) {
                 errorDeletingNote =
-                  'Error deleting ' + className + ' with id \'' + toDeleteObjectIds[0] + '\'';
+                  'Error deleting ' + className + " with id '" + toDeleteObjectIds[0] + "'";
               } else {
                 errorDeletingNote =
                   'Error deleting ' + toDeleteObjectIds.length + ' ' + className + ' objects';
@@ -1445,17 +1508,19 @@ class Browser extends DashboardView {
         this.setState(prevState => ({
           processedScripts: prevState.processedScripts + 1,
         }));
-        const note = (typeof response === 'object' ? JSON.stringify(response) : response) || `Ran script "${script.title}" on "${object.id}".`;
+        const note =
+          (typeof response === 'object' ? JSON.stringify(response) : response) ||
+          `Ran script "${script.title}" on "${object.id}".`;
         this.showNote(note);
       }
       this.refresh();
     } catch (e) {
       this.showNote(e.message, true);
       console.log(`Could not run ${script.title}: ${e}`);
-    } finally{
-      this.setState(({
+    } finally {
+      this.setState({
         processedScripts: 0,
-      }));
+      });
     }
   }
 
@@ -1969,6 +2034,10 @@ class Browser extends DashboardView {
             onMouseUpRowCheckBox={this.onMouseUpRowCheckBox}
             onMouseOverRowCheckBox={this.onMouseOverRowCheckBox}
             classes={this.classes}
+            classwiseCloudFunctions={this.state.classwiseCloudFunctions}
+            callCloudFunction={this.fetchAggregationPanelData}
+            AggregationPanelData={this.state.AggregationPanelData}
+            setAggregationPanelData={this.setAggregationPanelData}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 41dba7f932..8801fc680f 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -17,6 +17,7 @@ import styles from 'dashboard/Data/Browser/Browser.scss';
 import Button from 'components/Button/Button.react';
 import { ResizableBox } from 'react-resizable';
 import { CurrentApp } from 'context/currentApp';
+import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
 
 const MAX_ROWS = 200; // Number of rows to render at any time
 const ROWS_OFFSET = 160;
@@ -31,7 +32,7 @@ export default class BrowserTable extends React.Component {
 
     this.state = {
       offset: 0,
-      panelWidth: 300,
+      panelWidth: 400,
       isResizing: false,
     };
     this.handleScroll = this.handleScroll.bind(this);
@@ -58,18 +59,12 @@ export default class BrowserTable extends React.Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount() { 
     this.tableRef.current.addEventListener('scroll', this.handleScroll);
-    // window.addEventListener('mousedown', this.handleMouseDown);
-    // window.addEventListener('mousemove', this.handleMouseMove);
-    // window.addEventListener('mouseup', this.handleMouseUp);
   }
 
   componentWillUnmount() {
     this.tableRef.current.removeEventListener('scroll', this.handleScroll);
-    // window.removeEventListener('mousedown', this.handleMouseDown);
-    // window.removeEventListener('mousemove', this.handleMouseMove);
-    // window.removeEventListener('mouseup', this.handleMouseUp);
   }
 
   handleResize(event, { size }) {
@@ -200,8 +195,10 @@ export default class BrowserTable extends React.Component {
                     setEditing={this.props.setEditing}
                     setRelation={this.props.setRelation}
                     setCopyableValue={this.props.setCopyableValue}
+                    selectedObjectId={this.props.selectedObjectId}
                     setSelectedObjectId={this.props.setSelectedObjectId}
                     callCloudFunction={this.props.callCloudFunction}
+                    isPanelVisible={this.props.isPanelVisible}
                     setContextMenu={this.props.setContextMenu}
                     onEditSelectedRow={this.props.onEditSelectedRow}
                     markRequiredFieldRow={this.props.markRequiredFieldRow}
@@ -275,8 +272,10 @@ export default class BrowserTable extends React.Component {
               setEditing={this.props.setEditing}
               setRelation={this.props.setRelation}
               setCopyableValue={this.props.setCopyableValue}
+              selectedObjectId={this.props.selectedObjectId}
               setSelectedObjectId={this.props.setSelectedObjectId}
               callCloudFunction={this.props.callCloudFunction}
+              isPanelVisible={this.props.isPanelVisible}
               setContextMenu={this.props.setContextMenu}
               onEditSelectedRow={this.props.onEditSelectedRow}
               markRequiredFieldRow={this.props.markRequiredFieldRow}
@@ -361,8 +360,9 @@ export default class BrowserTable extends React.Component {
             setEditing={this.props.setEditing}
             setRelation={this.props.setRelation}
             setCopyableValue={this.props.setCopyableValue}
+            selectedObjectId={this.props.selectedObjectId}
             setSelectedObjectId={this.props.setSelectedObjectId}
-            callCloudFunction={this.props.callCloudFunction}
+            isPanelVisible={this.props.isPanelVisible}
             setContextMenu={this.props.setContextMenu}
             onEditSelectedRow={this.props.onEditSelectedRow}
             showNote={this.props.showNote}
@@ -579,8 +579,8 @@ export default class BrowserTable extends React.Component {
           <ResizableBox
             width={this.state.panelWidth}
             height={Infinity}
-            minConstraints={[200, Infinity]}
-            maxConstraints={[600, Infinity]}
+            minConstraints={[400, Infinity]}
+            maxConstraints={[1140, Infinity]}
             onResize={this.handleResize}
             resizeHandles={['w']}
             className={styles.resizablePanel}
@@ -594,7 +594,7 @@ export default class BrowserTable extends React.Component {
               zIndex: 100,
             }}
           >
-            <div> HEADING </div>
+            <AggregationPanel data={this.props.AggregationPanelData}/>
           </ResizableBox>
         )}
       </div>
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
index a344c40cf0..b8e44cc038 100644
--- a/src/dashboard/Data/Browser/BrowserToolbar.react.js
+++ b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -78,7 +78,8 @@ const BrowserToolbar = ({
   allClassesSchema,
 
   togglePanel,
-  isPanelVisible
+  isPanelVisible,
+  classwiseCloudFunctions
 }) => {
   const selectionLength = Object.keys(selection).length;
   const isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
@@ -265,6 +266,7 @@ const BrowserToolbar = ({
   const showLogin = () => loginDialogRef.current.handleOpen();
   return (
     <Toolbar
+      className={className}
       relation={relation}
       filters={filters}
       section={relation ? `Relation <${relation.targetClassName}>` : 'Class'}
@@ -273,6 +275,7 @@ const BrowserToolbar = ({
       selectedData={selectedData}
       togglePanel={togglePanel}
       isPanelVisible={isPanelVisible}
+      classwiseCloudFunctions={classwiseCloudFunctions}
     >
       {onAddRow && (
         <a className={classes.join(' ')} onClick={onClick}>
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 280315a8a7..54ea60e5af 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -35,11 +35,12 @@ export default class DataBrowser extends React.Component {
       copyableValue: undefined,
       selectedObjectId: undefined,
       simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className),
-      allClassesSchema: this.getAllClassesSchema(props.schema,props.classes),
+      allClassesSchema: this.getAllClassesSchema(props.schema, props.classes),
       isPanelVisible: false,
       selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
       firstSelectedCell: null,
       selectedData: [],
+      prevClassName: props.className,
     };
 
     this.handleKey = this.handleKey.bind(this);
@@ -51,7 +52,6 @@ export default class DataBrowser extends React.Component {
     this.handleColumnsOrder = this.handleColumnsOrder.bind(this);
     this.setCopyableValue = this.setCopyableValue.bind(this);
     this.setSelectedObjectId = this.setSelectedObjectId.bind(this);
-    this.callCloudFunction = this.callCloudFunction.bind(this);
     this.setContextMenu = this.setContextMenu.bind(this);
     this.handleCellClick = this.handleCellClick.bind(this);
     this.saveOrderTimeout = null;
@@ -71,7 +71,7 @@ export default class DataBrowser extends React.Component {
         current: null,
         editing: false,
         simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className),
-        allClassesSchema: this.getAllClassesSchema(props.schema,props.classes),
+        allClassesSchema: this.getAllClassesSchema(props.schema, props.classes),
       });
     } else if (
       Object.keys(props.columns).length !== Object.keys(this.props.columns).length ||
@@ -91,6 +91,17 @@ export default class DataBrowser extends React.Component {
       firstSelectedCell: null,
       selectedData: [],
     });
+    if (props && props.className) {
+      if (!props.classwiseCloudFunctions[props.className]) {
+        this.setState({ isPanelVisible: false });
+        this.setState({ selectedObjectId: undefined });
+      }
+    } else {
+      this.setState({ isPanelVisible: false });
+      this.setState({ selectedObjectId: undefined });
+    }
+
+    this.checkClassNameChange(this.state.prevClassName, props.className);
   }
 
   componentDidMount() {
@@ -115,12 +126,17 @@ export default class DataBrowser extends React.Component {
 
   togglePanelVisibility() {
     this.setState(prevState => ({ isPanelVisible: !prevState.isPanelVisible }));
+
+    if (!this.state.isPanelVisible) {
+      this.setState({ selectedObjectId: undefined });
+      this.props.setAggregationPanelData({});
+    }
   }
 
   getAllClassesSchema(schema) {
     const allClasses = Object.keys(schema.data.get('classes').toObject());
     const schemaSimplifiedData = {};
-    allClasses.forEach((className) => {
+    allClasses.forEach(className => {
       const classSchema = schema.data.get('classes').get(className);
       if (classSchema) {
         schemaSimplifiedData[className] = {};
@@ -136,6 +152,17 @@ export default class DataBrowser extends React.Component {
     return schemaSimplifiedData;
   }
 
+  checkClassNameChange(prevClassName, className) {
+    if (prevClassName !== className) {
+      this.setState({
+        prevClassName: className,
+        isPanelVisible: false,
+        selectedObjectId: undefined,
+      });
+      this.props.setAggregationPanelData({});
+    }
+  }
+
   getSimplifiedSchema(schema, classNameForEditors) {
     const schemaSimplifiedData = {};
     const classSchema = schema.data.get('classes').get(classNameForEditors);
@@ -242,10 +269,10 @@ export default class DataBrowser extends React.Component {
               e.ctrlKey || e.metaKey
                 ? firstVisibleColumnIndex
                 : this.getNextVisibleColumnIndex(
-                  -1,
-                  firstVisibleColumnIndex,
-                  lastVisibleColumnIndex
-                ),
+                    -1,
+                    firstVisibleColumnIndex,
+                    lastVisibleColumnIndex
+                  ),
           },
         });
         e.preventDefault();
@@ -271,10 +298,10 @@ export default class DataBrowser extends React.Component {
               e.ctrlKey || e.metaKey
                 ? lastVisibleColumnIndex
                 : this.getNextVisibleColumnIndex(
-                  1,
-                  firstVisibleColumnIndex,
-                  lastVisibleColumnIndex
-                ),
+                    1,
+                    firstVisibleColumnIndex,
+                    lastVisibleColumnIndex
+                  ),
           },
         });
         e.preventDefault();
@@ -346,14 +373,12 @@ export default class DataBrowser extends React.Component {
   }
 
   setSelectedObjectId(selectedObjectId) {
-    if(this.state.selectedObjectId !== selectedObjectId) {
+    if (this.state.selectedObjectId !== selectedObjectId) {
       this.setState({ selectedObjectId });
     }
   }
 
-  callCloudFunction(objectId, className){
-    console.log('Calling cloud function', objectId, className);
-  }
+
   setContextMenu(contextMenuX, contextMenuY, contextMenuItems) {
     this.setState({ contextMenuX, contextMenuY, contextMenuItems });
   }
@@ -455,8 +480,9 @@ export default class DataBrowser extends React.Component {
           setEditing={this.setEditing}
           setCurrent={this.setCurrent}
           setCopyableValue={this.setCopyableValue}
+          selectedObjectId={this.state.selectedObjectId}
           setSelectedObjectId={this.setSelectedObjectId}
-          callCloudFunction={this.callCloudFunction}
+          callCloudFunction={this.props.callCloudFunction}
           setContextMenu={this.setContextMenu}
           onFilterChange={this.props.onFilterChange}
           onFilterSave={this.props.onFilterSave}

From 152e22b3d99ebc7d5a3b88d49f7d727d0d6b64b4 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Sun, 28 Jul 2024 19:12:24 +0530
Subject: [PATCH 03/31] fix lint

---
 src/dashboard/Data/Browser/Browser.react.js   | 19 ++++++++++++-------
 .../Data/Browser/BrowserTable.react.js        |  2 +-
 .../Data/Browser/DataBrowser.react.js         | 17 ++++++++---------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index e73d2b97b5..5a06a1575f 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -42,7 +42,6 @@ import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
 import { get } from 'lib/AJAX';
 import { setBasePath } from 'lib/AJAX';
-import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
 
 // The initial and max amount of rows fetched by lazy loading
 const MAX_ROWS_FETCHED = 200;
@@ -622,6 +621,7 @@ class Browser extends DashboardView {
     }
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
+        // eslint-disable-next-line quotes
         const msg = objectSaved.className + " with id '" + objectSaved.id + "' created";
         this.showNote(msg, false);
 
@@ -725,6 +725,7 @@ class Browser extends DashboardView {
 
     obj.save(null, { useMasterKey: true }).then(
       objectSaved => {
+        // eslint-disable-next-line quotes
         const msg = objectSaved.className + " with id '" + objectSaved.id + "' " + 'created';
         this.showNote(msg, false);
 
@@ -1184,6 +1185,7 @@ class Browser extends DashboardView {
     const { useMasterKey } = this.state;
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
+        // eslint-disable-next-line quotes
         const msg = objectSaved.className + " with id '" + objectSaved.id + "' updated";
         this.showNote(msg, false);
 
@@ -1312,6 +1314,7 @@ class Browser extends DashboardView {
             let deletedNote;
 
             if (toDeleteObjectIds.length == 1) {
+              // eslint-disable-next-line quotes
               deletedNote = className + " with id '" + toDeleteObjectIds[0] + "' deleted";
             } else {
               deletedNote = toDeleteObjectIds.length + ' ' + className + ' objects deleted';
@@ -1339,8 +1342,8 @@ class Browser extends DashboardView {
 
             if (error.code === Parse.Error.AGGREGATE_ERROR) {
               if (error.errors.length == 1) {
-                errorDeletingNote =
-                  'Error deleting ' + className + " with id '" + error.errors[0].object.id + "'";
+                // eslint-disable-next-line quotes
+                errorDeletingNote = 'Error deleting ' + className + " with id '" + error.errors[0].object.id + "'";
               } else if (error.errors.length < toDeleteObjectIds.length) {
                 errorDeletingNote =
                   'Error deleting ' +
@@ -1357,6 +1360,7 @@ class Browser extends DashboardView {
             } else {
               if (toDeleteObjectIds.length == 1) {
                 errorDeletingNote =
+                  // eslint-disable-next-line quotes
                   'Error deleting ' + className + " with id '" + toDeleteObjectIds[0] + "'";
               } else {
                 errorDeletingNote =
@@ -1899,10 +1903,11 @@ class Browser extends DashboardView {
   }
 
   onMouseUpRowCheckBox() {
-    this.state.rowCheckboxDragging && this.setState({
-      rowCheckboxDragging: false,
-      draggedRowSelection: false,
-    });
+    this.state.rowCheckboxDragging &&
+      this.setState({
+        rowCheckboxDragging: false,
+        draggedRowSelection: false,
+      });
   }
 
   onMouseOverRowCheckBox(id) {
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 8801fc680f..821978094b 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -59,7 +59,7 @@ export default class BrowserTable extends React.Component {
     }
   }
 
-  componentDidMount() { 
+  componentDidMount() {
     this.tableRef.current.addEventListener('scroll', this.handleScroll);
   }
 
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 54ea60e5af..dd447b8c24 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -269,10 +269,10 @@ export default class DataBrowser extends React.Component {
               e.ctrlKey || e.metaKey
                 ? firstVisibleColumnIndex
                 : this.getNextVisibleColumnIndex(
-                    -1,
-                    firstVisibleColumnIndex,
-                    lastVisibleColumnIndex
-                  ),
+                  -1,
+                  firstVisibleColumnIndex,
+                  lastVisibleColumnIndex
+                ),
           },
         });
         e.preventDefault();
@@ -298,10 +298,10 @@ export default class DataBrowser extends React.Component {
               e.ctrlKey || e.metaKey
                 ? lastVisibleColumnIndex
                 : this.getNextVisibleColumnIndex(
-                    1,
-                    firstVisibleColumnIndex,
-                    lastVisibleColumnIndex
-                  ),
+                  1,
+                  firstVisibleColumnIndex,
+                  lastVisibleColumnIndex
+                ),
           },
         });
         e.preventDefault();
@@ -378,7 +378,6 @@ export default class DataBrowser extends React.Component {
     }
   }
 
-
   setContextMenu(contextMenuX, contextMenuY, contextMenuItems) {
     this.setState({ contextMenuX, contextMenuY, contextMenuItems });
   }

From 775f98e2f639c6f7ac29be5b989ca82bd80a503d Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Mon, 29 Jul 2024 04:47:06 +0530
Subject: [PATCH 04/31] fixed max resize constraint on the side panel

---
 .../AggregationPanel/AggregationPanel.js           |  4 ++--
 .../AggregationPanel/AggregationPanel.scss         | 10 +++++++++-
 src/dashboard/Data/Browser/Browser.scss            |  2 +-
 src/dashboard/Data/Browser/BrowserTable.react.js   | 14 ++++++++++++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index cdafe3b466..5f21a2ff96 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -16,7 +16,7 @@ const AggregationPanel = ({ data }) => {
       {Object.keys(data).length !== 0 ? (
         data.panel.segments.map((segment, index) => (
           <div key={index}>
-            <h2 className={styles.sdsdsdsdheading}>{segment.title}</h2>
+            <h2 className={styles.heading}>{segment.title}</h2>
             <div className={styles.segmentItems}>
               {segment.items.map((item, idx) => {
                 switch (item.type) {
@@ -42,7 +42,7 @@ const AggregationPanel = ({ data }) => {
           </div>
         ))
       ) : (
-        <div>'loading...'</div>
+        <div className={styles.loading}>No object selected. Select an object</div>
       )}
     </>
   );
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 7046f035dc..fc22b21b7b 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -1,6 +1,6 @@
 @import 'stylesheets/globals.scss';
 
-.sdsdsdsdheading{
+.heading{
     font-size: 18px;
     margin-bottom: 15px;
     margin-top: 0;
@@ -53,4 +53,12 @@
         border: none;
         cursor: pointer;
         margin-bottom: 15px;
+}
+
+.loading{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
 }
\ No newline at end of file
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index e7496961fe..82f28449a0 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -272,7 +272,7 @@ body:global(.expanded) {
     left: 0;
     top: 0;
     bottom: 0;
-    width: 5px;
+    width: 10px;
     cursor: col-resize;
   }
 }
\ No newline at end of file
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 821978094b..f3d8999f3d 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -34,10 +34,12 @@ export default class BrowserTable extends React.Component {
       offset: 0,
       panelWidth: 400,
       isResizing: false,
+      maxWidth: window.innerWidth - 300,
     };
     this.handleScroll = this.handleScroll.bind(this);
     this.tableRef = React.createRef();
     this.handleResize = this.handleResize.bind(this);
+    this.updateMaxWidth = this.updateMaxWidth.bind(this);
   }
 
   componentWillReceiveProps(props) {
@@ -61,10 +63,12 @@ export default class BrowserTable extends React.Component {
 
   componentDidMount() {
     this.tableRef.current.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('resize', this.updateMaxWidth);
   }
 
   componentWillUnmount() {
     this.tableRef.current.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('resize', this.updateMaxWidth);
   }
 
   handleResize(event, { size }) {
@@ -124,6 +128,12 @@ export default class BrowserTable extends React.Component {
       }
     });
   }
+  updateMaxWidth = () => {
+    this.setState({ maxWidth: window.innerWidth - 300 });
+    if(this.state.panelWidth > window.innerWidth - 300){
+      this.setState({ panelWidth: window.innerWidth - 300 });
+    }
+  }
 
   render() {
     let ordering = {};
@@ -580,7 +590,7 @@ export default class BrowserTable extends React.Component {
             width={this.state.panelWidth}
             height={Infinity}
             minConstraints={[400, Infinity]}
-            maxConstraints={[1140, Infinity]}
+            maxConstraints={[this.state.maxWidth, Infinity]}
             onResize={this.handleResize}
             resizeHandles={['w']}
             className={styles.resizablePanel}
@@ -588,7 +598,7 @@ export default class BrowserTable extends React.Component {
               position: 'fixed',
               top: '96px',
               right: '0',
-              bottom: '16px',
+              bottom: '19px',
               overflow: 'auto',
               backgroundColor: 'rgb(244, 244, 244)',
               zIndex: 100,

From 59e01a82c84c2e68898282fc443a76c6320efece Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Mon, 29 Jul 2024 11:22:01 +0530
Subject: [PATCH 05/31] fixed resize handler

---
 src/dashboard/Data/Browser/BrowserTable.react.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index f3d8999f3d..f99fceed70 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -130,10 +130,10 @@ export default class BrowserTable extends React.Component {
   }
   updateMaxWidth = () => {
     this.setState({ maxWidth: window.innerWidth - 300 });
-    if(this.state.panelWidth > window.innerWidth - 300){
+    if (this.state.panelWidth > window.innerWidth - 300) {
       this.setState({ panelWidth: window.innerWidth - 300 });
     }
-  }
+  };
 
   render() {
     let ordering = {};
@@ -599,12 +599,15 @@ export default class BrowserTable extends React.Component {
               top: '96px',
               right: '0',
               bottom: '19px',
+              'box-shadow': '0 2px 5px rgba(0, 0, 0, 0.1)',
               overflow: 'auto',
               backgroundColor: 'rgb(244, 244, 244)',
               zIndex: 100,
             }}
           >
-            <AggregationPanel data={this.props.AggregationPanelData}/>
+            <div>
+              <AggregationPanel data={this.props.AggregationPanelData} />
+            </div>
           </ResizableBox>
         )}
       </div>

From a0930488e7d478a07236fb7b8ee1163440ca36cd Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Mon, 29 Jul 2024 13:37:27 +0530
Subject: [PATCH 06/31] fixed resize handler bug

---
 src/dashboard/Data/Browser/Browser.scss          | 5 +++++
 src/dashboard/Data/Browser/BrowserTable.react.js | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index 82f28449a0..f1c7a7dedf 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -275,4 +275,9 @@ body:global(.expanded) {
     width: 10px;
     cursor: col-resize;
   }
+}
+
+.dataContainer{
+  height: 100%;
+  overflow: auto;
 }
\ No newline at end of file
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index f99fceed70..1745bc3ea4 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -605,7 +605,7 @@ export default class BrowserTable extends React.Component {
               zIndex: 100,
             }}
           >
-            <div>
+            <div className={styles.dataContainer}>
               <AggregationPanel data={this.props.AggregationPanelData} />
             </div>
           </ResizableBox>

From 7cc202c1aacfed42805022856c102b7f06c1d005 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Mon, 29 Jul 2024 15:54:32 +0530
Subject: [PATCH 07/31] fix side panel overflow

---
 src/dashboard/Data/Browser/BrowserTable.react.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 1745bc3ea4..705119367b 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -600,7 +600,6 @@ export default class BrowserTable extends React.Component {
               right: '0',
               bottom: '19px',
               'box-shadow': '0 2px 5px rgba(0, 0, 0, 0.1)',
-              overflow: 'auto',
               backgroundColor: 'rgb(244, 244, 244)',
               zIndex: 100,
             }}

From 088952777c111e6760e3848605feee3749a39ad8 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Thu, 15 Aug 2024 22:28:35 +0530
Subject: [PATCH 08/31] fixing issues

---
 src/components/AggregationPanel/AggregationPanel.js         | 3 +--
 src/components/BrowserCell/BrowserCell.react.js             | 4 ++--
 .../DataBrowserHeaderBar/DataBrowserHeaderBar.scss          | 1 -
 src/dashboard/Data/Browser/Browser.react.js                 | 6 ------
 src/dashboard/Data/Browser/BrowserTable.react.js            | 3 ---
 5 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index 5f21a2ff96..a51b99ecc3 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -10,7 +10,6 @@ import {
 } from './AggregationPanelComponents';
 import styles from './AggregationPanel.scss';
 const AggregationPanel = ({ data }) => {
-  console.log('data aggregation panel', data);
   return (
     <>
       {Object.keys(data).length !== 0 ? (
@@ -42,7 +41,7 @@ const AggregationPanel = ({ data }) => {
           </div>
         ))
       ) : (
-        <div className={styles.loading}>No object selected. Select an object</div>
+        <div className={styles.loading}>No object selected. Select an object to see aggregated data.</div>
       )}
     </>
   );
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index b351dfffd7..c05963f907 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -632,8 +632,8 @@ export default class BrowserCell extends Component {
             onPointerCmdClick(value);
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
-            if(selectedObjectId !== this.props.objectId){
-              if(isPanelVisible){
+            if(selectedObjectId !== this.props.objectId) {
+              if(isPanelVisible) {
                 setSelectedObjectId(this.props.objectId);
                 callCloudFunction(this.props.objectId, this.props.className);
               }
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
index 3fe4cfc4f7..ba42c5694e 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -52,7 +52,6 @@
   vertical-align: top;
   text-align: center;
   width: 30px;
-  // background: rgba(224,224,234,0.10);
   background: rgb(114, 111, 133)
 }
 
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 5a06a1575f..28673a8ac8 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -621,7 +621,6 @@ class Browser extends DashboardView {
     }
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
-        // eslint-disable-next-line quotes
         const msg = objectSaved.className + " with id '" + objectSaved.id + "' created";
         this.showNote(msg, false);
 
@@ -725,7 +724,6 @@ class Browser extends DashboardView {
 
     obj.save(null, { useMasterKey: true }).then(
       objectSaved => {
-        // eslint-disable-next-line quotes
         const msg = objectSaved.className + " with id '" + objectSaved.id + "' " + 'created';
         this.showNote(msg, false);
 
@@ -1185,7 +1183,6 @@ class Browser extends DashboardView {
     const { useMasterKey } = this.state;
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
-        // eslint-disable-next-line quotes
         const msg = objectSaved.className + " with id '" + objectSaved.id + "' updated";
         this.showNote(msg, false);
 
@@ -1314,7 +1311,6 @@ class Browser extends DashboardView {
             let deletedNote;
 
             if (toDeleteObjectIds.length == 1) {
-              // eslint-disable-next-line quotes
               deletedNote = className + " with id '" + toDeleteObjectIds[0] + "' deleted";
             } else {
               deletedNote = toDeleteObjectIds.length + ' ' + className + ' objects deleted';
@@ -1342,7 +1338,6 @@ class Browser extends DashboardView {
 
             if (error.code === Parse.Error.AGGREGATE_ERROR) {
               if (error.errors.length == 1) {
-                // eslint-disable-next-line quotes
                 errorDeletingNote = 'Error deleting ' + className + " with id '" + error.errors[0].object.id + "'";
               } else if (error.errors.length < toDeleteObjectIds.length) {
                 errorDeletingNote =
@@ -1360,7 +1355,6 @@ class Browser extends DashboardView {
             } else {
               if (toDeleteObjectIds.length == 1) {
                 errorDeletingNote =
-                  // eslint-disable-next-line quotes
                   'Error deleting ' + className + " with id '" + toDeleteObjectIds[0] + "'";
               } else {
                 errorDeletingNote =
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 705119367b..2014e6c7c2 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -77,12 +77,10 @@ export default class BrowserTable extends React.Component {
 
   handleMouseDown() {
     this.setState({ isResizing: true });
-    console.log('handleMouseDown');
     document.body.style.cursor = 'ew-resize';
   }
 
   handleMouseMove(e) {
-    console.log('handleMouseMove', this.state.isResizing);
     if (!this.state.isResizing) {
       return;
     }
@@ -90,7 +88,6 @@ export default class BrowserTable extends React.Component {
   }
 
   handleMouseUp() {
-    console.log('handleMouseUp', this.state.isResizing);
     if (!this.state.isResizing) {
       return;
     }

From 5d714aaeb76486f74e9d89f8ae5ada5d00121d37 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Thu, 15 Aug 2024 22:46:37 +0530
Subject: [PATCH 09/31]  fixing linting issues

---
 src/dashboard/Data/Browser/Browser.react.js | 31 ++++++++-------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 28673a8ac8..e51899bc98 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -40,8 +40,6 @@ import * as ClassPreferences from 'lib/ClassPreferences';
 import { Helmet } from 'react-helmet';
 import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
-import { get } from 'lib/AJAX';
-import { setBasePath } from 'lib/AJAX';
 
 // The initial and max amount of rows fetched by lazy loading
 const MAX_ROWS_FETCHED = 200;
@@ -621,7 +619,7 @@ class Browser extends DashboardView {
     }
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
-        const msg = objectSaved.className + " with id '" + objectSaved.id + "' created";
+        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' created';
         this.showNote(msg, false);
 
         const state = { data: this.state.data };
@@ -724,7 +722,7 @@ class Browser extends DashboardView {
 
     obj.save(null, { useMasterKey: true }).then(
       objectSaved => {
-        const msg = objectSaved.className + " with id '" + objectSaved.id + "' " + 'created';
+        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' ' + 'created';
         this.showNote(msg, false);
 
         const state = {
@@ -1126,11 +1124,7 @@ class Browser extends DashboardView {
       },
     ]);
     window.open(
-      generatePath(
-        this.context,
-        `browser/${className}?filters=${encodeURIComponent(filters)}`,
-        true
-      ),
+      generatePath(this.context, `browser/${className}?filters=${encodeURIComponent(filters)}`, true),
       '_blank'
     );
   }
@@ -1183,7 +1177,7 @@ class Browser extends DashboardView {
     const { useMasterKey } = this.state;
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
-        const msg = objectSaved.className + " with id '" + objectSaved.id + "' updated";
+        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' updated';
         this.showNote(msg, false);
 
         const state = {
@@ -1311,7 +1305,7 @@ class Browser extends DashboardView {
             let deletedNote;
 
             if (toDeleteObjectIds.length == 1) {
-              deletedNote = className + " with id '" + toDeleteObjectIds[0] + "' deleted";
+              deletedNote = className + ' with id \'' + toDeleteObjectIds[0] + '\' deleted';
             } else {
               deletedNote = toDeleteObjectIds.length + ' ' + className + ' objects deleted';
             }
@@ -1338,7 +1332,8 @@ class Browser extends DashboardView {
 
             if (error.code === Parse.Error.AGGREGATE_ERROR) {
               if (error.errors.length == 1) {
-                errorDeletingNote = 'Error deleting ' + className + " with id '" + error.errors[0].object.id + "'";
+                errorDeletingNote =
+                'Error deleting ' + className + ' with id \'' + error.errors[0].object.id + '\'';
               } else if (error.errors.length < toDeleteObjectIds.length) {
                 errorDeletingNote =
                   'Error deleting ' +
@@ -1355,7 +1350,7 @@ class Browser extends DashboardView {
             } else {
               if (toDeleteObjectIds.length == 1) {
                 errorDeletingNote =
-                  'Error deleting ' + className + " with id '" + toDeleteObjectIds[0] + "'";
+                  'Error deleting ' + className + ' with id \'' + toDeleteObjectIds[0] + '\'';
               } else {
                 errorDeletingNote =
                   'Error deleting ' + toDeleteObjectIds.length + ' ' + className + ' objects';
@@ -1506,19 +1501,17 @@ class Browser extends DashboardView {
         this.setState(prevState => ({
           processedScripts: prevState.processedScripts + 1,
         }));
-        const note =
-          (typeof response === 'object' ? JSON.stringify(response) : response) ||
-          `Ran script "${script.title}" on "${object.id}".`;
+        const note = (typeof response === 'object' ? JSON.stringify(response) : response) || `Ran script "${script.title}" on "${object.id}".`;
         this.showNote(note);
       }
       this.refresh();
     } catch (e) {
       this.showNote(e.message, true);
       console.log(`Could not run ${script.title}: ${e}`);
-    } finally {
-      this.setState({
+    } finally{
+      this.setState(({
         processedScripts: 0,
-      });
+      }));
     }
   }
 

From 1f6b36cb31a60a7c24c01c00e5c5480a907a29f4 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Thu, 15 Aug 2024 22:50:26 +0530
Subject: [PATCH 10/31] fixing get

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

diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index e51899bc98..6544a0d2b1 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -40,6 +40,8 @@ import * as ClassPreferences from 'lib/ClassPreferences';
 import { Helmet } from 'react-helmet';
 import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
+import { get } from 'lib/AJAX';
+import { setBasePath } from 'lib/AJAX';
 
 // The initial and max amount of rows fetched by lazy loading
 const MAX_ROWS_FETCHED = 200;

From 4ec1c688ac73bd31bc19ef95307023bccf053340 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Thu, 15 Aug 2024 22:57:15 +0530
Subject: [PATCH 11/31] removed unwanted changes

---
 src/dashboard/Dashboard.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index abf0f2a6cf..0aebec1f25 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -216,14 +216,14 @@ export default class Dashboard extends React.Component {
 
     const SettingsRoute = (
       <Route element={<SettingsData />}>
-        <Route path="dashboard" element={<DashboardSettings />} />
-        <Route path="security" element={<Security />} />
-        <Route path="general" element={<GeneralSettings />} />
-        <Route path="keys" element={<SecuritySettings />} />
-        <Route path="users" element={<UsersSettings />} />
-        <Route path="push" element={<PushSettings />} />
-        <Route path="hosting" element={<HostingSettings />} />
-        <Route index element={<Navigate replace to="dashboard" />} />
+        <Route path='dashboard' element={<DashboardSettings />} />
+        <Route path='security' element={<Security />} />
+        <Route path='general' element={<GeneralSettings />} />
+        <Route path='keys' element={<SecuritySettings />} />
+        <Route path='users' element={<UsersSettings />} />
+        <Route path='push' element={<PushSettings />} />
+        <Route path='hosting' element={<HostingSettings />} />
+        <Route index element={<Navigate replace to='dashboard' />} />
       </Route>
     );
 

From b07bf288eb4ed5f59014d4009d3bba610d6874c3 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Fri, 16 Aug 2024 22:20:00 +0530
Subject: [PATCH 12/31] update react-draggable and react-resizable version

---
 package-lock.json | 4 ++--
 package.json      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 75a2942dad..ae5cdc2970 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,11 +39,11 @@
         "react-dnd": "10.0.2",
         "react-dnd-html5-backend": "10.0.2",
         "react-dom": "16.14.0",
-        "react-draggable": "^4.4.6",
+        "react-draggable": "4.4.6",
         "react-helmet": "6.1.0",
         "react-json-view": "1.21.3",
         "react-popper-tooltip": "4.4.2",
-        "react-resizable": "^3.0.5",
+        "react-resizable": "3.0.5",
         "react-router-dom": "6.4.1",
         "regenerator-runtime": "0.13.11"
       },
diff --git a/package.json b/package.json
index 6ce9a81dc5..b23d1533f6 100644
--- a/package.json
+++ b/package.json
@@ -65,11 +65,11 @@
     "react-dnd": "10.0.2",
     "react-dnd-html5-backend": "10.0.2",
     "react-dom": "16.14.0",
-    "react-draggable": "^4.4.6",
+    "react-draggable": "4.4.6",
     "react-helmet": "6.1.0",
     "react-json-view": "1.21.3",
     "react-popper-tooltip": "4.4.2",
-    "react-resizable": "^3.0.5",
+    "react-resizable": "3.0.5",
     "react-router-dom": "6.4.1",
     "regenerator-runtime": "0.13.11"
   },

From 70b435375c18ce8396008a6cb678ab80d16c001d Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Sat, 24 Aug 2024 18:51:43 +0530
Subject: [PATCH 13/31] fix issues

---
 .../AggregationPanel/AggregationPanel.scss    |  64 ++++++---
 .../AggregationPanelComponents.js             |   2 +-
 .../BrowserCell/BrowserCell.react.js          |   2 +-
 src/dashboard/Data/Browser/Browser.scss       |   8 +-
 .../Data/Browser/BrowserTable.react.js        |  48 +++----
 .../Data/Browser/DataBrowser.react.js         | 128 ++++++++++++++----
 6 files changed, 173 insertions(+), 79 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index fc22b21b7b..8ca13e93db 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -1,8 +1,7 @@
 @import 'stylesheets/globals.scss';
 
-.heading{
+.heading {
     font-size: 18px;
-    margin-bottom: 15px;
     margin-top: 0;
     padding: 6px;
     padding-left: 10px;
@@ -10,49 +9,78 @@
     color: $white;
 }
 
-.segmentItems{
+.segmentItems {
+    font-size: 14px;
     padding-left: 10px;
     padding-right: 10px;
+    padding-top: 5px;
     display: flex;
     flex-direction: column;
+    border-left: 1px solid #e3e3ea;
     gap: 10px;
 }
 
-.keyValue{
+.keyValue {
+    font-size: 14px;
     display: flex;
     gap: 36px;
 }
 
-.video{
+.video {
     width: 100%;
     height: 100%;
 }
-.image{
+
+.image {
     width: 100%;
     height: 100%;
 }
 
-.audio{
+.audio {
     width: 100%;
 }
 
-.segmentItems table, .segmentItems th, .segmentItems td {
+.segmentItems table,
+.segmentItems th,
+.segmentItems td {
+    font-size: 14px;
     border: 1px solid #ddd;
 }
-.segmentItems th, .segmentItems td {
+
+.segmentItems th,
+.segmentItems td {
+    font-size: 14px;
     padding: 8px;
     text-align: left;
 }
 
-.button{
-    display: block;
-        width: 100%;
-        padding: 10px;
-        background-color: #007BFF;
-        color: #fff;
-        border: none;
-        cursor: pointer;
-        margin-bottom: 15px;
+.buttonContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.button {
+    width: auto;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    margin-bottom: 15px;
+    background-color: $blue;
+    padding: 5px 10px;
+    border: none;
+    color: $white;
+    line-height: 28px;
+    outline: 0;
+    text-decoration: none;
+    text-align: center;
+    border-radius: 5px;
+    font-size: 14px;
+    &:hover,
+    &:focus {
+        background-color: $darkBlue;
+    }
 }
 
 .loading{
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index d36852ce00..be84fdc5d8 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -80,7 +80,7 @@ export const ButtonElement = ({ item }) => {
   };
 
   return (
-    <div className="button-element">
+    <div className={styles.buttonContainer}>
       <button onClick={handleClick} className={styles.button}>{item.text}</button>
     </div>
   );
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index c05963f907..14cbaa7f65 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -633,8 +633,8 @@ export default class BrowserCell extends Component {
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
             if(selectedObjectId !== this.props.objectId) {
+              setSelectedObjectId(this.props.objectId);
               if(isPanelVisible) {
-                setSelectedObjectId(this.props.objectId);
                 callCloudFunction(this.props.objectId, this.props.className);
               }
             }
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index f1c7a7dedf..75ba39e60f 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -82,9 +82,7 @@ body:global(.expanded) {
   top: 30px;
   bottom: 0;
   left: 0;
-  min-width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 100%;
 }
 
 .table .empty {
@@ -280,4 +278,8 @@ body:global(.expanded) {
 .dataContainer{
   height: 100%;
   overflow: auto;
+}
+
+.noScroll {
+  overflow-x: hidden;
 }
\ No newline at end of file
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 2014e6c7c2..ae69cd9264 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -15,9 +15,7 @@ import encode from 'parse/lib/browser/encode';
 import React from 'react';
 import styles from 'dashboard/Data/Browser/Browser.scss';
 import Button from 'components/Button/Button.react';
-import { ResizableBox } from 'react-resizable';
 import { CurrentApp } from 'context/currentApp';
-import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
 
 const MAX_ROWS = 200; // Number of rows to render at any time
 const ROWS_OFFSET = 160;
@@ -511,7 +509,10 @@ export default class BrowserTable extends React.Component {
 
       if (this.props.newObject || this.props.data.length > 0) {
         table = (
-          <div className={styles.table} ref={this.tableRef}>
+          <div
+            className={styles.table}
+            ref={this.tableRef}
+          >
             <div style={{ height: Math.max(0, this.state.offset * ROW_HEIGHT) }} />
             {editCloneRows}
             {newRow}
@@ -530,7 +531,10 @@ export default class BrowserTable extends React.Component {
         );
       } else {
         table = (
-          <div className={styles.table} ref={this.tableRef}>
+          <div
+            className={styles.table}
+            ref={this.tableRef}
+          >
             <div className={styles.empty}>
               {this.props.relation ? (
                 <EmptyState
@@ -556,10 +560,18 @@ export default class BrowserTable extends React.Component {
         );
       }
     }
+    const rightValue =
+      this.props.panelWidth && this.props.isPanelVisible ? `${this.props.panelWidth}px` : '0px';
 
     return (
-      <div className={styles.browser}>
-        <div>
+      <div
+        className={styles.browser}
+        style={{
+          right: rightValue,
+          'overflow-x': this.props.isResizing ? 'hidden' : 'auto',
+        }}
+      >
+        <div >
           <DataBrowserHeaderBar
             selected={
               !!this.props.selection &&
@@ -582,30 +594,6 @@ export default class BrowserTable extends React.Component {
 
           {table}
         </div>
-        {this.props.isPanelVisible && (
-          <ResizableBox
-            width={this.state.panelWidth}
-            height={Infinity}
-            minConstraints={[400, Infinity]}
-            maxConstraints={[this.state.maxWidth, Infinity]}
-            onResize={this.handleResize}
-            resizeHandles={['w']}
-            className={styles.resizablePanel}
-            style={{
-              position: 'fixed',
-              top: '96px',
-              right: '0',
-              bottom: '19px',
-              'box-shadow': '0 2px 5px rgba(0, 0, 0, 0.1)',
-              backgroundColor: 'rgb(244, 244, 244)',
-              zIndex: 100,
-            }}
-          >
-            <div className={styles.dataContainer}>
-              <AggregationPanel data={this.props.AggregationPanelData} />
-            </div>
-          </ResizableBox>
-        )}
       </div>
     );
   }
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index dd447b8c24..ac3bad47d6 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -11,6 +11,11 @@ import BrowserToolbar from 'dashboard/Data/Browser/BrowserToolbar.react';
 import ContextMenu from 'components/ContextMenu/ContextMenu.react';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import React from 'react';
+import { ResizableBox } from 'react-resizable';
+import styles from '../Browser/Browser.scss'
+
+import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
+
 
 /**
  * DataBrowser renders the browser toolbar and data table
@@ -41,8 +46,15 @@ export default class DataBrowser extends React.Component {
       firstSelectedCell: null,
       selectedData: [],
       prevClassName: props.className,
+      panelWidth: 400,
+      isResizing: false,
+      maxWidth: window.innerWidth - 300,
     };
 
+    this.handleResizeDiv = this.handleResizeDiv.bind(this);
+    this.handleResizeStart = this.handleResizeStart.bind(this);
+    this.handleResizeStop = this.handleResizeStop.bind(this);
+    this.updateMaxWidth = this.updateMaxWidth.bind(this);
     this.handleKey = this.handleKey.bind(this);
     this.handleHeaderDragDrop = this.handleHeaderDragDrop.bind(this);
     this.handleResize = this.handleResize.bind(this);
@@ -106,12 +118,36 @@ export default class DataBrowser extends React.Component {
 
   componentDidMount() {
     document.body.addEventListener('keydown', this.handleKey);
+    window.addEventListener('resize', this.updateMaxWidth);
   }
 
   componentWillUnmount() {
     document.body.removeEventListener('keydown', this.handleKey);
+    window.removeEventListener('resize', this.updateMaxWidth);
+  }
+
+  handleResizeStart() {
+    this.setState({ isResizing: true });
   }
 
+  handleResizeStop(event, { size }) {
+    this.setState({
+      isResizing: false,
+      panelWidth: size.width,
+    });
+  }
+
+  handleResizeDiv(event, { size }) {
+    this.setState({ panelWidth: size.width });
+  }
+
+  updateMaxWidth = () => {
+    this.setState({ maxWidth: window.innerWidth - 300 });
+    if (this.state.panelWidth > window.innerWidth - 300) {
+      this.setState({ panelWidth: window.innerWidth - 300 });
+    }
+  };
+
   updatePreferences(order, shouldReload) {
     if (this.saveOrderTimeout) {
       clearTimeout(this.saveOrderTimeout);
@@ -128,9 +164,13 @@ export default class DataBrowser extends React.Component {
     this.setState(prevState => ({ isPanelVisible: !prevState.isPanelVisible }));
 
     if (!this.state.isPanelVisible) {
-      this.setState({ selectedObjectId: undefined });
       this.props.setAggregationPanelData({});
     }
+    console.log(this.state.selectedObjectId, this.props.className ,this.state.isPanelVisible)
+
+    if(!this.state.isPanelVisible && this.state.selectedObjectId){
+      this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
+    }
   }
 
   getAllClassesSchema(schema) {
@@ -176,7 +216,6 @@ export default class DataBrowser extends React.Component {
     }
     return schemaSimplifiedData;
   }
-
   handleResize(index, delta) {
     this.setState(({ order }) => {
       order[index].width = Math.max(60, order[index].width + delta);
@@ -466,30 +505,67 @@ export default class DataBrowser extends React.Component {
     const { preventSchemaEdits, applicationId } = app;
     return (
       <div>
-        <BrowserTable
-          appId={applicationId}
-          order={this.state.order}
-          current={this.state.current}
-          editing={this.state.editing}
-          simplifiedSchema={this.state.simplifiedSchema}
-          className={className}
-          editCloneRows={editCloneRows}
-          handleHeaderDragDrop={this.handleHeaderDragDrop}
-          handleResize={this.handleResize}
-          setEditing={this.setEditing}
-          setCurrent={this.setCurrent}
-          setCopyableValue={this.setCopyableValue}
-          selectedObjectId={this.state.selectedObjectId}
-          setSelectedObjectId={this.setSelectedObjectId}
-          callCloudFunction={this.props.callCloudFunction}
-          setContextMenu={this.setContextMenu}
-          onFilterChange={this.props.onFilterChange}
-          onFilterSave={this.props.onFilterSave}
-          selectedCells={this.state.selectedCells}
-          handleCellClick={this.handleCellClick}
-          isPanelVisible={this.state.isPanelVisible}
-          {...other}
-        />
+        <div>
+          <BrowserTable
+            appId={applicationId}
+            order={this.state.order}
+            current={this.state.current}
+            editing={this.state.editing}
+            simplifiedSchema={this.state.simplifiedSchema}
+            className={className}
+            editCloneRows={editCloneRows}
+            handleHeaderDragDrop={this.handleHeaderDragDrop}
+            handleResize={this.handleResize}
+            setEditing={this.setEditing}
+            setCurrent={this.setCurrent}
+            setCopyableValue={this.setCopyableValue}
+            selectedObjectId={this.state.selectedObjectId}
+            setSelectedObjectId={this.setSelectedObjectId}
+            callCloudFunction={this.props.callCloudFunction}
+            setContextMenu={this.setContextMenu}
+            onFilterChange={this.props.onFilterChange}
+            onFilterSave={this.props.onFilterSave}
+            selectedCells={this.state.selectedCells}
+            handleCellClick={this.handleCellClick}
+            isPanelVisible={this.state.isPanelVisible}
+            panelWidth={this.state.panelWidth}
+            isResizing={this.state.isResizing}
+            {...other}
+          />
+          {this.state.isPanelVisible && (
+            <ResizableBox
+              width={this.state.panelWidth}
+              height={Infinity}
+              minConstraints={[400, Infinity]}
+              maxConstraints={[this.state.maxWidth, Infinity]}
+              onResizeStart={this.handleResizeStart}  // Handle start of resizing
+              onResizeStop={this.handleResizeStop}    // Handle end of resizing
+              onResize={this.handleResizeDiv}
+              resizeHandles={['w']}
+              className={styles.resizablePanel}
+              style={
+                {
+
+                  position: 'fixed',
+                  top: '96px',
+                  right: '0',
+                  bottom: '0px',
+                  // 'box-shadow': '0 2px 5px rgba(0, 0, 0, 0.1)',
+                  // backgroundColor: 'rgb(244, 244, 244)',
+                  // zIndex: 100,
+                }
+              }
+            >
+              <div style={{
+                height: '100%',
+                overflow: 'auto'
+              }} >
+                <AggregationPanel data={this.props.AggregationPanelData} />
+              </div>
+            </ResizableBox>
+          )}
+        </div>
+
         <BrowserToolbar
           count={count}
           hidePerms={className === '_Installation'}

From 26e4d95677e90e93b779bdb879f58f5d275a68de Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Mon, 26 Aug 2024 20:14:02 +0530
Subject: [PATCH 14/31] add loading feature

---
 .../AggregationPanel/AggregationPanel.js      | 15 ++++++-
 .../AggregationPanel/AggregationPanel.scss    | 39 +++++++++++++++++++
 src/dashboard/Data/Browser/Browser.react.js   | 20 +++++++++-
 .../Data/Browser/DataBrowser.react.js         | 14 ++++---
 4 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index a51b99ecc3..bd0ccc52f8 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -9,10 +9,21 @@ import {
   ButtonElement,
 } from './AggregationPanelComponents';
 import styles from './AggregationPanel.scss';
-const AggregationPanel = ({ data }) => {
+
+const BeatLoader = () => {
+  return (
+    <div className={styles.beatloader}>
+      <div className={styles.beat}></div>
+      <div className={styles.beat}></div>
+      <div className={styles.beat}></div>
+    </div>
+  );
+};
+
+const AggregationPanel = ({ data , isLoadingCloudFunction}) => {
   return (
     <>
-      {Object.keys(data).length !== 0 ? (
+      { isLoadingCloudFunction ? <BeatLoader /> : Object.keys(data).length !== 0 ? (
         data.panel.segments.map((segment, index) => (
           <div key={index}>
             <h2 className={styles.heading}>{segment.title}</h2>
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 8ca13e93db..8f1db62f5a 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -89,4 +89,43 @@
     flex-direction: column;
     justify-content: center;
     text-align: center;
+}
+
+$beat-color: #3498db;
+$beat-size: 12px;
+$animation-duration: 0.6s;
+$gap-size: 12px;
+
+.beatloader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: $gap-size;
+}
+
+.beat {
+  width: $beat-size;
+  height: $beat-size;
+  background-color: $beat-color;
+  border-radius: 50%;
+  animation: beat $animation-duration infinite alternate;
+
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+}
+
+@keyframes beat {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0.5;
+  }
 }
\ No newline at end of file
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 6544a0d2b1..087b561cf6 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -111,6 +111,7 @@ class Browser extends DashboardView {
       classwiseCloudFunctions: {},
 
       AggregationPanelData: {},
+      isLoading: false
     };
 
     this.addLocation = this.addLocation.bind(this);
@@ -128,6 +129,7 @@ class Browser extends DashboardView {
     this.showExport = this.showExport.bind(this);
     this.login = this.login.bind(this);
     this.logout = this.logout.bind(this);
+    this.setLoading = this.setLoading.bind(this);
     this.toggleMasterKeyUsage = this.toggleMasterKeyUsage.bind(this);
     this.showAttachRowsDialog = this.showAttachRowsDialog.bind(this);
     this.cancelAttachRows = this.cancelAttachRows.bind(this);
@@ -252,7 +254,16 @@ class Browser extends DashboardView {
     }
   }
 
+  setLoading(bool){
+    this.setState({
+      isLoading:bool
+    })
+  }
+
   fetchAggregationPanelData(objectId, className) {
+    this.setState({
+      isLoading: true
+    })
     const params = {
       objectId: objectId,
     };
@@ -260,9 +271,14 @@ class Browser extends DashboardView {
 
     Parse.Cloud.run(cloudCodeFunction, params).then(
       result => {
-        this.setState({ AggregationPanelData: result });
+        this.setState({ AggregationPanelData: result ,
+          isLoading : false
+        });
       },
       error => {
+        this.setState({
+          isLoading: false
+        })
         console.log('error', error);
       }
     );
@@ -2029,6 +2045,8 @@ class Browser extends DashboardView {
             classes={this.classes}
             classwiseCloudFunctions={this.state.classwiseCloudFunctions}
             callCloudFunction={this.fetchAggregationPanelData}
+            isLoadingCloudFunction={this.state.isLoading}
+            setLoading={this.setLoading}
             AggregationPanelData={this.state.AggregationPanelData}
             setAggregationPanelData={this.setAggregationPanelData}
           />
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index ac3bad47d6..2a56c4329a 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -165,8 +165,8 @@ export default class DataBrowser extends React.Component {
 
     if (!this.state.isPanelVisible) {
       this.props.setAggregationPanelData({});
+      this.props.setLoading(false);
     }
-    console.log(this.state.selectedObjectId, this.props.className ,this.state.isPanelVisible)
 
     if(!this.state.isPanelVisible && this.state.selectedObjectId){
       this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
@@ -550,17 +550,19 @@ export default class DataBrowser extends React.Component {
                   top: '96px',
                   right: '0',
                   bottom: '0px',
-                  // 'box-shadow': '0 2px 5px rgba(0, 0, 0, 0.1)',
-                  // backgroundColor: 'rgb(244, 244, 244)',
-                  // zIndex: 100,
                 }
               }
             >
               <div style={{
                 height: '100%',
-                overflow: 'auto'
+                overflow: 'auto',
+                display: 'flex',
+                'justify-content': 'center'
               }} >
-                <AggregationPanel data={this.props.AggregationPanelData} />
+                <AggregationPanel
+                  data={this.props.AggregationPanelData}
+                  isLoadingCloudFunction={this.props.isLoadingCloudFunction}
+                />
               </div>
             </ResizableBox>
           )}

From d1534256b7a274305535e7fa3062efed302c1cc0 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Tue, 3 Sep 2024 13:41:22 +0530
Subject: [PATCH 15/31] update

---
 .../AggregationPanel/AggregationPanel.js      | 23 +++++-----
 .../AggregationPanel/AggregationPanel.scss    | 45 +++----------------
 .../BrowserCell/BrowserCell.react.js          |  2 +
 src/components/BrowserRow/BrowserRow.react.js |  1 +
 src/dashboard/Data/Browser/Browser.react.js   | 12 ++++-
 .../Data/Browser/BrowserTable.react.js        |  3 ++
 .../Data/Browser/DataBrowser.react.js         | 38 ++++++++++++++--
 7 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index bd0ccc52f8..c9f958c911 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import LoaderDots from 'components/LoaderDots/LoaderDots.react';
 import {
   TextElement,
   KeyValueElement,
@@ -10,20 +11,14 @@ import {
 } from './AggregationPanelComponents';
 import styles from './AggregationPanel.scss';
 
-const BeatLoader = () => {
-  return (
-    <div className={styles.beatloader}>
-      <div className={styles.beat}></div>
-      <div className={styles.beat}></div>
-      <div className={styles.beat}></div>
-    </div>
-  );
-};
-
-const AggregationPanel = ({ data , isLoadingCloudFunction}) => {
+const AggregationPanel = ({ data, isLoadingCloudFunction, showAggregatedData }) => {
   return (
     <>
-      { isLoadingCloudFunction ? <BeatLoader /> : Object.keys(data).length !== 0 ? (
+      {isLoadingCloudFunction && showAggregatedData ? (
+        <div className={styles.center}>
+          <LoaderDots />
+        </div>
+      ) :  showAggregatedData && Object.keys(data).length !== 0 ? (
         data.panel.segments.map((segment, index) => (
           <div key={index}>
             <h2 className={styles.heading}>{segment.title}</h2>
@@ -52,7 +47,9 @@ const AggregationPanel = ({ data , isLoadingCloudFunction}) => {
           </div>
         ))
       ) : (
-        <div className={styles.loading}>No object selected. Select an object to see aggregated data.</div>
+        <div className={styles.loading}>
+          No object selected. Select an object to see aggregated data.
+        </div>
       )}
     </>
   );
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 8f1db62f5a..226cfeec43 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -91,41 +91,10 @@
     text-align: center;
 }
 
-$beat-color: #3498db;
-$beat-size: 12px;
-$animation-duration: 0.6s;
-$gap-size: 12px;
-
-.beatloader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: $gap-size;
-}
-
-.beat {
-  width: $beat-size;
-  height: $beat-size;
-  background-color: $beat-color;
-  border-radius: 50%;
-  animation: beat $animation-duration infinite alternate;
-
-  &:nth-child(2) {
-    animation-delay: 0.2s;
-  }
-
-  &:nth-child(3) {
-    animation-delay: 0.4s;
-  }
-}
-
-@keyframes beat {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1.5);
-    opacity: 0.5;
-  }
-}
\ No newline at end of file
+.center {
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    left: 50%;
+    @include transform(translate(-50%, -50%));
+  }
\ No newline at end of file
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index 14cbaa7f65..99f48120ef 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -569,6 +569,7 @@ export default class BrowserCell extends Component {
       markRequiredFieldRow,
       handleCellClick,
       selectedCells,
+      setShowAggregatedData
     } = this.props;
 
     const classes = [...this.state.classes];
@@ -633,6 +634,7 @@ export default class BrowserCell extends Component {
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
             if(selectedObjectId !== this.props.objectId) {
+              setShowAggregatedData(true)
               setSelectedObjectId(this.props.objectId);
               if(isPanelVisible) {
                 callCloudFunction(this.props.objectId, this.props.className);
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index cca3caa103..9187327d2c 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -156,6 +156,7 @@ export default class BrowserRow extends Component {
               scripts={this.props.scripts}
               handleCellClick={this.props.handleCellClick}
               selectedCells={this.props.selectedCells}
+              setShowAggregatedData={this.props.setShowAggregatedData}
             />
           );
         })}
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 087b561cf6..1bb8e9e0a7 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -111,7 +111,8 @@ class Browser extends DashboardView {
       classwiseCloudFunctions: {},
 
       AggregationPanelData: {},
-      isLoading: false
+      isLoading: false,
+      showAggregatedData: true
     };
 
     this.addLocation = this.addLocation.bind(this);
@@ -130,6 +131,7 @@ class Browser extends DashboardView {
     this.login = this.login.bind(this);
     this.logout = this.logout.bind(this);
     this.setLoading = this.setLoading.bind(this);
+    this.setShowAggregatedData = this.setShowAggregatedData.bind(this);
     this.toggleMasterKeyUsage = this.toggleMasterKeyUsage.bind(this);
     this.showAttachRowsDialog = this.showAttachRowsDialog.bind(this);
     this.cancelAttachRows = this.cancelAttachRows.bind(this);
@@ -260,6 +262,12 @@ class Browser extends DashboardView {
     })
   }
 
+  setShowAggregatedData(bool){
+    this.setState({
+      showAggregatedData:bool
+    })
+  }
+
   fetchAggregationPanelData(objectId, className) {
     this.setState({
       isLoading: true
@@ -2049,6 +2057,8 @@ class Browser extends DashboardView {
             setLoading={this.setLoading}
             AggregationPanelData={this.state.AggregationPanelData}
             setAggregationPanelData={this.setAggregationPanelData}
+            showAggregatedData={this.state.showAggregatedData}
+            setShowAggregatedData={this.setShowAggregatedData}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index ae69cd9264..6cef298c72 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -215,6 +215,7 @@ export default class BrowserTable extends React.Component {
                     onMouseDownRowCheckBox={this.props.onMouseDownRowCheckBox}
                     onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
                     onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
+                    setShowAggregatedData={this.props.setShowAggregatedData}
                   />
                   <Button
                     value="Clone"
@@ -292,6 +293,7 @@ export default class BrowserTable extends React.Component {
               onMouseDownRowCheckBox={this.props.onMouseDownRowCheckBox}
               onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
               onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
+              setShowAggregatedData={this.props.setShowAggregatedData}
             />
             <Button
               value="Add"
@@ -378,6 +380,7 @@ export default class BrowserTable extends React.Component {
             onMouseDownRowCheckBox={this.props.onMouseDownRowCheckBox}
             onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
             onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
+            setShowAggregatedData={this.props.setShowAggregatedData}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 2a56c4329a..2d48f76133 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -126,6 +126,19 @@ export default class DataBrowser extends React.Component {
     window.removeEventListener('resize', this.updateMaxWidth);
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      this.state.current === null &&
+      this.state.selectedObjectId !== undefined &&
+      prevState.selectedObjectId !== undefined
+    ) {
+      this.setState({ selectedObjectId: undefined });
+      this.props.setAggregationPanelData({});
+      this.props.setShowAggregatedData(false)
+    }
+  }
+
+
   handleResizeStart() {
     this.setState({ isResizing: true });
   }
@@ -301,6 +314,7 @@ export default class DataBrowser extends React.Component {
       case 37:
         // Left - standalone (move to the next visible column on the left)
         // or with ctrl/meta (excel style - move to the first visible column)
+
         this.setState({
           current: {
             row: this.state.current.row,
@@ -319,12 +333,20 @@ export default class DataBrowser extends React.Component {
       case 38:
         // Up - standalone (move to the previous row)
         // or with ctrl/meta (excel style - move to the first row)
+        let prevObjectID = this.state.selectedObjectId;
         this.setState({
           current: {
             row: e.ctrlKey || e.metaKey ? 0 : Math.max(this.state.current.row - 1, 0),
             col: this.state.current.col,
           },
         });
+        this.setState({
+          selectedObjectId:this.props.data[this.state.current.row].id
+        })
+        this.props.setShowAggregatedData(true)
+        if(prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible){
+          this.props.callCloudFunction(this.state.selectedObjectId,this.props.className)
+        }
         e.preventDefault();
         break;
       case 39:
@@ -348,6 +370,7 @@ export default class DataBrowser extends React.Component {
       case 40:
         // Down - standalone (move to the next row)
         // or with ctrl/meta (excel style - move to the last row)
+        prevObjectID = this.state.selectedObjectId;
         this.setState({
           current: {
             row:
@@ -357,6 +380,15 @@ export default class DataBrowser extends React.Component {
             col: this.state.current.col,
           },
         });
+
+        this.setState({
+          selectedObjectId:this.props.data[this.state.current.row].id
+        })
+        this.props.setShowAggregatedData(true)
+        if(prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible){
+          this.props.callCloudFunction(this.state.selectedObjectId,this.props.className)
+        }
+
         e.preventDefault();
         break;
       case 67: // C
@@ -530,6 +562,7 @@ export default class DataBrowser extends React.Component {
             isPanelVisible={this.state.isPanelVisible}
             panelWidth={this.state.panelWidth}
             isResizing={this.state.isResizing}
+            setShowAggregatedData={this.props.setShowAggregatedData}
             {...other}
           />
           {this.state.isPanelVisible && (
@@ -554,14 +587,13 @@ export default class DataBrowser extends React.Component {
               }
             >
               <div style={{
-                height: '100%',
+                height:'100%',
                 overflow: 'auto',
-                display: 'flex',
-                'justify-content': 'center'
               }} >
                 <AggregationPanel
                   data={this.props.AggregationPanelData}
                   isLoadingCloudFunction={this.props.isLoadingCloudFunction}
+                  showAggregatedData={this.props.showAggregatedData}
                 />
               </div>
             </ResizableBox>

From 35fdbb74723c38908c9224c801c078a9f0ceb796 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Fri, 6 Sep 2024 18:14:11 +0530
Subject: [PATCH 16/31] update

---
 .../AggregationPanel/AggregationPanel.js      | 16 ++++--
 .../AggregationPanelComponents.js             | 20 +++++--
 .../BrowserCell/BrowserCell.react.js          | 12 ++++-
 src/components/BrowserRow/BrowserRow.react.js |  1 +
 src/components/Toolbar/Toolbar.react.js       | 33 ++++++------
 src/components/Toolbar/Toolbar.scss           | 28 ++++++++++
 src/dashboard/Data/Browser/Browser.react.js   | 48 +++++++++++------
 .../Data/Browser/BrowserTable.react.js        |  3 ++
 .../Data/Browser/DataBrowser.react.js         | 53 ++++++++++---------
 9 files changed, 150 insertions(+), 64 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index c9f958c911..c51681499e 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -11,14 +11,21 @@ import {
 } from './AggregationPanelComponents';
 import styles from './AggregationPanel.scss';
 
-const AggregationPanel = ({ data, isLoadingCloudFunction, showAggregatedData }) => {
+const AggregationPanel = ({
+  data,
+  isLoadingCloudFunction,
+  showAggregatedData,
+  errorAggregatedData,
+  showNote,
+  setSelectedObjectId
+}) => {
   return (
     <>
       {isLoadingCloudFunction && showAggregatedData ? (
         <div className={styles.center}>
           <LoaderDots />
         </div>
-      ) :  showAggregatedData && Object.keys(data).length !== 0 ? (
+      ) : showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0 ? (
         data.panel.segments.map((segment, index) => (
           <div key={index}>
             <h2 className={styles.heading}>{segment.title}</h2>
@@ -38,7 +45,7 @@ const AggregationPanel = ({ data, isLoadingCloudFunction, showAggregatedData })
                   case 'audio':
                     return <AudioElement key={idx} url={item.url} />;
                   case 'button':
-                    return <ButtonElement key={idx} item={item} />;
+                    return <ButtonElement key={idx} item={item} showNote={showNote} />;
                   default:
                     return null;
                 }
@@ -48,7 +55,8 @@ const AggregationPanel = ({ data, isLoadingCloudFunction, showAggregatedData })
         ))
       ) : (
         <div className={styles.loading}>
-          No object selected. Select an object to see aggregated data.
+            No object selected. Select an object to see aggregated data.
+          {Object.keys(errorAggregatedData).length !== 0 && setSelectedObjectId(null)}
         </div>
       )}
     </>
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index be84fdc5d8..78252a6b9f 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './AggregationPanel.scss';
+
 // Text Element Component
 export const TextElement = ({ text }) => (
   <div className="text-element">
@@ -42,7 +43,9 @@ export const TableElement = ({ columns, rows }) => (
 // Image Element Component
 export const ImageElement = ({ url }) => (
   <div className="image-element">
-    <img src={url} alt="Image" className={styles.image}/>
+    <a href={url} target="_blank" rel="noopener noreferrer">
+      <img src={url} alt="Image" className={styles.image} />
+    </a>
   </div>
 );
 
@@ -67,7 +70,7 @@ export const AudioElement = ({ url }) => (
 );
 
 // Button Element Component
-export const ButtonElement = ({ item }) => {
+export const ButtonElement = ({ item, showNote }) => {
   const handleClick = () => {
     fetch(item.action.url, {
       method: item.action.method,
@@ -75,13 +78,20 @@ export const ButtonElement = ({ item }) => {
       body: JSON.stringify(item.action.body),
     })
       .then(response => response.json())
-      .then(data => console.log(data))
-      .catch(error => console.error('Error:', error));
+      .then(data => {
+        const formattedData = JSON.stringify(data, null, 2);
+        showNote(`${formattedData}`,false)
+      })
+      .catch(error => {
+        showNote(`${error}`,true)
+      });
   };
 
   return (
     <div className={styles.buttonContainer}>
-      <button onClick={handleClick} className={styles.button}>{item.text}</button>
+      <button onClick={handleClick} className={styles.button}>
+        {item.text}
+      </button>
     </div>
   );
 };
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index 99f48120ef..b74f5b7db6 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -280,6 +280,7 @@ export default class BrowserCell extends Component {
   //#region Cell Context Menu related methods
 
   onContextMenu(event) {
+    this.props.setErrorAggregatedData({});
     if (event.type !== 'contextmenu') {
       return;
     }
@@ -289,6 +290,13 @@ export default class BrowserCell extends Component {
 
     onSelect({ row, col });
     setCopyableValue(hidden ? undefined : this.copyableValue);
+    if (this.props.selectedObjectId !== this.props.objectId) {
+      this.props.setShowAggregatedData(true);
+      this.props.setSelectedObjectId(this.props.objectId);
+      if (this.props.isPanelVisible) {
+        this.props.callCloudFunction(this.props.objectId, this.props.className);
+      }
+    }
 
     const available = Filters.availableFilters(
       this.props.simplifiedSchema,
@@ -569,7 +577,8 @@ export default class BrowserCell extends Component {
       markRequiredFieldRow,
       handleCellClick,
       selectedCells,
-      setShowAggregatedData
+      setShowAggregatedData,
+      setErrorAggregatedData
     } = this.props;
 
     const classes = [...this.state.classes];
@@ -634,6 +643,7 @@ export default class BrowserCell extends Component {
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
             if(selectedObjectId !== this.props.objectId) {
+              setErrorAggregatedData({});
               setShowAggregatedData(true)
               setSelectedObjectId(this.props.objectId);
               if(isPanelVisible) {
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index 9187327d2c..b3a56503ad 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -157,6 +157,7 @@ export default class BrowserRow extends Component {
               handleCellClick={this.props.handleCellClick}
               selectedCells={this.props.selectedCells}
               setShowAggregatedData={this.props.setShowAggregatedData}
+              setErrorAggregatedData={this.props.setErrorAggregatedData}
             />
           );
         })}
diff --git a/src/components/Toolbar/Toolbar.react.js b/src/components/Toolbar/Toolbar.react.js
index ea1ca8c34d..a3e0f10b40 100644
--- a/src/components/Toolbar/Toolbar.react.js
+++ b/src/components/Toolbar/Toolbar.react.js
@@ -135,21 +135,24 @@ const Toolbar = props => {
       </div>
       {props?.selectedData?.length ? <Stats data={props.selectedData} /> : null}
       <div className={styles.actions}>{props.children}</div>
-      {props.classwiseCloudFunctions && props.classwiseCloudFunctions[props.className] && <button
-        onClick={props.togglePanel}
-        style={{
-          position: 'absolute',
-          right: '5px',
-          bottom: '5px',
-          border: 'none',
-          padding: '4px 3px',
-          width:' 100px',
-          background: 'rgb(114, 111, 133)',
-          color: 'white'
-        }}
-      >
-        {props.isPanelVisible ? 'Hide Panel' : 'Show Panel'}
-      </button>}
+      {props.classwiseCloudFunctions && props.classwiseCloudFunctions[props.className] && (
+        <button
+          onClick={props.togglePanel}
+          className={styles.btn}
+        >
+          {props.isPanelVisible ? (
+            <>
+              <Icon width={18} height={18} fill="#797592" name="x-outline" />
+              Hide Panel
+            </>
+          ) : (
+            <>
+              <Icon width={18} height={18} fill="#797592" name="left-outline" />
+              Show Panel
+            </>
+          )}
+        </button>
+      )}
     </div>
   );
 };
diff --git a/src/components/Toolbar/Toolbar.scss b/src/components/Toolbar/Toolbar.scss
index b5d41666e4..8f87b1c62c 100644
--- a/src/components/Toolbar/Toolbar.scss
+++ b/src/components/Toolbar/Toolbar.scss
@@ -125,3 +125,31 @@ body:global(.expanded) {
   color: $blue;
   background-color: white;
 }
+
+.btn {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  border: none;
+  padding: 4px 3px;
+  width: 110px;
+  background: none;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+
+  svg {
+
+    &:hover {
+      fill: #ffffff;
+    }
+  }
+
+  &:hover {
+    svg {
+      fill: #ffffff;
+    }
+  }
+}
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 1bb8e9e0a7..2525bfeead 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -112,7 +112,8 @@ class Browser extends DashboardView {
 
       AggregationPanelData: {},
       isLoading: false,
-      showAggregatedData: true
+      showAggregatedData: true,
+      errorAggregatedData: {},
     };
 
     this.addLocation = this.addLocation.bind(this);
@@ -132,6 +133,7 @@ class Browser extends DashboardView {
     this.logout = this.logout.bind(this);
     this.setLoading = this.setLoading.bind(this);
     this.setShowAggregatedData = this.setShowAggregatedData.bind(this);
+    this.setErrorAggregatedData = this.setErrorAggregatedData.bind(this);
     this.toggleMasterKeyUsage = this.toggleMasterKeyUsage.bind(this);
     this.showAttachRowsDialog = this.showAttachRowsDialog.bind(this);
     this.cancelAttachRows = this.cancelAttachRows.bind(this);
@@ -256,22 +258,28 @@ class Browser extends DashboardView {
     }
   }
 
-  setLoading(bool){
+  setLoading(bool) {
     this.setState({
-      isLoading:bool
-    })
+      isLoading: bool,
+    });
   }
 
-  setShowAggregatedData(bool){
+  setErrorAggregatedData(data) {
     this.setState({
-      showAggregatedData:bool
-    })
+      errorAggregatedData: data,
+    });
+  }
+
+  setShowAggregatedData(bool) {
+    this.setState({
+      showAggregatedData: bool,
+    });
   }
 
   fetchAggregationPanelData(objectId, className) {
     this.setState({
-      isLoading: true
-    })
+      isLoading: true,
+    });
     const params = {
       objectId: objectId,
     };
@@ -279,15 +287,23 @@ class Browser extends DashboardView {
 
     Parse.Cloud.run(cloudCodeFunction, params).then(
       result => {
-        this.setState({ AggregationPanelData: result ,
-          isLoading : false
-        });
+        // console.log("result",result,result.panel,result.panel.segmants)
+        if (result && result.panel && result.panel && result.panel.segments) {
+          this.setState({ AggregationPanelData: result, isLoading: false });
+        } else {
+          this.setState({
+            isLoading: false,
+            errorAggregatedData: 'Inproper JSON format',
+          });
+          this.showNote(this.state.errorAggregatedData,true)
+        }
       },
       error => {
         this.setState({
-          isLoading: false
-        })
-        console.log('error', error);
+          isLoading: false,
+          errorAggregatedData: error.message,
+        });
+        this.showNote(this.state.errorAggregatedData,true)
       }
     );
   }
@@ -2059,6 +2075,8 @@ class Browser extends DashboardView {
             setAggregationPanelData={this.setAggregationPanelData}
             showAggregatedData={this.state.showAggregatedData}
             setShowAggregatedData={this.setShowAggregatedData}
+            setErrorAggregatedData={this.setErrorAggregatedData}
+            errorAggregatedData={this.state.errorAggregatedData}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 6cef298c72..d5368dfaed 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -216,6 +216,7 @@ export default class BrowserTable extends React.Component {
                     onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
                     onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
                     setShowAggregatedData={this.props.setShowAggregatedData}
+                    setErrorAggregatedData={this.props.setErrorAggregatedData}
                   />
                   <Button
                     value="Clone"
@@ -294,6 +295,7 @@ export default class BrowserTable extends React.Component {
               onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
               onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
               setShowAggregatedData={this.props.setShowAggregatedData}
+              setErrorAggregatedData={this.props.setErrorAggregatedData}
             />
             <Button
               value="Add"
@@ -381,6 +383,7 @@ export default class BrowserTable extends React.Component {
             onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
             onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
             setShowAggregatedData={this.props.setShowAggregatedData}
+            setErrorAggregatedData={this.props.setErrorAggregatedData}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 2d48f76133..0e566c5208 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -16,7 +16,6 @@ import styles from '../Browser/Browser.scss'
 
 import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
 
-
 /**
  * DataBrowser renders the browser toolbar and data table
  * It also manages the fetching / updating of column size prefs,
@@ -134,11 +133,11 @@ export default class DataBrowser extends React.Component {
     ) {
       this.setState({ selectedObjectId: undefined });
       this.props.setAggregationPanelData({});
-      this.props.setShowAggregatedData(false)
+      this.props.setShowAggregatedData(false);
+      this.props.setErrorAggregatedData({});
     }
   }
 
-
   handleResizeStart() {
     this.setState({ isResizing: true });
   }
@@ -179,9 +178,11 @@ export default class DataBrowser extends React.Component {
     if (!this.state.isPanelVisible) {
       this.props.setAggregationPanelData({});
       this.props.setLoading(false);
+      this.props.setErrorAggregatedData({});
     }
 
-    if(!this.state.isPanelVisible && this.state.selectedObjectId){
+    if (!this.state.isPanelVisible && this.state.selectedObjectId) {
+      this.props.setErrorAggregatedData({});
       this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
     }
   }
@@ -213,6 +214,7 @@ export default class DataBrowser extends React.Component {
         selectedObjectId: undefined,
       });
       this.props.setAggregationPanelData({});
+      this.props.setErrorAggregatedData({});
     }
   }
 
@@ -382,11 +384,11 @@ export default class DataBrowser extends React.Component {
         });
 
         this.setState({
-          selectedObjectId:this.props.data[this.state.current.row].id
-        })
-        this.props.setShowAggregatedData(true)
-        if(prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible){
-          this.props.callCloudFunction(this.state.selectedObjectId,this.props.className)
+          selectedObjectId: this.props.data[this.state.current.row].id,
+        });
+        this.props.setShowAggregatedData(true);
+        if (prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible) {
+          this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
         }
 
         e.preventDefault();
@@ -571,29 +573,32 @@ export default class DataBrowser extends React.Component {
               height={Infinity}
               minConstraints={[400, Infinity]}
               maxConstraints={[this.state.maxWidth, Infinity]}
-              onResizeStart={this.handleResizeStart}  // Handle start of resizing
-              onResizeStop={this.handleResizeStop}    // Handle end of resizing
+              onResizeStart={this.handleResizeStart} // Handle start of resizing
+              onResizeStop={this.handleResizeStop} // Handle end of resizing
               onResize={this.handleResizeDiv}
               resizeHandles={['w']}
               className={styles.resizablePanel}
-              style={
-                {
-
-                  position: 'fixed',
-                  top: '96px',
-                  right: '0',
-                  bottom: '0px',
-                }
-              }
+              style={{
+                position: 'fixed',
+                top: '96px',
+                right: '0',
+                bottom: '0px',
+              }}
             >
-              <div style={{
-                height:'100%',
-                overflow: 'auto',
-              }} >
+              <div
+                style={{
+                  height: '100%',
+                  overflow: 'auto',
+                }}
+              >
                 <AggregationPanel
                   data={this.props.AggregationPanelData}
                   isLoadingCloudFunction={this.props.isLoadingCloudFunction}
                   showAggregatedData={this.props.showAggregatedData}
+                  errorAggregatedData={this.props.errorAggregatedData}
+                  showNote={this.props.showNote}
+                  setErrorAggregatedData={this.props.setErrorAggregatedData}
+                  setSelectedObjectId={this.setSelectedObjectId}
                 />
               </div>
             </ResizableBox>

From 20e4135a87406cc6db2511f3e0bbebe7f1fabf2d Mon Sep 17 00:00:00 2001
From: Harshvardhan Sharma <91624754+vardhan0604@users.noreply.github.com>
Date: Sat, 7 Sep 2024 17:28:54 +0530
Subject: [PATCH 17/31] Update src/dashboard/Data/Browser/Browser.react.js

Co-authored-by: Artur <45104241+404-html@users.noreply.github.com>
Signed-off-by: Harshvardhan Sharma <91624754+vardhan0604@users.noreply.github.com>
---
 src/dashboard/Data/Browser/Browser.react.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 2525bfeead..b184d44b99 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -287,7 +287,6 @@ class Browser extends DashboardView {
 
     Parse.Cloud.run(cloudCodeFunction, params).then(
       result => {
-        // console.log("result",result,result.panel,result.panel.segmants)
         if (result && result.panel && result.panel && result.panel.segments) {
           this.setState({ AggregationPanelData: result, isLoading: false });
         } else {

From 8c4e68f15135d7f4fb74069aecd0b0ee3891c5c1 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Wed, 11 Sep 2024 11:57:53 +0530
Subject: [PATCH 18/31] fixed issues

---
 .../AggregationPanel/AggregationPanel.js      | 10 +++---
 .../BrowserCell/BrowserCell.react.js          | 12 ++++---
 src/components/BrowserRow/BrowserRow.react.js |  1 +
 src/components/Toolbar/Toolbar.react.js       | 13 +++++--
 src/components/Toolbar/Toolbar.scss           |  2 +-
 src/dashboard/Data/Browser/Browser.scss       | 11 ------
 .../Data/Browser/BrowserTable.react.js        |  3 ++
 .../Data/Browser/DataBrowser.react.js         | 34 +++++++------------
 src/dashboard/Data/Browser/Databrowser.scss   | 20 +++++++++++
 9 files changed, 62 insertions(+), 44 deletions(-)
 create mode 100644 src/dashboard/Data/Browser/Databrowser.scss

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index c51681499e..9d351802a8 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -15,17 +15,19 @@ const AggregationPanel = ({
   data,
   isLoadingCloudFunction,
   showAggregatedData,
+  setErrorAggregatedData,
   errorAggregatedData,
   showNote,
-  setSelectedObjectId
+  setSelectedObjectId,
+  selectedObjectId
 }) => {
   return (
     <>
-      {isLoadingCloudFunction && showAggregatedData ? (
+      {selectedObjectId && isLoadingCloudFunction && showAggregatedData ? (
         <div className={styles.center}>
           <LoaderDots />
         </div>
-      ) : showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0 ? (
+      ) : selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0 ? (
         data.panel.segments.map((segment, index) => (
           <div key={index}>
             <h2 className={styles.heading}>{segment.title}</h2>
@@ -56,7 +58,7 @@ const AggregationPanel = ({
       ) : (
         <div className={styles.loading}>
             No object selected. Select an object to see aggregated data.
-          {Object.keys(errorAggregatedData).length !== 0 && setSelectedObjectId(null)}
+          {Object.keys(errorAggregatedData).length !== 0 && setSelectedObjectId(null) && setErrorAggregatedData({})}
         </div>
       )}
     </>
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index b74f5b7db6..f477fa8063 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -543,7 +543,7 @@ export default class BrowserCell extends Component {
           field,
           constraint,
           compareTo,
-          class: className
+          class: className,
         })
       )
     );
@@ -642,11 +642,15 @@ export default class BrowserCell extends Component {
             onPointerCmdClick(value);
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
-            if(selectedObjectId !== this.props.objectId) {
+            if (selectedObjectId !== this.props.objectId) {
               setErrorAggregatedData({});
-              setShowAggregatedData(true)
+              setShowAggregatedData(true);
               setSelectedObjectId(this.props.objectId);
-              if(isPanelVisible) {
+              if (
+                this.props.objectId &&
+                isPanelVisible &&
+                ((e.shiftKey && !this.props.firstSelectedCell) || !e.shiftKey)
+              ) {
                 callCloudFunction(this.props.objectId, this.props.className);
               }
             }
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index b3a56503ad..0e6f40a694 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -158,6 +158,7 @@ export default class BrowserRow extends Component {
               selectedCells={this.props.selectedCells}
               setShowAggregatedData={this.props.setShowAggregatedData}
               setErrorAggregatedData={this.props.setErrorAggregatedData}
+              firstSelectedCell={this.props.firstSelectedCell}
             />
           );
         })}
diff --git a/src/components/Toolbar/Toolbar.react.js b/src/components/Toolbar/Toolbar.react.js
index a3e0f10b40..9d42b108a6 100644
--- a/src/components/Toolbar/Toolbar.react.js
+++ b/src/components/Toolbar/Toolbar.react.js
@@ -15,7 +15,7 @@ import { useNavigate, useNavigationType, NavigationType } from 'react-router-dom
 
 const POPOVER_CONTENT_ID = 'toolbarStatsPopover';
 
-const Stats = ({ data }) => {
+const Stats = ({ data, classwiseCloudFunctions, className }) => {
   const [selected, setSelected] = React.useState(null);
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef();
@@ -98,10 +98,17 @@ const Stats = ({ data }) => {
     setSelected(statsOptions[0]);
   }, []);
 
+  const rightMarginStyle = classwiseCloudFunctions && classwiseCloudFunctions[className] ? '120px' : 'initial';
+
   return (
     <>
       {selected ? (
-        <button ref={buttonRef} className={styles.stats} onClick={toggle}>
+        <button
+          ref={buttonRef}
+          className={styles.stats}
+          onClick={toggle}
+          style={{ marginRight: rightMarginStyle }}
+        >
           {`${selected.label}: ${selected.getValue(data)}`}
         </button>
       ) : null}
@@ -133,7 +140,7 @@ const Toolbar = props => {
           </div>
         </div>
       </div>
-      {props?.selectedData?.length ? <Stats data={props.selectedData} /> : null}
+      {props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className = {props.className} /> : null}
       <div className={styles.actions}>{props.children}</div>
       {props.classwiseCloudFunctions && props.classwiseCloudFunctions[props.className] && (
         <button
diff --git a/src/components/Toolbar/Toolbar.scss b/src/components/Toolbar/Toolbar.scss
index 8f87b1c62c..88f7261171 100644
--- a/src/components/Toolbar/Toolbar.scss
+++ b/src/components/Toolbar/Toolbar.scss
@@ -131,7 +131,7 @@ body:global(.expanded) {
   right: 5px;
   bottom: 5px;
   border: none;
-  padding: 4px 3px;
+  padding: 6px 3px;
   width: 110px;
   background: none;
   color: white;
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index 75ba39e60f..cae8f2700f 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -264,17 +264,6 @@ body:global(.expanded) {
   }
 } 
 
-.resizablePanel {
-  :global(.react-resizable-handle) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 10px;
-    cursor: col-resize;
-  }
-}
-
 .dataContainer{
   height: 100%;
   overflow: auto;
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index d5368dfaed..58840ccf75 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -217,6 +217,7 @@ export default class BrowserTable extends React.Component {
                     onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
                     setShowAggregatedData={this.props.setShowAggregatedData}
                     setErrorAggregatedData={this.props.setErrorAggregatedData}
+                    firstSelectedCell={this.props.firstSelectedCell}
                   />
                   <Button
                     value="Clone"
@@ -296,6 +297,7 @@ export default class BrowserTable extends React.Component {
               onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
               setShowAggregatedData={this.props.setShowAggregatedData}
               setErrorAggregatedData={this.props.setErrorAggregatedData}
+              firstSelectedCell={this.props.firstSelectedCell}
             />
             <Button
               value="Add"
@@ -384,6 +386,7 @@ export default class BrowserTable extends React.Component {
             onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
             setShowAggregatedData={this.props.setShowAggregatedData}
             setErrorAggregatedData={this.props.setErrorAggregatedData}
+            firstSelectedCell={this.props.firstSelectedCell}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 0e566c5208..6d2acec920 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -12,7 +12,7 @@ import ContextMenu from 'components/ContextMenu/ContextMenu.react';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import React from 'react';
 import { ResizableBox } from 'react-resizable';
-import styles from '../Browser/Browser.scss'
+import styles from './Databrowser.scss';
 
 import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
 
@@ -83,6 +83,9 @@ export default class DataBrowser extends React.Component {
         editing: false,
         simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className),
         allClassesSchema: this.getAllClassesSchema(props.schema, props.classes),
+        selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
+        firstSelectedCell: null,
+        selectedData: []
       });
     } else if (
       Object.keys(props.columns).length !== Object.keys(this.props.columns).length ||
@@ -97,11 +100,6 @@ export default class DataBrowser extends React.Component {
       );
       this.setState({ order });
     }
-    this.setState({
-      selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
-      firstSelectedCell: null,
-      selectedData: [],
-    });
     if (props && props.className) {
       if (!props.classwiseCloudFunctions[props.className]) {
         this.setState({ isPanelVisible: false });
@@ -154,9 +152,10 @@ export default class DataBrowser extends React.Component {
   }
 
   updateMaxWidth = () => {
-    this.setState({ maxWidth: window.innerWidth - 300 });
-    if (this.state.panelWidth > window.innerWidth - 300) {
-      this.setState({ panelWidth: window.innerWidth - 300 });
+    const SidePanelWidth = 300;
+    this.setState({ maxWidth: window.innerWidth - SidePanelWidth });
+    if (this.state.panelWidth > window.innerWidth - SidePanelWidth) {
+      this.setState({ panelWidth: window.innerWidth - SidePanelWidth });
     }
   };
 
@@ -503,6 +502,7 @@ export default class DataBrowser extends React.Component {
 
       if (newSelection.size > 1) {
         this.setCurrent(null);
+        this.props.setLoading(false);
         this.setState({
           selectedCells: {
             list: newSelection,
@@ -511,6 +511,7 @@ export default class DataBrowser extends React.Component {
             colStart,
             colEnd,
           },
+          selectedObjectId: undefined,
           selectedData,
         });
       } else {
@@ -565,6 +566,7 @@ export default class DataBrowser extends React.Component {
             panelWidth={this.state.panelWidth}
             isResizing={this.state.isResizing}
             setShowAggregatedData={this.props.setShowAggregatedData}
+            firstSelectedCell={this.state.firstSelectedCell}
             {...other}
           />
           {this.state.isPanelVisible && (
@@ -578,19 +580,8 @@ export default class DataBrowser extends React.Component {
               onResize={this.handleResizeDiv}
               resizeHandles={['w']}
               className={styles.resizablePanel}
-              style={{
-                position: 'fixed',
-                top: '96px',
-                right: '0',
-                bottom: '0px',
-              }}
             >
-              <div
-                style={{
-                  height: '100%',
-                  overflow: 'auto',
-                }}
-              >
+              <div className={styles.aggregationPanelContainer}>
                 <AggregationPanel
                   data={this.props.AggregationPanelData}
                   isLoadingCloudFunction={this.props.isLoadingCloudFunction}
@@ -599,6 +590,7 @@ export default class DataBrowser extends React.Component {
                   showNote={this.props.showNote}
                   setErrorAggregatedData={this.props.setErrorAggregatedData}
                   setSelectedObjectId={this.setSelectedObjectId}
+                  selectedObjectId={this.state.selectedObjectId}
                 />
               </div>
             </ResizableBox>
diff --git a/src/dashboard/Data/Browser/Databrowser.scss b/src/dashboard/Data/Browser/Databrowser.scss
new file mode 100644
index 0000000000..5e6c5fe94e
--- /dev/null
+++ b/src/dashboard/Data/Browser/Databrowser.scss
@@ -0,0 +1,20 @@
+.resizablePanel{
+    position: fixed;
+    top: 96px;
+    right: 0;
+    bottom: 0px;
+    :global(.react-resizable-handle) {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 10px;
+        cursor: col-resize;
+    }
+}
+
+
+.aggregationPanelContainer{
+    height:100%;
+    overflow: auto;
+}
\ No newline at end of file

From 1bd146f55ca7473f31376e75cfb637995b78ad64 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Wed, 18 Sep 2024 23:03:57 +0530
Subject: [PATCH 19/31] fixed bugs

---
 .../AggregationPanel/AggregationPanel.js      | 24 +++++++++--
 src/components/Toolbar/Toolbar.react.js       |  2 +-
 src/dashboard/Data/Browser/Browser.react.js   | 13 ------
 .../Data/Browser/BrowserTable.react.js        | 13 ++----
 .../Data/Browser/DataBrowser.react.js         | 40 ++++++++++++++-----
 5 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index 9d351802a8..953b5f96c6 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import LoaderDots from 'components/LoaderDots/LoaderDots.react';
 import {
   TextElement,
@@ -21,13 +21,30 @@ const AggregationPanel = ({
   setSelectedObjectId,
   selectedObjectId
 }) => {
+
+  useEffect(() => {
+    if (Object.keys(errorAggregatedData).length !== 0) {
+      setSelectedObjectId(null);
+      setErrorAggregatedData({});
+    }
+  }, [errorAggregatedData, setSelectedObjectId, setErrorAggregatedData]);
+
+  const isLoading = useMemo(() =>
+    selectedObjectId && isLoadingCloudFunction && showAggregatedData,
+  [selectedObjectId, isLoadingCloudFunction, showAggregatedData]
+  );
+
+  const shouldShowAggregatedData = useMemo(() =>
+    selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0, [selectedObjectId, showAggregatedData, data, errorAggregatedData]
+  );
+
   return (
     <>
-      {selectedObjectId && isLoadingCloudFunction && showAggregatedData ? (
+      {isLoading ? (
         <div className={styles.center}>
           <LoaderDots />
         </div>
-      ) : selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0 ? (
+      ) : shouldShowAggregatedData ? (
         data.panel.segments.map((segment, index) => (
           <div key={index}>
             <h2 className={styles.heading}>{segment.title}</h2>
@@ -58,7 +75,6 @@ const AggregationPanel = ({
       ) : (
         <div className={styles.loading}>
             No object selected. Select an object to see aggregated data.
-          {Object.keys(errorAggregatedData).length !== 0 && setSelectedObjectId(null) && setErrorAggregatedData({})}
         </div>
       )}
     </>
diff --git a/src/components/Toolbar/Toolbar.react.js b/src/components/Toolbar/Toolbar.react.js
index 9d42b108a6..aad773e702 100644
--- a/src/components/Toolbar/Toolbar.react.js
+++ b/src/components/Toolbar/Toolbar.react.js
@@ -140,7 +140,7 @@ const Toolbar = props => {
           </div>
         </div>
       </div>
-      {props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className = {props.className} /> : null}
+      {props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className={props.className} /> : null}
       <div className={styles.actions}>{props.children}</div>
       {props.classwiseCloudFunctions && props.classwiseCloudFunctions[props.className] && (
         <button
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index b184d44b99..8331c6d079 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -106,13 +106,10 @@ class Browser extends DashboardView {
 
       classes: {},
       allClassesSchema: {},
-
       configData: {},
       classwiseCloudFunctions: {},
-
       AggregationPanelData: {},
       isLoading: false,
-      showAggregatedData: true,
       errorAggregatedData: {},
     };
 
@@ -132,7 +129,6 @@ class Browser extends DashboardView {
     this.login = this.login.bind(this);
     this.logout = this.logout.bind(this);
     this.setLoading = this.setLoading.bind(this);
-    this.setShowAggregatedData = this.setShowAggregatedData.bind(this);
     this.setErrorAggregatedData = this.setErrorAggregatedData.bind(this);
     this.toggleMasterKeyUsage = this.toggleMasterKeyUsage.bind(this);
     this.showAttachRowsDialog = this.showAttachRowsDialog.bind(this);
@@ -270,12 +266,6 @@ class Browser extends DashboardView {
     });
   }
 
-  setShowAggregatedData(bool) {
-    this.setState({
-      showAggregatedData: bool,
-    });
-  }
-
   fetchAggregationPanelData(objectId, className) {
     this.setState({
       isLoading: true,
@@ -337,7 +327,6 @@ class Browser extends DashboardView {
 
   classAndCloudFuntionMap(data) {
     const classMap = {};
-
     data.apps.forEach(app => {
       app.infoPanel.forEach(panel => {
         panel.classes.forEach(className => {
@@ -2072,8 +2061,6 @@ class Browser extends DashboardView {
             setLoading={this.setLoading}
             AggregationPanelData={this.state.AggregationPanelData}
             setAggregationPanelData={this.setAggregationPanelData}
-            showAggregatedData={this.state.showAggregatedData}
-            setShowAggregatedData={this.setShowAggregatedData}
             setErrorAggregatedData={this.setErrorAggregatedData}
             errorAggregatedData={this.state.errorAggregatedData}
           />
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 58840ccf75..54d5ab4a31 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -518,10 +518,7 @@ export default class BrowserTable extends React.Component {
 
       if (this.props.newObject || this.props.data.length > 0) {
         table = (
-          <div
-            className={styles.table}
-            ref={this.tableRef}
-          >
+          <div className={styles.table} ref={this.tableRef}>
             <div style={{ height: Math.max(0, this.state.offset * ROW_HEIGHT) }} />
             {editCloneRows}
             {newRow}
@@ -540,10 +537,7 @@ export default class BrowserTable extends React.Component {
         );
       } else {
         table = (
-          <div
-            className={styles.table}
-            ref={this.tableRef}
-          >
+          <div className={styles.table} ref={this.tableRef}>
             <div className={styles.empty}>
               {this.props.relation ? (
                 <EmptyState
@@ -580,7 +574,7 @@ export default class BrowserTable extends React.Component {
           'overflow-x': this.props.isResizing ? 'hidden' : 'auto',
         }}
       >
-        <div >
+        <div>
           <DataBrowserHeaderBar
             selected={
               !!this.props.selection &&
@@ -600,7 +594,6 @@ export default class BrowserTable extends React.Component {
             preventSchemaEdits={this.context.preventSchemaEdits}
             isDataLoaded={!!this.props.data}
           />
-
           {table}
         </div>
       </div>
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 6d2acec920..8cb2964c43 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -48,6 +48,7 @@ export default class DataBrowser extends React.Component {
       panelWidth: 400,
       isResizing: false,
       maxWidth: window.innerWidth - 300,
+      showAggregatedData: true,
     };
 
     this.handleResizeDiv = this.handleResizeDiv.bind(this);
@@ -61,6 +62,7 @@ export default class DataBrowser extends React.Component {
     this.setCurrent = this.setCurrent.bind(this);
     this.setEditing = this.setEditing.bind(this);
     this.handleColumnsOrder = this.handleColumnsOrder.bind(this);
+    this.setShowAggregatedData = this.setShowAggregatedData.bind(this);
     this.setCopyableValue = this.setCopyableValue.bind(this);
     this.setSelectedObjectId = this.setSelectedObjectId.bind(this);
     this.setContextMenu = this.setContextMenu.bind(this);
@@ -129,10 +131,14 @@ export default class DataBrowser extends React.Component {
       this.state.selectedObjectId !== undefined &&
       prevState.selectedObjectId !== undefined
     ) {
-      this.setState({ selectedObjectId: undefined });
+      this.setState({ 
+        selectedObjectId: undefined,
+        showAggregatedData: false
+      });
       this.props.setAggregationPanelData({});
-      this.props.setShowAggregatedData(false);
-      this.props.setErrorAggregatedData({});
+      if(this.props.errorAggregatedData != {}){
+        this.props.setErrorAggregatedData({});
+      }
     }
   }
 
@@ -151,6 +157,12 @@ export default class DataBrowser extends React.Component {
     this.setState({ panelWidth: size.width });
   }
 
+  setShowAggregatedData(bool) {
+    this.setState({
+      showAggregatedData: bool,
+    });
+  }
+
   updateMaxWidth = () => {
     const SidePanelWidth = 300;
     this.setState({ maxWidth: window.innerWidth - SidePanelWidth });
@@ -177,11 +189,15 @@ export default class DataBrowser extends React.Component {
     if (!this.state.isPanelVisible) {
       this.props.setAggregationPanelData({});
       this.props.setLoading(false);
-      this.props.setErrorAggregatedData({});
+      if(this.props.errorAggregatedData != {}){
+        this.props.setErrorAggregatedData({});
+      }
     }
 
     if (!this.state.isPanelVisible && this.state.selectedObjectId) {
-      this.props.setErrorAggregatedData({});
+      if(this.props.errorAggregatedData != {}){
+        this.props.setErrorAggregatedData({});
+      }
       this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
     }
   }
@@ -213,7 +229,9 @@ export default class DataBrowser extends React.Component {
         selectedObjectId: undefined,
       });
       this.props.setAggregationPanelData({});
-      this.props.setErrorAggregatedData({});
+      if(this.props.errorAggregatedData != {}){
+        this.props.setErrorAggregatedData({});
+      }
     }
   }
 
@@ -342,9 +360,9 @@ export default class DataBrowser extends React.Component {
           },
         });
         this.setState({
-          selectedObjectId:this.props.data[this.state.current.row].id
+          selectedObjectId:this.props.data[this.state.current.row].id,
+          showAggregatedData:true
         })
-        this.props.setShowAggregatedData(true)
         if(prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible){
           this.props.callCloudFunction(this.state.selectedObjectId,this.props.className)
         }
@@ -384,8 +402,8 @@ export default class DataBrowser extends React.Component {
 
         this.setState({
           selectedObjectId: this.props.data[this.state.current.row].id,
+          showAggregatedData: true,
         });
-        this.props.setShowAggregatedData(true);
         if (prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible) {
           this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
         }
@@ -565,7 +583,7 @@ export default class DataBrowser extends React.Component {
             isPanelVisible={this.state.isPanelVisible}
             panelWidth={this.state.panelWidth}
             isResizing={this.state.isResizing}
-            setShowAggregatedData={this.props.setShowAggregatedData}
+            setShowAggregatedData={this.setShowAggregatedData}
             firstSelectedCell={this.state.firstSelectedCell}
             {...other}
           />
@@ -585,7 +603,7 @@ export default class DataBrowser extends React.Component {
                 <AggregationPanel
                   data={this.props.AggregationPanelData}
                   isLoadingCloudFunction={this.props.isLoadingCloudFunction}
-                  showAggregatedData={this.props.showAggregatedData}
+                  showAggregatedData={this.state.showAggregatedData}
                   errorAggregatedData={this.props.errorAggregatedData}
                   showNote={this.props.showNote}
                   setErrorAggregatedData={this.props.setErrorAggregatedData}

From 13e8e262fbef7c939e8a410d6b492615504ef076 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Wed, 18 Sep 2024 23:07:56 +0530
Subject: [PATCH 20/31] fix lint

---
 src/dashboard/Data/Browser/DataBrowser.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 8cb2964c43..77e6955895 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -131,7 +131,7 @@ export default class DataBrowser extends React.Component {
       this.state.selectedObjectId !== undefined &&
       prevState.selectedObjectId !== undefined
     ) {
-      this.setState({ 
+      this.setState({
         selectedObjectId: undefined,
         showAggregatedData: false
       });

From bde2c47cd801872b6dcb90ccdacd23464ece9f9d Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Mon, 23 Sep 2024 15:35:00 +0530
Subject: [PATCH 21/31] Fixed all required bugs

---
 src/components/BrowserCell/BrowserCell.react.js                 | 1 -
 .../DataBrowserHeaderBar/DataBrowserHeaderBar.react.js          | 2 +-
 src/dashboard/Data/Browser/Browser.react.js                     | 2 +-
 src/dashboard/Data/Browser/Browser.scss                         | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index f477fa8063..ee33eaa0e0 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -643,7 +643,6 @@ export default class BrowserCell extends Component {
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
             if (selectedObjectId !== this.props.objectId) {
-              setErrorAggregatedData({});
               setShowAggregatedData(true);
               setSelectedObjectId(this.props.objectId);
               if (
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index f70ee227a7..a3970a7adb 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -77,7 +77,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       const finalStyle = {};
       if (headers.length % 2) {
         finalStyle.background = '#726F85';
-      }else {
+      } else{
         finalStyle.background = '#66637A';
       }
 
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 8331c6d079..b5d698cab7 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -282,7 +282,7 @@ class Browser extends DashboardView {
         } else {
           this.setState({
             isLoading: false,
-            errorAggregatedData: 'Inproper JSON format',
+            errorAggregatedData: 'Improper JSON format',
           });
           this.showNote(this.state.errorAggregatedData,true)
         }
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index cae8f2700f..97948cb9a0 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -264,7 +264,7 @@ body:global(.expanded) {
   }
 } 
 
-.dataContainer{
+.dataContainer {
   height: 100%;
   overflow: auto;
 }

From f7fe82b6aa1fe71c41efa99f9ac8c46831cb09e7 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Mon, 23 Sep 2024 15:39:38 +0530
Subject: [PATCH 22/31] fix lint

---
 src/components/BrowserCell/BrowserCell.react.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index ee33eaa0e0..74614feb69 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -577,8 +577,7 @@ export default class BrowserCell extends Component {
       markRequiredFieldRow,
       handleCellClick,
       selectedCells,
-      setShowAggregatedData,
-      setErrorAggregatedData
+      setShowAggregatedData
     } = this.props;
 
     const classes = [...this.state.classes];

From db8eff284f53e4cfa121665bb1225bf1a58f4360 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 04:00:56 +0200
Subject: [PATCH 23/31] shorten panel text

---
 .../AggregationPanel/AggregationPanel.js           | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index 953b5f96c6..5cd5a0440b 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -1,15 +1,15 @@
-import React, { useEffect, useMemo } from 'react';
 import LoaderDots from 'components/LoaderDots/LoaderDots.react';
+import React, { useEffect, useMemo } from 'react';
+import styles from './AggregationPanel.scss';
 import {
-  TextElement,
+  AudioElement,
+  ButtonElement,
+  ImageElement,
   KeyValueElement,
   TableElement,
-  ImageElement,
+  TextElement,
   VideoElement,
-  AudioElement,
-  ButtonElement,
 } from './AggregationPanelComponents';
-import styles from './AggregationPanel.scss';
 
 const AggregationPanel = ({
   data,
@@ -74,7 +74,7 @@ const AggregationPanel = ({
         ))
       ) : (
         <div className={styles.loading}>
-            No object selected. Select an object to see aggregated data.
+            No object selected.
         </div>
       )}
     </>

From 5a614bd282605ec010d6f7f34e270864606a7398 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 04:01:06 +0200
Subject: [PATCH 24/31] add panel shadow

---
 src/dashboard/Data/Browser/Databrowser.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/dashboard/Data/Browser/Databrowser.scss b/src/dashboard/Data/Browser/Databrowser.scss
index 5e6c5fe94e..761400df2e 100644
--- a/src/dashboard/Data/Browser/Databrowser.scss
+++ b/src/dashboard/Data/Browser/Databrowser.scss
@@ -10,6 +10,7 @@
         bottom: 0;
         width: 10px;
         cursor: col-resize;
+        box-shadow: -3px 0 3px -1px rgba(177, 177, 177, 0.2);
     }
 }
 

From ac64604a5c1831a7a9fa4cae8b3ccddd587efe4e Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 04:09:29 +0200
Subject: [PATCH 25/31] soften panel shadow

---
 src/dashboard/Data/Browser/Databrowser.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dashboard/Data/Browser/Databrowser.scss b/src/dashboard/Data/Browser/Databrowser.scss
index 761400df2e..7dfd306fb3 100644
--- a/src/dashboard/Data/Browser/Databrowser.scss
+++ b/src/dashboard/Data/Browser/Databrowser.scss
@@ -10,7 +10,7 @@
         bottom: 0;
         width: 10px;
         cursor: col-resize;
-        box-shadow: -3px 0 3px -1px rgba(177, 177, 177, 0.2);
+        box-shadow: -3px 0 3px -1px rgba(203, 203, 203, 0.2);
     }
 }
 

From 9bd827ea27ae03add24f81ed1e67a2a21ae89cbb Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 04:30:51 +0200
Subject: [PATCH 26/31] minor style adjustments

---
 src/components/AggregationPanel/AggregationPanel.scss | 11 +++++------
 .../AggregationPanel/AggregationPanelComponents.js    |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 226cfeec43..78d96dee12 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -1,9 +1,9 @@
 @import 'stylesheets/globals.scss';
 
 .heading {
-    font-size: 18px;
+    font-size: 14px;
     margin-top: 0;
-    padding: 6px;
+    padding: 8px;
     padding-left: 10px;
     background-color: $blue;
     color: $white;
@@ -13,7 +13,7 @@
     font-size: 14px;
     padding-left: 10px;
     padding-right: 10px;
-    padding-top: 5px;
+    padding-top: 6px;
     display: flex;
     flex-direction: column;
     border-left: 1px solid #e3e3ea;
@@ -23,7 +23,7 @@
 .keyValue {
     font-size: 14px;
     display: flex;
-    gap: 36px;
+    gap: 10px;
 }
 
 .video {
@@ -49,8 +49,7 @@
 
 .segmentItems th,
 .segmentItems td {
-    font-size: 14px;
-    padding: 8px;
+    padding: 4px;
     text-align: left;
 }
 
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index 78252a6b9f..2f876c17d0 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -11,8 +11,8 @@ export const TextElement = ({ text }) => (
 // Key-Value Element Component
 export const KeyValueElement = ({ item }) => (
   <div className={styles.keyValue}>
-    <strong>{item.key}:</strong>
-    {item.url ? <a href={item.url}>{item.value}</a> : <span>{item.value}</span>}
+    {item.key}:
+    {item.url ? <a href={item.url} target="_blank">{item.value}</a> : <span>{item.value}</span>}
   </div>
 );
 

From a498be9f34d3a7da06f75d644f706287c741ca67 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 04:37:31 +0200
Subject: [PATCH 27/31] add background color

---
 src/dashboard/Data/Browser/Databrowser.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/dashboard/Data/Browser/Databrowser.scss b/src/dashboard/Data/Browser/Databrowser.scss
index 7dfd306fb3..dd38a397c5 100644
--- a/src/dashboard/Data/Browser/Databrowser.scss
+++ b/src/dashboard/Data/Browser/Databrowser.scss
@@ -18,4 +18,5 @@
 .aggregationPanelContainer{
     height:100%;
     overflow: auto;
+    background-color: #fefafb;
 }
\ No newline at end of file

From 87881d5aad4949500312ec92334e8994e793b7c6 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 04:43:56 +0200
Subject: [PATCH 28/31] prevent sidebar selection

---
 src/dashboard/Data/Browser/Databrowser.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/Data/Browser/Databrowser.scss b/src/dashboard/Data/Browser/Databrowser.scss
index dd38a397c5..112306c2b7 100644
--- a/src/dashboard/Data/Browser/Databrowser.scss
+++ b/src/dashboard/Data/Browser/Databrowser.scss
@@ -11,12 +11,15 @@
         width: 10px;
         cursor: col-resize;
         box-shadow: -3px 0 3px -1px rgba(203, 203, 203, 0.2);
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
     }
 }
 
-
 .aggregationPanelContainer{
-    height:100%;
+    height: 100%;
     overflow: auto;
     background-color: #fefafb;
-}
\ No newline at end of file
+}

From f6f8990dd220b7357d7c40d23ecb7a2834573994 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 04:59:16 +0200
Subject: [PATCH 29/31] min panel width 100

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

diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 54d5ab4a31..f78125059b 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -30,7 +30,7 @@ export default class BrowserTable extends React.Component {
 
     this.state = {
       offset: 0,
-      panelWidth: 400,
+      panelWidth: 300,
       isResizing: false,
       maxWidth: window.innerWidth - 300,
     };
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 77e6955895..90a5dd8347 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -5,10 +5,10 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
+import ContextMenu from 'components/ContextMenu/ContextMenu.react';
 import copy from 'copy-to-clipboard';
 import BrowserTable from 'dashboard/Data/Browser/BrowserTable.react';
 import BrowserToolbar from 'dashboard/Data/Browser/BrowserToolbar.react';
-import ContextMenu from 'components/ContextMenu/ContextMenu.react';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import React from 'react';
 import { ResizableBox } from 'react-resizable';
@@ -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

From ffc683b47cf4bf95ea450b0662a0855e62a2c9bf Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 05:02:14 +0200
Subject: [PATCH 30/31] button style

---
 src/components/AggregationPanel/AggregationPanel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 78d96dee12..2bfda14147 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -67,7 +67,7 @@
     cursor: pointer;
     margin-bottom: 15px;
     background-color: $blue;
-    padding: 5px 10px;
+    padding: 3px 13px;
     border: none;
     color: $white;
     line-height: 28px;

From 28d6349d5043a785e0e9aca3de3caee1bd0472d4 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Sat, 5 Oct 2024 18:34:25 +0530
Subject: [PATCH 31/31] fix reorder bug

---
 .../DataBrowserHeaderBar/DataBrowserHeaderBar.react.js    | 8 +++++++-
 src/dashboard/Data/Browser/Browser.react.js               | 3 +++
 src/dashboard/Data/Browser/BrowserTable.react.js          | 2 ++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index a3970a7adb..1287e62ae5 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -24,6 +24,8 @@ export default class DataBrowserHeaderBar extends React.Component {
       preventSchemaEdits,
       selected,
       isDataLoaded,
+      setSelectedObjectId,
+      setCurrent
     } = this.props;
     const elements = [
       <div key="check" className={[styles.wrap, styles.check].join(' ')}>
@@ -48,7 +50,11 @@ export default class DataBrowserHeaderBar extends React.Component {
         !preventSort &&
         (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean')
       ) {
-        onClick = () => updateOrdering((order === 'descending' ? '' : '-') + name);
+        onClick = () =>{
+          updateOrdering((order === 'descending' ? '' : '-') + name);
+          setSelectedObjectId(null);
+          setCurrent(null)
+        }
       }
 
       let className = styles.wrap;
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index b5d698cab7..9f97022618 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -1094,6 +1094,9 @@ class Browser extends DashboardView {
       {
         ordering: ordering,
         selection: {},
+        errorAggregatedData: {},
+        isLoading: false,
+        AggregationPanelData: {},
       },
       () => this.fetchData(source, this.state.filters)
     );
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 54d5ab4a31..a5abd2cbf3 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -593,6 +593,8 @@ export default class BrowserTable extends React.Component {
             onAddColumn={this.props.onAddColumn}
             preventSchemaEdits={this.context.preventSchemaEdits}
             isDataLoaded={!!this.props.data}
+            setSelectedObjectId={this.props.setSelectedObjectId}
+            setCurrent={this.props.setCurrent}
           />
           {table}
         </div>