{{ about_data.advisory-group.acknowledgement.desc }} - - {{ about_data.advisory-group.acknowledgement.helmi-link-text }} - , - - {{ about_data.advisory-group.acknowledgement.q50-link-text }} + + {{ about_data.advisory-group.acknowledgement.acknowledge-link-text }}
diff --git a/docs/blog_post.md b/docs/blog_post.md index 27bd8aaed80e..bba94d89235d 100644 --- a/docs/blog_post.md +++ b/docs/blog_post.md @@ -38,7 +38,7 @@ header: #thumbnail image for the post published: true author: author name #name of the author layout: post #don't change -tags: #keywords related to the topic of the blog, e.g Helmi, Quantum, etc +tags: #keywords related to the topic of the blog, e.g Q20, Quantum, etc - tag_1 - tag_2 - etc diff --git a/docs/edit_or_add_content.md b/docs/edit_or_add_content.md index c5cf86fa3755..16b4eab44835 100644 --- a/docs/edit_or_add_content.md +++ b/docs/edit_or_add_content.md @@ -41,11 +41,11 @@ Add the quantum computer to the lists at: ```yml "/status/": quantum-computers: - - name: VTT Q5 (Helmi) - qubits: 5 + - name: Aalto Q20 + qubits: 20 basis: "PRX, CZ" - topology: "Star" - device_id: "Q5" + topology: "Grid" + device_id: "Q20" ... ``` @@ -53,20 +53,17 @@ and ```yml "/access/": - quantum_resources: #list of the available quantum resources - - name: VTT Q5 (Helmi) + quantum_resources: + - name: Aalto Q20 desc: |- - The VTT Q5 "Helmi" is the first Finnish quantum computer. Helmi is based on superconducting technology and provides 5 qubits - in a star-shape topology. Hybrid HPC+QC access was opened in 2022. Helmi is operated by VTT, - and was co-developed with IQM Quantm Computers. + Aalto Q20 is an IQM superconducting quantum computer with 20 qubits in a square grid topology. It is operated by Aalto University. image: "/assets/images/vtt-images/VTT_lab-2.webp" links: - - link: "" - teaser: "How to access VTT Q5, instructions" + - link: "/publications/2026-05-11-Academic-Call-2026-02" + teaser: "Apply for access to Aalto Q20" + - link: "https://docs.csc.fi/computing/quantum-computing/running-quantum-jobs/" + teaser: "How to access Aalto Q20, instructions" icon: mdiArrowRight - - link: "" - teaser: "Read more about VTT Q5 (VTT website)" - icon: mdiOpenInNew ... ``` @@ -281,7 +278,7 @@ Each section contains static text content, link urls, image paths, etc else that description: |- The Finnish quantum-computing infrastructure (FiQCI) provides access to quantum computers through the LUMI supercomputer environment. Currently there are two quantum computers - available for use: VTT Q5 (Helmi), and VTT Q50 + available for use: Aalto Q20, and VTT Q50 links: - title: Quantum computer resources href: /access/#quantum @@ -317,20 +314,18 @@ Each section contains static text content, link urls, image paths, etc else that title: FiQCI QPU resource estimator href: https://fiqci.fi/resource-estimator - quantum_resources: #list of the available quantum resources - - name: VTT Q5 (Helmi) + quantum_resources: + - name: Aalto Q20 desc: |- - The VTT Q5 "Helmi" is the first Finnish quantum computer. Helmi is based on superconducting technology and provides 5 qubits - in a star-shape topology. Hybrid HPC+QC access was opened in 2022. Helmi is operated by VTT, - and was co-developed with IQM Quantm Computers. + Aalto Q20 is an IQM superconducting quantum computer with 20 qubits in a square grid topology. It is operated by Aalto University. image: "/assets/images/vtt-images/VTT_lab-2.webp" links: - - link: "" - teaser: "How to access VTT Q5, instructions" + - link: "/publications/2026-05-11-Academic-Call-2026-02" + teaser: "Apply for access to Aalto Q20" + - link: "https://docs.csc.fi/computing/quantum-computing/running-quantum-jobs/" + teaser: "How to access Aalto Q20, instructions" icon: mdiArrowRight - - link: "" - teaser: "Read more about VTT Q5 (VTT website)" - icon: mdiOpenInNew + - name: VTT Q50 desc: |- @@ -432,8 +427,7 @@ Each section contains static text content, link urls, image paths, etc else that institution: Aalto University title: FiQCI vice-director - acknowledgement: #info for how to acknowledge results - #obtained using FiQCI + acknowledgement: desc: |- When publishing the results that utilise the FiQCI infrastructure, users should acknowledge the use of FiQCI, preferably in the format: "These [results] have been acquired using the @@ -441,11 +435,8 @@ Each section contains static text content, link urls, image paths, etc else that Additionally, users should also acknowledge using FiQCI quantum computers if applicable: - helmi-link-url: /publications/2022-11-01-Helmi_pilot - helmi-link-text: VTT Q5 (Helmi) - - q50-link-url: /publications/2025-07-03-Q50-Call-2_2025 - q50-link-text: VTT Q50 + acknowledge-link-url: /publications/2026-05-11-Academic-Call-2026-02 + acknowledge-link-text: VTT Q50 ``` ## Status @@ -461,18 +452,18 @@ Each section contains static text content, link urls, image paths, etc else that alert: text: Note! Access to VTT Q50 through FiQCI is coming soon. Status of the quantum computer can already be seen below. type: warning # Alert type can be info, warning, or error - quantum-computers: - - name: VTT Q5 (Helmi) - qubits: 5 - basis: "PRX, CZ" - topology: "Star" - device_id: "Q5" - + quantum-computers: - name: VTT Q50 - qubits: 54 + qubits: 53 basis: "PRX, CZ" topology: "Square grid" device_id: "Q50" + + - name: Aalto Q20 + qubits: 20 + basis: "PRX, CZ" + topology: "Square grid" + device_id: "Q20" ``` ## Cookies diff --git a/docs/event.md b/docs/event.md index 84c0a5b31d4e..ba6ba65c460f 100644 --- a/docs/event.md +++ b/docs/event.md @@ -25,7 +25,7 @@ title: 'Title of the Event' #Event name date: yyyy-mm-dd #date when to be published as yyyy-mm-dd published: true #leave as is link: https://the-event.fi/info/signup #link to event page -tags: #keywords related to the event, e.g Helmi, Quantum, etc +tags: #keywords related to the event, e.g Q20, Quantum, etc - tag_1 - tag_2 - etc diff --git a/package-lock.json b/package-lock.json index 215cf5c6e44e..635bf7335246 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,8 @@ "katex": "^0.16.21", "lunr": "^2.3.9", "prismjs": "^1.30.0", - "react-calendar": "^6.0.0" + "react-calendar": "^6.0.0", + "react-zoom-pan-pinch": "^4.0.3" }, "devDependencies": { "@babel/core": "^7.26.0", @@ -3659,6 +3660,21 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -5082,6 +5098,20 @@ "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==", "license": "MIT" }, + "node_modules/react-zoom-pan-pinch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-4.0.3.tgz", + "integrity": "sha512-N2Hi6L78fFmhRra+ORpFSW7WST5x6kxpOPplIvtB0b7b+U2anpo1z1wLgaWRPS2kUSqcraRG+JgBCIlDJnqqAg==", + "license": "MIT", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 0fe90016a244..5b0045266fc9 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "katex": "^0.16.21", "lunr": "^2.3.9", "prismjs": "^1.30.0", - "react-calendar": "^6.0.0" + "react-calendar": "^6.0.0", + "react-zoom-pan-pinch": "^4.0.3" }, "private": "true" } diff --git a/src/components/QcLayouts/Base.jsx b/src/components/QcLayouts/Base.jsx deleted file mode 100644 index 3bac0e6c31f0..000000000000 --- a/src/components/QcLayouts/Base.jsx +++ /dev/null @@ -1,437 +0,0 @@ -import React, { useState, useRef } from 'react'; -import { motion } from 'framer-motion'; -import { getColorForMetricValue } from '../../utils/generateGradient'; -import { formatMetricValue } from '../../utils/formatMetricValue'; - -export function BaseQcLayout({ rawNodes, edges, spacing, calibrationData, qubitMetric, couplerMetric, - qubitMetricFormatted, couplerMetricFormatted, thresholdQubit, thresholdCoupler }) { - - const [hoveredNode, setHoveredNode] = useState(null); - const [hoveredEdge, setHoveredEdge] = useState(null); - const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); - const [tooltip, setTooltip] = useState(null); - const containerRef = useRef(null); - - - // Calculate metric statistics for qubit metrics - const getQubitMetricStats = () => { - if (!calibrationData || !qubitMetric || !calibrationData[qubitMetric]) { - return null; - } - - const values = Object.values(calibrationData[qubitMetric]) - .map(data => data?.value) - .filter(value => value !== null && value !== undefined); - - if (values.length === 0) return null; - - const sortedValues = [...values].sort((a, b) => a - b); - const worst = sortedValues[0]; - const best = sortedValues[sortedValues.length - 1]; - const average = calibrationData[qubitMetric].statistics.median; - - return { worst, best, average }; - }; - - // Calculate metric statistics for coupler metrics - const getCouplerMetricStats = () => { - if (!calibrationData || !couplerMetric || !calibrationData[couplerMetric]) { - return null; - } - - const values = Object.values(calibrationData[couplerMetric]) - .map(data => data?.value) - .filter(value => value !== null && value !== undefined); - - if (values.length === 0) return null; - - const sortedValues = [...values].sort((a, b) => a - b); - const worst = sortedValues[0]; - const best = sortedValues[sortedValues.length - 1]; - const average = calibrationData[couplerMetric].statistics.median; - - return { worst, best, average }; - }; - - // Get metric value for a specific qubit - const getQubitMetricValue = (qubitId) => { - if (!calibrationData || !qubitMetric || !calibrationData[qubitMetric]) { - return null; - } - - const metricData = calibrationData[qubitMetric][qubitId]; - return metricData?.value ?? null; - }; - - // Get unit for the current metric - const getMetricUnit = () => { - if (!calibrationData || !qubitMetric || !calibrationData[qubitMetric]) { - return ''; - } - - // Try to get unit from first available qubit - const firstQubitData = Object.values(calibrationData[qubitMetric]).find(data => data?.unit); - return firstQubitData?.unit || ''; - }; - - // Get color for a specific qubit - const getQubitColor = (qubitId) => { - // If no metric is selected, return default blue - if (!qubitMetric || qubitMetric == '') { - return '#004E84'; - } - // If qubit does not exist in calibration data, return grey - if (!calibrationData || !calibrationData[qubitMetric] || !(qubitId in calibrationData[qubitMetric])) { - return '#888888'; - } - - const value = getQubitMetricValue(qubitId); - if (value === null || value === undefined) { - return '#888888'; - } - - const stats = getQubitMetricStats(); - if (!stats) { - return '#888888'; - } - - // For metrics where lower values are better (like error rates, times) - const unit = getMetricUnit(); - let worst = stats.worst; - let best = stats.best; - // Reverse the scale for certain metrics where lower is better - if ((qubitMetric && qubitMetric.includes("error"))) { - worst = stats.best; - best = stats.worst; - if (parseFloat(value) > thresholdQubit) { - return '#888888'; // Grey if above threshold (higher error is worse) - } - } - else { - if (parseFloat(value) < thresholdQubit) { - return '#888888'; // Grey if below threshold (lower value is worse) - } - } - - return getColorForMetricValue(value, worst, best, stats.average); - }; - - // Get coupler metric value for a specific coupler - const getCouplerMetricValue = (coupleId) => { - if (!calibrationData || !couplerMetric || !calibrationData[couplerMetric]) { - return null; - } - - const metricData = calibrationData[couplerMetric][coupleId]; - return metricData?.value ?? null; - }; - - // Get unit for the current coupler metric - const getCouplerMetricUnit = () => { - if (!calibrationData || !couplerMetric || !calibrationData[couplerMetric]) { - return ''; - } - - // Try to get unit from first available coupler - const firstCouplerData = Object.values(calibrationData[couplerMetric]).find(data => data?.unit); - return firstCouplerData?.unit || ''; - }; - - // Get color for a specific coupler/edge - const getCouplerColor = (nodeA, nodeB) => { - // If no metric is selected, return default grey - if (!couplerMetric || couplerMetric == '') { - return '#aaa'; - } - - // Create coupler key - const coupleId1 = `${nodeA}__${nodeB}`; - const coupleId2 = `${nodeB}__${nodeA}`; - - // If coupler does not exist in calibration data, return grey - if (!calibrationData || !calibrationData[couplerMetric]) { - return '#888888'; - } - - let value = getCouplerMetricValue(coupleId1); - if (value === null) { - value = getCouplerMetricValue(coupleId2); - } - if (value === null || value === undefined) { - return '#888888'; // Grey if no data found - } - - const stats = getCouplerMetricStats(); - if (!stats) { - return '#888888'; - } - - // For metrics where lower values are better - const unit = getCouplerMetricUnit(); - let worst = stats.worst; - let best = stats.best; - - // Reverse the scale for certain metrics where lower is better - if ((couplerMetric && couplerMetric.includes("error"))) { - worst = stats.best; - best = stats.worst; - - if (parseFloat(value) > thresholdCoupler) { - return '#888888'; // Grey if above threshold (higher error is worse) - } - } - else { - if (parseFloat(value) < thresholdCoupler) { - return '#888888'; // Grey if below threshold (lower value is worse) - } - } - - return getColorForMetricValue(value, worst, best, stats.average); - }; - - // Handle mouse move to update tooltip position relative to the container - const handleMouseMove = (event) => { - if (containerRef.current) { - const rect = containerRef.current.getBoundingClientRect(); - - setMousePos({ - x: event.clientX - rect.left, - y: event.clientY - rect.top - }); - } - }; - - // Calculate tooltip position with boundary checking - const getTooltipPosition = () => { - if (!containerRef.current || !tooltip) return { left: 0, top: 0 }; - - const containerRect = containerRef.current.getBoundingClientRect(); - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - - let tooltipWidth = 300; // rough estimate - let tooltipHeight = 150; // rough estimate - - if (qubitMetric === '' && couplerMetric === '') { - tooltipWidth = 100; // rough estimate - tooltipHeight = 70; // rough estimate - } - - // Calculate absolute position on screen - const absoluteX = containerRect.left + mousePos.x; - const absoluteY = containerRect.top + mousePos.y; - - let left = mousePos.x + 8; - let top = mousePos.y + 8; - - // Check right boundary against viewport - if (absoluteX + 8 + tooltipWidth > viewportWidth) { - left = mousePos.x - tooltipWidth - 8; // Position to the left of cursor - } - - // Check bottom boundary against viewport - if (absoluteY + 8 + tooltipHeight > viewportHeight) { - top = mousePos.y - tooltipHeight - 8; // Position above cursor - } - - // Ensure tooltip stays within container bounds - left = Math.max(8, Math.min(left, containerRect.width - tooltipWidth - 8)); - top = Math.max(8, Math.min(top, containerRect.height - tooltipHeight - 8)); - - return { left, top }; - }; - - // Build coordinate map directly from raw nodes - const coordMap = Object.fromEntries(rawNodes.map(n => [n.id, n])); - - // Compute dynamic bounds - const xs = rawNodes.map(n => n.x); - const ys = rawNodes.map(n => n.y); - const minX = Math.min(...xs) - spacing; - const maxX = Math.max(...xs) + spacing; - const minY = Math.min(...ys) - spacing; - const maxY = Math.max(...ys) + spacing; - const viewBoxWidth = maxX - minX; - const viewBoxHeight = maxY - minY; - const viewBox = `${minX} ${-maxY} ${viewBoxWidth} ${viewBoxHeight}`; - - // Calculate max width based on number of qubits - const maxWidth = rawNodes.length * 100; - - return ( -- {tooltip.details.split(":")[0]} - {tooltip.details !== "Disabled" && - : - } -
- -- {tooltip.details.split(":")[1]} -
-+ {tooltip.details.split(":")[0]} + {tooltip.details !== "Disabled" && + : + } +
+ ++ {tooltip.details.split(":")[1]} +
+