frontend: visual polish pass (status pill, buttons, panels, empty states)
Design pass across the frontend for a coherent, stronger-but-limited look (lime / coral / blue), keeping lime as the brand accent. - StatusBar: broker state is a fixed-width pill (lime=Idle, coral=Busy/ Pedestal/Error, light-blue=Inactive); while Measuring it fills like a progress bar (lime over the sidebar light-blue). Action buttons are a three-tier system (hot lime / active blue-on-blue / off ghost) so exactly one button reads as the thing to click now, ordered Cancel/Pedestal/ Initialize. Cancel is the emergency stop (hot while Measuring/Pedestal). - SettingsPanel: left-aligned card header on a light-blue band with a lime left accent (echoes the sidebar); inline <b> section labels restyled as uniform uppercase captions. DetectorSettings adopts the same header. - EmptyState: muted icon + text for "No plots"/"No preview". - DetectorStatus: semantic colour on state/power values. - Snackbars offset so action messages clear the fixed footer. - Footer PSI logo now uses the positive (dark) logos directly on the light footer instead of CSS-inverting the negative ones. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
@@ -70,9 +70,8 @@ const drawerSelectedBg = indigo[100];
|
||||
// with the app wordmark or menu icon). The four official logos differ only in the
|
||||
// diffused spots; pick one at module load so it is fixed per page load and never
|
||||
// re-randomises on render. BASE_URL keeps the path correct under the /frontend/ base.
|
||||
// The assets are the white "negative" logos; `brightness(0)` renders them as the
|
||||
// approved solid-black logo for the light footer.
|
||||
const PSI_LOGOS = [1, 2, 3, 4].map(i => `${import.meta.env.BASE_URL}psi_0${i}_sn.png`);
|
||||
// These are the positive (dark) logos, used as-is on the light footer.
|
||||
const PSI_LOGOS = [1, 2, 3, 4].map(i => `${import.meta.env.BASE_URL}psi_0${i}.png`);
|
||||
const PSI_LOGO = PSI_LOGOS[Math.floor(Math.random() * PSI_LOGOS.length)];
|
||||
|
||||
const jfjoch_theme = createTheme({
|
||||
@@ -313,7 +312,7 @@ function App() {
|
||||
sx={{ position: 'absolute', left: 24, top: '50%', transform: 'translateY(-50%)',
|
||||
display: 'inline-flex' }}>
|
||||
<Box component="img" src={PSI_LOGO} alt="PSI"
|
||||
sx={{ height: 34, width: 'auto', filter: 'brightness(0)', opacity: 0.8 }}/>
|
||||
sx={{ height: 34, width: 'auto', opacity: 0.85 }}/>
|
||||
</Link>
|
||||
Developed at{' '}
|
||||
<Link href="https://www.psi.ch" target="_blank" rel="noopener">Paul Scherrer Institute</Link>
|
||||
|
||||
@@ -5,17 +5,20 @@ import {
|
||||
} from "@mui/material";
|
||||
import Button from "@mui/material/Button";
|
||||
import Snackbar from "@mui/material/Snackbar";
|
||||
import { SxProps, Theme } from "@mui/material/styles";
|
||||
|
||||
type MyProps = {
|
||||
input?: string,
|
||||
disabled?: boolean,
|
||||
path: string,
|
||||
text: string,
|
||||
color?: "primary" | "secondary",
|
||||
color?: "primary" | "secondary" | "inherit",
|
||||
variant?: "text" | "outlined" | "contained",
|
||||
sx?: SxProps<Theme>,
|
||||
method?: "GET" | "POST" | "PUT"
|
||||
}
|
||||
|
||||
function ButtonWithSnackbar({input, disabled, path, text, color, method}: MyProps) {
|
||||
function ButtonWithSnackbar({input, disabled, path, text, color, variant, sx, method}: MyProps) {
|
||||
const [snackbarOpen, setSnackbarOpen] = useState(false);
|
||||
const [startSuccess, setStartSuccess] = useState(true);
|
||||
const [startError, setStartError] = useState<string>();
|
||||
@@ -65,15 +68,17 @@ function ButtonWithSnackbar({input, disabled, path, text, color, method}: MyProp
|
||||
<Button
|
||||
color={color}
|
||||
onClick={startButton}
|
||||
variant="contained"
|
||||
variant={variant ?? "contained"}
|
||||
disableElevation
|
||||
disabled={disabled}
|
||||
sx={sx}
|
||||
>
|
||||
{text}
|
||||
</Button>
|
||||
<Snackbar open={snackbarOpen}
|
||||
autoHideDuration={5000}
|
||||
onClose={handleClose}>
|
||||
onClose={handleClose}
|
||||
sx={{ bottom: { xs: 80 } }}>
|
||||
<Alert
|
||||
onClose={handleClose}
|
||||
severity={startSuccess ? "success" : "error"}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import {ReactNode} from 'react';
|
||||
|
||||
import {useQuery} from "@tanstack/react-query";
|
||||
import ShowChartIcon from "@mui/icons-material/ShowChart";
|
||||
import {azint_unit, plot_type, plot_unit_x} from "../client";
|
||||
import {getPreviewPlotOptions} from "../client/@tanstack/react-query.gen";
|
||||
import MultiLinePlotWrapper from "./MultiLinePlotWrapper";
|
||||
import EmptyState from "./EmptyState";
|
||||
|
||||
type MyProps = {
|
||||
type: plot_type;
|
||||
@@ -106,7 +108,7 @@ function DataProcessingPlot({type, binning, angle, azint}: MyProps) {
|
||||
|| (plots === undefined)
|
||||
|| (plots.plot === null)
|
||||
|| (plots.plot.length === 0))
|
||||
return <div>No plots available</div>;
|
||||
return <EmptyState icon={<ShowChartIcon fontSize="inherit"/>} text="No plots available"/>;
|
||||
|
||||
let data: PlotlyData = [];
|
||||
if ((plots.plot[0].z !== undefined)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import {ChangeEvent, memo, useEffect, useState} from 'react';
|
||||
|
||||
import {Box, Checkbox, FormControlLabel, FormGroup, Grid, List, ListItem, Stack, Switch, Tooltip} from "@mui/material";
|
||||
import {Box, Checkbox, Divider, FormControlLabel, FormGroup, Grid, List, ListItem, Stack, Switch, Tooltip} from "@mui/material";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import InputLabel from "@mui/material/InputLabel";
|
||||
@@ -12,7 +12,7 @@ import NumberTextField from "./NumberTextField";
|
||||
import _ from "lodash";
|
||||
import ButtonWithSnackbar from "./ButtonWithSnackbar";
|
||||
import Button from "@mui/material/Button";
|
||||
import {PanelTitle, UploadSnackbarView} from "./SettingsPanel";
|
||||
import {PanelTitle, UploadSnackbarView, sectionHeadingSx, panelHeaderSx} from "./SettingsPanel";
|
||||
import {useUpload} from "./useUpload";
|
||||
|
||||
type MyProps = {
|
||||
@@ -149,10 +149,13 @@ function DetectorSettings({s: serverS}: MyProps) {
|
||||
// Two responsive columns keep this large form wide-and-short instead of one
|
||||
// very tall centred strip: acquisition/timing on the left, JUNGFRAU + EIGER on
|
||||
// the right, with the title on top and the action buttons spanning the bottom.
|
||||
return <Paper style={{textAlign: 'center'}} sx={{ p: 3, width: '100%' }}>
|
||||
<PanelTitle title="Detector settings" dirty={dirty}/>
|
||||
|
||||
<Grid container spacing={4} sx={{ mt: 1 }}>
|
||||
return <Paper sx={[{ width: '100%', overflow: 'hidden' }, sectionHeadingSx]}>
|
||||
<Box sx={panelHeaderSx}>
|
||||
<PanelTitle title="Detector settings" dirty={dirty}/>
|
||||
</Box>
|
||||
<Divider/>
|
||||
<Box sx={{ p: 3, textAlign: 'center' }}>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Stack spacing={3} alignItems="center">
|
||||
<NumberTextField start_val={s.frame_time_us}
|
||||
@@ -392,6 +395,7 @@ function DetectorSettings({s: serverS}: MyProps) {
|
||||
/>
|
||||
</Box>
|
||||
<UploadSnackbarView snackbar={snackbar}/>
|
||||
</Box>
|
||||
</Paper>
|
||||
}
|
||||
|
||||
|
||||
@@ -5,6 +5,20 @@ import {Table, TableBody, TableCell, TableContainer, TableRow,} from "@mui/mater
|
||||
import {detector_status, detector_state, detector_power_state} from "../client";
|
||||
import SettingsPanel from "./SettingsPanel";
|
||||
|
||||
// Colour the state/power values so a healthy detector reads green at a glance and
|
||||
// a disconnected or partially-powered one stands out.
|
||||
function stateColor(state: detector_state): string {
|
||||
return state === detector_state.NOT_CONNECTED ? "text.secondary" : "success.main";
|
||||
}
|
||||
|
||||
function powerColor(p: detector_power_state): string {
|
||||
switch (p) {
|
||||
case detector_power_state.POWER_ON: return "success.main";
|
||||
case detector_power_state.PARTIAL: return "warning.main";
|
||||
default: return "text.secondary";
|
||||
}
|
||||
}
|
||||
|
||||
type MyProps = {
|
||||
s?: detector_status
|
||||
}
|
||||
@@ -54,11 +68,13 @@ function DetectorStatus({s}: MyProps) {
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row"> Detector state: </TableCell>
|
||||
<TableCell align="right">{(det.state.toString())}</TableCell>
|
||||
<TableCell align="right" sx={{color: stateColor(det.state), fontWeight: 600}}>
|
||||
{det.state.toString()}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row"> Detector ASIC power: </TableCell>
|
||||
<TableCell align="right">{powerchipToString(det)}</TableCell>
|
||||
<TableCell align="right" sx={{color: powerColor(det.powerchip), fontWeight: 600}}>
|
||||
{powerchipToString(det)}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row"> Triggers remaining: </TableCell>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { ReactNode } from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
/** A calm placeholder for "no data yet" areas (empty plots, previews, tables):
|
||||
* a muted icon over a short line of helper text, centred in its container. */
|
||||
function EmptyState({ icon, text }: { icon: ReactNode; text: string }) {
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center",
|
||||
justifyContent: "center", gap: 1, width: "100%", minHeight: 160, py: 4,
|
||||
color: "text.disabled" }}>
|
||||
<Box sx={{ fontSize: 44, display: "flex" }}>{icon}</Box>
|
||||
<Typography variant="body2" color="text.secondary">{text}</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EmptyState;
|
||||
@@ -1,14 +1,35 @@
|
||||
import { ReactNode } from "react";
|
||||
import { Alert, Box, Button, Paper, Snackbar, Stack, Tooltip, Typography } from "@mui/material";
|
||||
import { Alert, Box, Button, Divider, Paper, Snackbar, Stack, Tooltip, Typography } from "@mui/material";
|
||||
import { indigo } from "@mui/material/colors";
|
||||
import { SxProps, Theme } from "@mui/material/styles";
|
||||
import { SystemStyleObject } from "@mui/system";
|
||||
import { TypographyProps } from "@mui/material/Typography";
|
||||
import { UploadSnackbar } from "./useUpload";
|
||||
|
||||
/** The panel title row: a light-blue (sidebar) band with a lime left accent, echoing
|
||||
* the selected sidebar entry so the cards feel part of the same system. Exported so
|
||||
* DetectorSettings (which doesn't use SettingsPanel) can match. */
|
||||
export const panelHeaderSx = {
|
||||
px: 3, py: 1.75, bgcolor: indigo[50], borderLeft: "4px solid", borderColor: "secondary.main",
|
||||
};
|
||||
|
||||
/** Uniform look for the inline <b> section labels used inside the config panels:
|
||||
* small uppercase captions in the brand colour, instead of ad-hoc bold text.
|
||||
* Exported so panels that don't use SettingsPanel (e.g. DetectorSettings) match.
|
||||
* Typed as a plain style object so it composes inside an sx={[...]} array. */
|
||||
export const sectionHeadingSx: SystemStyleObject<Theme> = {
|
||||
"& b": {
|
||||
display: "block", mt: 1, color: "primary.dark", fontSize: "0.78rem",
|
||||
fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase",
|
||||
},
|
||||
};
|
||||
|
||||
/** The upload-result snackbar, usable on its own by panels that don't use SettingsPanel. */
|
||||
export function UploadSnackbarView({ snackbar }: { snackbar?: UploadSnackbar }) {
|
||||
if (!snackbar) return null;
|
||||
return (
|
||||
<Snackbar open={snackbar.open} autoHideDuration={5000} onClose={snackbar.onClose}>
|
||||
<Snackbar open={snackbar.open} autoHideDuration={5000} onClose={snackbar.onClose}
|
||||
sx={{ bottom: { xs: 80 } }}>
|
||||
<Alert onClose={snackbar.onClose} variant="filled"
|
||||
severity={snackbar.success ? "success" : "error"} sx={{ width: "100%" }}>
|
||||
{snackbar.success ? "Ok!" : snackbar.message}
|
||||
@@ -62,9 +83,16 @@ function SettingsPanel({
|
||||
children,
|
||||
}: SettingsPanelProps) {
|
||||
return (
|
||||
<Paper sx={[{ width: "100%", p: 3, textAlign: "center" }, ...(Array.isArray(sx) ? sx : [sx])]}>
|
||||
<Stack spacing={spacing} alignItems="center">
|
||||
{title !== undefined && <PanelTitle title={title} variant={titleVariant} dirty={dirty} />}
|
||||
<Paper sx={[{ width: "100%", overflow: "hidden" }, ...(Array.isArray(sx) ? sx : [sx])]}>
|
||||
{title !== undefined && (
|
||||
<>
|
||||
<Box sx={panelHeaderSx}>
|
||||
<PanelTitle title={title} variant={titleVariant} dirty={dirty} />
|
||||
</Box>
|
||||
<Divider />
|
||||
</>
|
||||
)}
|
||||
<Stack spacing={spacing} alignItems="center" sx={[{ p: 3, textAlign: "center" }, sectionHeadingSx]}>
|
||||
{children}
|
||||
{onUpload && (
|
||||
<Button variant="contained" color={dirty ? "warning" : "primary"} disableElevation
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import {memo, ReactNode} from 'react';
|
||||
import {memo} from 'react';
|
||||
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Box from '@mui/material/Box';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import {indigo, deepOrange} from '@mui/material/colors';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import {broker_status} from "../client";
|
||||
import ButtonWithSnackbar from "./ButtonWithSnackbar";
|
||||
@@ -14,25 +16,79 @@ type MyProps = {
|
||||
onMenuClick?: () => void;
|
||||
}
|
||||
|
||||
function FormatNumber(x: number) : string {
|
||||
if (x === undefined)
|
||||
return "";
|
||||
else if (x === null)
|
||||
return "";
|
||||
else
|
||||
return x.toFixed(1);
|
||||
// A tight, strong palette: lime = good/running, coral = working/alarm (deeper = worse),
|
||||
// light-blue (sidebar) = neutral/idle-connection. Measuring is handled separately.
|
||||
const STATE_STYLE: Record<string, { fill: string; text: string }> = {
|
||||
Idle: { fill: "secondary.main", text: "rgba(0,0,0,.87)" }, // lime + black text
|
||||
Busy: { fill: deepOrange[300], text: "rgba(0,0,0,.87)" }, // light coral
|
||||
Pedestal: { fill: deepOrange[300], text: "rgba(0,0,0,.87)" }, // light coral
|
||||
Error: { fill: deepOrange[700], text: "#fff" }, // deep coral
|
||||
Inactive: { fill: indigo[100], text: "rgba(0,0,0,.87)" }, // sidebar light blue
|
||||
};
|
||||
|
||||
// Fixed width so the pill fits the longest label ("Measuring · 100 %") and never
|
||||
// resizes as the state changes.
|
||||
const pillSx = {
|
||||
position: "relative", width: 200, height: 36, borderRadius: 999, overflow: "hidden",
|
||||
display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
|
||||
} as const;
|
||||
const pillLabelSx = { position: "relative", fontWeight: 600, fontSize: "0.95rem", whiteSpace: "nowrap" } as const;
|
||||
|
||||
// Three action-button tiers so exactly one button reads as "click me now":
|
||||
// hot = lime — the action to take right now
|
||||
// active = blue-on-blue (no frame), white text — available, secondary emphasis
|
||||
// off = faint ghost — not relevant in this state
|
||||
const activeColdSx = { bgcolor: "primary.dark", color: "#fff",
|
||||
"&:hover": { bgcolor: "primary.dark", filter: "brightness(1.12)" } };
|
||||
const offSx = { bgcolor: "rgba(255,255,255,.10)", color: "rgba(255,255,255,.6)", boxShadow: "none",
|
||||
"&:hover": { bgcolor: "rgba(255,255,255,.18)" } };
|
||||
const TIER = {
|
||||
hot: { color: "secondary", variant: "contained" },
|
||||
active: { color: "primary", variant: "contained", sx: activeColdSx },
|
||||
off: { color: "inherit", variant: "contained", sx: offSx },
|
||||
} as const;
|
||||
type Tier = keyof typeof TIER;
|
||||
|
||||
function StatusChip({s}: {s?: broker_status}) {
|
||||
if (s === undefined)
|
||||
return (
|
||||
<Box sx={{...pillSx, border: "1px solid rgba(255,255,255,.6)"}}>
|
||||
<Typography component="span" sx={{...pillLabelSx, color: "#fff"}}>Not connected</Typography>
|
||||
</Box>
|
||||
);
|
||||
|
||||
// Measuring: a light-blue (sidebar) track filled lime to the progress fraction,
|
||||
// with black text that stays legible over both the track and the lime fill.
|
||||
if (s.state === "Measuring") {
|
||||
const pct = Math.max(0, Math.min(100, (s.progress ?? 0) * 100.0));
|
||||
return (
|
||||
<Box sx={{...pillSx, bgcolor: indigo[100]}}>
|
||||
<Box sx={{position: "absolute", left: 0, top: 0, bottom: 0, width: `${pct}%`,
|
||||
bgcolor: "secondary.main", transition: "width .4s ease"}}/>
|
||||
<Typography component="span" sx={{...pillLabelSx, color: "rgba(0,0,0,.87)"}}>
|
||||
Measuring · {pct.toFixed(0)} %
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const style = STATE_STYLE[s.state] ?? { fill: "grey.500", text: "#fff" };
|
||||
return (
|
||||
<Box sx={{...pillSx, bgcolor: style.fill}}>
|
||||
<Typography component="span" sx={{...pillLabelSx, color: style.text}}>{s.state.toString()}</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusBar({s, onMenuClick}: MyProps) {
|
||||
const statusDescription = (): ReactNode => {
|
||||
if (s === undefined)
|
||||
return <>Not connected</>;
|
||||
else
|
||||
return <div>
|
||||
State: {s.state.toString()}
|
||||
{(s.progress !== undefined) ? " (" + FormatNumber(s.progress * 100.0) + " %)" : ""}
|
||||
</div>
|
||||
};
|
||||
// Pick each button's tier from the current state, so the one action that makes
|
||||
// sense right now is lime and the rest recede.
|
||||
const st = s?.state;
|
||||
const cancelTier: Tier = (st === 'Measuring' || st === 'Pedestal') ? 'hot'
|
||||
: (st === 'Busy' || st === 'Error') ? 'active' : 'off';
|
||||
const initTier: Tier = (s === undefined || st === 'Inactive') ? 'hot'
|
||||
: (st === 'Idle') ? 'active' : 'off';
|
||||
const pedestalActive = st === 'Idle';
|
||||
|
||||
return <AppBar sx={{zIndex: (theme) => theme.zIndex.drawer + 1}}>
|
||||
<Toolbar>
|
||||
@@ -46,27 +102,29 @@ function StatusBar({s, onMenuClick}: MyProps) {
|
||||
Jungfraujoch
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h6" component="div" sx={{flexGrow: 2.0, textAlign: 'center'}}>
|
||||
{statusDescription()}
|
||||
</Typography>
|
||||
<Box sx={{flexGrow: 2.0, display: 'flex', justifyContent: 'center'}}>
|
||||
<StatusChip s={s}/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{flexGrow: 2.0}}/>
|
||||
<ButtonWithSnackbar
|
||||
text={"Pedestal"}
|
||||
path={"/pedestal"}
|
||||
color={"secondary"}
|
||||
disabled={(s === undefined) || (s.state !== 'Idle')}
|
||||
/>
|
||||
<ButtonWithSnackbar
|
||||
text={"Cancel"}
|
||||
path={"/cancel"}
|
||||
color={"secondary"}
|
||||
/>
|
||||
<ButtonWithSnackbar
|
||||
text={"Initialize"}
|
||||
path={"/initialize"}
|
||||
color={"secondary"}
|
||||
/>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<ButtonWithSnackbar
|
||||
text={"Cancel"}
|
||||
path={"/cancel"}
|
||||
{...TIER[cancelTier]}
|
||||
/>
|
||||
<ButtonWithSnackbar
|
||||
text={"Pedestal"}
|
||||
path={"/pedestal"}
|
||||
disabled={!pedestalActive}
|
||||
{...(pedestalActive ? TIER.active : TIER.off)}
|
||||
/>
|
||||
<ButtonWithSnackbar
|
||||
text={"Initialize"}
|
||||
path={"/initialize"}
|
||||
{...TIER[initTier]}
|
||||
/>
|
||||
</Stack>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
}
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import {memo, useEffect, useState} from 'react';
|
||||
|
||||
import {FormControlLabel, Radio, RadioGroup} from "@mui/material";
|
||||
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
||||
import NumberTextField from "./NumberTextField";
|
||||
import {zeromq_preview_settings} from "../client";
|
||||
import {putConfigZeromqPreviewMutation} from "../client/@tanstack/react-query.gen";
|
||||
import _ from "lodash";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import SettingsPanel from "./SettingsPanel";
|
||||
import EmptyState from "./EmptyState";
|
||||
import {useUpload} from "./useUpload";
|
||||
|
||||
type MyProps = {
|
||||
@@ -78,9 +80,9 @@ function ZeroMQPreview({s: serverS}: MyProps) {
|
||||
onUpload={() => submit(s)}
|
||||
uploadDisabled={pending || ((freqChoice == "custom") && periodErr)}
|
||||
snackbar={snackbar}>
|
||||
<div>
|
||||
{empty() ? "No preview available" : `ZeroMQ socket: ${s.socket_address}`}
|
||||
</div>
|
||||
{empty()
|
||||
? <EmptyState icon={<VisibilityOffIcon fontSize="inherit"/>} text="No preview available"/>
|
||||
: <div>{`ZeroMQ socket: ${s.socket_address}`}</div>}
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
value={freqChoice}
|
||||
|
||||
Reference in New Issue
Block a user