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

src/components/AggregationPanel/AggregationPanel.js

@@ -1,6 +1,7 @@
 import LoaderDots from 'components/LoaderDots/LoaderDots.react';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styles from './AggregationPanel.scss';
+import Parse from 'parse';
 import {
   AudioElement,
   ButtonElement,
@@ -19,8 +20,14 @@ const AggregationPanel = ({
   errorAggregatedData,
   showNote,
   setSelectedObjectId,
-  selectedObjectId
+  selectedObjectId,
+  depth = 0,
+  cloudCodeFunction = null,
+  panelTitle = null,
 }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [nestedData, setNestedData] = useState(null);
+  const [isLoadingNested, setIsLoadingNested] = useState(false);
 
   useEffect(() => {
     if (Object.keys(errorAggregatedData).length !== 0) {
@@ -30,54 +37,149 @@ const AggregationPanel = ({
   }, [errorAggregatedData, setSelectedObjectId, setErrorAggregatedData]);
 
   const isLoading = useMemo(() =>
-    selectedObjectId && isLoadingCloudFunction && showAggregatedData,
-  [selectedObjectId, isLoadingCloudFunction, showAggregatedData]
+    depth === 0 && selectedObjectId && isLoadingCloudFunction && showAggregatedData,
+  [depth, selectedObjectId, isLoadingCloudFunction, showAggregatedData]
   );
 
   const shouldShowAggregatedData = useMemo(() =>
-    selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0, [selectedObjectId, showAggregatedData, data, errorAggregatedData]
+    depth === 0
+      ? (selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0)
+      : true,
+  [depth, selectedObjectId, showAggregatedData, data, errorAggregatedData]
   );
 
+  const fetchNestedData = useCallback(async () => {
+    setIsLoadingNested(true);
+    try {
+      const params = { objectId: selectedObjectId };
+      const result = await Parse.Cloud.run(cloudCodeFunction, params);
+      if (result?.panel?.segments) {
+        setNestedData(result);
+      } else {
+        const errorMsg = 'Improper JSON format';
+        showNote(errorMsg, true);
+      }
+    } catch (error) {
+      const errorMsg = error.message;
+      showNote(errorMsg, true);
+    } finally {
+      setIsLoadingNested(false);
+    }
+  }, [cloudCodeFunction, selectedObjectId, showNote]);
+
+  const handleToggle = useCallback(async () => {
+    if (!isExpanded && !nestedData && cloudCodeFunction) {
+      fetchNestedData();
+    }
+    setIsExpanded(prev => !prev);
+  }, [isExpanded, nestedData, cloudCodeFunction, fetchNestedData]);
+
+  const handleRefresh = useCallback(() => {
+    setNestedData(null);
+    setIsExpanded(false);
+    fetchNestedData();
+  }, [fetchNestedData]);
+
+  const renderSegmentContent = (segment, index) => (
+    <div key={index} className={styles.segmentContainer}>
+      <h2 className={styles.heading}>{segment.title}</h2>
+      <div className={styles.segmentItems}>
+        {segment.items.map((item, idx) => {
+          switch (item.type) {
+            case 'text':
+              return <TextElement key={idx} text={item.text} />;
+            case 'keyValue':
+              return <KeyValueElement key={idx} item={item} />;
+            case 'table':
+              return <TableElement key={idx} columns={item.columns} rows={item.rows} />;
+            case 'image':
+              return <ImageElement key={idx} url={item.url} />;
+            case 'video':
+              return <VideoElement key={idx} url={item.url} />;
+            case 'audio':
+              return <AudioElement key={idx} url={item.url} />;
+            case 'button':
+              return <ButtonElement key={idx} item={item} showNote={showNote} />;
+            case 'panel':
+              return (
+                <div key={idx} className={styles.nestedPanelContainer}>
+                  <AggregationPanel
+                    data={{}}
+                    isLoadingCloudFunction={false}
+                    showAggregatedData={true}
+                    setErrorAggregatedData={setErrorAggregatedData}
+                    errorAggregatedData={errorAggregatedData}
+                    showNote={showNote}
+                    setSelectedObjectId={setSelectedObjectId}
+                    selectedObjectId={selectedObjectId}
+                    depth={depth + 1}
+                    cloudCodeFunction={item.cloudCodeFunction}
+                    panelTitle={item.title}
+                  />
+                </div>
+              );
+            default:
+              return null;
+          }
+        })}
+      </div>
+    </div>
+  );
+
+  if (depth > 0) {
+    return (
+      <div className={styles.nestedPanel}>
+        <div className={`${styles.nestedPanelHeader} ${isExpanded ? styles.expanded : ''}`} onClick={handleToggle}>
+          <span className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}>{panelTitle}</span>
+          <div>
+            {isExpanded && (
+              <button
+                onClick={handleRefresh}
+                className={styles.refreshButton}
+                disabled={isLoadingNested}
+              >
+                <span>↻</span>
+              </button>
+
+            )}
+            <span >{isExpanded ? '▼' : '▲'}</span>
+          </div>
+        </div>
+        {isExpanded && (
+          <div className={styles.nestedPanelContent}>
+            {isLoadingNested ? (
+              <div className={styles.loader}>
+                <LoaderDots />
+              </div>
+            ) : (
+              nestedData && nestedData.panel.segments.map((segment, index) =>
+                renderSegmentContent(segment, index)
+              )
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
-    <>
+    <div className={styles.aggregationPanel}>
       {isLoading ? (
         <div className={styles.center}>
           <LoaderDots />
         </div>
       ) : shouldShowAggregatedData ? (
-        data.panel.segments.map((segment, index) => (
-          <div key={index}>
-            <h2 className={styles.heading}>{segment.title}</h2>
-            <div className={styles.segmentItems}>
-              {segment.items.map((item, idx) => {
-                switch (item.type) {
-                  case 'text':
-                    return <TextElement key={idx} text={item.text} />;
-                  case 'keyValue':
-                    return <KeyValueElement key={idx} item={item} />;
-                  case 'table':
-                    return <TableElement key={idx} columns={item.columns} rows={item.rows} />;
-                  case 'image':
-                    return <ImageElement key={idx} url={item.url} />;
-                  case 'video':
-                    return <VideoElement key={idx} url={item.url} />;
-                  case 'audio':
-                    return <AudioElement key={idx} url={item.url} />;
-                  case 'button':
-                    return <ButtonElement key={idx} item={item} showNote={showNote} />;
-                  default:
-                    return null;
-                }
-              })}
-            </div>
-          </div>
-        ))
+        <div className={styles.mainContent}>
+          {data.panel.segments.map((segment, index) =>
+            renderSegmentContent(segment, index)
+          )}
+        </div>
       ) : (
-        <div className={styles.loading}>
-            No object selected.
+        <div className={styles.center}>
+          No object selected.
         </div>
       )}
-    </>
+    </div>
   );
 };
 

src/components/AggregationPanel/AggregationPanel.scss

@@ -11,14 +11,11 @@
 
 .segmentItems {
     font-size: 14px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 6px;
+    padding: 10px;
     display: flex;
     flex-direction: column;
-    border-left: 1px solid #e3e3ea;
     gap: 10px;
-}
+  }
 
 .keyValue {
     font-size: 14px;
@@ -76,13 +73,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 +94,69 @@
     top: 50%;
     left: 50%;
     @include transform(translate(-50%, -50%));
+}
+
+.nestedPanel {
+    margin-right: -10px;
+    transition: all 0.3s ease;
+}
+
+.nestedPanelHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    border-left: 1px solid transparent; 
+    background-color: $blue;
+    color: $white;
+    cursor: pointer;
+    padding-right: 4px;
+
+    &.expanded {                         
+      border-left-color: #e3e3ea;
+    }
+  }
+
+.expandButton {
+    display: inline;
+    padding: 8px;
+    font-weight: 500;
+
+    &.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;
+    }
+}
+
+.nestedPanelContent {
+    padding: 0  0 8px 0;
+}
+
+.loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.segmentContainer {
+    border-left: 1px solid #e3e3ea;    
+    border-bottom: 1px solid #e3e3ea;
+    margin-bottom: 16px;
   }