feat: Add displaying multiple info panels and batch navigation

README.md

@@ -1378,7 +1378,7 @@ To reduce the time for info panel data to appear, data can be prefetched.
 
 | Parameter                      | Type    | Optional | Default | Example | Description                                                                                                                       |
 |--------------------------------|---------|----------|---------|---------|-----------------------------------------------------------------------------------------------------------------------------------|
-| `infoPanel[*].prefetchObjects` | Number  | yes      | `0`     | `2`     | Number of next rows to prefetch when browsing sequential rows. For example, `2` means the next 2 rows will be fetched in advance. |
+| `infoPanel[*].prefetchObjects` | Number  | yes      | `0`     | `2`     | Number of navigation steps to prefetch ahead when browsing sequential rows. For example, `2` means data for the next 2 navigation steps will be fetched in advance. When using multi-panel mode with batch navigation enabled, each navigation step corresponds to a full batch of panels, so the total number of prefetched objects will be `prefetchObjects × panelCount`. |
 | `infoPanel[*].prefetchStale`   | Number  | yes      | `0`     | `10`    | Duration in seconds after which prefetched data is discarded as stale.                                                            |
 | `infoPanel[*].prefetchImage`   | Boolean | yes      | `true`  | `false` | Whether to prefetch image content when prefetching objects. Only applies when `prefetchObjects` is enabled.                       |
 | `infoPanel[*].prefetchVideo`   | Boolean | yes      | `true`  | `false` | Whether to prefetch video content when prefetching objects. Only applies when `prefetchObjects` is enabled.                       |

src/components/Toolbar/Toolbar.react.js

@@ -158,19 +158,35 @@ const Toolbar = props => {
       {props.classwiseCloudFunctions &&
         props.classwiseCloudFunctions[`${props.appId}${props.appName}`] &&
         props.classwiseCloudFunctions[`${props.appId}${props.appName}`][props.className] && (
-        <button onClick={props.togglePanel} className={styles.btn}>
-          {props.isPanelVisible ? (
+        <div className={styles.panelButtons}>
+          {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
+              {props.panelCount > 1 && (
+                <button onClick={props.removePanel} className={styles.btn}>
+                  <Icon width={18} height={18} fill="#797592" name="minus-outline" />
+                    Remove Panel
+                </button>
+              )}
+              <button onClick={props.addPanel} className={styles.btn}>
+                <Icon width={18} height={18} fill="#797592" name="plus-outline" />
+                  Add Panel
+              </button>
             </>
           )}
-        </button>
+          <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>
       )}
     </div>
   );

src/components/Toolbar/Toolbar.scss

@@ -126,19 +126,25 @@ body:global(.expanded) {
   background-color: white;
 }
 
-.btn {
+.panelButtons {
   position: absolute;
   right: 5px;
   bottom: 5px;
+  display: flex;
+  gap: 5px;
+}
+
+.btn {
+  position: relative;
   border: none;
-  padding: 6px 3px;
-  width: 110px;
+  padding: 6px 8px;
   background: none;
   color: white;
   display: flex;
   align-items: center;
   gap: 5px;
   cursor: pointer;
+  white-space: nowrap;
 
   svg {
 
@@ -152,4 +158,15 @@ body:global(.expanded) {
       fill: #ffffff;
     }
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &:hover {
+      svg {
+        fill: #797592;
+      }
+    }
+  }
 }

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

@@ -80,13 +80,22 @@ const BrowserToolbar = ({
 
   togglePanel,
   isPanelVisible,
+  addPanel,
+  removePanel,
+  panelCount,
   classwiseCloudFunctions,
   appId,
   appName,
   scrollToTop,
   toggleScrollToTop,
   autoLoadFirstRow,
   toggleAutoLoadFirstRow,
+  syncPanelScroll,
+  toggleSyncPanelScroll,
+  batchNavigate,
+  toggleBatchNavigate,
+  showPanelCheckbox,
+  toggleShowPanelCheckbox,
 }) => {
   const selectionLength = Object.keys(selection).length;
   const isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
@@ -282,6 +291,9 @@ const BrowserToolbar = ({
       selectedData={selectedData}
       togglePanel={togglePanel}
       isPanelVisible={isPanelVisible}
+      addPanel={addPanel}
+      removePanel={removePanel}
+      panelCount={panelCount}
       classwiseCloudFunctions={classwiseCloudFunctions}
       appId={appId}
       appName={appName}
@@ -409,6 +421,63 @@ const BrowserToolbar = ({
               toggleAutoLoadFirstRow();
             }}
           />
+          <MenuItem
+            text={
+              <span>
+                {syncPanelScroll && (
+                  <Icon
+                    name="check"
+                    width={12}
+                    height={12}
+                    fill="#ffffffff"
+                    className="menuCheck"
+                  />
+                )}
+                Sync panel scrolling
+              </span>
+            }
+            onClick={() => {
+              toggleSyncPanelScroll();
+            }}
+          />
+          <MenuItem
+            text={
+              <span>
+                {batchNavigate && (
+                  <Icon
+                    name="check"
+                    width={12}
+                    height={12}
+                    fill="#ffffffff"
+                    className="menuCheck"
+                  />
+                )}
+                Batch-navigate panels
+              </span>
+            }
+            onClick={() => {
+              toggleBatchNavigate();
+            }}
+          />
+          <MenuItem
+            text={
+              <span>
+                {showPanelCheckbox && (
+                  <Icon
+                    name="check"
+                    width={12}
+                    height={12}
+                    fill="#ffffffff"
+                    className="menuCheck"
+                  />
+                )}
+                Show panel selection
+              </span>
+            }
+            onClick={() => {
+              toggleShowPanelCheckbox();
+            }}
+          />
         </BrowserMenu>
       </BrowserMenu>
       <div className={styles.toolbarSeparator} />