Spatial Objects Dashboard Requirements (Updated)

Purpose: Design rules for the card-grid UI that visualises spatial relationships in the Plings dashboard.

Card Size and Appearance

  • All object cards must have the same width and height, regardless of their grouping or position.
  • Cards should be visually appealing and mobile-friendly.

Grouping and Layout

  • Any set of objects with spatial relationships (e.g., left_of, right_of, on_top_of, below, etc.) must be grouped together and rendered as a visually distinct block (e.g., with a border or background).
  • Within each group, objects are arranged in a 2D CSS grid:
    • left_of/right_of relations determine columns (horizontal position).
    • on_top_of/below/above/under relations determine rows (vertical position).
  • Empty cells in the grid are allowed if the spatial relations do not form a perfect rectangle.
  • Unrelated objects (not part of any spatial group) are displayed as single cards, not in a group.
  • The visual grouping must make it clear which objects are related.

Layout Logic

  • For each group of related objects:
    • Build a directed graph from all left/right and above/below relations.
    • Use topological sorting to determine the order for both axes.
    • Place objects in a 2D array (grid) according to their relations.
    • Render the group as a CSS grid, with each object in its cell.
  • For unrelated objects:
    • Render as single cards.

Responsiveness

  • The UI must remain mobile-friendly and responsive.
  • Grouped grids and single cards should adapt to different screen sizes.

Visual Grouping

  • Each group of related objects must be visually distinct (e.g., border, background, or shadow).
  • All cards, whether in a group or not, must have the same size.