+
+ {
+ playing ? (
+
+ ) : (
+
+ )
+ }
+
+ );
+ }
+}
+
+export default Player;
diff --git a/src/frontend/components/Player/stylesheet.scss b/src/frontend/components/Player/stylesheet.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8aeba88da4290774b62166c3932517a0400a11f7
--- /dev/null
+++ b/src/frontend/components/Player/stylesheet.scss
@@ -0,0 +1,52 @@
+@import "~/common/stylesheet/index";
+
+.player {
+ .progress_bar {
+ width: 160px;
+ }
+
+ .interval {
+ display: flex;
+ align-items: center;
+ padding: 0 12px;
+ white-space: nowrap;
+
+ &:hover {
+ background-color: $color-shadow;
+ }
+
+ .range {
+ position: relative;
+ height: 16px;
+ width: 60px;
+ margin-left: 8px;
+
+ .range_label_container {
+ display: none;
+ }
+
+ .range_track {
+ top: 50%;
+ height: 6px;
+ margin-top: -3px;
+ background-color: $theme-light;
+ cursor: pointer;
+ display: block;
+ position: relative;
+ }
+
+ .range_slider {
+ top: 0;
+ width: 6px;
+ height: 12px;
+ margin-left: -3px;
+ margin-top: -3px;
+ appearance: none;
+ background-color: $color-font;
+ cursor: pointer;
+ display: block;
+ position: absolute;
+ }
+ }
+ }
+}
diff --git a/src/frontend/components/ProgressBar/index.jsx b/src/frontend/components/ProgressBar/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..96c9ceb049dfb687d8067e90ba082a789c4776a8
--- /dev/null
+++ b/src/frontend/components/ProgressBar/index.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { classes } from '/common/util';
+import styles from './stylesheet.scss';
+
+class ProgressBar extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleMouseDown = this.handleMouseDown.bind(this);
+ this.handleMouseMove = this.handleMouseMove.bind(this);
+ this.handleMouseUp = this.handleMouseUp.bind(this);
+ }
+
+ handleMouseDown(e) {
+ this.target = e.target;
+ console.log(this.target)
+ this.handleMouseMove(e);
+ document.addEventListener('mousemove', this.handleMouseMove);
+ document.addEventListener('mouseup', this.handleMouseUp);
+ }
+
+ handleMouseMove(e) {
+ const { left } = this.target.getBoundingClientRect();
+ const { offsetWidth } = this.target;
+ const { onChangeProgress } = this.props;
+ const progress = (e.clientX - left) / offsetWidth;
+ if (onChangeProgress) onChangeProgress(progress);
+ }
+
+ handleMouseUp(e) {
+ document.removeEventListener('mousemove', this.handleMouseMove);
+ document.removeEventListener('mouseup', this.handleMouseUp);
+ }
+
+ render() {
+ const { className, total, current } = this.props;
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default ProgressBar;
diff --git a/src/frontend/components/ProgressBar/stylesheet.scss b/src/frontend/components/ProgressBar/stylesheet.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e5663b9a9506cf5d282c49f48c57e9346a9b04d2
--- /dev/null
+++ b/src/frontend/components/ProgressBar/stylesheet.scss
@@ -0,0 +1,31 @@
+@import "~/common/stylesheet/index";
+
+.progress_bar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background-color: $theme-light;
+ cursor: pointer;
+ pointer-events: auto;
+
+ > * {
+ pointer-events: none;
+ }
+
+ .active {
+ position: absolute;
+ height: 100%;
+ left: 0;
+ background-color: $color-active;
+ }
+
+ .label {
+ position: absolute;
+ color: $theme-dark;
+
+ .current {
+ font-weight: bold;
+ }
+ }
+}
diff --git a/src/frontend/components/VisualizationViewer/index.jsx b/src/frontend/components/VisualizationViewer/index.jsx
index 880b141a0ba34ad4511515400e7c75aa53ddb2b2..2669c0c524c7b1a42be50700934d47f05a8f120b 100644
--- a/src/frontend/components/VisualizationViewer/index.jsx
+++ b/src/frontend/components/VisualizationViewer/index.jsx
@@ -1,44 +1,120 @@
import React from 'react';
+import { connect } from 'react-redux';
import { classes } from '/common/util';
import { ResizableContainer } from '/components';
+import { actions } from '/reducers';
import styles from './stylesheet.scss';
-import { tracerManager } from '../../core';
+import { Array1DData, Array2DData, ChartData, Data, GraphData, LogData, MarkdownData } from '/core/datas';
+@connect(({ player }) => ({ player }), actions)
class VisualizationViewer extends React.Component {
constructor(props) {
super(props);
this.state = {
- renderers: [],
- renderersWeights: [],
+ dataWeights: {},
};
+
+ this.datas = [];
}
componentDidMount() {
- // TODO: rendereres should remain resized
- tracerManager.setOnChangeRenderers(renderers => {
- const renderersWeights = renderers.map(() => 1);
- this.setState({ renderers, renderersWeights });
+ const { chunks, cursor } = this.props.player;
+ this.update(chunks, cursor);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { chunks, cursor } = nextProps.player;
+ const { chunks: oldChunks, cursor: oldCursor } = this.props.player;
+ if (chunks !== oldChunks || cursor !== oldCursor) {
+ this.update(chunks, cursor, oldChunks, oldCursor);
+ }
+ }
+
+ update(chunks, cursor, oldChunks = [], oldCursor = 0) {
+ let applyingChunks;
+ if (cursor > oldCursor) {
+ applyingChunks = chunks.slice(oldCursor, cursor);
+ } else {
+ this.datas = [];
+ applyingChunks = chunks.slice(0, cursor);
+ }
+ applyingChunks.forEach(chunk => this.applyChunk(chunk));
+
+ const dataWeights = chunks === oldChunks ? { ...this.state.dataWeights } : {};
+ this.datas.forEach(data => {
+ if (!(data.tracerKey in dataWeights)) {
+ dataWeights[data.tracerKey] = 1;
+ }
});
+ this.setState({ dataWeights });
+
+ const lastChunk = applyingChunks[applyingChunks.length - 1];
+ if (lastChunk && lastChunk.lineNumber !== undefined) {
+ this.props.setLineIndicator({ lineNumber: lastChunk.lineNumber, cursor });
+ } else {
+ this.props.setLineIndicator(undefined);
+ }
}
- componentWillUnmount() {
- tracerManager.setOnChangeRenderers(null);
+ addTracer(className, tracerKey, title) {
+ const DataClass = {
+ Tracer: Data,
+ MarkdownTracer: MarkdownData,
+ LogTracer: LogData,
+ Array2DTracer: Array2DData,
+ Array1DTracer: Array1DData,
+ ChartTracer: ChartData,
+ GraphTracer: GraphData,
+ }[className];
+ const data = new DataClass(tracerKey, title, this.datas);
+ this.datas.push(data);
}
- handleChangeRenderersWeights(renderersWeights) {
- this.setState({ renderersWeights });
+ applyTrace(trace) {
+ const { tracerKey, method, args } = trace;
+ try {
+ if (method === 'construct') {
+ const [className, title] = args;
+ this.addTracer(className, tracerKey, title);
+ } else {
+ const data = this.datas.find(data => data.tracerKey === tracerKey);
+ data[method](...args);
+ }
+ } catch (error) {
+ this.handleError(error);
+ }
+ }
+
+ handleError(error) {
+ console.error(error);
+ this.props.showErrorToast({ name: error.name, message: error.message });
+ }
+
+ applyChunk(chunk) {
+ chunk.traces.forEach(trace => this.applyTrace(trace));
+ }
+
+ handleChangeWeights(weights) {
+ const dataWeights = {};
+ weights.forEach((weight, i) => {
+ dataWeights[this.datas[i].tracerKey] = weight;
+ });
+ this.setState({ dataWeights });
}
render() {
const { className } = this.props;
- const { renderers, renderersWeights } = this.state;
+ const { dataWeights } = this.state;
return (
-
+ {current} / {total}
+
+