Lumino Template

[davidpasquale]

Hi I really would like to build a webapp based on panel, which i find an amazing work!

For my need, what is missing right now, it is the possibility of put multiple plots (or more complex dashboards) inside a sub-container wich can be dragged/dropped from side/top bar and added in a main dockable window.

I found a very nice example which is very close to what I m actually looking for here: https://panel.holoviz.org/gallery/demos/VTKSlicer.html#demos-gallery-vtkslicer but dynamic content creation and file toolbar are missing, wich are for me mandatory key features to build a proper application.

I would like to ask if someone can work on the implementation, as a template, of the incredible and powerfull new UI of JupyterLab: Lumino (i.e. the new version of PhosphorJS ) https://github.com/jupyterlab/lumino

Lumino has already been implemented in Dash: https://github.com/VK/dash-lumino-components but i prefer much more the flexibility of panel, and I don't think I am the only one!!

The implementation of this template could overcome all others and allow the development of web-apps that could replace even very complex software.

Thank you very much!

[davidpasquale]

I found a P.O.C, wich can be usefull to start with Lumino https://github.com/xavArtley/pnbk-extensions/tree/master/pnbkext/lumino Are you interested in such template? Thank you

[xavArtley]

I think lumino as evolved a lot since I made this P.O.C and I'm not sure it's still the way to go I'll use may be more this to make a template http://hpcc-systems.github.io/Visualization/components/layout/src/lumino/dockPanel.html

[xavArtley]

Quick example:

import panel as pn

template = """
import panel as pn
pn.config.sizing_mode = "stretch_both"

template = """
<!--html-->
{% extends base %}
{% block postamble %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hpcc-js/common/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wc-layout"></script>
{% endblock %}

{% block contents %}
<hpcc-dockpanel style="width:100%; height:100%">
  <div id="one" data-label="Red" style="overflow:hidden;height:100%">
    {{ embed(roots.red) | indent(4) }}
  </div>
  <div id="three" data-mode="split-right" data-closable="true" style="height:100%">
    {{ embed(roots.blue) | indent(4) }}
  </div>
  <div data-mode="tab-after" data-ref="three" data-caption="What no label!" style="height:100%">
    {{ embed(roots.green) | indent(4) }}
  </div>
  <div data-mode="split-bottom" data-ref="one" style=";height:100%">
    {{ embed(roots.black) | indent(4) }}
  </div>
</hpcc-dockpanel>
<script>
  document.querySelector("hpcc-dockpanel").addEventListener("closeRequest", function (evt) {
    if (!confirm(`Close Tab "${evt.detail.tagName} #${evt.detail.id}"?`)) {
      evt.preventDefault();
    }
  });
  document.querySelector("hpcc-dockpanel").addEventListener(
    "update-request",
    () => window.setTimeout(() => window.dispatchEvent(new CustomEvent("resize")), 50)
  );
</script>
<style>
  html, 
  body {
      height: 100%;
      margin: 0;
      overflow: hidden;
  }
</style>
{% endblock %}
<!--!html-->
"""

tmpl = pn.Template(template=template)
tmpl.add_panel("red", pn.Spacer(background='red', margin=0))
tmpl.add_panel("blue", pn.Spacer(background='blue', margin=0))
tmpl.add_panel("green", pn.Spacer(background='green', margin=0))
tmpl.add_panel("black", pn.Spacer(background='black', margin=0))
tmpl.show()