We are currently solving the following issue within our repository. Here is the issue text:
--- BEGIN ISSUE ---
[Feature Request]: Agent data on mouse over visualization
Is it possible to bundle agent data into the web browser side json so that when I mouse over an agent I can view that agent's data? Seems like it would mean adding some more fields to the portrayal method to include data that would only available on a mouse over. And of course javascript code to display that data on a mouse over. I don't know if the performance penalty would be too great? This would be particularly useful in early stages of model debugging and perhaps even later. If performance is an issue, it could be feature invoked only if needed.
Thanks

--- END ISSUE ---

Below are some code segments, each from a relevant file. One or more of these files may contain bugs.
--- BEGIN FILES ---
Path: `mesa/visualization/modules/CanvasGridVisualization.py`
Content:
```
1 # -*- coding: utf-8 -*-
2 """
3 Modular Canvas Rendering
4 ========================
5 
6 Module for visualizing model objects in grid cells.
7 
8 """
9 from collections import defaultdict
10 from mesa.visualization.ModularVisualization import VisualizationElement
11 
12 
13 class CanvasGrid(VisualizationElement):
14     """ A CanvasGrid object uses a user-provided portrayal method to generate a
15     portrayal for each object. A portrayal is a JSON-ready dictionary which
16     tells the relevant JavaScript code (GridDraw.js) where to draw what shape.
17 
18     The render method returns a dictionary, keyed on layers, with values as
19     lists of portrayals to draw. Portrayals themselves are generated by the
20     user-provided portrayal_method, which accepts an object as an input and
21     produces a portrayal of it.
22 
23     A portrayal as a dictionary with the following structure:
24         "x", "y": Coordinates for the cell in which the object is placed.
25         "Shape": Can be either "circle", "rect" or "arrowHead"
26             For Circles:
27                 "r": The radius, defined as a fraction of cell size. r=1 will
28                      fill the entire cell.
29             For Rectangles:
30                 "w", "h": The width and height of the rectangle, which are in
31                           fractions of cell width and height.
32             For arrowHead:
33             "scale": Proportion scaling as a fraction of cell size.
34             "heading_x": represents x direction unit vector.
35             "heading_y": represents y direction unit vector.
36         "Color": The color to draw the shape in; needs to be a valid HTML
37                  color, e.g."Red" or "#AA08F8"
38         "Filled": either "true" or "false", and determines whether the shape is
39                   filled or not.
40         "Layer": Layer number of 0 or above; higher-numbered layers are drawn
41                  above lower-numbered layers.
42         "text": The text to be inscribed inside the Shape. Normally useful for
43                 showing the unique_id of the agent.
44         "text_color": The color to draw the inscribed text. Should be given in
45                       conjunction of "text" property.
46 
47 
48     Attributes:
49         portrayal_method: Function which generates portrayals from objects, as
50                           described above.
51         grid_height, grid_width: Size of the grid to visualize, in cells.
52         canvas_height, canvas_width: Size, in pixels, of the grid visualization
53                                      to draw on the client.
54         template: "canvas_module.html" stores the module's HTML template.
55 
56     """
57     package_includes = ["GridDraw.js", "CanvasModule.js"]
58 
59     def __init__(self, portrayal_method, grid_width, grid_height,
60                  canvas_width=500, canvas_height=500):
61         """ Instantiate a new CanvasGrid.
62 
63         Args:
64             portrayal_method: function to convert each object on the grid to
65                               a portrayal, as described above.
66             grid_width, grid_height: Size of the grid, in cells.
67             canvas_height, canvas_width: Size of the canvas to draw in the
68                                          client, in pixels. (default: 500x500)
69 
70         """
71         self.portrayal_method = portrayal_method
72         self.grid_width = grid_width
73         self.grid_height = grid_height
74         self.canvas_width = canvas_width
75         self.canvas_height = canvas_height
76 
77         new_element = ("new CanvasModule({}, {}, {}, {})"
78             .format(self.canvas_width, self.canvas_height,
79                 self.grid_width, self.grid_height))
80 
81         self.js_code = "elements.push(" + new_element + ");"
82 
83     def render(self, model):
84         grid_state = defaultdict(list)
85         for x in range(model.grid.width):
86             for y in range(model.grid.height):
87                 cell_objects = model.grid.get_cell_list_contents([(x, y)])
88                 for obj in cell_objects:
89                     portrayal = self.portrayal_method(obj)
90                     if portrayal:
91                         portrayal["x"] = x
92                         portrayal["y"] = y
93                         grid_state[portrayal["Layer"]].append(portrayal)
94 
95         return grid_state
96
```

Path: `mesa/visualization/modules/HexGridVisualization.py`
Content:
```
1 # -*- coding: utf-8 -*-
2 """
3 Modular Canvas Rendering
4 ========================
5 
6 Module for visualizing model objects in hexagonal grid cells.
7 
8 """
9 from collections import defaultdict
10 from mesa.visualization.ModularVisualization import VisualizationElement
11 
12 
13 class CanvasHexGrid(VisualizationElement):
14     """ A CanvasHexGrid object functions similarly to a CanvasGrid object. It takes a portrayal dictionary and talks to HexDraw.js to draw that shape.
15 
16     A portrayal as a dictionary with the following structure:
17         "x", "y": Coordinates for the cell in which the object is placed.
18         "Shape": Can be either "hex" or "circle"
19             "r": The radius, defined as a fraction of cell size. r=1 will
20                  fill the entire cell.
21         "Color": The color to draw the shape in; needs to be a valid HTML
22                  color, e.g."Red" or "#AA08F8"
23         "Filled": either "true" or "false", and determines whether the shape is
24                   filled or not.
25         "Layer": Layer number of 0 or above; higher-numbered layers are drawn
26                  above lower-numbered layers.
27         "text": The text to be inscribed inside the Shape. Normally useful for
28                 showing the unique_id of the agent.
29         "text_color": The color to draw the inscribed text. Should be given in
30                       conjunction of "text" property.
31 
32 
33     Attributes:
34         portrayal_method: Function which generates portrayals from objects, as
35                           described above.
36         grid_height, grid_width: Size of the grid to visualize, in cells.
37         canvas_height, canvas_width: Size, in pixels, of the grid visualization
38                                      to draw on the client.
39         template: "canvas_module.html" stores the module's HTML template.
40 
41     """
42     package_includes = ["HexDraw.js", "CanvasHexModule.js"]
43     portrayal_method = None  # Portrayal function
44     canvas_width = 500
45     canvas_height = 500
46 
47     def __init__(self, portrayal_method, grid_width, grid_height,
48                  canvas_width=500, canvas_height=500):
49         """ Instantiate a new CanvasGrid.
50 
51         Args:
52             portrayal_method: function to convert each object on the grid to
53                               a portrayal, as described above.
54             grid_width, grid_height: Size of the grid, in cells.
55             canvas_height, canvas_width: Size of the canvas to draw in the
56                                          client, in pixels. (default: 500x500)
57 
58         """
59         self.portrayal_method = portrayal_method
60         self.grid_width = grid_width
61         self.grid_height = grid_height
62         self.canvas_width = canvas_width
63         self.canvas_height = canvas_height
64 
65         new_element = ("new CanvasHexModule({}, {}, {}, {})"
66             .format(self.canvas_width, self.canvas_height,
67                 self.grid_width, self.grid_height))
68 
69         self.js_code = "elements.push(" + new_element + ");"
70 
71     def render(self, model):
72         grid_state = defaultdict(list)
73         for x in range(model.grid.width):
74             for y in range(model.grid.height):
75                 cell_objects = model.grid.get_cell_list_contents([(x, y)])
76                 for obj in cell_objects:
77                     portrayal = self.portrayal_method(obj)
78                     if portrayal:
79                         portrayal["x"] = x
80                         portrayal["y"] = y
81                         grid_state[portrayal["Layer"]].append(portrayal)
82 
83         return grid_state
84
```
--- END FILES ---

Please first localize the bug based on the issue statement, and then generate a patch according to the `git diff` format fenced by three backticks.

Here is an example:

```diff
diff --git a/examples/server_async.py b/examples/server_async.py
--- a/examples/server_async.py
+++ b/examples/server_async.py
@@ -313,4 +313,4 @@
 
 
 if __name__ == "__main__":
-    asyncio.run(run_async_server("."), debug=True)
+    asyncio.run(run_async_server(), debug=True)
diff --git a/examples/server_sync.py b/examples/server_sync.py
--- a/examples/server_sync.py
+++ b/examples/server_sync.py
@@ -313,5 +313,5 @@
 
 
 if __name__ == "__main__":
-    server = run_sync_server(".")
+    server = run_sync_server()
     server.shutdown()

```

diff --git a/mesa/visualization/modules/CanvasGridVisualization.py b/mesa/visualization/modules/CanvasGridVisualization.py
--- a/mesa/visualization/modules/CanvasGridVisualization.py
+++ b/mesa/visualization/modules/CanvasGridVisualization.py
@@ -54,7 +54,7 @@
         template: "canvas_module.html" stores the module's HTML template.
 
     """
-    package_includes = ["GridDraw.js", "CanvasModule.js"]
+    package_includes = ["GridDraw.js", "CanvasModule.js", "InteractionHandler.js"]
 
     def __init__(self, portrayal_method, grid_width, grid_height,
                  canvas_width=500, canvas_height=500):
diff --git a/mesa/visualization/modules/HexGridVisualization.py b/mesa/visualization/modules/HexGridVisualization.py
--- a/mesa/visualization/modules/HexGridVisualization.py
+++ b/mesa/visualization/modules/HexGridVisualization.py
@@ -39,7 +39,7 @@
         template: "canvas_module.html" stores the module's HTML template.
 
     """
-    package_includes = ["HexDraw.js", "CanvasHexModule.js"]
+    package_includes = ["HexDraw.js", "CanvasHexModule.js", "InteractionHandler.js"]
     portrayal_method = None  # Portrayal function
     canvas_width = 500
     canvas_height = 500

{"golden_diff": "diff --git a/mesa/visualization/modules/CanvasGridVisualization.py b/mesa/visualization/modules/CanvasGridVisualization.py\n--- a/mesa/visualization/modules/CanvasGridVisualization.py\n+++ b/mesa/visualization/modules/CanvasGridVisualization.py\n@@ -54,7 +54,7 @@\n         template: \"canvas_module.html\" stores the module's HTML template.\n \n     \"\"\"\n-    package_includes = [\"GridDraw.js\", \"CanvasModule.js\"]\n+    package_includes = [\"GridDraw.js\", \"CanvasModule.js\", \"InteractionHandler.js\"]\n \n     def __init__(self, portrayal_method, grid_width, grid_height,\n                  canvas_width=500, canvas_height=500):\ndiff --git a/mesa/visualization/modules/HexGridVisualization.py b/mesa/visualization/modules/HexGridVisualization.py\n--- a/mesa/visualization/modules/HexGridVisualization.py\n+++ b/mesa/visualization/modules/HexGridVisualization.py\n@@ -39,7 +39,7 @@\n         template: \"canvas_module.html\" stores the module's HTML template.\n \n     \"\"\"\n-    package_includes = [\"HexDraw.js\", \"CanvasHexModule.js\"]\n+    package_includes = [\"HexDraw.js\", \"CanvasHexModule.js\", \"InteractionHandler.js\"]\n     portrayal_method = None  # Portrayal function\n     canvas_width = 500\n     canvas_height = 500\n", "issue": "[Feature Request]: Agent data on mouse over visualization\nIs it possible to bundle agent data into the web browser side json so that when I mouse over an agent I can view that agent's data? Seems like it would mean adding some more fields to the portrayal method to include data that would only available on a mouse over. And of course javascript code to display that data on a mouse over. I don't know if the performance penalty would be too great? This would be particularly useful in early stages of model debugging and perhaps even later. If performance is an issue, it could be feature invoked only if needed.\r\nThanks\n", "before_files": [{"content": "# -*- coding: utf-8 -*-\n\"\"\"\nModular Canvas Rendering\n========================\n\nModule for visualizing model objects in grid cells.\n\n\"\"\"\nfrom collections import defaultdict\nfrom mesa.visualization.ModularVisualization import VisualizationElement\n\n\nclass CanvasGrid(VisualizationElement):\n    \"\"\" A CanvasGrid object uses a user-provided portrayal method to generate a\n    portrayal for each object. A portrayal is a JSON-ready dictionary which\n    tells the relevant JavaScript code (GridDraw.js) where to draw what shape.\n\n    The render method returns a dictionary, keyed on layers, with values as\n    lists of portrayals to draw. Portrayals themselves are generated by the\n    user-provided portrayal_method, which accepts an object as an input and\n    produces a portrayal of it.\n\n    A portrayal as a dictionary with the following structure:\n        \"x\", \"y\": Coordinates for the cell in which the object is placed.\n        \"Shape\": Can be either \"circle\", \"rect\" or \"arrowHead\"\n            For Circles:\n                \"r\": The radius, defined as a fraction of cell size. r=1 will\n                     fill the entire cell.\n            For Rectangles:\n                \"w\", \"h\": The width and height of the rectangle, which are in\n                          fractions of cell width and height.\n            For arrowHead:\n            \"scale\": Proportion scaling as a fraction of cell size.\n            \"heading_x\": represents x direction unit vector.\n            \"heading_y\": represents y direction unit vector.\n        \"Color\": The color to draw the shape in; needs to be a valid HTML\n                 color, e.g.\"Red\" or \"#AA08F8\"\n        \"Filled\": either \"true\" or \"false\", and determines whether the shape is\n                  filled or not.\n        \"Layer\": Layer number of 0 or above; higher-numbered layers are drawn\n                 above lower-numbered layers.\n        \"text\": The text to be inscribed inside the Shape. Normally useful for\n                showing the unique_id of the agent.\n        \"text_color\": The color to draw the inscribed text. Should be given in\n                      conjunction of \"text\" property.\n\n\n    Attributes:\n        portrayal_method: Function which generates portrayals from objects, as\n                          described above.\n        grid_height, grid_width: Size of the grid to visualize, in cells.\n        canvas_height, canvas_width: Size, in pixels, of the grid visualization\n                                     to draw on the client.\n        template: \"canvas_module.html\" stores the module's HTML template.\n\n    \"\"\"\n    package_includes = [\"GridDraw.js\", \"CanvasModule.js\"]\n\n    def __init__(self, portrayal_method, grid_width, grid_height,\n                 canvas_width=500, canvas_height=500):\n        \"\"\" Instantiate a new CanvasGrid.\n\n        Args:\n            portrayal_method: function to convert each object on the grid to\n                              a portrayal, as described above.\n            grid_width, grid_height: Size of the grid, in cells.\n            canvas_height, canvas_width: Size of the canvas to draw in the\n                                         client, in pixels. (default: 500x500)\n\n        \"\"\"\n        self.portrayal_method = portrayal_method\n        self.grid_width = grid_width\n        self.grid_height = grid_height\n        self.canvas_width = canvas_width\n        self.canvas_height = canvas_height\n\n        new_element = (\"new CanvasModule({}, {}, {}, {})\"\n            .format(self.canvas_width, self.canvas_height,\n                self.grid_width, self.grid_height))\n\n        self.js_code = \"elements.push(\" + new_element + \");\"\n\n    def render(self, model):\n        grid_state = defaultdict(list)\n        for x in range(model.grid.width):\n            for y in range(model.grid.height):\n                cell_objects = model.grid.get_cell_list_contents([(x, y)])\n                for obj in cell_objects:\n                    portrayal = self.portrayal_method(obj)\n                    if portrayal:\n                        portrayal[\"x\"] = x\n                        portrayal[\"y\"] = y\n                        grid_state[portrayal[\"Layer\"]].append(portrayal)\n\n        return grid_state\n", "path": "mesa/visualization/modules/CanvasGridVisualization.py"}, {"content": "# -*- coding: utf-8 -*-\n\"\"\"\nModular Canvas Rendering\n========================\n\nModule for visualizing model objects in hexagonal grid cells.\n\n\"\"\"\nfrom collections import defaultdict\nfrom mesa.visualization.ModularVisualization import VisualizationElement\n\n\nclass CanvasHexGrid(VisualizationElement):\n    \"\"\" A CanvasHexGrid object functions similarly to a CanvasGrid object. It takes a portrayal dictionary and talks to HexDraw.js to draw that shape.\n\n    A portrayal as a dictionary with the following structure:\n        \"x\", \"y\": Coordinates for the cell in which the object is placed.\n        \"Shape\": Can be either \"hex\" or \"circle\"\n            \"r\": The radius, defined as a fraction of cell size. r=1 will\n                 fill the entire cell.\n        \"Color\": The color to draw the shape in; needs to be a valid HTML\n                 color, e.g.\"Red\" or \"#AA08F8\"\n        \"Filled\": either \"true\" or \"false\", and determines whether the shape is\n                  filled or not.\n        \"Layer\": Layer number of 0 or above; higher-numbered layers are drawn\n                 above lower-numbered layers.\n        \"text\": The text to be inscribed inside the Shape. Normally useful for\n                showing the unique_id of the agent.\n        \"text_color\": The color to draw the inscribed text. Should be given in\n                      conjunction of \"text\" property.\n\n\n    Attributes:\n        portrayal_method: Function which generates portrayals from objects, as\n                          described above.\n        grid_height, grid_width: Size of the grid to visualize, in cells.\n        canvas_height, canvas_width: Size, in pixels, of the grid visualization\n                                     to draw on the client.\n        template: \"canvas_module.html\" stores the module's HTML template.\n\n    \"\"\"\n    package_includes = [\"HexDraw.js\", \"CanvasHexModule.js\"]\n    portrayal_method = None  # Portrayal function\n    canvas_width = 500\n    canvas_height = 500\n\n    def __init__(self, portrayal_method, grid_width, grid_height,\n                 canvas_width=500, canvas_height=500):\n        \"\"\" Instantiate a new CanvasGrid.\n\n        Args:\n            portrayal_method: function to convert each object on the grid to\n                              a portrayal, as described above.\n            grid_width, grid_height: Size of the grid, in cells.\n            canvas_height, canvas_width: Size of the canvas to draw in the\n                                         client, in pixels. (default: 500x500)\n\n        \"\"\"\n        self.portrayal_method = portrayal_method\n        self.grid_width = grid_width\n        self.grid_height = grid_height\n        self.canvas_width = canvas_width\n        self.canvas_height = canvas_height\n\n        new_element = (\"new CanvasHexModule({}, {}, {}, {})\"\n            .format(self.canvas_width, self.canvas_height,\n                self.grid_width, self.grid_height))\n\n        self.js_code = \"elements.push(\" + new_element + \");\"\n\n    def render(self, model):\n        grid_state = defaultdict(list)\n        for x in range(model.grid.width):\n            for y in range(model.grid.height):\n                cell_objects = model.grid.get_cell_list_contents([(x, y)])\n                for obj in cell_objects:\n                    portrayal = self.portrayal_method(obj)\n                    if portrayal:\n                        portrayal[\"x\"] = x\n                        portrayal[\"y\"] = y\n                        grid_state[portrayal[\"Layer\"]].append(portrayal)\n\n        return grid_state\n", "path": "mesa/visualization/modules/HexGridVisualization.py"}], "after_files": [{"content": "# -*- coding: utf-8 -*-\n\"\"\"\nModular Canvas Rendering\n========================\n\nModule for visualizing model objects in grid cells.\n\n\"\"\"\nfrom collections import defaultdict\nfrom mesa.visualization.ModularVisualization import VisualizationElement\n\n\nclass CanvasGrid(VisualizationElement):\n    \"\"\" A CanvasGrid object uses a user-provided portrayal method to generate a\n    portrayal for each object. A portrayal is a JSON-ready dictionary which\n    tells the relevant JavaScript code (GridDraw.js) where to draw what shape.\n\n    The render method returns a dictionary, keyed on layers, with values as\n    lists of portrayals to draw. Portrayals themselves are generated by the\n    user-provided portrayal_method, which accepts an object as an input and\n    produces a portrayal of it.\n\n    A portrayal as a dictionary with the following structure:\n        \"x\", \"y\": Coordinates for the cell in which the object is placed.\n        \"Shape\": Can be either \"circle\", \"rect\" or \"arrowHead\"\n            For Circles:\n                \"r\": The radius, defined as a fraction of cell size. r=1 will\n                     fill the entire cell.\n            For Rectangles:\n                \"w\", \"h\": The width and height of the rectangle, which are in\n                          fractions of cell width and height.\n            For arrowHead:\n            \"scale\": Proportion scaling as a fraction of cell size.\n            \"heading_x\": represents x direction unit vector.\n            \"heading_y\": represents y direction unit vector.\n        \"Color\": The color to draw the shape in; needs to be a valid HTML\n                 color, e.g.\"Red\" or \"#AA08F8\"\n        \"Filled\": either \"true\" or \"false\", and determines whether the shape is\n                  filled or not.\n        \"Layer\": Layer number of 0 or above; higher-numbered layers are drawn\n                 above lower-numbered layers.\n        \"text\": The text to be inscribed inside the Shape. Normally useful for\n                showing the unique_id of the agent.\n        \"text_color\": The color to draw the inscribed text. Should be given in\n                      conjunction of \"text\" property.\n\n\n    Attributes:\n        portrayal_method: Function which generates portrayals from objects, as\n                          described above.\n        grid_height, grid_width: Size of the grid to visualize, in cells.\n        canvas_height, canvas_width: Size, in pixels, of the grid visualization\n                                     to draw on the client.\n        template: \"canvas_module.html\" stores the module's HTML template.\n\n    \"\"\"\n    package_includes = [\"GridDraw.js\", \"CanvasModule.js\", \"InteractionHandler.js\"]\n\n    def __init__(self, portrayal_method, grid_width, grid_height,\n                 canvas_width=500, canvas_height=500):\n        \"\"\" Instantiate a new CanvasGrid.\n\n        Args:\n            portrayal_method: function to convert each object on the grid to\n                              a portrayal, as described above.\n            grid_width, grid_height: Size of the grid, in cells.\n            canvas_height, canvas_width: Size of the canvas to draw in the\n                                         client, in pixels. (default: 500x500)\n\n        \"\"\"\n        self.portrayal_method = portrayal_method\n        self.grid_width = grid_width\n        self.grid_height = grid_height\n        self.canvas_width = canvas_width\n        self.canvas_height = canvas_height\n\n        new_element = (\"new CanvasModule({}, {}, {}, {})\"\n            .format(self.canvas_width, self.canvas_height,\n                self.grid_width, self.grid_height))\n\n        self.js_code = \"elements.push(\" + new_element + \");\"\n\n    def render(self, model):\n        grid_state = defaultdict(list)\n        for x in range(model.grid.width):\n            for y in range(model.grid.height):\n                cell_objects = model.grid.get_cell_list_contents([(x, y)])\n                for obj in cell_objects:\n                    portrayal = self.portrayal_method(obj)\n                    if portrayal:\n                        portrayal[\"x\"] = x\n                        portrayal[\"y\"] = y\n                        grid_state[portrayal[\"Layer\"]].append(portrayal)\n\n        return grid_state\n", "path": "mesa/visualization/modules/CanvasGridVisualization.py"}, {"content": "# -*- coding: utf-8 -*-\n\"\"\"\nModular Canvas Rendering\n========================\n\nModule for visualizing model objects in hexagonal grid cells.\n\n\"\"\"\nfrom collections import defaultdict\nfrom mesa.visualization.ModularVisualization import VisualizationElement\n\n\nclass CanvasHexGrid(VisualizationElement):\n    \"\"\" A CanvasHexGrid object functions similarly to a CanvasGrid object. It takes a portrayal dictionary and talks to HexDraw.js to draw that shape.\n\n    A portrayal as a dictionary with the following structure:\n        \"x\", \"y\": Coordinates for the cell in which the object is placed.\n        \"Shape\": Can be either \"hex\" or \"circle\"\n            \"r\": The radius, defined as a fraction of cell size. r=1 will\n                 fill the entire cell.\n        \"Color\": The color to draw the shape in; needs to be a valid HTML\n                 color, e.g.\"Red\" or \"#AA08F8\"\n        \"Filled\": either \"true\" or \"false\", and determines whether the shape is\n                  filled or not.\n        \"Layer\": Layer number of 0 or above; higher-numbered layers are drawn\n                 above lower-numbered layers.\n        \"text\": The text to be inscribed inside the Shape. Normally useful for\n                showing the unique_id of the agent.\n        \"text_color\": The color to draw the inscribed text. Should be given in\n                      conjunction of \"text\" property.\n\n\n    Attributes:\n        portrayal_method: Function which generates portrayals from objects, as\n                          described above.\n        grid_height, grid_width: Size of the grid to visualize, in cells.\n        canvas_height, canvas_width: Size, in pixels, of the grid visualization\n                                     to draw on the client.\n        template: \"canvas_module.html\" stores the module's HTML template.\n\n    \"\"\"\n    package_includes = [\"HexDraw.js\", \"CanvasHexModule.js\", \"InteractionHandler.js\"]\n    portrayal_method = None  # Portrayal function\n    canvas_width = 500\n    canvas_height = 500\n\n    def __init__(self, portrayal_method, grid_width, grid_height,\n                 canvas_width=500, canvas_height=500):\n        \"\"\" Instantiate a new CanvasGrid.\n\n        Args:\n            portrayal_method: function to convert each object on the grid to\n                              a portrayal, as described above.\n            grid_width, grid_height: Size of the grid, in cells.\n            canvas_height, canvas_width: Size of the canvas to draw in the\n                                         client, in pixels. (default: 500x500)\n\n        \"\"\"\n        self.portrayal_method = portrayal_method\n        self.grid_width = grid_width\n        self.grid_height = grid_height\n        self.canvas_width = canvas_width\n        self.canvas_height = canvas_height\n\n        new_element = (\"new CanvasHexModule({}, {}, {}, {})\"\n            .format(self.canvas_width, self.canvas_height,\n                self.grid_width, self.grid_height))\n\n        self.js_code = \"elements.push(\" + new_element + \");\"\n\n    def render(self, model):\n        grid_state = defaultdict(list)\n        for x in range(model.grid.width):\n            for y in range(model.grid.height):\n                cell_objects = model.grid.get_cell_list_contents([(x, y)])\n                for obj in cell_objects:\n                    portrayal = self.portrayal_method(obj)\n                    if portrayal:\n                        portrayal[\"x\"] = x\n                        portrayal[\"y\"] = y\n                        grid_state[portrayal[\"Layer\"]].append(portrayal)\n\n        return grid_state\n", "path": "mesa/visualization/modules/HexGridVisualization.py"}]}