feat: Add info panel item panel to load and display data on demand

src/components/AggregationPanel/AggregationPanel.js

@@ -9,6 +9,7 @@ import {
   TableElement,
   TextElement,
   VideoElement,
+  PanelElement
 } from './AggregationPanelComponents';
 
 const AggregationPanel = ({
@@ -65,6 +66,8 @@ const AggregationPanel = ({
                     return <AudioElement key={idx} url={item.url} />;
                   case 'button':
                     return <ButtonElement key={idx} item={item} showNote={showNote} />;
+                  case 'panel':
+                    return <PanelElement key={idx} item={item} objectId={selectedObjectId} showNote={showNote} />;
                   default:
                     return null;
                 }

src/components/AggregationPanel/AggregationPanel.scss

@@ -76,13 +76,14 @@
     text-align: center;
     border-radius: 5px;
     font-size: 14px;
+
     &:hover,
     &:focus {
         background-color: $darkBlue;
     }
 }
 
-.loading{
+.loading {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -96,4 +97,80 @@
     top: 50%;
     left: 50%;
     @include transform(translate(-50%, -50%));
-  }
+}
+
+.panelElement {
+
+    margin: 8px 0;
+    transition: all 0.3s ease;
+}
+
+.panelHeader {
+    display: flex;
+    border-left: 1px solid #e3e3ea;
+    align-items: center;
+    gap: 8px;
+}
+
+.expandButton {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    font-weight: 500;
+    color: #333;
+
+    &:hover {
+        background-color: #f5f5f5;
+    }
+
+    &.expanded {
+        font-weight: 600;
+    }
+}
+
+.refreshButton {
+    background: none;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    color: #666;
+    font-size: 16px;
+
+    &:hover {
+        color: #333;
+    }
+
+    &:disabled {
+        color: #ccc;
+        cursor: not-allowed;
+    }
+}
+
+.panelContent {
+    padding: 8px 0;
+}
+
+.error {
+    color: #d32f2f;
+    padding: 8px;
+    margin: 8px 0;
+    background-color: #ffebee;
+    border-radius: 4px;
+}
+
+.subheading {
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    margin: 16px 0 8px;
+}
+
+.loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/components/AggregationPanel/AggregationPanelComponents.js

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
+import LoaderDots from 'components/LoaderDots/LoaderDots.react';
 import styles from './AggregationPanel.scss';
+import Parse from 'parse';
 
 // Text Element Component
 export const TextElement = ({ text }) => (
@@ -95,3 +97,116 @@ export const ButtonElement = ({ item, showNote }) => {
     </div>
   );
 };
+
+export const PanelElement = ({ item, showNote, objectId, depth = 0 }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [panelData, setPanelData] = useState(null);
+
+  const fetchPanelData = async () => {
+    setIsLoading(true);
+    try {
+      const params = { objectId };
+      const result = await Parse.Cloud.run(item.cloudCodeFunction, params);
+      if (result?.panel?.segments) {
+        setPanelData(result);
+      } else {
+        const errorMsg = 'Improper JSON format';
+        showNote(errorMsg, true);
+      }
+    } catch (error) {
+      const errorMsg = error.message;
+      showNote(errorMsg, true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleToggle = async () => {
+    if ((!isExpanded && !panelData)) {
+      fetchPanelData();
+    }
+    setIsExpanded(prev => !prev);
+  };
+
+  const handleRefresh = () => {
+    setPanelData(null);
+    fetchPanelData();
+  };
+
+  const indentStyle = {
+    marginLeft: `${depth * 20}px`
+  };
+
+  return (
+    <div className={styles.panelElement} style={indentStyle}>
+      <div className={styles.panelHeader}>
+        <button
+          onClick={handleToggle}
+          className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}
+        >
+          {isExpanded ? '▼' : '▶'}
+          {item.title}
+        </button>
+        {isExpanded && (
+          <button
+            onClick={handleRefresh}
+            className={styles.refreshButton}
+            disabled={isLoading}
+          >
+            ↻
+          </button>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div className={styles.panelContent}>
+          {isLoading ? (
+            <div className={styles.loader}>
+              <LoaderDots />
+            </div>
+          ) : panelData && (
+            <div className={styles.nestedPanel}>
+              {panelData.panel.segments.map((segment, index) => (
+                <div key={index}>
+                  <h3 className={styles.heading}>{segment.title}</h3>
+                  <div className={styles.segmentItems}>
+                    {segment.items.map((nestedItem, idx) => {
+                      switch (nestedItem.type) {
+                        case 'panel':
+                          return (
+                            <PanelElement
+                              key={idx}
+                              item={nestedItem}
+                              showNote={showNote}
+                              depth={depth + 1}
+                            />
+                          );
+                        case 'text':
+                          return <TextElement key={idx} text={nestedItem.text} />;
+                        case 'keyValue':
+                          return <KeyValueElement key={idx} item={nestedItem} />;
+                        case 'table':
+                          return <TableElement key={idx} columns={nestedItem.columns} rows={nestedItem.rows} />;
+                        case 'image':
+                          return <ImageElement key={idx} url={nestedItem.url} />;
+                        case 'video':
+                          return <VideoElement key={idx} url={nestedItem.url} />;
+                        case 'audio':
+                          return <AudioElement key={idx} url={nestedItem.url} />;
+                        case 'button':
+                          return <ButtonElement key={idx} item={nestedItem} showNote={showNote} />;
+                        default:
+                          return null;
+                      }
+                    })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -45,7 +45,7 @@ export default class DataBrowser extends React.Component {
       firstSelectedCell: null,
       selectedData: [],
       prevClassName: props.className,
-      panelWidth: 300,
+      panelWidth: 400,
       isResizing: false,
       maxWidth: window.innerWidth - 300,
       showAggregatedData: true,
@@ -591,7 +591,7 @@ export default class DataBrowser extends React.Component {
             <ResizableBox
               width={this.state.panelWidth}
               height={Infinity}
-              minConstraints={[100, Infinity]}
+              minConstraints={[400, Infinity]}
               maxConstraints={[this.state.maxWidth, Infinity]}
               onResizeStart={this.handleResizeStart} // Handle start of resizing
               onResizeStop={this.handleResizeStop} // Handle end of resizing