Refactor StatusModal and add more fuctionality to raw data view

src/components/QcLayouts/Base.jsx

@@ -1,6 +1,7 @@
-import React, { useState, useEffect, useRef } from 'react';
+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 }) {
@@ -52,21 +53,6 @@ export function BaseQcLayout({ rawNodes, edges, spacing, calibrationData, qubitM
         return { worst, best, average };
     };
 
-    // Format metric value for display
-    const formatMetricValue = (value, unit) => {
-        if (value === null || value === undefined) return 'N/A';
-
-        if (unit === 's') {
-            // Convert seconds to appropriate unit
-            return `${(value * 1e6).toFixed(2)}μs`;
-        } else if (unit === '' || unit === '%') {
-            // Assume percentage/fidelity
-            return `${(value * 100).toFixed(2)}%`;
-        }
-        return value.toFixed(3);
-    };
-
-
     // Get metric value for a specific qubit
     const getQubitMetricValue = (qubitId) => {
         if (!calibrationData || !qubitMetric || !calibrationData[qubitMetric]) {

src/components/ServiceStatus.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { useStatus } from '../hooks/useStatus'
 import { mdiInformation, mdiClose, mdiAlert } from '@mdi/js';
 import { CCard, CCardTitle, CCardContent, CIcon } from '@cscfi/csc-ui-react';
-import { StatusModal } from './StatusModal';
+import { StatusModal } from './StatusModal/StatusModal';
 
 const StatusCard = (props) => {
   const isOnline = props.health;

src/components/StatusModal/CalibrationTable.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { CTable } from '@cscfi/csc-ui-react';
+import { formatMetricValue } from '../../utils/formatMetricValue';
+
+// Render calibration data as a table
+export const CalibrationTable = (props) => {
+
+    const { calibrationData, qubitSwitch, couplerSwitch, qubitMetricOptions, couplerMetricOptions } = props;
+    if (!calibrationData) return <p>No calibration data available</p>;
+
+    const allMetrics = Object.keys(calibrationData);
+    if (allMetrics.length === 0) return <p>No metrics available</p>;
+
+    // Get all unique qubit/coupler IDs
+    const allIds = new Set();
+    allMetrics.forEach(metric => {
+        Object.keys(calibrationData[metric]).forEach(id => {
+            if (id !== 'statistics' && ((qubitSwitch && !id.includes("__")) || (couplerSwitch && id.includes("__")))) {
+                allIds.add(id);
+            }
+        });
+    });
+
+    const sortedIds = Array.from(allIds);
+
+    // Filter out metrics that have only N/A values for the filtered IDs
+    const metrics = allMetrics.filter(metric => {
+        return sortedIds.some(id => {
+            const data = calibrationData[metric][id];
+            const value = data?.value;
+            return value !== null && value !== undefined;
+        });
+    });
+
+    return (
+        <div className="overflow-auto max-h-[50vh]">
+            <CTable>
+                <table >
+                    <thead >
+                        <tr>
+                            <th className='!font-bold' >ID</th>
+                            {metrics.map(metric => (
+                                <th className='!font-bold' key={metric}>
+                                    {qubitMetricOptions.find(m => m.value === metric)?.name ||
+                                        couplerMetricOptions.find(m => m.value === metric)?.name ||
+                                        metric}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {sortedIds.map(id => (
+                            <tr key={id}>
+                                <td>{id}</td>
+                                {metrics.map(metric => {
+                                    const data = calibrationData[metric][id];
+                                    const value = data?.value;
+                                    const unit = data?.unit || '';
+                                    return (
+                                        <td key={`${id}-${metric}`}>
+                                            {value !== null && value !== undefined ? formatMetricValue(value, unit) : 'N/A'}
+                                        </td>
+                                    );
+                                })}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </CTable>
+        </div>
+    );
+};

src/components/StatusModal/DeviceStatus.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export const DeviceStatus = (props) => {
+
+    const { deviceData, devicesWithStatus } = props;
+
+    return (
+        <>
+            <div className="flex flex-col justify-start text-[14px]">
+                <p className="pb-2"><strong>Qubits:</strong> {deviceData.qubits}</p>
+                <p className="pb-2"><strong>Basis gates:</strong> {deviceData.basis}</p>
+                <p className="pb-2"><strong>Topology:</strong> {deviceData.topology}</p>
+            </div>
+
+            <div className='flex flex-col gap-0 text-[14px] col-span-1 pb-8'>
+                <strong>Service status:</strong>
+                {devicesWithStatus.find(d => d.device_id === deviceData.device_id)?.health ? (
+                    <div className='text-center text-[#204303] bg-[#B9DC9C] border-[0.5px] border-[#204303] rounded-[100px] w-[88px] h-[25px]'>
+                        <p className='font-bold text-[14px]'>Online</p>
+                    </div>
+                ) : (
+                    <div className='text-center text-[#7E0707] bg-[#F8CECE] border-[0.5px] border-[#7E0707] rounded-[100px] w-[88px] h-[25px]'>
+                        <p className='font-bold text-[14px]'>Offline</p>
+                    </div>
+                )}
+            </div>
+        </>
+    )
+
+}