microsoft/qdk
Publicmirrored from https://github.com/microsoft/qdkAvailable
source/npm/qsharp/ux/estimatesPanel.tsx
87lines · modecode
| 1 | // Copyright (c) Microsoft Corporation. |
| 2 | // Licensed under the MIT License. |
| 3 | |
| 4 | import { useState } from "preact/hooks"; |
| 5 | import { type ReData, SingleEstimateResult } from "./data.js"; |
| 6 | import { EstimatesOverview } from "./estimatesOverview.js"; |
| 7 | import { ReTable } from "./reTable.js"; |
| 8 | import { SpaceChart } from "./spaceChart.js"; |
| 9 | import { Spinner } from "./spinner.js"; |
| 10 | |
| 11 | export function EstimatesPanel(props: { |
| 12 | estimatesData: ReData[]; |
| 13 | colors: string[]; |
| 14 | runNames: string[]; |
| 15 | calculating: boolean; |
| 16 | onRowDeleted: (rowId: string) => void; |
| 17 | allowSaveImage?: boolean; |
| 18 | }) { |
| 19 | const [estimate, setEstimate] = useState<SingleEstimateResult | null>(null); |
| 20 | |
| 21 | return ( |
| 22 | <> |
| 23 | <div style="display:flex; height:64px; align-items: center; position: relative"> |
| 24 | <svg |
| 25 | width="48" |
| 26 | height="48" |
| 27 | viewBox="96 96 828 828" |
| 28 | xmlns="http://www.w3.org/2000/svg" |
| 29 | > |
| 30 | <g fill="none" stroke="gray" stroke-width="8"> |
| 31 | <path d="M 512 135 L 819 313 L 819 667 L 512 845 L 205 667 L 205 313 L 512 135 Z" /> |
| 32 | <path d="M 205 580 L 742 890 L 819 845 L 818 756 L 205 402" /> |
| 33 | <path d="M 204 579 L 743 268" /> |
| 34 | <path d="M 664 224 L 207 489" /> |
| 35 | <path d="M 206 400 L 588 180" /> |
| 36 | <path d="M 205 667 L 818 313" /> |
| 37 | <path d="M 205 490 L 820 845" /> |
| 38 | <path d="M 207 314 L 818 667" /> |
| 39 | <path d="M 282 269 L 820 580" /> |
| 40 | <path d="M 820 490 L 357 223" /> |
| 41 | <path d="M 435 180 L 818 400" /> |
| 42 | <path d="M 281 710 L 281 271" /> |
| 43 | <path d="M 357 755 L 357 223" /> |
| 44 | <path d="M 283 711 L 820 400" /> |
| 45 | <path d="M 434 797 L 434 181" /> |
| 46 | <path d="M 511 136 L 511 844" /> |
| 47 | <path d="M 588 799 L 588 182" /> |
| 48 | <path d="M 665 223 L 665 845" /> |
| 49 | <path d="M 742 887 L 742 267" /> |
| 50 | <path d="M 665 845 L 816 758" /> |
| 51 | <path d="M 433 801 L 820 577" /> |
| 52 | <path d="M 820 489 L 360 755" /> |
| 53 | </g> |
| 54 | </svg> |
| 55 | {props.calculating ? ( |
| 56 | <Spinner style="position: absolute; top: 11px; left: 4px;" /> |
| 57 | ) : null} |
| 58 | <h1>Azure Quantum Resource Estimator</h1> |
| 59 | </div> |
| 60 | <EstimatesOverview |
| 61 | estimatesData={props.estimatesData} |
| 62 | isSimplifiedView={false} |
| 63 | onRowDeleted={props.onRowDeleted} |
| 64 | setEstimate={setEstimate} |
| 65 | runNames={props.runNames} |
| 66 | colors={props.colors} |
| 67 | allowSaveImage={props.allowSaveImage || false} |
| 68 | ></EstimatesOverview> |
| 69 | {!estimate ? null : ( |
| 70 | <> |
| 71 | <details open> |
| 72 | <summary style="font-size: 1.5em; font-weight: bold; margin: 24px 8px;"> |
| 73 | Space diagram |
| 74 | </summary> |
| 75 | <SpaceChart estimatesData={estimate} /> |
| 76 | </details> |
| 77 | <details open> |
| 78 | <summary style="font-size: 1.5em; font-weight: bold; margin: 24px 8px;"> |
| 79 | Resource Estimates |
| 80 | </summary> |
| 81 | <ReTable estimatesData={estimate} /> |
| 82 | </details> |
| 83 | </> |
| 84 | )} |
| 85 | </> |
| 86 | ); |
| 87 | } |
| 88 | |