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';
|
import { ClientContext, ConfigContext, StateContext } from '../state.js';
|
||||||
|
|
||||||
const LOADING_PERCENT = 100;
|
const LOADING_PERCENT = 100;
|
||||||
|
const LOADING_OVERAGE = 99;
|
||||||
|
|
||||||
export interface LoadingCardProps {
|
export interface LoadingCardProps {
|
||||||
loading: ImageResponse;
|
loading: ImageResponse;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function LoadingCard(props: LoadingCardProps) {
|
export function LoadingCard(props: LoadingCardProps) {
|
||||||
|
const { steps } = props.loading.params;
|
||||||
|
|
||||||
const client = mustExist(React.useContext(ClientContext));
|
const client = mustExist(React.useContext(ClientContext));
|
||||||
const { params } = mustExist(useContext(ConfigContext));
|
const { params } = mustExist(useContext(ConfigContext));
|
||||||
|
|
||||||
|
@ -44,16 +47,33 @@ export function LoadingCard(props: LoadingCardProps) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPercent() {
|
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);
|
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() {
|
function getReady() {
|
||||||
return doesExist(ready.data) && ready.data.ready;
|
return doesExist(ready.data) && ready.data.ready;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderProgress() {
|
function renderProgress() {
|
||||||
if (getProgress() > 0) {
|
const progress = getProgress();
|
||||||
|
if (progress > 0 && progress <= steps) {
|
||||||
return <CircularProgress variant='determinate' value={getPercent()} />;
|
return <CircularProgress variant='determinate' value={getPercent()} />;
|
||||||
} else {
|
} else {
|
||||||
return <CircularProgress />;
|
return <CircularProgress />;
|
||||||
|
@ -90,7 +110,7 @@ export function LoadingCard(props: LoadingCardProps) {
|
||||||
sx={{ alignItems: 'center' }}
|
sx={{ alignItems: 'center' }}
|
||||||
>
|
>
|
||||||
{renderProgress()}
|
{renderProgress()}
|
||||||
<Typography>{getProgress()}/{props.loading.params.steps} steps</Typography>
|
<Typography>{getProgress()}/{getTotal()} steps</Typography>
|
||||||
<Button onClick={() => cancel.mutate()}>Cancel</Button>
|
<Button onClick={() => cancel.mutate()}>Cancel</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
Loading…
Reference in New Issue