Skip to content

feat(dashboard): add show_element_name option to details panel #614

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

Open
lukefullard wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(dashboard): add show_element_name option to details panel #614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion examples/mysite/title_page/subpage/water/science/generate_science_page.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,8 @@
grid_area="markdown",
background_color="rgba(240, 240, 240, 0.7)",
border_radius="10px",
padding="10px"
padding="10px",
show_element_name=False
)

dashboard.add_geocoder_block(
Expand Down
20 changes: 12 additions & 8 deletions examples/mysite/title_page/subpage/water/science/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,7 +604,7 @@

/* Navigation Menu Styles */
.sivo-nav-btn {
position: absolute;
position: fixed;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
Expand All @@ -624,7 +624,7 @@
transform: translateY(-1px);
}
.sivo-nav-menu {
position: absolute;
position: fixed;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
Expand Down Expand Up @@ -818,7 +818,7 @@


.sivo-nav-btn {
position: absolute;
position: fixed;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
Expand All @@ -841,7 +841,7 @@
transform: translateY(-1px);
}
.sivo-nav-menu {
position: absolute;
position: fixed;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
Expand Down Expand Up @@ -1052,7 +1052,7 @@



<div class="html-card sivo-details-panel" id="card-markdown" data-block-id="markdown" style="grid-area: markdown; background-color: rgba(240, 240, 240, 0.7) !important; border-radius: 10px; padding: 10px;">
<div class="html-card sivo-details-panel" id="card-markdown" data-block-id="markdown" data-show-name="false" style="grid-area: markdown; background-color: rgba(240, 240, 240, 0.7) !important; border-radius: 10px; padding: 10px;">
<div class="card-header"></div>
<div class="card-content sivo-details-content" id="container-markdown">
<p class="placeholder-text" style="color: #64748b;" id="placeholder-markdown"># Water Science
Expand Down Expand Up @@ -1674,20 +1674,24 @@ <h2 id="sidebar-title">Details</h2>

// Do NOT update in-grid Details panels if we opened a sidebar (OR behavior)
detailsPanels.forEach(panel => {
const showName = panel.getAttribute('data-show-name') !== 'false';
const container = panel.querySelector('.sivo-details-content');
var safeName = window.DOMPurify ? window.DOMPurify.sanitize(params.name) : String(params.name || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
container.innerHTML = `<h3>${safeName}</h3><p style="color: #64748b; font-style: italic;">Details opened in sidebar overlay.</p>`;
var headerHtml = showName ? `<h3>${safeName}</h3>` : '';
container.innerHTML = `${headerHtml}<p style="color: #64748b; font-style: italic;">Details opened in sidebar overlay.</p>`;
});
} else {
// Update in-grid Details Panels
detailsPanels.forEach(panel => {
const showName = panel.getAttribute('data-show-name') !== 'false';
const container = panel.querySelector('.sivo-details-content');
var safeName = window.DOMPurify ? window.DOMPurify.sanitize(params.name) : String(params.name || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
var headerHtml = showName ? `<h3>${safeName}</h3>` : '';
if (tooltipContent) {
var safeTooltip = window.DOMPurify ? window.DOMPurify.sanitize(tooltipContent) : tooltipContent;
container.innerHTML = `<h3>${safeName}</h3>${safeTooltip}`;
container.innerHTML = `${headerHtml}${safeTooltip}`;
} else {
container.innerHTML = `<h3>${safeName}</h3><p>No additional details mapped.</p>`;
container.innerHTML = `${headerHtml}<p>No additional details mapped.</p>`;
}
});
}
Expand Down
5 changes: 3 additions & 2 deletions src/sivo/core/dashboard.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ def add_text_block(self, block_id: str, text: str, font_family: str = "Arial, sa

self.add_html_block(block_id, html_content, col_span=col_span, slot=slot, grid_area=grid_area, overflow_visible=overflow_visible, min_height=min_height)

def add_details_panel(self, block_id: str, title: str = "Details", placeholder: str = "Select an item to view details.", col_span: int = 1, slot: str = "main", grid_area: Optional[str] = None, overflow_visible: bool = False, min_height: Optional[str] = None, background_color: Optional[str] = None, border_radius: Optional[str] = None, padding: Optional[str] = None):
def add_details_panel(self, block_id: str, title: str = "Details", placeholder: str = "Select an item to view details.", col_span: int = 1, slot: str = "main", grid_area: Optional[str] = None, overflow_visible: bool = False, min_height: Optional[str] = None, background_color: Optional[str] = None, border_radius: Optional[str] = None, padding: Optional[str] = None, show_element_name: bool = True):
"""
Adds a pre-built panel that automatically listens to SIVO canvas clicks and renders
the clicked element's `html` (tooltip content) mapping.
Expand All @@ -152,7 +152,8 @@ def add_details_panel(self, block_id: str, title: str = "Details", placeholder:
"placeholder": placeholder,
"background_color": background_color,
"border_radius": border_radius,
"padding": padding
"padding": padding,
"show_element_name": show_element_name
}
self.layout_order.append({"type": "details", "id": block_id, "col_span": col_span, "slot": slot, "grid_area": grid_area, "overflow_visible": overflow_visible, "min_height": min_height})

Expand Down
12 changes: 8 additions & 4 deletions src/sivo/runtime/templates/dashboard_blocks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1043,7 +1043,7 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "details" %}
<div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="{{ grid_style }} {{ inline_min_height }} {% if details_panels[block.id].background_color %}background-color: {{ details_panels[block.id].background_color }} !important;{% endif %} {% if details_panels[block.id].border_radius %}border-radius: {{ details_panels[block.id].border_radius }};{% endif %} {% if details_panels[block.id].padding %}padding: {{ details_panels[block.id].padding }};{% endif %}">
<div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="{{ grid_style }} {{ inline_min_height }} {% if details_panels[block.id].background_color %}background-color: {{ details_panels[block.id].background_color }} !important;{% endif %} {% if details_panels[block.id].border_radius %}border-radius: {{ details_panels[block.id].border_radius }};{% endif %} {% if details_panels[block.id].padding %}padding: {{ details_panels[block.id].padding }};{% endif %}">
<div class="card-header">{{ details_panels[block.id].title }}</div>
<div class="card-content sivo-details-content" id="container-{{ block.id }}">
<p class="placeholder-text" style="color: #64748b;" id="placeholder-{{ block.id }}">{{ details_panels[block.id].placeholder }}</p>
Expand Down Expand Up @@ -1634,20 +1634,24 @@ <h2 id="sidebar-title">Details</h2>

// Do NOT update in-grid Details panels if we opened a sidebar (OR behavior)
detailsPanels.forEach(panel => {
const showName = panel.getAttribute('data-show-name') !== 'false';
const container = panel.querySelector('.sivo-details-content');
var safeName = window.DOMPurify ? window.DOMPurify.sanitize(params.name) : String(params.name || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
container.innerHTML = `<h3>${safeName}</h3><p style="color: #64748b; font-style: italic;">Details opened in sidebar overlay.</p>`;
var headerHtml = showName ? `<h3>${safeName}</h3>` : '';
container.innerHTML = `${headerHtml}<p style="color: #64748b; font-style: italic;">Details opened in sidebar overlay.</p>`;
});
} else {
// Update in-grid Details Panels
detailsPanels.forEach(panel => {
const showName = panel.getAttribute('data-show-name') !== 'false';
const container = panel.querySelector('.sivo-details-content');
var safeName = window.DOMPurify ? window.DOMPurify.sanitize(params.name) : String(params.name || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
var headerHtml = showName ? `<h3>${safeName}</h3>` : '';
if (tooltipContent) {
var safeTooltip = window.DOMPurify ? window.DOMPurify.sanitize(tooltipContent) : tooltipContent;
container.innerHTML = `<h3>${safeName}</h3>${safeTooltip}`;
container.innerHTML = `${headerHtml}${safeTooltip}`;
} else {
container.innerHTML = `<h3>${safeName}</h3><p>No additional details mapped.</p>`;
container.innerHTML = `${headerHtml}<p>No additional details mapped.</p>`;
}
});
}
Expand Down
6 changes: 3 additions & 3 deletions src/sivo/templates/dashboards/analytics_dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "metrics" %}
<div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
<div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
<div class="card-content sivo-metrics-content" id="container-{{ block.id }}" style="padding: 1.25rem;">
<div style="font-size: 0.875rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem;">{{ metrics_panels[block.id].title }}</div>
{% for metric in metrics_panels[block.id].metrics %}
Expand Down Expand Up @@ -340,7 +340,7 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "details" %}
<div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
<div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
<div class="card-header">{{ details_panels[block.id].title }}</div>
<div class="card-content sivo-details-content" id="container-{{ block.id }}">
<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); font-style: italic; text-align: center;">
Expand All @@ -349,7 +349,7 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "metrics" %}
<div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
<div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
<div class="card-header">{{ metrics_panels[block.id].title }}</div>
<div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
{% for metric in metrics_panels[block.id].metrics %}
Expand Down
4 changes: 2 additions & 2 deletions src/sivo/templates/dashboards/bento_box.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "details" %}
<div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
<div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
<div class="card-header">{{ details_panels[block.id].title }}</div>
<div class="card-content sivo-details-content" id="container-{{ block.id }}">
<div class="placeholder-content" style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-style: italic; text-align: center;">
Expand All @@ -284,7 +284,7 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "metrics" %}
<div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
<div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
<div class="card-header">{{ metrics_panels[block.id].title }}</div>
<div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
{% for metric in metrics_panels[block.id].metrics %}
Expand Down
4 changes: 2 additions & 2 deletions src/sivo/templates/dashboards/cards_layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "details" %}
<div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span | default(1) }};">
<div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span | default(1) }};">
<div class="card-header">{{ details_panels[block.id].title }}</div>
<div class="card-content sivo-details-content" id="container-{{ block.id }}">
<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-style: italic; text-align: center;">
Expand All @@ -214,7 +214,7 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "metrics" %}
<div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span | default(1) }};">
<div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span | default(1) }};">
<div class="card-header">{{ metrics_panels[block.id].title }}</div>
<div class="card-content sivo-metrics-content" id="container-{{ block.id }}" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem;">
{% for metric in metrics_panels[block.id].metrics %}
Expand Down
4 changes: 2 additions & 2 deletions src/sivo/templates/dashboards/dark_grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,14 +266,14 @@ <h1>{{ title }}</h1>
</div>
</div>
{% elif block.type == "details" %}
<div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
<div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
<div class="card-header">{{ details_panels[block.id].title }}</div>
<div class="card-content sivo-details-content" id="container-{{ block.id }}">
<p class="placeholder-text" style="text-align: center; margin-top: 2rem;">{{ details_panels[block.id].placeholder }}</p>
</div>
</div>
{% elif block.type == "metrics" %}
<div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
<div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
<div class="card-header">{{ metrics_panels[block.id].title }}</div>
<div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
{% for metric in metrics_panels[block.id].metrics %}
Expand Down
Loading