From b90e4b8f956dfe8608f390422ef427a2245bb6e1 Mon Sep 17 00:00:00 2001 From: James Wexler Date: Thu, 31 Jan 2019 13:20:12 -0500 Subject: [PATCH 01/14] hybrid mode changes --- .../components/facets_dive/facets-dive.html | 2 +- .../facets_dive_controls/facets-dive-controls.ts | 15 ++++++--------- .../facets-dive-info-card.html | 5 +++-- .../facets-dive-info-card.ts | 8 +++++--- .../facets_dive_vis/facets-dive-vis.html | 8 +++++--- .../facets_dive_vis/facets-dive-vis.ts | 16 ++++++++++++---- .../facets_overview/facets-overview.html | 4 ++-- 7 files changed, 34 insertions(+), 24 deletions(-) diff --git a/facets_dive/components/facets_dive/facets-dive.html b/facets_dive/components/facets_dive/facets-dive.html index 58d7b19..05f6fc1 100644 --- a/facets_dive/components/facets_dive/facets-dive.html +++ b/facets_dive/components/facets_dive/facets-dive.html @@ -32,7 +32,7 @@ * This CSS rule forces the containing element to have the correct height * in either case. */ - ::content paper-input-container > .floated-label-placeholder { + :host paper-input-container > .floated-label-placeholder { min-height: 20px; } diff --git a/facets_dive/components/facets_dive_controls/facets-dive-controls.ts b/facets_dive/components/facets_dive_controls/facets-dive-controls.ts index 5288e31..ba8b536 100644 --- a/facets_dive/components/facets_dive_controls/facets-dive-controls.ts +++ b/facets_dive/components/facets_dive_controls/facets-dive-controls.ts @@ -240,15 +240,12 @@ Polymer({ }, _updateCSSVars(this: any) { - this.customStyle['--grid-faceting-vertical-label-color'] = - this.gridFacetingVerticalLabelColor; - this.customStyle['--grid-faceting-horizontal-label-color'] = - this.gridFacetingHorizontalLabelColor; - this.customStyle['--item-positioning-vertical-label-color'] = - this.itemPositioningVerticalLabelColor; - this.customStyle['--item-positioning-horizontal-label-color'] = - this.itemPositioningHorizontalLabelColor; - this.updateStyles(); + this.updateStyles({ + '--grid-faceting-vertical-label-color': this.gridFacetingVerticalLabelColor, + '--grid-faceting-horizontal-label-color': this.gridFacetingHorizontalLabelColor, + '--item-positioning-vertical-label-color': this.itemPositioningVerticalLabelColor, + '--item-positioning-horizontal-label-color': this.itemPositioningHorizontalLabelColor + }); }, /** diff --git a/facets_dive/components/facets_dive_info_card/facets-dive-info-card.html b/facets_dive/components/facets_dive_info_card/facets-dive-info-card.html index a213731..a205e7e 100644 --- a/facets_dive/components/facets_dive_info_card/facets-dive-info-card.html +++ b/facets_dive/components/facets_dive_info_card/facets-dive-info-card.html @@ -30,16 +30,17 @@ overflow: auto; padding: 8px; } - ::content dt { + dt { color: #9e7c65; font-size: 14px; } - ::content dd { + dd { @apply --paper-font-common-code; color: #513726; margin: 0 0 16px 0; } +
diff --git a/facets_dive/components/facets_dive_info_card/facets-dive-info-card.ts b/facets_dive/components/facets_dive_info_card/facets-dive-info-card.ts index a1c4772..6a849f3 100644 --- a/facets_dive/components/facets_dive_info_card/facets-dive-info-card.ts +++ b/facets_dive/components/facets_dive_info_card/facets-dive-info-card.ts @@ -41,9 +41,11 @@ Polymer({ observer: '_updateSelected', }, }, + ready(this: any) { + this.scopeSubtree(this.$.holder, true); + }, _updateSelected(this: any, selectedData: Object[]) { - const root = Polymer.dom(this.root); - root.innerHTML = ''; + this.$.holder.innerHTML = ''; if (!selectedData) { return; @@ -56,7 +58,7 @@ Polymer({ const div = document.createElement('div'); div.style.width = '100%'; - root.appendChild(div); + this.$.holder.appendChild(div); infoRenderer(selectedObject, div); } diff --git a/facets_dive/components/facets_dive_vis/facets-dive-vis.html b/facets_dive/components/facets_dive_vis/facets-dive-vis.html index cf093cd..05bacdb 100644 --- a/facets_dive/components/facets_dive_vis/facets-dive-vis.html +++ b/facets_dive/components/facets_dive_vis/facets-dive-vis.html @@ -38,11 +38,11 @@ height: 100%; width: 100%; } - ::content .labels { + .labels { @apply --paper-font-common-base; @apply --paper-font-headline; } - ::content .rotate { + .rotate { stroke-dasharray: 1.5, 0.5; animation: rotate 1s linear infinite; } @@ -55,7 +55,9 @@ } } - +
+ +
diff --git a/facets_dive/components/facets_dive_vis/facets-dive-vis.ts b/facets_dive/components/facets_dive_vis/facets-dive-vis.ts index 1cc1f04..d8818ad 100644 --- a/facets_dive/components/facets_dive_vis/facets-dive-vis.ts +++ b/facets_dive/components/facets_dive_vis/facets-dive-vis.ts @@ -835,6 +835,11 @@ class FacetsDiveVizInternal { */ ignoreChange: boolean; + /** + * Div holding all dynamically created content in this element. + */ + holder: HTMLElement; + /** * Capture Polymer element instance and prep internal state. */ @@ -845,6 +850,7 @@ class FacetsDiveVizInternal { this.autoColorBy = false; this.verticalFacetInfo = null; this.horizontalFacetInfo = null; + this.holder = (this.elem as any).$.holder; } /** @@ -855,8 +861,10 @@ class FacetsDiveVizInternal { // to fit within the viewport. this.layout = new Layout(); + (this.elem as any).scopeSubtree(this.holder, true); + // Insert background SVG used for cell backgrounds. - this.cellBackgroundSVG = d3.select(this.elem) + this.cellBackgroundSVG = d3.select(this.holder) .append('svg') .style('left', 0) .style('position', 'absolute') @@ -882,7 +890,7 @@ class FacetsDiveVizInternal { .style('pointer-events', 'none') .style('position', 'absolute') .style('top', 0); - this.elem.appendChild(this.renderer.domElement); + this.holder.appendChild(this.renderer.domElement); } catch (err) { // An error will be displayed below. } @@ -893,7 +901,7 @@ class FacetsDiveVizInternal { d3.select(this.elem).call(this.zoom); // Insert background SVG used for labels and axes. - this.labelsAndAxesSVG = d3.select(this.elem) + this.labelsAndAxesSVG = d3.select(this.holder) .append('svg') .style('left', 0) .style('position', 'absolute') @@ -920,7 +928,7 @@ class FacetsDiveVizInternal { if (!this.renderer) { this.labelsAndAxesSVG.style('display', 'none'); this.cellBackgroundSVG.style('display', 'none'); - d3.select(this.elem) + d3.select(this.holder) .append('p') .attr('class', 'error') .style('color', 'darkred') diff --git a/facets_overview/components/facets_overview/facets-overview.html b/facets_overview/components/facets_overview/facets-overview.html index 2fe0485..dd86b76 100644 --- a/facets_overview/components/facets_overview/facets-overview.html +++ b/facets_overview/components/facets_overview/facets-overview.html @@ -28,7 +28,7 @@ @@ -1265,7 +15017,7 @@ + + + + @@ -1699,14 +15463,13 @@ @@ -2367,7 +16130,7 @@ @@ -2380,15 +16143,15 @@ display: inline-block; float: right; - @apply(--paper-font-caption); - @apply(--paper-input-char-counter); + @apply --paper-font-caption; + @apply --paper-input-char-counter; } :host([hidden]) { display: none !important; } - :host-context([dir="rtl"]) { + :host(:dir(rtl)) { float: left; } @@ -2398,7 +16161,7 @@ @@ -2408,14 +16171,37 @@ + + + + @@ -2690,10 +16463,10 @@ display: inline-block; visibility: hidden; - color: var(--paper-input-container-invalid-color, --error-color); + color: var(--paper-input-container-invalid-color, var(--error-color)); - @apply(--paper-font-caption); - @apply(--paper-input-error); + @apply --paper-font-caption; + @apply --paper-input-error; position: absolute; left:0; right:0; @@ -2704,12 +16477,12 @@ }; - + @@ -2730,37 +16503,67 @@ display: none !important; } + input { + /* Firefox sets a min-width on the input, which can cause layout issues */ + min-width: 0; + } + + /* In 1.x, the is distributed to paper-input-container, which styles it. + In 2.x the is distributed to paper-input-container, which styles + it, but in order for this to work correctly, we need to reset some + of the native input's properties to inherit (from the iron-input) */ + iron-input > input { + @apply --paper-input-container-shared-input-style; + font-family: inherit; + font-weight: inherit; + font-size: inherit; + letter-spacing: inherit; + word-spacing: inherit; + line-height: inherit; + text-shadow: inherit; + color: inherit; + cursor: inherit; + } + + input:disabled { + @apply --paper-input-container-input-disabled; + } + input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { - @apply(--paper-input-container-input-webkit-spinner); + @apply --paper-input-container-input-webkit-spinner; } input::-webkit-clear-button { - @apply(--paper-input-container-input-webkit-clear); + @apply --paper-input-container-input-webkit-clear; + } + + input::-webkit-calendar-picker-indicator { + @apply --paper-input-container-input-webkit-calendar-picker-indicator; } input::-webkit-input-placeholder { - color: var(--paper-input-container-color, --secondary-text-color); + color: var(--paper-input-container-color, var(--secondary-text-color)); } input:-moz-placeholder { - color: var(--paper-input-container-color, --secondary-text-color); + color: var(--paper-input-container-color, var(--secondary-text-color)); } input::-moz-placeholder { - color: var(--paper-input-container-color, --secondary-text-color); + color: var(--paper-input-container-color, var(--secondary-text-color)); } input::-ms-clear { - @apply(--paper-input-container-ms-clear); + @apply --paper-input-container-ms-clear; } - input::-webkit-calendar-picker-indicator { - @apply --paper-input-container-input-webkit-calendar-picker-indicator; + input::-ms-reveal { + @apply --paper-input-container-ms-reveal; } input:-ms-input-placeholder { - color: var(--paper-input-container-color, --secondary-text-color); + color: var(--paper-input-container-color, var(--secondary-text-color)); } label { @@ -2768,30 +16571,44 @@ } - + - + - + - + - + + + + + + + @@ -2800,35 +16617,34 @@ - - + - @@ -2868,57 +16684,58 @@ @@ -2927,49 +16744,28 @@ - - - - - - - - - - + + + @@ -3018,7 +16819,7 @@ @@ -3091,12 +16892,10 @@ - - @@ -3113,28 +16912,28 @@ padding: 8px; outline: none; - @apply(--paper-menu-button); + @apply --paper-menu-button; } :host([disabled]) { cursor: auto; color: var(--disabled-text-color); - @apply(--paper-menu-button-disabled); + @apply --paper-menu-button-disabled; } iron-dropdown { - @apply(--paper-menu-button-dropdown); + @apply --paper-menu-button-dropdown; } .dropdown-content { - @apply(--shadow-elevation-2dp); + @apply --shadow-elevation-2dp; position: relative; border-radius: 2px; - background-color: var(--paper-menu-button-dropdown-background, --primary-background-color); + background-color: var(--paper-menu-button-dropdown-background, var(--primary-background-color)); - @apply(--paper-menu-button-content); + @apply --paper-menu-button-content; } :host([vertical-align="top"]) .dropdown-content { @@ -3148,31 +16947,32 @@ margin-bottom: -10px; margin-top: 20px; } - + #trigger { cursor: pointer; }
- +
-
- +
+
@@ -3183,11 +16983,11 @@ @@ -3222,11 +17022,11 @@ cursor: pointer; }; - @apply(--paper-dropdown-menu); + @apply --paper-dropdown-menu; } :host([disabled]) { - @apply(--paper-dropdown-menu-disabled); + @apply --paper-dropdown-menu-disabled; } :host([noink]) paper-ripple { @@ -3243,24 +17043,24 @@ bottom: 8px; right: 0px; - @apply(--paper-dropdown-menu-ripple); + @apply --paper-dropdown-menu-ripple; } paper-menu-button { display: block; padding: 0; - @apply(--paper-dropdown-menu-button); + @apply --paper-dropdown-menu-button; } paper-input { - @apply(--paper-dropdown-menu-input); + @apply --paper-dropdown-menu-input; } iron-icon { color: var(--disabled-text-color); - @apply(--paper-dropdown-menu-icon); + @apply --paper-dropdown-menu-icon; } @@ -3275,23 +17075,25 @@ - -
+ + +
- - + + +
- + @@ -3302,41 +17104,41 @@ @@ -3403,659 +17205,947 @@ text-align: left; } - :host([hidden]), .paper-item[hidden] { - display: none !important; - } + :host([hidden]), .paper-item[hidden] { + display: none !important; + } + + :host(.iron-selected), .paper-item.iron-selected { + font-weight: var(--paper-item-selected-weight, bold); + + @apply --paper-item-selected; + } + + :host([disabled]), .paper-item[disabled] { + color: var(--paper-item-disabled-color, var(--disabled-text-color)); + + @apply --paper-item-disabled; + } + + :host(:focus), .paper-item:focus { + position: relative; + outline: 0; + + @apply --paper-item-focused; + } + + :host(:focus):before, .paper-item:focus:before { + @apply --layout-fit; + + background: currentColor; + content: ''; + opacity: var(--dark-divider-opacity); + pointer-events: none; + + @apply --paper-item-focused-before; + } + + + + + + + + + + + + + + + + + + - - +.plottable .axis text { + fill: #32313F; + font-family: "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 200; + line-height: normal; +} +.plottable .axis .annotation-circle { + fill: white; + stroke-width: 1px; + stroke: #CCC; +} +.plottable .axis .annotation-line { + stroke: #CCC; + stroke-width: 1px; +} +.plottable .axis .annotation-rect { + stroke: #CCC; + stroke-width: 1px; + fill: white; +} - - +.plottable .gridlines line { + stroke: #3C3C3C; /* hackhack: gridlines should be solid; see #820 */ + opacity: 0.25; + stroke-width: 1px; +} - - +.plottable .selection-box-layer .selection-area { + fill: black; + fill-opacity: 0.03; + stroke: #CCC; +} +/* DragBoxLayer */ +.plottable .drag-box-layer.x-resizable .drag-edge-lr { + cursor: ew-resize; +} +.plottable .drag-box-layer.y-resizable .drag-edge-tb { + cursor: ns-resize; +} + +.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-tl { + cursor: nwse-resize; +} +.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-tr { + cursor: nesw-resize; +} +.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-bl { + cursor: nesw-resize; +} +.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-br { + cursor: nwse-resize; +} +.plottable .drag-box-layer.movable .selection-area { + cursor: move; /* IE fallback */ + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: grab; +} +.plottable .drag-box-layer.movable .selection-area:active { + cursor: -moz-grabbing; + cursor: -webkit-grabbing; + cursor: grabbing; +} +/* /DragBoxLayer */ +.plottable .guide-line-layer line.guide-line { + stroke: #CCC; + stroke-width: 1px; +} - - + + + + - + @@ -4574,11 +18505,11 @@ @@ -4625,52 +18556,52 @@ @@ -4726,8 +18657,8 @@ @@ -4773,8 +18704,8 @@ @@ -4786,8 +18717,8 @@ @@ -4939,8 +18870,8 @@ - @@ -5788,9 +19723,9 @@ @@ -5808,48 +19743,65 @@ display: block; margin: 24px 40px; - background: var(--paper-dialog-background-color, --primary-background-color); - color: var(--paper-dialog-color, --primary-text-color); + background: var(--paper-dialog-background-color, var(--primary-background-color)); + color: var(--paper-dialog-color, var(--primary-text-color)); - @apply(--paper-font-body1); - @apply(--shadow-elevation-16dp); - @apply(--paper-dialog); + @apply --paper-font-body1; + @apply --shadow-elevation-16dp; + @apply --paper-dialog; } - :host > ::content > * { + :host > ::slotted(*) { margin-top: 20px; padding: 0 24px; } - :host > ::content > .no-padding { + :host > ::slotted(.no-padding) { padding: 0; } - :host > ::content > *:first-child { + + :host > ::slotted(*:first-child) { margin-top: 24px; } - :host > ::content > *:last-child { + :host > ::slotted(*:last-child) { margin-bottom: 24px; } - :host > ::content h2 { + /* In 1.x, this selector was `:host > ::content h2`. In 2.x allows + to select direct children only, which increases the weight of this + selector, so we have to re-define first-child/last-child margins below. */ + :host > ::slotted(h2) { position: relative; margin: 0; - @apply(--paper-font-title); - @apply(--paper-dialog-title); + @apply --paper-font-title; + @apply --paper-dialog-title; + } + + /* Apply mixin again, in case it sets margin-top. */ + :host > ::slotted(h2:first-child) { + margin-top: 24px; + @apply --paper-dialog-title; + } + + /* Apply mixin again, in case it sets margin-bottom. */ + :host > ::slotted(h2:last-child) { + margin-bottom: 24px; + @apply --paper-dialog-title; } - :host > ::content .buttons { + :host > ::slotted(.paper-dialog-buttons), + :host > ::slotted(.buttons) { position: relative; padding: 8px 8px 8px 24px; margin: 0; - color: var(--paper-dialog-button-color, --primary-color); + color: var(--paper-dialog-button-color, var(--primary-color)); - @apply(--layout-horizontal); - @apply(--layout-end-justified); + @apply --layout-horizontal; + @apply --layout-end-justified; } @@ -5938,7 +19890,7 @@ @@ -5946,39 +19898,36 @@ @@ -5991,1082 +19940,1112 @@ @@ -7081,11 +21060,11 @@ height: 100%; width: 100%; } - ::content .labels { + .labels { @apply --paper-font-common-base; @apply --paper-font-headline; } - ::content .rotate { + .rotate { stroke-dasharray: 1.5, 0.5; animation: rotate 1s linear infinite; } @@ -7098,7 +21077,9 @@ } } - +
+ +
@@ -7119,78 +21100,80 @@ See the License for the specific language governing permissions and limitations under the License. */ -var th=this&&this.__extends||function(){var a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(a,c){a.__proto__=c}||function(a,c){for(var b in c)c.hasOwnProperty(b)&&(a[b]=c[b])};return function(b,c){function d(){this.constructor=b}a(b,c);b.prototype=null===c?Object.create(c):(d.prototype=c.prototype,new d)}}(),uh={bottom:6,left:6,right:6,top:6},vh={"\ufffcOTHER\ufffc":"other","\ufffcNO_WORDS\ufffc":"non-words","\ufffcALL_WORDS\ufffc":"other"}; -function wh(a){return null!==a&&a in vh?{label:vh[a],special:!0}:"number"!==typeof a&&"string"!==typeof a?{label:""+a,special:!0}:{label:sh(""+a),special:!1}} -var xh="#4285F4 #DB4437 #F4B400 #0F9D58 #AB47BC #00ACC1 #FF7043 #9E9D24 #5C6BC0 #F06292 #00796B #C2185B".split(" "),yh="#4285F4 #0F9D58 #00ACC1 #9E9D24 #5C6BC0 #00796B #607D8B".split(" "),zh="#DB4437 #F4B400 #AB47BC #F06292 #AB47BC #795548 #FF7043 #C2185B".split(" "),Ah="#4285F4 #C53929 #F7CB4D #0B8043 #5E35B1 #80DEEA #FF7043 #C0CA33".split(" "),Bh={"alignment-baseline":"middle",fill:"#444444","font-size":18,"font-style":"normal","text-anchor":"middle",x:0,y:0},Ch=function(a){function b(){return null!== -a&&a.apply(this,arguments)||this}th(b,a);return b}(zf),Dh=function(){function a(a){this.elem=a;this.endTimestamp=0;this.renderQueued=!1;this.labels=[];this.autoColorBy=!1;this.horizontalFacetInfo=this.verticalFacetInfo=null}a.prototype.ready=function(){this.layout=new Sf;this.cellBackgroundSVG=d3.select(this.elem).append("svg").style("left",0).style("position","absolute").style("top",0);this.cellBackgroundSVGRoot=this.cellBackgroundSVG.append("g").attr("class","root");this.cellBackgroundLayer=this.cellBackgroundSVGRoot.append("g").attr("class", -"labels");this.scene=new Z.Scene;this.camera=new Z.OrthographicCamera(0,100,0,100,.1,1E3);try{this.renderer=new Z.WebGLRenderer({alpha:!0}),this.renderer.setPixelRatio(),d3.select(this.renderer.domElement).style("left",0).style("pointer-events","none").style("position","absolute").style("top",0),this.elem.appendChild(this.renderer.domElement)}catch(b){}this.zoom=d3.zoom().scaleExtent([1,500]).on("zoom",this.zoomed.bind(this));d3.select(this.elem).call(this.zoom);this.labelsAndAxesSVG=d3.select(this.elem).append("svg").style("left", -0).style("position","absolute").style("top",0);this.labelsAndAxesSVGRoot=this.labelsAndAxesSVG.append("g").attr("class","root");this.labelsLayer=this.labelsAndAxesSVGRoot.append("g").attr("class","labels");this.axesLayer=this.labelsAndAxesSVGRoot.append("g").attr("class","axes");this.comparedLayer=this.labelsAndAxesSVGRoot.append("g").attr("class","comparedboxes");this.selectedLayer=this.labelsAndAxesSVGRoot.append("g").attr("class","selectedboxes");this.labelsAndAxesSVG.on("click",this.clicked.bind(this)); -this.renderer||(this.labelsAndAxesSVG.style("display","none"),this.cellBackgroundSVG.style("display","none"),d3.select(this.elem).append("p").attr("class","error").style("color","darkred").html('\n \x3cstrong\x3eERROR\x3c/strong\x3e: Facets Dive requires WebGL, and it is not\n enabled in your browser. See\n \x3ca rel\x3d"noreferrer" href\x3d"http://webglreport.com/"\x3e\n WebGL Report\x3c/a\x3e for details.\n '))};a.prototype.zoomed=function(){var a= -d3.event.transform,c=a.x,d=a.y;a=a.k;var e=this.scale/a;this.camera.top*=e;this.camera.left*=e;this.camera.right*=e;this.camera.bottom*=e;this.camera.position.set(-c/a,d/a,this.camera.position.z);this.camera.updateProjectionMatrix();this.scale=a;this.transformSVG();this.updateObjectVisibility();this.queueRenderScene()};a.prototype.clicked=function(){var a=this.elem.getBoundingClientRect(),c=d3.event;a=this.spriteMesh.findSprites(this.camera.position.x+(c.clientX-a.left)/this.scale,this.camera.position.y- -(c.clientY-a.top)/this.scale);var d={};if(c.ctrlKey)for(c=0;cc&&(a=d,c=e)}isFinite(c)&&a in this.stats&&this.elem.set("imageFieldName",a)};a.prototype.queueAtlasUrlChange=function(){var a=this;this.atlasUrlChangeTimer&&clearTimeout(this.atlasUrlChangeTimer);this.atlasUrlChangeTimer=setTimeout(function(){a.atlasUrlChangeTimer&&a.atlasUrlChange()},100)};a.prototype.atlasUrlChange=function(){var a=this;clearTimeout(this.atlasUrlChangeTimer); -delete this.atlasUrlChangeTimer;if(this.spriteMesh){var c=this.elem.atlasUrl;c&&c.length&&c!==this.lastAtlasUrl&&(this.lastAtlasUrl=c,this.resetSpritesToDefaultTexture(),this.spriteMesh.spriteAtlas.setAtlasUrl(c,this.elem.crossOrigin,function(){for(var b=a.elem.data,c=Date.now(),f=c+a.elem.fadeDuration,g=0;b&&gc.length&&a.isNumeric()?this.updateScalarPalette():this.updateCategoricalPalette(c);c=this.grid.items;for(var d=Date.now(), -e=d+this.elem.tweenDuration,f=0;fc;)d=d.parent;return d.level},keyCompareFunction:function(a,b){a=f[a];b=f[b];if(void 0===a&&void 0===b)return 0;if(void 0===a)return-1;if(void 0===b)return 1;if(a.nonValueCount&& -b.nonValueCount)return 0;if(a.nonValueCount)return-1;if(b.nonValueCount)return 1;b=b.order-a.order;return d?b:-b},labelingFunction:function(a){a=f[+a];if(!a.parent&&!a.commonWords.length)return{label:"other",special:!0};if(a.nonValueCount)return{label:"non-words",special:!0};for(var b=" \u2022 "+a.commonWords.join(" "),d=0;dc){b+=" \u2026";break}for(;a.parent;)a=a.parent,a.commonWords.length&&(b=" \u2022 "+a.commonWords.join(" ")+" "+b);return{label:b}}}}; -a.prototype.generateNumericFacetingInfo=function(a,c){var b=this,e=this.stats[a],f=e.numberMax-e.numberMin;return{facetingFunction:function(b){if(!(a in b.data))return null;b=b.data[a];return"number"!==typeof b?b:isNaN(b)?b:Math.min(Math.floor(c*(b-e.numberMin)/f),c-1)},keyCompareFunction:Df,labelingFunction:function(a){if("number"!==typeof a||isNaN(+a))return wh(a);var d=e.numberMax-e.numberMin,f=a/c*d+e.numberMin;a=(1+a)/c*d+e.numberMin;return e.isInteger()?{label:b.formatRange(Math.ceil(f),Math.floor(a))}: -{label:b.formatRange(f,a)}}}};a.prototype.formatNumber=function(a){if(null===a)return"null";a=parseFloat(a.toPrecision(3));return 1E3<=Math.abs(a)?d3.format("s")(a):""+a};a.prototype.formatRange=function(a,c){return this.formatNumber(a)+" \u2014 "+this.formatNumber(c)};a.prototype.getKeys=function(){var a;if((a=this.elem.data)&&a.length){for(var c={},d=0;da&&this.queueRenderScene();if(this.spriteMesh&&(this.spriteMesh.time=a,81>+Z.REVISION&&this.spriteMesh.onBeforeRender))this.spriteMesh.onBeforeRender();this.renderer&&this.renderer.render(this.scene, -this.camera);this.spriteMesh&&this.spriteMesh.spriteAtlas&&this.spriteMesh.spriteAtlas.postRender()};return a}(); +const sn={bottom:6,left:6,right:6,top:6},tn={"\ufffcOTHER\ufffc":"other","\ufffcNO_WORDS\ufffc":"non-words","\ufffcALL_WORDS\ufffc":"other"},un=b=>null!==b&&b in tn?{label:tn[b],special:!0}:"number"!==typeof b&&"string"!==typeof b?{label:""+b,special:!0}:{label:rn(""+b),special:!1},vn="#4285F4 #DB4437 #F4B400 #0F9D58 #AB47BC #00ACC1 #FF7043 #9E9D24 #5C6BC0 #F06292 #00796B #C2185B".split(" "),wn="#4285F4 #0F9D58 #00ACC1 #9E9D24 #5C6BC0 #00796B #607D8B".split(" "),xn="#DB4437 #F4B400 #AB47BC #F06292 #AB47BC #795548 #FF7043 #C2185B".split(" "), +yn="#4285F4 #C53929 #F7CB4D #0B8043 #5E35B1 #80DEEA #FF7043 #C0CA33".split(" "),zn={"alignment-baseline":"middle",fill:"#444444","font-size":18,"font-style":"normal","text-anchor":"middle",x:0,y:0};class An extends bm{} +function Bn(b){const d=-b.camera.position.x*b.scale,f=b.camera.position.y*b.scale;b.cellBackgroundSVGRoot.attr("transform",`translate(${d},${f}) scale(${b.scale},${-b.scale})`);b.labelsAndAxesSVGRoot.attr("transform",`translate(${d},${f}) scale(${b.scale},${-b.scale})`);b.labelsAndAxesSVGRoot.selectAll(".unscale").attr("transform",`scale(${1/b.scale})`);b.axesLayer.selectAll(".axis").select("path").attr("d",h=>h.path(b.scale)).attr("stroke-width",()=>1.2/b.scale)} +function Cn(b){var d=b.labelsLayer.selectAll(".label");const f=d.filter(function(m){return(void 0===m.visible||!m.visible)&&b.isVisible(m,this)}).each(m=>m.visible=!0),h=d.filter(function(m){return(void 0===m.visible||m.visible)&&!b.isVisible(m,this)}).each(m=>m.visible=!1);f.selectAll(".opacity").transition().duration(b.elem.tweenDuration).attr("opacity",1);h.selectAll(".opacity").transition().duration(b.elem.tweenDuration).attr("opacity",0);d.filter(m=>!!m.scaleDown).selectAll(".scale").attr("transform", +m=>`scale(${b.scale!!m.visible).select("path").transition().duration(b.elem.tweenDuration).attr("stroke-opacity",1);d.filter(m=>!m.visible).select("path").transition().duration(b.elem.tweenDuration).attr("stroke-opacity",0)} +function Dn(b){b.renderQueued||(b.renderQueued=!0,requestAnimationFrame(()=>{if(b.renderQueued){b.renderQueued=!1;var d=Date.now();b.endTimestamp>d&&Dn(b);if(b.spriteMesh&&(b.spriteMesh.time=d,81>+THREE.REVISION&&b.spriteMesh.onBeforeRender))b.spriteMesh.onBeforeRender();b.renderer&&b.renderer.render(b.scene,b.camera);if(b.spriteMesh&&b.spriteMesh.spriteAtlas&&(d=b.spriteMesh.spriteAtlas,!(d.drawQueue.length||0({x:b.spriteMesh.getX(h),y:b.spriteMesh.getY(h)}));d=b.selectedLayer.selectAll(".selected").data(d);var f=d.enter().append("g").classed("selected",!0).attr("transform",h=>`translate(${.5+(h.x||0)},${.5+(h.y||0)}) scale(${3})`).style("opacity",0);f.append("rect").attr("x",-.5).attr("y",-.5).attr("width",1).attr("height",1).attr("stroke","#483d06").attr("stroke-linecap","round").attr("stroke-linejoin","round").attr("stroke-opacity",0).attr("stroke-width", +.3).attr("fill-opacity",0);f.append("rect").attr("x",-.5).attr("y",-.5).attr("width",1).attr("height",1).attr("stroke","#fad411").attr("stroke-linecap","round").attr("stroke-linejoin","round").attr("stroke-opacity",0).attr("stroke-width",.15).attr("fill-opacity",0);f=f.merge(d);f.transition().attr("transform",h=>`translate(${.5+(h.x||0)},${.5+(h.y||0)}) scale(${.8})`).style("opacity",1);f.selectAll("rect").classed("rotate",!0).attr("stroke-opacity",1);d.exit().transition().style("opacity",0).remove()} +function Fn(b){var d=b.elem.comparedIndices.map(h=>({x:b.spriteMesh.getX(h),y:b.spriteMesh.getY(h)}));d=b.comparedLayer.selectAll(".compared").data(d);var f=d.enter().append("g").classed("compared",!0).attr("transform",h=>`translate(${.5+(h.x||0)},${.5+(h.y||0)}) scale(${3})`).style("opacity",0);f.append("rect").attr("x",-.5).attr("y",-.5).attr("width",1).attr("height",1).attr("stroke","#44ff44").attr("stroke-linecap","round").attr("stroke-linejoin","round").attr("stroke-opacity",0).attr("stroke-width", +.3).attr("fill-opacity",0);f.append("rect").attr("x",-.5).attr("y",-.5).attr("width",1).attr("height",1).attr("stroke","#1d6b1d").attr("stroke-linecap","round").attr("stroke-linejoin","round").attr("stroke-opacity",0).attr("stroke-width",.15).attr("fill-opacity",0);f=f.merge(d);f.transition().attr("transform",h=>`translate(${.5+(h.x||0)},${.5+(h.y||0)}) scale(${.8})`).style("opacity",1);f.selectAll("rect").classed("rotate",!0).attr("stroke-opacity",1);d.exit().transition().style("opacity",0).remove()} +function Gn(b,d){b.elem.verticalFacet in b.stats&&wm(b.grid,b.grid.horizontalKeys[b.grid.horizontalKeys.length-1]).forEach(f=>{const h=b.verticalFacetInfo.labelingFunction(f.verticalKey),m=new An;m.text=h.label;m.x=f.x+f.width;m.y=f.contentY+f.innerHeight/2;m.side=$l.Right;m.cell=f;m.attributes={"alignment-baseline":"middle",fill:"#666666","font-size":zn["font-size"],"text-anchor":"start","font-style":h.special?"italic":"normal"};m.offsetPosition={x:8};m.minScale=zn["font-size"]/(f.height+b.grid.cellMargin); +m.scaleDown=!0;d.push(m)})} +function Hn(b,d){b.elem.horizontalFacet in b.stats&&vm(b.grid,b.grid.verticalKeys[b.grid.verticalKeys.length-1]).forEach(f=>{const h=b.horizontalFacetInfo.labelingFunction(f.horizontalKey),m=new An;m.text=h.label;m.x=f.contentX+f.innerWidth/2;m.y=f.y+f.height;m.side=$l.Top;m.cell=f;m.rotate=-45;m.attributes={"alignment-baseline":"ideographic",fill:"#dd6622","font-size":zn["font-size"],"text-anchor":"start","font-style":h.special?"italic":"normal"};m.offsetPosition={x:8,y:-8};m.minScale=zn["font-size"]/ +(f.width+b.grid.cellMargin/2);m.scaleDown=!0;d.push(m)})}function In(b,d=3){if(null===b)return"null";b=parseFloat(b.toPrecision(d));return 1E3<=Math.abs(b)?d3.format(`.${d}s`)(b):`${b}`} +function Jn(b,d){if("scatter"===b.elem.positionMode&&b.elem.verticalPosition in b.stats){var f=b.stats[b.elem.verticalPosition],[h,m]=d3.scaleLinear().domain([f.numberMin,f.numberMax]).nice().domain(),w=In(h),l=In(m),p=(w.length+3)/(w.length+l.length+6);rm(b.grid,n=>{if(n.items.length){for(var q=n.siblings.left;!(!q||q.items.length||q.siblings.above&&q.siblings.above.items.length);)q=q.siblings.left;q=q?q.contentX+q.innerWidth:-Infinity;var t=n.x+8,v=n.contentY,z=n.contentY+n.innerHeight,y=new An; +y.id=`${n.compoundKey}-left-start`;y.text=w;y.x=n.x+8;y.y=n.y+(b.elem.horizontalPosition?8:0);y.side=$l.Left;y.cell=n;y.rotate=-90;y.attributes={"alignment-baseline":"ideographic",fill:"#2255aa","font-size":16,"text-anchor":"start"};y.offsetPosition={x:sn.bottom,y:-sn.right};y.boundingBox={bottom:v,left:q,right:t,top:v+n.innerHeight*(Math.max(p,.1)-.05)};y.elementMargin=sn;d.push(y);y=new An;y.id=`${n.compoundKey}-left-end`;y.text=l;y.x=n.x+8;y.y=n.y+n.height;y.side=$l.Left;y.cell=n;y.rotate=-90; +y.attributes={"alignment-baseline":"ideographic",fill:"#2255aa","font-size":16,"text-anchor":"end"};y.offsetPosition={x:-sn.top,y:-sn.right};y.boundingBox={bottom:v+n.innerHeight*(Math.min(p,.9)+.05),left:q,right:t,top:z};y.elementMargin=sn;d.push(y)}})}} +function fp(b,d){if("scatter"===b.elem.positionMode&&b.elem.horizontalPosition in b.stats){var f=b.stats[b.elem.horizontalPosition],[h,m]=d3.scaleLinear().domain([f.numberMin,f.numberMax]).nice().domain(),w=In(h),l=In(m),p=(w.length+3)/(w.length+l.length+6);rm(b.grid,n=>{if(n.items.length){for(var q=n.siblings.below;!(!q||q.items.length||q.siblings.right&&q.siblings.right.items.length);)q=q.siblings.below;q=q?q.contentY+q.innerHeight:-Infinity;var t=n.contentY,v=n.contentX,z=v+n.innerWidth,y=new An; +y.id=`${n.compoundKey}-bottom-start`;y.text=w;y.x=n.x+(b.elem.verticalPosition?8:0);y.y=n.y+8;y.side=$l.Bottom;y.cell=n;y.attributes={"alignment-baseline":"hanging",fill:"#118844","font-size":16,"text-anchor":"start"};y.offsetPosition={x:sn.left,y:sn.top};y.boundingBox={bottom:q,left:v,right:v+n.innerWidth*(Math.max(p,.1)-.05),top:t};y.elementMargin=sn;d.push(y);y=new An;y.id=`${n.compoundKey}-bottom-end`;y.text=l;y.x=n.x+n.width;y.y=n.y+8;y.side=$l.Bottom;y.cell=n;y.attributes={"alignment-baseline":"hanging", +fill:"#118844","font-size":16,"text-anchor":"end"};y.offsetPosition={x:-sn.right,y:sn.top};y.boundingBox={bottom:q,left:v+n.innerWidth*(Math.min(p,.9)+.05),right:z,top:t};y.elementMargin=sn;d.push(y)}})}}function gp(b){const d=[];Gn(b,d);Hn(b,d);Jn(b,d);fp(b,d);return d} +function hp(b){var d=um(b.grid).filter(f=>f.items.length);d=b.cellBackgroundLayer.selectAll(".cell").data(d,f=>f.compoundKey);d.enter().append("rect").attr("class","cell").attr("x",f=>f.contentX||0).attr("y",f=>f.contentY||0).attr("width",f=>f.innerWidth||0).attr("height",f=>f.innerHeight||0).attr("fill","#f8f8f9").attr("fill-opacity",0).merge(d).transition().duration(b.elem.tweenDuration).attr("x",f=>f.contentX||0).attr("y",f=>f.contentY||0).attr("width",f=>f.innerWidth||0).attr("height",f=>f.innerHeight|| +0).attr("fill-opacity",1);d.exit().transition().duration(b.elem.tweenDuration).remove().attr("fill-opacity",0)} +function ip(b){const d=[];"stacked"!==b.elem.positionMode&&rm(b.grid,m=>{if(m.items.length){if(b.elem.verticalPosition){const w=new ym($l.Left,m);d.push(w)}b.elem.horizontalPosition&&(m=new ym($l.Bottom,m),d.push(m))}});const f=b.axesLayer.selectAll(".axis").data(d,m=>m.key()),h=f.enter().append("g").attr("class","axis").attr("opacity",0);h.append("path").attr("d",m=>m.path(b.scale)).attr("stroke",m=>m.side===$l.Left?"#2255aa":"#118844").attr("stroke-width",()=>1.2/b.scale).attr("stroke-opacity", +0).attr("fill","none");h.merge(f).transition().duration(b.elem.tweenDuration).attr("opacity",1);h.merge(f).select("path").transition().duration(b.elem.tweenDuration).attr("d",m=>m.path(b.scale));f.exit().transition().duration(b.elem.tweenDuration).remove().attr("opacity",0)} +function jp(b){if(b.scale){b.labels=gp(b);var d=b.labelsLayer.selectAll(".label").data(b.labels,l=>l.id||`${l.side}-${l.text}`);d.each(function(l){const p=d3.select(this),n=p.select(".current");l.text!==n.text()&&(n.attr("fill-opacity",0),p.select(".old").attr("fill-opacity",1).text(n.text()))}).select(".current").text(l=>l.text);var f=l=>p=>void 0===p.attributes||void 0===p.attributes[l]?zn[l]:p.attributes[l],h=d.enter().append("g").attr("class","label").attr("transform",l=>`translate(${l.x},${l.y})`), +m=h.append("g").attr("class","flip").attr("transform","scale(1,-1)").append("g").attr("class","rotate").attr("transform",l=>"rotate("+("rotate"in l?l.rotate:0)+")").append("g").attr("class","unscale").attr("transform",`scale(${1/b.scale})`).append("g").attr("class","position").append("g").attr("class","opacity scale"),w=m.append("text").attr("class","old").attr("fill-opacity",0);m=m.append("text").attr("class","current").attr("fill-opacity",0).text(l=>l.text);for(const l in zn)zn.hasOwnProperty(l)&& +(w.attr(l,f(l)),m.attr(l,f(l)));w=h.merge(d).transition().duration(b.elem.tweenDuration).attr("transform",l=>`translate(${l.x},${l.y})`);w.select(".rotate").attr("transform",l=>"rotate("+("rotate"in l?l.rotate:0)+")");w.filter(l=>!!l.offsetPosition).select(".position").attr("transform",l=>`translate(${l.offsetPosition.x||0},${l.offsetPosition.y||0})`);h=w.select(".old").attr("fill-opacity",0);w=w.select(".current").attr("fill-opacity",1);for(const l in zn)zn.hasOwnProperty(l)&&(h.attr(l,f(l)),w.attr(l, +f(l)));d.exit().transition().duration(b.elem.tweenDuration).remove().select(".current").attr("fill-opacity",0)}} +function kp(b){const d=b.elem.getBoundingClientRect();d.width&&d.height?(b.labelsAndAxesSVG.attr("width",d.width).attr("height",d.height),b.cellBackgroundSVG.attr("width",d.width).attr("height",d.height),b.renderer&&b.renderer.setSize(d.width,d.height),b.camera.right=d.width/b.scale,b.camera.bottom=-d.height/b.scale,b.camera.updateProjectionMatrix(),Dn(b)):requestAnimationFrame(()=>kp(b))} +function lp(b){b.spriteMesh&&(b.scene.remove(b.spriteMesh),Mm(b.spriteMesh.spriteAtlas),delete b.spriteMesh);const d=b.elem.data,f=d.length;var h=b.elem.spriteImageWidth,m=b.elem.spriteImageHeight;const w=h/m;b.spriteMesh=new jn(f,h,m);b.scene.add(b.spriteMesh);b.spriteMesh.spriteAtlas.onDrawFinished=()=>Dn(b);b.items=[];h=Math.ceil(Math.sqrt(f));m=Math.ceil(f/h);for(let l=0;l{const q=Date.now();l.sprite.rebase(q);l.sprite.x=p;l.sprite.y=n;l.sprite.opacity=1;l.sprite.timestamp=q+b.elem.tweenDuration;mp(b,l.sprite.timestamp)}} +function np(b){if(!b.ignoreChange&&b.grid){op(b);var d=b.elem.imageFieldName;if(d in b.stats){var f=b.grid.items;for(let h=0;h{const l=Date.now();m.baseTextureTimestamp=l;m.baseTextureIndex=0;m.textureTimestamp=l+b.elem.tweenDuration;m.textureIndex=1;mp(b,m.textureTimestamp)})}}else delete b.lastAtlasUrl,pp(b)}} +function qp(b){if(b.grid){rp(b);var d=b.verticalFacetInfo=sp(b,b.elem.verticalFacet,b.elem.verticalBuckets,b.elem.verticalBagOfWords,!0);b.grid.verticalFacet=d.facetingFunction;b.grid.verticalKeyCompare=d.keyCompareFunction;d=b.horizontalFacetInfo=sp(b,b.elem.horizontalFacet,b.elem.horizontalBuckets,b.elem.horizontalBagOfWords,!1);b.grid.horizontalFacet=d.facetingFunction;b.grid.horizontalKeyCompare=d.keyCompareFunction;b.elem.fitGridAspectRatioToViewport?(d=b.elem.getBoundingClientRect(),b.grid.targetGridAspectRatio= +d&&d.width&&d.height?d.width/d.height||1:1):b.grid.targetGridAspectRatio=1;tm(b.grid);hp(b);ip(b);jp(b);En(b);Fn(b);b.fitToViewport()}} +function tp(b){if(b.grid){rp(b);var d=b.grid.cellPadding,f=jm.Tight,h=jm.Uniform,m=!1;if("stacked"===b.elem.positionMode)m=b.grid.verticalGridAlignment!==f||b.grid.horizontalGridAlignment!==f,b.grid.verticalGridAlignment=f,b.grid.horizontalGridAlignment=f,b.grid.cellPadding.top=0,b.grid.cellPadding.left=0,b.grid.cellPadding.right=0,b.grid.cellPadding.bottom=0,b.grid.minCellAspectRatio=0,b.grid.maxCellAspectRatio=Infinity;else{b.elem.verticalPosition?(m=b.grid.verticalGridAlignment!==h,b.grid.verticalGridAlignment= +h):(m=b.grid.verticalGridAlignment!==f,b.grid.verticalGridAlignment=f);b.elem.horizontalPosition?(m=m||b.grid.horizontalGridAlignment!==h,b.grid.horizontalGridAlignment=h):(m=m||b.grid.horizontalGridAlignment!==f,b.grid.horizontalGridAlignment=f);const w=up(b,b.elem.horizontalPosition)||fm,l=up(b,b.elem.verticalPosition)||gm;b.grid.computeItemPosition=(p,n,q,t)=>({x:w(p,n,q,t),y:l(p,n,q,t)});f=b.elem.verticalPosition?8:0;h=b.elem.horizontalPosition?8:0;m=m||0!==d.top||f!==d.left||0!==d.right||h!== +d.bottom;b.grid.cellPadding.top=0;b.grid.cellPadding.right=0;b.grid.cellPadding.left=f;b.grid.cellPadding.bottom=h;b.grid.minCellAspectRatio=1;b.grid.maxCellAspectRatio=2}m?(tm(b.grid),hp(b)):sm(b.grid);ip(b);jp(b);En(b);Fn(b);b.fitToViewport()}} +function vp(b){if(b.grid){var d=b.elem.colorBy;if(d in b.stats){d=b.stats[d];var f=wp(b);d=d.uniqueCount>f.length&&on(d)?xp(b):yp(b,f);f=b.grid.items;var h=Date.now(),m=h+b.elem.tweenDuration;for(var w=0;w{b.atlasUrlChangeTimer&&b.atlasUrlChange()},100)} +function op(b){const d=b.grid.items;Mm(b.spriteMesh.spriteAtlas);const f=Date.now(),h=f+b.elem.fadeDuration;for(let m=0;m+f)return{facetingFunction:()=>"",keyCompareFunction:()=>0,labelingFunction:un};const w=b.stats[d];if(w.wordTree&&1d in p.data?p.data[d]:null,keyCompareFunction:on(w)?em:m?dm:cm,labelingFunction:un};if(on(w)&&w.numberMax!==w.numberMin)return Bp(b,d,f);b=Object.keys(w.valueHash);b.sort((p,n)=>w.valueHash[n].count-w.valueHash[p].count);const l=b.slice(0, +f).reduce((p,n)=>{p[n]=!0;return p},{});return{facetingFunction:p=>{if(!(d in p.data))return null;p=p.data[d];return ln(p)in l?p:"\ufffcOTHER\ufffc"},keyCompareFunction:m?dm:cm,labelingFunction:un}}function up(b,d){b=b.stats[d];if(!b||!on(b))return null;const f=d3.scaleLinear().domain([b.numberMin,b.numberMax]).nice();return h=>f(h.data[d])}function wp(b){switch(b.elem.paletteChoice){case "warm":return xn;case "cool":return wn;case "assist":return yn;default:return vn}} +function xp(b){const d=b.elem.colorBy,f=b.stats[d];var h=b.grid.items,m=d3.rgb("#A52714"),w=d3.scaleLinear();w.domain([f.numberMin,f.numberMax]).range(["white","#1C3AA9"]).nice();const l=[];for(var p=0;p{if(!(d in q.data||d in t.data))return 0;if(!(d in q.data))return-1;if(!(d in t.data))return 1;q=q.data[d];t=t.data[d];if(q===t)return 0;const v="number"!==typeof q||isNaN(q),z="number"!==typeof t||isNaN(t);return v&&z?0:v?-1:z?1:q-t};return l} +function yp(b,d){const f=b.elem.colorBy,h=b.stats[f],m=b.grid.items,w=Object.keys(h.valueHash);b.elem.stableColors?w.sort():w.sort((z,y)=>h.valueHash[y].count-h.valueHash[z].count);const l=Math.min(d.length,w.length),p=w.slice(0,l).reduce((z,y,x)=>{z[y]=x;return z},{}),n=d3.rgb("#F0F0F0"),q=d.map(z=>d3.rgb(z));let t=!1;const v=[];for(let z=0;z{y=h.valueHash[w[y]].value;return{key:y,color:z,content:{label:y+ +"",special:"number"!==typeof y&&"string"!==typeof y||y in tn}}});t&&d.push({key:null,color:"#F0F0F0",content:{label:"other",special:!0}});b.elem.set("palette",d);b.grid.cellItemComparator=(z,y)=>{if(!(f in z.data||f in y.data))return 0;if(!(f in z.data))return 1;if(!(f in y.data))return-1;z=z.data[f];y=y.data[f];if(z===y)return 0;z=ln(z);y=ln(y);return z in p||y in p?z in p?y in p?p[z]-p[y]:-1:1:0};return v} +function zp(b){"stacked"!==b.elem.positionMode&&b.elem.verticalPosition&&b.elem.horizontalPosition||tp(b)} +function Ap(b,d,f,h){const m=b.stats[d].wordTree,w=m.levelHash;return{facetingFunction:l=>{if(!(d in l.data))return null;for(l=m.nodeHash[ln(l.data[d])];l.parent&&l.level>f;)l=l.parent;return l.level},keyCompareFunction:(l,p)=>{l=w[l];p=w[p];if(void 0===l&&void 0===p)return 0;if(void 0===l)return-1;if(void 0===p)return 1;if(l.nonValueCount&&p.nonValueCount)return 0;if(l.nonValueCount)return-1;if(p.nonValueCount)return 1;p=p.order-l.order;return h?p:-p},labelingFunction:l=>{l=w[+l];if(!l.parent&&!l.commonWords.length)return{label:"other", +special:!0};if(l.nonValueCount)return{label:"non-words",special:!0};let p=` ${"\u2022"} ${l.commonWords.join(" ")}`;for(let n=0;nf){p+=" \u2026";break}for(;l.parent;)l=l.parent,l.commonWords.length&&(p=` ${"\u2022"} ${l.commonWords.join(" ")} `+p);return{label:p}}}} +function Bp(b,d,f){const h=b.stats[d],[m,w]=d3.scaleLinear().domain([h.numberMin,h.numberMax]).nice().domain(),l=w-m;let p=1;for(b=0;b{if(!(d in q.data))return null;q=q.data[d];return"number"!==typeof q?q:isNaN(q)?q:Math.min(Math.floor(f*(q-m)/l),f-1)},keyCompareFunction:em,labelingFunction:q=>{if("number"!==typeof q||isNaN(+q))return un(q);const t=q/f*l+m;q=(1+q)/f*l+m;return h.isInteger()?{label:Dp(Math.ceil(t), +Math.floor(q),p)}:{label:Dp(t,q,p)}}}}function Cp(b,d,f=1){for(;100>=f&&b.toPrecision(f)===d.toPrecision(f);)f++;return f}function Dp(b,d,f=3){if(b===d)return In(b,f);f=Cp(b,d,f);return`${In(b,f)} \u2014 ${In(d,f)}`} +class Ep{constructor(b){this.elem=b;this.endTimestamp=0;this.renderQueued=!1;this.labels=[];this.autoColorBy=!1;this.horizontalFacetInfo=this.verticalFacetInfo=null}ready(){this.layout=new Dm;this.holder=this.elem.$.holder;this.elem.scopeSubtree(this.holder,!0);this.cellBackgroundSVG=d3.select(this.holder).append("svg").style("left",0).style("position","absolute").style("top",0);this.cellBackgroundSVGRoot=this.cellBackgroundSVG.append("g").attr("class","root");this.cellBackgroundLayer=this.cellBackgroundSVGRoot.append("g").attr("class", +"labels");this.scene=new THREE.Scene;this.camera=new THREE.OrthographicCamera(0,100,0,100,.1,1E3);try{this.renderer=new THREE.WebGLRenderer({alpha:!0}),this.renderer.setPixelRatio(),d3.select(this.renderer.domElement).style("left",0).style("pointer-events","none").style("position","absolute").style("top",0),this.holder.appendChild(this.renderer.domElement)}catch(b){}this.zoom=d3.zoom().scaleExtent([1,500]).on("zoom",this.zoomed.bind(this));d3.select(this.elem).call(this.zoom);this.labelsAndAxesSVG= +d3.select(this.holder).append("svg").style("left",0).style("position","absolute").style("top",0);this.labelsAndAxesSVGRoot=this.labelsAndAxesSVG.append("g").attr("class","root");this.labelsLayer=this.labelsAndAxesSVGRoot.append("g").attr("class","labels");this.axesLayer=this.labelsAndAxesSVGRoot.append("g").attr("class","axes");this.comparedLayer=this.labelsAndAxesSVGRoot.append("g").attr("class","comparedboxes");this.selectedLayer=this.labelsAndAxesSVGRoot.append("g").attr("class","selectedboxes"); +this.labelsAndAxesSVG.on("click",this.clicked.bind(this));this.renderer||(this.labelsAndAxesSVG.style("display","none"),this.cellBackgroundSVG.style("display","none"),d3.select(this.holder).append("p").attr("class","error").style("color","darkred").html('\n \x3cstrong\x3eERROR\x3c/strong\x3e: Facets Dive requires WebGL, and it is not\n enabled in your browser. See\n \x3ca rel\x3d"noreferrer" href\x3d"http://webglreport.com/"\x3e\n WebGL Report\x3c/a\x3e for details.\n '))}zoomed(){const {x:b, +y:d,k:f}=d3.event.transform,h=this.scale/f;this.camera.top*=h;this.camera.left*=h;this.camera.right*=h;this.camera.bottom*=h;this.camera.position.set(-b/f,d/f,this.camera.position.z);this.camera.updateProjectionMatrix();this.scale=f;Bn(this);Cn(this);Dn(this)}clicked(){var b=this.elem.getBoundingClientRect(),d=d3.event;b=hn(this.spriteMesh,this.camera.position.x+(d.clientX-b.left)/this.scale,this.camera.position.y-(d.clientY-b.top)/this.scale);var f={};if(d.ctrlKey)for(d=0;d+h)));b=[];for(f=0;fthis.fitToViewport(),100)}zoomIn(){this.zoom.scaleBy(d3.select(this.elem),1.1)}zoomOut(){this.zoom.scaleBy(d3.select(this.elem),1/1.1)}isVisible(b,d){var f=this.scale;var h=this.camera.position,m=this.camera;if(void 0!==b.minScale)f=b.scaleDown||f>=b.minScale;else if(b.boundingBox){var w=b.boundingBox;w.left>h.x+m.right|| +w.righth.y+m.top||w.top=h&&d*f>=b)}else f=!0;return f}atlasUrlChange(){clearTimeout(this.atlasUrlChangeTimer);delete this.atlasUrlChangeTimer; +if(this.spriteMesh){var b=this.elem.atlasUrl;b&&b.length&&b!==this.lastAtlasUrl&&(this.lastAtlasUrl=b,op(this),Pm(this.spriteMesh.spriteAtlas,b,this.elem.crossOrigin,()=>{const d=this.elem.data,f=Date.now(),h=f+this.elem.fadeDuration;for(let m=0;d&&m{const f=this.spriteMesh.defaultTextureCanvas,h=f.getContext("2d");h.clearRect(0,0,f.width,f.height);h.drawImage(d,0,0,f.width,f.height);this.spriteMesh.defaultTexture.needsUpdate=!0;Dn(this)};d.src=b}else requestAnimationFrame(this.spriteUrlChange.bind(this))}getKeys(){var b;if((b=this.elem.data)&&b.length){var d={};for(let f=0;fd&&(m=f,d=h));isFinite(d)&&m in b.stats&&b.elem.set("imageFieldName",m)}qp(b);tp(b);vp(b)}this._setKeys(this._backing.getKeys());this._setStats(this._backing.stats)}else requestAnimationFrame(this._dataChange.bind(this, +b))},_filteredDataIndicesChange(b){if(this._backing.scene&&this._backing.items){{b=this._backing;const h=b.elem.filteredDataIndices,m=[];if(h)for(var d=0;d @@ -7416,11 +21399,12 @@ @@ -7496,9 +21480,9 @@ Polymer({is:"iron-image",properties:{src:{type:String,value:""},alt:{type:String,value:null},preventLoad:{type:Boolean,value:!1},sizing:{type:String,value:null,reflectToAttribute:!0},position:{type:String,value:"center"},preload:{type:Boolean,value:!1},placeholder:{type:String,value:null,observer:"_placeholderChanged"},fade:{type:Boolean,value:!1},loaded:{notify:!0,readOnly:!0,type:Boolean,value:!1},loading:{notify:!0,readOnly:!0,type:Boolean,value:!1},error:{notify:!0,readOnly:!0,type:Boolean,value:!1}, width:{observer:"_widthChanged",type:Number,value:null},height:{observer:"_heightChanged",type:Number,value:null}},observers:["_transformChanged(sizing, position)","_loadStateObserver(src, preventLoad)"],created:function(){this._resolvedSrc=""},_imgOnLoad:function(){this.$.img.src===this._resolveSrc(this.src)&&(this._setLoading(!1),this._setLoaded(!0),this._setError(!1))},_imgOnError:function(){this.$.img.src===this._resolveSrc(this.src)&&(this.$.img.removeAttribute("src"),this.$.sizedImgDiv.style.backgroundImage= "",this._setLoading(!1),this._setLoaded(!1),this._setError(!0))},_computePlaceholderHidden:function(){return!this.preload||!this.fade&&!this.loading&&this.loaded},_computePlaceholderClassName:function(){return this.preload&&this.fade&&!this.loading&&this.loaded?"faded-out":""},_computeImgDivHidden:function(){return!this.sizing},_computeImgDivARIAHidden:function(){return""===this.alt?"true":void 0},_computeImgDivARIALabel:function(){return null!==this.alt?this.alt:""===this.src?"":this._resolveSrc(this.src).replace(/[?|#].*/g, -"").split("/").pop()},_computeImgHidden:function(){return!!this.sizing},_widthChanged:function(){this.style.width=isNaN(this.width)?this.width:this.width+"px"},_heightChanged:function(){this.style.height=isNaN(this.height)?this.height:this.height+"px"},_loadStateObserver:function(a,b){var c=this._resolveSrc(a);c!==this._resolvedSrc&&(this._resolvedSrc=c,this.$.img.removeAttribute("src"),this.$.sizedImgDiv.style.backgroundImage="",""===a||b?this._setLoading(!1):(this.$.img.src=this._resolvedSrc,this.$.sizedImgDiv.style.backgroundImage= -'url("'+this._resolvedSrc+'")',this._setLoading(!0)),this._setLoaded(!1),this._setError(!1))},_placeholderChanged:function(){this.$.placeholder.style.backgroundImage=this.placeholder?'url("'+this.placeholder+'")':""},_transformChanged:function(){var a=this.$.sizedImgDiv.style,b=this.$.placeholder.style;a.backgroundSize=b.backgroundSize=this.sizing;a.backgroundPosition=b.backgroundPosition=this.sizing?this.position:"";a.backgroundRepeat=b.backgroundRepeat=this.sizing?"no-repeat":""},_resolveSrc:function(a){a= -Polymer.ResolveUrl.resolveUrl(a,this.$.baseURIAnchor.href);"/"===a[0]&&(a=(location.origin||location.protocol+"//"+location.host)+a);return a}}); +"").split("/").pop()},_computeImgHidden:function(){return!!this.sizing},_widthChanged:function(){this.style.width=isNaN(this.width)?this.width:this.width+"px"},_heightChanged:function(){this.style.height=isNaN(this.height)?this.height:this.height+"px"},_loadStateObserver:function(b,d){var f=this._resolveSrc(b);f!==this._resolvedSrc&&(this._resolvedSrc=f,this.$.img.removeAttribute("src"),this.$.sizedImgDiv.style.backgroundImage="",""===b||d?this._setLoading(!1):(this.$.img.src=this._resolvedSrc,this.$.sizedImgDiv.style.backgroundImage= +'url("'+this._resolvedSrc+'")',this._setLoading(!0)),this._setLoaded(!1),this._setError(!1))},_placeholderChanged:function(){this.$.placeholder.style.backgroundImage=this.placeholder?'url("'+this.placeholder+'")':""},_transformChanged:function(){var b=this.$.sizedImgDiv.style,d=this.$.placeholder.style;b.backgroundSize=d.backgroundSize=this.sizing;b.backgroundPosition=d.backgroundPosition=this.sizing?this.position:"";b.backgroundRepeat=d.backgroundRepeat=this.sizing?"no-repeat":""},_resolveSrc:function(b){b= +Polymer.ResolveUrl.resolveUrl(b,this.$.baseURIAnchor.href);"/"===b[0]&&(b=(location.origin||location.protocol+"//"+location.host)+b);return b}}); @@ -7605,14 +21589,14 @@ @@ -7627,22 +21611,23 @@ overflow: auto; padding: 8px; } - ::content dt { + dt { color: #9e7c65; font-size: 14px; } - ::content dd { + dd { @apply --paper-font-common-code; color: #513726; margin: 0 0 16px 0; } +
@@ -7682,10 +21667,10 @@ @@ -7962,14 +21947,14 @@ @@ -8103,7 +22088,7 @@

Colors

@@ -8118,7 +22103,7 @@

Colors

* This CSS rule forces the containing element to have the correct height * in either case. */ - ::content paper-input-container > .floated-label-placeholder { + :host paper-input-container > .floated-label-placeholder { min-height: 20px; } @@ -8218,5 +22203,4 @@

Colors

Polymer({is:"facets-dive",properties:{data:{type:Array,value:null,notify:!0},filteredDataIndices:{type:Array,value:null},_keys:{type:Array,value:[]},stats:{type:Object,value:{},notify:!0},atlasUrl:{type:String,value:null,notify:!0},spriteUrl:{type:String,value:null,notify:!0},crossOrigin:{type:String,value:null,notify:!0},spriteImageWidth:{type:Number,value:64},spriteImageHeight:{type:Number,value:64},gridFacetingVerticalLabelColor:{type:String,value:"#666666"},gridFacetingHorizontalLabelColor:{type:String, value:"#dd6622"},itemPositioningVerticalLabelColor:{type:String,value:"#2255aa"},itemPositioningHorizontalLabelColor:{type:String,value:"#118844"},fitGridAspectRatioToViewport:{type:Boolean,value:!1},verticalFacet:{type:String,value:"",notify:!0},verticalBuckets:{type:Number,value:10,notify:!0},verticalBagOfWords:{type:Boolean,value:!1,notify:!0},horizontalFacet:{type:String,value:"",notify:!0},horizontalBuckets:{type:Number,value:10,notify:!0},horizontalBagOfWords:{type:Boolean,value:!1,notify:!0}, positionMode:{type:String,value:"stacked",notify:!0},verticalPosition:{type:String,value:"",notify:!0},horizontalPosition:{type:String,value:"",notify:!0},colorBy:{type:String,value:"",notify:!0},imageFieldName:{type:String,value:"",notify:!0},_palette:{type:Array,value:[]},paletteChoice:{type:String,value:"standard",notify:!0},selectedData:{type:Array,value:[],notify:!0},selectedIndices:{type:Array,value:[],notify:!0},comparedData:{type:Array,value:[],notify:!0},comparedIndices:{type:Array,value:[], -notify:!0},height:{type:Number,value:null,observer:"_updateHeight"},infoRenderer:{type:Object},hideInfoCard:{type:Boolean,value:!1},stableColors:{type:Boolean,value:!1}},ready:function(){var a=this.$;a.fitButton.onclick=function(){return a.vis.fitToViewport()};a.zoomInButton.onclick=function(){return a.vis.zoomIn()};a.zoomOutButton.onclick=function(){return a.vis.zoomOut()};this.hideInfoCard&&(a.vis.style.right="0");this._updateHeight()},_updateHeight:function(){null!==this.height&&(this.style.height= -"number"===typeof this.height?this.height+"px":this.height)}}); +notify:!0},height:{type:Number,value:null,observer:"_updateHeight"},infoRenderer:{type:Object},hideInfoCard:{type:Boolean,value:!1},stableColors:{type:Boolean,value:!1}},ready(){const b=this.$;b.fitButton.onclick=()=>b.vis.fitToViewport();b.zoomInButton.onclick=()=>b.vis.zoomIn();b.zoomOutButton.onclick=()=>b.vis.zoomOut();this.hideInfoCard&&(b.vis.style.right="0");null!==this.height&&(this.style.height="number"===typeof this.height?this.height+"px":this.height)}}); diff --git a/facets/BUILD b/facets/BUILD index 54dc02a..d18c956 100644 --- a/facets/BUILD +++ b/facets/BUILD @@ -14,8 +14,7 @@ tf_web_library( deps = [ "//facets_dive/components/facets_dive", "//facets_overview/components/facets_overview", - "@org_polymer_web_animations_js", - "@org_tensorflow_tensorboard//tensorboard/components/tf_imports:webcomponentsjs", + "@org_tensorflow_tensorboard//tensorboard/components:polymer", ], ) diff --git a/facets/visualizations.html b/facets/visualizations.html index 378aa8f..a3db507 100644 --- a/facets/visualizations.html +++ b/facets/visualizations.html @@ -1,4 +1,3 @@ - - + \ No newline at end of file diff --git a/facets_dive/demo/BUILD b/facets_dive/demo/BUILD index 795ced2..e0631c1 100644 --- a/facets_dive/demo/BUILD +++ b/facets_dive/demo/BUILD @@ -16,9 +16,8 @@ tf_web_library( deps = [ "//facets_dive/components/facets_dive", "//facets_dive/lib/test:externs", - "@org_polymer_web_animations_js", + "@org_tensorflow_tensorboard//tensorboard/components:polymer", "@org_tensorflow_tensorboard//tensorboard/components/tf_imports:d3", - "@org_tensorflow_tensorboard//tensorboard/components/tf_imports:webcomponentsjs", ], ) diff --git a/facets_dive/demo/quickdraw.html b/facets_dive/demo/quickdraw.html index 2d36645..19a508c 100644 --- a/facets_dive/demo/quickdraw.html +++ b/facets_dive/demo/quickdraw.html @@ -18,8 +18,7 @@ - - +