[qa:fix] Ensure prettier auto indents and checks example files#491
[qa:fix] Ensure prettier auto indents and checks example files#491nemesifier merged 2 commits intomasterfrom
Conversation
📝 WalkthroughWalkthroughAdds Prettier formatting and QA checks for HTML example templates and updates lint-staged to run Prettier on files matching public/example_templates/**/*.html. Many example HTML files normalize the DOCTYPE to <!doctype html>, adjust HTML/CSS formatting, and fix minor comments. netjsongraph-wifi-clients.html adds a call to attachClientsOverlay in onReady. netjsongraph-elementsLegend.html reorganizes the NetJSONGraph options object (moves el into graphConfig and repositions prepareData and category configs). Sequence Diagram(s)(Skipped — changes are formatting, lint/QA updates, and configuration/templating adjustments without a new multi-component sequential control flow.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (24)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (16)
🧰 Additional context used🧠 Learnings (7)📓 Common learnings📚 Learning: 2026-01-22T22:37:11.257ZApplied to files:
📚 Learning: 2026-01-04T08:00:40.936ZApplied to files:
📚 Learning: 2026-01-20T00:56:47.084ZApplied to files:
📚 Learning: 2026-01-22T22:37:11.257ZApplied to files:
📚 Learning: 2026-01-22T22:37:11.257ZApplied to files:
📚 Learning: 2026-01-22T22:37:11.257ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (6)
✏️ Tip: You can disable this entire section by setting Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@public/example_templates/netjsongraph-elementsLegend.html`:
- Around line 37-38: Remove the duplicate font-family declaration so the
stylesheet doesn't contain dead code: in the CSS block that currently lists
"font-family: Arial, sans-serif;" followed immediately by "font-family:
sans-serif;", delete one of the two lines (keep the intended rule, e.g.,
"font-family: Arial, sans-serif;" if you want Arial fallback or "font-family:
sans-serif;" if only a generic family is needed) so only a single font-family
declaration remains.
🧹 Nitpick comments (3)
public/example_templates/netjson-searchElements.html (1)
11-15: Consider consolidating duplicate.njg-searchBtnrules.The
.njg-searchBtnclass is defined twice. The second definition (lines 32-35) overrides the first (lines 11-15), making the padding declaration in the first definition ineffective. Consider merging these into a single rule to improve maintainability.♻️ Proposed consolidation
Remove the duplicate definition and keep a single consolidated rule:
.njg-searchBtn { border: none; border-radius: 5px; padding: 4px 8px; } .njg-searchInput { padding: 4px; border-radius: 5px; border: none; max-width: 70%; } .njg-searchContainer { margin: 0 auto; width: 80%; text-align: center; left: 0; right: 0; } - - .njg-searchBtn { - border: none; - border-radius: 5px; - }Also applies to: 32-35
public/example_templates/netjsongraph-elementsLegend.html (1)
205-221: PreferforEach()overmap()for side-effect-only operations.
map()creates a new array that is discarded here. Since you're only mutating existing objects without using return values,forEach()is more idiomatic and avoids unnecessary array allocation.Suggested fix
prepareData: (data) => { - data.nodes.map((node) => { + data.nodes.forEach((node) => { if (node.properties.gateway) { node.category = "gateway"; } else { node.category = "default"; } }); - data.links.map((link) => { + data.links.forEach((link) => { if ( link.properties.type === "wireless" || link.properties.type === "ethernet" ) { link.category = link.properties.type; } }); },public/example_templates/netjsongraph-wifi-clients.html (1)
122-134: Guard overlay attachment in case the plugin isn’t bundled.
If this example is opened with a build that omits the clients overlay plugin, Line 124 will throw and prevent rendering. A simple feature check keeps the template resilient.🛠️ Suggested guard
onReady() { // Attach reusable overlay plugin shipped with the bundle - this.attachClientsOverlay({ - radius: 5, - gap: 3, - minZoomLevel: 1, - }); + if (typeof this.attachClientsOverlay === "function") { + this.attachClientsOverlay({ + radius: 5, + gap: 3, + minZoomLevel: 1, + }); + } else { + console.warn("Clients overlay plugin not available in this build."); + } },
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
package.jsonpublic/example_templates/netjson-clustering.htmlpublic/example_templates/netjson-dateParse.htmlpublic/example_templates/netjson-multipleInterfaces.htmlpublic/example_templates/netjson-searchElements.htmlpublic/example_templates/netjson-switchGraphMode.htmlpublic/example_templates/netjson-switchRenderMode.htmlpublic/example_templates/netjsongraph-elementsLegend.htmlpublic/example_templates/netjsongraph-graphGL.htmlpublic/example_templates/netjsongraph-multipleLinks.htmlpublic/example_templates/netjsongraph-nodeExpand.htmlpublic/example_templates/netjsongraph-wifi-clients.htmlpublic/example_templates/netjsongraph.htmlpublic/example_templates/netjsonmap-animation.htmlpublic/example_templates/netjsonmap-appendData.htmlpublic/example_templates/netjsonmap-appendData2.htmlpublic/example_templates/netjsonmap-indoormap.htmlpublic/example_templates/netjsonmap-multipleTiles.htmlpublic/example_templates/netjsonmap-nodeTiles.htmlpublic/example_templates/netjsonmap-plugins.htmlpublic/example_templates/netjsonmap.htmlpublic/example_templates/njg-geojson.htmlrun-qa-checks
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2026-01-04T08:00:40.936Z
Learnt from: dee077
Repo: openwisp/netjsongraph.js PR: 417
File: src/js/netjsongraph.util.js:1302-1341
Timestamp: 2026-01-04T08:00:40.936Z
Learning: In the netjsongraph.js codebase, the `== null` pattern is intentionally used to check for both null and undefined values in a single comparison, which is a well-established JavaScript idiom and should not be flagged for replacement with strict equality checks.
Applied to files:
public/example_templates/netjson-multipleInterfaces.htmlpublic/example_templates/netjsongraph-graphGL.htmlpublic/example_templates/netjsonmap-appendData.htmlpublic/example_templates/netjsongraph-nodeExpand.htmlpublic/example_templates/netjson-dateParse.htmlpublic/example_templates/netjsonmap-nodeTiles.htmlpublic/example_templates/netjson-switchGraphMode.htmlpublic/example_templates/netjsonmap.htmlpublic/example_templates/netjsonmap-appendData2.htmlpublic/example_templates/netjson-searchElements.htmlpublic/example_templates/netjsongraph.htmlpublic/example_templates/netjsonmap-multipleTiles.htmlpublic/example_templates/netjsongraph-multipleLinks.htmlpublic/example_templates/netjson-switchRenderMode.html
📚 Learning: 2026-01-20T00:56:47.084Z
Learnt from: dee077
Repo: openwisp/netjsongraph.js PR: 417
File: src/js/netjsongraph.core.js:132-145
Timestamp: 2026-01-20T00:56:47.084Z
Learning: In the netjsongraph.js codebase, the data model does not support parallel links (multiple links between the same pair of nodes), so storing a single link per "source~target" key in nodeLinkIndex is appropriate and won't overwrite any links.
Applied to files:
public/example_templates/netjson-multipleInterfaces.htmlpublic/example_templates/netjsongraph-graphGL.htmlpublic/example_templates/netjsonmap-appendData.htmlpublic/example_templates/netjsongraph-nodeExpand.htmlpublic/example_templates/netjson-dateParse.htmlpublic/example_templates/netjsonmap-nodeTiles.htmlpublic/example_templates/netjson-switchGraphMode.htmlpublic/example_templates/netjsonmap.htmlpublic/example_templates/netjsonmap-appendData2.htmlpublic/example_templates/netjson-searchElements.htmlpublic/example_templates/netjsongraph.htmlpublic/example_templates/netjsonmap-multipleTiles.htmlpublic/example_templates/netjsongraph-multipleLinks.htmlpublic/example_templates/netjson-switchRenderMode.html
🔇 Additional comments (28)
public/example_templates/netjson-searchElements.html (1)
1-1: LGTM! DOCTYPE formatting standardized.The lowercase DOCTYPE declaration is valid HTML5 and aligns with Prettier's formatting preferences for consistency across template files.
public/example_templates/netjsongraph-elementsLegend.html (3)
1-9: LGTM!Proper HTML5 document structure with lowercase doctype, lang attribute, and well-formatted meta tags.
90-98: LGTM!Legend markup is well-structured with semantic HTML elements.
227-228: LGTM!Closing tags are properly formatted.
public/example_templates/netjsonmap-plugins.html (1)
1-1: Consistent HTML5 doctype casing.Looks good as a formatting-only normalization.
public/example_templates/netjsongraph-multipleLinks.html (1)
1-1: Consistent HTML5 doctype casing.No functional changes here—LGTM.
public/example_templates/netjsonmap-nodeTiles.html (1)
1-1: Consistent HTML5 doctype casing.Formatting-only update looks fine.
public/example_templates/netjsonmap-appendData2.html (1)
1-1: Consistent HTML5 doctype casing.No concerns with this formatting change.
public/example_templates/netjsongraph.html (1)
1-1: Consistent HTML5 doctype casing.LGTM as a style-only normalization.
public/example_templates/netjson-switchGraphMode.html (1)
1-1: Consistent HTML5 doctype casing.No issues here.
public/example_templates/netjson-multipleInterfaces.html (1)
1-1: LGTM!The lowercase
<!doctype html>is valid HTML5 and aligns with Prettier's default formatting. This standardization across template files is appropriate.public/example_templates/netjson-dateParse.html (1)
1-1: LGTM!Doctype casing normalization consistent with repository-wide Prettier formatting standards.
public/example_templates/netjsonmap-animation.html (1)
1-1: LGTM!Doctype casing normalization aligns with Prettier's HTML formatting defaults.
public/example_templates/netjsonmap-multipleTiles.html (1)
1-1: LGTM!Consistent doctype casing normalization applied across template files.
public/example_templates/netjsongraph-nodeExpand.html (1)
1-1: LGTM!Doctype formatting normalized to match Prettier's HTML output standards.
public/example_templates/netjsongraph-graphGL.html (1)
1-1: LGTM!Consistent doctype casing normalization completes the HTML template formatting standardization.
public/example_templates/netjson-switchRenderMode.html (1)
1-1: Doctype normalization looks good.public/example_templates/netjson-clustering.html (1)
73-95: Formatting-only update is fine.public/example_templates/netjsonmap.html (1)
1-1: Doctype normalization looks good.public/example_templates/netjsonmap-indoormap.html (1)
1-1: Doctype normalization looks good.public/example_templates/njg-geojson.html (1)
1-1: Doctype normalization looks good.run-qa-checks (1)
7-8: No changes needed — prettier is available on PATH in CI.The CI workflow (
ci.yml) explicitly installs prettier globally viasudo npm install -g prettierbefore running./run-qa-checks, ensuring prettier is on the PATH. The script executes as designed in its intended environment.Likely an incorrect or invalid review comment.
public/example_templates/netjsonmap-appendData.html (1)
1-1: Lowercase doctype is fine.No functional impact; consistent formatting is good.
package.json (1)
18-25: Lint-staged HTML formatting looks good.Adds consistent Prettier coverage for example templates.
public/example_templates/netjsongraph-wifi-clients.html (4)
1-1: Consistent doctype casing looks good.
10-20: CSS formatting is clean and readable.
72-91: Legend markup expansion is clear and maintainable.
104-120: Graph config formatting is tidy and consistent.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
# Conflicts: # public/example_templates/netjson-clustering.html
e991e75 to
ac56511
Compare
Checklist
Description of Changes
The example files are not getting automatically checked by
prettier, there were not only indentation errors but also 1 missing HTML closing tag. I made sure examples are automatically checked during QA checks.