https://piratesbargain.com/assets/dashAgGridComponentFunctions.js?m=1786229593.0

1/**
2 * dash-ag-grid custom cell-renderer components.
3 *
4 * dash-ag-grid auto-discovers this file and registers every function on
5 * `window.dashAgGridComponentFunctions`; a column references one by NAME via
6 * `colDef.cellRenderer = "AssetThumb"`. These are React function components —
7 * they must RETURN A REACT ELEMENT (`React.createElement(...)`), never an HTML
8 * string. A string return is inserted as the cell's textContent, which is the
9 * bug this replaces: the `{"function": "<...><img ...>"}` inline renderer on
10 * /admin/map/tilesets showed the literal `<img …>` markup as text instead of
11 * the image. React is exposed globally by Dash (see assets/sprite_pack_option.js
12 * for the same pattern in a Mantine renderOption).
13 */
14var dagfuncs = (window.dashAgGridComponentFunctions =
15    window.dashAgGridComponentFunctions || {});
16
17/**
18 * AssetThumb — a small square image cell from `params.value` (a tile / preview
19 * URL). Renders nothing for an empty value, and hides itself on a 404 (a tileset
20 * with no pyramid on this container, or a row with no center) so a missing tile
21 * shows a blank cell rather than a broken-image glyph. Pixelated rendering suits
22 * the low-res map/sprite tiles.
23 */
24dagfuncs.AssetThumb = function (props) {
25    if (!props || !props.value) {
26        return null;
27    }
28    return React.createElement('img', {
29        src: props.value,
30        alt: '',
31        draggable: false,
32        style: {
33            height: '40px',
34            width: '40px',
35            objectFit: 'cover',
36            borderRadius: '4px',
37            display: 'inline-block',
38            imageRendering: 'pixelated',
39            background: 'var(--mantine-color-default-hover)',
40        },
41        onError: function (e) {
42            e.currentTarget.style.display = 'none';
43        },
44    });
45};