Interactive circuit schematic for Qiskit Metal

[quantum-quant]

Description

When you want to show or understand an electrical circuit diagram, is it your instinct to sketch it out or write lines of code to generate it? The former is probably your answer. Of course, programmatically generating a circuit schematic is highly efficient and necessary at times but drawing a circuit schematic node by node, branch by branch, is most likely what you are used to, whether it's for learning in the classroom or discussions in the lab. Such instinctual and hands-on way of constructing a circuit has its immense value in teaching, learning, researching new ideas and beyond.

So what if we have an app that allows users to draw the equivalent circuit models of their desired quantum devices by drag-n-drop fundamental circuit elements, such as capacitors, inductors, Josephson junctions etc, customize their values, and ultimately get useful data/visualizations about the Hamiltonian of the constructed quantum circuit? This is the your chance to help make this come to life!

Mentor/s

Yehan Liu (@quantum-quant), Qiskit Metal developer

Type of participant

Proficient front-end web developer: JavaScript, React, CSS (Bootstrap), HTML; Experience/familiarity with python

Number of participants

1 or 2

Deliverable

A web app where users can interactively build their quantum circuits and get results about the corresponding Hamiltonian dynamically. Frontend built with JavaScript/React; backend powered by Qiskit Metal

[bicycle315]

I used qiskit metal a lot to design my circuit. I think it's a really good idea to have an app helping us to more intuitively and conveniently understand the circuit! I am really interested in subject related to qiskit metal but i am not a frontend web developer. Is there any chance that i can still participate in this project and contribute to metal?

[HuangJunye]

@hjk068 @smidgecoo Can you please comment in the issue so that I can assign you?

[hjk068]

@HuangJunye Thank you!

[smmchugh-08]

Yes @HuangJunye, thank you for the notification

[HuangJunye]

Can you please upload your presentation here by the end of today? Thank you! @hjk068 @SmidgeCoo

[hjk068]

Second ppt file for #15 Presentation in Checkpoint 1 #15 Interactive Circuit Schematic for Qiskit Metal - 2.pdf

[smmchugh-08]

Checkpoint 2 (with @hjk068):

The basic front-end of the application is in place, allowing a user to drag-and-drop three components - capacitor, inductor, and ground - onto the canvas and draw the connections between them. Multiples of any of the three components can be created. Support for Josephson junctions and subsystems is in progress, as well as adding pictorial representations of the components.

There is also a function that will process the visual representation of the circuit into a JSON object that contains the connections between and values of the components in the circuit, in a format that is ready to be sent to Qiskit Metal to process for simulation. After checkpoint 1, this graph conversion function was improved so that it can now convert cyclic circuits into graphs. Bugs regarding some edge cases were resolved as well. However it should still be tested with more complex circuits and be converted into Javascript so that it can be integrated into frontend. The visual representation still needs to be converted to a form that matches the expected input of the function, since it currently exists as two separate arrays for the components and the edges respectively, with no distinction for what each component actually is (as in, whether it's a capacitor, inductor, etc).

[hjk068]

Hyun Jin Kim - Final checkpoint powerpoint (will upload recording instead of presenting on Dec 9th)

Graph_Conversion_Final_Checkpoint.pptx