Property layer visualization doesn't work properly on rectangular grids.

[Sahil-Chhoker]

Describe the bug
Property layer visualization only works on square grids.

Expected behavior
Visualization of property layer should work for entire grid.

Minimal Example

from mesa.experimental.cell_space.grid import OrthogonalMooreGrid
from mesa.experimental.cell_space.grid import HexGrid
from mesa import Model
import math
from mesa.experimental.cell_space import CellAgent
from mesa.visualization import SolaraViz, make_space_component, make_plot_component
from mesa.datacollection import DataCollector
from mesa.experimental.cell_space.property_layer import PropertyLayer
import numpy as np

class myAgent(CellAgent):
    def __init__(self, model, cell=None):
        super().__init__(model) 
        self.number = 0 
        self.cell = cell

    def step(self):
        self.number = self.random.randint(1, 5)
    
 
class myModel(Model): 
    def __init__(self, seed=None, width=6,  height=4, n_agents=4):
        super().__init__(seed=seed) 
        self.width = width
        self.height = height
        self.num_agents = n_agents 
        self.grid = OrthogonalMooreGrid(
            (self.width, self.height), capacity=math.inf, torus=False, random=self.random
        )

        self.test_layer = PropertyLayer("test", (self.grid.width, self.grid.height), default_value=1, dtype=int)
        self.test_layer.data = np.random.randint(2, 10, (self.width, self.height))
        self.grid.add_property_layer(self.test_layer)

        myAgent(self, self.grid.all_cells.cells[14])
        
        self.datacollector = DataCollector(
            model_reporters={
                "number": lambda m: sum(agent.number for agent in m.agents)
            },
            agent_reporters={"number": "number"},
        )

        self.running = True
        self.datacollector.collect(self)

    def step(self):
        self.agents.shuffle_do("step")
        self.datacollector.collect(self)


def portrayal(agent):
    if agent is None:
        return None
    
    if agent.unique_id == 1:
        return {
            "color": "tab:green", 
            "size": 100,
        }

    return {
        "color": "tab:orange",
        "size": 70,
    }


def post_process(ax):
    ax.set_aspect("equal")
    ax.set_xticks([])
    ax.set_yticks([])
    ax.get_figure().set_size_inches(8, 8)

property_layer_portrayal = {
        "test": {
            "color": "orange",
            "alpha": 0.7,
        }
    }

model_params = {
    "seed": {
        "type": "InputText",
        "value": 42,
        "label": "Random Seed",
    },
    "n_agents": {
        "type": "SliderInt",
        "value": 4,
        "min": 1,
        "max": 10,
        "step": 1,
        "label": "Number of Agents",
    },
    "width": 6,
    "height": 5,
}

model = myModel()

space_component = make_space_component(
    agent_portrayal=portrayal, draw_grid=True, post_process=post_process, propertylayer_portrayal=property_layer_portrayal
)

plot_component = make_plot_component(
    {"number": "tab:blue"},
)

page = SolaraViz(
    model,
    components=[space_component, plot_component],
    model_params=model_params,
    name="Test Model",
)
page

Visualization for the above example

Versions I am running this example on:

Solara: 1.43.0
mesa: 3.1.3
matplotlib: 3.10.0
python: 3.13.1

[Sahil-Chhoker]

I looked into this issue, the problem seems to be how height and width are determined. Since data is passed as let's say:
data = [[10,2,6],[10,2,6]]
[10, 2, 6] → Row 1
[10, 2, 6] → Row 2
and height and width are determined as:
height, width = data.shape
This gives height=2 (number of rows) and width=3 (numbers per row), but when plotting with imshow(), we need to transpose the data because imshow() expects the first dimension to be the y-axis (going up) and the second dimension to be the x-axis (going across). Without transposing, imshow() incorrectly interprets the dimensions, resulting in only the smaller dimension being fully displayed (creating a square plot when we want a rectangle).

In conclusion, a simple fix would be:

data = data.T
width = data.shape[1]  # number of columns after transpose
height = data.shape[0]  # number of rows after transpose

In my opinion this seems to be the correct answer, but I would love to hear someone else's opinion on this as well. I will make a PR once #2609 is merged.
CC @EwoutH, @quaquel

[EwoutH]

@quaquel you have a strong opinion (I believe) about how dimensions should be stored and passed, so I will leave this one for you.

@Sahil-Chhoker Thanks for reporting and investigating! I know @quaquel is quite busy preparing an exam, so please cut him some slack if his responses are a bit delayed.

[quaquel]

This sounds fairly similar to #2631 width a mixup of x,y and row, col indexing. So simpler would be to do width, height = data.shape. I'll try to take a closer look over the weekend.

[Sahil-Chhoker]

I implemented the transpose solution, and it works as expected. I also tried using width, height = data.shape, but it resulted in the same buggy behavior as before. There might still be unknown bugs, so I’ll wait for your input before proceeding.

[quaquel]

Ok, looked at this a bit more closely. The issue is with axes.imshow. As stated in the docs for it, data is treated as The first two dimensions (M, N) define the rows and columns of the image. In contrast, we use x,y notation. So indeed, a transpose is the obvious solution. I'll put in a PR right away.