Fix issues with circuit panel not refreshing properly (#1322)

Fixes issue where the Circuit panel will continue to display the
previous circuit, even after it's been updated with a new circuit that
fails to render.

Repro:
1. Generate circuit for a valid program, e.g. Entanglement.qs
2. Now generate circuit for a program that doesn't allocate any qubits,
e.g. Array.qs

![image](https://github.com/microsoft/qsharp/assets/16928427/299f68b1-d10d-4c4a-89cc-3486ed891eb1)


Also a small fix where we force the circuit panel to come to the
foreground when invoked through the code lens or at the beginning of a
debugging session.

Author: minestarks

npm/ux/circuit.tsx

@@ -13,6 +13,8 @@ const MAX_QUBITS = 1000;
 
 /* This component is shared by the Python widget and the VS Code panel */
 export function Circuit(props: { circuit: qviz.Circuit }) {
+  const circuitDiv = useRef<HTMLDivElement>(null);
+
   const errorDiv =
     props.circuit.qubits.length === 0 ? (
       <div>
@@ -42,13 +44,12 @@ export function Circuit(props: { circuit: qviz.Circuit }) {
       </div>
     ) : undefined;
 
-  if (errorDiv) {
-    return <div class=".qs-circuit-error">{errorDiv}</div>;
-  }
-
-  const circuitDiv = useRef<HTMLDivElement>(null);
-
   useEffect(() => {
+    if (errorDiv !== undefined) {
+      circuitDiv.current!.innerHTML = "";
+      return;
+    }
+
     qviz.draw(props.circuit, circuitDiv.current!);
 
     // quantum-viz hardcodes the styles in the SVG.
@@ -57,7 +58,12 @@ export function Circuit(props: { circuit: qviz.Circuit }) {
     styleElements?.forEach((tag) => tag.remove());
   }, [props.circuit]);
 
-  return <div class="qs-circuit" ref={circuitDiv}></div>;
+  return (
+    <div>
+      <div class="qs-circuit-error">{errorDiv}</div>
+      <div class="qs-circuit" ref={circuitDiv}></div>
+    </div>
+  );
 }
 
 /* This component is exclusive to the VS Code panel */

vscode/src/circuit.ts

@@ -65,6 +65,7 @@ export async function showCircuitCommand(
       targetProfile,
       editor.document.uri.path,
       circuit,
+      true, // reveal
       operation,
     );
 
@@ -95,6 +96,7 @@ export async function showCircuitCommand(
       targetProfile,
       editor.document.uri.path,
       errorHtml,
+      false, // reveal
       operation,
     );
   } finally {
@@ -107,6 +109,7 @@ export function updateCircuitPanel(
   targetProfile: string,
   docPath: string,
   circuitOrErrorHtml: CircuitData | string,
+  reveal: boolean,
   operation?: IOperationInfo | undefined,
 ) {
   let title;
@@ -128,7 +131,7 @@ export function updateCircuitPanel(
     errorHtml:
       typeof circuitOrErrorHtml === "string" ? circuitOrErrorHtml : undefined,
   };
-  sendMessageToPanel("circuit", false, message);
+  sendMessageToPanel("circuit", reveal, message);
 }
 
 /**

vscode/src/debugger/session.ts

@@ -72,6 +72,7 @@ export class QscDebugSession extends LoggingDebugSession {
   private eventTarget: QscEventTarget;
   private supportsVariableType = false;
   private targetProfile = getTarget();
+  private revealedCircuit = false;
 
   public constructor(
     private debugService: IDebugServiceWorker,
@@ -315,12 +316,7 @@ export class QscDebugSession extends LoggingDebugSession {
     }
 
     if (this.config.showCircuit) {
-      const circuit = await this.debugService.getCircuit();
-      updateCircuitPanel(
-        this.targetProfile,
-        vscode.Uri.parse(this.sources[0][0]).path,
-        circuit,
-      );
+      await this.showCircuit();
     }
 
     if (!result) {
@@ -816,19 +812,21 @@ export class QscDebugSession extends LoggingDebugSession {
           // This will get invoked when the "Quantum Circuit" scope is expanded
           // in the Variables view, but instead of showing any values in the variables
           // view, we can pop open the circuit diagram panel.
-          const circuit = await this.debugService.getCircuit();
-          updateCircuitPanel(
-            this.targetProfile,
-            vscode.Uri.parse(this.sources[0][0]).path,
-            circuit,
-          );
+          this.showCircuit();
+
           // Keep updating the circuit for the rest of this session, even if
           // the Variables scope gets collapsed by the user. If we don't do this,
           // the diagram won't get updated with each step even though the circuit
           // panel is still being shown, which is misleading.
           this.config.showCircuit = true;
           response.body = {
-            variables: [],
+            variables: [
+              {
+                name: "Circuit",
+                value: "See Q# Circuit panel",
+                variablesReference: 0,
+              },
+            ],
           };
         }
         break;
@@ -928,4 +926,18 @@ export class QscDebugSession extends LoggingDebugSession {
       log.trace(`Could not resolve path ${pathOrUri}`);
     }
   }
+
+  private async showCircuit() {
+    const circuit = await this.debugService.getCircuit();
+    updateCircuitPanel(
+      this.targetProfile,
+      vscode.Uri.parse(this.sources[0][0]).path,
+      circuit,
+      !this.revealedCircuit,
+    );
+
+    // Only reveal the panel once per session, to keep it from
+    // moving around while stepping
+    this.revealedCircuit = true;
+  }
 }