WIT changes for polymer2 #2
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JSCompiler turns Object.create into ES5 compatible way which causes HTMLElement to throw. More specifically, Polymer uses Object.create to create a subclass of HTMLElement but JSC turns it into HTMLElement.call(this) which causes browser runtime to throw. Object.create was introduced to main stream as part of ES2015.
- content -> slot - customStyle -> style.setProperty - ::content -> ::slotted(selector)
Cause: 1. Lifecycle methods have changed and component gets attached to DOM even if it is used conditionally with dom-if. Specifically, behavior of `attached` has changed. 2. Child components can no longer reason and know to rerender the chart as restamp almost became meaningless. We now use, at the dashboard level, decide to set active state of the card based on tf-category-pane and state of the tf-paginated-view.
As per https://developer.mozilla.org/en-US/docs/Web/CSS/:host(), we have been using incorrect/non-standard syntax for defining a selector on :host. This change addresses that.
Polymer 2 conforms to the WebComponent standard and now only supports usage of slot with the "slot" property instead of the classname. This change exclusively fixed the usages of dashboard-style.
Nature of the changes: with Polymer upgrade, we now use the real shadowDOM and our app broke because of that. Some of the changes are: 1. Incorrect selector: instead of global/element.querySelector, we now use the proper Polymer API or use querySelector on a shadowRoot. 2. CSS changes: "::content" is deprecated. 3. CSS stylesheet is mostly sandboxed and changed document.styleSheets to copy only the necessary portions. 3. SVG definition is no longer global: we factored out common symbols as definitions but it was written as global object -- defs were defined in tf-graph-scene and was used in tf-graph-controls or tf-node-info. This is partially fixed. Functional break that was not addressed: 1. node toggle is broken 2. fit to screen is broken 3. tf-graph-controls' legend is not rendering correctly. In subsequent changes, we will address them.
tf-graph-icon now is very generic icon rendering component that takes in type and colors. tf-node-icon now contains the business logic of extracting color information from a node information.
SVG's defs tag allows SVG to reuse an element or define an element that would be used as part of mask. This, in convential web used to be global to the document but with real shadow DOM, it now is encapsulated well inside a WebComponent. This became a problem for TensorBoard for folowing reason. tf-graph-scene defines all the reusable gradient/elements for other components to use and with the real shadow DOM, tf-graph-controls and node info module broke badly. Now, this is partially alleviated by factoring out icon rendering into a shareable component that renders all appropriate SVG elements. However, color is a bit trickier. Color, though is only a handful of predefined set, currently is defined per node and a color definition includes a name of the node. For this reason, currently, we dynamically define the gradients for each nodes as it is used in tf-graph-scene and this behavior needed to be changed so we populate the gradients whereever it was being used.
tf-graph-controls was using global querySelector which does not work as expected with WebComponents. This code was especially less ideal since tf-graph-controls does not render tf-graph-scene. Addressed the issue by bubbling up user's action to a component that renders the tf-graph-scene and created public fit method for all components that are in between tf-graph-dashboard and tf-graph-scene.
Few problems: 1. listener broke 2. traceInput method was doing a global querySelector Solution: Instead of mutating the DOM in the tf-graph-controls, in this change, we decided to just propagate that information to the graph rendering component, tf-graph-scene. tf-graph-scene now using that information makes necessary DOM modification.
Few problems: 1. listener broke 2. traceInput method was doing a global querySelector Solution: Instead of mutating the DOM in the tf-graph-controls, in this change, we decided to just propagate that information to the graph rendering component, tf-graph-scene. tf-graph-scene now using that information makes necessary DOM modification.
Problem: used global query selector to find ".context-menu" in the entire document. Solution: graph scene now provides an API for accessing the DOM useful for rendering the context-menu.
Problem: info panel was firing event to a sibling component which is obtain via global querySelector Solution: now tf-graph supports API for add/removing and group/ungroup a node from the renderHierachy. The tf-node-info simply communicate user's intent via event which tf-graph-board listens to and makes appropriate API calls to the tf-graph.
This now conforms to the new API.
stephanwlee
force-pushed
the
polymer
branch
4 times, most recently
from
21f11de to
8f61966
Compare
stephanwlee
force-pushed
the
polymer
branch
4 times, most recently
from
91716d1 to
16eb29a
Compare
stephanwlee
force-pushed
the
polymer
branch
8 times, most recently
from
056a25c to
8319b87
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updates to What-If Tool and deps to get it working in polymer2 on top of your polymer branch.