From 0e83fbe1f61faee99eade2e58eb730c2ce4e95fa Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Wed, 20 Feb 2019 15:21:56 +0100
Subject: [PATCH] mol-plugin: optimized log
---
src/mol-plugin/ui/plugin.tsx | 25 ++++++++++++++++---------
1 file changed, 16 insertions(+), 9 deletions(-)
diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx
index e465a67a6..f4c812c88 100644
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/src/mol-plugin/ui/plugin.tsx
@@ -117,14 +117,14 @@ export class Log extends PluginComponent<{}, { entries: List<LogEntry> }> {
private wrapper = React.createRef<HTMLDivElement>();
componentDidMount() {
- this.subscribe(this.plugin.events.log, () => this.setState({ entries: this.plugin.log.entries.takeLast(100).toList() }));
+ this.subscribe(this.plugin.events.log, () => this.setState({ entries: this.plugin.log.entries }));
}
componentDidUpdate() {
this.scrollToBottom();
}
- state = { entries: this.plugin.log.entries.takeLast(100).toList() };
+ state = { entries: this.plugin.log.entries };
private scrollToBottom() {
const log = this.wrapper.current;
@@ -132,14 +132,21 @@ export class Log extends PluginComponent<{}, { entries: List<LogEntry> }> {
}
render() {
+ // TODO: ability to show full log
+ // showing more entries dramatically slows animations.
+ const maxEntries = 10;
+ const xs = this.state.entries, l = xs.size;
+ const entries: JSX.Element[] = [];
+ for (let i = Math.max(0, l - maxEntries), o = 0; i < l; i++) {
+ const e = xs.get(i);
+ entries.push(<li key={o++}>
+ <div className={'msp-log-entry-badge msp-log-entry-' + e!.type} />
+ <div className='msp-log-timestamp'>{formatTime(e!.timestamp)}</div>
+ <div className='msp-log-entry'>{e!.message}</div>
+ </li>);
+ }
return <div ref={this.wrapper} className='msp-log' style={{ position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' }}>
- <ul className='msp-list-unstyled'>
- {this.state.entries.map((e, i) => <li key={i}>
- <div className={'msp-log-entry-badge msp-log-entry-' + e!.type} />
- <div className='msp-log-timestamp'>{formatTime(e!.timestamp)}</div>
- <div className='msp-log-entry'>{e!.message}</div>
- </li>)}
- </ul>
+ <ul className='msp-list-unstyled'>{entries}</ul>
</div>;
}
}
--
GitLab