Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modernize builder UI with Panel 1.x compatibility #518

Merged
merged 2 commits into from
Feb 1, 2024
Merged

Modernize builder UI with Panel 1.x compatibility #518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2d00610
Modernize builder UI with Panel 1.x compatibility
philippjfr Feb 1, 2024
f51a140
Pin pandas
philippjfr Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions lumen/ui/base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import param # type: ignore

from panel.reactive import ReactiveHTML
from panel.viewable import Viewable

from .fast import FastDivider

Expand Down Expand Up @@ -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):
Expand All @@ -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
4 changes: 2 additions & 2 deletions lumen/ui/dashboard.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion lumen/ui/fast.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
2 changes: 1 addition & 1 deletion lumen/ui/launcher.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
6 changes: 3 additions & 3 deletions lumen/ui/layouts.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
"""

Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions lumen/ui/pipeline.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
28 changes: 15 additions & 13 deletions lumen/ui/sources.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="")

Expand Down Expand Up @@ -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'
)
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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}">
Expand All @@ -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>
Expand Down Expand Up @@ -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;">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions lumen/ui/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions setup.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading