Add exponent to the labels of web 3D gates (#4777)

This pull request fixes the bug reported in #4761. The exponents of gates are not reflected in the labels of 3D circuits. This PR adds it using `CircuitDiagramInfo._wire_symbols_including_formatted_exponent`, which has been used in the generation of the text circuit diagrams.

Another problem raises after the exponents are added. The color of the `X` gate is chosen as black, and the label's color is also black. As a result, the label cannot be recognized. To solve this problem, I set the label's color according to the brightness of the gate color. If it is dark (e.g., in the case of black), white is picked for the label. The color parameter for `MeshBasicMaterial` has also to be changed to avoid shadowing the label.

After the modification, the test case used in the #4761
```
import cirq_web
a, b, c, d = cirq.GridQubit.rect(2, 2)
cirq_web.Circuit3D(cirq.Circuit(cirq.X(a)**0.5, cirq.Y(b)**0.5, cirq.X(c), cirq.Y(d))).generate_html_file(
    file_name="hello.html")
```
generates this circuit:

![image](https://user-images.githubusercontent.com/14125945/147078537-f668e05f-0fc0-419b-ab67-794ebe3b9527.png)

close #4761

cirq-web/cirq_ts/src/circuit/components/meshes.ts

@@ -27,6 +27,7 @@ import {
   DoubleSide,
   BoxGeometry,
   Group,
+  Color,
 } from 'three';
 
 /**
@@ -238,7 +239,8 @@ export class BoxGate3DSymbol extends Mesh {
       textWidth = context.measureText(label).width;
     } while (textWidth > canvas.width);
 
-    context.fillStyle = 'black';
+    const hsl = new Color(color).getHSL({h: 0, s: 0, l: 0});
+    context.fillStyle = hsl.l < 0.5 ? 'white' : 'black';
     context.fillText(
       label,
       canvas.width / 2 - textWidth / 2,
@@ -249,7 +251,7 @@ export class BoxGate3DSymbol extends Mesh {
     map.needsUpdate = true;
 
     const geometry = new BoxGeometry(0.5, 0.5, 0.5);
-    const material = new MeshBasicMaterial({map: map, color: color});
+    const material = new MeshBasicMaterial({map: map, color: 'white'});
 
     super(geometry, material);
     return this;

cirq-web/cirq_web/circuits/symbols.py

@@ -18,6 +18,7 @@
 import dataclasses
 from typing import Iterable, List, Optional
 import cirq
+from cirq.protocols.circuit_diagram_info_protocol import CircuitDiagramInfoArgs
 
 
 @dataclasses.dataclass
@@ -80,11 +81,15 @@ def resolve(self, operation: cirq.Operation) -> Optional[SymbolInfo]:
             operation: the cirq.Operation object to resolve
         """
         try:
-            wire_symbols = cirq.circuit_diagram_info(operation).wire_symbols
+            info = cirq.circuit_diagram_info(operation)
         except TypeError:
             return SymbolInfo.unknown_operation(cirq.num_qubits(operation))
 
-        symbol_info = SymbolInfo(list(wire_symbols), [])
+        wire_symbols = info.wire_symbols
+        symbol_exponent = info._wire_symbols_including_formatted_exponent(
+            CircuitDiagramInfoArgs.UNINFORMED_DEFAULT
+        )
+        symbol_info = SymbolInfo(list(symbol_exponent), [])
         for symbol in wire_symbols:
             symbol_info.colors.append(DefaultResolver._SYMBOL_COLORS.get(symbol, 'gray'))
 

cirq-web/cirq_web/circuits/symbols_test.py

@@ -63,6 +63,20 @@ def test_resolve_operation_hadamard():
     assert symbol_info.colors == expected_colors
 
 
+def test_resolve_operation_x_pow():
+    mock_qubit = cirq.NamedQubit('mock')
+    operation = cirq.X(mock_qubit) ** 0.5
+    symbol_info = cirq_web.circuits.symbols.resolve_operation(
+        operation, cirq_web.circuits.symbols.DEFAULT_SYMBOL_RESOLVERS
+    )
+
+    expected_labels = ['X^0.5']
+    expected_colors = ['black']
+
+    assert symbol_info.labels == expected_labels
+    assert symbol_info.colors == expected_colors
+
+
 @pytest.mark.parametrize(
     'custom_gate',
     [