Skip to content

fix: remove gauge active state and page-level analysis from plugin (#177) #178

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

Merged
let-sunny merged 1 commit into from
Mar 29, 2026
Merged

fix: remove gauge active state and page-level analysis from plugin (#177) #178

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
44 changes: 0 additions & 44 deletions app/figma-plugin/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,50 +452,6 @@ figma.ui.onmessage = async (msg: { type: string }) => {
});
}

if (msg.type === "analyze-page") {
const page = figma.currentPage;
const children = page.children;

if (children.length === 0) {
figma.ui.postMessage({
type: "error",
message: "Current page is empty.",
});
return;
}

// Wrap page children into a virtual FRAME document node
const allChildren: AnalysisNode[] = [];
let totalNodes = 0;

for (const child of children) {
totalNodes += countNodes(child as unknown as { children?: readonly unknown[] });
allChildren.push(await transformPluginNode(child));
}

const file: AnalysisFile = {
fileKey: figma.fileKey ?? "plugin-local",
name: page.name,
lastModified: new Date().toISOString(),
version: "plugin",
document: {
id: page.id,
name: page.name,
type: "CANVAS",
visible: true,
children: allChildren,
},
components: {},
styles: {},
};

figma.ui.postMessage({
type: "result",
data: file,
nodeCount: totalNodes,
});
}

if (msg.type === "focus-node") {
const { nodeId } = msg as { type: string; nodeId: string };
const node = figma.getNodeByIdAsync(nodeId).then((n) => {
Expand Down
14 changes: 2 additions & 12 deletions app/figma-plugin/src/ui.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
<!-- Action buttons -->
<div class="btn-group">
<button class="btn btn-primary" id="btn-selection" onclick="analyzeSelection()">Analyze Selection</button>
<button class="btn" id="btn-page" onclick="analyzePage()">Analyze Page</button>
</div>

<!-- Error display -->
Expand All @@ -26,8 +25,7 @@
<!-- Empty state -->
<div id="empty-state" class="empty-state">
<h2>Ready to analyze</h2>
<p>Select a frame, component, or section in Figma, then click <strong>Analyze Selection</strong>.<br>
Or click <strong>Analyze Page</strong> to check the entire current page.</p>
<p>Select a frame, component, or section in Figma, then click <strong>Analyze Selection</strong>.</p>
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 29, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Align empty-state copy with supported analysis scope

Line 28 still mentions component, but the accepted scope in this PR is frame/section selection only. Please tighten the copy to avoid misleading users.

Suggested patch 
-      <p>Select a frame, component, or section in Figma, then click <strong>Analyze Selection</strong>.</p>
+      <p>Select a frame or section in Figma, then click <strong>Analyze Selection</strong>.</p>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p>Select a frame, component, or section in Figma, then click <strong>Analyze Selection</strong>.</p>
<p>Select a frame or section in Figma, then click <strong>Analyze Selection</strong>.</p>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/figma-plugin/src/ui.template.html` at line 28, Update the empty-state
paragraph copy that currently reads "Select a frame, component, or section in
Figma, then click Analyze Selection" to reflect the accepted scope
(frame/section only); locate the paragraph element containing that text in
ui.template.html and remove the word "component" so it reads something like
"Select a frame or section in Figma, then click Analyze Selection" to avoid
misleading users.

Copy link
Copy Markdown
Owner Author

@let-sunny let-sunny Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The analyze-selection handler still works on any selected node including components — components are valid analysis targets. This PR removes page-level analysis, not component selection. Keeping 'component' in the copy is accurate.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@let-sunny, you're right — my suggestion was incorrect. Since analyze-selection operates on any user-selected node (frames, components, sections, etc.) and this PR only removes page-level analysis, keeping "component" in the copy is accurate and appropriate. Sorry for the noise!

🧠 Learnings used 
Learnt from: let-sunny
Repo: let-sunny/canicode PR: 154
File: src/core/rules/structure/index.ts:296-304
Timestamp: 2026-03-29T00:24:13.455Z
Learning: In let-sunny/canicode, the `non-layout-container` rule in `src/core/rules/structure/index.ts` intentionally flags non-empty `SECTION` nodes (`children.length > 0`) because Figma `SECTION` is not a layout container by design — using it structurally with children is treated as semantic misuse. This predicate is considered sufficient and intentional; do not flag it as too broad.

</div>

<!-- Loading -->
Expand Down Expand Up @@ -102,19 +100,13 @@ <h2>Ready to analyze</h2>
parent.postMessage({ pluginMessage: { type: 'analyze-selection' } }, '*');
}

function analyzePage() {
showLoading();
parent.postMessage({ pluginMessage: { type: 'analyze-page' } }, '*');
}

function showLoading() {
document.getElementById('empty-state').style.display = 'none';
document.getElementById('results').className = '';
document.getElementById('footer').style.display = 'none';
document.getElementById('loading').style.display = 'block';
document.getElementById('error').style.display = 'none';
document.getElementById('btn-selection').disabled = true;
document.getElementById('btn-page').disabled = true;
}

function showError(msg) {
Expand All @@ -127,7 +119,6 @@ <h2>Ready to analyze</h2>
errEl.textContent = msg;
errEl.style.display = 'block';
document.getElementById('btn-selection').disabled = false;
document.getElementById('btn-page').disabled = false;
}

// ---- Render results via shared renderReportBody() ----
Expand Down Expand Up @@ -172,8 +163,7 @@ <h2>Ready to analyze</h2>

if (msg.type === 'result') {
document.getElementById('btn-selection').disabled = false;
document.getElementById('btn-page').disabled = false;


try {
var analysisStart = Date.now();
var file = msg.data;
Expand Down
7 changes: 0 additions & 7 deletions app/shared/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,13 +338,6 @@ body {
text-align: center;
}

/* ---- Gauge item active highlight ---- */
.rpt-gauge-item.active {
opacity: 1;
background: rgba(0,0,0,0.04);
border-radius: var(--radius);
}

/* ---- Score badge ---- */
.rpt-badge {
display: inline-flex;
Expand Down
7 changes: 2 additions & 5 deletions src/core/report-html/render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@ export function renderReportBody(data: ReportData): string {
<!-- Category Gauges -->
<section class="card rpt-gauges">
<div class="rpt-gauges-grid">
${CATEGORIES.map((cat, i) => {
${CATEGORIES.map((cat) => {
const cs = scores.byCategory[cat];
return ` <button type="button" class="rpt-gauge-item${i === 0 ? " active" : ""}" data-tab="${cat}">
return ` <button type="button" class="rpt-gauge-item" data-tab="${cat}">
${renderGaugeSvg(cs.percentage, 100, 7)}
<span class="rpt-gauge-label">${CATEGORY_LABELS[cat]}</span>
<span class="rpt-gauge-count">${cs.issueCount} issues</span>
Expand Down Expand Up @@ -252,9 +252,6 @@ export function initReportInteractions(container: any): void {
container.querySelectorAll(".rpt-tab-panel").forEach((p: any) => {
p.classList.toggle("active", p.dataset.panel === cat);
});
container.querySelectorAll(".rpt-gauge-item").forEach((g: any) => {
g.classList.toggle("active", g.dataset.tab === cat);
});
if (scrollTo) {
const tabList = container.querySelector(".rpt-tab-list");
if (tabList) tabList.scrollIntoView({ behavior: "smooth", block: "start" });
Expand Down
Loading