Fix website control panel (#3193)

visgl · Jun 5, 2019 · 7a9c3d3 · 7a9c3d3
1 parent c3913ed
commit 7a9c3d3
Showing 1 changed file with 23 additions and 13 deletions.
diff --git a/website/src/components/info-panel.js b/website/src/components/info-panel.js
@@ -1,3 +1,4 @@
+/* eslint import/namespace: ['error', { allowComputed: true }] */
 /* global window */
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
@@ -9,19 +10,20 @@ import * as Demos from './demos';
 import {updateParam} from '../actions/app-actions';
 
 class InfoPanel extends Component {
-
   constructor(props) {
     super(props);
     this.state = {hasFocus: false};
     this._blurTimer = null;
   }
 
-  @autobind _onFocus() {
+  @autobind
+  _onFocus() {
     window.clearTimeout(this._blurTimer);
     this.setState({hasFocus: true});
   }
 
-  @autobind _onBlur() {
+  @autobind
+  _onBlur() {
     // New focus is not yet available when blur event fires.
     // Wait a bit and if no onfocus event is fired, remove focus
     this._blurTimer = window.setTimeout(() => {
@@ -36,21 +38,26 @@ class InfoPanel extends Component {
     const metaLoaded = owner === demo ? meta : {};
 
     return (
-      <div className={`options-panel top-right ${hasFocus ? 'focus' : ''}`}
+      <div
+        className={`options-panel top-right ${hasFocus ? 'focus' : ''}`}
         tabIndex="0"
         onFocus={this._onFocus}
-        onBlur={this._onBlur} >
-
+        onBlur={this._onBlur}
+      >
         {DemoComponent.renderInfo(metaLoaded)}
 
         {Object.keys(params).length > 0 && <hr />}
 
-        {Object.keys(params).map((name, i) => (
-          <GenericInput key={i}
-            name={name}
-            {...params[name]}
-            onChange={this.props.updateParam} />
-        ))}
+        {Object.keys(params)
+          .sort()
+          .map((name, i) => (
+            <GenericInput
+              key={`${i}-${name}`}
+              name={name}
+              {...params[name]}
+              onChange={this.props.updateParam}
+            />
+          ))}
 
         {this.props.children}
 
@@ -60,4 +67,7 @@ class InfoPanel extends Component {
   }
 }
 
-export default connect(state => state.vis, {updateParam})(InfoPanel);
+export default connect(
+  state => state.vis,
+  {updateParam}
+)(InfoPanel);