Skip to main content
Every feature described on this page is available out of the box — no extra code, configuration, or schema changes required. The VeloIQ frontend reads the generated TypeScript schemas and activates the appropriate UI behaviour automatically.

​
Side panels

Click any row in a list view to open a detail panel on the right side of the screen. The panel shows the same information as the full Show page without navigating away. Drag the vertical divider between the list and the panel to resize both sides. Use the panel toolbar to minimize it back to a sliver, maximize it to full width, or pop it out into a separate browser tab.

​
Miller columns tree view

When a model has a self-referential foreign key (for example, parent_task_id on a Task that points back to task.id), the code generator automatically sets showViewType: "tree-details" in the TypeScript schema. The subtasks relation then renders as an interactive Miller columns browser instead of a flat table. To navigate the tree:
  • Click any row in a column to load its children in the next column to the right.
  • Follow the breadcrumb trail at the top of each column to navigate back up the hierarchy.
  • Drag the handle between two columns to resize them independently.
  • Click the ↗ button on any row to open that record’s Show page in a new browser tab.

​
Relations explorer

On any Show page, click the ⬡ (explore) button in the page toolbar to open the relations explorer. The explorer renders an interactive graph with the current record at the centre and its related records as nodes around it. Click any node to navigate directly to that record’s Show page.

​
Analysis charts

In the toolbar of any relation table (the tables that appear in the lower section of a Show page), click the 📊 bar-chart icon to toggle the analysis panel. The panel renders distribution charts for numeric fields (histograms) and categorical fields (bar charts of value counts). Your toggle preference is saved per user and per view, so the panel opens in the same state the next time you visit.

​
Column configuration

Click the ⚙ settings icon in any list or relation table toolbar to open the column configuration panel. Tick or untick columns to show or hide them. Drag rows in the panel to reorder the columns in the table. Preferences are saved per user and per view.

​
Sorting

Click any column header to sort the table ascending by that column. Click again to sort descending. Click a third time to clear the sort and return to the default order.

​
Filtering

Hover over a column header to reveal the filter icon (▼). Click it to open a filter input for that column:
  • String columns — supports contains and starts with operators.
  • Number and date columns — supports range operators (greater than, less than, between).
You can stack multiple filters across different columns. All active filters are shown together and can be removed individually.

​
Bulk actions

Tick the checkbox on one or more rows in any list view. A bulk-action toolbar appears at the bottom of the screen with three options:
  • Bulk edit — apply a field value change to all selected records at once.
  • Bulk delete — delete all selected records in a single operation.
  • CSV export — download the selected records as a CSV file.
Bulk delete is irreversible. Confirm your selection before proceeding.

​
Dark mode

Click the dark mode toggle in the top-right corner of the header to switch between light and dark themes. The preference is stored in the browser and persists across sessions.

​
Metadata panel

Click the ℹ button in any list toolbar to open the metadata panel. The panel shows the technical details for that resource: field names, field types, relation targets, and the API path the frontend queries. To wire up the header search bar to query your model data, see Configure Global Search.