From 324d536bb4d4fb1d59145dbb78ec90bb3a97f53c Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Sun, 13 Sep 2026 19:46:39 +0300 Subject: [PATCH 1/6] contants for tools --- content/_data/constants.yml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/content/_data/constants.yml b/content/_data/constants.yml index 7b96addda207..1b090b3e97ed 100644 --- a/content/_data/constants.yml +++ b/content/_data/constants.yml @@ -275,6 +275,13 @@ cookie_consent: - text: |- LUMI-Q VLQ will be down for scheduled maintenance from 4th to 25th of September. type: warning + tools: + - name: FiQCI-EMS + description: Error mitigation service. Adds readout error mitigation, dynamical decoupling, Pauli twirling and zero-noise extrapolation to Qiskit workflows on IQM devices. + href: https://fiqci.fi/fiqci-ems + - name: QCut + description: Quantum circuit-knitting package. Cut large circuits into smaller subcircuits that fit on current devices and reconstruct the result. + href: https://fiqci.fi/QCut quantum-computers: - name: VTT Q50 qubits: 53 From f9005206e4857bbb309c2c909a0a44938aa2fe7b Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Sun, 13 Sep 2026 19:46:45 +0300 Subject: [PATCH 2/6] tools section --- src/components/ServiceStatus.jsx | 47 ++++++++++++++++++++++++++------ 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx index 24ee1e14c4a4..c1926b402cb2 100644 --- a/src/components/ServiceStatus.jsx +++ b/src/components/ServiceStatus.jsx @@ -2,8 +2,9 @@ import React, { useCallback, useMemo, useState } from 'react' import { useStatus } from '../hooks/useStatus' import { useBookings } from '../hooks/useBookings.jsx'; -import { mdiInformation, mdiClose, mdiAlert, mdiRefresh } from '@mdi/js'; -import { CCard, CCardTitle, CCardContent, CIcon, CButton, CSelect } from '@cscfi/csc-ui-react'; +import { mdiInformation, mdiClose, mdiAlert, mdiRefresh, mdiArrowRight, mdiOpenInNew } from '@mdi/js'; +import { CCard, CCardTitle, CCardContent, CIcon, CButton, CSelect, CAccordion, CAccordionItem } from '@cscfi/csc-ui-react'; +import { prependBaseURL, isExternal } from '../utils/url'; import { StatusModal } from './StatusModal/StatusModal'; import { BookingModal } from './bookingCalendar.jsx'; import { API_BASE_URL } from '../config/api.js'; @@ -45,6 +46,22 @@ const StatusCard = (props) => { ) } +const ToolCard = ({ name, description, href }) => ( + + + +

{name}

+ + +

{description}

+ + Documentation + + + + +) + export const ServiceStatus = (props) => { const { status: statusList, loading: statusLoading, refetch: refetchStatus } = useStatus(`${API_BASE_URL}/devices/healthcheck`); const { bookingData: bookingData } = useBookings(`${API_BASE_URL}/bookings`) @@ -103,6 +120,7 @@ export const ServiceStatus = (props) => { }; // Support both a single `alert` object and a list of `alerts`. const alerts = props.alerts ?? (props.alert ? [props.alert] : []); + const tools = props.tools || []; return (
@@ -128,7 +146,7 @@ export const ServiceStatus = (props) => {

setBookingModalOpen(true)}>View Reservations
- +

Devices

{
-
+
{sortedDevices.map((qc, index) => ( handleCardClick(qc)} /> ))} - - - -
+ + {tools.length > 0 && ( +
+ + +

+ FiQCI develops software to help you get more out of the quantum computers. +

+
+ {tools.map(tool => ( + + ))} +
+ + +
+ )} {bookingModalOpen && ( )} From 74eb1b231dc7d3dd103eb32eda2ec165ebe38e70 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Sun, 13 Sep 2026 20:08:21 +0300 Subject: [PATCH 3/6] add examples --- content/_data/constants.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/_data/constants.yml b/content/_data/constants.yml index 1b090b3e97ed..98ab7b99852c 100644 --- a/content/_data/constants.yml +++ b/content/_data/constants.yml @@ -282,6 +282,9 @@ cookie_consent: - name: QCut description: Quantum circuit-knitting package. Cut large circuits into smaller subcircuits that fit on current devices and reconstruct the result. href: https://fiqci.fi/QCut + - name: FiQCI examples + description: Example notebooks and scripts for running quantum jobs on FiQCI quantum computers through LUMI. + href: https://github.com/FiQCI/fiqci-examples quantum-computers: - name: VTT Q50 qubits: 53 From bd3943d72627f850ab1943277ac29d1f55aec3af Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Sun, 13 Sep 2026 20:08:29 +0300 Subject: [PATCH 4/6] make into a carousel --- src/components/ServiceStatus.jsx | 111 +++++++++++++++++++++---------- 1 file changed, 76 insertions(+), 35 deletions(-) diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx index c1926b402cb2..23db12de54cf 100644 --- a/src/components/ServiceStatus.jsx +++ b/src/components/ServiceStatus.jsx @@ -2,8 +2,11 @@ import React, { useCallback, useMemo, useState } from 'react' import { useStatus } from '../hooks/useStatus' import { useBookings } from '../hooks/useBookings.jsx'; -import { mdiInformation, mdiClose, mdiAlert, mdiRefresh, mdiArrowRight, mdiOpenInNew } from '@mdi/js'; -import { CCard, CCardTitle, CCardContent, CIcon, CButton, CSelect, CAccordion, CAccordionItem } from '@cscfi/csc-ui-react'; +import { mdiInformation, mdiClose, mdiAlert, mdiRefresh, mdiArrowRight, mdiOpenInNew, mdiChevronLeft, mdiChevronRight } from '@mdi/js'; +import { CCard, CCardTitle, CCardContent, CIcon, CIconButton, CButton, CSelect, CAccordion, CAccordionItem } from '@cscfi/csc-ui-react'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { A11y, Keyboard } from 'swiper'; +import 'swiper/css'; import { prependBaseURL, isExternal } from '../utils/url'; import { StatusModal } from './StatusModal/StatusModal'; import { BookingModal } from './bookingCalendar.jsx'; @@ -62,6 +65,46 @@ const ToolCard = ({ name, description, href }) => ( ) +const ToolCarousel = ({ tools }) => { + const [swiper, setSwiper] = useState(null); + const [edges, setEdges] = useState({ isBeginning: true, isEnd: true, isLocked: true }); + + const updateEdges = useCallback(({ isBeginning, isEnd, isLocked }) => { + setEdges({ isBeginning, isEnd, isLocked }); + }, []); + + return ( +
+ + {tools.map(tool => ( + + + + ))} + + {!edges.isLocked && ( + // relative z-10 keeps the buttons above the Swiper's shadow padding, which overlaps this row +
+ swiper?.slidePrev()} /> + swiper?.slideNext()} /> +
+ )} +
+ ); +} + export const ServiceStatus = (props) => { const { status: statusList, loading: statusLoading, refetch: refetchStatus } = useStatus(`${API_BASE_URL}/devices/healthcheck`); const { bookingData: bookingData } = useBookings(`${API_BASE_URL}/bookings`) @@ -70,20 +113,20 @@ export const ServiceStatus = (props) => { const devicesWithStatus = (qcs.length === 0 || !Array.isArray(statusList)) ? qcs : qcs.map(device => { - const deviceStatus = statusList.find(({ name }) => name === device.device_id); - - if (device.name == "Aalto Q20") { // TEMP offline switch for Aalto Q20 until it is back online - return { - ...device, - health: false, - }; - } + const deviceStatus = statusList.find(({ name }) => name === device.device_id); + + if (device.name == "Aalto Q20") { // TEMP offline switch for Aalto Q20 until it is back online return { ...device, - health: deviceStatus?.health ?? false, + health: false, }; - }); - + } + return { + ...device, + health: deviceStatus?.health ?? false, + }; + }); + const [bookingModalOpen, setBookingModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false); const [modalProps, setModalProps] = useState({}); @@ -138,15 +181,30 @@ export const ServiceStatus = (props) => { ))}
)} -
+

Reservations

- VTT devices can at times be reserved. At these times the queue will be paused. + VTT devices can at times be reserved. At these times the queue will be paused. Reservations can be viewed from this calendar. Note that making reservations through FiQCI is not currently possible.

setBookingModalOpen(true)}>View Reservations
+
+

Tools

+

+ FiQCI provides software to help you get more out of the quantum computers. +

+ {tools.length > 0 && ( + + + + + + )} +
+ +

Devices

{
-
+
{sortedDevices.map((qc, index) => ( handleCardClick(qc)} /> ))}
- - {tools.length > 0 && ( -
- - -

- FiQCI develops software to help you get more out of the quantum computers. -

-
- {tools.map(tool => ( - - ))} -
- - -
- )} {bookingModalOpen && ( )} @@ -211,8 +252,8 @@ export const ServiceStatus = (props) => { setIsModalOpen={setModalOpen} /> )} - - + +
); } From 3489bb8876abcb4d7572cfe62e448231b53a73ac Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Sun, 13 Sep 2026 20:14:08 +0300 Subject: [PATCH 5/6] make outlined --- src/components/ServiceStatus.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx index 23db12de54cf..7244f45e7780 100644 --- a/src/components/ServiceStatus.jsx +++ b/src/components/ServiceStatus.jsx @@ -77,8 +77,9 @@ const ToolCarousel = ({ tools }) => {
{ {!edges.isLocked && ( // relative z-10 keeps the buttons above the Swiper's shadow padding, which overlaps this row -
+
swiper?.slidePrev()} /> swiper?.slideNext()} />
@@ -196,7 +197,7 @@ export const ServiceStatus = (props) => { FiQCI provides software to help you get more out of the quantum computers.

{tools.length > 0 && ( - + From 4a47874eea5d100820f1983b6cbe000baf949855 Mon Sep 17 00:00:00 2001 From: Joonas Nivala Date: Mon, 14 Sep 2026 10:53:58 +0300 Subject: [PATCH 6/6] add alert --- content/_data/constants.yml | 5 +++++ src/components/ServiceStatus.jsx | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/content/_data/constants.yml b/content/_data/constants.yml index 98ab7b99852c..d809e87af92e 100644 --- a/content/_data/constants.yml +++ b/content/_data/constants.yml @@ -269,6 +269,11 @@ cookie_consent: For estimating the runtime of a quantum job try out the FiQCI QPU resource estimator. type: info link: "https://fiqci.fi/resource-estimator" + - text: |- + Check out the new "Tools" section for FiQCI tools and example notebooks. + type: info + link: "#tools" + - text: |- Aalto Q20 is currently down for maintenance. type: warning diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx index 7244f45e7780..96a5f0929700 100644 --- a/src/components/ServiceStatus.jsx +++ b/src/components/ServiceStatus.jsx @@ -197,8 +197,8 @@ export const ServiceStatus = (props) => { FiQCI provides software to help you get more out of the quantum computers.

{tools.length > 0 && ( - - + +