diff --git a/src/mol-plugin/state.ts b/src/mol-plugin/state.ts index efd663efeca2d8fb6afe69eb576417503609fe5f..ff27f0b9994a052f3de8e99731566a972289352f 100644 --- a/src/mol-plugin/state.ts +++ b/src/mol-plugin/state.ts @@ -112,7 +112,7 @@ namespace PluginState { export type CameraTransitionStyle = 'instant' | 'animate' export const GetSnapshotParams = { - durationInMs: PD.Numeric(1500, { min: 100, max: 15000, step: 100 }, { label: 'Duration in MS' }), + durationInMs: PD.Numeric(1500, { min: 100, max: 15000, step: 100 }, { label: 'Duration in ms' }), data: PD.Boolean(true), behavior: PD.Boolean(false), animation: PD.Boolean(true), diff --git a/src/mol-plugin/ui/state.tsx b/src/mol-plugin/ui/state.tsx index b96361b9c51783e1c789fb736af1e79b5a6eee34..d28f75d7ad9570f0a3ab740f08e57ccf616d4ca1 100644 --- a/src/mol-plugin/ui/state.tsx +++ b/src/mol-plugin/ui/state.tsx @@ -14,6 +14,7 @@ import { ParamDefinition as PD} from 'mol-util/param-definition'; import { PluginState } from 'mol-plugin/state'; import { urlCombine } from 'mol-util/url'; import { IconButton } from './controls/common'; +import { formatTimespan } from 'mol-util/now'; export class StateSnapshots extends PluginUIComponent<{ }> { @@ -139,9 +140,12 @@ class LocalStateSnapshotList extends PluginUIComponent<{ }, { }> { render() { const current = this.plugin.state.snapshots.state.current; return <ul style={{ listStyle: 'none' }} className='msp-state-list'> - {this.plugin.state.snapshots.state.entries.map(e =><li key={e!.snapshot.id}> + {this.plugin.state.snapshots.state.entries.map(e => <li key={e!.snapshot.id}> <button data-id={e!.snapshot.id} className='msp-btn msp-btn-block msp-form-control' onClick={this.apply}> - <span style={{ fontWeight: e!.snapshot.id === current ? 'bold' : void 0}}>{e!.name || new Date(e!.timestamp).toLocaleString()}</span> <small>{e!.description}</small> + <span style={{ fontWeight: e!.snapshot.id === current ? 'bold' : void 0}}> + {e!.name || new Date(e!.timestamp).toLocaleString()}</span> <small> + {`${e!.snapshot.durationInMs ? formatTimespan(e!.snapshot.durationInMs, false) + `${e!.description ? ', ' : ''}` : ''}${e!.description ? e!.description : ''}`} + </small> </button> <div> <IconButton data-id={e!.snapshot.id} icon='up-thin' title='Move Up' onClick={this.moveUp} isSmall={true} /> @@ -202,7 +206,11 @@ class RemoteStateSnapshots extends PluginUIComponent< upload = async () => { this.setState({ isBusy: true }); if (this.plugin.state.snapshots.state.entries.size === 0) { - await PluginCommands.State.Snapshots.Add.dispatch(this.plugin, { name: this.state.params.name, description: this.state.params.options.description }); + await PluginCommands.State.Snapshots.Add.dispatch(this.plugin, { + name: this.state.params.name, + description: this.state.params.options.description, + params: this.plugin.state.snapshots.currentGetSnapshotParams + }); } await PluginCommands.State.Snapshots.Upload.dispatch(this.plugin, { diff --git a/src/mol-util/now.ts b/src/mol-util/now.ts index d2d1037af7648a5af6fd8afbe22e27c001640c13..7a88af574b4b70147b5d99127c19d46abbd07ffb 100644 --- a/src/mol-util/now.ts +++ b/src/mol-util/now.ts @@ -28,7 +28,7 @@ namespace now { } -function formatTimespan(t: number) { +function formatTimespan(t: number, includeMsZeroes = true) { if (isNaN(t)) return 'n/a'; let h = Math.floor(t / (60 * 60 * 1000)), @@ -37,6 +37,7 @@ function formatTimespan(t: number) { ms = Math.floor(t % 1000).toString(); while (ms.length < 3) ms = '0' + ms; + while (!includeMsZeroes && ms.length > 1 && ms[ms.length - 1] === '0') ms = ms.substr(0, ms.length - 1); if (h > 0) return `${h}h${m}m${s}.${ms}s`; if (m > 0) return `${m}m${s}.${ms}s`;