Skip to content

feat: Prefetch info panel data with config options prefetchObjects and prefetchStale #2915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jul 17, 2025
Merged

feat: Prefetch info panel data with config options prefetchObjects and prefetchStale #2915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ecdf280
feat: prefetch info panel data
mtrezza Jul 17, 2025
8c1c12b
fix: enable prefetching when navigating with arrow keys
mtrezza Jul 17, 2025
13ab40d
fix key case scopes
mtrezza Jul 17, 2025
d9adee5
fix: Prefetch cache grows indefinitely (#2916)
mtrezza Jul 17, 2025
4067c5b
Update README.md
mtrezza Jul 17, 2025
0ebd007
add prefetch error handling
mtrezza Jul 17, 2025
4c382b3
fix: Info panel reloads despite prefetched data on cell click (#2918)
mtrezza Jul 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 38 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,17 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
- [Data Browser](#data-browser)
- [Filters](#filters)
- [Info Panel](#info-panel)
- [Segments](#segments)
- [Text Item](#text-item)
- [Key-Value Item](#key-value-item)
- [Table Item](#table-item)
- [Image Item](#image-item)
- [Video Item](#video-item)
- [Audio Item](#audio-item)
- [Button Item](#button-item)
- [Panel Item](#panel-item)
- [Response](#response)
- [Segments](#segments)
- [Text Item](#text-item)
- [Key-Value Item](#key-value-item)
- [Table Item](#table-item)
- [Image Item](#image-item)
- [Video Item](#video-item)
- [Audio Item](#audio-item)
- [Button Item](#button-item)
- [Panel Item](#panel-item)
- [Prefetching](#prefetching)
- [Freeze Columns](#freeze-columns)
- [Browse as User](#browse-as-user)
- [Change Pointer Key](#change-pointer-key)
Expand Down Expand Up @@ -140,6 +142,8 @@ Parse Dashboard is continuously tested with the most recent releases of Node.js
| `infoPanel[*].title` | String | no | - | `User Details` | The panel title. |
| `infoPanel[*].classes` | Array<String> | no | - | `["_User"]` | The classes for which the info panel should be displayed. |
| `infoPanel[*].cloudCodeFunction` | String | no | - | `getUserDetails` | The Cloud Code Function which received the selected object in the data browser and returns the response to be displayed in the info panel. |
| `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[*].prefetchStale` | Number | yes | `0` | `10` | Duration in seconds after which prefetched data is discarded as stale. |
| `apps.scripts` | Array<Object> | yes | `[]` | `[{ ... }, { ... }]` | The scripts that can be executed for that app. |
| `apps.scripts.title` | String | no | - | `'Delete User'` | The title that will be displayed in the data browser context menu and the script run confirmation dialog. |
| `apps.scripts.classes` | Array<String> | no | - | `['_User']` | The classes of Parse Objects for which the scripts can be executed. |
Expand Down Expand Up @@ -873,7 +877,9 @@ The following example dashboard configuration shows an info panel for the `_User
{
"title": "User Details",
"classes": ["_User"],
"cloudCodeFunction": "getUserDetails"
"cloudCodeFunction": "getUserDetails",
"prefetchObjects": 2,
"prefetchStale": 10
}
]
}
Expand All @@ -882,7 +888,9 @@ The following example dashboard configuration shows an info panel for the `_User

The Cloud Code Function receives the selected object in the payload and returns a response that can include various items.

#### Segments
#### Response

##### Segments

The info panel can contain multiple segments to display different groups of information.

Expand Down Expand Up @@ -918,7 +926,7 @@ Example:

The items array can include various types of content such as text, key-value pairs, tables, images, videos, audios, and buttons. Each type offers a different way to display information within the info panel, allowing for a customizable and rich user experience. Below is a detailed explanation of each type.

#### Text Item
##### Text Item

A simple text field.

Expand All @@ -938,7 +946,7 @@ Example:
}
```

#### Key-Value Item
##### Key-Value Item

A text item that consists of a key and a value. The value can optionally be linked to a URL.

Expand Down Expand Up @@ -1009,7 +1017,7 @@ const item = {
}
```

#### Table Item
##### Table Item

A table with columns and rows to display data in a structured format.

Expand Down Expand Up @@ -1051,7 +1059,7 @@ Example:
}
```

#### Image Item
##### Image Item

An image to be displayed in the panel.

Expand All @@ -1071,7 +1079,7 @@ Example:
}
```

#### Video Item
##### Video Item

A video to be displayed in the panel.

Expand All @@ -1091,7 +1099,7 @@ Example:
}
```

#### Audio Item
##### Audio Item

An audio file to be played in the panel.

Expand All @@ -1111,7 +1119,7 @@ Example:
}
```

#### Button Item
##### Button Item

A button that triggers an action when clicked.

Expand Down Expand Up @@ -1146,7 +1154,7 @@ Example:
}
```

#### Panel Item
##### Panel Item

A sub-panel whose data is loaded on-demand by expanding the item.

Expand All @@ -1168,6 +1176,17 @@ Example:
}
```

#### Prefetching

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[*].prefetchStale` | Number | yes | `0` | `10` | Duration in seconds after which prefetched data is discarded as stale. |

Prefetching is particularly useful when navigating through lists of objects. To optimize performance and avoid unnecessary data loading, prefetching is triggered only after the user has moved through 3 consecutive rows using the keyboard down-arrow key or by mouse click.

### Freeze Columns

▶️ *Core > Browser > Freeze column*
Expand Down
18 changes: 1 addition & 17 deletions src/components/BrowserCell/BrowserCell.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,10 +567,6 @@ export default class BrowserCell extends Component {
current,
onEditChange,
setCopyableValue,
selectedObjectId,
setSelectedObjectId,
callCloudFunction,
isPanelVisible,
onPointerCmdClick,
row,
col,
Expand All @@ -580,7 +576,6 @@ export default class BrowserCell extends Component {
markRequiredFieldRow,
handleCellClick,
selectedCells,
setShowAggregatedData,
} = this.props;

const classes = [...this.state.classes];
Expand Down Expand Up @@ -653,18 +648,7 @@ export default class BrowserCell extends Component {
onPointerCmdClick(value);
} else {
setCopyableValue(hidden ? undefined : this.copyableValue);
if (selectedObjectId !== this.props.objectId) {
setShowAggregatedData(true);
setSelectedObjectId(this.props.objectId);
if (
this.props.objectId &&
isPanelVisible &&
((e.shiftKey && !this.props.firstSelectedCell) || !e.shiftKey)
) {
callCloudFunction(this.props.objectId, this.props.className, this.props.appId);
}
}
handleCellClick(e, row, col);
handleCellClick(e, row, col, this.props.objectId);
}
}}
onDoubleClick={() => {
Expand Down
2 changes: 2 additions & 0 deletions src/dashboard/Data/Browser/Browser.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,8 @@ class Browser extends DashboardView {
title: panel.title,
cloudCodeFunction: panel.cloudCodeFunction,
classes: panel.classes,
prefetchObjects: panel.prefetchObjects || 0,
prefetchStale: panel.prefetchStale || 0,
});
});
});
Expand Down
Loading
Loading