Properties pane added

Summary:
A properties-like grid pane was added to enable setting/changing values in python/lua backend.

* A `PropertiesPane` was added, displayed using `vis.properties()`
* New `PropertyUpdate` event added to propagate events to backend

* Key press events interfered with textbox input in property pane, so I was forced to move the key events from main canvas to `TextPane`. Main canvas still catches key events, but just publishes them to newly added `EventSystem` (simple event queue implementation). `TextPane` subscribes to the queue and thru `appApi` sends the event as was before.
* `appApi` was added to props of Panes containing just `sendPaneMessage` - a message from the pane that will be forwarded to backend (with the evironment and pane id added)
* CSS styling of focused pane changed - now just a widow header bar (title) is higlighted on focused window, not window content (it was ugly in properties pane and)

Example of usage is in `demo-properties.py`. It shows that even a backend validation can be done (when `PropertyUpdate` event is received, the `viz.properties()` can be called again with previous or updated values.
Closes #361

Differential Revision: D8162524

Pulled By: JackUrb

fbshipit-source-id: 80480377f178456701557fc87907a68b46fda3ea

Author: Petr Hlubu?ek

README.md

@@ -58,12 +58,15 @@ You can subscribe a window to events by adding a function to the event handlers
 
 Additional parameters are defined below.
 
-Right now two callback events are supported:
+Right now three callback events are supported:
 
 1. `Close` - Triggers when a window is closed. Returns a dict with only the aforementioned fields.
 2. `KeyPress` - Triggers when a key is pressed. Contains additional parameters:
     - `key` - A string representation of the key pressed (applying state modifiers such as SHIFT)
     - `key_code` - The javascript event keycode for the pressed key (no modifiers)
+3. `PropertyUpdate` - Triggers when a property is updated in Property pane
+    - `propertyId` - Position in properties list
+    - `value` - New property value    
 
 ### Environments
 <p align="center"><img align="center" src="https://user-images.githubusercontent.com/1276867/34618198-fc63976c-f20b-11e7-9c0d-060132fdb37e.png" width="300" /></p>
@@ -229,6 +232,7 @@ Visdom offers the following basic visualization functions:
 - [`vis.image`](#visimage)    : image
 - [`vis.images`](#visimages)   : list of images
 - [`vis.text`](#vistext)     : arbitrary HTML
+- [`vis.properties`](#visproperties)     : properties grid
 - [`vis.audio`](#visaudio)    : audio
 - [`vis.video`](#visvideo)    : videos
 - [`vis.svg`](#vissvg)      : SVG object
@@ -302,6 +306,33 @@ This function prints text in a  box. You can use this to embed arbitrary HTML.
 It takes as input a `text` string.
 No specific `opts` are currently supported.
 
+#### vis.properties
+This function shows editable properties in a pane. Properties are expected to be a List of Dicts e.g.:
+```
+    properties = [
+        {'type': 'text', 'name': 'Text input', 'value': 'initial'},
+        {'type': 'number', 'name': 'Number input', 'value': '12'},
+        {'type': 'button', 'name': 'Button', 'value': 'Start'},
+        {'type': 'checkbox', 'name': 'Checkbox', 'value': True},
+        {'type': 'select', 'name': 'Select', 'value': 1, 'values': ['Red', 'Green', 'Blue']},
+    ]
+```
+Supported types:
+ - text: string
+ - number: decimal number
+ - button: button labeled with "value"
+ - checkbox: boolean value rendered as a checkbox 
+ - select: multiple values select box
+    - `value`: id of selected value (zero based)
+    - `values`: list of possible values
+ 
+Callback are called on property value update:
+ - `event_type`: `"PropertyUpdate"`
+ - `propertyId`: position in the `properties` list
+ - `value`: new value
+
+No specific `opts` are currently supported.
+
 #### vis.audio
 This function plays audio. It takes as input the filename of the audio
 file or an `N` tensor containing the waveform (use an `Nx2` matrix for stereo

example/demo-properties.py

@@ -0,0 +1,110 @@
+# Copyright 2017-present, Facebook, Inc.
+# All rights reserved.
+#
+# This source code is licensed under the license found in the
+# LICENSE file in the root directory of this source tree.
+
+from __future__ import absolute_import
+from __future__ import division
+from __future__ import print_function
+from __future__ import unicode_literals
+
+from visdom import Visdom
+import time
+import numpy as np
+
+try:
+    viz = Visdom()
+
+    startup_sec = 1
+    while not viz.check_connection() and startup_sec > 0:
+        time.sleep(0.1)
+        startup_sec -= 0.1
+    assert viz.check_connection(), 'No connection could be formed quickly'
+
+    # image callback demo
+    def show_color_image_window(color, win=None):
+        image = np.full([3, 256, 256], color, dtype=float)
+        return viz.image(
+            image,
+            opts=dict(title='Colors', caption='Press arrows to alter color.'),
+            win=win
+        )
+
+    image_color = 0
+    callback_image_window = show_color_image_window(image_color)
+
+    def image_callback(event):
+        global image_color
+        if event['event_type'] == 'KeyPress':
+            if event['key'] == 'ArrowRight':
+                image_color = min(image_color + 0.2, 1)
+            if event['key'] == 'ArrowLeft':
+                image_color = max(image_color - 0.2, 0)
+            show_color_image_window(image_color, callback_image_window)
+
+    viz.register_event_handler(image_callback, callback_image_window)
+
+    # text window with Callbacks
+    txt = 'This is a write demo notepad. Type below. Delete clears text:<br>'
+    callback_text_window = viz.text(txt)
+
+    def type_callback(event):
+        if event['event_type'] == 'KeyPress':
+            curr_txt = event['pane_data']['content']
+            if event['key'] == 'Enter':
+                curr_txt += '<br>'
+            elif event['key'] == 'Backspace':
+                curr_txt = curr_txt[:-1]
+            elif event['key'] == 'Delete':
+                curr_txt = txt
+            elif len(event['key']) == 1:
+                curr_txt += event['key']
+            viz.text(curr_txt, win=callback_text_window)
+
+    viz.register_event_handler(type_callback, callback_text_window)
+
+    # Properties window
+    properties = [
+        {'type': 'text', 'name': 'Text input', 'value': 'initial'},
+        {'type': 'number', 'name': 'Number input', 'value': '12'},
+        {'type': 'button', 'name': 'Button', 'value': 'Start'},
+        {'type': 'checkbox', 'name': 'Checkbox', 'value': True},
+        {'type': 'select', 'name': 'Select', 'value': 1, 'values': ['Red', 'Green', 'Blue']},
+    ]
+
+    properties_window = viz.properties(properties)
+
+    def properties_callback(event):
+        if event['event_type'] == 'PropertyUpdate':
+            prop_id = event['propertyId']
+            value = event['value']
+            if prop_id == 0:
+                new_value = value + '_updated'
+            elif prop_id == 1:
+                new_value = value + '0'
+            elif prop_id == 2:
+                new_value = 'Stop' if properties[prop_id]['value'] == 'Start' else 'Start'
+            else:
+                new_value = value
+            properties[prop_id]['value'] = new_value
+            viz.properties(properties, win=properties_window)
+            viz.text("Updated: {} => {}".format(properties[event['propertyId']]['name'], str(event['value'])),
+                     win=callback_text_window, append=True)
+
+    viz.register_event_handler(properties_callback, properties_window)
+
+    try:
+        input = raw_input  # for Python 2 compatibility
+    except NameError:
+        pass
+    input('Waiting for callbacks, press enter to quit.')
+except BaseException as e:
+    print(
+        "The visdom experienced an exception while running: {}\n"
+        "The demo displays up-to-date functionality with the GitHub version, "
+        "which may not yet be pushed to pip. Please upgrade using "
+        "`pip install -e .` or `easy_install .`\n"
+        "If this does not resolve the problem, please open an issue on "
+        "our GitHub.".format(repr(e))
+    )

js/EventSystem.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+class EventSystem {
+    constructor() {
+        this.queue = {};
+    }
+
+    publish(event, data) {
+        let queue = this.queue[event];
+
+        if (typeof queue === 'undefined') {
+            return false;
+        }
+
+        queue.forEach((cb) => cb(data));
+
+        return true;
+    }
+
+    subscribe(event, callback) {
+        if (typeof this.queue[event] === 'undefined') {
+            this.queue[event] = [];
+        }
+
+        this.queue[event].push(callback);
+    }
+
+    //  the callback parameter is optional. Without it the whole event will be
+    // removed, instead of just one subscibtion. Fine for simple implementation
+    unsubscribe(event, callback) {
+        let queue = this.queue;
+
+        if (typeof queue[event] !== 'undefined') {
+            if (typeof callback === 'undefined') {
+                delete queue[event];
+            } else {
+                this.queue[event] = queue[event].filter(function(sub) {
+                    return sub !== callback;
+                })
+            }
+        }
+    }
+}
+
+module.exports = new EventSystem();

js/ImagePane.js

@@ -7,6 +7,7 @@
  *
  */
 
+import EventSystem from "./EventSystem";
 const Pane = require('./Pane');
 
 class ImagePane extends React.Component {
@@ -18,6 +19,35 @@ class ImagePane extends React.Component {
     ty: 0.,
   }
 
+  onEvent = (e) => {
+      if( !this.props.isFocused ) {
+          return;
+      }
+
+      switch(e.type) {
+          case 'keydown':
+          case 'keypress':
+              e.preventDefault();
+              break;
+          case 'keyup':
+              this.props.appApi.sendPaneMessage(
+                  {
+                      event_type: 'KeyPress',
+                      key: event.key,
+                      key_code: event.keyCode,
+                  }
+              );
+              break;
+      }
+  };
+
+  componentDidMount() {
+      EventSystem.subscribe('global.event', this.onEvent)
+  }
+  componentWillMount() {
+      EventSystem.unsubscribe('global.event', this.onEvent)
+  }
+
   handleDownload = () => {
     var link = document.createElement('a');
     link.download = `${this.props.title || 'visdom_image'}.jpg`;

js/PropertiesPane.js

@@ -0,0 +1,127 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const Pane = require('./Pane');
+
+
+class Text extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {value: props.value};
+    }
+
+    handleChange = (event) => {
+        let newValue = event.target.value;
+        if( this.props.validateHandler && !this.props.validateHandler(newValue)) {
+            event.preventDefault();
+        } else {
+            this.setState({value: newValue});
+        }
+    };
+
+    handleKeyPress = (event) => {
+        if( event.key === "Enter") {
+            if( this.props.submitHandler ) {
+                this.props.submitHandler(this.state.value);
+            }
+        }
+    };
+
+    componentWillReceiveProps(nextProps) {
+        if( this.state.value !== nextProps.value) {
+            this.setState({value: nextProps.value});
+        }
+    }
+
+    render() {
+        return (
+            <input type="text" value={this.state.value} onChange={this.handleChange} onKeyPress={this.handleKeyPress}/>
+        );
+    }
+}
+
+class PropertiesPane extends React.Component {
+
+  handleDownload = () => {
+    var blob = new Blob([JSON.stringify(this.props.content)], {type:"application/json"});
+    var url = window.URL.createObjectURL(blob);
+    var link = document.createElement("a");
+    link.download = 'visdom_properties.json';
+    link.href = url;
+    link.click();
+  };
+
+  updateValue = (propId, value) => {
+      this.props.onFocus(this.props.id, () => {
+          this.props.appApi.sendPaneMessage(
+              {
+                  event_type: 'PropertyUpdate',
+                  propertyId: propId,
+                  value: value
+              }
+          );
+      });
+  };
+
+  renderPropertyValue = (prop, propId) => {
+      switch(prop.type) {
+          case 'text':
+              return <Text
+                  value={prop.value}
+                  submitHandler={(value) => this.updateValue(propId, value)}
+              />;
+          case 'number':
+              return <Text
+                  value={prop.value}
+                  submitHandler={(value) => this.updateValue(propId, value)}
+                  validateHandler={(value) => value.match(/^[0-9]*([.][0-9]*)?$/i)}
+              />;
+          case 'button':
+              return <button
+                  className="btn btn-sm"
+                  onClick={() => this.updateValue(propId, "clicked")}
+              >{prop.value}</button>
+          case 'checkbox':
+              return <label className="checkbox-inline">
+                  <input
+                      type="checkbox"
+                      checked={prop.value}
+                      onChange={() => this.updateValue(propId, !prop.value)}
+                  />
+                  &nbsp;
+              </label>;
+          case 'select':
+              return <select className="form-control"
+                             onChange={(event) => this.updateValue(propId, event.target.value)}
+                             value={prop.value}
+              >
+                  {prop.values.map((name, id) => <option value={id}>{name}</option>)}
+              </select>;
+      }
+  };
+
+  render() {
+     return (
+      <Pane {...this.props} handleDownload={this.handleDownload}>
+        <div className="content-properties">
+            <table className="table table-bordered table-condensed table-properties">
+            {this.props.content.map((prop, propId) =>
+                <tr key={propId}>
+                    <td className="table-properties-name">{prop.name}</td>
+                    <td className="table-properties-value">{this.renderPropertyValue(prop, propId)}</td>
+                </tr>
+            )}
+            </table>
+        </div>
+      </Pane>
+    )
+  }
+}
+
+module.exports = PropertiesPane;