fix(gui): switch back to indeterminate progress when reported steps exceed estimate (#90)
This commit is contained in:
parent
aaf82a42f1
commit
b85c806ba7
|
@ -11,12 +11,15 @@ import { POLL_TIME } from '../config.js';
|
|||
import { ClientContext, ConfigContext, StateContext } from '../state.js';
|
||||
|
||||
const LOADING_PERCENT = 100;
|
||||
const LOADING_OVERAGE = 99;
|
||||
|
||||
export interface LoadingCardProps {
|
||||
loading: ImageResponse;
|
||||
}
|
||||
|
||||
export function LoadingCard(props: LoadingCardProps) {
|
||||
const { steps } = props.loading.params;
|
||||
|
||||
const client = mustExist(React.useContext(ClientContext));
|
||||
const { params } = mustExist(useContext(ConfigContext));
|
||||
|
||||
|
@ -44,16 +47,33 @@ export function LoadingCard(props: LoadingCardProps) {
|
|||
}
|
||||
|
||||
function getPercent() {
|
||||
const pct = getProgress() / props.loading.params.steps;
|
||||
const progress = getProgress();
|
||||
if (progress > steps) {
|
||||
// steps was not complete, show 99% until done
|
||||
return LOADING_OVERAGE;
|
||||
}
|
||||
|
||||
const pct = progress / steps;
|
||||
return Math.ceil(pct * LOADING_PERCENT);
|
||||
}
|
||||
|
||||
function getTotal() {
|
||||
const progress = getProgress();
|
||||
if (progress > steps) {
|
||||
// steps was not complete, show 99% until done
|
||||
return 'many';
|
||||
}
|
||||
|
||||
return steps.toFixed(0);
|
||||
}
|
||||
|
||||
function getReady() {
|
||||
return doesExist(ready.data) && ready.data.ready;
|
||||
}
|
||||
|
||||
function renderProgress() {
|
||||
if (getProgress() > 0) {
|
||||
const progress = getProgress();
|
||||
if (progress > 0 && progress <= steps) {
|
||||
return <CircularProgress variant='determinate' value={getPercent()} />;
|
||||
} else {
|
||||
return <CircularProgress />;
|
||||
|
@ -90,7 +110,7 @@ export function LoadingCard(props: LoadingCardProps) {
|
|||
sx={{ alignItems: 'center' }}
|
||||
>
|
||||
{renderProgress()}
|
||||
<Typography>{getProgress()}/{props.loading.params.steps} steps</Typography>
|
||||
<Typography>{getProgress()}/{getTotal()} steps</Typography>
|
||||
<Button onClick={() => cancel.mutate()}>Cancel</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
|
Loading…
Reference in New Issue