Fix Verilog UI resize bugs: preservation, visibility, and console errors

[Me-Priyank]

Fixes #880

Describe the changes you have made in this PR -

This PR resolves critical issues related to the Verilog UI instability during window resizing. Specifically, it fixes:

1. Code Loss: The Verilog editor panel previously disappeared and lost its state (unsaved code) when switching between desktop and mobile layouts. This was fixed by changing v-if to v-show and removing duplicate DOM IDs.
2. Unwanted Panels: Standard circuit panels (Elements, Timing Diagram) incorrectly reappeared in Verilog mode after resizing. This was addressed by adding explicit visibility conditions (!isVerilog).
3. Console Errors: Fixed Uncaught TypeError: Cannot read properties of null errors caused by the timing diagram render loop accessing an unmounted canvas. Added null checks in plotArea.js.
4. Vue Warnings: Resolved "Runtime directive used on component with non-element root node" warnings by wrapping VerilogEditorPanel in a single root element.
5. V1 Consistency: Applied all fixes to both the legacy src and the v1 codebase.

Screenshots of the UI changes (If any) -

fix.mp4

---

Code Understanding and AI Usage

Did you use AI assistance (ChatGPT, Claude, Copilot, etc.) to write any part of this code?

• No, I wrote all the code myself
• Yes, I used AI assistance (continue below)

If you used AI assistance:

• I have reviewed every single line of the AI-generated code
• I can explain the purpose and logic of each function/component I added
• I have tested edge cases and understand how the code handles them
• I have modified the AI output to follow this project's coding standards and conventions

Explain your implementation approach:

• Problem: The core issue was v-if destroying the editor component on resize (losing state) and the render loop trying to draw on a non-existent canvas.
• Solution: I switched to v-show to toggle visibility via CSS instead of unmounting the component, preserving the CodeMirror instance. I also added defensive programming (null checks) in the plotArea.js to handle the lifecycle differences gracefully. I used Vue's reactive store (simulatorMobileStore.isVerilog) to manage panel visibility declaratively rather than relying on brittle DOM manipulation.

---

Checklist before requesting a review

• I have added proper PR title and linked to the issue
• I have performed a self-review of my code
• I can explain the purpose of every function, class, and logic block I added
• I understand why my changes work and have tested them thoroughly
• I have considered potential edge cases and how my code handles them
• If it is a core feature, I have added thorough tests
• My code follows the project's style guidelines and conventions

---

Note: Please check Allow edits from maintainers if you would like us to assist in the PR.

Summary by CodeRabbit

• New Features

  • Added an interactive terminal to the Verilog editor.

• Bug Fixes

  • Improved canvas initialization and guards to prevent rendering/timer issues.
  • Ensured plot area is initialized when the timing diagram mounts.

• Refactor

  • Reorganized Verilog editor layout and consolidated theme controls for clearer UI.
  • Adjusted panel visibility logic to better handle mobile and Verilog modes, and removed a legacy inline code window.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	8821e02
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/6979096334916800072bc613
😎 Deploy Preview	https://deploy-preview-881--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 43 (🔴 down 1 from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Caution

Review failed

The head commit changed during the review from 11edd9c to 8821e02.

Walkthrough

• Adjusted panel visibility for Verilog mode and mobile/desktop transitions in Extra.vue (both src/ and v1/): Elements and Timing Diagram panels are hidden in Verilog; Verilog editor and TestBench switch to v-show to prevent unmounting; removed inline code-window block in src/.
• Reorganized VerilogEditorPanel (both src/ and v1/): wrapped content in a new container, repositioned theme controls into a dedicated section, updated a translation key, and integrated VerilogTerminal at the end.
• Added null guards in plotArea.js (both src/ and v1/) to safely handle missing canvas during Verilog mode or unmount scenarios; minor formatting changes.

Possibly related PRs

• feat: Added verilog terminal #640: Integrates VerilogTerminal and restructures VerilogEditorPanel, touching the same components and UI sections.
• feat(gsoc'24): Mobile view Implementation for vue simulator #361: Modifies Extra.vue and VerilogEditorPanel with visibility and layout changes for mobile/Verilog modes.

Suggested labels

GSOC'24

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately summarizes the main changes: fixing Verilog UI resize bugs related to preservation of code state, panel visibility, and console errors.
Linked Issues check	✅ Passed	All coding requirements from issue #880 are met: code preservation via v-show instead of v-if, hidden panels in Verilog mode via !isVerilog conditions, and null guards in plotArea.js to prevent canvas access errors.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the Verilog UI resize bugs. Layout reorganizations in VerilogEditorPanel are necessary to resolve Vue directive warnings and structure requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

src/simulator/src/plotArea.js (1)

444-459: Reinitialize the 2D context after re-acquiring the canvas.

plot() reassigns this.canvas but keeps the old ctx. If the old canvas was unmounted (or setup returned early), render() can draw to a stale/undefined context, yielding a blank diagram or errors. Recreate ctx when the canvas changes.

🛠️ Suggested fix

     plot() {
         // Check if canvas is available (may be unmounted in Verilog mode)
         if (!this.canvas) {
             this.canvas = document.getElementById('plotArea')
         }
         if (!this.canvas) return
+        if (!embed && (!this.ctx || this.ctx.canvas !== this.canvas)) {
+            this.ctx = this.canvas.getContext('2d')
+        }

v1/src/simulator/src/plotArea.js (1)

444-459: Reinitialize the 2D context after re-acquiring the canvas.

plot() reassigns this.canvas but keeps the old ctx. If the old canvas was unmounted (or setup returned early), render() can draw to a stale/undefined context, yielding a blank diagram or errors. Recreate ctx when the canvas changes.

🛠️ Suggested fix

     plot() {
         // Check if canvas is available (may be unmounted in Verilog mode)
         if (!this.canvas) {
             this.canvas = document.getElementById('plotArea')
         }
         if (!this.canvas) return
+        if (!embed && (!this.ctx || this.ctx.canvas !== this.canvas)) {
+            this.ctx = this.canvas.getContext('2d')
+        }

v1/src/components/Extra.vue (1)

31-47: Correct verilogOutput duplicate ID in mobile Verilog mode.

Both VerilogEditorPanel (v-show active when isVerilog is true) and VerilogEditorPanelMobile (v-if renders when showMobileView && showVerilogPanel) can render simultaneously in mobile+Verilog mode, creating a duplicate verilogOutput ID. The Verilog2CV.js code uses document.getElementById('verilogOutput') to display compiler output with styling, but this will target only the first occurrence, breaking output display for one of the panels. Either prevent simultaneous rendering by adding !simulatorMobileStore.showVerilogPanel to VerilogEditorPanel's v-show condition, or give each panel a unique verilogOutput ID.

🤖 Fix all issues with AI agents

In `@src/simulator/src/plotArea.js`:
- Around line 163-167: The plotArea.setup() early-return leaves the render
interval unstarted when the canvas is absent; ensure setup is re-invoked when
the TimingDiagramPanel remounts by calling plotArea.setup() (or
plotArea.resetup() if you already have that helper) from
TimingDiagramPanel.onMounted() or by triggering resetup when
simulatorMobileStore.isVerilog flips back to false; update the component mount
logic to call plotArea.setup()/resetup() so the interval that drives plot() is
created after the canvas is available.

[Me-Priyank]

@tachyons @Nihal4777 kindly review

[Me-Priyank]

@Nihal4777 can you please review