diff options
Diffstat (limited to 'tensorflow/tensorboard/components/hydrogen-join')
| -rw-r--r-- | tensorflow/tensorboard/components/hydrogen-join/demo/index.html | 118 | ||||
| -rw-r--r-- | tensorflow/tensorboard/components/hydrogen-join/hydrogen-join.html | 118 |
2 files changed, 236 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/hydrogen-join/demo/index.html b/tensorflow/tensorboard/components/hydrogen-join/demo/index.html new file mode 100644 index 0000000000..238cff294d --- /dev/null +++ b/tensorflow/tensorboard/components/hydrogen-join/demo/index.html @@ -0,0 +1,118 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + <title>tf-graph Demo</title> + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="../hydrogen-join.html"> + <link rel="import" href="../../../bower_components/paper-button/paper-button.html"> + <link rel="import" href="../../../bower_components/paper-slider/paper-slider.html"> + </head> + + <style> + body { + font-family: "RobotoDraft","Roboto",sans-serif; + font-size: 14; + } + </style> + + <body unresolved> + <dom-module id="button-press-counter"> + <style> + paper-button { + background-color: #4DB6AC; + color: white; + } + </style> + <template> + <paper-button raised on-click="increment"><span>[[count]]<span></paper-button> + </template> + <script> + Polymer({ + is: "button-press-counter", + properties: {count: {notify: true, value: 0}}, + increment: function() {this.count++;} + }); + </script> + </dom-module> + + <dom-module id="args-demo"> + <template> + <h1>args-demo</h1> + <button-press-counter count="{{in1}}"></button-press-counter> + <button-press-counter count="{{in2}}"></button-press-counter> + <button-press-counter count="{{in3}}"></button-press-counter> + <hydrogen-join + in1="[[in1]]" + in2="[[in2]]" + in3="[[in3]]" + out="{{out}}" + id="argsjoin" + ></hydrogen-join> + <p>Output from the hydrogen-join: <span>[[out]]</span></p> + </template> + <script> + Polymer({ + is: "args-demo", + properties: { + in1: Number, + in2: Number, + in3: Number, + out: Array, + }, + }); + </script> + </dom-module> + + <dom-module id="repeat-demo"> + <style> + .button { + padding: 3px; + margin-bottom: 4px; + display: inline-block; + } + </style> + <template> + <h1>repeat-demo</h1> + <hydrogen-join id="repeatjoin" in-join-property="count" out="{{out}}"> + <template is="dom-repeat" items="[[counters]]"> + <button-press-counter class="button" count="[[item]]"></button-press-counter> + </template> + </hydrogen-join> + <br> + <p> Move this slider to add/remove buttons. It stays synced! What magic! </p> + <paper-slider min="0" max="20" value="{{nCounters}}"></paper-slider> + <p>Output from the hydrogen-join: <span>[[out]]</span></p> + </template> + <script> + Polymer({ + is: "repeat-demo", + properties: { + nCounters: {type: Number, value: 10}, + counters: {type: Array, computed: "_makeCounters(nCounters)"}, + }, + _makeCounters: function(nCounters) { + var c = []; + for (var i=0; i<nCounters; i++) { + c.push(i); + } + return c; + } + }); + </script> + </dom-module> + + <args-demo id="argsdemo"></args-demo> + <repeat-demo id="repeatdemo"></repeat-demo> + </body> +</html> diff --git a/tensorflow/tensorboard/components/hydrogen-join/hydrogen-join.html b/tensorflow/tensorboard/components/hydrogen-join/hydrogen-join.html new file mode 100644 index 0000000000..9f8dcfe2af --- /dev/null +++ b/tensorflow/tensorboard/components/hydrogen-join/hydrogen-join.html @@ -0,0 +1,118 @@ +<link rel="import" href="../../bower_components/polymer/polymer.html"> + +<!-- +A plumber component which joins a number of input bindings. It outputs a list +consisting of all of the inputs that are not null or undefined. + +It can take explicit arguments [in0...in98] or it can pull its arguments from +a dom-repeat template, provided that it is given the property name it is looking +for on the repeated children, and that property has {notify: true}. The repeat +binding involves some magic and may not be totally reliable; ping danmane@ if +something goes wrong. + +Example: + <hydrogen-join + in1="[[foo1]]" + in2="[[foo2]]" + in3="[[foo3]]" + out="{{foos}}" // equivalent to [foo1].push(foo2).push(foo3) + ></hydrogen-join> + + <hydrogen-join out="{{foo}}" in-join-property="out"> + <template is="dom-repeat" items="[[foos]]"> + <foo item="[[item]]"></foo> //foo has a property out: {type: Array, notify: true} + </template> + </hydrogen-join> + +Swapping the inJoinProperty is not currently supported, it will warn if you try. + +There's a possible bug in repeat mode if an element is removed from the dom-repeat, +but continues to exist somewhere else, and continues to fire property-changed events. +Then the hydrogen-join will inappropriately record its value, even though it is not +still connected in hydrogen-join's DOM. + +@demo +--> +<dom-module id="hydrogen-join"> + <script> + var declaration = { + is: 'hydrogen-join', + properties: { + out: {type: Array, readOnly: true, notify: true}, + _items: {type: Array, value: function() {return [];}}, + /* Property to pull from dom-repeated child nodes and then pull and join */ + inJoinProperty: {type: String, observer: "_modifyJoinProperty"}, + }, + listeners: { + "dom-change": "_syncListenersAndState", + }, + /* If we are in repeat-mode, ensure all event listeners are setup, and pull + * items out of whatever children currently exist + */ + _syncListenersAndState: function() { + if (this.inJoinProperty == null) { + // this codepath is for pulling properties out of children in a repeat + return; + } + function repeatUpdateFunction(i) { + return function(e) { + this._items[i] = e.detail.value; + // Debounce just in case something else thrashes + this.debounce("updateOut", this._updateOutput) + } + } + // create a new items array to replace the old one, otherwise old items + // might never get removed when their corresponding element leaves + this._items = []; + // Sadly, we need to bind an update function onto every child node, + // because the property-changed event does not bubble. + for (var i=0; i<this.childNodes.length; i++) { + var child = this.childNodes[i]; + if (child.properties != null && child.properties[this.inJoinProperty] != null) { + child.addEventListener(this.inJoinProperty + "-changed", repeatUpdateFunction(i).bind(this)); + this._items[i] = child[this.inJoinProperty]; + } + } + this._updateOutput(); + }, + _modifyJoinProperty: function(newJoinProperty, oldJoinProperty) { + if (oldJoinProperty != null) { + console.warning("Changing the join property may be unsafe. Have fun!"); + } + this._syncListenersAndState(); + }, + _updateOutput: function() { + var out = []; + for (var i=0; i<99; i++) { + if (this._items[i] != null) { + out.push(this._items[i]); + } + } + this._setOut(out); + } + }; + + /* Programatically add properties in0-in98, with associated observers */ + function argsUpdateFunction(i) { + return function(newval) { + this._items[i] = newval; + if (i === 98) { + console.warn("You're updating the last arg (98). Possibly some values are being lost"); + } + if (this.inJoinProperty != null) { + console.warn("It looks like you're providing a join property and also arguments. This is not supported.") + } + this.debounce("updateOut", this._updateOutput) + } + } + // I got 99 arguments and ain't off by 1! + for (var i = 0; i < 99; i++) { + var propName = "in" + i; + var updateName = "_update" + i; + var property = {type: Object, observer: updateName}; + declaration.properties[propName] = property; + declaration[updateName] = argsUpdateFunction(i); + } + Polymer(declaration); + </script> +</dom-module> |