Repository: microsoft/quantum-viz.js (language: python)

Issue:
Sample circuit is incorrectly rendered
The sample circuit is incorrectly rendered such that the operation `Foo` is already expanded on first render. Furthermore, hovering over the group shows a + icon instead of -.

We should investigate this behaviour and fix it.

![image](https://user-images.githubusercontent.com/19257435/120241555-fcc63900-c230-11eb-88cc-90cb8868c8a0.png)



Discussion / hints:
This is a problem on how we keep track of what things are/should be expanded. 
On one side, we use the `GateType.Group` to decide if it should be rendered as a box, on the other hand we use the data-attribute 'expanded' to decided whether a to show the expanded/contracted icon. This should be simplified/consolidated.
Hi, I would like to give this a try if possible. Since I'm pretty new to contributing, where should I start?

Fix patch:
diff --git a/src/process.ts b/src/process.ts
index 8d0b914a..5c21f7f0 100644
--- a/src/process.ts
+++ b/src/process.ts
@@ -260,6 +260,9 @@ const _opToMetadata = (op: Operation | null, registers: RegisterMap): Metadata =
         const childrenInstrs = processOperations(children as Operation[], registers);
         metadata.type = GateType.Group;
         metadata.children = childrenInstrs.metadataList;
+        // _zoomButton function in gateFormatter.ts relies on
+        // 'expanded' attribute to render zoom button
+        metadata.dataAttributes = { expanded: 'true' };
         // Subtract startX (left-side) and add inner box padding (minus nested gate padding) for dashed box
         metadata.width = childrenInstrs.svgWidth - startX + (groupBoxPadding - gatePadding) * 2;
     } else if (isMeasurement) {
@@ -287,8 +290,8 @@ const _opToMetadata = (op: Operation | null, registers: RegisterMap): Metadata =
     // Set gate width
     metadata.width = getGateWidth(metadata);
 
-    // Set custom user-provided gate metadata
-    if (dataAttributes != null) metadata.dataAttributes = dataAttributes;
+    // Extend existing data attributes with user-provided data attributes
+    if (dataAttributes != null) metadata.dataAttributes = { ...metadata.dataAttributes, ...dataAttributes };
 
     return metadata;
 };


Test patch:
diff --git a/__tests__/process.test.ts b/__tests__/process.test.ts
index a3d08b40..5cd6b20c 100644
--- a/__tests__/process.test.ts
+++ b/__tests__/process.test.ts
@@ -1468,6 +1468,7 @@ describe('Testing _opToMetadata', () => {
             targetsY: [startY, startY + registerHeight],
             label: '',
             width: minGateWidth + groupBoxPadding * 2,
+            dataAttributes: { expanded: 'true' },
             children: [
                 {
                     type: GateType.X,
@@ -2365,6 +2366,7 @@ describe('Testing processOperations', () => {
             targetsY: [startY, startY + registerHeight],
             label: '',
             width: minGateWidth * 2 + gatePadding * 2 + groupBoxPadding * 2,
+            dataAttributes: { expanded: 'true' },
             children: [
                 {
                     type: GateType.X,
@@ -2463,6 +2465,7 @@ describe('Testing processOperations', () => {
             targetsY: [startY, startY + registerHeight],
             label: '',
             width: minGateWidth * 2 + gatePadding * 2 + groupBoxPadding * 4,
+            dataAttributes: { expanded: 'true' },
             children: [
                 {
                     type: GateType.Group,
@@ -2471,6 +2474,7 @@ describe('Testing processOperations', () => {
                     targetsY: [startY],
                     label: '',
                     width: minGateWidth * 2 + gatePadding * 2 + groupBoxPadding * 2,
+                    dataAttributes: { expanded: 'true' },
                     children: [
                         {
                             type: GateType.X,