feat(quantum): Q-Share Phase D — P2P sharing notebook + web Results/Backends tabs#25
Merged
Conversation
…ackends tabs - notebooks/05_p2p_fabric_sharing.ipynb — end-to-end demo: run a library circuit on Qiskit Aer -> QuantumResult (lres:), describe the backend (lqpu:), node A publishes all three by CID (relay-optional), node B pulls by CID and verifies bit-identical content, then queries across kinds. Closes with the true-P2P fabric path via knitweb.quantum. Non-Qiskit logic verified against the package. - web/index.html — add a Circuits | Results | Backends tab switcher to the circuit browser. Results tab shows measurement histograms with provenance CIDs; Backends tab shows QPU/simulator capability cards (aer, ibm_kyiv, ionq_aria, quantinuum_h2). Domain chips + search scope to the active tab; a note explains a live node streams real results/backends from the relay. All values escaped. Completes the Q-Share plan (P2P sharing of quantum circuits, results & systems). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reviewer's GuideImplements the final Q-Share Phase D by adding a Colab-ready notebook that demonstrates P2P sharing of circuits, results, and backend descriptors, and by extending the web UI with Circuits/Results/Backends tabs, histogram/result cards, backend capability cards, and tab-aware search/domain chips, all wired through new client-side rendering logic. Sequence diagram for the P2P sharing notebook circuit/result/backend flowsequenceDiagram
actor User
participant NodeA
participant StoreA as Store(node_a)
participant Relay
participant NodeB
participant StoreB as Store(node_b)
User->>NodeA: library()['bell_phi_plus']
NodeA-->>User: QuantumCircuit(circ) with circ.cid (lcid:)
User->>NodeA: QuantumResult(circuit_cid=cid, counts, author)
User->>NodeA: BackendDescriptor(name='aer_simulator', ...)
User->>StoreA: Store(root, relay)
User->>StoreA: put(circ)
StoreA-->>Relay: put(circ) (if relay configured)
User->>StoreA: put(backend)
User->>StoreA: put(result)
StoreA-->>User: list()
User->>StoreB: Store(root or node_a.root, relay)
User->>StoreB: get(circ.cid)
User->>StoreB: get(result.cid)
User->>StoreB: get(backend.cid)
StoreB-->>User: QuantumCircuit(got_circuit)
StoreB-->>User: QuantumResult(got_result)
StoreB-->>User: BackendDescriptor(got_backend)
User->>User: assert got_circuit.cid == circ.cid
User->>User: assert got_result.cid == result.cid
User->>User: assert got_backend.cid == backend.cid
User->>StoreB: list(kind='result') / list(kind='backend')
User->>StoreB: find(query='aer', kind='backend')
Sequence diagram for the web tab switching and rendering of circuits/results/backendssequenceDiagram
actor User
participant Browser
participant setTab
participant renderCircuits
participant renderResults
participant renderBackends
User->>Browser: click Circuits tab
Browser->>setTab: setTab('circuits', button)
setTab->>Browser: update domain-row, search placeholder, tab-note
setTab->>renderCircuits: render()
renderCircuits-->>Browser: update count, grid with CIRCUITS
User->>Browser: click Results tab
Browser->>setTab: setTab('results', button)
setTab->>Browser: hide domain-row, set placeholder "Search results…", show tab-note
setTab->>renderResults: render()
renderResults-->>Browser: update count, grid with RESULTS (histograms)
User->>Browser: click Backends tab
Browser->>setTab: setTab('backends', button)
setTab->>Browser: hide domain-row, set placeholder "Search backends…", show tab-note
setTab->>renderBackends: render()
renderBackends-->>Browser: update count, grid with BACKENDS (capability cards)
User->>Browser: type in search input
Browser->>renderCircuits: render() [if _tab==='circuits']
Browser->>renderResults: render() [if _tab==='results']
Browser->>renderBackends: render() [if _tab==='backends']
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 4 issues, and left some high level feedback:
- In
renderResults, the search filter lowercasesqbut compares it tor.circuitwithout lowercasing, which makes circuit-name matching case-sensitive and inconsistent with backend matching; consider normalizingr.circuitas well. - Similarly, in
renderBackends, the search usesb.gates.join(' ').includes(q)whileqis lowercased andgatesare not, so gate-name filtering will be case-sensitive; normalizing gate strings (e.g..toLowerCase()) would make search behavior consistent. - The tabs and domain chips rely on inline
onclickhandlers; moving these toaddEventListener-based bindings would keep behavior and presentation separated and make future JS refactoring easier.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `renderResults`, the search filter lowercases `q` but compares it to `r.circuit` without lowercasing, which makes circuit-name matching case-sensitive and inconsistent with backend matching; consider normalizing `r.circuit` as well.
- Similarly, in `renderBackends`, the search uses `b.gates.join(' ').includes(q)` while `q` is lowercased and `gates` are not, so gate-name filtering will be case-sensitive; normalizing gate strings (e.g. `.toLowerCase()`) would make search behavior consistent.
- The tabs and domain chips rely on inline `onclick` handlers; moving these to `addEventListener`-based bindings would keep behavior and presentation separated and make future JS refactoring easier.
## Individual Comments
### Comment 1
<location path="web/index.html" line_range="83" />
<code_context>
+ .tab{background:transparent;border:1px solid var(--border);border-bottom:none;
+ border-radius:8px 8px 0 0;color:var(--muted);cursor:pointer;font:inherit;font-size:12px;padding:8px 16px}
+ .tab:hover{color:var(--text)}
+ .tab.active{color:var(--accent);border-color:var(--accent)55;background:var(--accent)0d}
+ .hist{display:flex;flex-direction:column;gap:3px;margin-top:10px}
+ .hist-row{display:flex;align-items:center;gap:8px;font-size:10px}
</code_context>
<issue_to_address>
**issue (bug_risk):** Alpha suffixes on CSS color variables are invalid and will be ignored by the browser.
Values like `var(--accent)55` and `var(--accent)0d` are not valid CSS colors, so `border-color` and `background` won’t apply. If you need transparency, use `rgba()` or define separate variables (e.g. `--accent-border`, `--accent-bg`) with full color values such as `#58a6ff55`. The same issue applies to the pill styles (`var(--green)18`, `var(--green)44`, `var(--orange)18`, `var(--orange)44`).
</issue_to_address>
### Comment 2
<location path="web/index.html" line_range="383-385" />
<code_context>
});
}
+function renderResults() {
+ const q = document.getElementById('search').value.toLowerCase();
+ const rows = RESULTS.filter(r => !q || r.circuit.includes(q) || r.backend.toLowerCase().includes(q));
+ document.getElementById('count').textContent = `${rows.length} result${rows.length===1?'':'s'}`;
+ const grid = document.getElementById('grid');
</code_context>
<issue_to_address>
**issue (bug_risk):** Search in `renderResults` mixes lowercased query with a case-sensitive circuit name comparison.
The query is lower-cased, but only `r.backend` is compared case-insensitively; `r.circuit.includes(q)` stays case-sensitive. For consistent search behavior, also lower-case `r.circuit`, e.g. `r.circuit.toLowerCase().includes(q)`.
</issue_to_address>
### Comment 3
<location path="web/index.html" line_range="409-410" />
<code_context>
+ });
+}
+
+function renderBackends() {
+ const q = document.getElementById('search').value.toLowerCase();
+ const rows = BACKENDS.filter(b => !q || b.name.toLowerCase().includes(q)
+ || b.provider.toLowerCase().includes(q) || b.gates.join(' ').includes(q));
+ document.getElementById('count').textContent = `${rows.length} backend${rows.length===1?'':'s'}`;
</code_context>
<issue_to_address>
**suggestion:** Search in `renderBackends` treats gate names case-sensitively while other fields are case-insensitive.
`b.name` and `b.provider` are compared in lower case, but `b.gates.join(' ').includes(q)` is not, so gate matching is case-sensitive. Consider normalizing the gates string with `.toLowerCase()` before `includes(q)` to keep search behavior consistent.
```suggestion
const rows = BACKENDS.filter(b => !q || b.name.toLowerCase().includes(q)
|| b.provider.toLowerCase().includes(q) || b.gates.join(' ').toLowerCase().includes(q));
```
</issue_to_address>
### Comment 4
<location path="web/index.html" line_range="91-92" />
<code_context>
+ .hist-row .n{color:var(--muted);width:44px}
+ .kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin-top:8px;font-size:11px}
+ .kv .k{color:var(--muted)} .kv .v{color:var(--text);word-break:break-all}
+ .pill-sim{font-size:9px;padding:1px 6px;border-radius:3px;background:var(--green)18;border:1px solid var(--green)44;color:var(--green)}
+ .pill-hw{font-size:9px;padding:1px 6px;border-radius:3px;background:var(--orange)18;border:1px solid var(--orange)44;color:var(--orange)}
</style>
</head>
</code_context>
<issue_to_address>
**issue (bug_risk):** Pill background/border colors reuse the same invalid color pattern as the active tab styles.
These `background` and `border` values (`var(--green)18`, `var(--green)44`, and the orange equivalents) are not valid CSS colors, so browsers will ignore them and the pills won’t display as intended. Please replace them with valid color tokens (e.g., dedicated `--pill-sim-bg` / `--pill-sim-border` variables using proper hex or rgba values).
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| .tab{background:transparent;border:1px solid var(--border);border-bottom:none; | ||
| border-radius:8px 8px 0 0;color:var(--muted);cursor:pointer;font:inherit;font-size:12px;padding:8px 16px} | ||
| .tab:hover{color:var(--text)} | ||
| .tab.active{color:var(--accent);border-color:var(--accent)55;background:var(--accent)0d} |
There was a problem hiding this comment.
issue (bug_risk): Alpha suffixes on CSS color variables are invalid and will be ignored by the browser.
Values like var(--accent)55 and var(--accent)0d are not valid CSS colors, so border-color and background won’t apply. If you need transparency, use rgba() or define separate variables (e.g. --accent-border, --accent-bg) with full color values such as #58a6ff55. The same issue applies to the pill styles (var(--green)18, var(--green)44, var(--orange)18, var(--orange)44).
Comment on lines
+383
to
+385
| function renderResults() { | ||
| const q = document.getElementById('search').value.toLowerCase(); | ||
| const rows = RESULTS.filter(r => !q || r.circuit.includes(q) || r.backend.toLowerCase().includes(q)); |
There was a problem hiding this comment.
issue (bug_risk): Search in renderResults mixes lowercased query with a case-sensitive circuit name comparison.
The query is lower-cased, but only r.backend is compared case-insensitively; r.circuit.includes(q) stays case-sensitive. For consistent search behavior, also lower-case r.circuit, e.g. r.circuit.toLowerCase().includes(q).
Comment on lines
+409
to
+410
| const rows = BACKENDS.filter(b => !q || b.name.toLowerCase().includes(q) | ||
| || b.provider.toLowerCase().includes(q) || b.gates.join(' ').includes(q)); |
There was a problem hiding this comment.
suggestion: Search in renderBackends treats gate names case-sensitively while other fields are case-insensitive.
b.name and b.provider are compared in lower case, but b.gates.join(' ').includes(q) is not, so gate matching is case-sensitive. Consider normalizing the gates string with .toLowerCase() before includes(q) to keep search behavior consistent.
Suggested change
| const rows = BACKENDS.filter(b => !q || b.name.toLowerCase().includes(q) | |
| || b.provider.toLowerCase().includes(q) || b.gates.join(' ').includes(q)); | |
| const rows = BACKENDS.filter(b => !q || b.name.toLowerCase().includes(q) | |
| || b.provider.toLowerCase().includes(q) || b.gates.join(' ').toLowerCase().includes(q)); |
Comment on lines
+91
to
+92
| .pill-sim{font-size:9px;padding:1px 6px;border-radius:3px;background:var(--green)18;border:1px solid var(--green)44;color:var(--green)} | ||
| .pill-hw{font-size:9px;padding:1px 6px;border-radius:3px;background:var(--orange)18;border:1px solid var(--orange)44;color:var(--orange)} |
There was a problem hiding this comment.
issue (bug_risk): Pill background/border colors reuse the same invalid color pattern as the active tab styles.
These background and border values (var(--green)18, var(--green)44, and the orange equivalents) are not valid CSS colors, so browsers will ignore them and the pills won’t display as intended. Please replace them with valid color tokens (e.g., dedicated --pill-sim-bg / --pill-sim-border variables using proper hex or rgba values).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Q-Share Phase D (final phase) — make the three-kind artifact model tangible for users.
Notebook
notebooks/05_p2p_fabric_sharing.ipynb— end-to-end, runnable in Colab:lcid:QuantumResult(lres:) linking back to the circuitBackendDescriptor(lqpu:)knitweb.quantum(pulse)Non-Qiskit logic verified against the package end-to-end.
Web
web/index.htmlgains a Circuits | Results | Backends tab switcher:Test plan
knitweb_lens.quantumweb/index.htmlJS syntax-checked (node --check), div/script balanced, all CSS vars definedtests/quantum/unaffectedCompletes the Q-Share plan. 🎉
🤖 Generated with Claude Code
Summary by Sourcery
Introduce P2P quantum artifact sharing notebook and extend the web lens UI with circuits/results/backends browsing.
New Features:
Enhancements: