holoviz/lumen

Add GridSpec support to arrange targets in dashboard layout

Opened this issue · 5 comments

Dashboard would be nicer if we can arrange position of Targets in a GridSpec

For the moment, we can't make a target twice bigger than 2 other.

Solution

I would have the possibility to specify position and size of targets

Alternative

GridBox, Column and Row can't set size

How it could be done

Target should have a new property 'position'
which it could be set like this for 2 targets. the first is twice bigger:

targets:
  - title: Répartition spatiale
    position: [':','0:2']
   ...
  - title: Nombre de requettes    
    layout: column
    nbcols: 1    
    position: [0,2]
   ...

Quotation marks are necessary around colon because it's a yaml specifier. There are not necessary if there is no comma.

here the result should give the picture above. Note that the second target has 3 views in column layout.
image

or another exemple with 3 targets :

image

So to do that we should interpret position with in the main rendering method of dashboard with something like this :

            if isinstance(self._main, pn.GridSpec):
                panel_generator = (target for target in self.targets)
                for idx, target in enumerate(panel_generator):
                    l = []
                    for idx, i in enumerate(target.position):
                        if isinstance(i, int):
                            l.insert(idx, i)
                        if isinstance(i, str):
                            c = i.split(':')
                            if c[0] != '':
                                start = int(c[0])
                            else:
                                start = 0
                            if c[1] != '':
                                end = int(c[1])
                            else:
                                end = None
                            l.insert(idx, slice(start,end))
                    self._main[(l[0], l[1])] = target.panels
            else:
                self._main[:] = [target.panels for target in self.targets]

I can make a PR with this code that seem to work for my need.

It's maybe a first step to make ReactTemplate works ;)

This is definitely a good idea but let me mull over the best syntax a little bit. I think I still want to separate the definition of views/targets from the declaration of the layout.

Btw, I'm trying to gear up for a first public release of Lumen and am settling on terminology. No one is quite happy with the naming of Target and targets in the yaml spec so I've gotten the following suggestions: cards, containers, groups. Not totally happy with any of them so I'd love to hear what you think.

This functionality is definitely something to pursue, but yes, how to express it cleanly is tricky. My default assumption is that each target ought to be able to declare its own size, and maybe position in some priority or precedence list (the same way Parameters can do that independently from each other), but specifying the absolute location in a layout is fragile because then all targets have to be aware of all other targets' positions. Such absolute positioning seems like it should be done at a level above targets.

Right, the idea would be that the layout key at both the target level and at the global level would support a grid specification much like we already support the nested row/col spec (i.e. layout: [[0, 1], [2]]) at the target level. Only for both the grid spec and the row/col spec we should also support referencing the views/targets by name.

I've already supported defining the views as a dictionary so they can be referred to by name. I'll do the same for targets next.