diff --git a/content/_data/constants.yml b/content/_data/constants.yml index 7b96addda207..d809e87af92e 100644 --- a/content/_data/constants.yml +++ b/content/_data/constants.yml @@ -269,12 +269,27 @@ 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 - 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 + - 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 diff --git a/src/components/ServiceStatus.jsx b/src/components/ServiceStatus.jsx index 24ee1e14c4a4..96a5f0929700 100644 --- a/src/components/ServiceStatus.jsx +++ b/src/components/ServiceStatus.jsx @@ -2,8 +2,12 @@ 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, 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'; import { API_BASE_URL } from '../config/api.js'; @@ -45,6 +49,63 @@ const StatusCard = (props) => { ) } +const ToolCard = ({ name, description, href }) => ( + + + +

{name}

+
+ +

{description}

+ + Documentation + +
+
+
+) + +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`) @@ -53,20 +114,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({}); @@ -103,6 +164,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 (
@@ -120,15 +182,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)} /> ))} - - - -
{bookingModalOpen && ( @@ -180,8 +253,8 @@ export const ServiceStatus = (props) => { setIsModalOpen={setModalOpen} /> )} - - + +
); }