Modernize builder UI with Panel 1.x compatibility (#518)

holoviz · Feb 1, 2024 · 0885a11 · 0885a11
1 parent 2521417
commit 0885a11
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 26 deletions.
diff --git a/lumen/ui/base.py b/lumen/ui/base.py
@@ -2,6 +2,7 @@
 import param  # type: ignore
 
 from panel.reactive import ReactiveHTML
+from panel.viewable import Viewable
 
 from .fast import FastDivider
 
@@ -89,6 +90,10 @@ def _next(self, event=None):
             self.next_disable = True
         self.loading = False
 
+    def select(self, selector=None):
+        items = super().select(selector)
+        items += [o for v in self.items if isinstance(v, Viewable) for o in v.select(selector)]
+        return items
 
 
 class WizardItem(ReactiveHTML):
@@ -113,3 +118,13 @@ def __init__(self, **params):
 
     def _update_spec(self, *events):
         pass
+
+    def select(self, selector=None):
+        items = super().select(selector)
+        for values in self.param.objects().values():
+            if isinstance(values, (list, dict)):
+                values = values.values() if isinstance(values, dict) else values
+                items += [o for v in values if isinstance(v, Viewable) for o in v.select(selector)]
+            elif isinstance(values, Viewable):
+                items += values.select(selector)
+        return items
diff --git a/lumen/ui/dashboard.py b/lumen/ui/dashboard.py
@@ -51,11 +51,11 @@ class DashboardGallery(WizardItem, Gallery):
     </fast-button>
     <div id="items" style="margin: 1em 0; display: flex; flex-wrap: wrap; gap: 1em;">
     {% for item in items.values() %}
-      <fast-card id="dashboard-container" class="gallery-item" style="height: 290px; width: 350px; padding: 1em;">
+      <fast-card id="dashboard-container" class="gallery-item" style="height: 290px; width: 350px; padding: 1em; margin: 0.2em;">
         ${item}
       </fast-card>
     {% endfor %}
-      <fast-card id="dashboard-container-new" class="gallery-item" style="height: 290px; width: 350px; padding: 1em;">
+      <fast-card id="dashboard-container-new" class="gallery-item" style="height: 290px; width: 350px; padding: 1em; margin: 0.2em;">
         <div style="display: grid;">
           <span style="font-size: 1.25em; font-weight: bold;">Create new dashboard</span>
           <i id="add-button" onclick="${_create_new}" class="fa fa-plus" style="font-size: 12em; margin: 0.2em auto;" aria-hidden="true"></i>

diff --git a/lumen/ui/fast.py b/lumen/ui/fast.py
@@ -120,7 +120,7 @@ class FastCheckbox(FastComponent):
 
     _child_config = {'name': 'template'}
 
-    _template = '<fast-checkbox id="fast-checkbox" value="${value}">${name}</fast-checkbox>'
+    _template = '<fast-checkbox id="fast-checkbox" checked="${value}">${name}</fast-checkbox>'
 
 
 class FastRadioGroup(FastComponent, SelectBase):

diff --git a/lumen/ui/launcher.py b/lumen/ui/launcher.py
@@ -72,7 +72,7 @@ class LauncherGallery(WizardItem, Gallery):
     <fast-divider style="margin: 1em 0;"></fast-divider>
     <div id="items" style="margin: 1em 0; display: flex; flex-wrap: wrap; gap: 1em;">
     {% for item in items.values() %}
-      <fast-card id="launcher-container" class="gallery-item" style="height: 290px; width: 350px; padding: 1em;">
+      <fast-card id="launcher-container" class="gallery-item" style="height: 290px; width: 350px; padding: 1em; margin: 0.2em;">
         ${item}
       </fast-card>
     {% endfor %}

diff --git a/lumen/ui/layouts.py b/lumen/ui/layouts.py
@@ -50,7 +50,7 @@ class LayoutEditor(ReactiveHTML):
           <fast-tooltip anchor="layout-type-${id}">{{ param.layout_type.doc }}</fast-tooltip>
         </div>
       </form>
-      <div id="layout" style="flex: auto; margin-left: 1em;">${layout}</div>
+      <div id="layout" style="flex: auto; margin-left: 1em; overflow: auto;">${layout}</div>
     </div>
     """
 
@@ -176,11 +176,11 @@ class LayoutGallery(WizardItem, Gallery):
     <span style="font-size: 1.2em; font-weight: bold;">{{ __doc__ }}</p>
     <div id="items" style="margin: 1em 0; display: flex; flex-wrap: wrap; gap: 1em;">
     {% for item in items.values() %}
-      <fast-card id="layout-container" style="width: 350px; height: 400px;">
+      <fast-card id="layout-container" style="width: 350px; height: 400px; margin: 0.2em;">
         ${item}
       </fast-card>
     {% endfor %}
-      <fast-card id="view-container-new" style="height: 400px; width: 350px; padding: 1em;">
+      <fast-card id="view-container-new" style="height: 400px; width: 350px; padding: 1em; margin: 0.2em;">
         <div style="display: grid;">
           <span style="font-size: 1.25em; font-weight: bold;">Create new layout group</span>
           <i id="add-button" onclick="${_open_modal}" class="fa fa-plus" style="font-size: 14em; margin: 0.2em auto;" aria-hidden="true"></i>

diff --git a/lumen/ui/pipeline.py b/lumen/ui/pipeline.py
@@ -314,7 +314,7 @@ class PipelinesEditor(WizardItem):
       </form>
       <div id="pipelines" style="flex: 70%; margin-left: 1em; margin-right: 2em;">
         {% for pipeline in pipelines.values() %}
-        <div id="pipeline-container">${pipeline}</div>
+        <div id="pipeline-container" style="overflow: auto;">${pipeline}</div>
         <fast-divider></faster-divider>
         {% endfor %}
       </div>
@@ -406,11 +406,11 @@ class PipelineGallery(WizardItem, Gallery):
     <span style="font-size: 1.2em; font-weight: bold;">{{ __doc__ }}</p>
     <div id="items" style="margin: 1em 0; display: flex; flex-wrap: wrap; gap: 1em;">
       {% for item in items.values() %}
-      <fast-card id="pipeline-container" style="width: 350px; height: 400px;">
+      <fast-card id="pipeline-container" style="width: 350px; height: 400px; margin: 0.2em;">
         ${item}
       </fast-card>
       {% endfor %}
-      <fast-card id="pipelines-container-new" style="height: 400px; width: 350px; padding: 1em;">
+      <fast-card id="pipelines-container-new" style="height: 400px; width: 350px; padding: 1em; margin: 0.2em;">
         <div style="display: grid;">
           <span style="font-size: 1.25em; font-weight: bold;">Add new pipeline</span>
           <i id="add-button" onclick="${_open_modal}" class="fa fa-plus" style="font-size: 14em; margin: 0.2em auto;" aria-hidden="true"></i>

diff --git a/lumen/ui/sources.py b/lumen/ui/sources.py
@@ -31,7 +31,7 @@ class SourceEditor(FastComponent, Editor):
 
     form = param.Parameter()
 
-    preview = param.Parameter()
+    preview = param.Parameter(allow_refs=False)
 
     source_type = param.String(default="")
 
@@ -75,19 +75,20 @@ def __new__(cls, **params):
         return super().__new__(cls)
 
     def __init__(self, **params):
+        params.pop('type', None)
         spec = params.pop('spec', {})
         params.update(**{
             k: v for k, v in spec.items() if k in self.param and k not in params
         })
         self._source = None
         self._thumbnail = params.pop('thumbnail', None)
-        super().__init__(spec=spec, **params)
-        self.form = pn.Column(sizing_mode='stretch_width')
         theme = 'midnight' if getattr(pn.config, 'theme', 'default') == 'dark' else 'simple'
-        self.preview = pn.widgets.Tabulator(
+        params['preview'] = pn.widgets.Tabulator(
             sizing_mode='stretch_width', pagination='remote', page_size=12,
             theme=theme, height=400
         )
+        super().__init__(spec=spec, **params)
+        self.form = pn.Column(sizing_mode='stretch_width')
         self._select_table = pn.widgets.Select(
             name='Select table', margin=0, sizing_mode='stretch_width'
         )
@@ -171,11 +172,11 @@ class SourceGallery(WizardItem, Gallery):
     <span style="font-size: 1.2em; font-weight: bold;">{{ __doc__ }}</p>
     <div id="items" style="margin: 1em 0; display: flex; flex-wrap: wrap; gap: 1em;">
     {% for item in items.values() %}
-      <fast-card id="source-container" style="width: 350px; height: 400px;">
+      <fast-card id="source-container" style="width: 350px; height: 400px; margin: 0.2em;">
         ${item}
       </fast-card>
     {% endfor %}
-      <fast-card id="sources-container-new" style="height: 400px; width: 350px; padding: 1em;">
+      <fast-card id="sources-container-new" style="height: 400px; width: 350px; padding: 1em; margin: 0.2em;">
         <div style="display: grid;">
           <span style="font-size: 1.25em; font-weight: bold;">Add new source</span>
           <i id="add-button" onclick="${_open_modal}" class="fa fa-plus" style="font-size: 14em; margin: 0.2em auto;" aria-hidden="true"></i>
@@ -272,7 +273,7 @@ class IntakeSourceEditor(SourceEditor):
         </div>
         <div style="display: grid;">
           <label for="shared"><b>{{ param.shared.label }}</b></label>
-          <fast-checkbox id="shared" value="${shared}"></fast-checkbox>
+          <fast-checkbox id="shared" checked=${shared}></fast-checkbox>
         </div>
       </div>
     </form>
@@ -356,8 +357,8 @@ class IntakeDremioSourceEditor(SourceEditor):
             <fast-text-field id="password" type="password" placeholder="Enter password" value="${password}">
             </fast-text-field>
           </div>
-          <fast-checkbox id="load_schema" checked="${load_schema}">Load schema</fast-checkbox>
-          <fast-checkbox id="tls" checked="${tls}">Enable TLS</fast-checkbox>
+          <fast-checkbox id="load_schema" checked=${load_schema}>Load schema</fast-checkbox>
+          <fast-checkbox id="tls" checked=${tls}>Enable TLS</fast-checkbox>
           <div style="display: grid;">
             <label for="cert"><b>Certificate</b></label>
             <fast-text-field id="cert" disabled=${tls} placeholder="Enter path to a certificate" value="${cert}">
@@ -373,7 +374,7 @@ class IntakeDremioSourceEditor(SourceEditor):
         </div>
         <div style="display: grid;">
           <label for="shared"><b>{{ param.shared.label }}</b></label>
-          <fast-checkbox id="shared" value="${shared}"></fast-checkbox>
+          <fast-checkbox id="shared" checked=${shared}></fast-checkbox>
         </div>
       </div>
     </form>
@@ -463,7 +464,7 @@ class FileSourceEditor(SourceEditor):
       </div>
       <div style="display: grid;">
         <label for="shared"><b>{{ param.shared.label }}</b></label>
-        <fast-checkbox id="shared" value="${shared}"></fast-checkbox>
+        <fast-checkbox id="shared" checked=${shared}></fast-checkbox>
       </div>
     </div>
     <div style="display: flex; justify-content:flex-end; margin-right: 2em;">
@@ -506,7 +507,8 @@ def _add_table(self, event=None, **kwargs):
         remove = table.param.watch(self._remove_table, 'remove')
         update = table.param.watch(self._update_spec, 'uri')
         self._table_watchers[table.name] = (remove, update)
-        self.table_editors += [table]
+        self.table_editors.append(table)
+        self.param.trigger('table_editors')
         self.resize += 1
 
     @catch_and_notify
@@ -565,7 +567,7 @@ class SourcesEditor(WizardItem):
       </form>
       <div id="sources" style="flex: 75%; margin-left: 1em; margin-right: 1em;">
         {% for source in sources.values() %}
-        <div id="source-container">${source}</div>
+        <div id="source-container" style="overflow: auto;">${source}</div>
         <fast-divider></faster-divider>
         {% endfor %}
       </div>

diff --git a/lumen/ui/views.py b/lumen/ui/views.py
@@ -22,7 +22,7 @@ class ViewsEditor(WizardItem):
     Declare the views for your dashboard.
     """
 
-    spec = param.List(default=[], precedence=-1)
+    spec = param.List(default=[], precedence=-1, allow_None=True)
 
     pipeline  = param.String()
 
@@ -213,11 +213,11 @@ class ViewGallery(WizardItem, Gallery):
     <span style="font-size: 1.2em; font-weight: bold;">{{ __doc__ }}</p>
     <div id="items" style="margin: 1em 0; display: flex; flex-wrap: wrap; gap: 1em;">
     {% for item in items %}
-      <fast-card id="view-container" class="gallery-item" style="width: 350px; height: 400px;">
+      <fast-card id="view-container" class="gallery-item" style="width: 350px; height: 400px; margin: 0.2em;">
         ${item}
       </fast-card>
     {% endfor %}
-      <fast-card id="view-container-new" class="gallery-item" style="height: 400px; width: 350px; padding: 1em;">
+      <fast-card id="view-container-new" class="gallery-item" style="height: 400px; width: 350px; padding: 1em; margin: 0.2em;">
         <div style="display: grid;">
           <span style="font-size: 1.25em; font-weight: bold;">Add new view</span>
           <i id="add-button" onclick="${_create_new}" class="fa fa-plus" style="font-size: 14em; margin: 0.2em auto;" aria-hidden="true"></i>

diff --git a/setup.py b/setup.py
@@ -42,6 +42,7 @@ def get_setup_version(reponame):
         'toolz',
         'pre-commit',
         'matplotlib >=3.4',  # Ubuntu + Python 3.9 installs old version matplotlib (3.3.2)
+        'pandas <2.2',
     ],
     'tests_ci' : [
         'pytest-github-actions-annotate-failures',