Generalize tf-scalar-chart.html #470
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,308 @@ | ||
| <!-- | ||
| @license | ||
| Copyright 2017 The TensorFlow Authors. All Rights Reserved. | ||
|
|
||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
|
|
||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| --> | ||
|
|
||
| <link rel="import" href="../paper-item/paper-item.html"> | ||
| <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html"> | ||
| <link rel="import" href="../paper-icon-button/paper-icon-button.html"> | ||
| <link rel="import" href="../paper-menu/paper-menu.html"> | ||
| <link rel="import" href="../polymer/polymer.html"> | ||
| <link rel="import" href="../tf-backend/tf-backend.html"> | ||
| <link rel="import" href="../tf-card-heading/tf-card-heading.html"> | ||
| <link rel="import" href="../vz-line-chart/vz-line-chart.html"> | ||
| <link rel="import" href="tf-scalar-chart.html"> | ||
|
|
||
| <!-- | ||
| A card that handles loading data (at the right times), rendering a scalar | ||
| chart, and providing UI affordances (such as buttons) for scalar data. | ||
| --> | ||
| <dom-module id="tf-scalar-card"> | ||
| <template> | ||
| <tf-card-heading | ||
| tag="[[tag]]" | ||
| display-name="[[tagMetadata.displayName]]" | ||
| description="[[tagMetadata.description]]" | ||
| ></tf-card-heading> | ||
| <tf-scalar-chart | ||
| x-type="[[xType]]" | ||
| x-components-creation-method="[[_xComponentsCreationMethod]]" | ||
| y-value-accessor="[[_yValueAccessor]]" | ||
| tooltip-columns="[[_tooltipColumns]]" | ||
| smoothing-enabled="[[smoothingEnabled]]" | ||
| smoothing-weight="[[smoothingWeight]]" | ||
| tooltip-sorting-method="[[tooltipSortingMethod]]" | ||
| ignore-y-outliers="[[ignoreYOutliers]]" | ||
| request-manager="[[requestManager]]" | ||
| runs="[[runs]]" | ||
| tag="[[tag]]" | ||
| tag-metadata="[[tagMetadata]]" | ||
| active="[[active]]" | ||
| data-url="[[_dataUrl]]" | ||
| log-scale-active="[[_logScaleActive]]" | ||
| process-data="[[_processData]]" | ||
| > | ||
| <div id="buttons"> | ||
| <paper-icon-button | ||
| selected$="[[_expanded]]" | ||
| icon="fullscreen" | ||
| on-tap="_toggleExpanded" | ||
| ></paper-icon-button> | ||
| <paper-icon-button | ||
| selected$="[[_logScaleActive]]" | ||
| icon="line-weight" | ||
| on-tap="_toggleLogScale" | ||
| title="Toggle y-axis log scale" | ||
| ></paper-icon-button> | ||
| <paper-icon-button | ||
| icon="settings-overscan" | ||
| on-tap="_resetDomain" | ||
| title="Fit domain to data" | ||
| ></paper-icon-button> | ||
| <span style="flex-grow: 1"></span> | ||
| <template is="dom-if" if="[[showDownloadLinks]]"> | ||
| <div class="download-links"> | ||
| <paper-dropdown-menu | ||
| no-label-float="true" | ||
| label="run to download" | ||
| selected-item-label="{{_runToDownload}}" | ||
| > | ||
| <paper-menu class="dropdown-content" slot="dropdown-content"> | ||
| <template is="dom-repeat" items="[[runs]]"> | ||
| <paper-item no-label-float=true>[[item]]</paper-item> | ||
| </template> | ||
| </paper-menu> | ||
| </paper-dropdown-menu> | ||
| <a | ||
| download="run_[[_runToDownload]]-tag-[[tag]].csv" | ||
| href="[[_csvUrl(tag, _runToDownload)]]" | ||
| >CSV</a> <a | ||
| download="run_[[_runToDownload]]-tag-[[tag]].json" | ||
| href="[[_jsonUrl(tag, _runToDownload)]]" | ||
| >JSON</a> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </div> | ||
| </tf-scalar-chart> | ||
| <style> | ||
| :host { | ||
| height: 235px; | ||
| width: 330px; | ||
| margin: 5px; | ||
| display: block; | ||
| } | ||
|
|
||
| :host[_expanded] { | ||
| height: 400px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| tf-card-heading { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| #buttons { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| paper-icon-button { | ||
| color: #2196F3; | ||
| border-radius: 100%; | ||
| width: 32px; | ||
| height: 32px; | ||
| padding: 4px; | ||
| } | ||
|
|
||
| paper-icon-button[selected] { | ||
| background: var(--tb-ui-light-accent); | ||
| } | ||
|
|
||
| .download-links { | ||
| display: flex; | ||
| height: 32px; | ||
| } | ||
|
|
||
| .download-links a { | ||
| font-size: 10px; | ||
| align-self: center; | ||
| margin: 2px; | ||
| } | ||
|
|
||
| .download-links paper-dropdown-menu { | ||
| width: 100px; | ||
| --paper-input-container-label: { | ||
| font-size: 10px; | ||
| } | ||
| --paper-input-container-input: { | ||
| font-size: 10px; | ||
| } | ||
| } | ||
| </style> | ||
| </template> | ||
| <script> | ||
| import {addParams} from '../tf-backend/urlPathHelpers.js'; | ||
|
There was a problem hiding this comment. Note: Sometime in Q4 we're most likely going to be refactoring the codebase to move these script tags out into separate .js or .ts files, so we can use rules_typescript. Doesn't need to happen now. There was a problem hiding this comment. OK. @wchargin noted advantages to keeping scripts inline to make them easier to follow, but it would be nice to support the BUILD rules. |
||
| import * as ChartHelpers from '../vz-line-chart/vz-chart-helpers.js'; | ||
| import {getRouter} from '../tf-backend/router.js'; | ||
|
|
||
| /** | ||
| * Allows: | ||
| * - "step" - Linear scale using the "step" property of the datum. | ||
| * - "wall_time" - Temporal scale using the "wall_time" property of the | ||
| * datum. | ||
| * - "relative" - Temporal scale using the "relative" property of the | ||
| * datum if it is present or calculating from "wall_time" if it isn't. | ||
| * @enum {string} | ||
| */ | ||
| const X_TYPE = { | ||
| STEP: 'step', | ||
| RELATIVE: 'relative', | ||
| WALL_TIME: 'wall_time', | ||
| }; | ||
|
|
||
| Polymer({ | ||
| is: 'tf-scalar-card', | ||
| properties: { | ||
| runs: Array, // of String | ||
| tag: String, | ||
|
|
||
| /** | ||
| * @type {X_TYPE} | ||
| */ | ||
| xType: String, | ||
|
|
||
| active: Boolean, | ||
| ignoreYOutliers: Boolean, | ||
| requestManager: Object, | ||
| showDownloadLinks: Boolean, | ||
| smoothingEnabled: Boolean, | ||
| smoothingWeight: Number, | ||
| tagMetadata: Object, | ||
| tooltipSortingMethod: String, | ||
|
|
||
| // This function is called when data is received from the backend. | ||
| _processData: { | ||
| type: Object, | ||
| value: () => ((scalarChart, run, data) => { | ||
| const formattedData = data.map(datum => ({ | ||
| wall_time: new Date(datum[0] * 1000), | ||
| step: datum[1], | ||
| scalar: datum[2], | ||
| })); | ||
| scalarChart.setSeriesData(run, formattedData); | ||
| }), | ||
| readOnly: true, | ||
| }, | ||
|
|
||
| _expanded: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true, // for CSS | ||
| }, | ||
|
|
||
| _logScaleActive: Boolean, | ||
|
|
||
| _dataUrl: { | ||
| type: Function, | ||
| value: () => (tag, run) => addParams( | ||
| getRouter().pluginRoute('scalars', '/scalars'), {tag, run}), | ||
| }, | ||
|
|
||
| _xComponentsCreationMethod: { | ||
| type: Object, | ||
| computed: '_computeXComponentsCreationMethod(xType)', | ||
| }, | ||
|
|
||
| _yValueAccessor: { | ||
| type: Object, | ||
| readOnly: true, | ||
| value: () => { | ||
| return d => d.scalar; | ||
| }, | ||
| }, | ||
|
|
||
| _tooltipColumns: { | ||
| type: Array, | ||
| readOnly: true, | ||
| value: () => { | ||
| const valueFormatter = ChartHelpers.multiscaleFormatter( | ||
| ChartHelpers.Y_TOOLTIP_FORMATTER_PRECISION); | ||
| const formatValueOrNaN = | ||
| (x) => isNaN(x) ? 'NaN' : valueFormatter(x); | ||
| return [ | ||
| { | ||
| title: 'Name', | ||
| evaluate: (d) => d.dataset.metadata().name, | ||
| }, | ||
| { | ||
| title: 'Smoothed', | ||
| evaluate: (d, statusObject) => formatValueOrNaN( | ||
| statusObject.smoothingEnabled ? | ||
| d.datum.smoothed : d.datum.scalar), | ||
| }, | ||
| { | ||
| title: 'Value', | ||
| evaluate: (d) => formatValueOrNaN(d.datum.scalar), | ||
| }, | ||
| { | ||
| title: 'Step', | ||
| evaluate: (d) => ChartHelpers.stepFormatter(d.datum.step), | ||
| }, | ||
| { | ||
| title: 'Time', | ||
| evaluate: (d) => ChartHelpers.timeFormatter(d.datum.wall_time), | ||
| }, | ||
| { | ||
| title: 'Relative', | ||
| evaluate: | ||
| (d) => ChartHelpers.relativeFormatter( | ||
| ChartHelpers.relativeAccessor(d.datum, -1, d.dataset)), | ||
| }, | ||
| ] | ||
| }, | ||
| }, | ||
| }, | ||
| reload() { | ||
| this.$$('tf-scalar-chart').reload(); | ||
| }, | ||
| redraw() { | ||
| this.$$('tf-scalar-chart').redraw(); | ||
| }, | ||
| _toggleExpanded(e) { | ||
| this.set('_expanded', !this._expanded); | ||
| this.redraw(); | ||
| }, | ||
| _toggleLogScale() { | ||
| this.set('_logScaleActive', !this._logScaleActive); | ||
| }, | ||
| _resetDomain() { | ||
| const chart = this.$$('vz-line-chart'); | ||
| if (chart) { | ||
| chart.resetDomain(); | ||
| } | ||
| }, | ||
| _csvUrl(tag, run) { | ||
| return addParams(this._dataUrl(tag, run), {format: 'csv'}); | ||
| }, | ||
| _jsonUrl(tag, run) { | ||
| return this._dataUrl(tag, run); | ||
| }, | ||
| _computeXComponentsCreationMethod(xType) { | ||
| return () => ChartHelpers.getXComponents(xType); | ||
| }, | ||
| }); | ||
| </script> | ||
| </dom-module> | ||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[optional] Consider putting a
<figure>tag around all this stuff, since I programmed tf-card-heading earlier to use figcaption. I'm not sure what the benefit would be, but it is nice semantic HTML. Possibly also make the div buttons below a figcaption.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, the hard part is that
<figcaption>must be the first or last child within a<figure>element. How about we achieve that in a separate refactoring. The use of figure semantics seems promising though.