Add path visualizer JS files #201
Conversation
theRoughCode
requested review from
anpaz,
cgranade,
ricardo-espinoza and
rmshaffer
src/Kernel/client/ExecutionPathVisualizer/formatters/gateFormatter.ts
Outdated
Show resolved
Hide resolved
src/Kernel/client/ExecutionPathVisualizer/formatters/gateFormatter.ts
Outdated
Show resolved
Hide resolved
| <!-- Gate outline --> | ||
| .cls-control-one rect, | ||
| .cls-control-one line, | ||
| .cls-control-one circle { | ||
| stroke: #4059bd; | ||
| stroke-width: 1.3; | ||
| } | ||
| .cls-control-zero rect, | ||
| .cls-control-zero line, | ||
| .cls-control-zero circle { | ||
| stroke: #c40000; | ||
| stroke-width: 1.3; | ||
| } | ||
| <!-- Gate label --> | ||
| .cls-control-one text { | ||
| fill: #4059bd; | ||
| } | ||
| .cls-control-zero text { | ||
| fill: #c40000; | ||
| } | ||
| <!-- Control button --> | ||
| .cls-control-btn { | ||
| cursor: pointer; | ||
| } | ||
| .cls-control-unknown .cls-control-btn { | ||
| fill: #e5e5e5; | ||
| } | ||
| .cls-control-one .cls-control-btn { | ||
| fill: #4059bd; | ||
| } | ||
| .cls-control-zero .cls-control-btn { | ||
| fill: #c40000; | ||
| } | ||
| <!-- Control button text --> | ||
| .cls-control-unknown .cls-control-text { | ||
| fill: black; | ||
| stroke: none; | ||
| } | ||
| .cls-control-one .cls-control-text, | ||
| .cls-control-zero .cls-control-text { | ||
| fill: white; | ||
| stroke: none; | ||
| } |
There was a problem hiding this comment.
Do you know how these colors behave under different system settings, e.g. high contrast mode?
There was a problem hiding this comment.
Not really, what are the normal procedures for adding colours in?
There was a problem hiding this comment.
I'm not aware of any place in IQ# where we are specifying colors in this way; you may be breaking new ground. 😊 You could try it out quickly by just turning on High Contrast mode (in Windows 10, if you click Start and type "High Contrast" it should take you there). Basically we just want to make sure that accessibility settings like High Contrast are respected by our features. I am guessing that the browser will do approximately the right thing here, but it's worth testing.
There was a problem hiding this comment.
I'd also suggest using Edge / Chrome extensions to simulate common forms of colorblindness can help with accessibility as well.
There was a problem hiding this comment.
Thanks for the feedback! I installed a chrome extension called "Colorblinding" (couldn't find an edge one) and the only case where the colours between "true" and "false" were not differentiable was with the "monochromatic" setting.
I also tried turning on high contrast with white background and the colours were differentiable.
* Add path visualizer JS files (#201) * Add JS tests for ExecutionPathVisualizer (#205) * Add test for operations with no qubits (#217) * Add `ExecutionPathTracer` to repo. (#195) * Add ExecutionPathTracer to repo * Add WithExecutionPathTracer extension method to SimulatorBase * Respond to PR feedback * Use GetRuntimeMetadata * Remove ApplyToEach * Add tests * Use Newtonsoft instead of System.Text.Json * Rename ArgStr to DisplayArgs * Clean up code * Fix typo in tsconfig * Fix tests * Add trace magic command (#209) * Add view magic command * Rename ExecutionPathEncoder to DisplayableHtmlEncoder * Add documentation to view command * Rename %view to %trace * Fix JSON parsing * Add TraceMagic test * Add flag for depth * Fix nested test * Empty commit to trigger CI * Empty commit to trigger CI * Wrap DisplayArgs in parentheses (#225) * Change depth flag to --depth * Add parentheses around DisplayArgs if it doesn't have it * Trigger CI rebuild * Fix depth bug and render all ops at or above desired depth (#226) * Bump qsharp-runtime version and add tests for operations as args (#227) * Add tests for operations with operations as arguments * Build 0.12.2007.2301. Co-authored-by: Project Collection Build Service (ms-quantum) <> * Implement `IsMeasurement` flag for execution path operations (#230) * Implement isMeasurement flag for execution path operations * Rename 'controlled' and 'adjoint' to 'isControlled' and 'isAdjoint' * Allow default depth for %trace to be set in %config (#229) * Allow default depth for %trace to be set in %config * Fix config magic description * Add composite operation handling (#219) * Add composite operation handling * Add ForEach tests * Add Canon.qs to Tests.IQSharp.csproj * Build 0.12.2007.2412. * Fix ResetAll tests * Fix tests to allow using Microsoft.Quantum.Canon * Add newline * Build 0.12.2007.3008. * Reformat ExecutionPathTracer stylistically * Fix iqsharp.sln * Empty commit to retrigger CI * Remove dotnet test args * Fix broken build * Fix TraceMagic test * Fix broken build tests Co-authored-by: Project Collection Build Service (ms-quantum) <> * Add syntax highlighting for %trace and %lsopen commands (#240) * Add syntax highlighting for %trace command * Fix ordering and add lsopen
This PR addresses the second out of 3 components (Simulator, JavaScript renderer, magic command) required to implement #158 .
This PR moves the files for the JS execution path visualizer from ADO into iqsharp (feature branch
feature/path_visualizer).Jest test files will be added as a separate PR.