Strange issue on Tables: they appear empty on first load... about django-dashboards

[petasis]

Actually I do get an error, its on the bowser console:

Uncaught TypeError: $(...).DataTable is not a function

[petasis]

I think there is a problem with the Datatable jquery plugin.

If I restart django, the first time I load a dashboard, I see this in the page code:

<!-- dashboard defined js -->
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
<!-- end dashboard defined js -->

If I reload the page, I see this:

!-- dashboard defined js -->
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
<script type="text/javascript" src="/static/dashboards/vendor/js/datatables.min.js"></script>
<!-- end dashboard defined js -->

After the reload, I get an extra .js file. But I cannot figure out why.

[petasis]

Modifying class Dashboard.get_media() to:

def get_media(self) -> asset_definitions.Media:
        # dashboard level media
        print("=====================================================")
        media = super().get_media()
        print("11111111", media)

        # add any media defined in components
        for key, component in self.components.items():
            media += component.get_media()
            print("++++++++++", key, media)
        print("@@@@@@@@@@@", media)
        return media

Produces during the first render of the dashboard, after django restart:

=====================================================
11111111 <link href="/static/dashboards/css/dashboards.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
++++++++++ value <link href="/static/dashboards/css/dashboards.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
++++++++++ activities_table <link href="/static/dashboards/css/dashboards.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
@@@@@@@@@@@ <link href="/static/dashboards/css/dashboards.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>

Just hitting reload, the printed output changes:

=====================================================
11111111 <link href="/static/dashboards/css/dashboards.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
++++++++++ value <link href="/static/dashboards/css/dashboards.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
++++++++++ activities_table <link href="/static/dashboards/css/dashboards.css" media="all" rel="stylesheet">
<link href="/static/dashboards/vendor/css/datatables.min.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
<script type="text/javascript" src="/static/dashboards/vendor/js/datatables.min.js"></script>
@@@@@@@@@@@ <link href="/static/dashboards/css/dashboards.css" media="all" rel="stylesheet">
<link href="/static/dashboards/vendor/css/datatables.min.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/js/dashboard.js"></script>
<script type="text/javascript" src="/static/dashboards/vendor/js/datatables.min.js"></script>

The component activities_table adds the extra css/js only after the second render.
I do not know why.

[petasis]

Modifying Component.get_media:

def get_media(self) -> asset_definitions.Media:
        # component level media
        media = self._get_media_from_definition() or asset_definitions.Media()
        print("@@", self.template_name, media, self.value)
        # serializers may have media, if so use that instead of component media
        if callable(self.value) and hasattr(self.value, "get_media"):
            media = self.value().get_media()
            print("@@2", self.template_name, media, self.value)
        elif callable(self.defer) and hasattr(self.defer, "get_media"):
            media = self.defer().get_media()
            print("@@3", self.template_name, media)

        return media

Prints the first time:

@@ dashboards/components/table/index.html <link href="/static/dashboards/vendor/css/datatables.min.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/vendor/js/datatables.min.js"></script> <class 'vast_dashboards.dashboards.ActivitySerializer'>
@@2 dashboards/components/table/index.html  <class 'vast_dashboards.dashboards.ActivitySerializer'>

Thus, self.value is class TableSerializer, causing if callable(self.value) and hasattr(self.value, "get_media") to become true, and call
```` media = self.value().get_media(); print("@@2", self.template_name, media, self.value)```.

Calling it for the second time:

@@ dashboards/components/table/index.html <link href="/static/dashboards/vendor/css/datatables.min.css" media="all" rel="stylesheet">
<script type="text/javascript" src="/static/dashboards/vendor/js/datatables.min.js"></script> <bound method BaseTableSerializer.serialize of <class 'vast_dashboards.dashboards.ActivitySerializer'>>

Now value is <bound method BaseTableSerializer.serialize of <class 'vast_dashboards.dashboards.ActivitySerializer'>>, so its get_media is not called, leading to the expected result.

How to fix this?

[petasis]

The dashboard that generates all these, is:

@register
class ActivitiesDashboard(Dashboard):
    activities_table = Table(value=ActivitySerializer, css_classes="table table-hover align-middle table-left table-first-w-50 table-not-first-align-center", grid_css_classes="span-12")

    class Meta:
        name = "Activities"

    class Layout(Dashboard.Layout):
        components = ComponentLayout(
            Card("activities_table", 
                 heading = mark_safe("<i class=\"fa-solid fa-building-columns me-3\"></i> VAST Activities"),
                 css_classes="card", grid_css_classes="span-12"
            ),
        )

class ActivitySerializer(TableSerializer):
    @staticmethod
    def get_data(filters, **kwargs):
        if 'object' in kwargs and kwargs['object']:
            objects = Activity.objects.filter(pk=kwargs['object'].pk)
        else:
            objects = Activity.objects.all()
        if filters and "value" in filters and filters["value"] != "all":
            # Select all products having this value...
            objects = Activity.objects.filter(Q(visitor__product__statement__subject=filters["value"]) |
                                              Q(visitor__product__statement__object=filters["value"])  |
                                              Q(visitor__product__ps_subject__object=filters["value"]) |
                                              Q(visitor__product__productannotation__value=filters["value"])
                                             ).distinct()
        return [{
            'name': f'<a href="{o.get_dashboard_absolute_url()}" target="_blank">{o.name} <i class="fa-solid fa-arrow-up-right-from-square ms-3"></a>',
            'events': Event.objects.filter(activity__pk=o.pk).count(),
            'visitors': Visitor.objects.filter(activity__pk=o.pk).count(),
            'products': Product.objects.filter(activity_step__activity__pk=o.pk).count(),
            'statements': Statement.objects.filter(product__activity_step__activity__pk=o.pk).count() + \
                          ProductStatement.objects.filter(subject__activity_step__activity__pk=o.pk).count(),
        } for o in objects]
    class Meta:
        title = "Activities"
        columns = {
            "name": "Name",
            "events": "Events",
            "visitors": "Participants",
            "products": "Products",
            "statements": "Statements",
        }
        order = ["-name"]
        model = Activity

[petasis]

And probably this happens as TableSerializer inherits asset_definitions.MediaDefiningClass.

[petasis]

My temporary solution is to define a mixin and use it along TableSerializer:

class VASTTableSerializerMixin:
    class Media:
        js = ("dashboards/vendor/js/datatables.min.js",)
        css = {
            "all": ("dashboards/vendor/css/datatables.min.css",),
        }