Skip to content

Commit 1ec67b5

Browse files
PessimistressPessimistress
authored
Improve demo page performance (visgl#210)
- update publish script - improve render perf
1 parent cf5f614 commit 1ec67b5

24 files changed

Lines changed: 255 additions & 202 deletions

‎demo/src/javascripts/components/demos/index.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1-
export {default as ScatterplotDemo} from './scatterplot';
2-
export {default as ArcDemo} from './arc';
3-
export {default as GridDemo} from './grid';
4-
export {default as ChoroplethDemo} from './choropleth';
5-
export {default as HeroDemo} from './hero';
1+
import {default as ScatterplotDemo} from './scatterplot';
2+
import {default as ArcDemo} from './arc';
3+
import {default as GridDemo} from './grid';
4+
import {default as ChoroplethDemo} from './choropleth';
5+
import {default as HeroDemo} from './hero';
6+
7+
export default {
8+
ScatterplotDemo,
9+
ArcDemo,
10+
GridDemo,
11+
ChoroplethDemo,
12+
HeroDemo,
13+
Home: HeroDemo
14+
};

‎demo/src/javascripts/components/home.js‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@ import Stats from 'stats.js';
33
import React, {Component} from 'react';
44
import {connect} from 'react-redux';
55

6-
import {HeroDemo} from './demos';
6+
import Demos from './demos';
77
import {loadData, updateMap, setHeaderOpacity} from '../actions/app-actions';
8-
import MapGL from 'react-map-gl';
8+
import Map from './map';
99

1010
import ViewportAnimation from '../utils/map-utils';
11-
import {MAPBOX_STYLES} from '../constants/defaults';
12-
import MAPBOX_ACCESS_TOKEN from '../constants/mapbox-token';
1311

1412
const DEMO_TAB = 0;
1513
const CONTENT_TAB = 1;
@@ -47,7 +45,7 @@ class Home extends Component {
4745

4846
this._animateRef = requestAnimationFrame(calcFPS);
4947

50-
const {data, viewport} = HeroDemo;
48+
const {data, viewport} = Demos.Home;
5149
loadData('Home', [
5250
{
5351
...data[0],
@@ -83,27 +81,15 @@ class Home extends Component {
8381
this.props.setHeaderOpacity(opacity);
8482
}
8583

86-
_renderDemo() {
87-
const {viewport, vis: {owner, data}} = this.props;
88-
const dataLoaded = owner === 'Home' ? data : null;
89-
90-
return dataLoaded && (
91-
<div className="hero">
92-
<MapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
93-
{ ...viewport } >
94-
<HeroDemo viewport={viewport} data={dataLoaded} />
95-
</MapGL>
96-
</div>
97-
);
98-
}
99-
10084
render() {
10185
const {atTop} = this.state;
10286
return (
10387
<div className={`home-wrapper ${atTop ? 'top' : ''}`}>
10488

10589
<section ref="banner" id="banner">
106-
{ this._renderDemo() }
90+
<div className="hero">
91+
<Map demo="Home" isInteractive={false} />
92+
</div>
10793
<div className="container soft-left">
10894
<h1>deck.gl</h1>
10995
<p>Large-scale WebGL-powered Data Visualization</p>

‎demo/src/javascripts/components/info-panel.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import 'babel-polyfill';
2+
import React, {Component} from 'react';
3+
import {connect} from 'react-redux';
4+
import autobind from 'autobind-decorator';
5+
6+
import GenericInput from './input';
7+
import Demos from './demos';
8+
import {updateParam} from '../actions/app-actions';
9+
10+
class InfoPanel extends Component {
11+
12+
render() {
13+
const {demo, hasFocus, onInteract, updateParam, params, owner, meta} = this.props;
14+
const DemoComponent = Demos[demo];
15+
const metaLoaded = owner === demo ? meta : {};
16+
17+
return (
18+
<div className={`options-panel top-right ${hasFocus ? 'focus' : ''}`}
19+
onClick={ onInteract }>
20+
21+
{ DemoComponent.renderInfo(metaLoaded) }
22+
23+
{ Object.keys(params).length > 0 && <hr /> }
24+
25+
{
26+
Object.keys(params).map((name, i) => (
27+
<GenericInput key={i} name={name} {...params[name]}
28+
onChange={updateParam} />
29+
))
30+
}
31+
</div>
32+
);
33+
}
34+
}
35+
36+
export default connect(state => state.vis, {updateParam})(InfoPanel);

‎demo/src/javascripts/components/input.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import 'babel-polyfill';
2+
import pureRender from 'pure-render-decorator';
23
import React, {Component} from 'react';
34

5+
@pureRender
46
export default class GenericInput extends Component {
57

68
render() {

‎demo/src/javascripts/components/map.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import 'babel-polyfill';
2+
import React, {Component} from 'react';
3+
import {connect} from 'react-redux';
4+
import autobind from 'autobind-decorator';
5+
import MapGL from 'react-map-gl';
6+
7+
import Demos from './demos';
8+
import {updateMap, updateMeta} from '../actions/app-actions';
9+
import {MAPBOX_STYLES} from '../constants/defaults';
10+
import MAPBOX_ACCESS_TOKEN from '../constants/mapbox-token';
11+
12+
class Map extends Component {
13+
14+
@autobind
15+
_onUpdateMap(viewport) {
16+
this.props.onInteract();
17+
this.props.updateMap(viewport);
18+
}
19+
20+
render() {
21+
const {viewport, demo, params, owner, data, updateMeta, isInteractive} = this.props;
22+
const DemoComponent = Demos[demo];
23+
24+
if (!DemoComponent) {
25+
return null;
26+
}
27+
28+
return (
29+
<MapGL
30+
mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
31+
perspectiveEnabled={true}
32+
{ ...viewport }
33+
onChangeViewport={ isInteractive ? this._onUpdateMap : undefined }>
34+
35+
<DemoComponent ref="demo" viewport={viewport} params={params}
36+
onStateChange={updateMeta}
37+
data={owner === demo ? data : null} />
38+
39+
</MapGL>
40+
)
41+
}
42+
43+
}
44+
45+
function mapStateToProps(state) {
46+
return {
47+
viewport: state.viewport,
48+
...state.vis
49+
}
50+
}
51+
52+
Map.defaultProps = {
53+
onInteract: () => {},
54+
isInteractive: true
55+
};
56+
57+
export default connect(mapStateToProps, {updateMap, updateMeta})(Map);

‎demo/src/javascripts/components/markdown-page.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import 'babel-polyfill';
22
import marked from 'marked';
33
import {highlight} from 'highlight.js';
44
import React, {Component, PropTypes} from 'react';
5+
import pureRender from 'pure-render-decorator';
56

67
/**
78
* This map allows you to rewrite urls present in the markdown files
@@ -27,6 +28,7 @@ const urlRewrites = {
2728
*/
2829
const imageRewrites = {};
2930

31+
@pureRender
3032
export default class MarkdownPage extends Component {
3133

3234
render() {

‎demo/src/javascripts/components/page.js‎

Lines changed: 14 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import 'babel-polyfill';
22
import React, {Component, PropTypes} from 'react';
33
import {connect} from 'react-redux';
44
import autobind from 'autobind-decorator';
5-
import MapGL from 'react-map-gl';
65

7-
import MarkdownPage from '../components/markdown-page';
8-
import GenericInput from './input';
9-
import * as Demos from './demos';
6+
import Map from './map';
7+
import InfoPanel from './info-panel';
8+
import MarkdownPage from './markdown-page';
9+
import Demos from './demos';
1010
import * as appActions from '../actions/app-actions';
1111
import ViewportAnimation from '../utils/map-utils';
12-
import {MAPBOX_STYLES} from '../constants/defaults';
13-
import MAPBOX_ACCESS_TOKEN from '../constants/mapbox-token';
1412

1513
class Page extends Component {
1614
constructor(props) {
@@ -65,12 +63,6 @@ class Page extends Component {
6563
return content;
6664
}
6765

68-
@autobind
69-
_onUpdateMap(viewport) {
70-
this.setState({mapFocus: true});
71-
this.props.updateMap(viewport);
72-
}
73-
7466
@autobind
7567
_resizeMap() {
7668
const w = window.innerWidth;
@@ -81,56 +73,19 @@ class Page extends Component {
8173
});
8274
}
8375

76+
@autobind
77+
_setMapFocus(state) {
78+
this.setState({mapFocus: state});
79+
}
80+
8481
_setActiveTab(tabName) {
8582
const {location: {pathname}} = this.props;
8683
this.context.router.replace(`${pathname}?tab=${tabName}`);
8784
}
8885

89-
_renderMap() {
90-
const {viewport, vis: {params, owner, data}, updateMeta} = this.props;
91-
const {tabs: {demo}} = this.state;
92-
const DemoComponent = Demos[demo];
93-
const dataLoaded = owner === demo ? data : null;
94-
95-
return (
96-
<MapGL
97-
mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
98-
perspectiveEnabled={true}
99-
{ ...viewport }
100-
onChangeViewport={ this._onUpdateMap }>
101-
102-
<DemoComponent ref="demo" viewport={viewport} params={params}
103-
onStateChange={updateMeta}
104-
data={dataLoaded} />
105-
106-
</MapGL>
107-
)
108-
}
109-
110-
_renderOptions() {
111-
const {vis: {params, owner, meta}} = this.props;
112-
const {tabs: {demo}, mapFocus} = this.state;
113-
const DemoComponent = Demos[demo];
114-
const metaLoaded = owner === demo ? meta : {};
115-
116-
return (
117-
<div className={`options-panel top-right ${mapFocus ? '' : 'focus'}`}
118-
onClick={ () => this.setState({mapFocus: false}) }>
119-
{ DemoComponent.renderInfo(metaLoaded) }
120-
{ Object.keys(params).length > 0 && <hr /> }
121-
{
122-
Object.keys(params).map((name, i) => (
123-
<GenericInput key={i} name={name} {...params[name]}
124-
onChange={this.props.updateParam} />
125-
))
126-
}
127-
</div>
128-
);
129-
}
130-
13186
_renderTabContent(tabName, tab) {
13287
const {contents, location} = this.props;
133-
const {tabs} = this.state;
88+
const {tabs, mapFocus} = this.state;
13489
const activeTab = location.query.tab || Object.keys(tabs)[0];
13590

13691
return Object.keys(tabs).map(tabName => {
@@ -140,8 +95,10 @@ class Page extends Component {
14095
if (tabName === 'demo') {
14196
child = (
14297
<div>
143-
{ this._renderMap() }
144-
{ this._renderOptions() }
98+
<Map demo={tab}
99+
onInteract={ this._setMapFocus.bind(this, true) } />
100+
<InfoPanel demo={tab} hasFocus={!mapFocus}
101+
onInteract={ this._setMapFocus.bind(this, false) } />
145102
</div>
146103
)
147104
} else if (typeof tab === 'string') {

‎demo/src/javascripts/components/table-of-contents.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import 'babel-polyfill';
2+
import pureRender from 'pure-render-decorator';
23
import React, {Component, PropTypes} from 'react';
34
import {Link} from 'react-router'
45

6+
@pureRender
57
export default class TableOfContents extends Component {
68

79
_renderPage(parentRoute, page, i) {

‎dist-demo/data/.DS_Store‎

6 KB
Binary file not shown.

‎dist-demo/docs/64-bits.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ in GPU shaders. 64-bit maths are used in various 64-bit layers that are provided
55
with deck.gl. Please find the sample usage of them in the examples section.
66

77
<div align="center">
8-
<img src="images/demo-mandelbrot.gif" />
8+
<img src="/demo/src/static/images/demo-mandelbrot.gif" />
99
</div>
1010

1111
<center>Mandelbrot set rendered on GPU using native 32-bit (left) math and 64-bit (right)

0 commit comments

Comments
 (0)