Building a Powerful Tile Layout System with React‑Grid‑Layout and Low‑Code Engine

Background

In the original Yida report, creating a compact, orderly chart layout required wrapping chart components with column and container components on top of a fluid layout, which incurred high cost.

Most BI products (QuickBI, BDP) and low‑code tools (JianDaoYun, ChuanYun) use tile layouts for dashboards, confirming their suitability.

Layout Effect

The upgraded tile layout delivers a more compact arrangement, as shown in the demo GIF.

Tile Layout Introduction

The basic capabilities of tile layout include vertical squeeze, horizontal squeeze, nesting, and height‑auto adaptation.

Vertical squeeze arranges elements tightly along the Y‑axis. Advantages: intuitive top‑to‑bottom flow. Disadvantages: horizontal neighbors cannot be easily swapped.

Horizontal squeeze arranges elements tightly along the X‑axis. Advantages: enables horizontal element swapping. Disadvantages: adjusting the height of a tile does not automatically shift elements below.

Because pages are rendered top‑to‑bottom, vertical squeeze feels more natural, which is why most products adopt it.

Tile Nesting

Tabs can act as tile containers, allowing charts to be dragged inside as nested tiles.

Height‑Auto Adaptation

When a component’s height changes (e.g., a table whose row count varies), fixed‑height tiles leave blank space. Height‑auto makes the tile’s height recalculate on each render, keeping the page tidy.

Implementation in Yida Report

We leveraged the open‑source React‑grid‑layout library for basic tile features (size/position adjustment, auto‑squeeze, mis‑row rendering) and adapted the low‑code engine for drag‑and‑drop, scroll‑drag, and placeholder insertion.

Beyond the basics, we added:

Mixed tile & fluid layout

Simultaneous vertical and horizontal compact layout

React‑grid‑layout Integration

React‑grid‑layout requires row/column counts and layout data; it automatically wraps children into grid items. By adding a layout prop to container components and wrapping them with GridLayout, we connected the layout to the low‑code engine.

The engine updates the schema via setPropValue whenever the layout changes.

Height‑Auto Implementation

We introduced an rglConfig prop with default width (w), height (h), and isHeightAuto. When enabled, a ResizeObserver watches the component, recalculates its size on change, and triggers a layout update.

Mixed Tile & Fluid Layout

The page remains a tile layout, but container and column components preserve the original fluid layout capabilities, allowing custom styling when needed.

Compact Layout Algorithm Optimization

We refined the original vertical‑only squeeze algorithm to a dual‑axis compact layout:

Elements are sorted by Y coordinate (then X) for priority.

Initial position is the last placed element’s coordinate or (0,0).

We reuse the horizontal‑first squeeze logic to compute positions, achieving tight packing in both axes.

This enables horizontal swapping while keeping vertical elements aligned.

Drag‑Jitter Optimization

To prevent jitter during drag, we changed collision detection to consider only the first colliding element in the drag direction and trigger a swap when the drag distance exceeds half the element’s width/height.

The result is a smooth drag‑and‑drop experience where same‑size charts can swap horizontally, vertically, or diagonally.