Rename Fake Dashboard to Demo Dashboard

[salmanfarisvp]

• Rename Folder
• Modified Readme on root and edge app dir.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 Security concerns XSS: The code frequently writes string-concatenated HTML into the DOM via innerHTML (e.g., sourcesContainer, alert lists, zone tiles, shopfloor rows, QA widgets). If any interpolated values ever become user-controlled or externally sourced (settings, API data, mock data files), this can enable script injection. Prefer DOM construction with textContent or sanitize/escape interpolated content before assigning to innerHTML.

⚡ Recommended focus areas for review XSS Risk Multiple places build HTML strings and assign them via innerHTML (e.g., sources, zone tiles, alerts, table rows, QA widgets). While the current inputs appear to be locally generated templates/random values, this pattern becomes an easy XSS footgun if any of these values later come from settings, query params, or external/mock data. Consider using DOM APIs (createElement, textContent) or strict escaping before interpolating dynamic content. function updateSources() { let sources = generateSourceData() let container = document.getElementById('sourcesContainer') container.innerHTML = '' var html = '' Object.entries(sources).forEach(function (entry) { html += '<div class="source-item"><span>' + entry[0] + '</span><span>' + entry[1] + '%</span></div>' }) container.innerHTML = html } Global Defaults Each dashboard updates Chart.defaults.* inside its initAllCharts. Since Chart defaults are global, these changes can affect charts in other dashboards (including hidden ones) and can create unexpected styling if dashboards are initialized more than once in a session. Consider scoping chart options per-chart instead of mutating Chart.defaults, or resetting defaults explicitly. function initAllCharts() { Chart.defaults.color = 'rgba(120, 113, 108, 0.8)' Chart.defaults.borderColor = 'rgba(0, 0, 0, 0.06)' Chart.defaults.font.family = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" initIncidentChart() initZoneHazardChart() allCharts = [incidentChart, zoneHazardChart] } Broken Asset Link The manifest icon URL still points to the old fake-dashboard path. After the rename, this may break the icon in catalogs/install flows unless the old path remains hosted. Validate the icon URL and update it to the new demo-dashboard path if needed. description: Demo Dashboard App icon: https://playground.srly.io/edge-apps/fake-dashboard/static/img/icon.svg author: Screenly, Inc.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Prevent table content clipping Allow the shopfloor table area to scroll instead of clipping content, otherwise longer tables will be cut off with no way to view remaining rows. Use overflow: auto consistently (including in the portrait override). edge-apps/demo-dashboard/static/css/manufacturing.css [307-608] #dash-manufacturing .table-wrapper { flex: 1; - overflow: hidden; + overflow: auto; } ... @media (orientation: portrait) { ... #dash-manufacturing .table-wrapper { - overflow: visible; + overflow: auto; } ... } Suggestion importance[1-10]: 6 __ Why: With overflow: hidden on .table-wrapper, longer shopfloor tables can be cut off with no way to access remaining rows, so switching to overflow: auto can prevent data loss in the UI. The change may introduce scrollbars (a design tradeoff), but it meaningfully improves robustness for varying table sizes.	Low
	Guard against missing canvases document.getElementById(...).getContext('2d') will throw if the canvas element is missing or not a canvas (e.g., template changes or dashboard removed). Add a null/feature guard and return null so the rest of the dashboard can still render. edge-apps/demo-dashboard/static/js/script.js [159-164] function initPageViewsChart() { if (!pageViewsData) { pageViewsData = generatePageViewsHistory() } - let ctx = document.getElementById('pageViewsChart').getContext('2d') + let canvas = document.getElementById('pageViewsChart') + if (!canvas || typeof canvas.getContext !== 'function') return null + let ctx = canvas.getContext('2d') + if (!ctx) return null Suggestion importance[1-10]: 5 __ Why: Adding a null/feature guard around document.getElementById('pageViewsChart') and getContext('2d') improves robustness and prevents runtime crashes if the canvas is missing, while fitting with existing if (pageViewsChart) ... checks.	Low
	Remove duplicate font-size override Remove the duplicate font-size declaration to avoid unintended overrides and inconsistent sizing across breakpoints. Keep a single clamp that matches the intended sidebar typography. edge-apps/demo-dashboard/static/css/styles.css [248-258] .source-item { display: flex; justify-content: space-between; align-items: center; padding: clamp(0.5rem, 0.5vh, 1rem) 0; border-bottom: 1px solid var(--border-color); font-size: clamp(0.85rem, calc(0.75rem + 0.35vw), 1.25rem); - font-size: clamp(1rem, 1vh + 1vw, 10rem); color: #fff; min-width: 0; } Suggestion importance[1-10]: 5 __ Why: The .source-item rule declares font-size twice, so the first value is always overridden, which is likely unintentional and can confuse future maintenance. Removing the duplicate improves clarity without changing intended behavior.	Low
Security	Replace innerHTML with DOM building Building HTML via string concatenation and assigning to innerHTML creates an XSS sink if any of the values ever become user-controlled (e.g., remote data instead of random/demo data). Build DOM nodes and set textContent to keep rendering safe by construction. edge-apps/demo-dashboard/static/js/script.js [292-307] function updateSources() { let sources = generateSourceData() let container = document.getElementById('sourcesContainer') - container.innerHTML = '' + if (!container) return - var html = '' - Object.entries(sources).forEach(function (entry) { - html += - '<div class="source-item"><span>' + - entry[0] + - '</span><span>' + - entry[1] + - '%</span></div>' + container.textContent = '' + + let frag = document.createDocumentFragment() + Object.entries(sources).forEach(function ([label, pct]) { + let item = document.createElement('div') + item.className = 'source-item' + + let left = document.createElement('span') + left.textContent = label + + let right = document.createElement('span') + right.textContent = pct + '%' + + item.appendChild(left) + item.appendChild(right) + frag.appendChild(item) }) - container.innerHTML = html + + container.appendChild(frag) } Suggestion importance[1-10]: 6 __ Why: Replacing innerHTML string concatenation with DOM node creation and textContent removes an XSS sink around container.innerHTML and is a safe-by-construction improvement with minimal functional risk.	Low
General	Scope canvas positioning styles Scope the absolute-positioning rule to the specific chart containers instead of all canvas elements. This prevents unintended layout breakage if any other canvases are added later (e.g., logos, effects, or third-party widgets). edge-apps/demo-dashboard/static/css/styles.css [136-142] -canvas { +.page-views-container canvas, +.device-chart-container canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Suggestion importance[1-10]: 4 __ Why: Applying absolute positioning to all canvas elements is overly broad and can break layout if additional canvases are introduced later. Scoping the rule to .page-views-container canvas and .device-chart-container canvas is a safe maintainability improvement.	Low